:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#122d43;background:#f0f4f7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 75% 35%,#fff 0,transparent 52%)}main{max-width:1130px;margin:auto;display:grid;grid-template-columns:1.05fr 1fr;column-gap:55px;row-gap:26px;padding:35px 45px 25px}header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding-bottom:5px}.brand{font-weight:900;letter-spacing:.17em;text-decoration:none;color:#174f77;font-size:20px}.brand span{display:block;font-size:9px;letter-spacing:.26em;margin-top:8px;color:#71828f}.private-label{font-size:10px;font-weight:700;letter-spacing:.13em;color:#5b778d;display:flex;align-items:center;gap:7px;border:1px solid #d5e0e8;border-radius:20px;padding:8px 12px;background:#f9fbfc}.private-label i{width:5px;height:5px;border-radius:50%;background:#588caa}.intro{padding-top:42px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.17em;color:#577b93;margin:0 0 18px}h1{font-size:clamp(40px,5vw,60px);line-height:1.06;letter-spacing:-.055em;margin:0 0 23px}p{line-height:1.6}.lead{font-size:21px;color:#3f5e74;line-height:1.5;margin:0 0 16px}.copy{font-size:15px;max-width:385px;color:#667c8b;margin:0 0 25px}.actions,.toggles{display:flex;gap:10px;flex-wrap:wrap}.toggles{margin-top:10px}button{cursor:pointer;touch-action:manipulation;border:1px solid #cbd7e0;border-radius:9px;background:#ffffffb8;color:#173b54;padding:12px 17px;font-size:13px;font-weight:600;transition:background .2s,box-shadow .2s}button:hover{background:#e8f0f6}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #1896d4;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.primary{background:#164e78;color:white;border-color:#164e78;box-shadow:0 4px 12px #174b7220}.primary:hover{background:#0b3658}.primary span{margin-left:18px}.toggles button{font-size:12px;padding:9px 12px}.led-dot{display:inline-block;width:7px;height:7px;border:1px solid #a7bac7;border-radius:50%;margin-right:7px;background:#b2c3cc}#lights[aria-pressed=true] .led-dot{background:white;box-shadow:0 0 7px #6fc5f9;border-color:#96c1da}#status{font-size:12px;color:#6a7e8d;min-height:36px;margin:13px 0}.notes{border-top:1px solid #d6e1e8;padding-top:18px;max-width:410px}.notes h2{font-size:16px;margin:0 0 12px}.notes p{font-size:13px;line-height:1.6;color:#607889;margin:10px 0}.notes b{color:#2f526b}.notes .small{font-size:12px;color:#82919c}.handset{position:relative;text-align:center;align-self:start;padding:0 12px;isolation:isolate}.halo{position:absolute;inset:10% -15% 10%;border-radius:50%;background:radial-gradient(ellipse,#e2eef560,transparent 65%);z-index:-1;pointer-events:none}.phone{position:relative;width:min(100%,380px);margin:0 auto;filter:drop-shadow(0 18px 18px #17334c26);user-select:none;touch-action:manipulation}.shell{display:block;width:100%;height:auto;pointer-events:none}/* The image supplies the glass texture, curved rim and contact shadow. Only
   LCD ink is painted on top, so no rectangular canvas can cover the bezel. */
.display{position:absolute;left:25.306122%;top:25.545171%;width:49.591837%;height:21.806854%;display:flex;align-items:center;justify-content:center}
.lcd-glass{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:#526d72;opacity:.42;mix-blend-mode:multiply;transition:opacity .35s,color .35s}
.on.lights-on .lcd-glass{color:#f5f7f8;opacity:.62;mix-blend-mode:normal}
.display canvas{position:relative;width:92%;height:92%;image-rendering:pixelated;image-rendering:crisp-edges;visibility:hidden;opacity:.86;transition:opacity .35s}
.on .display canvas{visibility:visible}
.on.lights-on .display canvas{opacity:1}
#off{position:absolute;color:#4f686d;font-size:22px;font-weight:900;letter-spacing:.07em;opacity:.5}#off span{display:block;font-size:12px;font-weight:400;letter-spacing:.3em;margin-top:10px}.on #off{display:none}/* Shared artwork coordinates keep all four sources behind the plastic gaps.
   Screen blending retains the fascia texture; the SVG masks the opaque caps. */
#key-lights{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity 2.2s cubic-bezier(.2,.05,.4,1)}
#key-lights img{display:block;width:100%;height:100%;pointer-events:none}
.on.lights-on.keypad-lit #key-lights{opacity:1;transition-duration:.48s;transition-timing-function:cubic-bezier(.16,1,.3,1)}
.key{position:absolute;padding:0;background:transparent;border:0;border-radius:35%;color:transparent;box-shadow:none;outline-offset:0}.key:hover,.key:active{background:#d8f2ff2b;box-shadow:0 0 9px #d8f4ff70}.key:focus-visible{outline:2px solid #4fbbf1}.controls{display:flex;gap:8px;justify-content:center;margin-top:22px}.controls button{min-width:63px;padding:10px 13px}.hint{font-size:11px;color:#83929d;margin:12px 0}footer{grid-column:1/-1;border-top:1px solid #d9e3e9;padding-top:19px;display:flex;justify-content:space-between;gap:25px;font-size:11px;line-height:1.7;color:#7c8d99}footer details{max-width:720px}summary{cursor:pointer;color:#5c778c}footer a{color:#497693}.footer-mark{font-size:8px;letter-spacing:.2em;white-space:nowrap;padding-top:3px}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-width:720px){main{display:flex;flex-direction:column;padding:22px 22px 20px;gap:18px}header{width:100%;gap:12px}.brand{font-size:16px}.brand span{font-size:7px;letter-spacing:.2em}.private-label{font-size:8px;padding:7px 9px;letter-spacing:.05em}.intro{padding-top:13px}.eyebrow{font-size:9px;margin-bottom:10px}h1{font-size:34px;line-height:1.12;margin-bottom:14px}h1 br{display:none}h1 br:after{content:' '}.lead{font-size:16px;margin-bottom:14px}.lead br{display:none}.copy{display:none}.notes{display:none}.actions{gap:8px}.actions button{padding:11px 14px}.toggles{margin-top:8px}.toggles button{padding:8px 11px}#status{font-size:11px;min-height:18px;margin:12px 0 0}.handset{width:100%;padding:0;align-self:center}.phone{max-width:330px}.controls{margin-top:17px}.controls button{min-width:62px;padding:10px}footer{display:block;margin-top:8px}.footer-mark{display:block;margin-top:13px}.hint{font-size:10px}}@media(max-width:360px){main{padding-left:16px;padding-right:16px}.private-label{font-size:7px}.brand{font-size:15px}h1{font-size:30px}}

[hidden]{display:none!important}.key.pressed{background:#d8f2ff40;box-shadow:0 0 9px #d8f4ff70}.key,.dpad button{touch-action:none;-webkit-tap-highlight-color:transparent}.game-panel{display:flex;align-items:center;justify-content:center;gap:24px;margin:15px auto 0;max-width:340px}.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,44px);gap:4px;grid-template-areas:'. north .' 'west pause east' '. south .'}.dpad button{padding:0;border-radius:12px;font-size:23px;position:relative;box-shadow:0 3px 0 #cfdae2}.dpad button:active,.dpad button.pressed{transform:translateY(2px);background:#d7eaf8;box-shadow:0 1px 0 #cfdae2}.dpad small{font-size:9px;position:absolute;bottom:4px;right:6px;color:#7b91a0}.north{grid-area:north}.west{grid-area:west}.east{grid-area:east}.south{grid-area:south}.dpad .pause{grid-area:pause;font-size:10px;background:#174f77;color:#fff;border-color:#174f77}.game-options{min-width:105px;text-align:left;font-size:12px;color:#5a7488}.game-options label{display:block;font-weight:700;margin-bottom:7px}.game-options select{font:inherit;font-size:13px;color:#173b54;background:white;border:1px solid #cbd7e0;border-radius:8px;min-height:40px;padding:5px 9px;width:100%}.game-options p{font-size:11px;line-height:1.6;margin-bottom:0}.game-mode .display{touch-action:none;cursor:crosshair}#paused-label{position:absolute;z-index:2;background:#193342e8;color:#fff;border-radius:4px;padding:5px 10px;font-size:12px;letter-spacing:.06em;pointer-events:none}.game-mode .controls{display:none}.compact-layout .notes{display:none}.compact-layout .hint{margin-top:14px}.compact-layout .phone{max-width:340px}
@media(max-width:720px){.compact-layout main{gap:10px;padding-top:15px}.compact-layout .intro{padding-top:6px}.compact-layout .intro h1,.compact-layout .intro .lead,.compact-layout .eyebrow{display:none}.compact-layout .phone{width:min(100%,275px)}.compact-layout .handset{padding-top:2px}.compact-layout #status{margin-top:8px}.compact-layout .toggles{margin-top:6px}.compact-layout .game-panel{margin-top:8px;gap:20px}.compact-layout .hint{font-size:9px;margin:10px 0 0}.compact-layout footer{margin-top:5px}.compact-layout .footer-mark{display:none}}

@media(max-width:720px){.halo{inset:10% 0}}

.actions #restart:disabled{display:none}

/* Keep every LCD/keypad overlay in the artwork coordinate system. On phones,
   crop only the transparent side gutters; the complete handset stays visible. */
.phone-art{position:relative;width:100%}
@media(max-width:720px){
 main{padding-left:12px;padding-right:12px}
 .handset{min-width:0}
 .phone,.compact-layout .phone{width:100%;max-width:430px;aspect-ratio:820/1605}
 .phone-art{position:absolute;width:119.512195%;left:-9.756098%;top:0}
 .handset{overflow-x:clip;overflow-y:visible}
 .game-panel,.compact-layout .game-panel{width:100%;max-width:390px;gap:clamp(14px,5vw,28px);margin-top:14px}
 .dpad{grid-template-columns:repeat(3,clamp(52px,14vw,62px));grid-template-rows:repeat(3,48px);gap:5px}
 .dpad .pause{font-size:11px}
 .game-options{flex:1;max-width:135px;min-width:95px}
 .game-options select{min-height:44px;font-size:16px}
 .hint{padding:0 5px}
}

#sound{display:inline-flex;align-items:center;gap:10px;min-height:36px}.switch-track{display:inline-flex;align-items:center;width:32px;height:18px;border-radius:12px;background:#91a4b1;padding:2px;transition:background .2s}.switch-track span{width:14px;height:14px;border-radius:50%;background:white;box-shadow:0 1px 3px #0003;transition:transform .2s}#sound[aria-checked=true] .switch-track{background:#174f77}#sound[aria-checked=true] .switch-track span{transform:translateX(14px)}

/* Mode changes swap controls without moving or resizing the handset. */
/* Reserve room for the longest labels in each mode. Wrap whole buttons
   when the embedded iPad layout is narrow, never the text into a neighbour. */
.intro{min-width:0}
.actions{display:flex;flex-wrap:wrap;align-items:stretch}
.actions button{flex:0 0 auto;white-space:nowrap;min-width:max-content;min-height:44px}
.actions #snake,.actions #start{min-width:9.5em}
#restart[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.actions #restart:disabled{display:block}
#status{min-height:38px}
.interaction-panel{display:flow-root;min-height:180px}
.hint{min-height:28px}
@media(max-width:720px){.interaction-panel{min-height:180px}.actions button{padding-left:10px;padding-right:10px;font-size:12px}}

/* Both skins occupy the same box, independent of their native pixel size. */
.shell{aspect-ratio:980/1605;object-fit:fill}
.eyebrow{text-transform:uppercase}
.finish-picker{border:0;padding:0;margin:0 0 20px;display:flex;gap:8px;min-width:0}
.finish-picker legend{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#69808f;padding:0;margin-bottom:9px}
.finish-picker label{position:relative;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.finish-picker input{position:absolute;opacity:0;width:1px;height:1px}
.finish-chip{display:flex;align-items:center;gap:8px;min-height:43px;padding:8px 12px;border:1px solid #d1dce3;border-radius:24px;background:#ffffffa6;font-size:12px;color:#607789;transition:border-color .2s,background .2s,box-shadow .2s}
.finish-swatch{width:20px;height:20px;flex:none;border-radius:50%;border:1px solid #ffffffb3;box-shadow:0 0 0 1px #435a6825,inset 1px 1px 3px #fff5}
.finish-silver{background:linear-gradient(135deg,#f1f1ec 0%,#b8bdbe 48%,#495058 50%,#171e24 100%)}
.finish-ruby{background:linear-gradient(135deg,#fff8e8 0%,#e7ddcc 48%,#e42548 50%,#840520 100%)}
.finish-check{font-size:12px;opacity:0;width:11px;color:#174f77}
.finish-picker input:checked+.finish-chip{background:#fff;border-color:#7599b1;color:#173b54;box-shadow:0 2px 8px #174f7710}
.finish-picker input:checked+.finish-chip .finish-check{opacity:1}
.finish-picker input:focus-visible+.finish-chip{outline:3px solid #1896d4;outline-offset:3px}
.finish-picker label:hover .finish-chip{border-color:#92adbf}
.finish-status{font-size:12px;color:#8a3d40;margin:-10px 0 14px}
@media(max-width:720px){.finish-picker{margin-bottom:16px}.finish-picker legend{font-size:9px;margin-bottom:7px}.finish-chip{min-height:42px;padding:7px 11px}}

/* Handset-first touch layout: no duplicate navigation or reserved empty panel. */
.interaction-panel{min-height:0}
.hint{min-height:0;margin:10px 0 0;line-height:1.5}
.toggles button{min-height:44px}
@media(min-width:721px) and (max-width:960px){
 main{padding:28px 24px 22px;column-gap:24px;grid-template-columns:1fr 1fr}
 .intro{padding-top:20px}
 h1{font-size:36px}
 .lead{font-size:18px}
 .handset{padding:0}
 .notes{margin-top:22px}
}
@media(max-width:720px){
 main{padding-top:18px;gap:14px}
 .intro{padding-top:4px}
 h1{font-size:28px;line-height:1.12;margin-bottom:14px}
 .lead{display:none}
 .eyebrow{margin-bottom:8px}
 .finish-picker{margin-bottom:12px}
 .finish-chip{min-height:44px}
 .actions{gap:8px}
 .actions button{font-size:13px;min-height:44px;padding:10px 12px}
 .actions #snake,.actions #start{flex:1 0 auto}
 .toggles{gap:8px}
 .toggles button{min-height:44px}
 #status{min-height:0;margin:10px 0 0}
 .interaction-panel{min-height:0}
 .phone,.compact-layout .phone{max-width:380px}
 .hint{font-size:11px;margin-top:8px}
 footer{margin-top:4px}
}

/* Quiet live diagnostics; fixed line height and no screen-reader chatter. */
.emulator-trace{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;line-height:1.5;letter-spacing:.015em;color:#526b7d;margin:4px 0 20px;min-height:15px;white-space:normal;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#status{margin-bottom:0;min-height:0}
@media(max-width:720px){.emulator-trace{font-size:9px;margin:5px 0 0;min-height:14px}}

/* Safari must leave handset holds with the keypad, not its touch callout. */
.phone,.key{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}