:root { --bg:#141020; --panel:#241c38; --gold:#ffcc33; --text:#fff; }
html,body{margin:0;padding:0;height:100%;background:var(--bg);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:-apple-system,"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;color:var(--text)}
#game{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#ui{position:fixed;inset:0;pointer-events:none}
#ui .screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));box-sizing:border-box;background:rgba(10,8,20,.86);pointer-events:auto;overflow:hidden}
#ui .screen.light{background:rgba(10,8,20,.55)}
#ui .screen.banner{background:transparent;pointer-events:none;justify-content:flex-start;padding-top:28vh}
.screen h1{font-size:30px;margin:0 0 6px;text-align:center;line-height:1.3}
.screen h2{font-size:24px;margin:0 0 10px;text-align:center}
.screen p{font-size:15px;line-height:1.75;margin:0 0 16px;text-align:center;color:#e8e4f0}
rt{font-size:0.5em;color:#ffd}
button{font:inherit;font-size:18px;font-weight:700;padding:13px 28px;border:0;border-radius:14px;background:var(--gold);color:#222;margin:6px;box-shadow:0 4px 0 #b8901a;cursor:pointer}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #b8901a}
button.sub{background:#4a4260;color:#fff;box-shadow:0 4px 0 #2a2438;font-size:15px;padding:10px 18px}
button.danger{background:#d9534f;color:#fff;box-shadow:0 4px 0 #8a2a28;font-size:14px;padding:8px 14px}
.title-logo{font-size:40px;font-weight:900;letter-spacing:2px;color:var(--gold);text-shadow:0 3px 0 #7a5a10,0 0 24px rgba(255,204,51,.4);line-height:1.2;text-align:center}
.title-sub{font-size:16px;color:#cfc;margin-bottom:18px}
.title-canvas{width:160px;height:200px}
.slots{display:flex;flex-direction:column;gap:10px;width:100%;max-width:360px}
.slot{background:var(--panel);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:10px}
.slot input{font:inherit;font-size:16px;font-weight:700;background:#141020;color:#fff;border:2px solid #4a4260;border-radius:8px;padding:6px 8px;width:92px;min-width:0}
.slot .info{flex:1;font-size:12px;color:#cfc8e0;white-space:nowrap}
.slot .info b{display:block;font-size:15px;color:#fff}
.slot button{padding:10px 16px;font-size:16px;margin:0}
.map-head{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:400px;margin-bottom:6px;font-size:14px}
.map-head b{font-size:16px}
.grid{display:grid;gap:2px;width:100%;max-width:400px}
.map-view{position:relative;width:100%;max-width:400px;height:min(62vh,560px);overflow:hidden;touch-action:none;border-radius:12px;background:rgba(255,255,255,.03)}
.map-view .grid{position:absolute;left:0;top:0;width:100%;transform-origin:0 0;will-change:transform}
.tile.open{background:#5a4f8a;color:#fff}
.tile{aspect-ratio:1;border-radius:6px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;background:#3a3450;color:#9890b0;position:relative;overflow:hidden}
.tile.cleared{background:#3dbb6a;color:#fff}
.tile.cleared::after{content:'✓';position:absolute;right:1px;top:-1px;font-size:9px;color:#fff}
.tile.empty{background:transparent}
@keyframes blink{from{box-shadow:0 0 0 0 rgba(255,204,51,.9)}to{box-shadow:0 0 0 6px rgba(255,204,51,0)}}
.modal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);border-radius:18px;padding:22px 20px;width:min(86vw,340px);text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.modal h2{font-size:26px}
.modal .spot{font-size:18px;color:#ffe9a8;margin-bottom:8px}
.modal .boss{font-size:13px;color:#f9b;margin-bottom:10px}
.banner-box{background:rgba(20,16,32,.85);border:3px solid var(--gold);border-radius:18px;padding:16px 22px;text-align:center;animation:pop .35s ease-out}
.banner-box.boss{border-color:#ff5c8a;background:rgba(60,0,30,.88)}
.banner-box h2{font-size:28px;margin:0 0 4px}
.banner-box p{margin:0;font-size:15px}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.weapon-up{font-size:22px;color:var(--gold);margin:8px 0}
.stats{font-size:15px;color:#ddd;margin-bottom:10px}
.mute{position:absolute;top:max(10px,env(safe-area-inset-top));right:12px;font-size:13px;padding:6px 10px}
.allclear{background:linear-gradient(#1a1040,#3a1a60)}
.hint{font-size:12px;color:#aaa;margin-top:14px}