* { box-sizing: border-box; }
:root {
  --bg: #070d18;
  --card: #0f182a;
  --stroke: #2b4268;
  --text: #f4f8ff;
  --muted: #a9c2e8;
  --accent: #2da8ff;
  --accent2: #58c1ff;
}
html, body { width:100%; height:100%; background:#070d18; overflow:hidden; }
body {
  margin:0;
  font-family: Inter, -apple-system, sans-serif;
  background: linear-gradient(rgba(5,10,20,.25), rgba(5,10,20,.55)), url('/splash-reference.jpg') center/cover no-repeat fixed;
  color: var(--text);
}
.splash-screen {
  min-height:100dvh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 0 16px 44px;
  position:relative;
  background: linear-gradient(rgba(5,10,20,.25), rgba(5,10,20,.55)), url('/splash-reference.jpg') center/cover no-repeat;
}
.splash-play-btn { min-width: 170px; }
.splash-invite { width:min(560px,100%); display:flex; gap:10px; }
body.invite-mode .splash-play-btn { display:none; }
.lang-switch { position:absolute; top: calc(12px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.lang-btn { background: rgba(8,20,40,.75); border:1px solid #3f6799; padding:8px 12px; border-radius:10px; color:#fff; }
.lang-btn.active { background: linear-gradient(135deg,var(--accent),var(--accent2)); }

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  height: 100dvh;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
}
.card {
  background: rgba(12,20,35,.78);
  border:1px solid rgba(112,169,224,.45);
  border-radius:16px;
  padding:12px;
  backdrop-filter: blur(4px);
}
#gameSection { height: calc(100dvh - 16px); overflow:hidden; display:grid; grid-template-rows:auto auto auto 1fr; row-gap:8px; }
#xoWrap { order: 2; display:block !important; }
.players { order: 3; }
#waitingWrap { order: 4; }
.chat { order: 5; margin-top:0; height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
input { background:#0b1322; color:#fff; border:1px solid #325384; border-radius:10px; padding:11px 12px; min-width:130px; font-size:16px; flex:1; }
button { border:0; border-radius:10px; padding:7px 9px; background: linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-weight:800; cursor:pointer; font-size:.88rem; }
.invite-friends-btn { padding: 9px 12px; font-size: .92rem; font-weight: 900; min-width: 110px; }
.hidden { display:none !important; }
#inviteUrl { width:100%; margin:8px 0 10px; }
.top-row { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:6px; }
.top-row .row { width:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; }
.top-row .row button { flex:0 0 auto; }
.action-row { display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap:6px; width:100%; }
.action-row button { width:100%; min-width:0; white-space:nowrap; }
#status, #systemMsg, #scoreboard, #gameRoomName { display:none !important; }
#status { font-weight:700; color:#bfe3ff; margin:4px 0 2px; font-size:.92rem; }
.system { color:#9fd6ff; min-height:16px; font-weight:700; margin:0 0 4px; font-size:.86rem; }
.scoreboard { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; font-size:.86rem; }

.board { display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; }
.cell {
  height:86px;
  border-radius:10px;
  border:1px solid #4f78b6;
  background:#081126;
  color:#fff;
  font-size:2.1rem;
  font-weight:900;
}

.players { color:#d0d0d8; padding-left:16px; margin:4px 0; max-height:56px; overflow:auto; font-size:.86rem; }
.waiting h3, .chat h3 { margin:0 0 6px; font-size:.92rem; color:#bfe3ff; }
.card-inner { background:#101015; border:1px solid #2b2b34; border-radius:12px; padding:8px; margin:0; }
.chat-list { flex:1; min-height:0; max-height:100%; overflow-y:auto; overflow-x:hidden; border:1px solid #2f2f3b; border-radius:10px; padding:6px; background:#0d0d12; margin-bottom:6px; }
.chat-msg { margin-bottom:8px; font-size:.92rem; color:#ececf3; }

.sponsor-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 999;
}
.sponsor-card {
  background: rgba(8,16,30,.72);
  border: 1px solid #4d79b3;
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.sponsor-text { font-size: 12px; color: #d2e8ff; margin-bottom: 8px; }
.sponsor-logo { width: 140px; height: auto; border-radius: 10px; display:block; }

.winner-banner {
  width: 100%;
  text-align: center;
  font-weight: 1000;
  font-size: 2rem;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(45,168,255,.9);
  background: linear-gradient(135deg, rgba(45,168,255,.28), rgba(88,193,255,.18));
  border: 1px solid rgba(120,210,255,.7);
  border-radius: 12px;
  padding: 10px 8px;
  margin-bottom: 6px;
}