/* ============================================================
   KLAWKLA · Equipment Upgrade Cost
   Pure B&W dark · friendly · pink accent (used sparingly).
   ============================================================ */

@font-face {
    font-family: "FC Krung Thep";
    src: url("https://klawkla.com/content/files/2025/08/FCKrungThep-Light.woff2") format("woff2"),
         url("https://klawkla.com/content/files/2025/08/FCKrungThep-Light.woff") format("woff");
    font-weight: 100 600;
    font-display: swap;
}
@font-face {
    font-family: "FC Krung Thep";
    src: url("https://klawkla.com/content/files/2026/02/FCKrungThep-Bold.woff2") format("woff2"),
         url("https://klawkla.com/content/files/2026/02/FCKrungThep-Bold.woff") format("woff");
    font-weight: 700 900;
    font-display: swap;
}
@font-face {
    font-family: "FC Maha Nakhon Flat";
    src: url("https://klawkla.com/content/files/2025/08/FCMahaNakhonFlat-Light.woff2") format("woff2"),
         url("https://klawkla.com/content/files/2025/08/FCMahaNakhonFlat-Light.woff") format("woff");
    font-weight: 100 600;
    font-display: swap;
}
@font-face {
    font-family: "FC Maha Nakhon Flat";
    src: url("https://klawkla.com/content/files/2026/02/FCMahaNakhonFlat-Bold.woff2") format("woff2"),
         url("https://klawkla.com/content/files/2026/02/FCMahaNakhonFlat-Bold.woff") format("woff");
    font-weight: 700 900;
    font-display: swap;
}

:root {
    /* pink — used sparingly: CTA */
    --pink: #ff4d8d;
    --pink-soft: rgba(255, 77, 141, 0.14);

    /* jade — total chip border */
    --jade: #2dd4a4;
    --jade-soft: rgba(45, 212, 164, 0.12);

    /* ore palette — only on ore icons and tiny dots */
    --ore-shiny:  #7cc0ff; /* แร่วิบวับ — ฟ้า */
    --ore-glowy:  #c691ff; /* แร่เรืองรอง — ม่วง */
    --ore-starry: #ffd94a; /* แร่ประกายดาว — ทอง */

    /* monochrome */
    --bg:        #0a0a0a;
    --bg-card:   #161616;
    --bg-elev:   #1d1d1d;
    --fg:        #fafafa;
    --muted:     rgba(250, 250, 250, 0.58);
    --muted-2:   rgba(250, 250, 250, 0.38);
    --line:      rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.14);

    --font-sans: "FC Krung Thep", "Noto Sans Thai", Tahoma, Helvetica, Arial, sans-serif;
    --font-serif: "FC Maha Nakhon Flat", "Noto Serif Thai", "Noto Sans Thai", Tahoma, Georgia, Times, serif;

    --space-xs: .5rem;
    --space-sm: .8rem;
    --space-md: 1.2rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4.4rem;
    --space-3xl: 6rem;

    /* small border-radius across the board */
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 68.75%; scroll-behavior: smooth; }
body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-serif);
    font-size: 1.6rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }

.wrap {
    position: relative;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ==============================================================
   Friendly section eyebrow + title
   ============================================================== */

.eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.h-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.4rem, 4.8vw, 3.2rem);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0.4rem 0 1.4rem;
}

/* ==============================================================
   Big friendly card
   ============================================================== */

.card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(2.4rem, 5vw, 3.6rem);
    overflow: hidden;
}

/* ==============================================================
   HERO
   ============================================================== */

.hero {
    padding: var(--space-2xl) 0 var(--space-xl);
}
.hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
.hero-brand {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.06em;
}
.hero-brand img {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
}
.hero-tag {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.hero-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(3.2rem, 6.8vw, 4.8rem);
    letter-spacing: -0.02em;
    line-height: 1.08;
    margin: var(--space-md) 0 var(--space-md);
    max-width: 18ch;
}
.hero-title .dot {
    color: var(--pink);
}
.hero-sub {
    font-family: var(--font-serif);
    font-size: clamp(1.55rem, 2.2vw, 1.8rem);
    color: var(--muted);
    max-width: 56ch;
    margin: 0;
    line-height: 1.7;
}

/* ==============================================================
   ORES — one big card with 3 friendly rows
   ============================================================== */

.ores { padding: var(--space-md) 0; }

.ore-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: var(--space-md);
}
.ore-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--line);
}
.ore-item:first-child { border-top: 0; padding-top: 0; }
.ore-item:last-child { padding-bottom: 0; }

.ore-icon {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    flex-shrink: 0;
}
.ore-item--shiny  .ore-icon svg path { fill: var(--ore-shiny); }
.ore-item--glowy  .ore-icon svg path { fill: var(--ore-glowy); }
.ore-item--starry .ore-icon svg path { fill: var(--ore-starry); }
.ore-item--shiny  .ore-icon { box-shadow: 0 0 14px -6px var(--ore-shiny); }
.ore-item--glowy  .ore-icon { box-shadow: 0 0 14px -6px var(--ore-glowy); }
.ore-item--starry .ore-icon { box-shadow: 0 0 16px -6px var(--ore-starry); }

.ore-meta {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}
.ore-name {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.7rem;
    margin: 0;
    letter-spacing: -0.005em;
}
.ore-desc {
    margin: 0;
    font-size: 1.4rem;
    color: var(--muted);
    line-height: 1.55;
}
.ore-price {
    font-family: var(--font-sans);
    font-size: 1.2rem;
    color: var(--fg);
    font-weight: 700;
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: .4rem 1rem;
    white-space: nowrap;
}

/* ==============================================================
   CALCULATOR
   ============================================================== */

.calc { padding: var(--space-md) 0; }

.typebar {
    display: inline-flex;
    gap: .4rem;
    margin: var(--space-md) 0 var(--space-lg);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .35rem;
}
.typebtn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.4rem;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--muted);
    border-radius: 999px;
    transition: color .2s, background .2s;
}
.typebtn:hover { color: var(--fg); }
.typebtn.is-active { color: #0a0a0a; }
.typebtn[data-type="common"].is-active { background: var(--ore-shiny); }
.typebtn[data-type="epic"].is-active   { background: var(--ore-glowy); }
.typebtn-sub {
    font-size: 1rem;
    letter-spacing: 0.06em;
    opacity: .7;
}

.calc-inputs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: var(--space-md);
    margin: var(--space-md) 0;
}
.calc-field {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.calc-label {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.calc-field input {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--fg);
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    border-radius: var(--r);
    padding: 1.1rem 1.2rem;
    width: 100%;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -moz-appearance: textfield;
    text-align: center;
}
.calc-field input::-webkit-outer-spin-button,
.calc-field input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.calc-field input:focus {
    border-color: var(--fg);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
.calc-arrow {
    font-family: var(--font-sans);
    font-size: 2rem;
    color: var(--muted);
    padding-bottom: 1.2rem;
}
@media (max-width: 640px) {
    .calc-inputs { grid-template-columns: 1fr; }
    .calc-arrow {
        justify-self: center;
        padding: 0;
        transform: rotate(90deg);
    }
}

.calc-results {
    margin-top: var(--space-lg);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}
@media (min-width: 720px) {
    .calc-results { grid-template-columns: repeat(4, 1fr); }
}

.result-chip {
    position: relative;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.result-chip--total {
    background: var(--jade-soft);
    border-color: var(--jade);
}
.result-label {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--muted);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.result-label::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: var(--fg);
}
.result-chip--shiny  .result-label::before { background: var(--ore-shiny);  box-shadow: 0 0 8px -1px var(--ore-shiny); }
.result-chip--glowy  .result-label::before { background: var(--ore-glowy);  box-shadow: 0 0 8px -1px var(--ore-glowy); }
.result-chip--starry .result-label::before { background: var(--ore-starry); box-shadow: 0 0 8px -1px var(--ore-starry); }
.result-chip--total  .result-label::before { background: var(--jade);       box-shadow: 0 0 8px -1px var(--jade); }

.result-value {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.4rem, 4vw, 3rem);
    letter-spacing: -0.01em;
    line-height: 1.05;
}
.result-sub {
    font-size: 1.25rem;
    color: var(--muted);
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
}

.calc-warning {
    grid-column: 1 / -1;
    padding: var(--space-md);
    font-size: 1.4rem;
    color: var(--muted);
    font-family: var(--font-sans);
    text-align: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
}

/* ==============================================================
   RATE TABLE — wrapped in big card
   ============================================================== */

.table-sec { padding: var(--space-md) 0 var(--space-2xl); }

.table-wrap {
    overflow-x: auto;
    margin-top: var(--space-md);
}
.rate-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    min-width: 420px;
}
.rate-table thead th {
    padding: 1rem .8rem;
    text-align: right;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--muted);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.rate-table thead th:first-child { text-align: left; }
.rate-table tbody td {
    padding: .9rem .8rem;
    text-align: right;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.rate-table tbody td:first-child {
    text-align: left;
    font-weight: 700;
    color: var(--fg);
}
.rate-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.rate-table tbody tr:last-child td { border-bottom: 0; }

.rate-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: .55rem;
    vertical-align: middle;
}
.rate-dot--shiny  { background: var(--ore-shiny);  box-shadow: 0 0 6px -1px var(--ore-shiny); }
.rate-dot--glowy  { background: var(--ore-glowy);  box-shadow: 0 0 6px -1px var(--ore-glowy); }
.rate-dot--starry { background: var(--ore-starry); box-shadow: 0 0 6px -1px var(--ore-starry); }

/* ==============================================================
   FOOTER VAULT
   ============================================================== */

.foot { padding: var(--space-2xl) 0 var(--space-3xl); }
.vault {
    text-align: center;
    padding: clamp(2.8rem, 6vw, 4.4rem);
}
.vault-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(2.2rem, 4.4vw, 3rem);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: var(--space-sm) 0 var(--space-sm);
}
.vault-sub {
    color: var(--muted);
    font-size: 1.55rem;
    margin: 0 0 var(--space-lg);
    line-height: 1.7;
}

.code-tiles {
    display: inline-flex;
    gap: .4rem;
    margin: 0 0 var(--space-lg);
}
.code-tiles span {
    display: grid; place-items: center;
    width: 36px; height: 44px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--fg);
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
}

.cta {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 1.1rem 2rem;
    color: #0a0a0a;
    background: var(--pink);
    font-family: var(--font-sans); font-weight: 700;
    font-size: 1.5rem; letter-spacing: 0.02em;
    border-radius: 999px;
    transition: transform .2s ease, filter .2s ease;
    margin-top: var(--space-sm);
}
.cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.cta-arrow { transition: transform .2s ease; }
.cta:hover .cta-arrow { transform: translateX(4px); }

.foot-secondary {
    display: inline-block;
    margin-top: var(--space-lg);
    font-family: var(--font-sans);
    font-size: 1.3rem;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding-bottom: .25rem;
    transition: color .2s, border-color .2s;
}
.foot-secondary:hover { color: var(--fg); border-color: var(--fg); }

.credit {
    text-align: center;
    font-family: var(--font-serif);
    color: var(--muted-2);
    font-size: 1.3rem;
    margin: var(--space-lg) 0 0;
}
.credit a {
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    transition: color .2s, border-color .2s;
}
.credit a:hover { color: var(--fg); border-color: var(--fg); }

/* ==============================================================
   Reveal — gentle, not bouncy
   ============================================================== */

.reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: reveal-in .6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 70ms + 100ms);
}
@keyframes reveal-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ==============================================================
   Focus rings
   ============================================================== */

:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .reveal { animation: none !important; opacity: 1; transform: none; }
}