/* Shared by every page of the site (support, privacy). Colours follow
   AppColors in lib/ui/theme.dart, so the pages look like the game. */
@font-face {
  font-family: 'Baloo2';
  src: url('/common/Baloo2-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --bg: #fff6ec;
  --card: #fffcf7;
  --panel: #fbeee0;
  --ink: #4a3428;
  --body: #6b5244;
  --soft: #8c7060;
  --line: #ebd6c1;
  --link: #b84e26;
  --coral: #ff8a5b;
  --coral-edge: #db6236;
  --honey: #ffc23d;
  --mint: #5cc79a;
  --blue: #4f9be0;
  --pink: #ff7a93;
  --shadow: rgba(112, 74, 48, 0.18);
  /* Faint paw prints, like PawBackground: the text colour at 5%. */
  --paws: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='184' height='184' viewBox='0 0 184 184'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='12' cy='15.6' rx='4.8' ry='3.9'/%3E%3Cellipse cx='5.8' cy='10.6' rx='2.2' ry='2.5'/%3E%3Cellipse cx='9.4' cy='6.6' rx='2.2' ry='2.5'/%3E%3Cellipse cx='14.6' cy='6.6' rx='2.2' ry='2.5'/%3E%3Cellipse cx='18.2' cy='10.6' rx='2.2' ry='2.5'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%234a3428' fill-opacity='.05'%3E%3Cuse href='%23p' transform='translate(14 16) rotate(-20 12 12) scale(1.1)'/%3E%3Cuse href='%23p' transform='translate(104 28) rotate(24 12 12) scale(1.3)'/%3E%3Cuse href='%23p' transform='translate(52 112) rotate(8 12 12) scale(1.2)'/%3E%3Cuse href='%23p' transform='translate(142 126) rotate(-30 12 12)'/%3E%3C/g%3E%3C/svg%3E");

  --display: 'Baloo2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC',
    'Hiragino Sans', 'Apple SD Gothic Neo', 'Microsoft YaHei', 'Yu Gothic', 'Malgun Gothic',
    'Noto Sans CJK SC', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1924;
    --card: #2d2536;
    --panel: #382f43;
    --ink: #f5e9dd;
    --body: #e0d0c2;
    --soft: #b8a79a;
    --line: #443850;
    --link: #ffa47f;
    --coral: #ff8e62;
    --coral-edge: #c8582e;
    --honey: #ffcb57;
    --mint: #63cfa2;
    --blue: #5fa8ec;
    --pink: #ff8ba2;
    --shadow: rgba(0, 0, 0, 0.4);
    --paws: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='184' height='184' viewBox='0 0 184 184'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='12' cy='15.6' rx='4.8' ry='3.9'/%3E%3Cellipse cx='5.8' cy='10.6' rx='2.2' ry='2.5'/%3E%3Cellipse cx='9.4' cy='6.6' rx='2.2' ry='2.5'/%3E%3Cellipse cx='14.6' cy='6.6' rx='2.2' ry='2.5'/%3E%3Cellipse cx='18.2' cy='10.6' rx='2.2' ry='2.5'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23f5e9dd' fill-opacity='.045'%3E%3Cuse href='%23p' transform='translate(14 16) rotate(-20 12 12) scale(1.1)'/%3E%3Cuse href='%23p' transform='translate(104 28) rotate(24 12 12) scale(1.3)'/%3E%3Cuse href='%23p' transform='translate(52 112) rotate(8 12 12) scale(1.2)'/%3E%3Cuse href='%23p' transform='translate(142 126) rotate(-30 12 12)'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* Set by the script in <head> until lang.js has put in the translation. */
.translating body {
  visibility: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  background: var(--paws) var(--bg);
}

/* Korean wraps between words, not inside them. */
:lang(ko) body {
  word-break: keep-all;
}

a {
  color: var(--link);
  font-weight: 600;
  text-underline-offset: 2px;
}

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

.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
}

/* Header */

.top {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 16px 28px;
  text-align: center;
}

.langs {
  position: absolute;
  top: 14px;
  right: 16px;
  display: none;
  align-items: center;
}

.js .langs {
  display: flex;
}

.langs svg {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  pointer-events: none;
}

.langs select {
  min-height: 40px;
  padding: 0 34px 0 38px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--card)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%238c7060' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    right 13px center no-repeat;
  box-shadow: 0 3px 0 var(--line);
  color: var(--ink);
  font: 600 15px/1 var(--ui);
  cursor: pointer;
  appearance: none;
}

.app-icon {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 26px;
  box-shadow: 0 8px 22px var(--shadow);
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: clamp(44px, 13vw, 60px);
}

/* The page's name, as a coral tag under the title. */
.page-tag {
  display: inline-block;
  padding: 4px 18px 2px;
  border-radius: 999px;
  background: var(--coral);
  box-shadow: 0 4px 0 var(--coral-edge);
  color: #fff;
  font-size: 20px;
  line-height: 1.4;
  text-shadow: 0 1px 0 var(--coral-edge);
}

.lede {
  margin: 20px auto 0;
  max-width: 30em;
  font-size: 17px;
  color: var(--soft);
}

/* The game's chunky button: a rounded face on a darker edge. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 4px 30px 0;
  border: 0;
  border-radius: 999px;
  background: var(--coral);
  box-shadow: 0 6px 0 var(--coral-edge), 0 10px 16px var(--shadow);
  color: #fff;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 2px 0 var(--coral-edge);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--coral-edge), 0 4px 8px var(--shadow);
}

.btn svg {
  width: 22px;
  height: 22px;
  margin-top: -4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Layout */

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}

.card {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--line);
}

/* Footer */

footer {
  padding: 28px 16px 36px;
  text-align: center;
  font-size: 14px;
  color: var(--soft);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-bottom: 8px;
  font-size: 15px;
}

footer nav a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

footer nav a:hover {
  text-decoration: underline;
}

footer nav a[aria-current='page'] {
  color: var(--link);
}

footer p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}