/* Shopopolis website: the game's "Arcade" look (design/website-round-1.html, option A).
   Fonts are the game's own, served from this site (no Google Fonts, so no visitor data
   goes to Google). Colours match the game's UI (client/Assets/Scripts/UI/UiKit.cs). */
@font-face { font-family: "Lilita One"; src: url("/fonts/LilitaOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/fonts/Fredoka-SemiBold.ttf") format("truetype"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/fonts/Fredoka-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --ink: #1f2a44;
  --muted: #56627e;
  --sky-top: #bfe6ff;
  --sky: #d8f0ff;
  --grass: #8fcf6a;
  --grass-deep: #79bd55;
  --page: #eef6ff;
  --card: #ffffff;
  --card-edge: #d3e2f2;
  --blue: #3d9bf5;
  --blue-edge: #2577c9;
  --green: #3ccb6a;
  --green-edge: #27a453;
  --red: #ef5350;
  --foot: #1f2a44;
  --foot-ink: #dfe8f7;
  --link: #1f74d1;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef2fb;
    --muted: #aab6cf;
    --sky-top: #0f1b38;
    --sky: #1a2a50;
    --grass: #2f5a2a;
    --grass-deep: #284e24;
    --page: #121a2e;
    --card: #1c2742;
    --card-edge: #0c1324;
    --foot: #0b1120;
    --foot-ink: #c9d4ea;
    --link: #7cc0ff;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 500 18px/1.55 "Fredoka", ui-rounded, system-ui, sans-serif;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--card); padding: 8px 14px; border-radius: 12px; z-index: 10; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 26px "Lilita One", sans-serif; }
.brand img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.nav { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: var(--card); color: var(--ink); text-decoration: none;
  border-radius: 999px; padding: 7px 15px; font-weight: 600; font-size: 15px;
  box-shadow: 0 3px 0 var(--card-edge);
}
.chip[aria-current="page"] { background: var(--blue); color: #fff; box-shadow: 0 3px 0 var(--blue-edge); }

/* Home */
.home { background: linear-gradient(var(--sky-top), var(--sky) 300px, var(--grass) 300px, var(--grass-deep)); }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: end; padding: 16px 0 0; }
.hero h1 { font: 58px/1 "Lilita One", sans-serif; margin: 6px 0 14px; }
.hero p { font-size: 20px; margin: 0 0 22px; max-width: 470px; }
.hero .copy { padding-bottom: 72px; }
.buttons { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block; font: 22px "Lilita One", sans-serif; color: #fff; text-decoration: none;
  background: var(--green); padding: 14px 26px; border-radius: 18px; box-shadow: 0 6px 0 var(--green-edge);
  border: 0; cursor: pointer;
}
.btn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--green-edge); }
.btn.blue { background: var(--blue); box-shadow: 0 6px 0 var(--blue-edge); font-size: 19px; padding: 12px 20px; }
.btn.soon { background: var(--card); color: var(--ink); box-shadow: 0 6px 0 var(--card-edge); cursor: default; }
.btn.soon:active { transform: none; }
.phones { display: flex; gap: 14px; justify-content: center; align-items: flex-end; }
.phones img { width: 31%; max-width: 170px; border-radius: 24px; border: 5px solid #fff; box-shadow: 0 10px 0 rgba(0, 0, 0, .1); }
.phones img:nth-child(2) { max-width: 190px; width: 35%; transform: translateY(-16px); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 34px 0 44px; margin: 0; list-style: none; }
.card { background: var(--card); border-radius: 22px; padding: 18px 20px; box-shadow: 0 5px 0 rgba(31, 42, 68, .14); }
.card .ico { font-size: 30px; line-height: 1; }
.card h2 { font: 22px "Lilita One", sans-serif; margin: 8px 0 4px; }
.card p { margin: 0; font-size: 17px; }

/* Text pages (privacy, support, delete) */
.page-head { background: linear-gradient(var(--sky-top), var(--sky)); }
.page-head h1 { font: 44px/1.05 "Lilita One", sans-serif; margin: 10px 0 6px; }
.page-head .meta { color: var(--muted); font-size: 15px; margin: 0; padding-bottom: 26px; }
main.doc { padding: 22px 20px 50px; }
.doc h2 { font: 26px/1.15 "Lilita One", sans-serif; margin: 34px 0 10px; scroll-margin-top: 16px; }
.doc h3 { font-size: 20px; margin: 22px 0 6px; }
/* Long text: the system's rounded face (SF Pro Rounded on Apple devices) at regular weight
   reads easier than Fredoka, which ships here only in semi-bold and bold. */
.doc p, .doc li, .doc td { font-family: ui-rounded, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; font-weight: 400; }
.doc p, .doc li { font-size: 18px; }
.doc strong, .doc td:first-child { font-weight: 650; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 4px 0; }
.box { background: var(--card); border-radius: 22px; padding: 6px 22px 10px; margin: 18px 0; box-shadow: 0 5px 0 var(--card-edge); }
.box h2 { margin-top: 16px; }
.doc .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.doc .toc li { margin: 0; }
.toc a { display: inline-block; background: var(--card); color: var(--ink); text-decoration: none; border-radius: 999px; padding: 6px 13px; font-size: 15px; font-weight: 600; box-shadow: 0 3px 0 var(--card-edge); }
.table-scroll { overflow-x: auto; margin: 14px 0; }
.doc table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 620px; background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: 0 5px 0 var(--card-edge); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 14px; font-size: 16px; border-bottom: 1px solid var(--card-edge); }
.doc th { font-weight: 700; background: color-mix(in srgb, var(--blue) 12%, var(--card)); }
.doc tr:last-child td { border-bottom: 0; }
.doc td:first-child { white-space: nowrap; }
.doc .toc a { font-family: "Fredoka", sans-serif; font-weight: 600; }
.draft { background: #fff3cd; color: #5c4400; border-radius: 16px; padding: 12px 16px; margin: 16px 0; font-size: 16px; }

/* Forms (delete page) */
form.ask { background: var(--card); border-radius: 22px; padding: 18px 22px 22px; box-shadow: 0 5px 0 var(--card-edge); margin: 18px 0; }
form.ask label { display: block; font-weight: 700; margin: 14px 0 6px; }
form.ask .hint { font-weight: 500; color: var(--muted); font-size: 15px; }
form.ask input {
  width: 100%; font: 500 18px "Fredoka", sans-serif; color: var(--ink); background: var(--page);
  border: 2px solid var(--card-edge); border-radius: 14px; padding: 12px 14px;
}
form.ask .btn { margin-top: 20px; background: var(--red); box-shadow: 0 6px 0 #c23b38; }

/* Footer */
footer { background: var(--foot); color: var(--foot-ink); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 20px; font-weight: 600; font-size: 15px; }
footer a { color: var(--foot-ink); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .copy { margin-left: auto; opacity: .75; }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .hero { grid-template-columns: 1fr; gap: 10px; }
  .hero .copy { padding-bottom: 6px; }
  .hero h1 { font-size: 40px; }
  .home { background: linear-gradient(var(--sky-top), var(--sky) 470px, var(--grass) 470px, var(--grass-deep)); }
  .cards { grid-template-columns: 1fr; padding-top: 26px; }
  .page-head h1 { font-size: 34px; }
  .brand { font-size: 22px; }
  .brand img { width: 38px; height: 38px; }
  .chip { padding: 6px 12px; font-size: 14px; }
  footer .copy { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }