/* Black Flag v0.64.0 — cozy nautical portrait product system.
   One fixed game canvas: phone portrait through 1024 × 1366 iPad Pro portrait. */

:root {
  --bf-canvas-w: min(100vw, 75dvh, 1024px);
  --bf-canvas-h: min(100dvh, 1366px);
  --bf-ink: #2a1a13;
  --bf-ink-soft: #6f5542;
  --bf-cream: #fff4d6;
  --bf-paper: #f3dfb9;
  --bf-paper-deep: #e5c58f;
  --bf-wood: #86512d;
  --bf-wood-dark: #3e2518;
  --bf-wood-light: #c98546;
  --bf-gold: #ffc94d;
  --bf-gold-deep: #e59a27;
  --bf-sea: #126b79;
  --bf-sea-dark: #073b49;
  --bf-mint: #79d8c7;
  --bf-danger: #c24f42;
  --bf-shadow: 0 12px 28px rgba(42, 24, 14, .24);
  --bf-line: rgba(75, 42, 24, .22);
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000 !important;
}

body.black-flag-product {
  display: grid;
  place-items: center;
  color: var(--bf-ink);
  font-family: "Trebuchet MS", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}

body.black-flag-product *,
body.black-flag-product *::before,
body.black-flag-product *::after { box-sizing: border-box; }

body.black-flag-product button,
body.black-flag-product input,
body.black-flag-product textarea { font: inherit; }

body.black-flag-product button { -webkit-tap-highlight-color: transparent; }

body.black-flag-product [hidden] { display: none !important; }

body.black-flag-product .ocean-app {
  position: relative !important;
  width: var(--bf-canvas-w) !important;
  min-width: 0 !important;
  max-width: 1024px !important;
  height: var(--bf-canvas-h) !important;
  min-height: 0 !important;
  max-height: 1366px !important;
  margin: auto !important;
  overflow: hidden !important;
  isolation: isolate;
  transform: translateZ(0);
  background: var(--bf-sea-dark);
  box-shadow: 0 0 80px rgba(0, 0, 0, .78);
}

body.black-flag-product #oceanCanvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Login and lobby hide gameplay HUD only. Full-page Profile/Ships/Pets/Rewards/Top Up
   remain visible above the lobby when one of its real controls opens them. */
body.black-flag-product:has(#mobileProductOnboarding:not([hidden])) .ocean-app > :is(
  #identityCard, #buffHud, #phaseBadge, #worldEvent, .utility-actions, .fishing-offer,
  .dock-prompt, .sonar-shell, .boss-leaderboard, #chatPanel, .joystick, .ability-cluster,
  #cannonButton, #cannonAimJoystick, #cannonCancelZone, #weaponModeButton, .coordinate-chip,
  .toast, .announcement-toast, .announcement-flyby, .level-up-celebration,
  .boss-defeat-banner, .respawn-panel, .fishing-session, .boss-awards, #mobileSettingsButton
) { visibility: hidden !important; }

/* Portrait is the product. Landscape keeps the same portrait canvas and black side fill. */
body.black-flag-product .mobile-orientation-gate { display: none !important; }

/* Shared cozy controls */
body.black-flag-product :is(.primary, .fish-action, .pull-button, .reel-hit,
  #fishingResultClose, #bossAwardsClose, #mobileSettingsDone, #profileEditorSave,
  #rewardCheckoutConfirm, #storeDetailAction) {
  min-height: 54px;
  border: 2px solid #9e5e29 !important;
  border-radius: 16px !important;
  color: #3b230e !important;
  background: linear-gradient(180deg, #ffe27c, var(--bf-gold)) !important;
  box-shadow: inset 0 2px rgba(255, 255, 255, .58), inset 0 -3px rgba(143, 79, 20, .18), var(--bf-shadow) !important;
  font-weight: 1000 !important;
  letter-spacing: .035em;
  text-shadow: 0 1px rgba(255,255,255,.45) !important;
}

body.black-flag-product :is(.primary, .fish-action, .pull-button, .reel-hit,
  #fishingResultClose, #bossAwardsClose, #mobileSettingsDone, #profileEditorSave,
  #rewardCheckoutConfirm, #storeDetailAction):active { transform: translateY(2px); }

/* Login and account entry: illustration + controls, never a card inside a background. */
body.black-flag-product .black-flag-entry:not([hidden]) {
  position: absolute !important;
  z-index: 1000 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--bf-cream) !important;
  background: var(--bf-sea-dark) !important;
  backdrop-filter: none !important;
}

body.black-flag-product .black-flag-hero {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  background: url("environment/cozy-harbor-portrait-v1.png") center / cover no-repeat !important;
  transform: none !important;
  filter: none !important;
}

body.black-flag-product .black-flag-vignette {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(24, 17, 11, .2) 0 32%, rgba(15, 26, 26, .18) 48%, rgba(14, 20, 19, .9) 100%),
    linear-gradient(90deg, rgba(20, 10, 5, .2), transparent 28%, transparent 72%, rgba(20, 10, 5, .2)) !important;
}

body.black-flag-product .black-flag-auth-card,
body.black-flag-product .black-flag-auth-card.lobby-active {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.black-flag-product .black-flag-auth-card::before { display: none !important; }

body.black-flag-product .black-flag-brand {
  position: absolute !important;
  z-index: 5 !important;
  top: max(22px, env(safe-area-inset-top)) !important;
  left: 50% !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  translate: -50% 0 !important;
  color: #fff3cc !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  letter-spacing: .18em !important;
  white-space: nowrap;
}

body.black-flag-product .black-flag-brand i {
  position: relative !important;
  width: 46px !important;
  height: 46px !important;
  border: 2px solid #e6bd6d !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #8b552e, #3c2418) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.22), 0 6px 14px rgba(35,19,10,.25) !important;
}

body.black-flag-product .black-flag-brand i::after {
  content: "BF" !important;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffe38d;
  font: 1000 12px/1 system-ui;
}

body.black-flag-product .black-flag-auth-card:not(.lobby-active) > .mobile-onboarding-step {
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: max(88px, calc(env(safe-area-inset-top) + 76px)) 24px max(24px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  background: transparent !important;
}

body.black-flag-product .black-flag-auth-card:not(.lobby-active) > .mobile-onboarding-step.active { display: flex !important; }

body.black-flag-product [data-mobile-step="welcome"] {
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 18px;
  text-align: center;
}

body.black-flag-product .black-flag-login-copy { width: min(520px, 100%); margin: 0 !important; }
body.black-flag-product .black-flag-login-copy small {
  color: #ffe18b !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .18em !important;
}
body.black-flag-product .black-flag-login-copy h1 {
  margin: 9px 0 5px !important;
  color: #fff7de !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(42px, 9vw, 72px) !important;
  line-height: .94 !important;
  letter-spacing: -.045em !important;
  text-shadow: 0 4px 20px rgba(32, 17, 8, .48) !important;
}
body.black-flag-product .black-flag-login-copy p { margin: 0 !important; color: #f9eac4 !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: .15em; }

body.black-flag-product .black-flag-provider-actions {
  width: min(520px, 100%) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

body.black-flag-product .black-flag-provider-actions button {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 56px !important;
  padding: 0 52px !important;
  border: 2px solid rgba(86, 47, 24, .88) !important;
  border-radius: 16px !important;
  color: var(--bf-ink) !important;
  background: linear-gradient(180deg, rgba(255,248,222,.98), rgba(238,215,169,.98)) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.72), 0 9px 24px rgba(44,24,13,.25) !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
  letter-spacing: .04em !important;
}
body.black-flag-product .black-flag-provider-actions button::after { display: none !important; }
body.black-flag-product .black-flag-provider-actions .provider-mark {
  position: absolute !important;
  left: 9px !important;
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #ab7743 !important;
  border-radius: 50% !important;
  color: var(--bf-cream) !important;
  background: var(--bf-wood-dark) !important;
  box-shadow: none !important;
}

body.black-flag-product .black-flag-email-step,
body.black-flag-product .black-flag-return-step,
body.black-flag-product .mobile-launch-step {
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
  color: var(--bf-cream);
  text-align: left;
}
body.black-flag-product :is(.black-flag-email-copy, .black-flag-email-step form, .black-flag-email-back,
  .black-flag-return-step > *, .mobile-launch-step > *) { width: min(520px, 100%) !important; margin-inline: auto !important; }
body.black-flag-product .black-flag-email-copy small { color: #ffe18b !important; font-size: 12px !important; }
body.black-flag-product .black-flag-email-copy h2,
body.black-flag-product .black-flag-return-step h2,
body.black-flag-product .mobile-launch-step h2 { margin: 6px 0 !important; color: #fff7df !important; font: 1000 clamp(30px, 7vw, 48px)/1 Georgia, serif !important; }
body.black-flag-product .black-flag-email-copy p,
body.black-flag-product .black-flag-return-step p,
body.black-flag-product .mobile-launch-step p { color: #f4e4c2 !important; font-size: 15px !important; }
body.black-flag-product .black-flag-email-step form { display: grid !important; gap: 12px !important; }
body.black-flag-product .black-flag-email-step label { display: grid !important; gap: 6px !important; color: #ffe7a6 !important; font-size: 12px !important; font-weight: 1000 !important; }
body.black-flag-product .black-flag-email-step label > span { display: grid !important; grid-template-columns: 1fr auto !important; }
body.black-flag-product .black-flag-email-step input {
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 0 15px !important;
  border: 2px solid #8d5a31 !important;
  border-radius: 14px !important;
  outline: 0 !important;
  color: var(--bf-ink) !important;
  background: rgba(255, 246, 218, .98) !important;
  box-shadow: inset 0 2px 5px rgba(74,42,20,.12) !important;
  font-size: 16px !important;
}
body.black-flag-product .black-flag-email-step label > span input { border-radius: 14px 0 0 14px !important; }
body.black-flag-product #blackFlagPasswordToggle {
  min-width: 72px !important;
  border: 2px solid #8d5a31 !important;
  border-left: 0 !important;
  border-radius: 0 14px 14px 0 !important;
  color: var(--bf-cream) !important;
  background: var(--bf-wood) !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
}
body.black-flag-product #blackFlagEmailSubmit { width: 100% !important; min-height: 56px !important; }
body.black-flag-product .black-flag-email-back,
body.black-flag-product #blackFlagDifferentAccount {
  min-height: 46px !important;
  border: 0 !important;
  color: #fff1c8 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

/* Lobby: captain high, one play action, three loadout buttons, large chat. */
body.black-flag-product.black-flag-lobby-open .black-flag-vignette {
  background: linear-gradient(180deg, rgba(24, 14, 7, .24), rgba(4, 20, 23, .38) 45%, rgba(3, 17, 20, .9)) !important;
}
body.black-flag-product .black-flag-auth-card.lobby-active > .black-flag-brand { display: none !important; }
body.black-flag-product .black-flag-lobby-step {
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 4px !important;
  padding: max(14px, env(safe-area-inset-top)) 18px max(12px, env(safe-area-inset-bottom)) !important;
  color: var(--bf-cream) !important;
  background: transparent !important;
}
body.black-flag-product .black-flag-lobby-step[hidden] { display: none !important; }
body.black-flag-product .black-flag-lobby-header {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 54px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.black-flag-product .black-flag-lobby-wordmark { display: none !important; }
body.black-flag-product .black-flag-lobby-wordmark > i {
  display: grid !important;
  width: 38px !important;
  height: 38px !important;
  place-items: center !important;
  border: 2px solid #d8ad62 !important;
  border-radius: 50% !important;
  color: #ffe18a !important;
  background: var(--bf-wood-dark) !important;
  font: 1000 12px/1 system-ui !important;
  font-style: normal !important;
}
body.black-flag-product .black-flag-lobby-wordmark span { display: none !important; }
body.black-flag-product .black-flag-lobby-wallet {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 4px 5px 4px 13px !important;
  border: 2px solid #8c552a !important;
  border-radius: 999px !important;
  color: var(--bf-ink) !important;
  background: rgba(255, 240, 200, .96) !important;
  box-shadow: 0 5px 13px rgba(43,24,12,.22) !important;
}
body.black-flag-product .black-flag-lobby-wallet small { font-size: 12px !important; font-weight: 1000 !important; }
body.black-flag-product .black-flag-lobby-wallet b { font-size: 18px !important; }
body.black-flag-product .black-flag-lobby-wallet span {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #5a370e !important;
  background: var(--bf-gold) !important;
  font-weight: 1000 !important;
}
body.black-flag-product #blackFlagLobbySignOut { display: none !important; }

body.black-flag-product .black-flag-lobby-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(108px, .22fr) auto auto minmax(270px, 1fr) !important;
  gap: 8px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.black-flag-product .black-flag-lobby-captain { display: contents !important; }
body.black-flag-product .black-flag-lobby-sea,
body.black-flag-product .black-flag-lobby-ship,
body.black-flag-product .black-flag-lobby-pet,
body.black-flag-product #blackFlagLobbyProfile { display: none !important; }
body.black-flag-product .black-flag-lobby-portrait {
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: start !important;
  z-index: 3 !important;
  width: 58px !important;
  height: 58px !important;
  margin: 7px 0 0 4px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 3px solid #f3d38c !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: radial-gradient(circle at 35% 28%, #7cecdf, #197f9c 58%, #174052) !important;
  box-shadow: 0 6px 17px rgba(35,18,9,.3) !important;
  font-size: 20px !important;
  font-weight: 1000 !important;
}
body.black-flag-product .black-flag-lobby-portrait.has-photo { background-position: center !important; background-size: cover !important; }
body.black-flag-product .black-flag-lobby-portrait.has-photo span { visibility: hidden !important; }
body.black-flag-product .black-flag-lobby-identity {
  grid-row: 1 !important;
  align-self: start !important;
  z-index: 2 !important;
  min-width: 0 !important;
  margin: 7px 0 0 76px !important;
  cursor: pointer;
}
body.black-flag-product .black-flag-lobby-identity > small { color: #ffe199 !important; font-size: 12px !important; font-weight: 1000 !important; letter-spacing: .12em !important; }
body.black-flag-product .black-flag-lobby-identity h1 {
  margin: 4px 0 5px !important;
  overflow: hidden !important;
  color: #fff7df !important;
  font: 1000 clamp(25px, 6vw, 44px)/1 Georgia, serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 3px 10px rgba(45,23,10,.34) !important;
}
body.black-flag-product .black-flag-lobby-identity > b { color: #ffe38b !important; font-size: 12px !important; }
body.black-flag-product .black-flag-lobby-xp { width: min(300px, 80%) !important; height: 7px !important; margin-top: 8px !important; overflow: hidden !important; border: 1px solid rgba(255,230,170,.5) !important; border-radius: 99px !important; background: rgba(40,26,16,.58) !important; }
body.black-flag-product .black-flag-lobby-xp i { display: block !important; height: 100% !important; border-radius: inherit !important; background: linear-gradient(90deg, #f6ad35, #ffe47a) !important; }

body.black-flag-product .black-flag-lobby-footer {
  grid-row: 2 !important;
  display: block !important;
  min-height: 60px !important;
  padding: 0 !important;
  border: 0 !important;
}
body.black-flag-product .black-flag-lobby-footer > span { display: none !important; }
body.black-flag-product #blackFlagStartAdventure {
  width: 100% !important;
  min-height: 60px !important;
  border-radius: 18px !important;
  font-size: 17px !important;
}

body.black-flag-product .black-flag-lobby-loadout {
  position: static !important;
  inset: auto !important;
  grid-row: 3 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}
body.black-flag-product .black-flag-lobby-loadout button {
  min-width: 0 !important;
  min-height: 68px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 30px auto !important;
  justify-items: center !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px !important;
  border: 2px solid rgba(108, 62, 31, .9) !important;
  border-radius: 15px !important;
  color: var(--bf-ink) !important;
  background: linear-gradient(180deg, rgba(255,244,211,.97), rgba(229,199,144,.97)) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.54), 0 5px 12px rgba(39,21,12,.18) !important;
  text-align: center !important;
}
body.black-flag-product .black-flag-lobby-loadout button > i {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fff2c7 !important;
  background: var(--bf-sea) !important;
  font-size: 14px !important;
  font-style: normal !important;
}
body.black-flag-product .black-flag-lobby-loadout button span { min-width: 0 !important; }
body.black-flag-product .black-flag-lobby-loadout small { display: block !important; color: var(--bf-ink-soft) !important; font-size: 12px !important; font-weight: 1000 !important; letter-spacing: .06em !important; }
body.black-flag-product .black-flag-lobby-loadout b { display: block !important; margin-top: 3px !important; overflow: hidden !important; color: var(--bf-ink) !important; font-size: 12px !important; line-height: 1.05 !important; text-overflow: clip !important; white-space: normal !important; }

body.black-flag-product .black-flag-lobby-chat {
  grid-row: 4 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border: 2px solid rgba(109, 66, 37, .78) !important;
  border-radius: 18px !important;
  color: var(--bf-ink) !important;
  background: rgba(255, 246, 218, .94) !important;
  box-shadow: 0 9px 22px rgba(35,20,11,.2) !important;
}
body.black-flag-product .black-flag-lobby-chat > header {
  position: relative !important;
  min-height: 56px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 4px 10px !important;
  padding: 10px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bf-line) !important;
  background: rgba(224, 190, 132, .55) !important;
}
body.black-flag-product .black-flag-lobby-chat header span { display: grid !important; gap: 3px !important; }
body.black-flag-product .black-flag-lobby-chat header small { color: var(--bf-wood) !important; font-size: 12px !important; font-weight: 1000 !important; letter-spacing: .08em !important; }
body.black-flag-product .black-flag-lobby-chat header b { color: var(--bf-ink) !important; font-size: 15px !important; }
body.black-flag-product #blackFlagLobbyChatStatus { color: #2d8a5f !important; font-size: 12px !important; font-style: normal !important; font-weight: 1000 !important; }
body.black-flag-product #blackFlagLobbyOnline { grid-column: 2 !important; color: var(--bf-ink-soft) !important; font-size: 12px !important; font-style: normal !important; font-weight: 900 !important; }
body.black-flag-product #blackFlagLobbyChatLog {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 10px 12px !important;
  scrollbar-width: thin;
}
body.black-flag-product .black-flag-lobby-chat-message {
  width: fit-content !important;
  max-width: 86% !important;
  margin: 0 0 8px !important;
  padding: 8px 10px !important;
  border-radius: 13px 13px 13px 4px !important;
  color: var(--bf-ink) !important;
  background: rgba(255,255,255,.58) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}
body.black-flag-product .black-flag-lobby-chat-message b { display: block !important; margin: 0 0 3px !important; color: var(--bf-sea) !important; font-size: 12px !important; }
body.black-flag-product .black-flag-lobby-chat-message.system { max-width: 100% !important; padding: 4px 0 !important; color: var(--bf-ink-soft) !important; background: transparent !important; font-size: 12px !important; }
body.black-flag-product .black-flag-lobby-chat-message.system b { display: inline !important; margin-right: 5px !important; color: var(--bf-wood) !important; }
body.black-flag-product #blackFlagLobbyChatForm {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 72px !important;
  gap: 8px !important;
  padding: 9px !important;
  border-top: 1px solid var(--bf-line) !important;
}
body.black-flag-product #blackFlagLobbyChatInput {
  min-width: 0 !important;
  width: 100% !important;
  height: 46px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(95,57,31,.38) !important;
  border-radius: 13px !important;
  outline: 0 !important;
  color: var(--bf-ink) !important;
  background: rgba(255,255,255,.72) !important;
  font-size: 14px !important;
}
body.black-flag-product #blackFlagLobbyChatForm button {
  width: 72px !important;
  min-width: 72px !important;
  height: 46px !important;
  padding: 0 !important;
  border: 2px solid #0b5966 !important;
  border-radius: 13px !important;
  color: #fff4d7 !important;
  background: linear-gradient(180deg, #258e9b, #126b79) !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
}

/* Full-screen app pages replace drawers and floating web modals. */
body.black-flag-product .drawer-backdrop { display: none !important; }
body.black-flag-product .side-drawer,
body.black-flag-product .mobile-settings-overlay,
body.black-flag-product .profile-editor,
body.black-flag-product .store-detail-dialog,
body.black-flag-product .reward-checkout,
body.black-flag-product .photo-viewer {
  position: absolute !important;
  z-index: 1060 !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--bf-ink) !important;
  background:
    linear-gradient(rgba(255,246,218,.96), rgba(235,211,168,.98)),
    url("environment/cozy-harbor-portrait-v1.png") center / cover no-repeat !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.black-flag-product :is(
  .side-drawer,
  .mobile-settings-overlay,
  .profile-editor,
  .store-detail-dialog,
  .reward-checkout,
  .photo-viewer
) {
  position: fixed !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: var(--bf-canvas-w) !important;
  max-width: 1024px !important;
  height: var(--bf-canvas-h) !important;
  transform: translateX(-50%) !important;
}
body.black-flag-product .side-drawer:not([hidden]),
body.black-flag-product .mobile-settings-overlay:not([hidden]) { display: block !important; }

body.black-flag-product :is(.side-drawer, .mobile-settings-panel, .profile-editor form,
  .store-detail-dialog form, .reward-checkout form, .photo-viewer) > header,
body.black-flag-product .side-drawer > header {
  position: sticky !important;
  z-index: 10 !important;
  top: 0 !important;
  min-height: 78px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: max(12px, env(safe-area-inset-top)) 68px 12px !important;
  border: 0 !important;
  border-bottom: 3px solid #5e371f !important;
  color: #fff2c9 !important;
  background: linear-gradient(180deg, #9c6238, #694026) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.16), 0 4px 10px rgba(57,32,18,.22) !important;
}
body.black-flag-product :is(.side-drawer, .mobile-settings-panel, .profile-editor form,
  .store-detail-dialog form, .reward-checkout form, .photo-viewer) header h2,
body.black-flag-product .side-drawer header h2 {
  margin: 0 !important;
  color: #fff4d6 !important;
  font: 1000 clamp(24px, 5vw, 36px)/1 Georgia, serif !important;
  letter-spacing: -.02em !important;
  text-shadow: 0 2px rgba(61,32,15,.42) !important;
}
body.black-flag-product .side-drawer header small,
body.black-flag-product .mobile-settings-panel header small { display: none !important; }
body.black-flag-product :is([data-close-drawer], #mobileSettingsClose, #profileEditorClose,
  #storeDetailClose, #rewardCheckoutClose, #photoViewerClose) {
  position: absolute !important;
  left: 14px !important;
  top: max(13px, env(safe-area-inset-top)) !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border: 2px solid #4b2b1b !important;
  border-radius: 50% !important;
  color: #fff4d6 !important;
  background: #5d3925 !important;
  box-shadow: inset 0 2px rgba(255,255,255,.14) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body.black-flag-product .drawer-hero,
body.black-flag-product .side-drawer > p,
body.black-flag-product .equipment-slots { display: none !important; }
body.black-flag-product .drawer-resource-strip {
  position: sticky !important;
  z-index: 9 !important;
  top: 78px !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bf-line) !important;
  background: rgba(255,242,207,.96) !important;
}
body.black-flag-product .drawer-resource-strip b { color: var(--bf-ink) !important; font-size: 20px !important; }
body.black-flag-product .drawer-resource-strip small { color: var(--bf-ink-soft) !important; font-size: 12px !important; }

body.black-flag-product .store-categories { display: none !important; }
body.black-flag-product .store-grid,
body.black-flag-product .ship-list,
body.black-flag-product .reward-grid,
body.black-flag-product .coin-package-grid,
body.black-flag-product .reward-bag-list,
body.black-flag-product .account-history {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 16px !important;
  overflow: visible !important;
}
body.black-flag-product .side-drawer { overflow-y: auto !important; scrollbar-width: none; }
body.black-flag-product .side-drawer::-webkit-scrollbar { display: none; }
body.black-flag-product .store-grid .ship-card[hidden] { display: none !important; }
body.black-flag-product :is(.ship-card, .reward-card, .coin-package-card, .bag-reward-card, .account-history article) {
  min-width: 0 !important;
  min-height: 190px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 10px !important;
  overflow: hidden !important;
  border: 2px solid #a66c3e !important;
  border-radius: 18px !important;
  color: var(--bf-ink) !important;
  background: linear-gradient(180deg, #fff3cf, #e3c18c) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.6), 0 6px 16px rgba(75,43,24,.16) !important;
}
body.black-flag-product .ship-card > div:first-child,
body.black-flag-product .ship-card > span:first-child {
  width: 100% !important;
  min-height: 108px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  background: radial-gradient(circle, rgba(255,255,255,.64), transparent 68%) !important;
}
body.black-flag-product .ship-card img { width: 100% !important; height: 108px !important; object-fit: contain !important; }
body.black-flag-product .ship-card > div:nth-child(2) { min-width: 0 !important; padding: 6px 2px !important; }
body.black-flag-product .ship-card > div:nth-child(2) small { display: none !important; }
body.black-flag-product .ship-card > div:nth-child(2) strong { display: block !important; overflow: hidden !important; color: var(--bf-ink) !important; font-size: 14px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.black-flag-product .store-card-price {
  width: 100% !important;
  min-height: 40px !important;
  margin-top: auto !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff4d5 !important;
  background: var(--bf-sea) !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
}

/* Wallet / Rewards / Top Up are pages, not floating panels. */
body.black-flag-product .wallet-sticky {
  position: sticky !important;
  z-index: 9 !important;
  top: 78px !important;
  background: rgba(255,244,215,.98) !important;
  box-shadow: 0 4px 12px rgba(57,32,18,.12) !important;
}
body.black-flag-product .wallet-head {
  min-height: 88px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bf-line) !important;
  background: rgba(255,244,215,.94) !important;
}
body.black-flag-product .account-balance {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--bf-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.black-flag-product .account-balance small { color: var(--bf-ink-soft) !important; font-size: 12px !important; font-weight: 900 !important; }
body.black-flag-product .account-balance strong { color: var(--bf-ink) !important; font-size: 30px !important; }
body.black-flag-product .wallet-history-button {
  min-height: 42px !important;
  padding: 0 14px !important;
  border: 2px solid #8a542e !important;
  border-radius: 13px !important;
  color: var(--bf-ink) !important;
  background: #efd29d !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
}
body.black-flag-product .wallet-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-bottom: 1px solid var(--bf-line) !important;
}
body.black-flag-product .wallet-tabs button {
  min-height: 52px !important;
  border: 0 !important;
  border-bottom: 4px solid transparent !important;
  color: var(--bf-ink-soft) !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
}
body.black-flag-product .wallet-tabs button.active { border-bottom-color: var(--bf-sea) !important; color: var(--bf-sea-dark) !important; }
body.black-flag-product .wallet-page { padding: 0 !important; }
body.black-flag-product .wallet-page > h3 { margin: 18px 18px 0 !important; color: var(--bf-wood-dark) !important; font: 1000 22px/1 Georgia, serif !important; }
body.black-flag-product .reward-search { display: grid !important; gap: 6px !important; margin: 16px !important; color: var(--bf-ink-soft) !important; font-size: 12px !important; font-weight: 1000 !important; }
body.black-flag-product .reward-search input {
  min-height: 50px !important;
  padding: 0 14px !important;
  border: 2px solid #ad774d !important;
  border-radius: 14px !important;
  outline: 0 !important;
  color: var(--bf-ink) !important;
  background: #fff5d8 !important;
  font-size: 15px !important;
}

body.black-flag-product .coin-package-card {
  min-height: 158px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  text-align: center !important;
}
body.black-flag-product .coin-package-card::before {
  content: "C" !important;
  display: grid !important;
  width: 52px !important;
  height: 52px !important;
  place-items: center !important;
  border: 3px solid #bd7927 !important;
  border-radius: 50% !important;
  color: #6a3e0c !important;
  background: linear-gradient(145deg, #ffe883, #f5b82f) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.58), 0 5px 12px rgba(103,60,18,.18) !important;
  font-size: 20px !important;
  font-weight: 1000 !important;
}
body.black-flag-product .coin-package-card strong { font-size: 16px !important; }
body.black-flag-product .coin-package-card .store-card-price { margin-top: 0 !important; }

/* Profile is one focused page: photo, name, save, logout. */
body.black-flag-product .profile-editor[open] { display: block !important; }
body.black-flag-product .profile-editor form {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding: 0 !important;
  color: var(--bf-ink) !important;
  background: transparent !important;
}
body.black-flag-product .profile-editor-body {
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 24px !important;
  padding: clamp(34px, 8vh, 90px) 24px 24px !important;
  overflow-y: auto !important;
}
body.black-flag-product .profile-photo-picker { display: grid !important; justify-items: center !important; gap: 10px !important; cursor: pointer; }
body.black-flag-product .profile-photo-preview {
  display: grid !important;
  width: clamp(124px, 26vw, 180px) !important;
  height: clamp(124px, 26vw, 180px) !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 5px solid #a96d3b !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: radial-gradient(circle at 35% 28%, #7cecdf, #197f9c 58%, #174052) !important;
  box-shadow: var(--bf-shadow) !important;
  font-size: 42px !important;
  font-weight: 1000 !important;
}
body.black-flag-product .profile-photo-picker > b { color: var(--bf-sea-dark) !important; font-size: 12px !important; }
body.black-flag-product .profile-name-field { position: relative !important; width: min(520px, 100%) !important; display: grid !important; gap: 7px !important; color: var(--bf-wood-dark) !important; font-size: 12px !important; font-weight: 1000 !important; }
body.black-flag-product .profile-name-field input { min-height: 58px !important; padding: 0 55px 0 15px !important; border: 2px solid #a66b3e !important; border-radius: 15px !important; outline: 0 !important; color: var(--bf-ink) !important; background: #fff5d8 !important; font-size: 17px !important; }
body.black-flag-product .profile-name-field small { position: absolute !important; right: 12px !important; bottom: 20px !important; color: var(--bf-ink-soft) !important; }
body.black-flag-product .profile-voyage,
body.black-flag-product .profile-photo-actions { display: none !important; }
body.black-flag-product #profileEditorStatus { width: min(520px, 100%) !important; margin: 0 !important; color: var(--bf-danger) !important; font-size: 12px !important; text-align: center !important; }
body.black-flag-product .profile-editor form > footer {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr !important;
  gap: 10px !important;
  padding: 12px 18px max(14px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--bf-line) !important;
  background: rgba(255,242,208,.96) !important;
}
body.black-flag-product #profileEditorLogout { min-height: 54px !important; border: 2px solid #9c5648 !important; border-radius: 15px !important; color: #8f352d !important; background: #f5d3bd !important; font-size: 12px !important; font-weight: 1000 !important; }
body.black-flag-product #profileEditorSave { width: 100% !important; }

/* Settings page */
body.black-flag-product .mobile-settings-panel {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.black-flag-product .mobile-settings-list { min-height: 0 !important; display: grid !important; align-content: start !important; gap: 12px !important; padding: 20px !important; overflow-y: auto !important; }
body.black-flag-product :is(.mobile-setting-toggle, .mobile-quality-setting, .mobile-performance-card) { padding: 16px !important; border: 2px solid #ae764a !important; border-radius: 17px !important; color: var(--bf-ink) !important; background: #fff0c8 !important; box-shadow: 0 5px 14px rgba(76,43,24,.12) !important; }
body.black-flag-product .mobile-settings-panel > footer { display: grid !important; gap: 8px !important; padding: 12px 18px max(14px, env(safe-area-inset-bottom)) !important; background: rgba(255,242,208,.96) !important; }

/* Store details and checkout become pages. */
body.black-flag-product :is(.store-detail-dialog, .reward-checkout)[open] { display: block !important; }
body.black-flag-product :is(.store-detail-dialog, .reward-checkout) form {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  padding: 0 20px max(20px, env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  color: var(--bf-ink) !important;
  background: transparent !important;
}
body.black-flag-product :is(.store-detail-dialog, .reward-checkout) form > header { margin: 0 -20px !important; flex: 0 0 auto !important; }
body.black-flag-product .store-detail-preview { min-height: 280px !important; display: grid !important; place-items: center !important; margin-top: 22px !important; border: 2px solid #a97044 !important; border-radius: 24px !important; background: rgba(255,247,222,.72) !important; }
body.black-flag-product .store-detail-preview img { max-width: 84% !important; max-height: 260px !important; object-fit: contain !important; }
body.black-flag-product #storeDetailCopy { color: var(--bf-ink-soft) !important; font-size: 15px !important; line-height: 1.5 !important; text-align: center !important; }
body.black-flag-product #storeDetailAction { width: 100% !important; margin-top: auto !important; }

/* Gameplay prompts share the cozy language without changing gameplay mechanics. */
body.black-flag-product :is(.spot-prompt, .cast-status, .pull-card, .reel-card, .result-card,
  .respawn-panel, .boss-awards, .level-up-badge, .photo-viewer) {
  border: 2px solid #8d552d !important;
  border-radius: 20px !important;
  color: var(--bf-ink) !important;
  background: linear-gradient(180deg, rgba(255,246,218,.98), rgba(228,199,148,.98)) !important;
  background-image: none !important;
  box-shadow: inset 0 2px rgba(255,255,255,.55), 0 14px 38px rgba(37,20,11,.3) !important;
  text-shadow: none !important;
}
body.black-flag-product .spot-prompt { padding: 15px !important; }
body.black-flag-product .spot-copy :is(strong, p, span) { color: var(--bf-ink) !important; }
body.black-flag-product .spot-copy small { color: var(--bf-sea) !important; }
body.black-flag-product .fishing-offer { z-index: 700 !important; }
body.black-flag-product .pull-card { width: min(520px, calc(100% - 32px)) !important; padding: 24px !important; }
body.black-flag-product .reel-panel { background: rgba(31, 20, 12, .72) !important; }
body.black-flag-product .reel-card { width: min(680px, calc(100% - 24px)) !important; max-height: calc(100% - 24px) !important; padding: 18px !important; overflow: auto !important; }
body.black-flag-product .reel-card :is(h2, p, strong, span) { color: var(--bf-ink) !important; }
body.black-flag-product .result-modal,
body.black-flag-product .level-up-celebration,
body.black-flag-product .boss-defeat-banner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.black-flag-product .result-modal { display: grid !important; place-items: center !important; padding: 20px !important; background: rgba(36, 22, 13, .72) !important; }
body.black-flag-product .result-card { width: 100% !important; max-width: 520px !important; padding: 28px 22px !important; }
body.black-flag-product .respawn-panel,
body.black-flag-product .boss-awards {
  position: absolute !important;
  z-index: 980 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(rgba(255,246,218,.94), rgba(228,199,148,.98)),
    url("environment/cozy-harbor-portrait-v1.png") center / cover no-repeat !important;
}
body.black-flag-product .respawn-panel[hidden],
body.black-flag-product .boss-awards[hidden] { display: none !important; }
body.black-flag-product .level-up-badge { min-width: min(420px, calc(100% - 32px)) !important; padding: 32px !important; }

body.black-flag-product .toast,
body.black-flag-product .announcement-toast,
body.black-flag-product .mobile-connection-banner,
body.black-flag-product .mobile-update-banner {
  border: 2px solid #8d552d !important;
  border-radius: 15px !important;
  color: var(--bf-ink) !important;
  background: rgba(255,241,205,.97) !important;
  box-shadow: var(--bf-shadow) !important;
  text-shadow: none !important;
}

/* HUD identity and popup chrome use the same warm palette while gameplay placement stays intact. */
body.black-flag-product :is(.identity-card, .phase-badge, .world-event, .sonar,
  .sonar-legend, .chat-size-toggle, .chat-open-button, #chatForm, .weapon-mode-button,
  .coordinate-chip) {
  border-color: rgba(111, 65, 34, .78) !important;
  color: var(--bf-ink) !important;
  background: rgba(255,242,207,.9) !important;
  box-shadow: 0 6px 17px rgba(44,25,14,.18) !important;
  text-shadow: none !important;
}

/* v0.62 interaction pass: every lobby control opens a real visible page. */
body.black-flag-product:has(#mobileProductOnboarding:not([hidden])) :is(
  .side-drawer:not([hidden]), .profile-editor[open], .password-change-dialog[open],
  .store-detail-dialog[open], .reward-checkout[open], .coin-top-up-confirm[open]
) { visibility: visible !important; z-index: 1200 !important; }

body.black-flag-product .black-flag-create-dialog {
  width: min(420px, calc(100% - 32px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 2px solid #9b6032 !important;
  border-radius: 22px !important;
  color: var(--bf-ink) !important;
  background: #fff2cc !important;
  box-shadow: 0 24px 70px rgba(24,14,8,.48) !important;
}
body.black-flag-product .black-flag-create-dialog::backdrop { background: rgba(10,17,17,.68) !important; backdrop-filter: blur(5px); }
body.black-flag-product .black-flag-create-dialog form { display: grid !important; gap: 12px !important; padding: 24px !important; text-align: center !important; }
body.black-flag-product .black-flag-create-dialog small { color: var(--bf-sea) !important; font-size: 12px !important; font-weight: 1000 !important; letter-spacing: .1em !important; }
body.black-flag-product .black-flag-create-dialog h2 { margin: 0 !important; color: var(--bf-ink) !important; font: 1000 28px/1.08 Georgia, serif !important; }
body.black-flag-product .black-flag-create-dialog p { margin: 0 0 6px !important; color: var(--bf-ink-soft) !important; font-size: 15px !important; }
body.black-flag-product .black-flag-create-dialog form > div { display: grid !important; grid-template-columns: 1fr 1.2fr !important; gap: 10px !important; }
body.black-flag-product .black-flag-create-dialog button { min-height: 50px !important; border: 2px solid #9c693e !important; border-radius: 14px !important; color: var(--bf-ink) !important; background: #ead0a0 !important; font-size: 12px !important; font-weight: 1000 !important; }

body.black-flag-product .black-flag-lobby-wallet small,
body.black-flag-product #coinWallet small { display: none !important; }
body.black-flag-product .black-flag-lobby-wallet b { min-width: 0 !important; max-width: 150px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.black-flag-product .black-flag-lobby-loadout b { font-size: 14px !important; line-height: 1.15 !important; }
body.black-flag-product .black-flag-reward-action { position: relative !important; }
body.black-flag-product .black-flag-reward-action em {
  position: absolute !important; top: 5px !important; right: 5px !important;
  min-width: 23px !important; height: 23px !important; display: grid !important; place-items: center !important;
  padding: 0 6px !important; border: 2px solid #fff0c8 !important; border-radius: 999px !important;
  color: #fff !important; background: #d3483e !important; box-shadow: 0 3px 7px rgba(62,18,12,.24) !important;
  font-size: 12px !important; font-style: normal !important; font-weight: 1000 !important;
}
body.black-flag-product .black-flag-reward-action em[hidden] { display: none !important; }
body.black-flag-product .black-flag-lobby-chat > header { grid-template-columns: 1fr auto !important; }
body.black-flag-product .black-flag-lobby-chat > header > b { color: var(--bf-ink) !important; font-size: 16px !important; letter-spacing: .03em !important; }
body.black-flag-product #blackFlagLobbyOnline { grid-column: 2 !important; color: #287959 !important; font-size: 12px !important; }
body.black-flag-product .black-flag-lobby-chat-message:not(.system) { display: grid !important; gap: 3px !important; }

/* Bare camera slider means exactly a track and thumb: no warm box or frame. */
body.black-flag-product #cameraZoomControl.zoom-control {
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.black-flag-product #cameraZoomControl.zoom-control::before { content: none !important; }
body.black-flag-product #cameraZoomControl.zoom-control input {
  padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
}

/* Compact readable gameplay identity and one Coin control. */
body.black-flag-product .identity-card { padding-top: 10px !important; padding-bottom: 10px !important; }
body.black-flag-product .identity-copy > span { color: #d8f5f4 !important; font-size: 12px !important; text-shadow: none !important; }
body.black-flag-product #coinWallet {
  width: auto !important; min-width: 92px !important; max-width: 154px !important; height: 34px !important;
  justify-content: flex-end !important; gap: 7px !important; padding: 0 5px 0 12px !important;
  border: 2px solid #8c552a !important; border-radius: 999px !important;
  color: var(--bf-ink) !important; background: rgba(255,240,200,.97) !important;
  box-shadow: 0 5px 13px rgba(43,24,12,.22) !important;
}
body.black-flag-product #coinWallet b { min-width: 0 !important; overflow: hidden !important; color: var(--bf-ink) !important; font-size: 14px !important; text-overflow: ellipsis !important; text-shadow: none !important; white-space: nowrap !important; }
body.black-flag-product #coinWallet span { flex: 0 0 24px !important; width: 24px !important; height: 24px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; color: #5a370e !important; background: var(--bf-gold) !important; font-size: 12px !important; font-weight: 1000 !important; }
body.black-flag-product #coinWallet::before,
body.black-flag-product #coinWallet::after { content: none !important; }

/* Game chat is a real button beside Voice. The panel only exists after it is tapped. */
body.black-flag-product .game-chat-button { position: relative !important; }
body.black-flag-product .game-chat-button[hidden] { display: none !important; }
body.black-flag-product .game-chat-button .chat-icon { color: #efffff !important; background: linear-gradient(145deg,#39bfc9,#116c82) !important; }
body.black-flag-product .game-chat-button em {
  position: absolute !important; top: -5px !important; right: -5px !important;
  min-width: 22px !important; height: 22px !important; display: grid !important; place-items: center !important;
  padding: 0 5px !important; border: 2px solid #fff !important; border-radius: 999px !important;
  color: #fff !important; background: #e23b3b !important; font-size: 12px !important; font-style: normal !important; font-weight: 1000 !important;
}
body.black-flag-product .game-chat-button em[hidden] { display: none !important; }
body.black-flag-product #chatPanel[hidden] { display: none !important; }
body.black-flag-product #chatPanel:not([hidden]) {
  position: absolute !important; z-index: 740 !important;
  top: max(166px, calc(env(safe-area-inset-top) + 150px)) !important;
  left: max(14px, env(safe-area-inset-left)) !important; right: auto !important; bottom: auto !important;
  width: min(370px, calc(100% - 28px)) !important; height: min(52vh, 500px) !important;
  display: grid !important; grid-template-rows: 52px minmax(0, 1fr) auto auto auto !important;
  overflow: hidden !important; border: 2px solid rgba(91,53,29,.82) !important; border-radius: 18px !important;
  color: var(--bf-ink) !important; background: rgba(255,246,218,.98) !important;
  box-shadow: 0 16px 40px rgba(30,17,10,.28) !important; backdrop-filter: none !important;
}
body.black-flag-product #chatPanel > header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  height: 52px !important; padding: 0 8px 0 15px !important; border-bottom: 1px solid var(--bf-line) !important;
  color: var(--bf-ink) !important; background: rgba(224,190,132,.58) !important;
}
body.black-flag-product #chatPanel > header > b { font-size: 15px !important; letter-spacing: .04em !important; }
body.black-flag-product #chatPanel .chat-size-toggle {
  position: static !important; width: 40px !important; min-width: 40px !important; height: 40px !important;
  border: 0 !important; border-radius: 12px !important; color: var(--bf-ink) !important;
  background: rgba(255,255,255,.5) !important; box-shadow: none !important; font-size: 24px !important;
}
body.black-flag-product #chatPanel .chat-log { min-height: 0 !important; overflow-y: auto !important; padding: 11px !important; }
body.black-flag-product #chatPanel .chat-message {
  display: grid !important; grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important; gap: 2px 8px !important; margin: 0 0 10px !important;
  padding: 0 !important; border: 0 !important; color: var(--bf-ink) !important; background: transparent !important;
  font-size: 13px !important; line-height: 1.35 !important; text-shadow: none !important;
}
body.black-flag-product #chatPanel .chat-portrait { grid-row: 1 / 3 !important; display: grid !important; width: 34px !important; height: 34px !important; place-items: center !important; border-radius: 50% !important; color: #fff !important; background: var(--bf-sea) !important; font-size: 13px !important; font-style: normal !important; font-weight: 1000 !important; }
body.black-flag-product #chatPanel .chat-message > b { grid-column: 2 !important; color: var(--bf-sea-dark) !important; font-size: 12px !important; }
body.black-flag-product #chatPanel .chat-message > b::after { content: none !important; }
body.black-flag-product #chatPanel .chat-content { grid-column: 2 !important; min-width: 0 !important; padding: 8px 10px !important; border-radius: 4px 13px 13px 13px !important; color: var(--bf-ink) !important; background: rgba(255,255,255,.64) !important; overflow-wrap: anywhere !important; }
body.black-flag-product #chatPanel .chat-message.system .chat-content { background: rgba(220,190,136,.35) !important; }
body.black-flag-product #chatPanel .chat-actions { grid-column: 2 !important; }
body.black-flag-product #chatPanel .chat-channels { display: flex !important; gap: 6px !important; padding: 6px 9px !important; border-top: 1px solid var(--bf-line) !important; }
body.black-flag-product #chatPanel .chat-channels button { min-height: 34px !important; padding: 0 11px !important; border: 0 !important; border-radius: 999px !important; color: var(--bf-ink-soft) !important; background: rgba(210,176,118,.38) !important; font-size: 12px !important; font-weight: 900 !important; }
body.black-flag-product #chatPanel .chat-channels button.active { color: #fff !important; background: var(--bf-sea) !important; }
body.black-flag-product #chatForm {
  min-height: 58px !important; display: grid !important; grid-template-columns: minmax(0,1fr) 48px 64px !important;
  gap: 6px !important; padding: 7px !important; border: 0 !important; border-top: 1px solid var(--bf-line) !important;
  background: rgba(255,244,214,.98) !important; box-shadow: none !important;
}
body.black-flag-product #chatForm input { min-width: 0 !important; height: 44px !important; padding: 0 11px !important; border: 1px solid rgba(95,57,31,.38) !important; border-radius: 12px !important; color: var(--bf-ink) !important; background: rgba(255,255,255,.78) !important; font-size: 13px !important; }
body.black-flag-product #chatForm button { min-width: 0 !important; height: 44px !important; padding: 0 7px !important; border: 0 !important; border-radius: 11px !important; color: #fff !important; background: var(--bf-sea) !important; font-size: 12px !important; font-weight: 1000 !important; }

/* Clean account settings and password page. */
body.black-flag-product .profile-account-settings { width: min(520px, 100%) !important; display: grid !important; gap: 13px !important; }
body.black-flag-product .profile-account-settings label { display: grid !important; gap: 7px !important; color: var(--bf-wood-dark) !important; font-size: 12px !important; font-weight: 1000 !important; }
body.black-flag-product .profile-account-settings :is(input, select) { width: 100% !important; min-height: 54px !important; padding: 0 14px !important; border: 2px solid #a66b3e !important; border-radius: 14px !important; outline: 0 !important; color: var(--bf-ink) !important; background: #fff5d8 !important; font-size: 15px !important; }
body.black-flag-product #profileEmail { opacity: .76 !important; }
body.black-flag-product #profileChangePassword { min-height: 50px !important; border: 2px solid #8a542e !important; border-radius: 14px !important; color: var(--bf-ink) !important; background: #efd29d !important; font-size: 12px !important; font-weight: 1000 !important; }
body.black-flag-product #profileEditorLogout { box-shadow: none !important; text-shadow: none !important; outline: 0 !important; }
body.black-flag-product .password-change-dialog[open] {
  position: absolute !important; z-index: 1220 !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; color: var(--bf-ink) !important; background: linear-gradient(rgba(255,246,218,.98),rgba(235,211,168,.99)) !important;
}
body.black-flag-product .password-change-dialog::backdrop { background: rgba(14,20,18,.55) !important; }
body.black-flag-product .password-change-dialog form { height: 100% !important; display: grid !important; grid-template-rows: auto minmax(0,1fr) auto !important; }
body.black-flag-product .password-change-dialog header { min-height: 78px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px 68px !important; color: #fff2c9 !important; background: linear-gradient(180deg,#9c6238,#694026) !important; }
body.black-flag-product .password-change-dialog header h2 { margin: 0 !important; font: 1000 28px/1 Georgia,serif !important; }
body.black-flag-product #passwordChangeClose { position: absolute !important; left: 14px !important; width: 46px !important; height: 46px !important; border: 2px solid #4b2b1b !important; border-radius: 50% !important; color: #fff !important; background: #5d3925 !important; font-size: 30px !important; }
body.black-flag-product .password-change-dialog form > section { width: min(560px,100%) !important; justify-self: center !important; display: grid !important; align-content: start !important; gap: 16px !important; padding: 30px 22px !important; }
body.black-flag-product .password-change-dialog label { display: grid !important; gap: 7px !important; color: var(--bf-wood-dark) !important; font-size: 12px !important; font-weight: 1000 !important; }
body.black-flag-product .password-change-dialog label[hidden] { display: none !important; }
body.black-flag-product .password-change-dialog input { min-height: 56px !important; padding: 0 14px !important; border: 2px solid #a66b3e !important; border-radius: 14px !important; color: var(--bf-ink) !important; background: #fff5d8 !important; font-size: 16px !important; }
body.black-flag-product .password-change-dialog form > footer { padding: 12px 18px max(14px,env(safe-area-inset-bottom)) !important; background: rgba(255,242,208,.96) !important; }
body.black-flag-product #passwordChangeSubmit { width: 100% !important; }

/* Top Up always opens packages. History is a clean one-way subpage; purchase confirmation is explicit. */
body.black-flag-product #coinTopUpHistoryPage > h3 { margin: 26px 18px 4px !important; text-align: center !important; }
body.black-flag-product #coinTopUpHistory { grid-template-columns: 1fr !important; max-width: 620px !important; margin: 0 auto !important; }
body.black-flag-product #coinTopUpHistory > p { min-height: 74px !important; display: grid !important; gap: 5px !important; padding: 14px !important; border-bottom: 1px solid var(--bf-line) !important; color: var(--bf-ink) !important; background: transparent !important; }
body.black-flag-product #coinPackageGrid > button { min-height: 150px !important; display: grid !important; place-items: center !important; gap: 8px !important; padding: 16px !important; border: 2px solid #a66c3e !important; border-radius: 18px !important; color: var(--bf-ink) !important; background: linear-gradient(180deg,#fff3cf,#e3c18c) !important; box-shadow: inset 0 2px rgba(255,255,255,.6),0 6px 16px rgba(75,43,24,.16) !important; }
body.black-flag-product #coinPackageGrid > button small { font-size: 13px !important; font-weight: 900 !important; }
body.black-flag-product #coinPackageGrid > button b { font-size: 17px !important; }
body.black-flag-product .coin-top-up-confirm {
  width: min(430px,calc(100% - 32px)) !important; padding: 0 !important; overflow: hidden !important;
  border: 2px solid #9b6032 !important; border-radius: 23px !important; color: var(--bf-ink) !important;
  background: #fff2cc !important; box-shadow: 0 24px 70px rgba(24,14,8,.48) !important;
}
body.black-flag-product .coin-top-up-confirm::backdrop { background: rgba(10,17,17,.7) !important; backdrop-filter: blur(5px); }
body.black-flag-product .coin-top-up-confirm form { display: grid !important; justify-items: center !important; gap: 12px !important; padding: 24px !important; text-align: center !important; }
body.black-flag-product .coin-top-up-mark { width: 66px !important; height: 66px !important; display: grid !important; place-items: center !important; border: 3px solid #bd7927 !important; border-radius: 50% !important; color: #6a3e0c !important; background: linear-gradient(145deg,#ffe883,#f5b82f) !important; font-size: 24px !important; font-weight: 1000 !important; }
body.black-flag-product .coin-top-up-confirm h2 { margin: 0 !important; color: var(--bf-ink) !important; font: 1000 29px/1.05 Georgia,serif !important; }
body.black-flag-product .coin-top-up-confirm p { margin: 0 !important; color: var(--bf-ink-soft) !important; font-size: 15px !important; }
body.black-flag-product .coin-top-up-confirm footer { width: 100% !important; display: grid !important; grid-template-columns: 1fr 1.2fr !important; gap: 10px !important; margin-top: 8px !important; }
body.black-flag-product .coin-top-up-confirm footer button { min-height: 50px !important; border: 2px solid #9c693e !important; border-radius: 14px !important; color: var(--bf-ink) !important; background: #ead0a0 !important; font-size: 12px !important; font-weight: 1000 !important; }
body.black-flag-product .coin-top-up-confirm footer button[hidden] { display: none !important; }
body.black-flag-product .coin-top-up-confirm footer:has(button[hidden]) { grid-template-columns: 1fr !important; }

/* iPad Pro portrait: more chat, three-column catalogs, no alternate desktop composition. */
@media (min-width: 700px) {
  body.black-flag-product .black-flag-lobby-step { padding-inline: 30px !important; }
  body.black-flag-product .black-flag-lobby-layout { grid-template-rows: minmax(140px, .22fr) auto auto minmax(420px, 1fr) !important; gap: 12px !important; }
  body.black-flag-product .black-flag-lobby-portrait { width: 76px !important; height: 76px !important; }
  body.black-flag-product .black-flag-lobby-identity { margin-left: 98px !important; }
  body.black-flag-product #blackFlagStartAdventure { min-height: 72px !important; font-size: 20px !important; }
  body.black-flag-product .black-flag-lobby-loadout button { min-height: 84px !important; padding: 10px 12px !important; }
  body.black-flag-product .black-flag-lobby-loadout button { grid-template-columns: 44px minmax(0, 1fr) !important; grid-template-rows: 1fr !important; justify-items: stretch !important; text-align: left !important; }
  body.black-flag-product .black-flag-lobby-loadout button > i { width: 44px !important; height: 44px !important; }
  body.black-flag-product .black-flag-lobby-loadout b { font-size: 14px !important; }
  body.black-flag-product .black-flag-lobby-chat-message { font-size: 15px !important; }
  body.black-flag-product .store-grid,
  body.black-flag-product .ship-list,
  body.black-flag-product .reward-grid,
  body.black-flag-product .coin-package-grid,
  body.black-flag-product .reward-bag-list,
  body.black-flag-product .account-history { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; padding: 22px 26px !important; }
  body.black-flag-product :is(.ship-card, .reward-card, .coin-package-card, .bag-reward-card, .account-history article) { min-height: 230px !important; }
  body.black-flag-product .coin-package-card { min-height: 190px !important; }
  body.black-flag-product .ship-card > div:first-child,
  body.black-flag-product .ship-card > span:first-child,
  body.black-flag-product .ship-card img { min-height: 145px !important; height: 145px !important; }
}

/* Short phones keep the same portrait hierarchy and scroll only inside chat/pages. */
@media (max-height: 720px) {
  body.black-flag-product .black-flag-lobby-step { padding-top: max(8px, env(safe-area-inset-top)) !important; padding-bottom: max(7px, env(safe-area-inset-bottom)) !important; }
  body.black-flag-product .black-flag-lobby-header { min-height: 46px !important; }
  body.black-flag-product .black-flag-lobby-layout { grid-template-rows: minmax(86px, .18fr) auto auto minmax(180px, 1fr) !important; gap: 5px !important; }
  body.black-flag-product .black-flag-lobby-portrait { width: 48px !important; height: 48px !important; }
  body.black-flag-product .black-flag-lobby-identity { margin-left: 64px !important; margin-top: 3px !important; }
  body.black-flag-product .black-flag-lobby-identity h1 { font-size: 22px !important; }
  body.black-flag-product #blackFlagStartAdventure { min-height: 52px !important; }
  body.black-flag-product .black-flag-lobby-loadout button { min-height: 58px !important; }
  body.black-flag-product .black-flag-lobby-chat > header { min-height: 48px !important; padding-block: 7px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.black-flag-product *,
  body.black-flag-product *::before,
  body.black-flag-product *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* v0.64.0 — product artwork, compact ledgers, saved checkout contacts, and canvas-contained HUD. */
body.black-flag-product .black-flag-lobby-identity {
  grid-column: 1 / -1 !important;
  position: relative !important;
  inset: auto !important;
  max-width: min(62vw, 300px) !important;
  margin-left: 70px !important;
}
body.black-flag-product .black-flag-lobby-portrait {
  grid-column: 1 / -1 !important;
  position: relative !important;
  inset: auto !important;
}
body.black-flag-product .black-flag-lobby-identity h1 {
  max-width: 100% !important;
  margin: 1px 0 4px !important;
  font-size: clamp(20px, 5vw, 30px) !important;
}
body.black-flag-product .black-flag-lobby-identity > b { font-size: 12px !important; }
body.black-flag-product .black-flag-lobby-xp { width: min(190px, 78%) !important; margin-top: 5px !important; }

body.black-flag-product .reward-product-image {
  width: 100% !important;
  aspect-ratio: 1 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: rgba(255,250,233,.72) !important;
}
body.black-flag-product .reward-product-image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}
body.black-flag-product .reward-card { min-height: 0 !important; }
body.black-flag-product .reward-card[data-buy-reward] { cursor: pointer !important; }
body.black-flag-product .reward-card[data-buy-reward]:focus-visible {
  outline: 4px solid var(--bf-mint) !important;
  outline-offset: 2px !important;
}
body.black-flag-product .reward-card > .reward-product-image {
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}
body.black-flag-product .reward-card-price {
  min-height: 42px !important;
  display: grid !important;
  place-items: center !important;
  margin-top: auto !important;
  border-radius: 11px !important;
  color: #fff7df !important;
  background: linear-gradient(180deg, #aa531a, #6f2b11) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.18) !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
}

body.black-flag-product .reward-bag-list,
body.black-flag-product .account-history,
body.black-flag-product #coinTopUpHistory {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  padding: 16px 18px 28px !important;
}
body.black-flag-product :is(.bag-order, .ledger-row) {
  width: 100% !important;
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 13px !important;
  padding: 11px !important;
  border: 1px solid rgba(136,83,43,.35) !important;
  border-radius: 15px !important;
  color: var(--bf-ink) !important;
  background: rgba(255,248,223,.82) !important;
  box-shadow: 0 4px 12px rgba(64,37,20,.1) !important;
}
body.black-flag-product .bag-order .reward-product-image { width: 74px !important; height: 74px !important; }
body.black-flag-product .bag-order > div { min-width: 0 !important; display: grid !important; gap: 5px !important; }
body.black-flag-product .bag-order b { font-size: 15px !important; }
body.black-flag-product .bag-order small,
body.black-flag-product .ledger-row small { color: var(--bf-ink-soft) !important; font-size: 12px !important; }
body.black-flag-product .bag-order code { width: fit-content !important; max-width: 100% !important; padding: 6px 8px !important; overflow: hidden !important; border-radius: 8px !important; color: #e9ffff !important; background: #0b5560 !important; text-overflow: ellipsis !important; }
body.black-flag-product .ledger-row {
  min-height: 62px !important;
  grid-template-columns: 34px minmax(0,1fr) auto !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
}
body.black-flag-product .ledger-mark { width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important; border-radius: 50% !important; color: #fff !important; background: #27865e !important; font-size: 16px !important; font-weight: 1000 !important; }
body.black-flag-product .ledger-mark.debit { background: #b94c45 !important; }
body.black-flag-product .ledger-row > div { min-width: 0 !important; display: grid !important; gap: 2px !important; }
body.black-flag-product .ledger-row b { overflow: hidden !important; font-size: 13px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.black-flag-product .ledger-row small { font-size: 11px !important; }
body.black-flag-product .ledger-row > strong { font-size: 14px !important; white-space: nowrap !important; }
body.black-flag-product .wallet-history-button.active { color: #fff7df !important; background: var(--bf-sea) !important; border-color: var(--bf-sea-dark) !important; }
body.black-flag-product #coinDrawer[data-page="history"] .wallet-tabs button { border-bottom-color: transparent !important; color: var(--bf-ink-soft) !important; }

body.black-flag-product .reward-checkout form { overflow: hidden !important; }
body.black-flag-product #rewardCheckoutProduct { display: grid !important; grid-template-columns: 96px minmax(0,1fr) !important; align-items: center !important; gap: 14px !important; }
body.black-flag-product #rewardCheckoutProduct .reward-product-image { width: 96px !important; height: 96px !important; }
body.black-flag-product #rewardContactFields {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 2px 12px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}
body.black-flag-product .reward-contact-form { display: grid !important; gap: 8px !important; }
body.black-flag-product .save-contact-button {
  min-height: 46px !important;
  border: 2px solid var(--bf-sea-dark) !important;
  border-radius: 13px !important;
  color: #fff7df !important;
  background: var(--bf-sea) !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
}
body.black-flag-product .saved-contact-section { margin-top: 18px !important; }
body.black-flag-product .saved-contact-section > h3 {
  margin: 0 0 9px !important;
  color: var(--bf-wood-dark) !important;
  font: 1000 17px/1 Georgia, serif !important;
}
body.black-flag-product .saved-contact-list { display: grid !important; gap: 9px !important; }
body.black-flag-product .saved-contact-row {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 8px !important;
  padding: 8px !important;
  border: 2px solid #bb8556 !important;
  border-radius: 14px !important;
  background: rgba(255,248,225,.86) !important;
}
body.black-flag-product .saved-contact-row.selected { border-color: var(--bf-sea) !important; box-shadow: 0 0 0 2px rgba(18,107,121,.16) !important; }
body.black-flag-product .saved-contact-select {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
  padding: 4px 6px !important;
  border: 0 !important;
  color: var(--bf-ink) !important;
  background: transparent !important;
  text-align: left !important;
}
body.black-flag-product .saved-contact-select :is(b, small, span) { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.black-flag-product .saved-contact-select b { font-size: 14px !important; }
body.black-flag-product .saved-contact-select small,
body.black-flag-product .saved-contact-select span { color: var(--bf-ink-soft) !important; font-size: 12px !important; }
body.black-flag-product .saved-contact-select em { color: var(--bf-sea) !important; font-size: 11px !important; font-style: normal !important; font-weight: 1000 !important; }
body.black-flag-product .saved-contact-row > footer { display: grid !important; align-content: center !important; gap: 6px !important; }
body.black-flag-product .saved-contact-row > footer button {
  min-width: 60px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border: 1px solid #a16b42 !important;
  border-radius: 9px !important;
  color: var(--bf-ink) !important;
  background: #edd3a2 !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
}
body.black-flag-product .saved-contact-row > footer button:last-child { color: #8e2925 !important; }
body.black-flag-product .reward-checkout form > footer {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1.25fr !important;
  gap: 10px !important;
  margin: auto 0 0 !important;
  padding: 12px 0 max(2px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  color: var(--bf-ink) !important;
  background: transparent !important;
}
body.black-flag-product .reward-checkout form > footer button { min-height: 54px !important; border-radius: 14px !important; }

body.black-flag-product .store-detail-preview { min-height: min(42vh, 390px) !important; }
body.black-flag-product .store-detail-preview > img {
  width: 94% !important;
  height: 94% !important;
  max-width: 430px !important;
  max-height: 350px !important;
  object-fit: contain !important;
}

body.black-flag-product .store-equip-dialog {
  z-index: 1320 !important;
  width: min(430px, calc(100% - 28px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 2px solid #9b6032 !important;
  border-radius: 22px !important;
  color: var(--bf-ink) !important;
  background: #fff2cc !important;
  box-shadow: 0 24px 70px rgba(24,14,8,.52) !important;
}
body.black-flag-product .store-equip-dialog::backdrop { background: rgba(8,19,20,.7) !important; backdrop-filter: blur(5px); }
body.black-flag-product .store-equip-dialog form { display: grid !important; justify-items: center !important; gap: 12px !important; padding: 22px !important; text-align: center !important; }
body.black-flag-product .store-equip-dialog img { width: 190px !important; height: 150px !important; object-fit: contain !important; }
body.black-flag-product .store-equip-dialog h2 { margin: 0 !important; font: 1000 27px/1.08 Georgia,serif !important; }
body.black-flag-product .store-equip-dialog p { margin: 0 !important; color: var(--bf-ink-soft) !important; font-size: 15px !important; }
body.black-flag-product .store-equip-dialog footer { width: 100% !important; display: grid !important; grid-template-columns: 1fr 1.3fr !important; gap: 9px !important; margin-top: 7px !important; }
body.black-flag-product .store-equip-dialog button { min-height: 50px !important; border: 2px solid #9b6032 !important; border-radius: 14px !important; color: var(--bf-ink) !important; background: #ead0a0 !important; font-size: 12px !important; font-weight: 1000 !important; }

body.black-flag-product #chatPanel:not([hidden]) {
  top: max(146px, calc(env(safe-area-inset-top) + 132px)) !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  height: auto !important;
  max-height: none !important;
  grid-template-rows: 52px minmax(0,1fr) auto 58px !important;
}
body.black-flag-product #chatPanel .chat-channels,
body.black-flag-product #chatPhotoButton { display: none !important; }
body.black-flag-product #chatLog {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
}
body.black-flag-product #chatForm {
  width: 100% !important;
  grid-template-columns: minmax(0,1fr) 68px !important;
  align-self: stretch !important;
}
body.black-flag-product #chatForm > #chatInput { grid-column: 1 !important; }
body.black-flag-product #chatForm > button[type="submit"] { grid-column: 2 !important; }

body.black-flag-product .identity-card {
  width: min(345px, calc(100% - 18px)) !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) minmax(104px,auto) !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
body.black-flag-product .identity-copy strong { color: #183741 !important; font-size: 12px !important; text-shadow: none !important; }
body.black-flag-product .identity-copy > span { color: #294c52 !important; font-size: 10px !important; }
body.black-flag-product #coinWallet {
  position: static !important;
  inset: auto !important;
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: end !important;
  min-width: 104px !important;
  max-width: 132px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transform: none !important;
}
body.black-flag-product #coinWallet b { flex: 1 1 auto !important; max-width: 78px !important; font-size: clamp(12px, 3.2vw, 14px) !important; text-align: right !important; }
body.black-flag-product #coinWallet span { flex: 0 0 24px !important; }

@media (min-width: 700px) {
  body.black-flag-product .black-flag-lobby-identity { margin-left: 91px !important; max-width: 390px !important; }
  body.black-flag-product .black-flag-lobby-identity h1 { font-size: 31px !important; }
  body.black-flag-product .black-flag-lobby-xp { width: 230px !important; }
  body.black-flag-product .reward-bag-list,
  body.black-flag-product .account-history,
  body.black-flag-product #coinTopUpHistory { grid-template-columns: 1fr !important; gap: 12px !important; padding: 22px 26px !important; }
  body.black-flag-product .bag-order { min-height: 104px !important; }
  body.black-flag-product .ledger-row { min-height: 66px !important; }
  body.black-flag-product #chatPanel:not([hidden]) { width: min(440px, calc(100% - 36px)) !important; }
}
@media (min-width: 700px) and (max-height: 720px) {
  body.black-flag-product .black-flag-lobby-identity { margin-left: 64px !important; }
}

/* v0.65.0: Harbor-ledger economy, tactile top-up cards and compact phone HUD. */
body.black-flag-product .coin-package-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 14px 16px 28px !important;
}
body.black-flag-product .coin-package-grid > .coin-package-card {
  min-width: 0 !important;
  min-height: 220px !important;
  height: 220px !important;
  display: grid !important;
  grid-template-rows: 102px 32px 44px !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 2px !important;
  padding: 12px 10px 10px !important;
  overflow: hidden !important;
  border: 2px solid #a66c3e !important;
  border-radius: 18px !important;
  color: var(--bf-ink) !important;
  background: linear-gradient(180deg, #fff5d6, #e9c98f) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.72), 0 6px 15px rgba(75,43,24,.14) !important;
  cursor: pointer !important;
}
body.black-flag-product .coin-package-grid > .coin-package-card::before { content: none !important; display: none !important; }
body.black-flag-product .coin-package-card img {
  width: 104px !important;
  height: 104px !important;
  display: block !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 7px rgba(94,52,11,.2)) !important;
}
body.black-flag-product .coin-package-value {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}
body.black-flag-product .coin-package-value strong {
  color: #4c2b17 !important;
  font: 1000 24px/1 system-ui, sans-serif !important;
  letter-spacing: -.03em !important;
}
body.black-flag-product .coin-package-value i {
  width: 23px !important;
  height: 23px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 23px !important;
  border: 2px solid #fff0a0 !important;
  border-radius: 50% !important;
  color: #744000 !important;
  background: linear-gradient(180deg, #ffe774, #f4aa24) !important;
  box-shadow: inset 0 0 0 2px rgba(175,91,0,.25), 0 2px 5px rgba(75,43,24,.2) !important;
  font: 1000 10px/1 ui-monospace, monospace !important;
  font-style: normal !important;
}
body.black-flag-product .coin-package-action {
  width: 100% !important;
  min-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  align-self: end !important;
  border: 2px solid #8b562d !important;
  border-radius: 12px !important;
  color: #432512 !important;
  background: linear-gradient(180deg, #ffdb70, #f3ad36) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.52), 0 3px 0 #9e5d1e !important;
  font: 1000 14px/1 system-ui, sans-serif !important;
}
body.black-flag-product .coin-package-card:active { transform: translateY(3px) !important; }

body.black-flag-product :is(#coinHistory, #coinTopUpHistory) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 9px !important;
  padding: 14px 16px 28px !important;
}
body.black-flag-product :is(#coinHistory, #coinTopUpHistory) > .ledger-row {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 68px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 9px 11px !important;
  overflow: hidden !important;
  border: 1px solid rgba(136,83,43,.35) !important;
  border-radius: 14px !important;
  background: rgba(255,248,223,.88) !important;
  box-shadow: 0 3px 10px rgba(64,37,20,.09) !important;
}
body.black-flag-product .ledger-thumb {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: rgba(255,221,127,.46) !important;
}
body.black-flag-product .ledger-thumb img { width: 42px !important; height: 42px !important; object-fit: contain !important; }
body.black-flag-product :is(#coinHistory, #coinTopUpHistory) .ledger-row > div {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
  text-align: left !important;
}
body.black-flag-product :is(#coinHistory, #coinTopUpHistory) .ledger-row > strong {
  justify-self: end !important;
  font-size: 14px !important;
  text-align: right !important;
  white-space: nowrap !important;
}

body.black-flag-product #chatPanel:not([hidden]) {
  grid-template-rows: 52px minmax(0, 1fr) 58px !important;
  padding: 0 !important;
}
body.black-flag-product #chatPanel .chat-log {
  width: 100% !important;
  padding: 10px !important;
}
body.black-flag-product #chatPanel .chat-message.system {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 3px !important;
}
body.black-flag-product #chatPanel .chat-message.system .chat-portrait { display: none !important; }
body.black-flag-product #chatPanel .chat-message.system > b,
body.black-flag-product #chatPanel .chat-message.system .chat-content,
body.black-flag-product #chatPanel .chat-message.system .chat-actions { grid-column: 1 !important; }
body.black-flag-product #chatPanel .chat-message.system .chat-content {
  width: 100% !important;
  color: #fff7df !important;
  background: #70452f !important;
  border-radius: 11px !important;
}
body.black-flag-product #chatPanel .chat-message.system .chat-content > span { color: #fff7df !important; }
body.black-flag-product #chatPanel .chat-message.self .chat-content {
  color: #efffff !important;
  background: #176879 !important;
}
body.black-flag-product #chatPanel .chat-message.self .chat-content > span { color: #efffff !important; }
body.black-flag-product #chatForm {
  position: static !important;
  height: 58px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 7px !important;
  align-self: end !important;
  box-sizing: border-box !important;
}

body.black-flag-product .fishing-offer .spot-prompt {
  border-width: 3px !important;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--spot-color) 54%, transparent), transparent 58%),
    linear-gradient(145deg, color-mix(in srgb, var(--spot-color) 34%, #11283a), #07182a 72%) !important;
  box-shadow: inset 0 0 42px color-mix(in srgb, var(--spot-color) 24%, transparent),
    0 0 28px color-mix(in srgb, var(--spot-color) 32%, transparent) !important;
}
body.black-flag-product .fishing-session .result-modal[hidden] { display: none !important; }

@media (max-width: 520px) {
  body.black-flag-product .identity-card {
    width: min(300px, calc(100% - 130px)) !important;
    min-height: 54px !important;
    grid-template-columns: 38px minmax(68px, 1fr) 82px !important;
    gap: 6px !important;
    padding: 6px 7px !important;
  }
  body.black-flag-product .identity-card .portrait {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    transform: none !important;
  }
  body.black-flag-product .identity-copy { min-width: 0 !important; padding: 0 !important; }
  body.black-flag-product .identity-copy strong {
    display: block !important;
    overflow: hidden !important;
    font-size: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.black-flag-product #coinWallet {
    min-width: 0 !important;
    width: 82px !important;
    max-width: 82px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 5px 0 8px !important;
    gap: 4px !important;
    align-self: center !important;
  }
  body.black-flag-product #coinWallet b { max-width: 52px !important; font-size: 12px !important; }
  body.black-flag-product #coinWallet span { flex: 0 0 20px !important; width: 20px !important; height: 20px !important; font-size: 10px !important; }
  body.black-flag-product .coin-package-grid > .coin-package-card { min-height: 190px !important; height: 190px !important; grid-template-rows: 82px 28px 40px !important; padding: 8px !important; }
  body.black-flag-product .coin-package-card img { width: 80px !important; height: 80px !important; }
  body.black-flag-product .coin-package-value strong { font-size: 20px !important; }
}

/* v0.65.1: full-canvas rescue, reward-first catch result and cash-in-only Harbor. */
body.black-flag-product #respawnPanel:not([hidden]) {
  position: absolute !important;
  z-index: 1050 !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: max(26px, env(safe-area-inset-top)) 24px max(26px, env(safe-area-inset-bottom)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  translate: none !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff6df !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(181,55,59,.28), transparent 42%),
    linear-gradient(180deg, rgba(11,35,49,.98), rgba(35,18,22,.99)) !important;
  box-shadow: none !important;
}
body.black-flag-product #respawnPanel::before { display: none !important; }
body.black-flag-product #respawnPanel > :not(.vessel-loss-mark) { width: min(520px, 100%) !important; }
body.black-flag-product #respawnPanel > div:not(.vessel-loss-mark) { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
body.black-flag-product #respawnPanel :is(h2, p, small, em) { color: #fff6df !important; text-shadow: none !important; }
body.black-flag-product #respawnPanel h2 { font-size: clamp(42px, 12vw, 68px) !important; }
body.black-flag-product #respawnPanel p { font-size: 15px !important; line-height: 1.45 !important; }
body.black-flag-product #respawnPanel em { font-size: 12px !important; line-height: 1.45 !important; }

body.black-flag-product .result-card {
  width: min(520px, 100%) !important;
  display: grid !important;
  justify-items: center !important;
  gap: 10px !important;
  padding: 28px 22px !important;
  color: #fff8e1 !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,196,48,.16), transparent 42%),
    linear-gradient(180deg, #132f3d, #251711) !important;
  box-shadow: inset 0 2px rgba(255,255,255,.09), 0 18px 46px rgba(11,5,2,.48) !important;
}
body.black-flag-product .result-card .result-coin-reward {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #ffd65b !important;
  filter: drop-shadow(0 4px 12px rgba(255,166,27,.32));
}
body.black-flag-product .result-card .result-coin-reward[hidden] { display: none !important; }
body.black-flag-product #fishingResultAmount { color: #ffd65b !important; font: 1000 44px/.95 Impact, system-ui, sans-serif !important; letter-spacing: .02em !important; }
body.black-flag-product .result-coin-icon {
  width: 30px !important;
  height: 30px !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 30px !important;
  border: 2px solid #fff0a0 !important;
  border-radius: 50% !important;
  color: #744000 !important;
  background: linear-gradient(180deg, #ffe774, #f4aa24) !important;
  box-shadow: inset 0 0 0 2px rgba(175,91,0,.25), 0 3px 8px rgba(0,0,0,.26) !important;
  font: 1000 13px/1 ui-monospace, monospace !important;
  font-style: normal !important;
}
body.black-flag-product .result-card .result-fish { font-size: 52px !important; }
body.black-flag-product .result-card #fishingResultTitle {
  margin: 0 !important;
  color: #fff8e1 !important;
  font: 1000 15px/1.2 "Trebuchet MS", system-ui, sans-serif !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}
body.black-flag-product .result-card #fishingResultCopy {
  max-width: 390px !important;
  margin: 0 0 6px !important;
  color: #e8f6f5 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
body.black-flag-product #fishingResultClose {
  min-width: min(310px, 100%) !important;
  min-height: 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 15px !important;
}
body.black-flag-product #fishingResultCollectAmount { color: #3b230e !important; font-size: 18px !important; }
body.black-flag-product #fishingResultCollectAmount[hidden],
body.black-flag-product #fishingResultCollectIcon[hidden] { display: none !important; }

body.black-flag-product #dockPrompt { width: 82px !important; gap: 0 !important; }

@media (max-width: 520px) {
  body.black-flag-product #respawnPanel > div:not(.vessel-loss-mark) { grid-template-columns: 1fr !important; }
  body.black-flag-product #fishingResultAmount { font-size: 40px !important; }
}

/* v0.65.2: compact, touch-scrollable world chat with content-sized bubbles. */
body.black-flag-product #chatPanel:not([hidden]) {
  bottom: auto !important;
  height: clamp(270px, calc(100% - 460px), 390px) !important;
  max-height: 390px !important;
}
body.black-flag-product #chatPanel .chat-log {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
body.black-flag-product #chatPanel .chat-content {
  width: fit-content !important;
  max-width: 100% !important;
  justify-self: start !important;
}
body.black-flag-product #chatPanel .chat-content > span {
  display: inline !important;
  white-space: pre-wrap !important;
}
body.black-flag-product #chatPanel .chat-message.system {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
}
body.black-flag-product #chatPanel .chat-message.system .chat-content {
  width: fit-content !important;
  max-width: 100% !important;
  justify-self: start !important;
}

/* v0.65.3: borderless Level Up celebration. */
body.black-flag-product .level-up-badge {
  min-width: 0 !important;
  width: min(88vw, 590px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
@media (max-width: 600px) {
  body.black-flag-product .level-up-badge { width: min(96vw, 470px) !important; }
}

/* v0.65.4: follow-latest World Chat affordance and safe Lobby return. */
body.black-flag-product #chatNewMessage {
  position: absolute !important;
  z-index: 4 !important;
  right: 10px !important;
  bottom: 68px !important;
  min-width: 118px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  border: 2px solid #fff0a0 !important;
  border-radius: 999px !important;
  color: #fff9df !important;
  background: #176879 !important;
  box-shadow: 0 5px 14px rgba(12, 54, 65, .28) !important;
  font: 1000 12px/1 system-ui, sans-serif !important;
  letter-spacing: .03em !important;
}
body.black-flag-product #chatNewMessage[hidden] { display: none !important; }
body.black-flag-product #profileEditorLogout[data-action="lobby"] {
  border-color: #277b82 !important;
  color: #14545a !important;
  background: #d8f0e7 !important;
}

/* v0.65.5: bright, readable Fishing Spot card. */
body.black-flag-product .fishing-offer .spot-prompt {
  color: #382617 !important;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--spot-color) 24%, transparent), transparent 58%),
    linear-gradient(145deg, rgba(255, 249, 225, .99), rgba(239, 216, 169, .99) 76%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 0 32px color-mix(in srgb, var(--spot-color) 10%, transparent),
    0 12px 28px rgba(45, 28, 15, .28),
    0 0 20px color-mix(in srgb, var(--spot-color) 20%, transparent) !important;
}
body.black-flag-product .fishing-offer .spot-prompt small {
  color: color-mix(in srgb, var(--spot-color) 58%, #073c48) !important;
  text-shadow: none !important;
}
body.black-flag-product .fishing-offer .spot-prompt strong {
  color: #2f2117 !important;
  text-shadow: none !important;
}
body.black-flag-product .fishing-offer .spot-prompt span {
  color: #654c37 !important;
  border-bottom-color: rgba(101, 76, 55, .22) !important;
  text-shadow: none !important;
}
body.black-flag-product .fishing-offer #spotDescription {
  color: #574331 !important;
  text-shadow: none !important;
}

/* v0.65.6: user-selected Coin artwork across every product Coin mark. */
body.black-flag-product :is(
  .black-flag-lobby-wallet > span,
  .game-coin-button > span,
  .coin-package-value > i,
  .result-coin-icon,
  .coin-orb,
  .coin-top-up-mark,
  #cashInButton > span
) {
  border: 0 !important;
  border-radius: 50% !important;
  color: transparent !important;
  background: transparent url("items/coin-icon-v2.png?v=0.65.7") center / contain no-repeat !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 0 !important;
  overflow: hidden !important;
}
body.black-flag-product .coin-orb::after { content: none !important; display: none !important; }
body.black-flag-product .coin-package-value > i {
  width: 25px !important;
  height: 25px !important;
  flex-basis: 25px !important;
}
body.black-flag-product .result-coin-icon {
  width: 32px !important;
  height: 32px !important;
  flex-basis: 32px !important;
}