:root{color-scheme:dark;--bg:#090e20;--panel:rgba(20,27,51,.81);--panel-solid:#171e36;--card:#232943;--ink:#f5f5ff;--sub:#9ca7c5;--soft:#7d87a6;--border:rgba(174,173,248,.14);--purple:#ad91ff;--mint:#84dfbe;--pink:#f09ecd;--yellow:#ffdb94}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);min-height:100vh;line-height:1.45}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:3px}a{color:inherit;text-decoration:none}.ambient{position:fixed;pointer-events:none;z-index:-1;filter:blur(110px);opacity:.36;border-radius:50%}.ambient-one{width:550px;height:550px;background:#4d319d;top:-250px;right:4%}.ambient-two{width:590px;height:520px;background:#12544c;top:620px;left:-400px;opacity:.20}.topbar{min-height:76px;padding:0 max(30px,calc((100vw - 1290px)/2));display:flex;align-items:center;gap:36px;border-bottom:1px solid var(--border);backdrop-filter:blur(20px);background:rgba(9,14,32,.66);position:sticky;top:0;z-index:30}.brand{display:flex;gap:9px;align-items:center;font-size:17px;letter-spacing:-.5px;font-weight:650;white-space:nowrap}.brand strong{color:#cbbaff}.brand-icon{width:36px;height:36px;background:linear-gradient(145deg,#a78ff9,#5d80ce);border-radius:13px;display:grid;place-items:center;font-size:23px;box-shadow:0 5px 23px rgba(136,107,240,.3)}.topnav{display:flex;gap:5px;align-items:center;margin-left:auto}.nav-button{color:#aab4cb;border:0;background:transparent;border-radius:10px;padding:11px 13px;font-size:13px;font-weight:650}.nav-button.active,.nav-button:hover{background:rgba(142,128,223,.14);color:#e3dcff}.header-end{display:flex;align-items:center;gap:13px;white-space:nowrap}.account-badge{font-size:12px;color:#b6c0dc}.button{border:none;border-radius:12px;padding:13px 19px;font-weight:720;transition:transform .15s,filter .15s;white-space:nowrap}.button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}.button:disabled{opacity:.44;cursor:not-allowed}.button-primary{background:linear-gradient(135deg,#ab95ff,#8e83f8);color:#120f28;box-shadow:0 9px 28px rgba(123,105,242,.18)}.button-sm{font-size:12px;padding:10px 14px;border-radius:10px}.button-quiet{border:1px solid var(--border);background:#262941;color:#e7e6ff}.layout{max-width:1290px;padding:0 24px;margin:auto}.intro{padding:45px 0 26px;display:flex;align-items:center;justify-content:space-between;gap:20px}.intro h1{font-size:clamp(30px,4vw,49px);letter-spacing:-1.7px;line-height:1.15;font-weight:800;margin:8px 0 10px}.intro h1 em{font-style:normal;background:linear-gradient(90deg,#ae9bfc,#c5b2fa,#80e3bd);background-clip:text;-webkit-background-clip:text;color:transparent}.intro-copy{margin:0;max-width:690px;font-size:14px;color:#b7c2d6}.eyebrow{margin:0;color:#baabf1;letter-spacing:2.3px;font-weight:750;font-size:10px}.eyebrow.tiny{font-size:9px;letter-spacing:1.7px}.live-pill{border:1px solid rgba(124,224,183,.24);border-radius:30px;background:rgba(41,80,74,.22);padding:11px 15px;color:#b9e9dc;font-size:11px;font-weight:650;white-space:nowrap}.dot{width:7px;height:7px;background:#83e2bd;display:inline-block;border-radius:100%;margin-right:6px;box-shadow:0 0 10px #83e2bd}.world-grid{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(280px,.87fr);gap:19px;align-items:start}.main-column,.sidebar{display:grid;gap:19px;min-width:0}.panel{background:var(--panel);border:1px solid var(--border);border-radius:21px;box-shadow:0 9px 60px rgba(0,0,0,.09)}.planet-panel{overflow:hidden}.planet-panel-header{padding:24px 27px 0;display:flex;align-items:start;justify-content:space-between;gap:20px}.planet-panel-header h2{margin:6px 0 1px;font-size:29px;letter-spacing:-.7px}.muted{color:var(--sub);font-size:13px;margin:5px 0}.smaller{font-size:11px}.level-chip{border:1px solid rgba(187,160,255,.22);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:71px;height:68px;background:rgba(142,112,219,.10)}.level-chip span{font-size:9px;color:#c1aafa;letter-spacing:1.6px}.level-chip b{font-size:25px}.planet-stage{position:relative;margin:0 15px;min-height:510px;display:grid;place-items:center;overflow:hidden;border-radius:14px;background:radial-gradient(circle at 45% 45%,rgba(52,57,111,.15),transparent 68%)}.planet-stage canvas{width:min(100%,610px);height:auto;aspect-ratio:640/580;display:block;filter:drop-shadow(0 8px 32px rgba(0,0,0,.4))}.stage-label{position:absolute;background:rgba(19,25,53,.71);border:1px solid rgba(221,225,255,.11);border-radius:19px;padding:9px 13px;font-size:11px;color:#eeeaff;backdrop-filter:blur(12px)}.top-label{right:16px;top:20px}.bottom-label{left:18px;bottom:28px;display:flex;gap:7px}.planet-bottom{border-top:1px solid var(--border);padding:19px 25px 23px;display:flex;align-items:center;gap:24px;justify-content:space-between}.mini-label{font-size:9px;font-weight:800;letter-spacing:1.9px;color:#a2a5c9;margin:0 0 5px}.stat-title{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.stat-title strong{font-size:17px}.stat-title span{font-size:11px;color:var(--sub)}.progress-track{height:9px;border-radius:20px;background:#353754;width:170px;flex-shrink:0;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#85d9b1,#ab97fb);border-radius:20px;transition:width .45s}.action-panel{padding:23px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px}.section-heading h3,.lower-section-head h2{font-size:19px;margin:5px 0 0;letter-spacing:-.3px}.action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.action-button{display:flex;flex-direction:column;text-align:left;gap:5px;background:linear-gradient(150deg,rgba(49,56,90,.68),rgba(31,35,63,.8));border:1px solid rgba(173,174,246,.14);border-radius:15px;padding:16px 13px;min-height:143px;color:var(--ink);transition:border-color .15s,background .15s,transform .15s}.action-button:hover:not(:disabled){border-color:#a999f0;transform:translateY(-2px);background:rgba(66,63,111,.56)}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-icon{font-size:24px}.action-button strong{font-size:12px}.action-button small{font-size:10px;color:var(--sub);line-height:1.5}.action-cost{font-size:10px;color:#c7b5ff;font-weight:650;margin-top:auto}.hint{font-size:11px;color:var(--soft);margin:18px 0 0}.pulse-panel,.resource-panel{padding:24px}.header-decoration{font-size:24px;color:#afa0ff}.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric-tile{background:rgba(40,47,80,.6);border:1px solid rgba(170,173,227,.09);padding:12px;border-radius:13px;min-width:0}.metric-tile-label{font-size:10px;color:var(--sub)}.metric-value{font-size:21px;font-weight:760;letter-spacing:-.5px;margin:4px 0 6px}.metric-value span{font-size:11px;color:#b9bdd7;font-weight:400;margin-left:2px}.mini-bar{height:5px;background:#3b405e;border-radius:15px;overflow:hidden}.mini-bar div{height:100%;border-radius:15px;background:linear-gradient(90deg,#ac93ec,#87d6b8)}.mini-chart{margin-top:17px;height:109px;border-bottom:1px solid rgba(173,170,245,.14);background:repeating-linear-gradient(to bottom,transparent,transparent 25%,rgba(201,202,242,.05) calc(25% + 1px));border-radius:4px}.mini-chart svg{width:100%;height:100%;overflow:visible}.chart-legend{display:flex;gap:18px;justify-content:center;font-size:10px;color:var(--sub);margin-top:12px}.chart-legend i{display:inline-block;width:8px;height:8px;border-radius:100%;margin-right:6px}.legend-green{background:#8bdec0}.legend-purple{background:#b4a0fa}.simulation-note{color:#818baa;font-size:10px;line-height:1.5;margin:17px 0 0}.resource-list{display:grid;gap:15px}.resource-row{display:flex;gap:9px;align-items:center}.resource-row .resource-icon{width:29px;height:29px;display:grid;place-items:center;background:rgba(168,151,236,.09);border-radius:10px;font-size:16px}.resource-text{flex:1;min-width:0}.resource-label{display:flex;justify-content:space-between;font-size:11px;margin-bottom:6px}.resource-label strong{color:#e4e6fb}.resource-line{height:5px;border-radius:8px;background:#353c5c;overflow:hidden}.resource-line div{height:100%;background:#ac99f2;border-radius:8px;transition:width .4s}.civ-card{padding:22px;display:grid;grid-template-columns:45px 1fr;gap:11px}.civ-card-icon{width:43px;height:43px;border-radius:14px;background:rgba(153,132,224,.16);display:grid;place-items:center;font-size:24px}.civ-card h3{margin:2px 0;font-size:18px}.civ-footer{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:17px;margin-top:3px;font-size:11px;color:var(--sub)}.civ-footer b{color:#e8e2ff;margin-left:4px}.lower-section{padding:25px;margin-top:19px}.lower-section-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:20px}.tab-content{padding-top:22px;min-height:170px}.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.info-card{background:rgba(43,49,83,.53);border:1px solid rgba(151,148,203,.11);border-radius:15px;padding:17px}.info-card .big{font-size:25px;font-weight:800;margin:8px 0 3px}.info-card h4{font-size:14px;margin:7px 0}.info-card p{font-size:11px;color:var(--sub);margin:3px 0;line-height:1.6}.info-icon{font-size:25px}.species-grid,.galaxy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.species-card,.galaxy-card{text-align:center;border-radius:16px;background:rgba(43,49,83,.55);border:1px solid rgba(180,167,239,.12);padding:19px 10px}.species-emoji{font-size:38px;display:block;margin-bottom:9px}.species-card strong,.galaxy-card strong{font-size:12px;overflow-wrap:anywhere}.species-card p,.galaxy-card p{font-size:10px;color:var(--sub);margin:5px 0 0}.species-card .tiny-meter{height:4px;background:#363f5b;margin:10px 5px 0;border-radius:4px;overflow:hidden}.tiny-meter div{height:100%;background:#83cdb0;border-radius:4px}.galaxy-card{text-align:left}.galaxy-card .galaxy-icon{font-size:30px}.galaxy-card button{margin-top:13px;border:1px solid #665f98;border-radius:9px;background:rgba(164,145,238,.13);padding:8px 12px;color:#e7e0ff;font-size:11px}.journal-list{display:grid;gap:10px}.journal-entry{display:grid;grid-template-columns:80px 1fr;gap:16px;padding:13px 15px;background:rgba(41,48,80,.51);border-radius:12px}.journal-entry small{color:#c3aafa;font-size:10px;font-weight:700}.journal-entry span{font-size:12px;color:#d8dbf1}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 17px;background:rgba(43,49,83,.5);border-radius:12px;margin-bottom:18px}.toggle-row strong{font-size:13px}.toggle-row p{margin:3px 0;color:var(--sub);font-size:11px}.toggle-button{border:1px solid var(--border);background:#292b4e;color:#eeeaff;border-radius:20px;padding:9px 13px;font-size:11px;white-space:nowrap}.toggle-button.public{background:#23554d;border-color:#448f7b}.footer{padding:30px 2px 40px;display:flex;justify-content:space-between;gap:16px;font-size:11px;color:#75809e}.toast{position:fixed;z-index:70;bottom:22px;right:22px;background:#e7e1ff;color:#171331;font-weight:700;padding:12px 19px;border-radius:13px;box-shadow:0 12px 40px #0007;opacity:0;transform:translateY(15px);transition:opacity .15s,transform .15s;max-width:440px;font-size:13px;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}.toast.error{background:#ffd6da;color:#481a2b}.modal{color:var(--ink);background:rgba(20,25,46,.98);border:1px solid rgba(164,153,226,.28);border-radius:24px;width:min(94vw,430px);max-height:min(90vh,800px);padding:0;box-shadow:0 35px 120px #000a}.modal::backdrop{background:rgba(3,7,20,.80);backdrop-filter:blur(7px)}.modal-inner{padding:32px;display:grid;gap:12px;position:relative}.modal .wide-modal{max-height:82vh;overflow:auto}.modal:has(.wide-modal){width:min(94vw,520px)}.modal-illustration{text-align:center;font-size:49px;margin-bottom:5px}.modal-inner h2{font-size:24px;letter-spacing:-.5px;margin:0;text-align:center}.modal-inner>.eyebrow,.modal-inner>.muted{text-align:center}.modal-inner label{display:grid;gap:7px;font-size:12px;font-weight:700;margin-top:6px}.modal-inner input{width:100%;color:#f7f5ff;background:#252c48;border:1px solid #4b4b72;padding:13px 14px;border-radius:10px;outline:none}.modal-inner input:focus{border-color:#a997fa}.modal-close{position:absolute;right:13px;top:10px;background:transparent;border:0;font-size:26px;color:#d9d5ff}.form-error{font-size:11px;color:#ffb3c6;margin:1px;min-height:14px}.text-button{background:transparent;border:0;color:#cbbaff;font-size:12px;margin-top:4px}.biome-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.biome-option{border:1px solid #444a70;border-radius:12px;padding:10px;text-align:left;color:#e8e5ff;background:#242b49;font-size:12px}.biome-option[aria-pressed=true]{border-color:#a995f4;background:#37345b}.biome-option small{display:block;color:var(--sub);font-size:10px}.empty-state{display:flex;flex-direction:column;align-items:center;padding:28px;gap:9px;text-align:center;color:var(--sub);font-size:13px}.empty-state .big-icon{font-size:37px}.visit-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:13px 0}.visit-stats div{background:#292e4c;border-radius:10px;padding:14px;text-align:center;font-size:11px}.visit-stats strong{display:block;font-size:20px;color:#c7b5ff}.visit-creatures{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0}.visit-creatures span{padding:6px 9px;border-radius:18px;background:#333451;font-size:12px}@media(max-width:1120px){.topbar{gap:15px;padding:12px 24px;flex-wrap:wrap}.topnav{order:3;overflow:auto;width:100%;justify-content:space-between;margin:0}.header-end{margin-left:auto}.planet-stage{min-height:420px}.planet-stage canvas{width:100%}.world-grid{grid-template-columns:minmax(0,1.3fr) minmax(255px,.8fr)}.action-grid{grid-template-columns:repeat(2,1fr)}.action-button{min-height:135px}.info-grid{grid-template-columns:repeat(2,1fr)}.species-grid,.galaxy-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.layout{padding:0 14px}.intro{padding:29px 2px 18px;align-items:start;flex-direction:column}.intro h1{letter-spacing:-1px}.world-grid{grid-template-columns:1fr}.sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.pulse-panel{grid-row:span 2}.planet-stage{min-height:340px}.planet-panel-header{padding:20px 20px 0}.planet-panel-header h2{font-size:25px}.planet-bottom{padding:17px;flex-direction:column;align-items:stretch;gap:12px}.progress-track{width:100%}.action-panel,.pulse-panel,.resource-panel,.lower-section{padding:19px}.species-grid,.galaxy-grid{grid-template-columns:repeat(2,1fr)}.footer{flex-direction:column}.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.sidebar{grid-template-columns:1fr}.pulse-panel{grid-row:auto}.topbar{padding:11px 14px}.topnav{gap:0}.nav-button{font-size:11px;padding:9px 8px}.brand{font-size:14px}.brand-icon{height:31px;width:31px}.header-end .account-badge{display:none}.header-end .button{font-size:10px;padding:9px}.planet-stage{min-height:280px}.planet-panel-header h2{font-size:23px}.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.action-button{padding:12px;min-height:145px}.info-grid{grid-template-columns:1fr}.stage-label{font-size:9px;padding:7px 9px}.lower-section-head{align-items:start;gap:13px}.modal-inner{padding:27px 21px}.biome-choices{gap:6px}}

/* ==========================================================================
   v2 additions (readable). Everything below extends the original theme above.
   ========================================================================== */
.level-chip .xp-track { width: 46px; height: 4px; border-radius: 4px; background: #353754; overflow: hidden; margin-top: 4px; }
.level-chip .xp-track div { height: 100%; background: linear-gradient(90deg, #85d9b1, #ab97fb); transition: width .4s; }
.cycle-chip { font-size: 11px; color: #c7b5ff; border: 1px solid var(--border); border-radius: 20px; padding: 6px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-empty { padding: 38px 10px 0; text-align: center; }
.unit { font-size: 13px; color: var(--sub); }
.up { color: #84dfbe; } .down { color: #f2a0b4; }
.action-reason { font-size: 9px; color: #f2b8c8; line-height: 1.4; }
.subhead { margin: 24px 0 12px; font-size: 14px; color: #e3dcff; }
.subhead:first-child { margin-top: 0; }

/* Decision banner */
.decision-banner { padding: 20px 23px; display: grid; grid-template-columns: 56px 1fr; gap: 14px; border-color: rgba(240, 158, 205, .35); background: linear-gradient(140deg, rgba(76, 46, 98, .55), rgba(25, 30, 58, .9)); }
.decision-banner[hidden] { display: none; }
.decision-icon { font-size: 38px; text-align: center; }
.decision-body h3 { margin: 4px 0 2px; font-size: 18px; }
.decision-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.decision-choice { display: grid; gap: 4px; text-align: left; color: var(--ink); background: rgba(43, 49, 83, .75); border: 1px solid rgba(240, 158, 205, .25); border-radius: 13px; padding: 13px; }
.decision-choice:hover:not(:disabled) { border-color: var(--pink); transform: translateY(-1px); }
.decision-choice small { font-size: 10px; color: var(--sub); }
.decision-choice span { font-size: 10px; color: #f0b9d9; }

/* Daily goals */
.goals-panel { padding: 22px 24px; }
.goal-list { display: grid; gap: 8px; }
.goal { display: flex; gap: 10px; align-items: center; font-size: 12px; padding: 9px 11px; border-radius: 10px; background: rgba(40, 47, 80, .6); }
.goal-check { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #5c5f8c; color: #5c5f8c; font-size: 11px; flex-shrink: 0; }
.goal.done { color: #b9e9dc; }
.goal.done .goal-check { background: #2f6d5c; border-color: #84dfbe; color: #e9fff6; }
.goal-reward { margin-top: 4px; }

/* Species */
.species-card { color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.species-card:hover { transform: translateY(-2px); border-color: #a999f0; }
.species-art { display: block; margin: 0 auto 6px; width: 64px; height: 64px; }
.gift-tag { color: #f0b9d9 !important; font-size: 10px; }
.species-hero { display: grid; place-items: center; margin: 4px 0 2px; }
.trait-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.trait-row span { font-size: 11px; padding: 5px 10px; border-radius: 20px; background: #333451; color: #e3dcff; }
.visit-creatures span { display: inline-flex; align-items: center; gap: 5px; }

/* Research */
.tech-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.tech-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 15px; background: rgba(43, 49, 83, .55); border: 1px solid rgba(180, 167, 239, .12); }
.tech-card strong { font-size: 13px; }
.tech-card p { font-size: 11px; color: var(--sub); margin: 0; line-height: 1.5; }
.tech-icon { font-size: 26px; }
.tech-req { color: #c7b5ff !important; }
.tech-why { font-size: 10px; color: #f2b8c8; }
.tech-card button { margin-top: auto; border: 1px solid #665f98; border-radius: 9px; background: rgba(164, 145, 238, .16); padding: 9px; color: #e7e0ff; font-size: 11px; font-weight: 700; }
.tech-card button:disabled { opacity: .55; cursor: not-allowed; }
.tech-card.ready { border-color: rgba(132, 223, 190, .45); }
.tech-card.known { border-color: rgba(132, 223, 190, .3); background: rgba(35, 85, 77, .35); }
.tech-card.known button { background: #23554d; border-color: #448f7b; opacity: 1; }
.tech-card.blocked { opacity: .45; }

/* Civilization culture */
.culture-bars { display: grid; gap: 9px; max-width: 520px; }
.culture-row { display: grid; grid-template-columns: 140px 1fr 24px; gap: 10px; align-items: center; font-size: 12px; }
.culture-row b { text-align: right; }

/* Achievements */
.badge-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; }
.badge { display: grid; gap: 3px; justify-items: center; text-align: center; padding: 12px 6px; border-radius: 13px; background: rgba(43, 49, 83, .4); border: 1px solid rgba(180, 167, 239, .08); opacity: .42; filter: grayscale(1); }
.badge span { font-size: 24px; }
.badge strong { font-size: 11px; }
.badge small { font-size: 9px; color: var(--sub); line-height: 1.35; }
.badge.earned { opacity: 1; filter: none; border-color: rgba(240, 209, 132, .4); background: rgba(92, 77, 40, .25); }
.journal-entry.cat-achievement span, .journal-entry.cat-goal span { color: #f3dca0; }
.journal-entry.cat-extinction span { color: #f2b8c8; }
.journal-entry.cat-gift span, .journal-entry.cat-decision span { color: #f0b9d9; }

/* Galaxy: stars, leaderboards */
.galaxy-actions { display: flex; gap: 8px; align-items: center; margin-top: 13px; }
.galaxy-actions button { margin-top: 0 !important; }
.star-button { border: 1px solid #665f98; border-radius: 9px; background: transparent; padding: 8px 11px; color: #e7e0ff; font-size: 11px; }
.star-button.on { background: rgba(240, 209, 132, .18); border-color: #e9c46a; color: #ffe39a; }
.star-button.big { width: 100%; padding: 12px; font-size: 13px; font-weight: 700; }
.star-count { font-size: 11px; color: var(--sub); }
.board-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.board { background: rgba(43, 49, 83, .45); border-radius: 14px; padding: 14px; }
.board h5 { margin: 0 0 8px; font-size: 12px; }
.board-row { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--ink); text-align: left; padding: 6px 2px; font-size: 11px; border-top: 1px solid rgba(174, 173, 248, .08); }
.board-row small { color: var(--sub); }
.board-row:hover { color: #cbbaff; }

/* Visit dialog social */
.visit-social { display: grid; gap: 10px; }
.gift-row { display: flex; gap: 8px; align-items: end; }
.gift-row label { flex: 1; margin: 0 !important; }
.modal select { width: 100%; color: #f7f5ff; background: #252c48; border: 1px solid #4b4b72; padding: 10px 12px; border-radius: 10px; font: inherit; }
.button-row { display: flex; gap: 10px; }
.button-row .button { flex: 1; text-align: center; }
.away-callout { background: rgba(76, 46, 98, .5); border: 1px solid rgba(240, 158, 205, .3); border-radius: 12px; padding: 11px 13px; font-size: 12px; margin: 4px 0; }

/* Settings */
.settings-block { display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: rgba(43, 49, 83, .45); }
.settings-block h4 { margin: 0; font-size: 14px; }
.settings-block.danger { border: 1px solid rgba(255, 140, 160, .25); }
.check-row { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px; font-weight: 500 !important; }
.check-row input { width: auto !important; }
.button-danger { background: #6b2338; color: #ffe1e8; border: 1px solid #a8475f; }

@media (max-width: 1120px) {
  .tech-grid, .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .badge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .decision-banner { grid-template-columns: 1fr; }
  .decision-icon { text-align: left; }
  .decision-choices { grid-template-columns: 1fr; }
  .badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .culture-row { grid-template-columns: 110px 1fr 20px; }
}
@media (max-width: 480px) {
  .tech-grid, .board-grid { grid-template-columns: 1fr; }
  .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .button-row { flex-direction: column; }
}

/* Pocket Universe: Planet Missions v3, works with the full research and social UI. */
.mission-panel{padding:24px;scroll-margin-top:94px;overflow:hidden}
.mission-energy{border:1px solid rgba(159,228,192,.3);background:rgba(87,161,127,.12);color:#acf2cc;border-radius:22px;padding:8px 12px;font-size:12px;font-weight:750;white-space:nowrap}
.mission-panel>.muted{margin:6px 0 17px;line-height:1.6}
.mission-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.mission-card{border:1px solid rgba(183,167,248,.25);background:rgba(50,45,89,.6);color:var(--ink);border-radius:15px;min-height:116px;padding:14px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:background .15s,transform .15s}
.mission-card:hover:not(:disabled){background:rgba(88,73,132,.65);transform:translateY(-2px)}
.mission-card:disabled{opacity:.47;cursor:not-allowed}
.mission-card.active{border-color:#a9d8c1;background:rgba(57,94,83,.28)}
.mission-card-icon{font-size:24px;line-height:1.2}
.mission-card strong{font-size:13px}
.mission-card small{color:var(--sub);font-size:11px;line-height:1.4}
.mission-reward{margin-top:auto;color:#a6e8c2;font-weight:800;font-size:12px}
.mission-play{margin-top:16px;border-radius:16px;border:1px solid rgba(183,177,229,.15);background:rgba(11,15,37,.45);padding:18px;min-height:90px}
.mission-play h4{margin:0 0 10px;font-size:16px}
.mission-play p{color:#b7bfd7;font-size:12px;margin:4px 0 12px}
.mission-options{display:grid;gap:8px}
.mission-option,.scan-cell,.signal-key{border:1px solid rgba(174,165,231,.29);color:#f3eefe;background:#303453;border-radius:11px;padding:12px;text-align:left;font-size:12px;cursor:pointer}
.mission-option:hover:not(:disabled),.scan-cell:hover:not(:disabled),.signal-key:hover:not(:disabled){background:#4b4c79;border-color:#9fc4ba}
.mission-option:disabled,.scan-cell:disabled,.signal-key:disabled{opacity:.48;cursor:not-allowed}
.scan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:300px;gap:9px;margin:auto}
.scan-cell{font-size:30px;text-align:center;padding:12px}
.signal-preview{display:flex;justify-content:center;gap:11px;padding:15px 0;font-size:33px}
.signal-glyph{display:inline-grid;place-items:center;border-radius:12px;background:#292c56;width:54px;height:54px}
.signal-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.signal-key{text-align:center;font-size:24px;min-width:0}
.signal-entry{min-height:35px;text-align:center;color:#bbf5d0;font-size:27px;letter-spacing:7px;margin:7px 0 12px}
.mission-progress{margin:12px 0 0;color:#a5b4cf;font-size:11px}
.mission-hint{font-size:11px;color:var(--sub)}
@media(max-width:480px){.mission-panel{padding:18px}.mission-cards{gap:8px}.mission-card{padding:10px;min-height:126px}.signal-glyph{width:46px;height:46px;font-size:26px}}

/* v4: cosmic friends, private messaging, daily neighbor care */
.social-banner{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;padding:20px 23px;border:1px solid #9180d54f;border-radius:18px;background:radial-gradient(circle at 90% 0%,#55388e70,#171a3c 57%)}
.social-banner h3{font-size:23px;margin:5px 0 6px}.social-banner p:not(.eyebrow){font-size:12px;color:#d0c9e8;max-width:610px}.social-cosmic-icon{font-size:55px}
.social-layout{display:grid;grid-template-columns:minmax(300px,.95fr) minmax(320px,1.05fr);gap:16px;align-items:start}.social-column{display:grid;gap:16px}
.social-box{border:1px solid rgba(169,152,233,.19);background:rgba(18,26,52,.65);padding:18px;border-radius:17px;min-width:0}
.social-box h4{font-size:15px;margin:0 0 13px;color:#eee9ff}.social-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.social-search-form,.social-chat-form{display:flex;gap:9px;align-items:center}
.social-search-form input,.social-chat-form textarea{background:#1f2847;border:1px solid #666490;border-radius:11px;padding:11px;color:#f5f5ff;min-width:0;width:100%;font:inherit;font-size:12px}
.social-chat-form textarea{resize:vertical;min-height:62px}.social-search-results{margin:12px 0;display:grid;gap:8px}.social-result{padding:10px 8px;background:#293152;border-radius:11px;display:flex;justify-content:space-between;gap:10px;align-items:center}.social-result small{display:block;color:#acb4d2;font-size:10px}
.social-note,.social-chat-hint{display:block;margin-top:12px;color:#a8b5d0;font-size:10px;line-height:1.5}.social-friend{display:flex;gap:10px;padding:12px 4px;border-bottom:1px solid rgba(170,160,230,.13)}.social-friend:last-child{border-bottom:0}.social-avatar{display:grid;place-items:center;background:linear-gradient(145deg,#523f8d,#365b70);width:36px;height:36px;min-width:36px;border-radius:12px;font-size:19px}.social-friend-body{flex:1;min-width:0}.social-friend strong{display:block;font-size:13px}.social-friend small{display:block;color:#aab6d3;font-size:11px}.social-actions,.neighbor-care,.social-secondary{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.social-secondary{opacity:.76}.social-btn{background:#2a3158;border:1px solid #5e61886b;color:#dadff7;font-weight:650;font-size:10px;padding:7px 10px;border-radius:9px;cursor:pointer}.social-btn:hover{border-color:#b9a1f5;background:#3d3a69}.social-btn.positive{background:#4c3984;border-color:#8b70c7;color:#eee4ff}.social-btn.care{background:#1d4e49;border-color:#56887f;color:#c7ffec}.care-done{color:#8fe3b2!important}.social-chat{min-height:390px}.social-chat-header{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid #69608745}.social-chat-header strong{font-size:16px}.social-chat-header small{color:#a8b5d0;display:block;font-size:11px}.social-chat-placeholder,.social-empty{text-align:center;padding:60px 20px;color:#b7bbdf}.social-chat-placeholder>span,.social-empty>span{font-size:52px}.social-chat-placeholder h3,.social-empty h3{color:#f8f6ff;margin:14px 0 8px}.social-chat-placeholder p,.social-empty p{font-size:13px}.social-chat-history{height:290px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:16px 2px 14px}.social-message{align-self:flex-start;max-width:84%;background:#2b3457;border:1px solid #8c83c534;border-radius:14px 14px 14px 4px;padding:10px 12px}.social-message.mine{align-self:flex-end;background:#514781;border-color:#9e89cf48;border-radius:14px 14px 4px 14px}.social-message p{margin:0 0 4px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;color:#f1edff}.social-message small{font-size:9px;color:#b9c0d7}.neighbor-visit-care{border:1px solid rgba(101,199,148,.25);border-radius:12px;background:rgba(20,68,56,.2);margin:13px 0 4px;padding:12px}.neighbor-visit-care h4{font-size:13px;margin:0 0 4px}.neighbor-visit-care button{margin-top:6px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:800px){.social-layout{grid-template-columns:1fr}.social-banner{padding:15px}.social-banner h3{font-size:20px}.social-cosmic-icon{font-size:39px}}

/* ==========================================================================
   Creature parade on the planet view
   ========================================================================== */
.creature-parade { position: absolute; left: 14%; right: 14%; bottom: 64px; height: 60px; pointer-events: none; z-index: 1; }
.parade-creature { position: absolute; bottom: 0; width: 54px; height: 54px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); animation: creature-wander 8s ease-in-out infinite alternate; transition: filter .15s; }
.parade-creature:hover, .parade-creature:focus-visible { filter: drop-shadow(0 0 10px rgba(200, 180, 255, .8)); outline: none; }
.parade-creature svg { display: block; }
@keyframes creature-wander { from { transform: translateX(0); } to { transform: translateX(var(--dx, 24px)); } }
.species-art svg, .species-hero svg { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .parade-creature { animation: none; } }
@media (max-width: 760px) { .creature-parade { left: 4%; right: 4%; bottom: 56px; } .parade-creature { width: 42px; height: 42px; } .parade-creature svg { width: 42px; height: 42px; } }
@media (max-width: 480px) { .parade-creature:nth-child(n+5) { display: none; } }

/* ==========================================================================
   v5 · M1 Planet Arcade
   ========================================================================== */
/* Resource bars are buttons now (they open the Arcade filtered to that resource). */
button.resource-row { width: 100%; font: inherit; color: inherit; text-align: left; background: none; border: 0; border-radius: 12px; padding: 4px 6px; margin: 0 -6px; cursor: pointer; display: flex; align-items: center; gap: 11px; transition: background .15s; }
button.resource-row:hover, button.resource-row:focus-visible { background: rgba(173, 145, 255, .1); outline: none; }
button.resource-row .resource-text { flex: 1; }
.resource-earn { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #cbbcff; background: rgba(173, 145, 255, .14); flex-shrink: 0; }

/* °C / °F toggle on the temperature tile */
.metric-tile-label { display: flex; align-items: center; gap: 4px; }
.unit-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 8px; background: #20243f; padding: 1px; font-size: 9px; cursor: pointer; }
.unit-toggle span { padding: 2px 5px; border-radius: 6px; color: var(--soft); }
.unit-toggle span.on { background: #4a3f86; color: #fff; }
fieldset.settings-block { border: 0; margin: 0; }
fieldset.settings-block legend { padding: 0; margin-bottom: 4px; }

/* Arcade panel */
.arcade-panel { padding: 24px 25px; }
.arcade-free { font-size: 11px; color: var(--mint); border: 1px solid rgba(132, 223, 190, .3); border-radius: 20px; padding: 5px 10px; white-space: nowrap; }
.arcade-filters { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: thin; }
.arcade-filter { flex-shrink: 0; border: 1px solid var(--border); background: #22263f; color: #dcd6ff; border-radius: 20px; padding: 8px 12px; font-size: 11px; min-height: 36px; cursor: pointer; }
.arcade-filter.active { background: #4a3f86; border-color: #8f78e8; color: #fff; }
.arcade-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.arcade-passive { grid-column: 1 / -1; margin: 0 0 2px; font-size: 12px; color: #d9d2ff; background: rgba(74, 63, 134, .3); border: 1px solid rgba(173, 145, 255, .25); border-radius: 12px; padding: 10px 12px; }
.arcade-card { display: flex; flex-direction: column; gap: 5px; text-align: left; font: inherit; color: var(--ink); background: linear-gradient(160deg, rgba(55, 52, 104, .55), rgba(30, 36, 66, .75)); border: 1px solid var(--border); border-radius: 15px; padding: 13px; cursor: pointer; min-height: 120px; transition: transform .15s, border-color .15s; }
.arcade-card:hover, .arcade-card:focus-visible { transform: translateY(-2px); border-color: #9d86f2; outline: none; }
.arcade-card strong { font-size: 13px; }
.arcade-card-icon { font-size: 26px; }
.arcade-rewards { display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; align-items: center; }
.arcade-metric { font-size: 9px; color: var(--mint); background: rgba(132, 223, 190, .12); border-radius: 6px; padding: 2px 5px; }
.arcade-card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--sub); gap: 6px; }
.arcade-best { color: #ffe39a; font-weight: 700; }
.arcade-best.new { color: var(--mint); }

/* Arcade dialog */
.arcade-modal { width: min(96vw, 720px); max-height: min(94vh, 900px); }
.arcade-inner { padding: 22px 24px 24px; gap: 12px; }
.arcade-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.arcade-head h2 { margin: 0; font-size: 20px; }
.arcade-head .modal-close { position: static; }
.arcade-howto { background: rgba(43, 49, 83, .6); border-radius: 13px; padding: 13px 15px; font-size: 13px; line-height: 1.55; }
.arcade-howto.first { border: 1px solid rgba(132, 223, 190, .4); background: rgba(35, 85, 77, .3); }
.arcade-howto p { margin: 6px 0 0; }
.arcade-intro { display: grid; gap: 12px; }
.arcade-reward-line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; font-size: 13px; }
.arcade-difficulty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.arcade-difficulty button { border: 1px solid var(--border); background: #262941; color: var(--ink); border-radius: 12px; padding: 10px; font-weight: 700; min-height: 48px; display: grid; gap: 2px; cursor: pointer; }
.arcade-difficulty button small { font-weight: 400; color: var(--sub); font-size: 10px; }
.arcade-difficulty button.active { background: #4a3f86; border-color: #9d86f2; }
.arcade-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
.arcade-actions .button { min-height: 44px; }
.arcade-tip { margin: 0; font-size: 12px; color: var(--sub); }
.arcade-status { margin: 0 0 8px; font-size: 13px; }
.arcade-status .warn, .warn { color: #ffb3c4; }
.ok { color: var(--mint); }
.arcade-stage { display: grid; gap: 10px; }
.arcade-mini { display: flex; justify-content: flex-end; }

/* Shared tile grid: square, touch-sized cells */
.tile-grid { display: grid; gap: 5px; width: min(100%, 440px); margin: 0 auto; }
.tile { aspect-ratio: 1; min-width: 0; min-height: 40px; display: grid; place-items: center; border-radius: 9px; border: 1px solid rgba(174, 173, 248, .16); background: #262b4a; color: var(--ink); font-size: clamp(14px, 4vw, 22px); padding: 0; font-family: inherit; }
button.tile { cursor: pointer; }
button.tile:hover:not(:disabled), button.tile:focus-visible { border-color: #9d86f2; outline: none; }
.tile.marked { background: #4a3f86; border-color: #c2b2ff; box-shadow: inset 0 0 0 2px #c2b2ff; }
.tile.rock { background: #2a2c3b; opacity: .8; }
.tile.soil { font-weight: 800; color: #3d2a12; }
.tile.soil.s1 { background: #b9a37c; } .tile.soil.s2 { background: #a88c5c; } .tile.soil.s3 { background: #8e7343; } .tile.soil.s4 { background: #76592e; color: #f3e1c0; } .tile.soil.s5 { background: #5d421c; color: #f3e1c0; }
.tile.soil.planted { background: #2f6d4f; }
.tile.soil.clash { background: #7d2f45; box-shadow: inset 0 0 0 2px #ff9db4; }
.tile.pipe svg { width: 92%; height: 92%; }
.tile.pipe path { stroke: #7d84a8; stroke-width: 20; stroke-linecap: round; fill: none; }
.tile.pipe circle { fill: #7d84a8; }
.tile.pipe.wet path { stroke: #5ec8ff; } .tile.pipe.wet circle { fill: #5ec8ff; }
.pipe-wrap { display: flex; gap: 4px; align-items: stretch; justify-content: center; }
.pipe-wrap .tile-grid { margin: 0; width: min(100%, 400px); }
.pipe-edge { display: grid; grid-auto-rows: 1fr; align-items: center; font-size: 18px; width: 24px; }
.tile.sand { background: #b89a6a; border-color: #8f774f; }
.tile.dug { background: #3a3324; color: #ffe6a8; font-weight: 800; }
.tile.dug.bone { background: #6e5a2f; }
.tile.trail { background: #333a62; }
.tile.hazard { background: #2a2c3b; }
.tile.smog { background: #5b5368; }
.tile.clean { background: #29554a; }
.tile.lot { background: #2c3550; }
.expedition .tile { font-size: clamp(12px, 3.4vw, 20px); }

/* Clinic */
.clinic-patient { display: flex; gap: 14px; align-items: center; background: rgba(43, 49, 83, .5); border-radius: 14px; padding: 12px; }
.clinic-clues { margin: 6px 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.clinic-guide { font-size: 12px; color: var(--sub); }
.clinic-guide div { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 6px; }
.clinic-tray { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tray-item { display: grid; gap: 3px; justify-items: center; border: 1px solid var(--border); background: #262941; color: var(--ink); border-radius: 12px; padding: 10px 6px; font-size: 11px; min-height: 64px; cursor: pointer; }
.tray-item span { font-size: 22px; }
.tray-item.picked { background: #2f6d5c; border-color: var(--mint); }

/* Habitat */
.habitat-species { display: grid; gap: 7px; }
.habitat-card { display: flex; gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--ink); background: #262941; border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.habitat-card span { display: grid; gap: 2px; }
.habitat-card small { color: var(--sub); font-size: 11px; }
.habitat-card em { font-style: normal; font-size: 11px; color: #cbbcff; }
.habitat-card.selected { border-color: #9d86f2; background: #34305e; }
.habitat-homes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.habitat-home { display: grid; justify-items: center; gap: 2px; border: 1px solid var(--border); background: #22304a; color: var(--ink); border-radius: 12px; padding: 9px 5px; font-size: 11px; min-height: 58px; cursor: pointer; }
.habitat-home span { font-size: 22px; }

/* Signals */
.signal-pad { display: grid; gap: 10px; width: min(100%, 320px); margin: 0 auto; }
.signal-btn { aspect-ratio: 1; border-radius: 18px; border: 1px solid var(--border); background: #262b4a; color: #e7e0ff; font-size: 34px; cursor: pointer; transition: transform .1s, background .1s; }
.signal-btn.lit { background: #ffd36b; color: #2b2140; transform: scale(1.06); box-shadow: 0 0 28px #ffd36b88; }
.signal-btn:disabled { cursor: default; }
.signal-btn:not(:disabled):active { transform: scale(.94); }
.signal-entered { text-align: center; font-size: 22px; min-height: 30px; letter-spacing: 6px; }

/* Expedition */
.dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 44px); gap: 5px; justify-content: center; grid-template-areas: ". u ." "l x r" ". d ."; }
.dpad button { border: 1px solid var(--border); background: #2c2f52; color: var(--ink); border-radius: 10px; font-size: 16px; cursor: pointer; }
.dpad [data-move="U"] { grid-area: u; } .dpad [data-move="L"] { grid-area: l; } .dpad [data-undo] { grid-area: x; } .dpad [data-move="R"] { grid-area: r; } .dpad [data-move="D"] { grid-area: d; }
.bonus-pick { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 12px; }
.bonus-pick button { border: 1px solid var(--border); background: #262941; color: var(--ink); border-radius: 20px; padding: 8px 12px; min-height: 40px; cursor: pointer; }
.bonus-pick button.active { background: #2f6d5c; border-color: var(--mint); }

/* Observatory */
.orrery { width: min(100%, 260px); margin: 0 auto; display: block; }
.orrery-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.observatory-answer { display: grid; gap: 6px; font-size: 13px; justify-items: center; }
.observatory-answer span { display: flex; gap: 6px; }
.observatory-answer button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: #2c2f52; color: var(--ink); font-size: 18px; cursor: pointer; }
.observatory-answer input { width: 90px; text-align: center; font-size: 18px; border-radius: 10px; border: 1px solid #4b4b72; background: #252c48; color: var(--ink); }

/* Workshop */
.workshop-palette { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.workshop-palette button { border: 1px solid var(--border); background: #262941; color: var(--ink); border-radius: 20px; padding: 8px 12px; font-size: 12px; min-height: 40px; cursor: pointer; }
.workshop-palette button.active { background: #4a3f86; border-color: #9d86f2; }
.workshop-palette button:disabled { opacity: .45; }
.workshop-rules, .balance-rules { margin: 0; padding-left: 18px; font-size: 12px; color: var(--sub); line-height: 1.6; }
.workshop-rules .neg { color: #ffb3c4; }
.workshop-rules .fav { color: #ffe39a; }

/* Balance */
.balance-rows { display: grid; gap: 8px; }
.balance-row { display: flex; align-items: center; gap: 12px; background: #262941; border-radius: 12px; padding: 8px 12px; }
.balance-row > span:nth-child(2) { display: grid; flex: 1; }
.balance-row small { color: var(--sub); font-size: 11px; }
.balance-icon { font-size: 26px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: #2c2f52; color: var(--ink); font-size: 18px; cursor: pointer; }
.stepper b { min-width: 22px; text-align: center; font-size: 16px; }

/* Result */
.arcade-result { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 8px 0; }
.arcade-medal { font-size: 56px; animation: medal-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.arcade-result h3 { margin: 0; font-size: 22px; }
.arcade-gains { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.arcade-gains li { background: rgba(132, 223, 190, .14); color: #c8f5e4; border-radius: 20px; padding: 6px 11px; font-size: 13px; }
@keyframes medal-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 1120px) { .arcade-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .arcade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arcade-modal { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .arcade-inner { padding: max(14px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)); }
  .clinic-tray { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .habitat-homes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arcade-actions { position: sticky; bottom: 0; background: rgba(20, 25, 46, .96); padding-top: 8px; }
  .arcade-actions .button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .arcade-medal { animation: none; } .arcade-card, .signal-btn { transition: none; } }
/* Mobile fix: the scrollable filter chips must not widen the page (grid items default to min-width:auto). */
.main-column, .arcade-panel, .arcade-filters { min-width: 0; }
.arcade-filters { max-width: 100%; }