/* The learning spot is deliberately self-contained so it can sit inside the
   existing fixed-header/footer dialog at a narrow phone width. */
.learning-play{display:grid;gap:10px;min-width:0;max-width:640px;margin:0 auto;padding:2px 1px 14px;color:#354c36;overflow:auto;overscroll-behavior:contain}
.learning-scene-wrap{position:relative;display:grid;gap:0;min-height:145px;padding:0 2px;background:linear-gradient(180deg,#fbf4d9 0,#f3ebc9 72%,#e0e3bd 72%,#e0e3bd 100%);border:1px solid #d9d9ad;border-radius:16px;overflow:hidden}
.learning-scene{display:block;width:100%;height:122px}
.learning-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:1px}
.learning-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.3px;color:#5f724d}
.learning-read{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;min-width:48px;min-height:48px;border:1px solid #d0d9bd;border-radius:50%;background:#fffbed;color:#617952;cursor:pointer;touch-action:manipulation}
.learning-read:hover{background:#f1f4e3}
.learning-read:focus-visible,.learning-answer:focus-visible,.learning-add:focus-visible,.learning-finished button:focus-visible{outline:3px solid #aa7c31;outline-offset:3px}
.learning-read svg{width:25px;height:25px}
.learning-play h3{margin:0;font-size:25px;line-height:1.1;letter-spacing:-.3px}
.learning-instruction{margin:0;max-width:48ch;font-size:16px;line-height:1.4;color:#596b53}
.learning-target-picture{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;min-height:58px;padding:3px 10px 3px 4px;border:1px solid #d3ddc5;border-radius:12px;background:#fffbed;color:#526b48;font-size:13px;font-weight:800}
.learning-target-art{display:block;width:64px;height:54px}
.learning-target-art svg{display:block;width:100%;height:100%}
.learning-progress-label{margin:0;font-size:14px;line-height:1.3;color:#667757;font-weight:700}
.learning-progress-pictures{position:absolute;right:12px;bottom:9px;display:flex;gap:3px;align-items:end;padding:3px 6px;border-radius:12px;background:#fffbe7d9}
.learning-progress-slot{position:relative;display:grid;place-items:center;width:52px;height:46px;border-radius:9px}
.learning-progress-slot svg{width:100%;height:100%}
.learning-progress-slot--filled>span{position:absolute;right:-1px;bottom:-2px;display:grid;place-items:center;width:20px;height:20px;border:2px solid #fffbed;border-radius:50%;background:#698a4f;color:#fffbed;font-size:14px;font-weight:800}
.learning-progress-slot--empty{border:2px dashed #b3bd91;color:#a2ac82;font-size:24px;font-weight:700}
.learning-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}
.learning-answer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:126px;padding:7px 6px;border:2px solid #d3ddc5;border-radius:15px;background:#f5f4df;color:#354c36;font:inherit;font-size:16px;font-weight:700;cursor:pointer;touch-action:manipulation}
.learning-answer:hover{background:#eaf0dd;border-color:#afc097}
.learning-answer.is-found{background:#e7edd8;border-color:#7f9d63}
.learning-food-art{display:block;width:min(100%,118px);height:86px}
.learning-food-art svg{display:block;width:100%;height:100%}
.learning-finished{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid #d5c48f;border-radius:12px;background:#fff2cc;color:#5f704a;font-size:15px;font-weight:700}
.learning-finished>span:first-child{font-size:22px;color:#c18f36}
.learning-finished button{margin-left:auto;min-height:48px;padding:8px 14px;border:1px solid #aa8a4c;border-radius:10px;background:#fffbed;color:#546b45;font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation}
.learning-status{margin:0;font-size:14px;line-height:1.35;color:#718060}
.learning-plate{position:absolute;left:50%;bottom:4px;width:min(72%,310px);height:84px;transform:translateX(-50%);border:5px solid #d3b279;border-radius:50%;background:#fff6d8;box-shadow:0 5px 0 #b48b59,0 9px 13px #49613b26}
.learning-plate-foods{display:flex;align-items:end;justify-content:center;height:100%;padding:0 13px;gap:1px}
.learning-plate-food{display:block;width:24%;max-width:70px;height:70px;opacity:.2;filter:saturate(.55)}
.learning-plate-food.is-served{opacity:1;filter:none;animation:learning-pop .25s ease-out}
.learning-plate-food svg{display:block;width:100%;height:100%}
.learning-add{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;padding:8px 14px;border:2px solid #66884e;border-radius:14px;background:#e3edd1;color:#3d5b3c;font:inherit;font-size:18px;font-weight:800;cursor:pointer;touch-action:manipulation}
.learning-add:hover{background:#d8e8c5}
.learning-add:disabled{border-color:#b4b99d;background:#eef0df;color:#8a9278;cursor:default}
.learning-add-art{display:block;width:48px;height:40px;flex:0 0 48px}
.learning-add-art svg{display:block;width:100%;height:100%}
.learning-add-plus{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#66884e;color:#fffbed;font-size:25px;line-height:1}
@keyframes learning-pop{from{transform:scale(.72);opacity:.3}to{transform:scale(1);opacity:1}}
@media(max-width:390px){.learning-play{gap:8px;padding-inline:0}.learning-play h3{font-size:23px}.learning-scene-wrap{min-height:136px}.learning-scene{height:112px}.learning-progress-slot{width:45px;height:41px}.learning-answer{min-height:116px}.learning-food-art{height:76px}.learning-plate{height:76px}.learning-plate-food{height:63px}}
@media(max-height:560px) and (orientation:landscape){.learning-play{max-height:calc(100vh - 120px);grid-template-columns:minmax(0,1fr) minmax(210px,.85fr);align-items:start;overflow:auto}.learning-scene-wrap{grid-column:1/-1;min-height:105px}.learning-scene{height:88px}.learning-heading{grid-column:1}.learning-play h3,.learning-instruction,.learning-progress-label,.learning-status{grid-column:1}.learning-answers{grid-column:2;grid-row:3 / span 5}.learning-add,.learning-finished{grid-column:2}.learning-plate{height:67px}.learning-plate-food{height:54px}}
/* The dialog already supplies its title and speaker on small portrait
   screens. Keep the live target and the first answer row above the fold. */
@media(max-width:600px) and (orientation:portrait){
  .learning-play{gap:6px;padding:0 0 8px}
  .learning-play>.learning-heading,.learning-play>h3{display:none}
  .learning-scene-wrap{min-height:94px;height:94px;border-radius:12px}
  .learning-scene{height:78px}
  .learning-progress-pictures{right:7px;bottom:4px;gap:1px;padding:2px 4px;border-radius:9px}
  .learning-progress-slot{width:35px;height:31px;border-radius:7px}
  .learning-progress-slot--empty{font-size:18px;border-width:1px}
  .learning-target-picture{min-height:48px;padding:2px 8px 2px 3px;font-size:12px}
  .learning-target-art{width:52px;height:43px}
  .learning-instruction{font-size:15px;line-height:1.25}
  .learning-progress-label{font-size:13px;line-height:1.2}
  .learning-answers{gap:7px}
  .learning-answer{min-height:104px;padding:5px 4px;border-radius:12px;font-size:14px}
  .learning-food-art{height:67px}
  .learning-play--words>.learning-scene-wrap{min-height:38px;height:38px}
  .learning-play--words>.learning-scene-wrap .learning-scene{height:32px}
  .learning-play--words>.learning-scene-wrap .learning-progress-pictures{right:5px;bottom:2px;padding:1px 3px}
  .learning-play--words>.learning-scene-wrap .learning-progress-slot{width:27px;height:24px}
  .learning-play--words .learning-answer{min-height:84px}
  .learning-play--words .learning-food-art{height:52px}
}
@media(max-height:560px) and (orientation:landscape) and (max-width:900px){
  .learning-play{gap:6px;max-height:calc(100vh - 105px);padding-bottom:6px}
  .learning-scene-wrap{min-height:82px;height:82px;border-radius:12px}
  .learning-scene{height:68px}
  .learning-progress-pictures{right:7px;bottom:3px}
  .learning-progress-slot{width:38px;height:34px}
  .learning-target-picture{min-height:48px}
  .learning-target-art{width:53px;height:43px}
  .learning-answer{min-height:88px}
  .learning-food-art{height:55px}
}
/* A short landscape dialog has only a shallow content band. The word game
   keeps its useful picture hint and instruction on the left, with two compact
   answer rows on the right; the decorative scene and duplicate dialog title
   add no information in this orientation. */
@media(max-height:560px) and (orientation:landscape) and (max-width:900px){
  .learning-play--words{grid-template-columns:minmax(132px,.8fr) minmax(0,1.2fr);grid-template-rows:auto auto auto;gap:4px;max-height:100%;overflow:hidden}
  .learning-play--words>.learning-scene-wrap,.learning-play--words>.learning-heading,.learning-play--words>h3{display:none}
  .learning-play--words>.learning-instruction{grid-column:1;grid-row:1;align-self:end;font-size:14px;line-height:1.15}
  .learning-play--words>.learning-target-picture{grid-column:1;grid-row:2;align-self:center;min-height:40px;padding:1px 5px 1px 2px;font-size:11px;gap:3px}
  .learning-play--words .learning-target-art{width:42px;height:37px}
  .learning-play--words>.learning-progress-label{grid-column:1;grid-row:3;align-self:start;font-size:12px;line-height:1.1}
  .learning-play--words>.learning-answers{grid-column:2;grid-row:1 / span 3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-self:start}
  .learning-play--words .learning-answer{flex-direction:row;justify-content:flex-start;gap:2px;min-height:48px;height:48px;padding:2px 3px;border-radius:8px;font-size:11px;line-height:1}
  .learning-play--words .learning-food-art{width:41px;height:39px;flex:0 0 41px}
  .learning-play--words>.learning-status{display:none}
}
@media(prefers-reduced-motion:reduce){.learning-play *{animation:none!important;scroll-behavior:auto!important}.learning-read,.learning-answer,.learning-add,.learning-finished button{transition:none}}