html,body{color:#dfe4ea;background:#000;height:100%;margin:0;font:14px/1.35 system-ui,sans-serif;overflow:hidden}#view{position:fixed;inset:0}#view canvas{touch-action:none;-webkit-tap-highlight-color:transparent;display:block}.hud{pointer-events:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}.hud button{pointer-events:auto;font:inherit;color:#e8edf2;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#2b3440;border:1px solid #56657a;border-radius:4px;padding:5px 12px}.hud button:hover:not(:disabled){background:#384556}.hud button:disabled{opacity:.45;cursor:default}.top-left{width:320px;position:absolute;top:12px;left:12px}div.turn{letter-spacing:.02em;font-size:20px;font-weight:600}div.turn[data-phase=enemy]{color:#e08a6a}.notice{color:#f2d27a;min-height:1.3em}.log{background:#0c0f14b3;border-radius:4px;margin:4px 0 0;padding:8px 10px;list-style:none}.log li{opacity:.75}.log li:last-child{opacity:1}.top-right{flex-direction:column;align-items:flex-end;gap:6px;display:flex;position:absolute;top:12px;right:12px}.help{z-index:20;box-sizing:border-box;pointer-events:auto;color:#aab4c0;background:#1a212b;border:1px solid #56657a;border-radius:8px;flex-direction:column;width:max-content;max-width:min(440px,100vw - 24px);padding:8px 10px;font-size:12px;display:flex;position:fixed;right:12px}.help.hidden{display:none}.help-text{flex:auto;min-height:0;overflow-y:auto}.help-close{flex:none;align-self:flex-end;margin-top:6px}.camera{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.camera .sym{display:none}.camera .sym svg{margin:0 auto;display:block}.bottom{flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:calc(100vw - 24px);margin-inline:auto;display:flex;position:absolute;bottom:12px;left:0;right:0}.target{pointer-events:auto;background:#141a22e0;border:1px solid #56657a;border-radius:6px;align-items:center;gap:8px;padding:6px 10px;display:none}.target.shown{display:flex}.target .shot-buttons{flex:none;align-items:center;gap:8px;display:flex}.target.measure{box-sizing:border-box;visibility:hidden;pointer-events:none;max-width:100%;display:flex;position:absolute;bottom:0;left:0;right:0}.cards{gap:10px;display:flex}.dock{align-items:flex-end;gap:10px;display:flex}.dock>*{flex:none}.dock>.end-turn{min-height:44px}.card{pointer-events:auto;cursor:pointer;background:#141a22e0;border:2px solid #3a4656;border-radius:6px;width:170px;padding:8px 10px}.card.selected{border-color:#ffd34d}.card.down{border-color:#7a3a2c}.card.out{opacity:.6}.card .name{color:#a9c0de;font-size:15px;font-weight:600}.card .dim{color:#8f9aa7;font-size:12px}.card .buttons{flex-wrap:wrap;gap:4px;margin-top:4px;display:flex}.card .buttons button{padding:2px 8px;font-size:12px}.card .buttons button.weapon.selected{color:#fff3c4;background:#4d4218;border-color:#ffd34d}.card .hurt{color:#e08a6a;font-size:12px}.card .watch{color:#e0b04a}.card .portrait{float:left;object-fit:cover;-webkit-touch-callout:none;border-radius:6px;width:48px;height:48px;margin:2px 8px 2px 0}.card .level{clear:left;font-size:12px}.card.out .portrait{pointer-events:none}.card .buttons{clear:left}.card.down .portrait{filter:grayscale()brightness(.55)}.portrait-panel,.portrait-flash{pointer-events:none;text-align:center;position:fixed}.portrait-panel.hidden,.portrait-flash.hidden{display:none}.portrait-panel img,.portrait-flash img{aspect-ratio:1;box-sizing:border-box;border:1px solid #56657a;border-radius:8px;width:100%;display:block}.portrait-name{color:#a9c0de;margin-top:4px;font-weight:600}.portrait-flash{opacity:0;transition:opacity .25s}.portrait-flash.shown{opacity:1}.portrait-flash .portrait-name{text-shadow:0 1px 2px #000;margin-top:2px;font-size:12px}@media (prefers-reduced-motion:reduce){.portrait-flash{transition:none}}.tip{background:#11161c;border:1px solid #56657a;border-radius:4px;padding:3px 8px;display:none;position:fixed}.tip.shown{display:block}.end-screen,.confirm{pointer-events:auto;background:#0009;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.end-screen.shown,.confirm.shown{display:flex}.box{box-sizing:border-box;text-align:center;background:#1a212b;border:1px solid #56657a;border-radius:8px;flex-direction:column;align-items:center;gap:8px;max-width:calc(100vw - 24px);padding:18px 24px;display:flex}.box h2{margin:0}.hud button.has-ico{vertical-align:middle;justify-content:center;align-items:center;gap:6px;display:inline-flex}.hud button .ico{flex:none;width:20px;height:20px;display:block}.hud button .w{white-space:nowrap}.hud .key{display:none}@media (hover:hover) and (pointer:fine) and (width>=800px) and (height>=500px){.hud .key{box-sizing:border-box;vertical-align:middle;text-align:center;color:#8d99a8;border:1px solid #4a5768;border-radius:3px;flex:none;min-width:16px;margin-left:6px;padding:0 3px;font:600 10px/14px system-ui,sans-serif;display:inline-block}.hud .key:after{content:attr(data-key)}.hud button.has-ico .key{margin-left:0}.hud .side-strip button.has-ico .key{margin-left:auto}}.menu-sheet{z-index:20;pointer-events:auto;background:#0009;flex-direction:column;justify-content:flex-end;display:flex;position:fixed;inset:0}.menu-sheet.hidden{display:none}.menu-sheet .sheet{padding:8px 10px max(12px, env(safe-area-inset-bottom));background:#1a212b;border-top:1px solid #56657a;border-radius:8px 8px 0 0;flex-direction:column;gap:6px;display:flex}.menu-sheet .head{color:#a9c0de;justify-content:space-between;align-items:center;padding-left:4px;font-weight:600;display:flex}.menu-sheet .sheet>button{justify-content:flex-start}.menu-sheet.boxed{background:0 0}.menu-sheet.boxed .sheet{box-sizing:border-box;border:1px solid #56657a;border-radius:8px;width:max-content;min-width:200px;padding:8px 10px;position:fixed}.sheet-sep{background:#3a4656;flex:none;height:1px;margin:4px 0}.strip-lane{pointer-events:none;position:fixed}.strip-lane.clip{overflow:hidden}.side-strip{box-sizing:border-box;pointer-events:auto;visibility:hidden;background:#141a22e0;border:1px solid #56657a;border-right:none;border-radius:8px 0 0 8px;flex-direction:column;gap:4px;width:max-content;max-height:100%;padding:6px;transition:transform .2s ease-out,visibility 0s linear .2s;display:flex;position:absolute;bottom:0;right:0;transform:translate(calc(100% + 8px))}.side-strip.in{visibility:visible;transition:transform .2s ease-out;transform:none}.strip-lane.clip .side-strip,.strip-lane.docked .side-strip{border-right:1px solid #56657a;border-radius:8px}.strip-list{overscroll-behavior:contain;scrollbar-width:none;flex-direction:column;gap:4px;min-height:0;display:flex;overflow-y:auto}.strip-list::-webkit-scrollbar{display:none}.strip-list.more-down{-webkit-mask-image:linear-gradient(#000 calc(100% - 30px),#0000);mask-image:linear-gradient(#000 calc(100% - 30px),#0000)}.strip-list.more-up{-webkit-mask-image:linear-gradient(0deg,#000 calc(100% - 30px),#0000);mask-image:linear-gradient(0deg,#000 calc(100% - 30px),#0000)}.strip-list.more-up.more-down{-webkit-mask-image:linear-gradient(#0000,#000 30px calc(100% - 30px),#0000);mask-image:linear-gradient(#0000,#000 30px calc(100% - 30px),#0000)}.hud .side-strip .strip-list button.has-ico,.hud .side-strip>button.back.has-ico{flex:none;justify-content:flex-start;gap:8px;width:100%;min-height:44px;padding:5px 12px 5px 10px}.side-strip button.watch{color:#e0b04a}.strip-sep{background:#3a4656;flex:none;height:1px;margin:0 2px}.hud .side-strip button.on{color:#fff3c4;background:#4d4218;border-color:#ffd34d}.side-strip.tabbed:not(.in){transform:translate(calc(100% + 140px))}.side-strip.tabbed.peek{transform:translate(100%)}.side-strip.peek .strip-tab{visibility:visible}.hud .side-strip .strip-tab{white-space:nowrap;background:#141a22e0;border:1px solid #56657a;border-right:none;border-radius:8px 0 0 8px;align-items:center;gap:6px;min-height:44px;padding:0 10px 0 8px;display:inline-flex;position:absolute;bottom:6px;right:calc(100% + 1px)}.hud .side-strip .strip-tab .ico{width:20px;height:20px;display:block}.side-strip.tabbed.ghost{visibility:hidden;pointer-events:none;transition:none;transform:none}.side-strip.docked{visibility:hidden;border-right:1px solid #56657a;border-radius:8px;transition:none;position:relative;bottom:auto;right:auto;transform:none}.side-strip.docked.in{visibility:visible}.hud .side-strip.docked .strip-tab{display:none}@media (width<=699px),(height<=499px){.hud button{min-width:44px;min-height:44px}.top-right{flex-flow:wrap;justify-content:flex-end;top:8px;left:8px;right:8px}.help{width:auto;max-width:none;padding:12px 14px max(12px, env(safe-area-inset-bottom));border:none;border-radius:0;font-size:13px;inset:0}.help-close{align-self:stretch}.top-left{width:auto;top:60px;left:8px;right:8px}.log li{display:none}.log li:nth-last-child(-n+2){display:list-item}.camera{flex-wrap:nowrap;gap:4px}.camera button{min-width:44px;padding:0;font-size:20px;line-height:1}.camera .word{display:none}.camera .sym{display:inline}.bottom{width:auto;max-width:none;margin:0;bottom:4px;left:4px;right:4px}.dock{display:none}.target{box-sizing:border-box;flex-wrap:wrap;justify-content:center;max-width:100%}.target .text{white-space:nowrap;text-overflow:ellipsis;flex:0 auto;min-width:0;overflow:hidden}.cards{gap:4px;width:100%}.card{flex:1 1 0;width:auto;min-width:0;padding:4px 6px;font-size:12px}.card .name{font-size:13px}.card .dim,.card .level{font-size:11px}.card .buttons button{padding:2px 6px}.card .portrait{width:44px;height:44px;margin-right:6px}.portrait-panel{display:none}.target .shot-buttons{gap:6px}.target .shot-buttons button.has-ico{padding:5px 8px}}@media (height<=499px) and (orientation:landscape){.top-right{width:clamp(300px,48vw,400px);top:8px;left:auto;right:8px}.top-left{top:8px;left:8px;right:calc(clamp(300px,48vw,400px) + 16px)}.bottom{grid-template-rows:44px minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr) clamp(300px,48vw,400px);place-items:end center;gap:6px 8px;display:grid;inset:8px 8px 4px}.cards{grid-area:2/2/span 3;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;align-self:start;max-height:100%;display:grid;overflow-y:auto}.card{line-height:1.25}.target{box-sizing:border-box;grid-area:3/1;max-width:100%}.target.measure{grid-area:3/1/4/2}.camera{grid-area:4/1}}