/* A dimensional toy railway; all rules stay inside Pattern Train. */
.pt-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px}.pt-heading h1{margin:0;font-size:clamp(26px,3.7vw,42px);color:#634193}.pt-heading .home-kicker{font-size:11px;letter-spacing:2px}.pt-heading>span{background:#fff8dd;border:3px solid #fff;border-radius:24px;padding:10px 20px;font-size:23px;font-weight:900;color:#74528e;box-shadow:0 4px 12px #60468413}
#pattern-world{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;min-height:480px;height:clamp(480px,69vh,740px);overflow:hidden;border:5px solid #fff;border-radius:34px;background:#c6edee url('pattern-art/station.webp') center center/cover;box-shadow:0 10px 30px #63518d20;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.roomy-play #pattern-world{height:var(--play-height,650px);min-height:420px}
.pt-top{position:relative;z-index:2;text-align:center;padding:16px 10px 0}.pt-stops{display:flex;gap:13px;justify-content:center;align-items:center}.pt-stops span{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff8eb;box-shadow:0 3px 0 #af927e;border:3px solid white;color:#a78fbb;font-size:18px;font-weight:900}.pt-stops span+span:before{content:'';position:absolute;right:100%;width:18px;height:4px;background:#fff8eb;z-index:-1}.pt-stops .current{background:#ffe99a;color:#7650a1}.pt-stops .done{background:#9ee4bf;color:#316b61;box-shadow:0 3px 0 #73b79d}.pt-top p{display:inline-block;background:#fffdf2eb;color:#6b4f82;font-size:clamp(19px,2.2vw,27px);font-weight:900;border:2px solid white;border-radius:30px;padding:7px 24px;margin:15px 0 0;box-shadow:0 4px 14px #615e6e14}
.pt-platform{position:relative;flex:1;min-height:215px;display:flex;align-items:flex-end;padding-bottom:18px;margin:0 3%}.pt-platform:after{content:'';position:absolute;bottom:9px;left:-10%;right:-10%;height:16px;background:repeating-linear-gradient(90deg,transparent 0 17px,#b49b88 18px 29px,transparent 30px 47px);border-top:5px solid #a8a3ba;border-bottom:5px solid #b2acba;box-shadow:0 5px 0 #ddd1b17a;z-index:-1;transform:perspective(500px) rotateX(24deg)}
.pt-consist{display:flex;align-items:flex-end;position:relative;width:100%;will-change:transform;transform-origin:center bottom}.pt-cars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;flex:1;min-width:0;align-items:end}.pt-wagon{position:relative;aspect-ratio:1.1}.pt-wagon>img{position:absolute;bottom:0;left:0;width:100%;height:auto;pointer-events:none;filter:drop-shadow(0 7px 5px #57534a20)}.pt-load{position:absolute;display:grid;place-items:center;bottom:43%;left:13%;width:74%;aspect-ratio:1;filter:drop-shadow(0 6px 3px #73477820);z-index:1}.pt-load .pt-token{width:89%;height:89%}.pt-empty .pt-load{background:#fff5c2a6;outline:3px dashed #fff5bd;border-radius:24%;animation:pt-slot 1.8s ease-in-out infinite}.pt-question{font-size:clamp(30px,4vw,55px);font-weight:900;color:#8052a5;text-shadow:0 2px white}.pt-filled .pt-load{animation:pt-cargo-pop .45s ease-out;background:none;outline:none}.pt-hover .pt-load{outline:4px solid white;background:#fff5c2e6}
.pt-engine{position:relative;flex:0 0 24%;aspect-ratio:1.31;margin-left:4px;filter:drop-shadow(0 7px 5px #57534a25)}.pt-engine>img{width:100%;height:100%;object-fit:contain;pointer-events:none;animation:pt-chug 1.4s ease-in-out infinite}.pt-steam{position:absolute;left:67%;bottom:94%;width:20%;aspect-ratio:1;border-radius:50%;background:#fff9;filter:blur(1px);animation:pt-steam 3.6s ease-out infinite;pointer-events:none}.pt-steam:nth-of-type(2){animation-delay:1.2s}.pt-steam:nth-of-type(3){animation-delay:2.4s}.pt-axle{position:absolute;bottom:4%;width:23%;aspect-ratio:1;border:3px solid #e9c57766;border-radius:50%;background:repeating-conic-gradient(from 0deg,transparent 0deg 48deg,#fff5c34d 49deg 57deg,transparent 58deg 90deg);pointer-events:none;opacity:0}.pt-wagon .pt-left{left:17%}.pt-wagon .pt-right{right:15%}.pt-engine .pt-left{left:14%;width:28%;bottom:5%}.pt-engine .pt-right{left:49%;width:28%;bottom:5%}
.pt-tray{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;gap:clamp(12px,4vw,40px);padding:16px 20px 20px;margin:12px 5% 16px;border:3px solid #fff9;border-radius:30px;background:linear-gradient(145deg,#fff8eae8,#f7e7cce8);box-shadow:0 6px 0 #b69d7c80,0 13px 22px #7a695822}.pt-choice{display:grid;place-items:center;flex:0 1 112px;width:112px;height:105px;min-width:74px;min-height:74px;background:linear-gradient(#fff,#fff7e7);border:3px solid white;border-radius:25px;box-shadow:0 6px 0 #cdb9db,0 8px 10px #715c7c19;cursor:grab;touch-action:none;padding:10px;transition:box-shadow .15s,transform .15s}.pt-choice:active,.pt-held{transform:translateY(3px);box-shadow:0 3px 0 #cdb9db}.pt-choice:focus-visible{outline:4px solid #8c69cc;outline-offset:5px}.pt-choice:disabled{opacity:.7;cursor:default}.pt-choice .pt-token{width:78px;height:78px}.pt-wrong{animation:pt-wiggle .4s ease-out}.pt-drag{position:fixed;pointer-events:none;z-index:1200;width:87px;height:87px;transform:translate(-50%,-65%);filter:drop-shadow(0 10px 7px #43395a40)}.pt-drag[hidden]{display:none}
.pt-token{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(1px 5px 2px #55507124)}.pt-token:before{content:'';position:absolute;inset:8%;background:radial-gradient(ellipse at 30% 22%,#ffffffa6,transparent 38%),linear-gradient(145deg,var(--cargo) 35%,color-mix(in srgb,var(--cargo),#4f315e 24%));box-shadow:inset -4px -6px 3px #5030621c,inset 2px 3px 3px #fff7;clip-path:var(--shape,inset(0 round 50%))}.pt-ball{--shape:inset(0 round 50%)}.pt-block{--shape:polygon(50% 0,97% 24%,97% 75%,50% 100%,3% 75%,3% 24%)}.pt-block i{position:absolute;inset:9%;clip-path:polygon(50% 48%,99% 24%,99% 75%,50% 100%);background:#256cc23b}.pt-star{--shape:polygon(50% 0,65% 31%,100% 38%,75% 64%,80% 100%,50% 83%,20% 100%,25% 64%,0 38%,35% 31%)}.pt-heart{--shape:polygon(50% 97%,8% 59%,0 34%,5% 13%,22% 3%,40% 7%,50% 20%,60% 7%,78% 3%,95% 13%,100% 34%,92% 59%)}.pt-flower{--shape:polygon(50% 0,63% 6%,69% 22%,87% 18%,99% 32%,91% 50%,99% 67%,88% 81%,69% 78%,64% 95%,50% 100%,36% 95%,31% 78%,12% 81%,1% 67%,9% 50%,1% 32%,13% 18%,31% 22%,37% 6%)}.pt-flower i{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff5bf,#ffc86c);box-shadow:0 3px 3px #744b8b36}.pt-triangle{--shape:polygon(50% 1%,99% 94%,1% 94%)}
.pt-departing .pt-consist{animation:pt-depart 1.55s cubic-bezier(.5,0,.7,.5) both}.pt-departing .pt-axle{opacity:.8;animation:pt-wheel .35s linear infinite}.pt-arriving .pt-consist{animation:pt-arrive .65s cubic-bezier(.18,.7,.3,1) both}.pt-departing .pt-engine>img{animation-duration:.22s}.pt-paused *,#pattern-screen[hidden] *{animation-play-state:paused!important}.pt-footnote{text-align:center;color:#886b9e;font-size:14px;margin:10px 0 0}
.pt-cover{position:relative;overflow:hidden;background:#c7efda url('pattern-art/station.webp') center/cover}.pt-cover img{position:absolute;object-fit:contain;filter:drop-shadow(0 8px 5px #72544f35)}.pt-cover .pt-cover-engine{height:80%;width:60%;right:1%;bottom:5%}.pt-cover .pt-cover-wagon{height:47%;width:44%;left:1%;bottom:6%}.pt-cover .pt-token{position:absolute;width:25%;height:44%;left:11%;bottom:29%}
@keyframes pt-chug{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-.6deg)}}@keyframes pt-steam{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:.8}100%{transform:translate(-60%,-180%) scale(2);opacity:0}}@keyframes pt-slot{50%{box-shadow:0 0 0 8px #fff6b93b}}@keyframes pt-cargo-pop{0%{transform:scale(.45)}65%{transform:scale(1.15)}100%{transform:scale(1)}}@keyframes pt-depart{0%,32%{transform:translateX(0)}100%{transform:translateX(150%)}}@keyframes pt-arrive{from{transform:translateX(-130%)}to{transform:translateX(0)}}@keyframes pt-wheel{to{transform:rotate(360deg)}}@keyframes pt-wiggle{20%,60%{transform:translateX(-7px) rotate(-4deg)}40%,80%{transform:translateX(7px) rotate(4deg)}}
@media(max-width:700px){.pt-heading{margin:4px 0 10px}.pt-heading .home-kicker{font-size:9px;letter-spacing:1px}.pt-heading>span{font-size:19px;padding:9px 14px}#pattern-world{min-height:465px;height:calc(100svh - var(--floating-nav-height,90px) - 130px);border-radius:25px;border-width:3px;background-position:60% center}.pt-top{padding-top:14px}.pt-platform{margin:0 2%;min-height:210px;padding-bottom:18px}.pt-engine{position:absolute;width:34%;right:0;bottom:90%;margin:0}.pt-cars{gap:1px}.pt-wagon{aspect-ratio:.82}.pt-load{bottom:31%;left:8%;width:84%}.pt-question{font-size:38px}.pt-empty .pt-load{border-radius:20%;outline-width:2px}.pt-tray{gap:17px;padding:13px 14px 16px;margin:8px 4% 16px}.pt-choice{height:86px;max-width:95px;padding:7px}.pt-choice .pt-token{width:65px;height:65px}.pt-stops{gap:10px}.pt-stops span{height:33px;width:33px;font-size:16px}.pt-stops span+span:before{width:15px}.pt-footnote{font-size:12px}}
@media(max-height:570px) and (min-width:701px){#pattern-world{min-height:365px;height:400px}.pt-top{padding-top:8px}.pt-top p{margin-top:8px;padding:3px 20px}.pt-platform{min-height:155px}.pt-tray{padding:8px;margin-bottom:10px}.pt-choice{height:75px;max-width:100px}.pt-choice .pt-token{height:59px;width:59px}}
@media(prefers-reduced-motion:reduce){#pattern-world *, .pt-cover *{animation:none!important;transition:none!important}.pt-departing .pt-consist{opacity:.7}}
.pt-modes{display:flex;justify-content:center;gap:12px;margin:0 0 14px}.pt-modes button{display:flex;align-items:center;gap:8px;min-height:49px;padding:7px 18px;border:3px solid #fff;border-radius:19px;background:linear-gradient(#fffdf5,#eee2f8);box-shadow:0 4px 0 #9c85b9;color:#74508f;font:inherit;font-size:17px;font-weight:900;cursor:pointer;touch-action:manipulation}.pt-modes button span{color:#9d77c7;font-size:18px;letter-spacing:1px}.pt-modes button[aria-pressed=true]{background:linear-gradient(#fff2b8,#ffdc7c);box-shadow:0 4px 0 #c29a4d;color:#77582d}.pt-modes button:focus-visible{outline:4px solid #9168bd;outline-offset:4px}
.pt-silhouette .pt-token{filter:grayscale(1) brightness(.7);opacity:.48}.pt-silhouette{outline:3px dashed #fff7cb;background:#fff9dd90}.pt-silhouette.pt-load{animation:none}
#pattern-world[data-mode=shapes] .pt-tray{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;justify-items:center}
#pattern-world[data-mode=shapes] .pt-choice{width:100%;max-width:112px;min-width:0}
#pattern-world[data-mode=shapes] .pt-choice:disabled{opacity:.35;box-shadow:0 3px 0 #cdb9db}
@media(max-width:700px){.pt-modes{gap:10px;margin-bottom:12px}.pt-modes button{min-height:46px;padding:6px 12px;font-size:15px}.pt-modes button span{font-size:16px}#pattern-world{min-height:505px}#pattern-world[data-mode=shapes]{min-height:595px}#pattern-world[data-mode=shapes] .pt-tray{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px 18px}#pattern-world[data-mode=shapes] .pt-choice{height:76px;min-height:76px}#pattern-world[data-mode=shapes] .pt-choice .pt-token{width:59px;height:59px}}
@media(min-width:701px) and (max-height:570px){.pt-modes{margin-bottom:7px}.pt-modes button{min-height:44px;padding:4px 15px}.pt-stops span{width:30px;height:30px}.pt-top p{font-size:19px}#pattern-world{min-height:420px}#pattern-world[data-mode=shapes] .pt-tray{gap:10px}}
.pt-heading>div:first-child{flex:1;min-width:0}.pt-options{position:relative;z-index:5;flex:none}.pt-options summary{display:grid;place-items:center;min-width:48px;min-height:48px;border:3px solid #fff;border-radius:17px;background:linear-gradient(#fffaf1,#e9dff5);box-shadow:0 4px 0 #b5a1c8;color:#74538f;font-size:26px;list-style:none;cursor:pointer;touch-action:manipulation}.pt-options summary::-webkit-details-marker{display:none}.pt-options summary:focus-visible{outline:3px solid #9570c4;outline-offset:3px}.pt-options[open] summary{background:#ffe5a2}.pt-options label{position:absolute;right:0;top:calc(100% + 12px);display:flex;align-items:center;gap:12px;width:220px;min-height:64px;padding:12px 16px;border:3px solid white;border-radius:21px;background:#fff9ef;box-shadow:0 7px 0 #bca4d1,0 12px 25px #654e8440;color:#71518d;font-size:17px;font-weight:900;cursor:pointer;box-sizing:border-box}.pt-options input{flex:none;width:29px;height:29px;accent-color:#926ac2;margin:0;cursor:pointer}
@media(max-width:700px){.pt-heading{gap:9px}.pt-heading h1{font-size:24px}.pt-options summary{min-width:44px;min-height:44px;font-size:24px}.pt-options label{width:210px;right:-60px}}
.pt-options summary,.pt-options label{-webkit-tap-highlight-color:transparent}