/* The living parts of peelpuzzle.com: the playable box, the world map, drifting tape and reveals. */
.peel{position:relative;background:#141A36;border-radius:28px;padding:12px 12px 14px;box-shadow:0 24px 50px rgba(20,14,80,.45),inset 0 0 0 2px rgba(255,255,255,.06);touch-action:manipulation;-webkit-user-select:none;user-select:none;max-width:460px}
.peel-svg{display:block;width:100%;height:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.peel-hud{display:flex;gap:6px;flex-wrap:wrap;margin:0 2px 10px}
.peel-hud .goal{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#fff;background:#232B57;border-radius:999px;padding:4px 10px 4px 8px;line-height:1.2;transition:opacity .2s,background .2s}
.peel-hud .goal i{font-style:normal;color:#FFC93C;font-size:14px}
.peel-hud .goal.lost{opacity:.5}
.peel-hud .goal.lost i{color:rgba(255,255,255,.35)}
.peel-hud .goal.got{background:#3a3170}
.peel-bar{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.peel-say{min-height:1.4em;margin:0 4px;font-size:15px;font-weight:600;color:#FFE9A8;max-width:none}
.peel-btns{display:flex;gap:8px;flex-wrap:wrap}
.peel-btns button{font:600 15px/1 Fredoka,system-ui,sans-serif;color:#141A36;background:#FFC93C;border:0;border-radius:14px;padding:11px 16px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .1s,box-shadow .1s}
.peel-btns button[data-a="reset"]{background:#2C3566;color:#fff}
.peel-btns button[data-a="hint"]{background:#fff}
.peel-btns button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.peel-btns button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.peel-glow{transform-box:fill-box;transform-origin:center;animation:glow 1.1s ease-in-out infinite}
@keyframes glow{0%,100%{transform:scale(.85);opacity:.95}50%{transform:scale(1.25);opacity:.35}}
.peel.won{box-shadow:0 24px 50px rgba(20,14,80,.45),0 0 0 3px #FFC93C}
.ptape{transition:filter .15s}
.peel-svg .ptape:hover{filter:brightness(1.06)}

/* Level pages */
.playwrap{display:flex;flex-direction:column;gap:12px;min-width:0}
.numbered summary{cursor:pointer;font-weight:600;color:var(--ink,#fff)}
.numbered .boardwrap{position:static;margin-top:10px;max-width:420px}
.steps li{transition:background .2s,opacity .2s,transform .2s}
.steps li.now{background:#FFC93C;transform:translateX(4px)}
.steps li.now b,.steps li.now .where,.steps li.now em{color:#141A36}
.steps li.done{opacity:.55}

/* Home hero */
.hero-play{justify-self:center;width:min(420px,100%);display:flex;flex-direction:column;gap:10px;position:relative}
.hero-play::before{content:"";position:absolute;inset:-12% -14%;background:radial-gradient(closest-side,rgba(255,201,60,.30),transparent);z-index:0;pointer-events:none}
.hero-play .peel{z-index:1;transform:rotate(-1.5deg)}
.hero-play-cap{text-align:center;font-size:15px;font-weight:600;color:var(--ink-soft,#DCD6FF);z-index:1}
.stuck{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.stuck .card,.cards .card{background:var(--page-deep,#4A39D6);border-radius:20px;padding:16px 18px;text-decoration:none;color:#fff;display:flex;flex-direction:column;gap:4px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);transition:transform .15s,box-shadow .15s}
.stuck .card:hover,.cards .card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px #FFC93C}
.stuck .card b{font-size:20px}
.stuck .card span{color:var(--ink-soft,#DCD6FF);font-size:15px}
.stuck .card.all{background:#FFC93C}
.stuck .card.all b,.stuck .card.all span{color:#141A36}
.textlink{color:#fff;font-weight:600;text-decoration-color:#FFC93C;text-decoration-thickness:2px;text-underline-offset:4px}

/* World map */
.mapcard{margin:0;background:#141A36;border-radius:24px;padding:14px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}
.mapcard figcaption{font-size:14px;color:var(--ink-soft,#DCD6FF);margin:8px 4px 0}
.worldmap{display:block;width:100%;height:auto}
.worldmap .route{stroke-width:2.2;stroke-dasharray:6 6;opacity:.85;animation:route 30s linear infinite}
.worldmap .route.faint,.worldmap .pin.faint{opacity:.18}
@keyframes route{to{stroke-dashoffset:-600}}
.worldmap .pin .dot{fill:var(--c);stroke:#141A36;stroke-width:1.5}
.worldmap .pin .halo{fill:var(--c);opacity:.25;transform-box:fill-box;transform-origin:center;animation:halo 2.4s ease-out infinite}
.worldmap .pin:hover .dot{stroke:#fff}
.worldmap .pin.focus .halo{opacity:.35}
.worldmap .pin-label{font:700 14px Fredoka,system-ui,sans-serif;fill:#fff;paint-order:stroke;stroke:#141A36;stroke-width:4px}
@keyframes halo{0%{transform:scale(.6);opacity:.45}100%{transform:scale(1.6);opacity:0}}
.map-legend{display:flex;flex-direction:row;gap:16px;flex-wrap:wrap;list-style:none;padding:0;margin:10px 4px 0;font-size:14px;font-weight:600;color:#fff}
.map-legend i{display:inline-block;width:14px;height:6px;border-radius:2px;margin-right:6px;vertical-align:middle}

/* Drifting tape in the background of the home page */
.drift{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.drift span{position:absolute;display:block;width:220px;height:34px;border-radius:3px;opacity:.10;animation:drift 38s linear infinite}
.drift span:nth-child(1){top:8%;left:-20%;background:#FFC93C;animation-duration:42s}
.drift span:nth-child(2){top:22%;left:-30%;background:#3D7BFF;animation-duration:55s;animation-delay:-12s}
.drift span:nth-child(3){top:38%;left:-25%;background:#F2503B;animation-duration:47s;animation-delay:-30s}
.drift span:nth-child(4){top:54%;left:-35%;background:#22B47D;animation-duration:60s;animation-delay:-8s}
.drift span:nth-child(5){top:68%;left:-22%;background:#9466F0;animation-duration:51s;animation-delay:-40s}
.drift span:nth-child(6){top:82%;left:-28%;background:#FF8A2B;animation-duration:58s;animation-delay:-22s}
.drift span:nth-child(7){top:92%;left:-30%;background:#FFC93C;animation-duration:64s;animation-delay:-50s}
.drift span:nth-child(8){top:4%;left:-40%;background:#3D7BFF;animation-duration:70s;animation-delay:-35s}
@keyframes drift{from{transform:translateX(0) rotate(-8deg)}to{transform:translateX(170vw) rotate(4deg)}}
.wrap{position:relative;z-index:1}

/* Reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

html{overflow-x:hidden}
@media (max-width:560px){.hero-play::before{inset:-8% 0}.peel{padding:10px 8px 12px;border-radius:22px}.peel-hud .goal{font-size:12px;padding:4px 8px}.hero-play .peel{transform:none}}
@media (prefers-reduced-motion:reduce){.drift span,.worldmap .route,.worldmap .pin .halo,.peel-glow{animation:none}[data-reveal]{opacity:1;transform:none;transition:none}}

.peel-box-tag{margin:0 4px 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#FFC93C}
.store-btn{font:700 15px/1 Fredoka,system-ui,sans-serif;color:#5A48E8;background:#fff;border-radius:14px;padding:11px 16px;text-decoration:none;box-shadow:0 4px 0 rgba(0,0,0,.35);animation:pop .35s ease-out}
.store-btn[hidden]{display:none}
.peel-btns button[data-a="next"]{background:#3DDC97}
.peel-btns button[data-a="pause"],.peel-btns button[data-a="watch"]{background:#2C3566;color:#fff}
.peel[data-watch] .peel-svg{cursor:default}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}

/* Endless screenshot carousel */
.rail.loop{scroll-snap-type:none;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.rail.loop::-webkit-scrollbar{display:none}
.rail.loop .shot{transition:transform .25s}
.rail.loop .shot:hover{transform:translateY(-6px) rotate(-1deg)}