:root{--bg: #221d10;--bg-soft: #2a2416;--surface: #f8f9fa;--surface-muted: #efe5cf;--text: #f8f7f5;--text-dark: #231d10;--muted: #cbb990;--line: #493d22;--primary: #f5be3d;--primary-shadow: #b3861d;--accent: #ef476f;--success: #06d6a0;--radius-sm: 14px;--radius-md: 22px;--radius-lg: 28px;--shadow-3d: 0 8px 0 rgba(0, 0, 0, .35);--font-display: "Trebuchet MS", "Segoe UI", sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:var(--font-display);color:var(--text);background:radial-gradient(circle at top,rgba(245,190,61,.16),transparent 30%),radial-gradient(circle at bottom right,rgba(6,214,160,.08),transparent 24%),linear-gradient(180deg,#302714 0%,var(--bg) 45%,#171105 100%);background-attachment:fixed}button,input{font:inherit}a{color:inherit;text-decoration:none}.screen{min-height:100vh;position:relative}.screen:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(circle at center,black 45%,transparent 95%);mask-image:radial-gradient(circle at center,black 45%,transparent 95%);opacity:.35}.loading-screen{display:grid;place-items:center}.eyebrow{margin:0 0 .5rem;color:var(--primary);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase}.page-shell{padding:1.5rem}.page-shell--with-menu{padding-bottom:calc(7rem + env(safe-area-inset-bottom,0px))}.top-nav,.page-header,.play-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.top-nav{padding:1rem 1.25rem;border:4px solid var(--line);border-radius:var(--radius-md);background:#231d10e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 40px #00000038;position:sticky;top:.75rem;z-index:10}.top-nav__brand,.play-header__title{display:flex;align-items:center;gap:.85rem}.top-nav__brand--compact{min-width:0}.top-nav__name{font-size:1.1rem;font-weight:800}.top-nav__context{display:flex;justify-content:flex-end;min-width:0}.top-nav__context-chip{max-width:min(44vw,28rem);padding:.55rem .85rem;border-radius:999px;background:#ffffff0f;border:2px solid rgba(255,255,255,.08);color:var(--muted);font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avatar-badge,.avatar-picker{width:4.5rem;height:4.5rem;display:grid;place-items:center;border-radius:999px;border:4px solid var(--line);box-shadow:var(--shadow-3d)}.avatar-badge{width:3rem;height:3rem}.avatar-badge span,.avatar-picker span{font-size:1.9rem}.avatar-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.avatar-picker{background:var(--surface);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;filter:grayscale(1)}.avatar-picker.is-selected,.avatar-picker:hover{transform:translateY(-4px) scale(1.04);filter:grayscale(0)}.welcome-screen{display:grid;place-items:center;padding:1rem}.welcome-card,.panel-block,.modal-card,.tutorial-panel,.stats-panel{position:relative;border:4px solid var(--line);border-radius:var(--radius-lg);background:#2a2416f5;box-shadow:var(--shadow-3d);overflow:hidden}.welcome-card:after,.panel-block:after,.modal-card:after,.tutorial-panel:after,.stats-panel:after{content:"";position:absolute;inset:auto -20% -50% auto;width:160px;height:160px;border-radius:999px;background:radial-gradient(circle,rgba(245,190,61,.18),transparent 70%);pointer-events:none}.welcome-card{width:min(100%,560px);padding:2rem;display:flex;flex-direction:column;gap:1.5rem;overflow:hidden}.hero-glow{position:absolute;inset:0 auto auto 50%;width:70%;height:10rem;transform:translate(-50%);border-radius:999px;background:#f5be3d38;filter:blur(42px)}.welcome-card__header,.page-header,.profile-block{position:relative;z-index:1}.welcome-card h1,.page-header h1,.tutorial-panel h1,.play-header h1{margin:0;font-size:clamp(2rem,4vw,3.8rem);line-height:.95}.welcome-card__header p:last-child,.page-header p,.tutorial-panel>p:last-of-type{margin:.5rem 0 0;color:var(--muted);max-width:42rem}.input-shell{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border:3px solid var(--line);border-radius:var(--radius-md);background:#110d06b8}.input-shell input{width:100%;border:0;background:transparent;color:var(--text);outline:none}.helper-copy{margin:0;color:var(--muted);font-size:.92rem}.welcome-badges{display:flex;flex-wrap:wrap;gap:.6rem}.welcome-badge{padding:.45rem .75rem;border-radius:999px;background:#ffffff0f;border:2px solid rgba(255,255,255,.08);color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}.arcade-button{min-height:3.6rem;border:3px solid transparent;border-radius:18px;padding:.9rem 1.25rem;font-weight:800;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease,opacity .2s ease;box-shadow:0 6px #00000052}.arcade-button:hover:not(:disabled){transform:translateY(-2px)}.arcade-button:active{transform:translateY(4px);box-shadow:0 2px #0000004d}.arcade-button{-webkit-tap-highlight-color:transparent}.arcade-button:disabled{opacity:.45;cursor:not-allowed}.arcade-button--primary{background:var(--primary);color:var(--text-dark);border-color:var(--primary-shadow)}.arcade-button--secondary{background:var(--surface);color:var(--text-dark);border-color:#ffffff3d}.arcade-button--ghost{background:transparent;color:var(--text);border-color:#ffffff29}.arcade-button--wide{width:100%}.welcome-cta{animation:ctaGlow 1.8s ease-in-out infinite}.button-row{display:flex;flex-wrap:wrap;gap:.75rem}.locale-switcher{display:flex;flex-wrap:wrap;gap:.45rem}.locale-chip,.inline-link,.star-pill,.stat-chip{border:2px solid rgba(255,255,255,.14);border-radius:999px;padding:.45rem .8rem;background:#ffffff0f}.locale-chip{color:var(--text);cursor:pointer}.locale-chip.is-active{background:var(--primary);color:var(--text-dark)}.page-header{margin:1.5rem 0}.bottom-nav{position:fixed;left:50%;bottom:max(.9rem,env(safe-area-inset-bottom,0px));transform:translate(-50%);z-index:25;width:min(calc(100% - 1.5rem),34rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;padding:.55rem;border:3px solid var(--line);border-radius:24px;background:#120d05f0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 44px #00000059}.bottom-nav__item{min-height:3.8rem;display:grid;place-items:center;gap:.15rem;padding:.55rem .25rem;border-radius:18px;border:2px solid transparent;color:var(--muted);font-size:.82rem;font-weight:800;transition:transform .16s ease,background .16s ease,color .16s ease}.bottom-nav__item.is-active{background:var(--primary);color:var(--text-dark);border-color:#231d102e;box-shadow:0 6px #b3861db3}.bottom-nav__item:active{transform:translateY(2px)}.bottom-nav__icon{font-size:1.1rem;line-height:1}.campaign-map,.training-layout,.dashboard-grid{display:grid;gap:1rem}.campaign-map{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.biome-panel{padding:1.25rem;border:4px solid var(--line);border-radius:var(--radius-lg);min-height:18rem;background:linear-gradient(180deg,#ffd16624,#0000002e);position:relative;overflow:hidden}.biome-panel--volcano{background:linear-gradient(180deg,#ef476f2e,#0003)}.biome-panel--space{background:linear-gradient(180deg,#6f42c133,#00000040)}.node-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.25rem;align-items:flex-start}.map-node-shell{display:grid;justify-items:center;gap:.5rem}.map-node{width:4.5rem;height:4.5rem;display:grid;place-items:center;border-radius:999px;border:4px solid var(--line);background:#3a3220;color:var(--text);cursor:pointer;box-shadow:var(--shadow-3d);transition:transform .18s ease,filter .18s ease}.map-node small{font-size:.72rem}.map-node.status-available{background:var(--primary);color:var(--text-dark);animation:nodeBounce 1.8s ease-in-out infinite}.map-node.status-completed,.map-node.status-perfect{background:var(--success);color:var(--text-dark)}.map-node.status-locked{opacity:.5;cursor:default}.map-node:hover:not(.status-locked){transform:translateY(-4px) scale(1.04)}.map-node:active:not(.status-locked){transform:translateY(1px) scale(.98)}.map-node-label{margin:0;max-width:6rem;text-align:center;font-size:.76rem;color:var(--muted)}.map-node-label.status-perfect,.map-node-label.status-completed{color:var(--success)}.map-node-label.status-available{color:var(--primary)}.panel-block{padding:1.25rem}.training-layout{grid-template-columns:1.1fr 1.1fr .9fr}.selector-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.selector-grid--modes{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.selector-chip{text-align:left;padding:1rem;border-radius:var(--radius-md);border:3px solid rgba(255,255,255,.12);background:#ffffff0d;color:var(--text);cursor:pointer}.selector-chip strong,.detail-chip strong,.stat-card strong,.timeline-item strong{display:block;font-size:1.2rem}.selector-chip.is-active{background:var(--primary);color:var(--text-dark)}.preview-block{display:flex;flex-direction:column;justify-content:space-between;gap:1rem}.preview-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;padding:.9rem;border-radius:var(--radius-md);background:#0000003d;border:3px solid rgba(255,255,255,.08)}.preview-board__cell{aspect-ratio:1;display:grid;place-items:center;border-radius:14px;background:var(--surface);color:var(--text-dark);font-weight:900;box-shadow:0 5px #b3861dcc}.preview-board__cell.is-empty{background:#ffffff14;box-shadow:inset 0 0 0 2px #ffffff14}.selector-summary{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;color:var(--primary);font-weight:700}.detail-grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.detail-chip,.stat-card,.coach-card,.reward-card,.resume-panel{padding:1rem;border-radius:var(--radius-md);border:3px solid rgba(255,255,255,.12);background:#0000002e}.resume-sheet{position:fixed;left:.75rem;right:.75rem;bottom:max(.75rem,env(safe-area-inset-bottom,0px));z-index:20;border:4px solid var(--line);border-radius:26px;background:linear-gradient(180deg,#f5be3d1f,#0000001a),#2a2416fa;box-shadow:0 22px 48px #00000059;animation:sheetRise .28s ease-out}.resume-sheet__handle{width:4rem;height:.35rem;margin:.7rem auto 0;border-radius:999px;background:#ffffff2e}.resume-sheet__body{padding:.85rem 1rem 1rem;display:grid;gap:1rem}.sheet-handle{width:4rem;height:.35rem;margin:.75rem auto 0;border-radius:999px;background:#ffffff2e}.sheet-body{display:grid;gap:1rem;padding:.85rem 1rem 1rem}.tutorial-topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}.tutorial-topbar__stats{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:flex-end}.resume-sheet__stats,.resume-sheet__actions,.play-hud{display:flex;gap:.75rem}.resume-sheet__stats,.play-hud{flex-wrap:wrap}.resume-sheet__actions .arcade-button,.resume-sheet__primary{flex:1 1 0}.gameplay-screen{padding:1.5rem}.play-layout,.tutorial-layout{display:grid;gap:1.25rem;margin-top:1rem;grid-template-columns:320px minmax(0,1fr)}.stats-panel,.tutorial-panel{padding:1.2rem}.stats-panel{display:grid;gap:.9rem;align-content:start}.stat-card--compact{min-width:0;flex:1 1 0;padding:.85rem 1rem}.stat-card--compact span{display:block;margin-bottom:.2rem;font-size:.8rem;color:var(--muted)}.control-row--compact .arcade-button{flex:1 1 0}.control-row{display:flex;gap:.75rem}.board-stage{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-start;justify-content:center;align-content:flex-start}.board-stage--tutorial{padding-top:.25rem}.board-stage--main{border:4px solid rgba(255,255,255,.12);border-radius:30px;padding:1rem;background:#0000002e}.board-grid{width:min(100%,680px);display:grid;gap:.6rem}.tile{aspect-ratio:1;border:3px solid rgba(255,255,255,.15);border-radius:18px;background:var(--surface);color:var(--text-dark);font-size:clamp(1.4rem,3vw,2.6rem);font-weight:900;box-shadow:0 6px #b3861de6;cursor:default;transition:transform .12s ease,filter .12s ease,outline-color .12s ease}.tile.is-movable{cursor:pointer}.tile.is-movable:hover{transform:translateY(-2px);filter:brightness(1.06)}.tile.is-movable:active{transform:translateY(1px) scale(.98)}.tile.is-highlighted{outline:4px solid var(--accent);animation:tilePulse 1.5s ease-in-out infinite}.tile--empty{background:#ffffff0f;box-shadow:inset 0 0 0 3px #ffffff14}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:1rem;background:#0000008f}.modal-card{width:min(100%,460px);padding:1.5rem;animation:sheetRise .28s ease-out}.victory-card{background:radial-gradient(circle at top,rgba(245,190,61,.16),transparent 35%),#2a2416f5}.modal-card--sheet .button-row{margin-top:.25rem}.map-detail-sheet .arcade-button,.victory-card .arcade-button{width:100%}.victory-grid{margin-bottom:1rem}.victory-primary{min-width:12rem}.star-burst{margin:1rem 0;color:var(--primary);font-size:2rem}.dashboard-grid{grid-template-columns:1fr 1fr;align-items:start}.profile-block{min-height:230px}.profile-header,.settings-row,.profile-meta{display:flex;gap:1rem}.profile-header,.settings-row{align-items:center;justify-content:space-between}.profile-avatar{flex-shrink:0}.profile-meta{flex-wrap:wrap;margin-top:1rem}.settings-stack{display:grid;gap:1rem;margin-top:1rem}.settings-row{padding:1rem;border-radius:var(--radius-md);border:3px solid rgba(255,255,255,.12);background:#00000029}.settings-row p{margin:.35rem 0 0;color:var(--muted)}.title-ribbon{display:inline-flex;margin:1rem 0;padding:.6rem 1rem;border-radius:999px;background:var(--primary);color:var(--text-dark);font-weight:800}.timeline,.progress-list{display:grid;gap:.75rem}.requirement-box{margin-top:1rem;padding:1rem;border-radius:18px;background:#ffffff0d;border:2px solid rgba(255,255,255,.08)}.requirement-box h3{margin:0 0 .75rem;color:var(--primary);font-size:1rem}.requirement-box p{margin:.35rem 0;color:var(--muted)}.tutorial-step-list{display:grid;gap:.65rem}.tutorial-step-pill{display:flex;align-items:center;gap:.9rem;padding:.8rem .9rem;border-radius:18px;border:2px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--muted)}.tutorial-step-pill span{width:1.9rem;height:1.9rem;display:grid;place-items:center;border-radius:999px;background:#ffffff14;font-weight:800}.tutorial-step-pill strong{font-size:.95rem}.tutorial-step-pill.is-active{border-color:#f5be3d66;background:#f5be3d1f;color:var(--text)}.tutorial-panel--drawer .sheet-handle{display:none}.tutorial-step-pill.is-complete span{background:var(--success);color:var(--text-dark)}.timeline-item{padding:.9rem 1rem;border-left:4px solid var(--primary);border-radius:0 var(--radius-md) var(--radius-md) 0;background:#ffffff0a}.timeline-item.is-current{background:#f5be3d29}.progress-item__meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.45rem}.progress-strip__bar{width:100%;height:.9rem;overflow:hidden;border-radius:999px;background:#ffffff14}.progress-strip__bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--success),var(--primary))}.next-title{margin-top:1rem;color:var(--primary);font-weight:700}@keyframes nodeBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes tilePulse{0%,to{box-shadow:0 0 #ef476f1a}50%{box-shadow:0 0 0 8px #ef476f24}}@keyframes ctaGlow{0%,to{box-shadow:0 6px #00000052,0 0 #f5be3d00}50%{box-shadow:0 6px #00000052,0 0 24px #f5be3d61}}@keyframes sheetRise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1024px){.training-layout,.tutorial-layout,.play-layout,.dashboard-grid{grid-template-columns:1fr}}@media(max-width:720px){.top-nav,.page-header,.play-header{flex-direction:column;align-items:stretch}.top-nav{top:.5rem}.page-shell,.gameplay-screen{padding:1rem}.welcome-screen{padding-bottom:calc(14rem + env(safe-area-inset-bottom,0px));align-items:start}.page-shell--with-menu{padding-bottom:calc(7.5rem + env(safe-area-inset-bottom,0px))}.page-header .arcade-button,.control-row .arcade-button,.button-row .arcade-button{width:100%}.play-header{gap:.75rem}.tutorial-topbar{position:sticky;top:.5rem;z-index:9;margin-bottom:.75rem;padding:.8rem .9rem;align-items:stretch;flex-direction:column;border:3px solid var(--line);border-radius:22px;background:#2a2416f0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tutorial-topbar h1{margin:0;font-size:clamp(1.6rem,7vw,2.2rem)}.tutorial-topbar__stats{justify-content:flex-start}.play-header h1{font-size:clamp(1.6rem,7vw,2.2rem)}.stats-panel{position:sticky;top:.75rem;z-index:8;padding:.8rem;border-radius:22px;background:#2a2416f0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tutorial-panel--drawer{position:fixed;left:.5rem;right:.5rem;bottom:max(.5rem,env(safe-area-inset-bottom,0px));z-index:20;padding:0;border-radius:24px;background:linear-gradient(180deg,#f5be3d1f,#00000014),#2a2416fa;box-shadow:0 22px 48px #00000059;animation:sheetRise .28s ease-out}.tutorial-panel--drawer .tutorial-panel__handle{display:block}.tutorial-panel--drawer .sheet-body{max-height:min(45vh,28rem);overflow-y:auto;padding:.75rem .85rem .95rem}.tutorial-panel--drawer .button-row{display:grid;grid-template-columns:1fr 1fr}.tutorial-layout{margin-top:0;padding-bottom:calc(18rem + env(safe-area-inset-bottom,0px))}.play-hud{flex-wrap:nowrap}.stat-card--compact{padding:.7rem .8rem}.stat-card--compact strong{font-size:1.05rem}.control-row--compact{gap:.55rem}.control-row--compact .arcade-button{min-height:3.1rem;padding:.7rem .8rem;font-size:.92rem}.board-stage--main{padding:.7rem;border-radius:24px}.board-grid{gap:.45rem}.node-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.35rem;scrollbar-width:none}.node-row::-webkit-scrollbar{display:none}.map-node-shell{min-width:5rem}.profile-header,.settings-row{align-items:flex-start;flex-direction:column}.bottom-nav{width:calc(100% - 1rem);bottom:max(.55rem,env(safe-area-inset-bottom,0px))}.bottom-nav__item{min-height:4rem;font-size:.76rem;transition:transform .14s ease,background .14s ease,color .14s ease}.bottom-nav__item:active{transform:translateY(2px) scale(.98)}.resume-sheet{left:.5rem;right:.5rem;bottom:max(.5rem,env(safe-area-inset-bottom,0px));border-radius:24px}.resume-sheet__body,.sheet-body{padding:.75rem .85rem .9rem;gap:.85rem}.resume-sheet__stats,.resume-sheet__actions{display:grid;grid-template-columns:1fr 1fr}.resume-sheet__actions .arcade-button:last-child{grid-column:1 / -1}.modal-backdrop{align-items:end;padding:.75rem .75rem calc(.75rem + env(safe-area-inset-bottom,0px))}.modal-card{width:100%;max-width:none;border-bottom-left-radius:18px;border-bottom-right-radius:18px}.modal-card--sheet{padding:0}.modal-card--sheet .button-row{display:grid;grid-template-columns:1fr}.top-nav__context{justify-content:flex-start}.top-nav__context-chip{max-width:100%}}