html,body{height:100%}body{place-items:center;display:grid;overflow:hidden}.machine-case{--view-h:100svh;--view-w:100vw;--case-chrome:58px;--case-edge:#e2b64d;--case-light:#fff0a8;--case-dark:#3b1b13;--case-bg:#1c0b0b;box-sizing:border-box;width:min(var(--view-w),calc((var(--view-h) - var(--case-chrome))*.6 + 16px));background:linear-gradient(90deg,#090909,var(--case-edge) 3%,var(--case-dark) 7%,var(--case-bg) 50%,var(--case-dark) 93%,var(--case-edge) 97%,#090909);filter:drop-shadow(0 8px 15px #000);padding:0 8px 3px}.machine-case[data-theme=cgg-ninja]{--case-edge:#45e6a0;--case-light:#d3ffe2;--case-dark:#123a30;--case-bg:#071b16}.machine-case[data-theme=knight-dragons]{--case-edge:#f3bc52;--case-light:#fff0bf;--case-dark:#631e20;--case-bg:#160e24}.machine-crown{box-sizing:border-box;height:39px;color:var(--case-light);background:linear-gradient(180deg,#080809,var(--case-dark) 38%,var(--case-bg));border:2px solid var(--case-edge);text-shadow:0 1px 2px #000,0 0 8px var(--case-edge);letter-spacing:.06em;white-space:nowrap;border-radius:55% 55% 2px 2px/65% 65% 2px 2px;justify-content:center;align-items:center;gap:clamp(5px,2vw,18px);font:900 clamp(11px,3vw,18px) Georgia,serif;display:flex}.crown-wing{color:var(--case-edge);font-size:.7em}#app{aspect-ratio:3/5;outline:2px solid var(--case-edge);background:#07040a;width:100%;height:auto;min-height:0}#app canvas{max-width:100%;max-height:100%;display:block}#app{position:relative}#app>canvas:not(#sanada-3d){z-index:1;position:relative}.machine-apron{height:16px;color:var(--case-light);letter-spacing:.25em;justify-content:center;align-items:center;gap:9px;font:700 9px Georgia,serif;display:flex}.machine-apron span{color:var(--case-edge)}@media (height<=500px){.machine-crown{height:25px}.machine-apron{height:10px;font-size:7px}.machine-case{--case-chrome:38px}}.machine-case[data-theme=sanada-six-coins]{--case-edge:#d9ae59;--case-light:#ffe2a1;--case-dark:#8f242b;--case-bg:#101b2a}.machine-case[data-theme=monkey-king]{--case-edge:#cda357;--case-light:#ffe0a0;--case-dark:#6c1f22;--case-bg:#182f30;width:min(var(--view-w),var(--view-h));aspect-ratio:1;background-color:#601b20;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border:3px solid #bf9250;padding:5.36% 23.21%;position:relative;box-shadow:inset 0 0 0 5px #381318,inset 0 0 0 8px #b38946}.machine-case[data-theme=monkey-king] #app{outline:3px solid #edce8d;width:53.58%;height:89.28%;position:absolute;top:5.36%;left:23.21%}.machine-case[data-theme=monkey-king] .machine-crown{background:#57181bd9;border:0;border-radius:0;width:54%;height:4.5%;font-size:clamp(10px,1.8vh,22px);position:absolute;top:.4%;left:23%}.machine-case[data-theme=monkey-king] .machine-apron{width:50%;height:3%;position:absolute;bottom:.7%;left:25%}@media (width<=600px){.machine-case[data-theme=monkey-king]{width:min(var(--view-w),calc((var(--view-h) - 58px)*.6 + 16px));aspect-ratio:auto;background-size:auto 100%;padding:0 8px 3px}.machine-case[data-theme=monkey-king] #app{width:100%;height:auto;position:relative;top:auto;left:auto}.machine-case[data-theme=monkey-king] .machine-crown{width:100%;height:39px;font-size:15px;position:relative;top:auto;left:auto}.machine-case[data-theme=monkey-king] .machine-apron{width:100%;height:16px;position:relative;bottom:auto;left:auto}}.machine-case.full-cabinet{width:min(var(--view-w),var(--view-h));aspect-ratio:1;border:3px solid var(--case-edge);box-shadow:inset 0 0 0 7px var(--case-dark),inset 0 0 0 10px var(--case-edge);background-position:50%;background-size:cover;padding:0;position:relative}.full-cabinet #app{outline:3px solid var(--case-edge);width:53.58%;height:89.28%;position:absolute;top:5.36%;left:23.21%}.full-cabinet .machine-crown{border:0;border-radius:0;width:54%;height:4.5%;font-size:clamp(10px,1.8vh,22px);position:absolute;top:.4%;left:23%}.full-cabinet .machine-apron{width:50%;height:3%;position:absolute;bottom:.7%;left:25%}.case-panel{box-sizing:border-box;border:2px solid var(--case-edge);background:linear-gradient(140deg,#080d0ef2,var(--case-dark));width:16%;color:var(--case-light);white-space:pre-line;text-align:center;pointer-events:none;border-radius:12px;padding:15px 5px;font:700 clamp(10px,1.5vh,18px)/1.9 Georgia,serif;position:absolute;top:35%;box-shadow:0 4px 15px #0009,inset 0 0 0 3px #0008}.case-panel-left{left:3%}.case-panel-right{right:3%}@media (width<=600px){.machine-case.full-cabinet{width:min(var(--view-w),calc((var(--view-h) - 58px)*.6 + 16px));aspect-ratio:auto;background-size:auto 100%;padding:0 8px 3px}.full-cabinet #app{width:100%;height:auto;position:relative;top:auto;left:auto}.full-cabinet .machine-crown{width:100%;height:39px;font-size:15px;position:relative;top:auto;left:auto}.full-cabinet .machine-apron{width:100%;height:16px;position:relative;bottom:auto;left:auto}.case-panel{display:none}}