/* ============================================================ 封神 · Investiture of the Gods — Roguelike Shooter 3 themes via [data-theme] on ============================================================ */ :root { /* Resolved per-theme */ --bg: #0a0807; --ink: #11100e; --paper: #f3e6c8; --vermilion: #c93f2d; --gold: #d4a85b; --bone: #efe4cd; --jade: #6fa57c; --shadow: rgba(0,0,0,.55); --accent: var(--vermilion); --hud-bg: rgba(10,8,7,.78); --hud-line: rgba(212,168,91,.35); --glow: 0 0 0 rgba(0,0,0,0); --font-display: "ZCOOL XiaoWei", "Ma Shan Zheng", "STKaiti", "Kaiti SC", "Songti SC", "Noto Serif SC", serif; --font-ui: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif; } /* ---- THEME 1: 朱砂墨韵 (default) ---- */ [data-theme="ink"] { --bg: #0a0807; --ink: #11100e; --paper: #efe4cd; --vermilion: #c93f2d; --gold: #d4a85b; --bone: #efe4cd; --jade: #6fa57c; --hud-bg: rgba(10,8,7,.82); --hud-line: rgba(212,168,91,.35); --accent: var(--vermilion); --board-grad: radial-gradient(120% 90% at 50% 50%, #1a1612 0%, #0a0807 60%, #050403 100%); --board-grain: 0.08; --glow: 0 0 24px rgba(201,63,45,.5); } /* ---- THEME 2: 水墨剪纸 ---- */ [data-theme="paper"] { --bg: #ecdfbf; --ink: #1a1714; --paper: #f5ead0; --vermilion: #b3331f; --gold: #a07f3a; --bone: #1a1714; --jade: #557a5e; --hud-bg: rgba(245,234,208,.94); --hud-line: rgba(26,23,20,.30); --accent: var(--vermilion); --board-grad: radial-gradient(120% 90% at 50% 50%, #faf0d5 0%, #ecdfbf 60%, #d8c79e 100%); --board-grain: 0.18; --glow: 0 0 0 rgba(0,0,0,0); } /* ---- THEME 3: 赛博封神 ---- */ [data-theme="cyber"] { --bg: #06061a; --ink: #0b0a22; --paper: #e9f7ff; --vermilion: #ff2e8a; --gold: #ffd84a; --bone: #d4eaff; --jade: #00e0ff; --hud-bg: rgba(6,6,26,.85); --hud-line: rgba(255,46,138,.5); --accent: var(--vermilion); --board-grad: radial-gradient(120% 90% at 50% 50%, #161746 0%, #06061a 65%, #02020c 100%); --board-grain: 0.06; --glow: 0 0 22px rgba(255,46,138,.7), 0 0 38px rgba(0,224,255,.25); } /* ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--bone); font-family: var(--font-ui); height: 100%; overflow: hidden; -webkit-font-smoothing: antialiased; } body { overflow: hidden; } #app { position: fixed; inset: 0; background: var(--bg); } /* Stage: fixed 1280x800 scaled to fit */ #stage { position: absolute; width: 1280px; height: 800px; transform-origin: 0 0; background: var(--ink); overflow: hidden; box-shadow: 0 0 0 1px var(--hud-line), 0 30px 80px rgba(0,0,0,.6); } [data-theme="paper"] #stage { box-shadow: 0 0 0 1px var(--hud-line), 0 30px 80px rgba(120,80,30,.35); } /* Decorative frame */ #stage::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--hud-line); pointer-events: none; z-index: 50; } #stage::after { content: ""; position: absolute; inset: 14px; border: 1px solid var(--hud-line); opacity: .35; pointer-events: none; z-index: 50; } /* Screens — all stacked */ .screen { position: absolute; inset: 0; display: none; z-index: 10; } .screen.active { display: block; } /* ============================================================ TITLE SCREEN ============================================================ */ #screen-title { background: var(--board-grad); } .title-wrap { position: absolute; inset: 40px; display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding: 24px; } .title-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; gap: 20px; } .brand-mark { width: 96px; height: 96px; display: grid; place-items: center; background: var(--vermilion); color: var(--bone); font-family: var(--font-display); font-size: 64px; font-weight: 700; border-radius: 4px; position: relative; box-shadow: var(--glow); } .brand-mark::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.25); } .brand-name { font-family: var(--font-display); color: var(--bone); } .brand-name .zh { font-size: 56px; line-height: 1; letter-spacing: 18px; font-weight: 600; } .brand-name .en { font-size: 13px; letter-spacing: 6px; opacity: .65; margin-top: 8px; text-transform: uppercase; } .title-meta { text-align: right; color: var(--bone); opacity: .65; font-size: 12px; letter-spacing: 3px; } .title-meta .build { color: var(--gold); } /* Theme picker — 3 cards side by side */ .theme-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 12px; } .theme-card { position: relative; background: var(--ink); border: 1px solid var(--hud-line); padding: 20px; cursor: pointer; transition: transform .2s, border-color .2s; min-height: 320px; display: flex; flex-direction: column; overflow: hidden; } .theme-card:hover { transform: translateY(-3px); border-color: var(--accent); } .theme-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .theme-card-preview { flex: 1; border: 1px solid var(--hud-line); margin-bottom: 14px; position: relative; overflow: hidden; } .theme-card-preview canvas { width: 100%; height: 100%; display: block; } .theme-card .name { font-family: var(--font-display); font-size: 24px; letter-spacing: 8px; color: var(--bone); } .theme-card .desc { font-size: 11px; letter-spacing: 2px; opacity: .6; margin-top: 4px; } .theme-card .corner-mark { position: absolute; top: 12px; right: 12px; font-family: var(--font-display); color: var(--vermilion); font-size: 18px; } /* Theme picker — hidden (paper only) */ .theme-pick { display: none !important; } .theme-switch-mini { display: none !important; } /* Title hero (large group portrait) */ .title-hero { position: relative; border: 1px solid var(--hud-line); background: #f5ead0; overflow: hidden; flex: 1; min-height: 360px; display: flex; } .title-hero canvas { width: 100%; height: 100%; display: block; } .title-hero::before, .title-hero::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; background: repeating-linear-gradient(180deg, transparent 0 16px, rgba(26,23,20,.06) 16px 18px); pointer-events: none; } .title-hero::before { left: 0; border-right: 1px solid var(--hud-line); } .title-hero::after { right: 0; border-left: 1px solid var(--hud-line); } .title-hero-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 32px; background: linear-gradient(180deg, transparent, rgba(245,234,208,.95)); text-align: center; font-family: var(--font-display); letter-spacing: 8px; color: var(--ink); font-size: 14px; } /* ============================================================ PAPER THEME — concrete container overrides (--ink double-duty is ambiguous; here we treat containers as cream cards on the paper backdrop) ============================================================ */ [data-theme="paper"] #stage, [data-theme="paper"] .modal, [data-theme="paper"] .weapon-slot, [data-theme="paper"] .cs-portrait, [data-theme="paper"] .cs-card, [data-theme="paper"] .cs-info, [data-theme="paper"] .gl-cell { background: #faf0d5; } [data-theme="paper"] #game-canvas { background: #f5ead0; } [data-theme="paper"] .canvas-wrap { background: radial-gradient(120% 90% at 50% 50%, #faf0d5 0%, #e6d5a8 100%); } [data-theme="paper"] body { background: #ecdfbf; } [data-theme="paper"] .brand-mark { color: #faf0d5; } [data-theme="paper"] .brand-name .zh, [data-theme="paper"] .brand-name .en, [data-theme="paper"] .title-meta, [data-theme="paper"] .modal-title, [data-theme="paper"] .modal-sub, [data-theme="paper"] .cs-title, [data-theme="paper"] .cs-sub, [data-theme="paper"] .cs-info .name, [data-theme="paper"] .cs-card-name, [data-theme="paper"] .cs-card-tag, [data-theme="paper"] .levelup-card .name, [data-theme="paper"] .shop-card .name, [data-theme="paper"] .shop-card .desc, [data-theme="paper"] .gl-title, [data-theme="paper"] .gl-sub, [data-theme="paper"] .gl-cell, [data-theme="paper"] .hud-stat .v, [data-theme="paper"] .hud-top .hud-mid .wave-label, [data-theme="paper"] .hud-top .hud-mid .wave-no, [data-theme="paper"] .xp-label, [data-theme="paper"] .weapon-slot, [data-theme="paper"] .toast, [data-theme="paper"] .btn, [data-theme="paper"] .instructions { color: #1a1714; } [data-theme="paper"] .btn.primary { color: #faf0d5; } [data-theme="paper"] .hp-bar .text { text-shadow: 0 0 4px rgba(245,234,208,.8); } [data-theme="paper"] .gl-cell.owned { color: #faf0d5; } [data-theme="paper"] .toast { border-left-color: var(--vermilion); } [data-theme="paper"] .toast .head { color: var(--vermilion); } [data-theme="paper"] .shop-card .price .cost { color: var(--vermilion); font-weight: 700; } [data-theme="paper"] .shop-card .rarity.r1 { color: #6a5a3a; } [data-theme="paper"] .shop-card .rarity.r2 { color: #3d6149; } [data-theme="paper"] .shop-card .rarity.r3 { color: #2a5d8a; } [data-theme="paper"] .shop-card .rarity.r4 { color: #6c3f95; } [data-theme="paper"] .shop-card .rarity.r5 { color: #a07f3a; } [data-theme="paper"] .levelup-card .stamp { color: #faf0d5; } [data-theme="paper"] .cs-portrait .seal-bar { color: var(--vermilion); } /* Paper grain on stage background */ [data-theme="paper"] #stage::before { background: repeating-linear-gradient(45deg, transparent 0 9px, rgba(26,23,20,.025) 9px 10px); pointer-events: none; } /* ============================================================ PAPER THEME — text readability pass Boost contrast on faint-by-default text. ============================================================ */ [data-theme="paper"] .modal-sub, [data-theme="paper"] .cs-sub, [data-theme="paper"] .cs-card-tag, [data-theme="paper"] .gl-sub, [data-theme="paper"] .title-meta, [data-theme="paper"] .wave-label, [data-theme="paper"] .xp-label, [data-theme="paper"] .instructions { opacity: 1; color: rgba(26,23,20,.72); } /* Level-up cards: make glyph + name pop, desc fully legible */ [data-theme="paper"] .levelup-card { background: #faf0d5; border: 1px solid rgba(26,23,20,.45); } [data-theme="paper"] .levelup-card:hover { border-color: var(--vermilion); box-shadow: 0 0 0 1px var(--vermilion) inset, 0 8px 22px rgba(120,80,30,.18); } [data-theme="paper"] .levelup-card .glyph { color: var(--vermilion); text-shadow: none; } [data-theme="paper"] .levelup-card .name { color: #1a1714; } [data-theme="paper"] .levelup-card .desc { color: rgba(26,23,20,.82); opacity: 1; } [data-theme="paper"] .levelup-card .stamp { background: var(--vermilion); color: #faf0d5; } /* Shop cards */ [data-theme="paper"] .shop-card { background: #faf0d5; border: 1px solid rgba(26,23,20,.4); } [data-theme="paper"] .shop-card:hover { border-color: var(--vermilion); } [data-theme="paper"] .shop-card .glyph { color: var(--vermilion); } [data-theme="paper"] .shop-card .name { color: #1a1714; } [data-theme="paper"] .shop-card .desc { color: rgba(26,23,20,.82); opacity: 1; } [data-theme="paper"] .shop-card.locked { border-color: var(--vermilion); box-shadow: 0 0 0 2px var(--vermilion) inset; } [data-theme="paper"] .shop-card .lock-btn { border-color: rgba(26,23,20,.4); color: #1a1714; } [data-theme="paper"] .shop-card.locked .lock-btn { background: var(--vermilion); color: #faf0d5; border-color: var(--vermilion); } /* HUD pop */ [data-theme="paper"] .hud-top { background: rgba(245,234,208,.96); border-bottom: 2px solid rgba(26,23,20,.25); } [data-theme="paper"] .hud-bottom { background: rgba(245,234,208,.96); border-top: 2px solid rgba(26,23,20,.25); } [data-theme="paper"] .hud-stat .icon { background: var(--vermilion); color: #faf0d5; border-radius: 2px; width: 20px; height: 20px; } [data-theme="paper"] .hud-stat .v { color: #1a1714; font-weight: 700; } [data-theme="paper"] .hud-stat.qi .v { color: #3d6149; } [data-theme="paper"] .hud-stat.gold-stat .v { color: var(--vermilion); } [data-theme="paper"] .hud-top .hud-mid .wave-label { color: rgba(26,23,20,.6); } [data-theme="paper"] .hud-top .hud-mid .wave-no { color: #1a1714; } [data-theme="paper"] .hud-top .hud-mid .wave-no .accent { color: var(--vermilion); } [data-theme="paper"] .hp-bar { background: rgba(26,23,20,.12); border: 1px solid rgba(26,23,20,.4); } [data-theme="paper"] .hp-bar .text { color: #1a1714; font-weight: 700; text-shadow: 0 0 3px rgba(245,234,208,.9); } [data-theme="paper"] .xp-bar { background: rgba(26,23,20,.15); } [data-theme="paper"] .weapon-slot { background: rgba(26,23,20,.82); border: 1.5px solid rgba(26,23,20,.9); color: #f0e0c0; box-shadow: 0 2px 6px rgba(0,0,0,.35); } [data-theme="paper"] .weapon-slot .tier { color: #d4a85b; font-weight: 700; } /* Character select card */ [data-theme="paper"] .cs-card { border: 1px solid rgba(26,23,20,.35); } [data-theme="paper"] .cs-card.selected { border-color: var(--vermilion); box-shadow: 0 0 0 2px var(--vermilion) inset; } [data-theme="paper"] .cs-card-corner { background: var(--vermilion); color: #faf0d5; padding: 2px 6px; font-size: 11px; } [data-theme="paper"] .cs-card-name { color: #1a1714; } [data-theme="paper"] .cs-card-tag { color: var(--vermilion); opacity: 1; font-weight: 600; } [data-theme="paper"] .cs-info { border: 1px solid rgba(26,23,20,.35); } [data-theme="paper"] .cs-info .name { color: #1a1714; } [data-theme="paper"] .cs-info .epithet { color: rgba(26,23,20,.75); opacity: 1; } [data-theme="paper"] .cs-info .passive { background: rgba(179,51,31,.07); border-left: 3px solid var(--vermilion); color: #1a1714; } [data-theme="paper"] .cs-info .passive .head { color: var(--vermilion); } [data-theme="paper"] .cs-stats .stat { border-bottom-color: rgba(26,23,20,.2); color: #1a1714; } [data-theme="paper"] .cs-stats .stat .v { color: var(--vermilion); } /* Buttons */ [data-theme="paper"] .btn { background: #faf0d5; border: 1px solid rgba(26,23,20,.45); color: #1a1714; } [data-theme="paper"] .btn:hover { background: #f3e0b3; border-color: var(--vermilion); color: var(--vermilion); } [data-theme="paper"] .btn.primary { background: var(--vermilion); border-color: var(--vermilion); color: #faf0d5; } [data-theme="paper"] .btn.primary:hover { background: #8e1f0e; border-color: #8e1f0e; color: #faf0d5; } [data-theme="paper"] .btn .seal { background: #1a1714; color: #faf0d5; } [data-theme="paper"] .btn.primary .seal { background: #faf0d5; color: var(--vermilion); } /* Modal */ [data-theme="paper"] .modal { background: #faf0d5; border: 2px solid var(--vermilion); box-shadow: 0 0 0 1px rgba(26,23,20,.25) inset, 0 30px 80px rgba(120,80,30,.45); } [data-theme="paper"] .modal::after { border-color: rgba(26,23,20,.25); } [data-theme="paper"] .modal-veil { background: rgba(120,80,30,.55); } [data-theme="paper"] .modal-title { color: #1a1714; } [data-theme="paper"] .modal-header .meta .v { color: var(--vermilion); } /* Godlist */ [data-theme="paper"] .gl-cell { background: #faf0d5; border: 1px solid rgba(26,23,20,.25); color: rgba(26,23,20,.55); opacity: 1; } [data-theme="paper"] .gl-cell.owned { background: var(--vermilion); color: #faf0d5; border-color: var(--vermilion); opacity: 1; } [data-theme="paper"] .gl-progress .num { color: var(--vermilion); } [data-theme="paper"] .gl-bar { background: rgba(26,23,20,.15); } [data-theme="paper"] .gl-bar .fill { background: var(--vermilion); } /* Toast */ [data-theme="paper"] .toast { background: #faf0d5; border: 1px solid rgba(26,23,20,.35); border-left: 4px solid var(--vermilion); color: #1a1714; } /* Instructions overlay */ [data-theme="paper"] .instructions { background: rgba(245,234,208,.95); border: 1px solid rgba(26,23,20,.3); color: #1a1714; } [data-theme="paper"] .instructions kbd { background: #faf0d5; border-color: rgba(26,23,20,.4); color: var(--vermilion); } /* Brand */ [data-theme="paper"] .brand-mark { background: var(--vermilion); color: #faf0d5; } [data-theme="paper"] .brand-name .zh { color: #1a1714; } [data-theme="paper"] .brand-name .en { color: rgba(26,23,20,.6); } /* Wave banner — pop on paper */ [data-theme="paper"] .wave-banner { color: var(--vermilion); text-shadow: 0 0 24px rgba(245,234,208,.95), 2px 2px 0 rgba(245,234,208,.7); } [data-theme="paper"] .wave-banner .sub { color: #1a1714; text-shadow: 0 0 18px rgba(245,234,208,.95); } /* ============================================================ MOBILE / LANDSCAPE ============================================================ */ html, body { touch-action: pan-x pan-y; } button, .btn, .cs-card, .shop-card, .levelup-card, .theme-card, .gl-cell { -webkit-tap-highlight-color: transparent; user-select: none; } /* Portrait hint */ #portrait-hint { display: none; position: fixed; inset: 0; background: #ecdfbf; z-index: 9999; align-items: center; justify-content: center; } html.portrait-hint #portrait-hint { display: flex; } .ph-card { text-align: center; padding: 40px; border: 2px solid var(--vermilion); background: #faf0d5; max-width: 320px; } .ph-icon { font-size: 80px; color: var(--vermilion); animation: phRot 2.4s ease-in-out infinite; display: inline-block; transform-origin: center; } @keyframes phRot { 0%, 30% { transform: rotate(0deg); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(-90deg); } } .ph-title { font-family: var(--font-display); font-size: 26px; letter-spacing: 12px; margin-top: 16px; color: #1a1714; } .ph-sub { font-size: 12px; letter-spacing: 4px; color: rgba(26,23,20,.6); margin-top: 6px; } /* ============================================================ MOBILE SCALE — larger fonts & elements inside the 1280×800 stage (the stage is CSS-scaled down ~0.47× on a phone, so we scale up internal sizes ~1.8–2× to keep things readable) ============================================================ */ .is-mobile .hud-top { font-size: 28px; grid-template-columns: 380px 1fr 380px; padding: 0 32px; } .is-mobile .hud-top .hud-mid .wave-label { font-size: 22px; letter-spacing: 6px; } .is-mobile .hud-top .hud-mid .wave-no { font-size: 50px; letter-spacing: 4px; } .is-mobile .hud-stat { font-size: 26px; gap: 10px; } .is-mobile .hud-stat .icon { width: 32px; height: 32px; font-size: 26px; } .is-mobile .hp-bar { width: 230px; height: 24px; } .is-mobile .hp-bar .text { font-size: 18px; } .is-mobile .xp-bar { height: 8px; } .is-mobile .xp-label { font-size: 19px; letter-spacing: 2px; } .is-mobile .hud-bottom { padding: 14px 32px; } .is-mobile .weapon-slot { width: 84px; height: 84px; font-size: 40px; } .is-mobile .weapon-slot .tier { font-size: 18px; top: 4px; right: 6px; } /* Modal titles */ .is-mobile .modal-title { font-size: 40px; letter-spacing: 12px; } .is-mobile .modal-sub { font-size: 19px; letter-spacing: 4px; margin-bottom: 24px; } .is-mobile .modal-header .meta { font-size: 20px; } .is-mobile .modal-header .meta .v { font-size: 30px; } /* Level-up cards */ .is-mobile .levelup-grid { gap: 20px; } .is-mobile .levelup-card { padding: 24px; min-height: 300px; } .is-mobile .levelup-card .name { font-size: 32px; letter-spacing: 6px; } .is-mobile .levelup-card .glyph { font-size: 90px; } .is-mobile .levelup-card .desc { font-size: 20px; line-height: 1.7; letter-spacing: 1px; } .is-mobile .levelup-card .stamp { width: 50px; height: 50px; font-size: 22px; top: 14px; right: 14px; } /* Shop cards */ .is-mobile .shop-grid { gap: 18px; } .is-mobile .shop-card { padding: 18px; min-height: 280px; } .is-mobile .shop-card .name { font-size: 28px; letter-spacing: 4px; } .is-mobile .shop-card .glyph { font-size: 72px; } .is-mobile .shop-card .desc { font-size: 18px; line-height: 1.6; letter-spacing: 1px; } .is-mobile .shop-card .rarity { font-size: 19px; letter-spacing: 2px; } .is-mobile .shop-card .price { font-size: 22px; margin-top: 14px; } .is-mobile .shop-card .lock-btn { width: 34px; height: 34px; font-size: 18px; } /* Game-over modal */ .is-mobile .gameover-modal .epitaph { font-size: 80px; letter-spacing: 16px; } .is-mobile .gameover-modal .summary { font-size: 22px; letter-spacing: 3px; } .is-mobile .gameover-modal .registry { font-size: 30px; letter-spacing: 6px; } .is-mobile .gameover-modal .registry .pending { font-size: 20px; letter-spacing: 3px; } /* Toast notifications */ .is-mobile .toast { font-size: 20px; letter-spacing: 2px; padding: 12px 18px; } .is-mobile .toast .head { font-size: 20px; } /* Wave banner */ .is-mobile .wave-banner { font-size: 140px; } .is-mobile .wave-banner .sub { font-size: 26px; } /* Smaller viewports: hide non-critical chrome */ @media (max-width: 900px) and (orientation: landscape) { .instructions { display: none; } .title-meta { display: none; } } @media (max-height: 500px) { .title-hero { min-height: 200px; } } .title-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; background: transparent; border: 1px solid var(--hud-line); color: var(--bone); font-family: var(--font-display); font-size: 16px; letter-spacing: 6px; cursor: pointer; position: relative; transition: all .2s; } .btn:hover { border-color: var(--accent); color: var(--accent); } .btn.primary { background: var(--vermilion); border-color: var(--vermilion); color: var(--bone); padding-right: 32px; } .btn.primary:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); } .btn .seal { font-family: var(--font-display); font-size: 12px; padding: 2px 6px; background: var(--bone); color: var(--vermilion); } .btn.primary .seal { background: var(--ink); color: var(--gold); } .title-nav { display: flex; gap: 12px; } /* ============================================================ CHARACTER SELECT ============================================================ */ #screen-character { background: var(--board-grad); padding: 40px; } .cs-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 32px; height: 100%; } .cs-left { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; } .cs-title { font-family: var(--font-display); font-size: 22px; letter-spacing: 10px; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-sub { font-size: 11px; letter-spacing: 3px; opacity: .55; } .cs-portrait { flex: 1; min-height: 0; background: var(--ink); border: 1px solid var(--hud-line); position: relative; overflow: hidden; } .cs-portrait .seal-bar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 12px; letter-spacing: 4px; color: var(--vermilion); } .cs-info { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; background: var(--ink); border: 1px solid var(--hud-line); flex-shrink: 0; } .cs-info .name { font-family: var(--font-display); font-size: 18px; letter-spacing: 6px; color: var(--bone); } .cs-info .epithet { font-size: 11px; letter-spacing: 2px; opacity: .65; } .cs-info .passive { margin-top: 4px; padding: 6px 10px; background: rgba(212,168,91,.08); border-left: 2px solid var(--gold); font-size: 11px; line-height: 1.5; letter-spacing: 0.5px; } .cs-info .passive .head { color: var(--gold); letter-spacing: 3px; margin-right: 6px; } .cs-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; font-size: 11px; letter-spacing: 2px; } .cs-stats .stat { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--hud-line); padding: 2px 0; } .cs-stats .stat .v { color: var(--gold); font-weight: 600; } .cs-stats .stat.bad .v { color: var(--vermilion); } .cs-right { display: flex; flex-direction: column; gap: 14px; min-height: 0; } .cs-roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: 1; min-height: 0; overflow-y: auto; align-content: start; } .cs-card { background: var(--ink); border: 1px solid var(--hud-line); padding: 10px 14px; cursor: pointer; position: relative; transition: all .2s; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .cs-card:hover { transform: translateY(-2px); border-color: var(--accent); } .cs-card.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; } .cs-card .cs-card-glyph { height: 120px; display: grid; place-items: center; font-family: var(--font-display); font-size: 64px; color: var(--bone); opacity: .85; } .cs-card .cs-card-name { font-family: var(--font-display); font-size: 16px; letter-spacing: 4px; color: var(--bone); } .cs-card .cs-card-tag { font-size: 10px; letter-spacing: 2px; opacity: .55; margin-top: 2px; } .cs-card .cs-card-corner { position: absolute; top: 6px; right: 6px; font-family: var(--font-display); font-size: 12px; color: var(--vermilion); } .cs-card.selected .cs-card-corner { color: var(--gold); } .cs-actions { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } /* ============================================================ GAME HUD ============================================================ */ #screen-game { background: var(--bg); display: none; } #screen-game.active { display: grid; grid-template-rows: 60px 1fr 80px; } .hud-top { display: grid; grid-template-columns: 240px 1fr 240px; align-items: center; padding: 0 20px; background: var(--hud-bg); border-bottom: 1px solid var(--hud-line); font-family: var(--font-display); font-size: 14px; letter-spacing: 3px; z-index: 20; } .hud-top .hud-left { display: flex; align-items: center; gap: 16px; } .hud-top .hud-mid { text-align: center; } .hud-top .hud-mid .wave-label { font-size: 12px; letter-spacing: 8px; opacity: .55; } .hud-top .hud-mid .wave-no { font-family: var(--font-display); font-size: 24px; letter-spacing: 4px; color: var(--bone); } .hud-top .hud-mid .wave-no .accent { color: var(--vermilion); } .hud-top .hud-right { display: flex; gap: 16px; align-items: center; justify-content: flex-end; } .hud-stat { display: flex; align-items: center; gap: 6px; font-size: 14px; } .hud-stat .icon { width: 18px; height: 18px; display: grid; place-items: center; font-family: var(--font-display); font-size: 14px; color: var(--gold); } .hud-stat .v { color: var(--bone); font-weight: 600; } .hud-stat.qi .v { color: var(--jade); } .hud-stat.gold-stat .v { color: var(--gold); } .hp-pill { display: flex; align-items: center; gap: 8px; } .hp-bar { width: 140px; height: 14px; background: rgba(0,0,0,.4); border: 1px solid var(--hud-line); position: relative; } .hp-bar .fill { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(90deg, var(--vermilion), #e0573c); transition: width .2s ease-out; } .hp-bar .text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; letter-spacing: 1px; color: var(--bone); text-shadow: 0 0 4px rgba(0,0,0,.6); } .xp-bar { width: 100%; height: 4px; background: rgba(0,0,0,.4); position: relative; } .xp-bar .fill { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(90deg, var(--gold), #f0c878); transition: width .15s ease-out; } /* Game canvas wrap */ .canvas-wrap { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--board-grad); } #game-canvas { display: block; background: var(--ink); border: 1px solid var(--hud-line); cursor: crosshair; image-rendering: pixelated; box-shadow: var(--glow); touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; } /* Floating wave banner */ .wave-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-display); font-size: 96px; letter-spacing: 32px; color: var(--vermilion); text-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 40px rgba(201,63,45,.6); opacity: 0; pointer-events: none; z-index: 30; animation: bannerIn 2s ease forwards; } .wave-banner .sub { display: block; font-size: 18px; letter-spacing: 14px; color: var(--gold); margin-top: 16px; text-shadow: 0 0 12px rgba(212,168,91,.5); } @keyframes bannerIn { 0% { opacity: 0; letter-spacing: 80px; transform: translate(-50%, -50%) scale(1.2); } 20% { opacity: 1; letter-spacing: 32px; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.95); } } /* Damage flash */ .damage-flash { position: absolute; inset: 0; background: radial-gradient(transparent 40%, rgba(201,63,45,.5) 100%); pointer-events: none; opacity: 0; z-index: 25; } .damage-flash.show { animation: dmgFlash .35s ease-out; } @keyframes dmgFlash { 0%{opacity: 1;} 100%{opacity: 0;} } /* HUD bottom */ .hud-bottom { display: grid; grid-template-columns: 1fr 280px; gap: 16px; padding: 10px 20px; background: var(--hud-bg); border-top: 1px solid var(--hud-line); align-items: center; z-index: 20; } .weapon-row { display: flex; gap: 10px; } .weapon-slot { width: 56px; height: 56px; background: var(--ink); border: 1px solid var(--hud-line); display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; color: var(--bone); position: relative; overflow: hidden; } .weapon-slot.empty { opacity: .25; } .weapon-slot .cd { position: absolute; bottom: 0; left: 0; right: 0; background: var(--gold); height: 3px; transform-origin: left; transition: transform .05s linear; } .weapon-slot .tier { position: absolute; top: 2px; right: 4px; font-family: var(--font-display); font-size: 10px; color: var(--vermilion); } .xp-row { display: flex; flex-direction: column; gap: 4px; text-align: right; } .xp-label { font-size: 10px; letter-spacing: 3px; opacity: .55; font-family: var(--font-display); } /* ============================================================ SHOP / LEVEL UP modal ============================================================ */ .modal-veil { position: absolute; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; z-index: 40; backdrop-filter: blur(3px); } .modal-veil.show { display: flex; } .modal { width: min(960px, 92%); max-height: 86%; background: var(--ink); border: 1px solid var(--gold); padding: 24px; box-shadow: 0 0 0 1px var(--hud-line) inset, 0 30px 80px rgba(0,0,0,.6); position: relative; display: flex; flex-direction: column; } .modal::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--hud-line); pointer-events: none; } .modal-title { font-family: var(--font-display); font-size: 24px; letter-spacing: 14px; color: var(--bone); margin: 0; } .modal-sub { font-size: 11px; letter-spacing: 4px; opacity: .55; margin: 4px 0 18px; } .modal-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; } .modal-header .meta { text-align: right; font-size: 12px; letter-spacing: 3px; } .modal-header .meta .v { color: var(--gold); font-family: var(--font-display); font-size: 18px; } .shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .shop-card { background: var(--bg); border: 1px solid var(--hud-line); padding: 14px; display: flex; flex-direction: column; min-height: 220px; cursor: pointer; position: relative; transition: all .15s; } .shop-card:hover { transform: translateY(-2px); border-color: var(--accent); } .shop-card.locked { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; } .shop-card.sold { opacity: .35; pointer-events: none; } .shop-card.unaffordable { opacity: .65; } .shop-card .rarity { position: absolute; top: 8px; right: 8px; font-family: var(--font-display); font-size: 12px; letter-spacing: 2px; padding: 1px 6px; } .shop-card .rarity.r1 { color: var(--bone); } .shop-card .rarity.r2 { color: var(--jade); } .shop-card .rarity.r3 { color: #6da3d6; } .shop-card .rarity.r4 { color: #b78cd9; } .shop-card .rarity.r5 { color: var(--gold); } .shop-card .glyph { flex: 1; display: grid; place-items: center; font-family: var(--font-display); font-size: 46px; color: var(--bone); margin-bottom: 10px; } .shop-card .name { font-family: var(--font-display); font-size: 17px; letter-spacing: 4px; color: var(--bone); } .shop-card .desc { font-size: 11px; line-height: 1.5; letter-spacing: 1px; opacity: .75; margin-top: 4px; flex: 0 0 auto; min-height: 44px; } .shop-card .price { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-size: 14px; letter-spacing: 2px; } .shop-card .price .cost { color: var(--gold); } .shop-card .price .cost.cant { color: var(--vermilion); } .shop-card .lock-btn { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--hud-line); font-size: 11px; cursor: pointer; } .shop-card.locked .lock-btn { background: var(--gold); color: var(--ink); border-color: var(--gold); } .modal-footer { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; } .modal-footer .left { display: flex; gap: 10px; } /* Level-up modal (3 cards) */ .levelup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .levelup-card { background: var(--bg); border: 1px solid var(--hud-line); padding: 18px; min-height: 240px; display: flex; flex-direction: column; cursor: pointer; position: relative; transition: all .15s; } .levelup-card:hover { transform: translateY(-3px); border-color: var(--gold); } .levelup-card .stamp { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; background: var(--vermilion); color: var(--bone); font-family: var(--font-display); font-size: 14px; letter-spacing: 0; transform: rotate(8deg); } .levelup-card .name { font-family: var(--font-display); font-size: 20px; letter-spacing: 6px; } .levelup-card .glyph { flex: 1; display: grid; place-items: center; font-family: var(--font-display); font-size: 56px; color: var(--gold); } .levelup-card .desc { font-size: 12px; line-height: 1.6; opacity: .85; letter-spacing: 1px; } /* ============================================================ GAME OVER ============================================================ */ .gameover-modal { text-align: center; } .gameover-modal .epitaph { font-family: var(--font-display); font-size: 52px; letter-spacing: 20px; color: var(--vermilion); margin-bottom: 8px; } .gameover-modal .summary { font-size: 13px; letter-spacing: 3px; opacity: .75; margin-bottom: 24px; } .gameover-modal .registry { background: var(--bg); border: 1px solid var(--hud-line); padding: 20px; margin: 18px 0; font-family: var(--font-display); font-size: 18px; letter-spacing: 8px; color: var(--gold); } .gameover-modal .registry .pending { font-size: 11px; letter-spacing: 4px; color: var(--bone); opacity: .6; margin-top: 4px; } /* ============================================================ GODLIST ============================================================ */ #screen-godlist { background: var(--board-grad); padding: 40px; overflow-y: auto; overflow-x: hidden; } .gl-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; } .gl-title { font-family: var(--font-display); font-size: 36px; letter-spacing: 20px; color: var(--bone); } .gl-sub { font-size: 12px; letter-spacing: 4px; opacity: .6; margin-top: 6px; } .gl-progress { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); } .gl-progress .num { font-size: 36px; color: var(--gold); letter-spacing: 4px; } .gl-progress .denom { font-size: 16px; opacity: .6; } .gl-bar { width: 220px; height: 6px; background: rgba(0,0,0,.3); border: 1px solid var(--hud-line); position: relative; margin-top: 8px; } .gl-bar .fill { position: absolute; inset: 0; background: var(--gold); width: 0%; } .gl-grid { display: grid; grid-template-columns: repeat(15, 1fr); gap: 6px; } .gl-cell { aspect-ratio: 3/4; background: var(--ink); border: 1px solid var(--hud-line); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px; font-family: var(--font-display); font-size: 9px; letter-spacing: 0; text-align: center; color: var(--bone); opacity: .25; transition: all .2s; position: relative; overflow: hidden; line-height: 1.2; } .gl-cell.owned { opacity: 1; background: var(--vermilion); color: var(--bone); border-color: var(--gold); } .gl-cell.owned::after { content: "封"; position: absolute; top: 0; right: 1px; font-size: 7px; opacity: .7; } .gl-cell.just-added { animation: justAdded 1.8s ease-out; } @keyframes justAdded { 0% { transform: scale(1.5); box-shadow: 0 0 30px var(--vermilion); } 100% { transform: scale(1); box-shadow: none; } } /* ============================================================ TOAST ============================================================ */ .toast-stack { position: absolute; top: 80px; left: 20px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; z-index: 35; } .toast { background: var(--hud-bg); border: 1px solid var(--hud-line); border-left: 3px solid var(--gold); padding: 8px 14px; font-size: 12px; letter-spacing: 2px; color: var(--bone); animation: toastIn 4s ease-out forwards; } .toast .head { color: var(--gold); font-family: var(--font-display); margin-right: 8px; letter-spacing: 4px; } @keyframes toastIn { 0% { opacity: 0; transform: translateX(-20px); } 10%, 80% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } /* ============================================================ TWEAKS HOOK — minimal floating ============================================================ */ .theme-switch-mini { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; background: var(--hud-bg); border: 1px solid var(--hud-line); padding: 4px; z-index: 60; } .theme-switch-mini button { background: transparent; border: 1px solid var(--hud-line); color: var(--bone); padding: 4px 10px; font-family: var(--font-display); font-size: 11px; letter-spacing: 2px; cursor: pointer; } .theme-switch-mini button.on { background: var(--vermilion); border-color: var(--vermilion); } /* Instructions overlay */ .instructions { position: absolute; left: 16px; bottom: 100px; background: var(--hud-bg); border: 1px solid var(--hud-line); padding: 8px 12px; font-size: 11px; letter-spacing: 2px; z-index: 22; pointer-events: none; opacity: .65; } .instructions kbd { display: inline-block; padding: 1px 6px; background: var(--bg); border: 1px solid var(--hud-line); margin: 0 2px; font-family: var(--font-display); color: var(--gold); } /* ============================================================ LANGUAGE SWITCHER ============================================================ */ .lang-switch { display: flex; gap: 4px; } .lang-btn { background: transparent; border: 1px solid var(--hud-line); color: var(--bone); padding: 6px 14px; font-family: var(--font-display); font-size: 13px; letter-spacing: 2px; cursor: pointer; transition: all .2s; } .lang-btn:hover { border-color: var(--accent); color: var(--accent); } .lang-btn.active { background: var(--vermilion); border-color: var(--vermilion); color: #faf0d5; } [data-theme="paper"] .lang-btn { background: #faf0d5; border: 1px solid rgba(26,23,20,.45); color: #1a1714; } [data-theme="paper"] .lang-btn:hover { border-color: var(--vermilion); color: var(--vermilion); } [data-theme="paper"] .lang-btn.active { background: var(--vermilion); border-color: var(--vermilion); color: #faf0d5; } /* Pause modal */ .hud-pause-btn { width: 32px; height: 32px; background: transparent; border: 1px solid var(--hud-line); color: var(--bone); font-size: 16px; cursor: pointer; display: grid; place-items: center; opacity: .7; transition: opacity .15s, border-color .15s; -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .hud-pause-btn:hover, .hud-pause-btn:active { opacity: 1; border-color: var(--accent); } [data-theme="paper"] .hud-pause-btn { color: #1a1714; border-color: rgba(26,23,20,.3); } [data-theme="paper"] .hud-pause-btn:hover { border-color: var(--vermilion); color: var(--vermilion); } .is-mobile .hud-pause-btn { width: 48px; height: 48px; font-size: 24px; } .pause-modal { width: min(360px, 90%); text-align: center; } .pause-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; align-items: center; } .pause-actions .btn { width: 200px; justify-content: center; letter-spacing: 8px; }