/* Layout: one palace-table screen — opponents' divan across the top, the pile in the middle, your hand at the foot; ledger beside on wide screens. Single deliberate night look (İznik cobalt + tomato red + gilt). */
:root{
  --bg:#0b1a26;
  --felt:#0f2f40;
  --felt-2:#14404f;
  --line:#2a5866;
  --fg:#edf3f0;
  --muted:#9cb6b8;
  --accent:#e2563d;
  --accent-ink:#fff4ef;
  --turq:#3fb8b0;
  --gold:#d8b45e;
  --card:#fbf9f3;
  --card-edge:#d9d3c4;
  --ink:#17222c;
  --red:#c2312a;
  --ok:#5cc28a;
  --warn:#f0b44a;
  --display:"Marcellus", "Palatino Linotype", Georgia, serif;
  --body:"Manrope", "Segoe UI", system-ui, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.45;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(63,184,176,.06) 0 22%, transparent 23%),
    radial-gradient(circle at 0 0, rgba(216,180,94,.05) 0 12%, transparent 13%),
    radial-gradient(circle at 100% 100%, rgba(216,180,94,.05) 0 12%, transparent 13%);
  background-size:64px 64px;}
.wrap{max-width:1120px;margin:0 auto;padding-block:12px 28px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:6px 14px}
.brand{font-family:var(--display);font-size:30px;letter-spacing:.14em;color:var(--gold);line-height:1}
.brand small{display:block;font-family:var(--body);font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-top:4px}
.hbtns{display:flex;gap:8px;flex-wrap:wrap}
button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:var(--felt-2);color:var(--fg);padding:9px 14px;font-weight:600}
button:hover:not(:disabled){border-color:var(--turq)}
button:focus-visible,input:focus-visible,select:focus-visible,.card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.gold{background:var(--gold);border-color:var(--gold);color:#2a1f08}
button.ghost{background:transparent}
input,select{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
label{color:var(--muted);font-size:13px}

/* setup */
.setup{max-width:520px;margin:4vh auto 0;background:var(--felt);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:16px;
  box-shadow:0 0 0 6px rgba(216,180,94,.07), 0 20px 50px rgba(0,0,0,.35)}
.setup h1{font-family:var(--display);font-weight:400;font-size:26px;margin:0;color:var(--gold);text-wrap:balance}
.setup p{margin:0;color:var(--muted)}
.row{display:grid;grid-template-columns:1fr minmax(0,190px);gap:10px;align-items:center}
.row select,.row input{width:100%}
.sect{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--turq);font-weight:700;border-top:1px solid var(--line);padding-top:12px}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.btnrow button{flex:1 1 140px}
.note{font-size:13px;color:var(--muted)}
.err{color:var(--warn);font-size:13px;min-height:1em}

/* room lobby */
.code{font-family:var(--display);font-size:42px;letter-spacing:.3em;color:var(--fg);text-align:center;background:var(--bg);border:1px dashed var(--gold);border-radius:12px;padding:8px 0 8px .3em;user-select:all}
.seatlist{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.seatlist li{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}
.seatlist li .tag{color:var(--muted);font-size:12px}

/* game */
.game{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;align-items:start}
@media (max-width:860px){.game{grid-template-columns:minmax(0,1fr)}}
.table{background:radial-gradient(ellipse at 50% 45%, var(--felt-2), var(--felt) 70%);border:1px solid var(--line);border-radius:22px;padding:14px;display:grid;gap:14px;
  box-shadow:inset 0 0 0 5px rgba(216,180,94,.10), 0 18px 40px rgba(0,0,0,.35)}
.opps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.seat{min-width:118px;flex:0 1 150px;background:rgba(11,26,38,.55);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:grid;gap:3px;transition:border-color .2s, box-shadow .2s}
.seat.turn{border-color:var(--gold);box-shadow:0 0 0 2px rgba(216,180,94,.35)}
.seat.out{opacity:.6}
.seat .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat .meta{display:flex;justify-content:space-between;gap:6px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.badge{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;background:rgba(216,180,94,.16);color:var(--gold);white-space:nowrap;justify-self:start}
.badge.low{background:rgba(226,86,61,.16);color:#ff9d88}
.badge.mid{background:rgba(63,184,176,.16);color:var(--turq)}
.backs{display:flex;gap:2px;height:14px;align-items:flex-end}
.backs i{display:block;width:6px;height:12px;border-radius:2px;background:linear-gradient(135deg,var(--accent),#8f2a1d)}
.center{display:grid;justify-items:center;gap:8px;padding:10px 0;min-height:150px;align-content:center}
.pilecap{font-size:13px;color:var(--muted);text-align:center}
.pile{display:flex;justify-content:center;min-height:86px;align-items:center}
.pile .card{margin-left:-24px;cursor:default}
.pile .card:first-child{margin-left:0}
.empty{font-family:var(--display);color:var(--muted);font-size:18px;border:1px dashed var(--line);border-radius:12px;padding:20px 26px}
.status{text-align:center;font-weight:600;min-height:1.4em;text-wrap:balance}
.status.ok{color:var(--ok)} .status.bad{color:var(--warn)} .status.turn{color:var(--gold)}
.me{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:10px}
.mehead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding-top:10px}
.card{width:54px;height:78px;border-radius:8px;background:var(--card);border:1px solid var(--card-edge);color:var(--ink);position:relative;display:grid;place-items:center;
  font-family:var(--display);font-size:24px;box-shadow:0 2px 6px rgba(0,0,0,.35);cursor:pointer;user-select:none;transition:transform .12s, box-shadow .12s, opacity .12s;flex:none}
.card .ix{position:absolute;top:3px;left:5px;font-size:14px;line-height:1;font-family:var(--body);font-weight:700;text-align:center}
.card .ix b{display:block;font-size:11px}
.card.red{color:var(--red)}
.card.sel{transform:translateY(-10px);box-shadow:0 0 0 3px var(--gold), 0 8px 14px rgba(0,0,0,.45)}
.card.can{box-shadow:0 0 0 2px rgba(63,184,176,.85), 0 2px 6px rgba(0,0,0,.35)}
.card.can.sel{box-shadow:0 0 0 3px var(--gold), 0 8px 14px rgba(0,0,0,.45)}
.card.dim{opacity:.42}
@media (max-width:520px){.card{width:44px;height:64px;font-size:20px}.card .ix{font-size:12px}.pile .card{margin-left:-18px}.seat{min-width:100px;flex-basis:120px}}
.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.actions button{min-width:120px}
aside{display:grid;gap:12px}
.panel{background:var(--felt);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px;min-width:0}
.panel h3{margin:0;font-family:var(--display);font-weight:400;font-size:17px;color:var(--gold)}
.score{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.score td{padding:4px 2px;border-bottom:1px solid rgba(42,88,102,.5)}
.score td:last-child{text-align:right;font-weight:700}
.log{margin:0;padding:0;list-style:none;font-size:13px;color:var(--muted);display:grid;gap:3px}
.log li:last-child{color:var(--fg)}
/* overlays */
.ov{position:fixed;inset:0;background:rgba(5,12,18,.72);display:grid;place-items:center;z-index:20;
  padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.dlg{background:var(--felt);border:1px solid var(--gold);border-radius:16px;padding:20px;max-width:560px;width:100%;max-height:100%;overflow:auto;display:grid;gap:12px}
.dlg h2{margin:0;font-family:var(--display);font-weight:400;color:var(--gold);font-size:24px}
.dlg p,.dlg li{color:var(--fg)}
.dlg ul{margin:0;padding-left:20px;display:grid;gap:6px}
.ranktbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ranktbl td{padding:6px 4px;border-bottom:1px solid var(--line)}
.ranktbl td.n{text-align:right}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
.netbar{font-size:12px;color:var(--warn);text-align:center;min-height:0}

/* ---- profile, shop, cosmetics ---- */
.profbtn{display:inline-flex;align-items:center;gap:6px}
.avatar{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font-size:18px;background:var(--bg);border:2px solid var(--line);flex:none;line-height:1}
.avatar.big{width:64px;height:64px;font-size:36px;border-width:3px}
.avatar.fr-bronz{border-color:#b07a3c}
.avatar.fr-gumus{border-color:#cfd7dc;box-shadow:0 0 6px rgba(207,215,220,.45)}
.avatar.fr-altin{border-color:var(--gold);box-shadow:0 0 8px rgba(216,180,94,.6)}
.avatar.fr-yakut{border-color:#d0263f;box-shadow:0 0 10px rgba(208,38,63,.7)}
.who{display:flex;gap:8px;align-items:center;min-width:0}
.seat .who .nm{min-width:0}
.ptitle,.seat .ttl{font-size:11px;color:var(--turq);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile{max-width:760px;margin:2vh auto 0;background:var(--felt);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:14px}
.profhead{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.profmain{flex:1 1 220px;display:grid;gap:4px;min-width:0}
.row2{display:flex;gap:8px;flex-wrap:wrap}
.row2 input{flex:1 1 140px}
.points{font-family:var(--display);font-size:22px;color:var(--gold)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{padding:7px 12px;font-size:13px}
.tabs button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#2a1f08}
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.item{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px;display:grid;gap:6px;justify-items:center;text-align:center}
.item.on{border-color:var(--gold)}
.item .pv{height:64px;display:grid;place-items:center}
.item .nm2{font-weight:700;font-size:13px}
.item .pr{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.item button{width:100%;padding:7px 8px;font-size:13px}
.swatch{width:84px;height:54px;border-radius:8px;border:1px solid var(--line)}
.bigback{width:40px;height:58px;border-radius:6px;border:1px solid rgba(0,0,0,.35)}
.recover summary{cursor:pointer;color:var(--muted)}
.rcode{font-family:var(--display);letter-spacing:.12em;color:var(--fg);user-select:all}
/* card backs (small backs on seats and previews) */
.cb-klasik{background:linear-gradient(135deg,var(--accent),#8f2a1d)}
.cb-iznik{background:repeating-linear-gradient(45deg,#1d5f9e 0 4px,#f2efe6 4px 6px,#3fb8b0 6px 9px)}
.cb-lale{background:radial-gradient(circle at 50% 35%,#e2563d 0 28%,transparent 30%),linear-gradient(#1f5a3a,#123826)}
.cb-altin{background:linear-gradient(135deg,#f3dc8c,#b8862e 55%,#f3dc8c)}
.cb-kadife{background:radial-gradient(circle at 30% 30%,#c4283b,#5e0d17)}
.cb-sultan{background:radial-gradient(circle,#d8b45e 0 22%,transparent 24%),linear-gradient(135deg,#2a0f3d,#5b1f6e)}
.backs i[class^="cb-"]{background-size:auto}
/* emotes */
.emotes{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.emotes button{font-size:20px;padding:4px 10px;line-height:1.2}
.bubble{position:absolute;top:-14px;right:-6px;font-size:28px;animation:pop 2.2s ease forwards;pointer-events:none}
.seat{position:relative}
@keyframes pop{0%{transform:scale(.4);opacity:0}15%{transform:scale(1.15);opacity:1}80%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--gold);color:#2a1f08;font-weight:700;padding:10px 16px;border-radius:999px;z-index:30;box-shadow:0 8px 20px rgba(0,0,0,.4)}
/* table themes (only the owner sees theirs) */
html.th-zumrut{--felt:#0e3528;--felt-2:#15563f;--line:#2b6b55}
html.th-bordo{--felt:#36101a;--felt-2:#561a28;--line:#7a3040}
html.th-lacivert{--felt:#0f1b3c;--felt-2:#1a2b5a;--line:#8c7440}
html.th-cini{--felt:#0f3943;--felt-2:#1b6574;--line:#4fa5b0}
html.th-cini .table{background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.06) 0 18%,transparent 19%),radial-gradient(ellipse at 50% 45%,var(--felt-2),var(--felt) 70%);background-size:46px 46px,100% 100%}
@media (prefers-reduced-motion:reduce){.bubble{animation:none}}