/* Стили игры. Подключать после общего app.css Фабрики.
   Игровое поле рисуется на canvas: его оформление находится в JS. */

.game-screen[data-game="conveyor"] { background: linear-gradient(#edf0ff, #d8deff); }
.game-screen[data-game="conveyor"] .timer-badge { border: 0; background: var(--accent); color: var(--surface); font-size: 0.75rem; }
.game-screen[data-game="conveyor"] .game-eyebrow,
.game-screen[data-game="conveyor"] .game-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.game-screen[data-game="conveyor"] .game-canvas { flex: 1 0 auto; width: calc(100% + var(--gutter) * 2); min-height: 35rem; height: 0; margin-top: 0.625rem; margin-left: calc(-1 * var(--gutter)); border: 0; border-radius: 0; background: transparent; touch-action: none; user-select: none; }
.game-screen[data-game="conveyor"] .game-info { background: var(--accent); color: #fff; }

/* Living background (factory-backdrop.js) sits under the game; the gradient above is only the first-paint fallback. */
.game-screen.has-backdrop { isolation: isolate; }
.factory-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.factory-backdrop svg { display: block; width: 100%; height: 100%; }

.game-screen.sorting-workshop { overflow:hidden; overscroll-behavior:none; }
.game-screen.sorting-workshop .game-canvas { flex:1 1 0; min-height:0; }
.game-screen.sorting-workshop .game-dom { flex:1 1 0; min-height:0; padding-top:.25rem; }
.sorting-intro { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.7rem; animation:sorting-enter .45s ease both; }
.sorting-intro h2 { font-size:1.8rem; margin:0; }
.sorting-intro p { font-size:.8rem; color:var(--muted); margin:0; }
@keyframes sorting-enter { from {opacity:0;transform:translateY(8px);} to {opacity:1;transform:none;} }
@media (prefers-reduced-motion:reduce) { .sorting-intro {animation:none;} }