/* Home only: existing game artwork, parchment, antique gold and wine. */
.classic-home .header-container { height: 530px; }
.classic-home .logo { bottom: 35px; }
.classic-home .logo img { width: 510px; }
.classic-home .home { position: relative; z-index: 6; }
.classic-home .classic-eyebrow { color: #bc9252; font-size: 10px; font-weight: 700; letter-spacing: 2.4px; line-height: 1.6; }
.classic-launch { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr minmax(310px, 390px); gap: 32px; align-items: center; padding: 24px 32px 28px; margin-bottom: 24px; border: 0; background: none; box-shadow: none; }
.classic-launch h1 { color: #f6e2b3; font-size: clamp(27px, 3vw, 32px); font-weight: 700; line-height: 1.3; margin: 0 0 8px; letter-spacing: .2px; text-shadow: 0 2px 3px #211b10, 0 0 7px #211b1099; }
.classic-launch-copy > p:last-child { color: #eddfc7; font-size: 14px; line-height: 1.65; margin: 0; text-shadow: 0 1px 2px #171109, 0 0 5px #171109; }
.classic-launch-actions { min-width: 0; }
.classic-download { position: relative; isolation: isolate; display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; max-width: 350px; min-height: 68px; margin: 0 auto; padding: 17px 30px; border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 5px 9px #0007); color: #ffe8ad !important; font-size: 22px; font-weight: 700; text-decoration: none; text-shadow: 0 2px 3px #24150f; transition: filter .2s, transform .2s; }
.classic-download svg { width: 24px; height: 24px; flex: 0 0 24px; }
.classic-download > span { display: none; }
.classic-download:hover { filter: brightness(1.15) drop-shadow(0 5px 12px #0007); transform: translateY(-2px); }
.classic-download-meta { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 8px 13px; margin-top: 10px; color: #e3d5bb; font-size: 12px; line-height: 1.6; text-shadow: 0 1px 4px #14100b, 0 0 8px #14100b; }
.classic-download-meta a { color: #f4dfb1; border-left: 1px solid #b99a6255; padding-left: 13px; text-decoration: none; }
.classic-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-bottom: 44px; }
.classic-main-grid > * { min-width: 0; }
.classic-section-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 8px 2px; background: none; border: 0; border-radius: 0; }
.classic-section-heading h2 { color: #f3e2bf; font-size: 19px; font-weight: 600; line-height: 1.5; margin: 0; text-shadow: 0 2px 3px #1a140c, 0 0 7px #1a140c, 0 0 18px #1a140c; }
.classic-section-heading::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, #b9975577, transparent); }
.classic-section-heading > span { color: #b99755; font-size: 10px; }
.classic-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.classic-card { position: relative; display: flex; align-items: end; isolation: isolate; min-height: 222px; overflow: hidden; padding: 21px; border: 1px solid #b7975866; border-radius: 3px; background: #211d1c; box-shadow: 0 7px 20px #0004; }
.classic-card::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--card-image) center 30% / cover; transition: transform .35s; }
.classic-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #16120fec 0%, #16120f85 32%, #16120f00 77%); }
.classic-card:hover { border-color: #e0ba73; }
.classic-card:hover::before { transform: scale(1.045); }
.classic-card-copy { padding-right: 14px; }
.classic-card h3 { color: #fff0d3; font-size: 24px; line-height: 1.4; margin: 0 0 4px; text-shadow: 0 2px 8px #000; }
.classic-card p { color: #e0d4c0; font-size: 13px; line-height: 1.55; }
.classic-card-label { position: absolute; top: 16px; left: 17px; padding: 5px 8px; background: #171319aa; color: #f1ddae; border: 1px solid #d4b37c44; font-size: 9px; font-weight: 600; letter-spacing: 1.5px; line-height: 1.4; }
.classic-card-symbol { position: absolute; top: 16px; left: 17px; display: grid; place-items: center; width: 36px; height: 36px; background: #171319b3; border: 1px solid #d4b37c77; border-radius: 50%; color: #f1ddae; }
.classic-card-symbol svg { width: 19px; height: 19px; }
.classic-card-arrow { position: absolute; bottom: 24px; right: 17px; color: #eaca87; font-size: 21px; }
.classic-card--items::before { background-position: center 42%; }
.classic-card--discord::before, .classic-card--rewards::before { background-position: center; }
.classic-event { display: flex; justify-content: space-between; align-items: center; position: relative; isolation: isolate; overflow: hidden; min-height: 128px; margin-top: 14px; padding: 24px; border: 1px solid #a9854e88; border-radius: 3px; background: linear-gradient(90deg, #3b1e25f2, #3b1e25d9 60%, #3b1e2577), url('../images/wiki-img.webp?v=painted-v1') center / cover; }
.classic-event h3 { color: #f4dba9; font-size: 24px; line-height: 1.4; margin: 3px 0; }
.classic-event p { color: #ddc8b6; font-size: 14px; line-height: 1.5; }
.classic-event-arrow { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #b8965c88; border-radius: 50%; color: #e4c68a; flex-shrink: 0; }
.classic-event:hover { border-color: #edc87a; }
.classic-news { position: relative; isolation: isolate; padding: 28px 28px 12px; border: 1px solid #b79b6a; border-radius: 3px 9px 9px 3px; background-color: #f6eedb; background-image: linear-gradient(100deg,#fff9eed9,#fff9eecc),url('../images/content-bg.webp'); background-size: auto,100% auto; box-shadow: -3px 0 0 #594433,-5px 0 0 #af9059,0 10px 25px #0003; }
.classic-news::before { content: ''; position: absolute; inset: 6px; border: 1px solid #b69a642b; border-radius: 1px 5px 5px 1px; pointer-events: none; z-index: -1; }
.classic-news-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #b4976355; margin-bottom: 22px; }
.classic-news-heading h2 { color: #703d43; font-size: 25px; line-height: 1.4; margin: 4px 0 0; }
.classic-home .classic-news .classic-eyebrow { color: #89632d; }
.classic-news-heading > a { color: #773742; font-size: 13px; font-weight: 600; white-space: nowrap; }
.classic-featured { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 19px; margin-bottom: 20px; }
.classic-featured-image { display: block; align-self: start; border: 1px solid #b09a73; padding: 4px; background: #fffaf0; box-shadow: 0 3px 7px #5b391d20; }
.classic-featured-image img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.classic-featured h3 { margin: 7px 0 8px; font-size: 18px; font-weight: 700; line-height: 1.6; }
.classic-featured h3 a { color: #63383d; }
.classic-news .classic-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #75614d; font-size: 14px; line-height: 1.75; margin: 0; }
.classic-news .classic-read-more { display: inline-block; margin-top: 13px; color: #773742; font-size: 13px; font-weight: 600; line-height: 1.6; }
.classic-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; line-height: 1.6; font-size: 11px; }
.classic-news-meta time { color: #796246; margin-left: auto; white-space: nowrap; }
.classic-category { display: inline-block; color: #85501f; background: #bd853317; padding: 2px 7px; border-radius: 2px; font-weight: 600; }
.classic-category.color-purple { color: #773742; background: #77374214; }
.classic-category.color-blue { color: #386566; background: #38656614; }
.classic-category.color-brown { color: #79501e; background: #79501e14; }
.classic-news-list { padding: 0; margin: 0; list-style: none; }
.classic-news-list li { padding: 13px 0; border-top: 1px solid #b4976340; }
.classic-news-list li > a { display: flex; justify-content: space-between; gap: 15px; color: #493422; font-size: 14px; line-height: 1.6; margin-top: 5px; }
.classic-news-list li > a > span { color: #9b794c; flex-shrink: 0; }
.classic-news a:hover { color: #993b4b; }
.classic-home .gallery-title span { color: #edd9af; }
.classic-home .classic-main-grid a:focus-visible, .classic-home .classic-launch a:focus-visible { outline: 3px solid #f0c677; outline-offset: 4px; }
.classic-news a:focus-visible { outline-color: #773742 !important; }
@media (max-width: 1000px) {
    .classic-launch { padding: 25px; grid-template-columns: 1fr 340px; gap: 22px; }
    .classic-main-grid { gap: 18px; }
    .classic-card { padding: 16px; min-height: 215px; }
    .classic-card h3 { font-size: 22px; }
    .classic-news { padding: 24px 20px 10px; }
    .classic-featured { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 760px) {
    .classic-home .header-container { height: 430px; }
    .classic-home .logo { left: 20px; bottom: 28px; }
    .classic-home .logo img { width: 300px; }
    .classic-launch { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
    .classic-launch h1 { font-size: 30px; }
    .classic-main-grid { grid-template-columns: 1fr; gap: 26px; }
    .classic-card { min-height: 220px; }
    .classic-featured { grid-template-columns: 105px minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .classic-home .header-container { height: 355px; }
    .classic-home .logo img { width: 250px; }
    .classic-launch { padding: 23px 18px; margin-bottom: 24px; }
    .classic-launch h1 { font-size: 27px; }
    .classic-launch-copy > p:last-child { font-size: 14px; }
    .classic-download { font-size: 21px; min-height: 61px; }
    .classic-download-meta { gap: 7px 10px; font-size: 11px; }
    .classic-download-meta a { padding-left: 10px; }
    .classic-shortcuts { gap: 10px; }
    .classic-card { min-height: 205px; padding: 14px 12px; }
    .classic-card h3 { font-size: 21px; }
    .classic-card p { font-size: 12px; }
    .classic-card-arrow { right: 10px; bottom: 18px; font-size: 18px; }
    .classic-card-label { left: 12px; font-size: 8px; letter-spacing: .8px; }
    .classic-news { padding: 23px 18px 10px; }
    .classic-featured { grid-template-columns: 72px minmax(0, 1fr); gap: 13px; }
    .classic-featured h3 { font-size: 17px; }
    .classic-news-meta time { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .classic-card::before, .classic-download { transition: none; }
}

@media (max-width: 560px) {
    .classic-news-heading { gap: 10px; }
    .classic-news-heading h2 { font-size: 22px; }
    .classic-news-heading > a { font-size: 11px; }
    .classic-news .classic-featured { grid-template-columns: 72px minmax(0,1fr); gap: 9px 13px; }
    .classic-featured-copy { display: contents; }
    .classic-featured-image { grid-column: 1; grid-row: 1 / span 2; }
    .classic-featured .classic-news-meta { grid-column: 2; }
    .classic-featured h3 { grid-column: 2; margin: 0; }
    .classic-news .classic-excerpt { grid-column: 1 / -1; -webkit-line-clamp: 2; margin-top: 3px; }
    .classic-news .classic-read-more { grid-column: 1 / -1; margin-top: 3px; }
}

/* Bevelled game button; its outline stays separate from the keyboard focus ring. */
.classic-download::before, .classic-download::after { content: ''; position: absolute; inset: 0; z-index: -2; clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%); }
.classic-download::before { background: linear-gradient(180deg, #f0d79b, #ac803b 48%, #785528 51%, #d2ad65); }
.classic-download::after { inset: 2px; z-index: -1; background: radial-gradient(ellipse at 50% 0, #b28a5140, transparent 75%), linear-gradient(180deg, #684231, #442b24 52%, #30221c); box-shadow: inset 0 0 0 3px #e4bd6b20, inset 0 1px 0 #ffe9b25c; }
.classic-launch-copy > .classic-eyebrow { display: none; }
.classic-download-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
    .classic-launch { gap: 17px; padding: 24px 18px 25px; }
    .classic-launch-copy { text-align: center; }
    .classic-launch h1 { font-size: 28px; }
}
@media (max-width: 420px) {
    .classic-launch { padding: 23px 10px 25px; }
    .classic-launch h1 { font-size: 26px; }
    .classic-launch-copy > p:last-child { font-size: 13px; }
    .classic-section-heading h2 { font-size: 18px; }
}

/* ------------------------------------------------- ปุ่มสมัคร + ดาวน์โหลด (แบบ A) */

/* คอลัมน์ปุ่มกว้างขึ้นให้สองปุ่มวางเคียงกันได้ ท้ายไฟล์เพราะต้องทับกฎเดิมด้านบน จึงประกาศ media ซ้ำหลังจากนี้ด้วย */
.classic-launch { grid-template-columns: 1fr minmax(340px, 470px); }
.classic-actions-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }

/* ปุ่มสมัคร: ป้ายไวน์เย็บขอบ ตัวเดียวกับปุ่มเชื่อมต่อ Discord ในหน้าสมัคร */
.classic-register { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 34px; border: 1px solid #5c2b34; border-radius: 3px; background: #7d414b; color: #f6e4bd !important; font-size: 17px; font-weight: 600; line-height: 1.3; text-decoration: none; text-shadow: none; box-shadow: 0 5px 12px #0006; outline: 1px dashed rgba(246, 228, 189, .55); outline-offset: -6px; transition: background .18s, transform .18s; }
.classic-register:hover { background: #6b3540; transform: translateY(-1px); }

/* ปุ่มดาวน์โหลดเวอร์ชันรอง: กรอบเส้นบนพื้นเข้มโปร่ง ไม่ใช้ป้ายทองเดิม เพื่อให้ปุ่มสมัครเด่นกว่า */
.classic-download.classic-download--outline { width: auto; max-width: none; min-height: 52px; margin: 0; padding: 14px 26px; gap: 9px; border: 1px solid #f1e6cc; border-radius: 3px; background: #16241cc4; color: #f6efdc !important; font-size: 17px; font-weight: 600; filter: none; text-shadow: none; }
.classic-download.classic-download--outline::before, .classic-download.classic-download--outline::after { content: none; }
.classic-download.classic-download--outline:hover { background: #1f3428; filter: none; transform: translateY(-1px); }

/* แถบข้อมูลใต้ปุ่มเคยเป็นตัวจิ๋วสีจางบนหิน อ่านไม่ออก: ขยายและรองพื้นเข้มบาง ๆ */
.classic-download-meta { width: fit-content; max-width: 100%; margin: 13px auto 0; padding: 6px 14px; border-radius: 3px; background: #10180fa6; color: #f6ecd6; font-size: 13px; text-shadow: none; }
.classic-download-meta a { color: #fbeac0; }

@media (max-width: 1000px) {
    .classic-launch { grid-template-columns: 1fr minmax(320px, 400px); }
}
@media (max-width: 760px) {
    .classic-launch { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .classic-register, .classic-download.classic-download--outline { flex: 1 1 100%; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .classic-register, .classic-download.classic-download--outline { transition: none; }
    .classic-register:hover, .classic-download.classic-download--outline:hover { transform: none; }
}

/* ------------------------------------------------------------- อันดับผู้เล่น */

/* แผ่นกระดาษเดียวกับ .classic-news (บันทึกข่าวสาร) */
.classic-ranking { position: relative; isolation: isolate; padding: 28px 28px 22px; margin-bottom: 44px; border: 1px solid #b79b6a; border-radius: 3px 9px 9px 3px; background-color: #f6eedb; background-image: linear-gradient(100deg, #fff9eed9, #fff9eecc), url('../images/content-bg.webp'); background-size: auto, 100% auto; box-shadow: -3px 0 0 #594433, -5px 0 0 #af9059, 0 10px 25px #0003; }
.classic-ranking-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #b79b6a55; }
.classic-home .classic-ranking .classic-eyebrow { color: #89632d; }
.classic-ranking h2 { margin: 2px 0 0; color: #3f2f1e; font-size: 24px; font-weight: 700; line-height: 1.4; }
.rk-updated { margin: 0; color: #8a7250; font-size: 12px; }

/* แท็บ: radio ที่ซ่อนไว้ + label */
.rk-radio { position: absolute; opacity: 0; pointer-events: none; }
.rk-tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.rk-tablist label { padding: 9px 20px; border: 1px solid #b79b6a88; border-radius: 3px; background: #fbf3df; color: #6d5636; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.rk-tablist label:hover { border-color: #7d414b; color: #7d414b; }
#rk-level:checked ~ .rk-tablist label[for="rk-level"],
#rk-guild:checked ~ .rk-tablist label[for="rk-guild"],
#rk-pvp:checked ~ .rk-tablist label[for="rk-pvp"] { background: #7d414b; border-color: #5c2b34; color: #f6e4bd; }
#rk-level:focus-visible ~ .rk-tablist label[for="rk-level"],
#rk-guild:focus-visible ~ .rk-tablist label[for="rk-guild"],
#rk-pvp:focus-visible ~ .rk-tablist label[for="rk-pvp"] { outline: 3px solid #b8892a; outline-offset: 2px; }
.rk-panel { display: none; }
#rk-level:checked ~ .rk-panel--level,
#rk-guild:checked ~ .rk-panel--guild,
#rk-pvp:checked ~ .rk-panel--pvp { display: block; }

.rk-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* เกินห้าแถวแบ่งสองคอลัมน์ อ่านลงตามคอลัมน์ (1–5 ซ้าย 6–10 ขวา) */
.rk-list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 16px; }
.rk-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid #b79b6a40; border-radius: 3px; background: #fffaf0a8; }
.rk-rank { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #b79b6a88; border-radius: 50%; color: #7a6238; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rk-row--top1 { background: #fff3d2; border-color: #c99a3588; }
.rk-row--top1 .rk-rank { background: #c99a35; border-color: #9c7420; color: #fff8e0; }
.rk-row--top2 .rk-rank { background: #9aa0a6; border-color: #767c82; color: #fff; }
.rk-row--top3 .rk-rank { background: #a8703f; border-color: #805126; color: #fff5e5; }
.rk-who, .rk-score { display: grid; min-width: 0; }
.rk-who b { overflow: hidden; color: #3f2f1e; font-size: 16px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.rk-who small, .rk-score small { color: #8a7250; font-size: 12px; line-height: 1.5; }
.rk-score { text-align: right; }
.rk-score b { color: #7d414b; font-size: 18px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.rk-empty { margin: 0; padding: 26px 18px; border: 1px dashed #b79b6a99; border-radius: 3px; background: #f3e6c6a0; color: #7a6238; font-size: 14px; text-align: center; }

@media (max-width: 760px) {
    .classic-ranking { padding: 22px 16px 16px; }
    .classic-ranking-heading { flex-direction: column; align-items: flex-start; gap: 4px; }
    .rk-list--split { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
    .rk-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; padding: 10px; }
}

/* --------------------------------------------------- Adventure command panel */
.classic-launch { grid-template-columns: minmax(0, 1fr) minmax(430px, 520px); gap: 38px; }
.classic-launch-actions { position: relative; isolation: isolate; padding: 15px 16px 13px; border: 1px solid #c7a36199; border-radius: 4px; background: linear-gradient(135deg, #241b18f2, #171713e8 58%, #273122dc); box-shadow: 0 12px 30px #0008, inset 0 1px 0 #ffe5aa24; }
.classic-launch-actions::before { content: ''; position: absolute; inset: 5px; z-index: -1; border: 1px solid #d8b56c24; border-radius: 2px; pointer-events: none; }
.classic-launch-actions::after { content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #f1cf83, transparent); }
.classic-action-heading { display: flex; align-items: center; gap: 10px; margin: 0 5px 12px; color: #e9d4a6; }
.classic-action-heading > span:last-child { display: grid; gap: 1px; }
.classic-action-heading small { color: #bc9252; font-size: 8px; font-weight: 700; letter-spacing: 2px; line-height: 1.4; }
.classic-action-heading strong { color: #f3e3c0; font-size: 13px; font-weight: 600; line-height: 1.4; }
.classic-action-mark { color: #bf9853; font-size: 9px; }
.classic-actions-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.classic-register,
.classic-download.classic-download--outline { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 74px; margin: 0; padding: 11px 13px; border-radius: 2px; text-align: left; filter: none; text-shadow: none; box-shadow: 0 5px 14px #0005, inset 0 1px 0 #fff4bd45; outline: none; transition: transform .18s, border-color .18s, filter .18s; }
.classic-register { border: 1px solid #d4ad5f; background: linear-gradient(145deg, #a67c37, #7e5929 56%, #61421f); color: #fff0c9 !important; }
.classic-download.classic-download--outline { border: 1px solid #98616a; background: linear-gradient(145deg, #713c46, #552c35 58%, #3a2028); color: #f8e7c3 !important; }
.classic-register::after,
.classic-download.classic-download--outline::after { content: ''; position: absolute; inset: 4px; z-index: 0; border: 1px solid #ffedbf22; pointer-events: none; }
.classic-download.classic-download--outline::before { content: none; }
.classic-register:hover,
.classic-download.classic-download--outline:hover { transform: translateY(-2px); filter: brightness(1.1); }
.classic-action-icon { position: relative; z-index: 1; display: grid !important; place-items: center; width: 38px; height: 38px; border: 1px solid #f3d89d66; border-radius: 50%; background: #241a14a8; color: #f9dfa0; }
.classic-action-icon svg { width: 20px; height: 20px; }
.classic-action-copy { position: relative; z-index: 1; display: grid !important; min-width: 0; gap: 1px; }
.classic-action-copy small { overflow: hidden; color: #ead9b7; font-size: 9px; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.classic-action-copy strong { color: inherit; font-size: 17px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.classic-action-arrow { position: relative; z-index: 1; display: block !important; color: #ffe2a6; font-size: 17px; }
.classic-download-meta { width: 100%; margin: 11px 0 0; padding: 10px 6px 1px; border-top: 1px solid #d8b56c2e; border-radius: 0; background: none; color: #d7c7aa; font-size: 11px; }
.classic-download-meta a { color: #ead6aa; }

/* ---------------------------------------------------------- Ranking journal */
.classic-ranking { margin-top: 76px; padding: 34px 32px 26px; border-radius: 4px 10px 10px 4px; box-shadow: -4px 0 0 #4f3b2d, -7px 0 0 #b08b50, 0 15px 34px #0005; }
.classic-ranking::before { content: ''; position: absolute; inset: 7px; z-index: -1; border: 1px solid #a77e3d26; border-radius: 2px 7px 7px 2px; pointer-events: none; }
.rk-system-tab { position: absolute; top: -50px; left: 26px; display: flex; align-items: center; gap: 11px; min-width: 230px; min-height: 51px; padding: 8px 28px 8px 17px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); background: linear-gradient(180deg, #7e424c, #5b2d36); color: #f8e8c1; box-shadow: inset 0 1px 0 #ffe9b04a; }
.rk-system-tab > span:last-child { display: grid; gap: 0; }
.rk-system-tab small { color: #d2ac66; font-size: 8px; font-weight: 700; letter-spacing: 1.8px; line-height: 1.35; }
.rk-system-tab strong { font-size: 15px; line-height: 1.4; }
.rk-system-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e4c27b6b; border-radius: 50%; color: #f1ce84; }
.rk-system-icon svg { width: 18px; height: 18px; }
.classic-ranking-heading { align-items: center; margin-bottom: 20px; padding-bottom: 18px; }
.classic-ranking h2 { color: #63383d; font-size: 27px; }
.rk-intro { margin: 4px 0 0; color: #7c674f; font-size: 13px; line-height: 1.55; }
.rk-updated { padding: 6px 10px; border: 1px solid #b99a6155; background: #efe1c2a3; color: #785f3c; white-space: nowrap; }
.rk-tablist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 18px; padding: 4px; border: 1px solid #a681475c; border-radius: 3px; background: #e9d8b6a8; }
.rk-tablist label { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 9px 14px; border: 0; border-right: 1px solid #a6814738; border-radius: 1px; background: transparent; color: #624b2f; font-size: 14px; }
.rk-tablist label:last-child { border-right: 0; }
.rk-tablist label > span { color: #a78551; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
#rk-level:checked ~ .rk-tablist label[for="rk-level"],
#rk-guild:checked ~ .rk-tablist label[for="rk-guild"],
#rk-pvp:checked ~ .rk-tablist label[for="rk-pvp"] { border-color: transparent; background: linear-gradient(180deg, #824650, #63343d); color: #f8e9c5; box-shadow: 0 3px 9px #5b2d3633, inset 0 -2px 0 #c49b51; }
#rk-level:checked ~ .rk-tablist label[for="rk-level"] > span,
#rk-guild:checked ~ .rk-tablist label[for="rk-guild"] > span,
#rk-pvp:checked ~ .rk-tablist label[for="rk-pvp"] > span { color: #e6c77f; }
.rk-list { gap: 8px; }
.rk-list--split { column-gap: 18px; }
.rk-row { position: relative; overflow: hidden; min-height: 67px; padding: 12px 15px; border-color: #aa854a35; background: linear-gradient(90deg, #fffaf0d9, #fbf3e2b8); box-shadow: inset 3px 0 0 transparent; transition: border-color .15s, transform .15s, box-shadow .15s; }
.rk-row:hover { z-index: 1; border-color: #9b713d70; transform: translateX(2px); box-shadow: inset 3px 0 0 #8a4a53, 0 4px 12px #6e4a2512; }
.rk-row--top1 { border-color: #ca993970; background: linear-gradient(100deg, #fff0c2, #fff8e8 68%); box-shadow: inset 4px 0 0 #c5902c; }
.rk-row--top2 { background: linear-gradient(100deg, #edf0ef, #fffaf0 68%); box-shadow: inset 4px 0 0 #969ea4; }
.rk-row--top3 { background: linear-gradient(100deg, #f3dfcc, #fff8ed 68%); box-shadow: inset 4px 0 0 #a9703e; }
.rk-row--top1::after { content: '★'; position: absolute; right: 73px; color: #c99a351f; font-size: 44px; line-height: 1; transform: rotate(12deg); }
.rk-rank { position: relative; z-index: 1; width: 36px; height: 36px; box-shadow: 0 2px 5px #4c331b18; }
.rk-who b { font-size: 16px; letter-spacing: .2px; }
.rk-score { position: relative; z-index: 1; }
.rk-score b { color: #7c3f49; font-size: 19px; }

@media (max-width: 1000px) {
    .classic-launch { grid-template-columns: minmax(0, 1fr) minmax(390px, 450px); gap: 24px; }
}
@media (max-width: 760px) {
    .classic-launch { grid-template-columns: 1fr; }
    .classic-launch-actions { max-width: 520px; width: 100%; margin: 0 auto; }
    .classic-ranking { margin-top: 70px; padding: 29px 18px 18px; }
    .rk-system-tab { left: 14px; min-width: 210px; }
    .classic-ranking-heading { align-items: flex-start; }
    .rk-tablist label { padding-inline: 8px; }
}
@media (max-width: 480px) {
    .classic-launch-actions { padding: 14px 12px 12px; }
    .classic-actions-row { grid-template-columns: 1fr; }
    .classic-register, .classic-download.classic-download--outline { min-height: 68px; }
    .classic-download-meta { justify-content: flex-start; padding-inline: 3px; }
    .classic-ranking h2 { font-size: 24px; }
    .rk-intro { font-size: 12px; }
    .rk-updated { white-space: normal; }
    .rk-tablist label { flex-direction: column; gap: 1px; min-height: 50px; padding: 7px 3px; font-size: 12px; }
    .rk-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; min-height: 62px; padding: 10px 8px; }
    .rk-rank { width: 32px; height: 32px; font-size: 12px; }
    .rk-who b { font-size: 14px; }
    .rk-who small, .rk-score small { font-size: 10px; }
    .rk-score b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .classic-register, .classic-download.classic-download--outline, .rk-row { transition: none; }
    .classic-register:hover, .classic-download.classic-download--outline:hover, .rk-row:hover { transform: none; }
}

/* Preferred hero controls: classic bevelled plaques with an antique-gold edge. */
.classic-launch-actions { padding: 0; border: 0; background: none; box-shadow: none; }
.classic-launch-actions::before,
.classic-launch-actions::after,
.classic-action-heading { display: none; }
.classic-actions-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* กรอบทองล้อมครบทุกด้าน ต้องทำสองชั้น (สูตรเดียวกับปุ่มดาวน์โหลดเดิมของเทมเพลต):
   ::before เป็นแผ่นทองเต็มใบ ::after เป็นเนื้อในที่ร่นเข้ามา 2px ขอบทองจึงโผล่เท่ากันรอบด้าน
   กรอบที่ทำด้วย linear-gradient ชั้นเดียวจะได้เส้นทองแค่ขอบบน-ล่าง เพราะ clip-path ตัดด้านเฉียงทิ้ง */
.classic-register,
.classic-download.classic-download--outline { position: relative; isolation: isolate; min-height: 74px; padding: 12px 26px; border: 0; border-radius: 0; clip-path: none; background: none; box-shadow: none; filter: drop-shadow(0 6px 9px #0008); transition: filter .2s, transform .2s; }
.classic-register::before, .classic-register::after,
.classic-download.classic-download--outline::before,
.classic-download.classic-download--outline::after { content: ''; position: absolute; inset: 0; z-index: -2; border: 0; clip-path: polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%); }
.classic-register::before,
.classic-download.classic-download--outline::before { background: linear-gradient(180deg, #f0d79b, #ac803b 48%, #785528 51%, #d2ad65); }
.classic-register::after,
.classic-download.classic-download--outline::after { inset: 2px; z-index: -1; box-shadow: inset 0 0 0 3px #e4bd6b26, inset 0 1px 0 #ffe9b25c; }
/* เนื้อในคนละโทน: สมัครเป็นไวน์ (ปุ่มหลัก) ดาวน์โหลดเป็นน้ำตาลเดิมของเทมเพลต */
.classic-register::after { background: radial-gradient(ellipse at 50% 0, #b2516840, transparent 75%), linear-gradient(180deg, #6d3a44, #4a252d 52%, #341a20); }
.classic-download.classic-download--outline::after { background: radial-gradient(ellipse at 50% 0, #b28a5140, transparent 75%), linear-gradient(180deg, #684231, #442b24 52%, #30221c); }
/* ต้องล้าง background ด้วย: กฎ hover ของดีไซน์เก่า (.classic-register:hover / --outline:hover ด้านบน)
   ยังทาสีพื้นทับอยู่ พื้นหลังวาดเป็นสี่เหลี่ยมเสมอ จึงเห็นเป็นกรอบเข้มโผล่รอบป้ายหกเหลี่ยมตอนชี้เมาส์ */
.classic-register:hover,
.classic-download.classic-download--outline:hover { background: none; filter: brightness(1.12) drop-shadow(0 8px 13px #0008); transform: translateY(-2px); }
/* โฟกัสคีย์บอร์ด: outline เป็นสี่เหลี่ยมเสมอ วาดตามป้ายหกเหลี่ยมไม่ได้ จึงโผล่เป็นกรอบลอยรอบปุ่ม
   และค้างให้เห็นหลังกดปุ่มแล้วย้อนกลับมาหน้าเดิม ใช้กรอบทองหนาขึ้นกับแสงเรืองแทน ซึ่งวิ่งตามรูปทรงจริง
   (ต้องไล่ชื่อคลาสยาวกว่ากฎ .classic-home .classic-launch a:focus-visible ด้านบน ไม่งั้นโดนทับ) */
.classic-home .classic-launch .classic-register:focus-visible,
.classic-home .classic-launch .classic-download--outline:focus-visible { outline: none; filter: brightness(1.15) drop-shadow(0 0 5px #ffdf9e) drop-shadow(0 6px 9px #0008); }
.classic-home .classic-launch .classic-register:focus-visible::after,
.classic-home .classic-launch .classic-download--outline:focus-visible::after { inset: 6px; }
.classic-action-icon { width: 36px; height: 36px; border-color: #f0d08a55; background: #160f0c66; }
.classic-action-copy small { color: #d8c4a2; }
.classic-action-copy strong { color: #ffebbd; font-size: 18px; }
.classic-action-arrow { color: #edc975; }
.classic-download-meta { width: fit-content; max-width: 100%; margin: 10px auto 0; padding: 6px 13px; border: 0; border-radius: 2px; background: #17120db3; }
@media (max-width: 480px) {
    .classic-actions-row { grid-template-columns: 1fr; gap: 9px; }
    .classic-register, .classic-download.classic-download--outline { min-height: 66px; padding-inline: 24px; }
}

/* Compact game status below the main actions. */
.realm-strip { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 20px; margin-top:13px; font-size:12px; line-height:1.6; }
.realm-indicator { display:inline-flex; align-items:center; gap:8px; color:#f4e8d0; text-shadow:0 1px 3px #000,0 0 6px #000; cursor:help; }
.realm-indicator i { display:block; width:8px; height:8px; border-radius:50%; background:#aaa; box-shadow:0 0 6px #aaa8; flex-shrink:0; }
.realm-indicator--online i { background:#65ed8a; box-shadow:0 0 4px #65ed8a,0 0 11px #32dc6ca6; }
.realm-indicator--maintenance i,.realm-indicator--offline i { background:#ff6868; box-shadow:0 0 4px #ff6868,0 0 11px #ff3939a6; }
.realm-patch-link { color:#efdfbd; text-shadow:0 1px 3px #000,0 0 6px #000; text-decoration:none; }
.realm-patch-link:hover { color:#fff5d8; text-decoration:underline; }
.realm-indicator:focus-visible,.realm-patch-link:focus-visible { outline:2px solid #e5bd71; outline-offset:4px; border-radius:2px; }

/* event band (2026-09-27): above the rankings, same paper + wine tab as the ranking book.
   .classic-home prefix outranks the old dark band in nexus.css. */
.classic-home .event-band { position: relative; isolation: isolate; margin: 76px 0 0; padding: 30px 32px 26px; border: 1px solid #b79b6a; border-radius: 4px 10px 10px 4px; background-color: #f6eedb; background-image: linear-gradient(100deg, #fff9eed9, #fff9eecc), url('../images/content-bg.webp'); background-size: auto, 100% auto; box-shadow: -4px 0 0 #4f3b2d, -7px 0 0 #b08b50, 0 15px 34px #0005; color: #4d3c2b; }
.classic-home .event-band + .classic-ranking { margin-top: 90px; }
.event-band__tab { position: absolute; top: -50px; left: 26px; display: flex; align-items: center; gap: 11px; min-width: 230px; min-height: 51px; padding: 8px 28px 8px 17px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); background: linear-gradient(180deg, #7e424c, #5b2d36); color: #f8e8c1; box-shadow: inset 0 1px 0 #ffe9b04a; }
.event-band__tab > span:last-child { display: grid; }
.event-band__tab small { color: #d2ac66; font-size: 8px; font-weight: 700; letter-spacing: 1.8px; line-height: 1.35; }
.event-band__tab strong { font-size: 15px; line-height: 1.4; }
.event-band__tab-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e4c27b6b; border-radius: 50%; color: #f1ce84; }
.event-band__tab-icon svg { width: 18px; height: 18px; }
.classic-home .event-band__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 28px; }
.classic-home .event-band__icon { margin: 0; display: grid; justify-items: center; gap: 6px; }
.classic-home .event-band__icon img { width: 64px; height: 64px; object-fit: contain; padding: 5px; background: #4c463c; border: 1px solid #b89c66; border-radius: 6px; }
.classic-home .event-band__icon figcaption { max-width: 110px; color: #8a714e; font-size: 11px; text-align: center; opacity: 1; margin: 0; }
.event-band__seal { display: grid; place-items: center; width: 64px; height: 74px; color: #ead4a5; background: #7d414b; clip-path: polygon(50% 0, 96% 20%, 96% 74%, 50% 100%, 4% 74%, 4% 20%); }
.event-band__seal svg { width: 30px; height: 30px; }
.classic-home .event-band__eyebrow { margin: 0; color: #89632d; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; }
.classic-home .event-band__title { margin: 2px 0 12px; color: #63383d; font-size: 24px; font-weight: 700; line-height: 1.4; }
.event-band__meter { max-width: 620px; }
.classic-home .event-band__figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 7px; }
.event-band__figures span { color: #8a714e; font-size: 12px; margin-right: 4px; }
.classic-home .event-band__figures strong { color: #4d3c2b; font-size: 22px; font-variant-numeric: tabular-nums; }
.event-band__figures small { color: #9a8563; font-size: 13px; }
.classic-home .event-band__figures em { margin-left: auto; color: #7d414b; font-size: 16px; font-weight: 700; font-style: normal; }
.event-band__bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 12px; border: 1px solid #b89a6877; border-radius: 7px; background: #eadcbd; overflow: hidden; }
.event-band__bar::-webkit-progress-bar { background: #eadcbd; }
.event-band__bar::-webkit-progress-value { background: linear-gradient(90deg, #b8914f, #7d414b); border-radius: 7px; }
.event-band__bar::-moz-progress-bar { background: linear-gradient(90deg, #b8914f, #7d414b); border-radius: 7px; }
.event-band__side { display: grid; justify-items: end; gap: 10px; }
.event-band__days { margin: 0; padding: 3px 12px; border: 1px solid #9aab7955; border-radius: 3px; background: #e4ead7; color: #536b43; font-size: 12px; white-space: nowrap; }
.event-band__days.is-ending { color: #8b4750; background: #efdcd8; border-color: #aa797955; }
.event-band__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 20px; border: 1px solid #a47d58; border-radius: 3px; background: linear-gradient(115deg, #884b54, #6e343f); color: #fff0d2 !important; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 10px #5b2d3633; }
.event-band__cta:hover { background: #773c47; }
.event-band__cta:focus-visible { outline: 2px solid #87464c; outline-offset: 3px; }
@media (max-width: 760px) {
    .classic-home .event-band { margin-top: 70px; padding: 26px 18px 20px; }
    .event-band__tab { left: 14px; min-width: 210px; }
    .classic-home .event-band__inner { grid-template-columns: auto minmax(0, 1fr); }
    .event-band__side { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: center; }
    .classic-home .event-band__title { font-size: 20px; }
}