/* ===== Брэндийн загварууд (туршилтын, зөвхөн localhost дээр ачаалагдана) =====
   <html data-theme="airbnb"> гэх мэтээр идэвхжүүлнэ. Брэндийн DESIGN.md-ийн өнгө, булан, хэв маягаар. */

html[data-theme="airbnb"] {
  --bg: #ffffff; --bg2: #fff5f6; --ink: #222222; --mu: #6a6a6a; --pr: #ff385c; --pr2: #e00b41; --onp: #fff;
  --sur: #ffffff; --line: #ebebeb; --rb: 32px; --rc: 16px; --rs: 12px;
  --shadow: 0 6px 20px rgba(0,0,0,.10); --font: "Nunito", system-ui, sans-serif; --hfont: "Nunito", system-ui, sans-serif; --hw: 800; --btn-tt: none; --deco: 0;
}
html[data-theme="apple"] {
  --bg: #f5f5f7; --bg2: #ffffff; --ink: #1d1d1f; --mu: #6e6e73; --pr: #0066cc; --pr2: #0071e3; --onp: #fff;
  --sur: #ffffff; --line: #e0e0e0; --rb: 9999px; --rc: 18px; --rs: 11px;
  --shadow: none; --font: "Inter", system-ui, sans-serif; --hfont: "Inter", system-ui, sans-serif; --hw: 700; --btn-tt: none; --deco: 0;
}
html[data-theme="pinterest"] {
  --bg: #ffffff; --bg2: #fff0f1; --ink: #211922; --mu: #62625b; --pr: #e60023; --pr2: #cc001f; --onp: #fff;
  --sur: #f0f0ea; --line: #e5e5e0; --rb: 24px; --rc: 32px; --rs: 16px;
  --shadow: none; --font: "DM Sans", system-ui, sans-serif; --hfont: "DM Sans", system-ui, sans-serif; --hw: 700; --btn-tt: none; --deco: 0;
}
html[data-theme="spotify"] {
  --bg: #121212; --bg2: #181818; --ink: #ffffff; --mu: #b3b3b3; --pr: #1ed760; --pr2: #3be477; --onp: #000;
  --sur: #181818; --line: #2a2a2a; --rb: 9999px; --rc: 10px; --rs: 8px;
  --shadow: 0 8px 24px rgba(0,0,0,.5); --font: "Montserrat", system-ui, sans-serif; --hfont: "Montserrat", system-ui, sans-serif; --hw: 800; --btn-tt: uppercase; --deco: 0;
}
html[data-theme="playstation"] {
  --bg: #121314; --bg2: #1f2024; --ink: #ffffff; --mu: #a8adb5; --pr: #0070d1; --pr2: #1e90ff; --onp: #fff;
  --sur: #1f2024; --line: #2c2f36; --rb: 9999px; --rc: 16px; --rs: 8px;
  --shadow: 0 0 24px rgba(0,112,209,.25); --font: "Exo 2", system-ui, sans-serif; --hfont: "Exo 2", system-ui, sans-serif; --hw: 800; --btn-tt: uppercase; --deco: 0;
}
html[data-theme="linear"] {
  --bg: #010102; --bg2: #0f1011; --ink: #f7f8f8; --mu: #8a8f98; --pr: #5e6ad2; --pr2: #828fff; --onp: #fff;
  --sur: #0f1011; --line: #23252a; --rb: 8px; --rc: 12px; --rs: 6px;
  --shadow: none; --font: "Inter", system-ui, sans-serif; --hfont: "Inter", system-ui, sans-serif; --hw: 600; --btn-tt: none; --deco: 0;
}
html[data-theme="notion"] {
  --bg: #ffffff; --bg2: #f6f5f4; --ink: #0a1530; --mu: #5d6b8a; --pr: #5645d4; --pr2: #4534b3; --onp: #fff;
  --sur: #ffffff; --line: #e6e3df; --rb: 8px; --rc: 16px; --rs: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.08); --font: "Inter", system-ui, sans-serif; --hfont: "Inter", system-ui, sans-serif; --hw: 700; --btn-tt: none; --deco: 0;
}
html[data-theme="nintendo"] {
  --bg: #9fbee7; --bg2: #7a8aba; --ink: #1a2250; --mu: #3d4f97; --pr: #e60012; --pr2: #c4000f; --onp: #fff;
  --sur: #e8f0fa; --line: #60619c; --rb: 6px; --rc: 10px; --rs: 4px;
  --shadow: inset 0 1px 0 #fff, 0 2px 0 #60619c; --font: "Fredoka", system-ui, sans-serif; --hfont: "Fredoka", system-ui, sans-serif; --hw: 700; --btn-tt: none; --deco: 0;
}

/* ---------- ерөнхий ---------- */
html[data-theme] body { background: linear-gradient(160deg, var(--bg), var(--bg2)); background-attachment: fixed; color: var(--ink); font-family: var(--font); }
html[data-theme] .hearts { display: none; }
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3 { font-family: var(--hfont); font-weight: var(--hw); color: var(--ink); letter-spacing: -0.01em; text-shadow: none; }
html[data-theme] h2::after { background: var(--pr); width: 44px; height: 4px; border-radius: 4px; }
html[data-theme] #page1 h1 { color: var(--ink); text-shadow: none; }
html[data-theme] p, html[data-theme] .sub, html[data-theme] label { color: var(--ink); }
html[data-theme] .hint, html[data-theme] small, html[data-theme] .list small, html[data-theme] .coupon-state, html[data-theme] .photo-form .hint { color: var(--mu); }

/* ---------- товчнууд ---------- */
html[data-theme] button {
  font-family: var(--font); background: var(--pr); color: var(--onp); border-radius: var(--rb); box-shadow: var(--shadow);
  text-transform: var(--btn-tt); letter-spacing: 0; filter: none; border: 0;
}
html[data-theme] button:hover { background: var(--pr2); transform: translateY(-1px); filter: none; box-shadow: var(--shadow); }
html[data-theme] #noBtn { background: var(--line); color: var(--ink); box-shadow: none; }
html[data-theme] .back { background: transparent; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
html[data-theme] .back:hover { background: var(--sur); }
html[data-theme] .tab, html[data-theme] .ctab { background: transparent; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
html[data-theme] .tab.active, html[data-theme] .ctab.active { background: var(--pr); color: var(--onp); border-color: var(--pr); }
html[data-theme] .menu button {
  background: var(--sur); color: var(--ink); border: 1px solid var(--line); border-radius: var(--rc); box-shadow: var(--shadow); text-transform: none;
}
html[data-theme] .menu button:hover { background: var(--sur); border-color: var(--pr); transform: translateY(-2px); }
html[data-theme] #musicBtn { background: var(--sur); color: var(--ink); }
html[data-theme] #installBtn { background: var(--pr); color: var(--onp); }
html[data-theme] .mini, html[data-theme] .mini-text { background: var(--sur); color: var(--ink); box-shadow: none; border: 1px solid var(--line); }

/* ---------- карт, жагсаалт, форм ---------- */
html[data-theme] .photo-form, html[data-theme] .rules, html[data-theme] .saved, html[data-theme] .coupon-details {
  background: var(--sur); color: var(--ink); border: 1px solid var(--line); border-radius: var(--rc); box-shadow: var(--shadow); backdrop-filter: none;
}
html[data-theme] .list li, html[data-theme] .card, html[data-theme] .card-wrap .card {
  background: var(--sur); color: var(--ink); border: 1px solid var(--line); border-radius: var(--rc); box-shadow: var(--shadow); backdrop-filter: none;
}
html[data-theme] .coupon { background: var(--sur); color: var(--ink); border: 2px dashed var(--pr); border-radius: var(--rc); box-shadow: var(--shadow); }
html[data-theme] .gallery figure { background: var(--sur); border-radius: var(--rc); box-shadow: var(--shadow); color: var(--ink); }
html[data-theme] input[type="text"], html[data-theme] input[type="date"], html[data-theme] input[type="time"], html[data-theme] input[type="number"], html[data-theme] select, html[data-theme] textarea {
  background: var(--bg); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--rs); font-family: var(--font);
}
html[data-theme] .file-pick span { background: var(--bg); color: var(--ink); border-color: var(--line); }
html[data-theme] .rules summary, html[data-theme] .rules li { color: var(--ink); }

/* ---------- онлайн тоглоомын сайт ---------- */
html[data-theme] .game-grid button { background: var(--sur); color: var(--ink); border: 1px solid var(--line); border-radius: var(--rc); box-shadow: var(--shadow); text-transform: none; }
html[data-theme] .game-grid button:hover { border-color: var(--pr); background: var(--sur); }
html[data-theme] .game-grid button.picked { background: var(--pr); color: var(--onp); }
html[data-theme] .game-grid button:disabled { opacity: .45; }
html[data-theme] .players-tag { color: var(--pr); }
html[data-theme] .game-info, html[data-theme] .online-note { color: var(--ink); }
html[data-theme] .online-note { color: var(--pr); }
html[data-theme] .tag, html[data-theme] .l-stat { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
html[data-theme] .l-player { background: var(--sur); border-color: var(--line); }
html[data-theme] .l-player.turn { border-color: var(--pr); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pr) 30%, transparent); }
html[data-theme] .l-title, html[data-theme] .l-name { color: var(--ink); }
html[data-theme] .l-moves { background: var(--pr); color: var(--onp); }
html[data-theme] .nim-count { color: var(--pr); }
html[data-theme] .nim-btn b { color: var(--ink); }
html[data-theme] .rps-btn, html[data-theme] .nim-btn { background: var(--sur); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
html[data-theme] .pcard { border-radius: var(--rs); }
html[data-theme] .pcard.back { background: repeating-linear-gradient(45deg, var(--pr) 0 6px, var(--pr2) 6px 12px); }
html[data-theme] .mem { background: var(--sur); color: var(--ink); }

/* ---------- загвар сонгогч ---------- */
#themeBox { position: fixed; left: 10px; bottom: 10px; z-index: 99999; background: #fff; color: #222; border-radius: 12px; padding: 6px 10px; font: 600 13px system-ui, sans-serif; box-shadow: 0 4px 16px rgba(0,0,0,.35); display: flex; gap: 6px; align-items: center; }
#themeBox select { font: inherit; padding: 4px 6px; border-radius: 8px; border: 1px solid #bbb; }

/* ===== АРКАД (тоглоомын сайтын эцсийн загвар) ===== */
html[data-theme="arcade"] {
  --bg: #070711; --bg2: #0d0d22; --ink: #e8f6ff; --mu: #8a9bd6; --pr: #00e5ff; --pr2: #ffe600; --onp: #07101a;
  --sur: #0d0d22; --line: #2a2a66; --rb: 2px; --rc: 2px; --rs: 2px;
  --shadow: 0 0 14px rgba(0,229,255,.35); --font: "Rubik", system-ui, sans-serif; --hfont: "Press Start 2P", monospace; --hw: 400; --btn-tt: uppercase; --deco: 0;
  color-scheme: dark;
}
html[data-theme="arcade"] body {
  background: linear-gradient(transparent 55%, rgba(255,0,170,.16) 100%), repeating-linear-gradient(90deg, rgba(0,229,255,.07) 0 1px, transparent 1px 48px), repeating-linear-gradient(0deg, rgba(0,229,255,.07) 0 1px, transparent 1px 48px), #070711;
  background-attachment: fixed;
}
html[data-theme="arcade"] h1, html[data-theme="arcade"] h2 { color: #ff2bd6; text-shadow: 0 0 14px #ff2bd6, 3px 3px 0 #00e5ff; font-size: clamp(1.2rem, 3.4vw, 2rem); line-height: 1.4; letter-spacing: 0; }
html[data-theme="arcade"] h3 { font-size: .85rem; line-height: 1.5; letter-spacing: 0; color: #fff; }
html[data-theme="arcade"] h2::after { background: #00e5ff; box-shadow: 0 0 10px #00e5ff; height: 4px; border-radius: 0; }
html[data-theme="arcade"] button { font-weight: 700; letter-spacing: .06em; font-size: .9rem; }
html[data-theme="arcade"] .back { color: #e8f6ff; border-color: #2a2a66; }
html[data-theme="arcade"] .game-info, html[data-theme="arcade"] .online-note { font-family: "Rubik", sans-serif; }
html[data-theme="arcade"] .online-note { color: #ffe600; }
html[data-theme="arcade"] .rules { font-size: .88rem; }
html[data-theme="arcade"] .rules summary { font-family: "Press Start 2P", monospace; font-size: .62rem; line-height: 1.6; }