/* BACK TO HAWKINS — The Other Side · stylesheet client live (MOBILE-FIRST)
* v2: scrollabile, tap affidabili, layout telefono. Canvas dietro e NON cliccabile.
* Font: (lobby: titolo generico + poster + login)
* (in gioco: hud in alto + comandi in basso)
* body riceve la classe "playing" quando si entra nel labirinto.
*/
:root{
--bg0:#080103; --ink:#f6ece8; --red:#ff1e22; --red-soft:#ff5a4a; --ember:#ff5a1a;
--glass:rgba(20,4,6,.66); --line:rgba(255,58,26,.45);
--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{
font-family:"Cinzel",Georgia,serif; color:var(--ink);
background:radial-gradient(130% 80% at 50% 8%,#3a0709 0%,var(--bg0) 70%);
min-height:100svh; /* niente overflow:hidden → si scorre */
-webkit-tap-highlight-color:transparent;
}
/* canvas labirinto: dietro tutto e MAI cliccabile (così i tap arrivano alla UI) */
#cv{position:fixed; inset:0; width:100vw; height:100svh; z-index:0; display:block; pointer-events:none}
/* ---------- LOBBY (prima di entrare) ---------- */
.bth-ui{
position:relative; z-index:1; min-height:100svh;
display:flex; flex-direction:column; align-items:center; gap:16px;
padding:18px 16px calc(24px + var(--safe-b));
}
.bth-title{text-align:center; text-shadow:0 0 26px rgba(255,30,40,.7),0 2px 10px #000; margin-top:6px}
.bth-title h1{font-weight:900; font-size:clamp(28px,8vw,54px); margin:0; letter-spacing:.03em; line-height:1.02}
.bth-title .sub{font-size:clamp(11px,3vw,16px); letter-spacing:.35em; color:var(--red-soft); text-transform:uppercase; margin-top:.6em}
/* poster d'avvio: immagine reale; in attesa, fondo coerente (mai testo nudo) */
.bth-poster{width:min(420px,90vw); aspect-ratio:4/5; border-radius:16px;
border:1px solid var(--line); background:#1a0305 center/cover no-repeat;
box-shadow:0 0 50px rgba(255,30,20,.25)}
.bth-card{background:var(--glass); border:1px solid var(--line); border-radius:16px;
padding:16px; backdrop-filter:blur(4px);
box-shadow:0 0 40px rgba(255,30,20,.12), inset 0 0 30px rgba(0,0,0,.5);
width:min(520px,100%); display:flex; flex-direction:column; gap:10px}
/* form: tutto a larghezza piena su mobile, tap target ampi */
.bth-ui input{width:100%; font-family:inherit; background:rgba(0,0,0,.45); color:var(--ink);
border:1px solid var(--line); border-radius:12px; padding:14px; font-size:16px; outline:none} /* 16px = niente zoom iOS */
.bth-ui input::placeholder{color:rgba(246,236,232,.45)}
.bth-ui input:focus{border-color:var(--red); box-shadow:0 0 16px rgba(255,30,34,.4)}
.bth-ui label{font-size:13px; color:rgba(246,236,232,.85); display:flex; align-items:center; gap:8px}
button,.bth-btn{font-family:inherit; cursor:pointer; color:var(--ink); width:100%;
min-height:50px; background:linear-gradient(180deg,#7a0f14,#420609); border:1px solid var(--red);
border-radius:14px; padding:13px 18px; font-size:16px; font-weight:700; letter-spacing:.02em;
text-shadow:0 1px 6px #000; box-shadow:0 0 18px rgba(255,30,20,.25); transition:.12s; touch-action:manipulation}
button:hover,.bth-btn:hover{background:var(--red); color:#180402; box-shadow:0 0 28px rgba(255,58,26,.55)}
button:active,.bth-btn:active{transform:translateY(1px)}
.bth-btn--ghost{background:rgba(255,58,26,.10)}
.bth-row{display:flex; gap:10px; flex-wrap:wrap}
.bth-row > *{flex:1 1 140px}
.bth-enter{font-size:clamp(17px,4.5vw,22px); min-height:56px; border-radius:999px; width:min(360px,90vw)}
.bth-legal{font-size:12px; opacity:.8; text-align:center}
.bth-legal a{color:rgba(246,236,232,.7); text-decoration:none; margin:0 10px}
.bth-legal a:hover{color:var(--red-soft)}
/* ---------- IN GIOCO (body.playing) ---------- */
.bth-game{display:none}
body.playing .bth-ui{display:none} /* nasconde il lobby */
body.playing .bth-game{display:block}
/* HUD in alto */
.bth-hud{position:fixed; top:0; left:0; right:0; z-index:3;
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
background:linear-gradient(180deg,rgba(8,1,3,.85),rgba(8,1,3,0));
font-size:14px; text-shadow:0 0 12px rgba(255,30,30,.6)}
.bth-hud .city{font-weight:900; color:var(--ink)}
.bth-hud .chain{color:var(--red-soft); font-weight:900}
/* comandi ai bivi, fissi in basso, pollice-friendly */
.bth-nav{position:fixed; left:0; right:0; bottom:0; z-index:3;
display:grid; grid-template-columns:1fr 1fr; gap:10px;
padding:12px 14px calc(14px + var(--safe-b));
background:linear-gradient(0deg,rgba(8,1,3,.9),rgba(8,1,3,0))}
.bth-nav button{min-height:56px; margin:0}
.bth-nav .wide{grid-column:1 / -1}
/* toast / annunci */
.bth-toast{position:fixed; left:50%; top:38%; transform:translate(-50%,-50%); z-index:6;
font-weight:900; font-size:clamp(30px,11vw,72px); color:var(--ink);
text-shadow:0 0 36px var(--red); opacity:0; transition:opacity .4s; pointer-events:none; text-align:center; width:92%}
.bth-toast.on{opacity:1}
/* overlay lock 3h */
.bth-lock{position:fixed; inset:0; z-index:7; display:none; flex-direction:column;
align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px;
background:radial-gradient(circle at 50% 40%,rgba(60,4,6,.9),rgba(4,0,1,.97))}
.bth-lock.on{display:flex}
.bth-lock .big{font-size:clamp(26px,7vw,46px); color:var(--red-soft); text-shadow:0 0 24px var(--red)}
.bth-lock .small{opacity:.85; max-width:34ch}
.bth-lock button{width:min(320px,90vw)}
/* ---------- DESKTOP (rifinitura) ---------- */
@media (min-width:720px){
.bth-ui{gap:18px; padding-top:28px}
button,.bth-btn{width:auto}
.bth-card{padding:18px 20px}
.bth-nav{grid-template-columns:repeat(4,1fr); max-width:760px; margin:0 auto; right:0; left:0}
.bth-nav .wide{grid-column:auto}
}
.hidden{display:none !important}
#riddle{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + var(--safe-b));z-index:5;width:min(520px,92vw)}