/* Private collector workspace: a Venetian trading port at sundown, kept behind
   a glassy, high-contrast interface so profile information stays effortless to read. */
body.app-section-account,
body.account-open {
  background:
    linear-gradient(180deg, #1b0d07b8 0%, #27100886 34%, #080b10e8 100%),
    url("/public/account-venice-dock.png") center top / cover fixed no-repeat #120b09 !important;
}

body.app-section-account .app-shell { position: relative; z-index: 1; }

body.app-section-account .app-shell,
body.app-section-account .market-stage,
body.app-section-account .listing-stream,
body.account-open .app-shell {
  background: transparent !important;
}

body.app-section-account .app-section-page {
  min-height: 100dvh;
  background: linear-gradient(180deg, #1e0f0a28 0%, #071016b8 100%) !important;
}

body.app-section-account .app-section-content {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  padding: 0 30px calc(150px + env(safe-area-inset-bottom)) !important;
}

body.app-section-account .profile-workspace,
body.account-open .account-workspace {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid #e1ac6373 !important;
  border-radius: 18px;
  background: linear-gradient(135deg, #120d10ed, #071116e8 56%, #17100ce8) !important;
  box-shadow: 0 28px 90px #020304b5, inset 0 1px #ffe4ae25;
  backdrop-filter: blur(15px) saturate(1.15);
}

body.app-section-account .profile-workspace {
  grid-template-columns: minmax(430px, .8fr) minmax(0, 1.2fr) !important;
}

body.app-section-account .account-hero,
body.account-open .account-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4vw, 54px) !important;
  border-bottom-color: #dfa75d61 !important;
  background:
    linear-gradient(100deg, #2a1008e8, #1b1421da 54%, #09202ae0),
    url("/public/account-venice-dock.png") center 43% / cover !important;
}

body.app-section-account .account-hero::after,
body.account-open .account-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #09070bd9, transparent 65%), radial-gradient(circle at 75% 15%, #ffd27e3b, transparent 27%);
}

body.app-section-account .account-hero > *,
body.account-open .account-hero > * { position: relative; z-index: 1; }

body.app-section-account .account-avatar-large,
body.account-open .account-avatar-large {
  border: 1px solid #ffd07c !important;
  box-shadow: 0 0 0 7px #f1a9571c, 0 18px 36px #000b;
}

body.app-section-account .account-hero p,
body.account-open .account-hero p { color: #ffd27d !important; }

body.app-section-account .account-hero h3,
body.account-open .account-hero h3 {
  color: #fff5e7 !important;
  text-shadow: 0 3px 18px #000b;
}

body.app-section-account .account-hero span,
body.account-open .account-hero span { color: #f0d6bb !important; }

body.app-section-account .account-hero > button,
body.account-open .account-hero > button {
  border-color: #ffd27d !important;
  border-radius: 999px;
  background: #180e0bb8 !important;
  color: #ffe5ae !important;
  box-shadow: 0 10px 30px #0008;
}

body.app-section-account .account-columns > section,
body.account-open .account-columns > section { border-color: #d99e5961 !important; background: linear-gradient(180deg, #0d1218bc, #0b0b0fdd); }

body.app-section-account .account-columns h3,
body.account-open .account-columns h3 { border-bottom-color: #d99e5957 !important; color: #ffe9c6 !important; background: #24150e8a; }

body.app-section-account .account-columns h3 small,
body.account-open .account-columns h3 small,
body.app-section-account .account-dialog .account-post span { color: #ffd27d !important; }

body.app-section-account .connection-row,
body.app-section-account .suggested-account,
body.app-section-account .account-dialog .account-post,
body.account-open .connection-row,
body.account-open .suggested-account,
body.account-open .account-dialog .account-post { border-bottom-color: #b8804d44 !important; }

body.app-section-account .suggested-account:hover,
body.app-section-account .account-dialog .account-post:hover,
body.account-open .suggested-account:hover,
body.account-open .account-dialog .account-post:hover { background: #f4ab5520 !important; }

body.app-section-account .account-actions,
body.account-open .account-actions { border-top-color: #d99e5957 !important; background: #0a0b0dbc; }

body.app-section-account .account-actions button,
body.app-section-account .suggested-account button,
body.account-open .account-actions button,
body.account-open .suggested-account button {
  border-color: #d49c56 !important;
  border-radius: 8px;
  background: linear-gradient(135deg, #2d170f, #15232a) !important;
  color: #ffe2ad !important;
}

body.app-section-account .listing-management,
body.account-open .listing-management {
  border-color: #dfaa6470 !important;
  border-radius: 14px;
  background: linear-gradient(135deg, #130f12ed, #0b1a20e6) !important;
  box-shadow: inset 0 1px #ffdb9f18, 0 18px 48px #0008;
}

body.app-section-account .managed-listing-card,
body.account-open .managed-listing-card { border-color: #bd864d62 !important; border-radius: 10px; background: #0b1116d9 !important; }

/* Current Account pages use the profile workspace.  These selectors keep every
   part of that page in the same polished Venetian glass treatment. */
body.app-section-account .profile-hero,
body.account-open .profile-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px) !important;
  border-bottom-color: #dfa75d61 !important;
  background: linear-gradient(100deg, #250f09e8, #1d1420d8 55%, #071b23e0), url("/public/account-venice-dock.png") center 43% / cover !important;
}

body.app-section-account .profile-hero::after,
body.account-open .profile-hero::after { position:absolute; inset:0; content:""; pointer-events:none; background:linear-gradient(90deg,#09070bd9,transparent 66%),radial-gradient(circle at 75% 15%,#ffd27e3b,transparent 28%); }
body.app-section-account .profile-hero > *,
body.account-open .profile-hero > * { position:relative; z-index:1; }
body.app-section-account .profile-hero .account-avatar,
body.account-open .profile-hero .account-avatar { border-color:#ffd27d !important; box-shadow:0 0 0 7px #f1a9571c,0 18px 36px #000b; }
body.app-section-account .profile-kicker,
body.account-open .profile-kicker { color:#ffd27d !important; }
body.app-section-account .profile-hero h3,
body.account-open .profile-hero h3 { color:#fff5e7 !important; text-shadow:0 3px 18px #000b; }
body.app-section-account .profile-hero > div > span,
body.account-open .profile-hero > div > span { color:#f0d6bb !important; }
body.app-section-account .profile-hero > button,
body.account-open .profile-hero > button { border-color:#ffd27d !important; border-radius:999px; background:#180e0bb8 !important; color:#ffe5ae !important; box-shadow:0 10px 30px #0008; }
body.app-section-account .profile-hero .account-venice-sound-control { margin-left:auto; border:1px solid #f3bd72a8; border-radius:999px; padding:9px 12px; background:#100d0db8; color:#ffe2ae; font:800 .62rem/1 "DM Mono",monospace; letter-spacing:.05em; text-transform:uppercase; box-shadow:0 9px 24px #0008; }
body.app-section-account .profile-hero .account-venice-sound-control:hover { border-color:#ffe0a4; background:#382011d9; }
body.app-section-account .profile-summary,
body.app-section-account .profile-listings,
body.app-section-account .profile-account-tools,
body.app-section-account .profile-footer,
body.account-open .profile-summary,
body.account-open .profile-listings,
body.account-open .profile-account-tools,
body.account-open .profile-footer { border-color:#d99e5961 !important; background:linear-gradient(180deg,#0d1218bc,#0b0b0fdd) !important; }
body.app-section-account .profile-summary h4,
body.app-section-account .profile-listings h4,
body.app-section-account .profile-account-tools h4,
body.account-open .profile-summary h4,
body.account-open .profile-listings h4,
body.account-open .profile-account-tools h4 { color:#ffd27d !important; }
body.app-section-account .profile-metrics,
body.app-section-account .profile-listing-card,
body.account-open .profile-metrics,
body.account-open .profile-listing-card { border-color:#c18c5266 !important; background:#0a1014df !important; }
body.app-section-account .profile-metrics span,
body.account-open .profile-metrics span { border-color:#b8804d44 !important; }
body.app-section-account .profile-listing-card:hover,
body.account-open .profile-listing-card:hover { border-color:#ffd27d !important; box-shadow:0 16px 34px #0008; }
body.app-section-account .profile-listing-card img,
body.account-open .profile-listing-card img { background:#05080a !important; }
body.app-section-account .profile-listing-card span,
body.account-open .profile-listing-card span { color:#9fe7bd !important; }
body.app-section-account .profile-footer .entity-primary,
body.account-open .profile-footer .entity-primary { border-color:#d49c56 !important; border-radius:8px; background:linear-gradient(135deg,#2d170f,#15232a) !important; color:#ffe2ad !important; }

/* Venetian cannon run — a compact, self-contained harbor game at the end of
   the account page. */
.account-sailing-game-host { width:100%; padding:28px 0 0; }
.account-sailing-game { overflow:hidden; border:1px solid #e4ae6875; border-radius:14px; background:linear-gradient(180deg,#442214c9,#15313bcf 48%,#07151fe8); box-shadow:0 24px 54px #0009; color:#fff0d8; }
.account-sailing-game header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-bottom:1px solid #efbe7745; background:#130c0dba; font:800 .66rem/1 "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; }
.account-sailing-game header b { color:#ffd38b; }.account-sailing-game header span { color:#c8e5e2; }
.sailing-battlefield { position:relative; height:300px; overflow:hidden; background:radial-gradient(ellipse at 50% 48%,#4e9ba58e 0 18%,transparent 52%),linear-gradient(180deg,#145368 0%,#0d4056 46%,#082c43 100%); }
.sailing-battlefield::before { position:absolute; inset:0; content:""; opacity:.62; background:repeating-radial-gradient(ellipse 76% 12% at 52% 108%,transparent 0 16px,#c4f2ef20 18px 20px,transparent 24px 39px); background-size:150% 210%; background-position:18% 0; }
.sailing-battlefield::after { position:absolute; right:0; bottom:0; left:0; height:100%; content:""; opacity:.34; background:radial-gradient(ellipse at 50% 48%,#ffd08a24,transparent 43%),linear-gradient(115deg,transparent 0 35%,#9ee7e51c 47%,transparent 62%); }
.sailing-ship { position:absolute; z-index:2; width:88px; height:56px; transition:left .1s linear; filter:drop-shadow(0 10px 8px #0009); }
.sailing-ship .hull { position:absolute; right:2px; bottom:0; left:2px; height:17px; border-radius:3px 3px 45% 45%; background:linear-gradient(#633419,#20140d); border:1px solid #db9f59; }
.sailing-ship .mast { position:absolute; bottom:15px; left:43px; width:3px; height:37px; background:#1c110c; }.sailing-ship .sail { position:absolute; bottom:21px; left:45px; width:0; height:0; border-top:23px solid transparent; border-bottom:0 solid transparent; border-left:26px solid #f7e3bc; filter:drop-shadow(2px 1px #0005); }.sailing-ship .flag { position:absolute; bottom:45px; left:46px; width:13px; height:7px; background:#bb452f; }
.sailing-player { bottom:20px; }.sailing-enemy { top:51px; transform:scale(.86); }.sailing-enemy .hull { background:linear-gradient(#5f241b,#170d0b); border-color:#f08b70; }.sailing-enemy .sail { border-left-color:#332a31; }.sailing-enemy .flag { background:#e84d3f; }
.sailing-emoji-ship { position:absolute; z-index:2; min-width:70px; bottom:auto!important; transform:translate(-50%,-50%); font-size:clamp(2.2rem,4vw,3.8rem); line-height:1; filter:drop-shadow(0 10px 8px #000b); user-select:none; }.sailing-emoji-ship.sailing-player { animation:sailing-orbit-bob 1.7s ease-in-out infinite alternate; }.sailing-emoji-ship.sailing-enemy { min-width:48px; animation:sailing-orbit-bob 1.45s ease-in-out infinite alternate-reverse; font-size:clamp(2rem,3.5vw,3.3rem); filter:drop-shadow(0 0 8px #ff776999) drop-shadow(0 8px 7px #000b); }
.sailing-orbit-ring { position:absolute; z-index:0; top:50%; left:50%; width:74%; height:62%; transform:translate(-50%,-50%); border:1px dashed #f2c47a42; border-radius:50%; box-shadow:0 0 0 15px #e5a55706, inset 0 0 50px #74c7d219; pointer-events:none; }
.sailing-skyline { position:absolute; z-index:1; top:11px; left:0; width:100%; color:#f8c1877a; text-align:center; font-size:1.4rem; letter-spacing:clamp(8px,4vw,42px); white-space:nowrap; filter:drop-shadow(0 5px 4px #0008); }
.sailing-cannonball { position:absolute; z-index:3; width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 30% 24%,#c7d0cd 0 8%,#66716e 12% 25%,#242b2a 42%,#090d0e 68%); box-shadow:inset -2px -3px 3px #000b,inset 1px 1px 2px #e9efea77,0 2px 5px #000; animation:sailing-cannonball-spin .22s linear infinite; }.sailing-cannonball::after { position:absolute; top:9px; left:3px; width:7px; height:34px; content:""; border-radius:50%; background:linear-gradient(#eef0db9c 0,#cdd4d1a8 36%,transparent 100%); filter:blur(2px); }.sailing-cannonball::before { position:absolute; top:21px; left:4px; width:5px; height:39px; content:""; background:linear-gradient(#56615c70,transparent); filter:blur(3px); }.sailing-cannonball.enemy { background:radial-gradient(circle at 30% 24%,#d4b4a5 0 8%,#76554c 12% 25%,#2d1f1e 42%,#100908 68%); box-shadow:inset -2px -3px 3px #000b,inset 1px 1px 2px #f1d5c577,0 2px 5px #000; }
.sailing-protection { position:absolute; z-index:6; right:14px; bottom:12px; border:1px solid #abf4dc8c; border-radius:999px; padding:6px 9px; background:#0c3732c9; color:#c9fff0; font:800 .56rem/1 "DM Mono",monospace; letter-spacing:.05em; text-transform:uppercase; box-shadow:0 0 16px #51e5be55; }.sailing-emoji-ship.is-protected { filter:drop-shadow(0 0 10px #80ffe5) drop-shadow(0 10px 8px #000b); }
.sailing-respawn { position:absolute; z-index:5; top:50%; left:50%; transform:translate(-50%,-50%); padding:8px 12px; border:1px solid #d5b15e9c; border-radius:999px; color:#fff1cb; background:#071d29cf; box-shadow:0 8px 24px #0008; font:700 .6rem/1 "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.sailing-shield-status { position:absolute; z-index:6; top:12px; right:14px; padding:6px 9px; border:1px solid #79aab585; border-radius:999px; background:#082833cb; color:#d2eef2; font:800 .56rem/1 "DM Mono",monospace; letter-spacing:.05em; text-transform:uppercase; }.sailing-shield-status.is-active { border-color:#9cf7ee; background:#126567d9; color:#e6fffb; box-shadow:0 0 18px #55f4e799; }
.sailing-muzzle-flash { position:absolute; z-index:4; color:#ffe4a0; font-size:2rem; line-height:1; text-shadow:0 0 9px #ff7030,0 0 20px #ffe1a2; animation:sailing-flash .13s ease-out both; }
.sailing-explosion { position:absolute; z-index:5; width:46px; height:46px; transform:translate(-50%,-50%); animation:sailing-explosion-pop .52s ease-out both; pointer-events:none; }.sailing-explosion::before { position:absolute; inset:12px; border-radius:50%; content:""; background:radial-gradient(circle,#fff6c5 0 15%,#ffb238 22% 45%,#cf442a 52% 70%,transparent 72%); box-shadow:0 0 25px #ff8e3c; }.sailing-explosion b { position:absolute; left:50%; top:50%; color:#ffe9ae; font-size:1.3rem; text-shadow:0 0 9px #ff622f; }.sailing-explosion b:nth-child(1){transform:translate(-50%,-180%)}.sailing-explosion b:nth-child(2){transform:translate(65%,-50%)}.sailing-explosion b:nth-child(3){transform:translate(-170%,-50%)}.sailing-explosion b:nth-child(4){transform:translate(-50%,80%)}
@keyframes sailing-orbit-bob { from { transform:translate(-50%,-50%) translateY(-2px) rotate(-1deg); } to { transform:translate(-50%,-50%) translateY(3px) rotate(1deg); } } @keyframes sailing-cannonball-spin { to { filter:hue-rotate(18deg) brightness(1.18); } } @keyframes sailing-flash { from { transform:scale(.4); opacity:1; } to { transform:scale(1.45); opacity:0; } } @keyframes sailing-explosion-pop { from { transform:translate(-50%,-50%) scale(.35); opacity:1; } to { transform:translate(-50%,-50%) scale(1.6); opacity:0; } }
.sailing-toast { position:absolute; z-index:4; inset:0; display:grid; place-items:center; padding:20px; color:#fff1d5; text-align:center; font:800 .78rem/1.5 "DM Mono",monospace; letter-spacing:.04em; text-shadow:0 3px 8px #000; pointer-events:none; }.sailing-toast span { display:inline-block; padding:10px 14px; border:1px solid #f0bf777a; background:#120e10bb; }
.account-sailing-game footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid #efbe7745; background:#101012e8; }.account-sailing-game footer small { color:#c7d5d2; font:.65rem/1.45 "DM Mono",monospace; }.sailing-controls { display:flex; gap:7px; }.sailing-controls button { min-width:42px; border:1px solid #dca461; border-radius:7px; padding:9px 11px; background:linear-gradient(135deg,#3e2112,#153039); color:#ffe0a3; font:800 .68rem/1 "DM Mono",monospace; cursor:pointer; }.sailing-controls button[data-venice-sailing-fire] { min-width:82px; background:linear-gradient(135deg,#9b452b,#5c1b17); color:#fff0c9; }.sailing-controls button:hover { border-color:#ffe0a3; filter:brightness(1.15); }
@media(max-width:700px){.account-sailing-game-host{padding-top:16px}.sailing-battlefield{height:250px}.account-sailing-game footer{align-items:flex-start;flex-direction:column}.sailing-controls{width:100%}.sailing-controls button{flex:1}.account-sailing-game header{padding:12px}.sailing-ship{width:74px;transform-origin:center bottom}.sailing-enemy{transform:scale(.72)}}

@media (max-width: 700px) {
  body.app-section-account,
  body.account-open { background-position: 43% top !important; background-attachment: scroll !important; }
  body.app-section-account .app-section-content { width:100% !important; margin-left:0 !important; padding-right:10px !important; padding-left:10px !important; }
  body.app-section-account .profile-workspace,
  body.account-open .account-workspace { border-radius: 12px; }
}
