/* Tactical Arena visual layer */

:root {
    --ink: #080a0c;
    --ink-2: #0c1013;
    --rail: rgba(244, 234, 220, 0.08);
    --rail-strong: rgba(244, 234, 220, 0.18);
    --green-ink: #183000;
    --copper: #d79542;
    --cyan: #62d7ff;
    --danger: #ff7f6e;
    --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-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;
}

body,
.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;
}

body::-webkit-scrollbar,
.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: #080a0c;
    align-items: stretch;
    justify-content: center;
    padding: 28px;
}

.home::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(244, 234, 220, 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(132, 173, 75, 0.16);
    transform: rotate(20deg);
    background: repeating-linear-gradient(90deg, rgba(244, 234, 220, 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(132, 173, 75, 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(132, 173, 75, 0.18);
    background: rgba(8, 10, 12, 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(244, 234, 220, 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(244, 234, 220, 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(8, 10, 12, 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(132, 173, 75, 0.38);
    background: rgba(132, 173, 75, 0.12);
}

.field-input {
    height: var(--field-h);
    min-height: var(--field-h);
    background: rgba(8, 10, 12, 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(244, 234, 220, 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(8, 10, 12, 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(132, 173, 75, 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(8, 10, 12, 0.40);
}

.game-layout {
    grid-template-columns: minmax(520px, 760px) minmax(360px, 420px);
    gap: 14px;
    padding: 24px;
    background: transparent;
}

.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(255, 127, 110, 0.84);
}

.player-bar--you {
    border-left-color: rgba(132, 173, 75, 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(132, 173, 75, 0.07);
    box-shadow: inset 0 0 36px rgba(132, 173, 75, 0.12);
}

.board-zone--opp-home.active {
    background: rgba(255, 127, 110, 0.045);
    box-shadow: inset 0 0 36px rgba(255, 127, 110, 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(244, 234, 220, 0.04);
}

.die.valid-attack {
    background: rgba(132, 173, 75, 0.09);
}

.die.target {
    background: rgba(255, 127, 110, 0.08);
}

.die.selected {
    background: rgba(215, 149, 66, 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(132, 173, 75, 0.42);
    outline-offset: -4px;
}

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

.die.drop-over .die-svg {
    filter: drop-shadow(0 0 8px rgba(132, 173, 75, 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(100vh - 48px));
    min-height: min(640px, calc(100vh - 48px));
    max-height: min(640px, calc(100vh - 48px));
    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(132, 173, 75, 0.62);
}

.turn-dot.opp {
    background: var(--red);
    box-shadow: 0 0 16px rgba(255, 127, 110, 0.58);
}

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

.move-entry:nth-child(odd) {
    background: rgba(244, 234, 220, 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(8, 10, 12, 0.58);
}

.room-code {
    color: var(--green);
    background:
        repeating-linear-gradient(90deg, rgba(132, 173, 75, 0.06) 0 1px, transparent 1px 12px),
        rgba(8, 10, 12, 0.92);
    border: 1px solid rgba(132, 173, 75, 0.35);
    border-radius: var(--r);
    box-shadow: inset 0 0 22px rgba(132, 173, 75, 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(8, 10, 12, 0.52);
    border-radius: var(--r);
    min-height: 136px;
}

.conn-badge {
    border: 1px solid var(--rail);
    background: rgba(8, 10, 12, 0.75);
}

.reaction-btn {
    background: rgba(8, 10, 12, 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);
}

.name-linked {
    opacity: 0.72;
    cursor: default;
    border-color: rgba(132, 173, 75, 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(244, 234, 220, 0.04);
    color: var(--text-2);
}

.profile-edit-btn:hover,
.auth-cancel-btn:hover {
    background: rgba(132, 173, 75, 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(8, 10, 12, 0.52);
}

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

.landing-info {
    background: rgba(8, 10, 12, 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(244, 234, 220, 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) {
    .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%, 760px);
        margin: 0 auto;
    }

    .side-panel {
        border-radius: var(--r);
    }

    .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;
    }
}

@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;
}

:root.light body {
    background: var(--bg);
}

:root.light .home {
    background: #f6f4f0;
}

:root.light .site-header {
    background: rgba(246, 244, 240, 0.9);
    border-bottom-color: #ded8ce;
}

:root.light .site-footer {
    color: #7d766d;
}

:root.light .site-footer a {
    color: #6c665e;
}

:root.light .home-context {
    border-color: #ded8ce;
}

:root.light .home-context-item {
    border-color: #ded8ce;
}

:root.light .home-context-item span {
    color: #5f5a52;
}

:root.light .account-drawer,
:root.light .settings-modal,
:root.light .modal-card,
:root.light .online-card,
:root.light .lb-modal {
    background: #ffffff;
    border-color: #ded8ce;
}

:root.light .home-form {
    background: #ffffff;
    border-color: #ded8ce;
}

:root.light .home-dice-row {
    background: #f0ede8;
    border-color: #ded8ce;
}

:root.light .home-badge {
    border-color: #ded8ce;
    color: #5f5a52;
}
:root.light .home-badge--green {
    color: var(--green);
    border-color: var(--green);
}

:root.light .hdr-nav-btn {
    color: #5f5a52;
}
:root.light .hdr-nav-btn:hover {
    background: #ece8e2;
    color: #171717;
}

:root.light .lb-modal-overlay {
    background: rgba(0,0,0,0.35);
}

:root.light .lb-row:nth-child(odd) {
    background: #f6f4f0;
}

:root.light .drawer-overlay.active {
    background: rgba(0,0,0,0.25);
}

:root.light .field-input {
    background: var(--bg);
    border-color: var(--b1);
}
:root.light .field-input:focus {
    border-color: var(--green);
}

:root.light .opt-btn,
:root.light .diff-btn,
:root.light .timer-preset,
:root.light .move-preset,
:root.light .settings-btn,
:root.light .quick-play-btn {
    background: var(--surface);
    border-color: var(--b1);
}

:root.light .timer-setting {
    background: var(--surface);
    border-color: var(--b1);
}

@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;
    }
}