/* iPhone / iPad overrides on top of the desktop stylesheet (viewer.css, copied unchanged apart from the font files). Design A
   "그대로 옮긴 텔레비전": the desktop TV as it is, player only, Usagi only.
   - portrait (phone or iPad): one scrolling column -- title + counter, episode row, player, pink shelf, Usagi on the floor below
   - landscape iPad: the desktop window layout, the player fills the height, Usagi sits on the shelf corner
   - landscape phone: just the player, as big as the screen allows */
html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body { min-width: 0; min-height: 100dvh; box-sizing: border-box; overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
/* the desktop 펫 설정 button is the 테마 dropdown here: drawn like the episode picker (white pill, brown line), current name inside */
#pet-settings { order: 0; margin-left: 0; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 14px 4px 16px; font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  box-shadow: 0 2px 0 rgba(107, 79, 58, .3); max-width: 100%; }
#pet-settings #pet-btn-icon { display: none; }
#pet-settings .pick-k { color: var(--muted); font-size: 14px; }
#pet-settings .pick-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pet-settings .pick-caret { font-size: 12px; color: var(--line); transition: transform .15s; }
#pet-settings[aria-expanded="true"] .pick-caret { transform: rotate(180deg); }

/* the list that opens from it: a paper card of names, the current one marked with the theme's own colour */
#theme-sheet { position: fixed; margin: 0; inset: auto; padding: 6px; box-sizing: border-box; border: 2px solid var(--line); border-radius: 18px;
  background: var(--cream); color: var(--ink); box-shadow: 0 10px 28px rgba(74, 53, 36, .22), 0 2px 0 rgba(107, 79, 58, .3); }
#theme-sheet::backdrop { background: rgba(74, 53, 36, .12); }
#theme-sheet[open] { animation: theme-pop .14s ease-out; }
@keyframes theme-pop { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { #theme-sheet[open] { animation: none; } #pet-settings .pick-caret { transition: none; } }
.theme-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.theme-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; flex: none; padding: 0 14px;
  border: 0; border-radius: 12px; box-shadow: none; background: transparent; color: var(--ink); font: 400 17px 'Jua', 'Apple SD Gothic Neo', sans-serif; text-align: left; cursor: pointer; }
.theme-opt + .theme-opt { box-shadow: 0 -1px 0 rgba(107, 79, 58, .14); }  /* a hairline between names */
.theme-opt:active:not(:disabled) { background: var(--blush); transform: none; }
.theme-opt[aria-selected="true"], .theme-opt[aria-selected="true"] + .theme-opt { box-shadow: none; }
.theme-opt[aria-selected="true"] { background: var(--butter); }
.theme-opt[aria-selected="true"]::after { content: "✓"; color: var(--ink); font-size: 18px; }
.theme-sub { margin: 6px 8px 4px; font: 14px/1.45 -apple-system, 'Apple SD Gothic Neo', sans-serif; color: var(--muted); }
.theme-opt:focus-visible, #pet-settings:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .theme-opt:hover:not([aria-selected="true"]) { background: var(--blush); } .theme-opt[aria-selected="true"]:hover { background: var(--butter); } }

/* top: title + counter, then the episode controls on their own row */
#bar { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px 4px; }
.brand { min-width: 0; }
h1 { font-size: 21px; }
#count { order: 2; margin-left: auto; min-width: 0; font-size: 16px; }
.nav { order: 3; flex: 1 1 100%; gap: 8px; }
#prev, #next { min-width: 44px; height: 44px; font-size: 16px; }
#catalog { flex: 1 1 0; width: 0; min-width: 0; max-width: none; height: 44px; font-size: 16px; } /* 16 px: iOS does not zoom on focus */

/* the player: full width, 16:9, never covered */
#stage { flex: none; min-height: 0; margin: 8px 14px 0; }
.page { min-height: 0; padding: 8px; }
.frame { flex: none; width: 100%; }
#player-wrap { min-width: 0; min-height: 0; width: 100%; height: auto; flex: none; } /* fit.js sets its pixel size */

/* the pink shelf: bigger touch targets; in portrait Usagi moves off the shelf onto the floor below */
#panel { flex: none; min-height: 0; margin: 14px 14px 0; padding: 12px 14px; }
.toggles { gap: 10px; }
#startover, #resume-btn { min-height: 44px; }
.pill { min-height: 44px; box-sizing: border-box; padding-right: 16px; }
.pill input { width: 20px; height: 20px; }
.secondary { max-height: none; }
#panel .mascot-pic, #panel .bubble { display: none; }

#sofa { flex: 1 0 auto; min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 0 4px; pointer-events: none; }
#sofa img { width: 118px; height: auto; }
.sofa-bubble { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 0 10px 1px; font-size: 17px; transform: rotate(-3deg); }
#about { flex: none; padding: 0 18px 14px; color: var(--muted); font-size: 15px; line-height: 1.35; text-align: center; }
#about p { margin: 0 0 4px; }

/* iPad (and big phones) on their side: the desktop TV window */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 600px) {
  html, body { height: 100%; overflow: hidden; }
  body { min-height: 0; }
  #bar { flex-wrap: nowrap; padding: 8px 22px 2px; }
  .nav { order: 2; flex: 1 1 auto; justify-content: center; }
  #catalog { flex: 1 1 140px; width: auto; max-width: 520px; }
  #count { order: 3; margin-left: 0; min-width: 64px; text-align: right; }
  #stage { flex: 1 1 0; min-height: 0; margin: 6px 22px 0; }
  .page { flex: 1 1 auto; min-height: 0; justify-content: center; }
  .frame { flex: none; width: auto; }
  #panel { margin: 12px 22px 0; padding-right: 130px; }
  #panel .mascot-pic, #panel .bubble { display: block; }
  #sofa { display: none; }
  #about { padding: 6px 22px 8px; font-size: 14px; }
  #about p { display: inline; margin: 0 6px; }
}

/* phone on its side: only the player */
@media (orientation: landscape) and (max-height: 599px) {
  html, body { height: 100%; overflow: hidden; }
  body { min-height: 0; justify-content: center; }
  #bar, #panel, #sofa, #about { display: none; }
  #stage { flex: 1 1 0; min-height: 0; margin: 6px 10px; }
  .page { flex: 1 1 auto; min-height: 0; justify-content: center; padding: 6px; }
  .frame { flex: none; width: auto; }
}