/* ui-v2.css — THE HOUSE STYLE, v2 (Ray, 2026-09-10: "make the whole website have this style"). Born in the God packs preview (web/_packs-v2.THROWAWAY.html): one lit room, glass, light, and ONE clear action per screen. Load after fonts.css, on . Everything is prefixed v2- so it can live beside the old ds.css while pages move over one at a time. Rules this sheet exists to enforce: - every loop is seamless (constant speed, moves exactly one pattern period) — nothing stops and restarts - one primary action per view; choices live in a sheet opened by that action - layouts are stable: fixed boxes, no text that resizes its container - reduced motion switches every animation off */ :root { --c: #e7b84a; --hi: #ffe6a3; /* the page's light — set per page or per object */ --ink: #f4efe6; --ink-2: rgba(244,239,230,.74); --muted: rgba(244,239,230,.52); --faint: rgba(244,239,230,.32); --glass: rgba(255,255,255,.06); --glass-2: rgba(255,255,255,.11); --hair: rgba(255,255,255,.09); --ok: #7ee2a8; --warn: #ffb35c; --bad: #ff6b6b; --r-common: #d9dde5; --r-rare: #6fb3ff; --r-super: #b98cff; --r-ultra: #ffcc4d; --r-god: #fff3b8; --ra: #f0b43a; --ra-hi: #ffe6a3; --obelisk: #4f86ff; --obelisk-hi: #d6e3ff; --slifer: #ff4a3d; --slifer-hi: #ffd2c8; --ease: cubic-bezier(.2, .8, .2, 1); --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --display: Cinzel, "Times New Roman", serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius: 24px; --radius-sm: 15px; --pad: clamp(16px, 4vw, 56px); } /* ── base ── */ body.v2 { margin: 0; min-height: 100vh; background: #050505; color: var(--ink); font: 15px/1.5 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; } .v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; } .v2 [hidden] { display: none !important; } :where(.v2) button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; } :where(.v2) a { color: inherit; text-decoration: none; } :where(.v2) :focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; } :where(.v2) img { max-width: 100%; } /* native dropdowns follow the dark page: Blink painted the open list white under the page's light text (Ray: "can't even read it") */ :where(.v2) select { color-scheme: dark; } :where(.v2) option { background: #16120c; color: #f4efe6; } /* a game screen, not a document: pressing and dragging doesn't paint a selection over the page or drag a ghost copy of it. Typing fields and the read pages' article text stay selectable, so an address or a rule can still be copied. */ body.v2 { -webkit-user-select: none; user-select: none; } :where(.v2) :is(input, textarea, [contenteditable="true"], code, pre, .selectable, #article) { -webkit-user-select: text; user-select: text; } /* (not inside a draggable: the deck builder's rows and cards drag on purpose) */ :where(.v2) :is(a, img):not([draggable="true"], [draggable="true"] *) { -webkit-user-drag: none; } /* glows and fanned cards may reach past a column, never past the screen (a phone would zoom the whole page out) */ .v2 main { overflow-x: clip; } /* scrollbars: a warm pill on a clear track, easy to see on the dark glass (the browser default was a thin grey line that disappeared into it). Blink and WebKit draw the pill; Firefox, which has no ::-webkit-scrollbar, reads the standard pair. */ html:has(> body.v2)::-webkit-scrollbar, :where(.v2) ::-webkit-scrollbar { width: 12px; height: 12px; } html:has(> body.v2)::-webkit-scrollbar-track, :where(.v2) ::-webkit-scrollbar-track { background: transparent; } html:has(> body.v2)::-webkit-scrollbar-thumb, :where(.v2) ::-webkit-scrollbar-thumb { min-height: 44px; border: 3px solid transparent; border-radius: 999px; background: rgba(255, 230, 163, .36); background-clip: padding-box; } html:has(> body.v2)::-webkit-scrollbar-thumb:hover, :where(.v2) ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 230, 163, .62); } html:has(> body.v2)::-webkit-scrollbar-thumb:active, :where(.v2) ::-webkit-scrollbar-thumb:active { background-color: var(--hi); } html:has(> body.v2)::-webkit-scrollbar-corner, :where(.v2) ::-webkit-scrollbar-corner { background: transparent; } @supports not selector(::-webkit-scrollbar) { html:has(> body.v2), .v2 * { scrollbar-width: thin; scrollbar-color: rgba(255, 230, 163, .45) transparent; } } /* the older sheets (style.css, game.css, ds.css) set scrollbar-width/-color on every element, and in Blink any non-auto value switches ::-webkit-scrollbar off; hand them back to auto (zero specificity, so a class that hides its bar still does) */ @supports selector(::-webkit-scrollbar) { :where(html:has(> body.v2)), :where(.v2) * { scrollbar-width: auto; scrollbar-color: auto; } } /* ── the lit room: blurred art + a pool of the page's light + film grain ── */ .v2-room { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .v2-room .art { position: absolute; inset: -12%; background-size: cover; background-position: 50% 30%; filter: blur(56px) saturate(1.35); opacity: .3; animation: v2drift 26s ease-in-out infinite alternate; } .v2-room .aura { position: absolute; inset: 0; transition: background .8s; background: radial-gradient(60% 52% at 50% 58%, color-mix(in srgb, var(--c) 24%, transparent), transparent 72%), radial-gradient(120% 60% at 50% 120%, color-mix(in srgb, var(--c) 20%, transparent), transparent 60%), linear-gradient(180deg, rgba(5,5,5,.55), #050505 96%); } .v2-room .grain { position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } @keyframes v2drift { from { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } to { transform: scale(1.2) translate3d(1.5%, 1%, 0); } } /* ── type ── */ .v2-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: color-mix(in srgb, var(--hi) 72%, #fff); } .v2-title { margin: 0; font: 900 clamp(56px, 9vw, 150px)/.9 var(--display); letter-spacing: .02em; background: linear-gradient(180deg, #fff 8%, var(--hi) 55%, color-mix(in srgb, var(--c) 85%, #000)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 34px color-mix(in srgb, var(--c) 32%, transparent)); } .v2-h2 { margin: 0; font: 900 clamp(26px, 3vw, 44px)/1.05 var(--display); letter-spacing: .03em; color: var(--hi); text-shadow: 0 0 28px color-mix(in srgb, var(--c) 45%, transparent); } .v2-h3 { margin: 0; font: 900 clamp(17px, 1.6vw, 22px)/1.1 var(--display); letter-spacing: .07em; } .v2-lede { margin: 0; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.45; color: var(--ink-2); } .v2-meta { font-size: 13px; color: var(--muted); } .v2-num { font-variant-numeric: tabular-nums; } /* ── top bar ── */ .v2-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--pad); background: linear-gradient(180deg, rgba(5,5,5,.72), rgba(5,5,5,0)); } /* the brand is the logo art, not type: the link keeps its "$YUGIOH" text for screen readers, drawn at zero size */ .v2-brand { display: block; flex: none; width: 120px; height: 48px; font-size: 0; color: transparent; overflow: hidden; background: url("img/ui/yugioh-logo-nav.png") left center / contain no-repeat; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); } .v2-top .right { display: flex; align-items: center; gap: 8px; } .v2-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(14px); white-space: nowrap; } .v2-chip img { width: 18px; height: 18px; } .v2-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: v2pulse 2.2s ease-in-out infinite; } .v2-chip.live .dot { background: #ff4a4a; box-shadow: 0 0 10px #ff4a4a; } .v2-avatar { position: relative; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent), 0 0 18px color-mix(in srgb, var(--c) 40%, transparent); } .v2-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } @keyframes v2pulse { 50% { opacity: .35; } } /* ── surfaces ── */ .v2-glass { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); border: 1px solid var(--hair); border-radius: var(--radius); backdrop-filter: blur(24px) saturate(1.3); box-shadow: 0 30px 80px rgba(0,0,0,.42); } .v2-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--hair); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); backdrop-filter: blur(20px) saturate(1.3); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; } .v2-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 40%, var(--hair)); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 50px color-mix(in srgb, var(--c) 22%, transparent); } /* ── buttons ── */ .v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 28px; border-radius: 999px; font-size: 16px; font-weight: 650; color: #160f03; white-space: nowrap; background: linear-gradient(180deg, #fffaf0, var(--hi) 42%, color-mix(in srgb, var(--c) 78%, #fff)); box-shadow: 0 12px 32px color-mix(in srgb, var(--c) 36%, transparent), inset 0 1px 0 rgba(255,255,255,.9); transition: transform .2s var(--ease), box-shadow .2s, filter .2s; } .v2-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 46px color-mix(in srgb, var(--c) 52%, transparent), inset 0 1px 0 #fff; } .v2-btn:active { transform: translateY(1px) scale(.98); } .v2-btn.lg { min-height: 60px; padding: 0 44px; font-size: 18px; } .v2-btn.block { display: flex; width: 100%; } .v2-btn small { font-size: 12px; font-weight: 500; opacity: .55; } .v2-btn-glass { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 600; background: var(--glass); border: 1px solid var(--hair) !important; backdrop-filter: blur(14px); transition: background .2s; } .v2-btn-glass:hover { background: var(--glass-2); } .v2-btn-ghost { font-size: 14px; font-weight: 600; color: var(--muted); padding: 10px 12px; border-radius: 999px; transition: color .2s, background .2s; } .v2-btn-ghost:hover { color: var(--ink); background: var(--glass); } :where(.v2) button:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* ── segmented control ── */ .v2-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--radius-sm); background: rgba(0,0,0,.32); } .v2-seg button { padding: 9px 12px 8px; border-radius: 11px; font-size: 14px; font-weight: 650; color: var(--muted); line-height: 1.15; transition: background .25s, color .25s; } .v2-seg button small { display: block; font-size: 10px; font-weight: 500; color: var(--faint); margin-top: 2px; } .v2-seg button.on { background: rgba(255,255,255,.15); color: #fff; } .v2-seg button.on small { color: var(--hi); } /* ── sheets (bottom) and modals (centre) ── */ .v2-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); } .v2-sheet { position: fixed; left: 50%; bottom: clamp(10px, 3vh, 36px); translate: -50% 0; z-index: 61; width: min(460px, calc(100vw - 20px)); max-height: calc(100vh - 40px); overflow: auto; padding: 22px; border-radius: 28px; background: linear-gradient(180deg, rgba(40,36,32,.9), rgba(18,16,14,.95)); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(30px) saturate(1.4); box-shadow: 0 40px 100px rgba(0,0,0,.6); } .v2-modal { position: fixed; left: 50%; top: 50%; translate: -50% -50%; z-index: 61; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; border-radius: 28px; background: linear-gradient(180deg, rgba(38,34,30,.95), rgba(16,14,12,.97)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 50px 120px rgba(0,0,0,.7), 0 0 90px color-mix(in srgb, var(--c) 16%, transparent); } .v2-sheet-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .v2-close { width: 34px; height: 34px; border-radius: 50%; background: var(--glass-2); color: var(--ink-2); font-size: 15px; flex: none; } .v2-list { display: grid; gap: 2px; } .v2-list > a, .v2-list > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 12px; border-radius: 14px; font-size: 15px; font-weight: 550; text-align: left; transition: background .2s; } .v2-list > a:hover, .v2-list > button:hover { background: var(--glass); } .v2-list .v2-meta { font-weight: 500; } /* ── progress ── */ .v2-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; } .v2-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 80%, #000), var(--hi)); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); transition: width 1s var(--ease); } .v2-steps { list-style: none; margin: 0; padding: 0; } .v2-step { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 0 0 20px; color: var(--faint); transition: color .4s; } .v2-step:last-child { padding-bottom: 0; } .v2-step::before { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; background: rgba(255,255,255,.08); transition: background .4s; } .v2-step:last-child::before { display: none; } .v2-step.done::before { background: color-mix(in srgb, var(--c) 60%, transparent); } .v2-step .dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); } .v2-step.active, .v2-step.done { color: var(--ink); } .v2-step.active .dot { border-color: transparent; border-top-color: var(--hi); border-right-color: color-mix(in srgb, var(--hi) 40%, transparent); animation: v2spin .9s linear infinite; } .v2-step.done .dot { border-color: transparent; background: linear-gradient(180deg, var(--hi), color-mix(in srgb, var(--c) 80%, #fff)); animation: none; } .v2-step .dot svg { width: 16px; height: 16px; opacity: 0; } .v2-step.done .dot svg { opacity: 1; } .v2-step .dot svg path { stroke: #160f03; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; } .v2-step.done .dot svg path { animation: v2tick .45s var(--ease) forwards; } .v2-step b { display: block; font-size: 15px; font-weight: 600; line-height: 34px; } .v2-step small { display: block; margin-top: -4px; font-size: 12.5px; color: var(--muted); } .v2-checks { display: grid; gap: 7px; margin-top: 10px; } .v2-checks div { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--faint); transition: color .4s; } .v2-checks div::before { content: ""; width: 15px; height: 15px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); transition: all .4s; } .v2-checks div.ok { color: var(--ink); } .v2-checks div.ok::before { box-shadow: none; background: var(--ok) url("data:image/svg+xml;utf8,") center / 12px no-repeat; } @keyframes v2spin { to { transform: rotate(360deg); } } @keyframes v2tick { to { stroke-dashoffset: 0; } } /* ── lit objects: float, tilt toward the pointer, gloss, one seamless light band, a pool of light ── */ .v2-float { animation: v2float 7s ease-in-out infinite; animation-delay: var(--delay, 0s); } @keyframes v2float { 50% { transform: translateY(-12px); } } .v2-tilt { position: relative; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1)); transition: transform .5s var(--ease), filter .5s; will-change: transform; filter: drop-shadow(0 38px 50px rgba(0,0,0,.62)) drop-shadow(0 0 46px color-mix(in srgb, var(--c) 34%, transparent)); } .v2-tilt-host { perspective: 1300px; } .v2-tilt > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; } .v2-tilt .gloss, .v2-tilt .holo { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; overflow: hidden; } .v2-tilt .gloss { background: radial-gradient(circle at var(--mx, 32%) var(--my, 22%), rgba(255,255,255,.45), transparent 42%); mix-blend-mode: soft-light; } .v2-tilt .holo { mix-blend-mode: screen; } .v2-tilt .holo::before { content: ""; position: absolute; left: -900px; top: -900px; right: -900px; bottom: -900px; will-change: transform; background: repeating-linear-gradient(112deg, transparent 0 640px, rgba(255,255,255,.14) 700px, rgba(255,255,255,.24) 720px, rgba(255,255,255,.14) 740px, transparent 800px 900px); animation: v2sheen 11s linear infinite; animation-delay: var(--delay, 0s); } @keyframes v2sheen { from { transform: translate(-834.47px, -337.15px); } to { transform: translate(0, 0); } } .v2-pool { position: absolute; left: -14%; right: -14%; bottom: -40px; height: 60px; border-radius: 50%; filter: blur(22px); opacity: .75; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 64%, transparent), transparent); } /* ── foil: two seamless loops (wash 160px period, glint 600px period), tinted per finish ── */ .v2-foil { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; } .v2-foil::before, .v2-foil::after { content: ""; position: absolute; left: -700px; top: -700px; right: -700px; bottom: -700px; will-change: transform; } .v2-foil::before { --a: .3; mix-blend-mode: color-dodge; animation: v2wash 14s linear infinite; background: repeating-linear-gradient(115deg, rgba(255,64,160,var(--a)) 0px, rgba(255,214,64,var(--a)) 32px, rgba(64,255,190,var(--a)) 64px, rgba(64,190,255,var(--a)) 96px, rgba(186,96,255,var(--a)) 128px, rgba(255,64,160,var(--a)) 160px); } .v2-foil::after { mix-blend-mode: soft-light; animation: v2glint 9s linear infinite; background: repeating-linear-gradient(115deg, transparent 0 360px, rgba(255,255,255,.55) 420px, transparent 480px 600px); } .v2-foil.f-silver::before { background: repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0px, rgba(214,228,244,.34) 80px, rgba(255,255,255,.04) 160px); } .v2-foil.f-gold::before { background: repeating-linear-gradient(115deg, rgba(255,186,60,.06) 0px, rgba(255,228,140,.4) 80px, rgba(255,186,60,.06) 160px); } .v2-foil.f-prismatic::before { --a: .46; } .v2-foil.f-divine::before { --a: .5; } @keyframes v2wash { from { transform: translate(-145.01px, -67.62px); } to { transform: translate(0, 0); } } @keyframes v2glint { from { transform: translate(-543.78px, -253.57px); } to { transform: translate(0, 0); } } /* ── the card back: a plain back (no coin) for every face-down card; the gold eye coin shows only on the cards dealt in a pack opening (.open, Ray 2026-09-11). Both are drawn by scratchpad gen-card-backs.ps1 at card size. ── */ .v2-cardback { background: url("img/ui/card_back_plain.jpg?v=2") center / cover, #140c06; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.55); } .v2-cardback.open { background-image: url("img/ui/card_back_open.jpg?v=2"); } .v2-cardback.shadow { background-image: url("img/ui/card_back_shadow.jpg"); } /* ── sparks (YGV2.sparks) ── */ .v2-spark { position: fixed; z-index: 90; width: 5px; height: 5px; border-radius: 50%; pointer-events: none; background: var(--sc, #fff); box-shadow: 0 0 10px var(--sc, #fff), 0 0 2px #fff; } /* ── small buttons ── */ .v2-btn.sm, .v2-btn-glass.sm { min-height: 38px; padding: 0 16px; font-size: 13px; } /* ── key art (Home and the front page, after the article cover Ray approved): light rays from behind the subject, a bloom, gold dust. Both loops are transform-only and seamless (a full turn; exactly one dust tile). Phones keep the rays still and drop the second dust layer; reduced motion stops both. ── */ .v2-keylight { position: absolute; left: 50%; top: 46%; width: var(--kl-size, 1200px); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; z-index: 0; } .v2-keylight::before, .v2-keylight::after { content: ""; position: absolute; inset: 0; border-radius: 50%; } .v2-keylight::before { will-change: transform; animation: v2rays 160s linear infinite; background: repeating-conic-gradient(from 4deg, color-mix(in srgb, var(--kl, #ffe2a0) 42%, transparent) 0deg 2.4deg, transparent 2.4deg 12deg); -webkit-mask: radial-gradient(closest-side, #000 6%, rgba(0,0,0,.5) 34%, transparent 70%); mask: radial-gradient(closest-side, #000 6%, rgba(0,0,0,.5) 34%, transparent 70%); } .v2-keylight::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--kl, #ffe2a0) 36%, transparent), color-mix(in srgb, var(--kl, #ffe2a0) 10%, transparent) 42%, transparent 70%); } @keyframes v2rays { to { transform: rotate(360deg); } } .v2-dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; -webkit-mask: radial-gradient(62% 62% at 50% 50%, #000, transparent); mask: radial-gradient(62% 62% at 50% 50%, #000, transparent); } .v2-dust::before, .v2-dust::after { content: ""; position: absolute; left: 0; right: 0; top: 0; will-change: transform; background-image: radial-gradient(circle at 18% 22%, rgba(255,230,160,.9) 0 1.3px, transparent 2.2px), radial-gradient(circle at 63% 9%, rgba(255,230,160,.6) 0 1px, transparent 1.8px), radial-gradient(circle at 81% 57%, rgba(255,230,160,.85) 0 1.6px, transparent 2.6px), radial-gradient(circle at 37% 74%, rgba(255,230,160,.55) 0 1px, transparent 1.8px), radial-gradient(circle at 9% 88%, rgba(255,230,160,.7) 0 1.2px, transparent 2px); } .v2-dust::before { height: calc(100% + 260px); background-size: 260px 260px; animation: v2dustA 30s linear infinite; } .v2-dust::after { height: calc(100% + 190px); background-size: 190px 190px; opacity: .55; animation: v2dustB 21s linear infinite; } @keyframes v2dustA { to { transform: translate3d(0, -260px, 0); } } @keyframes v2dustB { to { transform: translate3d(0, -190px, 0); } } @media (max-width: 760px), (pointer: coarse) { .v2-keylight::before { animation: none; } .v2-dust::after { display: none; } } @media (prefers-reduced-motion: reduce) { .v2-keylight::before, .v2-dust::before, .v2-dust::after { animation: none; } } /* ── key-art type: an engraved line and the storybook italic from the cover ── */ .v2-engrave { margin: 0; display: flex; align-items: center; gap: 16px; font: 700 clamp(14px, 1.2vw, 18px)/1 var(--display); letter-spacing: .42em; text-transform: uppercase; color: #e7c66b; } .v2-engrave::before, .v2-engrave::after { content: ""; flex: 1 1 24px; max-width: 64px; height: 1px; background: linear-gradient(90deg, transparent, rgba(231,198,107,.75)); } .v2-engrave::after { background: linear-gradient(270deg, transparent, rgba(231,198,107,.75)); } .v2-story { margin: 0; font: italic 400 clamp(20px, 1.8vw, 27px)/1.35 "Crimson Text", Georgia, serif; color: #efe4cc; } /* ── key-art buttons: struck gold with the Eye coin, and obsidian with a gold edge ── */ .v2-gold, .v2-obsidian { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 14px; border-radius: 16px; text-transform: uppercase; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .25s, filter .2s, border-color .25s, color .25s; } .v2-gold { min-height: 64px; padding: 0 34px; font: 900 17px/1 var(--display); letter-spacing: .12em; color: #1c1203; text-shadow: 0 1px 0 rgba(255,245,210,.65); background: linear-gradient(180deg, #fff6d6 0%, #f3d27e 38%, #d9a441 64%, #b27a26 100%); border: 1px solid #7a5418; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -3px 0 rgba(90,55,10,.45), 0 0 0 3px rgba(231,198,107,.12), 0 16px 40px rgba(231,168,60,.34); } .v2-gold::before { content: ""; position: absolute; inset: 4px; border-radius: 12px; border: 1px solid rgba(120,80,20,.35); pointer-events: none; } .v2-gold::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -45%; width: 38%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-18deg) translateX(-160%); transition: transform .9s var(--ease); } .v2-gold:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(90,55,10,.45), 0 0 0 4px rgba(231,198,107,.2), 0 22px 54px rgba(231,168,60,.5); } .v2-gold:hover::after { transform: skewX(-18deg) translateX(520%); } .v2-gold:active, .v2-obsidian:active { transform: translateY(1px) scale(.985); } .v2-gold img { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 2px 3px rgba(80,50,10,.55)); } .v2-obsidian { min-height: 56px; padding: 0 28px; font: 700 14.5px/1 var(--display); letter-spacing: .14em; color: #f3dca0; background: linear-gradient(180deg, rgba(42,33,22,.94), rgba(14,11,8,.97)); border: 1px solid rgba(231,198,107,.42) !important; box-shadow: inset 0 1px 0 rgba(255,230,163,.16), 0 12px 30px rgba(0,0,0,.45); } .v2-obsidian:hover { color: #fff3cf; border-color: rgba(255,230,163,.85) !important; box-shadow: inset 0 1px 0 rgba(255,230,163,.22), 0 12px 30px rgba(0,0,0,.45), 0 0 26px rgba(231,198,107,.24); } @media (prefers-reduced-motion: reduce) { .v2-gold::after { display: none; } } /* ── primary navigation: the same four places on every page (tablet and up; phones use the tab bar) ── */ .v2-nav { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(14px); } .v2-nav a { padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .2s, background .2s; } .v2-nav a:hover { color: var(--ink); } .v2-nav a.on { color: #160f03; background: linear-gradient(180deg, #fffaf0, var(--hi) 42%, color-mix(in srgb, var(--c) 78%, #fff)); } @media (max-width: 760px) { .v2-nav { display: none; } } /* ── a phone held sideways: every pixel of height counts ── */ @media (orientation: landscape) and (max-height: 500px) { .v2-top { padding: 8px var(--pad); } .v2-brand { display: none; } .v2-nav a { padding: 6px 12px; font-size: 12.5px; } } /* ── toast (YGV2.toast) ── */ .v2-toast { position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); translate: -50% 0; z-index: 90; padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; background: rgba(22,20,18,.92); border: 1px solid var(--hair); backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0,0,0,.5); } @media (max-width: 760px) { .v2-toast { bottom: calc(104px + env(safe-area-inset-bottom)); } } /* ── phone tab bar ── */ .v2-tabbar { display: none; } @media (max-width: 760px) { .v2-tabbar { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 24px; background: rgba(18,16,14,.78); border: 1px solid var(--hair); backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 20px 50px rgba(0,0,0,.5); } .v2-tabbar a { display: grid; justify-items: center; gap: 3px; padding: 8px 0 6px; border-radius: 18px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--muted); } .v2-tabbar a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .v2-tabbar a.on { color: var(--hi); background: rgba(255,255,255,.08); } body.v2.has-tabbar { padding-bottom: 96px; } } /* ── chat-overlay.js on v2 pages: under sheets and modals (its own z-index 90 sat on top of them), and above the phone tab bar instead of on it ── */ .v2 #chatOv { z-index: 55; } @media (max-width: 760px) { .v2.has-tabbar #chatOv { bottom: calc(92px + env(safe-area-inset-bottom)); } } /* ── settings.js panel on v2 pages (its classic styles live in ds.css, which v2 pages don't load); v2 pages open it from the account sheet, so its own floating gear stays hidden ── */ .v2 #settingsGear { display: none !important; } .v2 #settingsPanel { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 12px; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); } .v2 #settingsPanel .sg-box { width: min(440px, 100%); max-height: calc(100dvh - 24px); overflow: auto; padding: 22px; border-radius: 28px; background: linear-gradient(180deg, rgba(40,36,32,.95), rgba(18,16,14,.97)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 100px rgba(0,0,0,.6); } .v2 #settingsPanel h3 { margin: 0 0 12px; font: 900 22px/1.1 var(--display); letter-spacing: .05em; color: var(--hi); } .v2 #settingsPanel .sg-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 6px 2px; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--ink-2); } .v2 #settingsPanel .sg-row:last-of-type { border-bottom: 0; } .v2 #settingsPanel .sg-row select, .v2 #settingsPanel .sg-row button { min-height: 38px; max-width: 58%; padding: 0 12px; border-radius: 12px; font: 600 14px var(--ui); color: var(--ink); background: var(--glass-2); border: 1px solid var(--hair); } .v2 #settingsPanel .sg-row select option { color: #111; } .v2 #settingsPanel .sg-row input[type=range] { width: 150px; accent-color: var(--hi); } .v2 #settingsPanel .sg-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--hi); } .v2 #settingsPanel .sg-close { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 16px; border-radius: 999px; font: 650 16px var(--ui); color: #160f03; background: linear-gradient(180deg, #fffaf0, var(--hi) 42%, color-mix(in srgb, var(--c) 78%, #fff)); border: 0; cursor: pointer; } @media (prefers-reduced-motion: reduce) { .v2 *, .v2 *::before, .v2 *::after { animation: none !important; transition: none !important; } }