:root{
  /* Colours from the Figma file */
  --cloth:#E4EBF3;--cloth-deep:#C9D3DF;--ink:#2E3036;--claw:#EC7A35;--shell:#B53F17;
  --peri:#7C9CC8;--peri-deep:#46699B;--blush:#E3BDB3;--surface:#F3F6FA;

  /* What each part of the page uses. Night mode swaps these. */
  --bg:var(--cloth);--fg:var(--ink);--accent:var(--claw);--link:var(--peri-deep);
  --line:var(--cloth-deep);--on-accent:var(--ink);--fold:rgba(201,211,223,.7);
  --shadow:rgba(46,48,54,.28);

  --display:'Pirata One',Georgia,serif;
  --body:'Karla',system-ui,sans-serif;
  --card-w:124px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#1D2026;--surface:#282C34;--fg:#E4EBF3;--accent:#F08A4B;--link:#9DB8DE;
    --line:#3A3F49;--fold:rgba(40,44,52,.85);--shadow:rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{
  font-family:var(--body);color:var(--fg);background:var(--bg);
  min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
main{flex:1}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
img{display:block}

/* small all-caps labels */
.label{font:800 12px/16px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--link)}

/* recolourable line drawings */
.icon{display:inline-block;background:var(--link);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;flex:none}
.x{--m:url(assets/x.svg);width:16px;height:16px;background:var(--fg)}

/* cloth folds in the background */
.folds{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.folds i{position:absolute;left:-50%;width:200%;background:linear-gradient(to bottom,transparent,var(--fold),transparent)}
.folds i:nth-child(1){top:22%;height:150px;transform:rotate(24deg)}
.folds i:nth-child(2){top:62%;height:200px;transform:rotate(20deg);opacity:.85}
.folds i:nth-child(3){top:92%;height:130px;transform:rotate(26deg);opacity:.8}

/* claw-tooth edge at the bottom */
.teeth{height:18px;background:var(--shell);-webkit-mask:url(assets/claw-teeth.svg) 0 0/22px 18px repeat-x;mask:url(assets/claw-teeth.svg) 0 0/22px 18px repeat-x}

/* header */
.top{position:absolute;inset:0 0 auto;height:0;z-index:5}
.logo{position:absolute;left:24px;top:52px;font:28px/22px var(--display);color:var(--peri)}
.year{position:absolute;right:24px;top:42px;width:64px;text-align:center}
.year img{width:64px;height:64px}
.year-n{position:absolute;left:0;right:0;top:13px;font:40px/40px var(--display);color:var(--on-accent)}
.year-label{display:block;margin-top:4px;color:var(--fg)}
.your-card{position:absolute;right:24px;top:60px}
body.is-reading .deck-only,body:not(.is-reading) .reading-only{display:none}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;width:100%;padding:17px 28px;border-radius:6px;font:700 16px/20px var(--body);text-decoration:none;text-align:center;transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.dark{background:var(--fg);color:var(--bg)}
.btn.outline{border:2px solid var(--fg);color:var(--fg);padding:15px 26px}
.btn:disabled{opacity:.7;cursor:progress}
.again{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 0;font:700 16px/20px var(--body);color:var(--link);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--link);outline-offset:3px}

/* ---------- deck ---------- */
.table{text-align:center;padding:154px 24px 32px;max-width:420px;margin:0 auto}
h1{font:54px/52px var(--display);text-transform:lowercase;margin:10px 0 18px}
.lead{font-size:18px;line-height:27px;opacity:.75;max-width:290px;margin:0 auto}
.deck-area{position:relative;height:300px;margin:12px -24px 32px}
.pick{position:absolute;left:50%;top:0;font:28px/30px var(--display);color:var(--link);transform:translateX(-50%) rotate(-3deg);white-space:nowrap;z-index:2}
.sparkle{position:absolute;z-index:2;pointer-events:none}
.deck-area .s1{left:calc(50% - 155px);top:54px;width:22px}
.deck-area .s2{left:calc(50% + 137px);top:34px;width:28px}
.deck-area .s3{left:calc(50% + 117px);top:104px;width:14px}
.deck-area .s4{display:none}
.deck{position:absolute;inset:0}
.deck .card{
  position:absolute;left:50%;top:45px;width:var(--card-w);aspect-ratio:124/177;margin-left:calc(var(--card-w)/-2);
  transform-origin:50% 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .2s;
}
.deck .card:hover,.deck .card:focus-visible{filter:brightness(1.06)}
.deck.shuffling .card{transition:transform .16s ease-in-out}
.deck-actions{display:flex;flex-direction:column;gap:12px}
.deck .card .face{position:absolute;inset:0}
.fine{margin-top:22px;color:var(--fg);opacity:.6}

/* card faces */
.face{border-radius:10px;overflow:hidden;background:var(--blush);box-shadow:0 14px 28px var(--shadow)}
.face svg,.face img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- reading ---------- */
.reading{padding:118px 24px 40px;max-width:420px;margin:0 auto}
.reading[hidden]{display:none}
.stage{position:relative;height:340px;margin:0 -24px 28px}
.burst{position:absolute;left:50%;top:0;width:340px;height:340px;margin-left:-170px}
.stage .r1{left:calc(50% - 165px);top:32px;width:26px}
.stage .r2{left:calc(50% + 141px);top:72px;width:20px}
.stage .r3{left:calc(50% + 127px);top:302px;width:28px}
.stage .r4{left:calc(50% - 151px);top:282px;width:16px}
.tilt{position:absolute;left:50%;top:50%;width:236px;margin:-168.5px 0 0 -118px;transform:rotate(-3deg)}
.flip{width:100%;aspect-ratio:236/337;perspective:1200px}
.flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,.7,.2,1)}
.flip.open .flip-in{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .front{transform:rotateY(180deg)}

.words{display:flex;flex-direction:column;gap:20px;opacity:0;transform:translateY(12px);transition:.6s .7s}
.reading.show .words{opacity:1;transform:none}
.name{text-align:center;display:flex;flex-direction:column;gap:2px;align-items:center}
.name h2{font:54px/62px var(--display);text-transform:lowercase;font-weight:400}

.player{display:flex;align-items:center;gap:14px;padding:16px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;box-shadow:0 8px 20px rgba(46,48,54,.14)}
.player[hidden]{display:none}
.play{flex:none;width:64px;height:64px;border-radius:50%;background:var(--accent);border:2.5px solid var(--fg);display:grid;place-items:center;padding-left:5px}
.play img{width:22px;height:24px}
.play .i-pause{display:none;width:22px;height:24px;fill:var(--ink)}
.play.on{padding-left:0}
.play.on .i-play{display:none}
.play.on .i-pause{display:block}
.song-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.song-title{font:40px/40px var(--display);text-transform:lowercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wave{display:flex;align-items:center;gap:3px;height:26px;overflow:hidden;cursor:pointer}
.wave i{flex:none;width:4px;border-radius:2px;background:var(--peri)}
.wave i.on{background:var(--accent)}
.note{font-size:14px;opacity:.75;text-align:center;margin-top:-8px}

.slip{position:relative;background:var(--surface);border-radius:4px 4px 0 0;padding:22px 24px 34px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px;filter:drop-shadow(0 8px 10px rgba(46,48,54,.14))}
.slip::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:var(--surface);-webkit-mask:url(assets/torn-edge.svg) 0 0/14px 12px repeat-x;mask:url(assets/torn-edge.svg) 0 0/14px 12px repeat-x}
.fortune{font:28px/30px var(--display);text-transform:lowercase}
.keys{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin-top:6px;list-style:none}
.keys li{font:800 12px/16px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--link);border:1.5px solid var(--line);border-radius:99px;padding:5px 11px}

.actions{display:flex;flex-direction:column;gap:12px}
.actions .again{margin-top:8px}

/* ---------- save the song ---------- */
.sheet{position:fixed;inset:0;z-index:50}
.sheet[hidden]{display:none}
.scrim{position:absolute;inset:0;background:#2E3036;opacity:.5;animation:fade .2s}
.panel{position:absolute;left:0;right:0;bottom:0;max-height:92vh;overflow:auto;background:var(--bg);border-radius:22px 22px 0 0;padding:20px 24px 44px;display:flex;flex-direction:column;gap:18px;box-shadow:0 -8px 30px rgba(26,26,31,.25);animation:up .28s cubic-bezier(.2,.8,.2,1)}
.grabber{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto}
.sheet-title{display:flex;align-items:center;gap:14px}
.thumb{flex:none;width:48px;height:69px;border-radius:10px;overflow:hidden;background:var(--blush);box-shadow:0 14px 28px var(--shadow)}
.thumb img{width:100%;height:100%;object-fit:cover}
.title-text{flex:1;min-width:0}
.sheet-song{font:54px/56px var(--display);text-transform:lowercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.close{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--fg);display:grid;place-items:center}
.sheet-lead{font-size:16px;line-height:24px;opacity:.75}
.apps{display:flex;flex-direction:column;gap:10px}
.app{display:flex;align-items:center;gap:14px;padding:12px 16px 12px 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;text-decoration:none;font:700 16px/20px var(--body);transition:transform .12s}
.app:hover{transform:translateY(-1px)}
.app .mark{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font:28px/30px var(--display)}
.app .app-name{flex:1}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@keyframes fade{from{opacity:0}}

/* ---------- computer ---------- */
@media (min-width:900px){
  :root{--card-w:200px}
  .folds i:nth-child(1){top:14%;height:200px;transform:rotate(10deg)}
  .folds i:nth-child(2){top:58%;height:260px;transform:rotate(8deg)}
  .folds i:nth-child(3){display:none}
  .teeth{margin-top:auto}
  .logo{left:56px;top:40px}
  .year{right:56px;top:30px;width:72px}
  .year img{width:72px;height:72px}
  .year-n{top:17px}
  .your-card{right:56px;top:52px}

  .table{max-width:none;padding:96px 56px 40px}
  h1{font-size:76px;line-height:70px;margin:12px 0 18px}
  .lead{font-size:20px;max-width:560px}
  .deck-area{height:440px;max-width:1440px;margin:44px auto 20px}
  .pick{top:-6px;font-size:40px;line-height:40px}
  .deck-area .s1{left:calc(50% - 540px);top:80px;width:34px}
  .deck-area .s2{left:calc(50% + 450px);top:30px;width:40px}
  .deck-area .s3{left:calc(50% + 530px);top:170px;width:22px}
  .deck-area .s4{display:block;left:calc(50% - 610px);top:220px;width:22px}
  .deck .card{top:55px;aspect-ratio:200/286}
  .deck-actions{flex-direction:row;justify-content:center;gap:14px}
  .deck-actions .btn{width:280px}

  .reading{max-width:1280px;padding:150px 56px 60px;display:grid;grid-template-columns:minmax(0,700px) minmax(0,560px);gap:20px;align-items:start;justify-content:center}
  .stage{height:700px;margin:0}
  .burst{width:700px;height:700px;margin-left:-350px}
  .stage .r1{left:calc(50% - 300px);top:80px;width:38px}
  .stage .r2{left:calc(50% + 240px);top:110px;width:28px}
  .stage .r3{left:calc(50% + 250px);top:550px;width:40px}
  .stage .r4{left:calc(50% - 320px);top:570px;width:24px}
  .tilt{width:400px;margin:-285.5px 0 0 -200px}
  .face{box-shadow:0 22px 44px var(--shadow)}
  .deck .face{box-shadow:0 14px 28px var(--shadow)}
  .words{gap:22px}
  .name{text-align:left;align-items:flex-start;gap:0}
  .name h2{font-size:76px;line-height:84px}
  .player{padding:20px;gap:18px}
  .play{width:72px;height:72px;padding-left:6px}
  .play img,.play .i-pause{width:24px;height:26px}
  .song-info{gap:4px}
  .wave{gap:4px;height:28px}
  .note{text-align:left}
  .slip{padding:26px 32px 42px}
  .fortune{font-size:36px;line-height:38px}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .actions .again{margin-top:0}

  .panel{left:50%;top:50%;bottom:auto;right:auto;width:660px;max-width:calc(100vw - 48px);transform:translate(-50%,-50%);border-radius:20px;padding:36px;gap:22px;box-shadow:0 24px 60px rgba(26,26,31,.3);animation:pop .22s cubic-bezier(.2,.8,.2,1)}
  .grabber{display:none}
  .sheet-title{gap:18px}
  .thumb{width:60px;height:86px}
  .sheet-song{line-height:58px}
  .close{width:44px;height:44px}
  .close .x{width:18px;height:18px}
  .sheet-lead{font-size:18px;line-height:27px}
  .apps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .app{height:70px;padding-top:0;padding-bottom:0}
  @keyframes pop{from{transform:translate(-50%,-46%);opacity:0}}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}