:root{
  --bg1:#0b3d2e; --bg2:#12583f; --gold:#e7c56b; --cream:#f5efe1;
  --red:#c0392b; --dark:#1b1b1b; --accent:#ffcf5c; --panel:#0a2b20; --line:#2f7a5c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(circle at 50% 25%,var(--bg2),var(--bg1) 70%);
  color:var(--cream);min-height:100vh;overflow:hidden;user-select:none;
}
.hidden{display:none !important;}
.logo{width:min(340px,80vw);filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));}
.logo.sm{width:200px;} .logo.tiny{width:96px;}

/* Ekranlar */
.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:22px;}
.panel{background:rgba(6,30,22,.72);border:1px solid var(--line);border-radius:16px;padding:20px;width:min(360px,92vw);
  display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.4);}
.panel h2{margin:2px 0;color:var(--gold);text-align:center;}
label{font-size:12px;opacity:.85;margin-top:4px;}
input{background:var(--panel);color:var(--cream);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:16px;outline:none;}
input:focus{border-color:var(--gold);}
.btn{background:var(--gold);color:#3a2c00;border:none;border-radius:12px;padding:12px 16px;font-weight:800;font-size:15px;cursor:pointer;transition:transform .08s,filter .1s;}
.btn:active{transform:scale(.97);}
.btn.big{font-size:17px;padding:14px;}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--line);}
.btn.danger{background:transparent;color:#ff9a8f;border:1px solid #7a2f2f;}
.btn.sm{padding:8px 12px;font-size:13px;}
.or{text-align:center;opacity:.6;font-size:12px;margin:2px 0;}
.err{color:#ff9a8f;font-size:13px;min-height:16px;text-align:center;}
.muted{opacity:.7;font-size:13px;}
.rules{max-width:360px;font-size:12.5px;opacity:.9;}
.rules summary{cursor:pointer;color:var(--gold);}
.rules b{color:var(--gold);}

/* Lobi */
.codebox{text-align:center;margin:6px 0;}
.code{font-size:34px;font-weight:900;letter-spacing:6px;color:var(--gold);}
.code-tag{font-weight:800;letter-spacing:3px;color:var(--gold);font-size:14px;}
.spinner{text-align:center;font-size:13px;opacity:.8;margin-top:6px;}
.dots{animation:blink 1.2s steps(4) infinite;}
@keyframes blink{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}

/* Masa */
.table{justify-content:space-between;padding:0;}
.topbar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;}
.playerrow{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;}
.pname{font-size:13px;color:var(--gold);font-weight:700;}
.deckwrap{display:flex;flex-direction:column;align-items:center;gap:6px;}
.badge{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:3px 12px;font-size:13px;font-weight:700;}
.deck{width:76px;height:108px;border-radius:12px;cursor:pointer;border:3px solid var(--cream);
  background:repeating-linear-gradient(45deg,#7b1f1f 0 8px,#8f2626 8px 16px);
  box-shadow:0 6px 14px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;transition:transform .08s;}
.deck span{font-size:26px;color:var(--cream);font-weight:800;opacity:.85;text-shadow:0 1px 2px #000;}
.deck:active{transform:scale(.96);}
.deck.disabled{opacity:.4;cursor:default;filter:grayscale(.4);}
.hint{font-size:11px;opacity:.75;height:14px;}

.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;}
.pilezone{width:150px;height:210px;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.pilezone .glow{position:absolute;inset:-10px;border-radius:22px;opacity:0;transition:opacity .15s;}
.pilezone.hot .glow{opacity:1;box-shadow:0 0 0 4px var(--accent),0 0 40px 6px var(--accent);animation:pulse .5s infinite alternate;}
@keyframes pulse{from{box-shadow:0 0 0 4px var(--accent),0 0 26px 4px var(--accent);}to{box-shadow:0 0 0 6px #fff3c4,0 0 54px 10px var(--accent);}}
.emptypile{color:#bfe0d1;font-size:13px;opacity:.7;text-align:center;}
.card{position:absolute;width:118px;height:168px;border-radius:12px;background:var(--cream);border:1px solid #d9cfb4;
  box-shadow:0 8px 18px rgba(0,0,0,.45);display:flex;flex-direction:column;justify-content:space-between;padding:8px 10px;color:var(--dark);}
.card.red{color:var(--red);}
.card .corner{font-weight:800;line-height:1;display:flex;flex-direction:column;align-items:center;width:26px;}
.card .corner.br{align-self:flex-end;transform:rotate(180deg);}
.card .pip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:56px;}
.card .rank{font-size:22px;} .card .suit{font-size:20px;}
.status{min-height:44px;text-align:center;font-size:15px;font-weight:600;padding:0 16px;}
.status .big{font-size:20px;color:var(--accent);font-weight:900;letter-spacing:.5px;}
.flash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;font-weight:900;color:var(--accent);
  text-shadow:0 2px 10px #000;pointer-events:none;opacity:0;}
.flash.show{animation:flash .8s ease-out;}
@keyframes flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.4);}20%{opacity:1;transform:translate(-50%,-50%) scale(1.1);}100%{opacity:0;transform:translate(-50%,-60%) scale(1);}}

/* Sonuç + toast */
.overlay{position:fixed;inset:0;background:rgba(4,20,14,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:20;text-align:center;padding:24px;}
.overlay h1{font-size:38px;margin:0;color:var(--gold);}
.overlay p{max-width:320px;opacity:.9;}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);
  padding:8px 16px;border-radius:20px;font-size:13px;opacity:0;transition:opacity .2s;z-index:25;pointer-events:none;}
.toast.show{opacity:1;}
@media (max-height:680px){.card{width:96px;height:138px;}.pilezone{width:130px;height:180px;}.deck{width:64px;height:92px;}.logo.tiny{width:80px;}}