* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --white-piece-color: #ffffff;
    --black-piece-color: #000000;
    --accent: #00008B;  /* Deep Blue (was #4b0082 purple) */
    --title-color: #6a0dad;  /* Royal purple for title */
    --app-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --panel-bg: #ffffff;
    --panel-text: #333333;
    --subtle-bg: #f5f5f5;
    --control-bg: #ffffff;
    --control-border: #cccccc;
    --chip-bg: #f2f2f6;
    --white-piece-pattern: none;
    --black-piece-pattern: none;
    --white-piece-color-solid: #ffffff;
    --black-piece-color-solid: #111111;
}

body[data-theme="dark"] {
    --app-bg: linear-gradient(135deg, #0b1220 0%, #0f172a 100%);
    --panel-bg: #0f172a;
    --panel-text: #e5e7eb;
    --subtle-bg: #1f2937;
    --control-bg: #111827;
    --control-border: #334155;
    --chip-bg: #1f2937;
}

body[data-theme="light"] {
    --app-bg: linear-gradient(135deg, #e8eaf0 0%, #dde1ea 100%);
    --panel-bg: #ffffff;
    --panel-text: #333333;
    --subtle-bg: #f5f5f5;
    --control-bg: #ffffff;
    --control-border: #cccccc;
    --chip-bg: #f2f2f6;
}

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--app-bg);
    min-height: 100vh;
    min-height: calc(100vh - env(safe-area-inset-bottom, 0px));
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    color: var(--panel-text);
    overflow-x: hidden;
}

.container {
    background: var(--panel-bg);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 1400px;
    width: 100%;
    padding-top: 70px;  /* Space for hamburger button */
}

#game-screen {
    max-width: min(96vw, 1800px);
    min-height: calc(100vh - 20px);
}

/* Vertical Title Sidebar */
.title-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 24px;   /* More space to the left of the title */
    padding-right: 20px;
    min-width: 80px;  /* Increased to prevent wrapping on long mode names */
}

h1 {
    color: var(--title-color) !important;  /* Use CSS variable like pieces do! */
    margin: 0;
    font-size: 2.2em;
    font-weight: 700;
    text-transform: uppercase;  /* ALL CAPS! */
    writing-mode: vertical-lr;  /* Vertical left-to-right (first line = leftmost) */
    text-orientation: upright;  /* Each letter stacked! */
    white-space: nowrap;  /* Prevent wrapping - <br> still creates new lines */
    letter-spacing: 8px;  /* More space between letters! */
}

.game-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 0;
    padding: 14px;
    background: var(--panel-bg);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#status {
    font-weight: bold;
    font-size: 1.2em;
    color: var(--panel-text);
}

#turn-counter {
    color: var(--panel-text);
}

#chessboard {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    /* Keep board square: equal width/height (avoids rectangular cells on 14×14 / 16×16) */
    --board-side: min(1100px, 100%, calc(100vh - 150px), calc(100dvw - 400px));
    width: var(--board-side);
    height: var(--board-side);
    max-width: 100%;
    max-height: calc(100vh - 150px);
    aspect-ratio: 1;
    margin: 0 auto;
    box-sizing: border-box;
    border: 6px solid #333;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    touch-action: pan-x pan-y pinch-zoom;
    overflow: hidden;
}

#chessboard.board-12 {
    --board-side: min(100%, calc(100vh - 150px), calc(100dvw - 400px), 950px);
}

#chessboard.board-14 {
    --board-side: min(100%, calc(100vh - 160px), calc(100dvw - 420px), 880px);
}

#chessboard.board-16 {
    --board-side: min(100%, calc(100vh - 170px), calc(100dvw - 440px), min(85vmin, 780px));
}

.board-area {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
    max-width: 100%;
    min-height: calc(100vh - 120px);
}

/* LEFT SIDE: BIG BOARD (but fits on screen!) */
#chessboard-container {
    flex: 1;
    max-width: 1120px;  /* Allow larger desktop boards */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* RIGHT SIDE: INFO PANEL */
.info-panel {
    width: 320px;
    flex-shrink: 0;
    background: var(--subtle-bg);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

.captured-panel {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.captured-section {
    background: var(--panel-bg);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.captured-title {
    font-weight: 700;
    color: var(--panel-text);
    margin-bottom: 6px;
}

.captured-pieces {
    min-height: 48px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 1.2em;
}

.captured-piece {
    background: var(--chip-bg);
    border-radius: 6px;
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    line-height: 1;
}

.captured-section.white .captured-title {
    color: #333333 !important;  /* Fixed dark grey - NOT piece color! */
    font-weight: 700;
}

.captured-section.white .captured-score {
    color: var(--white-piece-color-solid);
}

.captured-section.black .captured-title {
    color: #333333 !important;  /* Fixed dark grey - NOT piece color! */
    font-weight: 700;
}

.captured-section.black .captured-score {
    color: var(--black-piece-color-solid);
}

.captured-piece.white { color: var(--white-piece-color); }
.captured-piece.black { color: var(--black-piece-color); }

.captured-piece.prince {
    width: 1.55em;
    height: 1.55em;
    padding: 2px;
}

.captured-piece.prince .prince-knight,
.captured-piece.prince .prince-rook {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    line-height: 1;
}

.captured-piece.prince .prince-knight {
    top: 0;
    height: 62%;  /* 7% LARGER than original 58% */
    align-items: flex-start;
    z-index: 2;
    transform: translate(-2%, -4%);  /* Center better in captured chip */
}

.captured-piece.prince .prince-rook {
    bottom: 0;
    height: 94%;  /* 7% LARGER than original 88% */
    align-items: flex-end;
    z-index: 1;
}

.captured-piece.prince .prince-knight .glyph,
.captured-piece.prince .prince-rook .glyph {
    display: block;
    transform-origin: center bottom;
}

.captured-piece.prince .prince-knight .glyph {
    transform: scale(0.89);  /* 7% LARGER than original 0.83 */
}

.captured-piece.prince .prince-rook .glyph {
    font-size: 1.15em;
    transform: scale(0.85);
}

.captured-piece.prince .prince-svg-mask {
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-blend-mode: screen;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.captured-piece.white .prince-svg-mask {
    background-color: var(--white-piece-color);
}

.captured-piece.black .prince-svg-mask {
    background-color: var(--black-piece-color);
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.25));
}

.captured-piece .classic-piece-svg-mask {
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-blend-mode: screen;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.captured-piece.white .classic-piece-svg-mask {
    background-color: var(--white-piece-color);
}

.captured-piece.black .classic-piece-svg-mask {
    background-color: var(--black-piece-color);
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.25));
}

/* Fantasy captured pieces: same mask+fill silhouette as board, kept small to match classic layout */
.fantasy-style .captured-piece {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
    padding: 2px;
    box-sizing: border-box;
}

.fantasy-style .captured-piece .fantasy-mask-piece-captured {
    width: 100%;
    height: 100%;
    display: block;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.fantasy-style .captured-piece.white .fantasy-mask-piece-captured {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
}

.fantasy-style .captured-piece.black .fantasy-mask-piece-captured {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.25));
}

.captured-piece.princess {
    flex-direction: column;
}

.captured-piece.princess .princess-crown {
    width: 0.8em;
    height: 0.442em;  /* 12% shorter: was 0.5em (7% + additional 5%) */
    margin-bottom: -0.19em;
    transform: scale(0.637);
}

.captured-piece.princess .princess-crown svg {
    width: 100%;
    height: 100%;
    display: block;
}

.captured-piece.white .princess-crown svg {
    fill: var(--white-piece-color-solid);
    stroke: rgba(0, 0, 0, 0.35);
    stroke-width: 2;
}

.captured-piece.black .princess-crown svg {
    fill: var(--black-piece-color-solid);
}

.captured-piece.princess .princess-bishop {
    font-size: 0.87em;  /* 7% shorter: was 0.94em */
    line-height: 1;
}

.captured-piece.princess .princess-svg-mask {
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-blend-mode: screen;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.captured-piece.white .princess-svg-mask {
    background-color: var(--white-piece-color);
}

.captured-piece.black .princess-svg-mask {
    background-color: var(--black-piece-color);
}

.captured-score {
    margin-top: 8px;
    font-weight: 600;
    color: #333;
}

.move-history-panel {
    background: var(--panel-bg);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* ── Inline Match Chat (embedded below board) ──────────────────────── */
#inline-chat-section {
    background: var(--panel-bg, #1a2744);
    border-radius: 10px;
    margin: 8px 0;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.inline-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    user-select: none;
}
.inline-chat-header:hover { background: rgba(255,255,255,0.1); }

.inline-chat-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--panel-text, #e0e0ff);
}

.inline-chat-toggle-btn {
    background: transparent;
    border: none;
    color: var(--panel-text, #e0e0ff);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}
.inline-chat-toggle-btn:hover { opacity: 1; }

/* Preview: always-visible compact message list (last 3 messages, newest at bottom) */
.inline-chat-preview {
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    min-height: 54px;
    max-height: 88px;
    overflow-y: auto;
}
.inline-chat-preview .inline-chat-msg { font-size: 0.82rem; }
.inline-chat-preview .inline-chat-msg-name {
    font-weight: 600;
    margin-right: 4px;
    opacity: 0.75;
    font-size: 0.75rem;
}
.inline-chat-preview .inline-chat-msg-text {
    padding: 2px 7px !important;
    font-size: 0.82rem;
    opacity: 0.92;
}
/* Empty preview placeholder */
.inline-chat-preview:empty::after {
    content: 'No messages yet';
    font-size: 0.78rem;
    opacity: 0.4;
    color: var(--panel-text, #e0e0ff);
    align-self: center;
    margin: auto 0;
}

.inline-chat-messages {
    padding: 8px 10px;
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inline-chat-msg { font-size: 0.85rem; line-height: 1.4; }
.inline-chat-msg .inline-chat-msg-name { font-weight: 600; margin-right: 6px; opacity: 0.7; font-size: 0.78rem; }
.inline-chat-msg.mine { text-align: right; }
.inline-chat-msg.mine .inline-chat-msg-text { background: rgba(80,120,220,0.25); padding: 3px 8px; border-radius: 10px; display: inline-block; }
.inline-chat-msg.theirs .inline-chat-msg-text { background: rgba(255,255,255,0.08); padding: 3px 8px; border-radius: 10px; display: inline-block; }

.inline-chat-compose {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.inline-chat-compose input {
    flex: 1;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #e8e8f8;
    padding: 6px 10px;
    font-size: 0.88rem;
    outline: none;
}
.inline-chat-compose input:focus { border-color: rgba(120,160,255,0.5); }

.inline-chat-compose button {
    background: #3a6eda;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}
.inline-chat-compose button:hover { background: #4a7eea; }

/* Expanded state: rotate toggle arrow */
#inline-chat-section.expanded .inline-chat-toggle-btn { transform: rotate(180deg); }


.move-history-title {
    font-weight: 700;
    color: var(--panel-text);
    margin-bottom: 8px;
}

.move-history-list {
    max-height: 300px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--panel-text);
}

.move-history-item {
    padding: 4px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
    display: flex;
    gap: 8px;
}

.move-history-item:hover {
    background: var(--subtle-bg);
}

.move-number {
    font-weight: 600;
    min-width: 30px;
}

.move-white {
    min-width: 60px;
}

.move-black {
    min-width: 60px;
}

:root {
    --board-light: #d9d9d9;  /* Very light gray */
    --board-dark: #3a3a3a;   /* Dark gray */
}

.square {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4.3em;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

.square.light {
    background-color: #d9d9d9;
    background-color: var(--board-light, #d9d9d9);
    background-image: var(--board-light-texture, none);
    background-size: cover;
    background-position: center;
}

.square.dark {
    background-color: #3a3a3a;
    background-color: var(--board-dark, #3a3a3a);
    background-image: var(--board-dark-texture, none);
    background-size: cover;
    background-position: center;
}

/* Marble/steel textures on a ::before layer so brightness sliders don't affect pieces */
.square.has-board-texture {
    background-image: none !important;
}

.square.has-board-texture::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--sq-tex-image);
    background-size: var(--sq-tex-size, cover);
    background-position: var(--sq-tex-pos, center);
    background-repeat: no-repeat;
}

.square.light.has-board-texture::before {
    filter: brightness(var(--board-light-tex-brightness, 100%));
}

.square.dark.has-board-texture::before {
    filter: brightness(var(--board-dark-tex-brightness, 100%));
}

.square.light.has-board-texture::after,
.square.dark.has-board-texture::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.square.light.has-board-texture::after {
    background: rgba(0, 0, 0, var(--sq-tex-dim, var(--board-light-tex-dim, 0)));
}

.square.dark.has-board-texture::after {
    background: rgba(0, 0, 0, var(--sq-tex-dim, var(--board-dark-tex-dim, 0)));
}

.square .piece,
.square .wall-block,
.square .quicksand-overlay {
    position: relative;
    z-index: 1;
}

.settings-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 0.88rem;
    cursor: pointer;
    padding: 4px 0;
}

.settings-toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #6366f1;
    cursor: pointer;
    flex-shrink: 0;
}

.settings-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0;
}

.settings-version-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
    opacity: 0.85;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.settings-version-footer #app-version-display {
    color: #cbd5e1;
    font-weight: 600;
}

.check-update-btn {
    padding: 8px 20px;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.check-update-btn:hover {
    background: rgba(59, 130, 246, 0.35);
    color: #dbeafe;
}

.check-update-btn:active {
    background: rgba(59, 130, 246, 0.5);
}

.square:hover {
    opacity: 0.8;
}

.square.selected {
    background-color: #6a994e !important;
    box-shadow: inset 0 0 0 3px #fff;
}

.square.possible-move {
    box-shadow: inset 0 0 0 6px rgba(106, 153, 78, 0.5) !important;  /* 50% wider: 4px → 6px */
}

.square.possible-capture {
    box-shadow: inset 0 0 0 6px rgba(214, 40, 40, 0.6) !important;  /* 50% wider: 4px → 6px */
}

/* Injected move-indicator elements — more reliable than box-shadow on small squares */
.move-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 3;
    border-radius: 50%;
}

.move-indicator-dot {
    width: 36%;
    height: 36%;
    /* Use aspect-ratio so height = width when containing block height is uncertain */
    aspect-ratio: 1;
    background: rgba(60, 180, 60, 0.88);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.55);
}

.move-indicator-capture {
    width: 90%;
    height: 90%;
    aspect-ratio: 1;
    border: 6px solid rgba(210, 30, 30, 0.92);
    background: rgba(210, 30, 30, 0.12);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.square.in-check {
    background-color: #ff6b6b !important;
    animation: pulse 1s infinite;
}

.square.last-from {
    box-shadow: inset 0 0 0 3px rgba(138, 43, 226, 0.85);
}

.square.last-to {
    box-shadow: inset 0 0 0 3px rgba(255, 196, 0, 0.9);
}

/* Last-move rings above marble/steel texture layers */
.move-hl {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.move-hl-from {
    box-shadow: inset 0 0 0 3px rgba(138, 43, 226, 0.85);
}

.move-hl-to {
    box-shadow: inset 0 0 0 3px rgba(255, 196, 0, 0.9);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.piece {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    white-space: pre-line;
    line-height: 1;
    text-align: center;
    user-select: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

body:not(.minimal-style) .piece {
    transform: translateY(-2px);
}

body:not(.minimal-style) .piece::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 15%;
    width: 70%;
    height: 8%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 50%, transparent 75%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

body:not(.minimal-style) .piece:hover:not(.dragging) {
    transform: translateY(-5px) scale(1.08);
}

body:not(.minimal-style) .piece:hover:not(.dragging)::after {
    bottom: -4px;
    height: 10%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.1) 50%, transparent 75%);
}

/* Fantasy Style - Show ornate PNG images directly (with backgrounds for now) */
.fantasy-style .piece {
    padding: 0;
}

.fantasy-mask-piece {
    width: 90%;
    height: 90%;
    pointer-events: none;
    display: block;
    margin: auto;
    /* mask-image is set inline in JS */
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.fantasy-mask-piece-captured {
    width: 80%;
    height: 80%;
}

/* Fill with the normal piece colors (respects your color & brightness settings) */
.fantasy-style .piece.white .fantasy-mask-piece,
.fantasy-style .captured-piece.white .fantasy-mask-piece {
    background-color: var(--white-piece-color);
}

.fantasy-style .piece.black .fantasy-mask-piece,
.fantasy-style .captured-piece.black .fantasy-mask-piece {
    background-color: var(--black-piece-color);
}

/* Contrast outline to keep pieces readable on both square colors */
.fantasy-style .piece.white .fantasy-mask-piece {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.65)) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.35));
}

/* Extra readability boost for the specific white pieces you called out */
.fantasy-style .piece.white.rook .fantasy-mask-piece,
.fantasy-style .piece.white.knight .fantasy-mask-piece,
.fantasy-style .piece.white.prince .fantasy-mask-piece {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.75))
            drop-shadow(0 0 1px rgba(0, 0, 0, 0.55))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.35));
}

.fantasy-style .piece.white.knight .fantasy-mask-piece,
.fantasy-style .piece.white.prince .fantasy-mask-piece {
    width: 95%;
    height: 95%;
}

/* Slightly enlarge the prince to make the horse head read bigger */
.fantasy-style .piece.white.prince .fantasy-mask-piece,
.fantasy-style .piece.black.prince .fantasy-mask-piece {
    width: 98%;
    height: 98%;
}

/* Prince facing directions:
   - White prince faces RIGHT (toward black side)
   - Black prince faces LEFT (toward white side) */
.fantasy-style .piece.white.prince .fantasy-mask-piece {
    transform: scaleX(-1);
    transform-origin: center;
}

/* Knight facing directions:
   - White knights face RIGHT
   - Black knights face LEFT */
.fantasy-style .piece.black.knight .fantasy-mask-piece {
    transform: scaleX(-1);
    transform-origin: center;
}

.fantasy-style .piece.white.queen .fantasy-mask-piece,
.fantasy-style .piece.white.king .fantasy-mask-piece {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.35));
}

.fantasy-style .piece.white.queen .fantasy-mask-piece {
    width: 95%;
    height: 95%;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.78))
            drop-shadow(0 0 1px rgba(0, 0, 0, 0.6))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.35));
}

.fantasy-style .piece.black .fantasy-mask-piece {
    /* Stronger light outline so dark pieces don't disappear on dark squares */
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.28))
            drop-shadow(0 0 1px rgba(255, 255, 255, 0.22))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.65));
}

/* Minimal Style - Clean and simple */
.minimal-style .piece {
    font-weight: 300 !important;
    transform: scale(0.95);
    opacity: 1;
    text-shadow: none !important;
}

.minimal-style .piece.white,
.minimal-style .piece.black {
    background: none !important;
    background-image: none !important;
}

.minimal-style .piece .classic-piece-svg-mask,
.minimal-style .piece .prince-svg-mask,
.minimal-style .piece .princess-svg-mask,
.minimal-style .piece .custom-piece-glyph-mask,
.minimal-style .piece .saboteur-mask,
.minimal-style .piece .siegeengine-mask,
.minimal-style .piece .general-mask,
.minimal-style .piece .minimal-mask,
.minimal-style .captured-piece .classic-piece-svg-mask,
.minimal-style .captured-piece .prince-svg-mask,
.minimal-style .captured-piece .princess-svg-mask,
.minimal-style .captured-piece .custom-piece-glyph-mask,
.minimal-style .captured-piece .saboteur-mask,
.minimal-style .captured-piece .siegeengine-mask,
.minimal-style .captured-piece .general-mask,
.minimal-style .captured-piece .minimal-mask,
.minimal-style .bd-piece .classic-piece-svg-mask,
.minimal-style .bd-piece .prince-svg-mask,
.minimal-style .bd-piece .princess-svg-mask,
.minimal-style .bd-piece .custom-piece-glyph-mask,
.minimal-style .bd-piece .siegeengine-mask,
.minimal-style .bd-piece .general-mask,
.minimal-style .bd-piece .minimal-mask,
.minimal-style .bd-palette-icon .classic-piece-svg-mask,
.minimal-style .bd-palette-icon .prince-svg-mask,
.minimal-style .bd-palette-icon .princess-svg-mask,
.minimal-style .bd-palette-icon .custom-piece-glyph-mask,
.minimal-style .bd-palette-icon .siegeengine-mask,
.minimal-style .bd-palette-icon .general-mask {
    background-image: none !important;
    background-blend-mode: normal !important;
    filter: none !important;
    opacity: 1 !important;
}

.piece.white,
.captured-piece.white {
    color: var(--white-piece-color);
}

.piece.black,
.captured-piece.black {
    color: var(--black-piece-color);
}

:root[data-white-pattern="true"] .piece.white,
:root[data-white-pattern="true"] .captured-piece.white,
:root[data-white-pattern="true"] .piece.white .glyph,
:root[data-white-pattern="true"] .captured-piece.white .glyph,
:root[data-white-pattern="true"] .piece.white .princess-bishop,
:root[data-white-pattern="true"] .captured-piece.white .princess-bishop {
    background-image: var(--white-piece-pattern);
}

:root[data-black-pattern="true"] .piece.black,
:root[data-black-pattern="true"] .captured-piece.black,
:root[data-black-pattern="true"] .piece.black .glyph,
:root[data-black-pattern="true"] .captured-piece.black .glyph,
:root[data-black-pattern="true"] .piece.black .princess-bishop,
:root[data-black-pattern="true"] .captured-piece.black .princess-bishop {
    background-image: var(--black-piece-pattern);
}

/* ── New parameterised piece patterns (stripes, dots, camo) ─────────────── */
/* Applied on the CSS-mask children so the pattern is clipped to the piece shape */

:root[data-white-piece-pattern]:not([data-white-piece-pattern="solid"]):not([data-white-piece-pattern="legacy-camo"])
    .piece.white .classic-piece-svg-mask,
:root[data-white-piece-pattern]:not([data-white-piece-pattern="solid"]):not([data-white-piece-pattern="legacy-camo"])
    .piece.white .prince-svg-mask,
:root[data-white-piece-pattern]:not([data-white-piece-pattern="solid"]):not([data-white-piece-pattern="legacy-camo"])
    .piece.white .princess-svg-mask,
:root[data-white-piece-pattern]:not([data-white-piece-pattern="solid"]):not([data-white-piece-pattern="legacy-camo"])
    .piece.white .castleguard-svg-mask,
:root[data-white-piece-pattern]:not([data-white-piece-pattern="solid"]):not([data-white-piece-pattern="legacy-camo"])
    .piece.white .general-mask,
:root[data-white-piece-pattern]:not([data-white-piece-pattern="solid"]):not([data-white-piece-pattern="legacy-camo"])
    .piece.white .saboteur-mask,
:root[data-white-piece-pattern]:not([data-white-piece-pattern="solid"]):not([data-white-piece-pattern="legacy-camo"])
    .piece.white .siegeengine-mask {
    background-image: var(--white-piece-pattern-grad) !important;
    background-color: transparent !important;
    background-blend-mode: normal !important;
    background-size: var(--white-piece-pattern-size, cover) !important;
    background-repeat: var(--white-piece-pattern-repeat, no-repeat) !important;
    background-position: var(--white-piece-pattern-position, center) !important;
}

:root[data-black-piece-pattern]:not([data-black-piece-pattern="solid"]):not([data-black-piece-pattern="legacy-camo"])
    .piece.black .classic-piece-svg-mask,
:root[data-black-piece-pattern]:not([data-black-piece-pattern="solid"]):not([data-black-piece-pattern="legacy-camo"])
    .piece.black .prince-svg-mask,
:root[data-black-piece-pattern]:not([data-black-piece-pattern="solid"]):not([data-black-piece-pattern="legacy-camo"])
    .piece.black .princess-svg-mask,
:root[data-black-piece-pattern]:not([data-black-piece-pattern="solid"]):not([data-black-piece-pattern="legacy-camo"])
    .piece.black .castleguard-svg-mask,
:root[data-black-piece-pattern]:not([data-black-piece-pattern="solid"]):not([data-black-piece-pattern="legacy-camo"])
    .piece.black .general-mask,
:root[data-black-piece-pattern]:not([data-black-piece-pattern="solid"]):not([data-black-piece-pattern="legacy-camo"])
    .piece.black .saboteur-mask,
:root[data-black-piece-pattern]:not([data-black-piece-pattern="solid"]):not([data-black-piece-pattern="legacy-camo"])
    .piece.black .siegeengine-mask {
    background-image: var(--black-piece-pattern-grad) !important;
    background-color: transparent !important;
    background-blend-mode: normal !important;
    background-size: var(--black-piece-pattern-size, cover) !important;
    background-repeat: var(--black-piece-pattern-repeat, no-repeat) !important;
    background-position: var(--black-piece-pattern-position, center) !important;
}

/* Board theme override hint */
#board-theme-override-hint {
    display: none;
    font-size: 0.75rem;
    color: #ffb74d;
    margin-top: 2px;
    font-style: italic;
}

/* Custom square color row (shown when toggle active) */
.custom-sq-color-row {
    display: none;
    margin-top: 4px;
}

/* Piece pattern extra color rows */
.piece-pattern-color-row {
    display: none;
    margin-top: 4px;
}

/* Appearance broadcast row */
.appearance-color-row {
    display: none;
    margin-top: 4px;
}


@supports (-webkit-background-clip: text) or (background-clip: text) {
    :root[data-white-pattern="true"] .piece.white,
    :root[data-white-pattern="true"] .captured-piece.white,
    :root[data-white-pattern="true"] .piece.white .glyph,
    :root[data-white-pattern="true"] .captured-piece.white .glyph,
    :root[data-white-pattern="true"] .piece.white .princess-bishop,
    :root[data-white-pattern="true"] .captured-piece.white .princess-bishop {
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    :root[data-black-pattern="true"] .piece.black,
    :root[data-black-pattern="true"] .captured-piece.black,
    :root[data-black-pattern="true"] .piece.black .glyph,
    :root[data-black-pattern="true"] .captured-piece.black .glyph,
    :root[data-black-pattern="true"] .piece.black .princess-bishop,
    :root[data-black-pattern="true"] .captured-piece.black .princess-bishop {
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.piece.prince .prince-knight,
.piece.prince .prince-rook {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    line-height: 1;
    z-index: 1;
}

.piece.prince .prince-knight {
    top: 0;
    height: 62%;  /* 7% LARGER than original 58% */
    align-items: flex-start;
    z-index: 2;
    transform: translate(-5%, -8%);  /* Adjusted to prevent overlap */
}

.piece.prince .prince-rook {
    bottom: 0;
    height: 94%;  /* 7% LARGER than original 88% */
    align-items: flex-end;
    z-index: 1;
}

.piece.prince .prince-knight .glyph,
.piece.prince .prince-rook .glyph {
    display: block;
}

.piece.prince .prince-knight .glyph {
    transform: scale(0.89);  /* 7% LARGER than original 0.83 */
    transform-origin: center bottom;
}

.piece.prince .prince-rook .glyph {
    font-size: 1.20em;  /* 7% LARGER than original 1.12em */
    transform: scale(0.78);  /* 7% LARGER than original 0.73 */
    transform-origin: center bottom;
}

.piece.prince .prince-svg-mask {
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-blend-mode: screen;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.piece.white .prince-svg-mask {
    background-color: var(--white-piece-color);
}

.piece.black .prince-svg-mask {
    background-color: var(--black-piece-color);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.28))
            drop-shadow(0 0 1px rgba(255, 255, 255, 0.22))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.65));
}

.piece .classic-piece-svg-mask {
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-blend-mode: screen;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.piece.white .classic-piece-svg-mask {
    background-color: var(--white-piece-color);
}

.piece.rook .classic-piece-svg-mask {
    transform: scale(0.88);
}

.piece.black .classic-piece-svg-mask {
    background-color: var(--black-piece-color);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.28))
            drop-shadow(0 0 1px rgba(255, 255, 255, 0.22))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.65));
}

/* Saboteur piece: dedicated mask div (no backgroundImage set, only maskImage).
   The background-color comes from .piece.white/.piece.black rules so only the
   masked silhouette receives colour — the board square is left completely alone. */
.piece.general .general-mask,
.captured-piece.general .general-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    -webkit-mask-size: 115%;
    mask-size: 115%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}

.piece.saboteur .saboteur-mask,
.captured-piece.saboteur .saboteur-mask,
.piece.siegeengine .siegeengine-mask,
.captured-piece.siegeengine .siegeengine-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}

/* Saboteur is naturally small — scale it up 27% */
.piece.saboteur .saboteur-mask,
.captured-piece.saboteur .saboteur-mask {
    -webkit-mask-size: 127%;
    mask-size: 127%;
}
.piece.saboteur,
.captured-piece.saboteur,
.piece.siegeengine,
.captured-piece.siegeengine,
.piece.general,
.captured-piece.general {
    background: none !important;
    background-image: none !important;
}

/* Saboteur inherits team colour from the parent .piece.white / .piece.black rules,
   but we need the background-color on the mask div itself.                        */
.piece.white .saboteur-mask,
.captured-piece.white .saboteur-mask,
.piece.white .siegeengine-mask,
.captured-piece.white .siegeengine-mask,
.piece.white .general-mask,
.captured-piece.white .general-mask {
    background-color: var(--white-piece-color);
}
.piece.black .saboteur-mask,
.captured-piece.black .saboteur-mask,
.piece.black .siegeengine-mask,
.captured-piece.black .siegeengine-mask,
.piece.black .general-mask,
.captured-piece.black .general-mask {
    background-color: var(--black-piece-color);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.28))
            drop-shadow(0 0 1px rgba(255, 255, 255, 0.22))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.65));
}

.piece.siegeengine .siegeengine-mask,
.captured-piece.siegeengine .siegeengine-mask {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 2px rgba(255, 255, 255, 0.65))
            drop-shadow(0 0 4px rgba(255, 255, 255, 0.35))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.6));
}

.piece.general .general-mask,
.captured-piece.general .general-mask {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.75))
            drop-shadow(0 0 2px rgba(255, 255, 255, 0.45))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.6));
}

/* General K/B/R ability indicators */
.general-ability-indicators {
    position: absolute;
    bottom: 6%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.04em;
    pointer-events: none;
    z-index: 2;
    font-size: 0.26em;
    line-height: 1;
}
.general-ind {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 900;
    padding: 0.05em 0.08em;
    border-radius: 0.06em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1;
    transform: translateY(0);
}
.piece.white .general-ind,
.captured-piece.white .general-ind {
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.piece.black .general-ind,
.captured-piece.black .general-ind {
    color: #111;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.4);
}
.general-ind.lost {
    opacity: 0.18;
    transform: translateY(0.08em);
    text-decoration: line-through;
}
.captured-piece .general-ability-indicators {
    font-size: 7px;
    bottom: -1px;
    gap: 1px;
}
.captured-piece .general-ind {
    padding: 0 1px;
    border-width: 0.5px;
}

/* === Realistic Medieval Style === */
.piece .realistic-mask,
.captured-piece .realistic-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}
.piece.white .realistic-mask,
.captured-piece.white .realistic-mask {
    background-color: var(--white-piece-color);
}
.piece.black .realistic-mask,
.captured-piece.black .realistic-mask {
    background-color: var(--black-piece-color);
}
.realistic-style .piece,
.realistic-style .captured-piece {
    background: none !important;
    background-image: none !important;
}
.realistic-style .piece.white .realistic-mask,
.realistic-style .captured-piece.white .realistic-mask {
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 15%, transparent 40%),
        radial-gradient(ellipse at 35% 18%, rgba(255,255,255,1) 0%, rgba(240,248,255,0.45) 22%, transparent 50%),
        linear-gradient(160deg, rgba(255,255,255,0.65) 0%, rgba(200,210,230,0.2) 30%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0.5) 85%, rgba(40,40,60,0.25) 100%) !important;
    background-blend-mode: screen, screen, multiply;
    filter: drop-shadow(0 4px 3px rgba(0,0,0,0.45))
            drop-shadow(0 2px 1px rgba(0,0,0,0.3))
            drop-shadow(-1px -1px 0 rgba(255,255,255,0.55))
            drop-shadow(0 0 4px rgba(180,200,240,0.25));
}
.realistic-style .piece.black .realistic-mask,
.realistic-style .captured-piece.black .realistic-mask {
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.22) 14%, transparent 38%),
        radial-gradient(ellipse at 35% 18%, rgba(255,255,255,0.6) 0%, rgba(180,195,220,0.2) 22%, transparent 50%),
        linear-gradient(160deg, rgba(255,255,255,0.28) 0%, rgba(40,45,55,0.18) 28%, rgba(0,0,0,0.85) 65%, rgba(0,0,0,0.9) 85%, rgba(20,20,30,0.35) 100%) !important;
    background-blend-mode: screen, screen, multiply;
    filter: drop-shadow(0 4px 3px rgba(0,0,0,0.6))
            drop-shadow(0 2px 1px rgba(0,0,0,0.4))
            drop-shadow(-1px -1px 0 rgba(255,255,255,0.28))
            drop-shadow(0 0 3px rgba(200,215,240,0.18));
}

/* === Minimal Modern Style (image masks) === */
.piece .minimal-mask,
.captured-piece .minimal-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
}
.piece.white .minimal-mask,
.captured-piece.white .minimal-mask {
    background-color: var(--white-piece-color);
}
.piece.black .minimal-mask,
.captured-piece.black .minimal-mask {
    background-color: var(--black-piece-color);
}
.minimal-style .piece,
.minimal-style .captured-piece {
    background: none !important;
    background-image: none !important;
}

body:not(.minimal-style) .piece.white .classic-piece-svg-mask,
body:not(.minimal-style) .piece.white .prince-svg-mask,
body:not(.minimal-style) .piece.white .princess-svg-mask,
body:not(.minimal-style) .piece.white .custom-piece-glyph-mask,
body:not(.minimal-style) .piece.white .saboteur-mask,
body:not(.minimal-style) .piece.white .siegeengine-mask,
body:not(.minimal-style) .piece.white .general-mask,
body:not(.minimal-style) .captured-piece.white .classic-piece-svg-mask,
body:not(.minimal-style) .captured-piece.white .prince-svg-mask,
body:not(.minimal-style) .captured-piece.white .princess-svg-mask,
body:not(.minimal-style) .captured-piece.white .custom-piece-glyph-mask,
body:not(.minimal-style) .captured-piece.white .saboteur-mask,
body:not(.minimal-style) .captured-piece.white .siegeengine-mask,
body:not(.minimal-style) .captured-piece.white .general-mask {
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 15%, transparent 40%),
        radial-gradient(ellipse at 35% 18%, rgba(255,255,255,1) 0%, rgba(240,248,255,0.5) 22%, transparent 50%),
        linear-gradient(160deg, rgba(255,255,255,0.7) 0%, rgba(200,210,230,0.25) 30%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0.55) 85%, rgba(40,40,60,0.3) 100%) !important;
    background-blend-mode: screen, screen, multiply;
    filter: drop-shadow(0 4px 3px rgba(0,0,0,0.5))
            drop-shadow(0 2px 1px rgba(0,0,0,0.35))
            drop-shadow(-1px -1px 0 rgba(255,255,255,0.6))
            drop-shadow(0 0 4px rgba(180,200,240,0.3));
}

body:not(.minimal-style) .piece.black .classic-piece-svg-mask,
body:not(.minimal-style) .piece.black .prince-svg-mask,
body:not(.minimal-style) .piece.black .princess-svg-mask,
body:not(.minimal-style) .piece.black .custom-piece-glyph-mask,
body:not(.minimal-style) .piece.black .saboteur-mask,
body:not(.minimal-style) .piece.black .siegeengine-mask,
body:not(.minimal-style) .piece.black .general-mask,
body:not(.minimal-style) .captured-piece.black .classic-piece-svg-mask,
body:not(.minimal-style) .captured-piece.black .prince-svg-mask,
body:not(.minimal-style) .captured-piece.black .princess-svg-mask,
body:not(.minimal-style) .captured-piece.black .custom-piece-glyph-mask,
body:not(.minimal-style) .captured-piece.black .saboteur-mask,
body:not(.minimal-style) .captured-piece.black .siegeengine-mask,
body:not(.minimal-style) .captured-piece.black .general-mask {
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 14%, transparent 38%),
        radial-gradient(ellipse at 35% 18%, rgba(255,255,255,0.65) 0%, rgba(180,195,220,0.25) 22%, transparent 50%),
        linear-gradient(160deg, rgba(255,255,255,0.3) 0%, rgba(40,45,55,0.2) 28%, rgba(0,0,0,0.9) 65%, rgba(0,0,0,0.95) 85%, rgba(20,20,30,0.4) 100%) !important;
    background-blend-mode: screen, screen, multiply;
    filter: drop-shadow(0 4px 3px rgba(0,0,0,0.65))
            drop-shadow(0 2px 1px rgba(0,0,0,0.45))
            drop-shadow(-1px -1px 0 rgba(255,255,255,0.3))
            drop-shadow(0 0 3px rgba(200,215,240,0.2));
}

/* ── Solid Piece Mode ──────────────────────────────────────────────────────
   When body has .solid-pieces, strip the 3-layer gradient off classic masks
   so pieces render as a flat block of their team color only.               */
body.solid-pieces:not(.minimal-style) .piece .classic-piece-svg-mask,
body.solid-pieces:not(.minimal-style) .piece .prince-svg-mask,
body.solid-pieces:not(.minimal-style) .piece .princess-svg-mask,
body.solid-pieces:not(.minimal-style) .piece .custom-piece-glyph-mask,
body.solid-pieces:not(.minimal-style) .piece .saboteur-mask,
body.solid-pieces:not(.minimal-style) .piece .siegeengine-mask,
body.solid-pieces:not(.minimal-style) .piece .general-mask,
body.solid-pieces:not(.minimal-style) .captured-piece .classic-piece-svg-mask,
body.solid-pieces:not(.minimal-style) .captured-piece .prince-svg-mask,
body.solid-pieces:not(.minimal-style) .captured-piece .princess-svg-mask,
body.solid-pieces:not(.minimal-style) .captured-piece .custom-piece-glyph-mask,
body.solid-pieces:not(.minimal-style) .captured-piece .saboteur-mask,
body.solid-pieces:not(.minimal-style) .captured-piece .siegeengine-mask,
body.solid-pieces:not(.minimal-style) .captured-piece .general-mask {
    background-image: none !important;
    background-blend-mode: normal !important;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.5))
            drop-shadow(0 1px 1px rgba(0,0,0,0.35)) !important;
}

/* ── Piece Outline Mode ────────────────────────────────────────────────────
   When body has .piece-outline, add a white-then-black drop-shadow ring
   so pieces are visible regardless of board/piece color combination.       */
body.piece-outline .piece .classic-piece-svg-mask,
body.piece-outline .piece .prince-svg-mask,
body.piece-outline .piece .princess-svg-mask,
body.piece-outline .piece .custom-piece-glyph-mask,
body.piece-outline .piece .saboteur-mask,
body.piece-outline .piece .siegeengine-mask,
body.piece-outline .piece .general-mask,
body.piece-outline .piece .fantasy-mask-piece,
body.piece-outline .captured-piece .classic-piece-svg-mask,
body.piece-outline .captured-piece .fantasy-mask-piece {
    filter: drop-shadow(1px 0 0 rgba(255,255,255,0.9))
            drop-shadow(-1px 0 0 rgba(255,255,255,0.9))
            drop-shadow(0 1px 0 rgba(255,255,255,0.9))
            drop-shadow(0 -1px 0 rgba(255,255,255,0.9))
            drop-shadow(0 0 3px rgba(0,0,0,0.95))
            drop-shadow(0 3px 2px rgba(0,0,0,0.5)) !important;
}

/* Combined solid + outline */
body.solid-pieces.piece-outline .piece .classic-piece-svg-mask,
body.solid-pieces.piece-outline .piece .prince-svg-mask,
body.solid-pieces.piece-outline .piece .princess-svg-mask,
body.solid-pieces.piece-outline .piece .custom-piece-glyph-mask,
body.solid-pieces.piece-outline .piece .saboteur-mask,
body.solid-pieces.piece-outline .piece .siegeengine-mask,
body.solid-pieces.piece-outline .piece .general-mask,
body.solid-pieces.piece-outline .piece .fantasy-mask-piece {
    background-image: none !important;
    background-blend-mode: normal !important;
    filter: drop-shadow(1px 0 0 rgba(255,255,255,0.9))
            drop-shadow(-1px 0 0 rgba(255,255,255,0.9))
            drop-shadow(0 1px 0 rgba(255,255,255,0.9))
            drop-shadow(0 -1px 0 rgba(255,255,255,0.9))
            drop-shadow(0 0 3px rgba(0,0,0,0.95))
            drop-shadow(0 3px 2px rgba(0,0,0,0.5)) !important;
}

/* Custom board pieces (emoji icons): mask + fill matches team colors (plain emoji ignores `color`) */
.piece .custom-piece-glyph-mask,
.captured-piece .custom-piece-glyph-mask {
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.custom-piece-glyph-mask-captured {
    width: 80%;
    height: 80%;
}

.piece.white .custom-piece-glyph-mask,
.captured-piece.white .custom-piece-glyph-mask {
    background-color: var(--white-piece-color);
}

.piece.black .custom-piece-glyph-mask,
.captured-piece.black .custom-piece-glyph-mask {
    background-color: var(--black-piece-color);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.28))
            drop-shadow(0 0 1px rgba(255, 255, 255, 0.22))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.65));
}

.fantasy-style .piece.white .custom-piece-glyph-mask,
.fantasy-style .captured-piece.white .custom-piece-glyph-mask {
    width: 90%;
    height: 90%;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.65)) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.35));
}

.fantasy-style .piece.black .custom-piece-glyph-mask,
.fantasy-style .captured-piece.black .custom-piece-glyph-mask {
    width: 90%;
    height: 90%;
}

:root[data-white-pattern="true"] .piece.white .custom-piece-glyph-mask,
:root[data-white-pattern="true"] .captured-piece.white .custom-piece-glyph-mask {
    background-image: var(--white-piece-pattern);
    background-color: transparent;
}

:root[data-black-pattern="true"] .piece.black .custom-piece-glyph-mask,
:root[data-black-pattern="true"] .captured-piece.black .custom-piece-glyph-mask {
    background-image: var(--black-piece-pattern);
    background-color: transparent;
}

.piece.princess {
    flex-direction: column;
}

.piece.princess .princess-crown {
    width: 0.9em;
    height: 0.485em;  /* 12% shorter: was 0.55em (7% + additional 5%) */
    margin-bottom: -0.24em;
    transform: scale(0.637);
}

.piece.princess .princess-crown svg {
    width: 100%;
    height: 100%;
    display: block;
}

.piece.white .princess-crown svg {
    fill: var(--white-piece-color-solid);
    stroke: rgba(0, 0, 0, 0.35);
    stroke-width: 2;
}

.piece.black .princess-crown svg {
    fill: var(--black-piece-color-solid);
}

.piece.princess .princess-bishop {
    font-size: 0.96em;  /* 7% shorter: was 1.03em */
    line-height: 1;
}

.piece.princess .princess-svg-mask {
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-blend-mode: screen;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.piece.white .princess-svg-mask {
    background-color: var(--white-piece-color);
}

.piece.black .princess-svg-mask {
    background-color: var(--black-piece-color);
}

.minimal-style .piece:hover:not(.dragging) {
    transform: scale(1.1);
}

.piece.moving {
    transition: all 0.3s ease-in-out;
    z-index: 1000;
}

.piece.dragging {
    opacity: 0.6;
    cursor: grabbing !important;
    z-index: 1000;
}

.square.drag-over {
    background-color: rgba(106, 153, 78, 0.3) !important;
}

.controls {
    text-align: center;
    margin-top: 20px;
}

.settings {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    text-align: left;
}

.settings-hint {
    font-size: 11px;
    opacity: 0.75;
    margin: 4px 0 8px 0;
    color: var(--panel-text);
    grid-column: 1 / -1;
}

.settings label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.9em;
    color: var(--panel-text);
}

.settings select, .settings input[type="range"] {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--control-border);
    background: var(--control-bg);
    font-size: 0.95em;
    color: var(--panel-text);
}

.settings input[type="range"] {
    width: 120px;
    cursor: pointer;
}

#volume-display {
    margin-left: 8px;
    font-weight: 600;
    color: var(--panel-text);
}

#timer-display {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
}

.timer {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--subtle-bg);
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
    font-weight: 600;
}

.timer-label {
    color: var(--panel-text);
}

.white-timer #white-time {
    color: #2563eb;
}

.black-timer #black-time {
    color: #dc2626;
}

.timer.active {
    box-shadow: 0 0 0 3px var(--accent);
    animation: timer-pulse 1s infinite;
}

@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* .hidden is defined later with !important */

#reset-btn {
    padding: 12px 30px;
    font-size: 1.1em;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

#reset-btn:hover {
    background: #5568d3;
}

#undo-btn, #flip-board-btn, #resign-btn, #offer-draw-btn, #save-game-btn, #load-game-btn {
    margin-left: 10px;
    padding: 12px 20px;
    font-size: 1.05em;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

#undo-btn {
    background: #8a2be2;
}

#undo-btn:hover {
    background: #6d22b3;
}

#flip-board-btn {
    background: #667eea;
}

#flip-board-btn:hover {
    background: #5568d3;
}

#resign-btn {
    background: #dc2626;
}

#resign-btn:hover {
    background: #b91c1c;
}

#offer-draw-btn {
    background: #f59e0b;
}

#offer-draw-btn:hover {
    background: #d97706;
}

#save-game-btn {
    background: #10b981;
}

#save-game-btn:hover {
    background: #059669;
}

#load-game-btn {
    background: #3b82f6;
}

#load-game-btn:hover {
    background: #2563eb;
}

.rules-info {
    margin-top: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.rules-info h3 {
    color: #333;
    margin-bottom: 10px;
}

.rules-info ul {
    list-style-position: inside;
    color: #666;
    line-height: 1.8;
}

.color-palette {
    margin-top: 30px;
    padding: 20px;
    background: var(--panel-bg);
    border-radius: 8px;
    border-left: 4px solid var(--accent);
}

.color-palette h3 {
    color: var(--panel-text);
    margin-bottom: 12px;
}

.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--subtle-bg);
}

.palette-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.palette-label {
    color: var(--panel-text);
    font-size: 0.9em;
}

@media (max-width: 768px) {
    .square {
        font-size: 2.54em;
    }
    
    h1 {
        font-size: 1.8em;
    }

    .board-area {
        flex-direction: column;
        align-items: center;
    }

    #chessboard-container {
        max-width: 100%;
    }

    .info-panel {
        width: 100%;
        max-width: 800px;
    }
}

/* ========================================
   PROMOTION MODAL
   ======================================== */

.promotion-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.promotion-modal.hidden {
    display: none;
}

.promotion-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

.promotion-dialog {
    position: relative;
    background: var(--panel-bg);
    color: var(--panel-text);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: 600px;
    width: 90%;
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.promotion-dialog h2 {
    color: var(--accent);
    font-size: 28px;
    margin-bottom: 8px;
    text-align: center;
}

.promotion-subtitle {
    text-align: center;
    opacity: 0.7;
    margin-bottom: 24px;
    font-size: 14px;
}

.promotion-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.promotion-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--subtle-bg);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--panel-text);
}

.promotion-choice:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(75, 0, 130, 0.3);
}

.promotion-choice:active {
    transform: translateY(-2px);
}

.promotion-symbol {
    font-size: 48px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.promotion-name {
    font-weight: 600;
    font-size: 16px;
}

.promotion-value {
    font-size: 12px;
    opacity: 0.7;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive for smaller screens */
@media (max-width: 600px) {
    .promotion-choices {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .promotion-dialog {
        padding: 24px;
    }
}

/* ========================================
   HAMBURGER MENU & COLLAPSIBLE SETTINGS
   ======================================== */

/* Hamburger Menu Button */
.menu-toggle {
    position: fixed;
    top: max(15px, env(safe-area-inset-top, 0px));
    left: max(15px, env(safe-area-inset-left, 0px));
    z-index: 10000;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.menu-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.hamburger-icon {
    font-size: 24px;
    line-height: 1;
}

.menu-text {
    font-size: 14px;
}

/* Settings Panel */
.settings-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    background: var(--panel-bg);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-panel.closed {
    transform: translateX(-100%);
}

/* Panel Header */
.settings-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--accent);
    color: white;
    flex-shrink: 0;
}

.settings-panel-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    padding-left: 65px;
}

.menu-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.menu-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Panel Content */
.settings-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Improved spacing for controls in panel */
.settings-panel-content .controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.settings-panel-content .controls button {
    width: 100%;
    padding: 12px;
    font-size: 15px;
}

.settings-panel-content .settings.settings-tab-panel {
    display: none;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.settings-panel-content .settings.settings-tab-panel.active {
    display: flex;
}

.settings-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 8px;
    flex-shrink: 0;
}

.settings-tab {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.settings-tab.active {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    color: #fff;
    border-color: transparent;
}

.settings-tab-panel {
    display: none;
}

.settings-tab-panel.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-panel-content .settings label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
    color: var(--panel-text);
}

.settings-panel-content .color-palette {
    margin-bottom: 24px;
}

.settings-panel-content .color-palette h3 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--accent);
}

.settings-panel-content .rules-info {
    padding: 16px;
    background: var(--board-light);
    border-radius: 8px;
    margin-bottom: 20px;
}

.settings-panel-content .rules-info h3 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--accent);
}

.settings-panel-content .rules-info ul {
    margin: 0;
    padding-left: 20px;
}

.settings-panel-content .rules-info li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Overlay when menu is open */
.settings-panel::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
}

.settings-panel:not(.closed)::before {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Board expands when menu closed */
.container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .settings-panel {
        width: 100vw;
        max-width: 100vw;
    }
    
    .menu-toggle {
        top: 10px;
        left: 10px;
        padding: 10px 14px;
        font-size: 16px;
    }
    
    .hamburger-icon {
        font-size: 20px;
    }
    
    .menu-text {
        display: none; /* Hide "Menu" text on mobile */
    }
    
    .title-sidebar {
        display: none; /* Hide vertical title on mobile */
    }
    
    .container {
        padding-top: 60px;
    }
}

/* Larger screens - ACTUALLY HUGE board! */
@media (min-width: 1200px) {
    .container {
        max-width: 96vw;
    }
    
    body {
        padding: 5px;  /* Minimal padding on large screens */
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 98vw;  /* Almost full screen! */
    }
    
    .info-panel {
        width: 350px;
    }
}

/* ========================================
   MULTIPLAYER UI STYLES
   ======================================== */

#online-multiplayer-options {
    margin-top: 15px;
    padding: 15px;
    background: var(--subtle-bg);
    border-radius: 8px;
}

#online-multiplayer-options h3 {
    color: var(--panel-text);
    margin-bottom: 15px;
    text-align: center;
}

#online-multiplayer-options h4 {
    color: var(--panel-text);
    margin: 15px 0 10px 0;
    font-size: 14px;
}

#mp-username {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--control-border);
    border-radius: 6px;
    background: var(--control-bg);
    color: var(--panel-text);
    font-size: 14px;
    margin-bottom: 10px;
}

.disconnect-quick-btn {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    background: linear-gradient(135deg, #dc3545 0%, #ff4757 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.disconnect-quick-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.disconnect-quick-btn:disabled {
    background: #444;
    color: #888;
    cursor: not-allowed;
    opacity: 0.6;
}

.primary-btn {
    width: 100%;
    padding: 12px;
    background: #00008B;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin: 5px 0;
    transition: all 0.3s ease;
}

.primary-btn:hover {
    background: #000070;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 139, 0.3);
}

.primary-btn:active {
    transform: translateY(0);
}

#mp-create-room-btn,
#mp-join-room-btn,
#mp-cancel-btn,
#mp-copy-code-btn {
    width: 100%;
    padding: 10px;
    border: 2px solid #00008B;
    background: var(--control-bg);
    color: #00008B;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin: 5px 0;
    transition: all 0.3s ease;
}

#mp-create-room-btn:hover,
#mp-join-room-btn:hover,
#mp-copy-code-btn:hover {
    background: #00008B;
    color: white;
}

#mp-cancel-btn {
    background: #dc2626 !important;
    color: white !important;
    border: 3px solid #b91c1c !important;
    font-weight: bold !important;
    font-size: 16px !important;
    padding: 15px 30px !important;
    margin-top: 20px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.4) !important;
    transition: all 0.2s !important;
}

#mp-cancel-btn:hover {
    background: #b91c1c !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 12px rgba(220, 38, 38, 0.6) !important;
}

#mp-cancel-btn:active {
    transform: scale(0.98) !important;
}

.status-message {
    padding: 10px;
    border-radius: 6px;
    margin-top: 10px;
    text-align: center;
    font-size: 13px;
}

.status-message.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

.status-message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

.status-message.info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #3b82f6;
}

.room-code-display {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 8px;
    text-align: center;
    padding: 20px;
    background: #00008B;
    color: white;
    border-radius: 10px;
    margin: 15px 0;
    font-family: 'Courier New', monospace;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--control-border);
    border-top-color: #00008B;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#mp-waiting-panel {
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

#mp-waiting-panel p {
    color: var(--panel-text);
    margin: 15px 0;
    font-size: 14px;
}

#mp-waiting-panel button {
    min-width: 200px;
}

.game-info-box {
    background: #00008B;
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
}

.game-info-box p {
    margin: 8px 0;
    font-size: 14px;
}

.game-info-box strong {
    font-weight: 600;
}

#mp-room-panel {
    margin-top: 15px;
}

#mp-room-code {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--control-border);
    border-radius: 6px;
    background: var(--control-bg);
    color: var(--panel-text);
    font-size: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
}

.hidden {
    display: none !important;
}

/* Game Summary Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.hidden {
    display: none;
}

.modal-content {
    animation: modalFadeIn 0.3s ease-in-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    body {
        padding: 2px;
        align-items: flex-start;
        padding-top: 60px;
        overflow-x: hidden; /* Prevent horizontal scroll */
    }
    
    .container {
        padding: 5px;
        padding-top: 10px;
        border-radius: 10px;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    #chessboard {
        /* Square: same value for width and height */
        --board-side: min(95vw, calc(100vw - 20px), calc(100vh - 140px));
        width: var(--board-side);
        height: var(--board-side);
        max-width: min(95vw, calc(100vh - 140px));
        max-height: calc(100vh - 140px);
        min-width: 240px;
        min-height: 240px;
        border: 3px solid #333;
        margin: 0 auto;
        touch-action: pan-x pan-y pinch-zoom;
        overflow: hidden;
    }

    #chessboard.board-16 {
        --board-side: min(92vw, calc(100vh - 200px), calc(100vw - 16px));
    }
    
    #chessboard-container {
        overflow: visible; /* Allow zoom to expand */
    }
    
    .square {
        font-size: 2.2em !important;
        min-height: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    
    .square svg {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
    
    .board-coordinates {
        font-size: 10px !important;
    }
    
    .info-panel {
        font-size: 14px;
        padding: 12px;
    }
    
    .game-info {
        padding: 10px;
        gap: 8px;
    }
    
    #status {
        font-size: 1em;
    }
    
    .action-buttons button,
    .controls button {
        font-size: 14px;
        padding: 10px 16px;
    }
    
    h1 {
        font-size: 1.4em;
        letter-spacing: 4px;
    }
}

/* Very small phones (e.g. 320px–360px wide) */
@media (max-width: 360px) {
    #chessboard {
        min-width: 200px;
        min-height: 200px;
    }
    .square {
        font-size: 1.6em !important;
    }
}

@media (max-width: 480px) {
    body {
        padding: 1px;
        padding-top: max(55px, calc(env(safe-area-inset-top, 0px) + 45px));
        overflow-x: hidden;
    }
    
    .container {
        padding: 2px;
        border-radius: 5px;
        overflow-x: hidden;
    }
    
    #chessboard {
        --board-side: min(98vw, calc(100vw - 10px), calc(100vh - 120px));
        width: var(--board-side);
        height: var(--board-side);
        max-width: min(98vw, calc(100vh - 120px));
        max-height: calc(100vh - 120px);
        min-width: 220px;
        min-height: 220px;
        border: 2px solid #333;
        touch-action: pan-x pan-y pinch-zoom;
        overflow: hidden;
    }

    #chessboard.board-16 {
        --board-side: min(96vw, calc(100vh - 180px));
    }
    
    #chessboard-container {
        overflow: visible; /* Allow zoom to expand */
    }
    
    .square {
        font-size: 1.9em !important;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
    
    .square svg {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
    
    .board-coordinates {
        font-size: 8px !important;
    }
    
    .info-panel {
        font-size: 12px;
        padding: 8px;
    }
    
    .game-info {
        padding: 8px;
        gap: 6px;
    }
    
    #status {
        font-size: 0.9em;
    }
    
    .action-buttons button,
    .controls button {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    h1 {
        font-size: 1.2em;
        letter-spacing: 3px;
    }
    
    /* MOBILE: Make cancel button HUGE and impossible to miss */
    #mp-cancel-btn {
        font-size: 18px !important;
        padding: 18px 40px !important;
        min-width: 250px !important;
        margin-top: 25px !important;
    }
    
    #mp-waiting-panel {
        padding: 30px 15px !important;
    }
    
    .menu-toggle {
        top: 10px;
        left: 10px;
        padding: 10px 12px;
        font-size: 16px;
    }
    
    .hamburger-icon {
        font-size: 20px;
    }
    
    .menu-text {
        font-size: 12px;
    }
}

/* ===================================
   PLAYER INFO PANEL (MULTIPLAYER)
   =================================== */

.player-info-panel {
    background: linear-gradient(135deg, #1a2a3a 0%, #2a3a4a 100%);
    border: 2px solid #00d4ff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.player-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.my-player-card {
    text-align: left;
}

.opponent-player-card {
    text-align: right;
}

.player-label {
    font-size: 11px;
    color: #888;
    font-weight: bold;
    text-transform: uppercase;
}

.player-name {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
}

.clickable-opponent {
    cursor: pointer;
    color: #00d4ff;
    text-decoration: underline;
    transition: all 0.2s;
}

.clickable-opponent:hover {
    color: #00ff88;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.color-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.color-badge.white {
    background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
    color: #000;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.color-badge.black {
    background: linear-gradient(135deg, #333 0%, #000 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.vs-divider {
    font-size: 14px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

@media (max-width: 600px) {
    .player-info-panel {
        flex-direction: column;
        gap: 8px;
    }
    
    .my-player-card,
    .opponent-player-card {
        text-align: center;
    }
}

/* ===================================
   NOTIFICATION BADGE
   =================================== */

.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 7px;
    border-radius: 12px;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(255, 68, 68, 0.6);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(255, 68, 68, 0.6);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 4px 16px rgba(255, 68, 68, 0.9);
    }
}

/* ========== Welcome & Mode Selection Screens ========== */
.app-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-bg);
    padding: 80px 20px 24px;
}

.welcome-screen {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 40%, #312e81 100%);
}

.welcome-logo {
    width: min(320px, 80vw);
    height: auto;
    margin: 0 auto 0.5rem;
    display: block;
    filter: drop-shadow(0 0 28px rgba(167, 139, 250, 0.55));
    animation: logo-float 4s ease-in-out infinite;
}

@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.welcome-content {
    text-align: center;
    max-width: 420px;
}

.welcome-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.25rem, 8vw, 4.5rem);
    font-weight: 700;
    margin: 0 0 0.25em;
    letter-spacing: 0.02em;
    /* Override global h1 vertical text so words read left-to-right */
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

@media (max-width: 480px) {
    .welcome-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }
}

.welcome-word {
    display: block;
    line-height: 1.2;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

.welcome-word.welcome-royal {
    color: #6a0dad;
}

.welcome-word.welcome-chess {
    color: #22c55e;
}

.welcome-word.welcome-plus {
    color: #3b82f6;
}

.welcome-subtitle {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 2.5rem;
}

.welcome-play-btn {
    display: inline-block;
    padding: 16px 48px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    background: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 50%, #e9d5ff 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(167, 139, 250, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.welcome-play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(167, 139, 250, 0.5);
}

.welcome-play-btn:active {
    transform: translateY(0);
}

.welcome-tutorial-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 12px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(100, 116, 139, 0.5);
    border: 2px solid #64748b;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.welcome-tutorial-btn:hover {
    background: rgba(100, 116, 139, 0.7);
    transform: translateY(-1px);
}

/* Tutorial overlay */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 100002;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.tutorial-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid #6366f1;
    border-radius: 20px;
    padding: 28px 24px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.3);
}

.tutorial-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    font-size: 24px;
    line-height: 1;
    color: #94a3b8;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
}

.tutorial-close:hover {
    color: #f8fafc;
    background: rgba(255,255,255,0.1);
}

.tutorial-progress {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}

.tutorial-title {
    font-size: 1.4rem;
    color: #f8fafc;
    margin: 0 0 16px;
    line-height: 1.3;
}

.tutorial-body {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.tutorial-body strong { color: #e2e8f0; }
.tutorial-body small { font-size: 0.9em; opacity: 0.9; }

.tutorial-nav {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.tutorial-back, .tutorial-next {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    transition: transform 0.1s, background 0.1s;
}

.tutorial-back {
    background: #334155;
    color: #e2e8f0;
}

.tutorial-next {
    background: #6366f1;
    color: white;
}

.tutorial-back:hover, .tutorial-next:hover { transform: translateY(-1px); }

.tutorial-choice-btn {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    padding: 16px;
    text-align: center;
    font-size: 1rem;
    background: #334155;
    color: #e2e8f0;
    border: 2px solid #475569;
    border-radius: 12px;
    cursor: pointer;
    line-height: 1.4;
}

.tutorial-choice-btn small { display: block; margin-top: 4px; font-size: 0.85rem; opacity: 0.9; }
.tutorial-choice-btn:hover { background: #475569; border-color: #6366f1; }

.tutorial-locked {
    padding: 12px;
    background: rgba(100, 116, 139, 0.2);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 8px 0;
}

/* Mode selection screen */
.mode-selection-screen {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #1e1b4b 100%);
    align-items: flex-start;
    overflow-y: auto;
}

.mode-selection-content {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.mode-selection-logo {
    display: block;
    width: min(180px, 48vw);
    height: auto;
    margin: 0 auto 0.75rem;
    filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.35));
}

.mode-selection-title {
    font-size: 1.5rem;
    color: #f8fafc;
    margin: 0 0 1.25rem;
    text-align: center;
}

.main-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 1.5rem;
}

.main-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    background: var(--subtle-bg);
    border: 2px solid var(--control-border);
    border-radius: 12px;
    color: var(--panel-text);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.main-mode-btn:hover {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
}

.main-mode-btn.selected {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.15);
    box-shadow: 0 0 0 1px #7c3aed;
}

.main-mode-btn.locked {
    opacity: 0.7;
    cursor: pointer;
}

.main-mode-btn .main-mode-lock {
    font-size: 0.8rem;
    margin-top: 4px;
    opacity: 0.9;
}

.main-mode-name {
    font-weight: 700;
    font-size: 1.05rem;
}

.main-mode-size {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-top: 4px;
}

.traditional-section {
    margin-bottom: 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--control-border);
}

.traditional-label {
    display: block;
    font-size: 0.85rem;
    opacity: 0.8;
    margin-bottom: 8px;
}

.traditional-mode-btn {
    width: 100%;
    max-width: 240px;
}

.variants-section {
    margin-bottom: 1.25rem;
}

.variants-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: var(--panel-text);
}

.variants-select {
    width: 100%;
    padding: 12px 14px;
    font-size: 0.95rem;
    background: var(--subtle-bg);
    border: 1px solid var(--control-border);
    border-radius: 8px;
    color: var(--panel-text);
    cursor: pointer;
}

.variants-select:hover {
    background: var(--chip-bg);
}

.play-mode-row {
    margin-bottom: 1.5rem;
}

.play-mode-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: var(--panel-text);
}

.play-mode-row select {
    width: 100%;
    padding: 10px 12px;
    font-size: 1rem;
    background: var(--control-bg);
    border: 1px solid var(--control-border);
    border-radius: 8px;
    color: var(--panel-text);
}

.start-game-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.start-game-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}

.start-game-btn:active {
    transform: translateY(0);
}

/* Back to Menu button in settings */

.back-to-menu-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    border: 1px solid #64748b;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.15s ease;
}

.back-to-menu-btn:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

/* ── Daily Chess ── */

/* ── Board Designer Button ── */

.board-designer-row {
    margin-bottom: 1.25rem;
}

.board-designer-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1.5px solid #e94560;
    border-radius: 14px;
    cursor: pointer;
    color: #f8fafc;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.board-designer-btn:hover {
    border-color: #ff6b6b;
    box-shadow: 0 0 16px rgba(233, 69, 96, 0.25);
}

.board-designer-icon {
    font-size: 1.6rem;
}

.board-designer-label {
    font-weight: 700;
    font-size: 1.05rem;
}

.board-designer-desc {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-left: auto;
}

/* ── Board Designer Screen ── */

.board-designer-screen {
    position: fixed;
    inset: 0;
    background: #0f172a;
    z-index: 10060;
    overflow-y: auto;
    overflow-x: hidden;
}

.board-designer-screen.hidden {
    display: none;
}

.bd-layout {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
}

.bd-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.bd-back-btn {
    padding: 8px 16px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: #1e293b;
    color: #e2e8f0;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
}

.bd-back-btn:hover {
    background: #334155;
}

.bd-title {
    flex: 1;
    color: #f1f5f9;
    font-size: 1.3rem;
    margin: 0;
}

.bd-header-actions {
    display: flex;
    gap: 8px;
}

.bd-save-btn, .bd-play-btn {
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.9rem;
    transition: transform 0.1s;
}

.bd-save-btn {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #fff;
}

.bd-play-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.bd-save-btn:hover, .bd-play-btn:hover {
    transform: translateY(-1px);
}

/* Top bar: toolbar + rules/stats */

.bd-top-bar {
    flex-shrink: 0;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bd-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    padding: 10px 14px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
}

.bd-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bd-field label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bd-field input[type="text"],
.bd-field select {
    padding: 7px 10px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.85rem;
    min-width: 130px;
}

.bd-saved-row {
    display: flex;
    gap: 6px;
}

.bd-saved-row select {
    min-width: 140px;
    padding: 7px 10px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.82rem;
}

.bd-load-btn, .bd-delete-btn {
    padding: 6px 12px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #1e293b;
    color: #e2e8f0;
    cursor: pointer;
    font-size: 0.82rem;
}

.bd-load-btn:hover { background: #334155; }
.bd-delete-btn:hover { background: #7f1d1d; border-color: #ef4444; }

.bd-clear-btn, .bd-mirror-btn {
    padding: 7px 14px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #1e293b;
    color: #e2e8f0;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
}

.bd-clear-btn:hover { background: #7f1d1d; border-color: #ef4444; }
.bd-mirror-btn:hover { background: #334155; }

/* Inline rules + stats row */

.bd-top-rules {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
}

.bd-rules-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bd-rules-inline-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    margin-right: 2px;
}

.bd-radio-inline {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.82rem;
    color: #e2e8f0;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background 0.1s;
}

.bd-radio-inline:hover {
    background: #334155;
}

.bd-radio-inline input[type="radio"] {
    accent-color: #3b82f6;
    cursor: pointer;
    margin: 0;
}

.bd-stats-inline {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-left: auto;
}

.bd-stats-inline strong {
    color: #e2e8f0;
}

.bd-stat-warning {
    color: #fbbf24;
    font-weight: 600;
}

/* Phase controls */
.bd-phase-row {
    margin-top: 2px;
}
.bd-phase-check {
    gap: 4px !important;
    cursor: pointer;
}
.bd-phase-fields {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #cbd5e1;
}
.bd-phase-input {
    width: 48px;
    padding: 2px 4px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 4px;
    color: #f1f5f9;
    font-size: 0.78rem;
    text-align: center;
}
.bd-phase-select {
    padding: 2px 4px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 4px;
    color: #f1f5f9;
    font-size: 0.78rem;
}

/* Board size row */
.bd-size-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.bd-size-x {
    font-weight: 700;
    color: #94a3b8;
    font-size: 0.85rem;
}
.bd-size-row select {
    width: auto;
    min-width: 50px;
}
.bd-size-presets {
    margin-left: 6px;
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Main layout: palette | board */

.bd-main {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 10px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

@media (max-width: 700px) {
    .bd-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .bd-palette-col {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: visible;
        max-height: none;
        padding-bottom: 6px;
    }
    .bd-palette-section {
        min-width: 150px;
    }
}

/* Palette */

.bd-palette-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    min-height: 0;
}

.bd-palette-section {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 8px;
}

.bd-palette-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.bd-piece-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bd-palette-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s;
    border: 2px solid transparent;
}

.bd-palette-item:hover {
    background: #334155;
}

.bd-palette-item.bd-selected {
    background: #1e3a5f;
    border-color: #3b82f6;
}

.bd-palette-item.bd-at-limit {
    opacity: 0.45;
}

.bd-palette-icon {
    font-size: 1.3rem;
    width: 26px;
    height: 26px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bd-palette-icon.white { color: var(--white-piece-color-solid); }
.bd-palette-icon.black { color: var(--black-piece-color-solid); }

.bd-palette-label {
    flex: 1;
    font-size: 0.78rem;
    color: #e2e8f0;
    font-weight: 500;
}

.bd-palette-count {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
    min-width: 16px;
    text-align: right;
}

/* Board grid */

.bd-board-col {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
    min-height: 0;
}

.bd-board-wrap {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
}

.bd-board {
    display: grid;
    width: 100%;
    height: 100%;
    border: 2px solid #475569;
    border-radius: 4px;
    overflow: hidden;
}

.bd-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: outline 0.1s;
    user-select: none;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
}

.bd-cell:hover {
    outline: 2px solid #3b82f6;
    outline-offset: -2px;
    z-index: 2;
}

.bd-light { background: #e8dcc8; }
.bd-dark  { background: #b58863; }

.bd-piece {
    font-size: min(2.5vw, 2rem);
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bd-piece.white { color: var(--white-piece-color-solid); text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.bd-piece.black { color: var(--black-piece-color-solid); text-shadow: 0 1px 3px rgba(255,255,255,0.3); }

/* Board Designer piece visuals — reuse the live board's SVG mask system so the icons in the
   palette and on the design grid match the actual rendered pieces and tint with the player's
   selected team colors (white / black / red / blue / green / purple / etc.). */
.bd-piece .classic-piece-svg-mask,
.bd-piece .prince-svg-mask,
.bd-piece .princess-svg-mask,
.bd-piece .siegeengine-mask,
.bd-piece .general-mask,
.bd-piece .custom-piece-glyph-mask,
.bd-piece .realistic-mask,
.bd-piece .minimal-mask,
.bd-palette-icon .classic-piece-svg-mask,
.bd-palette-icon .prince-svg-mask,
.bd-palette-icon .princess-svg-mask,
.bd-palette-icon .siegeengine-mask,
.bd-palette-icon .general-mask,
.bd-palette-icon .custom-piece-glyph-mask,
.bd-palette-icon .realistic-mask,
.bd-palette-icon .minimal-mask {
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-blend-mode: screen;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.bd-piece.white .classic-piece-svg-mask,
.bd-piece.white .prince-svg-mask,
.bd-piece.white .princess-svg-mask,
.bd-piece.white .siegeengine-mask,
.bd-piece.white .general-mask,
.bd-piece.white .custom-piece-glyph-mask,
.bd-piece.white .realistic-mask,
.bd-piece.white .minimal-mask,
.bd-palette-icon.white .classic-piece-svg-mask,
.bd-palette-icon.white .prince-svg-mask,
.bd-palette-icon.white .princess-svg-mask,
.bd-palette-icon.white .siegeengine-mask,
.bd-palette-icon.white .general-mask,
.bd-palette-icon.white .custom-piece-glyph-mask,
.bd-palette-icon.white .realistic-mask,
.bd-palette-icon.white .minimal-mask {
    background-color: var(--white-piece-color);
}

.bd-piece.black .classic-piece-svg-mask,
.bd-piece.black .prince-svg-mask,
.bd-piece.black .princess-svg-mask,
.bd-piece.black .siegeengine-mask,
.bd-piece.black .general-mask,
.bd-piece.black .custom-piece-glyph-mask,
.bd-piece.black .realistic-mask,
.bd-piece.black .minimal-mask,
.bd-palette-icon.black .classic-piece-svg-mask,
.bd-palette-icon.black .prince-svg-mask,
.bd-palette-icon.black .princess-svg-mask,
.bd-palette-icon.black .siegeengine-mask,
.bd-palette-icon.black .general-mask,
.bd-palette-icon.black .custom-piece-glyph-mask,
.bd-palette-icon.black .realistic-mask,
.bd-palette-icon.black .minimal-mask {
    background-color: var(--black-piece-color);
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.28))
            drop-shadow(0 0 1px rgba(255, 255, 255, 0.22))
            drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.65));
}

/* Patterned (e.g. multicam) piece colors use the same image-fill trick as the live board. */
:root[data-white-pattern="true"] .bd-piece.white .custom-piece-glyph-mask,
:root[data-white-pattern="true"] .bd-palette-icon.white .custom-piece-glyph-mask {
    background-image: var(--white-piece-pattern);
    background-color: transparent;
}

:root[data-black-pattern="true"] .bd-piece.black .custom-piece-glyph-mask,
:root[data-black-pattern="true"] .bd-palette-icon.black .custom-piece-glyph-mask {
    background-image: var(--black-piece-pattern);
    background-color: transparent;
}

.bd-piece .general-ability-indicators,
.bd-palette-icon .general-ability-indicators {
    font-size: 8px;
    bottom: 0;
    gap: 1px;
}
.bd-piece .general-ind,
.bd-palette-icon .general-ind {
    padding: 0 1px;
    border-width: 0.5px;
}

.bd-stat-row {
    display: inline;
}

.bd-stat-row + .bd-stat-row::before {
    content: "·";
    margin: 0 6px;
    color: #475569;
}

.bd-stat-warning {
    color: #fbbf24;
    font-weight: 600;
}

/* Toast */

.bd-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #1e293b;
    color: #f8fafc;
    padding: 10px 22px;
    border-radius: 10px;
    border: 1px solid #475569;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.bd-toast.bd-toast-show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ── Movement Editor & Piece Creator ── */

.me-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.me-overlay.show { opacity: 1; }

.me-modal {
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 14px;
    max-width: 560px;
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.me-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #334155;
}

.me-header h3 {
    margin: 0;
    color: #f1f5f9;
    font-size: 1.1rem;
}

.me-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.2rem;
    cursor: pointer;
}

.me-desc {
    font-size: 0.78rem;
    color: #94a3b8;
    padding: 8px 18px 4px;
    margin: 0;
}

.me-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 18px;
}

.me-tab {
    padding: 6px 14px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #0f172a;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.me-tab:hover { background: #334155; color: #e2e8f0; }
.me-tab-active { background: #3b82f6; color: #fff; border-color: #3b82f6; }

.me-grid-wrap {
    display: flex;
    justify-content: center;
    padding: 8px 18px;
}

.me-grid {
    display: grid;
    gap: 1px;
    background: #475569;
    border-radius: 4px;
    overflow: hidden;
    width: fit-content;
}

.me-cell {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    color: #64748b;
    background: #1e293b;
    transition: background 0.1s;
    user-select: none;
}

.me-cell-dark { background: #172033; }

.me-cell:hover { background: #334155; }

.me-center {
    background: #0f172a !important;
    color: #f59e0b;
    font-size: 1rem;
    cursor: default;
}

.me-active {
    background: #1e40af !important;
    color: #93c5fd;
    font-weight: 700;
    font-size: 0.9rem;
}

.me-options {
    padding: 10px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.me-opt-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #cbd5e1;
    display: block;
    margin-bottom: 4px;
}

.me-opt-hint {
    font-weight: 400;
    color: #64748b;
    font-size: 0.72rem;
}

.me-sliding-grid {
    display: grid;
    grid-template-columns: repeat(3, 36px);
    gap: 3px;
    width: fit-content;
}

.me-slide-cell {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 4px;
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.1s;
}

.me-slide-cell:hover { background: #334155; }
.me-slide-active { background: #1e40af !important; color: #93c5fd; border-color: #3b82f6; }
.me-slide-center { cursor: default; color: #f59e0b; }

.me-capture-opt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.me-radio-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    color: #e2e8f0;
    cursor: pointer;
}

.me-radio-inline input[type="radio"] {
    accent-color: #3b82f6;
    margin: 0;
    cursor: pointer;
}

.me-summary {
    padding: 8px 18px;
    font-size: 0.76rem;
    color: #64748b;
}

.me-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid #334155;
    gap: 8px;
}

.me-cancel {
    padding: 8px 18px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: #0f172a;
    color: #94a3b8;
    font-weight: 600;
    cursor: pointer;
}

.me-save {
    padding: 8px 22px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s;
}

.me-save:hover { transform: translateY(-1px); }

/* Piece Creator form */

.pc-modal { max-width: 500px; }

.pc-form {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pc-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.pc-field input[type="text"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.pc-field select {
    padding: 8px 10px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.85rem;
}

.pc-icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pc-icon-opt {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: #0f172a;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}

.pc-icon-opt:hover { background: #334155; }
.pc-icon-selected { border-color: #3b82f6; background: #1e3a5f; }

.pc-movement-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
}

.pc-movement-status span {
    font-size: 0.82rem;
    color: #94a3b8;
}

.pc-movement-btn {
    padding: 6px 14px;
    border: 1px solid #7c3aed;
    border-radius: 6px;
    background: #1e1b4b;
    color: #c4b5fd;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
}

.pc-movement-btn:hover { background: #312e81; }

.pc-delete-btn {
    padding: 8px 14px;
    border: 1px solid #ef4444;
    border-radius: 8px;
    background: #450a0a;
    color: #fca5a5;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.82rem;
}

.pc-delete-btn:hover { background: #7f1d1d; }

/* Edit button on custom palette items */

.bd-edit-piece-btn {
    background: none;
    border: none;
    color: #64748b;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 2px;
    border-radius: 3px;
    transition: color 0.12s;
}

.bd-edit-piece-btn:hover { color: #e2e8f0; }

.bd-tool-create {
    border: 1px dashed #7c3aed !important;
    color: #c4b5fd;
}

.bd-tool-create:hover { background: #1e1b4b; }

.daily-chess-row {
    margin-bottom: 1.25rem;
}

.daily-chess-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #1e3a5f 0%, #1a2744 100%);
    border: 2px solid #334d7a;
    border-radius: 12px;
    color: #e5e7eb;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
    text-align: left;
    position: relative;
}

.daily-chess-btn:hover {
    border-color: #7c3aed;
    transform: translateY(-1px);
}

.daily-chess-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.daily-chess-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f8fafc;
}

.daily-chess-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    display: block;
    margin-top: 2px;
}

.daily-chess-badge-wrap {
    margin-left: auto;
}

.daily-chess-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Daily Games Screen */

.daily-games-screen {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: var(--app-bg, linear-gradient(135deg, #0b1220 0%, #0f172a 100%));
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.daily-games-screen.show {
    opacity: 1;
}

.daily-games-container {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.daily-games-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.daily-games-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.daily-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.daily-notifications-btn {
    position: relative;
    padding: 8px 12px;
    border: 1px solid #334155;
    border-radius: 8px;
    background: linear-gradient(135deg, #6b8e23 0%, #556b2f 100%);
    color: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(107, 142, 35, 0.25);
}

.daily-notifications-btn:hover {
    background: linear-gradient(135deg, #7a9e2d 0%, #657a35 100%);
}

.daily-notifications-badge {
    top: -6px;
    right: -6px;
}

.daily-games-header h2 {
    text-align: center;
    font-size: 1.5rem;
    color: #f8fafc;
    margin: 0;
    letter-spacing: 0.02em;
}

.daily-back-btn, .daily-new-btn {
    padding: 8px 14px;
    border: 1px solid #334155;
    border-radius: 8px;
    background: var(--subtle-bg, #1f2937);
    color: #e5e7eb;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
}

.daily-new-btn {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    border: none;
    color: #fff;
    font-weight: 600;
}

.daily-games-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.daily-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 8px;
    padding: 0 4px;
}

.daily-section-title:first-child {
    margin-top: 0;
}

.daily-section-completed {
    margin-top: 24px;
}

.daily-game-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--subtle-bg, #1f2937);
    border: 1px solid var(--control-border, #334155);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.daily-game-card:hover {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.06);
}

.daily-my-turn {
    border-left: 4px solid #22c55e;
}

.daily-their-turn {
    border-left: 4px solid #64748b;
}

.daily-invite-card {
    border-left: 4px solid #eab308;
}

.daily-completed-card {
    opacity: 0.7;
    cursor: pointer;
}

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

.daily-card-opponent {
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.daily-card-meta {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 2px;
}

.daily-card-status {
    font-size: 0.85rem;
    font-weight: 600;
    color: #22c55e;
    white-space: nowrap;
    margin-left: 12px;
}

.daily-their-turn .daily-card-status {
    color: #64748b;
}

.daily-card-result {
    font-size: 0.85rem;
    font-weight: 600;
    color: #a78bfa;
    white-space: nowrap;
    margin-left: 12px;
}

.daily-card-actions {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

.daily-accept-btn, .daily-decline-btn {
    padding: 6px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}

.daily-accept-btn {
    background: #22c55e;
    color: #fff;
}

.daily-decline-btn {
    background: #374151;
    color: #d1d5db;
}

.daily-empty {
    text-align: center;
    padding: 48px 16px;
    color: #94a3b8;
    font-size: 1rem;
}

.daily-loading {
    text-align: center;
    padding: 48px 16px;
    color: #94a3b8;
}

.daily-draw-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    background: #eab308;
    color: #000;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Daily Game Top Bar (in-board navigation) — see expanded rules below with body.daily-game-active */

.daily-game-top-back {
    padding: 8px 14px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.6);
    color: #e5e7eb;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.daily-game-top-back:hover {
    background: rgba(30, 41, 59, 0.9);
}

.daily-game-top-label {
    flex: 1;
    font-size: 0.85rem;
    color: #a78bfa;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.daily-games-list-open .menu-toggle,
body.daily-games-list-open #account-button,
body.daily-games-list-open .notifications-button {
    display: none !important;
}

/* Notifications panel header actions (Clear All + close) */
.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.notifications-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.clear-all-notifications-btn {
    background: none;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.clear-all-notifications-btn:hover {
    background: rgba(239,68,68,0.12);
}

body.daily-game-active .menu-toggle {
    display: none !important;
}

body.daily-game-active {
    --daily-top-bar-height: 96px;
}

body.daily-game-active #game-screen {
    padding-top: calc(var(--daily-top-bar-height) + env(safe-area-inset-top, 0px));
    overflow-y: auto;
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
}

body.daily-game-active .board-area {
    flex-direction: column;
    align-items: center;
    width: 100%;
}

body.daily-game-active .title-sidebar {
    display: none;
}

body.daily-game-active #chessboard-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

/* Hide the fixed account/notifications stack while a daily game is active —
   the daily top bar provides its own navigation.  The stack returns when the
   user exits back to the main menu. */
body.daily-game-active .header-account-stack {
    display: none !important;
}

body.daily-game-active #chessboard {
    touch-action: manipulation;
    --board-side: min(calc(100vw - 12px), calc(100dvh - var(--daily-top-bar-height) - env(safe-area-inset-top, 0px) - 16px));
    width: var(--board-side) !important;
    height: var(--board-side) !important;
    max-width: 100%;
}

body.daily-game-active #chessboard .piece {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

body.daily-game-active .info-panel {
    width: 100%;
    max-width: 100%;
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px));
}

body.daily-game-active .info-panel .game-info {
    display: none;
}

body.daily-game-active #local-game-controls,
body.daily-game-active #local-game-actions,
body.daily-game-active #player-names-display,
body.daily-game-active #undo-button-container,
body.daily-game-active #reset-btn,
body.daily-game-active #flip-board-btn,
body.daily-game-active #resign-btn,
body.daily-game-active #offer-draw-btn {
    display: none !important;
}

.daily-game-top-bar {
    position: fixed;
    top: max(0px, env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    z-index: 10040;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px 10px;
    background: linear-gradient(135deg, #1e3a5f 0%, #1a2744 100%);
    border-bottom: 1px solid #334d7a;
    color: #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.daily-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.daily-top-row-main {
    flex-wrap: nowrap;
    overflow: hidden;
}

.daily-top-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.daily-top-status {
    font-size: 0.85rem;
    font-weight: 700;
}

.daily-top-turn {
    font-size: 0.8rem;
    color: #94a3b8;
}

.daily-top-row-actions {
    flex-wrap: wrap;
    gap: 6px;
}

.daily-top-settings-btn {
    padding: 6px 10px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.6);
    color: #e5e7eb;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
    position: relative;
}

.daily-top-notif-btn {
    background: rgba(107, 142, 35, 0.25);
    border-color: #6b8e23;
}

.daily-top-draw-label {
    font-size: 0.8rem;
    color: #fbbf24;
    align-self: center;
}

.daily-visual-prefs-bar {
    margin: 0 0 12px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(30, 58, 95, 0.35);
    border: 1px solid #334d7a;
}

.daily-visual-prefs-bar.hidden {
    display: none;
}

.daily-visual-prefs-title {
    margin: 0 0 4px;
    font-weight: 700;
    color: #a78bfa;
}

.daily-visual-prefs-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.daily-visual-prefs-btn.primary {
    background: #4CAF50;
    border-color: #388e3c;
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.daily-move-options {
    margin-bottom: 15px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(30, 58, 95, 0.35);
    border: 1px solid #334d7a;
}

.daily-move-options.hidden {
    display: none;
}

.daily-click-confirm-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--panel-text, #e5e7eb);
    cursor: pointer;
    margin-bottom: 8px;
}

.daily-pending-move-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.daily-pending-move-actions.hidden {
    display: none;
}

.daily-confirm-move-btn {
    flex: 1;
    min-width: 120px;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: #4CAF50;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.daily-cancel-move-btn {
    flex: 1;
    min-width: 80px;
    padding: 10px 12px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #1f2937;
    color: #e5e7eb;
    cursor: pointer;
}

.square.pending-move-from {
    box-shadow: inset 0 0 0 3px #4CAF50;
}

.square.pending-move-to {
    box-shadow: inset 0 0 0 3px #fbbf24;
}

.daily-move-confirm-float {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.96);
    border: 2px solid #4CAF50;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.daily-move-confirm-float.hidden {
    display: none;
}

.daily-move-confirm-float-label {
    flex: 1;
    min-width: 120px;
    font-weight: 600;
    color: #e5e7eb;
    font-size: 0.95rem;
}

/* Daily Chess chat (below board in scroll footer) */
/* ── Daily Chat: slide-up overlay ── */
.daily-chat-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-end;
    /* slide-up animation handled by .open class */
}

.daily-chat-overlay.hidden {
    display: none;
}

.daily-chat-panel {
    width: 100%;
    max-height: 70vh;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(180deg, #1a2744 0%, #0f172a 100%);
    border-top: 2px solid #334d7a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.daily-chat-overlay.open .daily-chat-panel {
    transform: translateY(0);
}

#daily-top-chat {
    position: relative;
}

.daily-chat-unread-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inline-chat-unread-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    margin-left: 6px;
    vertical-align: middle;
    animation: chat-dot-pulse 1.5s ease-in-out infinite;
}

@keyframes chat-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.daily-replay-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.daily-flip-row {
    margin-bottom: 8px;
}

.daily-flip-btn-inline {
    width: 100%;
    text-align: center;
}

.daily-action-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.daily-footer-action-btn {
    flex: 1;
    min-width: 100px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #475569;
    background: #1f2937;
    color: #e5e7eb;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
}

.daily-footer-action-btn.daily-resign-btn {
    border-color: #7f1d1d;
    color: #fca5a5;
}

.daily-footer-action-btn.daily-draw-btn {
    border-color: #713f12;
    color: #fcd34d;
}

.daily-footer-action-btn.daily-chat-btn {
    border-color: #312e81;
    color: #a5b4fc;
}

.daily-footer-action-btn.daily-nudge-btn {
    width: 100%;
    border-color: #065f46;
    color: #6ee7b7;
}

.daily-replay-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 80px;
    padding: 8px 10px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: #1e3a5f;
    color: #e5e7eb;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.82rem;
    text-align: center;
}

.daily-replay-full-btn {
    background: #1a3a2a;
    border-color: #3d6b4a;
}

.daily-replay-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.daily-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #334d7a;
}

.daily-chat-title {
    font-weight: 700;
    color: #a78bfa;
}

.daily-chat-header-actions {
    display: flex;
    gap: 6px;
}

.daily-chat-settings-btn,
.daily-chat-close-btn {
    background: transparent;
    border: 1px solid #475569;
    color: #e5e7eb;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
}

.daily-chat-settings {
    padding: 8px 12px;
    border-bottom: 1px solid #334d7a;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.daily-chat-settings.hidden {
    display: none;
}

.daily-chat-setting-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #e5e7eb;
}

.daily-chat-block-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #475569;
    background: #1f2937;
    color: #fca5a5;
    cursor: pointer;
    font-size: 0.85rem;
    text-align: left;
}

.daily-chat-messages {
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100px;
    max-height: 220px;
}

.daily-chat-msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 85%;
}

.daily-chat-msg.mine {
    align-self: flex-end;
    text-align: right;
}

.daily-chat-msg.theirs {
    align-self: flex-start;
}

.daily-chat-msg-name {
    font-size: 0.7rem;
    color: #94a3b8;
}

.daily-chat-msg-text {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 10px;
    background: #1e293b;
    color: #e5e7eb;
    font-size: 0.9rem;
    word-break: break-word;
}

.daily-chat-msg.mine .daily-chat-msg-text {
    background: #166534;
}

.daily-chat-blocked-note {
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #fca5a5;
    margin: 0;
}

.daily-chat-blocked-note.hidden {
    display: none;
}

.daily-chat-compose {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #334d7a;
    background: rgba(15, 23, 42, 0.98);
}

.daily-chat-compose.hidden {
    display: none;
}

.daily-chat-compose input {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #475569;
    background: #0f172a;
    color: #e5e7eb;
    font-size: 16px;
}

.daily-chat-compose button {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #4CAF50;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.daily-chat-input-bar {
    display: none;
}

.daily-visual-prefs-btn {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #475569;
    background: #1f2937;
    color: #e5e7eb;
    cursor: pointer;
    font-size: 0.85rem;
    text-align: left;
}

.daily-visual-prefs-btn.secondary {
    background: transparent;
}

.daily-game-controls-scroll {
    margin-bottom: 12px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    body.daily-game-active {
        --daily-top-bar-height: 108px;
    }

    body.daily-game-active #chessboard {
        --board-side: min(calc(100vw - 8px), calc(100dvh - var(--daily-top-bar-height) - env(safe-area-inset-top, 0px) - 12px));
    }
}

.daily-game-controls {
    padding: 10px 16px;
    background: linear-gradient(135deg, #1e3a5f 0%, #1a2744 100%);
    border-bottom: 1px solid #334d7a;
    color: #e5e7eb;
}

.daily-controls-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: #a78bfa;
    margin-bottom: 6px;
}

.daily-controls-status {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.daily-your-turn {
    color: #22c55e;
}

.daily-waiting {
    color: #eab308;
}

.daily-game-over {
    color: #a78bfa;
}

.daily-controls-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.daily-controls-btn {
    padding: 6px 14px;
    border: 1px solid #475569;
    border-radius: 6px;
    background: var(--subtle-bg, #1f2937);
    color: #e5e7eb;
    cursor: pointer;
    font-size: 0.85rem;
}

.daily-resign-btn {
    border-color: #ef4444;
    color: #fca5a5;
}

.daily-draw-btn {
    border-color: #eab308;
    color: #fde68a;
}

.daily-draw-offer-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #fde68a;
}

.daily-draw-accept-btn {
    padding: 4px 12px;
    border: none;
    border-radius: 5px;
    background: #22c55e;
    color: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}

.daily-draw-decline-btn {
    padding: 4px 12px;
    border: 1px solid #475569;
    border-radius: 5px;
    background: transparent;
    color: #d1d5db;
    cursor: pointer;
    font-size: 0.8rem;
}

/* Daily Create Modal */

.daily-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.daily-modal-overlay.show {
    opacity: 1;
}

.daily-modal {
    width: 90%;
    max-width: 400px;
    background: var(--panel-bg, #0f172a);
    border: 1px solid var(--control-border, #334155);
    border-radius: 14px;
    overflow: hidden;
}

.daily-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--control-border, #334155);
}

.daily-modal-header h3 {
    color: #f8fafc;
    margin: 0;
    font-size: 1.1rem;
}

.daily-modal-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.2rem;
    cursor: pointer;
}

.daily-modal-body {
    padding: 18px;
}

.daily-sandbox-badge {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid #7c3aed;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.9rem;
    color: #c4b5fd;
}

.daily-modal-body label {
    display: block;
    margin-bottom: 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--panel-text, #e5e7eb);
}

.daily-modal-body select {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    font-size: 0.95rem;
    background: var(--control-bg, #111827);
    border: 1px solid var(--control-border, #334155);
    border-radius: 8px;
    color: var(--panel-text, #e5e7eb);
}

.daily-modal-footer {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--control-border, #334155);
    justify-content: flex-end;
}

.daily-modal-cancel {
    padding: 8px 18px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: transparent;
    color: #d1d5db;
    cursor: pointer;
    font-size: 0.9rem;
}

.daily-modal-confirm {
    padding: 8px 22px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: transform 0.1s ease;
}

.daily-modal-confirm:hover {
    transform: translateY(-1px);
}

.daily-modal-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Opponent picker */

.daily-opponent-picker {
    position: relative;
}

.daily-opponent-picker input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #475569;
    background: #1e293b;
    color: #f8fafc;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.daily-opponent-picker input[type="text"]::placeholder {
    color: #64748b;
}

.daily-opponent-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #1e3a5f;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    color: #e0f2fe;
    font-weight: 600;
}

.daily-selected-name {
    flex: 1;
}

.daily-selected-clear {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
}

.daily-selected-clear:hover {
    color: #f87171;
}

.daily-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 180px;
    overflow-y: auto;
    background: #1e293b;
    border: 1px solid #475569;
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 20;
}

.daily-search-item {
    padding: 10px 12px;
    cursor: pointer;
    color: #f8fafc;
    font-size: 0.9rem;
    transition: background 0.12s;
}

.daily-search-item:hover {
    background: #334155;
}

.daily-search-username {
    color: #64748b;
    font-size: 0.8rem;
    margin-left: 4px;
}

.daily-search-empty {
    padding: 10px 12px;
    color: #64748b;
    font-size: 0.85rem;
    text-align: center;
}

/* Friends quick-select */

.daily-friends-quick {
    margin: 8px 0 4px;
}

.daily-friends-quick-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.daily-friends-quick-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.daily-friend-option {
    padding: 6px 14px;
    background: #1e3a5f;
    border: 1px solid #334155;
    border-radius: 20px;
    color: #e0f2fe;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.daily-friend-option:hover {
    background: #2563eb;
    border-color: #3b82f6;
}

/* ═══════════════════════════════════════════════════════
   SANDBOX MODE PANEL
═══════════════════════════════════════════════════════ */

/* Welcome-screen button */
.sandbox-mode-row { margin: 6px 0; }
.sandbox-mode-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid #7c3aed55;
    border-radius: 10px;
    color: #e2e8f0;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.sandbox-mode-btn:hover { border-color: #7c3aed; background: linear-gradient(135deg, #1e1b4b, #312e81); }
.sandbox-mode-icon { font-size: 1.4rem; }
.sandbox-mode-label { font-weight: 700; font-size: 1rem; }
.sandbox-mode-desc  { font-size: 0.78rem; opacity: 0.7; }

/* Full-screen panel */
.sandbox-panel {
    position: fixed;
    inset: 0;
    z-index: 10060;
    background: #0d1117 !important;
    color: #e2e8f0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}
.sb-has-quicksand-heavy .sb-quicksand-heavy-ov { color: #92400e; opacity: 0.85; font-size: 1.1rem; }
.sb-has-quicksand-light .sb-quicksand-light-ov { color: #ca8a04; opacity: 0.9; font-size: 1.1rem; }

/* Hide global header buttons when full-screen tools are open */
body.chaos-mode-open .menu-toggle,
body.chaos-mode-open .header-account-stack,
body.chaos-mode-open #account-button,
body.board-designer-open .menu-toggle,
body.board-designer-open .header-account-stack,
body.board-designer-open #account-button {
    display: none !important;
}

body.chaos-mode-open .sb-panel-header,
body.board-designer-open .bd-header {
    padding-top: max(14px, calc(8px + env(safe-area-inset-top, 0px)));
}

.sandbox-panel.hidden { display: none; }

/* Header */
.sb-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #161b27;
    border-bottom: 1px solid #30363d;
    gap: 12px;
    flex-shrink: 0;
}
.sb-header-left  { display: flex; align-items: center; gap: 10px; }
.sb-header-right { display: flex; align-items: center; gap: 12px; }
.sb-header-icon  { font-size: 1.5rem; }
.sb-header-title { margin: 0; font-size: 1.25rem; color: #e2e8f0; }
.sb-slots-label  { font-size: 0.82rem; color: #94a3b8; }
.sb-close-btn {
    background: none; border: none; font-size: 1.3rem;
    color: #94a3b8; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.sb-close-btn:hover { background: #ffffff18; color: #e2e8f0; }

/* Tier badge */
.sb-tier-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sb-tier-free    { background: #334155; color: #94a3b8; }
.sb-tier-adfree  { background: #164e63; color: #67e8f9; }
.sb-tier-plus    { background: #1e3a8a; color: #93c5fd; }
.sb-tier-premium { background: #4c1d95; color: #c4b5fd; }

/* Gallery */
.sb-gallery-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.sb-gallery-hint {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0 0 16px;
    line-height: 1.5;
}
.sb-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

/* Individual cards */
.sb-card {
    background: #161b27;
    border: 1px solid #30363d;
    border-radius: 10px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 130px;
    transition: border-color 0.15s, transform 0.1s;
}
.sb-card-filled  { border-color: #334155; cursor: default; }
.sb-card-empty   { border-style: dashed; border-color: #374151; cursor: pointer; }
.sb-card-empty:hover { border-color: #7c3aed; transform: translateY(-2px); }
.sb-card-locked  { opacity: 0.45; cursor: default; }
.sb-card-icon    { font-size: 1.8rem; line-height: 1; }
.sb-card-plus    { color: #7c3aed; }
.sb-card-name    { font-weight: 600; color: #e2e8f0; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-card-meta    { font-size: 0.75rem; color: #6b7280; }
.sb-card-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }

/* Shared button style */
.sb-btn {
    padding: 5px 10px;
    border: 1px solid #334155;
    border-radius: 6px;
    background: #1f2937;
    color: #cbd5e1;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.sb-btn:hover { background: #374151; border-color: #4b5563; color: #e2e8f0; }
.sb-play-btn  { background: #14532d; border-color: #166534; color: #86efac; }
.sb-play-btn:hover  { background: #166534; }
.sb-challenge-btn { background: #3b0764; border-color: #6b21a8; color: #c4b5fd; }
.sb-challenge-btn:hover { background: #581c87; }
.sb-delete-btn { color: #f87171; }
.sb-delete-btn:hover { background: #450a0a; border-color: #7f1d1d; }

/* ── Editor ── */
.sb-editor-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.sb-editor-container.hidden { display: none; }

.sb-ed-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: #161b27;
    border-bottom: 1px solid #30363d;
    flex-shrink: 0;
}
.sb-name-input {
    flex: 1;
    min-width: 140px;
    padding: 6px 10px;
    background: #0d1117;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 0.9rem;
}
.sb-name-input:focus { outline: none; border-color: #7c3aed; }
.sb-size-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #94a3b8;
    white-space: nowrap;
}
.sb-size-select {
    padding: 5px 8px;
    background: #0d1117;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 0.85rem;
}
.sb-ed-btns { display: flex; gap: 8px; }
.sb-save-btn     { background: #1e3a8a; border-color: #1d4ed8; color: #bfdbfe; }
.sb-save-btn:hover { background: #1d4ed8; }
.sb-saveplay-btn { background: #14532d; border-color: #166534; color: #86efac; }
.sb-saveplay-btn:hover { background: #166534; }
.sb-back-btn     { white-space: nowrap; }

.sb-ed-body {
    display: flex;
    flex: 1;
    gap: 0;
    overflow: hidden;
}

/* Board area */
.sb-board-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    overflow: auto;
}
.sb-board-hint {
    font-size: 0.78rem;
    color: #6b7280;
    margin-bottom: 10px;
    text-align: center;
}
.sb-board-hint strong { color: #94a3b8; }

.sb-board {
    display: grid;
    grid-template-columns: repeat(var(--sb-n, 10), 1fr);
    grid-template-rows:    repeat(var(--sb-n, 10), 1fr);
    width:  min(60vw, 60vh, 520px);
    height: min(60vw, 60vh, 520px);
    border: 2px solid #374151;
    border-radius: 4px;
    overflow: hidden;
}
@media (max-width: 700px) {
    .sb-board { width: min(85vw, 85vw); height: min(85vw, 85vw); }
    .sb-ed-body { flex-direction: column; }
    .sb-palette { width: 100%; border-left: none; border-top: 1px solid #30363d; }
}

.sb-sq {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.9rem, 2.5vmin, 1.5rem);
    position: relative;
    transition: background 0.1s;
    overflow: hidden;
}
.sb-sq-l { background: #b0956a; }
.sb-sq-d { background: #5a6272; }
.sb-sq.sb-white-side.sb-sq-l { background: #c8a87a; }
.sb-sq.sb-white-side.sb-sq-d { background: #7a6248; }
.sb-sq.sb-clickable { cursor: pointer; }
.sb-sq.sb-clickable:hover { filter: brightness(1.3); outline: 2px solid rgba(124,58,237,0.8); outline-offset: -2px; }

.sb-piece-sym { user-select: none; line-height: 1; }
.sb-piece-white { color: #ffffff; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.sb-piece-black { color: #1a1a2e; text-shadow: 0 0 3px #fff8, 0 1px 2px #0008; }

/* Palette */
.sb-palette {
    width: 160px;
    flex-shrink: 0;
    border-left: 1px solid #30363d;
    background: #0d1117;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 12px 10px;
    gap: 8px;
}
.sb-pal-title { font-size: 0.78rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; }
.sb-pal-hint  { font-size: 0.72rem; color: #4b5563; }
.sb-pal-grid  { display: flex; flex-direction: column; gap: 4px; }

.sb-pal-piece {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #161b27;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, border-color 0.1s;
    width: 100%;
}
.sb-pal-piece:hover { background: #1f2937; border-color: #4b5563; }
.sb-pal-piece.selected { background: #312e81; border-color: #7c3aed; color: #e2e8f0; }
.sb-pal-sym  { font-size: 1.1rem; line-height: 1; }
.sb-pal-lbl  { flex: 1; }

.sb-pal-eraser {
    padding: 6px 8px;
    background: #161b27;
    border: 1px dashed #4b5563;
    border-radius: 6px;
    color: #6b7280;
    font-size: 0.82rem;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s;
    margin-top: 4px;
}
.sb-pal-eraser:hover { background: #1f2937; color: #f87171; border-color: #f87171; }
.sb-pal-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 8px;
}
.sb-pal-tier { color: #7c3aed; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ─── Wall & Quicksand ─────────────────────────────────────────────────── */

/* ── Game board ── */
.square.has-wall { cursor: not-allowed; }
.wall-block {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 30%,
            rgba(0,0,0,0.35) 30%,
            rgba(0,0,0,0.35) 34%
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 45%,
            rgba(0,0,0,0.25) 45%,
            rgba(0,0,0,0.25) 50%
        ),
        linear-gradient(160deg, #8b6a3a 0%, #6b4e2a 40%, #5c3d1e 100%);
    border: 2px solid #3a2510;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.12), inset 0 -2px 4px rgba(0,0,0,0.4);
    z-index: 2;
    pointer-events: none;
}

.square.has-quicksand { position: relative; }
.quicksand-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 60%,
        rgba(194, 154, 80, 0.72) 0%,
        rgba(160, 120, 50, 0.55) 50%,
        rgba(120, 85, 30, 0.35) 100%);
    z-index: 1;
    pointer-events: none;
    animation: quicksand-pulse 2.4s ease-in-out infinite;
}
.quicksand-overlay::after {
    content: '';
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(220,180,90,0.5) 0%, transparent 70%);
    animation: quicksand-swirl 3s linear infinite;
}
@keyframes quicksand-pulse {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1.0; }
}
@keyframes quicksand-swirl {
    from { transform: rotate(0deg) scaleX(1.1); }
    to   { transform: rotate(360deg) scaleX(1.1); }
}

/* Indicator when a piece is sitting IN quicksand */
.square.has-quicksand .piece { position: relative; z-index: 3; }
.square.has-quicksand-heavy .quicksand-heavy-overlay {
    background: radial-gradient(ellipse at 50% 60%, rgba(120, 72, 30, 0.82) 0%, rgba(80, 45, 15, 0.6) 100%);
}
.square.has-quicksand-light .quicksand-light-overlay {
    background: radial-gradient(ellipse at 50% 60%, rgba(202, 138, 4, 0.55) 0%, rgba(160, 110, 20, 0.35) 100%);
}

/* ── Sandbox editor ── */
.sb-has-wall  { background: #5c3d1e !important; }
.sb-wall-block {
    position: absolute;
    inset: 2px;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 28%, rgba(0,0,0,0.3) 28%, rgba(0,0,0,0.3) 32%),
        repeating-linear-gradient(90deg, transparent, transparent 44%, rgba(0,0,0,0.2) 44%, rgba(0,0,0,0.2) 48%),
        linear-gradient(160deg, #a07840 0%, #7a5420 100%);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    pointer-events: none;
}
.sb-wall-block::after { content: '🧱'; }

.sb-has-quicksand .sb-quicksand-ov {
    position: absolute;
    inset: 0;
    background: rgba(194, 154, 80, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: rgba(100,60,10,0.8);
    pointer-events: none;
    animation: quicksand-pulse 2.4s ease-in-out infinite;
}

/* Toast */
.sb-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #1f2937;
    border: 1px solid #374151;
    color: #e2e8f0;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 0.9rem;
    z-index: 9999;
    opacity: 0;
    transition: transform 0.25s, opacity 0.25s;
    pointer-events: none;
}
.sb-toast.sb-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROMOTION DIALOG — piece icons that match the current piece style
   ═══════════════════════════════════════════════════════════════════════════ */

.promo-piece-icon {
    width: 52px;
    height: 52px;
    position: relative;
    display: block;
    flex-shrink: 0;
}

.promo-piece-icon .classic-piece-svg-mask,
.promo-piece-icon .prince-svg-mask,
.promo-piece-icon .princess-svg-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-blend-mode: screen;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.promo-piece-icon.white .classic-piece-svg-mask,
.promo-piece-icon.white .prince-svg-mask,
.promo-piece-icon.white .princess-svg-mask {
    background-color: var(--white-piece-color);
}

.promo-piece-icon.black .classic-piece-svg-mask,
.promo-piece-icon.black .prince-svg-mask,
.promo-piece-icon.black .princess-svg-mask {
    background-color: var(--black-piece-color);
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.28));
}

.promo-piece-icon .saboteur-mask,
.promo-piece-icon .siegeengine-mask,
.promo-piece-icon .general-mask {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

.promo-piece-icon.white .saboteur-mask,
.promo-piece-icon.white .siegeengine-mask,
.promo-piece-icon.white .general-mask {
    background-color: var(--white-piece-color);
}

.promo-piece-icon.black .saboteur-mask,
.promo-piece-icon.black .siegeengine-mask,
.promo-piece-icon.black .general-mask {
    background-color: var(--black-piece-color);
}

.promo-fallback-glyph {
    display: block;
    width: 100%; height: 100%;
    font-size: 44px;
    line-height: 52px;
    text-align: center;
}

.promo-piece-icon.white .promo-fallback-glyph { color: var(--white-piece-color); }
.promo-piece-icon.black .promo-fallback-glyph { color: var(--black-piece-color); }

.promotion-choice:hover .promo-piece-icon .classic-piece-svg-mask,
.promotion-choice:hover .promo-piece-icon .prince-svg-mask,
.promotion-choice:hover .promo-piece-icon .princess-svg-mask {
    background-color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS LIVE PREVIEW BOARD
   ═══════════════════════════════════════════════════════════════════════════ */

.settings-preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    padding: 14px 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
}

.settings-preview-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
    color: var(--panel-text, #ccc);
}

.settings-preview-board {
    display: grid;
    grid-template-columns: repeat(5, 38px);
    grid-template-rows: repeat(5, 38px);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.45);
    pointer-events: none;
    user-select: none;
}

.settings-preview-board .spb-sq {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spb-piece {
    font-size: 26px;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.spb-piece.white { color: var(--white-piece-color, #fff); }
.spb-piece.black { color: var(--black-piece-color, #000); }

/* ═══════════════════════════════════════════════════════════════════════════
   GAME-OVER NOTIFICATION CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.notification-gameover {
    border: 2px solid rgba(220, 30, 60, 0.55) !important;
    background: linear-gradient(135deg, rgba(120,0,30,0.18), rgba(60,0,10,0.25)) !important;
    animation: gameover-pulse 2.5s ease-in-out infinite;
}

.notification-gameover-title {
    color: #ff5566 !important;
    font-weight: 700;
}

@keyframes gameover-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,30,60,0); }
    50%       { box-shadow: 0 0 12px 3px rgba(220,30,60,0.35); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAVE-GAME BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.save-game-btn {
    background: linear-gradient(135deg, #1e7a2e, #27ae60);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.save-game-btn:disabled { opacity: 0.6; cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════════
   SAVED GAMES PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

.saved-games-panel {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.saved-games-content {
    background: var(--panel-bg, #1a1a2e);
    border: 2px solid var(--accent, #4b0082);
    border-radius: 16px;
    width: min(460px, 94vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(75,0,130,0.4);
    overflow: hidden;
}

.saved-games-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.saved-games-header h2 { color: var(--accent-text, #ddd); font-size: 20px; margin: 0; }

.close-saved-games-btn {
    background: transparent; border: none; color: #999;
    font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px;
}

.saved-games-list { overflow-y: auto; flex: 1; padding: 10px 12px; }

.saved-games-empty {
    text-align: center; color: #999; padding: 30px 20px;
    font-size: 14px; line-height: 1.6;
}

.saved-game-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 10px; border-radius: 10px;
    background: rgba(255,255,255,0.04); margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.07);
}

.saved-game-opponent { font-weight: 600; font-size: 15px; color: var(--accent-text, #ddd); }
.saved-game-meta { font-size: 12px; color: #aaa; margin-top: 2px; }
.saved-game-date { font-size: 11px; color: #777; }
.saved-game-actions { display: flex; gap: 6px; flex-shrink: 0; }

.saved-game-delete-btn {
    background: transparent; border: 1px solid rgba(255,80,80,0.35);
    color: #ff8080; border-radius: 6px; padding: 5px 8px;
    font-size: 14px; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REPLAY OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */

.replay-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.82);
    z-index: 10001;
    display: flex; align-items: center; justify-content: center;
}

.replay-card {
    background: var(--panel-bg, #1a1a2e);
    border: 2px solid var(--accent, #4b0082);
    border-radius: 18px;
    width: min(480px, 96vw);
    max-height: 90vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(75,0,130,0.45);
}

.replay-header {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 16px 20px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: relative; flex-shrink: 0;
}

.replay-title { font-size: 20px; font-weight: 700; color: var(--accent-text, #ddd); }
.replay-subtitle { font-size: 13px; color: #aaa; margin-top: 2px; }

.replay-close-btn {
    position: absolute; top: 12px; right: 14px;
    background: transparent; border: none; color: #888;
    font-size: 20px; cursor: pointer; line-height: 1; padding: 4px 8px;
}

.replay-body {
    flex: 1; overflow: hidden; display: flex; flex-direction: column;
    padding: 12px 16px 4px; gap: 8px; min-height: 0;
}

.replay-status { text-align: center; font-size: 13px; color: #ccc; min-height: 20px; }

.replay-progress-bar {
    height: 6px; background: rgba(255,255,255,0.1);
    border-radius: 3px; overflow: hidden; flex-shrink: 0;
}

.replay-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4b0082, #9b30ff);
    border-radius: 3px; transition: width 0.25s ease; width: 0%;
}

.replay-move-list {
    flex: 1; overflow-y: auto;
    display: flex; flex-wrap: wrap; gap: 3px;
    align-content: flex-start; padding: 4px 0;
    min-height: 80px; max-height: 180px;
}

.rml-move {
    padding: 3px 6px; border-radius: 4px; font-size: 12px; cursor: pointer;
    color: #ccc; background: rgba(255,255,255,0.06); transition: background 0.1s;
}
.rml-move:hover { background: rgba(255,255,255,0.14); }
.rml-move.rml-current { background: var(--accent, #4b0082); color: #fff; font-weight: 700; }
.rml-num { color: #888; margin-right: 2px; }
.replay-move-counter { text-align: center; font-size: 12px; color: #777; flex-shrink: 0; }

.replay-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
}

.replay-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--accent-text, #ddd); border-radius: 8px;
    padding: 10px 16px; font-size: 18px; cursor: pointer;
    transition: background 0.15s; line-height: 1; min-width: 44px;
}
.replay-btn:hover:not(:disabled) { background: rgba(255,255,255,0.16); }
.replay-btn:disabled { opacity: 0.3; cursor: default; }

.replay-play-btn {
    background: linear-gradient(135deg, #4b0082, #7b00c2);
    border-color: #9b30ff; padding: 12px 24px; font-size: 20px;
}

.replay-footer {
    display: flex; justify-content: center;
    padding: 8px 16px 14px;
    border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}

.replay-delete-btn {
    background: transparent; border: 1px solid rgba(255,80,80,0.3);
    color: #ff8080; border-radius: 8px; padding: 6px 18px;
    font-size: 13px; cursor: pointer;
}

/* Daily create modal — collapsible chaos variants */
.daily-mode-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.daily-chaos-variants-panel {
    border: 1px solid rgba(124, 58, 237, 0.35);
    border-radius: 8px;
    padding: 6px 10px;
    background: rgba(30, 27, 75, 0.35);
}
.daily-chaos-toggle {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    color: #c4b5fd;
}
.daily-chaos-select { width: 100%; margin-top: 8px; }

/* Leaderboard category / sort tabs */
.leaderboard-category-tabs,
.leaderboard-sort-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}
.leaderboard-cat-btn,
.leaderboard-sort-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
}
.leaderboard-cat-btn.active,
.leaderboard-sort-btn.active {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-color: transparent;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TUTORIAL DIAGRAM
   ═══════════════════════════════════════════════════════════════════════════ */

.tutorial-diagram {
    display: flex; justify-content: center;
    margin: 4px 0; overflow: hidden;
}

.tutorial-diagram svg { max-width: 100%; height: auto; }