/* === css/tokens.css === */
/* ═══════════════════════════════════════════════════
   TOKENS — Mathematical Precision Design System
   
   Direction: Minimalist, content-first
   Palette: Material You tonal surfaces, warm charcoal
   Depth: Structural (tonal layering + outlines, no shadows)
   Spacing: 4px base unit
   Radius: 8px standard, 16px cards
   ═══════════════════════════════════════════════════ */

:root {
    /* ── Surfaces ── */
    --bg: #262421;
    --surface: #302E2B;
    --surface-h: #3D3A36;

    /* Legacy aliases (remove from CSS gradually) */
    --panel: var(--surface);
    --card: var(--surface);
    --bg-board: var(--bg);
    --surface-a: var(--surface-h);

    /* ── Text ── */
    --text: #F0F0F0;
    --text-2: #BABABA;
    --text-3: #989795;
    --text-4: #6E6C68;

    /* ── Primary: Action Green ── */
    --green: #81B64C;
    --green-d: #629924;
    --green-bg: rgba(129, 182, 76, 0.14);

    /* ── Error: Warm Red ── */
    --red: #FA412D;
    --red-d: #8f2218;
    --red-bg: rgba(250, 65, 45, 0.10);

    /* ── Secondary: Gold (achievements, ranks) ── */
    --amber: #E8A93E;
    --amber-d: #6f4517;
    --amber-bg: rgba(232, 169, 62, 0.12);

    /* ── Tertiary ── */
    --blue: #5DADE2;
    --blue-bg: rgba(93, 173, 226, 0.10);

    /* ── Borders ── */
    --border: rgba(255, 255, 255, 0.08);
    --border-active: rgba(129, 182, 76, 0.42);
    --b1: rgba(255, 255, 255, 0.08);
    --b2: rgba(255, 255, 255, 0.15);
    --b3: rgba(255, 255, 255, 0.25);

    /* ── Spacing (4px base unit) ── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;

    /* ── Radius (rounded philosophy) ── */
    --r-sm: 0.25rem;
    --r: 0.5rem;
    --r-md: 0.625rem;
    --r-lg: 0.75rem;
    --r-xl: 1rem;

    /* ── Structural depth: NO shadows ── */
    --sh: 0 18px 50px rgba(0, 0, 0, 0.22);
    --sh-lg: 0 30px 90px rgba(0, 0, 0, 0.35);

    /* ── Typography ── */
    --f-sans: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --f-mono: 'JetBrains Mono', monospace;

    --fs-xl: 1.5rem;
    --fs-lg: 1.1rem;
    --fs-md: 0.95rem;
    --fs-sm: 0.85rem;
    --fs-xs: 0.78rem;
    --fs-2xs: 0.68rem;

    /* ── Motion ── */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur: 0.15s;

    /* Layout */
    --header-h: 52px;
    --page-grid: rgba(255, 255, 255, 0.02);
    --page-tint: rgba(129, 182, 76, 0.06);
    --panel-bg: #272421;
    --board-shell: #272421;
    --board-home: #312E2B;
    --board-attack: #3D3A36;
    --board-attack-stripe: rgba(255, 255, 255, 0.06);
    --board-divider: #1E1C1A;
    --board-divider-line: rgba(255, 255, 255, 0.12);
    --board-label-contrast: #7A7672;
    --target-bg: rgba(30, 28, 26, 0.80);
    --control-bg: rgba(30, 28, 26, 0.80);
}


/* === css/base.css === */
/* BASE — Mathematical Precision */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{
    font-family:var(--f-sans);font-size:var(--fs-md);font-weight:500;
    line-height:1.5;color:var(--text);background:var(--bg);
    min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body:has(.home:not(.hidden)){
    overflow:hidden;
}
.skip-to-main{
    position:absolute;
    left:16px;
    top:-64px;
    z-index:1000;
    padding:10px 14px;
    border-radius:var(--r);
    background:var(--green);
    color:#1c3700;
    font-size:var(--fs-xs);
    font-weight:800;
    text-decoration:none;
    transition:top var(--dur);
}
.skip-to-main:focus{
    top:16px;
}
button{font-family:inherit;font-weight:600;border:none;background:none;cursor:pointer;color:inherit;line-height:1}
button:disabled{cursor:default;opacity:0.3}
*:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:var(--r-sm)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--text-4);border-radius:3px}
::selection{background:var(--green);color:#fff}
[hidden]{display:none!important}

kbd{
    display:inline-block;padding:1px 5px;
    font-family:var(--f-mono);font-size:0.65rem;font-weight:600;
    color:var(--text-3);background:var(--surface);
    border:1px solid var(--b2);border-radius:var(--r-sm);
    min-width:16px;text-align:center;line-height:1.4;
    vertical-align:middle;
}

[data-tooltip]{
    position:relative;
}
[data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute;
    left:50%;
    bottom:calc(100% + 8px);
    transform:translate(-50%, 6px);
    padding:6px 8px;
    border:1px solid var(--b2);
    border-radius:var(--r-sm);
    background:var(--panel);
    color:var(--text);
    font-size:var(--fs-2xs);
    font-weight:700;
    line-height:1.3;
    white-space:nowrap;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity var(--dur), transform var(--dur), visibility var(--dur);
    box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after{
    opacity:1;
    visibility:visible;
    transform:translate(-50%, 0);
}

.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:1px solid var(--b1);
    border-radius:var(--r);
    color:var(--text-3);
    background:transparent;
    flex-shrink:0;
}
.nav-toggle:hover{
    color:var(--text);
    background:var(--surface);
}

/* Flicker animation for attacks */
@keyframes capture-flash{
    0%{opacity:1}10%{opacity:0.6}20%{opacity:1}30%{opacity:0.8}100%{opacity:1}
}
.flash{animation:capture-flash 0.25s linear}

/* ═══════ PAGE TRANSITIONS ═══════ */

/* Home screen fade */
.home{
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.home.fade-out{
    opacity:0;
    transform:scale(0.97);
    pointer-events:none;
}
.home.fade-in{
    animation: fadeSlideIn 0.4s var(--ease) forwards;
}

/* Game layout entrance */
.game-layout.entering{
    animation: fadeSlideIn 0.4s var(--ease) forwards;
}

@keyframes fadeSlideIn{
    0%{opacity:0;transform:translateY(12px)}
    100%{opacity:1;transform:translateY(0)}
}
@keyframes fadeSlideOut{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(-12px)}
}

/* Tab content transitions */
.tab-panel{
    display:none;
    opacity:0;
    transform:translateY(6px);
}
.tab-panel.active{
    display:block;
    animation: tabFadeIn 0.25s var(--ease) forwards;
}
@keyframes tabFadeIn{
    0%{opacity:0;transform:translateY(6px)}
    100%{opacity:1;transform:translateY(0)}
}

/* Dice capture animation */
@keyframes dieCaptured{
    0%  {transform:scale(1);   opacity:1;   filter:none}
    30% {transform:scale(1.15);opacity:0.9; filter:brightness(1.8)}
    100%{transform:scale(0);   opacity:0;   filter:grayscale(1)}
}
.die.capture-anim{
    animation:dieCaptured 0.45s var(--ease) forwards;
    pointer-events:none;
}

/* Board shake on high-value capture */
@keyframes boardShake{
    0%,100%{transform:translateX(0)}
    15%{transform:translateX(-7px) rotate(-0.5deg)}
    30%{transform:translateX(6px)  rotate(0.4deg)}
    45%{transform:translateX(-4px)}
    60%{transform:translateX(3px)}
    75%{transform:translateX(-2px)}
}
.board.shaking{animation:boardShake 0.45s ease}

/* Confetti pieces */
@keyframes confettiFall{
    0%  {transform:translate(0,0) rotate(0deg) scale(1);opacity:1}
    100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(0.4);opacity:0}
}
.confetti-piece{
    position:fixed;width:8px;height:8px;border-radius:2px;
    pointer-events:none;z-index:9999;
    animation:confettiFall var(--dur,1.2s) ease-out forwards;
}

/* Emoji float reaction */
@keyframes emojiFloat{
    0%  {opacity:1;transform:translateY(0) scale(1)}
    100%{opacity:0;transform:translateY(-90px) scale(1.5)}
}
.emoji-float{
    position:fixed;font-size:1.8rem;pointer-events:none;z-index:9998;
    animation:emojiFloat 1.4s ease-out forwards;
}

/* Victory celebration shimmer */
@keyframes shimmer{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
}
.modal-card.celebrating .modal-result{
    animation:celebrateBounce 0.6s var(--ease);
}
@keyframes celebrateBounce{
    0%{transform:scale(0.5);opacity:0}
    60%{transform:scale(1.2)}
    100%{transform:scale(1);opacity:1}
}

/* Button press feedback */
button:active:not(:disabled){
    transform:scale(0.97);
}
.play-btn:active:not(:disabled),
.action-btn--attack:active:not(:disabled){
    transform:translateY(1px) scale(0.98);
}

/* ═══════ LANDING PAGE NAV + FOOTER ═══════ */
.site-nav {
    background: var(--panel);
    border-bottom: 1px solid var(--b1);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 52px;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    text-decoration: none;
}
.nav-logo svg { flex-shrink: 0; }
.landing-nav-links {
    display: flex;
    gap: 20px;
    margin-left: auto;
}
.landing-nav-links a {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-3);
    text-decoration: none;
    transition: color var(--dur);
}
.landing-nav-links a:hover { color: var(--green); }

.landing-footer {
    max-width: 960px;
    margin: 48px auto 0;
    padding: 20px 24px;
    border-top: 1px solid var(--b1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: var(--fs-xs);
    color: var(--text-4);
}
.landing-footer .footer-links { display: flex; gap: 18px; }
.landing-footer .footer-links a { color: var(--text-4); text-decoration: none; }
.landing-footer .footer-links a:hover { color: var(--green); }

@media (max-width: 640px) {
    .site-nav{
        position:relative;
        flex-wrap:wrap;
        align-items:center;
        height:auto;
        min-height:52px;
        padding:8px 16px;
        gap:12px;
    }
    .site-nav .nav-toggle{
        display:inline-flex;
        margin-left:auto;
    }
    .site-nav .landing-nav-links{
        display:none;
        width:100%;
        margin-left:0;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        padding:8px 0 4px;
    }
    .site-nav.nav-open .landing-nav-links{
        display:flex;
    }
}

/* ═══════ SEO LANDING SECTION ═══════ */
.landing-info {
    background: var(--bg);
    border-top: 1px solid var(--b1);
    padding: 64px 24px 80px;
}
.landing-container {
    max-width: 960px;
    margin: 0 auto;
}
.landing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}
@media (max-width: 640px) {
    .landing-grid { grid-template-columns: 1fr; gap: 32px; }
}
.landing-col h2 {
    font-family: var(--f-sans);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 10px;
}
.landing-col p {
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.75;
    margin-bottom: 10px;
}
.landing-col p strong { color: var(--text); }
.landing-link {
    display: inline-block;
    color: var(--green);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    margin-top: 6px;
}
.landing-link:hover { text-decoration: underline; }
.landing-feats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding-top: 36px;
    border-top: 1px solid var(--b1);
    margin-bottom: 24px;
}
.landing-feat {
    background: var(--card);
    border: 1px solid var(--b1);
    border-radius: var(--r-lg);
    padding: 14px 16px;
}
.landing-feat strong {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
}
.landing-feat span {
    font-size: var(--fs-xs);
    color: var(--text-3);
    line-height: 1.5;
}
.landing-pages {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
}
.landing-page-link {
    display: inline-block;
    padding: 8px 16px;
    background: var(--card);
    border: 1px solid var(--b1);
    border-radius: var(--r);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--dur), color var(--dur);
}
.landing-page-link:hover {
    border-color: var(--green);
    color: var(--green);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* === css/menu.css === */
/* ═══════════════════════════════════════════════════
   HOME SCREEN — Mathematical Precision
   ═══════════════════════════════════════════════════ */

/* MINIMALIST HOME LAYOUT - header / main / footer / drawer */

/* Site Header */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 var(--sp-5);
    z-index: 90;
    border-bottom: 1px solid var(--b1);
    background: rgba(38,36,33,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.site-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    text-decoration: none;
    color: var(--text);
}
.site-brand-name {
    font-weight: 800;
    font-size: var(--fs-md);
    letter-spacing: 0;
    margin: 0;
}

.site-header-nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
.hdr-nav-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 6px 12px;
    border-radius: var(--r);
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dur), color var(--dur);
}
.hdr-nav-btn:hover {
    background: var(--surface);
    color: var(--text);
}

.site-header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    justify-self: end;
}
.site-header .nav-toggle {
    display: none;
}

.hdr-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 6px 10px;
    border-radius: var(--r);
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    transition: background var(--dur), color var(--dur);
}
.hdr-btn:hover {
    background: var(--surface);
    color: var(--text);
}
/* Header Settings Dropdown */
.hdr-dropdown {
    position: relative;
}
.hdr-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--panel);
    border: 1px solid var(--b1);
    border-radius: var(--r);
    box-shadow: 0 12px 32px rgba(0,0,0,0.28);
    z-index: 100;
    padding: var(--sp-2) 0;
}
.hdr-dropdown.open .hdr-dropdown-menu {
    display: block;
}
.hdr-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-2);
}
.hdr-dropdown-label {
    font-weight: 600;
    color: var(--text-3);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hdr-dropdown-toggle {
    padding: 3px 10px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--b1);
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur), border-color var(--dur);
}
.hdr-dropdown-toggle:hover {
    background: var(--surface-h);
    border-color: var(--b2);
}
.hdr-dropdown-divider {
    height: 1px;
    background: var(--b1);
    margin: var(--sp-1) 0;
}
.hdr-dropdown-btn {
    width: 100%;
    text-align: left;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    border-radius: 0;
    transition: background var(--dur), color var(--dur);
}
.hdr-dropdown-btn:hover {
    background: var(--surface);
    color: var(--text);
}
.hdr-volume-slider {
    width: 100px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--surface);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.hdr-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--bg);
    cursor: pointer;
}
.hdr-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--bg);
    cursor: pointer;
}

.hdr-btn--account {
    border: 1px solid var(--b1);
    color: var(--text-2);
}
.hdr-btn--account:hover {
    border-color: var(--b2);
    color: var(--text);
}
.hdr-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green);
    color: #1c3700;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hdr-name {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hdr-btn--account[data-auth-state="guest"] {
    padding-inline: 12px;
}
.hdr-btn--account[data-auth-state="guest"] .hdr-avatar {
    display: none;
}
.hdr-btn--account[data-auth-state="guest"] .hdr-name {
    max-width: 220px;
    color: var(--text);
}

/* Home Main — two-column split */
.home-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(24px, 5vw, 80px);
    width: 100%;
    flex: 1;
    min-height: 0;
    max-width: 1100px;
    margin: 0 auto;
    padding: calc(var(--header-h) + 32px) clamp(16px, 4vw, 40px) var(--sp-6);
    box-sizing: border-box;
}

/* Left: Hero info — override legacy arena.css rules */
.home-main > .home-hero {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    background: transparent;
    border: none;
    box-shadow: none;
    min-height: unset;
    padding: 0;
    position: relative;
    overflow: visible;
}
.home-main > .home-hero::before,
.home-main > .home-hero::after {
    display: none;
}
.home-main .home-hero-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.home-hero-title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
    line-height: 1.1;
}
.home-hero-sub {
    font-size: var(--fs-xs);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin: 2px 0 0;
}
.home-hero-desc {
    font-size: var(--fs-sm);
    color: var(--text-2);
    line-height: 1.6;
    margin: 0;
}
.home-hero-desc strong { color: var(--text); }
.home-hero-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.home-hero-features li {
    font-size: var(--fs-sm);
    color: var(--text-2);
    padding-left: var(--sp-4);
    position: relative;
}
.home-hero-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}
.home-hero-badges {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.home-badge {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-3);
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--b1);
    border-radius: var(--r-sm);
}
.home-badge--green {
    color: var(--green);
    border-color: var(--green);
}
.home-hero-credit {
    font-size: var(--fs-2xs);
    color: var(--text-4);
}
.home-hero-credit a {
    color: var(--text-4);
    text-decoration: none;
    transition: color var(--dur);
}
.home-hero-credit a:hover { color: var(--text-3); }

/* Dice decoration row */
.home-dice-row {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid var(--b1);
    border-radius: var(--r);
    background: var(--surface);
    pointer-events: none;
    user-select: none;
    justify-content: center;
}
.home-dice-row .hero-die {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.home-dice-row .die-label {
    font-size: 0.6rem;
    color: var(--text-4);
    font-family: var(--f-mono);
    font-weight: 600;
}

/* Right: Play Form */
.home-form {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--b1);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
}

.home-route-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.home-route-title {
    margin: 0;
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    line-height: 1.08;
    text-transform: uppercase;
}

.home-route-copy,
.home-route-note {
    margin: 0;
    color: var(--text-2);
    line-height: 1.55;
    font-size: var(--fs-sm);
}

.home-route-note {
    color: var(--text-3);
}

.home-route-actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.home-route-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-decoration: none;
}

.home-route-btn--secondary {
    color: var(--text);
}

.play-page-only {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.play-stack,
#difficultySection {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.play-page-badges {
    margin-top: 0;
}

.mode-row {
    display: flex;
    gap: var(--sp-2);
}

.diff-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
}
.diff-row .diff-btn {
    justify-content: flex-start;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    padding: var(--sp-2) var(--sp-3);
}
.diff-row .diff-btn .diff-dot {
    flex-shrink: 0;
}

.timers-inline {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.timer-inline-group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    row-gap: var(--sp-2);
    flex-wrap: wrap;
}
.timer-inline-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 36px;
}
.timer-presets {
    display: flex;
    gap: 4px;
}

/* Site Footer (legacy, kept for other pages) */
.site-footer a {
    color: var(--text-4);
    text-decoration: none;
    transition: color var(--dur);
}
.site-footer a:hover { color: var(--text-3); }

/* Account Drawer */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease);
}
.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.account-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 100vw);
    background: var(--surface);
    border-left: 1px solid var(--b1);
    z-index: 160;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s var(--ease);
    overflow: hidden;
}
.account-drawer.open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--b1);
    flex-shrink: 0;
}
.drawer-title {
    font-size: var(--fs-md);
    font-weight: 700;
}
.drawer-close {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    color: var(--text-3);
    transition: all var(--dur);
}
.drawer-close:hover {
    color: var(--text);
    background: var(--surface-h);
}
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-5);
}

/* Leaderboard Modals */
.lb-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}
.lb-modal-overlay.active { display: flex; }

.lb-modal {
    background: var(--panel);
    border: 1px solid var(--b1);
    border-radius: var(--r-lg);
    max-width: 480px;
    width: 100%;
    max-height: calc(100vh - var(--sp-8));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lb-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--b1);
    flex-shrink: 0;
}
.lb-modal-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-md);
    font-weight: 700;
    margin: 0;
    color: var(--text);
}
.lb-modal-close {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    color: var(--text-3);
    transition: all var(--dur);
}
.lb-modal-close:hover {
    color: var(--text);
    background: var(--surface-h);
}
.lb-modal-filter {
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--b1);
    flex-shrink: 0;
}
.lb-country-select {
    width: 100%;
    cursor: pointer;
}
.lb-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-3) var(--sp-5) var(--sp-5);
}

.lb-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
}
.lb-row:nth-child(odd) { background: var(--surface); }
.lb-row.lb-me { border: 1px solid var(--green); background: var(--green-bg); }
.lb-rank {
    width: 28px;
    font-family: var(--f-mono);
    font-weight: 700;
    color: var(--text-3);
    text-align: center;
    flex-shrink: 0;
}
.lb-name { flex: 1; font-weight: 600; color: var(--text); }
.lb-country {
    font-size: var(--fs-2xs);
    color: var(--text-4);
    flex-shrink: 0;
}
.lb-elo {
    font-family: var(--f-mono);
    font-weight: 700;
    color: var(--green);
    flex-shrink: 0;
    min-width: 48px;
    text-align: right;
}
.lb-record {
    font-size: var(--fs-2xs);
    color: var(--text-3);
    flex-shrink: 0;
    min-width: 56px;
    text-align: right;
}

/* Drawer sections */
.drawer-section {
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--b1);
}
.drawer-section:last-of-type {
    border-bottom: none;
}

.profile-country-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.profile-country-row .profile-username-label {
    min-width: 70px;
}
.profile-country-select {
    flex: 1;
    cursor: pointer;
}

/* Mobile adjustments */
@media (max-width: 860px) {
    .home-main {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
    }
    .home-main > .home-hero { text-align: left; }
    .home-form { max-width: 100%; }
}
@media (max-width: 768px) {
    .home-main > .home-hero { display: flex; }
}
@media (max-width: 640px) {
    .site-header {
        grid-template-columns: auto auto 1fr auto;
        gap: var(--sp-2);
        padding: 0 var(--sp-3);
    }
    .site-header .nav-toggle {
        display: inline-flex;
    }
    .site-header-nav {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        left: var(--sp-3);
        right: var(--sp-3);
        z-index: 95;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: var(--sp-3);
        border: 1px solid var(--b1);
        border-radius: var(--r-lg);
        background: var(--panel);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    }
    .site-header.nav-open .site-header-nav {
        display: flex;
    }
    .hdr-nav-btn {
        justify-content: flex-start;
        padding: 10px 12px;
        font-size: var(--fs-sm);
        gap: var(--sp-2);
    }
    .site-header-actions {
        gap: 6px;
    }
    .site-header-actions .leaderboard-pill,
    .site-header-actions .hdr-name {
        display: none;
    }
    .site-header-actions .hdr-btn--account {
        padding-right: 8px;
    }
    .site-header-actions .hdr-btn--account[data-auth-state="guest"] {
        padding-right: 10px;
        padding-left: 10px;
    }
    .site-header-actions .hdr-btn--account[data-auth-state="guest"] .hdr-name {
        display: block;
        max-width: 132px;
        white-space: normal;
        text-align: right;
        line-height: 1.15;
        font-size: 0.68rem;
    }
    .site-header-actions .hdr-btn--account[data-auth-state="guest"] .hdr-avatar {
        display: none;
    }
    .lb-modal { max-width: 100%; border-radius: var(--r); }
}
@media (max-width: 480px) {
    .site-brand-name { display: none; }
    .home-dice-row { display: none; }
    .mode-row { flex-wrap: wrap; }
}
.home{
    position:fixed;inset:0;background:var(--bg);
    z-index:100;
    overflow-y:auto;overflow-x:hidden;
    display:flex;flex-direction:column;
    padding-top:0;
}
.home.hidden{display:none}

/* Legacy card/tabs - kept for in-game screens only, not used on home */
.home-card{
    background:var(--panel);border:1px solid var(--b1);border-radius:var(--r-lg);
    padding:var(--sp-6) var(--sp-6) var(--sp-4);max-width:480px;width:100%;
    position:relative;z-index:1;
    max-height:calc(100vh - var(--sp-8));overflow-y:auto;
}

/* Brand */
.home-brand{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.home-title{font-size:var(--fs-xl);font-weight:800;letter-spacing:-0.04em}
.home-sub{font-size:var(--fs-xs);color:var(--text-3);text-transform:uppercase;letter-spacing:0.05em}

/* Tabs */
.home-tabs{
    display:flex;gap:2px;background:var(--surface);border-radius:var(--r);padding:2px;
    margin-bottom:var(--sp-5);
}
.home-tab{
    flex:1;padding:var(--sp-2);border-radius:6px;font-size:var(--fs-sm);font-weight:600;
    color:var(--text-3);transition:all var(--dur) var(--ease);text-align:center;
}
.home-tab:hover{color:var(--text-2)}
.home-tab.active{background:var(--card);color:var(--text);border:1px solid var(--border-active)}

.tab-panel{display:none}
.tab-panel.active{display:block}

/* Fields */
.home-form .field{margin-bottom:0}
.field-label{
    display:block;font-size:var(--fs-xs);font-weight:700;color:var(--text-3);
    text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--sp-2);
}
.field-input{
    width:100%;padding:var(--sp-2) var(--sp-3);
    background:var(--bg);border:1px solid var(--b1);border-radius:var(--r);
    color:var(--text);font-family:var(--f-sans);font-size:var(--fs-md);font-weight:600;
    outline:none;transition:border-color var(--dur);
}
.field-input:focus{border-color:var(--green)}
.field-input::placeholder{color:var(--text-4)}

.field-row{display:flex;gap:var(--sp-2)}

/* Option buttons */
.opt-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
    padding:var(--sp-3);background:var(--surface);border:1px solid var(--b1);
    border-radius:var(--r);font-size:var(--fs-sm);color:var(--text-3);
    transition:all var(--dur) var(--ease);
}
.opt-btn:hover{background:var(--surface-h)}
.opt-btn.selected{border-color:var(--green);color:var(--text);background:var(--green-bg)}

/* Difficulty */
.diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
.diff-btn{
    display:flex;align-items:center;gap:var(--sp-2);
    padding:var(--sp-2) var(--sp-3);background:var(--surface);border:1px solid var(--b1);
    border-radius:var(--r);font-size:var(--fs-sm);color:var(--text-3);
    transition:all var(--dur) var(--ease);
}
.diff-btn:hover{background:var(--surface-h)}
.diff-btn.selected{border-color:var(--green);color:var(--text);background:var(--green-bg)}
.diff-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.diff-text{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.diff-hint{font-size:var(--fs-2xs);color:var(--text-4);font-weight:500;white-space:nowrap}

/* Sound toggle */
.sound-toggle{
    display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
    background:var(--surface);border:1px solid var(--b1);border-radius:var(--r);
    font-size:var(--fs-sm);color:var(--text-2);transition:all var(--dur);
}
.sound-toggle:hover{background:var(--surface-h)}

/* Action buttons */
.home-form .home-actions{display:flex;gap:var(--sp-2);margin-top:0;flex-wrap:wrap;
    position:static;background:transparent;border-top:none;min-height:unset;padding:0}
.home-form .home-actions .play-btn{flex:1;min-width:120px}
.home-form .home-actions .quick-play-btn{flex:0 0 auto;background:transparent;border:1px solid var(--b2);color:var(--text-2)}
.home-form .home-actions .settings-btn{flex:0 0 auto;background:transparent;border:1px solid var(--b1);color:var(--text-3)}

.play-btn{
    flex:1;padding:var(--sp-4) var(--sp-6);
    background:var(--green);color:#1c3700;font-size:var(--fs-lg);font-weight:800;
    border-radius:var(--r);display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
    transition:all var(--dur) var(--ease);letter-spacing:0.01em;
}
.play-btn:hover{background:var(--green-d);color:#fff}
.play-btn:active{transform:translateY(1px)}

.quick-play-btn{
    padding:var(--sp-3) var(--sp-4);
    background:transparent;border:1px solid var(--text);border-radius:var(--r);
    font-size:var(--fs-sm);font-weight:600;color:var(--text-2);
    display:flex;align-items:center;gap:var(--sp-1);
    transition:all var(--dur);
}
.quick-play-btn:hover{background:var(--surface-h);color:var(--text)}

/* ═══════ STATS TAB ═══════ */
.stats-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2);
    margin-bottom:var(--sp-4);
}

.stat-card{
    background:var(--bg);border:1px solid var(--b1);border-radius:var(--r);
    padding:var(--sp-3);
}
.stat-value{font-family:var(--f-mono);font-size:var(--fs-xl);font-weight:800;color:var(--text);line-height:1.2}
.stat-label{font-size:var(--fs-2xs);font-weight:600;color:var(--text-4);text-transform:uppercase;letter-spacing:0.06em;margin-top:2px}

.stat-card.wide{grid-column:1/-1}

/* Hero stat card */
.stat-card--hero {
    background: var(--card);
    border-color: var(--border-active);
    padding: var(--sp-4);
}
.stat-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: var(--sp-3);
}
.stat-hero-item { text-align: center; }
.stat-hero-sep {
    width: 1px;
    height: 36px;
    background: var(--b2);
}
.stat-bar-wrap { display: flex; flex-direction: column; gap: 4px; }
.stat-bar-label {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.stat-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--bg)}
.stat-bar-fill{height:100%;transition:width 0.3s var(--ease)}
.stat-bar-fill.win{background:var(--green)}
.stat-bar-fill.loss{background:var(--red)}

.stats-empty{
    padding:var(--sp-10) var(--sp-4);text-align:center;
}
.stats-empty p{color:var(--text-3);font-size:var(--fs-sm);font-weight:600}
.stats-empty-sub{color:var(--text-4)!important;font-weight:500!important;font-size:var(--fs-xs)!important;margin-top:var(--sp-1)}

.reset-stats-btn{
    width:100%;padding:var(--sp-2);font-size:var(--fs-xs);color:var(--text-4);
    border:1px solid var(--b1);border-radius:var(--r);transition:all var(--dur);background:transparent;
}
.reset-stats-btn:hover{color:var(--red);border-color:rgba(224,64,64,0.3)}

/* ═══════ HOW TO PLAY TAB ═══════ */
.howto{max-height:350px;overflow-y:auto;padding-right:var(--sp-2)}
.howto-s{margin-bottom:var(--sp-4)}
.howto-s h3{font-size:var(--fs-sm);font-weight:700;color:var(--green);margin-bottom:var(--sp-1)}
.howto-s p{font-size:var(--fs-sm);color:var(--text-2);line-height:1.6}
.howto-s strong{color:var(--text)}

.kb-grid{
    display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-3);
    font-size:var(--fs-xs);color:var(--text-3);margin-top:var(--sp-2);
}

/* Timer settings */
.timer-setting{
    display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
}
.field-input--sm{
    width:64px;text-align:center;padding:var(--sp-1) var(--sp-2);
    font-family:var(--f-mono);font-size:var(--fs-sm);
}
.timer-unit{font-size:var(--fs-xs);color:var(--text-3);min-width:52px}
.timer-preset,.move-preset{
    padding:var(--sp-1) var(--sp-2);font-size:var(--fs-2xs);font-weight:600;
    background:var(--surface);border:1px solid var(--b1);border-radius:var(--r-sm);
    color:var(--text-3);transition:all var(--dur);
}
.timer-preset:hover,.move-preset:hover{background:var(--surface-h);color:var(--text-2)}
.timer-preset.active,.move-preset.active{border-color:var(--green);color:var(--text);background:var(--green-bg)}
.field-hint{font-weight:400;color:var(--text-4);text-transform:none;letter-spacing:0}

/* Settings button */
.settings-btn{
    display:flex;align-items:center;justify-content:center;gap:var(--sp-1);
    padding:var(--sp-2);font-size:var(--fs-xs);font-weight:600;
    color:var(--text-3);border:1px solid var(--b1);border-radius:var(--r);
    transition:all var(--dur);
}
.settings-btn:hover{color:var(--text-2);border-color:var(--b2);background:var(--surface)}
.settings-btn svg{opacity:0.6}

/* Settings overlay */
.settings-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.6);
    display:none;align-items:center;justify-content:center;padding:var(--sp-4);z-index:200;
}
.settings-overlay.active{display:flex}

.settings-modal{
    background:var(--panel);border:2px solid var(--border-active);border-radius:var(--r-lg);
    max-width:420px;width:100%;
    max-height:calc(100vh - var(--sp-8));overflow-y:auto;
}
.settings-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:var(--sp-4) var(--sp-4) var(--sp-2);
}
.settings-title{font-size:var(--fs-lg);font-weight:700;color:var(--text)}
.settings-close{
    width:28px;height:28px;display:flex;align-items:center;justify-content:center;
    font-size:var(--fs-md);color:var(--text-3);border-radius:var(--r-sm);
    transition:all var(--dur);
}
.settings-close:hover{color:var(--text);background:var(--surface)}

.settings-body{padding:var(--sp-2) var(--sp-4) var(--sp-4)}

.setting-group{margin-bottom:var(--sp-4)}
.setting-group:last-child{margin-bottom:0}
.setting-label{
    display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--text-3);
    text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--sp-2);
}
.setting-row{display:flex;gap:var(--sp-2)}
.settings-country-note,
.settings-country-status{
    margin-top:var(--sp-2);
    font-size:var(--fs-xs);
    line-height:1.45;
}
.settings-country-note{color:var(--text-3)}
.settings-country-status{
    min-height:1.45em;
    color:var(--text-4);
}
.settings-country-status.error{color:var(--red)}
.settings-country-status.success{color:var(--green)}

/* Credit */
.home-credit{
    text-align:center;padding-top:var(--sp-4);margin-top:var(--sp-2);
    border-top:1px solid var(--b1);
    font-size:var(--fs-2xs);color:var(--text-4);
}
.home-credit a{color:var(--green);text-decoration:none;font-weight:600}
.home-credit a:hover{text-decoration:underline}

/* Legacy hero layout removed (Phase 2 redesign) */

@media(max-width:500px){
    .home{padding:var(--sp-2)}
    .home-card{padding:var(--sp-4) var(--sp-3) var(--sp-3)}
    .home-title{font-size:var(--fs-lg)}
    .home-tabs{margin-bottom:var(--sp-3)}
    .home-tab{font-size:var(--fs-2xs);padding:var(--sp-1)}
    .field{margin-bottom:var(--sp-3)}
    .field-label{font-size:0.6rem}
    .diff-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-1)}
    .diff-btn{padding:var(--sp-1) var(--sp-2);font-size:var(--fs-2xs)}
    .opt-btn{padding:var(--sp-2);font-size:var(--fs-2xs)}
    .play-btn{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm)}
    .howto{max-height:250px}
    .howto-s p{font-size:var(--fs-xs)}
}


/* === css/board.css === */
/* ═══════════════════════════════════════════════════
   BOARD — Mathematical Precision layout
   Opp Home | Opp Attack | ⚔ | Your Attack | Your Home
   ═══════════════════════════════════════════════════ */

.game-layout {
    display: grid;
    grid-template-columns: auto 420px;
    justify-content: center;
    gap: 0;
    min-height: 100dvh;
    /* Optimize for mobile viewports */
    padding: var(--sp-4);
    align-content: center;
    /* Center vertically if space allows */
}

.board-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: center
}

/* ── Player bars ── */
.player-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) var(--sp-3);
    background: var(--panel);
    min-height: 54px;
}

/* Colored left accent per player */
.player-bar--opp { border-left: 3px solid rgba(255, 180, 171, 0.45); }
.player-bar--you { border-left: 3px solid rgba(129, 182, 76, 0.45); }

/* Die pip indicators */
.bar-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.dice-pips {
    display: flex;
    gap: 3px;
    align-items: center;
}

.dp {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    opacity: 0.1;
    transition: opacity 0.4s var(--ease);
}

.dp.active { opacity: 1; }
.dp--you { background: var(--green); }
.dp--opp { background: var(--red); }

.player-bar--opp {
    border-radius: var(--r) var(--r) 0 0
}

.player-bar--you {
    border-radius: 0 0 var(--r) var(--r)
}

.bar-left {
    display: flex;
    align-items: center;
    gap: var(--sp-2)
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: var(--fs-sm)
}

.avatar--you {
    background: var(--green);
    color: #fff
}

.avatar--opp {
    background: var(--red);
    color: #fff
}

.bar-info {
    display: flex;
    align-items: center;
    gap: var(--sp-2)
}

.bar-name {
    font-size: var(--fs-sm);
    font-weight: 700
}

.bar-badge {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-3);
    background: var(--surface);
    padding: 1px 6px;
    border-radius: var(--r-sm)
}

.first-tag {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--amber);
    background: var(--amber-bg);
    padding: 1px 6px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(240, 192, 64, 0.2)
}

.bar-dice {
    font-family: var(--f-mono);
    font-size: var(--fs-sm);
    color: var(--text-3);
    font-weight: 600
}

/* ── Board ── */
.board {
    background: var(--bg-board);
    user-select: none;
    position: relative;
}

/* ── Bot calculation toast ── */
.calc-toast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    background: var(--panel);
    border: 1px solid var(--border-active);
    border-radius: var(--r);
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    text-align: center;
    z-index: 100;
    pointer-events: none;
    max-width: 90%;
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s var(--ease);
}
.calc-toast.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.calc-toast.toast--top {
    top: 16px;
    transform: translate(-50%, 0) scale(0.92);
}
.calc-toast.toast--top.visible {
    transform: translate(-50%, 0) scale(1);
}
.calc-toast.toast--info { border-color: var(--text-3); }
.calc-toast.toast--success { border-color: var(--green); color: var(--green); }
.calc-toast.toast--error { border-color: var(--red); color: var(--red); }

/* ── Board zones ── */
.board-zone {
    padding: var(--sp-3) var(--sp-4);
    position: relative;
    overflow: hidden;
    transition: background 0.3s var(--ease);
}

/* Active Player Glow */
.board-zone--you-home.active {
    background: linear-gradient(to bottom, rgba(129, 182, 76, 0.08), transparent);
    box-shadow: inset 0 4px 12px rgba(129, 182, 76, 0.12);
}

.board-zone--opp-home.active {
    background: linear-gradient(to top, rgba(224, 64, 64, 0.05), transparent);
    box-shadow: inset 0 -4px 12px rgba(224, 64, 64, 0.1);
}

.board-label {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--board-label-contrast);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--sp-1) 0
}

.board-zone--opp-home .board-label {
    text-align: right
}

/* Attack zones — darker inset */
/* Attack zones — same padding as home zones */
/* Attack zones — darker inset */
.board-zone--opp-attack,
.board-zone--you-attack {
    padding: var(--sp-3) var(--sp-4);
    background: transparent;
    border-top: 1px solid var(--b1);
    border-bottom: 1px solid var(--b1);
}

/* ── Divider ── */
.board-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
    position: relative;
    background: var(--board-divider)
}

.board-divider::before,
.board-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--board-divider-line);
}

.divider-icon {
    padding: 0 var(--sp-3);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-4);
}
.divider-round {
    padding: 0 var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-4);
}
.divider-score {
    padding: 0 var(--sp-2);
    font-family: var(--f-mono);
    font-size: var(--fs-xs);
    font-weight: 800;
    color: var(--text-3);
}

/* ── Dice row ── */
.dice-row {
    display: grid;
    grid-template-columns: repeat(6, auto);
    justify-content: center;
    gap: 3px
}

/* Attack row — same layout as home row */
.dice-row--attack {
    display: grid;
    grid-template-columns: repeat(6, auto);
    justify-content: center;
    gap: 3px;
}

/* Expression mode: operators are inline symbols, not grid cells */
.dice-row--expr {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
}
.dice-row--expr .attack-die {
    flex: 0 0 auto;
}
.attack-op {
    font-family: var(--f-mono);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--blue);
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.attack-paren {
    font-family: var(--f-mono);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--amber);
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Attack slot (empty) — same size as a die ── */
.attack-slot {
    min-height: 80px;
    border-radius: var(--r-sm);
    border: 2px dashed var(--b2);
    opacity: 0.25;
}

/* ── Attack die (filled slot) ── */
.attack-die {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    position: relative;
    min-height: 80px;
    padding: var(--sp-1) 4px;
    animation: slot-in 0.25s var(--ease);
    background: transparent;
    border: none;
}

.attack-die.you-die,
.attack-die.opp-die {
    border: none;
    box-shadow: none;
}

/* Bg from home die type */
.attack-die:nth-child(odd) {
    background: transparent
}

.attack-die:nth-child(even) {
    background: transparent
}

@keyframes slot-in {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.9)
    }

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

.attack-die::before {
    display: none;
}


/* ── Home row die ── */
.die {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    cursor: pointer;
    position: relative;
    min-height: 80px;
    padding: var(--sp-2) 4px;
    transition: all var(--dur) var(--ease);
    border: 2px solid transparent;
    background: transparent;
}

/* Hover handled in dice.css via .die-svg transform */

/* Selection rings now handled in dice.css via stroke/filter, but we keep some container styles */
.die.selected {
    /* Handled in dice.css mainly */
    position: relative;
    /* Maintain positioning context */
}

/* .die.in-attack — handled in dice.css */

.die.target {
    /* Handled in dice.css */
    position: relative;
    /* Maintain positioning context */
}

/* Remove top border bar */
.die::before {
    display: none;
}

.die.rolling {
    animation: die-roll 0.35s var(--ease);
}

@keyframes die-roll {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(0.85);
        opacity: 0.5;
    }

    70% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ═══════ MOBILE ═══════ */
@media(max-width:860px) {
    .game-layout {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
        padding: var(--sp-1);
        padding-bottom: 0;
        gap: 0;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* Push controls to bottom */
    }

    .board-column {
        align-self: start
    }

    .board-zone {
        padding: var(--sp-1) var(--sp-2)
    }

    /* Attack zones — match home row */
    .board-zone--opp-attack,
    .board-zone--you-attack {
        padding: var(--sp-1) var(--sp-2)
    }

    .attack-slot {
        min-height: 54px
    }

    .attack-die {
        min-height: 54px
    }

    .board-divider {
        padding: 1px 0
    }

    .divider-icon {
        font-size: 0.75rem;
        padding: 0 var(--sp-2)
    }

    /* Dice — bigger touch targets */
    .die {
        min-height: 54px;
        padding: var(--sp-1) 2px
    }

    /* Player bars */
    .player-bar {
        padding: var(--sp-2) var(--sp-2);
        min-height: 42px;
    }

    .avatar {
        width: 26px;
        height: 26px;
        font-size: var(--fs-2xs)
    }

    .bar-name {
        font-size: var(--fs-xs)
    }

    .bar-dice {
        font-size: var(--fs-xs)
    }

    .board-label {
        font-size: 0.55rem;
        padding: 1px 0
    }
}


/* === css/panel.css === */
/* ═══════════════════════════════════════════════════
   SIDE PANEL — Mathematical Precision
   Move History + Battle Controls
   ═══════════════════════════════════════════════════ */

.side-panel {
    background: var(--panel);
    border-left: 1px solid var(--b1);
    display: flex;
    flex-direction: column;
    align-self: center;
    max-height: calc(100vh - var(--sp-8));
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    overflow: hidden;
}

/* ── Panel header: turn + timer ── */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--b1);
}

.turn-indicator {
    display: flex;
    align-items: center;
    gap: var(--sp-2)
}

.turn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background var(--dur);
}

.turn-dot.you {
    background: var(--green)
}

.turn-dot.opp {
    background: var(--red)
}

.turn-label {
    font-size: var(--fs-sm);
    font-weight: 700
}

.turn-label.you {
    color: var(--green)
}

.turn-label.opp {
    color: var(--red)
}

.penalty-tag {
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--amber);
    background: var(--amber-bg);
    padding: 1px 6px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(240, 192, 64, 0.15);
}

.timer-group {
    display: flex;
    gap: var(--sp-1);
    align-items: center
}

.timer-box {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-family: var(--f-mono);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text-2);
    padding: var(--sp-1) var(--sp-2);
    background: var(--surface);
    border-radius: var(--r-sm);
}

.timer-box.warning {
    color: var(--amber)
}

.timer-box.critical {
    color: var(--red);
    animation: pulse 0.8s ease infinite
}

.move-timer-box {
    font-size: var(--fs-xs);
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid var(--b1);
}

.move-timer-box.urgent {
    color: var(--red);
    border-color: var(--red);
    animation: pulse 0.5s ease infinite
}

.move-timer-label {
    font-size: var(--fs-2xs);
    color: var(--text-4);
    margin-left: 1px
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.4
    }
}

/* ═══════ MOVE HISTORY ═══════ */
.move-history {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--b1);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--b1);
    border-left: 3px solid var(--green);
    padding-left: calc(var(--sp-4) - 3px);
    flex-shrink: 0;
}

.history-count {
    font-weight: 600;
    font-family: var(--f-mono);
    text-transform: none;
    letter-spacing: 0
}

.history-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-2);
    min-height: 100px;
}

.history-empty {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--text-4);
}

/* Move entry — chess.com style numbered rows */
.move-entry {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--sp-1);
    padding: 3px var(--sp-2);
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    margin-bottom: 2px;
}

.move-entry:nth-child(odd) {
    background: var(--surface)
}

.move-num {
    font-family: var(--f-mono);
    font-weight: 700;
    color: var(--text-4);
    text-align: right;
    padding-right: var(--sp-2);
}

.move-text {
    color: var(--text-2)
}

.move-text.you {
    color: var(--green)
}

.move-text.opp {
    color: var(--red)
}

.move-text.sys {
    color: var(--text-4);
    font-style: italic
}

/* ═══════ BATTLE CONTROLS ═══════ */
.battle-controls {
    padding: var(--sp-3) var(--sp-4);
    flex-shrink: 0;
}

.controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--b1);
}

.thinking-badge {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-2xs);
    color: var(--amber);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.thinking-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber);
    animation: pulse 0.6s ease infinite;
}

/* ── Mode tabs ── */
.mode-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: var(--sp-3);
    background: var(--surface);
    border-radius: var(--r);
    padding: 2px
}

.mode-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: var(--sp-2);
    border-radius: 6px;
    font-size: var(--fs-xs);
    color: var(--text-3);
    transition: all var(--dur) var(--ease);
}

.mode-tab:hover:not(:disabled) {
    color: var(--text-2)
}

.mode-tab.active {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border-active)
}

.mode-tab kbd {
    margin-left: 2px
}

/* ── Expression builder ── */
.expr-builder {
    background: var(--bg);
    border: 1px solid var(--b1);
    border-radius: var(--r);
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.expr-display {
    background: var(--bg);
    border: 1px solid var(--b1);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
    font-family: var(--f-mono);
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: var(--sp-2);
}

.expr-empty {
    color: var(--text-4);
    font-size: var(--fs-xs);
    font-family: var(--f-sans);
    font-weight: 400
}

.expr-val {
    color: var(--green);
    background: var(--green-bg);
    padding: 1px 5px;
    border-radius: 3px
}

.expr-op {
    color: var(--blue);
    padding: 0 2px
}

.expr-paren {
    color: var(--amber);
    font-weight: 800
}

.expr-eval {
    text-align: center;
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 700;
    border-radius: var(--r-sm);
    margin-bottom: var(--sp-2);
}

.expr-eval.valid {
    color: var(--green);
    background: var(--green-bg);
    border: 1px solid rgba(129, 182, 76, 0.2)
}

.expr-eval.invalid {
    color: var(--red);
    background: var(--red-bg);
    border: 1px solid rgba(224, 64, 64, 0.15)
}

.op-row {
    display: flex;
    gap: 3px;
    justify-content: center
}

.op-btn {
    width: 32px;
    height: 32px;
    background: var(--card);
    border: 1px solid var(--b1);
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur) var(--ease);
}

.op-btn:hover:not(:disabled) {
    background: var(--surface-h);
    border-color: var(--b2)
}

.op-btn--paren {
    color: var(--amber)
}

.op-btn--undo {
    font-size: 0.85rem;
    color: var(--text-3)
}

/* ── Target ── */
.target-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
    border-radius: var(--r);
    margin-bottom: var(--sp-3);
}

.target-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-3)
}

.target-value {
    font-family: var(--f-mono);
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--red);
    min-width: 36px;
    text-align: center;
}

.target-hint {
    font-size: var(--fs-2xs);
    color: var(--text-4);
    margin-left: auto
}

/* ── Rule hint ── */
.rule-hint {
    font-size: var(--fs-2xs);
    color: var(--amber);
    background: var(--amber-bg);
    border: 1px solid rgba(240, 192, 64, 0.15);
    border-radius: var(--r-sm);
    padding: var(--sp-1) var(--sp-2);
    margin-bottom: var(--sp-3);
    text-align: center;
    font-weight: 600;
}

/* ── Action buttons ── */
.action-row {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2)
}

.action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r);
    font-size: var(--fs-sm);
    font-weight: 700;
    transition: all var(--dur) var(--ease);
}

.action-btn--clear {
    background: var(--surface);
    color: var(--text-3);
    border: 1px solid var(--b1)
}

.action-btn--clear:hover:not(:disabled) {
    background: var(--surface-h);
    color: var(--text-2)
}

.action-btn--attack {
    background: var(--green);
    color: #1c3700;
}

.action-btn--attack:hover:not(:disabled) {
    background: var(--green-d)
}

.action-btn--attack:active:not(:disabled) {
    transform: translateY(1px)
}

/* ── Secondary action row (skip + undo) ── */
.action-row-secondary {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-2)
}

.sec-btn {
    flex: 1;
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-2xs);
    color: var(--text-4);
    font-weight: 600;
    border: 1px solid var(--b1);
    border-radius: var(--r);
    transition: all var(--dur);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
}

.sec-btn:hover:not(:disabled) {
    color: var(--text-3);
    border-color: var(--b2)
}

/* Valid attack highlight — handled in dice.css */

/* ── Footer ── */
.panel-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sp-3);
    margin-top: auto;
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--b1);
    flex-shrink: 0;
}

.quit-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-3);
    transition: color var(--dur), opacity var(--dur);
}

.quit-btn kbd {
    margin-left: 2px;
}

.quit-btn svg {
    opacity: 0.82;
}

.quit-btn:hover {
    color: var(--red-d)
}

.sound-btn {
    font-size: 1rem;
    padding: var(--sp-1);
    border-radius: var(--r-sm);
    transition: opacity var(--dur);
}

.sound-btn:hover {
    opacity: 0.7
}

.sound-btn.muted {
    opacity: 0.3
}

/* ── Volume slider ── */
.volume-slider-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.volume-icon { font-size: 0.85rem; }
.volume-slider {
    flex: 1;
    height: 4px;
    accent-color: var(--green);
    cursor: pointer;
}

/* ── Mobile history toggle button ── */
.history-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    padding: var(--sp-1);
    border-radius: var(--r-sm);
    color: var(--text-3);
    border: 1px solid var(--b1);
    transition: all var(--dur);
}

/* ═══════ AI NARRATION BANNER ═══════ */
.ai-narration {
    display: none;
    padding: var(--sp-2) var(--sp-3);
    background: var(--amber-bg);
    border: 1px solid rgba(240, 192, 64, 0.2);
    border-radius: var(--r);
    margin: var(--sp-2) var(--sp-4);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--amber);
    text-align: center;
    animation: fadeSlideIn 0.3s var(--ease);
}
.ai-narration.visible {
    display: block;
}
.ai-narration .narr-step {
    color: var(--text-2);
    font-weight: 400;
    margin-top: 2px;
}
.ai-narration .narr-icon {
    margin-right: var(--sp-1);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════
   MOBILE — must be LAST to override base styles
   ═══════════════════════════════════════════════════ */
@media(max-width:860px) {
    .side-panel {
        border-left: none;
        border-top: 1px solid var(--b1);
        border-radius: 0;
        max-height: none;
        align-self: auto;
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        overflow: visible;
    }

    .panel-header {
        padding: var(--sp-2) var(--sp-3)
    }

    .turn-label {
        font-size: var(--fs-sm)
    }

    .penalty-tag {
        font-size: var(--fs-2xs);
        padding: 2px 6px
    }

    .timer-box {
        font-size: var(--fs-xs);
        padding: var(--sp-1) var(--sp-2)
    }

    /* History toggle button — visible on mobile */
    .history-toggle-btn {
        display: flex;
    }

    /* Move history — hidden by default on mobile, shown via toggle */
    .move-history {
        display: none;
        max-height: 200px;
        overflow: hidden;
    }
    .move-history.history-visible {
        display: flex;
        animation: slideDown 0.25s var(--ease);
    }
    @keyframes slideDown {
        from { opacity: 0; max-height: 0; }
        to { opacity: 1; max-height: 200px; }
    }

    /* Battle controls */
    .battle-controls {
        padding: var(--sp-2) var(--sp-3)
    }

    .controls-header {
        display: none
    }

    /* Mode tabs — big touch targets */
    .mode-tabs {
        margin-bottom: var(--sp-2)
    }

    .mode-tab {
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--fs-sm);
        min-height: 48px
    }

    .mode-tab svg {
        display: none
    }

    .mode-tab kbd {
        display: none
    }

    /* Expression builder */
    .expr-builder {
        padding: var(--sp-2);
        margin-bottom: var(--sp-2)
    }

    .expr-display {
        min-height: 32px;
        padding: var(--sp-1) var(--sp-2);
        font-size: var(--fs-md)
    }

    .expr-eval {
        padding: var(--sp-1);
        font-size: var(--fs-xs);
        margin-bottom: var(--sp-1)
    }

    .op-row {
        gap: 4px
    }

    .op-btn {
        width: 40px;
        height: 36px;
        font-size: 1rem
    }

    /* Target row */
    .target-row {
        padding: var(--sp-2);
        margin-bottom: var(--sp-2)
    }

    .target-label {
        font-size: var(--fs-xs)
    }

    .target-value {
        font-size: var(--fs-lg)
    }

    .target-hint {
        font-size: var(--fs-2xs)
    }

    .rule-hint {
        margin-bottom: var(--sp-2);
        font-size: var(--fs-2xs);
        padding: var(--sp-1) var(--sp-2)
    }

    /* Action buttons — big touch targets */
    .action-row {
        margin-bottom: 0;
        gap: var(--sp-2)
    }

    .action-btn {
        padding: var(--sp-3) var(--sp-3);
        font-size: var(--fs-sm);
        min-height: 56px;
        border-radius: var(--r)
    }

    .action-btn kbd {
        display: none
    }

    .action-row-secondary {
        margin-top: var(--sp-2);
        gap: var(--sp-2)
    }

    .sec-btn {
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--fs-xs);
        min-height: 48px
    }

    .sec-btn kbd {
        display: none
    }

    /* Footer */
    .panel-footer {
        padding: var(--sp-2) var(--sp-3)
    }

    .quit-btn {
        font-size: var(--fs-xs)
    }
}


/* === css/modal.css === */
/* MODALS — Mathematical Precision */
.modal-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.80);
    display:flex;align-items:center;justify-content:center;padding:var(--sp-6);z-index:200;
    opacity:0;visibility:hidden;transition:opacity 0.2s var(--ease),visibility 0.2s var(--ease);
}
.modal-overlay.active{opacity:1;visibility:visible}

.modal-card{
    background:var(--panel);border:2px solid var(--border-active);border-radius:var(--r-lg);
    padding:var(--sp-8);text-align:center;max-width:400px;width:100%;
    transform:scale(0.94);transition:transform 0.2s var(--ease);
}
.modal-overlay.active .modal-card{transform:scale(1)}
.modal-card--sm{max-width:340px;padding:var(--sp-6)}

.modal-result{font-size:2rem;font-weight:900;letter-spacing:0.05em;margin-bottom:var(--sp-3);line-height:1}
.modal-result.win{color:var(--green)}
.modal-result.lose{color:var(--red)}
.modal-title{font-size:var(--fs-xl);font-weight:800;margin-bottom:var(--sp-2)}
.modal-title.win{color:var(--green)}
.modal-title.lose{color:var(--red)}
.modal-sub{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:var(--sp-3)}
.modal-list{
    margin:0 0 var(--sp-4);
    padding-left:18px;
    color:var(--text-2);
    text-align:left;
    display:grid;
    gap:8px;
}
.modal-list li{
    line-height:1.5;
}

/* Match score display (between sub and postgame stats) */
.modal-match-score{
    font-family:var(--f-mono);font-size:2.4rem;font-weight:900;letter-spacing:0.06em;
    margin-bottom:var(--sp-4);line-height:1;
}
.modal-match-score .score-sep{color:var(--text-4);margin:0 6px}
.modal-match-score .score-you{color:var(--green)}
.modal-match-score .score-opp{color:var(--red)}

/* Post-game stats */
.postgame{
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);
    margin-bottom:var(--sp-6);text-align:center;
}
.pg-stat{background:var(--surface);border-radius:var(--r);padding:var(--sp-2)}
.pg-val{font-family:var(--f-mono);font-size:var(--fs-lg);font-weight:800;color:var(--text)}
.pg-label{font-size:var(--fs-2xs);color:var(--text-4);margin-top:1px}

.modal-btns{display:flex;gap:var(--sp-2)}
.modal-btn{
    flex:1;padding:var(--sp-3) var(--sp-4);border-radius:var(--r);
    font-size:var(--fs-sm);font-weight:700;color:var(--text-3);
    background:var(--surface);border:1px solid var(--b1);transition:all var(--dur) var(--ease);
}
.modal-btn:hover{background:var(--surface-h);color:var(--text-2)}
.modal-btn--primary{background:var(--green);color:#1c3700;border:none}
.modal-btn--primary:hover{background:var(--green-d);color:#fff}
.modal-btn--danger{
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--red-d);color:#fff;border:none;
}
.modal-btn--danger:hover{background:#690005;color:#fff}
/* Shortcuts modal */
.shortcuts-card{max-width:420px;text-align:left}
.shortcuts-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-4)}
.kb-grid--modal{
    display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-3);
    font-size:var(--fs-xs);
}
.kb-grid--modal kbd{
    font-family:var(--f-mono);font-size:var(--fs-2xs);font-weight:700;
    background:var(--surface);border:1px solid var(--b2);border-radius:3px;
    padding:1px 5px;color:var(--text-2);white-space:nowrap;
}
.kb-grid--modal span{color:var(--text-2);align-self:center}

/* Expression error state */
.expr-eval.error{color:var(--amber);background:var(--amber-bg);border:1px solid rgba(240,192,64,0.2)}


/* === css/dice.css === */
/* ═══════════════════════════════════════════════════
   DICE STYLES — 3D polyhedron SVG dice
   ═══════════════════════════════════════════════════ */

/* ── SVG container ── */
.die-svg {
    width: 100%;
    max-width: 64px;
    height: auto;
    display: block;
    margin: 0 auto;
    transition: transform 0.2s var(--ease);
    will-change: transform;
}

/* ── Text on dice faces ── */
.die-text {
    font-family: var(--f-sans);
    font-weight: 900;
    fill: #fff;
    stroke: rgba(24, 22, 19, 0.58);
    stroke-width: 2.2px;
    paint-order: stroke fill;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

/* ── Die label (D4, D6, etc.) — always visible ── */
.die-label {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--text-4);
    letter-spacing: 0.04em;
    text-align: center;
    margin-top: 2px;
    transition: opacity 0.2s;
}

/* ── Die badge text inside SVG (for attack zone) ── */
.die-badge-text {
    font-family: var(--f-mono);
    font-size: 8px;
    font-weight: 700;
    fill: rgba(255, 255, 255, 0.45);
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

/* ── Player color fills (handled by Dice3D palette) ── */
/* Shape colors come from the SVG inline, but we keep
   CSS hooks for state-based overrides */

/* ── Hover ── */
.die:hover:not(.captured):not(.in-attack) .die-svg {
    transform: scale(1.1);
}

/* ── Selected die ── */
.die.selected .die-svg {
    filter: drop-shadow(0 0 6px var(--amber));
}
.die.selected .die-label {
    color: var(--amber);
}

/* ── Target die ── */
.die.target .die-svg {
    filter: drop-shadow(0 0 6px var(--red));
}
.die.target .die-label {
    color: var(--red);
}

/* ── Valid attack indicator ── */
.die.valid-attack .die-svg {
    filter: drop-shadow(0 0 5px rgba(129, 182, 76, 0.5));
}
.die.valid-attack::after {
    content: '\2713';
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 0.6rem;
    color: var(--green);
    opacity: 0.7;
    z-index: 3;
}

/* ── Captured die ── */
.die.captured {
    opacity: 0.25;
    cursor: default;
    transform: none !important;
    filter: grayscale(1) !important;
}
.die.captured .die-svg {
    filter: none;
}
.die.captured .die-text {
    fill: var(--text-4);
    stroke: none;
}
.die.captured .die-label {
    opacity: 0.4;
}

/* ── In-attack (dimmed in home row) ── */
.die.in-attack {
    opacity: 0.3;
    cursor: default;
    transform: none !important;
    filter: grayscale(0.5) !important;
}

/* ── Rolling animation ── */
.die.rolling .die-svg {
    animation: die-roll-3d 0.35s var(--ease);
}
@keyframes die-roll-3d {
    0%   { transform: scale(1) rotateY(0); }
    30%  { transform: scale(0.85) rotateY(90deg); opacity: 0.5; }
    70%  { transform: scale(1.05) rotateY(270deg); }
    100% { transform: scale(1) rotateY(360deg); opacity: 1; }
}

/* ── Number cycling during roll ── */
.die.cycling .die-text {
    animation: number-cycle 0.08s linear infinite;
}
@keyframes number-cycle {
    0%   { transform: translateY(0); opacity: 1; }
    25%  { transform: translateY(-3px); opacity: 0.3; }
    50%  { transform: translateY(0); opacity: 0.6; }
    75%  { transform: translateY(2px); opacity: 0.3; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ── AI highlighting during step-by-step visualization ── */
.die.ai-selecting .die-svg {
    animation: ai-pulse 0.6s ease infinite;
}
@keyframes ai-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(240, 192, 64, 0.6)); }
    50%      { filter: drop-shadow(0 0 12px rgba(240, 192, 64, 0.9)); }
}

.die.ai-targeting .die-svg {
    animation: ai-target-pulse 0.6s ease infinite;
}
@keyframes ai-target-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 180, 171, 0.6)); }
    50%      { filter: drop-shadow(0 0 12px rgba(255, 180, 171, 0.9)); }
}

/* ── Attack zone dice ── */
.attack-die .die-svg {
    max-width: 52px;
}
.attack-die .die-label {
    display: none;
}

/* ═══════ MOBILE ═══════ */
@media (max-width: 860px) {
    .die-svg {
        max-width: 64px;
    }
    .die-label {
        font-size: 0.62rem;
        margin-top: 1px;
    }
    .attack-die .die-svg {
        max-width: 52px;
    }
}

@media (max-width: 699px) {
    .die-svg {
        max-width: 48px;
    }
    .die-label {
        font-size: 0.5rem;
    }
    .attack-die .die-svg {
        max-width: 40px;
    }
}


/* === css/online.css === */
/* ═══════════════════════════════════════════════════
   ONLINE — Mathematical Precision
   ═══════════════════════════════════════════════════ */

/* ── Online Card (matchmaking modal) ── */
.online-card {
    max-width: 420px;
    width: 90vw;
}

.online-card .modal-title {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.online-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.online-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--text-4);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.online-divider::before,
.online-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.join-inline {
    display: flex;
    gap: .5rem;
}

.join-inline input {
    flex: 1;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    letter-spacing: .2em;
    text-align: center;
}

.play-btn--sm {
    padding: .55rem 1.2rem;
    font-size: .85rem;
}

.online-error {
    color: var(--red, #FA412D);
    font-size: .8rem;
    margin: 0;
    padding: .25rem 0;
}

.online-player-count {
    font-size: .75rem;
    color: var(--text-4);
    text-align: center;
    margin-top: .5rem;
}

/* ── Public Room List ── */
.public-rooms {
    margin-top: 1rem;
}

.public-rooms-title {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .5rem;
}

.room-list {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    max-height: 180px;
    overflow-y: auto;
    padding-right: .25rem;
}

.room-list::-webkit-scrollbar {
    width: 4px;
}

.room-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.room-empty {
    text-align: center;
    color: var(--text-4);
    font-size: .8rem;
    padding: 1rem 0;
}

.room-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .75rem;
    background: var(--card);
    border: 1px solid var(--b1);
    border-radius: 8px;
    transition: border-color .15s;
}

.room-item:hover {
    border-color: var(--green);
}

.room-item-info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.room-item-host {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-1);
}

.room-item-settings {
    font-size: .7rem;
    color: var(--text-4);
}

.room-join-btn {
    background: var(--green, #81B64C);
    color: #1c3700;
    border: none;
    border-radius: 6px;
    padding: .35rem .75rem;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}

.room-join-btn:hover {
    opacity: .85;
}

/* ── Create Room Settings ── */
.vis-hint {
    font-size: .75rem;
    color: var(--text-4);
    margin-top: .25rem;
}

/* ── Room Code Display ── */
.room-code-display {
    text-align: center;
    margin: 1rem 0;
}

.room-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--green);
    background: var(--bg);
    border: 2px dashed var(--b1);
    border-radius: 12px;
    padding: .5rem 1.25rem;
    display: inline-block;
    user-select: all;
}

.room-code-actions {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.room-code-actions .modal-btn {
    font-size: .8rem;
    padding: .4rem .75rem;
}

/* ── Waiting Spinner ── */
.waiting-spinner {
    display: flex;
    gap: .35rem;
    justify-content: center;
    margin: 1rem 0;
}

.waiting-spinner span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green, #81B64C);
    animation: waitBounce 1.4s infinite ease-in-out both;
}

.waiting-spinner span:nth-child(1) { animation-delay: 0s; }
.waiting-spinner span:nth-child(2) { animation-delay: .16s; }
.waiting-spinner span:nth-child(3) { animation-delay: .32s; }

@keyframes waitBounce {
    0%, 80%, 100% { transform: scale(0.4); opacity: .4; }
    40% { transform: scale(1); opacity: 1; }
}

.waiting-text {
    text-align: center;
    font-size: .8rem;
    color: var(--text-4);
    margin-bottom: 1rem;
}

/* ── Pre-game Lobby ── */
.lobby-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.lobby-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
}

.lobby-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--green, #81B64C);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
}

.lobby-avatar--opp {
    background: var(--red-d);
}

.lobby-vs-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-3);
    letter-spacing: .05em;
}

.lobby-countdown {
    text-align: center;
    font-size: 1rem;
    color: var(--text-3);
}

.lobby-countdown span {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--green, #81B64C);
}

/* ── Connection Badge (in-game HUD) ── */
.conn-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    color: var(--text-4);
    padding: .15rem .5rem;
    border-radius: 4px;
    background: var(--card);
}

.conn-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-4);
}

.conn-dot.conn-ok {
    background: var(--green);
}

.conn-dot.conn-warn {
    background: var(--amber);
    animation: connPulse .8s infinite alternate;
}

.conn-dot.conn-err {
    background: var(--red);
}

@keyframes connPulse {
    from { opacity: .5; }
    to { opacity: 1; }
}

/* ── Disconnect Overlay ── */
#disconnectOverlay .modal-card {
    text-align: center;
}

#disconnectOverlay .modal-sub {
    font-family: 'JetBrains Mono', monospace;
}

#disconnectTimer {
    font-weight: 700;
    color: var(--red, #FA412D);
    font-size: 1.1em;
}

/* ── Reconnect overlay (self-reconnect) ── */
#reconnectOverlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.8);
    z-index:10001;display:none;align-items:center;justify-content:center;
    backdrop-filter:blur(4px);
}
#reconnectOverlay.active{display:flex}
.reconnect-card{
    background:var(--panel);border:1px solid var(--b1);border-radius:var(--r-lg);
    padding:32px 40px;text-align:center;max-width:300px;width:90vw;
}
.reconnect-card h2{font-size:var(--fs-md);font-weight:700;margin-bottom:8px}
.reconnect-card p{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:20px}
.reconnect-attempts{
    font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--amber);
    margin-bottom:16px;
}
.reconnect-spinner{display:flex;gap:5px;justify-content:center;margin-bottom:20px}
.reconnect-spinner span{
    width:8px;height:8px;border-radius:50%;background:var(--green);
    animation:waitBounce 1.4s infinite ease-in-out both;
}
.reconnect-spinner span:nth-child(1){animation-delay:0s}
.reconnect-spinner span:nth-child(2){animation-delay:.16s}
.reconnect-spinner span:nth-child(3){animation-delay:.32s}

/* ── Connection lost modal (after max retries) ── */
#connectionLostModal{
    position:fixed;inset:0;background:rgba(0,0,0,0.85);
    z-index:10002;display:none;align-items:center;justify-content:center;
}
#connectionLostModal.active{display:flex}
.conn-lost-card{
    background:var(--panel);border:1px solid var(--b2);border-radius:var(--r-lg);
    padding:32px 40px;text-align:center;max-width:300px;width:90vw;
}
.conn-lost-card h2{font-size:var(--fs-md);font-weight:700;margin-bottom:8px;color:var(--red)}
.conn-lost-card p{font-size:var(--fs-sm);color:var(--text-3);margin-bottom:20px}
.conn-lost-btns{display:flex;flex-direction:column;gap:8px}

/* ── Move validation toast ── */
#moveToast{
    position:fixed;top:50%;left:50%;
    transform:translate(-50%,-50%) scale(0.9);
    background:var(--panel);border:1px solid var(--b2);border-radius:var(--r);
    padding:10px 20px;font-size:var(--fs-sm);font-weight:600;color:var(--text);
    z-index:9997;pointer-events:none;opacity:0;
    transition:opacity 0.18s var(--ease),transform 0.18s var(--ease);
    white-space:nowrap;
}
#moveToast.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
#moveToast.toast--error{border-color:var(--red);color:var(--red)}
#moveToast.toast--success{border-color:var(--green);color:var(--green)}
#moveToast.toast--info{border-color:var(--text-3);color:var(--text)}

/* ── Ping display ── */
.conn-ping{
    font-family:var(--f-mono);font-size:var(--fs-2xs);color:var(--text-3);
    margin-left:2px;
}
.conn-ping.ping-warn{color:var(--amber)}
.conn-ping.ping-bad{color:var(--red)}

/* ── Emoji reaction bar ── */
.reaction-bar{
    display:none;align-items:center;gap:3px;
    margin-left:auto;padding-left:8px;
}
.reaction-bar.active{display:flex}
.reaction-btn{
    background:var(--card);border:1px solid var(--b1);border-radius:6px;
    padding:2px 6px;font-size:0.9rem;cursor:pointer;
    transition:transform 0.1s,border-color 0.1s;line-height:1.4;
}
.reaction-btn:hover:not(:disabled){transform:scale(1.2);border-color:var(--green)}
.reaction-btn:disabled{opacity:0.35;cursor:default;transform:none}

/* ── Responsive ── */
@media (max-width: 600px) {
    .online-card {
        width: 95vw;
        padding: 1.25rem;
    }

    .room-code {
        font-size: 1.6rem;
        letter-spacing: .2em;
    }

    .lobby-vs {
        gap: .75rem;
    }

    .lobby-avatar {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
}

/* ── Account Tab ── */
.auth-intro {
    color: var(--text-3);
    font-size: .875rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.auth-form {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
}

.auth-form .field-input {
    flex: 1;
    min-width: 0;
}

.auth-submit-btn {
    padding: .55rem 1rem;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
}
.auth-submit-btn:hover { opacity: .85; }

.auth-status {
    font-size: .8rem;
    min-height: 1.2em;
    color: var(--text-3);
}
.auth-status.ok   { color: var(--green); }
.auth-status.error { color: var(--red, #FA412D); }

.auth-empty {
    color: var(--text-4);
    font-size: .8rem;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--green);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-name {
    font-weight: 700;
    font-size: .95rem;
    color: var(--text-1);
}

.profile-email {
    font-size: .75rem;
    color: var(--text-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-signout-btn {
    padding: .35rem .75rem;
    background: transparent;
    border: 1px solid var(--border-1);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: .75rem;
    color: var(--text-3);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
}
.auth-signout-btn:hover { border-color: var(--text-3); color: var(--text-1); }

.profile-stats {
    display: flex;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.profile-stat {
    flex: 1;
    background: var(--surface-2);
    border-radius: var(--radius);
    padding: .6rem;
    text-align: center;
}

.profile-stat-val {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--green);
    line-height: 1;
    margin-bottom: .2rem;
}

.profile-stat-label {
    font-size: .7rem;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.auth-section-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-4);
    margin: 1rem 0 .4rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.lb-note {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: .7rem;
}

.match-history,
.leaderboard {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    max-height: 180px;
    overflow-y: auto;
}

.match-row,
.lb-row {
    display: grid;
    align-items: center;
    padding: .3rem .5rem;
    border-radius: calc(var(--radius) - 2px);
    font-size: .8rem;
    background: var(--surface-2);
}

.match-row {
    grid-template-columns: 1.5rem 1fr auto auto;
    gap: .5rem;
}

.match-result {
    font-weight: 700;
}
.match-row.win  .match-result { color: var(--green); }
.match-row.loss .match-result { color: var(--red, #FA412D); }

.match-opp { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-elo { font-family: var(--font-mono, monospace); font-size: .75rem; color: var(--text-3); }
.match-date { color: var(--text-4); font-size: .72rem; }

.lb-row {
    grid-template-columns: 2rem 1fr auto 4.5rem;
    gap: .5rem;
}

.lb-row.lb-me { background: color-mix(in srgb, var(--green) 15%, var(--surface-2)); }

.lb-rank { color: var(--text-4); font-size: .72rem; text-align: right; }
.lb-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-elo  { font-weight: 700; color: var(--green); }
.lb-record { color: var(--text-4); font-size: .72rem; text-align: right; }


/* === css/arena.css === */
/* Tactical Arena visual layer */

:root {
    --ink: #262421;
    --ink-2: #1E1C1A;
    --rail: rgba(255, 255, 255, 0.08);
    --rail-strong: rgba(255, 255, 255, 0.15);
    --green-ink: #183000;
    --copper: #E8A93E;
    --cyan: #5DADE2;
    --danger: #FA412D;
    --radius: var(--r);
    --border-1: var(--b1);
    --surface-2: var(--surface);
    --text-1: var(--text);
    --font-mono: var(--f-mono);
    --menu-w: 480px;
    --menu-h: min(760px, calc(100dvh - 36px));
    --modal-w: 440px;
    --modal-h: min(620px, calc(100dvh - 48px));
    --control-h: 54px;
    --field-h: 42px;
    --die-cell: 88px;
    --die-cell-tablet: 76px;
    --die-cell-mobile: 56px;
}

html {
    background: var(--bg);
}

body {
    min-width: 320px;
    background: var(--bg);
    letter-spacing: 0;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(var(--page-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--page-grid) 1px, transparent 1px),
        radial-gradient(circle at top right, var(--page-tint), transparent 38%);
    background-size: 48px 48px, 48px 48px;
    opacity: 0.42;
}

button,
input {
    letter-spacing: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

.game-layout,
.landing-info,
.modal-overlay,
#reconnectOverlay,
#connectionLostModal,
.settings-overlay {
    position: relative;
    z-index: 1;
}

.home-card,
.home-card .tab-panel.active,
.history-list,
.settings-body,
.dice-row--expr,
.room-list,
.modal-card,
.online-card {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-card::-webkit-scrollbar,
.home-card .tab-panel.active::-webkit-scrollbar,
.history-list::-webkit-scrollbar,
.settings-body::-webkit-scrollbar,
.dice-row--expr::-webkit-scrollbar,
.room-list::-webkit-scrollbar,
.modal-card::-webkit-scrollbar,
.online-card::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.home {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #262421;
    align-items: stretch;
    justify-content: center;
    padding: 28px;
}

.home::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.home-layout {
    width: min(100%, 1220px);
    max-width: 1220px;
    grid-template-columns: minmax(0, 1.12fr) minmax(420px, 480px);
    gap: 22px;
    padding: 0;
    align-self: center;
}

.home-hero,
.home-card,
.side-panel,
.board-column,
.modal-card,
.settings-modal {
    box-shadow: var(--sh-lg);
}

.home-hero {
    position: relative;
    min-height: min(760px, calc(100vh - 56px));
    padding: 34px;
    border: 1px solid var(--rail);
    border-radius: var(--r);
    background: var(--panel-bg);
    overflow: hidden;
}

.home-hero::before {
    display: none;
}

.home-hero::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -110px;
    bottom: -120px;
    border: 1px solid rgba(129, 182, 76, 0.16);
    transform: rotate(20deg);
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 18px);
}

.hero-brand {
    position: relative;
    z-index: 1;
    align-items: flex-start;
}

.hero-brand svg,
.nav-logo svg,
.home-brand svg {
    filter: drop-shadow(0 0 18px rgba(129, 182, 76, 0.22));
}

.hero-title {
    max-width: 620px;
    font-size: 4rem;
    line-height: 0.95;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-title span {
    color: var(--green);
}

.hero-tagline,
.home-sub,
.field-label,
.history-header,
.controls-header,
.public-rooms-title,
.auth-section-title,
.stat-label,
.profile-stat-label {
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-tagline {
    color: var(--cyan);
}

.hero-dice-row {
    position: relative;
    z-index: 1;
    margin-top: auto;
    grid-auto-flow: dense;
    padding: 18px;
    border-radius: var(--r);
    border: 1px solid rgba(129, 182, 76, 0.18);
    background: rgba(38, 36, 33, 0.72);
}

.hero-body {
    position: relative;
    z-index: 1;
    max-width: 610px;
    font-size: 1rem;
    color: var(--text-2);
}

.hero-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: 10px;
    border: 0;
    padding: 0;
}

.hero-list li {
    min-height: 76px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--rail);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-2);
}

.hero-list li::before {
    margin-top: 8px;
    border-radius: 1px;
}

.hero-footer {
    position: relative;
    z-index: 1;
}

.hero-badges {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
}

.hero-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    color: var(--text-3);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.04);
}

.home-card {
    width: min(var(--menu-w), calc(100vw - 20px));
    height: var(--menu-h);
    max-height: var(--menu-h);
    padding: 18px;
    border-radius: var(--r);
    border: 1px solid var(--rail-strong);
    background: var(--panel-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    contain: layout paint;
}

.home-title {
    letter-spacing: 0;
    text-transform: uppercase;
}

.home-tabs,
.mode-tabs {
    background: rgba(38, 36, 33, 0.84);
    border: 1px solid var(--rail);
    border-radius: var(--r);
    padding: 4px;
    flex-shrink: 0;
}

.home-tabs {
    margin-bottom: 14px;
}

.home-tab,
.mode-tab {
    height: 42px;
    min-height: 42px;
    border: 1px solid transparent;
    box-sizing: border-box;
    overflow: hidden;
}

.home-card .tab-panel {
    min-height: 0;
    overflow: hidden;
}

.home-card .tab-panel.active {
    flex: 1 1 auto;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
}

.home-card .field {
    margin-bottom: 12px;
}

.home-card .field-label {
    margin-bottom: 6px;
}

.home-tab.active,
.mode-tab.active,
.opt-btn.selected,
.diff-btn.selected,
.timer-preset.active,
.move-preset.active {
    color: var(--text);
    border-color: rgba(129, 182, 76, 0.38);
    background: rgba(129, 182, 76, 0.12);
}

.field-input {
    height: var(--field-h);
    min-height: var(--field-h);
    background: rgba(38, 36, 33, 0.9);
    border-color: var(--rail);
    border-radius: var(--r);
}

.field-input:focus {
    border-color: var(--cyan);
}

.field-row {
    align-items: stretch;
}

.opt-btn,
.diff-btn,
.timer-preset,
.move-preset,
.settings-btn,
.quick-play-btn,
.sec-btn,
.modal-btn,
.room-item,
.profile-stat,
.match-row,
.lb-row,
.stat-card {
    border-radius: var(--r);
    border-color: var(--rail);
    background: rgba(255, 255, 255, 0.04);
}

.opt-btn,
.diff-btn {
    height: var(--control-h);
    min-height: var(--control-h);
    box-sizing: border-box;
    overflow: hidden;
}

.diff-grid,
.stats-grid,
.landing-feats {
    grid-auto-flow: dense;
}

.diff-hint {
    white-space: normal;
}

.timer-setting {
    min-height: 58px;
    padding: 8px 10px;
    background: rgba(38, 36, 33, 0.58);
    border: 1px solid var(--rail);
    border-radius: var(--r);
}

.play-btn,
.action-btn--attack,
.modal-btn--primary,
.auth-submit-btn,
.room-join-btn,
.nav-play-btn {
    background: var(--green);
    color: var(--green-ink);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 28px rgba(129, 182, 76, 0.18);
}

.play-btn:hover,
.action-btn--attack:hover:not(:disabled),
.modal-btn--primary:hover,
.auth-submit-btn:hover,
.room-join-btn:hover,
.nav-play-btn:hover {
    background: color-mix(in srgb, var(--green) 82%, white);
    color: var(--green-ink);
    opacity: 1;
}

.home-credit {
    color: var(--text-4);
}

.home-actions {
    position: sticky;
    bottom: -18px;
    z-index: 3;
    padding: 10px 0 0;
    background: var(--panel-bg);
    border-top: 1px solid var(--rail);
    min-height: 66px;
    flex-shrink: 0;
}

.howto {
    padding-right: 8px;
}

.howto-s {
    padding: 12px;
    border: 1px solid var(--rail);
    border-radius: var(--r);
    background: rgba(38, 36, 33, 0.40);
}

.game-layout {
    grid-template-columns: minmax(520px, 760px) minmax(360px, 420px);
    gap: 14px;
    padding: calc(var(--header-h) + 16px) 24px 16px;
    background: transparent;
    min-height: calc(100dvh - 8px);
    box-sizing: border-box;
    align-content: start;
}

.board-column {
    border: 1px solid var(--rail-strong);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--board-shell);
}

.player-bar {
    background: var(--board-shell);
}

.player-bar--opp,
.player-bar--you {
    border-left-width: 4px;
    border-radius: 0;
}

.player-bar--opp {
    border-left-color: rgba(250, 65, 45, 0.84);
}

.player-bar--you {
    border-left-color: rgba(129, 182, 76, 0.84);
}

.avatar {
    border-radius: var(--r-sm);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.avatar--you,
.lobby-avatar {
    color: var(--green-ink);
}

.board {
    background: var(--bg-board);
}

.board-zone {
    padding: 18px 20px;
}

.board-zone--opp-attack,
.board-zone--you-attack {
    background:
        repeating-linear-gradient(135deg, var(--board-attack-stripe) 0 1px, transparent 1px 12px),
        var(--board-attack);
}

.board-zone--you-home.active {
    background: rgba(129, 182, 76, 0.07);
    box-shadow: inset 0 0 36px rgba(129, 182, 76, 0.12);
}

.board-zone--opp-home.active {
    background: rgba(250, 65, 45, 0.045);
    box-shadow: inset 0 0 36px rgba(250, 65, 45, 0.10);
}

.board-label {
    color: var(--text-3);
}

.board-divider {
    background: var(--board-divider);
}

.divider-icon {
    color: var(--cyan);
}

.dice-row,
.dice-row--attack {
    gap: 8px;
}

.die {
    min-width: 74px;
    width: var(--die-cell);
    height: var(--die-cell);
    min-height: var(--die-cell);
    border-radius: var(--r);
    box-sizing: border-box;
    overflow: hidden;
    touch-action: none;
    -webkit-user-drag: none;
}

.die:hover:not(.captured):not(.in-attack) {
    background: rgba(255, 255, 255, 0.04);
}

.die.valid-attack {
    background: rgba(129, 182, 76, 0.09);
}

.die.target {
    background: rgba(250, 65, 45, 0.08);
}

.die.selected {
    background: rgba(232, 169, 62, 0.10);
}

.die-svg {
    max-width: 70px;
    pointer-events: none;
}

.attack-die,
.attack-slot {
    width: var(--die-cell);
    height: var(--die-cell);
    min-height: var(--die-cell);
    box-sizing: border-box;
}

.die.is-drag-source {
    opacity: 0.48;
}

.dice-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10050;
    pointer-events: none;
    opacity: 0.92;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.42));
    transform-origin: center;
    transition: none !important;
}

.dice-drag-ghost .die-svg {
    transform: scale(1.08);
}

.dice-row--attack.drop-ready,
.target-row.drop-ready,
.expr-builder.drop-ready {
    outline: 1px dashed rgba(129, 182, 76, 0.42);
    outline-offset: -4px;
}

.dice-row--attack.drop-over,
.target-row.drop-over,
.expr-builder.drop-over,
.die.drop-over {
    background: rgba(129, 182, 76, 0.12);
    outline-color: rgba(129, 182, 76, 0.76);
}

.die.drop-over .die-svg {
    filter: drop-shadow(0 0 8px rgba(129, 182, 76, 0.68));
}

.board-zone--opp-attack,
.board-zone--you-attack {
    min-height: 126px;
}

.dice-row--expr {
    max-height: 92px;
    overflow-y: auto;
}

.side-panel {
    border: 1px solid var(--rail-strong);
    border-radius: var(--r);
    background: var(--panel-bg);
    width: 420px;
    height: min(640px, calc(100dvh - var(--header-h) - 32px));
    min-height: min(640px, calc(100dvh - var(--header-h) - 32px));
    max-height: min(640px, calc(100dvh - var(--header-h) - 32px));
    contain: layout paint;
}

.move-history {
    flex: 0 0 154px;
    min-height: 154px;
    max-height: 154px;
}

.history-list {
    min-height: 84px;
    max-height: 104px;
}

.battle-controls {
    min-height: 278px;
    padding-top: 14px;
}

.expr-builder {
    min-height: 150px;
    box-sizing: border-box;
}

.expr-builder[hidden] {
    display: block !important;
    visibility: hidden;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
}

.target-row {
    min-height: 54px;
}

.action-btn,
.sec-btn,
.op-btn,
.modal-btn,
.play-btn,
.quick-play-btn,
.settings-btn,
.room-join-btn,
.auth-submit-btn {
    box-sizing: border-box;
    border-width: 1px;
}

.action-btn,
.sec-btn,
.modal-btn,
.room-join-btn,
.auth-submit-btn {
    min-height: 42px;
}

.panel-header,
.history-header,
.controls-header,
.panel-footer {
    border-color: var(--rail);
}

.timer-box,
.target-row,
.expr-builder,
.expr-display,
.op-btn,
.pg-stat {
    background: var(--control-bg);
    border: 1px solid var(--rail);
}

.turn-dot.you {
    background: var(--green);
    box-shadow: 0 0 16px rgba(129, 182, 76, 0.62);
}

.turn-dot.opp {
    background: var(--red);
    box-shadow: 0 0 16px rgba(250, 65, 45, 0.58);
}

.move-entry {
    border: 1px solid transparent;
}

.move-entry:nth-child(odd) {
    background: rgba(255, 255, 255, 0.035);
}

.action-btn,
.sec-btn,
.op-btn,
.mode-tab,
.home-tab,
.opt-btn,
.diff-btn,
.room-item,
.landing-feat,
.modal-btn {
    transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease), color 0.22s var(--ease);
}

.action-btn:hover:not(:disabled),
.sec-btn:hover:not(:disabled),
.op-btn:hover:not(:disabled),
.mode-tab:hover:not(:disabled),
.home-tab:hover,
.opt-btn:hover,
.diff-btn:hover,
.room-item:hover,
.landing-feat:hover,
.modal-btn:hover {
    transform: translateY(-1px);
}

.modal-overlay {
    position: fixed;
    z-index: 200;
    background: rgba(3, 5, 6, 0.86);
    backdrop-filter: blur(12px);
}

.settings-overlay,
#reconnectOverlay,
#connectionLostModal {
    position: fixed;
    z-index: 10001;
}

.modal-card,
.settings-modal,
.reconnect-card,
.conn-lost-card {
    border: 1px solid var(--rail-strong);
    background: var(--panel-bg);
    border-radius: var(--r);
    box-sizing: border-box;
}

.modal-card {
    width: min(var(--modal-w), calc(100vw - 32px));
    min-height: 260px;
}

.modal-card--sm {
    width: min(360px, calc(100vw - 32px));
}

.settings-modal {
    width: min(460px, calc(100vw - 32px));
    height: min(620px, calc(100dvh - 48px));
    max-height: min(620px, calc(100dvh - 48px));
    display: grid;
    grid-template-rows: 64px 1fr;
    overflow: hidden;
}

.settings-body {
    min-height: 0;
    overflow-y: auto;
}

.modal-title {
    letter-spacing: 0;
    text-transform: uppercase;
}

.online-card {
    width: min(500px, calc(100vw - 32px));
    max-width: 500px;
    height: var(--modal-h);
    max-height: var(--modal-h);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.online-card .modal-title {
    justify-content: center;
}

#onlineMenu .modal-title {
    font-size: 0;
}

#onlineMenu .modal-title::after {
    content: "PLAY ONLINE";
    font-size: 1.7rem;
}

.online-card > div:not([hidden]) {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.online-actions,
.public-rooms,
#onlineCreate,
#onlineWaiting,
#onlineLobby {
    text-align: left;
}

.online-actions {
    flex-shrink: 0;
}

.public-rooms {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.online-divider {
    color: var(--text-4);
}

.room-list {
    gap: 8px;
    height: 230px;
    max-height: 230px;
    min-height: 230px;
    overflow-y: auto;
}

.room-item {
    min-height: 58px;
    padding: 10px 12px;
    background: rgba(38, 36, 33, 0.58);
}

.room-code {
    color: var(--green);
    background:
        repeating-linear-gradient(90deg, rgba(129, 182, 76, 0.06) 0 1px, transparent 1px 12px),
        rgba(38, 36, 33, 0.92);
    border: 1px solid rgba(129, 182, 76, 0.35);
    border-radius: var(--r);
    box-shadow: inset 0 0 22px rgba(129, 182, 76, 0.08);
    min-height: 74px;
    box-sizing: border-box;
}

.room-code-actions {
    justify-content: stretch;
}

.lobby-vs {
    padding: 18px;
    border: 1px solid var(--rail);
    background: rgba(38, 36, 33, 0.52);
    border-radius: var(--r);
    min-height: 136px;
}

.conn-badge {
    border: 1px solid var(--rail);
    background: rgba(38, 36, 33, 0.75);
}

.reaction-btn {
    background: rgba(38, 36, 33, 0.72);
}

.profile-header,
.profile-stats,
.match-history,
.leaderboard {
    border-radius: var(--r);
}

.profile-avatar {
    color: var(--green-ink);
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.auth-form {
    align-items: stretch;
}

.auth-submit-btn {
    color: var(--green-ink);
}

.auth-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.auth-google-mark {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--text);
    color: var(--bg);
    font-weight: 800;
    line-height: 1;
}

.name-linked {
    opacity: 0.72;
    cursor: default;
    border-color: rgba(129, 182, 76, 0.55) !important;
}

.player-name-hint {
    display: block;
    min-height: 1em;
    margin-top: 4px;
    color: var(--text-4);
    font-size: 0.72rem;
}

.profile-username-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin-bottom: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rail);
}

.profile-username-label {
    min-width: 72px;
    color: var(--text-4);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.profile-username-val {
    flex: 1;
    min-width: 0;
    color: var(--text);
    font-weight: 700;
}

.profile-edit-btn,
.auth-cancel-btn {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--rail);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-2);
}

.profile-edit-btn:hover,
.auth-cancel-btn:hover {
    background: rgba(129, 182, 76, 0.12);
    color: var(--text);
}

.profile-username-edit {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.profile-username-input {
    flex: 1 1 180px;
    min-width: 0;
}

.profile-save-btn {
    min-height: 34px;
    padding: 0 14px;
    font-size: 0.85rem;
}

.profile-username-status {
    width: 100%;
    min-height: 1em;
    color: var(--text-4);
    font-size: 0.78rem;
}

.profile-username-status.error {
    color: var(--red);
}

.profile-username-status.success {
    color: var(--green);
}

.match-history,
.leaderboard {
    gap: 6px;
}

.match-row,
.lb-row {
    min-height: 38px;
    border: 1px solid var(--rail);
    background: rgba(38, 36, 33, 0.52);
}

.site-nav {
    height: 62px;
    border: 1px solid var(--rail);
    border-left: 0;
    border-right: 0;
    background: rgba(38, 36, 33, 0.82);
    backdrop-filter: blur(12px);
}

.landing-info {
    background: rgba(38, 36, 33, 0.96);
    border-top: 1px solid var(--rail);
    padding-top: 80px;
}

.landing-container {
    max-width: 1120px;
}

.landing-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
}

.landing-col,
.landing-feat,
.landing-page-link {
    border: 1px solid var(--rail);
    border-radius: var(--r);
    background: rgba(255, 255, 255, 0.035);
}

.landing-col {
    padding: 24px;
}

.landing-col h2 {
    font-size: 1.35rem;
    text-transform: uppercase;
}

.landing-feats {
    grid-template-columns: repeat(4, 1fr);
}

.landing-feat {
    padding: 18px;
}

.landing-pages {
    gap: 10px;
}

.landing-page-link {
    padding: 12px 16px;
}

.landing-footer {
    max-width: 1120px;
    border-color: var(--rail);
}

@media (max-width: 1060px) {
    html.game-active,
    body.game-active {
        overflow: auto;
    }

    .home-layout {
        grid-template-columns: 1fr;
        width: min(100%, 720px);
        align-self: flex-start;
    }

    .home {
        overflow-y: auto;
    }

    .home-card {
        order: 1;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }

    .home-hero {
        order: 2;
        min-height: 280px;
    }

    .game-layout {
        grid-template-columns: 1fr;
        width: min(100%, 960px);
        margin: 0 auto;
        grid-template-rows: auto auto;
        align-content: start;
    }

    .side-panel {
        border-radius: var(--r);
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        contain: none;
    }

    .board-column {
        width: 100%;
        justify-self: stretch;
    }

    .battle-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.9fr);
        gap: 12px;
    }

    .controls-header {
        display: none;
    }

    .expr-builder {
        grid-column: 1 / -1;
    }

    .mode-tabs,
    .target-row,
    .rule-hint,
    .action-row,
    .action-row-secondary {
        margin-bottom: 0;
    }

    .landing-feats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .home {
        padding: 10px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .home::before {
        inset: 8px;
    }

    .home-hero {
        display: none;
    }

    .hero-title {
        font-size: 2.7rem;
    }

    .hero-body,
    .hero-list,
    .hero-footer {
        display: none;
    }

    .hero-dice-row {
        margin-top: 18px;
    }

    .hero-badges {
        grid-template-columns: 1fr;
    }

    .home-card {
        padding: 16px;
        max-height: calc(100vh - 20px);
    }

    .field-row,
    .auth-form,
    .room-code-actions {
        flex-direction: column;
    }

    .diff-grid,
    .stats-grid,
    .profile-stats,
    .landing-grid,
    .landing-feats {
        grid-template-columns: 1fr;
    }

    .game-layout {
        padding: 8px;
        min-height: 100dvh;
    }

    .board-column {
        border-radius: var(--r);
    }

    .board-zone {
        padding: 8px;
    }

    .dice-row,
    .dice-row--attack {
        gap: 3px;
    }

    .die {
        width: var(--die-cell-mobile);
        height: var(--die-cell-mobile);
        min-width: 0;
        min-height: var(--die-cell-mobile);
    }

    .attack-die,
    .attack-slot {
        width: var(--die-cell-mobile);
        height: var(--die-cell-mobile);
        min-height: var(--die-cell-mobile);
    }

    .board-zone--opp-attack,
    .board-zone--your-attack {
        min-height: 74px;
    }

    .die-svg {
        max-width: 48px;
    }

    .side-panel {
        position: sticky;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: min(640px, calc(100dvh - 24px));
        border-radius: var(--r) var(--r) 0 0;
    }

    .online-card {
        width: min(96vw, 500px);
    }

    .room-code {
        width: 100%;
        text-align: center;
        letter-spacing: 0.18em;
    }
}

@media (max-width: 500px) {
    .home-tab {
        font-size: 0.72rem;
    }

    .hero-title {
        font-size: 2.25rem;
    }

    .home-hero {
        min-height: 300px;
    }

    .hero-dice-row {
        gap: 4px;
        padding: 10px;
    }

    .hero-die .die-svg {
        max-width: 42px;
    }

    .play-btn {
        min-height: 44px;
    }
}

html.game-active,
body.game-active {
    overflow: hidden;
}

@media (max-width: 860px) {
    html.game-active,
    body.game-active {
        overflow: auto;
    }

    .game-layout {
        display: grid;
        width: 100%;
        min-height: 100dvh;
        height: auto;
        max-height: none;
        padding: calc(var(--header-h) + 14px) 14px 16px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: start;
        justify-items: stretch;
        gap: 12px;
        overflow: visible;
    }

    .board-column {
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-self: stretch;
        justify-self: stretch;
    }

    .board {
        width: 100%;
        flex: 0 0 auto;
        min-height: 0;
    }

    .player-bar {
        min-height: 50px;
        padding: 10px 12px;
    }

    .avatar {
        width: 30px;
        height: 30px;
    }

    .bar-info {
        gap: 6px;
    }

    .bar-name {
        font-size: 0.88rem;
    }

    .bar-badge,
    .bar-dice {
        font-size: 0.72rem;
    }

    .board-zone {
        padding: 12px 14px;
    }

    .board-zone--opp-attack,
    .board-zone--you-attack {
        padding: 8px 12px;
        min-height: 92px;
    }

    .dice-row,
    .dice-row--attack {
        grid-template-columns: repeat(6, minmax(0, var(--die-cell-tablet)));
        gap: 8px;
    }

    .die {
        width: var(--die-cell-tablet);
        height: var(--die-cell-tablet);
        min-width: 0;
        min-height: var(--die-cell-tablet);
        padding: 5px 3px;
    }

    .die-svg {
        max-width: 64px;
    }

    .attack-die,
    .attack-slot {
        width: 58px;
        height: 58px;
        min-height: 58px;
    }

    .board-divider {
        padding: 3px 0;
    }

    .divider-round,
    .divider-icon,
    .divider-score {
        font-size: 0.74rem;
    }

    .side-panel {
        position: static;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
        border-radius: var(--r);
        contain: none;
    }

    .move-history {
        max-height: 140px;
        overflow-y: auto;
    }

    .panel-header {
        padding: 10px 12px;
    }

    .battle-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(250px, 0.9fr);
        align-items: start;
        gap: 10px;
        min-height: 0;
        padding: 12px;
    }

    .battle-controls > .action-row {
        margin-top: 0;
    }

    .expr-builder {
        min-height: 0;
        grid-column: 1 / -1;
    }

    .mode-tabs,
    .target-row,
    .rule-hint,
    .action-row,
    .action-row-secondary {
        margin-bottom: 0;
    }

    .target-row {
        min-height: 52px;
    }

    .action-btn {
        min-height: 52px;
    }

    .sec-btn {
        min-height: 46px;
    }

    .panel-footer {
        padding: 8px 12px;
    }
}

@media (max-width: 699px) {
    html.game-active,
    body.game-active {
        overflow: hidden;
    }

    .game-layout {
        min-height: calc(100dvh - var(--header-h) - 10px);
        padding: calc(var(--header-h) + 8px) 8px 8px;
        gap: 8px;
        overflow: hidden;
    }

    .player-bar {
        min-height: 40px;
        padding: 8px;
    }

    .avatar {
        width: 24px;
        height: 24px;
    }

    .bar-name {
        font-size: 0.75rem;
    }

    .bar-badge,
    .bar-dice {
        font-size: 0.62rem;
    }

    .board-zone {
        padding: 6px 8px;
    }

    .board-zone--opp-attack,
    .board-zone--you-attack {
        padding: 4px 6px;
        min-height: 0;
    }

    .dice-row,
    .dice-row--attack {
        grid-template-columns: repeat(6, minmax(0, 44px));
        gap: 4px;
    }

    .die {
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 2px 1px;
    }

    .die-svg {
        max-width: 38px;
    }

    .attack-die,
    .attack-slot {
        width: 32px;
        height: 32px;
        min-height: 32px;
    }

    .board-zone--opp-attack,
    .board-zone--you-attack {
        min-height: 36px;
    }

    .side-panel {
        overflow: hidden;
    }

    .battle-controls {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .battle-controls > .action-row {
        margin-top: auto;
    }

    .target-row {
        min-height: 44px;
        margin-bottom: 10px;
    }

    .action-btn {
        min-height: 48px;
    }

    .sec-btn {
        min-height: 42px;
    }
}

@media (max-width: 480px) {
    .die-svg {
        max-width: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .arena-anim,
    .home-card,
    .home-hero,
    .modal-card,
    .landing-col,
    .landing-feat {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Minimal home refinement */
body::before,
.home::before {
    display: none;
}

.home {
    background: var(--bg);
}

.home-main {
    gap: var(--sp-5);
}

.home-context {
    width: min(100%, 760px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--b1);
    border-bottom: 1px solid var(--b1);
}

.home-context-item {
    min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    border-right: 1px solid var(--b1);
}

.home-context-item:last-child {
    border-right: 0;
}

.home-context-item strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.home-context-item span {
    display: block;
    color: var(--text-3);
    font-size: var(--fs-xs);
    line-height: 1.45;
}

@media (max-width: 720px) {
    .home-context {
        grid-template-columns: 1fr;
    }

    .home-context-item {
        border-right: 0;
        border-bottom: 1px solid var(--b1);
    }

    .home-context-item:last-child {
        border-bottom: 0;
    }
}

/* ══════════════════════════════════════
   RANK BADGES
   ══════════════════════════════════════ */
.rank-badge{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,0.06);border:1px solid var(--rank-color,#888);color:var(--rank-color,#888);text-transform:uppercase;white-space:nowrap}
.rank-badge--md{font-size:.78rem;padding:3px 10px}
.rank-badge--lg{font-size:.88rem;padding:4px 12px;gap:5px}
.rank-inline{font-weight:700;font-size:.85em}
.rank-progress{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.rank-progress-bar{height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden}
.rank-progress-fill{height:100%;border-radius:3px;transition:width .4s ease}
.rank-progress-label{display:flex;justify-content:space-between;font-size:.65rem;color:var(--text-3)}

/* ══════════════════════════════════════
   ACHIEVEMENT TOAST
   ══════════════════════════════════════ */
.achievement-toast{position:fixed;top:20px;right:20px;z-index:10000;display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--surface,#302E2B);border:1px solid var(--green,#84ad4b);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:achieveSlide .4s ease-out;pointer-events:none;max-width:340px}
.achievement-toast.leaving{animation:achieveOut .35s ease-in forwards}
.achievement-icon{font-size:1.6rem;flex-shrink:0}
.achievement-info{display:flex;flex-direction:column;gap:1px}
.achievement-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--green,#84ad4b);font-weight:700}
.achievement-name{font-size:.85rem;font-weight:600;color:var(--text,#f4eadc)}
.achievement-desc{font-size:.7rem;color:var(--text-3,#9b9a8d)}
@keyframes achieveSlide{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes achieveOut{to{transform:translateX(100px);opacity:0}}

/* ══════════════════════════════════════
   ACHIEVEMENTS GRID
   ══════════════════════════════════════ */
.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.achieve-card{display:flex;align-items:center;gap:6px;padding:6px 8px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:6px;transition:opacity .2s}
.achieve-card.locked{opacity:.35;filter:grayscale(1)}
.achieve-card .achieve-icon{font-size:1.1rem;flex-shrink:0}
.achieve-card .achieve-text{display:flex;flex-direction:column}
.achieve-card .achieve-name{font-size:.68rem;font-weight:600;color:var(--text,#f4eadc)}
.achieve-card .achieve-desc{font-size:.58rem;color:var(--text-3,#9b9a8d);line-height:1.3}

/* ══════════════════════════════════════
   TUTORIAL
   ══════════════════════════════════════ */
.tutorial-overlay{position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,0.4);pointer-events:none}
.tutorial-tooltip{position:fixed;z-index:9999;background:var(--surface,#1e272e);border:2px solid var(--green,#84ad4b);border-radius:10px;padding:16px 20px;max-width:380px;min-width:260px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.tutorial-step-indicator{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--green,#84ad4b);margin-bottom:6px;font-weight:700}
.tutorial-msg{font-size:.82rem;line-height:1.5;color:var(--text,#f4eadc);margin-bottom:12px}
.tutorial-msg strong{color:var(--green,#84ad4b)}
.tutorial-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tutorial-next-btn{font-size:.78rem;padding:6px 18px}
.tutorial-skip-btn{font-size:.68rem;color:var(--text-3,#9b9a8d);background:none;border:none;cursor:pointer;padding:4px 8px;text-decoration:underline}
.tutorial-skip-btn:hover{color:var(--text,#f4eadc)}
.tutorial-hint-text{font-size:.7rem;color:var(--text-3,#9b9a8d);font-style:italic}
.tutorial-highlight{position:relative;z-index:9995;animation:tutPulse 1.2s ease-in-out infinite;box-shadow:0 0 0 3px var(--green,#84ad4b),0 0 12px rgba(132,173,75,0.4)!important;border-radius:6px}
@keyframes tutPulse{0%,100%{box-shadow:0 0 0 3px var(--green,#84ad4b),0 0 12px rgba(132,173,75,0.3)}50%{box-shadow:0 0 0 5px var(--green,#84ad4b),0 0 20px rgba(132,173,75,0.5)}}

/* ══════════════════════════════════════
   DAILY PUZZLE
   ══════════════════════════════════════ */
.puzzle-card{max-width:480px}
.puzzle-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.puzzle-diff{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,0.06)}
.puzzle-diff--easy{color:#84ad4b;border:1px solid #84ad4b}
.puzzle-diff--medium{color:#f0c040;border:1px solid #f0c040}
.puzzle-diff--hard{color:#e04040;border:1px solid #e04040}
.puzzle-streak-badge{font-size:.7rem;color:var(--green,#84ad4b);font-weight:600}
.puzzle-prompt{font-size:.78rem;color:var(--text-2);margin-bottom:12px}
.puzzle-board{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.puzzle-section{background:rgba(255,255,255,0.03);border-radius:8px;padding:10px}
.puzzle-section--target{border:1px solid rgba(255,127,110,0.25)}
.puzzle-section-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);display:block;margin-bottom:6px;font-weight:600}
.puzzle-card .home-dice-row{pointer-events:auto}
.puzzle-card .home-dice-row .hero-die{pointer-events:auto}
.puzzle-die{cursor:pointer;transition:transform .15s,box-shadow .15s}
.puzzle-die:hover{transform:scale(1.08)}
.puzzle-die.selected{box-shadow:0 0 0 2px var(--green,#84ad4b);border-radius:6px}
.puzzle-die .die-svg,
.puzzle-die .die-label{pointer-events:none}
.puzzle-expr-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;min-height:32px}
.puzzle-expr{flex:1;font-family:'JetBrains Mono',monospace;font-size:1.1rem;font-weight:600;color:var(--text);padding:6px 10px;background:rgba(255,255,255,0.04);border-radius:6px;min-height:28px}
.puzzle-result{font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:700;min-width:60px;text-align:right}
.puzzle-result--match{color:var(--green,#84ad4b)}
.puzzle-result--miss{color:var(--red,#ff7f6e)}
.puzzle-result--correct{color:var(--green,#84ad4b);font-size:1.2rem}
.puzzle-ops{display:flex;gap:6px;margin-bottom:10px;justify-content:center}