/* DangMua Studio site: plain HTML + this file, no scripts.
   It wears One-Rule Tactics' own look (palette, fonts, raised buttons), so the site and the game read as one thing.
   The same markup is shown inside the game, which styles it with its own .site-page rules. */
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("/assets/fonts/nunito-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-display: swap; src: url("/assets/fonts/nunito-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-display: swap; src: url("/assets/fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #f4efe6;
  --surface: #fffcf6;
  --ink: #18233a;
  --ink-soft: #5c6578;
  --line: #e2d8c7;
  --tile: #ece5d9;
  --tile-alt: #e4dbcc;
  --player: #2c67dd;
  --enemy: #df3b3f;
  --rock: #81848b;
  --gold: #f1b42f;
  --gold-ink: #3b2a05;
  --btn: #2c67dd;
  --btn-deep: #1d4fb4;
  --on-btn: #ffffff;
  /* Blue text (links, accents): darker than the button blue so it clears 4.5:1 on the cream. */
  --link: #1d4fb4;
  --grass: #8fbf6a;
  --soil: #a58e74;
  --font-display: "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 20px;
  --gutter: clamp(16px, 5vw, 40px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}
/* The game's dark palette; the site follows the device here, as it has no switch. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10182a;
    --surface: #172137;
    --ink: #edf0f7;
    --ink-soft: #9ea8bd;
    --line: #26334d;
    --tile: #1f2a42;
    --tile-alt: #1a243a;
    --player: #5f8fff;
    --enemy: #ff5d61;
    --rock: #8a93a6;
    --gold: #f4c04b;
    --btn: #3f6de0;
    --btn-deep: #2b52b8;
    --link: #8fb0ff;
    --grass: #4f7a3d;
    --soil: #5c4a3a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-block-size: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font-body); }
a { color: var(--link); text-underline-offset: 3px; font-weight: 600; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
img, svg { max-inline-size: 100%; }

.wrap { inline-size: 100%; max-inline-size: 760px; margin-inline: auto; padding-inline: var(--gutter); }

/* Top bar: like the game's, a row of raised tiles. */
.top { padding-block: 16px; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 900 18px/1 var(--font-display); }
.brand img { inline-size: 34px; block-size: 34px; flex: none; border-radius: 10px; }
.brand-name span { color: var(--link); }
.brand:hover { color: var(--ink); }
.nav { display: flex; gap: 8px; }
.nav a {
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink); font: 800 14px/1 var(--font-display); text-decoration: none; box-shadow: 0 3px 0 var(--line);
  transition: transform 80ms, box-shadow 80ms;
}
.nav a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.nav a[aria-current="page"] { border-color: var(--link); color: var(--link); }

main { flex: 1; padding-block: 8px 64px; }

/* Type */
h1, h2, h3 { font-family: var(--font-display); font-weight: 900; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
h1 { margin: 0 0 14px; font-size: clamp(34px, 7vw, 54px); }
h2 { margin: 40px 0 10px; font-size: clamp(22px, 4vw, 28px); }
h3 { margin: 24px 0 6px; font-size: 18px; font-weight: 800; }
p, li { text-wrap: pretty; }
p { color: var(--ink-soft); }
li { color: var(--ink-soft); }
strong { color: var(--ink); font-weight: 600; }
.lede { margin: 0; max-inline-size: 34em; font-size: clamp(17px, 2.4vw, 20px); color: var(--ink); }
.meta { margin: 0 0 22px; font-size: 14px; color: var(--ink-soft); }
.accent { color: var(--link); }
.crumbs { margin: 4px 0 12px; font-size: 14px; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); font-weight: 400; }

/* Hero: the headline over a strip of board tiles, as on the game's home screen. */
.hero { padding-block: clamp(24px, 6vw, 56px) 4px; }
.hero-logo { display: block; inline-size: clamp(72px, 13vw, 96px); block-size: auto; margin-block-end: 22px; border-radius: 22px; box-shadow: 0 6px 0 var(--tile-alt); }
.hero h1, .hero .lede, .hero-logo, .board-strip { animation: rise 520ms var(--ease) both; }
.hero .lede { animation-delay: 60ms; }
.board-strip { display: block; inline-size: 100%; max-inline-size: 420px; block-size: auto; margin-block: 28px 0; animation-delay: 120ms; }
.t { fill: var(--tile); } .t2 { fill: var(--tile-alt); }
.pl { fill: var(--player); } .en { fill: var(--enemy); } .rk { fill: var(--rock); }
@keyframes rise { from { opacity: 0; translate: 0 12px; } }

/* Cards: the game's surfaces, with a solid lower edge instead of a blur. */
.card, .contact {
  display: grid; gap: 14px; margin-block: 32px; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 5px 0 var(--line);
}
.card.lift { transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.card.lift:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--line); }
.card-head { display: flex; align-items: center; gap: 16px; }
.card-head img { inline-size: 72px; block-size: 72px; flex: none; border-radius: 18px; }
.card-head h2, .card-head h3, .card .card-title, .contact h2 { margin: 0; }
.card-head p { margin: 4px 0 0; font-size: 15px; }
.card p, .contact p { margin: 0; }
.contact p { color: var(--ink); }
.contact { background: color-mix(in srgb, var(--btn) 8%, var(--surface)); border-color: color-mix(in srgb, var(--btn) 30%, var(--line)); box-shadow: 0 5px 0 color-mix(in srgb, var(--btn) 25%, var(--line)); }
.tag { justify-self: start; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 26%, transparent); color: var(--ink); font: 800 13px/1 var(--font-display); }

/* Buttons: raised like the game's round buttons. */
.links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.links a, .mail {
  display: inline-flex; align-items: center; min-block-size: 46px; padding-inline: 18px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: 800 15px/1 var(--font-display); text-decoration: none; box-shadow: 0 3px 0 var(--line);
  transition: transform 80ms, box-shadow 80ms; overflow-wrap: anywhere;
}
.links a.primary, .mail { border-color: transparent; background: var(--btn); color: var(--on-btn); box-shadow: 0 4px 0 var(--btn-deep); }
.links a:hover { color: var(--link); }
.links a.primary:hover, .mail:hover { color: var(--on-btn); }
.links a:active, .mail:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-deep); }
.links a:not(.primary):active { box-shadow: 0 1px 0 var(--line); }

/* Summary box on the policy page */
.summary { margin-block: 22px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--btn) 30%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--btn) 8%, var(--surface)); }
.summary p { margin: 0; color: var(--ink); }

/* Features as board tiles; steps numbered like the game's counters. */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.features li { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 3px 0 var(--line); }
.features b { display: block; margin-block-end: 4px; color: var(--ink); font: 900 17px/1.3 var(--font-display); }
.steps { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: flex; gap: 14px; align-items: baseline; padding: 14px 16px; border-radius: 16px; background: var(--tile); color: var(--ink); }
.steps li::before {
  content: counter(s); flex: none; display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 10px;
  background: var(--btn); color: var(--on-btn); font: 900 15px/1 var(--font-display); box-shadow: 0 2px 0 var(--btn-deep); translate: 0 -2px;
}

/* FAQ: native details/summary, no script. */
.faq { margin-block-start: 10px; border-block-start: 1px solid var(--line); }
details { border-block-end: 1px solid var(--line); }
details summary { display: flex; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; list-style: none; color: var(--ink); font: 800 17px/1.35 var(--font-display); }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; flex: none; color: var(--link); font: 900 22px/1 var(--font-display); transition: rotate 200ms var(--ease); }
details[open] summary::after { rotate: 45deg; }
details p, details ol { margin-block: 0 16px; }

.foot { padding-block: 24px 32px; border-block-start: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.foot .brand { font-size: 15px; }
.foot .brand img { inline-size: 24px; block-size: 24px; border-radius: 7px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot a { color: var(--ink-soft); font-weight: 400; }

/* Phones: the brand and the two nav tiles share one row. */
@media (max-width: 420px) {
  .card, .contact { padding: 18px; }
  .top .wrap { gap: 8px; }
  .brand { gap: 8px; font-size: 16px; }
  .top .brand img { inline-size: 30px; block-size: 30px; }
  .nav { gap: 6px; }
  .nav a { padding-inline: 10px; font-size: 13px; }
}
@media (max-width: 359px) { .top .brand-name span { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}