/* Tema "foglio di calcolo": si attiva con html[data-theme="excel"] (pulsante in alto o tasto F2). */

.xl-only { display: none !important; }

html[data-theme="excel"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f3f3f3;
  --line: #d4d4d4;
  --line-2: #c6c6c6;
  --text: #1f1f1f;
  --muted: #616161;
  --accent: #107c41;
  --accent-ink: #ffffff;
  --warn: #9c5700;
  --hit: #c00000;
  --miss: #7f7f7f;
  --xl-green: #107c41;
  --xl-green-dark: #0c5e31;
  --xl-grid: #e1e1e1;
  --xl-head: #f3f3f3;
  --xl-col: 72px;
  --xl-row: 22px;
  --xl-gutter: 40px;
  color-scheme: light;
  font-family: "Aptos Narrow", "Aptos", "Calibri", "Segoe UI", sans-serif;
  font-size: 14px;
}
html[data-theme="excel"] .sea-only,
html[data-theme="excel"] .radar { display: none !important; }
html[data-theme="excel"] .xl-only { display: revert !important; }
html[data-theme="excel"] span.xl-only { display: inline !important; }
html[data-theme="excel"] .xl-chrome.xl-only { display: block !important; }
html[data-theme="excel"] .xl-sheets.xl-only { display: flex !important; }
html[data-theme="excel"] .xl-gutter.xl-only { display: block !important; }
html[data-theme="excel"] *, html[data-theme="excel"] *::before, html[data-theme="excel"] *::after { animation: none !important; }

html[data-theme="excel"] body { background: #fff; }
html[data-theme="excel"] h1, html[data-theme="excel"] h2, html[data-theme="excel"] h3,
html[data-theme="excel"] .brand, html[data-theme="excel"] .lbl, html[data-theme="excel"] kbd,
html[data-theme="excel"] .count, html[data-theme="excel"] .turn-banner,
html[data-theme="excel"] .log .c, html[data-theme="excel"] .avatar { font-family: inherit; }
html[data-theme="excel"] h1 { font-size: 20px; font-weight: 600; }
html[data-theme="excel"] h2 { font-size: 15px; font-weight: 600; letter-spacing: 0; margin-bottom: 10px; }
html[data-theme="excel"] h3 { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: 6px; }
html[data-theme="excel"] .game-head h2 { font-size: 16px; }

/* ------------------------------------------------ controlli stile Office */
html[data-theme="excel"] button {
  background: #fff; color: var(--text); border: 1px solid var(--line-2); border-radius: 3px;
  padding: 5px 12px; font-size: 13px;
}
html[data-theme="excel"] button:hover { background: #f3f3f3; border-color: #b3b3b3; }
html[data-theme="excel"] button.primary { background: var(--xl-green); border-color: var(--xl-green); color: #fff; font-weight: 600; }
html[data-theme="excel"] button.primary:hover { background: var(--xl-green-dark); border-color: var(--xl-green-dark); }
html[data-theme="excel"] button.ghost { background: transparent; border-color: transparent; color: var(--muted); }
html[data-theme="excel"] button.ghost:hover { background: #f3f3f3; color: var(--text); }
html[data-theme="excel"] button.big { padding: 8px 14px; font-size: 14px; }
html[data-theme="excel"] input { background: #fff; color: var(--text); border: 1px solid var(--line-2); border-radius: 2px; padding: 6px 10px; font-size: 14px; }
html[data-theme="excel"] input:focus-visible { outline: none; border-color: var(--xl-green); box-shadow: 0 0 0 1px var(--xl-green); }
html[data-theme="excel"] kbd { border-radius: 2px; border-bottom-width: 1px; }
html[data-theme="excel"] .card, html[data-theme="excel"] .panel {
  background: #fff; border: 1px solid var(--line); border-radius: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* ------------------------------------------------ barra del titolo */
html[data-theme="excel"] .topbar {
  background: var(--xl-green); color: #fff; border: 0; padding: 5px 12px; backdrop-filter: none; min-height: 38px;
}
html[data-theme="excel"] .brand { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; gap: 8px; }
html[data-theme="excel"] .brand em { font-style: normal; opacity: .75; }
html[data-theme="excel"] .brand .xl-logo { width: 18px; height: 18px; display: block !important; fill: #fff; stroke: var(--xl-green); stroke-width: 1.2; }
html[data-theme="excel"] .icon-btn { width: 30px; height: 28px; border: 0; background: transparent; }
html[data-theme="excel"] .icon-btn:hover { background: rgba(255, 255, 255, .15); }
html[data-theme="excel"] .icon-btn svg { stroke: #fff; }
html[data-theme="excel"] .conn { color: #fff; }
html[data-theme="excel"] .conn i, html[data-theme="excel"] .conn.on i { width: 7px; height: 7px; background: #fff; box-shadow: none; }
html[data-theme="excel"] .conn:not(.on) i { background: #ffb3a4; }
html[data-theme="excel"] .chip { background: rgba(255, 255, 255, .14); border: 0; color: #fff; font-weight: 400; font-size: 13px; padding: 2px 10px 2px 3px; }
html[data-theme="excel"] button.chip:hover { background: rgba(255, 255, 255, .24); }
html[data-theme="excel"] button.chip svg { stroke: #fff; }
html[data-theme="excel"] .chip .avatar { width: 22px; height: 22px; font-size: 11px; border-radius: 50%; }
html[data-theme="excel"] #logoutBtn { color: #fff; }
html[data-theme="excel"] #logoutBtn:hover { background: rgba(255, 255, 255, .15); }

/* ------------------------------------------------ barra multifunzione e formula */
.xl-chrome { background: #f3f3f3; color: #1f1f1f; font-size: 12px; border-bottom: 1px solid #d4d4d4; user-select: none; }
.xl-tabs { display: flex; gap: 2px; padding: 4px 8px 0; }
.xl-tabs span { padding: 5px 10px 6px; color: #444; cursor: default; white-space: nowrap; }
.xl-tabs span.on { color: var(--xl-green); font-weight: 600; box-shadow: inset 0 -3px 0 var(--xl-green); }
.xl-ribbon {
  display: flex; height: 78px; margin: 0 6px 6px; padding: 6px 0 4px; overflow: hidden;
  background: #fff; border: 1px solid #e1e1e1; border-radius: 6px;
}
.xl-group { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding: 0 12px; border-right: 1px solid #e1e1e1; flex: none; }
.xl-group .items { display: flex; align-items: center; gap: 8px; }
.xl-group .gname { color: #616161; font-size: 11px; text-align: center; }
.xl-group b, .xl-group i, .xl-group u { width: 16px; text-align: center; font-family: "Times New Roman", serif; font-size: 14px; }
.xl-stack { display: flex; flex-direction: column; gap: 3px; }
.xl-big { padding: 16px 6px 2px; border-radius: 3px; position: relative; }
.xl-big::before { content: ""; position: absolute; left: 50%; top: 0; width: 18px; height: 16px; margin-left: -9px; border: 1.5px solid #616161; border-radius: 2px; background: #fff; }
.xl-drop { display: inline-flex; justify-content: space-between; gap: 6px; width: 40px; padding: 2px 5px 2px 6px; border: 1px solid #c6c6c6; border-radius: 2px; background: #fff; white-space: nowrap; overflow: hidden; }
.xl-drop::after { content: "▾"; color: #616161; }
.xl-sep { width: 1px; height: 16px; background: #d4d4d4; }
.xl-swatch { width: 16px; height: 14px; border-bottom: 4px solid #c00000; position: relative; }
.xl-swatch::before { content: "A"; position: absolute; left: 3px; top: -4px; font-size: 13px; }
.xl-lines { width: 16px; height: 12px; background: repeating-linear-gradient(#616161 0 1.5px, transparent 1.5px 4px); }
.xl-lines.c { clip-path: polygon(10% 0, 90% 0, 90% 100%, 10% 100%); }
.xl-lines.r { margin-left: 2px; }
.xl-formula { display: flex; align-items: stretch; height: 26px; background: #fff; border-top: 1px solid #e1e1e1; }
.xl-namebox { width: 96px; display: flex; align-items: center; padding: 0 8px; border-right: 1px solid #d4d4d4; font-size: 13px; }
.xl-fx { width: 46px; display: grid; place-items: center; color: #616161; font-style: italic; font-family: "Times New Roman", serif; font-size: 14px; border-right: 1px solid #d4d4d4; }
.xl-formula-text { display: flex; align-items: center; padding: 0 10px; font-size: 13px; white-space: nowrap; overflow: hidden; }
.xl-colhead {
  display: flex; height: var(--xl-row); background: var(--xl-head); border-top: 1px solid #d4d4d4; overflow: hidden;
  padding-left: var(--xl-gutter);
}
.xl-colhead span {
  flex: none; width: var(--xl-col); display: grid; place-items: center; font-size: 12px; color: #444;
  box-shadow: inset -1px 0 0 #d4d4d4;
}

/* ------------------------------------------------ area del foglio: griglia, numeri di riga, schede */
html[data-theme="excel"] main {
  position: relative; overflow: hidden;
  padding: calc(var(--xl-row) * 1) 22px 60px calc(var(--xl-gutter) + 22px);
  background-color: #fff;
  background-image:
    linear-gradient(var(--xl-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--xl-grid) 1px, transparent 1px);
  background-size: var(--xl-col) var(--xl-row);
  background-position: var(--xl-gutter) -1px;
}
.xl-gutter { position: absolute; left: 0; top: 0; bottom: 0; width: var(--xl-gutter); background: var(--xl-head); box-shadow: inset -1px 0 0 #d4d4d4; overflow: hidden; }
.xl-gutter span { display: grid; place-items: center; height: var(--xl-row); font-size: 12px; color: #444; box-shadow: inset 0 -1px 0 #d4d4d4; }
html[data-theme="excel"] .screen { position: relative; z-index: 1; }
.xl-sheets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 28px;
  align-items: stretch; background: #f3f3f3; border-top: 1px solid #d4d4d4; font-size: 12px; color: #444; user-select: none;
}
.xl-sheets > span { display: flex; align-items: center; padding: 0 14px; }
.xl-nav { color: #a0a0a0; letter-spacing: 6px; }
.xl-sheet { border-right: 1px solid #d4d4d4; }
.xl-sheet.on { background: #fff; color: var(--xl-green); font-weight: 600; box-shadow: inset 0 -2px 0 var(--xl-green); }
.xl-plus { font-size: 16px; color: #616161; }
.xl-status { margin-left: auto; }
.xl-zoom { color: #616161; }
html[data-theme="excel"] .toasts { bottom: 40px; }

/* ------------------------------------------------ accesso */
html[data-theme="excel"] .login-card { text-align: left; padding: 22px 24px 16px; }
html[data-theme="excel"] #screen-login { min-height: 60vh; }

/* ------------------------------------------------ lobby come tabella */
html[data-theme="excel"] .panel { padding: 12px 14px; }
html[data-theme="excel"] .count { background: #f3f3f3; color: #444; border-radius: 2px; font-size: 12px; height: 18px; }
html[data-theme="excel"] .user-list { gap: 0; border-top: 1px solid var(--line); }
html[data-theme="excel"] .user-list li {
  background: #fff; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 5px 6px; gap: 10px;
}
html[data-theme="excel"] .user-list li:nth-child(even) { background: #f7fbf9; }
html[data-theme="excel"] .avatar { width: 24px; height: 24px; font-size: 11px; border-radius: 2px; }
html[data-theme="excel"] .user-list .state::before { border-radius: 1px; background: var(--xl-green); }
html[data-theme="excel"] .user-list .state.busy::before { background: #c19c00; }
html[data-theme="excel"] .invite { background: #fff4ce; border: 1px solid #f2c94c; border-radius: 0; padding: 8px 10px; }
html[data-theme="excel"] .invite b { color: #7a5b00; }
html[data-theme="excel"] .leaderboard li { padding: 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
html[data-theme="excel"] .leaderboard li::before { color: #616161 !important; }
html[data-theme="excel"] .leaderboard li.me { color: var(--xl-green); font-weight: 600; }
html[data-theme="excel"] .empty { padding: 14px 6px 6px; text-align: left; }

/* ------------------------------------------------ tornei come tabelle */
html[data-theme="excel"] .tourn-list { gap: 0; border-top: 1px solid var(--line); }
html[data-theme="excel"] .tourn-item { background: #fff; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 6px; }
html[data-theme="excel"] .tourn-item:hover { background: #f3f9f5; }
html[data-theme="excel"] .badge { border-radius: 2px; background: #f3f3f3; color: #444; }
html[data-theme="excel"] .badge.go { background: #fff4ce; color: #7a5b00; }
html[data-theme="excel"] .trophies { color: #7a5b00; }
html[data-theme="excel"] .t-invite { background: #e8f2ec; border-color: #a9d6bb; }
html[data-theme="excel"] .t-invite b { color: var(--xl-green-dark); }
html[data-theme="excel"] .my-matches { border-color: #a9d6bb; }
html[data-theme="excel"] .my-matches h3 { color: var(--xl-green-dark); }
html[data-theme="excel"] .mm-row { border-top-color: var(--line); }
html[data-theme="excel"] .mm-round { border-radius: 2px; background: #f3f3f3; color: #444; }
html[data-theme="excel"] .pl .dot { border-radius: 1px; background: #bfbfbf; }
html[data-theme="excel"] .pl .dot.on { background: var(--xl-green); }
html[data-theme="excel"] .pl.me, html[data-theme="excel"] .hint.go { color: var(--xl-green-dark); }
html[data-theme="excel"] .signups li { border-radius: 2px; background: #fff; }
html[data-theme="excel"] .bracket h4, html[data-theme="excel"] .day h4 { font-family: inherit; text-transform: none; letter-spacing: 0; color: #444; }
html[data-theme="excel"] .bm { background: #fff; border-color: #c6c6c6; border-radius: 0; box-shadow: none; }
html[data-theme="excel"] .bm.mine { border-color: var(--xl-green); box-shadow: inset 3px 0 0 var(--xl-green); }
html[data-theme="excel"] .bm-p + .bm-p { border-top-color: var(--xl-grid); }
html[data-theme="excel"] .bm-p.win .sc { color: var(--xl-green-dark); }
html[data-theme="excel"] .sc { font-family: inherit; }
html[data-theme="excel"] .bm-note { background: #fff; border-radius: 0; }
html[data-theme="excel"] .champ-box.won { background: #fff4ce; border-color: #f2c94c; }
html[data-theme="excel"] .champ-box.won .champ-name { color: #7a5b00; }
html[data-theme="excel"] .standings th { background: var(--xl-head); color: #444; border: 1px solid #d4d4d4; }
html[data-theme="excel"] .standings td { border: 1px solid var(--xl-grid); }
html[data-theme="excel"] .standings tr.me td { color: var(--xl-green-dark); background: #f3f9f5; }
html[data-theme="excel"] .standings tr.champ td { color: #7a5b00; }
html[data-theme="excel"] .t-tag { border-radius: 2px; background: #fff4ce; color: #7a5b00; font-family: inherit; }
html[data-theme="excel"] .format-pick label { border-radius: 2px; }
html[data-theme="excel"] .format-pick label:has(input:checked) { border-color: var(--xl-green); background: #e8f2ec; }
html[data-theme="excel"] .format-pick input { accent-color: var(--xl-green); padding: 0; border: 0; box-shadow: none; }

/* GiòCando e impiccato */
html[data-theme="excel"] .login-logo { display: none; }
html[data-theme="excel"] .home-hero { text-align: left; margin-bottom: 14px; }
html[data-theme="excel"] .home-hero h1 { font-size: 20px; }
html[data-theme="excel"] .home-hero h1 span, html[data-theme="excel"] .login-card h1 .accent { color: inherit; }
html[data-theme="excel"] .game-card { border-radius: 0; background: #fff; border-color: var(--line-2); box-shadow: none; }
html[data-theme="excel"] button.game-card:hover { transform: none; background: #f3f9f5; border-color: var(--xl-green); }
html[data-theme="excel"] .gc-art { display: none; }
html[data-theme="excel"] .gc-body b { font-family: inherit; font-size: 15px; }
html[data-theme="excel"] .gc-meta { color: var(--xl-green-dark); }
html[data-theme="excel"] .gc-badge { border-radius: 2px; background: #fff4ce; color: #7a5b00; box-shadow: none; border: 1px solid #f2c94c; }
html[data-theme="excel"] .game-card.soon { min-height: 80px; }
html[data-theme="excel"] .online-chip { border-radius: 2px; background: #fff; }
html[data-theme="excel"] .online-chip small { color: var(--xl-green-dark); }
html[data-theme="excel"] .game-title h1 { font-size: 16px; }
html[data-theme="excel"] .h-pts { border-radius: 2px; background: #fff; font-family: inherit; }
html[data-theme="excel"] .h-pts.me { color: var(--xl-green-dark); border-color: #a9d6bb; }
html[data-theme="excel"] #hSvg .gal { stroke: #7f7f7f; }
html[data-theme="excel"] #hSvg .hp { stroke: #1f1f1f; }
html[data-theme="excel"] .h-tile { font-family: inherit; background: #fff; border: 1px solid var(--xl-grid); border-radius: 0; font-size: 22px; width: 34px; height: 34px; }
html[data-theme="excel"] .h-tile.open { color: var(--xl-green-dark); border-color: var(--xl-grid); background: #c6efce; animation: none; }
html[data-theme="excel"] .h-tile.missed { background: #ffc7ce; color: #9c0006; }
html[data-theme="excel"] .h-sep { height: 34px; }
html[data-theme="excel"] .h-key { font-family: inherit; border-radius: 0; }
html[data-theme="excel"] .h-key.ok { background: #c6efce; border-color: #a9d6bb; color: var(--xl-green-dark); }
html[data-theme="excel"] .h-key.ko { background: #ffc7ce; border-color: #f1bbbc; color: #9c0006; }
html[data-theme="excel"] .h-hint { color: #7a5b00; }
html[data-theme="excel"] .h-def { border-radius: 0; background: #fff; border: 1px solid var(--xl-grid); animation: none; }
html[data-theme="excel"] .h-def-src, html[data-theme="excel"] .h-hdef a { color: #0563c1; text-decoration: underline; }
html[data-theme="excel"] #hWordInput { font-family: inherit; }

/* immagini del profilo: in un "foglio di calcolo" restano solo le iniziali */
html[data-theme="excel"] .avatar img, html[data-theme="excel"] .avatar .emo { display: none; }
html[data-theme="excel"] .avatar .ini { visibility: visible !important; }
html[data-theme="excel"] .avatar.has-emo { background: #d9d9d9 !important; box-shadow: none; }
html[data-theme="excel"] .btn-like { border-radius: 3px; background: #fff; border-color: var(--line-2); color: var(--text); }
html[data-theme="excel"] .btn-like:hover { background: #f3f3f3; }
html[data-theme="excel"] .emo-btn { border-radius: 3px; }
html[data-theme="excel"] .emo-btn.on { border-color: var(--xl-green); background: #e8f2ec; }

/* novità: profilo, computer, partite in corso, regole, tempo, armi */
html[data-theme="excel"] .stat { background: #fff; border-color: var(--line); border-radius: 0; }
html[data-theme="excel"] .stat b { font-family: inherit; }
html[data-theme="excel"] input.pin { font-family: inherit; }
html[data-theme="excel"] .seg { background: #f3f3f3; border-radius: 2px; }
html[data-theme="excel"] .seg-btn { border-radius: 2px; }
html[data-theme="excel"] .seg-btn.on { background: #fff; box-shadow: inset 0 -2px 0 var(--xl-green); color: var(--xl-green-dark); }
html[data-theme="excel"] .ai-btn b { font-family: inherit; color: var(--text) !important; }
html[data-theme="excel"] .live-list { gap: 0; border-top: 1px solid var(--line); }
html[data-theme="excel"] .live-item { background: #fff; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 5px 6px; }
html[data-theme="excel"] .check, html[data-theme="excel"] .select-row { border-radius: 2px; }
html[data-theme="excel"] .check input { accent-color: var(--xl-green); padding: 0; border: 0; box-shadow: none; }
html[data-theme="excel"] select { background: #fff; color: var(--text); border-color: var(--line-2); border-radius: 2px; }
html[data-theme="excel"] .timebar { border-radius: 0; background: #f3f3f3; border-color: var(--line); height: 20px; }
html[data-theme="excel"] .timebar i { background: #c6efce; }
html[data-theme="excel"] .timebar.urgent i { background: #ffc7ce; }
html[data-theme="excel"] .timebar span { line-height: 18px; }
html[data-theme="excel"] .bubble { border-radius: 0; background: #fff4ce; color: #3d2e00; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); border: 1px solid #f2c94c; }
html[data-theme="excel"] .bubble.mine { background: #e8f2ec; border-color: #a9d6bb; color: var(--xl-green-dark); }
html[data-theme="excel"] .emote { border-radius: 2px; }
html[data-theme="excel"] .weapon-btn.on { background: #fff4ce; border-color: #f2c94c; color: #7a5b00; }
html[data-theme="excel"] .board .cell.sonar { background: #fff8e1 !important; }
html[data-theme="excel"] .board .cell[data-sonar]::after { inset: 0; border-radius: 0; background: #ffeb9c; color: #9c5700; font-family: inherit; }
html[data-theme="excel"] .board .cell.wpv { background: #ffeb9c !important; box-shadow: inset 0 0 0 1px #c19c00; }

html[data-theme="excel"] .pause-bar { top: 38px; background: #fff4ce; color: #7a5b00; border-bottom-color: #f2c94c; font-size: 13px; }
html[data-theme="excel"] .susp-list { gap: 0; border-top: 1px solid var(--line); }
html[data-theme="excel"] .susp-item { background: #fffbeb; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 6px; }
html[data-theme="excel"] .pause-btn.pending { color: #7a5b00; border-color: #f2c94c; }

/* ------------------------------------------------ plance come intervalli di celle */
html[data-theme="excel"] .board-frame { background: #fff; border: 1px solid var(--line-2); border-radius: 0; padding: 0; }
html[data-theme="excel"] .board { grid-template-columns: 30px repeat(10, var(--cell)); grid-template-rows: 20px repeat(10, var(--cell)); }
html[data-theme="excel"] .lbl { background: var(--xl-head); color: #444; font-size: 12px; box-shadow: inset -1px -1px 0 #d4d4d4; }
html[data-theme="excel"] .board .lbl.hl { background: #d3f0e0; color: var(--xl-green-dark); font-weight: 600; box-shadow: inset -1px -1px 0 #d4d4d4, inset 0 -2px 0 var(--xl-green); }
html[data-theme="excel"] .cell,
html[data-theme="excel"] .cell:nth-child(odd) { background: #fff; box-shadow: inset -1px -1px 0 var(--xl-grid); border-radius: 0 !important; transition: none; }

/* navi = celle evidenziate */
html[data-theme="excel"] .cell.ship::after {
  inset: 0 !important; border-radius: 0 !important; z-index: 0;
  background: #ddebf7 !important; box-shadow: inset -1px -1px 0 #bdd7ee !important;
}
html[data-theme="excel"] .cell.ship.sel::after { background: #c6efce !important; }
html[data-theme="excel"] .cell.ship.ghost::after { background: #f2f2f2 !important; box-shadow: inset 0 0 0 1px #bfbfbf !important; }
html[data-theme="excel"] .cell.ship.sunk::after { background: #c00000 !important; box-shadow: inset -1px -1px 0 #a00000 !important; }

/* colpi = valori numerici allineati a destra, come in un foglio */
html[data-theme="excel"] .cell.miss::before,
html[data-theme="excel"] .cell.hit::before {
  position: absolute; inset: 0 !important; width: auto; height: auto; transform: none; opacity: 1;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 5px;
  border-radius: 0; box-shadow: none; font-size: 12px; z-index: 1;
}
html[data-theme="excel"] .cell.miss::before { content: "0"; background: none; color: #7f7f7f; }
html[data-theme="excel"] .cell.hit::before { content: "1"; background: #ffc7ce; color: #9c0006; }
html[data-theme="excel"] .cell.ship.sunk.hit::before { background: none; color: #fff; }
html[data-theme="excel"] .cell.fresh.miss:not(.ship)::after { display: none; }
html[data-theme="excel"] .cell.fresh { box-shadow: inset 0 0 0 2px var(--xl-green); }

/* anteprima di posizionamento */
html[data-theme="excel"] .cell.pv-ok { background: #c6efce !important; }
html[data-theme="excel"] .cell.pv-bad { background: #ffc7ce !important; }

/* cella selezionata sotto il mouse */
html[data-theme="excel"] .board.enemy:not(.armed) { opacity: 1; }
html[data-theme="excel"] .board.enemy.armed .cell.open { cursor: cell; }
html[data-theme="excel"] .board.enemy.armed .cell.open:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--xl-green); }
html[data-theme="excel"] .board.enemy.armed .cell.open:hover::before,
html[data-theme="excel"] .board.enemy.armed .cell.open:hover::after { content: none; }
html[data-theme="excel"] #placeBoard .cell:hover { box-shadow: inset 0 0 0 2px var(--xl-green); }

/* ------------------------------------------------ schieramento e battaglia */
html[data-theme="excel"] .vs { font-size: 13px; }
html[data-theme="excel"] .dock { gap: 10px; }
html[data-theme="excel"] .dock-list { gap: 0; border-top: 1px solid var(--line); }
html[data-theme="excel"] .dock-list li { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 5px 8px; }
html[data-theme="excel"] .dock-list li.sel { background: #e8f2ec; box-shadow: inset 3px 0 0 var(--xl-green); border-color: var(--line); }
html[data-theme="excel"] .pips i,
html[data-theme="excel"] .pips i:first-child,
html[data-theme="excel"] .pips i:last-child { border-radius: 0; background: #ddebf7; box-shadow: inset 0 0 0 1px #9bc2e6; }
html[data-theme="excel"] .dock-list li.sel .pips i { background: #c6efce; box-shadow: inset 0 0 0 1px #70ad47; }
html[data-theme="excel"] .fleet-status li.sunk { color: #9c0006; }
html[data-theme="excel"] .fleet-status li.sunk .pips i { background: #c00000; box-shadow: none; }
html[data-theme="excel"] .fleet-status .pips i.dmg { background: #ffc7ce; box-shadow: inset 0 0 0 1px #ff7c80; }

html[data-theme="excel"] .turn-banner {
  justify-content: flex-start; min-height: 32px; padding: 5px 12px; margin-bottom: 14px; border-radius: 0;
  font-size: 13px; font-weight: 400; letter-spacing: 0; background: #fff; border: 1px solid var(--line); color: var(--text); box-shadow: none;
}
html[data-theme="excel"] .turn-banner.mine { background: #e8f2ec; border-color: #a9d6bb; color: var(--xl-green-dark); box-shadow: none; }
html[data-theme="excel"] .turn-banner.warn { background: #fff4ce; border-color: #f2c94c; color: #7a5b00; }
html[data-theme="excel"] .turn-banner.win { background: #e8f2ec; border-color: #a9d6bb; color: var(--xl-green-dark); }
html[data-theme="excel"] .turn-banner.lose { background: #fde7e9; border-color: #f1bbbc; color: #a4262c; }
html[data-theme="excel"] .turn-banner .pulse { border-radius: 1px; width: 8px; height: 8px; }
html[data-theme="excel"] .turn-banner button { font-family: inherit; }

html[data-theme="excel"] .log-panel { padding: 10px 12px; }
html[data-theme="excel"] .log { gap: 0; border-top: 1px solid var(--line); }
html[data-theme="excel"] .log li { border-bottom: 1px solid var(--line); padding: 3px 4px; font-size: 13px; }
html[data-theme="excel"] .log .r-hit, html[data-theme="excel"] .log .r-sunk { color: #9c0006; }
html[data-theme="excel"] .log .who-opp { color: #444; }

/* ------------------------------------------------ finestre di dialogo e notifiche */
html[data-theme="excel"] .overlay { background: rgba(255, 255, 255, .55); backdrop-filter: none; }
html[data-theme="excel"] .result-card, html[data-theme="excel"] .rename-card { box-shadow: 0 8px 28px rgba(0, 0, 0, .22); border-color: #c6c6c6; }
html[data-theme="excel"] .result-icon { display: none; }
html[data-theme="excel"] .result-card.win h1 { color: var(--xl-green-dark); }
html[data-theme="excel"] .result-card.lose h1 { color: #a4262c; }
html[data-theme="excel"] .toast { background: #fff; color: var(--text); border: 1px solid #c6c6c6; border-left: 4px solid var(--xl-green); border-radius: 2px; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
html[data-theme="excel"] .toast.error { background: #fff; border-left-color: #c00000; }
html[data-theme="excel"] .toast.warn { border-left-color: #c19c00; }
html[data-theme="excel"] .error { color: #a4262c; }

@media (max-width: 820px) {
  .xl-ribbon { display: none; }
  html[data-theme="excel"] .brand span.xl-only { display: inline !important; }
  html[data-theme="excel"] .xl-tabs { overflow: hidden; }
}
@media (max-width: 520px) {
  html[data-theme="excel"] { --xl-gutter: 28px; --xl-col: 64px; }
  html[data-theme="excel"] main { padding: var(--xl-row) 10px 60px calc(var(--xl-gutter) + 8px); }
  html[data-theme="excel"] .board, html[data-theme="excel"] .board.large, html[data-theme="excel"] .board.small {
    --cell: min(34px, calc((100vw - 84px) / 10));
    grid-template-columns: 24px repeat(10, var(--cell));
  }
  html[data-theme="excel"] .xl-zoom, html[data-theme="excel"] .xl-nav { display: none; }
  html[data-theme="excel"] .h-tile { width: 26px; height: 30px; font-size: 18px; }
  html[data-theme="excel"] .h-sep { height: 30px; }
  html[data-theme="excel"] .toasts { top: 120px; bottom: auto; }
}

/* parola del giorno nel foglio di calcolo: celle con la formattazione condizionale */
html[data-theme="excel"] .w-tile { border: 1px solid var(--xl-grid); border-radius: 0; background: #fff; color: #222; font-family: inherit; font-weight: 600; }
html[data-theme="excel"] .w-tile.typed { border-color: var(--xl-green); box-shadow: inset 0 0 0 1px var(--xl-green); }
html[data-theme="excel"] .w-tile.g, html[data-theme="excel"] .w-key.g, html[data-theme="excel"] .w-mini b.g, html[data-theme="excel"] .w-chip.g { background: #c6efce; border-color: #a9d6bb; color: #006100; }
html[data-theme="excel"] .w-tile.y, html[data-theme="excel"] .w-key.y, html[data-theme="excel"] .w-mini b.y, html[data-theme="excel"] .w-chip.y { background: #ffeb9c; border-color: #e6cf73; color: #9c5700; }
html[data-theme="excel"] .w-tile.x, html[data-theme="excel"] .w-key.x, html[data-theme="excel"] .w-mini b.x, html[data-theme="excel"] .w-chip.x { background: #d9d9d9; border-color: #c6c6c6; color: #595959; }
html[data-theme="excel"] .w-key { border-radius: 0; background: #fff; color: #222; border: 1px solid #c6c6c6; font-family: inherit; }
html[data-theme="excel"] .w-today li { background: #fff; border: 1px solid var(--xl-grid); border-radius: 0; }
html[data-theme="excel"] .w-bar i { background: #d9d9d9; border-radius: 0; }
html[data-theme="excel"] .w-bar.today i { background: #c6efce; color: #006100; }
html[data-theme="excel"] .w-result.ok b { color: #006100; }
html[data-theme="excel"] .w-result b, html[data-theme="excel"] .w-stats b { font-family: inherit; }
html[data-theme="excel"] .game-card.word .gc-art { background: #fff !important; }
html[data-theme="excel"] .w-today li.first { background: #fff2cc; }
html[data-theme="excel"] .w-today li.me { box-shadow: inset 0 0 0 1px var(--xl-green); }
/* prato fiorito nel foglio di calcolo: celle coperte grigie, scoperte bianche */
html[data-theme="excel"] .p-board { background: var(--xl-grid); border-radius: 0; }
html[data-theme="excel"] .p-cell.h, html[data-theme="excel"] .p-cell.f { background: #d9d9d9; box-shadow: none; }
html[data-theme="excel"] .p-cell.h:hover { background: #e7e6e6; }
html[data-theme="excel"] .p-cell.o, html[data-theme="excel"] .p-cell.m, html[data-theme="excel"] .p-cell.x { background: #fff; font-family: inherit; }
html[data-theme="excel"] .p-cell.b { background: #ffc7ce; }
html[data-theme="excel"] .p-count { background: #fff; border: 1px solid var(--xl-grid); border-radius: 0; font-family: inherit; color: #222; }
html[data-theme="excel"] .p-face { border-radius: 0; }
html[data-theme="excel"] .p-mrow { background: #fff; border: 1px solid var(--xl-grid); border-radius: 0; }
html[data-theme="excel"] .game-card.prato .gc-art { background: #fff !important; }