/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Page ───────────────────────────────────────── */
html, body {
    height: 100%;
    overflow: hidden;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    background-color: #111;
    background-image: radial-gradient(circle, #222 1px, transparent 1px);
    background-size: 22px 22px;
    font-family: Arial, Helvetica, sans-serif;
}

/* ══════════════════════════════════════════════════
   PHONE BODY  –  Nokia 3310 SVG shell
   SVG viewBox: 128.4 × 300
   Phone at 356 px wide → height = 356 × (300/128.4) = 832 px
   LCD area: left 14.7%, top 27.65%, width 70.7%, height 20.73%
   At 356 px: LCD width ≈ 252 px  = canvas native width  ✓
══════════════════════════════════════════════════ */
.phone {
    position: relative;
    width: 356px;
    height: 832px;
    -webkit-tap-highlight-color: transparent;
}

/* SVG phone body – purely decorative, no pointer events */
.phone-svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* ── Game canvas ──────────────────────────────────
   Centred horizontally in the LCD frame (LCD ≈ 252 px wide).
   Centred vertically: LCD frame is 172 px tall, canvas 144 px
   → (172 - 144) / 2 = 14 px ≈ 1.68% extra top offset.
   total top: 27.65% + 1.68% ≈ 29.3%
────────────────────────────────────────────────── */
#gameCanvas {
    position: absolute;
    left: 14.7%;
    top: 29.3%;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

/* ── Transparent interactive overlays ────────────
   All positioned as % of the 356 × 832 phone container.
   Buttons are invisible – the SVG provides all visuals.
────────────────────────────────────────────────── */
.ov-btn {
    position: absolute;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: transparent;
    font-size: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    outline: none;
}

/* Debug: uncomment to visualise hit zones
.ov-btn { background: rgba(255,0,0,.18); border: 1px solid red; }
*/

/* ── Soft keys ─────────────────────────────────── */
#btnMenu { left:  3%;  top: 54%; width: 23%; height: 8%; }
#btnBack { left: 74%;  top: 54%; width: 23%; height: 8%; }

/* ── Navigation d-pad ───────────────────────────── */
#btnUp    { left: 38%; top: 47%; width: 24%; height:  7%; }
#btnLeft  { left: 26%; top: 52%; width: 15%; height:  9%; }
#btnOk    { left: 38%; top: 51%; width: 24%; height: 10%; }
#btnRight { left: 59%; top: 52%; width: 15%; height:  9%; }
#btnDown  { left: 38%; top: 59%; width: 24%; height:  7%; }

/* ── Numeric keypad – 3 × 4 grid ─────────────────
   Column centres (% of 128.4-unit SVG width):
     L 19.3 %  →  left = 19.3 − 7.5 = 11.8 %
     C 50.0 %  →  left = 50   − 7.5 = 42.5 %
     R 82.6 %  →  left = 82.6 − 7.5 = 75.1 %

   Row centres (% of 300-unit SVG height):
     R1 67.4 %  →  top = 67.4 − 3 = 64.4 %
     R2 75.3 %  →  top = 75.3 − 3 = 72.3 %
     R3 82.7 %  →  top = 82.7 − 3 = 79.7 %
     R4 89.7 %  →  top = 89.7 − 3 = 86.7 %

   Buttons are the 8th–19th <button> children of .phone.
   (img and canvas are not buttons; the 7 nav/soft-key buttons
    come first, so numpad starts at nth-of-type(8).)
────────────────────────────────────────────────── */
.key {
    position: absolute;
    width: 15%;
    height: 6%;
}

.phone > button:nth-of-type(8)  { left: 11.8%; top: 64.4%; } /* 1   */
.phone > button:nth-of-type(9)  { left: 42.5%; top: 64.4%; } /* 2   */
.phone > button:nth-of-type(10) { left: 75.1%; top: 64.4%; } /* 3   */
.phone > button:nth-of-type(11) { left: 11.8%; top: 72.3%; } /* 4   */
.phone > button:nth-of-type(12) { left: 42.5%; top: 72.3%; } /* 5   */
.phone > button:nth-of-type(13) { left: 75.1%; top: 72.3%; } /* 6   */
.phone > button:nth-of-type(14) { left: 11.8%; top: 79.7%; } /* 7   */
.phone > button:nth-of-type(15) { left: 42.5%; top: 79.7%; } /* 8   */
.phone > button:nth-of-type(16) { left: 75.1%; top: 79.7%; } /* 9   */
.phone > button:nth-of-type(17) { left: 11.8%; top: 86.7%; } /* *   */
.phone > button:nth-of-type(18) { left: 42.5%; top: 86.7%; } /* 0   */
.phone > button:nth-of-type(19) { left: 75.1%; top: 86.7%; } /* #   */

/* ══════════════════════════════════════════════════
   UI CONTROL BAR  (zoom + view toggle)
══════════════════════════════════════════════════ */
.ui-bar {
    position: fixed;
    bottom: 18px;
    right: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
    z-index: 100;
}

.ui-btn {
    width: 34px;
    height: 34px;
    background: rgba(15, 15, 70, 0.85);
    color: #aac;
    border: 1px solid rgba(80, 80, 200, 0.5);
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,.55);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-transition: background .15s, color .15s;
            transition: background .15s, color .15s;
}
.ui-btn--wide {
    width: auto;
    padding: 0 10px;
    font-size: 11px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: .5px;
}
.ui-btn:hover  { background: rgba(30, 30, 130, 0.9); color: #eef; }
.ui-btn:active { background: rgba(50, 50, 170, 0.9); }

/* ══════════════════════════════════════════════════
   SCREEN-ONLY MODE
   Hide the SVG shell and all overlays; show bare canvas.
══════════════════════════════════════════════════ */
.phone.screen-only {
    width: auto;
    height: auto;
}

.phone.screen-only .phone-svg,
.phone.screen-only .ov-btn {
    display: none;
}

.phone.screen-only #gameCanvas {
    position: static;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 6px #05050e, 0 0 0 8px #2020a0;
}