/* ==========================================================================
   JT Ragnarok Online - main stylesheet
   Self-contained: no external fonts, icons or images are requested.
   ========================================================================== */

:root {
    --bg:            #0b0d12;
    --bg-alt:        #0f131b;
    --surface:       #141926;
    --surface-2:     #1a2030;
    --border:        #242c3d;
    --border-soft:   #1c2333;

    --gold:          #d9a441;
    --gold-bright:   #f2c66d;
    --gold-dim:      #8a6a29;

    --text:          #e9ecf2;
    --text-muted:    #98a2b6;
    --text-faint:    #66708a;

    --online:        #4ade80;
    --offline:       #f87171;
    --info:          #60a5fa;

    --radius:        14px;
    --radius-sm:     9px;
    --shadow:        0 10px 30px rgba(0, 0, 0, .45);
    --maxw:          1180px;

    /* header height - the mobile menu hangs off the bottom of it, so both have
       to read from the same value or the dropdown detaches from the bar */
    --nav-h:         70px;
    --pad-x:         20px;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;   /* iOS must not inflate text in landscape */
}

body {
    margin: 0;
    background:
        radial-gradient(1100px 520px at 50% -160px, rgba(217, 164, 65, .12), transparent 70%),
        var(--bg);
    color: var(--text);
    font-family: "Segoe UI", "Leelawadee UI", "Noto Sans Thai", Tahoma, system-ui, sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;               /* nothing should ever scroll sideways */
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

/* long unbroken words (URLs, account names) must not widen the page */
h1, h2, h3, h4, p, td, th, li { overflow-wrap: anywhere; }

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    /* env() keeps content clear of the notch when the phone is on its side */
    padding-left:  max(var(--pad-x), env(safe-area-inset-left));
    padding-right: max(var(--pad-x), env(safe-area-inset-right));
}

/* ---------- header / nav ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(11, 13, 18, .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-soft);
}

.nav {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--nav-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;                     /* allow the name to shrink, not the mark */
    font-weight: 800;
    letter-spacing: .3px;
    white-space: nowrap;
}

.brand-mark {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--gold-bright), var(--gold-dim));
    color: #1a1206;
    font-weight: 900;
    font-size: 15px;
    box-shadow: 0 3px 14px rgba(217, 164, 65, .35);
}

.brand-text  { font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
.brand-text b { color: var(--gold-bright); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-wrap: wrap;
}

.nav-links a {
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-muted);
    transition: color .16s, background .16s;
}

.nav-links a:hover,
.nav-links a.is-active {
    color: var(--gold-bright);
    background: rgba(217, 164, 65, .10);
}

.nav-toggle {
    display: none;
    margin-left: auto;
    flex: none;
    width: 44px;                      /* 44px is the smallest comfortable tap target */
    height: 44px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle[aria-expanded="true"] {
    border-color: var(--gold-dim);
    color: var(--gold-bright);
    background: rgba(217, 164, 65, .12);
}

/* ---------- header auth area ---------- */

.nav-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.nav-auth .who {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.nav-auth .who .avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--gold-bright), var(--gold-dim));
    color: #1a1206;
    font-size: 11px;
    font-weight: 900;
    flex: none;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: transform .14s, box-shadow .14s, background .14s, border-color .14s;
}

.btn:hover { transform: translateY(-2px); }

.btn-gold {
    background: linear-gradient(140deg, var(--gold-bright), var(--gold));
    color: #1c1407;
    box-shadow: 0 6px 20px rgba(217, 164, 65, .3);
}
.btn-gold:hover { box-shadow: 0 10px 26px rgba(217, 164, 65, .42); }

.btn-ghost {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.btn-ghost:hover { border-color: var(--gold-dim); }

/* ---------- hero ---------- */

.hero {
    padding: 74px 0 54px;
    text-align: center;
    position: relative;
}

.hero h1 {
    margin: 0 0 12px;
    font-size: clamp(32px, 6vw, 56px);
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -.5px;
}

.hero h1 span {
    background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-sub {
    margin: 0 auto 30px;
    max-width: 640px;
    color: var(--text-muted);
    font-size: 17px;
}

.tagline {
    display: inline-block;
    margin-bottom: 20px;
    padding: 6px 15px;
    border: 1px solid var(--gold-dim);
    border-radius: 999px;
    background: rgba(217, 164, 65, .09);
    color: var(--gold-bright);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* ---------- server status ---------- */

.status-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 34px;
}

.status-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
}

.status-chip .label { color: var(--text-muted); }

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-faint);
    flex: none;
}

.status-chip.online  .dot { background: var(--online);  box-shadow: 0 0 0 4px rgba(74, 222, 128, .16); }
.status-chip.offline .dot { background: var(--offline); box-shadow: 0 0 0 4px rgba(248, 113, 113, .16); }
.status-chip.online  .state { color: var(--online); }
.status-chip.offline .state { color: var(--offline); }

/* ---------- action grid ---------- */

.actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 14px;
    margin-bottom: 12px;
}

.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    background: linear-gradient(170deg, var(--surface-2), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    transition: transform .16s, border-color .16s, box-shadow .16s;
}

.action-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold-dim);
    box-shadow: var(--shadow);
}

.action-card .ico {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(217, 164, 65, .12);
    color: var(--gold-bright);
}

.action-card .ttl  { font-weight: 700; font-size: 15.5px; }
.action-card .desc { font-size: 13px; color: var(--text-faint); }

/* ---------- sections ---------- */

.section { padding: 58px 0; }

/* the header is sticky, so an anchor jump has to stop below it */
section[id], [id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.section-head h2 {
    margin: 0;
    font-size: clamp(23px, 3.4vw, 31px);
    font-weight: 800;
}

.section-head h2 small {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.section-head .link {
    color: var(--gold-bright);
    font-weight: 700;
    font-size: 14.5px;
}
.section-head .link:hover { text-decoration: underline; }

/* ---------- news / event cards ---------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.news-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .16s, border-color .16s, box-shadow .16s;
}

.news-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold-dim);
    box-shadow: var(--shadow);
}

.news-thumb {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .92);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: .4px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    position: relative;
}

/* distinct gradient per card, no image files needed */
.g1 { background: linear-gradient(135deg, #7a2f2f, #c2643a); }
.g2 { background: linear-gradient(135deg, #23486b, #3f8fbf); }
.g3 { background: linear-gradient(135deg, #3c2a63, #7d54b8); }
.g4 { background: linear-gradient(135deg, #1f5a44, #4bb387); }
.g5 { background: linear-gradient(135deg, #6b4415, #d9a441); }
.g6 { background: linear-gradient(135deg, #5a2246, #b4508e); }

.news-body { padding: 17px 18px 20px; }

.news-tag {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(217, 164, 65, .12);
    color: var(--gold-bright);
    font-size: 12px;
    font-weight: 700;
}

.news-body h3 { margin: 0 0 7px; font-size: 17px; font-weight: 700; }
.news-body p  { margin: 0; font-size: 14px; color: var(--text-muted); }

/* ---------- hall of fame ---------- */

.fame-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 20px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.panel-head {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-2);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* sideways swipes must not navigate back */
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

th, td {
    padding: 11px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
}

th {
    color: var(--text-faint);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(217, 164, 65, .045); }

.rank {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--surface-2);
    font-weight: 800;
    font-size: 13px;
    color: var(--text-muted);
}
.rank.r1 { background: linear-gradient(140deg, #f2c66d, #b8860b); color: #1c1407; }
.rank.r2 { background: linear-gradient(140deg, #dfe3ea, #9aa3b2); color: #1c1c1c; }
.rank.r3 { background: linear-gradient(140deg, #d09a6a, #8a5a2b); color: #1c1407; }

.muted { color: var(--text-faint); }

/* ---------- info / guide blocks ---------- */

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}

.info-card {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.info-card h3 { margin: 0 0 9px; font-size: 16.5px; }
.info-card p  { margin: 0; font-size: 14px; color: var(--text-muted); }

.kv {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border-soft);
    font-size: 14.5px;
}
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--text-muted); }
.kv .v { font-weight: 700; color: var(--gold-bright); }

/* ---------- forms ---------- */

.form-card {
    max-width: 470px;
    margin-inline: auto;
    padding: 30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.field { margin-bottom: 17px; }

.field label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.field input,
.field select {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--gold-dim);
    box-shadow: 0 0 0 3px rgba(217, 164, 65, .13);
}

.field .hint { margin-top: 6px; font-size: 12.5px; color: var(--text-faint); }

.notice {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(96, 165, 250, .08);
    border-color: rgba(96, 165, 250, .3);
    font-size: 14px;
    color: #bcd7fb;
    margin-bottom: 20px;
}

.notice.warn {
    background: rgba(217, 164, 65, .08);
    border-color: rgba(217, 164, 65, .32);
    color: #f0d9a8;
}

/* ---------- page head (sub pages) ---------- */

.page-head {
    padding: 52px 0 8px;
    text-align: center;
}
.page-head h1 { margin: 0 0 8px; font-size: clamp(27px, 4.6vw, 40px); font-weight: 900; }
.page-head p  { margin: 0; color: var(--text-muted); }

/* ---------- footer ---------- */

.site-footer {
    margin-top: 50px;
    padding: 38px 0 30px;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-alt);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 26px;
    margin-bottom: 26px;
}

.footer-grid h4 {
    margin: 0 0 11px;
    font-size: 14px;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--gold);
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 7px; }
.footer-grid a  { font-size: 14px; color: var(--text-muted); }
.footer-grid a:hover { color: var(--gold-bright); }

.footer-bottom {
    padding-top: 20px;
    border-top: 1px solid var(--border-soft);
    text-align: center;
    font-size: 13px;
    color: var(--text-faint);
}

/* ==========================================================================
   Responsive
   Three steps: tablet (<=860px) turns the nav into a dropdown, phone (<=600px)
   retunes spacing and card layout, and narrow phone (<=380px) trims the rest.
   ========================================================================== */

/* ---------- tablet and below: collapsed nav ---------- */

@media (max-width: 860px) {
    .nav { gap: 12px; }
    .nav-toggle { display: block; }

    /* order: brand | auth | burger, so the login button never hides in the menu */
    .brand      { order: 1; margin-right: auto; }
    .nav-auth   { order: 2; }
    .nav-toggle { order: 3; margin-left: 0; }
    .nav-links  { order: 4; }

    .nav-links {
        position: absolute;
        top: var(--nav-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
        background: var(--bg-alt);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        /* a long menu must scroll instead of running off the screen;
           dvh accounts for the mobile browser's collapsing address bar */
        max-height: calc(100vh - var(--nav-h));
        max-height: calc(100dvh - var(--nav-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        display: none;
    }
    .nav-links.open { display: flex; }

    .nav-links a {
        padding: 13px 14px;
        font-size: 15.5px;
        border-radius: var(--radius-sm);
    }
    .nav-links a.is-active { background: rgba(217, 164, 65, .12); }

    .hero { padding: 52px 0 40px; }
    .section { padding: 46px 0; }
    th, td { padding: 10px 14px; }
}

/* ---------- phone ---------- */

@media (max-width: 600px) {
    :root { --nav-h: 58px; --pad-x: 14px; --radius: 12px; }

    .brand-mark { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
    .brand-text { font-size: 15px; }

    .nav-auth { gap: 7px; }
    .nav-auth .who  { padding: 6px 10px; font-size: 13px; }
    .nav-auth .who .name { display: none; }   /* avatar only - the name needs the room */
    .btn-sm { padding: 8px 13px; font-size: 13.5px; }

    /* hero */
    .hero { padding: 34px 0 30px; }
    .hero h1 { letter-spacing: 0; }
    .hero-sub { font-size: 15.5px; margin-bottom: 24px; }
    .tagline { margin-bottom: 16px; font-size: 12.5px; padding: 5px 13px; }

    /* status: a fixed 2-column grid reads better than centred wrapping chips */
    .status-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 26px;
    }
    .status-chip {
        justify-content: flex-start;
        gap: 8px;
        padding: 9px 12px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        min-width: 0;
        text-align: left;                 /* .hero centres text; a data row should not be */
    }
    .status-chip .label { flex: 1; min-width: 0; overflow: hidden;
                          text-overflow: ellipsis; white-space: nowrap; }
    .status-chip .state { flex: none; font-weight: 700; }

    /* actions: full-width rows (icon left, text stacked right) instead of tall
       tiles - the same five links in roughly a third of the height.
       Grid areas do this without touching the markup: the icon spans both text
       rows, and hiding .desc simply collapses its row. */
    .actions { grid-template-columns: 1fr; gap: 9px; }
    .action-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: "ico ttl"
                             "ico desc";
        align-items: center;
        column-gap: 13px;
        row-gap: 1px;
        text-align: left;
        padding: 13px 15px;
    }
    .action-card:hover { transform: none; }
    .action-card .ico  { grid-area: ico; width: 40px; height: 40px; border-radius: 10px; }
    .action-card .ico svg { width: 21px; height: 21px; }
    .action-card .ttl  { grid-area: ttl;  align-self: end;   font-size: 15px; }
    .action-card .desc { grid-area: desc; align-self: start; font-size: 12.5px; line-height: 1.45; }

    /* sections */
    .section { padding: 36px 0; }
    .section-head { margin-bottom: 18px; gap: 10px; }
    .section-head h2 small { font-size: 12px; letter-spacing: 1.1px; }
    .section-head .link { font-size: 13.5px; }

    /* cards */
    .card-grid { grid-template-columns: 1fr; gap: 14px; }
    .news-card:hover { transform: none; }
    /* a 16:9 banner per card makes the list several screens long on a phone;
       a shorter strip keeps the artwork without the endless scrolling */
    .news-thumb { aspect-ratio: 2.7 / 1; font-size: 16px; }
    .news-body { padding: 14px 15px 16px; }
    .news-body h3 { font-size: 16px; }
    .news-body p  { font-size: 13.5px; }

    .fame-grid { grid-template-columns: 1fr; gap: 14px; }
    .info-grid { grid-template-columns: 1fr; gap: 12px; }
    .info-card { padding: 17px; }
    .panel-head { padding: 12px 15px; font-size: 14.5px; }

    /* tables still scroll sideways, but the first column stays put so the row
       is identifiable while scanning the numbers */
    table { font-size: 13.5px; }
    th, td { padding: 9px 12px; }

    /* key/value rows stack once the label and value stop fitting side by side */
    .kv { flex-wrap: wrap; gap: 2px 12px; font-size: 13.5px; padding: 8px 0; }
    .kv .k { flex: 1 1 55%; min-width: 0; }
    .kv .v { flex: 0 0 auto; }

    /* forms */
    .form-card { padding: 20px 16px; border-radius: var(--radius); }
    .field { margin-bottom: 14px; }
    /* 16px stops iOS Safari from zooming in when the field gains focus */
    .field input, .field select { font-size: 16px; padding: 12px 13px; }
    .notice { padding: 11px 13px; font-size: 13.5px; margin-bottom: 16px; }

    .page-head { padding: 32px 0 6px; }

    /* stand-alone buttons go full width so they are easy to hit; the ones that
       sit inline in a bar keep their natural size */
    .btn { padding: 12px 18px; font-size: 14.5px; width: 100%; }
    .btn.btn-sm,
    .nav-auth .btn,
    .panel-head .btn { width: auto; }
    .panel-head { flex-wrap: wrap; }

    /* footer */
    .site-footer { margin-top: 34px;
                   padding: 28px 0 calc(22px + env(safe-area-inset-bottom)); }
    .footer-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
    .footer-grid h4 { margin-bottom: 8px; }
    .footer-bottom { font-size: 12.5px; }
}

/* ---------- narrow phone ---------- */

@media (max-width: 380px) {
    :root { --pad-x: 12px; }

    .status-bar { grid-template-columns: 1fr; }
    .action-card .desc { display: none; }     /* the title alone is clear enough */
    .action-card { padding: 12px 13px; }
    .brand-text { font-size: 14px; }
    th, td { padding: 8px 10px; }
}

/* ---------- respect the reduced-motion setting ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; }
    .btn:hover, .action-card:hover, .news-card:hover { transform: none; }
}