:root {
  color-scheme: light;
  --brown: #7e6159;
  --logo-font: "Darumadrop One", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --bordeaux: #8c2930;
  --rose: #ad6667;
  --pink: #fcdbd4;
  --ink: #3b2825;
  --white: #fffaf7;
  --prompt-ivory: #fffaf3;
  --button-text: #fff;
  --selected-text: #140a08;
  --muted: color-mix(in srgb, var(--brown) 87%, var(--ink));
  --line: color-mix(in srgb, var(--rose) 42%, var(--pink));
  --hover: color-mix(in srgb, var(--bordeaux) 88%, var(--rose));
  --soft-pink: color-mix(in srgb, var(--pink) 57%, var(--white));
  --strong-rose: color-mix(in srgb, var(--rose) 79%, var(--ink));
}
*{box-sizing:border-box} [hidden]{display:none!important} body{margin:0;background:var(--pink);color:var(--ink);font:16px/1.65 "Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif} button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--bordeaux);outline-offset:4px}main:focus{outline:0}
.shell{width:min(1140px,calc(100% - 64px));margin:auto;min-height:100svh;display:flex;flex-direction:column}.top,footer{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:16px 0}.brand{display:flex;align-items:center;gap:10px;color:var(--bordeaux);text-decoration:none;font-family:var(--logo-font);font-weight:400;font-size:17px;letter-spacing:.02em;white-space:nowrap}.brand svg{width:33px;color:var(--ink);height:33px;background:var(--soft-pink);border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.8}.brand circle{fill:currentColor}
.sound{display:flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:transparent;font-size:12px}.sound svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.sound .waves,.sound[aria-pressed=true] .muted{display:none}.sound[aria-pressed=true] .waves{display:block}.sound[aria-pressed=true]{background:var(--soft-pink)}
main{flex:1}.menu{display:grid;justify-items:center;gap:12px;padding:clamp(12px,3vh,28px) 0 24px}.eyebrow{color:var(--bordeaux);font-size:12px;font-weight:800;letter-spacing:.2em;margin:0 0 13px;display:flex;align-items:center;gap:10px}.eyebrow span{width:22px;height:1px;background:currentColor}.result h1{font:800 clamp(45px,6vw,79px)/1.14 "Yu Mincho","Hiragino Mincho ProN",Georgia,serif;letter-spacing:.015em;margin:0}.result h1{color:var(--brown)}.title-controls{width:min(100%,640px);text-align:center}.select-title{margin-bottom:10px}.select-title h2{margin:0;font-size:14px;color:var(--muted)}.select-title span{color:var(--muted);font-size:12px}.levels{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}.levels button{flex:1 1 0;border:1px solid var(--line);border-radius:8px;background:var(--white);padding:9px 13px;min-height:45px;text-align:center;font-size:14px;font-weight:800}.levels button:hover{background:var(--hover);border-color:var(--hover);color:var(--button-text)}
.levels button:active{background:var(--rose);border-color:var(--rose);color:var(--selected-text)}
.hero{width:min(100%,760px,max(420px,86svh));position:relative;container-type:inline-size;overflow:hidden;border:1px solid transparent;border-radius:16px;aspect-ratio:4/3}.hero .hero-cover{width:100%;height:auto;display:block}
footer{border-bottom:0;border-top:1px solid var(--line);font-size:12px;color:var(--muted);padding:13px 0}
#play{padding-top:22px}.stats{display:grid;grid-template-columns:1fr auto auto auto auto;gap:clamp(8px,3vw,40px);align-items:center}.stats div{display:flex;align-items:baseline;gap:7px}.stats small{font-size:12px;color:var(--muted)}.stats b{font:700 23px/1 ui-monospace,monospace}#level{font-size:13px;font-weight:800;width:max-content;padding:4px 12px;background:var(--rose);color:var(--selected-text);border-radius:20px}#end{padding:4px 12px;border:1px solid var(--line);border-radius:8px;background:transparent;font-size:12px}#end:hover,.actions button:hover{background:var(--hover);border-color:var(--hover);color:var(--button-text)}
.prompt{margin-top:18px;min-height:clamp(170px,28vh,250px);padding:24px 22px;display:grid;place-items:center;text-align:center;background:var(--prompt-ivory);border:1px solid var(--line);border-radius:14px}.prompt .eyebrow{justify-content:center}.prompt h1{font-size:clamp(20px,4vw,35px);margin:0}.prompt p:not(.eyebrow){font-size:13px;color:var(--muted);margin-bottom:0}kbd{font:inherit;background:var(--soft-pink);padding:2px 9px;border:1px solid var(--line);border-radius:6px}
#japanese{font-size:clamp(24px,4vw,48px);font-weight:750;line-height:2;overflow-wrap:anywhere}#japanese.long{font-size:clamp(19px,2.8vw,34px);line-height:2.05}rt{font-size:.42em;color:var(--muted);font-weight:600}#guide{font:650 clamp(15px,2.5vw,27px)/1.55 ui-monospace,Consolas,monospace;letter-spacing:.06em;overflow-wrap:anywhere;color:var(--brown)}.done{color:var(--rose);font-weight:800}.next{background:var(--soft-pink);color:var(--bordeaux);font-weight:800;text-decoration:underline;text-decoration-color:var(--bordeaux);text-decoration-thickness:2px;text-underline-offset:.17em}#guide.error .next{background:var(--pink);color:var(--bordeaux);text-decoration-style:double}
#scene{position:relative;height:max(clamp(185px,36vh,355px),calc(var(--basket-width)*.86 + 10px));overflow:hidden;isolation:isolate;--basket-width:clamp(180px,35vw,390px);--rim:calc(var(--basket-width)*.33 + 8px)}.basket{position:absolute;bottom:8px;left:50%;width:var(--basket-width);transform:translateX(-50%);pointer-events:none}.back{z-index:0}.front{z-index:2}.peek{position:absolute;bottom:calc(var(--rim) - 4px);left:50%;transform:translateX(-50%);width:calc(var(--basket-width)*.40);z-index:3}#cats{display:contents}.kitten{position:absolute;bottom:var(--rim);left:50%;width:calc(var(--basket-width)*.34);height:calc(var(--basket-width)*.26);object-fit:contain;object-position:bottom;pointer-events:none}.hint{text-align:center;font-size:12px;color:var(--muted);margin:0 0 12px;min-height:20px}
.result{max-width:660px;margin:clamp(40px,10vh,110px) auto;text-align:center}.result .eyebrow{justify-content:center}.result h1{font-size:clamp(32px,6vw,60px)}#resultLevel{color:var(--muted)}#scores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}#scores div{background:var(--white);padding:14px 7px;border:1px solid var(--line);border-radius:8px}dt{color:var(--muted);font-size:12px}dd{margin:4px 0 0;font:700 26px/1.3 ui-monospace,monospace}.actions{display:flex;justify-content:center;gap:12px;margin-top:25px}.actions button{padding:9px 20px;border:1px solid var(--line);border-radius:8px;background:var(--white)}.actions .primary{background:var(--bordeaux);color:var(--button-text);border-color:var(--bordeaux)}
.actions .primary:hover{background:var(--hover);border-color:var(--hover)}
@media(max-width:600px){.shell{width:calc(100% - 30px)}.levels button{flex:0 1 calc((100% - 12px)/3)}.stats div{gap:3px}.stats small{font-size:10px}.stats b{font-size:19px}.prompt{padding:16px 10px}}

@media (min-width:601px) and (max-width:800px){.shell{width:calc(100% - 38px)}}
.surprise-note{margin:12px 0 0;color:var(--muted);font-size:12px}
.scene-note{margin:0;text-align:center}
.miss-sprite{position:absolute;bottom:var(--rim);left:50%;width:calc(var(--basket-width)*.17);pointer-events:none;transform-origin:center bottom}
#progress{white-space:nowrap}
#question-count{font-size:clamp(14px,2vw,18px)}
.accuracy-score dd{color:var(--bordeaux);display:flex;justify-content:center;align-items:center;flex-wrap:wrap;column-gap:8px;row-gap:5px}
.accuracy-comment{display:inline-block;position:relative;align-self:flex-start;max-width:100%;padding:3px 8px;color:var(--bordeaux);background:var(--pink);border:1px solid var(--bordeaux);border-radius:45% 37% 43% 33% / 34% 47% 31% 43%;font:700 12px/1.5 "Yu Mincho","Hiragino Mincho ProN",serif;transform:rotate(-8deg);animation:comment-pop 340ms ease-out both}
.accuracy-comment::after{content:"";position:absolute;left:10%;bottom:2px;width:11px;height:3px;border-bottom:1px solid var(--rose);border-radius:50%}
.accuracy-empty{color:var(--muted);font-size:14px}
@keyframes comment-pop{0%{transform:rotate(-8deg) scale(.7);opacity:0}65%{transform:rotate(-8deg) scale(1.08);opacity:1}100%{transform:rotate(-8deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.accuracy-comment{animation:none}}
@media(max-width:480px){#scores{grid-template-columns:repeat(2,minmax(0,1fr))}.accuracy-score{grid-column:1/-1}.stats{grid-template-columns:1fr auto auto;gap:7px 10px}.stats #level{grid-column:1}.stats #progress{grid-column:2/-1;justify-self:end}}
#scene{--crowd-depth:clamp(54px,8vw,104px);background:var(--prompt-ivory);border-radius:14px;height:calc(max(clamp(185px,36vh,355px),var(--basket-width)*.86 + 10px) + 42px + var(--crowd-depth,0px));--rim:calc(var(--basket-width)*.33 + 50px + var(--crowd-depth,0px))}
#scene .basket{bottom:calc(50px + var(--crowd-depth,0px))}
#crowd{display:contents}
.resting-cat{position:absolute;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--brown) 19%,transparent),transparent 70%) center bottom / 86% 13% no-repeat;left:0;top:0;width:72px;height:72px;object-fit:contain;object-position:center bottom;z-index:3;pointer-events:none;transform-origin:top left;transform:translate3d(var(--cat-x),var(--cat-y),0) scale(calc(var(--cat-scale)*var(--cat-facing)),var(--cat-scale));transition:transform 180ms ease-out}

.kitten{transform-origin:center bottom}
@media(prefers-reduced-motion:reduce){.resting-cat{transition:none}}

@media(max-width:759px){.done{color:var(--strong-rose)}}

/* Reserve room for wrapped prompts so the basket stays at the same height. */
.prompt{block-size:max(200px,28vh);overflow:auto}
.prompt:has(#japanese.long){block-size:max(290px,28vh)}
@media(max-width:380px){.prompt:has(#japanese.long){block-size:330px}}

.basket-logo {
  position: absolute;
  inset: 66.5% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  margin: 0;
  color: var(--bordeaux);
  background: transparent;
  font-family: var(--logo-font);
  font-size: clamp(23px, 5vw, 64px);
  font-size: 11.5cqw;
  font-weight: 400;
  line-height: .91;
  text-align: center;
  -webkit-text-stroke: .8cqw #fff7ee;
  paint-order: stroke fill;
}
.basket-logo span { display: block; white-space: nowrap; }