/* Jewel Stack reskin (kendoo art DNA): cast-gold frames, polished enamel panels, the royal
   vault backdrop. Loaded after the build's own <style>, so it only restyles — markup and
   game logic are untouched. */
:root {
    --gold-hi: #fff1b8;
    --gold: #f2b53a;
    --gold-deep: #b36b00;
    --gold-lip: #6b3d00;
    --enamel: #2a1560;
    --enamel-deep: #140c2a;
    --ink: #fff6dc;
}

body {
    background: #140c2a url('assets/bg.jpg') center / cover no-repeat;
    color: var(--ink);
    font-family: 'Arial Rounded MT Bold', 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
}

/* ---- Mode select ---- */
#mode-selection-screen {
    background: linear-gradient(180deg, rgba(20, 12, 42, .15), rgba(20, 12, 42, .55));
}
.title-logo { width: min(520px, 70vw); height: auto; filter: drop-shadow(0 10px 18px rgba(40, 10, 80, .55)); }
.title-mascot {
    position: absolute; right: max(2vw, calc(50% - 640px)); bottom: 4vh;
    height: min(46vh, 420px); width: auto; pointer-events: none;
    filter: drop-shadow(0 14px 22px rgba(20, 10, 60, .5));
}
#mode-selection-screen .subtitle { color: var(--gold-hi); font-size: 18px; text-shadow: 0 2px 0 var(--gold-lip); margin: 6px 0 28px; }

.mode-card {
    color: var(--ink);
    border: 3px solid var(--gold);
    border-radius: 18px;
    background: linear-gradient(180deg, #4a2aa8 0%, var(--enamel) 70%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -6px 12px rgba(0, 0, 0, .35),
        0 0 0 2px var(--gold-lip), 0 10px 22px rgba(20, 10, 60, .45);
}
.mode-card:hover { border: 3px solid var(--gold-hi); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 0 0 2px var(--gold-lip), 0 0 24px rgba(242, 181, 58, .55); }
.mode-card.selected {
    border: 3px solid var(--gold-hi);
    background: linear-gradient(180deg, #ff5a7a 0%, #c0123a 75%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2px var(--gold-lip), 0 0 30px rgba(255, 90, 122, .6);
    color: #fff;
}
.mode-card .mode-name { font-size: 22px; color: var(--gold-hi); text-shadow: 0 2px 0 var(--gold-lip); }
.mode-card .mode-desc, .mode-card .mode-config { opacity: .9; }

/* Cast-gold buttons: pale top, deep bottom, dark lip. */
#start-btn, .play-again-btn, .modal-confirm-btn, .change-mode-btn, .pause-btn, .change-mode-go-btn, .modal-cancel-btn {
    border: 2px solid var(--gold-lip);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-deep) 100%);
    color: #4a2400;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 4px 0 var(--gold-lip), 0 8px 16px rgba(20, 10, 60, .4);
    font-weight: bold;
}
#start-btn { padding: 16px 64px; font-size: 22px; letter-spacing: 3px; }
#start-btn:not(.enabled) { filter: grayscale(.8) brightness(.8); }
#start-btn.enabled:hover, .play-again-btn:hover, .modal-confirm-btn:hover, .change-mode-btn:hover, .pause-btn:hover {
    filter: brightness(1.08); background: linear-gradient(180deg, #fff8d6 0%, #ffc94d 45%, #c77800 100%);
}
.change-mode-go-btn, .modal-cancel-btn { background: linear-gradient(180deg, #7b5ad6 0%, #3a1f86 100%); color: var(--ink); text-shadow: 0 1px 0 #1a0b40; }

/* ---- Gameplay HUD ---- */
.mode-indicator {
    background: linear-gradient(180deg, #4a2aa8, var(--enamel)); border: 2px solid var(--gold);
    border-radius: 999px; color: var(--gold-hi);
}
.info-box {
    background: linear-gradient(180deg, rgba(74, 42, 168, .92), rgba(20, 12, 42, .92));
    border: 3px solid var(--gold);
    border-radius: 16px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 0 0 2px var(--gold-lip), 0 8px 18px rgba(20, 10, 60, .45);
}
.info-box .label { color: var(--gold-hi); font-size: 11px; letter-spacing: 2px; }
.info-box .value { color: #fff; text-shadow: 0 2px 0 var(--gold-lip); font-size: 26px; }
.next-preview-box canvas, .hold-preview-box canvas { image-rendering: auto; }
.side-panel-left, .side-panel-right { min-width: 150px; }
.side-panel-left { left: max(16px, calc(50% - 560px)); }
.side-panel-right { right: max(16px, calc(50% - 560px)); }
.controls-help { color: var(--gold-hi); text-shadow: 0 1px 0 var(--gold-lip); }

/* ---- Overlays ---- */
#game-over-screen, #confirmation-modal, #pause-overlay { background: rgba(20, 12, 42, .78); }
#game-over-screen h2, #pause-overlay h2 { color: var(--gold-hi); text-shadow: 0 3px 0 var(--gold-lip), 0 0 24px rgba(242, 181, 58, .6); }
.final-stat .stat-value { color: #fff; text-shadow: 0 2px 0 var(--gold-lip); }
.modal-content {
    background: linear-gradient(180deg, #4a2aa8, var(--enamel)); border: 3px solid var(--gold);
    border-radius: 20px; color: var(--ink); box-shadow: 0 0 0 2px var(--gold-lip), 0 16px 40px rgba(0, 0, 0, .5);
}
.modal-content h3 { color: var(--gold-hi); }
/* The build squeezes the label beside the preview canvas in a 110px square; stack them. */
.next-preview-box, .hold-preview-box { width: 150px; height: auto; flex-direction: column; gap: 6px; }