/* Neon Rebellion skin on the shared game shell — art direction: docs/design-system/reelhaven/pages/art-direction.md.
   A rain-soaked alley at night: quiet gunmetal hardware with chamfered corners (corner-shape:bevel — not clip-path,
   so focus rings, shadows and 44 px hit areas stay whole), colour only where a neon tube is lit. One key light (a cool
   street lamp, top left) and a magenta rim from the alley sign (bottom right). The memorable thing is the Overclock
   ladder: a column of sign plates that light tube by tube. Motion: transform/opacity only; one slow rain layer. */
:root{
  --neon:#FF1F6B; --neon-lo:#730E30; --glass:#0B0620; --cyan:#2DF6FF; --cyan-lo:#12626A;
  --ink:#EAF6FF; --muted:#A3B2C6; --unlit:#948FB0; /* unlit rungs: ≥ 5:1 on their plate */
  /* the magenta rim light (the alley sign), derived from the theme so the admin presets re-colour it */
  --rim:color-mix(in srgb,var(--neon) 72%,#fff);
  --display:"Tourney","Arial Black",sans-serif; --ui:"Chakra Petch",system-ui,sans-serif;
  /* gunmetal hardware, lit from the top left */
  --plate:linear-gradient(160deg,#2C2945 0%,#1A1829 46%,#0E0C18 100%);
  --plate-edge:inset 0 1px 0 rgba(214,208,255,.16),inset 0 -1px 0 color-mix(in srgb,var(--rim) 18%,transparent);
  --hair:color-mix(in srgb,var(--cyan) 24%,transparent);
  --line:color-mix(in srgb,var(--cyan) 30%,transparent); --radius:12px; --radius-sm:8px;
  --panel-bg:linear-gradient(180deg,#191629,#0A0814); --panel-border:color-mix(in srgb,var(--cyan) 26%,transparent);
  --hud-bg:linear-gradient(170deg,rgba(40,37,62,.94),rgba(12,10,22,.96)); --corner-bg:linear-gradient(160deg,rgba(44,41,69,.94),rgba(13,11,23,.96));
  --ibtn-bg:var(--plate); --ibtn-ink:color-mix(in srgb,var(--cyan) 50%,#fff);
  --btn-bg:linear-gradient(170deg,#2E2A48,#14121F); --btn-ink:#FFF0F5;
  --window-bg:linear-gradient(180deg,#090614,#110A24); --window-radius:4px; --reel-sep:rgba(150,200,255,.05);
  --win-glow:var(--cyan); --focus:#FFE14D; --cluster-radius:6px; --fall-ease:cubic-bezier(.2,.9,.25,1);
  --spin-ring:var(--cyan); --veil-light:color-mix(in srgb,var(--neon) 16%,transparent);
  --ov-plate:linear-gradient(160deg,rgba(44,41,69,.92),rgba(12,10,22,.94)); --ov-plate-line:color-mix(in srgb,var(--cyan) 30%,transparent);
  --scrim:rgba(4,3,10,.74);
  --msg-band:34px; /* the message line under the board (28 px) + the frame's gap: the bezel stops above it */
}
body{background:var(--bg)}

/* ---- scene: far city through the alley's end, walls with two signs, wet asphalt; built in skin.js (static SVG) ---- */
.scene .alley svg,.scene .roof svg{width:100%;height:100%;display:block}
.scene .roof,.scene .core{opacity:0;transition:opacity .8s var(--ease-std)}
body.bg-megatower .scene .roof{opacity:1}body.bg-megatower .scene .alley{opacity:0}
/* System Breach: the megacorp core at the end of the alley burns rose behind the board */
.scene .core{background:radial-gradient(34% 30% at 50% 52%,color-mix(in srgb,var(--neon) 34%,transparent),color-mix(in srgb,var(--neon-lo) 20%,transparent) 55%,transparent 80%)}
body.fs .scene .core{opacity:1}
/* rain: one layer of streak tiles moved by transform (composited); still under reduced motion */
.scene .rain{inset:-200px 0 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' stroke='%23B4DCFF' stroke-linecap='round'%3E%3Cg stroke-opacity='.2'%3E%3Cpath d='M14 8l-2 22M92 40l-2 18M171 12l-3 26M55 118l-2 20M133 96l-2 24M190 150l-2 18M28 160l-2 26'/%3E%3C/g%3E%3Cg stroke-opacity='.1'%3E%3Cpath d='M44 52l-1 12M118 6l-1 14M150 60l-1 12M74 180l-1 14M101 140l-1 12M6 96l-1 12M160 186l-1 10'/%3E%3C/g%3E%3C/svg%3E") 0 0/200px 200px;
  will-change:transform;animation:nr-rain .42s linear infinite;opacity:.85}
@keyframes nr-rain{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,200px,0)}}
.scene .grain{opacity:.06;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px}
.scene .vig{background:radial-gradient(120% 90% at 50% 46%,transparent 52%,rgba(2,1,6,.62) 100%)}

/* ---- title: a lit sign in the display face — hot core, the tube's colour as a halo (no RGB split) ---- */
.logo h1{font-weight:700;letter-spacing:.05em;color:#FFE8F0;
  text-shadow:0 0 1px rgba(255,255,255,.8),0 0 5px color-mix(in srgb,var(--neon) 85%,transparent),0 0 13px color-mix(in srgb,var(--neon) 55%,transparent),0 0 24px color-mix(in srgb,var(--neon) 28%,transparent)}

/* ---- hardware: chamfered gunmetal plates with a hairline; the icon glyph in a pale tube colour ---- */
.ibtn,.pm,.auto,.tablet,.hud,.fsbar,.panel,.toast,.chips button,.ovamt:not(:empty){corner-shape:bevel}
.ibtn,.pm,.auto{border-color:var(--hair);box-shadow:var(--plate-edge),0 2px 8px rgba(0,0,0,.4)}
.ibtn{border-radius:10px}.pm{border-radius:9px}
.ibtn:hover,.pm:hover:not(:disabled),.auto:hover:not(:disabled),.tablet:hover:not(:disabled){border-color:color-mix(in srgb,var(--cyan) 70%,transparent)}
.auto{border-radius:15px}
.auto[aria-pressed="true"]{border-color:var(--cyan);box-shadow:var(--plate-edge),0 0 0 1px color-mix(in srgb,var(--cyan) 50%,transparent),0 0 16px color-mix(in srgb,var(--cyan) 35%,transparent)}
.auto span{background:var(--neon);color:#fff;top:-4px;right:-6px;border-radius:6px;corner-shape:bevel}
.demo{background:var(--cyan);color:#0B0620}
.tablet{border-color:var(--hair);background:var(--corner-bg);border-radius:12px;box-shadow:var(--plate-edge),0 6px 18px rgba(0,0,0,.4)}
.tablet .th{color:color-mix(in srgb,var(--cyan) 55%,#fff);font-weight:700;font-family:var(--ui)}

/* HUD: phones get a console plate; wide screens keep the four corner plates (shell "corners") */
.hud{border:1px solid var(--hair);box-shadow:var(--plate-edge),0 -8px 30px rgba(0,0,0,.35)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud-corners .hud>.bal,.hud-corners .hud>.win,.hud-corners .betctl{corner-shape:bevel;border-radius:10px;border-color:var(--hair);box-shadow:var(--plate-edge),0 8px 22px rgba(0,0,0,.4)}
}
.meter b{color:#F4F9FF}
.hud .meter.win:not(.at-zero) b{color:var(--cyan);text-shadow:0 0 10px color-mix(in srgb,var(--cyan) 45%,transparent)}

/* ---- spin: an octagonal power cell — gunmetal plate, a recessed glass disc, a ring tube in the theme colour, a
   white-hot bolt ---- */
.spin{border-radius:29.3%;corner-shape:bevel;color:#FFF3F7;
  background:radial-gradient(circle closest-side,transparent 0 70%,color-mix(in srgb,var(--neon) 30%,transparent) 71.5%,color-mix(in srgb,var(--neon) 80%,#fff) 74%,color-mix(in srgb,var(--neon) 14%,#fff) 75.6%,color-mix(in srgb,var(--neon) 80%,#fff) 77.2%,color-mix(in srgb,var(--neon) 30%,transparent) 80%,transparent 82%),
    radial-gradient(circle closest-side,color-mix(in srgb,var(--neon) 20%,#1B0C2A) 0,#140A22 62%,#07040D 84%,transparent 86%),
    linear-gradient(145deg,#7A76A0 0%,#3A3656 26%,#1C1A2C 60%,#0B0A12 100%);
  box-shadow:inset 0 1.5px 0 rgba(230,226,255,.28),inset -1px -2px 0 color-mix(in srgb,var(--rim) 30%,transparent),0 10px 24px rgba(0,0,0,.55)}
.spin svg{width:38%;height:38%;filter:drop-shadow(0 0 2px var(--neon)) drop-shadow(0 0 7px color-mix(in srgb,var(--neon) 70%,transparent))}

/* ---- the board: a chamfered gunmetal bezel (above the message line), recessed scanline glass ---- */
.frame{padding:16px;isolation:isolate}
.frame::before{content:"";position:absolute;inset:0 0 var(--msg-band);z-index:-1;border-radius:16px;corner-shape:bevel;
  background:linear-gradient(150deg,#4C4870 0%,#27243C 16%,#171522 52%,#0C0B13 100%);
  box-shadow:inset 0 1.5px 0 rgba(220,214,255,.2),inset -1.5px -1.5px 0 color-mix(in srgb,var(--rim) 28%,transparent),0 0 0 1px rgba(0,0,0,.55),0 26px 60px rgba(0,0,0,.6)}
.message{height:28px;line-height:28px;white-space:nowrap}
/* the shared grid board writes "<span>Win</span><b>$0.41</b><span>Cascade 2</span>" with no spaces: keep the words apart */
.message span+b,.message b+span:not(:empty){margin-left:.3em}
#board.grid-board{border-radius:var(--window-radius);
  background-image:repeating-linear-gradient(180deg,rgba(200,230,255,.026) 0 1px,transparent 1px 3px),
    linear-gradient(rgba(45,246,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(45,246,255,.04) 1px,transparent 1px),var(--window-bg);
  background-size:auto,var(--cell) var(--cell),var(--cell) var(--cell),auto;
  box-shadow:inset 0 16px 18px -10px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.1)}
#board.grid-board.tease{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--neon) 70%,transparent),inset 0 0 34px color-mix(in srgb,var(--neon) 40%,transparent),inset 0 16px 18px -10px rgba(0,0,0,.9)}
/* holo brackets (variant "holo"): four thin static L brackets on the bezel's corners */
.brk{position:absolute;width:24px;height:24px;border:2px solid color-mix(in srgb,var(--cyan) 85%,#fff);pointer-events:none;z-index:3;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--cyan) 70%,transparent))}
.brk.tl{left:-6px;top:-6px;border-right:0;border-bottom:0}.brk.tr{right:-6px;top:-6px;border-left:0;border-bottom:0}
.brk.bl{left:-6px;bottom:calc(var(--msg-band) - 6px);border-right:0;border-top:0}.brk.br{right:-6px;bottom:calc(var(--msg-band) - 6px);border-left:0;border-top:0}
body[data-variant="clean"] .brk{display:none}

/* ---- Overclock ladder: sign plates; unlit = dark glass, lit = ice tube, the live rung = rose tube ---- */
.ladder{position:absolute;left:calc(-1 * clamp(70px,7.4vw,98px));top:16px;bottom:calc(var(--msg-band) + 16px);width:clamp(58px,6.2vw,82px);display:flex;flex-direction:column;justify-content:center;gap:6px;pointer-events:none}
.ladder b{font:600 12px/1 var(--ui);letter-spacing:.04em;color:var(--muted);text-align:center;margin-bottom:4px}
.ladder span{display:block;text-align:center;font:700 16px/32px var(--ui);letter-spacing:.02em;color:var(--unlit);
  border:1px solid rgba(255,255,255,.07);border-radius:7px;corner-shape:bevel;background:linear-gradient(160deg,#25223A,#0F0D19);
  box-shadow:inset 0 1px 0 rgba(214,208,255,.1),0 4px 10px rgba(0,0,0,.4);
  transition:color var(--t-fast) var(--ease-std),border-color var(--t-fast) var(--ease-std),text-shadow var(--t-fast) var(--ease-std)}
.ladder span.on{color:#DDFDFF;border-color:color-mix(in srgb,var(--cyan) 45%,transparent);background:linear-gradient(160deg,#1C2A3C,#0B111C);
  text-shadow:0 0 2px #fff,0 0 7px var(--cyan),0 0 15px color-mix(in srgb,var(--cyan) 55%,transparent);box-shadow:inset 0 0 12px color-mix(in srgb,var(--cyan) 18%,transparent),0 4px 10px rgba(0,0,0,.4)}
.ladder span.top{color:#FFEAF2;border-color:color-mix(in srgb,var(--neon) 70%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--neon) 16%,#1E1428),#140A18);
  text-shadow:0 0 2px #fff,0 0 7px var(--neon),0 0 16px color-mix(in srgb,var(--neon) 60%,transparent);
  box-shadow:inset 0 0 14px color-mix(in srgb,var(--neon) 26%,transparent),0 0 16px color-mix(in srgb,var(--neon) 30%,transparent);animation:nr-punch 160ms var(--ease-out)}
@keyframes nr-punch{from{transform:scale(1.14)}to{transform:none}}

/* ---- cells: the cluster frame is a thin lit tube; symbols move by transform only (no filters on cells) ---- */
.grid-board .sym{transition:transform .2s var(--ease-out),opacity .2s var(--ease-std)}
.grid-board .cell.win::before{inset:5%;border:1.5px solid color-mix(in srgb,var(--cyan) 80%,#fff);box-shadow:0 0 10px color-mix(in srgb,var(--cyan) 55%,transparent),inset 0 0 14px color-mix(in srgb,var(--cyan) 28%,transparent);animation:nr-ring .42s var(--ease-std) infinite alternate}
@keyframes nr-ring{from{opacity:.62}to{opacity:1}}
.grid-board .cell.win .sym{transform:scale(1.06);filter:none}
.grid-board:has(.cell.win) .cell:not(.win) .sym{opacity:.45}
.grid-board .cell.pop .sym{transform:scale(1.22);opacity:0;filter:none;transition:transform .24s var(--ease-in),opacity .24s var(--ease-in)}
.grid-board .cell.land .sym{animation:nr-land .42s var(--ease-out)}
.grid-board .cell.land::after{content:"";position:absolute;inset:6%;border-radius:8px;corner-shape:bevel;pointer-events:none;box-shadow:0 0 0 2px #FFC25A,0 0 18px rgba(255,180,58,.7),inset 0 0 16px rgba(255,180,58,.4);animation:nr-key .7s var(--ease-out) forwards}
@keyframes nr-land{from{transform:scale(1.06)}to{transform:none}}
@keyframes nr-key{from{opacity:1;transform:scale(.92)}to{opacity:0;transform:scale(1.06)}}
.grid-board .cell.tagdrop .sym{animation:nr-tag .36s var(--ease-out)}
@keyframes nr-tag{from{transform:scale(1.18) rotate(-4deg);opacity:.2}to{transform:none;opacity:1}}
.frame .floater{font-family:var(--ui);font-weight:700;color:#E8FEFF;-webkit-text-stroke:0;text-shadow:0 1px 0 #000,0 0 8px color-mix(in srgb,var(--cyan) 80%,transparent),0 0 18px color-mix(in srgb,var(--cyan) 45%,transparent)}
.frame .floater.m{font-family:var(--ui);color:#FFEAF2;text-shadow:0 1px 0 #000,0 0 8px var(--neon),0 0 20px color-mix(in srgb,var(--neon) 55%,transparent)}

/* ---- System Breach entry: the screen splits into offset slices and a terminal line prints the breach ---- */
.glitch{position:fixed;inset:0;z-index:40;display:none;pointer-events:none;flex-direction:column;background:rgba(5,3,12,.4)}
.glitch.show{display:flex}
.glitch i{flex:1;will-change:transform;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--neon) 14%,transparent) 28%,color-mix(in srgb,var(--cyan) 10%,transparent) 72%,transparent);border-top:1px solid color-mix(in srgb,var(--cyan) 22%,transparent)}
.glitch p{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;padding:.45em .9em;white-space:nowrap;font:700 clamp(18px,3vw,30px)/1.2 var(--ui);letter-spacing:.06em;color:#FFE8F0;
  background:var(--plate);border:1px solid color-mix(in srgb,var(--neon) 70%,transparent);border-radius:10px;corner-shape:bevel;
  text-shadow:0 0 6px var(--neon),0 0 16px color-mix(in srgb,var(--neon) 50%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--neon) 30%,transparent)}

/* ---- panels, overlays, buttons ---- */
.panel{border-radius:16px;box-shadow:var(--plate-edge),0 30px 80px rgba(0,0,0,.6)}
.panel h2{color:color-mix(in srgb,var(--neon) 62%,#fff);text-shadow:0 0 14px color-mix(in srgb,var(--neon) 40%,transparent)}
.panel h3{color:color-mix(in srgb,var(--cyan) 55%,#fff)}
.btn{border:1.5px solid color-mix(in srgb,var(--neon) 80%,#fff);border-radius:12px;corner-shape:bevel;font-family:var(--ui);font-weight:700;letter-spacing:.02em;
  box-shadow:var(--plate-edge),0 0 14px color-mix(in srgb,var(--neon) 35%,transparent),inset 0 0 12px color-mix(in srgb,var(--neon) 18%,transparent),0 8px 20px rgba(0,0,0,.45)}
.btn.ghost{border-color:var(--hair);box-shadow:var(--plate-edge),0 6px 16px rgba(0,0,0,.4)}
.fsbar{background:var(--corner-bg);border:1px solid color-mix(in srgb,var(--neon) 55%,transparent);border-radius:10px;box-shadow:var(--plate-edge)}
.fsbar .fsx{font-family:var(--ui);color:#FFEAF2;font-size:20px;text-shadow:0 0 6px var(--neon),0 0 14px color-mix(in srgb,var(--neon) 50%,transparent)}
.message b{color:var(--cyan)}
.overlay{background:radial-gradient(46% 34% at 50% 44%,var(--veil-light),transparent),radial-gradient(circle at 50% 45%,rgba(16,9,32,.88),rgba(4,3,10,.95) 75%)}
.ovcard h2{font-weight:700;color:#FFE8F0;letter-spacing:.03em;text-shadow:0 0 2px #fff,0 0 10px var(--neon),0 0 26px color-mix(in srgb,var(--neon) 55%,transparent),0 0 52px color-mix(in srgb,var(--neon) 25%,transparent)}
.ovamt{color:#E8FEFF;text-shadow:0 0 10px color-mix(in srgb,var(--cyan) 70%,transparent),0 0 24px color-mix(in srgb,var(--cyan) 35%,transparent)}
.ovamt:not(:empty){border-radius:14px}
/* the screen flash (big-win tiers): a cool white, never a saturated red */
.flash{background:radial-gradient(circle at 50% 45%,#F2FEFF,color-mix(in srgb,var(--cyan) 40%,transparent) 45%,transparent 80%)}
.chips button[aria-pressed="true"]{background:var(--cyan);color:#0B0620;border-color:var(--cyan)}
.tog[aria-checked="true"]{background:var(--neon-lo)}
.ptc .sym{width:100%;height:100%}
.paygrid th[scope=row]{text-align:left;white-space:nowrap}.paygrid .pti{display:inline-block;width:32px;height:32px;vertical-align:middle;margin-right:8px}.paygrid .pti img{width:100%;height:100%}
/* the cluster table scrolls sideways inside its own (focusable) box if a sheet is ever narrower than it (never up and
   down: the table overflows it by 2 px, which would show a full-height scrollbar with classic scrollbars); on phones every symbol
   row becomes a plate with its seven size → pay pairs in two columns, so nothing is cut and nothing is dropped */
.tablewrap{max-width:100%;overflow-x:auto;overflow-y:hidden}
.paygrid td{font-variant-numeric:tabular-nums}
.paygrid .sz{display:none}
@media (max-width:780px){
  .paygrid,.paygrid tbody{display:block;width:100%}
  .paygrid tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:2px;margin:0 0 8px;padding:7px 10px 8px;
    background:var(--corner-bg);border:1px solid var(--hair);border-radius:9px;corner-shape:bevel}
  .paygrid tr:first-child{display:block;margin:0 0 6px;padding:0;background:none;border:0}
  .paygrid tr:first-child th{display:none;padding:0;text-align:left;font-size:13px;color:var(--muted)}
  .paygrid tr:first-child th:first-child{display:block}
  .paygrid th[scope=row]{grid-column:1/-1;margin:0 0 3px;padding:0}
  .paygrid td{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:8px;min-width:0;padding:1px 0;white-space:nowrap}
  .paygrid .pv{margin-left:auto}
  .paygrid .sz{display:inline;font-size:13px;color:var(--muted)}
}

/* ---- phones: the ladder becomes a strip of plates above the grid, inside the bezel ---- */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{padding:36px 7px 7px}
  .ladder{left:8px;right:8px;top:7px;bottom:auto;width:auto;height:24px;flex-direction:row-reverse;gap:4px}
  .ladder b{display:none}.ladder span{flex:1;font-size:12px;line-height:22px;border-radius:5px}
  .brk{width:16px;height:16px}
  .logo h1{font-size:clamp(18px,5.4vw,30px);letter-spacing:.03em}
  /* the feature bar: whole items wrap, never a number away from its words */
  .fsbar{flex-wrap:wrap;justify-content:center;column-gap:14px;row-gap:0;padding:5px 12px;font-size:15px}.fsbar>span{white-space:nowrap}.fsbar .fsx{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.scene .rain{animation:none;opacity:.5}.ladder span.top{animation:none}}
/* browsers without corner-shape (Safari, Firefox): the decorative layers keep their chamfer through clip-path; the
   focusable controls keep a small radius, so focus rings and hit areas stay whole */
@supports not (corner-shape:bevel){
  .frame::before{border-radius:0;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px)}
  .ladder span{border-radius:0;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
}