img.independent-art{object-fit:contain;max-width:100%;max-height:100%}
.touch-art>.independent-art{position:absolute;inset:0;width:100%;height:100%}

/* Stable modal scrolling, readable mechanics and visible keyboard focus. */
button:focus-visible,summary:focus-visible{outline:2px solid #f0d28f;outline-offset:3px}
.library-screen,.choice-screen,.shop-screen,.guide-screen{scrollbar-gutter:stable;overscroll-behavior:contain}
.library-skill,.choice,.shop-card,.relic-vault-card{min-width:0;overflow-wrap:anywhere}
.library-skill p,.choice p,.shop-card p,.relic-vault-card p{font-size:14px;line-height:1.65}
.library-top{gap:12px}.library-top>button{flex-shrink:0;min-height:44px}
.reward-controls{flex-wrap:wrap;gap:8px}
.relic-vault-card>div{min-width:0}.relic-vault-card p{font-size:12px}
.shop-head{flex-wrap:wrap;gap:12px}
.skill kbd{left:auto;right:5px;top:5px;bottom:auto;min-width:19px;text-align:center}
.skill>span{display:block;padding-right:22px;overflow:hidden;text-overflow:ellipsis}
.skill small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:801px) and (max-width:1250px){
  header{gap:12px}.chapter{gap:6px}.loadout{gap:12px}
  .basic-keys{font-size:10px}.specials{min-width:0}
}
@media (pointer:coarse),(max-width:800px),(max-width:1000px) and (max-height:500px){
  .overlay{padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .library-skill p,.choice p,.shop-card p,.relic-vault-card p,.guide-scroll p{font-size:14px;line-height:1.65}
  .library-skill small,.library-skill em{font-size:12px;line-height:1.5}
  .library-skill b,.choice b,.shop-card b{font-size:14px}
  .relic-slot small,.relic-vault-card small{font-size:11px}
  .mobile-tools button{min-width:38px;min-height:40px;font-size:11px}
  .touch-actions{width:178px}
  .touch-skills button{min-height:58px;height:58px}
  .touch-actions button>span{font-size:12px;line-height:1.2;text-shadow:0 1px 3px #000;bottom:5px}
  .touch-specials button{min-height:46px;height:46px}
  .touch-specials button>span{font-size:11px;bottom:4px}
  .touch-specials button>small,.touch-specials button:disabled>small{top:8px;font:600 12px sans-serif}
  .touch-specials button::before,.touch-specials button::after{display:none}
  .touch-specials .touch-art{opacity:.28}
  .touch-basic #touchAttack{width:76px;height:76px}
  .touch-basic #touchDodge{width:62px;height:62px}
  .library-top{padding:10px 2px;background:#112026}
  .reward-controls button,.shop-screen button,.relic-slot{min-height:44px}
}
@media (max-width:500px){
  .skill-library{grid-template-columns:1fr}
  .library-skill{padding:12px;text-align:left}
  .library-skill>i{float:left;margin:0 10px 6px 0}
  .library-skill p{clear:both;margin:8px 0}
  .relic-loadout-head{flex-wrap:wrap}.relic-loadout-head>span{margin-left:0}
  .hud .wave-label b,.hud .run-stats span{font-size:10px}
}
@media (pointer:coarse) and (orientation:landscape),(max-width:800px) and (orientation:landscape),(max-width:1000px) and (max-height:500px){
  .touch-actions{width:242px;grid-template-columns:144px 90px;gap:6px}
  .touch-skills button{min-height:48px;height:48px}
  .touch-specials button{min-height:44px;height:44px}
  .touch-basic #touchAttack{width:68px;height:68px}
  .touch-basic #touchDodge{width:56px;height:56px}
  .skill-library{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobile-route{display:none}.hud{top:52px}
  .shop-head{padding-bottom:6px;align-items:center;flex-wrap:nowrap}
  .shop-head h2{font-size:22px;margin:0}
  .shop-head .eyebrow,.shop-head p{display:none}
  .shop-wallet{min-width:80px;padding:5px 10px;display:flex;gap:7px;align-items:center}
  .shop-wallet b{font-size:20px}.shop-wallet span{display:none}
  .shop-route{margin:6px 0;padding:5px 9px}
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Dedicated final-stat panel and compact combat badges. */
.side-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
#finalStats dl{display:grid;grid-template-columns:1fr auto;gap:9px 14px;font-size:13px;}
#finalStats dd{margin:0;color:#eee0b7;text-align:right;}
#finalStats p{font-size:12px;line-height:1.6;color:#b5beb3;}
.evolved-skill{box-shadow:inset 0 0 0 1px #c9ae78;}
.skill.evolved-skill::after{content:'◆';position:absolute;right:5px;bottom:3px;font-size:10px;color:#e4cb91;}
.touch-skills button::before{content:attr(data-level);position:absolute;right:2px;top:1px;font-size:10px;line-height:14px;color:#fff4d6;background:#14211de0;border-radius:3px;padding:0 2px;pointer-events:none;}
.touch-skills button.evolved-skill::after{content:'◆';color:#e4cb91;}
.touch-skills button::before,.touch-skills button.evolved-skill::after{z-index:5;}

/* Landscape reward descriptions use full card width below their artwork. */
@media (pointer:coarse) and (orientation:landscape),
       (max-width:1000px) and (max-height:500px){
 .choice{display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:5px 9px;align-content:start;align-items:start}
 .choice>i{display:grid!important;grid-column:1;grid-row:1 / 3;width:58px;height:58px;margin:0}
 .choice>em,.choice>b{grid-column:2;margin:0}
 .choice>p{grid-column:1 / -1;grid-row:3;min-height:0;margin:7px 0 0;font-size:12px;line-height:1.45}
 .choice>small{grid-column:1 / -1;grid-row:4;margin:0}
}
/* Career portraits keep their silhouette within the reward icon at any aspect ratio. */
.choice>i img.independent-art{object-fit:contain;object-position:center;}
.choice.career-choice>i{width:88px;height:85px;display:grid;place-items:center}
.choice.career-choice>i .painted-icon{width:84px;height:82px;object-fit:contain}
.choice.career-choice>i img[src$="relic-11.webp"]{transform:scale(1.6)}
@media (max-height:560px),(max-width:800px){.choice.career-choice>i{width:58px;height:58px}.choice.career-choice>i .painted-icon{width:58px;height:58px}}
/* The ranger career compass artwork has asymmetric transparent padding; center its visible emblem in the shared career icon frame. */
.choice.career-choice>i img[src$="relic-11.webp"]{transform:translate(8px,23px) scale(1.6);transform-origin:center center}
@media (max-height:560px),(max-width:800px){.choice.career-choice>i img[src$="relic-11.webp"]{transform:translate(6px,16px) scale(1.6)}}