/* ==========================================
   SPIN LAB – Spin & Go Trainer
   styles.css – Main Stylesheet
   ========================================== */

/* === RESET & BASE === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0f1117;
  --bg2:#1a1d28;
  --bg3:#252836;
  --felt:#1e6e3e;
  --felt-d:#14522d;
  --felt-l:#28864c;
  --rail:#4a3728;
  --rail-t:#7c6350;
  --gold:#f4c430;
  --gold-d:#c9a227;
  --green:#4caf50;
  --red:#ef4444;
  --blue:#3b82f6;
  --orange:#f59e0b;
  --purple:#a855f7;
  --txt:#f1f2f6;
  --txt2:#8b8fa3;
  --txt3:#5a5e72;
  --rad:12px;
  --rads:8px;
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--txt);
  min-height:100vh;
  overflow-x:hidden;
}

button{font-family:inherit;cursor:pointer;border:none;outline:none}
select{font-family:inherit}

.screen{display:none;min-height:100vh;flex-direction:column}
.screen.active{display:flex}


/* === SPLASH === */
#splash{
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at center,#1a1d28,#0f1117 70%);
}
.splash-content{text-align:center;animation:sIn .8s ease-out}
.splash-logo{
  width:80px;height:80px;margin:0 auto 1rem;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-d));
  display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;color:#1a1a1a;font-weight:900;
  box-shadow:0 0 40px rgba(244,196,48,.2);
}
.splash-title{font-size:2.5rem;font-weight:800;letter-spacing:5px}
.splash-sub{font-size:.9rem;color:var(--txt2);letter-spacing:2px;margin-top:.2rem;margin-bottom:2rem}
.splash-loader{width:180px;height:3px;background:var(--bg3);border-radius:3px;overflow:hidden;margin:0 auto}
.splash-bar{
  width:0;height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-d));
  border-radius:3px;animation:load 2s ease-in-out forwards;
}

@keyframes sIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes load{to{width:100%}}


/* === HEADER === */
.hdr{
  display:flex;align-items:center;padding:.85rem 1.1rem;
  background:var(--bg2);border-bottom:1px solid rgba(255,255,255,.04);
}
.hdr h2{flex:1;font-size:1.05rem;font-weight:700;letter-spacing:1px}
.back{background:none;color:var(--txt2);font-size:1.3rem;padding:.2rem .5rem .2rem 0}
.back:hover{color:var(--gold)}


/* === BUTTONS === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.8rem 1.5rem;border-radius:var(--rads);
  font-size:.93rem;font-weight:600;transition:all .2s;letter-spacing:.3px;
}
.btn-p{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#1a1a1a}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(244,196,48,.3)}
.btn-s{background:var(--bg3);color:var(--txt)}
.btn-s:hover{background:#333748}
.btn-d{background:var(--red);color:#fff}
.btn-sm{padding:.4rem .85rem;font-size:.8rem}
.btn-bl{width:100%}

.btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}


/* === DASHBOARD === */
.dash-hd{text-align:center;padding:1.8rem 1.2rem .6rem}
.dash-hd h1{font-size:1.7rem;font-weight:800;letter-spacing:4px;color:var(--gold)}
.dash-hd p{color:var(--txt2);font-size:.82rem;margin-top:.15rem}
.dash-c{flex:1;padding:0 1.1rem 1rem;max-width:540px;margin:0 auto;width:100%}

.d-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1.1rem}
.st-card{background:var(--bg2);border-radius:var(--rads);padding:.85rem;text-align:center}
.st-v{font-size:1.35rem;font-weight:700;color:var(--gold)}
.st-l{font-size:.68rem;color:var(--txt3);margin-top:.12rem;text-transform:uppercase;letter-spacing:.5px}

.d-acts{display:flex;flex-direction:column;gap:.65rem;margin-bottom:1.1rem}

.d-weak{background:var(--bg2);border-radius:var(--rad);padding:1rem}
.d-weak h3{font-size:.78rem;color:var(--txt2);text-transform:uppercase;letter-spacing:1px;margin-bottom:.6rem}
.w-item{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
.w-item:last-child{border:none}
.w-v{font-size:.82rem;font-weight:600}
.w-v.bad{color:var(--red)}
.w-v.ok{color:var(--orange)}
.w-v.good{color:var(--green)}

.d-footer{text-align:center;padding:.8rem 1rem 1.5rem;color:var(--txt3);font-size:.65rem;letter-spacing:.4px}


/* === SETUP === */
.setup-c{flex:1;padding:1.1rem;max-width:540px;margin:0 auto;width:100%}
.presets{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1.1rem}
.pre-btn{
  background:var(--bg2);color:var(--txt);border:2px solid transparent;
  border-radius:var(--rads);padding:.85rem;font-size:.85rem;font-weight:600;
  transition:all .2s;text-align:center;
}
.pre-btn:hover,.pre-btn.sel{border-color:var(--gold);background:rgba(244,196,48,.06)}

.cust{background:var(--bg2);border-radius:var(--rad);padding:1rem}
.cust h3{font-size:.78rem;color:var(--txt2);text-transform:uppercase;letter-spacing:1px;margin-bottom:.75rem}
.fg{margin-bottom:.85rem}
.fg label{display:block;font-size:.8rem;color:var(--txt2);margin-bottom:.3rem}
.fr{display:flex;flex-wrap:wrap;gap:.3rem}
.fc{
  padding:.3rem .6rem;background:var(--bg3);color:var(--txt2);
  border:1px solid transparent;border-radius:20px;font-size:.76rem;
  cursor:pointer;transition:all .2s;
}
.fc:hover,.fc.on{background:rgba(244,196,48,.1);color:var(--gold);border-color:var(--gold)}
.setup-go{padding:1.1rem 0}


/* === QUIZ === */
.q-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:.65rem 1rem;background:var(--bg2);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.q-score{font-size:.88rem;font-weight:600}
.q-score span{color:var(--gold)}

.sc-bar{
  text-align:center;padding:.65rem 1rem;font-size:.83rem;
  color:var(--txt2);line-height:1.5;background:rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
}
.sc-bar strong{color:var(--txt)}


/* === TABLE === */
.t-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem .8rem}
.t-wrap{position:relative;width:100%;max-width:530px;aspect-ratio:1.55/1}
.t-felt{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,var(--felt-l),var(--felt) 50%,var(--felt-d) 100%);
  border:13px solid var(--rail);
  box-shadow:inset 0 0 50px rgba(0,0,0,.35),0 8px 36px rgba(0,0,0,.55),inset 0 2px 0 var(--rail-t);
}
.t-felt::before{
  content:'';position:absolute;inset:7px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.06);
}


/* === POT === */
.pot-a{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;z-index:3;
}
.pot-chips{display:flex;align-items:flex-end;gap:1px}
.pot-lbl{
  font-size:.85rem;font-weight:700;color:var(--gold);
  background:rgba(0,0,0,.5);padding:.2rem .75rem;border-radius:14px;
  white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.5);
}


/* === SEATS === */
.seat{position:absolute;display:flex;flex-direction:column;align-items:center;z-index:5;transition:opacity .3s}
.seat.dim{opacity:.4}
.seat-b{bottom:-16%;left:50%;transform:translateX(-50%)}
.seat-t{top:-10%;left:50%;transform:translateX(-50%)}
.seat-tl{top:6%;left:4%}
.seat-tr{top:6%;right:4%}

.p-av{display:flex;flex-direction:column;align-items:center;gap:4px}
.hero .p-info{border-color:rgba(244,196,48,.5);box-shadow:0 0 10px rgba(244,196,48,.15)}

.p-cards{display:flex;gap:4px}
.card{
  width:44px;height:62px;background:#f8f9fa;border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:1px 2px 7px rgba(0,0,0,.35);font-weight:700;line-height:1;
}
.card .r{font-size:1rem}
.card .s{font-size:.88rem;margin-top:-2px}
.card.red{color:#dc2626}
.card.blk{color:#1a1a2e}
.card.fd{
  background:linear-gradient(145deg,#1a365d,#1e40af 50%,#1a365d);
  border:2px solid rgba(59,130,246,.3);position:relative;overflow:hidden;
}
.card.fd::before{content:'';position:absolute;inset:3px;border-radius:4px;border:1px solid rgba(255,255,255,.06)}
.card.fd::after{
  content:'SL';font-size:.8rem;font-weight:900;
  color:rgba(244,196,48,.5);letter-spacing:2px;z-index:1;
  text-shadow:0 0 6px rgba(244,196,48,.1);
}

.p-info{
  display:flex;align-items:center;gap:5px;
  background:rgba(0,0,0,.6);padding:3px 9px;border-radius:10px;
  border:1.5px solid rgba(255,255,255,.08);backdrop-filter:blur(4px);
}
.p-pos{font-size:.68rem;font-weight:800;color:var(--gold);letter-spacing:.5px}
.p-stk{font-size:.72rem;font-weight:600;color:var(--txt)}

.dlr{
  width:17px;height:17px;border-radius:50%;
  background:linear-gradient(135deg,#fef3c7,#fbbf24);
  color:#78350f;font-size:.52rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.3);border:1px solid #f59e0b;
}


/* === BADGES === */
.badge{
  padding:3px 9px;border-radius:6px;font-size:.65rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.8px;text-align:center;white-space:nowrap;
}
.b-fold{background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.2)}
.b-raise{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.2)}
.b-allin{
  background:rgba(244,196,48,.12);color:var(--gold);
  border:1px solid rgba(244,196,48,.25);animation:ap 2s ease-in-out infinite;
}
.b-call{background:rgba(59,130,246,.12);color:#60a5fa;border:1px solid rgba(59,130,246,.2)}
.b-limp{background:rgba(168,85,247,.12);color:#c4b5fd;border:1px solid rgba(168,85,247,.2)}
.b-post{background:rgba(148,163,184,.06);color:#94a3b8;border:1px solid rgba(148,163,184,.1);font-size:.58rem}
.b-hero{
  background:rgba(244,196,48,.1);color:var(--gold);
  border:1.5px solid rgba(244,196,48,.35);animation:hp 1.5s ease-in-out infinite;
}

@keyframes ap{0%,100%{box-shadow:0 0 0 0 rgba(244,196,48,0)}50%{box-shadow:0 0 10px 2px rgba(244,196,48,.15)}}
@keyframes hp{0%,100%{box-shadow:0 0 0 0 rgba(244,196,48,0)}50%{box-shadow:0 0 12px 3px rgba(244,196,48,.12)}}


/* === BET AREAS === */
.bet{position:absolute;display:flex;align-items:center;gap:4px;z-index:4}
.bet-b{bottom:24%;left:50%;transform:translateX(-50%)}
.bet-t{top:24%;left:50%;transform:translateX(-50%)}
.bet-tl{top:34%;left:22%}
.bet-tr{top:34%;right:22%}

.chips{display:flex;align-items:flex-end}
.chip{
  width:20px;height:20px;border-radius:50%;
  border:2.5px dashed rgba(255,255,255,.4);box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.chip:not(:first-child){margin-left:-6px}
.chip.sm{width:16px;height:16px;border-width:2px}
.c-red{background:radial-gradient(circle at 35% 35%,#f87171,#b91c1c)}
.c-blue{background:radial-gradient(circle at 35% 35%,#60a5fa,#1d4ed8)}
.c-grn{background:radial-gradient(circle at 35% 35%,#4ade80,#15803d)}
.c-gld{background:radial-gradient(circle at 35% 35%,#fde047,#ca8a04)}
.bet-t-lbl{
  font-size:.7rem;font-weight:700;color:rgba(255,255,255,.82);
  text-shadow:0 1px 3px rgba(0,0,0,.5);white-space:nowrap;
}


/* === ACTION BUTTONS === */
.act-a{
  padding:.7rem 1rem 1.1rem;display:flex;gap:.6rem;
  justify-content:center;flex-wrap:wrap;max-width:540px;margin:0 auto;width:100%;
}
.abtn{
  flex:1;min-width:72px;padding:.85rem .3rem;border-radius:var(--rads);
  font-size:.9rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;transition:all .15s;
}
.abtn:active{transform:scale(.96)}
.a-fold{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff}
.a-call{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff}
.a-raise{background:linear-gradient(135deg,#22c55e,#15803d);color:#fff}
.a-allin{background:linear-gradient(135deg,var(--gold),#b8860b);color:#1a1a1a}
.a-limp{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff}


/* === FEEDBACK OVERLAY === */
.fb-ov{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);
  z-index:100;align-items:center;justify-content:center;padding:.8rem;
  backdrop-filter:blur(4px);
}
.fb-ov.on{display:flex}
.fb-pan{
  background:var(--bg2);border-radius:var(--rad);max-width:500px;width:100%;
  max-height:90vh;overflow-y:auto;box-shadow:0 4px 24px rgba(0,0,0,.5);
  animation:fi .3s ease-out;
}

@keyframes fi{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}

.fb-hd{padding:1.1rem 1.3rem;text-align:center;border-radius:var(--rad) var(--rad) 0 0}
.fb-hd.ok{background:rgba(76,175,80,.1)}
.fb-hd.no{background:rgba(239,68,68,.1)}
.fb-res{font-size:1.2rem;font-weight:800;letter-spacing:1px}
.fb-res.ok{color:var(--green)}
.fb-res.no{color:var(--red)}

.fb-bd{padding:1rem 1.2rem}
.fb-det{font-size:.85rem;color:var(--txt2);line-height:1.6;margin-bottom:.9rem}
.fb-det strong{color:var(--txt)}
.fb-act{
  display:inline-block;padding:2px 7px;border-radius:5px;
  font-weight:700;font-size:.8rem;background:rgba(76,175,80,.12);color:#81c784;
}
.fb-rt{font-size:.78rem;color:var(--txt2);text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}
.fb-ft{padding:0 1.2rem 1.2rem}


/* === RANGE GRID === */
.rg{display:grid;grid-template-columns:repeat(14,1fr);gap:2px;margin-bottom:.8rem;font-size:.52rem}
.rc{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:3px;font-weight:600;line-height:1;padding:1px;
}
.rh{color:var(--txt3);font-weight:700;font-size:.56rem}
.r-sh{background:rgba(76,175,80,.4);color:#a5d6a7}
.r-ra{background:rgba(59,130,246,.35);color:#90caf9}
.r-ca{background:rgba(245,158,11,.35);color:#ffd54f}
.r-li{background:rgba(168,85,247,.35);color:#d8b4fe}
.r-fo{background:rgba(255,255,255,.03);color:var(--txt3)}
.r-hl{outline:2px solid var(--gold);outline-offset:-1px;z-index:1}


/* === EXPLORE === */
.ex-c{flex:1;padding:1.1rem;max-width:540px;margin:0 auto;width:100%}
.ex-f{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1rem}
.ex-f select{
  width:100%;padding:.5rem .65rem;background:var(--bg3);color:var(--txt);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--rads);font-size:.85rem;
}
.ex-leg{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:.7rem}
.leg-i{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--txt2)}
.leg-c{width:12px;height:12px;border-radius:3px}

.ex-grid{display:grid;grid-template-columns:repeat(14,1fr);gap:2px;font-size:.62rem}
.eg{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border-radius:3px;font-weight:600;cursor:default;transition:transform .1s;
}
.eg:hover:not(.rh){transform:scale(1.12);z-index:2}

.ex-info{
  background:var(--bg2);border-radius:var(--rads);padding:.85rem;
  font-size:.85rem;color:var(--txt2);line-height:1.6;margin-top:.7rem;
}
.ex-info strong{color:var(--txt)}


/* === STATISTICS === */
.sts-c{flex:1;padding:1.1rem;max-width:540px;margin:0 auto;width:100%}
.sts-ov{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem;margin-bottom:1.1rem}
.sts-cd{background:var(--bg2);border-radius:var(--rads);padding:.85rem}
.sts-cd .st-v{font-size:1.6rem}

.sts-bd{background:var(--bg2);border-radius:var(--rad);padding:1rem;margin-bottom:1.1rem}
.sts-bd h3{font-size:.78rem;color:var(--txt2);text-transform:uppercase;letter-spacing:1px;margin-bottom:.65rem}
.bd-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
.bd-row:last-child{border:none}
.bd-bar-w{width:50%;height:5px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden;margin-left:.4rem}
.bd-bar{height:100%;border-radius:3px;transition:width .5s}

.ch-sec{background:var(--bg2);border-radius:var(--rad);padding:1rem;margin-bottom:1.1rem}
.ch-sec h3{font-size:.78rem;color:var(--txt2);text-transform:uppercase;letter-spacing:1px;margin-bottom:.65rem}
.ch-wrap{overflow:hidden;border-radius:var(--rads)}
.ch-wrap canvas{display:block;width:100%;height:180px}

.s-list{margin-top:.7rem}
.s-item{
  display:flex;justify-content:space-between;padding:.35rem 0;
  border-bottom:1px solid rgba(255,255,255,.04);font-size:.8rem;color:var(--txt2);
}
.s-item:last-child{border:none}
.s-item .acc{font-weight:600}


/* === SESSION SUMMARY OVERLAY === */
.sum-ov{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);
  z-index:200;align-items:center;justify-content:center;padding:.8rem;
  backdrop-filter:blur(4px);
}
.sum-ov.on{display:flex}
.sum-pan{
  background:var(--bg2);border-radius:var(--rad);max-width:400px;width:100%;
  padding:1.8rem;text-align:center;animation:fi .3s ease-out;
}
.sum-pan h2{font-size:1.3rem;font-weight:800;color:var(--gold);margin-bottom:1.2rem}
.sum-sts{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.2rem}
.sum-st .st-v{font-size:1.7rem}

/* === QUIZ BAR LAYOUT === */
.q-bar-right{display:flex;gap:.4rem;align-items:center}


/* === HAND HISTORY OVERLAY === */
.hist-ov{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);
  z-index:150;align-items:center;justify-content:center;padding:.8rem;
  backdrop-filter:blur(4px);
}
.hist-ov.on{display:flex}

.hist-pan{
  background:var(--bg2);border-radius:var(--rad);max-width:460px;width:100%;
  max-height:85vh;overflow-y:auto;box-shadow:0 4px 24px rgba(0,0,0,.5);
  animation:fi .3s ease-out;
}

.hist-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.06);
}
.hist-hd h3{font-size:.95rem;font-weight:700;letter-spacing:.5px}
.hist-hd .back{font-size:1.4rem;padding:.1rem .3rem;line-height:1}

.hist-list{padding:.5rem}
.hist-empty{
  text-align:center;padding:1.5rem 1rem;color:var(--txt3);font-size:.85rem;
}

.hist-item{
  display:flex;align-items:center;gap:.7rem;padding:.65rem .7rem;
  border-radius:var(--rads);cursor:pointer;transition:background .15s;
  border-bottom:1px solid rgba(255,255,255,.03);
}
.hist-item:last-child{border-bottom:none}
.hist-item:hover{background:rgba(255,255,255,.04)}

.hist-cards{display:flex;gap:2px;flex-shrink:0}
.hist-card{
  width:30px;height:42px;background:#f8f9fa;border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:1px 1px 4px rgba(0,0,0,.25);font-weight:700;line-height:1;
}
.hist-card .r{font-size:.72rem}
.hist-card .s{font-size:.62rem;margin-top:-1px}
.hist-card.red{color:#dc2626}
.hist-card.blk{color:#1a1a2e}

.hist-info{flex:1;min-width:0}
.hist-hand{font-size:.88rem;font-weight:700;color:var(--txt)}
.hist-desc{font-size:.7rem;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hist-result{
  flex-shrink:0;padding:3px 8px;border-radius:5px;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
}
.hist-result.ok{background:rgba(76,175,80,.12);color:#81c784}
.hist-result.no{background:rgba(239,68,68,.12);color:#f87171}

.hist-action{
  flex-shrink:0;font-size:.68rem;font-weight:600;color:var(--txt2);
  text-align:right;min-width:48px;
}

/* === HISTORY COUNT FILTERS === */
.hist-counts{
  display:flex;gap:.3rem;padding:.55rem .8rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  justify-content:center;
}
.hc-btn{
  padding:.3rem .65rem;border-radius:20px;
  font-size:.7rem;font-weight:600;letter-spacing:.2px;
  background:var(--bg3);color:var(--txt3);
  transition:all .2s;cursor:pointer;
  display:flex;align-items:center;gap:.3rem;
}
.hc-btn:hover{color:var(--txt2);background:#333748}
.hc-btn.active{
  background:rgba(244,196,48,.12);color:var(--gold);
  border:1px solid rgba(244,196,48,.3);
}
.hc-btn .hc-n{font-weight:800}
.hc-btn.ok .hc-n{color:var(--green)}
.hc-btn.no .hc-n{color:var(--red)}
.hc-btn.active.ok{background:rgba(76,175,80,.1);border-color:rgba(76,175,80,.3);color:var(--green)}
.hc-btn.active.no{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:var(--red)}


/* === QUIZ VIEWPORT FIT === */
#quiz{
  height:100dvh;
  overflow:hidden;
}
@supports not (height: 100dvh) {
  #quiz{
    height:100vh;
  }
}
.t-area{
  flex:1;
  min-height:0; /* allows flex child to shrink */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:.3rem .8rem;
}
.t-wrap{
  position:relative;
  width:100%;
  max-width:530px;
  max-height:100%;
  aspect-ratio:1.55/1;
}

/* === RESPONSIVE === */
@media(max-width:768px){
  .splash-title{font-size:2rem}

  /* Quiz layout – alles kompakt */
  .q-bar{padding:.35rem .7rem}
  .q-score{font-size:.78rem}
  .sc-bar{padding:.3rem .7rem;font-size:.72rem;line-height:1.3}
  .act-a{padding:.3rem .7rem .45rem}
  .abtn{padding:.55rem .2rem;font-size:.73rem;min-width:56px}

  /* Table kompakter */
  .t-felt{border-width:8px}
  .t-area{padding:.15rem .5rem}
  .t-wrap{max-width:400px}
  .card{width:32px;height:45px}
  .card .r{font-size:.75rem}
  .card .s{font-size:.64rem}
  .pot-lbl{font-size:.68rem;padding:.12rem .5rem}

  /* Seats enger am Tisch */
  .seat-b{bottom:-10%}
  .seat-t{top:-6%}
  .seat-tl{top:8%;left:0}
  .seat-tr{top:8%;right:0}
  .bet-tl{left:18%}
  .bet-tr{right:18%}

  /* Chips & Badges */
  .chip{width:14px;height:14px}
  .chip.sm{width:11px;height:11px}
  .badge{font-size:.52rem;padding:2px 5px}
  .bet-t-lbl{font-size:.6rem}

  /* Player Info */
  .p-info{padding:2px 6px;gap:3px}
  .p-pos{font-size:.6rem}
  .p-stk{font-size:.62rem}
  .p-av{gap:2px}
  .dlr{width:13px;height:13px;font-size:.42rem}

  /* Grids, Setup, Dashboard */
  .rg,.ex-grid{font-size:.44rem;gap:1px}
  .presets{grid-template-columns:1fr}
  .ex-f{grid-template-columns:1fr}
  .d-stats{gap:.4rem}
  .st-v{font-size:1.1rem}

  /* History */
  .q-bar-right{gap:.3rem}
  .q-bar-right .btn-sm{padding:.25rem .5rem;font-size:.68rem}
  .hist-card{width:24px;height:34px}
  .hist-card .r{font-size:.58rem}
  .hist-card .s{font-size:.5rem}
  .hist-item{padding:.5rem .55rem;gap:.5rem}
  .hist-hand{font-size:.8rem}
  .hist-desc{font-size:.65rem}
  .hist-result{font-size:.6rem;padding:2px 6px}
  .hist-action{font-size:.62rem;min-width:40px}
  .hc-btn{font-size:.63rem;padding:.25rem .5rem;gap:.2rem}



  /* Feedback Overlay kompakter */
  .fb-pan{max-height:95vh;max-height:95dvh}
  .fb-hd{padding:.6rem .9rem}
  .fb-res{font-size:1rem}
  .fb-bd{padding:.5rem .8rem}
  .fb-det{font-size:.75rem;line-height:1.4;margin-bottom:.5rem}
  .fb-rt{font-size:.68rem;margin-bottom:.3rem}
  .fb-ft{padding:0 .8rem .8rem}
  .fb-ft .btn{padding:.6rem 1rem;font-size:.85rem}
  .rg{gap:1px;margin-bottom:.4rem;font-size:.44rem}
  .fb-legend .ex-leg{margin-top:.3rem}
  .fb-legend .leg-i{font-size:.68rem}
  .fb-act{font-size:.7rem;padding:1px 5px}
}

@media(max-width:380px){
  .card{width:26px;height:37px}
  .card .r{font-size:.62rem}
  .card .s{font-size:.5rem}
  .abtn{font-size:.63rem;padding:.45rem .1rem;min-width:48px}
  .sc-bar{font-size:.66rem;padding:.25rem .5rem}
  .q-score{font-size:.7rem}
  .p-pos{font-size:.54rem}
  .p-stk{font-size:.56rem}
  .pot-lbl{font-size:.58rem;padding:.1rem .4rem}
  .badge{font-size:.48rem;padding:1px 4px}
}



@media(min-width:1024px){
  .t-wrap{max-width:590px}
  .card{width:50px;height:70px}
  .card .r{font-size:1.1rem}
  .card .s{font-size:.92rem}
}