/* Shared Dragon Ball theme. Page stylesheets own layout, spacing and game states. */
body {
    --db-world: #2d628e;
    --db-panel: #183f68;
    --db-bg: #111e30;
    --db-bg-2: #142337;
    --db-surface: #fff1d2;
    --db-paper: #f6e7c4;
    --db-text: #173b64;
    --db-muted: #566778;
    --db-border: #d5be98;
    --db-blue: #245f9e;
    --db-orange: #ff9b3f;
    --db-orange-dark: #af4f14;
    --db-gold: #f8cf81;
    --db-shadow: 4px 5px 0 #122f50, inset 0 0 0 3px #efae4745;
    background: var(--db-world);
}
body::before {
    /* Independent vector layers retain their proportions at every viewport.
       Desktop and tablet share the art; mobile only downloads its compact sky. */
    background-color: var(--db-world);
    background-image: url('../img/background/korin-tower.svg'), url('../img/background/kame-house.svg'), url('../img/background/sky.svg');
    background-repeat: no-repeat;
    background-size: clamp(110px, calc((100vw - 1060px) / 2 - 24px), 180px) auto,
        clamp(185px, calc((100vw - 1060px) / 2 + 60px), 270px) auto, cover;
    background-position: left max(12px, calc((100vw - 1600px) / 2)) bottom 26px,
        right max(10px, calc((100vw - 1600px) / 2)) bottom 20px, center bottom;
}
body .db-header {
    background: linear-gradient(180deg, #18283c, #111e30);
    border-bottom-color: #f6a548;
    box-shadow: 0 5px 24px #050d1b33;
}
body .db-header::before { opacity: .5; }
body .db-wordmark > span {
    color: #ffd478;
    -webkit-text-stroke: .5px #e48b2f;
    text-shadow: 1px 2px 0 #9a4721, 0 0 24px #ffa33416;
}
body .db-wordmark strong { color: #fff5e1; text-shadow: 1px 2px #091322; }
body .db-nav a {
    background: linear-gradient(180deg, #293b51, #203147);
    border-color: #ffffff1c;
    color: #d3ddeb;
    box-shadow: 0 2px 0 #091423;
}
body .db-nav a.active {
    background: linear-gradient(180deg, #a45b2d, #844424);
    border-color: #f0a653;
    color: #fff4df;
}
body .db-nav a:hover { background: #34475f; border-color: #e5b670; }
body .db-lang-btn, body .db-network a {
    background: var(--db-panel);
    border-color: #b8d9ed45;
    color: #f4edda;
    box-shadow: none;
}
body .db-lang-list { background: var(--db-panel); border-color: #3e5065; }
body .db-lang-option { color: #d4dfed; }
body .db-lang-option.is-current { color: #ffcf87; background: #ff9b3f14; }
body .db-network > span { color: #d4e4ef; }
/* Central content: printed manga panels and objects from the series.
   No changes to the grid, spacing, dimensions, type metrics or breakpoints. */
body .db-home { position: relative; isolation: isolate; }
body .db-home::before {
    content: none;
}
body .db-home .db-series { color: #edf4f2; }
body .db-home .db-series span:nth-child(2) { color: #ffbd67; }
body .db-home .db-series span:nth-child(3) { color: #ffda77; }
body .db-home .db-series::before,
body .db-home .db-series::after { background: #b6d8e460; }
body .db-home .db-hero h1 {
    color: #ffce59;
    -webkit-text-stroke: .6px #142f50;
    text-shadow: 2px 3px 0 #983a22, 3px 4px 0 #132f4c;
}
body .db-home .db-hero > p { color: #e0ebef; }
body .db-home .db-mode-card {
    --card-accent: #1b3043;
    min-width: 0;
    background: #fff1d2;
    border-color: #132f50;
    border-top-color: #ff912b;
    border-radius: 10px;
    box-shadow: 4px 5px 0 #122f50, inset 0 0 0 3px #efae4745;
    isolation: isolate;
    transition: background-color .15s, border-color .15s;
}
body .db-home .db-mode-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-conic-gradient(from -12deg at 50% 18%, #f28e2e24 0deg 1deg, transparent 1deg 18deg);
    mask-image: linear-gradient(#000, transparent 68%);
    pointer-events: none;
    z-index: -1;
}
body .db-home .db-mode-card::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 2px 8px 2px 8px;
    border: 1px solid #d7883540;
    box-shadow: none;
    pointer-events: none;
    z-index: -1;
}
body .db-home .db-mode-art { filter: none; opacity: 1; }
body .db-home .db-mode-emblem {
    display: block;
    width: 160px;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    overflow: visible;
}
body .db-home .db-mode-title { color: #173b64; text-shadow: none; }
body .db-home .db-mode-desc { color: #4d5b68; }
body .db-home .db-card-play {
    background: #f58b28;
    border-color: #a95417;
    border-radius: 5px;
    color: #152e4e;
    box-shadow: 0 2px 0 #823d19;
}
body .db-home .db-card-play i { color: #17375c; }
body .db-home .db-mode-card--soon {
    background: var(--db-panel);
    border-color: #102e4e;
    border-top-color: #729fc0;
    border-style: solid;
    box-shadow: 3px 4px 0 #122e4b, inset 0 0 0 3px #6d9bbc15;
}
body .db-home .db-mode-card--soon::before {
    background: repeating-conic-gradient(from -12deg at 50% 18%, #8ac3eb16 0deg 1deg, transparent 1deg 18deg);
    mask-image: linear-gradient(#000, transparent 68%);
}
body .db-home .db-mode-card--soon::after { border-color: #86b8d82a; }
body .db-home .db-mode-card--soon .db-mode-title { color: #e3edf2; opacity: 1; }
body .db-home .db-mode-card--soon .db-mode-desc { color: #c2d5e4; }
body .db-home .db-mode-card--soon .db-card-play {
    background: #123354;
    border-color: #547fa3;
    color: #b0c8db;
    box-shadow: none;
}
body .db-home .db-mode-card--soon .db-card-play i { color: #9bb8cf; }
body .db-home .db-soon-badge {
    background: #102e4d;
    color: #f0d39d;
    border-radius: 3px;
    text-transform: none;
    letter-spacing: 0;
}
body .db-other-games-card { background: var(--db-panel); border-color: #bad5e13b; }
body .db-other-games-card > p, body .db-other-game-sub { color: #d0e0eb; }
body .db-footer { background: #0e1a2b; border-top-color: #df8a38; color: #afbed0; }
body .db-footer-desc { color: #c5d0df; }
body .db-footer-bottom { border-top-color: #ffffff14; }
body .db-social-link { background: #21344b; border-color: #ffffff1c; }
body .db-modal { background: #08111fdb; backdrop-filter: blur(8px); }
body .db-level-modal { border-color: #5e7795; border-top-color: #f9a348; background: #fcf4e6; box-shadow: 0 20px 80px #02091480; }
body .db-level-btn { border-color: #d4c6b1; box-shadow: 0 3px 0 #cfb99370; }
@media (hover: hover) {
    body .db-home .db-mode-card:not(.db-mode-card--soon):hover {
        border-color: #ffae47;
        box-shadow: 4px 5px 0 #122f50, inset 0 0 0 3px #efae4760;
        transform: none;
    }
}
@media (max-width: 580px) {
    body .db-footer-section:not(:first-child) { text-align: center; }
    body .db-footer-social { justify-content: center; }
    /* Rest the status on the border so it never covers the card title. */
    body .db-soon-badge {
        top: -8px;
        font-size: 8px;
        line-height: 1.4;
        letter-spacing: .02em;
        padding: 2px 8px;
        border: 1px solid #507a9d;
    }
}
@media (max-width: 360px) {
    body .db-mode-title { font-size: 20px; }
}
/* Background composition only: the page grid and all content stay unchanged. */
@media (min-width: 761px) and (max-width: 1199px) {
    body::before {
        background-size: 112px auto, 185px auto, cover;
        background-position: left -8px bottom 20px, right -12px bottom 12px, center bottom;
    }
}
@media (max-width: 760px) {
    body::before {
        background-image: url('../img/background/sky-mobile.svg');
        background-size: cover;
        background-position: center top;
    }
}

/* Shared page surfaces. These rules deliberately contain no sizing or layout. */
body :is(.db-title, .db-page-title, .db-profile-title) h1 {
    color: #ffce59;
    -webkit-text-stroke: .6px #142f50;
    text-shadow: 2px 3px 0 #983a22, 3px 4px 0 #132f4c;
}
body :is(.db-title, .db-page-title, .db-profile-title) > p { color: #e0ebef; }
body :is(.db-paper-card, .db-settings-card, .db-profile-hero, .db-profile-stat,
    .db-game-card, .db-legal, .db-search-panel, .db-board, .db-wordle, .db-unavailable) {
    background: var(--db-surface);
    border-color: #132f50;
    border-top-color: #ff912b;
    border-radius: 10px;
    box-shadow: var(--db-shadow);
}
body .db-profile-stat { border-bottom-color: var(--tone); }
body .db-legal h1 { color: var(--db-text); }
body .db-game-card--soon {
    --db-text: #e3edf2;
    --db-muted: #c2d5e4;
    background: var(--db-panel);
    border-color: #102e4e;
    border-top-color: #729fc0;
    box-shadow: 3px 4px 0 #122e4b, inset 0 0 0 3px #6d9bbc15;
}
body .db-game-card--soon :is(.db-game-card-head, .db-game-card-body) { opacity: .8; filter: none; }
body .db-game-card--soon .db-game-card-val { color: #c2d5e4; }
body .db-modal-content { border-color: #132f50; border-top-color: #ff912b; background: var(--db-surface); box-shadow: 0 20px 60px #081b35a0; }

/* Primary controls follow the home play button; danger and game-result colors
   retain their own semantic rules, including the accessible palette. */
body :is(.db-btn-primary, .db-guess-btn, .db-account-btn--primary) {
    background: #f58b28;
    color: #152e4e;
    border-color: #a95417;
    box-shadow: 0 2px 0 #823d19;
}
body :is(.db-btn-primary, .db-guess-btn, .db-account-btn--primary):hover:not(:disabled) {
    background: #ffa645;
    color: #152e4e;
}
body :is(.db-btn-primary, .db-guess-btn, .db-account-btn--primary):disabled { box-shadow: none; }
body :is(.db-share-btn, .db-account-btn--secondary) {
    background: var(--db-panel);
    color: #f4edda;
    border-color: #547fa3;
    box-shadow: 0 2px 0 #122e4b;
}
body :is(.db-share-btn, .db-account-btn--secondary):hover:not(:disabled) { background: #245780; }
body :is(.db-input, .db-search-input, .db-select-trigger) {
    background: #fffbf1;
    border-color: #c8b58e;
    color: var(--db-text);
}
body :is(.db-input, .db-search-input, .db-select-trigger):disabled { background: #e6e2d6; color: #637180; }
body :is(.db-select-menu, .db-autocomplete) { background: #fff8e8; border-color: #c8b58e; }

/* Navigation and secondary panels use the same blue as the home placeholders. */
body :is(.db-tab, .db-difficulty-bar, .db-howto, .db-yesterday, .db-back-link, .db-account-status) {
    background: var(--db-panel);
    border-color: #729fc05e;
    color: #e3edf2;
}
body .db-tab i { color: #f8cf81; }
body .db-tab.is-active { background: #f58b28; color: #152e4e; border-color: #ffb35d; }
body .db-tab.is-active i { color: #173b64; }
body .db-dif-btn { color: #d3e2ef; }
body .db-dif-btn.active { background: var(--db-surface); color: var(--db-text); border-color: #ebca8b; }
body .db-level-tab.is-active { color: #152e4e; border-color: #a95417; }
body .db-you-badge { color: #152e4e; }
body .db-howto > summary { color: #fff0cb; }
body .db-yesterday span { color: #c2d5e4; }
body .db-account-summary { color: #c2d5e4; }
body .db-level-btn { background: var(--db-panel); border-color: #729fc05e; color: #e3edf2; box-shadow: 0 2px 0 #122e4b; }
body .db-level-modal .db-level-btn { background: #fffaf0; color: var(--db-text); border-color: #d4c6b1; box-shadow: 0 3px 0 #cfb99370; }
/* «Más fácil / Más difícil» del personaje: mismo papel que el tablero, para que destaquen sobre el fondo. */
body .db-levels .db-level-btn { background: var(--db-surface); color: var(--db-text); border-color: #132f50; box-shadow: 0 3px 0 #132f50; }
body .db-levels .db-level-btn:hover { background: #fffaf0; color: var(--db-text); border-color: #ff912b; }
body .db-hint:not(.enabled):not(.active) { background: #dce7ed; border-color: #a8bbc9; color: #3c5870; }
body .db-hint:not(.enabled):not(.active) :is(.db-hint-icon, .db-hint-lock) { color: #536d82; }
body .db-revealed-hints { background: #fff3db; border-color: #d0bd93; }
body .db-key-action:not(.correct):not(.present):not(.absent) { background: #f58b28; color: #152e4e; border-color: #c27832; }
@media (max-width: 760px) {
    /* Let the existing account form fit its column on narrow screens. */
    body :is(.db-accounts-flow, .db-account-step) { min-width: 0; }
}