/* ============================================================
   Talento Gamer — "Night ocean-chart treasure map" identity
   Deep teal-black night sea, gold cartography ink, wax-red seals.
   ============================================================ */
:root {
  --tgFontSans: "Nunito Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tgFontDisplay: "Playfair Display", Georgia, "Times New Roman", serif;

  /* base surfaces */
  --tgColorBg: #0F2E2C;
  --tgColorBgDeep: #0A211F;
  --tgColorSurface: #173B37;
  --tgColorSurface2: #1E4842;

  /* text */
  --tgColorInk: #EDE0C8;
  --tgColorInkSoft: #D9C7A0;
  --tgColorMuted: #B7C6BB;

  /* lines & rules */
  --tgColorLine: rgba(255, 199, 44, 0.34);
  --tgColorLineSoft: rgba(255, 199, 44, 0.17);

  /* accents: saturated treasure-gold + vivid red, not muted brass/wax */
  --tgColorPrimary: #FFC72C;
  --tgColorPrimaryStrong: #FFDA5E;
  --tgColorPrimarySoft: rgba(255, 199, 44, 0.18);
  --tgColorAccent: #E8402A;
  --tgColorAccentStrong: #F0553A;
  --tgColorAccentSoft: rgba(232, 64, 42, 0.2);
  --tgColorDanger: #F0553A;
  --tgColorFocus: #FFDA5E;

  --tgGradPrimary: linear-gradient(135deg, #FFDA5E, #FFC72C);
  --tgGradAccent: linear-gradient(135deg, #F0553A, #B32A18);
  --tgGradHeadline: linear-gradient(100deg, #EDE0C8 0%, #FFDA5E 45%, #FFC72C 65%, #EDE0C8 100%);

  /* per-game map-ink colors: vivid, distinguishable hues */
  --tgPageAccent: #FFC72C;
  --tgGameGomoku: #FFC72C;
  --tgGameTermo: #1FD6A8;
  --tgGameSokoban: #E8402A;
  --tgGameNono: #D98F1F;
  --tgGameDots: #3B8FD9;

  --tgSpace1: 0.38rem; --tgSpace2: 0.7rem; --tgSpace3: 1.05rem; --tgSpace4: 1.55rem; --tgSpace5: 2.35rem; --tgSpace6: 3.5rem;
  --tgRadius1: 8px; --tgRadius2: 14px; --tgRadius3: 20px;
  --tgShadow1: 0 2px 4px rgba(4, 14, 13, 0.35), 0 10px 24px rgba(4, 14, 13, 0.35);
  --tgShadow2: 0 20px 48px rgba(3, 10, 9, 0.5);
  --tgMaxW: 1120px;

  /* chart-grid hatch, used behind the hero graphic */
  --tgChartGrid:
    repeating-linear-gradient(0deg, rgba(255, 199, 44, 0.07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255, 199, 44, 0.07) 0 1px, transparent 1px 46px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--tgFontSans); color: var(--tgColorInk);
  background-color: var(--tgColorBg);
  background-image:
    radial-gradient(900px 560px at 12% -8%, rgba(255, 199, 44, 0.14), transparent 60%),
    radial-gradient(760px 520px at 100% 0%, rgba(232, 64, 42, 0.12), transparent 60%),
    linear-gradient(180deg, #123632 0%, #0F2E2C 45%, #0A211F 100%);
  background-attachment: fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
  line-height: 1.65; font-size: clamp(1rem, 0.96rem + 0.25vw, 1.08rem);
}
h1, h2, h3, h4 { font-family: var(--tgFontDisplay); font-weight: 800; line-height: 1.16; color: var(--tgColorInk); margin: 0 0 var(--tgSpace2); letter-spacing: -0.005em; }
h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.35rem); font-weight: 700; }
p { margin: 0 0 var(--tgSpace3); }
a { color: var(--tgColorPrimaryStrong); text-decoration: underline; text-decoration-color: var(--tgColorLine); text-underline-offset: 3px; }
a:hover { color: #F6D792; text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--tgColorFocus); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }
.skipLink { position: absolute; left: -9999px; top: 0; background: var(--tgColorPrimary); color: var(--tgColorBgDeep); font-weight: 700; padding: var(--tgSpace2) var(--tgSpace3); z-index: 100; border-radius: 0 0 var(--tgRadius1) 0; }
.skipLink:focus { left: 0; }
.wrap { width: 100%; max-width: var(--tgMaxW); margin: 0 auto; padding: 0 var(--tgSpace3); }

/* ---------- top bar ---------- */
.topBar { background: rgba(10, 33, 31, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--tgColorLine); position: sticky; top: 0; z-index: 40; }
.topBarInner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--tgSpace2) var(--tgSpace3); min-height: 66px; }
#tv-stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--tgSpace3); align-items: stretch; }
.tv-bank { background: var(--tgColorSurface2); border: 1px solid var(--tgColorLineSoft); border-radius: var(--tgRadius2); padding: var(--tgSpace3); min-height: 220px; }
.tv-bank-label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tgColorMuted); margin: 0 0 var(--tgSpace2); }
.tv-slots { display: flex; flex-direction: column; gap: 0.5rem; }
.tv-slots--boat { flex-direction: row; min-height: 44px; }
.tv-chip { font: inherit; font-weight: 700; color: var(--tgColorInk); background: var(--tgColorSurface); border: 1.5px solid var(--tgColorLine); border-radius: 999px; padding: 0.45rem 0.9rem; cursor: pointer; text-align: left; }
.tv-chip:disabled { opacity: 0.45; cursor: default; }
.tv-chip:focus-visible { outline: 3px solid var(--tgColorFocus); outline-offset: 2px; }
.tv-river { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tgSpace3); background: rgba(31, 214, 168, 0.08); border-radius: var(--tgRadius2); padding: var(--tgSpace3); min-width: 190px; }
.tv-boat-lane { width: 100%; display: flex; }
.tv-boat { display: flex; align-items: center; gap: 0.5rem; font-size: 1.6rem; transition: transform 0.3s ease; }
.tv-boat--left { justify-content: flex-start; }
.tv-boat--right { margin-left: auto; }
@media (max-width: 700px) { #tv-stage { grid-template-columns: 1fr; } .tv-river { min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .tv-boat { transition: none; } }

#pc-board { display: grid; grid-template-columns: repeat(6, minmax(38px, 64px)); gap: 0; border: 3px solid var(--tgColorPrimary); border-radius: 8px; overflow: hidden; width: fit-content; margin: 0 auto; }
.pc-cell { aspect-ratio: 1 / 1; border: 0; font-size: clamp(1rem, 3.4vw, 1.5rem); font-weight: 700; cursor: pointer; padding: 0; font-family: var(--tgFontSans); }
.pc-cell--light { background: #EDE0C8; color: #0F2E2C; }
.pc-cell--dark { background: #1E4842; color: #EDE0C8; }
.pc-cell--done.pc-cell--light { background: #d9c7a0; color: #7a6a45; }
.pc-cell--done.pc-cell--dark { background: #14332f; color: #6d8a80; }
.pc-cell--knight { font-size: clamp(1.5rem, 5vw, 2.2rem); color: var(--tgColorPrimary) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.pc-cell--go { outline: 3px solid var(--tgColorPrimary); outline-offset: -3px; }
.pc-cell:disabled { cursor: default; }

.manifesto { columns: 2; column-gap: var(--tgSpace6); column-rule: 1px solid var(--tgColorLineSoft); max-width: 980px; }
.manifesto p { margin: 0 0 var(--tgSpace3); break-inside: avoid-column; }
.manifesto__initial { float: left; font-family: var(--tgFontDisplay); font-weight: 700; font-size: 3.4em; line-height: 0.82; padding: 0.04em 0.12em 0 0; color: var(--tgColorPrimary); }
@media (max-width: 720px) { .manifesto { columns: 1; } }

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand:hover { opacity: 0.88; }
.brandLogo { height: 42px; width: auto; display: block; }
.menuToggle { display: none; background: transparent; border: 1px solid var(--tgColorLine); border-radius: var(--tgRadius1); color: var(--tgColorInk); padding: 0.5rem 0.7rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.menuToggle:hover { background: var(--tgColorSurface2); }
.topMenu ul { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 0.1rem; margin: 0; padding: 0; }
.navLink { display: inline-block; padding: 0.55rem 0.8rem; border-radius: var(--tgRadius1); text-decoration: none; color: var(--tgColorInkSoft); font-weight: 700; font-size: 0.94rem; border-bottom: 2px solid transparent; }
.navLink:hover { color: var(--tgColorInk); border-bottom-color: var(--tgColorLine); }
.navLink[aria-current="page"], .navLink[aria-current="true"] { color: var(--tgColorPrimaryStrong); border-bottom-color: var(--tgColorPrimary); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: inherit; font-weight: 700; padding: 0.68rem 1.25rem; border-radius: var(--tgRadius1); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: transform 0.06s ease, filter 0.15s ease, background 0.15s ease; }
.btn:active { transform: translateY(1px); }
.btnMain { background: var(--tgGradPrimary); color: var(--tgColorBgDeep); box-shadow: 0 6px 18px rgba(255, 199, 44, 0.28); }
.btnMain:hover { filter: brightness(1.08); color: var(--tgColorBgDeep); }
.btnOutline { background: transparent; color: var(--tgColorInk); border-color: var(--tgColorAccent); }
.btnOutline:hover { background: var(--tgColorAccentSoft); color: var(--tgColorInk); }
.btnSmall { padding: 0.45rem 0.9rem; font-size: 0.88rem; }

/* ---------- hero ---------- */
.hero { padding: var(--tgSpace6) 0 var(--tgSpace5); position: relative; }
.heroTag { display: inline-block; font-family: var(--tgFontDisplay); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tgColorBgDeep); background: var(--tgGradPrimary); padding: 0.34rem 0.85rem; border-radius: 999px; margin-bottom: var(--tgSpace3); box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
.hero h1 { color: var(--tgColorInk); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 { background: var(--tgGradHeadline); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.heroLede { font-size: 1.1rem; color: var(--tgColorInkSoft); }
.heroCta { display: flex; gap: var(--tgSpace2); flex-wrap: wrap; margin-top: var(--tgSpace4); }

/* ---------- hero: full-bleed chart map, off-center pin, wax-seal CTA ---------- */
.heroMap { padding: 0; min-height: 320px; display: flex; align-items: center; overflow: hidden; background: var(--tgColorBgDeep); }
.heroMap__bg { position: absolute; inset: 0; z-index: 0; background: var(--tgChartGrid), var(--tgColorBgDeep); }
.heroMap__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; opacity: 0.85; }
.heroMap__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--tgColorBgDeep) 0%, rgba(15,46,44,0.72) 38%, rgba(15,46,44,0.18) 68%); }
.heroMap .wrap { position: relative; z-index: 1; }
.heroMap__pin { position: relative; max-width: 44ch; margin-left: 2%; padding: var(--tgSpace4) 0; }
.heroMap__pin::before { content: ""; position: absolute; left: -22px; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--tgColorPrimary); box-shadow: 0 0 0 4px rgba(217,164,65,0.25); }
.heroMap__cta { align-items: center; gap: var(--tgSpace4); }
.btnSeal { border-radius: 50%; width: 106px; height: 106px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0; font-size: 0.86rem; line-height: 1.15; box-shadow: 0 6px 16px rgba(0,0,0,0.45), inset 0 0 0 3px rgba(0,0,0,0.18); }
.heroMap__textlink { color: var(--tgColorInk); text-decoration: underline; text-decoration-color: var(--tgColorPrimary); font-weight: 700; }
.heroMap__textlink:hover { color: var(--tgColorPrimary); }
@media (max-width: 860px) {
  .heroMap { min-height: 0; padding: var(--tgSpace5) 0; }
  .heroMap__bg img { object-position: 70% 30%; opacity: 0.55; }
  .heroMap__pin { margin-left: 0; max-width: none; padding: var(--tgSpace4) 0; }
  .heroMap__pin::before { display: none; }
}

/* ---------- sections ---------- */
.section { padding: var(--tgSpace6) 0; }
.sectionTint { background: rgba(23, 59, 55, 0.55); border-block: 1px solid var(--tgColorLineSoft); }
.sectionHead { max-width: 62ch; margin-bottom: var(--tgSpace4); }
.sectionLabel { font-family: var(--tgFontDisplay); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tgColorPrimary); margin-bottom: var(--tgSpace1); }
.section p, .sectionTint p { color: var(--tgColorInkSoft); }

/* ---------- game tiles (parchment-tinted, torn corner + wax seal) ---------- */
.tileGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--tgSpace4); }
.gameCard {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(175deg, var(--tgColorSurface2), var(--tgColorSurface));
  border: 1px solid var(--tgColorLine);
  border-radius: var(--tgRadius2);
  overflow: visible;
  box-shadow: var(--tgShadow1);
  text-decoration: none; color: inherit;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.gameCard::before { content: ""; display: block; height: 4px; background: var(--tgTileAccent, var(--tgColorPrimary)); }
.gameCard::after {
  content: attr(data-letter);
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F0CE84, #C6892E);
  color: #3A2405;
  font-family: var(--tgFontDisplay); font-weight: 800; font-size: 0.92rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(58,36,5,0.35);
  z-index: 2;
}
.gameCard[href*="gomoku"] { --tgTileAccent: var(--tgGameGomoku); }
.gameCard[href*="termo"] { --tgTileAccent: var(--tgGameTermo); }
.gameCard[href*="sokoban"] { --tgTileAccent: var(--tgGameSokoban); }
.gameCard[href*="nonograma"] { --tgTileAccent: var(--tgGameNono); }
.gameCard[href*="ligue-os-pontos"] { --tgTileAccent: var(--tgGameDots); }
.gameCard:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--tgTileAccent, var(--tgColorPrimary)) 55%, var(--tgColorLine));
  box-shadow: 0 18px 38px color-mix(in srgb, var(--tgTileAccent, var(--tgColorPrimary)) 26%, transparent), var(--tgShadow1);
  color: inherit;
}
.gameCardMedia { aspect-ratio: 1 / 1; background: rgba(10, 33, 31, 0.45); border-bottom: 1px solid var(--tgColorLineSoft); }
.gameCardBody { padding: var(--tgSpace3); }
.gameCardTitle { margin-bottom: 0.25rem; font-size: 1.2rem; color: var(--tgColorInk); }
.gameCardMeta { color: var(--tgColorInkSoft); font-size: 0.9rem; margin: 0; }

/* ---------- feature cards ---------- */
.featureCols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--tgSpace4); }
.feature { background: var(--tgColorSurface); border: 1px solid var(--tgColorLine); border-radius: var(--tgRadius2); padding: var(--tgSpace4); box-shadow: var(--tgShadow1); }
.feature h3 { color: var(--tgColorPrimaryStrong); }
.feature p { color: var(--tgColorInkSoft); margin-bottom: 0; }

/* ---------- prose / long-form pages ---------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--tgSpace5); color: var(--tgColorPrimaryStrong); }
.prose h3 { margin-top: var(--tgSpace4); }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 var(--tgSpace3); }
.prose li { margin-bottom: 0.4rem; }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 var(--tgSpace3); }
.prose th, .prose td { text-align: left; padding: 0.55rem 0.7rem; border: 1px solid var(--tgColorLine); }
.prose th { background: var(--tgColorSurface2); font-family: var(--tgFontDisplay); }
.prose kbd { background: var(--tgColorSurface2); border: 1px solid var(--tgColorLine); border-radius: 4px; padding: 0.05rem 0.4rem; font-size: 0.9em; }
.wrap.prose::after { content: ""; display: table; clear: both; }
.section > .wrap.prose, .sectionTint > .wrap.prose { background: rgba(23, 59, 55, 0.4); border: 1px solid var(--tgColorLineSoft); border-radius: var(--tgRadius2); padding: var(--tgSpace4); box-shadow: var(--tgShadow1); }

.howtoFigure { float: right; width: min(42%, 260px); margin: 0.3rem 0 var(--tgSpace3) var(--tgSpace4); border-radius: var(--tgRadius2); overflow: hidden; border: 1px solid var(--tgColorLine); box-shadow: var(--tgShadow1); background: var(--tgColorSurface2); }
.howtoFigure img { width: 100%; height: auto; display: block; }
@media (max-width: 640px) { .howtoFigure { float: none; width: 100%; max-width: 340px; margin: 0 auto var(--tgSpace3); } }

/* ---------- page header / breadcrumb ---------- */
.pageHead { background: rgba(10, 33, 31, 0.55); border-bottom: 1px solid var(--tgColorLineSoft); padding: var(--tgSpace5) 0; }
.crumbNav { font-size: 0.9rem; color: var(--tgColorMuted); margin-bottom: var(--tgSpace2); }
.crumbNav a { color: var(--tgColorMuted); }
.callout { border: 1px solid var(--tgColorLine); border-left: 4px solid var(--tgColorPrimary); background: var(--tgColorPrimarySoft); border-radius: var(--tgRadius1); padding: var(--tgSpace3); margin: 0 0 var(--tgSpace4); }
.callout p { color: var(--tgColorInkSoft); margin-bottom: 0; }
.quickCard { border-left: 4px solid var(--tgTileAccent, var(--tgColorPrimary)); }

/* ---------- contact / forms ---------- */
.contactForm { display: grid; gap: var(--tgSpace3); max-width: 40rem; }
.formRow { display: grid; gap: 0.35rem; }
.formRow label { font-weight: 700; }
.formRow input, .formRow textarea, .formRow select { font: inherit; color: var(--tgColorInk); background: var(--tgColorSurface); border: 1px solid var(--tgColorLine); border-radius: var(--tgRadius1); padding: 0.6rem 0.7rem; }
.formRow textarea { min-height: 8rem; resize: vertical; }
.formNote { font-size: 0.9rem; color: var(--tgColorMuted); }
.formStatus { font-weight: 700; color: var(--tgColorPrimaryStrong); }
.contactEmailBlock { border: 1px solid var(--tgColorLine); background: var(--tgColorSurface2); border-radius: var(--tgRadius1); padding: var(--tgSpace3); margin: 0 0 var(--tgSpace4); max-width: 40rem; }
.contactEmailBlock p { margin: 0; color: var(--tgColorInkSoft); }

/* ---------- footer ---------- */
.siteFooter { background: rgba(6, 20, 19, 0.9); border-top: 1px solid var(--tgColorLine); padding: var(--tgSpace5) 0 var(--tgSpace4); margin-top: var(--tgSpace6); }
.siteFooterGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--tgSpace4); }
.siteFooter h4 { font-family: var(--tgFontDisplay); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tgColorPrimary); margin-bottom: var(--tgSpace2); }
.siteFooter ul { list-style: none; margin: 0; padding: 0; }
.siteFooter li { margin-bottom: 0.5rem; }
.siteFooter a { color: var(--tgColorInkSoft); text-decoration: none; font-size: 0.95rem; }
.siteFooter a:hover { color: var(--tgColorPrimaryStrong); text-decoration: underline; }
.footerBaseline { margin-top: var(--tgSpace4); padding-top: var(--tgSpace3); border-top: 1px solid var(--tgColorLineSoft); color: var(--tgColorMuted); font-size: 0.88rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--tgSpace2); }

/* ---------- FAQ: ledger rows, not accordion boxes ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--tgColorLine); }
.qaItem { background: transparent; border: 0; border-bottom: 1px solid var(--tgColorLineSoft); border-radius: 0; box-shadow: none; }
.qaQuestion { width: 100%; text-align: left; font: inherit; font-weight: 700; padding: var(--tgSpace3) 0.15rem; background: transparent; border: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: var(--tgSpace2); color: var(--tgColorInk); font-size: 1.02rem; }
.qaQuestion:hover { color: var(--tgColorPrimaryStrong); }
.qaSign { font-family: var(--tgFontDisplay); color: var(--tgColorPrimary); font-weight: 800; font-size: 1.15rem; flex: 0 0 auto; }
.qaAnswer { padding: 0 1.6rem var(--tgSpace3) 0.15rem; color: var(--tgColorInkSoft); }
.qaAnswer[hidden] { display: none; }

/* ---------- game shell ---------- */
.gameLayout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--tgSpace4); align-items: start; }
.gameStage { background: var(--tgColorSurface); border: 1px solid var(--tgColorLine); border-radius: var(--tgRadius2); box-shadow: var(--tgShadow1); padding: clamp(10px, 2.5vw, 22px); container-type: inline-size; }
.gamePanel { display: grid; gap: var(--tgSpace3); }
.panelCard { background: var(--tgColorSurface); border: 1px solid var(--tgColorLine); border-radius: var(--tgRadius2); padding: var(--tgSpace3); box-shadow: var(--tgShadow1); }
.statusLine { font-weight: 700; font-size: 1.02rem; margin: 0; color: var(--tgColorPrimaryStrong); }
.controlRow { display: flex; flex-wrap: wrap; gap: var(--tgSpace2); align-items: center; }
.controlRow + .controlRow { margin-top: var(--tgSpace2); }
.fieldInline { display: grid; gap: 0.3rem; flex: 1 1 120px; }
.fieldInline label { font-size: 0.85rem; font-weight: 700; color: var(--tgColorMuted); }
.fieldInline select { font: inherit; color: var(--tgColorInk); background: var(--tgColorSurface2); border: 1px solid var(--tgColorLine); border-radius: var(--tgRadius1); padding: 0.5rem; }
.scoreGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tgSpace2); text-align: center; }
.scoreGrid div { background: var(--tgColorSurface2); border-radius: var(--tgRadius1); padding: var(--tgSpace2); }
.scoreGrid strong { display: block; font-family: var(--tgFontDisplay); font-size: 1.4rem; color: var(--tgPageAccent); }
.scoreGrid span { font-size: 0.76rem; color: var(--tgColorMuted); text-transform: uppercase; letter-spacing: 0.04em; }
.dpad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 6px; justify-content: center; }
.dpad .btn { padding: 0; }
.dpad .up { grid-area: 1 / 2; } .dpad .left { grid-area: 2 / 1; } .dpad .right { grid-area: 2 / 3; } .dpad .down { grid-area: 3 / 2; }

/* ---------- Gomoku ---------- */
#gomoku-board { display: grid; aspect-ratio: 1 / 1; background: #E4D3A6; border-radius: var(--tgRadius1); overflow: hidden; padding: 1cqw; gap: 0; box-shadow: inset 0 0 0 1px rgba(58,36,5,0.3); }
.go-cell { border: 0; margin: 0; padding: 0; background: transparent; position: relative; aspect-ratio: 1 / 1; cursor: pointer; box-shadow: inset 0 0 0 0.5px rgba(58, 36, 5, 0.35); }
.go-cell::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; transform: scale(0); transition: transform 0.08s ease; }
.go-cell--you::after { transform: scale(1); background: radial-gradient(circle at 35% 30%, #2C4E49, #0A211F); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.go-cell--cpu::after { transform: scale(1); background: radial-gradient(circle at 35% 30%, #F6E7C4, #FFC72C); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* ---------- Termo ---------- */
.termo-board { display: grid; gap: 6px; justify-content: center; margin-bottom: var(--tgSpace3); }
.termo-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.termo-cell { width: 15cqw; max-width: 56px; aspect-ratio: 1 / 1; display: grid; place-items: center; font-family: var(--tgFontDisplay); font-weight: 800; font-size: clamp(1.1rem, 6cqw, 1.8rem); text-transform: uppercase; border: 2px solid var(--tgColorLine); border-radius: 6px; color: var(--tgColorInk); background: rgba(10,33,31,0.35); }
.termo-cell--filled { border-color: var(--tgColorMuted); }
.termo-cell--correct { background: var(--tgColorPrimary); border-color: var(--tgColorPrimary); color: #2E1C03; }
.termo-cell--present { background: var(--tgGameTermo); border-color: var(--tgGameTermo); color: #04231F; }
.termo-cell--absent { background: #33413C; border-color: #33413C; color: var(--tgColorInkSoft); }
.termo-keyboard { display: grid; gap: 6px; }
.termo-kbrow { display: flex; gap: 5px; justify-content: center; }
.termo-key { font: inherit; font-weight: 700; border: 0; border-radius: 6px; background: var(--tgColorSurface2); color: var(--tgColorInk); padding: 0.7rem 0.55rem; min-width: 26px; cursor: pointer; }
.termo-key:hover { background: color-mix(in srgb, var(--tgColorSurface2) 70%, var(--tgColorPrimary)); }
.termo-key--wide { padding-inline: 0.8rem; font-size: 0.85rem; }
.termo-key--correct { background: var(--tgColorPrimary); color: #2E1C03; }
.termo-key--present { background: var(--tgGameTermo); color: #04231F; }
.termo-key--absent { background: #33413C; color: var(--tgColorInkSoft); }

/* ---------- Sokoban ---------- */
#sokoban-board { display: grid; gap: 2px; aspect-ratio: 1 / 1; background: var(--tgColorBgDeep); border-radius: var(--tgRadius1); padding: 2px; }
.sok-cell { aspect-ratio: 1 / 1; border-radius: 3px; background: rgba(255, 199, 44, 0.08); position: relative; }
.sok-wall { background: #0A211F; box-shadow: inset 0 0 0 1px rgba(217,164,65,0.12); }
.sok-target { box-shadow: inset 0 0 0 3px var(--tgGameSokoban); }
.sok-target::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--tgGameSokoban); }
.sok-box { background: #D98F1F; box-shadow: inset 0 0 0 3px #7A5B2C; }
.sok-box--on { background: var(--tgColorPrimary); box-shadow: inset 0 0 0 3px var(--tgColorPrimaryStrong); }
.sok-player::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F0CE84, #FFC72C); z-index: 2; box-shadow: 0 0 0 2px rgba(15,46,44,0.6); }

/* ---------- Nonograma ---------- */
#nono-board { display: grid; gap: 2px; }
.nono-corner { background: transparent; }
.nono-clue { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: clamp(0.6rem, 2.4cqw, 0.85rem); font-weight: 700; color: var(--tgColorInkSoft); padding: 2px 4px; }
.nono-clue--col { flex-direction: column; justify-content: flex-end; gap: 1px; }
.nono-cell { aspect-ratio: 1 / 1; border: 1px solid var(--tgColorLine); border-radius: 3px; background: rgba(10, 33, 31, 0.45); cursor: pointer; padding: 0; position: relative; }
.nono-cell--fill { background: var(--tgGameNono); border-color: var(--tgGameNono); }
.nono-cell--mark::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--tgColorAccent); font-weight: 700; }

/* ---------- Ligue os Pontos ---------- */
#dots-board { display: grid; justify-content: center; align-content: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tgColorPrimary); }
.dot-edge { border: 0; padding: 0; background: transparent; cursor: pointer; }
.dot-eh { width: 100%; height: 10px; align-self: center; min-width: 26px; }
.dot-ev { height: 100%; width: 10px; justify-self: center; min-height: 26px; }
.dot-edge::after { content: ""; display: block; border-radius: 6px; background: var(--tgColorLine); }
.dot-eh::after { height: 6px; width: 100%; margin: 2px 0; }
.dot-ev::after { width: 6px; height: 100%; margin: 0 2px; }
.dot-edge:hover::after { background: color-mix(in srgb, var(--tgGameDots) 55%, var(--tgColorLine)); }
.dot-edge--on::after { background: var(--tgGameDots); }
.dot-box { width: 26px; height: 26px; display: grid; place-items: center; }
.dot-box--you { background: color-mix(in srgb, var(--tgColorPrimary) 26%, transparent); }
.dot-box--cpu { background: color-mix(in srgb, var(--tgColorAccent) 26%, transparent); }

.miniDiagram { background: var(--tgColorSurface); border: 1px solid var(--tgColorLine); border-radius: var(--tgRadius1); padding: var(--tgSpace2); }

/* ---------- consent banner / dialog (visual only) ---------- */
.consentStrip { position: fixed; left: 50%; bottom: var(--tgSpace3); transform: translateX(-50%); width: min(720px, calc(100% - 2 * var(--tgSpace3))); background: var(--tgColorSurface); border: 1px solid var(--tgColorLine); border-radius: var(--tgRadius2); box-shadow: var(--tgShadow2); padding: var(--tgSpace3); z-index: 60; }
.consentStrip[hidden] { display: none; }
.consentStrip p { font-size: 0.92rem; margin-bottom: var(--tgSpace2); color: var(--tgColorInkSoft); }
.consentActions { display: flex; flex-wrap: wrap; gap: var(--tgSpace2); }
.consentDialog { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--tgSpace3); background: rgba(4, 12, 11, 0.68); }
.consentDialog[hidden] { display: none; }
.consentDialogPanel { background: var(--tgColorSurface); border-radius: var(--tgRadius2); border: 1px solid var(--tgColorLine); max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; padding: var(--tgSpace4); box-shadow: var(--tgShadow2); }
.consentDialogPanel p { color: var(--tgColorInkSoft); }
.consentOption { display: flex; gap: var(--tgSpace2); align-items: flex-start; border: 1px solid var(--tgColorLine); border-radius: var(--tgRadius1); padding: var(--tgSpace2); margin-bottom: var(--tgSpace2); }
.consentOption input { margin-top: 0.35rem; width: 1.1rem; height: 1.1rem; accent-color: var(--tgColorPrimary); }
.consentOption label { font-weight: 700; }
.consentOption p { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--tgColorMuted); }
.consentDialogActions { display: flex; flex-wrap: wrap; gap: var(--tgSpace2); margin-top: var(--tgSpace3); }
.visuallyHidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 860px) {
  .gameLayout { grid-template-columns: 1fr; }
  .gamePanel { order: 2; }
  .menuToggle { display: inline-block; }
  .topMenu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: rgba(6, 20, 19, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--tgColorLine); padding: var(--tgSpace2) var(--tgSpace3); }
  .topMenuOpen { display: block; }
  .topMenu ul { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .navLink { display: block; }
  .footerBaseline { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }