:root {
    --factory-navy: #17233d;
    --factory-blue: #3157d5;
    --factory-yellow: #ffd65c;
    --factory-floor: #dfe9f3;
    --factory-tile: #edf4fa;
}

.factory-welcome-art {
    color: #fff;
    background: linear-gradient(145deg, #3157d5, #213b94);
}

.factory-welcome-icons {
    font-size: clamp(2rem, 5vw, 4rem);
}

.factory-welcome-icons span {
    display: inline-grid;
    width: 1.35em;
    height: 1.35em;
    place-items: center;
    border-radius: .3em;
    background: var(--factory-yellow);
    animation: factory-spin 3s linear infinite;
}

.factory-intro-scene {
    display: flex;
    max-width: 44rem;
    align-items: center;
    justify-content: space-around;
    margin: 1.5rem auto;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background: linear-gradient(180deg, #dcecff 0 66%, #aebccc 66%);
    font-size: clamp(2.2rem, 7vw, 5rem);
}

.factory-intro-bot { animation: factory-bob .8s ease-in-out infinite alternate; }
.factory-intro-dialogue { max-width: 48rem; }

.factory-game {
    position: relative;
    color: var(--factory-navy);
    user-select: none;
}

.factory-hud {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(16rem, 1.2fr) minmax(7rem, .45fr);
    align-items: stretch;
    gap: .75rem;
    margin-bottom: .75rem;
}

.factory-title-block,
.factory-order,
.factory-score {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    border: 2px solid #d5e0ef;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 20px rgba(23, 35, 61, .08);
}

.factory-title-block small,
.factory-order small,
.factory-score small,
.factory-hand-panel small {
    display: block;
    color: #667085;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.factory-title-block strong,
.factory-order strong,
.factory-score strong { display: block; font-size: 1.25rem; }
.factory-order { justify-content: center; border-color: #efb400; background: #fff8d8; text-align: center; }
.factory-order strong { font-size: clamp(1.25rem, 2.5vw, 1.7rem); }
.factory-order.is-success { animation: factory-order-success .5s ease 2; }
.factory-score { justify-content: center; text-align: center; }
.factory-score strong { color: var(--factory-blue); font-size: 1.8rem; }

.factory-live-dot {
    width: .85rem;
    height: .85rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #20ad62;
    box-shadow: 0 0 0 .35rem rgba(32, 173, 98, .15);
}

.factory-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: .8rem;
    align-items: start;
}

.factory-arena-wrap,
.factory-sidebar {
    min-width: 0;
}

.factory-arena {
    position: relative;
    display: grid;
    width: 100%;
    max-height: calc(100vh - 13rem);
    aspect-ratio: var(--factory-cols) / var(--factory-rows);
    grid-template-columns: repeat(var(--factory-cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--factory-rows), minmax(0, 1fr));
    overflow: hidden;
    border: 5px solid var(--factory-navy);
    border-radius: 1.25rem;
    background: var(--factory-floor);
    box-shadow: 0 18px 36px rgba(23, 35, 61, .16);
}

.factory-tile {
    position: relative;
    min-width: 0;
    border-right: 1px solid #c6d2df;
    border-bottom: 1px solid #c6d2df;
    background-color: var(--factory-tile);
    background-image: radial-gradient(circle, rgba(23, 35, 61, .08) 1px, transparent 1px);
    background-size: 10px 10px;
}

.factory-tile:nth-child(odd) { background-color: #e5eef7; }
.factory-tile.has-station { background: #6e7c8d; }

.factory-station {
    position: absolute;
    inset: 7%;
    display: grid;
    place-items: center;
    border: 3px solid #425067;
    border-radius: .65rem;
    background: linear-gradient(145deg, #fbfdff, #bdc9d6);
    box-shadow: inset 0 -6px 0 rgba(23,35,61,.14), 0 5px 7px rgba(23,35,61,.18);
    text-align: center;
    z-index: 1;
}

.factory-station-icon { font-size: clamp(1.35rem, 3.7vw, 2.5rem); line-height: 1; }
.factory-station small {
    position: absolute;
    right: 3%;
    bottom: 2%;
    left: 3%;
    overflow: hidden;
    font-size: clamp(.48rem, .8vw, .72rem);
    font-weight: 900;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.station-delivery .factory-station { border-color: #11854b; background: #d8ffe9; }
.station-trash .factory-station { border-color: #687384; background: #e7ebef; }
.station-blender .factory-station { border-color: #c07a00; background: #fff1bd; }
.station-fridge .factory-station { border-color: #2787b9; background: linear-gradient(145deg, #effbff, #bcecff); }
.factory-fridge-door { position: absolute; top: 4%; right: 4%; display: flex; gap: .12rem; }
.factory-fridge-door span { display: grid; width: 1rem; height: 1rem; place-items: center; border-radius: .2rem; background: rgba(255,255,255,.85); font-size: .62rem; }
.factory-station.is-cold-flash { animation: factory-cold-flash .45s ease; }
.station-delivery .factory-station.is-ready { animation: factory-delivery-ready .65s ease-in-out infinite alternate; }
.factory-station.is-blending .factory-station-icon { animation: factory-shake .12s linear infinite; }

.factory-blender-fill {
    position: absolute;
    top: 4%;
    right: 4%;
    max-width: 90%;
    overflow: hidden;
    font-size: clamp(.55rem, 1vw, .8rem);
    white-space: nowrap;
}

.factory-player {
    --player-x: 4;
    --player-y: 3;
    position: absolute;
    top: calc((var(--player-y) + .5) * (100% / var(--factory-rows)));
    left: calc((var(--player-x) + .5) * (100% / var(--factory-cols)));
    display: grid;
    width: calc(78% / var(--factory-cols));
    aspect-ratio: 1;
    place-items: center;
    border: 3px solid #2346ad;
    border-radius: 28%;
    background: var(--factory-yellow);
    box-shadow: 0 5px 0 rgba(23, 35, 61, .28);
    transform: translate(-50%, -50%);
    transition: top .1s ease, left .1s ease;
    z-index: 4;
}

.factory-player.is-walking .factory-bot { animation: factory-step .18s ease; }
.factory-bot { font-size: clamp(1.3rem, 4vw, 2.7rem); line-height: 1; }
.factory-direction {
    position: absolute;
    right: -.45rem;
    bottom: -.42rem;
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: var(--factory-blue);
    font-size: .7rem;
}

.factory-held {
    position: absolute;
    top: -45%;
    font-size: clamp(1.15rem, 3vw, 2rem);
    filter: drop-shadow(0 3px 2px rgba(0,0,0,.25));
    animation: factory-bob .55s ease-in-out infinite alternate;
}

.factory-action-hint {
    --hint-x: 4;
    --hint-y: 3;
    position: absolute;
    top: calc((var(--hint-y) + .5) * (100% / var(--factory-rows)));
    left: calc((var(--hint-x) + .5) * (100% / var(--factory-cols)));
    padding: .18rem .38rem;
    border: 2px solid #fff;
    border-radius: .45rem;
    color: #fff;
    background: #17233d;
    font-size: clamp(.48rem, .8vw, .65rem);
    font-weight: 900;
    transform: translate(-50%, 92%);
    z-index: 5;
}

.factory-message {
    min-height: 3rem;
    margin-top: .65rem;
    padding: .7rem 1rem;
    border: 2px solid #d6e0ed;
    border-radius: 1rem;
    background: #fff;
    font-weight: 750;
    text-align: center;
}

.factory-message.is-success { border-color: #6dd29a; color: #075a30; background: #e8fff2; }
.factory-message.is-warning { border-color: #efc34a; color: #694900; background: #fff9dc; }
.factory-message.is-danger { border-color: #f099a1; color: #8b1520; background: #fff0f1; }
.factory-message.is-working { border-color: #83a5ff; color: #1f429f; background: #edf3ff; }

.factory-sidebar { display: grid; gap: .65rem; }
.factory-panel {
    padding: .8rem;
    border: 2px solid #d8e2ef;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 7px 16px rgba(23,35,61,.06);
}

.factory-hand-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.factory-hand-panel strong { display: block; }
.factory-hand-icon { font-size: 2.2rem; }
.factory-blender-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.factory-blender-slots span {
    display: grid;
    min-height: 2.7rem;
    place-items: center;
    border: 2px dashed #bcc9d8;
    border-radius: .7rem;
    background: #f6f9fc;
    font-size: 1.45rem;
}

.factory-key-guide { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.factory-key-guide > span { padding: .45rem; border-radius: .6rem; background: #f3f6fa; text-align: center; }
.factory-key-guide kbd { display: inline-block; }
.factory-key-guide small { display: block; margin-top: .25rem; }
.factory-recipe-panel { display: grid; gap: .3rem; }
.factory-recipe-panel div { padding: .28rem .45rem; border-radius: .5rem; background: #f4f7fb; font-weight: 800; text-align: center; }
.factory-save-state { color: #667085; font-size: .78rem; text-align: center; }

.factory-dpad { display: none; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-top: .65rem; }
.factory-dpad button {
    min-height: 2.8rem;
    border: 2px solid #8fa2bb;
    border-radius: .65rem;
    background: #fff;
    font-weight: 900;
}
.factory-dpad button:first-child { grid-column: 2; }
.factory-dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.factory-dpad .is-action { grid-column: 2; grid-row: 2; border-color: #2449bb; color: #fff; background: var(--factory-blue); font-size: .7rem; }
.factory-dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }
.factory-dpad button:last-child { grid-column: 2; grid-row: 3; }

.factory-celebration {
    position: fixed;
    top: 50%;
    left: 50%;
    display: grid;
    min-width: 17rem;
    place-items: center;
    padding: 1.5rem 2.5rem;
    border: 5px solid #fff;
    border-radius: 1.5rem;
    color: #173520;
    background: var(--factory-yellow);
    box-shadow: 0 25px 80px rgba(23,35,61,.38);
    transform: translate(-50%, -50%);
    z-index: 100;
}
.factory-celebration span { font-size: 3rem; font-weight: 1000; }
.factory-celebration.is-showing { animation: factory-celebrate .45s cubic-bezier(.2,1.5,.5,1); }

@keyframes factory-step { 50% { transform: translateY(-12%); } }
@keyframes factory-bob { to { transform: translateY(-10%); } }
@keyframes factory-spin { to { transform: rotate(360deg); } }
@keyframes factory-shake { 50% { transform: translateX(4%); } }
@keyframes factory-order-success { 50% { transform: scale(1.035); background: #bff5d3; } }
@keyframes factory-celebrate { from { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-5deg); } }

@media (max-width: 991.98px) {
    .factory-layout { grid-template-columns: 1fr; }
    .factory-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .factory-controls-panel { grid-row: span 2; }
    .factory-dpad { display: grid; }
    .factory-arena { max-height: none; }
}

@media (max-width: 575.98px) {
    .factory-hud { grid-template-columns: 1fr 5.5rem; }
    .factory-title-block { display: none; }
    .factory-order { min-width: 0; }
    .factory-order strong { font-size: 1rem; }
    .factory-score strong { font-size: 1.35rem; }
    .factory-sidebar { grid-template-columns: 1fr; }
    .factory-station { inset: 3%; border-width: 2px; }
    .factory-station small { display: none; }
    .factory-player { border-width: 2px; }
    .factory-message { font-size: .85rem; }
}

@media (min-width: 992px) and (max-height: 760px) {
    .factory-hud > * { min-height: 3.8rem; padding-block: .4rem; }
    .factory-arena { max-height: calc(100vh - 11.5rem); }
    .factory-message { min-height: 2.5rem; margin-top: .4rem; padding: .5rem; font-size: .88rem; }
    .factory-panel { padding: .55rem .7rem; }
    .factory-key-guide small { display: none; }
    .factory-recipe-panel { font-size: .8rem; }
}

/* Progression lima shift */
.factory-map-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.factory-map-summary span,
.factory-result-stats span {
    min-width: 7rem;
    padding: .65rem .9rem;
    border: 2px solid #d9e3ef;
    border-radius: .9rem;
    background: #fff;
    text-align: center;
}

.factory-map-summary small,
.factory-result-stats small {
    display: block;
    color: #667085;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.factory-map-summary strong,
.factory-result-stats strong { display: block; font-size: 1.2rem; }
.factory-level-path { display: grid; gap: .8rem; }
.factory-finale-gate { display: flex; align-items: center; gap: 1rem; padding: 1.2rem; border: 3px solid #e6b400; border-radius: 1.2rem; background: #fff8d7; }
.factory-level-card {
    position: relative;
    display: grid;
    grid-template-columns: 2.8rem 4rem minmax(0, 1fr) 8rem auto;
    align-items: center;
    gap: 1rem;
    min-height: 7.2rem;
    padding: 1rem;
    border: 2px solid #d8e2ef;
    border-radius: 1.2rem;
    background: #f8fbff;
}

.factory-level-card.is-completed { border-color: #63c98d; background: #f0fff6; }
.factory-level-card.is-locked { color: #7a8597; background: #f1f3f6; }
.factory-level-number,
.factory-complete-mark {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--factory-blue);
    font-weight: 950;
}
.factory-level-card.is-locked .factory-level-number { background: #909aaa; }
.factory-level-icon { font-size: 2.8rem; text-align: center; }
.factory-level-result { display: grid; justify-items: center; color: #3d4b61; font-size: .75rem; text-align: center; }
.factory-complete-mark { width: 2rem; height: 2rem; margin-bottom: .2rem; background: #159457; }

.factory-game .factory-hud {
    grid-template-columns: 2.8rem minmax(8rem, .8fr) minmax(15rem, 1.6fr) auto auto auto auto;
    gap: .5rem;
}

.factory-pause-button {
    display: grid;
    min-width: 4.5rem;
    place-items: center;
    align-content: center;
    border: 2px solid #d5e0ef;
    border-radius: 1rem;
    color: #33415a;
    background: #fff;
    font-weight: 850;
}
.factory-pause-button i { font-size: 1.25rem; line-height: 1; }
.factory-pause-button span { font-size: .65rem; }

.factory-back {
    display: grid;
    min-height: 4.5rem;
    place-items: center;
    border: 2px solid #d5e0ef;
    border-radius: 1rem;
    color: var(--factory-blue);
    background: #fff;
    font-size: 1.25rem;
}

.factory-orders { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .45rem; }
.factory-orders .factory-order { min-width: 0; padding: .45rem .7rem; }
.factory-orders .factory-order strong { font-size: clamp(.9rem, 1.6vw, 1.25rem); white-space: nowrap; }
.factory-orders .factory-order em { display: block; margin-top: .12rem; color: #7b6200; font-size: .62rem; font-style: normal; font-weight: 950; letter-spacing: .04em; }
.factory-orders .factory-order.is-stored { border-color: #4eaadd; background: #e9f9ff; }
.factory-orders .factory-order.is-stored em { color: #176e9e; }
.factory-orders .factory-order.is-ready { border-color: #45b778; background: #ebfff4; }
.factory-orders .factory-order.is-ready em { color: #08713b; }
.factory-timer,
.factory-combo {
    display: grid;
    min-width: 5.2rem;
    place-items: center;
    align-content: center;
    padding: .45rem .7rem;
    border: 2px solid #d5e0ef;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 20px rgba(23,35,61,.08);
    text-align: center;
}
.factory-timer small,
.factory-combo small { color: #667085; font-size: .62rem; font-weight: 900; }
.factory-timer strong,
.factory-combo strong { font-size: 1.3rem; }
.factory-timer.is-urgent { border-color: #e23e4a; color: #a21722; background: #fff0f1; animation: factory-urgent .7s infinite alternate; }

.factory-target-bar {
    display: grid;
    grid-template-columns: auto minmax(8rem, 1fr) auto;
    align-items: center;
    gap: .75rem;
    margin-bottom: .6rem;
    padding: .5rem .8rem;
    border-radius: .8rem;
    background: #fff;
    font-size: .82rem;
}
.factory-target-bar .progress { height: .65rem; }
.factory-target-bar .progress-bar { background: linear-gradient(90deg, #25ad67, #72d69c); }
.factory-target-bar.is-double-target { grid-template-columns: repeat(2, minmax(12rem, 1fr)) auto; }
.factory-target-condition { display: grid; grid-template-columns: auto minmax(5rem, 1fr); align-items: center; gap: .55rem; }
.factory-target-condition span { white-space: nowrap; font-weight: 900; }
.factory-target-condition .progress { min-width: 5rem; }
.factory-grade-bonus { color: #735800; font-weight: 800; }

.factory-combo.is-hot {
    border-color: #ffb800;
    color: #803b00;
    background: linear-gradient(135deg, #fff8c9, #ffd67a);
    animation: factory-combo-hot .55s ease-in-out infinite alternate;
}

.factory-inventory { display: flex; gap: .3rem; }
.factory-inventory span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 2px dashed #aebed1;
    border-radius: .65rem;
    background: #f5f8fb;
    font-size: 1.35rem;
}
.factory-fridge-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; }
.factory-fridge-slots span { display: grid; min-height: 3rem; place-items: center; border: 2px dashed #76b8dc; border-radius: .7rem; color: #2787b9; background: #effaff; font-size: 1.55rem; }
.factory-fridge-slots span.is-filled { border-style: solid; background: #d9f4ff; animation: factory-fridge-store .4s ease; }
.factory-fridge-panel > small { display: block; margin-top: .35rem; color: #68758a; font-size: .68rem; text-align: center; }
.factory-double-ready-banner { display: none; margin-top: .45rem; padding: .65rem 1rem; border: 3px solid #f0b900; border-radius: .9rem; color: #594300; background: #fff4b8; font-weight: 950; text-align: center; }
.factory-game.is-double-ready .factory-double-ready-banner { display: block; animation: factory-ready-banner .55s ease-in-out infinite alternate; }
.factory-celebration.is-double { color: #fff; background: linear-gradient(135deg, #3157d5, #8b5cf6); }

.factory-tile.is-conveyor {
    border-block: 3px solid #4e596b;
    background-color: #697789;
    background-image: repeating-linear-gradient(90deg, transparent 0 40%, rgba(255,255,255,.22) 40% 48%, transparent 48% 100%);
    animation: factory-belt .8s linear infinite;
}
.factory-conveyor-label {
    position: absolute;
    top: 1%;
    left: 21%;
    color: #fff;
    font-size: clamp(.45rem, .8vw, .7rem);
    font-weight: 950;
    z-index: 2;
}
.factory-conveyor-item {
    --conveyor-x: 2;
    position: absolute;
    top: calc(.5 * (100% / var(--factory-rows)));
    left: calc((var(--conveyor-x) + .5) * (100% / var(--factory-cols)));
    font-size: clamp(1.25rem, 3vw, 2.1rem);
    filter: drop-shadow(0 3px 2px rgba(0,0,0,.3));
    transform: translate(-50%, -50%);
    transition: left .18s linear;
    z-index: 4;
}

.factory-cleaner {
    --cleaner-x: 2;
    --cleaner-y: 4;
    position: absolute;
    top: calc((var(--cleaner-y) + .5) * (100% / var(--factory-rows)));
    left: calc((var(--cleaner-x) + .5) * (100% / var(--factory-cols)));
    display: grid;
    width: calc(72% / var(--factory-cols));
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid #7b4a0b;
    border-radius: 50%;
    background: #ffb646;
    font-size: clamp(1rem, 2.7vw, 1.9rem);
    transform: translate(-50%, -50%);
    transition: left .25s linear;
    z-index: 3;
}
.factory-cleaner small { position: absolute; bottom: -1rem; padding: .05rem .25rem; border-radius: .3rem; color: #fff; background: #17233d; font-size: .45rem; }
.factory-player.is-spinning { animation: factory-player-spin .9s ease-in-out; }

.factory-powerup {
    --powerup-x: 7;
    --powerup-y: 5;
    position: absolute;
    top: calc((var(--powerup-y) + .5) * (100% / var(--factory-rows)));
    left: calc((var(--powerup-x) + .5) * (100% / var(--factory-cols)));
    display: grid;
    width: calc(64% / var(--factory-cols));
    aspect-ratio: 1;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #8d5cff;
    box-shadow: 0 0 0 .35rem rgba(141,92,255,.2);
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    transform: translate(-50%, -50%);
    animation: factory-powerup 1s ease-in-out infinite alternate;
    z-index: 3;
}
.factory-effects { display: grid; gap: .3rem; }
.factory-effect-badge { padding: .35rem .55rem; border-radius: .55rem; color: #4a2c99; background: #eee7ff; font-size: .75rem; font-weight: 850; text-align: center; }

.factory-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15,25,45,.72);
    backdrop-filter: blur(5px);
    z-index: 90;
}
.factory-overlay-card {
    width: min(100%, 31rem);
    padding: 2rem;
    border: 4px solid #fff;
    border-radius: 1.6rem;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0,0,0,.32);
    text-align: center;
}
.factory-pause-actions { max-width: 21rem; }
.factory-tutorial-strip { grid-column: 1; }
.factory-tutorial-strip > div { display: flex; align-items: center; justify-content: space-between; gap: .2rem; margin-top: .5rem; }
.factory-tutorial-strip span { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border-radius: 50%; color: #fff; background: var(--factory-blue); font-size: .7rem; }
.factory-tutorial-strip b { font-size: .65rem; }
.factory-tutorial-strip i { color: #8a96a8; font-style: normal; }

.factory-learning-card { width: min(100%, 43rem); }
.factory-replay-flow,
.factory-final-recipe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.factory-replay-flow > div,
.factory-final-recipe > div {
    display: grid;
    min-width: 8rem;
    min-height: 7rem;
    place-items: center;
    align-content: center;
    padding: 1rem;
    border: 2px solid #d9e3ef;
    border-radius: 1rem;
    background: #f7faff;
}
.factory-replay-flow span,
.factory-final-recipe span { font-size: 2.2rem; }
.factory-replay-flow small,
.factory-final-recipe strong { margin-top: .35rem; font-weight: 850; }
.factory-replay-flow b,
.factory-final-recipe > b { color: var(--factory-blue); font-size: 1.5rem; transform: rotate(-90deg); }
.factory-ipo-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.factory-ipo-labels > div { padding: .8rem; border-radius: .85rem; background: #edf3ff; }
.factory-ipo-labels > div:nth-child(2) { background: #fff4c9; }
.factory-ipo-labels > div:nth-child(3) { background: #e6fff1; }
.factory-ipo-labels small { display: block; color: var(--factory-blue); font-size: .7rem; font-weight: 950; letter-spacing: .08em; }
.factory-ipo-labels strong { display: block; margin-top: .2rem; font-size: .9rem; }
.factory-learning-copy { font-size: 1rem; }

.factory-finale { max-width: 66rem; margin-inline: auto; }
.factory-final-recipe { max-width: 46rem; }
.factory-final-ipo { display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: clamp(1.1rem, 3vw, 1.8rem); }
.factory-final-ipo strong { padding: .6rem 1rem; border: 2px solid #a9bdeb; border-radius: .8rem; color: #2447b0; background: #edf3ff; }
.factory-computer-demo { display: grid; max-width: 44rem; grid-template-columns: 12rem 1fr; align-items: center; gap: 1.5rem; padding: 1.2rem; border: 3px solid #273753; border-radius: 1.3rem; background: #eaf1fa; }
.factory-demo-screen { position: relative; display: grid; height: 8rem; place-items: end center; overflow: hidden; border: 4px solid #17233d; border-radius: .8rem; background: linear-gradient(#bde5ff 0 70%, #87b46b 70%); }
.factory-demo-bot { display: block; margin-bottom: .5rem; font-size: 3.3rem; filter: drop-shadow(0 4px 2px rgba(0,0,0,.2)); }
.factory-demo-bot.is-jumping { animation: factory-demo-jump .65s ease; }
.factory-final-message { max-width: 48rem; }
.factory-exit-challenges { max-width: 48rem; padding: 1.4rem; border: 3px solid #dce5f2; border-radius: 1.2rem; background: #f8fbff; }
.factory-challenge-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.factory-challenge-options button { min-height: 4.5rem; padding: .7rem; border: 2px solid #7899ed; border-radius: .9rem; color: #1f43a6; background: #fff; font-weight: 850; }
.factory-challenge-options button:hover:not(:disabled) { color: #fff; background: var(--factory-blue); transform: translateY(-2px); }
.factory-challenge-options button:disabled { opacity: .45; }
.factory-challenge-options.is-cards button { min-height: 3.6rem; }
.factory-arrange-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .8rem 0; }
.factory-arrange-result span { display: grid; min-height: 3.3rem; place-items: center; border: 2px dashed #91a3bc; border-radius: .8rem; background: #fff; font-weight: 900; }
.factory-challenge-feedback { min-height: 1.8rem; margin: .8rem 0 0; font-weight: 850; }
.factory-challenge-feedback.is-correct { color: #08753e; }
.factory-challenge-feedback.is-wrong { color: #a61b28; }
.factory-final-badge { margin-top: 2rem; padding: 2rem; border: 4px solid #eab600; border-radius: 1.5rem; background: linear-gradient(145deg, #fff9d8, #fff); }
.factory-final-badge.is-earned { animation: factory-badge-earned .7s cubic-bezier(.2,1.5,.4,1); }
.factory-badge-medal { font-size: 5rem; }
.factory-result-stats { display: flex; justify-content: center; gap: .6rem; }

@keyframes factory-belt { to { background-position-x: 30px; } }
@keyframes factory-player-spin { to { transform: translate(-50%, -50%) rotate(720deg); } }
@keyframes factory-powerup { to { transform: translate(-50%, -58%) scale(1.12); } }
@keyframes factory-urgent { to { transform: scale(1.04); } }
@keyframes factory-demo-jump { 50% { transform: translateY(-3.2rem) rotate(-5deg); } }
@keyframes factory-badge-earned { from { opacity: 0; transform: scale(.65) rotate(-3deg); } }
@keyframes factory-cold-flash { 50% { filter: brightness(1.3); box-shadow: 0 0 0 .5rem rgba(96,204,255,.3), 0 0 2rem #62d1ff; } }
@keyframes factory-delivery-ready { to { border-color: #f0b900; background: #fff2a8; box-shadow: 0 0 0 .35rem rgba(255,205,45,.3), 0 0 1.2rem #ffdc55; transform: scale(1.05); } }
@keyframes factory-fridge-store { 50% { transform: scale(1.14); } }
@keyframes factory-ready-banner { to { transform: scale(1.015); box-shadow: 0 5px 18px rgba(240,185,0,.25); } }
@keyframes factory-combo-hot { to { transform: scale(1.06) rotate(-1deg); box-shadow: 0 8px 24px rgba(255,184,0,.35); } }

@media (max-width: 991.98px) {
    .factory-level-card { grid-template-columns: 2.5rem 3rem minmax(0, 1fr) auto; }
    .factory-level-result { display: none; }
    .factory-game .factory-hud { grid-template-columns: 2.8rem minmax(0, 1fr) auto auto; }
    .factory-game .factory-title-block { display: none; }
    .factory-game .factory-orders { grid-column: 2; }
    .factory-game .factory-score { grid-column: 3; }
    .factory-game .factory-combo { grid-column: 4; }
    .factory-game .factory-pause-button { grid-column: 1; grid-row: 2; min-height: 2.6rem; }
    .factory-game .factory-timer { grid-column: 2 / 5; grid-row: 2; min-height: 2.6rem; }
    .factory-replay-flow,
    .factory-final-recipe { gap: .45rem; }
    .factory-replay-flow > div,
    .factory-final-recipe > div { min-width: 0; flex: 1; }
}

@media (max-width: 575.98px) {
    .factory-level-card { grid-template-columns: 2.3rem minmax(0, 1fr); gap: .65rem; }
    .factory-level-icon { display: none; }
    .factory-level-card > .btn { grid-column: 1 / 3; }
    .factory-map-summary { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); }
    .factory-map-summary span { min-width: 0; padding-inline: .25rem; }
    .factory-target-bar { grid-template-columns: 1fr; gap: .3rem; }
    .factory-grade-bonus { display: none; }
    .factory-game .factory-hud { grid-template-columns: 2.5rem minmax(0, 1fr) 4.8rem; }
    .factory-game .factory-orders { grid-column: 2; }
    .factory-game .factory-score { grid-column: 3; }
    .factory-game .factory-combo { display: none; }
    .factory-game .factory-pause-button { display: grid; grid-column: 1; grid-row: 2; }
    .factory-game .factory-timer { grid-column: 2 / 4; }
    .factory-orders .factory-order { min-height: 3.8rem; }
    .factory-orders .factory-order strong { font-size: .78rem; }
    .factory-back { min-height: 3.8rem; }
    .factory-ipo-labels,
    .factory-challenge-options { grid-template-columns: 1fr; }
    .factory-replay-flow,
    .factory-final-recipe { display: grid; grid-template-columns: 1fr; }
    .factory-replay-flow > div,
    .factory-final-recipe > div { min-height: 5rem; }
    .factory-replay-flow b,
    .factory-final-recipe > b { transform: none; }
    .factory-computer-demo { grid-template-columns: 1fr; }
}