/* v338 — roomy PC game canvas. Mobile remains owned by the existing phone rules. */
@media (min-width: 700px) {
  html { min-height: 100%; background: #e7ebf0; }

  body[data-pc-canvas-release="338"] {
    --pc-game-width: clamp(480px, 67dvh, 520px);
    width: var(--pc-game-width);
    max-width: var(--pc-game-width);
    min-height: 100dvh;
    height: 100dvh;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 38px rgb(25 31 40 / 20%);
  }

  body[data-pc-canvas-release="338"] :is(#app, #topbar, #main-screen) {
    box-sizing: border-box;
    width: var(--pc-game-width) !important;
    max-width: var(--pc-game-width) !important;
  }

  body[data-pc-canvas-release="338"] :is(.topbar-row1, .topbar-row2) {
    box-sizing: border-box;
    width: 100%;
    padding-inline: 24px !important;
  }

  body[data-pc-canvas-release="338"] #asset-summary-toggle {
    width: 100% !important;
    padding-inline: 10px !important;
  }

  body[data-pc-canvas-release="338"] .asset-glance { margin-left: 10px !important; }

  body[data-pc-canvas-release="338"] :is(#ranking-btn, #utility-btn) {
    display: grid !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 44px !important;
    padding: 0 !important;
    place-items: center !important;
  }

  body[data-pc-canvas-release="338"] :is(#ranking-btn, #utility-btn) svg {
    display: block;
    width: 27px !important;
    height: 27px !important;
    margin: 0 !important;
  }

  body[data-pc-canvas-release="338"] #main-screen {
    min-height: 0 !important;
    padding: 0 0 6px !important;
    overflow: hidden !important;
  }

  body[data-pc-canvas-release="338"] #panel-home { gap: 6px !important; }

  body[data-pc-canvas-release="338"] #avatar-scene {
    box-sizing: border-box;
    width: var(--pc-game-width) !important;
    height: clamp(300px, calc(100dvh - 395px), 480px) !important;
    min-height: 0 !important;
    max-height: 480px !important;
    margin: 0 !important;
    padding: 16px 14px 8px !important;
  }

  body[data-pc-canvas-release="338"] #avatar-scene[data-residence] :is(#ant-avatar-wrap, #ant-avatar) {
    width: 140px !important;
    height: 180px !important;
  }

  body[data-pc-canvas-release="338"] #action-buttons {
    box-sizing: border-box;
    width: calc(100% - 16px) !important;
    margin-inline: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px 0 0 !important;
  }

  body[data-pc-canvas-release="338"] #panel-home #action-buttons button,
  body[data-pc-canvas-release="338"] #panel-home #action-buttons button.action-primary {
    min-height: 66px !important;
    height: 66px !important;
    padding: 4px 3px !important;
  }

  body[data-pc-canvas-release="338"] #panel-home #action-buttons button::before {
    width: 30px !important;
    height: 30px !important;
    margin: 0 auto 2px !important;
  }

  body[data-pc-canvas-release="338"] #home-feature-nav {
    box-sizing: border-box;
    display: grid !important;
    width: calc(100% - 16px) !important;
    height: 58px !important;
    margin: 0 8px !important;
    padding: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  body[data-pc-canvas-release="338"] #home-feature-nav .home-feature-btn {
    position: relative;
    display: flex !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 5px 3px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  body[data-pc-canvas-release="338"] #home-feature-nav .home-feature-btn .nav-icon {
    display: grid !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    place-self: center !important;
  }

  body[data-pc-canvas-release="338"] #home-feature-nav .home-feature-btn .nav-label {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  body[data-pc-canvas-release="338"] #home-feature-nav .home-feature-btn .nav-badge {
    inset: 3px 5px auto auto !important;
  }

  body[data-pc-canvas-release="338"] > #toast-container {
    right: calc((100vw - var(--pc-game-width)) / 2 + 12px) !important;
    width: min(calc(var(--pc-game-width) - 24px), 320px) !important;
    max-width: calc(var(--pc-game-width) - 24px) !important;
  }

  body[data-pc-canvas-release="338"] > #toast-container .toast.compact {
    max-width: min(calc(var(--pc-game-width) - 24px), 230px) !important;
  }

  body[data-pc-canvas-release="338"]
    :is(.modal:not(#splash), .feature-panel-backdrop) {
    left: 50% !important;
    right: auto !important;
    width: var(--pc-game-width) !important;
    max-width: var(--pc-game-width) !important;
    height: 100dvh !important;
    transform: translateX(-50%) !important;
  }

  body[data-pc-canvas-release="338"] .modal:not(#splash) > .modal-content,
  body[data-pc-canvas-release="338"] .modal:not(#splash) > .dialog-card,
  body[data-pc-canvas-release="338"] #daytrade-modal > .daytrade-content {
    box-sizing: border-box;
    width: min(390px, calc(var(--pc-game-width) - 20px)) !important;
    max-width: min(390px, calc(var(--pc-game-width) - 20px)) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
  }

  body[data-pc-canvas-release="338"] .feature-panel-backdrop { padding-top: 64px !important; }

  body[data-pc-canvas-release="338"] .feature-panel-shell {
    width: var(--pc-game-width) !important;
    max-width: var(--pc-game-width) !important;
    height: calc(100dvh - 64px) !important;
    max-height: calc(100dvh - 64px) !important;
    grid-template-rows: 58px 58px minmax(0, 1fr) !important;
  }

  body[data-pc-canvas-release="338"] .feature-panel-shell:has(.starter-mini-coach:not(.hidden)) {
    grid-template-rows: 58px 58px 84px minmax(0, 1fr) !important;
  }

  body[data-pc-canvas-release="338"] .feature-panel-nav {
    box-sizing: border-box;
    height: 58px !important;
    min-height: 58px !important;
    padding: 5px 10px !important;
  }

  body[data-pc-canvas-release="338"] .feature-panel-nav .feature-switch-btn {
    display: flex !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 6px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 14px !important;
    line-height: 18px !important;
  }

  body[data-pc-canvas-release="338"] .feature-panel-nav .feature-switch-btn .nav-icon {
    display: block !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    background-color: transparent !important;
  }

  body[data-pc-canvas-release="338"] .feature-panel-nav .feature-switch-btn .nav-icon::before {
    width: 20px !important;
    height: 20px !important;
  }

  body[data-pc-canvas-release="338"] #feature-panel-scroll { padding: 14px 20px 30px !important; }

  body[data-pc-canvas-release="338"] #stock-list {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 12px !important;
  }

  body[data-pc-canvas-release="338"] #stock-list .stock-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  body[data-pc-canvas-release="338"] #stock-list .stock-card-head {
    --stock-card-min-h: 80px;
    --stock-pad-block: 12px;
    --stock-pad-inline: 10px;
    --stock-logo-w: 76px;
    --stock-content-h: 52px;
    --stock-price-w: 110px;
    --stock-gap: 8px;
    --stock-title-h: 21px;
    --stock-sub-h: 14px;
    --stock-meta-h: 17px;
    --stock-name-size: 14px;
    --stock-sub-size: 11px;
    --stock-price-size: 17px;
    --stock-change-size: 14px;
    grid-template-columns: var(--stock-logo-w) minmax(0, 1fr) var(--stock-price-w) 12px !important;
    padding: var(--stock-pad-block) var(--stock-pad-inline) !important;
  }

  body[data-pc-canvas-release="338"] #stock-list .sparkline-wrap {
    height: clamp(128px, 20dvh, 164px) !important;
    min-height: clamp(128px, 20dvh, 164px) !important;
  }

  body[data-pc-canvas-release="338"] #daytrade-modal[data-practice="true"] #daytrade-field {
    min-height: clamp(230px, 37dvh, 320px) !important;
    height: clamp(230px, 37dvh, 320px) !important;
  }

  /* v343 — collection surfaces keep the mobile card rhythm inside this narrow canvas. */
  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones :is(.growth-view, .housing-section) {
    padding-inline: 8px;
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones :is(.cosmetics-list, .paid-skin-list) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones .paid-skin-card {
    grid-template-rows: 132px auto minmax(40px, auto) auto 44px;
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones .codex-row {
    align-items: stretch;
    gap: 12px;
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones .codex-card {
    flex-basis: calc((100% - 12px) / 2);
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones :is(.housing-current-card, .housing-next-card) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones :is(.housing-current-card, .housing-next-card) > img {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones .housing-current-copy {
    min-height: 0;
    justify-content: flex-start;
    gap: 2px;
    padding: 8px 10px;
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones .housing-current-copy > :is(span, small) {
    display: none;
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones .housing-next-copy {
    min-height: 112px;
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones .housing-codex {
    grid-auto-columns: calc((100% - 10px) / 2);
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones .showcase-space-shell {
    padding-right: 20px;
    padding-left: 20px;
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones :is(.showcase-owned-list, .garage-route-list) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-pc-canvas-release="338"][data-collection-density-release="343"]
    #panel-milestones .garage-v179 .garage-vehicle-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v387 — installed portrait tablets use the full display instead of the
   desktop-style 520px rail. Fine-pointer desktop keeps its framed phone UI. */
@media (min-width: 700px) and (pointer: coarse) {
  html {
    background: #fff;
  }

  body[data-tablet-full-width-release="387"][data-pc-canvas-release="338"] {
    --pc-game-width: 100vw;
    width: 100vw;
    max-width: none;
    margin-inline: 0;
    box-shadow: none;
  }

  body[data-tablet-full-width-release="387"][data-pc-canvas-release="338"]
    .modal:not(#splash) > :is(.modal-content, .dialog-card),
  body[data-tablet-full-width-release="387"][data-pc-canvas-release="338"]
    #daytrade-modal > .daytrade-content {
    width: min(620px, calc(100vw - 32px)) !important;
    max-width: min(620px, calc(100vw - 32px)) !important;
  }

  body[data-tablet-full-width-release="387"][data-pc-canvas-release="338"]
    #feature-panel-scroll {
    padding-inline: clamp(20px, 4vw, 36px) !important;
  }
}