/* Safe-area layout; inventory colors represent item rarity, yellow represents selection. */
#ui .hud-bag { left:calc(var(--safe-left) + 12px); right:auto; top:calc(var(--safe-top) + 76px); width:min(196px,42vw); }
#ui .mute-btn { display:none; }
#ui .boss-hud,#ui .boss-hud.on { left:50%; right:auto; top:calc(var(--safe-top) + 152px); width:min(330px,80vw); margin-left:0; transform:translateX(-50%); }
#ui .combat-notice { top:calc(var(--safe-top) + 198px); }
@media(min-width:800px) { #ui .boss-hud,#ui .boss-hud.on { top:calc(var(--safe-top) + 12px); } }
.exp-tools { position:absolute; right:calc(var(--safe-right) + 12px); top:calc(var(--safe-top) + 68px); display:flex; gap:7px; pointer-events:auto; }
.exp-tool { color:var(--quality); border:2px solid var(--quality); border-radius:8px; background:#071b2eea; display:flex; align-items:center; justify-content:center; gap:4px; min-width:48px; min-height:44px; padding:5px; cursor:pointer; font:700 14px var(--font-zh); }
.exp-tool img { width:24px; height:30px; object-fit:contain; image-rendering:pixelated; }
.exp-tool[hidden],.exp-interact[hidden] { display:none !important; }
.exp-tools { max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 24px); flex-wrap:wrap; justify-content:flex-end; }
@media(max-width:600px) {
  .exp-tools { max-width:calc((100vw - var(--safe-left) - var(--safe-right)) * .45); }
  #ui:has(.exp-phone:not([hidden])) .boss-hud { top:calc(var(--safe-top) + 200px); }
  #ui:has(.exp-phone:not([hidden])) .combat-notice { top:calc(var(--safe-top) + 246px); }
}
.exp-buff { position:absolute; top:calc(100% + 5px); right:0; padding:4px 7px; border:1px solid #FFD700; border-radius:6px; background:#071b2eea; color:#FFD700; font:12px var(--font-zh); white-space:nowrap; pointer-events:none; }
.exp-buff[hidden] { display:none; }
.exp-interact { --progress:0deg; position:absolute; right:calc(var(--safe-right) + 24px); bottom:calc(var(--safe-bottom) + var(--control-d,500px) * .37); width:calc(var(--control-d,500px) * .115); height:calc(var(--control-d,500px) * .115); min-width:42px; min-height:42px; border:0; border-radius:50%; padding:3px; background:conic-gradient(#FFD700 var(--progress),#82bdd77a 0); color:#fff2c0; cursor:pointer; pointer-events:auto; }
.exp-interact span { display:grid; place-content:center; height:100%; border-radius:50%; background:#10283bea; font:700 13px var(--font-zh); }
.exp-interact.opening { box-shadow:0 0 12px #ffdb4266; }
#ui .touch-guides span { width:calc(var(--control-d,500px) * .145); height:calc(var(--control-d,500px) * .145); font-size:clamp(10px,2.5vmin,14px); }
#ui .layer-start { overflow-y:auto; scrollbar-width:none; touch-action:pan-y; }
#ui .start { min-height:100%; height:auto; gap:12px; scrollbar-width:none; }
#ui .start-back { position:absolute; z-index:1; top:calc(var(--safe-top) + 12px); left:calc(var(--safe-left) + 12px); min-height:44px; font-size:15px; }
.exp-loadout { width:min(600px,100%); margin:0 auto; flex-shrink:0; }
.exp-loadout-title { margin-bottom:7px; }
.exp-loadout-title small { color:inherit; font:inherit; margin-left:12px; }
.exp-grid { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:8px; }
.exp-grid > .exp-item:only-child { width:calc((100% - 16px) / 3); justify-self:center; }
.exp-item { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:5px; min-width:0; min-height:44px; padding:7px; border:2px solid #49657c; border-radius:8px; background:#081e32ed; color:var(--quality); cursor:pointer; font:700 13px var(--font-zh); }
.exp-item span,.exp-item b { white-space:nowrap; }
.exp-item img { width:30px; height:34px; object-fit:contain; image-rendering:pixelated; border:1px solid var(--quality); border-radius:4px; padding:2px; }
.exp-item.selected { border-color:#FFD700; background:#463813dd; box-shadow:0 0 0 1px #FFD70055; }
.exp-item:disabled { opacity:.5; cursor:default; }
.exp-item.selected:disabled { opacity:.85; }
#ui .st-list.exp-store-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:max-content; align-content:start; gap:10px; scrollbar-width:none; }
#ui .exp-store-grid .st-card.i { display:grid; grid-template-columns:42px minmax(0,1fr); gap:8px; padding:12px 8px; min-width:0; }
#ui .exp-store-grid .st-card.i.selected { border-color:#FFD700; box-shadow:inset 0 0 0 1px #FFD700; }
#ui .exp-store-grid .st-select { min-height:44px; justify-content:center; cursor:pointer; }
#ui .exp-store-grid .st-select[aria-disabled="true"] { cursor:default; }
#ui .exp-store-grid .st-select:focus-visible { outline:2px solid #FFD700; outline-offset:2px; border-radius:4px; }
#ui .exp-store-grid .st-card.i>.st-icw { width:38px; height:42px; border:2px solid var(--quality); border-radius:6px; }
#ui .exp-store-grid .st-card.i>.st-detail { padding:0; min-height:44px; cursor:pointer; }
#ui .exp-store-grid .st-detail:focus-visible { outline:2px solid #fff; outline-offset:2px; }
#ui .exp-store-grid .st-card.i .st-name { padding-right:16px; }
.st-carry { position:absolute; right:3px; top:3px; min-width:20px; height:20px; display:grid; place-items:center; border-radius:4px; background:#FFD700; color:#392b08; font:700 12px var(--font-zh); pointer-events:none; }
.st-carry[hidden] { display:none; }
#ui .exp-store-grid .st-card.i .st-ic { width:24px; height:30px; object-fit:contain; transform:none; }
#ui .exp-store-grid .st-card.i .st-name { color:var(--quality); font-size:15px; display:flex; flex-wrap:wrap; gap:4px; }
#ui .exp-store-grid .st-card.i>div:last-child { grid-column:1/-1; text-align:center; }
#ui .exp-store-grid .st-act { width:100%; min-width:0; }
@media (orientation:landscape) and (max-height:400px) {
  #ui .st-top { height:64px; }
  #ui .exp-store-grid .st-card.i { padding:8px; gap:6px; }
  #ui .exp-store-grid .st-card.i>.st-icw { height:32px; }
  #ui .exp-store-grid .st-card.i .st-ic { height:26px; }
}
.st-source { color:#a5bbca; display:block; padding:10px 0; font-size:13px; }
/* Chest rewards mirror the Boss celebration without pausing underwater controls. */
#ui .layer-chest-reward { z-index:40; pointer-events:none; display:flex; align-items:flex-start; justify-content:center; padding:calc(var(--safe-top) + 18vh) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 12px); }
.exp-reward { width:min(320px,100%); box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 18px; text-align:center; background:radial-gradient(ellipse at 50% 30%,#6a4a12f2,#1a0f05f2); border:2px solid #ffd24a; border-radius:10px; box-shadow:0 4px 0 #02101c,0 0 32px #ffc23a88; animation:exp-reward-in .4s ease-out; }
.exp-reward.out { opacity:0; transform:translateY(-20px); transition:opacity .5s,transform .5s; }
.exp-reward-title { font-size:26px; color:#ffe48a; text-shadow:0 3px 0 #7a3a00,0 0 18px #ffb000; }
.exp-reward-icon { width:58px; height:58px; display:grid; place-items:center; border:2px solid var(--quality); border-radius:8px; background:#03101acc; color:var(--quality); }
.exp-reward-icon img { width:44px; height:44px; object-fit:contain; image-rendering:pixelated; }
.exp-reward h3 { margin:0; font-size:20px; color:var(--quality); overflow-wrap:anywhere; }
.exp-reward-quality { color:var(--quality); font-size:13px; }
.exp-reward p { margin:2px 0; font-size:14px; line-height:1.5; color:#fff0d0; }
.exp-reward small { color:#bceaff; font-size:12px; }
@keyframes exp-reward-in { from { opacity:0; transform:translateY(12px) scale(.9); } to { opacity:1; transform:none; } }
@media (max-height:450px) {
  #ui .layer-chest-reward { padding-top:calc(var(--safe-top) + 58px); }
  .exp-reward { gap:3px; padding:8px 14px; }
  .exp-reward-title { font-size:22px; }
  .exp-reward-icon { width:38px; height:38px; }
  .exp-reward-icon img { width:30px; height:30px; }
}
#ui .layer-expedition-dialog { z-index:45; display:flex; align-items:center; justify-content:center; background:#020b15ad; pointer-events:auto; padding:calc(var(--safe-top) + 12px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 12px); }
.exp-dialog { width:min(420px,100%); max-height:100%; overflow-y:auto; scrollbar-width:none; touch-action:pan-y; padding:16px; background:#082033; color:#e4f3ff; border:2px solid #426c83; border-radius:14px; }
.exp-dialog header { position:relative; min-height:42px; display:flex; align-items:center; justify-content:center; }
.exp-dialog h2 { font-size:19px; margin:0 42px; }
.exp-back { position:absolute; left:0; top:0; }
.exp-body { text-align:center; line-height:1.7; padding:8px 0; }
.exp-item-detail { color:var(--quality); }
.exp-item-detail img { width:64px; height:72px; padding:8px; object-fit:contain; image-rendering:pixelated; border:2px solid var(--quality); border-radius:8px; background:#03101a; }
.exp-item-detail h3 { margin:8px 0 0; font-size:20px; }
.exp-actions { display:flex; flex-direction:column; gap:8px; }
.exp-actions .btn { min-height:44px; }
.exp-error { color:#ffaaaa; text-align:center; font-size:12px; margin:8px 0 0; }
.rs-section-title { font-size:16px; color:#bceaff; margin:12px 0 5px; }
.rs-supplies { padding:8px 12px; border:1px solid #AA44FF66; border-radius:6px; }
#ui .layer-start::-webkit-scrollbar,#ui .start::-webkit-scrollbar,#ui .exp-store-grid::-webkit-scrollbar,.exp-dialog::-webkit-scrollbar { display:none; }
@media(max-height:500px) {
  #ui .start .logo { transform:scale(.7); margin:-8px 0; }
  #ui .start .leveltag { font-size:17px; }
  #ui .start .leveltag small { font-size:11px; }
  .exp-item { padding:4px 7px; }
  .exp-item img { height:27px; }
  #ui .start { gap:7px; padding-top:12px; padding-bottom:12px; }
}
@media(max-width:400px) {
  .exp-tools { gap:4px; }
  .exp-tool { flex-direction:column; gap:0; min-width:44px; height:58px; padding:3px; font-size:12px; }
  .exp-tool img { width:20px; height:26px; }
  #ui .exp-store-grid .st-card.i { grid-template-columns:38px minmax(0,1fr); gap:4px; padding:9px 5px; }
  #ui .exp-store-grid .st-card.i .st-name { font-size:13px; }
}
@media(max-width:600px) {
  #ui .start { padding-top:calc(var(--safe-top) + 68px); }
  .exp-item { grid-template-columns:minmax(0,1fr) auto; gap:4px; padding:6px 4px; font-size:12px; }
  .exp-item img { grid-column:1/-1; justify-self:center; }
}