/* Portrait phones: same components, stacked and scrolling. 1rem = 1/100 of the screen width. */
@media (orientation: portrait) {
  :root { --u: min(calc(100vw / 1000), calc(100dvh / 1400)); }
  html, body { overflow: hidden; }
  #app { overflow: visible; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  .screen { position: relative; inset: auto; min-height: 100%; overflow: visible; overflow-x: clip; }
  .bg, .shade, .grain { position: fixed; }
  .stage { position: relative; left: auto; top: auto; transform: none; width: 100rem; height: auto; min-height: 100dvh; margin: 0 auto; padding: 3rem 3rem 8rem; display: flex; flex-direction: column; gap: 3rem; }
  .stage > * { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; transform: none !important; }
  .topbar { height: auto; flex-wrap: wrap; gap: 2rem; }
  .topbar .btn { padding: 0 3rem; font-size: 3.4rem; }
  .ttl { order: 10; position: static; width: 100%; transform: none; height: auto; padding-top: 1rem; }
  .sheet { padding: 4rem; }
  .picker-row { grid-template-columns: 1fr; gap: 2.4rem; }
  .pick-art { height: 20rem; }
  .toast { top: 12rem; white-space: normal; text-align: center; max-width: 90vw; }

  /* home */
  .home .logo { width: 100%; justify-content: center; }
  .home .sp { display: none; }
  .home .topbar > .chip, .home .topbar > .theme-btn { flex: 1; justify-content: center; padding: 0 2.4rem; font-size: 3.2rem; }
  .home .topbar > .theme-btn { flex-basis: 100%; }
  .hero { display: grid; grid-template-columns: 34rem 1fr; grid-template-areas: "m b" "m c" "t t" "x x"; gap: 2.4rem; align-items: center; }
  .hero > * { position: relative !important; left: auto !important; top: auto !important; width: auto !important; }
  .hero .mascot { grid-area: m; width: 34rem !important; }
  .hero .mascot-refl, .hero .halo { display: none; }
  .hero .bubble { grid-area: b; }
  .hero .charge { grid-area: c; }
  .hero .hero-text { grid-area: t; text-align: left; }
  .hero .cta { grid-area: x; height: 14rem; }
  [data-theme=diva] .hero .hero-text { text-align: center; }
  [data-theme=diva] .hero-h1 { font-size: 9rem; }
  [data-theme=bougie] .hero-h1 { font-size: 10rem; }
  .cards { grid-template-columns: 1fr 1fr !important; grid-template-rows: none !important; grid-auto-rows: minmax(30rem, auto); }
  [data-theme=vixen] .card { flex-direction: column; align-items: flex-start; padding: 2.4rem 3rem 3rem; }
  [data-theme=vixen] .card .ic { width: 100%; height: 16rem; }
  .card .ic { background-size: contain !important; }
  .card .tt { font-size: 3.8rem; white-space: normal; }
  [data-theme=diva] .mode-plates, [data-theme=bougie] .mode-plates { grid-column: span 2; }

  /* word */
  .word-side .mascot { display: none; }
  .word-side .bubble { position: static !important; width: auto !important; font-size: 3.2rem; padding: 2.4rem 3rem; }
  .word-stats { display: none !important; }
  .word-mid { align-self: center; }
  .tile { width: 13rem; height: 13rem; font-size: 6.4rem; }
  .kbd { gap: 1.4rem; }
  .krow { gap: .8rem; }
  .key { width: 9rem; height: 13rem; font-size: 4.4rem; border-radius: 1.8rem !important; }
  .key.wide { width: 14rem; font-size: 2.8rem; }

  /* trivia */
  .trivia-main { gap: 2.4rem; }
  .pips { position: static !important; width: auto !important; height: 3rem !important; }
  .qbox { margin-top: 0 !important; min-height: 0; padding: 4rem; }
  .qtext { font-size: 5.2rem !important; padding-right: 0; }
  .q-ic { width: 11rem; height: 11rem; top: 2rem; right: 2rem; }
  [data-theme=vixen] .q-ic + .q-k + .qtext { padding-right: 9rem; }
  .answers { grid-template-columns: 1fr; grid-auto-rows: minmax(14rem, auto); padding: 0 !important; }
  .ans { padding: 2rem 3rem; font-size: 4.2rem; }
  .reward { flex-direction: column !important; height: auto !important; align-items: stretch !important; gap: 2.4rem; }
  .rw-boltwrap, .rw-confetti { display: none !important; }
  .rw-score { position: static !important; width: auto !important; height: auto !important; border-radius: 4rem !important; padding: 3rem !important; margin: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 2.4rem; }
  .rw-score .rw-txt { display: flex; flex-direction: column; }
  .rw-pts { font-size: 8rem !important; }
  .next { position: static !important; width: 100% !important; height: 14rem; }
  [data-theme=vixen] .rw-score { background: rgba(10,16,30,.6); }

  /* plates */
  .plates-left { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .plates-left .bonus { display: none; }
  .plates-left .big { font-size: 9rem; }
  .big-n.miles { font-size: 8rem; }
  .last { font-size: 2.6rem; }
  .filters { gap: 1.2rem; }
  .f { font-size: 2.6rem !important; letter-spacing: 0; padding: 0 !important; }
  .plates-scroll { overflow: visible; padding: 5rem 1.6rem 4rem 1rem; -webkit-mask-image: none; mask-image: none; }
  .plates-grid { grid-template-columns: 1fr 1fr; gap: 6rem 4rem; }

  /* sudoku */
  .sudoku .topbar, .nono .topbar { width: auto !important; }
  .sdk-left { align-self: center; }
  .sdk-board { padding: 1.2rem; gap: .3rem; }
  .sc { width: 10rem; height: 10rem; font-size: 5rem; border-radius: 1.2rem !important; }
  .sc[data-c="2"], .sc[data-c="5"] { margin-right: .6rem; }
  .sc[data-r="2"], .sc[data-r="5"] { margin-bottom: .6rem; }
  .sdk-side { gap: 2.4rem; }
  .sdk-side > div:first-child { order: -1; }
  .sdk-pad { grid-template-columns: repeat(5, 1fr); }
  .padk { height: 13rem; }
  .padk.erase { grid-column: span 1; }
  .sudoku .stage { gap: 2.4rem; }
  .sudoku .sdk-side { order: 2; }

  /* nono */
  .nono-tray { order: 2; align-self: center; grid-template-columns: 14rem auto; grid-template-rows: 11rem auto; gap: 1rem; padding: 1.2rem; }
  .nono-cols, .nono-grid { grid-template-columns: repeat(8, 9.4rem); }
  .nono-rows, .nono-grid { grid-template-rows: repeat(8, 9.4rem); }
  .nono-grid, .nono-cols, .nono-rows { gap: .5rem; }
  .nc { border-radius: 1.8rem; }
  .nc.x::before, .nc.x::after { width: 3.6rem; height: .6rem; }
  .cc, .rc { font-size: 2.8rem; gap: 1rem; }
  .nono-side { order: 3; }
  .nono-info { display: none; }
  .side-title { font-size: 5.6rem; }
}