/* Direction is encoded twice: motion plus a high-contrast color. */
.balance {
  display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center;
  gap: 12px; margin: 0 0 13px; padding: 8px 10px;
  border: 2px solid var(--ink); background: #f7f1e4;
}
.blue-count, .orange-count { display: flex; align-items: center; gap: 8px; }
.orange-count { justify-content: flex-end; }
.balance b { font-size: 24px; }
.balance span { font: 500 8px 'DM Mono'; }
.blue-count { color: #087dc1; }
.orange-count { color: #ed641f; }
.balance-track { position: relative; height: 9px; border: 2px solid var(--ink); background: linear-gradient(90deg,#078dd5 0 50%,#f47a25 50%); }
.balance-track i { position: absolute; top: 50%; width: 5px; height: 21px; background: var(--ink); transform: translate(-50%,-50%); transition: left .35s; }
.machine[data-direction="LEFT"] { background: #e8f1f3; }
.machine[data-direction="RIGHT"] { background: #f4ebe1; }
.machine[data-direction="LEFT"] img { filter: hue-rotate(175deg) saturate(1.55); }
.machine[data-direction="RIGHT"] img { filter: hue-rotate(0deg) saturate(1.3); }
.machine .direction { border: 2px solid var(--ink); background: white; font-weight: 800; }
.cat-wrap { animation-duration: 9s; }
.machine.incoming { animation-duration: .5s; }
.machine.reacting .glass { animation-duration: .9s; }
.danger .balance { animation: dangerPulse .7s infinite; }
.danger .live-dot { background: var(--red); }
@keyframes dangerPulse { 50% { background: #ffb09f; box-shadow: 0 0 0 5px #ef4d3444; } }
@media(max-width:680px) { .balance { grid-template-columns: 1fr 80px 1fr; } .balance span { display:none; } }

/* 3×3 turn-based prototype */
.machine-grid { grid-template-columns: repeat(3, minmax(135px, 1fr)); max-width: 760px; margin: 0 auto; }
.machine { aspect-ratio: 1.02; cursor: pointer; }
.machine:disabled { opacity: 1; color: var(--ink); }
.machine:not(:disabled):hover { transform: translateY(-3px); box-shadow: 5px 8px 0 var(--ink); }
.stats-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 0 0 13px; }
.stats-bar > div { min-height: 47px; padding: 6px 8px; border: 2px solid var(--ink); background: #f7f1e4; display:flex; flex-direction:column; justify-content:space-between; }
.stats-bar small { font: 500 7px/1.2 'DM Mono'; letter-spacing:.05em; }
.stats-bar b { font-size:20px; line-height:1; }
.stats-bar .blue-stat { background:#62bfea; }.stats-bar .orange-stat { background:#f39a47; }
.door { position:relative; transform-origin:left center; transition:transform .55s ease; z-index:1; }
.door-hinge { position:absolute; left:-10px; top:27%; width:8px; height:46%; border:2px solid var(--ink); background:#aaa49a; z-index:3; }
.empty-label { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%) rotate(-7deg); padding:7px 11px; border:3px solid var(--ink); background:#ddd6c7; font:800 12px 'DM Mono'; opacity:0; z-index:5; }
.machine.empty { background:#ada89e; cursor:not-allowed; box-shadow:2px 3px 0 #555; }
.machine.empty .door { filter:grayscale(1); opacity:.45; }
.machine.empty .cat-wrap { display:none; }.machine.empty .empty-label { opacity:1; }
.machine.falling .door, .machine.code-failure .door { transform:perspective(420px) rotateY(-72deg); }
.machine.falling .cat-wrap { animation:catFall .72s cubic-bezier(.4,0,1,.5) forwards; }
.machine.escaping { animation:escapeRattle .16s infinite alternate; box-shadow:0 0 0 7px #ef4d3466,4px 5px 0 var(--ink); }
.machine.escaping .door { transform:perspective(420px) rotateY(-18deg); }
.machine.escaping:after { content:'ХОДИ БЫСТРЕЕ'; position:absolute; inset:auto 7px 7px; z-index:8; padding:6px; border:2px solid var(--ink); background:var(--red); color:white; font:800 8px 'DM Mono'; }
.machine.escaped .door { transform:perspective(420px) rotateY(-78deg); }
.machine.escaped .cat-wrap { animation:catEscape .72s cubic-bezier(.2,.8,.5,1) forwards; }
.machine.reacting { animation:diagonalFlash .65s ease; }
.machine.fatal-center { z-index:12; animation:fatalCenter .5s infinite alternate; }
.machine.fatal-neighbor { z-index:11; animation:fatalNeighbor .5s infinite alternate; }
.machine.fatal-center:after { content:'ОКРУЖЁН'; position:absolute; inset:auto 8px 8px; z-index:9; padding:6px; border:3px solid var(--ink); background:var(--red); color:white; font:800 9px 'DM Mono'; }
@keyframes catFall { 35%{transform:rotate(22deg) translateY(10px)} 100%{transform:rotate(110deg) translate(70px,170px);opacity:0} }
@keyframes catEscape { 45%{transform:rotate(-12deg) translate(18px,-5px)} 100%{transform:rotate(-35deg) translate(190px,-45px);opacity:0} }
@keyframes escapeRattle { to{transform:translateX(3px) rotate(.5deg)} }
@keyframes diagonalFlash { 30%{background:#fff;box-shadow:0 0 0 8px var(--yellow),4px 5px 0 var(--ink)} }
@keyframes fatalCenter { to{box-shadow:0 0 0 10px var(--red),4px 5px 0 var(--ink);transform:scale(1.025)} }
@keyframes fatalNeighbor { to{box-shadow:0 0 0 7px var(--yellow),4px 5px 0 var(--ink)} }
.pre-game-over .game-stage { animation:preGameOver .35s infinite alternate; }
@keyframes preGameOver { to{filter:saturate(1.35) contrast(1.08)} }

.game-overlay { position:fixed; inset:0; z-index:90; display:grid; place-content:center; justify-items:center; gap:12px; background:#0d0d0be8; color:white; opacity:0; pointer-events:none; transition:opacity .25s; }
.game-overlay.visible { opacity:1; pointer-events:auto; }
.game-overlay strong { font:800 clamp(52px,11vw,150px) Manrope; letter-spacing:-.07em; color:var(--red); line-height:.8; }
.game-overlay span { font:500 12px 'DM Mono'; letter-spacing:.1em; }
.game-overlay button { margin-top:14px; padding:12px 18px; border:3px solid white; background:var(--yellow); color:var(--ink); font:800 11px 'DM Mono'; cursor:pointer; box-shadow:4px 4px 0 white; }
.win-overlay { position:fixed; inset:0; z-index:95; display:grid; place-content:center; justify-items:center; gap:14px; background:#dfff43f2; color:var(--ink); opacity:0; pointer-events:none; transition:opacity .3s; }
.win-overlay.visible { opacity:1; pointer-events:auto; }
.win-overlay strong { font:800 clamp(58px,12vw,165px) Manrope; letter-spacing:-.08em; line-height:.8; transform:rotate(-2deg); }
.win-overlay span { font:500 12px 'DM Mono'; letter-spacing:.12em; }
.win-overlay button { margin-top:14px; padding:12px 18px; border:3px solid var(--ink); background:white; color:var(--ink); font:800 11px 'DM Mono'; cursor:pointer; box-shadow:5px 5px 0 var(--ink); }
.first-loss-offer{width:min(460px,calc(100vw - 30px));padding:15px;border:3px solid var(--ink);background:#f7f1e4;text-align:center;box-shadow:5px 5px 0 var(--ink)}.first-loss-offer b{font:800 10px 'DM Mono'}.first-loss-offer p{margin:7px 0 3px;font-size:13px;line-height:1.35}.first-loss-offer button{width:100%;margin-top:9px}

.code-overflow { position:fixed; inset:0; z-index:100; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .5s; background:rgba(0,10,2,.08); display:grid; place-items:center; }
.code-overflow.visible { opacity:1; pointer-events:auto; }
.code-overflow:before { content:''; position:absolute; inset:auto 0 0; height:0; background:linear-gradient(180deg,#18ff5588,#031d0b 45%); animation:none; }
.code-overflow.visible:before { animation:codeFill 3.2s ease-in forwards; }
.code-rain { position:absolute; inset:0; overflow:hidden; }
.code-rain i { position:absolute; left:var(--x); top:-60px; color:#36ff63; background:#001c07dd; padding:4px 7px; white-space:nowrap; font:500 12px 'DM Mono'; font-style:normal; text-shadow:0 0 8px #38ff66; animation:codeDrop var(--speed) linear var(--delay) infinite; }
.code-overflow strong { position:relative; z-index:3; color:#55ff73; background:#050a06e8; border:4px solid #55ff73; padding:14px 26px; font:800 clamp(42px,9vw,120px) Manrope; letter-spacing:-.06em; opacity:0; transform:scale(.8); }
.code-overflow span { position:absolute; z-index:4; top:68%; color:#55ff73; background:#050a06; padding:7px 12px; font:500 11px 'DM Mono'; opacity:0; }
.code-overflow button { position:absolute; z-index:5; top:76%; opacity:0; padding:11px 17px; border:3px solid #55ff73; background:#050a06; color:#55ff73; font:800 11px 'DM Mono'; cursor:pointer; }
.code-overflow.visible strong { animation:gameOverIn .45s 1.8s forwards; }.code-overflow.visible span { animation:gameOverIn .4s 2.2s forwards; }.code-overflow.visible button { animation:gameOverIn .4s 2.55s forwards; }
@keyframes codeDrop { to{transform:translateY(115vh) rotate(5deg)} }
@keyframes codeFill { to{height:100%} }
@keyframes gameOverIn { to{opacity:1;transform:scale(1)} }
@media(max-width:680px){.machine-grid{grid-template-columns:repeat(3,minmax(95px,1fr));gap:6px}.stats-bar{grid-template-columns:repeat(3,1fr)}.machine{padding:6px}.machine-top{font-size:5px}.lamps{height:15px}.machine-foot{font-size:6px}}

/* The source art is square. Overscan it so rotating corners never expose the round drum background. */
.cat-wrap img { transform: scale(1.44); }

/* 5×5 duel */
.machine-grid { grid-template-columns:repeat(4,minmax(105px,1fr)); gap:7px; max-width:620px; }
.machine { aspect-ratio:.9; padding:7px; }
.door { width:min(80%,122px); padding:5px; margin-top:0; }
.lamps { height:16px; }
.machine-foot { position:absolute; left:7px; right:7px; bottom:6px; }
.duel-scoreboard { display:grid; grid-template-columns:1fr 120px 1fr; gap:7px; margin-bottom:12px; }
.duel-scoreboard > div { min-height:52px; padding:7px 10px; border:3px solid var(--ink); display:flex; align-items:center; justify-content:space-between; background:#f7f1e4; }
.duel-scoreboard small,.difficulty-label { font:500 8px 'DM Mono'; letter-spacing:.08em; }
.timer-demo{display:grid;place-items:center;width:58px;height:72px;margin:auto;border:3px solid var(--ink);background:var(--yellow);font:900 16px/1.15 'DM Mono';box-shadow:3px 3px 0 var(--ink)}
#turnTimer.timer-danger,#onlineTimer.timer-danger{color:var(--red);animation:timerPanic .35s steps(2,end) infinite}
@keyframes timerPanic{50%{opacity:.35}}
.duel-scoreboard b { font-size:25px; }
.human-score { background:#b9d9e5!important; }.ai-score { background:#ead0b4!important; }
.difficulty-label { display:block; margin:12px 0 5px; }
#difficulty { width:100%; height:40px; border:3px solid var(--ink); background:#f7f1e4; padding:0 10px; font:800 11px 'DM Mono'; }
.turn-score strong { font-size:20px; }
.machine.scoring { z-index:3; animation:scoreBurst .22s alternate 4; }
.machine.scoring .glass { box-shadow:inset 0 0 25px white,0 0 0 7px var(--yellow); }
@keyframes scoreBurst { to { transform:scale(1.055) rotate(1deg); filter:saturate(1.7); } }
@media(max-width:900px){.machine-grid{grid-template-columns:repeat(4,minmax(85px,1fr))}.door{width:92%;padding:4px}.machine-top span:first-child,.lamps{display:none}.machine{padding:4px}.machine-foot{display:none}}
@media(max-width:620px){.app-shell{padding:10px}.machine-grid{gap:4px}.game-stage{padding-right:0}.machine{border-width:2px;box-shadow:2px 3px 0 var(--ink)}.duel-scoreboard{grid-template-columns:1fr 80px 1fr}.side-panel{padding-top:16px}}

/* One move is shown as four readable beats: preview, cross, flip, score. */
.machine-grid.paused .cat-wrap { animation-play-state:paused; }
.machine.preview-target { box-shadow:0 0 0 4px #f1dc3588,4px 5px 0 var(--ink); }
.machine.preview-source { box-shadow:0 0 0 5px var(--red),4px 5px 0 var(--ink); }
.machine.preview-source:after { content:'КЛИК'; position:absolute; z-index:9; inset:auto 6px 6px; padding:4px; background:var(--red); color:white; border:2px solid var(--ink); font:800 7px 'DM Mono'; }
.machine.move-target { z-index:4; box-shadow:0 0 0 6px var(--yellow),4px 5px 0 var(--ink); filter:saturate(.65); }
.machine.move-source { z-index:5; box-shadow:0 0 0 7px var(--red),4px 5px 0 var(--ink); }
.machine.move-source:after { content:'НЕ МЕНЯЕТСЯ'; position:absolute; z-index:9; inset:auto 5px 5px; padding:4px 2px; background:var(--ink); color:var(--yellow); font:800 6px 'DM Mono'; }
.machine.flipped { animation:clearFlip .42s ease both; filter:none; }
.machine.flipped .glass { box-shadow:inset 0 0 25px white,0 0 0 7px #fff; }
@keyframes clearFlip { 50% { transform:scale(.88) rotate(-2deg); } }

/* Timed ray duel */
.machine.wave-origin { z-index:5; box-shadow:0 0 0 7px #171713,4px 5px 0 var(--ink); }
.machine-grid.wave-human .machine.wave-origin,.machine-grid.wave-human .machine.wave-front { background:#198dc4!important; }
.machine-grid.wave-ai .machine.wave-origin,.machine-grid.wave-ai .machine.wave-front { background:#df6b19!important; }
.machine.wave-origin:after { content:attr(data-clicker); position:absolute; z-index:10; inset:auto 5px 5px; padding:5px; background:#171713; color:white; border:2px solid white; font:800 8px 'DM Mono'; }
.machine.wave-emitter { z-index:4; box-shadow:0 0 0 5px #f1dc35,4px 5px 0 var(--ink); }
.machine.wave-emitter:after { content:'ИНЕРЦИЯ'; position:absolute; z-index:10; inset:auto 5px 5px; padding:4px; background:#171713; color:#f1dc35; border:2px solid #f1dc35; font:800 7px 'DM Mono'; }
.machine-grid { visibility:hidden; }
.machine-grid.cats-ready { visibility:visible; }
.machine.wave-trail { z-index:3; box-shadow:0 0 0 4px #171713,4px 5px 0 var(--ink); }
.machine-grid.wave-human .machine.wave-trail { background:#35a7d4!important; }
.machine-grid.wave-ai .machine.wave-trail { background:#ed842f!important; }
.machine.wave-trail .glass { box-shadow:inset 0 0 12px #fff8,0 0 0 3px #171713; }
.machine.wave-front { z-index:5; box-shadow:0 0 0 7px #171713,4px 5px 0 var(--ink); }
.machine.wave-front .glass { box-shadow:inset 0 0 20px #fff9,0 0 0 6px #171713; }
.machine.wave-front:before { content:'ШАГ ' attr(data-wave-step); position:absolute; z-index:11; inset:5px auto auto 5px; padding:5px 7px; background:#171713; color:white; border:2px solid white; font:800 8px 'DM Mono'; }
.machine-coordinate{position:absolute;z-index:8;left:5px;top:5px;display:grid;place-items:center;min-width:25px;height:25px;padding:0 4px;background:#f7f1e4;border:2px solid var(--ink);color:var(--ink);font:900 10px 'DM Mono';font-style:normal}
.machine.wave-next{z-index:4;outline:5px dashed var(--yellow);outline-offset:-8px;box-shadow:0 0 0 3px var(--ink),4px 5px 0 var(--ink)}
.machine.wave-next:before{content:'СЛЕДУЮЩАЯ';position:absolute;z-index:13;inset:5px 5px auto auto;padding:4px 5px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);font:900 7px 'DM Mono'}
.inline-turn-timer{margin-left:auto;min-width:64px;padding:4px 8px;background:var(--yellow);border:2px solid var(--ink);color:var(--ink);font:900 20px/1 'DM Mono';text-align:center}
.inline-turn-timer.timer-danger{color:var(--red);background:white}
.machine.armed-pattern { z-index:6; background:#dfff32!important; box-shadow:0 0 0 8px #171713,4px 5px 0 var(--ink); }
.machine.armed-pattern .glass { box-shadow:inset 0 0 22px #dfff32,0 0 0 7px #171713; }
.machine.armed-pattern:before { content:'ФИГУРА'; position:absolute; z-index:12; inset:5px auto auto 5px; padding:5px 7px; background:#171713; color:#dfff32; border:2px solid #dfff32; font:800 8px 'DM Mono'; }
.machine.armed-pattern[data-pattern-label]:after{content:attr(data-pattern-label);position:absolute;z-index:14;inset:auto 4px 4px;padding:5px 6px;background:#dfff32;color:#171713;border:2px solid #171713;font:900 7px 'DM Mono'}
.machine-grid.has-armed-pattern .machine:not(.armed-pattern) { opacity:.32; filter:grayscale(.45); }
.machine-grid.has-armed-pattern .machine.armed-pattern { opacity:1; filter:none; }
.machine-grid.has-armed-pattern .cat-wrap { animation-play-state:paused; }
.machine-grid.locking-score .machine.armed-pattern { background:#f5ff78!important; box-shadow:0 0 0 10px #171713,4px 5px 0 var(--ink); }
.pending-pattern { display:grid; grid-template-columns:1fr auto; gap:3px 10px; align-items:center; margin:12px 0; padding:10px; border:3px solid var(--ink); background:#f7f1e4; opacity:.55; }
.pending-pattern.visible { opacity:1; background:var(--yellow); box-shadow:4px 4px 0 var(--ink); }
.pending-pattern small { grid-column:1/-1; font:500 7px 'DM Mono'; letter-spacing:.08em; }
.pending-pattern b { font:800 13px Manrope; }.pending-pattern strong { grid-row:2; grid-column:2; font:800 25px Manrope; }
.target-score { margin:0 0 10px; padding:8px 10px; border:2px solid var(--ink); text-align:center; font:500 8px 'DM Mono'; background:#f7f1e4; }
.target-score b { font-size:15px; }
.collect-callout { margin:0 0 10px; padding:8px; background:var(--ink); color:white; font:800 9px/1.4 'DM Mono'; }
.pattern-rules { margin:8px 0; border:3px solid var(--ink); background:#f7f1e4; }
.pattern-rules summary { cursor:pointer; padding:9px 10px; font:800 9px 'DM Mono'; list-style:none; }
.pattern-rules summary::-webkit-details-marker { display:none; }
.pattern-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:0 9px 9px; }
.pattern-list span { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:7px; border-top:1px solid #aaa395; padding-top:7px; }
.pattern-list i { white-space:nowrap; font:500 9px/1 'DM Mono'; font-style:normal; color:#627b16; }
.pattern-list b { font:800 7px 'DM Mono'; }
.mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:6px; max-width:620px; margin:10px 0 0; }
.mode-switch a,.mode-switch span { min-height:42px; display:grid; place-items:center; padding:8px 12px; border:3px solid var(--ink); color:var(--ink); background:#f7f1e4; text-decoration:none; font:800 10px 'DM Mono'; cursor:pointer; }
.mode-switch .active { background:var(--yellow); box-shadow:3px 3px 0 var(--ink); cursor:default; }

/* Phone layout: controls first, then the complete 4×4 board without horizontal scrolling. */
@media (max-width:700px) {
  html,body { width:100%; overflow-x:hidden; }
  body { overscroll-behavior-y:contain; }
  .app-shell { min-height:100svh; padding:6px max(6px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); background:#ede7d7; }
  .masthead { height:38px; align-items:center; position:sticky; top:0; z-index:30; background:#ede7d7f2; }
  .masthead .eyebrow { display:none; }
  .masthead h1 { margin:0; font-size:22px; }
  .turn-score { min-width:72px; height:31px; padding:2px 6px; box-shadow:2px 2px 0 var(--ink); }
  .turn-score small { font-size:6px; }
  .turn-score strong { font-size:13px; }
  .mode-switch { width:100%; max-width:none; margin:3px 0 0; gap:3px; }
  .mode-switch a,.mode-switch span { min-height:32px; padding:3px; border-width:2px; font-size:7px; touch-action:manipulation; }
  .mode-switch .active { box-shadow:2px 2px 0 var(--ink); }
  .game-layout { display:flex; flex-direction:column; min-height:0; }
  .side-panel { order:-1; display:grid; grid-template-columns:62px minmax(72px,1fr) 68px 42px; gap:3px; padding:4px 0; border:0; border-bottom:2px solid var(--ink); }
  .side-panel > .eyebrow,.side-panel > h2,.side-panel > .collect-callout,.side-panel > .rule-card,.side-panel > .pending-pattern,.side-panel > .pattern-rules,.side-panel > .target-score,.side-panel > .difficulty-label,.side-panel > .score-help,#finishTestButton { display:none; }
  #difficulty,.side-panel .primary,.side-panel .secondary { width:100%; height:36px; min-width:0; margin:0; padding:0 5px; border-width:2px; box-shadow:none; font-size:7px; touch-action:manipulation; }
  #difficulty { grid-column:1; grid-row:1; padding:0 2px; }
  #startButton { grid-column:2; grid-row:1; }
  #restartButton { grid-column:3; grid-row:1; }
  #musicButton { grid-column:4; grid-row:1; font-size:0; }
  #musicButton:after { content:'♪'; font:800 16px Manrope; }
  .game-stage { padding:3px 0 6px; border:0; }
  .message-bar { position:sticky; top:38px; z-index:29; min-height:38px; height:auto; padding:4px 5px; background:#ede7d7f2; font-size:8px; letter-spacing:0; }
  .message-bar #turnText { display:none; }
  .live-dot { width:8px; height:8px; box-shadow:0 0 0 3px #b8d83e44; flex:0 0 auto; }
  .duel-scoreboard { grid-template-columns:1fr 54px 1fr; gap:3px; margin:2px 0 4px; }
  .duel-scoreboard > div { min-height:32px; padding:2px 5px; border-width:2px; }
  .duel-scoreboard small { font-size:6px; }
  .duel-scoreboard b { font-size:17px; }
  .machine-grid { width:100%; max-width:none; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin:0; }
  .machine { width:100%; min-width:0; aspect-ratio:1.05; padding:2px; border-width:2px; border-radius:3px 3px 7px 7px; box-shadow:2px 2px 0 var(--ink); touch-action:manipulation; }
  .machine:not(:disabled):hover { transform:none; box-shadow:2px 3px 0 var(--ink); }
  .machine-top { display:flex; justify-content:flex-end; height:12px; }
  .machine-top span:first-child,.lamps,.machine-foot { display:none; }
  .machine-top span:last-child { font-size:6px; border-width:1px; padding:0 2px; }
  .door { width:90%; padding:2px; margin:-1px auto 0; border-width:2px; }
  .glass { border-width:2px; }
  .door-hinge { display:none; }
  .chain-log { min-height:28px; margin-top:7px; padding:7px 3px 0; font-size:7px; }
  .machine.wave-origin,.machine.wave-front { box-shadow:0 0 0 3px #171713,2px 3px 0 var(--ink); }
  .machine.wave-trail { box-shadow:0 0 0 2px #171713,2px 3px 0 var(--ink); }
  .machine.wave-origin:after,.machine.wave-emitter:after,.machine.wave-front:before,.machine.armed-pattern:before,.machine.armed-pattern[data-pattern-label]:after { inset:auto 2px 2px; padding:2px 3px; border-width:1px; font-size:5px; }
  .machine.wave-front:before,.machine.armed-pattern:before { inset:2px auto auto 2px; }
  .machine.armed-pattern { box-shadow:0 0 0 4px #171713,2px 3px 0 var(--ink); }
  .machine-coordinate{left:2px;top:2px;min-width:18px;height:18px;padding:0 2px;border-width:1px;font-size:7px}
  .machine.wave-next{outline-width:3px;outline-offset:-5px;box-shadow:0 0 0 2px var(--ink),2px 3px 0 var(--ink)}
  .machine.wave-next:before{content:'ДАЛЬШЕ';inset:auto 2px 2px;padding:2px;border-width:1px;font-size:5px}
  .inline-turn-timer{min-width:45px;padding:3px 5px;border-width:1px;font-size:15px}
}