:root { --ink:#f8f4ea; --muted:#bbb8b2; --paper:#191d22; --panel:rgba(34,39,45,.78); --line:rgba(255,255,255,.12); --fire:#f4b75f; --red:#d8674c; --green:#7dc5a4; --shadow:0 24px 70px rgba(0,0,0,.28); font-family:Manrope,system-ui,sans-serif; color:var(--ink); background:#12161b; }
* { box-sizing:border-box; } html { min-height:100%; background:#12161b; } body { min-width:320px; min-height:100vh; margin:0; background:radial-gradient(circle at 85% 0%,#36424b 0,transparent 31rem),linear-gradient(135deg,#181e24,#101317 65%); } button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,canvas:focus-visible,a:focus-visible { outline:3px solid #f7ce8b; outline-offset:4px; } .app-shell { width:min(1180px,100%); min-height:100vh; margin:auto; padding:0 40px 54px; } .topbar { height:94px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); } .brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.04em; } .brand-mark { color:var(--fire); font-size:24px; } .save-status { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px; } .status-dot,.world-dot { width:8px; height:8px; display:inline-block; background:var(--green); border-radius:50%; box-shadow:0 0 0 4px rgba(125,197,164,.14); }
.screen { animation:rise .55s both; } .hidden { display:none !important; } .welcome-screen { min-height:calc(100vh - 148px); display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:45px; } .hero-copy { max-width:590px; padding:62px 0; } .eyebrow { margin:0 0 15px; color:var(--fire); letter-spacing:.14em; font-size:11px; font-weight:800; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:24px; letter-spacing:-.075em; line-height:.98; font-size:clamp(48px,7vw,84px); } h1 em { color:#d1d8d4; font-style:normal; } h2 { letter-spacing:-.06em; font-size:clamp(34px,5vw,57px); line-height:1.03; margin-bottom:15px; } h3 { margin-bottom:13px; letter-spacing:-.05em; font-size:25px; } .intro,.section-heading>p,.path-card>p,.result-screen>p:not(.eyebrow),.mission-card p,.world-card p,.role-card small { color:var(--muted); line-height:1.7; } .intro { max-width:540px; font-size:17px; } .button { min-height:48px; border-radius:999px; padding:0 21px; border:1px solid transparent; font-weight:800; letter-spacing:-.02em; transition:transform .2s,background .2s,border-color .2s; } .button:hover { transform:translateY(-2px); } .button-primary { color:#202128; background:var(--fire); } .button-primary:hover { background:#ffd08b; } .button-secondary { color:var(--ink); background:transparent; border-color:var(--line); } .button-secondary:hover { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06); } .supporting-text { color:#878a88; font-size:12px; margin:17px 0 0; } .hero-art { height:510px; position:relative; overflow:hidden; border-radius:32px; background:linear-gradient(165deg,#303b43,#1a2229 55%,#141719); box-shadow:var(--shadow); } .hero-art:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 50%,rgba(0,0,0,.3)); } .sun { position:absolute; width:180px; height:180px; border-radius:50%; background:#e9a95a; right:14%; top:16%; box-shadow:0 0 90px rgba(245,184,96,.34); } .mountain { position:absolute; bottom:-2px; width:110%; height:57%; background:#11191c; clip-path:polygon(0 100%,30% 26%,43% 55%,62% 5%,100% 100%); } .mountain-back { opacity:.65; bottom:50px; left:-16%; background:#233036; } .mountain-front { left:-4%; } .dragon { position:absolute; z-index:1; left:45%; top:37%; width:160px; height:100px; transform:rotate(-7deg); filter:drop-shadow(0 15px 8px rgba(0,0,0,.4)); } .dragon-body { position:absolute; width:79px; height:24px; left:45px; top:39px; background:#151719; border-radius:80% 30% 50% 40%; transform:rotate(6deg); } .dragon-body:after { content:""; position:absolute; right:-20px; top:7px; border-left:26px solid #151719; border-top:7px solid transparent; border-bottom:7px solid transparent; } .dragon-wing { position:absolute; top:10px; width:83px; height:61px; background:#151719; clip-path:polygon(100% 48%,0 0,26% 72%,37% 43%,49% 94%); } .wing-left { left:0; transform:rotate(13deg); } .wing-right { right:0; transform:scaleX(-1) rotate(18deg); } .dragon-tail { position:absolute; background:#151719; left:21px; top:49px; width:47px; height:9px; border-radius:100%; transform:rotate(160deg); } .hero-art p { position:absolute; z-index:2; bottom:20px; left:26px; font:10px 'DM Mono',monospace; letter-spacing:.18em; color:#cad0cc; }
.story-screen { max-width:820px; margin:10vh auto; } .progress-wrap { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; margin-bottom:30px; color:var(--muted); font:11px 'DM Mono',monospace; } .progress-wrap p { margin:0; } .progress-track { height:4px; overflow:hidden; border-radius:9px; background:var(--line); } .progress-track span { display:block; height:100%; width:33%; border-radius:inherit; background:var(--fire); transition:width .35s; } .story-card { padding:clamp(27px,6vw,66px); border:1px solid var(--line); border-radius:27px; background:linear-gradient(135deg,rgba(59,66,70,.8),rgba(27,31,36,.9)); box-shadow:var(--shadow); } .story-card>p:not(.eyebrow) { max-width:630px; margin-bottom:31px; font-size:19px; line-height:1.65; color:#d8d7d1; } .choice-group { display:grid; gap:11px; margin:0 0 25px; } .story-choice { text-align:left; min-height:62px; padding:14px 18px; border:1px solid var(--line); border-radius:13px; color:var(--ink); background:rgba(0,0,0,.09); transition:.2s; } .story-choice:hover,.story-choice.selected { border-color:var(--fire); background:rgba(244,183,95,.1); } .story-choice strong { display:block; font-size:14px; } .story-choice span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.path-screen,.role-screen,.tribe-screen,.result-screen,.dashboard-screen { padding:clamp(46px,9vh,104px) 0; } .section-heading { max-width:670px; margin:0 auto 41px; text-align:center; } .section-heading.compact { margin-bottom:33px; } .section-heading>p { margin-bottom:0; } .path-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .path-card { padding:34px; min-height:400px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:26px; background:var(--panel); } .public-card { background:linear-gradient(140deg,rgba(111,77,45,.38),rgba(38,37,35,.86)); border-color:rgba(244,183,95,.3); } .card-icon { width:46px; height:46px; display:grid; place-items:center; margin-bottom:38px; color:var(--fire); border:1px solid currentColor; border-radius:50%; font-size:22px; } .path-card ul { flex:1; padding:0; list-style:none; color:#e0dfda; font-size:13px; line-height:2; } .path-card li:before { content:'✓'; color:var(--green); padding-right:8px; } .path-card .button { align-self:flex-start; } .role-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; } .role-card { min-height:236px; padding:24px 19px; display:flex; text-align:left; flex-direction:column; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:19px; transition:.2s; } .role-card:hover,.role-card[aria-checked="true"] { transform:translateY(-4px); border-color:var(--fire); background:rgba(244,183,95,.11); } .role-card span { margin-bottom:auto; color:var(--fire); font-size:28px; } .role-card strong { font-size:18px; margin-bottom:6px; } .role-card small { font-size:12px; line-height:1.5; } .role-screen>#roleNext { display:block; margin:20px auto 0; } .form-feedback { min-height:22px; margin:14px 0; color:var(--green); text-align:center; font-size:13px; } .tribe-form { max-width:760px; margin:auto; padding:31px; border:1px solid var(--line); border-radius:24px; background:var(--panel); } .field { margin-bottom:33px; } label { display:block; margin-bottom:9px; font-weight:800; font-size:14px; } input[type="text"] { width:100%; min-height:52px; padding:0 15px; color:var(--ink); border:1px solid var(--line); border-radius:11px; background:#171b20; } input[type="text"]:focus { border-color:var(--fire); } .field-hint,.field-error { margin:8px 0 0; font-size:12px; line-height:1.5; } .field-hint { color:var(--muted); } .field-error { min-height:18px; color:#ff9b85; } .canvas-wrap { padding:11px; border:1px solid var(--line); border-radius:15px; background:#161b20; } canvas { display:block; width:100%; height:auto; touch-action:none; border-radius:9px; background:linear-gradient(135deg,#3f6171,#27404d); } .canvas-controls { display:flex; justify-content:space-between; align-items:center; padding:12px 4px 2px; } .text-button { padding:4px 0; border:0; color:var(--fire); background:none; font-weight:800; } .color-picker { display:flex; gap:7px; align-items:center; margin:0; color:var(--muted); font-size:12px; } input[type="color"] { width:25px; height:25px; border:0; padding:0; background:none; } .tribe-form>.button { display:block; margin:20px auto 0; } .result-screen { max-width:680px; margin:auto; text-align:center; } .result-orb { width:78px; height:78px; display:grid; place-items:center; margin:0 auto 28px; border-radius:50%; color:var(--fire); background:rgba(244,183,95,.12); border:1px solid rgba(244,183,95,.4); font-size:35px; } .result-screen>p:not(.eyebrow) { font-size:17px; } .next-card { margin:33px auto 27px; padding:19px 20px; text-align:left; border-left:3px solid var(--fire); border-radius:7px; background:var(--panel); } .next-card span { display:block; color:var(--fire); margin-bottom:5px; font:10px 'DM Mono',monospace; letter-spacing:.12em; } .next-card strong { font-size:15px; } .dashboard-top { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:32px; } .dashboard-top h2 { margin:0; } .dashboard-grid { display:grid; grid-template-columns:1.2fr .9fr .9fr; gap:17px; } .dashboard-grid article { min-height:218px; padding:25px; border:1px solid var(--line); border-radius:20px; background:var(--panel); } .mission-card { background:linear-gradient(145deg,rgba(77,67,49,.64),rgba(32,36,40,.92)) !important; } .mission-card h3 { font-size:28px; } .mission-card .text-button { margin-top:13px; } .profile-card { display:flex; flex-direction:column; } .profile-card strong { font-size:23px; } .profile-card>span { margin-top:3px; color:var(--muted); font-size:13px; } .flag-preview { width:76px; height:45px; margin-top:auto; overflow:hidden; border:1px solid var(--line); border-radius:5px; background:#294350; } .flag-preview img { display:block; width:100%; height:100%; object-fit:cover; } .world-card div { display:flex; gap:10px; align-items:center; margin:17px 0 12px; } .world-card p { font-size:13px; } .toast { position:fixed; left:50%; bottom:25px; z-index:3; max-width:calc(100% - 32px); padding:12px 17px; color:#172019; background:#bde6ce; border-radius:999px; font-size:13px; font-weight:800; transform:translate(-50%,100px); opacity:0; transition:.3s; } .toast.show { transform:translate(-50%,0); opacity:1; } .dashboard-screen>.reset-button { display:block; margin:32px auto 0; color:var(--muted); font-weight:500; }
@keyframes rise { from { opacity:0; transform:translateY(13px); } to { opacity:1; transform:translateY(0); } } @media (max-width:760px) { .app-shell { padding:0 20px 38px; } .topbar { height:75px; } .save-status { max-width:145px; text-align:right; line-height:1.35; } .welcome-screen { min-height:auto; display:flex; flex-direction:column; align-items:stretch; gap:0; } .hero-copy { padding:58px 0 35px; } .hero-art { height:330px; margin-bottom:30px; } .sun { width:115px; height:115px; } .path-grid,.dashboard-grid { grid-template-columns:1fr; } .path-card { min-height:0; } .path-card .card-icon { margin-bottom:25px; } .role-grid { grid-template-columns:1fr 1fr; } .role-card { min-height:184px; } .tribe-form { padding:19px; } .dashboard-top { align-items:start; flex-direction:column; } } @media (max-width:410px) { .brand { font-size:14px; } .save-status { font-size:10px; } .role-grid { grid-template-columns:1fr; } h1 { font-size:49px; } .story-card { padding:25px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }
.path-switcher { display:block; margin:24px auto 0; color:var(--muted); font-weight:500; }
.role-play-button { display:block; margin:14px auto 0; }
.solo-adventure { margin:28px 0 8px; text-align:left; } .solo-progress { margin:0 0 18px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--panel); } .solo-progress>div:first-child { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; } .solo-progress span { color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.1em; } .solo-progress strong { color:var(--fire); font-size:14px; } .solo-progress-track { height:6px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.12); } .solo-progress-track i { display:block; height:100%; background:var(--fire); border-radius:inherit; transition:width .3s; } .solo-quest-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .solo-quest-grid article { min-height:155px; padding:18px; border:1px solid var(--line); border-radius:15px; background:rgba(35,41,45,.72); } .solo-quest-grid span { color:var(--fire); font:11px 'DM Mono',monospace; } .solo-quest-grid h3 { margin:13px 0 8px; font-size:17px; } .solo-quest-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; } .solo-actions { display:flex; justify-content:center; gap:13px; flex-wrap:wrap; margin:21px 0 0; } @media (max-width:760px) { .solo-quest-grid { grid-template-columns:1fr; } .solo-quest-grid article { min-height:0; } }
.solo-story-card { margin:0 0 17px; padding:25px; border:1px solid rgba(244,183,95,.32); border-radius:18px; background:linear-gradient(135deg,rgba(84,70,46,.52),rgba(31,37,42,.86)); } .solo-story-card h3 { margin-bottom:10px; font-size:25px; } .solo-story-card>p:not(.eyebrow) { max-width:720px; margin-bottom:0; color:#dad8d0; line-height:1.7; } .solo-story-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; } .solo-story-choices .story-choice { min-height:72px; } @media (max-width:560px) { .solo-story-choices { grid-template-columns:1fr; } }
.mission-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px; } .mission-actions .text-button { margin:0; } .game-screen { padding:42px 0 76px; } .game-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:23px; } .game-heading h2 { margin:0; font-size:clamp(32px,4vw,48px); } .health-track { height:8px; margin:0 0 6px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.12); } .health-track i { display:block; width:100%; height:100%; background:var(--green); transition:width .15s; } .enemy-health i { background:var(--red); } .game-viewport { position:relative; border-radius:20px; box-shadow:var(--shadow); } #gameCanvas { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:20px; background:#263c38; touch-action:none; cursor:crosshair; }
.hud-panel,.hud-health,.hud-chip,.hud-resources,.hud-hotbar .slot { border:1px solid var(--line); border-radius:13px; background:rgba(14,18,22,.66); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.hud-bottom { position:absolute; z-index:3; left:0; right:0; bottom:18px; display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:12px; padding:0 18px; pointer-events:none; } .hud-bottom>* { pointer-events:auto; }
.hud-health { justify-self:start; width:212px; padding:12px 15px 13px; } .hud-health>span { display:block; margin-bottom:9px; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.11em; } .hud-health .health-track { height:11px; margin-bottom:7px; } .hud-health strong { font-size:15px; letter-spacing:-.02em; }
.hud-top { position:absolute; z-index:3; top:16px; left:18px; display:flex; gap:9px; } .hud-chip { min-width:118px; padding:9px 13px 10px; } .hud-chip span { display:block; margin-bottom:6px; color:var(--muted); font:9px 'DM Mono',monospace; letter-spacing:.11em; } .hud-chip .health-track { height:6px; margin-bottom:5px; } .hud-chip strong { font-size:13px; }
.hud-resources { position:absolute; z-index:3; top:16px; right:18px; min-width:132px; padding:10px 13px; } .hud-resources p { display:flex; gap:8px; align-items:center; margin:0 0 6px; color:var(--muted); font-size:11px; } .hud-resources p:last-child { margin-bottom:0; } .hud-resources strong { margin-left:auto; color:var(--ink); font:12px 'DM Mono',monospace; } .gear-line { border-top:1px solid var(--line); padding-top:6px; margin-top:2px; } .gear-line.is-hidden { display:none; } .gear-line strong { letter-spacing:.04em; }
.res-dot { width:9px; height:9px; border-radius:3px; } .res-dot.wood { background:#ae7441; } .res-dot.ore { background:#aeb8c1; } .res-dot.stone { background:#91e7df; box-shadow:0 0 8px rgba(145,231,223,.7); }
.hud-hotbar { justify-self:center; display:flex; gap:9px; } .hud-hotbar .slot { position:relative; width:78px; padding:11px 4px 9px; display:grid; gap:4px; justify-items:center; color:var(--ink); transition:transform .15s,border-color .15s,background .15s; } .hud-hotbar .slot:hover { border-color:rgba(255,255,255,.34); } .hud-hotbar .slot.is-active { border-color:var(--fire); background:rgba(244,183,95,.17); transform:translateY(-5px); } .slot-key { position:absolute; top:3px; left:7px; color:var(--muted); font:9px 'DM Mono',monospace; } .slot-icon { font-size:22px; line-height:1; } .slot-name { font-size:11px; font-weight:800; letter-spacing:-.02em; }
.game-viewport:fullscreen { width:100vw; height:100vh; border-radius:0; box-shadow:none; background:#0d1014; } .game-viewport:fullscreen #gameCanvas { width:100%; height:100%; border:0; border-radius:0; } .game-viewport:fullscreen .lock-overlay,.game-viewport:fullscreen .run-overlay { border-radius:0; }
.mode-screen { padding:clamp(46px,9vh,104px) 0; } .mode-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; } .mode-card { display:flex; flex-direction:column; padding:26px 23px; border:1px solid var(--line); border-radius:22px; background:var(--panel); } .mode-card.danger-card { background:linear-gradient(145deg,rgba(112,60,48,.42),rgba(32,34,38,.9)); border-color:rgba(216,103,76,.34); } .mode-icon { width:42px; height:42px; display:grid; place-items:center; margin-bottom:26px; color:var(--fire); border:1px solid currentColor; border-radius:50%; font-size:19px; } .mode-card h3 { font-size:21px; margin-bottom:10px; } .mode-card>p:not(.eyebrow) { color:var(--muted); font-size:13px; line-height:1.65; } .mode-card ul { flex:1; margin:0 0 20px; padding:0; list-style:none; color:#e0dfda; font-size:12px; line-height:1.95; } .mode-card li:before { content:'✓'; color:var(--green); padding-right:7px; } .mode-screen>.text-button { display:block; margin:30px auto 0; color:var(--muted); font-weight:500; }
.mode-footer { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:30px; } .mode-footer .text-button { color:var(--muted); font-weight:500; } .mode-footer .text-button:first-child { color:var(--fire); font-weight:800; }
.city-screen { padding:clamp(46px,9vh,104px) 0; } .city-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; align-items:start; } .city-panel { padding:27px 25px; border:1px solid var(--line); border-radius:22px; background:var(--panel); } .city-panel h3 { margin-bottom:16px; font-size:22px; } .city-note { margin:0 0 16px; color:var(--muted); font-size:12px; line-height:1.6; }
.city-stock { display:grid; gap:9px; margin-bottom:20px; } .city-stock p { display:flex; gap:10px; align-items:center; margin:0; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.16); color:var(--muted); font-size:13px; } .city-stock strong { margin-left:auto; color:var(--ink); font:13px 'DM Mono',monospace; } .city-stock .coins { border-color:rgba(244,183,95,.4); background:rgba(244,183,95,.1); } .city-stock .coins strong { color:var(--fire); }
.city-actions { display:flex; gap:9px; flex-wrap:wrap; } .city-actions .button { min-height:42px; font-size:13px; } .city-actions .button[disabled] { opacity:.4; }
.city-shop { display:grid; gap:9px; } .shop-row { display:flex; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:rgba(0,0,0,.16); } .shop-row span:first-child { font-size:19px; } .shop-row div { flex:1; } .shop-row strong { display:block; font-size:14px; } .shop-row small { color:var(--muted); font-size:11px; } .shop-row button { min-height:38px; padding:0 15px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:12px; font-weight:800; } .shop-row button:hover:not([disabled]) { border-color:var(--fire); background:rgba(244,183,95,.13); } .shop-row button[disabled] { opacity:.38; }
@media (max-width:760px) { .city-grid { grid-template-columns:1fr; } }
.objective-chip { min-width:186px; } .objective-chip.is-hidden { display:none; }
.hud-sound { position:absolute; z-index:4; right:18px; bottom:18px; display:flex; gap:7px; align-items:center; padding:9px 13px; color:var(--ink); font-size:11px; font-weight:800; } .hud-sound .sound-icon { color:var(--fire); font-size:14px; } .hud-sound[aria-pressed="false"] { color:var(--muted); } .hud-sound[aria-pressed="false"] .sound-icon { color:var(--muted); opacity:.55; }
.bag-overlay { position:absolute; z-index:6; inset:0; display:grid; place-content:center; padding:16px; background:rgba(8,11,14,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-radius:20px; overflow:auto; } .bag-overlay.is-hidden { display:none; }
.bag-panel { width:min(760px,100%); padding:20px 22px 18px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(150deg,rgba(52,58,64,.92),rgba(24,28,32,.96)); }
.bag-head { display:flex; gap:14px; align-items:baseline; justify-content:space-between; flex-wrap:wrap; margin-bottom:16px; } .bag-head strong { font-size:22px; letter-spacing:-.04em; } .bag-head span { color:var(--muted); font-size:11px; }
.bag-body { display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:start; } .bag-label { margin:0 0 8px; color:var(--muted); font:10px 'DM Mono',monospace; letter-spacing:.11em; } .bag-label strong { color:var(--green); }
.slot-box { width:46px; height:46px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:9px; background:rgba(0,0,0,.28); color:var(--ink); font-size:19px; position:relative; transition:.14s; } .slot-box:hover { border-color:rgba(255,255,255,.35); } .slot-box.filled { background:rgba(244,183,95,.12); border-color:rgba(244,183,95,.4); } .slot-box.picked { border-color:var(--fire); box-shadow:0 0 0 2px rgba(244,183,95,.3); } .slot-box b { position:absolute; right:3px; bottom:1px; font:9px 'DM Mono',monospace; color:var(--ink); } .slot-box small { position:absolute; left:3px; top:2px; font:8px 'DM Mono',monospace; color:var(--muted); }
.slot-box.rare { border-color:rgba(124,178,255,.55); background:rgba(124,178,255,.12); } .slot-box.legendary { border-color:rgba(255,196,92,.7); background:rgba(255,196,92,.16); }
.armour-slots { display:grid; gap:7px; margin-bottom:14px; } .craft-grid,.bag-grid { display:grid; grid-template-columns:repeat(3,46px); gap:7px; }
.craft-out { display:flex; gap:11px; align-items:center; margin-top:13px; } .craft-out>span { color:var(--muted); font-size:17px; } .craft-result { flex:1; min-height:46px; display:flex; gap:9px; align-items:center; padding:6px 11px; border:1px dashed var(--line); border-radius:10px; color:var(--muted); font-size:12px; } .craft-result.ready { border-style:solid; border-color:var(--green); color:var(--ink); } .craft-out .button { min-height:40px; padding:0 17px; font-size:13px; }
#clearGrid { margin-top:9px; }
.bag-hint { margin:10px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.bag-recipes { display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; } .bag-recipes b { color:var(--ink); }
@media (max-width:720px) { .bag-body { grid-template-columns:1fr; } .bag-panel { padding:15px; } .craft-grid,.bag-grid { grid-template-columns:repeat(3,42px); } .slot-box { width:42px; height:42px; font-size:17px; } }
.run-overlay { position:absolute; z-index:5; inset:0; display:grid; gap:9px; place-content:center; justify-items:center; padding:26px; text-align:center; border-radius:20px; background:rgba(8,11,14,.8); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); } .run-overlay.is-hidden { display:none; } .run-overlay .eyebrow { margin:0; color:var(--red); } .run-overlay.is-win .eyebrow { color:var(--green); } .run-overlay strong { font-size:clamp(30px,4vw,44px); letter-spacing:-.05em; line-height:1.05; } .run-overlay p:not(.eyebrow) { max-width:430px; margin:2px 0 0; color:var(--muted); font-size:13px; line-height:1.75; } .run-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px; }
.lock-overlay { position:absolute; z-index:2; inset:0; display:grid; gap:11px; place-content:center; padding:26px; text-align:center; border:0; border-radius:20px; color:var(--ink); background:rgba(9,12,15,.66); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .lock-overlay strong { font-size:clamp(24px,3vw,32px); letter-spacing:-.05em; } .lock-overlay span { max-width:440px; margin:0 auto; color:var(--muted); font-size:12px; line-height:1.85; } .lock-overlay.is-hidden { display:none; } .game-status { min-height:22px; margin:14px 0 9px; text-align:center; color:#d5d7cf; font-size:13px; } .touch-controls { display:flex; justify-content:center; align-items:center; gap:42px; margin:14px 0; } .touch-actions { display:flex; gap:10px; align-items:center; } .d-pad { display:grid; grid-template-columns:repeat(3,42px); gap:5px; } .d-pad button { width:42px; height:37px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--panel); font-weight:800; } .d-pad button:nth-child(1) { grid-column:2; } .d-pad button:nth-child(2) { grid-column:1; grid-row:2; } .d-pad button:nth-child(3) { grid-column:2; grid-row:2; } .d-pad button:nth-child(4) { grid-column:3; grid-row:2; } .game-note { margin:0; color:var(--muted); text-align:center; font-size:12px; } @media (max-width:760px) { .game-heading { align-items:start; flex-direction:column; } .touch-controls { gap:22px; } .mode-grid { grid-template-columns:1fr 1fr; } .objective-chip { min-width:150px; } .hud-sound .sound-text { display:none; } .hud-sound { padding:8px 10px; right:9px; bottom:9px; } .run-overlay .run-actions .button { min-height:42px; font-size:13px; } .hud-bottom { bottom:9px; padding:0 9px; gap:8px; } .hud-health { width:128px; padding:7px 10px 8px; } .hud-health>span { margin-bottom:6px; } .hud-health .health-track { height:8px; margin-bottom:5px; } .hud-health strong { font-size:12px; } .hud-top { top:10px; left:10px; gap:6px; } .hud-chip { min-width:88px; padding:7px 9px 8px; } .hud-resources { top:10px; right:10px; min-width:112px; padding:8px 10px; } .hud-hotbar { gap:5px; } .hud-hotbar .slot { width:40px; padding:7px 2px 6px; } .hud-hotbar .slot.is-active { transform:translateY(-3px); } .slot-icon { font-size:17px; } .slot-name { display:none; } .slot-key { top:2px; left:4px; } .lock-overlay span { font-size:11px; line-height:1.7; } }
/* Below this width the three bottom items no longer fit as grid tracks, so the sound
   toggle leaves the flow and the bar reserves a lane for it on the right. */
@media (max-width:420px) { .hud-health { width:100px; } .hud-chip { min-width:74px; } .hud-resources { min-width:98px; } .hud-hotbar { gap:5px; } .hud-hotbar .slot { width:32px; } .hud-bottom { gap:6px; }
/* At this size the bottom row is full and the chip row is too tall to sit above; the sound
   toggle takes the top-right corner and the resource panel yields it. */
.hud-resources { display:none; } .hud-sound { right:9px; top:9px; left:auto; bottom:auto; padding:7px 9px; } }
@media (max-width:560px) { .mode-grid { grid-template-columns:1fr; } .mode-card { padding:21px 19px; } .mode-icon { margin-bottom:18px; } }
/* Narrow screens cannot fit the chip row and the resource panel side by side. The objective
   chip already reports what those panels would say, so it takes the space when a mode has one. */
@media (max-width:620px) { .hud-top .hud-chip:nth-child(2) { display:none; } .hud-top.has-objective .hud-chip:nth-child(1) { display:none; } .hud-top.has-objective~.hud-resources { display:none; } .objective-chip { min-width:0; } }
@media (max-width:360px) { .hud-health { width:82px; padding:6px 8px 7px; } .hud-health strong { font-size:11px; } .hud-chip { min-width:64px; } .hud-resources { min-width:88px; } .hud-hotbar { gap:4px; } .hud-hotbar .slot { width:29px; } .slot-icon { font-size:15px; } }

/* ---------------------------------------------------------------- Algebra Flight */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.algebra-mode-card { border-color:rgba(244,183,95,.34); }
.algebra-hub { padding:46px 0 20px; } .algebra-hub-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:22px; align-items:start; }
.algebra-panel { padding:30px 32px 34px; border:1px solid var(--line); border-radius:24px; background:var(--panel); box-shadow:var(--shadow); }
.algebra-stats { display:grid; grid-template-columns:1fr 1fr; gap:2px 26px; margin-bottom:26px; }
.algebra-stats p { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin:0; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.algebra-stats span { color:var(--muted); font-size:13px; } .algebra-stats strong { font-size:19px; letter-spacing:-.04em; }
.algebra-stats .coins strong { color:var(--fire); }
.algebra-hub-actions { display:flex; flex-wrap:wrap; gap:12px; }
.algebra-note { margin:18px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.algebra-rules { margin:0; padding-left:20px; color:var(--muted); line-height:1.7; } .algebra-rules li { margin-bottom:13px; } .algebra-rules strong { color:var(--ink); }
.algebra-rules kbd { display:inline-block; min-width:22px; margin-right:3px; padding:1px 5px; border:1px solid var(--line); border-radius:5px; background:rgba(255,255,255,.06); color:var(--ink); font:600 12px DM Mono,ui-monospace,monospace; text-align:center; }

.algebra-game-screen { padding:34px 0 10px; }
.algebra-viewport { position:relative; aspect-ratio:16/10; max-height:74vh; margin:auto; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#0e1216; box-shadow:var(--shadow); }
#algebraCanvas { display:block; width:100%; height:100%; touch-action:none; }
.algebra-hud-top,.algebra-hud-bottom { position:absolute; left:0; right:0; display:flex; gap:9px; padding:12px 14px; pointer-events:none; }
.algebra-hud-top { top:0; } .algebra-hud-bottom { bottom:0; }
.algebra-chip { display:flex; align-items:center; gap:9px; padding:7px 13px; border:1px solid var(--line); border-radius:12px; background:rgba(12,16,20,.74); backdrop-filter:blur(7px); }
.algebra-chip.grow { flex:1; } .algebra-chip span { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.12em; }
.algebra-chip strong { font-size:14px; letter-spacing:-.03em; white-space:nowrap; }
.algebra-track { flex:1; min-width:60px; height:7px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.algebra-track i { display:block; width:0%; height:100%; border-radius:99px; transition:width .18s linear; }
.algebra-track.xp i { background:var(--fire); } .algebra-track.hp i { background:var(--green); }

.algebra-lock,.algebra-overlay { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:11px; padding:34px; border:0; text-align:center; background:rgba(9,12,15,.9); backdrop-filter:blur(4px); color:var(--ink); }
.algebra-lock strong,.algebra-overlay strong { font-size:clamp(24px,3.4vw,36px); letter-spacing:-.05em; }
.algebra-lock span,.algebra-overlay p:not(.eyebrow) { max-width:58ch; color:var(--muted); font-size:14px; line-height:1.65; }
.algebra-overlay-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:8px; }

.equation-layer { position:absolute; inset:0; z-index:5; display:flex; justify-content:center; align-items:center; padding:20px; background:rgba(9,12,15,.86); backdrop-filter:blur(6px); overflow-y:auto; }
.equation-card { width:min(520px,100%); padding:26px 30px 30px; border:1px solid var(--line); border-radius:22px; background:#171c22; box-shadow:var(--shadow); }
.equation-card h3 { margin-bottom:16px; font-size:22px; }
.equation-display { margin:0 0 20px; padding:20px 16px; border:1px solid rgba(244,183,95,.3); border-radius:14px; background:rgba(244,183,95,.08); color:var(--fire); font:400 clamp(26px,4.4vw,38px) DM Mono,ui-monospace,monospace; letter-spacing:.02em; text-align:center; }
.equation-field { margin-bottom:14px; } .equation-field label { display:block; margin-bottom:7px; font-weight:700; font-size:14px; }
.equation-field input { width:100%; height:52px; padding:0 16px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.3); color:var(--ink); font:400 22px DM Mono,ui-monospace,monospace; }
.equation-field input[aria-invalid="true"] { border-color:var(--red); }
.equation-field .field-hint { margin:7px 0 0; font-size:12px; }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:14px; }
.keypad button { height:44px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.05); color:var(--ink); font:600 17px DM Mono,ui-monospace,monospace; }
.keypad button:hover { background:rgba(255,255,255,.11); }
.equation-feedback { min-height:20px; margin:0 0 14px; font-size:13px; line-height:1.55; color:var(--muted); }
.equation-feedback.is-good { color:var(--green); } .equation-feedback.is-bad { color:var(--red); } .equation-feedback.is-warning { color:var(--fire); }
.equation-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.equation-steps { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.equation-steps ol { margin:0; padding-left:20px; color:var(--muted); font-size:13.5px; line-height:1.75; } .equation-steps li { margin-bottom:5px; }

.upgrade-intro { margin-bottom:18px; color:var(--muted); font-size:14px; }
.upgrade-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.upgrade-card { display:flex; flex-direction:column; gap:5px; padding:17px 16px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.04); color:var(--ink); text-align:left; transition:border-color .2s,background .2s,transform .2s; }
.upgrade-card:hover { transform:translateY(-2px); border-color:rgba(244,183,95,.55); background:rgba(244,183,95,.09); }
.upgrade-icon { font-size:22px; } .upgrade-card strong { font-size:15px; letter-spacing:-.03em; } .upgrade-card small { color:var(--muted); font-size:12.5px; line-height:1.5; }

.duel-intro { margin-bottom:16px; color:var(--muted); font-size:13.5px; line-height:1.6; }
.duel-score { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.duel-score p { display:flex; flex-direction:column; gap:2px; margin:0; text-align:center; }
.duel-score span { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.12em; } .duel-score strong { font-size:26px; letter-spacing:-.05em; }
.duel-timer { flex:1; height:8px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.duel-timer i { display:block; width:100%; height:100%; border-radius:99px; background:var(--fire); }

@media (max-width:900px) { .algebra-hub-grid { grid-template-columns:1fr; } .algebra-stats { grid-template-columns:1fr; } }
@media (max-width:560px) {
  .algebra-viewport { aspect-ratio:3/4; max-height:66vh; }
  .algebra-hud-top,.algebra-hud-bottom { flex-wrap:wrap; padding:9px; gap:6px; }
  .algebra-chip { padding:5px 9px; gap:6px; } .algebra-chip strong { font-size:12px; }
  .equation-card { padding:20px 18px 24px; } .upgrade-grid { grid-template-columns:1fr; }
  .algebra-panel { padding:24px 20px 26px; }
}
@media (prefers-reduced-motion:reduce) { .algebra-track i { transition:none; } .upgrade-card:hover,.button:hover { transform:none; } }