:root{--ink:#2f2a35;--muted:#62605a;--green:#2f6b4f;--line:#e2d8c8;--paper:#fbf6ec;--sea:#1b5883}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:radial-gradient(circle at 50% 30%,#3b93c4,#1b5883 70%,#123f60);color:var(--ink);font:18px/1.5 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
input,select{color:var(--ink)}
button{min-height:48px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:10px 16px;cursor:pointer;transition:transform .15s,background .15s}
button:active{transform:scale(.97)}
button:disabled{opacity:.5;cursor:default;transform:none}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #ffd54a;outline-offset:3px}
.primary{background:var(--green);border-color:var(--green);color:#fff}
.ghost{background:transparent;border-color:transparent}
input,select{min-height:48px;border:1px solid #c9bfb2;border-radius:12px;padding:8px 12px;background:#fff;max-width:100%}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;margin:0 0 8px}
p{margin:0 0 12px}
.small{font-size:15px;color:var(--muted)}
#app{min-height:100%;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
#app.playing{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);height:100%}
#stage{height:100%}
#stage .nt{border-radius:0;min-height:100%}
.home,.menu-card{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.home{color:#fff;text-align:center;padding-top:calc(min(100vw,520px)*.34)}.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.logo-img{width:100%;height:auto}
.logo{margin:0}.logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 10px #0007)}
.home .sub{font-size:20px;font-weight:700;margin:-4px 0 6px;text-shadow:0 2px 6px #000a}
.home .field{color:#fff;text-align:left}
.home .ver{color:#ffffffaa}
.big{min-height:64px;font-size:21px;font-weight:700;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 14px #0003}
.big small{font-size:14px;font-weight:400;opacity:.85}
.home .big{color:var(--ink)}.home .big.primary{color:#fff}.home .ghost{color:#fff;box-shadow:none}
.menu-card{background:rgba(255,250,242,.94);border-radius:22px;padding:18px;box-shadow:0 14px 40px #0005}
.menu-card>.ghost:first-child{align-self:flex-start;margin:-6px 0 0 -8px}
.menu-card h2{font-size:28px}.menu-card h3{font-size:21px;margin-top:10px}
.field{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:16px}
.choice{display:flex;gap:10px}
.choice label{flex:1}
.choice input{position:absolute;opacity:0}
.choice span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:64px;border:2px solid var(--line);border-radius:16px;background:#fff;font-size:26px;font-weight:800;cursor:pointer;text-align:center;line-height:1.15;padding:6px}
.choice span small{font-size:12px;font-weight:400;color:var(--muted)}
.choice input:checked+span{border-color:var(--green);background:#e6f2ea;box-shadow:0 0 0 2px var(--green)}
.choice input:focus-visible+span{outline:3px solid #ffd54a}
.seats{padding-left:26px;margin:4px 0;display:flex;flex-direction:column;gap:8px}
.seats li{font-size:19px}
.seats select,.seats input{margin:2px 6px 2px 0}
.code{font-size:30px;letter-spacing:8px;text-transform:uppercase;text-align:center;font-weight:800}
.code-big{font-size:64px;font-weight:900;letter-spacing:12px;text-align:center;margin:0;color:var(--sea);font-family:Georgia,serif}
.err{background:#fde3df;border-left:5px solid #c0392b;padding:10px;border-radius:10px}
.server{margin-top:10px;font-size:16px}.server summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.rules ul{padding-left:22px;margin:0 0 12px}
#toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);background:#2f4a3a;color:#fff;padding:12px 18px;border-radius:14px;z-index:50;max-width:90vw;box-shadow:0 8px 30px #0004;pointer-events:none}
#toast:empty{display:none}
.nt-me strong{text-decoration:underline}
.nt-net{margin-left:auto;flex:none;font-size:12px;font-weight:700;color:#2e6fb7;white-space:nowrap}
.nt-net.nt-off{color:#fff;background:#c0392b;padding:2px 8px;border-radius:8px}
.nt-endrow{justify-content:center}
.nt{padding-top:max(8px,env(safe-area-inset-top))}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
#app.menu{background:linear-gradient(180deg,#0000 0,#0000 30%,#123f60e6 62%,#123f60 100%),url(img/copertina.jpg) center top/100% auto no-repeat;min-height:100%}
@media (min-aspect-ratio:3/4){#app.menu{background-size:cover}}
.home .field{text-shadow:0 1px 4px #000}
.rooms ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.rooms li{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 14px}
.rooms li span{display:flex;flex-direction:column;line-height:1.25}.rooms li small{color:var(--muted);font-size:15px}
.choice span.vis{font-size:18px}
.nt-wrap{position:relative}
.nt-voice{display:inline-flex;gap:6px}
.nt-wrap .nt-voice{position:absolute;top:4px;right:4px;z-index:2}
.nt-voice button{min-height:44px;min-width:56px;padding:2px 8px;border-radius:14px;display:flex;flex-direction:column;align-items:center;line-height:1.1;font-size:20px;background:rgba(255,250,240,.88);box-shadow:0 2px 8px #0004}
.nt-voice button small{font-size:11px;font-weight:700}
.nt-voice button.on{background:#2f6b4f;color:#fff;border-color:#2f6b4f}
.nt-voice button.off{background:#fde3df}
.lobby-voice{display:flex;flex-direction:column;align-items:center;gap:4px;margin:4px 0}
.nt-talk{box-shadow:0 0 0 3px #3ddc84,0 0 14px #3ddc84!important;transition:box-shadow .1s}
.seats li.nt-talk{border-radius:10px}
.settings-btn{color:#fff;font-size:15px;min-height:44px}
.settings textarea{width:100%;font:inherit;font-size:18px;color:var(--ink);border:1px solid #c9bfb2;border-radius:12px;padding:10px;resize:vertical}
a.big{text-decoration:none;color:#fff}
.update{margin-top:4px}
.row{display:flex;gap:8px;flex-wrap:wrap}