/* Phone layout: keep the illustrated world, with reachable controls and legible cards. */
@media(max-width:650px){
  dialog{width:calc(100% - 24px);max-width:440px;max-height:calc(100dvh - 32px);overflow-y:auto;padding:22px 18px;margin:auto}
  dialog .close{min-width:44px;min-height:44px;margin:-10px -8px 0 0}
  .calendar-expanded .month-grid{gap:4px}
  .calendar-expanded .month-date{width:100%;max-width:34px;height:auto;aspect-ratio:1}
  .character-navigation a{flex:1;text-align:center;padding:12px 7px;min-height:44px}
  .tabs button,.gear-filters button,.progress-period button,.progress-data-toggle button{min-height:44px}
  .armory-heading>div,.evolution-progress .row>div,.guild-player>div{min-width:0}
  .armory-heading{gap:10px}.gear-level{flex-shrink:0}
  .gear-totals span{font-size:10px}
  .bag-grid{row-gap:29px}.bag-name{font-size:11px}
  .inventory-disclaimer,.inventory-hint,.evolution-progress p{font-size:12px}
  .evolution-progress .eyebrow{font-size:10px;letter-spacing:1px}
  .progress-chart-header{flex-wrap:wrap}
  .progress-legend{flex-wrap:wrap;line-height:1.5}
  .progress-day-detail>.row{flex-wrap:wrap}
  .progress-day-detail li{align-items:flex-start;line-height:1.5}
  .campaign-content>.row{align-items:flex-start;flex-wrap:wrap}
  .campaign-steps span{width:clamp(24px,7vw,32px);height:clamp(24px,7vw,32px)}
  .campaign-loot{flex-wrap:wrap}.campaign-loot>div:last-child{flex:1;min-width:130px}
  .daily-care-heading{align-items:flex-start;flex-wrap:wrap;gap:8px}
  .daily-care-heading .eyebrow{font-size:9px}
  .care-panel-note{font-size:12px;line-height:1.5}
  .official-quest .text{min-width:0}.official-quest .check{flex-shrink:0;position:relative}
  .official-quest .check:after{content:'';position:absolute;inset:-10px}
  .balance-detail-stats{flex-wrap:wrap;font-size:12px}
  .balance-radar{overflow:hidden}
  .radar-label{font-size:29px}
  .constancy-line-chart:not(.monthly) .constancy-label{font-size:28px}
  .constancy-line-chart:not(.monthly) .constancy-label tspan{font-size:24px}
  .constancy-line-chart:not(.monthly) .constancy-tick{font-size:25px}
  .achievement-gallery .achievement{min-width:0}
  .achievement-gallery .achievement .medal{width:100%;max-width:135px;height:auto;aspect-ratio:1}
  .achievement-gallery .tag{display:inline-block;max-width:100%;white-space:normal;font-size:12px;line-height:1.4}
  .guild-player{gap:9px}.guild-score{flex-shrink:0}
  .ref-calendar.month-calendar .month-caption:after{content:'';position:absolute;inset:0;z-index:2}
  .ref-calendar.month-calendar .month-caption:focus-visible:after{outline:2px solid #edb96c}
}

@media(max-width:360px){
  .holo-inventory{padding:15px 9px}.armory-heading h2{font-size:23px}.armory-heading h2 span{font-size:15px}
  .equipment-stage{grid-template-columns:53px minmax(0,1fr) 53px;gap:2px}
  .equipment-slot{width:51px;height:55px}.paper-doll img{height:290px}
  .slot-label{font-size:9px;left:-3px;right:-3px}
  .gear-totals b{font-size:21px}.gear-totals span{font-size:9px}
  .evolution-progress{padding:12px}.evolution-progress h3{font-size:21px}
  .evolution-progress .row img{width:45px;height:70px}
  .mission-toolbar .tabs{gap:4px}.mission-toolbar .tabs button{padding:9px 8px;font-size:13px}
  .official-quest{flex-wrap:wrap}.official-quest .text{flex-basis:calc(100% - 38px)}
  .official-quest .reward{margin-left:35px}
  .achievement-gallery{gap:8px}.achievement-gallery .achievement{padding:15px 4px}
  .achievement-gallery .achievement h3{font-size:18px}
  .achievement-gallery .achievement p{font-size:12px}
  .hall-banner{padding:16px 12px}.hall-crystal{width:60px}
  .guild-leaderboard{padding:14px 10px}.guild-avatar{width:38px;height:48px}
  .guild-player h3{font-size:19px}.guild-player p{font-size:9px}.guild-position{width:14px}
}