/* Weapon selection, progression and inventory. */
.start-screen{padding:4% 5.6%;overflow-y:auto}
.start-copy{max-width:350px}
.start-copy h2{font-size:34px;margin:10px 0 7px}
.start-copy h2 span{display:inline;margin-left:4px}
.start-copy h2 i{font-size:22px;right:-27px}
.pixel-subtitle{font-size:7px;margin-top:8px}
.start-copy .start-intro{margin:9px 0 11px;font-size:10px;line-height:1.7}
.starter-picker{margin:12px 0 14px}
.starter-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.6px;color:#f4dfdd;margin-bottom:8px}
.starter-label>span{font:7px var(--mono);color:#d8b67e;letter-spacing:.5px}
.starting-weapons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.starter-weapon{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:3px;min-height:62px;min-width:0;padding:5px 2px;background:#33293cbd;border:1px solid #766079;border-radius:5px;color:#c6b5ca;transition:background .15s,transform .15s}
.starter-weapon canvas{width:32px;height:32px}
.starter-weapon strong{font-size:10px;letter-spacing:1px}
.starter-weapon.character-option{min-height:91px;gap:3px}
.character-option canvas{width:42px;height:42px}
.character-option strong{font-size:11px;letter-spacing:.2px}
.character-option small{font-size:8px;letter-spacing:0;color:#c9b7ce;white-space:nowrap}
.character-option.selected small{color:#f5e5d9}
.character-preview{background:#49394e}
.starter-weapon.selected{background:#645064;border-color:var(--weapon-color);color:var(--weapon-color);box-shadow:inset 0 -3px var(--weapon-color)}
.starter-weapon:hover{transform:translateY(-2px);border-color:var(--weapon-color)}
.start-copy .starter-description{font-size:9px;line-height:1.7;min-height:30px;max-width:none;color:#bca9c2;margin:7px 0 0;letter-spacing:.2px}
.weapon-bar{position:absolute;top:73px;left:18px;display:flex;flex-wrap:nowrap;gap:5px;width:252px;z-index:6;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:2px;touch-action:pan-x;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to right,#000 calc(100% - 8px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 8px),transparent)}
.weapon-bar::-webkit-scrollbar{display:none}
.weapon-slot{position:relative;flex:0 0 44px;width:44px;min-height:46px;min-width:44px;border:1px solid #9a799284;background:#30283bdd;border-radius:5px;padding:3px 4px;color:#c9b4c8;display:flex;align-items:center;justify-content:center;gap:4px;touch-action:pan-x;scroll-snap-align:start}
.weapon-slot:focus-visible{outline:2px solid #fff0bc;outline-offset:-3px}
.weapon-slot canvas{width:31px;height:31px}
.weapon-slot span{font:7px var(--mono);position:absolute;right:3px;bottom:2px;background:#2c2436d9;padding:2px;border-radius:2px;color:#f7e4e7}
.weapon-slot.owned{border-color:var(--weapon-color)}
.weapon-slot.locked canvas{opacity:.3;filter:grayscale(.6)}
.weapon-slot.locked span{color:#af98b3;font-size:10px}
.weapon-slot.evolved{box-shadow:inset 0 0 10px #ffe99844;border-color:#f4d98d}
.weapon-slot.evolved span{color:#ffe7a3}
.rank-dots{display:inline-grid;grid-template-columns:repeat(var(--rank-count,5),minmax(0,1fr));align-items:center;gap:3px;width:min(100%,calc(var(--rank-count,5)*15px - 3px));max-width:100%;margin-top:8px}
.rank-dots i{display:block;min-width:0;height:4px;border-radius:1px;background:#d8cbd0}
.rank-dots i.filled{background:#aa7a92}
.upgrade-option>canvas{width:40px;height:40px;margin:0 auto 9px}
.upgrade-option .support-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 auto 9px;color:#a78093;background:#ebdfe3;border-radius:6px}
.upgrade-option .support-icon svg{width:22px;height:22px}
.upgrade-option .upgrade-num{color:#9b6982;font-size:8px}
.upgrade-option small{color:#887582}
.upgrade-option.evolution-card{background:#fff0d4;border-color:#d0a959}
.evolution-card .rank-dots i.filled{background:#c59c48}
.evolution-card .upgrade-num{color:#a77a27}
.upgrade-footnote{font-size:8px;color:#a38b98;letter-spacing:.4px;margin-top:15px}
.detail-weapon{margin:16px auto 0;width:72px;height:72px}
.weapon-next{font-size:11px;line-height:1.8;padding:13px 15px;background:#f0e6e8;color:#927386;border-radius:5px;margin:14px 0 22px}
.weapon-research{margin:30px 0}
.weapon-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.weapon-catalog-card{display:flex;align-items:center;gap:14px;background:#fffcf4;border:1px solid var(--line);border-top:3px solid var(--weapon-color);border-radius:6px;padding:18px}
.weapon-catalog-card canvas{width:54px;height:54px;flex-shrink:0;background:#3a3043;border-radius:6px}
.weapon-catalog-card h3{font-size:13px;margin:0 0 6px}
.weapon-catalog-card p{font-size:11px;color:#949083;line-height:1.7;margin:0 0 8px}
.weapon-catalog-card small{font-size:9px;color:#a87a91}
.weapon-catalog-card>div{min-width:0;overflow-wrap:anywhere}
.support-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.support-catalog-card{display:flex;align-items:flex-start;gap:14px;min-width:0;background:#fffcf4;border:1px solid var(--line);border-top:3px solid var(--support-color,var(--weapon-color,#87b4a7));border-radius:6px;padding:18px}
.support-catalog-card canvas{width:54px;height:54px;flex-shrink:0;background:#3a3043;border-radius:6px}
.support-catalog-card>div{min-width:0;overflow-wrap:anywhere}
.support-catalog-card h3{font-size:13px;line-height:1.5;margin:0 0 6px}
.support-catalog-card p{font-size:11px;color:#949083;line-height:1.7;margin:0 0 8px}
.support-catalog-card small{font-size:9px;line-height:1.6;color:#768c7d}
.evolution-recipe{display:block;margin:10px 0 0;padding-top:8px;border-top:1px solid #e4d9cc;font-size:9px;line-height:1.8;color:#977087;overflow-wrap:anywhere}
.evolution-recipe strong{display:block;color:#745768;font-weight:600}
#equipment-guide{scroll-margin-top:72px}
.equipment-intro{font-size:12px;line-height:1.8;color:#7d7e75;margin:10px 0 16px}
.upgrade-option .upgrade-pairing{display:block;margin-top:5px;color:#b3d5cf;font-weight:600}
.game-modal .recipe-progress.complete{border-color:#d5ba77}
.game-modal .recipe-progress{margin:14px 0;padding:11px 13px;border:1px solid #52637d;border-radius:7px;background:#1a2438;text-align:left;overflow-wrap:anywhere}
.game-modal .recipe-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;font-size:11px;line-height:1.7;color:#becbde}
.game-modal .recipe-row+.recipe-row{margin-top:6px}
.game-modal .recipe-row>span{min-width:0}
.game-modal .recipe-row>b{flex-shrink:0;font:10px/1.8 var(--mono);color:#efd8a1;white-space:nowrap}
.game-modal .recipe-progress>p{margin:9px 0 0;padding-top:8px;border-top:1px solid #394861;font-size:10px;line-height:1.7;color:#a7c9b4}
.support-inventory-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:15px 0;text-align:left}
.support-inventory-item{display:flex;align-items:flex-start;gap:11px;min-width:0;padding:10px;border:1px solid #43536e;border-radius:7px;background:#253149;color:#e1e8ed}
.support-inventory-item canvas{width:40px;height:40px;flex:0 0 40px;background:#1a2337;border-radius:5px}
.support-inventory-item>div{flex:1;min-width:0;overflow-wrap:anywhere}
.support-inventory-item h3{font-size:12px;line-height:1.5;margin:0 0 4px}
.support-inventory-item p{font-size:10px;line-height:1.65;color:#a9bbcf;margin:0 0 5px}
.support-inventory-item small{font-size:9px;line-height:1.6;color:#d5c096}
.support-inventory-item.locked{border-color:#39465b;background:#202b3e}
.support-inventory-item.locked canvas{opacity:.5;filter:grayscale(.5)}
.equipment-guide-link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;margin:8px 0 11px;padding:10px 12px;border:1px solid #4b647b;border-radius:6px;background:#203449;color:#bbd8df;font-size:10px;line-height:1.6;text-align:left;touch-action:manipulation}
.equipment-guide-link:hover{border-color:#8ab8c3;background:#2a4155}
.game-modal #view-supports-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;padding:10px 14px;font-size:11px;line-height:1.5;white-space:normal}
.game-modal #close-supports{position:sticky;top:0;z-index:2;min-height:44px;width:100%;margin:8px 0 0}
.mobile-game .support-catalog{grid-template-columns:minmax(0,1fr)}
.mobile-game .support-catalog-card{padding:15px}
@media(min-width:700px){.support-inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.support-catalog{grid-template-columns:minmax(0,1fr)}}

.mobile-game .start-screen{padding:14px 24px max(16px,env(safe-area-inset-bottom))}
.mobile-game .start-copy{max-width:350px;padding:0}
.mobile-game .start-copy h2{font-size:39px;line-height:1.2;letter-spacing:3px;margin:13px auto 7px}
.mobile-game .start-copy h2 span{display:inline;margin:0 0 0 2px}
.mobile-game .start-copy h2 i{font-size:20px;right:-22px}
.mobile-game .pixel-subtitle{font-size:7px;letter-spacing:3px;margin:8px 0}
.mobile-game .mobile-princess{width:66px;height:66px;margin:14px auto 10px}
.mobile-game .start-copy .start-intro{font-size:11px;line-height:1.7;margin:9px 0 14px}
.mobile-game .starter-picker{margin:0 0 12px;text-align:left}
.mobile-game .starter-weapon{min-height:64px}
.mobile-game .starter-weapon.character-option{min-height:91px}
.mobile-game .start-copy .starter-description{font-size:10px;min-height:34px;margin:7px 0 0;line-height:1.7}
.mobile-game .mobile-modes{margin-bottom:12px}
.mobile-game .mobile-hint{margin:14px 0 3px;font-size:10px}
.mobile-game .mobile-links button{min-height:36px}
.mobile-game .weapon-bar{top:81px;left:14px;right:14px;width:auto;max-width:350px;margin:auto;gap:6px}
.mobile-game .weapon-slot{min-height:44px}
.mobile-game .weapon-slot canvas{width:32px;height:32px}
.mobile-game #game-canvas{top:130px;height:calc(100% - 278px - env(safe-area-inset-bottom))}
.mobile-game[data-game-state=ready] #game-canvas{top:0;height:100%}
.mobile-game .boss-hud{top:138px}
.mobile-game .control-center #xp-label{font-size:8px;color:#b5cd9d;margin-top:0;white-space:nowrap}
.mobile-game .control-center #mobile-level{margin-top:3px}
.mobile-game .upgrade-options{margin-top:13px}
.mobile-game .upgrade-option{padding:12px 12px 12px 68px;min-height:108px}
.mobile-game .upgrade-option>canvas,.mobile-game .upgrade-option>.support-icon{position:absolute;left:14px;top:28px;width:40px;height:40px;margin:0}
.mobile-game .upgrade-option .upgrade-num{position:static;max-width:none;text-align:left;margin:0 0 4px;font-size:8px;line-height:1.3}
.mobile-game .upgrade-option strong{font-size:14px;margin:0 0 5px}
.mobile-game .upgrade-option small{font-size:10px;line-height:1.6}
.mobile-game .upgrade-option .rank-dots{margin-top:7px}
.mobile-game .weapon-catalog{grid-template-columns:1fr}
.mobile-game .weapon-catalog-card{padding:15px}
.mobile-game .weapon-research .section-heading{align-items:flex-start;gap:10px}
.mobile-game .weapon-research .section-heading h3{font-size:12px}
.mobile-game .weapon-research .section-heading>span{font-size:8px;white-space:nowrap}

@media(min-width:761px) and (max-width:1150px){body:not(.mobile-game) .start-screen{padding:2.5% 4%}body:not(.mobile-game) .start-copy{max-width:280px}body:not(.mobile-game) .start-copy h2{font-size:29px}body:not(.mobile-game) .start-copy .start-intro{display:none}body:not(.mobile-game) .starter-picker{margin:10px 0}body:not(.mobile-game) .start-hint{margin-top:12px}}
@media(max-height:720px){.mobile-game .mobile-princess{width:46px;height:46px;margin:9px auto 6px}.mobile-game .start-copy h2{font-size:32px;margin:8px auto 5px}.mobile-game .start-copy .start-intro{font-size:10px;margin:6px 0 11px}.mobile-game .start-screen{padding:10px 20px}.mobile-game .small-tag{font-size:6px;padding:5px 7px}.mobile-game .starter-weapon{min-height:58px}.mobile-game .starter-picker{margin-bottom:7px}.mobile-game .mobile-hint{margin-top:11px}.mobile-game #start-button{min-height:48px;font-size:14px}.mobile-game .game-modal{padding:17px 14px}.mobile-game .game-modal h2{font-size:19px;margin:8px 0}.mobile-game .game-modal>p{font-size:11px;margin:6px 0 12px}.mobile-game .upgrade-option{min-height:94px;padding-top:9px;padding-bottom:9px}.mobile-game .upgrade-option>canvas,.mobile-game .upgrade-option>.support-icon{top:24px}.mobile-game .upgrade-footnote{margin-top:10px}}
@media(max-height:600px) and (orientation:portrait){.mobile-game .mobile-princess,.mobile-game .start-intro{display:none!important}.mobile-game .start-copy h2{margin-top:10px}.mobile-game .starter-picker{margin-top:15px}.mobile-game .mobile-modes{margin-bottom:10px}.mobile-game .start-copy .starter-description{font-size:9px;min-height:30px}.mobile-game .mobile-links button{min-height:32px}}
@media(max-height:720px){.mobile-game .starter-weapon.character-option{min-height:82px}.mobile-game .character-option canvas{width:35px;height:35px}.mobile-game .character-option strong{font-size:10px}.mobile-game .character-option small{font-size:7px}}
@media(orientation:landscape) and (max-height:600px){
  .mobile-game #game-canvas{top:0;height:100%}
  .mobile-game .weapon-bar{top:55px;left:15px;right:auto;width:252px}
  .mobile-game .boss-hud{top:55px;left:auto;right:15px;transform:none;width:200px}
  .mobile-game .start-screen{padding:10px 24px}
  .mobile-game .start-copy{display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:auto auto auto auto auto;column-gap:32px;max-width:660px}
  .mobile-game .small-tag{grid-column:1;grid-row:1;font-size:6px}
  .mobile-game .start-copy h2{grid-column:1;grid-row:2;font-size:34px;margin:8px 0 0;letter-spacing:2px}
  .mobile-game .start-copy h2 span{display:block;margin:3px 0 0}
  .mobile-game .pixel-subtitle{grid-column:1;grid-row:3;margin:8px 0}
  .mobile-game .start-copy .start-intro{grid-column:1;grid-row:4;font-size:10px;margin:4px 0}
  .mobile-game .starter-picker{grid-column:2;grid-row:1/4;margin:0 0 6px}
  .mobile-game .starter-weapon{min-height:57px}
  .mobile-game .start-copy .starter-description{font-size:9px;min-height:30px}
  .mobile-game .mobile-modes{grid-column:2;grid-row:4;margin:0 0 9px}
  .mobile-game .mobile-modes .difficulty{min-height:40px;font-size:10px;padding:9px 6px}
  .mobile-game .mobile-modes .difficulty span{font-size:8px;margin-left:2px}
  .mobile-game #start-button{grid-column:2;grid-row:5;min-height:44px;font-size:13px}
  .mobile-game .mobile-hint{grid-column:1;grid-row:5;font-size:9px;margin:5px 0}
  .mobile-game .mobile-links{grid-column:1;grid-row:6;justify-content:flex-start;gap:10px}
  .mobile-game .mobile-links button{font-size:10px;min-height:30px;padding:6px 0}
  .mobile-game .upgrade-option{padding:11px;min-height:172px;text-align:center}
  .mobile-game .upgrade-option>canvas,.mobile-game .upgrade-option>.support-icon{position:static;margin:0 auto 7px;width:32px;height:32px}
  .mobile-game .upgrade-option .upgrade-num{text-align:center}
  .mobile-game .upgrade-option strong{font-size:12px}
  .mobile-game .upgrade-option small{font-size:9px}
  .mobile-game .game-modal{padding:13px 18px}
  .mobile-game .game-modal h2{font-size:17px;margin:6px 0}
  .mobile-game .game-modal>p{font-size:10px;margin:5px 0 8px}
  .mobile-game .upgrade-options{gap:9px;margin-top:8px}
  .mobile-game .upgrade-footnote{margin-top:9px;font-size:7px}
}