@font-face { font-family:Naruto; src:url("assets/naruto.ttf"); }
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; }
body { margin:0; min-height:100vh; min-height:100dvh; background:radial-gradient(circle at top,#c66a2d,#17100d 68%); color:#fff8df; font-family:"Segoe UI",Arial,sans-serif; }
body:not(.playing) #live-screen, body.playing .setup-card { display:none; }
.card { width:min(92vw,720px); margin:5vh auto; padding:24px; border:1px solid #cf8c43; border-radius:18px; background:#24170ff2; box-shadow:0 20px 70px #0009; }
h1 { margin:0 0 10px; font-family:Naruto,"Segoe UI",sans-serif; }
h2 { margin:22px 0 10px; color:#ffca4d; font-size:17px; }
p,label { color:#e2cdb8; }
label { display:grid; gap:6px; }
.hint { margin:0 0 12px; }
input,select,button { min-height:44px; padding:10px 12px; border:1px solid #9d6d3c; border-radius:10px; background:#120b08; color:#fff8df; font:inherit; }
button { cursor:pointer; border-color:#ffb339; background:linear-gradient(135deg,#ee7828,#ffc64b); color:#2b1605; font-weight:900; }
button.secondary { background:#392518; color:#fff8df; border-color:#a87744; }
.actions { display:flex; gap:10px; justify-content:flex-start; margin-top:20px; }
.status { margin-top:12px; padding:11px; border-radius:10px; background:#120b08; color:#ffe477; }
.error { min-height:22px; margin-top:10px; color:#ff8c8c; }
.character-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.character-grid article { display:grid; place-items:center; gap:5px; min-width:0; padding:10px 5px; border:1px solid #684125; border-radius:12px; background:#120b08; }
.character-grid img { width:76px; height:76px; object-fit:contain; image-rendering:pixelated; }
.character-grid code { color:#ffca4d; }
.rules-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.rules-grid article,.battle-guide span { display:grid; gap:3px; padding:11px; border-radius:10px; background:#120b08; }
.rules-grid b { color:#ffca4d; font-size:20px; }.rules-grid small { color:#ba9f88; }
.battle-guide { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }

#live-screen { width:100vw; min-height:100vh; min-height:100dvh; place-items:center; overflow:hidden; background:#030201; }
body.playing #live-screen { display:grid; }
.game-shell { display:grid; grid-template-rows:29.6875% 56.25% 14.0625%; width:min(100vw,calc(100dvh * 9 / 16)); height:min(100dvh,calc(100vw * 16 / 9)); overflow:hidden; background:#160d08; box-shadow:0 0 80px #000; }
.gift-area { min-height:0; padding:max(12px,env(safe-area-inset-top)) 12px 8px; border-bottom:2px solid #ff9a2e; background:linear-gradient(#5a2418,#25120c); }
.game-title { margin-bottom:7px; color:#fff; text-align:center; font-family:Naruto,sans-serif; font-size:clamp(16px,4vw,23px); letter-spacing:.08em; text-shadow:2px 2px #000; }
#trigger-guide { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.trigger-card { display:grid; place-items:center; align-content:center; aspect-ratio:1; overflow:hidden; border-radius:50%; background:#1a0d09aa; text-align:center; }
.trigger-card b { color:#ffe979; font-size:clamp(11px,2.6vw,17px); }.trigger-card span { color:white; font-size:clamp(6px,1.5vw,9px); font-weight:900; text-shadow:1px 1px #000; }
.join-instruction { margin-top:6px; color:#ffe979; font-size:clamp(10px,2.25vw,13px); font-weight:1000; text-align:center; text-shadow:1px 1px #000; }
#character-guide { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:3px; }
#character-guide div { display:flex; min-width:0; align-items:center; justify-content:center; gap:2px; }
#character-guide img { width:clamp(19px,5vw,30px); height:clamp(19px,5vw,30px); object-fit:contain; image-rendering:pixelated; }
#character-guide .char-dot,.character-grid .char-dot { display:inline-block; width:clamp(19px,5vw,30px); height:clamp(19px,5vw,30px); border:2px solid #fff8; border-radius:50%; }
#character-guide .atlas-idle-preview { display:inline-block; width:clamp(19px,5vw,30px); height:clamp(19px,5vw,30px); image-rendering:pixelated; }
.character-grid .atlas-idle-preview { display:inline-block; width:76px; height:76px; image-rendering:pixelated; }
#character-guide span { overflow:hidden; color:#fff; font-size:clamp(6px,1.5vw,9px); font-weight:900; text-overflow:ellipsis; white-space:nowrap; }
#character-guide b { color:#ffe979; }
#live-status { margin-top:5px; color:#e7bd91; font-size:clamp(7px,1.6vw,10px); font-weight:800; text-align:center; }
.stage { position:relative; width:100%; height:100%; min-height:0; background:#111; }
canvas { display:block; width:100%; height:100%; image-rendering:auto; touch-action:none; }
.round,.reset { position:absolute; z-index:3; }
.leave { top:12px; left:12px; width:46px; height:46px; min-height:0; padding:0; border:2px solid #ffc351; border-radius:50%; background:#3b2419e8; color:white; font-size:30px; }
.reset { top:13px; right:12px; min-height:34px; padding:6px 10px; font-size:11px; }
#banner { position:absolute; z-index:2; top:18px; right:74px; left:74px; color:#fff5a6; font-weight:1000; text-align:center; text-shadow:2px 2px #000; }
.waiting-area { min-height:0; overflow:hidden; padding:8px 12px max(8px,env(safe-area-inset-bottom)); background:linear-gradient(#2c1810,#130a07); }
.waiting-head { display:flex; justify-content:space-between; color:#ffe979; font-family:Naruto,sans-serif; font-size:clamp(8px,1.9vw,12px); }
#waiting-list { display:flex; align-items:flex-end; gap:5px; height:calc(100% - 19px); overflow:hidden; }
.waiting-person { display:grid; flex:0 0 calc((100% - 35px)/8); min-width:0; place-items:center; }
.waiting-person img,.waiting-person .waiting-atlas-preview { display:block; width:100%; height:36px; object-fit:contain; image-rendering:pixelated; }
.waiting-person span { width:100%; overflow:hidden; color:#fff; font-size:clamp(6px,1.3vw,9px); font-weight:800; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.waiting-empty { margin:auto; color:#a88570; font-size:11px; }
#simulator { position:fixed; z-index:10; right:8px; bottom:8px; grid-template-columns:repeat(3,70px); gap:4px; padding:6px; background:#100a08e8; }
#simulator:not([hidden]) { display:grid; } #simulator input,#simulator select,#simulator button { min-height:28px; padding:3px; font-size:10px; }
@media(max-width:700px){ .card{padding:16px}.character-grid{grid-template-columns:repeat(2,1fr)}.actions{flex-direction:column}.actions button{width:100%} }
@media(max-width:430px){ .gift-area{padding-right:8px;padding-left:8px}.waiting-area{padding-right:8px;padding-left:8px} }