:root{--gold:#d6b866;--gold-soft:#f0d794;--ink:#080808;--ivory:#f2ead8;--muted:#bdb29a}*{box-sizing:border-box}html{background:var(--ink);color-scheme:dark}body{margin:0;background:radial-gradient(circle at 50% 18%,#201a11,#080808 57%);color:var(--ivory);font-family:Arial,sans-serif}.home-bar{position:sticky;top:0;z-index:30;display:flex;width:100%;min-height:calc(52px + env(safe-area-inset-top));align-items:center;justify-content:center;gap:10px;border-bottom:1px solid #f4dfa5;padding:env(safe-area-inset-top) 18px 0;background:linear-gradient(110deg,#b18a38,#f0d98e 48%,#b18a38);box-shadow:0 8px 28px #0009,inset 0 1px #fff8;color:#090806;font-size:.88rem;font-weight:850;letter-spacing:.16em;text-decoration:none;text-transform:uppercase}.game-shell{width:min(100%,560px);min-height:calc(100svh - 52px);margin:auto;padding:10px 12px calc(15px + env(safe-area-inset-bottom))}.scorebar{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:6px;border-block:1px solid #443920}.scorebar.is-timer-hidden{grid-template-columns:repeat(2,1fr)}.scorebar>div{padding:6px 2px;border-right:1px solid #3c321d;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:.12em}.scorebar strong{display:block;margin-top:2px;color:var(--gold-soft);font:normal 18px Georgia,serif}.message{min-height:17px;margin:3px 0 7px;color:#ddd2ba;font-size:12px;line-height:1.35;text-align:center}.pipe-board{--size:4;display:grid;width:min(100%,500px);aspect-ratio:1;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);gap:5px;margin:auto;border:1px solid #4c4028;border-radius:22px;padding:10px;background:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px),radial-gradient(circle at 50% 40%,#143140,#0b1117 68%);background-size:22px 22px,22px 22px,auto;box-shadow:inset 0 1px #fff2,0 18px 44px #000a;touch-action:manipulation}.pipe-cell{position:relative;display:grid;min-width:0;min-height:0;place-items:center;border:1px solid #ffffff14;border-radius:14px;background:linear-gradient(145deg,#ffffff0d,#0004);overflow:hidden}.pipe-cell.empty:after{content:"";width:5px;height:5px;border-radius:50%;background:#80c4d533;box-shadow:0 0 7px #5bd8f733}.pipe-tile{--pipe:#f26365;position:relative;width:100%;height:100%;border:1px solid color-mix(in srgb,var(--pipe) 55%,#fff 20%);border-radius:14px;padding:0;background:radial-gradient(circle at 45% 42%,color-mix(in srgb,var(--pipe) 16%,#17202a),#0d1117 72%);box-shadow:inset 0 1px #fff2,0 3px 8px #0007;cursor:pointer}.pipe-tile.palette-0{--pipe:#ff5d72}.pipe-tile.palette-1{--pipe:#55b9ff}.pipe-tile.palette-2{--pipe:#ffc94e}.pipe-tile.palette-3{--pipe:#5ed98a}.pipe-tile.palette-4{--pipe:#b87af2}.pipe-tile.palette-5{--pipe:#ff8c42}.pipe-tile.palette-6{--pipe:#46d8d0}.pipe-art{--thick:20%;position:absolute;inset:8%;transform:rotate(calc(var(--rotation) * 90deg));transition:transform .22s cubic-bezier(.2,.85,.3,1.18)}.arm{position:absolute;background:linear-gradient(90deg,color-mix(in srgb,var(--pipe) 72%,#401020),var(--pipe) 48%,color-mix(in srgb,var(--pipe) 72%,#fff 18%) 52%,color-mix(in srgb,var(--pipe) 70%,#36101d));box-shadow:inset 0 1px #fff7,inset 0 -2px #0006,0 0 5px color-mix(in srgb,var(--pipe) 50%,transparent);border-inline:1px solid #fff5}.arm.up,.arm.down{left:calc(50% - var(--thick)/2);width:var(--thick);height:52%}.arm.left,.arm.right{top:calc(50% - var(--thick)/2);width:52%;height:var(--thick);border-block:1px solid #fff5;border-inline:0}.arm.up{top:-4%}.arm.down{bottom:-4%}.arm.left{left:-4%}.arm.right{right:-4%}.pipe-hub{position:absolute;z-index:2;top:50%;left:50%;width:34%;aspect-ratio:1;border:2px solid #fff7;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8,var(--pipe) 28%,color-mix(in srgb,var(--pipe) 63%,#180b0d) 75%);box-shadow:0 2px 7px #0009;transform:translate(-50%,-50%)}.pipe-tile.is-powered{--pipe:#5cecff!important;border-color:#c4fbff;box-shadow:inset 0 0 14px #54eaff55,0 0 12px #45e7ff99}.pipe-tile.is-powered .arm{box-shadow:inset 0 1px #fff,0 0 10px #75efff}.pipe-tile.endpoint{cursor:default}.endpoint-badge{position:absolute;z-index:4;display:grid;inset:18%;place-items:center;border:2px solid #fff;border-radius:50%;background:#071018;color:#fff;font-size:clamp(8px,2.6vw,14px);font-weight:900;letter-spacing:.04em;box-shadow:0 0 12px var(--pipe)}.pipe-tile.start{--pipe:#ff4f67}.pipe-tile.goal{--pipe:#52dfff}.pipe-tile:focus-visible,.secondary-button:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid var(--gold-soft);outline-offset:2px}.game-actions{display:flex;justify-content:center;margin-top:9px}.undo-button{width:auto;min-width:130px;min-height:39px;padding:7px 18px}.ad-reservation{display:grid;min-height:30px;margin-top:9px;place-items:center;border:1px dashed #3c3322;border-radius:9px;color:#665d4d;font-size:8px;letter-spacing:.14em;text-transform:uppercase}.preview-capture .home-bar{display:none}.preview-capture .game-shell{min-height:100svh}button:disabled{cursor:not-allowed;opacity:.42}dialog{width:min(440px,calc(100% - 26px));max-height:calc(100dvh - 28px);margin:auto;border:1px solid #806b3c;border-radius:20px;padding:22px;background:#11100d;color:var(--ivory);box-shadow:0 25px 100px #000d}dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}dialog h2{margin:0;color:var(--gold-soft);font:normal 28px Georgia,serif}dialog h3{margin:20px 0 7px;color:var(--gold-soft);font-size:15px}dialog p{font-size:13px;line-height:1.55}.dialog-top>.icon-button{display:grid;width:39px;height:39px;place-items:center;border:1px solid #65552e;border-radius:50%;background:#15130e;color:var(--gold-soft);font-size:18px}.select-field,.switch-row{display:flex;min-height:56px;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:235px;margin-top:3px;color:#9e927b;font-size:11px}.select-field select{min-width:105px;border:1px solid #796439;border-radius:9px;padding:9px;background:#080808;color:var(--ivory)}.switch-row input{width:22px;height:22px;accent-color:var(--gold)}.primary-button,.secondary-button{display:flex;width:100%;min-height:46px;align-items:center;justify-content:center;border:1px solid var(--gold);border-radius:10px;padding:10px 15px;font-weight:800;cursor:pointer}.primary-button{margin-top:17px;background:var(--gold);color:#0b0905}.secondary-button{background:#12100d;color:var(--gold-soft)}.dialog-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}.dialog-buttons .primary-button{margin-top:0}.eyebrow{color:#a99159;font-size:9px!important;font-weight:800;letter-spacing:.16em}.record-panel{border:1px solid #554724;border-radius:13px;padding:13px;background:#0b0a08}.record-grid{display:grid;grid-template-columns:1fr auto;gap:8px 14px;font-size:12px}.record-grid span{color:#a99d86}.record-grid strong{color:var(--gold-soft);text-align:right}.dialog-note{margin-bottom:0;color:#958a75}.control-rule{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:9px}.control-rule p{margin:5px 0}.control-symbol{display:grid;width:32px;height:32px;place-items:center;border:1px solid #65552e;border-radius:50%;color:var(--gold-soft);font-size:18px}.info-control{font:italic bold 16px Georgia,serif}.result-dialog{text-align:center}.result-mark{display:grid;width:58px;height:58px;margin:10px auto;place-items:center;border:1px solid #6cecff;border-radius:50%;color:#78edff;font-size:30px;box-shadow:0 0 18px #3ce4ff55}.result-stats{display:grid;grid-template-columns:repeat(2,1fr);margin:17px 0;border-block:1px solid #493d25}.result-stats div{padding:11px 3px;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:23px Georgia,serif}.result-stats span{margin-top:4px;color:#9f947e;font-size:8px;letter-spacing:.12em}.result-best{color:var(--gold-soft)}.result-close{margin-top:9px}
@media(max-width:380px){.game-shell{padding-inline:8px}.pipe-board{gap:3px;padding:7px;border-radius:17px}.pipe-cell,.pipe-tile{border-radius:10px}.scorebar strong{font-size:16px}}
@media(min-width:700px) and (orientation:portrait){.game-shell{width:min(88vw,760px);padding-top:16px}.pipe-board{width:min(100%,680px);gap:8px;padding:16px}.message{margin-block:8px;font-size:15px}.scorebar>div{padding:10px}.scorebar strong{font-size:24px}.undo-button{min-height:48px}}
@media(orientation:landscape) and (max-height:800px){.game-shell{width:min(900px,100%);padding-top:7px}.pipe-board{width:min(62vh,560px)}.message{margin-block:1px}.ad-reservation{display:none}}
@media(prefers-reduced-motion:reduce){.pipe-art{transition:none}}
.pipe-tile.endpoint:disabled{opacity:1}