/* 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.danger{background:#c0392b;border-color:#c0392b;color:#fff;}
.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 20px;}
.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;touch-action:manipulation;}
#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;top:-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;touch-action:manipulation;}
.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;touch-action:manipulation;}
#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;}
/* subtle "your move" signals: piles glow when you must draw, hand glows when you must act */
.pile.pile-glow .card{animation:pileGlow 1.6s ease-in-out infinite;}
@keyframes pileGlow{
  0%,100%{box-shadow:0 0 0 3px rgba(255,215,0,.55),0 0 14px rgba(255,215,0,.35);}
  50%{box-shadow:0 0 0 5px rgba(255,215,0,.3),0 0 24px rgba(255,215,0,.55);}
}
#hand.hand-glow{box-shadow:0 0 0 2px rgba(122,162,255,.45),0 0 22px rgba(122,162,255,.22);
  border-radius:16px;}
/* a wild standing in for a rank inside a meld: shows the rank it plays as */
.card.wild-as{border:2px dashed var(--gold);background:#2a2410;}
.card.wild-as .pip{font-size:15px;opacity:.85;}
/* LIVERPOOL moment */
#livov{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;background:rgba(4,10,20,.72);pointer-events:none;}
#livov.hidden{display:none;}
#liv-text{font-size:64px;font-weight:900;letter-spacing:4px;color:#7CFC00;
  text-shadow:0 0 24px rgba(124,252,0,.7),0 4px 0 #1a4d00;
  animation:livPop 2.4s ease-out forwards;}
@keyframes livPop{
  0%{transform:scale(.2) rotate(-8deg);opacity:0;}
  12%{transform:scale(1.25) rotate(3deg);opacity:1;}
  22%{transform:scale(1) rotate(0);}
  80%{transform:scale(1);opacity:1;}
  100%{transform:scale(1.1);opacity:0;}
}
#liv-sub{font-size:17px;font-weight:700;color:#fff;text-shadow:0 2px 8px #000;
  animation:livPop 2.4s ease-out forwards;}
.liv-highlight{animation:livHi 1s ease-in-out 4;}
@keyframes livHi{
  0%,100%{box-shadow:none;}
  50%{box-shadow:0 0 0 4px #7CFC00,0 0 26px rgba(124,252,0,.8);}
}
/* generic modal (wild placement, shed picker, liverpool info) */
.genov{position:fixed;inset:0;z-index:70;background:rgba(4,10,20,.78);
  display:flex;align-items:flex-end;justify-content:center;}
.genov.hidden{display:none;}
.genmodal{background:#101828;border-top:2px solid var(--gold);border-radius:18px 18px 0 0;
  width:100%;max-width:520px;max-height:76vh;overflow-y:auto;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));}
.genmodal h3{margin:0 0 4px;font-size:18px;}
.genmodal .gsub{color:var(--mut);font-size:13.5px;margin:0 0 12px;line-height:1.45;}
.wild-opt{display:flex;align-items:center;gap:2px;width:100%;text-align:left;
  background:rgba(255,255,255,.05);border:2px solid var(--line);border-radius:12px;
  padding:10px;margin:0 0 8px;touch-action:manipulation;}
.wild-opt:active{border-color:var(--gold);}
.wild-opt .card{margin-right:-10px;}
.shed-tray{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 12px;}
.shed-tray .card{cursor:pointer;}
.shed-tray .card.shedsel{outline:3px solid #7CFC00;transform:translateY(-8px);}
.genrow{display:flex;gap:8px;}
.genrow .btn{flex:1;}

#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,#confirmbox{position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;padding:24px;touch-action:manipulation;}
/* fully opaque: nobody's cards show through the handoff or buy popups */
#interstitial,#buybox{background:#07130e;}
#confirmbox{background:rgba(4,20,15,.92);}
#interstitial.hidden,#buybox.hidden,#confirmbox.hidden{display:none;}

/* peek-at-hand overlay (shown from the buy prompt; tap anywhere to hide) */
#peekov{position:fixed;inset:0;background:rgba(4,20,15,.96);z-index:70;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;touch-action:manipulation;}
#peekov.hidden{display:none;}
.peek-hint{color:var(--gold);font-weight:800;margin-bottom:14px;text-align:center;}
#peek-hand{display:flex;justify-content:flex-start;align-items:flex-end;overflow-x:auto;max-width:100%;
  padding:24px 8px 12px;}
#peek-hand .card{margin-right:-24px;flex:0 0 auto;}
#peek-hand .card:last-child{margin-right:0;}
/* discard confirmation card */
#confirm-card{display:flex;justify-content:center;margin:8px 0;}
/* the card on offer in the buy prompt */
#buy-card{display:flex;justify-content:center;margin:2px 0 10px;}
#buy-card .card{transform:scale(1.25);margin:8px 0;}
.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;}

#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;}
#settingsbox{position:fixed;inset:0;z-index:50;background:#07130e;}
#settingsbox.hidden{display:none;}
.set-row{display:flex;justify-content:space-between;align-items:center;
  padding:10px 2px;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px;}
.set-row b{font-family:ui-monospace,monospace;font-weight:600;}

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

/* buy HUD + history + winner screen */
#hud-row{display:flex;gap:8px;align-items:center;margin:6px 0;}
.pill{background:rgba(0,0,0,.4);border:1px solid var(--gold);border-radius:999px;
  padding:4px 12px;font-weight:800;font-size:14px;}
.pillbtn{background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;font-weight:700;font-size:14px;color:var(--text);cursor:pointer;}
#history-panel{margin:0 0 6px;background:rgba(0,0,0,.4);border:1px solid var(--line);
  border-radius:12px;padding:8px 12px;max-height:30vh;overflow-y:auto;}
.hist-ev{font-size:13px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.hist-ev:last-child{border-bottom:none;}
.hist-ev .mut{color:var(--mut);}
#buywon{position:fixed;inset:0;background:rgba(4,20,15,.94);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;}
#buywon.hidden{display:none;}
.int-card.wide{max-width:430px;}
#buywon-cards{display:flex;gap:20px;justify-content:center;margin:14px 0 6px;}
.bw-card{display:flex;flex-direction:column;align-items:center;gap:8px;}
.bw-card .card{transform:scale(1.3);margin:12px 6px;outline:3px solid var(--gold);cursor:default;}
.bw-tag{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--gold);}
#buywon-hand{display:flex;justify-content:flex-start;align-items:flex-end;
  overflow-x:auto;margin:8px 0 12px;min-height:110px;padding:24px 8px 12px;}
#buywon-hand .card{margin-right:-24px;flex:0 0 auto;cursor:default;}
#buywon-hand .card:last-child{margin-right:0;}
.opp{cursor:pointer;}
.opp .buysline{display:none;color:var(--gold);font-weight:800;font-size:12px;margin-top:2px;}
.opp.open .buysline{display:block;}
.sub.dim{opacity:.65;}

.lp-row .rm[data-armed="1"]{color:#ff8a8a;font-weight:800;}
/* how-to deep dive */
.howto details{border-top:1px solid var(--line);padding:10px 2px;}
.howto details:last-child{border-bottom:1px solid var(--line);}
.howto summary{cursor:pointer;font-size:14px;touch-action:manipulation;list-style:none;}
.howto summary::-webkit-details-marker{display:none;}
.howto summary::after{content:" +";color:var(--gold);font-weight:800;}
.howto details[open] summary::after{content:" −";}
.howto details p{margin:8px 0 2px;font-size:13.5px;}
.howto .ov{margin-top:0;}

/* draw-first nudge: shake both piles */
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-7px);}40%{transform:translateX(7px);}
  60%{transform:translateX(-5px);}80%{transform:translateX(5px);}
}
.pile.shake{animation:shake .45s ease;}

/* win celebration */
#celebrate{position:fixed;inset:0;z-index:80;background:#07130e;
  display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;}
#celebrate.hidden{display:none;}
#cel-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.confetti{position:absolute;top:-14px;width:8px;height:14px;opacity:.95;animation:celfall linear forwards;}
@keyframes celfall{to{transform:translateY(112vh) rotate(720deg);}}
.cel-inner{position:relative;z-index:2;text-align:center;max-width:340px;width:100%;}
.cel-trophy{font-size:72px;animation:celpop .6s ease;}
@keyframes celpop{0%{transform:scale(.3);}60%{transform:scale(1.15);}100%{transform:scale(1);}}
.cel-name{font-size:32px;font-weight:900;color:var(--gold);margin:10px 0 16px;}
.cel-row{display:flex;justify-content:space-between;align-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;margin:6px 0;font-weight:700;}
.cel-row .tp{font-weight:900;color:var(--gold);font-size:19px;min-width:64px;text-align:right;}
#cel-go{margin-top:14px;}

/* score screen: remaining hands + next-deal line */
#screen-score{position:relative;}
#score-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5;}
#score-next{text-align:center;font-weight:800;color:var(--gold);}
.srow{flex-wrap:wrap;}
.srow-hand{width:100%;display:flex;flex-wrap:wrap;gap:3px;margin-top:6px;}
.srow-hand .card{margin:0;}

/* buy peek sort toggle */
#peek-sort{margin:2px 0 4px;}

/* --- BoyGames ads --- */
.ad-banner{display:none;margin:14px auto 0;max-width:420px;}
.ad-banner.ad-on{display:block;}
.ad-house{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--cream);
  text-decoration:none;touch-action:manipulation;}
.ad-house .ad-e{font-size:28px;flex:none;}
.ad-house .ad-tx{display:flex;flex-direction:column;flex:1;text-align:left;min-width:0;}
.ad-house .ad-tx b{font-size:15px;color:var(--gold);}
.ad-house .ad-tx i{font-style:normal;font-size:12px;color:var(--mut);}
.ad-house .ad-go{font-size:24px;color:var(--mut);flex:none;}
.ad-inter{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(4,10,8,.82);padding:22px;animation:fade .25s ease;}
.ad-inter-card{display:flex;flex-direction:column;gap:14px;width:100%;max-width:340px;}
.ad-inter-card .btn{align-self:center;}
.linklike{background:none;border:none;color:var(--mut);font-size:13px;text-decoration:underline;
  padding:8px;touch-action:manipulation;cursor:pointer;}