/* Twisty and Tubular: the page's own styles, on top of /assets/site.css and the shared specimen stage (/shared/css/theme.css, stage.css). */
body.twisty-and-tubular{--specimen-bg:#14121F}
.twisty-and-tubular .stage canvas{cursor:crosshair;touch-action:none}              /* the mouse or a finger steers the jelly: no scrolling from inside the picture */
.twisty-and-tubular .stage.grabbing canvas{cursor:crosshair}

/* the line above the sliders: what is happening to the jelly */
.tt-status{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;margin:0;font:500 11px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--glass-panel-muted);min-height:1.5em}
.tt-read{color:var(--cyan);font-variant-numeric:tabular-nums;white-space:nowrap}
.stage[data-state=stuck] .tt-status{color:var(--magenta-text)}
.stage[data-state=inside] .tt-status{color:var(--cyan)}

/* the controls: two sliders and a button, glass over the bottom of the stage (the drawing leaves room for them) */
.tt-panel{position:absolute;z-index:6;left:clamp(12px,2.4vw,22px);right:clamp(12px,2.4vw,22px);bottom:clamp(12px,2.4vw,22px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:clamp(14px,2.4vw,28px);align-items:end;padding:14px clamp(14px,2.4vw,24px) 14px;
  border:1px solid var(--glass-border);border-radius:18px;background:rgba(20,18,31,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 0 40px -18px rgba(5,217,232,.6)}
.tt-field{display:grid;gap:6px;min-width:0}
.tt-cap{display:flex;justify-content:space-between;gap:10px;font:500 10.5px/1.3 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--glass-panel-muted)}
.tt-cap output{color:var(--cyan);font-variant-numeric:tabular-nums}
.tt-ends{display:flex;justify-content:space-between;font:500 9.5px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}

.tt-panel input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.tt-panel input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.tt-panel input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.tt-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;border:2px solid #fff;background:var(--cyan);box-shadow:0 0 16px rgba(5,217,232,.7)}
.tt-panel input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:var(--cyan);box-shadow:0 0 16px rgba(5,217,232,.7)}
.tt-panel input[type=range]:focus-visible{outline:none}
.tt-panel input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(5,217,232,.35),0 0 16px rgba(5,217,232,.7)}
.tt-panel input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(5,217,232,.35),0 0 16px rgba(5,217,232,.7)}

/* the buttons never change size on hover or press (a scaling button moves out from under the pointer at its edge and flickers) */
.tt-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
#go,#way,.tt-win button{min-height:48px;padding:0 24px;border:1px solid var(--cyan);border-radius:999px;background:rgba(20,18,31,.72);color:var(--cyan);cursor:pointer;
  font:500 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;touch-action:manipulation;
  box-shadow:0 0 30px -12px rgba(5,217,232,.6);transition:background-color .2s,color .2s}
#go:hover,#way:hover,.tt-win button:hover{background:var(--cyan);color:var(--bg)}
#go:hover,#go:active,#way:hover,#way:active,.tt-win button:hover,.tt-win button:active{animation:none}      /* the site's hover wobble (play.css) would move it */

/* the star was reached */
.tt-win{position:absolute;z-index:7;left:50%;top:clamp(78px,14%,120px);translate:-50% 0;display:flex;align-items:center;gap:clamp(12px,2vw,22px);flex-wrap:wrap;justify-content:center;max-width:calc(100% - 24px);
  padding:12px clamp(14px,2.4vw,24px);border:1px solid #FFB800;border-radius:18px;background:rgba(20,18,31,.82);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 0 50px -14px rgba(255,184,0,.7);font:500 12px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#FFE066;text-align:center}
.tt-win[hidden]{display:none}
.tt-win button{min-height:40px;padding:0 18px;border-color:#FFB800;color:#FFE066}
.tt-win button:hover{background:#FFB800;color:var(--bg)}

@media(max-width:720px){
  body.twisty-and-tubular{--specimen-stage-h:min(86vh,720px);--specimen-stage-min:560px}   /* the maze is tall: a taller stage keeps the pipes a usable size on a phone */
  .twisty-and-tubular #overlay h2{font-size:clamp(22px,7vw,30px)}
  .tt-panel{grid-template-columns:1fr 1fr;gap:6px 18px;padding:12px 14px}
  .tt-buttons{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  #go,#way{padding:0 12px;letter-spacing:.1em}
  .tt-ends{display:none}
  .tt-status{flex-direction:column;align-items:flex-start;gap:2px;min-height:4.5em}   /* two lines of words and the count under them, kept free so the panel never changes height */
  .tt-panel input[type=range]{height:26px}
}
@media(prefers-reduced-motion:reduce){#go,#way,.tt-win button{transition:none}}

/* ?record=1: only the stage, as a centred frame on black (9:16, or 16:9 / 1:1 with &frame=wide / square) */
html.record,html.record body{height:100%;margin:0;overflow:hidden;background:#000}
html.record body>:not(main),html.record main>:not(#stage){display:none!important}
html.record #stage{position:fixed;left:50%;top:50%;translate:-50% -50%;width:min(100vw,calc(100vh * 9 / 16));height:auto;aspect-ratio:9/16;min-height:0;border:0}
html.record.frame-wide #stage{width:min(100vw,calc(100vh * 16 / 9));aspect-ratio:16/9}
html.record.frame-square #stage{width:min(100vw,100vh);aspect-ratio:1}
html.record #overlay,html.record .tt-panel,html.record .tt-win{display:none!important}
html.record .stage canvas{cursor:none}