/* Block Party, il gioco (generato da game/build.py) */
@font-face { font-family: "Bungee"; src: url("/assets/bungee.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("/assets/silkscreen-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("/assets/silkscreen-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/assets/barlow-500.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/assets/barlow-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("/assets/special-elite-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* Layout: one full-bleed WebGL canvas (the block at night), HUD and menus float on top as pixel-cut panels. */
:root {
  --night: #0b1018;
  --glass: rgba(9, 13, 22, 0.80);
  --glass-hi: rgba(20, 30, 42, 0.92);
  --line: rgba(251, 246, 234, 0.16);
  --cream: #fbf6ea;
  --cream-dim: #c9bfaa;
  --pumpkin: #ff8c1a;
  --pumpkin-deep: #7a3314;
  --blood: #c22a2f;
  --moss: #8fcf6a;
  --display: "Bungee", Impact, "Arial Black", system-ui, sans-serif;
  --pixel: "Silkscreen", "Courier New", ui-monospace, monospace;
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--night); color: var(--cream); overflow: hidden; font-family: var(--pixel); font-size: 15px; -webkit-font-smoothing: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; cursor: crosshair; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui .screen, #ui button, #ui input, #ui label, #ui a { pointer-events: auto; }
.cut { clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px)); }
.panel { background: var(--glass); box-shadow: inset 0 0 0 2px var(--line); }
.label { font-family: var(--pixel); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-dim); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--pumpkin); outline-offset: 2px; }

/* ---------- loading */
#loading { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, #1d2b3a 0%, var(--night) 70%); }
.load-box { display: grid; gap: 14px; justify-items: center; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.load-title { font-family: var(--display); font-size: clamp(28px, 5vw, 46px); letter-spacing: 0.04em; text-shadow: 0 4px 0 var(--pumpkin-deep); }
.bar { width: min(360px, 80vw); height: 14px; background: #05080d; box-shadow: inset 0 0 0 2px var(--line); }
.bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--pumpkin) 0 10px, #e86f0c 10px 12px); transition: width .15s linear; }
#load-note { color: var(--cream-dim); font-size: 13px; }

/* ---------- menu */
#menu { position: absolute; inset: 0; overflow-y: auto; background: linear-gradient(90deg, rgba(6,9,15,.92) 0%, rgba(6,9,15,.62) 46%, rgba(6,9,15,.15) 100%); }
.menu-grid { min-height: 100%; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 420px); gap: clamp(20px, 4vw, 64px); align-items: center; padding-block: 32px; padding-left: max(16px, env(safe-area-inset-left, 0px), 4vw); padding-right: max(16px, env(safe-area-inset-right, 0px), 4vw); max-width: 1180px; margin-inline: auto; }
.menu-left { display: grid; gap: 18px; min-width: 0; }
#logo { width: min(560px, 100%); height: auto; image-rendering: pixelated; }
.kicker { margin: 0; font-family: var(--display); font-size: 18px; letter-spacing: 0.12em; color: var(--pumpkin); }
.lede { margin: 0; font-family: var(--pixel); font-size: 16px; line-height: 1.55; max-width: 46ch; color: var(--cream); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 14px; }
.keys dt { display: flex; gap: 4px; flex-wrap: wrap; }
.keys dd { margin: 0; color: var(--cream-dim); align-self: center; }
kbd { font-family: var(--pixel); font-size: 12px; padding: 3px 6px 2px; background: #1a2532; box-shadow: inset 0 -3px 0 #0a0f16, inset 0 0 0 2px var(--line); color: var(--cream); }
.fine { margin: 0; font-size: 13px; color: var(--cream-dim); max-width: 52ch; line-height: 1.5; }
.card { display: grid; gap: 14px; padding: 18px; min-width: 0; }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card-name { font-family: var(--display); font-size: 20px; text-align: right; }
#portrait { width: 100%; max-width: 384px; aspect-ratio: 1; image-rendering: pixelated; justify-self: center; box-shadow: 0 0 0 4px #05080d, 0 0 0 6px var(--line); }
.traits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 13px; }
.traits li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 2px dotted rgba(251,246,234,.1); padding-block: 3px; }
.traits li span { color: var(--cream-dim); }
.traits li b { font-weight: 700; text-align: right; }
.weapon-pick { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; background: #0a0f17; box-shadow: inset 0 0 0 2px var(--line); padding: 8px; }
.weapon-pick button { height: 40px; font-family: var(--display); font-size: 16px; background: #1a2532; box-shadow: inset 0 -4px 0 #0a0f16; }
.weapon-pick button:hover { background: #24334a; }
.wname { text-align: center; display: grid; gap: 2px; }
.wname b { font-family: var(--display); font-size: 20px; color: var(--pumpkin); font-weight: 400; }
.stats { display: grid; gap: 6px; font-size: 12px; }
.stat { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; }
.stat .pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.stat .pips i { height: 9px; background: #1c2633; }
.stat .pips i.on { background: var(--cream); }
.buttons { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; }
.btn { font-family: var(--display); font-size: 17px; letter-spacing: 0.04em; padding: 13px 10px 11px; text-transform: uppercase; }
.btn.primary { background: var(--pumpkin); color: #1b0b03; box-shadow: inset 0 -5px 0 #b5541a, inset 0 3px 0 #ffb366; }
.btn.primary:hover { background: #ff9d3b; }
.btn.ghost { background: #182230; box-shadow: inset 0 -5px 0 #0a0f16, inset 0 0 0 2px var(--line); }
.btn.ghost:hover { background: #22304a; }
.settings { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; color: var(--cream-dim); align-items: center; }
.settings label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.settings input[type=range] { width: 110px; accent-color: var(--pumpkin); }
.settings input[type=checkbox] { accent-color: var(--pumpkin); width: 16px; height: 16px; }
.seg { display: flex; align-items: center; gap: 4px; flex-basis: 100%; }
.seg .label { margin-right: 6px; }
.seg label { position: relative; gap: 0; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg span:not(.label) { display: block; padding: 7px 11px 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--cream-dim); background: #0a0f17; box-shadow: inset 0 0 0 2px var(--line); }
.seg label:hover span { color: var(--cream); }
.seg input:checked + span { color: #1b0b03; background: var(--pumpkin); box-shadow: inset 0 -3px 0 #b5541a; }
.seg input:focus-visible + span { outline: 3px solid var(--pumpkin); outline-offset: 2px; }
#pause-slot .settings { justify-content: center; max-width: 440px; }
#pause-slot .seg { justify-content: center; }
#touch-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--blood); color: var(--cream); font-size: 14px; text-align: center; }
@media (max-width: 860px) {
  .menu-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  #menu { background: rgba(6,9,15,.86); }
}

/* ---------- HUD */
#hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--pixel); }
.hud-tl { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); padding: 12px 14px; display: grid; gap: 5px; min-width: 190px; }
.hud-tl h2 { margin: 0 0 4px; font-family: var(--display); font-size: 14px; font-weight: 400; letter-spacing: 0.06em; color: var(--pumpkin); }
.obj { display: flex; justify-content: space-between; gap: 18px; font-size: 13px; color: var(--cream-dim); }
.obj b { color: var(--cream); font-weight: 400; font-variant-numeric: tabular-nums; }
.obj.done { color: var(--moss); }
.obj.done b { color: var(--moss); }
.obj.bump { animation: bump .35s steps(3); }
@keyframes bump { 0% { transform: translateX(6px); } 100% { transform: none; } }
.hud-tc { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; text-align: center; }
#timer { font-family: var(--display); font-size: 11px; letter-spacing: .06em; color: var(--cream-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.net-opts { margin-bottom: 10px; }
#timer.late { color: var(--blood); }
#dmg { font-family: var(--display); font-size: clamp(26px, 3.4vw, 40px); color: var(--pumpkin); font-weight: 400; line-height: 1; text-shadow: 0 3px 0 var(--pumpkin-deep), 0 0 18px rgba(255,140,26,.25); font-variant-numeric: tabular-nums; }
#dmg.kick { animation: kick .22s steps(2); }
@keyframes kick { 0% { transform: scale(1.18); } 100% { transform: none; } }
#combo { font-family: var(--display); font-size: 16px; color: var(--blood); min-height: 20px; text-shadow: 0 2px 0 #3d0608; }
#feed { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; justify-items: end; max-width: min(360px, 40vw); }
#feed li { font-size: 13px; padding: 5px 9px 4px; background: var(--glass); box-shadow: inset 0 0 0 2px var(--line); transition: opacity .6s; text-align: right; }
#feed li.you { color: var(--pumpkin); }
#feed li.bad { color: #ff7b7f; }
#feed li.out { opacity: 0; }
.hud-bl { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; }
#mini { width: 56px; height: 56px; image-rendering: pixelated; box-shadow: 0 0 0 3px #05080d; }
.hp { width: 190px; height: 14px; background: #05080d; box-shadow: inset 0 0 0 2px var(--line); margin-top: 6px; }
.hp i { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, var(--blood) 0 9px, #8d1a1e 9px 11px); transition: width .12s steps(4); }
.hud-br { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 10px 14px; display: grid; gap: 4px; justify-items: end; min-width: 170px; }
#hud-weapon { font-family: var(--display); font-size: 20px; font-weight: 400; color: var(--cream); }
.charge { width: 170px; height: 8px; background: #05080d; box-shadow: inset 0 0 0 2px var(--line); }
.charge i { display: block; height: 100%; width: 0; background: var(--pumpkin); }
.charge i.full { background: #ffd23f; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); }
#crosshair::before, #crosshair::after { content: ""; position: absolute; background: var(--cream); box-shadow: 0 0 0 2px rgba(0,0,0,.55); }
#crosshair::before { left: 10px; top: 2px; width: 2px; height: 18px; }
#crosshair::after { top: 10px; left: 2px; width: 18px; height: 2px; }
#crosshair.hit::before, #crosshair.hit::after { background: var(--pumpkin); }
#tags, #pops { position: absolute; inset: 0; overflow: hidden; }
.tag { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 3px; font-size: 12px; color: var(--cream); text-shadow: 0 2px 0 #000; white-space: nowrap; }
.tag .tb { width: 54px; height: 5px; background: rgba(0,0,0,.7); }
.tag .tb i { display: block; height: 100%; background: var(--blood); }
.pop { position: absolute; transform: translate(-50%, -50%); font-family: var(--display); font-size: 18px; color: var(--pumpkin); white-space: nowrap; text-shadow: 2px 2px 0 #1b0b03, -2px 2px 0 #1b0b03, 2px -2px 0 #1b0b03, -2px -2px 0 #1b0b03; }
.pop.big { font-size: 24px; color: #ffd23f; }
/* le Candy: un caramello a pixel accanto al numero (immagine nel CSS, la CSP lo ammette) */
.candy::after { content: ""; display: inline-block; width: .9em; height: .9em; margin-left: .18em; vertical-align: -.08em; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' shape-rendering='crispEdges'%3E%3Cpath fill='%23f2b24b' d='M3 2h3v1h1v3h-1v1h-3v-1h-1v-3h1z'/%3E%3Cpath fill='%23ffe08a' d='M3 3h1v1h-1z'/%3E%3Cpath fill='%23c2761f' d='M5 5h1v1h-1z'/%3E%3Cpath fill='%23e05a6a' d='M0 3h2v1h-1v1h-1zM7 3h2v2h-1v-1h-1zM0 5h1v1h-1zM8 5h1v1h-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pop.off { color: #8a8f96; }
.pop.off::after { filter: grayscale(1); opacity: .6; }
.candy-day { display: grid; justify-items: center; gap: 3px; font-family: var(--pixel); font-size: 11px; color: var(--cream-dim); letter-spacing: .06em; text-transform: uppercase; }
.candy-track { display: block; width: 150px; height: 6px; background: rgba(0,0,0,.5); box-shadow: 0 0 0 2px #0a0f16; }
.candy-track i { display: block; height: 100%; width: 0; background: var(--pumpkin); }
.candy-day.done .candy-track i { background: #8a8f96; }
.candy-day.nocap .candy-track { display: none; }
.pop.ko { color: #ff6b70; font-size: 22px; }
.pop small { display: block; font-family: var(--pixel); font-size: 12px; color: var(--cream); text-align: center; letter-spacing: .06em; }
#hint { position: absolute; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); font-size: 14px; padding: 8px 12px; background: var(--glass); box-shadow: inset 0 0 0 2px var(--line); transition: opacity .5s; text-align: center; max-width: 90vw; }
#hint.out { opacity: 0; }
#raid { position: absolute; top: calc(122px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); padding: 10px 14px; display: grid; gap: 6px; width: min(300px, 80vw); }
#raid .raid-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#raid-where { color: var(--blood); }
#raid-time { font-family: var(--display); font-size: 20px; font-weight: 400; color: var(--cream); font-variant-numeric: tabular-nums; }
#raid-time.late { color: var(--blood); }
.raid-bar { height: 10px; background: #05080d; box-shadow: inset 0 0 0 2px var(--line); }
.raid-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--pumpkin) 0 9px, var(--pumpkin-deep) 9px 11px); transition: width .3s steps(4); }
#raid-note { font-size: 13px; color: var(--cream-dim); }
#raid.won #raid-where, #raid.won #raid-note { color: var(--moss); }

/* ---------- overlays */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5, 7, 12, 0.66); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.ov-box { display: grid; gap: 16px; justify-items: center; text-align: center; padding: 26px 28px; max-width: 560px; }
.ov-title { font-family: var(--display); font-size: clamp(30px, 6vw, 56px); margin: 0; line-height: 1; text-shadow: 0 5px 0 var(--pumpkin-deep); }
.ov-title.red { color: var(--blood); text-shadow: 0 5px 0 #3d0608; }
.ov-sub { margin: 0; color: var(--cream-dim); font-size: 15px; }
.ov-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.end-total { font-family: var(--display); font-size: clamp(34px, 7vw, 60px); color: var(--pumpkin); text-shadow: 0 4px 0 var(--pumpkin-deep); line-height: 1; }
.end-rank { font-family: var(--display); font-size: 18px; letter-spacing: .08em; }
.end-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 22px; font-size: 14px; width: min(420px, 80vw); }
.end-grid div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px dotted rgba(251,246,234,.1); padding-block: 3px; color: var(--cream-dim); }
.end-grid b { color: var(--cream); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .obj.bump, #dmg.kick { animation: none; } }

/* ---------- gioco online: stato dell'account nel menu, fermata del bus, avvisi, connessione persa */
.acct-line { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cream-dim); min-height: 1.5em; }
.acct-line a { color: var(--pumpkin); }
.acct-line.bad { color: #ff7b7f; }
#start:disabled { opacity: .5; cursor: default; }
#alert { position: absolute; top: calc(170px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); padding: 12px 18px; display: grid; gap: 4px; justify-items: center; text-align: center; width: min(420px, 86vw); transition: opacity .4s; }
#alert.out { opacity: 0; }
#alert b { font-family: var(--display); font-size: 18px; font-weight: 400; color: var(--pumpkin); }
#alert.bad b { color: #ff7b7f; }
#alert.good b { color: var(--moss); }
#alert span { font-size: 13px; color: var(--cream-dim); }
.b-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.b-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; background: #0a0f17; box-shadow: inset 0 0 0 2px var(--line); }
.b-list li.here { box-shadow: inset 0 0 0 2px var(--pumpkin); }
.b-list .t { display: grid; gap: 2px; min-width: 0; }
.b-list .t b { font-family: var(--display); font-size: 15px; font-weight: 400; }
.b-list .t span { font-size: 12px; color: var(--cream-dim); }
.btn.small { font-size: 13px; padding: 8px 12px 6px; }
.b-note { margin: 0; font-size: 13px; color: var(--cream-dim); line-height: 1.5; }
.b-note.warn { color: #ff7b7f; }
.b-box { display: grid; gap: 8px; padding: 12px; background: #0a0f17; box-shadow: inset 0 0 0 2px var(--line); }
.b-box.alarm { box-shadow: inset 0 0 0 2px var(--blood); color: #ff9da1; }
.b-code { font-family: var(--display); font-size: 18px; letter-spacing: .12em; color: var(--pumpkin); user-select: all; }
.b-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.b-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.b-stats div { display: grid; gap: 3px; padding: 9px 10px; background: #0a0f17; box-shadow: inset 0 0 0 2px var(--line); min-width: 0; }
.b-stats dt { font-family: var(--pixel); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); }
.b-stats dd { margin: 0; font-family: var(--display); font-size: 15px; overflow-wrap: anywhere; }
.b-stats dd.hot { color: var(--pumpkin); }
.b-rank li .r { font-family: var(--display); color: var(--cream-dim); min-width: 2ch; }
.b-rank li.me { box-shadow: inset 0 0 0 2px var(--pumpkin); }
.b-rank li .v { font-family: var(--display); color: var(--pumpkin); white-space: nowrap; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; color: var(--cream); }
.b-row input { font: inherit; font-size: 15px; padding: 8px 10px; width: 14ch; color: var(--cream); background: #05080d; border: 0; box-shadow: inset 0 0 0 2px var(--line); text-transform: lowercase; letter-spacing: .1em; }
#lost .ov-box { pointer-events: auto; }

/* ---------- P10: interfaccia del gioco. Un carattere leggibile per i testi (Barlow Semi Condensed), Bungee per numeri e titoli.
   Gerarchia: Candy al centro in alto, scheda del giocatore in basso a sinistra, arma in basso a destra, l'azione del momento
   in basso al centro col suo tasto. Il resto compare solo quando serve. Testo minimo ~15 px a 720 righe (Xbox AG 101). */
:root {
  --text: "Barlow Semi Condensed", "Barlow", "Segoe UI", system-ui, sans-serif;
  --t-xs: clamp(12px, 1.7vh, 15px); --t-s: clamp(14px, 2.05vh, 18px); --t-m: clamp(16px, 2.5vh, 22px); --t-l: clamp(20px, 3.3vh, 30px); --t-xl: clamp(30px, 5.4vh, 54px);
  --glass2: rgba(9, 13, 21, 0.84); --edge: rgba(255, 236, 205, 0.12); --good: #7ee08a; --bad: #ff6b6b; --gold: #ffcf5a;
}
body { font-family: var(--text); -webkit-font-smoothing: antialiased; }
.label { font-family: var(--text); font-weight: 700; font-size: var(--t-xs); letter-spacing: .09em; }
kbd { font-family: var(--text); font-weight: 700; font-size: var(--t-xs); min-width: 1.6em; display: inline-grid; place-items: center; padding: 2px 7px 1px; border-radius: 5px; background: #f3ead8; color: #17110a; box-shadow: inset 0 -3px 0 #b9ab90; text-transform: uppercase; letter-spacing: .02em; }
.panel { background: var(--glass2); box-shadow: inset 0 0 0 1px var(--edge), 0 4px 12px rgba(0,0,0,.3); border-radius: 12px; clip-path: none; }
.lede, .fine, .acct-line, .keys, .traits, .stats, .settings { font-family: var(--text); }
.lede { font-size: var(--t-m); line-height: 1.45; }
.fine, .acct-line { font-size: var(--t-s); }
.keys { font-size: var(--t-s); }
.traits { font-size: var(--t-s); }
.btn { border-radius: 8px; clip-path: none; }
.btn.small { font-size: 14px; padding: 9px 14px 7px; }
.card.panel.cut { border-radius: 14px; }

/* menu prima di giocare */
.buttons.one { grid-template-columns: 1fr; }
.card-art { display: grid; gap: 14px; min-width: 0; }
.signin, .namebox { display: grid; gap: 10px; }
.wallets { display: grid; gap: 8px; }
.wallets button { display: flex; align-items: center; gap: 12px; padding: 13px 14px 11px; font-family: var(--display); font-size: 16px; text-align: left; border-radius: 10px; background: #182230; box-shadow: inset 0 0 0 1px var(--edge), inset 0 -4px 0 #0a0f16; }
.wallets button:hover { background: #22304a; }
.wallets button:disabled { opacity: .5; cursor: default; }
.wallets img { width: 24px; height: 24px; image-rendering: auto; }
.wc-btn { width: 100%; }
.wc { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--edge); }
.wc[hidden] { display: none; }
.wc-step { font: 400 16px var(--display); color: var(--pumpkin); letter-spacing: .03em; }
.wc-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wc-app { display: block; padding: 14px 10px 12px; border-radius: 10px; text-align: center; text-decoration: none; font: 400 15px var(--display); color: var(--cream); background: #182230; box-shadow: inset 0 0 0 1px var(--edge), inset 0 -4px 0 #0a0f16; pointer-events: auto; }
.wc-app.go { background: var(--pumpkin); color: #17110a; box-shadow: inset 0 -4px 0 #b5541a; }
.namebox input, .crewcode input { font: 600 var(--t-m) var(--text); padding: 10px 12px; color: var(--cream); background: #05080d; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--edge); text-transform: lowercase; letter-spacing: .06em; }
.namebox input { flex: 1 1 120px; min-width: 0; }
.linkbtn { justify-self: center; font: 600 var(--t-xs) var(--text); color: var(--cream-dim); text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
.linkbtn:hover { color: var(--cream); }

/* HUD: via quello che non serve sempre */
.online #objectives, .online #timer, .online #combo { display: none !important; }
.hud-tc { top: calc(16px + env(safe-area-inset-top, 0px)); }
#dmg-label { font-size: var(--t-xs); color: var(--cream-dim); }
#dmg { font-size: clamp(30px, 5.6vh, 52px); }
.candy-day { font: 700 var(--t-xs) var(--text); letter-spacing: .08em; }
.candy-track { width: 180px; height: 7px; border-radius: 4px; overflow: hidden; }
.deltas { display: grid; justify-items: center; gap: 2px; min-height: 0; }
.delta { font: 400 var(--t-m) var(--display); letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0,0,0,.6); animation: delta 2.8s ease-out forwards; white-space: nowrap; }
.delta small { font: 700 var(--t-xs) var(--text); letter-spacing: .08em; margin-left: 8px; text-transform: uppercase; opacity: .9; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
@keyframes delta { 0% { opacity: 0; transform: translateY(-8px) scale(1.25); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px); } }
#feed { top: calc(16px + env(safe-area-inset-top, 0px)); gap: 6px; max-width: min(380px, 38vw); }
#feed li { font: 600 var(--t-s) var(--text); padding: 8px 12px 7px; border-radius: 10px; background: var(--glass2); box-shadow: inset 3px 0 0 var(--cream-dim), inset 0 0 0 1px var(--edge); text-align: left; }
#feed li.you { color: var(--cream); box-shadow: inset 3px 0 0 var(--pumpkin), inset 0 0 0 1px var(--edge); }
#feed li.bad { color: #ffd1d1; box-shadow: inset 3px 0 0 var(--bad), inset 0 0 0 1px var(--edge); }
#hint { font: 600 var(--t-s) var(--text); padding: 9px 14px 8px; border-radius: 10px; background: var(--glass2); box-shadow: inset 0 0 0 1px var(--edge); bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

/* scheda del giocatore */
.hud-bl { padding: 10px 14px 10px 10px; gap: 12px; align-items: center; min-width: 270px; }
#mini { width: clamp(56px, 9vh, 76px); height: clamp(56px, 9vh, 76px); border-radius: 8px; box-shadow: 0 0 0 2px #05080d, 0 0 0 3px var(--edge); }
.pc-main { display: grid; gap: 5px; min-width: 0; flex: 1; }
.pc-name { display: flex; align-items: baseline; gap: 8px; }
.pc-name b { font: 400 var(--t-m) var(--display); color: var(--cream); letter-spacing: .02em; white-space: nowrap; }
.pc-name span { font: 700 var(--t-xs) var(--text); color: var(--cream-dim); }
.pc-title { display: flex; justify-content: space-between; gap: 10px; font: 700 var(--t-xs) var(--text); letter-spacing: .08em; text-transform: uppercase; }
#pc-title { color: var(--pumpkin); }
#pc-week { color: var(--gold); }
.pc-xp { height: 5px; border-radius: 3px; background: rgba(0,0,0,.55); overflow: hidden; }
.pc-xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pumpkin), var(--gold)); transition: width .4s; }
.hp { width: 100%; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 1px; box-shadow: none; background: rgba(0,0,0,.55); }
.hp i { background: linear-gradient(90deg, #b51f2b, #ff4d4d); }
.hud-br { border-radius: 12px; padding: 12px 16px; }
#hud-weapon { font-size: var(--t-l); }
.charge { border-radius: 4px; overflow: hidden; }

/* l'azione del momento, col suo tasto */
.prompt { position: absolute; left: 50%; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; justify-items: center; gap: 7px; text-align: center; max-width: 92vw; }
.pr-what { font: 400 var(--t-m) var(--display); color: var(--cream); text-shadow: 0 2px 0 rgba(0,0,0,.7); letter-spacing: .02em; background: var(--glass2); padding: 5px 14px 3px; border-radius: 8px; }
.pr-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 6px 7px; border-radius: 999px; background: var(--glass2); box-shadow: inset 0 0 0 1px var(--edge); font: 700 var(--t-s) var(--text); letter-spacing: .05em; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.pill.go { box-shadow: inset 0 0 0 2px var(--pumpkin); }
.pill.off { color: var(--cream-dim); }
.pill.off kbd { opacity: .4; }
.pill.warn { box-shadow: inset 0 0 0 2px var(--bad); color: #ffd1d1; }
.pill .cost { color: var(--bad); }
.pill .gain { color: var(--good); }
.pr-why { font: 600 var(--t-xs) var(--text); color: var(--cream-dim); letter-spacing: .06em; text-transform: uppercase; background: var(--glass2); padding: 3px 10px; border-radius: 6px; }
.pr-why:empty { display: none; }
.pr-why.warn { color: #ffb0b0; }
.keystrip { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 9px; font: 700 var(--t-xs) var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); text-shadow: 0 1px 0 #000; white-space: nowrap; }
.clickplay { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); padding: 10px 18px 9px; border-radius: 999px; background: var(--pumpkin); color: #1b0b03; font: 400 var(--t-s) var(--display); letter-spacing: .04em; box-shadow: 0 6px 20px rgba(0,0,0,.4); }

/* i momenti grandi: una parola al centro */
.banner { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; text-align: center; pointer-events: none; animation: banner 2.6s ease-out forwards; }
.banner b { font: 400 var(--t-xl) var(--display); color: var(--cream); letter-spacing: .03em; text-shadow: 0 5px 0 rgba(0,0,0,.55), 0 0 30px rgba(0,0,0,.6); white-space: nowrap; }
.banner span { font: 700 var(--t-m) var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--cream); text-shadow: 0 2px 0 #000; }
.banner.good b { color: var(--good); } .banner.bad b { color: var(--bad); } .banner.gold b { color: var(--gold); }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 10px) scale(1.25); } 10% { opacity: 1; transform: translate(-50%, 0) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; } }

/* sopra le case, nel mondo */
.marks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mk { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 4px; }
.mk i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(9,13,21,.88); box-shadow: 0 0 0 2px currentColor, 0 4px 14px rgba(0,0,0,.5); font: 400 15px var(--display); font-style: normal; }
.mk b { font: 700 var(--t-xs) var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--cream); background: rgba(9,13,21,.84); padding: 3px 8px 2px; border-radius: 6px; white-space: nowrap; }
.mk span { font: 600 12px var(--text); color: var(--cream-dim); background: rgba(9,13,21,.84); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.mk.home { color: var(--pumpkin); } .mk.target { color: var(--bad); } .mk.shield { color: #9fb3c8; } .mk.busy { color: var(--gold); } .mk.raid { color: var(--bad); } .mk.side { color: #8fd0a0; } .mk.jar { color: var(--gold); }
.mk.raid i, .mk.jar i { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.18); } }
.mk.edge span { display: none; }
.tile .t-v.name { font-size: var(--t-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }

/* il raid: prenotato o in corso (lo stesso riquadro, sotto le Candy) */
#raid, .raidbox { position: absolute; top: calc(126px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: min(360px, 84vw); padding: 12px 16px; display: grid; gap: 7px; border-radius: 12px; background: var(--glass2); box-shadow: inset 0 0 0 2px rgba(255,107,107,.55), 0 8px 28px rgba(0,0,0,.4); }
#raid .raid-top, .rb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#raid-where, .rb-label { font: 700 var(--t-xs) var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--bad); }
#raid-time, #bk-time { font: 400 var(--t-l) var(--display); color: var(--cream); font-variant-numeric: tabular-nums; }
#raid-note { font: 600 var(--t-s) var(--text); color: var(--cream); }
.raid-bar { height: 10px; border-radius: 5px; overflow: hidden; box-shadow: none; background: rgba(0,0,0,.55); }
.rb-where { font: 400 var(--t-s) var(--display); color: var(--cream); letter-spacing: .02em; }
.rb-crew { display: flex; flex-wrap: wrap; gap: 5px; }
.rb-crew span { font: 700 var(--t-xs) var(--text); padding: 2px 8px 1px; border-radius: 999px; background: #1b2633; color: var(--cream); letter-spacing: .04em; }
.rb-crew span.wait { color: var(--cream-dim); background: transparent; box-shadow: inset 0 0 0 1px var(--edge); }
.rb-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-keys .pill { font-size: var(--t-xs); padding: 5px 11px 4px 5px; }

/* chiamata alla squadra */
.invite { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); top: 34%; width: min(330px, 40vw); padding: 14px 16px; display: grid; gap: 6px; border-radius: 14px; background: var(--glass2); box-shadow: inset 0 0 0 2px var(--pumpkin), 0 10px 30px rgba(0,0,0,.45); animation: slidein .35s ease-out; }
.invite b { font: 400 var(--t-m) var(--display); color: var(--cream); }
.invite > span:not(.label) { font: 600 var(--t-s) var(--text); color: var(--cream-dim); }
.iv-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
@keyframes slidein { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* il resoconto alla fine di un raid */
.report { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: min(460px, 90vw); padding: 20px 22px 16px; display: grid; justify-items: center; gap: 10px; text-align: center; border-radius: 16px; background: var(--glass2); box-shadow: inset 0 0 0 1px var(--edge), 0 16px 40px rgba(0,0,0,.5); animation: pop .3s ease-out; }
.report b#rp-title { font: 400 var(--t-xl) var(--display); letter-spacing: .03em; }
.report.good b#rp-title { color: var(--good); } .report.bad b#rp-title { color: var(--bad); }
.rp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.rp-stats div { display: grid; gap: 2px; padding: 10px 6px; border-radius: 10px; background: rgba(255,255,255,.04); }
.rp-stats dt { font: 700 var(--t-xs) var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); }
.rp-stats dd { margin: 0; font: 400 var(--t-m) var(--display); color: var(--cream); }
.rp-candy { display: grid; gap: 2px; }
.rp-candy span { font: 400 var(--t-m) var(--display); }
.rp-candy .up { color: var(--good); } .rp-candy .down { color: var(--bad); }
.rp-foot { font: 600 var(--t-xs) var(--text); color: var(--cream-dim); }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 8px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }

.crewcode { position: absolute; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(360px, 88vw); padding: 14px 16px; display: grid; gap: 8px; border-radius: 14px; background: var(--glass2); box-shadow: inset 0 0 0 1px var(--edge); }

/* finestre: una per ogni cosa (casa, raid, squadra, bus) */
.win { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, rgba(5,7,12,.55), rgba(5,7,12,.82)); padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px)); }
.win-box { width: min(720px, 100%); max-height: 92vh; overflow-y: auto; display: grid; gap: 16px; padding: 22px 24px 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(20,27,40,.97), rgba(10,14,22,.97)); box-shadow: inset 0 0 0 1px var(--edge), inset 0 3px 0 var(--pumpkin), 0 24px 60px rgba(0,0,0,.55); animation: winin .22s ease-out; }
@keyframes winin { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.win-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.win-heading { display: grid; gap: 4px; min-width: 0; }
.win-heading .label { color: var(--pumpkin); }
#win-title { margin: 0; font: 400 var(--t-l) var(--display); letter-spacing: .02em; line-height: 1.1; overflow-wrap: anywhere; }
.xbtn { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--t-xs) var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); padding: 6px 8px; border-radius: 8px; }
.xbtn:hover { color: var(--cream); background: rgba(255,255,255,.06); }
.win-body { display: grid; gap: 14px; }
.win-msg { margin: 0; min-height: 1.2em; font: 700 var(--t-s) var(--text); color: var(--cream-dim); }
.win-msg.good { color: var(--good); } .win-msg.bad { color: var(--bad); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.tile { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--edge); min-width: 0; }
.tile dt, .tile .t-k { font: 700 var(--t-xs) var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); }
.tile dd, .tile .t-v { margin: 0; font: 400 var(--t-m) var(--display); color: var(--cream); overflow-wrap: anywhere; }
.tile .t-v.hot { color: var(--pumpkin); } .tile .t-v.good { color: var(--good); } .tile .t-v.bad { color: var(--bad); }
.tile .t-s { font: 600 var(--t-xs) var(--text); color: var(--cream-dim); }
.act { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--edge); }
.act.hero { background: linear-gradient(90deg, rgba(255,140,26,.16), rgba(255,140,26,.03)); box-shadow: inset 0 0 0 1px rgba(255,140,26,.45); }
.act.danger { background: linear-gradient(90deg, rgba(255,107,107,.16), rgba(255,107,107,.03)); box-shadow: inset 0 0 0 1px rgba(255,107,107,.45); }
.act-text { display: grid; gap: 3px; min-width: 0; }
.act-text b { font: 400 var(--t-m) var(--display); color: var(--cream); }
.act-text span { font: 600 var(--t-s) var(--text); color: var(--cream-dim); line-height: 1.35; }
.act-text span.how { color: var(--gold); }
.abtn { display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 11px 16px 9px 10px; border-radius: 10px; font: 400 var(--t-s) var(--display); letter-spacing: .03em; text-transform: uppercase; background: var(--pumpkin); color: #1b0b03; box-shadow: inset 0 -4px 0 #b5541a; white-space: nowrap; }
.abtn kbd { background: #1b0b03; color: var(--cream); box-shadow: none; }
.abtn:hover { background: #ff9d3b; }
.abtn.ghost { background: #1b2633; color: var(--cream); box-shadow: inset 0 0 0 1px var(--edge), inset 0 -4px 0 #0a0f16; }
.abtn.ghost kbd { background: #f3ead8; color: #17110a; }
.abtn.red { background: #e2474b; color: #fff; box-shadow: inset 0 -4px 0 #8e1d22; }
.abtn:disabled { opacity: .45; cursor: default; filter: grayscale(.6); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.step { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--edge); }
.step i { font: 400 var(--t-l) var(--display); font-style: normal; color: var(--pumpkin); }
.step b { font: 400 var(--t-s) var(--display); color: var(--cream); }
.step span { font: 600 var(--t-xs) var(--text); color: var(--cream-dim); line-height: 1.35; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rows li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--edge); }
.rows li.sel { box-shadow: inset 0 0 0 2px var(--pumpkin); background: rgba(255,140,26,.08); }
.rows li.me { box-shadow: inset 0 0 0 2px var(--gold); }
.rows li.clickable { cursor: pointer; }
.rows li.clickable:hover { background: rgba(255,255,255,.07); }
.rows .r-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rows .r-main b { font: 400 var(--t-s) var(--display); color: var(--cream); overflow-wrap: anywhere; }
.rows .r-main span { font: 600 var(--t-xs) var(--text); color: var(--cream-dim); letter-spacing: .03em; }
.rows .r-rank { font: 400 var(--t-m) var(--display); color: var(--cream-dim); min-width: 2ch; text-align: center; }
.rows .r-val { font: 400 var(--t-s) var(--display); color: var(--pumpkin); white-space: nowrap; }
.rows canvas { width: 40px; height: 40px; border-radius: 8px; image-rendering: pixelated; flex: none; background: #0b1018; }
.side-w { color: #8fd0e0; } .side-e { color: #e597a4; }
.tag-good { color: var(--good) !important; } .tag-bad { color: var(--bad) !important; } .tag-gold { color: var(--gold) !important; }
.empty { font: 600 var(--t-s) var(--text); color: var(--cream-dim); padding: 12px 4px; }

/* il menu del gioco (TAB o Esc): classifiche, fedine, casa, come si gioca, impostazioni */
.book { position: absolute; inset: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); background: linear-gradient(90deg, rgba(6,9,15,.97) 0%, rgba(8,12,19,.94) 240px, rgba(6,9,15,.86) 100%); }
.bk-nav { display: flex; flex-direction: column; gap: 6px; padding: 26px 18px 20px; border-right: 1px solid var(--edge); }
.bk-brand { font: 400 26px var(--display); color: var(--pumpkin); letter-spacing: .04em; margin-bottom: 14px; text-shadow: 0 3px 0 var(--pumpkin-deep); }
.bk-nav button[data-tab] { text-align: left; padding: 12px 14px 10px; border-radius: 10px; font: 400 var(--t-s) var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--cream-dim); }
.bk-nav button[data-tab]:hover { color: var(--cream); background: rgba(255,255,255,.05); }
.bk-nav button[data-tab][aria-current="true"] { color: #1b0b03; background: var(--pumpkin); box-shadow: inset 0 -4px 0 #b5541a; }
.bk-fill { flex: 1; }
.bk-nav .btn { font-size: 15px; }
.bk-main { overflow-y: auto; padding: 28px clamp(18px, 3vw, 44px) 28px; }
.bk-pane { display: grid; gap: 16px; max-width: 980px; }
.bk-h { margin: 0; font: 400 var(--t-l) var(--display); color: var(--cream); letter-spacing: .02em; }
.bk-sub { margin: -8px 0 0; font: 600 var(--t-s) var(--text); color: var(--cream-dim); }
.seg2 { display: flex; flex-wrap: wrap; gap: 6px; }
.seg2 button { padding: 9px 14px 7px; border-radius: 999px; font: 700 var(--t-xs) var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); box-shadow: inset 0 0 0 1px var(--edge); }
.seg2 button[aria-pressed="true"] { color: #1b0b03; background: var(--cream); box-shadow: none; }
.crown { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,207,90,.16), rgba(255,207,90,.02)); box-shadow: inset 0 0 0 1px rgba(255,207,90,.45); }
.crown canvas { width: 64px; height: 64px; border-radius: 10px; image-rendering: pixelated; }
.crown .cr-text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.crown .label { color: var(--gold); }
.crown b { font: 400 var(--t-m) var(--display); color: var(--cream); overflow-wrap: anywhere; }
.crown span { font: 600 var(--t-xs) var(--text); color: var(--cream-dim); }
.crown .cr-val { font: 400 var(--t-l) var(--display); color: var(--gold); white-space: nowrap; }
@media (max-width: 760px) { .book { grid-template-columns: 1fr; } .bk-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; padding: 12px; } .bk-brand { width: 100%; margin: 0; } .bk-fill { display: none; } }

/* la fedina, come la pagina pubblica: foto segnaletica e verbale battuto a macchina */
.sheet { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.mug { position: relative; overflow: hidden; background: #2b3036; min-height: 380px; }
.mug ol { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.mug ol li { flex: 1 1 0; border-top: 2px solid #4a525a; padding: 5px 0 0 10px; font: 700 11px var(--text); color: #aeb6bc; }
.mug canvas { position: absolute; left: 50%; bottom: 88px; width: min(250px, 84%); aspect-ratio: 1; transform: translateX(-50%); image-rendering: pixelated; }
.plate { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 8px 16px; background: #111417; color: #e9e3d6; border-radius: 6px; box-shadow: 0 0 0 3px #3a3f44; white-space: nowrap; }
.plate span { font: 700 10px var(--text); letter-spacing: .12em; text-transform: uppercase; color: #aeb6bc; }
.plate b { font: 400 24px var(--display); }
.paper { position: relative; padding: 22px clamp(16px, 2.6vw, 30px) 20px; display: grid; gap: 14px; align-content: start; background: #f1ead9; color: #201a12; min-width: 0; }
.paper .typed { font-family: "Special Elite", ui-monospace, monospace; }
.stamp { position: absolute; right: 18px; top: 16px; padding: 6px 10px; border: 3px solid rgba(143,29,23,.75); color: rgba(143,29,23,.8); font: 400 13px var(--display); transform: rotate(8deg); text-align: center; line-height: 1.1; }
.paper .p-k { font: 700 11px var(--text); letter-spacing: .1em; text-transform: uppercase; color: #6b6054; }
.paper h3 { margin: 0; font: 400 clamp(20px, 2.6vw, 28px)/1.1 "Special Elite", ui-monospace, monospace; padding-right: 110px; overflow-wrap: anywhere; }
.facts2 { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 16px; }
.facts2 div { display: grid; gap: 3px; min-width: 0; }
.facts2 dd { margin: 0; font: 400 16px "Special Elite", ui-monospace, monospace; overflow-wrap: anywhere; }
.noto2 { display: grid; gap: 8px; padding: 12px 14px; background: #e4dcc8; border-radius: 4px; }
.noto2 .n-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.noto2 .n-title { font: 400 20px var(--display); color: #8f1d17; }
.noto2 .n-next { margin-left: auto; font: 400 14px "Special Elite", ui-monospace, monospace; color: #3d342a; }
.ranks2 { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.ranks2 li { display: grid; gap: 4px; font: 700 10px var(--text); letter-spacing: .03em; color: #4a4036; text-transform: uppercase; }
.ranks2 li::before { content: ""; display: block; height: 9px; background: #cfc6b2; }
.ranks2 li.done::before { background: #3d342a; } .ranks2 li.now { color: #8f1d17; } .ranks2 li.now::before { background: #8f1d17; }
.charges2 { width: 100%; border-collapse: collapse; font: 400 15px "Special Elite", ui-monospace, monospace; }
.charges2 th { font: 700 11px var(--text); letter-spacing: .08em; text-transform: uppercase; color: #6b6054; text-align: left; padding: 0 8px 7px 0; border-bottom: 2px solid #201a12; }
.charges2 td { padding: 6px 8px 6px 0; border-bottom: 1px dashed #a89e8c; vertical-align: top; }
.charges2 .num { text-align: right; padding-right: 14px; white-space: nowrap; }
.marks2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.marks2 div { display: grid; gap: 4px; padding: 10px 12px; border: 2px dashed #8a7f6c; min-width: 0; }
.marks2 b { font: 400 18px var(--display); overflow-wrap: anywhere; }
.marks2 span:last-child { font: 400 13px "Special Elite", ui-monospace, monospace; color: #3d342a; }
@media (max-width: 860px) { .sheet { grid-template-columns: 1fr; } .mug { min-height: 320px; } }

/* costruzione */
.build { position: absolute; inset: 0; pointer-events: none; font-family: var(--text); }
.build .panel { pointer-events: auto; }
.bd-top { position: absolute; width: max-content; box-sizing: border-box; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 18px; padding: 10px 18px; font: 700 var(--t-s) var(--text); max-width: 94vw; }
.bd-title { font-family: var(--display); font-weight: 400; font-size: var(--t-m); color: var(--pumpkin); letter-spacing: .03em; }
#bd-candy { font-family: var(--display); font-size: var(--t-m); color: var(--pumpkin); }
.bd-check { position: absolute; width: max-content; box-sizing: border-box; top: calc(70px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 14px 7px; font: 700 var(--t-s) var(--text); color: #ffb0b0; max-width: 92vw; text-align: center; }
.bd-check.ok { color: var(--good); }
.bd-pal { position: absolute; width: max-content; box-sizing: border-box; left: 50%; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 8px; max-width: 98vw; }
.bd-pal button { display: grid; justify-items: center; gap: 3px; width: 60px; padding: 7px 2px 6px; border-radius: 10px; font: 700 11px var(--text); letter-spacing: .03em; text-transform: uppercase; color: var(--cream-dim); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--edge); }
.bd-pal button[aria-pressed="true"] { color: var(--cream); background: rgba(255,140,26,.14); box-shadow: inset 0 0 0 2px var(--pumpkin); }
.bd-pal .sw { width: 24px; height: 24px; border-radius: 5px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.35); }
.bd-pal .k { font: 400 12px var(--display); color: var(--pumpkin); }
.bd-pal .c { color: var(--cream-dim); }
.bd-keys { position: absolute; width: max-content; box-sizing: border-box; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; padding: 7px 14px; font: 700 var(--t-xs) var(--text); color: var(--cream-dim); max-width: 98vw; }
/* ============================================================ P13: col dito (classe .touch su <html>, messa da touch.js) */
.tc, .rotate, .bd-touch, .cc-btns, .bk-code { display: none; }
.touch, .touch body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
.touch body { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.touch canvas, .touch .tc, .touch .tc * { touch-action: none; }
.touch input { -webkit-user-select: text; user-select: text; font-size: 16px; } /* sotto i 16px l'iPhone ingrandisce la pagina */
.touch .tc { display: block; position: absolute; inset: 0; pointer-events: none; }
.touch .tc[hidden], .touch .rotate[hidden] { display: none; }
.tc-stick { position: absolute; width: 124px; height: 124px; margin: -62px 0 0 -62px; border-radius: 50%; background: rgba(9,13,21,.34); box-shadow: inset 0 0 0 2px rgba(255,236,205,.28); }
.tc-stick[hidden] { display: none; }
.tc-stick i { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(243,234,216,.82); box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.tc-stick.run { box-shadow: inset 0 0 0 3px var(--pumpkin); }
.tc-b { position: absolute; display: grid; place-items: center; border-radius: 50%; pointer-events: auto; font: 400 13px var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--cream); background: rgba(9,13,21,.5); box-shadow: inset 0 0 0 2px rgba(255,236,205,.3); }
.tc-b.down { background: rgba(255,140,26,.5); box-shadow: inset 0 0 0 3px var(--pumpkin); }
.tc-hit { width: 88px; height: 88px; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); font-size: 16px; box-shadow: inset 0 0 0 3px var(--pumpkin); }
.tc-heavy { width: 66px; height: 66px; right: calc(122px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.tc-jump { width: 66px; height: 66px; right: calc(34px + env(safe-area-inset-right, 0px)); bottom: calc(126px + env(safe-area-inset-bottom, 0px)); }
.tc-menu { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); padding: 11px 16px 9px; border-radius: 12px; font: 400 14px var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--cream); background: var(--glass2); box-shadow: inset 0 0 0 1px var(--edge); }
/* le azioni scritte sullo schermo diventano bottoni: niente lettere dei tasti */
.touch .pill, .touch #report { pointer-events: auto; }
.touch .pill kbd, .touch .abtn kbd, .touch .xbtn kbd, .touch .crewcode .pr-why { display: none; }
.touch .pill { padding: 12px 20px 10px; font-size: 15px; min-height: 22px; }
.touch .pill.off { padding: 7px 14px 6px; font-size: 13px; pointer-events: none; }
.touch .abtn { padding: 13px 20px 11px; }
.touch .xbtn { padding: 12px 16px; }
.touch .keystrip, .touch .hud-br, .touch #crosshair + .none { display: none; }
.touch .prompt { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.touch .hud-bl { left: auto; right: calc(96px + env(safe-area-inset-right, 0px)); bottom: auto; top: calc(8px + env(safe-area-inset-top, 0px)); min-width: 0; padding: 6px 10px 6px 6px; gap: 8px; }
.touch .hud-bl canvas { width: 34px; height: 34px; }
.touch .hud-bl .pc-title, .touch .hud-bl .pc-xp, .touch .hud-bl #pc-id { display: none; }
.touch .hud-bl .hp { min-width: 90px; }
.touch .hud-tl { display: none; }
.touch .cc-btns { display: flex; gap: 8px; justify-content: center; }
.touch .crewcode { bottom: auto; top: calc(12px + env(safe-area-inset-top, 0px)); }
.touch .bk-code { display: block; text-align: left; padding: 12px 14px 10px; border-radius: 10px; font: 400 var(--t-s) var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--cream-dim); }
.touch .invite { top: calc(64px + env(safe-area-inset-top, 0px)); }
.touch .raidbox { transform-origin: top left; }
/* costruzione col dito */
.touch .bd-keys { display: none; }
.touch .bd-touch { display: flex; position: absolute; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: 98vw; box-sizing: border-box; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; pointer-events: auto; }
.bd-touch button { padding: 10px 14px 8px; border-radius: 9px; font: 700 14px var(--text); letter-spacing: .05em; text-transform: uppercase; color: var(--cream); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--edge); }
.bd-touch button.go { background: var(--pumpkin); color: #17110a; }
.bd-touch button[aria-pressed=true] { background: var(--bad); color: #17110a; }
.bd-tip { font: 600 12px var(--text); color: var(--cream-dim); }
.touch .bd-pal { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: 100vw; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
.touch .bd-pal button { flex: none; }
.touch .bd-pal .k { display: none; }
/* la prima schermata sul telefono: prima l'accesso, poi il resto; comandi col dito al posto dei tasti */
.keys-touch { display: none; }
.touch .keys { display: none; }
.touch .keys.keys-touch { display: grid; }
.touch #logo { width: min(300px, 70%); }
.touch .menu-grid { padding-block: 14px; gap: 14px; }
.touch .menu-grid .card { order: -1; }
.touch .lede { font-size: 15px; }
@media (orientation: landscape) {
  .touch .menu-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start; }
  .touch .menu-grid .card { order: 0; }
  .touch #portrait { max-width: 150px; }
}
/* in piedi: si gira il telefono */
.touch .rotate { display: grid; position: fixed; inset: 0; z-index: 50; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; background: rgba(6,9,15,.96); pointer-events: auto; }
.rotate b { font: 400 24px var(--display); color: var(--pumpkin); text-transform: uppercase; }
.rotate span { font: 600 16px var(--text); color: var(--cream-dim); }
/* schermi bassi (telefono di lato): finestre e menu a tutta altezza, caratteri che non scendono sotto il leggibile */
@media (max-height: 520px) {
  :root { --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 20px; --t-xl: 30px; }
  .win { padding: 6px max(8px, env(safe-area-inset-right, 0px)) 6px max(8px, env(safe-area-inset-left, 0px)); }
  .win-box { max-height: calc(100dvh - 12px); gap: 10px; padding: 12px 14px 10px; border-radius: 14px; }
  .book { grid-template-columns: 190px minmax(0, 1fr); }
  .bk-nav { padding: 8px 8px 8px max(8px, env(safe-area-inset-left, 0px)); gap: 2px; overflow-y: auto; }
  .bk-brand { font-size: 18px; margin-bottom: 4px; }
  .bk-nav button[data-tab], .touch .bk-code { padding: 8px 10px 6px; font-size: 13px; }
  .bk-nav .btn { font-size: 13px; padding: 9px 8px 7px; min-height: 0; }
  .bk-main { padding: 12px 14px; }
  .bd-pal button { width: 50px; padding: 4px 1px 3px; gap: 1px; font-size: 9px; }
  .bd-pal .sw { width: 18px; height: 18px; }
  .touch .bd-pal { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); padding: 5px; gap: 3px; }
  .bd-touch button { padding: 8px 12px 6px; font-size: 13px; }
  .bd-tip { display: none; }
  .bk-main { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .report { top: 6%; padding: 12px 16px 10px; gap: 6px; }
  .banner { top: 22%; }
  .bd-top { top: calc(6px + env(safe-area-inset-top, 0px)); padding: 6px 12px; }
  .bd-check { top: calc(46px + env(safe-area-inset-top, 0px)); }
}