:root{--gold:#d6b866;--gold-soft:#f0d794;--ink:#07090f;--ivory:#f2ead8;--muted:#bdb29a;--line:#6d592e}
*{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark}
body{min-height:100svh;background:radial-gradient(circle at 50% 10%,#22354a 0,#111927 26%,#090d16 55%,#05070c 100%);color:var(--ivory);font-family:Arial,sans-serif}
.game-sitebar{position:relative;z-index:40;display:flex;width:100%;min-height:52px;align-items:center;justify-content:space-between;border-bottom:1px solid #65542d;padding:8px max(12px,env(safe-area-inset-left));background:linear-gradient(180deg,#12151e,#090a0f);box-shadow:0 10px 28px #0009}
.game-sitebrand{color:#eee6d5;font:700 .82rem Arial,sans-serif;letter-spacing:.08em;text-decoration:none}
.game-sitebrand span{color:var(--gold)}
.game-home-button{display:inline-flex;min-height:34px;align-items:center;justify-content:center;border:1px solid #f4dfa5;border-radius:999px;padding:8px 18px;background:linear-gradient(110deg,#8e6725,#f3dc91 48%,#9d7229);box-shadow:inset 0 1px #fff9,0 5px 18px #0008;color:#090806;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}
.game-shell{width:min(100%,660px);margin:auto;padding:8px 10px calc(14px + env(safe-area-inset-bottom))}
.scorebar{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:5px;border:1px solid #6e592e;border-radius:13px;background:linear-gradient(180deg,#14151acc,#080a10e8);box-shadow:inset 0 1px #fff1,0 7px 20px #0007;overflow:hidden}
.scorebar.is-timer-hidden{grid-template-columns:repeat(2,1fr)}
.scorebar>div{padding:7px 2px;border-right:1px solid #493b21;text-align:center}
.scorebar>div:last-child,.scorebar.is-timer-hidden>div:nth-child(2){border-right:0}
.scorebar span{display:block;color:#aaa086;font-size:8px;letter-spacing:.14em}
.scorebar strong{display:block;margin-top:2px;color:var(--gold-soft);font:400 19px Georgia,serif;text-shadow:0 0 15px #f0d79433}
.premium-stage{position:relative;margin-top:5px}
.message{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.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 .36s cubic-bezier(.2,.9,.22,1.25),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 .game-sitebar,.preview-capture .ad-reservation{display:none}
.preview-capture .game-shell{padding-top:0}
.demo-bar{margin:5px 0}
.primary-button,.secondary-button{display:flex;width:100%;min-height:44px;align-items:center;justify-content:center;border-radius:11px;padding:9px 15px;font-weight:800;cursor:pointer}
.primary-button{border:1px solid #f4dc92;background:linear-gradient(110deg,#ad8030,#f0d98d,#ad8030);color:#080705}
.secondary-button{border:1px solid #796438;background:linear-gradient(180deg,#171920,#0c0e13);color:var(--gold-soft)}
button:disabled{cursor:not-allowed;opacity:.45}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #fff0b1;outline-offset:2px}
dialog{width:min(450px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;border:1px solid #806b3c;border-radius:20px;padding:20px;background:#11131a;color:var(--ivory);box-shadow:0 25px 100px #000e;overflow:auto}
dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.dialog-top h2,dialog h2{margin:0;color:var(--gold-soft);font:400 27px Georgia,serif}
dialog .icon-button{display:grid;width:39px;height:39px;place-items:center;border:1px solid #65552e;border-radius:50%;padding:0;background:#15130e;color:#f0d794;font-size:18px;cursor:pointer}
.select-field,.switch-row{display:flex;min-height:58px;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #3b321f}
.select-field span{display:block}.select-field small{display:block;max-width:245px;margin-top:3px;color:#9e927b;font-size:11px}
.select-field select{min-width:116px;border:1px solid #796439;border-radius:9px;padding:9px;background:#080a0f;color:var(--ivory)}
.switch-row input{width:22px;height:22px;accent-color:var(--gold)}
form>.primary-button{margin-top:17px}
.account-benefit-prompt,.account-record-panel,.demo-panel,.info-content-card{margin-top:12px;border:1px solid #554724;border-radius:14px;padding:14px;background:#0b0d12}
.account-benefit-eyebrow,.eyebrow{display:block;margin:0 0 7px;color:#aa9159;font-size:9px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}
.account-benefit-prompt strong,.account-record-panel strong{color:var(--gold-soft)}
.account-benefit-prompt p,.account-record-panel p,.demo-panel p,.info-content-card p{color:#bdb39f;font-size:13px;line-height:1.55}
.account-benefit-actions{display:grid;gap:10px}.account-login-link{color:var(--gold-soft);font-size:12px;text-align:center}
.demo-panel h3,.info-content-card h3{margin:0 0 7px;color:var(--gold-soft);font:400 20px Georgia,serif}
.game-menu-guide-list{display:grid;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.game-menu-guide-list li{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:9px}.game-menu-guide-list p{margin:0}
.game-menu-guide-icon{display:grid;width:32px;height:32px;place-items:center;border:1px solid #6f5a31;border-radius:50%;color:var(--gold-soft)}
.info-symbol{font:italic 700 15px Georgia,serif}
.dialog-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.dialog-buttons .primary-button{margin:0}
.result-dialog{text-align:center}.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}
.result-stats{display:grid;grid-template-columns:repeat(2,1fr);margin:16px 0;border-block:1px solid #493d25}.result-stats>div{padding:10px;border-right:1px solid #493d25}.result-stats>div:last-child{border-right:0}
.result-stats strong,.result-stats span{display:block}.result-stats strong{color:var(--gold-soft);font:400 23px Georgia,serif}.result-stats span{margin-top:4px;color:#9f947e;font-size:8px;letter-spacing:.12em}
.record-status{min-height:18px;color:#b9ae98;font-size:12px}.result-close{margin-top:8px}.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){.game-shell{padding-inline:7px}.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){.game-shell{width:min(90vw,790px)}.pipe-board{gap:5px}.scorebar>div{padding:10px}.scorebar strong{font-size:24px}}
@media(orientation:landscape) and (max-height:800px){.game-shell{width:min(680px,100%)}.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}}