body.game-active{position:fixed;inset:0;width:100%;height:var(--fg-vvh,100dvh);overflow:hidden;overscroll-behavior:none;background:linear-gradient(#99dcf7 0 43%,#eef8e8 43% 100%)}body.game-active #app{position:absolute;inset:0;width:100%;height:var(--fg-vvh,100dvh);overflow:hidden}.game-shell{width:100%;height:100%;padding:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}.game-frame{width:max-content;max-width:calc(100vw - 20px);max-height:100%;display:flex;flex-direction:column;gap:9px;margin:auto}.game-topbar{width:100%;min-height:70px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(25,126,157,.18);border-radius:20px;background:linear-gradient(100deg,#1699ce,#20a99d);box-shadow:0 10px 24px rgba(18,86,105,.12)}.game-topbar>div{text-align:center;color:#fff}.game-topbar .eyebrow{color:#e0f8ff}.game-topbar h1{margin:2px 0;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1}.game-topbar .icon-btn:last-child{justify-self:end}.puzzle-frame{width:calc(190px + var(--board-size) + 250px + 24px)}.arcade-frame,.mini-frame{width:calc(170px + var(--board-size) + 216px + 24px)}

.board-wrap{position:relative;width:var(--board-size);height:var(--board-size);flex:0 0 auto}.game-board{--board-gap:1px;--pipe-overlap:2px;width:var(--board-size);height:var(--board-size);display:grid;grid-template-columns:repeat(var(--cols,8),minmax(0,1fr));grid-template-rows:repeat(var(--rows,8),minmax(0,1fr));gap:var(--board-gap);padding:6px;border:4px solid #3f6872;border-radius:16px;background:var(--board);box-shadow:0 10px 26px rgba(29,73,82,.13)}.arcade-board{--cols:8;--rows:8}.tile,.a-tile{position:relative;min-width:0;min-height:0;border:1px solid rgba(77,121,69,.10);border-radius:9px;background:var(--cell);display:grid;place-items:center;overflow:hidden;padding:2px}.tile.empty,.a-tile.empty{background:var(--cell)}.tile.pipe,.a-tile.pipe{background:linear-gradient(145deg,#e7f2e1,#d9e9ce);overflow:visible;padding:0;z-index:2}.tile.source,.tile.target,.a-tile.source,.a-tile.target{background:linear-gradient(145deg,#e8f3d9,#d6e9bd)}.tile.obstacle,.a-tile.obstacle{background:linear-gradient(145deg,#dfead6,#d4e2cb)}.tile.connected,.a-tile.flowing,.a-tile.supplied{box-shadow:inset 0 0 0 2px rgba(34,186,218,.32);background:linear-gradient(145deg,#e7f7dc,#d6f0c5)}.tile button,.a-tile{border:0}.place-cell{color:#6ba174}.place-plus{font-size:1.05rem;opacity:.10}.place-cell.ready{cursor:pointer;box-shadow:inset 0 0 0 2px rgba(27,163,156,.20)}.drag-targeting .place-cell{box-shadow:inset 0 0 0 2px rgba(28,174,161,.30)}.drag-targeting .place-cell:hover{background:#f0f7cf;box-shadow:inset 0 0 0 3px #e8bf4b}.pipe-rotate{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;overflow:visible}.lock{position:absolute;right:3px;bottom:3px;width:16px;height:16px}.lock img{width:100%;height:100%}.tile small{position:absolute;left:3px;right:3px;bottom:2px;font-size:.43rem;line-height:1;text-align:center;font-weight:900;color:#365d6c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.obstacle-img{width:62%;height:62%;object-fit:contain}.flow-flash{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);opacity:0;pointer-events:none;z-index:10;padding:9px 13px;border-radius:999px;background:rgba(9,64,90,.92);color:#fff;font-weight:900;letter-spacing:.08em;transition:.18s ease}.flow-flash.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pipe-piece{width:100%;height:100%;display:grid;place-items:center;transform:rotate(var(--pipe-rot,0deg));transform-origin:center;will-change:transform}.pipe-svg-art{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 5px rgba(24,72,57,.20))}.pipe-route{fill:none;stroke-linecap:round;stroke-linejoin:round}.pipe-shadow{stroke:#0d3428;stroke-width:46;opacity:.25}.pipe-body{stroke:url(#pipeBodyGrad);stroke-width:40}.pipe-bevel{stroke:url(#pipeBevelGrad);stroke-width:33}.pipe-cavity{stroke:#123f35;stroke-width:23;opacity:.98}.pipe-channel{stroke-width:15}.pipe-channel.dry{stroke:url(#dryGrad);opacity:.96}.pipe-channel.wet{stroke:url(#waterGrad);filter:url(#waterGlow)}.pipe-water-flow{stroke:rgba(240,255,255,.96);stroke-width:4.6;stroke-dasharray:7 11;filter:url(#waterGlow);animation:waterTravel .52s linear infinite}.pipe-highlight{stroke:rgba(235,255,213,.80);stroke-width:5.2;opacity:.64;transform:translate(-2px,-3px)}.pipe-collar-shadow{fill:rgba(14,45,53,.27)}.pipe-collar{stroke:#405963;stroke-width:2.2}.pipe-collar-bevel{stroke:rgba(255,255,255,.60);stroke-width:1.25}.pipe-collar-bolt{fill:url(#metalGrad);stroke:#3c5059;stroke-width:1}.pipe-mouth{stroke:#153e39;stroke-width:1.6}.pipe-collar-gloss{fill:none;stroke:rgba(255,255,255,.82);stroke-width:2.2;stroke-linecap:round}.pipe-piece.flowing .pipe-svg-art{filter:drop-shadow(0 0 7px rgba(30,209,255,.32)) drop-shadow(0 4px 5px rgba(24,72,57,.16));animation:flowPulse 1.4s ease-in-out infinite}.endpoint-piece{width:100%;height:100%;display:grid;place-items:center}.endpoint-svg-art{width:90%;height:90%;overflow:visible;filter:drop-shadow(0 3px 5px rgba(29,68,84,.13))}.source-piece.active .endpoint-svg-art{filter:drop-shadow(0 0 9px rgba(42,198,234,.44));animation:sourcePulse 1.25s ease-in-out infinite}.building-piece.active .endpoint-svg-art{filter:drop-shadow(0 0 9px rgba(42,198,234,.36));animation:destinationSupplied .75s ease both}
@keyframes waterTravel{to{stroke-dashoffset:-21}}
@keyframes flowPulse{0%,100%{filter:drop-shadow(0 0 5px rgba(30,209,255,.24)) drop-shadow(0 4px 5px rgba(24,72,57,.16))}50%{filter:drop-shadow(0 0 10px rgba(30,209,255,.44)) drop-shadow(0 4px 5px rgba(24,72,57,.14))}}
@keyframes sourcePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes destinationSupplied{0%{transform:scale(.92)}55%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes pipePlacePop{0%{transform:rotate(var(--pipe-rot,0deg)) scale(.45);opacity:.2}65%{transform:rotate(var(--pipe-rot,0deg)) scale(1.10);opacity:1}100%{transform:rotate(var(--pipe-rot,0deg)) scale(1)}}
@keyframes pipeRotateKick{0%{transform:rotate(calc(var(--pipe-rot,0deg) - 90deg)) scale(.96)}70%{transform:rotate(var(--pipe-rot,0deg)) scale(1.04)}100%{transform:rotate(var(--pipe-rot,0deg)) scale(1)}}
@keyframes obstacleSpawn{0%{transform:scale(.45) rotate(-10deg);opacity:.2}65%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes tileRemove{0%{transform:scale(1);opacity:1}100%{transform:scale(.55);opacity:.25}}
.action-place .pipe-piece,.action-spawn .pipe-piece{animation:pipePlacePop .34s cubic-bezier(.2,.9,.2,1.18)}.action-rotate .pipe-piece{animation:pipeRotateKick .24s ease-out}.action-spawn-obstacle .obstacle-img{animation:obstacleSpawn .38s cubic-bezier(.2,.9,.2,1.15)}.action-clear{animation:tileRemove .24s ease-out}.random-selected{animation:spawnTargetPulse .66s ease-in-out infinite alternate}@keyframes spawnTargetPulse{from{box-shadow:inset 0 0 0 2px rgba(255,196,56,.25)}to{box-shadow:inset 0 0 0 4px rgba(255,196,56,.78);background:#f7f2c4}}
@media(prefers-reduced-motion:reduce){.pipe-water-flow,.pipe-piece.flowing .pipe-svg-art,.source-piece.active .endpoint-svg-art,.building-piece.active .endpoint-svg-art,.action-place .pipe-piece,.action-spawn .pipe-piece,.action-rotate .pipe-piece,.action-spawn-obstacle .obstacle-img,.random-selected{animation:none!important}}
.mode-rail{min-width:0;height:var(--board-size);display:flex;flex-direction:column;gap:8px}.rail-card{padding:11px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:var(--shadow-soft);min-width:0}.rail-card>span,.rail-label{display:block;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:#168b9b;font-weight:900}.rail-card>b{display:block;margin:4px 0;font-size:.9rem}.rail-card small{display:block;color:var(--muted);font-size:.65rem;line-height:1.35}.rail-title{display:flex;align-items:center;gap:6px;color:#168b9b;font-size:.61rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.rail-title img{width:19px;height:19px}.stat-card b{font-size:1.2rem}.rail-stars{font-size:1.05rem;color:#e0aa27;letter-spacing:.02em}.puzzle-shell{background:linear-gradient(180deg,#9cdef7 0%,#d7f2ee 47%,#eff8e8 100%)}.puzzle-layout{display:grid;grid-template-columns:190px var(--board-size) 250px;gap:12px;align-items:start}.puzzle-left-rail,.puzzle-right-rail{width:100%;height:auto;align-self:start}.puzzle-left-rail{gap:8px}.puzzle-actions{display:grid;gap:6px}.puzzle-actions button{min-height:42px}.puzzle-tools-card{margin-top:0}.toolbox{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px}.tool-btn{min-width:0;min-height:55px;padding:4px;border:1px solid var(--line);border-radius:11px;background:#f7fbfc;display:grid;grid-template-columns:25px 1fr;grid-template-rows:auto auto;align-items:center;gap:2px 5px;text-align:left}.tool-btn img{width:25px;height:25px;grid-row:1/-1}.tool-btn span{font-size:.57rem;font-weight:800}.tool-btn b{font-size:.58rem;color:#168b9b}.tool-btn.selected{background:#fff5c9;border-color:#d9b03b}.tool-empty{padding:8px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:.62rem;text-align:center}.puzzle-stage{width:var(--board-size);min-width:0}.puzzle-level-control{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:2px}.puzzle-level-control button{width:31px;height:31px;border:1px solid rgba(255,255,255,.35);border-radius:9px;background:rgba(255,255,255,.16);color:#fff;font-size:1.2rem;font-weight:950;line-height:1}.puzzle-level-control button:disabled{opacity:.28}.puzzle-level-control select{height:34px;min-width:145px;padding:0 30px 0 12px;border:1px solid rgba(255,255,255,.4);border-radius:10px;background:#fff;color:#0c4962;font-size:1.12rem;font-weight:950;text-align:center;text-align-last:center}.puzzle-summary-card{display:grid;gap:9px}.puzzle-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.puzzle-summary-grid span{min-width:0;padding:7px 8px;border:1px solid var(--line);border-radius:10px;background:#f7fbfc}.puzzle-summary-grid small{font-size:.48rem;text-transform:uppercase;letter-spacing:.08em;color:#168b9b;font-weight:900}.puzzle-summary-grid b{display:block;margin-top:2px;font-size:.92rem;color:#163d51;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.puzzle-best-row{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:center;padding-top:8px;border-top:1px solid var(--line)}.puzzle-best-row>span small{font-size:.46rem;text-transform:uppercase;letter-spacing:.08em;color:#168b9b;font-weight:900}.puzzle-best-row>span b{display:block}.puzzle-best-row>small{text-align:right;font-size:.55rem;line-height:1.25}.puzzle-right-rail .pipe-rack{flex:0 0 auto;min-height:0;display:flex;flex-direction:column}.pipe-rack-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}.pipe-rack-head span{font-size:.62rem;color:#168b9b;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.pipe-rack-head small{font-size:.55rem;color:var(--muted)}.pipe-edit-toggle{display:flex;gap:5px;margin-left:auto}.pipe-edit-toggle button{min-height:32px;padding:0 9px;border:1px solid var(--line);border-radius:9px;background:#f6fafb;color:#4a6876;font-size:.55rem;font-weight:900}.pipe-edit-toggle button b{font-size:.78rem;line-height:1}.pipe-edit-toggle button.active{background:linear-gradient(135deg,#179bc9,#20a99e);border-color:transparent;color:#fff}.tray-pipe{position:relative}.tray-place-sign{position:absolute;left:5px;top:5px;z-index:3;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#1ba49e;color:#fff;font-size:.72rem;line-height:1;font-weight:900;box-shadow:0 2px 6px rgba(12,82,78,.18)}.tray-pipe.remove-disabled{opacity:.48}.pipe-remove-target{position:relative;width:100%;height:100%;padding:0;overflow:visible}.pipe-remove-sign{position:absolute;right:4px;top:4px;z-index:5;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#c64d4d;color:#fff;font-size:1rem;line-height:1;font-weight:900;box-shadow:0 3px 8px rgba(110,31,31,.24)}.pipe-remove-target:hover,.pipe-remove-target:focus-visible{box-shadow:inset 0 0 0 3px rgba(198,77,77,.35)}.pipe-tray{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;overflow:visible;scrollbar-width:none}.pipe-tray::-webkit-scrollbar{display:none}.tray-pipe{min-width:0;height:82px;min-height:82px;max-height:none;padding:5px;border:1px solid var(--line);border-radius:12px;background:#f6fafb;display:grid;grid-template-columns:1fr auto;grid-template-rows:50px auto;align-items:center;gap:2px 4px;color:#355768;text-align:left;touch-action:none;user-select:none;overflow:hidden}.tray-pipe.selected{background:#fff4c4;border-color:#d5aa2b}.tray-pipe-art{grid-column:1/-1;width:100%;height:50px;display:grid;place-items:center;overflow:hidden}.tray-pipe-art .pipe-preview-piece{width:50px;height:50px;max-width:50px;max-height:50px;overflow:hidden}.tray-pipe-label{min-width:0;font-size:.56rem;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tray-pipe b{font-size:.64rem;color:#168b9b}.tray-empty{grid-column:1/-1;display:grid;place-items:center;min-height:76px;padding:10px;color:var(--muted);font-size:.65rem;text-align:center}.puzzle-board{--pipe-overlap:1px}.puzzle-board .tile.connected{box-shadow:inset 0 0 0 1px rgba(34,186,218,.18)}.puzzle-board .tile small{font-size:.48rem;bottom:3px}.game-topbar-spacer{width:31px;height:31px;display:block}
.arcade-layout{display:grid;grid-template-columns:170px var(--board-size) 216px;gap:12px;align-items:start}.arcade-left-rail{width:170px}.arcade-stage{width:var(--board-size)}.arcade-right-rail{width:216px}.arcade-score-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.arcade-detail{padding:10px}.arcade-pause-btn{margin-top:auto;min-height:46px}.arcade-right-rail .stat-card b{font-size:1.28rem}
.mini-layout{display:grid;grid-template-columns:170px var(--board-size) 216px;gap:12px;align-items:start}.mini-left-rail{width:170px}.mini-right-rail{width:216px}.mini-stage{width:var(--board-size)}.mini-tip{margin-top:auto}.mini-right-rail button{margin-top:auto;min-height:42px}.pressure-dots{display:flex;gap:5px;margin-top:7px}.pressure-dots i{width:16px;height:16px;border-radius:50%;background:#e95a58;box-shadow:inset 0 -2px 0 rgba(113,31,31,.16)}
.pressure-dots i.off{opacity:.16;filter:grayscale(1)}

/* v0.51 motion polish */
.game-frame{animation:gameEnter .26s ease-out both}
.game-board{animation:boardEnter .30s cubic-bezier(.2,.85,.2,1) both}
.flow-flash.show{animation:flashPop .38s cubic-bezier(.2,.9,.2,1.12) both}
.pipe-drag-ghost{animation:dragGhostFloat .72s ease-in-out infinite alternate}
.tray-pipe.selected{animation:traySelect .8s ease-in-out infinite alternate}
@keyframes gameEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes boardEnter{from{opacity:.35;transform:scale(.975)}to{opacity:1;transform:scale(1)}}
@keyframes flashPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes dragGhostFloat{from{filter:drop-shadow(0 10px 14px rgba(10,55,77,.22));transform:translate(-50%,-50%) scale(1.02)}to{filter:drop-shadow(0 14px 22px rgba(10,55,77,.34));transform:translate(-50%,-53%) scale(1.08)}}
@keyframes traySelect{from{box-shadow:inset 0 0 0 1px rgba(224,177,44,.45)}to{box-shadow:inset 0 0 0 3px rgba(224,177,44,.72)}}
@media(prefers-reduced-motion:reduce){.game-frame,.game-board,.flow-flash.show,.pipe-drag-ghost,.tray-pipe.selected{animation:none!important}}
.game-board.route-complete{animation:boardFlowComplete .68s ease-in-out}
.game-board.route-complete .flowing .pipe-piece{animation:routePipeCelebrate .55s ease-in-out}
@keyframes boardFlowComplete{0%,100%{box-shadow:0 10px 26px rgba(29,73,82,.13)}50%{box-shadow:0 0 0 5px rgba(63,219,255,.24),0 14px 34px rgba(18,136,164,.24)}}
@keyframes routePipeCelebrate{0%,100%{transform:rotate(var(--pipe-rot,0deg)) scale(1)}50%{transform:rotate(var(--pipe-rot,0deg)) scale(1.07)}}
@media(prefers-reduced-motion:reduce){.game-board.route-complete,.game-board.route-complete .flowing .pipe-piece{animation:none!important}}

/* v0.54 connector continuity and drag polish */
.game-board .pipe-piece{width:100%;height:100%;overflow:visible;touch-action:none}
.game-board .pipe-svg-art{width:calc(100% + (var(--pipe-overlap) * 2));height:calc(100% + (var(--pipe-overlap) * 2));max-width:none;max-height:none}
.pipe-bridge-shell,.pipe-bridge-body,.pipe-bridge-channel,.pipe-bridge-water{fill:none;stroke-linecap:round}
.pipe-bridge-shell{stroke:#0d3428;stroke-width:25;opacity:.34}
.pipe-bridge-body{stroke:url(#pipeBodyGrad);stroke-width:20}
.pipe-bridge-channel{stroke-width:10.5}.pipe-bridge-channel.dry{stroke:url(#dryGrad)}.pipe-bridge-channel.wet{stroke:url(#waterGrad);filter:url(#waterGlow)}
.pipe-bridge-water{stroke:rgba(235,254,255,.96);stroke-width:3.8;stroke-dasharray:5 8;animation:waterTravel .54s linear infinite;filter:url(#waterGlow)}
.pipe-rotate{touch-action:none;cursor:grab}.pipe-rotate:active{cursor:grabbing}.tile.pipe.drag-origin{opacity:.34;filter:saturate(.65)}
.board-pipe-ghost{width:64px;height:64px}
.moving-pipe .place-cell{box-shadow:inset 0 0 0 2px rgba(28,174,161,.36)}
.moving-pipe .place-cell:hover{background:#f0f7cf;box-shadow:inset 0 0 0 3px #e8bf4b}
@media(prefers-reduced-motion:reduce){.pipe-bridge-water{animation:none!important}}


/* v0.55 Battle Flow */
.battle-frame{width:calc(170px + var(--board-size) + 216px + 24px)}
.battle-layout{display:grid;grid-template-columns:170px var(--board-size) 216px;gap:12px;align-items:start}
.battle-left-rail{width:170px}.battle-right-rail{width:216px}.battle-stage{width:var(--board-size)}
.battle-player-card b{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.battle-progress{height:10px;margin-top:8px;border-radius:999px;background:#dfe8eb;overflow:hidden}.battle-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1b9ecb,#20aaa0);transition:width .25s ease}.battle-progress.enemy i{background:linear-gradient(90deg,#7a6ce2,#b05ad0)}
.battle-attacks{display:grid;gap:7px}.battle-attack{min-height:64px;padding:5px;border:1px solid var(--line);border-radius:12px;background:#f6fafb;display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;gap:0 7px}.battle-attack>span,.battle-attack>img{grid-row:1/-1;width:42px;height:42px}.battle-attack b{font-size:.68rem}.battle-attack small{font-size:.52rem;color:var(--muted)}.battle-attack:not(:disabled):hover{border-color:#3ab2c4;background:#edf9fb}.battle-attack:disabled{opacity:.45}.battle-flow-card{margin-top:auto}.battle-mobile-strip{display:none}
.battle-tray{width:var(--board-size);height:72px;margin-left:182px;padding:5px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-soft);display:flex;gap:5px}.battle-tray>.pipe-tray{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;overflow:visible}.battle-tray .tray-pipe{min-width:0;max-width:none;height:60px;min-height:0;max-height:none;padding:3px;grid-template-columns:1fr;grid-template-rows:42px auto;text-align:center;gap:0}.battle-tray .tray-pipe-art{width:100%;height:40px}.battle-tray .tray-pipe-label{font-size:.50rem}.battle-mobile-actions{display:none}
.battle-obstacle.incoming,.battle-locked-pipe{animation:obstacleSpawn .38s cubic-bezier(.2,.9,.2,1.15)}
.battle-lobby{width:min(900px,calc(100vw - 28px));padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow);display:grid;gap:18px}.battle-lobby-brand{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:18px;padding:16px;border-radius:18px;background:linear-gradient(135deg,#0e3449,#0b5264);color:#fff}.battle-lobby-brand img{width:118px;height:118px;object-fit:contain}.battle-lobby-brand small{font-size:.58rem;letter-spacing:.12em;color:#83e2ef;font-weight:900}.battle-lobby-brand h2{margin:5px 0;font-size:1.55rem}.battle-lobby-brand p{margin:0;color:#d7edf3;line-height:1.45}.battle-lobby-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.battle-big-btn{min-height:88px;display:grid;align-content:center;gap:3px;text-align:left;padding:14px}.battle-big-btn b{font-size:1rem}.battle-big-btn span{font-size:.68rem;opacity:.82}.battle-join{grid-column:1/-1;display:grid;grid-template-columns:1fr 160px;gap:8px}.battle-join input{height:48px;border:1px solid var(--line-strong);border-radius:12px;padding:0 14px;font:inherit;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.battle-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.battle-rules>div{padding:10px;border:1px solid var(--line);border-radius:13px;background:#f6fafb;text-align:center}.battle-rules b{display:block;color:#178ea2;font-size:1.2rem}.battle-rules span{font-size:.62rem;color:var(--muted)}.battle-signin-card{padding:18px;border:1px solid var(--line);border-radius:16px;text-align:center}.battle-signin-card p{color:var(--muted)}.battle-message{padding:10px 12px;border-radius:12px;background:#eef9f3;color:#31744b}.battle-waiting{width:min(600px,94vw);padding:34px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow);text-align:center}.battle-waiting small{display:block;color:#168b9b;font-weight:900;letter-spacing:.12em}.battle-room-code{margin:18px auto;padding:14px 18px;width:max-content;border:2px dashed #1a9fc2;border-radius:14px;background:#effaff;font-size:2rem;font-weight:950;letter-spacing:.18em;color:#0b5670}.battle-spinner{width:52px;height:52px;margin:0 auto 15px;border:5px solid #dceff4;border-top-color:#1aa0c4;border-radius:50%;animation:battleSpin .8s linear infinite}@keyframes battleSpin{to{transform:rotate(360deg)}}

/* v0.57 Battle Flow lobby rebuild */
.battle-lobby-frame{width:min(1180px,calc(100vw - 24px))}
.battle-lobby{width:100%;padding:14px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.98);box-shadow:var(--shadow);display:grid;gap:12px;overflow:hidden}
.battle-lobby-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.85fr);gap:12px;min-height:390px}
.battle-lobby-hero{min-width:0;padding:16px;border-radius:18px;background:radial-gradient(circle at 20% 8%,rgba(25,181,217,.20),transparent 28%),linear-gradient(145deg,#082f49,#0a5270 58%,#0e6d7d);color:#fff;display:grid;grid-template-rows:auto 1fr auto;gap:12px;overflow:hidden}
.battle-lobby-wordmark{display:flex;align-items:center;gap:12px}.battle-lobby-wordmark>img{width:80px;height:80px;object-fit:contain}.battle-lobby-wordmark>div{display:grid;gap:1px}.battle-lobby-wordmark small{font-size:.48rem;letter-spacing:.18em;color:#92eaff;font-weight:900}.battle-lobby-wordmark strong{font-size:1.72rem;line-height:.95;color:#fff;text-shadow:0 4px 14px rgba(0,0,0,.22)}.battle-lobby-wordmark strong span{color:#39d3ff}.battle-lobby-wordmark em{font-style:normal;font-size:.62rem;color:#d8f5fb}
.battle-versus-preview{min-height:190px;display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:8px;align-items:center}.battle-versus-preview>b{font-size:2rem;text-align:center;color:#fff;text-shadow:0 0 18px rgba(89,214,255,.55)}.battle-preview-player{position:relative;min-width:0;padding:7px;border-radius:14px;background:rgba(3,27,43,.38);border:1px solid rgba(255,255,255,.14)}.battle-preview-player>span{position:absolute;z-index:3;left:9px;top:9px;padding:3px 7px;border-radius:999px;background:#138dbe;color:#fff;font-size:.45rem;font-weight:900;letter-spacing:.09em}.battle-preview-player.red>span{left:auto;right:9px;background:#b84b55}.battle-preview-board{width:100%;aspect-ratio:1.28;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:1px;padding:4px;border:3px solid #557a5d;border-radius:10px;background:#acd083;overflow:hidden}.battle-preview-cell{position:relative;min-width:0;min-height:0;display:grid;place-items:center;background:#dff0bb;border-radius:2px;overflow:hidden}.battle-preview-cell .pipe-piece,.battle-preview-cell .endpoint-piece{width:100%;height:100%}.battle-preview-cell.obstacle img{width:65%;height:65%}.battle-lobby-copy{text-align:center}.battle-lobby-copy h2{margin:0 0 5px;font-size:1.05rem}.battle-lobby-copy p{margin:0 auto;max-width:620px;color:#d2edf4;font-size:.72rem;line-height:1.45}
.battle-matchmaking{min-width:0;display:grid;grid-template-rows:auto auto auto auto;gap:10px}.battle-match-card{min-width:0;min-height:84px;padding:10px 12px;border:0;border-radius:15px;color:#fff;display:grid;grid-template-columns:48px minmax(0,1fr) 24px;align-items:center;gap:10px;text-align:left;box-shadow:0 10px 20px rgba(13,80,104,.14)}.battle-match-card.quick{background:linear-gradient(135deg,#169c96,#1fb3a6)}.battle-match-card.create{background:linear-gradient(135deg,#1288bf,#179dd4)}.battle-match-card>span:nth-child(2){display:grid;gap:3px}.battle-match-card b{font-size:.92rem}.battle-match-card small{font-size:.61rem;color:rgba(255,255,255,.88)}.battle-match-card>strong{font-size:1.35rem}.battle-match-icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(4,55,76,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}.battle-match-icon img{width:25px;height:25px;filter:brightness(0) invert(1)}.battle-match-card:hover{transform:translateY(-1px);filter:saturate(1.05)}
.battle-join-card{min-width:0;padding:11px;border:1px solid var(--line);border-radius:15px;background:#fff;display:grid;gap:9px}.battle-join-heading{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:9px}.battle-join-heading>span:last-child{display:grid;gap:2px}.battle-join-heading b{font-size:.88rem}.battle-join-heading small{font-size:.6rem;color:var(--muted)}.battle-match-icon.join{background:linear-gradient(145deg,#63b8e7,#2d96c9)}.battle-join-row{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:7px}.battle-join-row input{min-width:0;height:42px;padding:0 11px;border:1px solid var(--line-strong);border-radius:10px;font:inherit;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.battle-join-row button{min-width:0;height:42px}
.battle-account-note{min-width:0;min-height:39px;padding:7px 10px;border:0;border-radius:11px;background:#fff1bd;color:#745b19;display:flex;align-items:center;gap:7px;text-align:left;font-size:.62rem}.battle-account-note img{width:18px;height:18px;filter:sepia(1) saturate(.8)}.battle-account-note.connected{background:#e9f8ef;color:#32714d}.battle-account-note.connected img{filter:none}.battle-account-note b{font-weight:900}
.battle-rule-cards>div{min-height:94px;padding:10px 12px;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:9px;text-align:left;background:#fff}.battle-rule-cards p{margin:0;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:0 6px}.battle-rule-cards p>b{font-size:1.45rem;line-height:1;color:#168ea4}.battle-rule-cards p>strong{font-size:.64rem;color:#294e60}.battle-rule-cards p>small{grid-column:1/-1;margin-top:4px;font-size:.56rem;line-height:1.32;color:var(--muted)}.battle-rule-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:950;font-size:.86rem;box-shadow:0 6px 14px rgba(11,83,112,.16)}.battle-rule-icon.flag{background:linear-gradient(145deg,#168ec9,#31ade3)}.battle-rule-icon.energy{background:linear-gradient(145deg,#20a77e,#55cbaa)}.battle-rule-icon.attack{background:linear-gradient(145deg,#7254cd,#9b74e5)}
.battle-how{min-height:50px;padding:8px 12px;border:1px solid #b8dfe9;border-radius:13px;background:#edf9fd;display:flex;align-items:center;gap:10px}.battle-how img{width:31px;height:31px}.battle-how div{display:grid;gap:2px}.battle-how b{font-size:.72rem;color:#194f67}.battle-how span{font-size:.58rem;color:#5b7886}

/* v0.58 mobile gesture + pipe containment + universal flow visibility */
body.game-active,.game-shell,.game-frame,.game-board,.game-board button{touch-action:none;-webkit-user-select:none;user-select:none}
.game-board{overflow:visible}
.tile.pipe,.a-tile.pipe,.pipe-rotate,.game-board .pipe-piece,.game-board .pipe-svg-art{overflow:visible}
.game-board .pipe-piece{padding:0;transform-origin:50% 50%}
.pipe-piece.flowing .pipe-water-flow,.pipe-piece.flowing .pipe-bridge-water{animation:waterTravel .52s linear infinite}
.pipe-piece.flowing .pipe-channel.wet{animation:waterChannelPulse 1s ease-in-out infinite alternate}
@keyframes waterChannelPulse{from{opacity:.78}to{opacity:1}}

/* v0.62 online Battle stats */
.battle-player-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.battle-player-stats>div{padding:7px 4px;border:1px solid var(--line);border-radius:10px;background:#f6fafb;text-align:center}.battle-player-stats b{display:block;font-size:.82rem;color:#168ea4}.battle-player-stats small{display:block;margin-top:1px;font-size:.44rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.battle-player-stats>span{grid-column:1/-1;padding:8px;color:var(--muted);font-size:.56rem;text-align:center}

/* v0.71 Puzzle hint: reveal, never auto-solve. */
.game-board .hint-cell{position:relative;z-index:5;box-shadow:inset 0 0 0 3px #f4c43d,0 0 0 2px rgba(244,196,61,.22)!important;animation:hintPulse 1.05s ease-in-out infinite}
@keyframes hintPulse{0%,100%{filter:none}50%{filter:brightness(1.08)}}
@media(prefers-reduced-motion:reduce){.game-board .hint-cell{animation:none!important}}

/* v0.72 Puzzle live mission/status panel */
.puzzle-live-panel{display:none;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.94);box-shadow:var(--shadow-soft);padding:10px;gap:8px}
.puzzle-live-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.puzzle-live-summary span{display:grid;place-items:center;padding:7px 5px;border:1px solid var(--line);border-radius:11px;background:#f7fbfc;text-align:center}
.puzzle-live-summary b{font-size:.86rem;color:#123a50}.puzzle-live-summary small{font-size:.48rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.puzzle-live-message{display:flex;align-items:center;gap:7px;padding:8px 10px;border-radius:11px;background:#eef8fb;color:#174a5d}
.puzzle-live-message.warn{background:#fff3e4;color:#8a5621}.puzzle-live-message.ready{background:#e9f8ef;color:#23653a}
.puzzle-live-message img{width:20px;height:20px}.puzzle-live-message b{font-size:.68rem}
.puzzle-star-guide{display:flex;gap:6px;flex-wrap:wrap}.puzzle-star-guide span{padding:5px 7px;border-radius:999px;background:#f7fbfc;border:1px solid var(--line);font-size:.53rem;color:#55707d}.puzzle-star-guide b{color:#d6a11b}

/* v0.72 turn-based Battle Flow */
.battle-turn-preview{display:grid;grid-template-columns:72px 40px 72px;align-items:center;justify-content:center;gap:8px;margin:10px auto;padding:12px;border-radius:18px;background:rgba(7,38,58,.38);border:1px solid rgba(255,255,255,.14)}
.battle-turn-preview>div{height:72px;display:grid;place-items:center}.battle-turn-preview svg{width:64px;height:64px}.battle-turn-preview>span{font-size:1.7rem;font-weight:950;color:#fff;text-align:center}
.turn-battle-frame{max-width:1320px;margin:0 auto}.turn-battle-status{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-soft)}
.turn-battle-status small{display:block;font-size:.5rem;letter-spacing:.1em;color:#178b99;font-weight:900}.turn-battle-status b{font-size:.92rem}.turn-scores{display:flex;gap:8px}.turn-scores span{padding:6px 8px;border-radius:9px;background:#f3f9fb;font-size:.57rem}.turn-scores b{margin-left:4px}
.turn-battle-layout{display:grid;grid-template-columns:minmax(0,var(--board-size)) 230px;gap:12px;justify-content:center;align-items:start}.turn-battle-stage{width:var(--board-size)}.turn-board-label{height:26px;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:850;color:#356171}.turn-battle-board{width:var(--board-size);height:var(--board-size)}
.turn-battle-rail{display:flex;flex-direction:column;gap:8px}.turn-card{display:grid;gap:8px}.turn-draw{display:grid;place-items:center;min-height:150px;border-radius:14px;background:#eef7f9;border:1px solid var(--line)}.turn-draw.waiting{opacity:.7}.turn-draw-piece{display:grid;place-items:center;gap:5px}.turn-draw-piece.pipe svg{width:112px;height:112px}.turn-draw-piece.obstacle img{width:88px;height:88px}.turn-draw-piece b{font-size:.76rem}.turn-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.turn-actions button{min-height:42px}

/* v0.75 guest Battle identity */
.battle-account-note.guest{justify-content:flex-start;background:#eef8fb;color:#245a6d}
.battle-account-note.guest span{display:grid;gap:1px;min-width:0;flex:1}
.battle-account-note.guest small{font-size:.48rem;color:#6c8b97;font-weight:700}
.battle-account-note.guest button{margin-left:auto;min-height:30px;padding:4px 9px;border:1px solid #acd6e2;border-radius:9px;background:#fff;color:#167e96;font-size:.58rem;font-weight:900}

/* v0.78 level pagination + mobile status panels */
.mobile-mode-info,.mobile-mode-guide{display:none}.battle-waiting{margin-left:auto;margin-right:auto}.battle-lobby{margin-left:auto;margin-right:auto}

/* v0.83: mobile-only guide cards stay hidden on desktop; this prevents SVG guide icons from expanding into the unused desktop viewport. */

/* v0.89 Battle turn correction controls */
.turn-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.turn-actions [data-turn-remove].active{background:#fff0ef;border-color:#e89b93;color:#a83b32}
.remove-choice-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff0ef;border:2px solid #e89b93;color:#b13d34;font-size:2rem;font-weight:950}
.removable-pipe{position:relative;cursor:pointer;border:2px solid #e9958d!important;background:#fff1ef!important}
.remove-mark{position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#c7463d;color:white;font-size:1rem;font-weight:950;line-height:1;z-index:5}

/* Battle protected/tool targets */
.turn-battle-board .protected-cell{background:linear-gradient(135deg,#e7f1dc,#dbeaca);box-shadow:inset 0 0 0 2px rgba(44,116,91,.12)}
.turn-battle-board .tool-target{outline:2px solid #f0a72d;outline-offset:-3px;cursor:pointer}
.turn-draw-piece.tool img{filter:drop-shadow(0 4px 7px rgba(25,68,77,.2))}

/* v0.95 Battle setup + private invite */
.battle-setup{min-height:0;display:grid;place-items:center;padding:24px;overflow:auto}
.battle-setup-card{width:min(720px,100%);display:grid;gap:18px;padding:24px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 20px 48px rgba(17,64,82,.14)}
.battle-setup-heading{display:grid;gap:5px;text-align:center}.battle-setup-heading small{font-weight:900;letter-spacing:.15em;color:#1597a6}.battle-setup-heading h2,.battle-setup-heading p{margin:0}.battle-setup-heading p{color:var(--muted)}
.battle-difficulty-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.battle-difficulty{min-height:78px;padding:11px;border:1px solid var(--line);border-radius:16px;background:#f7fbfc;color:#274d60;display:grid;place-items:center;gap:3px}.battle-difficulty b{font-size:.9rem}.battle-difficulty span{font-size:.62rem;color:var(--muted)}.battle-difficulty.active{border-color:#20a9aa;background:#e9fbf8;box-shadow:inset 0 0 0 1px #20a9aa;color:#087d87}
.battle-setup-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.battle-setup-facts span{padding:11px;border-radius:14px;background:#f5f9fa;display:grid;gap:3px}.battle-setup-facts b{font-size:.7rem}.battle-setup-facts small{font-size:.58rem;color:var(--muted);line-height:1.35}.battle-setup-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:9px}
.battle-invite-actions{width:min(390px,100%);display:grid;grid-template-columns:1.2fr 1fr;gap:8px}.battle-room-meta{margin:-4px 0 2px;color:var(--muted);font-size:.72rem;font-weight:800}
@media(max-width:700px){.battle-setup{padding:12px 10px max(14px,env(safe-area-inset-bottom))}.battle-setup-card{padding:16px;gap:13px;border-radius:19px}.battle-difficulty-grid{grid-template-columns:1fr 1fr}.battle-setup-facts{grid-template-columns:1fr}.battle-setup-actions,.battle-invite-actions{grid-template-columns:1fr 1fr}.battle-difficulty{min-height:64px}}

/* v1.0.5 Battle: compact help instead of permanent probability cards. */
.battle-lobby{position:relative}
.battle-help-wrap{position:absolute;top:14px;right:14px;z-index:8}
.battle-help-btn{width:34px;height:34px;border:1px solid #b8dce5;border-radius:50%;background:#fff;color:#147f98;font:900 1rem/1 system-ui;display:grid;place-items:center;cursor:pointer;box-shadow:0 5px 14px rgba(11,83,112,.12)}
.battle-help-btn:hover,.battle-help-btn:focus-visible{background:#edfafd;outline:2px solid rgba(25,158,190,.2);outline-offset:2px}
.battle-help-popover{position:absolute;top:42px;right:0;width:min(330px,calc(100vw - 42px));padding:13px 14px;border:1px solid #b8dce5;border-radius:14px;background:#fff;box-shadow:0 16px 34px rgba(9,61,79,.2);display:none;gap:7px;color:#244b5d;text-align:left}
.battle-help-popover b{font-size:.82rem;color:#0b667d}.battle-help-popover span{display:block;font-size:.7rem;line-height:1.35}.battle-help-popover span strong{color:#138ba2}.battle-help-popover small{display:block;margin-top:3px;font-size:.62rem;line-height:1.45;color:var(--muted)}
.battle-help-wrap:hover .battle-help-popover,.battle-help-wrap:focus-within .battle-help-popover,.battle-help-wrap.open .battle-help-popover{display:grid}

/* Personal Journey records: time, completed attempts, and self record to beat. */
.puzzle-record-to-beat{min-width:0;text-align:right}.puzzle-record-to-beat small{font-size:.48rem!important;text-transform:uppercase;letter-spacing:.06em;color:#168b9b!important;font-weight:900}.puzzle-record-to-beat b{display:block;margin:2px 0;font-size:.74rem;color:#163d51}.puzzle-record-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;align-items:stretch}.puzzle-record-strip span{display:grid;place-items:center;padding:6px 4px;border:1px solid var(--line);border-radius:10px;background:#eef9f8;text-align:center}.puzzle-record-strip small{font-size:.43rem;color:#168b9b;text-transform:uppercase;letter-spacing:.06em;font-weight:900}.puzzle-record-strip b{font-size:.78rem;color:#163d51}.puzzle-record-strip em{grid-column:1/-1;margin-top:-1px;text-align:center;color:var(--muted);font-size:.49rem;font-style:normal}.puzzle-result-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.puzzle-result-record{margin:10px 0 14px;padding:11px;border:1px solid var(--line);border-radius:15px;background:#f6fbfc;text-align:center}.puzzle-result-record.new-record{background:#eef9ef;border-color:#b9dfc2}.puzzle-result-record>b{display:block;margin-bottom:8px;color:#245267;font-size:.78rem}.puzzle-result-record>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.puzzle-result-record span{min-width:0;padding:6px 3px;border-radius:9px;background:#fff}.puzzle-result-record small{display:block;font-size:.43rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.puzzle-result-record strong{display:block;margin-top:2px;font-size:.75rem;color:#163d51;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.journey-history-node>em{grid-column:1/-1;margin-top:3px;color:#168b9b;font-size:.49rem;font-style:normal;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* Personal performance loop — v1.0.5 */
.personal-record-card{border-color:rgba(59,130,246,.3)}
.personal-record-card>b{font-variant-numeric:tabular-nums}
.mobile-record-strip{display:none;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border:1px solid rgba(59,130,246,.24);border-radius:14px;background:rgba(255,255,255,.72);font-size:12px;line-height:1.2}
.mobile-record-strip span{min-width:0}.mobile-record-strip b{font-size:13px;font-variant-numeric:tabular-nums}
.personal-record-message{margin:10px auto 0;padding:9px 12px;max-width:440px;border-radius:12px;background:rgba(15,23,42,.06);font-weight:700;text-align:center}
.personal-record-message.is-new{background:rgba(16,185,129,.12)}