/* =============================================
   TRILIZA ONLINE — Stylesheet v2
   Fonts: Syne (headings) + DM Sans (body)
   ============================================= */

:root {
  --bg:      #06061a;
  --bg2:     #0d0d2b;
  --glass:   rgba(255,255,255,0.04);
  --glass-h: rgba(255,255,255,0.08);
  --border:  rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.16);

  --x:      #ff4d6d;
  --x-glow: rgba(255,77,109,0.35);
  --o:      #4cc9f0;
  --o-glow: rgba(76,201,240,0.35);
  --gold:   #fbbf24;
  --acc:    #7c3aed;
  --acc2:   #a855f7;

  --text:   #f1f5f9;
  --muted:  #64748b;
  --dim:    #94a3b8;

  --r:  16px;
  --rs: 10px;
  --t:  0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Dot grid ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 0;
}

/* ── Background canvas ── */
#bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Animated blobs ── */
.bg-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
  animation: blobFloat var(--dur,12s) ease-in-out infinite alternate;
}
.bg-blob-1 { width:700px;height:700px;background:radial-gradient(circle,#7c3aed,transparent 65%);top:-250px;left:-220px;opacity:.11;--dur:13s;animation-delay:0s; }
.bg-blob-2 { width:550px;height:550px;background:radial-gradient(circle,#0ea5e9,transparent 65%);bottom:-180px;right:-130px;opacity:.10;--dur:17s;animation-delay:-4s; }
.bg-blob-3 { width:420px;height:420px;background:radial-gradient(circle,#ff4d6d,transparent 65%);top:42%;left:55%;opacity:.08;--dur:11s;animation-delay:-7s; }
.bg-blob-4 { width:320px;height:320px;background:radial-gradient(circle,#4cc9f0,transparent 65%);top:18%;right:22%;opacity:.07;--dur:19s;animation-delay:-2s; }
.bg-blob-5 { width:360px;height:360px;background:radial-gradient(circle,#a855f7,transparent 65%);bottom:25%;left:12%;opacity:.08;--dur:15s;animation-delay:-9s; }

@keyframes blobFloat {
  0%   { transform: scale(1) translate(0,0); }
  50%  { transform: scale(1.08) translate(15px,-15px); }
  100% { transform: scale(1.04) translate(-10px,20px); }
}

/* ── Language selector ── */
.lang-selector {
  position: fixed;
  top: 14px; right: 14px;
  z-index: 200;
}

/* Desktop: the flags panel is a horizontal pill */
.lang-toggle-btn { display: none; }
.lang-flags {
  display: flex;
  gap: 4px;
  background: rgba(6,6,26,0.7);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 5px 8px;
  backdrop-filter: blur(12px);
}

.lang-btn {
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 3px;
  opacity: 0.45;
  transition: opacity var(--t), transform var(--t);
  line-height: 1;
}
.lang-btn:hover { opacity: 0.8; transform: scale(1.15); }
.lang-btn.active { opacity: 1; transform: scale(1.1); }

/* Mobile: single flag toggle + dropdown */
@media (max-width: 600px) {
  .lang-toggle-btn {
    display: flex;
    align-items: center; justify-content: center;
    background: rgba(6,6,26,0.85);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 6px 12px;
    font-size: 1.3rem;
    cursor: pointer;
    backdrop-filter: blur(14px);
    line-height: 1;
    transition: border-color var(--t);
  }
  .lang-toggle-btn:hover { border-color: var(--border2); }
  .lang-flags {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    flex-wrap: wrap;
    width: 190px;
    border-radius: 18px;
    padding: 10px 8px;
    gap: 6px;
    justify-content: center;
    background: rgba(6,6,26,0.96);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: fadeUp .18s ease both;
  }
  .lang-flags.open { display: flex; }
  .lang-btn { font-size: 1.3rem; padding: 5px; opacity: 0.65; }
  .lang-btn.active { opacity: 1; transform: scale(1.15); }
}

/* ── App ── */
#app { position: relative; z-index: 1; min-height: 100vh; }

/* ── Screens ── */
.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 24px 16px 56px;
  animation: fadeUp .3s ease both;
}
.screen.active { display: flex; }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Toast ── */
#confetti-canvas { position:fixed;inset:0;pointer-events:none;z-index:999; }
#reactions-container { position:fixed;bottom:80px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:900; }
.reaction-float { font-size:2.5rem;animation:rFloat 2s ease-out forwards;position:absolute;white-space:nowrap; }
@keyframes rFloat { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-110px) scale(1.4)} }

.toast {
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(80px);
  background:rgba(20,20,50,.95);
  border:1px solid var(--border2);
  border-radius:100px;
  color:var(--text);
  font-size:.9rem;font-weight:600;
  padding:12px 24px;
  z-index:1000;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  white-space:nowrap;
  pointer-events:none;
  backdrop-filter:blur(20px);
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ══════════════════════════════
   HOME
══════════════════════════════ */
.home-content {
  max-width: 480px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 30px;
  padding-top: 36px;
}

.logo-section { text-align: center; display:flex; flex-direction:column; align-items:center; gap:14px; }

.logo-icon {
  width: 70px; height: 70px;
  animation: logoSpin 24s linear infinite;
  filter: drop-shadow(0 0 16px rgba(124,58,237,.5));
}
@keyframes logoSpin { to { transform: rotate(360deg); } }

.home-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(3rem, 10vw, 4.5rem);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, #c084fc 45%, #4cc9f0 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-subtitle {
  color: var(--dim); font-size: 1rem; font-weight: 500; letter-spacing: .01em;
}

/* Mode cards */
.mode-cards { display:flex; flex-direction:column; gap:10px; width:100%; }

.mode-card {
  display:flex; align-items:center; gap:16px;
  padding:17px 20px;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--r);
  cursor:pointer;
  transition:all var(--t);
  color:var(--text);
  position:relative;
  overflow:hidden;
  text-align:left;
}
.mode-card::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent,rgba(255,255,255,.03));
  opacity:0;transition:opacity var(--t);
}
.mode-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.3); }
.mode-card:hover::before { opacity:1; }
.mode-card:active { transform:translateY(0); }

.mode-card.featured {
  border-color: rgba(168,85,247,.35);
  background: rgba(124,58,237,.07);
}
.mode-card.featured:hover {
  border-color: rgba(168,85,247,.65);
  box-shadow: 0 8px 28px rgba(124,58,237,.2);
}
.mode-badge {
  position:absolute;top:10px;right:12px;
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  color:#fff;font-size:.62rem;font-weight:800;
  letter-spacing:.1em;padding:3px 9px;
  border-radius:20px;
}
.mode-icon { font-size:1.75rem; flex-shrink:0; }
.mode-info { flex:1; display:flex; flex-direction:column; gap:3px; }
.mode-name { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; }
.mode-desc { font-size:.85rem; color:var(--dim); }
.mode-arrow { color:var(--muted); font-size:1.1rem; transition:transform var(--t); }
.mode-card:hover .mode-arrow { transform:translateX(4px); }

/* Features row */
.features-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; width: 100%;
}
.feat-item {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--rs);
  padding:12px 8px;
  font-size:.76rem;
  color:var(--dim);
  text-align:center;
  font-weight:500;
  transition:all var(--t);
}
.feat-item span:first-child { font-size:1.2rem; }
.feat-item:hover { border-color:var(--border2); color:var(--text); }

/* Stats */
.stats-bar {
  display:flex; align-items:center; gap:20px;
  background:var(--glass); border:1px solid var(--border);
  border-radius:100px; padding:11px 26px;
}
.stat-item { display:flex; flex-direction:column; align-items:center; gap:2px; }
.stat-val { font-family:'Syne',sans-serif; font-size:1.25rem; font-weight:800; color:var(--text); }
.stat-lbl { font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.stat-divider { width:1px; height:26px; background:var(--border); }

/* SEO section */
.seo-section { max-width:640px; width:100%; margin-top:44px; padding:0 8px; color:var(--dim); }
.seo-section h2 { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:10px; }
.seo-section p { font-size:.88rem; line-height:1.75; margin-bottom:20px; }

.faq { display:flex; flex-direction:column; gap:7px; }
.faq-item { background:var(--glass); border:1px solid var(--border); border-radius:var(--rs); overflow:hidden; }
.faq-item summary {
  padding:13px 16px; cursor:pointer;
  font-size:.85rem; font-weight:600; color:var(--text);
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; color:var(--muted); font-size:1.1rem; }
.faq-item[open] summary::after { content:'−'; }
.faq-item p { padding:0 16px 13px; font-size:.83rem; line-height:1.7; }

/* ══════════════════════════════
   SHARED CARD SCREENS
══════════════════════════════ */
.screen-card {
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:24px;
  padding:34px 28px;
  width:100%; max-width:420px;
  display:flex; flex-direction:column; gap:22px;
  margin-top:36px;
  backdrop-filter:blur(20px);
}
.card-title {
  font-family:'Syne',sans-serif; font-size:1.55rem; font-weight:800;
}
.card-desc { font-size:.88rem; color:var(--dim); margin-top:-10px; }

/* Join screen special */
.join-card { text-align:center; align-items:center; }
.join-invite-icon { font-size:3rem; animation:emojiBounce .6s ease both; }
@keyframes emojiBounce { from{transform:scale(0) rotate(-15deg)} to{transform:scale(1) rotate(0)} }

/* Input */
.input-group { display:flex; flex-direction:column; gap:8px; }
.input-group label { font-size:.85rem; font-weight:600; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }

input[type="text"] {
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  border-radius:var(--rs);
  color:var(--text);
  font-family:'DM Sans',sans-serif;
  font-size:1rem;
  padding:12px 15px;
  outline:none;
  transition:border-color var(--t), box-shadow var(--t);
  width:100%;
}
input[type="text"]:focus { border-color:var(--acc2); box-shadow:0 0 0 3px rgba(168,85,247,.15); }
input[type="text"]::placeholder { color:var(--muted); }
input[type="text"][readonly] { cursor:default; color:var(--dim); font-size:.85rem; }

/* Difficulty pills */
.difficulty-pills { display:flex; gap:8px; }
.pill {
  flex:1; padding:10px 6px;
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--rs); color:var(--dim);
  font-size:.8rem; font-weight:600;
  cursor:pointer; transition:all var(--t); text-align:center;
}
.pill:hover { border-color:var(--border2); color:var(--text); }
.pill.active { background:rgba(124,58,237,.2); border-color:var(--acc); color:var(--text); }

/* ── Buttons ── */
.btn-primary {
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  border:none; border-radius:var(--rs);
  color:#fff;
  font-family:'Syne',sans-serif;
  font-size:1rem; font-weight:700;
  padding:14px 24px; cursor:pointer;
  transition:all var(--t); width:100%;
  letter-spacing:.02em;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(124,58,237,.4); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.btn-secondary {
  background:var(--glass-h); border:1px solid var(--border);
  border-radius:var(--rs); color:var(--text);
  font-family:'Syne',sans-serif; font-size:.9rem; font-weight:700;
  padding:12px 20px; cursor:pointer; transition:all var(--t);
}
.btn-secondary:hover { border-color:var(--border2); transform:translateY(-1px); }

.btn-ghost {
  background:transparent; border:1px solid var(--border);
  border-radius:var(--rs); color:var(--dim);
  font-size:.9rem; font-weight:600;
  padding:10px 20px; cursor:pointer; transition:all var(--t); width:100%;
}
.btn-ghost:hover { border-color:var(--border2); color:var(--text); }

.btn-ghost-sm {
  background:transparent; border:1px solid var(--border);
  border-radius:var(--rs); color:var(--muted);
  font-size:.78rem; font-weight:500;
  padding:7px 14px; cursor:pointer; transition:all var(--t);
}
.btn-ghost-sm:hover { border-color:var(--border2); color:var(--text); }

.btn-back {
  background:none; border:none; color:var(--dim);
  cursor:pointer; font-size:.88rem; font-weight:600;
  align-self:flex-start; padding:4px 0; transition:color var(--t);
}
.btn-back:hover { color:var(--text); }

.btn-icon {
  background:var(--glass); border:1px solid var(--border);
  border-radius:10px; color:var(--dim);
  cursor:pointer; font-size:1.1rem; padding:8px 10px;
  transition:all var(--t); line-height:1;
}
.btn-icon:hover { border-color:var(--border2); color:var(--text); }

.btn-copy-icon, .btn-copy-sm {
  background:rgba(124,58,237,.15); border:1px solid rgba(124,58,237,.3);
  border-radius:var(--rs); color:var(--acc2);
  cursor:pointer; font-size:.9rem; padding:10px 13px;
  transition:all var(--t); white-space:nowrap; flex-shrink:0;
}
.btn-copy-icon:hover, .btn-copy-sm:hover { background:rgba(124,58,237,.25); }
.btn-copy-sm { font-size:.82rem; padding:7px 10px; }

/* ══════════════════════════════
   WAITING + SHARE
══════════════════════════════ */
.waiting-animation { display:flex; gap:10px; justify-content:center; }
.waiting-dot {
  width:11px;height:11px; background:var(--acc2); border-radius:50%;
  animation:dotBounce 1.2s ease-in-out infinite;
}
.waiting-dot:nth-child(2){animation-delay:.2s}
.waiting-dot:nth-child(3){animation-delay:.4s}
@keyframes dotBounce { 0%,80%,100%{transform:translateY(0);opacity:.5} 40%{transform:translateY(-12px);opacity:1} }

.waiting-hint { font-size:.88rem; color:var(--dim); text-align:center; }

.share-url-box { display:flex; gap:8px; width:100%; }
.share-url-box input { flex:1; font-size:.8rem; }

/* Share buttons grid */
.share-buttons-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:9px; width:100%;
}
.share-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 16px; border:none; border-radius:var(--rs);
  font-family:'DM Sans',sans-serif; font-size:.88rem; font-weight:600;
  cursor:pointer; transition:all var(--t);
  color:#fff;
}
.share-btn svg { width:18px;height:18px;flex-shrink:0; }
.share-btn:hover { transform:translateY(-2px); filter:brightness(1.1); }
.share-btn:active { transform:translateY(0); }

.share-btn.whatsapp { background:#25D366; }
.share-btn.telegram { background:#229ED9; }
.share-btn.twitter  { background:#000000; border:1px solid rgba(255,255,255,.2); }
.share-btn.copy-full {
  background:rgba(124,58,237,.2); border:1px solid rgba(124,58,237,.4);
  color:var(--acc2); font-size:.88rem;
}
.share-btn.copy-full:hover { background:rgba(124,58,237,.35); }

.room-code-row {
  display:flex; align-items:center; gap:8px; justify-content:center;
  color:var(--dim); font-size:.85rem;
}
.room-code-row strong {
  color:var(--acc2);
  font-family:'Syne',sans-serif; font-size:1.1rem; letter-spacing:.15em;
}

/* ══════════════════════════════
   GAME SCREEN
══════════════════════════════ */
#screen-game { padding:0; min-height:100vh; }

.game-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(20px);
  position:sticky; top:0; z-index:10;
  background:rgba(6,6,26,.8);
}
.btn-back-small {
  background:var(--glass); border:1px solid var(--border);
  border-radius:10px; color:var(--text);
  cursor:pointer; font-size:1.2rem; padding:8px 13px;
  transition:all var(--t);
}
.btn-back-small:hover { border-color:var(--border2); }

.game-logo {
  font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:800;
  letter-spacing:.1em;
  background:linear-gradient(135deg,#fff,#a855f7);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.game-layout {
  display:flex; gap:22px; justify-content:center; align-items:flex-start;
  padding:22px 18px 56px;
  max-width:960px; margin:0 auto; width:100%;
}

/* Players bar */
.board-section { display:flex; flex-direction:column; align-items:center; gap:14px; flex:0 0 auto; }

.players-bar {
  display:flex; align-items:center; gap:12px;
  width:100%; max-width:400px;
}
.player-badge {
  display:flex; align-items:center; gap:10px;
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--r); padding:11px 14px;
  flex:1; transition:all .3s ease;
}
.player-badge.active-turn { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.07); }
.player-badge.right { flex-direction:row-reverse; }

.pb-symbol { font-size:1.4rem; font-weight:800; line-height:1; flex-shrink:0; }
.x-symbol { color:var(--x); text-shadow:0 0 10px var(--x-glow); }
.o-symbol { color:var(--o); text-shadow:0 0 10px var(--o-glow); }

.pb-info { display:flex; flex-direction:column; gap:1px; min-width:0; }
.pb-name { font-size:.85rem; font-weight:600; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-score { font-family:'Syne',sans-serif; font-size:1.55rem; font-weight:800; line-height:1; }

.center-info { display:flex; flex-direction:column; align-items:center; }
.draw-count {
  font-size:.74rem; color:var(--muted); white-space:nowrap;
  background:var(--glass); border:1px solid var(--border);
  border-radius:20px; padding:4px 11px;
}

/* Status bar */
.status-bar {
  display:flex; align-items:center; gap:9px;
  background:var(--glass); border:1px solid var(--border);
  border-radius:100px; padding:7px 18px;
  font-size:.85rem; font-weight:600; color:var(--dim);
  transition:all .3s ease;
}
.status-indicator {
  width:9px;height:9px; border-radius:50%;
  background:var(--muted); transition:background .3s, box-shadow .3s; flex-shrink:0;
}
.status-indicator.x { background:var(--x); box-shadow:0 0 7px var(--x-glow); }
.status-indicator.o { background:var(--o); box-shadow:0 0 7px var(--o-glow); }

/* Board */
.board-wrapper { position:relative; }
.board {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:9px;
  width:min(360px, calc(100vw - 40px));
}
.cell {
  aspect-ratio:1;
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--r); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t); position:relative; overflow:hidden;
}
.cell::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at center,rgba(255,255,255,.06),transparent 70%);
  opacity:0; transition:opacity var(--t);
}
.cell:hover:not(.occupied) { background:var(--glass-h); border-color:var(--border2); transform:scale(1.03); }
.cell:hover:not(.occupied)::before { opacity:1; }
.cell.occupied { cursor:default; }
.cell.x-cell { border-color:rgba(255,77,109,.28); background:rgba(255,77,109,.04); }
.cell.o-cell { border-color:rgba(76,201,240,.28); background:rgba(76,201,240,.04); }
.cell.winning { animation:winPulse 1.2s ease-in-out infinite; }
.cell.winning.x-cell { border-color:rgba(255,77,109,.8); background:rgba(255,77,109,.12); }
.cell.winning.o-cell { border-color:rgba(76,201,240,.8); background:rgba(76,201,240,.12); }
@keyframes winPulse { 0%,100%{box-shadow:0 0 0 rgba(251,191,36,0)} 50%{box-shadow:0 0 18px rgba(251,191,36,.28)} }

/* SVG pieces */
.piece { width:54%; height:54%; }
.piece-x line {
  stroke:var(--x); stroke-width:11; stroke-linecap:round;
  stroke-dasharray:84; stroke-dashoffset:84;
  filter:drop-shadow(0 0 5px var(--x-glow));
}
.piece-x line:first-child { animation:drawLine .25s ease-out .0s forwards; }
.piece-x line:last-child  { animation:drawLine .25s ease-out .1s forwards; }
.piece-o circle {
  fill:none; stroke:var(--o); stroke-width:11; stroke-linecap:round;
  stroke-dasharray:188; stroke-dashoffset:188;
  animation:drawCircle .4s ease-out forwards;
  filter:drop-shadow(0 0 5px var(--o-glow));
}
@keyframes drawLine   { to { stroke-dashoffset:0; } }
@keyframes drawCircle { to { stroke-dashoffset:0; } }

/* Win line */
.win-line-svg {
  position:absolute; top:0;left:0; width:100%;height:100%;
  pointer-events:none; z-index:5; overflow:visible;
}
.win-line-path {
  stroke:var(--gold); stroke-width:5; stroke-linecap:round; fill:none;
  filter:drop-shadow(0 0 7px rgba(251,191,36,.5));
  animation:drawWinLine .45s ease-out forwards;
}
@keyframes drawWinLine { to { stroke-dashoffset:0; } }

.game-actions { display:flex; gap:9px; align-items:center; }

/* ── Sidebar (online chat) ── */
.sidebar { width:270px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.sidebar-section { background:var(--glass); border:1px solid var(--border); border-radius:var(--r); padding:15px; }

.share-mini { display:flex; flex-direction:column; gap:7px; }
.share-label { font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.07em; }
.share-row { display:flex; gap:7px; }
.share-input { flex:1; font-size:.76rem; padding:8px 10px; }

.chat-section { display:flex; flex-direction:column; gap:9px; }
.chat-header { font-size:.8rem; font-weight:700; color:var(--dim); }
.chat-messages { height:190px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; padding-right:3px; }
.chat-messages::-webkit-scrollbar { width:3px; }
.chat-messages::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }

.chat-msg { display:flex; flex-direction:column; gap:2px; }
.chat-msg-name { font-size:.68rem; font-weight:700; }
.chat-msg-name.x { color:var(--x); }
.chat-msg-name.o { color:var(--o); }
.chat-msg-text {
  font-size:.8rem; background:rgba(255,255,255,.06);
  border-radius:8px 8px 8px 0; padding:5px 9px; line-height:1.4; word-break:break-word;
}
.chat-msg.own .chat-msg-text { border-radius:8px 8px 0 8px; }

.reactions-row { display:flex; gap:5px; flex-wrap:wrap; }
.reaction-btn {
  background:var(--glass-h); border:1px solid var(--border);
  border-radius:7px; font-size:1.05rem; padding:5px 7px;
  cursor:pointer; transition:all var(--t); line-height:1;
}
.reaction-btn:hover { transform:scale(1.2); border-color:var(--border2); }

.chat-input-row { display:flex; gap:7px; }
.chat-input-row input { flex:1; font-size:.83rem; padding:9px 11px; }
.btn-send {
  background:linear-gradient(135deg,#7c3aed,#a855f7);
  border:none; border-radius:var(--rs); color:#fff;
  cursor:pointer; font-size:1rem; font-weight:700;
  padding:9px 13px; transition:all var(--t);
}
.btn-send:hover { opacity:.85; transform:scale(1.05); }

/* ══════════════════════════════
   RESULT OVERLAY
══════════════════════════════ */
.result-overlay {
  position:fixed;inset:0;
  background:rgba(0,0,0,.72); backdrop-filter:blur(14px);
  z-index:800; display:flex; align-items:center; justify-content:center;
  animation:fadeIn .3s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.result-card {
  background:rgba(12,12,40,.97);
  border:1px solid var(--border2);
  border-radius:28px; padding:42px 36px;
  max-width:340px; width:calc(100% - 28px);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;
  animation:resultPop .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes resultPop { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }

.result-emoji { font-size:3.8rem; animation:emojiBounce .6s cubic-bezier(.34,1.56,.64,1) .2s both; }
.result-title { font-family:'Syne',sans-serif; font-size:1.85rem; font-weight:800; }
.result-subtitle { color:var(--dim); font-size:.9rem; }
.result-actions { display:flex; flex-direction:column; gap:9px; width:100%; margin-top:6px; }

/* ══════════════════════════════
   RESPONSIVE / MOBILE
══════════════════════════════ */
@media (max-width:720px) {
  .game-layout { flex-direction:column; align-items:center; padding:14px 12px 80px; }
  .sidebar { width:100%; max-width:400px; }
  .board { width:min(310px, calc(100vw - 36px)); }
  .screen-card { padding:26px 18px; }
  .result-card { padding:34px 22px; }
  .players-bar { max-width:330px; }
  .stats-bar { padding:10px 18px; gap:14px; }
  .share-buttons-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:400px) {
  .board { gap:6px; }
  .difficulty-pills { flex-direction:column; }
  .features-row { grid-template-columns: repeat(2,1fr); }
  .home-content { gap:22px; }
}
@media (max-width:380px) {
  .home-title { font-size: clamp(2.4rem, 9vw, 3rem); }
  .mode-cards { gap:8px; }
  .features-row { grid-template-columns: repeat(2,1fr); }
  .game-header { padding:10px 12px; }
  .board-wrapper { padding:0 4px; }
}

/* ── iMessage + Messenger share buttons ── */
.share-btn.imessage  { background:#2AC63A; }
.share-btn.messenger { background:linear-gradient(135deg,#0084FF,#A334FA); }
.share-btn.teams     { background:#6264A7; }
.share-btn.slack     { background:#4A154B; }

/* ── Mode card tap target ── */
.mode-card { min-height:72px; }

/* ── Cookie banner ── */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 2000;
  background: rgba(8,8,28,0.97);
  border-top: 1px solid var(--border2);
  backdrop-filter: blur(20px);
  padding: 14px 20px;
  animation: slideUp .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes slideUp { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }

.cookie-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.cookie-left {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 200px;
}
.cookie-icon { font-size: 1.3rem; flex-shrink: 0; }
.cookie-text { font-size: .82rem; color: var(--dim); line-height: 1.5; margin: 0; }
.cookie-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
}
.cookie-link {
  font-size: .78rem; color: var(--acc2); text-decoration: none;
  padding: 6px 10px; border-radius: 8px;
  transition: color var(--t);
  white-space: nowrap;
}
.cookie-link:hover { color: #fff; }
.cookie-btn {
  border: none; border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem; font-weight: 700;
  padding: 8px 18px; cursor: pointer;
  transition: all var(--t); white-space: nowrap;
}
.cookie-decline {
  background: var(--glass); border: 1px solid var(--border);
  color: var(--dim);
}
.cookie-decline:hover { border-color: var(--border2); color: var(--text); }
.cookie-accept {
  background: linear-gradient(135deg,#7c3aed,#a855f7);
  color: #fff;
}
.cookie-accept:hover { filter: brightness(1.1); transform: translateY(-1px); }

@media (max-width: 480px) {
  .cookie-inner { gap: 10px; }
  .cookie-actions { width: 100%; justify-content: flex-end; }
}

/* ── Footer ── */
.site-footer {
  position: relative; z-index: 1;
  text-align: center;
  padding: 36px 20px 44px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.footer-comment {
  font-family: 'Courier New', Courier, monospace;
  font-size: .75rem;
  color: var(--acc2);
  opacity: .55;
  letter-spacing: .04em;
}
.footer-email {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Courier New', Courier, monospace;
  font-size: .9rem;
  color: var(--dim);
  text-decoration: none;
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: all .25s ease;
  letter-spacing: .02em;
  background: var(--glass);
}
.footer-email:hover {
  color: var(--acc2);
  border-color: rgba(168,85,247,.45);
  box-shadow: 0 0 20px rgba(168,85,247,.12), inset 0 0 12px rgba(168,85,247,.04);
  background: rgba(168,85,247,.05);
}
.footer-at {
  color: var(--acc2);
  font-size: .8rem;
  transition: transform .2s ease;
}
.footer-email:hover .footer-at { transform: translateX(2px); }
.footer-built {
  font-size: .72rem;
  color: var(--muted);
  opacity: .5;
  margin-top: 2px;
  letter-spacing: .02em;
}
.footer-heart { color: #ff4d6d; }
.footer-code  { color: var(--acc2); font-family: 'Courier New', monospace; }


/* ── Games Hub ─────────────────────────────── */
.games-hub {
  width: 100%;
  max-width: 560px;
  margin: 28px auto 0;
  padding: 0 16px;
}
.hub-title {
  font-family: 'Syne', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 12px;
  text-align: center;
}
.hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hub-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  transition: all .22s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.hub-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(168,85,247,.06) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .22s ease;
}
.hub-card:hover {
  border-color: rgba(168,85,247,.4);
  box-shadow: 0 4px 20px rgba(168,85,247,.12);
  transform: translateY(-2px);
}
.hub-card:hover::before { opacity: 1; }
.hub-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}
.hub-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hub-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-desc {
  font-size: .68rem;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-arrow {
  font-size: .8rem;
  color: var(--acc2);
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: all .2s ease;
}
.hub-card:hover .hub-arrow {
  opacity: 1;
  transform: translateX(0);
}
/* Blog card spans full width */
.hub-grid .hub-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (max-width: 400px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-grid .hub-card:last-child:nth-child(odd) { grid-column: auto; }
}

/* ── Unified back button for all game pages ── */
.btn-back-game {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dim);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--glass);
  transition: color var(--t), border-color var(--t), background var(--t);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-back-game:hover {
  color: var(--text);
  border-color: var(--border2);
  background: var(--glass-h);
}
@media (max-width: 480px) {
  .btn-back-game { font-size: 0.75rem; padding: 6px 10px; }
}