/* Tarayıcıda oyun ekranları - sade/aydınlık */
.play-body { background:var(--bg-soft); overflow:hidden; }
.screen { display:none; }
.screen.active { display:block; }
#tableScreen.active, #lobbyScreen.active { height:calc(100vh - 64px); }

/* ---- Giriş ---- */
#authScreen { min-height:calc(100vh - 64px); display:none; align-items:center; justify-content:center; }
#authScreen.active { display:flex; }
.auth-card { width:340px; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:30px 26px; box-shadow:var(--shadow-lg); text-align:center; }
.auth-card .logo { display:block; color:var(--brand); font-size:28px; font-weight:800; letter-spacing:3px; }
.auth-card .sub { color:var(--ink-soft); margin:4px 0 20px; letter-spacing:1px; text-transform:uppercase; font-size:11px; }
.auth-card input { width:100%; padding:11px 13px; margin-bottom:10px; font-size:14px;
  border:1.5px solid var(--line); border-radius:9px; outline:none; font-family:inherit; }
.auth-card input:focus { border-color:var(--brand); }
.auth-btns { display:flex; gap:10px; margin-top:4px; }
.auth-btns .btn { flex:1; padding:11px; }
.btn.small { padding:8px 15px; font-size:13px; }
.auth-msg { min-height:17px; margin-top:12px; color:#c0392b; font-size:12.5px; }
.server-row { margin-top:18px; text-align:left; }
.server-row label { color:var(--ink-soft); font-size:11px; }
.server-row input { margin-top:3px; font-size:12px; padding:8px 10px; }

/* ---- Salon ---- */
.lobby-wrap { height:100%; display:flex; flex-direction:column; max-width:1180px; margin:0 auto; padding:18px 24px; }
.lobby-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.lobby-title { font-size:22px; font-weight:800; }
.lobby-user { color:var(--brand); font-weight:700; }
.lobby-stat { color:#2a9d5a; font-size:13px; }
.lobby-head .btn { margin-left:auto; }
.lobby-grid { flex:1; display:grid; grid-template-columns:1fr 300px; gap:18px; min-height:0; }
.board-panel, .side-panel { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.panel-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-weight:700; }
.panel-head.sub { border-top:1px solid var(--line); }
.badge { background:var(--accent-soft); color:#8a6516; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; }
.table-list { width:100%; border-collapse:collapse; font-size:13px; }
.table-list thead th { position:sticky; top:0; background:var(--bg-soft); text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); font-weight:700; color:var(--ink-soft); font-size:12px; }
.table-list tbody { display:block; overflow-y:auto; }
.table-list thead, .table-list tbody tr { display:table; width:100%; table-layout:fixed; }
.table-list tbody { max-height:100%; }
.table-list td { padding:9px 10px; border-bottom:1px solid #f0f2f5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-list tr { cursor:pointer; }
.table-list tbody tr:hover { background:#eef5f0; }
.table-list .c-name { font-weight:700; color:var(--brand-dark); }
.table-list .c-set { color:#2471a3; }
.table-list .occ { color:#1a7a3a; }
.table-list .occ.empty { color:#b9bdc7; }
.c-no { width:52px; } .c-iz { width:66px; }
.list-empty { text-align:center; color:var(--ink-soft); padding:30px; font-style:italic; }

.side-list { overflow-y:auto; flex:1; }
.side-list.top { flex:none; max-height:170px; }
.side-list .r { display:flex; align-items:center; gap:8px; padding:6px 14px; border-bottom:1px solid #f3f5f8; font-size:13px; }
.side-list .r:hover { background:#f7f9fc; }
.side-list .r.me { background:#eef5f0; font-weight:700; }
.side-list .r .nk { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-list .r .pu { color:var(--ink-soft); font-size:12px; }
.side-list.top .r { padding:4px 14px; font-size:12px; }
.side-list .rk { width:20px; color:#9aa0ad; font-weight:700; font-size:11px; }
.lobby-foot { margin-top:12px; color:var(--ink-soft); font-size:12.5px; text-align:center; }

/* ---- Masa ---- */
.tbl-bar { display:flex; align-items:center; gap:12px; padding:12px 24px; background:#fff; border-bottom:1px solid var(--line); }
.tbl-name { font-weight:800; font-size:17px; }
.tbl-info { color:var(--ink-soft); flex:1; }
.tbl-grid { height:calc(100% - 57px - 148px); display:grid; grid-template-columns:1fr 280px; gap:0; }
.felt { position:relative; margin:16px; background:radial-gradient(ellipse at center,#2f8f63,#1c6344 80%);
  border:10px solid #7a5230; border-radius:20px; box-shadow:inset 0 0 50px rgba(0,0,0,.3); overflow:hidden; }
.seat { position:absolute; background:rgba(0,0,0,.3); border:1.5px solid rgba(255,255,255,.25); border-radius:10px; padding:6px 12px; color:#fff; text-align:center; }
.seat.top { top:12px; left:50%; transform:translateX(-50%); }
.seat.left { left:12px; top:50%; transform:translateY(-50%); }
.seat.right { right:12px; top:50%; transform:translateY(-50%); }
.seat-name { font-weight:700; font-size:14px; }
.seat-sub { font-size:11px; color:#d8e6dd; }
.felt-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; gap:14px; align-items:flex-end; background:rgba(0,0,0,.18); padding:12px 18px; border-radius:14px; }
.dist { display:flex; flex-direction:column; align-items:center; gap:5px; }
.dist .lbl { font-size:10px; color:#e5efe9; text-transform:uppercase; letter-spacing:.5px; }
.tile-slot { }
.pill-count { background:#f7f3e7; color:#8e2b1f; font-weight:800; padding:6px 12px; border-radius:8px; min-width:40px; text-align:center; }
.pill-count.time { background:#c0392b; color:#fff; }
.melds-area { position:absolute; left:14px; top:60px; right:14px; display:flex; flex-wrap:wrap; gap:8px; }
.meld { display:flex; gap:2px; background:rgba(255,255,255,.12); padding:3px; border-radius:6px; }
.turn-banner { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); background:#c0392b; color:#fff; font-weight:700; padding:5px 20px; border-radius:999px; animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:.5; } }

.tbl-side { background:#fff; border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.score-list { padding:6px 0; }
.score-list .row { display:flex; justify-content:space-between; padding:5px 16px; font-size:13px; border-bottom:1px solid #f3f5f8; }
.score-list .row b { color:var(--brand-dark); }
.tchat { flex:1; overflow-y:auto; padding:8px 16px; font-size:13px; min-height:60px; }
.tchat .m b { color:var(--brand-dark); }
.cinput { display:flex; border-top:1px solid var(--line); }
.cinput input { flex:1; border:none; outline:none; padding:9px 12px; font-family:inherit; font-size:13px; }
.cinput button { border:none; background:var(--brand); color:#fff; padding:0 14px; cursor:pointer; }

/* ---- Istaka ---- */
.rack-bar { height:148px; background:#6b4a2a; border-top:3px solid var(--accent); display:flex; flex-direction:column; }
.rack-actions { display:flex; gap:10px; justify-content:center; padding:10px; background:rgba(0,0,0,.15); }
.rack-hand { flex:1; display:flex; flex-wrap:wrap; gap:4px; align-content:center; justify-content:center; padding:6px 16px; overflow-y:auto; }

/* ---- Taşlar ---- */
.tile { width:30px; height:42px; border-radius:5px; background:linear-gradient(160deg,#fffdf4,#efe9d8); border:1px solid #c9c2ad;
  box-shadow:1px 2px 3px rgba(0,0,0,.25), inset 0 1px 0 #fff; display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:19px; color:#333; position:relative; cursor:default; }
.tile.r { color:#c0392b; } .tile.b { color:#2471a3; } .tile.s { color:#2c3e50; } .tile.y { color:#c99700; }
.tile.fake::after { content:"★"; position:absolute; bottom:1px; font-size:11px; color:#8e44ad; }
.rack-hand .tile { cursor:pointer; transition:transform .1s; }
.rack-hand .tile:hover { transform:translateY(-4px); }
.rack-hand .tile.sel { outline:2.5px solid var(--accent); transform:translateY(-8px); box-shadow:0 0 10px rgba(201,150,43,.7); }

.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#1f2430; color:#fff;
  padding:10px 20px; border-radius:8px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .25s; z-index:200; }
.toast.show { opacity:1; }

@media (max-width:820px) {
  .lobby-grid { grid-template-columns:1fr; }
  .tbl-grid { grid-template-columns:1fr; }
  .tbl-side { display:none; }
}