/* ==========================================================================
   Joetoro Launcher — shared stylesheet
   Pure black. Hairlines, not cards. One accent, used only for state.
   ========================================================================== */

:root{
  --bg:#000;
  --p1:#070707;          /* panel */
  --p2:#0c0c0c;          /* raised panel / input */
  --p3:#121212;          /* hover */
  --rule:#191919;        /* hairline */
  --rule-2:#2a2a2a;      /* emphasised hairline */
  --fg:#ece8e1;          /* bone */
  --fg-2:#8b8b85;
  --fg-3:#565650;
  --fg-4:#333330;
  --amber:#e0952f;       /* state only: active, focus, live */
  --green:#5f9a6a;
  --red:#c4442e;
  --h:44px;              /* header */
  --s:212px;             /* sidebar */
  --f:26px;              /* status bar */
  --snap:cubic-bezier(.2,.9,.3,1);
  --r:3px;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --sans:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:13.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.12}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dim{color:var(--fg-3)}
hr{border:0;border-top:1px solid var(--rule);margin:0}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1c1c1c;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#2e2e2e}

/* ==========================================================================
   SHELL
   ========================================================================== */
.shell{
  height:100vh;height:100dvh;
  display:grid;
  grid-template-columns:var(--s) 1fr;
  grid-template-rows:var(--h) 1fr var(--f);
  grid-template-areas:"head head" "side main" "foot foot";
}

/* ---- header ---- */
.head{
  grid-area:head;display:flex;align-items:center;gap:22px;
  padding:0 16px;border-bottom:1px solid var(--rule);background:var(--bg);
}
.brand{display:flex;align-items:center;gap:11px;padding-right:20px;border-right:1px solid var(--rule);height:100%}
.brand svg{width:10px;height:20px;flex:0 0 auto;overflow:visible}
.brand svg path{stroke:var(--fg);stroke-width:18;fill:none;transition:stroke .12s linear}
.brand b{font-size:13px;font-weight:600;letter-spacing:.01em}
.brand:hover svg path{stroke:var(--amber)}

.nav{display:flex;align-items:center;height:100%;position:relative}
.nav a{
  position:relative;height:100%;display:flex;align-items:center;padding:0 13px;
  font-size:13px;color:var(--fg-2);transition:color .12s linear;
}
.nav a:hover{color:var(--fg)}
.nav a[aria-current]{color:var(--fg)}
.nav a[aria-current]:after{
  content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:1px;background:var(--amber);
}

.hspace{flex:1}
.hstat{display:flex;align-items:center;gap:0;height:100%}
.hstat span{
  font-family:var(--mono);font-size:11px;color:var(--fg-3);
  padding:0 12px;border-left:1px solid var(--rule);height:100%;display:flex;align-items:center;white-space:nowrap;
}
.hstat span b{color:var(--fg-2);font-weight:400}
.live{width:5px;height:5px;background:var(--green);margin-right:7px;flex:0 0 auto}

/* ---- sidebar ---- */
.side{
  grid-area:side;border-right:1px solid var(--rule);overflow-y:auto;
  padding:14px 0 20px;background:var(--bg);
}
.sgroup{margin-bottom:22px}
.sgroup > h4{
  font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--fg-4);
  letter-spacing:.06em;padding:0 16px 7px;margin:0;
}
.sitem{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:6px 16px 6px 14px;border-left:2px solid transparent;
  font-size:13px;color:var(--fg-2);transition:color .12s linear,background .12s linear;
}
.sitem:hover{color:var(--fg);background:var(--p1)}
.sitem.on{color:var(--fg);border-left-color:var(--amber);background:var(--p1)}
.sitem .c{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--fg-4)}
.sitem.on .c{color:var(--fg-3)}
.sitem .sq{width:7px;height:7px;border:1px solid var(--fg-4);flex:0 0 auto}
.sitem.on .sq{background:var(--amber);border-color:var(--amber)}
.snote{padding:0 16px;font-size:12px;color:var(--fg-3);line-height:1.6}

/* ---- main ---- */
.main{grid-area:main;overflow-y:auto;min-width:0;position:relative}
.wrap{padding:0 24px 60px;max-width:1240px}

/* ---- status bar ---- */
.foot{
  grid-area:foot;display:flex;align-items:center;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;color:var(--fg-3);background:var(--bg);overflow:hidden;
}
.foot span{padding:0 12px;border-right:1px solid var(--rule);white-space:nowrap;
  height:100%;display:flex;align-items:center}
.foot span:last-child{border-right:0;margin-left:auto;border-left:1px solid var(--rule)}
.foot .ok{color:var(--green)}
.foot .warn{color:var(--amber)}

/* ==========================================================================
   PAGE HEADINGS
   ========================================================================== */
.phead{padding:26px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:22px}
.phead h1{font-size:26px;letter-spacing:-.03em;margin-bottom:5px}
.phead p{color:var(--fg-3);font-size:13px;max-width:64ch}
.phead .row{display:flex;align-items:flex-end;gap:20px}
.phead .row > div:first-child{flex:1;min-width:0}

.sect{margin-top:34px}
.sect > header{
  display:flex;align-items:center;gap:14px;padding-bottom:9px;
  border-bottom:1px solid var(--rule);margin-bottom:2px;
}
.sect > header h2{font-size:14px;font-weight:600}
.sect > header .n{font-family:var(--mono);font-size:11px;color:var(--fg-4)}
.sect > header .r{margin-left:auto;display:flex;gap:6px}

/* ==========================================================================
   CONTROLS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--p2);font-size:12.5px;color:var(--fg-2);
  transition:color .12s linear,background .12s linear,border-color .12s linear;
}
.btn:hover{color:var(--fg);background:var(--p3);border-color:#3c3c3c}
.btn:active{background:#050505}
.btn.solid{background:var(--fg);color:#000;border-color:var(--fg);font-weight:500}
.btn.solid:hover{background:#fff;border-color:#fff}
.btn.bare{background:none;border-color:transparent}
.btn.bare:hover{background:var(--p2);border-color:var(--rule)}
.btn.danger:hover{color:var(--red);border-color:#4a2018}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn .k{font-family:var(--mono);font-size:10.5px;color:var(--fg-4);border:1px solid var(--rule);padding:0 4px;border-radius:2px}

.seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden}
.seg button{
  padding:6px 12px;font-size:12.5px;color:var(--fg-3);border-right:1px solid var(--rule-2);
  transition:color .12s linear,background .12s linear;
}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--fg);background:var(--p2)}
.seg button.on{color:#000;background:var(--fg);font-weight:500}

.field{
  width:100%;background:var(--p2);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:9px 12px;font-family:var(--mono);font-size:13px;
  transition:border-color .12s linear,background .12s linear;
}
.field::placeholder{color:var(--fg-4)}
.field:focus{outline:none;border-color:var(--fg-3);background:var(--p3)}
select.field{font-family:var(--sans);cursor:pointer}
.tags{display:flex;gap:0;flex-wrap:wrap}
.tags button{
  padding:5px 12px;font-size:12.5px;color:var(--fg-3);border:1px solid var(--rule);
  border-right-width:0;transition:color .12s linear,background .12s linear;
}
.tags button:first-child{border-radius:var(--r) 0 0 var(--r)}
.tags button:last-child{border-right-width:1px;border-radius:0 var(--r) var(--r) 0}
.tags button:hover{color:var(--fg);background:var(--p2)}
.tags button.on{color:var(--fg);background:var(--p3);box-shadow:inset 0 -1px 0 var(--amber)}

.sw{width:34px;height:18px;border:1px solid var(--rule-2);background:var(--p2);position:relative;
  border-radius:2px;flex:0 0 auto;transition:border-color .12s linear}
.sw:after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--fg-3);
  transition:transform .14s var(--snap),background .12s linear}
.sw.on{border-color:var(--amber)}
.sw.on:after{transform:translateX(16px);background:var(--amber)}

.swatch{display:flex;gap:5px}
.swatch button{width:20px;height:20px;border:1px solid var(--rule-2);border-radius:2px}
.swatch button.on{box-shadow:inset 0 0 0 2px #000,0 0 0 1px var(--fg)}

/* ==========================================================================
   TABLE
   ========================================================================== */
.tbl{width:100%;border-collapse:collapse}
.tbl th{
  font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--fg-4);
  letter-spacing:.05em;text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.tbl th.r,.tbl td.r{text-align:right}
.tbl td{padding:11px 12px;border-bottom:1px solid #0f0f0f;font-size:13px;vertical-align:middle}
.tbl tbody tr{transition:background .1s linear}
.tbl tbody tr:hover{background:var(--p1);cursor:pointer}
.tbl tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--amber)}
.tbl .ix{font-family:var(--mono);font-size:11.5px;color:var(--fg-4);width:44px}
.tbl .ti{font-weight:500}
.tbl .sub{color:var(--fg-3);font-size:12px}
.tbl .num{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.tbl td.act{width:1%;white-space:nowrap;text-align:right}
.tbl tr.off td:not(.act){opacity:.5}

.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
  padding:2px 7px;border:1px solid var(--rule-2);border-radius:2px;color:var(--fg-3)}
.pill i{width:5px;height:5px;background:var(--fg-4);font-style:normal}
.pill.ready{color:var(--green);border-color:#1e3323}
.pill.ready i{background:var(--green)}
.pill.wait{color:var(--amber);border-color:#3a2a11}
.pill.wait i{background:var(--amber)}

/* ==========================================================================
   TILE GRID
   ========================================================================== */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1px;background:var(--rule)}
.tile{
  background:var(--bg);padding:14px;min-height:150px;display:flex;flex-direction:column;
  transition:background .12s linear;position:relative;text-align:left;
}
.tile:hover{background:var(--p1)}
.tile:hover .go{opacity:1}
.tile .ix{font-family:var(--mono);font-size:11px;color:var(--fg-4)}
.tile .mid{flex:1;display:flex;align-items:flex-end}
.tile h3{font-size:15px;letter-spacing:-.02em}
.tile .sub{font-size:12px;color:var(--fg-3);margin-top:3px}
.tile .go{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:10.5px;
  color:var(--amber);opacity:0;transition:opacity .12s linear}
.tile.off h3{color:var(--fg-2)}

/* ==========================================================================
   FEATURE SLAB (home)
   ========================================================================== */
.slab{border-top:1px solid var(--rule-2);padding:30px 0 26px;display:grid;
  grid-template-columns:1fr 268px;gap:44px;align-items:end}
.slab .kicker{font-family:var(--mono);font-size:11px;color:var(--amber);margin-bottom:16px;
  display:flex;align-items:center;gap:8px}
.slab .kicker i{width:16px;height:1px;background:var(--amber);font-style:normal}
.slab h2{font-size:clamp(38px,6.2vw,68px);letter-spacing:-.045em;line-height:.94;margin-bottom:14px}
.slab p{color:var(--fg-2);max-width:52ch;font-size:14px;margin-bottom:22px}
.slab .cta{display:flex;gap:8px}
.meta{border-top:1px solid var(--rule)}
.meta div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--rule);
  font-size:12.5px}
.meta div span:first-child{color:var(--fg-4);font-family:var(--mono);font-size:11px}
.meta div span:last-child{color:var(--fg-2);font-family:var(--mono);font-size:11.5px;text-align:right}

/* ==========================================================================
   LISTS / LOG / EMPTY
   ========================================================================== */
.rows{border-bottom:1px solid #0f0f0f}
.row{display:flex;align-items:center;gap:14px;padding:10px 12px;border-bottom:1px solid #0f0f0f;
  transition:background .1s linear;width:100%;text-align:left}
.row:hover{background:var(--p1)}
.row .t{font-family:var(--mono);font-size:11px;color:var(--fg-4);width:52px;flex:0 0 auto}
.row .m{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.row .m small{color:var(--fg-3);font-size:12px}
.row .x{font-family:var(--mono);font-size:11px;color:var(--fg-4)}

.log{background:var(--p1);border:1px solid var(--rule);border-radius:var(--r);padding:10px 12px;
  font-family:var(--mono);font-size:11.5px;line-height:1.85;max-height:190px;overflow-y:auto}
.log div{color:var(--fg-3);display:flex;gap:10px}
.log div b{color:var(--fg-4);font-weight:400;flex:0 0 auto}
.log div.ok em{color:var(--green);font-style:normal}
.log div.err em{color:var(--red);font-style:normal}
.log div.info em{color:var(--fg-2);font-style:normal}

.empty{padding:46px 12px;text-align:center;border:1px dashed var(--rule-2);border-radius:var(--r)}
.empty h3{font-size:15px;margin-bottom:6px}
.empty p{color:var(--fg-3);font-size:12.5px;max-width:46ch;margin:0 auto 14px}
.empty code{font-family:var(--mono);font-size:11.5px;color:var(--amber);background:var(--p2);padding:1px 5px;border-radius:2px}

/* ==========================================================================
   PROXY
   ========================================================================== */
.pcols{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start}
.modes{border-top:1px solid var(--rule)}
.mode{display:flex;gap:12px;padding:12px 12px 12px 10px;border-bottom:1px solid var(--rule);
  width:100%;text-align:left;border-left:2px solid transparent;transition:background .12s linear}
.mode:hover{background:var(--p1)}
.mode.on{background:var(--p1);border-left-color:var(--amber)}
.mode .dot{width:11px;height:11px;border:1px solid var(--rule-2);border-radius:50%;margin-top:3px;flex:0 0 auto}
.mode.on .dot{border-color:var(--amber);box-shadow:inset 0 0 0 2.5px var(--amber)}
.mode .b b{display:block;font-size:13px;font-weight:500;margin-bottom:2px}
.mode .b span{font-size:12px;color:var(--fg-3);display:block;max-width:56ch}
.mode .tagx{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--fg-4);
  border:1px solid var(--rule);padding:1px 5px;border-radius:2px;height:fit-content;white-space:nowrap}

.stage{border:1px solid var(--rule);border-radius:var(--r);background:var(--p1);
  height:440px;position:relative;overflow:hidden}
.stage iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.stage .veil{position:absolute;inset:0;display:grid;place-items:center;background:var(--bg);padding:28px;text-align:center}
.stage .veil.hide{display:none}
.stage .veil h3{font-size:14px;margin-bottom:6px}
.stage .veil p{color:var(--fg-3);font-size:12.5px;max-width:48ch;margin:0 auto 14px}
.bar{position:absolute;top:0;left:0;height:1px;background:var(--amber);width:0;z-index:4}
.bar.go{animation:barGo 2.6s linear forwards}
@keyframes barGo{0%{width:0;opacity:1}70%{width:78%}100%{width:100%;opacity:0}}

/* ==========================================================================
   SETTINGS / DOCS
   ========================================================================== */
.set{border-top:1px solid var(--rule);max-width:720px}
.set .r{display:flex;align-items:center;gap:24px;padding:13px 0;border-bottom:1px solid var(--rule)}
.set .r .l{flex:1;min-width:0}
.set .r .l b{display:block;font-size:13px;font-weight:500}
.set .r .l span{font-size:12px;color:var(--fg-3)}
.set .r .c{flex:0 0 auto;display:flex;align-items:center;gap:8px}

.doc{max-width:74ch}
.doc h2{font-size:15px;margin:30px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.doc h2:first-child{margin-top:0}
.doc p{color:var(--fg-2);font-size:13.5px;margin-bottom:12px;line-height:1.68}
.doc ul{margin:0 0 14px;padding-left:18px;color:var(--fg-2);font-size:13.5px;line-height:1.8}
.doc li::marker{color:var(--fg-4)}
.doc code{font-family:var(--mono);font-size:12px;color:var(--amber);background:var(--p2);
  padding:1px 5px;border-radius:2px}
.doc pre{background:var(--p1);border:1px solid var(--rule);border-radius:var(--r);padding:13px 15px;
  overflow-x:auto;font-family:var(--mono);font-size:12px;color:var(--fg-2);line-height:1.7;margin-bottom:14px}
.doc pre b{color:var(--fg);font-weight:400}
.doc pre i{color:var(--fg-4);font-style:normal}
.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--rule-2);border-radius:2px;
  padding:1px 5px;color:var(--fg-2)}

/* ==========================================================================
   MOTION — short, flat, no overshoot
   ========================================================================== */
.enter > *{opacity:0;transform:translateY(6px);animation:enter .16s var(--snap) forwards}
.enter > *:nth-child(1){animation-delay:.00s}
.enter > *:nth-child(2){animation-delay:.03s}
.enter > *:nth-child(3){animation-delay:.06s}
.enter > *:nth-child(4){animation-delay:.09s}
.enter > *:nth-child(5){animation-delay:.12s}
@keyframes enter{to{opacity:1;transform:none}}
.cursor{display:inline-block;width:6px;height:11px;background:var(--amber);margin-left:2px;
  animation:blink 1s steps(1) infinite;vertical-align:-1px}
@keyframes blink{50%{opacity:0}}

body.still *,body.still *:before,body.still *:after{
  animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .slab{grid-template-columns:1fr;gap:26px}
  .pcols{grid-template-columns:1fr;gap:26px}
}
@media (max-width:820px){
  :root{--s:0px}
  .shell{grid-template-columns:1fr;grid-template-areas:"head" "main" "foot"}
  .side{display:none}
  .hstat span:not(:last-child){display:none}
  .wrap{padding:0 14px 50px}
  .nav a{padding:0 9px;font-size:12.5px}
  .brand{padding-right:12px}
  .brand b{display:none}
  .foot span:nth-child(n+3):not(:last-child){display:none}
}

/* ==========================================================================
   CASINO — bet panel, table, cards, wheel
   ========================================================================== */
.bank{padding:14px 16px;border-bottom:1px solid var(--rule)}
.bank .k{font-family:var(--mono);font-size:10.5px;color:var(--fg-4);letter-spacing:.06em;margin-bottom:4px}
.bank .v{font-family:var(--mono);font-size:28px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.bank .v.up{color:var(--green)}
.bank .v.down{color:var(--red)}
.bank .sub{font-size:11.5px;color:var(--fg-4);margin-top:5px}

.betbox{padding:14px 16px;border-bottom:1px solid var(--rule)}
.betbox label{display:block;font-family:var(--mono);font-size:10.5px;color:var(--fg-4);letter-spacing:.06em;margin-bottom:7px}
.betrow{display:flex;gap:0}
.betrow input{flex:1;min-width:0;background:var(--p2);border:1px solid var(--rule-2);border-right:0;
  border-radius:var(--r) 0 0 var(--r);padding:8px 10px;font-family:var(--mono);font-size:13.5px}
.betrow input:focus{outline:none;border-color:var(--fg-3)}
.betrow button{padding:0 10px;border:1px solid var(--rule-2);border-right:0;background:var(--p2);
  font-family:var(--mono);font-size:11.5px;color:var(--fg-3);transition:color .12s linear,background .12s linear}
.betrow button:last-child{border-right:1px solid var(--rule-2);border-radius:0 var(--r) var(--r) 0}
.betrow button:hover{color:var(--fg);background:var(--p3)}
.quickbets{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.quickbets button{flex:1;padding:5px 0;border:1px solid var(--rule);border-radius:2px;
  font-family:var(--mono);font-size:11px;color:var(--fg-3);transition:color .12s linear,background .12s linear}
.quickbets button:hover{color:var(--fg);background:var(--p2)}

.gobtn{display:block;width:calc(100% - 32px);margin:14px 16px;padding:11px;border-radius:var(--r);
  background:var(--fg);color:#000;font-weight:600;font-size:13.5px;transition:background .12s linear,opacity .12s linear}
.gobtn:hover{background:#fff}
.gobtn[disabled]{opacity:.3;pointer-events:none}
.gobtn.cash{background:var(--green);color:#04150a}
.gobtn.cash:hover{background:#7ab887}

.ctrl{padding:12px 16px;border-bottom:1px solid var(--rule)}
.ctrl label{display:block;font-family:var(--mono);font-size:10.5px;color:var(--fg-4);letter-spacing:.06em;margin-bottom:7px}
.ctrl .val{font-family:var(--mono);font-size:12.5px;color:var(--fg-2);float:right;letter-spacing:0}
.ctrl input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:2px;background:var(--rule-2);outline:none}
.ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--amber);
  border-radius:2px;cursor:pointer}
.ctrl input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--amber);border:0;border-radius:2px;cursor:pointer}
.ctrl .stat{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--fg-3);padding:3px 0}
.ctrl .stat b{color:var(--fg-2);font-weight:400}

.hist{display:flex;gap:4px;padding:12px 16px;flex-wrap:wrap}
.hist span{font-family:var(--mono);font-size:10.5px;padding:2px 6px;border:1px solid var(--rule);border-radius:2px;color:var(--fg-3)}
.hist span.w{color:var(--green);border-color:#1e3323}
.hist span.l{color:var(--fg-4)}

/* stage */
.table{display:grid;place-items:center;min-height:calc(100dvh - var(--h) - var(--f));padding:22px 24px}
.tinner{width:100%;max-width:720px}
.verdict{text-align:center;font-family:var(--mono);font-size:13px;color:var(--fg-3);min-height:20px;margin-top:16px}
.verdict.w{color:var(--green)}
.verdict.l{color:var(--red)}
.bigmul{font-family:var(--mono);font-size:clamp(38px,7vw,64px);letter-spacing:-.04em;text-align:center;line-height:1}
.bigmul.w{color:var(--green)}
.bigmul.l{color:var(--red)}

/* roulette */
.rt{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.rboard{display:grid;grid-template-columns:34px repeat(12,1fr);gap:2px}
.rc{aspect-ratio:1/.82;display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;
  border:1px solid var(--rule-2);border-radius:2px;position:relative;transition:transform .1s linear,border-color .12s linear}
.rc:hover{border-color:var(--fg-3);transform:translateY(-1px)}
.rc.red{background:#2a0d08;color:#e88a76;border-color:#4a1a10}
.rc.blk{background:#0c0c0c;color:var(--fg-2)}
.rc.grn{background:#0a1a12;color:#8ecca7;border-color:#1e3323;grid-row:span 3;aspect-ratio:auto}
.rc.hit{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.rc .chip{position:absolute;bottom:1px;right:1px;font-size:9px;color:var(--amber);font-family:var(--mono)}
.routside{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;margin-top:2px}
.ro{padding:6px 0;text-align:center;font-size:11px;border:1px solid var(--rule-2);border-radius:2px;
  color:var(--fg-3);position:relative;transition:color .12s linear,border-color .12s linear}
.ro:hover{color:var(--fg);border-color:var(--fg-3)}
.ro .chip{position:absolute;bottom:1px;right:3px;font-size:9px;color:var(--amber);font-family:var(--mono)}

/* cards */
.hand{display:flex;gap:8px;min-height:104px;align-items:center;flex-wrap:wrap}
.pcard2{width:70px;height:98px;border-radius:5px;background:var(--fg);color:#111;position:relative;
  display:grid;place-items:center;font-family:var(--mono);font-size:22px;font-weight:500;flex:0 0 auto;
  animation:deal .22s cubic-bezier(.2,.9,.3,1)}
.pcard2.red{color:#b8291a}
.pcard2.back{background:var(--p3);border:1px solid var(--rule-2);color:var(--fg-4)}
.pcard2 i{position:absolute;top:4px;left:6px;font-size:11px;font-style:normal}
@keyframes deal{from{opacity:0;transform:translateY(-14px) scale(.9)}}
.handrow{margin-bottom:20px}
.handrow .lbl{font-family:var(--mono);font-size:10.5px;color:var(--fg-4);letter-spacing:.06em;margin-bottom:8px;
  display:flex;gap:10px;align-items:center}
.handrow .lbl b{color:var(--fg-2);font-weight:400;font-size:12px}

/* mines grid */
.mgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:420px;margin:0 auto}
.mcell{aspect-ratio:1;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--p2);
  display:grid;place-items:center;font-size:20px;transition:background .12s linear,border-color .12s linear,transform .1s linear}
.mcell:hover:not(.done){background:var(--p3);border-color:var(--fg-3);transform:translateY(-2px)}
.mcell.safe{background:#0a1a12;border-color:#1e3323;color:var(--green)}
.mcell.boom{background:#2a0d08;border-color:#4a1a10;color:var(--red)}
.mcell.dim{opacity:.4}

/* plinko + slots + crash canvases */
.cv{display:block;margin:0 auto;max-width:100%;border-radius:var(--r)}

/* dice readout */
.diceout{font-family:var(--mono);font-size:clamp(40px,8vw,72px);text-align:center;letter-spacing:-.04em;line-height:1}
.dicebar{position:relative;height:8px;background:var(--p3);border-radius:4px;margin:26px 0 10px}
.dicebar .fill{position:absolute;left:0;top:0;bottom:0;background:#1e3323;border-radius:4px}
.dicebar .mark{position:absolute;top:-6px;width:2px;height:20px;background:var(--amber);transition:left .18s linear}
.dicescale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--fg-4)}

@media (max-width:820px){
  .rt{grid-template-columns:1fr}
  .table{min-height:auto;padding:16px 14px 40px}
  .side{display:block;border-right:0;border-bottom:1px solid var(--rule);max-height:none;overflow:visible}
  .shell.play{grid-template-columns:1fr;grid-template-areas:"head" "side" "main" "foot";grid-template-rows:var(--h) auto 1fr var(--f)}
}

/* ==========================================================================
   VIDEO
   ========================================================================== */
.vframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
.vframe iframe{width:100%;height:100%;border:0;display:block}
.vveil{position:absolute;inset:0;display:grid;place-items:center;background:var(--p1);text-align:center;padding:26px}
.vveil.hide{display:none}
.vveil h3{font-size:15px;margin-bottom:7px}
.vveil p{color:var(--fg-3);font-size:12.5px;max-width:46ch;margin:0 auto 14px}
.vbar{display:flex;gap:7px;align-items:center;margin-top:12px;flex-wrap:wrap}
.vbar .sp{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--fg-4)}
.vmeta{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:13px}
.vmeta b{display:block;font-weight:500;margin-bottom:2px}
.vmeta span{color:var(--fg-3);font-size:12px;font-family:var(--mono)}
.qrow{display:flex;gap:10px;align-items:center;padding:7px 16px;border-bottom:1px solid #0f0f0f;
  width:100%;text-align:left;transition:background .1s linear}
.qrow:hover{background:var(--p1)}
.qrow img{width:54px;height:31px;object-fit:cover;border-radius:2px;flex:0 0 auto;background:var(--p3)}
.qrow .qt{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-2)}
.qrow.on .qt{color:var(--amber)}
.qrow .qx{font-family:var(--mono);font-size:11px;color:var(--fg-4)}
.srcpick{border-top:1px solid var(--rule)}
.srcpick button{display:flex;gap:10px;width:100%;text-align:left;padding:9px 16px;border-bottom:1px solid var(--rule);
  border-left:2px solid transparent;transition:background .12s linear}
.srcpick button:hover{background:var(--p1)}
.srcpick button.on{background:var(--p1);border-left-color:var(--amber)}
.srcpick .dot{width:10px;height:10px;border:1px solid var(--rule-2);border-radius:50%;margin-top:3px;flex:0 0 auto}
.srcpick button.on .dot{border-color:var(--amber);box-shadow:inset 0 0 0 2.5px var(--amber)}
.srcpick b{display:block;font-size:12.5px;font-weight:500}
.srcpick span{display:block;font-size:11.5px;color:var(--fg-3)}

/* the nav gets long — let it scroll rather than wrap */
.nav{overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
@media (max-width:820px){
  .nav a{padding:0 8px;font-size:12px}
  .nav a[aria-current]:after{left:8px;right:8px}
}

/* ==========================================================================
   BROWSE GRID + SHORTS FEED
   ========================================================================== */
.modebar{display:flex;gap:0;border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden;width:fit-content}
.modebar button{padding:7px 16px;font-size:12.5px;color:var(--fg-3);border-right:1px solid var(--rule-2);
  transition:color .14s linear,background .14s linear}
.modebar button:last-child{border-right:0}
.modebar button:hover{color:var(--fg);background:var(--p1)}
.modebar button.on{color:#000;background:var(--fg);font-weight:500}

.skel{border-radius:var(--r);background:var(--p2);position:relative;overflow:hidden}
.skel:after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);
  animation:sweep 1.3s linear infinite}
@keyframes sweep{to{transform:translateX(100%)}}

.shortsfeed{height:min(74vh,760px);overflow-y:auto;scroll-snap-type:y mandatory;background:#000;
  border:1px solid var(--rule);border-radius:var(--r);scrollbar-width:none}
.shortsfeed::-webkit-scrollbar{display:none}
.shortcard{height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;place-items:center;position:relative}
.shortcard .box{position:relative;height:100%;aspect-ratio:9/16;max-width:100%;background:#000;overflow:hidden}
.shortcard iframe{width:100%;height:100%;border:0;display:block}
.shortcard .poster{position:absolute;inset:0;background-size:cover;background-position:center;display:grid;place-items:center;
  cursor:pointer;transition:opacity .18s linear}
.shortcard .poster:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.shortcard .poster b{position:relative;font-family:var(--mono);font-size:11px;color:var(--fg-2);
  border:1px solid var(--rule-2);padding:6px 13px;border-radius:2px;background:rgba(0,0,0,.6);font-weight:400}
.shortcard .cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-size:12.5px;
  background:linear-gradient(transparent,rgba(0,0,0,.9));pointer-events:none}
.shortnav{display:flex;gap:7px;align-items:center;margin-top:12px}
.shortnav .n{font-family:var(--mono);font-size:11px;color:var(--fg-4);margin-left:auto}

/* ==========================================================================
   MINIMAL MOTION — short, flat, opacity and a few pixels only
   ========================================================================== */
.enter > *:nth-child(6){animation-delay:.15s}
.enter > *:nth-child(7){animation-delay:.18s}
.enter > *:nth-child(8){animation-delay:.21s}

.row,.sitem,.qrow,.tile{position:relative}
.row:before,.qrow:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber);
  transform:scaleY(0);transform-origin:center;transition:transform .14s var(--snap)}
.row:hover:before,.qrow:hover:before{transform:scaleY(1)}

.btn:active,.iconbtn:active,.modebar button:active{transform:translateY(1px)}
.btn{transition:color .12s linear,background .12s linear,border-color .12s linear,transform .08s linear}

.nav a[aria-current]:after{animation:navline .3s var(--snap) forwards;transform-origin:left}
@keyframes navline{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.phead h1{animation:enter .24s var(--snap) both}
.sect > header h2{animation:enter .2s var(--snap) both}

.fadein{animation:enter .2s var(--snap) both}

/* ==========================================================================
   OPEN YOUTUBE PANEL
   ========================================================================== */
.ytgo{border:1px solid var(--rule);border-radius:var(--r);background:var(--p1);padding:clamp(22px,4vw,34px)}
.ytgo h2{font-size:17px;margin-bottom:10px}
.ytgo p{color:var(--fg-2);font-size:13.5px;line-height:1.66;max-width:66ch;margin-bottom:12px}
.ytgo .cta{display:flex;gap:8px;margin:22px 0;flex-wrap:wrap;align-items:center}
.ytgo .cta form{display:flex;gap:8px;flex:1;min-width:240px}
.ytgo .cta input{flex:1;min-width:0}
.ytgo h3{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--fg-4);letter-spacing:.06em;margin:0 0 10px}
.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.quick button{background:var(--bg);padding:12px 14px;text-align:left;font-size:12.5px;color:var(--fg-2);
  transition:background .12s linear,color .12s linear}
.quick button:hover{background:var(--p2);color:var(--fg)}
.quick button small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--fg-4);margin-top:3px}