/* ═══════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════ */
* { margin:0; padding:0; box-sizing:border-box; user-select:none; -webkit-tap-highlight-color:transparent; }
body {
  font-family:'Segoe UI',system-ui,sans-serif;
  background:#1a1a2e; color:#fff;
  display:flex; justify-content:center; align-items:center;
  min-height:100vh; min-height:100dvh; overflow:hidden;
  touch-action:manipulation;
}
/* ─── Mobile wrapper: centers & scales the game board ─── */
#game-wrapper {
  display:flex; justify-content:center; align-items:center;
  width:100%; height:100%;
  width:100vw; width:100dvw; height:100vh; height:100dvh;
  max-width:100%; max-height:100%;
  overflow:hidden;
  position:relative;
}

/* Portrait uyarı — masa açıkken */
#rotate-tip {
  display:none;
  position:fixed; inset:0; z-index:9998;
  align-items:center; justify-content:center;
  background:rgba(8,12,24,.88);
  padding:24px;
  text-align:center;
}
#rotate-tip:not([hidden]) { display:flex; }
.rotate-tip-card {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:22px 26px; border-radius:18px;
  background:linear-gradient(160deg,#1a2744,#0d1528);
  border:1px solid rgba(255,215,0,.28);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  max-width:300px;
}
.rotate-tip-card .rotate-ico {
  font-size: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd700;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 14px;
  margin-bottom: 4px;
}
.rotate-tip-card .rotate-ico svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}
.rotate-tip-card strong { font-size:17px; color:#ffe082; }
.rotate-tip-card span { font-size:13px; color:rgba(255,255,255,.7); }

body.is-mobile.is-landscape #game {
  border-radius:0 !important;
}

/* ═══════════════════════════════════════════
   GAME BOARD
   ═══════════════════════════════════════════ */
#game {
  width:1000px; height:720px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,215,0,.06), transparent 55%),
    linear-gradient(160deg,#0d3b2e 0%, #145c45 45%, #0a2f24 100%);
  border-radius:24px; position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.6), inset 0 0 80px rgba(0,0,0,.25);
  display:flex; flex-direction:column;
  padding:10px 12px 4px; overflow:hidden;
  border:2px solid rgba(255,215,0,.2);
}
#game::before {
  content:'101 OKEY';
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-30deg);
  font-size:120px; font-weight:900; color:rgba(255,255,255,.03);
  pointer-events:none; letter-spacing:20px; z-index:0;
}

/* ═══════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════ */
#topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px;
  background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; flex-shrink:0; z-index:1;
  gap:10px;
}
#topbar .tb-meta,
#topbar .room-info.tb-meta {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  min-width:0; flex:1;
}
#topbar .tb-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  font-size:11px; font-weight:600; color:rgba(255,255,255,.7);
  white-space:nowrap;
}
#topbar .tb-chip.tb-room {
  max-width:120px; overflow:hidden; text-overflow:ellipsis;
  color:#fff; font-weight:800;
  background:rgba(255,215,0,.1); border-color:rgba(255,215,0,.28);
}
#topbar .tb-chip.tb-rem strong {
  color:#ffd700; font-weight:800; font-variant-numeric:tabular-nums;
}
#topbar .tb-chip.tb-rem.can-draw {
  border-color:rgba(143,212,184,.55);
  background:rgba(26,107,82,.18);
  color:#c8e6c9;
  animation:remDrawPulse 1.4s ease-in-out infinite;
}
#topbar .tb-chip.tb-rem.can-draw strong { color:#a8e0c8; }
#topbar .tb-chip.tb-rem.is-low:not(.can-draw) {
  border-color:rgba(255,138,0,.45);
  background:rgba(255,106,0,.12);
  color:#ffcc80;
}
#topbar .tb-chip.tb-rem.is-low:not(.can-draw) strong { color:#ff8a00; }
@keyframes remDrawPulse {
  0%, 100% { box-shadow:0 0 0 rgba(26,107,82,0); }
  50% { box-shadow:0 0 12px rgba(26,107,82,.45); }
}
@media (prefers-reduced-motion: reduce) {
  #topbar .tb-chip.tb-rem.can-draw { animation: none !important; }
}
#topbar .tb-chip.tb-bet {
  color:rgba(255,255,255,.6); font-weight:600;
  background:rgba(0,0,0,.2);
}
#topbar .tb-dock {
  display:inline-flex; align-items:center; gap:6px;
  margin-left:4px; flex-shrink:0;
}
#topbar .tb-dock-btn {
  position:relative;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px;
  border:1px solid rgba(255,215,0,.4);
  background:linear-gradient(145deg,rgba(18,32,58,.95),rgba(8,18,37,.95));
  color:#ffd700; font-size:11px; font-weight:700;
  cursor:pointer; white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  transition:transform .15s, filter .15s, box-shadow .15s;
}
#topbar .tb-dock-btn:hover { transform:translateY(-1px); filter:brightness(1.1); }
#topbar .tb-dock-btn:active { transform:scale(.96); }
#topbar .tb-dock-btn .dock-ico {
  display:flex; width:14px; height:14px; color:inherit;
}
#topbar .tb-dock-btn .dock-ico svg { width:14px; height:14px; fill:currentColor; }
#topbar .tb-dock-btn#btn-gift {
  border-color:rgba(255,106,0,.5); color:#ff8a00;
}
#topbar .tb-dock-btn .dock-badge {
  position:absolute; top:-5px; right:-4px;
}
#topbar .indicator {
  display:flex; align-items:flex-end; justify-content:center; gap:10px;
  flex-shrink:0;
}
#topbar .ind-pair {
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
#topbar .ind-cap {
  font-size:9px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:rgba(255,255,255,.4);
}
.indicator-box {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:42px; border-radius:6px;
  font-weight:bold; font-size:14px; color:#212121;
  background:linear-gradient(145deg,#fffbf3,#e8dfd0);
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.indicator-box.okey-badge {
  background:linear-gradient(145deg,#fffbf3,#e8dfd0);
  border:2px solid #ffd700; color:#1a1208;
  box-shadow:0 0 0 1px rgba(255,215,0,.4), 0 2px 6px rgba(0,0,0,.3);
}
.indicator-box.gosterge-badge { border:2px solid #ffd700; }

/* İzleyici bandı */
#spectator-banner {
  display:none;
  flex-shrink:0; z-index:25;
  width:100%; padding:8px 14px;
  text-align:center;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:rgba(255,255,255,.88);
  background:linear-gradient(90deg,rgba(12,28,48,.98),rgba(18,42,62,.98),rgba(12,28,48,.98));
  border-bottom:1px solid rgba(255,215,0,.28);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  align-items:center; justify-content:center; gap:8px;
}
#spectator-banner:not([hidden]) { display:flex; }
#spectator-banner .spec-dot {
  width:8px; height:8px; border-radius:50%;
  background:#ffd700; box-shadow:0 0 8px rgba(255,215,0,.5);
  flex-shrink:0;
}
#spectator-banner strong { color:#ffd700; font-weight:800; }
#spectator-banner .spec-sep { color:rgba(255,255,255,.35); }
#game.is-spectating #actions,
#game.is-spectating .rack-arrange { opacity:.45; pointer-events:none; }

/* Sıra şeridi + atılan taş — yan yana; orta alan açılan perlere kalır */
#turn-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:4px 10px 2px;
  z-index:4;
  flex-shrink:0;
  min-width:0;
  max-width:100%;
}
#turn-row > #turn-banner {
  margin:0;
  align-self:center;
}
#turn-row > .discard-panel {
  flex:0 0 auto;
  width:auto;
  min-width:72px;
  max-width:110px;
  margin:0;
  padding:4px 8px 6px;
  align-items:center;
  justify-content:center;
  gap:2px;
  border-radius:14px;
  align-self:stretch;
}
#turn-row > .discard-panel .panel-caption {
  font-size:8px;
  letter-spacing:.05em;
  line-height:1;
}
#turn-row #discard-pile {
  min-height:0;
  gap:3px;
  flex:0 0 auto;
  width:auto;
}
#turn-row #discard-pile .mini-tile.discard-top {
  width:34px;
  height:44px;
  font-size:14px;
  border-radius:6px;
}
#turn-row #discard-pile .discard-trail .mini-tile {
  width:16px;
  height:20px;
  font-size:7px;
}
#turn-row #discard-pile .discard-meta {
  font-size:8px;
}
#turn-row #discard-pile .panel-empty-discard {
  min-height:36px;
  padding:4px 6px;
  gap:2px;
}
#turn-row #discard-pile .panel-empty-discard .pe-txt {
  font-size:9px;
}
#turn-row #discard-pile .discard-trail {
  max-width:96px;
}

/* Birleşik sıra / süre durumu — üst barın altında ince şerit */
#turn-banner {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:5px 14px; margin:4px 10px 2px;
  background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px; z-index:4; flex-shrink:0;
  align-self:center; max-width:min(380px, 92%);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
#turn-banner.mine {
  background:linear-gradient(90deg,rgba(255,215,0,.22),rgba(255,140,0,.1));
  border-color:rgba(255,215,0,.55);
  box-shadow:0 0 18px rgba(255,215,0,.18);
  animation:tbMinePulse 1.6s ease-in-out infinite;
}
@keyframes tbMinePulse {
  0%, 100% { box-shadow:0 0 12px rgba(255,215,0,.14); }
  50% { box-shadow:0 0 22px rgba(255,215,0,.28); }
}
#turn-banner .tb-dot {
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  background:#1a6b52; box-shadow:0 0 8px #1a6b52;
  animation:pulseDot 1.2s ease infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity:1; } 50% { opacity:.4; }
}
#turn-banner .tb-name {
  font-weight:800; font-size:13px; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:150px;
}
#turn-banner.mine .tb-name { color:#ffd700; }
#turn-banner .tb-tag {
  font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:999px; flex-shrink:0;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.1);
}
#turn-banner.mine .tb-tag {
  background:rgba(255,215,0,.2); color:#ffd700; border-color:rgba(255,215,0,.4);
}
#turn-banner .tb-timer {
  font-size:16px; font-weight:800; min-width:30px; text-align:center;
  color:#fff; font-variant-numeric:tabular-nums;
  padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}
#turn-banner .tb-timer.warning {
  color:#ff8a00;
  background:rgba(255,138,0,.14);
  border-color:rgba(255,138,0,.4);
}
#turn-banner .tb-timer.urgent {
  color:#ff6a00;
  background:rgba(255,106,0,.18);
  border-color:rgba(255,106,0,.5);
}
#turn-banner .tb-timer.normal { color:#fff; }
#turn-banner.mine .tb-timer.normal {
  color:#ffd700;
  background:rgba(255,215,0,.12);
  border-color:rgba(255,215,0,.35);
}
#turn-banner .tb-bar {
  width:88px; height:7px; background:rgba(255,255,255,.1);
  border-radius:999px; overflow:hidden; flex-shrink:0;
  border:1px solid rgba(255,255,255,.08);
}
#turn-banner .tb-bar > i {
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,#c9a227,#ffd700,#ffe082);
  transform-origin:left; transition:transform .3s linear, background .25s;
  border-radius:999px;
}
#turn-banner.mine .tb-bar > i {
  background:linear-gradient(90deg,#1a6b52,#8fd4b8,#ffd700);
}
#turn-banner.warn .tb-bar > i,
#turn-banner .tb-bar > i.is-warn {
  background:linear-gradient(90deg,#e65100,#ff8a00,#ffd54f);
}
#turn-banner.urgent {
  border-color:rgba(255,106,0,.65);
  background:linear-gradient(90deg,rgba(255,106,0,.22),rgba(0,0,0,.35));
  animation:tbUrgent 0.7s ease-in-out infinite;
}
@keyframes tbUrgent {
  0%, 100% { box-shadow:0 0 10px rgba(255,106,0,.25); }
  50% { box-shadow:0 0 20px rgba(255,106,0,.45); }
}
#turn-banner.urgent .tb-bar > i,
#turn-banner .tb-bar > i.is-urgent {
  background:linear-gradient(90deg,#bf360c,#ff6a00,#ffab40);
}
#turn-banner.urgent .tb-dot { background:#ff6a00; box-shadow:0 0 10px #ff6a00; }
#turn-banner.urgent .tb-name { color:#ffcc80; }
#turn-banner.urgent .tb-tag {
  background:rgba(255,106,0,.22); color:#ffcc80; border-color:rgba(255,106,0,.45);
}

/* ═══════════════════════════════════════════
   MIDDLE SECTION — grid: üst rakip / sol-merkez-sağ (üst üste binmez)
   ═══════════════════════════════════════════ */
#middle {
  flex:1;
  display:grid;
  grid-template-columns: minmax(72px, 96px) minmax(0, 1fr) minmax(72px, 96px);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "otop otop otop"
    "oleft center oright";
  gap: 6px 8px;
  position:relative;
  min-height:0;
  z-index:1;
  padding: 2px 6px 4px;
  align-items: stretch;
}

.opponent-area {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; min-width:0; z-index:2;
}
#opp-top, .opp-slot-top {
  grid-area: otop;
  position:relative; left:auto; top:auto; right:auto; transform:none;
  flex-direction:row; justify-content:center;
  min-height:0;
}
#opp-left, .opp-slot-left {
  grid-area: oleft;
  position:relative; left:auto; top:auto; transform:none;
  justify-content:center;
}
#opp-right, .opp-slot-right {
  grid-area: oright;
  position:relative; right:auto; top:auto; transform:none;
  justify-content:center;
}

.opp-card {
  background:rgba(0,0,0,.28); border-radius:12px; padding:8px 10px;
  text-align:center; min-width:84px; transition:box-shadow .3s, border-color .3s, background .3s;
  border:1px solid rgba(255,255,255,.08);
  position:relative;
}
.opp-card.active {
  background:rgba(255,215,0,.18); border:2px solid #ffd700;
  animation:oppTurnPulse 1.5s ease-in-out infinite;
}
@keyframes oppTurnPulse {
  0%, 100% { box-shadow:0 0 8px rgba(255,215,0,.22); }
  50% { box-shadow:0 0 20px rgba(255,215,0,.48); }
}

/* Üst rakip: yatay kompakt kart — merkeze binmez */
#opp-top .opp-card {
  display:flex; flex-direction:row; align-items:center; gap:10px;
  text-align:left; padding:6px 12px 6px 8px;
  min-width:0; max-width:min(320px, 70%);
}
#opp-top .opp-card .avatar {
  margin:0; flex-shrink:0; width:30px; height:30px; font-size:13px;
}
#opp-top .opp-card .opp-mid {
  display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;
}
#opp-top .opp-card .name { max-width:110px; margin:0; }
#opp-top .opp-card .tile-backs { margin-top:0; height:18px; justify-content:flex-start; }
#opp-top .opp-card .tile-meta { margin-top:0; }
#opp-top .opp-card .turn-chip { margin-top:0; margin-left:auto; flex-shrink:0; }

.opp-card .avatar {
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center;
  font-weight:bold; font-size:14px; margin:0 auto 4px;
}
.opp-card .name {
  font-size:11px; font-weight:700; color:rgba(255,255,255,.92);
  max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.opp-card .tile-backs {
  display:flex; justify-content:center; align-items:flex-end;
  height:22px; margin-top:6px; gap:0;
}
.opp-card .tile-back {
  width:12px; height:18px; margin-left:-5px;
  border-radius:2px;
  background:linear-gradient(145deg,#1b6b52,#0e3f32);
  border:1px solid rgba(201,162,39,.45);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.opp-card .tile-backs .tile-back:first-child { margin-left:0; }
.opp-card .tile-more {
  font-size:9px; font-weight:700; color:rgba(255,255,255,.55);
  margin-left:3px; align-self:center;
}
.opp-card .tile-empty { font-size:11px; color:rgba(255,255,255,.25); }
.opp-card .tile-meta {
  font-size:10px; color:rgba(255,255,255,.55); margin-top:4px;
}
.opp-card .turn-chip {
  display:inline-block; margin-top:5px;
  font-size:9px; font-weight:800; letter-spacing:.04em;
  color:#1a1408; background:#ffd700;
  padding:2px 8px; border-radius:999px;
}
.opp-card .status-lbl.off {
  font-size:9px; font-weight:700; color:#ef9a9a; margin-top:4px;
}
.opp-card .tile-count { font-size:10px; color:rgba(255,255,255,.5); }
.opp-card .points { font-size:10px; color:#ffd700; }

/* Center board — kendi hücresinde, kenar marjı yok (grid ayırır) */
#center-board {
  grid-area: center;
  flex:unset;
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  margin:0; gap:6px; min-width:0; min-height:0; z-index:1;
}

/* Hedef: panel başlığında küçük chip */
#goal-indicator {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; background:rgba(255,215,0,.12);
  border-radius:999px; border:1px solid rgba(255,215,0,.28);
  font-size:10px; font-weight:700; color:#ffd700; white-space:nowrap;
}
#goal-indicator .check { color:#1a6b52; display:none; font-size:10px; }
#goal-indicator .check.show { display:inline; }

.panel-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-shrink:0;
}
.panel-head .panel-caption { text-align:left; }

.center-stage {
  display:flex; gap:10px; width:100%; align-items:stretch; justify-content:center;
  min-height:0; flex:1;
}
.center-panel {
  background:rgba(0,0,0,.18); border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  padding:8px 10px; display:flex; flex-direction:column; gap:6px;
  min-height:0;
}
.panel-caption {
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.45); text-align:center;
}
.panel-empty {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  color:rgba(255,255,255,.5); font-size:12px; text-align:center;
  padding:8px 12px; border-radius:12px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,215,0,.2);
}
.panel-empty svg {
  width:14px; height:14px; fill:rgba(255,215,0,.65); flex-shrink:0;
}
.panel-empty.panel-empty-discard {
  flex-direction:column; gap:4px; min-height:48px;
}
.opened-panel { flex:1; min-width:0; width:100%; }
.discard-panel { flex:0 0 148px; align-items:center; }
.center-stage > .opened-panel { flex:1 1 auto; }

#opened-sets-area {
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-content:flex-start;
  min-height:48px; max-height:none; overflow-y:auto;
  width:100%; flex:1;
}
.set-group {
  display:flex; flex-direction:column; gap:3px; padding:4px 6px;
  background:rgba(0,0,0,.22); border-radius:8px;
  border-left:3px solid #ffd700;
}
.set-group .set-owner {
  font-size:9px; font-weight:700; color:rgba(255,215,0,.85);
  text-transform:uppercase; letter-spacing:.03em;
}
.set-group .set-tiles { display:flex; gap:2px; }
.set-group .mini-tile {
  width:24px; height:30px; border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:bold;
  background:linear-gradient(180deg,#fff,#eee); color:#212121;
}
.set-group .mini-tile.okey { border:1px solid #ffd700; }

#discard-pile {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; min-height:72px; width:100%; flex:1;
  border-radius:10px; transition:box-shadow .2s, background .2s;
}
#discard-pile.can-pick {
  background:rgba(26,107,82,.16);
  box-shadow:inset 0 0 0 2px rgba(143,212,184,.55), 0 0 16px rgba(26,107,82,.35);
  animation:discardPickPulse 1.35s ease-in-out infinite;
  cursor:pointer;
}
@keyframes discardPickPulse {
  0%, 100% { box-shadow:inset 0 0 0 2px rgba(143,212,184,.45), 0 0 10px rgba(26,107,82,.25); }
  50% { box-shadow:inset 0 0 0 2px rgba(143,212,184,.85), 0 0 22px rgba(26,107,82,.5); }
}
.discard-panel.can-pick {
  border-color:rgba(143,212,184,.45);
  background:rgba(13,61,46,.28);
}
.discard-panel.can-pick .panel-title::after {
  content:' · al';
  color:#8fd4b8;
  font-weight:800;
}
#discard-pile .discard-trail {
  display:flex; gap:3px; align-items:center; justify-content:center;
  flex-wrap:wrap;
}
#discard-pile .mini-tile {
  width:26px; height:34px; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:bold;
  background:linear-gradient(180deg,#fff,#eee); color:#212121;
  box-shadow:0 2px 4px rgba(0,0,0,.25);
}
#discard-pile .mini-tile.discard-top {
  width:44px; height:58px; font-size:18px; border-radius:7px;
  border:2px solid #C9A227;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  z-index:1;
}
#discard-pile.can-pick .mini-tile.discard-top {
  border-color:#8fd4b8;
  box-shadow:0 0 14px rgba(143,212,184,.55), 0 4px 12px rgba(0,0,0,.35);
}
#discard-pile .discard-meta {
  font-size:9px; color:rgba(255,255,255,.4); font-weight:600;
}
#discard-pile.can-pick .discard-meta {
  color:#80cbc4; font-weight:800;
}
.btn-elden:not([disabled]) {
  animation:eldenPulse 1.4s ease-in-out infinite;
  box-shadow:0 0 12px rgba(0,137,123,.4);
}
@keyframes eldenPulse {
  0%, 100% { box-shadow:0 0 8px rgba(0,137,123,.28); }
  50% { box-shadow:0 0 18px rgba(38,166,154,.55); }
}

#chip-display {
  display:flex; align-items:center; gap:4px;
  padding:4px 16px; background:rgba(255,215,0,.1);
  border-radius:16px; font-size:13px; font-weight:bold; color:#ffd700;
}

/* ═══════════════════════════════════════════
   PENDING SETS PREVIEW
   ═══════════════════════════════════════════ */
#pending-section {
  flex-shrink:0; margin:0 8px 4px; padding:8px 10px;
  border-radius:12px; z-index:1;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,215,0,.2);
  display:flex; flex-direction:column; gap:6px;
}
#pending-section[hidden] { display:none !important; }
#pending-section.building { border-color:rgba(255,255,255,.12); }
#pending-section.almost {
  border-color:rgba(255,183,77,.5);
  background:rgba(255,152,0,.12);
  box-shadow:0 0 14px rgba(255,152,0,.18);
}
#pending-section.ready {
  border-color:rgba(26,107,82,.55);
  background:rgba(20,92,69,.18);
  box-shadow:0 0 0 1px rgba(26,107,82,.2);
  animation:pendingReadyPulse 1.45s ease-in-out infinite;
}
@keyframes pendingReadyPulse {
  0%, 100% { box-shadow:0 0 10px rgba(26,107,82,.2); }
  50% { box-shadow:0 0 22px rgba(143,212,184,.45); }
}
.pending-head {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.pending-caption {
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
#pending-section.ready .pending-caption { color:#a8e0c8; }
#pending-section.almost .pending-caption { color:#ffcc80; }
#pending-sets {
  display:flex; gap:6px; align-items:center; flex-wrap:wrap; min-height:28px;
}
.pending-set {
  display:flex; gap:2px; padding:4px 6px;
  background:rgba(255,215,0,.1); border-radius:8px;
  border-left:3px solid #ffd700;
  animation:pendingSetIn .28s cubic-bezier(.22,.9,.28,1) both;
}
#pending-section.ready .pending-set { border-left-color:#8fd4b8; background:rgba(26,107,82,.14); }
#pending-section.almost .pending-set { border-left-color:#ffb74d; }
.pending-set span {
  width:20px; height:26px; border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:bold;
  background:linear-gradient(180deg,#fff,#eee); border:1px solid #ccc;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
@keyframes pendingSetIn {
  from { opacity:0; transform:translateY(4px) scale(.96); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
.pending-pts {
  color:#ffd700; font-size:11px; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.pending-pts.met { color:#8fd4b8; }
.pending-pts.almost { color:#ffb74d; }
.pending-progress {
  height:5px; border-radius:4px; overflow:hidden;
  background:rgba(255,255,255,.1);
}
.pending-progress > i {
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,#c9a227,#ffd700);
  transform-origin:left; transition:transform .25s ease;
}
.pending-progress > i.met {
  background:linear-gradient(90deg,#1a6b52,#8fd4b8);
}
.pending-progress > i.almost {
  background:linear-gradient(90deg,#ff9800,#ffb74d);
}
.pending-hint {
  font-size:11px; color:rgba(255,255,255,.45); font-weight:500;
}
#pending-section.ready .pending-hint { color:#c8e6c9; font-weight:700; }
#pending-section.almost .pending-hint { color:#ffe0b2; }

.btn-open.open-ready:not([disabled]) {
  animation:openReadyPulse 1.35s ease-in-out infinite;
  box-shadow:0 0 14px rgba(255,111,0,.45);
}
@keyframes openReadyPulse {
  0%, 100% { box-shadow:0 0 8px rgba(255,111,0,.28); transform:translateY(0); }
  50% { box-shadow:0 0 20px rgba(255,152,0,.55); transform:translateY(-1px); }
}

/* UX tip */
#ux-tip {
  display:none; position:absolute; bottom:108px; left:50%;
  transform:translateX(-50%); z-index:30;
  max-width:min(300px, 86%); cursor:pointer;
  background:linear-gradient(145deg, rgba(18,30,54,.96), rgba(8,18,37,.96));
  border:1px solid rgba(255,215,0,.4);
  border-radius:14px; padding:10px 12px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  align-items:flex-start; gap:10px;
}
#ux-tip.show { display:flex; animation:slideInUp .28s ease-out; }
#ux-tip .ux-tip-ico {
  flex-shrink:0; width:28px; height:28px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#ffd700; font-size:0;
  background:linear-gradient(145deg, rgba(255,215,0,.22), rgba(255,215,0,.06));
  border:1px solid rgba(255,215,0,.35);
}
#ux-tip .ux-tip-ico svg { width:14px; height:14px; fill:currentColor; }
#ux-tip .ux-tip-msg {
  flex:1; font-size:12px; color:rgba(255,255,255,.92); text-align:left; line-height:1.35;
}
#ux-tip .ux-tip-x {
  flex-shrink:0; width:18px; height:18px; color:rgba(255,255,255,.35);
  display:inline-flex; align-items:center; justify-content:center;
}
#ux-tip .ux-tip-x svg { width:14px; height:14px; fill:currentColor; display:block; }
#ux-tip.is-warn {
  border-color:rgba(255,152,0,.5);
  background:linear-gradient(145deg, rgba(48,28,10,.97), rgba(28,16,6,.97));
}
#ux-tip.is-warn .ux-tip-ico {
  color:#ff9800;
  background:linear-gradient(145deg, rgba(255,152,0,.22), rgba(255,152,0,.06));
  border-color:rgba(255,152,0,.4);
}
#ux-tip.is-ok {
  border-color:rgba(143,212,184,.45);
  background:linear-gradient(145deg, rgba(12,36,28,.97), rgba(8,24,16,.97));
}
#ux-tip.is-ok .ux-tip-ico {
  color:#8fd4b8;
  background:linear-gradient(145deg, rgba(143,212,184,.22), rgba(26,107,82,.1));
  border-color:rgba(143,212,184,.4);
}

/* ═══════════════════════════════════════════
   TILE RACK — referans: gerçekçi ahşap istaka + 13×2 oluk
   ═══════════════════════════════════════════ */
#rack-row {
  display:flex;
  align-items:stretch;
  gap:8px;
  flex-shrink:0;
  z-index:1;
  min-width:0;
  margin-top:auto;
  margin-bottom:0;
}
#rack-row > #rack-section {
  flex:1 1 auto;
  min-width:0;
}
#rack-row > #actions {
  flex:0 0 auto;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  margin:0;
  padding:6px 6px 8px;
  max-width:none;
}
#rack-row > #actions .actions-primary {
  flex-direction:column;
  margin:0;
  max-width:none;
  gap:6px;
  padding:0;
}
#rack-row > #actions .btn {
  min-width:72px;
  width:100%;
}
#topbar #rack-indicators,
#topbar .indicator {
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
  flex:0 0 auto;
  padding:0 6px;
}
#topbar #rack-indicators .ind-pair {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
#topbar #rack-indicators .indicator-box {
  width:26px;
  height:34px;
  font-size:11px;
  line-height:1;
}
#topbar #rack-indicators .ind-cap {
  font-size:8px;
  font-weight:700;
  letter-spacing:.02em;
  color:rgba(255,224,130,.85);
  text-transform:uppercase;
}
#rack-section {
  flex-shrink:0;
  padding:8px 10px 12px;
  z-index:1;
  border-radius:14px;
  border:2px solid #4a3018;
  background:
    repeating-linear-gradient(
      95deg,
      rgba(255,220,170,.05) 0 2px,
      transparent 2px 13px
    ),
    linear-gradient(180deg, #8d5e32 0%, #6e4524 45%, #543318 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,230,190,.4),
    inset 0 -8px 16px rgba(0,0,0,.25),
    0 10px 28px rgba(0,0,0,.5);
  transition: box-shadow .2s, border-color .2s;
}
#rack-section.my-turn {
  border-color:#c9a227;
  box-shadow:
    inset 0 1px 0 rgba(255,230,190,.45),
    0 0 18px rgba(255,215,0,.25),
    0 10px 28px rgba(0,0,0,.5);
}
#rack-section.throw-ready {
  border-color:#ff8a00;
  box-shadow:
    inset 0 1px 0 rgba(255,230,190,.4),
    0 0 20px rgba(255,140,0,.35),
    0 10px 28px rgba(0,0,0,.5);
}
#rack-section.throw-ready .rack-title::after {
  content:' · at';
  color:#ffb74d;
  font-weight:800;
}
#rack-header {
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; padding:0 2px 8px; flex-wrap:wrap;
}
#rack-header span { font-size:11px; color:rgba(255,236,210,.75); }
#rack-header .rack-title {
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:#ffe8c8;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
#rack-header .rack-title #hand-count { color:#ffe082; }
#rack-header .selected-info { color:#ffe082; font-size:11px; font-weight:600; }
.rack-arrange {
  display:flex; gap:6px; align-items:center; margin-left:auto;
}
.rack-arrange-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 9px; border-radius:999px; cursor:pointer;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  border:1px solid rgba(255,220,170,.3);
  background:rgba(0,0,0,.3); color:#ffe8c8;
  transition:background .12s, transform .12s;
}
.rack-arrange-btn:hover { background:rgba(0,0,0,.45); transform:translateY(-1px); }
.rack-arrange-btn.per {
  border-color:rgba(255,183,77,.55); color:#ffe0b2;
  background:rgba(255,152,0,.22);
}
.rack-arrange-btn.cift {
  border-color:rgba(255,138,101,.55); color:#ffccbc;
  background:rgba(216,67,21,.24);
}
.rack-arrange-btn .rack-arr-ico { font-size:13px; line-height:1; }
.rack-arrange-btn .rack-arr-lbl { white-space:nowrap; }

/* Derin oyuk — referans görsel */
#rack-container.istaka-well,
#rack-container {
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  padding:12px 10px 14px;
  border-radius:10px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,200,120,.04), transparent 55%),
    linear-gradient(180deg, #2a1810 0%, #1a0f0a 100%);
  box-shadow:
    inset 0 10px 22px rgba(0,0,0,.65),
    inset 0 -2px 6px rgba(255,200,140,.06),
    inset 0 0 0 1px rgba(0,0,0,.5);
  scrollbar-width:none;
}
#rack-container.rack-2row { width:100%; }

.rack-row {
  position:relative;
  display:grid;
  grid-template-columns:repeat(13, minmax(0, 1fr));
  gap:3px;
  width:100%;
  align-items:end;
  min-height:calc(var(--tile-h, 62px) + 12px);
  padding:0 2px 11px;
  z-index:0;
}
/* Raf dudağı — taşların oturduğu ince ahşap çubuk */
.rack-row::after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:9px;
  z-index:0;
  border-radius:2px;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      #e0c08a 0%,
      #c49a62 18%,
      #9a6b3c 55%,
      #6e4524 100%);
  box-shadow:
    0 3px 8px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,240,210,.55),
    inset 0 -1px 0 rgba(0,0,0,.25);
}

.rack-slot {
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-height:var(--tile-h, 62px);
  min-width:0;
}
.rack-slot.empty {
  /* oyuk izi — boş oluk okunaklı */
  border-radius:7px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.08) 70%, transparent);
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,220,170,.06);
  min-height:calc(var(--tile-h, 62px) - 4px);
  margin-bottom:2px;
}
.rack-slot.empty::after {
  content:'';
  position:absolute;
  left:18%; right:18%; bottom:6px;
  height:3px;
  border-radius:2px;
  background:rgba(255,220,170,.08);
  pointer-events:none;
}
.rack-slot.drop-target {
  background:rgba(255,215,0,.22) !important;
  box-shadow:inset 0 0 0 1.5px rgba(255,215,0,.55), inset 0 3px 6px rgba(0,0,0,.3) !important;
  border-radius:7px;
}
.rack-slot .tile {
  width:100%;
  max-width:var(--tile-w, 48px);
  height:var(--tile-h, 66px);
  margin:0 auto 1px;
  flex-shrink:1;
}
.rack-slot .tile.dragging {
  opacity:.92;
  pointer-events:none;
  box-shadow:0 12px 24px rgba(0,0,0,.5) !important;
}
.rack-slot .tile.drag-source {
  opacity:0.22 !important;
  filter:grayscale(.15);
}
.tile.drag-ghost {
  border-radius:10px !important;
  cursor:grabbing !important;
  filter:brightness(1.05);
}

#topbar .tb-chip.tb-rem {
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
#topbar .tb-chip.tb-rem:hover {
  border-color:rgba(143,212,184,.55);
  background:rgba(26,107,82,.18);
}
.tile {
  flex-shrink:0; width:46px; height:62px;
  border-radius:7px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:800; font-size:18px;
  font-family:'Cinzel', 'Segoe UI', serif;
  color:#212121;
  background: linear-gradient(145deg,#fffbf3,#f5f0e6,#e8dfd0);
  border:1.5px solid #bcaaa4;
  box-shadow: 0 3px 0 rgba(0,0,0,.2), 0 6px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.7);
  transition:all .12s; position:relative;
}
.tile .tile-label {
  font-size:7px; opacity:.55; line-height:1; font-family:'Outfit',sans-serif; font-weight:600;
  letter-spacing:.3px; margin-top:1px;
}
.tile .tile-pip {
  position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%;
}

/* ═══════════════════════════════════════════
   ACTION BAR — birincil (çek/al/at) + ikincil (diz/çift/bitir)
   ═══════════════════════════════════════════ */
#actions {
  display:flex; flex-direction:column; gap:4px; padding:4px 10px 4px;
  background:rgba(0,0,0,.22); border-radius:12px;
  flex-shrink:0; z-index:1;
}
.actions-primary,
.actions-secondary {
  display:flex; gap:8px; justify-content:center; align-items:center;
}
.actions-secondary[hidden] { display:none !important; }
.btn {
  padding:8px 12px; border:none; border-radius:10px;
  font-size:11px; font-weight:bold; color:#fff;
  cursor:pointer; transition:all .2s;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:64px;
}
.btn-primary { min-width:78px; padding:10px 14px; font-size:12px; }
.btn-primary .icon { font-size:20px; }
.btn-secondary { min-width:56px; padding:6px 10px; opacity:.95; }
.btn-icon {
  min-width:44px; width:44px; height:44px; padding:0;
  border-radius:50%; justify-content:center;
}
.btn-icon .icon { font-size:18px; margin:0; }
.btn:disabled { opacity:.3; cursor:not-allowed; transform:none !important; }
.btn:not(:disabled):hover { transform:translateY(-2px); filter:brightness(1.15); }
.btn .icon { font-size:16px; }
.btn-draw   { background:linear-gradient(160deg,#1a6b52,#0d3b2e); }
.btn-draw:not([disabled]) {
  animation:drawBtnPulse 1.4s ease-in-out infinite;
  box-shadow:0 0 12px rgba(26,107,82,.4);
}
@keyframes drawBtnPulse {
  0%, 100% { box-shadow:0 0 8px rgba(26,107,82,.28); }
  50% { box-shadow:0 0 18px rgba(143,212,184,.55); }
}
.btn-elden  { background:linear-gradient(160deg,#ffc107,#ff8f00); color:#1a1208; }
.btn-open   { background:#ff6f00; }
.btn-open.diz  { background:#e65100; }
.btn-open.cift { background:#bf360c; }
.btn-throw  { background:#e53935; }
.btn-finish { background:linear-gradient(160deg,#2a7a5c,#0d3b2e); }

.btn-throw:not([disabled]) {
  animation: atBtnPulse 1.25s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(229, 57, 53, .45);
}
@keyframes atBtnPulse {
  0%, 100% { box-shadow:0 0 10px rgba(229,57,53,.28); transform:translateY(0); }
  50% { box-shadow:0 0 22px rgba(229,57,53,.55); transform:translateY(-1px); }
}

.btn-finish:not([disabled]) {
  animation: finishBtnPulse 1.45s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(30, 136, 229, .35);
}
@keyframes finishBtnPulse {
  0%, 100% { box-shadow:0 0 10px rgba(30,136,229,.22); transform:translateY(0); }
  50% { box-shadow:0 0 22px rgba(30,136,229,.48); transform:translateY(-1px); }
}

/* Köşe dock — sohbet + hediye (üst bara taşındı) */
#table-dock {
  display:none !important;
}
.dock-btn {
  position:relative; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(255,215,0,.4);
  background:linear-gradient(145deg,rgba(18,32,58,.95),rgba(8,18,37,.95));
  color:#fff; font-size:20px; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  transition:transform .15s, filter .15s, box-shadow .15s;
}
.dock-btn:hover { transform:translateY(-2px); filter:brightness(1.12); box-shadow:0 8px 22px rgba(255,215,0,.15); }
.dock-btn:active { transform:scale(.94); }
.dock-btn#btn-gift {
  background:linear-gradient(145deg,#132b5c,#071228);
  border-color:rgba(255,106,0,.5);
  color:#ff6a00;
}
.dock-btn#btn-chat {
  background:linear-gradient(145deg,#243356,#0b1a3d);
  border-color:rgba(255,215,0,.45);
  color:#ffd700;
}
.dock-badge {
  position:absolute; top:-3px; right:-3px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px;
  background:linear-gradient(145deg,#ffd700,#e6a800);
  color:#1a1408;
  font-size:10px; font-weight:800; line-height:18px;
  box-shadow:0 2px 8px rgba(255,215,0,.4);
  border:1.5px solid rgba(8,18,37,.85);
  animation: dockBadgePop .35s ease-out;
}
.dock-badge.is-hot {
  background:linear-gradient(145deg,#ff8a00,#ff6a00);
  color:#fff;
  box-shadow:0 2px 10px rgba(255,106,0,.45);
  animation: dockBadgePulse 1.6s ease-in-out infinite;
}
@keyframes dockBadgePop {
  from { transform: scale(.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes dockBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .dock-badge, .dock-badge.is-hot { animation: none !important; }
}

#gift-panel, #chat-panel {
  display:none; position:absolute; right:14px; bottom:150px;
  background:linear-gradient(160deg,rgba(18,32,58,.98),rgba(8,18,37,.97));
  border:1px solid rgba(255,215,0,.4);
  border-radius:18px; z-index:20; flex-direction:column; overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.55);
}
#gift-panel { width:280px; }
#chat-panel { width:300px; max-height:340px; }
#gift-panel.show, #chat-panel.show { display:flex; animation:slideInUp .2s ease-out; }

.chat-head {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:12px 14px;
  background:linear-gradient(90deg,rgba(255,215,0,.12),transparent);
  color:#ffd700; font-weight:800; font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chat-head-sub {
  display:block; font-size:10px; font-weight:600; color:rgba(255,255,255,.4);
  margin-top:2px; letter-spacing:0;
}
.chat-head button {
  width:32px; height:32px; border-radius:10px; cursor:pointer; font-size:14px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:0;
}
.chat-head button:hover { background:rgba(255,255,255,.14); }
.chat-head button svg,
.an-menu-btn svg,
.tr-close svg,
.meta-close-x svg,
.hist-btn-x svg,
.panel-ico-btn svg {
  width:16px; height:16px; fill:currentColor; display:block;
}
.an-menu-btn,
.tr-close,
.meta-close-x,
.hist-btn-x,
.panel-ico-btn {
  display:inline-flex; align-items:center; justify-content:center; line-height:0;
}

.gift-targets {
  display:flex; gap:6px; flex-wrap:wrap; padding:10px 12px 0;
}
.gift-targets button {
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
  color:#fff; border-radius:999px; padding:5px 11px 5px 6px; font-size:11px; cursor:pointer;
  font-weight:600; transition:all .15s;
  display:inline-flex; align-items:center; gap:6px;
}
.gift-targets button .gift-av {
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  font-size:10px; font-weight:800;
  background:rgba(255,215,0,.18); color:#ffd700;
  border:1px solid rgba(255,215,0,.35);
}
.gift-targets button.active {
  border-color:#ffd700; background:rgba(255,215,0,.2); color:#ffd700; font-weight:800;
}
.gift-targets button.active .gift-av {
  background:rgba(26,107,82,.35); color:#8fd4b8; border-color:rgba(143,212,184,.55);
}
.gift-hint {
  padding:6px 12px 0; font-size:11px; color:rgba(255,255,255,.4);
}
.gift-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:10px 12px 14px;
}
.gift-grid button {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 4px; border-radius:12px; cursor:pointer;
  background:linear-gradient(160deg,rgba(255,215,0,.12),rgba(255,255,255,.03));
  border:1px solid rgba(255,215,0,.28);
  font-size:22px; color:#fff; transition:transform .12s, background .15s;
}
.gift-grid button small { font-size:9px; color:#ffd700; font-weight:800; }
.gift-grid button:hover {
  background:rgba(255,215,0,.2); border-color:rgba(255,215,0,.5);
  transform:translateY(-1px);
}

#chat-messages {
  flex:1; overflow-y:auto; padding:10px 12px; min-height:120px; max-height:160px;
}
.chat-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:20px 8px; gap:4px;
  color:rgba(255,255,255,.35); font-size:12px;
}
.chat-empty-ico {
  width:40px; height:40px; border-radius:12px; margin-bottom:4px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,rgba(255,215,0,.2),rgba(255,215,0,.06));
  border:1px solid rgba(255,215,0,.3); color:#ffd700;
}
.chat-empty-ico svg { width:18px; height:18px; fill:currentColor; display:block; }
.chat-empty-title { font-weight:800; color:rgba(255,255,255,.7); font-size:13px; }
.chat-empty-sub { font-size:11px; color:rgba(255,255,255,.4); }
.chat-line {
  margin-bottom:8px; font-size:13px; color:#1a1408;
  padding:8px 10px; border-radius:12px;
  background:#f5f0e6; border:1px solid rgba(201,162,39,.22);
  line-height:1.35;
}
.chat-line b { color:#8a6d00; margin-right:6px; font-weight:800; }
.chat-line .chat-react {
  display:inline-flex; vertical-align:-3px; margin-left:2px;
  width:16px; height:16px; color:#8a6d00;
}
.chat-line .chat-react svg { width:16px; height:16px; fill:currentColor; display:block; }
.chat-line.me .chat-react { color:#0d3b2e; }
.chat-line.me {
  background:#e8f0e9; border-color:rgba(26,107,82,.4);
  color:#1a1408;
}
.chat-line.me b { color:#0d3b2e; }
.chat-line.system {
  background:#eeeeee; border-style:dashed; color:#333;
}
.chat-line.system b { color:#555; }
.chat-line.gift {
  background:#fff3e0; border-color:rgba(255,140,0,.35);
  color:#1a1408;
}
.chat-line.gift b { color:#e65100; }
.chat-quick {
  display:flex; gap:5px; padding:0 12px 8px; flex-wrap:wrap;
}
.chat-quick button {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  border-radius:10px; width:34px; height:34px;
  cursor:pointer; color:#ffd700;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s, transform .12s;
}
.chat-quick button svg { width:18px; height:18px; fill:currentColor; display:block; }
.chat-quick button:hover { background:rgba(255,215,0,.15); transform:scale(1.06); }
.chat-input-row { display:flex; gap:6px; padding:8px 12px 12px; border-top:1px solid rgba(255,255,255,.06); }
.chat-input-row input {
  flex:1; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:9px 12px;
  background:rgba(255,255,255,.07); color:#fff; font-size:13px;
}
.chat-input-row input:focus { outline:none; border-color:rgba(255,215,0,.45); }
.chat-input-row button {
  border:none; border-radius:12px; padding:0 14px;
  background:linear-gradient(135deg,#ff8c00,#e65100); color:#fff;
  font-weight:800; cursor:pointer; font-size:12px;
}
.chat-input-row button:hover { filter:brightness(1.08); }

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */
@keyframes drawTile {
  0%   { transform:translateY(-100px) scale(0.5); opacity:0; }
  60%  { transform:translateY(8px) scale(1.05); opacity:1; }
  100% { transform:translateY(0) scale(1); opacity:1; }
}
@keyframes throwTile {
  0%   { transform:translateY(0) scale(1); opacity:1; }
  40%  { transform:translateY(-20px) scale(1.1); opacity:1; }
  100% { transform:translateY(60px) scale(0.6); opacity:0; }
}
@keyframes dealTile {
  0%   { transform:scale(0) rotate(180deg); opacity:0; }
  70%  { transform:scale(1.1) rotate(-5deg); opacity:1; }
  100% { transform:scale(1) rotate(0); opacity:1; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow:0 0 5px rgba(255,215,0,.3); }
  50%      { box-shadow:0 0 20px rgba(255,215,0,.7); }
}
@keyframes confettiFall {
  0%   { transform:translateY(-10vh) rotate(0deg); opacity:1; }
  100% { transform:translateY(110vh) rotate(720deg); opacity:0; }
}
@keyframes oppDrawFlash {
  0%   { box-shadow:0 0 0 rgba(255,255,255,0); }
  50%  { box-shadow:0 0 20px rgba(255,255,255,.3); }
  100% { box-shadow:0 0 0 rgba(255,255,255,0); }
}
@keyframes slideInUp {
  0%   { transform:translateY(30px); opacity:0; }
  100% { transform:translateY(0); opacity:1; }
}
@keyframes openTileFly {
  0%   { transform:scale(1) translateY(0); opacity:1; }
  100% { transform:scale(0.85) translateY(-40px); opacity:1; }
}
.tile.anim-draw {
  animation:drawTile .35s ease-out forwards;
}
.tile.anim-throw {
  animation:throwTile .4s ease-in forwards;
}
.tile.anim-deal {
  animation:dealTile .3s ease-out forwards;
}
.tile.anim-open-fly {
  animation:openTileFly .3s ease-out forwards;
}
.opp-card.draw-flash {
  animation:oppDrawFlash .4s ease-out;
}
#discard-pile .mini-tile.anim-land {
  animation:drawTile .25s ease-out;
}

/* ═══════════════════════════════════════════
   OVERLAYS
   ═══════════════════════════════════════════ */
#gift-overlay {
  position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  grid-column: 1 / -1; grid-row: 1 / -1;
  z-index: 5;
}
.gift-anim {
  font-size:0; width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  color:#ffd700; animation:giftFloat 2s ease-out forwards;
  position:absolute; left:0; top:0;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
.gift-anim svg { width:44px; height:44px; fill:currentColor; display:block; }
@keyframes giftFloat {
  0% { opacity:1; transform:translate(var(--gx0,50%), var(--gy0,70%)) scale(.5); }
  50% { opacity:1; transform:translate(var(--gx1,50%), calc(var(--gy1,25%) - 40px)) scale(1.15); }
  100% { opacity:0; transform:translate(var(--gx1,50%), var(--gy1,25%)) scale(.75); }
}
.chat-bubble {
  position:absolute; background:rgba(0,0,0,.7);
  border-radius:14px; padding:5px 12px; font-size:24px;
  animation:chatFade 2.5s ease-out forwards;
}
@keyframes chatFade {
  0% { opacity:1; transform:translateY(0); }
  80% { opacity:1; transform:translateY(-8px); }
  100% { opacity:0; transform:translateY(-16px); }
}

#mm-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,.82); border-radius:24px;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  z-index:10; gap:16px; padding:20px;
}
#mm-overlay.show { display:flex; }
.mm-card {
  width:min(340px, 94%);
  background:linear-gradient(160deg,rgba(18,32,58,.96),rgba(8,18,37,.96));
  border:1px solid rgba(255,215,0,.35);
  border-radius:20px; padding:28px 22px 22px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
#mm-overlay .spinner,
.lw-spinner {
  width:48px; height:48px; border:3px solid rgba(255,255,255,.12);
  border-top-color:#ffd700; border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }
.lw-pulse {
  width:88px; height:88px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle,rgba(255,215,0,.18),transparent 70%);
  box-shadow:0 0 0 0 rgba(255,215,0,.25);
  animation:lwPulse 1.8s ease-in-out infinite;
}
@keyframes lwPulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(255,215,0,.2); }
  50% { box-shadow:0 0 0 12px rgba(255,215,0,0); }
}
#mm-overlay h2 { font-size:18px; color:#ffd700; margin:0; font-weight:800; }
#mm-overlay .mm-sub { color:rgba(255,255,255,.5); font-size:13px; margin:0; text-align:center; }
.mm-tip, .lw-tip {
  width:100%; margin:0; padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  font-size:12px; color:rgba(255,255,255,.55); text-align:left; line-height:1.4;
}
.mm-seats {
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:4px;
}
.mm-seat {
  width:58px; min-height:56px; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.2);
  color:rgba(255,255,255,.35); font-size:11px; font-weight:700;
  transition:all .25s ease;
}
.mm-seat-empty {
  width:22px; height:22px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(255,215,0,.08); border:1px solid rgba(255,215,0,.2);
  color:rgba(255,215,0,.55);
}
.mm-seat-empty svg { width:12px; height:12px; fill:currentColor; display:block; }
.mm-seat.almost .mm-seat-empty {
  color:#ffb74d; border-color:rgba(255,183,77,.45); background:rgba(255,152,0,.12);
}
.mm-seat.filled {
  background:rgba(255,215,0,.16); border:1px solid rgba(255,215,0,.55);
  color:#ffd700; box-shadow:0 0 12px rgba(255,215,0,.2);
}
.mm-seat.filled .mm-seat-empty { display:none; }
.mm-seat-av {
  width:22px; height:22px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(11,26,61,.55); border:1px solid rgba(255,215,0,.35);
  color:#ffd700; font-size:10px; font-weight:800; line-height:1;
}
.mm-seat.filled.me .mm-seat-av {
  background:rgba(26,20,8,.2); border-color:rgba(26,20,8,.35); color:#1a1208;
}
.mm-seat-av.ghost {
  background:rgba(255,215,0,.1); color:rgba(255,215,0,.7);
}
.mm-seat-lab { font-size:10px; font-weight:800; max-width:54px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-seat.filled.me {
  background:linear-gradient(145deg,#ffd700,#f0b400);
  border-color:transparent; color:#1a1208;
  box-shadow:0 4px 14px rgba(255,215,0,.3);
}
.mm-seat.almost { border-color:rgba(255,183,77,.55); }
.mm-fill { font-size:14px; font-weight:700; color:#ffd700; font-variant-numeric:tabular-nums; }
.mm-progress {
  width:100%; height:6px; border-radius:4px; overflow:hidden;
  background:rgba(255,255,255,.1);
}
.mm-progress > i {
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,#c9a227,#ffd700);
  transform-origin:left; transition:transform .3s ease;
}
#mm-overlay .btn-cancel {
  padding:12px 28px; border:1px solid rgba(255,152,0,.4); border-radius:12px;
  background:rgba(255,106,0,.12); color:#ffcc80; font-size:13px; font-weight:700;
  cursor:pointer; margin-top:4px; width:100%;
}
#mm-overlay .btn-cancel:hover { background:rgba(255,106,0,.22); color:#ffe0b2; }

#go-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,.88); border-radius:24px;
  display:none; align-items:center; justify-content:center;
  z-index:20; padding:16px;
}
#go-overlay.show { display:flex; }
#go-overlay.i-won {
  background:radial-gradient(ellipse at 50% 20%, rgba(255,215,0,.2), transparent 55%), rgba(0,0,0,.88);
}
#go-overlay.i-lost {
  background:radial-gradient(ellipse at 50% 20%, rgba(13,40,72,.35), transparent 50%), rgba(0,0,0,.88);
}
.go-card {
  width:min(360px, 94%);
  background:linear-gradient(160deg,rgba(18,32,58,.98),rgba(8,18,37,.96));
  border:1px solid rgba(255,215,0,.35);
  border-radius:20px; padding:22px 18px 16px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:slideInUp .35s ease-out;
}
#go-overlay.i-won .go-card {
  border-color:rgba(255,215,0,.55);
  box-shadow:0 0 28px rgba(255,215,0,.15), 0 24px 60px rgba(0,0,0,.55);
}
#go-overlay.i-lost .go-card { border-color:rgba(120,160,220,.35); }
.go-trophy {
  width:52px; height:52px; margin:0 auto 8px; border-radius:16px;
  display:grid; place-items:center;
  color:#ffd700;
  background:rgba(255,215,0,.12); border:1px solid rgba(255,215,0,.35);
  box-shadow:0 8px 20px rgba(255,215,0,.12);
}
.go-trophy svg { width:26px; height:26px; fill:currentColor; display:block; }
#go-overlay.i-lost .go-trophy {
  color:rgba(180,200,230,.85);
  background:rgba(120,160,220,.12); border-color:rgba(120,160,220,.3);
  box-shadow:none;
}
.go-eyebrow {
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
#go-overlay.i-won .go-eyebrow { color:#ffd700; }
#go-overlay .winner-name {
  font-size:22px; font-weight:800; color:#ffd700; text-align:center;
}
#go-overlay .winner-points {
  color:rgba(255,255,255,.6); font-size:13px; font-weight:600; margin-bottom:4px;
}
.go-stats {
  display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:4px 0 6px;
}
.go-pill {
  padding:4px 11px; border-radius:12px; font-weight:800; font-size:12px;
  border:1px solid transparent;
}
.go-pill.up { background:rgba(26,107,82,.22); color:#8fd4b8; border-color:rgba(143,212,184,.35); }
.go-pill.down { background:rgba(191,106,74,.2); color:#ffccbc; border-color:rgba(191,106,74,.4); }
.go-pill.xp { background:rgba(255,215,0,.12); color:#ffe082; border-color:rgba(255,215,0,.35); }
#go-overlay .score-breakdown {
  width:100%; margin:6px 0 4px; font-size:12px;
}
.go-deck-note {
  text-align:center; margin-bottom:8px; color:#ff8a65;
  font-weight:700; font-size:12px;
}
.go-score-list { display:flex; flex-direction:column; gap:6px; }
.go-score-row {
  display:grid; grid-template-columns:22px 1fr auto auto; gap:8px; align-items:center;
  padding:9px 11px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06);
}
.go-score-row.winner {
  background:linear-gradient(90deg,rgba(255,215,0,.16),rgba(255,255,255,.03));
  border-color:rgba(255,215,0,.4);
}
.go-score-row.me {
  border-color:rgba(143,212,184,.4);
  background:linear-gradient(90deg,rgba(26,107,82,.14),rgba(255,255,255,.03));
}
.go-score-row.me.winner { border-color:rgba(255,215,0,.5); }
.go-score-row .gs-rank { font-size:14px; text-align:center; }
.go-score-row .gs-name { font-weight:700; color:#fff; font-size:13px; overflow:hidden; text-overflow:ellipsis; }
.go-score-row .gs-meta { font-size:11px; color:rgba(255,255,255,.4); text-align:right; }
.go-score-row .gs-delta { font-weight:800; font-size:13px; font-variant-numeric:tabular-nums; }
.go-score-row .gs-delta.penalty { color:#ffab91; }
.go-score-row .gs-delta.reward { color:#8fd4b8; }
.go-actions {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:100%; margin-top:8px;
}
#go-overlay .btn-again {
  padding:11px 16px; border:none; border-radius:12px;
  color:#fff; font-size:13px; font-weight:800; cursor:pointer;
  flex:1 1 120px; min-width:110px;
}
#go-overlay .btn-again.primary {
  background:linear-gradient(135deg,#ff8c00,#e65100); flex:1 1 100%;
}
#go-overlay .btn-again.ghost {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
}
#go-overlay .btn-again.danger {
  background:rgba(255,106,0,.14); border:1px solid rgba(255,152,0,.4); color:#ffcc80;
}
#go-overlay .btn-again:hover { filter:brightness(1.08); }

/* Round end (multi-round) */
#round-end-overlay {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.82);
}
.re-card {
  width:min(380px, 94%);
  background:linear-gradient(160deg,rgba(18,32,58,.98),rgba(8,18,37,.96));
  border:1px solid rgba(255,215,0,.4);
  border-radius:20px; padding:24px 20px 18px;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:slideInUp .3s ease-out;
}
.re-flag {
  width:48px; height:48px; margin:0 auto 8px; border-radius:14px;
  display:grid; place-items:center;
  color:#ffd700;
  background:rgba(255,215,0,.12); border:1px solid rgba(255,215,0,.35);
}
.re-flag svg { width:24px; height:24px; fill:currentColor; display:block; }
.re-eyebrow {
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-bottom:6px;
}
.re-title { font-size:20px; font-weight:800; color:#ffd700; margin:0 0 10px; }
.re-dots {
  display:flex; justify-content:center; align-items:center; gap:6px;
  margin:0 0 12px;
}
.re-dot {
  width:8px; height:8px; border-radius:4px;
  background:rgba(255,255,255,.22);
  transition:width .2s, background .2s;
}
.re-dot.done { background:#ffd700; }
.re-dot.active { width:18px; background:#ffd700; }
.re-winner { font-size:15px; color:rgba(255,255,255,.85); margin:0 0 10px; }
.re-winner b { color:#ffd700; }
.re-reason {
  display:inline-block;
  margin:0 0 12px;
  padding:6px 12px;
  border-radius:12px;
  font-size:12px; font-weight:700;
  color:#ffb74d;
  background:rgba(255,143,0,.18);
  border:1px solid rgba(255,143,0,.4);
}
.re-list { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; text-align:left; }
.re-empty {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 12px; border-radius:12px;
  color:rgba(255,255,255,.55); font-size:12px;
  background:rgba(0,0,0,.22); border:1px dashed rgba(255,215,0,.22);
}
.re-empty svg { width:16px; height:16px; fill:rgba(255,215,0,.65); }
.re-empty.is-loading svg { animation: metaEmptyPulse 1.2s ease-in-out infinite; }
.re-row {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:9px 12px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06);
}
.re-row.winner { border-color:rgba(255,215,0,.4); background:rgba(255,215,0,.12); }
.re-row.me {
  border-color:rgba(143,212,184,.4);
  background:linear-gradient(90deg,rgba(26,107,82,.14),rgba(255,255,255,.03));
}
.re-row.me.winner { border-color:rgba(255,215,0,.5); }
.re-row .re-name { font-weight:700; color:#fff; font-size:13px; }
.re-row .re-pts { font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; }
.re-row .re-pts.up { color:#8fd4b8; }
.re-row .re-pts.down { color:#ffab91; }
.re-next-label {
  font-size:13px; color:rgba(255,255,255,.55); margin:0 0 12px;
}
.re-ring-wrap {
  position:relative;
  width:56px; height:56px;
  margin:0 auto;
  display:grid; place-items:center;
}
.re-ring { transform:rotate(-90deg); }
.re-ring-bg {
  fill:none; stroke:rgba(255,255,255,.12); stroke-width:3;
}
.re-ring-fg {
  fill:none; stroke:#ffd700; stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:138.2;
  stroke-dashoffset:0;
  transition:stroke-dashoffset 0.9s linear;
}
.re-ring-num {
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:16px; font-weight:800; color:#ffd700;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.re-countdown {
  font-size:13px; color:rgba(255,255,255,.5); margin:0;
}
.re-countdown strong { color:#ffd700; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .re-card { animation:none !important; }
  .re-ring-fg { transition:none !important; }
  .confetti-piece { display:none !important; }
}

/* legacy table (online payloads) */
#go-overlay .score-table { width:100%; border-collapse:collapse; }
#go-overlay .score-table th {
  color:rgba(255,255,255,.35); padding:3px 5px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left; font-weight:normal; font-size:9px;
}
#go-overlay .score-table td {
  padding:3px 5px; border-bottom:1px solid rgba(255,255,255,.05);
  color:rgba(255,255,255,.65); font-size:10px;
}
#go-overlay .score-table td:last-child { text-align:right; font-weight:bold; }
#go-overlay .score-table .winner-row td { color:#ffd700; font-weight:bold; }
#go-overlay .score-table .penalty { color:#ffab91; }
#go-overlay .score-table .reward { color:#1a6b52; }
#go-overlay .score-table .mult { color:rgba(255,255,255,.35); font-size:9px; }

#confirm-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,.88); border-radius:24px;
  display:none; align-items:center; justify-content:center;
  z-index:30; padding:20px;
}
#confirm-overlay.show { display:flex; }
.confirm-card {
  width:min(360px, 94%);
  display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:22px 18px 16px;
  background:linear-gradient(160deg,rgba(18,32,58,.98),rgba(8,18,37,.96));
  border:1px solid rgba(255,215,0,.35);
  border-radius:20px;
  box-shadow:0 24px 56px rgba(0,0,0,.55);
  text-align:center;
  animation:slideInUp .28s ease-out;
}
.confirm-ico {
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-size:22px; font-weight:800; line-height:1;
  color:#1a1208;
  background:linear-gradient(145deg,#ffd700,#f0b400);
  box-shadow:0 6px 16px rgba(255,215,0,.28);
  margin-bottom:2px;
}
.confirm-ico svg {
  width:22px; height:22px; fill:currentColor; display:block;
}
.confirm-card.tone-danger .confirm-ico {
  color:#fff;
  background:linear-gradient(145deg,#ff9800,#e65100);
  box-shadow:0 6px 16px rgba(230,81,0,.35);
}
.confirm-card.tone-safe .confirm-ico {
  color:#fff;
  background:linear-gradient(145deg,#8fd4b8,#145c45);
  box-shadow:0 6px 16px rgba(20,92,69,.3);
}
#confirm-overlay h2 {
  font-size:20px; font-weight:800; color:#ffd700; margin:0;
  line-height:1.2;
}
#confirm-overlay .confirm-sub {
  font-size:13px; color:rgba(255,255,255,.55); text-align:center;
  line-height:1.45; max-width:92%;
}
#confirm-overlay .confirm-penalty {
  font-size:20px; color:#ffab91; font-weight:800; margin:4px 0 0;
  font-variant-numeric:tabular-nums;
}
#confirm-overlay .confirm-coins {
  font-size:12px; color:rgba(255,215,0,.85);
  padding:6px 12px; border-radius:999px;
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.25);
}
#confirm-overlay .confirm-coins strong { color:#ffd700; }
#confirm-overlay .confirm-rules {
  width:100%; max-width:320px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px 14px;
  font-size:11px; color:rgba(255,255,255,.65); line-height:1.55; margin:4px 0;
  text-align:left;
}
#confirm-overlay .confirm-rules .cr-head {
  font-size:11px; font-weight:800; letter-spacing:.04em;
  color:#ffd700; margin:0 0 8px; text-transform:uppercase;
}
#confirm-overlay .confirm-rules .cr-list {
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:5px;
}
#confirm-overlay .confirm-rules .cr-list li {
  list-style:none; padding-left:12px; position:relative;
}
#confirm-overlay .confirm-rules .cr-list li::before {
  content:''; position:absolute; left:0; top:.55em;
  width:5px; height:5px; border-radius:50%; background:#ffd700;
}
#confirm-overlay .confirm-rules .cr-list b { color:#fff; font-weight:700; }
#confirm-overlay .confirm-btns {
  display:flex; gap:8px; margin-top:8px; width:100%;
}
#confirm-overlay .confirm-btns button {
  flex:1; padding:11px 14px; border:none; border-radius:12px;
  font-size:13px; font-weight:800; cursor:pointer; transition:all .2s;
}
#confirm-overlay .confirm-btns button:hover { transform:translateY(-1px); filter:brightness(1.1); }
#confirm-overlay .btn-leave {
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  box-shadow:0 6px 16px rgba(230,81,0,.28);
}
#confirm-overlay .btn-play {
  background:linear-gradient(135deg,#8fd4b8,#145c45); color:#fff;
  box-shadow:0 6px 16px rgba(20,92,69,.28);
}
#confirm-overlay .btn-cancel-confirm {
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.12);
}

#toolbar {
  position:absolute; top:10px; right:10px; z-index:5; display:flex; gap:4px;
}
#toolbar button {
  background:rgba(0,0,0,.25); border:none; border-radius:6px;
  color:#fff; padding:5px 8px; cursor:pointer; font-size:11px;
  transition:all .2s;
}
#toolbar button:hover { background:rgba(0,0,0,.45); }

/* Scrollbar */
#rack-container::-webkit-scrollbar { display:none; }
.rack-row::-webkit-scrollbar { display:none; }

/* ═══════════════════════════════════════════
   LOGIN OVERLAY
   ═══════════════════════════════════════════ */
#login-overlay {
  position:absolute; inset:0; z-index:100;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,215,0,.12), transparent 50%),
    linear-gradient(180deg,#0d3b2e 0%, #0B1A3D 48%, #071228 100%);
  display:none; align-items:center; justify-content:center;
  border-radius:24px;
  pointer-events:auto; overflow:hidden;
}
#login-overlay.show { display:flex; }
.login-atmosphere {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 80%, rgba(26,107,82,.12), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(255,140,0,.1), transparent 35%);
}

.login-container {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  width:360px; max-width:92%;
}

.login-logo {
  width:96px; height:96px;
  background:linear-gradient(145deg,#FFD700,#FF8C00);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 5px rgba(255,215,0,.22), 0 14px 40px rgba(255,140,0,.35);
  margin-bottom:14px;
  animation:loginLogoIn .55s ease-out;
}
@keyframes loginLogoIn {
  from { opacity:0; transform:scale(.86); }
  to { opacity:1; transform:scale(1); }
}
.login-logo-inner {
  font-size:30px; font-weight:800; color:#0B1A3D;
  font-family:'Cinzel',serif; letter-spacing:1px;
}

.login-title {
  font-size:26px; font-weight:800; color:#FFD700;
  letter-spacing:.08em; margin-bottom:6px;
  font-family:'Cinzel',serif;
  text-shadow:0 4px 18px rgba(0,0,0,.45);
  text-align:center;
}
.login-subtitle {
  font-size:13px; color:rgba(255,255,255,.58);
  font-weight:500; margin-bottom:22px;
  font-family:'Outfit',sans-serif;
  text-align:center; max-width:280px; line-height:1.35;
}

.login-primary {
  width:100%; display:flex; align-items:center; gap:12px;
  padding:14px 16px; border:none; border-radius:16px; cursor:pointer;
  text-align:left;
  background:linear-gradient(135deg,#ff8c00,#e65100);
  color:#fff; box-shadow:0 10px 28px rgba(255,111,0,.35);
  transition:transform .15s, filter .15s;
  margin-bottom:4px;
}
.login-primary:hover { transform:translateY(-2px); filter:brightness(1.05); }
.login-primary:active { transform:scale(.98); }
.login-primary .lp-ico {
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.18); font-size:0; flex-shrink:0;
}
.login-primary .lp-ico svg { width:16px; height:16px; fill:currentColor; }
.login-primary .lp-copy { display:flex; flex-direction:column; gap:2px; }
.login-primary .lp-copy strong { font-size:16px; font-weight:800; letter-spacing:.02em; }
.login-primary .lp-copy small { font-size:12px; opacity:.9; font-weight:500; }

.login-buttons { width:100%; display:flex; flex-direction:column; gap:8px; margin-top:8px; }

.login-btn {
  width:100%; height:44px; border:none; border-radius:12px;
  font-size:13px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all .2s; position:relative;
}
.login-btn:active { transform:scale(.97); }

/* Facebook */
.login-btn.facebook {
  background:#1877F2; color:#fff;
}
.login-btn.facebook:hover { background:#166fe5; }

/* Google */
.login-btn.google {
  background:#fff; color:#333;
  border:1px solid #ddd;
}
.login-btn.google:hover { background:#f5f5f5; }

/* Apple */
.login-btn.apple {
  background:#000; color:#fff;
}
.login-btn.apple:hover { background:#1a1a1a; }

/* Email */
.login-btn.email {
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.login-btn.email:hover { background:rgba(255,255,255,.08); }

.login-btn-icon {
  width:26px; height:26px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:0; flex-shrink:0;
}
.login-btn-icon svg { width:16px; height:16px; }
.login-btn-icon.fb {
  background:#fff; color:#1877F2;
}
.login-btn-icon.fb svg { fill:currentColor; }
.login-btn-icon.google-icon {
  background:#fff; border:1px solid #eee;
}
.login-btn-icon.apple-icon {
  background:#fff; color:#000;
}
.login-btn-icon.apple-icon svg { fill:currentColor; }
.login-btn-icon.email-icon {
  background:transparent; color:#fff;
}
.login-btn-icon.email-icon svg { fill:currentColor; }

/* Divider */
.login-divider {
  display:flex; align-items:center; gap:12px;
  margin:6px 0; width:100%;
}
.login-divider span:first-child,
.login-divider span:last-child {
  flex:1; height:1px; background:rgba(255,255,255,.12);
}
.login-divider span:nth-child(2) {
  font-size:12px; color:rgba(255,255,255,.35);
  white-space:nowrap;
}

/* Guest (legacy) */
.login-guest {
  background:none; border:none; color:rgba(255,255,255,.4);
  font-size:13px; cursor:pointer; margin-top:20px;
  text-decoration:underline; padding:8px 16px;
  transition:all .2s;
}
.login-guest:hover { color:rgba(255,255,255,.7); }

.login-more {
  width:100%; margin-top:10px;
  border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18); padding:0 10px 8px;
}
.login-more summary {
  list-style:none; cursor:pointer; padding:10px 4px;
  font-size:12px; font-weight:600; color:rgba(255,255,255,.5);
  text-align:center; user-select:none;
}
.login-more summary::-webkit-details-marker { display:none; }
.login-more[open] summary { color:rgba(255,255,255,.7); }

/* ─── Login Tabs / Form ─── */
.login-tabs { display:flex; gap:0; margin:4px 0 6px; width:100%; }
.login-tab {
  flex:1; padding:9px; text-align:center; border:none; border-radius:10px 10px 0 0;
  font-size:13px; font-weight:700; cursor:pointer; transition:all .2s;
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.4);
}
.login-tab.active { background:rgba(255,215,0,.1); color:#ffd700; }
.login-tab:hover { background:rgba(255,255,255,.08); }

.login-form { display:flex; flex-direction:column; gap:8px; width:100%; margin-bottom:6px; }
.login-form.hidden { display:none; }
.login-input {
  width:100%; padding:11px 14px; border:1px solid rgba(255,255,255,.1); border-radius:10px;
  background:rgba(255,255,255,.06); color:#fff; font-size:13px; outline:none;
  transition:border-color .2s;
}
.login-input:focus { border-color:#ffd700; }
.login-input::placeholder { color:rgba(255,255,255,.3); }
.login-form-btn {
  width:100%; padding:11px; border:none; border-radius:12px;
  background:linear-gradient(135deg,#c9a227,#ffd700); color:#1a1408;
  font-size:14px; font-weight:800; cursor:pointer; transition:all .2s;
}
.login-form-btn:hover { transform:translateY(-1px); box-shadow:0 4px 15px rgba(255,215,0,.25); }
.login-form-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.login-form-btn .btn-spin,
.btn-spin {
  display:inline-block; width:12px; height:12px; margin-right:8px;
  border:2px solid rgba(26,20,8,.28); border-top-color:#1a1408;
  border-radius:50%; vertical-align:-2px;
  animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform:rotate(360deg); } }
.login-error {
  font-size:11px; color:#ffab91; text-align:center; min-height:16px;
  margin-top:-4px; display:none;
  padding:6px 10px; border-radius:10px;
  background:rgba(191,106,74,.12); border:1px solid rgba(191,106,74,.28);
}

/* ─── Network Status ─── */
#net-status {
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:0.02em;
  color:#c8d6e8; padding:5px 12px 5px 9px; margin:4px 8px;
  border-radius:999px;
  background:linear-gradient(165deg, rgba(13, 40, 72, 0.88), rgba(8, 22, 42, 0.94));
  border:1px solid rgba(255, 215, 0, 0.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  transition:border-color .25s, color .25s, background .25s;
}
#net-status.is-ok {
  border-color:rgba(26, 107, 82, 0.5);
  color:#a8d5c0;
}
#net-status.is-warn {
  border-color:rgba(255, 152, 0, 0.45);
  color:#ffcc80;
}
#net-status.is-bad {
  border-color:rgba(191, 106, 74, 0.45);
  color:#ffccbc;
}
#net-status .ns-dot {
  width:8px; height:8px; border-radius:50%;
  background:#666; flex-shrink:0; transition:background .3s, box-shadow .3s;
}
#net-status .ns-dot.connected {
  background:#1a6b52;
  box-shadow:0 0 0 2px rgba(26,107,82,.28), 0 0 6px rgba(26,107,82,.45);
}
#net-status .ns-dot.disconnected {
  background:#bf6a4a;
  box-shadow:0 0 0 2px rgba(191,106,74,.28);
}
#net-status .ns-dot.connecting {
  background:#ff9800;
  box-shadow:0 0 0 2px rgba(255,152,0,.28);
  animation:pulse-dot 1s infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ─── Lobby Mode Toggle ─── */
.lobby-mode-toggle {
  display:flex; gap:6px; margin-bottom:10px;
  background:rgba(255,255,255,.04); border-radius:10px; padding:4px;
}
.lobby-mode-btn {
  flex:1; padding:7px 14px; border:none; border-radius:8px;
  font-size:12px; font-weight:600; cursor:pointer; transition:all .2s;
  background:transparent; color:rgba(255,255,255,.5);
}
.lobby-mode-btn.active { background:rgba(255,215,0,.18); color:#ffd700; }
.lobby-mode-btn:hover:not(.active) { background:rgba(255,255,255,.06); }

/* ─── Match found entrance ─── */
#mf-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 215, 0, 0.16), transparent 55%),
    rgba(8, 14, 28, 0.92);
  backdrop-filter: blur(8px);
}
#mf-overlay.show { display: flex; }
#mf-overlay.show .mf-card {
  animation: mfCardIn 0.45s cubic-bezier(0.22, 0.9, 0.28, 1) both;
}
@keyframes mfCardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.mf-card {
  width: min(380px, 100%);
  padding: 28px 22px 22px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(160deg, rgba(255, 215, 0, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 215, 0, 0.35);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}
.mf-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 6px;
}
.mf-title {
  font-family: Outfit, Cinzel, system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #ffd700;
  margin: 0 0 18px;
}
.mf-seats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.mf-seat {
  min-height: 52px;
  padding: 8px 4px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}
.mf-seat.filled {
  color: #fff;
  background: rgba(255, 215, 0, 0.14);
  border: 1px solid rgba(255, 215, 0, 0.45);
  transform: scale(1.04);
}
.mf-seat.me {
  color: #1a1208;
  background: linear-gradient(135deg, #ffd700, #ffb300);
  border-color: transparent;
}
.mf-seat.pop {
  animation: mfSeatPop 0.35s cubic-bezier(0.22, 0.9, 0.28, 1) both;
}
@keyframes mfSeatPop {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1.04); }
}
.mf-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
#game.table-enter {
  animation: tableEnter 0.7s cubic-bezier(0.22, 0.9, 0.28, 1) both;
}
@keyframes tableEnter {
  from { opacity: 0.35; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #mf-overlay.show .mf-card,
  .mf-seat.pop,
  #game.table-enter { animation: none !important; }
}

/* ─── In-game toast (reconnect / disconnect) ─── */
#game-toast-host {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(420px, calc(100% - 24px));
  pointer-events: none;
}
.game-toast {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 10px;
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(18, 32, 58, 0.98), rgba(8, 14, 28, 0.98));
  border: 1px solid rgba(255, 215, 0, 0.28);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: gameToastIn 0.28s cubic-bezier(0.22, 0.9, 0.28, 1) both;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.game-toast.warn {
  border-color: rgba(239, 83, 80, 0.45);
  background: linear-gradient(165deg, rgba(48, 22, 28, 0.98), rgba(18, 10, 14, 0.98));
}
.game-toast.ok {
  border-color: rgba(129, 199, 132, 0.4);
  background: linear-gradient(165deg, rgba(22, 42, 32, 0.98), rgba(10, 22, 16, 0.98));
}
.game-toast-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.game-toast-ico {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; line-height: 1;
  flex-shrink: 0;
  color: #1a1208;
  background: linear-gradient(145deg, #ffd700, #f0b400);
}
.game-toast.warn .game-toast-ico {
  color: #fff;
  background: linear-gradient(145deg, #ff9800, #e65100);
}
.game-toast.ok .game-toast-ico {
  color: #fff;
  background: linear-gradient(145deg, #8fd4b8, #145c45);
}
.game-toast-msg {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
}
.game-toast-time {
  font-size: 12px;
  font-weight: 800;
  color: #ffd700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.game-toast-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.game-toast-bar > i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #ffd700, #f0b400);
  transition: transform 0.9s linear;
  border-radius: 999px;
}
.game-toast.ok .game-toast-bar > i {
  background: linear-gradient(90deg, #8fd4b8, #1a6b52);
}
.game-toast.warn .game-toast-bar > i {
  background: linear-gradient(90deg, #ff9800, #e65100);
}
@keyframes gameToastIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .game-toast { animation: none !important; }
  .game-toast-bar > i { transition: none !important; }
  #turn-banner.mine,
  #turn-banner.urgent,
  .opp-card.active,
  .opp-card.active .turn-chip,
  #discard-pile.can-pick,
  .btn-elden:not([disabled]),
  .btn-draw:not([disabled]),
  .btn-throw:not([disabled]),
  .btn-finish:not([disabled]),
  .btn-open.open-ready:not([disabled]),
  #pending-section.ready,
  .pending-set,
  #rack-section.my-turn,
  #rack-section.throw-ready,
  #topbar .tb-chip.tb-rem.can-draw {
    animation: none !important;
  }
}

/* ─── Online Lobby waiting ─── */
.lobby-waiting {
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:20px 12px;
  background:linear-gradient(160deg,rgba(12,20,40,.96),rgba(22,33,62,.97));
}
.lobby-waiting .lw-card {
  width:100%; max-width:360px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:24px 20px 18px; border-radius:20px;
  background:linear-gradient(160deg,rgba(255,215,0,.1),rgba(255,255,255,.03));
  border:1px solid rgba(255,215,0,.32);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.lobby-waiting .lw-title {
  font-size:17px; font-weight:800; color:#ffd700; margin:0;
}
.lobby-waiting .lw-text {
  font-size:13px; color:rgba(255,255,255,.55); text-align:center; margin:-4px 0 0;
}
.lobby-waiting .lw-cancel {
  width:100%; padding:12px 20px; border-radius:12px; cursor:pointer; font-size:13px; font-weight:700;
  background:rgba(255,106,0,.12); border:1px solid rgba(255,152,0,.4); color:#ffcc80;
}
.lobby-waiting .lw-cancel:hover { background:rgba(255,106,0,.22); color:#ffe0b2; }
.lobby-waiting .lw-share {
  width:100%; padding:10px 14px; border-radius:12px; cursor:pointer; font-size:12px; font-weight:700;
  background:rgba(255,215,0,.12); border:1px solid rgba(255,215,0,.4); color:#ffd700;
}
.lobby-waiting .lw-share:hover { background:rgba(255,215,0,.2); }
.lobby-waiting .mm-seats { margin:4px 0 0; }
.lobby-waiting .mm-fill { color:#ffd700; font-size:14px; font-weight:800; }
.lobby-waiting .lw-code-wrap {
  width:100%; padding:12px 14px; border-radius:12px; text-align:center;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,215,0,.3);
  font-size:18px; font-weight:800; color:#ffd700; letter-spacing:1px; word-break:break-all;
}

/* ═══════════════════════════════════════════
   LOBBY OVERLAY
   ═══════════════════════════════════════════ */
#lobby-overlay {
  position:absolute; inset:0; z-index:90;
  background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);
  display:none; flex-direction:column; align-items:center;
  border-radius:24px; padding:30px;
}
#lobby-overlay.show { display:flex; }

.lobby-header {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; max-width:700px; margin-bottom:20px;
}
.lobby-title {
  font-size:24px; font-weight:bold; color:#ffd700;
  letter-spacing:6px;
}
.lobby-header-btns { display:flex; gap:8px; }
.lobby-btn {
  padding:10px 20px; border:none; border-radius:10px;
  font-size:13px; font-weight:bold; cursor:pointer;
  transition:all .2s;
}
.lobby-btn:hover { transform:translateY(-2px); filter:brightness(1.15); }
.lobby-btn.create {
  background:#1a6b52; color:#fff;
}
.lobby-btn.refresh {
  background:rgba(255,255,255,.1); color:#fff;
}
.lobby-btn.back {
  background:transparent; color:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.12);
}
.lobby-btn.back:hover { background:rgba(255,255,255,.05); }

.lobby-info {
  color:rgba(255,255,255,.4); font-size:13px;
  margin-bottom:12px; text-align:center;
}

.lobby-play-hero {
  position:relative; overflow:hidden;
  width:100%; max-width:700px; margin:0 auto 16px;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border:none; border-radius:16px; cursor:pointer;
  text-align:left;
  background:linear-gradient(135deg, rgba(255,140,0,.95), rgba(230,81,0,.9));
  color:#fff; box-shadow:0 10px 28px rgba(255,111,0,.35);
  transition:transform .15s, filter .15s;
}
.lobby-play-hero:hover { transform:translateY(-2px); filter:brightness(1.06); }
.lobby-play-hero:active { transform:scale(.98); }
.lobby-play-hero .lph-glow {
  position:absolute; inset:-40% -20%;
  background:radial-gradient(circle at 30% 40%, rgba(255,255,255,.35), transparent 55%);
  pointer-events:none; animation:lphPulse 2.4s ease-in-out infinite;
}
@keyframes lphPulse {
  0%, 100% { opacity:.55; } 50% { opacity:1; }
}
.lobby-play-hero .lph-ico {
  position:relative; font-size:28px; flex-shrink:0;
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.18);
}
.lobby-play-hero .lph-copy {
  position:relative; flex:1; display:flex; flex-direction:column; gap:2px; min-width:0;
}
.lobby-play-hero .lph-copy strong {
  font-size:17px; font-weight:800; letter-spacing:.02em;
}
.lobby-play-hero .lph-copy small {
  font-size:12px; opacity:.88; font-weight:500;
}
.lobby-play-hero .lph-arrow {
  position:relative; font-size:22px; font-weight:800; opacity:.9;
}

.liveops-banner,
.daily-banner,
.tournament-banner,
.clubwar-banner,
.piggy-banner,
.mission-banner,
.achievement-banner,
.calendar-banner,
.wheel-banner,
.season-banner {
  width: 100%;
  max-width: 700px;
  margin: -4px auto 10px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 13px;
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.liveops-banner { cursor: default; margin-top: -8px; margin-bottom: 12px; }

.lobby-cta-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.lobby-cta-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 0;
  color: #ffd700;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
}
.lobby-cta-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.cta-enter {
  animation: lobbyCtaIn .38s ease-out;
}
.cta-enter .lobby-cta-icon {
  animation: lobbyCtaIconPulse 1.8s ease-in-out 2;
}
@keyframes lobbyCtaIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes lobbyCtaIconPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,215,0,0); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 4px rgba(255,215,0,.12); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-enter, .cta-enter .lobby-cta-icon { animation: none !important; }
}
.lobby-cta-text { flex: 1; min-width: 0; }
.lobby-cta-title {
  font-weight: 800; font-size: 13px; color: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lobby-cta-sub {
  margin-top: 2px; font-size: 11px; color: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lobby-cta-bar {
  margin-top: 5px; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.1); overflow: hidden;
}
.lobby-cta-bar > i {
  display: block; height: 100%; border-radius: 4px;
  background: currentColor; opacity: .85;
}
.lobby-cta-action {
  flex-shrink: 0;
  padding: 5px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 800; color: #ffd700;
  background: rgba(255,215,0,.14);
  border: 1px solid rgba(255,215,0,.35);
}

.liveops-banner {
  background: linear-gradient(90deg, rgba(255,140,60,.2), rgba(0,0,0,.25));
  border-color: rgba(255,160,80,.45);
  color: #ffd7a8;
}
.liveops-banner.xp {
  background: linear-gradient(90deg, rgba(26,107,82,.22), rgba(0,0,0,.25));
  border-color: rgba(143,212,184,.45);
  color: #c8e6c9;
}

.daily-banner {
  background: linear-gradient(90deg, rgba(255,215,0,.22), rgba(0,0,0,.25));
  border-color: rgba(255,215,0,.55);
  color: #ffe082;
}
.daily-banner.is-ready,
.mission-banner.claim-ready,
.piggy-banner.full,
.wheel-banner.is-ready,
.calendar-banner.is-ready {
  box-shadow: 0 0 14px rgba(255,215,0,.15);
  animation: bannerReadyGlow 2.6s ease-in-out infinite;
}
@keyframes bannerReadyGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(255,215,0,.12); }
  50% { box-shadow: 0 0 20px rgba(255,215,0,.28); }
}
@media (prefers-reduced-motion: reduce) {
  .daily-banner.is-ready,
  .mission-banner.claim-ready,
  .piggy-banner.full,
  .wheel-banner.is-ready,
  .calendar-banner.is-ready { animation: none !important; }
}

.tournament-banner {
  background: linear-gradient(90deg, rgba(229,115,115,.22), rgba(0,0,0,.25));
  border-color: rgba(229,115,115,.5);
  color: #ef9a9a;
}
.tournament-banner.is-registered {
  background: linear-gradient(90deg, rgba(26,107,82,.2), rgba(0,0,0,.25));
  border-color: rgba(143,212,184,.45);
  color: #a8e0c8;
}
.tournament-banner.is-live {
  background: linear-gradient(90deg, rgba(255,152,0,.22), rgba(0,0,0,.25));
  border-color: rgba(255,152,0,.5);
  color: #ffcc80;
  animation: bannerLiveGlow 2.2s ease-in-out infinite;
}
.clubwar-banner {
  background: linear-gradient(90deg, rgba(255,138,101,.22), rgba(0,0,0,.25));
  border-color: rgba(255,138,101,.5);
  color: #ffab91;
}
.clubwar-banner.needs-response {
  box-shadow: 0 0 12px rgba(255,138,101,.2);
  animation: bannerWarPulse 2s ease-in-out infinite;
}
@keyframes bannerLiveGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(255,152,0,.15); }
  50% { box-shadow: 0 0 20px rgba(255,152,0,.32); }
}
@keyframes bannerWarPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,106,0,.18); transform: translateY(0); }
  50% { box-shadow: 0 0 18px rgba(255,106,0,.35); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .tournament-banner.is-live,
  .clubwar-banner.needs-response { animation: none !important; }
}

.piggy-banner {
  background: linear-gradient(90deg, rgba(255,140,60,.22), rgba(0,0,0,.25));
  border-color: rgba(255,160,80,.5);
  color: #ffd7a8;
}
.piggy-banner.full {
  background: linear-gradient(90deg, rgba(255,215,0,.22), rgba(0,0,0,.25));
  border-color: rgba(255,215,0,.55);
  color: #ffe082;
}

.mission-banner {
  background: linear-gradient(90deg, rgba(100,180,255,.2), rgba(0,0,0,.25));
  border-color: rgba(120,190,255,.45);
  color: #cce6ff;
}
.mission-banner.claim-ready {
  background: linear-gradient(90deg, rgba(255,215,0,.22), rgba(0,0,0,.25));
  border-color: rgba(255,215,0,.55);
  color: #ffe082;
}

.achievement-banner {
  background: linear-gradient(90deg, rgba(255,215,0,.18), rgba(0,0,0,.25));
  border-color: rgba(255,215,0,.45);
  color: #ffe082;
}

.calendar-banner {
  background: linear-gradient(90deg, rgba(143,212,184,.22), rgba(0,0,0,.25));
  border-color: rgba(143,212,184,.5);
  color: #a8e0c8;
}

.wheel-banner {
  background: linear-gradient(90deg, rgba(255,112,67,.22), rgba(0,0,0,.25));
  border-color: rgba(255,112,67,.5);
  color: #ffab91;
}

.season-banner {
  background: linear-gradient(90deg, rgba(255,138,80,.22), rgba(0,0,0,.25));
  border-color: rgba(255,138,80,.5);
  color: #ffcc80;
}

.daily-banner:hover,
.tournament-banner:hover,
.clubwar-banner:hover,
.piggy-banner:hover,
.mission-banner:hover,
.achievement-banner:hover,
.calendar-banner:hover,
.wheel-banner:hover,
.season-banner:hover {
  transform: translateY(-1px);
}

/* Room List */
.lobby-rooms {
  width:100%; max-width:700px; flex:1;
  overflow-y:auto; display:flex; flex-direction:column;
  gap:8px; padding-right:4px;
}
.lobby-rooms::-webkit-scrollbar { width:4px; }
.lobby-rooms::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:4px; }

.room-card {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 16px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border-radius:14px; border:1px solid rgba(255,255,255,.08);
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.room-card:hover {
  border-color:rgba(255,215,0,.32);
  transform:translateY(-1px);
}
.room-card.is-joinable { border-color:rgba(143,212,184,.28); }
.room-card.almost-full {
  border-color:rgba(255,183,77,.5);
  background:linear-gradient(145deg,rgba(255,152,0,.14),rgba(255,255,255,.03));
  box-shadow:0 0 14px rgba(255,152,0,.12);
}
.room-card.is-playing { opacity:.72; }
.room-card.status-full { border-color:rgba(191,106,74,.38); }
.room-card .room-info { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.room-card-top {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.room-card .room-name {
  font-size:15px; font-weight:800; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px;
}
.room-card .room-host {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; color:rgba(255,255,255,.45);
}
.room-card .room-host-ico {
  width:12px; height:12px; flex-shrink:0; opacity:.7; color:rgba(255,215,0,.75);
}
.room-card .seat-dots { display:flex; gap:6px; margin:2px 0; }
.room-card .seat-dots span {
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  transition:background .2s, box-shadow .2s, border-color .2s;
}
.room-card .seat-dots span.filled {
  background:linear-gradient(145deg,#ffe566,#c9a227);
  border-color:#a8861a;
  box-shadow:0 0 7px rgba(255,215,0,.5);
}
.room-fill {
  height:4px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; margin:2px 0 4px;
}
.room-fill-bar {
  height:100%; border-radius:4px;
  background:linear-gradient(90deg,#1a6b52,#ffd700); transition:width .3s ease;
}
.room-card.almost-full .room-fill-bar {
  background:linear-gradient(90deg,#ff8c00,#ffd700);
}
.room-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.room-meta .rm-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:999px;
  background:rgba(11,26,61,.45); border:1px solid rgba(255,215,0,.14);
  font-size:11px; color:rgba(255,255,255,.58); font-weight:500;
}
.room-meta .rm-chip svg {
  width:11px; height:11px; flex-shrink:0; color:rgba(255,215,0,.85);
}
.room-meta .rm-chip b { color:#ffd700; font-weight:800; }
.room-meta .rm-chip.hot {
  color:#ffb74d; border-color:rgba(255,183,77,.45); background:rgba(255,140,0,.16); font-weight:700;
}
.room-meta .rm-chip.hot svg { color:#ffb74d; }
.room-card .room-players { font-size:12px; color:rgba(255,255,255,.5); }
.room-card .room-players .count { color:#ffd700; font-weight:bold; }

.room-card .room-status {
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0;
}
.room-status-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:20px;
  font-size:10px; font-weight:700; letter-spacing:.02em;
  border:1px solid transparent;
}
.room-status-badge svg { width:11px; height:11px; flex-shrink:0; }
.room-status-badge.waiting {
  background:rgba(26,107,82,.28); color:#8fd4b8; border-color:rgba(26,107,82,.45);
}
.room-status-badge.playing {
  background:rgba(255,140,0,.2); color:#ffb74d; border-color:rgba(255,140,0,.4);
}
.room-status-badge.full {
  background:rgba(191,106,74,.2); color:#ffccbc; border-color:rgba(191,106,74,.4);
}
.room-btn-join {
  padding:10px 18px; border:none; border-radius:10px;
  font-size:12px; font-weight:800; cursor:pointer;
  background:rgba(255,255,255,.12); color:rgba(255,255,255,.7);
  transition:all .2s; min-width:78px;
}
.room-btn-join.ready {
  background:linear-gradient(135deg,#c9a227,#ffd700); color:#1a1408;
  box-shadow:0 4px 14px rgba(255,215,0,.25);
}
.room-btn-join.ready:hover { filter:brightness(1.06); transform:translateY(-1px); }
.room-btn-join:disabled { opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none; }

.lobby-empty {
  flex:1; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.45); font-size:14px;
  flex-direction:column; gap:8px; padding:28px 16px; text-align:center;
  background:rgba(255,255,255,.03); border-radius:14px;
  border:1px dashed rgba(255,255,255,.12);
}
.lobby-empty .icon { font-size:40px; opacity:.7; }
.lobby-empty-title { font-weight:800; color:#fff; font-size:15px; }
.lobby-empty-sub { font-size:12px; color:rgba(255,255,255,.45); max-width:260px; line-height:1.4; }
.lobby-loading {
  text-align:center; padding:24px 12px; color:rgba(255,255,255,.5); font-size:13px;
}

/* 🎊 Confetti pieces */
.confetti-piece {
  position:fixed;
  top:-10px;
  width:8px;
  height:8px;
  border-radius:2px;
  pointer-events:none;
  z-index:10050;
  animation:confettiFall linear forwards;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

/* ═══ ROOM SETTINGS ═══ */
#settings-overlay {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(255,215,0,.1), transparent 50%),
    rgba(6,10,20,.9);
  z-index:60;
  visibility:hidden; opacity:0;
  transition:opacity .22s;
  padding:16px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
#settings-overlay.show { visibility:visible; opacity:1; }
.settings-panel {
  width:min(380px, 94%);
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255,215,0,.1), transparent 55%),
    linear-gradient(165deg,rgba(18,32,58,.98),rgba(8,14,28,.98));
  border-radius:20px; padding:22px 18px 16px;
  box-shadow:0 24px 56px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06), 0 0 40px rgba(255,215,0,.06);
  border:1px solid rgba(255,215,0,.32);
  animation:slideInUp .28s ease-out;
}
.settings-eyebrow {
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.42); text-align:center; margin-bottom:4px;
}
.settings-title {
  font-size:24px; font-weight:700; color:#ffd700;
  text-align:center; margin:0 0 4px; line-height:1.15;
}
.settings-sub {
  margin:0 0 16px; text-align:center;
  font-size:12px; color:rgba(255,255,255,.5); line-height:1.4;
}
.settings-row {
  margin-bottom:12px;
}
.settings-row label,
.settings-row .settings-label {
  display:block; font-size:11px; font-weight:700;
  color:rgba(255,236,179,.65);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.06em;
}
.settings-row input[type=text] {
  width:100%; padding:11px 12px; border-radius:11px;
  border:1px solid rgba(255,215,0,.16);
  background:rgba(8,18,32,.7);
  color:#fff8e7; font-size:14px; font-weight:600; outline:none; box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
}
.settings-row input[type=text]::placeholder { color:rgba(255,255,255,.28); }
.settings-row input[type=text]:focus {
  border-color:rgba(255,215,0,.55);
  box-shadow:0 0 0 3px rgba(255,215,0,.12);
}
.settings-options {
  display:flex; gap:6px; flex-wrap:wrap;
}
.settings-options .opt-btn {
  flex:1; min-width:56px;
  padding:9px 6px; text-align:center; border-radius:11px;
  background:linear-gradient(160deg, rgba(18,36,58,.85), rgba(8,18,32,.92));
  border:1px solid rgba(255,215,0,.12);
  color:rgba(255,255,255,.55); font-size:13px; font-weight:700;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
  user-select:none; font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.settings-options .opt-btn:hover {
  background:linear-gradient(160deg, rgba(22,44,68,.9), rgba(10,22,38,.95));
  color:#fff8e7; border-color:rgba(255,215,0,.28);
  transform:translateY(-1px);
}
.settings-options .opt-btn.selected {
  background:linear-gradient(145deg,#ffd700,#f0b400);
  color:#1a1208; border-color:transparent;
  box-shadow:0 4px 14px rgba(255,215,0,.32);
  transform:translateY(-1px);
}
.settings-options .opt-btn.locked,
.settings-options .opt-btn:disabled {
  opacity:.35; cursor:not-allowed; pointer-events:none; transform:none;
}
.settings-btns {
  display:flex; gap:8px; margin-top:16px;
}
.settings-btns button {
  flex:1; padding:12px 14px; border:none; border-radius:12px;
  font-size:13px; font-weight:800; cursor:pointer;
  transition:filter .15s, transform .15s, box-shadow .15s;
  font-family:inherit;
}
.settings-btns button:hover { filter:brightness(1.08); transform:translateY(-1px); }
.settings-btns .btn-cancel-confirm {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.72);
}
.settings-btns .btn-create-room {
  flex:1.35;
  background:linear-gradient(135deg,#ff9800,#e65100);
  border:1px solid rgba(255,215,0,.28);
  color:#fff;
  box-shadow:0 8px 20px rgba(230,81,0,.28);
}
.settings-btns .btn-create-room:hover {
  box-shadow:0 10px 24px rgba(230,81,0,.38);
}
/* ═══════════════════════════════════════════
   LEADERBOARD
   ═══════════════════════════════════════════ */
#lb-overlay {
  position:absolute; inset:0; z-index:95;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,215,0,.1), transparent 50%),
    rgba(6,10,20,.9);
  border-radius:24px;
  display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:16px;
}
#lb-overlay.show { display:flex; }
.lb-panel {
  width:min(400px, 94%); max-height:min(85%, 560px);
  background:linear-gradient(165deg,rgba(18,32,58,.98),rgba(8,14,28,.98));
  border:1px solid rgba(255,215,0,.3);
  border-radius:20px; padding:20px 16px 14px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 56px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  animation:slideInUp .28s ease-out;
}
.lb-eyebrow {
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.42); text-align:center; margin-bottom:2px;
}
.lb-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:4px; flex-wrap:wrap; gap:8px;
}
.lb-header-right {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.lb-close-x {
  width:32px; height:32px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.75); display:inline-flex; align-items:center; justify-content:center;
  padding:0; line-height:0; flex-shrink:0;
}
.lb-close-x:hover { background:rgba(255,255,255,.14); color:#fff; }
.lb-close-x svg { width:16px; height:16px; fill:currentColor; display:block; }
.lb-title {
  font-size:24px; font-weight:700; color:#ffd700; margin:0; line-height:1.15;
}
.lb-tabs {
  display:flex; gap:4px;
  background:rgba(255,255,255,.05); border-radius:11px; padding:3px;
  border:1px solid rgba(255,255,255,.08);
}
.lb-tab {
  padding:6px 12px; border:none; border-radius:9px;
  font-size:11px; font-weight:800; cursor:pointer;
  background:transparent; color:rgba(255,255,255,.5);
  transition:background .15s, color .15s; font-family:inherit;
}
.lb-tab.active {
  background:linear-gradient(145deg,#ffd700,#f0b400);
  color:#1a1208;
  box-shadow:0 2px 10px rgba(255,215,0,.25);
}
.lb-tab:hover:not(.active) { color:rgba(255,255,255,.85); }
.lb-subtitle {
  font-size:12px; color:rgba(255,255,255,.48); margin:0 0 12px; text-align:center;
}
.lb-body {
  flex:1; overflow-y:auto; overflow-x:hidden;
  min-height:0; scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.12) transparent;
}
.lb-body::-webkit-scrollbar { width:4px; }
.lb-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:4px; }
.lb-loading {
  text-align:center; padding:40px 0;
  color:rgba(255,255,255,.35); font-size:13px;
}
.meta-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:28px 14px; gap:6px;
  border-radius:14px;
  background:linear-gradient(160deg, rgba(18,36,58,.55), rgba(8,18,32,.7));
  border:1px dashed rgba(255,215,0,.2);
}
.meta-empty-ico {
  width:44px; height:44px; border-radius:12px; margin-bottom:4px;
  display:grid; place-items:center; color:rgba(255,215,0,.8);
  background:linear-gradient(145deg,rgba(255,215,0,.2),rgba(255,215,0,.06));
  border:1px solid rgba(255,215,0,.3);
  box-shadow:0 4px 14px rgba(255,215,0,.12);
}
.meta-empty-ico svg { width:22px; height:22px; fill:currentColor; display:block; }
.meta-empty.is-loading .meta-empty-ico {
  animation: metaEmptyPulse 1.2s ease-in-out infinite;
}
@keyframes metaEmptyPulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50% { opacity:.65; transform:scale(.96); }
}
.meta-empty-title { font-weight:800; color:#fff8e7; font-size:14px; }
.meta-empty-sub { font-size:12px; color:rgba(255,255,255,.5); max-width:260px; line-height:1.4; }
.lb-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:36px 16px; gap:6px;
}
.lb-empty-ico {
  width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,rgba(255,215,0,.22),rgba(255,215,0,.08));
  border:1px solid rgba(255,215,0,.35); color:#ffd700; margin-bottom:6px;
}
.lb-empty-ico svg { width:22px; height:22px; fill:currentColor; display:block; }
.lb-empty-title { font-weight:800; color:#fff; font-size:14px; }
.lb-empty-sub { font-size:12px; color:rgba(255,255,255,.5); max-width:240px; line-height:1.4; }

/* Leaderboard rows */
.lb-row {
  display:flex; align-items:center; gap:8px;
  padding:9px 10px; border-radius:12px;
  margin-bottom:4px;
  background:linear-gradient(160deg, rgba(18,36,58,.85), rgba(8,18,32,.92));
  border:1px solid rgba(255,215,0,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:background .15s, border-color .15s, transform .15s;
}
.lb-row:hover { border-color:rgba(255,215,0,.28); transform:translateY(-1px); }
.lb-row.top1 {
  background:linear-gradient(90deg,rgba(255,215,0,.16),rgba(18,36,58,.55));
  border-color:rgba(255,215,0,.4);
  box-shadow:0 0 12px rgba(255,215,0,.1), inset 0 1px 0 rgba(255,255,255,.05);
}
.lb-row.top2 {
  background:linear-gradient(90deg,rgba(192,192,192,.12),rgba(18,36,58,.55));
  border-color:rgba(192,192,192,.28);
}
.lb-row.top3 {
  background:linear-gradient(90deg,rgba(205,127,50,.12),rgba(18,36,58,.55));
  border-color:rgba(205,127,50,.28);
}
.lb-row.is-me {
  border-color:rgba(143,212,184,.45);
  background:linear-gradient(90deg,rgba(26,107,82,.16),rgba(18,36,58,.55));
  box-shadow:0 0 12px rgba(26,107,82,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.lb-you {
  display:inline-block; margin-left:4px; font-size:9px; font-weight:800;
  color:#8fd4b8; background:rgba(143,212,184,.15); border:1px solid rgba(143,212,184,.3);
  border-radius:6px; padding:1px 5px; vertical-align:middle; letter-spacing:.02em;
}
.lb-me-bar {
  display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(90deg, rgba(143,212,184,.18), rgba(18,36,58,.55));
  border:1px solid rgba(143,212,184,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.lb-me-rank { font-weight:800; color:#8fd4b8; font-size:15px; min-width:36px; }
.lb-me-name { flex:1; font-weight:700; color:#fff8e7; font-size:13px; }
.lb-me-score { font-weight:800; color:#ffd700; font-size:14px; font-variant-numeric:tabular-nums; }

.lb-rank {
  width:28px; flex-shrink:0; text-align:center;
  font-size:13px; font-weight:800;
}
.lb-rank .lb-medal {
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:50%;
  font-size:11px; font-weight:800; color:#1a1208;
}
.lb-rank .lb-medal.m1 { background:linear-gradient(145deg,#ffd700,#f0b400); }
.lb-rank .lb-medal.m2 { background:linear-gradient(145deg,#e0e0e0,#9e9e9e); }
.lb-rank .lb-medal.m3 { background:linear-gradient(145deg,#cd7f32,#a05a2c); color:#fff; }
.lb-rank .lb-num { color:rgba(255,255,255,.35); font-size:12px; font-variant-numeric:tabular-nums; }

.lb-avatar {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; flex-shrink:0;
  background:linear-gradient(135deg,#1a2e48,#0c1828);
  border:1px solid rgba(255,215,0,.22); color:#fff8e7;
}
.lb-avatar.top1-avatar { background:linear-gradient(135deg,#ffd700,#f0b400); color:#1a1208; border-color:transparent; }
.lb-avatar.top2-avatar { background:linear-gradient(135deg,#e0e0e0,#9e9e9e); color:#1a1208; border-color:transparent; }
.lb-avatar.top3-avatar { background:linear-gradient(135deg,#cd7f32,#a05a2c); color:#fff; border-color:transparent; }

.lb-info { flex:1; min-width:0; }
.lb-name { font-size:13px; font-weight:700; color:#fff8e7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-stats { font-size:10px; color:rgba(255,255,255,.38); }
.lb-score { text-align:right; flex-shrink:0; }
.lb-score-val { font-size:14px; font-weight:800; color:#ffd700; font-variant-numeric:tabular-nums; }
.lb-score-label { font-size:9px; color:rgba(255,255,255,.35); }

.lb-footer {
  display:flex; justify-content:center; margin-top:10px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
.lb-close {
  padding:10px 28px; border:none; border-radius:12px;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.1);
  font-size:13px; font-weight:700; cursor:pointer; transition:background .15s, color .15s;
  font-family:inherit;
}
.lb-close:hover { background:rgba(255,255,255,.12); color:#fff; }

/* ═══════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   ═══════════════════════════════════════════ */
/* When viewport is narrower than the game board, body handles centering */
@media (max-width:1020px) {
  #game-wrapper { align-items:center; }
}
/* Very small screens: tighten spacing */
@media (max-width:600px) {
  #topbar { padding:3px 6px; }
  #topbar .tb-chip { font-size:10px; padding:3px 7px; }
  #topbar .tb-chip.tb-room { max-width:80px; }
  #topbar .tb-dock-lbl { display:none; }
  #topbar .tb-dock-btn { padding:4px 7px; }
  #rack-indicators .indicator-box { width:22px; height:30px; font-size:9px; }
  #rack-indicators .ind-cap { font-size:7px; }
  #rack-row > #actions .btn { min-width:56px; font-size:9px; padding:4px 6px; }
  #topbar .indicator { font-size:10px; gap:3px; }
  .indicator-box { width:26px; height:34px; font-size:10px; }
  #turn-banner .tb-timer { font-size:14px; min-width:24px; }
  #center-board { margin:0; }
  #middle {
    grid-template-columns: minmax(56px, 78px) minmax(0, 1fr) minmax(56px, 78px);
    gap: 4px 6px;
  }
  .opp-card { min-width:52px; padding:4px 6px; }
  .opp-card .avatar { width:24px; height:24px; font-size:11px; }
  .opp-card .name { font-size:8px; }
  .opp-card .tile-count { font-size:8px; }
  .opp-card .points { font-size:8px; }
  #opp-top .opp-card { max-width:min(280px, 75%); padding:4px 10px 4px 6px; gap:8px; }
  #opp-top .opp-card .avatar { width:26px; height:26px; }
  #discard-pile .mini-tile { width:22px; height:28px; font-size:9px; }
  .set-group .mini-tile { width:18px; height:24px; font-size:7px; }
  #goal-indicator { font-size:9px; padding:2px 7px; gap:4px; }
  #chip-display { font-size:11px; padding:3px 10px; }
  #pending-section { margin:0 4px 2px; padding:6px 8px; }
  .pending-set span { width:14px; height:18px; font-size:6px; }
  .pending-pts { font-size:9px; }
  #actions { padding:3px 6px; gap:4px; }
  .btn { font-size:9px; padding:4px 0; }
  .btn .icon { font-size:13px; }
  #rack-section { padding:3px 4px; }
  .tile { width:34px; height:46px; font-size:11px; }
  .tile .tile-label { font-size:6px; }
  #rack-container { gap:3px; min-height:calc(46px * 2 + 10px); }
  .rack-row { min-height:46px; gap:2px; }
}
/* Landscape phones: extra compact */
@media (max-height:500px) {
  #turn-row { margin:2px 8px 0; gap:6px; }
  #turn-banner { padding:3px 10px; margin:0; gap:6px; }
  #turn-banner .tb-name { font-size:11px; max-width:110px; }
  #turn-banner .tb-bar { width:64px; height:4px; }
  #turn-row > .discard-panel { max-width:88px; padding:3px 6px 4px; }
  #turn-row #discard-pile .mini-tile.discard-top { width:28px; height:36px; font-size:12px; }
  #middle {
    grid-template-columns: minmax(48px, 68px) minmax(0, 1fr) minmax(48px, 68px);
    gap: 3px 4px; padding: 0 4px 2px;
  }
  #center-board { margin:0; }
  #goal-indicator { font-size:9px; padding:1px 6px; }
  .opp-card { min-width:44px; padding:3px 5px; }
  .opp-card .avatar { width:20px; height:20px; font-size:10px; }
  #opp-top .opp-card { max-width:min(260px, 72%); }
  #discard-pile { min-height:36px; min-width:0; }
  .center-stage > .discard-panel { flex: 0 0 120px; }
  .set-group .mini-tile { width:16px; height:20px; font-size:6px; }
  #opened-sets-area { min-height:32px; }
}
/* Tablet portrait */
@media (min-width:600px) and (max-width:1020px) {
  .tile { width:40px; height:52px; font-size:13px; }
  #goal-indicator { font-size:12px; }
}

/* ─── DAILY REWARDS ─── */
#dr-overlay {
  position:absolute; inset:0; z-index:94;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255,215,0,.1), transparent 50%),
    rgba(6,10,20,.9);
  border-radius:24px;
  display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:16px;
}
#dr-overlay.show { display:flex; }
#meta-overlay {
  display:none; position:fixed; inset:0; z-index:1200;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,215,0,.1), transparent 48%),
    rgba(6,10,20,.9);
  align-items:center; justify-content:center;
  padding:16px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
#meta-overlay.show { display:flex; }
.meta-eyebrow {
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.42); text-align:center; margin-bottom:2px; width:100%;
}
.meta-header {
  align-items:flex-start !important;
}
.meta-panel .dr-title {
  font-size:24px !important;
  letter-spacing:0 !important;
  line-height:1.15;
}
.meta-panel .dr-subtitle {
  font-size:12px !important;
  color:rgba(255,255,255,.48) !important;
  margin:0 0 12px !important;
  line-height:1.4;
}
.meta-panel .dr-subtitle:empty { display:none; }
.meta-close-x {
  width:34px !important; height:34px !important; padding:0 !important;
  display:grid !important; place-items:center;
  border-radius:11px !important;
  flex-shrink:0;
}
.meta-footer { margin-top:12px; }
.meta-body {
  border-radius:12px;
}

/* Mağaza / kozmetik kartları (meta-body) */
.shop-loading, .shop-empty { text-align:center; opacity:.55; padding:18px 8px; font-size:13px; }
.shop-empty.rich {
  opacity:1; padding:22px 12px; border-radius:14px;
  background:rgba(0,0,0,.18); border:1px dashed rgba(255,255,255,.1);
}
.shop-empty-ico {
  width:44px; height:44px; margin:0 auto 10px; border-radius:12px;
  display:grid; place-items:center; color:rgba(255,215,0,.75);
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.22);
}
.shop-empty-ico svg { width:22px; height:22px; fill:currentColor; display:block; }
.shop-empty-title { font-weight:800; color:#fff; font-size:14px; opacity:1; }
.shop-empty-sub { margin-top:4px; font-size:12px; color:rgba(255,255,255,.5); }
.shop-invoice-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}
.shop-invoice-total {
  margin-top: 12px;
  font-weight: 800;
  color: #ffd700;
  font-size: 14px;
}
.shop-toolbar {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin-bottom:12px;
}
.shop-toolbar.secondary { margin-top:-4px; margin-bottom:10px; }
.shop-chip {
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.7); border-radius:999px; padding:5px 10px;
  font-size:11px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.shop-chip.active {
  background:rgba(255,215,0,.16); border-color:rgba(255,215,0,.5); color:#ffd700;
}
.shop-cat-ico {
  width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center;
}
.shop-cat-ico svg { width:14px; height:14px; fill:currentColor; }
.shop-provider { margin-left:auto; font-size:11px; color:rgba(255,255,255,.4); }
.shop-vip-note { font-size:12px; color:rgba(255,255,255,.55); margin-bottom:8px; }
.shop-section-title {
  margin:16px 0 8px; font-weight:800; color:#ffc107; font-size:13px;
}
.shop-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.shop-grid.store { grid-template-columns:1fr; }
.shop-card {
  display:flex; flex-direction:column; gap:8px;
  padding:12px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
}
.shop-card.is-equipped {
  border-color:rgba(255,215,0,.55);
  box-shadow:0 0 0 1px rgba(255,215,0,.15);
}
.shop-card.legendary { border-color:rgba(255,140,0,.45); }
.shop-card.epic { border-color:rgba(255,193,7,.45); }
.shop-card.rare { border-color:rgba(26,107,82,.45); }
.shop-error, .notif-error {
  color:#ffab91; text-align:center; padding:10px 12px; font-size:13px;
  background:rgba(191,106,74,.12); border:1px solid rgba(191,106,74,.28); border-radius:12px;
}
.shop-card-preview {
  height:52px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:0;
  color:#ffd700;
  background:linear-gradient(145deg, rgba(255,215,0,.16), rgba(0,0,0,.2));
}
.shop-card-preview svg { width:26px; height:26px; fill:currentColor; }
.shop-card-preview.pack {
  height:44px;
  color:#ff8f00;
  background:linear-gradient(145deg, rgba(255,183,77,.25), rgba(255,111,0,.12));
}
.shop-card.store-pack {
  flex-direction:row; align-items:center; gap:12px;
}
.shop-card.store-pack .shop-card-body { flex:1; min-width:0; }
.shop-card-name { font-weight:800; color:#fff; font-size:13px; }
.shop-card-meta { font-size:11px; color:rgba(255,255,255,.45); margin-top:2px; }
.shop-card-meta b { color:#ffd700; }
.shop-card-price { font-size:12px; color:#8fd4b8; font-weight:700; margin-top:2px; }
.shop-card-actions { margin-top:auto; }
.shop-card-btn {
  width:100%; border:none; border-radius:10px; padding:8px 10px;
  font-size:11px; font-weight:800; cursor:pointer;
}
.shop-card.store-pack .shop-card-btn { width:auto; flex-shrink:0; }
.shop-card-btn.buy {
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  border:1px solid rgba(255,215,0,.25);
}
.shop-card-btn.equip {
  background:rgba(255,215,0,.14); color:#ffd700; border:1px solid rgba(255,215,0,.35);
}
.shop-card-btn.ghost {
  background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.12);
  width:auto; padding:6px 12px;
}
.shop-badge.equipped {
  display:block; text-align:center; font-size:11px; font-weight:800; color:#ffd700; padding:6px 0;
}
.shop-invoice-list { display:flex; flex-direction:column; gap:6px; }
.shop-invoice-row {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:10px; border-radius:12px; background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.06);
}
@media (max-width:520px) {
  .shop-grid { grid-template-columns:1fr; }
}

/* Arkadaşlar / sosyal hub (meta-body) */
.friend-loading { text-align:center; opacity:.55; padding:18px 8px; font-size:13px; }
.friend-error {
  color:#ffab91; font-size:12px; margin-top:8px; padding:8px 10px; border-radius:10px;
  background:rgba(191,106,74,.12); border:1px solid rgba(191,106,74,.28);
}
.friend-hint { margin-top:8px; font-size:12px; color:rgba(255,255,255,.5); }
.friend-search {
  margin-bottom:14px; padding-bottom:12px;
  border-bottom:1px solid rgba(255,215,0,.12);
}
.friend-search-bar { display:flex; gap:8px; flex-wrap:wrap; }
.friend-search-input {
  flex:1; min-width:140px; padding:9px 12px; border-radius:12px;
  background:rgba(8,18,32,.65); color:#fff;
  border:1px solid rgba(255,215,0,.14); font-size:13px;
}
.friend-search-input:focus {
  outline:none; border-color:rgba(255,215,0,.45);
  box-shadow:0 0 0 2px rgba(255,215,0,.1);
}
.friend-section-title {
  margin:12px 0 8px; font-weight:800; font-size:12px; color:rgba(255,255,255,.55);
  display:flex; align-items:center; gap:8px;
  text-transform:uppercase; letter-spacing:.04em;
}
.friend-section-title.search { margin-top:0; color:rgba(255,236,179,.75); }
.friend-section-title.requests { color:#ffd700; }
.friend-section-title.blocked { color:#ffab91; }
.friend-count-pill {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:18px; padding:0 6px; border-radius:999px;
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff; font-size:11px; font-weight:800;
}
.friend-list { display:flex; flex-direction:column; gap:8px; }
.friend-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:14px;
  background:linear-gradient(160deg, rgba(18,36,58,.88), rgba(8,18,32,.94));
  border:1px solid rgba(255,215,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .15s, background .15s, transform .15s;
}
.friend-row:hover { border-color:rgba(255,215,0,.28); transform:translateY(-1px); }
.friend-row.is-online { border-color:rgba(143,212,184,.42); box-shadow:0 0 12px rgba(26,107,82,.12), inset 0 1px 0 rgba(255,255,255,.05); }
.friend-row.request {
  background:linear-gradient(90deg,rgba(255,215,0,.12),rgba(18,36,58,.5));
  border-color:rgba(255,215,0,.35);
}
.friend-row.blocked { opacity:.85; border-color:rgba(191,106,74,.28); }
.friend-avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:#fff8e7;
  background:linear-gradient(145deg, #1a2e48, #0c1828);
  border:1px solid rgba(255,215,0,.4);
  box-shadow:0 0 10px rgba(255,215,0,.1);
}
.friend-body { flex:1; min-width:0; }
.friend-name {
  font-weight:800; font-size:13px; color:#fff8e7;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.friend-meta {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:3px;
}
.friend-elo {
  font-size:11px; font-weight:700; color:#ffd700;
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.22);
  border-radius:999px; padding:2px 7px;
}
.friend-status {
  font-size:10px; font-weight:700; border-radius:999px; padding:2px 7px;
}
.friend-status.online {
  color:#8fd4b8; background:rgba(143,212,184,.12); border:1px solid rgba(143,212,184,.3);
}
.friend-status.offline {
  color:rgba(255,255,255,.45); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
}
.friend-status.request {
  color:#ffd700; background:rgba(255,215,0,.12); border:1px solid rgba(255,215,0,.28);
}
.friend-status.blocked {
  color:#ffab91; background:rgba(191,106,74,.12); border:1px solid rgba(191,106,74,.3);
}
.friend-actions {
  display:flex; flex-wrap:wrap; gap:5px; align-items:center; justify-content:flex-end;
  flex-shrink:0;
}
.friend-btn {
  border:none; border-radius:10px; padding:6px 10px;
  font-size:11px; font-weight:800; cursor:pointer;
}
.friend-btn.primary {
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  border:1px solid rgba(255,215,0,.25);
  box-shadow:0 4px 12px rgba(230,81,0,.22);
}
.friend-btn.invite {
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  border:1px solid rgba(255,215,0,.25);
  box-shadow:0 4px 12px rgba(230,81,0,.22);
}
.friend-btn.invite.muted {
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:none;
}
.friend-btn.accept {
  background:linear-gradient(135deg,#8fd4b8,#145c45); color:#fff;
}
.friend-btn.ghost {
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.12);
}
.friend-btn.danger {
  background:rgba(191,106,74,.12); color:#ffab91;
  border:1px solid rgba(191,106,74,.32);
}
.friend-badge {
  font-size:10px; font-weight:800; color:#8fd4b8;
  padding:4px 8px; border-radius:999px;
  background:rgba(143,212,184,.12); border:1px solid rgba(143,212,184,.3);
}
.friend-empty {
  text-align:center; padding:18px 10px;
  border-radius:14px; background:rgba(8,18,32,.45);
  border:1px dashed rgba(255,215,0,.18);
}
.friend-empty-ico {
  width:44px; height:44px; margin:0 auto 10px; border-radius:12px;
  display:grid; place-items:center; color:rgba(255,215,0,.75);
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.22);
}
.friend-empty-ico svg { width:22px; height:22px; fill:currentColor; display:block; }
.friend-empty.compact { padding:10px; opacity:.55; font-size:12px; }
.friend-empty.compact .friend-empty-ico { display:none; }
.friend-empty-title { font-weight:800; color:#fff; font-size:14px; }
.friend-empty-sub { margin-top:4px; font-size:12px; color:rgba(255,255,255,.5); }

/* Bildirimler (meta-body) */
.notif-loading { text-align:center; opacity:.55; padding:18px 8px; font-size:13px; }
.notif-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:12px; flex-wrap:wrap;
}
.notif-count { font-size:12px; color:rgba(255,255,255,.5); }
.notif-count b { color:#ffd700; }
.notif-list { display:flex; flex-direction:column; gap:8px; }
.notif-card {
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border-radius:14px;
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.16));
  border:1px solid rgba(255,255,255,.08);
}
.notif-card.is-unread {
  background:linear-gradient(145deg, rgba(255,215,0,.1), rgba(0,0,0,.18));
  border-color:rgba(255,215,0,.35);
  box-shadow:inset 3px 0 0 #ffd700;
}
.notif-card.friend.is-unread { border-color:rgba(143,212,184,.4); box-shadow:inset 3px 0 0 #8fd4b8; }
.notif-card.invite.is-unread { border-color:rgba(143,212,184,.4); box-shadow:inset 3px 0 0 #8fd4b8; }
.notif-card.reward.is-unread { border-color:rgba(255,140,0,.4); box-shadow:inset 3px 0 0 #ff8f00; }
.notif-card.tourney.is-unread { border-color:rgba(255,215,0,.45); box-shadow:inset 3px 0 0 #ffd700; }
.notif-card.club.is-unread { border-color:rgba(255,193,7,.45); box-shadow:inset 3px 0 0 #ffc107; }
.notif-card.achieve.is-unread { border-color:rgba(255,215,0,.45); box-shadow:inset 3px 0 0 #ffd700; }
.notif-card.support.is-unread { border-color:rgba(26,107,82,.55); box-shadow:inset 3px 0 0 #1a6b52; }
.notif-icon {
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:0;
  color:#ffd700;
  background:linear-gradient(145deg, rgba(255,215,0,.14), rgba(0,0,0,.28));
  border:1px solid rgba(255,215,0,.25);
}
.notif-ico-svg {
  width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
}
.notif-ico-svg svg { width:20px; height:20px; fill:currentColor; }
.notif-card.friend .notif-icon { color:#8fd4b8; background:linear-gradient(145deg, rgba(26,107,82,.28), rgba(0,0,0,.28)); border-color:rgba(143,212,184,.35); }
.notif-card.invite .notif-icon { color:#8fd4b8; background:linear-gradient(145deg, rgba(143,212,184,.2), rgba(0,0,0,.28)); border-color:rgba(143,212,184,.3); }
.notif-card.reward .notif-icon { color:#ff8f00; background:linear-gradient(145deg, rgba(255,140,0,.22), rgba(0,0,0,.28)); border-color:rgba(255,140,0,.35); }
.notif-card.club .notif-icon { color:#ffc107; background:linear-gradient(145deg, rgba(255,193,7,.22), rgba(0,0,0,.28)); border-color:rgba(255,193,7,.35); }
.notif-card.achieve .notif-icon { color:#ffe082; background:linear-gradient(145deg, rgba(255,215,0,.2), rgba(0,0,0,.28)); border-color:rgba(255,215,0,.35); }
.notif-card.support .notif-icon { color:#8fd4b8; background:linear-gradient(145deg, rgba(26,107,82,.28), rgba(0,0,0,.28)); border-color:rgba(26,107,82,.4); }
.notif-body { flex:1; min-width:0; }
.notif-top { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.notif-type {
  font-size:10px; font-weight:800; color:#ffd700;
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.25);
  border-radius:999px; padding:2px 7px;
}
.notif-card.friend .notif-type { color:#8fd4b8; background:rgba(26,107,82,.15); border-color:rgba(143,212,184,.35); }
.notif-card.invite .notif-type { color:#8fd4b8; background:rgba(143,212,184,.12); border-color:rgba(143,212,184,.3); }
.notif-card.reward .notif-type { color:#ff8f00; background:rgba(255,140,0,.12); border-color:rgba(255,140,0,.3); }
.notif-card.club .notif-type { color:#ffc107; background:rgba(255,193,7,.12); border-color:rgba(255,193,7,.35); }
.notif-card.achieve .notif-type { color:#ffe082; background:rgba(255,215,0,.12); border-color:rgba(255,215,0,.35); }
.notif-card.support .notif-type { color:#8fd4b8; background:rgba(26,107,82,.15); border-color:rgba(26,107,82,.4); }
.notif-time { margin-left:auto; font-size:10px; color:rgba(255,255,255,.35); white-space:nowrap; }
.notif-dot {
  width:8px; height:8px; border-radius:50%;
  background:#ff6f00; box-shadow:0 0 6px rgba(255,111,0,.5);
}
.notif-title { font-weight:800; font-size:13px; color:#fff; line-height:1.3; }
.notif-msg { margin-top:3px; font-size:12px; color:rgba(255,255,255,.55); line-height:1.4; }
.notif-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.notif-btn {
  border:none; border-radius:10px; padding:6px 10px;
  font-size:11px; font-weight:800; cursor:pointer;
}
.notif-btn.primary {
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  border:1px solid rgba(255,215,0,.25);
}
.notif-btn.accept {
  background:linear-gradient(135deg,#8fd4b8,#145c45); color:#fff;
}
.notif-btn.ghost {
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.12);
}
.notif-empty {
  text-align:center; padding:28px 16px; border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,215,0,.22);
}
.notif-empty-icon {
  width:44px; height:44px; margin:0 auto 10px;
  border-radius:12px; display:grid; place-items:center;
  font-size:0; color:#1a1208;
  background:linear-gradient(145deg,#ffd700,#f0b400);
  box-shadow:0 4px 14px rgba(255,215,0,.25);
}
.notif-empty-icon svg { width:20px; height:20px; fill:currentColor; display:block; }
.notif-empty-title { font-weight:800; color:#fff; font-size:14px; }
.notif-empty-sub { margin-top:4px; font-size:12px; color:rgba(255,255,255,.5); }
.notif-empty-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }

/* Günlük görevler (meta-body) */
.mission-loading, .achieve-loading { text-align:center; opacity:.55; padding:18px 8px; font-size:13px; }
.mission-error, .achieve-error {
  color:#ffab91; text-align:center; padding:10px 12px; font-size:13px;
  background:rgba(191,106,74,.12); border:1px solid rgba(191,106,74,.28); border-radius:12px;
}
.mission-empty, .achieve-empty {
  text-align:center; padding:22px 12px; border-radius:14px;
  background:rgba(8,18,32,.45); border:1px dashed rgba(255,215,0,.18);
}
.mission-empty-ico, .achieve-empty-ico {
  width:44px; height:44px; margin:0 auto 10px; border-radius:12px;
  display:grid; place-items:center; color:rgba(255,215,0,.75);
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.22);
}
.mission-empty-ico svg, .achieve-empty-ico svg { width:22px; height:22px; fill:currentColor; display:block; }
.mission-empty-title, .achieve-empty-title { font-weight:800; color:#fff; font-size:14px; }
.mission-empty-sub, .achieve-empty-sub { margin-top:4px; font-size:12px; color:rgba(255,255,255,.5); }
.mission-summary { margin-bottom:12px; }
.mission-summary-top {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
  font-size:12px; color:rgba(255,255,255,.55);
}
.mission-summary-pct { font-weight:800; color:#ffd700; font-variant-numeric:tabular-nums; }
.mission-summary-bar, .achieve-summary-bar {
  height:5px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden;
}
.mission-summary-fill, .achieve-summary-fill {
  height:100%; background:linear-gradient(90deg,#ffd700,#f0b400); border-radius:999px;
  box-shadow:0 0 8px rgba(255,215,0,.3);
}
.mission-list, .achieve-list { display:flex; flex-direction:column; gap:8px; }
.mission-card {
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border-radius:14px;
  background:linear-gradient(160deg, rgba(18,36,58,.88), rgba(8,18,32,.94));
  border:1px solid rgba(255,215,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.mission-card:hover { border-color:rgba(255,215,0,.28); transform:translateY(-1px); }
.mission-card.is-done {
  background:linear-gradient(90deg,rgba(26,107,82,.16),rgba(18,36,58,.55));
  border-color:rgba(143,212,184,.4);
  box-shadow:0 0 12px rgba(26,107,82,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.mission-icon {
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0; color:#1a1208;
  background:linear-gradient(145deg,#ffd700,#f0b400);
  border:none; box-shadow:0 4px 12px rgba(255,215,0,.2);
}
.mission-icon svg { width:18px; height:18px; fill:currentColor; }
.mission-card.is-done .mission-icon {
  color:#fff; background:linear-gradient(145deg,#8fd4b8,#145c45);
  box-shadow:0 4px 12px rgba(20,92,69,.25);
}
.mission-body { flex:1; min-width:0; }
.mission-title-row { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.mission-title { font-weight:800; font-size:13px; color:#fff8e7; }
.mission-card.is-done .mission-title { color:#a8e0c8; }
.mission-reward {
  font-size:11px; font-weight:800; color:#ffd700; white-space:nowrap;
  padding:3px 8px; border-radius:999px;
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.25);
}
.mission-card.is-done .mission-reward {
  color:#8fd4b8; background:rgba(143,212,184,.12); border-color:rgba(143,212,184,.3);
}
.mission-desc { margin-top:3px; font-size:11px; color:rgba(255,255,255,.45); line-height:1.35; }
.mission-bar {
  margin-top:8px; height:5px; border-radius:999px;
  background:rgba(255,255,255,.1); overflow:hidden;
}
.mission-fill {
  height:100%; background:linear-gradient(90deg,#ffd700,#f0b400); border-radius:999px;
}
.mission-card.is-done .mission-fill { background:linear-gradient(90deg,#8fd4b8,#1a6b52); }
.mission-prog {
  margin-top:4px; font-size:11px; color:rgba(255,255,255,.4);
  font-variant-numeric:tabular-nums;
}
.mission-bonus {
  margin-top:12px; text-align:center; padding:12px; border-radius:14px;
  font-size:12px; color:rgba(255,255,255,.55);
  background:linear-gradient(160deg, rgba(18,36,58,.8), rgba(8,18,32,.9));
  border:1px solid rgba(255,215,0,.12);
}
.mission-bonus.ready {
  background:linear-gradient(145deg,rgba(255,152,0,.14),rgba(18,36,58,.55));
  border-color:rgba(255,152,0,.45); color:#fff;
  box-shadow:0 0 16px rgba(255,152,0,.12);
  animation:missionBonusPulse 2s ease-in-out infinite;
}
@keyframes missionBonusPulse {
  0%, 100% { box-shadow:0 0 12px rgba(255,152,0,.1); }
  50% { box-shadow:0 0 22px rgba(255,152,0,.22); }
}
.mission-bonus.claimed { color:#8fd4b8; border-color:rgba(143,212,184,.25); }
.mission-btn {
  margin-top:8px; border:none; border-radius:12px; padding:11px 18px;
  font-size:13px; font-weight:800; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  border:1px solid rgba(255,215,0,.25);
  box-shadow:0 6px 16px rgba(230,81,0,.28);
}

/* Başarımlar */
.achieve-summary {
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:rgba(255,255,255,.55); margin-bottom:6px;
}
.achieve-summary-pct { font-weight:800; color:#ffd700; }
.achieve-summary-bar { margin-bottom:12px; }
.achieve-card {
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border-radius:14px;
  background:linear-gradient(160deg, rgba(18,36,58,.88), rgba(8,18,32,.94));
  border:1px solid rgba(255,215,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.achieve-card:hover { border-color:rgba(255,215,0,.28); transform:translateY(-1px); }
.achieve-card.is-unlocked {
  background:linear-gradient(145deg, rgba(255,215,0,.12), rgba(18,36,58,.7));
  border-color:rgba(255,215,0,.4);
  box-shadow:0 0 14px rgba(255,215,0,.1), inset 0 1px 0 rgba(255,255,255,.05);
}
.achieve-card.is-locked { opacity:.78; }
.achieve-icon {
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0; color:#ffd700;
  background:linear-gradient(145deg, rgba(255,215,0,.14), rgba(8,18,32,.55));
  border:1px solid rgba(255,215,0,.22);
}
.achieve-icon svg { width:20px; height:20px; fill:currentColor; display:block; }
.achieve-card.is-unlocked .achieve-icon {
  background:linear-gradient(145deg,#ffd700,#f0b400); color:#1a1208;
  box-shadow:0 4px 12px rgba(255,215,0,.25);
}
.achieve-card.is-locked .achieve-icon { color:rgba(255,255,255,.35); }
.achieve-body { flex:1; min-width:0; }
.achieve-title-row { display:flex; justify-content:space-between; gap:8px; }
.achieve-title { font-weight:800; font-size:13px; color:#fff8e7; }
.achieve-badge { font-size:11px; font-weight:800; color:#ffd700; white-space:nowrap; }
.achieve-desc { margin-top:3px; font-size:11px; color:rgba(255,255,255,.45); }
.achieve-bar {
  margin-top:8px; height:5px; border-radius:3px;
  background:rgba(255,255,255,.1); overflow:hidden;
}
.achieve-fill { height:100%; background:linear-gradient(90deg,#1a6b52,#8fd4b8); border-radius:3px; }
.achieve-fill.gold { background:linear-gradient(90deg,#ffd700,#ffaa00); }
.achieve-prog { margin-top:3px; font-size:10px; color:rgba(255,255,255,.4); }

/* Profil / kumbara (meta-body) */
.profile-loading { text-align:center; opacity:.55; padding:18px 8px; font-size:13px; }
.profile-error {
  color:#ffab91; text-align:center; padding:10px 12px; font-size:13px;
  background:rgba(191,106,74,.12); border:1px solid rgba(191,106,74,.28); border-radius:12px;
}
.profile-hero {
  display:flex; gap:12px; align-items:center; margin-bottom:14px;
  padding:14px; border-radius:16px;
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(255,215,0,.14), transparent 55%),
    linear-gradient(160deg, rgba(18,36,58,.92), rgba(8,18,32,.96));
  border:1px solid rgba(255,215,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.28);
}
.profile-avatar {
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:22px; color:#1a1208;
  background:linear-gradient(145deg,#ffd700,#f0b400);
  box-shadow:0 6px 16px rgba(255,215,0,.28), 0 0 20px rgba(255,215,0,.12);
  border:none;
}
.profile-name { font-weight:800; font-size:18px; color:#fff8e7; line-height:1.2; }
.profile-rank {
  display:inline-block; margin-top:5px; font-size:11px; font-weight:800;
  padding:3px 9px; border-radius:999px;
  background:rgba(255,215,0,.12); color:#ffd700; border:1px solid rgba(255,215,0,.3);
}
.profile-rank.diamond { color:#8fd4b8; border-color:rgba(143,212,184,.4); background:rgba(26,107,82,.16); }
.profile-rank.plat { color:#ffe082; border-color:rgba(255,224,130,.4); background:rgba(255,215,0,.1); }
.profile-rank.legend { color:#ffb74d; border-color:rgba(255,152,0,.4); background:rgba(255,152,0,.12); }
.profile-rank.silver { color:#cfd8dc; border-color:rgba(207,216,220,.35); background:rgba(207,216,220,.1); }
.profile-rank.bronze { color:#cd7f32; border-color:rgba(205,127,50,.4); background:rgba(205,127,50,.12); }
.profile-peak { margin-top:5px; font-size:11px; color:rgba(255,255,255,.45); }
.profile-level {
  margin-bottom:12px; padding:12px; border-radius:14px;
  background:linear-gradient(160deg, rgba(18,36,58,.85), rgba(8,18,32,.92));
  border:1px solid rgba(255,215,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.profile-level-top {
  display:flex; justify-content:space-between; gap:8px; font-size:12px;
  color:rgba(255,255,255,.7); margin-bottom:6px; font-weight:700;
}
.profile-xp { color:#ffd700; font-size:11px; font-variant-numeric:tabular-nums; }
.profile-level-bar {
  height:5px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden;
}
.profile-level-fill {
  height:100%; background:linear-gradient(90deg,#ffd700,#f0b400); border-radius:999px;
  box-shadow:0 0 8px rgba(255,215,0,.35);
}
.profile-chips {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:12px; padding:14px; border-radius:14px;
  background:linear-gradient(90deg,rgba(255,215,0,.12),rgba(255,255,255,.03));
  border:1px solid rgba(255,215,0,.32);
}
.profile-chips-label { font-size:11px; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.profile-chips-val { font-size:22px; font-weight:800; color:#ffd700; font-variant-numeric:tabular-nums; }
.profile-btn {
  border:1px solid rgba(255,215,0,.25); border-radius:11px; padding:9px 14px; cursor:pointer;
  font-size:12px; font-weight:800; font-family:inherit;
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  box-shadow:0 4px 12px rgba(230,81,0,.25);
}
.profile-btn.block { width:100%; margin-top:10px; padding:11px; }
.profile-stats {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px; margin-bottom:12px;
}
.profile-stat {
  text-align:center; padding:10px 6px; border-radius:12px;
  background:linear-gradient(160deg, rgba(18,36,58,.85), rgba(8,18,32,.92));
  border:1px solid rgba(255,215,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .15s, transform .15s;
}
.profile-stat:hover { border-color:rgba(255,215,0,.28); transform:translateY(-1px); }
.profile-stat-val { font-weight:800; font-size:14px; color:#fff8e7; font-variant-numeric:tabular-nums; }
.profile-stat-label { margin-top:2px; font-size:10px; color:rgba(255,255,255,.45); }
.profile-links { display:flex; flex-direction:column; gap:6px; }
.profile-link {
  border:1px solid rgba(255,215,0,.12); background:linear-gradient(160deg, rgba(18,36,58,.8), rgba(8,18,32,.9));
  color:#fff8e7; border-radius:12px; padding:11px 12px; font-size:12px; font-weight:700;
  cursor:pointer; text-align:left; font-family:inherit;
  transition:border-color .15s, background .15s, transform .15s;
}
.profile-link:hover { border-color:rgba(255,215,0,.32); background:linear-gradient(160deg, rgba(22,44,68,.9), rgba(10,22,38,.95)); transform:translateY(-1px); }
.profile-link.ghost {
  margin-top:8px; text-align:center; background:transparent; color:rgba(255,255,255,.55);
}
.piggy-card {
  text-align:center; padding:18px 14px; border-radius:16px;
  background:linear-gradient(160deg, rgba(18,36,58,.88), rgba(8,18,32,.94));
  border:1px solid rgba(255,152,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.piggy-card.is-full {
  border-color:rgba(255,215,0,.5);
  background:linear-gradient(165deg,rgba(255,215,0,.14),rgba(18,36,58,.55));
  box-shadow:0 0 18px rgba(255,215,0,.12);
}
.piggy-card.is-broken { opacity:.85; border-color:rgba(255,255,255,.12); }
.piggy-amount {
  font-size:22px; font-weight:800; color:#ffd700; margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.piggy-bar {
  height:8px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; margin-bottom:10px;
}
.piggy-fill { height:100%; background:linear-gradient(90deg,#ff9800,#ffd700); border-radius:999px; }
.piggy-card.is-full .piggy-fill { background:linear-gradient(90deg,#ffd700,#f0b400); }
.piggy-meta { font-size:12px; color:rgba(255,255,255,.55); margin-bottom:4px; }

/* Hesap / gizlilik (meta-body) */
.account-loading { text-align:center; opacity:.55; padding:18px 8px; font-size:13px; }
.account-error {
  color:#ffab91; text-align:center; padding:10px 12px; font-size:13px;
  background:rgba(191,106,74,.12); border:1px solid rgba(191,106,74,.28); border-radius:12px;
}
.account-card {
  margin-bottom:12px; padding:14px; border-radius:16px;
  background:linear-gradient(160deg, rgba(18,36,58,.9), rgba(8,18,32,.95));
  border:1px solid rgba(255,215,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .15s, transform .15s;
}
.account-card:hover { border-color:rgba(255,215,0,.28); }
.account-card.invite {
  background:linear-gradient(145deg, rgba(255,111,0,.14), rgba(8,18,32,.9));
  border-color:rgba(255,111,0,.4);
}
.account-card.privacy {
  background:linear-gradient(145deg, rgba(26,107,82,.14), rgba(8,18,32,.9));
  border-color:rgba(143,212,184,.32);
}
.account-card.danger {
  background:linear-gradient(145deg, rgba(191,106,74,.16), rgba(8,18,32,.9));
  border-color:rgba(191,106,74,.4);
}
.account-card-head {
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.account-card-icon {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:0;
  color:#ffd700;
  background:rgba(255,215,0,.12); border:1px solid rgba(255,215,0,.3);
}
.account-card-icon svg { width:18px; height:18px; fill:currentColor; }
.account-card.invite .account-card-icon {
  color:#ff8f00;
  background:rgba(255,111,0,.18); border-color:rgba(255,111,0,.35);
}
.account-card.privacy .account-card-icon {
  color:#8fd4b8;
  background:rgba(26,107,82,.18); border-color:rgba(143,212,184,.35);
}
.account-card.danger .account-card-icon {
  color:#ffab91;
  background:rgba(191,106,74,.18); border-color:rgba(191,106,74,.4);
}
.account-card-title { font-weight:800; font-size:14px; color:#fff8e7; }
.account-card.danger .account-card-title { color:#ffab91; }
.account-card-sub { font-size:12px; color:rgba(255,255,255,.55); line-height:1.4; margin-bottom:10px; }
.account-code-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.account-code {
  padding:8px 12px; border-radius:10px; font-size:14px; font-weight:800;
  letter-spacing:1.5px; color:#ffd700;
  background:rgba(8,18,32,.65); border:1px solid rgba(255,215,0,.3);
}
.account-btn {
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07);
  color:#fff; border-radius:10px; padding:7px 12px; font-size:11px; font-weight:700;
  cursor:pointer;
}
.account-btn.gold {
  border:none; background:linear-gradient(135deg,#c9a227,#ffd700); color:#1a1408;
}
.account-btn.danger {
  border-color:rgba(191,106,74,.55); background:linear-gradient(135deg,#bf6a4a,#8a3d28); color:#fff;
}
.account-list {
  margin:0 0 10px 16px; padding:0; font-size:12px; color:rgba(255,255,255,.65);
}
.account-list li { margin-bottom:3px; }
.account-meta { font-size:11px; color:rgba(255,255,255,.45); margin-bottom:10px; }
.account-meta a { color:#ffd700; }
.account-actions { display:flex; flex-wrap:wrap; gap:8px; }
.account-export-pre {
  max-height:220px; overflow:auto; font-size:11px; line-height:1.35;
  background:rgba(8,18,32,.65); padding:12px; border-radius:12px;
  white-space:pre-wrap; border:1px solid rgba(255,215,0,.12);
  color:rgba(255,255,255,.75);
}

/* Anadolu form sheets (kulüp / hesap / ban itiraz) */
.an-form { display:flex; flex-direction:column; gap:10px; padding:4px 0 2px; }
.an-form-label {
  font-size:11px; font-weight:800; letter-spacing:.04em;
  color:rgba(255,215,0,.85); text-transform:uppercase;
}
.an-form-hint {
  font-size:12px; line-height:1.45; color:rgba(255,255,255,.55);
  margin-bottom:2px;
}
.an-form-hint b { color:#ffd700; font-weight:800; }
.an-form-input {
  width:100%; box-sizing:border-box;
  border:1px solid rgba(255,215,0,.22);
  background:rgba(8,18,32,.7); color:#fff8e7;
  border-radius:12px; padding:11px 13px;
  font-size:14px; font-family:inherit; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.an-form-input:focus { border-color:rgba(255,215,0,.55); box-shadow:0 0 0 2px rgba(255,215,0,.12); }
.an-form-input::placeholder { color:rgba(255,255,255,.35); }
.an-form-textarea { min-height:96px; resize:vertical; line-height:1.4; }
.an-form-actions {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;
  margin-top:6px;
}

/* Kulüpler / savaşlar / rozetler */
.club-loading { text-align:center; opacity:.55; padding:18px 8px; font-size:13px; }
.club-error {
  color:#ffab91; text-align:center; padding:10px 12px; font-size:13px;
  background:rgba(191,106,74,.12); border:1px solid rgba(191,106,74,.28); border-radius:12px;
}
.club-toolbar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:12px; }
.club-count { margin-left:auto; font-size:12px; color:rgba(255,255,255,.5); }
.club-chip {
  border:1px solid rgba(255,215,0,.14); background:rgba(12,28,48,.65);
  color:rgba(255,255,255,.8); border-radius:999px; padding:6px 11px;
  font-size:11px; font-weight:800; cursor:pointer; font-family:inherit;
  transition:border-color .15s, background .15s;
}
.club-chip:hover { border-color:rgba(255,215,0,.3); }
.club-chip.primary {
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  border-color:rgba(255,215,0,.25); box-shadow:0 4px 12px rgba(230,81,0,.22);
}
.club-chip.war {
  background:rgba(255,152,0,.14); border-color:rgba(255,152,0,.4); color:#ffb74d;
}
.club-chip.ghost { opacity:.75; }
.club-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.club-tab {
  border:1px solid rgba(255,215,0,.12); background:rgba(12,28,48,.65);
  color:rgba(255,255,255,.65); border-radius:999px; padding:6px 11px;
  font-size:11px; font-weight:800; cursor:pointer; font-family:inherit;
}
.club-tab.active {
  background:linear-gradient(145deg,#ffd700,#f0b400); border-color:transparent; color:#1a1208;
}
.club-tab.ghost { opacity:.7; }
.club-war-note { font-size:11px; color:rgba(255,255,255,.45); margin-bottom:10px; }
.club-list { display:flex; flex-direction:column; gap:8px; }
.club-card {
  display:flex; align-items:center; gap:10px;
  padding:12px; border-radius:14px;
  background:linear-gradient(160deg, rgba(18,36,58,.88), rgba(8,18,32,.94));
  border:1px solid rgba(255,215,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .15s, transform .15s;
}
.club-card:hover { border-color:rgba(255,215,0,.28); transform:translateY(-1px); }
.club-card.is-mine {
  background:linear-gradient(90deg,rgba(255,215,0,.1),rgba(18,36,58,.55));
  border-color:rgba(255,215,0,.4);
  box-shadow:0 0 14px rgba(255,215,0,.1), inset 0 1px 0 rgba(255,255,255,.05);
}
.club-card.rank .club-rank {
  width:36px; font-weight:800; color:#ffd700; font-size:14px; flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.club-avatar {
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#1a1208;
  background:linear-gradient(145deg,#ffd700,#f0b400);
  box-shadow:0 4px 12px rgba(255,215,0,.2);
}
.club-body { flex:1; min-width:0; }
.club-name { font-weight:800; font-size:13px; color:#fff; }
.club-you {
  display:inline-block; margin-left:4px; font-size:9px; font-weight:800;
  color:#8fd4b8; background:rgba(143,212,184,.15); border:1px solid rgba(143,212,184,.3);
  border-radius:6px; padding:1px 5px; vertical-align:middle;
}
.club-meta { margin-top:2px; font-size:11px; color:rgba(255,255,255,.45); }
.club-actions { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; flex-shrink:0; }
.club-btn {
  border:none; border-radius:10px; padding:7px 11px;
  font-size:11px; font-weight:800; cursor:pointer; font-family:inherit;
}
.club-btn.join {
  background:linear-gradient(135deg,#8fd4b8,#145c45); color:#fff;
}
.club-btn.war {
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  border:1px solid rgba(255,215,0,.25);
}
.club-btn.ghost {
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.12);
}
.club-empty {
  text-align:center; padding:22px 12px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px dashed rgba(255,215,0,.2);
}
.club-empty-ico {
  width:44px; height:44px; margin:0 auto 10px; border-radius:50%;
  display:grid; place-items:center;
  color:#ffd700; background:rgba(255,215,0,.12);
  border:1px solid rgba(255,215,0,.28);
}
.club-empty-ico svg { width:22px; height:22px; fill:currentColor; display:block; }
.club-empty.compact { padding:12px; opacity:.55; font-size:12px; }
.club-empty.compact .club-empty-ico { display:none; }
.club-empty-title { font-weight:800; color:#fff; font-size:14px; }
.club-empty-sub { margin-top:4px; font-size:12px; color:rgba(255,255,255,.5); }
.club-war-card {
  padding:12px; border-radius:14px;
  background:linear-gradient(160deg, rgba(18,36,58,.88), rgba(8,18,32,.94));
  border:1px solid rgba(255,215,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.club-war-card:hover { border-color:rgba(255,215,0,.28); transform:translateY(-1px); }
.club-war-card.active {
  border-color:rgba(255,152,0,.5);
  background:linear-gradient(90deg,rgba(255,152,0,.14),rgba(18,36,58,.55));
  box-shadow:0 0 14px rgba(255,152,0,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.club-war-card.pending {
  border-color:rgba(255,215,0,.4);
  background:linear-gradient(90deg,rgba(255,215,0,.12),rgba(18,36,58,.55));
  box-shadow:0 0 12px rgba(255,215,0,.1);
}
.club-war-card.done { opacity:.85; }
.club-war-vs { font-weight:800; font-size:13px; color:#fff8e7; }
.club-war-vs span { color:rgba(255,255,255,.4); margin:0 4px; font-weight:600; }
.club-war-score { margin-top:4px; font-size:12px; color:#ffd700; font-weight:700; font-variant-numeric:tabular-nums; }
.club-badge-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.club-badge-card {
  text-align:center; padding:12px 8px; border-radius:14px;
  background:linear-gradient(160deg, rgba(18,36,58,.85), rgba(8,18,32,.92));
  border:1px solid rgba(255,215,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .15s, transform .15s;
}
.club-badge-card:hover { border-color:rgba(255,215,0,.28); transform:translateY(-1px); }
.club-badge-card.is-unlocked {
  background:linear-gradient(145deg, rgba(255,215,0,.14), rgba(18,36,58,.55));
  border-color:rgba(255,215,0,.4);
  box-shadow:0 0 12px rgba(255,215,0,.1);
}
.club-badge-card.is-locked { opacity:.45; }
.club-badge-ico,
.club-badge-emoji {
  width:36px; height:36px; margin:0 auto 6px; border-radius:50%;
  display:grid; place-items:center;
  font-size:0; color:#1a1208;
  background:linear-gradient(145deg,#ffd700,#f0b400);
}
.club-badge-ico svg { width:16px; height:16px; fill:currentColor; }
.club-badge-card.is-locked .club-badge-ico,
.club-badge-card.is-locked .club-badge-emoji {
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.4);
}
.club-badge-card[data-badge="MEMBERS_10"] .club-badge-ico,
.club-badge-card[data-badge="MEMBERS_25"] .club-badge-ico {
  background:linear-gradient(145deg,#8fd4b8,#145c45); color:#062018;
}
.club-badge-card[data-badge="WEEKLY_GOAL"] .club-badge-ico {
  background:linear-gradient(145deg,#ff9800,#e65100); color:#1a0c00;
}
.club-badge-card[data-badge="TREASURY_100K"] .club-badge-ico,
.club-badge-card[data-badge="TREASURY_1M"] .club-badge-ico {
  background:linear-gradient(145deg,#ffe082,#ffb300); color:#1a1400;
}
.club-badge-card[data-badge="WAR_WINNER"] .club-badge-ico,
.club-badge-card[data-badge="WAR_SEASON_PODIUM"] .club-badge-ico {
  background:linear-gradient(145deg,#ff9800,#e65100); color:#fff;
}
.club-badge-card[data-badge="POINTS_10K"] .club-badge-ico,
.club-badge-card[data-badge="POINTS_100K"] .club-badge-ico {
  background:linear-gradient(145deg,#ffd54f,#f9a825); color:#1a1400;
}
.club-badge-label { font-weight:800; font-size:12px; color:#fff8e7; }
.club-badge-desc { margin-top:2px; font-size:10px; color:rgba(255,255,255,.45); }
@media (max-width:520px) {
  .club-badge-grid { grid-template-columns:1fr; }
}

/* Şans çarkı / destek / davet */
.wheel-loading, .sup-loading, .ref-loading { text-align:center; opacity:.55; padding:18px 8px; font-size:13px; }
.wheel-error, .sup-error, .ref-error {
  color:#ffab91; text-align:center; padding:10px 12px; font-size:13px;
  background:rgba(191,106,74,.12); border:1px solid rgba(191,106,74,.28); border-radius:12px;
}
.wheel-panel {
  padding:14px; border-radius:16px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,215,0,.12), transparent 60%),
    linear-gradient(160deg, rgba(18,36,58,.92), rgba(8,18,32,.96));
  border:1px solid rgba(255,215,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.wheel-panel.is-ready {
  border-color:rgba(255,215,0,.55);
  box-shadow:0 0 20px rgba(255,215,0,.16), inset 0 1px 0 rgba(255,255,255,.06);
  animation:wheelReadyPulse 2.2s ease-in-out infinite;
}
@keyframes wheelReadyPulse {
  0%, 100% { box-shadow:0 0 14px rgba(255,215,0,.1), inset 0 1px 0 rgba(255,255,255,.05); }
  50% { box-shadow:0 0 26px rgba(255,215,0,.22), inset 0 1px 0 rgba(255,255,255,.08); }
}
.wheel-status { text-align:center; font-weight:800; font-size:13px; color:#ffd700; margin-bottom:12px; text-shadow:0 0 12px rgba(255,215,0,.25); }
.wheel-seg-list { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; max-height:220px; overflow:auto; }
.wheel-seg {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:8px 10px; border-radius:12px;
  background:rgba(8,18,32,.55); border:1px solid rgba(255,215,0,.1);
  transition:border-color .15s, background .15s;
}
.wheel-seg:hover { border-color:rgba(255,215,0,.28); background:rgba(18,36,58,.55); }
.wheel-seg-label { font-size:12px; font-weight:700; color:#fff8e7; }
.wheel-seg-prize { font-size:12px; font-weight:800; color:#ffd700; }
.wheel-empty { text-align:center; opacity:.5; padding:12px; font-size:12px; }
.wheel-spin-btn {
  width:100%; border:1px solid rgba(255,215,0,.25); border-radius:12px; padding:12px;
  font-size:14px; font-weight:800; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  box-shadow:0 8px 20px rgba(230,81,0,.28);
  transition:transform .15s, box-shadow .15s;
}
.wheel-spin-btn:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(230,81,0,.38); }
.wheel-spin-btn:disabled {
  opacity:.45; cursor:not-allowed; box-shadow:none;
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.55);
}

.sup-toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:12px; flex-wrap:wrap;
}
.sup-count { font-size:12px; color:rgba(255,255,255,.5); }
.sup-count b { color:#ffd700; }
.sup-list { display:flex; flex-direction:column; gap:8px; }
.sup-card {
  display:flex; align-items:center; gap:10px;
  padding:12px; border-radius:14px;
  background:linear-gradient(160deg, rgba(18,36,58,.88), rgba(8,18,32,.94));
  border:1px solid rgba(255,215,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .15s, transform .15s;
}
.sup-card:hover { border-color:rgba(255,215,0,.28); transform:translateY(-1px); }
.sup-card.status-open {
  border-color:rgba(255,215,0,.4);
  background:linear-gradient(90deg,rgba(255,215,0,.12),rgba(18,36,58,.5));
}
.sup-card.status-in_progress {
  border-color:rgba(255,143,0,.4);
  background:linear-gradient(90deg,rgba(255,143,0,.12),rgba(18,36,58,.5));
}
.sup-card.status-resolved {
  border-color:rgba(143,212,184,.4);
  background:linear-gradient(90deg,rgba(143,212,184,.12),rgba(18,36,58,.5));
}
.sup-card.status-closed { opacity:.75; }
.sup-icon {
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#1a1208;
  background:linear-gradient(145deg,#ffd700,#f0b400);
}
.sup-card.status-open .sup-icon { background:linear-gradient(145deg,#ffd700,#f0b400); color:#1a1208; }
.sup-card.status-in_progress .sup-icon {
  background:linear-gradient(145deg,#ff9800,#e65100); color:#fff;
}
.sup-card.status-resolved .sup-icon {
  background:linear-gradient(145deg,#8fd4b8,#145c45); color:#fff;
}
.sup-card.status-closed .sup-icon {
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.5);
}
.sup-body { flex:1; min-width:0; }
.sup-subject { font-weight:800; font-size:13px; color:#fff8e7; }
.sup-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; font-size:11px; color:rgba(255,255,255,.45); }
.sup-pill {
  font-size:10px; font-weight:800; color:#ffd700;
  background:rgba(255,215,0,.12); border:1px solid rgba(255,215,0,.28);
  border-radius:999px; padding:2px 7px;
}
.sup-pill.open { color:#ffd700; }
.sup-pill.in_progress { color:#ffb74d; background:rgba(255,143,0,.14); border-color:rgba(255,143,0,.35); }
.sup-pill.resolved { color:#8fd4b8; background:rgba(143,212,184,.12); border-color:rgba(143,212,184,.3); }
.sup-pill.closed { color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.sup-btn {
  border:none; border-radius:10px; padding:8px 12px;
  font-size:12px; font-weight:800; cursor:pointer;
}
.sup-btn.primary {
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  border:1px solid rgba(255,215,0,.25);
}
.sup-btn.ghost {
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.12);
}
.sup-empty {
  text-align:center; padding:28px 16px; border-radius:16px;
  background:rgba(8,18,32,.45);
  border:1px dashed rgba(255,215,0,.22);
}
.sup-empty.compact { padding:10px; opacity:.55; font-size:12px; }
.sup-empty-icon {
  width:44px; height:44px; margin:0 auto 10px;
  border-radius:12px; display:grid; place-items:center;
  font-size:0; color:#1a1208;
  background:linear-gradient(145deg,#ffd700,#f0b400);
  box-shadow:0 4px 14px rgba(255,215,0,.25);
}
.sup-empty-icon svg { width:20px; height:20px; fill:currentColor; display:block; }
.sup-empty-title { font-weight:800; color:#fff; font-size:14px; }
.sup-empty-sub { margin-top:4px; font-size:12px; color:rgba(255,255,255,.5); }
.sup-form { display:flex; flex-direction:column; gap:8px; }
.sup-form.reply { margin-top:12px; }
.sup-input {
  padding:10px 12px; border-radius:12px; font-size:13px;
  background:rgba(0,0,0,.28); color:#fff; border:1px solid rgba(255,255,255,.12);
  resize:vertical;
}
.sup-input:focus { outline:none; border-color:rgba(255,215,0,.45); }
.sup-form-actions { display:flex; gap:8px; flex-wrap:wrap; }
.sup-detail-head { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.sup-meta-inline { font-size:12px; color:rgba(255,255,255,.45); }
.sup-detail-subject { font-weight:800; font-size:15px; color:#fff; margin-bottom:12px; }
.sup-thread { display:flex; flex-direction:column; gap:8px; }
.sup-msg {
  padding:10px 12px; border-radius:14px; max-width:88%;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.sup-msg.staff {
  align-self:flex-start;
  border-color:rgba(255,215,0,.3);
  background:linear-gradient(90deg,rgba(255,215,0,.1),rgba(255,255,255,.03));
}
.sup-msg.you {
  align-self:flex-end;
  border-color:rgba(143,212,184,.35);
  background:linear-gradient(90deg,rgba(26,107,82,.12),rgba(255,255,255,.03));
}
.sup-msg-who { font-size:11px; font-weight:800; margin-bottom:4px; }
.sup-msg.staff .sup-msg-who { color:#ffd700; }
.sup-msg.you .sup-msg-who { color:#8fd4b8; }
.sup-msg-body { font-size:13px; color:rgba(255,255,255,.85); white-space:pre-wrap; line-height:1.4; }

.ref-card {
  padding:16px; border-radius:16px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,215,0,.14), transparent 60%),
    linear-gradient(160deg, rgba(18,36,58,.92), rgba(8,18,32,.96));
  border:1px solid rgba(255,215,0,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.28);
}
.ref-blurb { font-size:12px; color:rgba(255,255,255,.6); margin-bottom:12px; line-height:1.4; }
.ref-blurb b { color:#ffd700; }
.ref-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.ref-stat {
  text-align:center; padding:12px; border-radius:12px;
  background:linear-gradient(160deg, rgba(18,36,58,.8), rgba(8,18,32,.9));
  border:1px solid rgba(255,215,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.ref-stat-val { font-weight:800; font-size:18px; color:#ffd700; }
.ref-stat-label { margin-top:2px; font-size:11px; color:rgba(255,255,255,.45); }
.ref-code-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.ref-code {
  padding:10px 14px; border-radius:12px; background:rgba(8,18,32,.7);
  color:#ffd700; letter-spacing:1px; font-size:15px; font-weight:700;
  border:1px solid rgba(255,215,0,.28);
}
.ref-btn {
  border:none; border-radius:10px; padding:8px 12px;
  font-size:12px; font-weight:800; cursor:pointer;
}
.ref-btn.primary { background:linear-gradient(135deg,#c9a227,#ffd700); color:#1a1408; }
.ref-btn.ghost {
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
.ref-hint { font-size:11px; color:rgba(255,255,255,.4); }

/* Season meta panel */
.season-loading { text-align:center; opacity:.55; padding:18px 8px; font-size:13px; }
.season-error {
  color:#ffab91; text-align:center; padding:10px 12px; font-size:13px;
  background:rgba(191,106,74,.12); border:1px solid rgba(191,106,74,.28); border-radius:12px;
}
.season-empty {
  text-align:center; padding:22px 12px;
  background:rgba(8,18,32,.45); border-radius:14px; border:1px dashed rgba(255,215,0,.2);
}
.season-empty-ico {
  width:44px; height:44px; margin:0 auto 10px; border-radius:12px;
  display:grid; place-items:center; color:rgba(255,215,0,.75);
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.22);
}
.season-empty-ico svg { width:22px; height:22px; fill:currentColor; display:block; }
.season-empty.compact { padding:14px; margin-top:4px; }
.season-empty.compact .season-empty-ico { display:none; }
.season-empty-title { font-weight:800; color:#fff; font-size:14px; }
.season-empty-sub { margin-top:4px; font-size:12px; color:rgba(255,255,255,.5); }
.season-hero {
  text-align:center; padding:16px 14px; margin-bottom:12px; border-radius:16px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,215,0,.16), transparent 60%),
    linear-gradient(160deg, rgba(18,36,58,.92), rgba(8,18,32,.96));
  border:1px solid rgba(255,215,0,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.28);
}
.season-hero-name { font-weight:800; font-size:20px; color:#ffd700; line-height:1.2; }
.season-hero-meta { margin-top:5px; font-size:12px; color:rgba(255,255,255,.5); }
.season-hero-timer {
  display:inline-block; margin-top:10px; font-weight:800; font-size:13px; color:#ffb74d;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,152,0,.12); border:1px solid rgba(255,152,0,.35);
  font-variant-numeric:tabular-nums;
}
.season-me {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px; margin-bottom:12px; border-radius:14px;
  background:linear-gradient(90deg,rgba(26,107,82,.16),rgba(18,36,58,.55));
  border:1px solid rgba(143,212,184,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.season-me-left { display:flex; align-items:center; gap:10px; min-width:0; }
.season-me-rank { font-weight:800; font-size:18px; color:#8fd4b8; min-width:40px; font-variant-numeric:tabular-nums; }
.season-me-label { font-size:12px; font-weight:700; color:rgba(255,255,255,.85); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.season-me-pill {
  font-size:9px; font-weight:800; color:#8fd4b8; padding:2px 6px; border-radius:6px;
  background:rgba(143,212,184,.18); border:1px solid rgba(143,212,184,.3);
}
.season-me-sub { margin-top:2px; font-size:11px; color:rgba(255,255,255,.5); }
.season-me-next { margin-top:2px; font-size:11px; color:#ffd700; }
.season-me-pts { text-align:right; flex-shrink:0; }
.season-me-pts-val { font-weight:800; font-size:16px; color:#ffd700; font-variant-numeric:tabular-nums; }
.season-me-pts-label { font-size:10px; color:rgba(255,255,255,.4); }
.season-rewards { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.season-reward {
  padding:5px 9px; border-radius:999px; font-size:11px; font-weight:700;
  background:rgba(12,28,48,.65); border:1px solid rgba(255,215,0,.12); color:rgba(255,255,255,.7);
}
.season-reward.locked { opacity:.5; }
.season-reward.unlocked {
  background:rgba(255,215,0,.14); border-color:rgba(255,215,0,.45); color:#ffd700;
}
.season-reward.next {
  background:rgba(255,152,0,.14); border-color:rgba(255,152,0,.45); color:#ffb74d;
}
.season-board-title {
  font-weight:800; font-size:11px; color:rgba(255,255,255,.5); margin-bottom:8px;
  text-transform:uppercase; letter-spacing:.05em;
}
.season-board { display:flex; flex-direction:column; gap:5px; }
.season-row {
  display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:11px;
  background:linear-gradient(160deg, rgba(18,36,58,.8), rgba(8,18,32,.9));
  border:1px solid rgba(255,215,0,.1);
  transition:border-color .15s;
}
.season-row:hover { border-color:rgba(255,215,0,.25); }
.season-row.is-top { border-color:rgba(255,215,0,.35); background:linear-gradient(90deg,rgba(255,215,0,.12),rgba(18,36,58,.55)); }
.season-row.is-me { border-color:rgba(143,212,184,.45); background:linear-gradient(90deg,rgba(26,107,82,.16),rgba(18,36,58,.55)); }
.season-row-rank { font-weight:800; color:#ffd700; font-size:13px; min-width:32px; font-variant-numeric:tabular-nums; }
.season-row.is-me .season-row-rank { color:#8fd4b8; }
.season-row-name { flex:1; font-size:13px; font-weight:700; color:#fff8e7; min-width:0; }
.season-row-score { font-size:12px; color:rgba(255,255,255,.65); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Login calendar (meta) */
.cal-summary {
  margin-bottom:12px; padding:10px 12px; border-radius:12px;
  font-size:12px; color:rgba(255,255,255,.6);
  background:linear-gradient(160deg, rgba(18,36,58,.85), rgba(8,18,32,.92));
  border:1px solid rgba(255,215,0,.14);
}
.cal-summary b { color:#ffd700; }
.cal-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:7px; margin-bottom:14px;
}
.cal-day {
  text-align:center; padding:10px 6px; border-radius:12px;
  background:linear-gradient(160deg, rgba(18,36,58,.8), rgba(8,18,32,.9));
  border:1px solid rgba(255,215,0,.1);
  font-size:11px; color:rgba(255,255,255,.55);
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.cal-day:hover { border-color:rgba(255,215,0,.25); }
.cal-day.claimed {
  background:rgba(26,107,82,.16); border-color:rgba(143,212,184,.4); color:#8fd4b8;
}
.cal-day.next {
  background:linear-gradient(145deg,rgba(255,215,0,.16),rgba(18,36,58,.55));
  border-color:rgba(255,215,0,.5); color:#ffd700;
  box-shadow:0 0 14px rgba(255,215,0,.15);
  animation:calNextPulse 2s ease-in-out infinite;
}
@keyframes calNextPulse {
  0%, 100% { box-shadow:0 0 10px rgba(255,215,0,.1); }
  50% { box-shadow:0 0 20px rgba(255,215,0,.22); }
}
.cal-day-num { font-weight:800; font-size:12px; margin-bottom:2px; }
.cal-day-amt { font-weight:800; font-variant-numeric:tabular-nums; }
.cal-claim {
  width:100%; border:1px solid rgba(255,215,0,.25); border-radius:12px; padding:12px;
  font-size:13px; font-weight:800; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  box-shadow:0 6px 16px rgba(230,81,0,.28);
}
.cal-claim:disabled {
  opacity:.45; cursor:not-allowed; box-shadow:none;
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.55);
}

.dr-panel {
  width:min(400px, 94%); max-height:min(88%, 580px);
  background:linear-gradient(165deg,rgba(18,32,58,.98),rgba(8,14,28,.98));
  border:1px solid rgba(255,215,0,.3);
  border-radius:20px; padding:20px 16px 14px;
  display:flex; flex-direction:column; align-items:center;
  box-shadow:0 24px 56px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
  animation:slideInUp .28s ease-out;
}
.dr-eyebrow {
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.42); text-align:center; margin-bottom:2px; width:100%;
}
.dr-header {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; margin-bottom:4px; gap:8px; flex-wrap:wrap;
}
.dr-header-right {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.dr-close-x {
  width:32px; height:32px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.75); display:inline-flex; align-items:center; justify-content:center;
  padding:0; line-height:0; flex-shrink:0;
}
.dr-close-x:hover { background:rgba(255,255,255,.14); color:#fff; }
.dr-close-x svg { width:16px; height:16px; fill:currentColor; display:block; }
.dr-title {
  font-size:24px; font-weight:700; color:#ffd700; margin:0; line-height:1.15;
}
.dr-streak {
  font-size:11px; font-weight:800; color:rgba(255,255,255,.55);
  padding:4px 10px; border-radius:999px;
  background:rgba(255,152,0,.14); border:1px solid rgba(255,152,0,.35);
}
.dr-streak span { color:#ffd700; }
.dr-subtitle {
  font-size:12px; color:rgba(255,255,255,.48); text-align:center;
  margin:0 0 14px; line-height:1.4; width:100%;
}
.dr-grid {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:5px; width:100%; margin-bottom:14px;
}
.dr-day {
  display:flex; flex-direction:column; align-items:center;
  padding:8px 2px; border-radius:11px;
  background:linear-gradient(160deg, rgba(18,36,58,.85), rgba(8,18,32,.92));
  border:1px solid rgba(255,215,0,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:background .2s, border-color .2s, box-shadow .2s, transform .15s; position:relative;
}
.dr-day:hover { border-color:rgba(255,215,0,.25); }
.dr-day .dr-day-label {
  font-size:9px; color:rgba(255,255,255,.35); font-weight:800;
  margin-bottom:3px; letter-spacing:.02em;
}
.dr-day .dr-day-icon {
  font-size:0; margin-bottom:2px; line-height:1;
  width:22px; height:22px; margin-left:auto; margin-right:auto;
  display:flex; align-items:center; justify-content:center;
  color:#ffd700;
}
.dr-day .dr-day-icon svg { width:18px; height:18px; fill:currentColor; display:block; }
.dr-day .dr-day-amount {
  font-size:11px; font-weight:800; color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums;
}
.dr-day .dr-day-check {
  position:absolute; top:-3px; right:-3px;
  width:14px; height:14px; border-radius:50%;
  background:#1a6b52; color:#fff;
  font-size:0; display:none;
  box-shadow:0 2px 6px rgba(26,107,82,.4);
  align-items:center; justify-content:center;
}
.dr-day .dr-day-check svg { width:10px; height:10px; fill:currentColor; display:block; }
.dr-day.claimed {
  background:linear-gradient(145deg,rgba(26,107,82,.16),rgba(18,36,58,.55));
  border-color:rgba(143,212,184,.4);
}
.dr-day.claimed .dr-day-check { display:flex; }
.dr-day.claimed .dr-day-amount { color:#8fd4b8; }
.dr-day.today { border-color:#ffd700; background:linear-gradient(145deg,rgba(255,215,0,.1),rgba(18,36,58,.55)); }
.dr-day.today .dr-day-amount { color:#ffd700; }
.dr-day.current {
  border-color:#ffd700; background:linear-gradient(145deg,rgba(255,215,0,.14),rgba(18,36,58,.55));
  box-shadow:0 0 0 1px rgba(255,215,0,.2), 0 6px 16px rgba(255,215,0,.18);
  animation:drCurrentPulse 2s ease-in-out infinite;
}
@keyframes drCurrentPulse {
  0%, 100% { box-shadow:0 0 0 1px rgba(255,215,0,.15), 0 4px 12px rgba(255,215,0,.12); }
  50% { box-shadow:0 0 0 1px rgba(255,215,0,.3), 0 8px 20px rgba(255,215,0,.22); }
}
.dr-day.current .dr-day-amount { color:#ffd700; }
.dr-day.locked { opacity:.4; }
.dr-day.big-bonus {
  border-color:rgba(255,152,0,.5); background:linear-gradient(145deg,rgba(255,111,0,.14),rgba(18,36,58,.55));
}
.dr-day.big-bonus .dr-day-amount { color:#ffb74d; font-size:12px; }
.dr-claim-area {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; width:100%; margin-bottom:10px;
}
.dr-claim-btn {
  width:100%; padding:12px 20px; border:none; border-radius:12px;
  background:linear-gradient(135deg,#ff9800,#e65100);
  color:#fff; font-size:14px; font-weight:800;
  cursor:pointer; transition:filter .15s, transform .15s;
  box-shadow:0 8px 20px rgba(230,81,0,.28);
  border:1px solid rgba(255,215,0,.25);
  font-family:inherit;
}
.dr-claim-btn:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-1px); }
.dr-claim-btn:disabled {
  opacity:.45; cursor:not-allowed; transform:none;
  background:rgba(255,255,255,.08); box-shadow:none; border-color:rgba(255,255,255,.1);
  color:rgba(255,255,255,.55);
}
.dr-timer { font-size:12px; color:rgba(255,255,255,.45); text-align:center; }
.dr-progress {
  width:100%; height:5px; background:rgba(255,255,255,.08);
  border-radius:999px; overflow:hidden; margin-bottom:10px;
}
.dr-progress-bar {
  height:100%; background:linear-gradient(90deg,#ffd700,#f0b400);
  border-radius:999px; transition:width .4s ease; width:0%;
}
.dr-footer { width:100%; display:flex; justify-content:center; }
.dr-footer .dr-close,
.dr-panel > .dr-header .dr-close {
  padding:10px 28px; border:none; border-radius:12px;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.1);
  font-size:13px; font-weight:700; cursor:pointer; transition:background .15s, color .15s;
  font-family:inherit;
}
.dr-footer .dr-close:hover,
.dr-panel > .dr-header .dr-close:hover { background:rgba(255,255,255,.12); color:#fff; }

/* Daily rewards notification badge */
.dr-badge {
  position:absolute; top:-6px; right:-6px;
  width:18px; height:18px; border-radius:50%;
  background:#ff6b6b; color:#fff;
  font-size:10px; font-weight:bold;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(255,107,107,.4);
  animation:dr-pulse 2s infinite;
}
@keyframes dr-pulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.15); }
}

/* ─── HISTORY / REPLAY ─── */
#hist-overlay {
  position:absolute; inset:0; z-index:93;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,215,0,.08), transparent 50%),
    rgba(6,10,20,.9);
  border-radius:24px;
  display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:16px;
}
#hist-overlay.show { display:flex; }
.hist-panel {
  width:min(400px, 94%); max-height:min(85%, 560px);
  background:linear-gradient(165deg,rgba(18,32,58,.98),rgba(8,14,28,.98));
  border:1px solid rgba(255,215,0,.3);
  border-radius:20px; padding:18px 16px 14px;
  display:flex; flex-direction:column;
  box-shadow:0 24px 56px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  animation:slideInUp .28s ease-out;
}
.hist-eyebrow {
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.42); text-align:center; margin-bottom:2px;
}
.hist-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; gap:8px; }
.hist-title {
  font-size:22px; font-weight:700; color:#ffd700; margin:0; line-height:1.15;
}
.hist-meta {
  font-size:11px; color:rgba(255,255,255,.45); margin:0 0 10px; text-align:center;
}
.hist-body {
  flex:1; overflow-y:auto; min-height:0;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent;
}
.hist-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:11px; margin-bottom:3px;
  font-size:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05);
  transition:background .15s, border-color .15s;
}
.hist-item:hover { background:rgba(255,255,255,.06); }
.hist-item .hist-turn {
  color:rgba(255,255,255,.3); font-size:10px; width:28px; flex-shrink:0;
  text-align:right; font-variant-numeric:tabular-nums; font-weight:700;
}
.hist-item .hist-icon {
  font-size:0; width:20px; height:20px; flex-shrink:0; opacity:.85;
  display:inline-flex; align-items:center; justify-content:center;
  color:#ffd700;
}
.hist-item .hist-icon svg { width:14px; height:14px; fill:currentColor; display:block; }
.hist-item .hist-player { color:#ffd700; font-weight:700; flex-shrink:0; }
.hist-item .hist-desc {
  color:rgba(255,255,255,.6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hist-item.hist-self {
  background:rgba(26,107,82,.1); border-color:rgba(143,212,184,.3);
}
.hist-item.hist-finish {
  background:rgba(255,215,0,.1); border-color:rgba(255,215,0,.28);
}
.hist-item.hist-finish .hist-desc { color:#ffd700; font-weight:800; }
.hist-empty {
  text-align:center; padding:28px 12px; color:rgba(255,255,255,.35); font-size:13px;
  border-radius:14px; background:rgba(0,0,0,.14); border:1px dashed rgba(255,255,255,.1);
}
.hist-empty-ico {
  width:44px; height:44px; margin:0 auto 10px; border-radius:12px;
  display:grid; place-items:center; color:rgba(255,215,0,.75);
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.22);
}
.hist-empty-ico svg { width:22px; height:22px; fill:currentColor; display:block; }
.hist-empty-title { font-weight:800; color:#fff; font-size:14px; }
.hist-empty-sub { margin-top:4px; font-size:12px; color:rgba(255,255,255,.5); }
.hist-footer {
  display:flex; justify-content:center; gap:8px; margin-top:10px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
.hist-footer button {
  padding:10px 18px; border:none; border-radius:12px;
  font-size:12px; font-weight:800; cursor:pointer; transition:filter .15s, background .15s;
  font-family:inherit;
}
.hist-btn-replay {
  background:linear-gradient(135deg,#ff9800,#e65100); color:#fff;
  border:1px solid rgba(255,215,0,.25);
  box-shadow:0 6px 16px rgba(230,81,0,.25);
}
.hist-btn-replay:hover { filter:brightness(1.08); }
.hist-btn-close {
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.1);
}
.hist-btn-close:hover { background:rgba(255,255,255,.12); color:#fff; }
.hist-btn-x {
  width:34px; height:34px; padding:0 !important;
  display:grid; place-items:center; border-radius:11px !important;
}
.hist-replay-row {
  gap:8px;
}
.hist-replay-main {
  flex:1; min-width:0; display:flex; align-items:center; gap:8px;
  background:transparent; border:none; color:inherit; cursor:pointer;
  padding:0; text-align:left; font:inherit;
}
.hist-btn-share {
  flex-shrink:0; padding:6px 10px !important; border-radius:9px !important;
  font-size:11px !important; font-weight:800 !important;
  background:rgba(255,215,0,.1) !important; color:#ffd700 !important;
  border:1px solid rgba(255,215,0,.28) !important;
}

/* ─── REPLAY OVERLAY ─── */
#replay-overlay {
  position:absolute; inset:0; z-index:96;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,215,0,.1), transparent 50%),
    rgba(6,10,20,.9);
  border-radius:24px;
  display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:16px;
}
#replay-overlay.show { display:flex; }
.replay-panel {
  width:min(420px, 94%); max-height:min(88%, 580px);
  background:linear-gradient(165deg,rgba(18,32,58,.98),rgba(8,14,28,.98));
  border:1px solid rgba(255,215,0,.3);
  border-radius:20px; padding:18px 16px 14px;
  display:flex; flex-direction:column; align-items:center;
  box-shadow:0 24px 56px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  animation:slideInUp .28s ease-out;
}
.replay-eyebrow {
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.42); margin-bottom:2px;
}
.replay-title {
  font-size:24px; font-weight:700; color:#ffd700; margin:0 0 4px; line-height:1.15;
}
.replay-subtitle {
  font-size:12px; color:rgba(255,255,255,.48); margin:0 0 12px;
  font-variant-numeric:tabular-nums;
}
.replay-body {
  width:100%; flex:1; overflow-y:auto; min-height:0;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent;
  margin-bottom:8px;
}
.replay-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:10px; margin-bottom:2px;
  font-size:12px; opacity:.45;
  background:rgba(255,255,255,.02); border:1px solid transparent;
  transition:opacity .25s, background .25s, border-color .25s;
}
.replay-item.replay-active {
  opacity:1;
  background:rgba(255,215,0,.1);
  border-color:rgba(255,215,0,.28);
}
.replay-item.replay-done { opacity:.65; }
.replay-item .ri-turn {
  color:rgba(255,255,255,.3); font-size:10px; width:24px; flex-shrink:0;
  font-variant-numeric:tabular-nums; font-weight:700;
}
.replay-item .ri-icon {
  font-size:0; width:18px; height:18px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:#ffd700;
}
.replay-item .ri-icon svg { width:14px; height:14px; fill:currentColor; display:block; }
.replay-item .ri-player { color:#ffd700; font-weight:700; flex-shrink:0; margin-right:4px; }
.replay-item .ri-desc {
  color:rgba(255,255,255,.55); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.replay-controls {
  display:flex; align-items:center; gap:8px; width:100%;
  justify-content:center; margin-top:4px;
}
.replay-btn {
  width:42px; height:42px; border:1px solid rgba(255,255,255,.1); border-radius:12px;
  font-size:15px; cursor:pointer; transition:background .15s, color .15s, transform .15s;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.7);
  font-family:inherit;
}
.replay-btn:hover:not(:disabled) {
  background:rgba(255,255,255,.12); color:#fff; transform:translateY(-1px);
}
.replay-btn.active {
  background:linear-gradient(145deg,#ffd700,#f0b400);
  color:#1a1208; border-color:transparent;
  box-shadow:0 4px 14px rgba(255,215,0,.28);
}
.replay-btn:disabled { opacity:.3; cursor:not-allowed; transform:none; }
.replay-progress {
  width:100%; height:5px; background:rgba(255,255,255,.08);
  border-radius:999px; overflow:hidden; margin:8px 0 4px;
}
.replay-progress-bar {
  height:100%; background:linear-gradient(90deg,#ffd700,#f0b400);
  border-radius:999px; transition:width .3s ease;
}
.replay-close {
  margin-top:10px; padding:10px 28px; border:none; border-radius:12px;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.1);
  font-size:13px; font-weight:700; cursor:pointer; transition:background .15s, color .15s;
  font-family:inherit;
}
.replay-close:hover { background:rgba(255,255,255,.12); color:#fff; }

/* Undo button in toolbar */
.tb-btn-undo {
  position:relative;
}
.tb-btn-undo .undo-badge {
  position:absolute; top:-4px; right:-4px;
  width:16px; height:16px; border-radius:50%;
  background:linear-gradient(145deg,#ffd700,#c9a227); color:#1a1408;
  font-size:9px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(255,215,0,.35);
  border:1px solid rgba(26,20,8,.35);
}
.tb-btn-undo .undo-badge.pop {
  animation: undoBadgePop .35s ease-out;
}
@keyframes undoBadgePop {
  from { transform: scale(.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-btn-undo .undo-badge.pop { animation: none !important; }
}
.tb-btn-undo:disabled { opacity:.3; cursor:not-allowed; }

/* ─── Mobile overlay adjustments ─── */
@media (max-width:600px) {
  #login-overlay { border-radius:16px; }
  .login-container { width:300px; }
  .login-logo { width:70px; height:70px; border-radius:18px; }
  .login-logo-inner { font-size:28px; }
  .login-title { font-size:20px; letter-spacing:4px; }
  .login-subtitle { font-size:11px; margin-bottom:18px; }
  .login-btn { height:42px; font-size:13px; border-radius:10px; }
  .login-btn-icon { width:22px; height:22px; font-size:14px; }
  .login-guest { font-size:12px; margin-top:14px; }

  #lobby-overlay { padding:16px; border-radius:16px; }
  .lobby-header { flex-direction:column; gap:8px; }
  .lobby-header h2 { font-size:18px; }
  .lobby-header-btns { width:100%; justify-content:center; }
  .room-card { flex-direction:column; gap:6px; padding:10px; }
  .room-status { flex-direction:row; justify-content:space-between; width:100%; }
  .room-btn-join { width:auto; padding:6px 20px; }

  #lb-overlay { border-radius:16px; }
  .lb-panel { padding:16px; max-height:90%; }
  .lb-title { font-size:17px; }
  .lb-tab { padding:4px 10px; font-size:10px; }
  .lb-row { padding:6px 8px; gap:6px; }
  .lb-rank { width:24px; }
  .lb-rank .lb-medal { font-size:15px; }
  .lb-avatar { width:28px; height:28px; font-size:11px; }
  .lb-name { font-size:12px; }
  .lb-stats { font-size:9px; }
  .lb-score-val { font-size:12px; }

  #settings-overlay { border-radius:16px; }
  .settings-panel { width:min(340px, 94%); padding:18px 14px 14px; }
  .settings-title { font-size:22px; }
  .settings-sub { font-size:11px; margin-bottom:12px; }
  .settings-options .opt-btn { padding:8px 4px; font-size:12px; }
  .settings-btns button { font-size:12px; padding:11px; }

  #confirm-overlay { border-radius:16px; }
  .confirm-panel { width:92%; max-width:340px; padding:20px; }
  .confirm-title { font-size:17px; }

  #go-overlay { border-radius:16px; }
  .go-panel { width:92%; max-width:340px; padding:20px; }

  #dr-overlay { border-radius:16px; }
  .dr-panel { padding:16px; width:95%; }
  .dr-title { font-size:17px; }
  .dr-streak { font-size:11px; }
  .dr-subtitle { font-size:10px; margin-bottom:10px; }
  .dr-grid { gap:4px; }
  .dr-day { padding:6px 2px; border-radius:8px; }
  .dr-day .dr-day-icon { font-size:16px; }
  .dr-day .dr-day-amount { font-size:11px; }
  .dr-day .dr-day-label { font-size:8px; }
  .dr-claim-btn { padding:10px 28px; font-size:14px; }
  .dr-timer { font-size:10px; }

  #hist-overlay { border-radius:16px; }
  .hist-panel { width:min(96%, 380px); max-height:90%; padding:14px 12px 10px; }
  .hist-title { font-size:20px; }
  .hist-meta { font-size:10px; }
  .hist-item { padding:6px 8px; gap:6px; font-size:11px; }
  .hist-item .hist-turn { width:22px; font-size:9px; }
  .hist-item .hist-icon { font-size:12px; width:16px; }
  .hist-footer button { font-size:11px; padding:8px 14px; }

  #replay-overlay { border-radius:16px; }
  .replay-panel { width:min(96%, 380px); max-height:92%; padding:14px 12px 12px; }
  .replay-title { font-size:20px; }
  .replay-subtitle { font-size:11px; }
  .replay-item { padding:5px 8px; gap:6px; font-size:11px; }
  .replay-item .ri-turn { width:20px; font-size:9px; }
  .replay-item .ri-icon { font-size:12px; width:16px; }
  .replay-btn { width:38px; height:38px; font-size:14px; border-radius:11px; }
  .replay-controls { gap:6px; }
  .replay-close { font-size:12px; padding:8px 20px; }

  #toolbar { padding:4px 6px; gap:3px; flex-wrap:wrap; justify-content:center; }
  .tb-btn { font-size:9px; padding:3px 6px; }
  #undo-btn .undo-badge { width:14px; height:14px; font-size:8px; top:-3px; right:-3px; }

  /* ─── Backend Integration — Mobile ─── */
  .login-tabs { gap:0; }
  .login-tab { padding:8px 12px; font-size:12px; }
  .login-form { gap:8px; }
  .login-input { padding:10px 12px; font-size:13px; }
  .login-form-btn { padding:10px; font-size:13px; }
  .lobby-mode-toggle { gap:4px; }
  .lobby-mode-btn { padding:5px 10px; font-size:10px; }
  .lobby-waiting { padding:16px; gap:8px; }
  .lw-spinner { width:30px; height:30px; border-width:3px; }
  .lw-text { font-size:13px; }
  .lw-cancel { font-size:11px; padding:6px 18px; }
  #net-status { font-size:10px; gap:3px; }
  .ns-dot { width:8px; height:8px; }
}

/* ═══════════════════════════════════════════
   TOURNAMENT OVERLAY
   ═══════════════════════════════════════════ */
#tr-overlay {
  position:absolute; inset:0; z-index:96;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,215,0,.1), transparent 50%),
    rgba(6,10,20,.9);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .25s;
  padding:16px; border-radius:24px;
}
#tr-overlay.show { opacity:1; pointer-events:auto; }
.tr-panel {
  width:min(480px, 94%); max-height:min(88%, 620px);
  background:linear-gradient(165deg,rgba(18,32,58,.98),rgba(8,14,28,.98));
  border:1px solid rgba(255,215,0,.3);
  border-radius:20px; padding:18px 16px 14px;
  display:flex; flex-direction:column; gap:8px;
  box-shadow:0 24px 56px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  animation:slideInUp .28s ease-out;
}
.tr-eyebrow {
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.42); text-align:center;
}
.tr-header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.tr-title {
  font-size:24px; font-weight:700; color:#ffd700; margin:0; line-height:1.15;
}
.tr-close {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.75);
  width:34px; height:34px; border-radius:11px; cursor:pointer;
  font-size:15px; display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s; flex-shrink:0; font-family:inherit;
}
.tr-close:hover { background:rgba(255,255,255,.12); color:#fff; }
.tr-subtitle {
  font-size:12px; color:rgba(255,255,255,.48); text-align:center; margin:0 0 4px; line-height:1.4;
}

/* Tournament card */
.tr-body {
  flex:1; overflow-y:auto; min-height:0;
  display:flex; flex-direction:column; gap:8px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent;
  padding-right:2px;
}
.tr-card {
  background:linear-gradient(160deg, rgba(18,36,58,.9), rgba(8,18,32,.95));
  border-radius:14px; padding:12px;
  display:flex; flex-direction:column; gap:8px;
  border:1px solid rgba(255,215,0,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.tr-card:hover { border-color:rgba(255,215,0,.32); transform:translateY(-1px); }
.tr-card.status-registration { border-color:rgba(143,212,184,.4); }
.tr-card.status-in_progress { border-color:rgba(255,152,0,.45); }
.tr-card.status-completed { border-color:rgba(255,215,0,.35); }
.tr-card.is-registered {
  box-shadow:0 0 0 1px rgba(143,212,184,.35), 0 8px 20px rgba(26,107,82,.12);
  background:linear-gradient(90deg,rgba(26,107,82,.14),rgba(18,36,58,.55));
}
.tr-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.tr-card-name { font-size:15px; font-weight:800; color:#fff8e7; line-height:1.25; }
.tr-card-type {
  font-size:9px; padding:3px 8px; border-radius:8px; font-weight:800;
  background:rgba(255,215,0,.12); color:#ffd700; text-transform:uppercase; letter-spacing:.04em;
}
.tr-card-info {
  display:flex; gap:8px; flex-wrap:wrap; font-size:11px;
  color:rgba(255,255,255,.55); align-items:center;
}
.tr-card-info span { display:inline-flex; align-items:center; gap:4px; }
.tr-meta-pill {
  padding:3px 8px; border-radius:8px;
  background:rgba(8,18,32,.55); border:1px solid rgba(255,215,0,.12);
  font-variant-numeric:tabular-nums;
}
.tr-you-pill {
  font-size:10px; font-weight:800; color:#8fd4b8; padding:3px 8px; border-radius:8px;
  background:rgba(143,212,184,.16); border:1px solid rgba(143,212,184,.35);
}
.tr-fill {
  height:4px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden;
}
.tr-fill-bar {
  height:100%; border-radius:999px;
  background:linear-gradient(90deg,#8fd4b8,#ffd700); transition:width .35s ease;
}
.tr-champion {
  font-size:12px; font-weight:800; color:#ffd700;
  padding:4px 10px; border-radius:999px;
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.25);
}
.tr-card-status {
  font-size:10px; padding:4px 10px; border-radius:999px; font-weight:800; flex-shrink:0;
}
.tr-status-REGISTRATION { background:rgba(26,107,82,.18); color:#8fd4b8; }
.tr-status-IN_PROGRESS { background:rgba(255,152,0,.18); color:#ffb74d; }
.tr-status-COMPLETED { background:rgba(255,215,0,.14); color:#ffe082; }
.tr-status-CANCELLED { background:rgba(191,106,74,.16); color:#ffab91; }

.tr-card-actions { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.tr-btn-register {
  background:linear-gradient(135deg,#ff9800,#e65100); border:1px solid rgba(255,215,0,.25);
  color:#fff; padding:9px 16px; border-radius:11px; cursor:pointer;
  font-size:12px; font-weight:800; font-family:inherit;
  box-shadow:0 6px 16px rgba(230,81,0,.25);
  transition:filter .15s, transform .15s;
}
.tr-btn-register:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-1px); }
.tr-btn-register:disabled {
  opacity:.4; cursor:not-allowed; transform:none; box-shadow:none;
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1);
}
.tr-btn-unregister {
  background:rgba(191,106,74,.12); border:1px solid rgba(191,106,74,.35); color:#ffab91;
  padding:9px 14px; border-radius:11px; cursor:pointer;
  font-size:12px; font-weight:800; font-family:inherit; transition:background .15s;
}
.tr-btn-unregister:hover { background:rgba(191,106,74,.22); color:#fff; }
.tr-btn-view {
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.3); color:#ffd700;
  padding:9px 14px; border-radius:11px; cursor:pointer;
  font-size:12px; font-weight:800; font-family:inherit; transition:background .15s;
}
.tr-btn-view:hover { background:rgba(255,215,0,.2); }
.tr-btn-back {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.75); padding:8px 14px; border-radius:11px; cursor:pointer;
  font-size:12px; font-weight:700; font-family:inherit;
}
.tr-btn-back:hover { background:rgba(255,255,255,.1); color:#fff; }
.tr-empty,
.tr-loading {
  text-align:center; padding:28px 12px; color:rgba(255,255,255,.4); font-size:13px;
}
.tr-empty {
  border-radius:14px; background:rgba(8,18,32,.45);
  border:1px dashed rgba(255,215,0,.18); color:inherit;
}
.tr-empty-ico {
  width:44px; height:44px; margin:0 auto 10px; border-radius:12px;
  display:grid; place-items:center; color:rgba(255,215,0,.75);
  background:rgba(255,215,0,.1); border:1px solid rgba(255,215,0,.22);
}
.tr-empty-ico svg { width:22px; height:22px; fill:currentColor; display:block; }
.tr-empty-title { font-weight:800; color:#fff; font-size:14px; }
.tr-empty-sub { margin-top:4px; font-size:12px; color:rgba(255,255,255,.5); }

/* Bracket tree */
.tr-bracket {
  display:flex; gap:16px; justify-content:center; padding:8px 0;
  overflow-x:auto; min-height:160px;
}
.tr-round {
  display:flex; flex-direction:column; gap:10px; min-width:132px;
}
.tr-round-title {
  text-align:center; font-size:10px; font-weight:800;
  color:rgba(255,215,0,.7); text-transform:uppercase; letter-spacing:.06em;
  padding-bottom:4px; border-bottom:1px solid rgba(255,215,0,.15);
}
.tr-match {
  background:linear-gradient(160deg, rgba(18,36,58,.85), rgba(8,18,32,.92));
  border-radius:11px; padding:8px 10px;
  border:1px solid rgba(255,215,0,.12); display:flex; flex-direction:column; gap:4px;
}
.tr-match.playing { border-color:rgba(255,152,0,.45); background:linear-gradient(145deg,rgba(255,152,0,.12),rgba(18,36,58,.55)); }
.tr-match.completed { border-color:rgba(143,212,184,.35); background:linear-gradient(145deg,rgba(26,107,82,.12),rgba(18,36,58,.55)); }
.tr-match-teams { display:flex; flex-direction:column; gap:3px; }
.tr-match-player {
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; padding:3px 6px; border-radius:7px;
}
.tr-match-player.winner { background:rgba(255,215,0,.12); color:#ffd700; font-weight:800; }
.tr-match-player.eliminated { color:rgba(255,255,255,.3); text-decoration:line-through; }
.tr-match-player .tr-seed {
  font-size:9px; color:rgba(255,255,255,.3); margin-right:6px;
}
.tr-match-vs {
  text-align:center; font-size:9px; color:rgba(255,255,255,.25); padding:1px 0;
}
.tr-match-status {
  text-align:center; font-size:9px; font-weight:800; letter-spacing:.04em;
  color:rgba(255,255,255,.35); text-transform:uppercase;
}
.tr-match-status.done { color:#8fd4b8; }
.tr-match-status.live { color:#ff9800; }
.tr-match-status.wait { color:rgba(255,255,255,.4); }
.tr-crown {
  display:inline-flex; width:14px; height:14px; margin-left:4px;
  color:#ffd700;
}
.tr-crown svg { width:14px; height:14px; fill:currentColor; }
.tr-prize-info {
  display:flex; justify-content:center; gap:6px; flex-wrap:wrap;
  text-align:center; font-size:10px; font-weight:700; color:rgba(255,215,0,.85);
  padding:8px; margin-top:2px;
  background:rgba(255,215,0,.08); border:1px solid rgba(255,215,0,.15);
  border-radius:12px;
}
.tr-prize-info span {
  padding:3px 8px; border-radius:8px;
  background:rgba(0,0,0,.15);
}
.tr-countdown {
  text-align:center; font-size:12px; color:rgba(255,255,255,.5);
  padding:6px 10px; border-radius:11px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.tr-countdown strong { color:#ffd700; font-variant-numeric:tabular-nums; }
.tr-bracket-head {
  display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap;
}
.tr-bracket-name {
  font-weight:800; font-size:15px; color:#ffd700;
}
.tr-bracket-champ {
  font-size:11px; font-weight:700; color:rgba(255,255,255,.55);
  padding:3px 8px; border-radius:8px;
  background:rgba(255,215,0,.08); border:1px solid rgba(255,215,0,.2);
}

/* Responsive tournament */
@media (max-width:600px) {
  .tr-panel { width:min(98%, 420px); max-height:92%; padding:14px 12px 10px; }
  .tr-title { font-size:20px; }
  .tr-card { padding:10px; }
  .tr-card-name { font-size:13px; }
  .tr-card-info { font-size:10px; gap:6px; }
  .tr-bracket { gap:10px; }
  .tr-round { min-width:110px; }
  .tr-match { padding:6px 8px; }
  .tr-match-player { font-size:10px; }
}

/* ═══════════════════════════════════════════
   PREMIUM TABLE / TILE POLISH
   ═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;700;800&family=DM+Sans:wght@500;700&display=swap');

body {
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(20,92,69,.45), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(13,71,161,.35), transparent 45%),
    linear-gradient(160deg, #0b1220 0%, #132038 40%, #0d1a14 100%);
}

#game {
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.06) 0%, transparent 55%),
    linear-gradient(145deg, #1b5e20 0%, #145c45 45%, #1b4332 100%);
  border: 1px solid rgba(255,215,0,.18);
  box-shadow:
    0 24px 80px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -2px 20px rgba(0,0,0,.25);
}

#game::before {
  font-family: 'Outfit', sans-serif;
  font-size: 96px;
  letter-spacing: 18px;
  color: rgba(255,215,0,.045);
}

.tile, .hand-tile, .discard-tile, .pending-tile {
  border-radius: 7px !important;
  box-shadow:
    0 2px 0 rgba(0,0,0,.25),
    0 6px 14px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
}

.tile:hover, .hand-tile:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.65) !important;
}

.tile.selected, .hand-tile.selected {
  outline: 2px solid #ffd700;
  outline-offset: 2px;
  filter: brightness(1.08);
  transform: translateY(-6px);
}

.tile.okey, .hand-tile.okey {
  box-shadow: 0 0 0 2px #ff6f00, 0 8px 18px rgba(255,111,0,.35) !important;
}

.opp-card {
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.2));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.opp-card.active {
  background: linear-gradient(180deg, rgba(255,215,0,.28), rgba(255,215,0,.1));
  border-color: #ffd700;
  animation: pulseSeat 1.6s ease-in-out infinite;
}

@keyframes pulseSeat {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,.35); }
  50% { box-shadow: 0 0 0 8px rgba(255,215,0,0); }
}

#topbar {
  background: linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,.22));
  border: 1px solid rgba(255,255,255,.06);
}

.action-btn, #btns button, .btn-primary {
  transition: transform .12s ease, filter .12s ease;
}
.action-btn:active, #btns button:active {
  transform: scale(.96);
}

@media (max-width: 700px) {
  #game { border-radius: 0; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE SYSTEM — mobile / tablet / desktop
   ═══════════════════════════════════════════ */
#meta-overlay {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  align-items: center;
  justify-content: center;
}
.meta-panel.dr-panel {
  width: min(520px, 100%);
  max-width: 100%;
  max-height: min(88dvh, 880px);
  align-items: stretch;
  overflow: hidden;
}
.meta-body {
  width: 100%;
  min-height: 120px;
  max-height: min(62dvh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.meta-panel .dr-header,
.meta-panel .dr-subtitle,
.meta-panel .dr-footer {
  width: 100%;
  flex-shrink: 0;
}
.meta-panel .dr-subtitle { text-align: left; }

/* Mobile: meta bottom-sheet hissi */
@media (max-width: 600px) {
  #meta-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .meta-panel.dr-panel {
    width: 100%;
    max-width: 100%;
    max-height: min(92dvh, 100%);
    border-radius: 20px 20px 0 0;
    padding: 16px 14px max(14px, env(safe-area-inset-bottom));
    margin: 0;
  }
  .meta-body { max-height: min(70dvh, 520px); font-size: 13px; }

  #gift-panel, #chat-panel {
    left: 8px; right: 8px; bottom: max(12px, env(safe-area-inset-bottom));
    width: auto !important;
    max-height: min(55dvh, 380px);
    border-radius: 16px;
  }
  #chat-messages { max-height: min(28dvh, 140px); }
  .gift-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 10px 12px; }

  .lobby-header { max-width: 100%; }
  .lobby-play-hero,
  .lobby-info,
  #room-list,
  .lobby-cta-row { max-width: 100% !important; }
  .lobby-header-btns { flex-wrap: wrap; }
  .room-card .room-name { max-width: 100%; }

  #dock, .action-dock {
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .shop-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .profile-stats { grid-template-columns: 1fr 1fr; }
  .friend-search-bar { flex-direction: column; align-items: stretch; }
  .friend-search-input { width: 100%; }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 1020px) {
  .meta-panel.dr-panel {
    width: min(560px, 94%);
  }
  .meta-body { max-height: min(64dvh, 600px); }
  .shop-grid:not(.store) { grid-template-columns: 1fr 1fr 1fr; }
  .lobby-header,
  .lobby-play-hero,
  #room-list { max-width: 760px; }
}

/* Desktop / geniş ekran */
@media (min-width: 1021px) {
  .meta-panel.dr-panel {
    width: min(640px, 92%);
    max-height: min(86vh, 820px);
    border-radius: 20px;
  }
  .meta-body { max-height: min(66vh, 640px); }
  .shop-grid:not(.store) { grid-template-columns: 1fr 1fr 1fr; }
  .shop-grid.store { grid-template-columns: 1fr 1fr; }
  .profile-stats { grid-template-columns: repeat(3, 1fr); }
  .lobby-header,
  .lobby-play-hero,
  #room-list,
  .lobby-cta-row { max-width: 820px; }

  #gift-panel { width: 300px; }
  #chat-panel { width: 320px; max-height: 380px; }
}

@media (min-width: 1400px) {
  .meta-panel.dr-panel { width: min(720px, 90%); }
  .shop-grid:not(.store) { grid-template-columns: repeat(4, 1fr); }
}

/* Landscape phone: daha kompakt meta */
@media (max-height: 480px) and (orientation: landscape) {
  #meta-overlay { align-items: center; padding: 8px; }
  .meta-panel.dr-panel {
    max-height: 96dvh;
    border-radius: 14px;
    padding: 10px 12px;
  }
  .meta-body { max-height: 70dvh; }
  #gift-panel, #chat-panel {
    max-height: 80dvh;
    bottom: 8px;
  }
}

/* Touch: hover scale'leri kapat (yanlış dokunuş) */
@media (hover: none) {
  .tile:hover, .hand-tile:hover {
    transform: none;
  }
  #actions .btn:not(:disabled):hover {
    transform: none !important;
  }
}