#shell,#shell *{box-sizing:border-box}body.mobile #game{width:100%;height:100%}#shell{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-areas:"screen screen" "sub    sub" "dpad   face" "start  start";grid-template-rows:auto auto 1fr auto;grid-template-columns:1fr 1fr;justify-items:center;align-items:center;gap:2px;padding:calc(env(safe-area-inset-top) + 6px) calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 8px);background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='16'/%3E%3C/filter%3E%3Cg filter='url(%23b)' fill='%23b89440'%3E%3Cellipse cx='330' cy='80' rx='95' ry='65' opacity='0.16'/%3E%3Cellipse cx='55' cy='300' rx='75' ry='95' opacity='0.12'/%3E%3Cellipse cx='210' cy='385' rx='130' ry='55' opacity='0.10'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='1.2' opacity='0.14' fill='none'%3E%3Cpath d='M42 64 L148 92'/%3E%3Cpath d='M252 198 L338 184'/%3E%3Cpath d='M92 252 L128 332'/%3E%3Cpath d='M300 60 L312 110'/%3E%3C/g%3E%3Cg stroke='%233a3024' stroke-width='1' opacity='0.12' fill='none'%3E%3Cpath d='M298 318 L378 356'/%3E%3Cpath d='M158 28 L212 66'/%3E%3Cpath d='M28 158 L84 150'/%3E%3Cpath d='M350 230 L368 290'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(circle 3px at 14px 14px,#8e8a85 35%,#b5b1ac 55%,transparent 68%),radial-gradient(circle 3px at calc(100% - 14px) 14px,#8e8a85 35%,#b5b1ac 55%,transparent 68%),radial-gradient(circle 3px at 14px calc(100% - 14px),#8e8a85 35%,#b5b1ac 55%,transparent 68%),radial-gradient(circle 3px at calc(100% - 14px) calc(100% - 14px),#8e8a85 35%,#b5b1ac 55%,transparent 68%),radial-gradient(130% 110% at 50% 8%,rgba(255,255,255,.12) 0%,transparent 45%,rgba(0,0,0,.18) 100%),linear-gradient(160deg,#d9d2bf,#c7bfa8 55%,#ada490);background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;background-size:140px 140px,100% 100%,auto,auto,auto,auto,auto,auto;font-family:monospace}.screen-bezel{grid-area:screen;position:relative;width:min(100%,calc((100vh - 330px)*1.5));background:radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.07) 0%,transparent 40%),linear-gradient(180deg,#4a4e57,#393d46 70%,#33373f);border-radius:8px 8px 32px;padding:12px 10px 16px;box-shadow:inset 0 2px 5px #0000008c,inset 0 -1px #ffffff14,0 1px #ffffff59,0 4px 10px #00000040}.screen-bezel:before{content:"";position:absolute;top:6px;left:12px;right:12px;height:5px;border-top:2px solid rgba(150,45,80,.85);border-bottom:2px solid rgba(50,70,150,.85);pointer-events:none}.screen-bezel:after{content:"";position:absolute;left:2px;top:45%;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a8a,#e02020 60%,#8a0e0e);box-shadow:0 0 6px 1px #ff3c3cb3;pointer-events:none}.screen-bezel.sub{grid-area:sub;border-radius:8px;padding:8px 10px 10px}.screen-bezel.sub:after,.screen-bezel.sub:before{display:none}.screen-slot.sub{aspect-ratio:240 / 104;background:#16131f}.subscreen{display:block;width:100%;height:100%;image-rendering:crisp-edges;image-rendering:pixelated;touch-action:none}.screen-slot{position:relative;width:100%;aspect-ratio:3 / 2;background:#7e8c4a;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 10px #00000080,inset 0 2px 3px #0006}.screen-slot:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:linear-gradient(115deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 16%,transparent 28%),linear-gradient(63deg,transparent 40.6%,rgba(255,255,255,.09) 40.9%,transparent 41.3%),linear-gradient(118deg,transparent 71.7%,rgba(255,255,255,.07) 72%,transparent 72.3%),repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0px,rgba(0,0,0,.07) 1px,transparent 1px,transparent 3px);pointer-events:none}.speaker{position:absolute;right:calc(env(safe-area-inset-right) + 16px);bottom:calc(env(safe-area-inset-bottom) + 14px);width:62px;height:44px;transform:rotate(-25deg);background:repeating-linear-gradient(90deg,rgba(40,38,44,.55) 0 4px,transparent 4px 11px);border-radius:6px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.25));pointer-events:none}.brand{position:absolute;left:0;right:0;bottom:2px;text-align:center;color:#a8b2cd8c;font-weight:700;font-style:italic;font-size:9px;letter-spacing:2px;text-shadow:0 -1px 0 rgba(0,0,0,.45);pointer-events:none;user-select:none;-webkit-user-select:none}.dpad{grid-area:dpad;justify-self:start;margin-left:6px;width:132px;aspect-ratio:1;display:grid;grid-template-areas:". u ." "l c r" ". d .";grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;touch-action:none;transition:transform .07s;box-shadow:0 0 0 5px #463a241f;border-radius:8px}.dpad:has(.dz[data-k=up].pressed){transform:perspective(240px) rotateX(10deg)}.dpad:has(.dz[data-k=down].pressed){transform:perspective(240px) rotateX(-10deg)}.dpad:has(.dz[data-k=left].pressed){transform:perspective(240px) rotateY(-10deg)}.dpad:has(.dz[data-k=right].pressed){transform:perspective(240px) rotateY(10deg)}.dz,.dcenter{background:linear-gradient(180deg,#38383f,#232329 60%,#1c1c22);border:none;padding:0}.dz{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .06s,box-shadow .06s;box-shadow:0 3px #101014,0 4px 6px #00000059,inset 0 1px #ffffff24,inset 0 -2px 3px #00000059}.dz:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:6px solid transparent;opacity:.55;filter:drop-shadow(0 1px 0 rgba(255,255,255,.12));pointer-events:none}.dz[data-k=up]:after{border-bottom-color:#131318;margin-top:-4px}.dz[data-k=down]:after{border-top-color:#131318;margin-top:4px}.dz[data-k=left]:after{border-right-color:#131318;margin-left:-4px}.dz[data-k=right]:after{border-left-color:#131318;margin-left:4px}.dcenter{background:radial-gradient(circle at 50% 42%,#17171c,#26262d 45%,#32323a 75%,#26262d)}.dz[data-k=up]{grid-area:u;border-radius:6px 6px 0 0}.dz[data-k=down]{grid-area:d;border-radius:0 0 6px 6px}.dz[data-k=left]{grid-area:l;border-radius:6px 0 0 6px}.dz[data-k=right]{grid-area:r;border-radius:0 6px 6px 0}.dcenter{grid-area:c;box-shadow:none}.face{grid-area:face;justify-self:end;margin-right:8px;display:flex;gap:18px;align-items:flex-start}.btn-a,.btn-b{width:56px;height:56px;border-radius:50%;border:none;background:radial-gradient(circle 10px at 34% 26%,rgba(255,255,255,.35),transparent 70%),radial-gradient(circle at 38% 32%,#d4659b,#b03d75 40%,#8e2458 78%,#75194a);color:#32081e99;font-family:monospace;font-weight:700;font-size:16px;text-shadow:0 1px 0 rgba(255,255,255,.22),0 -1px 0 rgba(0,0,0,.3);box-shadow:0 4px #5e1238,0 6px 8px #0000004d,0 0 0 5px #463a241a,inset 0 1px #ffffff40,inset 0 -3px 5px #00000040;touch-action:none;user-select:none;-webkit-user-select:none}.btn-b{margin-top:26px}.meta{grid-area:start;display:flex;gap:16px;margin-bottom:4px}.btn-start,.btn-select{width:72px;height:22px;border:none;border-radius:11px;background:radial-gradient(120% 160% at 50% 0%,rgba(255,255,255,.18) 0%,transparent 55%),linear-gradient(180deg,#908b86,#6f6a65 70%,#615c57);color:#3c3833;font-family:monospace;font-weight:700;font-size:10px;letter-spacing:1px;transform:rotate(-20deg);text-shadow:0 1px 0 rgba(255,255,255,.3);box-shadow:0 3px #514d48,0 4px 6px #0000004d,inset 0 1px #ffffff4d,inset 0 -2px 3px #00000040;touch-action:none;user-select:none;-webkit-user-select:none}.btn-a,.btn-b,.btn-start,.btn-select{transition:transform .06s,box-shadow .06s,filter .06s}.dz.pressed{filter:brightness(.8);transform:translateY(2px);box-shadow:0 1px #101014,inset 0 2px 4px #00000080}.btn-a.pressed,.btn-b.pressed{filter:brightness(.82);transform:translateY(3px);box-shadow:0 1px #5e1238,0 2px 3px #00000040,inset 0 2px 5px #00000073}.btn-start.pressed,.btn-select.pressed{filter:brightness(.82);transform:rotate(-20deg) translateY(2px);box-shadow:0 1px #514d48,inset 0 2px 3px #0006}@media (orientation: landscape){#shell{grid-template-areas:"dpad screen face" "dpad start  face";grid-template-rows:1fr auto;grid-template-columns:auto 1fr auto;gap:0 10px}.screen-bezel{width:min(100%,calc((100vh - 78px)*1.5))}.screen-bezel.sub{display:none}.dpad{justify-self:center;align-self:center;margin-left:0}.face{justify-self:center;align-self:center;margin-right:0}.btn-start{margin-bottom:2px}.speaker{display:none}}