:root {
    --p1-bg: linear-gradient(135deg, #1cb5e0 0%, #000851 100%);
    --p2-bg: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    --p3-bg: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --p4-bg: linear-gradient(135deg, #fce38a 0%, #f38181 100%);
    --text-main: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    /* Prevent text selection on rapid clicks */
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Outfit', sans-serif;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    overflow: hidden;
    background-color: #1a1a1a;
    color: var(--text-main);
}

.app-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
    width: 100%;
    position: relative;
}

.player-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3vmin;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.player-1 {
    background: var(--p1-bg);
    transform: rotate(180deg);
}

.player-2 {
    background: var(--p2-bg);
    transform: rotate(180deg);
}

.player-3 {
    background: var(--p3-bg);
}

.player-4 {
    background: var(--p4-bg);
}

.life-display {
    font-size: 20vmin;
    font-weight: 900;
    z-index: 2;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease;
}

.life-display.increment {
    transform: scale(1.1);
    color: #aaffaa;
}

.life-display.decrement {
    transform: scale(0.9);
    color: #ffaaaa;
}

.player-label {
    position: absolute;
    top: 2vmin;
    left: 2vmin;
    font-size: 2vmin;
    opacity: 0.8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Controls overlay the entire player card section */
.controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    /* Split left/right or top/bottom? */
    z-index: 10;
    pointer-events: none;
    /* Passes clicks through except for buttons */
    padding: 0 4vmin;
    /* Inset buttons to avoid edge gestures */
}

/* Portrait Mode: Vertical Controls */
body.portrait .controls {
    flex-direction: column-reverse;
    /* Default: Minus at Bottom, Plus at Top (Visual: Down -, Up +) */
    padding: 4vmin 0 !important;
    /* Vertical inset */
}

/* P1 is always Top (180deg) in Portrait */
body.portrait #p1 .controls {
    flex-direction: column;
    /* HTML Top (Visual Bottom) is Minus. HTML Bottom (Visual Top) is Plus. */
}

/* P2 is Top (180deg) in 3P/4P Portrait */
body.portrait .layout-3 #p2 .controls,
body.portrait .layout-4 #p2 .controls {
    flex-direction: column;
}

/* Spacer adjustment for vertical layout */
body.portrait .spacer {
    width: 0;
    height: 10vmin;
    /* Gap */
}

/* Make controls huge touch targets */
.btn {
    background: transparent;
    border: none;
    font-size: 10vmin;
    color: rgba(255, 255, 255, 0.7);
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
    pointer-events: auto;
    /* Re-enable pointer events for buttons */
    touch-action: none;
    /* Disable browser zooming/scrolling on buttons */
    -webkit-user-select: none;
    user-select: none;
}

.btn:active {
    background: rgba(255, 255, 255, 0.1);
}

.player-card.is-dead {
    opacity: 0.5;
    filter: grayscale(0.8);
    /* Disable interaction */
}

.roulette-active {
    background: rgba(255, 255, 255, 0.2);
    /* Faint highlight */
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 215, 0, 0.5);
    /* Gold tint */
}

.winner-glow {
    box-shadow: inset 0 0 60px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.6);
    border: 4px solid #ffd700 !important;
    z-index: 20;
    animation: pulseWinner 1.5s infinite;
}

@keyframes pulseWinner {
    0% {
        box-shadow: inset 0 0 60px rgba(255, 215, 0, 0.8);
    }

    50% {
        box-shadow: inset 0 0 90px rgba(255, 215, 0, 1);
    }

    100% {
        box-shadow: inset 0 0 60px rgba(255, 215, 0, 0.8);
    }
}

/* Allow pointer events on death time if needed? No, user said indicate time. */

/* Minus on left, Plus on right seems intuitive for mobile row layout */
.minus {
    /* align to left/bottom */
    justify-content: flex-start;
    padding-left: 20px;
}

.plus {
    /* align to right/top */
    justify-content: flex-end;
    padding-right: 20px;
}

.spacer {
    /* middle area is dead zone so touch doesn't accidentally trigger logic? 
       Actually let's just make the buttons fill the space. 
       But maybe leave center for viewing life clearly without overlay. 
       Let's make controls transparent overlay on sides.
    */
    width: 30%;
    /* center gap */
}

/* Fullscreen Button */
.fullscreen-btn {
    position: absolute;
    top: 2vmin;
    right: 2vmin;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 8vmin;
    height: 8vmin;
    border-radius: 50%;
    font-size: 4vmin;
    cursor: pointer;
    z-index: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
    backdrop-filter: blur(5px);
}

.fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Reset Button in center of screen */
.reset-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.reset-btn:active {
    transform: translate(-50%, -50%) scale(0.95);
}

/* Active Player Marker */
/* Active Player Marker */
.active-marker {
    position: absolute;
    top: 10%;
    /* Positioned higher for larger size */
    background-color: black;
    color: white;
    padding: 1vmin 3vmin;
    border-radius: 1vmin;
    font-size: 2vmin;
    /* Significantly smaller */
    font-weight: 800;
    text-transform: uppercase;
    z-index: 50;
    /* Topmost layer */
    cursor: pointer;
    box-shadow: 0 0.5vmin 1.5vmin rgba(0, 0, 0, 0.6);
    display: none;
    /* Hidden by default */
    user-select: none;
    pointer-events: auto;
    /* Ensure clickable */
    border: 0.2vmin solid rgba(255, 255, 255, 0.4);
    text-align: center;
    white-space: nowrap;
}

.player-card.is-active .active-marker {
    display: block;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Turn Timer - Central Display (5x Bigger) */
.turn-timer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--timer-rotation, 0deg));
    width: 30vmin;
    height: 30vmin;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.95);
    border: 0.8vmin solid rgba(255, 255, 255, 0.3);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 45;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 0 6vmin rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    transition: transform 0.2s, border-color 0.2s;
}

.turn-count {
    font-size: 2.5vmin;
    /* Increased size (was 1.5vmin inline) */
    color: #ffd700;
    /* Gold */
    margin-top: 0.5vmin;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}

.player-death-time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffd700;
    font-size: 5vmin;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 20px;
    border-radius: 10px;
    z-index: 10;
    text-align: center;
    pointer-events: none;
    /* Let clicks pass through if needed, or auto works */
}

/* ... (Timer internal styles remain same) ... */

/* Mini Commander Grid (Main View) */
.mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 10vmin;
    height: 10vmin;
    gap: 4px;
    margin-top: 15px;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.player-card:hover .mini-grid {
    opacity: 1;
}

.mini-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vmin;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.8);
}

.mini-cell.self {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5vmin;
    letter-spacing: 1px;
}

.mini-cell.danger {
    color: #ffaaaa;
    background: rgba(255, 0, 0, 0.2);
}

/* Commander View Grid (Interactive) */
.cmd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    gap: 10px;
    padding: 10px;
}

.cmd-btn {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.15) 50%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 8vmin;
    font-weight: 800;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
    user-select: none;
    position: relative;
    overflow: hidden;
    /* Remove click listener from parent, use explicit children */
}

/* Explicit Touch Zones */
.cmd-half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: 10;
    /* Enable interaction */
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
}

/* Icon Indicators */
.cmd-half::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6vmin;
    opacity: 0.3;
    font-weight: 300;
    pointer-events: none;
    font-family: sans-serif;
}

.cmd-half.left::before {
    content: "−";
    /* Minus */
}

.cmd-half.right::before {
    content: "+";
    /* Plus */
}

.cmd-half.left {
    left: 0;
    /* Optional: visible divider or arrow */
}

.cmd-half.right {
    right: 0;
}

@media (orientation: portrait) {

    /* Flip Commander Damage Buttons in Portrait: Top (+) / Bottom (-) */
    .cmd-btn {
        /* Update gradient to vertical split: Top Lighter (Plus), Bottom Darker (Minus) */
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 50%);
    }

    .cmd-half {
        width: 100%;
        height: 50%;
    }

    .cmd-half.left {
        /* Minus -> Lower Part */
        left: 0;
        top: 50%;
        bottom: 0;
        /* right: auto; Not needed as width is 100% */
    }

    .cmd-half.right {
        /* Plus -> Upper Part */
        left: 0;
        top: 0;
        bottom: auto;
        height: 50%;
        /* right: auto; */
    }

    /* Rotate Text to simulate Landscape view */
    .cmd-btn-content,
    .cmd-back-label {
        transform: rotate(-90deg);
        transform-origin: center;
        /* Ensure touch interaction on text doesn't block (already pointer-events: none on content) */
    }
}

.cmd-half:active {
    background: rgba(255, 255, 255, 0.1);
}

.cmd-btn-content {
    pointer-events: none;
    /* Let clicks pass through if needed, but buttons are on top */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.cmd-btn:active {
    transform: scale(0.95);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.2) 50%);
}

.cmd-btn.is-self {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.05);
    color: #aaa;
    font-size: 1.5rem;
    pointer-events: auto;
}

.cmd-btn-label {
    font-size: 4vmin;
    /* Label size */
    font-weight: 900;
    opacity: 0.8;
    margin-bottom: 5px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}



/* Death State */
.player-card.is-dead {
    filter: grayscale(0.8) brightness(0.6);
}

.player-card.is-dead .life-display::after {
    content: "DEAD";
    display: block;
    font-size: 2rem;
    color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    border: 4px solid red;
    padding: 5px 20px;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100;
}

/* Back Button in Commander View - Adjust position if needed, or integrate into empty grid slot */
.cmd-back-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    pointer-events: none;
    /* Let clicks pass to grid? No, back button must be clickable */
}

/* We might want to remove the old centered back button if grid covers everything */
.back-btn {
    /* Keep old style but make sure it sits on top */
    z-index: 70;
}

.turn-timer:active,
.turn-timer.holding {
    transform: translate(-50%, -50%) rotate(var(--timer-rotation, 0deg)) scale(0.95);
    border-color: rgba(255, 100, 100, 0.8);
}

.timer-value {
    font-size: 10vmin;
    /* Timer Text */
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 0.6vmin;
}

.timer-label {
    font-size: 2vmin;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.4vmin;
    font-weight: 700;
}

/* Main View - Grid Layout */
#main-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Reset Modal */
.reset-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.reset-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.reset-content {
    background: #2a2a2a;
    padding: 5vmin;
    border-radius: 3vmin;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transform: scale(0.9);
    transition: transform 0.3s;
}

.reset-modal.visible .reset-content {
    transform: scale(1);
}

.reset-btn-confirm {
    background: #ff4444;
    color: white;
    border: none;
    padding: 2vmin 5vmin;
    font-size: 4vmin;
    border-radius: 2vmin;
    margin-top: 20px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
}

.reset-btn-cancel {
    background: transparent;
    color: #aaa;
    border: 1px solid #555;
    padding: 1.5vmin 3vmin;
    font-size: 3vmin;
    border-radius: 1.5vmin;
    margin-top: 15px;
    margin-left: 10px;
    cursor: pointer;
    font-family: inherit;
}

/* Commander View */
.hidden {
    display: none !important;
}

#commander-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.commander-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.commander-counters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
}

.vs-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px 10px;
    border-radius: 8px;
    width: 90%;
    justify-content: space-between;
}

.vs-label {
    font-weight: 700;
    font-size: 1rem;
    width: 40px;
}

.vs-life {
    font-size: 1.8rem;
    font-weight: 800;
}

.vs-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Back Button (Centers in Commander View) */
.back-btn-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
}

.back-btn {
    width: 15vmin;
    height: 15vmin;
    border-radius: 50%;
    background: #333;
    color: white;
    border: 3px solid rgba(255, 255, 255, 0.3);
    font-size: 3vmin;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Color Picker Modal */
.color-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    /* Allow infinite rows */
    gap: 2vmin;
    margin-bottom: 20px;
    max-height: 60vh;
    /* Limit height */
    overflow-y: auto;
    /* Scrollable */
    padding: 10px;
    /* Padding for scrollbar */
    /* Hide scrollbar for cleaner look */
    scrollbar-width: thin;
    scrollbar-color: #555 #222;
}

.color-swatch {
    width: 13vmin;
    height: 13vmin;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, border-color 0.2s;
}

.color-swatch:active {
    transform: scale(0.9);
}

.color-swatch:hover {
    border-color: white;
    transform: scale(1.1);
}

/* Double Tap Hint (Optional, maybe on Life Display?) */
/* Start Page Overlay */
.start-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.start-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.start-content {
    text-align: center;
    color: white;
    padding: 5vmin;
    animation: fadeIn 0.8s ease-out;
}

.start-content h1 {
    font-size: 8vmin;
    line-height: 1.2;
    margin-bottom: 2vmin;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.start-content p {
    font-size: 3vmin;
    color: #aaa;
    margin-bottom: 3vmin;
}

.start-instructions {
    margin-bottom: 6vmin;
}

.start-instructions p {
    margin-bottom: 1vmin;
    font-size: 2.5vmin;
    font-weight: 600;
    text-transform: uppercase;
    color: #eee;
    letter-spacing: 0.5px;
}

.start-btn {
    background: linear-gradient(45deg, #11998e, #38ef7d);
    color: white;
    border: none;
    padding: 3vmin 10vmin;
    font-size: 5vmin;
    border-radius: 50px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(56, 239, 125, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    display: block;
    margin: 0 auto 3vmin;
    width: 80%;
    max-width: 400px;
}

.start-btn:active {
    transform: scale(0.95);
    box-shadow: 0 5px 15px rgba(56, 239, 125, 0.3);
}

.exit-btn {
    background: transparent;
    border: 2px solid #555;
    color: #888;
    padding: 2vmin 6vmin;
    font-size: 3vmin;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.exit-btn:hover {
    border-color: #ff4444;
    color: #ff4444;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dice Button */
.dice-btn {
    position: absolute;
    bottom: 2vmin;
    right: 2vmin;
    width: 10vmin;
    height: 10vmin;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    /* Circle container */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 900;
    backdrop-filter: blur(5px);
    transition: transform 0.2s, background 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.dice-btn:active {
    transform: scale(0.9);
}

.dice-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Hexagon Shape for Icon */
.dice-icon-shape {
    width: 60%;
    height: 60%;
    background: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5vmin;
    font-weight: 800;
    color: white;
}

/* Dice Modal */
.dice-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Dark overlay */
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(5px);
}

.dice-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.dice-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dice-modal.visible .dice-content {
    transform: scale(1);
}

/* Large Animated D20 */
.dice-cube {
    width: 50vmin;
    height: 50vmin;
    /* Hexagon clip for 2D representation of D20 */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 50px rgba(79, 172, 254, 0.6);
    position: relative;
    font-size: 15vmin;
    font-weight: 900;
    color: white;
    text-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

/* Internal lines to make it look like a D20 (triangle edges) */
.dice-cube::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(30deg, transparent 48%, rgba(255, 255, 255, 0.4) 50%, transparent 52%),
        linear-gradient(-30deg, transparent 48%, rgba(255, 255, 255, 0.4) 50%, transparent 52%),
        linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.4) 50%, transparent 52%);
    z-index: 1;
    pointer-events: none;
}

.dice-cube span {
    z-index: 2;
}

/* Animation Classes */
.dice-cube.rolling {
    animation: shake-roll 0.1s infinite;
}

@keyframes shake-roll {
    0% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(5deg) scale(0.95);
    }

    50% {
        transform: rotate(0deg) scale(1.05);
    }

    75% {
        transform: rotate(-5deg) scale(0.95);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

.dice-hint {
    margin-top: 5vmin;
    font-size: 3vmin;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Force Landscape on Portrait Devices */
@media screen and (orientation: portrait) {
    body {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: #000;
        position: fixed;
        /* Prevent scrolling */
    }

    /* Rotate the main container */
    .app-container {
        transform: rotate(-90deg);
        transform-origin: top left;
        width: 100vh !important;
        height: 100vw !important;
        position: absolute;
        top: 100%;
        left: 0;
        overflow: hidden;
    }

    /* Rotate the start overlay separately as it is outside app-container */
    .start-overlay {
        transform: rotate(-90deg);
        transform-origin: top left;
        width: 100vh !important;
        height: 100vw !important;
        position: absolute;
        top: 100%;
        left: 0;
    }

    /* Modals inside app-container (fixed) might break out of transform flow. 
       Usually fixed inside transformed element behaves as absolute.
       So they should rotate with app-container.
       BUT dice-modal is inside app-container.
       So it should be fine.
    */

    /* However, ensure no weird scrollbars appear */
    * {
        touch-action: none;
        /* Prevent browser gestures interfering */
    }

    /* OVERRIDE FOR 2-PLAYER FIXED PORTRAIT MODE */
    body.portrait-mode .app-container {
        transform: none !important;
        width: 100vw !important;
        height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        position: relative !important;
    }

    body.portrait-mode .start-overlay {
        transform: none !important;
        width: 100vw !important;
        height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
    }

    body.portrait-mode {
        position: static !important;
        /* Allow normal flow */
    }
}

/* Settings Button */
.settings-btn {
    position: absolute;
    bottom: 2vmin;
    left: 2vmin;
    width: 8vmin;
    height: 8vmin;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5vmin;
    color: white;
    cursor: pointer;
    z-index: 900;
    backdrop-filter: blur(5px);
    transition: transform 0.2s, background 0.2s;
}

.settings-btn:active {
    transform: scale(0.9);
}

.settings-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Settings Modal Specifics (extends .reset-modal structure) */
.settings-content {
    background: #1e1e1e;
    min-width: 50vmin;
    max-width: 80%;
    /* Override reset-content padding if needed */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.settings-content h2 {
    color: white;
    margin-bottom: 3vmin;
    font-size: 4vmin;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 2.5vmin;
    font-weight: 600;
    margin-bottom: 2vmin;
    width: 100%;
}

.setting-desc {
    color: #999;
    font-size: 2vmin;
    text-align: center;
    margin-bottom: 3vmin;
    line-height: 1.4;
    width: 100%;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 10vmin;
    height: 5vmin;
    margin-left: 3vmin;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #555;
    transition: .4s;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.slider:before {
    position: absolute;
    content: "";
    height: 4vmin;
    width: 4vmin;
    left: 0.5vmin;
    bottom: 0.35vmin;
    /* vertically center roughly */
    background-color: white;
    transition: .4s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

input:checked+.slider {
    background-color: #2196F3;
}

input:checked+.slider:before {
    transform: translateX(4.8vmin);
    /* Slide distance */
}

/* Rounded sliders */
.slider.round {
    border-radius: 5vmin;
}

.slider.round:before {
    border-radius: 50%;
}

/* Player Count Options */
.player-count-options {
    display: flex;
    justify-content: center;
    gap: 2vmin;
    width: 100%;
    margin-bottom: 2vmin;
}

.player-count-btn {
    background: transparent;
    border: 2px solid #555;
    color: #888;
    width: 10vmin;
    height: 10vmin;
    border-radius: 50%;
    /* Circles */
    font-size: 3.5vmin;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.player-count-btn:hover {
    border-color: #aaa;
    color: #ccc;
}

.player-count-btn.active {
    background: #2196F3;
    border-color: #2196F3;
    color: white;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
    transform: scale(1.1);
}

.player-count-btn:active {
    transform: scale(0.95);
}

/* 2-Player Layout Specifics */
.layout-2 .active-marker {
    top: auto;
    bottom: 15%;
    /* Position below center life total */
}

.layout-2 .mini-grid {
    display: none;
}

/* Commander Button Colors (Dynamic) */
/* Uses player background variable but overlaid with the split gradient */
.cmd-btn[data-attacker="p1"] {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.2) 50%), var(--p1-bg);
    background-size: cover;
}

.cmd-btn[data-attacker="p2"] {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.2) 50%), var(--p2-bg);
    background-size: cover;
}

.cmd-btn[data-attacker="p3"] {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.2) 50%), var(--p3-bg);
    background-size: cover;
}

.cmd-btn[data-attacker="p4"] {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.2) 50%), var(--p4-bg);
    background-size: cover;
}

/* Make mini-grid look clickable */
.mini-grid {
    cursor: pointer;
}