/* Page transitions (supported browsers fade between pages; others just navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
/* Cards rise in one after another */
.reveal { opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .6s cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0ms), transform .6s cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* ═══ Account: captain card + timeline ═══ */
.captain-card { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; padding: 18px 20px; border: 1px solid #c3a66b66; border-radius: 16px; background: radial-gradient(420px 160px at 90% 0%, #e2c27d24, transparent 70%), linear-gradient(135deg, #1b2e55, #0f1b35); box-shadow: 0 14px 40px #0006; }
.cc-avatar { position: relative; flex: none; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 20px; background: linear-gradient(140deg, #2a4170, #13213f); border: 2px solid #e2c27d88; box-shadow: 0 0 0 4px #e2c27d14, 0 8px 20px #0007; }
.cc-level { position: absolute; right: -8px; bottom: -8px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; background: linear-gradient(#f0d28a, #c79f4f); color: #1a2440; font: 800 13px/28px Inter, Arial, sans-serif; text-align: center; box-shadow: 0 0 0 3px #0f1b35; }
.cc-info { flex: 1; min-width: 0; display: grid; gap: 8px; }
.cc-info h2 { margin: 0; font: 600 22px 'Cinzel', Georgia, serif; color: #ecdcb0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-id { padding: 2px 10px; border-radius: 9px; border: 1px solid #8aa2d155; background: #ffffff0d; font: 700 13px Inter, Arial, sans-serif; color: #cfdaf0; }
.cc-id.is-special { border-color: #f0d28a; background: linear-gradient(#f0d28a, #c79f4f); color: #1a2440; box-shadow: 0 0 14px #e2c27d66; }
.cc-progress { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; font-size: 12px; color: #b6c3dc; }
.cc-progress small { grid-column: 1 / -1; color: #8396b8; }
.cc-bar { height: 8px; border-radius: 6px; background: #ffffff12; overflow: hidden; }
.cc-bar i { display: block; height: 100%; min-width: 4px; border-radius: 6px; background: linear-gradient(90deg, #c79f4f, #f0d28a); box-shadow: 0 0 10px #e2c27d88; }
.cc-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid #8aa2d140; background: #ffffff0a; font-size: 11.5px; color: #d6e0f2; }
.cc-badge b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ffffff14; font-size: 11px; }
.cc-special b, .cc-founder b { background: linear-gradient(#f0d28a, #c79f4f); color: #1a2440; }
.cc-staff b { background: linear-gradient(#e2c27d, #8c672d); color: #1a2440; }
.cc-secure b, .cc-verified b { background: #3ddc8c33; color: #6ff0b0; }
.cc-supporter b { background: #6fb2ec33; color: #9fd0ff; }
.hub-timeline-title { margin: 0 0 12px; font: 600 15px 'Cinzel', Georgia, serif; color: #e3d4b5; }
.hub-timeline { list-style: none; margin: 0; padding: 0 0 0 6px; display: grid; gap: 4px; position: relative; }
.hub-timeline::before { content: ''; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(#e2c27d66, #8aa2d11f); }
.hub-timeline li { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 8px 0; }
.tl-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #17284b; border: 1px solid #8aa2d155; color: #e2c27d; font-size: 14px; }
.tl-balance .tl-dot, .tl-order .tl-dot { border-color: #e2c27d88; }
.tl-register .tl-dot { background: linear-gradient(#f0d28a, #c79f4f); color: #1a2440; }
.hub-timeline strong { font-size: 13.5px; color: #e5eaf6; }
.hub-timeline p { margin: 2px 0; font-size: 12.5px; color: #a9b8d3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hub-timeline time { font-size: 11.5px; color: #7d8fb0; }
.hub-timeline b.up { color: #6ff0b0; } .hub-timeline b.down { color: #ff9aa9; }
@media (max-width: 600px) { .captain-card { flex-direction: column; text-align: center; } .cc-info h2, .cc-badges { justify-content: center; } }

/* ═══ Rankings: podium + movement ═══ */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; padding: 14px 12px 0; }
.podium-spot { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 0; }
.podium-crown { height: 18px; font-size: 18px; color: #f0d28a; text-shadow: 0 0 12px #f0d28a99; }
.podium-medal { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 800 14px Inter, Arial, sans-serif; color: #1a2440; box-shadow: 0 4px 12px #0007, inset 0 1px #ffffff99; }
.p1 .podium-medal { width: 42px; height: 42px; background: linear-gradient(#ffe39a, #c99a3d); }
.p2 .podium-medal { background: linear-gradient(#f2f6fb, #9fb0c6); }
.p3 .podium-medal { background: linear-gradient(#f3c49a, #a8683a); }
.podium-spot .board-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #e5eaf6; }
.podium-spot small { font-size: 11.5px; color: #a9b8d3; }
.podium-block { width: 100%; margin-top: 6px; display: grid; place-items: center; border-radius: 10px 10px 0 0; font: 700 22px 'Cinzel', Georgia, serif; color: #ffffff30; border: 1px solid #ffffff14; border-bottom: 0; }
.p1 .podium-block { height: 70px; background: linear-gradient(#e2c27d55, #e2c27d12); box-shadow: 0 -6px 24px #e2c27d33; }
.p2 .podium-block { height: 50px; background: linear-gradient(#c9d6ea44, #c9d6ea0d); }
.p3 .podium-block { height: 38px; background: linear-gradient(#d08a5a44, #d08a5a0d); }
.podium-spot.is-vacant .podium-medal { opacity: .75; }
.rank-move { display: inline-flex; align-items: center; margin-left: 4px; padding: 0 5px; border-radius: 6px; font: 700 10.5px/16px Inter, Arial, sans-serif; vertical-align: middle; }
.rank-move.up { color: #6ff0b0; background: #3ddc8c1f; }
.rank-move.down { color: #ff9aa9; background: #ef8b9a1f; }
.rank-move.same { color: #8396b8; }
.rank-move.new { color: #1a2440; background: linear-gradient(#f0d28a, #c79f4f); }

/* ═══ Store: treasure-chest cards ═══ */
.chest-store { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; max-width: 1100px; margin: 0 auto; }
.chest-card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 20px 22px; border: 1px solid #8aa2d140; border-radius: 18px; background: radial-gradient(280px 160px at 50% 0%, var(--glow, #6fb2ec22), transparent 70%), linear-gradient(160deg, #1a2c4f, #0d1830); text-align: center; transition: transform .25s, box-shadow .25s, border-color .25s; }
.chest-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px #0008, 0 0 0 1px var(--edge, #8aa2d166); }
.chest-tag { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: #ffffff10; border: 1px solid #ffffff22; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; color: #e7d6a8; white-space: nowrap; }
.chest-art { position: relative; width: 170px; margin-top: 14px; }
.chest-svg { width: 100%; height: auto; overflow: visible; }
.chest-svg .ch-shadow { fill: #0008; }
.chest-svg .ch-body { fill: var(--wood, #7a4a22); stroke: #2a1608; stroke-width: 3; }
.chest-svg .ch-lid { fill: var(--wood-top, #8f5a2a); stroke: #2a1608; stroke-width: 3; }
.chest-svg .ch-band { fill: var(--metal, #c9a35a); stroke: #3a2a10; stroke-width: 1.5; }
.chest-svg .ch-lock { fill: var(--metal, #c9a35a); stroke: #3a2a10; stroke-width: 2; }
.chest-svg .ch-hole { fill: #2a1608; }
.chest-svg .ch-glow { fill: none; stroke: var(--shine, #ffe9a8); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.chest-svg .ch-sparkle { fill: var(--shine, #ffe9a8); opacity: 0; }
.chest-icon { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); font-size: 22px; color: var(--shine, #ffe9a8); text-shadow: 0 0 14px var(--shine, #ffe9a8); }
.chest-card h3 { margin: 4px 0 0; font: 600 19px 'Cinzel', Georgia, serif; color: #ecdcb0; }
.chest-gold { font-size: 14px; color: #c9d6ea; }
.chest-gold b { font-size: 22px; color: #f0d28a; }
.chest-price { margin: 4px 0 10px; font: 600 24px 'Cinzel', Georgia, serif; color: #e5eaf6; }
.chest-card .button { width: 100%; }
.tier-wood { --wood: #6b4021; --wood-top: #82522a; --metal: #9a7a4a; --shine: #ffd9a0; --glow: #c58a4a22; --edge: #c58a4a88; }
.tier-silver { --wood: #3d4b63; --wood-top: #4c5d7a; --metal: #d9e2ee; --shine: #eaf3ff; --glow: #c9d6ea26; --edge: #c9d6ea88; }
.tier-gold { --wood: #6b3f12; --wood-top: #84501a; --metal: #f0cf6e; --shine: #fff0b0; --glow: #e2c27d2e; --edge: #e2c27daa; }
.tier-legend { --wood: #3a1d5c; --wood-top: #4f2a7a; --metal: #ffd56a; --shine: #ffe9a8; --glow: #b39ae033; --edge: #ffd56acc; }
.chest-card.is-best { border-color: #f0d28a; box-shadow: 0 0 0 1px #f0d28a66, 0 0 34px #e2c27d40; animation: best-glow 2.8s ease-in-out infinite; }
.chest-card.is-best .chest-tag { background: linear-gradient(#f0d28a, #c79f4f); color: #1a2440; border-color: #f0d28a; }
.chest-card.is-best .ch-sparkle { animation: sparkle 2.4s ease-in-out infinite; }
.chest-card:hover .ch-lid { transform: translateY(-4px) rotate(-3deg); transform-origin: 30px 58px; transition: transform .3s; }
@keyframes best-glow { 50% { box-shadow: 0 0 0 1px #f0d28aaa, 0 0 54px #e2c27d66; } }
@keyframes sparkle { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }