/* Three playable housings. The gameplay DOM and handlers are shared. */
.device-shell[data-case]{--case-rail:88px;--key-size:64px;--case-pad:15px;--case-right:28px;--case-bottom:19px;--case-brand:30px;--case-footer:34px;--bezel-inset:20px;grid-template-columns:minmax(0,1fr) var(--case-rail);gap:10px;padding:var(--case-pad) var(--case-right) var(--case-bottom) var(--case-pad)}
.device-shell[data-case=slim]{--case-rail:76px;--key-size:56px;--case-pad:12px;--case-right:23px;--case-bottom:15px;--case-brand:20px;--case-footer:28px;--bezel-inset:8px;gap:8px}
.device-shell[data-case=round]{--case-rail:104px;--key-size:74px;--case-pad:19px;--case-right:33px;--case-bottom:24px;--case-brand:34px;--case-footer:38px;--bezel-inset:26px;gap:12px}
.device-shell[data-case=classic]{--case-rail:76px;--key-size:56px;--case-right:24px;--case-bottom:17px;--case-brand:24px;--bezel-inset:16px;gap:8px;padding-top:12px}
.device-shell[data-case] .device-bezel{grid-template-rows:var(--case-brand) minmax(0,1fr) var(--case-footer);padding:var(--bezel-inset)}
.device-shell[data-case] #stage{clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.device-shell[data-case] .device-brand{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;padding:0 3px;color:#e6f1ff;min-width:0;letter-spacing:.15em}
.device-shell[data-case=slim] .device-brand{font-size:12px;letter-spacing:.10em}
.device-brand-name{overflow:hidden;text-overflow:clip;white-space:nowrap}
.device-case-picker{flex:none;max-width:180px;min-height:20px;margin:0;padding:0 3px;border:1px solid #749dc3;border-radius:0;background:#143f7b;color:#fff;font:11px/1.2 var(--hud-font);letter-spacing:0;cursor:pointer}
.device-case-picker:focus-visible{outline:2px solid #ffe180;outline-offset:1px}
.device-shell[data-case] .device-controls{padding:16px 1px 6px}
.device-shell[data-case] .device-control{gap:9px}
.device-shell[data-case] .device-key-label{font-size:11px;line-height:1.25;color:#60400f;text-shadow:0 1px #ffe794}
.device-shell[data-case] .device-skill-glyph{width:32px;height:32px;max-width:calc(var(--key-size) - 20px);max-height:calc(var(--key-size) - 20px);transform:translateY(-1px)}
.device-shell[data-case] .device-utilities{padding-top:4px}
.device-shell[data-case] .device-evolution{padding:10px 2px 2px}
.device-shell[data-case] .device-settings img{width:24px;height:24px}
.device-shell[data-case=classic] .actor{width:23%;max-width:260px;min-width:190px;padding:7px;grid-template-columns:25% 1fr;gap:4px 7px}
.device-shell[data-case=classic] .actor-heading strong{font-size:clamp(12px,1.25cqw,17px)}
.device-shell[data-case=classic] .actor-heading small{font-size:10px}
.device-shell[data-case=classic] .actor #level{font-size:12px}
.device-shell[data-case=classic] .actor #stats.actor-stats{margin:1px 0 3px;gap:2px 5px}
.device-shell[data-case=classic] .actor #stats.actor-stats>span{font-size:10px}
.device-shell[data-case=classic] .actor #hp-label{font-size:11px;margin-top:3px}
.device-shell[data-case=classic] .actor .cell-meter{height:10px;gap:2px}
@media(max-width:900px){
 .device-shell[data-case]{--case-rail:64px;--key-size:48px;--case-pad:12px;--case-right:24px;--case-bottom:15px;--case-brand:24px;--case-footer:28px;--bezel-inset:12px;gap:7px}
 .device-shell[data-case=slim]{--case-rail:58px;--key-size:44px;--case-pad:10px;--case-right:20px;--case-bottom:13px;--case-brand:19px;--case-footer:28px;--bezel-inset:7px;gap:6px}
 .device-shell[data-case=round]{--case-rail:76px;--key-size:56px;--case-pad:15px;--case-right:28px;--case-bottom:19px;--case-brand:27px;--case-footer:30px;--bezel-inset:16px;gap:8px}
 .device-shell[data-case=classic]{--case-rail:60px;--key-size:44px;--case-brand:21px;--bezel-inset:10px;padding-top:10px}
 .device-shell[data-case=classic] .actor{width:28%;min-width:165px;max-width:220px;padding:6px}
 .device-shell[data-case] .device-brand,.device-shell[data-case=slim] .device-brand{font-size:10px;gap:6px;letter-spacing:.06em}.device-case-picker{font-size:10px;max-width:145px}
 .device-shell[data-case] .device-key-label{font-size:10px}.device-shell[data-case] .device-control{gap:7px}
}
@media(max-width:540px){
 .device-shell[data-case]{--case-rail:50px;--key-size:38px;--case-pad:9px;--case-right:21px;--case-bottom:13px;--case-brand:19px;--bezel-inset:6px;gap:5px}
 .device-shell[data-case=slim]{--case-rail:46px;--key-size:36px;--case-pad:8px;--case-right:18px;--case-bottom:11px;--bezel-inset:5px;gap:4px}
 .device-shell[data-case=round]{--case-rail:56px;--key-size:42px;--case-pad:11px;--case-right:25px;--case-bottom:16px;--bezel-inset:7px;gap:6px}
 .device-shell[data-case=classic]{--case-rail:48px;--key-size:36px;--case-brand:18px;--bezel-inset:5px;padding-top:8px}
 .device-shell[data-case=classic] .actor{width:48%;min-width:135px;max-width:190px;padding:5px;grid-template-columns:27px 1fr;gap:3px 5px}
 .device-shell[data-case] .device-brand,.device-shell[data-case=slim] .device-brand{font-size:8px;letter-spacing:0;gap:4px}.device-case-picker{width:86px;font-size:9px;min-height:17px;max-width:40%}
 .device-shell[data-case] .device-skill-glyph{width:20px;height:20px;transform:none}
 .device-shell[data-case] .device-controls{padding-top:10px}.device-shell[data-case] .device-key-label{font-size:9px;text-shadow:none}
 .device-shell[data-case] .device-evolution{padding-top:7px}.device-shell[data-case] .device-control{gap:6px}
}