/* Real gameplay videos repeat until explicit acknowledgement. */
.rules-dialog {text-align:center;}
.rules-dialog .game-tutorial-content {min-width:0;}
.rules-dialog h2 {margin:.75rem 1rem;}
/* Factory rules are prose, with one left-aligned column including the rank list. */
#factoryRules {text-align:left;}
#factoryRules h2 {margin-inline:0;}
.tutorial-diagram {text-align:center;min-width:0;}
.tutorial-diagram .tutorial-heading {font-weight:600;color:var(--ink);font-size:.8rem;line-height:1.4;margin:.6rem 0;}
/* Video frame: the recording is 2× (780 × 1200) and fills the frame edge to edge. */
.tutorial-film {position:relative;width:min(100%,18.5rem);margin:0 auto;border:1px solid var(--line);border-radius:1.125rem;background:var(--paper);overflow:hidden;isolation:isolate;box-shadow:0 .75rem 1.75rem rgba(16,20,28,.08);}
.tutorial-video {display:block;width:100%;height:auto;aspect-ratio:13 / 20;object-fit:cover;background:var(--paper);cursor:pointer;}
/* A paused video shows a quiet play sign; the delay keeps it from flashing before autoplay. */
.tutorial-film::after {content:'';position:absolute;left:50%;top:44%;width:3.25rem;height:3.25rem;margin:-1.625rem 0 0 -1.625rem;border-radius:50%;background:rgba(16,20,28,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 5.2v9.6a.7.7 0 0 0 1.1.6l7.3-4.8a.7.7 0 0 0 0-1.2L8.6 4.6a.7.7 0 0 0-1.1.6Z' fill='%23fcfdff'/%3E%3C/svg%3E") center / 1.4rem no-repeat;opacity:0;transform:scale(.85);pointer-events:none;transition:opacity .2s ease,transform .2s ease;}
.tutorial-film.is-paused::after {opacity:1;transform:none;transition-delay:.35s;}
.tutorial-video-controls {display:flex;align-items:center;gap:.5rem;width:min(100%,18.5rem);margin:.5rem auto 0;}
.tutorial-video-controls[hidden] {display:none;}
.tutorial-video-controls button {display:grid;place-items:center;flex:none;width:2.25rem;min-height:2.25rem;height:2.25rem;padding:0;margin:0;border:0;border-radius:50%;background:#6a90ff16;color:var(--ink);transition:background-color .15s ease,transform .12s ease;}
.tutorial-video-controls button:active {transform:scale(.92);}
.tutorial-video-controls button svg {width:1.05rem;height:1.05rem;fill:currentColor;}
.tutorial-video-controls .tutorial-toggle {background:var(--accent);color:var(--surface);}
.tutorial-toggle .icon-pause, .tutorial-toggle.is-playing .icon-play {display:none;}
.tutorial-toggle.is-playing .icon-pause {display:inline;}
.tutorial-video-controls button:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}
/* Thin progress bar: filled part up to --progress, round thumb only while dragging or focused. */
.tutorial-video-controls .tutorial-seek {--progress:0%;flex:1;min-width:0;width:100%;height:1.5rem;margin:0;padding:0;border:0;background:transparent;box-shadow:none;-webkit-appearance:none;appearance:none;cursor:pointer;}
.tutorial-seek::-webkit-slider-runnable-track {height:.25rem;border-radius:1rem;background:linear-gradient(90deg,var(--accent) var(--progress),#dfe5ef var(--progress));}
.tutorial-seek::-moz-range-track {height:.25rem;border-radius:1rem;background:#dfe5ef;}
.tutorial-seek::-moz-range-progress {height:.25rem;border-radius:1rem;background:var(--accent);}
.tutorial-seek::-webkit-slider-thumb {-webkit-appearance:none;width:.875rem;height:.875rem;margin-top:-.3125rem;border:2px solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 1px 4px rgba(16,20,28,.25);transform:scale(.6);transition:transform .15s ease;}
.tutorial-seek::-moz-range-thumb {width:.875rem;height:.875rem;border:2px solid var(--surface);border-radius:50%;background:var(--accent);}
.tutorial-seek:active::-webkit-slider-thumb, .tutorial-seek:focus-visible::-webkit-slider-thumb {transform:none;}
.tutorial-seek:disabled {opacity:.5;cursor:default;}
.tutorial-diagram .tutorial-playback-note {font-size:.58rem;line-height:1.45;color:var(--muted);margin:.5rem 0;}
.tutorial-steps {display:grid;gap:.45rem;padding:0;margin:.8rem 0;list-style:none;text-align:left;}
.tutorial-steps li {display:flex;align-items:center;gap:.5rem;font-size:.67rem;line-height:1.4;}
.tutorial-steps li>span {display:grid;place-items:center;flex:none;width:1.3rem;height:1.3rem;border-radius:50%;background:#6a90ff16;color:var(--ink);font-size:.6rem;font-weight:700;}
.tutorial-diagram .tutorial-note {font-size:.65rem;line-height:1.5;margin:.65rem 0;color:var(--muted);}
.shift-intro {position:fixed;inset:0;z-index:10;padding:calc(var(--app-safe-top) + .5rem) max(1rem,var(--app-safe-left)) calc(var(--app-safe-bottom) + .5rem);overflow:auto;border-radius:0;background:#10141c88;}
.shift-intro > div {width:min(100%,24rem);max-height:100%;overflow-y:auto;padding:1rem;border:1px solid var(--line);text-align:center;}
.shift-intro h3 {font-size:1.1rem;margin:.35rem 0;}

.shift-intro .tutorial-heading {font-size:.75rem;}
.shift-intro .tutorial-note {font-size:.6rem;}
.shift-intro .shift-ready,.shift-intro .shift-tilt {margin-top:.7rem;}
.rules-dialog .rules-done,.shift-intro .shift-ready {position:sticky;bottom:0;z-index:2;}
/* Marks and their labels align with the three draggable word rows. */
.shift-scale {gap:.65rem;padding:1.2rem .7rem .2rem;}
.shift-thermometer {width:5rem;place-items:stretch;}
.shift-thermometer::before {left:.4rem;width:.3rem;}
.shift-grade {position:relative;display:flex;align-items:center;gap:.45rem;}
.shift-thermometer .shift-grade i {flex:none;width:1.1rem;height:1.1rem;border:2px solid var(--ink);background:#d9e3ff;}
.shift-grade:nth-child(2) i {background:#94aaff;}
.shift-grade:nth-child(3) i {background:var(--accent);}
.shift-grade span {font-size:.55rem;font-weight:600;color:var(--muted);}
.shift-scale-word {gap:.3rem;padding:.6rem .5rem;}
.shift-scale-word strong {font-size:.8rem;}