:root{color-scheme:light;font-family:Arial,sans-serif;background:#d9dde0}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{height:100dvh;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button{font:inherit;cursor:pointer;padding:0;border:0;color:inherit;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}button:focus-visible{outline:2px solid #caa752;outline-offset:2px}svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.phone-space{position:relative;flex-shrink:0}.phone{width:320px;height:750px;position:absolute;top:0;left:0;transform-origin:top left;padding:17px 24px 13px;border:4px solid #737a7e;border-radius:37px 37px 44px 44px;background:linear-gradient(100deg,#a9aeb0,#e3e4e3 14%,#d0d3d3 55%,#e8e9e7 88%,#8a9397);box-shadow:inset 0 0 0 2px #f4f3ed,inset 0 -6px 4px #7d8587,4px 8px 0 #9aa2a5,8px 16px 23px #0003}.earpiece{width:70px;height:9px;margin:0 auto 8px;border-radius:8px;background:repeating-linear-gradient(90deg,#171d20 0 2px,#444b4e 2px 3px);border:2px solid #858d91;box-shadow:0 1px 0 #fff9}.phone-mark{height:20px;color:#3f494e;text-align:center;letter-spacing:3px;font-size:11px;font-weight:bold;text-shadow:0 1px #fff}.screen-frame{width:264px;height:344px;margin:0 auto;padding:10px;border:2px solid #131e22;border-radius:8px;background:#202c32;box-shadow:0 1px 0 #fff9,inset 0 0 0 2px #4b575c}.stage,.lcd{position:relative;width:240px;height:320px;overflow:hidden;background:#101419}iframe{border:0;width:240px;height:320px;display:block;pointer-events:none}.welcome{position:absolute;inset:0;color:#dcebd2;background:#141f20;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:20px;text-align:center;font:14px/1.5 monospace}.welcome[hidden]{display:none}#play{border:1px solid #a5bda5;background:#283a31;color:#e7efdb;padding:6px 16px}#play[hidden]{display:none}.controls{margin-top:10px;width:264px}fieldset{padding:0;margin:0;border:0;min-width:0}.navigation{height:76px;display:grid;grid-template-columns:65px 114px 65px;gap:10px;align-items:center;margin-bottom:8px}.navigation button{background:transparent}.soft-key{height:48px}.keycap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(#f1f2ef,#c7cdcd 55%,#b3babc);border:1px solid #777f83;border-radius:8px;color:#263239;box-shadow:inset 0 1px 0 #fff,0 3px 0 #727b7e,0 4px 2px #5556;transform:translateY(0);transition:transform 35ms ease-out,box-shadow 35ms ease-out;pointer-events:none}.soft-key .keycap{border-radius:11px 11px 16px 16px}.soft-key svg{width:23px}.dpad{width:114px;height:76px;display:grid;grid-template-columns:36px 42px 36px;grid-template-rows:22px 32px 22px}.dpad button{min-width:0;min-height:0}.dpad .up{grid-column:2;grid-row:1}.dpad .left{grid-column:1;grid-row:2}.dpad .confirm{grid-column:2;grid-row:2}.dpad .right{grid-column:3;grid-row:2}.dpad .down{grid-column:2;grid-row:3}.dpad .keycap{border-radius:6px;background:linear-gradient(#39434a,#1b252b);border-color:#111a1e;color:#d4dadd;box-shadow:inset 0 1px #68767b,0 2px #071013}.dpad .confirm .keycap{background:linear-gradient(#cbd1d3,#8a979d);border:2px solid #445158;color:#26353c;font-size:10px}.dpad svg{width:13px;height:13px}.numbers{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,39px);gap:6px 7px}.numbers button{background:transparent;border-radius:10px}.numbers .keycap{justify-content:flex-start;padding-left:16px;gap:7px;border-radius:8px 8px 12px 12px}.numbers b{font-size:20px;font-weight:500;line-height:1}.numbers small{font-size:8px;font-weight:bold;letter-spacing:.4px}button.held .keycap,button:active .keycap{transform:translateY(3px);box-shadow:inset 0 1px 3px #0003,0 0 0 #727b7e;background:#adb7bc}.dpad button.held .keycap,.dpad button:active .keycap{transform:translateY(1px);background:#101c23;color:#dfe6e8}fieldset:disabled{opacity:.75}.phone-tools{height:39px;display:flex;justify-content:center;align-items:flex-end;gap:22px}.tool{display:flex;align-items:center;gap:4px;padding:4px;color:#47555a;background:transparent;font-size:9px}.tool svg{width:12px;height:12px}#toast{position:fixed;z-index:10;max-width:calc(100% - 32px);width:max-content;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);color:#e9eef0;background:#26353bee;border-radius:6px;padding:10px 14px;font:12px/1.5 Arial,sans-serif;text-align:center}body.immersive{background:#b8bec2}@media(prefers-reduced-motion:reduce){.keycap{transition:none}}

@media(orientation:landscape) and (max-height:520px){.phone{width:700px;height:390px;padding:9px 24px;border-radius:36px}.screen-frame{position:absolute;left:27px;top:9px}.controls{position:absolute;right:37px;top:24px;margin:0}.phone-tools{position:absolute;right:48px;bottom:17px;width:240px}.earpiece{position:absolute;left:9px;top:140px;width:8px;height:55px;margin:0}.phone-mark{position:absolute;right:123px;top:5px;height:12px;font-size:8px}.navigation{margin-bottom:10px}}
body.expanded{background:#b8bec2}body.expanded .phone{box-shadow:inset 0 0 0 2px #f4f3ed,inset 0 -6px 4px #7d8587}body.expanded.wide-phone .phone{width:700px;height:390px;padding:9px 24px;border-radius:36px}body.expanded.wide-phone .screen-frame{position:absolute;left:27px;top:9px}body.expanded.wide-phone .controls{position:absolute;right:37px;top:24px;margin:0}body.expanded.wide-phone .phone-tools{position:absolute;right:48px;bottom:17px;width:240px}body.expanded.wide-phone .earpiece{position:absolute;left:9px;top:140px;width:8px;height:55px;margin:0}body.expanded.wide-phone .phone-mark{position:absolute;right:123px;top:5px;height:12px;font-size:8px}body.expanded.wide-phone .navigation{margin-bottom:10px}

* { user-select:none !important; -webkit-user-select:none !important; -webkit-touch-callout:none !important; -webkit-user-drag:none; }