/* Стили «Полярности». Подключать после общего app.css Фабрики:
   используются общие переменные палитры, safe-area и базовые стили кнопок. */

/* Polarity: antonym pairs as magnets. The left magnet carries the word and its meaning,
   the right magnets are candidates; a true opposite snaps shut, a wrong one pushes away. */
/* Shimmering violet-blue ground under a hairline blueprint of the magnet shop; only the colour blobs drift. */
.game-screen[data-game="falling"][data-station="magnets"] .game-dom { padding-top:.6rem; }
.polar-game { --pole-n: #5b4fd6; --pole-s: var(--accent); --pole-tip: #aeb7cc; --pole-off: #c9ccd8; --pole-edge: #d8dcf0; --spring: cubic-bezier(.34,1.56,.64,1); --glide: cubic-bezier(.2,.8,.2,1); position: relative; width: 100%; max-width: 36rem; margin: 0 auto; padding-bottom: 1rem; }
.polar-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; gap: .5rem; }
.polar-count { font-size: .62rem; font-weight: 700; color: var(--muted); }
.polar-lives { display: flex; gap: .2rem; }
.polar-lives svg { width: 1.35rem; height: 1.35rem; fill: none; transform-origin: 50% 100%; transition: opacity .4s ease, translate .55s var(--spring), rotate .55s var(--spring); }
.polar-lives path { stroke-width: 3.6; transition: stroke .4s; }
.polar-lives .m-body { stroke: var(--pole-n); }
.polar-lives .m-tip { stroke: var(--pole-tip); }
.polar-lives .off-duty { opacity: .35; translate: 0 .2rem; rotate: 18deg; }
.polar-lives .off-duty path { stroke: var(--pole-off); }

.polar-task { padding: .9rem 1.1rem 1rem; border-radius: 1.3rem; background: var(--accent); }
.polar-task > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.polar-command { display: inline-block; font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; transform-origin: 0 60%; }
.polar-name { font-size: .62rem; font-weight: 700; text-align: right; }
.polar-task h2 { font-size: 1.05rem; font-weight: 600; margin: .55rem 0 .25rem; line-height: 1.2; }
.polar-hint { font-size: max(12px,.67rem); line-height: 1.4; margin: 0; min-height: 2.8em; }
.polar-hint b { font-weight: 700; }

/* The board: two columns of magnets facing each other across the gap. */
.polar-stage { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 1.15rem; align-items: start; margin-top: .7rem; padding: .75rem; border: 1px solid var(--line); border-radius: 1.35rem; background: rgba(252,253,255,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); user-select: none; -webkit-user-select: none; transition: opacity .4s ease, filter .4s ease; }
.polar-col { display: grid; gap: .5rem; }
.polar-card { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; margin: 0; padding: 0; border: 1.5px solid var(--pole-edge); border-radius: 1rem; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: translate .34s var(--glide), scale .2s ease, border-color .22s, background-color .22s, box-shadow .3s, color .3s; }
.polar-card:focus-visible { outline: 2px solid var(--pole-n); outline-offset: 2px; }
.polar-card.is-left { min-height: 3.35rem; touch-action: none; }
.polar-card.is-right { min-height: 2.8rem; }
.polar-text { flex: 1; min-width: 0; display: grid; gap: .12rem; padding: .5rem .2rem .5rem .75rem; }
.is-right .polar-text { padding: .45rem .7rem .45rem .15rem; }
.polar-text strong { font-size: .9rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.is-right .polar-text strong { font-size: .86rem; font-weight: 600; }
.polar-text small { font-size: max(12px,.64rem); font-weight: 500; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; transition: color .3s; }
.polar-pole { flex-shrink: 0; display: flex; align-items: center; width: 2.4rem; padding: 0 .3rem; box-sizing: border-box; }
.is-left .polar-pole { justify-content: flex-end; }
.polar-magnet { width: 1.95rem; height: 1.75rem; overflow: visible; transition: scale .3s var(--spring); }
.polar-magnet path { fill: none; stroke-width: 7; transition: stroke .25s; }
.polar-magnet .m-body { stroke: var(--pole-n); }
.is-right .polar-magnet .m-body { stroke: var(--pole-s); }
.polar-magnet .m-tip { stroke: var(--pole-tip); }

/* Field lines flow out of the selected magnet into the gap between the columns. */
.polar-field { position: absolute; left: 100%; top: 50%; width: .85rem; height: 2.4rem; translate: 0 -50%; overflow: visible; fill: none; stroke: var(--pole-n); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 2.5 3.5; opacity: 0; scale: .4 1; transform-origin: 0 50%; pointer-events: none; transition: opacity .25s, scale .4s var(--glide); }
.is-selected .polar-field { opacity: .9; scale: 1; }
.is-selected .polar-field path { animation: polar-flow .8s linear infinite; }
@keyframes polar-flow { to { stroke-dashoffset: -12; } }

.polar-card.is-selected { z-index: 2; translate: .35rem 0; border-color: var(--pole-n); background: #fff; box-shadow: 0 .4rem 1.1rem rgba(91,79,214,.2); }
.is-selected .polar-magnet .m-tip { stroke: #cdc7ff; }
/* Free right magnets lean a little towards an active field. */
.polar-stage.has-selection .is-right:not(.is-done) { translate: -.12rem 0; }
.polar-stage.has-selection .is-right:not(.is-done) .polar-magnet { scale: 1.06; }
.polar-stage.has-selection .is-right.is-near { translate: -.35rem 0; border-color: var(--pole-s); background: #f3f6ff; box-shadow: 0 .3rem .9rem rgba(106,144,255,.22); }
.polar-stage.has-selection .is-right.is-near .polar-magnet { scale: 1.14; }
.polar-card.is-dragging { z-index: 5; scale: 1.03; box-shadow: 0 .9rem 2rem rgba(16,20,28,.16); cursor: grabbing; }
.polar-card.is-snapping { z-index: 3; border-color: var(--pole-n); background: #fff; }
.is-snapping .polar-magnet .m-tip { stroke: #cdc7ff; }
.polar-card.is-repelled { border-color: var(--danger); background: #fff4f5; }
.is-repelled .polar-magnet .m-body { stroke: var(--danger); }
/* At contact the poles fuse: tips take the core colour, the field lines are no longer needed. */
.is-locked .polar-magnet .m-tip { stroke: var(--pole-n); }
.is-right.is-locked .polar-magnet .m-tip { stroke: var(--pole-s); }
.is-snapping .polar-field { opacity: 0; transition-duration: .12s; }

/* A locked pair leaves a dashed trace in place, so the board never reflows. */
.polar-card.is-done { translate: 0 0; border-style: dashed; border-color: #c9cde0; background: rgba(252,253,255,.4); color: #8a90a0; box-shadow: none; cursor: default; pointer-events: none; }
.is-done .polar-text small { color: #a3a8b6; }
.is-done .polar-magnet .m-body { stroke: var(--pole-off); }
.is-done .polar-magnet .m-tip { stroke: #e3e6f0; }
.is-done .polar-field { opacity: 0; }

.polar-spark { position: absolute; z-index: 6; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border: 2px solid var(--pole-n); border-radius: 50%; box-shadow: 0 0 0 .35rem rgba(136,122,241,.16); pointer-events: none; opacity: 0; }
.polar-spark.is-bad { width: 1.8rem; height: 1.8rem; margin: -.9rem 0 0 -.9rem; border-color: var(--danger); box-shadow: none; }

.polar-tray { margin-top: .7rem; padding: .8rem .9rem .9rem; border-radius: 1.25rem; background: var(--surface); box-shadow: 0 .25rem 1.1rem rgba(60,50,140,.08); }
.polar-tray-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; font-size: .7rem; font-weight: 700; }
.polar-done { display: inline-block; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.polar-chips { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .4rem; min-height: calc(3 * 1.85rem + 2 * .4rem); }
.polar-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: max(12px,.66rem); color: var(--muted); transition: opacity .3s; }
.polar-chips.has-chips .polar-empty { opacity: 0; }
.polar-chip { display: inline-flex; align-items: center; gap: .2rem; height: 1.85rem; padding: 0 .65rem; border-radius: 1rem; background: #eef0ff; font-size: max(12px,.68rem); font-weight: 600; white-space: nowrap; }
.polar-chip.is-pending { visibility: hidden; }
/* The copy that flies from the joint to the tray; JS drives its position from the game's top-left corner. */
.polar-chip.is-flying { position: absolute; left: 0; top: 0; z-index: 10; pointer-events: none; will-change: transform; }
.polar-chip svg { width: 1.9rem; height: .95rem; fill: none; overflow: visible; }
.polar-chip path { stroke-width: 4.5; }
.polar-chip .m-l { stroke: var(--pole-n); }
.polar-chip .m-r { stroke: var(--pole-s); }
.polar-chip .m-tip { stroke: var(--pole-tip); }

/* Set changes: the board and tray fade up before the swap, the new set rises in from JS. */
.polar-game.is-leaving .polar-card, .polar-game.is-leaving .polar-chip { opacity: 0; translate: 0 -.35rem; transition: opacity .22s ease-in, translate .22s ease-in; }
.polar-game.is-over .polar-stage { opacity: .55; filter: saturate(.6); }
.polar-game.is-over .polar-card { pointer-events: none; }
.polar-game.is-over .polar-field { opacity: 0; }

/* Narrow phones: smaller magnets and gaps, so words like "expensive" stay on one line. */
@media (max-width:360px) {
 .polar-stage { column-gap: .9rem; padding: .5rem; }
 .polar-pole { width: 1.8rem; padding: 0 .15rem; }
 .polar-magnet { width: 1.5rem; height: 1.35rem; }
 .polar-text { padding: .45rem .1rem .45rem .55rem; }
 .is-right .polar-text { padding: .4rem .5rem .4rem .1rem; }
 .polar-text strong { font-size: .8rem; }
 .is-right .polar-text strong { font-size: .78rem; }
 .polar-field { width: .7rem; }
}
@media (min-width:700px) { .game-screen[data-game="polarity"] .game-dom { max-width: 36rem; margin: 0 auto; width: 100%; } }
@media (prefers-reduced-motion:reduce) { .game-screen[data-game="polarity"] { animation: none; } .polar-game *, .polar-game *::after { animation: none !important; transition: none !important; } }

.laboratory-intro { text-align:center;padding:18vh 12px;animation:laboratory-enter .5s ease both; }
.laboratory-intro h2 { font-size:32px;margin:12px 0; }
.laboratory-intro p { font-size:13px;color:var(--muted); }

@keyframes laboratory-enter { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:none; } }
@media (prefers-reduced-motion:reduce) { .laboratory-intro { animation:none; } }

/* Magnets stay within the available Telegram viewport. The board gets the
   remaining height; collected pairs occupy one horizontal row. */
.game-screen[data-game="falling"][data-station="magnets"] {
  overflow:hidden;overscroll-behavior:none;padding-inline:1rem;padding-bottom:calc(.75rem + var(--app-safe-bottom));
}
.game-screen[data-station="magnets"] .game-header {height:3.5rem;}
.game-screen[data-station="magnets"] .game-dom {flex:1 1 0;min-height:0;padding-top:.25rem;}
.game-screen[data-station="magnets"] .polar-game {
  height:100%;min-height:0;padding:0;display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;gap:.5rem;
}
.game-screen[data-station="magnets"] .polar-meta {margin:0;}
.game-screen[data-station="magnets"] .polar-task {padding:.6rem .85rem;}
.game-screen[data-station="magnets"] .polar-command {font-size:.95rem;}
.game-screen[data-station="magnets"] .polar-task h2 {font-size:.95rem;margin:.3rem 0 0;}
.game-screen[data-station="magnets"] .polar-stage {margin:0;min-height:0;padding:.55rem;column-gap:.8rem;}
.game-screen[data-station="magnets"] .polar-col {height:100%;min-height:0;grid-auto-rows:minmax(0,1fr);gap:.4rem;}
.game-screen[data-station="magnets"] .polar-card {min-height:0;}
.game-screen[data-station="magnets"] .polar-text {padding:.25rem .1rem .25rem .55rem;}
.game-screen[data-station="magnets"] .is-right .polar-text {padding:.25rem .45rem .25rem .1rem;}
.game-screen[data-station="magnets"] .polar-text strong {font-size:.85rem;}
.game-screen[data-station="magnets"] .polar-pole {width:1.9rem;padding:0 .2rem;}
.game-screen[data-station="magnets"] .polar-magnet {width:1.5rem;height:1.4rem;}
.game-screen[data-station="magnets"] .polar-tray {margin:0;padding:.5rem .7rem;min-width:0;}
.game-screen[data-station="magnets"] .polar-tray-head {margin-bottom:.3rem;}
.game-screen[data-station="magnets"] .polar-chips {
  min-height:2rem;flex-wrap:nowrap;align-items:center;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.game-screen[data-station="magnets"] .polar-chips::-webkit-scrollbar {display:none;}
.game-screen[data-station="magnets"] .polar-chip {flex:none;}
@media(max-height:700px) {
  .game-screen[data-station="magnets"] .game-header {height:3rem;}
  .game-screen[data-station="magnets"] .polar-game {gap:.35rem;}
  .game-screen[data-station="magnets"] .polar-task h2 {font-size:.85rem;}
  .game-screen[data-station="magnets"] .polar-stage {padding:.4rem;}
  .game-screen[data-station="magnets"] .polar-col {gap:.25rem;}
  .game-screen[data-station="magnets"] .polar-text strong {font-size:.8rem;}
  .game-screen[data-station="magnets"] .polar-text {padding-block:.15rem;}
  .game-screen[data-station="magnets"] .polar-text small {line-height:1.15;}
}