/* ===================================================
   33SNAKE - Retro HTML5 Experience
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0d090a;
    font-family: 'Press Start 2P', monospace, sans-serif;
    color: #e0d0c0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ambient Cozy Room / Fireplace Glow Effect */
.game-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 75% 65%, rgba(255, 90, 20, 0.15) 0%, rgba(13, 9, 10, 0.95) 70%);
}

/* 9:16 Aspect-Ratio Preserving Container */
.phone-wrapper {
    position: relative;
    height: 100%;
    max-height: 100vh;
    max-width: 100vw;
    aspect-ratio: 571 / 1024;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(230, 90, 20, 0.1);
    border-radius: 12px;
    overflow: hidden;
    background-color: #1a1617;
}

/* Background pixel-art phone artwork */
.phone-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    display: block;
    pointer-events: none;
}

/* ===================================================
   LCD Screen Display Overlay
   =================================================== */
.lcd-container {
    position: absolute;
    left: 29.42%;
    top: 30.86%;
    width: 40.98%;
    height: 16.6%;
    background-color: #879a39;
    border-radius: 3px 3px 6px 6px;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.65), inset 0 0 10px rgba(20, 34, 11, 0.3);
}

/* Actual 84x48 HTML5 Canvas stretched pixel-perfect */
#lcdScreen {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Realistic Dot-Matrix & Glass Reflection Overlay */
.lcd-grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: 
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.08) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
    background-size: 100% 2px, 3px 100%;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.2);
}

/* ===================================================
   Interactive Keypad Buttons
   =================================================== */
.keypad-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.phone-btn {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
    touch-action: manipulation;
    transition: background 0.08s ease, transform 0.05s ease, box-shadow 0.08s ease;
}

/* Subtle visual feedback on hover/touch */
.phone-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.15);
}

.phone-btn:active,
.phone-btn.active {
    background: rgba(255, 255, 255, 0.22) !important;
    transform: scale(0.95);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.35) !important;
}

/* Individual Button Positions */
/* Navi Key (Center pill) */
.btn-navi {
    left: 36.5%;
    top: 49.0%;
    width: 27.0%;
    height: 5.2%;
    border-radius: 16px;
}

/* C Key (Clear / Back) */
.btn-c {
    left: 27.5%;
    top: 54.2%;
    width: 14.5%;
    height: 5.5%;
    border-radius: 12px;
}

/* Rocker Key (Right Navigation) */
.btn-rocker {
    left: 58.0%;
    top: 54.2%;
    width: 14.5%;
    height: 5.5%;
    border-radius: 12px;
}

/* Row 1 */
.btn-1 {
    left: 26.5%;
    top: 61.0%;
    width: 13.5%;
    height: 4.8%;
    border-radius: 10px;
}
.btn-2 {
    left: 43.2%;
    top: 62.0%;
    width: 13.5%;
    height: 4.8%;
    border-radius: 10px;
}
.btn-3 {
    left: 60.0%;
    top: 61.0%;
    width: 13.5%;
    height: 4.8%;
    border-radius: 10px;
}

/* Row 2 */
.btn-4 {
    left: 27.0%;
    top: 67.0%;
    width: 13.5%;
    height: 4.8%;
    border-radius: 10px;
}
.btn-5 {
    left: 43.2%;
    top: 68.0%;
    width: 13.5%;
    height: 4.8%;
    border-radius: 10px;
}
.btn-6 {
    left: 59.5%;
    top: 67.0%;
    width: 13.5%;
    height: 4.8%;
    border-radius: 10px;
}

/* Row 3 */
.btn-7 {
    left: 27.5%;
    top: 73.0%;
    width: 13.5%;
    height: 4.8%;
    border-radius: 10px;
}
.btn-8 {
    left: 43.2%;
    top: 74.0%;
    width: 13.5%;
    height: 4.8%;
    border-radius: 10px;
}
.btn-9 {
    left: 59.0%;
    top: 73.0%;
    width: 13.5%;
    height: 4.8%;
    border-radius: 10px;
}

/* Row 4 */
.btn-star {
    left: 28.5%;
    top: 79.0%;
    width: 13.5%;
    height: 4.8%;
    border-radius: 10px;
}
.btn-0 {
    left: 43.2%;
    top: 80.0%;
    width: 13.5%;
    height: 4.8%;
    border-radius: 10px;
}
.btn-hash {
    left: 58.0%;
    top: 79.0%;
    width: 13.5%;
    height: 4.8%;
    border-radius: 10px;
}

/* Responsive adjust for mobile viewports */
@media (max-height: 700px) {
    .phone-wrapper {
        height: 100vh;
        border-radius: 0;
    }
}