:root {
  --gold: #f5c542;
  --gold-dark: #a8791c;
  --deep: #120c06;
  --panel: #1e1509;
  --panel-2: #2a1e0e;
  --line: #6b4d1c;
  --green: #2e8b3d;
  --red: #a1281f;
  --text: #f3e6c8;
  --dim: #b9a479;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Pyidaungsu', 'Myanmar Text', 'Noto Sans Myanmar', system-ui, sans-serif;
  /* Myanmar temple-gate scene behind a dark wash so the reels stay readable */
  background:
    linear-gradient(180deg, rgba(10,7,4,.82), rgba(10,7,4,.9)),
    url('../assets/board/bg.jpg') center top / cover no-repeat fixed,
    radial-gradient(ellipse at 50% 0%, #3a2a12 0%, #150e06 55%, #0a0704 100%);
  color: var(--text);
  min-height: 100vh;
  padding: 16px;
}

.wrap { max-width: 1080px; margin: 0 auto; }

/* ---------- header ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.logo { line-height: 1.05; }
.logo .b1 {
  font-family: Georgia, serif; font-size: 22px; letter-spacing: 4px;
  color: var(--gold); text-shadow: 0 2px 0 var(--gold-dark);
}
.logo .b2 {
  font-family: Georgia, serif; font-size: 38px; font-weight: 700; letter-spacing: 2px;
  background: linear-gradient(180deg, #ffe9a3, #f5c542 45%, #b5811d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo .mm { font-size: 15px; color: var(--dim); margin-top: 2px; }

.top-links { display: flex; gap: 8px; }
.top-links a {
  color: var(--gold); text-decoration: none; border: 1px solid var(--line);
  padding: 7px 12px; border-radius: 8px; font-size: 14px; background: var(--panel);
}
.top-links a:hover { background: var(--panel-2); }

/* ---------- meters ---------- */
.meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.meter {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; text-align: center;
}
.meter .lbl { font-size: 13px; color: var(--dim); }
.meter .val { font-size: 22px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.meter.win .val { color: #7ee08a; }

/* ---------- reels ---------- */
.machine {
  position: relative;
  /* frame keeps its true proportions (no stretch): its window band was pre-sized
   * to the 5x4 reel grid, so background-size 100% 100% shows it undistorted */
  aspect-ratio: 996 / 1197;
  max-width: 560px;
  margin: 0 auto;
}
/* the frame is drawn ABOVE the reels so its inner borders overlap the symbols;
 * pointer-events: none keeps clicks reaching the game underneath */
.machine::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background: url('../assets/board/frame.png?a=10') center / 100% 100% no-repeat;
  pointer-events: none;
}
/* the reels sit exactly inside the frame's window bays, underneath the frame */
.reels {
  position: absolute; z-index: 1;
  left: 14.2%; right: 14.2%; top: 37%;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
  margin: 0;
}
.ways-badge, .fs-banner { z-index: 4; }
.ways-badge {
  position: absolute; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; font-size: 13px; letter-spacing: 3px;
  color: #1a1206; background: linear-gradient(180deg, #ffe9a3, #d9a52c);
  padding: 14px 4px; border-radius: 6px; font-weight: 700;
}
.ways-badge.left { left: -2px; }
.ways-badge.right { right: -2px; }

/* The reel is a 4-row window; .strip is taller and slides through it.
 *
 * The window height is pure CSS — one column wide, four square cells tall. It used
 * to be measured in JS and written as a pixel height, which went stale whenever the
 * cell width changed underneath it (a scrollbar appearing is enough) and clipped the
 * bottom row in half. aspect-ratio can't go stale. */
.reel {
  aspect-ratio: 1 / 4;
  overflow: hidden; border-radius: 8px; position: relative;
  transition: box-shadow .2s ease;
}
.strip { display: flex; flex-direction: column; gap: 0; will-change: transform; }
.strip.spinning .cell img { filter: blur(3px) brightness(.8); }
.strip.spinning .cell { border-color: #4a3512; }

/* the reel that could still land the feature */
.reel.anticipate {
  box-shadow: 0 0 0 3px #ffd45e, 0 0 30px #ffbe2e;
  animation: antic .5s ease-in-out infinite;
}
@keyframes antic { 50% { box-shadow: 0 0 0 3px #fff3c9, 0 0 44px #ffd45e; } }

/* each reel lands with a thump — the strip overshoots, then the whole column
 * rebounds and flashes, so the stop is felt rather than just seen */
.reel.landed { animation: landed .28s cubic-bezier(.25, 1.5, .5, 1); }
@keyframes landed {
  0% { transform: translateY(-5px) scaleY(1.03); }
  55% { transform: translateY(3px) scaleY(.985); }
  100% { transform: none; }
}
.reel.landed::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(255, 236, 180, .16);
  animation: landFlash .25s ease-out forwards;
}
@keyframes landFlash { to { opacity: 0; } }

/* Painted full-bleed tiles. The card royals are pre-normalised by
 * tools/extract-symbols.py so every glyph lands at the same size and centre —
 * cropping them raw made the letters look like they were jumping between cells. */
.cell {
  aspect-ratio: 1 / 1;
  background: #0e0a05;
  border: 2px solid #6b4d1c; border-radius: 8px;
  position: relative; overflow: hidden;
}
.cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
}

/* WILD and SCATTER announce themselves even before they pay */
.cell.wild {
  border-color: #ffd45e;
  box-shadow: inset 0 0 22px rgba(255, 190, 46, .45);
  animation: wildGlow 1.6s ease-in-out infinite;
}
@keyframes wildGlow {
  50% { box-shadow: inset 0 0 30px rgba(255, 212, 94, .75), 0 0 14px rgba(255, 190, 46, .5); }
}
.cell.scatter {
  border-color: #7ee08a;
  animation: scatterPulse 1s ease-in-out infinite;
}
.cell.scatter img { animation: scatterZoom 1s ease-in-out infinite; }
@keyframes scatterPulse {
  50% { box-shadow: 0 0 0 3px #7ee08a, 0 0 26px rgba(126, 224, 138, .8); }
}
@keyframes scatterZoom { 50% { transform: scale(1.06); } }
/* A winning symbol pops forward, glows gold, and a shine sweeps across it. */
.cell.win {
  z-index: 3;
  border-color: #ffe9a3;
  box-shadow: 0 0 0 3px #ffd45e, 0 0 30px #ffbe2e;
  animation: winPop .5s cubic-bezier(.3, 1.6, .5, 1);
}
.cell.win img {
  animation: pulse .7s ease-in-out infinite;
  filter: brightness(1.2) saturate(1.15);
}
.cell.win::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 35%, rgba(255, 245, 210, .75) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shine 1.3s ease-in-out .15s infinite;
}
@keyframes winPop {
  0% { transform: scale(1); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes shine { to { transform: translateX(120%); } }

/* Everything else steps back, so the eye goes to the line that paid. */
.cell.dim img {
  filter: brightness(.4) saturate(.45);
  transition: filter .25s ease;
}
/* Wild multiplier badge — colour-coded by tier, like the art sheet.
 * Pinned to the top corner: the WILD artwork already has the word "WILD" burnt
 * across its lower half, and a centred badge landed right on top of it. */
.cell .mult {
  position: absolute; top: 5px; left: 5px;
  padding: 1px 9px 2px; border-radius: 999px;
  background: rgba(8, 5, 2, .82);
  border: 2px solid currentColor;
  font-family: Georgia, serif; font-weight: 700;
  font-size: clamp(13px, 2.2vw, 21px);
  color: #fff;
  text-shadow: 0 1px 3px #000;
  box-shadow: 0 0 12px currentColor;
  animation: multPop .45s ease-out;
}
.cell .mult.m2  { color: #6ee07d; }
.cell .mult.m3  { color: #6fc4ff; }
.cell .mult.m5  { color: #c58bff; }
.cell .mult.m10 { color: #ff6b6b; animation: multPop .45s ease-out, multFlash .6s ease-in-out infinite; }
@keyframes multPop { from { transform: scale(.4); opacity: 0; } }
@keyframes multFlash { 50% { color: #fff3c9; } }
@keyframes pulse { 50% { transform: scale(1.06); } }

/* ---------- big win overlay ---------- */
.bigwin {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center; flex-direction: column;
  background: radial-gradient(ellipse at center, rgba(80,55,10,.92), rgba(8,5,2,.95));
  backdrop-filter: blur(2px);
}
.bigwin.on { display: flex; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.bigwin .bw-coins {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.bigwin .bw-label {
  font-size: clamp(18px, 4vw, 30px); color: var(--gold); letter-spacing: 2px;
  text-shadow: 0 0 24px #ffbe2e; animation: bwPop .5s ease-out;
  position: relative; z-index: 1; text-align: center; padding: 0 12px;
}

/* each tier gets its own colour, so the size of a win reads instantly */
.bigwin.nice     .bw-label { color: #f3e6c8; text-shadow: 0 0 22px #c9a23f; }
.bigwin.big      .bw-label { color: #7fd0ff; text-shadow: 0 0 26px #2f8fd8; }
.bigwin.mega     .bw-label { color: #ffd45e; text-shadow: 0 0 26px #e0940f; }
.bigwin.super    .bw-label { color: #8ef09a; text-shadow: 0 0 26px #2e8b3d; }
.bigwin.epic     .bw-label { color: #d59aff; text-shadow: 0 0 26px #8a3fd0; }
.bigwin.legendary .bw-label { color: #ffab5e; text-shadow: 0 0 30px #d2542c; }
.bigwin.jackpot  .bw-label {
  color: #ff6b6b; text-shadow: 0 0 34px #ff2e2e;
  font-size: clamp(24px, 5.5vw, 44px);
  animation: bwPop .5s ease-out, jackpotFlash .55s ease-in-out infinite;
}
@keyframes jackpotFlash { 50% { color: #fff3c9; text-shadow: 0 0 46px #ffd45e; } }

/* tier-upgrade roll-up support */
.bigwin.on { cursor: pointer; }
.bigwin .bw-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bigwin .bw-label.pop { animation: bwPop .45s cubic-bezier(.2, 1.6, .4, 1); }
.bigwin.jackpot .bw-label.pop { animation: bwPop .45s cubic-bezier(.2, 1.6, .4, 1), jackpotFlash .55s ease-in-out infinite; }
.bigwin .bw-sub {
  position: relative; z-index: 1; color: var(--dim); font-size: 14px;
  letter-spacing: 1px; margin-bottom: 4px;
}
.bigwin .bw-tap {
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  color: rgba(243, 230, 200, .55); font-size: 12px; letter-spacing: 2px;
  animation: tapHint 1.6s ease-in-out infinite;
}
@keyframes tapHint { 50% { opacity: .35; } }

/* GRAND JACKPOT screen shake */
body.bw-shake { animation: bwShake .7s cubic-bezier(.36, .07, .19, .97); }
@keyframes bwShake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-7px, 3px); }
  40%, 60% { transform: translate(7px, -3px); }
}

.bigwin.legendary, .bigwin.jackpot {
  background: radial-gradient(ellipse at center, rgba(120,40,10,.94), rgba(10,4,2,.96));
}
.bigwin .bw-amt {
  font-family: Georgia, serif; font-weight: 700;
  font-size: clamp(44px, 11vw, 110px);
  background: linear-gradient(180deg, #fff6d4, #f5c542 45%, #b5811d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 0 26px rgba(245,197,66,.75));
  animation: bwPop .5s ease-out;
  position: relative; z-index: 1;
}
@keyframes bwPop { from { transform: scale(.6); opacity: 0; } }

/* free-game mood */
body.free-game { background: radial-gradient(ellipse at 50% 0%, #123a20 0%, #08160d 55%, #040804 100%); }
body.free-game .machine { border-color: #4caf50; box-shadow: 0 0 44px rgba(126,224,138,.18) inset; }

.spin-btn.busy { animation: busy 1s linear infinite; }
@keyframes busy { 50% { filter: brightness(1.25); } }

/* ---------- free-spin banner ---------- */
.fs-banner {
  display: none; margin: 10px 22px 0; padding: 8px 12px; text-align: center;
  background: linear-gradient(90deg, #3a2a10, #6b4d1c, #3a2a10);
  border: 1px solid var(--gold-dark); border-radius: 8px; color: var(--gold);
  font-size: 15px;
}
.fs-banner.on { display: block; }

/* ---------- controls ---------- */
.controls {
  margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center;
}
button {
  font-family: inherit; cursor: pointer; border-radius: 10px;
  border: 2px solid var(--gold-dark); color: var(--text);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 10px 16px; font-size: 14px;
}
button:hover:not(:disabled) { border-color: var(--gold); }
button:disabled { opacity: .45; cursor: not-allowed; }
button .en { display: block; font-size: 11px; color: var(--dim); letter-spacing: 1px; }

.spin-btn {
  background: linear-gradient(180deg, #3fbf55, #1d6b2c);
  border-color: #7ee08a; font-size: 17px; font-weight: 700; padding: 12px 30px;
}
.spin-btn .en { color: #d6ffd9; }
.auto-btn.on { background: linear-gradient(180deg, #a1281f, #611711); border-color: #ff9b8b; }

.icon-btn { font-size: 20px; padding: 8px 12px; line-height: 1; }
.icon-btn .en { font-size: 9px; }
.icon-btn.off { opacity: .5; border-color: #4a3512; }

/* bet −/+ stepper */
.bet-stepper {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px 10px;
}
.bet-stepper button {
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 26px; font-weight: 700; line-height: 1; padding: 0;
  background: linear-gradient(180deg, #d2884a, #7c4d24); border-color: #f0b070;
  color: #fff;
}
.bet-stepper button:disabled { opacity: .4; }
.bet-display { min-width: 150px; text-align: center; }
.bet-display .bet-lbl { font-size: 11px; color: var(--dim); }
.bet-display .bet-val {
  font-size: 24px; font-weight: 700; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.bet-display .bet-val small { font-size: 13px; color: var(--dim); font-weight: 400; }

#autoCount {
  width: auto; text-align: center; padding: 10px 12px;
  border-radius: 10px; border: 2px solid var(--gold-dark);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  font-size: 14px;
}
#autoCount:disabled { opacity: .45; }

/* speed selector */
.seg {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px 10px;
}
.seg-lbl { font-size: 12px; color: var(--dim); margin-right: 4px; }
.seg button { padding: 6px 14px; font-size: 13px; border-width: 1px; }
.seg button.on {
  background: linear-gradient(180deg, #f5c542, #a8791c);
  color: #241703; border-color: #ffe9a3;
}
.seg button.on .en { color: #4a3308; }

.bets { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.chip {
  width: 64px; height: 64px; border-radius: 50%;
  border: 3px dashed rgba(255,255,255,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #4a4a4a, #262626);
}
.chip small { font-size: 10px; font-weight: 400; opacity: .85; }
.chip:nth-child(1) { background: linear-gradient(180deg, #4caf50, #2b6c2f); }
.chip:nth-child(2) { background: linear-gradient(180deg, #4a7fd4, #24457c); }
.chip:nth-child(3) { background: linear-gradient(180deg, #9257c9, #542f76); }
.chip:nth-child(4) { background: linear-gradient(180deg, #d24a4a, #7c2424); }
.chip:nth-child(5) { background: linear-gradient(180deg, #d2884a, #7c4d24); }
.chip:nth-child(6) { background: linear-gradient(180deg, #d2bb4a, #7c6c24); color: #2a1c08; }
.chip.sel { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(245,197,66,.7); }

/* ---------- message ---------- */
.msg {
  margin-top: 10px; text-align: center; min-height: 26px;
  font-size: 16px; color: var(--gold);
}
.msg.big { font-size: 20px; font-weight: 700; color: #7ee08a; }

/* ---------- paytable ---------- */
.paytable { margin-top: 20px; }
.paytable h2 {
  font-size: 17px; color: var(--gold); margin-bottom: 10px; text-align: center;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pt-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; text-align: center;
}
.pt-card .ico {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line); display: block;
}
.pt-card .nm { font-size: 13px; color: var(--text); margin: 2px 0 4px; }
.pt-card .pays { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; line-height: 1.5; }
.pt-card .pays b { color: var(--gold); }
.pt-note { font-size: 12px; color: var(--dim); text-align: center; margin-top: 10px; line-height: 1.7; }

/* ---------- admin ---------- */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .admin-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px; margin-bottom: 14px;
}
.card h3 {
  font-size: 15px; color: var(--gold); margin-bottom: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.row label { font-size: 14px; color: var(--text); }
.row .hint { display: block; font-size: 11px; color: var(--dim); }
input[type=number], input[type=text], input[type=password], select {
  font-family: inherit; background: #100b05; color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  width: 130px; text-align: right; font-variant-numeric: tabular-nums;
}
input[type=range] { width: 100%; accent-color: var(--gold); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--gold); }

.rtp-display { text-align: center; padding: 10px 0; }
.rtp-display .num { font-size: 46px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.rtp-display .sub { font-size: 13px; color: var(--dim); }
.rtp-bar { height: 10px; border-radius: 6px; background: linear-gradient(90deg,#a1281f,#d2a84a,#2e8b3d); margin: 8px 0 4px; position: relative; }
.rtp-bar .knob { position: absolute; top: -4px; width: 4px; height: 18px; background: #fff; border-radius: 2px; }
.rtp-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.stat .k { font-size: 11px; color: var(--dim); }
.stat .v { font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }

.log {
  background: #0c0804; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px; font-family: Consolas, monospace; font-size: 12px;
  color: #9fd8a5; height: 150px; overflow-y: auto; white-space: pre-wrap;
}
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-primary { background: linear-gradient(180deg, #3fbf55, #1d6b2c); border-color: #7ee08a; }
.btn-warn { background: linear-gradient(180deg, #c95a2c, #7a3316); border-color: #f0a06a; }

.gate { max-width: 340px; margin: 80px auto; text-align: center; }
.gate input { width: 100%; text-align: center; margin: 12px 0; }

.banner {
  background: #3a2410; border: 1px solid var(--gold-dark); color: var(--gold);
  padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; line-height: 1.7;
}

.footer { text-align: center; font-size: 12px; color: var(--dim); margin-top: 18px; line-height: 1.8; }

/* ---------- ?preview=1 QA toolbar ---------- */
.preview-bar {
  position: fixed; left: 10px; bottom: 10px; z-index: 60;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  background: rgba(14, 10, 5, .92); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; max-width: 96vw;
}
.preview-bar span { font-size: 11px; color: var(--dim); letter-spacing: 1px; }
.preview-bar button {
  font: inherit; font-size: 12px; padding: 5px 9px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  cursor: pointer;
}
.preview-bar button:hover { background: #3a2a12; }
.preview-bar .pv-jackpot { border-color: #ff6b6b; color: #ff9c9c; }
.preview-bar .pv-legendary { border-color: #ffab5e; color: #ffcf9e; }

/* ============================================================ entry / auth screen */
.auth-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background:
    linear-gradient(180deg, rgba(8,5,3,.82), rgba(8,5,3,.92)),
    url('../assets/board/bg.jpg') center / cover no-repeat,
    #0a0704;
  animation: auFade .4s ease;
}
.auth-screen.leaving { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
@keyframes auFade { from { opacity: 0; } }

.au-card {
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, rgba(34,23,8,.96), rgba(15,10,5,.98));
  border: 1px solid var(--gold-dark); border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.6), 0 0 40px rgba(245,197,66,.12) inset;
  padding: 26px 22px; text-align: center;
}
.au-logo .b1 { font-family: Georgia, serif; font-size: 20px; letter-spacing: 5px; color: var(--gold); }
.au-logo .b2 {
  font-family: Georgia, serif; font-size: 40px; font-weight: 700; letter-spacing: 2px; line-height: 1;
  background: linear-gradient(180deg, #ffe9a3, #f5c542 45%, #b5811d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.au-logo .mm { font-size: 13px; color: var(--dim); margin: 4px 0 18px; }

.au-err {
  display: none; background: #3a1512; border: 1px solid #7a2a20; color: #ffb4a8;
  border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 12px;
}
.au-err.on { display: block; animation: auFade .2s ease; }

.au-pane { display: none; }
.au-pane.on { display: block; animation: auFade .25s ease; }

.au-guest {
  width: 100%; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
  color: #14100a; padding: 15px; border: none; border-radius: 12px;
  background: linear-gradient(180deg, #ffe08a, #f5c542 55%, #d29a1f);
  box-shadow: 0 6px 18px rgba(245,197,66,.3);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.au-guest:hover { filter: brightness(1.06); }
.au-guest .en { font-size: 11px; font-weight: 600; letter-spacing: 1px; opacity: .8; }

.au-or { color: var(--dim); font-size: 12px; margin: 14px 0; position: relative; }
.au-or::before, .au-or::after {
  content: ''; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--line);
}
.au-or::before { left: 0; } .au-or::after { right: 0; }

.au-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.au-row button, .au-back {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--text); padding: 12px 8px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel-2);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.au-row button:hover { background: #3a2a12; border-color: var(--gold-dark); }
.au-row .en { font-size: 10px; color: var(--dim); letter-spacing: 1px; }

.au-pane form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.au-pane label { font-size: 12px; color: var(--dim); display: flex; flex-direction: column; gap: 5px; }
.au-pane input {
  font: inherit; font-size: 15px; color: var(--text); padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: #120c06;
}
.au-pane input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,197,66,.2); }
.au-primary {
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; color: #14100a;
  padding: 13px; border: none; border-radius: 11px; margin-top: 4px;
  background: linear-gradient(180deg, #ffe08a, #f5c542 55%, #d29a1f);
}
.au-primary:hover { filter: brightness(1.06); }
.au-back { background: transparent; border: none; color: var(--dim); font-size: 13px; }
.au-back:hover { color: var(--gold); }

.au-note { margin-top: 18px; font-size: 11px; color: var(--dim); line-height: 1.5; }

/* header account chip */
.acct-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 6px 5px 10px; font-size: 13px;
}
.ac-badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: 700; }
.ac-badge.guest { background: #3a2a12; color: var(--gold); }
.ac-badge.user { background: #143a1c; color: #8ef09a; }
.ac-name { color: var(--text); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-out {
  font: inherit; cursor: pointer; color: var(--dim); background: transparent;
  border: none; font-size: 15px; padding: 2px 4px; border-radius: 6px;
}
.ac-out:hover { color: #ffb4a8; background: #3a1512; }