:root {
  color-scheme: dark;
  --bg: #060714;
  --panel: rgba(11, 13, 31, .88);
  --panel-solid: #0d1025;
  --line: rgba(157, 171, 255, .15);
  --text: #f5f7ff;
  --muted: #98a0bd;
  --green: #c7ff36;
  --cyan: #4ee8ff;
  --violet: #9b6cff;
  --danger: #ff6b88;
  --radius: 20px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .42);
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 22% -8%, #252566 0, transparent 38rem), radial-gradient(circle at 92% 34%, rgba(24,95,118,.16), transparent 32rem), var(--bg); }
body::before { content:""; position: fixed; inset: 0; z-index: -1; opacity: .18; pointer-events: none; background-image: linear-gradient(rgba(124,139,224,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(124,139,224,.08) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.app-shell { position: relative; width: min(1540px, 100%); margin: auto; min-height: 100vh; padding: 18px 24px 24px; }
.topbar { position: sticky; top: 0; z-index: 80; min-height: 64px; display: grid; grid-template-columns: auto minmax(270px, 1fr) auto; align-items: center; gap: 18px; padding: 6px 0; border-bottom: 1px solid var(--line); margin-bottom: 18px; background: rgba(6,7,20,.84); backdrop-filter: blur(18px); }
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 0 24px rgba(199,255,54,.24); }.brand-mark img { width: 100%; height: 100%; display: block; }
.brand strong, .brand small { display: block; line-height: 1; letter-spacing: -.02em; }
.brand strong { font-size: 17px; }.brand small { color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .2em; font-size: 9px; }
.contract-chip { justify-self: center; width: min(460px, 100%); min-height: 38px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 5px 6px 5px 12px; border: 1px solid rgba(78,232,255,.2); border-radius: 11px; background: rgba(11,13,31,.64); }
.contract-chip > span { color: var(--cyan); font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }.contract-chip code { min-width: 0; overflow: hidden; color: #b8bfd7; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }.contract-chip button { min-height: 28px; padding: 0 10px; border: 1px solid rgba(157,171,255,.18); border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 10px; font-weight: 750; }.contract-chip button:disabled { cursor: not-allowed; opacity: .58; }
.topbar-status { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.share-button, .network-chip, .wallet-button { border: 1px solid var(--line); background: rgba(11,13,31,.7); border-radius: 999px; min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px; }
.share-button { cursor: pointer; color: #d7dced; font-weight: 750; transition: .2s ease; }.share-button span { color: var(--cyan); font-size: 16px; }.share-button:hover { border-color: rgba(78,232,255,.52); transform: translateY(-1px); }
.network-chip { color: #cdd2e8; font-size: 13px; }.network-chip i, .panel-footer i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }.network-chip b { color: var(--muted); font-size: 11px; }
.wallet-button { cursor: pointer; font-weight: 750; transition: .2s ease; }.wallet-button:hover { border-color: rgba(199,255,54,.6); transform: translateY(-1px); }.wallet-dot { width: 9px; height: 9px; border: 2px solid var(--green); border-radius: 50%; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(330px, .7fr); gap: 18px; }
.chamber, .control-panel { border: 1px solid rgba(157,171,255,.18); background: linear-gradient(150deg, rgba(20,23,52,.82), rgba(7,9,23,.96)); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.025); overflow: hidden; }
.chamber { padding: 22px; }.chamber-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.eyebrow { color: var(--green); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .16em; margin: 0 0 7px; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: clamp(27px, 3vw, 42px); line-height: 1; letter-spacing: -.045em; } h2 { letter-spacing: -.03em; }.season-line { display: flex; align-items: center; gap: 8px; }.live-pulse { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(199,255,54,.45); animation: live-pulse 2s ease-out infinite; }.chamber-subtitle { max-width: 600px; margin: 9px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.balance-card { display: grid; grid-template-columns: auto auto; gap: 1px 16px; min-width: 210px; padding: 10px 14px; border: 1px solid rgba(199,255,54,.22); background: rgba(199,255,54,.06); border-radius: 14px; }
.balance-card span { color: var(--muted); font-size: 12px; }.balance-card strong { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 25px; color: var(--green); }.balance-card small { font-size: 10px; color: #6e7696; }
.lab-scene { position: relative; aspect-ratio: 16 / 9; min-height: 440px; border-radius: 16px; overflow: hidden; background: #08091d; border: 1px solid rgba(113,139,255,.18); isolation: isolate; }
.scene-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }.scene-vignette { display: none; }
.pot { position: absolute; padding: 0; border: 0; border-radius: 38%; background: transparent; cursor: pointer; overflow: visible; }
.pot:hover { background: transparent; }.pot-number { position: absolute; right: -7px; top: -7px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--cyan); font-size: 10px; font-weight: 850; background: #0a0c20; border: 1px solid rgba(78,232,255,.45); z-index: 4; }
.scene-hint { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; white-space: nowrap; padding: 8px 12px; border-radius: 999px; color: #c8cce0; background: rgba(5,7,20,.72); backdrop-filter: blur(10px); font-size: 12px; border: 1px solid var(--line); }.scene-hint span, .scene-hint kbd { color: var(--green); font: inherit; font-weight: 800; }
.metric-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(7,9,23,.38); }.metric-row div { padding: 13px 16px; border-right: 1px solid var(--line); }.metric-row div:last-child { border: 0; }.metric-row span, .metric-row strong { display: block; }.metric-row span { color: var(--muted); font-size: 11px; margin-bottom: 4px; }.metric-row strong { font-size: 17px; }
.control-panel { position: relative; min-height: 730px; display: flex; flex-direction: column; }.panel-tabs { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--line); }.tab { flex: 1; min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; }.tab.active { color: var(--text); background: rgba(126,142,222,.12); }.tab span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 5px; border-radius: 7px; background: rgba(255,255,255,.08); font-size: 11px; }
.panel-view { padding: 16px; overflow: auto; flex: 1; }.panel-view[hidden] { display: none; }.pack-card { display: grid; grid-template-columns: 41% 1fr; min-height: 255px; border: 1px solid rgba(155,108,255,.3); background: radial-gradient(circle at 10% 20%, rgba(62,64,170,.38), transparent 55%), #0b0d20; border-radius: 16px; overflow: hidden; transition: border-color .25s, transform .25s; }.pack-card:hover { border-color: rgba(155,108,255,.5); transform: translateY(-2px); }
.pack-orbit { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, rgba(78,232,255,.18), transparent 65%); }.pack-orbit::after { content:""; position: absolute; width: 160px; aspect-ratio: 1; border: 1px solid rgba(199,255,54,.25); border-radius: 50%; box-shadow: 0 0 40px rgba(78,232,255,.18); }.pack-orbit img { position: relative; z-index: 1; width: 118%; height: 92%; object-fit: contain; mix-blend-mode: screen; filter: saturate(1.15) contrast(1.06); }.pack-copy { padding: 22px 18px 18px 8px; }.pack-copy h2 { font-size: 22px; margin-bottom: 8px; }.pack-copy > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.5; }
.pack-price { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin: 16px 0 12px; color: var(--muted); font-size: 11px; }.pack-price strong { color: var(--text); font-size: 12px; }
.primary-action { position: relative; overflow: hidden; width: 100%; min-height: 46px; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: 12px; padding: 0 15px; color: #090b16; background: linear-gradient(105deg, #baff24, #e7ff7c); cursor: pointer; font-weight: 900; box-shadow: 0 8px 30px rgba(199,255,54,.16); transition: transform .2s, filter .2s, box-shadow .2s; }.primary-action::before { content:""; position: absolute; inset: 0; translate: -115% 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.48), transparent 70%); transition: translate .55s ease; }.primary-action:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 10px 34px rgba(199,255,54,.24); }.primary-action:hover::before { translate: 115% 0; }.primary-action:disabled { opacity: .45; cursor: not-allowed; transform: none; }.primary-action:disabled::before { display: none; }
.pack-card .primary-action { font-size: 12px; white-space: nowrap; }
.inventory-head { display: flex; align-items: center; justify-content: space-between; margin: 25px 2px 12px; }.inventory-head h2 { margin: 0; font-size: 18px; }.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.inventory-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.empty-state { grid-column: 1/-1; min-height: 140px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px dashed rgba(138,148,195,.22); border-radius: 14px; color: var(--muted); }.empty-state span { color: var(--violet); font-size: 24px; }.empty-state strong { color: #ccd0e2; margin: 5px 0; }.empty-state p { margin: 0; font-size: 12px; }
.season-card { margin-bottom: 8px; padding: 15px; border: 1px solid rgba(199,255,54,.22); border-radius: 14px; background: linear-gradient(135deg, rgba(199,255,54,.085), rgba(78,232,255,.04)); }.season-card > div { display: flex; align-items: center; gap: 9px; color: #efffc4; }.season-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.protocol-card { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--line); }.protocol-card > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--green); background: rgba(199,255,54,.08); font-weight: 800; font-size: 11px; }.protocol-card strong { font-size: 15px; }.protocol-card p, .chain-card p { color: var(--muted); line-height: 1.5; font-size: 13px; margin: 4px 0 0; }.chain-card { margin-top: 22px; padding: 18px; border-radius: 15px; border: 1px solid rgba(78,232,255,.2); background: rgba(78,232,255,.04); }.chain-card h2 { margin-bottom: 8px; }.chain-card a { display: inline-block; color: var(--cyan); margin-top: 16px; font-size: 13px; }
.panel-footer { min-height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }.panel-footer span { display: flex; align-items: center; gap: 7px; }.panel-footer button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; }
.wallet-button.connected { border-color: rgba(199,255,54,.45); background: rgba(199,255,54,.09); }.wallet-button:disabled { opacity: .65; cursor: wait; }
.pot.plant-target, .pot.occupied, .pot.occupied:hover, .pot.ready { border: 0; background: transparent; box-shadow: none; animation: none; }
.pot-add { display: grid; place-items: center; position: absolute; left: var(--plant-x); top: var(--surface-y); translate: -50% -50%; width: 42%; height: 24%; border: 1px dashed rgba(78,232,255,.58); border-radius: 50%; color: var(--cyan); font-size: 26px; font-weight: 300; }.plant-target .pot-add { color: var(--green); border-color: var(--green); animation: target-pulse 1.8s ease-in-out infinite; }
.pot-caption { position: absolute; z-index: 5; left: 50%; bottom: -29px; translate: -50% 0; min-width: max-content; padding: 5px 8px; border-radius: 7px; background: rgba(5,7,20,.9); color: #d9dded; font-weight: 750; font-size: 10px; box-shadow: 0 5px 16px rgba(0,0,0,.28); }.ready .pot-caption { color: #07100a; background: var(--green); }
.growing-mushroom { display: block; position: absolute; z-index: 2; left: var(--plant-x); top: var(--plant-y); translate: calc(-1 * var(--stem-anchor)) -100%; height: calc(var(--pot-size) * .98 * var(--growth-scale)); aspect-ratio: var(--sprite-ratio); overflow: hidden; pointer-events: none; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--rarity), transparent 60%)); }
.mushroom-cutout { position: absolute; display: block; max-width: none; object-fit: fill; pointer-events: none; }
.mushroom-shadow { position: absolute; z-index: 1; left: var(--plant-x); top: calc(var(--plant-y) - 9%); translate: -50% -50%; width: 42%; height: 13%; background: radial-gradient(ellipse, rgba(0,0,0,.7), transparent 70%); pointer-events: none; }
.pot-front { position: absolute; z-index: 3; inset: 0; background-image: url('../assets/laboratory-v2.png'); background-size: var(--room-size); background-position: var(--rim-position); background-repeat: no-repeat; clip-path: polygon(4% 19%, 12% 30%, 28% 39%, 50% var(--rim-curve), 72% 39%, 89% 30%, 96% 19%, 100% 100%, 0% 100%); pointer-events: none; }
.pot-progress { position: absolute; z-index: 4; left: 14%; right: 14%; bottom: -7px; height: 3px; border-radius: 999px; background: linear-gradient(to right, var(--rarity) var(--progress), rgba(255,255,255,.16) 0); pointer-events: none; }.ready .pot-progress { background: var(--green); box-shadow: 0 0 10px var(--green); }
.pot-status-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pot-status { position: absolute; translate: -50% -50%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 7px; min-width: 82px; min-height: 36px; padding: 5px 7px; border: 1px solid rgba(78,232,255,.34); border-radius: 9px; color: #eef2ff; background: rgba(5,7,20,.86); box-shadow: 0 4px 16px rgba(0,0,0,.3); text-align: left; cursor: pointer; pointer-events: auto; backdrop-filter: blur(7px); }
.pot-status::before { content:""; position: absolute; z-index: -1; left: 50%; top: 50%; width: var(--line-length); height: 1px; transform: rotate(var(--line-angle)); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(78,232,255,.46), rgba(78,232,255,.08)); pointer-events: none; }
.pot-status-number { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: var(--cyan); border: 1px solid rgba(78,232,255,.36); font-size: 9px; font-weight: 850; }
.pot-status .pot-caption { position: static; translate: none; min-width: 0; padding: 0; background: transparent; box-shadow: none; color: #eef2ff; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.pot-status .pot-progress { position: static; grid-column: 1 / -1; width: 100%; height: 2px; }
.pot-status[hidden] { display: none; }
.pot-status:hover { border-color: rgba(78,232,255,.65); background: rgba(8,12,30,.96); }.pot-status.ready { border-color: rgba(199,255,54,.6); }.pot-status.ready:hover { box-shadow: 0 4px 22px rgba(199,255,54,.18); }.pot-status.ready .pot-caption, .pot-status.ready .pot-status-number { color: var(--green); }
.specimen-card { position: relative; display: grid; grid-template-columns: 70px 1fr; align-items: center; min-height: 105px; width: 100%; padding: 9px; border: 1px solid rgba(157,171,255,.14); border-radius: 14px; color: var(--text); text-align: left; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); cursor: pointer; overflow: hidden; transition: transform .2s, border-color .2s, background .2s; }.specimen-card::before { content:""; position: absolute; inset: auto -20% -60% 20%; height: 100%; background: radial-gradient(circle, color-mix(in srgb, var(--rarity), transparent 80%), transparent 70%); pointer-events:none; }.specimen-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rarity), transparent 45%); }.specimen-card.selected { border: 2px solid var(--rarity); background: color-mix(in srgb, var(--rarity), #090b1c 92%); box-shadow: 0 0 24px color-mix(in srgb, var(--rarity), transparent 82%); }
.specimen-art { display: grid; place-items: center; width: 62px; height: 82px; border-radius: 10px; background: radial-gradient(circle, color-mix(in srgb, var(--rarity), transparent 75%), transparent 70%); }.specimen-art img { max-width: 88%; max-height: 88%; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0,0,0,.5)); }.specimen-info { position: relative; z-index: 1; display: grid; gap: 2px; padding-left: 5px; }.specimen-info .rarity-label { color: var(--rarity); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; font-weight: 900; }.specimen-info strong { font-size: 14px; }.specimen-info small { color: var(--muted); font-size: 10px; }.selection-check { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #09100a; background: var(--rarity); opacity: 0; transform: scale(.7); transition: .2s; }.selected .selection-check { opacity: 1; transform: scale(1); }
.wallet-details { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(78,232,255,.14); color: #d6daec; font: 12px ui-monospace, monospace; }
.rarity-table { margin-top: 22px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }.rarity-table > div { display: grid; grid-template-columns: 1fr 50px 70px; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 12px; }.rarity-table > div:last-child { border: 0; }.rarity-table > div span:first-child { color: var(--rarity); font-weight: 750; }.rarity-table-head { color: var(--muted); background: rgba(255,255,255,.03); }
.pack-copy > p:not(.eyebrow), .protocol-card p, .chain-card p { font-size: 14px; }.metric-row span { font-size: 12px; }.specimen-info .rarity-label { font-size: 11px; }.specimen-info small { font-size: 12px; }.empty-state p { font-size: 14px; }.panel-footer { font-size: 12px; }
.toast { width: min(360px, calc(100vw - 36px)); display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 13px; color: #e9edfa; background: rgba(12,15,34,.96); border: 1px solid rgba(199,255,54,.34); box-shadow: var(--shadow); animation: toast-in .3s ease both; }.toast > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #07100a; background: var(--green); font-weight: 900; }.toast p { margin: 0; font-size: 13px; line-height: 1.4; }.toast.error { border-color: rgba(255,107,136,.45); }.toast.error > span { background: var(--danger); color: #fff; }
.game-dialog { width: min(500px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 1px solid rgba(157,171,255,.24); border-radius: 20px; color: var(--text); background: rgba(11,13,31,.97); box-shadow: 0 34px 100px rgba(0,0,0,.72); overflow: visible; }.game-dialog::backdrop { background: rgba(3,4,13,.78); backdrop-filter: blur(9px); }.dialog-card { position: relative; margin: 0; padding: 28px; }.dialog-card.wide { width: min(800px, calc(100vw - 28px)); }.reveal-dialog { width: min(800px, calc(100vw - 28px)); }.dialog-card h2 { font-size: 29px; margin-bottom: 10px; }.dialog-card > p:not(.eyebrow,.disclosure) { color: var(--muted); line-height: 1.55; }.dialog-card strong { color: var(--text); }.dialog-close { position: absolute; right: 16px; top: 15px; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent; font-size: 23px; cursor: pointer; }
.dialog-balance { display: flex; justify-content: space-between; padding: 14px 0; margin: 18px 0; border-block: 1px solid var(--line); color: var(--muted); font-size: 13px; }.dialog-balance b { color: var(--green); font-size: 18px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }.primary-action.compact, .secondary-action, .danger-action { width: auto; min-height: 44px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 11px; font-weight: 800; text-decoration: none; cursor: pointer; }.secondary-action { border: 1px solid var(--line); color: #d6daea; background: rgba(255,255,255,.035); }.danger-action { border: 0; color: #fff; background: var(--danger); }
.reveal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }.reveal-grid .specimen-card { grid-template-columns: 1fr; padding: 12px; text-align: center; min-height: 220px; animation: reveal-in .6s calc(var(--card-index) * .11s) cubic-bezier(.2,.9,.2,1) both; }.reveal-grid .specimen-art { width: 100%; height: 130px; }.reveal-grid .specimen-info { padding: 4px 0 0; }.reveal-grid .selection-check { display: none; }
.help-list { list-style: none; margin: 22px 0; padding: 0; counter-reset: guide; }.help-list li { counter-increment: guide; display: grid; grid-template-columns: 38px 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); }.help-list li::before { content: counter(guide, decimal-leading-zero); grid-row: 1/3; color: var(--green); font-weight: 900; font-size: 11px; }.help-list b, .help-list span { grid-column: 2; }.help-list b { font-size: 14px; }.help-list span { color: var(--muted); font-size: 12px; margin-top: 3px; }.disclosure { padding: 12px; border-radius: 10px; color: #aeb5ce; background: rgba(255,255,255,.035); font-size: 12px; line-height: 1.5; }
.setting-row, .danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); }.setting-row span, .danger-zone div { display: grid; gap: 4px; }.setting-row small, .danger-zone small { color: var(--muted); }.setting-row select { max-width: 220px; min-height: 40px; color: var(--text); background: #11152d; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; }.setting-row input { width: 20px; height: 20px; accent-color: var(--green); }.danger-zone { border: 0; margin-top: 8px; }.danger-zone button { min-height: 38px; padding: 0 13px; border-radius: 9px; border: 1px solid rgba(255,107,136,.4); color: var(--danger); background: transparent; cursor: pointer; }.danger-text { color: var(--danger); }
@keyframes target-pulse { 50% { box-shadow: 0 0 28px rgba(199,255,54,.25); } } @keyframes ready-pulse { 50% { box-shadow: 0 0 44px rgba(199,255,54,.5); } } @keyframes live-pulse { 70% { box-shadow: 0 0 0 7px rgba(199,255,54,0); } 100% { box-shadow: 0 0 0 0 rgba(199,255,54,0); } } @keyframes toast-in { from { opacity:0; transform: translateY(12px); } } @keyframes reveal-in { from { opacity:0; transform: translateY(18px) scale(.9); } }
@media (max-width: 1050px) { .topbar { grid-template-columns: 1fr auto; padding: 10px 0; }.contract-chip { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; width: 100%; }.topbar-status { grid-column: 2; grid-row: 1; }.game-layout { grid-template-columns: 1fr; }.control-panel { min-height: 0; }.panel-view { overflow: visible; }.pack-card { grid-template-columns: 170px 1fr; }.lab-scene { min-height: 0; } }
@media (max-width: 650px) { .app-shell { padding: 10px; }.topbar { margin: 0 4px 10px; }.network-chip { display: none; }.wallet-button { min-height: 38px; padding: 0 12px; }.chamber { padding: 14px; }.chamber-heading { align-items: flex-end; }.balance-card { min-width: 0; display: block; text-align: right; border: 0; background: none; padding: 0; }.balance-card span, .balance-card small { display: none; }.balance-card strong { font-size: 21px; }.lab-scene { aspect-ratio: 16 / 11; min-height: 0; }.scene-art { object-position: 50% center; }.scene-hint { display: none; }.pot { width: 18%; }.pot-top { top: 48%; }.pot-left, .pot-right { top: 59%; }.pot-left { left: 33.5%; }.pot-right { left: 66.5%; }.pot-bottom { top: 72%; }.pot-caption { bottom: -22px; font-size: 9px; }.pot-status { min-width: 70px; min-height: 32px; padding: 4px 6px; }.pot-status-number { width: 19px; height: 19px; }.pot-status .pot-caption { font-size: 9px; }.metric-row { grid-template-columns: repeat(2, 1fr); }.metric-row div:nth-child(2) { border-right: 0; }.metric-row div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.pack-card { grid-template-columns: 38% 1fr; }.pack-copy { padding: 18px 14px 14px 2px; }.pack-copy h2 { font-size: 18px; }.inventory-grid { grid-template-columns: 1fr; }.reveal-grid { grid-template-columns: repeat(2, 1fr); }.reveal-grid .specimen-card { min-height: 190px; }.dialog-card { padding: 24px 18px; }.setting-row { align-items: flex-start; flex-direction: column; }.setting-row select { width: 100%; max-width: none; } }
.site-footer { width: min(1540px, 100%); margin: 0 auto; padding: 0 24px 28px; display: flex; justify-content: space-between; gap: 20px; color: #737b9a; font-size: 11px; }.site-footer p { margin: 0; }.site-footer b { color: #adb5d0; }.site-footer span { text-align: right; }
@media (max-width: 650px) { .share-button { width: 38px; min-width: 38px; padding: 0; justify-content: center; font-size: 0; }.share-button span { font-size: 16px; }.chamber-subtitle { display: none; }.site-footer { padding: 4px 14px 22px; display: grid; }.site-footer span { text-align: left; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }