:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#232a30;color:#bac1c5}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:28px 18px 36px;background:radial-gradient(ellipse at 48% 30%,#45515a 0,#2c353d 42%,#1b2228 100%)}main{width:100%;max-width:370px}.page-nav{display:flex;justify-content:space-between;align-items:center;font:10px Consolas,monospace;letter-spacing:1.5px;margin:0 4px 32px}.page-nav a{color:#c5cdd1;text-decoration:none;letter-spacing:0}.page-nav a:hover{color:white}.page-nav>span{color:#98a3aa}.phone{position:relative;width:300px;margin:auto;padding:5px 9px 7px;border:1px solid #eaa05c;border-radius:65px 65px 68px 68px / 58px 58px 85px 85px;background:linear-gradient(90deg,#763d18,#e78c3c 2%,#ffba70 4%,#b05b24 8%,#5c3825 13%,#dc8c47 50%,#633b27 87%,#d47530 94%,#ffd197 97%,#7d441e);box-shadow:inset 0 0 2px 2px #ffca9455,2px 4px 0 #11191d,8px 15px 15px #10171d55,22px 32px 40px #0006,-4px 0 5px #1119;isolation:isolate}.phone::before,.phone::after{content:"";position:absolute;z-index:-1;top:155px;width:7px;height:155px;border:1px solid #ffb16a88;border-radius:5px;background:linear-gradient(90deg,#71350b,#ffb366,#7d3c11);box-shadow:inset 0 0 4px #ffa95c}.phone::before{left:-4px}.phone::after{right:-4px}.power{position:absolute;top:-5px;right:69px;width:36px;height:7px;background:linear-gradient(#87929a,#273039);border:1px solid #172129;border-radius:5px 5px 0 0;z-index:-1}.faceplate{position:relative;padding:18px 17px 15px;overflow:hidden;border:1px solid #77818a;border-radius:58px 58px 60px 60px / 51px 51px 76px 76px;background:linear-gradient(96deg,#26374d 0,#4b5d72 3%,#2e4057 10%,#26364c 35%,#213047 65%,#34475d 91%,#677586 97%,#233247);box-shadow:inset 0 2px 3px #c6d1da77,inset 2px 0 3px #afbdca33,inset -3px -5px 6px #0b1728cc}.faceplate::after{content:"";pointer-events:none;position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(0deg,#ffffff02 0px,#ffffff02 1px,transparent 1px,transparent 3px)}.earpiece{display:flex;justify-content:center;gap:4px;margin:4px 0 15px;height:13px;align-items:center}.earpiece i{display:block;width:5px;height:8px;border-radius:5px;background:#111e2e;box-shadow:inset 0 1px 2px #000,0 1px 1px #8b9aab80}.earpiece i:nth-child(2),.earpiece i:nth-child(4){height:11px}.earpiece i:nth-child(3){height:13px}header{text-align:center;margin:0 0 12px}.brand{display:inline-block;font:bold 19px/1 Arial,sans-serif;letter-spacing:1px;transform:scaleX(1.13);color:#d9dfe4;text-shadow:0 1px 1px #000}.display-bezel{padding:13px 12px 15px;background:linear-gradient(120deg,#101a2a,#25364b 55%,#0d1827);border:1px solid #69788c;border-bottom-color:#728195;border-radius:30px 30px 35px 35px / 24px 24px 18px 18px;box-shadow:0 2px 3px #111a2c,inset 0 1px 3px #000b}.screen{position:relative;padding:8px 7px 5px;color:#26351d;background:#afbc8c;border:2px solid #111c23;border-radius:4px 4px 9px 9px;box-shadow:inset 2px 3px 6px #35432f66,0 1px 1px #a6b3b333;font-family:Consolas,"Courier New",monospace;font-weight:bold}.screen::after{content:"";pointer-events:none;position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,#fff2,transparent 45%,#fff1),repeating-linear-gradient(0deg,transparent,transparent 2px,#18280d08 2px,#18280d08 3px)}.status,.scores,.screen-footer{display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:9px}.status{padding-bottom:5px;letter-spacing:1px}.signal{font-size:10px;letter-spacing:0}.battery{position:relative;width:16px;height:7px;border:1px solid #26351d;background:repeating-linear-gradient(90deg,#26351d,#26351d 3px,transparent 3px,transparent 4px)}.battery::after{content:"";position:absolute;right:-3px;top:1px;width:2px;height:3px;background:#26351d}.scores{border-top:1px solid #26351d;padding:4px 0;font-size:9px}.playfield{position:relative;border:1px solid #26351d}canvas{display:block;width:100%;height:auto;image-rendering:pixelated;touch-action:none}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#afbc8cf2;padding:7px;gap:8px;pointer-events:none}.overlay[hidden]{display:none}.overlay strong{font-size:19px;letter-spacing:1px}.overlay span{font-size:9px;line-height:1.4}.overlay .pixel-snake{font-size:22px;letter-spacing:-3px}.screen-footer{padding-top:4px;font-size:8px}.soft-labels{display:flex;justify-content:space-between;margin-top:5px;border-top:1px solid #26351d;padding-top:3px;font-size:10px}.control-deck{margin:10px -1px 0}.actions{display:grid;grid-template-columns:1fr 45px 1fr;gap:13px;align-items:center}button,.key{font-family:Arial,sans-serif;color:#233047;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}button{cursor:pointer}button:focus-visible{outline:3px solid #ffb963;outline-offset:4px}button:disabled{cursor:default}.softkey{height:30px;padding:0 5px;border:1px solid #adb6bc;border-bottom:3px solid #77818a;border-radius:65% 30% 55% 28%;background:linear-gradient(165deg,#eff2f3,#adb8bf 55%,#d1d7db);box-shadow:0 3px 2px #101a2e, inset 0 1px 1px white;font-size:10px;font-weight:bold;white-space:nowrap}.softkey:last-child{border-radius:30% 65% 28% 55%}.softkey:disabled{color:#6a7580}.rocker{height:55px;background:linear-gradient(90deg,#8e9aa5,#e4e8ea 45%,#a8b4bf);border:1px solid #c0c9d0;border-radius:46%;box-shadow:0 3px 2px #0b1526;display:flex;flex-direction:column;padding:3px}.rocker button{background:transparent;border:0;font-size:20px;line-height:19px;height:23px;color:#35465b}.rocker button+button{border-top:1px solid #7b8894}.call-row{display:flex;align-items:center;justify-content:space-between;padding:0 14px;margin:-1px 0 12px}.call-row button{border:0;background:transparent;font-size:24px;line-height:28px;text-shadow:0 1px #0d182a}.call-key{color:#84b49b}.end-key{color:#d78b84;transform:rotate(135deg)}.navi-mark{font-size:6px;letter-spacing:2px;color:#788a9e}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 7px;padding:0 1px}.key{position:relative;height:42px;border:1px solid #b7c1ca;border-bottom:3px solid #7b8b9b;background:linear-gradient(155deg,#eef0f1 3%,#c0c9d0 38%,#97a5b3 70%,#d6dce0);border-radius:52% 48% 44% 53% / 35% 48% 56% 65%;box-shadow:0 3px 2px #0b1424,inset 1px 1px 2px #fff9;display:flex;justify-content:center;align-items:center;gap:4px;transform:rotate(8deg);padding:0 4px 2px}.key:nth-child(3n+2){border-radius:30% 30% 49% 49% / 42% 42% 58% 58%;transform:translateY(4px)}.key:nth-child(3n){border-radius:48% 52% 53% 44% / 48% 35% 65% 56%;transform:rotate(-8deg)}.key b{font-size:20px;font-weight:400;text-shadow:0 1px #f0f3f5}.key small{font-size:9px;letter-spacing:-.5px}.key-dot{position:absolute;bottom:4px;left:50%;height:2px;width:2px;background:#506074;border-radius:50%}button.key:active{filter:brightness(.85);box-shadow:0 1px 1px #0b1424;translate:0 2px}.softkey:active{filter:brightness(.85);translate:0 2px}.chin{padding:25px 0 2px;text-align:center;position:relative}.chin span{color:#97a6b7;font:italic 10px Arial;letter-spacing:2px;text-shadow:0 1px #132136}.chin i{display:block;margin:11px auto 0;width:23px;height:3px;border-radius:50%;background:#121f30;box-shadow:0 1px #6d7d9166}.caption{display:flex;justify-content:space-between;margin:32px 4px 15px;font-size:11px;color:#a4afb6}.edition{font-size:10px;color:#e0e5e8;letter-spacing:2px}.instructions{font:11px/1.9 Consolas,monospace;color:#929fa8;text-align:center;margin:0}@media(max-width:350px){body{padding:22px 10px}.phone{width:280px;padding-left:8px;padding-right:8px}.faceplate{padding-left:15px;padding-right:15px}.display-bezel{padding:11px 10px}.keypad{gap:8px 5px}.key small{font-size:8px}.page-nav{font-size:9px}}@media(prefers-reduced-motion:no-preference){button{transition:filter .1s}}