/* Pixel device: one integer-grid case renderer, source glyphs inside real keys. */
@font-face{font-family:DigimonPixel;src:url('../assets/fonts/PixelifySans.ttf') format('truetype');font-display:swap}
:root{--hud-font:Consolas,'Microsoft JhengHei',monospace}
body{font-family:var(--hud-font)}
html,body{width:100%;height:100%;overflow:hidden;background:#14252b}
#app{display:flex;flex-direction:column;width:100%;max-width:none;height:100dvh;min-height:0;margin:0;padding:8px;gap:5px}
#app header{flex:none;padding:0 5px}#app h1{font-size:17px}#app .controls{flex:none;margin:3px 5px 5px;gap:10px;font-size:13px}
#app #status{flex:none;min-height:16px;margin:0 4px;font-size:11px;line-height:1.4}
#app .usage-note,#app #playtest-presets{display:none}
#app[data-started=true] #status{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;margin:-1px}
.device-shell{--key-size:54px;position:relative;display:grid;flex:1;min-height:0;min-width:0;width:100%;grid-template-columns:minmax(0,1fr) 72px;gap:7px;padding:9px 8px 9px 9px;isolation:isolate;color:#263847}
.pixel-device-art{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}
.device-bezel{position:relative;z-index:1;display:grid;grid-template-rows:16px minmax(0,1fr) 28px;min-width:0;min-height:0;padding:5px 5px 3px;background:none;border:0;box-shadow:none}
.device-brand{font:700 11px/1 Consolas,monospace;letter-spacing:.14em;color:#c7e2ed;padding:0 3px;align-self:center;white-space:nowrap}
.device-brand,.device-key-label,.device-utilities,#hp-label{font-family:var(--hud-font)}
.experience{font-family:DigimonPixel,'Microsoft JhengHei',monospace}
/* Match the time and level digits to the ATK/DEF/SPD readout. */
.device-shell #clock,.device-shell #level{font-family:Consolas,monospace;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}
.device-shell #stage,#app[data-started=true] .device-shell #stage{position:relative;width:100%;height:100%;min-height:0;min-width:0;margin:0;border:0;box-shadow:none;border-radius:0;overflow:hidden;isolation:isolate;color:#fff}
.device-shell #view{position:absolute;inset:0;width:100%;height:100%;border-radius:0;image-rendering:pixelated}
.device-shell .screen-frame{display:none}
.device-controls{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;min-height:0;padding:8px 1px 4px;align-items:stretch;justify-content:flex-start}
.device-controls .skills{position:static;flex:1;left:auto;bottom:auto;transform:none;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:10px;width:100%;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;clip-path:none}
.device-control{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:var(--key-size) minmax(14px,auto);place-items:center;align-content:start;gap:6px;width:100%;min-width:0}
.device-controls .skill.device-key{grid-area:1/1;position:relative;width:var(--key-size);height:var(--key-size);min-height:0;min-width:0;padding:0;margin:0;border:0;border-radius:0;background:transparent!important;box-shadow:none;filter:none;outline-offset:4px;overflow:visible;touch-action:manipulation;pointer-events:auto}
.device-controls .skill.device-key:focus-visible{outline:2px solid #0d405d}
.device-controls .skill.device-key:active:not(:disabled){transform:translateY(2px)}
.device-controls .skill.device-key:disabled{opacity:1}
.device-controls .skill.device-key img,.device-controls .skill.device-key strong,.device-controls .skill.device-key span,.device-controls .skill.device-key:before,.device-controls .skill.device-key:after{display:none!important}
.device-skill-glyph{grid-area:1/1;position:relative;z-index:2;width:32px;height:32px;max-width:calc(var(--key-size) - 20px);max-height:calc(var(--key-size) - 20px);pointer-events:none;image-rendering:pixelated}
.device-key-label{display:block;grid-area:2/1;font:700 11px/1.25 var(--hud-font);color:#624415;text-align:center;max-width:100%;min-height:14px;overflow-wrap:anywhere}
.device-key-label:empty{visibility:hidden}
.device-evolution{flex:none;width:100%;margin-top:auto;padding:10px 2px 2px}
.device-evolution #evolve-button{position:static;display:block;width:100%;min-width:0;max-width:none;min-height:35px;margin:0;padding:7px 3px;font-size:0;line-height:1;pointer-events:auto;border:2px solid #72541d;border-radius:0;background:#a94b13;box-shadow:inset 0 2px #f1ab38,inset 2px 0 #d48220,inset -2px 0 #763214,inset 0 -2px #652614;color:#fff4c2;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,100% 2px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) 100%,4px 100%,4px calc(100% - 2px),0 calc(100% - 2px),0 4px,2px 4px,2px 0)}
.device-evolution #evolve-button:after{content:'進化';display:block;font-size:12px;line-height:1.1;font-weight:700;letter-spacing:.08em;text-align:center}
.device-evolution #evolve-button:disabled{opacity:.65}
.device-utilities{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0;padding:4px 1px 0;color:#c8ddec}
.device-utilities .field-actions{position:static;display:flex;flex-direction:row;align-items:center;gap:9px;margin-right:auto;z-index:auto}
.device-utilities #kills{font:11px/1.1 Consolas,'Microsoft JhengHei',monospace;color:#c8ddec;text-shadow:none}
.device-utilities #pause-button,.device-utilities .device-settings{font-size:11px;line-height:1.1;min-height:21px;padding:3px 8px;border:1px solid #7092b8;border-radius:0;background:#173c70;color:#e3f0fa;box-shadow:inset 0 1px #4374a8;white-space:nowrap}
.actor{top:12px;left:12px;min-width:0;width:26%;max-width:330px;padding:10px;grid-template-columns:27% 1fr;gap:5px 9px;box-shadow:0 0 0 2px #315969;background:#132d36f5;border-color:#75d0df;clip-path:var(--cut)}
.actor-heading strong{font-size:clamp(13px,1.45cqw,21px)}.actor-heading small{font-size:11px;color:#fff}#level{font-size:clamp(11px,1.05cqw,15px)}
.actor #stats.actor-stats{display:flex!important;flex-wrap:wrap;gap:2px 6px;grid-column:auto;margin:2px 0 4px;font-size:0!important;line-height:1.25;letter-spacing:0;color:#fff}
.actor #stats.actor-stats>span{display:inline-block;font-size:clamp(10px,.92cqw,12px);white-space:nowrap}.actor #stats.actor-stats b{font-weight:600;color:#fff}
.device-shell .actor #status-effects{display:none}
.experience-value{color:#fff}
.experience{top:7px;width:30%;padding:5px 8px}.timer{top:50px}.resources{top:12px;right:12px}.resource-pill{min-width:62px;padding:5px 8px;border-radius:0}
#modal{background:#142d36;border:2px solid #517f8e;box-shadow:inset 0 0 0 2px #1d414b;padding:20px 5%;color:#dfedf1}
#modal h2{font-size:23px;margin:5px 0 14px}#modal p{font-size:14px}.result-skills{font-size:13px}.result-skills td,.result-skills th{padding:6px;border-color:#40626d}
.growth-card,.evolution-card{border-radius:0;box-shadow:inset 0 2px #37616b;background:#1b3b45}.growth-card{font-size:19px}
#app #preferences{border-radius:0;background:#142e38;box-shadow:inset 0 0 0 3px #355864,0 0 0 3px #0d2734}
@media(max-width:800px){#app{padding:4px}.device-shell{--key-size:44px;grid-template-columns:minmax(0,1fr) 58px;gap:5px;padding:7px}.device-bezel{grid-template-rows:14px minmax(0,1fr) 25px;padding:4px 4px 2px}.device-brand{font-size:9px}.device-key-label{font-size:10px}.device-skill-glyph{width:28px;height:28px}.device-controls{padding:5px 1px}.device-evolution{padding:7px 1px 1px}.device-evolution #evolve-button{min-height:30px}.device-evolution #evolve-button:after{font-size:11px}.actor{min-width:0;width:29%;padding:7px;top:8px;left:8px;grid-template-columns:28% 1fr}.actor-heading strong{font-size:13px}.actor-heading small{display:none}.actor #stats.actor-stats{gap:2px 5px}.actor #stats.actor-stats>span{font-size:10px}.experience{left:59%;width:30%}.timer{left:59%;top:46px}.device-utilities #pause-button,.device-utilities .device-settings{font-size:10px;padding:3px 6px}.device-utilities #kills{font-size:10px}.resources{top:9px;right:8px}.resource-pill{min-width:45px;padding:4px;gap:5px}.resource-pill img{width:18px;height:18px}.growth-card{min-width:130px}#modal{padding:14px 4%}#modal h2{font-size:20px}}
@media(max-width:480px){.device-shell{--key-size:36px;grid-template-columns:minmax(0,1fr) 48px;gap:4px;padding:6px}.device-bezel{grid-template-rows:12px minmax(0,1fr) 25px;padding:3px}.device-brand{font-size:8px;letter-spacing:.07em}.device-key-label{font-size:9px}.device-skill-glyph{width:22px;height:22px}.device-control{gap:5px;grid-template-rows:var(--key-size) minmax(12px,auto)}.device-evolution #evolve-button{min-height:29px}.device-evolution #evolve-button:after{font-size:10px}.device-controls .skills{gap:8px}.actor{width:52%;max-width:220px;grid-template-columns:28px 1fr;left:6px;top:7px}.actor .portrait-frame{display:block}.actor-heading strong{font-size:12px}.experience{top:7px;left:auto;right:6px;transform:none;width:40%;padding:5px;gap:4px}.experience .meter-name{font-size:10px}.timer{top:43px;left:auto;right:9px;transform:none}#clock{font-size:12px}.resources{display:none}.device-utilities #kills{display:none}.device-utilities{gap:4px}.device-utilities #pause-button,.device-utilities .device-settings{font-size:9px;padding:3px 5px}#modal h2{font-size:18px}#modal p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.device-controls .skill.device-key:active:not(:disabled){transform:none}}

/* The frame is painted on the same pixel grid as the case; the real button keeps its input handling. */
.device-evolution #evolve-button{height:42px;min-height:42px;padding:0;border:0;background:transparent;box-shadow:none;clip-path:none;color:#fff;opacity:1}
.device-evolution #evolve-button:after{color:#fff;text-shadow:1px 1px #632708}
.device-evolution #evolve-button:disabled{opacity:1}
.device-utilities #kills{color:#fff}
.device-utilities #pause-button,.device-utilities .device-settings{border:0;border-radius:0;background:transparent;box-shadow:none;padding:0;color:#fff}
.device-utilities #pause-button{font-size:11px;min-height:20px;white-space:nowrap}
.device-utilities .device-settings{display:grid;place-items:center;width:24px;height:24px;min-height:24px;flex:none}
.device-utilities .device-settings img{display:block;width:24px;height:24px;image-rendering:pixelated}