/* VISUAL ACCURACY — mobile / tablet responsive layer */

@media (max-width: 760px){
  .app-shell,
  .game-shell{width:min(100% - 20px, 900px)}

  .app-shell{padding-top:24px}
  .landing-hero{padding-top:10px}
  .landing-games{margin-top:40px}

  .game-shell{padding-top:14px}
  .game-select{grid-template-columns:repeat(3,1fr);gap:7px}
  .game-tab{min-height:76px;padding:10px 5px}
  .game-tab strong{font-size:8px}
  .game-tab small{font-size:7px}

  .game-card{padding:20px 16px;border-radius:20px;min-height:0}
  #gameContent{min-height:300px;padding:20px 0}
  .game-head h2{font-size:24px}
  .game-instruction{font-size:11px;line-height:1.65}

  .color-swatches{gap:8px}
  .swatch{min-height:120px;border-radius:14px}

  .angle-compare{gap:8px}
  .angle-reference,.angle-answer-board{aspect-ratio:1.05}
  .angle-mini-line,.angle-line{width:38%}

  .center-board{aspect-ratio:1.35}

  .length-board{height:170px}
  .length-reference,.length-answer{max-width:84%}

  .diff-grid{max-width:330px;gap:5px}
  .diff-tile{min-width:0}

  .area-layout{grid-template-columns:1fr!important;gap:14px!important}

  .game-actions{gap:7px}
  .primary-button,.ghost-button,.share-button,.save-button,.result-button{min-height:42px;padding:11px 14px}

  .score-panel{margin-top:14px;padding:18px 14px;border-radius:20px}
  .score-grid{grid-template-columns:repeat(2,1fr)!important;gap:7px!important}
  .score-item{padding:11px 9px!important}
  .score-item span{font-size:8px!important}
  .score-item strong{font-size:18px!important}

  .total-score{margin-top:8px!important;padding:15px 12px!important}
  .total-score strong{font-size:25px!important}

  .result-shell{width:min(100% - 20px, 760px)!important;padding:20px 0 36px!important}
  .result-card{padding:24px 18px!important;border-radius:20px!important}
  .result-total{font-size:clamp(52px,16vw,82px)!important}
  .result-scores{grid-template-columns:1fr!important}
  .result-highlight{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .result-highlight strong{font-size:18px!important}
  .result-actions{flex-wrap:wrap!important}

  footer{padding-left:10px;padding-right:10px;text-align:center}
}

@media (max-width: 480px){
  .app-shell{width:calc(100% - 16px);padding-bottom:28px}
  .game-shell{width:calc(100% - 16px)}

  h1{font-size:clamp(38px,12.5vw,56px);letter-spacing:-.065em}
  .hero-copy{font-size:12px;margin-top:16px}
  .start-button{width:min(100%,240px);padding:14px 24px}

  .landing-games{grid-template-columns:1fr;margin:34px auto 30px;max-width:420px}
  .landing-game-card{min-height:58px}

  .game-topbar{font-size:7px}
  .back-button{padding:7px 9px}
  .game-select{grid-template-columns:repeat(2,1fr)}
  .game-tab{min-height:68px}
  .tab-icon{font-size:17px}

  .game-card{padding:17px 12px;border-radius:18px}
  #gameContent{min-height:280px;padding:17px 0}
  .game-head{gap:8px}
  .game-head h2{font-size:22px}
  .round{font-size:8px;padding:6px 8px}

  .color-swatches{grid-template-columns:1fr 1fr}
  .swatch{min-height:105px;padding:8px}
  .swatch-label{font-size:7px;padding:4px 7px}
  .color-picker{height:52px}

  .angle-compare{grid-template-columns:1fr 1fr}
  .angle-reference,.angle-answer-board{aspect-ratio:1}
  .angle-reference>span,.angle-answer-board>span{font-size:6px;top:8px;left:9px}
  .angle-mini-line,.angle-line{width:35%;height:2px}

  .center-board{aspect-ratio:1.05}
  .center-shape{max-width:70%;max-height:70%}

  .length-board{height:145px;gap:27px}
  .length-reference,.length-answer{margin-left:7%;max-width:86%}

  .diff-grid{width:min(100%,310px)!important;gap:4px!important}
  .diff-tile{aspect-ratio:1!important;border-radius:6px!important}

  .game-actions>*{flex:1 1 calc(50% - 7px);min-width:130px}
  .game-actions .primary-button{flex-basis:100%}

  .score-title{font-size:8px!important}
  .score-hint{font-size:7px!important}
  .score-grid{grid-template-columns:1fr 1fr!important}
  .score-item{min-width:0!important}
  .score-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .result-shell{width:calc(100% - 16px)!important}
  .result-card{padding:20px 14px!important}
  .result-brand{font-size:10px!important}
  .result-kicker{font-size:8px!important}
  .result-total{font-size:58px!important}
  .result-rank{font-size:11px!important}
  .result-scores{gap:6px!important}
  .result-highlight{grid-template-columns:1fr!important}
  .result-highlight div{padding:12px!important}
  .result-actions>*{flex:1 1 100%}
}

@media (max-width: 360px){
  .game-shell,.app-shell{width:calc(100% - 12px)}
  .game-tab strong{font-size:7px}
  .game-tab small{font-size:6px}
  .game-card{padding-left:10px;padding-right:10px}
  .color-swatches{gap:5px}
  .swatch{min-height:92px}
  .game-actions>*{min-width:0;font-size:9px}
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px){
  .landing-hero{padding-top:0}
  .landing-games{margin-top:25px}
  .game-card{padding:16px}
  #gameContent{min-height:240px}
  .center-board{max-height:280px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}