/* Sikelia — schermo TV (16:9, tutto in vh/vw così scala su qualunque risoluzione) */
body { overflow: hidden; font-size: 1.9vh; }
.screen { position: fixed; inset: 0; }
.connecting { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 3vh; color: var(--muted); }

/* ---- lobby ---- */
#lobby { display: flex; align-items: stretch; padding: 5vh 5vw; gap: 5vw; }
.lobby-left { flex: 0 0 38vw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lobby-title { font-size: 11vh; line-height: 1; }
.lobby-sub { font-size: 2.6vh; color: var(--muted); margin: 1vh 0 4vh; letter-spacing: .1em; }
.qr-box { background: var(--cream); padding: 1.6vh; border-radius: 2vh; box-shadow: 0 1vh 4vh rgba(0,0,0,.5); }
.qr-box img { display: block; width: 34vh; height: 34vh; }
.join-hint { margin-top: 3vh; font-size: 2.3vh; line-height: 1.5; color: var(--muted); }
.join-hint b { color: var(--cream); }
.room-code { margin-top: 1.5vh; font-size: 9vh; font-weight: 900; letter-spacing: .3em; color: var(--gold); padding-left: .3em; }
.lobby-right { flex: 1; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 2vh; padding: 4vh 3vw; display: flex; flex-direction: column; }
.lobby-right h2 { margin: 0 0 2vh; font-family: var(--title); font-size: 4vh; letter-spacing: .1em; }
.lobby-players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vh 2vw; }
.lobby-players li { display: flex; align-items: center; gap: 1.2vw; font-size: 3.2vh; font-weight: 800; background: rgba(255,255,255,.06); border-radius: 1.4vh; padding: 1.4vh 1.4vw; }
.lobby-players li .dot { width: 3.2vh; height: 3.2vh; }
.lobby-players li small { font-size: 2vh; color: var(--muted); font-weight: 700; margin-left: auto; }
.lobby-players li.empty { color: var(--muted); font-weight: 600; font-size: 2.4vh; border: 2px dashed var(--panel-line); background: none; }
.lobby-options { margin-top: auto; font-size: 2.4vh; color: var(--muted); line-height: 1.6; }
.lobby-options b { color: var(--cream); }
.lobby-wait { margin-top: 2vh; font-size: 2.8vh; color: var(--gold); font-weight: 800; }

/* ---- partita ---- */
#game { display: flex; flex-direction: column; }
.topbar { flex: 0 0 8vh; display: flex; align-items: center; gap: 2vw; padding: 0 1.6vw; background: linear-gradient(180deg, rgba(11,34,51,.95), rgba(11,34,51,.7)); border-bottom: 1px solid var(--panel-line); }
.top-brand { font-size: 4vh; }
.banner { flex: 1; display: flex; align-items: center; gap: 1.2vw; font-size: 3vh; font-weight: 800; }
.banner .dot { width: 3vh; height: 3vh; }
.banner .phase { padding: .5vh 1.2vw; border-radius: 3vh; background: rgba(255,255,255,.1); font-size: 2.4vh; }
.banner .hint { color: var(--muted); font-weight: 700; font-size: 2.4vh; }
.room-mini { font-size: 2.2vh; color: var(--muted); }
.room-mini b { color: var(--gold); letter-spacing: .15em; }
.main { flex: 1; display: flex; min-height: 0; }
.board-wrap { flex: 1; min-width: 0; padding: 1vh; }
.side { flex: 0 0 25vw; display: flex; flex-direction: column; gap: 1.2vh; padding: 1.2vh 1.2vh 1.2vh 0; min-height: 0; }
.panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 1.4vh; padding: 1.2vh 1vw; }
.panel h3 { margin: 0 0 .8vh; font-size: 1.7vh; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.players { list-style: none; margin: 0; padding: 0; }
.players li { display: flex; align-items: center; gap: .7vw; padding: .7vh .5vw; border-radius: .8vh; font-size: 2.3vh; font-weight: 800; }
.players li.current { background: rgba(232, 194, 46, .18); box-shadow: inset .4vw 0 0 var(--gold); }
.players li.out { opacity: .4; text-decoration: line-through; }
.players li .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.players li .stats { font-size: 1.8vh; color: var(--muted); font-weight: 700; white-space: nowrap; }
.players li .off { font-size: 1.6vh; color: #ff9a8a; }
.players li .ready { font-size: 1.7vh; color: #8fe39a; }
.battle-panel { min-height: 17vh; }
.battle { font-size: 2.2vh; }
.battle .vs { display: flex; align-items: center; justify-content: space-between; gap: .6vw; margin-bottom: .8vh; font-weight: 800; }
.battle .vs .side-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.battle .dice-row { display: flex; gap: .5vw; font-size: 2.8vh; margin: .4vh 0; }
.battle .result { margin-top: .8vh; color: var(--muted); font-weight: 700; }
.battle .result b { color: var(--gold); }
.battle .empty { color: var(--muted); }
.log-panel { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.log { list-style: none; margin: 0; padding: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%); mask-image: linear-gradient(to bottom, transparent, #000 22%); display: flex; flex-direction: column-reverse; font-size: 1.85vh; line-height: 1.35; }
.log li { padding: .45vh 0 .45vh .7vw; border-left: .35vw solid transparent; margin-bottom: .3vh; }

/* ---- overlay (piazzamento, vittoria) ---- */
.overlay { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); background: rgba(11,34,51,.94); border: 1px solid var(--panel-line); border-radius: 2vh; padding: 2.4vh 3vw; font-size: 2.6vh; text-align: center; box-shadow: 0 1vh 5vh rgba(0,0,0,.6); max-width: 70vw; }
.overlay.center { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.overlay h1 { margin: 0 0 1vh; font-family: var(--title); font-size: 6vh; color: var(--gold); }
.overlay .who { font-size: 4vh; font-weight: 900; }
.overlay .objs { text-align: left; margin-top: 2vh; font-size: 2vh; color: var(--muted); }
.overlay .objs b { color: var(--cream); }

.tv-buttons { position: fixed; right: 1vw; bottom: 1vh; display: flex; gap: .6vw; opacity: .35; }
.tv-buttons:hover, .tv-buttons:focus-within { opacity: 1; }
.tv-btn { font-size: 2.4vh; width: 5vh; height: 5vh; border-radius: 50%; border: 1px solid var(--panel-line); background: var(--panel); color: var(--cream); cursor: pointer; }
.tv-btn:focus { outline: 3px solid var(--gold); }

/* ---- pannello battaglia laterale: dadi piccoli ---- */
.battle .dice-row .die3 { --s: 3.4vh; margin-right: .5vw; }

/* ---- banner schieramento: pallini del giro ---- */
.banner .pips { display: inline-flex; gap: .5vw; }
.banner .pips i { width: 2vh; height: 2vh; border-radius: 50%; border: 2px solid var(--cream); opacity: .5; }
.banner .pips i.on { background: var(--gold); border-color: var(--gold); opacity: 1; }

/* ---- scena di battaglia: barra in basso sopra la mappa zoomata ---- */
.fight { position: absolute; left: 1.2vw; right: 26.6vw; bottom: 1.4vh; pointer-events: none; opacity: 0; transform: translateY(6vh); transition: opacity .35s, transform .45s cubic-bezier(.3,1.3,.5,1); z-index: 5; }
.fight.show { opacity: 1; transform: none; }
.f-box { position: relative; background: linear-gradient(180deg, rgba(20,48,70,.96), rgba(9,26,40,.97)); border: 2px solid var(--panel-line); border-radius: 2.4vh; padding: 1.6vh 2vw 1.8vh; box-shadow: 0 2vh 6vh rgba(0,0,0,.7); }
.f-head { text-align: center; font-family: var(--title); letter-spacing: .3em; font-size: 2.2vh; color: var(--gold); margin-bottom: 1vh; }
.f-main { display: flex; align-items: center; gap: 1.5vw; }
.f-side { flex: 0 0 19vw; text-align: center; position: relative; padding-top: 1.2vh; }
.f-strip { position: absolute; top: 0; left: 15%; right: 15%; height: .6vh; border-radius: 1vh; }
.f-role { font-size: 1.6vh; letter-spacing: .25em; color: var(--muted); font-weight: 800; }
.f-terr { font-size: 3.4vh; font-weight: 900; line-height: 1.1; margin: .4vh 0; }
.f-player { font-size: 2vh; font-weight: 800; color: var(--muted); }
.f-count { font-size: 7vh; font-weight: 900; line-height: 1; margin-top: .8vh; color: var(--cream); }
.f-count.bump { animation: f-bump .5s ease-out; color: #ff8f7d; }
@keyframes f-bump { 0% { transform: scale(1.5); } 100% { transform: none; } }
.f-tanks { display: flex; flex-wrap: wrap; justify-content: center; gap: .3vw; margin-top: .8vh; min-height: 3vh; }
.f-tank { width: 3.6vh; height: 2.3vh; overflow: visible; transition: transform .3s; }
.f-tank.boom { animation: f-boom .7s ease-out forwards; }
@keyframes f-boom { 0% { transform: scale(1); filter: none; } 30% { transform: scale(1.8) rotate(-10deg); filter: brightness(3) drop-shadow(0 0 .8vh #ffb347); } 100% { transform: scale(.2) rotate(30deg); opacity: 0; } }
.f-dice { flex: 1; display: flex; flex-direction: column; gap: 1.4vh; align-items: center; justify-content: center; min-height: 27vh; }
.f-row { display: flex; align-items: center; gap: 2vw; }
.f-row .die3 { --s: 7.6vh; }
.f-row .die3.waiting { opacity: .25; filter: grayscale(1); }
.f-gap { display: inline-block; width: 7.6vh; height: 7.6vh; }
.f-vs { width: 4.5vh; text-align: center; font-size: 3.6vh; color: var(--muted); font-weight: 900; }
.f-vs.att { color: #ff7a66; } .f-vs.def { color: #6fa2ff; }
.f-status { text-align: center; margin-top: 1.2vh; font-size: 2.8vh; font-weight: 800; min-height: 3.6vh; }
.f-status .neg { color: #ff8f7d; }
.f-timer { display: inline-block; min-width: 4.4vh; margin-left: .8vw; padding: .2vh .6vw; border-radius: 1vh; background: var(--red); color: #fff; font-variant-numeric: tabular-nums; }
.f-stamp { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-12deg) scale(2.2); opacity: 0; font-family: var(--title); font-size: 6.2vh; color: var(--gold); border: .5vh solid var(--gold); border-radius: 2vh; padding: .6vh 2.5vw; text-shadow: 0 .4vh 1.5vh rgba(0,0,0,.7); background: rgba(9,26,40,.7); }
.f-stamp.show { animation: f-stamp .45s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes f-stamp { to { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } }

/* ---- annunci di turno ---- */
.announce { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 6; }
.announce.show { opacity: 1; }
.ann-box { position: relative; min-width: 46vw; max-width: 70vw; text-align: center; background: rgba(9,26,40,.95); border: .4vh solid var(--gold); border-radius: 3vh; padding: 4vh 4vw 3.6vh; box-shadow: 0 2vh 8vh rgba(0,0,0,.75); transform: translateY(4vh); transition: transform .4s cubic-bezier(.3,1.4,.5,1); overflow: hidden; }
.announce.show .ann-box { transform: none; }
.ann-strip { position: absolute; left: 0; right: 0; top: 0; height: 1.2vh; }
.ann-title { font-family: var(--title); font-size: 7vh; line-height: 1.1; }
.ann-sub { margin-top: 1.5vh; font-size: 3.2vh; font-weight: 800; color: var(--gold); }