:root{color-scheme:dark;--cyan:#72effa;--cyan-shadow:#278093;--navy:#142a35;--metal:#405962;--gold:#ffd468;--panel:#132a34ef;--cut:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
*{box-sizing:border-box}body{margin:0;background:#111e25;color:#e9f8fa;font:15px/1.5 'Microsoft JhengHei',system-ui,sans-serif}button,select{font:inherit}button,a,select,input{touch-action:manipulation}button{cursor:pointer;color:#e5f6f7;background:#213d49;border:1px solid #547581;border-radius:4px;padding:8px 13px}button:disabled{cursor:default;opacity:.56}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}a{color:#8ee6ef}select{max-width:230px;background:#142b35;color:#edf8f8;padding:7px;border:1px solid #66828b}main{position:relative;max-width:1440px;margin:auto;padding:14px}header{display:flex;justify-content:space-between;align-items:center;gap:15px}h1{font-size:22px;margin:0}.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0}.controls label{display:flex;align-items:center;gap:6px}#start{background:#b7772b;border-color:#e7bd59;color:#fff5db}#stage{position:relative;width:min(100%,calc((100dvh - 210px)*1.8));margin-inline:auto;container-type:inline-size;isolation:isolate;background:#132a32}#view{display:block;width:100%;height:auto;image-rendering:pixelated}#view:focus{outline:0}.screen-frame{position:absolute;z-index:1;inset:0;pointer-events:none;border:7px solid #29454f;box-shadow:inset 0 0 0 2px #6c8791,0 0 0 2px #10222c;clip-path:var(--cut)}.hud{position:absolute;z-index:2;pointer-events:none}.actor{top:3.5%;left:2.1%;width:28%;min-width:230px;padding:12px;display:grid;grid-template-columns:30% 1fr;gap:6px 10px;background:var(--panel);border:2px solid var(--cyan);box-shadow:0 0 0 3px #254751,inset 0 0 0 2px #4a6871,0 0 12px #4fe3ec38;clip-path:var(--cut)}.portrait-frame{align-self:center;aspect-ratio:1;background:#243c44;border:1px solid #5a7781;box-shadow:inset 0 0 10px #0a1d26}.portrait-frame img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.actor-info{min-width:0}.actor-heading{display:flex;gap:8px;align-items:center}.actor-heading strong{font-size:clamp(14px,1.8cqw,22px);font-weight:700;white-space:nowrap}.actor-heading small{font-size:11px;color:#93bec9}#level{font-family:Consolas,monospace;font-size:clamp(12px,1.35cqw,17px);letter-spacing:.04em}#hp-label{font-family:Consolas,monospace;font-size:clamp(11px,1.25cqw,16px);white-space:nowrap;margin-top:4px}.actor-stats{grid-column:1/-1;font-family:Consolas,monospace;font-size:clamp(10px,1.05cqw,13px);color:#91b1ba;letter-spacing:.01em}.cell-meter{display:flex;gap:3px;min-width:0;height:13px;background:#0e222d;padding:2px;box-shadow:0 0 0 1px #3a5965}.cell-meter i{display:block;flex:1;min-width:0;background:#213b47;box-shadow:inset 0 1px 0 #38535e}.cell-meter i.filled{background:linear-gradient(#b7faff 0 20%,#59e4f1 20% 53%,#16b7d7 53% 100%);box-shadow:inset 0 0 0 1px #56d3e4}.experience{top:1.5%;left:50%;transform:translateX(-50%);width:32%;display:flex;align-items:center;gap:9px;padding:6px 12px 7px;background:#142c36f5;border:1px solid #647782;clip-path:var(--cut)}.experience .meter-name{font:700 14px Consolas,monospace;letter-spacing:.05em}.experience .cell-meter{flex:1}.experience-value{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;color:#c7e4e9;font:11px Consolas,monospace}.timer{top:8%;left:50%;transform:translateX(-50%);text-align:center;text-shadow:0 2px 3px #17271b}#clock{font:clamp(14px,1.7cqw,20px) Consolas,monospace;letter-spacing:.07em}.stage-clear-notice{background:#172e36ec;border:1px solid #729695;padding:8px 10px;font-size:14px;max-width:240px;color:#e5f2ac}.resources{right:2.3%;top:3.4%;display:flex;gap:8px;pointer-events:none}.resource-pill{min-width:68px;display:flex;align-items:center;gap:9px;padding:7px 11px;background:var(--panel);border:1px solid #769199;clip-path:var(--cut);font:15px Consolas,monospace}.resource-pill img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}.field-actions{position:absolute;left:2.4%;bottom:3.7%;display:flex;align-items:center;gap:12px;z-index:2}#kills{font-size:12px;color:#d3e5db;text-shadow:0 2px 3px #163121}#pause-button{font-size:12px;padding:5px 9px;background:#1a333bd9;border:1px solid #58717a}.bottom{position:absolute;inset:0;pointer-events:none;z-index:2}.skills{position:absolute;bottom:1.8%;left:50%;transform:translateX(-50%);display:flex;gap:11px;padding:10px 14px 7px;background:#162f3bee;border:3px solid #405d69;clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 15px,100% 100%,0 100%,0 15px);box-shadow:inset 0 0 0 2px #0e222d;pointer-events:auto}.skill{position:relative;width:clamp(62px,7.4cqw,96px);height:clamp(64px,7.5cqw,98px);padding:4px;background-color:#162f38;background-image:none!important;border:2px solid #6deaf3;border-radius:9px;box-shadow:0 0 0 3px #285361,inset 0 0 0 2px #456b76,0 0 9px #53e1ee44;overflow:hidden}.skill.signature{border-color:#ffe26c;box-shadow:0 0 0 3px #a4772a,inset 0 0 0 3px #d6a24b,0 0 15px #ffc24e70;background-color:#3c3525}.skill:after{content:'';position:absolute;left:5px;right:5px;bottom:4px;height:3px;background:#8bf1f4;transform:scaleX(calc(1 - var(--cooldown,0)));transform-origin:left center}.skill.signature:after{background:#ffe577}.skill img{display:block;width:clamp(26px,3.2cqw,43px);height:clamp(26px,3.2cqw,43px);margin:0 auto 3px;object-fit:contain;image-rendering:pixelated}.skill strong{display:block;white-space:nowrap;font-size:clamp(10px,1.02cqw,13px);line-height:1.3;font-weight:600}.skill span{display:block;font-size:clamp(10px,.9cqw,12px);line-height:1.4;color:#a8c8cc}.skill.signature span{color:#e5cd86}.skill:disabled{opacity:.72}.skill:disabled.signature{opacity:.9}#evolve-button{position:absolute;right:2.3%;bottom:2.6%;pointer-events:auto;padding:14px 20px;min-width:125px;background:linear-gradient(#973d11,#692408);border:3px solid #ffcb43;border-radius:10px;color:#fff3b6;box-shadow:0 0 0 3px #8f6924,inset 0 0 0 2px #c38c36,0 0 12px #ffca4a45;font-size:clamp(13px,1.6cqw,20px);font-weight:700}#evolve-button:disabled{opacity:.68}#status{font-size:13px;color:#aec8cd;margin:10px 0 4px;min-height:20px}.usage-note{font-size:12px;color:#87a5ad;margin:6px 0}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.actor #status-effects{grid-column:1/-1}.status-effect{display:flex;align-items:center;gap:5px;font-size:11px}.status-effect img{width:20px;height:20px;image-rendering:pixelated}#modal{position:absolute;z-index:5;inset:0;overflow:auto;padding:4% 7%;background:#0d222bf0;border:3px solid #4a747f;box-shadow:inset 0 0 0 2px #162f38}#modal[hidden],#preferences[hidden]{display:none}#modal h2{font-size:clamp(19px,2.3cqw,29px);margin:8px 0 12px;color:#c7f9ff}#modal p{font-size:clamp(12px,1.35cqw,17px)}.growth-options,.evolution-options{display:flex;gap:16px;flex-wrap:wrap;margin:22px 0}.growth-card{flex:1;min-width:170px;min-height:150px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;background:#183943;border:2px solid #5bcedc;box-shadow:inset 0 0 0 3px #254955;border-radius:9px;padding:17px;color:#e8ffff;font-size:20px}.growth-card:hover{background:#234b54;border-color:#b6faff}.growth-card small{color:#8eb9c3}.evolution-card{flex:1;min-width:235px;padding:17px;background:#193a42;border:2px solid #5792a0}.evolution-card img{float:right;width:96px;height:96px;object-fit:contain;image-rendering:pixelated}.evolution-card ul{list-style:none;padding:0}.evolution-card h3{margin-top:0}.met{color:#c8edac}.unmet{color:#dca98a}.dialog-actions{display:flex;gap:12px;flex-wrap:wrap}.result-skills{width:100%;border-collapse:collapse;font-size:14px}.result-skills td,.result-skills th{padding:7px;text-align:left;border-bottom:1px solid #335863}.evolution-flash{position:relative;width:192px;height:192px;display:grid;place-items:center}.evolution-flash>img{width:160px;z-index:2;image-rendering:pixelated}.evolution-effect{position:absolute;inset:0;z-index:1;background-repeat:no-repeat;background-size:1536px 192px;image-rendering:pixelated}.reduce-flashes .evolution-effect{opacity:.65}#preferences{position:absolute;inset:25px 12%;z-index:10;padding:24px;overflow:auto;background:#142d36;border:2px solid #8dd9e5;box-shadow:0 14px 60px #0009}.preference-row{display:block;margin:12px 0}#playtest-presets{font-size:12px;color:#9ab2b9;margin-top:13px}#playtest-presets p{margin:7px 0}#playtest-presets a{display:inline-block;margin-bottom:5px}#app[data-started=true] header,#app[data-started=true]>.controls,#app[data-started=true]>.usage-note,#app[data-started=true]>#playtest-presets{display:none}#app[data-started=true] #stage{width:min(100%,calc((100dvh - 72px)*1.8))}
@media(max-width:760px){main{padding:8px}h1{font-size:17px}.controls{gap:8px;font-size:13px}#stage{width:100%}.actor{min-width:165px;width:32%;padding:7px;gap:3px 6px;top:4%;left:2.5%}.actor-heading strong{font-size:12px}.actor-heading small{display:none}#level{font-size:11px}.actor-stats{display:none}#hp-label{font-size:10px;margin-top:3px}.cell-meter{gap:2px;height:10px;padding:1px}.experience{width:33%;padding:5px 7px;gap:5px;left:58%}.experience .meter-name{font-size:11px}.experience-value{display:none}.timer{left:58%;top:10%}#clock{font-size:12px}.resources{gap:5px;top:18%;right:3%;flex-direction:column}.resource-pill{min-width:48px;padding:4px 6px;font-size:12px;gap:5px}.resource-pill img{width:17px;height:17px}.skills{gap:7px;padding:7px 9px 5px}.skill{width:64px;height:66px}.skill img{width:28px;height:28px}.skill strong{font-size:10px}.skill span{font-size:10px}#evolve-button{min-width:86px;padding:10px 8px;font-size:12px;right:3%}.field-actions{left:3%;bottom:6%;gap:5px;flex-direction:column}#kills{font-size:10px}#pause-button{font-size:10px;padding:4px}.growth-card{min-width:135px;min-height:100px;font-size:16px}#modal{padding:15px 5%}.growth-options,.evolution-options{gap:9px;margin:12px 0}.evolution-card{min-width:100%}#preferences{inset:10px 3%;padding:15px}.stage-clear-notice{font-size:11px;max-width:170px}#app[data-started=true] #stage{width:100%}}
@media(max-width:430px){.actor{min-width:135px;width:35%;padding:5px}.actor-heading strong{font-size:11px}.portrait-frame{display:none}.actor{grid-template-columns:1fr}.experience{left:65%;width:38%;gap:4px}.experience .meter-name{font-size:10px}.timer{left:66%;top:12%}.resources{display:none}.skills{left:48%;gap:6px;padding:5px 7px}.skill{width:48px;height:55px}.skill img{width:23px;height:23px}.skill strong{font-size:9px}.skill span{font-size:9px}#evolve-button{min-width:68px;max-width:84px;padding:7px 5px;font-size:10px}.field-actions #kills{display:none}#pause-button{font-size:9px}.screen-frame{border-width:4px}.growth-card{min-width:100%;min-height:58px;font-size:14px}.growth-options{gap:6px}.growth-card{padding:9px}#modal h2{font-size:18px;margin:4px 0 7px}#modal p{font-size:11px}}

/* Short slot names are presentation-only; RunUI keeps its original accessible text. */
#hp-cells i.filled{background:linear-gradient(#ffc0b6 0 20%,#ff6568 20% 53%,#d12e42 53% 100%);box-shadow:inset 0 0 0 1px #ef6671}
.skill strong{visibility:hidden}.skill:before{content:attr(data-skill-name);position:absolute;left:2px;right:2px;bottom:1.4em;font-size:clamp(10px,1.02cqw,13px);line-height:1.3;color:#e5f6f7;text-align:center;white-space:nowrap}.skill.signature:before{color:#fff2bc}
@media(max-width:760px){.skill:before{font-size:10px}}
@media(max-width:430px){.portrait-frame{display:block}.actor{grid-template-columns:30px 1fr}.skill:before{font-size:9px}}