@font-face{font-family:PetGarden;src:url("assets/garden-type.otf?v=22") format("opentype");font-weight:100 900;font-display:swap}
:root{color-scheme:light;--ink:#203427;--paper:#fff9e9;--muted:#52664f;--line:#c8d3bd;--accent:#a6304a;font-family:PetGarden,"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:#f6f4e9;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 25%,#edf1e0,transparent 60%),#f6f4e9}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation;color:var(--ink)}button:disabled{cursor:wait;opacity:.65}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #a6304a;outline-offset:4px}[hidden]{display:none!important}
.app{max-width:1150px;margin:auto;padding:0 12px 20px}.topbar{display:flex;align-items:center;justify-content:space-between;max-width:720px;margin:auto;height:48px;gap:8px}.brand{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:800}.brand-mark{color:#a94437;font-size:30px}.top-actions{display:flex;gap:7px}.icon-button{border:1px solid var(--line);background:#fffdf5;border-radius:50px;min-width:42px;height:42px;padding:0 12px;font-size:14px;font-weight:800}
.game-layout{max-width:600px;margin:auto}.garden{width:100%;max-width:600px;margin:auto;aspect-ratio:var(--garden-aspect,4/5);container-type:inline-size;position:relative;border-radius:22px;overflow:hidden;background:#9dd1ed;box-shadow:0 8px 30px #37543717,0 0 0 4px #fffdf3;isolation:isolate}#scene{display:block;position:absolute;left:0;top:var(--canvas-top,-20%);width:100%;height:auto;touch-action:pan-y pinch-zoom;user-select:none}.sky-panel{position:absolute;left:5%;right:5%;top:4%;text-align:center;pointer-events:none}.sky-panel button,.sky-panel input,.length-card{pointer-events:auto}.eyebrow{font-size:clamp(13px,3.2vw,17px);font-weight:800;letter-spacing:.06em}
.title-panel h1{font-size:clamp(45px,12vw,76px);line-height:1.15;letter-spacing:.025em;margin:12px 0 14px;color:#182c20;font-weight:900;-webkit-text-stroke:5px #fffbed;paint-order:stroke fill;text-shadow:0 4px 0 #fffbed,0 5px 12px #ffffffb3}.question{color:#a6304a}.intro{font-size:clamp(14px,3.4vw,19px);line-height:1.7;margin:0;font-weight:800;text-shadow:0 1px 0 #fffbed,1px 0 0 #fffbed,-1px 0 0 #fffbed}.length-card{background:#fffbedf5;box-shadow:0 4px 0 #53673e26;border:2px solid #fffdf1;border-radius:18px;max-width:360px;width:90%;padding:14px 24px 10px;margin:18px auto 0}.length-card label{font-size:clamp(14px,3.4vw,18px);font-weight:800}.stepper{display:flex;justify-content:space-between;align-items:center;margin:5px 0;gap:18px}.stepper button{border:1px solid #a6b896;background:#eef0df;border-radius:50%;width:44px;height:44px;font-size:29px}.stepper output{font-size:40px;font-weight:900;min-width:90px}.stepper output span{font-size:16px;padding-left:5px}.length-card input{width:100%;accent-color:#355e43;height:23px;cursor:pointer;touch-action:pan-y}.range-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.start-slot{max-width:360px;width:90%;margin:15px auto 0}.start-slot .start-button{background:#a6304a;border-color:#82213b;box-shadow:0 4px 0 #762238;min-height:60px;font-size:20px}.start-slot .control-note{color:#203427;text-shadow:0 1px #fff9e9}
.play-panel{top:3%}.steps{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:800}.steps span{padding:6px 11px;border-radius:20px;background:#fffbedc9;white-space:nowrap}.steps span.current{background:var(--ink);color:var(--paper)}.steps i{width:12px;height:2px;background:#36583c}.play-panel .eyebrow{margin:20px 0 8px}.play-panel h2{display:inline-block;font-size:clamp(27px,6.9vw,43px);line-height:1.35;margin:0 0 8px;padding:7px 16px;background:#fffbedef;border-radius:16px;color:#203427;font-weight:900}.instruction{font-size:clamp(14px,3.4vw,19px);line-height:1.65;margin:0;font-weight:800;text-shadow:0 1px #fffbed,1px 0 #fffbed,-1px 0 #fffbed}.reveal{display:flex;align-items:center;flex-direction:column;gap:12px;margin:24px auto 0}.reveal strong{max-width:100%;font-size:clamp(32px,8.8vw,58px);line-height:1.35;padding:12px 22px;background:#fffbed;border:3px solid #fff;border-radius:18px;color:#682519;font-weight:900;box-shadow:0 5px 0 #62744820;overflow-wrap:anywhere}.reveal>span{font-size:17px;padding:6px 12px;border-radius:10px;background:#fffbeded}
.is-result .steps{display:none}.result-text{background:#fffbedf5;border:2px solid #fff;border-radius:20px;padding:13px 16px;box-shadow:0 5px 0 #53673e26}.result-text p{font-size:clamp(16px,3.9vw,23px);margin:0 0 7px;color:#203427}.result-text strong{display:block;color:var(--accent);overflow-wrap:anywhere;word-break:break-all;font-size:clamp(34px,8.5vw,54px);font-weight:900;line-height:1.3;letter-spacing:.025em;margin:0 auto;text-shadow:0 2px #fff}.result-text.long strong{font-size:clamp(23px,5.8vw,36px);line-height:1.35}.result-text>span{display:block;margin-top:7px;font-size:clamp(15px,3.5vw,21px);color:#203427;font-weight:800}
.controls{padding:14px 2px 0}.primary,.secondary{display:inline-flex;justify-content:center;align-items:center;gap:10px;border-radius:14px;min-height:52px;padding:12px 17px;font-size:17px;font-weight:800}.primary{background:#355e43;border:1px solid #284b36;color:#fff9e9;box-shadow:0 3px 0 #21442f}.primary:hover{filter:brightness(.94)}.primary:active{transform:translateY(2px);box-shadow:0 1px 0 #21442f}.secondary{background:#fffbee;border:1px solid #b0c19d;box-shadow:0 2px 0 #d8dfcb}.secondary:hover{background:#eef1df}.start-button{width:100%;min-height:58px;font-size:20px}.button-arrow{margin-left:auto;font-size:26px}.ball-icon{display:inline-block;flex-shrink:0;width:27px;height:27px;border-radius:50%;background:linear-gradient(to bottom,#d84242 50%,#fffdf7 50%);border:2px solid #171717;position:relative;margin-right:auto;overflow:hidden}.ball-icon:after{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);background:#171717}.control-note{font-size:13px;color:var(--muted);text-align:center;margin:8px 0 0;line-height:1.7}.bottom-actions{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;min-height:36px}.quiet-button{border:0;background:none;text-decoration:underline;text-underline-offset:4px;font-size:15px;font-weight:700;padding:9px}.bottom-actions>span{font-size:13px;color:var(--muted)}.bottom-actions:has(button:not([hidden]))>span{display:none}.footer{text-align:center;font-size:13px;color:#596e52;line-height:1.8;margin:16px 0 0}.footer span{display:block}.result-controls{text-align:center}.share-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.full{width:100%}.result-controls>.full{margin-top:12px;font-size:16px;min-height:48px}.name-tools{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.name-tools:has(:not([hidden])){margin-bottom:12px}.progress-chip{display:inline-flex;align-items:center;gap:8px;border-radius:30px;background:#fffbed;border:1px solid #d2dcc7;padding:9px 14px;font-size:14px;font-weight:800}.small-separator{color:#97a88b}.script-button{display:block;margin:0 auto 12px;padding:11px 16px;border:1px solid #7a9270;border-radius:30px;background:#fffdf0;font-size:15px;font-weight:800}.name-tools .script-button{margin:0}.pause-panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#f8f6eaf2;z-index:5}.pause-panel strong{font-size:28px}.pause-panel span{font-size:16px}.pause-panel button{min-width:180px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;width:max-content;padding:12px 20px;border-radius:12px;background:#203427f5;color:white;font-size:14px;z-index:20;box-shadow:0 4px 20px #0002}
dialog{width:min(92vw,520px);max-height:86svh;border:1px solid #d4d9c5;border-radius:22px;background:#fff9ec;color:var(--ink);padding:28px;box-shadow:0 20px 90px #0003}dialog::backdrop{background:#1d3b315e;backdrop-filter:blur(3px)}dialog h2{margin:12px 0 25px;font-size:29px}dialog p{font-size:15px;line-height:1.85}dialog ol{padding-left:22px}dialog li{padding-left:5px;margin-bottom:18px}dialog li strong{font-size:18px}dialog li p{margin:6px 0}.dialog-close{position:absolute;right:12px;top:12px;background:none;border:0;font-size:28px;padding:5px 9px}.help-tip{background:#edf0df;border-radius:12px;padding:15px}dialog details{font-size:15px;margin:20px 0}dialog summary{cursor:pointer;font-weight:800}.noscript{padding:20px;text-align:center}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.primary:active{transform:none}}

/* Let the document scroll from the garden as well as the controls, on every stage. */
html{overflow-y:auto;scroll-padding-bottom:24px}body{min-height:100svh;overflow-x:clip}
.app{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
.reveal-tap{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-start;justify-content:center;padding:0;border:0;background:transparent;border-radius:22px;touch-action:pan-y pinch-zoom}
.reveal .confirm-hint{max-width:100%;padding:12px 20px;border-radius:30px;background:#fffbedf5;border:2px solid #fff;color:#203427;font-size:clamp(15px,3.7vw,22px);font-weight:800;box-shadow:0 3px 0 #53673e26}
.reveal-tap:disabled{opacity:1;cursor:default}
.reveal-tap:focus-visible{outline-offset:-5px}.reveal.is-ur strong{color:#65379a;background:#fff9e5;border-color:#edcd70;box-shadow:0 0 28px #fff2be}
.reveal.is-ur>span{color:#65379a;font-weight:900;border:1px solid #e7c776}

/* Fixed crop and compact controls; CSS alone sets the garden dimensions. */
.sky-panel{top:3%}
.title-panel>.eyebrow{display:none}
.title-panel h1{font-size:clamp(28px,9.6cqw,54px);line-height:1.2;margin:7px 0 10px;-webkit-text-stroke:4px #fffbed}
.title-panel h1 br{display:none}
.title-panel .intro{font-size:clamp(12px,3.8cqw,18px);line-height:1.5}
.length-card{width:90%;padding:9px 18px 7px;margin-top:12px;border-radius:16px}
.length-card label{font-size:clamp(13px,3.8cqw,17px)}
.stepper{margin:3px 0;gap:12px}.stepper button{width:42px;height:42px;font-size:26px}.stepper output{font-size:32px;line-height:1.3}.stepper output span{font-size:14px}
.length-card input{display:block;height:20px;margin:0}.range-labels{font-size:11px;line-height:1.3}
.start-slot{margin-top:12px}.start-slot .start-button{min-height:48px;font-size:18px;padding:9px 15px}.start-slot .control-note{font-size:12px;margin-top:5px;line-height:1.4}
.play-panel .eyebrow{font-size:clamp(12px,3.5cqw,17px);margin:10px 0 6px}
.steps{font-size:clamp(10px,3cqw,14px);gap:6px}.steps span{padding:5px 9px}.steps i{width:8px}
.play-panel h2{font-size:clamp(21px,6.9cqw,37px);padding:6px 12px;margin-bottom:6px}
.instruction{font-size:clamp(12px,3.8cqw,19px);line-height:1.5}
.reveal{margin-top:14px;gap:9px}.reveal strong{font-size:clamp(28px,8.3cqw,50px);padding:10px 16px}.reveal>span{font-size:clamp(13px,3.8cqw,20px)}
.reveal .confirm-hint{font-size:clamp(13px,3.8cqw,20px);padding:9px 15px}
.result-text{padding:10px 12px;border-radius:16px}.result-text p{font-size:clamp(13px,4.2cqw,23px);line-height:1.5;margin-bottom:5px}
.result-text strong{font-size:clamp(28px,8.5cqw,50px)}.result-text.long strong{font-size:clamp(20px,5.8cqw,32px)}.result-text>span{font-size:clamp(13px,3.8cqw,20px);line-height:1.4;margin-top:5px}
.controls{padding:8px 0 0;min-width:0}




.primary,.secondary{min-height:46px;padding:9px 14px;font-size:16px}.start-button{min-height:48px;font-size:19px}.button-arrow{font-size:23px}
.name-tools{flex-wrap:nowrap;gap:6px}.name-tools:has(:not([hidden])){margin-bottom:7px}
.progress-chip{padding:8px 11px;font-size:14px;white-space:nowrap;line-height:1.5}.progress-chip #last-letter,.progress-chip .small-separator{display:none}
.script-button{font-size:14px;padding:9px 13px;margin-bottom:7px;line-height:1.5}.name-tools .script-button{flex-shrink:0}

.bottom-actions{margin-top:4px;min-height:36px}.quiet-button{padding:8px;font-size:14px;line-height:1.5}
.control-note{font-size:12px;line-height:1.5;margin-top:6px}.share-row{gap:8px}.share-row>button,.share-row>a{padding:9px 10px;font-size:15px}.result-controls>.full{margin-top:7px;min-height:44px;font-size:15px;padding:9px 8px}
.footer{margin-top:12px;font-size:12px}.game-layout:not([data-stage="title"])+.footer{display:none}
@media(min-width:760px){
  html{scrollbar-gutter:stable}
  .app{padding-top:0}.topbar{max-width:1040px}
  .game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;max-width:1040px;align-items:center}
  .garden{grid-column:1;grid-row:1;max-width:clamp(280px,calc(80vh - 51.2px),600px)}.controls{grid-column:2;grid-row:1;padding-top:0}
  .game-layout[data-stage="title"]{display:block;max-width:600px}.game-layout[data-stage="title"] .controls{display:none}
}
@supports(height:100svh){@media(min-width:760px){.garden{max-width:clamp(280px,var(--garden-fit-width,calc(80svh - 51.2px)),600px)}}}
@media(max-width:380px){.app{padding-left:8px;padding-right:8px}.brand{font-size:12px}.brand-mark{font-size:26px}.icon-button{height:38px;min-width:38px;padding:0 10px}.name-tools{gap:5px}.progress-chip{font-size:13px;padding:8px 10px}.script-button{font-size:13px;padding:9px 11px}}


.result-cheer{text-align:right;margin:7px 0 0;padding:0 4px;font-size:13px;line-height:1.5;color:#52664f;font-weight:800}
.ad-slot{--ad-slot-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--ad-slot-height);width:100%;margin-top:6px;border:1px dashed #c4cbbd;border-radius:10px;background:#f2f3eb;color:#64715f;touch-action:pan-y}
#scene:focus-visible{outline:3px solid #a6304a;outline-offset:-3px}

/* Species labels stay on one line, including フンボルトペンギン！. */
.reveal strong{white-space:nowrap;overflow-wrap:normal;word-break:normal;font-size:clamp(16px,min(8.3cqw,calc(76cqw / var(--species-length,10))),50px)}
.result-text>span{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.icon-button.retry-header{margin-left:auto;white-space:nowrap;min-height:46px;min-width:120px;padding:0 16px;font-size:17px;border:2px solid #355e43;background:#355e43;color:#fff9e9;box-shadow:0 2px 0 #21442f}.top-actions{flex-shrink:0}
:fullscreen{background:#f6f4e9;overflow-y:auto}
@media(max-width:759px){
  .app{width:100%;max-width:none;padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);min-height:100svh}
  .topbar{height:calc(52px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 8px 0;gap:6px;max-width:none}
  .topbar .brand{display:none}.top-actions{margin-left:auto;gap:6px}.icon-button.retry-header{margin-left:0}
  .icon-button{height:40px;min-width:40px;padding:0 11px;font-size:13px}
  .game-layout{width:100%;max-width:none}.garden{border-radius:0;box-shadow:none}.reveal-tap{border-radius:0}
  .controls{padding:5px 8px 0}
  .game-layout[data-stage="title"] .controls,.footer{display:none}



  .start-button{min-height:46px}
  .name-tools:has(:not([hidden])){margin-bottom:5px}
  .name-tools .script-button{font-size:13px;min-height:40px;padding:8px 11px}
  .progress-chip{font-size:13px;padding:8px 10px}
  .result-cheer{margin-top:4px;font-size:12px}
}

/* Keep large portraits below the complete, measured name panel. */
.large-portrait .steps,.large-portrait #reveal-kicker{display:none}
.large-portrait .reveal{gap:8px;margin-top:12px}
.large-portrait .reveal strong{padding:9px 18px}
.large-portrait.is-result{top:1.5%}
.large-portrait .result-text{padding:10px 14px}
.large-portrait .result-text p{margin-bottom:4px}
.large-portrait .result-text>span{margin-top:4px}
@media(max-width:340px){.topbar{padding-left:5px;padding-right:5px;gap:4px}.top-actions{gap:4px}.icon-button.retry-header{min-width:110px;padding:0 12px;font-size:16px}.top-actions .icon-button{padding:0 8px}}
@media(max-width:759px){.topbar{height:auto;min-height:calc(52px + env(safe-area-inset-top,0px));flex-wrap:wrap;padding-top:calc(3px + env(safe-area-inset-top,0px));padding-bottom:3px}}

.mobile-break{display:none}
@media(max-width:759px){.mobile-break{display:block}.icon-button.title-return{height:46px;min-width:70px;padding:2px 4px;font-size:13px;line-height:1.2;flex-shrink:0}}
@media(max-width:340px){.icon-button.title-return{font-size:12px}}

.share-row>a{text-decoration:none;color:var(--ink);cursor:pointer;touch-action:manipulation}

/* The result's visible heading and exported PNG share the same canvas renderer. */
.is-result #result-text{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.share-row{grid-template-columns:1fr 1.35fr}.share-row button{min-height:60px;line-height:1.4}
.image-dialog{width:min(94vw,540px);max-height:90dvh;overflow:auto;padding:22px;touch-action:pan-y pinch-zoom}
.image-dialog h2{padding-right:28px}.image-dialog p{font-size:15px;line-height:1.7}
#image-preview{display:block;width:100%;height:auto;user-select:auto;-webkit-user-select:auto;-webkit-touch-callout:default;border-radius:12px}
.image-dialog .full{margin-top:12px;text-decoration:none;color:var(--ink)}
#image-share-text{width:100%;margin-top:12px;font:inherit;font-size:14px;line-height:1.6;resize:vertical}
#title-sound-note{font-size:12px;margin-top:4px}
/* Adding name/result controls must not make the browser scroll the garden. */
.game-layout{overflow-anchor:none}
.site-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 20px;margin:8px auto 0;padding:0 12px 8px;font-size:13px;line-height:1.5;touch-action:pan-y}
.site-links a{display:inline-flex;align-items:center;min-height:44px;color:#355e43;text-underline-offset:4px}
.game-layout:not([data-stage="title"]):not([data-stage="result"])~.site-links{display:none}