/* Yu-Gi-Oh! look for the whole site. Loaded after theme.css and overrides it. */
:root {
    --ygo-night: #0b0f1e;
    --ygo-panel: rgba(13, 18, 36, .9);
    --ygo-panel-2: rgba(24, 31, 58, .92);
    --ygo-gold: #e8b931;
    --ygo-gold-2: #f8dc7a;
    --ygo-gold-dark: #9c7414;
    --ygo-red: #c8322b;
    --ygo-blue: #2f6fd6;
    --ygo-ink: #eef1fa;
    --ygo-ink-soft: #a9b1cc;
    --ygo-line: rgba(232, 185, 49, .45);
    --ygo-radius: 10px;
}

body.sitePage, body.gamePage { font-family: 'Barlow', system-ui, sans-serif; }

body.sitePage {
    color: var(--ygo-ink);
    background: var(--ygo-night) url('../images/ygo/title.jpg') center / cover fixed no-repeat;
}
body.sitePage::before {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background: radial-gradient(ellipse at top, rgba(11, 15, 30, .55), rgba(11, 15, 30, .92) 70%);
}

/* ---- Navigation ---- */
body.sitePage .pokeHeader {
    background: linear-gradient(180deg, #151b33, #0b0f1e);
    border-bottom: 2px solid var(--ygo-gold);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .6);
}
body.sitePage .pokeHeader::after { display: none; }
.ygoBrand img { height: 54px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8)); transition: transform .2s; }
.ygoBrand:hover img { transform: scale(1.04) rotate(-1deg); }
body.sitePage .pokeNav .nav-link { color: var(--ygo-ink); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; font-size: .88rem; }
body.sitePage .pokeNav .nav-link:hover, body.sitePage .pokeNav .nav-link.active { color: var(--ygo-gold-2); background: rgba(232, 185, 49, .1); }
body.sitePage .pokeTrainer img { border: 2px solid var(--ygo-gold); }
.ygoAudioToggles { display: flex; gap: 10px; align-items: center; color: var(--ygo-ink-soft); }
.ygoAudioToggles label { display: flex; gap: 4px; align-items: center; cursor: pointer; }

/* ---- Headings ---- */
body.sitePage .pokemon1, body.sitePage .display-4, .duelTitle {
    font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: .04em;
    color: var(--ygo-gold-2);
    text-shadow: 0 2px 0 var(--ygo-gold-dark), 0 4px 18px rgba(0, 0, 0, .9);
}
body.sitePage .lead { color: var(--ygo-ink); text-shadow: 0 1px 6px #000; }

/* ---- Panels ---- */
body.sitePage .card, body.sitePage .whitebackground, body.sitePage .modal-content, .gameDialog {
    background: var(--ygo-panel); color: var(--ygo-ink);
    border: 1px solid var(--ygo-line); border-radius: var(--ygo-radius);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .03);
}
body.sitePage .card-header, body.sitePage .modal-header, body.sitePage .dashboardtitle, body.sitePage .portrait_top, body.sitePage .portrait_bot {
    background: linear-gradient(90deg, var(--ygo-gold-dark), var(--ygo-gold), var(--ygo-gold-dark));
    color: #1d1405; font-family: 'Cinzel', serif; font-weight: 700; border: none;
}
body.sitePage .modal-title { color: #1d1405; }
body.sitePage .text-muted { color: var(--ygo-ink-soft) !important; }
body.sitePage hr { border-color: var(--ygo-line); opacity: 1; }
body.sitePage .table { --bs-table-bg: transparent; --bs-table-color: var(--ygo-ink); --bs-table-hover-bg: rgba(232, 185, 49, .08); --bs-table-hover-color: var(--ygo-ink); border-color: rgba(255, 255, 255, .08); }
body.sitePage .form-control, body.sitePage .form-select {
    background: rgba(255, 255, 255, .06); color: var(--ygo-ink); border: 1px solid rgba(232, 185, 49, .35);
}
body.sitePage .form-control::placeholder { color: var(--ygo-ink-soft); }
body.sitePage .form-control:focus, body.sitePage .form-select:focus { background: rgba(255, 255, 255, .1); color: var(--ygo-ink); border-color: var(--ygo-gold); box-shadow: 0 0 0 .2rem rgba(232, 185, 49, .25); }
body.sitePage .form-select option { background: var(--ygo-night); }
body.sitePage .portrait { border: 3px solid var(--ygo-gold); border-radius: 8px; }
body.sitePage a { color: var(--ygo-gold-2); }

/* ---- Buttons ---- */
body.sitePage .btn, body.gamePage .btn { font-weight: 700; letter-spacing: .02em; border-radius: 8px; }
body.sitePage .btn-primary, body.gamePage .btn-primary { background: linear-gradient(180deg, #3d7ff0, var(--ygo-blue)); border-color: #1d4fa6; color: #fff; }
body.sitePage .btn-warning, body.gamePage .btn-warning, .btnPlay {
    background: linear-gradient(180deg, var(--ygo-gold-2), var(--ygo-gold)); border-color: var(--ygo-gold-dark); color: #241703 !important;
}
body.sitePage .btn-success, body.gamePage .btn-success { background: linear-gradient(180deg, #33b06a, #1f8a4d); border-color: #15633a; }
body.sitePage .btn-danger, body.gamePage .btn-danger { background: linear-gradient(180deg, #e2463c, var(--ygo-red)); border-color: #8d1f19; }

/* ---- Footer ---- */
body.sitePage .footer { background: rgba(11, 15, 30, .9); border-top: 1px solid var(--ygo-line); }

/* ---- Dialogs (alerts, choices, confirmations) ---- */
.gameDialogBackdrop { background: rgba(4, 6, 14, .72); backdrop-filter: blur(3px); }
.gameDialog { border: 2px solid var(--ygo-gold); }
.gameDialogTitle { font-family: 'Cinzel', serif; color: var(--ygo-gold-2); font-weight: 900; }
.gameDialogText, .gameDialogStep { color: var(--ygo-ink); }
.gameDialog-error { border-color: var(--ygo-red); }
.gameDialog-error .gameDialogTitle { color: #ff8a80; }
.gameDialogOption { background: var(--ygo-panel-2); color: var(--ygo-ink); border: 1px solid var(--ygo-line); border-radius: 8px; }
.gameDialogOption:hover, .gameDialogOption:focus-visible { border-color: var(--ygo-gold); box-shadow: 0 0 14px rgba(232, 185, 49, .4); }
.gameDialogButton { background: var(--ygo-panel-2); color: var(--ygo-ink); border: 1px solid var(--ygo-line); border-radius: 8px; }
.gameDialogPrimary { background: linear-gradient(180deg, var(--ygo-gold-2), var(--ygo-gold)); color: #241703; border-color: var(--ygo-gold-dark); }

/* ---- Duel overlays ---- */
body.gamePage .centeredBoxOverlay { background: transparent; border: none; box-shadow: none; }
body.gamePage .centeredBoxOverlay > .card { background: var(--ygo-panel); color: var(--ygo-ink); border: 2px solid var(--ygo-gold); }
body.gamePage .overlayHeader { font-family: 'Cinzel', serif; color: var(--ygo-gold-2); font-weight: 900; }
.duelResult h1 { font-family: 'Cinzel', serif; color: var(--ygo-gold-2); }
.duelBanner {
    position: fixed; left: 0; right: 0; top: 40%; z-index: 960; text-align: center; pointer-events: none;
    font-family: 'Cinzel', serif; font-size: 3rem; font-weight: 900; color: var(--ygo-gold-2);
    background: linear-gradient(90deg, transparent, rgba(11, 15, 30, .9), transparent);
    text-shadow: 0 3px 0 var(--ygo-gold-dark), 0 0 30px #000; animation: ygoBanner 1.6s ease forwards;
}
@keyframes ygoBanner { from { opacity: 0; transform: scaleX(.6); } 15%, 80% { opacity: 1; transform: none; } to { opacity: 0; } }

/* ---- Home ---- */
.ygoHero { text-align: center; padding: 28px 12px 8px; }
.ygoHero img { width: min(560px, 90vw); filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .9)); }
.ygoHero p { font-size: 1.15rem; margin-top: 6px; text-shadow: 0 1px 8px #000; }
.ygoFeatures li { padding: 3px 0; }
.ygoFeatures li i { color: var(--ygo-gold); margin-right: 6px; }
.ygoStatus { background: rgba(0, 0, 0, .45); border: 1px solid var(--ygo-line); border-radius: var(--ygo-radius); padding: 14px; }
.ygoStatus .bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ygoStatus .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--ygo-gold-dark), var(--ygo-gold-2)); }

@media (prefers-reduced-motion: reduce) {
    .duelBanner, .ygoBrand img { animation: none; transition: none; }
}

/* ---- Deck builder ---- */
.deckBuilder .dbSeg-monster, .deckBuilder .dbDot-monster { background: #c98a3c; }
.deckBuilder .dbSeg-spell, .deckBuilder .dbDot-spell { background: #1f9d8a; }
.deckBuilder .dbSeg-trap, .deckBuilder .dbDot-trap { background: #b4407c; }
.deckBuilder .dbTab { color: var(--ygo-ink); border-color: var(--ygo-line); background: rgba(255, 255, 255, .04); }
.deckBuilder .dbTab.active { background: var(--ygo-gold); color: #241703; }
.deckBuilder .dbDeckGroup { color: var(--ygo-gold-2); font-family: 'Cinzel', serif; }
.deckBuilder .dbRow { color: var(--ygo-ink); }
.dbAttribute { font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; opacity: .65; }
.dbAttribute.active { opacity: 1; box-shadow: 0 0 0 2px var(--ygo-gold); }
.dbAttr-dark { background: #4b2a6b; } .dbAttr-light { background: #c9a227; color: #241703; } .dbAttr-earth { background: #6b4a2a; }
.dbAttr-water { background: #1f5fa8; } .dbAttr-fire { background: #b8321f; } .dbAttr-wind { background: #2f8a4a; }
.dbJoey { display: flex; gap: 6px; align-items: center; white-space: nowrap; color: var(--ygo-ink); }
.dbCard { position: relative; }
.dbNoEffect { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--ygo-red); color: #fff; font: 700 12px/18px sans-serif; text-align: center; }
.fullcardInfo { padding: 8px; color: var(--ygo-ink); background: var(--ygo-panel); font-size: .82rem; }
.fullcardStats { color: var(--ygo-gold-2); font-weight: 700; margin-bottom: 4px; }
.fullcardText { white-space: pre-line; }

/* Deck builder: the old light Pokémon panels, in Yu-Gi-Oh colours */
body.sitePage .deckBuilder .dbTopbar { background: var(--ygo-panel-2); border: 1px solid var(--ygo-line); color: var(--ygo-ink); }
body.sitePage .deckBuilder .dbNameField label, body.sitePage .deckBuilder .dbProgressText, body.sitePage .deckBuilder .dbLegend { color: var(--ygo-ink); }
body.sitePage .deckBuilder .dbProgressBar { background: rgba(255, 255, 255, .1); }
body.sitePage .deckBuilder .dbStatus { color: #ff8a80; }
body.sitePage .deckBuilder .dbStatus.dbReady { color: #7ee2a8; }
body.sitePage .deckBuilder .dbType.dbAttribute { width: auto; height: auto; border-radius: 999px; padding: 4px 10px; opacity: .6; border: 1px solid rgba(255, 255, 255, .3); }
body.sitePage .deckBuilder .dbType.dbAttribute:hover { opacity: .9; }
body.sitePage .deckBuilder .dbType.dbAttribute.active { opacity: 1; box-shadow: 0 0 0 2px var(--ygo-gold); }
body.sitePage .deckBuilder .dbAttr-dark { background: #4b2a6b; } body.sitePage .deckBuilder .dbAttr-light { background: #c9a227; color: #241703; }
body.sitePage .deckBuilder .dbAttr-earth { background: #6b4a2a; } body.sitePage .deckBuilder .dbAttr-water { background: #1f5fa8; }
body.sitePage .deckBuilder .dbAttr-fire { background: #b8321f; } body.sitePage .deckBuilder .dbAttr-wind { background: #2f8a4a; }
body.sitePage .deckBuilder .dbSidebar, body.sitePage .deckBuilder .dbDeckList, body.sitePage .deckBuilder .dbChecklist { color: var(--ygo-ink); }
body.sitePage .deckBuilder .dbOk { color: #7ee2a8; }
body.sitePage .deckBuilder .dbCount { background: var(--ygo-gold); color: #241703; }