/* ==========================================================================
   base.css — Delta Force Việt Nam | Cộng Đồng · v2 (foundation F)
   Tokens (v1 palette, scaled-up type) · reset · typography · layout ·
   atmosphere (fog, static grain, intel grid) · focus · reveal states ·
   reduced-motion safety net · print.
   Page CSS lives in assets/css/pages/<id>.css, scoped to body[data-page="<id>"] or .p-<id>-*.
   ========================================================================== */

:root{
  color-scheme: dark;

  /* ── surfaces: olive-graphite field kit ── */
  --bg-0:#0B0D0C;        /* page */
  --bg-1:#111412;        /* alternate band */
  --surface:#171B18;     /* card, tile, mock frame */
  --surface-2:#1E2420;   /* raised, hover, input */
  --surface-3:#252C27;   /* selected ONLY. Never --text-3 on it */
  --scrim:rgb(11 13 12 / .96);

  /* ── text (ratios on bg-0/bg-1/surface/surface-2/surface-3) ── */
  --text:#E9E7DF;        /* 15.75/14.97/14.06/12.77/11.55 */
  --text-2:#B9B8AE;      /*  9.78/ 9.30/ 8.73/ 7.93/ 7.17 */
  --text-3:#8F9088;      /*  6.05/ 5.75/ 5.40/ 4.90 — meta ≥ 12px, never on surface-3 */

  /* ── signal amber: the ONLY "act here / you" colour ── */
  --accent:#FF9F1C; --accent-hi:#FFB547; --on-accent:#0B0D0C; --accent-tint:#2A2012; --focus:#FF9F1C;

  /* ── status semantics (always icon + word, never colour alone) ── */
  --ok:#7CCB8B;     --ok-bg:#1C2B20;
  --plan:#A9ADA5;   --plan-bg:#232723;
  --intel:#6FD3E8;  --intel-bg:#16262C;
  --gated:#B8A3F2;  --gated-bg:#231F36;
  --target:#E0C063; --target-bg:#2A2414;
  --khaki:#C9B98A;  --khaki-bg:#221F14;
  --steel:#9FB0B8;  --steel-bg:#1A2226;
  --danger:#FF5A4E; --danger-bg:#2E1715; --danger-bar:#8D1B21;
  --r6:#FF4D4D;     --r6-bg:#33201F;

  /* ── paper memo (max 1 per page in v2) ── */
  --paper:#ECE6D4; --paper-2:#E2DBC6; --paper-ink:#1A1D1B; --paper-ink-2:#4B4F49;
  --stamp:#A8261F; --paper-amber:#7A5300; --paper-ok:#2E6B3B; --paper-rule:#B9B19A;

  /* ── lines & atmosphere ── */
  --line:#3A423C;              /* decorative dividers only */
  --line-strong:#6E786F;       /* control & interactive-card boundaries */
  --grid:rgb(111 211 232 / .045);          /* thin intel grid */
  --grid-strong:rgb(111 211 232 / .09);
  --topo:rgb(111 211 232 / .16); --topo-index:rgb(111 211 232 / .30);
  --fog-amber:rgb(255 159 28 / .13);
  --fog-intel:rgb(111 211 232 / .09);
  --fog-ok:rgb(124 203 139 / .12);
  --fog-dark:rgb(5 7 6 / .85);
  --grain-opacity:.045;

  /* ── typography ── */
  --ff-display:"Saira", "Barlow Condensed", system-ui, sans-serif;   /* font-stretch 75–100% */
  --ff-body:"Be Vietnam Pro", "Barlow", system-ui, sans-serif;
  --ff-mono:"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --ff-stencil:"Saira Stencil One", var(--ff-display);               /* digits + short stamps */
  --fs-h1:clamp(2.75rem, 1.2rem + 5.2vw, 6rem);          /* page H1: 44 → 96 */
  --fs-h1-home:clamp(3rem, 1.1rem + 6.1vw, 7rem);        /* Sảnh H1: 48 → 112 */
  --fs-h2:clamp(2rem, 1.3rem + 2.4vw, 3.5rem);           /* section titles: 32 → 56 */
  --fs-h3:clamp(1.25rem, 1.05rem + .6vw, 1.625rem);      /* card / feature titles */
  --fs-quote:clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --fs-lead:clamp(1.125rem, 1rem + .55vw, 1.5rem);       /* hero sub / section lede */
  --fs-body:clamp(1rem, .96rem + .15vw, 1.0625rem);
  --fs-small:.875rem;
  --fs-label:.8125rem;
  --fs-micro:.75rem;                                     /* 12 px floor */
  --fs-stat:clamp(3.5rem, 1.9rem + 5.2vw, 8rem);         /* stencil numbers: 56 → 128 */
  --fs-stat-sm:clamp(2.5rem, 1.8rem + 2.6vw, 4.5rem);
  --lh-tight:1.1; --lh-body:1.6;
  --measure:62ch; --measure-lead:46ch;

  /* ── spacing ── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:16px;             /* 24 ≥ 768, 32 ≥ 1024 */
  --container:1200px;
  --section-y:80px;          /* 104 ≥ 768, 136 ≥ 1024 */

  /* ── shape ── */
  --radius:2px; --notch:10px; --bracket-arm:14px; --bracket-w:2px; --tick:5px;

  /* ── elevation (never glow on text) ── */
  --shadow-memo:0 18px 40px -18px rgb(0 0 0 / .72);
  --shadow-pop:0 8px 24px -8px rgb(0 0 0 / .6);
  --shadow-card:0 24px 60px -30px rgb(0 0 0 / .9);
  --ring:0 0 0 2px var(--bg-0), 0 0 0 4px var(--text);

  /* ── layers ── */
  --z-base:0; --z-grain:3; --z-decor:10; --z-header:20; --z-menu:50; --z-toast:60;
  --z-transit:100; --z-skip:110;

  /* ── header ── */
  --header-h:60px;

  /* ── motion ── */
  --dur-press:90ms; --dur-hover:160ms; --dur-state:240ms; --dur-exit:160ms;
  --dur-reveal:560ms; --dur-draw:800ms; --dur-count:1000ms;
  --rise:24px;
  --ease-out:cubic-bezier(.215,.61,.355,1);      /* power2.out */
  --ease-in:cubic-bezier(.55,.055,.675,.19);     /* power2.in */
  --ease-inout:cubic-bezier(.645,.045,.355,1);   /* power2.inOut */
  --ease-p3-inout:cubic-bezier(.77,0,.175,1);    /* power3.inOut — transit close */
  --ease-expo:cubic-bezier(.19,1,.22,1);         /* expo.out */
  --ease-expo-inout:cubic-bezier(.87,0,.13,1);   /* expo.inOut — transit open */
  --ease-snap:cubic-bezier(.2,.9,.1,1);          /* bracket snap, no overshoot */

  --icon-sm:16px; --icon-md:20px; --icon-lg:24px; --icon-xl:32px;
  --topo-line:var(--topo); --topo-index-line:var(--topo-index);
}
@media (min-width:768px){ :root{ --gutter:24px; --section-y:104px; } }
@media (min-width:1024px){ :root{ --gutter:32px; --section-y:136px; } }

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-h) + 16px);
  background:var(--bg-0);
}
html.motion-ok{scroll-behavior:smooth}
body{
  position:relative;margin:0;min-height:100vh;
  background:var(--bg-0);color:var(--text);
  font:400 var(--fs-body)/var(--lh-body) var(--ff-body);
  font-synthesis-weight:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding:0}
ul[class],ol[class]{list-style:none}
img,svg,video,canvas{display:block;max-inline-size:100%}
img,video{block-size:auto}
svg:not(:root){overflow:hidden}
.i,.sprite{overflow:visible}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;border-radius:var(--radius);-webkit-tap-highlight-color:transparent}
button:not(:disabled),[role="button"]:not([aria-disabled="true"]),summary,label[for],select{cursor:pointer}
button:disabled,[aria-disabled="true"]{cursor:not-allowed}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--accent-hi)}
a:not([href]){color:inherit}
strong,b{font-weight:700}
small{font-size:var(--fs-small)}
kbd,code,samp{font-family:var(--ff-mono);font-size:.92em}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0}
[hidden]:not([hidden="until-found"]){display:none !important}
::selection{background:var(--accent);color:var(--on-accent)}
main{display:block}
main:focus{outline:none}
p,li,dd,dt,h1,h2,h3,h4,figcaption,summary{overflow-wrap:break-word}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,.h1{font-family:var(--ff-display);font-stretch:75%;font-weight:800;font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.005em;text-wrap:balance}
h2,.h2{font-family:var(--ff-display);font-stretch:75%;font-weight:800;font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.003em;text-wrap:balance}
h3,.h3{font-family:var(--ff-display);font-stretch:85%;font-weight:700;font-size:var(--fs-h3);line-height:1.2;text-wrap:balance}
h4,.h4{font-family:var(--ff-body);font-weight:700;font-size:1.0625rem;line-height:1.4}
.quote{font-family:var(--ff-display);font-stretch:75%;font-weight:700;font-size:var(--fs-quote);line-height:1.15;text-wrap:balance}
.lead{font-weight:500;font-size:var(--fs-lead);line-height:1.5;color:var(--text);max-inline-size:var(--measure-lead);text-wrap:pretty}
.small{font-size:var(--fs-small);line-height:1.55}
.muted{color:var(--text-2)}
.accent{color:var(--accent)}
.label{font:500 var(--fs-label)/1.4 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase}
.micro{font:500 var(--fs-micro)/1.4 var(--ff-mono);letter-spacing:.06em;text-transform:uppercase}
.mono,.num{font-family:var(--ff-mono);font-variant-numeric:tabular-nums slashed-zero}
.stencil{font-family:var(--ff-stencil);font-weight:400;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.upper{text-transform:uppercase}
/* big display names: balanced lines (compound words also carry U+00A0 from build.js / page sources) */
h1,h2,h3,.next-page__name,.mode-card__title,.transit__name,.deploy-cta__title{text-wrap:balance}
/* Diacritics-safe reveal mask (SplitText mask wrappers get class "line-mask").
   Exact compensation: each mask adds .22em above + .08em below; the overlap is taken ONLY as one -.30em bottom
   margin between masks (no collapsing pair), the first/last masks pull back their own padding, and the split
   block is a BFC (flow-root) so the first mask's negative margin cannot collapse through it → the split heading
   has exactly its rest height and position (no hop when the split is reverted). */
[data-split],.hero__title{display:flow-root}
.line-mask{padding:.22em 0 .08em;margin:0 0 -.30em;overflow:clip}
.line-mask:first-child{margin-top:-.22em}
.line-mask:last-child{margin-bottom:-.08em}
.token{overflow-wrap:anywhere;min-inline-size:0;word-break:normal}
.nowrap{white-space:nowrap}

/* ==========================================================================
   Layout utilities
   ========================================================================== */
.wrap{inline-size:100%;max-inline-size:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-inline-size:calc(1360px + 2 * var(--gutter))}
.wrap--narrow{max-inline-size:calc(860px + 2 * var(--gutter))}
.stack > * + *{margin-block-start:var(--s-4)}
.stack--sm > * + *{margin-block-start:var(--s-2)}
.stack--lg > * + *{margin-block-start:var(--s-6)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center}
.grid{display:grid;gap:var(--s-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){ .grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){
  .grid{gap:var(--s-5)}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.center{text-align:center;margin-inline:auto}
.sr-only{position:absolute !important;inline-size:1px !important;block-size:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;border:0 !important}

/* ==========================================================================
   Focus
   ========================================================================== */
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.memo :focus-visible,.on-paper :focus-visible{outline-color:var(--paper-ink)}
[tabindex="-1"]:focus-visible{outline:none}

/* ==========================================================================
   Atmosphere (static only — the terrain canvas is the one ambient loop)
   ========================================================================== */
/* fine static grain over the whole page (4–5 %) */
body::after{
  content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
/* thin intel grid — add .amb-grid to any band, or use .hero__grid */
.amb-grid{
  background-image:
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px);
  background-size:48px 48px;
}
/* layered radial fog — absolutely positioned decoration: <div class="fog fog--amber" aria-hidden="true"></div> */
.fog{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 55% at 78% 30%, var(--fog-amber), transparent 70%),
    radial-gradient(45% 50% at 12% 80%, var(--fog-intel), transparent 72%),
    radial-gradient(120% 80% at 50% 120%, var(--fog-dark), transparent 60%)}
.fog--amber{background:
    radial-gradient(55% 60% at 70% 40%, rgb(255 159 28 / .18), transparent 70%),
    radial-gradient(40% 40% at 20% 75%, var(--fog-intel), transparent 72%),
    radial-gradient(120% 80% at 50% 120%, var(--fog-dark), transparent 60%)}
.fog--intel{background:
    radial-gradient(60% 60% at 70% 35%, rgb(111 211 232 / .14), transparent 70%),
    radial-gradient(40% 40% at 15% 80%, rgb(255 159 28 / .07), transparent 72%),
    radial-gradient(120% 80% at 50% 120%, var(--fog-dark), transparent 60%)}
.fog--ok{background:
    radial-gradient(50% 65% at 50% 60%, rgb(124 203 139 / .18), transparent 70%),
    radial-gradient(40% 40% at 85% 20%, var(--fog-intel), transparent 72%),
    radial-gradient(120% 80% at 50% 120%, var(--fog-dark), transparent 60%)}
.topo-decor{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none;z-index:0;
  --topo-line:rgb(111 211 232 / .07);--topo-index-line:rgb(111 211 232 / .12)}
.topo-decor use{fill:none}

/* ==========================================================================
   Motion states (set by core.js — never present without JS)
   Reveals animate opacity + the individual `translate`/`scale` properties only,
   so an element's own transform (hover lift, rotation) is never touched.
   ========================================================================== */
html.intro-pending [data-intro]{opacity:0}
html.motion-ok .rv-pre{opacity:0;translate:0 var(--rise)}
html.motion-ok .rv-pre[data-reveal="fade"],html.motion-ok [data-reveal="fade"] > .rv-pre{translate:none}
html.motion-ok .rv-pre[data-reveal="left"]{translate:calc(-1 * var(--rise)) 0}
html.motion-ok .rv-pre[data-reveal="right"]{translate:var(--rise) 0}
html.motion-ok .rv-pre[data-reveal="zoom"]{translate:none;scale:.94}
html.motion-ok .rv-pre[data-reveal="stamp"]{translate:none;scale:1.35}
html.motion-ok .rv-pre[data-reveal="line"]{opacity:1;translate:none;scale:0 1;transform-origin:0 50%}
html.motion-ok .rv-pre[data-reveal="line-y"]{opacity:1;translate:none;scale:1 0;transform-origin:50% 0}
html.motion-ok .rv-run{
  transition:opacity var(--dur-reveal) var(--ease-out), translate 640ms var(--ease-expo), scale 640ms var(--ease-expo);
  transition-delay:var(--rv-delay,0ms)}
html.motion-ok .rv-run[data-reveal="line"],html.motion-ok .rv-run[data-reveal="line-y"]{transition:scale var(--dur-draw) var(--ease-inout);transition-delay:var(--rv-delay,0ms)}
html.motion-ok .rv-run[data-reveal="stamp"]{transition:opacity 180ms var(--ease-in), scale 220ms var(--ease-in);transition-delay:var(--rv-delay,0ms)}
/* CSS fallback page intro (GSAP unavailable) */
@keyframes cd-intro-up{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes cd-intro-fade{from{opacity:0}to{opacity:1}}
html.intro-css [data-intro]{animation:cd-intro-up 700ms var(--ease-expo) both;animation-delay:calc(var(--intro-i,0) * 90ms)}
html.intro-css [data-intro-fx="fade"],html.intro-css [data-intro-fx="visual"]{animation-name:cd-intro-fade;animation-duration:900ms}

/* ==========================================================================
   Reduced motion / toggle — safety net
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  html{scroll-behavior:auto !important}
}
html.motion-off *,html.motion-off *::before,html.motion-off *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
html.motion-off{scroll-behavior:auto !important}

/* ==========================================================================
   Print
   ========================================================================== */
@media print{
  :root{
    --bg-0:#fff;--bg-1:#fff;--surface:#fff;--surface-2:#fff;--surface-3:#fff;
    --text:#16181A;--text-2:#16181A;--text-3:#3a3d40;
    --accent:#8A4B00;--accent-hi:#8A4B00;--accent-tint:#fff;--focus:#8A4B00;
    --intel:#0B5E73;--danger:#B3261E;--ok:#1F6B34;--khaki:#6B5A22;--target:#6B5A22;--gated:#4B3A8A;--plan:#3a3d40;--steel:#3a3d40;--r6:#B3261E;
    --ok-bg:#fff;--plan-bg:#fff;--intel-bg:#fff;--gated-bg:#fff;--target-bg:#fff;--khaki-bg:#fff;--steel-bg:#fff;--danger-bg:#fff;--r6-bg:#fff;
    --line:#bbb;--line-strong:#777;--grid:transparent;--emblem-slot:#16181A;
  }
  html,body{background:#fff !important;color:#16181A !important}
  body::after,.fog,.amb-grid,.transit,.mmenu,.menu-btn,.toast,.skip,[data-motion-toggle],.terrain,.terrain-toggle,.hud-corners{display:none !important}
  .site-head{position:static !important;background:#fff !important}
  .site-nav{display:none !important}
  .hero,.hero--full{min-height:0 !important}
  details > *{display:block}
  [role="tabpanel"][hidden]{display:block !important}
  [data-reveal],[data-reveal] > *,[data-intro],.rv-pre{opacity:1 !important;translate:none !important;scale:none !important}
  a[href^="http"]:not(.btn)::after{content:" (" attr(href) ")";font-family:var(--ff-mono);font-size:.8em;overflow-wrap:anywhere}
}

/* ── Khoá bôi đen / kéo chữ (yêu cầu chủ dự án 01/10/2026) ──
   Kéo/vuốt chuột không còn tô chọn chữ hay kéo ảnh/icon. Ô nhập liệu, .selectable
   và danh sách kênh chính thức của Garena (liên hệ) vẫn chọn/chép được. */
html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"],.selectable,.selectable *,.p-lh-exit__list,.p-lh-exit__list *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg,a{-webkit-user-drag:none}