@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800;900&display=swap');
:root{font-family:'M PLUS Rounded 1c','Hiragino Maru Gothic ProN','Yu Gothic',sans-serif;background:#e9f0f4;color:#284050}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}#game,#scene,#scene canvas{position:fixed;inset:0;width:100%;height:100%;display:block}#game{outline:none;touch-action:none;user-select:none;cursor:pointer}#game[data-phase=flight]{cursor:default}#reset{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));right:max(24px,env(safe-area-inset-right));width:48px;height:48px;display:grid;place-items:center;border:1px solid #7992a329;border-radius:50%;background:#ffffff86;backdrop-filter:blur(10px);color:#395064;cursor:pointer;z-index:8;touch-action:manipulation;box-shadow:0 4px 16px #42647b0c}#reset:hover{background:#fff}#reset:active{transform:scale(.94)}#reset:focus-visible{outline:3px solid #7395b2;outline-offset:4px}#celebration{position:fixed;inset:0;z-index:5;overflow:hidden;cursor:pointer;isolation:isolate}#celebration[hidden]{display:none}.spectrum,.light-rays{position:absolute;inset:-65%;pointer-events:none}.spectrum{background:conic-gradient(from 40deg at 50% 50%,#ff1759,#ff9500,#eaff00,#20ed50,#00efff,#365cff,#b015ff,#ff1759);animation:spin 9s linear infinite;filter:saturate(1.25)}.spectrum:after{content:'';position:absolute;inset:0;background:repeating-conic-gradient(from 0deg,transparent 0deg 13deg,#fff5 14deg 15deg,transparent 16deg 32deg);mix-blend-mode:soft-light}.light-rays{background:radial-gradient(ellipse at center,#fff8 0%,#ffffff05 29%,#06164766 75%);z-index:1}.word-wrap{position:absolute;inset:0;display:grid;place-items:center;z-index:2;perspective:700px}.shining-word{font-weight:900;font-size:clamp(65px,14vw,218px);letter-spacing:.025em;white-space:nowrap;line-height:1.2;color:#fffbe5;position:relative;transform:rotate(-4deg);text-shadow:0 2px 0 #ffeb73,0 4px 0 #ecc249,0 6px 0 #d19126,0 8px 0 #ac6516,0 10px 0 #763d20,0 13px 0 #582d25,0 18px 15px #1401268f,0 0 14px #fff,0 0 45px #ffffa3,0 0 80px #ffe438;animation:descend 1.35s cubic-bezier(.16,.75,.19,1) both;will-change:transform}.shining-word:after{content:attr(data-word);position:absolute;inset:0;color:transparent;background:linear-gradient(110deg,transparent 10%,#fff 23%,#fff 27%,transparent 42%);background-size:280% 100%;background-clip:text;-webkit-background-clip:text;text-shadow:none;animation:shine 1s linear infinite}.dog-picture{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:5vw;background:radial-gradient(ellipse,#fffceb,#cfdfc5)}.dog-picture img{width:min(100%,800px);height:auto;max-height:88vh;object-fit:contain;border-radius:20px;box-shadow:0 30px 100px #29441d33;animation:none}#celebration[data-word=sanpo] .spectrum,#celebration[data-word=sanpo] .light-rays,#celebration[data-word=sanpo] .word-wrap{display:none}#celebration[data-word=sanpo] .dog-picture{display:flex}@keyframes spin{to{transform:rotate(360deg)}}@keyframes descend{0%{transform:translateY(-110vh) rotate(-12deg) rotateX(24deg) scale(.6)}65%{transform:translateY(4vh) rotate(-3deg) rotateX(-3deg) scale(1.07)}82%{transform:translateY(-1.3vh) rotate(-5deg) scale(.99)}100%{transform:translateY(0) rotate(-4deg) scale(1)}}@keyframes shine{from{background-position:130% 0}to{background-position:-30% 0}}@keyframes dog-arrive{from{opacity:0;transform:scale(.92) translateY(3vh)}to{opacity:1;transform:none}}@media(max-width:550px){#reset{width:43px;height:43px;bottom:20px;right:20px}.dog-picture{padding:14px}.dog-picture img{border-radius:14px}.shining-word{font-size:17vw}}@media(prefers-reduced-motion:reduce){.spectrum{animation:none}.spectrum:after{animation:none}.shining-word{animation:descend .8s ease-out both}.shining-word:after{animation-duration:4s}}

.shot-control{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 3px 5px #2549602b)}.shot-control[hidden]{display:none}#position-control{height:72px}#position-control svg{width:100%;height:100%;overflow:visible}#angle-control svg{width:100%;height:100%;overflow:visible}#angle-control[data-locked=true]{opacity:.46}#power-control{height:48px}.power-track{position:absolute;inset:0;border:5px solid #fffdf2;border-radius:16px;background:#607e8f55;box-shadow:0 0 0 2px #6484955c,inset 0 2px 6px #263e5830;overflow:visible}#power-fill{position:absolute;inset:0;background:linear-gradient(90deg,#74cabb,#b5d86e 38%,#efd265 68%,#efa668 100%);border-radius:10px;clip-path:inset(0 100% 0 0)}.power-ticks{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 2px),#fff8 calc(10% - 2px),#fff8 10%);border-radius:9px}#power-needle{position:absolute;top:-9px;bottom:-9px;width:9px;margin-left:-4px;border:2px solid #fff;border-radius:5px;background:#36556b;box-shadow:0 2px 7px #16304540}@media(max-width:550px){#position-control{height:68px}#power-control{height:44px}}

#scoreboard{position:fixed;top:max(30px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left));width:clamp(140px,17vw,230px);display:grid;grid-template-columns:1fr;gap:26px;z-index:6;color:#284050;pointer-events:none;user-select:none;text-shadow:0 2px 10px #e9f0f4,0 0 18px #e9f0f4}#scoreboard[hidden]{display:none}.score-item{text-align:left;min-width:0}.score-label{font-size:clamp(17px,1.75vw,25px);font-weight:800;line-height:1.5;white-space:nowrap}.score-value{display:flex;align-items:baseline;gap:8px;line-height:1.2}.score-value strong{font-size:clamp(38px,4.3vw,60px);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.025em}.score-value>span{font-size:18px;font-weight:800}#game{inset:0;width:100%;height:100%}#scene{position:absolute;inset:0;width:100%;height:100%}#scene canvas{position:absolute;inset:0;width:100%;height:100%}@media(max-width:550px){#scoreboard{top:max(16px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));width:116px;gap:16px}.score-label{font-size:17px}.score-value{gap:5px}.score-value strong{font-size:36px}.score-value>span{font-size:14px}}@media(max-height:500px){#scoreboard{top:16px;gap:12px}.score-label{font-size:16px}.score-value strong{font-size:34px}.score-value>span{font-size:14px}}

#counts{display:grid;gap:26px}#counts[hidden],#reset[hidden],#restart[hidden]{display:none}
#level-number{font-size:clamp(32px,3.7vw,52px);font-weight:900;line-height:1.1;letter-spacing:-.035em;color:#36556b}
#level-number[data-complete=true]{color:#a87b25;text-shadow:0 0 12px #fff,0 0 30px #ffe195}
#restart{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:9;border:1px solid #d2b877;border-radius:999px;padding:16px 28px;font:800 20px 'M PLUS Rounded 1c','Yu Gothic',sans-serif;color:#574117;background:#fff4cd;box-shadow:0 8px 35px #5b431632;cursor:pointer;touch-action:manipulation}
#restart:hover{background:#fff9e7}#restart:focus-visible{outline:3px solid #395a70;outline-offset:4px}
#celebration[data-rank="1"]{--word-size:min(12vw,34vh);--word-stretch:1}
#celebration[data-rank="2"]{--word-size:min(15vw,40vh);--word-stretch:1}
#celebration[data-rank="3"]{--word-size:min(18vw,46vh);--word-stretch:1.08}
#celebration[data-rank="4"]{--word-size:min(21vw,52vh);--word-stretch:1.18}
#celebration[data-rank="5"]{--word-size:min(23.2vw,58vh);--word-stretch:1.5}
#celebration .shining-word{font-size:var(--word-size,12vw);letter-spacing:0;line-height:1.12;scale:1 var(--word-stretch,1)}

@media(max-width:550px){#counts{gap:16px}#level-number{font-size:32px}#restart{font-size:18px;padding:13px 24px;right:20px;bottom:20px}}
@media(max-height:500px){#counts{gap:12px}#level-number{font-size:29px}}

#level-number[hidden],.dog-picture img[hidden],#mode-select[hidden]{display:none}
#mode-select{position:fixed;right:max(84px,calc(env(safe-area-inset-right) + 60px));bottom:max(26px,env(safe-area-inset-bottom));z-index:8;max-width:calc(100vw - 100px);min-height:44px;border:1px solid #9fb4c3;border-radius:13px;padding:10px 30px 10px 14px;font:800 15px 'M PLUS Rounded 1c','Yu Gothic',sans-serif;color:#395064;background:#fffffff0;box-shadow:0 4px 18px #42647b14;cursor:pointer;touch-action:manipulation}
#mode-select:disabled{opacity:.55;cursor:default}#mode-select:focus-visible{outline:3px solid #7395b2;outline-offset:3px}
#mode-select[data-complete=true]{right:max(24px,env(safe-area-inset-right));bottom:max(96px,calc(env(safe-area-inset-bottom) + 72px))}
@media(max-width:550px){#mode-select{right:76px;bottom:20px;font-size:14px}#mode-select[data-complete=true]{right:20px;bottom:84px}}

#celebration[data-rank="1"]{--dog-width:min(56vw,84vh)}
#celebration[data-rank="2"]{--dog-width:min(68vw,102vh)}
#celebration[data-rank="3"]{--dog-width:min(80vw,120vh)}
#celebration[data-rank="4"]{--dog-width:min(92vw,138vh)}
#celebration[data-word=sanpo] .dog-picture{padding:0}
#celebration[data-word=sanpo] .dog-picture img{width:var(--dog-width,min(56vw,84vh));height:auto;max-width:none;max-height:none;flex-shrink:0}
#celebration[data-word=sanpo][data-rank="5"] .dog-picture img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;border-radius:0;box-shadow:none}

#game{height:100dvh}
.macedonia{display:none;position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;background:#d82126;transform:translate(-50%,-50%);animation:macedonia-turn 4s linear infinite;will-change:transform;pointer-events:none}.macedonia svg{display:block;width:100%;height:100%}
#celebration[data-word=chinpo][data-rank="5"] .spectrum{display:none}
#celebration[data-word=chinpo][data-rank="5"] .macedonia{display:block}
@keyframes macedonia-turn{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.macedonia{animation-duration:32s}}

#celebration[data-word=chinpo][data-rank="5"] .shining-word{animation:descend 1.35s cubic-bezier(.16,.75,.19,1) both,word-gaming 4s linear infinite}
#celebration[data-word=chinpo][data-rank="5"] .shining-word:before{content:attr(data-word);position:absolute;inset:0;z-index:1;color:transparent;-webkit-text-fill-color:transparent;background:linear-gradient(90deg,#ff285b 0%,#ffad28 16.667%,#fff343 33.333%,#39ef76 50%,#39deff 66.667%,#6471ff 83.333%,#ff4fd0 100%);background-clip:text;-webkit-background-clip:text;text-shadow:none}
#celebration[data-word=chinpo][data-rank="5"] .shining-word:after{z-index:2}
@keyframes word-gaming{from{filter:hue-rotate(0deg) saturate(1.2)}to{filter:hue-rotate(360deg) saturate(1.2)}}
@media(prefers-reduced-motion:reduce){#celebration[data-word=chinpo][data-rank="5"] .shining-word{animation:descend .8s ease-out both,word-gaming 16s linear infinite}}

.dog-jump-scene{position:absolute;inset:0;z-index:1;overflow:hidden;background:#e2ebdb;pointer-events:none;--jump-cycle:1.12s}
.dog-jump-scene[hidden],.dog-jump-scene img[hidden]{display:none}
.dog-jump-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.dog-jump-stage{position:absolute;left:50%;bottom:5%;width:min(94vw,82vh);aspect-ratio:1;transform:translateX(-50%)}
.dog-jump-body{position:absolute;inset:0;background:url('/assets/dog-jump-atlas.webp') 0 0/400% 200% no-repeat;transform-origin:50% 92%;will-change:transform;animation:dog-poses var(--jump-cycle) steps(1,end) infinite,dog-leap var(--jump-cycle) linear infinite}
.dog-jump-shadow{position:absolute;left:28%;bottom:5%;width:44%;height:7%;border-radius:50%;background:radial-gradient(ellipse,#38271165,transparent 70%);transform-origin:center;animation:dog-shadow var(--jump-cycle) linear infinite}
@keyframes dog-poses{0%{background-position:0 0}12.5%{background-position:33.333333% 0}25%{background-position:66.666667% 0}37.5%{background-position:100% 0}50%{background-position:0 100%}62.5%{background-position:33.333333% 100%}75%{background-position:66.666667% 100%}87.5%{background-position:100% 100%}100%{background-position:0 0}}
@keyframes dog-leap{0%,12.5%,87.5%,100%{transform:translateY(0)}25%{transform:translateY(-3%)}37.5%{transform:translateY(-11%)}50%{transform:translateY(-14%)}62.5%{transform:translateY(-10%)}75%{transform:translateY(-2%)}}
@keyframes dog-shadow{0%,12.5%,87.5%,100%{transform:scale(1);opacity:.85}37.5%,62.5%{transform:scale(.7);opacity:.45}50%{transform:scale(.6);opacity:.3}}
@media(max-aspect-ratio:3/4){.dog-jump-stage{bottom:14%;width:min(98vw,76vh)}}
@media(prefers-reduced-motion:reduce){.dog-jump-body,.dog-jump-shadow{animation:none}}