/* Phone/tablet overrides loaded after the cabinet and gameplay styles. */
@media(max-width:820px),(max-width:950px) and (max-height:500px){
  .shell,.wa-shell{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .game-shell{padding-bottom:max(28px,env(safe-area-inset-bottom))!important}
  button,input,select{touch-action:manipulation}
  .wa-shell .wa-restart{min-height:48px;min-width:140px}
  .wa-presentation label{min-height:44px}
  .strategy-matching-bottom{flex-wrap:wrap;align-items:center}
  .strategy-matching-bottom .strategy-trial-progress{align-self:center}
  .level-flip-inner,.level-flip-front{min-height:360px}
  .wa-shell .wa-header{flex-wrap:wrap}
}
@media(max-width:820px),(max-width:950px) and (max-height:500px){
  /* The source cabinet stays intact. Reflow its existing native controls below
     a relatively positioned artwork stage, with no duplicate input handlers. */
  .wa-machine.wa-art{container-type:inline-size;display:block}
  .wa-art .wa-art-stage{display:block;position:relative;width:100%;isolation:isolate}
  .wa-art .wa-body{display:grid;position:static;grid-template-columns:minmax(0,1fr);grid-template-areas:none;gap:12px;margin:12px 0 0}
  .wa-art .wa-left{display:grid;position:static;grid-area:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0}
  .wa-art .wa-right{display:grid;position:static;grid-area:auto;grid-template-columns:minmax(0,1fr);gap:10px;padding:0}
  .wa-art .wa-plaque{display:block;min-width:0;border:1px solid #c9b384;border-radius:14px;padding:12px 8px;background:#fff8e8;box-shadow:0 2px 6px #5b391811}
  .wa-art .wa-plaque h2{position:static;clip-path:none;width:auto;height:auto;margin:0 0 8px;padding:0;font-size:15px;text-align:center;overflow:visible}
  .wa-art .wa-counter{display:flex;align-items:center;justify-content:space-between;gap:4px}
  .wa-art .wa-counter button{position:static!important;inset:auto!important;width:44px!important;height:44px!important;min-height:44px;min-width:44px;flex:0 0 44px;border:1px solid #b78540;border-radius:10px;background:#f9e5be;color:#694317;font-size:18px;padding:0;transition:transform .12s ease}
  .wa-art .wa-counter button::before,.wa-art .wa-start::before,.wa-art .wa-start::after,.wa-art .wa-start:not([data-label="Start"])::after{content:none}
  .wa-art .wa-counter button:disabled{background:#f5ebd8;color:#958571;opacity:.55}
  .wa-art .wa-counter button:not(:disabled):active{transform:scale(.94)}
  .wa-art .wa-counter output{position:static!important;inset:auto!important;display:block;width:auto!important;height:auto!important;min-width:28px;flex:1;font:700 25px/1.2 Georgia,serif;color:#27201b;background:transparent;text-align:center;opacity:1!important}
  .wa-art .wa-radio-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0}
  .wa-art .wa-radio-board label{position:static!important;inset:auto!important;width:auto!important;height:auto!important;display:flex;align-items:center;gap:7px;padding:8px;min-height:48px;color:#3e3426;font-size:14px;line-height:1.3;border:1px solid #d9c8a5;border-radius:10px;white-space:normal}
  .wa-art .wa-radio-board label:has(input:checked){border-color:#b78540;background:#ffedc7}
  .wa-art .wa-radio-board input{position:static;inset:auto;width:20px;height:20px;min-width:20px;min-height:20px;margin:0;padding:0;opacity:1;accent-color:#95631e}
  .wa-art .wa-start{position:static!important;inset:auto!important;width:100%!important;height:auto!important;min-height:52px;padding:12px;border:1px solid #075544;border-radius:14px;background:#075544;color:#fff9e8;font-size:20px;font-weight:800;transition:transform .12s ease}
  .wa-art .wa-start:hover{background:#075544;color:#fff9e8}
  .wa-art .wa-start:active{transform:scale(.98)}
  .wa-footer{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .wa-teacher{width:100%}
  .wa-shell>.wa-note{font-size:12px;line-height:1.5;margin-top:10px}
  .wa-status{font-size:13px;line-height:1.4}
  .wa-teacher kbd{display:none}
  .game-shell:not(.showing-correction) .gameplay-layout{gap:22px}
  .game-shell:not(.showing-correction) .word-strategy-cue ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .game-shell:not(.showing-correction) .word-strategy-cue li{min-height:44px;font-size:.95rem;padding:8px}
  .game-shell:not(.showing-correction) .picture-frame{width:min(100%,280px)}
}
@media(max-width:360px){
  .wa-art .wa-radio-board{grid-template-columns:minmax(0,1fr)}
  .wa-art .wa-plaque{padding:10px 5px}
  .wa-art .wa-counter button{width:44px!important;min-width:44px}
  .game-shell:not(.showing-correction) .answer-cluster .word{font-size:2rem}
  .game-shell:not(.showing-correction) .word-strategy-cue ol{grid-template-columns:minmax(0,1fr)}
  .strategy-matching-bottom-left{width:100%;flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.wa-art .wa-counter button,.wa-art .wa-start{transition:none;transform:none!important}}

@media(min-width:821px) and (max-width:950px) and (max-height:500px){
 .wa-shell{max-width:700px;width:calc(100% - 24px)}
 .wa-header{flex-wrap:wrap;gap:12px}
 .game-shell:not(.showing-correction) .gameplay-layout{grid-template-columns:minmax(0,1fr);min-height:0}
 .game-shell:not(.showing-correction) .answer-cluster .word{font-size:2.75rem}
 .game-shell:not(.showing-correction) .picture-frame{width:230px}
}