/* Product layer: nautical identity, accounts, live ranks and achievements */
.product-notice { display:flex; align-items:flex-start; gap:8px; padding:11px 14px; color:#704e12; background:#fff8d8; border:2px solid #ecd17c; border-radius:15px; box-shadow:0 3px 0 #d6b85d; font-size:11px; line-height:1.45; }
.product-notice b { flex:0 0 auto; }.product-notice span { font-weight:700; opacity:.82; }

.captain-card { position:relative; isolation:isolate; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; min-height:92px; padding:14px 16px; overflow:hidden; color:#f9f2d6; border:2px solid #183e4d; border-radius:21px; background:linear-gradient(135deg,#163d4b 0%,#255f6d 60%,#b07d31 140%); box-shadow:0 5px 0 #0e2a35,0 14px 30px rgba(21,55,65,.17); }
.captain-card::after { content:""; position:absolute; inset:0; z-index:-2; opacity:.2; background-image:url('/assets/paper-texture.jpg'); background-size:360px; mix-blend-mode:screen; }
.captain-map-lines { position:absolute; inset:-45% -8% -80% 42%; z-index:-1; border:1px solid rgba(255,235,177,.16); border-radius:50%; box-shadow:0 0 0 24px rgba(255,235,177,.06),0 0 0 58px rgba(255,235,177,.05),0 0 0 92px rgba(255,235,177,.04); }
.captain-map-lines::before,.captain-map-lines::after { content:""; position:absolute; background:rgba(255,235,177,.13); }.captain-map-lines::before { left:50%; top:-100%; width:1px; height:300%; }.captain-map-lines::after { left:-100%; top:50%; width:300%; height:1px; }
.captain-avatar { display:grid; place-items:center; width:58px; height:58px; overflow:hidden; color:#173d50; background:linear-gradient(145deg,#ffdd73,#e9a93b); border:3px solid #fff3c5; border-radius:18px 18px 23px 23px; box-shadow:0 4px 0 #8c5a20; font-size:25px; font-weight:900; }
.captain-avatar img,.rank-avatar img { width:100%; height:100%; object-fit:cover; }
.captain-identity { min-width:0; }.captain-identity small { display:block; color:#aee7ef; font-size:9px; font-weight:900; letter-spacing:.12em; }.captain-identity h1 { overflow:hidden; margin:2px 0 3px; font-size:18px; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }.captain-identity > strong { color:#ffdf74; font-size:20px; font-variant-numeric:tabular-nums; }.captain-identity > strong span { font-size:10px; }
.captain-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }.captain-actions button { min-height:32px; padding:6px 10px; color:#e6f8fb; border:1px solid rgba(255,255,255,.24); border-radius:10px; background:rgba(5,30,40,.3); font-size:10px; font-weight:900; }.captain-actions button.primary { color:#173d50; background:#ffda67; border-color:#ffefb4; box-shadow:0 3px 0 #9b6b1f; }.captain-actions i { display:inline-grid; place-items:center; min-width:16px; height:16px; color:#173d50; background:#ffda67; border-radius:999px; font-size:9px; font-style:normal; }
.badge-shelf { grid-column:1/-1; display:flex; gap:6px; padding-top:9px; border-top:1px solid rgba(255,255,255,.15); }.badge-shelf span { display:grid; place-items:center; width:28px; height:28px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2); border-radius:9px; }

.voyage-board { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(rgba(247,241,216,.94),rgba(238,226,190,.96)),url('/assets/paper-texture.jpg'); border-color:#c6aa66; box-shadow:0 5px 0 #aa8c49,0 18px 35px rgba(78,61,24,.12); }
.chart-grid { position:absolute; inset:0; z-index:-1; opacity:.22; background-image:linear-gradient(rgba(53,106,111,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(53,106,111,.32) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(to bottom,#000,transparent 75%); }
.voyage-board .section-heading small { display:block; color:#817149; font-size:8px; font-weight:900; letter-spacing:.15em; }.live-mark { display:flex; align-items:center; gap:5px; margin-left:auto; padding:5px 9px; color:#176c54; background:#d9f3d2; border-radius:999px; font-size:9px; font-weight:900; }.live-mark i { width:6px; height:6px; background:#2ebc74; border-radius:50%; box-shadow:0 0 0 3px rgba(46,188,116,.18); animation:live-pulse 1.8s infinite; }
.voyage-rank-list { display:flex; flex-direction:column; gap:8px; margin-top:15px; }.voyage-rank { display:grid; grid-template-columns:30px 42px 1fr auto; align-items:center; gap:10px; min-height:60px; padding:8px 12px; color:#263c42; border:1px solid rgba(91,84,52,.18); border-radius:15px; background:rgba(255,255,255,.68); box-shadow:0 2px 0 rgba(91,84,52,.12); }.voyage-rank.rank-1 { background:linear-gradient(105deg,#fff0a7,#fff9dd); border-color:#e4bd3e; }.voyage-rank.rank-2 { background:linear-gradient(105deg,#e9eff2,#fff); border-color:#aebfc7; }.voyage-rank.rank-3 { background:linear-gradient(105deg,#efc7a1,#fff0df); border-color:#c77e42; }.voyage-rank.me { outline:3px solid rgba(28,176,246,.25); border-color:#1cb0f6; }.rank-number { text-align:center; font-size:16px; font-variant-numeric:tabular-nums; }.rank-avatar { display:grid; place-items:center; width:40px; height:40px; overflow:hidden; color:#fff; background:#33788a; border:2px solid rgba(255,255,255,.8); border-radius:13px; box-shadow:0 2px 0 rgba(21,61,71,.35); font-weight:900; }.rank-name { min-width:0; display:flex; flex-direction:column; }.rank-name strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.rank-name small { color:#1488bc; font-size:9px; font-weight:900; }.rank-score { text-align:right; }.rank-score strong { display:block; color:#204f5b; font-size:17px; font-variant-numeric:tabular-nums; }.rank-score span { color:#7d7257; font-size:9px; font-weight:800; }.board-empty { padding:35px 10px; color:#766d55; text-align:center; font-size:12px; font-weight:800; }

.auth-layout { position:relative; min-height:100dvh; overflow:hidden; color:#f8f1d5; background:radial-gradient(circle at 70% 15%,rgba(255,212,94,.18),transparent 22%),linear-gradient(145deg,#102f3d,#1d5c68 62%,#133943); }.auth-layout::before { content:""; position:absolute; inset:0; opacity:.1; background:url('/assets/paper-texture.jpg'); background-size:420px; mix-blend-mode:screen; pointer-events:none; }.auth-page { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; min-height:calc(100dvh - 30px); padding:24px 18px; }.auth-back { position:absolute; left:18px; top:18px; color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); }.auth-compass { display:grid; place-items:center; width:60px; height:60px; margin:0 auto 12px; border:2px solid #e8c25c; border-radius:50%; box-shadow:0 0 0 8px rgba(232,194,92,.1),inset 0 0 0 7px rgba(232,194,92,.09); animation:compass-arrive .7s cubic-bezier(.2,1.4,.4,1); }.auth-compass span { color:#ffd969; font-size:32px; animation:compass-turn 8s linear infinite; }.auth-page header { margin-bottom:21px; text-align:center; }.auth-page header small { color:#8edce7; font-size:9px; font-weight:900; letter-spacing:.18em; }.auth-page header h1 { margin:5px 0; font-size:27px; font-weight:900; }.auth-page header p { color:#b8d4d9; font-size:12px; font-weight:700; }.auth-card { display:flex; flex-direction:column; gap:12px; padding:18px; color:#203a43; background:#fffdf4; border:2px solid #fff; border-radius:22px; box-shadow:0 7px 0 #092530,0 24px 50px rgba(0,0,0,.25); }.auth-card label span { display:block; margin:0 0 6px 3px; color:#536870; font-size:10px; font-weight:900; }.auth-card input { width:100%; min-height:48px; padding:12px 14px; color:#203a43; background:#f5f3e9; border:2px solid #d7d9d2; border-radius:13px; outline:none; font:inherit; font-size:14px; font-weight:750; }.auth-card input:focus { border-color:#1cb0f6; box-shadow:0 0 0 4px rgba(28,176,246,.14); }.form-message { padding:9px 11px; color:#765313; background:#fff4c7; border-radius:10px; font-size:11px; font-weight:800; line-height:1.45; }.auth-switch { margin:18px auto 0; color:#9de4ec; font-size:12px; font-weight:900; text-decoration:underline; text-underline-offset:4px; }.auth-legal { max-width:330px; margin:14px auto 0; color:#88aab0; text-align:center; font-size:9px; font-weight:700; line-height:1.5; }

.achievements-layout { background:linear-gradient(#eef9fc,#fbfaf1); }.achievement-header > div { flex:1; }.achievement-header small { color:#2a93b4; font-size:8px; font-weight:900; letter-spacing:.13em; }.achievement-header h1 { font-size:20px; }.achievement-showcase { position:relative; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:13px; min-height:96px; padding:16px; overflow:hidden; color:#f9efce; background:linear-gradient(130deg,#234f5d,#153540); border:2px solid #0f303b; border-radius:21px; box-shadow:0 5px 0 #0b2831; }.achievement-showcase::after { content:""; position:absolute; right:-25px; top:-48px; width:155px; height:155px; border:1px solid rgba(255,224,127,.16); border-radius:50%; box-shadow:0 0 0 24px rgba(255,224,127,.05),0 0 0 49px rgba(255,224,127,.04); }.showcase-avatar { display:grid; place-items:center; width:46px; height:46px; color:#153540; background:#ffd45d; border:3px solid #fff1b0; border-radius:16px; box-shadow:0 3px 0 #946820; font-size:22px; font-weight:900; }.achievement-showcase small { color:#94d6df; font-size:9px; font-weight:900; }.achievement-showcase h2 { margin-top:4px; font-size:16px; }.showcase-badges { grid-column:1/-1; display:flex; gap:7px; }.showcase-badges span { display:grid; place-items:center; width:33px; height:33px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:10px; }.achievement-list { display:flex; flex-direction:column; gap:10px; }.achievement-row { display:grid; grid-template-columns:50px 1fr auto; align-items:center; gap:12px; padding:13px; background:#fff; border:2px solid #dce6e8; border-radius:18px; box-shadow:0 3px 0 #d1dcde; }.achievement-row.ready { border-color:#f0c33a; box-shadow:0 3px 0 #d19b16,0 0 22px rgba(255,205,54,.18); }.achievement-row.claimed { background:#f8fbf3; }.achievement-badge { display:grid; place-items:center; width:48px; height:48px; background:#edf1f2; border-radius:15px; filter:grayscale(1); font-size:23px; }.ready .achievement-badge,.claimed .achievement-badge { background:#fff1b9; filter:none; }.achievement-copy { min-width:0; }.achievement-copy > div { display:flex; align-items:center; gap:7px; }.achievement-copy h2 { font-size:14px; }.achievement-copy > div span { padding:2px 6px; color:#7c692c; background:#f4e8bd; border-radius:999px; font-size:8px; font-weight:900; }.achievement-copy p { margin:3px 0 7px; color:#687d84; font-size:10px; font-weight:700; line-height:1.4; }.achievement-progress { height:7px; overflow:hidden; background:#e7edef; border-radius:999px; }.achievement-progress i { display:block; height:100%; background:linear-gradient(90deg,#1cb0f6,#58cc02); border-radius:inherit; transition:width .5s cubic-bezier(.2,.8,.2,1); }.achievement-copy > small { display:block; margin-top:4px; color:#7d9096; font-size:8px; font-weight:900; }.achievement-status span,.achievement-status b { color:#667c83; font-size:10px; }.achievement-status .btn-3d { min-height:38px; padding:7px 10px; font-size:11px; }
.achievement-claim-overlay { position:fixed; inset:0; z-index:9500; display:grid; place-items:center; padding:20px; overflow:hidden; background:rgba(10,31,38,.86); backdrop-filter:blur(8px); }.achievement-claim-overlay section { position:relative; z-index:2; width:min(360px,100%); padding:31px 23px 23px; text-align:center; background:#fffdf2; border:3px solid #ffe37b; border-radius:25px; box-shadow:0 8px 0 #a47116,0 30px 80px rgba(0,0,0,.45); animation:badge-claim .6s cubic-bezier(.15,1.5,.4,1); }.achievement-claim-overlay small { color:#a26d13; font-size:9px; font-weight:900; letter-spacing:.16em; }.claim-badge { margin:17px auto 11px; font-size:72px; filter:drop-shadow(0 9px 0 rgba(137,94,18,.18)); animation:badge-float 1.6s ease-in-out infinite alternate; }.achievement-claim-overlay h2 { font-size:28px; }.achievement-claim-overlay p { margin:6px 0 20px; color:#6e7f82; font-size:12px; font-weight:700; }.claim-rays { position:absolute; width:520px; height:520px; background:repeating-conic-gradient(from 0deg,rgba(255,214,70,.24) 0 8deg,transparent 8deg 18deg); border-radius:50%; animation:rays-spin 16s linear infinite; }
.settlement-error { padding:8px 12px; color:#9b2d25; background:#ffe0dc; border-radius:10px; font-size:11px; font-weight:800; }.new-achievement-callout { padding:11px 15px; color:#76510b; background:#ffdc61; border:2px solid #fff0ab; border-radius:13px; box-shadow:0 4px 0 #a87812; font-size:12px; font-weight:900; }

@keyframes live-pulse { 50% { transform:scale(.72); opacity:.55; } }
@keyframes compass-arrive { from { opacity:0; transform:scale(.4) rotate(-80deg); } }
@keyframes compass-turn { to { transform:rotate(360deg); } }
@keyframes badge-claim { from { opacity:0; transform:translateY(40px) scale(.7); } }
@keyframes badge-float { to { transform:translateY(-8px) rotate(3deg); } }
@keyframes rays-spin { to { transform:rotate(360deg); } }

@media (min-width:900px) {
  .captain-card { grid-column:1; min-height:108px; padding:18px 20px; }.captain-avatar { width:70px; height:70px; font-size:30px; }.captain-identity h1 { font-size:23px; }.captain-identity > strong { font-size:24px; }
  .home-layout .product-notice { grid-column:1/-1; grid-row:2; }.home-layout .captain-card { grid-column:1; grid-row:3; }.home-layout .hero-card { grid-column:1; grid-row:4; }.home-layout .stat-row { grid-column:1; grid-row:5; }.home-layout .voyage-board { grid-column:2; grid-row:3/6; }
  .home-layout { grid-template-rows:none; }
  .voyage-rank { min-height:68px; grid-template-columns:38px 48px 1fr auto; padding:9px 15px; }.rank-avatar { width:46px; height:46px; }.rank-name strong { font-size:15px; }.rank-score strong { font-size:19px; }
  .auth-page { width:min(470px,100%); margin:auto; }.auth-card { padding:26px; }
  .achievements-layout { max-width:1050px; }.achievement-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.achievement-showcase { min-height:120px; padding:20px; }.achievement-row { min-height:96px; }
}

@media (max-width:420px) { .captain-card { grid-template-columns:auto 1fr; }.captain-actions { grid-column:1/-1; flex-direction:row; justify-content:flex-end; }.achievement-row { grid-template-columns:44px 1fr; }.achievement-status { grid-column:2; }.achievement-badge { width:43px; height:43px; } }
@media (prefers-reduced-motion:reduce) { .live-mark i,.auth-compass span,.achievement-claim-overlay section,.claim-badge,.claim-rays { animation:none !important; } }

/* Avatar frames: nautical passport seals shared by profile and leaderboard. */
.avatar-frame {
  --frame-hi:#fff3c5;
  --frame-mid:#d59d2f;
  --frame-shadow:#714814;
  border-color:var(--frame-hi) !important;
  box-shadow:0 0 0 3px var(--frame-mid),0 4px 0 3px var(--frame-shadow),0 0 18px color-mix(in srgb,var(--frame-mid) 35%,transparent) !important;
}
.avatar-frame--coral { --frame-hi:#ffd6be; --frame-mid:#ec6f51; --frame-shadow:#8b332c; background-image:linear-gradient(145deg,#ffd5a6,#e96b58) !important; }
.avatar-frame--aurora { --frame-hi:#cafff4; --frame-mid:#37b9c8; --frame-shadow:#176374; background-image:linear-gradient(145deg,#bff9e8,#4bbce6) !important; }
.avatar-frame--abyss { --frame-hi:#dce9e8; --frame-mid:#344b59; --frame-shadow:#122630; background-image:linear-gradient(145deg,#56717a,#1c3440) !important; color:#fff !important; }

.avatar-frame-card { gap:14px; }
.avatar-frame-picker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.frame-choice { position:relative; display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto; align-items:center; gap:1px 10px; min-height:66px; padding:10px; color:#334e56; text-align:left; background:#f5f3e9; border:2px solid #d7dfdd; border-radius:15px; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.frame-choice:not(:disabled):hover { transform:translateY(-2px); border-color:#77b9c6; }
.frame-choice.selected { color:#173d50; background:#e9f8f2; border-color:#26a56b; box-shadow:0 3px 0 #168052; }
.frame-choice.selected::after { content:"✓"; position:absolute; right:7px; top:6px; display:grid; place-items:center; width:18px; height:18px; color:#fff; background:#20a866; border-radius:50%; font-size:11px; font-weight:900; }
.frame-choice:disabled { cursor:not-allowed; opacity:.64; }
.frame-preview { grid-row:1/3; display:grid; place-items:center; width:34px; height:34px; color:#173d50; background:#ffcf55; border:2px solid; border-radius:11px; font-weight:900; }
.frame-choice strong { align-self:end; font-size:12px; }
.frame-choice small { align-self:start; color:#74868a; font-size:8px; font-weight:750; }
.frame-save-state { margin:-2px 0 0; color:#74868a; text-align:right; font-size:9px; font-weight:800; }
.frame-error { margin:0; padding:8px 10px; color:#8f3b2d; background:#ffe7df; border-radius:10px; font-size:10px; font-weight:800; }

@media (min-width:900px) {
  .avatar-frame-card { min-height:0 !important; }
  .avatar-frame-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) {
  .frame-choice { transition:none; }
}


/* Avatar frame beautification: metallic bezel plate, corner rivets, inner gloss */
.avatar-frame { position: relative; isolation: isolate; }
.avatar-frame::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle 2.5px at 9px 9px, var(--frame-hi) 62%, transparent 66%),
    radial-gradient(circle 2.5px at calc(100% - 9px) 9px, var(--frame-hi) 62%, transparent 66%),
    radial-gradient(circle 2.5px at 9px calc(100% - 9px), var(--frame-hi) 62%, transparent 66%),
    radial-gradient(circle 2.5px at calc(100% - 9px) calc(100% - 9px), var(--frame-hi) 62%, transparent 66%),
    linear-gradient(145deg, var(--frame-hi), var(--frame-mid) 48%, var(--frame-shadow));
  box-shadow: 0 2px 5px rgba(20, 35, 40, .25);
}
.avatar-frame {
  box-shadow: 0 5px 0 6px var(--frame-shadow), 0 12px 24px 2px color-mix(in srgb, var(--frame-mid) 38%, transparent) !important;
}
.avatar-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
}


/* Leaderboard rank polish: display-font numerals, medal-tinted top 3 */
.rank-number { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #a29377; }
.voyage-rank.rank-1 .rank-number { color: #c9930a; font-size: 25px; }
.voyage-rank.rank-2 .rank-number { color: #7d97a5; font-size: 22px; }
.voyage-rank.rank-3 .rank-number { color: #b87a45; font-size: 22px; }
.rank-score strong { font-family: var(--font-display); font-weight: 600; }
.voyage-rank { transition: transform .15s ease, box-shadow .15s ease; }
.voyage-rank:hover { transform: translateX(3px); }


/* ---------- Me tab ---------- */
.me-hero { display:flex; align-items:center; gap:14px; padding:16px; background:var(--paper-card); border:2px solid var(--line); border-radius:20px; box-shadow:var(--lift-1); }
.me-hero .captain-avatar { width:56px; height:56px; font-size:24px; flex:0 0 auto; }
.me-identity { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.me-identity small { color:var(--blue-dark); font-size:10px; font-weight:900; letter-spacing:.12em; }
.me-identity h1 { font-size:20px; font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me-identity span { color:var(--ink-faint); font-size:12px; font-weight:700; }
.me-hero .btn-3d { flex:0 0 auto; min-height:44px; padding:9px 16px; font-size:14px; }
.me-section { background:var(--paper-card); border:2px solid var(--line); border-radius:20px; box-shadow:var(--lift-1); padding:16px; }
.me-soon-copy { color:var(--ink-faint); font-size:13px; font-weight:700; }
@media (min-width:900px) {
  .me-layout { max-width:1050px; }
  .me-layout .achievement-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}