:root {
  --bg: #06111c;
  --panel: #0c1f31;
  --panel-2: #112a41;
  --line: #1c3b57;
  --line-2: #27506f;
  --text: #e4eef6;
  --muted: #88a3ba;
  --accent: #36d3c4;
  --accent-ink: #042220;
  --warn: #ffb547;
  --hit: #ff5a3c;
  --miss: #a9cbe2;
  --water: #0d2842;
  --water-2: #123452;
  --ship-a: #a3b6c7;
  --ship-b: #6b8194;
  --sunk-a: #7a4a44;
  --sunk-b: #4d2f2b;
  --radius: 14px;
  color-scheme: dark;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1100px 600px at 75% -15%, rgba(40, 110, 160, .35), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(30, 150, 140, .14), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
h1, h2, h3, .brand, .lbl, kbd, .count, .turn-banner { font-family: "Bahnschrift", "Segoe UI", sans-serif; }
h1 { font-size: 30px; font-weight: 600; margin: 0 0 6px; letter-spacing: .01em; }
h2 { font-size: 19px; font-weight: 600; margin: 0 0 14px; letter-spacing: .02em; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 10px; letter-spacing: .06em; text-transform: uppercase; }
p { margin: 0; line-height: 1.5; }
.muted { color: var(--muted); }
.small-text { font-size: 13px; }
.hidden { display: none !important; }

/* ------------------------------------------------ bottoni */
button {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s, opacity .15s;
}
button:hover { background: #17364f; border-color: #36668a; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: default; transform: none; }
input, select, textarea { min-width: 0; max-width: 100%; } /* nelle righe flessibili devono potersi stringere (telefoni) */
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.primary:hover { background: #5fe3d6; border-color: #5fe3d6; }
button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
button.ghost:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
button.small { padding: 6px 12px; font-size: 13px; }
button.big { padding: 13px 18px; font-size: 17px; }
button.danger { background: rgba(255, 90, 60, .12); border-color: rgba(255, 90, 60, .45); color: #ffb3a4; }
button.danger:hover { background: rgba(255, 90, 60, .22); }
kbd {
  display: inline-block; min-width: 20px; padding: 0 5px; margin-left: 4px;
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px;
  font-size: 12px; line-height: 18px; color: var(--muted);
}

/* ------------------------------------------------ barra superiore */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px;
  border-bottom: 1px solid rgba(40, 80, 111, .6);
  background: rgba(6, 17, 28, .7);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.brand svg { width: 26px; height: 26px; }
.brand svg.logo { width: 28px; height: 28px; filter: drop-shadow(0 2px 6px rgba(54, 211, 196, .35)); }
.login-logo { width: 84px; height: 84px; margin: 0 auto 16px; display: block; transform: rotate(-8deg); filter: drop-shadow(0 10px 22px rgba(54, 211, 196, .3)); }
.top-right { display: flex; align-items: center; gap: 10px; }
.conn { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--hit); box-shadow: 0 0 0 3px rgba(255, 90, 60, .18); }
.conn.on i { background: var(--accent); box-shadow: 0 0 0 3px rgba(54, 211, 196, .18); }
.conn.on b { display: none; }
.conn b { font-weight: 500; }
.icon-btn { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; background: transparent; border-color: transparent; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover svg { stroke: var(--text); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); font-weight: 600; font-size: 14px;
}

main { flex: 1; display: flex; flex-direction: column; padding: 26px 22px 40px; }
.screen { width: 100%; max-width: 1240px; margin: 0 auto; animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.card, .panel {
  background: linear-gradient(180deg, rgba(17, 42, 65, .75), rgba(12, 31, 49, .85));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6);
}
.panel { padding: 20px; }

/* ------------------------------------------------ accesso */
#screen-login { display: grid; place-items: center; min-height: 70vh; }
.login-card { width: min(440px, 100%); padding: 34px 32px 28px; text-align: center; }
.login-card > p { margin-bottom: 22px; }
.login-card form { display: flex; gap: 10px; }
.login-card .error { text-align: left; }
input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 14px;
}
input::placeholder { color: #5a7690; }
.error { color: #ff9c87; min-height: 22px; margin-top: 12px; font-size: 14px; }

.radar {
  width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%; position: relative; overflow: hidden;
  background:
    radial-gradient(circle, transparent 0 22%, rgba(54, 211, 196, .35) 22.5% 23.5%, transparent 24% 46%, rgba(54, 211, 196, .35) 46.5% 47.5%, transparent 48%),
    linear-gradient(transparent 49.5%, rgba(54, 211, 196, .3) 49.5% 50.5%, transparent 50.5%),
    linear-gradient(90deg, transparent 49.5%, rgba(54, 211, 196, .3) 49.5% 50.5%, transparent 50.5%),
    #081a2a;
  border: 1.5px solid rgba(54, 211, 196, .5);
}
.radar i {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(54, 211, 196, .55), transparent 25%);
  animation: sweep 2.6s linear infinite;
}
.radar.small { width: 64px; height: 64px; margin-bottom: 12px; }
@keyframes sweep { to { transform: rotate(360deg); } }

/* ------------------------------------------------ lobby */
.lobby { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.count {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; margin-left: 6px;
  border-radius: 999px; background: rgba(54, 211, 196, .15); color: var(--accent); font-size: 13px; vertical-align: 2px;
}
.user-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.user-list li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px;
  background: rgba(6, 17, 28, .45); border: 1px solid var(--line); border-radius: 12px;
}
.user-list .who { flex: 1; min-width: 0; }
.user-list .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-list .state { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.user-list .state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.user-list .state.busy::before { background: var(--warn); }
.user-list .pending { font-size: 13px; color: var(--muted); }
.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-family: "Bahnschrift", sans-serif; font-weight: 600; font-size: 15px; color: #06111c;
}
.chip .avatar { width: 28px; height: 28px; font-size: 13px; }
/* immagine del profilo: foto o icona sopra l'iniziale */
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.has-img .ini, .avatar.has-emo .ini { visibility: hidden; }
.avatar .emo { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.2em; line-height: 1; }
.avatar.has-emo { background: #163650 !important; box-shadow: inset 0 0 0 1px var(--line-2); }
.avatar.xs { display: inline-grid; width: 20px; height: 20px; font-size: 10px; vertical-align: -5px; margin-right: 6px; }
.avatar.lg { display: inline-grid; width: 46px; height: 46px; font-size: 19px; margin-right: 12px; vertical-align: middle; }
.avatar.xl { width: 88px; height: 88px; font-size: 36px; }
#playerTitle { display: flex; align-items: center; }
.avatar-edit { display: flex; gap: 18px; align-items: center; margin: 12px 0 2px; }
.avatar-actions { display: grid; gap: 10px; min-width: 0; }
.avatar-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn-like {
  display: inline-block; cursor: pointer; padding: 6px 12px; font-size: 13px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
}
.btn-like:hover { background: #17364f; border-color: #36668a; }
.emoji-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.emo-btn { width: 34px; height: 34px; padding: 0; font-size: 18px; line-height: 1; border-radius: 8px; }
.emo-btn.on { border-color: var(--accent); background: rgba(54, 211, 196, .15); }
button.chip { color: var(--text); }
button.chip:hover { background: var(--panel-2); border-color: var(--line-2); }
button.chip svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button.chip:hover svg { stroke: var(--accent); }
button.chip.busy { cursor: default; }
button.chip.busy svg { display: none; }
.rename-card { width: min(400px, 100%); padding: 28px 28px 18px; }
.rename-card h2 { margin-bottom: 4px; }
.rename-card form { display: grid; gap: 14px; margin-top: 18px; }
.rename-card .row { display: flex; justify-content: flex-end; gap: 10px; }
.empty { text-align: center; padding: 26px 10px 14px; }

.invites { display: grid; gap: 10px; }
.invites:not(:empty) { margin-bottom: 20px; }
.invite {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 181, 71, .16), rgba(255, 181, 71, .05));
  border: 1px solid rgba(255, 181, 71, .45);
}
.invite.new { animation: nudge .5s ease-out; }
.invite p { flex: 1; }
.invite b { color: var(--warn); }
@keyframes nudge { 0% { transform: translateX(-6px); opacity: 0; } 60% { transform: translateX(3px); } }

.leaderboard { list-style: none; margin: 0; padding: 0; counter-reset: pos; }
.leaderboard li {
  counter-increment: pos; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid rgba(28, 59, 87, .7); font-size: 14px;
}
.leaderboard li:last-child { border-bottom: 0; }
.leaderboard li::before { content: counter(pos); font-family: "Bahnschrift", sans-serif; color: var(--muted); text-align: center; }
.leaderboard li:nth-child(1)::before { color: #ffd166; }
.leaderboard li:nth-child(2)::before { color: #cfd8e0; }
.leaderboard li:nth-child(3)::before { color: #e0a36b; }
.leaderboard li.me { color: var(--accent); }
.leaderboard .lb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaderboard .lb-score { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.leaderboard .lb-score b { color: var(--text); font-weight: 600; }

/* ------------------------------------------------ tornei */
.lobby-main { display: grid; gap: 20px; align-content: start; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
.tourn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tourn-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; cursor: pointer;
  background: rgba(6, 17, 28, .45); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, background .15s;
}
.tourn-item:hover { border-color: var(--line-2); background: rgba(19, 48, 74, .5); }
.tourn-item.done { opacity: .75; }
.ti-info { flex: 1; min-width: 0; }
.ti-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ti-meta { font-size: 13px; color: var(--muted); }
.ti-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.badge { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--muted); white-space: nowrap; }
.badge.go { background: rgba(255, 181, 71, .16); color: var(--warn); font-weight: 600; }
.trophies { color: #ffd166; font-size: 13px; }

.back { margin: -6px 0 10px -10px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#tournTitle .vs { font-size: 14px; }
#tournInvites:not(:empty) { margin-bottom: 16px; }
.t-invite { background: linear-gradient(90deg, rgba(54, 211, 196, .16), rgba(54, 211, 196, .04)); border-color: rgba(54, 211, 196, .5); }
.t-invite b { color: var(--accent); }
.my-matches { margin-bottom: 18px; border-color: rgba(54, 211, 196, .45); }
.my-matches h3 { color: var(--accent); }
.mm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid rgba(28, 59, 87, .7); }
.mm-row:first-of-type { border-top: 0; }
.mm-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.mm-round { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--muted); }
.play-ctl { display: flex; align-items: center; gap: 10px; }
.hint { font-size: 13px; color: var(--muted); }
.hint.go { color: var(--accent); font-weight: 600; }
.my-wait { margin: 0 0 18px; }

.pl { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.pl .dot { width: 7px; height: 7px; border-radius: 50%; background: #3b566e; flex: none; }
.pl .dot.on { background: var(--accent); }
.pl.me { color: var(--accent); font-weight: 600; }
.pl.out { color: var(--muted); text-decoration: line-through; }
.pl small { font-size: 11px; }
.tbd { color: #56718a; font-style: italic; }

.signups { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.signups li { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(6, 17, 28, .45); border: 1px solid var(--line); }
.signups .avatar { width: 28px; height: 28px; font-size: 13px; }

.legend { margin-bottom: 12px; }
.bracket { display: flex; gap: 30px; overflow-x: auto; padding: 4px 2px 10px; }
.bracket .round { display: flex; flex-direction: column; min-width: 200px; flex: none; }
.bracket h4 { margin: 0 0 10px; font-family: "Bahnschrift", sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.bracket .matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; }
.bm { position: relative; background: rgba(6, 17, 28, .6); border: 1px solid var(--line); border-radius: 10px; }
.bm.mine { border-color: rgba(54, 211, 196, .6); box-shadow: 0 0 18px -8px rgba(54, 211, 196, .7); }
.bm-p { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; font-size: 14px; min-height: 34px; }
.bm-p + .bm-p { border-top: 1px solid var(--line); }
.bm-p.win { font-weight: 600; }
.bm-p.win .sc { color: var(--accent); }
.bm-p.lose { color: var(--muted); }
.bm-p.lose .pl.me { color: var(--muted); }
.sc { font-family: "Bahnschrift", sans-serif; font-variant-numeric: tabular-nums; color: var(--muted); }
.bm-note { position: absolute; right: 8px; bottom: -9px; font-size: 11px; padding: 0 6px; border-radius: 6px; background: var(--panel); color: var(--muted); }
.bracket .round:not(.champ) .bm::after { content: ""; position: absolute; right: -16px; top: 50%; width: 15px; border-top: 1px solid var(--line-2); }
.champ-box { display: grid; place-items: center; gap: 4px; padding: 16px 12px; text-align: center; }
.champ-box .trophy { font-size: 30px; filter: grayscale(1) opacity(.4); }
.champ-box.won { border-color: rgba(255, 209, 102, .6); background: rgba(255, 209, 102, .07); }
.champ-box.won .trophy { filter: none; }
.champ-name { font-weight: 600; font-size: 16px; }
.champ-box.won .champ-name { color: #ffd166; }

.league { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
.standings { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 10px; }
.standings th { font-weight: 500; font-size: 12px; color: var(--muted); padding: 6px; text-align: center; border-bottom: 1px solid var(--line-2); }
.standings td { padding: 7px 6px; text-align: center; border-bottom: 1px solid rgba(28, 59, 87, .7); font-variant-numeric: tabular-nums; }
.standings .l { text-align: left; }
.standings .pts { font-weight: 700; color: var(--text); }
.standings tr.me td { color: var(--accent); }
.standings tr.champ td { color: #ffd166; }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.day h4 { margin: 0 0 8px; font-family: "Bahnschrift", sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.day .bm { margin-bottom: 8px; }
.bm.compact .bm-p { min-height: 28px; padding: 4px 10px; font-size: 13px; }

.t-tag { display: inline-block; font-size: 13px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: rgba(255, 209, 102, .1); color: #ffd166; vertical-align: 3px; font-family: "Segoe UI", sans-serif; letter-spacing: 0; }
#battleTourn { margin-bottom: 10px; }

.format-pick { display: grid; gap: 8px; }
.format-pick label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.format-pick label:has(input:checked) { border-color: var(--accent); background: rgba(54, 211, 196, .08); }
.format-pick input { flex: none; width: auto; margin: 3px 0 0; padding: 0; accent-color: var(--accent); }
.format-pick b { display: block; font-size: 14px; }
.format-pick small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }

/* ------------------------------------------------ GiòCando: homepage */
.login-card h1 .accent, .home-hero h1 span { color: var(--accent); }
.home-hero { text-align: center; margin: 6px 0 26px; }
.home-hero h1 { font-size: 44px; letter-spacing: .02em; margin-bottom: 4px; }
#homeInvites:not(:empty) { margin-bottom: 20px; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-bottom: 22px; }
.game-card {
  position: relative; display: grid; grid-template-rows: auto 1fr; gap: 0; padding: 0; overflow: hidden; text-align: left;
  border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(17, 42, 65, .9), rgba(12, 31, 49, .95));
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .7); transition: transform .15s, border-color .15s, box-shadow .15s;
}
button.game-card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .8); background: linear-gradient(180deg, rgba(20, 50, 76, .95), rgba(12, 31, 49, .95)); }
.gc-art { width: 100%; height: 130px; display: block; }
.game-card.navale .gc-art { background: linear-gradient(180deg, #123a5a, #0b2a43); }
.game-card.hangman .gc-art { background: linear-gradient(180deg, #2a2440, #1a1730); }
.gc-art .sea { fill: #1f6fa0; }
.gc-art .hull { fill: #c9d6e2; }
.gc-art .sail { fill: #f4f8fb; }
.gc-art .sun { fill: #ffd166; }
.gc-art .gal, .gc-art .man, .gc-art .dash { fill: none; stroke-linecap: round; stroke-width: 3; }
.gc-art .gal { stroke: #c9a46c; }
.gc-art .man { stroke: #f4f8fb; }
.gc-art .dash { stroke: var(--accent); }
.gc-body { display: grid; gap: 4px; padding: 16px 18px 18px; align-content: start; }
.gc-body b { font-family: "Bahnschrift", sans-serif; font-size: 21px; font-weight: 600; }
.gc-body small { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.gc-meta { color: var(--accent); font-size: 13px; min-height: 18px; margin-top: 4px; }
.gc-badge { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 999px; background: var(--warn); color: #2a1c00; font-size: 12.5px; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.home-public { margin-top: 8px; font-size: 14px; color: var(--muted); }
.home-public a { color: var(--accent); font-weight: 600; word-break: break-all; }
.game-card.soon { display: grid; place-items: center; min-height: 230px; border-style: dashed; background: transparent; box-shadow: none; text-align: center; }
.game-card.soon b { color: var(--muted); }
.online-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.online-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(6, 17, 28, .5); border: 1px solid var(--line); }
.online-chip .avatar { width: 28px; height: 28px; font-size: 12px; }
.online-chip b { font-weight: 600; font-size: 14px; }
.online-chip small { font-size: 12px; color: var(--accent); }
.online-chip.busy small { color: var(--warn); }
.game-title { margin: -4px 0 16px; }
.game-title h1 { font-size: 28px; }
.rules-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ------------------------------------------------ impiccato */
.h-score { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.h-round { font-size: 13px; color: var(--muted); margin-right: 4px; }
.h-pts { padding: 4px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-family: "Bahnschrift", sans-serif; font-size: 15px; }
.h-pts.me { border-color: rgba(54, 211, 196, .55); color: var(--accent); }
.h-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 230px; gap: 20px; align-items: start; }
#hTimer { margin: -10px 0 18px; }
.h-players ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hp-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name score" "tag score"; align-items: center; padding: 6px 8px; border-radius: 8px; }
.hp-row .hp-name { grid-area: name; display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-row .hp-tag { grid-area: tag; font-size: 12px; color: var(--muted); min-height: 16px; padding-left: 26px; }
.hp-row .hp-tag.go { color: var(--accent); font-weight: 600; }
.hp-row .hp-score { grid-area: score; font-size: 20px; font-variant-numeric: tabular-nums; }
.hp-row.me .hp-name { font-weight: 700; }
.hp-row.turn { background: rgba(255, 255, 255, .06); box-shadow: inset 3px 0 0 var(--accent); }
.hp-row.gone { opacity: .5; text-decoration: line-through; }
.h-keys.waiting { opacity: .55; }
.h-log { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; color: var(--muted); max-height: 150px; overflow-y: auto; }
.h-log li.ok { color: var(--text); }
.h-log li.ko { color: #d79a92; }
.badge.warnb { background: rgba(255, 181, 71, .18); color: var(--warn); font-weight: 600; }
.tourn-item.room { cursor: default; flex-wrap: wrap; }
.tourn-item.room.mine { border-color: var(--accent); }
.room-players { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; }
.room-p { display: inline-flex; align-items: center; }
@media (max-width: 1150px) {
  .h-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .h-players { grid-column: 1 / -1; }
  .h-players ol { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
.h-gallows { display: grid; justify-items: center; gap: 8px; }
#hSvg { width: 100%; max-width: 260px; }
#hSvg .gal { fill: none; stroke: #c9a46c; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
#hSvg .gal.thin { stroke-width: 5; }
#hSvg .hp { fill: none; stroke: var(--text); stroke-width: 6; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
#hSvg .hp.on { opacity: 1; }
#hSvg circle.hp { stroke-width: 5; }
#hSvg.dead .hp { stroke: var(--hit); }
.h-errors { font-size: 14px; color: var(--muted); }
.h-main { min-height: 300px; }
.h-form { display: grid; gap: 10px; margin-top: 10px; }
.h-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.h-form-row .primary { margin-left: auto; }
#hWordInput { font-family: "Bahnschrift", sans-serif; font-size: 20px; letter-spacing: .12em; text-transform: uppercase; }
.h-hint { color: var(--warn); margin-bottom: 12px; min-height: 22px; }
.h-word { display: flex; flex-wrap: wrap; gap: 6px; row-gap: 10px; margin: 6px 0 22px; }
.h-tile {
  width: 40px; height: 50px; display: grid; place-items: center; border-bottom: 3px solid #5d8db3;
  font-family: "Bahnschrift", sans-serif; font-size: 30px; font-weight: 600; background: rgba(93, 141, 179, .14); border-radius: 6px 6px 0 0;
}
.h-tile.open { color: var(--accent); border-bottom-color: var(--accent); animation: pop .3s cubic-bezier(.2, 1.6, .4, 1); }
.h-tile.missed { color: var(--hit); }
.h-tile.ghost { color: rgba(228, 238, 246, .25); }
.h-sep { width: 14px; height: 50px; display: grid; place-items: center; font-size: 30px; color: var(--muted); }
.h-sep.space { width: 22px; }
.h-keys { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; max-width: 560px; margin-bottom: 16px; }
.h-key { padding: 9px 0; font-family: "Bahnschrift", sans-serif; font-size: 17px; font-weight: 600; }
.h-key.ok { background: rgba(54, 211, 196, .2); border-color: rgba(54, 211, 196, .6); color: var(--accent); opacity: 1; }
.h-key.ko { background: rgba(255, 90, 60, .12); border-color: rgba(255, 90, 60, .4); color: #ff9c87; opacity: .7; }
.h-try { max-width: 560px; }
.h-result { text-align: center; padding: 30px 10px; display: grid; gap: 8px; justify-items: center; }
.h-result .row { display: flex; gap: 10px; margin-top: 12px; }
.h-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.h-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.h-history li.ok::before { content: "✓ "; color: var(--accent); }
.h-history li.ko::before { content: "✗ "; color: var(--hit); }
.h-def { margin: -8px 0 18px; padding: 12px 14px; border-radius: 12px; background: rgba(6, 17, 28, .45); border: 1px solid var(--line); line-height: 1.45; font-size: 15px; animation: hdef-in .35s ease-out; }
.h-def-word { display: block; letter-spacing: .06em; margin-bottom: 4px; }
.h-def-src, .h-hdef a { font-size: 12px; color: var(--muted); white-space: nowrap; }
.h-def-src:hover, .h-hdef a:hover { color: var(--accent); }
.h-hdef { margin: 2px 0 6px 18px; font-size: 13px; color: var(--muted); line-height: 1.4; }
@keyframes hdef-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .h-layout { grid-template-columns: 1fr; gap: 12px; }
  /* forca in una striscia bassa (disegno piccolo + errori accanto): parola e lettere restano a portata di dito */
  .h-gallows { grid-auto-flow: column; justify-content: center; align-items: center; gap: 18px; padding: 8px 16px !important; }
  .h-gallows #hSvg { width: auto; height: 92px; max-width: none; }
  .h-errors { font-size: 15px; }
  .h-main { min-height: 0; }
  #screen-hgame .turn-banner { font-size: 17px !important; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  #screen-hgame .game-head { margin-bottom: 8px; }
  .h-tile { width: 30px; height: 40px; font-size: 22px; }
  .h-sep { height: 40px; }
  .h-keys { gap: 4px; }
  .h-key { padding: 8px 0; font-size: 15px; }
  .home-hero h1 { font-size: 34px; }
}

/* ------------------------------------------------ prato fiorito */
.game-card.prato .gc-art { background: linear-gradient(180deg, #1f4a2a, #163a20); }
.gc-art .pg rect { fill: #5fae45; } .gc-art .pg rect.o { fill: #e6d7a8; }
.gc-art .pn text { font: 700 12px "Bahnschrift", sans-serif; text-anchor: middle; }
.gc-art .pn .n1 { fill: #1e5bd8; } .gc-art .pn .n2 { fill: #2e7d32; } .gc-art .pn .n3 { fill: #d32f2f; }
.gc-art .pf { font-size: 12px; text-anchor: middle; }
.p-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.p-side { display: grid; gap: 18px; }
.p-main { display: grid; justify-items: center; gap: 12px; }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 420px; }
.p-count { font: 700 20px "Bahnschrift", sans-serif; min-width: 90px; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .25); text-align: center; font-variant-numeric: tabular-nums; }
.p-face { font-size: 30px; line-height: 1; width: 54px; height: 54px; padding: 0; border-radius: 50%; }
.p-msg { min-height: 22px; font-weight: 600; color: var(--muted); text-align: center; }
.p-msg.ok { color: #9bdc7c; } .p-msg.ko { color: var(--hit); }
.p-wrap { width: 100%; display: flex; justify-content: center; overflow-x: auto; }
.p-board { display: grid; gap: 1px; padding: 1px; background: #2c5a24; border-radius: 6px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.p-cell { width: var(--pc); height: var(--pc); display: grid; place-items: center; font: 700 calc(var(--pc) * .58) "Bahnschrift", "Segoe UI", sans-serif; cursor: pointer; line-height: 1; }
.p-cell.h, .p-cell.f { background: linear-gradient(145deg, #7cc95c, #5fae45); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.p-cell.h:hover { background: #8fd66f; }
.p-cell.f { font-size: calc(var(--pc) * .5); }
.p-cell.o { background: #e9dbb0; cursor: default; }
.p-cell.m, .p-cell.x { background: #e9dbb0; font-size: calc(var(--pc) * .6); }
.p-cell.b { background: #e5533d; font-size: calc(var(--pc) * .6); }
.p-cell.x { color: #c62828; }
.p-board.over .p-cell { cursor: default; }
.p-cell.n1 { color: #1e5bd8; } .p-cell.n2 { color: #2e7d32; } .p-cell.n3 { color: #d32f2f; } .p-cell.n4 { color: #283593; }
.p-cell.n5 { color: #8d3b12; } .p-cell.n6 { color: #00838f; } .p-cell.n7 { color: #222; } .p-cell.n8 { color: #666; }
.p-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.p-mode.on { background: #c0392b; border-color: #c0392b; color: #fff; }
.p-mine { display: grid; gap: 6px; }
.p-mrow { display: grid; grid-template-columns: 80px 1fr auto; grid-template-rows: auto auto; gap: 0 10px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, .14); align-items: baseline; }
.p-mrow.on { box-shadow: inset 0 0 0 1px var(--accent); }
.p-mrow span { font: 600 18px "Bahnschrift", sans-serif; }
.p-mrow small { color: var(--muted); font-size: 12.5px; text-align: right; }
.p-mrow small:last-child { grid-column: 2 / -1; text-align: left; }
html:not([data-theme="excel"]) body[data-zone="prato"] {
  --bg: #11201a;
  --panel: #18302a;
  --panel-2: #1f3b33;
  --line: rgba(220, 240, 220, .12);
  --line-2: rgba(220, 240, 220, .26);
  --accent: #9bdc7c;
  --accent-ink: #13270b;
  background: radial-gradient(900px 500px at 80% -10%, rgba(155, 220, 124, .12), transparent 60%), radial-gradient(700px 400px at -10% 110%, rgba(240, 180, 200, .08), transparent 60%), var(--bg);
}
html:not([data-theme="excel"]) body[data-zone="prato"] main .panel { background: rgba(24, 48, 42, .92); border-color: var(--line); }
@media (max-width: 980px) { .p-layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .p-main { padding: 12px 6px; gap: 8px; }
  .p-count { font-size: 17px; min-width: 70px; padding: 4px 8px; }
  .p-face { width: 46px; height: 46px; font-size: 26px; }
}

/* ------------------------------------------------ parola del giorno */
.game-card.word .gc-art { background: linear-gradient(180deg, #2a2236, #1c1726); }
.gc-art .wt .g { fill: #5aa65a; } .gc-art .wt .y { fill: #d4ad3c; } .gc-art .wt .x { fill: #5b5866; }
.gc-art .wl text { fill: #fff; font: 700 12px "Bahnschrift", sans-serif; text-anchor: middle; }
.gc-art .we rect { fill: none; stroke: #5b5866; stroke-width: 1.5; }
.w-title p { margin-top: 2px; }
.w-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.w-side { display: grid; gap: 18px; }
.w-main { display: grid; justify-items: center; gap: 14px; padding-top: 26px; padding-bottom: 26px; }
.w-grid { display: grid; gap: 7px; }
.w-row { display: grid; grid-template-columns: repeat(5, var(--wt)); gap: 7px; --wt: 58px; }
.w-row.shake { animation: wshake .4s; }
.w-tile { width: var(--wt); height: var(--wt); display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .12); border-radius: 6px;
  font: 700 30px "Bahnschrift", "Segoe UI", sans-serif; text-transform: uppercase; color: var(--text); background: rgba(0, 0, 0, .12); }
.w-tile.cur { border-color: rgba(255, 255, 255, .2); }
.w-tile.typed { border-color: rgba(255, 255, 255, .5); animation: pop .12s ease-out; }
.w-tile.g { background: #5aa65a; border-color: #5aa65a; color: #fff; }
.w-tile.y { background: #d4ad3c; border-color: #d4ad3c; color: #fff; }
.w-tile.x { background: #46434f; border-color: #46434f; color: #e9e6f0; }
.w-tile.flip { animation: wflip .5s ease-in-out both; }
.w-tile.win { animation-name: wflip, wjump; animation-duration: .5s, .5s; animation-delay: inherit; }
@keyframes wflip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); filter: brightness(.6); } 100% { transform: rotateX(0); } }
@keyframes wjump { 50% { transform: translateY(-10px); } }
@keyframes wshake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.w-msg { min-height: 22px; font-weight: 600; color: var(--muted); text-align: center; }
.w-msg.bad { color: var(--warn); }
.w-keys { display: grid; gap: 7px; width: 100%; max-width: 520px; }
.w-krow { display: flex; gap: 6px; justify-content: center; }
.w-key { flex: 1 1 0; max-width: 46px; height: 54px; padding: 0; font: 700 17px "Bahnschrift", sans-serif; border-radius: 7px; background: #3a3746; border-color: #4a4757; color: var(--text); touch-action: manipulation; }
.w-key.wide { max-width: 74px; flex: 1.6 1 0; font-size: 14px; }
.w-key.g { background: #5aa65a; border-color: #5aa65a; color: #fff; }
.w-key.y { background: #d4ad3c; border-color: #d4ad3c; color: #fff; }
.w-key.x { background: #26242d; border-color: #26242d; color: #77738a; }
.w-end { width: 100%; max-width: 520px; display: grid; gap: 12px; }
.w-result { display: grid; justify-items: center; gap: 2px; text-align: center; }
.w-result b { font: 600 26px "Bahnschrift", sans-serif; }
.w-result.ok b { color: #7cc97c; }
.w-result.ko b { color: var(--warn); }
.w-def { margin: 0; }
.w-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.w-chip { display: inline-block; padding: 0 6px; border-radius: 4px; color: #fff; font-weight: 600; }
.w-chip.g { background: #5aa65a; } .w-chip.y { background: #d4ad3c; } .w-chip.x { background: #5b5866; }
.w-today { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.w-today li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, .14); }
.w-today li.me { box-shadow: inset 0 0 0 1px var(--accent); }
.w-today li.first { background: linear-gradient(90deg, rgba(212, 173, 60, .2), rgba(0, 0, 0, .14)); }
.w-rank { width: 22px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 700; flex: none; }
.w-today li.first .w-rank { font-size: 16px; }
.w-today .w-state { text-align: right; }
.w-today .w-mini { padding-left: 30px; }
.w-who { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.w-state { font-size: 13px; color: var(--muted); font-weight: 600; }
.w-state.ok { color: #7cc97c; } .w-state.ko { color: var(--warn); }
.w-mini { grid-column: 1 / -1; display: grid; gap: 2px; justify-content: start; }
.w-mini i { display: flex; gap: 2px; }
.w-mini b { width: 11px; height: 11px; border-radius: 2px; }
.w-mini b.g { background: #5aa65a; } .w-mini b.y { background: #d4ad3c; } .w-mini b.x { background: #5b5866; }
.w-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; margin-bottom: 12px; }
.w-stats b { display: block; font: 600 24px "Bahnschrift", sans-serif; }
.w-stats small { color: var(--muted); font-size: 12px; line-height: 1.2; display: block; }
.w-dist { display: grid; gap: 4px; }
.w-bar { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; font-size: 13px; }
.w-bar i { display: block; font-style: normal; text-align: right; padding: 1px 6px; border-radius: 3px; background: #4a4757; font-weight: 600; min-width: 22px; }
.w-bar.today i { background: #5aa65a; }
html:not([data-theme="excel"]) body[data-zone="word"] {
  --bg: #17141f;
  --panel: #221e2c;
  --panel-2: #2a2535;
  --line: rgba(233, 228, 245, .12);
  --line-2: rgba(233, 228, 245, .26);
  --accent: #7cc97c;
  --accent-ink: #10230f;
  background: radial-gradient(900px 500px at 80% -10%, rgba(124, 201, 124, .1), transparent 60%), radial-gradient(700px 400px at -10% 110%, rgba(212, 173, 60, .08), transparent 60%), var(--bg);
}
html:not([data-theme="excel"]) body[data-zone="word"] main .panel { background: rgba(34, 30, 44, .92); border-color: var(--line); }
@media (max-width: 980px) {
  .w-layout { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .w-main { padding: 12px 8px; gap: 8px; }
  /* griglia e tastiera devono stare insieme nello schermo: le caselle si adattano anche all'altezza */
  .w-row { --wt: max(34px, min(52px, calc((100vw - 110px) / 5), calc((100dvh - 440px) / 6))); gap: 5px; }
  .w-grid { gap: 5px; }
  .w-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
  .w-title h1 { font-size: 22px; margin: 0; }
  .w-title p { font-size: 13px; }
  .w-tile { font-size: calc(var(--wt) * .5); }
  .w-krow { gap: 4px; }
  .w-key { height: 50px; font-size: 16px; }
  .w-key.wide { font-size: 12px; }
}

/* ------------------------------------------------ impiccato: tema lavagna e gesso (solo nelle sue schermate) */
html:not([data-theme="excel"]) body[data-zone="hangman"] {
  --bg: #1c2a26;
  --panel: #233530;
  --panel-2: #2b4039;
  --line: rgba(238, 242, 234, .16);
  --line-2: rgba(238, 242, 234, .3);
  --text: #eef2ea;
  --muted: #a7b6ab;
  --accent: #f2d46b;
  --accent-ink: #2a2306;
  --warn: #f5a962;
  --hit: #f28b82;
  --chalk: "Segoe Print", "Chalkboard SE", "Comic Sans MS", cursive;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(255, 255, 255, .05), transparent 60%),
    radial-gradient(700px 400px at 85% 90%, rgba(255, 255, 255, .04), transparent 60%),
    repeating-radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px),
    #1c2a26;
}
html:not([data-theme="excel"]) body[data-zone="hangman"] main .panel,
html:not([data-theme="excel"]) body[data-zone="hangman"] main .card {
  background: rgba(255, 255, 255, .035); border: 1.5px solid rgba(238, 242, 234, .2); border-radius: 12px;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .15);
}
html:not([data-theme="excel"]) body[data-zone="hangman"] main :is(h1, h2, h3, .h-tile, .h-sep, .h-key, .h-pts, .turn-banner, #hWordInput) { font-family: var(--chalk); letter-spacing: .01em; }
html:not([data-theme="excel"]) body[data-zone="hangman"] main h3 { text-transform: none; letter-spacing: 0; font-size: 16px; }
html:not([data-theme="excel"]) body[data-zone="hangman"] .game-title h1 { font-size: 34px; color: var(--accent); transform: rotate(-1.5deg); display: inline-block; }
html:not([data-theme="excel"]) body[data-zone="hangman"] main button { background: transparent; border: 1.5px solid rgba(238, 242, 234, .35); color: var(--text); }
html:not([data-theme="excel"]) body[data-zone="hangman"] main button:hover { background: rgba(255, 255, 255, .06); border-color: rgba(238, 242, 234, .6); }
html:not([data-theme="excel"]) body[data-zone="hangman"] main button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
html:not([data-theme="excel"]) body[data-zone="hangman"] main button.ghost { border-color: transparent; color: var(--muted); }
html:not([data-theme="excel"]) body[data-zone="hangman"] main input,
html:not([data-theme="excel"]) body[data-zone="hangman"] main select { background: rgba(0, 0, 0, .18); border: 1.5px solid rgba(238, 242, 234, .25); color: var(--text); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .user-list li,
html:not([data-theme="excel"]) body[data-zone="hangman"] .invite { background: rgba(255, 255, 255, .03); border: 1.5px dashed rgba(238, 242, 234, .22); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .invite b { color: var(--accent); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .count { background: rgba(242, 212, 107, .16); color: var(--accent); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .turn-banner { background: rgba(255, 255, 255, .04); border: 1.5px solid rgba(238, 242, 234, .22); color: var(--text); font-size: 20px; }
html:not([data-theme="excel"]) body[data-zone="hangman"] .turn-banner.mine { background: rgba(242, 212, 107, .1); border-color: rgba(242, 212, 107, .6); color: var(--accent); box-shadow: none; }
html:not([data-theme="excel"]) body[data-zone="hangman"] .turn-banner.win { background: rgba(167, 230, 160, .08); border-color: rgba(167, 230, 160, .5); color: #b8eab0; }
html:not([data-theme="excel"]) body[data-zone="hangman"] .turn-banner.lose { background: rgba(242, 139, 130, .08); border-color: rgba(242, 139, 130, .5); color: var(--hit); }
html:not([data-theme="excel"]) body[data-zone="hangman"] #hSvg .gal { stroke: #d9c9a6; }
html:not([data-theme="excel"]) body[data-zone="hangman"] #hSvg .hp { stroke: #f4f6f1; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .6)); }
html:not([data-theme="excel"]) body[data-zone="hangman"] #hSvg.dead .hp { stroke: var(--hit); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .h-tile { background: transparent; border-bottom: 3px solid rgba(238, 242, 234, .75); border-radius: 0; font-size: 32px; }
html:not([data-theme="excel"]) body[data-zone="hangman"] .h-tile.open { color: var(--accent); border-bottom-color: var(--accent); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .h-tile.missed { color: var(--hit); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .h-tile.ghost { color: rgba(238, 242, 234, .25); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .h-key { font-size: 18px; padding: 7px 0; border-radius: 8px; }
html:not([data-theme="excel"]) body[data-zone="hangman"] .h-key.ok { background: rgba(242, 212, 107, .16); border-color: rgba(242, 212, 107, .6); color: var(--accent); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .h-key.ko { background: transparent; border-color: rgba(242, 139, 130, .35); color: var(--hit); text-decoration: line-through; }
html:not([data-theme="excel"]) body[data-zone="hangman"] .h-pts { background: transparent; border: 1.5px solid rgba(238, 242, 234, .25); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .h-pts.me { border-color: var(--accent); color: var(--accent); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .h-hint { color: var(--warn); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .leaderboard li { border-bottom-color: rgba(238, 242, 234, .12); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .hp-row .hp-score { font-family: var(--chalk); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .tourn-item { background: rgba(255, 255, 255, .03); border: 1.5px dashed rgba(238, 242, 234, .22); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .tourn-item.room.mine { border-style: solid; border-color: var(--accent); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .timebar { background: rgba(0, 0, 0, .2); border-color: rgba(238, 242, 234, .2); }
html:not([data-theme="excel"]) body[data-zone="hangman"] .timebar i { background: linear-gradient(90deg, rgba(242, 212, 107, .5), rgba(242, 212, 107, .2)); }
.game-card.hangman .gc-art { background: radial-gradient(160px 90px at 30% 20%, rgba(255, 255, 255, .06), transparent), #1f2f2a !important; }
.game-card.hangman .gc-art .gal { stroke: #d9c9a6; }
.game-card.hangman .gc-art .dash { stroke: #f2d46b; }

/* ------------------------------------------------ PIN, profilo, schede */
input.pin { flex: 0 0 92px; text-align: center; letter-spacing: .35em; font-family: "Bahnschrift", sans-serif; }
input.pin::placeholder { letter-spacing: 0; }
.stats-grid > p { grid-column: 1 / -1; }
.pin-hint { margin-top: 10px; text-align: left; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.modal-head h2 { margin: 0; }
.profile-card { width: min(520px, 100%); text-align: left; }
.profile-card h3 { margin: 18px 0 4px; }
.inline-form, .rename-card form.inline-form { display: flex; gap: 8px; margin-top: 8px; }
.inline-form input { min-width: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.stat { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(6, 17, 28, .5); border: 1px solid var(--line); }
.stat .k { font-size: 12px; color: var(--muted); }
.stat b { font-family: "Bahnschrift", sans-serif; font-size: 20px; font-weight: 600; }
.stat small { font-size: 12px; color: var(--muted); min-height: 16px; }

/* ------------------------------------------------ lobby: computer, partite in corso, classifica */
.lobby-side { display: grid; gap: 20px; align-content: start; min-width: 0; }
.ai-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.ai-btn { display: grid; gap: 2px; padding: 10px 6px; text-align: center; }
.ai-btn b { font-family: "Bahnschrift", sans-serif; font-size: 15px; }
.ai-btn small { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.ai-btn[data-level="facile"] b { color: #8fe3a0; }
.ai-btn[data-level="medio"] b { color: var(--warn); }
.ai-btn[data-level="difficile"] b { color: #ff9c87; }
.live-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.live-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border-radius: 12px; background: rgba(6, 17, 28, .45); border: 1px solid var(--line); }
.seg { display: inline-flex; padding: 2px; border-radius: 999px; background: rgba(6, 17, 28, .6); border: 1px solid var(--line); }
.seg-btn { padding: 4px 10px; font-size: 12.5px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); }
.seg-btn:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.seg-btn.on { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.lb-note { margin: -4px 0 8px; }
.leaderboard li { cursor: pointer; border-radius: 6px; }
.leaderboard li:hover { background: rgba(255, 255, 255, .04); }
.inv-rules { display: block; font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------ finestra delle regole */
.check, .select-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.check input { flex: none; width: auto; margin: 3px 0 0; padding: 0; accent-color: var(--accent); }
.check b, .select-row b { display: block; font-size: 14px; }
.check small, .select-row small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.select-row { align-items: center; justify-content: space-between; cursor: default; }
select {
  font: inherit; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 6px 8px; flex: none;
}
#optsForm .row { display: flex; justify-content: flex-end; margin-top: 14px; }

/* ------------------------------------------------ in partita: regole, tempo, spettatori, fumetti */
.battle-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.battle-top:has(> :not(.hidden)) { margin-bottom: 10px; }
#battleTourn { margin-bottom: 0; }
.rules-line { font-size: 13px; color: var(--muted); }
.rules-line:not(:empty)::before { content: "⚙ "; }
#placeRules:not(.hidden):not(:empty) { margin: -8px 0 12px; }
#watchRules:not(.hidden):not(:empty) { margin: -8px 0 12px; }
.spect-count { font-size: 13px; color: var(--muted); margin-left: auto; }
.timebar { position: relative; height: 24px; margin: -10px 0 18px; border-radius: 999px; overflow: hidden; background: rgba(6, 17, 28, .6); border: 1px solid var(--line); }
.timebar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, rgba(54, 211, 196, .45), rgba(54, 211, 196, .2)); transition: width .25s linear; }
.timebar.urgent i { background: linear-gradient(90deg, rgba(255, 90, 60, .6), rgba(255, 90, 60, .25)); }
.timebar span { position: relative; display: block; text-align: center; font-size: 12.5px; line-height: 22px; font-variant-numeric: tabular-nums; }
#placeTimer { margin: -6px 0 16px; }
.board-wrap h3 { position: relative; }
.bubble {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 5; white-space: nowrap;
  padding: 6px 12px; border-radius: 12px 12px 12px 2px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  background: #f4f8fb; color: #0b1d2e; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.bubble.mine { background: var(--accent); color: var(--accent-ink); }
.bubble.pop { animation: pop .3s cubic-bezier(.2, 1.6, .4, 1); }
.emotes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.emote { padding: 4px 9px; font-size: 12.5px; border-radius: 999px; }
.acc-line { margin-top: 8px; }

/* ------------------------------------------------ armi speciali */
.weapons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.weapon-btn { padding: 5px 10px; font-size: 13px; }
.weapon-btn b { font-weight: 500; color: var(--muted); margin-left: 4px; font-size: 12px; }
.weapon-btn.on { background: rgba(255, 181, 71, .18); border-color: var(--warn); color: var(--warn); }
.board .cell.sonar { background: rgba(255, 181, 71, .12); }
.board .cell[data-sonar]::after {
  content: attr(data-sonar); position: absolute; inset: 18%; z-index: 3; display: grid; place-items: center;
  border-radius: 50%; background: var(--warn); color: #2a1c00; font: 700 13px "Bahnschrift", sans-serif;
}
.board.enemy.armed.aiming .cell.open:hover::before, .board.enemy.armed.aiming .cell.open:hover::after { content: none; }
.board .cell.wpv { background: rgba(255, 181, 71, .38) !important; box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .8); }

/* ------------------------------------------------ pausa e partite sospese */
.pause-bar {
  position: sticky; top: 61px; z-index: 19; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px; background: #3a2c10; border-bottom: 1px solid rgba(255, 181, 71, .55); color: #ffd79a; font-size: 14.5px;
  animation: fade .2s ease-out;
}
.game-extra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.log-panel .game-extra { margin-top: 2px; }
.pause-btn.pending { color: var(--warn); border-color: rgba(255, 181, 71, .5); }
.susp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.susp-item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px 10px 14px;
  background: rgba(255, 181, 71, .06); border: 1px solid rgba(255, 181, 71, .3); border-radius: 12px;
}
.susp-item .ti-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; white-space: normal; }
.susp-item .t-tag { vertical-align: 0; }
.susp-item .ti-actions { flex-wrap: wrap; justify-content: flex-end; }

/* ------------------------------------------------ plance */
.board-frame {
  display: inline-block; padding: 10px 12px 12px 6px; border-radius: var(--radius);
  background: rgba(6, 17, 28, .55); border: 1px solid var(--line);
}
.board {
  --cell: 36px;
  display: grid;
  grid-template-columns: 22px repeat(10, var(--cell));
  grid-template-rows: 22px repeat(10, var(--cell));
  user-select: none;
}
.board.large { --cell: 42px; }
.board.small { --cell: 29px; }
.lbl { display: grid; place-items: center; font-size: 11px; color: #6f8ca5; letter-spacing: .04em; }
.cell {
  position: relative;
  background: var(--water);
  box-shadow: inset 0 0 0 .5px rgba(110, 170, 215, .16);
  transition: background .12s;
}
.cell:nth-child(odd) { background: #0e2a45; }
.board .cell.tl { border-top-left-radius: 8px; }
.board .cell.tr { border-top-right-radius: 8px; }
.board .cell.bl { border-bottom-left-radius: 8px; }
.board .cell.br { border-bottom-right-radius: 8px; }

/* scafo: disegnato con ::after, i segmenti adiacenti si fondono in una nave unica */
.cell.ship::after {
  content: ""; position: absolute; inset: 17% 0; z-index: 1;
  background: linear-gradient(180deg, var(--ship-a), var(--ship-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.cell.ship.v::after { inset: 0 17%; background: linear-gradient(90deg, var(--ship-a), var(--ship-b)); }
.cell.ship.h.start::after { left: 10%; border-radius: calc(var(--cell) * .33) 3px 3px calc(var(--cell) * .33); }
.cell.ship.h.end::after { right: 6%; border-radius: 3px calc(var(--cell) * .5) calc(var(--cell) * .5) 3px; }
.cell.ship.v.start::after { top: 10%; border-radius: calc(var(--cell) * .33) calc(var(--cell) * .33) 3px 3px; }
.cell.ship.v.end::after { bottom: 6%; border-radius: 3px 3px calc(var(--cell) * .5) calc(var(--cell) * .5); }
.cell.ship.sunk::after { background: linear-gradient(180deg, var(--sunk-a), var(--sunk-b)); }
.cell.ship.v.sunk::after { background: linear-gradient(90deg, var(--sunk-a), var(--sunk-b)); }
.cell.ship.ghost::after { background: rgba(163, 182, 199, .16); box-shadow: inset 0 0 0 1px rgba(163, 182, 199, .55); }
.cell.ship.sel::after { background: linear-gradient(180deg, #9ff0e6, #3fbfb2); }
.cell.ship.v.sel::after { background: linear-gradient(90deg, #9ff0e6, #3fbfb2); }

/* colpi: disegnati con ::before, sopra lo scafo */
.cell.miss::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 24%; height: 24%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--miss); opacity: .75; box-shadow: 0 0 0 3px rgba(169, 203, 226, .12);
}
.cell.hit::before {
  content: ""; position: absolute; z-index: 2; inset: 24%; border-radius: 50%;
  background: radial-gradient(circle, #fff1b8 0 16%, #ffb04a 34%, #ff5a3c 60%, #c42a18 100%);
  box-shadow: 0 0 10px 1px rgba(255, 90, 60, .75);
}
.cell.ship.sunk.hit::before { inset: 30%; opacity: .9; box-shadow: none; background: radial-gradient(circle, #ffb04a 0 20%, #c7361f 70%); }
.cell.fresh::before { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.cell.fresh.miss:not(.ship)::after {
  content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 2px solid var(--miss);
  animation: ripple .9s ease-out forwards;
}
.cell.fresh.hit { animation: flash .6s ease-out; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } }
.cell.miss.fresh::before { animation: popc .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes popc { from { transform: translate(-50%, -50%) scale(.2); opacity: 0; } }
@keyframes ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
@keyframes flash { 0% { background: #ff8a5c; } 100% { background: var(--water); } }

/* anteprima di posizionamento */
.cell.pv-ok { background: rgba(54, 211, 196, .38) !important; }
.cell.pv-bad { background: rgba(255, 90, 60, .38) !important; }
#placeBoard .cell { cursor: pointer; }
#placeBoard.locked .cell { cursor: default; }

/* mirino sulla plancia nemica */
.board.enemy .cell.open { cursor: default; }
.board.enemy.armed .cell.open { cursor: crosshair; }
.board.enemy.armed .cell.open:hover { background: var(--water-2); }
.board.enemy.armed .cell.open:hover::before {
  content: ""; position: absolute; inset: 16%; border-radius: 50%; z-index: 2;
  border: 2px solid var(--accent); box-shadow: 0 0 12px rgba(54, 211, 196, .5), inset 0 0 6px rgba(54, 211, 196, .4);
}
.board.enemy.armed .cell.open:hover::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: var(--accent); z-index: 2;
}
.board.enemy:not(.armed) { opacity: .78; transition: opacity .2s; }
.board .lbl.hl { color: var(--accent); }

/* ------------------------------------------------ schieramento */
.game-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 18px; }
.game-head h2 { margin: 0; font-size: 24px; }
.vs { font-size: 16px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.vs b { color: var(--text); font-weight: 600; }
.status-line { color: var(--muted); }
.status-line.go { color: var(--accent); }
.place-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.dock { width: 340px; display: flex; flex-direction: column; gap: 14px; }
.dock-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dock-list li {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; transition: background .12s, border-color .12s;
}
.dock-list li:hover { background: rgba(255, 255, 255, .04); }
.dock-list li.sel { background: rgba(54, 211, 196, .1); border-color: rgba(54, 211, 196, .5); }
.dock-list li.done { color: var(--muted); }
.dock-list li .nm { flex: 1; font-size: 14px; }
.dock-list li .ok { color: var(--accent); font-size: 13px; }
.pips { display: flex; gap: 3px; }
.pips i { width: 13px; height: 13px; border-radius: 3px; background: linear-gradient(180deg, var(--ship-a), var(--ship-b)); }
.pips i:first-child { border-radius: 7px 3px 3px 7px; }
.pips i:last-child { border-radius: 3px 7px 7px 3px; }
.dock-list li.done .pips i { opacity: .35; }
.dock-list li.sel .pips i { background: linear-gradient(180deg, #9ff0e6, #3fbfb2); }
.dock-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dock-actions button { padding: 8px 6px; font-size: 14px; }
.dock.locked .dock-list, .dock.locked .dock-actions { opacity: .45; pointer-events: none; }

/* ------------------------------------------------ battaglia */
.turn-banner {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  min-height: 54px; padding: 10px 18px; margin-bottom: 20px; border-radius: 12px;
  font-size: 19px; font-weight: 600; letter-spacing: .02em;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
  transition: background .2s, border-color .2s, color .2s;
}
.turn-banner.mine { color: var(--accent); background: rgba(54, 211, 196, .09); border-color: rgba(54, 211, 196, .55); box-shadow: 0 0 30px -10px rgba(54, 211, 196, .6); }
.turn-banner.warn { color: var(--warn); border-color: rgba(255, 181, 71, .5); background: rgba(255, 181, 71, .07); }
.turn-banner.win { color: #ffd166; border-color: rgba(255, 209, 102, .55); background: rgba(255, 209, 102, .08); }
.turn-banner.lose { color: #ff9c87; border-color: rgba(255, 90, 60, .45); background: rgba(255, 90, 60, .07); }
.turn-banner button { font-size: 14px; font-family: "Segoe UI", sans-serif; }
.turn-banner .pulse { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }

.battle-layout { display: grid; grid-template-columns: auto auto minmax(220px, 1fr); gap: 22px; align-items: start; }
.board-wrap { min-width: 0; }
.fleet-status { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: 420px; }
.fleet-status li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.fleet-status .pips i { width: 10px; height: 10px; }
.fleet-status li.sunk { color: #9a6d66; text-decoration: line-through; }
.fleet-status li.sunk .pips i { background: linear-gradient(180deg, var(--sunk-a), var(--sunk-b)); }
.fleet-status .pips i.dmg { background: radial-gradient(circle, #ffb04a 0 30%, #d8402a 80%); }

.log-panel { display: flex; flex-direction: column; max-height: 560px; padding: 18px; }
.log { list-style: none; margin: 0 0 12px; padding: 0; overflow-y: auto; flex: 1; min-height: 120px; display: grid; gap: 2px; align-content: start; }
.log li { display: grid; grid-template-columns: 38px 1fr; gap: 8px; padding: 6px 4px; font-size: 13.5px; border-bottom: 1px solid rgba(28, 59, 87, .5); animation: fade .25s; }
.log .c { font-family: "Bahnschrift", sans-serif; color: var(--muted); }
.log .r-hit { color: #ff9c87; }
.log .r-sunk { color: #ff7a5c; font-weight: 600; }
.log .r-miss { color: var(--muted); }
.log .who-me { color: var(--text); }
.log .who-opp { color: #b9cad8; }
.log-panel > button { align-self: flex-start; }

/* ------------------------------------------------ fine partita */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px;
  background: rgba(3, 10, 18, .72); backdrop-filter: blur(4px); animation: fade .3s;
}
.result-card { width: min(440px, 100%); padding: 32px 30px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.result-card .row { display: flex; gap: 10px; margin: 20px 0 6px; }
.result-icon { font-size: 54px; line-height: 1; margin-bottom: 8px; }
.result-icon svg { width: 76px; height: 76px; }
.result-card.win h1 { color: #ffd166; }
.result-card.lose h1 { color: #ff9c87; }
#rematchStatus { min-height: 20px; }

/* ------------------------------------------------ notifiche */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.toast {
  pointer-events: auto; max-width: 360px; padding: 11px 16px; border-radius: 10px; font-size: 14px;
  background: #13324c; border: 1px solid var(--line-2); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7);
  animation: toastIn .25s ease-out;
}
.toast.error { border-color: rgba(255, 90, 60, .6); background: #3a1d1b; }
.toast.good { border-color: rgba(54, 211, 196, .6); }
.toast.warn { border-color: rgba(255, 181, 71, .6); }
.toast.out { opacity: 0; transform: translateY(6px); transition: .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------ responsive */
@media (max-width: 1150px) {
  .league { grid-template-columns: 1fr; }
  .battle-layout { grid-template-columns: auto auto; }
  .log-panel { grid-column: 1 / -1; max-height: 260px; }
}
@media (max-width: 820px) {
  .lobby { grid-template-columns: 1fr; }
  .battle-layout { grid-template-columns: 1fr; }
  .dock { width: 100%; }
  main { padding: 18px 12px 30px; }
  .topbar { padding: 10px 12px; }
  .brand span { display: none; }
  .top-right { gap: 4px; min-width: 0; }
  .conn b { display: none; }
  .chip { min-width: 0; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .invite { flex-wrap: wrap; }
  .invite p { flex: 1 1 calc(100% - 60px); }
}
@media (max-width: 520px) {
  /* accesso: il nome su una riga, PIN e "Entra" sotto (su una riga sola allargavano la pagina) */
  .login-card { padding: 26px 18px 22px; }
  .login-card form { flex-wrap: wrap; }
  .login-card form #nameInput { flex: 1 1 100%; }
  .login-card form #pinInput { flex: 1 1 0; width: auto; }
  /* impiccato: fino a 10-11 lettere su una riga, meno spazio sopra la parola */
  .h-word { gap: 4px; row-gap: 8px; margin: 2px 0 14px; }
  html .h-tile { width: 26px; height: 36px; font-size: 21px; }
  .h-sep { height: 36px; width: 8px; }
  .h-sep.space { width: 14px; }
  .h-hint { margin-bottom: 6px; min-height: 0; }
  /* avvisi in alto, sotto la barra: in basso coprivano la tastiera delle lettere e i pulsanti */
  .toasts { top: 64px; bottom: auto; left: 12px; right: 12px; justify-items: center; align-content: start; }
  /* le plance si adattano alla larghezza del telefono: 10 caselle + etichette + margini */
  .board, .board.large, .board.small { --cell: min(36px, calc((100vw - 84px) / 10)); }
  .board-frame { padding: 8px 8px 8px 4px; }
  .game-head h2 { font-size: 20px; }
  .turn-banner { font-size: 16px; min-height: 46px; }
  .fleet-status { max-width: none; }
}

/* telefoni e tablet: tocco al posto del mouse */
.board, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .board .cell { cursor: pointer; } /* Safari su iPhone invia il "click" solo su elementi cliccabili */
  kbd { display: none; }                         /* niente scorciatoie da tastiera sul telefono */
  input, select, textarea { font-size: 16px !important; } /* sotto i 16px Safari ingrandisce la pagina quando li tocchi */
  button.game-card:hover { transform: none; }    /* dopo un tocco la scheda non resta "sollevata" */
  .game-card.soon { min-height: 120px; }
  .board.enemy.armed .cell.open:hover::before, .board.enemy.armed .cell.open:hover::after { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}