*{box-sizing:border-box}html,body{margin:0;height:100%;background:#252625}body{height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:Arial,sans-serif;background:radial-gradient(ellipse at 50% 35%,#555954,#20221f);color:#e9edf0}.phone{position:relative;height:min(96dvh,960px);aspect-ratio:.43;border:3px solid #161815;border-radius:20% 20% 15% 15% / 6% 6% 5% 5%;background:linear-gradient(90deg,#171a17,#41433e 7%,#262923 17%,#33362f 85%,#151914);box-shadow:inset 2px 1px 3px #93958a,inset -3px 0 5px #080c08,0 25px 65px #0009;user-select:none;-webkit-user-select:none;touch-action:none;container-type:size}.phone:before{content:'';position:absolute;inset:2% 9% 6%;background:linear-gradient(105deg,#c0c2bb,#eeeee8 38%,#b5b8b0 78%,#e4e5de);border-radius:10% 10% 5% 5% / 3% 3% 2% 2%;box-shadow:inset 0 0 5px #595e54,0 0 2px #050905}.top{position:absolute;top:5.5%;left:30%;width:40%;height:5%;display:flex;justify-content:center}.speaker{display:grid;grid-template-columns:10px 18px 10px;grid-template-rows:5px 5px;gap:7px 14px;transform:perspective(100px) rotateX(10deg)}.speaker i{border-radius:60%;background:#303830;box-shadow:0 1px 1px #fff,inset 0 2px 2px #111}.face{position:absolute;top:13%;left:12%;width:76%;height:36%;display:flex;flex-direction:column;align-items:center}.brand{font-weight:900;color:#252d24;font-size:7cqw;letter-spacing:1px;line-height:1;transform:scaleX(1.15);margin:0 0 10%}.glass{width:100%;flex:1;min-height:0;padding:4% 3%;background:#9fac73;border:5px ridge #ced1c6;border-radius:5% 5% 7% 7% / 9% 9% 10% 10%;outline:3px solid #b1b5a9;box-shadow:0 -5px 0 #f1f1e9,0 -9px 0 #b9bcb3,0 5px 0 #eeeFE6,0 9px 0 #a9aea2,inset 0 0 8px #647550;display:flex;align-items:center}canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;background:#9fac73}.model{display:none}.controls{position:absolute;top:51%;left:11%;width:78%;height:16%;display:grid;grid-template-columns:1fr 1.15fr 1fr;grid-template-rows:1fr 1fr;gap:0}.controls button{border:0;background:linear-gradient(125deg,#f1f2ea44,#fff8 40%,#92998a44 88%,#fff8);color:#20291e;box-shadow:inset 0 -2px 3px #fff9;cursor:pointer}.power{grid-column:1;grid-row:1;font-size:6cqw;color:#bf514a!important;border-radius:30% 35% 15% 10%;text-shadow:0 1px white}.clear{grid-column:1;grid-row:2;font-size:6cqw;font-style:italic}.navi{grid-column:2;grid-row:1 / 3;font-size:13cqw;color:#009cc1!important;text-shadow:0 1px #b0efff;border-radius:0 0 15% 15%}.rocker{grid-column:3;grid-row:1 / 3;display:flex;flex-direction:column}.rocker button{height:50%;font-size:8cqw;line-height:1}.keypad{position:absolute;top:67%;left:11%;width:78%;height:27%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:1px;background:#c1c7bacc;border-radius:0 0 7% 7%;overflow:hidden}.keypad button{border:0;border-radius:0 0 12% 12%;background:linear-gradient(120deg,#b9c0b066,#f6f8ed 48%,#d5d9cc 80%,#a4ac9b);box-shadow:inset 0 -3px 3px #fff9;color:#273021;display:flex;align-items:center;justify-content:center;gap:5px;padding:0;cursor:pointer}.keypad button:nth-child(3n){flex-direction:row-reverse}.keypad b{font-size:6cqw;font-weight:500}.keypad small{font-size:3.8cqw}.chin{display:none}button{touch-action:none;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #176780;outline-offset:-3px}.keypad button.pressed,.controls button.pressed{background:linear-gradient(120deg,#969f8b,#c1c8b4);box-shadow:inset 0 3px 5px #6a755e}.off canvas{opacity:0}.off .glass{background:#778169}.desktop-note{position:absolute;left:calc(50% + 255px);max-width:245px;color:#c3cbbf;font-size:14px;line-height:1.8}.desktop-note>span{font-size:12px;letter-spacing:4px}.desktop-note button{background:transparent;color:#e9edf0;border:1px solid #758173;border-radius:6px;padding:10px 14px;margin:10px 0 25px}.desktop-note small,.desktop-note a{display:block;font-size:11px;color:#a6b09f}@media(max-width:1000px){.desktop-note{display:none}}@media(max-width:550px) and (orientation:portrait){.phone{height:100dvh;width:100vw;aspect-ratio:auto;border-radius:15% 15% 10% 10% / 5% 5% 4% 4%}.top{top:5%}.face{top:12%;height:37%}.brand{font-size:6.5cqw;margin-bottom:8%}.speaker{gap:8px 18px}.keypad b{font-size:6.5cqw}.keypad small{font-size:4cqw}}@media(max-height:480px) and (orientation:landscape){.phone{height:100dvh;aspect-ratio:.5}.speaker{grid-template-rows:3px 3px;gap:3px 8px}}
[hidden]{display:none!important}.choosing{overflow:auto;display:block;background:#e9e6df;color:#242e29}.choosing .phone,.choosing .desktop-note{display:none}#lobby{max-width:1100px;margin:auto;padding:64px 24px 30px}#lobby header{text-align:center}.eyebrow{font:11px monospace;letter-spacing:3px;color:#557061}h1{font-size:clamp(38px,7vw,72px);letter-spacing:-3px;margin:15px 0}#lobby p{line-height:1.6;color:#60665e}.phone-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:42px 0}.phone-card{background:#f7f5f0;border:1px solid #d0d3c8;border-radius:24px;padding:25px 10px;color:#28382e;cursor:pointer;touch-action:manipulation;text-align:center;transition:transform .2s,box-shadow .2s}.phone-card:hover{transform:translateY(-5px);box-shadow:0 12px 25px #28382e18}.phone-card strong{display:block;font-size:19px;margin-top:20px}.phone-card small{display:block;line-height:1.6;margin:8px 0;color:#677567}.mini{display:block;width:80px;height:172px;background:linear-gradient(90deg,#222,#ccc 14%,#eee 50%,#bbb 86%,#222);border:4px solid #333;border-radius:18px;margin:auto;padding:18px 9px;color:#333;font:bold 8px Arial}.mini:before{content:'NOKIA';display:block;margin-bottom:10px}.mini i{display:block;background:#a9b883;height:44px;border:3px ridge #aaa;margin-bottom:13px}.mini b{display:block;height:54px;background:repeating-linear-gradient(0deg,transparent 0 10px,#888 11px 12px),repeating-linear-gradient(90deg,#ddd 0 14px,#888 15px 16px);border-radius:6px}.mini.m3310{background:#384d73;border-radius:27px 27px 20px 20px;color:white}.mini.m6600{width:94px;background:linear-gradient(100deg,#242728 24%,#bbc4c8 25%,#e4e5e4 80%,#25282a 81%);border-radius:35px 35px 26px 26px}.mini.m6600 i{height:58px;background:linear-gradient(#7a94bf,#d9e4f7)}.mini.m3220{border-color:#db7838;background:#ede5d3}.mini.m3220 i{background:#86b8d7}.disclosure{text-align:center;font-size:12px}#phones{position:fixed;left:12px;top:max(10px,env(safe-area-inset-top));z-index:5;border:1px solid #ffffff55;background:#202a24df;color:white;border-radius:20px;padding:9px 14px;touch-action:manipulation}.nav-left,.nav-right{display:none}.phone[data-model="3310"]{background:linear-gradient(90deg,#17253d,#425b83 45%,#20304e);border-radius:35% 35% 24% 24% / 12% 12% 9% 9%}.phone[data-model="3310"]:before{inset:16% 8% 7%;border-radius:40% 40% 20% 20% / 8% 8% 7% 7%}.phone[data-model="3310"] .brand{color:white}.phone[data-model="3310"] .keypad{gap:9px;background:transparent}.phone[data-model="3310"] .keypad button{border-radius:45%;background:linear-gradient(#f7f7ed,#a7b0ab)}.phone[data-model="6600"]{aspect-ratio:.52;background:linear-gradient(90deg,#171e23,#3f494f 20%,#bcc3c5 22%,#e2e5e4 76%,#39474d 80%,#161e25);border-radius:35% 35% 26% 26% / 12% 12% 9% 9%}.phone[data-model="6600"]:before{inset:6% 15% 5%;border-radius:40% 40% 20% 20% / 10% 10% 5% 5%}.phone[data-model="6600"] .face{top:11%;height:44%;left:17%;width:66%}.phone[data-model="6600"] .brand{font-size:5cqw;margin-bottom:7%}.phone[data-model="6600"] .glass{border:5px solid #293941;border-radius:3%;padding:2%;background:#c8d8ec;outline:2px solid #aeb8bd}.phone[data-model="6600"] .controls{top:57%;height:13%}.phone[data-model="6600"] .keypad{top:72%;height:22%;gap:3px;background:transparent}.phone[data-model="6600"] .keypad button{border-radius:35%;background:linear-gradient(#eff0ed,#9da6a6)}.phone[data-model="3220"]{background:linear-gradient(90deg,#dc6c2e,#ece5d6 13%,#f9f4e7 50%,#eee6d7 87%,#dc6c2e);border-radius:25% 25% 20% 20% / 9% 9% 7% 7%}.phone[data-model="3220"]:after{content:'';position:absolute;inset:29% 0 27%;pointer-events:none;background:linear-gradient(transparent 0 14%,#ffbb6655 15% 34%,transparent 35% 65%,#ffbb6655 66% 86%,transparent 87%);border-radius:20%;border-left:9px solid #e69750;border-right:9px solid #e69750}.phone[data-model="3220"] .face{height:38%}.phone[data-model="3220"] .glass{background:#d7eafa;border-color:#879393}.phone[data-model="3220"] .keypad{gap:5px;background:transparent}.phone[data-model="3220"] .keypad button{border-radius:40%}.phone[data-model="6600"] .rocker,.phone[data-model="3220"] .rocker{grid-column:2;grid-row:1/3;justify-content:space-between;pointer-events:none}.phone[data-model="6600"] .rocker button,.phone[data-model="3220"] .rocker button{height:28%;pointer-events:auto;z-index:2;font-size:6cqw}.phone[data-model="6600"] .navi,.phone[data-model="3220"] .navi{align-self:center;height:44%;font-size:5cqw;color:#253744!important;border:3px ridge #adb9be;border-radius:30%;z-index:3}.phone[data-model="6600"] .nav-left,.phone[data-model="3220"] .nav-left{display:block;grid-column:1;grid-row:2}.phone[data-model="6600"] .nav-right,.phone[data-model="3220"] .nav-right{display:block;grid-column:3;grid-row:2}.phone[data-model="6600"] .clear,.phone[data-model="3220"] .clear{grid-column:3;grid-row:1}.phone[data-model="6600"] canvas,.phone[data-model="3220"] canvas{background:#dce8ef} @media(max-width:750px){.phone-grid{grid-template-columns:repeat(2,1fr)}#lobby{padding-top:35px}.phone-card{padding:20px 6px}.phone-card strong{font-size:17px}}@media(max-width:550px) and (orientation:portrait){.phone[data-model]{width:100vw;height:100dvh}}@media(prefers-reduced-motion:reduce){.phone-card{transition:none}}
/* Straight-on molded housings. No photography, skew or perspective. */
.phone[data-model]{height:min(94dvh,900px);width:auto;max-width:96vw;aspect-ratio:.46;transform:none;animation:phone-arrive .25s ease-out}.phone[data-model] .face,.phone[data-model] .keypad{transform:none}.phone[data-model] canvas{object-fit:contain}.phone[data-model] .glass{overflow:hidden;background:#9fac73}.phone[data-model] .keypad button,.phone[data-model] .controls button{transition:transform .08s,box-shadow .08s}.phone[data-model] .keypad button.pressed,.phone[data-model] .controls button.pressed{transform:translateY(2px);box-shadow:inset 0 2px 5px #29352b80}.soft-left,.soft-right,#joystick{display:none}.phone[data-model] .nav-left,.phone[data-model] .nav-right{display:none}.phone[data-model] .model{display:block;font:bold 10px Arial;letter-spacing:2px;color:#515d59;margin-top:14px}
.phone[data-model="1100"]{background:linear-gradient(90deg,#17201f,#374341 8%,#253230 92%,#101716);border-radius:22% 22% 17% 17% / 6% 6% 5% 5%}.phone[data-model="1100"]:before{background:linear-gradient(100deg,#a3aba6,#e7eae4 38%,#b9c0b9 75%,#d9ded6)}
.phone[data-model="3310"]{background:linear-gradient(90deg,#182b45,#3e5371 10%,#415773 70%,#1d2c43);border-radius:32% 32% 24% 24% / 10% 10% 8% 8%}.phone[data-model="3310"]:before{inset:19% 9% 43%;border-radius:15% 15% 45% 45%;background:linear-gradient(100deg,#7e898e,#c8d1d1 45%,#8e9ca1)}.phone[data-model="3310"] .face{top:19%;height:29%;left:15%;width:70%}.phone[data-model="3310"] .brand{position:absolute;top:-20%;font-size:6cqw;color:#f0f2ed}.phone[data-model="3310"] .glass{border:4px ridge #a5b3b4;box-shadow:inset 0 0 9px #516347;outline:0}.phone[data-model="3310"] .top{top:6%;height:8%;left:44%;width:12%}.phone[data-model="3310"] .speaker{display:flex;flex-direction:column;gap:5px;align-items:center}.phone[data-model="3310"] .speaker i{width:8px;height:4px;background:#102039}.phone[data-model="3310"] .controls{top:50%;height:13%}.phone[data-model="3310"] .navi{height:45%;align-self:start;border-radius:15% 15% 60% 60%;font-size:10cqw}.phone[data-model="3310"] .clear{grid-row:1/3;height:65%;align-self:center;border-radius:40%}.phone[data-model="3310"] .rocker{height:80%;align-self:center;border-radius:40%;overflow:hidden}.phone[data-model="3310"] .power{position:absolute;top:-375%;left:42%;height:20%;width:17%;border-radius:50%;font-size:3cqw;background:#162437;color:#939caa!important}.phone[data-model="3310"] .keypad{top:64%;height:29%;left:13%;width:74%;gap:8px 9px}.phone[data-model="3310"] .keypad button{border-radius:50%;border:1px solid #778687}.phone[data-model="3310"] .model{color:#b4c4d6}
.phone[data-model="6600"]{aspect-ratio:.535;border-radius:42% 42% 32% 32% / 11% 11% 10% 10%;background:linear-gradient(90deg,#0d1317,#273038 12%,#171f24 88%,#080d11);box-shadow:inset 2px 2px 4px #7a858a,inset -3px -3px 6px #070b0c,0 20px 45px #0007}.phone[data-model="6600"]:before{inset:5% 12% 5%;border-radius:40% 40% 22% 22% / 9% 9% 8% 8%;background:linear-gradient(100deg,#9ba5a9,#e6e9e8 34%,#c2cacc 73%,#8c979c);box-shadow:inset 1px 1px 4px white,inset -2px -2px 4px #56646d}.phone[data-model="6600"] .top{top:8%;left:37%;width:26%}.phone[data-model="6600"] .speaker{gap:5px 9px;grid-template-columns:8px 20px 8px;grid-template-rows:3px 3px}.phone[data-model="6600"] .face{top:15%;left:18%;width:64%;height:39%}.phone[data-model="6600"] .brand{font-size:5cqw;margin-bottom:9%}.phone[data-model="6600"] .glass{border:6px solid #1c272b;outline:2px solid #8b999e;border-radius:5%;box-shadow:0 2px 3px #f4f7f5,inset 0 0 6px #253c5544;background:#dce8ef}.phone[data-model="6600"] canvas{background:#dce8ef}.phone[data-model="6600"] .controls{top:56%;left:10%;width:80%;height:14%;display:block}.phone[data-model="6600"] .navi,.phone[data-model="6600"] .rocker{display:none}.phone[data-model="6600"] .power,.phone[data-model="6600"] .clear{position:absolute;right:0;width:14%;height:40%;font-size:5cqw;background:linear-gradient(100deg,#151d22,#39444a);border:1px solid #131b20;border-radius:25%;color:#b3bdc0!important;box-shadow:inset 1px 1px 2px #69777d}.phone[data-model="6600"] .power{top:0;color:#d56a65!important}.phone[data-model="6600"] .clear{bottom:0}.phone[data-model="6600"] .soft-left,.phone[data-model="6600"] .soft-right{display:block;position:absolute;bottom:8%;width:28%;height:40%;color:#27749e;font-size:7cqw;border:1px solid #788991;background:linear-gradient(#e5e9e8,#a9b3b7);border-radius:20% 20% 35% 35%}.phone[data-model="6600"] .soft-left{left:9%}.phone[data-model="6600"] .soft-right{right:15%}.phone[data-model="6600"] .keypad{top:71%;height:23%;left:23%;width:54%;gap:2px;background:#536168;border-radius:12% 12% 25% 25% / 5% 5% 20% 20%}.phone[data-model="6600"] .keypad button{border-radius:5%;background:linear-gradient(110deg,#aeb9bb,#e4e8e6 45%,#bac5c7);box-shadow:inset 0 -1px 1px white}.phone[data-model="6600"] .keypad b{font-size:5cqw}.phone[data-model="6600"] .keypad small{font-size:2.8cqw}.phone[data-model="6600"] .model{display:none}
.phone[data-model="3220"]{aspect-ratio:.46;border-radius:26% 26% 24% 24% / 8% 8% 7% 7%;background:linear-gradient(90deg,#abb7b0,#ecede3 13%,#c5d2c9 87%,#9ba8a2);border-color:#606f69}.phone[data-model="3220"]:before{inset:11% 12% 5%;background:linear-gradient(90deg,#117a9c,#28b8d1 15%,#35bfd3 85%,#18748c);border-radius:30% 30% 20% 20% / 9% 9% 6% 6%;box-shadow:inset 1px 1px 4px #b5f4fc}.phone[data-model="3220"]:after{inset:23% 1% 23%;border-left:9px solid #a7b5a388;border-right:9px solid #a7b5a388;background:none;border-radius:30%;box-shadow:inset 1px 0 2px #eefbe5;pointer-events:none}.phone[data-model="3220"] .face{left:19%;width:62%;top:16%;height:35%;background:linear-gradient(100deg,#15325e,#142b51);padding:5% 3% 4%;border-radius:15% 15% 6% 6%}.phone[data-model="3220"] .brand{font-size:5cqw;color:#bacbd4;margin-bottom:12%}.phone[data-model="3220"] .glass{border:3px solid #364854;outline:0;box-shadow:inset 0 0 3px #315174;background:#dce8ef}.phone[data-model="3220"] .model{display:none}.phone[data-model="3220"] .controls{left:19%;width:62%;top:53%;height:13%;display:block;background:#153152;border-radius:9%}.phone[data-model="3220"] .navi,.phone[data-model="3220"] .rocker{display:none}.phone[data-model="3220"] .soft-left{display:block;position:absolute;left:0;top:0;width:28%;height:100%;border-radius:15%;color:#9fced8;font-size:7cqw;background:linear-gradient(110deg,#244675,#7186a5,#224674);border:2px solid #152b49}.phone[data-model="3220"] .soft-right{display:none}.phone[data-model="3220"] .power,.phone[data-model="3220"] .clear{position:absolute;right:0;width:28%;height:50%;background:linear-gradient(110deg,#22446a,#637e9f,#244775);font-size:4cqw}.phone[data-model="3220"] .power{bottom:0;top:auto}.phone[data-model="3220"] .clear{top:0;color:#cadbe3}.phone[data-model="3220"] .keypad{left:19%;width:62%;top:68%;height:25%;gap:2px;background:#172f51;border-radius:8% 8% 25% 25%}.phone[data-model="3220"] .keypad button{border-radius:6%;background:linear-gradient(120deg,#3d5680,#8594b1 48%,#3b5882);color:#eef0e6;box-shadow:inset 0 1px 2px #a6bccb}.phone[data-model="3220"] .keypad b{font-size:5.5cqw}.phone[data-model="3220"] .keypad small{font-size:3cqw}
.phone[data-model="6600"] #joystick,.phone[data-model="3220"] #joystick{display:block;position:absolute;left:37%;top:0;width:30%;height:65%;background:radial-gradient(ellipse,#30383b 0 25%,#141a1e 28% 36%,#89979d 39%,#c5ced0 45%,#a4b1b5 70%,#7b8d96);border:1px solid #798b93;border-radius:32%;z-index:5;touch-action:none;cursor:grab;box-shadow:inset 0 1px 2px #f4f7f7,0 2px 3px #40535d}.phone[data-model="3220"] #joystick{left:29%;top:0;width:42%;height:100%;border-radius:12%;background:linear-gradient(110deg,#203c6a,#7891af 50%,#2c4974)}#joystick span{display:block;width:34%;height:34%;margin:auto;border-radius:50%;background:radial-gradient(circle at 40% 30%,#7c8a90,#303a40 45%,#11191f 65%);border:1px solid #0a1116;box-shadow:0 2px 3px #0b1319;transition:transform .08s}#joystick[data-direction="up"] span{transform:translateY(-6px)}#joystick[data-direction="down"] span{transform:translateY(6px)}#joystick[data-direction="left"] span{transform:translateX(-6px)}#joystick[data-direction="right"] span{transform:translateX(6px)}.control-hint{display:block;margin-top:14px;font-size:11px;color:#b5c8ba}.phone-card{transition:transform .15s,box-shadow .15s}.phone-card:hover{transform:translateY(-3px)}@keyframes phone-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:550px) and (orientation:portrait){.phone[data-model]{width:min(96vw,calc(96dvh * .5));height:96dvh;max-width:96vw}.phone[data-model="6600"]{width:min(96vw,calc(96dvh * .535))}}@media(prefers-reduced-motion:reduce){.phone[data-model]{animation:none}.phone-card,#joystick span,.phone[data-model] button{transition:none}}
/* 2002 collection: rubber-armoured 5210 and sculpted Series 40 7210. */
.phone-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin:38px auto}
.mini.m5210{border:6px solid #373b3a;background:linear-gradient(95deg,#bc5620,#ef8c33 45%,#c65b23);border-radius:25px 25px 20px 20px;color:#f3e2cb;width:84px}
.mini.m5210 i{background:#d9af61;border-color:#565a50}.mini.m5210 b{background:repeating-linear-gradient(0deg,transparent 0 10px,#626763 11px 12px),repeating-linear-gradient(90deg,#c4c8b9 0 14px,#656b63 15px 16px)}
.mini.m7210{border-color:#8eaaac;background:linear-gradient(100deg,#347987,#8ad1d5 45%,#338291);border-radius:25px 25px 17px 17px;color:#f0f6ee}
.mini.m7210 i{background:#dce8ef;border:3px solid #bfd1ce;height:49px}.mini.m7210 b{border-radius:35% 15% 35% 15%;transform:skewY(-8deg)}
.phone[data-model="5210"]{aspect-ratio:.46;border:5px solid #252d2a;border-radius:32% 32% 24% 24% / 10% 10% 8% 8%;background:linear-gradient(90deg,#272e2a,#525a50 10%,#232b26 88%,#141c18);box-shadow:inset 0 2px 4px #8b9283,0 20px 45px #0007}
.phone[data-model="5210"]:before{inset:3% 7% 4%;border-radius:35% 35% 30% 30% / 10% 10% 7% 7%;background:linear-gradient(100deg,#b85622,#ed923b 30%,#d8702c 75%,#a74518);box-shadow:inset 2px 0 5px #ffb365,inset -3px 0 4px #75330e}
.phone[data-model="5210"]:after{content:'';position:absolute;inset:40% 0 42%;border-left:7px solid #151c18;border-right:7px solid #151c18;pointer-events:none}
.phone[data-model="5210"] .top{top:6%;left:32%;width:36%;height:5%}.phone[data-model="5210"] .speaker{grid-template-columns:8px 8px 8px;gap:7px 12px}.phone[data-model="5210"] .speaker i{background:#303629;box-shadow:0 1px #eeac69}
.phone[data-model="5210"] .face{top:15%;height:32%;left:16%;width:68%}.phone[data-model="5210"] .brand{color:#f1e4ce;font-size:6cqw;margin-bottom:12%;text-shadow:0 1px #654322}
.phone[data-model="5210"] .glass{background:#d9af61;border:6px solid #4d5749;outline:2px solid #babcb0;border-radius:9%;box-shadow:inset 0 0 9px #9d813e,0 3px 0 #573c27}.phone[data-model="5210"] canvas{background:#d9af61}.phone[data-model="5210"] .model{color:#453e2f;letter-spacing:3px}
.phone[data-model="5210"] .controls{top:51%;height:13%;left:15%;width:70%;gap:4px}.phone[data-model="5210"] .controls button{background:linear-gradient(120deg,#aab1a5,#e2e2d2 50%,#949d91);border:1px solid #515c4e;border-radius:40%}
.phone[data-model="5210"] .navi{height:55%;align-self:center;border-radius:45%;font-size:12cqw;color:#426b45!important}.phone[data-model="5210"] .power{font-size:4cqw}.phone[data-model="5210"] .clear{font-size:5cqw}
.phone[data-model="5210"] .keypad{left:15%;width:70%;top:66%;height:27%;gap:7px 8px;background:transparent}.phone[data-model="5210"] .keypad button{border:1px solid #5e6658;border-radius:40%;background:linear-gradient(115deg,#a5ac9c,#dadfcf 45%,#9da68f);box-shadow:inset 0 1px 2px #fff9,0 2px 2px #743a1c}.phone[data-model="5210"] .keypad b{font-size:5.6cqw}.phone[data-model="5210"] .keypad small{font-size:3cqw}
.phone[data-model="7210"]{aspect-ratio:.44;border:3px solid #66878a;border-radius:34% 34% 25% 25% / 10% 10% 8% 8%;background:linear-gradient(90deg,#245969,#5ba0ac 13%,#80bcc3 50%,#397889 88%,#214c60);box-shadow:inset 2px 1px 4px #d3eded,inset -3px 0 5px #224a59,0 20px 45px #0007}
.phone[data-model="7210"]:before{inset:3% 8% 4%;border-radius:32% 32% 20% 20% / 9% 9% 7% 7%;background:linear-gradient(100deg,#4a9da7,#a3dad9 40%,#63acb7 80%,#307381);box-shadow:inset 0 1px 3px #c5f2ee}
.phone[data-model="7210"] .top{top:6%;left:36%;width:28%;height:5%}.phone[data-model="7210"] .speaker{display:flex;gap:5px;align-items:start}.phone[data-model="7210"] .speaker i{width:4px;height:15px;background:#35636b;box-shadow:1px 0 #bae9e4}.phone[data-model="7210"] .speaker i:nth-child(2),.phone[data-model="7210"] .speaker i:nth-child(5){height:20px}
.phone[data-model="7210"] .face{top:13%;left:15%;width:70%;height:37%}.phone[data-model="7210"] .brand{color:#f1f5e9;font-size:6cqw;text-shadow:0 1px #447f89;margin-bottom:9%}.phone[data-model="7210"] .glass{border:6px solid #d0ddce;outline:2px solid #46838d;background:#dce8ef;border-radius:6%;box-shadow:inset 0 0 4px #446975,0 2px 1px #f1f9e9}.phone[data-model="7210"] canvas{background:#dce8ef}.phone[data-model="7210"] .model{display:none}
.phone[data-model="7210"] .controls{top:52%;left:15%;width:70%;height:14%;display:block}.phone[data-model="7210"] .navi,.phone[data-model="7210"] .rocker{display:none}
.phone[data-model="7210"] .soft-left,.phone[data-model="7210"] .soft-right{display:block;position:absolute;top:0;width:29%;height:45%;border-radius:40%;background:linear-gradient(120deg,#c6d6ce,#ecede0,#91b1ac);border:1px solid #507a7b;color:#3a7b88;font-size:7cqw}.phone[data-model="7210"] .soft-left{left:0}.phone[data-model="7210"] .soft-right{right:0}
.phone[data-model="7210"] .power,.phone[data-model="7210"] .clear{position:absolute;bottom:0;width:29%;height:42%;background:linear-gradient(110deg,#4b9fa5,#96ceca,#3b7e8d);border:1px solid #487d83;border-radius:35%;font-size:5cqw}.phone[data-model="7210"] .power{right:0}.phone[data-model="7210"] .clear{left:0}
.phone[data-model="7210"] #joystick{display:block;position:absolute;left:32%;top:3%;width:36%;height:84%;border:3px solid #a9c2ba;border-radius:50%;background:radial-gradient(ellipse,#467e86 0 32%,#d4e2d6 35% 58%,#759f9d 62%,#c6dfd7 80%);box-shadow:0 2px 3px #345f65;touch-action:none;z-index:5}.phone[data-model="7210"] #joystick span{width:35%;height:35%;background:linear-gradient(110deg,#397280,#96c5c6);border-color:#4b8891}
.phone[data-model="7210"] .keypad{left:15%;width:70%;top:68%;height:25%;gap:6px 5px;background:transparent;overflow:visible}.phone[data-model="7210"] .keypad button{border:1px solid #80a6a2;background:linear-gradient(115deg,#b6d2c9,#e3ebe0 45%,#92b6ad);border-radius:48% 12% 48% 12%;box-shadow:inset 0 1px 2px #fff9,0 2px 2px #377583}.phone[data-model="7210"] .keypad button:nth-child(3n){border-radius:12% 48% 12% 48%}.phone[data-model="7210"] .keypad button:nth-child(3n+2){border-radius:25%;background:linear-gradient(110deg,#52949d,#a4c9c3,#649da0)}.phone[data-model="7210"] .keypad b{font-size:5.6cqw}.phone[data-model="7210"] .keypad small{font-size:3cqw}
@media(max-width:750px){.phone-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:350px){#lobby{padding-inline:12px}.phone-grid{gap:10px}.phone-card strong{font-size:15px}}

/* Additional classic handset geometry. */
.phone[data-model="3330"]{background:linear-gradient(90deg,#17253d,#425b83 45%,#20304e);border-radius:35% 35% 24% 24% / 12% 12% 9% 9%}
.phone[data-model="3330"]:before{inset:16% 8% 7%;border-radius:40% 40% 20% 20% / 8% 8% 7% 7%}
.phone[data-model="3330"] .brand{color:white}
.phone[data-model="3330"] .keypad{gap:9px;background:transparent}
.phone[data-model="3330"] .keypad button{border-radius:45%;background:linear-gradient(#f7f7ed,#a7b0ab)}
.phone[data-model="3330"]{background:linear-gradient(90deg,#182b45,#3e5371 10%,#415773 70%,#1d2c43);border-radius:32% 32% 24% 24% / 10% 10% 8% 8%}
.phone[data-model="3330"]:before{inset:19% 9% 43%;border-radius:15% 15% 45% 45%;background:linear-gradient(100deg,#7e898e,#c8d1d1 45%,#8e9ca1)}
.phone[data-model="3330"] .face{top:19%;height:29%;left:15%;width:70%}
.phone[data-model="3330"] .brand{position:absolute;top:-20%;font-size:6cqw;color:#f0f2ed}
.phone[data-model="3330"] .glass{border:4px ridge #a5b3b4;box-shadow:inset 0 0 9px #516347;outline:0}
.phone[data-model="3330"] .top{top:6%;height:8%;left:44%;width:12%}
.phone[data-model="3330"] .speaker{display:flex;flex-direction:column;gap:5px;align-items:center}
.phone[data-model="3330"] .speaker i{width:8px;height:4px;background:#102039}
.phone[data-model="3330"] .controls{top:50%;height:13%}
.phone[data-model="3330"] .navi{height:45%;align-self:start;border-radius:15% 15% 60% 60%;font-size:10cqw}
.phone[data-model="3330"] .clear{grid-row:1/3;height:65%;align-self:center;border-radius:40%}
.phone[data-model="3330"] .rocker{height:80%;align-self:center;border-radius:40%;overflow:hidden}
.phone[data-model="3330"] .power{position:absolute;top:-375%;left:42%;height:20%;width:17%;border-radius:50%;font-size:3cqw;background:#162437;color:#939caa!important}
.phone[data-model="3330"] .keypad{top:64%;height:29%;left:13%;width:74%;gap:8px 9px}
.phone[data-model="3330"] .keypad button{border-radius:50%;border:1px solid #778687}
.phone[data-model="3330"] .model{color:#b4c4d6}
.phone[data-model="3650"]{aspect-ratio:.52;background:linear-gradient(90deg,#171e23,#3f494f 20%,#bcc3c5 22%,#e2e5e4 76%,#39474d 80%,#161e25);border-radius:35% 35% 26% 26% / 12% 12% 9% 9%}
.phone[data-model="3650"]:before{inset:6% 15% 5%;border-radius:40% 40% 20% 20% / 10% 10% 5% 5%}
.phone[data-model="3650"] .face{top:11%;height:44%;left:17%;width:66%}
.phone[data-model="3650"] .brand{font-size:5cqw;margin-bottom:7%}
.phone[data-model="3650"] .glass{border:5px solid #293941;border-radius:3%;padding:2%;background:#c8d8ec;outline:2px solid #aeb8bd}
.phone[data-model="3650"] .controls{top:57%;height:13%}
.phone[data-model="3650"] .keypad{top:72%;height:22%;gap:3px;background:transparent}
.phone[data-model="3650"] .keypad button{border-radius:35%;background:linear-gradient(#eff0ed,#9da6a6)}
.phone[data-model="3650"] .rocker{grid-column:2;grid-row:1/3;justify-content:space-between;pointer-events:none}
.phone[data-model="3650"] .rocker button{height:28%;pointer-events:auto;z-index:2;font-size:6cqw}
.phone[data-model="3650"] .navi{align-self:center;height:44%;font-size:5cqw;color:#253744!important;border:3px ridge #adb9be;border-radius:30%;z-index:3}
.phone[data-model="3650"] .nav-left{display:block;grid-column:1;grid-row:2}
.phone[data-model="3650"] .nav-right{display:block;grid-column:3;grid-row:2}
.phone[data-model="3650"] .clear{grid-column:3;grid-row:1}
.phone[data-model="3650"] canvas{background:#dce8ef}
.phone[data-model="3650"]{aspect-ratio:.535;border-radius:42% 42% 32% 32% / 11% 11% 10% 10%;background:linear-gradient(90deg,#0d1317,#273038 12%,#171f24 88%,#080d11);box-shadow:inset 2px 2px 4px #7a858a,inset -3px -3px 6px #070b0c,0 20px 45px #0007}
.phone[data-model="3650"]:before{inset:5% 12% 5%;border-radius:40% 40% 22% 22% / 9% 9% 8% 8%;background:linear-gradient(100deg,#9ba5a9,#e6e9e8 34%,#c2cacc 73%,#8c979c);box-shadow:inset 1px 1px 4px white,inset -2px -2px 4px #56646d}
.phone[data-model="3650"] .top{top:8%;left:37%;width:26%}
.phone[data-model="3650"] .speaker{gap:5px 9px;grid-template-columns:8px 20px 8px;grid-template-rows:3px 3px}
.phone[data-model="3650"] .face{top:15%;left:18%;width:64%;height:39%}
.phone[data-model="3650"] .brand{font-size:5cqw;margin-bottom:9%}
.phone[data-model="3650"] .glass{border:6px solid #1c272b;outline:2px solid #8b999e;border-radius:5%;box-shadow:0 2px 3px #f4f7f5,inset 0 0 6px #253c5544;background:#dce8ef}
.phone[data-model="3650"] canvas{background:#dce8ef}
.phone[data-model="3650"] .controls{top:56%;left:10%;width:80%;height:14%;display:block}
.phone[data-model="3650"] .navi,.phone[data-model="3650"] .rocker{display:none}
.phone[data-model="3650"] .power,.phone[data-model="3650"] .clear{position:absolute;right:0;width:14%;height:40%;font-size:5cqw;background:linear-gradient(100deg,#151d22,#39444a);border:1px solid #131b20;border-radius:25%;color:#b3bdc0!important;box-shadow:inset 1px 1px 2px #69777d}
.phone[data-model="3650"] .power{top:0;color:#d56a65!important}
.phone[data-model="3650"] .clear{bottom:0}
.phone[data-model="3650"] .soft-left,.phone[data-model="3650"] .soft-right{display:block;position:absolute;bottom:8%;width:28%;height:40%;color:#27749e;font-size:7cqw;border:1px solid #788991;background:linear-gradient(#e5e9e8,#a9b3b7);border-radius:20% 20% 35% 35%}
.phone[data-model="3650"] .soft-left{left:9%}
.phone[data-model="3650"] .soft-right{right:15%}
.phone[data-model="3650"] .keypad{top:71%;height:23%;left:23%;width:54%;gap:2px;background:#536168;border-radius:12% 12% 25% 25% / 5% 5% 20% 20%}
.phone[data-model="3650"] .keypad button{border-radius:5%;background:linear-gradient(110deg,#aeb9bb,#e4e8e6 45%,#bac5c7);box-shadow:inset 0 -1px 1px white}
.phone[data-model="3650"] .keypad b{font-size:5cqw}
.phone[data-model="3650"] .keypad small{font-size:2.8cqw}
.phone[data-model="3650"] .model{display:none}
.phone[data-model="3650"] #joystick{display:block;position:absolute;left:37%;top:0;width:30%;height:65%;background:radial-gradient(ellipse,#30383b 0 25%,#141a1e 28% 36%,#89979d 39%,#c5ced0 45%,#a4b1b5 70%,#7b8d96);border:1px solid #798b93;border-radius:32%;z-index:5;touch-action:none;cursor:grab;box-shadow:inset 0 1px 2px #f4f7f7,0 2px 3px #40535d}
.phone[data-model="3650"]{width:min(96vw,calc(96dvh * .535))}
/* Silver 3330: same family as 3310, with a dark keypad and screen surround. */
.phone[data-model="3330"]{background:linear-gradient(100deg,#8c9699,#d9dddd 38%,#adb6b8 80%,#747e84);border-color:#58646b}.phone[data-model="3330"]:before{background:linear-gradient(115deg,#3d4e5a,#6e7e86 45%,#3c4c56);inset:19% 8% 43%}.phone[data-model="3330"] .brand{color:#253742}.phone[data-model="3330"] .model{color:#3b4c55}.phone[data-model="3330"] .keypad button{background:linear-gradient(110deg,#354854,#637681 45%,#283d4b);color:#edf1e8;border-color:#1e3441;box-shadow:inset 0 1px 2px #a6b3bb}.phone[data-model="3330"] .controls button{background:linear-gradient(110deg,#6b7f89,#d2dad7,#82959e)}.phone[data-model="3330"] .top .speaker i{background:#45555e}
.mini.m3330{background:linear-gradient(110deg,#9ca8ac,#e2e5df,#a9b4b7);border-color:#66767f;border-radius:27px 27px 20px 20px}.mini.m3330 b{background:repeating-linear-gradient(0deg,transparent 0 10px,#b3c0c1 11px 12px),repeating-linear-gradient(90deg,#526976 0 14px,#b3c0c1 15px 16px)}
/* 2100: frosted blue side rails, pearl face, rounded keys and pale LCD. */
.phone[data-model="2100"]{aspect-ratio:.46;border-radius:27% 27% 20% 20% / 8% 8% 7% 7%;background:linear-gradient(90deg,#3c79a3,#a4d4e3 9%,#568db0 20%,#759db3 80%,#9bc6dc 93%,#3b6c93);border-color:#6299b7;box-shadow:inset 2px 1px 5px #e2f6ff,inset -3px 0 5px #2c6188,0 20px 45px #0007}.phone[data-model="2100"]:before{inset:3% 10% 4%;background:linear-gradient(110deg,#cbd6d5,#f2f3e8 45%,#b8caca);border-radius:28% 28% 19% 19% / 8% 8% 7% 7%;box-shadow:inset 1px 0 3px #fcfffa,inset -2px 0 5px #829dab}.phone[data-model="2100"] .top{top:7%;left:38%;width:24%;height:4%}.phone[data-model="2100"] .speaker{grid-template-columns:5px 22px 5px;grid-template-rows:4px 4px;gap:5px 5px}.phone[data-model="2100"] .face{top:16%;height:32%;left:16%;width:68%}.phone[data-model="2100"] .brand{font-size:6cqw;color:#30444a;margin-bottom:10%}.phone[data-model="2100"] .glass{border:4px ridge #b8caca;outline:3px solid #7e9da9;box-shadow:0 3px 1px #f4f7e9,inset 0 0 6px #6f8591;background:#c1d2bf}.phone[data-model="2100"] canvas{background:#c1d2bf}.phone[data-model="2100"] .model{color:#536f79}.phone[data-model="2100"] .controls{top:52%;height:12%;left:17%;width:66%;gap:3px}.phone[data-model="2100"] .controls button{border-radius:35%;background:linear-gradient(125deg,#b5c9c9,#f3f6eb 50%,#9ab4bb);border:1px solid #789aa7}.phone[data-model="2100"] .navi{height:70%;align-self:center;font-size:11cqw;border-radius:40%;color:#458097!important}.phone[data-model="2100"] .keypad{left:17%;width:66%;top:67%;height:26%;background:transparent;gap:6px 5px}.phone[data-model="2100"] .keypad button{border-radius:42%;border:1px solid #86a4ae;background:linear-gradient(110deg,#b5cdce,#f2f5e9 45%,#b0c4c5)}.phone[data-model="2100"] .keypad b{font-size:5.5cqw}.phone[data-model="2100"] .keypad small{font-size:3cqw}
.mini.m2100{border-color:#609fbd;background:linear-gradient(90deg,#90bfd0,#ebefdf 27%,#dee5d8 73%,#85b0c7);border-radius:24px 24px 20px 20px}.mini.m2100 i{background:#c1d2bf}
/* 3650: broad colour display and a genuine circular number-key arrangement. */
.phone[data-model="3650"]{aspect-ratio:.49;border-radius:38% 38% 45% 45% / 10% 10% 19% 19%;background:linear-gradient(90deg,#2b4763,#6685a0 12%,#aabcc8 50%,#526f90 90%,#243d59);border-color:#314c65}.phone[data-model="3650"]:before{inset:3% 8% 3%;border-radius:35% 35% 44% 44% / 9% 9% 18% 18%;background:linear-gradient(110deg,#aebdc2,#edf0e7 40%,#b4c5cd 80%,#8ca1b2)}.phone[data-model="3650"] .top{top:6%;left:40%;width:20%;height:4%}.phone[data-model="3650"] .speaker{display:flex;gap:5px}.phone[data-model="3650"] .speaker i{width:4px;height:18px;background:#536d7c}.phone[data-model="3650"] .face{top:13%;left:16%;width:68%;height:36%}.phone[data-model="3650"] .brand{color:#3a4d59;font-size:5.5cqw;margin-bottom:8%}.phone[data-model="3650"] .glass{border:5px solid #526b7e;outline:2px solid #dbe4df;border-radius:4%;background:#dce8ef}.phone[data-model="3650"] .controls{top:51%;left:16%;width:68%;height:11%}.phone[data-model="3650"] .soft-left,.phone[data-model="3650"] .soft-right{top:0;bottom:auto;height:45%;width:30%;font-size:6cqw}.phone[data-model="3650"] .soft-left{left:0}.phone[data-model="3650"] .soft-right{right:0}.phone[data-model="3650"] .clear,.phone[data-model="3650"] .power{bottom:0;top:auto;width:28%;height:40%;background:linear-gradient(110deg,#607c93,#b6c6cc,#718b9e);color:#293f50!important;font-size:4.5cqw}.phone[data-model="3650"] .clear{left:0;right:auto}.phone[data-model="3650"] .power{right:0;color:#984d46!important}.phone[data-model="3650"] #joystick{left:35%;width:30%;height:90%;border-radius:50%;background:radial-gradient(ellipse,#2b4a68 0 26%,#d0dad8 32% 58%,#617d91 62%,#b8cace 90%)}
.phone[data-model="3650"] .keypad{display:block;top:64%;left:17%;width:66%;height:auto;aspect-ratio:1;border-radius:50%;overflow:visible;gap:0;background:radial-gradient(circle,#a9c0c9 0 25%,#55748e 26% 33%,#b8cbd0 34% 63%,#7d97a9 65% 70%,transparent 72%);box-shadow:inset 0 1px 4px #dce5e4}.phone[data-model="3650"] .keypad button{position:absolute;width:22%;height:18%;border-radius:45%;background:linear-gradient(110deg,#b1c4ca,#eef1e7 45%,#a6bcc8);border:1px solid #6d8799;box-shadow:0 2px 2px #445e72,inset 0 1px #fff8;transform:translate(-50%,-50%);flex-direction:column;gap:0}.phone[data-model="3650"] .keypad button.pressed{transform:translate(-50%,calc(-50% + 2px));box-shadow:inset 0 2px 3px #607f91}.phone[data-model="3650"] .keypad b{font-size:5cqw;line-height:1}.phone[data-model="3650"] .keypad small{font-size:2.2cqw;line-height:1.2}.phone[data-model="3650"] .keypad button[data-key="star"]{left:36%;top:50%;width:24%;height:24%;background:#b4c9cc}.phone[data-model="3650"] .keypad button[data-key="hash"]{left:64%;top:50%;width:24%;height:24%;background:#b4c9cc}
.mini.m3650{width:91px;border-color:#49657e;background:linear-gradient(110deg,#a9bdc9,#e3e9df 45%,#9fb6c4);border-radius:30px 30px 38px 38px}.mini.m3650 i{height:54px;background:#dce8ef;margin-bottom:8px}.mini.m3650 b{width:51px;height:51px;border-radius:50%;margin:auto;background:radial-gradient(circle,#b5c8ce 0 25%,#536e87 26% 35%,#d5dfdb 37% 57%,#58748c 59% 66%,#c5d5d8 68%);border:2px dotted #486279}
@media(max-width:550px) and (orientation:portrait){.phone[data-model="3650"]{width:min(96vw,calc(96dvh * .49))}}

.phone[data-model="3650"] .keypad button[data-key="1"]{left:28.84%;top:20.88%}
.phone[data-model="3650"] .keypad button[data-key="2"]{left:15.76%;top:38.88%}
.phone[data-model="3650"] .keypad button[data-key="3"]{left:15.76%;top:61.12%}
.phone[data-model="3650"] .keypad button[data-key="4"]{left:28.84%;top:79.12%}
.phone[data-model="3650"] .keypad button[data-key="5"]{left:50.00%;top:86.00%}
.phone[data-model="3650"] .keypad button[data-key="6"]{left:71.16%;top:79.12%}
.phone[data-model="3650"] .keypad button[data-key="7"]{left:84.24%;top:61.12%}
.phone[data-model="3650"] .keypad button[data-key="8"]{left:84.24%;top:38.88%}
.phone[data-model="3650"] .keypad button[data-key="9"]{left:71.16%;top:20.88%}
.phone[data-model="3650"] .keypad button[data-key="0"]{left:50.00%;top:14.00%}
/* The 3650 pad supplies all directions; remove legacy auxiliary arrow targets. */
.phone[data-model="3650"] .nav-left,.phone[data-model="3650"] .nav-right{display:none}
@media(min-width:551px){.phone[data-model="3650"]{width:auto}}
/* Extend the selection-page background with the growing, scrollable collection. */
body.choosing{height:auto;min-height:100dvh}
.mini.m3220{border-color:#a7b7ab;background:linear-gradient(90deg,#e3e9dc 12%,#36b5c7 14%,#2498b8 85%,#e3e9dc 88%)}.mini.m3220 b{background:repeating-linear-gradient(0deg,transparent 0 10px,#9daeca 11px 12px),repeating-linear-gradient(90deg,#435f86 0 14px,#9daeca 15px 16px)}
/* 3650 reference correction: navigation inside the ring, zero at upper right. */
.phone[data-model="3650"] .face{top:13%;height:42%;background:#273b49;border-radius:5%;padding:5% 3% 3%}.phone[data-model="3650"] .brand{color:#eff3e9;font-size:5cqw;margin-bottom:7%}.phone[data-model="3650"] .controls{inset:0;width:100%;height:100%;pointer-events:none}.phone[data-model="3650"] .controls button{pointer-events:auto}.phone[data-model="3650"] .soft-left,.phone[data-model="3650"] .soft-right{top:57%;height:4%;width:24%}.phone[data-model="3650"] .soft-left{left:20%}.phone[data-model="3650"] .soft-right{right:20%}.phone[data-model="3650"] .clear,.phone[data-model="3650"] .power{top:65%;width:11%;height:5%;bottom:auto}.phone[data-model="3650"] .clear{left:12%}.phone[data-model="3650"] .power{right:12%}.phone[data-model="3650"] #joystick{left:40%;top:65%;width:20%;height:10%;border-radius:25%}.phone[data-model="3650"] .keypad{top:65%}.phone[data-model="3650"] .keypad button{width:21%;height:17%;border-radius:30% 30% 45% 45%}.phone[data-model="3650"] .keypad button[data-key="star"]{left:36%;top:57%;width:21%;height:20%}.phone[data-model="3650"] .keypad button[data-key="hash"]{left:64%;top:57%;width:21%;height:20%}
/* Landscape N-Gage family, with a portrait display and reachable gaming keys. */
.phone[data-model="ngage"],.phone[data-model="ngageqd"]{width:min(96vw,1000px,170dvh);height:auto;aspect-ratio:1.94;border-radius:28% 28% 32% 32% / 46% 46% 52% 52%;border:5px solid #252e31;background:linear-gradient(120deg,#969d98,#ced0c1 40%,#727c77);box-shadow:inset 2px 3px 4px #f4f4dc,inset -3px -4px 6px #35433f,0 20px 40px #0008}
.phone[data-model="ngageqd"]{aspect-ratio:1.82;background:linear-gradient(120deg,#788073,#b0b6a5 45%,#686f64);border:7px solid #353e36;border-radius:35% / 46%}
.phone[data-model^="ngage"]:before{inset:5% 33%;border-radius:16%;background:linear-gradient(90deg,#16262e,#33434a,#14212a);box-shadow:0 0 0 7px #e2e5d4,0 0 0 10px #596962}
.phone[data-model^="ngage"] .face{top:9%;left:36%;width:28%;height:83%;padding:0;background:transparent}.phone[data-model^="ngage"] .brand{font-size:2.6cqw;color:#eef0e7;margin:0 0 8%;letter-spacing:2px}.phone[data-model^="ngage"] .glass{border:3px solid #0d1820;outline:1px solid #687a7b;padding:1%;border-radius:2%;background:#dce8ef;box-shadow:inset 0 0 6px #101d28}.phone[data-model^="ngage"] canvas{background:#dce8ef}.phone[data-model^="ngage"] .model{font-size:1.9cqw;letter-spacing:2px;color:#d9e5db;margin-top:6%}.phone[data-model^="ngage"] .top{display:none}
.phone[data-model^="ngage"] .controls{inset:0;width:100%;height:100%;display:block;pointer-events:none}.phone[data-model^="ngage"] .controls button{pointer-events:auto}.phone[data-model^="ngage"] .navi,.phone[data-model^="ngage"] .rocker{display:none}.phone[data-model^="ngage"] #joystick{display:block;position:absolute;left:12%;top:25%;width:16%;height:31%;border:2px solid #46574f;border-radius:20%;background:linear-gradient(120deg,#e6e9dc,#778b85);clip-path:polygon(30% 0,70% 0,70% 30%,100% 30%,100% 70%,70% 70%,70% 100%,30% 100%,30% 70%,0 70%,0 30%,30% 30%);touch-action:none;z-index:3}.phone[data-model^="ngage"] #joystick span{position:absolute;inset:38%;width:auto;height:auto;background:#d18b44;border-radius:50%;border:1px solid #75583a}
.phone[data-model^="ngage"] .soft-left,.phone[data-model^="ngage"] .soft-right{display:block;position:absolute;top:36%;height:22%;width:4%;font-size:3cqw;border-radius:50%;background:linear-gradient(110deg,#eef0de,#a3afa2);color:#344c56}.phone[data-model^="ngage"] .soft-left{left:29%}.phone[data-model^="ngage"] .soft-right{right:29%}.phone[data-model^="ngage"] .clear,.phone[data-model^="ngage"] .power{position:absolute;width:8%;height:9%;border-radius:35%;font-size:2cqw;background:linear-gradient(#e5e8d9,#87968d)}.phone[data-model^="ngage"] .clear{top:17%;right:13%;left:auto}.phone[data-model^="ngage"] .power{bottom:16%;left:16%;color:#ac463b!important}
.phone[data-model^="ngage"] .keypad{left:73%;top:29%;width:18%;height:46%;gap:5% 7%;background:transparent;overflow:visible}.phone[data-model^="ngage"] .keypad button{border-radius:35%;border:1px solid #475b55;background:linear-gradient(120deg,#f0efdd,#a8b7a7);box-shadow:inset 0 1px #fff8,0 2px 2px #46534b;gap:1px;flex-direction:column}.phone[data-model^="ngage"] .keypad b{font-size:2.3cqw;line-height:1}.phone[data-model^="ngage"] .keypad small{font-size:1cqw}.phone[data-model^="ngage"] .keypad button[data-key="5"],.phone[data-model^="ngage"] .keypad button[data-key="7"]{background:linear-gradient(110deg,#edb466,#bb7037)}
body:has(.phone[data-model^="ngage"]):not(.choosing) .desktop-note{display:block;left:20%;top:auto;bottom:2%;max-width:60%;text-align:center;font-size:12px}body:has(.phone[data-model^="ngage"]):not(.choosing) .desktop-note>span,body:has(.phone[data-model^="ngage"]):not(.choosing) .desktop-note a,body:has(.phone[data-model^="ngage"]):not(.choosing) .desktop-note button{display:none}
.mini.mngage,.mini.mngageqd{position:relative;width:145px;height:83px;margin-top:45px;margin-bottom:44px;padding:8px 49px;border-radius:35%;background:linear-gradient(120deg,#a4b0a2,#d1d7c4,#7b8b7d);border-color:#47564e}.mini.mngageqd{border-width:5px;background:#95a38b}.mini.mngage:before,.mini.mngageqd:before{font-size:6px;margin-bottom:3px}.mini.mngage i,.mini.mngageqd i{height:43px;width:35px;margin:0;background:#adc9d5;border:3px solid #293b44}.mini.mngage b,.mini.mngageqd b{position:absolute;right:10px;top:22px;width:26px;height:36px}.mini.mngage:after,.mini.mngageqd:after{content:'✚';position:absolute;left:12px;top:21px;font-size:28px;color:#314c49}
@media(max-height:600px) and (orientation:landscape){body:has(.phone[data-model^="ngage"]):not(.choosing) .desktop-note{display:none}.phone[data-model^="ngage"]{width:min(96vw,170dvh)}}

.phone[data-model="3650"] .keypad button[data-key="1"]{left:19.36%;top:24.29%}
.phone[data-model="3650"] .keypad button[data-key="2"]{left:10.75%;top:42.29%}
.phone[data-model="3650"] .keypad button[data-key="3"]{left:11.91%;top:62.21%}
.phone[data-model="3650"] .keypad button[data-key="4"]{left:22.55%;top:79.09%}
.phone[data-model="3650"] .keypad button[data-key="5"]{left:40.02%;top:88.74%}
.phone[data-model="3650"] .keypad button[data-key="6"]{left:59.98%;top:88.74%}
.phone[data-model="3650"] .keypad button[data-key="7"]{left:77.45%;top:79.09%}
.phone[data-model="3650"] .keypad button[data-key="8"]{left:88.09%;top:62.21%}
.phone[data-model="3650"] .keypad button[data-key="9"]{left:89.25%;top:42.29%}
.phone[data-model="3650"] .keypad button[data-key="0"]{left:80.64%;top:24.29%}.phone[data-model="ngageqd"]:after{content:'';position:absolute;inset:7% 4%;border-radius:40%;pointer-events:none;background:radial-gradient(ellipse at 0% 50%,transparent 0 14%,#e5e7d5 14.5% 24%,transparent 24.5%),radial-gradient(ellipse at 100% 50%,transparent 0 15%,#e5e7d5 15.5% 23%,transparent 23.5%);z-index:0}.phone[data-model^="ngage"] .face,.phone[data-model^="ngage"] .controls,.phone[data-model^="ngage"] .keypad{z-index:1}