/* Pico Asobi play-screen viewport tuning v31.
   Desktop prioritizes readability/playability over forcing every control into one viewport.
   Rankings/share sections can be reached by normal scrolling.
   Mobile portrait layouts keep their original sizing. */
@media (min-width:700px) and (max-height:950px){
  .top,.topbar{padding-top:9px!important;padding-bottom:9px!important}
  .wrap{padding-top:6px!important;gap:11px!important}
  .panel{padding:17px 20px!important;border-radius:23px!important}
  .panel h1,.game h1,.card h1{font-size:clamp(27px,3vw,38px)!important;margin-top:0!important;margin-bottom:6px!important}
  .play-game-title{gap:10px!important}
  .play-game-title img{width:52px!important;height:52px!important;flex:0 0 52px!important}
  .panel p,.game>p,.lead{font-size:15px!important;line-height:1.55!important}

  .stats,.hud,.status{gap:9px!important;margin-top:10px!important;margin-bottom:10px!important}
  .stat,.hud>div,.pill{padding:10px 8px!important;border-radius:16px!important}
  .stat b,.hud b{font-size:23px!important}
  .btn,.start{padding:13px 18px!important;font-size:18px!important}

  /* Keep the color board large enough to read comfortably on desktop. */
  .color-panel{padding:13px!important;border-radius:23px!important}
  .color-timer{margin-bottom:7px!important;font-size:15px!important}
  .color-timer b{font-size:30px!important}
  .color-grid{width:min(560px,72vw)!important;max-width:none!important;gap:6px!important;padding:7px!important;border-radius:20px!important}

  /* 1-25 / memory: readable square boards. */
  .wrap>.grid,.play-stage>.grid{width:min(500px,68vw)!important;margin-left:auto!important;margin-right:auto!important;padding:12px!important;gap:9px!important;border-radius:23px!important}
  .wrap>.grid .cell,.play-stage>.grid .cell{font-size:25px!important;border-radius:13px!important}
  .wrap>.grid .tile,.play-stage>.grid .tile{border-radius:17px!important}
  .message,.result{margin-top:10px!important;margin-bottom:7px!important;min-height:30px!important;padding-top:7px!important;padding-bottom:7px!important;font-size:19px!important}

  /* Large interaction areas stay comfortably playable. */
  .arena{min-height:340px!important;height:min(48vh,440px)!important}
  .clock{min-height:255px!important;height:auto!important;margin-top:11px!important;margin-bottom:11px!important}
  .controls{margin:11px 0!important}

  /* Rapid click: retain a large tapping target. */
  .rapid-panel{padding:14px!important}
  .rapid-time{font-size:38px!important;margin-bottom:8px!important}
  .rapid-tap{width:min(360px,52vw)!important;max-width:none!important}
  .rapid-tap span{font-size:clamp(38px,5vw,58px)!important}
  .rapid-tap small{margin-top:6px!important;font-size:14px!important}

  /* Dynamic vision lane. */
  .vision-arena{height:240px!important;border-radius:22px!important}
  .vision-choices{gap:8px!important}
  .vision-choices button{padding:12px 7px!important;font-size:26px!important}

  /* Kuku / number guessing: only modest spacing reduction. */
  .game{padding:18px!important;border-radius:24px!important}
  .game .grid{margin:12px 0!important;gap:8px!important}
  .game .dan{height:58px!important;font-size:21px!important}
  .game .hint{padding:11px!important;font-size:14px!important}
  .game .bar{margin:10px 0 12px!important}
  .game .q{padding:12px!important}
  .game .formula{font-size:clamp(42px,6vw,62px)!important;margin:6px!important}
  .game .choices{margin-top:11px!important;gap:8px!important}
  .game .choice{min-height:64px!important;font-size:32px!important}
  .game .msg{min-height:64px!important;margin-top:10px!important;padding:10px!important;font-size:18px!important}

  .card{padding:20px!important;border-radius:24px!important}
  .card .range{margin-bottom:12px!important}
  .card .message{min-height:72px!important;margin-top:14px!important;margin-bottom:9px!important}
  .play-bottom-home{margin-top:16px!important}
}

/* Only genuinely short desktop windows get a stronger reduction. */
@media (min-width:700px) and (max-height:760px){
  .top,.topbar{padding-top:6px!important;padding-bottom:6px!important}
  .panel{padding:13px 16px!important}
  .panel p,.game>p,.lead{font-size:14px!important}
  .play-game-title img{width:46px!important;height:46px!important;flex-basis:46px!important}
  .color-grid{width:min(470px,68vw)!important}
  .wrap>.grid,.play-stage>.grid{width:min(440px,64vw)!important}
  .arena{min-height:300px!important;height:350px!important}
  .rapid-tap{width:min(315px,48vw)!important}
  .vision-arena{height:205px!important}
}

/* v33: keep controls required to play inside one clear gameplay frame. */
.play-stage{background:#fff;border-radius:26px;padding:14px;box-shadow:0 16px 45px #51478c1b;margin-top:14px}
.play-stage>.hud,.play-stage>.status,.play-stage>.stats{margin-top:0!important}
.play-stage>.btn,.play-stage>.controls{margin-bottom:0}
.play-stage>.result:last-child,.play-stage>.message:last-child{margin-bottom:0}
.play-stage .arena{margin-top:0!important}
.play-stage .clock{margin-top:0!important}
.play-stage .vision-arena{margin-top:0!important}
.color-panel>.stats,.rapid-panel>.stats{margin-top:12px!important;margin-bottom:0!important}
.color-panel>.stats .stat,.rapid-panel>.stats .stat{background:#f7f8ff}
.rapid-panel>#reset{margin-top:12px}
@media(max-width:560px){.play-stage{padding:11px;border-radius:22px}.color-panel>.stats,.rapid-panel>.stats{margin-top:10px!important}}