.map-play-tools{grid-column:1/-1;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.map-play-tools button{width:auto;min-width:44px;min-height:44px;flex:1 1 0;padding:8px 14px;font-size:15px}.map-play-tools button[hidden]{display:none}
.play-target-photo{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}.new-play-postcard{margin:0 auto;max-width:420px;padding:10px;background:#fffdf1;border:1px solid #c8d3b3;border-radius:14px}.new-play-postcard img{display:block;width:100%;height:auto;border-radius:8px}.new-play-postcard figcaption{text-align:center;font-size:18px;font-weight:700;margin-top:10px;color:#304b37}
.world-play-summary{display:flex;gap:3px;margin-top:5px}.world-play-summary>span{display:block;width:22px;height:22px}.world-play-summary svg{width:22px;height:22px}.world-play-summary .waiting{opacity:.35;filter:grayscale(1)}
.journal-passport{display:flex;align-items:center;gap:8px;min-height:48px;margin:0 0 16px}.journal-passport svg{width:40px;height:36px}.picnic-more-games{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.picnic-more-games button{min-height:44px;flex:1;font-size:14px}
.learning-answer.learning-hint{outline:4px solid #638647;outline-offset:2px;background:#eef3d6}
@media(max-height:560px) and (orientation:landscape){.map-card .map-legend{display:none}.map-play-tools{grid-row:3;margin:0;gap:6px;flex-wrap:nowrap}.map-play-tools button{padding:6px 12px;font-size:14px;min-height:44px}.map-card #large-map{width:min(100%,calc((100dvh - 210px)*1.52))}}

@media(max-width:600px) and (orientation:portrait) and (max-height:700px){.map-card .map-next{gap:0;padding:0}}

.compact-meter[hidden]{display:none}

/* Mid-size touch screens have room for a wider play sheet. Using that width
   keeps choices together and prevents learning art from pushing answers
   below the fixed primary action. */
@media(min-width:601px) and (max-width:1100px) and (min-height:431px){
  .dialog-card.playful-dialog{width:min(760px,100%);padding:22px 26px}
  .playful-dialog .playful-heading{display:none}
  .playful-dialog .playful-scene-wrap{height:72px;margin:0 0 3px}
  .playful-dialog .playful-instruction{margin:3px 0;font-size:14px;line-height:1.25}
  .playful-dialog .playful-progress{margin-bottom:4px}
  .playful-dialog .playful-step{min-height:80px}
  .playful-dialog .playful-art,.playful-dialog .playful-art svg{height:44px}
  .playful-dialog .playful-status{margin:4px 0 2px;min-height:18px;font-size:12px}
  .playful-dialog .picnic-more-games{margin-top:4px}
  .playful-dialog:has(.learning-play) .learning-heading,
  .playful-dialog:has(.learning-play) .learning-play>h3{display:none}
  .playful-dialog:has(.learning-play) .learning-play{gap:6px;padding-bottom:6px}
  .playful-dialog:has(.learning-play) .learning-scene-wrap{min-height:82px;height:82px;border-radius:12px}
  .playful-dialog:has(.learning-play) .learning-scene{height:68px}
  .playful-dialog:has(.learning-play) .learning-progress-slot{width:38px;height:34px}
  .playful-dialog:has(.learning-play) .learning-target-picture{min-height:46px}
  .playful-dialog:has(.learning-play) .learning-target-art{width:52px;height:42px}
  .playful-dialog:has(.learning-play) .learning-instruction{font-size:15px;line-height:1.25}
  .playful-dialog:has(.learning-play) .learning-answers{gap:7px}
  .playful-dialog:has(.learning-play) .learning-answer{min-height:86px;padding:4px;font-size:14px}
  .playful-dialog:has(.learning-play) .learning-food-art{height:54px}
}

/* On the narrow phone, the dialog title and speaker already identify the
   activity. Removing their duplicate row leaves both learning shortcuts in
   the first view with the three picture choices. */
@media(max-width:380px) and (orientation:portrait){
  .playful-dialog .playful-heading{display:none}
  .playful-dialog .playful-scene-wrap{display:none}
  .playful-dialog .playful-instruction{font-size:14px;line-height:1.25;margin:3px 0}
  .playful-dialog .playful-progress{margin-bottom:3px}
  .playful-dialog .playful-step{min-height:76px}
  .playful-dialog .playful-art,.playful-dialog .playful-art svg{height:42px}
  .playful-dialog .playful-status{margin:3px 0 1px;min-height:18px;font-size:12px}
  .playful-dialog .picnic-more-games{margin-top:4px;gap:6px}
  .playful-dialog .picnic-more-games button{min-height:44px;padding:5px;font-size:12px}
}

/* A short landscape screen needs the play controls before decoration. */
@media(max-height:430px) and (orientation:landscape){
  .playful-dialog .playful-activity{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:4px 10px;padding:0 4px 3px}
  .playful-dialog .playful-scene-wrap,.playful-dialog .playful-heading{display:none}
  .playful-dialog .playful-instruction{grid-column:1;grid-row:1;align-self:center;margin:0;font-size:13px;line-height:1.15}
  .playful-dialog .playful-progress-row{grid-column:2;grid-row:1;align-self:center;min-height:0;margin:0;gap:4px}
  .playful-dialog .playful-progress{margin:0}
  .playful-dialog .playful-steps{grid-column:1/-1;grid-row:2;gap:4px}
  .playful-dialog .playful-step{min-height:52px;padding:2px}
  .playful-dialog .playful-art,.playful-dialog .playful-art svg{height:28px}
  .playful-dialog .playful-status{display:block;grid-column:1/-1;grid-row:3;min-height:0;margin:0;font-size:11px;line-height:1.1;text-align:left}
  .playful-dialog #dialog-content:has(>.playful-activity + .picnic-more-games){display:grid;grid-template-columns:3fr 2fr;gap:6px}
  .playful-dialog #dialog-content:has(>.playful-activity + .picnic-more-games)>.playful-activity{grid-column:1;min-width:0}
  .playful-dialog .picnic-more-games{grid-column:2;align-self:end;margin-top:0;gap:6px;flex-wrap:nowrap}
  .playful-dialog .picnic-more-games button{min-height:44px;padding:4px 8px;font-size:12px}
}

.world-play-feature{display:block;margin-top:4px;color:#526447;font-size:.78rem;line-height:1.25}