* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
        }

        html,
        body {
            height: 100%;
        }

        body {
            background: #101012;
            color: #fff;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            touch-action: none;
        }

        #game-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            height: 100vh;
            height: 100dvh;
            max-height: 900px;
            background: #050505;
            box-shadow: 0 0 22px rgba(0, 0, 0, 0.85);
            display: flex;
            flex-direction: column;
        }

        #ui-top {
            padding: clamp(5px, 1.6vh, 10px) clamp(8px, 3vw, 14px);
            background: linear-gradient(to bottom, #201335, #342042);
            border-bottom: 2px solid #745194;
            z-index: 10;
            flex-shrink: 0;
        }

        #lives {
            font-size: clamp(0.78rem, 2.6vw, 1rem);
            margin-bottom: clamp(3px, 1vh, 8px);
            color: #ff2020;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        #lives-icons {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: clamp(0.9rem, 3vw, 1.15rem);
            letter-spacing: 1px;
        }

        .life-icon {
            width: clamp(22px, 6vw, 34px);
            height: clamp(22px, 6vw, 34px);
            object-fit: contain;
            image-rendering: auto;
        }

        .lost-life {
            width: clamp(22px, 6vw, 34px);
            height: clamp(22px, 6vw, 34px);
            object-fit: contain;
            opacity: 0.22;
            filter: grayscale(1) brightness(0.45);
        }

        #question-box {
            font-size: clamp(0.72rem, 2.4vw, 0.9rem);
            line-height: 1.25;
        }

        #question-text {
            margin-bottom: clamp(4px, 1vh, 8px);
            font-weight: 800;
            color: #fff4ff;
        }

        .option-text {
            margin-bottom: 3px;
            font-size: clamp(0.66rem, 2.1vw, 0.78rem);
            color: #eee4f4;
            background: rgba(0, 0, 0, 0.42);
            padding: clamp(3px, 0.8vh, 5px) 8px;
            border-radius: 5px;
            border-left: 3px solid #c07be4;
        }

        canvas {
            flex: 1;
            width: 100%;
            min-height: 0;
            display: block;
        }

        #joystick-zone {
            position: absolute;
            bottom: max(14px, env(safe-area-inset-bottom));
            left: 0;
            width: 100%;
            height: clamp(72px, 20vh, 120px);
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 20px;
            box-sizing: border-box;
            z-index: 20;
            pointer-events: none;
        }

        #joystick-base {
            width: clamp(74px, 19vh, 112px);
            height: clamp(74px, 19vh, 112px);
            background: rgba(255, 255, 255, 0.07);
            border: 2px solid rgba(255, 255, 255, 0.18);
            border-radius: 50%;
            position: relative;
            pointer-events: auto;
            backdrop-filter: blur(2px);
        }

        #joystick-stick {
            width: 41%;
            height: 41%;
            background: radial-gradient(circle, #f2d2ff, #a85fd1);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            transition: transform 0.04s;
        }

        @media (max-height: 620px) {
            #joystick-zone {
                height: clamp(64px, 17vh, 96px);
            }

            #joystick-base {
                width: clamp(64px, 16vh, 90px);
                height: clamp(64px, 16vh, 90px);
            }

            #question-box {
                max-height: 30vh;
                overflow-y: auto;
            }
        }

        .overlay {
            position: absolute;
            inset: 0;
            background: rgba(10, 6, 18, 0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 30;
            padding: 30px;
            text-align: center;
        }

        .hidden {
            display: none !important;
        }

        .instructions-box {
            width: min(92%, 390px);
            margin-top: 4px;
            margin-bottom: 16px;
            padding: 12px 14px;
            background: rgba(0, 0, 0, 0.30);
            border: 1px solid rgba(213, 161, 235, 0.35);
            border-radius: 8px;
            text-align: left;
        }

        .instructions-title {
            color: #e9bdff;
            font-size: 0.88rem;
            font-weight: 900;
            margin-bottom: 7px;
            text-align: center;
        }

        .instructions-box p {
            margin: 4px 0;
            font-size: 0.84rem;
            line-height: 1.4;
            color: #eee4f4;
        }

        .instructions-box strong {
            color: #ffffff;
        }

        .overlay h1 {
            color: #e9bdff;
            margin-bottom: 18px;
            font-size: 1.8rem;
        }

        .overlay p {
            margin-bottom: 22px;
            font-size: 1.02rem;
            line-height: 1.55;
            color: #e8e3ec;
        }

        button {
            background: linear-gradient(to bottom, #bc78db, #8d47aa);
            color: white;
            border: 2px solid #5d2f72;
            padding: 12px 28px;
            font-size: 1.05rem;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 800;
            margin-top: 10px;
        }

        button:active {
            transform: scale(0.96);
        }

        input[type="text"] {
            padding: 10px;
            font-size: 1.1rem;
            border-radius: 6px;
            border: 1px solid #a66bc4;
            background: #1c1030;
            color: white;
            text-align: center;
            margin-bottom: 20px;
            width: 80%;
            max-width: 250px;
        }

        .gender-selector {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }

        .gender-btn {
            background: #2f1d40;
            border: 2px solid #654485;
        }

        .gender-btn.selected {
            background: #9b59b6;
            border-color: #fff;
        }

        #dialogue-layer {
            position: absolute;
            inset: 0;
            z-index: 25;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 0 clamp(10px, 3vw, 18px) max(10px, env(safe-area-inset-bottom));
            pointer-events: auto;
        }

        .dialogue-portraits {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 0 clamp(8px, 4vw, 26px);
            margin-bottom: -2px;
        }

        .dialogue-avatar {
            min-width: clamp(68px, 16vw, 108px);
            padding: 7px 9px;
            border: 2px solid rgba(255, 255, 255, 0.18);
            border-radius: 8px 8px 0 0;
            background: rgba(16, 8, 27, 0.76);
            color: #d7c9df;
            font-size: clamp(0.68rem, 2vw, 0.86rem);
            font-weight: 900;
            letter-spacing: 0;
            text-align: center;
            opacity: 0.55;
            transform: translateY(8px) scale(0.94);
            transition: opacity 0.15s, transform 0.15s, border-color 0.15s;
        }

        .dialogue-avatar.active {
            opacity: 1;
            transform: translateY(0) scale(1);
            border-color: #e9bdff;
            color: #ffffff;
            box-shadow: 0 0 16px rgba(192, 123, 228, 0.38);
        }

        .dialogue-box {
            width: 100%;
            max-height: min(35vh, 210px);
            min-height: clamp(108px, 24vh, 158px);
            background: linear-gradient(to bottom, rgba(44, 25, 65, 0.97), rgba(20, 12, 32, 0.98));
            border: 2px solid #9f6fc3;
            border-radius: 8px;
            box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.45);
            padding: clamp(10px, 2.4vh, 16px) clamp(12px, 3vw, 20px);
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        #dialogue-name {
            color: #ffdfff;
            font-size: clamp(0.76rem, 2.2vw, 0.95rem);
            font-weight: 900;
        }

        #dialogue-text {
            color: #fff;
            font-size: clamp(0.84rem, 2.5vw, 1.04rem);
            line-height: 1.35;
            overflow: hidden;
        }

        #dialogue-next {
            align-self: flex-end;
            color: #f1d2ff;
            font-size: clamp(0.64rem, 1.9vw, 0.78rem);
            font-weight: 900;
        }

        #orientation-overlay {
            position: absolute;
            inset: 0;
            z-index: 50;
            background: rgba(10, 6, 18, 0.97);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 30px;
            text-align: center;
        }

        #orientation-overlay h1 {
            color: #e9bdff;
            margin-bottom: 12px;
            font-size: 1.8rem;
        }

        #orientation-overlay p {
            color: #e8e3ec;
            font-size: 1.02rem;
            line-height: 1.45;
        }

        #orientation-overlay.show {
            display: flex;
        }