/* 「ねずみから、にげろ！」: the floor seen from the side, three lanes (奥・まんなか・手前), the cat running to the right.
   Everything in the arena is sized as a share of the arena's height, so short screens shrink it instead of cutting it. */
#mouse-dialog{max-width:620px;padding:28px;overflow:auto}#mouse-dialog h2{margin-bottom:10px;padding-right:22px;font-size:25px}
.mouse-intro{font-size:16px!important;line-height:1.8;margin:0 0 14px}
.mouse-best{font-size:12px!important;line-height:1.8;color:var(--muted);margin-bottom:15px}
.mouse-options{margin-bottom:18px}.mouse-options label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px}.mouse-options input{width:20px;height:20px;accent-color:var(--green);flex:none}.mouse-options small{display:block;font-size:12px;line-height:1.7;color:var(--muted);padding-left:30px}
.mouse-hud{display:grid;grid-template-columns:auto auto minmax(60px,1fr);align-items:center;gap:10px;font-size:14px;margin-bottom:9px}.mouse-hud #mouse-count{font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}.mouse-spring-label{font-size:12px;color:var(--muted);white-space:nowrap}.mouse-spring{width:100%;height:8px;accent-color:#c49a3a}
.mouse-arena{position:relative;height:250px;overflow:hidden;border:1px solid #d2be93;border-radius:16px;background:#c3ad7d url('./assets/room.png') center 80%/cover;isolation:isolate;--cat-bottom:30%;--cat-depth:.92;--hint-bottom:30%;--mouse-x:15%}
/* The warm shade, and a thin line at the edges of each lane band (6-28-50-72% from the bottom). */
.mouse-arena:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  linear-gradient(to top,transparent 5.6%,#fff4d670 5.6% 6.3%,transparent 6.3% 27.6%,#fff4d670 27.6% 28.3%,transparent 28.3% 49.6%,#fff4d670 49.6% 50.3%,transparent 50.3% 71.6%,#fff4d670 71.6% 72.3%,transparent 72.3%),
  linear-gradient(#262e2438,#ecca8328 55%,#462d2250)}
/* Each lane's button takes a third of the arena, so every tap target stays tall even on short screens. */
.mouse-lane{position:absolute;left:0;right:0;height:33.34%;z-index:20;border:0;background:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mouse-lane[data-lane="0"]{top:0}.mouse-lane[data-lane="1"]{top:33.33%}.mouse-lane[data-lane="2"]{bottom:0}
.mouse-lane:focus-visible{outline:3px solid #c99738;outline-offset:-3px}
/* The fairy's light on a free lane ahead. */
.mouse-path{position:absolute;left:62%;right:0;height:14%;bottom:calc(var(--hint-bottom) + 1%);z-index:1;border-radius:20px 0 0 20px;background:linear-gradient(90deg,#ffe9a000,#ffe9a0b8 30%,#fff5cde0);box-shadow:0 0 22px #ffe58acc;transition:bottom .25s ease;animation:mouse-glow 1.1s ease-in-out infinite}
.mouse-things{position:absolute;inset:0;z-index:2;pointer-events:none}
.mouse-thing{position:absolute;height:21%;aspect-ratio:1;transform:translateX(-50%) scale(var(--depth,1));transform-origin:50% 100%;filter:drop-shadow(0 4px 2px #4a321f55)}
.thing-yarn img{width:100%;height:100%;object-fit:contain}
.thing-block{height:18%;border:2px solid #5d4222;border-radius:7px;background:linear-gradient(135deg,#f5d27a,#dca24a);display:grid;place-items:center;container-type:size}
.thing-block:after{content:"あ";font-family:"Yu Mincho",serif;font-weight:700;font-size:55cqh;line-height:1;color:#7a3d2b}
.thing-book{height:11%;aspect-ratio:64/28;border:2px solid #34496a;border-radius:4px;background:#86a3c8;box-shadow:inset 0 -8px 0 #f4ecd9}
.mouse-thing.bumped{animation:mouse-knock .45s ease-out forwards}
/* A thing already passed fades at once, so a lane that just lit up looks clear. */
.mouse-thing.passed{opacity:0;transition:opacity .16s ease}
.mouse-cat{position:absolute;left:60%;bottom:var(--cat-bottom);height:50%;aspect-ratio:13/12;transform:translateX(-50%) scale(var(--cat-depth));transform-origin:50% 100%;transition:bottom .12s ease-out,transform .12s ease-out,left .5s ease;pointer-events:none}
.mouse-cat.stumble{animation:mouse-stumble .5s ease}
.mouse-runner{position:absolute;left:var(--mouse-x);bottom:var(--cat-bottom);height:34%;width:auto;transform:translateX(-50%) scale(var(--cat-depth));transform-origin:50% 100%;transition:bottom .45s ease,left .35s linear;z-index:9;pointer-events:none;animation:mouse-rattle .16s steps(2) infinite}
.mouse-fairy{position:absolute;left:78%;bottom:min(calc(var(--hint-bottom) + 21%),72%);height:28%;aspect-ratio:62/70;object-fit:contain;z-index:12;filter:drop-shadow(0 0 10px #fff0c2);transition:bottom .25s ease;pointer-events:none;animation:mouse-hover 1.2s ease-in-out infinite}
/* Winding up, running down, then the ride. */
.mouse-arena[data-phase="ready"] .mouse-runner{animation:mouse-wind .12s steps(2) infinite}
.mouse-arena[data-phase="stopping"] .mouse-runner{animation-duration:.6s}
.mouse-arena[data-phase="rodeo"] .mouse-runner{animation:mouse-rock .5s ease-in-out infinite}
.mouse-arena[data-phase="rodeo"] .mouse-cat{left:calc(var(--mouse-x) + 2%);bottom:calc(var(--cat-bottom) + 19%);z-index:10!important;transition:left .45s ease,bottom .45s cubic-bezier(.3,1.7,.6,1);animation:mouse-ride .5s ease-in-out .45s infinite}
.mouse-arena:is([data-phase="stopping"],[data-phase="rodeo"]) .mouse-path{opacity:0}
.mouse-arena[data-phase="paused"]:after{content:"ひと休み";position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#fffbedb8;font-size:21px;color:#3b5b4b;backdrop-filter:blur(2px);pointer-events:none}
.mouse-feedback{font-size:14px!important;text-align:center;min-height:3.4em;line-height:1.7;margin:8px 0;color:var(--muted)}
.mouse-controls{display:flex;justify-content:center}.mouse-pause{border:1px solid #cbd2bd;border-radius:12px;padding:10px 18px;font-size:14px;background:#fffdf4;color:#527152;min-width:110px;min-height:44px}
.mouse-keyboard{text-align:center;font-size:12px!important;color:var(--muted);margin-top:7px}
.mouse-result{text-align:center;padding:15px 0}.mouse-result h3{font-size:21px;font-family:"Yu Mincho",serif;line-height:1.5;margin:0 0 9px}.mouse-result p{font-size:15px;line-height:1.9}.mouse-final-points{font-size:58px;font-family:Georgia,serif;color:var(--green);line-height:1.2}.mouse-final-points small{font-size:15px;color:var(--muted)}.mouse-result-note{margin:10px 0;color:#658344;font-size:13px!important}
.mouse-start-note{font-size:13px!important;color:#9a5a3a;min-height:1.4em;margin:4px 0 8px;text-align:center}
@keyframes mouse-rattle{50%{transform:translateX(-50%) scale(var(--cat-depth)) translateY(-2px) rotate(-2deg)}}
@keyframes mouse-wind{50%{transform:translateX(-50%) scale(var(--cat-depth)) translateX(2px)}}
@keyframes mouse-rock{50%{transform:translateX(-50%) scale(var(--cat-depth)) rotate(-5deg)}}
@keyframes mouse-ride{50%{transform:translateX(-50%) scale(var(--cat-depth)) rotate(-9deg) translateY(-3px)}}
@keyframes mouse-hover{50%{transform:translateY(-6px)}}
@keyframes mouse-glow{50%{opacity:.6}}
@keyframes mouse-knock{to{transform:translateX(-50%) scale(var(--depth,1)) translateY(-26px) rotate(-40deg);opacity:0}}
@keyframes mouse-stumble{30%{transform:translateX(-50%) scale(var(--cat-depth)) rotate(14deg) translateY(-6px)}}
@media(max-width:600px){#mouse-dialog{padding:23px 18px;width:calc(100% - 20px)}#mouse-dialog h2{font-size:22px}.mouse-intro{font-size:14px!important}.mouse-arena{height:220px}.mouse-keyboard{display:none}}
@media(max-height:700px){.mouse-arena{height:200px}#mouse-dialog{padding-top:20px}.mouse-intro{margin-bottom:8px}}
/* While running on short screens, the intro text gives way so the lanes fit. */
@media(max-height:760px){#mouse-dialog[data-playing] :is(.eyebrow,.mouse-intro,.mouse-best){display:none}}
@media(max-height:500px){#mouse-dialog[data-playing] h2{display:none}#mouse-dialog[data-playing] .mouse-arena{height:160px}#mouse-dialog[data-playing] .mouse-hud{padding-right:52px}}
@media(prefers-reduced-motion:reduce){.mouse-arena *{animation:none!important;transition:none!important}}
[data-reduce-motion="true"] .mouse-arena *{animation:none!important;transition:none!important}
.play-choice.locked{opacity:.62;cursor:default}.play-choice.locked:hover{background:#f5efdf;border-color:#dcd8c5}
.play-choice b{word-break:keep-all;overflow-wrap:anywhere}