html, body {
            margin: 0; background: #111; color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overscroll-behavior: none;
        }
        body {
            display: flex; justify-content: center; 
            min-height: 100vh; overflow-y: auto;
            -webkit-tap-highlight-color: transparent;
        }
        
        #full-app {
            display: flex; flex-direction: column; align-items: center; padding: 20px 0;
        }

        #tv-container {
            width: 860px; 
            height: 660px;
            background: url('images/tv.png') center/100% 100% no-repeat;
            display: flex; justify-content: center; align-items: center;
            border-radius: 20px;
            box-shadow:none;
        }

        /* Larger on roomy desktops; mobile/touch rules below still win */
        @media (min-width: 1100px) and (min-height: 820px) {
            body:not(.touch-ui) #tv-container {
                width: 1032px;
                height: 792px;
            }
        }
        @media (min-width: 1400px) and (min-height: 980px) {
            body:not(.touch-ui) #tv-container {
                width: 1161px;
                height: 891px;
            }
        }

        #game-container { position: relative; width: 800px; height: 600px; box-shadow:none; }
        body:not(.touch-ui) #game-container {
            width: 93.023%;
            height: 90.909%;
        }
        canvas { display: block; width: 100%; height: 100%; background-color: #051a05; }

        .store-link {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 20;
            pointer-events: auto;
            background: rgba(0, 0, 0, 0.75);
            border: 2px solid #ffcc00;
            color: #ffcc00;
            font-weight: bold;
            font-size: 13px;
            padding: 6px 12px;
            border-radius: 5px;
            text-decoration: none;
        }
        .store-link:hover { background: rgba(40, 40, 0, 0.9); color: #fff; }
        body.in-battle .store-link,
        body.hide-pad.in-battle .store-link,
        body.in-battle .achievements-bar { display: none; }

        .achievements-bar {
            position: absolute;
            top: 46px;
            right: 10px;
            z-index: 20;
            display: flex;
            gap: 6px;
            pointer-events: auto;
            background: rgba(0,0,0,0.65);
            border: 2px solid #444;
            border-radius: 6px;
            padding: 5px;
        }
        .ach-slot {
            position: relative;
            width: 32px; height: 32px;
            border-radius: 6px;
            border: 1px solid #333;
            background: #1a1a1a;
            color: #333;
            font-size: 16px;
            line-height: 30px;
            text-align: center;
            padding: 0;
            cursor: pointer;
            filter: grayscale(1) brightness(0.45);
            opacity: 0.55;
        }
        .ach-slot.on {
            filter: none;
            opacity: 1;
            color: #fff;
            border-color: #ffcc00;
            box-shadow: 0 0 8px rgba(255, 204, 0, 0.45);
        }
        .ach-tip {
            display: none;
            position: absolute;
            right: 0;
            top: 38px;
            width: 180px;
            background: rgba(0,0,0,0.92);
            border: 1px solid #ffcc00;
            color: #eee;
            font-size: 11px;
            line-height: 1.35;
            padding: 8px;
            border-radius: 5px;
            text-align: left;
            z-index: 30;
            pointer-events: none;
            white-space: normal;
        }
        .ach-slot:hover .ach-tip,
        .ach-slot:focus .ach-tip,
        .ach-slot.show-tip .ach-tip { display: block; }

        .ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
        .active-ui { display: block; }
        .active-ui.flex-ui { display: flex; }
        .flex-ui { flex-direction: column; justify-content: center; align-items: center; }
        .overlay-bg { background: rgba(0,0,0,0.85); pointer-events: auto; }
        
        .menu-title { font-size: 60px; font-weight: bold; color: #00bfff; text-shadow: 4px 4px 0px #005577; margin-bottom: 6px; }
        .ver-tag { font-size: 14px; font-weight: bold; color: #ffcc00; letter-spacing: 3px; margin-bottom: 16px; text-shadow: 2px 2px 0 #000; }
        .btn { background: #ffaa00; border: 2px solid #fff; padding: 12px 24px; font-size: 18px; font-weight: bold; cursor: pointer; border-radius: 5px; color: black; margin: 5px; transition: opacity 0.2s; }
        .btn:hover:not(:disabled) { background: #ffcc00; }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .modal-box { background: #222; border: 4px solid #fff; padding: 30px; border-radius: 10px; text-align: center; pointer-events: auto; }
        .name-input { padding: 10px; font-size: 18px; margin-bottom: 25px; border-radius: 5px; border: 2px solid #fff; background: #333; color: white; text-align: center; pointer-events: auto; }

        #world-ui { padding: 10px; }
        .hud-card { width: 220px; background: #333; border: 2px solid #555; border-radius: 5px; padding: 10px; pointer-events: auto; }
        .hp-container { background: #444; height: 12px; width: 100%; margin: 5px 0; border: 1px solid #000; overflow: hidden; }
        .hp-bar { height: 100%; background: #00ff00; width: 100%; transition: width 0.3s; }
        .exp-bar { height: 100%; background: #00bfff; width: 0%; transition: width 0.3s; }
        .stat-badge { display: inline-block; background: #555; padding: 2px 5px; border-radius: 3px; font-size: 11px; margin-right: 3px; }

        .daily-quest {
            width: 220px;
            margin-top: 8px;
            background: #2a2a2a;
            border: 2px solid #556677;
            border-radius: 5px;
            pointer-events: auto;
            box-sizing: border-box;
        }
        .daily-toggle {
            width: 100%;
            background: #333;
            color: #9ad;
            border: none;
            border-bottom: 1px solid #445;
            padding: 7px 10px;
            font-size: 12px;
            font-weight: bold;
            text-align: left;
            cursor: pointer;
        }
        .daily-toggle:hover { color: #cff; }
        .daily-body { padding: 8px 10px 10px; }
        .daily-quest.collapsed .daily-body { display: none; }
        #daily-text { font-size: 12px; color: #ddd; line-height: 1.35; margin-bottom: 6px; }
        .daily-progress { background: #111; height: 8px; border: 1px solid #000; overflow: hidden; border-radius: 3px; }
        #daily-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #00bfff, #66ff99); transition: width 0.25s; }
        #daily-count { font-size: 10px; color: #aaa; text-align: right; margin-top: 4px; }

        .combat-stats { position: absolute; width: 190px; background: rgba(0,0,0,0.82); border: 2px solid white; padding: 10px; border-radius: 5px; pointer-events: auto; }
        /* Both nameplates under their fighters (Pokémon-style bottom row) */
        #p-battle-card { bottom: 88px; left: 48px; }
        #e-battle-card { bottom: 88px; right: 48px; top: auto; }

        .battle-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
            margin-top: 8px;
        }
        .battle-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            min-height: 52px;
            padding: 6px 4px;
            background: #ffaa00;
            border: 2px solid #fff;
            border-radius: 6px;
            color: #111;
            font-weight: bold;
            font-size: 11px;
            cursor: pointer;
            line-height: 1.1;
        }
        .battle-btn .b-ico { font-size: 18px; line-height: 1; }
        .battle-btn:hover:not(:disabled) { background: #ffcc00; }
        .battle-btn:disabled { opacity: 0.45; cursor: not-allowed; }
        .battle-btn.heal { background: #28a745; color: #fff; }
        .battle-btn.heal:hover:not(:disabled) { background: #33c75a; }
        .battle-btn.run { background: #444; color: #fff; }
        .battle-btn.run:hover:not(:disabled) { background: #666; }
        .battle-btn.skills { background: #5a3dbb; color: #fff; }
        .battle-btn.skills:hover:not(:disabled) { background: #6f52d6; }

        /* Desktop: roomier action panel */
        body:not(.touch-ui) #p-battle-card {
            width: 280px;
            padding: 12px 14px;
        }
        body:not(.touch-ui) #e-battle-card {
            width: 220px;
            padding: 12px 14px;
        }
        body:not(.touch-ui) #p-battle-card .battle-actions {
            gap: 8px;
            margin-top: 10px;
        }
        body:not(.touch-ui) #p-battle-card .battle-btn {
            min-height: 68px;
            padding: 10px 6px;
            font-size: 13px;
            border-radius: 8px;
        }
        body:not(.touch-ui) #p-battle-card .battle-btn .b-ico { font-size: 24px; }
        body:not(.touch-ui) #move-menu {
            bottom: 100px;
            left: 350px;
            width: 220px;
        }
        body:not(.touch-ui) #move-menu .move-btn {
            padding: 11px 8px;
            font-size: 15px;
        }
        
        #move-menu { position: absolute; bottom: 110px; left: 280px; width: 180px; background: rgba(0,0,0,0.9); border: 2px solid #00bfff; padding: 10px; border-radius: 5px; pointer-events: auto; display: none; }
        .move-btn { width: 100%; padding: 8px; font-size: 14px; margin-bottom: 5px; background: #fff; border: 1px solid #000; cursor: pointer; font-weight: bold; }
        .move-btn:hover:not(:disabled) { background: #00bfff; color: white; }

        #battle-log { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.9); border: 2px solid white; padding: 12px; width: 420px; text-align: center; font-size: 16px; border-radius: 5px; }

        .bag-modal { padding: 22px 24px; }
        .bag-shell {
            position: relative;
            background: linear-gradient(180deg, #6b4226 0%, #4a2e18 100%);
            border: 4px solid #2a180c;
            border-radius: 18px 18px 22px 22px;
            padding: 18px 14px 16px;
            margin: 12px auto;
            width: 200px;
            box-shadow: inset 0 0 0 3px #8a5a32, 0 8px 0 #1a1008;
        }
        .bag-flap {
            position: absolute;
            top: -14px; left: 50%;
            transform: translateX(-50%);
            width: 120px; height: 22px;
            background: #5a3618;
            border: 3px solid #2a180c;
            border-radius: 12px 12px 4px 4px;
        }
        .bag-strap {
            width: 70px; height: 8px;
            margin: 8px auto 0;
            background: #2a180c;
            border-radius: 4px;
        }
        .inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 15px 0; justify-items: center; }
        .bag-grid { margin: 0; gap: 10px; }
        .inv-slot {
            width: 70px; height: 70px; background: rgba(30, 18, 8, 0.85);
            border: 2px solid #c4a574; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; cursor: pointer; color: #f0e0c0;
            box-shadow: inset 0 0 8px rgba(0,0,0,0.55);
        }
        .inv-slot.selected { border-color: #00ff00; background: rgba(40, 60, 20, 0.9); }

        .death-quote {
            color: #ffcc66;
            font-size: 14px;
            font-style: italic;
            max-width: 320px;
            margin: 8px auto 0;
            line-height: 1.4;
        }
        
        .control-guide {
            width: 220px;
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid #444;
            border-radius: 5px;
            padding: 10px;
            font-size: 11px;
            color: #bbb;
            line-height: 1.6;
            pointer-events: auto;
        }

        .touch-hint { display: none; color: #ffcc00; }

        /* Desktop: pad hidden, TV stays. Touch devices get .touch-ui from JS. */
        #mobile-controls { display: none; }

        #controller-container, #action-container {
            width: 200px;
            height: 190px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .action-cluster {
            position: relative;
            width: 200px;
            height: 190px;
            flex: 0 0 auto;
        }

        .dpad {
            width: 130px;
            height: 130px;
            position: relative;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
        }
        .dpad-face {
            width: 88px;
            height: 88px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
        .dpad .arm {
            position: absolute;
            background: rgba(255, 255, 255, 0.22);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }
        .dpad .arm.n { width: 28px; height: 34px; left: 30px; top: 0; border-radius: 5px 5px 0 0; }
        .dpad .arm.s { width: 28px; height: 34px; left: 30px; bottom: 0; border-radius: 0 0 5px 5px; }
        .dpad .arm.w { width: 34px; height: 28px; left: 0; top: 30px; border-radius: 5px 0 0 5px; }
        .dpad .arm.e { width: 34px; height: 28px; right: 0; top: 30px; border-radius: 0 5px 5px 0; }
        .dpad .nub {
            position: absolute;
            width: 22px; height: 22px;
            left: 33px; top: 33px;
            border-radius: 50%;
            background: rgba(40, 40, 40, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.35);
        }
        .dpad.n .arm.n,
        .dpad.ne .arm.n, .dpad.nw .arm.n,
        .dpad.s .arm.s,
        .dpad.se .arm.s, .dpad.sw .arm.s,
        .dpad.e .arm.e,
        .dpad.ne .arm.e, .dpad.se .arm.e,
        .dpad.w .arm.w,
        .dpad.nw .arm.w, .dpad.sw .arm.w {
            background: rgba(255, 255, 255, 0.8);
        }

        .a-btn {
            position: absolute;
            width: 60px; height: 60px;
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            color: white; font-weight: bold; font-size: 13px;
            cursor: pointer; outline: none;
            display: flex; justify-content: center; align-items: center;
            user-select: none; -webkit-user-select: none;
            touch-action: none;
        }
        .a-btn:active, .a-btn.held { background: rgba(255, 255, 255, 0.65); }
        .a-btn:disabled { opacity: 0.28; }
        .a-btn.face-a {
            width: 72px; height: 72px;
            top: 8px; right: 6px;
            background: rgba(200, 50, 50, 0.55);
            border-color: #ff8888;
            font-size: 22px;
        }
        .a-btn.face-b {
            width: 64px; height: 64px;
            top: 52px; left: 10px;
            background: rgba(200, 160, 30, 0.5);
            border-color: #ffe066;
            font-size: 20px;
        }
        .a-btn.shoulder {
            width: 72px; height: 36px;
            border-radius: 8px;
            bottom: 8px; left: 8px;
            font-size: 12px;
            background: rgba(80, 160, 255, 0.35);
        }
        .a-btn.start {
            width: 72px; height: 32px;
            border-radius: 8px;
            bottom: 8px; right: 8px;
            font-size: 11px;
            letter-spacing: 0.5px;
        }
        .a-btn.select {
            width: 52px; height: 28px;
            border-radius: 8px;
            top: 0; left: 50%;
            transform: translateX(-50%);
            font-size: 11px;
        }
        .a-btn.select.has-key {
            opacity: 1;
            background: rgba(255, 200, 0, 0.45);
            border-color: #ffcc00;
        }

        /* Touch / tablet chrome (class set from pointer:coarse, not UA) */
        body.touch-ui {
            overflow: hidden;
            height: 100dvh;
            min-height: 100dvh;
            align-items: stretch;
        }
        body.touch-ui .touch-hint { display: inline; }
        body.touch-ui #full-app {
            width: 100%;
            height: 100dvh;
            padding: 0;
            padding-bottom: env(safe-area-inset-bottom);
            box-sizing: border-box;
        }
        body.touch-ui #mobile-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 100vw;
            flex: 0 0 190px;
            margin: 0;
            padding: 4px 16px;
            box-sizing: border-box;
        }
        body.touch-ui #tv-container {
            width: min(100vw - 8px, calc((100dvh - 200px) * 860 / 660));
            height: auto;
            aspect-ratio: 860 / 660;
            max-height: calc(100dvh - 200px);
            flex: 0 1 auto;
        }
        body.touch-ui #game-container {
            width: 93.023%;
            height: 90.909%;
            touch-action: none;
        }
        body.touch-ui #game-container canvas { touch-action: none; }

        @media (orientation: portrait) {
            body.touch-ui #full-app {
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
            }
        }

        @media (orientation: landscape) {
            body.touch-ui #full-app {
                display: grid;
                grid-template-columns: 20vw 60vw 20vw;
                grid-template-rows: 1fr;
                align-items: center;
                justify-items: center;
                height: 100dvh;
                width: 100vw;
            }
            body.touch-ui #mobile-controls { display: contents; }
            body.touch-ui #controller-container {
                grid-column: 1;
                width: 20vw;
                height: 100%;
            }
            body.touch-ui #tv-container {
                grid-column: 2;
                width: min(60vw, calc(100dvh * 860 / 660));
                max-width: 60vw;
                max-height: 100dvh;
                height: auto;
                aspect-ratio: 860 / 660;
            }
            body.touch-ui #action-container {
                grid-column: 3;
                width: 20vw;
                height: 100%;
            }
        }

        body.touch-ui.hide-pad #mobile-controls { display: none !important; }
        body.touch-ui.hide-pad #controller-container,
        body.touch-ui.hide-pad #action-container { display: none !important; }
        body.touch-ui.hide-pad #tv-container {
            width: min(100vw - 8px, calc(100dvh * 860 / 660));
            max-height: 100dvh;
        }
        @media (orientation: landscape) {
            body.touch-ui.hide-pad #full-app { grid-template-columns: 1fr; }
            body.touch-ui.hide-pad #tv-container {
                grid-column: 1;
                width: min(100vw, calc(100dvh * 860 / 660));
                max-width: 100vw;
            }
        }

        body.touch-ui.in-battle #p-battle-card {
            left: 8px; right: 8px; width: auto; bottom: 8px;
        }
        body.touch-ui.in-battle #p-battle-card .battle-btn {
            min-height: 48px; font-size: 12px;
        }
        body.touch-ui.in-battle #move-menu {
            left: 8px; right: 8px; width: auto; bottom: 168px;
        }
        body.touch-ui.in-battle .move-btn {
            padding: 12px 8px; font-size: 16px; min-height: 44px;
        }
        body.touch-ui.in-battle #battle-log {
            width: auto; left: 8px; right: 8px; transform: none;
            bottom: auto; top: 8px; font-size: 14px; padding: 8px 10px;
        }
        body.touch-ui.in-battle #e-battle-card {
            top: auto; bottom: 168px; right: 8px; width: 150px;
        }