/* Blossom Shudoku reskin (kendoo art DNA): lacquer-red and jade enamel, cast-gold trim, the
   spring temple garden behind everything. Loaded after css/styles.css, so it only restyles —
   markup and game logic are untouched. */
:root {
    --primary-bg: transparent;
    --card-bg: #fff8ee;
    --grid-color: #3a1030;
    --cell-default: #fff8ee;
    --cell-filled: #bff0d8;
    --cell-invalid: #ffc2c8;
    --cell-highlight: #ffe3f0;
    --digit-color: #3a1030;
    --highlight-color: #e8336d;
    --victory-color: #1fae6b;
    --gold-hi: #fff1b8;
    --gold: #f2b53a;
    --gold-deep: #b36b00;
    --gold-lip: #6b3d00;
    --lacquer: #c2183f;
    --lacquer-deep: #7a0f2c;
    --ink: #fff6e8;
}

body {
    background: #3a1030 url('assets/bg.jpg') center / cover fixed no-repeat;
    font-family: 'Arial Rounded MT Bold', Nunito, 'Trebuchet MS', sans-serif;
}
.container { position: relative; }

/* ---- Title ---- */
.game-title { line-height: 0; margin-bottom: .25rem; }
.game-title img { width: min(520px, 80vw); height: auto; filter: drop-shadow(0 10px 18px rgba(58, 16, 48, .45)); }
.game-subtitle { color: var(--ink); text-shadow: 0 2px 0 var(--lacquer-deep), 0 0 12px rgba(58, 16, 48, .6); font-weight: 700; }

/* ---- Enamel cards, gold trim ---- */
.mode-card, .stats-panel, .modal-content, .game-over-content {
    background: linear-gradient(180deg, #e0305a 0%, var(--lacquer) 45%, var(--lacquer-deep) 100%);
    border: 3px solid var(--gold);
    border-radius: 18px;
    color: var(--ink);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -6px 12px rgba(0, 0, 0, .25),
        0 0 0 2px var(--gold-lip), 0 10px 22px rgba(58, 16, 48, .4);
}
.mode-card:hover { border-color: 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 {
    background: linear-gradient(180deg, #5fe0a8 0%, #1fae6b 55%, #0f6e44 100%);
    border-color: var(--gold-hi);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2px var(--gold-lip), 0 0 30px rgba(95, 224, 168, .6);
}
.mode-name, .modal-title, .result-title { color: var(--gold-hi); text-shadow: 0 2px 0 var(--gold-lip); }
.mode-description, .modal-message, .result-message, .stat-label, .final-stat-label { color: #ffe3ec; }
.stat-value, .final-stat-value { color: #fff; text-shadow: 0 2px 0 var(--lacquer-deep); }
.detail-item { background: rgba(58, 16, 48, .35); color: var(--ink); border: 1px solid rgba(255, 241, 184, .45); }
.mode-badge { background: linear-gradient(180deg, #5fe0a8, #1fae6b); border: 2px solid var(--gold); color: #fff; text-shadow: 0 1px 0 #0f6e44; }
.board-title { color: var(--ink); text-shadow: 0 2px 0 var(--lacquer-deep); }

/* ---- Cast-gold buttons ---- */
.btn, .digit-btn {
    border: 2px solid var(--gold-lip);
    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(58, 16, 48, .35);
    border-radius: 999px;
}
.digit-btn { border-radius: 50%; font-size: 1.4rem; }
.btn:hover:not(:disabled), .digit-btn:hover { filter: brightness(1.08); }
.digit-btn.active {
    background: linear-gradient(180deg, #ff8fb4 0%, var(--highlight-color) 60%, #9c1646 100%);
    color: #fff; text-shadow: 0 1px 0 #6b0f30; border-color: var(--gold-lip);
}
.btn-secondary { background: linear-gradient(180deg, #ff8fb4, var(--lacquer)); color: var(--ink); text-shadow: 0 1px 0 var(--lacquer-deep); }
.clear-btn { background: linear-gradient(180deg, #ffd0d6, #ff8f9c); color: #6b0f30; }

/* ---- Board: gold frame, porcelain and jade cells, fat raised digits ---- */
.game-board {
    background: var(--grid-color);
    border: 6px solid var(--gold);
    border-radius: 18px;
    padding: 8px;
    gap: 8px;
    box-shadow: 0 0 0 3px var(--gold-lip), inset 0 0 0 2px var(--gold-hi), 0 18px 34px rgba(58, 16, 48, .5);
}
.cell {
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, var(--cell-default) 60%, #f2dcc6 100%);
    box-shadow: inset 0 2px 0 #fff, inset 0 -4px 8px rgba(122, 15, 44, .18);
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    color: var(--highlight-color);
    text-shadow: 0 2px 0 #7a0f2c, 0 3px 6px rgba(58, 16, 48, .35);
}
.cell.filled {
    background: linear-gradient(180deg, #d9fbe9 0%, var(--cell-filled) 55%, #79d6a8 100%);
    color: #fff;
    text-shadow: 0 2px 0 #0f6e44, 0 0 0 #0f6e44, 0 3px 6px rgba(15, 110, 68, .5);
    -webkit-text-stroke: 1.5px #0f6e44;
}
.cell:hover, .cell.selected { background: linear-gradient(180deg, #fff 0%, var(--cell-highlight) 100%); }
.cell.selected { box-shadow: inset 0 0 0 4px var(--highlight-color), 0 0 16px rgba(232, 51, 109, .55); }