/* Palette: "Lacquer & Brass" — 1980s Wall Street excess, matching the card art direction
   (see CLAUDE.md). Black lacquer ground, brass for money, marble cream for text, oxblood
   for losses. Replaced the original green casino felt, which read as poker night and
   fought the cards. Everything below is driven off these tokens — swapping them swaps
   the whole theme. */
:root{
  --felt:#12100E; --felt2:#241F19; --panel:#1B1815; --panel2:#241F19;
  --gold:#C9A227; --gold2:#8C6D1F; --parch:#EFE7DA; --muted:#8C837A;
  --muted2:#B3AAA0;              /* muted, but for small type — see the .inv tile rules */
  --up:#5FA777; --down:#A8323C; --line:#2E2822; --chip:#241F19;
  --ink:#0A0908;                 /* deepest inset — inputs, log wells, the tape */
  --shadow: rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0;background:
  radial-gradient(120% 90% at 50% -10%, #241F19 0%, var(--felt) 45%, #0A0908 100%);
  color:var(--parch);font-family:Archivo,system-ui,sans-serif;min-height:100%}
body{padding:0}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
h1,h2,h3,.disp{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.02em;text-transform:uppercase}
a{color:var(--gold)}
/* .btnlike rides along on every button rule so a non-<button> control (the Custom game
   <summary>) is the same control, not a copy of one that drifts when buttons change. */
button,.btnlike{font-family:inherit;cursor:pointer;border:none;border-radius:8px;
  padding:9px 14px;font-weight:600;font-size:14px;transition:.12s;background:var(--chip);color:var(--parch);box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 2px 6px var(--shadow)}
button:hover,.btnlike:hover{filter:brightness(1.12)}
button:active,.btnlike:active{transform:translateY(1px)}
button:disabled{opacity:.4;cursor:not-allowed}
/* Brass key with real travel (borrowed from the Brass Plate study): a lit top edge, a
   dark under-edge, and a solid block beneath that collapses on press. */
button.gold{background:linear-gradient(180deg,#EFD483 0%,var(--gold) 38%,var(--gold2) 100%);color:#1A1509;
  border:1px solid #000;border-radius:3px;
  box-shadow:inset 0 1px 0 #FFF8DA, inset 0 -2px 0 #5C4713, 0 3px 0 #3A2D0C, 0 6px 12px #0009}
button.gold:active{transform:translateY(3px);
  box-shadow:inset 0 1px 0 #FFF8DA, inset 0 -2px 0 #5C4713, 0 0 0 #3A2D0C, 0 2px 6px #0009}
button.danger{background:#4A171D;color:#ffd7d7}
button.ghost{background:transparent;border:1px solid var(--line)}
button.sm{padding:5px 9px;font-size:12px;border-radius:6px}
input,select{font-family:inherit;background:var(--ink);border:1px solid var(--line);color:var(--parch);
  padding:9px 11px;border-radius:8px;font-size:15px;outline:none}
input:focus,select:focus{border-color:var(--gold)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px 60px}
/* ticker */
#ticker{background:var(--ink);border-bottom:2px solid var(--gold2);overflow:hidden;white-space:nowrap;
  font-family:'JetBrains Mono',monospace;font-size:13px;height:30px;line-height:30px;position:sticky;top:0;z-index:30}
#ticker .run{display:inline-block;padding-left:100%;animation:tick 38s linear infinite}
#ticker:hover .run{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-100%)}}
#ticker span{margin:0 22px;color:var(--muted)}
#ticker b.up{color:var(--up)} #ticker b.down{color:var(--down)} #ticker b.g{color:var(--gold)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 6px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:12px}
.brand h1{font-size:34px;margin:0;color:var(--gold);text-shadow:0 2px 0 #00000055}
.brand .sub{color:var(--muted);font-size:13px;letter-spacing:.08em}
.badge{font-size:12px;border:1px solid var(--line);border-radius:99px;padding:4px 11px;color:var(--muted)}
.badge.on{color:var(--up);border-color:#3E7A55}
.badge.off{color:var(--down);border-color:#6B2A30}
.audioctl{display:flex;align-items:center;gap:7px;background:var(--ink);border:1px solid var(--line);border-radius:99px;padding:2px 8px 2px 4px}
.audioctl #muteBtn{padding:3px 6px;font-size:14px;box-shadow:none;background:transparent}
.audioctl input[type=range]{-webkit-appearance:none;appearance:none;width:80px;height:4px;border-radius:99px;background:var(--line);outline:none;padding:0}
.audioctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--gold);cursor:pointer;border:none}
.audioctl input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--gold);cursor:pointer;border:none}
.grid{display:grid;gap:16px}
@media(min-width:900px){
  /* Two independent columns that each fill top-to-bottom — no forced row alignment, so
     minimal blank space and a short page. LEFT (1fr): turn block + businesses. RIGHT (480px):
     players + holdings summary + ticker log. */
  .main{grid-template-columns:minmax(0,1fr) 480px;align-items:start}
  #cashRow{display:none}
}
/* Each column is its own vertical stack (applies on mobile too, where the two stacks simply
   flow one after the other in the single-column layout). */
.maincol{display:grid;gap:16px;align-content:start}
/* Desktop sticky bottom CTA — same primary-action bar mobile uses, so the phase-advance
   button (Done buying, Mark done, Roll, …) is always reachable even when the turn block
   runs below the fold. Hide the in-block duplicates; mobCTA() covers every one of them. */
@media(min-width:900px){
  #mobAction{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px 14px;text-align:center;background:linear-gradient(180deg,transparent,#0A0908 55%);pointer-events:none}
  #mobAction:empty{display:none}
  #mobAction button{pointer-events:auto;min-width:320px;max-width:520px;box-shadow:0 6px 20px #000b;min-height:44px;font-size:15px}
  body.modal-open #mobAction{display:none}
  .mob-cta-dup{display:none}
}
/* Desktop: align the buy-shop entity row to the asset row (5 equal columns), and shrink
   the business thumbnails in Your Holdings so the panel stays compact. */
@media(min-width:900px){
  /* One equal-width column per tile, however many there are. Was a hard repeat(5), which
     fitted both rows only by coincidence — dropping the action-card buyable left the assets
     row at 4 with a dead fifth column, while the influence-entity row below still needs 5. */
  .row.shoprow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
  .row.shoprow>div{width:auto!important}
  /* Businesses: a clean 5-across grid per sector (5 = the same-sector double threshold), so
     every card is the same width and a full row is the visual cue you've hit the double.
     Uses .row.bizgrid to out-specify .row{display:flex}. */
  /* STRETCH, not start — see the note on the phone rule. Collin reported this on mobile, but
     measuring the rendered tiles showed the desktop grid had the same defect: a name that wraps
     to three lines drew a taller framed box than the tile beside it (160px against 148px). */
  .row.bizgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;align-items:stretch}
  .row.bizgrid .inv .t{min-height:2.3em}
  .row.bizgrid .inv{max-width:none;min-width:0;padding:6px}
  .row.bizgrid .inv .art-md{aspect-ratio:1/1;width:100%;height:auto;object-fit:cover;margin:0 0 4px}
  .row.bizgrid .inv .t{font-size:11px;line-height:1.15;overflow-wrap:anywhere}
  .row.bizgrid .inv .m{font-size:11px;color:var(--muted2);margin-top:2px}
  .row.bizgrid .inv .sm{width:100%;padding:7px 2px;font-size:11px;min-height:38px;margin-top:4px}
  /* Owned entities: smaller banner art like businesses, but roomier cells (entity text is long). */
  /* STRETCH, not start — the same defect the business tiles had. Every .inv draws a gold border,
     so a cell sized to its own text ends its border partway up the row: Corrupt Contractor's
     four lines of rules text made a tall box beside Lobbyist's one line, and the two boxes
     stopped at different heights. Entity text varies far more than business names do, so this
     grid shows it worse. */
  .row.entgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;align-items:stretch}
  .row.entgrid .inv{max-width:none;min-width:0}
  .row.entgrid .inv .art-md{aspect-ratio:auto;height:72px;object-fit:cover;margin-bottom:6px}
  /* Inside the "Your businesses & entities" card: roll chart on top, then one row per sector
     (see .bizscroll — 5 cards wide, 6+ scrolls), then entities in a full-width row. */
  .empire-grid>.empire-chart,.empire-grid>.sectorblock{margin:0 0 12px}
  .empire-grid .coverage{margin:0}
  .empire-grid .sectorblock>.sectorhdr{margin-top:0}
  .empire-entities{margin-top:12px}
  .empire-entities>h3:first-child{margin-top:0}
  /* Action-card hand: exactly 5 per row (= the hand cap), so a 6th wrapping to a
     second row is the visual cue you'll have to discard down at end of turn. */
  .row.handstrip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start}
  .row.handstrip .handcard{width:auto}
}
/* Business scroller — used by BOTH the desktop empire card and the mobile Holdings tab: each
   sector is one row squeezed to 5 cards across, with dashed placeholder slots filling up to the
   5-for-double threshold; a sector with 6+ businesses scrolls horizontally (native + the ‹ ›
   arrows) instead of wrapping to a second row. (Global, so it applies at every width.) */
.bizscroll-wrap{display:flex;align-items:stretch;gap:4px}
.bizscroll{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scroll-behavior:smooth}
.bizscroll::-webkit-scrollbar{height:6px}
.bizscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.bizscroll::-webkit-scrollbar-track{background:transparent}
/* fixed basis, no shrink → a 6th card overflows and scrolls instead of squeezing in */
.bizscroll .inv{flex:0 0 calc((100% - 24px)/5);min-width:0;max-width:none;padding:6px}
.bizscroll .inv .art-md{aspect-ratio:1/1;width:100%;height:auto;object-fit:cover;margin:0 0 4px}
.bizscroll .inv .t{font-size:11px;line-height:1.15;overflow-wrap:anywhere}
/* 11px, not 9px: these two lines carry the numbers you actually play off — the trigger
   rolls and what you paid. 9px muted grey on near-black was decoration, not information. */
.bizscroll .inv .m{font-size:11px;color:var(--muted2);margin-top:2px}
.bizscroll .inv .sm{width:100%;padding:7px 2px;font-size:11px;min-height:38px;margin-top:4px}
.bizarrow{flex:0 0 auto;align-self:stretch;width:26px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gold2);background:var(--ink);color:var(--gold);border-radius:8px;cursor:pointer;font-size:20px;font-weight:700;line-height:1;padding:0}
.bizarrow:hover{background:var(--felt2)}
/* empty placeholder slot toward the 5-for-double threshold — dashed outline, stretches to match
   the real cards' height (the flex row aligns items to stretch). */
.bizscroll .bizslot{border:1px dashed var(--line);background:transparent;border-radius:10px;opacity:.5;padding:0;min-height:0}
/* ── Engraved-certificate treatment ─────────────────────────────────────────────
   Panels are objects, not stickers: a hairline highlight along the top edge, the fill
   darkening toward the bottom, a real shadow underneath. Tight radii — certificates are
   cut, not rounded.

   A guilloché (spirograph) texture was tried here and REMOVED: at panel width the rosettes
   landed directly behind body copy and made it hard to read. It looked fine as a small
   specimen and awful at full size — if texture is ever revisited, it belongs somewhere
   text never sits on top of it, at a fraction of that contrast. */
/* The top sheen fades over a FIXED 200px, not over the panel's own height. As a plain
   two-stop gradient it stretched to fit each card, so the same rule painted differently
   depending on how tall the card happened to be: at 120px down, the 232px Players panel
   sat at rgb(31,27,23) while the 739px businesses panel was still at rgb(35,30,24). Five
   panels, a 4-point spread, no two quite alike. Pinning the second stop makes every panel
   fade identically and then hold flat on --panel, so height stops being a colour input. */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel) 200px) no-repeat,var(--panel);
  border:1px solid var(--line);
  border-radius:3px;padding:16px;
  box-shadow:inset 0 1px 0 #ffffff14, inset 0 -18px 26px -18px #000, 0 4px 14px var(--shadow)}
/* Section headers as brushed brass plates (borrowed from the Brass Plate study — the
   certificate alone read too quiet). The ::after is the brushing: fine vertical striae. */
.card h2{font-size:19px;margin:-2px -4px 12px;color:#2A2109;position:relative;padding:5px 10px;border-radius:2px;
  background:linear-gradient(180deg,#E3C566,#B8912C 48%,#8C6D1F);
  box-shadow:inset 0 1px 0 #FFF6D0, 0 2px 6px #0008;text-shadow:0 1px 0 #ffffff40}
.card h2::after{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;
  background:repeating-linear-gradient(90deg,#0000 0 2px,#00000012 2px 3px)}
.card h3{font-size:15px;margin:14px 0 8px;color:var(--parch);opacity:.9}
/* Money is stamped, not printed: sunk into the panel with a hairline bevel below it. */
.money{font-family:'JetBrains Mono',monospace;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;background:#070605;padding:1px 7px;border-radius:2px;border:1px solid #000;
  box-shadow:inset 0 2px 5px #000, inset 0 -1px 0 #ffffff10}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--ink);border:1px solid var(--line);
  border-radius:99px;padding:3px 10px;font-size:12px;margin:2px 4px 2px 0}
.seat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-radius:10px;
  border:1px solid var(--line);margin-bottom:6px;background:var(--ink)}
.seat.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
/* No .seat.you background rule on purpose. Every player block is the same --ink surface, so
   the only thing that varies between rows is the gold .active border — whose turn it is,
   which is the one thing worth encoding in the row's appearance. "Which row is me" is
   already answered by the YOU tag sitting next to the name.
   This slot previously held #1E2A21, a green left over from the old casino-felt palette;
   repainting it warm still left your own row a visibly different shade from everyone
   else's, which read as a state rather than as an identity. */
.seat .nm{font-weight:700}
.seat .ch{font-size:11px;color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:6px;vertical-align:middle;background:#4A443C}
.dot.on{background:var(--up)} .dot.off{background:var(--down)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* NB .entgrid is only a GRID at the two breakpoints (<=640 and >=900); between them it is a
   plain .row. It needs no align-items rule there: .inv is full-width in that band, so all three
   cards sit on their own flex line (checked at 645/700/780/860/895) and there is never a
   neighbour to line up with. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.note{font-size:12px;color:var(--muted);line-height:1.5}
.center{text-align:center}
.big{font-size:44px;color:var(--gold);font-family:Anton,sans-serif}
label.fld{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px;text-transform:uppercase;letter-spacing:.05em}
.hidden{display:none}
.warnbox{background:#3a2410;border:1px solid var(--gold2);border-radius:10px;padding:10px 12px;font-size:12.5px;color:#ffe6b0;line-height:1.5;overflow:hidden}
.tag{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#1A1509;background:var(--gold);border-radius:4px;padding:1px 6px;margin-left:6px}
.tag.item{background:#6fb3ff;color:#04203f}
.tag.man{background:#e5b04d}
/* phase bar */
.phasebar{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.phasebar .p{font-size:11px;letter-spacing:.06em;padding:5px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted);text-transform:uppercase}
.phasebar .p.on{background:var(--gold);color:#241B08;border-color:var(--gold);font-weight:700}
.phasebar .p.done{color:var(--up);border-color:#3E7A55}
/* investments */
/* Holdings tiles read as small share certificates: cut corners plus corner brackets.
   Brackets are ::before/::after on the tile, so they cost no markup. */
.inv{position:relative;border:1px solid var(--line);border-radius:2px;padding:10px;background:var(--ink);min-width:150px;
  box-shadow:inset 0 1px 0 #ffffff10, inset 0 -12px 20px -14px #000}
.inv::before,.inv::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--gold2);
  opacity:.6;pointer-events:none}
.inv::before{top:3px;left:3px;border-right:0;border-bottom:0}
.inv::after{bottom:3px;right:3px;border-left:0;border-top:0}
.inv .t{font-weight:700;font-size:14px}
.inv .m{font-size:11px;color:var(--muted);margin-top:2px}
/* Risk badge: colour + tier LETTER (L/M/H/VH) so it reads without relying on colour (colour-blind safe) */
.risk{display:inline-block;min-width:15px;height:15px;line-height:15px;padding:0 3px;border-radius:4px;margin-right:5px;vertical-align:middle;text-align:center;font-family:var(--mono,monospace);font-weight:700;font-size:10px}
.r-low{background:#3fb950;color:#052a12} .r-med{background:#e8b84b;color:#2E2410} .r-high{background:#ff9d4d;color:#3a1c00} .r-vh{background:#e5555a;color:#2A0A0C}
/* phase-change cue: brief glow on the phase bar so nobody misses the transition */
@keyframes phaseflash{0%{box-shadow:0 0 0 0 rgba(232,184,75,.0)}25%{box-shadow:0 0 14px 3px rgba(232,184,75,.85)}100%{box-shadow:0 0 0 0 rgba(232,184,75,0)}}
.phasebar.phaseflash{animation:phaseflash .8s ease-out}

.mobileonly{display:none}
/* cash-at-a-glance row in the turn block (all players; shown during bid/buy) */
/* Pinned under whatever is already stuck to the top (#ticker on desktop, #mobTabs on a phone —
   both sit at top:0, so the band is the taller of the two). --stickytop is measured at runtime
   by syncStickyTop() rather than hardcoded, because those heights move with font size.
   Needs its own background: sticky content sits over the scrolling panel behind it. */
.cashrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px;
  position:sticky;top:var(--stickytop,30px);z-index:20;
  background:var(--panel);border-bottom:1px solid var(--line);padding:6px 0;margin-bottom:2px}
.cashrow:empty{display:none;border-bottom:none;padding:0}
.cashlbl{font-size:13px}
.cashchip{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--chip);border:1px solid var(--line);color:var(--parch)}
.cashchip b{font-family:'JetBrains Mono',monospace;color:var(--gold)}
.cashchip.me{border-color:var(--gold);background:var(--panel2)}
/* "you drew" flash — transient popup of card(s) freshly added to your hand */
/* Every centred pop-up lives in this ONE stack. Previously the drawn-card flash (top:70px) and
   the attack banner (top:66px) were each positioned fixed and centred independently — 4px
   apart — so drawing a card while a bot attacked put one squarely on top of the other. As a
   flex column they queue downward instead, and each still fades out on its own timer.
   pointer-events:none so the empty stack never eats taps; children opt back in. */
#alertRoot{position:fixed;top:66px;left:50%;transform:translateX(-50%);z-index:9997;
  display:flex;flex-direction:column;align-items:center;gap:8px;max-width:92vw;pointer-events:none}
#alertRoot > *{pointer-events:auto}

.drawflash{transform:translateY(-8px);
  max-width:92vw;background:var(--panel2);border:2px solid var(--gold);border-radius:14px;padding:10px 14px;
  box-shadow:0 12px 34px #000a;opacity:0;transition:opacity .2s ease, transform .2s ease;cursor:pointer}
.drawflash.show{opacity:1;transform:translateY(0)}
.drawflash-lbl{font-family:Anton,sans-serif;color:var(--gold);font-size:15px;letter-spacing:.5px;margin-bottom:4px}
.drawflash-card{display:flex;gap:8px;align-items:center;margin-top:6px;max-width:340px}
.drawflash-card b{font-size:14px}
/* sector-count chips in the returns heat strip */
.secmix{display:inline-block;padding:1px 8px;border-radius:99px;border:1px solid var(--line);background:var(--chip);font-size:12px;margin:2px 2px 0 0}
.secmix.on{border-color:var(--gold);color:var(--gold);font-weight:700}
/* ============ MOBILE / phone (≤640px) ============ */
@media (max-width:640px){
  /* clip (not hidden) so we don't turn body into a scroll container — that would
     defeat position:sticky on #mobTabs. clip stops horizontal overflow the same way. */
  html,body{overflow-x:clip}
  .mobileonly{display:inline-block}
  .wrap{padding:0 10px 44px}
  .topbar{gap:8px;padding:10px 0 4px}
  .brand h1{font-size:24px}
  .brand .sub{display:none}
  .badge{padding:3px 8px;font-size:11px}
  .audioctl input[type=range]{width:60px}
  /* stack the lobby's two-column areas */
  .split{grid-template-columns:1fr}
  /* inputs ≥16px so iOS doesn't zoom the page on focus */
  input,select{font-size:16px;padding:10px}
  select{min-height:44px} /* selects miss the button rule below — size them to match */
  button,.btnlike{padding:11px 14px;min-height:44px} /* 44px comfortable tap target */
  button.sm{padding:10px 12px;font-size:13px;min-height:44px}
  .card{padding:12px;border-radius:12px}
  .card h2{font-size:17px}
  .big{font-size:30px}
  .modal{padding:14px}
  .modal-bg{padding:10px}
  #toastRoot{left:10px;right:10px;max-width:none;top:40px}
  /* On phones the toasts go FULL WIDTH at the top, so the centred alert stack has to start
     below them or a toast and a banner occupy the same strip. */
  #alertRoot{top:104px}
  .log{max-height:200px}
  .die{width:30px;height:30px;font-size:18px}
  /* keep the holdings cards flexible instead of forcing a min width */
  .inv{min-width:0}
  /* business/entity card art is a full-width square on desktop — shrink to a tidy
     thumbnail on phones so a holdings list of businesses isn't a tower of big images */
  .inv .art-md{width:auto;max-width:100%;aspect-ratio:auto;max-height:92px;object-fit:contain;display:block;margin:0 auto 6px}
  /* Businesses render 5-across on phones (they're already grouped by sector, and 5 in a
     sector is the doubling threshold — so a full row of 5 literally means "this sector is
     now ×2", and the empty slots show how far a sector has to go). Fixed 5 columns keep
     the slots aligned across sectors instead of a tall single-file tower of big images. */
  /* align-items:STRETCH, not start. With `start` each tile sized to its own content, so a
     business whose name wraps to three lines ("Life / Insuran / ce") drew a taller framed box
     than one beside it that wrapped to two — visible on a phone as two mismatched cards under
     one sector heading. Every .inv has a visible border and corner brackets, so unequal heights
     read as broken rather than as compact. Stretch makes each row as tall as its tallest tile;
     the content still flows from the top because .inv is a normal block. */
  .bizgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-items:stretch}
  /* Reserve two lines for the name so a one-line title does not make a whole row short. This is
     about matching rows ACROSS sectors — stretch only equalises within a row, and Financial and
     Technology are separate grids. */
  .bizgrid .inv .t{min-height:2.3em}
  .bizgrid .inv{min-width:0;max-width:none;padding:6px}
  .bizgrid .inv .art-md{max-height:none;aspect-ratio:1/1;width:100%;margin:0 0 4px}
  /* overflow-wrap: five columns on a 375px phone leaves ~53px of content width, which is
     narrower than single words like "Refrigerators" — without this the name spills out of
     its tile and over the neighbour. */
  .bizgrid .inv .t{font-size:11px;line-height:1.15;overflow-wrap:anywhere}
  /* Only 10px here, against 11px on desktop: five columns on a 375px phone leaves each
     tile about 57px wide, and 11px starts breaking "$6,000" mid-number. The lighter
     colour does most of the legibility work at this size anyway. */
  .bizgrid .inv .m{font-size:10px;color:var(--muted2);margin-top:2px}
  .bizgrid .inv .sm{width:100%;padding:7px 2px;font-size:11px;min-height:40px;margin-top:4px}
  /* Owned influence entities: 3-across on phones (like the gold/Bitcoin/bond asset boxes),
     so a couple of entities are a tidy row instead of two oversized cards. Fewer columns
     than businesses (5) because entity text is longer and needs the width. */
  .entgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:stretch}
  .entgrid .inv{min-width:0;max-width:none;padding:6px}
  .entgrid .inv .art-md{max-height:none;aspect-ratio:1/1;width:100%;margin:0 0 4px}
  .entgrid .inv .t{font-size:11px;line-height:1.15}
  .entgrid .inv .m{font-size:9px;margin-top:1px}
  /* bidding is the most precision-sensitive tap — give the ±500 steppers a real target */
  .bidrow button.sm{min-height:44px;min-width:56px;font-size:15px}
  .bidrow .bidin{min-height:44px}
  /* Holdings tab: drop the inline hand duplicate — it now lives in its own "Cards" tab */
  .handstrip-wrap{display:none}
  /* the in-turn "Mark me done" button duplicates the sticky bottom CTA on phones */
  .mob-cta-dup{display:none}
  /* standings table: tighten so 5 columns fit a phone */
  table.standings{font-size:12px}
  table.standings th,table.standings td{padding:6px 5px}
  table.standings td .ch{font-size:10px}
  /* --- mobile reorg: tabbed panels, compact players strip, sticky action --- */
  #mobTabs{display:flex;gap:6px;position:sticky;top:0;z-index:50;background:var(--felt);padding:6px 0 4px}
  #mobTabs button{flex:1;min-height:40px;padding:8px 4px}
  #mobTabs button.on{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#1A1509;border-color:transparent}
  /* Per-player net-worth chip strip removed on mobile — it duplicated net worth already
     shown in the holdings summary and the Players tab. #mobPlayers stays in the DOM as an
     inert (hidden) anchor so the JS that populates it needs no change. */
  #mobPlayers{display:none}
  #mobAction{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:8px 12px 10px;background:linear-gradient(180deg,transparent,#0A0908 45%);pointer-events:none}
  #mobAction button{width:100%;pointer-events:auto;box-shadow:0 6px 20px #000b;min-height:46px;font-size:15px}
  #mobAction:empty{display:none}
  /* a modal owns the screen — hide the sticky bottom CTA so it can't overlap the modal's
     own Play/Close buttons (e.g. playing a card you've tapped open) */
  body.modal-open #mobAction{display:none}
  #holdingsCard,#playersCard,#logCard,#cardsCard{display:none}
  #game[data-mobtab="holdings"] #holdingsCard,
  #game[data-mobtab="cards"] #cardsCard,
  #game[data-mobtab="players"] #playersCard,
  #game[data-mobtab="log"] #logCard{display:block}
  .wrap{padding-bottom:80px}
  /* --- compact the constant top chrome once a game is actually running (body.playing,
     set in app.js's show()) so the phone reaches cash/cards/holdings with far less scrolling --- */
  body.playing .brand h1{display:none}
  body.playing .topbar{padding:6px 0 4px}
  #turnHeading{font-size:14px;line-height:1.3}
  .phasebar{gap:4px;margin:4px 0 2px}
  .phasebar .p{font-size:9px;padding:3px 6px}
}
/* ---- arcade attract screen (lobby) ----
   One dominant call to action; everything else deliberately quieter. */
.attract{text-align:center}
.attract-hero{margin:4px 0 16px}
/* No frame. The hairline + 3px radius used to make the crest read as "a struck plate set into
   the panel", which suited the old gold-on-black engraving that ran edge to edge. The new crest
   carries its own gold border inside the artwork, so the CSS one was a second gold outline
   around the first — just the emblem now. */
.crest{display:block;margin:0 auto 12px;width:min(168px,44vw);height:auto;aspect-ratio:1}
.attract-sub{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.playnow{display:block;width:100%;max-width:420px;margin:0 auto;font-size:22px;padding:18px 20px;
  letter-spacing:.06em;font-family:Anton,Impact,sans-serif;border-radius:12px;
  box-shadow:0 6px 0 #8a6410, 0 12px 28px #0008}
.playnow:active{transform:translateY(3px);box-shadow:0 3px 0 #8a6410, 0 6px 16px #0008}
.attract-hint{margin:10px 0 18px;font-size:13px}
.attract-row{justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.attract-custom{margin:4px auto 0;max-width:520px;text-align:left;border-top:1px solid var(--line);padding-top:12px}
/* Reads as a button, because it is one — grey caption text sitting under a divider looked
   like a section label, so nobody would guess Custom game opens anything. .btnlike above
   supplies the whole button treatment; only the summary-specific parts live here. */
/* width:fit-content + margin auto, NOT inline-flex + text-align:center — .attract-custom
   is text-align:left for the form it holds, so an inline control lands hard against the
   left edge. */
.attract-custom summary{display:flex;width:fit-content;margin:0 auto;
  align-items:center;justify-content:center;gap:8px;list-style:none}
.attract-custom summary::-webkit-details-marker{display:none}
/* Chevron drawn from two borders rather than a glyph, so it rotates on open and needs no
   font to render. Down = will expand, up = will collapse. */
.attract-custom summary::after{content:'';width:6px;height:6px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.attract-custom[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.attract-custom[open] summary{margin:0 auto 10px}
.attract-foot{margin-top:14px;border-top:1px solid var(--line);padding-top:10px;font-size:13px}
/* high-score tape — arcade leaderboard rendered as ticker tape */
.tape{max-width:420px;margin:0 auto 16px;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--ink);font-family:'JetBrains Mono',monospace;
  font-size:12px;text-align:left}
.tape .tape-hd{color:var(--muted);letter-spacing:.16em;text-transform:uppercase;
  font-size:10px;text-align:center;margin-bottom:8px}
.tape-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.tape-row .k{color:var(--muted)}
.tape-row .v{color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}

.mobnav{display:none}
/* hand's own tab panel — only shown on phones (see mobile media block below) */
#cardsCard{display:none}
/* log */
.log{font-family:'JetBrains Mono',monospace;font-size:12px;max-height:260px;overflow:auto;line-height:1.55}
.log div{padding:2px 0;border-bottom:1px dashed var(--felt2)}
.log .u{color:var(--up)} .log .d{color:var(--down)} .log .g{color:var(--gold)}
.logart{width:20px;height:20px;border-radius:3px;object-fit:cover;vertical-align:-5px;margin-right:5px;cursor:zoom-in;border:1px solid var(--line)}
/* dice */
.dice{display:inline-flex;gap:6px}
.die{width:34px;height:34px;border-radius:8px;background:var(--parch);color:#111;display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:18px;box-shadow:0 2px 6px var(--shadow)}
.die.rolling{animation:diceshake .16s linear infinite;background:var(--gold)}
@keyframes diceshake{0%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-4px) rotate(8deg)}100%{transform:translateY(0) rotate(-8deg)}}
.die.settle{animation:dicepop .28s ease}
@keyframes dicepop{0%{transform:scale(1.35)}60%{transform:scale(.92)}100%{transform:scale(1)}}
/* cycle tag */
.cycle{display:inline-block;padding:3px 10px;border-radius:6px;font-weight:700;font-size:12px}
.c-boom{background:#3E7A55;color:#d6ffe6} .c-exp{background:var(--line);color:#dff3e8}
.c-rec{background:#6b5a1e;color:#fff3cf} .c-dep{background:#6B2A30;color:#ffdcd2}
/* modal */
.modal-bg{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--panel);border:1px solid var(--gold2);border-radius:14px;max-width:560px;width:100%;
  padding:20px;max-height:88vh;overflow:auto;box-shadow:0 20px 60px #000}
.cardface{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--ink);margin:6px 0;cursor:pointer}
.cardface:hover{border-color:var(--gold)}
.cardface .cn{font-weight:700}
.cardface .cd{font-size:12px;color:var(--muted);margin-top:3px}
.assets{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
/* card art */
.art{display:block;background:var(--felt2) center/cover no-repeat}
.inv .art-md{width:100%;aspect-ratio:1/1;border-radius:8px;margin-bottom:8px;cursor:zoom-in}
.art-sm{width:60px;height:60px;border-radius:8px;object-fit:cover;cursor:zoom-in}
.cardface{overflow:hidden}
.cardface .art-sm,.warnbox .art-sm{float:left;margin-right:10px}
.portrait{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--gold2);vertical-align:middle;margin-right:6px}
/* Icons: inline SVG stroked in currentColor, so they take the colour of whatever they sit
   in — brass on a gold button, parchment on a ghost one — with no per-context rules. */
.ico{width:1.15em;height:1.15em;vertical-align:-.19em;margin-right:.4em;flex:0 0 auto}
button .ico{margin-right:.35em}
#mobTabs button .ico{display:block;margin:0 auto 2px;width:1.5em;height:1.5em}
/* Active player's character, at a size worth the commission. */
.turnhead{display:flex;gap:12px;align-items:flex-start}
.turnhead-main{flex:1;min-width:0}
.bigportrait{width:76px;height:76px;flex:0 0 auto;object-fit:cover;border-radius:3px;
  border:1px solid var(--gold2);box-shadow:inset 0 1px 0 #ffffff20, 0 3px 10px #0009}
.charname{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:5px}
@media(max-width:640px){ .bigportrait{width:58px;height:58px} }
.zoomimg{width:100%;max-width:340px;border-radius:12px;display:block;margin:0 auto 12px;border:1px solid var(--gold2)}
/* help / cheatsheet */
.help-list{margin:4px 0 4px 2px;padding-left:18px;font-size:13px;line-height:1.6}
.help-list li{margin:3px 0}
table.cheat{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0 4px}
table.cheat th,table.cheat td{border:1px solid var(--line);padding:5px 8px;text-align:left}
table.cheat th{background:var(--ink);color:var(--gold);font-weight:700}

/* ---- comparison bars in the opponent-profile tables (roll / sector / risk) ----
   The two series are brass and violet. These are NOT the --gold and --muted2 you would reach
   for first: a warm grey "them" reads as grey and sits only ΔE 12 from the gold, which is below
   the threshold where full-colour vision can separate a pair. This pair clears the lightness
   band, the chroma floor, colour-blind separation (ΔE 25 worst case) and contrast on this panel.
   Green and red are deliberately not used — they are already spoken for by gains and losses in
   the Net column right beside these bars. */
:root{ --you:#A8871C; --them:#7263B4; }
/* Width is tight on a 375px phone: five columns, two of them now bars. The first attempt used
   min-width:74px here and pushed the sector table's "you 1 away" flag off the right edge — the
   same overflow that column was already fixed for once. The bar cells stay narrow and the flag
   column keeps the slack. */
td.bcell{position:relative;padding:4px 6px;width:52px}
/* A flex row, not inline-blocks. With inline widths the bar and its number added up to just
   over the cell and the number wrapped onto a second line, doubling every row's height. */
.brow{display:flex;align-items:center;gap:5px}
.bwrap{flex:1 1 auto;min-width:12px;height:9px;background:rgba(255,255,255,.05);
  border-radius:2px;overflow:hidden}
.bfill{display:block;height:100%;border-radius:0 3px 3px 0;transition:width .18s ease-out}
.bnum{display:inline-block;width:16px;text-align:right;font-size:11px;color:var(--muted2)}
.bnum.bzero{opacity:.35}                    /* a zero should recede, not read as data */
/* Odds for a dice total, as text. This was briefly a grey bar and it misfired: with the legend
   saying "bar length = number of businesses", an unlabelled third bar reads as a third count.
   A fraction cannot be misread as a count. */
.oddsnum{margin-left:5px;font-size:10px;letter-spacing:.02em}
.chartkey{display:flex;gap:12px;align-items:center;font-size:11px;color:var(--muted2);margin:8px 0 2px}
.chartkey b{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
@media (prefers-reduced-motion:reduce){ .bfill{transition:none} }
/* collapsible detailed-rules sections */
.rules-more{border:1px solid var(--line);border-radius:3px;margin-top:12px;background:var(--ink)}
.rules-more>summary{cursor:pointer;padding:10px 12px;font-weight:700;color:var(--gold);list-style:none;user-select:none}
.rules-more>summary::-webkit-details-marker{display:none}
.rules-more>summary::before{content:'▸ '}
.rules-more[open]>summary::before{content:'▾ '}
.rules-more-body{padding:0 14px 12px}
.rules-more-body h4{color:var(--parch);margin:14px 0 4px;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:3px}
.ref-list li{margin:7px 0}
.refcost{color:var(--gold);font-weight:700;font-size:12px}
.refeg{color:var(--muted);font-size:12px;margin:3px 0 0 2px;padding-left:8px;border-left:2px solid var(--gold2)}
.rules-more-body code{background:#0006;padding:1px 5px;border-radius:4px;font-size:12px;color:var(--parch)}
/* turn status pill */
/* No margin: this is a flex item in a .row that already carries the spacing. The old
   6px/2px here was asymmetric, which under align-items:center pushed the pill 2px lower
   than the power chip beside it even once both were the same height. */
#turnStatus{margin:0}
.turnstatus{display:inline-block;font-size:12px;line-height:1.45;font-weight:700;letter-spacing:.04em;padding:3px 11px;border:1px solid transparent;border-radius:99px;text-transform:uppercase}
.turnstatus.you{background:var(--gold);color:#241B08}
.turnstatus.wait{background:var(--ink);border:1px solid var(--line);color:var(--muted)}
.turnstatus.act{background:#5e3a10;border:1px solid var(--gold);color:#ffe6b0;animation:actpulse 1.1s ease-in-out infinite}
@keyframes actpulse{0%,100%{box-shadow:0 0 0 0 rgba(232,184,75,.5)}50%{box-shadow:0 0 0 6px rgba(232,184,75,0)}}
/* floating money popups */
.moneyfx{position:fixed;z-index:60;pointer-events:none;font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:15px;text-shadow:0 1px 3px #000;animation:floatup 1.3s ease-out forwards}
.moneyfx.up{color:var(--up)} .moneyfx.down{color:var(--down)}
@keyframes floatup{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
/* toasts */
#toastRoot{position:fixed;top:44px;right:14px;z-index:55;display:flex;flex-direction:column;gap:8px;max-width:320px}
.toast{background:linear-gradient(180deg,var(--felt2),var(--panel));border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:9px;padding:9px 12px;font-size:12.5px;color:var(--parch);box-shadow:0 6px 18px var(--shadow);
  animation:toastin .28s ease;line-height:1.4}
.toast.u{border-left-color:var(--up)} .toast.d{border-left-color:var(--down)} .toast.g{border-left-color:var(--gold)}
.toast.out{animation:toastout .4s ease forwards}
@keyframes toastin{0%{transform:translateX(30px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes toastout{100%{transform:translateX(30px);opacity:0}}
/* end-game standings */
table.standings{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0 6px}
table.standings th,table.standings td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:middle}
table.standings th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
table.standings tr.win td{background:var(--felt2)}
table.standings .money{color:var(--gold)}
/* kind tags */
.tag.kstock{background:var(--gold);color:#241B08}
.tag.kbiz{background:#6fb3ff;color:#04203f}
/* hand strip */
/* the "Your cards (N)" button opens a modal that just re-lists the always-visible inline
   hand strip (desktop) / Cards tab (mobile), so it's redundant everywhere — hide it. */
#handBtn{display:none}
.handstrip{gap:8px}
.handcard{width:88px;border:1px solid var(--line);border-radius:9px;background:var(--ink);padding:6px;cursor:pointer;text-align:center;transition:.12s}
.handcard:hover{border-color:var(--gold);transform:translateY(-2px)}
.handcard:focus-visible,.cardface:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* returns-by-roll coverage strip */
.coverage{margin:2px 0 12px;padding:8px 10px;background:var(--ink);border:1px solid var(--line);border-radius:10px}
.covhdr{font-size:12px;font-weight:600;margin-bottom:7px}
.covhdr .note{font-weight:400;font-size:10px}
.covrow{display:flex;gap:3px;align-items:flex-end}
.covcell{flex:1 1 0;display:flex;flex-direction:column;align-items:center;min-width:0}
.covbarwrap{width:100%;height:46px;display:flex;align-items:flex-end;justify-content:center}
.covbar{width:72%;background:linear-gradient(180deg,var(--gold),var(--gold2));border-radius:3px 3px 0 0;min-height:2px;transition:height .2s}
.covbar.gap{background:var(--panel);min-height:3px;height:3px!important}
.covnum{font-size:11px;font-weight:600;margin-top:3px;color:var(--parch)}
.covnum.hot{color:var(--gold)}
.covamt{font-size:9px;color:var(--muted);line-height:1.2}
.covrisk{margin-top:7px;font-size:12px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.handcard .art-sm{width:100%;height:60px;border-radius:6px;margin-bottom:4px;cursor:pointer}
.handcard .hcn{font-size:11px;font-weight:600;line-height:1.2;height:26px;overflow:hidden}
.handcard .htag{font-size:9px;text-transform:uppercase;letter-spacing:.04em;margin-top:3px;color:#1A1509;background:var(--gold);border-radius:4px;padding:1px 0}
.handcard .htag.item,.handcard .htag.reactive{background:#6fb3ff;color:#04203f}
.handcard .htag.manual{background:#e5b04d}
.handcard.locked{opacity:.5;filter:grayscale(.4)}
.handcard .htag.lock{background:var(--chip);color:var(--muted)}
/* item pills */
.itempill{cursor:zoom-in}
/* Tiny card art for equipped items / owned entities, in place of a generic emoji.
   `contain` on an ink backing so a non-square illustration letterboxes cleanly instead of
   being centre-cropped into an unrecognisable detail at this size. */
.miniart{width:18px;height:18px;object-fit:contain;background:var(--ink);border-radius:2px;
  vertical-align:-4px;margin-right:6px;flex:0 0 auto}
.itemx{background:#4A171D;color:#ffd7d7;border:none;border-radius:5px;padding:0 5px;font-size:11px;font-weight:700;cursor:pointer;margin-left:2px;box-shadow:none;line-height:1.4}
.itemx:hover{filter:brightness(1.2)}
/* peek + reorder */
.reorderlist{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.reorderrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;background:var(--ink);padding:6px 8px}
.reorderrow .art-sm{width:44px;height:44px;flex:0 0 auto}
.reorderrow .rrname{flex:1;font-size:12.5px;min-width:0}
.reorderrow .rrbtns{display:flex;flex-direction:column;gap:3px}
.reorderrow .rrbtns .sm{padding:2px 8px}
/* asset boxes */
.assetrow{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.assetbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:var(--ink);padding:6px 10px;font-size:12px}
.assetimg{width:38px;height:38px;object-fit:contain;border-radius:6px}
.assetemoji{font-size:26px;width:38px;text-align:center}
.assetbox .tok{font-size:11px;color:var(--muted)}
.assetbox button{margin-top:4px}
/* sector headers */
.sectorhdr{font-size:12px;font-weight:700;color:var(--parch);margin:8px 0 4px;display:flex;align-items:center;gap:8px}
.sectorhdr .secn{color:var(--muted);font-weight:400}
.bonuson{font-size:11px;color:#241B08;background:var(--gold);border-radius:4px;padding:1px 7px;font-weight:700}
/* bidding helpers */
.inv .worth{color:var(--up);font-weight:600}
/* business attachment badge (Double Down / Bonus roll / Endless Shrimp / Raider / Merger) */
.attachbadge{display:inline-block;font-size:10px;font-weight:700;color:#241B08;background:var(--gold);border-radius:6px;padding:1px 6px;margin:3px 0 0;line-height:1.35}
.inv.hasattach{border-color:var(--gold)}
/* Harmful attachments (Endless Shrimp, Corporate Raider) read as a warning rather than a prize.
   Gold means "this business got a gift" everywhere else, and a curse wearing the same badge is
   actively misleading when you are picking one to steal, trade or liquidate. */
.attachbadge.bad{background:#e5555a;color:#2b0d0f}
.inv.hasattach.bad{border-color:#e5555a}
.worthstar{color:#241B08;background:var(--gold);border-radius:4px;padding:0 5px;font-weight:700}
.bidrow{gap:6px;align-items:center;margin-top:2px}
.bidmeter{font-size:12.5px;border-radius:8px;padding:6px 10px;margin:8px 0 4px;border:1px solid var(--line)}
.bidmeter.ok{background:#16241C;border-color:#3E7A55;color:#BFD8C6}
.bidmeter.liq{background:#3a2e10;border-color:var(--gold2);color:#ffe6b0}
.bidmeter.over{background:#3a1518;border-color:#6B2A30;color:#ffd7d7}
/* Character power chip. Sits beside the .turnstatus pill, so it carries the same metrics —
   12px/1.45, 3px 11px, 1px border — and reads as its sibling rather than a stray button.
   The mobile rule below gives every button a 44px min-height for tap targets, which on an
   11px chip made this half again as tall as the pill next to it; the tap target moves to an
   invisible expanded hit box instead, so the visible chip can stay pill-sized. */
.powerbtn{position:relative;font-size:12px;line-height:1.45;padding:3px 11px;min-height:0;
  border-radius:99px;background:var(--ink);border:1px solid var(--gold2);color:var(--gold);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;box-shadow:none}
.powerbtn::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.powerbtn.hot{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#241B08;animation:powpulse 1.6s ease-in-out infinite}
@keyframes powpulse{0%,100%{box-shadow:0 0 0 0 rgba(232,184,75,.5)}50%{box-shadow:0 0 0 5px rgba(232,184,75,0)}}