/* Preview-only small phones. Dimensions refer to the usable WebView, after
   native system-bar/cutout insets have been removed. */
@media (min-width: 601px) and (orientation: portrait) {
  html.ui-confirmation-app body.game-mode #gameView {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: 'opponent' 'opponent-message' 'board' 'message' 'player' !important;
    grid-template-rows: 190px 24px minmax(0, 1fr) 24px 190px !important;
    gap: 8px; padding: 12px 24px; overflow: hidden;
  }
  html.ui-confirmation-app body.game-mode #gameView .board {
    width: min(100%, 600px, calc(100dvh - 520px)); max-width: 600px;
    margin: 0 auto; align-self: center; justify-self: center;
    grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr));
  }
  html.ui-confirmation-app body.game-mode #gameView .cell { padding: 0; min-height: 0; }
  html.ui-confirmation-app body.game-mode #gameView .score {
    display: grid; grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
    width: min(100%, 600px); height: 190px; min-height: 0; margin: 0 auto; padding: 0; gap: 16px; transform: none;
  }
  html.ui-confirmation-app body.game-mode #gameView .score > span {
    position: relative !important; inset: auto !important; grid-row: 1; grid-column: 1;
    width: 160px !important; height: 190px !important; margin: 0 !important; padding: 0 !important;
    transform: none !important; translate: none !important; background: transparent; border: 0;
  }
  html.ui-confirmation-app body.game-mode #gameView .score > span img {
    position: static !important; width: 100% !important; height: 100% !important;
    object-fit: contain !important; transform: none !important; translate: none !important;
  }
  html.ui-confirmation-app body.game-mode #gameView .score-info {
    grid-column: 2; grid-row: 1; align-self: center; width: 100%; min-height: 150px;
    transform: none !important;
  }
  html.ui-confirmation-app body.game-mode #gameView .score.has-ai-robot .score-info::before {
    display: block; left: -176px; top: 0; width: 160px; height: 150px; background-position: center;
  }
  html.ui-confirmation-app body.game-mode #gameView .score.has-ai-robot > span { visibility: hidden !important; }
  html.ui-confirmation-app body.game-mode #gameView :is(#message, #opponentMessage) {
    margin: 0; min-height: 0; padding: 0; font-size: 16px; line-height: 24px;
  }
}
html.ui-confirmation-app { --page-side-gap: clamp(12px, calc(20vw - 52px), 32px); }
html.ui-confirmation-app body:is([data-active-view="myPage"], [data-active-view="missions"], [data-active-view="settings"], [data-active-view="shop"]) main { padding-inline: 0; }
html.ui-confirmation-app :is(#myPageView, #missionsView, #settingsView, #shopView) { padding-inline: 0; }
html.ui-confirmation-app #myPageView .my-page-screen,
html.ui-confirmation-app #missionsView .mission-panel,
html.ui-confirmation-app #settingsView .settings-page,
html.ui-confirmation-app #shopView .shop-panel {
  width: 100%; max-width: 100%; margin-inline: 0; box-sizing: border-box;
  padding-left: var(--page-side-gap); padding-right: var(--page-side-gap);
}
html.ui-confirmation-app :is(.shop-list, .mission-list) { padding-right: 0; }
html.ui-confirmation-app .shop-monthly-price { display: inline-flex; align-items: center; white-space: nowrap; gap: .08em; }
html.ui-confirmation-app .shop-monthly-price .shop-product-price-unit { font-size: .8em; line-height: 1; vertical-align: baseline; }
@media (max-width: 380px) {
  html.ui-confirmation-app .shop-product-purchase { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  html.ui-confirmation-app #shopSubscriptionPrice:not(.is-price-placeholder) { font-size: 20px; white-space: nowrap; transform: none; }
  html.ui-confirmation-app .shop-product-purchase button { min-width: 0; padding-inline: 4px; }
}
/* Keep the home buttons and their reserved space; remove only the backing strip. */
html.ui-confirmation-app body main::after { content: none !important; }
html.ui-confirmation-app .my-page-home-row {
  background: transparent; border-top: 0;
}
html.ui-confirmation-app #myPageView .my-page-screen {
  height: calc(100% - 80px); padding-bottom: 12px;
}
html.ui-confirmation-app .auto-scroll-indicator {
  position: fixed; width: 5px; border-radius: 5px; background: #dcebe2;
  pointer-events: none; z-index: 10000; overflow: hidden;
}
html.ui-confirmation-app .auto-scroll-indicator > span {
  display: block; width: 100%; border-radius: inherit; background: #12845e;
}
html.ui-confirmation-app .auto-scroll-host { scrollbar-width: none; }
html.ui-confirmation-app .auto-scroll-host::-webkit-scrollbar { display: none; }
html.ui-confirmation-app main > .view.view-active:not(#gameView):not(#practiceProblemsView) {
  overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain;
}
html.ui-confirmation-app :is(.friend-flow-screen, .language-setup-screen,
  .ai-setup-screen, .rated-screen, .my-page-screen, .shop-panel, .mission-panel,
  .outfit-panel, .characters-panel, .settings-page, .contact-page, .announcements-page, .gacha-screen) {
  min-width: 0; overflow-y: auto; overflow-x: hidden;
}
/* The shared indicator replaces the old per-screen tracks in this build. */
html.ui-confirmation-app :is(.custom-scrollbar, .shop-scrollbar,
  .mission-scrollbar, .practice-selection-scrollbar) { visibility: hidden !important; }
@media (max-width: 600px) {
  html.ui-confirmation-app .rated-screen,
  html.ui-confirmation-app .rated-panel,
  html.ui-confirmation-app .rated-page-title { min-width: 0; max-width: 100%; }
  html.ui-confirmation-app #ratedIntro p span { white-space: normal; }
  html.ui-confirmation-app .rate-range-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.ui-confirmation-app .range-btn { min-width: 0; padding-inline: 2px; font-size: 16px; }
  html.ui-confirmation-app .rated-panel { padding-right: 10px; }
  html.ui-confirmation-app .shop-coin-product {
    grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px;
  }
  html.ui-confirmation-app .shop-coin-product > strong { font-size: 16px; white-space: nowrap; }
  html.ui-confirmation-app .shop-coin-product .coin-purchase-btn { grid-column: 1 / -1; width: 100%; }
  html.ui-confirmation-app .practice-theme-grid { grid-auto-rows: auto; }
  html.ui-confirmation-app .practice-theme-card {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
    padding: 12px 28px 12px 12px; row-gap: 7px; height: auto; min-height: 92px;
  }
  html.ui-confirmation-app .practice-theme-card strong { grid-column: 1; grid-row: 1; }
  html.ui-confirmation-app .practice-theme-card span {
    grid-column: 1; grid-row: 2; max-width: none; font-size: 12px; line-height: 1.5;
  }
}
@media (max-width: 600px) and (max-height: 650px) {
  html.ui-confirmation-app { --global-ad-space: 0px; --bottom-ad-background-strip: 0px; }
  html.ui-confirmation-app .app { padding-top: 0; }
  html.ui-confirmation-app body.menu-mode .home-screen {
    display: grid; grid-template-rows: 90px minmax(0, 1fr) 44px;
    gap: 8px; padding: 8px; height: 100%;
  }
  html.ui-confirmation-app body.menu-mode .home-title {
    width: 100%; height: 90px; margin: 0; position: static; transform: none;
  }
  html.ui-confirmation-app body.menu-mode .home-title img { width: 100%; height: 100%; object-fit: contain; }
  html.ui-confirmation-app body.menu-mode .home-main {
    display: grid; grid-template-columns: minmax(0, 1fr) 144px;
    gap: 4px; min-height: 0; padding: 0; margin: 0;
  }
  html.ui-confirmation-app body.menu-mode .home-left-column { position: relative; min-height: 0; }
  html.ui-confirmation-app body.menu-mode .home-character {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; transform: none;
  }
  html.ui-confirmation-app body.menu-mode .home-character img {
    position: static !important; width: 100% !important; height: 100% !important;
    max-width: 100%; object-fit: contain !important; transform: none !important; translate: none !important;
  }
  html.ui-confirmation-app body.menu-mode .home-right-column {
    display: grid; grid-template-rows: minmax(0, 1fr) 38px; gap: 8px; align-content: stretch;
  }
  html.ui-confirmation-app body.menu-mode .home-mode-grid {
    display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 6px; transform: none;
  }
  html.ui-confirmation-app body.menu-mode .home-mode-card { height: auto; min-height: 40px; padding: 3px; }
  html.ui-confirmation-app body.menu-mode .home-mode-card strong { font-size: 17px; line-height: 1.15; white-space: nowrap; }
  html.ui-confirmation-app body.menu-mode .home-gacha-card { position: static; width: 120px; height: 38px; min-height: 0; transform: none; margin: 0 auto; }
  html.ui-confirmation-app body.menu-mode .home-bottom-btn { height: 44px; min-height: 44px; padding: 2px; }
  html.ui-confirmation-app body.menu-mode .home-bottom-btn strong { font-size: 12px; white-space: nowrap; }

  html.ui-confirmation-app body.game-mode #gameView {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: 'opponent' 'opponent-message' 'board' 'message' 'player' !important;
    grid-template-rows: 92px 16px minmax(0, 1fr) 16px 106px !important;
    gap: 3px !important; padding: 4px 8px !important; height: 100%; min-height: 0;
  }
  html.ui-confirmation-app body.game-mode #gameView .board {
    width: min(100%, calc(100dvh - 250px)) !important;
    height: auto; aspect-ratio: 1; max-width: 304px !important;
    align-self: center; justify-self: center; margin: 0 auto !important;
    padding: 4px; border-width: 3px;
  }
  html.ui-confirmation-app body.game-mode #gameView .score {
    display: grid; grid-template-columns: 78px minmax(0, 1fr) !important;
    height: 100%; min-height: 0 !important; padding: 0 !important; gap: 6px;
    position: relative; transform: none; overflow: visible;
  }
  html.ui-confirmation-app body.game-mode #gameView .score > span {
    display: block !important; position: relative !important; inset: auto !important;
    grid-row: 1; grid-column: 1; width: 78px !important; height: 100% !important;
    padding: 2px !important; margin: 0 !important; translate: none !important; transform: none !important;
    overflow: hidden !important; background: transparent;
  }
  html.ui-confirmation-app body.game-mode #gameView .score > span img {
    position: static !important; width: 100% !important; height: 100% !important;
    object-fit: contain !important; object-position: center !important;
    transform: none !important; translate: none !important; max-width: 100%; max-height: 100%;
  }
  html.ui-confirmation-app body.game-mode #gameView .score-info {
    grid-column: 2; grid-row: 1; height: 100%; min-height: 0 !important;
    padding: 4px 34px 4px 5px !important; transform: none !important;
    align-content: center; gap: 2px;
  }
  html.ui-confirmation-app body.game-mode #gameView .score-info:has(.score-resign-slot:not(:empty)),
  html.ui-confirmation-app body.game-mode #gameView .score-info:has(.replay-practice-best-btn:not([hidden])) { padding-bottom: 38px !important; }
  html.ui-confirmation-app body.game-mode #gameView .score em { font-size: 14px !important; line-height: 1.15; }
  html.ui-confirmation-app body.game-mode #gameView .score strong { width: 28px; height: 28px; font-size: 17px; top: 4px; right: 3px; }
  html.ui-confirmation-app body.game-mode #gameView .score small { font-size: 12px !important; line-height: 1.1; }
  html.ui-confirmation-app body.game-mode #gameView .ai-player-color-badge { position: static; transform: none; min-height: 14px; width: auto; padding: 1px 2px; font-size: 9px; border: 0; }
  html.ui-confirmation-app body.game-mode #gameView .score-resign-slot { left: 4px; right: 4px; bottom: 3px; gap: 4px; }
  html.ui-confirmation-app body.game-mode #gameView .score-resign-slot button,
  html.ui-confirmation-app body.game-mode #gameView .replay-practice-best-btn { height: 32px !important; min-height: 32px !important; font-size: 12px; padding: 2px 4px; }
  html.ui-confirmation-app body.game-mode #gameView .score.has-ai-robot .score-info::before { left: -84px; top: 0; width: 78px; height: 100%; background-position: center; }
  html.ui-confirmation-app body.game-mode #gameView #message,
  html.ui-confirmation-app body.game-mode #gameView #opponentMessage { font-size: 11px; margin: 0; line-height: 16px; min-height: 0; }

  html.ui-confirmation-app dialog { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }
  html.ui-confirmation-app .result-panel,
  html.ui-confirmation-app .resign-dialog { width: min(100%, 300px); max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; }
  html.ui-confirmation-app .result-overlay,
  html.ui-confirmation-app .resign-confirm { inset: 0; width: auto; padding: 12px; }
  html.ui-confirmation-app .my-page-screen { display: block; overflow-y: auto; padding: 8px 8px 88px; }
  html.ui-confirmation-app .my-page-scale-content { display: block; height: auto; min-height: 0; }
  html.ui-confirmation-app .my-page-main { display: grid; align-content: start; gap: 8px; }
  html.ui-confirmation-app .my-page-home-row { height: 64px; padding: 6px 8px; }
  html.ui-confirmation-app .my-page-home-row button { height: 48px; min-height: 48px; }
  html.ui-confirmation-app body.rated-game-mode #gameView,
  html.ui-confirmation-app body.replay-practice-game-mode #gameView {
    grid-template-rows: 106px 16px minmax(0, 1fr) 16px 120px !important;
  }
  html.ui-confirmation-app body.rated-game-mode #gameView .board,
  html.ui-confirmation-app body.replay-practice-game-mode #gameView .board { width: min(100%, calc(100dvh - 278px)) !important; }
  html.ui-confirmation-app body.local-game-mode #gameView,
  html.ui-confirmation-app body.friend-room-game-mode #gameView {
    grid-template-columns: minmax(0, 1fr) 54px !important;
    grid-template-areas: 'opponent resign' 'opponent-message opponent-message' 'board board' 'message message' 'player player' !important;
    grid-template-rows: 92px 16px minmax(0, 1fr) 16px 106px !important;
  }
  html.ui-confirmation-app body.local-game-mode #gameView .resign-default-slot,
  html.ui-confirmation-app body.friend-room-game-mode #gameView .resign-default-slot { display: flex; grid-area: resign; position: static; width: 54px; }
  html.ui-confirmation-app body.local-game-mode #gameView .resign-default-slot button,
  html.ui-confirmation-app body.friend-room-game-mode #gameView .resign-default-slot button { min-width: 0; width: 54px; font-size: 14px; }
  html.ui-confirmation-app body.game-mode #gameView .board {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }
  html.ui-confirmation-app body.game-mode #gameView .cell { padding: 0; min-height: 0; }
  html.ui-confirmation-app body:is(.local-game-mode, .friend-room-game-mode) #gameView {
    grid-template-rows: 64px 24px minmax(0, 1fr) 24px 64px !important;
  }
  html.ui-confirmation-app body:is(.local-game-mode, .friend-room-game-mode) #gameView .board {
    width: min(100%, calc(100dvh - 204px)) !important;
  }
  html.ui-confirmation-app body:is(.local-game-mode, .friend-room-game-mode) #gameView .score {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html.ui-confirmation-app body:is(.local-game-mode, .friend-room-game-mode) #gameView .score > span { display: none !important; }
  html.ui-confirmation-app body:is(.local-game-mode, .friend-room-game-mode) #gameView .score-info {
    grid-column: 1; padding: 8px !important;
  }
  html.ui-confirmation-app body:is(.local-game-mode, .friend-room-game-mode) #gameView .score-main { align-items: center; }
  html.ui-confirmation-app body:is(.local-game-mode, .friend-room-game-mode) #gameView .score strong {
    position: static; flex-shrink: 0; width: 32px; height: 32px; font-size: 21px;
  }
  html.ui-confirmation-app body.local-game-mode #gameView .score.black { transform: rotate(180deg); }
  html.ui-confirmation-app body.local-game-mode #gameView :is(#message, #opponentMessage) {
    height: 24px; min-height: 0; padding: 0 4px; line-height: 22px;
    display: grid; place-items: center; font-size: 11px;
  }
  html.ui-confirmation-app body.friend-room-game-mode #gameView #message:not(.is-alert) {
    display: grid; place-items: center; box-sizing: border-box;
    height: 24px; min-height: 0; margin: 0; padding: 0 4px;
    font-size: 11px; line-height: 18px;
  }
  html.ui-confirmation-app body.friend-room-game-mode #gameView::after { min-height: 0; height: 24px; }
  html.ui-confirmation-app .practice-battle-screen {
    grid-template-rows: 48px minmax(0, 1fr) 112px;
    align-content: stretch; gap: 8px; padding: 8px;
  }
  html.ui-confirmation-app .practice-opponent-row { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
  html.ui-confirmation-app .practice-panel-home-btn { width: 48px; min-width: 0; height: 48px; }
  html.ui-confirmation-app .practice-score { min-height: 0; height: auto; }
  html.ui-confirmation-app #practiceProblemsApp .practice-score .score-info { min-height: 0 !important; padding: 6px !important; }
  html.ui-confirmation-app .practice-score.is-opponent .score-info { height: 48px !important; }
  html.ui-confirmation-app .practice-score .score-main { display: flex; align-items: center; gap: 6px; }
  html.ui-confirmation-app .practice-score em {
    position: static; transform: none !important; font-size: 16px; line-height: 1.3;
    white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip;
  }
  html.ui-confirmation-app .practice-score strong {
    position: static; transform: none; width: 32px; height: 32px; flex: 0 0 32px; margin-left: auto;
  }
  html.ui-confirmation-app .practice-score.is-player .score-info {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 32px 32px;
    gap: 4px; height: 82px !important;
  }
  html.ui-confirmation-app .practice-score.is-player .score-main { grid-column: 1 / -1; }
  html.ui-confirmation-app .practice-score :is(.practice-inline-takeback-btn, .practice-inline-analyze-btn) {
    position: static; transform: none; width: 100%; min-width: 0; height: 32px; min-height: 32px; margin: 0; padding: 2px 6px;
  }
  html.ui-confirmation-app .practice-player-color-note { margin-top: 4px; padding: 2px 10px; font-size: 12px; line-height: 18px; }
  html.ui-confirmation-app .practice-board {
    width: min(100%, calc(100dvh - 192px)); height: auto; aspect-ratio: 1;
    align-self: center; margin: 0 auto; grid-template-rows: repeat(8, minmax(0, 1fr));
  }
  html.ui-confirmation-app .practice-board .cell { padding: 0; min-height: 0; }
}