#buildInfoButton{position:fixed; right:16px; bottom:72px; z-index:10025; display:inline-flex; align-items:center; gap:8px; background:rgba(15,20,34,.97); color:rgba(230,232,238,.95); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:8px 16px; font-weight:900; font-size:12px; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 12px 32px rgba(0,0,0,.55); cursor:pointer}
#buildInfoButton.hidden{display:none}
#buildInfoButton:focus-visible{outline:2px solid rgba(110,231,255,.85); outline-offset:3px}
#buildInfoButton:active{transform:translateY(1px)}
#buildInfoButton .buildBadge{width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(110,231,255,1), rgba(93,255,154,.4))}

.whatsNewCard{max-width:520px}
.whatsNewContent{white-space:pre-wrap; font-size:13px; line-height:1.5; color:rgba(230,232,238,.92)}
.whatsNewContent strong{color:var(--tier-m)}
.whatsNewCard .overlayHeader .row{flex-wrap:nowrap; align-items:center}
.whatsNewFlagBadge{display:inline-flex; align-items:center; gap:8px; padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(15,20,34,.85); font-size:12px; color:var(--muted); white-space:nowrap}

:root{
  --bg:#0b0e14;
  --card:#121826;
  --text:#e6e8ee;
  --muted:#9aa3b2;
  --accent:#6ee7ff;
  --danger:#ff5c7a;
  --ok:#5dff9a;
  --border:#25304a;

  --tier-s: var(--danger);
  --tier-m: rgba(255,216,77,.95);
  --tier-l: var(--ok);
  --tier-plasma: rgba(99,179,255,.95);

  .last-collected-list{display:flex; flex-direction:column; gap:8px}
  .last-collected-item{display:flex; justify-content:space-between; align-items:center; padding:12px; background:rgba(15,20,34,.6); border:1px solid var(--border); border-radius:12px; gap:16px}
  .item-main{display:flex; align-items:center; gap:12px; min-width:0}
  .item-icon{flex-shrink:0; width:48px; height:48px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px rgba(0,0,0,.35)}
  .recent-map-icon{width:42px; height:42px; display:block}
  .recent-map-icon text{font-family:inherit}
  .recent-icon-fallback{font-size:22px; line-height:1}
  .item-text{display:flex; flex-direction:column; gap:4px; min-width:0}
  .item-label{font-weight:800; color:var(--text); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .item-meta{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .item-date{font-size:12px; color:var(--muted); white-space:nowrap}
  @media (max-width: 640px){
    .last-collected-item{flex-direction:column; align-items:flex-start}
    .item-date{margin-left:56px}
  }

  --map-ocean-fill:#0c1224;
  --map-ocean-stroke:#1e2a44;
  --map-graticule-stroke:rgba(154,163,178,.18);
  --map-country-fill:#18223a;
  --map-country-stroke:#2b3a5a;

  --tier-s: var(--danger);
  --tier-m: rgba(255,216,77,.95);
  --tier-l: var(--ok);
  --tier-plasma: rgba(99,179,255,.95);

  --map-ocean-fill:#0c1224;
  --map-ocean-stroke:#1e2a44;
  --map-graticule-stroke:rgba(154,163,178,.18);
  --map-country-fill:#18223a;
  --map-country-stroke:#2b3a5a;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--text); overflow-x:hidden; overscroll-behavior-y:none}
.hidden{display:none !important}
.container{max-width:1100px;margin:0 auto;padding:24px}

.tier-s{color:var(--tier-s)}
.tier-m{color:var(--tier-m)}
.tier-l{color:var(--tier-l)}
.tier-plasma{color:var(--tier-plasma)}
header{margin-bottom:16px;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:12px}
h1{margin:0 0 6px 0;font-size:28px}
h2{margin:0 0 12px 0;font-size:18px}
.muted{color:var(--muted)}
.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin:12px 0}
.row{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
label{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted)}
input:not([type="checkbox"]):not([type="radio"]),select{background:#0f1422; color:var(--text); border:1px solid var(--border); border-radius:8px; padding:10px; min-width:240px}
input[type="checkbox"],input[type="radio"]{min-width:auto; width:auto; padding:0; background:transparent; border:0; accent-color:var(--accent); -webkit-appearance:auto; appearance:auto}
button{background:var(--accent); color:#001018; border:0; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer}
button:hover{filter:brightness(1.05)}
button:disabled{opacity:.5; cursor:not-allowed}
.grow{flex:1}
.out{margin:12px 0 0 0; background:#0f1422; border:1px solid var(--border); padding:10px; border-radius:10px; overflow:auto; max-height:220px}
.details{margin-top:10px}
.details > summary{cursor:pointer; color:var(--muted); user-select:none}
.details[open] > summary{color:var(--text)}
.kv{display:flex; flex-direction:column; gap:4px; padding:8px 10px; border:1px dashed var(--border); border-radius:10px; min-width:160px}
.kv span{font-size:12px; color:var(--muted)}
.kv strong{font-size:16px}

.leaderboardOut{margin:0}
.leaderboardSection{background:#0f1422; border:1px solid var(--border); border-radius:12px; padding:12px}
.leaderboardTitle{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.leaderboardTitle strong{font-size:14px}
.leaderboardMeta{font-size:12px; color:var(--muted)}

.lbPodium{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-bottom:10px}
.lbPodiumCard{border:1px solid var(--border); border-radius:12px; padding:10px; background:rgba(18,24,38,.65)}
.lbPodiumCardHead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.lbRankBadge{display:inline-flex; align-items:center; gap:8px; font-weight:900; font-size:12px}
.lbTrophy{width:18px; height:18px; display:inline-block}
.lbName{font-weight:900; font-size:14px}
.lbScore{font-weight:1000; font-size:18px}
.lbSub{font-size:12px; color:var(--muted)}

.lbGold{--medal:#f7d66a; --medal2:#b98310}
.lbSilver{--medal:#d7dde7; --medal2:#8e98ad}
.lbBronze{--medal:#d7a077; --medal2:#8a4f2a}
.lbGold,.lbSilver,.lbBronze{border-color:rgba(255,255,255,.10)}
.lbGold .lbRankBadge,.lbGold .lbScore{color:var(--medal)}
.lbSilver .lbRankBadge,.lbSilver .lbScore{color:var(--medal)}
.lbBronze .lbRankBadge,.lbBronze .lbScore{color:var(--medal)}

.lbRows{display:flex; flex-direction:column; gap:6px}
.lbRow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid rgba(37,48,74,.85); border-radius:10px; background:rgba(18,24,38,.35)}
.lbRowLeft{display:flex; align-items:center; gap:10px; min-width:0}
.lbRowRank{width:26px; text-align:right; font-weight:900; color:rgba(230,232,238,.75)}
.lbRowName{font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lbRowScore{font-weight:1000}
.lbRowCountry{display:flex; align-items:center; gap:12px; min-width:0}
.lbFlag{font-size:20px; line-height:1}
.lbCountryMeta{display:flex; flex-direction:column; min-width:0}
.lbRowUser{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-weight:800}
.lbSection{border:1px solid rgba(37,48,74,.6); border-radius:12px; padding:12px; background:linear-gradient(135deg, rgba(15,20,34,.88), rgba(18,24,38,.68)); box-shadow:0 14px 32px rgba(0,0,0,.35)}
.lbSectionTitle{font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:rgba(154,163,178,.92); margin-bottom:8px}
.lbSection .lbRows{background:rgba(0,0,0,.08); border-radius:10px; padding:8px}
.lbSection .lbRow{background:rgba(15,20,34,.65); border-color:rgba(37,48,74,.65)}

.lbCard{
  border:2px solid rgba(108,152,255,.85);
  border-radius:16px;
  padding:18px;
  background:linear-gradient(145deg, rgba(10,12,26,.92), rgba(21,28,48,.78));
  box-shadow:0 22px 40px rgba(10,12,26,.65);
  position:relative;
}
.lbCard+.lbCard{margin-top:16px}
.lbCard .leaderboardTitle{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:12px;
}
.lbCard .leaderboardMeta{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(160,170,188,.85);
}

#inventoryPanel .kv strong{display:block; width:100%; text-align:center}
#inventoryPanel #energyDrinkSCount,
#inventoryPanel #energyBoostSCount,
#inventoryPanel #bookWishdomSCount,
#inventoryPanel #bookMeditationSCount{color:var(--tier-s)}
#inventoryPanel #energyDrinkMCount,
#inventoryPanel #energyBoostMCount,
#inventoryPanel #bookWishdomMCount,
#inventoryPanel #bookMeditationMCount{color:var(--tier-m)}
#inventoryPanel #energyDrinkLCount,
#inventoryPanel #energyBoostLCount,
#inventoryPanel #bookWishdomLCount,
#inventoryPanel #bookMeditationLCount{color:var(--tier-l)}

#inventoryPanel .inventoryItems{display:flex; flex-direction:column; gap:10px; margin-top:10px}
#inventoryPanel .inventoryItems .inventoryRow3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; align-items:stretch}
.invPulse{animation:invPulse 900ms ease-out 1}
.grid{display:grid; grid-template-columns:repeat(13, minmax(0,1fr)); gap:6px; margin-top:12px}
.cell{border:1px solid var(--border); border-radius:8px; padding:8px; text-align:center; background:#0f1422}
.cell .id{font-size:11px; color:var(--muted)}
.cell .bal{font-size:16px; font-weight:800}
.cell .countryFlag{width:22px; height:16px; border-radius:3px; border:1px solid rgba(255,255,255,.12); box-shadow:0 6px 14px rgba(0,0,0,.25); object-fit:cover; vertical-align:middle}
.cell .countryIdText{display:inline-block; line-height:16px}
.cell.learned{border-color:rgba(93,255,154,.4)}
.cell.cap{border-color:rgba(255,92,122,.55)}

.mapWrap{border:1px solid var(--border); border-radius:12px; background:#0f1422; padding:10px; overflow-x:hidden; overflow-y:visible}
.map{width:100%; height:auto; display:block; will-change:transform}
.mapControls{position:relative; z-index:2; display:flex; justify-content:flex-end; gap:8px; margin-bottom:8px; transition:opacity .18s ease}
.mapControls button{background:#18223a; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-weight:700}
.mapControls button:hover{filter:brightness(1.08)}
.mapHud{display:flex; align-items:center; justify-content:flex-start; gap:12px; margin-bottom:8px; transition:opacity .18s ease; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#0f1422; font-size:12px; color:var(--muted); white-space:nowrap}

#mapHint{flex:1 1 100%}

.chainOfflineBanner{
  position:absolute;
  left:50%;
  top:calc(10px + 48px);
  transform:translateX(-50%);
  z-index:7;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,92,122,.92);
  border:1px solid rgba(255,92,122,1);
  color:#1b0006;
  font-weight:1000;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 10px 30px rgba(255,92,122,.25);
  user-select:none;
  pointer-events:none
}
.chainOfflineBanner.hidden{display:none}

.criticalTicker{position:fixed; left:14px; right:14px; bottom:10px; z-index:10020; overflow:hidden; border-radius:999px; padding:10px 0; background:rgba(30,10,15,.92); border:1px solid rgba(255,92,122,.35); box-shadow:0 12px 34px rgba(0,0,0,.45); pointer-events:none}
.criticalTicker.hidden{display:none}
.criticalTickerTrack{display:inline-block; white-space:nowrap; padding-left:100%; animation:criticalTickerMarquee 90s linear infinite; will-change:transform; font-size:14px; font-weight:1000; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,92,122,.95)}
@keyframes criticalTickerMarquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

.criticalTicker.ok{background:rgba(15,20,34,.82); border-color:rgba(93,255,154,.55)}
.criticalTicker.ok .criticalTickerTrack{color:rgba(230,232,238,.96); text-shadow:0 1px 0 rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.95), 0 0 14px rgba(93,255,154,.28); animation-duration:60s}

.criticalTickerUser{font-weight:1100}

.travelModePicker{position:absolute; z-index:7; min-width:220px; background:rgba(15,20,34,.97); border:1px solid rgba(37,48,74,.95); border-radius:12px; padding:10px; box-shadow:0 14px 38px rgba(0,0,0,.45)}
.travelModePicker.hidden{display:none}
.travelModePickerTitle{font-weight:900; color:var(--text); margin-bottom:8px}
.travelModePickerButtons{display:flex; gap:8px; flex-wrap:wrap}
.travelModePickerButtons button{background:#18223a; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-weight:800}
.travelModePickerButtons button:hover{filter:brightness(1.08)}

.treasureTravelPrompt{position:absolute; z-index:7; min-width:260px; max-width:320px; background:rgba(15,20,34,.97); border:1px solid rgba(37,48,74,.95); border-radius:12px; padding:10px; box-shadow:0 14px 38px rgba(0,0,0,.45)}
.treasureTravelPrompt.hidden{display:none}
.treasureTravelPromptTitle{font-weight:900; color:var(--text); margin-bottom:6px}
.treasureTravelPromptText{color:rgba(230,232,238,.92); margin-bottom:10px}
.treasureTravelPromptButtons{display:flex; gap:8px; justify-content:flex-end}
.treasureTravelPromptButtons button{background:#18223a; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-weight:900}
.treasureTravelPromptButtons button:hover{filter:brightness(1.08)}

.treasureTravelPrompt.treasureRare{border-color:rgba(247,214,106,.55); box-shadow:0 18px 45px rgba(0,0,0,.55), 0 0 0 1px rgba(247,214,106,.22) inset, 0 0 34px rgba(247,214,106,.14); background:linear-gradient(180deg, rgba(25,20,10,.92), rgba(15,20,34,.92))}
.treasurePromptHeader{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.treasurePromptIcon{width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(247,214,106,.10); border:1px solid rgba(247,214,106,.22)}
.treasurePromptIcon svg{width:18px; height:18px; display:block}
.treasurePromptTitles{display:flex; flex-direction:column; gap:2px; min-width:0}
.treasureTravelPrompt.treasureRare .treasureTravelPromptTitle{margin:0; font-size:13px; letter-spacing:.2px}
.treasurePromptSubtitle{font-size:11px; color:rgba(247,214,106,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.treasureTravelPrompt.treasureRare .treasureTravelPromptText{font-size:12px; line-height:1.35}
.treasureTravelPrompt.treasureRare .treasureTravelPromptButtons button{background:rgba(247,214,106,.10); border-color:rgba(247,214,106,.22)}
.treasureTravelPrompt.treasureRare .treasureTravelPromptButtons button:hover{filter:brightness(1.12)}

.treasureRewardCard{max-width:min(760px, 96vw); border-color:rgba(247,214,106,.55); box-shadow:0 20px 55px rgba(0,0,0,.65), 0 0 0 1px rgba(247,214,106,.18) inset, 0 0 38px rgba(247,214,106,.12); background:linear-gradient(180deg, rgba(25,20,10,.92), rgba(18,24,38,.92))}
.treasureRewardHeader strong{display:flex; align-items:center; gap:10px}
.treasureRewardTitle{width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center}
.treasureRewardTitle svg{width:20px; height:20px; display:block}
.treasureRewardOut{background:#0f1422; border:1px solid rgba(247,214,106,.20); border-radius:12px; padding:12px}
.treasureRewardGrid{display:flex; flex-direction:column; gap:8px}
.treasureRewardLine{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid rgba(37,48,74,.85); border-radius:10px; background:rgba(18,24,38,.35)}
.treasureRewardLine .lbl{color:rgba(230,232,238,.80); font-size:12px}
.treasureRewardLine .val{font-weight:1000; font-size:16px}
.treasureRewardFine{margin-top:10px; font-size:12px; color:var(--muted)}

.pmuRewardCard{border-color:rgba(180,120,255,.55); box-shadow:0 20px 55px rgba(0,0,0,.65), 0 0 0 1px rgba(180,120,255,.18) inset, 0 0 40px rgba(180,120,255,.14); background:linear-gradient(180deg, rgba(24,14,32,.92), rgba(18,24,38,.92))}
.pmuRewardHeader strong{display:flex; align-items:center; gap:10px}
.pmuRewardTitle{display:inline-flex; width:26px; height:26px; border-radius:10px; background:rgba(180,120,255,.20); border:1px solid rgba(180,120,255,.38); box-shadow:0 0 22px rgba(180,120,255,.16), 0 0 8px rgba(99,179,255,.12); padding:4px}
.pmuRewardTitle svg{width:100%; height:100%}
.pmuRewardOut{padding:14px 14px 16px}
.pmuRewardLine{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:12px}
.pmuRewardKey{color:rgba(230,232,238,.72); font-weight:700}
.pmuRewardVal{color:rgba(230,232,238,.95); font-weight:1000}

.plasmaCloudRewardCard{max-width:520px}
.plasmaCloudRewardHeader{background:linear-gradient(90deg, rgba(99,179,255,.22), rgba(180,120,255,.18)); border-bottom:1px solid rgba(255,255,255,.10)}
.plasmaCloudRewardHeader strong{display:flex; align-items:center; gap:10px}
.plasmaCloudRewardTitle{display:inline-flex; width:26px; height:26px; border-radius:10px; background:rgba(99,179,255,.20); border:1px solid rgba(99,179,255,.35); box-shadow:0 0 22px rgba(99,179,255,.16), 0 0 8px rgba(180,120,255,.14); padding:4px}
.plasmaCloudRewardTitle svg{width:100%; height:100%}
.plasmaCloudRewardOut{padding:14px 14px 16px}
.plasmaCloudRewardLine{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:12px}
.plasmaCloudRewardKey{color:rgba(230,232,238,.72); font-weight:700}
.plasmaCloudRewardVal{color:rgba(99,179,255,.95); font-weight:1000}

.leftStats{position:absolute; left:10px; top:64px; z-index:1000; width:240px; height:calc(100vh - 74px); max-height:calc(100vh - 74px); transform:translateX(0); transition:transform .18s ease; background:transparent; border:none; border-radius:14px; box-shadow:none; display:flex; flex-direction:column; overflow:visible}
.leftStats.collapsed{transform:translateX(calc(-100% + 34px))}
.leftStatsHandle{position:absolute; top:10px; right:-34px; width:34px; height:46px; z-index:1001; border-radius:0 12px 12px 0; background:rgba(15,20,34,.92); border:1px solid rgba(37,48,74,.95); border-left:0; color:var(--text); font-weight:900; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.leftStatsBody{flex:1; min-height:0; display:flex; flex-direction:column; background:rgba(15,20,34,.97); border:1px solid rgba(37,48,74,.95); border-radius:14px; box-shadow:0 14px 38px rgba(0,0,0,.45); overflow:hidden}
.leftStatsHandle:hover{filter:brightness(1.08)}
.leftStatsInner{padding:14px 14px 12px 14px; overflow-y:scroll; overflow-x:hidden; -webkit-overflow-scrolling:touch; flex:1; min-height:0; overscroll-behavior:none; position:relative; touch-action:pan-y; padding-bottom:32px; word-break:break-word; overflow-wrap:anywhere}
.leftStatsTitle{margin:0 0 12px 0; font-size:13px; font-weight:1000; letter-spacing:.04em; color:rgba(110,231,255,.96); text-transform:uppercase}
.leftStatRow{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.leftStatRow:last-child{margin-bottom:0}
.leftStatSeparator{display:flex; flex-direction:column; gap:8px; margin:16px 0 12px 0; padding:12px 0 8px 0; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.06)}
.leftStatLevelUpFrame{border:2px solid rgba(110,231,255,.4); border-radius:12px; padding:12px; margin-bottom:12px; background:rgba(110,231,255,.04)}
.leftStatSlowChangeFrame{border:2px solid rgba(234,179,8,.4); border-radius:12px; padding:12px; margin-bottom:12px; background:rgba(234,179,8,.04)}
.leftStatSeparatorLine{height:1px; background:rgba(255,255,255,.12); margin:0}
.leftStatSeparatorText{font-size:11px; font-weight:700; color:rgba(110,231,255,.88); text-align:center; letter-spacing:.01em; line-height:1.3}
.leftStatSeparatorArrows{display:flex; justify-content:center; gap:4px; margin-top:4px; color:rgba(110,231,255,.65); font-size:10px}
.leftStatSliderContainer{display:flex; flex-direction:column; gap:0; max-width:100%}
.leftStatSliderLabels{display:flex; justify-content:space-between; gap:10px; font-size:9px; font-weight:700; color:rgba(154,163,178,.85)}
.leftStatSliderLabelLeft{color:rgba(154,163,178,.85)}
.leftStatSliderLabelCenter{color:rgba(110,231,255,.85); flex:1; text-align:center}
.leftStatSliderLabelRight{color:rgba(154,163,178,.85)}
.leftStatSliderTrack{position:relative; width:100%; height:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:999px}
.leftStatSlider{position:absolute; top:0; left:0; width:100%; height:16px; border-radius:999px; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; outline:0}
.leftStatSlider::-webkit-slider-runnable-track{width:100%; height:16px; background:linear-gradient(to right, #22c55e 0%, #eab308 50%, #ef4444 100%); border-radius:999px; border:none}
.leftStatSlider::-moz-range-track{width:100%; height:16px; background:linear-gradient(to right, #22c55e 0%, #eab308 50%, #ef4444 100%); border-radius:999px; border:none}
.leftStatSlider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:8px; height:28px; background:rgba(110,231,255,.95); cursor:pointer; box-shadow:0 0 0 2px rgba(15,20,34,.8), 0 2px 6px rgba(0,0,0,.3); transition:transform .15s; border-radius:4px}
.leftStatSlider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.leftStatSlider::-moz-range-thumb{width:8px; height:28px; background:rgba(110,231,255,.95); cursor:pointer; border:2px solid rgba(15,20,34,.8); box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform .15s; border-radius:4px}
.leftStatSlider::-moz-range-thumb:hover{transform:scale(1.2)}
.leftStatSliderValue{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:11px; font-weight:900; color:rgba(255,255,255,.95); text-shadow:0 1px 2px rgba(0,0,0,.5), 0 0 8px rgba(0,0,0,.3); pointer-events:none; z-index:3; line-height:1}
.leftStatLabelRow{display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0}
.leftStatLabelWrap{display:flex; align-items:center; gap:6px; min-width:0; flex:1; overflow:hidden}
.leftStatLabel{font-size:12px; font-weight:900; color:rgba(230,232,238,.92); letter-spacing:.02em}
.leftStatPlusSub{font-size:11px; font-weight:900; color:rgba(154,163,178,.92); margin-left:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px}
#plusEnlightenment,#plusKnowledge,#plusEnergy,#plusConsciousness,#plusEnergyBoost{font-size:11px; font-weight:900; line-height:1; color:rgba(154,163,178,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:90px}
.leftStatHelp{width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:rgba(230,232,238,.85); font-weight:1000; line-height:1; cursor:pointer}
.leftStatHelp:hover{filter:brightness(1.12)}
.leftStatPct{font-size:12px; font-weight:900; color:rgba(154,163,178,.92)}
.leftStatBar{position:relative}
.leftStatBar .leftStatPct{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); color:rgba(255,255,255,.95); text-shadow:0 1px 2px rgba(0,0,0,.3); font-size:11px}
.leftStatEthosIndicator{position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:11px; font-weight:900; color:rgba(255,255,255,.95); text-shadow:0 1px 2px rgba(0,0,0,.3)}
.leftStatEthosMarker{position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,.6); transform:translateX(-50%); pointer-events:none}
.leftStatEthosMarkerTriangleUp{position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:6px solid rgba(255,255,255,.8)}
.leftStatEthosMarkerTriangleDown{position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid rgba(255,255,255,.8)}
.leftStatEthosAboveMarkers{position:relative; height:14px; margin-bottom:2px}
.leftStatEthosAboveMarker{position:absolute; top:0; font-size:8px; font-weight:800; color:rgba(255,255,255,.9); transform:translateX(-50%); pointer-events:none}
.leftStatEthosBelowMarkers{position:relative; height:14px; margin-top:2px}
.leftStatEthosBelowMarker{position:absolute; top:0; font-size:8px; font-weight:800; color:rgba(255,255,255,.9); transform:translateX(-50%); pointer-events:none}
.leftStatMilestoneContainer{position:relative; height:14px; margin-bottom:2px}
.leftStatMilestoneLine{position:absolute; top:0; bottom:0; width:2px; background:rgba(239,68,68,.9); transform:translateX(-50%); pointer-events:none}
.leftStatEthosMilestone{position:absolute; top:0; width:20px; height:14px; background:rgba(234,179,8,.9); border-radius:4px; font-size:8px; font-weight:800; color:#000; display:flex; align-items:center; justify-content:center; transform:translateX(-50%); cursor:help; opacity:0; transition:opacity .3s ease; pointer-events:none}
.leftStatEthosMilestone.active{opacity:1}
.leftStatBar{position:relative; height:16px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)}
.leftStatFill{position:relative; height:100%; border-radius:999px; background:linear-gradient(90deg, rgba(110,231,255,.92), rgba(93,255,154,.92)); overflow:hidden}

.leftBoosterRow{margin-top:4px}
.leftBoosterOptions{display:flex; flex-direction:column; gap:6px; padding:10px 10px; border:1px solid rgba(255,255,255,.10); border-radius:12px; background:rgba(255,255,255,.04)}
.leftBoosterOption{display:flex; align-items:center; gap:10px; font-size:12px; font-weight:900; color:rgba(230,232,238,.90); cursor:pointer; user-select:none}
.leftBoosterRadio{accent-color: rgba(110,231,255,.92); margin:0; transform:translateY(0.5px)}
.leftBoosterOption:hover{filter:brightness(1.08)}

.leftStatThreshold{position:absolute; top:-1px; bottom:-1px; width:2px; background:rgba(255,92,122,.92); left:80%; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 10px rgba(255,92,122,.18); pointer-events:none}

.resourceBar{position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:8; display:flex; gap:10px; align-items:center; flex-wrap:wrap; max-width:calc(100% - 20px)}
.resourcePill{display:inline-flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid rgba(37,48,74,.9); border-radius:999px; background:rgba(15,20,34,.95); color:var(--text); font-size:15px; font-weight:900; user-select:none}
.resourcePill.languagePill{padding:0; position:relative; overflow:visible}
.languageButton{display:flex; align-items:center; gap:10px; padding:10px 14px; background:none; border:none; color:inherit; font:inherit; cursor:pointer; border-radius:999px; width:100%}
.languageButton:focus-visible{outline:2px solid rgba(110,231,255,.9); outline-offset:3px}
.resourceIcon{display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10)}
.resourceSvg{width:34px; height:34px; display:block}
.languageFlag{display:inline-block; font-size:18px; line-height:1}
.languageChevron{font-size:12px; opacity:.7}
.languageMenu{position:absolute; top:calc(100% + 8px); right:0; min-width:180px; background:rgba(10,14,24,.96); border:1px solid rgba(99,179,255,.35); border-radius:14px; padding:8px; box-shadow:0 12px 30px rgba(0,0,0,.4); z-index:20; display:flex; flex-direction:column; gap:4px}
.languageOption{display:flex; align-items:center; width:100%; gap:10px; background:rgba(255,255,255,.03); border:1px solid transparent; border-radius:10px; padding:8px 10px; color:rgba(230,232,238,.95); font-size:14px; font-weight:600; cursor:pointer; text-align:left}
.languageOption:hover,.languageOption:focus-visible{background:rgba(99,179,255,.08); border-color:rgba(99,179,255,.5); outline:none}
.languageOption.active{background:rgba(99,179,255,.15); border-color:rgba(99,179,255,.6)}
.languageOptionFlag{font-size:16px; line-height:1}
.languageOptionLabel{flex:1}
.resourcePill.countryInfoPill{padding:0; position:relative; overflow:visible}
.countryInfoButton{display:flex; align-items:center; gap:10px; padding:10px 14px; background:none; border:none; color:inherit; font:inherit; cursor:pointer; border-radius:999px; width:100%}
.countryInfoButton:focus-visible{outline:2px solid rgba(110,231,255,.9); outline-offset:3px}
.countryInfoMenu{position:absolute; top:calc(100% + 8px); right:0; width:min(360px, calc(100vw - 24px)); background:rgba(10,14,24,.96); border:1px solid rgba(99,179,255,.35); border-radius:14px; padding:10px; box-shadow:0 12px 30px rgba(0,0,0,.4); z-index:20; display:flex; flex-direction:column; gap:8px}
.countryInfoMenu.hidden{display:none}
.countryInfoSearch{width:100%; min-width:0; background:#0f1422; color:var(--text); border:1px solid rgba(37,48,74,.95); border-radius:12px; padding:10px 12px; font-weight:800}
.countryInfoList{max-height:min(52vh, 420px); overflow:auto; display:flex; flex-direction:column; gap:6px; padding-right:2px}
.countryInfoItem{display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:9px 10px; color:rgba(230,232,238,.95); cursor:pointer}
.countryInfoItem:hover,.countryInfoItem:focus-visible{background:rgba(99,179,255,.08); border-color:rgba(99,179,255,.35); outline:none}
.countryInfoLeft{display:flex; align-items:center; gap:10px; min-width:0}
.countryInfoFlag{font-size:18px; line-height:1}
.countryInfoName{font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.countryInfoId{font-size:12px; font-weight:900; color:rgba(154,163,178,.92)}

.wikiCard{max-width:min(980px, 96vw)}
.wikiBody{padding:0}
.wikiFrame{width:100%; height:min(78vh, 760px); border:0; border-radius:0 0 12px 12px; background:#0f1422}
@media (max-width: 780px) {
  .resourceBar{left:10px; right:10px; transform:none; justify-content:flex-start}
  .resourcePill{padding:8px 10px; font-size:14px}
  .resourceIcon{width:30px; height:30px}
  .resourceSvg{width:30px; height:30px}
  .languageFlag{font-size:16px}
  .languageMenu{min-width:160px; right:auto; left:0}
  .statusHoverTip{left:10px; right:10px; transform:none; top:56px}
}
#srPill .resourceIcon{background:rgba(255,216,77,.10); border-color:rgba(255,216,77,.25)}
#plasmaPill .resourceIcon{background:rgba(99,179,255,.10); border-color:rgba(99,179,255,.25)}
#walletPill .resourceIcon{background:rgba(110,231,255,.10); border-color:rgba(110,231,255,.25)}
#cashPill .resourceIcon{background:rgba(93,255,154,.10); border-color:rgba(93,255,154,.25)}
#srPill{color:rgba(255,216,77,.95)}
#plasmaPill{color:rgba(99,179,255,.95)}
#walletPill{color:rgba(110,231,255,.95)}
#cashPill{color:rgba(93,255,154,.95)}
.resourceValue{min-width:28px; text-align:right}

.statusHoverTip{position:absolute; left:50%; top:54px; transform:translateX(-50%); z-index:8; padding:8px 12px; border-radius:999px; background:rgba(15,20,34,.97); border:1px solid rgba(37,48,74,.9); color:rgba(230,232,238,.92); font-size:12px; font-weight:900; letter-spacing:.01em; max-width:min(720px,calc(100% - 24px)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none}


@media (max-width: 780px) {
  .resourceBar{left:10px; right:10px; transform:none; justify-content:flex-start}
  .resourcePill{padding:8px 10px; font-size:14px}
  .resourceIcon{width:30px; height:30px}
  .resourceSvg{width:30px; height:30px}
.languageFlag{font-size:16px}
  .statusHoverTip{left:10px; right:10px; transform:none; top:56px}
}

.mapWrap{position:relative}

.mapWrap.fullscreen{position:fixed; inset:0; z-index:9999; border-radius:0; padding:14px}
.mapWrap.fullscreen .map{height:calc(100vh - 28px); width:100%}
.mapWrap.fullscreen .mapControls{position:absolute; top:64px; right:14px; margin:0}
.mapWrap.fullscreen .mapHud{position:absolute; top:64px; left:14px; right:14px; margin:0}
.mapWrap.fullscreen .resourceBar{left:14px; top:10px; transform:none}
.mapWrap.fullscreen .leftStats{left:14px; top:118px}
.mapWrap.fullscreen.controlsHidden .mapControls,
.mapWrap.fullscreen.controlsHidden .mapHud{opacity:0; pointer-events:none}

.rightSidebar{position:absolute; right:14px; top:118px; z-index:9; display:flex; flex-direction:column; gap:10px; transform:translateX(0); transition:transform .18s ease}
.rightSidebar.collapsed{transform:translateX(calc(100% - 34px))}
.rightSidebarHandle{position:absolute; top:10px; left:-34px; width:34px; height:46px; border-radius:12px 0 0 12px; background:rgba(15,20,34,.92); border:1px solid rgba(37,48,74,.95); border-right:0; color:var(--text); font-weight:900; cursor:pointer}
.rightSidebarHandle:hover{filter:brightness(1.08)}
.rightSidebar .sideBtn{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(37,48,74,.95); border-radius:14px; background:rgba(15,20,34,.97); color:rgba(230,232,238,.92); text-decoration:none; font-weight:900}
.rightSidebar .sideBtn:hover{filter:brightness(1.08)}
.rightSidebar .sideIcon{width:22px; height:22px; display:inline-flex}
.rightSidebar .sideIcon svg{width:22px; height:22px; display:block}
.rightSidebar .sideLabel{font-size:13px; letter-spacing:.01em}

.chatPanel{position:absolute; right:14px; top:64px; z-index:10; width:min(360px, calc(100% - 28px)); height:min(420px, calc(100% - 84px)); display:flex; flex-direction:column; transform:translateX(calc(100% + 14px)); transition:transform .18s ease; background:rgba(15,20,34,.97); border:1px solid rgba(37,48,74,.95); border-radius:14px; box-shadow:0 14px 38px rgba(0,0,0,.45)}
.chatPanel.collapsed{transform:translateX(calc(100% + 14px))}
.chatPanel:not(.collapsed){transform:translateX(0)}

.chatPanelHeader{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(37,48,74,.95)}
.chatHeaderRight{display:flex; align-items:center; gap:10px}
.chatStatus{font-size:11px; font-weight:900; color:rgba(154,163,178,.92)}
.chatClose{background:#18223a; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:6px 9px; font-weight:900}
.chatClose:hover{filter:brightness(1.08)}

.chatMsgs{flex:1; overflow:auto; padding:10px 12px; display:flex; flex-direction:column; gap:8px}
.chatMsg{display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px solid rgba(37,48,74,.85); border-radius:12px; background:rgba(18,24,38,.35)}
.chatMsgMeta{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; color:rgba(154,163,178,.92); font-weight:800}
.chatMsgUser{color:rgba(230,232,238,.92); font-weight:900}
.chatMsgText{font-size:13px; color:rgba(230,232,238,.92); line-height:1.25; word-break:break-word; white-space:pre-wrap}

.chatComposer{display:flex; gap:8px; padding:10px 12px; border-top:1px solid rgba(37,48,74,.95)}
.chatInput{flex:1; min-width:0; background:#0f1422; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px}
.chatSend{background:var(--accent); color:#001018; border:0; border-radius:10px; padding:10px 12px; font-weight:900}


.activePlayersPanel{position:fixed; right:14px; top:118px; z-index:10030; width:min(360px, calc(100% - 28px)); max-height:min(520px, calc(100vh - 132px)); display:flex; flex-direction:column; transform:translateX(calc(100% + 14px)); transition:transform .18s ease; background:rgba(15,20,34,.97); border:1px solid rgba(37,48,74,.95); border-radius:14px; box-shadow:0 14px 38px rgba(0,0,0,.45)}
.activePlayersPanel.collapsed{transform:translateX(calc(100% + 14px))}
.activePlayersPanel:not(.collapsed){transform:translateX(0)}

.activePlayersPanel{overflow:hidden; min-height:0}
.activePlayersPanelHeader{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(37,48,74,.95); flex-wrap:wrap; flex:0 0 auto}
.activePlayersTitleWrap{display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto}
.activePlayersHeaderRight{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; flex:1 1 auto; min-width:0}
.activePlayersMeta{font-size:11px; font-weight:900; color:rgba(154,163,178,.92); white-space:normal; word-break:break-word; flex:1 1 100%; text-align:right}

.activePlayersBack,.activePlayersClose{background:#18223a; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:6px 9px; font-weight:900}
.activePlayersBack:hover,.activePlayersClose:hover{filter:brightness(1.08)}

.activePlayersBody{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:10px 12px; display:block}
.activePlayersBody > * + *{margin-top:8px}

.activePlayersRow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid rgba(37,48,74,.85); border-radius:12px; background:rgba(18,24,38,.35); cursor:pointer}
.activePlayersRow:hover{filter:brightness(1.08)}
.activePlayersRowLeft{display:flex; align-items:center; gap:10px; min-width:0}
.activePlayersFlag{font-size:18px; line-height:1}
.activePlayersCountryName{font-weight:900; color:rgba(230,232,238,.92); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.activePlayersYouTag{font-size:10px; font-weight:1000; letter-spacing:.08em; padding:2px 6px; border-radius:999px; border:1px solid rgba(110,231,255,.35); background:rgba(110,231,255,.10); color:rgba(110,231,255,.95); text-transform:uppercase; white-space:nowrap}
.activePlayersCount{font-weight:1000; color:rgba(230,232,238,.95)}

.activePlayersPlayerRow{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid rgba(37,48,74,.65); border-radius:12px; background:rgba(15,20,34,.55)}
.activePlayersPlayerLeft{display:flex; align-items:flex-start; gap:10px; min-width:0}
.activePlayersPlayerName{font-weight:900; overflow-wrap:anywhere; word-break:break-word; white-space:normal; line-height:1.2}
.activePlayersPlayerMeta{font-size:11px; color:rgba(154,163,178,.92); font-weight:800; white-space:normal; overflow-wrap:anywhere; word-break:break-word; line-height:1.25}


@media (max-width: 780px) {
  .rightSidebar{top:64px; right:10px}
  .rightSidebar .sideBtn{padding:9px 10px; border-radius:12px}
  .rightSidebar .sideLabel{display:none}

  .chatPanel{right:10px; top:64px; width:calc(100% - 20px); height:min(420px, calc(100% - 84px))}
  .activePlayersPanel{right:10px; top:118px; width:calc(100% - 20px); max-height:min(520px, calc(100vh - 132px))}
}

.ocean{fill:var(--map-ocean-fill); stroke:var(--map-ocean-stroke); stroke-width:1}
.graticule{fill:none; stroke:var(--map-graticule-stroke); stroke-width:.5}
.country{fill:var(--map-country-fill); stroke:var(--map-country-stroke); stroke-width:.6; cursor:pointer}
.country.visited:not(.learned):not(.cap){fill:rgba(255,216,77,.22) !important; stroke:rgba(255,216,77,.35)}
.country.learned{fill:var(--country-color, #5dff9a) !important; fill-opacity:.55; stroke:var(--country-color, #5dff9a) !important; stroke-opacity:.9}
.country.cap{fill:var(--country-color, #ff5c7a) !important; fill-opacity:.72; stroke:var(--country-color, #ff5c7a) !important; stroke-opacity:1; stroke-width:1.1}

@supports (color: color-mix(in oklab, #fff 50%, #000)) {
  .country.visited:not(.learned):not(.cap){fill:color-mix(in oklab, rgba(255,216,77,.65) 28%, #0f1422) !important; stroke:color-mix(in oklab, rgba(255,216,77,.9) 55%, #2b3a5a)}
  .country.learned{fill:color-mix(in oklab, var(--country-color, #5dff9a) 45%, #0f1422) !important; stroke:color-mix(in oklab, var(--country-color, #5dff9a) 88%, #2b3a5a) !important}
  .country.cap{fill:color-mix(in oklab, var(--country-color, #ff5c7a) 68%, #0f1422) !important; stroke:color-mix(in oklab, var(--country-color, #ff5c7a) 95%, #2b3a5a) !important; stroke-width:1.1}
}
.country.selectedDest{stroke:rgba(255,216,77,.95); stroke-width:1.8}
.country:hover{stroke:var(--accent); stroke-width:1.2}
.country.routeFrom{stroke:rgba(154,163,178,.95); stroke-width:1.4}
.country.routeTo{stroke:rgba(110,231,255,.95); stroke-width:1.6}
.country.recentVisited{stroke:rgba(255,216,77,.8); stroke-width:1.2}

.mapThemeLight{
  --map-ocean-fill:#cfefff;
  --map-ocean-stroke:#79c7ea;
  --map-graticule-stroke:rgba(2, 40, 60, .12);
  --map-country-fill:#f3f6ff;
  --map-country-stroke:#8fa4d8;
}

.travelLine{fill:none; stroke:rgba(110,231,255,.85); stroke-width:2.2; stroke-linecap:round}
.travelLine.transmutation{stroke-dasharray:6 6; stroke:rgba(110,231,255,.95)}
.travelDot{fill:rgba(110,231,255,.95); stroke:#001018; stroke-width:1}
.travelDot.from{fill:rgba(154,163,178,.9)}

.travelLabel{pointer-events:none}
.travelLabelText{fill:var(--text); font-size:12px; font-weight:800; dominant-baseline:middle; text-anchor:middle; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2}
.travelLabelBg{fill:rgba(15,20,34,.82); stroke:rgba(37,48,74,.9); stroke-width:1}

.destOverlay{pointer-events:none}
.destLabel{fill:var(--text); font-size:12px; font-weight:800; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2; dominant-baseline:middle}
.destLabelBg{fill:rgba(15,20,34,.82); stroke:rgba(37,48,74,.9); stroke-width:1}

.treasureOverlay{pointer-events:auto}
.treasureChest{cursor:pointer}
.treasureChestHalo{fill:rgba(255,216,77,.22); stroke:rgba(255,216,77,.6); stroke-width:1; pointer-events:none}
.treasureChestBody{fill:#c0731c; stroke:#2b3a5a; stroke-width:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.treasureChestLid{fill:#f3b652; stroke:#2b3a5a; stroke-width:1}
.treasureChest:hover .treasureChestHalo{fill:rgba(255,216,77,.32); stroke:rgba(255,216,77,.85)}

.drinkOverlay{pointer-events:auto}
.energyDrink{cursor:pointer}
.energyDrinkHalo{fill:rgba(93,255,154,.18); stroke:rgba(93,255,154,.55); stroke-width:1; pointer-events:none; animation:energyPulse 4000ms ease-in-out infinite; will-change:transform}
.energyDrinkBottle{fill:rgba(93,255,154,.92); stroke:#0a2012; stroke-width:1}
.energyDrinkCap{fill:rgba(230,232,238,.88); stroke:rgba(0,0,0,.35); stroke-width:1}
.energyDrinkText{fill:rgba(230,232,238,.92); font-size:11px; font-weight:1000; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2; dominant-baseline:middle; text-anchor:middle; pointer-events:none}

.energyDrink[data-size="s"] .energyDrinkHalo{fill:rgba(255,92,122,.16); stroke:rgba(255,92,122,.55)}
.energyDrink[data-size="s"] .energyDrinkBottle{fill:rgba(255,92,122,.92); stroke:#1b0006}
.energyDrink[data-size="s"] .energyDrinkText{fill:var(--tier-s)}

.energyDrink[data-size="m"] .energyDrinkHalo{fill:rgba(255,216,77,.20); stroke:rgba(255,216,77,.65)}
.energyDrink[data-size="m"] .energyDrinkBottle{fill:rgba(255,216,77,.88); stroke:#1b1300}
.energyDrink[data-size="m"] .energyDrinkText{fill:var(--tier-m)}

.energyDrink[data-size="l"] .energyDrinkHalo{fill:rgba(93,255,154,.18); stroke:rgba(93,255,154,.55)}
.energyDrink[data-size="l"] .energyDrinkBottle{fill:rgba(93,255,154,.92); stroke:#0a2012}
.energyDrink[data-size="l"] .energyDrinkText{fill:var(--tier-l)}
.energyDrink:hover .energyDrinkHalo{filter:brightness(1.12)}

.bookOverlay{pointer-events:auto}
.bookItem{cursor:pointer}
.bookText{font-size:11px; font-weight:1000; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2; dominant-baseline:middle; text-anchor:middle; pointer-events:none}
.bookBadge{paint-order:stroke; stroke:rgba(255,255,255,.25); stroke-width:1; dominant-baseline:middle; text-anchor:middle; pointer-events:none}
.bookItem:hover .bookHalo{filter:brightness(1.12)}

.bookItem[data-size="s"] .bookHalo{fill:rgba(255,92,122,.16); stroke:rgba(255,92,122,.55)}
.bookItem[data-size="s"] .bookBody{fill:rgba(255,92,122,.92); stroke:#1b0006}
.bookItem[data-size="s"] .bookText{fill:var(--tier-s)}

.bookItem[data-size="m"] .bookHalo{fill:rgba(255,216,77,.20); stroke:rgba(255,216,77,.65)}
.bookItem[data-size="m"] .bookBody{fill:rgba(255,216,77,.88); stroke:#1b1300}
.bookItem[data-size="m"] .bookText{fill:var(--tier-m)}

.bookItem[data-size="l"] .bookHalo{fill:rgba(93,255,154,.18); stroke:rgba(93,255,154,.55)}
.bookItem[data-size="l"] .bookBody{fill:rgba(93,255,154,.92); stroke:#0a2012}
.bookItem[data-size="l"] .bookText{fill:var(--tier-l)}

.boostOverlay{pointer-events:auto}
.energyBoostItem{cursor:pointer}
.energyBoostHalo{fill:rgba(110,231,255,.18); stroke:rgba(110,231,255,.55); stroke-width:1; pointer-events:none; animation:energyPulse 4000ms ease-in-out infinite; will-change:transform}
.energyBoostCore{fill:rgba(15,20,34,.92); stroke:rgba(37,48,74,.9); stroke-width:1; pointer-events:all}
.energyBoostText{fill:rgba(230,232,238,.92); font-size:11px; font-weight:1000; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2; dominant-baseline:middle; text-anchor:middle; pointer-events:none}
.energyBoostTier{fill:rgba(230,232,238,.88); font-size:11px; font-weight:1000; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2; dominant-baseline:middle; text-anchor:middle; pointer-events:none}
.energyBoostItem:hover .energyBoostHalo{filter:brightness(1.12)}

.energyBoostItem[data-tier="s"] .energyBoostHalo{fill:rgba(255,92,122,.16); stroke:rgba(255,92,122,.55)}
.energyBoostItem[data-tier="s"] .energyBoostTier{fill:var(--tier-s)}

.energyBoostItem[data-tier="m"] .energyBoostHalo{fill:rgba(255,216,77,.20); stroke:rgba(255,216,77,.65)}
.energyBoostItem[data-tier="m"] .energyBoostTier{fill:var(--tier-m)}

.energyBoostItem[data-tier="l"] .energyBoostHalo{fill:rgba(93,255,154,.18); stroke:rgba(93,255,154,.55)}
.energyBoostItem[data-tier="l"] .energyBoostTier{fill:var(--tier-l)}

.boostBeacon{pointer-events:none}
.boostBeaconRing{fill:none; stroke:rgba(110,231,255,.85); stroke-width:2.2; opacity:.9; animation:boostBeaconPulse 4000ms ease-in-out infinite; will-change:transform}
.boostBeaconDot{fill:rgba(110,231,255,.95); stroke:rgba(0,0,0,.55); stroke-width:1}
.boostBeaconText{fill:rgba(230,232,238,.95); font-size:12px; font-weight:1000; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2; dominant-baseline:middle; text-anchor:middle}

.boostBeacon[data-tier="s"] .boostBeaconRing{stroke:rgba(255,92,122,.85)}
.boostBeacon[data-tier="s"] .boostBeaconDot{fill:rgba(255,92,122,.95)}

.boostBeacon[data-tier="m"] .boostBeaconRing{stroke:rgba(255,216,77,.90)}
.boostBeacon[data-tier="m"] .boostBeaconDot{fill:rgba(255,216,77,.95)}

.boostBeacon[data-tier="l"] .boostBeaconRing{stroke:rgba(93,255,154,.85)}
.boostBeacon[data-tier="l"] .boostBeaconDot{fill:rgba(93,255,154,.95)}

@keyframes boostBeaconPulse{
  0%{transform:scale(1); opacity:.65}
  50%{transform:scale(1.22); opacity:1}
  100%{transform:scale(1); opacity:.65}
}

 .plasmaCloudOverlay{pointer-events:auto}
 .plasmaCloudItem{cursor:pointer}
 .plasmaCloudHalo{fill:rgba(99,179,255,.16); stroke:rgba(99,179,255,.55); stroke-width:1; pointer-events:none; animation:plasmaCloudPulse 4000ms ease-in-out infinite; will-change:transform}
 .plasmaCloudCore{fill:rgba(15,20,34,.92); stroke:rgba(255,255,255,.16); stroke-width:1; pointer-events:all}
 .plasmaCloudGlow{fill:rgba(180,120,255,.20); stroke:rgba(180,120,255,.35); stroke-width:1; pointer-events:none; animation:plasmaCloudGlow 4000ms ease-in-out infinite; will-change:opacity}
 .plasmaCloudText{fill:rgba(230,232,238,.92); font-size:10px; font-weight:1000; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2; dominant-baseline:middle; text-anchor:middle; pointer-events:none}
 .plasmaCloudNeed{fill:rgba(99,179,255,.95); font-size:10px; font-weight:1000; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2; dominant-baseline:middle; text-anchor:middle; pointer-events:none}
 .plasmaCloudItem:hover .plasmaCloudHalo{filter:brightness(1.12)}

 .plasmaCloudIconOrbit{transform-box:fill-box; transform-origin:center; animation:plasmaCloudIconSpin 6000ms linear infinite; will-change:transform}
 .plasmaCloudIconDot{fill:rgba(230,232,238,.92); opacity:.92; filter:drop-shadow(0 0 2px rgba(180,120,255,.35))}
 .plasmaCloudIconSpark{stroke:rgba(230,232,238,.92); stroke-width:1.25; stroke-linecap:round; opacity:.85; animation:plasmaCloudIconSpark 4000ms ease-in-out infinite; will-change:opacity}

 @keyframes plasmaCloudPulse{
  0%{transform:scale(1); opacity:.55}
  50%{transform:scale(1.24); opacity:.95}
  100%{transform:scale(1); opacity:.55}
 }

 @keyframes plasmaCloudGlow{
  0%{opacity:.50}
  50%{opacity:.85}
  100%{opacity:.50}
 }

 @keyframes plasmaCloudIconSpin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
 }

 @keyframes plasmaCloudIconSpark{
  0%{opacity:.55}
  50%{opacity:.95}
  100%{opacity:.55}
 }

 .ritualCircleOverlay{pointer-events:auto}
 .ritualCircleItem{cursor:pointer}
 .ritualCircleHalo{fill:rgba(93,255,154,.12); stroke:rgba(93,255,154,.50); stroke-width:1; pointer-events:none; animation:ritualPulse 4000ms ease-in-out infinite; will-change:transform}
 .ritualCircleCore{fill:rgba(15,20,34,.92); stroke:rgba(255,255,255,.16); stroke-width:1; pointer-events:all}
 .ritualCircleText{fill:rgba(230,232,238,.92); font-size:10px; font-weight:1000; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2; dominant-baseline:middle; text-anchor:middle; pointer-events:none}
 .ritualCircleNeed{fill:rgba(93,255,154,.95); font-size:10px; font-weight:1000; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2; dominant-baseline:middle; text-anchor:middle; pointer-events:none}
 @keyframes ritualPulse{0%{transform:scale(1); opacity:.55}50%{transform:scale(1.08); opacity:.78}100%{transform:scale(1); opacity:.55}}

 .beaconMapOverlay{pointer-events:auto}
 .beaconItem{cursor:pointer}
 .beaconHalo{fill:rgba(255,216,77,.12); stroke:rgba(255,216,77,.55); stroke-width:1; pointer-events:none; animation:beaconPulse 4000ms ease-in-out infinite; will-change:transform}
 .beaconCore{fill:rgba(15,20,34,.92); stroke:rgba(255,255,255,.16); stroke-width:1; pointer-events:all}
 .beaconText{fill:rgba(230,232,238,.92); font-size:10px; font-weight:1000; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:2; dominant-baseline:middle; text-anchor:middle; pointer-events:none}
 @keyframes beaconPulse{0%{transform:scale(1); opacity:.55}50%{transform:scale(1.10); opacity:.82}100%{transform:scale(1); opacity:.55}}

 .coopRewardCard{max-width:520px}
 .coopRewardHeader{background:linear-gradient(90deg, rgba(110,231,255,.18), rgba(93,255,154,.14)); border-bottom:1px solid rgba(255,255,255,.10)}
 .coopRewardHeader strong{display:flex; align-items:center; gap:10px}
 .coopRewardTitle{display:inline-flex; width:26px; height:26px; border-radius:10px; background:rgba(110,231,255,.14); border:1px solid rgba(110,231,255,.30); box-shadow:0 0 22px rgba(110,231,255,.12), 0 0 8px rgba(93,255,154,.10); padding:4px}
 .coopRewardTitle svg{width:100%; height:100%}
 .coopRewardOut{padding:14px 14px 16px}
 .coopRewardLine{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:12px}
 .coopRewardKey{color:rgba(230,232,238,.72); font-weight:700}
 .coopRewardVal{color:rgba(110,231,255,.95); font-weight:1000}

@keyframes energyPulse{
  0%{transform:scale(1); opacity:.55}
  50%{transform:scale(1.22); opacity:.9}
  100%{transform:scale(1); opacity:.55}
}

@keyframes invPulse{
  0%{transform:scale(1); filter:brightness(1)}
  35%{transform:scale(1.28); filter:brightness(1.25)}
  100%{transform:scale(1); filter:brightness(1)}
}

.fireParticle{fill:var(--col, rgba(255,216,77,.95)); opacity:0; transform-box:fill-box; transform-origin:center; animation:fireParticleFly var(--dur, 1100ms) ease-out var(--delay, 0ms) forwards}
.fireRing{fill:none; stroke:var(--col, rgba(255,216,77,.85)); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; animation:fireRingPulse var(--dur, 850ms) ease-out var(--delay, 0ms) forwards}

.arrivalFlagBg{fill:rgba(15,20,34,.82); stroke:rgba(255,255,255,.25); stroke-width:1}
.arrivalFlagImg{opacity:0.98}

@keyframes fireParticleFly{
  0%{transform:translate(0,0) scale(1); opacity:0}
  10%{opacity:1}
  70%{opacity:.9}
  100%{transform:translate(var(--dx, 0px), var(--dy, 0px)) scale(.55); opacity:0}
}

@keyframes fireRingPulse{
  0%{r:2; opacity:0}
  15%{opacity:.9}
  100%{r:42; opacity:0}
}

.playerPinPulse{fill:none; stroke:rgba(255,216,77,.45); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; animation:playerPinPulse 2300ms ease-out infinite; will-change:transform,opacity}
.playerPinPulseDelayed{animation-delay:1100ms}
.playerPinHalo{fill:none; stroke:rgba(255,216,77,.75); stroke-width:3.2; filter:drop-shadow(0 0 6px rgba(255,216,77,.45))}
.playerPin{fill:rgba(27,16,0,.92); stroke:rgba(255,230,140,.95); stroke-width:1.6}

@keyframes playerPinPulse{
  0%{r:0; opacity:0}
  10%{opacity:.9}
  70%{r:28; opacity:.45}
  100%{r:40; opacity:0}
}

.overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:10050; display:flex; align-items:center; justify-content:center; padding:18px}
#helpOverlay{z-index:10090}
.statusHoverTip.hidden{display:none}
.adminReqStatsScroll{max-height:420px;overflow:auto}
.adminReqStatsTable{width:100%;border-collapse:collapse;font-size:.9rem}
.adminReqStatsTable th,.adminReqStatsTable td{border-bottom:1px solid rgba(255,255,255,.08);padding:6px 8px;text-align:left;vertical-align:top}
.adminReqStatsTable th{font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.03em;color:rgba(255,255,255,.6)}
.adminReqStatsTable tr:nth-child(even){background-color:rgba(255,255,255,.02)}
.adminReqStatsTable .muted{color:rgba(255,255,255,.5)}
.adminReqStatsTable .center{text-align:center}
.overlayCard{width:min(1000px, 96vw); max-height:min(80vh, 900px); overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:12px; display:flex; flex-direction:column}
.overlayHeader{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border)}
.overlayHeader .overlayCloseButton{margin-left:auto; align-self:flex-start}
.overlayHeader button{background:#18223a; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-weight:700}
.overlayHeader button:hover{filter:brightness(1.08)}
.overlayBody{padding:14px; overflow:auto}

#treasureRewardOut{max-height:none}

.quizQ{margin:12px 0; padding:10px; border:1px solid var(--border); border-radius:12px; background:#0f1422}
.quizQTitle{font-weight:900; margin-bottom:8px}
.quizOpt{display:grid; grid-template-columns:18px 1fr; align-items:center; gap:10px; padding:8px 8px; border-radius:10px; cursor:pointer}
.quizOpt:hover{background:rgba(255,255,255,.04)}
.quizOpt input{margin:0; width:16px; height:16px; align-self:center; justify-self:center; cursor:pointer; transform:scale(1.15)}
.quizOptCorrect{box-shadow:inset 0 0 0 1px rgba(93,255,154,.45); background:rgba(93,255,154,.08)}
.quizOptWrong{box-shadow:inset 0 0 0 1px rgba(255,93,93,.45); background:rgba(255,93,93,.08)}
.quizOpt div{line-height:1.25}

/* Blinking animation for offline blockchain balances */
@keyframes blinkOffline {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.blink-offline {
  animation: blinkOffline 1s ease-in-out infinite;
  cursor: help;
}
.blink-offline:hover {
  animation: none;
  opacity: 1;
}

/* Mobile responsive adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .leftStats {
    width: 260px;
    top: 64px;
    height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
  }
  .leftStatsHandle {
    width: 44px;
    height: 56px;
    top: 10px;
    right: -44px;
  }
}

@media (max-width: 768px) {
  .leftStats {
    width: calc(100vw - 20px);
    left: 10px;
    top: 54px;
    height: calc(100vh - 64px);
    max-height: calc(100vh - 64px);
    border-radius: 12px;
  }
  .leftStats.collapsed {
    transform: translateX(calc(-100% + 44px));
  }
  .leftStatsHandle {
    width: 44px;
    height: 56px;
    right: -44px;
    font-size: 20px;
    top: 10px;
  }
  .leftStatsInner {
    padding: 12px;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    overscroll-behavior: none;
    touch-action: pan-y;
  }
}

@media (max-width: 480px) {
  .leftStats {
    width: calc(100vw - 16px);
    left: 8px;
    top: 48px;
    max-height: calc(100vh - 56px);
  }
  .leftStatsHandle {
    width: 40px;
    height: 50px;
    right: -40px;
    font-size: 18px;
    top: 10px;
  }
}