/* Tiny Tides product pages: the game's own wood / parchment / lavender materials (tiny-tides web/src/style.css). */
:root {
  --tt-night: #24212d;
  --tt-dusk: #40354f;
  --tt-lavender: #6a597f;
  --tt-lavender-light: #9882a6;
  --tt-wood: #926044;
  --tt-wood-hover: #a56f4c;
  --tt-wood-light: #c29463;
  --tt-wood-dark: #52362f;
  --tt-paper: #e4d2a6;
  --tt-paper-light: #f4e5bd;
  --tt-paper-ink: #594236;
  --tt-paper-edge: #bda273;
  --tt-ink: #f6ead9;
  --tt-muted: #cdbfd2;
  --tt-glow: #ebc48d;
  --tt-bobber: #c9503f;
  --tt-focus: #fff0ba;

  --tt-font: "Nunito Sans", "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tt-text: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --tt-small: clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
  --tt-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --tt-h1: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);

  --tt-gutter: clamp(16px, 4vw, 40px);
  --tt-section: clamp(56px, 6vw + 32px, 120px);
  --tt-wide: 1160px;
  --tt-read: 46rem;
  --tt-touch: 48px;
  --tt-ease: 150ms ease;

  /* The game's stepped pixel corner. */
  --tt-cut: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 0 calc(100% - 8px));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--tt-font);
  font-size: var(--tt-text);
  line-height: 1.65;
  color: var(--tt-ink);
  background: var(--tt-night) linear-gradient(180deg, var(--tt-dusk) 0, #2f293b 520px, var(--tt-night) 1100px) no-repeat;
  overflow-x: hidden;
}

body:lang(th) { line-height: 1.8; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, .tt-hero__lede, .tt-faq summary { text-wrap: balance; }
p, li { text-wrap: pretty; }

a { color: var(--tt-glow); text-underline-offset: 3px; }
a:hover { color: var(--tt-paper-light); }

:focus-visible { outline: 3px solid var(--tt-focus); outline-offset: 3px; }

.tt-skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--tt-paper);
  color: var(--tt-paper-ink);
  font-weight: 800;
}
.tt-skip:focus { top: 12px; }

.tt-wrap { width: min(100% - 2 * var(--tt-gutter), var(--tt-wide)); margin-inline: auto; }
.tt-read { width: min(100% - 2 * var(--tt-gutter), var(--tt-read)); margin-inline: auto; }

/* ---- Materials ---- */
.tt-wood, .tt-paper, .tt-lavender { clip-path: var(--tt-cut); }

.tt-wood {
  color: #fff0d3;
  background-color: var(--tt-wood);
  background-image: repeating-linear-gradient(0deg, transparent 0 13px, #55393121 13px 15px, transparent 15px 24px);
  box-shadow: inset 0 3px 0 var(--tt-wood-light), inset 3px 0 0 #ad7c55, inset -3px 0 0 #744b39, inset 0 -5px 0 var(--tt-wood-dark);
  text-shadow: 0 2px #573931;
}

.tt-paper {
  color: var(--tt-paper-ink);
  background-color: var(--tt-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='83' height='59'%3E%3Cpath fill='%23bc9f74' opacity='.22' d='M5 13h2v1H5zM55 32h3v1h-3zM24 45h1v2h-1zM70 5h2v1h-2z'/%3E%3C/svg%3E");
  box-shadow: inset 0 3px var(--tt-paper-light), inset 3px 0 #ebdcb7, inset -3px 0 #c8b087, inset 0 -4px var(--tt-paper-edge);
}

.tt-lavender {
  color: var(--tt-ink);
  background: var(--tt-lavender);
  box-shadow: inset 0 3px var(--tt-lavender-light), inset 3px 0 #806c90, inset -3px 0 #4f415f, inset 0 -4px var(--tt-dusk);
}

.tt-paper a { color: #8a4a2c; }
.tt-paper a:hover { color: var(--tt-wood-dark); }

/* ---- Buttons ---- */
.tt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tt-touch);
  padding: 11px 22px 14px;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--tt-ease), transform var(--tt-ease);
}
.tt-button.tt-wood:hover { color: #fff0d3; background-color: var(--tt-wood-hover); }
.tt-button.tt-wood:active {
  transform: translateY(3px);
  box-shadow: inset 0 3px var(--tt-wood-dark), inset 3px 0 #6f4938, inset 0 -2px var(--tt-wood-light);
}
.tt-button.tt-lavender:hover { color: var(--tt-ink); background-color: #7a6890; }
.tt-button.tt-lavender:active { transform: translateY(3px); }
.tt-button:focus-visible { outline-offset: -7px; }

/* ---- Top bar ---- */
.tt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding-block: 14px;
}
.tt-bar__home {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tt-touch);
  color: var(--tt-ink);
  font-weight: 900;
  font-size: 1.15rem;
  text-decoration: none;
}
.tt-bar__home img { width: 40px; height: 40px; clip-path: var(--tt-cut); }
.tt-bar__nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.tt-bar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tt-touch);
  padding: 0 12px;
  color: var(--tt-muted);
  font-weight: 700;
  text-decoration: none;
}
.tt-bar__nav a:hover { color: var(--tt-ink); }
.tt-bar__nav a[aria-current="page"] { color: var(--tt-glow); box-shadow: inset 0 -3px var(--tt-glow); }

/* ---- Hero ---- */
.tt-hero { padding-top: clamp(16px, 3vw, 40px); text-align: center; }
.tt-hero h1 { margin: 0; }
.tt-hero__logo { width: min(520px, 82vw); margin-inline: auto; }
.tt-hero__lede {
  max-width: 36rem;
  margin: clamp(12px, 2vw, 20px) auto 0;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  color: var(--tt-ink);
}
.tt-hero__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.tt-chip { padding: 8px 16px 10px; font-weight: 800; font-size: var(--tt-small); }

.tt-frame {
  margin: clamp(32px, 5vw, 56px) auto 0;
  padding: 10px 10px 13px;
  filter: drop-shadow(0 18px 30px rgba(10, 6, 16, 0.55));
}
.tt-frame img { width: 100%; clip-path: var(--tt-cut); }
.tt-frame figcaption { padding: 10px 6px 0; font-size: var(--tt-small); color: #fff0d3; }

/* ---- Features ---- */
.tt-features { display: grid; gap: clamp(48px, 7vw, 96px); padding-block: var(--tt-section); }
.tt-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.tt-feature:nth-child(even) .tt-feature__art { order: 2; }
.tt-feature__art { margin: 0; padding: 8px 8px 11px; filter: drop-shadow(0 14px 22px rgba(10, 6, 16, 0.5)); }
.tt-feature__art img { width: 100%; clip-path: var(--tt-cut); }
.tt-feature h2, .tt-calm h2, .tt-help h2 {
  margin: 0 0 12px;
  font-size: var(--tt-h2);
  font-weight: 900;
  line-height: 1.15;
}
.tt-feature p { margin: 0 0 12px; color: var(--tt-muted); }
.tt-feature p:last-child { margin-bottom: 0; }
.tt-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--tt-glow);
  font-size: var(--tt-small);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tt-kicker:lang(th) { letter-spacing: 0; text-transform: none; }
/* A little float like the logo's bobber. */
.tt-kicker::before {
  content: "";
  width: 12px;
  height: 12px;
  background: linear-gradient(180deg, var(--tt-bobber) 0 40%, var(--tt-paper-light) 40% 60%, var(--tt-bobber) 60%);
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}

/* ---- Promises ---- */
.tt-calm { padding: clamp(28px, 4vw, 48px); }
.tt-calm h2 { color: var(--tt-paper-ink); }
.tt-calm__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 18px 32px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.tt-calm__list li { position: relative; padding-left: 30px; }
.tt-calm__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 16px;
  height: 12px;
  background: var(--tt-wood);
  /* A pixel tick. */
  clip-path: polygon(0 50%, 25% 50%, 25% 75%, 37.5% 75%, 37.5% 50%, 62.5% 50%, 62.5% 25%, 75% 25%, 75% 0, 100% 0, 100% 25%, 87.5% 25%, 87.5% 50%, 75% 50%, 75% 75%, 62.5% 75%, 62.5% 100%, 25% 100%, 25% 75%, 0 75%);
}
.tt-calm__list strong { display: block; font-weight: 900; }

/* ---- Help ---- */
.tt-help { padding-block: var(--tt-section); text-align: center; }
.tt-help p { margin: 0 auto 24px; max-width: 34rem; color: var(--tt-muted); }
.tt-help__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---- Document pages (support, privacy) ---- */
.tt-doc { padding-block: clamp(24px, 4vw, 48px) var(--tt-section); }
.tt-doc__head { margin-bottom: clamp(24px, 3vw, 36px); }
.tt-doc__head h1 { margin: 0 0 8px; font-size: var(--tt-h1); font-weight: 900; line-height: 1.1; }
.tt-doc__head p { margin: 0; color: var(--tt-muted); }
.tt-sheet { padding: clamp(24px, 4vw, 48px); }
.tt-sheet h2 { margin: 1.8em 0 0.4em; font-size: 1.25rem; font-weight: 900; line-height: 1.3; }
.tt-sheet h2:first-child { margin-top: 0; }
.tt-sheet p, .tt-sheet ul { margin: 0 0 1em; }
.tt-sheet ul { padding-left: 1.25em; }
.tt-sheet li { margin-bottom: 0.4em; }
.tt-sheet li::marker { color: var(--tt-wood); }
.tt-sheet :last-child { margin-bottom: 0; }
.tt-sheet__lead { font-size: 1.1em; font-weight: 700; }
.tt-note { margin-top: 20px; font-size: var(--tt-small); color: var(--tt-muted); }

.tt-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 24px;
  margin-bottom: 28px;
  padding: clamp(20px, 3vw, 32px);
}
.tt-contact h2 { margin: 0 0 4px; font-size: 1.3rem; font-weight: 900; }
.tt-contact p { margin: 0; color: var(--tt-ink); }

.tt-faq { display: grid; gap: 12px; }
.tt-faq details { padding: 0; }
.tt-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--tt-touch);
  padding: 14px 22px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.tt-faq summary::-webkit-details-marker { display: none; }
.tt-faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 10px;
  background: var(--tt-wood);
  /* A stepped pixel arrow pointing down. */
  clip-path: polygon(0 0, 100% 0, 100% 40%, 86% 40%, 86% 70%, 71% 70%, 71% 100%, 29% 100%, 29% 70%, 14% 70%, 14% 40%, 0 40%);
  transform: rotate(0deg);
  transition: transform var(--tt-ease);
}
.tt-faq details[open] summary::after { transform: rotate(180deg); }
.tt-faq summary:focus-visible { outline-color: var(--tt-wood-dark); outline-offset: -6px; }
.tt-faq__body { padding: 0 22px 18px; }
.tt-faq__body p { margin: 0 0 0.8em; }
.tt-faq__body :last-child { margin-bottom: 0; }

/* ---- Footer ---- */
.tt-foot {
  padding-block: 32px 40px;
  border-top: 3px solid var(--tt-dusk);
  font-size: var(--tt-small);
  color: var(--tt-muted);
}
.tt-foot__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.tt-foot p { margin: 0 0 6px; }
.tt-foot strong { color: var(--tt-ink); }
.tt-foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; align-content: flex-start; }
.tt-foot nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--tt-muted); }
.tt-foot nav a:hover { color: var(--tt-ink); }

@media (max-width: 760px) {
  .tt-feature { grid-template-columns: minmax(0, 1fr); }
  .tt-feature:nth-child(even) .tt-feature__art { order: 0; }
  .tt-contact { grid-template-columns: minmax(0, 1fr); }
  .tt-contact .tt-button { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .tt-button:active { transform: none; }
}