:root{--bg-1: #f6f5f2;--bg-2: #efecea;--plastic: #5B5462;--plastic-deep: #e9e6e1;--bezel: #dad6ce;--screen: #5B5462;--key: #5B5462;--key-shadow: #d4cdc1;--key-fn: #80768A;--key-text: #fafafa;--shadow: 0 24px 50px rgba(16, 12, 8, .35);--soft-shadow: 0 8px 18px rgba(13, 10, 8, .22);--key-size: clamp(48px, 6.5vw, 60px);--key-gap: clamp(6px, 1vw, 10px);--fn-key-size: clamp(36px, 4.5vw, 44px);--fn-gap: clamp(6px, 1vw, 8px);--dpad-size: clamp(100px, 14vw, 130px)}*{box-sizing:border-box}body{margin:0;font-family:Space Grotesk,IBM Plex Sans,Segoe UI,sans-serif;background:radial-gradient(circle at top,var(--bg-1),var(--bg-2));color:#2b2927}.sim-root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px}.device{width:min(90vw,380px);background:linear-gradient(160deg,#5B5462,var(--plastic));border-radius:28px;padding:28px 24px 32px;box-shadow:var(--shadow),inset 0 1px #fffc;display:flex;flex-direction:column;gap:16px;position:relative}.device:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border-radius:22px;box-shadow:inset 0 0 0 1px #0000000a;pointer-events:none}.screen-shell{width:100%;background:linear-gradient(180deg,#5b5462,#5b5462);border-radius:12px;padding:12px;box-shadow:inset 0 2px 4px #0000002e,inset 0 -2px 3px #403b46b3,inset 0 0 0 1px #0000001a;display:flex;align-items:center;justify-content:center}.screen-canvas{width:320px;height:240px;background:#f0f0e8;background:linear-gradient(180deg,#d8d3cc,#c7c1b8);border-radius:8px;box-shadow:inset 0 2px 4px #0000002e,inset 0 -2px 3px #ffffffa6,inset 0 0 0 1px #00000014;image-rendering:pixelated}.control-section{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 8px}.function-area{display:flex;flex-direction:column;gap:var(--fn-gap)}.function-row{display:flex;gap:var(--fn-gap)}.dpad{position:relative;width:var(--dpad-size);height:var(--dpad-size);flex-shrink:0}.dpad-key{position:absolute;width:28%;height:28%;border:none;border-radius:6px;cursor:pointer;background:linear-gradient(145deg,#675e70,#675e70);box-shadow:inset 0 1px 2px #ffffff4d,0 2px 4px #00000026;transition:filter .1s ease}.dpad-key:active{filter:brightness(.9)}.dpad-up{left:36%;top:0}.dpad-down{left:36%;bottom:0}.dpad-left{left:0;top:36%}.dpad-right{right:0;top:36%}.dpad-center{position:absolute;width:28%;height:28%;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:6px;background:linear-gradient(145deg,#80768a,#80768a);box-shadow:inset 0 1px 2px #ffffff4d,0 2px 4px #00000026}.main-grid{display:grid;grid-template-columns:repeat(5,var(--key-size));gap:var(--key-gap);justify-content:center;padding-top:8px}.key{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:8px;background:var(--key);color:var(--key-text);font-weight:500;font-size:clamp(12px,1.3vw,14px);width:var(--key-size);height:calc(var(--key-size)*.8);padding:0;box-shadow:inset 0 -2px #00000026,0 4px 8px #0505054d;cursor:pointer;transition:transform .08s ease,box-shadow .12s ease;display:flex;align-items:center;justify-content:center}.key-small{font-size:clamp(10px,1vw,12px);width:var(--fn-key-size);height:calc(var(--fn-key-size)*.8);border-radius:6px}.key-fn{background:var(--key-fn)}.key-ok{background:#5b5462;font-weight:600;font-size:clamp(14px,1.5vw,18px)}.key:active{transform:translateY(3px);box-shadow:inset 0 -1px #0000000f}.status-chip{position:absolute;right:20px;bottom:16px;padding:4px 12px;border-radius:999px;background:#121212;color:#2a2219;font-weight:600;font-size:11px;box-shadow:0 4px 10px #0000001a;opacity:0}@media (max-width: 480px){.device{width:95vw;padding:20px 16px 24px;border-radius:24px}.control-section{flex-wrap:wrap;justify-content:center}.main-grid{justify-content:center}}