/* v1.17: readable instructions and a clear action, for toy games only. */
.toy-game .toy-game-actions:has([data-game-input="note"]){display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:5px;max-width:350px;align-self:center;width:100%}
.toy-game .toy-game-actions [data-game-input="note"]{width:100%;min-width:44px;max-width:none;padding:8px 3px}
.toy-game .toy-game-actions:has([data-game-input="note"]) [data-game-input="demo"]{grid-column:1 / -1;justify-self:center;max-width:220px;width:100%;height:auto;min-height:44px}
.room-toy-game-controls .toy-game .toy-game-actions :is([data-game-input="hit"],[data-game-input="charge"],[data-game-input="water"]){min-width:180px;min-height:52px}
.toy-game-board .toy-game-catch{border:3px solid #4a893e;background:#e9ffd6b8;color:#244f21;font-size:13px;font-weight:900;text-align:center;white-space:nowrap;padding-top:8px}
.toy-game-board.game-telescope .toy-game-star{width:44px;min-width:44px;height:44px;min-height:44px}
.toy-game-guide{display:grid;gap:7px;margin:10px 0;padding:11px 12px;background:#fffef8;border:1px solid #dce5cd;border-radius:14px}
.toy-game-guide p{display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:9px;align-items:start;margin:0;font-size:14px;line-height:1.8}
.toy-game-guide b{color:#486b3f;font-size:12px;line-height:1.8;padding:3px 5px;border-radius:7px;background:#edf3e4;text-align:center}
.toy-game-guide span{min-width:0;overflow-wrap:anywhere;color:#425a42}
.toy-game-now{margin:10px 0 8px;padding:11px 13px;min-height:46px;border:2px solid #a8c695;border-radius:14px;background:#eaf4df;color:#315530;font-size:15px;font-weight:800;line-height:1.7;text-align:center;overflow-wrap:anywhere}
.toy-game-actions{gap:9px;margin:10px 0 7px}
.toy-game-actions button[data-game-input]:not([data-game-input="demo"]){min-width:48px;min-height:48px;background:#477a43;border-color:#3a6936;color:#fff;box-shadow:0 4px 0 #31582e;font-size:16px;padding:10px 16px}
.toy-game-actions button[data-game-input]:not([data-game-input="demo"]):not(:disabled):active{background:#376432;box-shadow:0 1px 0 #31582e}
.toy-game-actions button[data-game-input]:disabled{opacity:.57}
.toy-game-actions button[data-game-input="demo"],.toy-game .toy-game-toolbar button{min-width:44px;min-height:44px;padding:8px 12px;background:#fffef7;border:1px solid #cdd8c5;color:#53674c;box-shadow:0 2px 0 #e0e5d9;font-size:13px;line-height:1.5}
.toy-game .toy-game-toolbar{gap:8px;padding-top:10px;margin-top:11px;border-top:1px solid #e0e6d6}
.toy-game .toy-game-toolbar button[aria-pressed="true"]{background:#e6efd9;border-color:#96af85;color:#375832}
.toy-game-actions button[data-game-input="wind"]{flex:1 1 85px;max-width:150px;padding:9px 7px}
.toy-game-actions button[data-game-input="wind"] small{font-size:12px;font-weight:500;color:#f1f9e9}
.toy-game-actions button[data-game-input="note"]{flex:0 1 48px;min-width:44px;height:60px;padding:8px 5px;font-size:19px}
.toy-game-actions button[data-game-input="beat"]{min-width:95px;height:68px;font-size:19px}
.toy-game-actions button[data-game-input="hit"],.toy-game-actions button[data-game-input="charge"],.toy-game-actions button[data-game-input="water"]{min-width:180px;min-height:52px}
.toy-game-actions button.is-sounding{outline:3px solid #d4a534;outline-offset:3px;background:#8f7127!important;box-shadow:0 0 0 6px #f0db823d}
.toy-game-feedback{font-size:14px;line-height:1.7;margin-top:10px;padding:10px}
.toy-game-key-help{font-size:11px;line-height:1.6}

/* The cue has its own row; reserve space above every game field. */
.toy-game-board{height:310px}
.toy-board-cue{position:absolute;top:7px;left:8px;right:8px;z-index:5;display:flex;align-items:center;justify-content:center;min-height:36px;padding:7px 10px;border:1px solid #c7dbb4;border-radius:11px;background:#fffef6f2;color:#385d37;font-size:14px;font-weight:800;line-height:1.6;text-align:center;overflow-wrap:anywhere;pointer-events:none}
.toy-game-board .toy-game-field{top:56px;bottom:18px}
.toy-game-target{font-size:14px;line-height:1.8;padding:7px 9px}
.toy-game-target b{font-size:16px}
.toy-game-board button{min-width:44px;min-height:44px}
.toy-game-board :is(.toy-game-bubble,.toy-game-star){touch-action:manipulation}

/* Games answered on the board need width for their text and tap targets. */
.toy-game-board:is(.game-book,.game-bubbles,.game-watering-can,.game-telescope,.game-drum,.game-xylophone) .toy-game-field{left:5%;right:5%;top:56px;bottom:74px}
.toy-game-board:is(.game-book,.game-bubbles,.game-watering-can,.game-telescope,.game-drum,.game-xylophone) .toy-game-buddy{left:3%;bottom:1px;width:78px;height:70px}
.toy-game-board:is(.game-book,.game-bubbles,.game-watering-can,.game-telescope,.game-drum,.game-xylophone) .toy-game-buddy>.dressed-pet{width:75px!important;max-height:72px}
.toy-game-board:is(.game-book,.game-bubbles,.game-watering-can,.game-telescope,.game-drum,.game-xylophone) .toy-game-prop{width:32px;height:36px;right:-8px;bottom:0}
.game-book.toy-game-board{height:360px}
.toy-game-story{padding:0}
.toy-game-story>p{font-size:15px;line-height:1.8;padding:10px 12px;min-height:64px;margin:0 0 10px;color:#39533a;background:#fffef9f2}
.toy-game-story-cards{gap:8px;align-items:stretch}
.toy-game-board .toy-game-story-cards button{min-width:44px;min-height:91px;font-size:14px;line-height:1.6;padding:8px 5px;overflow-wrap:anywhere;border:2px solid #aec698;color:#355932;background:#fffef5}
.toy-game-story-cards button>span{font-size:32px;line-height:1.2}
.toy-game-pages{font-size:17px;line-height:1.5;padding:7px 0}
.toy-game-bubbles{height:130px;gap:10px}
.toy-game-board .toy-game-bubble{width:66px;height:66px;min-height:66px;flex:none;font-size:28px}
.toy-game-plants{gap:8px;margin-top:12px}
.toy-game-plants button{min-height:108px;padding:7px 3px}
.toy-game-plants b{font-size:13px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.toy-game-plants small{font-size:14px;letter-spacing:0;line-height:1.5}
.toy-game-flower{font-size:37px;line-height:1.5}
.toy-game-board .toy-game-star{width:48px;height:48px;min-width:48px;min-height:48px}
.toy-game-star>span{font-size:44px}
.toy-game-star>b{font-size:15px;font-weight:900}
.game-telescope .toy-board-cue{border-color:#c4d7df;background:#f2f8fff0;color:#334d64}
.toy-game-music{inset:3% 0 0;gap:14px}
.toy-game-music>b{font-size:17px}
.toy-game-music>small{font-size:13px;line-height:1.6}
.toy-game-score-notes>span{width:40px;height:46px;font-size:15px}
.toy-game-wheel-label{font-size:13px;line-height:1.5}
.toy-game-wheel-area{width:min(190px,100%);height:172px}
.toy-game-jump p{font-size:13px;line-height:1.7}
.toy-game-catch{font-size:13px}

/* Room scenes are independent of the controls below them. Leave room for the cue. */
.habitat.room-play-active.room-toy-game-active{height:380px;min-height:380px}
.habitat.room-toy-game-active:has(.game-book){height:440px;min-height:440px}
.room-toy-game-scene{inset:58px 8px 9px}
.room-toy-game-scene .toy-game-board{height:100%}
.room-toy-game-scene .toy-game-board:is(.game-book,.game-bubbles,.game-watering-can,.game-telescope,.game-drum,.game-xylophone) .toy-game-buddy{left:3%;bottom:1px;width:78px;height:70px}
.room-toy-game-scene .toy-game-board:is(.game-book,.game-bubbles,.game-watering-can,.game-telescope,.game-drum,.game-xylophone) .toy-game-buddy>.dressed-pet{width:75px!important}
.room-toy-game-controls .toy-game{padding:13px 15px}

/* In the room the board lives above this host: bring its controls up first. */
.room-toy-game-controls .toy-game{display:flex;flex-direction:column}
.room-toy-game-controls .toy-game-heading{order:0}
.room-toy-game-controls .toy-game-actions{order:1;margin-top:9px;margin-bottom:4px}
.room-toy-game-controls .toy-game-actions:empty{display:none}
.room-toy-game-controls .toy-game-guide{order:2}
.room-toy-game-controls .toy-game-feedback{order:3}
.room-toy-game-controls .toy-game-variant{order:4;margin-top:8px;text-align:center;font-size:12px;line-height:1.6;color:#67735c}
.room-toy-game-controls .toy-game-toolbar{order:5}
.room-toy-game-controls .toy-game-key-help{order:6}
.room-toy-game-controls .toy-game-now{display:none}

@media(max-width:540px){
 .toy-game-guide{padding:9px 10px;gap:8px}
 .toy-game-guide p{grid-template-columns:4.8em minmax(0,1fr);gap:7px;font-size:14px;line-height:1.75}
 .toy-game-guide b{font-size:11px}
 .toy-game-now{font-size:14px;padding:10px;line-height:1.7}
 .toy-game-heading strong{font-size:16px}
 .toy-game-progress{font-size:13px}
 .toy-game-board{height:315px}
 .toy-board-cue{left:6px;right:6px;top:6px;font-size:13px;line-height:1.6;min-height:38px;padding:6px 7px}
 .toy-game-board .toy-game-field{top:60px;left:25%;right:4%;bottom:17px}
 .toy-game-board:is(.game-book,.game-bubbles,.game-watering-can,.game-telescope,.game-drum,.game-xylophone) .toy-game-field{left:5%;right:5%;top:60px;bottom:70px}
 .toy-game-board:is(.game-book,.game-bubbles,.game-watering-can,.game-telescope,.game-drum,.game-xylophone) .toy-game-buddy{height:65px;width:70px}
 .toy-game-board:is(.game-book,.game-bubbles,.game-watering-can,.game-telescope,.game-drum,.game-xylophone) .toy-game-buddy>.dressed-pet{width:68px!important}
 .game-book.toy-game-board{height:365px}
 .toy-game-story>p{font-size:14px;line-height:1.8;padding:9px 10px;min-height:66px}
 .toy-game-story-cards{gap:6px}
 .toy-game-board .toy-game-story-cards button{font-size:14px;min-height:91px;padding:8px 3px}
 .toy-game-story-cards button>span{font-size:30px}
 .toy-game-pages{font-size:16px;letter-spacing:1px}
 .toy-game-board .toy-game-bubble{width:58px;height:58px;min-height:58px;font-size:25px}
 .toy-game-target{font-size:13px;padding:6px 7px}
 .toy-game-target b{font-size:15px}
 .toy-game-plants{gap:6px;margin-top:8px}
 .toy-game-plants b{font-size:12px}
 .toy-game-plants small{font-size:13px}
 .toy-game-plants button{min-height:110px;padding:6px 2px}
 .toy-game-flower{font-size:34px}
 .toy-game-actions{gap:8px}
 .toy-game-actions button[data-game-input]:not([data-game-input="demo"]){min-height:48px;font-size:15px;padding:9px 12px}
 .toy-game-actions button[data-game-input="note"]{min-width:44px;flex-basis:44px;padding:8px 3px;font-size:18px}
 .toy-game-actions button[data-game-input="wind"]{min-width:0;flex-basis:75px;padding:9px 4px;font-size:14px}
 .toy-game-actions button[data-game-input="wind"] small{font-size:11px}
 .toy-game-actions button[data-game-input="demo"]{flex-basis:100%;max-width:180px}
 .toy-game-feedback{font-size:13px}
 .toy-game-score-notes{gap:5px}
 .toy-game-score-notes>span{width:35px;height:44px;font-size:14px}
 .toy-game-music>small{font-size:12px}
 .toy-game-wheel-area{width:min(175px,100%);height:170px}
 .toy-game-wheel-label{font-size:12px}
 .habitat.room-play-active.room-toy-game-active{height:385px;min-height:385px}
 .habitat.room-toy-game-active:has(.game-book){height:440px;min-height:440px}
 .room-toy-game-scene{inset:52px 4px 7px}
 .room-toy-game-controls .toy-game{padding:11px 10px}
 .room-toy-game-scene .toy-game-board:is(.game-book,.game-bubbles,.game-watering-can,.game-telescope,.game-drum,.game-xylophone) .toy-game-buddy{height:65px;width:70px}
 .room-toy-game-scene .toy-game-board:is(.game-book,.game-bubbles,.game-watering-can,.game-telescope,.game-drum,.game-xylophone) .toy-game-buddy>.dressed-pet{width:68px!important}
}
@media(max-width:365px){
 .toy-game-guide p{grid-template-columns:1fr;gap:3px}
 .toy-game-guide b{justify-self:start;padding:2px 9px;font-size:12px}
 .toy-game-heading{gap:7px}
 .toy-game-heading strong{font-size:15px}
 .toy-board-cue{font-size:13px}
 .toy-game-board .toy-game-field{top:65px}
 .toy-game-board:is(.game-book,.game-bubbles,.game-watering-can,.game-telescope,.game-drum,.game-xylophone) .toy-game-field{top:65px;left:4%;right:4%}
 .toy-game-board .toy-game-story-cards button{font-size:14px;line-height:1.5}
 .toy-game-story>p{font-size:14px}
 .toy-game-story-cards{gap:5px}
 .toy-game-board .toy-game-bubble{width:54px;height:54px;min-height:54px;font-size:24px}
 .toy-game-actions{gap:6px}
 .toy-game-actions button[data-game-input="note"]{min-width:44px;flex-basis:44px;font-size:17px}
 .toy-game-score-notes{gap:4px}
 .toy-game-score-notes>span{width:34px;font-size:14px}
 .toy-game-plants b{font-size:12px}
 .toy-game-target{font-size:13px}
 .toy-game-target b{font-size:15px}
 .toy-game-key-help{font-size:11px}
 .habitat.room-toy-game-active:has(.game-book){height:455px;min-height:455px}
}