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

body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

#containerPanel {
    width: 600px;
    height: 1080px;
    position: relative;
    background-color: #000000;
    overflow: hidden;
}

@media (max-width: 768px) {
    #containerPanel {
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;
    }
}

.screen {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.screen.active {
    display: block;
}

/* =============================================
   INTRO VIDEO SCREEN
   ============================================= */
#introPanel {
    background: #000;
    z-index: 100;
}

#introPanel.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

#introVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#skipIntroBtn {
    position: absolute;
    bottom: 28px;
    right: 24px;
    z-index: 110;
    background: rgba(0, 0, 0, 0.65);
    color: #ffe97a;
    border: 2px solid #ffe97a;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 15px;
    font-family: 'Courier New', monospace;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, transform 0.12s;
}

#skipIntroBtn:hover  { background: rgba(255,233,122,0.22); transform: scale(1.06); }
#skipIntroBtn:active { transform: scale(0.97); background: rgba(255,233,122,0.35); }

/* =============================================
   HOME / TUTORIAL SCREENS
   ============================================= */
#homePanel {
    background: url('assets/homebg.jpg') no-repeat center center;
    background-size: cover;
    z-index: 100;
}

#tutorialPanel {
    background: url('assets/tutbg.png') no-repeat center center;
    background-size: cover;
    z-index: 100;
}

/* =============================================
   ACTION TRIGGER BUTTONS
   ============================================= */
.action-trigger {
    position: absolute;
    border: none;
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.action-trigger:hover  { transform: translateY(-2px) scale(1.04); filter: brightness(1.12); }
.action-trigger:active { transform: translateY(0px) scale(0.98);  filter: brightness(0.96); }

#playBtn {
    width: 180px; height: 180px;
    left: 210px;  top: 450px;
    background-image: url('assets/playbutton.png');
}

#homeTutBtn {
    width: 60px; height: 60px;
    left: 530px; top: 20px;
    background-image: url('assets/tutorial.png');
}

#homeExitBtn {
    width: 100px; height: 70px;
    left: 250px;  top: 650px;
    background-image: url('assets/back.png');
}

@media (max-width: 768px) {
    #playBtn {
        width: 26vw; height: 26vw;
        left: 50%; top: 66%;
        transform: translateX(-50%);
    }
    #playBtn:hover  { transform: translateX(-50%) translateY(-2px) scale(1.04); }
    #playBtn:active { transform: translateX(-50%) translateY(0px)  scale(0.98); }

    #homeTutBtn {
        width: 9vw; height: 9vw;
        left: auto; right: 3vw; top: 2.5vh;
    }

    #homeExitBtn {
        width: 16vw; height: 11vw;
        left: 50%; top: 82%;
        transform: translateX(-50%);
    }
    #homeExitBtn:hover  { transform: translateX(-50%) translateY(-2px) scale(1.04); }
    #homeExitBtn:active { transform: translateX(-50%) translateY(0px)  scale(0.98); }
}

#tutBackBtn {
    width: 100px; height: 100px;
    left: 20px; top: 20px;
    z-index: 20;
    background-image: url('assets/home.png');
}

@media (max-width: 768px) {
    #tutBackBtn {
        width: 16vw; height: 16vw;
        left: auto; right: 4vw; top: 3vh;
        transform: none;
    }
    #tutBackBtn:hover  { transform: translateY(-2px) scale(1.04); }
    #tutBackBtn:active { transform: translateY(0px)  scale(0.98); }
}

/* =============================================
   GAME SCREEN — CANVAS + OVERLAID BUTTONS
   ============================================= */
#activeGamePanel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
    /* display is controlled by .screen / .screen.active only */
}

/* KEY FIX: scope the flex layout to .active only so it
   doesn't show through when another screen is active */
@media (max-width: 768px) {
    #activeGamePanel.active {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    #gameCanvas {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: var(--canvas-h, calc(100dvh - 220px)) !important;
        flex: 0 0 auto;
        min-height: 0;
        display: block;
        z-index: 1;
    }
}

#gameCanvas {
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    display: block;
}

/* Desktop roll button */
#rollBtn {
    width: 105px; height: 70px;
    left: 247px; top: 1005px;
    background-image: url('assets/roll.png');
    z-index: 5;
}

/* Pause button */
#gamePauseBtn {
    width: 50px; height: 50px;
    left: 470px; top: 115px;
    background-image: url('assets/pause.png');
    z-index: 30;
}

@media (max-width: 768px) {
    #gamePauseBtn {
        position: absolute;
        left:   calc(100vw * 470 / 600);
        top:    calc(var(--canvas-h, calc(100dvh - 220px)) * 115 / 1080);
        width:  calc(100vw * 50 / 600);
        height: calc(100vw * 50 / 600);
        z-index: 30;
    }

    #rollBtn {
        display: none;
    }
}

/* =============================================
   PAUSE OVERLAY
   ============================================= */
.overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 110;
    background-color: rgba(0,0,0,0.7);
    align-items: center;
    justify-content: center;
}

#pauseMenuCard {
    /* Responsive: shrinks on mobile, capped on desktop */
    width: min(80vw, 400px);
    height: calc(min(80vw, 400px) * 500 / 400);
    position: relative;
    margin: auto;
    background: url('assets/pausebg.png') no-repeat center center;
    background-size: 100% 100%;
}

/* All button positions/sizes as % of the card so they
   scale correctly at every screen size */
#resumeBtn {
    width: 37.5%;       /* 150/400 */
    height: 30%;        /* 150/500 */
    left: 31.25%;       /* (400-150)/2 / 400 */
    top: 16%;           /* 80/500 — sits in upper half */
    background-image: url('assets/playbutton.png');
}

#quitBtn {
    width: 37.5%;       /* 150/400 */
    height: 30%;        /* 150/500 */
    left: 31.25%;       /* centred */
    top: 52%;           /* below resume with gap */
    background-image: url('assets/home.png');
}

/* =============================================
   POWER-UP OVERLAY
   ============================================= */
.powerup-overlay {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 20;
    background-color: rgba(0,0,0,0.55);
}

.powerup-panel {
    position: absolute;
    left: 50%; bottom: 10%;
    transform: translateX(-50%);
    width: min(92%, 370px);
    max-width: 370px;
    padding: 0;
    background: transparent;
}

.powerup-card {
    display: none;
    position: relative;
    width: 100%;
    padding: 22px 20px 22px;
    background: #3d2810;
    border: 6px solid #4a8a2a;
    border-radius: 14px;
    box-shadow:
        0 0 0 3px #2a5a14,
        0 0 0 9px #3a7020,
        inset 0 0 0 3px #251508,
        0 12px 40px rgba(0,0,0,0.8),
        0 4px 16px rgba(0,0,0,0.6);
}

.powerup-card::before {
    content: "👑";
    position: absolute;
    top: -26px; left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.9));
    z-index: 2;
}

.powerup-card::after {
    content: "";
    position: absolute;
    inset: 8px;
    background: linear-gradient(160deg, #6b4a28 0%, #5a3a1a 40%, #4a2e10 100%);
    border-radius: 8px;
    border: 2px solid #8a6030;
    z-index: 0;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
}

.teleport-card { display: block; }

.powerup-medallion {
    position: relative; z-index: 1;
    width: 76px; height: 76px;
    margin: 0 auto 12px;
    background: radial-gradient(circle at 38% 32%, #9a8a70 0%, #7a6a50 35%, #5a4a30 65%, #3a2a15 100%);
    border-radius: 50%;
    border: 3px solid #aa9060;
    box-shadow: inset 0 3px 10px rgba(0,0,0,0.55), inset 0 -2px 6px rgba(255,255,255,0.08), 0 5px 15px rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; color: #d8c890;
    font-weight: 900; font-family: 'Courier New', monospace;
    text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 0 12px rgba(200,170,80,0.4);
}

.powerup-label {
    position: relative; z-index: 1;
    text-align: center; color: #e8d8a8;
    font-family: 'Courier New', monospace;
    font-size: 12px; font-weight: 700;
    margin-bottom: 14px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    letter-spacing: 0.3px; line-height: 1.5;
}

.powerup-buttons {
    position: relative; z-index: 1;
    display: grid; gap: 8px;
    width: 100%; justify-items: stretch;
}

.teleport-buttons  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.operator-buttons  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.powerup-btn {
    width: 100%; height: 50px;
    border: 2px solid #7a5030; border-radius: 8px;
    background-image:
        repeating-linear-gradient(88deg, transparent, transparent 16px, rgba(0,0,0,0.045) 16px, rgba(0,0,0,0.045) 17px),
        linear-gradient(180deg, #dac09a 0%, #c4a070 18%, #b08050 50%, #9a6e3a 82%, #8a5e2a 100%);
    color: #2c1810; font-size: 16px; font-weight: 900;
    font-family: 'Courier New', monospace;
    text-transform: uppercase; letter-spacing: 0.08em;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255,255,255,0.38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -2px 4px rgba(0,0,0,0.28), 0 5px 0 #5a3a18, 0 6px 10px rgba(0,0,0,0.45);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.powerup-btn:hover {
    background-image:
        repeating-linear-gradient(88deg, transparent, transparent 16px, rgba(0,0,0,0.045) 16px, rgba(0,0,0,0.045) 17px),
        linear-gradient(180deg, #ead4b0 0%, #d4b080 18%, #c09060 50%, #aa7e4a 82%, #9a6e3a 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 4px rgba(0,0,0,0.22), 0 6px 0 #5a3a18, 0 7px 12px rgba(0,0,0,0.5);
}

.powerup-btn:active {
    transform: translateY(4px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 3px rgba(0,0,0,0.22), 0 1px 0 #5a3a18, 0 2px 5px rgba(0,0,0,0.35);
}

.panel-cancel-btn { display: none; }

/* =============================================
   MOBILE CONTROLLER
   ============================================= */
.mobile-controls-container {
    display: none;
    position: relative;
    bottom: auto; left: auto; right: auto;
    width: 100%;
    height: var(--ctrl-h, 220px);
    background-image: url('assets/controller.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: none; box-shadow: none;
    z-index: 25;
    flex-shrink: 0;
    touch-action: manipulation;
}

@media (max-width: 768px) {
    .mobile-controls-container { display: block; }
}

.mobile-controls-container button {
    position: absolute;
    background: transparent;
    border: none; cursor: pointer;
    color: transparent; font-size: 0;
    -webkit-tap-highlight-color: rgba(255,255,255,0.15);
    touch-action: manipulation;
    border-radius: 8px;
    transition: background 0.1s;
    padding: 0; margin: 0;
}

.mobile-controls-container button:active { background: rgba(255,255,255,0.2); }

#moveUpBtn    { left: 13%; top: 5%;  width: 16%; height: 40%; }
#moveLeftBtn  { left: 4%;  top: 48%; width: 16%; height: 40%; }
#moveRightBtn { left: 23%; top: 48%; width: 16%; height: 40%; }

#rollBtnMobile {
    left: 38%; top: 8%;
    width: 22%; height: 82%;
    border-radius: 12px;
    background-image: none !important;
    box-shadow: none !important;
}
#rollBtnMobile:hover { transform: none; }

#acceptBtn  { left: 63%; top: 8%; width: 14%; height: 82%; }
#declineBtn { left: 79%; top: 8%; width: 14%; height: 82%; }

.movement-pad, .decision-pad { display: contents; }