/* bundled Latin fonts (subsets, see fonts/LICENSE-fonts.txt): UI + American-style headwords, British-style headwords, IPA */ @font-face { font-family: "dew-sans"; src: url("../fonts/dew-sans-400.woff?v=28249ccd61") format("woff"); font-weight: 100 600; font-style: normal; font-display: swap; } @font-face { font-family: "dew-sans"; src: url("../fonts/dew-sans-800.woff?v=6fea4550cc") format("woff"); font-weight: 700 900; font-style: normal; font-display: swap; } @font-face { font-family: "dew-serif"; src: url("../fonts/dew-serif.woff?v=769db049e5") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "dew-ipa"; src: url("../fonts/dew-ipa.woff?v=64ad4b2cea") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0250-02FF, U+0300-036F, U+1D00-1DBF, U+2070-209F, U+2C60-2C7F, U+A720-A7FF; } :root { --paper: #fdfdfb; --grid: #bfe3d2; --grid-soft: #dcefe5; --ink: #1d1b24; --ink-2: #4a4757; --muted: #6b6778; --line: rgba(29, 27, 36, 0.12); --shu: #e5402f; --shu-deep: #b3261b; --shu-text: #c02a1a; --pink-text: #b8125f; --pink: #ff4f9a; --yellow: #ffd23f; --cyan: #2ec5e8; --purple: #7b4dff; --green: #3ccf8e; --orange: #ff7a3d; --cosmos: #160b33; --ui: "dew-sans", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "PingFang SC", "PingFang TC", "Microsoft YaHei", "Noto Sans CJK JP", sans-serif; --serif-fallback: "dew-serif", Georgia, "Times New Roman", "Hiragino Mincho ProN", "Songti SC", "Noto Serif CJK JP", serif; --ipa: "dew-ipa", "dew-sans", "Lucida Sans Unicode", "Arial Unicode MS", system-ui, sans-serif; --t0: #a58b5e; --t1: #1f3b73; --t2: #7a1f33; --t3: #5b2f9e; --t4: #d19a22; --t5: #ff4f9a; --t6: #111111; --link: #1f4fb8; color-scheme: light; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.55 var(--ui); overflow: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } button { font: inherit; color: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } [hidden] { display: none !important; } /* ------------------------------------------------------------ background layers */ #bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--paper); } #bg > div { position: absolute; inset: -30%; transition: opacity 900ms ease; } .bg-grid { inset: 0 !important; /* ruled notebook paper with a red margin line */ background-image: linear-gradient(to right, transparent 46px, rgba(229, 64, 47, 0.2) 46px, rgba(229, 64, 47, 0.2) 48px, transparent 48px), repeating-linear-gradient(to bottom, transparent 0 33px, rgba(110, 160, 210, 0.3) 33px 34px); background-position: 0 0, 0 12px; } .bg-blobs { opacity: 0; background: radial-gradient(40% 30% at 20% 30%, rgba(255, 79, 154, 0.18), transparent 70%), radial-gradient(35% 30% at 80% 25%, rgba(46, 197, 232, 0.18), transparent 70%), radial-gradient(40% 35% at 60% 80%, rgba(255, 210, 63, 0.22), transparent 70%); } .bg-rays { opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 226, 120, 0.55) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 15deg); animation: spin 40s linear infinite; } .bg-rainbow { opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, #ff8fbf 0deg 9deg, #ffe066 9deg 18deg, #8ff0c0 18deg 27deg, #8fd9ff 27deg 36deg, #c7a6ff 36deg 45deg); animation: spin 24s linear infinite reverse; mix-blend-mode: multiply; } .bg-cosmos { opacity: 0; background: radial-gradient(1px 1px at 20% 30%, #fff 60%, transparent 70%), radial-gradient(1.5px 1.5px at 70% 20%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 40% 70%, #fff 60%, transparent 70%), radial-gradient(1.5px 1.5px at 85% 65%, #fff 60%, transparent 70%), radial-gradient(60% 50% at 50% 50%, #3a1a7a 0%, var(--cosmos) 70%); } @keyframes spin { to { transform: rotate(360deg); } } #bg[data-lv="1"] .bg-blobs { opacity: 0.6; } #bg[data-lv="2"] .bg-blobs { opacity: 1; } #bg[data-lv="3"] .bg-blobs { opacity: 1; } #bg[data-lv="3"] .bg-rays { opacity: 0.35; } #bg[data-lv="4"] .bg-blobs { opacity: 1; } #bg[data-lv="4"] .bg-rays { opacity: 0.75; animation-duration: 18s; } #bg[data-lv="5"] .bg-rays { opacity: 0.6; animation-duration: 12s; } #bg[data-lv="5"] .bg-rainbow { opacity: 0.45; } #bg[data-lv="6"] .bg-rays { opacity: 0.8; animation-duration: 7s; } #bg[data-lv="6"] .bg-rainbow { opacity: 0.75; animation-duration: 10s; } #bg[data-lv="7"] .bg-cosmos { opacity: 1; } #bg[data-lv="7"] .bg-rainbow { opacity: 0.55; mix-blend-mode: screen; animation-duration: 6s; } #bg[data-lv="7"] .bg-rays { opacity: 0.5; mix-blend-mode: screen; animation-duration: 5s; } #bg[data-lv="7"] .bg-grid { opacity: 0.12; } #bg[data-lv="5"] .bg-grid, #bg[data-lv="6"] .bg-grid { opacity: 0.35; } canvas.fx { position: fixed; inset: 0; pointer-events: none; } #fx-back { z-index: 1; } #fx-front { z-index: 60; } /* ------------------------------------------------------------ shell */ #app { position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; } .screen { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* title */ #title-screen { align-items: center; justify-content: center; gap: 18px; padding: 24px 16px; text-align: center; overflow-y: auto; } .logo { display: grid; justify-items: center; line-height: 1; user-select: none; } .logo .top { font-weight: 900; font-size: clamp(40px, 12vw, 72px); color: var(--pink); text-shadow: 0 4px 0 #b3165f, 0 0 0 #fff; letter-spacing: 0.04em; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; } .logo .main { margin-top: 6px; font-weight: 900; font-size: clamp(30px, 9vw, 54px); color: #fff; background: var(--ink); padding: 6px 14px 8px; border-radius: 10px; transform: rotate(-2deg); box-shadow: 0 6px 0 var(--shu); } .tagline { font-weight: 800; font-size: 17px; } .title-note { max-width: 34em; color: var(--ink-2); font-size: 13px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .chip { border: 2px solid var(--ink); background: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 13px; box-shadow: 0 3px 0 var(--ink); } .chip[aria-pressed="true"] { background: var(--yellow); } .btn-pop { border: 3px solid var(--ink); border-radius: 16px; padding: 12px 34px; font-weight: 900; font-size: 22px; background: linear-gradient(#5aa7ff, #2f62d0); color: #fff; box-shadow: 0 6px 0 var(--ink); letter-spacing: 0.04em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); transition: transform 80ms ease, box-shadow 80ms ease; } .btn-pop:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); } .btn-pop[disabled] { filter: grayscale(0.8) brightness(1.1); cursor: not-allowed; } .toggles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .toggle { border: 2px solid var(--ink); background: #fff; border-radius: 10px; padding: 4px 10px; font-size: 13px; font-weight: 700; box-shadow: 0 3px 0 var(--ink); } /* game hud */ #game { position: relative; } .hud { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 6px; } .hud .mini-logo { font-weight: 900; font-size: 15px; line-height: 1; background: var(--ink); color: #fff; padding: 5px 7px; border-radius: 7px; box-shadow: 0 3px 0 var(--shu); white-space: nowrap; } .dopa { flex: 1; min-width: 0; display: grid; justify-items: center; line-height: 1.05; } .dopa .label { font-size: 11px; font-weight: 800; color: var(--pink); letter-spacing: 0.08em; } .dopa .value { font-weight: 900; font-size: clamp(20px, 6vw, 30px); white-space: nowrap; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; font-variant-numeric: tabular-nums; } .dopa .unit { display: block; color: var(--shu); margin: 1px 0 0; font-size: 0.5em; font-weight: 900; letter-spacing: 0.02em; line-height: 1.05; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; } .dopa .read { font-size: 10px; color: var(--ink-2); font-weight: 700; min-height: 12px; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; } .icon-btn { border: 2px solid var(--ink); background: #fff; border-radius: 10px; padding: 5px 9px; font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 var(--ink); white-space: nowrap; } .meter { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 0 12px 4px; } .pips { display: flex; gap: 3px; } .pip { width: 16px; height: 8px; border-radius: 4px; background: rgba(29, 27, 36, 0.12); border: 1.5px solid rgba(29, 27, 36, 0.25); } .pip.on:nth-child(1) { background: #9fd9ff; } .pip.on:nth-child(2) { background: #6fe3b0; } .pip.on:nth-child(3) { background: #ffe066; } .pip.on:nth-child(4) { background: #ffb347; } .pip.on:nth-child(5) { background: #ff6b6b; } .pip.on:nth-child(6) { background: #ff4f9a; } .pip.on:nth-child(7) { background: #b28bff; } .pip.on:nth-child(8) { background: linear-gradient(90deg, #ff8fbf, #ffe066, #8ff0c0, #8fd9ff, #c7a6ff); } .lvname { font-weight: 900; font-size: 13px; min-width: 5em; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; } .chain-tag { font-weight: 900; font-size: 13px; color: #fff; background: var(--shu); border-radius: 999px; padding: 1px 10px; } #stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 10px; } .idle { text-align: center; display: grid; gap: 10px; justify-items: center; max-width: 30em; } .idle p { font-weight: 700; color: var(--ink-2); font-size: 14px; background: rgba(255, 255, 255, 0.85); border-radius: 10px; padding: 6px 10px; } .idle .stats { font-size: 12px; color: var(--muted); } .controls { display: grid; gap: 6px; justify-items: center; padding: 6px 12px calc(12px + env(safe-area-inset-bottom, 0px)); } .packs { display: flex; gap: 10px; align-items: center; font-weight: 800; font-size: 13px; background: rgba(255, 255, 255, 0.9); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; } .packs .pkc { display: flex; gap: 3px; align-items: center; } .pkp { flex: none; width: 13px; height: 13px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ink); } .pkp.full { background: linear-gradient(to bottom, var(--pink) 0 50%, #ffffff 50% 100%); } .pkp.used { border-color: rgba(29, 27, 36, 0.28); background: transparent; } #pull-btn { min-width: 220px; font-size: 26px; background: linear-gradient(#ff7fb6, #ff4f9a); } #refill-btn { font-size: 12px; border: 2px dashed var(--ink-2); background: #fff; border-radius: 10px; padding: 3px 10px; font-weight: 700; } #summary-bar { min-height: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 10px; } .tchip { font-weight: 900; font-size: 12px; border-radius: 999px; padding: 1px 9px; color: #fff; border: 2px solid rgba(0, 0, 0, 0.15); } .tchip.t0 { background: #9c968b; } .tchip.t1 { background: var(--t1); } .tchip.t2 { background: var(--t2); } .tchip.t3 { background: var(--t3); } .tchip.t4 { background: linear-gradient(135deg, #f7d774, #c8932b); color: #3b2600; } .tchip.t5 { background: linear-gradient(90deg, #ff8fbf, #ffb86b, #7ee0b0, #7cc8ff, #b99cff); color: #22123a; } .tchip.t6 { background: #111; color: #f5d77a; border-color: #e6b93c; } .schip { font-weight: 800; font-size: 12px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 1px 9px; } /* ------------------------------------------------------------ cards */ .grid10 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(6px, 1.6vw, 14px); width: min(100%, 720px); } .slot { perspective: 800px; aspect-ratio: 5 / 7; } .slot .inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 420ms cubic-bezier(.3, 1.4, .5, 1); transform: rotateY(180deg); } .slot.flipped .inner { transform: rotateY(0deg); } .slot.deal { animation: deal 420ms cubic-bezier(.2, 1.3, .4, 1) both; } @keyframes deal { from { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.3) rotate(-20deg); opacity: 0; } } .face, .back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; overflow: hidden; } .back { transform: rotateY(180deg); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 15.5H16' stroke='%2523ffffff' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 30% 20%, #2f5497 0%, #1b3166 55%, #111f45 100%); border: 3px solid #0d1a3b; display: grid; place-items: center; } .back::after { content: "Aa"; width: 54%; aspect-ratio: 1; border-radius: 50%; border: 2px solid #e6b93c; color: #f3d98a; background: rgba(0, 0, 0, 0.2); display: grid; place-items: center; font: 600 clamp(14px, 4.4vw, 34px)/1 var(--serif-fallback); box-shadow: 0 0 0 3px rgba(230, 185, 60, 0.25), inset 0 0 10px rgba(0, 0, 0, 0.35); } .back.glow-3 { box-shadow: 0 0 18px 4px rgba(170, 120, 255, 0.8); } .back.glow-4 { box-shadow: 0 0 22px 6px rgba(255, 205, 80, 0.95); } .back.glow-5, .back.glow-6 { box-shadow: 0 0 26px 8px rgba(255, 120, 200, 0.95); } /* ------------------------------------------------------------ card faces One card = tier material (parchment ... black lacquer) x region theme (American comic / British gilt / neutral). Layers inside a card: .deco (region overlay) and .orn (tier ornament) are pure CSS children; content sits on top (z-index 2). The headword shrinks with its length: --n = letters (>= 4), --wk = how much width the font gets, --wmax = size cap. */ .face, .fcard { container-type: inline-size; --edge: var(--t0); --fg: #4a3a1e; --wfill: #2b2114; --wfill-a: #ffffff; --wstroke: #1d1b24; --wshadow: rgba(0, 0, 0, 0.42); --gilt: #c4992c; --burst: rgba(255, 210, 63, 0.6); --dots: rgba(40, 24, 8, 0.22); --head: var(--ui); --hw: 800; --wk: 134cqw; --wmax: 30cqw; --ls: 0em; color: var(--fg); } .fcard { --wmax: 36cqw; } .face[data-reg="E"], .fcard[data-reg="E"] { --head: var(--serif-fallback); --hw: 600; --wk: 160cqw; --ls: 0.005em; } .face[data-reg="A"], .fcard[data-reg="A"] { --wk: 126cqw; } .face { display: grid; grid-template-rows: auto 1fr auto; border: 3px solid var(--edge); } .face > .deco, .face > .orn, .fcard > .deco, .fcard > .orn { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .orn { display: none; } .face > *:not(.deco):not(.orn):not(.rbadge):not(.new), .fcard > *:not(.deco):not(.orn):not(.rbadge) { position: relative; z-index: 2; } .face .stamp { justify-self: start; margin: 4px 0 0 4px; font-size: clamp(8px, 11cqw, 13px); font-weight: 900; color: #fff; padding: 0 0.4em; border-radius: 4px; border: 1.5px solid rgba(255, 255, 255, 0.7); transform: rotate(-6deg); line-height: 1.4; } .face .gbox, .fcard .gbox { position: relative; display: grid; place-items: center; min-width: 0; } .face .gbox { margin: 0 4%; } .fcard .gbox { margin: 4px 6%; } .face .g, .fcard .g { position: relative; white-space: nowrap; line-height: 1.15; color: var(--wfill); font-family: var(--head); font-weight: var(--hw); letter-spacing: var(--ls); font-size: min(var(--wmax), calc(var(--wk) / var(--wn, var(--n, 6)))); } .face .nm { text-align: center; font-size: clamp(7px, 8.6cqw, 12px); font-weight: 800; padding: 0 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .face .new { position: absolute; z-index: 3; bottom: 17%; right: -2px; transform: rotate(-8deg); font-size: clamp(7px, 9cqw, 11px); font-weight: 900; background: var(--yellow); color: var(--ink); border-radius: 4px; padding: 0 4px; border: 1.5px solid var(--ink); } .rbadge { position: absolute; z-index: 3; top: 3px; right: 4px; font-size: clamp(8px, 12cqw, 16px); line-height: 1; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); } .fcard .rbadge { top: 36px; right: 12px; font-size: 20px; } .fcard .rbadge { cursor: help; } /* --- region: American = comic (halftone, burst, bold outlined lettering), British = gilt frame + serif, both = plain */ .face[data-reg="A"]:not([data-tier="5"]):not([data-tier="6"]), .fcard[data-reg="A"]:not([data-tier="5"]):not([data-tier="6"]) { --edge: #1d1b24; } .face[data-reg="A"] { box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.5); } .face[data-reg="A"] > .deco, .fcard[data-reg="A"] > .deco { background: radial-gradient(circle, var(--dots) 0 1.1px, transparent 1.6px) 0 0 / 5px 5px; -webkit-mask-image: radial-gradient(135% 105% at 100% 100%, #000 0%, rgba(0, 0, 0, 0) 64%); mask-image: radial-gradient(135% 105% at 100% 100%, #000 0%, rgba(0, 0, 0, 0) 64%); } .face[data-reg="A"] .gbox::before, .fcard[data-reg="A"] .gbox::before { content: ""; position: absolute; inset: -6% -12%; background: var(--burst); clip-path: polygon(100.0% 50.0%, 85.1% 58.0%, 95.0% 71.7%, 78.1% 72.4%, 81.2% 89.1%, 65.6% 82.4%, 61.1% 98.7%, 50.0% 86.0%, 38.9% 98.7%, 34.4% 82.4%, 18.8% 89.1%, 21.9% 72.4%, 5.0% 71.7%, 14.9% 58.0%, 0.0% 50.0%, 14.9% 42.0%, 5.0% 28.3%, 21.9% 27.6%, 18.8% 10.9%, 34.4% 17.6%, 38.9% 1.3%, 50.0% 14.0%, 61.1% 1.3%, 65.6% 17.6%, 81.2% 10.9%, 78.1% 27.6%, 95.0% 28.3%, 85.1% 42.0%); transform: rotate(-4deg); } .face[data-reg="A"] .g, .fcard[data-reg="A"] .g { color: var(--wfill-a); -webkit-text-stroke: 0.08em var(--wstroke); paint-order: stroke fill; text-shadow: 0.05em 0.07em 0 var(--wshadow); letter-spacing: 0.012em; } .face[data-reg="E"]:not([data-tier="5"]), .fcard[data-reg="E"]:not([data-tier="5"]) { border-style: double; border-width: 4px; --edge: var(--gilt); } .fcard[data-reg="E"]:not([data-tier="5"]) { border-width: 7px; } .face[data-reg="E"] > .deco, .fcard[data-reg="E"] > .deco { inset: 3px; border: 1px solid var(--gilt); border-radius: 5px; background: radial-gradient(circle at 0 0, var(--gilt) 0 3px, transparent 3.6px), radial-gradient(circle at 100% 0, var(--gilt) 0 3px, transparent 3.6px), radial-gradient(circle at 0 100%, var(--gilt) 0 3px, transparent 3.6px), radial-gradient(circle at 100% 100%, var(--gilt) 0 3px, transparent 3.6px); } .fcard[data-reg="E"] > .deco { inset: 5px; border-radius: 9px; } .face[data-reg="E"] .gbox::before, .fcard[data-reg="E"] .gbox::before { content: ""; position: absolute; left: -2%; right: -2%; top: 14%; bottom: 14%; border-top: 1px solid var(--gilt); border-bottom: 1px solid var(--gilt); opacity: 0.75; } .face[data-reg="E"] .g, .fcard[data-reg="E"] .g { text-shadow: 0 0.025em 0 rgba(255, 255, 255, 0.35); } .face[data-reg="E"] .nm, .fcard[data-reg="E"] .nm { font-family: var(--serif-fallback); } /* --- tier materials */ /* C - parchment */ .face[data-tier="0"], .fcard[data-tier="0"] { --edge: #a58b5e; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.33 0 0 0 0 0.15 0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(120% 100% at 50% 35%, #fbf4de 0%, #f1e3bd 62%, #dcc690 100%); --wfill-a: #ffffff; --wstroke: #2a1f10; --burst: rgba(255, 196, 46, 0.62); } /* UC - Oxford-blue cloth: woven texture, blind-stamped gilt rule, cream lettering */ .face[data-tier="1"], .fcard[data-tier="1"] { --edge: #0f1f45; --fg: #e9dfc0; --wfill: #f6edd2; --wfill-a: #ffd23f; --wstroke: #0c1633; --wshadow: rgba(0, 0, 0, 0.55); --dots: rgba(255, 255, 255, 0.16); --burst: rgba(255, 210, 63, 0.2); --gilt: #dcb65c; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 30% 15%, #2f56a0 0%, #1d3a75 55%, #132850 100%); } .face[data-tier="1"] > .orn, .fcard[data-tier="1"] > .orn { display: block; inset: 4px; border: 1px solid rgba(220, 182, 92, 0.7); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); } /* R - burgundy library leather: grain, double gilt tooling */ .face[data-tier="2"], .fcard[data-tier="2"] { --edge: #35090f; --fg: #f1dfb0; --wfill: #f2d27f; --wfill-a: #ffe27a; --wstroke: #2a0a10; --wshadow: rgba(0, 0, 0, 0.55); --dots: rgba(255, 220, 160, 0.16); --burst: rgba(255, 210, 63, 0.2); --gilt: #e0bd66; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.01 0 0 0 0 0.03 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 30% 15%, #94293f 0%, #6a1a2a 60%, #4a0f1c 100%); } .face[data-tier="2"] > .orn, .fcard[data-tier="2"] > .orn { display: block; inset: 4px; border: 1px solid #d9b45c; border-radius: 3px; box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(217, 180, 92, 0.6); } /* SR - royal-purple velvet: fine pile, soft diagonal sheen, gold piping */ .face[data-tier="3"], .fcard[data-tier="3"] { --edge: #2a1458; --fg: #efe6ff; --wfill: #fff1c9; --wfill-a: #ffffff; --wstroke: #1b0c3a; --wshadow: rgba(10, 0, 40, 0.6); --dots: rgba(255, 255, 255, 0.16); --burst: rgba(255, 210, 63, 0.22); --gilt: #e6c76a; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.13) 46%, transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(130% 90% at 30% 12%, #8458d6 0%, #51298f 52%, #2c1560 100%); box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.12); } .face[data-tier="3"] > .orn, .fcard[data-tier="3"] > .orn { display: block; inset: 3px; border: 2px solid rgba(240, 214, 140, 0.6); border-radius: 6px; box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.14); } /* SSR - gold foil: crinkled foil, moving sheen */ .face[data-tier="4"], .fcard[data-tier="4"] { --edge: #b8821a; --fg: #4a2f05; --wfill: #3d2503; --wfill-a: #fff7da; --wstroke: #4a2f05; --wshadow: rgba(74, 47, 5, 0.5); --burst: rgba(255, 255, 255, 0.5); --gilt: #8c5e0a; background: linear-gradient(135deg, #fff7da 0%, #f5d97c 30%, #e7b84b 55%, #fff2c6 75%, #d9a52a 100%); } .face[data-tier="4"] > .orn, .fcard[data-tier="4"] > .orn { display: block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: 0.75; } .face[data-tier="4"] .g, .fcard[data-tier="4"] .g { text-shadow: 0 0.03em 0 rgba(255, 255, 255, 0.55); } .face[data-tier="4"][data-reg="A"] .g, .fcard[data-tier="4"][data-reg="A"] .g { text-shadow: 0.05em 0.07em 0 var(--wshadow); } /* UR - holographic rainbow, rotating */ .face[data-tier="5"], .fcard[data-tier="5"] { --edge: transparent; --fg: #2a1650; --wfill: #2a1650; --wstroke: #1d1b24; border-color: transparent; background: conic-gradient(from calc(var(--holo) * -1) at 30% 20%, rgba(255, 143, 191, 0.42), rgba(255, 224, 102, 0.38), rgba(143, 240, 192, 0.42), rgba(143, 217, 255, 0.42), rgba(199, 166, 255, 0.42), rgba(255, 143, 191, 0.42)) padding-box, linear-gradient(#fffdfb, #fffdfb) padding-box, conic-gradient(from var(--holo, 0deg), #ff8fbf, #ffe066, #8ff0c0, #8fd9ff, #c7a6ff, #ff8fbf) border-box; animation: holo 3s linear infinite; } .face[data-tier="5"]::before, .fcard[data-tier="5"]::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, rgba(255, 143, 191, 0.2), rgba(143, 217, 255, 0.2), rgba(255, 224, 102, 0.2)); } .face[data-tier="5"] .g, .fcard[data-tier="5"] .g { background: conic-gradient(from var(--holo, 0deg), #ff3d8b, #ff9d3d, #2fbf80, #1fb3dd, #6b3dff, #ff3d8b); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0.03em 0 rgba(42, 22, 80, 0.55)); } .face[data-tier="5"][data-reg="A"] .g, .fcard[data-tier="5"][data-reg="A"] .g { color: transparent; } /* LR - black lacquer with gold filigree and gold letters (illuminated manuscript) */ .face[data-tier="6"], .fcard[data-tier="6"] { --edge: #e6b93c; --fg: #e8cf86; --wfill: #f5d77a; --wstroke: #000; --wshadow: rgba(0, 0, 0, 0.7); --gilt: #e6b93c; --dots: rgba(230, 185, 60, 0.2); --burst: rgba(230, 185, 60, 0.16); background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 26%), radial-gradient(120% 80% at 30% 10%, #2b2218, #0b0907 70%); } .face[data-tier="6"] > .orn, .fcard[data-tier="6"] > .orn { display: block; inset: 4px; border: 1px solid rgba(230, 185, 60, 0.8); border-radius: 6px; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0), inset 0 0 0 4px rgba(230, 185, 60, 0.35); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='matrix(1 0 0 1 0 0)'%3E%3Cg fill='none' stroke='%23e6b93c' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 61V20C3 10 10 3 20 3H61'/%3E%3Cpath d='M8 61V22C8 14 14 8 22 8H61' opacity='.55'/%3E%3Cpath d='M16 16C26 15 31 23 27 30C24 35 16 33 17 27C18 23 23 23 25 26'/%3E%3Cpath d='M31 9C34 16 41 17 46 11M9 31C16 34 17 41 11 46'/%3E%3Cpath d='M40 3C42 8 47 9 51 6M3 40C8 42 9 47 6 51' opacity='.8'/%3E%3C/g%3E%3Cg fill='%23e6b93c'%3E%3Ccircle cx='3' cy='3' r='2.6'/%3E%3Ccircle cx='16' cy='16' r='1.7'/%3E%3Ccircle cx='55' cy='3' r='1.5'/%3E%3Ccircle cx='3' cy='55' r='1.5'/%3E%3Ccircle cx='34' cy='34' r='1.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 30% auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='matrix(-1 0 0 1 64 0)'%3E%3Cg fill='none' stroke='%23e6b93c' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 61V20C3 10 10 3 20 3H61'/%3E%3Cpath d='M8 61V22C8 14 14 8 22 8H61' opacity='.55'/%3E%3Cpath d='M16 16C26 15 31 23 27 30C24 35 16 33 17 27C18 23 23 23 25 26'/%3E%3Cpath d='M31 9C34 16 41 17 46 11M9 31C16 34 17 41 11 46'/%3E%3Cpath d='M40 3C42 8 47 9 51 6M3 40C8 42 9 47 6 51' opacity='.8'/%3E%3C/g%3E%3Cg fill='%23e6b93c'%3E%3Ccircle cx='3' cy='3' r='2.6'/%3E%3Ccircle cx='16' cy='16' r='1.7'/%3E%3Ccircle cx='55' cy='3' r='1.5'/%3E%3Ccircle cx='3' cy='55' r='1.5'/%3E%3Ccircle cx='34' cy='34' r='1.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 100% 0 / 30% auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='matrix(1 0 0 -1 0 64)'%3E%3Cg fill='none' stroke='%23e6b93c' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 61V20C3 10 10 3 20 3H61'/%3E%3Cpath d='M8 61V22C8 14 14 8 22 8H61' opacity='.55'/%3E%3Cpath d='M16 16C26 15 31 23 27 30C24 35 16 33 17 27C18 23 23 23 25 26'/%3E%3Cpath d='M31 9C34 16 41 17 46 11M9 31C16 34 17 41 11 46'/%3E%3Cpath d='M40 3C42 8 47 9 51 6M3 40C8 42 9 47 6 51' opacity='.8'/%3E%3C/g%3E%3Cg fill='%23e6b93c'%3E%3Ccircle cx='3' cy='3' r='2.6'/%3E%3Ccircle cx='16' cy='16' r='1.7'/%3E%3Ccircle cx='55' cy='3' r='1.5'/%3E%3Ccircle cx='3' cy='55' r='1.5'/%3E%3Ccircle cx='34' cy='34' r='1.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 100% / 30% auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='matrix(-1 0 0 -1 64 64)'%3E%3Cg fill='none' stroke='%23e6b93c' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 61V20C3 10 10 3 20 3H61'/%3E%3Cpath d='M8 61V22C8 14 14 8 22 8H61' opacity='.55'/%3E%3Cpath d='M16 16C26 15 31 23 27 30C24 35 16 33 17 27C18 23 23 23 25 26'/%3E%3Cpath d='M31 9C34 16 41 17 46 11M9 31C16 34 17 41 11 46'/%3E%3Cpath d='M40 3C42 8 47 9 51 6M3 40C8 42 9 47 6 51' opacity='.8'/%3E%3C/g%3E%3Cg fill='%23e6b93c'%3E%3Ccircle cx='3' cy='3' r='2.6'/%3E%3Ccircle cx='16' cy='16' r='1.7'/%3E%3Ccircle cx='55' cy='3' r='1.5'/%3E%3Ccircle cx='3' cy='55' r='1.5'/%3E%3Ccircle cx='34' cy='34' r='1.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 100% 100% / 30% auto no-repeat; } .face[data-tier="6"] .g, .fcard[data-tier="6"] .g { background: linear-gradient(180deg, #fff3c4, #e6b93c 55%, #b07a1a); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 0.1em rgba(230, 185, 60, 0.55)); } .face[data-tier="6"][data-reg="A"] .g, .fcard[data-tier="6"][data-reg="A"] .g { color: transparent; } .face[data-tier="6"] .g::first-letter, .fcard[data-tier="6"] .g::first-letter { font-size: 1.16em; } .face[data-tier="4"]::after, .fcard[data-tier="4"]::after, .face[data-tier="6"]::after, .fcard[data-tier="6"]::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.6) 48%, transparent 60%); background-size: 250% 100%; animation: sheen 2.6s ease-in-out infinite; } .face[data-tier="6"]::after, .fcard[data-tier="6"]::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 170, 0.5) 48%, transparent 60%); background-size: 250% 100%; } @keyframes sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } } @property --holo { syntax: ""; inherits: true; initial-value: 0deg; } @keyframes holo { to { --holo: 360deg; } } .stamp[data-tier="0"] { background: #8a6f3e; } .stamp[data-tier="1"] { background: var(--t1); } .stamp[data-tier="2"] { background: var(--t2); } .stamp[data-tier="3"] { background: var(--t3); } .stamp[data-tier="4"] { background: linear-gradient(135deg, #d9a52a, #9c6a0e); } .stamp[data-tier="5"] { background: linear-gradient(90deg, #ff4f9a, #ff9d3d, #3ccf8e, #2ec5e8, #7b4dff); } .stamp[data-tier="6"] { background: #e6b93c; color: #111 !important; } /* waterfall */ .fall { width: min(100%, 980px); max-height: 100%; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; align-content: flex-start; padding: 4px; } .mini { position: relative; min-width: 30px; max-width: 124px; height: 26px; padding: 0 7px; border-radius: 7px; border: 2px solid var(--t0); background: #f4ead0; color: #3a2c14; display: inline-grid; place-items: center; font-size: 13px; line-height: 1; font-weight: 800; white-space: nowrap; animation: pop 260ms cubic-bezier(.2, 1.6, .4, 1) backwards; } .mini .mw { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .mini[data-reg="E"] { font-family: var(--serif-fallback); font-weight: 600; border-style: double; } .mini[data-reg="A"] { border-color: #1d1b24; } .mini[data-tier="1"] { border-color: var(--t1); background: #284a8e; color: #f6edd2; } .mini[data-tier="2"] { border-color: var(--t2); background: #7a1f33; color: #f2d27f; } .mini[data-tier="3"] { border-color: #c9a4ff; background: #5b2f9e; color: #fff1c9; box-shadow: 0 0 8px rgba(138, 79, 224, 0.7); } .mini[data-tier="4"] { border-color: #c8932b; background: linear-gradient(135deg, #fff5d0, #f1cf6a); color: #3d2503; box-shadow: 0 0 12px rgba(255, 200, 70, 0.9); z-index: 1; } .mini[data-tier="5"] { border-color: #ff4f9a; background: linear-gradient(135deg, #ffe3f0, #e3f6ff); color: #2a1650; box-shadow: 0 0 16px rgba(255, 79, 154, 0.95); z-index: 2; } .mini[data-tier="6"] { border-color: #e6b93c; background: #111; color: #f5d77a; box-shadow: 0 0 22px rgba(255, 215, 90, 1); z-index: 3; transform: scale(1.15); } .mini.is-new::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); border: 1.5px solid var(--ink); } @keyframes pop { from { transform: scale(0.2); opacity: 0; } } .fall-count { position: absolute; top: 4px; left: 12px; font-weight: 900; font-size: 22px; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; font-variant-numeric: tabular-nums; z-index: 5; } /* ------------------------------------------------------------ overlay: pre-reveal, banners */ #overlay { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: grid; place-items: center; } #overlay.active { pointer-events: auto; } .cutin { position: fixed; left: -10%; right: -10%; top: 38%; transform: rotate(-7deg); display: grid; place-items: center; font-size: clamp(38px, 11vw, 88px); padding: 0.17em 0 0.29em; background: repeating-linear-gradient(90deg, #1d1b24 0 40px, #2c2a36 40px 80px); border-top: 8px solid var(--yellow); border-bottom: 8px solid var(--yellow); animation: cutin 900ms cubic-bezier(.2, 1.2, .3, 1) both; z-index: 45; } /* text size follows the band (em), and the band grows with the text: glyphs never leave it. JS shrinks long strings to fit the screen width. */ .cutin span { display: block; font-weight: 900; font-size: 1em; line-height: 1; color: #fff; -webkit-text-stroke: 0.07em var(--shu); paint-order: stroke fill; letter-spacing: 0.04em; white-space: nowrap; } .cutin.hot { border-color: var(--shu); background: repeating-linear-gradient(90deg, #b3261b 0 40px, #e5402f 40px 80px); } .cutin.hot span { -webkit-text-stroke-color: #1d1b24; color: var(--yellow); } .cutin.sure { border-color: #fff; background: linear-gradient(90deg, #ff8fbf, #ffe066, #8ff0c0, #8fd9ff, #c7a6ff); } .cutin.sure span { color: #fff; -webkit-text-stroke-color: #7b4dff; } @keyframes cutin { 0% { transform: translateX(110%) rotate(-7deg); } 25% { transform: translateX(0) rotate(-7deg); } 80% { transform: translateX(0) rotate(-7deg); } 100% { transform: translateX(-110%) rotate(-7deg); } } .banner { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 46; text-align: center; pointer-events: none; animation: bannerPop 1100ms cubic-bezier(.2, 1.6, .4, 1) both; } .banner .b-main { font-weight: 900; font-size: clamp(40px, 13vw, 104px); line-height: 1.15; color: var(--yellow); -webkit-text-stroke: 0.08em var(--ink); paint-order: stroke fill; white-space: nowrap; text-shadow: 0 0.08em 0 var(--shu); } .banner .b-sub { margin-top: 6px; font-weight: 900; font-size: clamp(16px, 4.5vw, 26px); color: #fff; -webkit-text-stroke: 0.2em var(--ink); paint-order: stroke fill; white-space: nowrap; } .banner.pink .b-main { color: var(--pink); text-shadow: 0 0.08em 0 #7a1244; } .banner.rainbow .b-main { background: linear-gradient(90deg, #ff4f9a, #ffb33d, #3ccf8e, #2ec5e8, #7b4dff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.03em var(--ink); text-shadow: none; padding: 0 0.06em; } .banner.small .b-main { font-size: clamp(28px, 8vw, 56px); } @keyframes bannerPop { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.05); opacity: 0; } } .unit-announce { position: fixed; left: 50%; top: 20%; transform: translateX(-50%); z-index: 46; display: grid; justify-items: center; gap: 2px; background: rgba(255, 255, 255, 0.92); border: 3px solid var(--ink); border-radius: 14px; padding: 8px 18px; box-shadow: 0 5px 0 var(--ink); animation: bannerPop2 2200ms ease both; pointer-events: none; } .unit-announce .uk { font-family: var(--serif-fallback); font-size: clamp(30px, 8vw, 54px); font-weight: 700; line-height: 1.1; color: var(--shu); white-space: nowrap; } .unit-announce .ur { font-weight: 800; font-size: 14px; } .unit-announce .up { font-size: 12px; color: var(--ink-2); font-weight: 700; } @keyframes bannerPop2 { 0% { transform: translateX(-50%) translateY(-30px); opacity: 0; } 12% { transform: translateX(-50%) translateY(0); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } } .judge { position: fixed; inset: 0; z-index: 47; display: grid; place-items: center; background: rgba(22, 11, 51, 0.55); } .judge-box { display: grid; gap: 14px; justify-items: center; } .judge-title { font-weight: 900; font-size: clamp(24px, 6vw, 40px); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; } .judge-row { display: flex; gap: 22px; } .jk { width: clamp(110px, 30vw, 170px); aspect-ratio: 1; border-radius: 18px; background: #fff; border: 5px solid var(--ink); display: grid; place-items: center; font-size: clamp(64px, 18vw, 110px); font-weight: 700; color: #c9c5d1; transition: transform 80ms; } .jk.long { font-size: clamp(28px, 8vw, 46px); } html:lang(ja) .jk, html:lang(zh) .jk { font-family: var(--ui); } .jk.lit { color: var(--ink); background: var(--yellow); transform: scale(1.08); box-shadow: 0 0 40px 10px rgba(255, 220, 80, 0.9); } .jk.end.lit { background: #cfd4e8; box-shadow: 0 0 30px 6px rgba(160, 170, 210, 0.9); } .judge-rate { font-weight: 800; color: #fff; font-size: 17px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-align: center; } .judge-rate.lock { color: var(--yellow); font-size: 22px; } .judge-note { margin-top: -6px; max-width: 88vw; text-align: center; font-weight: 700; font-size: 12px; color: #fff; background: rgba(29, 27, 36, 0.78); border-radius: 12px; padding: 4px 12px; line-height: 1.4; } #flash { position: fixed; inset: 0; z-index: 63; background: #fff; opacity: 0; pointer-events: none; } #flash.go { animation: flash 520ms ease-out; } @keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } } .shake { animation: shake 420ms cubic-bezier(.36, .07, .19, .97) both; } @keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 3px); } 40%, 60% { transform: translate(7px, -3px); } } .skip-btn { position: fixed; right: 12px; top: calc(78px + env(safe-area-inset-top, 0px)); z-index: 64; border: 2px solid var(--ink); background: #fff; border-radius: 999px; padding: 3px 12px; font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 var(--ink); } /* ------------------------------------------------------------ cutscene / full card */ #cut { position: fixed; inset: 0; z-index: 61; display: grid; place-items: center; background: rgba(22, 11, 51, 0.55); } #cut .rays { position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; background: repeating-conic-gradient(from 0deg, var(--rc, rgba(255, 226, 120, 0.55)) 0deg 8deg, transparent 8deg 16deg); animation: spin 10s linear infinite; } .cut-body { position: relative; display: grid; justify-items: center; gap: 12px; padding: 16px; max-width: 94vw; } .cut-tier { font-weight: 900; font-size: clamp(56px, 16vw, 120px); line-height: 1; color: #fff; -webkit-text-stroke: 8px var(--shu); paint-order: stroke fill; animation: slam 520ms cubic-bezier(.2, 1.6, .4, 1) both; letter-spacing: 0.04em; } .cut-tier[data-tier="5"] { -webkit-text-stroke-color: #7b4dff; } .cut-tier[data-tier="6"] { color: #f5d77a; -webkit-text-stroke-color: #111; } @keyframes slam { 0% { transform: scale(3) rotate(-12deg); opacity: 0; } 60% { transform: scale(0.9) rotate(-8deg); opacity: 1; } 100% { transform: scale(1) rotate(-8deg); } } .fcard { position: relative; width: min(74vw, 300px); aspect-ratio: 5 / 7; border-radius: 16px; border: 5px solid var(--edge); display: grid; grid-template-rows: auto 1fr auto auto auto; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); } .fcard .row1 { display: flex; justify-content: space-between; align-items: start; padding: 8px 10px 0; } .fcard .stamp { font-size: 16px; font-weight: 900; color: #fff; padding: 0 8px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, 0.7); transform: rotate(-6deg); line-height: 1.5; } .fcard .one { font-size: 11px; font-weight: 800; opacity: 0.8; font-variant-numeric: tabular-nums; } /* typewriter / letterpress reveal: the letters strike one by one, then the word presses in */ .fcard .g.reveal { animation: typew min(900ms, calc(var(--n, 6) * 70ms)) steps(var(--n, 6), end) both, press 260ms ease-out min(900ms, calc(var(--n, 6) * 70ms)) forwards; } @keyframes typew { from { clip-path: inset(-25% 100% -25% -4%); } to { clip-path: inset(-25% -8% -25% -4%); } } @keyframes press { 0% { transform: scale(1.07); filter: brightness(1.3); } 100% { transform: none; filter: none; } } .fcard .nm { text-align: center; font-weight: 800; font-size: 19px; line-height: 1.2; padding: 0 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .fcard .rd { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px 8px; font-size: 12px; font-weight: 700; padding: 3px 10px 0; } .fcard .rd .pos { font-style: italic; opacity: 0.85; } .fcard .rd .ipa { font-family: var(--ipa); font-weight: 400; opacity: 0.95; } .fcard .st { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; font-size: 12px; font-weight: 800; padding: 6px 10px 10px; font-variant-numeric: tabular-nums; } .fcard .st b { font-size: 10px; opacity: 0.75; margin-right: 2px; } .fcard .lead { display: flex; align-items: center; gap: 6px; } .fcard .newb { display: inline-block; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; font: 900 12px/1.35 var(--ui); letter-spacing: 0.04em; padding: 0 6px; transform: rotate(-6deg); animation: newbPop 420ms cubic-bezier(.2, 1.6, .4, 1) both; } @keyframes newbPop { from { transform: rotate(-6deg) scale(0); } to { transform: rotate(-6deg) scale(1); } } .cut-hint { font-weight: 800; color: #fff; font-size: 13px; opacity: 0.85; } /* ------------------------------------------------------------ panels */ .panel { position: fixed; inset: 0; z-index: 70; background: var(--paper); display: flex; flex-direction: column; } .panel-head { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 8px; border-bottom: 2px solid var(--ink); background: #fff; } .panel-head h2 { margin: 0; font-size: 20px; font-weight: 900; flex: 1; } .panel-body { flex: 1; overflow-y: auto; padding: 12px 14px calc(24px + env(safe-area-inset-bottom, 0px)); } .tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; } .tab { flex: none; border: 2px solid var(--ink); background: #fff; border-radius: 10px; padding: 3px 10px; font-weight: 800; font-size: 13px; display: grid; justify-items: center; line-height: 1.2; } .tab small { font-weight: 700; font-size: 10px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .tab[aria-pressed="true"] { background: var(--yellow); box-shadow: 0 3px 0 var(--ink); } .dex-progress { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font-weight: 800; } .bar { flex: 1; height: 10px; border-radius: 5px; background: rgba(29, 27, 36, 0.1); overflow: hidden; border: 1.5px solid var(--ink); } .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--yellow)); } .dex-grid { display: flex; flex-wrap: wrap; gap: 5px; } .dex-grid .mini { width: 46px; height: 56px; font-size: 30px; cursor: pointer; animation: none; } .dex-grid .mini .n { position: absolute; bottom: 1px; right: 3px; font: 800 9px var(--ui); color: var(--ink-2); } .dex-grid .mini .fv { position: absolute; top: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--yellow); border: 1px solid var(--ink); font: 800 7px/9px var(--ui); color: var(--ink); text-align: center; } .dex-grid .mini[data-tier="6"] .n { color: #f5d77a; } .empty { color: var(--muted); font-weight: 700; padding: 20px 0; } .more-btn { margin-top: 12px; border: 2px solid var(--ink); background: #fff; border-radius: 10px; padding: 4px 14px; font-weight: 800; } .modal { position: fixed; inset: 0; z-index: 80; background: rgba(22, 11, 51, 0.6); display: grid; place-items: center; padding: 12px; } .modal-card { background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; width: min(100%, 860px); max-height: 100%; overflow-y: auto; box-shadow: 0 10px 0 var(--ink); } .modal-head { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: 8px 10px 0; z-index: 3; } .detail { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; padding: 0 18px 20px; } @media (max-width: 720px) { .detail { grid-template-columns: minmax(0, 1fr); justify-items: center; } .detail .info { width: 100%; } } .info { display: grid; gap: 14px; align-content: start; } .info h3 { margin: 0 0 4px; font-size: 13px; font-weight: 900; color: var(--ink-2); letter-spacing: 0.04em; } .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; font-size: 14px; } .kv dt { color: var(--ink-2); font-weight: 700; } .kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; } .regions { display: flex; gap: 8px; flex-wrap: wrap; } .region { display: grid; justify-items: center; gap: 2px; } .region .rg { width: 64px; height: 64px; display: grid; place-items: center; font-size: 46px; line-height: 1; border: 2px solid var(--line); border-radius: 10px; background: #fff; font-weight: 700; } .region small { font-size: 11px; font-weight: 800; color: var(--ink-2); } .pill { display: inline-block; border: 2px solid var(--ink); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 800; margin: 0 4px 4px 0; background: #fff; } .note { font-size: 12px; color: var(--muted); font-weight: 600; } .link { color: var(--link); font-weight: 800; } .var-ch { font-size: 22px; font-weight: 700; margin-right: 6px; } .settings-body { display: grid; gap: 18px; padding: 0 18px 22px; } .settings-body section { display: grid; gap: 8px; } .settings-body h3 { margin: 0; font-size: 14px; font-weight: 900; } .row-btns { display: flex; flex-wrap: wrap; gap: 8px; } .plain-btn { border: 2px solid var(--ink); background: #fff; border-radius: 10px; padding: 4px 12px; font-weight: 800; box-shadow: 0 3px 0 var(--ink); } textarea.io { width: 100%; min-height: 70px; font: 12px ui-monospace, Menlo, monospace; border: 2px solid var(--ink); border-radius: 10px; padding: 6px; } .credits { font-size: 12px; color: var(--ink-2); display: grid; gap: 4px; } .credits a { color: var(--link); } .credits-sub { margin-top: 8px; font-weight: 800; color: var(--ink); } select.sel { font: inherit; border: 2px solid var(--ink); border-radius: 10px; padding: 4px 8px; background: #fff; font-weight: 700; } /* level 7 text readability on dark cosmos */ body.lv7 .hud .dopa .label, body.lv7 .lvname { color: #fff; -webkit-text-stroke-color: #160b33; } body.lv7 .dopa .value { color: #fff; -webkit-text-stroke-color: #160b33; } body.lv7 .dopa .read { color: #ddd; -webkit-text-stroke-color: #160b33; } /* reduced motion */ html.reduce .bg-rays, html.reduce .bg-rainbow, html.reduce #cut .rays { animation: none !important; } html.reduce .face::after, html.reduce .fcard::after, html.reduce .fcard .g.reveal, html.reduce .ct-band { animation: none !important; } html.reduce .face[data-tier="5"], html.reduce .fcard[data-tier="5"] { animation: none !important; } html.reduce .shake { animation: none !important; } @media (min-width: 900px) { .grid10 { gap: 16px; } } /* ------------------------------------------------------------ long play: HUD, home, trophies, missions, ink */ button.mini-logo { border: 0; cursor: pointer; } .dopa .total { font-size: 10px; font-weight: 800; color: var(--ink-2); -webkit-text-stroke: 3px #fff; paint-order: stroke fill; white-space: nowrap; } body.lv7 .dopa .total { color: #ddd; -webkit-text-stroke-color: #160b33; } .icon-btn.ico { position: relative; padding: 4px 7px; line-height: 0; } .icon-btn.ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .badge { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--shu); color: #fff; font: 900 11px/18px var(--ui); border: 2px solid #fff; } .pk-extra { font-weight: 900; font-size: 12px; color: var(--pink); margin-left: 3px; } .ticket-btn { border: 3px solid var(--ink); border-radius: 14px; padding: 5px 16px; font-weight: 900; font-size: 14px; color: #fff; box-shadow: 0 4px 0 var(--ink); background: linear-gradient(90deg, #ff4f9a, #ffb33d, #3ccf8e, #2ec5e8, #7b4dff); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); } .ticket-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); } .schip.ink { background: #1d1b24; color: #fff; } .stage-home { position: absolute; left: 10px; top: 6px; z-index: 4; border: 2px solid var(--ink); background: #fff; border-radius: 999px; padding: 2px 12px; font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 var(--ink); } /* home */ .home { width: min(100%, 520px); max-height: 100%; overflow-y: auto; display: grid; gap: 10px; padding: 2px 2px 8px; } .home-rank { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.92); border: 2px solid var(--ink); border-radius: 14px; padding: 8px 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; } .rank-badge { flex: none; font-weight: 900; font-size: 15px; color: #fff; background: var(--ink); border-radius: 10px; padding: 3px 10px; box-shadow: 0 3px 0 var(--shu); white-space: nowrap; } .rank-badge.big { font-size: 22px; padding: 6px 14px; } .rank-info { flex: 1; min-width: 0; display: grid; gap: 3px; } .rank-info small { font-size: 11px; font-weight: 800; color: var(--ink-2); } .rank-bar { height: 10px; border-radius: 5px; background: rgba(29, 27, 36, 0.1); border: 1.5px solid var(--ink); overflow: hidden; } .rank-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--purple)); } .home-daily { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; background: linear-gradient(120deg, #fff8e0, #ffe9f3); border: 2px solid var(--ink); border-radius: 14px; padding: 8px 12px; box-shadow: 0 3px 0 var(--ink); } .hd-g { flex: none; min-width: 64px; max-width: 52vw; height: 64px; padding: 0 12px; display: grid; place-items: center; font-size: min(34px, calc(230px / var(--n, 6))); line-height: 1; font-weight: 800; white-space: nowrap; background: #fff; border: 2px solid var(--shu); border-radius: 12px; } .hd-t { display: grid; gap: 1px; min-width: 0; } .hd-t b { font-size: 13px; color: var(--shu); } .hd-n { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hd-t small { font-size: 11px; font-weight: 800; color: var(--pink); } .home-mis { background: rgba(255, 255, 255, 0.92); border: 2px solid var(--ink); border-radius: 14px; padding: 8px 12px; box-shadow: 0 3px 0 var(--ink); display: grid; gap: 6px; } .hm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .hm-head b { font-size: 14px; } .hm-head small { font-size: 11px; font-weight: 800; color: var(--ink-2); text-align: right; } .hm-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; } .hm-row.big { font-size: 15px; padding: 8px 0; border-bottom: 1px dashed var(--line); } .hm-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm-row.big .hm-t { white-space: normal; } .hm-bar { height: 8px; border-radius: 4px; background: rgba(29, 27, 36, 0.1); overflow: hidden; } .hm-bar i { display: block; height: 100%; background: var(--pink); } .hm-n { font-weight: 900; font-size: 12px; min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; } .hm-row.done .hm-t { color: var(--muted); text-decoration: line-through; } .hm-row.done .hm-bar i { background: var(--green); } .hm-row.done .hm-n { color: var(--green); } .home-hint { margin: 0; font-weight: 700; color: var(--ink-2); font-size: 13px; background: rgba(255, 255, 255, 0.85); border-radius: 10px; padding: 6px 10px; } .home .stats { font-size: 12px; color: var(--muted); text-align: center; font-weight: 700; } /* toasts */ #toasts { position: fixed; left: 50%; top: calc(96px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 90; display: grid; gap: 6px; width: min(92vw, 380px); pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; background: #1d1b24; color: #fff; border-radius: 14px; padding: 7px 12px; box-shadow: 0 4px 0 var(--pink), 0 8px 20px rgba(0, 0, 0, 0.25); animation: toastIn 320ms cubic-bezier(.2, 1.5, .4, 1) both; } .toast.out { animation: toastOut 320ms ease both; } @keyframes toastIn { from { transform: translateY(-16px) scale(0.9); opacity: 0; } } @keyframes toastOut { to { transform: translateY(-10px); opacity: 0; } } .toast-t { display: grid; min-width: 0; line-height: 1.3; } .toast-t b { font-size: 11px; color: var(--yellow); } .toast-t span { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* medals */ .medal { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 900 18px/1 var(--ui); color: #3b2600; border: 2px solid var(--ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), 0 2px 0 var(--ink); } .medal.sm { width: 30px; height: 30px; font-size: 14px; } .medal.big { width: 58px; height: 58px; font-size: 26px; } .m-none { background: #ecebf0; color: #b3afbd; box-shadow: none; border-style: dashed; border-color: #b3afbd; } .m-bronze { background: radial-gradient(circle at 35% 30%, #ffd9b0, #cd7f32 60%, #8a4f1c); } .m-silver { background: radial-gradient(circle at 35% 30%, #ffffff, #c0c4cc 60%, #7d8290); color: #2b2e36; } .m-gold { background: radial-gradient(circle at 35% 30%, #fff6c8, #f2c230 55%, #b8860b); } .m-plat { background: radial-gradient(circle at 35% 30%, #ffffff, #cfe9ff 50%, #7fb2e5); color: #173a5e; } .m-rainbow { background: conic-gradient(#ff8fbf, #ffe066, #8ff0c0, #8fd9ff, #c7a6ff, #ff8fbf); color: #22123a; } .m-rank { background: radial-gradient(circle at 35% 30%, #ffe1ef, #ff4f9a 60%, #b3165f); color: #fff; } .toast .medal { border-color: #fff; box-shadow: none; } /* trophy room */ .tro-sum { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 3px 0 var(--ink); } .tro-sum-i { flex: 1; min-width: 0; display: grid; gap: 4px; } .tro-sum-i b { font-size: 13px; } .tro-sum-i small { font-size: 12px; font-weight: 700; color: var(--ink-2); } .tro-list { display: grid; gap: 8px; margin-top: 6px; } .tr { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; font: inherit; color: inherit; } button.tr { cursor: pointer; border-color: rgba(29, 27, 36, 0.25); } button.tr:hover { border-color: var(--ink); } .tr.done { background: linear-gradient(90deg, #fffbe8, #ffffff 60%); border-color: #e6c35c; } .tr.secret { background: #f4f3f7; } .tr.fresh { border-color: var(--shu); box-shadow: 0 0 0 2px rgba(229, 64, 47, 0.15); } .tr-new { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 6px; background: var(--shu); color: #fff; font-size: 10px; font-weight: 900; line-height: 16px; vertical-align: 2px; letter-spacing: 0.04em; } .tr-log { cursor: pointer; } .tr-read { flex: none; margin-left: auto; border: 2px solid var(--ink); background: #fff; border-radius: 9px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 800; color: var(--ink); } .tro-readall { justify-self: end; font-size: 12px; } .tr-when { margin-top: 2px; font-size: 11px; color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; } .tr-main { flex: 1; min-width: 0; display: grid; gap: 2px; } .tr-name { font-weight: 900; font-size: 15px; } .tr-desc { font-size: 12px; color: var(--ink-2); font-weight: 600; } .tr-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; } .tr-pips { display: flex; gap: 2px; flex: none; } .pip-m { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(29, 27, 36, 0.4); box-shadow: none; } .pip-m.m-none { background: transparent; border-style: solid; } .tr-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(29, 27, 36, 0.1); overflow: hidden; min-width: 40px; } .tr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--yellow), var(--orange)); } .tr-num { flex: none; font-size: 11px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; } .tro-mis { display: grid; gap: 4px; margin-top: 8px; } .kv.records { margin-top: 12px; font-size: 15px; gap: 6px 16px; } .set-body { padding: 0 18px 20px; display: grid; gap: 10px; } .set-head { display: flex; gap: 14px; align-items: center; } .set-head h3 { margin: 0; font-size: 22px; } .set-count { font-size: 14px; } .dex-grid .mini.miss { opacity: 0.38; border-style: dashed; background: #fff; box-shadow: none; filter: grayscale(0.6); } .dex-grid .mini.miss:hover { opacity: 0.75; } .exch { background: #fff7fb; border: 2px dashed var(--pink); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; } .btn-ink { justify-self: start; border: 3px solid var(--ink); border-radius: 12px; padding: 5px 16px; font-weight: 900; font-size: 15px; background: #1d1b24; color: #fff; box-shadow: 0 4px 0 var(--pink); } .btn-ink[disabled] { opacity: 0.45; cursor: not-allowed; } @media (max-width: 380px) { .hud { gap: 6px; } .icon-btn.ico { padding: 4px 5px; } .hm-row { grid-template-columns: minmax(0, 1fr) 46px auto; } } @media (min-width: 900px) { .tro-list { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------ reward popup, how-to */ .reward { position: fixed; inset: 0; z-index: 88; display: grid; place-items: center; background: rgba(22, 11, 51, 0.6); padding: 16px; } .reward-card { width: min(88vw, 340px); display: grid; justify-items: center; gap: 6px; background: var(--paper); border: 3px solid var(--ink); border-radius: 22px; padding: 22px 20px 20px; text-align: center; box-shadow: 0 8px 0 var(--pink); animation: rewardIn 420ms cubic-bezier(.2, 1.6, .4, 1) both; } @keyframes rewardIn { from { transform: scale(0.6) rotate(-4deg); opacity: 0; } } .reward-title { font-weight: 900; font-size: 28px; color: var(--pink); -webkit-text-stroke: 5px #fff; paint-order: stroke fill; line-height: 1.2; } .reward-sub { font-weight: 800; font-size: 15px; color: var(--ink-2); } .reward-items { display: grid; gap: 8px; margin: 10px 0 12px; } .reward-item { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 900; font-size: 24px; } .ri { flex: none; display: inline-block; } .ri-pack { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ink); background: linear-gradient(to bottom, var(--pink) 0 50%, #fff 50% 100%); } .ri-ticket { width: 34px; height: 22px; border-radius: 6px; border: 3px solid var(--ink); background: linear-gradient(90deg, #ff4f9a, #ffb33d, #3ccf8e, #2ec5e8, #7b4dff); } .ri-ink { width: 22px; height: 26px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #1d1b24; border: 3px solid var(--ink); } .reward-ok { padding: 10px 40px; } .packs { position: relative; } .packs.gain { animation: packGain 900ms ease; } @keyframes packGain { 0% { box-shadow: 0 0 0 0 rgba(255, 79, 154, 0.9); transform: scale(1); } 25% { transform: scale(1.12); } 100% { box-shadow: 0 0 0 16px rgba(255, 79, 154, 0); transform: scale(1); } } .pk-float { position: absolute; right: -6px; top: -18px; font-weight: 900; font-size: 18px; color: var(--pink); -webkit-text-stroke: 4px #fff; paint-order: stroke fill; animation: pkFloat 1400ms ease-out forwards; pointer-events: none; } @keyframes pkFloat { from { transform: translateY(8px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-26px); opacity: 0; } } .link-btn { border: 0; background: none; color: var(--link); font-weight: 800; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 2px 6px; } .howto-body { padding: 0 20px 22px; display: grid; gap: 10px; justify-items: start; } .howto-body h2 { margin: 0; font-size: 22px; } .howto-body p { margin: 0; font-size: 14px; font-weight: 600; } .howto-body .how-lead { font-size: 15px; font-weight: 800; } .how-table { width: 100%; border-collapse: collapse; font-size: 13px; font-weight: 700; } .how-table th { text-align: left; font-size: 11px; color: var(--ink-2); padding: 4px 6px; border-bottom: 2px solid var(--ink); } .how-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); } .how-table td.num { font-variant-numeric: tabular-nums; } .how-table .stamp { display: inline-block; font-size: 12px; font-weight: 900; color: #fff; padding: 0 6px; border-radius: 4px; } .how-ex { font-size: 18px; line-height: 1.1; font-weight: 800; } .howto-body .btn-pop { justify-self: center; margin-top: 6px; } .dex-note { margin: -4px 0 8px; } /* chain result: best card and share */ .best-card { display: flex; align-items: center; gap: 8px; } .best-card .stamp { font-size: 12px; font-weight: 900; color: #fff; padding: 0 6px; border-radius: 4px; } .best-g { font-size: min(30px, calc(220px / var(--n, 6))); line-height: 1.1; font-weight: 800; white-space: nowrap; } .share-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; } .share-btn { font-size: 17px; padding: 8px 20px; background: linear-gradient(#5aa7ff, #2f62d0); } /* rotating backgrounds: a centered square bigger than the screen diagonal, so no corner ever shows on wide screens */ #bg > .bg-rays, #bg > .bg-rainbow { inset: auto; left: 50%; top: 50%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; } /* back-to-title button (top left) */ .back-btn { display: inline-flex; align-items: center; gap: 2px; border: 2px solid var(--ink); background: var(--ink); color: #fff; border-radius: 10px; padding: 4px 9px 4px 5px; font-weight: 900; font-size: 13px; box-shadow: 0 3px 0 var(--shu); white-space: nowrap; } .back-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .share-row { margin-bottom: 14px; } /* new-character badge on rarity chips */ .tchip .nbadge { margin-left: 4px; background: var(--yellow); color: var(--ink); border-radius: 999px; padding: 0 5px; font-size: 11px; font-weight: 900; border: 1.5px solid var(--ink); } .schip.newc { background: var(--yellow); } /* tappable card in the big reveal */ .fcard.tappable { cursor: pointer; } /* favorites and search */ .modal-head { gap: 8px; } .fav-btn { border: 2px solid var(--ink); background: #fff; border-radius: 10px; padding: 3px 10px; font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 var(--ink); } .fav-btn.on { background: var(--yellow); } .tab.fav { border-color: #c8932b; } .dex-search { margin: 0 0 10px; } .dex-search input { width: 100%; font: 700 15px var(--ui); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 12px; background: #fff; } .dex-results { margin-top: 6px; } .fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } .fav-card { position: relative; aspect-ratio: 5 / 7; border-radius: 12px; cursor: pointer; } .fav-card.miss { opacity: 0.45; } .new-legend { margin-top: 6px; } /* long units past the googolplex (e.g. 12.3 million googolplex) */ .dopa .unit.long { font-size: 0.42em; } .dopa .unit.xlong { font-size: 0.34em; } /* title footer: legal / support links */ .legal { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; margin-top: 4px; font-size: 12px; } .legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; } /* ad break: sponsor slot (Zucks) or house promo; footer with the claim button is always visible */ #rwm { position: fixed; inset: 0; z-index: 95; background: rgba(12, 8, 28, 0.82); display: grid; place-items: center; padding: 10px; } #rwm[hidden] { display: none; } .rw-panel { width: min(100%, 440px); max-height: calc(100dvh - 20px); display: flex; flex-direction: column; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 8px 0 var(--ink); overflow: hidden; } .rw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 12px 8px; text-align: center; } .rw-title { margin: 0; font-weight: 800; font-size: 12px; color: var(--ink-2); letter-spacing: 0.08em; } .rw-slot { position: relative; margin: 8px auto 0; width: 100%; max-width: 360px; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .rw-slot > div[id] { width: 100%; display: flex; justify-content: center; } .rw-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 12px; color: var(--ink-2); pointer-events: none; } .rw-foot { flex: 0 0 auto; display: grid; gap: 4px; justify-items: center; border-top: 2px solid var(--ink); background: var(--paper); padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px); } .rw-claim { width: 100%; font-size: 17px; padding: 10px 14px; } .rw-cancel { font-size: 12px; } .wgp { width: 100%; display: grid; gap: 8px; justify-items: center; padding: 22px 16px; border-radius: 14px; border: 2px solid var(--ink); background: linear-gradient(160deg, #eef4ff, #fff3d6); text-align: center; } .wgp .wgp-tag { justify-self: start; font-size: 10px; font-weight: 800; color: var(--ink-2); border: 1px solid var(--ink-2); border-radius: 4px; padding: 0 5px; } .wgp b { font-size: 26px; font-weight: 900; } .wgp p { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); } .wgp a { display: inline-block; margin-top: 4px; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 20px; font-weight: 900; color: #fff; background: linear-gradient(#5aa7ff, #2f62d0); text-decoration: none; box-shadow: 0 4px 0 var(--ink); } .wgp-packs { position: relative; width: 260px; height: 210px; margin: 2px 0 6px; } .wgp-packs .pp { position: absolute; bottom: 0; height: 176px; width: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); } .wgp-packs .pp0 { left: 0; transform: rotate(-12deg); transform-origin: bottom center; } .wgp-packs .pp2 { right: 0; transform: rotate(12deg); transform-origin: bottom center; } .wgp-packs .pp1 { left: 50%; height: 200px; margin-left: -50px; z-index: 2; } .wgp-lic { margin-top: 8px; font-size: 10px; line-height: 1.5; color: var(--ink-2); text-align: center; } .wgp-lic p { margin: 0 0 2px; } .wgp-lic a { color: var(--ink-2); } .rw-donate { font-size: 11px; color: var(--ink-2); text-decoration: none; margin-top: 2px; } .rw-donate:hover { text-decoration: underline; } /* line breaking: with phrase.js active, break only between phrases (CJK); balance short blocks, avoid orphans in paragraphs */ .phrased body { word-break: keep-all; overflow-wrap: break-word; line-break: strict; } p, li, dd { text-wrap: pretty; } .title-note, .tagline, .how-lead, .reward-sub, .reward-title, .wgp p, .wgp b, .toast-t, .idle p, h1, h2 { text-wrap: balance; } /* ---- beyond 1000連 (chain steps 9-17): 1 黄金, 2 暗転, 3 不可思議, 4 無量大数 ---- */ #bg[data-bx] .bg-cosmos { z-index: 0; opacity: 1; } #bg[data-bx] .bg-rays, #bg[data-bx] .bg-rainbow { z-index: 1; } #bg[data-bx] .bg-grid, #bg[data-bx] .bg-blobs { opacity: 0 !important; } #bg[data-bx] .bg-rays { mix-blend-mode: screen; animation-duration: var(--rs, 4s); background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 214, 100, 0.6) 0deg 5deg, rgba(255, 255, 255, 0) 5deg 11deg); } #bg[data-bx="1"] .bg-cosmos { background: radial-gradient(1px 1px at 20% 30%, #fff3c4 60%, transparent 70%), radial-gradient(1.5px 1.5px at 70% 20%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 85% 65%, #fff 60%, transparent 70%), radial-gradient(60% 50% at 50% 46%, #6a470c 0%, #231505 52%, #080502 100%); } #bg[data-bx="1"] .bg-rays { opacity: 0.85; } #bg[data-bx="1"] .bg-rainbow { opacity: 0.1; } #bg[data-bx="2"] .bg-cosmos, #bg[data-bx="3"] .bg-cosmos { background: radial-gradient(1px 1px at 20% 30%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 76% 64%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 58% 12%, #fff 60%, transparent 70%), radial-gradient(50% 42% at 50% 46%, #2c1d06 0%, #0b0703 48%, #000 100%); } #bg[data-bx="2"] .bg-rays, #bg[data-bx="3"] .bg-rays { opacity: 0.16; } #bg[data-bx="2"] .bg-rainbow { opacity: 0; } #bg[data-bx="3"] .bg-rainbow { opacity: 0.2; mix-blend-mode: screen; animation-duration: 3s; } #bg[data-bx="4"] .bg-cosmos { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff 60%, transparent 70%), radial-gradient(1.5px 1.5px at 76% 64%, #fff 60%, transparent 70%), radial-gradient(55% 45% at 50% 46%, #8a5d10 0%, #3a1a5a 45%, #0c0520 100%); } #bg[data-bx="4"] .bg-rays { opacity: 0.9; } #bg[data-bx="4"] .bg-rainbow { opacity: 0.5; mix-blend-mode: screen; animation-duration: 4s; } /* 漢字曼荼羅 */ #bg > .bg-mandala { inset: 0; z-index: 2; opacity: 0; mix-blend-mode: screen; transition: opacity 1400ms ease; pointer-events: none; } .bg-mandala::before { content: ""; position: absolute; left: 50%; top: 46%; width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 150, 0.35) 0%, rgba(230, 185, 60, 0.12) 40%, transparent 70%); } .bg-mandala .mr { position: absolute; left: 50%; top: 46%; width: 132vmin; height: 132vmin; margin: -66vmin 0 0 -66vmin; opacity: 0; transition: opacity 1600ms ease; animation: spin var(--md, 90s) linear infinite; } .bg-mandala .mr:nth-child(2n) { animation-direction: reverse; } .bg-mandala .mr.on { opacity: 0.85; } .bg-mandala svg { width: 100%; height: 100%; display: block; overflow: visible; } .bg-mandala text { font-family: var(--serif-fallback); font-weight: 700; fill: #f3d27a; } .bg-mandala circle { fill: none; stroke: #e6b93c; stroke-width: 2; opacity: 0.55; } #bg[data-bx="2"] > .bg-mandala, #bg[data-bx="3"] > .bg-mandala, #bg[data-bx="4"] > .bg-mandala { opacity: 1; } #bg[data-bx="3"] > .bg-mandala { animation: bxHue 6s linear infinite; } #bg[data-bx="4"] .bg-mandala .mr { animation-duration: calc(var(--md, 90s) / 3); } #bg[data-bx="4"] .bg-mandala text { fill: #fff3c4; } @keyframes bxHue { to { filter: hue-rotate(360deg); } } /* キラーン: a light band sweeping across the whole screen */ .bx-glint { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; display: none; } body[data-bx="1"] .bx-glint, body[data-bx="4"] .bx-glint { display: block; } .bx-glint::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; background: linear-gradient(90deg, rgba(255, 240, 190, 0) 0%, rgba(255, 236, 170, 0.22) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 236, 170, 0.22) 60%, rgba(255, 240, 190, 0) 100%); transform: translateX(-160%) skewX(-18deg); animation: bxGlint var(--gd, 3s) cubic-bezier(.5, 0, .3, 1) infinite; } @keyframes bxGlint { 0% { transform: translateX(-160%) skewX(-18deg); } 40% { transform: translateX(330%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } } /* 極 and later: the screen edge glows gold */ .bx-edge { position: fixed; inset: 0; z-index: 44; pointer-events: none; display: none; box-shadow: inset 0 0 0 3px rgba(255, 222, 120, 0.9), inset 0 0 38px 10px rgba(230, 185, 60, 0.7); animation: bxEdge 1.2s ease-in-out infinite; } body.bx-kiwami .bx-edge { display: block; } @keyframes bxEdge { 50% { box-shadow: inset 0 0 0 5px #fff3c4, inset 0 0 70px 22px rgba(255, 200, 70, 0.95); } } /* set-piece layer */ .bx-veil { position: fixed; inset: 0; z-index: 59; display: grid; place-items: center; overflow: hidden; background: rgba(0, 0, 0, 0); transition: background-color 350ms ease, opacity 450ms ease; } .bx-veil[hidden] { display: none; } .bx-veil.dim { background: rgba(28, 17, 2, 0.74); } .bx-veil.black { background: #000; } .bx-veil.white { background: #fffaf0; transition: background-color 750ms ease; } .bx-veil.out { opacity: 0; transition: opacity 800ms ease; pointer-events: none; } .bx-veil.p1.out { transition-duration: 350ms; } .bx-box { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; } .bx-unit { position: relative; z-index: 1; font-family: var(--serif-fallback); font-weight: 700; line-height: 1.08; white-space: nowrap; } .bx-read { position: relative; z-index: 1; font-weight: 800; font-size: 16px; color: #fff3c4; letter-spacing: 0.04em; } .bx-read sup { font-size: 0.7em; } .bx-sub { position: relative; z-index: 1; margin-top: 4px; font-weight: 900; font-size: clamp(16px, 5vw, 24px); color: #ffe9a0; background: rgba(20, 12, 2, 0.8); border: 2px solid #e6b93c; border-radius: 999px; padding: 3px 16px; box-shadow: 0 0 18px rgba(255, 200, 70, 0.6); white-space: nowrap; } .bx-veil.p1 .bx-unit, .bx-veil.p4 .bx-unit { background: linear-gradient(100deg, #8a5a12 0%, #f7dc7a 22%, #fff8dc 32%, #e6b93c 45%, #a8741c 60%, #ffe9a0 75%, #c8932b 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.02em #3a2504; padding: 0 0.04em; filter: drop-shadow(0 0 16px rgba(255, 200, 70, 0.75)); animation: bxSlam 700ms cubic-bezier(.2, 1.5, .4, 1) both, bxShine 1.5s linear infinite; } .bx-veil.p1 .bx-read, .bx-veil.p1 .bx-sub { animation: bxUp 500ms 250ms ease both; } @keyframes bxShine { from { background-position: 120% 0; } to { background-position: -100% 0; } } @keyframes bxSlam { 0% { transform: scale(2.6); opacity: 0; } 60% { transform: scale(0.94); opacity: 1; } 100% { transform: scale(1); } } @keyframes bxUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* 暗転: fade in from the dark */ .bx-veil.p2 .bx-unit, .bx-veil.p3 .bx-unit.locked { color: #fff8e6; text-shadow: 0 0 18px rgba(255, 220, 140, 0.9), 0 0 48px rgba(230, 185, 60, 0.6); } .bx-veil.p2 .bx-unit { animation: bxFadeIn 1500ms cubic-bezier(.3, .1, .2, 1) both; } @keyframes bxFadeIn { 0% { opacity: 0; filter: blur(18px); transform: scale(1.35); letter-spacing: 0.4em; } 100% { opacity: 1; filter: blur(0); transform: scale(1); letter-spacing: 0; } } .bx-veil.p2 .bx-read, .bx-veil.p3 .bx-read, .bx-veil.p4 .bx-read { opacity: 0; transition: opacity 700ms ease; } .bx-veil .bx-read.on { opacity: 1; } .bx-veil.p2 .bx-sub, .bx-veil.p3 .bx-sub { animation: bxUp 700ms 1500ms ease both; } /* 後光 */ .bx-halo { position: absolute; left: 50%; top: 42%; width: 150vmin; height: 150vmin; margin: -75vmin 0 0 -75vmin; border-radius: 50%; opacity: 0; transform: scale(0.15); pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(255, 240, 190, 0.55) 0%, rgba(230, 185, 60, 0.22) 20%, rgba(230, 185, 60, 0) 52%); } .bx-halo i { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 226, 140, 0.3) 0deg 3deg, transparent 3deg 10deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 58%); mask: radial-gradient(circle, #000 18%, transparent 58%); animation: spin 26s linear infinite; } .bx-halo.go { animation: bxHalo 1700ms cubic-bezier(.2, .8, .2, 1) forwards; } @keyframes bxHalo { to { opacity: 1; transform: scale(1); } } /* 不可思議: scrambled characters with an RGB split */ .bx-veil.p3 .bx-box { animation: bxUp 400ms ease both; } .bx-veil.p3 .bx-unit { color: #eafcff; } .bx-veil.p3 .bx-unit.glitch { animation: bxGlitch 160ms steps(2, end) infinite; } .bx-veil.p3 .bx-unit.locked { animation: bxLock 600ms cubic-bezier(.2, 1.5, .4, 1) both; } @keyframes bxGlitch { 0% { text-shadow: -3px 0 #ff2a6d, 3px 0 #05d9e8; transform: translate(1px, -1px) skewX(5deg); } 50% { text-shadow: 5px 0 #ff2a6d, -5px 0 #05d9e8; transform: translate(-3px, 1px) skewX(-7deg); } 100% { text-shadow: -2px 0 #ff2a6d, 2px 0 #05d9e8; transform: none; } } @keyframes bxLock { 0% { transform: scale(1.25); } 100% { transform: scale(1); } } html.bx-invert #bg, html.bx-invert #app { filter: invert(1) hue-rotate(180deg); } #bg, #app { transition: filter 600ms ease; } /* 無量大数: a point of light, then white-out */ .bx-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px 6px #fff, 0 0 60px 22px rgba(255, 230, 160, 0.8); opacity: 0; } .bx-dot.go { animation: bxDot 1800ms cubic-bezier(.6, 0, .9, .4) forwards; } .bx-dot.go.boom { animation: bxDotBoom 750ms ease-in forwards; } @keyframes bxDot { 0% { opacity: 0; transform: scale(0.1); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(8); } } @keyframes bxDotBoom { from { opacity: 1; transform: scale(8); } to { opacity: 0; transform: scale(90); } } .bx-veil.p4 .bx-unit { animation: bxSlam 900ms cubic-bezier(.2, 1.4, .4, 1) both, bxShine 1.3s linear infinite; -webkit-text-stroke: 0.025em #3a2504; } .bx-veil.p4 .bx-read { color: #5a3a06; } .bx-veil.p4 .bx-halo { background: radial-gradient(circle, rgba(255, 214, 110, 0.7) 0%, rgba(255, 190, 60, 0.3) 22%, rgba(255, 190, 60, 0) 52%); } .bx-veil.p4 .bx-halo i { background: repeating-conic-gradient(#ff8fbf 0deg 3deg, transparent 3deg 6deg, #ffd23f 6deg 9deg, transparent 9deg 12deg, #8fd9ff 12deg 15deg, transparent 15deg 18deg); opacity: 0.55; } .bx-veil.p4 .bx-sub { animation: bxUp 600ms 500ms ease both; } /* the rest of the screen during those phases */ .banner.bxb .b-main { background: linear-gradient(100deg, #b07a1a 0%, #f7dc7a 25%, #fff8dc 35%, #e6b93c 50%, #ffe9a0 72%, #c8932b 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.03em #2a1a02; text-shadow: none; padding: 0 0.06em; animation: bxShine 1.4s linear infinite; } .banner.bxb4 .b-main { background-image: linear-gradient(100deg, #ffd23f 0%, #ff8fbf 20%, #fff8dc 35%, #8fd9ff 50%, #e6b93c 65%, #c7a6ff 82%, #ffd23f 100%); } .banner.bxb .b-sub { color: #ffe9a0; -webkit-text-stroke-color: #2a1a02; } .pips.bx .pip.on { background: linear-gradient(90deg, #c8932b, #fff3c4, #e6b93c) !important; border-color: #8a5a12; box-shadow: 0 0 6px rgba(255, 210, 80, 0.9); } body[data-bx] .lvname { color: #ffe08a; -webkit-text-stroke-color: #2a1a02; } body[data-bx] .chain-tag { background: linear-gradient(#f7dc7a, #c8932b); color: #2a1a02; box-shadow: 0 0 10px rgba(255, 210, 80, 0.8); } body[data-bx="2"] .chain-tag, body[data-bx="3"] .chain-tag { background: #000; color: #ffe08a; border: 1.5px solid #e6b93c; } .judge.bx1 { background: rgba(28, 17, 2, 0.62); } .judge.bx2, .judge.bx3 { background: rgba(0, 0, 0, 0.84); } .judge.bx .judge-title { color: #ffe08a; -webkit-text-stroke-color: #2a1a02; } .bx-result { border-color: #c8932b !important; box-shadow: 0 0 0 3px #f7dc7a, 0 0 30px rgba(255, 200, 70, 0.8) !important; } .bx-stamp { justify-self: center; margin: -4px auto 8px; width: fit-content; font-weight: 900; font-size: 15px; color: #2a1a02; background: linear-gradient(100deg, #c8932b, #fff3c4, #e6b93c); border: 2px solid #3a2504; border-radius: 999px; padding: 2px 14px; } html.reduce .bx-glint, html.reduce .bx-halo i { display: none !important; } html.reduce .bg-mandala .mr, html.reduce #bg > .bg-mandala, html.reduce .bx-edge, html.reduce .bx-veil .bx-unit, html.reduce .banner.bxb .b-main { animation: none !important; } /* which words appear (title screen: US / UK) */ .rset { display: grid; justify-items: center; gap: 4px; } .rset-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; } .rset-h { font-weight: 800; font-size: 13px; color: var(--ink-2); } .kchk { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ink); background: #fff; border-radius: 10px; padding: 4px 10px 4px 8px; font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; user-select: none; } .kchk input { width: 18px; height: 18px; margin: 0; accent-color: var(--shu); cursor: pointer; } .kchk:has(input:checked) { background: var(--yellow); } .kchk.locked { cursor: default; } .kchk.locked input { cursor: default; opacity: 0.75; } .rset-note { font-size: 12px; color: var(--ink-2); text-align: center; max-width: 30em; } /* ---- scene backgrounds (chain step 5+): picture under the effect layers ---- */ #bg[data-scene] .bg-cosmos { z-index: 0; opacity: 1; } #bg[data-scene] .bg-rays, #bg[data-scene] .bg-rainbow { z-index: 1; } #bg[data-scene] .bg-grid, #bg[data-scene] .bg-blobs { opacity: 0 !important; } #bg > .bg-scene { inset: 0; z-index: 0; opacity: 0; transition: opacity 1400ms ease; pointer-events: none; overflow: hidden; } #bg > .bg-scene.on { opacity: 1; } /* a 100vmax square placed like background-size: cover, so picture-relative marks stay put */ .sc-pic { position: absolute; width: 100vmax; height: 100vmax; left: calc((100vw - 100vmax) * var(--px, 0.5)); top: calc((100vh - 100vmax) * 0.5); background-size: 100% 100%; transform-origin: 50% 50%; animation: scDrift 38s ease-in-out infinite alternate; } @keyframes scDrift { from { transform: scale(1.0); } to { transform: scale(1.07); } } .bg-scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 45%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45) 100%), rgba(0, 0, 0, var(--dim, 0.18)); } @keyframes scFlicker { 0%, 100% { opacity: 1; } 91% { opacity: 1; } 92% { opacity: 0.35; } 93% { opacity: 1; } 95% { opacity: 0.5; } 96% { opacity: 1; } } .sc-ink { color: #17110c; line-height: 1; font-weight: 700; opacity: 0.9; text-shadow: 0 0 1px rgba(23, 17, 12, 0.6); filter: blur(0.2px); } .sc-seal { margin-top: 0.25em; font-size: 0.26em; line-height: 1; color: #fff4ec; background: #c8322a; padding: 0.12em; border-radius: 0.08em; font-family: var(--serif-fallback); font-weight: 700; opacity: 0.9; } /* the effect layers are toned down so the picture shows */ #bg[data-scene="city"] .bg-rays { opacity: 0.2; } #bg[data-scene="city"] .bg-rainbow { opacity: 0.14; } #bg[data-scene="sky"] .bg-rays { opacity: 0.38; } #bg[data-scene="sky"] .bg-rainbow { opacity: 0; } #bg[data-scene="tea"] .bg-rays { opacity: 0.08; } #bg[data-scene="tea"] > .bg-mandala, #bg[data-scene="void"] > .bg-mandala { opacity: 0.55; } #bg[data-scene="void"] .bg-rainbow { opacity: 0.1; } #bg[data-scene="heaven"] .bg-rays { opacity: 0.32; } #bg[data-scene="heaven"] .bg-rainbow { opacity: 0.2; } #bg[data-scene="heaven"] > .bg-mandala { opacity: 0.4; } /* ---- the masked calligrapher: cut-ins ---- */ .chara { position: fixed; inset: 0; z-index: 57; display: grid; place-items: center; align-content: center; gap: 12px; background: rgba(0, 0, 0, 0.42); animation: chFade 200ms ease both; } .chara.out { opacity: 0; transition: opacity 190ms ease; } @keyframes chFade { from { opacity: 0; } } .ch-band { position: relative; width: 100vw; max-width: 1100px; aspect-ratio: 16 / 9; max-height: 64vh; overflow: hidden; background: #000; border-top: 3px solid #b8892a; border-bottom: 3px solid #b8892a; box-shadow: 0 0 40px rgba(0, 0, 0, 0.85); animation: chSlide 520ms cubic-bezier(.2, 1, .3, 1) both; } .ch-pic { position: absolute; inset: 0; background-size: cover; background-position: 30% 50%; animation: chDrift 1.2s ease-out both; } @keyframes chSlide { from { transform: translateX(100%) skewX(-14deg); } to { transform: none; } } @keyframes chDrift { from { transform: scale(1.14) translateX(3%); } to { transform: scale(1.02); } } .ch-line { position: absolute; right: 4%; top: 50%; width: 44%; transform: translateY(-50%); font-family: var(--serif-fallback); font-weight: 700; color: #f3ead6; font-size: clamp(16px, 4.4vw, 34px); line-height: 1.5; text-shadow: 0 0 12px #000, 0 0 3px #000; animation: chText 900ms 380ms ease both; } @keyframes chText { from { opacity: 0; letter-spacing: 0.3em; filter: blur(6px); } to { opacity: 1; letter-spacing: 0.04em; filter: none; } } .chara-b .ch-band { aspect-ratio: auto; height: min(30vw, 250px); max-height: none; border-color: #e6b93c; animation: chOpen 360ms cubic-bezier(.2, 1, .3, 1) both; } .chara-b .ch-pic { background-position: 50% 42%; animation: chZoom 1s ease-out both; } @keyframes chOpen { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes chZoom { from { transform: scale(1.25); filter: brightness(0.4); } 30% { filter: brightness(1.25); } to { transform: scale(1.05); filter: none; } } .chara-b .ch-line { position: static; width: auto; transform: none; text-align: center; font-size: clamp(24px, 7.5vw, 46px); color: #ffe08a; text-shadow: 0 0 16px rgba(255, 190, 60, 0.8), 0 0 3px #000; } .chara-c { background: rgba(26, 16, 2, 0.6); } .chara-c .ch-band { border-color: #fff3c4; box-shadow: 0 0 60px rgba(255, 200, 70, 0.85); } .chara-c .ch-line { top: 28%; color: #fff3c4; } .ch-stamp { position: absolute; right: 5%; bottom: 9%; font-weight: 900; font-size: clamp(30px, 10vw, 84px); color: #ffe08a; -webkit-text-stroke: 0.05em #2a1a02; paint-order: stroke fill; white-space: nowrap; transform: rotate(-8deg); animation: chStamp 500ms 520ms cubic-bezier(.2, 1.6, .4, 1) both; } @keyframes chStamp { from { transform: rotate(-8deg) scale(3); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } } /* the fox cut-ins on slanted bands too (no square boxes): the band tilts, the picture stays upright */ .ch-band { width: 132vw; max-width: none; rotate: -7deg; } .ch-pic { rotate: 7deg; scale: 1.22; } .chara-b .ch-band { width: 132vw; rotate: 6deg; } .chara-b .ch-pic { rotate: -6deg; scale: 1.3; } .ch-stamp { right: 19%; } /* A and C: the masked face is near the top of the picture; keep it in the band */ .chara-a .ch-pic, .chara-c .ch-pic { background-position: 30% 8%; transform-origin: 30% 12%; } html.reduce .sc-pic, html.reduce .ch-band, html.reduce .ch-pic, html.reduce .ch-line, html.reduce .ch-stamp { animation: none !important; } /* ---- scene marks (blank signs, lanterns, boards, stones, scrolls in the pictures) ---- */ .sc-mark { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.02; font-weight: 700; } .sc-k-neon { color: #1a0620; text-shadow: 0 0 0.12em var(--glow), 0 0 0.3em var(--glow); animation: scFlicker 5.5s steps(1) infinite; } .sc-k-neon:nth-child(2n) { animation-delay: -2.1s; } .sc-k-neon:nth-child(3n) { animation-delay: -3.7s; } .sc-k-ink { color: #17110c; opacity: 0.86; mix-blend-mode: multiply; text-shadow: 0 0 1px rgba(23, 17, 12, 0.5); } .sc-k-road { color: #f6f6ee; opacity: 0.92; text-shadow: 0 0 2px rgba(0, 0, 0, 0.35); } .sc-k-stone { color: rgba(32, 28, 26, 0.78); text-shadow: 0.03em 0.03em 0 rgba(255, 255, 255, 0.16), -0.02em -0.02em 0 rgba(0, 0, 0, 0.5); } .sc-k-scroll { line-height: 1; } #bg[data-scene="warm"] .bg-rays { opacity: 0.22; } #bg[data-scene="warm"] .bg-rainbow { opacity: 0.1; } html.reduce .sc-k-neon { animation: none !important; } /* ---- the cast: full-screen cut-ins on slanted panels ---- */ .cut-ov { position: fixed; inset: 0; z-index: 57; overflow: hidden; background: rgba(4, 3, 2, 0.62); animation: chFade 160ms ease both; --rim: #fdf8ec; } .cut-ov.gold { --rim: #f2c94c; } .cut-ov.ember { --rim: #e2553a; } .cut-ov.out { opacity: 0; transition: opacity 240ms ease; } .sh { position: absolute; inset: 0; background: var(--rim); animation: shIn 260ms cubic-bezier(.15, .9, .25, 1) both; } @keyframes shIn { from { transform: translateX(var(--dx, 0px)); } to { transform: none; } } .sh-in { position: absolute; inset: 0; background: #120d08; overflow: hidden; } .sh-pic { position: absolute; background-size: 100% 100%; background-repeat: no-repeat; animation: shDrift 1.6s ease-out both; } .sh-pic.eye { -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); } @keyframes shDrift { from { translate: 2.5% 0; scale: 1.08; filter: brightness(1.9) contrast(1.1); } 22% { filter: none; } to { translate: 0 0; scale: 1; } } /* a glint sweeps along each strip; "hot" strips get a red-orange edge glow */ .sh-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.5) 49%, rgba(255, 240, 200, 0.2) 53%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 130% 0; animation: shGlint 760ms var(--gd, 160ms) ease-out both; } @keyframes shGlint { from { background-position: 130% 0; } to { background-position: -40% 0; } } .cut-ov.hot .sh-in::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: linear-gradient(90deg, rgba(210, 60, 20, 0.5), rgba(255, 140, 60, 0) 30%, rgba(255, 140, 60, 0) 70%, rgba(210, 60, 20, 0.5)); } .cut-ov.gold .sh-in::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(90deg, rgba(255, 200, 60, 0.55), transparent 35%, transparent 65%, rgba(255, 200, 60, 0.55)); } /* the single strip leaves the game visible above and below */ .cut-eye.one { background: rgba(4, 3, 2, 0.5); } /* VS */ .cut-vsmark { position: absolute; left: 50%; top: 50%; z-index: 2; font-weight: 900; font-style: italic; font-size: clamp(56px, 18vw, 150px); line-height: 1; color: #ffe08a; -webkit-text-stroke: 0.05em #2a1a02; paint-order: stroke fill; text-shadow: 0 0 28px rgba(255, 190, 60, 0.9); transform: translate(-50%, -50%) rotate(-10deg); animation: vsStamp 460ms 300ms cubic-bezier(.2, 1.6, .4, 1) both; } @keyframes vsStamp { from { transform: translate(-50%, -50%) rotate(-10deg) scale(3); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-10deg) scale(1); opacity: 1; } } /* everyone: shards slam in one by one */ .cut-all { background: rgba(14, 9, 2, 0.8); } .cut-all .sh { opacity: 0; animation: none; } .cut-all .sh.in { opacity: 1; animation: shSlam 280ms cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes shSlam { from { opacity: 0; transform: scale(1.45); filter: brightness(2.4); } to { opacity: 1; transform: none; filter: none; } } .cut-all .sh-in::after { animation: none; } .cut-title { position: absolute; left: 50%; top: 50%; z-index: 2; white-space: nowrap; opacity: 0; font-family: var(--serif-fallback); font-weight: 900; font-size: clamp(52px, 18vw, 170px); line-height: 1; color: #ffe08a; -webkit-text-stroke: 0.04em #2a1a02; paint-order: stroke fill; text-shadow: 0 0 30px rgba(255, 190, 60, 0.9), 0 0 80px rgba(255, 220, 120, 0.6); transform: translate(-50%, -50%) rotate(-8deg); } .cut-title.in { opacity: 1; animation: cutTitle 700ms cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes cutTitle { from { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.6); letter-spacing: 0.4em; } to { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); letter-spacing: 0.02em; } } .cut-ov.out .sh, .cut-all.out .sh.in { animation: shOut 240ms ease-in both; } @keyframes shOut { from { transform: none; } to { transform: translateX(calc(var(--dx, 0px) * -0.4)); } } html.reduce .sh, html.reduce .sh-pic, html.reduce .sh-in::after, html.reduce .cut-vsmark, html.reduce .cut-all .sh.in, html.reduce .cut-title.in { animation: none !important; } /* ---- the cast collection (人物 tab) ---- */ .tab.cast { } .cast-h { margin: 14px 0 6px; font-size: 14px; } .cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .cast-card { display: grid; gap: 6px; padding: 8px; border: 2px solid var(--ink); border-radius: 12px; background: #1c140c; color: #f3ead6; cursor: pointer; } .cast-card.miss { cursor: default; opacity: 0.6; } .cast-card b { font-size: 13px; text-align: center; } .cast-faces { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .cast-face { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #0e0a06; border: 1px solid #b8892a; display: grid; place-items: center; } .cast-pic { position: absolute; inset: 0; background-repeat: no-repeat; } .cast-q { font-size: 26px; font-weight: 900; color: #5a4a36; } .cast-face i { position: absolute; left: 4px; bottom: 3px; font-style: normal; font-size: 11px; font-weight: 800; color: #1d140a; background: #d8b45a; padding: 0 5px; border-radius: 3px; } .cast-modal { max-width: min(92vw, 460px); } .cast-big img { display: block; width: 100%; border-radius: 10px; border: 2px solid #b8892a; } .cast-sw { display: flex; gap: 6px; justify-content: center; margin: 10px 0 4px; } .cast-sw .tab[disabled] { opacity: 0.45; } .cast-name { text-align: center; margin: 6px 0 2px; } .cast-prof { text-align: center; margin: 0 4px 6px; line-height: 1.6; } /* chain result: closed only with its button; the last one can be opened again */ .result-close { display: block; width: 100%; margin-top: 12px; } .stage-last { left: auto; right: 10px; } .home-last { align-self: center; justify-self: center; margin: 2px auto 0; } /* skip button: placed under the meter by showSkip(); this is only the fallback */ .skip-btn { top: calc(112px + env(safe-area-inset-top, 0px)); } /* the chain tag lines up on the right with the settings and skip buttons; the meter stays centred in the space left */ .meter { position: relative; } .meter .chain-tag { position: absolute; right: 12px; top: 50%; transform: translateY(-60%); white-space: nowrap; } .meter:has(> .chain-tag:not([hidden])) { padding-right: 112px; } /* ---- bonus pulls: strips at the top (no dimming), the label, the shrinking card list ---- */ .cut-ov.cut-top { background: transparent; } .cut-ov.cut-top .sh { pointer-events: auto; } .cut-label { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; justify-items: center; gap: 2px; transform: translate(-50%, -50%) rotate(-6deg); white-space: nowrap; text-align: center; animation: cutLbl 520ms cubic-bezier(.2, 1.6, .4, 1) both; pointer-events: none; } .cut-label.top { left: auto; right: 4%; transform: rotate(-6deg); justify-items: end; } .cut-label b { font-weight: 900; font-size: clamp(20px, 6vw, 46px); line-height: 1.1; color: #ffe08a; -webkit-text-stroke: 0.06em #2a1a02; paint-order: stroke fill; text-shadow: 0 0 18px rgba(255, 190, 60, 0.85); } .cut-label span { font-weight: 900; font-size: clamp(14px, 4vw, 26px); color: #fff; -webkit-text-stroke: 0.08em #2a1a02; paint-order: stroke fill; } @keyframes cutLbl { from { opacity: 0; scale: 2.4; } to { opacity: 1; scale: 1; } } .fall .mini.bonus { border-color: #e6b93c; box-shadow: 0 0 0 1px rgba(230, 185, 60, 0.5); } .fall.dense { gap: 2px; } .fall.dense .mini { min-width: 18px; max-width: 74px; height: 16px; padding: 0 3px; font-size: 9px; border-width: 1.5px; border-radius: 4px; transition: height 400ms ease, font-size 400ms ease; } html.reduce .cut-label { animation: none !important; } /* collection: show the characters not owned yet */ .dex-miss-btn { justify-self: start; margin: 2px 0 8px; border: 2px solid var(--ink); background: #fff; border-radius: 999px; padding: 3px 12px; font-weight: 800; font-size: 13px; box-shadow: 0 2px 0 var(--ink); } .dex-miss-btn.on { background: var(--ink); color: #fff; } .dex-grid.missview .mini.miss { opacity: 0.7; filter: grayscale(0.3); } /* ---- LR cut-in: same timing as other cut-ins, louder look ---- */ #flash.gold { background: radial-gradient(circle at 50% 45%, #fffbe6, #ffd76a 45%, #e6a52a); } #cut.lr { background: radial-gradient(60% 50% at 50% 48%, rgba(96, 62, 8, 0.6), rgba(8, 5, 0, 0.9) 78%); } #cut.lr .rays { animation-duration: 5s; } #cut .rays2 { background: repeating-conic-gradient(from 4deg, rgba(255, 255, 255, 0.24) 0deg 3deg, transparent 3deg 22deg); animation: spin 7s linear infinite reverse; mix-blend-mode: screen; } .lr-beam { position: absolute; left: 50%; top: -10%; width: 50vmin; height: 120%; margin-left: -25vmin; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 222, 130, 0.5) 32%, rgba(255, 255, 240, 0.9) 50%, rgba(255, 222, 130, 0.5) 68%, transparent); filter: blur(6px); animation: lrBeam 2.2s ease-out both; } @keyframes lrBeam { 0% { transform: scale(0.04, 0); opacity: 0; } 12% { transform: scale(0.04, 1); opacity: 1; } 30% { transform: scale(1, 1); opacity: 0.95; } 100% { transform: scale(0.8, 1); opacity: 0.45; } } .lr-shock { position: absolute; left: 50%; top: 50%; width: 20vmin; height: 20vmin; margin: -10vmin 0 0 -10vmin; border-radius: 50%; pointer-events: none; border: 6px solid rgba(255, 220, 120, 0.95); box-shadow: 0 0 24px rgba(255, 210, 90, 0.9), inset 0 0 18px rgba(255, 240, 200, 0.7); animation: lrShock 950ms cubic-bezier(.15, .7, .3, 1) both; } @keyframes lrShock { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(7); opacity: 0; border-width: 1px; } } #cut.lr .cut-tier[data-tier="6"] { background: linear-gradient(100deg, #b07a1a 15%, #fff6d0 38%, #ffe08a 50%, #e6b93c 62%, #b07a1a 85%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px rgba(255, 205, 80, 0.95)); animation: slam 520ms cubic-bezier(.2, 1.6, .4, 1) both, lrShine 1.2s linear 0.4s infinite; } @keyframes lrShine { from { background-position: 130% 0; } to { background-position: -130% 0; } } .lr-sub { margin-top: -10px; font-weight: 900; font-size: clamp(12px, 3.6vw, 18px); letter-spacing: 0.42em; padding-left: 0.42em; color: #fff3c4; text-shadow: 0 0 10px rgba(255, 200, 80, 0.95), 0 2px 0 #111; animation: lrSub 600ms ease-out 250ms both; } @keyframes lrSub { from { opacity: 0; letter-spacing: 1.2em; } to { opacity: 1; letter-spacing: 0.42em; } } .fcard.lr-card { animation: lrPop 600ms cubic-bezier(.2, 1.5, .4, 1) both, lrAura 0.9s ease-in-out 0.6s infinite alternate; } @keyframes lrPop { 0% { transform: scale(0.55) rotate(-5deg); } 100% { transform: none; } } @keyframes lrAura { from { box-shadow: 0 0 18px 4px rgba(255, 210, 90, 0.75), 0 16px 40px rgba(0, 0, 0, 0.35); } to { box-shadow: 0 0 52px 16px rgba(255, 228, 140, 1), 0 16px 40px rgba(0, 0, 0, 0.35); } } .back.glow-6 { box-shadow: 0 0 30px 10px rgba(255, 205, 80, 1); animation: lrGlow 0.28s ease-in-out infinite alternate; } @keyframes lrGlow { to { box-shadow: 0 0 44px 16px rgba(255, 240, 170, 1); } } body.lr-on #fx-front { z-index: 62; pointer-events: none; } html.reduce .lr-shock, html.reduce #cut .rays2 { display: none; } html.reduce .lr-beam, html.reduce .fcard.lr-card, html.reduce .back.glow-6, html.reduce #cut.lr .cut-tier[data-tier="6"] { animation: none !important; } /* ------------------------------------------------------------ English edition: words instead of single glyphs */ .dex-grid { gap: 7px 6px; } .dex-grid .mini { width: auto; min-width: 34px; height: 32px; padding: 0 10px; font-size: 15px; max-width: 168px; cursor: pointer; animation: none; } .dex-grid .mini .n { position: absolute; bottom: -6px; right: -4px; font: 800 9px/1.35 var(--ui); color: var(--ink); background: #fff; border: 1px solid var(--ink); border-radius: 6px; padding: 0 3px; } .dex-grid .mini[data-tier="6"] .n { color: var(--ink); } .dex-grid .mini.miss { color: #6b6575; } .mini .n { position: absolute; bottom: -5px; right: -3px; font: 800 8px/1.3 var(--ui); background: #fff; color: var(--ink); border: 1px solid var(--ink); border-radius: 5px; padding: 0 2px; } .fall { align-content: flex-start; gap: 4px; } /* gold strip across the top: bonus-pull cut-in without artwork */ .cut-ov.cut-text { background: rgba(4, 3, 2, 0.35); } .ct-band { position: absolute; left: -6%; right: -6%; top: 16%; transform: rotate(-4deg); display: grid; justify-items: center; gap: 2px; padding: 10px 14px 12px; border-top: 4px solid #3a2400; border-bottom: 4px solid #3a2400; background: linear-gradient(90deg, #7a4a00, #e6b93c 20%, #fff0b0 50%, #e6b93c 80%, #7a4a00); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); animation: ctBand 1200ms cubic-bezier(.2, 1.2, .3, 1) both; } .ct-band b { font-weight: 900; font-size: clamp(22px, 7vw, 46px); line-height: 1.1; color: #2a1700; letter-spacing: 0.02em; white-space: nowrap; } .ct-band span { font-weight: 800; font-size: clamp(12px, 3.6vw, 20px); color: #4a2f00; } .cut-text.hot .ct-band { background: linear-gradient(90deg, #5a0f08, #e5402f 20%, #ff9d6b 50%, #e5402f 80%, #5a0f08); border-color: #2a0804; } .cut-text.hot .ct-band b { color: #fff; -webkit-text-stroke: 0.05em #2a0804; paint-order: stroke fill; } .cut-text.hot .ct-band span { color: #ffe9d8; } @keyframes ctBand { 0% { transform: translateX(115%) rotate(-4deg); } 16% { transform: translateX(0) rotate(-4deg); } 86% { transform: translateX(0) rotate(-4deg); } 100% { transform: translateX(-115%) rotate(-4deg); } } /* detail sheet: every block names its source */ .blk { display: grid; gap: 5px; } .blk > h3 { margin: 0; } .srcrow { font-size: 11px; font-weight: 600; color: var(--muted); } .srcrow a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } .pills { display: flex; flex-wrap: wrap; } .ipa-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; } .ipa-txt { font-family: var(--ipa); font-weight: 400; font-size: 17px; } .speak { border: 2px solid var(--ink); background: #fff; border-radius: 999px; padding: 0 10px; font-weight: 800; font-size: 12px; line-height: 1.6; box-shadow: 0 2px 0 var(--ink); } .speak:active { transform: translateY(2px); box-shadow: none; } .tr-list2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 15px; } .tr-list2 li b { font-weight: 800; } .tr-list2 small { color: var(--ink-2); font-weight: 600; font-size: 12px; } .tr-list2.inline { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; } .tag { display: inline-block; font-size: 10px; font-weight: 800; color: #fff; background: var(--ink-2); border-radius: 4px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; } details.others { border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; } details.others summary { cursor: pointer; font-weight: 800; font-size: 13px; color: var(--ink-2); } .olang { margin: 5px 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; } .defs { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; font-size: 14px; } .dpos { font-style: italic; font-weight: 800; color: var(--ink-2); margin-right: 6px; font-size: 12px; } .dreg { margin-right: 4px; } .dsrc { color: var(--muted); } ul.ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ex li { border-left: 3px solid var(--line); padding-left: 10px; } .ex-en { font-size: 14px; font-weight: 600; } .ex-en b { font-weight: 900; background: linear-gradient(transparent 58%, rgba(255, 210, 63, 0.6) 58%); } .ex-tr { font-size: 13px; color: var(--ink-2); } .ex-by { font-size: 10.5px; color: var(--muted); } .ex-by a { color: var(--link); } .ety { font-size: 14px; font-style: italic; } .pairbtn { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; border: 2px solid var(--ink); background: #fff; border-radius: 12px; padding: 4px 12px; font-weight: 800; box-shadow: 0 3px 0 var(--ink); text-align: left; } .pairbtn .pw { font-size: 20px; } .pairbtn small { color: var(--ink-2); font-weight: 700; } /* how-to and credits */ .how-zipf { font-size: 13px; color: var(--ink-2); } .how-credits { font-size: 12px; color: var(--ink-2); } .how-credits a { color: var(--link); font-weight: 800; } .bx-exp { display: block; } .bx-exp sup, .unit-announce .ur sup, .dopa .read sup { font-size: 0.7em; } .unit-announce .ur sup sup { font-size: 0.8em; } /* per-row source / via / count hints in the detail sheet */ .rsrc { display: block; font-size: 11px; font-weight: 600; color: var(--muted); } .rsrc a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } .via { color: var(--ink-2); font-style: italic; } .tc { color: var(--muted); } .via-line { font-size: 11px; font-weight: 600; color: var(--ink-2); font-style: italic; } .fo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; font-weight: 600; } .fo-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .search-prog { padding: 4px 0; }