/* ============================================================
   ORACLE-7 — monochrome luxe in a vacuum
   ============================================================ */

:root{
  --void:        #07070A;
  --graphite:    #14141A;
  --graphite-2:  #0F0F14;
  --hair:        #2A2A31;
  --hair-soft:   #1E1E25;
  --bone:        #F4F1EA;
  --bone-dim:    #A8A49B;
  --champagne:   #C9A961;
  --champagne-lt:#F0DFAC;
  --danger:      #B4544B;

  --r-panel: 24px;
  --r-tile:  14px;

  --inner-hi: inset 0 1px 0 rgba(255,255,255,0.06);
  --falloff: 0 24px 40px rgba(0,0,0,0.72);

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  height:100%;
  background:var(--void);
  color:var(--bone);
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}

body{
  font-family: var(--mono);
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button{
  font-family:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
button:focus-visible{
  outline:1px solid var(--champagne);
  outline-offset:3px;
}
h1,h2,p{ margin:0; }
b{ font-weight:500; }

/* ---------- app shell ---------- */
#app{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
  isolation:isolate;
}

/* ============================================================
   BACKDROP
   ============================================================ */
.void{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.bloom{
  position:absolute;
  left:50%; top:48%;
  width:min(120vw,880px); height:min(120vw,880px);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(206,214,255,0.085) 0%, rgba(206,214,255,0.03) 26%, rgba(206,214,255,0) 58%),
    radial-gradient(circle at 50% 62%, rgba(201,169,97,0.10) 0%, rgba(201,169,97,0.02) 30%, rgba(201,169,97,0) 60%);
  filter:blur(6px);
  transition:opacity .8s ease;
}
.rings{
  position:absolute; left:50%; top:50%;
  width:0; height:0;
}
.ring{
  position:absolute;
  border:1px solid rgba(201,169,97,0.09);
  border-radius:50%;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
}
.ring--1{ width:min(112vw,720px); aspect-ratio:1; animation:spin 54s linear infinite; }
.ring--2{ width:min(86vw,540px);  aspect-ratio:1; border-color:rgba(244,241,234,0.055); animation:spin 78s linear infinite reverse; }
.ring--3{ width:min(62vw,380px);  aspect-ratio:1; border-color:rgba(201,169,97,0.07); animation:spin 38s linear infinite; }

@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.motes{ position:absolute; inset:0; }
.mote{
  position:absolute;
  border-radius:50%;
  will-change:transform;
}

.vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 78%, rgba(7,7,10,0.96) 100%);
}
.scanline{
  position:absolute;
  left:0; right:0;
  height:120px;
  top:-140px;
  background:linear-gradient(180deg, rgba(201,169,97,0) 0%, rgba(201,169,97,0.055) 45%, rgba(244,241,234,0.09) 50%, rgba(201,169,97,0.055) 55%, rgba(201,169,97,0) 100%);
  opacity:0;
  pointer-events:none;
}
.scanline.go{ animation:scan 1.15s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes scan{
  0%{ opacity:0; top:-140px; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ opacity:0; top:100%; }
}

/* ============================================================
   HUD
   ============================================================ */
.hud{
  position:relative;
  z-index:6;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:8px;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--hair-soft);
  background:linear-gradient(180deg, rgba(20,20,26,0.72) 0%, rgba(7,7,10,0) 100%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.hud__cell{
  display:flex; flex-direction:column; gap:3px;
  min-width:0;
}
.hud__cell--streak{ align-items:center; text-align:center; }
.hud__cell--rank{ align-items:flex-end; }

.lbl{
  font-size:9px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#6E6B64;
  white-space:nowrap;
}
.val{
  font-size:17px;
  letter-spacing:0.04em;
  color:var(--bone);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#streakVal[data-hot="true"]{
  color:var(--champagne);
  text-shadow:0 0 14px rgba(201,169,97,0.5);
}
.rank{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px;
  letter-spacing:0.14em;
  color:var(--champagne);
  white-space:nowrap;
}
.rank__pip{ width:8px; height:8px; flex:0 0 auto; }

.hud__tools{
  position:absolute;
  right:12px; bottom:-22px;
  display:flex; gap:6px;
  z-index:7;
}
.iconbtn{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--hair);
  background:rgba(15,15,20,0.85);
  color:var(--bone-dim);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:color .16s, border-color .16s, transform .12s;
}
.iconbtn svg{ width:16px; height:16px; }
.iconbtn:active{ transform:scale(0.94); }
@media (hover:hover){
  .iconbtn:hover{ color:var(--bone); border-color:#3a3a45; }
}
#muteBtn[aria-pressed="true"] .wave{ display:none; }
#muteBtn[aria-pressed="false"] .slash{ display:none; }
#muteBtn[aria-pressed="true"]{ color:#5d5a54; }

/* ============================================================
   STAGE
   ============================================================ */
.stage{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,2.4vh,22px);
  padding:clamp(20px,4vh,44px) 16px clamp(12px,2vh,20px);
  min-height:0;
}

/* ---------- ORACLE-7 ---------- */
.oracle{
  position:relative;
  width:72px; height:96px;
  flex:0 0 auto;
  transform:translateZ(0);
}
.oracle__mask{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
  animation:breathe 4s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(201,169,97,0.16));
}
@keyframes breathe{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-6px); }
}
.mask__aura{ opacity:0.9; transition:opacity .4s; }

.plate{ transform-origin:36px 48px; }

.visor{ transition:opacity .35s ease; opacity:0.6; }
.crown{ transition:opacity .3s; }

/* orbit rings */
.oracle__orbit{
  position:absolute; left:50%; top:44%;
  width:0; height:0;
  pointer-events:none;
}
.orb{
  position:absolute;
  border:1px solid rgba(201,169,97,0.35);
  border-radius:50%;
  left:50%; top:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(0.7);
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.orb--1{ width:96px; height:38px; }
.orb--2{ width:124px; height:48px; border-color:rgba(244,241,234,0.22); rotate:64deg; }
.orb--3{ width:82px; height:32px; border-color:rgba(201,169,97,0.22); rotate:-38deg; }

.oracle[data-state="thinking"] .orb{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.oracle[data-state="thinking"] .orb--1{ animation:orbSpin 2.4s linear infinite; }
.oracle[data-state="thinking"] .orb--2{ animation:orbSpin 3.6s linear infinite reverse; }
.oracle[data-state="thinking"] .orb--3{ animation:orbSpin 1.8s linear infinite; }
@keyframes orbSpin{
  0%  { transform:translate(-50%,-50%) scale(1) rotate(0deg); }
  100%{ transform:translate(-50%,-50%) scale(1) rotate(360deg); }
}
.oracle[data-state="thinking"] .visor{ animation:visorPulse 0.9s ease-in-out infinite; }
@keyframes visorPulse{
  0%,100%{ opacity:0.45; }
  50%    { opacity:1; }
}
.oracle[data-state="verdict-win"] .visor{ opacity:1; }
.oracle[data-state="verdict-win"] .mask__aura{ opacity:1; }
.oracle[data-state="verdict-win"] .oracle__mask{ animation:breathe 4s ease-in-out infinite, winFlare 1s ease-out 1; }
@keyframes winFlare{
  0%{ filter:drop-shadow(0 0 14px rgba(201,169,97,0.16)); }
  30%{ filter:drop-shadow(0 0 34px rgba(201,169,97,0.9)) brightness(1.5); }
  100%{ filter:drop-shadow(0 0 14px rgba(201,169,97,0.16)); }
}
.oracle[data-state="verdict-loss"] .visor{ opacity:0.25; transform:scaleX(0.55); transform-origin:36px 27px; transition:opacity .5s, transform .5s; }
.oracle[data-state="verdict-draw"] .visor{ animation:flatBlink 0.7s steps(2,end) 2; }
@keyframes flatBlink{ 0%,100%{opacity:0.6;} 50%{opacity:0.05;} }

.oracle__tag{
  position:absolute;
  left:calc(100% + 10px);
  top:34px;
  font-size:9px;
  letter-spacing:0.18em;
  color:#6E6B64;
  white-space:nowrap;
  text-transform:uppercase;
}
.oracle__tag::before{
  content:"";
  display:inline-block;
  width:12px; height:1px;
  background:#3a3a45;
  vertical-align:middle;
  margin-right:7px;
}
.oracle__tag.is-live{ color:var(--champagne); }

/* ---------- BOARD SLAB ---------- */
.slabwrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  perspective:1200px;
}
.slab{
  position:relative;
  padding:14px;
  border-radius:var(--r-panel);
  background:linear-gradient(160deg, #191920 0%, #121218 45%, #0D0D12 100%);
  border:1px solid var(--hair);
  box-shadow: var(--inner-hi), var(--falloff);
  animation:drift 6s ease-in-out infinite;
  transform:translateZ(0);
}
@keyframes drift{
  0%,100%{ transform:translateY(0) rotateX(1.2deg); }
  50%    { transform:translateY(-3px) rotateX(1.6deg); }
}
.slab::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(150deg, rgba(201,169,97,0.30) 0%, rgba(201,169,97,0.02) 26%, rgba(201,169,97,0) 55%, rgba(244,241,234,0.05) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

.cell{
  position:relative;
  width:clamp(64px, 24vw, 96px);
  aspect-ratio:1;
  border-radius:var(--r-tile);
  border:1px solid #232329;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(160deg, #17171D 0%, #101015 100%);
  box-shadow:var(--inner-hi);
  overflow:hidden;
  display:grid;
  place-items:center;
  transition:border-color .22s ease, background .22s ease, transform .18s ease;
  cursor:pointer;
}
/* inner grid hatch */
.cell::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size:16px 16px;
  pointer-events:none;
  opacity:0.85;
}
/* hover cursor ring */
.cell__ring{
  position:absolute;
  inset:6px;
  border-radius:8px;
  border:1px solid rgba(201,169,97,0.55);
  opacity:0;
  transform:scale(0.9);
  transition:opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.cell__corner{
  position:absolute;
  width:7px; height:7px;
  border-color:rgba(244,241,234,0.28);
  border-style:solid;
  border-width:0;
  opacity:0.55;
  pointer-events:none;
}
.cell__corner--tl{ top:6px; left:6px; border-top-width:1px; border-left-width:1px; }
.cell__corner--br{ bottom:6px; right:6px; border-bottom-width:1px; border-right-width:1px; }

@media (hover:hover){
  .cell:not([data-mark]):hover{ border-color:#3e3a30; background:linear-gradient(160deg,#1B1B22 0%,#131319 100%); }
  .cell:not([data-mark]):hover .cell__ring{ opacity:1; transform:scale(1); }
}

.cell:focus-visible{ outline:1px solid var(--champagne); outline-offset:2px; }
.cell:focus-visible .cell__ring{ opacity:1; transform:scale(1); }

/* marks */
.mark{
  width:62%; height:62%;
  display:block;
  pointer-events:none;
  opacity:0;
  transform:scale(0.72);
  animation:markIn .34s cubic-bezier(.18,1.1,.32,1) forwards;
}
.mark path, .mark circle{
  fill:none;
  stroke-linecap:round;
  stroke-width:2.2;
}
.mark--x path{ stroke:var(--bone); }
.mark--o circle{ stroke:var(--champagne); stroke-width:1.9; }
@keyframes markIn{
  0%{ opacity:0; transform:scale(0.72) rotate(-6deg); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
.mark--x path{
  stroke-dasharray:34;
  stroke-dashoffset:34;
  animation:drawX .36s cubic-bezier(.6,0,.2,1) forwards;
}
.mark--x path:nth-child(2){ animation-delay:.06s; }
@keyframes drawX{ to{ stroke-dashoffset:0; } }
.mark--o circle{
  stroke-dasharray:63;
  stroke-dashoffset:63;
  animation:drawO .42s cubic-bezier(.6,0,.2,1) forwards;
}
@keyframes drawO{ to{ stroke-dashoffset:0; } }

/* occupied / locked */
.cell[data-mark]{ cursor:default; }
.cell[data-locked="1"]{ cursor:not-allowed; }
.grid[data-turn="ai"] .cell:not([data-mark]){ cursor:progress; }
.grid[data-locked="true"] .cell{ pointer-events:none; }

/* last-move whisper */
.cell[data-last="1"]::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(201,169,97,0.16);
  pointer-events:none;
}

/* winning cells */
.cell[data-win="1"]{
  background:
    radial-gradient(circle at 50% 30%, rgba(201,169,97,0.30) 0%, rgba(201,169,97,0.06) 62%),
    linear-gradient(160deg,#242017 0%,#17140F 100%);
  border-color:rgba(201,169,97,0.75);
  transform:translateY(-6px);
  box-shadow:var(--inner-hi), 0 0 24px rgba(201,169,97,0.35), 0 10px 22px rgba(0,0,0,0.6);
  transition:transform .4s cubic-bezier(.2,1.3,.4,1), background .4s, border-color .4s, box-shadow .4s;
  z-index:2;
}
.cell[data-win="1"] .mark--x path{ stroke:var(--champagne-lt); }
.cell[data-win="1"] .mark--o circle{ stroke:var(--champagne-lt); }
.cell[data-win="1"] .cell__ring{ opacity:0; }

/* the traced hairline of light */
.winline{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:opacity .3s ease;
}
.winline.is-on{ opacity:1; }
.winline__core{
  position:absolute;
  left:0; top:0;
  height:1px;
  width:0;
  background:linear-gradient(90deg, rgba(240,223,172,0) 0%, rgba(240,223,172,0.95) 50%, rgba(240,223,172,0) 100%);
  box-shadow:0 0 12px rgba(240,223,172,0.85);
  transform-origin:0 50%;
}

/* reflection */
.reflection{
  width:100%;
  height:56px;
  margin-top:6px;
  overflow:hidden;
  pointer-events:none;
  position:relative;
  display:flex;
  justify-content:center;
}
.reflection::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,7,10,0.15) 0%, rgba(7,7,10,0.85) 55%, rgba(7,7,10,1) 100%);
}
.reflection__inner{
  transform:scaleY(-1);
  opacity:0.15;
  filter:blur(0.6px);
}
.reflection .cell{ pointer-events:none; }

/* ---------- SESSION STRIP ---------- */
.session{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-top:2px;
}
.session__pips{ display:flex; gap:7px; }
.pip{
  width:26px; height:4px;
  border-radius:2px;
  background:#1E1E25;
  border:1px solid #26262E;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s;
}
.pip[data-r="win"]{ background:var(--champagne); border-color:var(--champagne); box-shadow:0 0 10px rgba(201,169,97,0.5); }
.pip[data-r="draw"]{ background:#6E6B64; border-color:#6E6B64; }
.pip[data-r="loss"]{ background:#3A2A28; border-color:#5A3430; }
.pip[data-r="current"]{ background:transparent; border-color:var(--champagne); border-style:dashed; }

.session__meta{
  display:flex; gap:7px;
  font-size:9px;
  letter-spacing:0.18em;
  color:#6E6B64;
  text-transform:uppercase;
  white-space:nowrap;
}
.session__meta b{ color:var(--bone-dim); font-weight:500; }
.dot{ opacity:0.5; }

/* ---------- FOOTER ---------- */
.foot{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 16px 14px;
  font-size:8.5px;
  letter-spacing:0.18em;
  color:#4F4D48;
  text-transform:uppercase;
  border-top:1px solid rgba(42,42,49,0.6);
}
.foot__best b{ color:var(--bone-dim); font-weight:500; }

/* ============================================================
   OVERLAYS
   ============================================================ */
.overlay{
  position:fixed; inset:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 18px;
  background:rgba(5,5,8,0.72);
  backdrop-filter:blur(14px) saturate(0.9);
  -webkit-backdrop-filter:blur(14px) saturate(0.9);
  overflow-y:auto;
  opacity:0;
  transition:opacity .28s ease;
}
.overlay.is-on{ opacity:1; }
.overlay[hidden]{ display:none !important; }

.panel{
  position:relative;
  width:min(420px,100%);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  border-radius:var(--r-panel);
  border:1px solid var(--hair);
  background:
    linear-gradient(165deg, rgba(26,26,33,0.96) 0%, rgba(16,16,21,0.98) 48%, rgba(11,11,15,0.99) 100%);
  box-shadow:var(--inner-hi), 0 24px 60px rgba(0,0,0,0.85);
  padding:26px 22px 22px;
  text-align:center;
  transform:translateY(10px) scale(0.985);
  transition:transform .32s cubic-bezier(.2,.9,.25,1);
  scrollbar-width:thin;
  scrollbar-color:#2A2A31 transparent;
}
.panel::-webkit-scrollbar{ width:5px; }
.panel::-webkit-scrollbar-thumb{ background:#2A2A31; border-radius:3px; }
.overlay.is-on .panel{ transform:translateY(0) scale(1); }

.panel__eyebrow{
  font-size:9px;
  letter-spacing:0.24em;
  color:#6E6B64;
  text-transform:uppercase;
  margin-bottom:12px;
}

.display{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(34px,10vw,46px);
  line-height:1.02;
  letter-spacing:0.005em;
  color:var(--bone);
  margin-bottom:14px;
}
.display .dim{ color:var(--champagne); }
.display--small{ font-size:clamp(24px,7vw,30px); margin-bottom:10px; }
.display--recap{ font-size:clamp(30px,8.5vw,40px); margin-bottom:16px; }
.display--num{ font-size:clamp(38px,12vw,54px); color:var(--champagne); margin:0; letter-spacing:-0.01em; }

.panel__lede{
  font-size:13px;
  line-height:1.68;
  color:var(--bone-dim);
  margin-bottom:20px;
}
.panel__lede--small{ font-size:12px; margin-bottom:20px; }
.ink-x{ color:var(--bone); font-weight:500; }
.ink-o{ color:var(--champagne); font-weight:500; }

.panel__note{
  font-size:8.5px;
  letter-spacing:0.16em;
  color:#4F4D48;
  text-transform:uppercase;
  margin-top:16px;
  line-height:1.7;
}

/* tier bars */
.tierlist{
  display:flex; flex-direction:column; gap:7px;
  margin-bottom:22px;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid var(--hair-soft);
  background:rgba(10,10,14,0.6);
}
.tierlist__row{
  display:flex; align-items:center; gap:12px;
  font-size:9px; letter-spacing:0.16em; color:#7C7972;
}
.tierlist__row span:first-child{ width:74px; text-align:left; }
.tierlist__bar{
  flex:1;
  height:3px;
  border-radius:2px;
  background:#1C1C23;
  overflow:hidden;
}
.tierlist__bar i{
  display:block; height:100%;
  background:linear-gradient(90deg, rgba(201,169,97,0.35), var(--champagne));
  border-radius:2px;
}

/* buttons */
.btn{
  display:block;
  width:100%;
  min-height:52px;
  padding:15px 18px;
  border-radius:14px;
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:500;
  transition:transform .13s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s;
  -webkit-user-select:none; user-select:none;
}
.btn:active{ transform:scale(0.985); }
.btn:disabled{ opacity:0.45; cursor:not-allowed; }

.btn--primary{
  color:#0A0A0D;
  background:linear-gradient(180deg, #F0DFAC 0%, #C9A961 100%);
  border:1px solid #E4D3A2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 26px rgba(201,169,97,0.22);
  font-weight:600;
}
@media (hover:hover){ .btn--primary:hover{ background:linear-gradient(180deg,#FAEDC4 0%,#D7B971 100%); } }

.btn--ghost{
  color:var(--bone-dim);
  border:1px solid var(--hair);
  background:rgba(20,20,26,0.7);
}
@media (hover:hover){ .btn--ghost:hover{ color:var(--bone); border-color:#3E3A30; } }

.btn--danger{
  color:#F0D6D2;
  border:1px solid #5A3430;
  background:rgba(60,30,28,0.55);
}
@media (hover:hover){ .btn--danger:hover{ background:rgba(84,40,36,0.7); } }

/* join row */
.joinrow{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  border:1px dashed #2E2E36;
  background:rgba(10,10,14,0.5);
}
.joinrow__text{
  font-size:11px;
  color:var(--bone-dim);
  margin-bottom:10px;
  line-height:1.5;
}
.joinrow .btn{ min-height:44px; padding:11px 14px; font-size:10px; }

/* result panel */
.panel--result{ padding-top:30px; }
.result__rule{
  width:100%;
  height:1px;
  margin:0 auto 22px;
  background:linear-gradient(90deg, rgba(201,169,97,0) 0%, rgba(201,169,97,0.5) 50%, rgba(201,169,97,0) 100%);
}
.display--result{
  margin-bottom:8px;
  letter-spacing:0.06em;
}
#resultTitle[data-outcome="win"]{ color:var(--champagne-lt); text-shadow:0 0 34px rgba(201,169,97,0.45); }
#resultTitle[data-outcome="loss"]{ color:#8C8780; }
#resultTitle[data-outcome="draw"]{ color:var(--bone-dim); }
.result__sub{
  font-size:9px; letter-spacing:0.2em; color:#6E6B64;
  text-transform:uppercase; margin-bottom:24px;
}
.result__score{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  margin-bottom:22px;
  border-radius:14px;
  border:1px solid var(--hair-soft);
  background:rgba(10,10,14,0.55);
}
.result__delta{
  font-size:20px;
  color:var(--champagne);
  letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
}
.result__total{
  font-size:9px; letter-spacing:0.18em; color:#6E6B64; text-transform:uppercase;
}
.result__total b{ color:var(--bone); font-size:12px; letter-spacing:0.06em; }

/* recap */
.recap__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin-bottom:18px;
}
.recap__cell{
  border-radius:10px;
  border:1px solid var(--hair-soft);
  background:rgba(10,10,14,0.6);
  padding:9px 4px;
  display:flex; flex-direction:column; gap:4px; align-items:center;
}
.recap__cell span:first-child{ font-size:7.5px; letter-spacing:0.12em; color:#5A5852; }
.recap__cell span:last-child{ font-size:10px; letter-spacing:0.06em; color:var(--bone-dim); }
.recap__cell[data-r="win"]{ border-color:rgba(201,169,97,0.45); background:rgba(40,33,20,0.5); }
.recap__cell[data-r="win"] span:last-child{ color:var(--champagne); }
.recap__cell[data-r="loss"]{ border-color:#3A2A28; }
.recap__cell[data-r="loss"] span:last-child{ color:#9A7A74; }

.recap__total{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:16px;
  margin-bottom:16px;
  border-radius:16px;
  border:1px solid var(--hair);
  background:radial-gradient(circle at 50% 20%, rgba(201,169,97,0.10) 0%, rgba(10,10,14,0) 70%), rgba(10,10,14,0.6);
}
.recap__total span{ font-size:9px; letter-spacing:0.22em; color:#6E6B64; }
.recap__submit{
  font-size:9px;
  letter-spacing:0.16em;
  color:#6E6B64;
  text-transform:uppercase;
  min-height:16px;
  margin-bottom:18px;
  line-height:1.6;
}
.recap__submit[data-ok="true"]{ color:var(--champagne); }
.recap__submit[data-err="true"]{ color:#B4544B; }
.recap__actions{ display:flex; flex-direction:column; gap:8px; }

/* leaderboard */
.leader__list{
  display:flex; flex-direction:column; gap:1px;
  margin-bottom:18px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--hair-soft);
}
.leader__row{
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:10px;
  align-items:center;
  padding:11px 14px;
  background:rgba(10,10,14,0.6);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--bone-dim);
  text-align:left;
}
.leader__row + .leader__row{ border-top:1px solid var(--hair-soft); }
.leader__row--you{ background:rgba(40,33,20,0.55); color:var(--champagne); }
.leader__rank{ font-size:9px; color:#5A5852; letter-spacing:0.14em; }
.leader__row--you .leader__rank{ color:var(--champagne); }
.leader__handle{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leader__score{ font-variant-numeric:tabular-nums; color:var(--bone); }
.leader__empty{ padding:22px 14px; font-size:10px; letter-spacing:0.14em; color:#5A5852; text-transform:uppercase; line-height:1.7; }

.panel--confirm .panel__lede{ margin-bottom:22px; }
.confirm__actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-height:740px){
  .stage{ gap:8px; padding-top:16px; }
  .oracle{ width:58px; height:78px; }
  .oracle__mask{ width:100%; height:100%; }
  .oracle__tag{ top:26px; font-size:8px; }
  .reflection{ height:36px; }
  .session{ gap:6px; }
}
@media (max-height:640px){
  .oracle{ width:48px; height:64px; }
  .oracle__tag{ display:none; }
  .reflection{ height:22px; }
  .cell{ width:clamp(58px,21vw,82px); }
}
@media (max-width:430px){
  .hud{ padding:12px 12px 10px; gap:4px; }
  .val{ font-size:15px; }
  .rank{ font-size:9px; }
  .oracle__tag{ display:none; }
  .foot{ font-size:8px; padding:8px 12px 12px; }
}
@media (min-width:900px){
  .stage{ gap:26px; }
  .cell{ width:96px; }
  .panel{ width:min(460px,100%); }
  .oracle{ width:84px; height:112px; }
}
@media (min-width:1200px){
  .cell{ width:104px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  .slab{ animation:none; }
  .oracle__mask{ animation:none; }
  .ring{ animation:none; }
}