/* Inner pages (news, rankings, market, guide, download, login, sign-up, my info) in the "별밤 모험" look.
   Each page opens with a night-sky band (.page-hero: the starry lake village, moon glow, and the stars and shooting
   stars that site.js adds) under the header; dark cards sit on the night ground below. Login and sign-up are one
   night scene with the characters beside the form (.auth-scene). Shared pieces come from base.css. */
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
.wrap { max-width: calc(var(--wrap) + 48px); width: 100%; margin: 0 auto; padding: 0 24px; }

/* Night band ------------------------------------------------------------------------------- */
/* clip-path also clips the moving (composited) backdrop, which overflow alone lets bleed one pixel at the bottom edge */
.page-hero { position: relative; isolation: isolate; overflow: hidden; clip-path: inset(0 0 1px 0); color: #fff; }
/* The moon glow is a same-size picture laid out exactly like the backdrop, so it stays on the moon at every width. */
.page-backdrop, .page-moon { position: absolute; inset: 0; pointer-events: none; background: center 14% / cover no-repeat; }
.page-backdrop { z-index: -6; background-image: url("img/night-bg.webp"); animation: kenBurns 24s ease-in-out infinite alternate; }
.page-moon { z-index: -5; background-image: url("img/moon-glow.svg"); animation: kenBurns 24s ease-in-out infinite alternate, moonGlow 6s ease-in-out infinite alternate; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -4; pointer-events: none; background: linear-gradient(90deg, #091230e0 0%, #09123073 45%, #0912301a 100%); }
/* The band's pictures and shade fade out toward its bottom, so the sky shared by the whole page (stars and side
   moonlight) carries on below it with no line, even at the far sides of a wide screen. */
.page-backdrop, .page-moon, .page-hero::before { -webkit-mask-image: linear-gradient(180deg, #000 45%, #0000 100%); mask-image: linear-gradient(180deg, #000 45%, #0000 100%); }
.page-hero .sky-fx { z-index: -3; }
.page-hero-inner { display: flex; flex-direction: column; gap: 22px; padding-top: calc(var(--header) + 40px); padding-bottom: 72px; }
.page-hero-slim .page-hero-inner { padding-top: calc(var(--header) + 32px); padding-bottom: 60px; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #c9d2f0; }
.crumb span + span::before { content: "/"; margin-right: 8px; color: #6c78a6; }
.crumb span:last-child { color: #fff; font-weight: 700; }
.crumb a:hover { color: var(--gold-text); }
.page-title { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; }
.page-title h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 54px; line-height: 1.1; color: #fff; text-shadow: 0 2px 18px #03081a99; }
.page-title p { margin: 6px 0 0; font-size: 18px; color: #d5dcf5; text-shadow: 0 1px 10px #03081a99; }
.page-hero-slim .page-title h1 { font-size: 48px; }
.head-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 16px; background: #091230b8; border: 1px solid #95aaff4d; color: #dde4ff; font-size: 15px; backdrop-filter: blur(6px); }
.head-chip img { width: 40px; height: 40px; margin: -8px -2px -8px -6px; }
.head-chip b { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--gold-text); }
.head-chip.warn { background: #ffc94a29; border-color: #ffc94a80; color: var(--gold-text); font-weight: 700; }
/* on the breadcrumb's line, at the right edge of the content */
.page-hero .motion-toggle { position: absolute; top: calc(var(--header) + 31px); right: max(24px, calc((100% - var(--wrap)) / 2)); z-index: 2; min-height: 40px; padding: 0 14px; font-size: 14px; }
.page-hero-slim .motion-toggle { top: calc(var(--header) + 23px); }
.page-body { position: relative; margin-top: -20px; padding-bottom: 104px; display: flex; flex-direction: column; gap: 24px; }

/* Cards, grids, titles */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 56px #03081a59; }
.pad { padding: 28px; }
.grid { display: grid; gap: 24px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
h2.title, h3.title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.2; }
.card-title-row { display: flex; align-items: center; gap: 14px; }
.card-title-row .title-icon { width: 40px; height: 40px; }
.card-title-row + * { margin-top: 16px; }
.muted { color: var(--text-2); }
.small { font-size: 14px; color: var(--text-3); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--gold-text); text-transform: uppercase; }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; }
.section-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.15; }
.section-head .small { margin-left: auto; }

/* Buttons inside page content */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 14px; border: 1px solid transparent; font-weight: 700; font-size: 16px; line-height: 1.2; white-space: nowrap; transition: background 0.2s, border-color 0.2s; }
.btn-primary, .btn-green { background: var(--gold); color: var(--gold-ink); box-shadow: 0 12px 28px #ffc94a33, inset 0 -4px 0 #7a480038; }
.btn-primary:hover, .btn-green:hover { background: #ffd566; }
.btn-secondary { background: #95aaff1f; color: #dde4ff; border-color: #95aaff8c; }
.btn-secondary:hover { background: #95aaff33; border-color: var(--moon); }
.btn-block { width: 100%; min-height: 56px; font-size: 18px; }
.btn-lg { min-height: 58px; padding: 0 26px; font-size: 18px; border-radius: 16px; }
.btn.btn-soon, .btn.btn-soon[disabled] { background: #ffc94a1a; color: var(--gold-text); border: 1px dashed #ffc94a8c; box-shadow: none; opacity: 1; cursor: default; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-secondary[disabled] { opacity: 1; background: transparent; border-color: #22305c; color: #6c78a6; }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* Form controls */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.toolbar .seg { margin-right: auto; }
.seg button { min-height: 46px; padding: 0 22px; font-size: 16px; }
.control { height: 46px; padding: 0 14px; border: 1px solid #2b3463; border-radius: 12px; background: var(--card-in); color: var(--text); font-size: 15px; }
select.control { min-width: 160px; padding-right: 34px; }
.search { position: relative; }
.search svg.i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.search input { width: 260px; padding-left: 42px; }
.search.wide input { width: 100%; }
input::placeholder { color: #6c78a6; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.field label { font-size: 15px; font-weight: 700; color: #dde4ff; }
.field input, .field select { height: 54px; padding: 0 16px; border: 1px solid #2e3d70; border-radius: 14px; background: var(--tray); color: var(--text); font-size: 16px; }
.field input:focus { border-color: var(--moon); }
.field input[aria-invalid="true"] { border-color: var(--rose); }
.field .hint { font-size: 13px; color: var(--text-3); }
.field .optional { font-weight: 400; color: var(--text-3); }
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }  /* minmax: a wide field (the Naver ID with its suffix) must not widen the whole form past its card */
.form-msg { margin: 0; font-size: 15px; font-weight: 700; }
.form-msg:empty { display: none; }
.form-msg.bad { padding: 10px 14px; border-radius: 12px; background: #ff8fa31f; border: 1px solid #ff8fa366; color: #ffc2cd; }
.form-msg.ok { padding: 10px 14px; border-radius: 12px; background: #6ee7b71a; border: 1px solid #6ee7b75c; color: #a9f5d4; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.callout { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 14px; background: #2a2213; border: 1px solid #8c7434; color: #ffe3a0; font-weight: 700; }
.callout img { width: 40px; height: 40px; margin: -6px 0; }

/* Naver sign-up: the Naver ID with its fixed "@naver.com", and the mail verification page (/verify) */
.suffix-input { display: flex; align-items: stretch; border: 1px solid #2e3d70; border-radius: 14px; background: var(--tray); }
.suffix-input:focus-within { border-color: var(--moon); }
.field .suffix-input input { flex: 1; min-width: 0; height: 52px; border: 0; border-radius: 14px 0 0 14px; background: transparent; }
.suffix-input .suffix { display: grid; place-items: center; padding: 0 16px; border-left: 1px solid #22305c; color: var(--text-2); font-size: 16px; font-weight: 700; white-space: nowrap; }
.field input.code-input { font-family: var(--display); font-size: 28px; letter-spacing: 0.3em; text-align: center; }
.field input.code-input::placeholder { letter-spacing: 0.3em; }
.verify-more { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid #22305c; }
.verify-more p { margin: 0; font-size: 14px; }
.verify-done { display: grid; gap: 14px; }
.verify-done p { margin: 0; }

/* News page */
.news-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.news-row { border: 1px solid transparent; border-radius: 18px; }
.news-row:has(> button[aria-expanded="true"]) { background: var(--card-in); border-color: #2b3463; }
.news-row > button { width: 100%; display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 0 20px; border: 0; border-radius: 18px; background: none; color: var(--text); text-align: left; }
.news-row > button:hover { background: #ffffff08; }
.news-row > button::after { content: ""; flex: none; width: 9px; height: 9px; margin: 0 6px 4px 4px; border-right: 2px solid #6c78a6; border-bottom: 2px solid #6c78a6; transform: rotate(45deg); }
.news-row > button[aria-expanded="true"]::after { margin-bottom: -4px; transform: rotate(-135deg); border-color: var(--moon); }
.news-title { flex: 1; min-width: 0; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-row > button[aria-expanded="true"] .news-title { font-weight: 700; }
.news-date { flex: none; color: var(--text-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.news-body { margin: 0 20px 22px 112px; color: #c9d2f0; line-height: 1.75; }
.empty { padding: 40px 16px; text-align: center; color: var(--text-2); list-style: none; }

/* Rankings: season strip */
.season { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding: 22px 26px; border-radius: 24px; background: linear-gradient(120deg, #1a1f4e 0%, #111c40 60%); border: 1px solid #39407a; box-shadow: var(--shadow); }
.season-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.season-head .tile { width: 58px; height: 58px; border-radius: 18px; }

.season-title { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.2; }
.left-chip { padding: 3px 10px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); font-family: Pretendard, sans-serif; font-size: 13px; font-weight: 700; }
.season-title .example { margin-left: 0; }
.season-note { margin: 2px 0 0; font-size: 14px; color: var(--text-2); }
.season-dates { margin-left: 8px; color: var(--text-3); letter-spacing: 0; }
.season-rewards { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.reward { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 16px; background: var(--card-in); border: 1px solid #2b3463; }
.reward .rank-no { width: 30px; height: 30px; border-radius: 10px; font-size: 16px; }
.reward .rank-no.wide { width: auto; padding: 0 8px; white-space: nowrap; }
.reward .amt { display: flex; flex-direction: column; line-height: 1.25; }
.reward .amt b { font-family: var(--display); font-weight: 400; font-size: 19px; font-variant-numeric: tabular-nums; }
.reward:first-child .amt b { color: #ffe3a0; }
.reward .amt span { font-size: 12px; color: var(--text-3); }
.season-standings { flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.standing { min-width: 0; padding: 12px 16px; border-radius: 16px; background: var(--card-in); border: 1px solid #2b3463; }
.standing h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.standing ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.standing li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.standing .rank-no { flex: none; width: 26px; height: 26px; border-radius: 9px; font-size: 14px; }
.standing .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.standing .gain { flex: none; font-family: var(--display); font-weight: 400; font-size: 17px; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.standing .empty { font-size: 13px; color: var(--text-3); }

/* Rankings: boss cards, podium, table */
.boss-section { display: flex; flex-direction: column; gap: 18px; }
/* four across on every desktop width, so the 11 bosses always end on a row of three (never one alone) */
.boss-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.boss-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid #2e2a62; transition: transform 0.2s, border-color 0.2s; }
.boss-card:hover { transform: translateY(-3px); border-color: #4b3f8c; }
.boss-stage { height: 196px; display: flex; align-items: center; justify-content: center; background: radial-gradient(110% 90% at 50% 100%, #5b3b7a 0%, #24214f 55%, #0d1733 100%); }
.boss-sprite { image-rendering: auto; filter: drop-shadow(0 8px 6px #00000073); }
.boss-sprite.crisp { image-rendering: pixelated; }
.boss-body { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 18px; }
.boss-body h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 23px; }
.boss-total { font-size: 14px; color: var(--text-2); }
.boss-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #22305c; font-size: 14px; }
.boss-top > span:first-child { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--gold-text); }
.boss-top .avatar { width: 36px; height: 36px; border-radius: 11px; }
.boss-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boss-kills { margin-left: auto; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; }
.podium:empty { display: none; }
.podium-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 0 22px; border-radius: 24px; overflow: hidden; background: var(--card); border: 1px solid var(--line); text-align: center; }
.podium-card.p1 { padding-bottom: 26px; background: #141f48; border-color: #8c7434; box-shadow: 0 0 0 1px #ffc94a40, 0 24px 60px #ffc94a1f; }
.podium-stage { position: relative; width: 100%; height: 222px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px; background: radial-gradient(120% 90% at 50% 100%, #3a4f8f 0%, #1b2b55 55%, #0d1733 100%); }
.podium-stage::before { content: ""; position: absolute; bottom: 16px; left: 50%; width: 100px; height: 14px; border-radius: 50%; background: #00000061; transform: translateX(-50%); }
.p1 .podium-stage { height: 262px; background: radial-gradient(120% 90% at 50% 100%, #6f5aa8 0%, #2b2f6b 55%, #0d1733 100%); }
.p1 .podium-stage::after { content: ""; position: absolute; top: 18px; left: 50%; width: 48px; height: 48px; transform: translateX(-50%); background: url("img/icons/crown.png") center / contain no-repeat; image-rendering: pixelated; }
.podium-sprite { position: relative; filter: drop-shadow(0 6px 4px #00000059); }
.podium-card .medal { position: relative; margin-top: -20px; width: 40px; height: 40px; border-radius: 13px; border: 3px solid var(--card); font-size: 20px; }
.podium-card.p1 .medal { margin-top: -22px; width: 46px; height: 46px; border-radius: 15px; border-color: #141f48; font-size: 23px; }
.podium-card b { margin-top: 4px; max-width: 90%; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-card.p1 b { font-size: 22px; }
.podium-meta { font-size: 14px; color: var(--text-3); }
.podium-value { margin-top: 4px; font-family: var(--display); font-size: 24px; font-variant-numeric: tabular-nums; }
.p1 .podium-value { font-size: 28px; color: #ffe3a0; }
.podium-sub { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.table-card { overflow: hidden; }
.table-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 22px 26px; }
.table-head h2 { margin-right: auto; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
thead th { padding: 12px 10px; background: var(--card-in); border-top: 1px solid var(--line-soft); color: var(--text-3); font-size: 13px; font-weight: 700; text-align: left; white-space: nowrap; }
tbody td { padding: 10px; border-top: 1px solid var(--line-soft); white-space: nowrap; vertical-align: middle; color: var(--text-2); }
th:first-child, td:first-child { padding-left: 26px; }
th:last-child, td:last-child { padding-right: 26px; }
tbody tr:hover td { background: #ffffff06; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { color: #dde4ff; }
td.strong { color: var(--text); font-weight: 700; }
/* Ranking and market tables: fixed widths for the short columns, the name takes the rest, and the text column after
   the numbers keeps a clear gap from them */
.rank-table .col-rank { width: 92px; }
.rank-table .col-type { width: 104px; }
.rank-table .col-job { width: 150px; }
.rank-table .col-level { width: 96px; }
.rank-table .num, .market-table .num { width: 150px; }
.rank-table .col-guild_name, .rank-table .col-latest, .market-table th:last-child, .market-table td:last-child { width: 260px; padding-left: 48px; }
.name-cell { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-weight: 700; }
.name-cell .avatar { width: 42px; height: 42px; border-radius: 13px; }
.rank-no { width: 30px; height: 30px; border-radius: 10px; font-size: 16px; }
.table-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 16px 26px; border-top: 1px solid var(--line-soft); font-size: 14px; color: var(--text-3); }
.rank-cards { display: none; list-style: none; margin: 0; padding: 0 14px 6px; flex-direction: column; gap: 8px; }
.rank-cards li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--card-in); border: 1px solid #22305c; }
.rank-cards .rank-no { flex: none; }
.rank-cards .avatar { width: 44px; height: 44px; border-radius: 13px; }
.rank-cards .who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.rank-cards .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-cards .who span { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-cards .val { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.rank-cards .val b { font-family: var(--display); font-weight: 400; font-size: 16px; }
.rank-cards .val span { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Market */
.skeleton td span { display: block; height: 12px; border-radius: 6px; background: #1b2853; }
.skeleton .ic { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.skeleton .item { display: flex; align-items: center; gap: 12px; }
.skeleton + .skeleton { opacity: 0.6; }
.market-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 24px 36px; border-top: 1px solid var(--line-soft); text-align: center; }
.market-empty h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 28px; }
.market-empty p { margin: 0; color: var(--text-3); }
.card .market-empty .game-icon { width: 96px; height: 96px; border-radius: 28px; background: radial-gradient(circle at 50% 35%, #3a2f18 0%, #1e1a2e 80%); border: 1px solid #5b4a22; box-shadow: none; }
.card .market-empty .game-icon > .pix { width: 80px; height: 80px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fact { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 20px; color: var(--text); }

/* Dark tiles for game-icons inside cards */
.card .game-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--dark); border: 1px solid var(--dark-line); box-shadow: none; }
.card .game-icon > .pix { width: 40px; height: 40px; }
.card .game-icon > .discord-logo { width: 30px; height: 30px; }

/* Guide */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 18px; border-radius: 18px; background: var(--card-in); border: 1px solid #22305c; }
.steps > li::before { content: counter(step); width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); font-family: var(--display); font-size: 22px; }
.steps > li > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.steps b { display: block; font-size: 18px; }
.steps > li > div > span { color: var(--text-2); }
.steps .go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; width: fit-content; color: var(--moon); font-weight: 700; }
.steps .go:hover { color: #c9d5ff; }
/* all nine species on one row (five and four on a phone) */
.species { list-style: none; margin: 12px 0 0; padding: 12px 20px 8px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; border-radius: 14px; background: radial-gradient(120% 100% at 50% 100%, #2a3b73 0%, #131e44 70%); }
.species li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; font-size: 12px; color: var(--text-2); }
.species li.pola span { color: var(--gold-text); font-weight: 700; }
.species .sprite { margin: 0 -18px; }
details.faq { border-radius: 18px; background: var(--card-in); border: 1px solid #22305c; }
details.faq + details.faq { margin-top: 10px; }
details.faq[open] { border-color: #2b3d75; }
details.faq summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 18px; font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before { content: "Q"; flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #1f2c57; color: var(--text-2); font-family: var(--display); font-size: 16px; font-weight: 400; }
details.faq[open] summary::before { background: var(--moon); color: var(--moon-ink); }
details.faq summary::after { content: ""; margin-left: auto; flex: none; width: 8px; height: 8px; border-right: 2px solid #6c78a6; border-bottom: 2px solid #6c78a6; transform: rotate(45deg); }
details.faq[open] summary::after { transform: rotate(-135deg); border-color: var(--moon); }
details.faq p { margin: 0; padding: 0 18px 18px 58px; color: #c9d2f0; }
.help-link { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: #5865f229; border: 1px solid #5865f280; }
.help-link .badge { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--discord); }
.help-link .badge img { width: 24px; height: 24px; }
.help-link span { flex: 1; display: flex; flex-direction: column; }
.help-link span span { font-size: 14px; color: #c9d2f0; }

/* Download */
.launcher { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); overflow: hidden; border-radius: 28px; border-color: #2b3d75; }
.launcher-info { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 40px 40px 36px; }
.launcher-info h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1.1; }
.launcher-info > p { margin: 0; font-size: 17px; color: #c9d2f0; }
.launcher-art { position: relative; isolation: isolate; min-height: 340px; display: grid; place-items: center; background: #0c1739 url("img/night-bg.webp") center 70% / cover no-repeat; }
.launcher-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--card) 0%, #111c4033 40%, #09123059 100%); }
.launcher-art img { width: 78%; max-width: 440px; height: auto; filter: drop-shadow(0 16px 28px #03081a99); }
.specs { width: 100%; margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 16px; overflow: hidden; border: 1px solid #22305c; }
.specs div { padding: 14px 16px; background: var(--card-in); }
.specs div + div { border-left: 1px solid #22305c; }
.specs span { display: block; font-size: 13px; color: var(--text-3); }
.specs b { font-size: 16px; }
.launcher-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 10px; }
.step-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; counter-reset: step; }
.step-cards li { counter-increment: step; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.step-cards li::before { content: counter(step); width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); font-family: var(--display); font-size: 22px; }
.step-cards b { font-size: 19px; }
.step-cards span { color: var(--text-2); }
.note { display: flex; align-items: center; gap: 12px; margin: 0; color: #dde4ff; }
.note img { width: 40px; height: 40px; flex: none; margin: -4px 0; }
.link-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 22px; transition: transform 0.2s, border-color 0.2s; }
.link-card:hover { transform: translateY(-3px); border-color: #3a4f8f; }
.link-card .label { display: flex; flex-direction: column; }
.link-card .label span { font-size: 14px; color: var(--text-3); }
.link-card .label b { color: var(--moon); }
.link-card .go { margin-left: auto; color: var(--moon); }

/* Login and sign-up: one night scene, the characters beside the form */
.auth-scene .page-backdrop, .auth-scene .page-moon { background-position: center 40%; }
.auth-scene::before { background: linear-gradient(90deg, #0912308c 0%, #091230b8 55%, #091230e6 100%); }
.auth-scene .page-backdrop, .auth-scene .page-moon, .auth-scene::before { -webkit-mask-image: linear-gradient(180deg, #000 78%, #0000 100%); mask-image: linear-gradient(180deg, #000 78%, #0000 100%); }
.auth-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); align-items: center; gap: 40px; padding-top: calc(var(--header) + 48px); padding-bottom: 112px; }
.auth-art { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.auth-art img { width: 100%; max-width: 560px; height: auto; filter: drop-shadow(0 20px 26px #03081a99); }
.auth-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 460px; counter-reset: step; }
.auth-steps li { counter-increment: step; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #0d1738d1; border: 1px solid #22305c; }
.auth-steps li::before { content: counter(step); flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--moon); color: var(--moon-ink); font-family: var(--display); font-size: 17px; }
.auth-card { justify-self: end; width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 22px; padding: 36px 36px 30px; border-radius: 28px; background: #111c40f0; border-color: #2d3f79; box-shadow: 0 32px 80px #03081a99, inset 0 1px 0 #ffffff0f; }
.auth-card .game-icon { width: 64px; height: 64px; border-radius: 20px; border: 0; box-shadow: 0 10px 24px #03081a66; background: radial-gradient(circle at 30% 22%, #fff 0, var(--tint-a) 48%, var(--tint-b) 100%); }
.auth-card .game-icon > .pix { width: 40px; height: 40px; }
.auth-head { display: flex; flex-direction: column; gap: 10px; }
.auth-head h1 { margin: 4px 0 0; font-family: var(--display); font-weight: 400; font-size: 40px; line-height: 1.15; }
.auth-head p { margin: 0; color: var(--text-2); }
.auth-switch { margin: 0; padding-top: 18px; border-top: 1px solid #22305c; text-align: center; color: var(--text-2); }
.auth-scene .motion-toggle { top: auto; bottom: 32px; }
details.help summary { min-height: 48px; font-size: 15px; }
details.help summary::before { display: none; }
details.help p { padding: 0 18px 16px; font-size: 14px; }

/* My info */
.acc-head { display: flex; align-items: center; gap: 14px; }
.acc-head .avatar { width: 60px; height: 60px; border-radius: 18px; }
.acc-head .avatar > .sprite { top: 4px; }
.acc-head h2 { margin: 0; }
.acc-head .muted { font-size: 15px; }
.state-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #6ee7b71f; color: #8ef0c6; font-size: 14px; font-weight: 700; white-space: nowrap; }
.state-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.state-chip.busy { background: #ffc94a24; color: var(--gold-text); }
.state-chip.busy::before { background: var(--gold); }
.state-chip.on { background: #95aaff29; color: #c9d5ff; }
.state-chip.on::before { background: var(--moon); }
.info-list { margin: 16px 0 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); border-top: 1px solid var(--line-soft); }
.info-list dt, .info-list dd { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.info-list dt { color: var(--text-3); font-size: 15px; }
.info-list dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.info-list dd small { display: block; font-weight: 400; font-size: 13px; color: var(--text-3); }
.info-list dd.point { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--gold-text); }
.stuck-box { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: #2a2213; border: 1px solid #8c7434; color: #e9ddbf; }
.stuck-box img { width: 40px; height: 40px; flex: none; }
.stuck-box b { display: block; color: #ffe3a0; }
.stuck-box .btn { margin-left: auto; flex: none; }
.char-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.char-list li { display: grid; grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 20px; background: var(--card-in); border: 1px solid #22305c; }
.char-list .avatar { width: 72px; height: 72px; border-radius: 20px; }
.char-list .avatar > .sprite { top: 4px; }
.char-list b { display: block; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-list .meta { font-size: 14px; color: var(--text-3); }
.char-list .where { min-width: 0; font-size: 14px; }
.char-list .where span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dde4ff; }
.char-list .where small { display: block; color: var(--text-3); font-size: 14px; }
.char-list .empty { display: block; border: 0; background: none; padding: 30px 0; }

/* My page: points and rewards */
.rw-guide { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text-2); font-size: 15px; font-weight: 700; white-space: nowrap; }
.rw-guide:hover { color: var(--gold-text); }
.rw-guide .icon { width: 18px; height: 18px; }
.rw-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rw-box { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--card-in); border: 1px solid #22305c; }
.rw-label { font-size: 14px; font-weight: 700; color: var(--text-3); }
.rw-box b { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.2; color: #fff; overflow-wrap: anywhere; }
.rw-points b { font-size: 30px; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.rw-box small { font-size: 13px; color: var(--text-3); }
.rw-box .rw-note { color: var(--text-2); }
.rw-att { margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: var(--card-in); border: 1px solid #22305c; }
.rw-att-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rw-att-head b { font-size: 17px; }
.rw-att-head .chip { margin-left: 0; }
.att-strip { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; }
.att-strip li { display: grid; place-items: center; height: 34px; border-radius: 10px; background: #0b1533; border: 1px solid #263467; color: var(--text-3); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.att-strip li.done { background: #ffc94a2e; border-color: #ffc94a80; color: var(--gold-text); }
.att-strip li.today { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.att-strip li.next { border-style: dashed; border-color: var(--moon); color: #c9d5ff; }
.rw-att-next { margin: 10px 0 0; font-size: 14px; }
.rw-lists { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rw-sub { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--text-2); }
.rw-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.rw-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.rw-list li > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-list time { flex: none; color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.rw-list b { flex: none; font-variant-numeric: tabular-nums; }
.rw-list b.plus { color: var(--mint); }
.rw-list b.minus { color: #ffc2cd; }
.rw-list .empty { color: var(--text-3); }
.rw-state { flex: none; padding: 2px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; background: #1f2c57; color: var(--text-2); }
.rw-state.done { background: #6ee7b71a; color: #a9f5d4; }
.rw-state.failed { background: #ff8fa31f; color: #ffc2cd; }

/* Rewards page */
.rewards-note { margin: 0 0 14px; font-size: 15px; }
.att-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.att-days li { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: var(--card-in); border: 1px solid #22305c; }
.att-days li.big { background: #ffc94a1a; border-color: #ffc94a73; }
.att-days .day { font-family: var(--display); font-size: 18px; color: var(--gold-text); }
.att-days b { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.reward-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.reward-rows li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.reward-rows li > span { flex: none; min-width: 96px; color: var(--text-3); font-size: 15px; }
.reward-rows li > b { min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.card .reward-rows + .go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; color: var(--moon); font-weight: 700; }
.card .reward-rows + .go .i { width: 18px; height: 18px; }
@media (max-width: 1080px) and (min-width: 701px) {
  .att-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* minmax(0, 1fr) keeps a wide table (it scrolls inside .table-wrap) from stretching the page past the screen */
@media (max-width: 1080px) {
  .boss-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split.even { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .season-rewards { margin-left: 0; }
}
@media (max-width: 860px) {
  .boss-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wrap { padding: 0 16px; }
  .page-hero-inner, .page-hero-slim .page-hero-inner { flex-direction: column; gap: 14px; padding-top: calc(var(--header) + 14px); padding-bottom: 62px; }
  .page-backdrop, .page-moon { background-size: auto 260%; background-position: 70% 10%; }
  .crumb { display: none; }
  .page-hero .motion-toggle { top: auto; bottom: 10px; right: 12px; min-height: 34px; padding: 0 12px; font-size: 13px; }
  .page-title { flex-wrap: nowrap; gap: 14px; }
  .page-title .game-icon, .page-hero-slim .page-title .game-icon { width: 68px; height: 68px; border-radius: 20px; border-width: 3px; }
  .page-title .game-icon > .pix { width: 40px; height: 40px; }
  .page-title h1, .page-hero-slim .page-title h1 { font-size: 34px; }
  .page-title p { margin-top: 2px; font-size: 14px; }
  .head-chip { display: none; }
  .page-body { margin-top: 0; padding-bottom: 44px; gap: 16px; }
  .pad { padding: 20px 18px; }
  .card { border-radius: 20px; }
  .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); }
  h2.title, h3.title { font-size: 22px; }
  .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .toolbar { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 8px; }
  .toolbar .seg { grid-column: 1 / -1; margin: 0; }
  select.control { min-width: 0; width: 100%; }
  .search, .search input { width: 100%; }
  .season { padding: 16px; gap: 12px; border-radius: 20px; }
  .season-head .tile { width: 44px; height: 44px; border-radius: 14px; }
  .season-title { font-size: 21px; }
  .season-dates { display: none; }
  .season-rewards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .season-standings { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rw-top, .rw-lists { grid-template-columns: minmax(0, 1fr); }
  .rw-guide { display: none; }
  .att-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .att-days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .reward-rows li { flex-direction: column; gap: 2px; }
  .reward-rows li > span { min-width: 0; }
  .reward { flex-direction: column; gap: 2px; padding: 8px 4px; text-align: center; }
  .reward .amt { align-items: center; }
  .reward .rank-no { display: none; }
  .reward .sr-only { position: static; width: auto; height: auto; clip: auto; font-size: 12px; font-weight: 700; color: var(--gold-text); }
  .podium { gap: 8px; }
  .podium-card { padding-bottom: 12px; border-radius: 18px; }
  .podium-stage { height: 124px; padding-bottom: 10px; }
  .p1 .podium-stage { height: 148px; }
  .podium-stage::before { width: 56px; height: 9px; bottom: 9px; }
  .p1 .podium-stage::after { top: 8px; width: 30px; height: 30px; }
  .podium-sprite { transform: scale(0.5); transform-origin: 50% 100%; flex: none; }  /* exactly half: the game's own pixels */
  .podium-card .medal { width: 30px; height: 30px; margin-top: -15px; border-radius: 10px; font-size: 15px; }
  .podium-card.p1 .medal { width: 34px; height: 34px; margin-top: -16px; font-size: 17px; }
  .podium-card b, .podium-card.p1 b { font-size: 14px; }
  .podium-meta, .podium-sub { display: none; }
  .podium-value, .p1 .podium-value { margin-top: 0; font-size: 16px; }
  /* on a phone each boss lies on its side: picture left, name and top hunter right */
  .boss-gallery { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .boss-card { flex-direction: row; }
  .boss-stage { flex: 0 0 128px; height: auto; min-height: 128px; }
  .boss-sprite { width: auto; height: auto; max-width: 112px; max-height: 112px; }
  .boss-body { flex: 1; min-width: 0; padding: 12px 14px; }
  .boss-body h3 { font-size: 19px; }
  .boss-top { margin-top: 8px; padding-top: 8px; }
  .section-head h2 { font-size: 22px; }
  .section-head .small { margin-left: 0; }
  .table-head { padding: 16px 16px 12px; }
  .table-card .table-wrap { display: none; }
  .rank-cards { display: flex; }
  .table-foot { padding: 12px 16px; font-size: 12px; }
  .news-list { padding: 6px; }
  .news-row > button { flex-wrap: wrap; gap: 6px 10px; min-height: 0; padding: 14px; }
  .news-row > button::after { display: none; }
  .tag { width: auto; padding: 2px 8px; font-size: 12px; }
  .news-title { flex-basis: 100%; order: 3; font-size: 16px; white-space: normal; }
  .news-date { font-size: 13px; }
  .news-body { margin: 0 14px 16px; }
  .launcher-info { padding: 24px 20px; }
  .launcher-info h2 { font-size: 32px; }
  .launcher-art { min-height: 200px; }
  .specs { grid-template-columns: 1fr; }
  .specs div + div { border-left: 0; border-top: 1px solid #22305c; }
  .launcher-cta .btn { width: 100%; }
  .auth-layout { padding-top: calc(var(--header) + 12px); padding-bottom: 72px; gap: 16px; }
  .auth-art { display: none; }
  .auth-card { justify-self: stretch; padding: 24px 20px; border-radius: 22px; }
  .auth-head h1 { font-size: 32px; }
  .auth-scene .motion-toggle { bottom: 14px; right: 12px; }
  .acc-head { flex-wrap: wrap; }
  .info-list { grid-template-columns: auto minmax(0, 1fr); }
  .info-list dd { text-align: right; }
  .stuck-box { flex-wrap: wrap; }
  .stuck-box .btn { margin-left: 0; width: 100%; }
  .char-list li { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .char-list .avatar { width: 60px; height: 60px; border-radius: 18px; }
  .char-list .where { grid-column: 1 / -1; padding: 10px 12px; border-radius: 12px; background: #091230; }
  .char-list li > .btn { grid-column: 1 / -1; width: 100%; }
  .market-empty h2 { font-size: 22px; }
  .species { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .species .sprite { transform: scale(0.8); transform-origin: 50% 100%; }
}

/* Beta account guidance; preserve the existing theme and art. */
.beta-account-rule { margin: 10px 0; line-height: 1.65; }
.beta-availability { flex-wrap: wrap; gap: 10px; }
.beta-availability [data-beta-status-text] { flex: 1 1 180px; }
.beta-retry { padding: 5px 10px; border: 1px solid currentColor; border-radius: 8px; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.beta-retry:disabled { opacity: .55; cursor: wait; }
.beta-consent .hint { margin: 0 0 10px; line-height: 1.7; }
.form .consent-control { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; font-size: 13px; font-weight: 400; line-height: 1.65; cursor: pointer; }
.form .consent-control input[type=checkbox] { appearance: auto; display: block; width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: #ffd56b; }
.beta-help { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 13px; line-height: 1.7; }
[data-beta-download][aria-disabled=true] { opacity: .6; cursor: default; pointer-events: none; }
[data-beta-download] { text-align: center; }