/* Saltreach — twilight indigo, salt cream, coral lamp, brass. Original theme; gameplay rules unchanged. */
:root{
  --sr-night:#070a18;--sr-deep:#0a0f25;--sr-panel:#111735;--sr-panel2:#171f44;
  --sr-cream:#f4e8d2;--sr-cream2:#dfcfb2;--sr-coral:#ff796b;--sr-coral-hi:#ffa28e;
  --sr-brass:#d8b26a;--sr-brass-dim:#8e7449;--sr-lav:#98a2da;--sr-muted:#939cc0;
  --sr-line:rgba(216,178,106,.2);--sr-line-hi:rgba(216,178,106,.46);
  --navy:#070a18;--navy2:#0b1028;--panel:#111735;--panel2:#171f44;
  --cyan:#ff796b;--blue:#98a2da;--coral:#ff796b;--gold:#d8b26a;--violet:#7f8bcc;
  --green:#e2c78e;--text:#f4e8d2;--muted:#939cc0;--line:rgba(216,178,106,.16);
  --shadow:0 18px 45px rgba(0,3,14,.45);--safe-bottom:env(safe-area-inset-bottom,0px);
}
html{background:#050711}
body{
  font-family:"Avenir Next","Helvetica Neue",system-ui,sans-serif;
  background:
    radial-gradient(circle at 18% -6%,rgba(255,121,107,.12),transparent 30%),
    radial-gradient(circle at 88% 14%,rgba(216,178,106,.07),transparent 28%),
    linear-gradient(180deg,#050711,#070b1c 50%,#04060f);
  color:var(--sr-cream);font-variant-numeric:tabular-nums lining-nums;
}
.app-shell{
  width:100%;max-width:520px;background:linear-gradient(180deg,#080c1d 0,#0a1027 48%,#060a17 100%);
  border:0;box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.app-shell:before{
  background-image:
    radial-gradient(circle at 20% 12%,rgba(255,121,107,.1),transparent 24%),
    radial-gradient(circle at 84% 32%,rgba(216,178,106,.07),transparent 22%),
    radial-gradient(circle at 48% 64%,rgba(84,99,184,.06),transparent 40%);
}
.ambient-a{background:#ff796b;opacity:.12}
.ambient-b{background:#5a63b8;opacity:.14}
.glass{
  background:linear-gradient(150deg,rgba(21,28,62,.94),rgba(8,12,29,.9));
  border:1px solid var(--sr-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
button{letter-spacing:.015em}
::selection{background:var(--sr-coral);color:#1b0c11}

/* ── top bar ─────────────────────────────────────────────── */
.topbar{
  max-width:520px;width:100%;background:rgba(7,10,24,.92);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--sr-line);padding-top:calc(12px + env(safe-area-inset-top));
  height:auto;min-height:72px;box-shadow:0 8px 28px rgba(0,0,0,.3);
}
.profile-copy b{font-size:13px;letter-spacing:.02em;color:var(--sr-cream)}
.profile-copy small{font-size:9.5px;color:var(--sr-lav);letter-spacing:.03em}
.avatar{
  width:42px;height:42px;border-radius:4px;background:linear-gradient(145deg,#e6d5b4,#b99762);
  border:1px solid rgba(244,232,210,.55);box-shadow:0 5px 16px rgba(0,0,0,.35);
}
.avatar>img{width:100%;height:100%;border-radius:2px;object-fit:cover}
.online-dot{background:#ff8d78!important;box-shadow:0 0 8px #ff796b}
.currency{
  background:#0c122b;border:1px solid var(--sr-line);border-radius:3px;min-height:34px;
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.currency b{font-size:13px;color:var(--sr-cream)}
.currency-icon{background:none!important;box-shadow:none!important;color:var(--sr-brass)!important;font-size:12px}
.currency-icon.star{color:var(--sr-coral)!important}
.currency i{color:var(--sr-coral)}
.lang-button{background:#0c122b;border:1px solid var(--sr-line);border-radius:3px}
.lang-button b{font-size:9px;color:var(--sr-brass);letter-spacing:.1em}

/* ── home hero ───────────────────────────────────────────── */
.home-sky{
  height:548px;overflow:hidden;
  background:
    radial-gradient(ellipse at 68% 70%,rgba(255,126,104,.23),transparent 36%),
    linear-gradient(180deg,#060914 0%,#0c122e 30%,#1b2150 57%,#3c3058 76%,#141936 100%);
}
.home-sky:before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    radial-gradient(circle at 22% 18%,rgba(255,255,255,.8) 0 1px,transparent 1.5px),
    radial-gradient(circle at 68% 11%,rgba(255,255,255,.55) 0 1px,transparent 1.4px),
    radial-gradient(circle at 84% 33%,rgba(255,255,255,.5) 0 1px,transparent 1.4px),
    radial-gradient(circle at 12% 44%,rgba(255,255,255,.42) 0 1px,transparent 1.4px),
    radial-gradient(circle at 47% 29%,rgba(255,255,255,.38) 0 1px,transparent 1.2px);
  background-size:210px 190px,260px 230px,180px 170px,240px 210px,300px 250px;
  opacity:.55;
}
.home-sky:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,121,107,.08),transparent 26%,rgba(216,178,106,.05) 72%,transparent),
    linear-gradient(180deg,transparent 64%,rgba(5,8,18,.58) 90%,#070a18 100%);
}
.cloud{display:none!important}
.sun-glow{
  z-index:2;width:74px;height:74px;border-radius:50%;top:78px;right:26px;
  background:radial-gradient(circle at 38% 34%,#fff8e5 0 48%,#efdcb8 62%,rgba(239,220,184,0) 72%);
  box-shadow:0 0 44px rgba(255,222,170,.22);opacity:.82;
}
.home-headline{top:24px;left:22px;right:22px;text-align:left;z-index:8}
.home-headline>.eyebrow{
  font-size:8.5px;letter-spacing:.24em;color:var(--sr-coral);font-weight:700;
  text-transform:uppercase;
}
.bh-wordmark{
  display:flex;align-items:center;gap:9px;margin:15px 0 12px;color:var(--sr-cream);
  font-family:"Avenir Next Condensed","Avenir Next",sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.26em;
}
.bh-wordmark img{width:35px;height:35px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.35))}
.home-headline h1{
  font-family:"Avenir Next Condensed","Avenir Next",sans-serif;font-size:43px;line-height:.92;
  font-weight:700;color:var(--sr-cream);text-transform:uppercase;letter-spacing:.005em;
  text-shadow:0 2px 22px rgba(0,0,0,.32);margin:0;max-width:340px;
}
.home-headline p{
  font-size:11.5px;line-height:1.55;color:var(--sr-lav);margin:13px 0 0;max-width:270px;
  letter-spacing:.02em;
}
.weather-chip{display:none}
.sr-hero-wrap{
  position:absolute;z-index:4;left:50%;bottom:-2px;width:min(112%,560px);height:374px;
  transform:translateX(-50%);animation:none;pointer-events:none;
}
.ark-shadow{display:none}
.sr-lighthouse-scene{position:absolute;inset:0;pointer-events:none}
.sr-hero-art{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.32));
}
.ocean{position:absolute;z-index:3;left:-10%;width:120%;border-radius:50% 50% 0 0/12px 12px 0 0;pointer-events:none}
.ocean-back{height:110px;bottom:-46px;background:rgba(27,36,82,.5);opacity:.6}
.ocean-front{
  height:86px;bottom:-42px;background:linear-gradient(180deg,rgba(255,121,107,.1),#070a18 86%);
  box-shadow:inset 0 5px 22px rgba(255,150,120,.08);
}
.ark-deck{
  position:absolute;z-index:6;left:50%;bottom:12px;transform:translateX(-50%);
  width:min(382px,calc(100vw - 32px));max-width:382px;height:auto;min-height:0;padding:0;
  display:flex;justify-content:center;align-items:stretch;gap:6px;
  background:none;border:0;clip-path:none;border-radius:0;box-shadow:none;
  pointer-events:auto;
}
.building{
  flex:1;width:auto;height:56px;border-radius:2px;padding:5px 4px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:linear-gradient(160deg,rgba(19,26,57,.95),rgba(8,12,29,.96));
  border:1px solid rgba(216,178,106,.32);box-shadow:0 8px 20px rgba(0,0,0,.35);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
}
.building:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--sr-brass),transparent);opacity:.5}
.building b{font-size:8px;line-height:1.2;color:var(--sr-cream);letter-spacing:.03em;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.building-level{
  position:absolute;top:4px;right:4px;background:#1b2145;border:1px solid var(--sr-brass);
  border-radius:2px;padding:1px 3px;font-size:6px;line-height:1.3;color:var(--sr-brass);
}
.building-art{font-size:20px;line-height:1;color:var(--sr-coral);text-shadow:0 0 14px rgba(255,121,107,.4)}
.building-art .bh-icon{width:22px;height:22px}
.float-item{
  width:42px;height:42px;background:radial-gradient(circle at 36% 30%,rgba(255,248,229,.9),rgba(255,121,107,.38) 40%,rgba(18,24,56,.7));
  border:1px solid rgba(244,232,210,.55);box-shadow:0 0 18px rgba(255,121,107,.28);
}
.float-item small{background:rgba(8,12,29,.82);border:1px solid var(--sr-line);color:var(--sr-cream)}

/* ── home body ───────────────────────────────────────────── */
.home-content{
  margin-top:-18px;position:relative;z-index:8;padding:0 16px 26px;
  background:linear-gradient(180deg,transparent 0,#080d21 30px,#070a18 100%);
}
.bh-welcome{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px 0}
.bh-welcome small{font-size:8.5px;color:var(--sr-brass);letter-spacing:.17em;font-weight:700}
.bh-welcome h2{
  font:600 21px/1.08 "Avenir Next Condensed","Avenir Next",sans-serif;margin:5px 0 0;
  color:var(--sr-cream);letter-spacing:.01em;max-width:230px;
}
.bh-welcome button{
  background:#0d1330;color:var(--sr-cream);border:1px solid var(--sr-line-hi);border-radius:2px;
  min-height:38px;padding:8px 12px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
}
.bh-welcome button span{color:var(--sr-coral)}

.tide-card{
  margin:0 0 12px;padding:13px 14px;border-radius:3px;display:flex;align-items:center;gap:11px;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#141b3f,#0b1027);border:1px solid var(--sr-line);
  box-shadow:0 10px 26px rgba(0,0,0,.24);
}
.tide-card:after{background:radial-gradient(circle,rgba(255,121,107,.16),transparent 68%);width:120px;height:120px;right:-42px;bottom:-66px}
.tide-card.low{background:linear-gradient(135deg,#151b3d,#0b1027);border-color:rgba(152,162,218,.25)}
.tide-orb{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 36% 30%,#fff6dc,#ffbe94 36%,#ff796b 68%,#7c343c 100%);
  box-shadow:0 0 0 1px rgba(255,121,107,.45),0 0 22px rgba(255,121,107,.22);
}
.tide-orb i{width:12px;height:12px;border-radius:50%;background:#ff796b;transform:none;box-shadow:0 0 13px rgba(255,121,107,.9)}
.tide-card.low .tide-orb{background:radial-gradient(circle at 36% 30%,#eef0ff,#b3bcf0 38%,#6e79c0 72%,#303760 100%);box-shadow:0 0 0 1px rgba(152,162,218,.35)}
.tide-card.low .tide-orb i{transform:none;background:#98a2da}
.tide-copy small{font-size:8.5px;letter-spacing:.15em;color:var(--sr-brass);font-weight:700}
.tide-copy b{font:600 18px/1.18 "Avenir Next Condensed","Avenir Next",sans-serif;color:var(--sr-cream);letter-spacing:.015em}
.tide-copy em{font-size:8.5px;color:var(--sr-lav)}
.tide-card.low .tide-copy small,.tide-card.low .tide-copy em{color:var(--sr-lav)}
.tide-cycle{
  background:#0a0f26;border:1px solid var(--sr-line);color:var(--sr-brass);border-radius:2px;
  font-size:6.5px;letter-spacing:.12em;
}

.quick-actions{gap:7px;margin-bottom:14px}
.quick-card{
  min-height:109px;border-radius:2px;padding:14px 10px 12px;text-align:left;position:relative;overflow:hidden;
  background:linear-gradient(155deg,#171e43,#0c1129);border:1px solid var(--sr-line);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%);
}
.quick-card:after{display:none}
.quick-card.coral{background:linear-gradient(155deg,#3a2035,#160f25);border-color:rgba(255,121,107,.34)}
.quick-card.cyan{background:linear-gradient(155deg,#15233f,#0b1127);border-color:rgba(152,162,218,.26)}
.quick-card.violet{background:linear-gradient(155deg,#232348,#101229);border-color:rgba(216,178,106,.28)}
.quick-card b{font-size:11.5px;margin-top:5px;color:var(--sr-cream);letter-spacing:.015em}
.quick-card small{font-size:8px;color:var(--sr-lav);line-height:1.45}
.quick-badge{
  background:#080c1d;border:1px solid var(--sr-line);border-radius:2px;color:var(--sr-brass);
  padding:3px 5px;font-size:6.5px;letter-spacing:.08em;
}
.quick-badge.ad{background:var(--sr-coral);color:#200d11;border-color:transparent}
.quick-icon{display:block;height:26px;font-size:24px;line-height:1;margin-bottom:8px;color:var(--sr-brass)}
.quick-icon .bh-icon{display:block;width:26px;height:26px;stroke-width:1.5}
.quick-card.coral .quick-icon{color:var(--sr-coral)}
.quick-card.cyan .quick-icon{color:var(--sr-lav)}

.panel,.merge-stage{
  border-radius:3px;background:linear-gradient(155deg,rgba(20,27,60,.97),rgba(8,12,29,.98));
  border:1px solid var(--sr-line);box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.035);
}
.panel{position:relative}
.panel-title h2{
  font:600 22px/1.1 "Avenir Next Condensed","Avenir Next",sans-serif;color:var(--sr-cream);
  letter-spacing:.015em;
}
.panel-title>b{font-size:9px;color:var(--sr-brass);letter-spacing:.05em}
.section-kicker{font-size:8px;letter-spacing:.17em;color:var(--sr-brass);font-weight:700}
.text-btn{font-size:10px;color:var(--sr-lav)}
.deck-panel{padding:14px;margin:0 0 13px}
.deck-panel .panel-title{margin-bottom:10px}
.deck-count{font-size:7px;color:var(--sr-brass);letter-spacing:.1em;background:#0a0f26;border:1px solid var(--sr-line);border-radius:2px;padding:4px 6px}
.deck-grid{gap:6px}
.deck-btn{
  border-radius:2px;background:linear-gradient(150deg,#0f1531,#0a0f26);border:1px solid rgba(216,178,106,.16);
  color:var(--sr-cream);min-height:62px;padding:9px;
}
.deck-btn:before{background:rgba(255,121,107,.06)}
.deck-btn .deck-icon{
  width:29px;height:29px;border-radius:2px;color:var(--sr-brass);background:#080c1d;
  border:1px solid rgba(216,178,106,.24);font-size:13px;
}
.deck-copy b{font-size:10px;color:var(--sr-cream);letter-spacing:.01em}
.deck-copy small{font-size:8px;color:var(--sr-lav)}
.deck-btn>em{color:var(--sr-brass);font-size:7.5px;letter-spacing:.04em}
.deck-btn.locked-deck{opacity:.52;filter:saturate(.35)}
.deck-btn.locked-deck>em{color:var(--sr-muted)}
.deck-btn.cooling>em{color:var(--sr-lav);font-variant-numeric:tabular-nums}
.deck-btn.deck-pulse{animation:deckPulse .35s ease}
@keyframes deckPulse{0%{transform:scale(1)}45%{transform:scale(.968);filter:brightness(1.3)}100%{transform:scale(1)}}

.resource-pill{background:#0a0f26;border:1px solid rgba(216,178,106,.14);border-radius:2px;padding:8px;gap:6px}
.resource-pill small{font-size:8px;color:var(--sr-lav)}
.resource-pill b{font-size:14px;color:var(--sr-cream)}
.resource-pill em{font-size:7px;color:var(--sr-brass)}
.res-icon{border-radius:2px!important;background:rgba(216,178,106,.08)!important;color:var(--sr-brass)!important;box-shadow:none!important}
.production-panel{padding:16px;margin-top:11px}
.production-progress{background:#080c1d;border:1px solid rgba(216,178,106,.1);border-radius:2px;height:5px;margin:18px 0 13px}
.production-progress i{background:linear-gradient(90deg,var(--sr-coral),var(--sr-brass));box-shadow:0 0 9px rgba(255,121,107,.35);border-radius:2px}
.production-progress span{color:var(--sr-muted);font-size:8px}
.double-actions{gap:7px}
.btn{
  min-height:42px;border-radius:2px;font-size:11px;letter-spacing:.05em;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);
}
.btn.primary{
  background:linear-gradient(145deg,#ff9a84,#ff7167);color:#240c10;
  box-shadow:0 8px 20px rgba(255,113,103,.18),inset 0 1px rgba(255,255,255,.35);
  font-weight:800;
}
.btn.secondary{background:#0d1330;color:var(--sr-cream);border:1px solid var(--sr-line-hi)}
.btn:active,button:active{transform:translateY(1px)!important}
.ad-mini{color:var(--sr-brass);background:#080c1d;border:1px solid var(--sr-line);border-radius:2px;font-size:7px}
.storyline{
  background:linear-gradient(135deg,#ff8a72,#c94f51);color:#2a0e12;border:1px solid rgba(255,193,164,.45);
  border-radius:2px;box-shadow:0 12px 28px rgba(125,31,39,.24);
}
.story-copy b{font:600 16px/1.2 "Avenir Next Condensed","Avenir Next",sans-serif;color:#250b0f;letter-spacing:.015em}
.story-copy small,.story-copy span,.story-reward small{font-size:9px;color:#4e2023}
.story-reward b{color:#240b0f}
.story-icon{background:#ffd9bc;color:#6e2b29;border-radius:2px;box-shadow:none}
.round-go{background:#2a0f17;color:#ffc1a4;border-radius:2px}

.bh-guide{margin:26px 0 20px}
.bh-sectionLabel{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--sr-brass);font-size:8px;letter-spacing:.17em}
.bh-sectionLabel b{color:var(--sr-muted);font-weight:500;letter-spacing:.12em}
.bh-guide>h2{
  font:600 29px/1.04 "Avenir Next Condensed","Avenir Next",sans-serif;color:var(--sr-cream);
  margin:11px 0 16px;letter-spacing:.01em;
}
.bh-guideGrid{gap:7px}
.bh-guideGrid button{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  background:linear-gradient(150deg,#111735,#0a0f25);border:1px solid rgba(216,178,106,.16);
  border-radius:2px;padding:15px 16px;position:relative;
}
.bh-guideGrid button:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--sr-coral);opacity:.7}
.bh-guideGrid button>span{font:600 18px/1 "Avenir Next Condensed","Avenir Next",sans-serif;color:var(--sr-brass);letter-spacing:.06em;margin-bottom:3px}
.bh-guideGrid b{font-size:13px;color:var(--sr-cream);letter-spacing:.015em}
.bh-guideGrid small{font-size:10.5px;line-height:1.55;color:var(--sr-lav)}
.bh-guideGrid i{font-style:normal;font-size:9px;color:var(--sr-coral);margin-top:5px;letter-spacing:.03em}
.bh-sponsors{
  padding:21px;background:linear-gradient(155deg,#151c3e,#0a0f25);color:var(--sr-cream);
  border:1px solid var(--sr-line);border-radius:2px;
}
.bh-sponsors>span{color:var(--sr-brass);letter-spacing:.17em}
.bh-sponsors h2{font:600 26px/1.06 "Avenir Next Condensed","Avenir Next",sans-serif;margin:12px 0;letter-spacing:.01em}
.bh-sponsors p{color:var(--sr-lav);font-size:11px}
.bh-sponsors button{
  background:#080c1d;border:1px solid var(--sr-line);border-radius:2px;color:var(--sr-cream);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
}
.bh-sponsors button small{color:var(--sr-lav)}
.bh-footer img{width:43px;height:43px}.bh-footer{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.bh-footer b{color:var(--sr-brass);letter-spacing:.3em;font-size:10px}
.bh-footer span{color:var(--sr-lav);font-size:9.5px}

/* ── interior screens ────────────────────────────────────── */
.page-head{padding-top:24px}
.page-head h1{
  font:600 34px/1.02 "Avenir Next Condensed","Avenir Next",sans-serif;letter-spacing:.005em;
  text-transform:uppercase;color:var(--sr-cream);
}
.page-head p{font-size:11px;line-height:1.6;color:var(--sr-lav)}
.page-head .eyebrow{font-size:8px;letter-spacing:.18em;color:var(--sr-coral)}
.icon-button{background:#0d1330;border:1px solid var(--sr-line-hi);border-radius:2px;color:var(--sr-brass)}
.combo-panel{margin:0 16px 11px;padding:13px;border-radius:3px}
.combo-copy .section-kicker{color:var(--sr-brass)}
#merge-combo{font:600 25px/1.05 "Avenir Next Condensed","Avenir Next",sans-serif;color:var(--sr-coral);letter-spacing:.02em}
#surge-timer{font-size:9px;color:var(--sr-lav)}
.combo-slots i{background:#080c1d;border:1px solid rgba(216,178,106,.14);border-radius:1px}
.combo-slots i.filled{background:linear-gradient(90deg,var(--sr-coral),var(--sr-brass));border-color:rgba(255,162,142,.55);box-shadow:0 0 7px rgba(255,121,107,.35)}
.combo-slots.surging i{background:linear-gradient(90deg,#ffb48f,#f4e8d2);border-color:#fff0d2;box-shadow:0 0 10px rgba(255,190,160,.55)}
.combo-help{color:var(--sr-lav);font-size:8.5px}
.merge-stats{
  background:#0c122b;border:1px solid var(--sr-line);border-radius:2px;padding:12px;
}
.merge-stats div{border-right:1px solid var(--sr-line)}
.merge-stats span{font-size:8px;color:var(--sr-lav)}
.merge-stats b{color:var(--sr-brass);font-size:18px;font-family:"Avenir Next Condensed","Avenir Next",sans-serif}
.merge-stage{border-radius:3px;padding:12px}
.merge-cell{border-radius:2px;background:#080c1d;border:1px solid rgba(216,178,106,.12)}
.merge-cell.has-tile{background:linear-gradient(145deg,#1a2148,#0b1027);box-shadow:inset 0 1px rgba(255,255,255,.04)}
.merge-cell.selected{border-color:var(--sr-coral);box-shadow:0 0 0 2px rgba(255,121,107,.2),0 0 16px rgba(255,121,107,.15)}
.merge-legend{font-size:9px;color:var(--sr-lav)}
.legend-dot.selected{background:var(--sr-coral)!important}
.legend-dot.possible{background:var(--sr-brass)!important}
.blueprint-item{background:#0c122b;border:1px solid var(--sr-line);border-radius:2px;color:var(--sr-cream)}
.blueprint-item small{font-size:8px;color:var(--sr-lav)}
.collection-strip{padding:14px;border-radius:3px}
.craft-actions .square-action{background:#0d1330;border:1px solid var(--sr-line-hi);border-radius:2px;color:var(--sr-cream)}
.craft-actions .square-action .ad-mini{background:var(--sr-coral);color:#200d11;border:0}

.sea-map{
  border-radius:3px;border:1px solid var(--sr-line);
  background:
    radial-gradient(circle at 72% 26%,rgba(255,121,107,.15),transparent 22%),
    radial-gradient(circle at 17% 76%,rgba(152,162,218,.15),transparent 26%),
    linear-gradient(155deg,#101632,#070b1c);
  box-shadow:inset 0 0 60px rgba(0,0,0,.35);
}
.sea-map:after{
  background-image:
    radial-gradient(circle,rgba(244,232,210,.3) 1px,transparent 1.4px),
    radial-gradient(circle,rgba(255,121,107,.22) 1px,transparent 1.4px);
  background-size:47px 53px,83px 71px;opacity:.28;
}
.route-svg path{stroke:rgba(216,178,106,.4);stroke-dasharray:5 9}
.route-svg .route-glow{stroke:var(--sr-coral);opacity:.55}
.island-node b{font-size:9.5px;color:var(--sr-cream);text-shadow:0 2px 8px #04060f}
.island-node small{font-size:7px;color:var(--sr-lav)}
.island-node i{background:#0c122b;border:1px solid var(--sr-line);border-radius:2px;color:var(--sr-brass)}
.island-node.current i{background:var(--sr-coral);color:#250b0f;border-color:transparent}
.island-node.boss i{background:#3a1a28;color:var(--sr-coral);border:1px solid rgba(255,121,107,.4)}
.island-node.done i{color:var(--sr-brass)}
.ship-marker{filter:drop-shadow(0 0 12px rgba(255,170,130,.55))}
.energy{background:#0d1330;border:1px solid var(--sr-line);border-radius:2px}
.energy span{color:var(--sr-coral)}
.energy b{color:var(--sr-cream)}
.expedition-card{padding:13px;border-radius:3px}
.expedition-visual{
  border-radius:2px;
  background:
    linear-gradient(90deg,rgba(7,10,24,.92),rgba(7,10,24,.18)),
    radial-gradient(circle at 76% 32%,#7e4a54 0,#28315f 29%,#0d1230 64%);
}
.expedition-visual:after{content:"✦";color:rgba(255,190,150,.15)}
.expedition-visual b{color:var(--sr-cream)}
.expedition-visual small{color:var(--sr-lav)}
.danger-tag{background:rgba(255,121,107,.13)!important;border:1px solid rgba(255,121,107,.3);color:var(--sr-coral)!important}
.power-row{color:var(--sr-lav)}
.power-row b{color:var(--sr-cream)}
.bond-line,.tide-line{background:#0a0f26;border:1px solid var(--sr-line);border-radius:2px;color:var(--sr-lav)}
.bond-line b,.tide-line b{color:var(--sr-brass)}
.tide-line b{color:var(--sr-coral-hi)}
.party-avatar{background:#0d1330;border-color:var(--sr-line)!important}
.party-avatar.party-empty{background:#080c1d;color:var(--sr-muted)}
.party-avatar i.faction-dot{background:#0a0f26;color:var(--sr-brass);border:1px solid var(--sr-line)}
.battle-button{width:100%;margin-top:12px}

.segmented{background:#080c1d;border:1px solid var(--sr-line);border-radius:2px}
.segmented button{color:var(--sr-lav);font-size:10px;letter-spacing:.04em}
.segmented button.active{background:linear-gradient(145deg,#202954,#121833);color:var(--sr-cream);border-radius:1px;box-shadow:inset 0 0 0 1px rgba(216,178,106,.2)}
.crew-card{border-radius:2px;background:linear-gradient(150deg,#121938,#0a0f25);border:1px solid var(--sr-line)}
.crew-card.selected{border-color:var(--sr-coral);box-shadow:0 0 0 1px rgba(255,121,107,.28),0 8px 22px rgba(0,0,0,.28)}
.crew-card.selected:after{background:var(--sr-coral);color:#250b0f;border-radius:1px}
.crew-card h3{font-family:"Avenir Next Condensed","Avenir Next",sans-serif;color:var(--sr-cream);letter-spacing:.02em}
.crew-card p{color:var(--sr-lav)}
.crew-card .deploy-state{background:#0a0f26;color:var(--sr-brass);border:1px solid var(--sr-line)}
.crew-card.selected .deploy-state{background:var(--sr-coral);color:#250b0f;border-color:transparent}
.crew-card .crew-faction{color:var(--sr-brass)}
.crew-bond{background:linear-gradient(135deg,#1a2148,#0d1330);border:1px solid var(--sr-line);border-radius:2px}
.crew-bond h2{font-family:"Avenir Next Condensed","Avenir Next",sans-serif;color:var(--sr-cream)}
.crew-bond p{color:var(--sr-lav)}
.crew-bond .bond-sigil{background:radial-gradient(circle at 36% 28%,#ff9e87,#a74748 70%);border-color:rgba(255,188,162,.55);color:#2a0e12;border-radius:50%}
.crew-bond small{color:var(--sr-brass)}

.season-card{
  border-radius:3px;background:linear-gradient(145deg,#202650,#0b1027 60%,#1b1635);
  border:1px solid var(--sr-line);box-shadow:0 18px 40px rgba(0,0,0,.3);
}
.season-card:before{background:var(--sr-coral);opacity:.08}
.season-card h2{font:600 28px/1.05 "Avenir Next Condensed","Avenir Next",sans-serif;color:var(--sr-cream);letter-spacing:.01em}
.season-top small{color:var(--sr-brass);letter-spacing:.08em}
.season-top div span{color:var(--sr-lav)}
.season-top button{background:linear-gradient(145deg,#ff9a84,#ff7167);color:#240c10;border-radius:1px;font-weight:800}
.season-level{color:var(--sr-cream)}
.season-level em{color:var(--sr-coral)}
.season-level span{color:var(--sr-lav)}
.season-progress{background:#080c1d;border:1px solid rgba(216,178,106,.12);border-radius:1px}
.season-progress i{background:linear-gradient(90deg,var(--sr-coral),var(--sr-brass));box-shadow:0 0 8px rgba(255,121,107,.3)}
.pass-track .pass-step,.pass-track .pass-item{background:#0c122b;border-color:var(--sr-line)}
.task-card{background:linear-gradient(150deg,#101632,#0a0f25);border:1px solid var(--sr-line);border-radius:2px}
.task-card b,.task-card h3{color:var(--sr-cream);font-size:12px}
.task-card small,.task-card p{color:var(--sr-lav)}
.task-item{padding:12px;border-bottom:1px solid rgba(216,178,106,.08)}
.task-reward button{background:var(--sr-coral);color:#240c10;border-radius:1px;font-weight:800;padding:0 10px}
.task-reward button.claimed{background:#0a0f26;color:var(--sr-muted)}
.task-reward button:disabled{background:#0a0f26;color:var(--sr-muted)}

.bottom-nav{
  width:100%;max-width:520px;background:rgba(7,10,24,.95);backdrop-filter:blur(18px);
  border-top:1px solid var(--sr-line);padding-bottom:calc(9px + env(safe-area-inset-bottom));
  height:auto;min-height:72px;box-shadow:0 -10px 30px rgba(0,0,0,.3);
}
.bottom-nav button{border-radius:1px;min-height:48px;color:var(--sr-muted)}
.bottom-nav button b{font-size:8.5px;letter-spacing:.06em}
.bottom-nav button>span{font-size:18px}
.bottom-nav button.active{color:var(--sr-coral);background:rgba(255,121,107,.07)}
.bottom-nav .nav-main{margin-top:-22px;color:var(--sr-cream)}
.bottom-nav .nav-main>span{
  width:50px;height:50px;border-radius:50%;color:#240c10;
  background:radial-gradient(circle at 35% 28%,#ffd2b1,#ff796b 58%,#b14745 100%);
  border:1px solid rgba(255,196,168,.6);
  box-shadow:0 0 0 5px #080c1d,0 8px 26px rgba(255,121,107,.34);
  font-size:21px;
}
.nav-badge{background:var(--sr-coral);color:#240c10;border:0}
.nav-dot{background:var(--sr-brass)!important}

/* ── overlays, battle, onboarding ─────────────────────────── */
.modal-root{background:rgba(3,5,14,.76);backdrop-filter:blur(7px) saturate(.7)}
.modal{
  max-width:500px;border-radius:4px 4px 0 0;
  background:linear-gradient(155deg,#151c3e,#080c1d 65%);
  border:1px solid var(--sr-line);border-bottom:0;
  box-shadow:0 -18px 60px rgba(0,0,0,.5);
}
.modal:before{content:"";display:block;height:2px;background:linear-gradient(90deg,transparent,var(--sr-coral),var(--sr-brass),transparent);margin:-18px -16px 16px}
.modal-handle{background:var(--sr-brass-dim);opacity:.55;border-radius:0;height:2px;width:34px}
.modal-head h2{font:600 25px/1.08 "Avenir Next Condensed","Avenir Next",sans-serif;color:var(--sr-cream);letter-spacing:.01em}
.modal-subtitle{color:var(--sr-lav);font-size:9px}
.modal-close{background:#0a0f26;color:var(--sr-brass);border:1px solid var(--sr-line);border-radius:2px}
.modal p{color:var(--sr-lav);font-size:11.5px;line-height:1.7}
.onboarding-modal{background:linear-gradient(155deg,#1a2148,#080c1d 62%)}
.onboarding-icon{width:116px;height:116px;background:none;border-radius:26px;color:#240c10;box-shadow:none;overflow:hidden}
.onboarding-mark{display:block;width:116px;height:116px;border-radius:26px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.38))}
.onboarding p{color:var(--sr-lav)}
.onboarding-dots i{background:#232a4c}
.onboarding-dots i.active{background:var(--sr-coral);box-shadow:0 0 10px rgba(255,121,107,.4)}
.starter-kit span{background:#0a0f26;border:1px solid var(--sr-line);color:var(--sr-cream);border-radius:2px}
.profile-stats div{background:#0a0f26;border:1px solid var(--sr-line);border-radius:2px}
.profile-stats small{color:var(--sr-lav)}
.profile-stats b{color:var(--sr-cream)}
.reset-progress{color:var(--sr-coral)!important}
.btn.danger{background:linear-gradient(135deg,#ff8a72,#c4464d);color:#250b0f}
.toast-root{max-width:520px}
.toast{
  font-size:10.5px;background:rgba(10,15,37,.97);border:1px solid var(--sr-line-hi);border-radius:2px;
  color:var(--sr-cream);box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.building-modal-art{background:radial-gradient(circle,#24305f,#0b1027 66%);border:1px solid var(--sr-line);border-radius:2px;color:var(--sr-cream)}
.upgrade-benefits .benefit{background:#0a0f26;border-color:var(--sr-line)}
.cost-row .cost{background:#0a0f26;border-color:var(--sr-line);color:var(--sr-lav)}
.cost-row .cost b{color:var(--sr-brass)}
.voyage-battle{background:linear-gradient(150deg,#18204a,#080c1d)!important}
.voyage-battle .battle-arena{
  background:
    radial-gradient(circle at 78% 14%,rgba(255,190,150,.23),transparent 24%),
    linear-gradient(165deg,#2b3468 0,#1a2048 46%,#181630 47%,#080b1a 100%);
  border:1px solid var(--sr-line);border-radius:2px;
}
.battle-hp .hp-track{background:#080c1d;border:1px solid rgba(216,178,106,.15)}
.battle-hp .hp-track i{background:linear-gradient(90deg,var(--sr-brass),var(--sr-cream))}
.battle-hp.enemy .hp-track i{background:linear-gradient(90deg,var(--sr-coral),#c04750)}
.battle-round-pill{background:#080c1d;border:1px solid var(--sr-line);color:var(--sr-brass);border-radius:1px}
.battle-warning{background:#0a0f26;border:1px solid var(--sr-line);color:var(--sr-cream);border-radius:2px}
.battle-warning.danger{background:#3c1a22;border-color:rgba(255,121,107,.4);color:#ffd5c4}
.battle-log{color:var(--sr-lav)}
.expedition-skills button{background:linear-gradient(145deg,#171f44,#0a0f25);border:1px solid var(--sr-line);border-radius:2px;color:var(--sr-cream)}
.expedition-skills button small{color:var(--sr-lav)}
.expedition-skills button.skill-hot:not(:disabled){box-shadow:0 0 0 1px var(--sr-coral),0 0 15px rgba(255,121,107,.3)}
.voyage-result h2{font-family:"Avenir Next Condensed","Avenir Next",sans-serif;color:var(--sr-cream)}
.voyage-result p{color:var(--sr-lav)}
.voyage-result .reward-chip{background:#0a0f26;border:1px solid var(--sr-line);color:var(--sr-cream)}
.damage-float{color:var(--sr-cream)}

.bh-icon{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.building-art .bh-icon{width:22px;height:22px}
.quick-icon .bh-icon{width:26px;height:26px}
.bottom-nav .bh-icon{width:20px;height:20px;stroke-width:1.7}
.bottom-nav .nav-main .bh-icon{width:24px;height:24px;stroke-width:1.9}

/* keep actionable content clear of the fixed dock */
.screens{padding-top:76px;padding-bottom:calc(140px + env(safe-area-inset-bottom))}
html{scroll-padding-top:90px;scroll-padding-bottom:130px}
button{scroll-margin-top:90px;scroll-margin-bottom:130px}
.task-item .task-body>b{font-size:12px}
.task-item .task-body>small{font-size:9.5px}
.task-reward button{min-height:34px;font-size:9px}
.profile-copy b,.profile-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:125px}

@media(min-width:600px){
  body{padding:0}.app-shell{border-radius:0;min-height:100vh}
  .topbar{top:0;border-radius:0}.bottom-nav{bottom:0;border-radius:0}
  .screens{min-height:100vh}.modal{border-radius:4px}
}
@media(max-width:390px){
  .home-headline h1{font-size:39px}
  .sr-hero-wrap{width:116%;height:356px}
  .ark-deck{width:calc(100% - 26px)}
  .building b{font-size:7.4px}
  .building-art{font-size:18px}
}
@media(max-width:360px){
  .topbar{padding-inline:10px}.home-headline{left:17px;right:17px}
  .home-headline h1{font-size:35px}.home-content{padding-inline:12px}
  .sr-hero-wrap{width:122%;height:344px}
  .building{height:52px;padding:3px}.building b{font-size:6.8px}
  .building-art{font-size:17px}.resource-pill{padding:6px;gap:3px}.resource-pill em{font-size:7px}
  .bh-welcome h2{font-size:19px}.quick-card small{font-size:7.5px}
  .quick-card{min-height:104px;padding:12px 8px 10px}
  .page-head h1{font-size:30px}.deck-copy b{font-size:9.2px}.deck-copy small{font-size:7.5px}
  .deck-btn{padding:8px;min-height:59px}.deck-grid{gap:5px}.tide-copy b{font-size:16px}
  .tide-card{padding:11px 12px}.combo-panel{padding:11px}.expedition-meta{grid-template-columns:1fr}
  .expedition-skills button b{font-size:7.5px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ── exchange, compass, crew socials, watch track ─────────── */
.shop-balance{background:#0a0f26;border:1px solid var(--sr-line);border-radius:2px;color:var(--sr-lav);font-size:10px}
.shop-balance b{color:var(--sr-brass)}
.shop-pack{
  border-radius:2px;background:linear-gradient(155deg,#151c3e,#0a0f25);border:1px solid var(--sr-line);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
}
.shop-pack.featured{background:linear-gradient(155deg,#2c2039,#150f25);border-color:rgba(255,121,107,.32)}
.shop-pack .tag{background:var(--sr-coral);color:#200d11;border-radius:2px;font-size:6.5px;letter-spacing:.06em;padding:3px 5px}
.shop-art{height:64px;font-size:42px;filter:grayscale(.12) drop-shadow(0 8px 12px rgba(0,0,0,.35))}
.shop-pack b{color:var(--sr-cream);font-size:11px}
.shop-pack small{color:var(--sr-lav);font-size:8px;line-height:1.45}
.shop-pack button{
  background:linear-gradient(145deg,#ff9a84,#ff7167);color:#240c10;border-radius:2px;font-weight:800;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%);
}
.wheel-wrap{margin:22px 0 18px}
.wheel{
  width:238px;height:238px;border:1px solid var(--sr-line-hi);
  background:conic-gradient(from -22.5deg,
    #1a2148 0 45deg,#3a2438 45deg 90deg,#202a56 90deg 135deg,#352239 135deg 180deg,
    #232348 180deg 225deg,#3a2438 225deg 270deg,#1d2549 270deg 315deg,#35253d 315deg);
  box-shadow:0 0 0 7px #0a0f26,0 0 0 8px rgba(216,178,106,.32),0 18px 35px rgba(0,0,0,.4);
}
.wheel:after{
  background:radial-gradient(circle at 36% 30%,#ffd2b1,#ff796b 62%,#8c3a45);color:#240c10;
  border:3px solid var(--sr-brass);box-shadow:0 0 0 4px #080c1d;
}
.wheel-pointer{color:var(--sr-brass);top:-12px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6))}
.wheel-label{
  color:var(--sr-cream);font-size:8px;font-weight:800;letter-spacing:.02em;text-align:center;
  width:46px;margin:-6px 0 0 -23px;transform-origin:center;text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.crew-summary{gap:7px}
.summary-card{
  border-radius:2px;background:linear-gradient(150deg,#141b3f,#0a0f25);border:1px solid var(--sr-line);
  min-height:92px;
}
.summary-card:after{color:rgba(216,178,106,.07)}
.summary-card small{color:var(--sr-lav);letter-spacing:.05em}
.summary-card b{color:var(--sr-cream);font-family:"Avenir Next Condensed","Avenir Next",sans-serif;font-size:23px}
.summary-card em{color:var(--sr-brass)}
.crew-card:before{opacity:.13;filter:blur(38px)}
.crew-card .crew-character{filter:grayscale(.12) drop-shadow(0 8px 7px rgba(0,0,0,.4))}
.rarity{
  background:rgba(8,12,29,.92)!important;border:1px solid var(--rarity);color:var(--sr-cream);
  border-radius:1px;letter-spacing:.08em;padding:2px 5px;
}
.crew-info b{color:var(--sr-cream)}
.crew-info small{color:var(--sr-lav)}
.crew-power span{color:var(--sr-brass)}
.crew-power button{background:#0a0f26;color:var(--sr-cream);border:1px solid var(--sr-line);border-radius:2px}
.social-card{border-radius:2px;padding:13px}
.social-avatar{
  border-radius:2px;background:linear-gradient(150deg,#202a56,#0f1531);
  border:1px solid var(--sr-line);color:var(--sr-brass);
}
.social-card b{color:var(--sr-cream)}
.social-card small{color:var(--sr-lav)}
.social-card em{color:var(--sr-brass)}
.social-card button{background:#0d1330;color:var(--sr-cream);border:1px solid var(--sr-line-hi);border-radius:2px}
.guild-banner{border-radius:2px;background:linear-gradient(150deg,#2c2347,#141833);border:1px solid var(--sr-line)}
.guild-banner:after{color:rgba(216,178,106,.08)}
.guild-banner .section-kicker{color:var(--sr-brass)}
.guild-banner h2{font-family:"Avenir Next Condensed","Avenir Next",sans-serif;color:var(--sr-cream);letter-spacing:.02em}
.guild-banner p{color:var(--sr-lav)}
.guild-banner button{
  background:linear-gradient(145deg,#ff9a84,#ff7167);color:#240c10;border-radius:2px;font-weight:800;
}
.task-icon{background:#0a0f26;border:1px solid var(--sr-line);border-radius:2px;font-size:18px}
.task-progress{background:#080c1d;border:1px solid rgba(216,178,106,.1);border-radius:1px}
.task-progress i{background:linear-gradient(90deg,var(--sr-coral),var(--sr-brass))}
.task-reward span{color:var(--sr-brass)}
.task-reward button.ready{background:linear-gradient(145deg,#ff9a84,#ff7167);color:#240c10}
.season-icon{border-radius:2px;background:linear-gradient(145deg,#e6d5b4,#b99762);color:#241a08}
.pass-node .reward{background:#0c122b;border:1px solid var(--sr-line);border-radius:2px;font-size:18px;height:46px}
.pass-node.current .reward{border-color:var(--sr-coral);box-shadow:0 0 13px rgba(255,121,107,.22)}
.pass-node small{color:var(--sr-lav)}
.pass-node i{background:var(--sr-brass);color:#241a08;border-radius:1px}
.reward-list .reward-chip{background:#0a0f26;border:1px solid var(--sr-line);border-radius:2px;color:var(--sr-cream)}
.ad-progress .spinner{border-color:#1a2148;border-top-color:var(--sr-coral)}
.ad-progress small{color:var(--sr-lav)}

/* Ad frames stay visible while fresh AdsGram block ids are pending. Ads._run never
   grants a reward without a configured block id, so the UI cannot fake a payout. */
/* Legacy voyage.css collapses these grids when ads are off. The ad frames stay,
   so keep the normal three-card / two-button layouts. */
body.ads-off .quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.ads-off .craft-actions{grid-template-columns:1fr 95px!important}