:root{--ink:#171717;--cream:#feece2;--color-one:#f17ea4;--color-two:#f8c6bf;--cover-size:520px;--player-y:77vh;--shine-x:45%;--shine-y:30%;font-family:'Libre Franklin',Helvetica,Arial,sans-serif;color:var(--ink);font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{isolation:isolate;background:var(--color-one);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:6px}button:disabled{cursor:default}img{user-select:none;-webkit-user-drag:none}.color-field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:linear-gradient(120deg,var(--color-one),var(--color-two))}.color-field canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}#flow-field{image-rendering:auto}#grain-field{opacity:.74}.header{position:fixed;top:13px;left:0;right:0;height:56px;z-index:20}.brand{position:absolute;left:50%;transform:translateX(-50%);line-height:0}.brand img{display:block;width:140px;height:auto}.nav-item{position:absolute;top:8px;font-size:15px;font-weight:700;padding:5px 20px;line-height:17px;border:1.5px solid transparent;border-radius:30px}.nav-item:hover,.nav-item.selected{border-color:currentColor}.nav-chapters{right:calc(50% + 130px)}.nav-about{left:calc(50% + 130px)}.languages{position:fixed;right:25px;top:23px;display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;z-index:21}.languages button{font-size:10px;opacity:.5}.languages button[aria-pressed=true]{opacity:1}.carousel{position:fixed;inset:0;touch-action:none;cursor:grab;user-select:none}.carousel.is-dragging,.carousel.is-dragging .record{cursor:grabbing}.stage{position:absolute;inset:0;perspective:1000px;perspective-origin:50% 50%;transform-style:preserve-3d}.record{position:absolute;left:50%;top:50%;width:1024px;height:1024px;margin:-512px 0 0 -512px;transform-origin:center;transform-style:preserve-3d;will-change:transform;backface-visibility:hidden;cursor:pointer;opacity:0;box-shadow:0 0 0 .5px #ffffff25}.record img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.sleeve{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;transform:translateZ(.1px)}.shine{position:absolute;inset:0;background:linear-gradient(117deg,transparent 15%,#fff0 40%,#ffffff30 48%,#ffffff06 58%,transparent 80%);mix-blend-mode:screen;opacity:.1;pointer-events:none;transform:translateZ(.2px)}.player-wrap{position:absolute;left:50%;top:var(--player-y);transform:translate(-50%,-50%);z-index:10;cursor:default}.player{display:flex;align-items:center;width:395px;min-height:85px;padding:12px 23px 12px 27px;border-radius:50px;background:var(--ink);color:var(--cream);transform-origin:center;will-change:transform;box-shadow:0 1px 1px #0000000a}.play{width:43px;height:48px;flex:none;margin-right:18px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.play:hover{transform:scale(1.1)}.play svg{width:37px;height:43px}.lock-symbol{display:none}.player.locked .play-symbol{display:none}.player.locked .lock-symbol{display:block}.track{min-width:0;flex:1;text-align:left}.track-title{font-weight:700;font-size:15px;line-height:20px;white-space:nowrap}.track-album{font-size:13px;line-height:20px;opacity:.88}.track-counter{font-size:10px;line-height:14px;opacity:.55;font-variant-numeric:tabular-nums}.skip-controls{display:flex;gap:1px;margin-left:13px}.skip-controls button{display:flex;width:23px;height:40px;align-items:center;justify-content:center}.skip-controls svg{width:19px;height:19px}.skip-controls button:disabled{opacity:.4}.skip-controls button:not(:disabled):hover{transform:scale(1.18)}.swipe-tip{position:absolute;bottom:10.5%;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.015em;opacity:0;pointer-events:none;animation:tip-in .6s 1.4s forwards;transition:opacity .4s}.swipe-tip.hidden{animation:none;opacity:0}@keyframes tip-in{to{opacity:.55}}.footer{position:fixed;bottom:16px;left:18px;right:18px;display:flex;align-items:flex-end;justify-content:space-between;z-index:20;pointer-events:none}.footer button,.footer a{pointer-events:auto}.fullscreen{width:22px;height:22px}.fullscreen svg{width:100%;height:100%}.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.support{color:var(--cream);border:1px solid var(--cream);border-radius:25px;padding:5px 12px;text-decoration:none;font-size:12px;font-weight:600;transition:background .2s}.support:hover{background:#ffffff20}.legal{font-size:9px;font-weight:500}.info-dialog{border:0;background:var(--cream);color:var(--ink);border-radius:18px;padding:50px 38px 35px;max-width:420px;width:calc(100% - 38px);box-shadow:0 25px 90px #17171730}.info-dialog::backdrop{background:#17171730;backdrop-filter:blur(8px)}.info-dialog h1{font-size:24px;margin:0 0 16px;letter-spacing:-.8px}.info-dialog p{font-size:14px;line-height:1.7}.close-dialog{position:absolute;right:18px;top:9px;font-size:32px}.dialog-back{margin-top:12px;padding:12px 20px;border-radius:30px;background:var(--ink);color:var(--cream);font-size:13px;font-weight:700}.notice{position:fixed;bottom:10%;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:25;background:var(--ink);color:var(--cream);font-size:12px;line-height:1.5;text-align:center;padding:12px 20px;border-radius:30px;max-width:calc(100% - 36px);width:max-content;transition:opacity .2s,transform .2s}.notice.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){.header{top:19px}.brand img{width:100px}.nav-item{top:4px;font-size:12px;padding:5px 13px;line-height:15px}.nav-chapters{left:20px;right:auto}.nav-about{left:auto;right:20px}.languages{right:23px;top:auto;bottom:23px;font-size:9px;gap:6px}.languages button{font-size:9px}.footer{bottom:21px;left:20px;right:20px}.footer-right{position:fixed;right:20px;bottom:58px;gap:8px}.support{font-size:10px;padding:5px 10px}.legal{font-size:7px}.player{width:305px;min-height:74px;padding:10px 19px}.play{margin-right:11px;width:35px;height:40px}.play svg{width:31px;height:35px}.track-title{font-size:12px;line-height:18px}.track-album{font-size:11px;line-height:17px}.track-counter{font-size:9px;line-height:12px}.skip-controls{margin-left:8px}.skip-controls button{width:20px}.skip-controls svg{width:17px}.swipe-tip{bottom:auto;top:calc(var(--player-y) + 46px);font-size:9px}.notice{bottom:15%}}
@media(max-height:520px) and (min-width:701px){.brand img{width:100px}.nav-item{font-size:12px;top:1px}.player{transform:scale(.75)}.swipe-tip{display:none}.footer{bottom:10px}.support{font-size:9px}.legal{font-size:7px}}
@media(prefers-reduced-motion:reduce){.swipe-tip{animation:none;opacity:.55}.player,.notice,.play{transition:none}}
.track-title{white-space:normal;overflow-wrap:break-word}

.brand-name{display:block;width:140px;font-size:25px;font-weight:800;line-height:.88;letter-spacing:-1.5px;text-align:center}
@media(max-width:700px),(max-height:520px){.brand-name{width:100px;font-size:21px}}

.view-actions{position:fixed;right:25px;top:24px;z-index:25;display:flex;align-items:center;gap:18px}.view-toggle{position:static;font-size:13px;font-weight:700;line-height:normal;letter-spacing:normal;border:0;border-bottom:1px solid currentColor;border-radius:0;background:none;padding:3px 0}
.game-caption{position:fixed;top:var(--player-y);left:50%;transform:translate(-50%,-35%);width:calc(100% - 80px);text-align:center;pointer-events:none;z-index:10;min-height:76px}
.game-caption h1{font-size:24px;font-weight:800;letter-spacing:-.8px;line-height:1.2;margin:0 0 9px;min-height:29px}
.game-caption p{font-size:13px;line-height:1.5;margin:0;min-height:20px}
.grid-spacer{pointer-events:none;width:1px;height:0}
.grid-mode .carousel{overflow-y:auto;overflow-x:hidden;touch-action:pan-y;cursor:default;scrollbar-width:thin}
.grid-mode .stage{position:fixed;pointer-events:none}
.grid-mode .record{touch-action:pan-y}
.grid-mode .game-caption,.grid-mode .swipe-tip{visibility:hidden}
.grid-mode .header{background:none;height:56px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:700px){.view-actions{top:29px;right:18px;gap:14px}.view-toggle{font-size:12px}.nav-chapters{left:12px}.nav-about{left:76px;right:auto}.nav-item{font-size:11px;padding-inline:10px}.game-caption{width:calc(100% - 40px)}.game-caption h1{font-size:21px}.game-caption p{font-size:11px;max-width:350px;margin:auto}.swipe-tip{top:calc(var(--player-y) + 68px)}}

/* Compact split ticket: shared by all game covers. */
.game-caption.ticket{display:flex;align-items:stretch;width:min(420px,calc(100vw - 40px),calc(var(--cover-size)*.82));height:104px;min-height:0;text-align:left;pointer-events:auto;transform:translate(-50%,-25%);filter:drop-shadow(0 6px 8px #56252d24);border-radius:8px;isolation:isolate;cursor:pointer}
.ticket-main{position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;width:75%;padding:13px 19px;background:#fff6e7;border-radius:8px 0 0 8px;clip-path:polygon(0 0,100% 0,98.5% 6%,100% 12%,98.5% 18%,100% 24%,98.5% 30%,100% 36%,98.5% 42%,100% 48%,98.5% 54%,100% 60%,98.5% 66%,100% 72%,98.5% 78%,100% 84%,98.5% 90%,100% 96%,100% 100%,0 100%);mask:radial-gradient(circle 6px at 100% 0,transparent 98%,#000) top,radial-gradient(circle 6px at 100% 100%,transparent 98%,#000) bottom;mask-size:100% 51%;mask-repeat:no-repeat}
.ticket-label{font-size:9px;font-weight:800;color:#85837e;letter-spacing:.5px}
.ticket-title{display:block;font-size:22px;font-weight:800;letter-spacing:-.8px;line-height:1.05;min-height:23px}
.ticket-description{display:block;font-size:10px;line-height:1.35;min-height:27px;max-width:100%}
.ticket-stub{position:relative;width:25%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgb(var(--ticket-accent,242,94,126));color:#fff6e7;border-radius:0 8px 8px 0;transform-origin:0 100%;mask:radial-gradient(circle 6px at 0 0,transparent 98%,#000) top,radial-gradient(circle 6px at 0 100%,transparent 98%,#000) bottom;mask-size:100% 51%;mask-repeat:no-repeat;transition:filter .2s,transform .2s}
.ticket-stub:before{content:'';position:absolute;left:0;top:8px;bottom:8px;border-left:1px dashed #fff6e790}
.ticket-stub svg{width:37px;height:37px;transition:transform .2s}.ticket-stub span{font-size:9px;letter-spacing:.4px}
.ticket:hover .ticket-stub{filter:brightness(1.07)}.ticket:hover .ticket-stub svg{transform:translate(2px,-2px)}
.ticket.tearing{pointer-events:none}.ticket.tearing .ticket-stub{animation:tear-stub .62s cubic-bezier(.3,.05,.6,1) forwards}.ticket.tearing .ticket-main{animation:tear-main .62s ease forwards}
@keyframes tear-stub{0%{transform:rotate(0)}20%{transform:translate(3px,-3px) rotate(7deg)}45%{transform:translate(18px,6px) rotate(19deg);opacity:1}100%{transform:translate(100px,135px) rotate(45deg);opacity:0}}
@keyframes tear-main{0%,20%{transform:rotate(0)}40%{transform:translateX(-4px) rotate(-1deg);opacity:1}100%{transform:translate(-10px,10px);opacity:0}}
.game-screen{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:80px 7vw;border:0;color:var(--ink);background:linear-gradient(125deg,var(--color-one),var(--color-two));overflow:auto}
.game-screen[open]{animation:screen-enter .35s ease both}.game-screen::backdrop{background:transparent}
.game-back{position:absolute;top:28px;left:32px;font-size:13px;font-weight:700;padding:8px}
.game-screen-content{min-height:calc(100dvh - 160px);display:flex;align-items:center;justify-content:center;gap:6vw}.game-screen-content img{width:min(38vw,430px);height:auto;box-shadow:0 12px 35px #0002;transform:rotate(-3deg)}.game-screen-copy{max-width:400px}.screen-eyebrow{font-size:10px;font-weight:700;letter-spacing:1px}.game-screen-copy h1{font-size:clamp(30px,4vw,56px);line-height:1.05;letter-spacing:-2px;margin:18px 0}.game-screen-copy p{font-size:15px;line-height:1.6}.game-status{display:inline-block;margin-top:24px;padding:12px 18px;border:1px solid #17171755;border-radius:25px;font-size:12px}
@keyframes screen-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.game-caption.ticket{height:98px;width:min(350px,calc(100vw - 32px))}.ticket-main{padding:12px 14px}.ticket-title{font-size:19px;min-height:20px}.ticket-description{font-size:10px}.ticket-stub svg{width:32px;height:32px}.game-screen-content{flex-direction:column;gap:35px}.game-screen-content img{width:min(65vw,300px)}.game-screen-copy{text-align:center}.game-screen-copy h1{letter-spacing:-1px}.game-back{left:16px;top:18px}}
@media(prefers-reduced-motion:reduce){.ticket.tearing .ticket-main,.ticket.tearing .ticket-stub,.game-screen[open]{animation:none}.ticket-stub,.ticket-stub svg{transition:none}}

.game-caption.ticket{top:var(--ticket-y);transform:translateX(-50%)}

/* Match the smaller approved ticket and reserve its own space below the cover. */
.game-caption.ticket{width:min(320px,calc(var(--cover-size)*.80),calc(100vw - 40px));height:82px;top:var(--ticket-y);transform:translateX(-50%);border-radius:6px}
.ticket-main{padding:9px 13px;gap:3px;border-radius:6px 0 0 6px;width:74%}
.ticket-label{font-size:7px;letter-spacing:.3px}
.ticket-title{font-size:17px;min-height:18px;letter-spacing:-.5px}
.ticket-description{font-size:9px;line-height:1.3;min-height:23px}
.ticket-stub{width:26%;border-radius:0 6px 6px 0;gap:7px;background:#f45e7d}
.ticket-stub svg{width:28px;height:28px}.ticket-stub span{font-size:7px}
@media(max-width:700px){.game-caption.ticket{width:min(300px,calc(var(--cover-size)*.90),calc(100vw - 40px));height:82px}.ticket-main{padding:9px 11px}.ticket-title{font-size:16px}.ticket-description{font-size:9px}.ticket-stub svg{width:27px;height:27px}}

/* Original full-sized covers, compact ticket only. */
.game-caption.ticket{width:min(300px,calc(var(--cover-size)*.76),calc(100vw - 40px));height:64px}
.ticket-main{padding:7px 11px;gap:2px}.ticket-label{font-size:6px}.ticket-title{font-size:15px;min-height:16px}.ticket-description{font-size:8px;line-height:1.25;min-height:20px}.ticket-stub{gap:5px}.ticket-stub svg{width:24px;height:24px}.ticket-stub span{font-size:6px}
.game-screen[open]{animation:none}
.circle-transition{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden;pointer-events:auto}
.circle-transition::backdrop{background:transparent}.circle-transition svg{display:block;width:100%;height:100%}
@media(max-width:700px){.game-caption.ticket{width:min(285px,calc(var(--cover-size)*.84),calc(100vw - 40px));height:64px}.ticket-main{padding:7px 10px}.ticket-title{font-size:15px}.ticket-description{font-size:8px}.ticket-stub svg{width:24px;height:24px}}

/* A slow, small movement keeps each opened game sleeve alive. */
.game-screen[open] #screen-cover{animation:cover-float 6s ease-in-out infinite;will-change:transform}
@keyframes cover-float{
 0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}
 50%{transform:translate3d(4px,-10px,0) rotate(-1.7deg)}
}
.game-status{background:var(--ink);color:var(--cream);border-color:var(--ink);font-weight:800;letter-spacing:.7px;padding:15px 25px}
@media(prefers-reduced-motion:reduce){.game-screen[open] #screen-cover{animation:none;will-change:auto}}

.footer-right a.legal{color:inherit;text-decoration:none}.footer-right a.legal:hover{text-decoration:underline}.footer-right .creator-credit{font-size:10px}@media(max-width:700px){.footer-right .creator-credit{font-size:8px}}

