/* Liverpool Rummy — game-night felt */
:root{
  --felt:#0e3d2f; --felt2:#0a2e23; --gold:#e8b64c; --cream:#f7f1e3;
  --ink:#1d1a14; --mut:#9db8ad; --card:#fffdf6; --line:#2a5a4b;
  --acc:#e8b64c; --bad:#e26d5a; --ok:#7bc96f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
.hidden{display:none!important;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(120% 90% at 50% 0%, var(--felt) 0%, var(--felt2) 70%);
  color:var(--cream); min-height:100vh; min-height:100dvh;
  -webkit-user-select:none; user-select:none;
}
#app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative;}
.screen{display:none;padding:18px 16px 40px;animation:fade .25s ease;}
.screen.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
button{touch-action:manipulation;font-family:inherit;}
h1.logo{text-align:center;font-size:44px;margin:34px 0 6px;letter-spacing:3px;color:var(--gold);
  text-shadow:0 3px 0 rgba(0,0,0,.35);}
.tagline{text-align:center;color:var(--mut);font-size:15px;line-height:1.5;margin:0 0 26px;}
h2{margin:6px 0 4px;font-size:26px;color:var(--gold);}
.sub{color:var(--mut);font-size:14px;margin:0 0 14px;line-height:1.5;}
.mut{color:var(--mut);}

.mode-cards{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;}
.mode-card{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:16px;padding:16px;text-align:left;color:var(--cream);
  cursor:pointer;width:100%;}
.mode-card:active{transform:scale(.98);background:rgba(255,255,255,.1);}
.mi{font-size:34px;}
.mt{font-weight:800;font-size:18px;}
.md{color:var(--mut);font-size:13px;margin-top:2px;}

.btn{background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--cream);
  border-radius:14px;padding:13px 18px;font-size:16px;font-weight:700;cursor:pointer;}
.btn:active{transform:scale(.97);}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#3a2a08;}
.btn.ghost{background:transparent;}
.btn.block{display:block;width:100%;margin:10px 0;}
.btn.big{font-size:18px;padding:15px 18px;}
.btn:disabled{opacity:.4;}
.rowline{display:flex;gap:10px;margin:10px 0;}
.grow{flex:1;}
.back{background:none;border:none;color:var(--mut);font-size:16px;padding:6px 0;cursor:pointer;}
.or{text-align:center;color:var(--mut);margin:14px 0;font-size:14px;}
.err{color:var(--bad);font-size:14px;}

.field{margin:12px 0;}
.field label{display:block;font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--mut);margin-bottom:6px;}
.txt{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;
  color:var(--cream);font-size:17px;padding:12px 14px;font-family:inherit;}
.txt.code{text-transform:uppercase;letter-spacing:6px;text-align:center;font-size:22px;font-weight:800;}

.seg{display:flex;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.seg button{flex:1;background:none;border:none;color:var(--mut);padding:11px;font-size:14px;font-weight:700;cursor:pointer;}
.seg button.sel{background:var(--gold);color:#3a2a08;}

.howto{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:6px;font-size:14px;line-height:1.55;}
.howto.hidden{display:none;}
.howto h3{margin:0 0 8px;color:var(--gold);}
.ctr-list{margin:6px 0;padding-left:22px;}
.ctr-list li{margin:3px 0;}

/* setup players */
.prow{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;}
.prow .nm{flex:1;font-weight:700;font-size:17px;padding:6px 4px;}
.prow .botbadge{font-size:11px;font-weight:800;background:#3a5a8c;color:#fff;border-radius:8px;padding:3px 8px;letter-spacing:1px;}
.nmedit{flex:1;font-size:17px;font-weight:700;background:rgba(0,0,0,.4);border:1px solid var(--gold);
  border-radius:8px;color:var(--cream);padding:8px 10px;font-family:inherit;}
.px{background:none;border:none;color:var(--mut);font-size:20px;cursor:pointer;padding:4px 8px;}
.stepper{display:flex;align-items:center;gap:14px;margin:12px 0;}
.stepper button{width:46px;height:46px;border-radius:50%;font-size:22px;padding:0;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation;}
.stepper .sv{font-size:20px;font-weight:800;min-width:110px;text-align:center;}

/* lobby */
.roomcode{text-align:center;margin:10px 0 4px;}
.roomcode span{font-size:52px;font-weight:900;letter-spacing:12px;color:var(--gold);
  background:rgba(0,0,0,.35);border:1px dashed var(--gold);border-radius:16px;padding:8px 8px 8px 20px;}
.lobby-players{margin:16px 0;}
.lp-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:12px;margin:8px 0;font-weight:700;}
.lp-row .host{margin-left:auto;font-size:12px;color:var(--gold);font-weight:800;}

/* table */
#screen-table{padding:10px 10px 16px;}
#contract-bar{background:rgba(0,0,0,.4);border:1px solid var(--gold);border-radius:12px;
  padding:9px 12px;font-size:13.5px;font-weight:700;margin-bottom:8px;line-height:1.45;}
#contract-bar .done{color:var(--ok);}
#opp-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;}
.opp{flex:1;min-width:96px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:12px;
  padding:8px;text-align:center;font-size:12px;}
.opp .on{font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.opp .oc{color:var(--mut);margin-top:2px;}
.opp.me{border-color:var(--gold);}
.opp .dn{color:var(--ok);font-weight:800;}
.opp .turn{color:var(--gold);font-weight:800;}
#meld-area{margin:4px 0;max-height:30vh;overflow-y:auto;}
.meld-group{margin:8px 0;}
.meld-owner{font-size:12px;font-weight:800;color:var(--mut);letter-spacing:1px;margin-bottom:4px;}
.meld{display:inline-flex;margin:0 8px 8px 0;background:rgba(0,0,0,.25);border-radius:8px;padding:4px;}
#center-row{display:flex;justify-content:center;gap:26px;margin:10px 0;}
.pile{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;}
.pile-l{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--mut);}
.pile-n{font-size:12px;color:var(--mut);font-weight:700;}
#turn-note{text-align:center;min-height:22px;font-size:14px;font-weight:700;color:var(--gold);margin:2px 0 6px;}

/* cards */
.card{width:52px;height:72px;background:var(--card);border-radius:9px;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,.4);position:relative;flex:none;}
.card.red{color:#c0392b;}
.card .corner{position:absolute;top:3px;left:4px;text-align:center;line-height:1.08;}
.card .corner .cr{font-size:14px;font-weight:900;}
.card .corner .cs{font-size:14px;}
.card .pip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;}
.card.back{background:repeating-linear-gradient(45deg,#274e5e,#274e5e 6px,#1d3d4b 6px,#1d3d4b 12px);
  color:var(--gold);border:2px solid rgba(232,182,76,.5);}
.card.back span{font-size:24px;}
.card.mini{width:36px;height:50px;border-radius:7px;}
.card.mini .corner{top:2px;left:3px;line-height:1.05;}
.card.mini .corner .cr{font-size:10px;}
.card.mini .corner .cs{font-size:10px;}
.card.mini .pip{font-size:16px;}
.card.newcard{outline:3px solid #46e0c8;transform:translateY(-8px);
  animation:newpulse 1.4s ease-in-out infinite;}
.card.newcard::after{content:"NEW";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
  font-size:9px;font-weight:900;letter-spacing:1px;background:#46e0c8;color:#06352c;
  border-radius:6px;padding:2px 7px;white-space:nowrap;}
@keyframes newpulse{
  0%,100%{box-shadow:0 0 8px rgba(70,224,200,.5);}
  50%{box-shadow:0 0 22px rgba(70,224,200,.95);}
}
.card.joker .cr{font-size:22px;}
.card.joker .cs{font-size:10px;font-weight:700;letter-spacing:1px;}
.meld .card{margin-right:-14px;}
.meld .card:last-child{margin-right:0;}
.meld .card.jokertap{outline:3px solid var(--gold);}

#hand{display:flex;justify-content:center;align-items:flex-end;margin:6px 0 4px;min-height:92px;
  padding:16px 4px 2px;}
#hand .card{margin-right:-24px;cursor:pointer;transition:transform .12s;}
#hand .card:last-child{margin-right:0;}
#hand .card.sel{transform:translateY(-14px);outline:3px solid var(--gold);}
#hand .card:active{transform:scale(.96);}
#hand.count-many .card{margin-right:-30px;}
#hand.count-many .card:last-child{margin-right:0;}
.pile.drawsel .card{outline:3px solid var(--gold);outline-offset:2px;}

#action-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px;min-height:52px;}
#action-bar .btn{padding:11px 14px;font-size:14.5px;}
.ab-hint{width:100%;text-align:center;color:var(--mut);font-size:13px;}

/* interstitial + buy */
#interstitial,#buybox{position:fixed;inset:0;background:rgba(4,20,15,.92);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:24px;}
#interstitial.hidden,#buybox.hidden{display:none;}
.int-card{background:var(--felt);border:1px solid var(--gold);border-radius:20px;padding:28px 22px;
  max-width:340px;width:100%;text-align:center;}
.int-e{font-size:52px;}
.int-t{font-size:26px;font-weight:900;color:var(--gold);margin:8px 0;}

/* scoreboard */
.srow{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0;}
.srow .nm{flex:1;font-weight:700;font-size:17px;}
.srow .dp{color:var(--mut);font-size:14px;}
.srow .tp{font-weight:900;font-size:19px;color:var(--gold);}
.srow.win{border-color:var(--gold);}
.final-crown{font-size:64px;text-align:center;margin-top:20px;}
#final-winner{text-align:center;}
#final-sub{text-align:center;}
.sharecard{background:rgba(0,0,0,.35);border:1px dashed var(--gold);border-radius:14px;
  padding:14px;margin:14px 0;font-size:14px;line-height:1.6;white-space:pre-line;}

#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#222;
  color:#fff;padding:12px 20px;border-radius:24px;font-size:15px;font-weight:600;z-index:99;
  box-shadow:0 4px 14px rgba(0,0,0,.4);max-width:88vw;text-align:center;}
#toast.hidden{display:none;}

@media (max-height:700px){
  .card{width:46px;height:64px;}
  .card .cr{font-size:17px;} .card .cs{font-size:18px;}
  #meld-area{max-height:24vh;}
}