/* duel-v2.css — the v2 house style for the live duel board (play.html), as an opt-in skin. ON only while carries .skin-v2. play.html's head script sets it from ?skin=v2 | ?skin=classic or localStorage yg_duel_skin (the Play hub's links carry ?skin=v2), and Settings → Board look switches it live. With the class absent this file matches nothing. Every rule is scoped with :where(html.skin-v2), which adds NO specificity: a rule here beats style.css only because this file loads after it, and every state rule that already outranks the base (equip glow, targets, selections, drop zones, the per-boss arena tints, low LP) still outranks this skin exactly as before. Where style.css uses a heavier selector for the same property (the fitscreen glass panels, the mobile dock) the matching selector is repeated here. Paint only: slot sizes, rows, the 1520×854 design size, the phase-strip lane and every id play.js reads are untouched, so attack arrows, charges, battle math and the guided-demo callouts still land on the same rects. Tokens are private (--dv-*) so nothing style.css reads is repointed. */ :where(html.skin-v2) { --dv-ink: #f4efe6; --dv-ink-2: rgba(244, 239, 230, .76); --dv-muted: rgba(244, 239, 230, .56); --dv-faint: rgba(244, 239, 230, .36); --dv-hair: rgba(255, 255, 255, .09); --dv-hair-2: rgba(255, 255, 255, .16); --dv-glass: rgba(16, 14, 12, .78); --dv-fill: rgba(255, 255, 255, .07); --dv-c: #e7b84a; --dv-hi: #ffe6a3; --dv-gold: linear-gradient(180deg, #fff3cf, #ffd978 45%, #e7b84a); --dv-you: #5aa7ff; --dv-opp: #ff6a5a; --dv-ui: "Segoe UI", system-ui, -apple-system, sans-serif; --dv-display: Cinzel, "Times New Roman", serif; } /* ── top bar ─────────────────────────────────────────────────────────────── */ :where(html.skin-v2) body.fitscreen header { background: rgba(10, 9, 8, .8); border-bottom: 1px solid var(--dv-hair); box-shadow: none; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } :where(html.skin-v2) header::after { display: none; } :where(html.skin-v2) header h1 { font-family: var(--dv-display); font-weight: 700; color: var(--dv-ink); text-shadow: none; } :where(html.skin-v2) header h1 .wm { color: var(--dv-ink); font-weight: 700; text-shadow: none; } :where(html.skin-v2) header h1 .sep { color: var(--dv-faint); } :where(html.skin-v2) header h1 .pg { color: var(--dv-muted); } :where(html.skin-v2) header .meta { color: var(--dv-muted); } /* the header links carry inline gold/red colours, so the colour needs !important */ :where(html.skin-v2) header .hud-link { color: var(--dv-ink-2) !important; text-shadow: none; } :where(html.skin-v2) header #surrenderBtn { color: #ffb0a6 !important; } :where(html.skin-v2) header .hud-link:hover { color: var(--dv-ink) !important; text-shadow: none; } @media (min-width: 561px) { :where(html.skin-v2) header h1 { font-size: 13px; letter-spacing: .3em; } :where(html.skin-v2) header .hud-link { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--dv-fill); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; transition: background .2s, color .2s; } :where(html.skin-v2) header .hud-link:hover { background: var(--dv-hair-2); } } /* ── player plates ───────────────────────────────────────────────────────── */ :where(html.skin-v2) .pinfo { border-radius: 16px; background: var(--dv-glass); border: 1px solid var(--dv-hair); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: box-shadow .5s; } :where(html.skin-v2) .pinfo.p0, :where(html.skin-v2) .pinfo.p1 { border-color: var(--dv-hair); } /* whose turn it is: the plate picks up that side's light (the board already carries .turn-mine / .turn-opp) */ :where(html.skin-v2) .duel-main:has(.board.turn-mine) .pinfo.p0 { box-shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(90, 167, 255, .5); } :where(html.skin-v2) .duel-main:has(.board.turn-opp) .pinfo.p1 { box-shadow: 0 10px 28px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 106, 90, .5); } :where(html.skin-v2) .pinfo.p0 .who, :where(html.skin-v2) .pinfo.p1 .who { color: var(--dv-ink); font-family: var(--dv-ui); letter-spacing: 0; } :where(html.skin-v2) .lpbar { height: 6px; background: rgba(255, 255, 255, .08); border: 0; border-radius: 3px; box-shadow: none; } :where(html.skin-v2) .p0 .lpfill { background: linear-gradient(90deg, var(--dv-you), #d9ecff); box-shadow: none; } :where(html.skin-v2) .p1 .lpfill { background: linear-gradient(90deg, #ff5a4a, #ffb0a6); box-shadow: none; } :where(html.skin-v2) .lpnum, :where(html.skin-v2) .pinfo.p1 .lpnum { font: 800 26px/1.2 var(--dv-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: none; border: 0; border-radius: 8px; box-shadow: none; padding: 2px 0; min-width: 92px; color: var(--dv-ink); text-shadow: none; } /* low LP keeps its red (style.css, !important); the dark inset pulse becomes a calm fade */ :where(html.skin-v2) .lpnum.low { animation-name: dvLpLow; } @keyframes dvLpLow { 0%, 100% { opacity: 1; } 50% { opacity: .62; } } :where(html.skin-v2) body.fxreduced .lpnum.low { animation: none; } @media (prefers-reduced-motion: reduce) { :where(html.skin-v2) .lpnum.low { animation: none; } } :where(html.skin-v2) .counts { color: var(--dv-muted); } /* DUEL TV PLATES (Ray, 2026-09-17: "health bars should be more like the duel tv style"). Same layout as tv-page.css .plate: a ringed coin avatar, the name with hand · deck · GY under it, and the big Life Points number on the right with a short bar beneath it, instead of a bar stretched across the whole strip. Markup is unchanged; the avatar is the plate's own ::before so it sits in the grid's first column. */ :where(html.skin-v2) .pinfo { --pc: var(--dv-you); display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; align-items: center; padding: 6px 14px; } :where(html.skin-v2) .pinfo.p1 { --pc: #ff6a5a; } :where(html.skin-v2) .pinfo::before { content: ""; grid-column: 1; grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%; background: #15130f url("img/ui/eye-coin-64.png") center / 72% no-repeat; box-shadow: 0 0 0 2px var(--pc); transition: box-shadow .4s; } :where(html.skin-v2) .pinfo.p1::before { background-image: url("img/ui/eye-coin-silver-64.png"); } :where(html.skin-v2) .duel-main:has(.board.turn-mine) .pinfo.p0::before, :where(html.skin-v2) .duel-main:has(.board.turn-opp) .pinfo.p1::before { box-shadow: 0 0 0 2px var(--pc), 0 0 16px var(--pc); } :where(html.skin-v2) .pinfo .who { grid-column: 2; grid-row: 1; display: block; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; } :where(html.skin-v2) .pinfo .who::before { content: none; } :where(html.skin-v2) .pinfo .counts { grid-column: 2; grid-row: 2; min-width: 0; text-align: left; font-size: 11.5px; align-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(html.skin-v2) .pinfo.p0 .lpnum, :where(html.skin-v2) .pinfo.p1 .lpnum { grid-column: 3; grid-row: 1; justify-self: end; align-self: end; min-width: 0; padding: 0; font-size: 24px; line-height: 1; } :where(html.skin-v2) .pinfo .lpbar { grid-column: 3; grid-row: 2; justify-self: end; align-self: start; flex: none; width: clamp(96px, 12vw, 170px); height: 5px; } @media (max-width: 720px) { :where(html.skin-v2) .pinfo { grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 9px; padding: 6px 10px; } :where(html.skin-v2) .pinfo::before { width: 30px; height: 30px; } :where(html.skin-v2) .pinfo .who { font-size: 13px; } :where(html.skin-v2) .pinfo.p0 .lpnum, :where(html.skin-v2) .pinfo.p1 .lpnum { font-size: 19px; } :where(html.skin-v2) .pinfo .lpbar { width: 84px; height: 4px; } } /* ── the mat ─────────────────────────────────────────────────────────────── */ :where(html.skin-v2) .board { border: 1px solid var(--dv-hair-2); border-radius: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), inset 0 0 90px rgba(0, 0, 0, .5); } :where(html.skin-v2) .board::before { border-radius: 24px 24px 0 0; } :where(html.skin-v2) .center { background: rgba(8, 7, 6, .52); border-top: 1px solid var(--dv-hair); border-bottom: 1px solid var(--dv-hair); box-shadow: none; } :where(html.skin-v2) .center .turn { color: var(--dv-ink-2); font-family: var(--dv-ui); font-weight: 700; letter-spacing: .03em; text-shadow: none; } :where(html.skin-v2) .center .phase { background: var(--dv-hi); color: #160f03; border: 0; border-radius: 999px; font-family: var(--dv-ui); font-weight: 800; letter-spacing: .03em; } :where(html.skin-v2) .center .chain { color: #ffb0a6; } :where(html.skin-v2) .center .atk { color: var(--dv-hi); } /* zones: soft tiles instead of carved sockets (the occupied inset ring and every state glow stay) */ :where(html.skin-v2) .slot { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); } :where(html.skin-v2) .slot.occupied { background: rgba(0, 0, 0, .2); border-color: rgba(255, 255, 255, .14); } :where(html.skin-v2) .endcap { background: rgba(8, 7, 6, .5); border: 1px solid rgba(255, 255, 255, .09); color: var(--dv-muted); border-radius: 12px; } :where(html.skin-v2) .endcap b { color: var(--dv-ink); font-size: 21px; font-weight: 800; line-height: 1; font-family: var(--dv-ui); font-variant-numeric: tabular-nums; } :where(html.skin-v2) .endcap span { font-size: 9px; font-weight: 700; letter-spacing: .14em; font-family: var(--dv-ui); } :where(html.skin-v2) .slot.hasart .slotart { border-radius: 7px; } :where(html.skin-v2) .slot.hasart .ad { background: rgba(0, 0, 0, .8); border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums; } :where(html.skin-v2) .slot.hasart .pill { background: rgba(0, 0, 0, .7); border-radius: 999px; font-weight: 700; } :where(html.skin-v2) .slot .ad .a { color: var(--dv-ink); } :where(html.skin-v2) .slot .ad .d { color: #9fd0ff; } :where(html.skin-v2) .slot .ad .up { color: #7ee2a8; text-shadow: none; } :where(html.skin-v2) .slot .ad .down { color: #ff8a7a; text-shadow: none; } /* a set card is the real card back (still a back: face-down identity never reaches the client) */ :where(html.skin-v2) .fdcard { background: url("img/ui/card_back_plain.jpg?v=2") center / cover, #140c06; border: 1px solid rgba(0, 0, 0, .55); border-radius: 7px; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); } :where(html.skin-v2) .fdcard .st, :where(html.skin-v2) .slot.facedown .st { font: 800 9px/1 var(--dv-ui); letter-spacing: .12em; color: var(--dv-ink); background: rgba(0, 0, 0, .66); padding: 3px 7px; border-radius: 999px; } /* what you can act on: the same pulse, in the page's light */ :where(html.skin-v2) .slot.clickable, :where(html.skin-v2) .card-mini.clickable { outline-color: var(--dv-hi); animation-name: dvClick; } :where(html.skin-v2) .card-mini.hasart.clickable { outline-color: var(--dv-hi); outline-offset: 2px; } @keyframes dvClick { 0%, 100% { outline-color: rgba(255, 230, 163, .95); } 50% { outline-color: rgba(255, 230, 163, .3); } } :where(html.skin-v2) .slot.clickable:hover, :where(html.skin-v2) .card-mini.clickable:hover { background: rgba(255, 230, 163, .16); color: var(--dv-ink); } :where(html.skin-v2) .slot.targetable:hover { background: rgba(255, 106, 90, .22); } /* dragging from the hand: where it can land in the page's light (tribute targets keep their own colour) */ :where(html.skin-v2) .slot.drop-zone, :where(html.skin-v2) .slot.drop-hot { outline-color: var(--dv-hi); } :where(html.skin-v2) .drag-ghost .drag-hint { background: rgba(16, 14, 12, .95); border-color: rgba(255, 255, 255, .16); color: var(--dv-ink); font-family: var(--dv-ui); } /* ── hands ───────────────────────────────────────────────────────────────── */ :where(html.skin-v2) .card-mini.hasart { border-radius: 7px; } /* the pulse outline follows the card's corners */ :where(html.skin-v2) .card-mini.hasart .cart { border-radius: 7px; box-shadow: 0 10px 22px rgba(0, 0, 0, .55); } :where(html.skin-v2) .card-mini.back { background: var(--dv-fill); border: 1px solid var(--dv-hair); color: var(--dv-faint); border-radius: 999px; } :where(html.skin-v2) .cardback { background: url("img/ui/card_back_plain.jpg?v=2") center / cover, #140c06; border: 1px solid rgba(0, 0, 0, .6); border-radius: 5px; box-shadow: 0 6px 12px rgba(0, 0, 0, .45); } /* ── phase rail ──────────────────────────────────────────────────────────── */ :where(html.skin-v2) .ph { border-radius: 14px; background: rgba(16, 14, 12, .8); border: 1px solid var(--dv-hair); color: var(--dv-faint); font: 800 13px/1 var(--dv-ui); letter-spacing: .03em; box-shadow: 0 6px 14px rgba(0, 0, 0, .4); } :where(html.skin-v2) .ph.cur { background: var(--dv-hi); color: #160f03; border-color: transparent; transform: scale(1.06); box-shadow: 0 0 22px rgba(231, 184, 74, .55); } :where(html.skin-v2) .ph.click { color: var(--dv-ink); border-color: var(--dv-hi); animation: none; box-shadow: 0 0 16px rgba(231, 184, 74, .35); } :where(html.skin-v2) .ph.click:hover { background: var(--dv-hi); color: #160f03; } :where(html.skin-v2) .ph-cap { color: var(--dv-hi); text-shadow: none; font-family: var(--dv-ui); letter-spacing: .1em; } /* ── prompt, log, inspector ──────────────────────────────────────────────── */ :where(html.skin-v2) .prompt, :where(html.skin-v2) body.fitscreen .duel-side .prompt { background: rgba(16, 14, 12, .84); border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } :where(html.skin-v2) body.fitscreen.your-move .duel-side .prompt { border-color: rgba(255, 230, 163, .45); animation-name: dvYourMove; } @keyframes dvYourMove { 0%, 100% { box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 230, 163, .12); } 50% { box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 230, 163, .4), 0 0 26px rgba(231, 184, 74, .3); } } :where(html.skin-v2) .prompt-title { color: var(--dv-ink); font-family: var(--dv-ui); font-weight: 700; letter-spacing: 0; } :where(html.skin-v2) .prompt.waiting-ai .prompt-title::after { content: none; } :where(html.skin-v2) .prompt-timerbar { height: 4px; background: rgba(255, 255, 255, .08); border-radius: 2px; } :where(html.skin-v2) .prompt-timer { background: linear-gradient(90deg, var(--dv-c), var(--dv-hi)); } :where(html.skin-v2) .prompt-chainctx { color: var(--dv-ink); background: rgba(255, 106, 90, .12); border: 1px solid rgba(255, 106, 90, .35); border-radius: 12px; box-shadow: none; } :where(html.skin-v2) .prompt-choices button { background: var(--dv-fill); border: 1px solid rgba(255, 255, 255, .12); color: var(--dv-ink); font-family: var(--dv-ui); border-radius: 14px; font-weight: 600; box-shadow: none; transition: background .15s, color .15s, border-color .15s; } :where(html.skin-v2) .prompt-choices button:hover { background: var(--dv-hi); color: #160f03; border-color: transparent; transform: none; } :where(html.skin-v2) .prompt-choices .multi-confirm { background: var(--dv-gold); color: #1a1204; border: 0; border-radius: 14px; } :where(html.skin-v2) .prompt-choices .multi-confirm:disabled { background: rgba(255, 255, 255, .06); color: var(--dv-faint); } :where(html.skin-v2) .prompt-choices .pickcard { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; color: var(--dv-ink); } :where(html.skin-v2) .prompt-choices .pickcard:hover { background: rgba(255, 230, 163, .1); border-color: var(--dv-hi); color: var(--dv-ink); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); } :where(html.skin-v2) .prompt-choices .pickcard.selected { background: rgba(255, 230, 163, .14); border-color: var(--dv-hi); outline: 2px solid var(--dv-hi); } :where(html.skin-v2) .choice-filter, :where(html.skin-v2) .announce-filter { background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; color: var(--dv-ink); } :where(html.skin-v2) .log, :where(html.skin-v2) body.fitscreen .duel-side .log { background: rgba(10, 9, 8, .62); border: 1px solid var(--dv-hair); border-radius: 16px; font-family: var(--dv-ui); } :where(html.skin-v2) .log .l { color: var(--dv-muted); } :where(html.skin-v2) .log .l.cur { color: var(--dv-ink); } :where(html.skin-v2) .log .l.evt-turn, :where(html.skin-v2) .log .l.evt-win { color: var(--dv-hi); } :where(html.skin-v2) .log .l.evt-chain { color: #d7c2ff; } :where(html.skin-v2) .log .l.evt-damage { color: #ffb0a6; } :where(html.skin-v2) .inspect, :where(html.skin-v2) body.fitscreen .duel-side .inspect { background: rgba(16, 14, 12, .8); border: 1px solid var(--dv-hair); border-radius: 20px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } :where(html.skin-v2) .inspect img.iart { border-radius: 10px; box-shadow: 0 18px 34px rgba(0, 0, 0, .6); } :where(html.skin-v2) .inspect .iname, :where(html.skin-v2) .inspect.spell .iname, :where(html.skin-v2) .inspect.trap .iname { background: none; color: var(--dv-ink); padding: 0; font-family: var(--dv-ui); font-weight: 800; letter-spacing: -.005em; } :where(html.skin-v2) .inspect.spell .iname { color: #9ff2d2; } :where(html.skin-v2) .inspect.trap .iname { color: #f7b6dc; } :where(html.skin-v2) .inspect .istats { color: var(--dv-ink-2); } :where(html.skin-v2) .inspect .imods { color: var(--dv-hi); } :where(html.skin-v2) .inspect .idesc { background: rgba(255, 255, 255, .05); color: var(--dv-ink-2); border-radius: 12px; font-family: var(--dv-ui); padding: 10px 12px; } :where(html.skin-v2) .inspect-empty { color: var(--dv-muted); font-style: normal; } /* the prompt's own border and title already say it is your move: no kicker above the title */ :where(html.skin-v2) body.your-move .prompt-title::before { content: none; } /* ── the practice-deck notice and the guided-demo callouts ──────────────── */ :where(html.skin-v2) .practice-banner { background: rgba(16, 14, 12, .94); border: 1px solid var(--dv-hair-2); color: var(--dv-ink); font-family: var(--dv-ui); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); /* centred on the whole width: left:50% + translate shrank it to half the screen (four lines on a phone) */ left: 8px; right: 8px; transform: none; width: max-content; max-width: min(560px, calc(100vw - 16px)); margin: 0 auto; border-radius: 18px; } :where(html.skin-v2) .practice-banner .pb-ico { color: var(--dv-hi); } :where(html.skin-v2) .practice-banner .pb-x { color: var(--dv-muted); } :where(html.skin-v2) .practice-banner .pb-x:hover { color: var(--dv-ink); background: var(--dv-fill); } :where(html.skin-v2) .tut-card { padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; background: rgba(16, 14, 12, .96); box-shadow: 0 18px 44px rgba(0, 0, 0, .6); color: var(--dv-ink-2); } :where(html.skin-v2) .tut-eye { color: var(--dv-hi); } :where(html.skin-v2) .tut-tag { display: none; } /* the "Guide" kicker; the heading carries the callout */ /* a short screen (phone held sideways): the docked sheet gives the board back its height — one log line, tighter prompt */ @media (max-height: 480px) { :where(html.skin-v2) body.mobile-board #mDock .log { height: 24px; } :where(html.skin-v2) body.mobile-board #mDock .prompt { padding: 8px 12px; } :where(html.skin-v2) body.mobile-board #mDock .prompt-timerbar { margin-bottom: 6px; } :where(html.skin-v2) body.mobile-board #mDock .prompt-title { margin-bottom: 6px; } } :where(html.skin-v2) .tut-h { font: 700 15px/1.25 var(--dv-ui); letter-spacing: 0; color: var(--dv-ink); } :where(html.skin-v2) .tut-b { color: var(--dv-ink-2); } :where(html.skin-v2) .tut-skip { color: var(--dv-muted); } :where(html.skin-v2) .tut-skip:hover, :where(html.skin-v2) .tut-skip:focus-visible { color: var(--dv-ink); } :where(html.skin-v2) .tut-ok { border: 0; border-radius: 999px; padding: 8px 16px; background: var(--dv-gold); color: #1a1204; font: 700 13px/1 var(--dv-ui); letter-spacing: .01em; text-transform: none; } :where(html.skin-v2) .tut-ok:hover, :where(html.skin-v2) .tut-ok:focus-visible { background: var(--dv-gold); filter: brightness(1.06); } :where(html.skin-v2) .tut-nub { background: rgba(16, 14, 12, .96); border-color: rgba(255, 255, 255, .14); } :where(html.skin-v2) .tut-target { outline-color: var(--dv-hi) !important; } /* ── phone: the docked prompt sheet + its LP row ─────────────────────────── */ :where(html.skin-v2) body.mobile-board #mDock { background: rgba(12, 11, 10, .92); border-top: 1px solid var(--dv-hair-2); box-shadow: 0 -18px 40px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } :where(html.skin-v2) body.mobile-board #mHud .mh-side i { color: var(--dv-muted); letter-spacing: .04em; } :where(html.skin-v2) body.mobile-board #mHud .mh-side b { font-family: var(--dv-ui); font-size: 17px; letter-spacing: -.01em; color: var(--dv-ink); text-shadow: none; } :where(html.skin-v2) body.mobile-board #mHud .mh-opp b { color: #ffb0a6; text-shadow: none; } :where(html.skin-v2) body.mobile-board #mHud .mh-side b.low { color: #ff6b6b; } :where(html.skin-v2) body.mobile-board #mHud .mh-mid { color: #160f03; background: var(--dv-hi); border: 0; } :where(html.skin-v2) body.mobile-board #mHud.turn-opp .mh-mid { color: #fff; background: rgba(255, 106, 90, .85); } :where(html.skin-v2) #rotateHint { background: rgba(16, 14, 12, .95); border: 1px solid var(--dv-hair-2); color: var(--dv-ink); font-family: var(--dv-ui); } /* ── moments over the board ──────────────────────────────────────────────── */ :where(html.skin-v2) .pb { font-family: var(--dv-display); font-size: clamp(28px, 5vw, 56px); letter-spacing: .08em; padding: 14px clamp(24px, 8vw, 90px); color: var(--dv-hi); background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .74) 20%, rgba(0, 0, 0, .74) 80%, transparent); text-shadow: 0 0 30px rgba(231, 184, 74, .55); } :where(html.skin-v2) .pb.enemy { color: #ffb0a6; text-shadow: 0 0 30px rgba(255, 90, 70, .55); } :where(html.skin-v2) .bm { background: rgba(14, 12, 10, .95); border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } :where(html.skin-v2) .bm-side img { border: 0; border-radius: 8px; } :where(html.skin-v2) .bm-side.bm-dead img { box-shadow: 0 0 0 2px var(--dv-opp), 0 6px 18px rgba(0, 0, 0, .6); } :where(html.skin-v2) .bm-skull { display: none; } /* the greyed art + the verdict line say it */ :where(html.skin-v2) .bm-nm { color: var(--dv-ink); font-family: var(--dv-ui); } :where(html.skin-v2) .bm-stat { color: var(--dv-hi); font-variant-numeric: tabular-nums; } :where(html.skin-v2) .bm-vs { color: var(--dv-hi); font-family: var(--dv-display); text-shadow: 0 0 18px rgba(231, 184, 74, .6); } :where(html.skin-v2) .bm-direct { font-size: 0; line-height: 0; } :where(html.skin-v2) .bm-direct::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, #ffb0a6 0 16%, transparent 17% 33%, var(--dv-opp) 34% 44%, transparent 45% 60%, rgba(255, 106, 90, .5) 61% 69%, transparent 70%); } :where(html.skin-v2) .bm-directside .bm-nm { color: #ffb0a6; } :where(html.skin-v2) .bm-verdict { font-family: var(--dv-ui); color: var(--dv-ink-2); border-top-color: var(--dv-hair); } :where(html.skin-v2) .bm-verdict b { color: var(--dv-ink); } /* the menu that opens on a card you press (Summon · Set · Activate · Attack) */ :where(html.skin-v2) #cardMenu { padding: 6px; border-radius: 16px; background: rgba(16, 14, 12, .95); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 50px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } :where(html.skin-v2) #cardMenu .cm-title { color: var(--dv-ink); font-family: var(--dv-ui); letter-spacing: .01em; border-bottom-color: var(--dv-hair); } :where(html.skin-v2) #cardMenu .cm-opt { background: var(--dv-fill); border-radius: 12px; color: var(--dv-ink); font-weight: 600; } :where(html.skin-v2) #cardMenu .cm-opt:hover { background: var(--dv-hi); border-color: transparent; color: #160f03; } :where(html.skin-v2) .cl-card { border-radius: 10px; } :where(html.skin-v2) .cl-num { background: var(--dv-hi); border-color: #140e04; font-family: var(--dv-ui); } :where(html.skin-v2) .cl-name { color: var(--dv-ink); font-family: var(--dv-ui); } :where(html.skin-v2) .toast { background: rgba(16, 14, 12, .95); border: 1px solid var(--dv-hair); border-left-width: 4px; border-radius: 14px; color: var(--dv-ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* ── the end ceremony ────────────────────────────────────────────────────── */ :where(html.skin-v2) #endscreen { background: radial-gradient(90% 70% at 50% 40%, rgba(20, 16, 10, .86), rgba(4, 3, 2, .97)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); gap: 12px; padding: 24px 16px; } :where(html.skin-v2) #endscreen .end-crest { display: none; } /* the title carries the verdict */ :where(html.skin-v2) #endscreen h2 { font: 900 clamp(36px, 11vw, 104px)/.95 var(--dv-display); letter-spacing: .02em; margin: 0; text-align: center; } :where(html.skin-v2) #endscreen.lose h2 { background: linear-gradient(180deg, #e8e2d6, #9a9284 60%, #5d574c); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: none; } :where(html.skin-v2) #endscreen .sub { background: none; border: 0; padding: 0; color: var(--dv-ink-2); letter-spacing: .01em; text-align: center; max-width: min(560px, 92vw); } :where(html.skin-v2) #endscreen .end-prog { width: min(560px, 92vw); margin-top: 0; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); color: var(--dv-ink); font-size: 15px; text-align: left; } :where(html.skin-v2) #endscreen .end-prog b { color: var(--dv-hi); } :where(html.skin-v2) #endscreen .end-pool { width: min(560px, 92vw); border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--dv-hair); color: var(--dv-ink-2); text-align: left; } :where(html.skin-v2) #endscreen .end-pool b { color: var(--dv-ink); } :where(html.skin-v2) #endscreen .spoils-title { font-family: var(--dv-ui); font-weight: 600; letter-spacing: .01em; color: var(--dv-ink); max-width: min(560px, 92vw); text-align: center; line-height: 1.45; } :where(html.skin-v2) #endscreen .spoils-title.dim { color: var(--dv-muted); font-style: normal; } :where(html.skin-v2) #endscreen .end-btns { gap: 8px; } :where(html.skin-v2) #endscreen .end-btns button { margin-top: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 650 15px/1 var(--dv-ui); letter-spacing: .01em; } :where(html.skin-v2) #endscreen .end-btns button.primary { min-height: 54px; padding: 0 32px; font-size: 16px; font-weight: 800; color: #1a1204; background: var(--dv-gold); border: 0; box-shadow: 0 14px 36px rgba(231, 184, 74, .4), inset 0 1px 0 #fff; } :where(html.skin-v2) #endscreen .end-btns button:not(.primary):not(.ghost) { background: var(--dv-fill); color: var(--dv-ink); border: 1px solid rgba(255, 255, 255, .12); box-shadow: none; } :where(html.skin-v2) #endscreen .end-btns button:not(.primary):not(.ghost):hover { background: rgba(255, 255, 255, .14); box-shadow: none; transform: translateY(-1px); } :where(html.skin-v2) #endscreen .end-btns button.ghost { min-height: 40px; padding: 0 12px; background: none; border: 0; color: var(--dv-muted); font-size: 14px; opacity: 1; } :where(html.skin-v2) #endscreen .end-btns button.ghost:hover { color: var(--dv-ink); background: var(--dv-fill); text-decoration: none; } /* a short screen (phone held sideways) scrolls the ceremony instead of clipping its top and bottom */ @media (max-height: 560px) { :where(html.skin-v2) #endscreen { overflow-y: auto; justify-content: flex-start; } :where(html.skin-v2) #endscreen h2 { font-size: clamp(34px, 9vh, 56px); } } /* ── menus that open over the duel ───────────────────────────────────────── */ :where(html.skin-v2) .select-overlay { background: radial-gradient(90% 70% at 50% 30%, rgba(24, 20, 14, .97), rgba(5, 4, 3, .99)); } :where(html.skin-v2) .select-box h2 { color: var(--dv-ink); text-shadow: none; } :where(html.skin-v2) .overlay-back { color: var(--dv-ink-2); border-color: var(--dv-hair-2); border-radius: 999px; } :where(html.skin-v2) .overlay-back:hover { color: var(--dv-ink); border-color: var(--dv-hi); } :where(html.skin-v2) .boss-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); border-radius: 18px; } :where(html.skin-v2) .help-box, :where(html.skin-v2) .sg-box { background: linear-gradient(180deg, rgba(38, 34, 30, .97), rgba(16, 14, 12, .98)); border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; } :where(html.skin-v2) .sg-box h3 { color: var(--dv-ink); } :where(html.skin-v2) .sg-row { border-bottom-color: var(--dv-hair); color: var(--dv-ink-2); } :where(html.skin-v2) .sg-close { background: var(--dv-gold); color: #1a1204; } :where(html.skin-v2) #settingsGear { background: rgba(16, 14, 12, .85); border: 1px solid var(--dv-hair-2); color: var(--dv-ink-2); } :where(html.skin-v2) #settingsGear:hover { border-color: var(--dv-hi); color: var(--dv-ink); } /* ── between games: the throw, ready-up, first or second, siding, the Stakes pick (docs/BETWEEN_GAMES_PLAN.md) ── */ :where(html.skin-v2) .rps-overlay { background: radial-gradient(90% 70% at 50% 35%, rgba(60, 44, 14, .35), rgba(4, 4, 4, .9) 70%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } :where(html.skin-v2) .rps-overlay .rps-card { width: min(560px, 94vw); padding: clamp(20px, 3vw, 30px); border-radius: 30px; background: linear-gradient(180deg, rgba(40, 35, 28, .95), rgba(16, 14, 12, .97)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 80px rgba(231, 184, 74, .12); } :where(html.skin-v2) .rps-overlay .rps-title { margin: 0 0 6px; font: 900 clamp(26px, 5vw, 40px)/1.05 var(--dv-display); letter-spacing: .02em; color: var(--dv-hi); text-shadow: none; } :where(html.skin-v2) .rps-overlay.rps-lost .rps-title { color: #ffd2c8; } :where(html.skin-v2) .rps-overlay .rps-sub { font: 500 15px/1.5 var(--dv-ui); letter-spacing: 0; color: var(--dv-ink-2); } :where(html.skin-v2) .rps-overlay .rr-track { stroke: rgba(255, 255, 255, .1); } :where(html.skin-v2) .rps-overlay .rr-prog { stroke: var(--dv-hi); } :where(html.skin-v2) .rps-overlay .rps-secs { font-family: var(--dv-ui); color: var(--dv-ink); } :where(html.skin-v2) .rps-overlay .rps-hands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } :where(html.skin-v2) .rps-overlay .rps-hands.rps-choose, :where(html.skin-v2) .rps-overlay .rps-hands.rps-ready { display: flex; } :where(html.skin-v2) .rps-overlay .rps-hand { gap: 8px; padding: 14px 6px 12px; border-radius: 20px; font-size: 44px; color: var(--dv-hi); background: var(--dv-fill); border: 1px solid var(--dv-hair-2); box-shadow: none; } :where(html.skin-v2) .rps-overlay .rps-hand:hover:not([disabled]) { transform: translateY(-3px); border-color: var(--dv-hi); box-shadow: 0 12px 28px rgba(0, 0, 0, .4); } :where(html.skin-v2) .rps-overlay .rps-hand.chosen { background: rgba(231, 184, 74, .22); border-color: var(--dv-hi); box-shadow: inset 0 0 0 1px var(--dv-hi); } :where(html.skin-v2) .rps-overlay .rps-hand .rps-handlbl { font: 650 13px/1 var(--dv-ui); letter-spacing: .01em; color: var(--dv-ink); } :where(html.skin-v2) .rps-overlay .rps-pick { display: grid; gap: 4px; justify-items: center; min-height: 52px; padding: 12px 24px; border: 0; border-radius: 999px; font: 700 16px/1.2 var(--dv-ui); letter-spacing: .01em; color: #1a1204; background: var(--dv-gold); box-shadow: 0 12px 30px rgba(231, 184, 74, .28); } :where(html.skin-v2) .rps-overlay .rps-choose .rps-pick { flex: 1 1 200px; justify-items: start; padding: 14px 18px; border-radius: 22px; text-align: left; color: var(--dv-ink); background: var(--dv-fill); border: 1px solid var(--dv-hair-2); box-shadow: none; } :where(html.skin-v2) .rps-overlay .rps-choose .rps-pick:hover:not([disabled]) { border-color: var(--dv-hi); background: rgba(255, 255, 255, .11); } :where(html.skin-v2) .rps-overlay .rps-choose .rps-pick.chosen { border-color: var(--dv-hi); background: rgba(231, 184, 74, .22); } :where(html.skin-v2) .rps-overlay .rps-pick small { display: block; margin: 0; font: 500 12.5px/1.4 var(--dv-ui); color: var(--dv-ink-2); opacity: 1; } :where(html.skin-v2) .rps-overlay .rps-pick[disabled] { opacity: .7; } :where(html.skin-v2) .rps-overlay .rps-status { font: 500 13.5px/1.5 var(--dv-ui); letter-spacing: 0; color: var(--dv-muted); } :where(html.skin-v2) .rps-overlay .rps-status b { color: var(--dv-ink); } :where(html.skin-v2) .rps-overlay .rps-duel { gap: 22px; } :where(html.skin-v2) .rps-overlay .rps-big { font-size: 72px; color: var(--dv-hi); } :where(html.skin-v2) .rps-overlay .rps-theirs { color: #ff8a7a; } :where(html.skin-v2) .rps-overlay .rps-vs { font: 600 14px var(--dv-ui); letter-spacing: .04em; color: var(--dv-faint); } :where(html.skin-v2) .rps-overlay .rps-names { font: 500 13px var(--dv-ui); color: var(--dv-muted); } :where(html.skin-v2) .rps-overlay .rps-names b { color: var(--dv-ink); } :where(html.skin-v2) .rps-overlay .rps-verdict { font: 900 clamp(22px, 4vw, 30px)/1.1 var(--dv-display); letter-spacing: .02em; text-shadow: none; } :where(html.skin-v2) .rps-overlay .rps-verdict.rps-won { color: #7ee2a8; } :where(html.skin-v2) .rps-overlay .rps-verdict.rps-lost { color: #ff8a7a; } :where(html.skin-v2) .rps-overlay .rps-verdict.rps-tie { color: var(--dv-hi); } :where(html.skin-v2) .siding-overlay { background: rgba(8, 7, 6, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } :where(html.skin-v2) .sd-chrome { background: rgba(16, 14, 12, .9); border-bottom: 1px solid var(--dv-hair); box-shadow: none; } :where(html.skin-v2) .sd-title { font: 900 clamp(20px, 3vw, 28px)/1.1 var(--dv-display); letter-spacing: .02em; color: var(--dv-hi); } :where(html.skin-v2) .sd-clock { font-family: var(--dv-ui); color: var(--dv-ink); } :where(html.skin-v2) .sd-clock.hot { color: #ff8a7a; text-shadow: none; } :where(html.skin-v2) .sd-score, :where(html.skin-v2) .sd-sub { font-family: var(--dv-ui); letter-spacing: 0; color: var(--dv-ink-2); } :where(html.skin-v2) .sd-meter { background: rgba(255, 255, 255, .08); border: 0; box-shadow: none; } :where(html.skin-v2) .sd-fill { background: var(--dv-gold); box-shadow: none; } :where(html.skin-v2) .sd-counts { font-family: var(--dv-ui); color: var(--dv-ink); } :where(html.skin-v2) .sd-opp { font-family: var(--dv-ui); color: var(--dv-muted); } :where(html.skin-v2) .sd-opp.ready { color: #7ee2a8; } :where(html.skin-v2) .sd-sec h3 { font: 700 12.5px var(--dv-ui); letter-spacing: .06em; color: var(--dv-ink-2); } :where(html.skin-v2) .sd-sec h3 .sd-n { color: var(--dv-muted); } :where(html.skin-v2) .sd-sec.sd-hl { border-color: rgba(255, 230, 163, .28); border-radius: 20px; background: rgba(231, 184, 74, .06); box-shadow: none; } :where(html.skin-v2) .sd-sec.sd-hl h3 { color: var(--dv-hi); } :where(html.skin-v2) .sd-chip { border-radius: 8px; border: 1px solid var(--dv-hair); background: rgba(255, 255, 255, .04); } :where(html.skin-v2) .sd-chip .sd-nm { font-family: var(--dv-ui); color: var(--dv-ink-2); } :where(html.skin-v2) .sd-chip:hover { border-color: var(--dv-hi); } :where(html.skin-v2) .sd-chip.sel { border-color: var(--dv-hi); box-shadow: 0 0 0 2px var(--dv-hi), 0 0 18px rgba(231, 184, 74, .35); } :where(html.skin-v2) .sd-chip .sd-info { background: rgba(0, 0, 0, .7); border-color: var(--dv-hair-2); color: var(--dv-ink); } :where(html.skin-v2) .sd-empty { font-family: var(--dv-ui); font-style: normal; color: var(--dv-muted); } :where(html.skin-v2) .sd-foot { background: rgba(16, 14, 12, .94); border-top: 1px solid var(--dv-hair); box-shadow: none; } :where(html.skin-v2) .sd-status { font-family: var(--dv-ui); color: var(--dv-muted); } :where(html.skin-v2) .sd-status.warn { color: #ffb0a6; } :where(html.skin-v2) .sd-status.ok { color: #7ee2a8; } :where(html.skin-v2) .sd-lock { min-height: 50px; padding: 0 28px; border: 0; border-radius: 999px; font: 700 16px/1 var(--dv-ui); letter-spacing: .01em; color: #1a1204; background: var(--dv-gold); box-shadow: 0 12px 30px rgba(231, 184, 74, .28); } :where(html.skin-v2) .ante-overlay { background: radial-gradient(90% 70% at 50% 30%, rgba(60, 44, 14, .35), rgba(4, 4, 4, .94) 70%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } :where(html.skin-v2) .ante-overlay .ao-title { font: 900 clamp(28px, 5vw, 44px)/1.05 var(--dv-display); letter-spacing: .02em; color: var(--dv-hi); } :where(html.skin-v2) .ante-overlay .ao-title.lose { color: #ffd2c8; } :where(html.skin-v2) .ante-overlay .ao-title.win { color: #7ee2a8; } :where(html.skin-v2) .ante-overlay .ao-title b { color: var(--dv-ink); } :where(html.skin-v2) .ante-overlay .ao-sub { font: 500 15px/1.5 var(--dv-ui); color: var(--dv-ink-2); } :where(html.skin-v2) .ante-overlay .ao-sub b { color: var(--dv-ink); } :where(html.skin-v2) .ante-overlay .ao-timer { font: 600 13.5px var(--dv-ui); letter-spacing: .01em; color: var(--dv-muted); } :where(html.skin-v2) .ante-overlay .ao-timer b { color: var(--dv-ink); } :where(html.skin-v2) .ante-overlay .ao-inner.waiting, :where(html.skin-v2) .ante-overlay .ao-inner.result { padding: clamp(20px, 3vw, 30px); border-radius: 30px; background: linear-gradient(180deg, rgba(40, 35, 28, .95), rgba(16, 14, 12, .97)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); } :where(html.skin-v2) .ante-pick-card { border-radius: 18px; border: 1px solid var(--dv-hair); background: linear-gradient(180deg, rgba(40, 35, 28, .9), rgba(16, 14, 12, .95)); } :where(html.skin-v2) .ante-pick-card:hover { border-color: var(--dv-hi); } :where(html.skin-v2) .ac-name { font-family: var(--dv-ui); color: var(--dv-ink); } :where(html.skin-v2) .ac-stats { font-family: var(--dv-ui); color: var(--dv-hi); } :where(html.skin-v2) .ac-desc { font-family: var(--dv-ui); color: var(--dv-ink-2); } :where(html.skin-v2) .ac-desc.muted { font-style: normal; color: var(--dv-muted); } :where(html.skin-v2) .ac-claim, :where(html.skin-v2) .ao-actions button { min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; font: 700 15px/1 var(--dv-ui); letter-spacing: .01em; color: var(--dv-ink); background: var(--dv-fill); box-shadow: none; } :where(html.skin-v2) .ac-claim.primary, :where(html.skin-v2) .ao-actions button.primary { color: #1a1204; background: var(--dv-gold); box-shadow: 0 10px 26px rgba(231, 184, 74, .25); } @media (max-width: 560px) { :where(html.skin-v2) .rps-overlay .rps-card { padding: 18px 16px; border-radius: 24px; } :where(html.skin-v2) .rps-overlay .rps-hand { padding: 10px 4px; font-size: 36px; } :where(html.skin-v2) .rps-overlay .rps-big { font-size: 56px; } } @media (orientation: landscape) and (max-height: 500px) { :where(html.skin-v2) .rps-overlay { align-items: flex-start; overflow-y: auto; padding: 10px; } :where(html.skin-v2) .rps-overlay .rps-card { padding: 14px 18px; } :where(html.skin-v2) .rps-overlay .rps-title { font-size: 24px; } :where(html.skin-v2) .rps-overlay .rps-ringwrap, :where(html.skin-v2) .rps-overlay .rps-ring { width: 72px; height: 72px; margin-top: 8px; } :where(html.skin-v2) .rps-overlay .rps-secs { font-size: 20px; } :where(html.skin-v2) .rps-overlay .rps-hand { padding: 8px 4px; font-size: 30px; } :where(html.skin-v2) .rps-overlay .rps-big { font-size: 44px; } } /* the throw against the computer and the Stakes warning sit inside the battle menu (#bossList .rps), not an overlay */ :where(html.skin-v2) .rps .rps-title { font: 900 clamp(24px, 4vw, 34px)/1.1 var(--dv-display); letter-spacing: .02em; color: var(--dv-hi); text-shadow: none; } :where(html.skin-v2) .rps .rps-sub { font: 500 15px/1.5 var(--dv-ui); letter-spacing: 0; color: var(--dv-ink-2); } :where(html.skin-v2) .rps .rps-hand { padding: 14px 22px; border-radius: 20px; font-size: 44px; color: var(--dv-hi); background: var(--dv-fill); border: 1px solid var(--dv-hair-2); box-shadow: none; } :where(html.skin-v2) .rps .rps-hand:hover { border-color: var(--dv-hi); box-shadow: 0 12px 28px rgba(0, 0, 0, .4); } :where(html.skin-v2) .rps .rps-big { color: var(--dv-hi); } :where(html.skin-v2) .rps .rps-pick { display: inline-grid; gap: 4px; justify-items: start; max-width: 280px; padding: 14px 18px; border-radius: 22px; text-align: left; font: 700 16px/1.2 var(--dv-ui); letter-spacing: .01em; color: var(--dv-ink); background: var(--dv-fill); border: 1px solid var(--dv-hair-2); box-shadow: none; } :where(html.skin-v2) .rps .rps-pick:hover { border-color: var(--dv-hi); background: rgba(255, 255, 255, .11); } :where(html.skin-v2) .rps .rps-pick small { display: block; margin: 0; font: 500 12.5px/1.4 var(--dv-ui); color: var(--dv-ink-2); opacity: 1; } /* opponent dropped (docs/OPPONENT_DROP_PLAN.md): the countdown bar in the house glass; position and rules live in style.css */ :where(html.skin-v2) #dropBar { padding: 10px 18px; border-radius: 18px; font: 600 14px/1.45 var(--dv-ui); letter-spacing: 0; color: var(--dv-ink); background: rgba(16, 14, 12, .92); border: 1px solid var(--dv-hair-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* moves on the cards (docs/DUEL_MOVES_ON_CARDS_PLAN.md): paint for the story panel, the move counts and the prompt's short list; the layout lives in style.css under :where(html.moves-cards) */ :where(html.skin-v2) .mv-n { background: var(--dv-gold); font-family: var(--dv-ui); } :where(html.skin-v2) .prompt-sub { color: var(--dv-muted); font-family: var(--dv-ui); } :where(html.skin-v2) .prompt-other { color: var(--dv-faint); font-family: var(--dv-ui); } :where(html.skin-v2) .prompt-choices .pass-move { border-color: rgba(255, 255, 255, .2); } :where(html.skin-v2) .prompt-choices .phase-move { background: rgba(255, 230, 163, .1); border-color: rgba(255, 230, 163, .32); } :where(html.skin-v2) #cardMenu .cm-opt small { color: var(--dv-ink-2); opacity: 1; font-family: var(--dv-ui); } :where(html.skin-v2) #cardMenu .cm-opt:hover small { color: #3a2a08; } :where(html.skin-v2) .story { background: rgba(16, 14, 12, .8); border: 1px solid var(--dv-hair); border-radius: 18px; color: var(--dv-ink); font-family: var(--dv-ui); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } :where(html.skin-v2) .st-now b { color: var(--dv-ink); font-size: 14px; } :where(html.skin-v2) .st-now.theirs b { color: #ffb0a6; } :where(html.skin-v2) .st-now span, :where(html.skin-v2) .st-why, :where(html.skin-v2) .st-empty, :where(html.skin-v2) .st-row { color: var(--dv-muted); } :where(html.skin-v2) .st-card { background: rgba(255, 255, 255, .05); border-left-color: var(--dv-hi); border-radius: 14px; } :where(html.skin-v2) .st-card.theirs { border-left-color: var(--dv-opp); } :where(html.skin-v2) .st-art { border-radius: 6px; } :where(html.skin-v2) .st-kind { background: rgba(255, 230, 163, .14); color: var(--dv-hi); } :where(html.skin-v2) .theirs .st-kind { background: rgba(255, 106, 90, .16); color: #ffb0a6; } :where(html.skin-v2) .st-res li { color: #ffd9a8; } :where(html.skin-v2) .st-head { color: var(--dv-faint); } :where(html.skin-v2) .st-row[data-code]:hover { color: var(--dv-ink); } :where(html.skin-v2) .st-logbtn { color: var(--dv-hi); } :where(html.skin-v2) .board .slot.just-acted:not(.clickable):not(.targetable):not(.selected) { outline-color: rgba(255, 255, 255, .7); } :where(html.skin-v2) .st-side { color: var(--dv-hi); font-family: var(--dv-ui); } :where(html.skin-v2) .theirs .st-side { color: #ffb0a6; } :where(html.skin-v2) .log .log-card:hover { color: var(--dv-hi); } :where(html.skin-v2) .resp-chip { background: var(--dv-gold); font-family: var(--dv-ui); } /* ── the screens drawn outside the board ─────────────────────────────────────────────────────────────────────── Opponent picker, Gauntlet ladder, lobbies, the queue, the Stakes warning, the deck gate, Wager, Survival, the ranked rules, How to duel, character decks, the Sealed builder and the classic battle menu (demo / ?menu=classic; signed-in players go to play-hub.html). play.js still writes the old gold as inline colours on some of these, so the handful of rules that must beat an inline style carry !important; everything else is the same zero-specificity paint as above. Ids, sizes that play.js reads and every handler are untouched. */ :where(html.skin-v2) .select-box { padding: clamp(18px, 3vw, 36px) clamp(10px, 3vw, 40px); max-width: 1240px; } :where(html.skin-v2) .select-box h2 { margin: 0 0 20px; font: 900 clamp(26px, 3.2vw, 40px)/1.05 var(--dv-display); letter-spacing: .02em; color: var(--dv-hi); } /* a screen with its own heading hides the generic one above it ("Choose your battle" over "Deck required") */ :where(html.skin-v2) .select-box:has(> #bossList > .rps .rps-title) > h2 { display: none; } :where(html.skin-v2) .boss-list { gap: 14px; } :where(html.skin-v2) .overlay-back { margin-top: 26px; padding: 10px 18px; font: 600 13.5px/1 var(--dv-ui); letter-spacing: .01em; background: var(--dv-fill); border: 1px solid var(--dv-hair-2); } /* one card per screen: the between-games card, placed in the menu */ :where(html.skin-v2) #bossList > .rps { box-sizing: border-box; width: min(560px, 100%); margin: 0 auto; padding: clamp(22px, 3vw, 32px) clamp(18px, 3vw, 30px); border-radius: 30px; background: linear-gradient(180deg, rgba(40, 35, 28, .95), rgba(16, 14, 12, .97)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 100px rgba(0, 0, 0, .55); animation: dvCardIn .5s cubic-bezier(.16, 1, .3, 1) both; } @keyframes dvCardIn { from { transform: translateY(12px) scale(.985); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { :where(html.skin-v2) #bossList > .rps { animation: none; } } :where(html.skin-v2) body.fxreduced #bossList > .rps { animation: none; } :where(html.skin-v2) #bossList > .rps .rps-title { margin: 0 0 10px; text-wrap: balance; } :where(html.skin-v2) #bossList > .rps .rps-sub { text-wrap: pretty; } :where(html.skin-v2) #bossList > .rps .rps-sub b { color: var(--dv-ink); } :where(html.skin-v2) #bossList > .rps .rps-btns { gap: 10px; margin-top: 24px !important; } /* actions: glass pills; the first is the one the screen is for, unless it cancels, goes back or leaves */ :where(html.skin-v2) #bossList .rps-btns > .rps-pick:not(:has(small)) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: none; min-height: 48px; padding: 0 22px; border-radius: 999px; text-align: center; text-decoration: none; font: 650 15px/1.1 var(--dv-ui); letter-spacing: .01em; color: var(--dv-ink) !important; background: var(--dv-fill) !important; border: 1px solid var(--dv-hair-2) !important; box-shadow: none; transition: background .15s, border-color .15s, transform .15s; } :where(html.skin-v2) #bossList .rps-btns > .rps-pick:not(:has(small)):hover { filter: none; transform: translateY(-1px); background: rgba(255, 255, 255, .12) !important; border-color: var(--dv-hi) !important; } :where(html.skin-v2) #bossList .rps-btns > .rps-pick:not(:has(small)):first-child:not([id$="Cancel"]):not([id$="No"]):not([id*="Back"]):not(#rqLeaveQ), :where(html.skin-v2) #bossList .rps-btns > .rps-pick:not(:has(small)):first-child:not([id$="Cancel"]):not([id$="No"]):not([id*="Back"]):not(#rqLeaveQ):hover { color: #1a1204 !important; background: var(--dv-gold) !important; border-color: transparent !important; font-weight: 800; box-shadow: 0 12px 30px rgba(231, 184, 74, .28); } :where(html.skin-v2) #bossList .rps-btns > .rps-pick:focus-visible { outline: 2px solid var(--dv-hi); outline-offset: 3px; } :where(html.skin-v2) #bossList .rps-btns > #svQuit, :where(html.skin-v2) #bossList .rps-btns > #rqLeaveQ { color: #ffb0a6 !important; } :where(html.skin-v2) #joinLink { box-sizing: border-box; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--dv-hair-2); outline: 0; background: rgba(0, 0, 0, .35); color: var(--dv-ink); font: 600 14px/1 var(--dv-ui); } :where(html.skin-v2) #joinLink:focus { border-color: var(--dv-hi); } /* the old inline golds in play.js markup, mapped onto the page's inks */ :where(html.skin-v2) :is(#bossList, #endscreen) :is([style*="#a9966a"], [style*="#9a8552"], [style*="#8f7a55"], [style*="#cdb98a"]) { color: var(--dv-muted) !important; } :where(html.skin-v2) :is(#bossList, #endscreen) :is(b[style*="var(--gold)"], [style*="#c8a24a"], [style*="#e7c66b"], [style*="#ffcf6b"]) { color: var(--dv-hi) !important; } :where(html.skin-v2) #bossList :is([style*="#ff9d6c"], [style*="#e08a7a"], [style*="#e0a94a"]) { color: #ffb0a6 !important; } :where(html.skin-v2) #bossList [style*="#9ad"] { color: #9fd0ff !important; } /* the deck switcher (battle menu, Wager): mountDeckSwitch writes its select and links with inline gold */ :where(html.skin-v2) #deckPick { background: rgba(0, 0, 0, .35) !important; color: var(--dv-ink) !important; border: 1px solid var(--dv-hair-2) !important; border-radius: 999px !important; padding: 7px 14px !important; font: 600 13px var(--dv-ui) !important; } :where(html.skin-v2) #deckPick:focus-visible { outline: 2px solid var(--dv-hi); outline-offset: 2px; } :where(html.skin-v2) #bossList a[href*="deck.html"], :where(html.skin-v2) #bossList a[href*="profile.html#deck"] { color: var(--dv-hi) !important; font-family: var(--dv-ui); } @media (max-width: 560px) { :where(html.skin-v2) .diff-lbl { flex: 0 0 100%; margin: 0 0 2px; } :where(html.skin-v2) .diff-opt { padding: 0 13px; } } /* opponent picker (and the Gauntlet ladder, which reuses its tiles) */ :where(html.skin-v2) .diffbar { gap: 6px; margin-bottom: 14px; } :where(html.skin-v2) .diff-lbl { margin-right: 6px; font: 600 12.5px var(--dv-ui); letter-spacing: .02em; color: var(--dv-muted); } :where(html.skin-v2) .diff-opt { min-height: 36px; padding: 0 16px; border-radius: 999px; font: 600 13px var(--dv-ui); color: var(--dv-ink-2); background: var(--dv-fill); border: 1px solid var(--dv-hair-2); } :where(html.skin-v2) .diff-opt:hover { color: var(--dv-ink); border-color: var(--dv-hi); } :where(html.skin-v2) .diff-opt.on { color: #160f03; background: var(--dv-hi); border-color: transparent; font-weight: 800; } :where(html.skin-v2) .boss-card { width: 184px; padding: 10px 10px 16px; border-radius: 22px; border: 1px solid var(--dv-hair); background: linear-gradient(180deg, rgba(40, 35, 28, .9), rgba(16, 14, 12, .95)); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); } :where(html.skin-v2) .boss-card:hover { transform: translateY(-4px); border-color: rgba(255, 230, 163, .55); background: linear-gradient(180deg, rgba(52, 45, 35, .95), rgba(20, 17, 14, .97)); box-shadow: 0 22px 44px rgba(0, 0, 0, .5); } :where(html.skin-v2) .boss-card:focus-visible { outline: 2px solid var(--dv-hi); outline-offset: 3px; } :where(html.skin-v2) .boss-card .bp { height: 168px; margin-bottom: 12px; border: 0; border-radius: 14px; background: rgba(0, 0, 0, .35); } :where(html.skin-v2) .boss-card .bn { font: 700 16px/1.2 var(--dv-display); letter-spacing: .02em; color: var(--dv-ink); } :where(html.skin-v2) .boss-card .bb { margin-top: 5px; font: 500 12.5px/1.35 var(--dv-ui); color: var(--dv-muted); } :where(html.skin-v2) .boss-card.boss-forced { border-color: rgba(255, 106, 90, .35); background: linear-gradient(180deg, rgba(70, 18, 22, .9), rgba(24, 10, 11, .96)); } :where(html.skin-v2) .boss-card.boss-forced:hover { border-color: #ff6a5a; box-shadow: 0 22px 44px rgba(0, 0, 0, .55); } :where(html.skin-v2) .boss-card.boss-forced .bn { color: #ffb0a6; text-shadow: none; } :where(html.skin-v2) .boss-card.boss-forced .bb { color: rgba(255, 208, 200, .7); } :where(html.skin-v2) .boss-card .bforce { padding: 5px 10px; font: 800 10.5px/1 var(--dv-ui); letter-spacing: .06em; color: #ffd2c8; background: rgba(255, 106, 90, .16); border: 1px solid rgba(255, 106, 90, .4); } :where(html.skin-v2) .boss-card.pvp-card { border-color: rgba(255, 106, 90, .35); } :where(html.skin-v2) .boss-card.pvp-card .bn { color: #ffb0a6; } :where(html.skin-v2) .boss-card.g-stage .g-num { top: 18px; left: 18px; z-index: 1; min-width: 26px; height: 26px; border: 0; background: rgba(0, 0, 0, .72); color: var(--dv-hi); font: 800 12px/26px var(--dv-ui); } :where(html.skin-v2) .boss-card.g-stage .g-reward { font: 500 12px/1.35 var(--dv-ui); color: var(--dv-ink-2); } :where(html.skin-v2) .boss-card.g-stage .g-status { padding: 6px 11px; font: 800 11px/1 var(--dv-ui); letter-spacing: .04em; } :where(html.skin-v2) .g-status.g-done { color: #7ee2a8; background: rgba(126, 226, 168, .12); border-color: rgba(126, 226, 168, .35); } :where(html.skin-v2) .g-status.g-next { color: #160f03; background: var(--dv-hi); border-color: transparent; } :where(html.skin-v2) .g-status.g-locked { color: var(--dv-faint); background: var(--dv-fill); border-color: var(--dv-hair); } :where(html.skin-v2) .boss-card.g-cleared { border-color: rgba(126, 226, 168, .35); } :where(html.skin-v2) .boss-card.g-lock:hover { transform: none; border-color: var(--dv-hair); background: linear-gradient(180deg, rgba(40, 35, 28, .9), rgba(16, 14, 12, .95)); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); } @media (max-width: 560px) { :where(html.skin-v2) .boss-card { width: calc(50% - 7px); box-sizing: border-box; } :where(html.skin-v2) .boss-card .bp { height: 132px; } :where(html.skin-v2) #bossList > .rps { border-radius: 24px; } } /* ranked rules */ :where(html.skin-v2) #bossList > .rps.ranked-info { width: min(700px, 100%); text-align: left; } :where(html.skin-v2) .ranked-info .ri-lead, :where(html.skin-v2) .ranked-info .ri-tier, :where(html.skin-v2) .ranked-info .ri-rules, :where(html.skin-v2) .ranked-info .ri-tbl td { color: var(--dv-ink-2); font-family: var(--dv-ui); } :where(html.skin-v2) .ranked-info b { color: var(--dv-ink); } :where(html.skin-v2) .ranked-info .ri-dim, :where(html.skin-v2) .ranked-info .ri-tbl td.ri-dim { color: var(--dv-muted); } :where(html.skin-v2) .ranked-info .ri-h { margin: 22px 0 8px; font: 700 16px/1.2 var(--dv-display); letter-spacing: .02em; color: var(--dv-hi); } :where(html.skin-v2) .ranked-info .ri-tier[style] { border-color: rgba(255, 230, 163, .28) !important; } :where(html.skin-v2) .ranked-info .ri-tbl th { font-family: var(--dv-ui); color: var(--dv-muted); border-bottom-color: var(--dv-hair-2); } :where(html.skin-v2) .ranked-info .ri-tbl td { border-bottom-color: var(--dv-hair); } :where(html.skin-v2) .ranked-info .ri-tbl td.ri-pos { color: #7ee2a8; } :where(html.skin-v2) .ranked-info .ri-tbl td.ri-neg { color: #ff8a7a; } :where(html.skin-v2) .ranked-info .ri-note { font-family: var(--dv-ui); font-style: normal; color: var(--dv-muted); } :where(html.skin-v2) .ranked-info-link { font-family: var(--dv-ui); color: var(--dv-ink-2); } :where(html.skin-v2) .ranked-info-link:hover { color: var(--dv-ink); } /* How to duel */ :where(html.skin-v2) .help-box { max-width: 600px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); } :where(html.skin-v2) .help-box h2 { margin: 0 0 16px; font: 900 clamp(26px, 3.2vw, 36px)/1.05 var(--dv-display); letter-spacing: .02em; color: var(--dv-hi); text-shadow: none; } :where(html.skin-v2) .help-box li { padding: 9px 0 9px 20px; font: 400 14.5px/1.55 var(--dv-ui); color: var(--dv-ink-2); border-bottom-color: var(--dv-hair); } :where(html.skin-v2) .help-box li:last-child { border-bottom: 0; } :where(html.skin-v2) .help-box li::before { top: 18px; background: var(--dv-hi); } :where(html.skin-v2) .help-box li b { color: var(--dv-ink); } :where(html.skin-v2) .help-box .primary { min-height: 52px; margin-top: 18px; padding: 0 34px; border: 0; border-radius: 999px; font: 800 16px/1 var(--dv-ui); letter-spacing: .01em; color: #1a1204; background: var(--dv-gold); box-shadow: 0 14px 34px rgba(231, 184, 74, .35); } /* the classic battle menu */ :where(html.skin-v2) .cat-panel { border-radius: 26px; border-color: var(--dv-hair-2); background: linear-gradient(180deg, rgba(40, 35, 28, .92), rgba(14, 12, 10, .96)); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); } :where(html.skin-v2) .cat-panel::before { background: radial-gradient(120% 70% at 50% 0%, rgba(255, 230, 163, .14), transparent 60%); } :where(html.skin-v2) :is(.cat-panel:hover, .cat-panel.open, .cat-panel:focus-within) { border-color: rgba(255, 230, 163, .4); } :where(html.skin-v2) .cat-cover .cat-icon { border: 0; border-radius: 20px; box-shadow: 0 18px 36px rgba(0, 0, 0, .55); } :where(html.skin-v2) .cat-cover .cat-name { font: 900 26px/1.05 var(--dv-display); letter-spacing: .06em; color: var(--dv-ink); text-shadow: none; } :where(html.skin-v2) .cat-cover .cat-tag { font: 500 13px/1.45 var(--dv-ui); color: var(--dv-ink-2); } :where(html.skin-v2) .cat-cover .cat-hint { font: 600 12px var(--dv-ui); letter-spacing: .01em; color: var(--dv-hi); opacity: 1; } :where(html.skin-v2) .mode-card { border: 1px solid var(--dv-hair); border-radius: 16px; background: var(--dv-fill); box-shadow: none; } :where(html.skin-v2) :is(.mode-card:hover, .mode-card:focus-visible) { border-color: rgba(255, 230, 163, .5); background: rgba(255, 255, 255, .11); box-shadow: 0 14px 30px rgba(0, 0, 0, .4); } :where(html.skin-v2) .mode-card.featured { border-width: 1px; box-shadow: none; } :where(html.skin-v2) .mode-card .mode-art { background: none; border-bottom: 0; } :where(html.skin-v2) .mode-card .mode-medal { border: 0; box-shadow: none; } :where(html.skin-v2) :is(.mode-card .bn, .mode-card.featured .bn, .cat-modes .mode-card .bn) { font: 700 14.5px/1.2 var(--dv-ui); letter-spacing: .02em; color: var(--dv-ink); } :where(html.skin-v2) :is(.mode-card .bb, .cat-modes .mode-card .bb) { font: 500 12px/1.4 var(--dv-ui); color: var(--dv-ink-2); } :where(html.skin-v2) .mode-card .bb-note { font-family: var(--dv-ui); letter-spacing: 0; color: var(--dv-muted); } :where(html.skin-v2) .mode-card .mode-badge { padding: 4px 8px; border-radius: 999px; font: 800 9.5px/1 var(--dv-ui); letter-spacing: .04em; color: #160f03; background: var(--dv-hi); box-shadow: none; } :where(html.skin-v2) .fd-active-line { font-family: var(--dv-ui); color: var(--dv-muted); } :where(html.skin-v2) .fd-active-line b { color: var(--dv-ink); } :where(html.skin-v2) .fd-active-line a { color: var(--dv-hi); } /* character decks and the Sealed builder: full-screen, fixed chrome over a scrolling grid */ :where(html.skin-v2) :is(.fd-overlay, .sealed-overlay) { background: radial-gradient(1100px 600px at 50% -10%, rgba(231, 184, 74, .08), transparent 60%), rgba(8, 7, 6, .985); } :where(html.skin-v2) :is(.fd-chrome, .sb-chrome) { padding: 16px clamp(14px, 3vw, 28px) 12px; border-bottom: 1px solid var(--dv-hair); background: rgba(12, 11, 10, .9); box-shadow: 0 18px 40px rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } :where(html.skin-v2) :is(.fd-title, .sb-title) { font: 900 clamp(22px, 3vw, 32px)/1.05 var(--dv-display); letter-spacing: .02em; text-transform: none; color: var(--dv-hi); } :where(html.skin-v2) :is(.fd-sub, .sb-sub) { max-width: 80ch; font: 500 13.5px/1.5 var(--dv-ui); color: var(--dv-ink-2); } :where(html.skin-v2) :is(.fd-body, .sb-grid) { padding-left: clamp(12px, 3vw, 28px); padding-right: clamp(12px, 3vw, 28px); } :where(html.skin-v2) .fd-msg { font: 500 14px var(--dv-ui); color: var(--dv-muted); } :where(html.skin-v2) .fd-msg.warn { color: #ffb0a6; } :where(html.skin-v2) .sb-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; font: 650 13.5px/1 var(--dv-ui); letter-spacing: .01em; color: var(--dv-ink); background: var(--dv-fill); border: 1px solid var(--dv-hair-2); } :where(html.skin-v2) .sb-btn:hover { filter: none; background: rgba(255, 255, 255, .12); border-color: var(--dv-hi); } :where(html.skin-v2) .sb-btn:focus-visible { outline: 2px solid var(--dv-hi); outline-offset: 2px; } :where(html.skin-v2) .sb-btn.ghost { width: 40px; min-height: 40px; padding: 0; font-size: 16px; color: var(--dv-ink-2); background: var(--dv-fill); border-color: var(--dv-hair); } :where(html.skin-v2) .sb-btn.ghost:hover { color: var(--dv-ink); border-color: var(--dv-hair-2); } :where(html.skin-v2) .sb-btn.duel { min-height: 46px; padding: 0 24px; font-size: 15px; font-weight: 800; color: #1a1204; background: var(--dv-gold); border-color: transparent; box-shadow: 0 12px 30px rgba(231, 184, 74, .28); } :where(html.skin-v2) .sb-btn.duel:hover { filter: brightness(1.05); background: var(--dv-gold); border-color: transparent; } :where(html.skin-v2) .sb-btn.duel:disabled { filter: none; color: var(--dv-faint); background: var(--dv-fill); border-color: var(--dv-hair); box-shadow: none; } :where(html.skin-v2) :is(.fd-duelist, .fd-card, .sb-tile) { border: 1px solid var(--dv-hair); background: linear-gradient(180deg, rgba(40, 35, 28, .9), rgba(16, 14, 12, .95)); } :where(html.skin-v2) :is(.fd-duelist:hover, .fd-card:hover, .sb-tile:hover) { border-color: rgba(255, 230, 163, .55); box-shadow: 0 20px 40px rgba(0, 0, 0, .5); } :where(html.skin-v2) :is(.fd-duelist:focus-visible, .fd-card:focus-visible, .sb-tile:focus-visible) { border-color: var(--dv-hi); box-shadow: 0 0 0 2px var(--dv-hi); } :where(html.skin-v2) .fd-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } :where(html.skin-v2) .fd-duelist { padding: 10px 10px 14px; border-radius: 22px; text-align: left; } :where(html.skin-v2) .fd-duelist .fd-art { border-radius: 14px; } :where(html.skin-v2) .fd-char { margin-top: 10px; font: 700 16px/1.15 var(--dv-display); letter-spacing: .02em; text-transform: none; color: var(--dv-ink); } :where(html.skin-v2) .fd-char.big { font-size: clamp(24px, 3vw, 34px); } :where(html.skin-v2) .fd-deck { font: 650 12.5px/1.3 var(--dv-ui); color: var(--dv-hi); } :where(html.skin-v2) .fd-deck.big { font-size: 15px; } :where(html.skin-v2) .fd-blurb { font: 400 12px/1.45 var(--dv-ui); color: var(--dv-muted); } :where(html.skin-v2) .fd-herotxt .fd-blurb { font-size: 14px; color: var(--dv-ink-2); } :where(html.skin-v2) .fd-duelist.on { border-color: var(--dv-hi); box-shadow: 0 0 0 2px var(--dv-hi), 0 20px 40px rgba(0, 0, 0, .45); } :where(html.skin-v2) .fd-onbadge { top: 18px; right: 18px; padding: 5px 9px; border: 0; border-radius: 999px; font: 800 10px/1 var(--dv-ui); letter-spacing: .04em; color: #160f03; background: var(--dv-hi); box-shadow: 0 6px 16px rgba(0, 0, 0, .45); } :where(html.skin-v2) .fd-heroart { border: 0; border-radius: 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .6); } :where(html.skin-v2) .fd-meta { font: 600 12.5px var(--dv-ui); letter-spacing: .01em; color: var(--dv-ink-2); } :where(html.skin-v2) .fd-scope { font: 500 12px/1.45 var(--dv-ui); color: var(--dv-muted); } :where(html.skin-v2) .fd-listhead { font: 700 13px var(--dv-ui); letter-spacing: .02em; text-transform: none; color: var(--dv-ink-2); border-bottom-color: var(--dv-hair); } :where(html.skin-v2) .fd-listhead b { color: var(--dv-ink); } :where(html.skin-v2) .fd-card { border-radius: 12px; } :where(html.skin-v2) :is(.fd-card .fd-cname, .sb-tile .sb-name) { font-family: var(--dv-ui); color: var(--dv-ink); } :where(html.skin-v2) .fd-card .fd-n { color: var(--dv-hi); } :where(html.skin-v2) .sb-tournbadge { padding: 4px 9px; border: 0; border-radius: 999px; font: 800 10px/1 var(--dv-ui); letter-spacing: .06em; color: #160f03; background: var(--dv-hi); } :where(html.skin-v2) .sb-meter { height: 8px; border: 0; background: rgba(255, 255, 255, .08); } :where(html.skin-v2) .sb-fill { background: linear-gradient(90deg, rgba(231, 184, 74, .7), var(--dv-c)); } :where(html.skin-v2) .sb-fill.done { background: var(--dv-gold); box-shadow: none; } :where(html.skin-v2) .sb-count { font-family: var(--dv-ui); color: var(--dv-muted); } :where(html.skin-v2) .sb-count b { font-size: 18px; color: var(--dv-ink); } :where(html.skin-v2) .sb-count.done b { color: var(--dv-hi); text-shadow: none; } :where(html.skin-v2) .sb-group { font: 500 12.5px/1.5 var(--dv-ui); color: var(--dv-ink-2); } :where(html.skin-v2) .sb-group b { color: var(--dv-hi); } :where(html.skin-v2) .sb-group .sb-gnames { color: var(--dv-muted); } :where(html.skin-v2) .sb-group.empty { font-style: normal; color: var(--dv-muted); } :where(html.skin-v2) .sb-tile { border-radius: 14px; } :where(html.skin-v2) .sb-tile .sb-art { border-radius: 9px; } :where(html.skin-v2) .sb-tile .sb-chip { font-family: var(--dv-ui); color: var(--dv-muted); } :where(html.skin-v2) .sb-tile .sb-chip .sb-lv { color: var(--dv-hi); } :where(html.skin-v2) .sb-tile .sb-info { background: rgba(0, 0, 0, .72); border-color: var(--dv-hair-2); color: var(--dv-ink-2); } :where(html.skin-v2) .sb-tile .sb-info:hover { color: var(--dv-ink); border-color: var(--dv-hi); } :where(html.skin-v2) .sb-tile .sb-check { color: #160f03; background: var(--dv-hi); } :where(html.skin-v2) .sb-tile.on { border-color: var(--dv-hi); box-shadow: 0 0 0 2px var(--dv-hi), 0 14px 30px rgba(0, 0, 0, .45); } /* scrollbars: the warm pill from ui-v2.css. style.css sets scrollbar-width / scrollbar-color on every element (and on the side panels), and in Blink any non-auto value switches ::-webkit-scrollbar off, so this skin hands them back to auto first. A class that hides its own bar (scrollbar-width: none) outranks these and keeps hiding it. */ @supports selector(::-webkit-scrollbar) { :where(html.skin-v2), :where(html.skin-v2) *, :where(html.skin-v2) :is(.log, .prompt, .prompt-choices, .inspect, .duel-side, .idesc) { scrollbar-width: auto; scrollbar-color: auto; } } :where(html.skin-v2)::-webkit-scrollbar, :where(html.skin-v2) ::-webkit-scrollbar, :where(html.skin-v2) :is(.duel-side *, .log, .prompt-choices)::-webkit-scrollbar { width: 12px; height: 12px; } :where(html.skin-v2)::-webkit-scrollbar-track, :where(html.skin-v2) ::-webkit-scrollbar-track, :where(html.skin-v2) :is(.duel-side *, .log)::-webkit-scrollbar-track { background: transparent; border-radius: 0; } :where(html.skin-v2)::-webkit-scrollbar-thumb, :where(html.skin-v2) ::-webkit-scrollbar-thumb, :where(html.skin-v2) :is(.duel-side *, .log)::-webkit-scrollbar-thumb { min-height: 44px; border: 3px solid transparent; border-radius: 999px; background: rgba(255, 230, 163, .36); background-clip: padding-box; } :where(html.skin-v2)::-webkit-scrollbar-thumb:hover, :where(html.skin-v2) ::-webkit-scrollbar-thumb:hover, :where(html.skin-v2) :is(.duel-side *, .log)::-webkit-scrollbar-thumb:hover { background: rgba(255, 230, 163, .62); background-clip: padding-box; } :where(html.skin-v2)::-webkit-scrollbar-thumb:active, :where(html.skin-v2) ::-webkit-scrollbar-thumb:active { background: var(--dv-hi); background-clip: padding-box; } :where(html.skin-v2)::-webkit-scrollbar-corner, :where(html.skin-v2) ::-webkit-scrollbar-corner { background: transparent; }