/* Keep the desktop arcade intact; spend the mobile viewport on the board. */
.direction-pad,.action-buttons{display:contents}
.touch[data-action=rotate]{order:3}.touch[data-action=down]{order:4}.touch[data-action=drop]{order:5}
@media(max-width:650px),(max-width:950px) and (max-height:500px) and (orientation:landscape){
  body{min-width:300px}
  .mast{height:calc(42px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0}
  .brand{font-size:23px}.brand small{display:none}
  .top-actions{gap:5px}.top-actions .icon{width:32px;height:32px}
  .top-actions img{width:18px;height:18px}.language{padding-right:7px}
  .language button{min-width:32px;min-height:32px;padding:4px;font-size:11px}
  main{width:100%;max-width:480px;height:calc(100svh - 42px - env(safe-area-inset-top));min-height:580px;padding:6px 12px max(5px,env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-template-rows:32px 44px minmax(0,1fr) 104px 16px;gap:5px 8px}
  .heading{grid-column:1/-1;gap:6px;margin:0;min-width:0}
  .heading h1{font-size:19px;line-height:1.2;white-space:nowrap}
  .heading .eyebrow{display:none}.modes{padding:3px;gap:1px;flex-shrink:0}
  .modes button{padding:6px 8px;font-size:10px;white-space:nowrap}
  .word-strip{height:44px;margin:0;padding:2px 0;gap:6px;border-top:0;border-bottom:1px solid var(--line);min-width:0}
  #word-label{display:none}.word-line{display:block}
  #word-value{font-size:12px;line-height:15px;overflow-wrap:anywhere}
  #word-meaning{font-size:9px;line-height:11px;margin:2px 0 0;min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #word-book{height:40px;gap:4px;padding:3px 0 3px 6px;min-width:36px;justify-content:center}
  #word-book img{width:15px;height:15px}#word-book small{display:none}#word-book b{font-size:11px}
  .art-strip{height:44px;margin:0;gap:0;min-width:0;border-bottom:1px solid var(--line)}
  .art-access{width:100%;min-height:40px;gap:5px}.art-access>span{width:24px;height:24px;flex-shrink:0}
  .art-access>div{min-width:0}.art-access img{width:16px;height:16px}
  .art-access b{display:block;font-size:9px;line-height:11px;overflow-wrap:anywhere}
  .art-access small{font-size:8px;line-height:10px;margin-top:2px}.art-reveal-track{display:none}
  .play-layout{grid-column:1/-1;grid-template-columns:minmax(0,1fr) 58px;grid-template-rows:38px minmax(0,1fr);gap:6px 10px;min-height:0}
  .left-rail{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 46px;gap:8px;padding:0;min-height:0}
  .score-block .label,.secondary-stats .label,.hold-box .label{font-size:7px;line-height:10px}
  .score-block>strong{font-size:23px;line-height:27px}.score-block .best{display:none}
  .secondary-stats{margin:0;padding:0;display:flex;gap:20px;align-items:start}
  .secondary-stats strong{font-size:19px;line-height:26px;margin:0}.time-stat{display:none}
  .hold-box{margin:0;border:0;padding:0;display:flex;flex-direction:column;align-items:center;height:38px;width:46px}
  .hold-box canvas{width:44px;height:28px}.keycap{display:none!important}
  .flow-control{position:absolute;right:0;bottom:2px;width:58px;height:auto;margin:0;display:block}
  .flow-button{width:100%;height:32px;justify-content:center;padding:0}
  .flow-button>span{display:none}.flow-button img{width:20px;height:20px}
  .meter{height:3px;margin:4px 0 0}#flow-status{font-size:8px;line-height:11px;margin:3px 0 0;text-align:center}
  .board-column{height:100%;width:100%;max-width:none;min-width:0;min-height:0;display:flex;align-items:center;flex-direction:column;container-type:size}
  .board-wrap{height:min(calc(100cqh - 28px),200cqw);width:auto;max-width:none;aspect-ratio:1/2;border-width:4px;flex-shrink:0;border-radius:7px;box-shadow:0 1px 0 #fff,0 4px 12px #24383018}
  .board-top{top:5px;left:7px;right:7px;font-size:7px}.board-top span:first-child{padding:2px 4px}
  .board-footer{width:min(100%,calc((100cqh - 28px)/2));height:28px;flex-shrink:0;margin:0;font-size:8px;gap:4px}
  .board-footer>span{min-width:0;max-width:calc(100% - 90px);line-height:10px;overflow-wrap:anywhere}
  .board-footer>div{flex-shrink:0}.board-footer .icon{width:30px;height:28px}.board-footer img{width:15px;height:15px}
  .right-rail{padding:0;min-height:0}.right-rail>.label{font-size:8px;line-height:11px}
  #next-preview{width:58px;height:128px;margin:3px 0 0}
  .combo-stat{margin-top:8px;padding-top:8px}.combo-stat .label,.goal .label{font-size:8px}
  .combo-stat strong{font-size:21px;line-height:26px;margin-top:3px}
  .goal{margin-top:12px}.goal p{font-size:9px;line-height:1.4;margin:6px 0}.goal-track{margin-top:6px;height:3px}
  .overlay{padding:12px}.overlay-spark{font-size:24px;margin-bottom:8px}
  .overlay h2{font-size:19px;line-height:1.25;margin-bottom:10px;overflow-wrap:break-word}
  .overlay p{font-size:11px;line-height:1.5;margin-bottom:16px}
  .overlay .primary{min-width:0;max-width:100%;min-height:40px;padding:10px 15px;font-size:12px}
  .overlay .quiet{font-size:11px;padding:8px;margin-top:5px}
  #callout{font-size:23px}#callout small{font-size:10px;line-height:1.4}
  .word-reward-card{max-height:calc(100% - 16px);width:calc(100% - 18px)}
  .touch-controls{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:none;height:104px;margin:0;padding:4px 12px;border-top:1px solid #ced9d2;border-bottom:1px solid #d6dfd9;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#e9eeeb,#e1e8e3);box-shadow:inset 0 1px 0 #fff;isolation:isolate}
  .direction-pad{position:relative;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:0;padding:4px;flex:none}
  .direction-pad::before{content:"";position:absolute;width:44px;height:44px;top:4px;left:48px;background:linear-gradient(#414b47,#323d38);border-block:1px solid #303b34;box-shadow:0 3px 0 #19281e;z-index:-1}
  .touch-controls .touch{flex:none;min-width:0;width:44px;height:44px;aspect-ratio:1;border:1px solid #303b34;border-radius:5px;background:linear-gradient(#414b47,#303a34);box-shadow:inset 0 1px 0 #67736b,0 3px 0 #19281e,0 5px 7px #17251b20;transition:transform .07s,box-shadow .07s;touch-action:none;-webkit-user-select:none;user-select:none}
  .direction-pad [data-action=left]{grid-column:1;grid-row:1;border-radius:5px 0 0 5px;border-right-color:transparent}
  .direction-pad [data-action=right]{grid-column:3;grid-row:1;border-radius:0 5px 5px 0;border-left-color:transparent}
  .direction-pad [data-action=down]{grid-column:2;grid-row:2;border-top-color:transparent;border-radius:0 0 5px 5px}
  .direction-pad img{width:19px;height:19px;filter:invert(1);opacity:.9}
  .action-buttons{display:grid;grid-template-columns:54px 54px;gap:10px;height:96px;align-items:center;flex:none}
  .action-buttons .touch{width:54px;height:54px;border-radius:50%;border-color:#9d657a;background:linear-gradient(#e9b8c9,#dba0b5);box-shadow:inset 0 2px 0 #f5dce6,0 3px 0 #996579,0 5px 8px #65435224}
  .action-buttons [data-action=rotate]{align-self:start;margin-top:7px}
  .action-buttons .touch.drop{align-self:end;margin-bottom:7px;border-color:#678d7b;background:linear-gradient(#bcd8c9,#9ac2ad);box-shadow:inset 0 2px 0 #deeee4,0 3px 0 #587b68,0 5px 8px #334d4024}
  .action-buttons img{width:24px;height:24px}
  .touch-controls .touch:active,.touch-controls .touch.active{transform:translateY(2px);box-shadow:inset 0 1px 3px #15231925,0 1px 0 #45534a;border-bottom-width:1px}
  .touch-controls .touch:disabled{opacity:.55}.touch-controls .touch:disabled:active{transform:none}
  .direction-pad:has(button:disabled)::before{opacity:.55}
  .touch-controls .touch:focus-visible{outline:3px solid #c57092;outline-offset:4px;z-index:2}
  .bottom-links{grid-column:1/-1;align-items:center;margin:0;gap:12px;font-size:8px;line-height:16px}
  #dialog{max-height:calc(100svh - 24px);overflow:auto}
}
@media(max-width:355px){
  main{padding-inline:10px;grid-template-columns:minmax(0,1fr) 92px;column-gap:6px}
  .heading h1{font-size:17px}.modes button{padding:6px;font-size:9px}
  .touch-controls{padding-inline:7px;gap:8px}.action-buttons{gap:7px}
  .secondary-stats{gap:16px}.overlay h2{font-size:17px}
}
@media(max-width:650px) and (max-height:700px) and (orientation:portrait){
  .mast{height:calc(38px + env(safe-area-inset-top))}
  main{height:calc(100svh - 38px - env(safe-area-inset-top));padding-top:5px;grid-template-rows:28px 34px minmax(0,1fr) 96px 12px;row-gap:4px}
  .word-strip,.art-strip{height:34px}.art-access{min-height:32px}#word-book{height:32px}
  #word-meaning{-webkit-line-clamp:1}.art-access b{font-size:8px;line-height:10px}.art-access small{font-size:7px;line-height:9px}
  .play-layout{grid-template-rows:32px minmax(0,1fr);row-gap:5px}
  .score-block>strong{font-size:21px;line-height:22px}.secondary-stats strong{font-size:18px;line-height:22px}
  .hold-box{height:32px}.hold-box canvas{width:34px;height:22px}
  .board-wrap{height:min(calc(100cqh - 26px),200cqw)}
  .board-footer{height:26px;width:min(100%,calc((100cqh - 26px)/2))}.board-footer .icon{height:26px}
  .touch-controls{height:96px;padding-block:0}.direction-pad{padding:3px}
  .direction-pad::before{top:3px;left:47px}.action-buttons{height:92px}
  .bottom-links{font-size:8px;line-height:12px}
}
@media(max-width:950px) and (max-height:500px) and (orientation:landscape){
  .mast{height:38px;padding:0 max(14px,env(safe-area-inset-left))}
  main{max-width:950px;height:calc(100svh - 38px);min-height:0;padding:5px max(14px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));grid-template-columns:146px minmax(0,1fr) 146px;grid-template-rows:56px 44px minmax(0,1fr);gap:5px 12px}
  .heading{grid-column:1;grid-row:1;display:flex;align-items:start;flex-direction:column;gap:3px}
  .heading h1{font-size:17px}.modes button{font-size:9px;padding:5px 7px}
  .word-strip{grid-column:1;grid-row:2}#word-meaning{display:none}
  .art-strip{grid-column:3;grid-row:1;width:100%}.art-access{max-width:146px}
  .play-layout{grid-column:2;grid-row:1/-1;width:100%;max-width:290px;justify-self:center;grid-template-rows:34px minmax(0,1fr);column-gap:8px}
  .left-rail{grid-template-columns:1fr 1fr 44px;gap:4px}.secondary-stats{gap:12px}
  .score-block>strong{font-size:20px;line-height:24px}.secondary-stats strong{font-size:17px;line-height:24px}
  #next-preview{height:110px}.combo-stat{margin-top:3px;padding-top:6px}.goal{display:none}
  .board-footer{justify-content:center}.board-footer>span{display:none}
  .touch-controls{display:contents}.direction-pad{grid-column:1;grid-row:3;justify-self:center;align-self:center}
  .action-buttons{grid-column:3;grid-row:3;justify-self:center;align-self:center}
  .bottom-links{grid-column:3;grid-row:2;flex-wrap:wrap;gap:3px 8px;align-content:center}
  .overlay{padding:8px}.overlay h2{font-size:16px;line-height:1.2;margin-bottom:7px}.overlay p{font-size:10px;margin-bottom:9px}.overlay-spark{display:none}
  .overlay .primary{padding:8px;min-height:36px;font-size:11px}.overlay .quiet{margin:0;padding:6px;font-size:10px}
  .word-reward{position:fixed;inset:8px max(12px,env(safe-area-inset-left));z-index:30}
  .word-reward-card{width:min(390px,calc(100% - 18px))}
}
@media(hover:none){.touch[data-tooltip]:hover:after{display:none}}
@media(prefers-reduced-motion:reduce){.touch-controls .touch{transition:none}}