/* Independent bubbles: blur their backdrops, never the text or the whole page. */
.family-games, .game-invite-banner, .game-topbar-navigation {
  --game-glass: linear-gradient(140deg,rgba(255,255,255,.47),rgba(244,203,219,.17));
  --game-border: rgba(168,91,123,.23);
  --game-shadow: inset 0 1px 1px rgba(255,255,255,.64),0 7px 22px rgba(72,28,45,.08);
  --game-success: #14723f;
  --game-miss: #b9233e;
  color: var(--text);
}
html[data-theme="dark"] .family-games, html[data-theme="dark"] .game-invite-banner, html[data-theme="dark"] .game-topbar-navigation {
  --game-glass: linear-gradient(140deg,rgba(98,65,81,.32),rgba(58,29,43,.18));
  --game-border: rgba(235,173,201,.21);
  --game-shadow: inset 0 1px 1px rgba(255,255,255,.09),0 7px 22px rgba(0,0,0,.14);
  --game-success: #71e1a3;
  --game-miss: #ff626b;
}
.family-games { display:flex; flex-direction:column; gap:12px; min-width:0; max-width:860px; margin:0 auto; width:100%; padding:0 2px 20px; }
.game-bubble { background:var(--game-glass); border:1px solid var(--game-border); box-shadow:var(--game-shadow); border-radius:26px; backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); }
.family-games button { color:var(--text); font:inherit; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.family-games button:hover:not(:disabled) { border-color:var(--brand); background-color:var(--brand-soft); }
.family-games button:disabled { cursor:default; opacity:.45; }
.family-games button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.family-games svg, .game-invite-banner svg, .tab.game-header-tab svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.tab.game-header-tab { display:grid; place-items:center; width:48px; padding:0; }
.topbar-inner.game-selected-header > .desktop-header-add-button,
.topbar-inner.game-selected-header > .mobile-header-actions,
.topbar-inner.game-selected-header > .family-tree-header-count { display:none !important; }
.game-topbar-navigation { display:flex; align-items:center; flex:0 1 auto; gap:8px; min-width:0; max-width:100%; }
.game-topbar-back { display:grid; place-items:center; flex:0 0 48px; width:48px; height:48px; padding:0; color:var(--text); border-radius:50%; touch-action:manipulation; }
.game-topbar-back span { display:contents; }
.game-topbar-back svg { display:block; width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.game-topbar-back:hover:not(:disabled) { background-color:var(--brand-soft); }
.game-topbar-back:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.game-topbar-title { display:flex; align-items:center; min-width:0; height:48px; padding:0 18px; margin:0; font:750 16px/1.1 system-ui; white-space:nowrap; }
@media(max-width:699px) {
  .game-topbar-navigation { flex:1 1 auto; }
  .game-topbar-back { flex-basis:44px; width:44px; height:44px; }
  .game-topbar-title { height:44px; font-size:16px; }
}
@media(min-width:700px) and (max-width:900px) {
  .game-selected-header .tabs { gap:6px; }
  .game-selected-header .tab:not(.game-header-tab) { padding-inline:12px; }
  .game-topbar-title { padding-inline:14px; }
}
.game-heading { display:flex; align-items:center; gap:10px; }
.game-heading h1 { font-family:inherit; font-size:20px; font-weight:750; line-height:1.2; margin:0; padding:12px 20px; }
.family-games .game-button { min-height:44px; padding:10px 16px; display:inline-flex; justify-content:center; align-items:center; gap:8px; font-size:14px; font-weight:650; width:fit-content; max-width:100%; }
.family-games .game-round { width:44px; height:44px; min-width:44px; padding:0; border-radius:50%; }
.family-games .game-primary { color:var(--brand-ink); background-color:var(--brand-soft); border-color:var(--brand-border); }
.game-card { display:flex; align-items:center; padding:20px; gap:16px; text-align:left; width:100%; }
.game-card strong { display:block; font-size:21px; }
.game-card small { display:block; color:var(--muted); margin-top:5px; }
.game-card > span:last-child { margin-left:auto; font-size:26px; }
.game-card-icon, .game-stage-icon { display:grid; place-items:center; color:var(--brand-ink); }
.game-card-icon svg, .game-stage-icon svg { width:48px; height:48px; }
.game-muted { color:var(--muted); }
.game-hint { font-size:12px; line-height:1.5; margin:0 4px; }
.game-error, .game-network { margin:0 4px; font-size:13px; line-height:1.4; color:var(--brand-ink); }
.game-error:empty, .game-network:empty { display:none; }
.game-ranking { display:grid; gap:8px; width:100%; min-width:0; }
.game-ranking-head, .game-ranking-row { display:grid; grid-template-columns:36px minmax(0,1fr) 30px repeat(3,34px) 36px; align-items:center; gap:6px; padding:0; text-align:center; font-size:13px; }
.game-ranking-head { color:var(--muted); font-size:10px; }
.game-ranking-head > :nth-child(2) { text-align:left; padding-left:12px; }
.game-ranking-row { min-height:36px; font-variant-numeric:tabular-nums; }
.game-player-avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; }
.game-player-name { display:flex; align-items:center; flex-wrap:wrap; gap:3px 6px; min-width:0; min-height:36px; padding:7px 10px; text-align:left; font-size:13px; line-height:1.2; overflow-wrap:anywhere; }
.game-player-name small { color:var(--muted); font-size:10px; font-weight:400; }
.game-stat { display:grid; place-items:center; min-width:0; min-height:36px; padding:4px 2px; font-size:12px; }
.game-presence { display:grid; place-items:center; min-height:36px; }
.game-presence-dot { display:block; width:10px; height:10px; border-radius:50%; background:var(--game-miss); }
.game-presence-dot.online { background:var(--game-success); }
.family-games .game-ranking .game-round { min-width:36px; width:36px; height:36px; min-height:36px; }
.game-ranking .game-avatar { width:34px; height:34px; font-size:18px; }
.game-avatar { display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; border-radius:50%; background:var(--brand); color:white; font-size:21px; font-weight:750; object-fit:cover; }
.game-wins { color:var(--brand-ink); font-weight:750; }
.game-opponent { display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; width:fit-content; max-width:100%; }
.game-opponent strong { overflow-wrap:anywhere; min-width:0; }
.game-opponent .game-muted { font-size:12px; }
.game-stage { text-align:center; padding:26px 16px; display:grid; justify-items:center; gap:16px; }
.game-stage h2 { font-size:21px; margin:0; }
.game-stage p { font-size:13px; margin:0; }
.game-countdown { font-size:48px; font-variant-numeric:tabular-nums; font-weight:750; }
.game-urgent { color:var(--danger); }
.game-actions { display:flex; flex-wrap:wrap; gap:8px; }
.game-setup-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.family-games .game-setup-actions .game-button { width:100%; min-width:0; padding:10px 6px; font-size:13px; white-space:nowrap; }
.game-status { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:17px; margin:0; padding:12px 18px; }
.game-status [data-game-timer] { flex:none; font-variant-numeric:tabular-nums; font-weight:750; }
.game-turn-copy { display:flex; align-items:baseline; min-width:0; font-weight:750; }
.game-turn-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:inherit; }
.game-last-shot { flex:none; white-space:nowrap; font:inherit; color:var(--muted); }
.game-last-shot.game-shot-miss { color:var(--game-miss); }
.game-last-shot.game-shot-success { color:var(--game-success); }
.game-fleet { display:flex; flex-wrap:wrap; gap:6px; }
.family-games .game-ship { display:grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; padding:6px; border-radius:16px; }
.game-ship-shape { display:flex; gap:2px; pointer-events:none; }
.game-ship-shape.vertical { flex-direction:column; }
.game-ship-shape i { display:block; width:6px; height:6px; border-radius:2px; background:currentColor; }
.game-ship.selected { background-color:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); }
.game-board-shell { display:grid; grid-template-columns:14px minmax(0,1fr); grid-template-rows:16px auto; gap:3px; padding:10px 10px 12px 7px; border-radius:22px; width:100%; max-width:480px; margin:0 auto; }
.game-board-letters { grid-column:2; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); text-align:center; color:var(--muted); font-size:10px; }
.game-board-numbers { grid-column:1; grid-row:2; display:grid; grid-template-rows:repeat(10,minmax(0,1fr)); align-items:center; text-align:center; color:var(--muted); font-size:10px; }
.game-board { grid-column:2; grid-row:2; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:3px; aspect-ratio:1; min-width:0; }
.family-games .game-cell { display:grid; place-items:center; width:100%; min-width:0; min-height:0; padding:0; margin:0; aspect-ratio:1; border:1px solid var(--game-border); border-radius:5px; background:rgba(128,128,128,.07); font:700 clamp(14px,4vw,22px)/1 system-ui; color:var(--muted); }
.family-games .game-cell:disabled { opacity:1; }
.family-games .game-cell.ship { background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand-border); }
.family-games .game-cell.hit { background:rgba(232,103,67,.24); color:#db6045; border-color:#db6045; }
.family-games .game-cell.sunk { background:rgba(214,54,80,.26); color:var(--danger); border-color:var(--danger); }
.family-games .game-cell.miss { background:rgba(128,128,128,.13); color:var(--muted); }
.game-battle-boards { display:grid; gap:18px; min-width:0; }
.game-battle-boards section { min-width:0; }
.game-battle-boards h3 { display:flex; justify-content:space-between; max-width:480px; margin:0 auto 8px; padding:0 6px; font-size:14px; }
.game-battle-boards h3 span { font-size:12px; color:var(--muted); }
.family-games .game-subtle { margin:6px auto; font-size:12px; color:var(--muted); }
.family-games .game-danger { color:var(--danger); }
.game-invite-banner { position:fixed; z-index:180; right:12px; bottom:calc(112px + env(safe-area-inset-bottom,0px)); max-width:min(360px,calc(100vw - 24px)); padding:12px 14px; display:flex; align-items:center; gap:12px; background:var(--panel-2); border:1px solid var(--brand-border); border-radius:26px; box-shadow:0 8px 30px #0003; }
.game-invite-banner button { background:transparent; color:var(--text); padding:0; text-align:left; font-size:13px; }
.game-invite-banner strong { display:block; color:var(--brand-ink); }
.game-invite-banner button:last-child { min-width:32px; height:32px; text-align:center; font-size:22px; }
@media(min-width:1000px) { .game-battle-boards { grid-template-columns:1fr 1fr; } }
@media(max-width:359px) {
  .game-ranking-head, .game-ranking-row { grid-template-columns:34px minmax(0,1fr) 26px repeat(3,30px) 34px; gap:4px; }
  .game-player-avatar { width:34px; height:34px; }
  .game-ranking .game-avatar { width:32px; height:32px; }
  .family-games .game-ranking .game-round { min-width:34px; width:34px; height:34px; min-height:34px; }
  .game-player-name { font-size:12px; padding:7px 8px; }
  .family-games .game-setup-actions .game-button { font-size:12px; }
}