:root{color-scheme:dark;--ink:#101c23;--panel:#182832;--edge:#3a4a4e;--gold:#e5bd79;--text:#eee9db;--muted:#aebbbf;--cyan:#80d5e1;--vh:100dvh;font-family:'Yu Gothic UI','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;color:var(--text);background:#10191d}
*{box-sizing:border-box}body{margin:0;height:var(--vh);overflow:hidden;display:flex;align-items:center;justify-content:center;gap:64px;background:radial-gradient(ellipse at 70% 30%,#25332e 0%,#10191d 62%);overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{cursor:default}button,canvas,.controls,.roster{user-select:none;-webkit-user-select:none}button{touch-action:manipulation}button[hidden],[hidden]{display:none!important}.game-shell{width:min(100%,500px);height:100%;max-height:1040px;display:grid;grid-template-rows:50px minmax(0,1fr) 26px 74px 112px;padding:env(safe-area-inset-top) 10px max(8px,env(safe-area-inset-bottom));background:linear-gradient(160deg,#213138,#0c1922);border-inline:1px solid #ffffff0d;box-shadow:0 18px 80px #0006;overflow:hidden}
.hud{display:flex;align-items:center;gap:9px;min-width:0}.stage-heading{display:flex;flex-direction:column;flex:1;min-width:0}.stage-heading>span{font:11px Georgia,serif;letter-spacing:3px;color:var(--gold)}.stage-heading strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-counters{display:flex;align-items:center;gap:12px;font-size:11px;white-space:nowrap}.hud-counters b{font-variant-numeric:tabular-nums;font-size:17px;font-weight:500}.hud-counters>span{color:var(--muted)}#timer.low{color:#ff927d}.icon-btn{border:1px solid #5f74774a;background:#ffffff04;border-radius:7px;width:36px;height:36px;padding:0;font-size:20px}.icon-btn span{font-size:8px;margin-left:1px}.arena-zone{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;background:#090f13;overflow:hidden;box-shadow:0 0 0 1px #72847730}#game{display:block;touch-action:none}.field-message{display:flex;align-items:center;justify-content:space-between;gap:6px;overflow:hidden;font-size:10px}.field-message>span:first-child{color:var(--gold);white-space:nowrap}.field-message>span:last-child{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,34px);gap:4px}.unit-chip{min-width:0;display:flex;align-items:center;gap:2px;padding:1px 4px 1px 0;background:linear-gradient(135deg,#2e4146,#13232b);border:1px solid #657a7f60;border-radius:4px;height:34px;position:relative;overflow:hidden;text-align:left}.unit-chip .unit-art{width:32px;height:32px;flex-shrink:0}.unit-chip .chip-name{font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.unit-chip.active{border-color:var(--cyan);box-shadow:inset 0 0 12px #5ee0e21c}.unit-chip.escaped,.unit-chip.rescued{border-color:#8ec89c}.unit-chip.escaped:after,.unit-chip.rescued:after{content:'✓';position:absolute;right:1px;top:0;font-size:10px;color:#ade4b2}.unit-chip.locked,.unit-chip.lost,.unit-chip.captured{opacity:.33;filter:grayscale(1)}.unit-chip.captured:after{content:'救出待ち';position:absolute;inset:9px 0 auto;text-align:center;font-size:8px;background:#171b1bd4;color:#f4be7d}.unit-art{background-image:url('/assets/heroes.png');background-size:500% 200%;background-repeat:no-repeat;display:block;filter:drop-shadow(0 3px 3px #0005)}
.controls{display:flex;align-items:center;justify-content:space-between;gap:7px;touch-action:none}.joystick{position:relative;width:100px;height:100px;flex-shrink:0;border-radius:50%;border:2px solid #71838970;background:radial-gradient(circle,#30454f,#182934 64%,#0d1a22 65%,#25353d 70%,#101c26 74%);box-shadow:inset 0 0 12px #0008;touch-action:none}.dir{position:absolute;color:#93a6af;font-size:12px;line-height:12px;pointer-events:none}.north{top:8px;left:41px}.south{bottom:8px;left:41px}.east{right:7px;top:40px}.west{left:7px;top:40px}.stick{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);width:40px;height:40px;border-radius:50%;background:linear-gradient(#38515e,#20343e);border:1px solid #92a9b06b;box-shadow:0 3px 8px #0008;pointer-events:none}.control-hint{display:flex;flex-direction:column;text-align:center;gap:5px;font-size:10px;color:var(--gold);flex:1;min-width:0}.control-hint small{font-size:9px;color:var(--muted)}.attack-buttons{display:flex;gap:10px}.attack-btn{width:70px;height:70px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px double #e2a779;background:radial-gradient(circle at 40% 30%,#964d40,#442d2c);box-shadow:0 0 0 4px #0a1720,0 0 0 5px #9c6e515e,inset 0 0 8px #fa9f4940;touch-action:none}.attack-btn b{font-family:Georgia,serif;font-size:28px;line-height:29px;font-weight:400}.attack-btn span{font-size:10px}.attack-btn.special{border-color:#8abed9;background:radial-gradient(circle at 40% 30%,#376d91,#1e354f);box-shadow:0 0 0 4px #0a1720,0 0 0 5px #6ca6d05e,inset 0 0 8px #71bafa40}.attack-btn.pressed{filter:brightness(1.4);transform:scale(.96)}
.overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;background:#071016ae;backdrop-filter:blur(3px);z-index:3;padding:12px;overflow:auto;overscroll-behavior:contain}.overlay.menu{background:linear-gradient(0deg,#08131af2,#08131a9e 70%,#08131a73);backdrop-filter:blur(1px)}.panel{width:100%;max-width:400px;margin-block:auto;text-align:center;padding:12px 6px}.panel h2{font-family:'Yu Mincho','Hiragino Mincho ProN',serif;font-weight:600;margin:0 0 7px;font-size:28px;letter-spacing:2px}.panel p{font-size:12px;color:#c3ccca;line-height:1.8;margin:8px 0}.panel .eyebrow{display:block;color:var(--gold);font:11px Georgia,serif;letter-spacing:2px;margin-bottom:12px}.panel .menu-title{font-size:clamp(27px,7vw,40px);line-height:1.45;text-shadow:0 2px 16px #0009}.panel .lead{margin:15px 0 22px;font-size:12px}.action{display:block;width:100%;min-height:45px;padding:11px 15px;margin-top:9px;border:1px solid #dec08a;border-radius:5px;background:linear-gradient(120deg,#d9b777,#f0d69f);color:#24251d;font-weight:600;font-size:13px;box-shadow:0 4px 18px #0003}.action.secondary{border-color:#78939570;background:#1b303dcc;color:#e2e8e3;font-weight:400}.action.quiet{background:transparent;border-color:transparent;color:#b9c8c7;font-weight:400;box-shadow:none;margin-top:3px;min-height:36px;padding:8px}.menu-footer{font-size:10px!important;color:#9faeaf!important;margin-top:15px!important}.selection-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:12px 0}.select-unit{padding:2px;border:1px solid #60736d;border-radius:5px;background:#1a2e36;min-width:0;min-height:66px;position:relative}.select-unit .unit-art{height:47px;width:47px;margin:auto}.select-unit .short-name{font-size:9px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-unit:disabled{opacity:.28;filter:grayscale(1)}.select-unit.chosen{border-color:var(--gold);background:#594b32;box-shadow:inset 0 0 12px #d5ae7630}.selected-info{min-height:55px}.selected-info strong{color:var(--gold);font-size:14px}.selected-info p{font-size:11px;margin:4px 0}.stage-caption{font-size:11px!important;color:var(--cyan)!important}.panel .help-list{text-align:left;font-size:12px;line-height:1.8;padding-left:18px;color:#d9e0dc}.help-list li{margin:8px 0}.result-grid{display:flex;gap:10px;justify-content:center;margin:18px 0}.result-grid div{padding:8px 15px;border-left:1px solid #9ca48744}.result-grid b{display:block;font-size:24px;color:var(--gold)}.result-grid span{font-size:10px;color:var(--muted)}.toast{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:#10222bef;color:#f4d899;border:1px solid #bda47670;border-radius:4px;font-size:11px;max-width:90%;text-align:center;padding:7px 12px;opacity:0;z-index:4;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}
.desktop-note{width:250px;flex-shrink:0}.edition{font:12px Georgia,serif;color:var(--gold);letter-spacing:3px}.desktop-note h1{font-family:'Yu Mincho',serif;font-size:52px;letter-spacing:7px;line-height:1.4;font-weight:500;margin:24px 0}.tagline{font-size:14px;color:#bdc7c3;line-height:2}.rule-block{display:flex;gap:18px;margin-top:24px}.rule-block>span{font:16px Georgia,serif;color:#e5bd79}.rule-block p{font-size:13px;margin:0}.rule-block small{display:block;font-size:10px;color:#899d9d;line-height:1.8;margin-top:5px}.keyboard-note{font-size:11px;line-height:2.3;color:#a5b4b5;margin-top:36px}kbd{font:10px monospace;border:1px solid #667d7b60;border-radius:3px;padding:2px 5px}.prototype-note{font-size:9px;color:#718687}
@media(max-width:980px){.desktop-note{display:none}body{gap:0}}
@media(max-width:370px){.game-shell{padding-inline:6px;grid-template-rows:44px minmax(0,1fr) 24px 70px 102px}.hud{gap:6px}.hud-counters{gap:7px}.icon-btn{width:32px;height:32px}.attack-btn{width:60px;height:60px}.joystick{width:88px;height:88px}.north,.south{left:35px}.east,.west{top:34px}.roster{grid-template-rows:repeat(2,32px)}.unit-chip{height:32px}.unit-chip .unit-art{width:27px;height:27px}.chip-name{font-size:8px!important}.control-hint{font-size:9px}.attack-buttons{gap:8px}.panel h2{font-size:23px}.select-unit{min-height:56px}.select-unit .unit-art{height:37px;width:37px}.panel .lead{margin:10px 0}.action{min-height:42px;padding:9px}}
@media(max-height:650px) and (orientation:portrait){.game-shell{grid-template-rows:42px minmax(0,1fr) 22px 68px 94px}.joystick{width:86px;height:86px}.north,.south{left:34px}.east,.west{top:33px}.attack-btn{width:60px;height:60px}.panel{padding:6px 2px}.panel .eyebrow{margin-bottom:6px}.panel .lead{margin:8px 0}.panel .menu-title{font-size:27px}.menu-footer{margin-top:6px!important}.selection-grid{margin:7px 0;gap:4px}.select-unit{min-height:52px}.select-unit .unit-art{width:34px;height:34px}.selected-info{min-height:42px}.selected-info p{margin:2px 0}.panel h2{font-size:21px}.action{min-height:39px;padding:8px;margin-top:6px}}
@media(orientation:landscape) and (max-height:650px){.desktop-note{display:none}.game-shell{max-width:900px;width:100%;grid-template-columns:minmax(0,1fr) 230px;grid-template-rows:42px minmax(0,1fr) 26px 100px;column-gap:12px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.hud{grid-column:1/3}.arena-zone{grid-column:1;grid-row:2/5}.field-message{grid-column:2;grid-row:3}.roster{grid-column:2;grid-row:2;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,52px);align-content:end}.unit-chip{height:52px;flex-direction:column;padding:0}.unit-chip .unit-art{height:32px;width:32px}.controls{grid-column:2;grid-row:4}.control-hint{display:none}.joystick{width:82px;height:82px}.north,.south{left:32px}.east,.west{top:31px}.attack-btn{width:57px;height:57px}.attack-buttons{gap:7px}.panel{max-width:340px}.panel .menu-title{font-size:26px}.panel .lead,.menu-footer{display:none}.panel .eyebrow{margin-bottom:5px}.select-unit{min-height:46px}.select-unit .unit-art{width:30px;height:30px}.selection-grid{margin:4px 0}.selected-info{min-height:30px}.selected-info p{margin:1px 0}.panel h2{font-size:19px}.action{min-height:35px;margin-top:5px;padding:6px}.overlay{padding:5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}