/* A small game table, using the room's existing art and warm materials. */
#play-dialog{max-width:480px}.play-intro{font-size:16px;margin-bottom:20px;color:var(--muted)}
.play-choices{display:grid;gap:12px}.play-choice{border:1px solid #dcd8c5;background:#f5efdf;border-radius:16px;display:flex;align-items:center;gap:16px;text-align:left;padding:16px;color:var(--ink);min-height:100px}.play-choice:hover{background:#ecebd7;border-color:#90a275}.play-choice>img{width:65px;height:65px;object-fit:contain;flex:none}.play-choice>svg{width:54px;height:54px;padding:8px;color:#b88e39;margin-inline:5px}.play-choice span{display:grid;gap:6px}.play-choice b{font-size:18px;font-weight:600}.play-choice small{font-size:14px;color:var(--muted);line-height:1.7}
#yarn-dialog{max-width:620px;padding:28px;overflow:auto}#yarn-dialog h2{margin-bottom:10px;padding-right:22px;font-size:25px}.yarn-intro{font-size:16px!important;line-height:1.8;margin:0 0 14px}
.yarn-best{font-size:12px!important;line-height:1.8;color:var(--muted);margin-bottom:15px}
.yarn-options{margin-bottom:18px}.yarn-options label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px}.yarn-options input{width:20px;height:20px;accent-color:var(--green);flex:none}.yarn-options small{display:block;font-size:12px;line-height:1.7;color:var(--muted);padding-left:30px}
.yarn-hud{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:9px}.yarn-hud b{font-size:20px;font-family:Georgia,serif;color:var(--green)}
.yarn-arena{position:relative;height:225px;overflow:hidden;border:1px solid #d2be93;border-radius:16px;background:#c3ad7d url('./assets/room.png') center 69%/cover;isolation:isolate;--ball-x:8%;--target-x:50%;--target-width:26%;--yarn-turn:0deg}
.yarn-arena:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#262e2420,#ecca8340 70%,#462d224f)}
.yarn-cat,.yarn-fairy{position:absolute;object-fit:contain;pointer-events:none}.yarn-cat{left:5%;bottom:37%;width:24%;height:40%}.yarn-fairy{left:calc(var(--target-x) - 3%);bottom:41%;width:19%;height:32%;filter:drop-shadow(0 0 10px #fff0c2);transition:left .45s ease}
.yarn-lane{position:absolute;left:30px;right:30px;bottom:31px;height:62px;border-bottom:2px solid #fff4d680}
.yarn-target{position:absolute;left:var(--target-x);width:var(--target-width);height:60px;bottom:-1px;transform:translateX(-50%);border:2px dashed #fff7c9;border-bottom:4px solid #ffedaa;border-radius:14px;background:#fff6be40;box-shadow:0 0 16px #ffea9c50}
.yarn-target:after{content:"";position:absolute;left:50%;top:4px;bottom:4px;border-left:1px solid #fff8dba8}
.yarn-ball{position:absolute;left:var(--ball-x);bottom:-4px;width:63px;height:63px;object-fit:contain;transform:translateX(-50%) rotate(var(--yarn-turn));filter:drop-shadow(0 3px 2px #57341e55);pointer-events:none;will-change:left,transform}
.yarn-arena.in-target .yarn-target{border-style:solid;background:#fef9cd70;box-shadow:0 0 24px #fff0a580}
.yarn-arena[data-hit="yes"] .yarn-cat{animation:yarn-cheer .45s ease 2}.yarn-arena[data-hit="yes"] .yarn-fairy{animation:yarn-flutter .55s ease 2}
.yarn-arena[data-phase="paused"]:after{content:"ひと休み";position:absolute;inset:0;display:grid;place-items:center;background:#fffbedb8;font-size:21px;color:#3b5b4b;backdrop-filter:blur(2px)}
.yarn-timer{margin-top:10px;height:5px;--progress-color:#b89d54}
.yarn-timing{font-size:14px!important;text-align:center;min-height:1.8em;margin:7px 0 0;color:#57764b;font-weight:600}
.yarn-feedback{font-size:14px!important;text-align:center;min-height:3.4em;line-height:1.7;margin:3px 0 8px;color:var(--muted)}
.yarn-throws{display:flex;list-style:none;justify-content:center;gap:9px;margin:11px 0;padding:0}.yarn-throws li{width:40px;height:31px;display:grid;place-items:center;border:1px solid #dadaca;border-radius:7px;color:#959783;background:#f0efe3;font-size:13px}.yarn-throws .hit{color:#315c43;background:#dde9ca;border-color:#98b080}.yarn-throws .miss{color:#7a725f;background:#e8e3d7}
.yarn-controls{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:stretch}.yarn-controls .primary-button{font-size:18px;min-height:55px;padding:12px 15px}.yarn-controls .primary-button[aria-disabled="true"]{background:#859989}.yarn-pause{border:1px solid #cbd2bd;border-radius:12px;padding:10px 13px;font-size:14px;background:#fffdf4;color:#527152;min-width:88px}
.yarn-keyboard{text-align:center;font-size:12px!important;color:var(--muted);margin-top:7px}.yarn-result{text-align:center;padding:15px 0}.yarn-result h3{font-size:21px;font-family:"Yu Mincho",serif;line-height:1.5;margin:0 0 9px}.yarn-result p{font-size:15px;line-height:1.9}.yarn-final-points{font-size:58px;font-family:Georgia,serif;color:var(--green);line-height:1.2}.yarn-final-points small{font-size:15px;color:var(--muted)}.yarn-result-note{margin:10px 0;color:#658344;font-size:13px!important}.yarn-exit{display:block;background:transparent;border:0;text-decoration:underline;text-underline-offset:4px;margin:12px auto 0;min-height:44px;padding:9px 15px;font-size:14px;color:var(--muted)}.yarn-start-note{font-size:14px!important;color:#865c28;line-height:1.7;margin-bottom:10px}
@keyframes yarn-cheer{50%{transform:translateY(-9px) rotate(-4deg)}}@keyframes yarn-flutter{50%{transform:translateY(-13px) rotate(12deg)}}
@media(max-width:600px){#yarn-dialog{padding:23px 18px;width:calc(100% - 20px)}#yarn-dialog h2{font-size:22px}.yarn-intro{font-size:14px!important}.yarn-arena{height:200px}.yarn-lane{left:25px;right:25px}.yarn-ball{width:55px;height:55px}.yarn-target{height:54px}.yarn-feedback{font-size:14px!important}.yarn-best{font-size:12px!important}.yarn-keyboard{display:none}}
@media(max-height:700px){.yarn-arena{height:170px}.yarn-feedback{min-height:1.8em}#yarn-dialog{padding-top:20px}.yarn-throws{margin:7px 0}.yarn-intro{margin-bottom:8px}}
/* While throwing on short screens, the intro text gives way so the arena and stop button fit. */
@media(max-height:760px){#yarn-dialog[data-playing] :is(.eyebrow,.yarn-intro,.yarn-best){display:none}}
@media(max-height:500px){#yarn-dialog[data-playing] h2,#yarn-dialog[data-playing] .yarn-timing{display:none}#yarn-dialog[data-playing] .yarn-arena{height:140px}#yarn-dialog[data-playing] .yarn-hud{padding-right:52px}}
@media(prefers-reduced-motion:reduce){.yarn-arena img{animation:none!important}.yarn-fairy{transition:none}.yarn-ball{will-change:left}}