/* Portrait-first iPhone layout */
#portrait-warning{display:none!important}
.sidebar-toggle-button,.sidebar-overlay,.mobile-status-strip,.mobile-activity-dock,.mobile-bottom-nav,.mobile-reclaim-link{display:none}

@media (orientation: portrait){
  html,body{width:100%;height:100%;min-height:100%;overflow:hidden;-webkit-text-size-adjust:100%}
  body{background:radial-gradient(circle at 50% -10%,#3a2013 0,#16100c 34%,#090706 100%)}
  button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  #app{display:grid!important;width:100%;max-width:100%;height:100svh;height:100dvh;grid-template-rows:minmax(0,1fr);gap:0;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow:hidden}

  /* Desktop chrome is replaced by compact mobile status and activity surfaces. */
  .topbar{display:none!important}
  .character{display:none!important}

  .mobile-status-strip{display:grid;position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:calc(env(safe-area-inset-left) + 62px);right:calc(env(safe-area-inset-right) + 8px);z-index:55;grid-template-columns:repeat(4,minmax(0,1fr));height:46px;border:1px solid #5f432e;border-radius:13px;background:linear-gradient(180deg,rgba(38,27,19,.97),rgba(20,15,11,.97));box-shadow:0 10px 28px rgba(0,0,0,.28);overflow:hidden}
  .mobile-status-item{display:flex;min-width:0;align-items:center;justify-content:center;gap:5px;padding:0 6px;border-left:1px solid rgba(94,67,46,.55);color:#d8bf97;font-size:12px;font-variant-numeric:tabular-nums}
  .mobile-status-item:first-child{border-left:0}
  .mobile-status-item span{color:#d7b35a;font-size:13px}
  .mobile-status-item.hp span{color:#cf654d}
  .mobile-status-item.ember span{color:#ef884f}
  .mobile-status-item strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-status-item small{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#8f806d}

  .sidebar-toggle-button{display:flex;position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:calc(env(safe-area-inset-left) + 8px);z-index:60;width:46px;height:46px;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid #7d5030;border-radius:13px;background:linear-gradient(180deg,rgba(37,25,18,.98),rgba(21,15,11,.98));box-shadow:0 12px 28px rgba(0,0,0,.35);cursor:pointer}
  .sidebar-toggle-button span{display:block;width:19px;height:2px;border-radius:999px;background:#f0d5a8;transition:transform .18s ease,opacity .18s ease}
  body.sidebar-open .sidebar-toggle-button span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.sidebar-open .sidebar-toggle-button span:nth-child(2){opacity:0}
  body.sidebar-open .sidebar-toggle-button span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .sidebar-overlay{display:block;position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.64);opacity:0;pointer-events:none;transition:opacity .18s ease;backdrop-filter:blur(2px)}
  body.sidebar-open .sidebar-overlay{opacity:1;pointer-events:auto}

  .layout{display:grid;width:100%;max-width:100%;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:0;min-width:0;min-height:0;overflow:hidden}
  .sidebar{position:fixed;top:calc(env(safe-area-inset-top) + 62px);left:calc(env(safe-area-inset-left) + 8px);bottom:calc(env(safe-area-inset-bottom) + 76px);width:min(320px,78vw);padding:10px;gap:6px;overflow:hidden;z-index:50;transform:translateX(calc(-100% - 20px));transition:transform .2s ease;box-shadow:0 18px 60px rgba(0,0,0,.48)}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .main{grid-column:1;grid-row:1;min-width:0;max-width:100%;padding:68px 11px 154px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-padding-bottom:150px}

  .nav-btn{min-height:46px;padding:10px 9px;font-size:14px;gap:9px;min-width:0}
  .skills-submenu{padding-left:4px;gap:4px}
  .skill-nav-btn{min-height:44px;grid-template-columns:24px minmax(0,1fr) 32px;padding:7px 8px;font-size:12px;gap:7px;min-width:0}
  .skill-nav-icon{font-size:15px}
  .skill-nav-level{min-width:30px;height:28px;font-size:11px}

  .section-heading{margin-bottom:12px;gap:10px;min-width:0;align-items:flex-start}
  .section-heading>div{min-width:0}
  .section-heading h1{font-size:28px;line-height:1.08;overflow-wrap:anywhere}
  .eyebrow{font-size:10px;letter-spacing:.13em}
  .active-chip{font-size:11px;padding:7px 10px;white-space:nowrap;flex:0 0 auto}
  .skill-view-summary{padding:11px 12px;margin-bottom:12px;font-size:12px;line-height:1.45;gap:10px}
  .skill-summary-icon{font-size:22px}

  .card-grid{grid-template-columns:1fr!important;gap:10px;min-width:0}
  .game-card{width:100%;min-width:0;min-height:146px;padding:14px;border-radius:11px}
  .game-card .card-icon{font-size:30px;margin-bottom:7px}
  .game-card h3{font-size:18px}
  .game-card p{font-size:12px;line-height:1.45;overflow-wrap:anywhere}
  .card-meta{font-size:11px;margin-top:11px;gap:7px;flex-wrap:wrap}
  .level-badge{padding:4px 7px}

  /* Two-column skill actions, simplified so important game information stays comfortably readable. */
  #skill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px}
  #skill-grid .skill-card{min-height:150px!important;width:100%;padding:13px;display:flex;flex-direction:column;align-items:stretch;text-align:left;overflow:hidden}
  #skill-grid .skill-card-content{min-height:0;overflow:visible}
  #skill-grid .skill-card .card-icon{font-size:31px;margin-bottom:8px;transition:transform .16s ease,filter .16s ease}
  #skill-grid .skill-card h3{font-size:17px;line-height:1.15;margin:0 0 5px}
  #skill-grid .skill-card p{display:none}
  #skill-grid .skill-card .card-meta{margin-top:auto;padding-top:9px;display:grid;grid-template-columns:1fr;gap:6px;font-size:10px}
  #skill-grid .skill-card .reward{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eda15a}
  .skill-progress-track{height:9px;width:100%;margin-top:9px;border:1px solid #61432f;border-radius:999px;background:#0d0907;overflow:hidden;flex:0 0 auto}
  .skill-progress-fill{height:100%;width:0;background:linear-gradient(90deg,#9c4f22,#e58c43);border-radius:999px;transition:width .08s linear}
  #skill-grid .skill-card.active{border-color:#e07b36;box-shadow:inset 0 0 0 1px rgba(224,123,54,.3),0 0 24px rgba(160,70,24,.18)}
  #skill-grid .skill-card.active .skill-progress-track{border-color:#9c6038}
  #skill-grid .skill-card.reward-pulse .card-icon{animation:reward-icon-pulse .34s ease-out}
  @keyframes reward-icon-pulse{0%{transform:scale(1)}45%{transform:scale(1.18);filter:brightness(1.35)}100%{transform:scale(1)}}
  .mobile-float-reward{position:absolute;right:11px;top:42px;z-index:3;color:#f1b36f;font-size:11px;font-weight:700;text-shadow:0 2px 7px #000;pointer-events:none;animation:float-reward .85s ease-out forwards}
  @keyframes float-reward{0%{opacity:0;transform:translateY(8px) scale(.94)}20%{opacity:1}100%{opacity:0;transform:translateY(-25px) scale(1.04)}}

  .bank-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px;min-width:0}
  .item-card{min-width:0;min-height:122px;padding:11px;overflow:hidden;border-radius:10px}
  .item-card .item-icon{font-size:25px}
  .item-card strong{font-size:13px;overflow-wrap:anywhere;margin:5px 0}
  .item-card small{font-size:10px;line-height:1.35}
  .item-actions{display:grid;gap:6px;margin-top:8px}
  .item-action{min-height:44px;font-size:12px}

  .mobile-reclaim-link{display:block;width:100%;min-height:46px;margin:-2px 0 12px;border:1px solid #80513a;border-radius:10px;background:linear-gradient(180deg,#3a2218,#241710);color:#ecc39d;font-size:13px;font-weight:700}

  .zone-grid{grid-template-columns:1fr!important;gap:10px;min-width:0}
  .zone{min-width:0;min-height:122px;padding:14px;border-radius:11px}
  .zone h3{font-size:18px}
  .zone p{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
  .zone .zone-tag{font-size:10px;padding:4px 7px}

  .combat-status{grid-template-columns:1fr;gap:10px;padding:12px;min-width:0;border-radius:11px}
  .fighter.enemy{text-align:left}
  .vs{display:none}
  .lore-box{font-size:12px;line-height:1.5;padding:11px 12px;overflow-wrap:anywhere}
  .danger-button,.primary-button{min-height:44px;padding:9px 12px;font-size:12px}

  .mobile-activity-dock{display:grid;position:fixed;left:calc(env(safe-area-inset-left) + 8px);right:calc(env(safe-area-inset-right) + 8px);bottom:calc(env(safe-area-inset-bottom) + 72px);z-index:40;grid-template-columns:42px minmax(0,1fr) 44px;align-items:center;gap:9px;min-height:66px;padding:8px 9px;border:1px solid #795039;border-radius:13px;background:linear-gradient(180deg,rgba(46,29,19,.98),rgba(26,18,13,.98));box-shadow:0 -9px 28px rgba(0,0,0,.32);cursor:pointer}
  .mobile-activity-dock.idle{border-color:#4d392a;background:linear-gradient(180deg,rgba(32,24,18,.98),rgba(20,15,11,.98))}
  .mobile-activity-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid #65432d;border-radius:10px;background:#17100c;font-size:22px}
  .mobile-activity-copy{min-width:0}
  .mobile-activity-copy strong,.mobile-activity-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-activity-copy strong{font-size:13px;color:#efd5aa;margin-bottom:3px}
  .mobile-activity-copy small{font-size:10px;color:#9d8e79}
  .mobile-activity-progress{height:5px;margin-top:7px;border-radius:999px;overflow:hidden;background:#0d0907}
  #mobile-activity-bar{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#98501f,#df8a40);transition:width .08s linear}
  .mobile-activity-stop{width:44px;height:44px;border:1px solid #7e4b34;border-radius:11px;background:#3c2118;color:#e7b995;font-size:12px}
  .mobile-activity-stop:disabled{opacity:.35}

  .mobile-bottom-nav{display:grid;position:fixed;left:calc(env(safe-area-inset-left) + 8px);right:calc(env(safe-area-inset-right) + 8px);bottom:max(8px,env(safe-area-inset-bottom));z-index:41;grid-template-columns:repeat(5,minmax(0,1fr));height:58px;border:1px solid #563d2b;border-radius:14px;background:linear-gradient(180deg,rgba(34,25,19,.99),rgba(18,14,11,.99));box-shadow:0 -8px 28px rgba(0,0,0,.32);overflow:hidden}
  .mobile-nav-button{position:relative;min-width:0;min-height:54px;border:0;border-left:1px solid rgba(80,56,40,.55);background:transparent;color:#8f806d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 2px}
  .mobile-nav-button:first-child{border-left:0}
  .mobile-nav-button span{font-size:20px;line-height:1}
  .mobile-nav-button small{font-size:10px;font-weight:700;letter-spacing:.02em}
  .mobile-nav-button.active{background:linear-gradient(180deg,rgba(84,49,29,.55),rgba(45,29,20,.6));color:#f0d4a8;box-shadow:inset 0 3px #d87536}
  .mobile-nav-button.has-alert::after{content:'';position:absolute;top:7px;right:22%;width:7px;height:7px;border-radius:50%;background:#df7640;box-shadow:0 0 8px rgba(223,118,64,.7)}

  .toast{bottom:calc(env(safe-area-inset-bottom) + 150px);max-width:calc(100vw - 28px);padding:10px 13px;border-radius:9px;font-size:12px;text-align:center}
  .level-celebration{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 72px);z-index:500;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 32px);padding:11px 15px;border:1px solid #b5763f;border-radius:999px;background:linear-gradient(180deg,#4a2a19,#28180f);box-shadow:0 14px 42px rgba(0,0,0,.48),0 0 28px rgba(214,112,48,.22);color:#f4d6a4;opacity:0;transform:translate(-50%,-12px) scale(.96);transition:opacity .2s ease,transform .2s ease;pointer-events:none;text-align:center}
  .level-celebration.show{opacity:1;transform:translate(-50%,0) scale(1)}
  .level-celebration span{color:#ef8a48;font-size:18px}
  .level-celebration strong{font-size:13px}

  .modal{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .modal-card{width:min(400px,94vw);max-width:100%;padding:18px;border-radius:13px}
  .modal-card p{font-size:12px}
}

/* iPhone 16 Pro Max and similarly wide iPhones. */
@media (orientation: portrait) and (min-width:430px) and (max-width:460px){
  .main{padding:70px 13px 156px}
  .sidebar{width:min(330px,76vw)}
  .section-heading h1{font-size:30px}
  .skill-view-summary{font-size:12.5px}
  .game-card{min-height:150px;padding:15px}
  .game-card h3{font-size:19px}
  .game-card p{font-size:12.5px}
  #skill-grid{gap:12px}
  #skill-grid .skill-card{min-height:158px!important;padding:14px}
  #skill-grid .skill-card h3{font-size:18px}
  #skill-grid .skill-card .card-meta{font-size:10.5px}
  .mobile-status-item{font-size:12.5px}
  .mobile-nav-button small{font-size:10.5px}
}

/* Smaller iPhones retain the same touch targets while trimming decoration. */
@media (orientation: portrait) and (max-width:390px){
  .mobile-status-strip{left:calc(env(safe-area-inset-left) + 58px);height:44px}
  .sidebar-toggle-button{width:44px;height:44px}
  .main{padding:66px 8px 152px}
  .sidebar{top:calc(env(safe-area-inset-top) + 60px);width:min(286px,82vw)}
  .nav-btn{font-size:13px}
  .skill-nav-btn{font-size:11px;grid-template-columns:22px minmax(0,1fr) 30px}
  .section-heading h1{font-size:25px}
  .skill-view-summary{font-size:11px}
  #skill-grid{gap:8px}
  #skill-grid .skill-card{min-height:142px!important;padding:11px}
  #skill-grid .skill-card .card-icon{font-size:27px}
  #skill-grid .skill-card h3{font-size:15px}
  #skill-grid .skill-card .card-meta{font-size:9.5px}
  .mobile-status-item{gap:3px;padding:0 3px;font-size:11px}
  .mobile-status-item small{font-size:8px}
  .mobile-activity-dock{grid-template-columns:38px minmax(0,1fr) 44px;gap:7px}
  .mobile-activity-icon{width:36px;height:36px;font-size:20px}
  .mobile-nav-button span{font-size:18px}
  .mobile-nav-button small{font-size:9px}
}

@media (prefers-reduced-motion: reduce){
  .sidebar,.sidebar-overlay,.sidebar-toggle-button span,.skill-progress-fill,#mobile-activity-bar,.toast,.level-celebration{transition:none!important}
  #skill-grid .skill-card.reward-pulse .card-icon,.mobile-float-reward{animation:none!important}
}