/* Game surface and game-specific controls only. */
.highlow-shell,.play-area,.card-table{
  overscroll-behavior:none;
  touch-action:manipulation;
}
.card,.number-card{
  touch-action:manipulation;
}
.premium-stage{position:relative;margin-top:5px}
.pipe-board{--size:4;position:relative;z-index:1;display:grid;width:100%;aspect-ratio:1;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);gap:3px;margin:auto;border:0;border-radius:16px;padding:0;background:radial-gradient(circle at 50% 45%,#17334c55,transparent 62%),linear-gradient(145deg,#05070dd9,#0a111bd9);box-shadow:inset 0 0 30px #000e,0 0 18px #55dffa0d;touch-action:manipulation}
.pipe-cell{position:relative;display:grid;min-width:0;min-height:0;place-items:center;border:1px solid #80632d99;border-radius:16px;background:radial-gradient(circle at 50% 42%,#172b3d 0,#09101a 57%,#030509 100%);box-shadow:inset 0 1px 0 #fff2,inset 0 -5px 12px #000c,0 3px 7px #0009;overflow:visible}
.pipe-cell::before,.pipe-cell::after{position:absolute;z-index:0;width:4px;height:4px;border:1px solid #4a3211;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f2cd73,#664315 58%,#160d05 100%);content:"";opacity:.75}
.pipe-cell::before{top:6px;left:6px}
.pipe-cell::after{right:6px;bottom:6px}
.pipe-cell.empty{border-color:#20384b88;background:radial-gradient(circle,#14324777 0 3px,#09121c 4px 35%,#030509 78%);box-shadow:inset 0 0 18px #000e,0 2px 6px #0008}
.pipe-cell.empty::before{inset:50% auto auto 50%;width:6px;height:6px;border:0;background:#54dff0;box-shadow:0 0 15px #4de9ff;transform:translate(-50%,-50%);opacity:.24}
.pipe-cell.empty::after{display:none}
.pipe-tile{position:relative;z-index:1;width:100%;height:100%;border:1px solid #c59a4c99;border-radius:15px;padding:0;background:radial-gradient(circle at 42% 34%,#2b3e50 0,#101925 38%,#05080d 77%);box-shadow:inset 0 1px 0 #fff4,inset 0 0 17px #3b98b51c,0 4px 9px #000b;cursor:pointer;overflow:visible;transition:border-color .22s ease,box-shadow .22s ease,transform .12s ease}
.pipe-tile:hover{border-color:#efd785;box-shadow:inset 0 1px #fff5,inset 0 0 20px #52dff02b,0 4px 11px #000c}
.pipe-tile:active{transform:scale(.965)}
.pipe-art{position:absolute;z-index:2;inset:-3%;background-position:center;background-repeat:no-repeat;background-size:contain;filter:brightness(.94) saturate(.96) drop-shadow(0 3px 3px #000c);transform:rotate(calc(var(--rotation)*90deg));transform-origin:50% 50%;transition:transform .44s cubic-bezier(.22,1.65,.42,1),filter .28s ease;pointer-events:none}
.pipe-art.type-straight{background-image:url('assets/pipe-straight-v2.webp?v=20261001-2')}
.pipe-art.type-elbow{background-image:url('assets/pipe-elbow-v2.webp?v=20261001-2')}
.pipe-art.type-tee{background-image:url('assets/pipe-tee-v2.webp?v=20261001-2')}
.pipe-art.type-cap{background-image:url('assets/pipe-cap-v2.webp?v=20261001-2')}
.pipe-board[data-pipe-style="red"] .pipe-art.type-straight{background-image:url('assets/pipe-straight-red.webp?v=20261001-4')}
.pipe-board[data-pipe-style="red"] .pipe-art.type-elbow{background-image:url('assets/pipe-elbow-red.webp?v=20261001-4')}
.pipe-board[data-pipe-style="red"] .pipe-art.type-tee{background-image:url('assets/pipe-tee-red.webp?v=20261001-4')}
.pipe-board[data-pipe-style="red"] .pipe-art.type-cap{background-image:url('assets/pipe-cap-red.webp?v=20261001-4')}
.arm,.pipe-hub{display:none}
.pipe-tile.is-powered{border-color:#baf7ff;box-shadow:inset 0 0 23px #46ddff4f,0 0 15px #39dbff88,0 4px 10px #000b}
.pipe-tile.is-powered .pipe-art{filter:brightness(1.18) saturate(1.12) drop-shadow(0 0 5px #5cecff) drop-shadow(0 4px 3px #000b);animation:energy-breathe 1.8s ease-in-out infinite alternate}
.pipe-tile.endpoint{cursor:default}
.pipe-tile.start{border-color:#e59e6d;box-shadow:inset 0 0 24px #ff34584a,0 0 13px #ff3c6380}
.pipe-tile.goal{border-color:#8fbaff;box-shadow:inset 0 0 24px #347ff64a,0 0 13px #3f89ff80}
.endpoint-badge{position:absolute;z-index:4;display:grid;inset:22%;place-items:center;border:2px solid #ffe6a1;border-radius:50%;color:#fff;font-size:clamp(7px,2.3vw,12px);font-weight:900;letter-spacing:.04em;text-shadow:0 1px 3px #000}
.endpoint-badge::before{position:absolute;inset:-6px;z-index:-1;border:1px solid #8e6d31;border-radius:50%;box-shadow:inset 0 0 0 2px #241606,0 0 11px #000b;content:""}
.start .endpoint-badge{background:radial-gradient(circle at 35% 30%,#ff8b9d,#7c112c 36%,#22040d 78%);box-shadow:inset 0 2px #fff5,0 0 16px #ff365c}
.goal .endpoint-badge{background:radial-gradient(circle at 35% 30%,#79d8ff,#174d9b 36%,#061638 78%);box-shadow:inset 0 2px #fff5,0 0 16px #3e8cff}
.ad-reservation{display:grid;min-height:42px;margin-top:10px;place-items:center;border:1px dashed #40361f;border-radius:10px;color:#6e6658;font-size:8px;letter-spacing:.15em;text-transform:uppercase}
.preview-capture .ad-reservation{display:none}
.result-energy{display:grid;width:62px;height:62px;margin:12px auto;place-items:center;border:1px solid #5cecff;border-radius:50%;color:#9ef8ff;font-size:30px;box-shadow:0 0 20px #3ce4ff88}
.pipe-tile.endpoint:disabled{opacity:1}
@keyframes energy-breathe{from{filter:brightness(1.08) saturate(1.05) drop-shadow(0 0 3px #5cecff) drop-shadow(0 4px 3px #000b)}to{filter:brightness(1.26) saturate(1.2) drop-shadow(0 0 8px #73f2ff) drop-shadow(0 4px 3px #000b)}}
@media(max-width:390px){.pipe-board{gap:3px;border-radius:12px}
.pipe-cell,.pipe-tile{border-radius:11px}
.pipe-art{inset:-4%}}
@media(min-width:700px) and (orientation:portrait){.pipe-board{gap:5px}}
@media(orientation:landscape) and (max-height:800px){.premium-stage{width:min(100%,70vh);margin-inline:auto}
.pipe-board{width:100%}
.ad-reservation{display:none}}
@media(prefers-reduced-motion:reduce){.pipe-art{transition:none}
.pipe-tile.is-powered .pipe-art{animation:none}}
.pipe-board[data-reduced-motion="true"] .pipe-art{transition:none;animation:none}
.guided-demo-focus{position:relative;z-index:2;outline:3px solid #f0d98e!important;outline-offset:4px;filter:drop-shadow(0 0 10px #d9bc78aa);animation:guided-demo-pulse .9s ease-in-out infinite alternate}
@keyframes guided-demo-pulse{from{outline-offset:2px;filter:drop-shadow(0 0 4px #d9bc7866)}to{outline-offset:7px;filter:drop-shadow(0 0 14px #f0d98ecc)}}
.guided-demo-running main>:not(.demo-bar){animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.guided-demo-focus{animation:none!important}}