/* ==========================================================================
   CARROM PREMIUM REDESIGN DESIGN SYSTEM & CSS STYLESHEET
   Resolution: 1064 x 2400 (Absolute pixel-perfect layout)
   ========================================================================== */

:root {
    --bg-color: #082A1E;
    --text-primary: #ffffff;
    --text-gold: #FFECA4;
    --text-gold-dark: #FFB700;
    --white-player-grad: linear-gradient(90deg, #0187B7 0%, rgba(10, 173, 10, 0) 100%);
    --black-player-grad: linear-gradient(270deg, #0187B7 0%, rgba(10, 173, 10, 0) 100%);
    --font-outfit: 'Outfit', sans-serif;
    --font-space: 'Space Grotesk', sans-serif;
}

/* Base resets */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #082A1E 0%, #030F0A 100%);
    font-family: var(--font-outfit);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
}

/* Master UI Container: 1064 x 2320. Center and scale dynamically */
#game-ui-container {
    position: absolute;
    width: 1064px;
    height: 2320px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;
    background: transparent;
    overflow: hidden;
}

/* Overlapping Screen base rules */
.ui-screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 1064px;
    height: 2320px;
    z-index: 10;
    display: none;
    pointer-events: none;
}

.ui-screen.visible {
    display: block;
    pointer-events: auto;
}

/* ==========================================================================
   1. Game Launcher Screen (#menu-screen)
   ========================================================================== */
#menu-screen {
    background: radial-gradient(circle at 50% 50%, #0d3829 0%, #04120c 100%);
}

/* Game Title Logo image: X:94, Y:360, W:878, H:162 */
#menu-title-img {
    position: absolute;
    left: 94px;
    top: 360px;
    width: 878px;
    height: 162px;
    filter: drop-shadow(0 15px 20px rgba(0,0,0,0.6));
    animation: floatLogo 4s ease-in-out infinite alternate;
}

@keyframes floatLogo {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-15px); }
}

/* Board Logo & Animation Box: X:214, Y:659, W:636, H:314 */
#menu-logo-area {
    position: absolute;
    left: 214px;
    top: 659px;
    width: 636px;
    height: 314px;
}

#menu-logo-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.85;
}

/* Animation Box container */
#launcher-anim-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.anim-line-track {
    position: absolute;
    left: 40px;
    right: 40px;
    top: 50%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.anim-coin {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    will-change: left, transform;
}

.striker-coin {
    width: 60px;
    height: 60px;
    background: url('Image/可托按钮.png') no-repeat center/contain;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.8));
    left: -100px;
}

.red-coin {
    width: 44px;
    height: 44px;
    background: url('Image/红棋.png') no-repeat center/contain;
    filter: drop-shadow(0 0 12px rgba(255,51,102,0.8));
    left: 318px;
}

/* Menu buttons common styling */
.menu-action-btn {
    position: absolute;
    background: transparent;
    border: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s, filter 0.2s;
}

.menu-action-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.menu-action-btn:hover {
    transform: translateY(-5px) scale(1.02);
    filter: drop-shadow(0 15px 30px rgba(0, 255, 255, 0.35));
}

.menu-action-btn:active {
    transform: translateY(-2px) scale(0.98);
}

/* Center text overlayed on buttons */
.btn-overlay-text {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9);
    letter-spacing: 2px;
    text-align: center;
    pointer-events: none;
}

/* 1v1 Matching Button: X:80, Y:1246, W:906, H:270 */
#pvp-1v1-btn {
    left: 80px;
    top: 1246px;
    width: 906px;
    height: 270px;
}

/* Personal Challenge: X:80, Y:1554, W:430, H:270 */
.menu-action-btn.split-left {
    left: 80px;
    top: 1554px;
    width: 430px;
    height: 270px;
}

/* 2v2 Matching Button: X:556, Y:1554, W:430, H:270 */
.menu-action-btn.split-right {
    left: 556px;
    top: 1554px;
    width: 430px;
    height: 270px;
}


/* ==========================================================================
   2. Matchmaking Radar Screen (#matchmaking-screen)
   ========================================================================== */
#matchmaking-screen {
    background: radial-gradient(circle at 50% 50%, #031c12 0%, #010805 100%);
}

#radar-wrapper {
    position: absolute;
    left: 0px;
    top: 471px;
    width: 1064px;
    height: 1064px;
}

#radar-gif-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#radar-user-avatar {
    position: absolute;
    left: 432px;
    top: 432px; /* 903 - 471 = 432 */
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 8px solid #FFB700;
    box-shadow: 0 0 40px rgba(255, 183, 0, 0.6);
}

#matchmaking-status-text {
    position: absolute;
    left: 201px;
    top: 1585px;
    width: 662px;
    font-size: 54px;
    font-weight: 800;
    color: var(--text-gold);
    text-align: center;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
    letter-spacing: 2px;
}

/* Cancel Matching Button: X:190, Y:1922, W:682, H:144 */
#cancel-matchmaking-btn {
    position: absolute;
    left: 190px;
    top: 1922px;
    width: 682px;
    height: 144px;
    border: none;
    outline: none;
    background: linear-gradient(135deg, #FFECA4 0%, #FFB700 100%);
    border-radius: 72px;
    font-size: 48px;
    font-weight: 800;
    color: #04120c;
    cursor: pointer;
    box-shadow: 0 10px 40px rgba(255,183,0,0.35);
    transition: transform 0.2s, filter 0.2s;
}

#cancel-matchmaking-btn:hover {
    transform: scale(1.03);
    filter: brightness(1.1);
}

#cancel-matchmaking-btn:active {
    transform: scale(0.98);
}


/* ==========================================================================
   3. Game Difficulty Selection Screen (#difficulty-screen)
   ========================================================================== */
#difficulty-screen {
    background: radial-gradient(circle at 50% 50%, #092e21 0%, #020b08 100%);
}

/* Title board pulls down from top */
#difficulty-title-board {
    position: absolute;
    left: 0;
    top: -523px; /* initial state: hidden above */
    width: 1064px;
    height: 523px;
    transition: top 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.2) 0.1s;
}

.difficulty-board-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#difficulty-logo {
    position: absolute;
    left: 80px;
    top: 137px;
    width: 870px;
    height: 153px;
}

#difficulty-board-text {
    position: absolute;
    left: 0;
    width: 100%;
    top: 335px;
    font-size: 54px;
    font-weight: 800;
    color: var(--text-gold);
    text-align: center;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
    letter-spacing: 2px;
}

/* Options board pulls up from bottom initially */
#difficulty-options-board {
    position: absolute;
    left: 0;
    top: 2400px; /* initial state: hidden below */
    width: 1064px;
    height: 1500px;
    transition: top 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.2) 0.1s;
}

.difficulty-options-bg {
    display: none;
}

/* Option Clickable areas: X:200, Y:780, W:662, H:258 and Y:1120 */
.difficulty-option-clickarea {
    position: absolute;
    left: 200px;
    width: 662px;
    height: 258px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 40px;
    background: linear-gradient(135deg, rgba(255, 236, 164, 0.08) 0%, rgba(255, 183, 0, 0.02) 100%);
    border: 6px solid #FFB700;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5), inset 0 0 25px rgba(255, 236, 164, 0.05);
    outline: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s, box-shadow 0.3s;
}

#difficulty-normal-btn {
    top: 257px; /* 780 - 523 = 257 */
}

#difficulty-hard-btn {
    top: 597px; /* 1120 - 523 = 597 */
}

.difficulty-label-text {
    font-size: 60px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.85);
    letter-spacing: 4px;
    text-align: center;
}

.difficulty-option-clickarea:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, rgba(255, 236, 164, 0.18) 0%, rgba(255, 183, 0, 0.06) 100%);
    box-shadow: 0 25px 60px rgba(255, 183, 0, 0.25), inset 0 0 45px rgba(255, 236, 164, 0.15);
}

.difficulty-option-clickarea:active {
    transform: scale(0.97);
}

/* Return Button */
#difficulty-return-btn {
    position: absolute;
    left: 390px;
    top: 2150px;
    width: 284px;
    height: 100px;
    background: transparent;
    border: 3px dashed var(--text-gold);
    border-radius: 50px;
    font-size: 40px;
    font-weight: 700;
    color: var(--text-gold);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

#difficulty-return-btn:hover {
    background: rgba(255, 236, 164, 0.1);
    transform: translateY(-3px);
}

#difficulty-return-btn:active {
    transform: translateY(0);
}

/* Triggered classes */
#difficulty-screen.visible #difficulty-title-board {
    top: 0px;
}

#difficulty-screen.visible #difficulty-options-board {
    top: 523px;
}


/* ==========================================================================
   4. Gameplay Page Layout (#gameplay-screen)
   ========================================================================== */
#gameplay-title-img {
    position: absolute;
    left: 96px;
    top: 260px; /* Moved down from 196px to balance layout spacing */
    width: 870px;
    height: 153px;
}

/* Sound and Rules icons: top: 60px, size: 90x90 (moved to the top area above the title) */
.utility-icon-btn {
    position: absolute;
    top: 60px;
    width: 90px;
    height: 90px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s;
}

.utility-icon-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.utility-icon-btn:hover {
    transform: scale(1.1);
}

.utility-icon-btn:active {
    transform: scale(0.95);
}

#gameplay-sound-btn {
    left: 804px;
}

#gameplay-rules-btn {
    left: 932px;
}

/* Scoreboard titles: X:381/621, Y:618 (Shifted up by 120px to Y:498) */
.score-title-label {
    position: absolute;
    top: 498px;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: 2px;
}

#label-white-score {
    left: 301px;
    width: 220px;
    text-align: center;
    color: #ffffff;
}

#label-black-score {
    left: 541px;
    width: 220px;
    text-align: center;
    color: #FFECA4; /* distinct gold for black player */
}

/* Scoreboards (White: X:301, Black: X:541, Y:677, W:220, H:145 -> Shifted up by 120px to Y:557) */
.calendar-scoreboard {
    position: absolute;
    top: 557px;
    width: 220px;
    height: 145px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#scoreboard-white { left: 301px; }
#scoreboard-black { left: 541px; }

/* Flip digital card structure */
.flip-digit-card {
    position: relative;
    width: 104px;
    height: 145px;
    perspective: 350px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}

/* Half cards (top and bottom background) */
.card-half {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background: #151d1a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-gold);
    font-family: var(--font-space);
    font-size: 105px;
    font-weight: 800;
    text-align: center;
    overflow: hidden;
    backface-visibility: hidden;
}

.card-top {
    top: 0;
    line-height: 145px; /* aligns to middle */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.3);
}

.card-bottom {
    bottom: 0;
    line-height: 0px; /* aligns to middle */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top: 1px solid rgba(0,0,0,0.3);
}

/* Rotating flipper layer */
.card-flipper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    transform-origin: center center;
    pointer-events: none;
    z-index: 10;
}

.card-flipper-face {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background: #151d1a;
    border: 1px solid rgba(255,255,255,0.05);
    color: var(--text-gold);
    font-family: var(--font-space);
    font-size: 105px;
    font-weight: 800;
    text-align: center;
    overflow: hidden;
    backface-visibility: hidden;
}

.card-flipper-front {
    top: 0;
    line-height: 145px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    transform-origin: bottom center;
}

.card-flipper-back {
    bottom: 0;
    line-height: 0px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    transform: rotateX(180deg);
    transform-origin: top center;
}

/* Flip action classes */
.card-flipper.flip-animate {
    transform: rotateX(-180deg);
}

/* Horizontal card center line */
.flip-digit-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 20;
    box-shadow: 0 1px 2px rgba(255,255,255,0.1);
}

/* Player banners containers: width: 302px (Shifted up by 120px to Y:458) */
.player-banners-container {
    position: absolute;
    width: 302px;
    height: 244px;
    top: 458px;
    pointer-events: none;
}

#left-player-banners {
    left: 0;
}
#left-player-banners .player-banner-row {
    left: 0;
}

#right-player-banners {
    right: 0;
}
#right-player-banners .player-banner-row {
    right: 0;
}

/* Banner row design: height 122 */
.player-banner-row {
    position: absolute;
    width: 302px;
    height: 122px;
    background: var(--white-player-grad);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(30px); /* slide outward from inside on activation */
}

#right-player-banners .player-banner-row {
    background: var(--black-player-grad);
    transform: translateX(-30px); /* slide outward from inside on activation */
}

/* Row states depending on 1v1 / 2v2 */
.player-banner-row.banner-top {
    top: 0px;
}

.player-banner-row.banner-bottom {
    top: 140px; /* 718 - 578 = 140 */
}

/* Visible banners */
#left-player-banners .player-banner-row.banner-active,
#right-player-banners .player-banner-row.banner-active {
    opacity: 1;
    transform: translateX(0);
}

/* Highlight/active turn glow on player banner */
.player-banner-row.turn-active {
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.6));
    border-left: 5px solid #00ffff;
}

#right-player-banners .player-banner-row.turn-active {
    border-left: none;
    border-right: 5px solid #00ffff;
}

/* Banner components */
.p-banner-avatar {
    position: absolute;
    top: 16px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

#left-player-banners .p-banner-avatar {
    left: 18px;
}

#right-player-banners .p-banner-avatar {
    right: 18px;
}

/* Tags P1-P4 overlayed on avatars */
.p-banner-tag {
    position: absolute;
    width: 50px;
    height: 24px;
    z-index: 10;
}

#left-player-banners .p-banner-tag {
    left: 18px;
    top: 82px; /* overlayed near bottom of avatar */
}

#right-player-banners .p-banner-tag {
    right: 18px;
    top: 82px;
}

/* Nicknames: X:119 / 778 relative to screen */
.p-banner-name {
    position: absolute;
    top: 18px;
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

#left-player-banners .p-banner-name {
    left: 119px;
}

#right-player-banners .p-banner-name {
    right: 119px;
    text-align: right;
}

/* Coin counts: X:120 / 804 relative to screen */
.p-banner-coin-count {
    position: absolute;
    top: 62px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#left-player-banners .p-banner-coin-count {
    left: 120px;
}

#right-player-banners .p-banner-coin-count {
    right: 120px;
    flex-direction: row-reverse;
}

.p-banner-coin-icon {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.p-banner-coin-text {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-gold);
    font-family: var(--font-space);
}

.p-banner-queen-icon {
    width: 36px;
    height: 36px;
    margin-left: 8px;
    filter: drop-shadow(0 0 8px rgba(255,51,102,0.8));
    display: none;
}

/* WebGL Board Container Y: 830, W: 1064, H: 1180 (Shifted up by 120px to Y:710) */
#game-canvas-container {
    position: absolute;
    left: 0;
    top: 710px;
    width: 1064px;
    height: 1180px;
    background-color: #030F0A;
}

#game-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* In-game tips & announcements overlayed on canvas container */
.drag-overlay-tip {
    position: absolute;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    font-size: 32px;
    font-weight: 800;
    color: #00ffff;
    background: rgba(10, 14, 23, 0.85);
    padding: 15px 30px;
    border-radius: 40px;
    border: 2px dashed #00ffff;
    backdrop-filter: blur(8px);
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.3s;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.drag-overlay-tip.visible { opacity: 1; }

.drag-overlay-tip.blocked {
    color: #ff3366;
    border-color: #ff3366;
    box-shadow: 0 0 20px rgba(255, 51, 102, 0.4);
    animation: tipBlockedGlow 1s infinite alternate;
}

@keyframes tipBlockedGlow {
    from { box-shadow: 0 0 10px rgba(255, 51, 102, 0.2); }
    to { box-shadow: 0 0 25px rgba(255, 51, 102, 0.6); }
}

.announcement-banner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    font-size: 64px;
    font-weight: 800;
    color: #FFD700;
    background: rgba(8, 42, 30, 0.9);
    border: 3px solid #FFD700;
    border-radius: 20px;
    padding: 30px 60px;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.2);
    text-shadow: 0 4px 10px rgba(0,0,0,0.8);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    text-align: center;
    white-space: nowrap;
}

.announcement-banner.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Slider position panel (X:148, Y:2024, W:766, H:80 -> Shifted up by 120px to Y:1904) */
#slider-panel {
    position: absolute;
    left: 148px;
    top: 1904px;
    width: 766px;
    height: 80px;
}

#slider-bg-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Custom inputs track & thumb style */
#striker-slider {
    position: absolute;
    left: -35px; /* Shifted left to let thumb slide all the way to the ends */
    top: 0;
    width: 836px; /* Expanded width to match visual track endpoints */
    height: 80px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    z-index: 20;
    cursor: pointer;
}

#striker-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 153px;
    height: 80px;
    background: url('Image/可托按钮.png') no-repeat center/contain;
    border: none;
    cursor: grab;
    transition: transform 0.1s;
}

#striker-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
}

#striker-slider:disabled::-webkit-slider-thumb {
    background: url('Image/不可托按钮.png') no-repeat center/contain;
    cursor: not-allowed;
}


/* ==========================================================================
   5. Dice Roll Modal Screen (#dice-roll-modal)
   ========================================================================== */
.overlay-modal-screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 1064px;
    height: 2400px;
    background: rgba(4, 15, 10, 0.92);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
}

.overlay-modal-screen.visible {
    display: flex;
}

.dice-roll-box {
    background: #092e20;
    border: 4px solid var(--text-gold);
    border-radius: 36px;
    padding: 60px 40px;
    width: 900px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 30px rgba(255, 236, 164, 0.15);
    animation: modalPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

@keyframes modalPop {
    from { transform: scale(0.9) translateY(50px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.dice-modal-header {
    font-size: 54px;
    font-weight: 800;
    color: var(--text-gold);
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.dice-modal-desc {
    font-size: 32px;
    color: #a4cbb9;
    margin-bottom: 50px;
    line-height: 1.5;
    padding: 0 40px;
}

.dice-arena {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 50px;
}

.dice-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 320px;
}

.dice-player-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.dice-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid #ffcc00;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
    margin-bottom: 10px;
    object-fit: cover;
}

.dice-player-name {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
}

/* Dice Wrapper & 3D Cube properties */
.dice-wrapper {
    width: 90px;
    height: 90px;
    perspective: 800px;
    margin-bottom: 30px;
}

.dice-graphic {
    position: relative;
    width: 90px;
    height: 90px;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(-20deg);
    transition: transform 2.2s cubic-bezier(0.2, 0.85, 0.3, 1.05);
}

/* Face designs */
.dice-face {
    position: absolute;
    width: 90px;
    height: 90px;
    background: #ffffff;
    border: 3px solid #ddd;
    border-radius: 12px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: visible;
}

/* Draw traditional pips */
.dice-face::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% 80%;
}

.dice-face-1::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="12" fill="red"/></svg>'); }
.dice-face-2::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="9" fill="black"/><circle cx="75" cy="75" r="9" fill="black"/></svg>'); }
.dice-face-3::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="8" fill="black"/><circle cx="50" cy="50" r="8" fill="black"/><circle cx="75" cy="75" r="8" fill="black"/></svg>'); }
.dice-face-4::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="8" fill="black"/><circle cx="75" cy="25" r="8" fill="black"/><circle cx="25" cy="75" r="8" fill="black"/><circle cx="75" cy="75" r="8" fill="black"/></svg>'); }
.dice-face-5::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="8" fill="black"/><circle cx="75" cy="25" r="8" fill="black"/><circle cx="50" cy="50" r="8" fill="black"/><circle cx="25" cy="75" r="8" fill="black"/><circle cx="75" cy="75" r="8" fill="black"/></svg>'); }
.dice-face-6::after { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="25" cy="25" r="8" fill="black"/><circle cx="75" cy="25" r="8" fill="black"/><circle cx="25" cy="50" r="8" fill="black"/><circle cx="75" cy="50" r="8" fill="black"/><circle cx="25" cy="75" r="8" fill="black"/><circle cx="75" cy="75" r="8" fill="black"/></svg>'); }

/* Face coordinates translation */
.dice-face-1 { transform: rotateY(0deg) translateZ(45px); }
.dice-face-2 { transform: rotateY(90deg) translateZ(45px); }
.dice-face-3 { transform: rotateX(90deg) translateZ(45px); }
.dice-face-4 { transform: rotateX(-90deg) translateZ(45px); }
.dice-face-5 { transform: rotateY(-90deg) translateZ(45px); }
.dice-face-6 { transform: rotateY(180deg) translateZ(45px); }

/* Shaking anim */
.dice-graphic.shaking {
    animation: shakeCube 0.15s infinite alternate;
}

@keyframes shakeCube {
    0% { transform: rotateX(-25deg) rotateY(-25deg) translate3d(5px, -5px, 0); }
    100% { transform: rotateX(25deg) rotateY(25deg) translate3d(-5px, 5px, 0); }
}

.dice-divider-vs {
    font-size: 54px;
    font-weight: 800;
    color: rgba(255,255,255,0.25);
    font-style: italic;
}

.dice-value-result {
    font-size: 48px;
    font-weight: 800;
    color: var(--text-gold);
    min-height: 60px;
}

#dice-shake-status {
    font-size: 38px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 40px;
    min-height: 50px;
}

/* Dice roll trigger buttons */
#roll-dice-btn {
    display: none; /* Auto-rolled: hidden */
    background: linear-gradient(135deg, #FFECA4 0%, #FFB700 100%);
    border: none;
    border-radius: 50px;
    padding: 20px 80px;
    font-size: 40px;
    font-weight: 800;
    color: #04120c;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255,183,0,0.35);
    transition: transform 0.2s, filter 0.2s;
}

#roll-dice-btn:hover {
    transform: scale(1.03);
    filter: brightness(1.1);
}

#roll-dice-btn:active {
    transform: scale(0.98);
}


/* ==========================================================================
   6. Rules explanations popup (#rules-popup)
   ========================================================================== */
.rules-card-box {
    background: #092e20;
    border: 4px solid var(--text-gold);
    border-radius: 36px;
    padding: 50px;
    width: 900px;
    max-height: 1800px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

.rules-card-header {
    font-size: 50px;
    font-weight: 800;
    color: var(--text-gold);
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid rgba(255, 236, 164, 0.2);
    padding-bottom: 20px;
}

.rules-card-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 15px;
    margin-bottom: 40px;
    text-align: left;
}

/* Custom scrollbars inside rules body */
.rules-card-body::-webkit-scrollbar {
    width: 10px;
}
.rules-card-body::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
    border-radius: 5px;
}
.rules-card-body::-webkit-scrollbar-thumb {
    background: rgba(255, 236, 164, 0.4);
    border-radius: 5px;
}

.rules-section {
    margin-bottom: 30px;
}

.rules-section h3 {
    font-size: 34px;
    color: #ffffff;
    margin-bottom: 12px;
}

.rules-section p {
    font-size: 28px;
    color: #a4cbb9;
    line-height: 1.6;
}

#close-rules-btn {
    background: linear-gradient(135deg, #FFECA4 0%, #FFB700 100%);
    border: none;
    border-radius: 50px;
    padding: 18px 80px;
    font-size: 38px;
    font-weight: 800;
    color: #04120c;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255,183,0,0.3);
    align-self: center;
    transition: transform 0.2s;
}

#close-rules-btn:hover { transform: scale(1.03); }
#close-rules-btn:active { transform: scale(0.98); }


/* ==========================================================================
   7. Game Over Modal Overlay (#game-over-screen)
   ========================================================================== */
.game-over-box {
    background: #092e20;
    border: 4px solid var(--text-gold);
    border-radius: 36px;
    padding: 60px 40px;
    width: 860px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: modalPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards;
}

#game-over-winner-title {
    font-size: 58px;
    font-weight: 800;
    color: var(--text-gold-dark);
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

#game-over-scores-summary {
    font-size: 40px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 60px;
}

/* Game over menu action options */
.btn-primary {
    background: linear-gradient(135deg, #FFECA4 0%, #FFB700 100%);
    border: none;
    border-radius: 50px;
    padding: 20px 80px;
    font-size: 38px;
    font-weight: 800;
    color: #04120c;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255,183,0,0.3);
    width: 500px;
    margin-bottom: 24px;
    transition: transform 0.2s;
}

.btn-secondary {
    background: transparent;
    border: 3px solid var(--text-gold);
    border-radius: 50px;
    padding: 18px 80px;
    font-size: 36px;
    font-weight: 800;
    color: var(--text-gold);
    cursor: pointer;
    width: 500px;
    transition: transform 0.2s, background 0.2s;
}

.btn-primary:hover, .btn-secondary:hover {
    transform: scale(1.02);
}

.btn-secondary:hover {
    background: rgba(255, 236, 164, 0.1);
}

.btn-primary:active, .btn-secondary:active {
    transform: scale(0.98);
}

/* 返回大厅按钮 */
#lobby-back-btn {
    position: fixed;
    top: calc(20px + env(safe-area-inset-top));
    left: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    padding: 0;
}
#lobby-back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.08);
}
#lobby-back-btn svg {
    width: 20px;
    height: 20px;
}