/* ========================================================================== Aetheria: Anima Genesis — "phosphor-terminal" design system Pixel-art soul in machined modern chrome. Fonts are self-hosted; every animation is transform/opacity-only; decorative motion dies under prefers-reduced-motion; CRT layer is toggleable via . ========================================================================== */ /* ---- fonts (self-hosted, assets/fonts) ---- */ @font-face { font-family: "Press Start 2P"; src: url("../assets/fonts/PressStart2P.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "VT323"; src: url("../assets/fonts/VT323.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Space Grotesk"; src: url("../assets/fonts/SpaceGrotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } :root { /* surface ramp */ --bg-0: #070b14; --bg-1: #0b1120; --bg-2: #111a30; --bg-3: #1a2440; --edge: rgba(148, 180, 255, 0.14); --edge-strong: rgba(148, 180, 255, 0.30); /* text ramp */ --text-hi: #eaf1ff; --text-mid: #aebcdf; --text-dim: #6d7ea8; /* accents */ --accent: #57e6c0; --accent-glow: rgba(87, 230, 192, 0.45); --gold: #ffd76a; --gold-glow: rgba(255, 215, 106, 0.4); --red: #ff6b6b; --purple: #b98aff; --green: #58d68d; --cyan: #7df9ff; /* legacy aliases (kept for existing rules) */ --bg: var(--bg-0); --bg2: var(--bg-1); --panel: var(--bg-2); --panel2: var(--bg-3); --line: var(--edge-strong); --text: var(--text-hi); --dim: var(--text-dim); /* type roles */ --font-display: "Press Start 2P", "Courier New", monospace; --font-terminal: "VT323", "Courier New", monospace; --font-ui: "Space Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Courier New", monospace; --font: var(--font-ui); /* motion */ --t-fast: 120ms; --t-med: 250ms; --t-slow: 400ms; --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* radii */ --r-0: 2px; --r-sm: 8px; --r-panel: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; background: var(--bg-0); color: var(--text-hi); font-family: var(--font-ui); font-size: 15px; } ::selection { background: rgba(87, 230, 192, 0.3); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button { -webkit-tap-highlight-color: transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-1); } ::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--edge-strong); } /* ---- background depth layers ---- */ .bg-nebula, .bg-stars { position: fixed; inset: -10%; pointer-events: none; z-index: 0; } .bg-nebula { background: radial-gradient(42% 34% at 18% 22%, rgba(87, 230, 192, 0.05), transparent 70%), radial-gradient(38% 40% at 82% 12%, rgba(185, 138, 255, 0.05), transparent 70%), radial-gradient(50% 44% at 60% 95%, rgba(47, 128, 255, 0.05), transparent 70%); animation: nebula-drift 40s ease-in-out infinite alternate; } .bg-stars { background-image: radial-gradient(1px 1px at 12% 24%, rgba(255,255,255,0.30), transparent 100%), radial-gradient(1px 1px at 34% 68%, rgba(255,255,255,0.22), transparent 100%), radial-gradient(1px 1px at 58% 15%, rgba(255,255,255,0.28), transparent 100%), radial-gradient(1px 1px at 71% 82%, rgba(255,255,255,0.18), transparent 100%), radial-gradient(1px 1px at 88% 44%, rgba(255,255,255,0.26), transparent 100%), radial-gradient(1px 1px at 45% 92%, rgba(255,255,255,0.20), transparent 100%), radial-gradient(1px 1px at 23% 51%, rgba(125,249,255,0.25), transparent 100%), radial-gradient(1px 1px at 92% 8%, rgba(125,249,255,0.20), transparent 100%); background-size: 640px 640px; animation: stars-drift 120s linear infinite; } @keyframes nebula-drift { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 1%, 0) scale(1.06); } } @keyframes stars-drift { from { background-position: 0 0; } to { background-position: 640px 640px; } } /* ---- CRT layer (toggleable) ---- */ :root:not([data-crt="off"]) body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0 1px, transparent 1px 3px), radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.28) 100%); } #app { max-width: 1020px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; position: relative; z-index: 1; } .hidden { display: none !important; } /* ========================================================================== HUD ========================================================================== */ #hud { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--edge); background: linear-gradient(180deg, rgba(17, 26, 48, 0.92), rgba(11, 17, 32, 0.88)); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.35); position: sticky; top: 0; z-index: 50; } .hud-logo { font-family: var(--font-display); font-size: 12px; color: var(--accent); letter-spacing: 0.08em; text-shadow: 0 0 12px var(--accent-glow); } .hud-sub { color: var(--text-dim); margin-left: 10px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .hud-right { display: flex; gap: 8px; align-items: center; } .hud-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); padding: 4px 12px; font-size: 13px; white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .hud-chip.aeth { color: var(--gold); } .hud-chip.energy { color: var(--cyan); } .hud-btn { background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); color: var(--text-dim); border: 1px solid var(--edge); font-family: var(--font-ui); padding: 4px 10px; cursor: pointer; border-radius: 999px; transition: color var(--t-fast) var(--ease-out-soft), border-color var(--t-fast) var(--ease-out-soft); } .hud-btn.on { color: var(--accent); border-color: rgba(87, 230, 192, 0.4); } #screen { flex: 1; padding: 18px 16px 32px; } /* screen entrance */ #screen.screen-enter > * { animation: screen-in var(--t-med) var(--ease-out-soft) both; } @keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== Typography atoms ========================================================================== */ h1, h2, h3 { letter-spacing: 0.02em; font-family: var(--font-ui); font-weight: 700; } .screen-title { font-family: var(--font-display); font-size: 17px; color: var(--text-hi); text-shadow: 0 0 14px var(--accent-glow); margin-bottom: 6px; letter-spacing: 0.06em; line-height: 1.6; } .eyebrow { font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; } .screen-sub { color: var(--text-mid); font-size: 13px; margin-bottom: 18px; line-height: 1.6; max-width: 72ch; } .hairline { height: 1px; border: 0; margin: 10px 0 16px; background: linear-gradient(90deg, var(--edge-strong), transparent 70%); } .px-icon { display: inline-block; vertical-align: -2px; margin-right: 7px; flex: none; } /* ========================================================================== Panels & buttons ========================================================================== */ .panel { background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--edge); border-radius: var(--r-panel); padding: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35); } .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); color: var(--text-mid); border: 1px solid var(--edge); border-radius: var(--r-sm); font-family: var(--font-ui); font-weight: 500; font-size: 14px; padding: 9px 16px; min-height: 38px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: color var(--t-fast) var(--ease-out-soft), border-color var(--t-fast) var(--ease-out-soft), transform var(--t-fast) var(--ease-out-soft), background var(--t-fast) var(--ease-out-soft); overflow: hidden; } .btn::before { /* left accent bar */ content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 3px; background: var(--accent); border-radius: 2px; transform: scaleY(0); transform-origin: center; transition: transform var(--t-fast) var(--ease-out-soft); } @media (hover: hover) { .btn:hover:not(:disabled) { color: var(--text-hi); border-color: rgba(87, 230, 192, 0.45); background: linear-gradient(180deg, #1e2a4c, #16203c); transform: translateX(2px); } .btn:hover:not(:disabled)::before { transform: scaleY(1); } } .btn:active:not(:disabled) { transform: translateX(2px) scale(0.98); } .btn:disabled { opacity: 0.38; cursor: not-allowed; } .btn.primary { color: var(--accent); border-color: rgba(87, 230, 192, 0.4); } .btn.primary::before { background: var(--accent); } .btn.danger { color: var(--red); border-color: rgba(255, 107, 107, 0.35); } .btn.danger::before { background: var(--red); } .btn.gold { color: var(--gold); border-color: rgba(255, 215, 106, 0.35); } .btn.gold::before { background: var(--gold); } .btn.small { font-size: 12px; padding: 6px 11px; min-height: 32px; } /* ========================================================================== Shared game atoms ========================================================================== */ .sprite { image-rendering: pixelated; image-rendering: crisp-edges; } .silhouette { filter: brightness(0.16) saturate(0.4); } .sprite-stage { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; } .sprite-stage::before { /* element-tinted spotlight */ content: ""; position: absolute; inset: -12% -18%; background: radial-gradient(50% 45% at 50% 62%, var(--el-glow, rgba(87, 230, 192, 0.14)), transparent 75%); pointer-events: none; } .sprite-stage::after { /* grounding shadow */ content: ""; position: absolute; left: 16%; right: 16%; bottom: -6px; height: 10px; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5), transparent 75%); animation: shadow-breathe 1.2s steps(2) infinite alternate; } .sprite-stage .sprite { position: relative; animation: idle-bob 1.2s steps(2) infinite alternate; } .sprite-stage.foe .sprite { animation-delay: -0.6s; } @keyframes idle-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } } @keyframes shadow-breathe { from { transform: scaleX(1); opacity: 0.9; } to { transform: scaleX(0.88); opacity: 0.65; } } .type-chip { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 4px; color: #0b0f1e; font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.08em; margin-right: 4px; } .rarity { font-size: 11px; letter-spacing: 0.1em; font-family: var(--font-ui); font-weight: 500; } .rarity.Common { color: #a9b6d8; } .rarity.Uncommon { color: var(--green); } .rarity.Rare { color: var(--cyan); } .rarity.Epic { color: var(--purple); } .rarity.Genesis { color: var(--gold); text-shadow: 0 0 10px var(--gold-glow); } /* hp / xp bars — dual-layer with trailing ghost */ .hp-bar { position: relative; height: 9px; background: rgba(5, 8, 16, 0.8); border: 1px solid var(--edge); border-radius: 5px; overflow: hidden; } .hp-bar .bar-ghost, .hp-bar .bar-fill, .hp-bar > div { position: absolute; inset: 0; transform-origin: left center; border-radius: 4px; } .hp-bar > div { background: var(--green); } /* legacy single-fill */ .hp-bar .bar-ghost { background: rgba(255, 107, 107, 0.55); transition: transform 0.55s var(--ease-out-soft) 0.25s; } .hp-bar .bar-fill { background: linear-gradient(180deg, #7ceba7, var(--green)); transition: transform 0.15s var(--ease-out-soft); } .hp-bar.warn .bar-fill, .hp-bar.warn > div { background: linear-gradient(180deg, #ffe08a, var(--gold)); } .hp-bar.crit .bar-fill, .hp-bar.crit > div { background: linear-gradient(180deg, #ff9b9b, var(--red)); animation: hp-pulse 0.9s ease-in-out infinite; } @keyframes hp-pulse { 50% { opacity: 0.55; } } .xp-bar { height: 4px; background: rgba(5, 8, 16, 0.8); border: 1px solid var(--edge); border-radius: 3px; overflow: hidden; margin-top: 4px; } .xp-bar > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--cyan)); transition: width 0.5s var(--ease-out-soft); } .status-tag { font-size: 9px; padding: 2px 5px; border-radius: 3px; margin-left: 4px; color: #fff; text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; } .status-tag.brn { background: #8a3a1d; } .status-tag.psn { background: #5c3a8a; } .status-tag.par { background: #8a7420; } .status-tag.frz { background: #1d6a8a; } /* ========================================================================== Title screen ========================================================================== */ .title-screen { text-align: center; padding: 48px 16px; display: flex; flex-direction: column; align-items: center; gap: 20px; min-height: 72vh; justify-content: center; } .title-logo { font-family: var(--font-display); font-size: clamp(26px, 6vw, 52px); letter-spacing: 0.1em; line-height: 1.2; background: linear-gradient(180deg, #d8fff4 10%, var(--accent) 55%, #1fae8c 90%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px var(--accent-glow)) drop-shadow(3px 3px 0 rgba(6, 32, 27, 0.9)); animation: title-in 0.7s var(--ease-out-soft) both, title-glow 3.4s ease-in-out 0.7s infinite alternate; } @keyframes title-in { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: scale(1); } } @keyframes title-glow { from { filter: drop-shadow(0 0 14px var(--accent-glow)) drop-shadow(3px 3px 0 rgba(6, 32, 27, 0.9)); } to { filter: drop-shadow(0 0 30px var(--accent-glow)) drop-shadow(3px 3px 0 rgba(6, 32, 27, 0.9)); } } .title-tag { color: var(--gold); letter-spacing: 0.5em; text-indent: 0.5em; font-family: var(--font-ui); font-weight: 500; font-size: clamp(11px, 2.2vw, 14px); text-transform: uppercase; } .title-blurb { font-family: var(--font-terminal); color: var(--text-mid); max-width: 560px; font-size: 20px; line-height: 1.45; } .title-menu { display: flex; flex-direction: column; gap: 10px; width: 280px; } .title-menu .btn { justify-content: center; } .title-foot { color: var(--text-dim); font-size: 11px; margin-top: 20px; letter-spacing: 0.14em; text-transform: uppercase; animation: soft-blink 1s steps(1) infinite; } @keyframes soft-blink { 50% { opacity: 0.45; } } /* ========================================================================== Starter select ========================================================================== */ .starter-grid { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } .starter-card { width: 230px; text-align: center; cursor: pointer; padding: 22px 14px 18px; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--edge); border-radius: var(--r-panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35); position: relative; overflow: hidden; transition: border-color var(--t-med) var(--ease-out-soft), transform var(--t-med) var(--ease-out-soft), box-shadow var(--t-med) var(--ease-out-soft); } .starter-card::after { /* sheen sweep */ content: ""; position: absolute; top: -60%; bottom: -60%; left: -30%; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.07), transparent); transform: translateX(-140%) rotate(12deg); pointer-events: none; } @media (hover: hover) { .starter-card:hover { border-color: rgba(87, 230, 192, 0.5); transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 34px rgba(0, 0, 0, 0.5); } .starter-card:hover::after { transition: transform 0.6s var(--ease-out-soft); transform: translateX(480%) rotate(12deg); } } .starter-card h3 { margin: 10px 0 6px; font-size: 17px; } .starter-card p { color: var(--text-mid); font-size: 12px; line-height: 1.55; margin-top: 8px; } /* ========================================================================== Hub ========================================================================== */ .hub-head p { color: var(--text-mid); font-size: 13px; } .nav-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 18px; } .sector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; } .sector-card { border: 1px solid var(--edge); border-radius: var(--r-panel); padding: 14px 14px 12px; cursor: pointer; position: relative; overflow: hidden; background: linear-gradient(160deg, var(--bg-3) 20%, var(--bg-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.3); transition: border-color var(--t-med) var(--ease-out-soft), transform var(--t-med) var(--ease-out-soft), box-shadow var(--t-med) var(--ease-out-soft); --i: 0; animation: card-rise 0.32s var(--ease-out-soft) both; animation-delay: calc(var(--i) * 40ms); } @keyframes card-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .sector-card .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--sector-accent, var(--accent)), transparent 130%); box-shadow: 0 0 12px var(--sector-accent, var(--accent)); } @media (hover: hover) { .sector-card:hover:not(.locked) { border-color: var(--sector-accent, var(--accent)); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 32px rgba(0, 0, 0, 0.5); } } .sector-card h3 { margin-left: 10px; font-size: 16px; letter-spacing: 0.04em; } .sector-card .meta { margin: 8px 0 0 10px; font-size: 12px; color: var(--text-mid); line-height: 1.6; } .sector-card .badges { margin: 10px 0 0 10px; font-size: 11px; display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--font-ui); } .sector-card.locked { opacity: 0.5; cursor: not-allowed; filter: saturate(0.5); } .badge-done { color: var(--green); } .badge-todo { color: var(--text-dim); } .badge-shrine { color: var(--gold); } /* ========================================================================== Sector / overworld ========================================================================== */ .sector-screen { display: flex; flex-direction: column; gap: 12px; align-items: center; } .world-wrap { position: relative; width: 100%; max-width: 640px; } .world-wrap #ow-canvas { display: block; } /* in-world dialog box (NPCs, signs, trainers) */ .dialog-box { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5; min-height: 62px; cursor: pointer; background: rgba(7, 11, 20, 0.93); border: 1px solid var(--edge-strong); border-radius: var(--r-sm); padding: 10px 34px 10px 14px; font-family: var(--font-terminal); font-size: 19px; line-height: 1.35; color: var(--text-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.55); animation: dlg-in 0.15s var(--ease-out-soft); } @keyframes dlg-in { from { opacity: 0; transform: translateY(6px); } } .dlg-speaker { color: var(--gold); margin-right: 10px; } .dlg-speaker::after { content: " ▸"; color: var(--text-dim); } .dlg-caret { position: absolute; right: 12px; bottom: 8px; color: var(--accent); font-size: 12px; animation: soft-blink 0.9s steps(1) infinite; } /* zone name banner on area transitions */ .zone-banner { position: absolute; top: 12px; left: 50%; z-index: 4; transform: translate(-50%, 0); font-family: var(--font-display); font-size: 12px; letter-spacing: 0.22em; color: #fff; text-shadow: 0 0 14px rgba(0, 0, 0, 0.9), 2px 2px 0 rgba(0, 0, 0, 0.8); opacity: 0; pointer-events: none; white-space: nowrap; } .zone-banner.show { animation: zone-banner-kf 2s var(--ease-out-soft) both; } @keyframes zone-banner-kf { 0% { opacity: 0; transform: translate(-50%, -8px); } 12% { opacity: 1; transform: translate(-50%, 0); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -4px); } } /* mobile control cluster: d-pad + A/RUN buttons */ .pad-cluster { display: flex; width: 100%; max-width: 640px; justify-content: space-between; align-items: center; gap: 12px; user-select: none; } @media (min-width: 900px) { .pad-cluster { display: none; } } .act-col { display: flex; flex-direction: column; gap: 10px; align-items: center; } .act-a, .act-b { border: 1px solid var(--edge-strong); cursor: pointer; touch-action: none; background: linear-gradient(180deg, rgba(26, 36, 64, 0.9), rgba(17, 26, 48, 0.9)); color: var(--accent); font-family: var(--font-ui); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 12px rgba(0, 0, 0, 0.4); transition: transform 80ms var(--ease-out-soft), background 80ms var(--ease-out-soft); } .act-a { width: 68px; height: 68px; border-radius: 50%; font-size: 22px; } .act-b { width: 58px; height: 34px; border-radius: 999px; font-size: 11px; letter-spacing: 0.08em; color: var(--gold); } .act-a:active, .act-b:active { background: rgba(87, 230, 192, 0.2); transform: scale(0.94); } .pause-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .sector-topbar { width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .sector-topbar h3 { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.08em; } .sector-topbar .info { font-size: 12px; color: var(--text-mid); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } #ow-canvas { width: 100%; max-width: 800px; border: 1px solid var(--edge-strong); border-radius: var(--r-sm); image-rendering: pixelated; background: #05070f; touch-action: none; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(0, 0, 0, 0.4); } .legend { font-family: var(--font-terminal); font-size: 16px; color: var(--text-dim); display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .legend b { font-weight: normal; } .dpad { display: grid; grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(3, 62px); gap: 6px; margin-top: 2px; user-select: none; } .dpad button { background: linear-gradient(180deg, rgba(26, 36, 64, 0.9), rgba(17, 26, 48, 0.9)); border: 1px solid var(--edge-strong); border-radius: 12px; color: var(--accent); font-size: 20px; cursor: pointer; touch-action: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 12px rgba(0, 0, 0, 0.4); transition: transform 80ms var(--ease-out-soft), background 80ms var(--ease-out-soft); } .dpad button:active { background: rgba(87, 230, 192, 0.2); transform: scale(0.94); } .dpad .void { visibility: hidden; } @media (min-width: 900px) { .dpad { display: none; } } /* ========================================================================== Battle ========================================================================== */ .battle-overlay { position: fixed; inset: 0; z-index: 100; background: radial-gradient(70% 50% at 50% 0%, rgba(26, 36, 64, 0.6), transparent 70%), var(--bg-0); overflow-y: auto; padding: 16px; animation: power-on 0.26s var(--ease-out-soft) both; } @keyframes power-on { 0% { opacity: 0; transform: scaleY(0.01) scaleX(1.02); filter: brightness(2.4); } 55% { opacity: 1; transform: scaleY(1.015) scaleX(1); filter: brightness(1.35); } 100% { opacity: 1; transform: scaleY(1); filter: brightness(1); } } .battle-overlay.overlay-exit { animation: power-off 0.18s var(--ease-out-soft) both; } @keyframes power-off { from { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scaleY(0.01); filter: brightness(2); } } .battle { display: flex; flex-direction: column; gap: 12px; max-width: 840px; margin: 0 auto; } .battle-arena { position: relative; border: 1px solid var(--edge-strong); border-radius: var(--r-panel); min-height: 280px; padding: 22px 18px 18px; overflow: hidden; background: radial-gradient(ellipse at 75% 20%, rgba(255, 255, 255, 0.05), transparent 45%), linear-gradient(180deg, var(--arena-a, #131a35) 0%, var(--bg-0) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 40px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: space-between; gap: 10px; } .battle-arena.stage-shake { animation: stage-shake-kf 0.4s var(--ease-out-soft); } @keyframes stage-shake-kf { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(calc(var(--shake-px, 4px) * -1), 2px); } 40% { transform: translate(var(--shake-px, 4px), -2px); } 60% { transform: translate(calc(var(--shake-px, 4px) * -0.6), 1px); } 80% { transform: translate(calc(var(--shake-px, 4px) * 0.6), -1px); } } .battle-kind { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 9px; letter-spacing: 0.3em; color: var(--text-dim); white-space: nowrap; } .battle-kind.boss { color: var(--red); text-shadow: 0 0 10px rgba(255, 107, 107, 0.6); } .battle-kind.shrine { color: var(--gold); text-shadow: 0 0 10px var(--gold-glow); } .combat-row { display: flex; align-items: center; gap: 18px; } .combat-row.enemy { justify-content: flex-end; } .combat-row.player { justify-content: flex-start; flex-direction: row-reverse; } .plate { background: rgba(7, 11, 20, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--edge); border-left: 3px solid var(--el, var(--accent)); border-radius: var(--r-sm); padding: 10px 12px; min-width: 220px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 18px rgba(0, 0, 0, 0.45); } .plate .nm { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; margin-bottom: 6px; font-weight: 700; } .plate .lv-pill { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11px; color: var(--text-mid); border: 1px solid var(--edge); border-radius: 999px; padding: 1px 8px; white-space: nowrap; } .plate .hp-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-mid); text-align: right; margin-top: 4px; } /* sprite combat animations */ .sprite-slot { position: relative; } .sprite-slot .sprite { filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.5)); } .lunge-player { animation: lunge-r 0.32s var(--ease-out-soft); } .lunge-enemy { animation: lunge-l 0.32s var(--ease-out-soft); } @keyframes lunge-r { 0% { transform: translateX(0); } 40% { transform: translateX(26px); } 100% { transform: translateX(0); } } @keyframes lunge-l { 0% { transform: translateX(0); } 40% { transform: translateX(-26px); } 100% { transform: translateX(0); } } .hit-flash { animation: hit-flash-kf 0.18s steps(2); } @keyframes hit-flash-kf { 0% { filter: brightness(3) saturate(0); } 100% { filter: brightness(1); } } .shake { animation: hit-shake 0.3s var(--ease-out-soft); } @keyframes hit-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } } .faint-out { animation: faint-kf 0.55s var(--ease-out-soft) 0.15s both; } @keyframes faint-kf { to { transform: translateY(20px) rotate(5deg); opacity: 0; filter: saturate(0) brightness(0.6); } } .flash { animation: flash 0.3s; } @keyframes flash { 50% { filter: brightness(3); } } /* floating numbers */ .dmg-float { position: absolute; z-index: 5; pointer-events: none; font-family: var(--font-mono); font-weight: 800; font-size: 20px; color: var(--text-hi); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.5); animation: float-up 0.85s var(--ease-out-soft) both; transform: translate(-50%, 0); } .dmg-float.crit { color: var(--gold); font-size: 27px; text-shadow: 0 2px 0 rgba(0,0,0,0.7), 0 0 16px var(--gold-glow); } .dmg-float.weakhit { color: var(--text-dim); font-size: 16px; } .dmg-float.heal { color: var(--green); } .dmg-float.xp { color: var(--cyan); font-size: 15px; } .dmg-float.gold { color: var(--gold); font-size: 15px; } @keyframes float-up { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -44px) scale(1); } } /* particles / banner / capture orb */ .fx-particle { position: absolute; z-index: 6; width: 4px; height: 4px; pointer-events: none; animation: particle-fly 0.7s var(--ease-out-soft) both; } @keyframes particle-fly { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx, 20px), var(--dy, -30px)); } } .fx-banner { position: absolute; z-index: 7; left: 50%; top: 42%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: clamp(16px, 4vw, 26px); letter-spacing: 0.14em; white-space: nowrap; pointer-events: none; animation: banner-in 0.4s var(--ease-bounce) both; } .fx-banner.gold { color: var(--gold); text-shadow: 0 0 24px var(--gold-glow), 3px 3px 0 rgba(60, 40, 0, 0.8); } .fx-banner.teal { color: var(--accent); text-shadow: 0 0 24px var(--accent-glow), 3px 3px 0 rgba(6, 32, 27, 0.8); } .fx-banner.red { color: var(--red); text-shadow: 0 0 24px rgba(255, 107, 107, 0.5), 3px 3px 0 rgba(64, 8, 8, 0.8); } .fx-banner.out { animation: banner-out 0.3s var(--ease-out-soft) both; } @keyframes banner-in { from { opacity: 0; transform: translate(-50%, -50%) scale(1.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes banner-out { to { opacity: 0; transform: translate(-50%, -60%) scale(0.92); } } .capture-orb { position: absolute; z-index: 6; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8fff4, var(--accent) 60%, #147a63); box-shadow: 0 0 14px var(--accent-glow); animation: orb-throw 0.5s cubic-bezier(0.3, 0, 0.5, 1) both; pointer-events: none; } @keyframes orb-throw { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(calc(-50% + var(--tx) * 0.5), calc(-50% + var(--ty) * 0.5 - 52px)) scale(1.3) rotate(240deg); } 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.85) rotate(540deg); } } .battle-log { border: 1px solid var(--edge); background: rgba(7, 11, 20, 0.8); border-radius: var(--r-sm); height: 96px; overflow-y: auto; padding: 8px 12px; font-family: var(--font-terminal); font-size: 18px; line-height: 1.35; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4); } .battle-log div { color: var(--text-dim); animation: log-in 0.2s var(--ease-out-soft); } .battle-log div:last-child { color: var(--text-hi); } @keyframes log-in { from { opacity: 0; transform: translateY(4px); } } .battle-controls { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; transition: opacity var(--t-fast); } .moves-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .move-btn { text-align: left; text-transform: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 12px; letter-spacing: 0.01em; } .move-btn > span:first-child { font-weight: 700; font-size: 14px; } .move-btn .mv-meta { font-size: 10px; color: var(--text-dim); display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); } .action-col { display: flex; flex-direction: column; gap: 9px; } .action-col .btn { justify-content: flex-start; } /* ========================================================================== Party ========================================================================== */ .party-list { display: flex; flex-direction: column; gap: 10px; } .anima-row { display: flex; gap: 14px; align-items: center; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--edge); border-left: 3px solid var(--el, var(--edge)); border-radius: var(--r-sm); padding: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: border-color var(--t-fast) var(--ease-out-soft), transform var(--t-fast) var(--ease-out-soft); --i: 0; animation: card-rise 0.3s var(--ease-out-soft) both; animation-delay: calc(var(--i) * 35ms); } @media (hover: hover) { .anima-row:hover { border-color: var(--edge-strong); transform: translateX(2px); } } .anima-row .grow { flex: 1; min-width: 0; } .anima-row .nm { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .anima-row .nm b { font-size: 15px; } .anima-row .sub { font-size: 11px; color: var(--text-mid); margin-top: 5px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .anima-row .ops { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .anima-row.fainted { opacity: 0.55; filter: saturate(0.5); } .staked-tag { font-size: 9px; color: var(--gold); border: 1px solid rgba(255, 215, 106, 0.4); padding: 2px 6px; border-radius: 999px; letter-spacing: 0.08em; } /* ========================================================================== Codex ========================================================================== */ .codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; } .codex-cell { position: relative; background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--edge); border-radius: var(--r-sm); text-align: center; padding: 8px 2px 7px; cursor: pointer; font-size: 10px; color: var(--text-mid); overflow: hidden; transition: border-color var(--t-fast) var(--ease-out-soft), transform var(--t-fast) var(--ease-out-soft); --i: 0; animation: card-rise 0.3s var(--ease-out-soft) both; animation-delay: calc(min(var(--i), 24) * 14ms); } .codex-cell > * { position: relative; z-index: 1; } @media (hover: hover) { .codex-cell:hover { border-color: var(--accent); transform: translateY(-2px); } } .codex-cell .num { font-size: 9px; color: var(--text-dim); font-family: var(--font-mono); } .codex-cell.caught { border-color: rgba(88, 214, 141, 0.35); } .codex-cell[data-rarity="Rare"].caught { border-color: rgba(125, 249, 255, 0.4); box-shadow: inset 0 0 14px rgba(125, 249, 255, 0.07); } .codex-cell[data-rarity="Epic"].caught { border-color: rgba(185, 138, 255, 0.5); box-shadow: inset 0 0 16px rgba(185, 138, 255, 0.1); animation: card-rise 0.3s var(--ease-out-soft) both, epic-pulse 3s ease-in-out infinite; animation-delay: calc(min(var(--i), 24) * 14ms), 0s; } @keyframes epic-pulse { 50% { box-shadow: inset 0 0 22px rgba(185, 138, 255, 0.22); } } .codex-cell[data-rarity="Genesis"].caught { border-color: rgba(255, 215, 106, 0.6); } .codex-cell[data-rarity="Genesis"].caught::before { content: ""; position: absolute; inset: -45%; z-index: 0; background: conic-gradient(from 0deg, transparent 0 72%, rgba(255, 215, 106, 0.5) 84%, transparent 96%); animation: rim-spin 3.6s linear infinite; } @keyframes rim-spin { to { transform: rotate(360deg); } } .codex-stats td { padding: 3px 12px 3px 0; font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .codex-stats td:last-child { color: var(--text-hi); } /* ========================================================================== Staking ========================================================================== */ .node-card { margin-bottom: 14px; } .node-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; } .node-head h3 { font-size: 15px; letter-spacing: 0.03em; } .node-slots { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; } .node-slot { width: 92px; min-height: 112px; padding: 6px 2px; border: 1px dashed var(--edge-strong); border-radius: var(--r-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: var(--text-dim); gap: 4px; text-align: center; transition: border-color var(--t-fast) var(--ease-out-soft), background var(--t-fast) var(--ease-out-soft); animation: slot-idle 3s ease-in-out infinite; } @keyframes slot-idle { 50% { border-color: var(--edge); } } @media (hover: hover) { .node-slot:not(.filled):hover { border-color: var(--accent); background: rgba(87, 230, 192, 0.05); } } .node-slot.filled { border-style: solid; animation: none; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .node-yield { font-size: 12px; color: var(--gold); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ========================================================================== Shop / arena ========================================================================== */ .shop-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--edge); } .shop-row:last-child { border-bottom: 0; } .shop-row b { font-size: 14px; } .shop-row .d { font-size: 11px; color: var(--text-mid); margin-top: 3px; } .price { color: var(--gold); white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .owned { color: var(--text-dim); font-size: 11px; white-space: nowrap; font-family: var(--font-mono); } .arena-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .arena-head h3 { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.06em; } .vs-row { display: flex; gap: 12px; align-items: center; margin: 14px 0 4px; flex-wrap: wrap; } /* ========================================================================== Modals & toasts ========================================================================== */ #modal-root:not(:empty) { position: fixed; inset: 0; background: rgba(3, 5, 12, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; animation: backdrop-in 0.15s ease-out both; } @keyframes backdrop-in { from { opacity: 0; } } .modal { background: linear-gradient(180deg, rgba(26, 36, 64, 0.96), rgba(17, 26, 48, 0.96)); border: 1px solid rgba(87, 230, 192, 0.4); border-radius: var(--r-panel); padding: 20px; max-width: 580px; width: 100%; max-height: 86vh; overflow-y: auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 44px rgba(87, 230, 192, 0.12), 0 24px 60px rgba(0, 0, 0, 0.6); animation: modal-in 0.22s var(--ease-out-soft) both; } @keyframes modal-in { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal h3 { color: var(--accent); margin-bottom: 12px; font-size: 16px; letter-spacing: 0.04em; } .modal .modal-body { font-size: 14px; line-height: 1.65; color: var(--text-hi); } .modal .modal-ops { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; justify-content: flex-end; } .picker-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; } .picker-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; cursor: pointer; min-height: 48px; border: 1px solid var(--edge); border-radius: var(--r-sm); background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); transition: border-color var(--t-fast) var(--ease-out-soft), transform var(--t-fast) var(--ease-out-soft); } @media (hover: hover) { .picker-item:hover:not(.disabled) { border-color: var(--accent); transform: translateX(3px); } } .picker-item:active:not(.disabled) { transform: scale(0.985); } .picker-item.disabled { opacity: 0.4; cursor: not-allowed; } .picker-item .grow { flex: 1; } .savecode { width: 100%; height: 90px; background: rgba(5, 8, 16, 0.9); color: var(--accent); border: 1px solid var(--edge); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 10px; padding: 8px; } #toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 7px; align-items: center; pointer-events: none; } .toast { background: linear-gradient(180deg, rgba(26, 36, 64, 0.96), rgba(17, 26, 48, 0.96)); border: 1px solid rgba(87, 230, 192, 0.45); color: var(--text-hi); padding: 9px 18px; border-radius: 999px; font-size: 13px; animation: toast-in 0.25s var(--ease-bounce); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(87, 230, 192, 0.08); max-width: 92vw; } .toast.gold { border-color: rgba(255, 215, 106, 0.5); color: var(--gold); box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 18px var(--gold-glow); } @keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(0.95); } } .back-row { margin-bottom: 14px; } /* ========================================================================== Mobile ========================================================================== */ @media (max-width: 700px) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } #screen { padding: 14px 12px calc(24px + env(safe-area-inset-bottom)); } #hud { padding: 8px 12px; } .hud-sub { display: none; } .hud-chip { font-size: 12px; padding: 3px 9px; } .screen-title { font-size: 14px; } .battle-arena { min-height: 240px; padding: 20px 10px 12px; } .plate { min-width: 148px; padding: 8px 9px; } .plate .nm { font-size: 13px; flex-wrap: wrap; } .combat-row { gap: 8px; } .battle-controls { grid-template-columns: 1fr; } .moves-grid { gap: 7px; } .btn { min-height: 42px; } .btn.small { min-height: 36px; } .modal { padding: 16px; } .anima-row { flex-wrap: wrap; } .anima-row .ops { width: 100%; justify-content: flex-start; } .fx-banner { font-size: 15px; } } /* ========================================================================== Reduced motion: kill everything decorative ========================================================================== */ @media (prefers-reduced-motion: reduce) { .bg-nebula, .bg-stars, .title-logo, .title-foot, .sprite-stage .sprite, .sprite-stage::after, .sector-card, .anima-row, .codex-cell, .node-slot, .codex-cell[data-rarity="Genesis"].caught::before, .codex-cell[data-rarity="Epic"].caught, .hp-bar.crit .bar-fill, .hp-bar.crit > div { animation: none !important; } #screen.screen-enter > *, .battle-overlay, .modal, .toast, .battle-log div { animation-duration: 1ms !important; } .starter-card::after { display: none; } * { transition-duration: 1ms !important; } }