/*
 * XECO RMS themes.
 *
 * Loaded straight after pos.css. Each theme lives under html[data-theme="..."]
 * and re-states the tokens at the top of pos.css, then adds a little
 * decoration of its own. The house look ("xeco") is pos.css untouched, so it
 * has no block here. The registry, and the choice per customer, are in
 * apps/core/themes.py.
 *
 * What a theme may not touch:
 *
 *  - Sizing tokens (--font-size, --touch, --btn-lg, --tile-h ...). The density
 *    tiers at the end of pos.css turn those down on the old 1093x614 tills,
 *    and a theme selector outranks :root, so setting one here would quietly
 *    undo that tier on every small screen.
 *  - Padding and min-heights on shared components, for the same reason.
 *  - The receipt. It is black on white because that is what a thermal head
 *    prints; it looks the same in every theme, on screen and on paper.
 *  - Motion for anybody who has asked for less. Every animation below sits
 *    inside prefers-reduced-motion: no-preference.
 *
 * Decoration is kept to backgrounds, borders and pseudo-elements. No blur, no
 * backdrop-filter, nothing that repaints the page while a list scrolls: the
 * slowest till in the estate has to scroll a menu as smoothly in every theme
 * as it does in the house one.
 *
 * Fonts are shipped in static/fonts (all SIL Open Font Licence) rather than
 * fetched from a CDN, so an offline till keeps its type. A face is only
 * downloaded by a page that uses it, so the four themes' fonts cost a
 * customer on the house theme nothing.
 */

@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka.woff2") format("woff2");
             font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url("../fonts/press-start-2p.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "Exo 2"; src: url("../fonts/exo-2.woff2") format("woff2");
             font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("../fonts/orbitron.woff2") format("woff2");
             font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("../fonts/rajdhani-500.woff2") format("woff2");
             font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("../fonts/rajdhani-700.woff2") format("woff2");
             font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display.woff2") format("woff2");
             font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora.woff2") format("woff2");
             font-weight: 400 700; font-display: swap; }


/* ======================================================================
 * Cute Kitty
 * Candy pink on cream, paw prints, soft rounded everything and a sign-in
 * card with ears. Light: the one to pick for a bright cafe or a dessert bar.
 * ==================================================================== */

html[data-theme="kitty"] {
  color-scheme: light;
  --bg: #fff0f6;
  --bg-raised: #ffffff;
  --bg-sunken: #ffe4f0;
  --line: #f8c8dd;
  --text: #4a2338;
  --text-dim: #9a5f7d;

  --primary: #db2777;
  --primary-ink: #ffffff;
  --accent: #7c3aed;
  --accent-ink: #ffffff;
  --ok: #15803d;
  --warn: #c2410c;
  --danger: #e11d48;
  --danger-ink: #ffffff;

  --primary-soft: rgba(219, 39, 119, 0.09);
  --primary-tint: rgba(219, 39, 119, 0.15);
  --ok-soft: rgba(21, 128, 61, 0.10);
  --accent-soft: rgba(124, 58, 237, 0.10);
  --warn-soft: rgba(194, 65, 12, 0.10);
  --danger-soft: rgba(225, 29, 72, 0.09);
  --danger-glow: rgba(225, 29, 72, 0.35);
  --danger-text: #9f1239;
  --scrim: rgba(74, 35, 56, 0.35);
  --shadow: 0 10px 28px rgba(219, 39, 119, 0.22);
  --grid-line: rgba(219, 39, 119, 0.12);

  --radius: 16px;
  --radius-lg: 26px;
  --font: "Fredoka", "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-display: "Fredoka", "Nunito", "Segoe UI", system-ui, sans-serif;

  /* Paw prints, two to a tile and turned against each other so the pattern
     does not read as a grid. Faint enough to sit behind type. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23db2777' fill-opacity='0.06'%3E%3Cg transform='translate(18 20) rotate(-18 20 20)'%3E%3Cellipse cx='20' cy='27' rx='9' ry='7.5'/%3E%3Cellipse cx='8' cy='15' rx='3.6' ry='5'/%3E%3Cellipse cx='16' cy='8' rx='3.6' ry='5'/%3E%3Cellipse cx='25' cy='8' rx='3.6' ry='5'/%3E%3Cellipse cx='33' cy='15' rx='3.6' ry='5'/%3E%3C/g%3E%3Cg transform='translate(84 82) rotate(22 20 20)'%3E%3Cellipse cx='20' cy='27' rx='9' ry='7.5'/%3E%3Cellipse cx='8' cy='15' rx='3.6' ry='5'/%3E%3Cellipse cx='16' cy='8' rx='3.6' ry='5'/%3E%3Cellipse cx='25' cy='8' rx='3.6' ry='5'/%3E%3Cellipse cx='33' cy='15' rx='3.6' ry='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 100% 0%, #ffd6e8 0, transparent 45%),
    radial-gradient(circle at 0% 100%, #efe3ff 0, transparent 45%),
    var(--bg);
}
html[data-theme="kitty"] body { background: transparent; }
html[data-theme="kitty"] ::selection { background: #f9a8d4; color: #4a2338; }

/* Pink scrollbars, where the browser lets a page have them. */
html[data-theme="kitty"] * { scrollbar-color: #f9a8d4 transparent; }

html[data-theme="kitty"] .topbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 2px dashed var(--line);
  box-shadow: 0 4px 16px rgba(219, 39, 119, 0.08);
}
/* A cat's head in front of the wordmark. */
html[data-theme="kitty"] .topbar__logo { color: var(--primary); display: inline-flex; align-items: center; gap: 6px; }
html[data-theme="kitty"] .topbar__logo::before,
html[data-theme="kitty"] .login__brand::before {
  content: "";
  width: 1.35em;
  height: 1.35em;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 3.5l7.5 6.2c2.9-1 6.1-1 9 0L28 3.5v13.2C28 24.3 22.6 29 16 29S4 24.3 4 16.7z' fill='%23db2777'/%3E%3Cpath d='M7 8l3.6 3.2-3.6 1.6zM25 8l-3.6 3.2 3.6 1.6z' fill='%23fbcfe8'/%3E%3Cellipse cx='11.3' cy='17.4' rx='1.9' ry='2.3' fill='%23fff'/%3E%3Cellipse cx='20.7' cy='17.4' rx='1.9' ry='2.3' fill='%23fff'/%3E%3Cpath d='M14.6 21h2.8L16 22.6z' fill='%23fbcfe8'/%3E%3Cpath d='M2 20.5l6.5.8M2.5 24l6.3-1.5M30 20.5l-6.5.8M29.5 24l-6.3-1.5' stroke='%23fbcfe8' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-theme="kitty"] .navlink--active { background: var(--primary-tint); color: var(--primary); }
html[data-theme="kitty"] .pill { background: #fff; }

/* Candy buttons: pill shaped, with a darker lip under them that the button
   sinks into when pressed. */
html[data-theme="kitty"] .btn,
html[data-theme="kitty"] .chip { border-radius: 999px; }
html[data-theme="kitty"] .btn--primary {
  background: linear-gradient(180deg, #f0509a, #db2777);
  box-shadow: 0 3px 0 #9d174d, 0 6px 14px rgba(219, 39, 119, 0.25);
}
html[data-theme="kitty"] .btn--accent {
  background: linear-gradient(180deg, #9868f5, #7c3aed);
  box-shadow: 0 3px 0 #5b21b6, 0 6px 14px rgba(124, 58, 237, 0.22);
}
html[data-theme="kitty"] .btn--danger { box-shadow: 0 3px 0 #9f1239; }
html[data-theme="kitty"] .btn--primary:active,
html[data-theme="kitty"] .btn--accent:active,
html[data-theme="kitty"] .btn--danger:active { transform: translateY(3px); box-shadow: none; }
html[data-theme="kitty"] .btn--ghost { background: #fff; }

/* The chosen category wears a heart. Text, not colour alone. */
html[data-theme="kitty"] .chip--active::before { content: "\2665"; margin-right: 6px; font-size: 0.85em; }

html[data-theme="kitty"] .tile {
  border-color: var(--line);
  box-shadow: 0 3px 0 var(--line);
  /* A single paw in the corner of every dish. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23db2777' fill-opacity='0.12'%3E%3Cellipse cx='20' cy='27' rx='9' ry='7.5'/%3E%3Cellipse cx='8' cy='15' rx='3.6' ry='5'/%3E%3Cellipse cx='16' cy='8' rx='3.6' ry='5'/%3E%3Cellipse cx='25' cy='8' rx='3.6' ry='5'/%3E%3Cellipse cx='33' cy='15' rx='3.6' ry='5'/%3E%3C/g%3E%3C/svg%3E") right 8px bottom 8px / 26px no-repeat,
    #fff;
}
html[data-theme="kitty"] .tile:active { transform: translateY(2px) scale(0.98); box-shadow: 0 1px 0 var(--line); }

html[data-theme="kitty"] .table:where(:not(table)) { border-radius: 18px; background: #fff; }
html[data-theme="kitty"] .table--circle { border-radius: 50%; }
html[data-theme="kitty"] .table--bar { border-radius: 8px; }
html[data-theme="kitty"] .table--free { border-style: dashed; opacity: 0.9; }
html[data-theme="kitty"] .table--seated { background: #fdeaf3; }
html[data-theme="kitty"] .table--occupied { background: #e9f8ee; }
html[data-theme="kitty"] .table--bill_printed { background: #f1eafe; }
html[data-theme="kitty"] .table--part_paid { background: #fff1e7; }

html[data-theme="kitty"] .order__ticket { border-left: 2px dashed var(--line); }
html[data-theme="kitty"] .ticket__head { background: linear-gradient(90deg, #ffe4f0, #f3e8ff); }
html[data-theme="kitty"] .totals__row--grand { color: var(--primary); border-top: 2px dashed var(--line); }

html[data-theme="kitty"] .modal__panel,
html[data-theme="kitty"] .panel,
html[data-theme="kitty"] .kticket { box-shadow: var(--shadow); }
html[data-theme="kitty"] .modal__head { background: linear-gradient(90deg, #ffe4f0, #f3e8ff); }
html[data-theme="kitty"] .stat { background: linear-gradient(160deg, #fff, #ffe9f3); }

/* Sign-in: a card with a pair of ears on top, and bubble keys. */
html[data-theme="kitty"] .login__card {
  position: relative;
  border: 3px solid #f9a8d4;
  box-shadow: 0 18px 40px rgba(219, 39, 119, 0.2);
  margin-top: 44px;
}
html[data-theme="kitty"] .login__card::before,
html[data-theme="kitty"] .login__card::after {
  content: "";
  position: absolute;
  top: -50px;
  width: 78px;
  height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 56'%3E%3Cpath d='M2 56C6 34 14 12 26 3c4-3 8-3 11 0 14 12 28 32 39 53z' fill='%23f9a8d4'/%3E%3Cpath d='M16 56c3-14 8-28 14-36 2-2 4-2 6 0 8 10 16 22 22 36z' fill='%23fce7f3'/%3E%3C/svg%3E") center bottom / contain no-repeat;
  pointer-events: none;
}
html[data-theme="kitty"] .login__card::before { left: 34px; transform: rotate(-8deg); transform-origin: bottom; }
html[data-theme="kitty"] .login__card::after { right: 34px; transform: scaleX(-1) rotate(-8deg); transform-origin: bottom; }
html[data-theme="kitty"] .login__brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--primary); font-weight: 700; letter-spacing: 0.06em;
}
html[data-theme="kitty"] .login__brand::before { width: 1.2em; height: 1.2em; }
html[data-theme="kitty"] .key {
  border-radius: 18px;
  background: #fff;
  border: 2px solid var(--line);
  box-shadow: 0 4px 0 var(--line);
  color: var(--primary);
}
html[data-theme="kitty"] .key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
html[data-theme="kitty"] .key--muted { color: var(--text-dim); }
html[data-theme="kitty"] .key--go {
  background: linear-gradient(180deg, #f0509a, #db2777);
  border-color: #db2777; box-shadow: 0 4px 0 #9d174d; color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  /* The ears twitch now and then, the way a cat's do. */
  html[data-theme="kitty"] .login__card::before { animation: kitty-twitch 6s ease-in-out infinite; }
  html[data-theme="kitty"] .tile, html[data-theme="kitty"] .key,
  html[data-theme="kitty"] .btn { transition: transform 0.08s ease-out, box-shadow 0.08s ease-out; }
}
@keyframes kitty-twitch {
  0%, 88%, 100% { transform: rotate(-8deg); }
  91% { transform: rotate(-16deg); }
  94% { transform: rotate(-4deg); }
}


/* ======================================================================
 * Arcade
 * Midnight purple, neon magenta and cyan, a synthwave horizon behind the
 * sign-in, and the numbers that matter in a pixel font like a high score.
 * ==================================================================== */

html[data-theme="arcade"] {
  color-scheme: dark;
  --bg: #0f0a1f;
  --bg-raised: #1a1033;
  --bg-sunken: #0b0718;
  --line: #3a2a6a;
  --text: #f6f0ff;
  --text-dim: #ab9ed6;

  --primary: #ff2e97;
  --primary-ink: #1b0620;
  --accent: #22e4ff;
  --accent-ink: #04141c;
  --ok: #3dff8e;
  --warn: #ffd23f;
  --danger: #ff4d5e;
  --danger-ink: #1f0004;

  --primary-soft: rgba(255, 46, 151, 0.12);
  --primary-tint: rgba(255, 46, 151, 0.2);
  --ok-soft: rgba(61, 255, 142, 0.10);
  --accent-soft: rgba(34, 228, 255, 0.12);
  --warn-soft: rgba(255, 210, 63, 0.12);
  --danger-soft: rgba(255, 77, 94, 0.14);
  --danger-glow: rgba(255, 77, 94, 0.55);
  --danger-text: #ffc2c8;
  --scrim: rgba(6, 2, 16, 0.72);
  --shadow: 0 0 0 1px rgba(255, 46, 151, 0.35), 0 10px 30px rgba(0, 0, 0, 0.55);
  --grid-line: rgba(34, 228, 255, 0.10);

  --radius: 6px;
  --radius-lg: 10px;
  --font: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --font-display: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --font-pixel: "Press Start 2P", "Courier New", monospace;

  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 46, 151, 0.28) 0, transparent 55%),
    linear-gradient(180deg, #0f0a1f 0%, #150b2e 60%, #230b3d 100%);
  background-attachment: fixed;
}
html[data-theme="arcade"] body { background: transparent; }
html[data-theme="arcade"] ::selection { background: var(--primary); color: var(--primary-ink); }
html[data-theme="arcade"] * { scrollbar-color: #5b3fa8 transparent; }

/* The horizon: a neon grid running away to a vanishing point. Fixed and
   behind everything, drawn once -- it only moves on the sign-in pad. */
html[data-theme="arcade"] body::before {
  content: "";
  position: fixed;
  left: -50%;
  right: -50%;
  bottom: -4vh;
  height: 90vh;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 46, 151, 0.45) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 46, 151, 0.45) 2px, transparent 2px);
  background-size: 64px 64px;
  transform: perspective(700px) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  opacity: 0.55;
}
/* The screens people work in all day get a quieter horizon than the door. */
html[data-theme="arcade"] body:not(.screen-login)::before { opacity: 0.22; }

html[data-theme="arcade"] .topbar {
  background: linear-gradient(180deg, #1f1340, #160d2e);
  border-bottom: 1px solid var(--primary);
  box-shadow: 0 0 18px rgba(255, 46, 151, 0.35);
}
html[data-theme="arcade"] .topbar__logo,
html[data-theme="arcade"] .login__brand {
  font-family: var(--font-pixel);
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 6px #ff2e97, 0 0 16px #ff2e97, 3px 3px 0 #22e4ff;
}
html[data-theme="arcade"] .topbar__logo { font-size: 0.85rem; letter-spacing: 0.12em;
                                        text-shadow: 0 0 6px #ff2e97, 0 0 14px #ff2e97, 2px 2px 0 #22e4ff; }
html[data-theme="arcade"] .navlink { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; }
html[data-theme="arcade"] .navlink--active {
  background: transparent; color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
  text-shadow: 0 0 8px rgba(34, 228, 255, 0.7);
}

html[data-theme="arcade"] h1, html[data-theme="arcade"] h2 {
  text-transform: uppercase; letter-spacing: 0.06em; font-style: italic; font-weight: 800;
}
html[data-theme="arcade"] .btn { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
html[data-theme="arcade"] .btn--primary {
  background: linear-gradient(135deg, #ff2e97, #b026ff);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 14px rgba(255, 46, 151, 0.55);
}
html[data-theme="arcade"] .btn--accent { box-shadow: 0 0 14px rgba(34, 228, 255, 0.5); }
html[data-theme="arcade"] .btn--ghost { border-color: #5b3fa8; color: var(--text); }
html[data-theme="arcade"] .btn--ghost:active { border-color: var(--accent); color: var(--accent); }

/* Chips cut at two corners, like a game's menu tabs. */
html[data-theme="arcade"] .chip {
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem;
}
html[data-theme="arcade"] .chip--active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

html[data-theme="arcade"] .tile {
  background: linear-gradient(160deg, #221545 0%, #170e31 100%);
  border-color: #33235e;
}
html[data-theme="arcade"] .tile:active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(34, 228, 255, 0.45);
}
html[data-theme="arcade"] .tile__price { text-shadow: 0 0 8px rgba(34, 228, 255, 0.55); }

/* Scores: the grand total, table numbers and kitchen ticket numbers. */
html[data-theme="arcade"] .totals__row--grand,
html[data-theme="arcade"] .table__code,
html[data-theme="arcade"] .kticket__number,
html[data-theme="arcade"] .stat strong {
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: 0;
}
html[data-theme="arcade"] .totals__row--grand { font-size: 0.95rem; color: var(--ok); text-shadow: 0 0 8px rgba(61, 255, 142, 0.6); align-items: center; }
html[data-theme="arcade"] .table__code { font-size: 0.8rem; }
html[data-theme="arcade"] .kticket__number { font-size: 0.8rem; }
html[data-theme="arcade"] .stat strong { font-size: 0.8rem; line-height: 2; overflow-wrap: anywhere; }

html[data-theme="arcade"] .table:where(:not(table)) { background: rgba(26, 16, 51, 0.85); }
html[data-theme="arcade"] .table--seated { box-shadow: 0 0 12px rgba(255, 46, 151, 0.45); }
html[data-theme="arcade"] .table--occupied { box-shadow: 0 0 12px rgba(61, 255, 142, 0.35); }
html[data-theme="arcade"] .table--bill_printed { box-shadow: 0 0 12px rgba(34, 228, 255, 0.4); }
html[data-theme="arcade"] .table--part_paid { box-shadow: 0 0 12px rgba(255, 210, 63, 0.35); }

html[data-theme="arcade"] .order__ticket { background: rgba(26, 16, 51, 0.92); border-left-color: #4a2f8a; }
html[data-theme="arcade"] .modal__panel,
html[data-theme="arcade"] .panel { border-color: #5b3fa8; box-shadow: var(--shadow); }
html[data-theme="arcade"] .modal__head { background: linear-gradient(90deg, rgba(255, 46, 151, 0.18), rgba(34, 228, 255, 0.10)); }
html[data-theme="arcade"] .kticket { border-top-color: var(--accent); box-shadow: 0 0 14px rgba(34, 228, 255, 0.18); }

/* Sign-in: the neon title over the horizon, a sun going down behind it, and
   PLAYER 1 waiting to start. */
html[data-theme="arcade"] body.screen-login::after {
  content: "";
  position: fixed;
  left: 50%;
  bottom: 24vh;
  width: 64vh;
  height: 64vh;
  margin-left: -32vh;
  z-index: -2;
  pointer-events: none;
  border-radius: 50%;
  background:
    repeating-linear-gradient(180deg, transparent 0 58%, #0f0a1f 58% 62%, transparent 62% 70%, #0f0a1f 70% 75%, transparent 75% 82%, #0f0a1f 82% 89%),
    linear-gradient(180deg, #ffd23f 0%, #ff6a3d 45%, #ff2e97 100%);
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
html[data-theme="arcade"] .login__card {
  background: rgba(20, 12, 42, 0.92);
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 4px rgba(255, 46, 151, 0.15), 0 0 40px rgba(255, 46, 151, 0.4);
}
html[data-theme="arcade"] .login__brand { font-size: 1.35rem; line-height: 1.5; }
html[data-theme="arcade"] .login__brand span {
  color: var(--accent); text-shadow: 0 0 8px var(--accent); margin-left: 10px;
}
html[data-theme="arcade"] .login__brand::after {
  content: "PLAYER 1 READY";
  display: block;
  margin-top: 10px;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--warn);
  text-shadow: 0 0 6px rgba(255, 210, 63, 0.8);
}
html[data-theme="arcade"] .field input { border-color: #5b3fa8; }
html[data-theme="arcade"] .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 12px rgba(34, 228, 255, 0.45); }
html[data-theme="arcade"] .key {
  font-family: var(--font-pixel);
  font-size: 1rem;
  background: linear-gradient(180deg, #2a1a55, #160d2e);
  border: 2px solid #5b3fa8;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35);
}
html[data-theme="arcade"] .key:active { border-color: var(--accent); box-shadow: 0 0 14px rgba(34, 228, 255, 0.6); }
html[data-theme="arcade"] .key--go {
  background: linear-gradient(135deg, #ff2e97, #b026ff); border-color: #ff2e97; color: #fff;
  box-shadow: 0 0 16px rgba(255, 46, 151, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
  html[data-theme="arcade"] body.screen-login::before { animation: arcade-run 1.6s linear infinite; }
  html[data-theme="arcade"] .login__brand::after { animation: arcade-blink 1.1s steps(1, end) infinite; }
  html[data-theme="arcade"] .topbar__logo { animation: arcade-flicker 7s linear infinite; }
}
@keyframes arcade-run { to { background-position: 0 64px, 0 0; } }
@keyframes arcade-blink { 50% { opacity: 0; } }
@keyframes arcade-flicker {
  0%, 93%, 96%, 100% { opacity: 1; }
  94%, 97% { opacity: 0.55; }
}


/* ======================================================================
 * Robotic
 * Gunmetal and HUD cyan, amber readouts, chamfered controls and corner
 * brackets on every panel, with a scan line sweeping the sign-in terminal.
 * ==================================================================== */

html[data-theme="robotic"] {
  color-scheme: dark;
  --bg: #0a0f14;
  --bg-raised: #101a22;
  --bg-sunken: #070b0f;
  --line: #1e3a4a;
  --text: #d9f4ff;
  --text-dim: #7197ab;

  --primary: #00d1ff;
  --primary-ink: #00141c;
  --accent: #ffc400;
  --accent-ink: #1a1400;
  --ok: #00f5a0;
  --warn: #ff8a00;
  --danger: #ff3b5c;
  --danger-ink: #1c0007;

  --primary-soft: rgba(0, 209, 255, 0.10);
  --primary-tint: rgba(0, 209, 255, 0.18);
  --ok-soft: rgba(0, 245, 160, 0.09);
  --accent-soft: rgba(255, 196, 0, 0.10);
  --warn-soft: rgba(255, 138, 0, 0.11);
  --danger-soft: rgba(255, 59, 92, 0.13);
  --danger-glow: rgba(255, 59, 92, 0.5);
  --danger-text: #ffc0cb;
  --scrim: rgba(2, 6, 10, 0.75);
  --shadow: 0 0 0 1px rgba(0, 209, 255, 0.25), 0 12px 30px rgba(0, 0, 0, 0.6);
  --grid-line: rgba(0, 209, 255, 0.12);

  --radius: 3px;
  --radius-lg: 4px;
  --font: "Rajdhani", "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  --font-display: "Orbitron", "Bahnschrift", "Segoe UI", sans-serif;

  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 209, 255, 0.10) 0, transparent 60%),
    linear-gradient(rgba(0, 209, 255, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(0, 209, 255, 0.045) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg);
}
/* Rajdhani draws small for its size. Weighted up a step rather than scaled,
   because scaling the root would scale the density tiers with it. */
html[data-theme="robotic"] body { background: transparent; font-weight: 500; }
html[data-theme="robotic"] ::selection { background: var(--primary); color: var(--primary-ink); }
html[data-theme="robotic"] * { scrollbar-color: #1e4a5e transparent; }

html[data-theme="robotic"] .topbar {
  background: linear-gradient(180deg, #0f1c26, #0b141b);
  border-bottom: 1px solid var(--primary);
  box-shadow: 0 1px 0 rgba(0, 209, 255, 0.25), 0 6px 18px rgba(0, 0, 0, 0.5);
}
html[data-theme="robotic"] .topbar__logo {
  color: var(--primary);
  font-weight: 900;
  letter-spacing: 0.22em;
  text-shadow: 0 0 10px rgba(0, 209, 255, 0.6);
}
html[data-theme="robotic"] .topbar__logo::before { content: "\25E2\00a0"; color: var(--accent); text-shadow: none; }
html[data-theme="robotic"] .topbar__outlet { font-family: var(--font); text-transform: uppercase; letter-spacing: 0.12em; }

/* Labels read as system readouts: capitals, tracked out. Names of dishes
   and people stay in mixed case, which is what is read at arm's length. */
html[data-theme="robotic"] .navlink,
html[data-theme="robotic"] .btn,
html[data-theme="robotic"] .chip,
html[data-theme="robotic"] .pill,
html[data-theme="robotic"] .area__name,
html[data-theme="robotic"] .stat span,
html[data-theme="robotic"] table.table th,
html[data-theme="robotic"] .field span,
html[data-theme="robotic"] .payfield span {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
/* Chips are many to a row, and on the small tills tracking them out as far
   as the rest costs a whole extra row of them above the menu. */
html[data-theme="robotic"] .chip { letter-spacing: 0.05em; }
html[data-theme="robotic"] .navlink--active {
  background: var(--primary-tint);
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
}
html[data-theme="robotic"] h1, html[data-theme="robotic"] h2,
html[data-theme="robotic"] h3 { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
html[data-theme="robotic"] h4 { font-family: var(--font); }

/* Chamfered: two corners cut away, like a plate bolted onto a machine. */
html[data-theme="robotic"] .btn--primary,
html[data-theme="robotic"] .btn--accent,
html[data-theme="robotic"] .btn--danger,
html[data-theme="robotic"] .chip,
html[data-theme="robotic"] .key,
html[data-theme="robotic"] .tile {
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
html[data-theme="robotic"] .btn--primary { background: linear-gradient(180deg, #33ddff, #00b4e0); }
html[data-theme="robotic"] .btn--ghost { border-color: #25506a; color: var(--primary); }

html[data-theme="robotic"] .tile {
  background:
    linear-gradient(135deg, transparent 0 calc(100% - 22px), rgba(0, 209, 255, 0.35) calc(100% - 22px) calc(100% - 20px), transparent calc(100% - 20px)),
    linear-gradient(180deg, #12202a, #0d171e);
  border-color: #1e3a4a;
}
html[data-theme="robotic"] .tile:active { background: var(--primary-tint); border-color: var(--primary); }
html[data-theme="robotic"] .tile__sku { color: var(--primary); opacity: 0.7; }
html[data-theme="robotic"] .tile__price,
html[data-theme="robotic"] .ticketcard__total { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.04em; }

html[data-theme="robotic"] .totals__row--grand {
  font-family: var(--font-display);
  color: var(--accent);
  letter-spacing: 0.06em;
  text-shadow: 0 0 10px rgba(255, 196, 0, 0.45);
}
html[data-theme="robotic"] .table__code,
html[data-theme="robotic"] .kticket__number,
html[data-theme="robotic"] .stat strong { font-family: var(--font-display); letter-spacing: 0.05em; }

/* Corner brackets, drawn as eight short gradients -- the HUD frame on every
   working surface. Declared on the surfaces themselves, not on <html>: a
   custom property is worked out where it is declared, so a frame declared at
   the root would stay the root's colour whatever --hud a card set. */
html[data-theme="robotic"] { --hud: var(--primary); }
html[data-theme="robotic"] .panel,
html[data-theme="robotic"] .modal__panel,
html[data-theme="robotic"] .login__card,
html[data-theme="robotic"] .stat,
html[data-theme="robotic"] .coa__card,
html[data-theme="robotic"] .kticket {
  --hud-frame:
    linear-gradient(var(--hud), var(--hud)) top left / 14px 2px,
    linear-gradient(var(--hud), var(--hud)) top left / 2px 14px,
    linear-gradient(var(--hud), var(--hud)) top right / 14px 2px,
    linear-gradient(var(--hud), var(--hud)) top right / 2px 14px,
    linear-gradient(var(--hud), var(--hud)) bottom left / 14px 2px,
    linear-gradient(var(--hud), var(--hud)) bottom left / 2px 14px,
    linear-gradient(var(--hud), var(--hud)) bottom right / 14px 2px,
    linear-gradient(var(--hud), var(--hud)) bottom right / 2px 14px;

}

/* Brackets on the working surfaces. */
html[data-theme="robotic"] .panel,
html[data-theme="robotic"] .modal__panel,
html[data-theme="robotic"] .login__card,
html[data-theme="robotic"] .stat,
html[data-theme="robotic"] .coa__card {
  background: var(--hud-frame), var(--bg-raised);
  background-repeat: no-repeat;
}
html[data-theme="robotic"] .stat, html[data-theme="robotic"] .coa__card {
  --hud: rgba(0, 209, 255, 0.6);
  background: var(--hud-frame), var(--bg-sunken);
  background-repeat: no-repeat;
}
html[data-theme="robotic"] .kticket {
  --hud: var(--primary);
  background: var(--hud-frame), var(--bg-raised);
  background-repeat: no-repeat;
}
/* A late ticket turns into a hazard plate. */
html[data-theme="robotic"] .kticket--late {
  --hud: var(--danger);
  background:
    var(--hud-frame),
    repeating-linear-gradient(-45deg, rgba(255, 59, 92, 0.09) 0 12px, transparent 12px 24px),
    var(--bg-raised);
  /* no-repeat is right for the stripes too: a repeating gradient repeats
     inside its own image, and that image is the whole card. */
  background-repeat: no-repeat;
}
html[data-theme="robotic"] .modal__head { border-bottom-color: var(--primary); }
html[data-theme="robotic"] .modal__head h3::before { content: "// "; color: var(--accent); }

html[data-theme="robotic"] .table:where(:not(table)) { background: #0d171e; border-width: 1px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
html[data-theme="robotic"] .table--seated,
html[data-theme="robotic"] .table--occupied,
html[data-theme="robotic"] .table--bill_printed,
html[data-theme="robotic"] .table--part_paid { border-width: 2px; }
html[data-theme="robotic"] .table--free { border-style: dotted; }

html[data-theme="robotic"] .order__ticket { background: linear-gradient(180deg, #0f1a22, #0b141a); border-left-color: var(--primary); }
html[data-theme="robotic"] .ticket__head h2::before { content: "\25B8 "; color: var(--primary); }

html[data-theme="robotic"] .pill { border-radius: 2px; }
html[data-theme="robotic"] .pill--ok .pill__dot { box-shadow: 0 0 8px currentColor; }

/* Sign-in: an access terminal. */
html[data-theme="robotic"] .login__card { position: relative; overflow: hidden; border-color: #1e4a5e; }
html[data-theme="robotic"] .login__card::before {
  content: "SECURE TERMINAL \2022 AUTHORISATION REQUIRED";
  display: block;
  margin: -8px 0 14px;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-align: center;
}
html[data-theme="robotic"] .login__brand {
  font-family: var(--font-display); font-weight: 900; letter-spacing: 0.3em;
  color: var(--primary); text-shadow: 0 0 14px rgba(0, 209, 255, 0.65);
}
html[data-theme="robotic"] .login__brand::after {
  content: "_"; color: var(--accent); text-shadow: none; margin-left: 2px;
}
html[data-theme="robotic"] .key {
  font-family: var(--font-display);
  background: linear-gradient(180deg, #13222d, #0b141b);
  border-color: #1e4a5e;
  color: var(--primary);
}
html[data-theme="robotic"] .key:active { background: var(--primary-tint); }
html[data-theme="robotic"] .key--go { background: var(--primary); color: var(--primary-ink); }
html[data-theme="robotic"] .field input { font-family: var(--font-display); color: var(--primary); }

@media (prefers-reduced-motion: no-preference) {
  /* A scan line sweeps the terminal, and the prompt cursor blinks. */
  html[data-theme="robotic"] .login__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 60px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0, 209, 255, 0.10) 70%, rgba(0, 209, 255, 0.45) 100%);
    animation: robo-scan 3.6s linear infinite;
  }
  html[data-theme="robotic"] .login__brand::after,
  html[data-theme="robotic"] .topbar__logo::before { animation: robo-blink 1s steps(1, end) infinite; }
}
@keyframes robo-scan {
  from { transform: translateY(-60px); }
  to { transform: translateY(640px); }
}
@keyframes robo-blink { 50% { opacity: 0; } }


/* ======================================================================
 * Classic
 * Ivory card, burgundy and gold leaf, Playfair headings over Lora text --
 * the fine-dining menu. Light, with a burgundy bar across the top.
 * ==================================================================== */

html[data-theme="classic"] {
  color-scheme: light;
  --bg: #f6f0e4;
  --bg-raised: #fffdf8;
  --bg-sunken: #f0e7d5;
  --line: #dccbaa;
  --text: #2b1d14;
  --text-dim: #7a6350;

  --primary: #7b1e2b;
  --primary-ink: #fff8ec;
  --accent: #946514;
  --accent-ink: #fffaf0;
  --ok: #2f6b3a;
  --warn: #a3570a;
  --danger: #a4262c;
  --danger-ink: #ffffff;

  --primary-soft: rgba(123, 30, 43, 0.07);
  --primary-tint: rgba(123, 30, 43, 0.12);
  --ok-soft: rgba(47, 107, 58, 0.09);
  --accent-soft: rgba(201, 162, 74, 0.16);
  --warn-soft: rgba(163, 87, 10, 0.09);
  --danger-soft: rgba(164, 38, 44, 0.08);
  --danger-glow: rgba(164, 38, 44, 0.3);
  --danger-text: #7f1d1d;
  --scrim: rgba(43, 29, 20, 0.45);
  --shadow: 0 10px 28px rgba(60, 35, 15, 0.18);
  --grid-line: rgba(122, 99, 80, 0.14);

  --gold: #c9a24a;
  --radius: 4px;
  --radius-lg: 6px;
  --font: "Lora", Georgia, "Times New Roman", serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Laid paper: a faint warm vignette and fine horizontal lines. */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.7) 0, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(201, 162, 74, 0.12) 0, transparent 60%),
    repeating-linear-gradient(180deg, rgba(120, 90, 50, 0.025) 0 1px, transparent 1px 4px),
    var(--bg);
}
html[data-theme="classic"] body { background: transparent; }
/* Playfair's figures are old-style by default: a 1 sits low and a 7 drops
   below the line, which makes a column of prices look like it is bouncing.
   Lining figures everywhere; this rides alongside pos.css's tabular-nums
   rather than replacing it, being a separate property. */
html[data-theme="classic"] { font-feature-settings: "lnum" 1; }
html[data-theme="classic"] ::selection { background: #ecd9a8; color: var(--text); }
html[data-theme="classic"] * { scrollbar-color: #cdb78a transparent; }

/* The bar across the top is burgundy, so the tokens are turned for
   everything inside it rather than chased component by component. */
html[data-theme="classic"] .topbar {
  --text: #fbf3e2;
  --text-dim: #e6d3ab;
  --line: rgba(201, 162, 74, 0.55);
  --bg-sunken: rgba(0, 0, 0, 0.22);
  --ok: #9be3a9;
  --warn: #ffcf7a;
  --danger: #ffb4b0;
  background: linear-gradient(180deg, #7b1e2b, #5e1520);
  border-bottom: 3px double var(--gold);
  color: var(--text);
}
html[data-theme="classic"] .topbar__logo {
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
}
html[data-theme="classic"] .topbar__logo::before,
html[data-theme="classic"] .topbar__logo::after { content: "\2767"; font-style: normal; font-size: 0.8em; margin: 0 6px; opacity: 0.85; }
html[data-theme="classic"] .topbar__logo::before { display: inline-block; transform: scaleX(-1); }
html[data-theme="classic"] .navlink { font-family: var(--font-display); letter-spacing: 0.04em; }
html[data-theme="classic"] .navlink--active { background: rgba(0, 0, 0, 0.22); color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }

html[data-theme="classic"] h1, html[data-theme="classic"] h2, html[data-theme="classic"] h3 { font-weight: 700; letter-spacing: 0.01em; }
html[data-theme="classic"] .panel h1::after,
html[data-theme="classic"] .stock__head h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

html[data-theme="classic"] .btn { font-family: var(--font-display); letter-spacing: 0.04em; }
html[data-theme="classic"] .btn--primary {
  background: linear-gradient(180deg, #8c2533, #6d1a26);
  box-shadow: inset 0 0 0 1px rgba(236, 206, 140, 0.55), 0 2px 4px rgba(60, 20, 20, 0.25);
}
html[data-theme="classic"] .btn--accent {
  background: linear-gradient(180deg, #d9b45e, #b38a2e);
  color: #2b1d14;
  box-shadow: inset 0 0 0 1px rgba(255, 245, 210, 0.6);
}
html[data-theme="classic"] .btn--ghost { background: transparent; }
html[data-theme="classic"] .chip { font-family: var(--font-display); }
html[data-theme="classic"] .chip--active { box-shadow: inset 0 0 0 1px rgba(236, 206, 140, 0.6); }

/* Dishes as entries on a menu card: a gold rule over the name and the price
   set in italic. */
html[data-theme="classic"] .tile {
  background: linear-gradient(180deg, #fffdf8, #fbf5ea);
  border-color: var(--line);
  box-shadow: inset 0 3px 0 -1px var(--gold), 0 1px 2px rgba(60, 35, 15, 0.08);
}
html[data-theme="classic"] .tile:active { background: var(--accent-soft); }
html[data-theme="classic"] .tile__name { font-weight: 600; }
html[data-theme="classic"] .tile__price,
html[data-theme="classic"] .ticketcard__total {
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--primary);
}
html[data-theme="classic"] .totals__row--grand {
  font-family: var(--font-display);
  color: var(--primary);
  border-top: 3px double var(--gold);
}

html[data-theme="classic"] .table:where(:not(table)) { background: var(--bg-raised); box-shadow: 0 1px 3px rgba(60, 35, 15, 0.12); }
html[data-theme="classic"] .table__code { font-family: var(--font-display); }

html[data-theme="classic"] .order__ticket { background: var(--bg-raised); border-left: 3px double var(--line); }
html[data-theme="classic"] .ticket__head { border-bottom: 3px double var(--line); }
html[data-theme="classic"] .ticket__head h2 { font-family: var(--font-display); font-style: italic; }

html[data-theme="classic"] .panel,
html[data-theme="classic"] .modal__panel {
  border: 4px double var(--gold);
  box-shadow: var(--shadow);
}
html[data-theme="classic"] .modal__head { background: linear-gradient(180deg, #fbf5ea, #f3e9d6); border-bottom-color: var(--line); }
html[data-theme="classic"] .modal__head h3 { font-style: italic; }
html[data-theme="classic"] .kticket { border-top-color: var(--primary); box-shadow: 0 2px 6px rgba(60, 35, 15, 0.12); }
html[data-theme="classic"] .kticket__number { font-family: var(--font-display); }
html[data-theme="classic"] .stat { background: var(--bg-raised); box-shadow: inset 0 3px 0 -1px var(--gold); }
html[data-theme="classic"] .stat strong { font-family: var(--font-display); }
html[data-theme="classic"] .pill { background: rgba(0, 0, 0, 0.18); }

/* Sign-in: the menu card itself. */
html[data-theme="classic"] .login__card {
  border: 4px double var(--gold);
  outline: 1px solid var(--line);
  outline-offset: 6px;
  box-shadow: 0 20px 44px rgba(60, 35, 15, 0.18);
}
html[data-theme="classic"] .login__brand {
  font-style: italic;
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 0.15em;
}
html[data-theme="classic"] .login__brand span {
  font-style: normal; font-size: 0.5em; letter-spacing: 0.3em; color: var(--accent); vertical-align: middle;
}
html[data-theme="classic"] .login__brand::after {
  content: "\2014\00a0 Est. for fine service \00a0\2014";
  display: block;
  margin-top: 4px;
  font-family: var(--font);
  font-style: italic;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
html[data-theme="classic"] .key {
  font-family: var(--font-display);
  background: linear-gradient(180deg, #fffdf8, #f3ead8);
  border-color: var(--line);
  box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(60, 35, 15, 0.12);
}
html[data-theme="classic"] .key--go {
  background: linear-gradient(180deg, #8c2533, #6d1a26); color: var(--primary-ink);
  box-shadow: inset 0 0 0 1px rgba(236, 206, 140, 0.55);
}


/* ======================================================================
 * Shared by every theme that is not the house one
 * ==================================================================== */

/* Buttons and boxes take the browser's own typeface unless told otherwise,
   and several in pos.css (the keypad, the chips) never are -- harmless in the
   house look, but it would leave half of a themed screen in Arial. :where()
   keeps this at zero specificity, so a theme's own font on a control, like
   the arcade keypad's, still wins. */
:where(html[data-theme]:not([data-theme="xeco"])) :where(button, input, select, textarea) {
  font-family: inherit;
}
:where(html[data-theme]:not([data-theme="xeco"])) :where(input, select, textarea, button):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* The receipt on screen is paper: never tinted, never re-typed. */
html[data-theme] .receipt { font-family: var(--mono); color: #000; background: #fff; box-shadow: var(--shadow); }
@media print {
  html[data-theme] { background: #fff; }
  html[data-theme] body::before, html[data-theme] body::after { display: none; }
  html[data-theme] .receipt { box-shadow: none; }
}