/*
 * The privacy notice: a bar docked to the bottom edge of every web page. It has two looks (privacy-consent.js sets
 * data-look). The site, and the game in pixel art, get pixel art in the pixel interface's palette and type
 * (src/pixel-ui.css): square corners, hard borders and ink outlines, no blur or soft shadows. The game in 3D gets the
 * 3D menus' deep-teal glass, serif heading and lantern-amber accent (index.html, src/title-menu.css). Behind either,
 * WebGL draws rain (privacy-consent.js); without WebGL the bar keeps the plain backdrop below.
 * The game's pixel style flattens every shadow and font on the page with !important, so the few here that make the
 * look are !important too; each look sets them through the properties below.
 */
@font-face {
  font-family: 'Rainroam Privacy Pixel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/about/fonts/pixelify-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Rainroam Privacy Pixel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/about/fonts/pixelify-sans-latin-600-normal.woff2') format('woff2');
}
#privacy-consent {
  --privacy-ink: #0f0b16;
  --privacy-night: #141a2e;
  --privacy-panel: #1b2238;
  --privacy-raised: #28314f;
  --privacy-line: #4c5883;
  --privacy-frame: #e8d9b0;
  --privacy-text: #f4efe4;
  --privacy-dim: #c3c6d6;
  --privacy-paper: #f2e6c9;
  --privacy-paper-shade: #cbb88f;
  --privacy-gold: #f7d565;
  --privacy-sky: #8ccbf0;
  --privacy-font: 'Rainroam Privacy Pixel', 'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif;
  --privacy-display: var(--privacy-font);
  /* Pixelify Sans is drawn on about 11 px to the em: its sizes here are its 1×, 1.25× and 1.5×. They are named through
     properties so the game's pixel type scale (src/pixel-type.ts), which re-steps every px font size, keeps them. */
  --privacy-size-s: 11px;
  --privacy-size-m: 13.75px;
  --privacy-size-l: 16.5px;
  /* A frame's notched ink ring, and words outlined in ink so they read over the rain. */
  --privacy-outline: 0 -2px var(--privacy-ink), 0 2px var(--privacy-ink), -2px 0 var(--privacy-ink), 2px 0 var(--privacy-ink);
  --privacy-text-shadow: 1px 0 var(--privacy-ink), -1px 0 var(--privacy-ink), 0 1px var(--privacy-ink), 0 -1px var(--privacy-ink),
    1px 1px var(--privacy-ink), -1px 1px var(--privacy-ink), 1px -1px var(--privacy-ink), -1px -1px var(--privacy-ink);
  /* The frame along the top: ink, parchment, ink (the rain effect draws its own). */
  --privacy-panel-shadow: inset 0 3px var(--privacy-ink), inset 0 6px var(--privacy-frame), inset 0 9px var(--privacy-ink), 0 -3px #0f0b1659;
  --privacy-button-shadow: inset 0 -3px var(--privacy-paper-shade), var(--privacy-outline);
  --privacy-button-pressed: inset 0 -1px var(--privacy-paper-shade), var(--privacy-outline);
  --privacy-well-shadow: var(--privacy-outline);
  --privacy-tab-shadow: var(--privacy-outline), inset 0 -2px #0f0b1680;
  position: fixed;
  z-index: 11000;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  color: var(--privacy-text);
  font: 400 var(--privacy-size-m)/1.4 var(--privacy-font);
  font-synthesis: none;
  font-variant-ligatures: none;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  user-select: text;
  -webkit-user-select: text;
  color-scheme: dark;
}
#privacy-consent, #privacy-consent * { font-family: var(--privacy-font) !important; }
#privacy-consent[data-look='pixel'], #privacy-consent[data-look='pixel'] * { letter-spacing: normal !important; }
#privacy-consent *, #privacy-consent *::before, #privacy-consent *::after { box-sizing: border-box; border-radius: 0; }
#privacy-consent [hidden] { display: none !important; }
#privacy-consent[data-placement='game'] { align-items: center; }
#privacy-consent button, #privacy-consent a { touch-action: manipulation; }
#privacy-consent button {
  appearance: none;
  margin: 0;
  font: inherit;
  color: inherit;
  text-transform: none;
  cursor: pointer;
}
/* The game's keyboard and controller navigation marks its focus with .menu-focus (src/menu-navigation.ts). */
#privacy-consent button:focus-visible, #privacy-consent a:focus-visible,
:root:not([data-input='pointer']) #privacy-consent .menu-focus {
  outline: 2px solid var(--privacy-gold);
  outline-offset: 2px;
}
#privacy-consent .privacy-icon { display: block; width: 24px; height: 24px; flex-shrink: 0; }
#privacy-consent .privacy-icon .privacy-px-a { fill: var(--privacy-text); }
#privacy-consent .privacy-icon .privacy-px-b { fill: #a9adc2; }
#privacy-consent .privacy-icon .privacy-px-c { fill: var(--privacy-sky); }
#privacy-consent .privacy-spark, #privacy-consent .privacy-x { display: none; }

/* ---------- The bar ---------- */
#privacy-panel {
  position: relative;
  width: 100%;
  pointer-events: auto;
  padding: 19px calc(16px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
  background: var(--privacy-night);
  box-shadow: var(--privacy-panel-shadow) !important;
}
#privacy-consent[data-look='pixel'][data-fx='on'] #privacy-panel { background: transparent; box-shadow: none !important; }
#privacy-consent .privacy-sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
#privacy-consent .privacy-fx { position: absolute; left: 0; top: 0; }
#privacy-consent[data-look='pixel'] .privacy-fx { image-rendering: crisp-edges; image-rendering: pixelated; }
#privacy-consent .privacy-body {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: 'details details details details' 'badge text actions close';
  align-items: center;
  column-gap: 14px;
  max-width: 1120px;
  margin: 0 auto;
}
#privacy-consent .privacy-badge { grid-area: badge; display: grid; place-items: center; width: 36px; height: 36px; }
#privacy-consent .privacy-text { grid-area: text; min-width: 0; }
#privacy-heading {
  margin: 0;
  color: var(--privacy-gold);
  font: 600 var(--privacy-size-l)/1.2 var(--privacy-display);
  text-shadow: var(--privacy-text-shadow) !important;
}
#privacy-consent #privacy-heading { font-family: var(--privacy-display) !important; }
#privacy-consent .privacy-caption {
  margin: 2px 0 0;
  color: var(--privacy-dim);
  font-size: var(--privacy-size-m);
  line-height: 1.35;
  text-shadow: var(--privacy-text-shadow) !important;
}
#privacy-consent .privacy-details {
  min-height: 24px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--privacy-gold);
  text-decoration: underline 2px;
  text-underline-offset: 3px;
  text-shadow: var(--privacy-text-shadow) !important;
}
#privacy-consent .privacy-details:hover { color: #fff1b8; }
#privacy-consent .privacy-close {
  grid-area: close;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid transparent;
  background: transparent;
  color: var(--privacy-text);
}
#privacy-consent .privacy-close:hover { color: var(--privacy-gold); background: var(--privacy-raised); border-color: var(--privacy-line); }
#privacy-consent .privacy-cross { width: 14px; height: 14px; fill: currentColor; filter: drop-shadow(1px 1px 0 var(--privacy-ink)) !important; }

/* Allow and No thanks are the same button: neither choice is dressed up over the other. */
#privacy-consent .privacy-actions { grid-area: actions; display: flex; gap: 12px; padding: 2px; }
#privacy-consent .privacy-actions button {
  min-width: 116px;
  min-height: 34px;
  padding: 6px 16px 8px;
  border: 2px solid var(--privacy-ink);
  background: var(--privacy-paper);
  color: var(--privacy-ink);
  font-weight: 600;
  font-size: var(--privacy-size-m);
  line-height: 1.2;
  box-shadow: var(--privacy-button-shadow) !important;
}
#privacy-consent .privacy-actions button:hover { background: #fff6de; }
#privacy-consent .privacy-actions button:active {
  transform: translateY(2px);
  padding-bottom: 6px;
  box-shadow: var(--privacy-button-pressed) !important;
}

#privacy-details {
  grid-area: details;
  max-height: min(340px, calc(100dvh - 170px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  margin: 0 0 12px;
  padding: 10px 12px 4px;
  border: 2px solid var(--privacy-line);
  background: var(--privacy-ink);
  box-shadow: var(--privacy-well-shadow) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--privacy-line) var(--privacy-ink);
}
#privacy-details p { max-width: 88ch; margin: 0 0 9px; color: var(--privacy-dim); font-size: var(--privacy-size-m); line-height: 1.45; }
#privacy-details .privacy-state { color: var(--privacy-gold); font-weight: 600; }
#privacy-details nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 8px; }
#privacy-details a { min-height: 24px; color: var(--privacy-text); text-decoration: underline 2px; text-underline-offset: 3px; }
#privacy-details a:hover { color: var(--privacy-gold); }

/* ---------- The minimised tab, on pages without a Privacy choices control of their own ---------- */
#privacy-consent .privacy-tab {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin: 0 0 calc(12px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
  padding: 2px 10px 2px 2px;
  border: 2px solid var(--privacy-frame);
  background: var(--privacy-panel);
  color: var(--privacy-text);
  font-size: var(--privacy-size-m);
  line-height: 1;
  box-shadow: var(--privacy-tab-shadow) !important;
}
#privacy-consent[data-placement='game'] .privacy-tab { margin: 0 0 calc(8px + env(safe-area-inset-bottom, 0px)); }
#privacy-consent .privacy-tab:hover { background: var(--privacy-raised); border-color: var(--privacy-gold); }

/* The game's title menu and startup error scroll clear of the bar (privacy-consent.js sets the height it needs). */
#overlay.title::after { content: ''; flex: 0 0 var(--privacy-reserve, 0px); }
#unsupported { padding-bottom: max(32px, calc(16px + var(--privacy-reserve, 0px))); }

/* ---------- The game in 3D: the menus' glass ---------- */
#privacy-consent[data-look='glass'] {
  --privacy-font: var(--font, 'Avenir Next Condensed', 'Futura', 'Trebuchet MS', system-ui, sans-serif);
  --privacy-display: var(--font-display, Kurale, Georgia, serif);
  --privacy-size-s: 12px;
  --privacy-size-m: 13px;
  --privacy-size-l: 20px;
  --privacy-text: var(--ui-ink, #ece6d6);
  --privacy-dim: var(--ui-dim, #a9b1a8);
  --privacy-gold: var(--ui-accent, #e5b865);
  --privacy-line: var(--ui-line, #ece6d626);
  --privacy-text-shadow: none;
  --privacy-panel-shadow: 0 -18px 50px #050b1059, inset 0 1px #ece6d614;
  --privacy-button-shadow: none;
  --privacy-button-pressed: none;
  --privacy-well-shadow: none;
}
#privacy-consent[data-look='glass'] #privacy-panel {
  padding-top: 16px;
  border-top: 1px solid var(--privacy-line);
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, #15242ad9, #0c1417ed 70%);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
/* Phones and the light presets: denser glass instead of re-blurring the live world (src/main.ts sets data-glass). */
:root[data-glass='flat'] #privacy-consent[data-look='glass'] #privacy-panel {
  background: linear-gradient(180deg, #15242af2, #0c1417f7 70%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#privacy-consent[data-look='glass'] .privacy-icon, #privacy-consent[data-look='glass'] .privacy-cross { display: none; }
#privacy-consent[data-look='glass'] .privacy-spark {
  display: block;
  width: 16px;
  height: 24px;
  background: var(--privacy-gold);
  clip-path: polygon(50% 0, 60% 37%, 100% 50%, 60% 63%, 50% 100%, 40% 63%, 0 50%, 40% 37%);
}
#privacy-consent[data-look='glass'] #privacy-heading { font-weight: 400; letter-spacing: .04em; color: var(--privacy-text); }
#privacy-consent[data-look='glass'] .privacy-caption { margin-top: 4px; letter-spacing: .02em; }
#privacy-consent[data-look='glass'] .privacy-details { text-decoration-thickness: 1px; }
#privacy-consent[data-look='glass'] .privacy-details:hover { color: #efc77a; }
#privacy-consent[data-look='glass'] .privacy-close { width: 40px; height: 40px; border: 0; border-radius: 10px; }
#privacy-consent[data-look='glass'] .privacy-close:hover { background: #ece6d614; }
#privacy-consent[data-look='glass'] .privacy-x {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
#privacy-consent[data-look='glass'] .privacy-actions { gap: 10px; }
#privacy-consent[data-look='glass'] .privacy-actions button {
  min-width: 132px;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid #ece6d633;
  border-radius: 10px;
  background: #0f191dbf;
  color: var(--privacy-text);
  font-weight: 700;
  font-size: var(--privacy-size-s);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: border-color .15s, background .15s;
}
#privacy-consent[data-look='glass'] .privacy-actions button:hover { border-color: var(--privacy-gold); background: #15242a; }
#privacy-consent[data-look='glass'] .privacy-actions button:active { transform: translateY(1px); padding-bottom: 10px; }
#privacy-consent[data-look='glass'] #privacy-details {
  padding: 12px 14px 6px;
  border: 1px solid var(--privacy-line);
  border-radius: 14px;
  background: #0c1417e6;
  scrollbar-color: #8b805c #182327;
}
#privacy-consent[data-look='glass'] #privacy-details p { line-height: 1.55; }
#privacy-consent[data-look='glass'] #privacy-details a { text-decoration-thickness: 1px; }

/* ---------- Opening ---------- */
@keyframes privacy-steps-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes privacy-rise { from { transform: translateY(100%); } to { transform: none; } }
@keyframes privacy-glass-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
#privacy-consent[data-look='pixel'][data-reveal='effect'] .privacy-body { animation: privacy-steps-in .4s steps(4, end) .12s both; }
#privacy-consent[data-look='pixel'][data-reveal='plain'] #privacy-panel { animation: privacy-rise .3s steps(5, end) both; }
#privacy-consent[data-look='glass'][data-reveal] #privacy-panel { animation: privacy-glass-in .34s cubic-bezier(.2, .8, .2, 1) both; }

/* ---------- Phones ---------- */
/* Three short rows: the badge beside the heading and caption, then the two answers side by side. */
@media (max-width: 719px) {
  #privacy-panel { padding: 17px calc(12px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px)); }
  #privacy-consent[data-look='glass'] #privacy-panel { padding-top: 12px; border-radius: 18px 18px 0 0; }
  #privacy-consent .privacy-body {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'badge heading close' 'badge caption caption' 'details details details' 'actions actions actions';
    align-items: start;
    column-gap: 10px;
  }
  #privacy-consent .privacy-text { display: contents; }
  #privacy-heading { grid-area: heading; align-self: center; }
  #privacy-consent .privacy-caption { grid-area: caption; }
  #privacy-consent .privacy-badge { width: 24px; height: 24px; margin-top: 4px; }
  #privacy-consent .privacy-close { margin: -6px -6px -4px 0; }
  #privacy-consent[data-look='glass'] .privacy-close { margin: -10px -10px -8px 0; }
  #privacy-details { margin: 10px 0 2px; }
  #privacy-consent .privacy-actions { gap: 12px; margin-top: 8px; }
  #privacy-consent .privacy-actions button { flex: 1; min-width: 0; min-height: 36px; }
  #privacy-consent[data-look='glass'] .privacy-actions button { min-height: 38px; padding-block: 8px; }
}
/* Narrow phones: the caption on Pixelify's own 11 px grid, and the heading without the badge. */
@media (max-width: 379px) {
  #privacy-consent[data-look='pixel'] .privacy-caption { font-size: var(--privacy-size-s); line-height: 1.5; }
}
@media (max-width: 359px) {
  #privacy-consent .privacy-badge { display: none; }
  #privacy-consent .privacy-body { grid-template-columns: 0 minmax(0, 1fr) auto; column-gap: 0; }
  #privacy-heading { margin-right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #privacy-consent .privacy-body, #privacy-panel { animation: none !important; }
  #privacy-consent .privacy-actions button { transition: none; }
}