:root {
    color-scheme: dark;
    --bg: #070d13;
    --panel: rgba(8, 19, 28, 0.94);
    --panel-light: rgba(20, 31, 38, 0.92);
    --line: rgba(225, 177, 91, 0.22);
    --text: #f3eee2;
    --muted: #a3a6a2;
    --cyan: #b9d6d9;
    --amber: #e7b35d;
    --danger: #ff6378;
    --green: #70d8ad;
    --blue: #6d9dff;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
    font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); overflow-x: hidden; }
img { display: block; max-width: 100%; }
button, input, select, textarea { min-width: 0; }
body.modal-open { overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
button:active:not(:disabled) { transform: translateY(1px); }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(120deg, rgba(3, 10, 16, 0.9), rgba(17, 12, 11, 0.72)), url("official/raven-event-keyart.jpg") center / cover;
    filter: saturate(0.9) brightness(0.6);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 70% 25%, rgba(225, 174, 85, 0.12), transparent 30%), linear-gradient(180deg, rgba(4, 12, 20, 0.08), rgba(4, 10, 16, 0.9));
}

.app-shell { width: min(1440px, 100%); margin: 0 auto; padding: 22px clamp(14px, 3vw, 42px) 18px; }
.topbar, .footer-bar, .section-heading, .card-heading, .selected-investment, .result-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar > *, .section-heading > *, .card-heading > *, .selected-investment > *, .result-panel > * { min-width: 0; }
.topbar { border-bottom: 1px solid rgba(225, 177, 91, 0.3); padding-bottom: 18px; }
.brand-kicker, .eyebrow, .stage-label { color: var(--cyan); font-size: 11px; letter-spacing: 0.12em; }
.brand-block h1 { margin: 6px 0 6px; font-size: clamp(22px, 4vw, 36px); letter-spacing: 0.04em; }
.simulation-badge, .mode-state { border: 1px solid rgba(231, 179, 93, 0.42); border-radius: 3px; color: var(--amber); font-size: 11px; padding: 5px 10px; background: rgba(63, 41, 19, 0.28); }
.top-actions { display: flex; align-items: center; gap: 12px; }
.sound-toggle { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.sound-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { width: 37px; height: 21px; border-radius: 999px; padding: 3px; background: #273a46; transition: background 160ms ease; }
.toggle-track span { display: block; width: 15px; height: 15px; border-radius: 50%; background: #91aab5; transition: transform 160ms ease, background 160ms ease; }
.sound-toggle input:checked + .toggle-track { background: #236f8c; }
.sound-toggle input:checked + .toggle-track span { transform: translateX(16px); background: white; }
.ghost-button, .text-button { border: 1px solid var(--line); background: rgba(9, 25, 37, 0.76); color: var(--muted); border-radius: 8px; padding: 9px 12px; transition: border-color 150ms ease, color 150ms ease, background 150ms ease, transform 150ms ease; }
.ghost-button:hover, .text-button:hover { border-color: rgba(107, 216, 255, 0.45); color: var(--text); background: rgba(21, 52, 67, 0.86); transform: translateY(-1px); }

.main-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.8fr); gap: 18px; padding-top: 18px; }
.play-card, .info-card { border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.play-card { padding: clamp(16px, 3vw, 28px); border-radius: 5px; }
.side-column { display: grid; align-content: start; gap: 14px; }
.info-card { border-radius: 4px; padding: 16px; }
.section-heading h2 { margin: 5px 0 0; font-size: 22px; }
.mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 14px; }
.mode-tab { min-height: 62px; border: 1px solid var(--line); border-radius: 3px; background: rgba(13, 26, 34, 0.82); color: var(--muted); text-align: left; padding: 12px; transition: 150ms ease; }
.mode-tab span, .mode-tab small { display: block; }
.mode-tab span { color: var(--text); font-weight: 700; }
.mode-tab small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.mode-tab:hover, .mode-tab.is-active { border-color: var(--amber); background: linear-gradient(135deg, rgba(91, 62, 29, 0.52), rgba(30, 54, 61, 0.72)); box-shadow: inset 0 -2px 0 var(--amber), 0 0 18px rgba(231, 179, 93, 0.1); }
.mode-tab.is-active small { color: #a7deef; }

.lantern-stage { position: relative; isolation: isolate; min-height: 560px; overflow: hidden; border: 1px solid rgba(231, 179, 93, 0.56); border-radius: 4px; background: #333b3d; box-shadow: inset 0 0 0 1px rgba(236, 198, 119, 0.12), inset 0 -90px 80px rgba(0, 0, 0, 0.3); }
.lantern-stage::before { content: ""; position: absolute; inset: 10px; z-index: 2; border: 1px solid rgba(231, 179, 93, 0.2); pointer-events: none; }
.scene-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; background-color: #313c3f; background-image: url("official/raven-lamp-scene-realistic.webp"); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; animation: scene-light-drift 12s ease-in-out infinite; }
.scene-backdrop::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(18, 28, 31, .11), rgba(25, 27, 25, .2)); mix-blend-mode: multiply; }
.scene-backdrop::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .045; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"); }
.lantern-stage[data-mode="ordinary"] .scene-backdrop { background-image: url("official/raven-lamp-scene-ordinary.webp"); filter: saturate(1.03) brightness(1.02) contrast(1.01); }
.lantern-stage[data-mode="classified"] .scene-backdrop { background-image: url("official/raven-lamp-scene-classified.webp"); filter: saturate(.86) brightness(.86) contrast(1.1) hue-rotate(5deg); }
.lantern-stage[data-mode="classified"] .scene-backdrop::before { background: linear-gradient(180deg, rgba(8, 28, 50, .28), rgba(2, 8, 18, .26)); mix-blend-mode: multiply; }
.lantern-stage[data-mode="top_secret"] { border-color: rgba(207, 67, 60, .72); box-shadow: inset 0 0 0 1px rgba(255, 74, 56, .2), inset 0 -90px 80px rgba(0, 0, 0, .58), 0 0 24px rgba(112, 11, 15, .34); }
.lantern-stage[data-mode="top_secret"] .scene-backdrop { background-image: url("official/raven-lamp-scene-top-secret.webp"); filter: saturate(.78) brightness(.68) contrast(1.24) hue-rotate(-5deg); }
.lantern-stage[data-mode="top_secret"] .scene-backdrop::before { background: radial-gradient(ellipse at 50% 36%, rgba(255, 63, 44, .18), transparent 29%), linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(37, 1, 4, .56)); mix-blend-mode: multiply; }
.lantern-stage[data-mode="top_secret"] .scene-backdrop::after { opacity: .085; }
.scene-sky, .scene-facade, .scene-container-stack, .scene-planter, .scene-palm, .scene-lamp-post, .scene-candle-stands, .scene-ground { display: none; }
.scene-sky { position: absolute; inset: 0 0 46%; background: radial-gradient(ellipse at 52% 3%, rgba(188, 207, 196, 0.28), transparent 42%), linear-gradient(180deg, rgba(25, 35, 37, 0.93), rgba(78, 89, 87, 0.4) 52%, rgba(28, 39, 41, 0.27)); }
.scene-facade { position: absolute; inset: 8% 0 45%; background: repeating-linear-gradient(180deg, rgba(210, 201, 178, 0.72) 0 4px, rgba(61, 67, 63, 0.74) 4px 7px, transparent 7px 54px), repeating-linear-gradient(90deg, transparent 0 76px, rgba(4, 13, 16, 0.34) 76px 82px), linear-gradient(90deg, rgba(28, 36, 38, 0.98) 0 7%, rgba(16, 25, 28, 0.78) 7% 8%, rgba(82, 91, 85, 0.73) 8% 92%, rgba(16, 25, 28, 0.78) 92% 93%, rgba(28, 36, 38, 0.98) 93%); opacity: 0.88; box-shadow: inset 0 12px 0 rgba(226, 217, 185, .16), inset 0 -20px 20px rgba(10, 17, 19, .28); }
.scene-container-stack { position: absolute; inset: 0; z-index: 1; }
.scene-container { position: absolute; display: block; overflow: hidden; border: 2px solid rgba(37, 43, 42, 0.82); box-shadow: inset 0 0 0 1px rgba(243, 217, 163, 0.2), inset 0 -14px 20px rgba(21, 25, 24, .25), 0 8px 14px rgba(0, 0, 0, 0.34); background-image: radial-gradient(ellipse at 18% 28%, rgba(246, 213, 156, .14) 0 5%, transparent 5.6%), radial-gradient(ellipse at 76% 68%, rgba(36, 25, 22, .22) 0 7%, transparent 7.8%), repeating-linear-gradient(90deg, rgba(21, 30, 31, 0.42) 0 2px, transparent 2px 14px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(241, 227, 192, .13) 31px 32px), linear-gradient(180deg, var(--container-light), var(--container-dark)); }
.scene-container::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(231, 223, 196, 0.28); background: linear-gradient(180deg, rgba(245, 228, 181, .08), transparent 38%, rgba(12, 18, 18, .16)), repeating-linear-gradient(90deg, transparent 0 14px, rgba(5, 15, 17, 0.2) 14px 17px); }
.scene-container::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; background: rgba(22, 29, 28, 0.5); box-shadow: 0 -2px rgba(244, 219, 159, 0.16), 0 2px rgba(9, 15, 16, 0.3); }
.scene-container-ivory { --container-light: #c8c1aa; --container-dark: #77786b; }
.scene-container-red { --container-light: #8e4c47; --container-dark: #4b292b; }
.scene-container-olive { --container-light: #858a68; --container-dark: #485241; }
.scene-container-top { left: 12%; top: 12%; width: 40%; height: 17%; }
.scene-container-upper { left: 12%; top: 28%; width: 41%; height: 19%; }
.scene-container-middle { left: 18%; top: 44%; width: 34%; height: 16%; }
.scene-container-lower-left { left: 3%; top: 59%; width: 51%; height: 17%; }
.scene-container-lower-right { left: 58%; top: 58%; width: 40%; height: 16%; }
.scene-container-ground-left { left: -7%; top: 75%; width: 50%; height: 18%; }
.scene-container-ground-right { left: 47%; top: 75%; width: 59%; height: 18%; }
.scene-planter { position: absolute; left: 5%; right: 26%; bottom: 16%; z-index: 2; height: 17%; border: 2px solid rgba(45, 51, 48, 0.78); border-radius: 18px 18px 7px 7px; background: repeating-linear-gradient(90deg, rgba(86, 67, 43, .1) 0 3px, transparent 3px 24px), linear-gradient(180deg, #817660 0 14%, #b59a72 15% 100%); box-shadow: inset 0 12px 0 rgba(45, 45, 37, 0.52), inset 0 -12px 16px rgba(71, 50, 31, .18), 0 10px 18px rgba(0, 0, 0, 0.32); }
.scene-planter::before { content: ""; position: absolute; left: 2%; right: 2%; top: -14px; height: 24px; border-radius: 50%; background: linear-gradient(180deg, #57604e, #313e36); box-shadow: 0 5px 8px rgba(0, 0, 0, 0.28); }
.scene-shrub { position: absolute; bottom: 9%; width: 36%; height: 63%; border-radius: 55% 45% 40% 40%; background: radial-gradient(circle at 13% 20%, #a0bd77 0 4%, transparent 4.8%), radial-gradient(circle at 34% 11%, #709963 0 6%, transparent 6.8%), radial-gradient(circle at 62% 17%, #94b66e 0 5%, transparent 5.8%), radial-gradient(circle at 83% 30%, #5d8b5d 0 7%, transparent 7.8%), radial-gradient(circle at 24% 48%, #4e7d57 0 9%, transparent 9.8%), radial-gradient(circle at 51% 50%, #7aa366 0 8%, transparent 8.8%), radial-gradient(circle at 76% 62%, #315c4c 0 10%, transparent 10.8%), radial-gradient(circle at 40% 78%, #5f8f5e 0 7%, transparent 7.8%), linear-gradient(145deg, #5d825e, #203d37); filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.38)); animation: shrub-sway 5.6s ease-in-out infinite; transform-origin: 50% 100%; }
.scene-shrub-left { left: 13%; }
.scene-shrub-right { left: 38%; transform: scale(0.82); transform-origin: bottom; }
.scene-palm { position: absolute; right: 16%; top: -7%; z-index: 3; width: 15%; height: 84%; transform: rotate(4deg); animation: palm-sway 7s ease-in-out infinite; transform-origin: 47% 96%; }
.scene-palm::before { content: ""; position: absolute; left: 34%; top: 0; width: 32%; height: 100%; border-radius: 48% 52% 20% 20%; background: repeating-linear-gradient(105deg, rgba(59, 42, 30, 0.5) 0 4px, transparent 4px 13px), repeating-linear-gradient(72deg, rgba(235, 203, 145, .13) 0 2px, transparent 2px 21px), linear-gradient(90deg, #56402f, #b69463 45%, #453328 78%); box-shadow: inset 4px 0 rgba(234, 207, 153, 0.15), inset -5px 0 rgba(20, 18, 15, 0.34), 5px 7px 10px rgba(0, 0, 0, .2); }
.palm-leaf { position: absolute; top: 4%; left: 37%; width: 120%; height: 9px; border-radius: 999px; transform-origin: left center; background: repeating-linear-gradient(90deg, rgba(19, 43, 30, .55) 0 5px, transparent 5px 18px), linear-gradient(90deg, #426b45, #a5ad66 55%, transparent); box-shadow: 0 5px 0 rgba(50, 76, 48, 0.85), 0 -6px 0 rgba(81, 108, 57, 0.62), 0 0 8px rgba(144, 167, 94, .16); }
.palm-leaf-one { transform: rotate(-54deg); }
.palm-leaf-two { transform: rotate(-22deg); }
.palm-leaf-three { transform: rotate(17deg); }
.palm-leaf-four { transform: rotate(44deg); }
.scene-lamp-post { position: absolute; inset: 11% 0 9%; z-index: 4; }
.lamp-column { position: absolute; left: calc(50% - 12px); top: 6%; bottom: 0; width: 24px; border: 2px solid rgba(17, 25, 26, 0.72); border-radius: 7px 7px 3px 3px; background: repeating-linear-gradient(0deg, rgba(205, 212, 194, .08) 0 3px, transparent 3px 26px), linear-gradient(90deg, #424c4d, #8e9690 44%, #343e3e 77%, #202a2b); box-shadow: inset 4px 0 rgba(220, 224, 205, 0.2), inset -4px 0 rgba(18, 22, 22, .25), 6px 8px 10px rgba(0, 0, 0, 0.32); }
.lamp-column::after { content: ""; position: absolute; left: -9px; bottom: -1px; width: 42px; height: 21px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #707875, #384141); box-shadow: 0 3px 0 rgba(21, 27, 27, 0.66); }
.lamp-crossbar { position: absolute; left: 27%; right: 22%; top: 15%; height: 13px; border: 2px solid #242d2d; border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(190, 199, 183, .1) 0 2px, transparent 2px 19px), linear-gradient(180deg, #56605e, #242e2d 72%); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.34), inset 0 1px rgba(221, 222, 192, .18); }
.lamp-crossbar::after { content: ""; position: absolute; left: 49%; top: 10px; width: 4px; height: 27px; border-radius: 4px; background: #262f2f; }
.lamp-head { position: absolute; top: 2%; width: 74px; height: 86px; border: 5px solid #242d2d; border-radius: 4px 4px 12px 12px; background: repeating-linear-gradient(90deg, rgba(216, 221, 199, .08) 0 2px, transparent 2px 15px), linear-gradient(90deg, #303a3a 0 18%, #77817b 42%, #202928 78%); clip-path: polygon(13% 0, 87% 0, 100% 90%, 85% 100%, 15% 100%, 0 90%); box-shadow: 0 8px 11px rgba(0, 0, 0, 0.4), inset 0 0 0 2px rgba(213, 216, 194, 0.18); }
.lamp-head::before { content: ""; position: absolute; left: -10px; top: -15px; width: 86px; height: 18px; border: 4px solid #242d2d; border-radius: 50% 50% 9px 9px; background: linear-gradient(180deg, #5d6863, #202929); }
.lamp-head::after { content: ""; position: absolute; inset: 10px 11px 9px; border: 1px solid rgba(214, 221, 199, 0.32); box-shadow: inset 17px 0 rgba(11, 18, 19, 0.22), inset -17px 0 rgba(11, 18, 19, 0.22); pointer-events: none; }
.lamp-head i { position: absolute; left: 15px; right: 15px; bottom: 9px; height: 42px; border-radius: 4px; background: linear-gradient(180deg, rgba(249, 220, 152, 0.58), rgba(230, 187, 101, 0.16)); box-shadow: inset 0 0 18px rgba(255, 229, 172, 0.5); animation: lamp-breathe 2.8s ease-in-out infinite; }
.lamp-head-left { left: 25%; transform: translateX(-50%) rotate(-2deg); }
.lamp-head-right { left: 70%; transform: translateX(-50%) rotate(2deg); }
.lamp-scroll { position: absolute; top: 20%; width: 68px; height: 50px; border-bottom: 3px solid #1b2525; border-radius: 0 0 70% 70%; opacity: 0.96; }
.lamp-scroll::before, .lamp-scroll::after { content: ""; position: absolute; width: 22px; height: 22px; border: 3px solid #1b2525; border-radius: 50%; }
.lamp-scroll::before { bottom: -11px; left: 4px; }
.lamp-scroll::after { bottom: -11px; right: 4px; }
.lamp-scroll-left { left: 29%; transform: rotate(10deg); }
.lamp-scroll-right { right: 20%; transform: scaleX(-1) rotate(10deg); }
.scene-candle-stands { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.scene-candle-stand { position: absolute; bottom: 14%; width: 13px; height: 98px; border-radius: 6px 6px 2px 2px; background: linear-gradient(90deg, #72501f, #e3bf68 45%, #8c6425); box-shadow: inset 2px 0 rgba(255, 235, 163, 0.34), 3px 4px 7px rgba(0, 0, 0, 0.34); }
.scene-candle-stand::before { content: ""; position: absolute; left: -5px; top: -9px; width: 21px; height: 13px; border-radius: 50%; background: linear-gradient(180deg, #ebcc7d, #896128); border: 1px solid rgba(249, 224, 144, 0.82); }
.scene-candle-stand::after { content: ""; position: absolute; left: -10px; bottom: -7px; width: 31px; height: 9px; border-radius: 50%; background: linear-gradient(180deg, #d9b966, #76501d); border: 1px solid rgba(255, 224, 136, 0.7); }
.scene-candle-stand-left { left: 28%; }
.scene-candle-stand-right { left: 72%; }
.scene-ground { position: absolute; inset: 82% 0 0; z-index: 3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='104' viewBox='0 0 180 104'%3E%3Cpath d='M0 26 45 0l45 26-45 26Z' fill='%23918470' stroke='%235c584f' stroke-width='2'/%3E%3Cpath d='M90 26 135 0l45 26-45 26Z' fill='%23867b69' stroke='%235c584f' stroke-width='2'/%3E%3Cpath d='m45 52 45-26 45 26-45 26Z' fill='%239c8e77' stroke='%235c584f' stroke-width='2'/%3E%3Cpath d='m135 52 45-26v52l-45 26Z' fill='%237a7060' stroke='%23524f49' stroke-width='2'/%3E%3Cpath d='M0 78 45 52l45 26-45 26Z' fill='%23827767' stroke='%23524f49' stroke-width='2'/%3E%3C/svg%3E"), linear-gradient(180deg, #9d907a, #5d5a4f); background-size: 180px 104px, auto; border-top: 3px solid rgba(45, 51, 47, 0.64); box-shadow: inset 0 14px 18px rgba(37, 39, 35, .16); }
.stage-grid { position: absolute; inset: 0; z-index: 5; opacity: 0.025; background-image: linear-gradient(rgba(214, 168, 86, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(214, 168, 86, 0.16) 1px, transparent 1px); background-size: 44px 44px; transform: perspective(520px) rotateX(63deg) scale(1.4); transform-origin: bottom; }
.stage-vignette { position: absolute; inset: 0; z-index: 5; background: linear-gradient(180deg, rgba(2, 9, 14, 0.12), transparent 46%, rgba(0, 0, 0, 0.34)), radial-gradient(circle at 50% 38%, transparent 16%, rgba(0, 0, 0, 0.22) 88%); pointer-events: none; }
.lantern-prop { position: absolute; left: 50%; top: 39%; width: 236px; height: 182px; transform: translateX(-50%); filter: drop-shadow(0 0 26px rgba(248, 181, 90, 0.52)); opacity: 0; pointer-events: none; }
.lamp-halo { position: absolute; inset: 0 9px 44px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 224, 155, 0.32), transparent 68%); animation: halo-pulse 2.6s ease-in-out infinite; }
.lamp-top { position: absolute; top: 30px; left: 57px; width: 122px; height: 82px; border: 4px solid #9e6b39; border-radius: 7px 7px 18px 18px; background: linear-gradient(90deg, rgba(113, 71, 33, 0.94), rgba(250, 202, 112, 0.86) 13%, rgba(74, 51, 33, 0.95) 44%, rgba(229, 153, 65, 0.86) 88%); box-shadow: inset 0 0 18px rgba(255, 231, 166, 0.8), 0 0 25px rgba(255, 190, 91, 0.22); }
.lamp-top::before { content: ""; position: absolute; left: 17px; top: -25px; width: 80px; height: 26px; border: 4px solid #9e6b39; border-bottom: 0; border-radius: 48% 48% 0 0; background: linear-gradient(135deg, #6c4428, #d39b4c 60%, #4b2e20); }
.lamp-top::after { content: ""; position: absolute; inset: 10px 18px 9px; border: 2px solid rgba(255, 224, 151, 0.58); box-shadow: inset 22px 0 0 rgba(30, 32, 28, 0.24), inset -22px 0 0 rgba(30, 32, 28, 0.24); }
.lamp-stem { position: absolute; left: 111px; top: 110px; width: 14px; height: 47px; background: linear-gradient(90deg, #5f3c27, #c58a47 45%, #3a281d); }
.lamp-base { position: absolute; bottom: 2px; left: 29px; width: 178px; height: 27px; border-radius: 4px; background: linear-gradient(180deg, #69442a, #2b1d16); border: 1px solid #ae733c; box-shadow: 0 4px 0 #a26635, inset 0 0 0 2px rgba(237, 185, 89, 0.18); }
.raven-figure { position: absolute; top: 14%; left: 50%; width: 94px; height: 62px; transform: translateX(-50%) scale(0.72); z-index: 3; opacity: 0; pointer-events: none; animation: raven-idle 2.8s ease-in-out infinite; }
.raven-body { position: absolute; left: 37px; top: 21px; width: 50px; height: 48px; border-radius: 55% 45% 45% 50%; background: linear-gradient(135deg, #1a2733, #02060a); box-shadow: 14px 10px 0 -6px rgba(1, 4, 7, 0.9); }
.raven-eye { position: absolute; left: 70px; top: 27px; width: 5px; height: 5px; border-radius: 50%; z-index: 4; background: #f6b55b; box-shadow: 0 0 12px #ffbf62; }
.raven-wing { position: absolute; top: 14px; width: 66px; height: 50px; border-radius: 70% 25% 70% 25%; background: linear-gradient(145deg, #253c4b, #060a0e 68%); transform-origin: 65% 70%; }
.raven-wing-left { left: 2px; transform: rotate(24deg); }
.raven-wing-right { right: 2px; transform: scaleX(-1) rotate(24deg); }
.raven-statue { position: absolute; top: 1%; left: 43.5%; z-index: 6; width: 58px; height: auto; object-fit: contain; transform: translateX(-50%); transform-origin: 50% 100%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.56)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.2)) saturate(1.08) contrast(1.06); }
.raven-shape, .raven-wing-shape, .raven-tail-shape { fill: #101518; stroke: #050708; stroke-width: 2; }
.raven-wing-shape { fill: #1b2527; }
.raven-tail-shape { fill: #0c1113; }
.raven-beak { fill: #262d2d; stroke: #070909; stroke-width: 2; }
.raven-statue-eye { fill: #f0b75c; filter: drop-shadow(0 0 4px #f0b75c); }
.raven-legs { fill: none; stroke: #14191a; stroke-width: 3; stroke-linecap: round; }
.stage-offering { position: absolute; left: 50%; bottom: 11.5%; z-index: 8; width: 52px; height: 52px; max-width: 52px; max-height: 52px; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; opacity: 0; pointer-events: none; transform: translate(-50%, 8px) scale(.82); filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .58)); }
.stage-offering img { display: block; min-width: 0; min-height: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; border-radius: 9px; background: rgba(6, 15, 20, .7); border: 1px solid rgba(255, 224, 143, .45); }
.stage-offering.is-ground { animation: ground-offering-in 140ms ease-out forwards; }
.stage-offering.is-ground.is-output img { border-color: rgba(112, 216, 173, .78); box-shadow: 0 0 18px rgba(112, 216, 173, .26); }
.stage-offering.is-fading { animation: ground-offering-out 150ms ease-in forwards; }
.fireworks-overlay { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.fireworks-overlay[hidden] { display: none !important; }
.fireworks-video { position: absolute; inset: -2%; width: 104%; height: 104%; max-width: none; object-fit: cover; object-position: center; opacity: 0; mix-blend-mode: screen; filter: saturate(1.08) contrast(1.04); transform: scale(.96); }
.fireworks-video.is-playing { animation: confetti-video-in 3500ms cubic-bezier(.16,.72,.24,1) both; }
.fireworks-overlay.is-boosted .fireworks-video { filter: saturate(1.22) brightness(1.08) contrast(1.06); }
.firework-burst { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; transform: translate(-50%, -50%); }
.firework-core { position: absolute; inset: 0; display: block; border-radius: 50%; background: #fff7d1; box-shadow: 0 0 8px 3px #ffd166, 0 0 22px 8px rgba(255, 167, 69, .72); animation: firework-core 720ms ease-out both; }
.firework-particle { position: absolute; left: 3px; top: 3px; display: block; width: 3px; height: 13px; border-radius: 99px; background: var(--color); box-shadow: 0 0 7px 2px var(--color); opacity: 0; transform-origin: 50% 100%; animation: firework-spark 900ms cubic-bezier(.15,.72,.26,1) var(--delay) both; }
.fireworks-overlay.is-boosted .firework-particle { width: 4px; height: 16px; box-shadow: 0 0 9px 3px var(--color); }
.fireworks-overlay.is-boosted .firework-core { box-shadow: 0 0 10px 4px #fff2ad, 0 0 30px 11px rgba(255, 172, 66, .9); }
.lantern-stage[data-state="submitting"] .raven-wing { animation: wing-flap 450ms ease-in-out infinite alternate; }
.lantern-stage[data-state="submitting"] .raven-figure { opacity: 0; }
.lantern-stage.is-closed .raven-statue { animation: raven-fade-out 520ms ease-out forwards; }
.lantern-stage.is-success::after, .lantern-stage.is-submitting::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 50% 58%, rgba(255, 198, 94, 0.22), transparent 28%); animation: halo-pulse 1.8s ease-in-out infinite; }
.lantern-stage.is-success .lamp-halo { filter: brightness(1.45); }
.lantern-stage.is-downgrade { animation: stage-shake 360ms ease-out; }
.lantern-stage.is-closed .raven-figure { opacity: 0.28; filter: grayscale(0.7); }
.lantern-stage.is-closed .candle { filter: grayscale(.85) brightness(.62); }
.lantern-stage.is-closed .candle i { animation: candle-extinguish 520ms ease-out forwards; }
.lantern-stage.is-closed .scene-candle-stand { filter: grayscale(.75) brightness(.52); opacity: .46; }
.stage-readout { position: absolute; left: 24px; top: 20px; bottom: auto; display: grid; gap: 4px; z-index: 4; padding: 9px 12px; border-left: 2px solid var(--amber); background: rgba(4, 11, 17, 0.64); }
.stage-readout strong { font-size: 17px; }
.stage-readout span:last-child { color: var(--muted); font-size: 12px; }
.stage-toast { position: absolute; top: 18px; left: 50%; z-index: 5; transform: translateX(-50%); color: var(--amber); font-weight: 700; opacity: 0; white-space: nowrap; }
.stage-toast.is-visible { animation: toast-in 1.4s ease forwards; }
.stage-readout[hidden], .stage-toast[hidden], .result-panel[hidden], .round-reset[hidden], .mode-info-card[hidden], .rules-card[hidden] { display: none !important; }
.round-reset { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(2, 8, 13, .2); backdrop-filter: blur(1.5px); }
.round-reset-button { min-width: 138px; min-height: 48px; border: 1px solid rgba(255, 211, 139, .9); border-radius: 8px; color: #20160b; background: linear-gradient(135deg, #ffd38b, #d8842e); font-weight: 800; box-shadow: 0 10px 26px rgba(0, 0, 0, .42), 0 0 24px rgba(242, 169, 75, .24); }
.round-reset-button:hover, .round-reset-button:focus-visible { transform: translateY(-1px); filter: brightness(1.08); outline: none; }
.candle-row { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.candle { position: absolute; bottom: 58px; left: 24%; width: 31px; height: 44px; border: 0; border-radius: 0; background: transparent url("official/candle-short.png") center / contain no-repeat; box-shadow: none; pointer-events: none; filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .32)); }
.candle:nth-child(1) { left: calc(17% - 14px); bottom: 73px; width: 28px; height: 46px; background-image: url("official/candle-short-clean.png"); z-index: 5; }
.candle:nth-child(2) { left: calc(25% - 18px); width: 36px; height: 143px; background-image: url("official/candle-tall.png"); z-index: 2; }
.candle:nth-child(3) { left: 10%; width: 74px; height: 48px; bottom: 38px; background-image: url("official/candle-ground.png"); z-index: 4; }
.candle:nth-child(4) { right: calc(17% - 14px); left: auto; bottom: 73px; width: 28px; height: 46px; background-image: url("official/candle-short-clean.png"); z-index: 5; }
.candle:nth-child(5) { right: calc(25% - 18px); left: auto; width: 36px; height: 143px; background-image: url("official/candle-tall.png"); z-index: 2; }
.candle:nth-child(6) { right: 10%; left: auto; width: 74px; height: 48px; bottom: 38px; background-image: url("official/candle-ground.png"); z-index: 4; }
.candle-stub { width: 12px; height: 17px; bottom: 22px; background-image: url("official/candle-short.png"); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); z-index: 5; }
.candle-stub-left { left: 8%; }
.candle-stub-right { right: 8%; left: auto; }
.candle-stub + .candle-stub { margin-left: 0; }
.candle::after, .candle::before { display: none; }
.candle i { position: absolute; left: 50%; top: -12px; width: 11px; height: 18px; transform: translateX(-50%) scale(0); transform-origin: 50% 100%; border-radius: 55% 55% 45% 45%; background: radial-gradient(circle at 50% 72%, #fff4b1 0 20%, #ffbd63 42%, #f07832 70%, transparent 72%); box-shadow: 0 0 18px 6px rgba(255, 173, 74, 0.72); transition: transform 180ms ease; }
.candle:nth-child(1) i, .candle:nth-child(4) i { top: -10px; }
.candle:nth-child(2) i, .candle:nth-child(5) i { top: -17px; }
.candle:nth-child(3) i, .candle:nth-child(6) i { top: -10px; }
.candle:nth-child(3) .flame-ground, .candle:nth-child(6) .flame-ground { width: 8px; height: 14px; box-shadow: 0 0 12px 3px rgba(255, 173, 74, 0.66); }
.candle:nth-child(3) .flame-ground-left, .candle:nth-child(6) .flame-ground-left { left: 27.9%; top: 6px; }
.candle:nth-child(3) .flame-ground-center, .candle:nth-child(6) .flame-ground-center { left: 55.5%; top: -10px; }
.candle:nth-child(3) .flame-ground-right, .candle:nth-child(6) .flame-ground-right { left: 80.4%; top: 15px; }
.candle:nth-child(3) .flame-ground-left { animation-delay: -.12s; }
.candle:nth-child(3) .flame-ground-center { animation-delay: -.46s; }
.candle:nth-child(3) .flame-ground-right { animation-delay: -.78s; }
.candle:nth-child(6) .flame-ground-left { animation-delay: -.34s; }
.candle:nth-child(6) .flame-ground-center { animation-delay: -.66s; }
.candle:nth-child(6) .flame-ground-right { animation-delay: -.9s; }
.candle-stub i { top: -8px; width: 8px; height: 11px; }
.candle.is-lit i { transform: translateX(-50%) scale(1); animation: flame-flicker 1.05s ease-in-out infinite; }
.candle:nth-child(1) i { animation-delay: -.18s; }
.candle:nth-child(2) i { animation-delay: -.48s; }
.candle:nth-child(4) i { animation-delay: -.64s; }
.candle:nth-child(5) i { animation-delay: -.32s; }
.candle.is-lit { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .36)); }

.selected-investment { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(11, 27, 39, 0.82); }
.selected-investment:not(.has-selection) { justify-content: center; min-height: 82px; }
.selected-investment:not(.has-selection) .selected-copy, .selected-investment:not(.has-selection) .selected-icon-wrap { display: none; }
.selected-copy { display: grid; gap: 4px; min-width: 0; }
.selected-copy strong { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.selected-copy span:last-child { color: var(--muted); font-size: 12px; }
.selected-icon-wrap { width: 56px; height: 56px; flex: 0 0 56px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: #172732; }
.selected-icon-wrap img { width: 100%; height: 100%; object-fit: contain; }
.selected-icon-placeholder { color: var(--muted); font-size: 24px; }
.submit-button { width: 108px; min-height: 48px; min-width: 108px; flex: 0 0 108px; border: 1px solid #e7ab58; border-radius: 8px; color: #20160b; background: linear-gradient(135deg, #ffd38b, #d8842e); font-weight: 800; box-shadow: 0 0 20px rgba(242, 169, 75, 0.2); transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.submit-button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(242, 169, 75, 0.28); }
.submit-button small { display: block; margin-top: 4px; font-size: 9px; letter-spacing: 0.18em; opacity: 0.7; }
.submit-button:disabled { cursor: not-allowed; filter: grayscale(0.7); opacity: 0.45; box-shadow: none; }
.result-panel { margin-top: 14px; min-height: 76px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 21, 31, 0.72); padding: 14px; }
.result-mark { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--cyan); font-size: 20px; }
.result-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.result-copy strong { font-size: 14px; }
.result-copy span:last-child { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.result-item { display: grid; grid-template-rows: 56px auto; flex: 0 0 76px; gap: 3px; width: 76px; min-width: 76px; height: 76px; padding: 4px; place-items: center; overflow: hidden; border: 1px solid rgba(159, 193, 211, .16); border-radius: 8px; background: rgba(5, 16, 24, .62); }
.result-item img { width: 100%; height: 56px; max-width: none; max-height: none; object-fit: contain; object-position: center; }
.result-item span { display: block; width: 100%; min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.result-panel[data-result="upgrade"] { border-color: rgba(112, 216, 173, 0.55); }
.result-panel[data-result="downgrade"] { border-color: rgba(243, 184, 94, 0.55); }
.result-panel[data-result="stolen"] { border-color: rgba(255, 99, 120, 0.6); }
.result-panel[data-result="upgrade"] .result-mark { color: var(--green); }
.result-panel[data-result="downgrade"] .result-mark { color: var(--amber); }
.result-panel[data-result="stolen"] .result-mark { color: var(--danger); }

.backpack-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 12px; }
.backpack-modal[hidden] { display: none; }
.backpack-backdrop { position: absolute; inset: 0; background: rgba(2, 8, 13, 0.78); backdrop-filter: blur(5px); }
.backpack-dialog { position: relative; width: min(980px, 100%); max-height: min(840px, calc(100vh - 24px)); overflow: hidden; border: 1px solid rgba(177, 191, 196, 0.48); border-radius: 3px; background: linear-gradient(180deg, rgba(28, 34, 37, 0.99), rgba(15, 20, 22, 0.99)); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.72), 0 0 28px rgba(137, 165, 174, 0.12); }
.backpack-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px 8px; border-bottom: 1px solid rgba(177, 191, 196, 0.18); }
.backpack-heading h3 { margin: 4px 0 0; font-size: 19px; }
.backpack-close { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; color: var(--muted); background: rgba(9, 25, 37, 0.76); }
.backpack-close:hover, .backpack-close:focus-visible { border-color: var(--amber); color: var(--text); outline: none; }
.backpack-summary { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; color: var(--muted); font-size: 11px; }
.backpack-summary span:last-child { color: var(--amber); }
.backpack-hint { display: none; }
.inventory-filters { display: flex; gap: 2px; padding: 0 14px 8px; }
.inventory-filters button { border: 1px solid rgba(177, 191, 196, 0.28); border-radius: 2px; padding: 4px 10px; color: var(--muted); background: rgba(10, 16, 18, 0.76); font-size: 10px; }
.inventory-filters button:hover, .inventory-filters button.is-active { border-color: var(--amber); color: var(--text); background: rgba(91, 62, 29, 0.48); }
.backpack-dialog .inventory-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 1px; max-height: min(720px, calc(100vh - 136px)); overflow: auto; margin: 0; padding: 8px; background: #14191b; border-top: 1px solid rgba(177, 191, 196, 0.18); }
.backpack-dialog .item-card { position: relative; display: block; min-width: 0; min-height: 82px; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; border: 1px solid rgba(177, 191, 196, 0.32); border-radius: 0; background: linear-gradient(145deg, rgba(58, 57, 52, 0.96), rgba(38, 39, 37, 0.96)); box-shadow: none; text-align: left; transform: none; }
.backpack-dialog .item-card:hover, .backpack-dialog .item-card.is-selected { z-index: 1; border-color: var(--cyan); background: linear-gradient(145deg, rgba(55, 79, 84, 0.98), rgba(28, 45, 49, 0.98)); transform: none; }
.backpack-dialog .item-card img { position: absolute; inset: 0; display: block; min-width: 0; min-height: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: 100%; max-height: 100%; padding: 6px; object-fit: contain; object-position: center; border-radius: 0; background: transparent; }
.backpack-dialog .item-card strong { position: absolute; inset: 3px 3px auto 4px; z-index: 2; display: block; min-width: 0; max-height: 1.25em; overflow: hidden; margin: 0; color: rgba(235, 239, 238, 0.78); font-size: 10px; font-weight: 500; line-height: 1.25; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95); white-space: nowrap; }
.backpack-dialog .item-card small { display: none; }
.item-quantity { position: absolute; right: 4px; bottom: 4px; z-index: 3; min-width: 18px; box-sizing: border-box; padding: 2px 4px; border: 1px solid rgba(255, 224, 143, 0.42); border-radius: 3px; color: #fff5d7; background: rgba(7, 12, 15, 0.82); font-size: 10px; font-weight: 800; line-height: 1; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); pointer-events: none; }

.rules-card { min-width: 0; }
.rules-card > .card-heading > span:last-child { color: var(--amber); font-size: 11px; }
.rules-list { display: grid; gap: 8px; margin: 13px 0 12px; padding: 0; list-style: none; }
.rules-list li { display: grid; gap: 3px; padding: 8px 9px; border-left: 2px solid rgba(231, 179, 93, 0.62); background: rgba(8, 20, 29, 0.48); }
.rules-list strong { color: var(--text); font-size: 11px; }
.rules-list span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.rules-details { border-top: 1px solid rgba(159, 193, 211, 0.12); padding: 9px 0 0; }
.rules-details + .rules-details { margin-top: 8px; }
.rules-details summary { cursor: pointer; color: var(--cyan); font-size: 11px; }
.rules-details p { margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.mode-info-card h3 { margin: 8px 0 4px; font-size: 20px; }
.mode-info-card p { margin: 0; color: var(--muted); font-size: 13px; }
.mode-note { margin-top: 12px; border-left: 2px solid var(--amber); padding-left: 10px; color: #c7a77a; font-size: 11px; line-height: 1.5; }
.mode-pip { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px currentColor; }
.odds-card .card-heading > span:last-child { color: var(--muted); font-size: 11px; }
.odds-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 10px; }
.odds-cell { padding: 8px 5px; border: 1px solid var(--line); border-radius: 7px; text-align: center; background: rgba(4, 16, 25, 0.62); }
.odds-cell strong { display: block; font-size: 15px; }
.odds-cell small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.odds-cell.is-current { border-color: var(--cyan); background: rgba(42, 101, 125, 0.33); }
.odds-cell.steal strong { color: var(--danger); }.odds-cell.upgrade strong { color: var(--green); }.odds-cell.same strong { color: var(--cyan); }.odds-cell.downgrade strong { color: var(--amber); }
.odds-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; color: var(--muted); font-size: 10px; }
.multiplier-note { min-height: 18px; margin: 9px 0 0; color: var(--amber); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-word; }
.multiplier-card .multiplier-note { margin: 0; }
.legend-dot { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; }.dot-steal { background: var(--danger); }.dot-up { background: var(--green); }.dot-same { background: var(--cyan); }.dot-down { background: var(--amber); }
.inventory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.inventory-empty { grid-column: 1 / -1; padding: 24px 8px; border: 1px dashed rgba(231, 179, 93, 0.35); color: var(--muted); font-size: 12px; text-align: center; background: rgba(8, 20, 29, 0.46); }
.item-card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 7px; padding: 5px; background: rgba(8, 20, 29, 0.75); text-align: left; transition: 150ms ease; }
.item-card:hover, .item-card.is-selected { border-color: var(--cyan); transform: translateY(-2px); background: rgba(28, 67, 83, 0.58); }
.item-card img { display: block; width: 100%; max-width: 100%; aspect-ratio: 1; box-sizing: border-box; padding: 5px; object-fit: contain; object-position: center; border-radius: 4px; background: #1a2a32; }
.item-card strong { display: block; overflow: hidden; margin-top: 5px; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.item-card small { display: block; color: var(--muted); font-size: 9px; }
.grade-4 { box-shadow: inset 0 0 0 1px rgba(181, 117, 255, 0.4); }.grade-5 { box-shadow: inset 0 0 0 1px rgba(255, 193, 77, 0.5); }.grade-6 { box-shadow: inset 0 0 0 1px rgba(255, 88, 105, 0.6); }
.history-list { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; max-height: 190px; overflow: auto; }
.history-empty { color: var(--muted); font-size: 12px; }
.history-entry { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; padding: 7px 0; border-top: 1px solid rgba(159, 193, 211, 0.09); font-size: 10px; }
.history-entry img { width: 28px; height: 28px; object-fit: contain; }
.history-entry strong, .history-entry span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.history-entry span { color: var(--muted); margin-top: 2px; }.history-entry time { color: var(--muted); font-size: 9px; }
.footer-bar { padding: 16px 2px 0; color: #64808b; font-size: 10px; }

/* 前台三页导航与账户页 */
.app-pages { min-height: 0; padding-bottom: 76px; }
.app-page { min-width: 0; }
.app-page[hidden] { display: none !important; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 20px 2px 18px; border-bottom: 1px solid rgba(225, 177, 91, .2); }
.page-heading h2 { margin: 6px 0 4px; font-size: clamp(28px, 4vw, 42px); letter-spacing: .04em; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.balance-chip { display: grid; gap: 4px; min-width: 148px; padding: 12px 16px; border: 1px solid rgba(231, 179, 93, .42); border-radius: 8px; background: linear-gradient(135deg, rgba(81, 53, 24, .54), rgba(15, 34, 44, .72)); text-align: right; }
.balance-chip span { color: var(--muted); font-size: 10px; }
.balance-chip strong { color: var(--amber); font-size: 20px; }
.market-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 6px; }
.market-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.market-filters button { border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; color: var(--muted); background: rgba(8, 20, 29, .72); font-size: 12px; }
.market-filters button:hover, .market-filters button.is-active { border-color: var(--amber); color: var(--text); background: rgba(91, 62, 29, .5); }
.market-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 12px; }
.market-hint { color: var(--muted); font-size: 11px; }
.market-card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; gap: 11px; align-items: start; min-width: 0; min-height: 164px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(10, 27, 39, .94), rgba(7, 16, 25, .9)); box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.market-card-image { display: grid; place-items: center; width: 96px; height: 96px; box-sizing: border-box; padding: 7px; border-radius: 8px; background: #172b35; border: 1px solid rgba(225,177,91,.24); overflow: hidden; }
.market-card-image img { display: block; min-width: 0; min-height: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: 100%; max-height: 100%; padding: 8px; object-fit: contain; object-position: center; }
.market-card-copy { min-width: 0; display: grid; align-content: start; gap: 3px; }
.market-card-copy > span, .market-card-copy small { color: var(--muted); font-size: 10px; }
.market-card-copy strong { display: -webkit-box; min-width: 0; min-height: 2.7em; overflow: hidden; margin-top: 3px; color: var(--text); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.market-card-copy b { min-width: 0; overflow: hidden; margin-top: 5px; color: var(--amber); font-size: 15px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.market-card-copy em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 400; }
.market-quantity { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; color: var(--muted); font-size: 11px; }
.market-quantity select { min-width: 86px; padding: 7px 9px; border: 1px solid rgba(159,193,211,.25); border-radius: 6px; color: var(--text); background: rgba(5,16,24,.88); outline: none; }
.market-quantity select:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(109,157,255,.14); }
.market-buy { grid-column: 1 / -1; width: 100%; align-self: end; }
.primary-small, .primary-button { border: 1px solid #e7ab58; border-radius: 7px; color: #20160b; background: linear-gradient(135deg, #ffd38b, #d8842e); font-weight: 800; }
.primary-small { padding: 8px 13px; font-size: 11px; }
.primary-small:hover, .primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.auth-gate { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 18px; padding: 20px; border: 1px solid rgba(231,179,93,.3); border-radius: 10px; background: linear-gradient(135deg, rgba(29, 43, 45, .86), rgba(8, 20, 29, .9)); }
.auth-gate strong, .auth-gate span { display: block; }
.auth-gate strong { font-size: 15px; }
.auth-gate span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.profile-gate-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--amber); border-radius: 50%; color: var(--amber); font-size: 23px; }
.profile-panel { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8, 19, 28, .92); box-shadow: var(--shadow); overflow: hidden; }
.profile-hero { display: flex; align-items: center; gap: 14px; padding: 18px; border-bottom: 1px solid rgba(225,177,91,.15); }
.avatar-button { position: relative; width: 72px; height: 72px; padding: 0; border: 2px solid var(--amber); border-radius: 50%; background: #162b35; overflow: hidden; }
.avatar-button img { width: 100%; height: 100%; display: block; }
.avatar-button span { position: absolute; inset: auto 0 0; padding: 3px 0; color: #20160b; background: rgba(255,211,139,.9); font-size: 9px; }
.profile-identity { display: grid; gap: 4px; flex: 1; min-width: 0; }
.profile-identity strong { font-size: 19px; }
.profile-identity span { color: var(--cyan); font-size: 12px; }
.profile-identity small { color: var(--muted); font-size: 10px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(225,177,91,.15); }
.profile-stats div { display: grid; gap: 5px; padding: 16px; border-right: 1px solid rgba(225,177,91,.12); }
.profile-stats div:last-child { border-right: 0; }
.profile-stats span { color: var(--muted); font-size: 11px; }
.profile-stats strong { color: var(--amber); font-size: 23px; }
.profile-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 16px; }
.profile-actions button { display: grid; gap: 5px; min-height: 92px; padding: 12px 9px; border: 1px solid rgba(225,177,91,.2); border-radius: 8px; color: var(--text); background: rgba(17, 38, 49, .68); text-align: left; }
.profile-actions button:hover { border-color: var(--cyan); transform: translateY(-2px); }
.profile-actions button > span { color: var(--amber); font-size: 20px; }
.profile-actions button strong { font-size: 12px; }
.profile-actions button small { color: var(--muted); font-size: 10px; }
.profile-records { margin: 0 16px 16px; padding: 14px; border-top: 1px solid rgba(225,177,91,.15); }
.profile-footer-actions { display: flex; justify-content: flex-end; padding: 0 16px 16px; border-top: 1px solid rgba(225,177,91,.12); }
.profile-footer-actions .ghost-button { margin-top: 14px; min-width: 104px; }
.account-record-list { display: grid; gap: 7px; max-height: 240px; overflow: auto; margin: 10px 0 0; padding: 0; list-style: none; }
.account-record-list li { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 8px; min-width: 0; padding: 9px 0; border-bottom: 1px solid rgba(159,193,211,.1); font-size: 11px; }
.account-record-list span, .account-record-list time { color: var(--muted); }
.account-record-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-panel { grid-column: 1 / -1; padding: 36px 12px; border: 1px dashed rgba(231,179,93,.35); color: var(--muted); text-align: center; font-size: 12px; }
.bottom-nav { position: fixed; z-index: 40; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); width: min(510px, calc(100% - 28px)); transform: translateX(-50%); padding: 6px; border: 1px solid rgba(231,179,93,.36); border-radius: 13px; background: rgba(5, 15, 23, .92); box-shadow: 0 16px 42px rgba(0,0,0,.58), inset 0 0 18px rgba(231,179,93,.05); backdrop-filter: blur(15px); }
.bottom-nav button { display: grid; justify-items: center; gap: 3px; padding: 8px 10px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 11px; }
.bottom-nav button:hover, .bottom-nav button.is-active { color: var(--text); background: linear-gradient(135deg, rgba(88,61,30,.7), rgba(18,58,69,.68)); box-shadow: inset 0 -2px 0 var(--amber); }
.nav-icon { color: var(--amber); font-size: 16px; line-height: 1; }
.account-toast { position: fixed; z-index: 80; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 84px); max-width: min(420px, calc(100% - 30px)); transform: translateX(-50%); padding: 11px 16px; border: 1px solid rgba(112,216,173,.5); border-radius: 8px; color: var(--text); background: rgba(8,34,35,.95); box-shadow: 0 14px 30px rgba(0,0,0,.42); font-size: 12px; text-align: center; }
.account-toast[data-tone="error"] { border-color: rgba(255,99,120,.6); background: rgba(55,17,25,.96); }
.account-toast[hidden] { display: none; }
.account-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; }
.account-modal[hidden] { display: none; }
.account-modal-backdrop { position: absolute; inset: 0; background: rgba(2,8,13,.8); backdrop-filter: blur(7px); }
.account-dialog { position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; border: 1px solid rgba(231,179,93,.55); border-radius: 10px; background: linear-gradient(180deg, rgba(14,31,42,.98), rgba(5,16,24,.98)); box-shadow: 0 24px 80px rgba(0,0,0,.72); }
.inventory-dialog { width: min(650px, 100%); }
.account-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border-bottom: 1px solid rgba(225,177,91,.14); }
.account-dialog-heading h3 { margin: 5px 0 0; font-size: 22px; }
.account-close { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; color: var(--muted); background: rgba(9,25,37,.76); }
.account-close:hover { color: var(--text); border-color: var(--amber); }
.auth-tabs { display: flex; gap: 6px; padding: 14px 18px 0; }
.auth-tabs button { flex: 1; padding: 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: rgba(8,20,29,.7); }
.auth-tabs button.is-active { color: var(--text); border-color: var(--amber); background: rgba(91,62,29,.5); }
.account-form { display: grid; gap: 13px; padding: 18px; }
.account-form label { display: grid; gap: 6px; }
.account-form label > span { color: var(--muted); font-size: 11px; }
.account-form input, .account-form select { width: 100%; padding: 11px 12px; border: 1px solid rgba(159,193,211,.25); border-radius: 6px; outline: none; color: var(--text); background: rgba(5,16,24,.88); }
.account-form input:focus, .account-form select:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(109,157,255,.14); }
.primary-button { min-height: 44px; font-size: 13px; }
.form-message { min-height: 16px; margin: 0; color: var(--muted); font-size: 11px; }
.recharge-rule { display: grid; gap: 4px; margin: 16px 18px 0; padding: 13px 14px; border: 1px solid rgba(231,179,93,.3); border-radius: 10px; background: linear-gradient(135deg, rgba(91,62,29,.3), rgba(8,27,38,.8)); }
.recharge-rule strong { color: var(--amber); font-size: 15px; }
.recharge-presets { display: grid; gap: 8px; margin: 14px 18px 0; }
.recharge-presets > span { color: var(--muted); font-size: 11px; }
.recharge-preset-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.recharge-preset-list button { min-height: 38px; border: 1px solid rgba(159,193,211,.25); border-radius: 7px; color: var(--text); background: rgba(8,27,38,.8); font-weight: 700; cursor: pointer; }
.recharge-preset-list button:hover, .recharge-preset-list button.is-selected { border-color: var(--amber); color: #1a140b; background: linear-gradient(120deg,#e1aa55,#f8d28a); }
.recharge-form { margin: 14px 18px 0; }
.recharge-result { display: grid; gap: 10px; margin: 16px 18px 18px; padding: 14px; border: 1px solid rgba(125,214,233,.28); border-radius: 10px; background: rgba(8,27,38,.78); }
.recharge-result strong { color: var(--text); }
.recharge-result small { color: var(--muted); line-height: 1.6; }
.recharge-result a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 8px; color: #1a140b; background: linear-gradient(120deg,#e1aa55,#f8d28a); font-weight: 700; text-decoration: none; }
.recharge-result img { width: 180px; height: 180px; max-width: 100%; margin: auto; border-radius: 8px; background: #fff; object-fit: contain; }

/* hidden 属性必须优先于组件的 display 声明，避免登录门和弹窗在已登录状态露出。 */
[hidden] { display: none !important; }
.form-message[data-tone="error"] { color: var(--danger); }.form-message[data-tone="success"] { color: var(--green); }
.withdraw-balance { margin: 16px 18px 0; padding: 13px; border: 1px solid rgba(231,179,93,.22); border-radius: 7px; color: var(--muted); background: rgba(91,62,29,.2); font-size: 12px; }
.withdraw-balance strong { color: var(--amber); font-size: 18px; }
.payment-list { display: grid; gap: 8px; padding: 14px 18px 0; }
.payment-row { display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid rgba(159,193,211,.16); border-radius: 7px; background: rgba(8,20,29,.62); font-size: 11px; }
.payment-row span { color: var(--cyan); }.payment-row small { color: var(--muted); }
.funds-dialog { width: min(760px, 100%); }
.funds-summary { display: flex; align-items: baseline; gap: 8px; margin: 14px 18px 0; padding: 13px 14px; border: 1px solid rgba(231,179,93,.22); border-radius: 8px; background: linear-gradient(135deg, rgba(91,62,29,.3), rgba(8,24,34,.72)); color: var(--muted); font-size: 12px; }
.funds-summary strong { color: var(--amber); font-size: 22px; letter-spacing: .03em; }
.funds-summary em { color: var(--muted); font-size: 10px; font-style: normal; }
.funds-filters { display: flex; gap: 6px; padding: 14px 18px 10px; border-bottom: 1px solid rgba(159,193,211,.12); }
.funds-filters button { border: 1px solid rgba(159,193,211,.22); border-radius: 999px; padding: 7px 14px; color: var(--muted); background: rgba(8,20,29,.68); font-size: 11px; }
.funds-filters button:hover, .funds-filters button.is-active { border-color: var(--amber); color: var(--text); background: rgba(91,62,29,.5); }
.funds-list { display: grid; gap: 7px; max-height: min(520px, calc(100vh - 260px)); overflow: auto; margin: 0; padding: 12px 18px 18px; list-style: none; }
.funds-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; padding: 10px 11px; border: 1px solid rgba(159,193,211,.15); border-radius: 8px; background: rgba(8,20,29,.66); }
.funds-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(159,193,211,.24); border-radius: 50%; color: var(--cyan); background: rgba(17,44,55,.78); font-size: 12px; font-weight: 800; }
.funds-recharge .funds-icon { color: var(--green); border-color: rgba(112,216,173,.35); background: rgba(25,72,58,.42); }
.funds-withdraw .funds-icon { color: var(--amber); border-color: rgba(231,179,93,.35); background: rgba(91,62,29,.42); }
.funds-copy, .funds-amount { display: grid; gap: 4px; min-width: 0; }
.funds-copy strong { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.funds-copy small, .funds-amount small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.funds-amount { justify-items: end; text-align: right; }
.funds-amount b { color: var(--amber); font-size: 13px; white-space: nowrap; }
.funds-recharge .funds-amount b { color: var(--green); }
.funds-amount small { max-width: 260px; }
.account-inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; padding: 16px; }
.account-item-card { display: grid; grid-template-rows: auto auto auto auto; gap: 5px; min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: rgba(8,20,29,.7); }
.account-item-image { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-width: 0; padding: 5px; box-sizing: border-box; border-radius: 6px; background: #172b35; overflow: hidden; }
.account-item-card img { display: block; min-width: 0; min-height: 0; box-sizing: border-box; width: 100%; height: 100%; max-width: 100%; max-height: 100%; padding: 6px; object-fit: contain; object-position: center; }
.account-item-card strong, .account-item-card small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }.account-item-card strong { display: -webkit-box; min-height: 2.6em; color: var(--text); font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.account-item-card small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.account-item-card .account-sell { width: 100%; margin-top: 2px; padding: 5px 4px; font-size: 10px; }
.avatar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px; }
.avatar-choice { display: grid; gap: 7px; justify-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(8,20,29,.7); font-size: 11px; }
.avatar-choice:hover, .avatar-choice.is-selected { border-color: var(--amber); color: var(--text); background: rgba(91,62,29,.4); }
.avatar-choice img { width: 84px; height: 84px; border-radius: 50%; }

@keyframes halo-pulse { 0%, 100% { opacity: 0.56; transform: scale(0.94); } 50% { opacity: 0.95; transform: scale(1.06); } }
@keyframes scene-light-drift { 0%, 100% { filter: saturate(0.92) brightness(0.95); } 50% { filter: saturate(1.04) brightness(1.03); } }
@keyframes palm-sway { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(5.5deg) translateX(2px); } }
@keyframes shrub-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.2deg) translateX(1px); } }
@keyframes lamp-breathe { 0%, 100% { opacity: 0.72; filter: brightness(0.94); } 50% { opacity: 1; filter: brightness(1.22); } }
@keyframes raven-idle { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
@keyframes wing-flap { from { transform: rotate(24deg) scaleY(0.9); } to { transform: rotate(-16deg) scaleY(1.12); } }
@keyframes raven-fade-out { 0% { opacity: 1; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .56)) drop-shadow(0 0 8px rgba(0, 0, 0, .2)) saturate(1.08) contrast(1.06); } 100% { opacity: 0; filter: grayscale(.9) brightness(.58); } }
@keyframes ground-offering-in { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.82); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes ground-offering-out { 0% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, 0) scale(.88); } }
@keyframes toast-in { 0% { opacity: 0; transform: translate(-50%, -8px); } 18%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -5px); } }
@keyframes candle-ignite { 0% { transform: translateX(-50%) scale(0); } 45% { transform: translateX(-50%) scale(1.35); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes flame-flicker { 0%, 100% { opacity: .9; transform: translateX(-50%) translateY(0) scale(1) rotate(-2deg); filter: brightness(1); } 18% { opacity: 1; transform: translateX(-51%) translateY(-1px) scale(1.12, .92) rotate(3deg); filter: brightness(1.14); } 42% { opacity: .82; transform: translateX(-49%) translateY(1px) scale(.9, 1.12) rotate(-4deg); filter: brightness(.94); } 68% { opacity: .97; transform: translateX(-52%) translateY(-2px) scale(1.08, .96) rotate(2deg); filter: brightness(1.08); } 84% { opacity: .86; transform: translateX(-48%) translateY(0) scale(.94, 1.06) rotate(-3deg); filter: brightness(.98); } }
@keyframes candle-extinguish { 0% { opacity: 1; transform: translateX(-50%) scale(1); } 45% { opacity: .72; transform: translateX(-50%) scale(1.18, .72); } 100% { opacity: 0; transform: translateX(-50%) scale(0); } }
@keyframes result-pop { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes stage-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes firework-core { 0% { opacity: 0; transform: scale(.2); } 18% { opacity: 1; transform: scale(1.3); } 58% { opacity: .92; transform: scale(.75); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes firework-spark { 0% { opacity: 0; transform: rotate(var(--angle)) translateY(0) scale(.2); } 12% { opacity: 1; } 72% { opacity: .96; } 100% { opacity: 0; transform: rotate(var(--angle)) translateY(calc(var(--distance) * -1)) scale(.72); } }
@keyframes confetti-video-in { 0% { opacity: 0; transform: scale(.96); } 8% { opacity: .96; transform: scale(1); } 72% { opacity: .94; transform: scale(1.01); } 92% { opacity: .62; transform: scale(1.035); } 100% { opacity: 0; transform: scale(1.05); } }
.candle.is-igniting i { animation: candle-ignite 420ms ease-out; }
.result-panel.is-revealed { animation: result-pop 280ms ease-out; }

@media (max-width: 920px) { .main-layout { grid-template-columns: 1fr; } .side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rules-card, .history-card { grid-column: 1 / -1; } }
@media (max-width: 620px) { .app-shell { padding: 14px 10px; } .main-layout { padding-top: 6px; } .play-card { padding: 12px; } .side-column { display: grid; grid-template-columns: 1fr; } .lantern-stage { min-height: 500px; } .selected-investment { align-items: stretch; flex-wrap: wrap; } .selected-copy { flex: 1 1 calc(100% - 72px); } .submit-button { width: 108px; min-width: 108px; } .result-panel { align-items: flex-start; } .mode-tabs { gap: 5px; } .mode-tab { padding: 10px 8px; } }
@media (max-width: 620px) { .scene-lamp-post { inset: 12% -5% 9%; transform: scale(0.92); transform-origin: 50% 50%; } .scene-palm { right: 9%; width: 18%; } .scene-candle-stand-left { left: 24%; } .scene-candle-stand-right { left: 70%; } .lantern-prop { transform: translateX(-50%) scale(0.86); transform-origin: center bottom; } }
@media (max-width: 620px) { .backpack-modal { padding: 10px; } .backpack-dialog { max-height: calc(100vh - 20px); } .backpack-dialog .inventory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; max-height: calc(100vh - 188px); padding: 0 12px 12px; } .backpack-dialog .item-card { padding: 4px; } .backpack-heading { padding: 14px 12px 9px; } .backpack-summary { padding: 10px 12px; } .backpack-hint { padding: 0 12px 8px; } .inventory-filters { gap: 4px; padding: 0 12px 10px; } .inventory-filters button { flex: 1; padding: 5px 4px; } }
@media (max-width: 920px) { .market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .profile-actions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .app-shell { padding-bottom: 10px; } .page-heading { align-items: flex-start; flex-direction: column; } .page-heading p { font-size: 12px; } .balance-chip { width: 100%; text-align: left; } .market-toolbar { align-items: stretch; flex-direction: column; } .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .market-card { display: block; min-height: 0; padding: 8px; } .market-card-image { width: 100%; height: auto; aspect-ratio: 1; } .market-card-copy { margin-top: 8px; } .market-buy { margin-top: 8px; } .auth-gate { grid-template-columns: auto 1fr; } .auth-gate .primary-small { grid-column: 1 / -1; width: 100%; } .profile-hero { flex-wrap: wrap; } .profile-stats strong { font-size: 18px; } .profile-actions { grid-template-columns: repeat(2, 1fr); padding: 12px; } .profile-records { margin: 0 12px 12px; } .profile-footer-actions { padding-inline: 12px; } .account-record-list li { grid-template-columns: 1fr auto; } .account-record-list li strong { grid-column: 1 / -1; order: 3; } .bottom-nav { width: calc(100% - 18px); grid-template-columns: repeat(3, 1fr); bottom: max(8px, env(safe-area-inset-bottom)); } .bottom-nav button { padding: 8px 4px; font-size: 10px; } .account-dialog { max-height: calc(100vh - 20px); } .avatar-choice img { width: 68px; height: 68px; } }
@media (max-width: 620px) { .funds-row { grid-template-columns: 32px minmax(0, 1fr); } .funds-icon { width: 28px; height: 28px; } .funds-amount { grid-column: 2; justify-items: start; text-align: left; } .funds-amount small { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } }

/* 收藏弹窗：移动端也保持仓库式密集方格 */
@media (max-width: 620px) {
  .backpack-modal { padding: 10px; }
  .backpack-dialog { max-height: calc(100vh - 20px); }
  .backpack-dialog .inventory-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 1px; max-height: calc(100vh - 132px); padding: 6px; }
  .backpack-dialog .item-card { min-height: 76px; padding: 0; }
  .backpack-dialog .item-card img { padding: 5px; }
  .backpack-heading { padding: 10px 12px 7px; }
  .backpack-summary { padding: 7px 12px; }
  .inventory-filters { gap: 2px; padding: 0 12px 6px; }
  .inventory-filters button { padding: 4px 5px; }
}

/* 全局视觉统一：降低边框噪声，强化内容层级和触控反馈 */
:root {
  --line: rgba(225, 177, 91, .17);
  --panel: rgba(7, 18, 27, .92);
  --panel-light: rgba(17, 34, 43, .92);
  --surface: rgba(13, 31, 42, .86);
}

::selection { color: #20160b; background: rgba(255, 211, 139, .86); }

.app-shell {
  width: min(1320px, 100%);
  padding-bottom: 104px;
}

.app-pages { padding-bottom: 18px; }

.play-card,
.info-card,
.profile-panel,
.market-card,
.auth-gate {
  border-radius: 14px;
  background-image: linear-gradient(145deg, rgba(18, 39, 51, .42), rgba(5, 16, 24, .14));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 229, 172, .06);
}

.play-card { padding: clamp(15px, 2.5vw, 24px); }
.info-card { padding: 17px; }
.section-heading { padding-inline: 2px; }
.section-heading h2 { font-size: clamp(24px, 4vw, 34px); letter-spacing: .02em; }
.eyebrow { font-weight: 700; letter-spacing: .14em; }

.mode-tabs { gap: 9px; margin-top: 17px; }
.mode-tab {
  min-height: 66px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(18, 39, 49, .9), rgba(7, 19, 28, .88));
}
.mode-tab:hover,
.mode-tab.is-active { box-shadow: inset 0 -3px 0 var(--amber), 0 9px 22px rgba(0, 0, 0, .2); }

.lantern-stage {
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(236, 198, 119, .12), inset 0 -90px 80px rgba(0, 0, 0, .3), 0 14px 34px rgba(0, 0, 0, .26);
}

.selected-investment,
.result-panel,
.odds-card,
.history-card {
  border-radius: 12px;
  background-image: linear-gradient(145deg, rgba(18, 42, 54, .72), rgba(6, 18, 27, .78));
}

.selected-investment { padding: 15px; }
.selected-icon-wrap { width: 78px; height: 78px; flex: 0 0 78px; border-radius: 10px; background: rgba(9, 27, 36, .86); }
.selected-icon-wrap img { display: block; min-width: 0; min-height: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; padding: 4px; box-sizing: border-box; object-fit: contain; object-position: center; }
.submit-button,
.round-reset-button,
.primary-button,
.primary-small {
  min-height: 44px;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(217, 133, 46, .16);
}
.submit-button { width: 116px; min-width: 116px; flex-basis: 116px; }

.page-heading {
  position: relative;
  margin-top: 10px;
  padding: 19px 20px;
  border: 1px solid rgba(225, 177, 91, .17);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 34, 45, .88), rgba(7, 18, 27, .7));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 229, 172, .06);
}
.page-heading::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 0;
  left: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 179, 93, .5), transparent);
}
.page-heading h2 { margin-top: 4px; font-size: clamp(30px, 4vw, 40px); }
.page-heading p { max-width: 46em; line-height: 1.55; }
.balance-chip {
  min-width: 168px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(91, 62, 29, .45), rgba(12, 33, 44, .88));
  box-shadow: inset 0 1px rgba(255, 224, 143, .1);
}

.market-toolbar {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(159, 193, 211, .12);
  border-radius: 12px;
  background: rgba(7, 19, 28, .68);
}
.market-filters { padding-inline: 2px; }
.market-filters button,
.funds-filters button,
.inventory-filters button {
  min-height: 38px;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}
.market-filters button:active,
.funds-filters button:active,
.inventory-filters button:active { transform: scale(.97); }
.market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 14px; }
.market-card {
  grid-template-columns: 128px minmax(0, 1fr);
  min-height: 190px;
  padding: 12px;
  border-radius: 14px;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.market-card:hover {
  border-color: rgba(231, 179, 93, .55);
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(0, 0, 0, .3), 0 0 0 1px rgba(231, 179, 93, .08);
}
.market-card-image { width: 128px; height: 128px; border-radius: 11px; background: linear-gradient(145deg, #1c3643, #10232e); }
.market-card-image img { padding: 6px; }
.market-card-copy strong { font-size: 14px; }
.market-card-copy b { font-size: clamp(12px, 1.6vw, 16px); }
.market-buy { min-height: 42px; }

.profile-panel { overflow: hidden; }
.profile-hero { padding: 20px; background: linear-gradient(135deg, rgba(17, 42, 53, .78), rgba(6, 19, 28, .42)); }
.avatar-button { width: 78px; height: 78px; box-shadow: 0 0 0 5px rgba(231, 179, 93, .08), 0 8px 18px rgba(0, 0, 0, .28); }
.profile-stats div { padding: 14px 16px; background: rgba(4, 14, 21, .18); }
.profile-stats strong { font-size: clamp(18px, 3vw, 24px); }
.profile-actions { gap: 10px; padding: 18px; }
.profile-actions button {
  min-height: 100px;
  padding: 13px 12px;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(19, 46, 58, .82), rgba(8, 24, 34, .82));
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.profile-actions button > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(231, 179, 93, .3);
  border-radius: 9px;
  background: rgba(91, 62, 29, .25);
  font-size: 16px;
}
.profile-actions button:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, .2); background: linear-gradient(145deg, rgba(26, 61, 74, .9), rgba(10, 29, 40, .88)); }
.profile-footer-actions { padding: 0 18px 18px; }

.bottom-nav {
  min-height: 66px;
  padding: 7px;
  border-radius: 16px;
  background: rgba(4, 15, 23, .94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 224, 143, .08);
}
.bottom-nav button { min-height: 50px; border-radius: 11px; transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.bottom-nav button.is-active { box-shadow: inset 0 -3px 0 var(--amber), 0 0 22px rgba(231, 179, 93, .1); }

.account-modal-backdrop,
.backpack-backdrop { background: rgba(1, 7, 12, .84); backdrop-filter: blur(9px); }
.account-dialog,
.backpack-dialog {
  border-radius: 16px;
  border-color: rgba(231, 179, 93, .42);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .76), inset 0 1px rgba(255, 224, 143, .08);
}
.account-dialog-heading,
.backpack-heading { padding: 19px 20px 15px; }
.account-close,
.backpack-close { min-height: 40px; border-radius: 9px; }
.funds-filters { overflow-x: auto; scrollbar-width: thin; }
.funds-filters button { flex: 0 0 auto; }

@media (max-width: 920px) {
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .app-shell { padding: 10px 10px 96px; }
  .app-pages { padding-bottom: 8px; }
  .play-card { padding: 11px; }
  .section-heading { align-items: flex-start; }
  .section-heading h2 { font-size: 27px; }
  .mode-tab { min-height: 62px; }
  .lantern-stage { min-height: 500px; }
  .selected-investment { gap: 10px; }
  .selected-icon-wrap { width: 68px; height: 68px; flex-basis: 68px; }
  .submit-button { width: 112px; min-width: 112px; flex-basis: 112px; }
  .page-heading { margin-top: 4px; padding: 16px; gap: 12px; }
  .page-heading::after { right: 16px; left: 16px; }
  .page-heading h2 { font-size: 30px; }
  .balance-chip { min-width: 0; padding: 11px 14px; }
  .market-toolbar { padding: 8px; }
  .market-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
  .market-filters::-webkit-scrollbar { display: none; }
  .market-filters button { flex: 0 0 auto; min-height: 40px; }
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .market-card { display: block; min-height: 0; padding: 8px; border-radius: 11px; }
  .market-card-image { width: 100%; height: auto; aspect-ratio: 1; border-radius: 9px; }
  .market-card-copy { margin-top: 9px; }
  .market-card-copy strong { font-size: 12px; }
  .market-card-copy b { white-space: normal; overflow-wrap: anywhere; }
  .market-buy { margin-top: 9px; min-height: 42px; }
  .profile-hero { padding: 16px; }
  .profile-stats div { padding: 12px 9px; }
  .profile-stats span { font-size: 10px; }
  .profile-actions { gap: 8px; padding: 13px; }
  .profile-actions button { min-height: 96px; padding: 11px 10px; }
  .profile-footer-actions { padding: 0 13px 13px; }
  .bottom-nav { width: calc(100% - 18px); }
  .account-dialog-heading, .backpack-heading { padding: 15px 16px 12px; }
  .account-dialog, .backpack-dialog { max-height: calc(100vh - 18px); }
  .account-modal, .backpack-modal { padding: 9px; }
}

@media (max-width: 360px) {
  .profile-stats strong { font-size: 17px; }
  .profile-actions button strong { font-size: 11px; }
  .market-card-copy b { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .market-card:hover, .profile-actions button:hover { transform: none; }
}

/* 渡鸦比例微调：以脚部为锚点缩小，保持站在横杆上的位置不变 */
.raven-statue {
  transform: translateX(-50%) scale(.64);
}

.selected-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.reselect-button {
  min-width: 76px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid rgba(159, 193, 211, .34);
  border-radius: 10px;
  color: var(--cyan);
  background: rgba(9, 28, 39, .86);
  font-size: 12px;
  font-weight: 700;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}
.reselect-button:hover:not(:disabled),
.reselect-button:focus-visible {
  border-color: var(--cyan);
  color: var(--text);
  background: rgba(24, 62, 76, .9);
  transform: translateY(-1px);
}
.reselect-button:disabled { cursor: not-allowed; opacity: .45; }

@media (max-width: 620px) {
  .selected-investment.has-selection .selected-copy { flex: 1 1 0; }
  .selected-investment.has-selection .selected-actions {
    flex: 1 0 100%;
    justify-content: flex-end;
  }
  .selected-investment.has-selection .reselect-button { min-width: 78px; }
}