*{box-sizing:border-box}body{margin:0 auto;max-width:720px;padding:10px 10px max(20px,env(safe-area-inset-bottom));background:#edf1e4;color:#173e39;font-family:system-ui,-apple-system,sans-serif}header,aside,footer,.heading{display:flex;align-items:center;gap:10px}header{padding:3px 2px 10px}header img{width:43px;height:43px;object-fit:contain;background:#c6dfaa;border-radius:13px}small{font-size:12px;font-weight:750}h1{font-size:clamp(18px,5vw,26px);margin:0}header b{margin-left:auto;background:#ffe09a;padding:7px 11px;border-radius:20px}main{overflow:hidden;background:#183e3e;color:#fff8de;border-radius:18px;box-shadow:0 4px #9caf97}.heading{padding:9px 14px;justify-content:space-between}.heading span{font-size:12px}#stage{position:relative;aspect-ratio:16/9;background:#0d2030;overflow:hidden}#stage>img,canvas{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}button{color:inherit;font:inherit;font-weight:750;cursor:pointer;touch-action:manipulation}#target{position:absolute;left:2%;top:7%;color:#ffdf77;font:900 clamp(52px,17vw,115px)/1 Arial;background:#142e4580;border:0;border-radius:12px;padding:0 .12em;text-shadow:0 2px #85591e}#pop{position:absolute;right:3%;top:8%;color:#173e39;background:#ffdf78;border-radius:15px;padding:6px 12px;pointer-events:none;opacity:0}.hit #pop{animation:pop .85s both}.hit:after{content:'✦　✧　★';position:absolute;left:4%;bottom:7%;font-size:27px;color:#ffe67a;text-shadow:2px 2px #97551e;animation:pop .85s both;pointer-events:none}@keyframes pop{0%{opacity:0;transform:scale(.7)}18%,76%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-6px)}}#progress{height:5px;background:linear-gradient(to right,#ffd97b var(--p),#45645b var(--p))}.pad{padding:12px;text-align:center}.pad small{color:#c9e8bb}h2{font-size:clamp(18px,5vw,25px);margin:3px 0 6px}#listen,#next,#bonus,footer button{border-radius:18px;padding:7px 13px;border:1px solid #91ae94;background:#f5f9eb;color:#255145;min-height:44px}#cards{display:flex;justify-content:center;gap:9px;margin:10px 0}#cards button{min-width:0;flex:1;max-width:115px;height:clamp(60px,17vw,88px);font:850 clamp(36px,11vw,55px)/1 Arial;border:1px solid #f9d67b;background:#ffe2a6;color:#20463d;border-radius:14px;box-shadow:0 3px #a57d38}#cards .retry{outline:3px dashed #8ae2bd;outline-offset:-5px}#msg{min-height:1.35em;font-size:13px;margin:7px 0 0}aside{background:#fffbed;border:1px solid #c4cfbb;border-radius:13px;margin:12px 0 6px;padding:6px 12px}aside img{width:65px;height:55px;object-fit:contain}aside b{display:block}footer{justify-content:center;margin:8px}#movie video{width:100%;max-height:240px}button:disabled{opacity:.5}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){.hit #pop,.hit:after{animation:none;opacity:1}}

.card-picture{display:block;position:relative;aspect-ratio:5/7;overflow:hidden;background:#1c3436;border-radius:inherit}.card-picture img{display:block;width:100%;height:100%;object-fit:contain}.print-mask{display:grid;grid-template-columns:repeat(5,1fr);position:absolute;inset:0;pointer-events:none}.print-mask i{display:block;position:relative;background:repeating-linear-gradient(135deg,#335254 0 7px,#395a58 7px 9px);border-right:1px dashed #8ea8968c}.print-mask i::after{content:'✦';display:block;position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);color:#b4c9a8;font-style:normal;font-size:clamp(12px,3vw,20px)}.print-mask i.found{visibility:hidden}#book-close,#book-back,#edition-filter button,#share-tools button,#share-tools a,#open-original{min-height:44px;padding:8px 13px;border-radius:12px;color:#f2f4dc;background:#234e42;border:1px solid #345e4e;text-decoration:none;font-weight:800;font-size:13px;display:inline-flex;justify-content:center;align-items:center}
#binder{padding:0 0 14px;width:min(96vw,570px);max-height:94vh;max-height:94dvh;color:#1b3d38;overflow:auto;overscroll-behavior:contain;border:1px solid #b9c4a5;border-radius:18px;background:#f7f8e9;box-shadow:0 22px 60px #0c201e77}#binder::backdrop{background:#102522c9}
.book-head{position:sticky;top:0;z-index:2;background:#21453e;padding:10px 12px;color:#f9f3d4;gap:8px}.book-head h2{font-size:20px;line-height:1.15;margin:0}.book-head small{font:700 9px/1.2 system-ui;letter-spacing:.09em;color:#cae0b8}#book-close{margin-left:auto}#book-close,#book-back{background:#355a4e;border-color:#729382;color:white;min-width:44px;padding:6px 9px}
#book-shelf,#book-detail{padding:10px 12px 0}#shelf-summary,#detail-copy{font-size:13px;font-weight:750;margin:4px 0 10px}#edition-filter{display:flex;gap:5px;margin-bottom:10px}#edition-filter button{border-radius:20px;background:#e4edda;color:#3f5846;border-color:#bfcfb8;padding:4px 13px}#edition-filter button[aria-pressed=true]{background:#285744;color:#ffefb7}
#shelf-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:9px}.shelf-tile{padding:3px 3px 6px;border:1px solid #b6c5ab;background:#fffdf1;border-radius:10px;color:#183f38;text-align:left}.shelf-tile img{display:block;width:100%;aspect-ratio:5/7;object-fit:contain;border-radius:7px}.shelf-tile b,.shelf-tile small{display:block;margin:3px 5px 0}.shelf-tile small{font-size:10px;color:#556b58}
#shelf-empty{font-size:13px;color:#4e6655}#detail-art{width:min(100%,350px,44vh);width:min(100%,350px,44dvh);margin:0 auto 9px;border-radius:12px;box-shadow:0 3px 8px #1b362c40}#detail-copy,#share-status{text-align:center}#share-tools{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}#share-tools button{background:#ffe54d;color:#342623;border-color:#d4b755}#share-tools a{color:#294737;background:#fffced;border-color:#a4b6a0}
#share-guide{padding:12px;margin-top:12px;background:#e4edda;border:1px solid #b9cbaa;border-radius:12px;font-size:13px;line-height:1.5}#share-guide p{margin:3px 0 8px}#share-status{margin:6px 0 0;font-size:12px}#shelf-empty:empty,#share-status:empty{display:none}
#movie{position:absolute;inset:0;z-index:5;background:#091922}#movie video{display:block;width:100%;height:100%;max-height:none;object-fit:contain}.in-reel #target{visibility:hidden}
.reel-head,.reel-foot{position:absolute;left:0;right:0;display:flex;align-items:center;gap:5px;padding:4px 7px;color:white}.reel-head{top:0;background:linear-gradient(#071b29db,transparent);justify-content:space-between}.reel-foot{bottom:0;background:linear-gradient(transparent,#071b29df)}.reel-head strong{font-size:clamp(11px,3.35vw,17px);text-shadow:0 1px 3px #122}.reel-head button,.reel-foot button{border:1px solid #a6b9bd88;border-radius:11px;background:#15353ade;color:white;padding:4px 8px;min-height:34px;font-size:12px}.reel-foot span{margin-left:auto;font-size:11px}.round-end{display:flex;align-items:center;justify-content:center;gap:5px}.round-end:has([hidden]){display:none}#repeat-group{background:#36584d;color:#edf1d9;border:1px solid #839d82;border-radius:16px;padding:7px;min-height:44px;font-size:12px}
#reel-shelf{padding:0;width:min(96vw,540px);max-height:92dvh;overflow:auto;border:1px solid #acc1a8;border-radius:16px;background:#f7f8e8;color:#24433a}#reel-shelf::backdrop{background:#0e2524b8}.reel-book-body{padding:12px}.reel-book-body label{display:flex;gap:5px;align-items:center;font-weight:750;min-height:44px}.reel-book-body p{font-size:13px}#reel-shelf-close{margin-left:auto;background:#345c50;border:1px solid #88a897;border-radius:10px;color:white;min-height:42px;padding:4px 10px}#reel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:6px}#reel-grid button{display:flex;align-items:center;gap:8px;background:#fbf7df;border:1px solid #c0cbb0;border-radius:12px;color:#214437;padding:7px;text-align:left;min-height:52px}#reel-grid b{font:900 30px/1 Arial;color:#9d5519}#reel-grid span{font-size:12px}

button,a{-webkit-tap-highlight-color:transparent}button:active:not(:disabled){filter:brightness(.94)}


/* The question and both card pockets stay together during play. */
.question-line{display:flex;align-items:center;gap:8px;text-align:left;min-height:44px}
.question-line h2{margin:0;font-size:clamp(17px,4.7vw,24px);line-height:1.25}
#listen{margin-left:auto;padding:5px 10px;white-space:nowrap;font-size:13px}
#movie-target{display:grid;place-items:center;flex:none;min-width:50px;padding:0 5px;background:#ffdd83;border-radius:10px;color:#173f39;font:900 clamp(44px,11vw,65px)/1.05 Arial}
#collector{--card-w:clamp(50px,18vw,94px);display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);isolation:isolate;background:#fbf5df;color:#20453b;border-top:1px solid #d3cdad}
#preview-card,.earned-pane{min-width:0;padding:6px clamp(7px,2.8vw,16px) 10px}
#preview-card{display:flex;flex-direction:column;align-items:stretch;border:0;border-right:1px solid #d2cbaa;text-align:left;background:linear-gradient(140deg,#fff2ca,#f9e5af);color:#3d472f}
.tray-title{font-size:clamp(13px,3.5vw,16px);font-weight:850;line-height:1.2;white-space:nowrap}
#preview-card>.tray-title{display:flex;align-items:center;height:44px}
.pending-card{display:flex;align-items:center;gap:clamp(5px,2vw,11px)}
#album-art{flex:0 0 var(--card-w);border-radius:6px;box-shadow:0 2px 4px #48321340}
.print-mask i{background:repeating-linear-gradient(135deg,#163731b8 0 6px,#38594eb8 6px 8px);border-right-color:#d8e1b780}
.print-mask i::after{color:#fff8d0}
.pending-copy{min-width:0;display:grid;gap:3px;justify-items:start;line-height:1.15}
#albumLabel{font-size:clamp(13px,3.7vw,18px);overflow-wrap:anywhere}
#album-count{font-size:clamp(10px,2.8vw,13px);white-space:nowrap;font-weight:650}
#shard-dots{display:flex;gap:2px;margin-top:2px}
#shard-dots i{width:clamp(5px,1.45vw,9px);height:4px;border-radius:8px;background:#cfbc85}
#shard-dots .lit{background:#35684d}
.earned-pane{background:#fcf9eb}
#open-binder{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;min-height:44px;padding:0;border:0;background:transparent;text-align:left}
#earned-count{font-size:11px;color:#53705c}.tray-link{font-size:11px;color:#506958;white-space:nowrap}
#earned-cards{display:flex;align-items:start;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#bec6aa transparent;padding-bottom:2px}
.earned-card{flex:0 0 var(--card-w);scroll-snap-align:start;padding:0;border:0;color:#254138;background:transparent;text-align:center;touch-action:pan-x pan-y}
.earned-card img{display:block;width:100%;aspect-ratio:5/7;border-radius:5px}
.earned-card span{display:block;font-size:11px;line-height:1.4;margin-top:2px;overflow-wrap:anywhere}
.just-earned img{animation:mark-earned .85s ease-out}
@keyframes mark-earned{0%,55%{outline:3px solid #d78d24;outline-offset:-3px;filter:brightness(1.25)}100%{outline:0 solid transparent}}
#tray-empty{display:flex;align-items:center;gap:8px;color:#61705b;font-size:12px;font-weight:700}
.card-back{flex:0 0 var(--card-w);aspect-ratio:5/7;display:grid;place-items:center;border-radius:6px;border:1.5px dashed #9ba68a;background:repeating-linear-gradient(135deg,#e7ebd8 0 6px,#eff0df 6px 12px);color:#8a9b7f;font-size:22px}
#preview-card:focus-visible,#open-binder:focus-visible,.earned-card:focus-visible{outline:3px solid #a66620;outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.just-earned img{animation:none}}
@media(max-height:690px) and (orientation:portrait){body{padding-top:4px}body>header{padding-bottom:5px}.heading{padding:5px 12px}.pad{padding:6px 9px}#cards{margin:5px 0}#msg{margin-top:5px}#collector{--card-w:clamp(46px,13vw,64px)}}
@media (max-height:550px) and (min-width:590px) and (orientation:landscape), (min-width:1000px) and (orientation:landscape){
  body{max-width:1050px;padding-top:3px}body>header{padding-bottom:4px}body>header img{width:34px;height:34px}body>header small{display:none}
  main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;align-content:start}
  .transform-display{grid-column:1;grid-row:1 / 3;align-self:center}.heading{padding:5px 12px}
  .pad{grid-column:2;grid-row:1;padding:6px 10px;align-self:center}#cards{margin:5px 0}#cards button{height:50px;font-size:36px}#msg{margin-top:3px}
  #collector{grid-column:2;grid-row:2;--card-w:46px}#preview-card,.earned-pane{padding:3px 8px 6px}.pending-card{gap:6px}
}

@media(min-width:1000px) and (min-height:551px) and (orientation:landscape){
  body{max-width:1200px;padding-top:16px}.pad{padding:12px 18px}#collector{--card-w:68px}#cards{margin:12px 0}#cards button{height:68px;font-size:46px}#preview-card,.earned-pane{padding:6px 13px 10px}
}
@media(max-height:540px) and (orientation:portrait){
  #stage{width:100%;max-height:26dvh}body>header img{height:32px;width:32px}body>header small{display:none}.pad{padding:4px 8px}#cards button{height:50px}#collector{--card-w:44px}
}

.share-game{text-align:center;margin:14px 0}.share-game button{border:0;border-radius:13px;background:#fee500;color:#352c1b;min-height:48px;padding:10px 18px}.share-game p,.parent-settings{font-size:12px;color:#4d685b}.share-game input{width:100%;padding:10px}.parent-settings{margin:18px 6px;line-height:1.6}.parent-settings summary{cursor:pointer;padding:8px}.parent-settings button{min-height:44px;border:1px solid #b8c6ab;border-radius:10px;background:#f9f9e9;padding:8px;color:#6f453b}

/* Eight-piece card is the main reward stage. Videos open only on request. */
#stage{aspect-ratio:auto;display:grid;grid-template-columns:40% 60%;align-items:center;height:clamp(180px,34dvh,310px);padding:10px 14px;background:radial-gradient(ellipse at 72% 40%,#577157,#173e3e 75%);gap:4px}
.target-pane{display:flex;flex-direction:column;align-items:center;gap:5px;color:#fff6d6;min-width:0}
.target-pane>small{font-size:12px}
#target{position:static;font-size:clamp(72px,22vw,126px);line-height:1.05;background:#102b2c80;padding:0 10px;min-width:90px;border:1px solid #acc48b55}
#preview-card{height:100%;width:auto;max-width:100%;aspect-ratio:5/7;justify-self:center;border:0;border-radius:10px;padding:0;background:transparent;box-shadow:0 6px 20px #071a2760;overflow:hidden}
#album-art{width:100%;height:100%;border-radius:10px;box-shadow:none}
#albumLabel{font-size:16px;color:#ffdf90}#album-count{font-size:14px;color:#f0e9ce}
#shard-dots{gap:3px}#shard-dots i{width:9px;height:7px;background:#49635c}#shard-dots .lit{background:#ffe08a}
.print-mask{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr)}
.print-mask i{border:1px solid #c7d8ac90;background:repeating-linear-gradient(135deg,#1e4942e6 0 7px,#2e554ce6 7px 9px)}
.print-mask i::after{font-size:20px}
#collector{display:block;--card-w:52px}
.earned-pane{padding:4px 12px 8px}#open-binder{min-height:32px}.earned-card{flex-basis:var(--card-w)}#tray-empty{min-height:48px}#tray-empty .card-back{flex-basis:32px}
#pop{z-index:8;top:auto;bottom:10px;right:12px}
#stage.hit #album-art{animation:card-hit .45s ease-out}
@keyframes card-hit{40%{filter:brightness(1.3);transform:scale(.96)}}
@media(min-width:1000px) and (min-height:551px){#stage{height:390px;max-height:none}#target{font-size:150px}#collector{--card-w:80px}}
@media(max-height:550px) and (min-width:590px) and (orientation:landscape){#stage{height:265px;max-height:none}#collector{--card-w:48px}#target{font-size:90px}}
@media(max-height:540px) and (orientation:portrait){#stage{height:170px;max-height:none}#target{font-size:70px}.target-pane>small{font-size:10px}.target-pane{gap:2px}#collector{--card-w:40px}.earned-pane{padding-top:0}}
@media(prefers-reduced-motion:reduce){#stage.hit #album-art{animation:none}}

/* Photo-pose dance appears only when a complete card is earned. */
#card-dance{position:absolute;inset:0 0 0 40%;z-index:10;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,#d9f3a2,#87bfa8 48%,#214a43);border-radius:12px;color:#163c36;text-align:center;box-shadow:inset 0 0 30px #f9e8a890}
#dance-close{position:absolute;right:0;top:0;z-index:4;width:38px;min-height:38px;pointer-events:auto;background:#153f3ee6;color:#fff2c5;border:0;border-radius:0 10px 0 12px;font-size:24px}
#dance-title{position:absolute;top:9px;left:5px;right:35px;z-index:3;font-size:clamp(12px,3.5vw,18px);line-height:1.3;text-shadow:0 1px #f8ffcf}
.dancer{position:absolute;inset:35px 7px 20px;transform-origin:50% 90%;animation:yeonwoo-dance 800ms ease-in-out infinite}
.dance-pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 4px 2px #0d383055);opacity:0;animation:yeonwoo-pose 1600ms steps(1,end) infinite}
.pose-two{animation-delay:-1200ms}.pose-three{animation-delay:-800ms;transform:scaleX(-1)}.pose-four{animation-delay:-400ms}
.dance-floor{position:absolute;bottom:18px;left:12%;width:76%;height:15px;background:#294b3860;border:2px solid #fff0a8;border-radius:50%;box-shadow:0 0 20px #fff0a8;animation:dance-shadow 800ms ease-in-out infinite}
.dance-caption{position:absolute;bottom:3px;left:0;right:0;font-size:10px;font-weight:850;color:#fffbd1;text-shadow:0 1px 2px #173d33}
.dance-stars{position:absolute;top:24%;left:0;right:0;font-size:28px;color:#fff3a2;animation:dance-stars 800ms ease-in-out infinite;text-shadow:0 0 10px #fff}
@keyframes yeonwoo-pose{0%,24.99%{opacity:1}25%,100%{opacity:0}}
@keyframes yeonwoo-dance{0%,100%{transform:translateX(-5%) rotate(-6deg)}25%{transform:translateY(-7%) rotate(0deg)}50%{transform:translateX(5%) rotate(6deg)}75%{transform:translateY(-7%) rotate(0deg)}}
@keyframes dance-shadow{50%{transform:scaleX(.7);opacity:.5}}
@keyframes dance-stars{50%{transform:translateY(-12px) rotate(8deg);opacity:.6}}
@media(prefers-reduced-motion:reduce){.dancer,.dance-pose,.dance-floor,.dance-stars{animation:none}.pose-one{opacity:1}}