/* style.css — owner A7. Contract: docs/SPEC.md §9 UI, §12.7 (CSS ownership); docs/design/ux.md §4.1–§4.2, art.md §2 * * NECK CLUB · 长颈鹿大战 — "充气玩具颈技场" UI: cream sticker panels with thick ink outlines, balloon pills with * a sheen, tilted stamps, CSS-only glyphs. No web fonts, no images, no backdrop-filter over the WebGL layer. * * 1 tokens (CSS vars mirror NC.config.PALETTE; A9 uses them from its injected HUD CSS) * 2 reset & shell (full window, no page scroll) * 3 layers (z-index ladder: game 0 · world-ui 2 · hud 3 · callouts 4 · flash 5 · screens 6 · modals 7 · touch 8 · * toasts 9 · rotate 10 · boot 11) * 4 components (sticker, buttons, menu items, rows & custom controls, prompts/glyphs, chips, badges, xp bar, toasts) * 5 screens (boot, title, menu, mode, lab, vs, match, pause, results, dialogs, settings, controls, 颈化 cards) * 6 fallback styles for the Wave-0 HUD stub classes (A9's injected CSS overrides them) * 7 motion (keyframes, reduced motion) * 8 responsive (4:3 → 21:9, phones in landscape, short screens) & rotate prompt * * Sizing: app.js sets --ui = clamp(.75, min(w/1280, h/720), 1.75) on ; everything is in rem. Text never goes * below 12 px (font tokens use max(12px, …)). Focus = .is-focus (3 px ink edge + tangerine glow + wobble). */ /* ============================================================== 1 tokens */ :root { --ink: #3A2E4A; --paper: #FFF6E8; --cream: #FBEED3; --p1: #FF7B39; --p2: #2F8FE0; --cpu: #2F8FE0; --butter: #FFD84D; --lavender: #A99BD6; --soda: #8FD3FF; --gum: #FF8FB1; --good: #4FA862; --warn: #D9482F; /* AA-safe text variants (≥ 4.5:1 on paper) */ --p1-deep: #B84A16; --p2-deep: #1C64B0; --good-deep: #2E7D43; --warn-deep: #B23A22; --ink-soft: #6B5A7E; --sand: #EFE3CF; --white: #FFFFFF; --ui: 1; --hud-scale: 1; --line: max(2px, .1875rem); --line-thin: max(1.5px, .125rem); --radius: 1.1rem; --radius-s: .7rem; --pop-shadow: 0 .3rem 0 rgb(58 46 74 / .28); --pop-shadow-lo: 0 .12rem 0 rgb(58 46 74 / .28); --focus-glow: 0 0 0 .32rem rgb(255 123 57 / .55); --sheen: radial-gradient(circle at 30% 25%, rgb(255 255 255 / .62) 0 18%, rgb(255 255 255 / 0) 40%); --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif; --fs-xs: max(12px, .75rem); --fs-s: max(12px, .875rem); --fs-m: max(13px, 1rem); --fs-l: max(15px, 1.2rem); --fs-xl: max(18px, 1.6rem); --fs-xxl: max(24px, 2.4rem); --z-game: 0; --z-worldui: 2; --z-hud: 3; --z-callouts: 4; --z-flash: 5; --z-screens: 6; --z-modals: 7; --z-touch: 8; --z-toasts: 9; --z-rotate: 10; --z-boot: 11; } /* ============================================================== 2 reset & shell */ *, *::before, *::after { box-sizing: border-box; } html { font-size: calc(16px * var(--ui)); height: 100%; overflow: hidden; background: #FBE9D2; } body { position: fixed; inset: 0; margin: 0; overflow: hidden; overscroll-behavior: none; color: var(--ink); font-family: var(--font); font-size: var(--fs-m); line-height: 1.4; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; font-variant-numeric: tabular-nums; } #app { position: fixed; inset: 0; overflow: hidden; } #stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; z-index: var(--z-game); } #ui-root { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } h1, h2, h3, p { margin: 0; } b, strong { font-weight: 900; } kbd { font-family: var(--font); } input { font-family: var(--font); } /* [hidden] must beat every component display rule; :not(#nc-hidden) lifts specificity without !important */ [hidden]:not(#nc-hidden) { display: none; } /* ============================================================== 3 layers */ .layer { position: absolute; inset: 0; pointer-events: none; } .layer--screens { z-index: var(--z-screens); } .layer--modals { z-index: var(--z-modals); } .layer--toasts { z-index: var(--z-toasts); display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: .45rem; padding: .8rem 1rem; inset: 0 0 auto 0; } /* ============================================================== 4 components */ .sticker { background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius); box-shadow: var(--pop-shadow), inset 0 -.25rem 0 rgb(58 46 74 / .05); } /* ---- buttons (balloon pills) */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .4rem 1.35rem; border: var(--line) solid var(--ink); border-radius: 999px; background: var(--paper) var(--sheen); color: var(--ink); font-size: var(--fs-m); font-weight: 900; box-shadow: var(--pop-shadow); cursor: pointer; white-space: nowrap; transition: transform .12s cubic-bezier(.2, 1.4, .4, 1), box-shadow .12s, background-color .12s; } .btn__sub { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); } .btn--primary { background-color: var(--butter); } .btn--ghost { background-color: var(--cream); } .btn--small { min-height: 2.3rem; padding: .25rem 1rem; font-size: var(--fs-s); } .btn--row { justify-content: space-between; width: 100%; min-height: 2.9rem; padding: .35rem .8rem; border-radius: .9rem; border-color: transparent; background: transparent; box-shadow: none; } .btn--row::after { content: '›'; font-size: var(--fs-l); } .btn--row.is-focus { background: var(--white); border-color: var(--ink); transform: none; box-shadow: var(--focus-glow); animation: none; } .btn.is-focus { background-color: var(--butter); transform: translateY(-.12rem) rotate(-1.5deg) scale(1.04); box-shadow: var(--focus-glow), 0 .4rem 0 rgb(58 46 74 / .3); animation: wobble .5s ease-out; } .btn--primary.is-focus { background-color: var(--p1); } .btn--danger.is-focus { background-color: var(--warn-deep); color: var(--white); } .btn:active { transform: scale(.96); box-shadow: var(--pop-shadow-lo); } .is-disabled { opacity: .55; cursor: not-allowed; } .is-shake { animation: shake .32s linear; } /* ---- menu items */ .menu-item { position: relative; display: grid; grid-template-columns: auto auto 1fr; column-gap: .75rem; row-gap: .05rem; align-items: center; padding: .42rem 1.1rem .46rem .85rem; border: var(--line) solid transparent; border-radius: 1.1rem; cursor: pointer; transition: transform .14s cubic-bezier(.2, 1.4, .4, 1), background-color .12s; } .menu-item__dot { grid-row: 1 / span 2; width: 1.05rem; height: 1.3rem; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; background: var(--c, var(--butter)) var(--sheen); border: var(--line-thin) solid var(--ink); position: relative; } .menu-item__dot::after { content: ''; position: absolute; left: 50%; bottom: -.34rem; width: .3rem; height: .3rem; margin-left: -.15rem; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .menu-item__title { font-size: var(--fs-l); font-weight: 900; letter-spacing: .02em; } .menu-item__sub { grid-column: 2 / span 2; font-size: var(--fs-s); color: var(--ink-soft); font-weight: 600; } .menu-item.is-focus { background: var(--paper); border-color: var(--ink); box-shadow: var(--focus-glow), var(--pop-shadow); transform: translateX(.6rem) rotate(-1deg); } .menu-item.is-focus .menu-item__dot { animation: bob .9s ease-in-out infinite; } .menu-item.is-disabled .menu-item__title { color: var(--ink-soft); } .menu-item--small { display: inline-flex; padding: .3rem 1rem; border-color: var(--ink); background: var(--cream); border-radius: 999px; } .menu-item--small .menu-item__dot { display: none; } .menu-item--small .menu-item__title { font-size: var(--fs-m); } .menu-item--pause { grid-template-columns: auto 1fr; padding: .5rem 1rem; } .menu-item--pause .menu-item__title { font-size: var(--fs-l); } .menu-item .badge-chip { justify-self: start; } .badge-chip { display: inline-block; padding: .05rem .55rem; border-radius: 999px; background: var(--p1); color: var(--ink); border: var(--line-thin) solid var(--ink); font-size: var(--fs-xs); font-weight: 900; transform: rotate(-4deg); } .badge-chip--soon { background: var(--sand); color: var(--ink-soft); } /* ---- chips / pills */ .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .6rem; border-radius: 999px; background: var(--sand); border: var(--line-thin) solid var(--ink); font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; } .chip--warn { background: #FFE1D6; color: var(--warn-deep); border-color: var(--warn-deep); } .team-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; padding: .02rem .6rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 900; letter-spacing: .06em; background: var(--paper); border: var(--line) solid var(--p1); color: var(--p1-deep); } .team-pill--p2, .team-pill--cpu { border-color: var(--p2); border-style: dashed; color: var(--p2-deep); } .neck-badge { display: inline-flex; align-items: baseline; gap: .3rem; padding: .02rem .55rem; border-radius: .5rem; white-space: nowrap; font-size: var(--fs-xs); font-weight: 900; border: var(--line-thin) solid var(--ink); background: var(--white); } .neck-badge small { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); } .neck-badge--rigid { background: #DDF2FF; } .neck-badge--spring { background: #FFF1B8; } .neck-badge--soft { background: #FFE0EA; } .level-chip { display: inline-grid; place-items: center; min-width: 3.2rem; padding: .05rem .5rem; border-radius: .6rem; background: var(--ink); color: var(--paper); font-weight: 900; font-size: var(--fs-s); transform: rotate(-3deg); } .level-chip.is-pop { animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1); } .xpbar { position: relative; display: inline-block; width: 8rem; height: .75rem; border-radius: 999px; overflow: hidden; background: var(--sand); border: var(--line-thin) solid var(--ink); vertical-align: middle; } .xpbar--big { flex: 1; width: auto; height: 1rem; } .xpbar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #FFE47E, var(--butter) 55%, #F2C12E); border-right: var(--line-thin) solid var(--ink); } .lock-text .lock-ico, .picker__lock .lock-ico { margin: .22em .35em 0 0; } /* ---- rows & custom controls (no native select / range) */ .row { display: flex; align-items: center; gap: .8rem; min-height: 2.9rem; padding: .35rem .8rem; border: var(--line) solid transparent; border-radius: .9rem; cursor: pointer; flex-wrap: wrap; } .row.is-focus { background: var(--white); border-color: var(--ink); box-shadow: var(--focus-glow); } .row__label { flex: 0 0 auto; min-width: 5.5em; font-weight: 900; font-size: var(--fs-m); } .row__sub { flex-basis: 100%; font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 600; padding-left: .1rem; } .row__hint { flex-basis: 100%; font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 600; } .picker { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; } .picker__arrow { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: var(--line-thin) solid var(--ink); background: var(--cream); font-weight: 900; font-size: var(--fs-l); line-height: 1; cursor: pointer; } .row.is-focus .picker__arrow { background: var(--butter); } .picker__mid { display: inline-flex; flex-direction: column; align-items: center; min-width: 7.5rem; text-align: center; } .picker__value { font-weight: 900; font-size: var(--fs-m); } .picker__sub { font-size: var(--fs-xs); color: var(--ink-soft); } .picker__lock { font-size: var(--fs-xs); font-weight: 800; color: var(--warn-deep); } .row.is-locked .picker__value { color: var(--ink-soft); } .seg { margin-left: auto; display: inline-flex; gap: .15rem; padding: .16rem; background: var(--sand); border: var(--line-thin) solid var(--ink); border-radius: 999px; flex-wrap: wrap; } .seg__chip { padding: .22rem .85rem; border-radius: 999px; font-weight: 800; font-size: var(--fs-s); cursor: pointer; white-space: nowrap; } .seg__chip.is-on { background: var(--ink); color: var(--paper); } .row.is-focus .seg__chip.is-on { background: var(--p1-deep); color: var(--white); } .slider { margin-left: auto; display: inline-flex; align-items: center; gap: .7rem; } .slider__track { position: relative; width: 11rem; height: .9rem; border-radius: 999px; background: var(--sand); border: var(--line-thin) solid var(--ink); cursor: pointer; touch-action: none; } .slider__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--butter); } .row.is-focus .slider__fill { background: var(--p1); } .slider__knob { position: absolute; top: 50%; width: 1.35rem; height: 1.35rem; margin: -.675rem 0 0 -.675rem; border-radius: 50%; background: var(--white) var(--sheen); border: var(--line) solid var(--ink); box-shadow: var(--pop-shadow-lo); } .slider__value { min-width: 3.2em; text-align: right; font-weight: 900; } .switch-wrap { margin-left: auto; display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; } .switch { position: relative; width: 3.2rem; height: 1.7rem; border-radius: 999px; background: var(--sand); border: var(--line-thin) solid var(--ink); transition: background-color .15s; } .switch__knob { position: absolute; top: .12rem; left: .14rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--white) var(--sheen); border: var(--line-thin) solid var(--ink); transition: left .15s cubic-bezier(.2, 1.4, .4, 1); } .row--toggle.is-on .switch { background: var(--good); } .row--toggle.is-on .switch__knob { left: 1.6rem; } .tabs { display: flex; align-items: center; gap: .3rem; padding: .25rem; border-radius: 999px; border: var(--line) solid transparent; flex-wrap: nowrap; cursor: pointer; } .tabs.is-focus { border-color: var(--ink); background: var(--white); box-shadow: var(--focus-glow); } .tabs__tab { flex: 1; text-align: center; padding: .28rem .9rem; border-radius: 999px; font-weight: 900; font-size: var(--fs-m); white-space: nowrap; border: var(--line-thin) solid transparent; } .tabs__tab.is-on { background: var(--butter); border-color: var(--ink); box-shadow: var(--pop-shadow-lo); } .tabs__hint { flex: 0 0 auto; font-size: var(--fs-xs); opacity: .9; } .hintbar { position: absolute; left: 3rem; bottom: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; pointer-events: none; } .hintbar__item { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .7rem .18rem .35rem; border-radius: 999px; background: rgb(255 246 232 / .94); border: var(--line-thin) solid var(--ink); font-size: var(--fs-xs); font-weight: 800; } /* ---- device-aware prompts (ux.md §5.5): every variant is in the DOM, CSS shows one */ .prompt { display: inline-flex; align-items: center; vertical-align: middle; } .prompt-text { display: inline; } .prompt-text .prompt { margin: 0 .15em; } [data-dev="pad"], [data-dev="touch"] { display: none; } [data-dev="kb"] { display: inline-flex; align-items: center; gap: .12em; } body[data-device="gamepad"] [data-dev="kb"], body[data-device="touch"] [data-dev="kb"] { display: none; } body[data-device="gamepad"] [data-dev="pad"] { display: inline-flex; align-items: center; } body[data-device="touch"] [data-dev="touch"] { display: inline-flex; align-items: center; } .prompt [data-pad] { display: none; } body[data-pad="xbox"] .prompt [data-pad="xbox"], body[data-pad="playstation"] .prompt [data-pad="playstation"], body[data-pad="switch"] .prompt [data-pad="switch"] { display: inline-flex; } .ctrl-col .force-kb [data-dev] { display: none; } .ctrl-col .force-kb [data-dev="kb"] { display: inline-flex; } .ctrl-col .force-pad [data-dev] { display: none; } .ctrl-col .force-pad [data-dev="pad"] { display: inline-flex; } .ctrl-col .force-pad .prompt [data-pad] { display: none; } body:not([data-pad="playstation"]):not([data-pad="switch"]) .ctrl-col .force-pad .prompt [data-pad="xbox"], body[data-pad="playstation"] .ctrl-col .force-pad .prompt [data-pad="playstation"], body[data-pad="switch"] .ctrl-col .force-pad .prompt [data-pad="switch"] { display: inline-flex; } .keys { display: inline-flex; gap: .12em; } .key { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; padding: 0 .35em; border: max(1.5px, .1em) solid var(--ink); border-bottom-width: max(3px, .22em); border-radius: .38em; background: var(--white); color: var(--ink); font-size: max(12px, .82em); font-weight: 900; line-height: 1; } .key--wide { min-width: 3.2em; } .face, .trigger, .stick, .dpad { display: inline-flex; align-items: center; justify-content: center; font-weight: 900; line-height: 1; } .face { width: 1.6em; height: 1.6em; border-radius: 50%; font-size: max(12px, .82em); background: var(--ink); color: var(--white); border: max(1.5px, .1em) solid var(--ink); } .face-a { background: var(--good-deep); } .face-b { background: var(--warn-deep); } .face-x { background: var(--p2-deep); } .face-y { background: var(--butter); color: var(--ink); } .face-cross { color: #9FD8FF; } .face-circle { color: #FF9C9C; } .face-square { color: #FFB3D1; } .face-tri { color: #8FE3B0; } .trigger { min-width: 1.9em; height: 1.55em; padding: 0 .38em; border-radius: .5em .5em .7em .7em; background: var(--ink); color: var(--paper); font-size: max(12px, .78em); } .stick { width: 1.7em; height: 1.7em; border-radius: 50%; font-size: max(12px, .78em); color: var(--ink); background: radial-gradient(circle at 50% 42%, var(--white) 0 48%, #D9CFC0 50%); border: max(1.5px, .1em) solid var(--ink); } .dpad { position: relative; width: 1.5em; height: 1.5em; font-size: .9em; } .dpad i { display: none; } .dpad::before, .dpad::after { content: ''; position: absolute; background: var(--ink); border-radius: .15em; } .dpad::before { left: .5em; right: .5em; top: 0; bottom: 0; } .dpad::after { top: .5em; bottom: .5em; left: 0; right: 0; } .touch-glyph { padding: .05rem .5rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: max(12px, .82em); font-weight: 800; } /* ---- toasts */ .toast { display: flex; align-items: center; gap: .6rem; max-width: 100%; padding: .55rem 1rem; pointer-events: none; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 1rem; box-shadow: var(--pop-shadow); animation: toast-in .32s cubic-bezier(.2, 1.5, .4, 1) both; } .toast__body { display: flex; flex-direction: column; } .toast__title { font-size: var(--fs-m); } .toast__text { font-size: var(--fs-s); font-weight: 700; } .toast__sub { font-size: var(--fs-xs); color: var(--ink-soft); } .toast--unlock { background: var(--butter); } /* toast regions (screens.js writes data-at from the screen stack; at most 2 visible, 1 on compact screens / in fights): corner = top-right on menus, mode, VS, 颈化 pick, settings (clear of centred titles and left-hand menus); lab = top-left under the player chip; results = bottom-left, stacking upward, clear of the podium giraffe; mode = bottom-right under the setup panel (compact screens: the top-right corner); fight = under the P2 HUD panel and its status chips (never over the clock), fight-left = under P1 (practice). */ .layer--toasts .toast { max-width: min(22rem, 34vw); } .layer--toasts[data-at="lab"] { align-items: flex-start; padding: 4.6rem 0 0 1.4rem; } .layer--toasts[data-at="results"] { inset: auto 0 0 0; flex-direction: column-reverse; align-items: flex-start; padding: 0 0 1rem 1.2rem; } .layer--toasts[data-at="mode"] { inset: auto 0 0 0; padding: 0 1rem .9rem 0; } body[data-compact="1"] .layer--toasts[data-at="mode"] { inset: 0 0 auto 0; padding: .8rem 1rem; } .layer--toasts[data-at="results"] .toast:not(.is-out), .layer--toasts[data-at="mode"] .toast:not(.is-out) { animation-name: toast-up; } .layer--toasts[data-at="fight"], .layer--toasts[data-at="fight-left"] { padding: calc(6.1rem + max(20px, 1.4rem)) .9rem 0; } .layer--toasts[data-at="fight-left"] { align-items: flex-start; } .layer--toasts[data-at^="fight"] .toast { gap: .45rem; padding: .3rem .8rem; border-radius: .8rem; max-width: min(20rem, 40vw); } .layer--toasts[data-at^="fight"] .toast__title { font-size: var(--fs-s); } .layer--toasts[data-at^="fight"] .toast__text { font-size: var(--fs-xs); } .layer--toasts[data-at^="fight"] .toast--unlock::before, .layer--toasts[data-at^="fight"] .toast--level::before { width: 1.1rem; height: 1.3rem; } .toast--unlock::before, .toast--level::before { content: ''; flex: 0 0 auto; width: 1.5rem; height: 1.8rem; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; border: var(--line-thin) solid var(--ink); background: var(--p1) var(--sheen); } .toast--level::before { background-color: var(--butter); } .toast--level { background: var(--gum); } .toast--warn { background: #FFE1D6; } .toast.is-wait { display: none; } .toast.is-out { animation: toast-out .3s ease-in both; } /* ---- logo */ .logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .35rem; } .logo__en { display: flex; align-items: baseline; font-weight: 900; line-height: .95; letter-spacing: .02em; } .logo__ch { display: inline-block; color: var(--c); -webkit-text-stroke: .1rem var(--ink); text-shadow: .16rem 0 var(--ink), -.16rem 0 var(--ink), 0 .16rem var(--ink), 0 -.16rem var(--ink), .12rem .12rem var(--ink), -.12rem -.12rem var(--ink), .12rem -.12rem var(--ink), -.12rem .12rem var(--ink), 0 .42rem 0 var(--ink); animation: letter-bob 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 80ms); } .logo__gap { display: inline-block; width: .32em; } .logo__cn span { display: inline-block; padding: .12rem 1rem .16rem; border-radius: .7rem; background: var(--ink); color: var(--paper); font-weight: 900; letter-spacing: .32em; transform: rotate(-2deg); box-shadow: .25rem .3rem 0 var(--p1); } .logo--big .logo__en { font-size: 5.6rem; } .logo--big .logo__cn span { font-size: 2rem; } .logo--small .logo__en { font-size: 2.6rem; } .logo--small .logo__ch { text-shadow: .1rem 0 var(--ink), -.1rem 0 var(--ink), 0 .1rem var(--ink), 0 -.1rem var(--ink), .08rem .08rem var(--ink), -.08rem -.08rem var(--ink), .08rem -.08rem var(--ink), -.08rem .08rem var(--ink), 0 .24rem 0 var(--ink); -webkit-text-stroke: .06rem var(--ink); } .logo--small .logo__cn span { font-size: 1.05rem; padding: .05rem .7rem .08rem; box-shadow: .15rem .2rem 0 var(--p1); } .giraffe-icon { display: block; width: 100%; height: 100%; } /* ============================================================== 5 screens */ .screen { position: absolute; inset: 0; pointer-events: auto; } .screen:not([hidden]) { display: flex; animation: screen-in .22s cubic-bezier(.2, 1.2, .4, 1) both; } .screen.is-under { animation: none; } .screen__head { display: flex; flex-direction: column; gap: .15rem; } .screen__title { font-size: var(--fs-xl); font-weight: 900; } .screen__lead { font-size: var(--fs-s); color: var(--ink-soft); font-weight: 700; } .screen--modal:not([hidden]) { align-items: center; justify-content: center; padding: 1rem; background: rgb(58 46 74 / .42); } /* ---- boot (pure-CSS balloon, removed after the first WebGL frame) */ .boot { position: absolute; inset: 0; z-index: var(--z-boot); display: grid; place-content: center; justify-items: center; gap: 1rem; background: radial-gradient(ellipse at 50% 40%, var(--paper), #FBE0C4); pointer-events: auto; transition: opacity .35s ease; font-weight: 900; font-size: var(--fs-l); } .boot.is-done { opacity: 0; pointer-events: none; } .boot__balloon { width: 5rem; height: 6rem; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; background: var(--p1) var(--sheen); border: var(--line) solid var(--ink); animation: inflate-loop 1.2s ease-in-out infinite; position: relative; } .boot__balloon i { position: absolute; left: 50%; bottom: -1.6rem; width: var(--line); height: 1.4rem; background: var(--ink); } /* ---- title (attract behind) */ .screen--title:not([hidden]) { flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 2.4rem 3.2rem 2rem; background: radial-gradient(ellipse 60% 70% at 18% 22%, rgb(255 246 232 / .78), rgb(255 246 232 / 0) 70%); cursor: pointer; } .title__logo { display: flex; flex-direction: column; gap: .8rem; } .title__tag { align-self: flex-start; padding: .2rem .9rem; border-radius: 999px; background: var(--paper); border: var(--line-thin) solid var(--ink); font-weight: 800; font-size: var(--fs-s); transform: rotate(-1.5deg); margin-left: .4rem; } .title__press { align-self: center; margin-bottom: 1.5rem; padding: .55rem 1.8rem; border-radius: 999px; background: var(--paper) var(--sheen); border: var(--line) solid var(--ink); box-shadow: var(--pop-shadow); font-weight: 900; font-size: var(--fs-l); animation: press-pulse 1.4s ease-in-out infinite; } .title__foot { position: absolute; right: 1.2rem; bottom: .8rem; font-size: var(--fs-xs); font-weight: 800; color: var(--ink); background: rgb(255 246 232 / .9); padding: .05rem .5rem; border-radius: .4rem; } /* ---- menu (left column over the attract fight) */ .screen--menu:not([hidden]) { align-items: stretch; background: linear-gradient(90deg, rgb(255 246 232 / .95) 0, rgb(255 246 232 / .92) 32%, rgb(255 246 232 / 0) 56%); } .menu__col { display: flex; flex-direction: column; justify-content: safe center; gap: .8rem; width: min(34rem, 46vw); padding: 1.2rem 0 3.6rem 3rem; min-height: 0; } .menu__list { display: flex; flex-direction: column; gap: .2rem; margin-left: -.9rem; } .menu__small { display: flex; gap: .6rem; margin: .5rem 0 0 .9rem; } .menu__foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: var(--fs-xs); font-weight: 800; } .menu__xp { color: var(--ink-soft); } .menu__me { display: inline-flex; align-items: center; gap: .4rem; padding: .12rem .6rem .12rem .15rem; border-radius: 999px; background: var(--paper); border: var(--line-thin) solid var(--ink); } .menu__me-portrait { width: 1.9rem; height: 1.9rem; } .menu__me-name { font-size: var(--fs-s); max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- mode (setup cards) */ .screen--mode:not([hidden]) { align-items: center; justify-content: center; padding: 1.1rem 2rem 3.4rem; background: rgb(251 238 211 / .55); } .mode__wrap { width: min(70rem, 100%); max-height: 100%; display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem 1.4rem 1rem; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 1.4rem; box-shadow: var(--pop-shadow); min-height: 0; } .mode__head { display: flex; align-items: flex-end; justify-content: space-between; } .mode__body { flex: 1; display: flex; flex-direction: column; gap: .6rem; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: .3rem; } .mode__foot { display: flex; justify-content: flex-end; gap: .7rem; padding-top: .5rem; border-top: var(--line-thin) dashed rgb(58 46 74 / .3); } .mode__split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.1rem; min-height: 0; } .mode__left { display: flex; flex-direction: column; gap: .4rem; min-width: 0; } .mode__sub { font-size: var(--fs-m); font-weight: 900; } .mode__row .row { padding-left: .3rem; } .mode__note { font-size: var(--fs-s); color: var(--ink-soft); font-weight: 700; } .mode__opts { padding: .3rem .4rem; } .row--diff .seg { margin-left: 0; } .row--diff .seg__chip { min-width: 3.6rem; text-align: center; } .row--diff .row__label { min-width: 3em; } .mode__right { display: flex; flex-direction: column; gap: .7rem; min-width: 0; } .mode__rules { display: flex; flex-direction: column; gap: .05rem; padding: .5rem .55rem .45rem; background: var(--cream); border: var(--line-thin) dashed rgb(58 46 74 / .45); border-radius: 1rem; } .mode__rules > .mode__sub { padding: 0 .4rem .15rem; } .mode__rules .row { padding-left: .45rem; padding-right: .45rem; min-height: 2.55rem; } .mode__rules .row--diff .seg { margin-left: auto; } .mode__rules .row--diff .seg__chip { min-width: 3rem; padding-left: .6rem; padding-right: .6rem; } .row--rule .row__label { min-width: 3em; } .row--rule .seg__chip { min-width: 2.6rem; } .roster { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: .65rem; padding: .2rem; } .opp-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .55rem .35rem .6rem; background: var(--white); border: var(--line) solid var(--ink); border-radius: 1rem; box-shadow: var(--pop-shadow); cursor: pointer; text-align: center; transition: transform .14s cubic-bezier(.2, 1.4, .4, 1); } .opp-card__portrait { width: 3.9rem; height: 3.9rem; border-radius: 50%; overflow: hidden; background: #FFF9EE; border: var(--line-thin) solid var(--ink); display: grid; place-items: center; } .opp-card__q { font-size: 2rem; font-weight: 900; color: var(--p1-deep); } .opp-card__name { font-weight: 900; font-size: var(--fs-m); } .opp-card__title { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; min-height: 1.2em; } .opp-card.is-on { background: #FFF1B8; } .opp-card.is-focus { transform: translateY(-.2rem) rotate(-1.5deg); box-shadow: var(--focus-glow), var(--pop-shadow); } .opp-card.is-locked { background: #EDE6DA; } .opp-card.is-locked .opp-card__portrait { filter: grayscale(1) opacity(.55); } .opp-card.is-locked .opp-card__name { color: var(--ink-soft); } .opp-card__lock { max-width: 100%; font-size: var(--fs-xs); font-weight: 900; padding: .02rem .5rem; border-radius: .5rem; background: var(--ink); color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .opp-card__padlock { position: absolute; top: .45rem; left: 50%; margin-left: .9rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); border: max(1.5px, .1rem) solid var(--paper); font-size: var(--fs-s); } .opp-card__padlock .lock-ico { margin: .18em 0 0; } .opp-card.is-disabled { opacity: 1; } .opp-detail { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .9rem; row-gap: .3rem; padding: .85rem 1rem; min-width: 0; } .opp-detail__portrait { grid-row: 1 / span 2; width: 5.2rem; height: 5.2rem; } .opp-detail__tags { display: flex; gap: .35rem; } .opp-detail__intro, .opp-detail__tip, .opp-detail__lock { grid-column: 1 / -1; } .opp-detail__lead { align-self: start; font-size: var(--fs-s); font-weight: 700; color: var(--ink-soft); } .opp-detail__portrait--random { display: grid; place-items: center; border-radius: 50%; background: var(--butter) var(--sheen); border: var(--line) solid var(--ink); font-size: 2.8rem; font-weight: 900; } .opp-detail__name { font-size: var(--fs-xl); font-weight: 900; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; align-self: end; line-height: 1.2; } .opp-detail__name small { font-size: var(--fs-s); color: var(--ink-soft); font-weight: 800; } .opp-detail__intro { font-size: var(--fs-m); font-weight: 700; } .opp-detail__tip { font-size: var(--fs-s); background: var(--cream); border-radius: .7rem; padding: .35rem .6rem; border: var(--line-thin) dashed var(--ink); } .opp-detail__tip b { margin-right: .4rem; color: var(--p1-deep); } .opp-detail__lock { font-size: var(--fs-s); font-weight: 900; color: var(--warn-deep); } .dummy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; padding: .2rem; } .dummy-card { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .7rem .5rem; text-align: center; cursor: pointer; background: var(--white); border: var(--line) solid var(--ink); border-radius: 1rem; box-shadow: var(--pop-shadow); transition: transform .14s cubic-bezier(.2, 1.4, .4, 1); } .dummy-card__icon { width: 3.6rem; height: 3.6rem; } .dummy-card__name { font-size: var(--fs-l); } .dummy-card__sub { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; } .dummy-card.is-on { background: #FFF1B8; } .dummy-card.is-focus { transform: translateY(-.2rem) rotate(-1.5deg); box-shadow: var(--focus-glow), var(--pop-shadow); } .ladder-path { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .5rem; padding: .3rem; } .ladder-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .2rem .5rem; border: var(--line) solid var(--ink); border-radius: .9rem; background: var(--white); text-align: center; } .ladder-stop__n { position: absolute; top: -.6rem; left: -.4rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 900; font-size: var(--fs-xs); } .ladder-stop__portrait { width: 3rem; height: 3rem; } .ladder-stop__name { font-size: var(--fs-xs); font-weight: 800; } .ladder-stop.is-done { background: #E4F4E6; } .ladder-stop.is-boss { background: #FFF1B8; transform: rotate(2deg); } .join { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .join-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 7rem; padding: .9rem 1rem; font-size: var(--fs-l); font-weight: 900; } .join-slot--p1 { border-color: var(--p1); } .join-slot__portrait { width: 5rem; height: 5rem; } .join-slot__portrait.is-empty { opacity: .6; } .join-slot--p2 { border-color: var(--p2); border-style: dashed; } .join-slot.is-waiting { animation: press-pulse 1.4s ease-in-out infinite; } /* ---- lab */ .screen--lab:not([hidden]) { pointer-events: none; } .lab { position: absolute; inset: 0; display: flex; } .lab__stage { position: relative; flex: 0 0 58%; pointer-events: auto; cursor: grab; } .lab__stage:active { cursor: grabbing; } .lab__plate { position: absolute; left: 1.4rem; top: 1.2rem; display: flex; align-items: center; gap: .5rem; padding: .35rem .8rem; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 999px; box-shadow: var(--pop-shadow); transform: rotate(-1.5deg); } .lab__platename { font-size: var(--fs-l); } .lab__try { position: absolute; left: 1.4rem; bottom: 1.2rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .3rem .9rem .3rem .45rem; border-radius: 999px; background: rgb(255 246 232 / .95); border: var(--line-thin) solid var(--ink); font-size: var(--fs-s); font-weight: 800; } .lab__drag { color: var(--ink-soft); } .lab__panel { flex: 1; min-width: 0; max-width: 46rem; margin: 1rem 1.2rem 1rem auto; padding: .9rem 1rem .8rem; display: flex; flex-direction: column; gap: .5rem; pointer-events: auto; min-height: 0; overflow: hidden; } .lab__head { display: flex; flex-direction: column; gap: .1rem; } .lab__title { font-size: var(--fs-xl); font-weight: 900; } .lab__flow { font-size: var(--fs-s); font-weight: 800; color: var(--ink-soft); } .lab__players { display: flex; gap: .4rem; padding: .2rem; border: var(--line) solid transparent; border-radius: 999px; cursor: pointer; } .lab__players:not([hidden]) { display: flex; } .lab__players.is-focus { border-color: var(--ink); box-shadow: var(--focus-glow); background: var(--white); } .lab__ptab { flex: 1; text-align: center; padding: .2rem; border-radius: 999px; font-weight: 900; border: var(--line) solid var(--p1); } .lab__ptab--p2 { border-color: var(--p2); border-style: dashed; } .lab__ptab.is-on { background: var(--butter); } .lab__body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: .15rem .25rem .5rem; display: flex; flex-direction: column; gap: .45rem; scrollbar-width: thin; } .lab__sub { font-size: var(--fs-s); font-weight: 900; color: var(--ink-soft); letter-spacing: .08em; margin-top: .2rem; } .lab__foot { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; padding-top: .55rem; border-top: var(--line-thin) dashed rgb(58 46 74 / .3); } .lab__foot .btn--primary { min-width: 7.5rem; } .lab__note { min-height: 1.4em; font-size: var(--fs-xs); font-weight: 800; color: var(--warn-deep); } .lab__input { flex: 1; min-width: 8rem; height: 2.4rem; padding: 0 .8rem; border-radius: .7rem; border: var(--line) solid var(--ink); background: var(--white); color: var(--ink); font-size: var(--fs-l); font-weight: 900; outline: none; -webkit-user-select: text; user-select: text; } .row--name.is-editing .lab__input { box-shadow: 0 0 0 .3rem rgb(47 143 224 / .45); } .lab__namerow { display: flex; justify-content: flex-start; padding-left: .8rem; } .lab__suggest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; padding: 0 .3rem; } .lab__suggest .chip-btn { justify-content: center; } .neck-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; padding: .15rem; } .neck-card { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem .4rem .55rem; text-align: center; cursor: pointer; background: var(--white); border: var(--line) solid var(--ink); border-radius: 1rem; box-shadow: var(--pop-shadow); transition: transform .14s cubic-bezier(.2, 1.4, .4, 1); } .neck-card__name { font-size: var(--fs-m); } .neck-card__desc { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); line-height: 1.3; } .neck-card__special { font-size: var(--fs-xs); font-weight: 900; padding: .02rem .5rem; border-radius: 999px; background: var(--sand); } .neck-card.is-on { background: #FFF1B8; } .neck-card.is-on .neck-card__special { background: var(--ink); color: var(--paper); } .neck-card.is-focus { transform: translateY(-.2rem) rotate(-1.5deg); box-shadow: var(--focus-glow), var(--pop-shadow); } .neck-card__art { position: relative; width: 3.8rem; height: 2.9rem; margin-bottom: .1rem; } .neck-card__art i { position: absolute; width: .95rem; height: .95rem; border-radius: 50%; border: var(--line-thin) solid var(--ink); background: var(--nc, var(--butter)); } .neck-card__art i:nth-child(4) { width: 1.35rem; height: 1.1rem; border-radius: 50% 60% 50% 45%; } .neck-card__art--rigid { --nc: var(--soda); } .neck-card__art--rigid i:nth-child(1) { left: .1rem; bottom: .1rem; } .neck-card__art--rigid i:nth-child(2) { left: .75rem; bottom: .7rem; } .neck-card__art--rigid i:nth-child(3) { left: 1.4rem; bottom: 1.3rem; } .neck-card__art--rigid i:nth-child(4) { left: 2.05rem; bottom: 1.8rem; } .neck-card__art--spring { --nc: var(--butter); } .neck-card__art--spring i:nth-child(1) { left: .1rem; bottom: .1rem; } .neck-card__art--spring i:nth-child(2) { left: .45rem; bottom: .9rem; } .neck-card__art--spring i:nth-child(3) { left: 1.25rem; bottom: 1.45rem; } .neck-card__art--spring i:nth-child(4) { left: 2.2rem; bottom: 1.45rem; } .neck-card__art--soft { --nc: var(--gum); } .neck-card__art--soft i:nth-child(1) { left: .1rem; bottom: .9rem; } .neck-card__art--soft i:nth-child(2) { left: .9rem; bottom: 1.2rem; } .neck-card__art--soft i:nth-child(3) { left: 1.7rem; bottom: .95rem; } .neck-card__art--soft i:nth-child(4) { left: 2.35rem; bottom: .25rem; } .neck-card.is-focus .neck-card__art i { animation: bob .8s ease-in-out infinite; } .neck-card.is-focus .neck-card__art i:nth-child(2) { animation-delay: .06s; } .neck-card.is-focus .neck-card__art i:nth-child(3) { animation-delay: .12s; } .neck-card.is-focus .neck-card__art i:nth-child(4) { animation-delay: .18s; } .stat-bars { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.1rem; padding: .35rem .6rem; background: var(--cream); border-radius: .8rem; border: var(--line-thin) dashed rgb(58 46 74 / .45); } .stat-bar { display: flex; align-items: center; gap: .5rem; } .stat-bar__label { flex: 0 0 2.6em; font-size: var(--fs-s); font-weight: 900; } .stat-bar__track { position: relative; flex: 1; height: .7rem; border-radius: 999px; background: var(--white); border: var(--line-thin) solid var(--ink); overflow: hidden; } .stat-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width .25s cubic-bezier(.2, 1.3, .4, 1); background: var(--p1); } .stat-bar--impact .stat-bar__fill { background: var(--warn); } .stat-bar--grapple .stat-bar__fill { background: var(--gum); } .stat-bar--ease .stat-bar__fill { background: var(--good); } .lab__special { display: flex; align-items: center; gap: .7rem; padding: .45rem .8rem; border-radius: .9rem; background: var(--white); border: var(--line-thin) dashed var(--ink); } .lab__special .prompt { font-size: var(--fs-m); } .lab__special-text { display: flex; flex-direction: column; } .lab__special-name { font-size: var(--fs-m); } .lab__special-desc { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); } .len-pips { display: flex; gap: .16rem; margin-top: .15rem; } .len-pips i { width: .55rem; height: .55rem; border-radius: 50%; border: max(1px, .08rem) solid var(--ink); background: var(--white); } .len-pips i.is-on { background: var(--butter); } .len-pips i.is-locked { background: repeating-linear-gradient(45deg, var(--sand) 0 .12rem, #CFC3B0 .12rem .24rem); } .swatches { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: .3rem; } .swatch { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .3rem .1rem; border-radius: .8rem; border: var(--line) solid transparent; cursor: pointer; text-align: center; } .swatch__chip { width: 2.3rem; height: 2.6rem; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; background: var(--sw); border: var(--line) solid var(--ink); box-shadow: inset -.28rem -.32rem 0 rgb(0 0 0 / .13), inset .22rem .22rem 0 rgb(255 255 255 / .38); } .swatch__name { font-size: var(--fs-xs); font-weight: 800; line-height: 1.2; } .swatch.is-on { background: #FFF1B8; border-color: var(--ink); } .swatch.is-focus { background: var(--white); border-color: var(--ink); box-shadow: var(--focus-glow); } .swatch__chip { position: relative; } .swatch.is-locked .swatch__chip { background: #D9CFC0; background: color-mix(in srgb, var(--sw) 45%, #D9CFC0); border-style: dashed; } .swatch.is-locked .swatch__name { color: var(--ink-soft); } .swatch__lock { position: absolute; right: -.45rem; bottom: -.3rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--ink); border: max(1.5px, .1rem) solid var(--paper); } .swatch__lock::before { content: ''; position: absolute; left: 50%; top: 52%; width: .5rem; height: .38rem; margin: -.1rem 0 0 -.25rem; border-radius: .08rem; background: var(--paper); } .swatch__lock::after { content: ''; position: absolute; left: 50%; top: 22%; width: .32rem; height: .32rem; margin-left: -.16rem; border: .09rem solid var(--paper); border-bottom: 0; border-radius: .2rem .2rem 0 0; } .chips { display: flex; flex-wrap: wrap; gap: .4rem; } .chip-btn { display: inline-flex; flex-direction: row; align-items: center; padding: .28rem .9rem; border-radius: 999px; cursor: pointer; border: var(--line) solid var(--ink); background: var(--white); font-weight: 900; font-size: var(--fs-s); line-height: 1.2; } .chip-btn small { font-size: var(--fs-xs); color: var(--warn-deep); } .chip-btn.is-on { background: var(--butter); } .chip-btn.is-focus { box-shadow: var(--focus-glow); transform: rotate(-2deg); } .chip-btn.is-locked { background: var(--sand); color: var(--ink-soft); border-style: dashed; } .chip-btn--none { color: var(--ink-soft); } .chip-btn--none.is-on { color: var(--ink); } /* padlock glyph (pure CSS): body = the element, shackle = ::before */ .lock-ico { position: relative; display: inline-block; flex: 0 0 auto; width: .72em; height: .56em; margin: .22em 0 0 .4em; border-radius: .12em; background: currentColor; } .lock-ico::before { content: ''; position: absolute; left: .12em; bottom: 100%; width: .48em; height: .34em; box-sizing: border-box; border: .11em solid currentColor; border-bottom: 0; border-radius: .26em .26em 0 0; } .gear-slot { display: flex; flex-direction: column; gap: .35rem; padding: .45rem .1rem .55rem; border-bottom: var(--line-thin) dashed rgb(58 46 74 / .2); } .gear-slot__head { display: flex; align-items: center; gap: .55rem; padding: 0 .2rem; } .gear-slot__label { padding: .02rem .6rem; border-radius: .5rem; background: var(--ink); color: var(--paper); font-size: var(--fs-xs); font-weight: 900; letter-spacing: .08em; } .gear-slot__item { font-size: var(--fs-m); } .gear-slot__item.is-locked { color: var(--ink-soft); } .gear-slot__detail { display: flex; flex-direction: column; gap: .25rem; padding: .35rem .6rem; border-radius: .7rem; background: var(--cream); min-height: 3.6rem; } .gear-desc { font-size: var(--fs-s); font-weight: 700; min-height: 1.3em; } .gear-desc.is-locked { color: var(--warn-deep); font-weight: 900; } .mods { display: flex; gap: .3rem; flex-wrap: wrap; min-height: 1.2em; } .mod { font-size: var(--fs-xs); font-weight: 900; padding: .02rem .5rem; border-radius: 999px; background: var(--sand); } .mod--good { background: #DDF1E1; color: var(--good-deep); } .mod--bad { background: #FBE1DB; color: var(--warn-deep); } /* ---- vs card */ .screen--vs:not([hidden]) { flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; cursor: pointer; background: linear-gradient(180deg, rgb(58 46 74 / .1), rgb(58 46 74 / .38)); } .vs__row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 max(2rem, 4vw); } .vs__row .vs__bubble { position: absolute; left: 50%; top: 7%; margin-left: -3.7rem; } .vs__plate { display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 15rem; padding: 1rem 1.6rem 1.1rem; background: var(--paper); border: .3rem solid var(--p1); border-radius: 1.5rem; box-shadow: 0 .45rem 0 rgb(58 46 74 / .35); } .vs__plate--l { transform: rotate(-3deg); animation: plate-l .3s cubic-bezier(.2, 1.5, .4, 1) both; } .vs__plate--r { transform: rotate(3deg); border-color: var(--p2); border-style: dashed; animation: plate-r .3s cubic-bezier(.2, 1.5, .4, 1) both; } .vs__portrait { width: 7.2rem; height: 7.2rem; } .vs__name { font-size: var(--fs-xl); } .vs__tags { display: flex; gap: .4rem; align-items: center; } .vs__note { max-width: 14rem; padding: .05rem .7rem; border-radius: 999px; background: var(--cream); border: var(--line-thin) dashed var(--ink-soft); font-size: var(--fs-xs); font-weight: 800; color: var(--ink); text-align: center; } .vs__bubble { display: grid; place-items: center; width: 7.4rem; height: 7.4rem; border-radius: 50%; background: var(--butter) var(--sheen); border: .32rem solid var(--ink); box-shadow: 0 .45rem 0 rgb(58 46 74 / .35); font-size: 3.2rem; font-weight: 900; animation: vs-inflate .5s .2s cubic-bezier(.2, 1.6, .4, 1) both; } .vs__bubble span { transform: rotate(-8deg); } .vs__foot { position: absolute; left: 0; right: 0; bottom: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; } .vs__arena { padding: .1rem .9rem; border-radius: .6rem; background: var(--butter); border: var(--line-thin) solid var(--ink); font-weight: 900; font-size: var(--fs-s); transform: rotate(-2deg); } .vs__quote { padding: .3rem 1.1rem; border-radius: 999px; background: var(--paper); border: var(--line-thin) solid var(--ink); font-weight: 800; font-size: var(--fs-m); } .vs__quote:empty { display: none; } .vs__skip { font-size: var(--fs-xs); font-weight: 800; color: var(--paper); background: var(--ink); padding: .1rem .7rem .1rem .25rem; border-radius: 999px; } /* ---- match (the HUD is A9's; only the practice restart ring lives here) */ .screen--match:not([hidden]) { pointer-events: none; } .hold-ring { position: absolute; left: 50%; bottom: 5.5rem; transform: translateX(-50%); padding: .5rem 1rem .5rem 3rem; border-radius: 999px; background: var(--paper); border: var(--line) solid var(--ink); font-weight: 900; font-size: var(--fs-s); } .hold-ring::before { content: ''; position: absolute; left: .45rem; top: 50%; width: 1.9rem; height: 1.9rem; margin-top: -.95rem; border-radius: 50%; background: conic-gradient(var(--p1) calc(var(--k, 0) * 360deg), var(--sand) 0); border: var(--line-thin) solid var(--ink); } /* ---- pause (scene stays unblurred) */ .screen--pause:not([hidden]) { align-items: flex-start; justify-content: flex-start; padding: 0; background: linear-gradient(90deg, rgb(58 46 74 / .38) 0, rgb(58 46 74 / .2) 32%, rgb(58 46 74 / 0) 56%); } .pause__panel { width: min(24rem, 44vw); max-height: calc(100% - 2.4rem); margin: 1.2rem 0 1.2rem 1.4rem; padding: 1.1rem 1.1rem 1rem; display: flex; flex-direction: column; gap: .35rem; overflow-y: auto; min-height: 0; transform: rotate(-.6deg); } .pause__title { font-size: var(--fs-xxl); font-weight: 900; transform: rotate(-2deg); margin: 0 0 .1rem .3rem; } .pause__meta { font-size: var(--fs-s); font-weight: 800; color: var(--ink-soft); padding-left: .4rem; } .pause__reason { font-size: var(--fs-s); font-weight: 900; color: var(--warn-deep); background: #FFE1D6; border-radius: .6rem; padding: .25rem .6rem; } .pause__list { display: flex; flex-direction: column; gap: .1rem; margin-left: -.3rem; } .pause__sub { font-size: var(--fs-s); font-weight: 900; color: var(--ink-soft); margin-top: .4rem; } .pause__extra .row--dummy .seg { margin-left: 0; } .pause__panel.is-practice .menu-item--pause { padding-top: .3rem; padding-bottom: .3rem; } .pause__panel.is-practice .pause__title { font-size: var(--fs-xl); } .pause__ref { position: absolute; right: 1.4rem; bottom: 1.4rem; display: flex; flex-direction: column; gap: .35rem; padding: .7rem .9rem; font-size: var(--fs-s); } .ref-line { display: flex; align-items: center; gap: .6rem; font-weight: 800; } .ref-line .prompt { min-width: 5.6rem; } /* ---- results */ .screen--results:not([hidden]) { justify-content: flex-end; align-items: center; padding: 1rem 2rem; background: linear-gradient(270deg, rgb(255 246 232 / .92) 0, rgb(255 246 232 / .85) 34%, rgb(255 246 232 / 0) 60%); } .results__card { width: min(35rem, 48vw); max-height: 100%; overflow: hidden; padding: 1rem 1.25rem 1rem; display: flex; flex-direction: column; gap: .55rem; animation: card-in .45s cubic-bezier(.2, 1.3, .4, 1) both; } .results__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: .55rem; margin: 0 -.4rem; padding: .1rem .4rem .3rem; scrollbar-width: thin; } .results__head, .results__buttons { flex: 0 0 auto; } .results__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .results__titles { display: flex; flex-direction: column; } .results__title { font-size: var(--fs-xxl); font-weight: 900; transform: rotate(-1.5deg); transform-origin: left; } .results__card.is-win .results__title { color: var(--p1-deep); } .results__card.is-lose .results__title { color: var(--p2-deep); } .results__score { font-size: var(--fs-m); font-weight: 900; color: var(--ink-soft); } .grade { flex: 0 0 auto; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; border: .3rem solid var(--ink); font-size: 2.8rem; font-weight: 900; background: var(--white); transform: rotate(-10deg); box-shadow: var(--pop-shadow); animation: stamp .5s .25s cubic-bezier(.2, 1.6, .4, 1) both; } .grade--S { background: var(--butter); } .grade--A { background: var(--gum); } .grade--B { background: var(--soda); } .grade--C { background: var(--sand); } .results__hl { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; font-size: var(--fs-s); font-weight: 800; background: var(--cream); border-radius: .7rem; padding: .3rem .7rem; } .results__hl:empty { display: none; } .results__hl b { color: var(--p1-deep); } .results__stats { width: 100%; border-collapse: collapse; font-size: var(--fs-s); } .results__stats th { text-align: right; padding: .15rem .5rem; font-weight: 900; border-bottom: var(--line) solid var(--p1); } .results__stats th.is-p2 { border-bottom: var(--line) dashed var(--p2); } .results__stats th:first-child { border-bottom-color: transparent; } .results__stats td { padding: .14rem .5rem; font-weight: 700; } .results__stats td.num { text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; } .results__stats tr:nth-child(odd) td { background: rgb(239 227 207 / .55); } .results__badges { display: flex; flex-wrap: wrap; gap: .5rem; } .badge-sticker { display: inline-flex; flex-direction: column; padding: .3rem .8rem; border-radius: .8rem; background: var(--white); border: var(--line) solid var(--ink); transform: rotate(-2deg); box-shadow: var(--pop-shadow-lo); animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(1s + var(--i, 0) * .12s); } .badge-sticker b { font-size: var(--fs-m); } .badge-sticker small { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; } .badge-sticker.is-new { background: var(--butter); } .badge-sticker.is-new small { color: var(--ink); } .results__xp { display: flex; align-items: center; gap: .6rem; } .results__xplabel { font-weight: 900; font-size: var(--fs-s); } .results__xpgain { font-size: var(--fs-l); color: var(--p1-deep); min-width: 3.5rem; text-align: right; } .results__xpbreak { display: flex; flex-wrap: wrap; gap: .3rem; } .results__buttons { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; padding-top: .3rem; } /* ---- dialogs (confirm, first run, settings, controls) */ .dialog { width: min(28rem, 92vw); max-height: 100%; padding: 1.3rem 1.5rem 1.2rem; display: flex; flex-direction: column; gap: .75rem; animation: pop-in .26s cubic-bezier(.2, 1.5, .4, 1) both; min-height: 0; } .dialog--wide { width: min(46rem, 94vw); } .dialog__title { font-size: var(--fs-xl); font-weight: 900; } .dialog__sub { font-size: var(--fs-m); font-weight: 700; color: var(--ink-soft); } .dialog__buttons { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; } .dialog__icon { width: 4.6rem; height: 4.6rem; align-self: center; } .dialog--firstrun { align-items: stretch; text-align: center; } .dialog--firstrun .dialog__buttons { justify-content: center; } .settings__body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: .15rem; padding: .2rem; } .settings__note { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); } .dialog--controls { gap: .6rem; } .ctrl-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; } .ctrl-col { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: .7rem .8rem; border: var(--line) solid var(--ink); border-radius: 1rem; background: var(--cream); } .ctrl-col h3 { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-l); } .ctrl-col__active { display: none; font-size: var(--fs-xs); padding: .02rem .5rem; border-radius: 999px; background: var(--p1); } body[data-device="keyboard"] .ctrl-col--kb, body[data-device="mouse"] .ctrl-col--kb, body[data-device="gamepad"] .ctrl-col--pad, body[data-device="touch"] .ctrl-col--touch { background: var(--white); border-color: var(--p1); box-shadow: 0 0 0 .3rem rgb(255 123 57 / .35); } body[data-device="keyboard"] .ctrl-col--kb .ctrl-col__active, body[data-device="mouse"] .ctrl-col--kb .ctrl-col__active, body[data-device="gamepad"] .ctrl-col--pad .ctrl-col__active, body[data-device="touch"] .ctrl-col--touch .ctrl-col__active { display: inline-block; } .ctrl-line { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: var(--fs-s); font-weight: 800; min-height: 1.9rem; } .ctrl-line > span:last-child { color: var(--ink); white-space: nowrap; flex: 0 0 auto; } .ctrl-line > .prompt, .ctrl-line > .force-kb, .ctrl-line > .force-pad, .ctrl-line > .touch-glyph { flex: 0 1 auto; min-width: 0; } .ctrl-col--touch .touch-glyph { white-space: normal; line-height: 1.25; padding: .12rem .55rem; border-radius: .6rem; } .pad-outline { position: relative; height: 3.4rem; margin: .1rem auto .2rem; width: 8.2rem; border: var(--line) solid var(--ink); border-radius: 1.8rem 1.8rem 2.2rem 2.2rem; background: var(--white); } .pad-outline i { position: absolute; border: var(--line-thin) solid var(--ink); border-radius: 50%; background: var(--sand); } .pad-outline__ls { left: 1.1rem; top: .5rem; width: 1.3rem; height: 1.3rem; } .pad-outline__rs { right: 2.2rem; top: 1.6rem; width: 1.3rem; height: 1.3rem; } .pad-outline__dp { left: 2.3rem; top: 1.7rem; width: 1.1rem; height: 1.1rem; border-radius: .2rem; } .pad-outline__abxy { right: .9rem; top: .4rem; width: 1.2rem; height: 1.2rem; background: var(--good); } .pad-outline__lt, .pad-outline__rt { top: -.55rem; width: 1.8rem; height: .6rem; border-radius: .4rem .4rem 0 0; } .pad-outline__lt { left: 1rem; } .pad-outline__rt { right: 1rem; } .moves__title { font-size: var(--fs-m); font-weight: 900; } .moves { margin: 0; padding: 0 0 0 1.2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1.2rem; font-size: var(--fs-s); font-weight: 700; } .moves li::marker { color: var(--p1-deep); } /* ---- 颈化 card pick (ladder) */ .screen--card:not([hidden]) { align-items: center; justify-content: center; background: rgb(58 46 74 / .35); } .cards__wrap { display: flex; flex-direction: column; align-items: center; gap: .8rem; } .cards__title { color: var(--paper); text-shadow: 0 .15rem 0 var(--ink), .12rem 0 var(--ink), -.12rem 0 var(--ink), 0 -.12rem var(--ink); font-size: var(--fs-xxl); } .cards__info { font-weight: 800; background: var(--paper); border: var(--line-thin) solid var(--ink); border-radius: 999px; padding: .15rem .9rem; font-size: var(--fs-s); } .cards { display: flex; gap: 1.2rem; } .mut-card { display: flex; flex-direction: column; gap: .45rem; width: 13rem; min-height: 16rem; padding: 1rem; border-radius: 1.2rem; cursor: pointer; background: var(--paper); border: .3rem solid var(--ink); box-shadow: 0 .45rem 0 rgb(58 46 74 / .35); animation: card-deal .4s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * .1s); transition: transform .15s cubic-bezier(.2, 1.4, .4, 1); } .mut-card__rarity { align-self: flex-start; font-size: var(--fs-xs); font-weight: 900; padding: .02rem .55rem; border-radius: 999px; background: var(--sand); } .mut-card__emblem { position: relative; align-self: center; display: grid; place-items: center; width: 4.4rem; height: 5rem; margin: .3rem 0 .6rem; border-radius: 50% 50% 46% 46% / 56% 56% 44% 44%; border: var(--line) solid var(--ink); background: var(--soda) var(--sheen); font-size: 2rem; font-weight: 900; color: var(--ink); box-shadow: inset -.35rem -.4rem 0 rgb(0 0 0 / .1); } .mut-card__emblem::after { content: ''; position: absolute; left: 50%; bottom: -.55rem; width: .6rem; height: .5rem; margin-left: -.3rem; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .mut-card--rare .mut-card__emblem { background-color: var(--butter); } .mut-card--epic .mut-card__emblem { background-color: var(--gum); } .mut-card.is-focus .mut-card__emblem { animation: bob .9s ease-in-out infinite; } .mut-card--rare .mut-card__rarity { background: var(--soda); } .mut-card--epic { background: #FFF1B8; } .mut-card--epic .mut-card__rarity { background: var(--gum); } .mut-card__name { font-size: var(--fs-xl); } .mut-card__desc { font-size: var(--fs-m); font-weight: 700; } .mut-card__effect { align-self: flex-start; margin-top: auto; padding: .1rem .6rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: var(--fs-s); font-weight: 900; } .mut-card--neck { align-items: center; text-align: center; } .mut-card--neck .mut-card__rarity, .mut-card--neck .mut-card__effect { align-self: center; } .mut-card--neck .neck-card__art { transform: scale(1.35); margin: .6rem 0 .5rem; } .mut-card.is-focus { transform: translateY(-.6rem) rotate(-2deg) scale(1.04); box-shadow: var(--focus-glow), 0 .6rem 0 rgb(58 46 74 / .35); } /* ---- fps & debug */ .fps { position: absolute; right: .6rem; top: .4rem; z-index: var(--z-toasts); padding: .05rem .5rem; border-radius: .4rem; background: var(--ink); color: var(--paper); font-size: var(--fs-xs); font-weight: 800; } .dbg { position: absolute; left: .6rem; bottom: .6rem; z-index: var(--z-toasts); display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; max-width: 40rem; padding: .4rem .6rem; border-radius: .8rem; background: var(--ink); color: var(--paper); pointer-events: auto; font-size: var(--fs-xs); } .dbg:not([hidden]) { display: flex; } .dbg__btn { font: 800 var(--fs-xs) var(--font); padding: .15rem .6rem; border-radius: .5rem; border: 0; background: var(--butter); color: var(--ink); cursor: pointer; } /* ============================================================== 6 fallback for the Wave-0 HUD stub (A9 replaces) */ .nc-hud { position: absolute; left: 1rem; right: 1rem; top: .8rem; display: flex; justify-content: space-between; align-items: flex-start; font-weight: 900; font-size: var(--fs-l); pointer-events: none; z-index: var(--z-hud); } .nc-hud[hidden], .nc-banner[hidden], .nc-callout[hidden], .nc-panel[hidden] { display: none; } .nc-hud-p { background: var(--paper); border: var(--line) solid var(--p1); border-radius: .9rem; padding: .3rem .9rem; min-width: 11rem; } .nc-hud-p[data-p="1"] { border-color: var(--p2); border-style: dashed; text-align: right; } .nc-hud-clock { background: var(--paper); border: var(--line) solid var(--ink); border-radius: .9rem; padding: .2rem 1rem; text-align: center; } .nc-hud-clock strong { display: block; font-size: 2rem; } .nc-banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: 4.6rem; font-weight: 900; color: var(--paper); -webkit-text-stroke: .4rem var(--ink); paint-order: stroke fill; pointer-events: none; z-index: var(--z-callouts); } .nc-callout { position: absolute; transform: translate(-50%, -50%); font-weight: 900; color: var(--paper); -webkit-text-stroke: .3rem var(--ink); paint-order: stroke fill; white-space: nowrap; pointer-events: none; z-index: var(--z-callouts); } .nc-panel { position: absolute; right: 1rem; bottom: 1rem; background: var(--paper); border: var(--line) solid var(--ink); border-radius: .9rem; padding: .5rem .9rem; font-size: var(--fs-m); font-weight: 700; z-index: var(--z-hud); } /* ============================================================== 7 motion */ @keyframes screen-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wobble { 0% { rotate: 0deg; } 30% { rotate: -2.5deg; } 60% { rotate: 1.5deg; } 100% { rotate: 0deg; } } @keyframes shake { 0%, 100% { translate: 0; } 20% { translate: -.3rem; } 40% { translate: .3rem; } 60% { translate: -.2rem; } 80% { translate: .2rem; } } @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.18rem; } } @keyframes letter-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-.25rem) rotate(-1.5deg); } } @keyframes press-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes inflate-loop { 0%, 100% { transform: scale(.82, .78); } 50% { transform: scale(1.05, 1.08); } } @keyframes toast-in { from { opacity: 0; transform: translateY(-1.2rem) scale(.9); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(-.6rem) scale(.95); } } @keyframes toast-up { from { opacity: 0; transform: translateY(1.2rem) scale(.9); } to { opacity: 1; transform: none; } } @keyframes pop-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } } @keyframes card-in { from { opacity: 0; transform: translateX(3rem) rotate(3deg); } to { opacity: 1; transform: none; } } @keyframes card-deal { from { opacity: 0; transform: translateY(2rem) rotate(6deg) scale(.9); } to { opacity: 1; transform: none; } } @keyframes stamp { 0% { opacity: 0; scale: 1.8; } 70% { opacity: 1; scale: .92; } 100% { scale: 1; } } @keyframes plate-l { from { opacity: 0; translate: -40vw 0; } to { opacity: 1; translate: 0 0; } } @keyframes plate-r { from { opacity: 0; translate: 40vw 0; } to { opacity: 1; translate: 0 0; } } @keyframes vs-inflate { 0% { scale: 0; } 70% { scale: 1.15; } 100% { scale: 1; } } @keyframes rotate-phone { 0%, 20% { transform: rotate(0deg); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } } /* Reduced motion (settings or OS): no bobbing, wobbles or pops; screens cross-fade in 120 ms. * :not(#nc-rm) only raises specificity above the component selectors (this file avoids !important). */ body[data-motion="reduced"] *:not(#nc-rm), body[data-motion="reduced"] *:not(#nc-rm)::before, body[data-motion="reduced"] *:not(#nc-rm)::after { animation: none; transition: none; } body[data-motion="reduced"] .screen:not([hidden]):not(#nc-rm) { animation: fade-in .12s linear both; } body[data-motion="reduced"] .is-focus:not(#nc-rm) { transform: none; } body[data-motion="reduced"] .toast:not(#nc-rm) { animation: fade-in .12s linear both; } @media (prefers-reduced-motion: reduce) { .boot__balloon { animation: none; } } /* ============================================================== 8 responsive & rotate prompt */ body:not([data-compact="1"]) .pause__panel { margin-top: 6.6rem; max-height: calc(100% - 7.8rem); } /* keep the HUD gas panels visible while paused */ @media (max-width: 1100px) { .menu__col { width: min(32rem, 52vw); } .results__card { width: min(34rem, 56vw); } } @media (max-width: 900px) { .mode__split { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); } .dummy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ladder-path { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ctrl-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .moves { grid-template-columns: 1fr; } } /* compact layout: phones in landscape, short windows and big 界面大小 settings. app.js sets * body[data-compact="1"] when the effective height innerHeight / (--ui) is below 700 design px. */ body[data-compact="1"] .screen--title:not([hidden]) { padding: 1.2rem 2rem 1rem; } body[data-compact="1"] .logo--big .logo__en { font-size: 4rem; } body[data-compact="1"] .logo--big .logo__cn span { font-size: 1.5rem; } body[data-compact="1"] .title__press { margin-bottom: .6rem; } body[data-compact="1"] .menu__col { padding: .6rem 0 2.4rem 2rem; gap: .4rem; width: min(30rem, 52vw); } body[data-compact="1"] .menu-item { padding-top: .22rem; padding-bottom: .24rem; } body[data-compact="1"] .menu-item__sub { display: none; } body[data-compact="1"] .menu__xp { display: none; } body[data-compact="1"] .menu__foot { flex-wrap: nowrap; } body[data-compact="1"] .menu__me-portrait { width: 1.6rem; height: 1.6rem; } body[data-compact="1"] .logo--small .logo__en { font-size: 2rem; } body[data-compact="1"] .hintbar { left: 2rem; bottom: .5rem; } body[data-compact="1"] .screen--mode:not([hidden]) { padding: .5rem 1rem 2.4rem; } body[data-compact="1"] .mode__wrap { padding: .6rem .9rem .6rem; gap: .4rem; } body[data-compact="1"] .opp-card__portrait { width: 2.8rem; height: 2.8rem; } body[data-compact="1"] .opp-card { padding: .35rem .25rem .4rem; } body[data-compact="1"] .opp-detail__portrait { width: 4rem; height: 4rem; } body[data-compact="1"] .opp-detail__tip { display: none; } body[data-compact="1"] .mode__split { grid-template-columns: minmax(0, 1fr); } body[data-compact="1"] .opp-detail { display: none; } body[data-compact="1"] .opp-card__title { display: none; } body[data-compact="1"] .opp-card .neck-badge { padding: .02rem .3rem; gap: .15rem; } body[data-compact="1"] .opp-card__lock { padding: .02rem .25rem; } body[data-compact="1"] .opp-card__padlock { margin-left: .5rem; top: .25rem; } body[data-compact="1"] .roster { gap: .45rem; } body[data-compact="1"] .row--diff .row__sub { display: none; } body[data-compact="1"] .mode__rules { flex-direction: row; flex-wrap: wrap; align-items: center; padding: .25rem .4rem; gap: 0 .5rem; } body[data-compact="1"] .mode__rules > .mode__sub { display: none; } body[data-compact="1"] .mode__rules .row { min-height: 2.3rem; } body[data-compact="1"] .screen__title { font-size: var(--fs-l); } body[data-compact="1"] .lab__panel { margin: .5rem .6rem .5rem auto; padding: .55rem .7rem .55rem; gap: .3rem; } body[data-compact="1"] .lab__title { font-size: var(--fs-l); } body[data-compact="1"] .neck-card__desc { display: none; } body[data-compact="1"] .neck-card__art { height: 2.2rem; } body[data-compact="1"] .stat-bars { padding: .2rem .5rem; gap: .15rem .8rem; } body[data-compact="1"] .row { min-height: 2.4rem; padding-top: .2rem; padding-bottom: .2rem; } body[data-compact="1"] .vs__portrait { width: 5rem; height: 5rem; } body[data-compact="1"] .vs__bubble { width: 5.2rem; height: 5.2rem; font-size: 2.3rem; } body[data-compact="1"] .vs__row .vs__bubble { margin-left: -2.6rem; top: 4%; } body[data-compact="1"] .vs__plate { min-width: 11rem; padding: .6rem 1rem .7rem; } body[data-compact="1"] .results__card { padding: .6rem .9rem; gap: .35rem; width: min(36rem, 60vw); } body[data-compact="1"] .results__title { font-size: var(--fs-xl); } body[data-compact="1"] .grade { width: 3.4rem; height: 3.4rem; font-size: 2rem; } body[data-compact="1"] .results__xpbreak { display: none; } body[data-compact="1"] .badge-sticker { padding: .15rem .6rem; } body[data-compact="1"] .badge-sticker small { display: none; } body[data-compact="1"] .results__buttons .btn { min-height: 2.3rem; padding: .2rem 1rem; } body[data-compact="1"] .results__stats td, body[data-compact="1"] .results__stats th { padding-top: .05rem; padding-bottom: .05rem; } body[data-compact="1"] .pause__panel { margin: .6rem 0 .6rem .8rem; padding: .7rem .8rem; } body[data-compact="1"] .pause__title { font-size: var(--fs-xl); } body[data-compact="1"] .pause__ref { display: none; } body[data-compact="1"] .menu-item--pause { padding-top: .25rem; padding-bottom: .25rem; } body[data-compact="1"] .dialog { padding: .8rem 1rem; gap: .5rem; } body[data-compact="1"] .dialog--controls .moves, body[data-compact="1"] .dialog--controls .moves__title, body[data-compact="1"] .pad-outline { display: none; } body[data-compact="1"] .ctrl-line { min-height: 1.5rem; } body[data-compact="1"] .mut-card { min-height: 11rem; width: 11rem; padding: .6rem .8rem; } body[data-compact="1"] .mut-card__emblem { width: 3rem; height: 3.4rem; font-size: 1.4rem; margin: .1rem 0 .4rem; } body[data-compact="1"] .join-slot__portrait { width: 3.4rem; height: 3.4rem; } body[data-compact="1"] .join-slot { min-height: 5rem; } body[data-compact="1"] .title__foot { display: none; } @media (max-height: 420px) { .menu__small { margin-top: .2rem; } .lab__try { bottom: .5rem; left: .6rem; } .lab__plate { top: .5rem; left: .6rem; } .settings__note { display: none; } } /* ultra-wide: keep the menu column and cards from stretching */ @media (min-aspect-ratio: 2/1) { .mode__wrap { width: min(70rem, 80vw); } } .rotate { display: none; } @media (orientation: portrait) and (max-width: 700px) { .rotate { position: fixed; inset: 0; z-index: var(--z-rotate); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; background: var(--ink); color: var(--paper); font-size: 18px; font-weight: 900; pointer-events: auto; text-align: center; padding: 2rem; } .rotate__phone { width: 64px; height: 110px; border: 5px solid var(--paper); border-radius: 14px; position: relative; animation: rotate-phone 2.4s ease-in-out infinite; } .rotate__phone i { position: absolute; left: 50%; bottom: 8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--butter); } }