@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Mochiy+Pop+One&display=swap');

:root { --ink:#5a3429; --orange:#ff8141; --deep-orange:#ed5e35; --cream:#fff5dd; --aqua:#79dcd8; --pink:#ffa3bd; --yellow:#ffd45a; }
* { box-sizing:border-box; }
html, body { width:100%; min-height:100%; margin:0; overscroll-behavior:none; background:#ffc46e; font-family:"Kosugi Maru", sans-serif; color:var(--ink); }
body { display:grid; place-items:center; touch-action:manipulation; }
button { font:inherit; -webkit-tap-highlight-color:transparent; cursor:pointer; }
.game-shell { position:relative; width:min(100vw, 520px); height:100dvh; min-height:0; overflow:hidden; background:var(--cream); isolation:isolate; }
.screen { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .35s ease, transform .35s ease; overflow:hidden; }
.screen.is-visible { opacity:1; pointer-events:auto; }

.title-screen { background:radial-gradient(circle at 86% 17%, #ffe38c 0 9%, transparent 9.4%), radial-gradient(circle at 14% 86%, #a7e8df 0 16%, transparent 16.4%), linear-gradient(155deg,#fff8e9 0 49%,#ffd886 49.2% 100%); }
.title-screen:after { content:""; position:absolute; inset:auto -20% -12% -20%; height:31%; background:repeating-radial-gradient(ellipse at 45% 100%, #ffb95f 0 7px, transparent 8px 21px); opacity:.42; transform:rotate(-4deg); pointer-events:none; }
.title-copy { position:relative; z-index:2; padding:8.5vh 9% 0; }
.eyebrow { display:inline-block; margin:0 0 .7rem; padding:.45rem .85rem; background:white; border:3px solid var(--ink); border-radius:100px; box-shadow:3px 3px 0 #ffd476; font-size:.72rem; transform:rotate(-3deg); }
h1 { margin:0; color:var(--ink); font-family:"Mochiy Pop One", sans-serif; line-height:1.16; letter-spacing:.03em; text-shadow:2px 2px 0 #fff, 4px 4px 0 rgba(255,168,78,.25); }
h1 span { display:block; color:var(--orange); font-size:clamp(1.28rem,5.5vw,1.8rem); transform:rotate(-2deg); }
h1 strong { display:block; font-size:clamp(2rem,10vw,3.4rem); letter-spacing:-.05em; }
.how-to { margin:1.25rem 0 .9rem; font-size:.78rem; line-height:1.6; }
.how-to b { color:var(--deep-orange); font-size:1.05rem; }
.best-readout{display:flex;align-items:baseline;gap:.35rem;width:max-content;margin:.15rem 0 .85rem;padding:.32rem .7rem;background:rgba(255,255,255,.78);border:2px solid var(--ink);border-radius:999px;box-shadow:2px 2px 0 rgba(90,52,41,.14);font-size:.65rem;transform:rotate(2deg)}.best-readout b{color:var(--deep-orange);font-family:"Mochiy Pop One";font-size:1rem}.best-readout small{display:block;max-width:170px;color:#a2634e;font-size:.52rem;line-height:1.25}
.primary-button { min-width:185px; padding:.78rem 1rem .74rem 1.3rem; border:3px solid var(--ink); border-radius:100px; background:linear-gradient(#ffb15e,#ff7840); color:white; box-shadow:0 5px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.35); display:inline-flex; align-items:center; justify-content:space-between; gap:1rem; font-family:"Mochiy Pop One",sans-serif; font-size:1.05rem; text-shadow:1px 2px 0 rgba(125,58,19,.45); transition:transform .12s, box-shadow .12s; }
.primary-button:active { transform:translateY(4px); box-shadow:0 1px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,.35); }
.primary-button b { display:grid; place-items:center; width:1.65rem; height:1.65rem; background:white; border-radius:50%; color:var(--orange); font-size:.8rem; text-shadow:none; }
.hero-art { position:absolute; z-index:1; width:min(93%,460px); right:-11%; bottom:0; max-height:61%; object-fit:contain; object-position:bottom right; filter:drop-shadow(0 10px 2px rgba(125,63,35,.12)); animation:float 3.2s ease-in-out infinite; pointer-events:none; }
.sparkles { pointer-events:none; }.sparkles i { position:absolute; z-index:1; font-style:normal; color:#ff8f76; font-size:1.5rem; animation:twinkle 1.8s ease-in-out infinite alternate; }.sparkles i:nth-child(1){left:8%;top:8%;}.sparkles i:nth-child(2){right:10%;top:8%;color:#e96a88;animation-delay:.4s}.sparkles i:nth-child(3){right:7%;top:45%;color:#65cfc6;animation-delay:.8s}.sparkles i:nth-child(4){left:8%;top:57%;color:#ffcc5c;animation-delay:1.1s}.copyright{position:absolute; z-index:3; bottom:.8rem; left:0; width:100%; text-align:center; margin:0; color:rgba(90,52,41,.58); font-size:.58rem; }

.play-screen { padding:calc(env(safe-area-inset-top) + .65rem) 3.5vw calc(env(safe-area-inset-bottom) + .45rem); background:linear-gradient(180deg,#8adfd7 0 15%,#fff3cf 15% 100%); display:flex; flex-direction:column; }
.play-screen:before { content:""; position:absolute; inset:13.5% 0 auto; height:27px; opacity:.28; background:radial-gradient(ellipse at 30px 0,#fff 0 22px,transparent 23px) 0 0/58px 27px repeat-x; pointer-events:none; }
.game-header { position:relative; z-index:5; display:grid; grid-template-columns:1fr 1.3fr 41px; gap:.45rem; align-items:stretch; }
.score-card,.timer-card { padding:.44rem .55rem; background:#fffdf2; border:2.5px solid var(--ink); border-radius:17px; box-shadow:0 3px 0 rgba(90,52,41,.2); text-align:center; }.score-card span,.timer-card span,.chain-readout span { display:block; font-size:.58rem; letter-spacing:.08em; }.score-card strong{display:block;color:var(--deep-orange);font-family:"Mochiy Pop One";font-size:1.25rem;line-height:1.2}.timer-card strong{display:block;font-family:"Mochiy Pop One";font-size:1.3rem;line-height:1}.timer-card small{font-family:"Kosugi Maru";font-size:.58rem}.timer-bar{height:5px;background:#f4dbc1;border-radius:99px;margin-top:.3rem;overflow:hidden}.timer-bar i{display:block;width:100%;height:100%;border-radius:99px;background:var(--orange);transition:width .15s linear}.sound-button{border:2.5px solid var(--ink);border-radius:50%;background:#ffd85d;color:var(--ink);font-family:"Mochiy Pop One";font-size:1.2rem;box-shadow:0 3px 0 rgba(90,52,41,.2)}.sound-button.is-muted{background:#e7d6b5;color:#8d7667}.screen-sound-button{position:absolute;z-index:6;top:1rem;right:1rem;min-width:44px;min-height:44px;padding:.25rem .6rem;border-radius:999px;font-size:.78rem}.title-sound-button{max-width:11rem}.result-screen .screen-sound-button{top:1rem;right:1rem}
.message { position:relative; z-index:8; height:3.2rem; margin:.1rem 0 -3.3rem; color:#ed603b; text-align:center; font-family:"Mochiy Pop One"; font-size:1.2rem; line-height:1.05; text-shadow:0 3px #fff,2px 0 #fff,-2px 0 #fff,0 -2px #fff; transform:translateY(-8px) scale(.55) rotate(-5deg); opacity:0; transition:opacity .15s,transform .2s cubic-bezier(.17,.89,.32,1.45); pointer-events:none; }.message small{display:block;margin-top:.28rem;color:#ff8b32;font-size:.66rem;letter-spacing:.13em}.message.show{opacity:1;transform:translateY(0) scale(1) rotate(-2deg)}.message.is-super{color:#ff4775;font-size:1.34rem;animation:messagePulse .32s ease-in-out 2 alternate}
.star-row{position:relative;z-index:6;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;margin:.12rem auto .08rem;max-width:100%;pointer-events:none}.star-status{display:inline-flex;align-items:baseline;gap:.15rem;padding:.35rem .65rem;background:rgba(255,253,242,.82);border:2px solid var(--ink);border-radius:999px;box-shadow:0 2px 0 rgba(90,52,41,.16);color:var(--ink);line-height:1}.star-icon{color:#ffae22;font-size:1.12rem;text-shadow:1px 1px 0 #fff}.star-status strong{font-family:"Mochiy Pop One";font-size:.92rem}.star-status small{color:#a2634e;font-size:.58rem;font-weight:bold}.star-feedback{min-width:3.1rem;color:#ed603b;font-family:"Mochiy Pop One";font-size:.72rem;opacity:0;transform:translateY(4px) rotate(-3deg);transition:opacity .18s,transform .18s}.star-feedback.show{opacity:1;transform:translateY(0) rotate(-3deg)}.star-flight-layer{position:absolute;z-index:9;inset:0;pointer-events:none;overflow:visible}.star-flight{position:absolute;color:#ffae22;font-size:1.7rem;line-height:1;text-shadow:0 2px #fff,0 0 9px rgba(255,190,45,.8);transform:translate(-50%,-50%);animation:starFlight .62s cubic-bezier(.2,.8,.3,1) forwards;pointer-events:none}.star-flight-layer[aria-hidden="true"]{pointer-events:none}
.board-wrap { position:relative; z-index:3; width:min(96vw, 465px); aspect-ratio:6 / 7; margin:auto; border:5px solid var(--ink); border-radius:25px; background:#ffe7ab; box-shadow:0 6px 0 rgba(90,52,41,.22), inset 0 0 0 4px rgba(255,255,255,.65); overflow:hidden; touch-action:none; }
.board { position:absolute; inset:4px; overflow:visible; }
.piece{position:absolute;min-width:0;min-height:0;border:0;padding:0;appearance:none;background:transparent;display:grid;place-items:center;isolation:isolate;z-index:1}.piece-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none;user-select:none;filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 3px 2px rgba(52,28,20,.28));transform-origin:center bottom;transition:filter .12s ease}.piece.selected{z-index:5}.piece.selected .piece-image{animation:selectedPuff .78s ease-in-out infinite alternate;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(255,145,92,.68)) drop-shadow(0 3px 2px rgba(52,28,20,.24))}.piece.landing .piece-image{animation:plushLanding .34s cubic-bezier(.2,.8,.3,1) both}.piece.popping{pointer-events:none}.piece.popping .piece-image{animation:piecePop .2s cubic-bezier(.2,.8,.3,1) forwards}
.board-wrap.is-shuffling .piece{opacity:0;transform:scale(.86);transition:opacity .14s ease,transform .2s ease}.board-wrap.is-shuffling #trail{opacity:0}.board-wrap.is-shuffling .effects{opacity:.45}
.background-pause-overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:1.5rem;background:rgba(255,245,221,.82);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}.background-pause-overlay.is-visible{opacity:1;pointer-events:auto;visibility:visible}.background-pause-card{width:min(88%,310px);padding:1.5rem 1.25rem 1.35rem;background:#fffdf3;border:3px solid var(--ink);border-radius:28px;box-shadow:5px 6px 0 rgba(90,52,41,.2);text-align:center;transform:translateY(6px) rotate(-1deg);transition:transform .18s ease}.background-pause-overlay.is-visible .background-pause-card{transform:translateY(0) rotate(-1deg)}.background-pause-card p{margin:0 0 1rem;color:var(--deep-orange);font-family:"Mochiy Pop One",sans-serif;font-size:clamp(1.35rem,6vw,1.8rem);line-height:1.3}.resume-button{min-width:190px;min-height:48px;padding:.65rem 1.2rem;border:3px solid var(--ink);border-radius:100px;background:linear-gradient(#ffd96a,#ffad45);color:var(--ink);box-shadow:0 4px 0 var(--ink),inset 0 3px 0 rgba(255,255,255,.45);font-family:"Mochiy Pop One",sans-serif;font-size:1.08rem}.resume-button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink),inset 0 3px 0 rgba(255,255,255,.45)}.resume-button:focus-visible{outline:3px solid #20bce9;outline-offset:3px}
#trail{position:absolute;z-index:4;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}#trail polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}#trail-glow{stroke:var(--trail-color,#ff784d);stroke-width:var(--trail-glow-width,24);opacity:.36;filter:blur(4px)}#trail-line{stroke:#fff;stroke-width:var(--trail-width,9);filter:drop-shadow(0 0 3px var(--trail-color,#ff784d)) drop-shadow(0 0 5px var(--trail-color,#ff784d));}.effects{position:absolute;z-index:7;inset:0;pointer-events:none;overflow:hidden}.burst{position:absolute;animation:burst .78s cubic-bezier(.13,.72,.3,1) forwards;font-family:"Mochiy Pop One";font-size:clamp(1rem,5vw,1.75rem);color:var(--c);text-shadow:0 1px #fff,1px 0 #fff,-1px 0 #fff}.confetti{position:absolute;width:9px;height:13px;background:var(--c);border-radius:5px 0 5px 0;animation:confetti .9s cubic-bezier(.13,.72,.3,1) forwards}.shock-ring{position:absolute;width:26px;height:26px;margin:-13px;border:4px solid #fff;border-radius:50%;box-shadow:0 0 10px var(--c),inset 0 0 8px var(--c);animation:ring .62s ease-out forwards}
.play-footer{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:.35rem;margin-top:.6rem;padding:0 1.3vw}.mission{display:flex;align-items:center;gap:.25rem;flex:1 1 0;min-width:0}.mission span{font-size:1.4rem;color:#ff9a53}.mission p{margin:0;font-size:.58rem;line-height:1.45}.mission b{color:var(--deep-orange);font-size:.75rem}.skill-control{display:flex;flex:1 1 0;min-width:0;flex-direction:column;align-items:stretch;gap:2px}.skill-button{min-height:44px;padding:.22rem .4rem;border:2.5px solid var(--ink);border-radius:13px;background:#e8d9bd;color:#876b5b;box-shadow:0 2px 0 rgba(90,52,41,.18);line-height:1.05}.skill-button:not(:disabled){background:linear-gradient(#ffd96a,#ffad45);color:var(--ink)}.skill-button.is-targeting{background:linear-gradient(#ff9bb9,#ff6d91);color:#fff;border-color:#863b45}.skill-button:focus-visible{outline:3px solid #20bce9;outline-offset:2px}.skill-label{display:block;font-family:"Mochiy Pop One";font-size:.52rem;white-space:nowrap}.skill-button strong{display:block;font-family:"Mochiy Pop One";font-size:.72rem;color:var(--deep-orange);margin-top:.18rem}.skill-button.is-targeting strong{color:#fff}.skill-progress{height:7px;background:#f4dbc1;border:1px solid rgba(90,52,41,.3);border-radius:99px;overflow:hidden}.skill-progress i{display:block;width:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff9d42,#ff5681);transition:width .18s ease}.skill-copy{min-height:.72rem;color:#a2634e;text-align:center;font-size:.48rem;line-height:1.15;white-space:nowrap}.skill-control.is-targeting .skill-copy{color:#e95f73;font-weight:bold}.chain-readout{text-align:center;flex:1 1 0;min-width:0;padding:.34rem .48rem;background:#fffdf1;border:2px solid var(--ink);border-radius:15px;transform:rotate(2deg);box-shadow:0 2px 0 rgba(90,52,41,.18);transition:transform .14s,background .14s}.chain-readout strong{display:block;font-family:"Mochiy Pop One";line-height:1;color:#f46692}.chain-readout strong b{font-size:1.3rem}.chain-readout strong small{font-size:.46rem;letter-spacing:.04em}.chain-readout.is-hot{background:#fff0a6;transform:rotate(-3deg) scale(1.08);animation:comboBeat .35s ease-in-out infinite alternate}.chain-readout.is-super{background:#ffc1d3;box-shadow:0 0 14px #ff729f;transform:rotate(3deg) scale(1.12)}
.result-screen { background:linear-gradient(145deg,#88ddd7,#fff1c8 56%,#ffb16e); text-align:center; padding:8vh 6% 4vh; }.result-screen:before{content:"";position:absolute;inset:0;opacity:.28;background:radial-gradient(circle at 15% 17%,#fff 0 2px,transparent 3px),radial-gradient(circle at 86% 25%,#fff 0 3px,transparent 4px);background-size:43px 47px;pointer-events:none}.result-cloud{position:relative;z-index:3;width:fit-content;max-width:100%;margin:0 auto;padding:.85rem 1.2rem;background:#fffdf3;border:3px solid var(--ink);border-radius:35px;box-shadow:4px 5px 0 rgba(90,52,41,.16)}.result-cloud p{margin:0;color:var(--orange);font-family:"Mochiy Pop One";font-size:.85rem}.result-cloud h2{margin:.25rem 0 0;font-family:"Mochiy Pop One";font-size:1.25rem;line-height:1.45}.result-cloud b{color:var(--deep-orange)}.result-art{position:relative;z-index:2;width:min(89%,410px);height:37vh;object-fit:contain;margin:-.25rem auto -.9rem;filter:drop-shadow(0 7px 2px rgba(90,52,41,.12));animation:float 3s ease-in-out infinite;pointer-events:none}.result-stats{position:relative;z-index:4;display:flex;justify-content:center;gap:.7rem;margin:.1rem auto .75rem}.result-stats>div{min-width:126px;padding:.55rem .7rem;background:#fffdf3;border:2.5px solid var(--ink);border-radius:18px;box-shadow:0 3px 0 rgba(90,52,41,.18)}.result-stats span{display:block;font-size:.67rem}.result-stats strong{display:block;font-family:"Mochiy Pop One";font-size:1.4rem;color:var(--deep-orange);line-height:1.25}.result-stats small{font-family:"Kosugi Maru";font-size:.65rem;color:var(--ink)}.result-best{position:relative;z-index:4;margin:0 auto .8rem;color:var(--ink);font-size:.7rem}.result-best b{font-family:"Mochiy Pop One";font-size:1rem;color:var(--deep-orange)}.result-best strong{display:inline-block;margin-left:.55rem;color:#ff4775;font-family:"Mochiy Pop One";font-size:.9rem;transform:rotate(-3deg)}.result-best small{display:block;margin-top:.15rem;color:#a2634e;font-size:.54rem}
@keyframes float{50%{transform:translateY(-8px) rotate(1deg)}}@keyframes twinkle{to{transform:scale(1.4) rotate(15deg);opacity:.45}}@keyframes burst{to{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.35);opacity:0}}@keyframes confetti{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}@keyframes ring{to{width:130px;height:130px;margin:-65px;opacity:0;border-width:1px}}@keyframes comboBeat{to{transform:rotate(2deg) scale(1.14)}}@keyframes messagePulse{to{transform:translateY(0) scale(1.1) rotate(2deg)}}@keyframes selectedPuff{from{transform:scale(1)}to{transform:scale(1.08,.96)}}@keyframes plushLanding{0%{transform:scale(1.08,.84) translateY(5%)}35%{transform:scale(.92,1.08) translateY(-4%)}68%{transform:scale(1.04,.97) translateY(1%)}100%{transform:scale(1)}}@keyframes piecePop{to{transform:scale(.08) rotate(155deg);opacity:0}}@keyframes starFlight{to{transform:translate(calc(-50% + var(--star-x)),calc(-50% + var(--star-y))) scale(.35) rotate(360deg);opacity:.12}}@keyframes shakeSoft{25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}}@keyframes shakeBig{15%{transform:translate(-6px,3px) rotate(-.4deg)}30%{transform:translate(6px,-3px) rotate(.4deg)}45%{transform:translate(-4px,-2px)}60%{transform:translate(4px,2px)}75%{transform:translate(-2px,1px)}}.board-wrap.shake-soft{animation:shakeSoft .22s ease-in-out}.board-wrap.shake-big{animation:shakeBig .42s ease-in-out}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (max-width:350px){.play-footer{gap:.2rem;padding:0}.skill-label{font-size:.46rem}.mission p{font-size:.53rem}.chain-readout strong b{font-size:1.15rem}.chain-readout strong small{font-size:.4rem}.skill-copy{font-size:.43rem}.star-row{gap:.3rem}.star-feedback{min-width:2.7rem;font-size:.65rem}}
@media (min-width:700px) and (orientation:landscape){.game-shell{width:min(980px,100vw);min-height:100dvh}.play-screen{padding:2vh 8vw}.board-wrap{width:min(52vh,530px);margin:.5rem auto}.play-footer{position:absolute;left:7vw;bottom:16vh;width:calc(100% - 14vw)}.game-header{position:absolute;left:7vw;top:12vh;width:190px;grid-template-columns:1fr 41px}.timer-card{grid-column:1/2}.sound-button{grid-column:2;grid-row:1/3}.score-card{grid-column:1}.message{position:absolute;top:2vh;left:0;right:0}.result-art{height:39vh}}

/* The skill gets the clearest footer slot so its instruction remains readable
   on a narrow phone without stealing height from the board. */
.mission,.chain-readout{flex:.95 1 0}
.skill-control{flex:1.45 1 0}
.skill-label{font-size:.72rem}
.skill-copy{font-size:.69rem}
.piece.converted{z-index:4}
.piece.converted .piece-image{animation:skillConvert .46s cubic-bezier(.2,.8,.3,1) both;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px rgba(255,109,145,.8)) drop-shadow(0 3px 2px rgba(52,28,20,.24))}
@keyframes skillConvert{0%{transform:scale(.88)}45%{transform:scale(1.16) rotate(-4deg)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.piece.converted .piece-image{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 3px 2px rgba(52,28,20,.24))}}
@media (max-width:350px){.skill-label{font-size:.68rem}.skill-copy{font-size:.64rem}}