/* Neutral main pages; each workshop keeps its own palette. */
@keyframes factory-light { to { background-position: 80% 60%; } }
.career-card { width:100%; display:flex; align-items:center; gap:.7rem; text-align:left; background:linear-gradient(135deg,#fff,#f0f2fa); border:1px solid #dbe1ee; border-radius:1.4rem; padding:.5rem .9rem; margin:0 0 1rem; color:var(--ink); }
.career-helmet { display:block; width:6rem; height:auto; flex-shrink:0; filter:drop-shadow(0 .2rem .25rem #23335412); }
.career-copy { display:grid; gap:.25rem; min-width:0; }
.career-copy small,.career-kicker { font-size:.5rem; letter-spacing:.09em; color:var(--muted); font-weight:700; }
.career-copy strong { font-size:1.08rem; line-height:1.15; }
.career-copy > span { font-size:.63rem; }.career-copy .career-next { font-size:.53rem; color:var(--muted); }
.career-chevron { margin-left:auto; color:var(--muted); font-size:1rem; }
.game-card .workshop-lock { margin-top:.4rem; font-size:.55rem; color:#364b77; font-weight:600; }
.game-card.is-locked { cursor:default; border-color:#d5dae6; }
.game-card.is-locked::before { opacity:.23; }
.game-card.is-locked .game-arrow { background:transparent; }
.game-arrow svg { width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:1.8; }
.game-card[data-game="shift"]::before { background:linear-gradient(130deg,#a4d7ff,#758eea,#bde9fa); }
.game-card[data-game="falling"]::before { background:linear-gradient(130deg,#a3c6fa,#b3a5eb,#899eef); }
.game-card[data-game="duel"]::before { background:linear-gradient(130deg,#c1a1ed,#edb6db,#c6b4f5); }
.game-card[data-game="conveyor"]::before { background:linear-gradient(130deg,#97cfe9,#9edbb7,#d6eaa4); }
.career-promotion { width:min(100%,32rem); max-width:100%; height:100%; max-height:100dvh; margin:auto; padding:calc(var(--app-safe-top) + 1.4rem) 1.5rem calc(var(--app-safe-bottom) + 1rem); border:0; color:var(--ink); background:radial-gradient(ellipse at 50% 25%,#e2e7ff,transparent 60%),#f8f9fd; overflow-y:auto; animation:dialog-enter .3s ease-out; }
.career-promotion::backdrop { background:#10141c88; }
.career-promotion-body { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:100%; text-align:center; gap:.8rem; }
.promotion-helmet { width:100%; }.promotion-helmet .career-helmet { width:min(15rem,80%); margin:0 auto; }
.career-promotion h1 { font-size:2.1rem; margin:0; letter-spacing:-.04em; line-height:1.1; }
.career-promotion h2 { font-size:1.55rem; margin:.3rem 0; }
.career-promotion p { margin:0; font-size:.8rem; line-height:1.5; }
.career-promotion .career-kicker { font-size:.55rem; }
.career-promotion .promotion-earned { font-size:.65rem; color:var(--muted); }
.career-promotion .primary-button { width:100%; margin-top:.5rem; min-height:3rem; }
.career-promotion .primary-button:disabled { opacity:.4; }
.career-later { background:none; border:0; font-size:.65rem; color:var(--muted); padding:.6rem; }
.career-promotion .career-note { color:var(--muted); font-size:.65rem; }.career-promotion .career-error { color:#b53a4b; }
.game-screen[data-game="shift"] { isolation:isolate; background:linear-gradient(140deg,#ebf7ff,#e8edfc,#e1f5fd); }
.game-screen[data-game="shift"]::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 10% 20%,#8fcfff66,transparent 55%),radial-gradient(ellipse at 90% 70%,#758ce955,transparent 55%),radial-gradient(ellipse at 30% 100%,#a9e6fc88,transparent 50%); background-size:160% 150%; animation:factory-light 12s ease-in-out infinite alternate; }
.factory-backdrop svg > rect:nth-of-type(2),.factory-backdrop svg > rect:nth-of-type(3) { animation:factory-glow 13s ease-in-out infinite alternate; }
@keyframes factory-glow { from { opacity:.65; } to { opacity:1; transform:translateY(24px); } }
.game-screen[data-game="falling"] { background:linear-gradient(#e6edff,#f2edff); }
.game-screen[data-game="duel"] { background:linear-gradient(#eee7ff,#f8e9f3); }
.game-screen[data-game="conveyor"] { background:linear-gradient(#e6f5f1,#e5f3fc,#e8f3d8); }
@media (max-width:359px) { .career-helmet { width:4.8rem; }.career-copy strong { font-size:.95rem; }.career-promotion { padding-left:1rem; padding-right:1rem; } }
@media (prefers-reduced-motion:reduce) { .app-shell,.game-screen::before,.factory-backdrop svg > rect,.career-promotion { animation:none!important; } }
/* The factory's main pages always keep a neutral background. */
body { background:var(--paper); }
.app-shell { background:var(--paper); animation:none; }
.app-shell .bottom-nav { background:rgba(244,246,250,.97); }
.career-card { background:linear-gradient(135deg,#fff,#f0f2fa); }
.factory-scene { --factory-color:#67AEEE; align-self:center; aspect-ratio:1; }
.factory-hero { position:absolute; left:-10%; bottom:0; width:120%; max-width:none; height:auto; clip-path:none; }
.factory-scene::before { display:none; }
.factory-scene .factory-letter { left:87%; bottom:70%; color:var(--factory-color); }
.factory-scene::after { content:''; position:absolute; left:11%; bottom:17%; width:58%; height:8%; border-radius:.35rem; background:var(--factory-color); opacity:.08; animation:factory-window 4.2s ease-in-out infinite alternate; }
@keyframes factory-window { to { opacity:.28; } }
@media (prefers-reduced-motion:reduce) { .factory-scene::after,.factory-scene .factory-letter { animation:none; } }

.game-screen[data-game="shift"].has-backdrop::before { display:none; }

/* Rank ladder: the same live config and helmet artwork as the home card. */
.career-ladder { max-height:calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 2rem); overflow-y:auto; padding:1.15rem; overscroll-behavior:contain; }
.career-ladder > .dialog-close { display:grid; place-items:center; width:2.5rem; height:2.5rem; border:1px solid var(--line); background:var(--surface); border-radius:50%; font-size:1.5rem; }
.career-ladder > .dialog-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:50%; }
.career-ladder > .career-kicker { margin:.6rem 0 0; font-size:.55rem; }
.career-ladder h2 { margin:.6rem 0; }
.career-ladder .career-ladder-intro { font-size:.67rem; line-height:1.55; }
.career-ranks { display:grid; gap:.65rem; list-style:none; padding:0; margin:1rem 0; }
.career-rank { display:flex; gap:.5rem; align-items:center; border:1px solid var(--line); border-radius:1rem; padding:.7rem .5rem; background:#f6f7fc; }
.career-rank.is-current { border-color:var(--accent); background:#edf1ff; }
.career-rank .career-helmet { width:4.5rem; flex-shrink:0; }
.career-rank > div { min-width:0; }
.career-rank strong { display:block; font-size:.85rem; line-height:1.25; }
.career-rank-threshold { display:block; font-size:.6rem; color:var(--muted); margin-top:.25rem; }
.career-rank p { font-size:.6rem; line-height:1.4; margin:.4rem 0; }
.career-rank-status { display:inline-block; font-size:.55rem; font-weight:600; color:#42578d; }
.career-rank.is-current .career-rank-status { color:#355bd0; }
.career-ladder .primary-button,.career-ladder .outline-button { width:100%; min-height:2.8rem; font-size:.7rem; }
@media (max-width:359px) { .career-ladder { padding:.9rem; }.career-rank .career-helmet { width:3.6rem; }.career-rank strong { font-size:.78rem; } }

.practice-label { display:block; margin-top:.18rem; font-size:.5rem; font-weight:500; color:var(--muted); }

.rules-ranks { display:grid;gap:0;list-style:none;margin:.65rem 0;padding:0; }
.rules-list .rules-ranks > li { display:flex;align-items:center;gap:.5rem;padding:.5rem 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none; }
.rules-list .rules-ranks > li:last-child { border-bottom:0; }
.rules-ranks .career-helmet { width:2.6rem;filter:none; }
.rules-ranks li > div { min-width:0; }
.rules-ranks .rules-rank-threshold,.rules-ranks .rules-rank-game { display:block;font-size:.55rem;line-height:1.45;margin-top:.15rem; }
.rules-rank-threshold { color:var(--muted); }
.rules-rank-game { color:var(--ink); }

/* Shared brand-blue task panels with white lettering. */
.game-screen { --task-color:var(--accent); }
.game-screen :is(.shift-task,.polar-task,.duel-task) {
  background:var(--task-color);color:var(--surface);
  transition:background-color .25s ease,color .25s ease;
}
.game-screen .duel-progress i {background:rgba(252,253,255,.28);}
.game-screen .duel-progress i.is-current {background:rgba(252,253,255,.6);}
.game-screen .duel-progress i.is-done {background:var(--surface);}
@media(prefers-reduced-motion:reduce) {
  .game-screen :is(.shift-task,.polar-task,.duel-task) {transition:none;}
}

/* Planned workshops are visible at every rank, without a game launch action. */
.upcoming-workshop { grid-template-columns:1.5rem minmax(0,1fr) 3rem; cursor:default; }
.upcoming-workshop::before { background:linear-gradient(130deg,color-mix(in srgb,var(--workshop-color),white 65%),color-mix(in srgb,var(--workshop-color),white 28%),color-mix(in srgb,var(--workshop-color),white 72%)); }
.upcoming-workshop[data-rank="industry_legend"]::before { background:linear-gradient(130deg,#ffe7f6,var(--workshop-color),#b6eee4); }
.upcoming-workshop .career-helmet { width:3rem; }
.upcoming-workshop .game-card-copy > span { color:var(--ink); line-height:1.5; }
.upcoming-workshop .workshop-lock { opacity:.7; }
.upcoming-workshop:hover,.upcoming-workshop:active { transform:none; }
.career-rank.is-current { border-color:var(--level-color);background:color-mix(in srgb,var(--level-color) 13%,white); }
.career-rank.is-current .career-rank-status { color:color-mix(in srgb,var(--level-color) 55%,#10141C); }
.career-promotion { background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--promotion-color,#A7B7F2) 24%,white),transparent 65%),#f8f9fd; }
@media (max-width:359px) { .upcoming-workshop { grid-template-columns:1rem minmax(0,1fr) 2.3rem; }.upcoming-workshop .career-helmet { width:2.3rem; } }

/* Every locked workshop uses the helmet of the rank that opens it. */
.game-card.is-locked { grid-template-columns:1.5rem minmax(0,1fr) 3rem; }
.game-card.is-locked .game-arrow .career-helmet { width:3rem;height:auto;stroke:none; }
@media (max-width:359px) {
  .game-card.is-locked { grid-template-columns:1rem minmax(0,1fr) 2.3rem; }
  .game-card.is-locked .game-arrow .career-helmet { width:2.3rem; }
}