diff --git a/assets/styles.css b/assets/styles.css
index e3a0bad..361bd82 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -1397,3 +1397,595 @@ simple-boost {
 /* ========================================
    VERSION BUTTON & MODAL STYLES - END
    ======================================== */
+
+/* ========================================
+   MOBILE RESPONSIVE STYLES - START
+   Supports portrait (rotated) and landscape modes
+   ======================================== */
+
+/* ----------------------------------------
+   MOBILE LANDSCAPE MODE
+   For phones held sideways (short height, moderate width)
+   Scale player proportionally to fit viewport
+   ---------------------------------------- */
+@media (max-width: 900px) and (max-height: 500px) {
+    body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        min-height: 100vh;
+        overflow: hidden;
+    }
+    
+    .player {
+        /* Scale entire player to fit viewport height */
+        transform: perspective(1000px) rotateX(1deg) scale(0.85);
+        transform-origin: center center;
+        width: calc(100vw - 10px);
+        max-width: 700px; /* Slightly larger since we're scaling down */
+        padding: 50px 20px 20px 20px;
+    }
+    
+    /* Scale display area */
+    .display {
+        padding: 10px;
+        margin-top: 10px;
+        margin-bottom: 12px;
+    }
+    
+    .display-text {
+        font-size: 14px;
+    }
+    
+    .time-display {
+        font-size: 18px;
+        letter-spacing: 2px;
+    }
+    
+    /* Scale cassette */
+    .cassette {
+        padding: 12px;
+        margin-bottom: 12px;
+    }
+    
+    .cassette-label {
+        padding: 8px;
+        margin-bottom: 10px;
+        font-size: 11px;
+    }
+    
+    /* Scale tape window and reels */
+    .tape-window {
+        width: 280px;
+        height: 60px;
+    }
+    
+    .reel {
+        width: 60px;
+        height: 60px;
+    }
+    
+    .reel-left {
+        left: 20px;
+    }
+    
+    .reel-right {
+        right: 20px;
+    }
+    
+    .reel-inner {
+        width: 45px;
+        height: 45px;
+        margin-left: -22.5px;
+        margin-top: -22.5px;
+    }
+    
+    /* Scale control buttons - maintain touch-friendly size */
+    .controls {
+        gap: 8px;
+        margin-bottom: 10px;
+    }
+    
+    .btn {
+        width: 50px;
+        height: 50px;
+        border-width: 4px;
+    }
+    
+    /* Scale button icons */
+    .btn-prev::before {
+        border-right-width: 10px;
+        border-top-width: 6px;
+        border-bottom-width: 6px;
+        margin-right: 6px;
+    }
+    
+    .btn-prev::after {
+        height: 12px;
+        margin-left: -10px;
+    }
+    
+    .btn-play::before {
+        border-left-width: 16px;
+        border-top-width: 10px;
+        border-bottom-width: 10px;
+    }
+    
+    .btn-pause::before {
+        width: 16px;
+        height: 20px;
+        border-left-width: 5px;
+        border-right-width: 5px;
+    }
+    
+    .btn-stop::before {
+        width: 16px;
+        height: 16px;
+    }
+    
+    .btn-next::before {
+        border-left-width: 10px;
+        border-top-width: 6px;
+        border-bottom-width: 6px;
+        margin-left: -6px;
+    }
+    
+    .btn-next::after {
+        height: 12px;
+        margin-left: 10px;
+    }
+    
+    /* Scale volume control */
+    .volume-control {
+        gap: 10px;
+    }
+    
+    .volume-label {
+        font-size: 14px;
+    }
+    
+    input[type="range"] {
+        width: 150px;
+        height: 10px;
+    }
+    
+    input[type="range"]::-webkit-slider-thumb {
+        width: 20px;
+        height: 20px;
+    }
+    
+    input[type="range"]::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+    }
+    
+    /* Scale top buttons */
+    .eject-btn,
+    .lightning-btn {
+        top: 10px;
+        width: 40px;
+        height: 28px;
+    }
+    
+    .eject-btn {
+        left: 20px;
+    }
+    
+    .lightning-btn {
+        right: 20px;
+        font-size: 14px;
+    }
+    
+    .eject-btn::before {
+        border-left-width: 6px;
+        border-right-width: 6px;
+        border-bottom-width: 8px;
+        top: 5px;
+    }
+    
+    .eject-btn::after {
+        width: 14px;
+        height: 2px;
+        bottom: 5px;
+    }
+    
+    /* Scale version button */
+    .version-btn {
+        bottom: 5px;
+        right: 8px;
+        font-size: 8px;
+    }
+    
+    /* Modals in landscape */
+    .alby-panel {
+        width: 320px;
+        max-height: 85vh;
+    }
+    
+    .version-modal {
+        width: 240px;
+    }
+}
+
+/* ----------------------------------------
+   MOBILE PORTRAIT MODE
+   For phones held upright (narrow width, tall height)
+   Only the cassette/tape rotates 90 degrees - everything else stays horizontal
+   Layout: [E][L] -> Screen -> ROTATED TAPE -> Controls -> Volume
+   ---------------------------------------- */
+@media (max-width: 500px) and (min-height: 600px) {
+    html, body {
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+    
+    body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px;
+        min-height: 100vh;
+    }
+    
+    .player {
+        /* Player stays horizontal, just scaled to fit width */
+        width: calc(100vw - 20px);
+        max-width: 390px;
+        /* Increased vertical padding to fill screen better */
+        padding: 55px 15px 25px 15px;
+        /* Remove the 3D perspective tilt on mobile for cleaner look */
+        transform: none;
+        /* Scale down border for mobile */
+        border-width: 6px;
+        /* Contain the ::before pseudo-element */
+        overflow: hidden;
+    }
+    
+    /* Fix background texture scaling */
+    .player::before {
+        background-size: cover;
+    }
+    
+    /* Scale display for portrait - stays horizontal */
+    .display {
+        padding: 12px;
+        margin-top: 12px;
+        margin-bottom: 45px;
+    }
+    
+    .display-text {
+        font-size: 12px;
+        letter-spacing: 1px;
+    }
+    
+    .time-display {
+        font-size: 16px;
+        letter-spacing: 2px;
+    }
+    
+    /* ----------------------------------------
+       CASSETTE - SCALED TO FIT WIDTH
+       Horizontal layout, scaled down for portrait
+       ---------------------------------------- */
+    .cassette {
+        padding: 12px;
+        margin-bottom: 45px;
+    }
+    
+    .cassette-label {
+        padding: 10px;
+        margin-bottom: 12px;
+        font-size: 10px;
+    }
+    
+    /* Tape window scaled to fit portrait width */
+    .tape-window {
+        width: calc(100% - 20px);
+        max-width: 280px;
+        height: 55px;
+    }
+    
+    .reel {
+        width: 55px;
+        height: 55px;
+    }
+    
+    .reel-left {
+        left: 18px;
+    }
+    
+    .reel-right {
+        right: 18px;
+    }
+    
+    .reel-inner {
+        width: 42px;
+        height: 42px;
+        margin-left: -21px;
+        margin-top: -21px;
+    }
+    
+    /* Scale the entire reel (including tape-wound set by JS) */
+    .reel {
+        transform: translateY(-50%) scale(0.7);
+    }
+    
+    /* Control buttons - stays horizontal, scaled for touch */
+    .controls {
+        gap: 10px;
+        margin-bottom: 20px;
+    }
+    
+    .btn {
+        width: 52px;
+        height: 52px;
+        border-width: 4px;
+    }
+    
+    /* Scale button icons for portrait */
+    .btn-prev::before {
+        border-right-width: 9px;
+        border-top-width: 6px;
+        border-bottom-width: 6px;
+        margin-right: 6px;
+    }
+    
+    .btn-prev::after {
+        height: 12px;
+        margin-left: -9px;
+    }
+    
+    .btn-play::before {
+        border-left-width: 14px;
+        border-top-width: 9px;
+        border-bottom-width: 9px;
+    }
+    
+    .btn-pause::before {
+        width: 14px;
+        height: 18px;
+        border-left-width: 5px;
+        border-right-width: 5px;
+    }
+    
+    .btn-stop::before {
+        width: 14px;
+        height: 14px;
+    }
+    
+    .btn-next::before {
+        border-left-width: 9px;
+        border-top-width: 6px;
+        border-bottom-width: 6px;
+        margin-left: -6px;
+    }
+    
+    .btn-next::after {
+        height: 12px;
+        margin-left: 9px;
+    }
+    
+    /* Volume control - stays horizontal */
+    .volume-control {
+        margin-top: 30px;
+        gap: 10px;
+    }
+    
+    .volume-label {
+        font-size: 12px;
+    }
+    
+    input[type="range"] {
+        width: 120px;
+        height: 10px;
+    }
+    
+    input[type="range"]::-webkit-slider-thumb {
+        width: 24px;
+        height: 24px;
+    }
+    
+    input[type="range"]::-moz-range-thumb {
+        width: 24px;
+        height: 24px;
+    }
+    
+    /* Top buttons - scaled */
+    .eject-btn,
+    .lightning-btn {
+        top: 10px;
+        width: 40px;
+        height: 28px;
+    }
+    
+    .eject-btn {
+        left: 15px;
+    }
+    
+    .lightning-btn {
+        right: 15px;
+        font-size: 14px;
+    }
+    
+    .eject-btn::before {
+        border-left-width: 6px;
+        border-right-width: 6px;
+        border-bottom-width: 8px;
+        top: 5px;
+    }
+    
+    .eject-btn::after {
+        width: 14px;
+        height: 2px;
+        bottom: 5px;
+    }
+    
+    /* Version button */
+    .version-btn {
+        bottom: 4px;
+        right: 6px;
+        font-size: 8px;
+    }
+    
+    /* ----------------------------------------
+       MODALS IN PORTRAIT MODE
+       ---------------------------------------- */
+    .alby-panel {
+        width: calc(100vw - 30px);
+        max-width: 360px;
+        max-height: calc(100vh - 40px);
+    }
+    
+    .version-modal {
+        width: calc(100vw - 40px);
+        max-width: 280px;
+    }
+    
+    .close-video {
+        top: 15px;
+        right: 15px;
+        width: 44px;
+        height: 44px;
+        font-size: 28px;
+    }
+}
+
+/* ----------------------------------------
+   VERY SMALL PORTRAIT (iPhone SE, etc.)
+   Additional scaling for smaller devices
+   ---------------------------------------- */
+@media (max-width: 380px) and (min-height: 600px) {
+    .player {
+        width: calc(100vw - 16px);
+        padding: 40px 10px 10px 10px;
+    }
+    
+    /* Smaller cassette for tiny screens */
+    .cassette {
+        padding: 8px;
+        margin-bottom: 12px;
+    }
+    
+    .tape-window {
+        width: calc(100% - 16px);
+        max-width: 240px;
+        height: 48px;
+    }
+    
+    .reel {
+        width: 48px;
+        height: 48px;
+        transform: translateY(-50%) scale(0.6);
+    }
+    
+    .reel-left {
+        left: 15px;
+    }
+    
+    .reel-right {
+        right: 15px;
+    }
+    
+    .reel-inner {
+        width: 36px;
+        height: 36px;
+        margin-left: -18px;
+        margin-top: -18px;
+    }
+    
+    .btn {
+        width: 44px;
+        height: 44px;
+    }
+    
+    .controls {
+        gap: 5px;
+    }
+    
+    input[type="range"] {
+        width: 90px;
+    }
+    
+    .eject-btn,
+    .lightning-btn {
+        width: 34px;
+        height: 24px;
+    }
+    
+    .eject-btn {
+        left: 10px;
+    }
+    
+    .lightning-btn {
+        right: 12px;
+        font-size: 12px;
+    }
+}
+
+/* ----------------------------------------
+   TABLET PORTRAIT MODE
+   For tablets held upright - no rotation, just scale
+   ---------------------------------------- */
+@media (min-width: 501px) and (max-width: 768px) {
+    .player {
+        width: calc(100vw - 40px);
+        max-width: 600px;
+    }
+}
+
+/* ----------------------------------------
+   TOUCH DEVICE ENHANCEMENTS
+   Better hover states and touch feedback
+   ---------------------------------------- */
+@media (hover: none) and (pointer: coarse) {
+    /* Touch devices don't need hover state changes */
+    .btn:hover,
+    .eject-btn:hover,
+    .lightning-btn:hover,
+    .alby-btn:hover,
+    .alby-boost-btn:hover,
+    .alby-close-btn:hover,
+    .version-btn:hover,
+    .version-close-btn:hover {
+        /* Reset hover-specific box-shadow to default state */
+        box-shadow: inherit;
+    }
+    
+    /* Larger touch targets for interactive elements */
+    .alby-close-btn,
+    .version-close-btn {
+        min-width: 44px;
+        min-height: 44px;
+    }
+    
+    .alby-btn {
+        min-width: 44px;
+        min-height: 44px;
+    }
+    
+    /* Ensure checkbox is easily tappable */
+    .alby-checkbox-label {
+        padding: 10px 5px;
+    }
+    
+    .alby-checkbox-label input[type="checkbox"] {
+        width: 24px;
+        height: 24px;
+    }
+}
+
+/* ----------------------------------------
+   PREVENT ZOOM ON INPUT FOCUS (iOS)
+   iOS zooms when focusing inputs with font-size < 16px
+   ---------------------------------------- */
+@media (max-width: 900px) {
+    .alby-input,
+    .alby-textarea {
+        font-size: 16px;
+    }
+}
+
+/* ========================================
+   MOBILE RESPONSIVE STYLES - END
+   ======================================== */