/* Shared controls used by otherwise independently lazy-loaded surfaces. */
:is(.discover-tab, .profile-tab) {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--color-tab-border);
  border-radius: 0.75rem 0.75rem 0 0;
  background: var(--color-cream);
  color: var(--color-gray-dark);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-heading-regular);
  font-size: 0.75rem;
  font-weight: 400;
  transition: background 0.12s, color 0.12s;
}
.search-journal-btn {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  background: var(--color-cream);
  color: var(--color-red);
  border: 1.5px solid var(--color-red);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-left: 0.375rem;
  transition: all 0.15s;
}
.search-journal-btn:hover {
  background: var(--color-red);
  color: var(--color-cream);
  transform: scale(1.08);
}
.discover-youtube__modal {
  padding: .65rem;
  overflow: visible;
  border: 2px solid var(--color-gray-dark);
  border-radius: .5rem;
  background: white;
  box-shadow: 7px 8px 0 color-mix(in srgb, var(--color-gray-dark) 70%, transparent);
  transform: rotate(-.6deg);
}

/* Registry-owned modal geometry. Standard is the default popup; tall is
   shared by journal/review readers, editors and onboarding. Compact is for
   short decisions. Features own content layout, never surface dimensions. */
:where([data-modal-size="compact"]) { --modal-width: 28rem; --modal-max-height: calc(100dvh - 2rem); }
:where([data-modal-size="standard"]) { --modal-width: 48rem; --modal-max-height: calc(100dvh - 2rem); }
:where([data-modal-size="tall"]) { --modal-width: 48rem; --modal-height: min(52rem, calc(100dvh - 2rem)); --modal-max-height: calc(100dvh - 2rem); }
:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"], [data-slot="sheet-content"])[data-size] {
  box-sizing: border-box;
  min-width: 0;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"], [data-slot="sheet-content"])[data-size="compact"] {
  width: min(28rem, calc(100vw - 2rem)) !important;
  max-width: 28rem !important;
}
:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"], [data-slot="sheet-content"]):is([data-size="standard"], [data-size="tall"]) {
  width: min(48rem, calc(100vw - 2rem)) !important;
  max-width: 48rem !important;
}
:is([data-slot="dialog-content"], [data-slot="alert-dialog-content"], [data-slot="sheet-content"])[data-size="tall"] {
  height: min(52rem, calc(100dvh - 2rem));
}
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  padding: .25rem .55rem .25rem .25rem;
  border: 0;
  border-radius: 999px;
  background: rgba(30, 28, 26, .62);
  color: var(--color-cream);
  backdrop-filter: blur(5px);
  cursor: pointer;
  min-height: 2.75rem;
}
.back-button:hover:not(:disabled) { color: var(--color-white); background: rgba(30, 28, 26, .78); }
.back-button:disabled { cursor: not-allowed; opacity: .5; }
.back-button__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 14px;
  background: var(--color-red);
  color: var(--color-cream);
  border-radius: 50%;
}
.back-button--overlay {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 6;
  margin: 0;
}

/* ─── Design Tokens ───────────────────────────────────────────────────────
 *
 * Three layers — read top to bottom:
 *
 *   1. PRIMITIVES — raw colour scale. Named by appearance (--color-red,
 *      --color-blue-bright). Never reference these directly in components;
 *      use the semantic layer below.
 *
 *   2. SEMANTIC — role-named tokens (--color-accent-red,
 *      --color-text-primary, --color-surface-card). This is the public API
 *      that components consume. Rebrand or retheme by editing this layer
 *      only — every component picks it up automatically.
 *
 *   3. COMPONENT — kept inline in component .css files when a component
 *      has its own state-rich palette (e.g. .vote-card-submit hover).
 *      Add semantic tokens here when a pattern shows up in 3+ files.
 *
 * Accent colour ownership lives here.
 * ───────────────────────────────────────────────────────────────────── */

:root {
  /* ═══ LAYER 1 — PRIMITIVES ═══ */

  /* Primary Brand */
  --color-red: #C62E07;
  --color-red-bright: #EF2F15;
  --color-red-dark: #B0200C;
  /* Warm hover accent — the exact value Emma standardised on across the
   * beige-button family (nav, notif, settings, follow, discover tabs).
   * Referenced via `--color-accent-hover` below so a single change here
   * propagates to every button that opts into the shared hover behavior.
   * (Bugs #844, #866, #845.) */
  --color-red-hover: #D15839;

  /* Warm Accents */
  --color-terra-cotta: #DD8167;
  --color-terra-cotta-light: #F9B3A9;
  --color-terra-cotta-lighter: #FBD0CB;
  --color-terra-cotta-lightest: #FDEAE7;
  --color-orange: #FA9B18;
  --color-orange-dark: #E89320;
  --color-yellow: #F4CF03;
  --color-yellow-light: #FFDC8A;
  --color-gold: #FFB505;
  --color-gold-dark: #B88100;
  --color-amber: #EBA500;
  --color-peach: #FFE8BE;
  --color-cream: #FFFDE9;
  --color-sand: #f5e6c8;
  --color-card: #FEF2D9;

  /* Greens */
  --color-green: #79BC90;
  --color-green-dark: #1E6C30;
  --color-green-medium: #2EA84A;
  --color-green-bright: #268838;
  --color-green-success: #17DB4E;
  --color-green-soft: #B7DCC0;
  --color-green-light: #CFE8D5;
  --color-green-lighter: #EAF5ED;
  --color-green-lightest: #F5FAF6;

  /* Blues */
  --color-blue-primary: #0205D3;
  --color-blue-royal: #0947D7;
  --color-blue-bright: #1E6DF6;
  --color-blue-purple: #401FC1;
  --color-blue-soft: #AFCEF8;
  --color-blue-light: #D5E5FB;
  --color-blue-lighter: #EBF3FF;
  --color-blue-lightest: #F5FAFF;

  /* Purples */
  --color-purple: #513EDF;
  --color-purple-light: #625DFE;
  --color-purple-deep: #341A9E;
  --color-purple-navy: #0C29AB;
  --color-purple-soft: #BDC3F4;
  --color-purple-lighter: #D8DBF9;
  --color-purple-lightest: #E9EBFB;

  /* Pink */
  --color-pink: #E83E8C;

  /* Neutrals */
  --color-black: #000000;
  --color-dark-gray: #252525;
  --color-navy-text: #091747;
  --color-gray-dark: #252525;
  --color-gray-medium: #525252;
  --color-gray: #8A8A8A;
  --color-gray-cool: #9597A1;
  --color-gray-light: #A6A6A6;
  --color-gray-lighter: #C7C7C7;
  --color-gray-border: #E3E3E5;
  --color-tab-border: #E9E8E1;
  --color-gray-bg: #F2F2F2;
  --color-gray-bg-light: #F7F7F7;
  --color-white: #FFFFFF;

  /* Platform artefacts — connecting lines, unselected/not-yet-active steps
     (progress bars, review-writing steps), and the text inside them. */
  --color-step-inactive: #D1D0C1;
  --color-text-inactive: #939393;

  /* ═══ LAYER 2 — SEMANTIC ═══
   * Components should consume these, not the primitives above. */

  /* Status accents — one knob per status. Rebrand here. */
  --color-accent-red: var(--color-red);
  --color-status-played: #62BE8C;
  --color-status-playing: #EC7B61;
  --color-status-paused: #FBCD00;
  --color-status-backlog: #FF9500;
  --color-status-abandoned: #2E2A8C;
  --color-status-want: #A9C9F2;
  --color-status-all: var(--color-dark-gray);

  /* Surfaces — page, card, accent, muted backgrounds */
  --color-surface-page: var(--color-cream);
  --color-surface-card: var(--color-card);
  --color-surface-accent: var(--color-peach);
  --color-surface-muted: var(--color-gray-bg);
  --color-surface-muted-light: var(--color-gray-bg-light);
  --color-surface-sand: var(--color-sand);
  --color-surface-overlay: rgba(0, 0, 0, 0.55);

  /* Text — hierarchy + inverse for on-brand backgrounds */
  --color-text-primary: var(--color-gray-dark);
  --color-text-secondary: var(--color-gray-medium);
  --color-text-muted: var(--color-gray);
  --color-text-placeholder: var(--color-gray-light);
  --color-text-inverse: var(--color-cream);
  --color-text-on-dark: var(--color-white);
  --color-text-brand: var(--color-red);

  /* Borders */
  --color-border-default: var(--color-gray-border);
  --color-border-focus: var(--color-red);
  --color-border-strong: var(--color-gray-dark);

  /* Interactive — brand accent (CTAs, focus rings, links) */
  --color-accent: var(--color-red);
  --color-accent-hover: var(--color-red-hover);

  /* Feedback — success / warning / error / danger */
  --color-feedback-success: var(--color-green-success);
  --color-feedback-warning: var(--color-orange);
  --color-feedback-error: var(--color-red);
  --color-feedback-danger: var(--color-red-dark);

  /* Legacy semantic aliases — kept to preserve existing consumers that
     reference --color-text and
     the older flat names. Prefer the role-named tokens above. */
  --color-text: var(--color-text-primary);
  --color-success: var(--color-feedback-success);
  --color-alert: #FAB515;
  --color-danger: var(--color-feedback-danger);
  --color-destructive: #FF0000;

  /* ═══ FONTS / LAYOUT / Z-INDEX ═══ */

  --font-heading: 'HF Gesco Bold', Georgia, serif;
  --font-heading-regular: 'HF Gesco Regular', Georgia, serif;
  --font-heading-light: 'HF Gesco Light', Georgia, serif;
  --font-body: 'IBM Plex Sans Variable', sans-serif;
  --font-mono: 'GT America Mono', 'Courier New', monospace;
  --font-logo: 'HF Gesco Bold', Georgia, serif;

  --sidebar-width: 136px;
  --header-height: 56px;

}

.game-status-icon { display: block; flex: 0 0 auto; }

/* ─── Base ─── */

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

/* iOS tap polish. Kill the grey highlight overlay Safari draws on every tap
   — the button + link states we style already communicate the interaction.
   Turn off the long-press callout menu on interactive cards so a slow tap on
   a game cover doesn't open the "Copy Image / Save Image" system sheet. */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
.game-card, .game-card-link,
.bottom-nav-item, .header-icon-btn, .fav-picker-card {
  -webkit-touch-callout: none;
}

/* Block horizontal page scroll. We set overflow-x: clip on both html and body
   because overflow-x: hidden on body alone doesn't reliably prevent sideways
   scroll on iOS Safari — an element overflowing a narrow viewport can still
   drag the page. `clip` is the modern primitive for "clip without creating a
   scroll context," so it prevents the jank without breaking position: sticky
   descendants the way overflow: hidden would. */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-heading-regular);
  background: var(--color-cream);
  color: var(--color-gray-dark);
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  line-height: 1.5;
  overflow-x: clip;
}

#root,
.app-layout,
.main-content,
.main-area,
main,
section,
article,
form,
fieldset {
  min-width: 0;
  max-width: 100%;
}

img,
video,
canvas {
  max-width: 100%;
}

input,
textarea,
select {
  min-width: 0;
  max-width: 100%;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading-regular);
  letter-spacing: 0.019rem;
}

a { color: inherit; text-decoration: none; }

/* ─── Shared Components ─── */

/* Layout */
.app-layout { display: flex; min-height: 100dvh; }
.main-content, .main-area {
  margin-left: var(--sidebar-width);
  margin-right: var(--sidebar-width);
  margin-top: var(--header-height);
  flex: 1;
  min-width: 0;
  padding-bottom: 2.5rem;
  border-right: 1px solid var(--color-gray-border);
}
.main-content {
  padding: 2.5rem;
}

/* Buttons */
.btn {
  font-family: var(--font-heading-regular);
  font-size: 0.875rem;
  padding: 0.625rem 1.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.75rem;
}
.btn-primary,
.btn-outline { border-color: transparent; background: #fcf2dc; color: var(--color-gray-dark); }
.btn-primary:hover,
.btn-outline:hover { border-color: transparent; background: #f5e6c8; color: var(--color-gray-dark); }
.btn-primary:focus-visible,
.btn-outline:focus-visible { outline: 2px solid var(--color-gray-dark); outline-offset: 2px; }

/* Filter Pills — outlined when idle, filled with the natural status colour when active.
   Each variant sets --pill-fg so the active rule can flip text/icon to cream while
   keeping the status colour as the background fill. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-heading-regular);
  font-size: 0.8125rem;
  padding: 0.375rem 0.875rem;
  border-radius: 1.25rem;
  cursor: pointer;
  color: var(--pill-fg);
  border: 2px solid var(--pill-fg);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.pill.active {
  background: var(--pill-fg);
  color: var(--color-text-inverse);
}

/* Cards */
.card {
  background: var(--color-cream);
  border-radius: 0.75rem;
  border: 1px solid var(--color-gray-border);
  overflow: hidden;
}

/* Game Cover Card */
.game-card {
  aspect-ratio: 2 / 3;
  position: relative;
  --card-radius: 0.75rem;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: none;
  box-shadow: 3px 3px 0 0 var(--color-red);
  background: url('/images/placeholder.avif') center / cover no-repeat;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.global-game-drag-source { position: relative; width: 100%; min-width: 0; touch-action: manipulation; }
[data-global-game-cover-drag] { cursor: grab; touch-action: manipulation; -webkit-touch-callout: none; user-select: none; }
[data-global-game-cover-drag]:active { cursor: grabbing; }
[data-global-game-cover-drag] img,
[data-library-game-drag] img,
[data-sorting-game-id] img { -webkit-user-drag: none; }
.global-game-drag-source > .game-card { width: 100%; }
.profile-library-drag-card > .global-game-drag-source { width: 100%; }
.global-game-drag-source--dragging { opacity: .28; }
.global-game-drag-keyboard-trigger { position: absolute; z-index: 8; top: .4rem; left: .4rem; width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0; clip-path: inset(50%); white-space: nowrap; }
.global-game-drag-keyboard-trigger:focus-visible { width: auto; height: 2.75rem; overflow: visible; padding: 0 .75rem; border: 2px solid var(--color-gray-dark); border-radius: .55rem; clip-path: none; background: var(--color-cream); color: var(--color-gray-dark); box-shadow: 0 .2rem 0 var(--color-orange); font: 800 .65rem var(--font-mono); white-space: normal; }
.game-drag-map {
  position: fixed;
  z-index: 1700;
  inset: 0;
  display: grid;
  min-width: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(.55rem, 1.2vh, .85rem);
  padding: max(.85rem, env(safe-area-inset-top)) clamp(.65rem, 2vw, 1.4rem) max(.85rem, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-cream) 97%, transparent);
  animation: global-status-map-in .14s ease-out both;
}
.game-drag-map--status-only,
.game-drag-map--collection-only { grid-template-rows: auto auto minmax(0, 1fr) auto; align-content: stretch; overflow-y: auto; }
.game-drag-map--collection-only.game-drag-map--dense-collections { overflow-y: hidden; }
.game-drag-map--embedded { position: relative; z-index: auto; inset: auto; height: 100%; padding: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; background: transparent; animation: none; }
.game-drag-map--embedded.game-drag-map--collection-only .game-drag-map-collection-shelf { grid-row: 1; width: 100%; height: 100%; max-height: none; align-self: stretch; }
.game-drag-map--status-only > header,
.game-drag-map--collection-only > header { grid-row: 1; }
.game-drag-map--status-only .game-drag-map-basic-utility--journal,
.game-drag-map--collection-only .game-drag-map-basic-utility--journal { grid-row: 2; }
.game-drag-map--status-only .game-drag-map-status-shelf { grid-row: 3; align-self: center; justify-self: center; width: min(100%, 76rem); }
.game-drag-map--collection-only .game-drag-map-collection-shelf { grid-row: 3; width: min(100%, 76rem); height: fit-content; max-height: 100%; align-self: center; justify-self: center; }
.game-drag-map--collection-only .game-drag-map-collection-shelf--dense { height: 100%; align-self: stretch; }
.game-drag-map--collection-only .game-drag-map-utilities { animation: game-drag-step-in .18s cubic-bezier(.2, .8, .3, 1) both; }
.game-drag-map--step-out .game-drag-map-status-shelf { animation: game-drag-status-step-out .14s ease-in both; }
.game-drag-map--step-in .game-drag-map-collection-shelf { animation: game-drag-collections-step-in .4s cubic-bezier(.16, .84, .3, 1) both; }
.game-drag-map--step-in .game-drag-map-collection-shelf .game-drag-target { animation: game-drag-collection-card-in .26s cubic-bezier(.2, .9, .3, 1.15) both; }
.game-drag-map--step-in .game-drag-map-collection-shelf .game-drag-target:nth-child(2) { animation-delay: .025s; }
.game-drag-map--step-in .game-drag-map-collection-shelf .game-drag-target:nth-child(3) { animation-delay: .05s; }
.game-drag-map--step-in .game-drag-map-collection-shelf .game-drag-target:nth-child(4) { animation-delay: .075s; }
.game-drag-map--step-in .game-drag-map-collection-shelf .game-drag-target:nth-child(5) { animation-delay: .1s; }
.game-drag-map--step-in .game-drag-map-collection-shelf .game-drag-target:nth-child(n+6) { animation-delay: .125s; }
.game-drag-map--collection-only .game-drag-map-utilities { position: relative; z-index: 6; }
.game-drag-map--status-only .game-drag-map-basic-utility--remove,
.game-drag-map--collection-only .game-drag-map-basic-utility--remove { grid-row: 4; }
.game-drag-map-basic-utility { justify-self: center; width: min(100%, 76rem); }
.game-drag-map-basic-utility .game-drag-map-utility { min-height: 7.2rem; }
.game-drag-map-cancel { position: absolute; z-index: 3; top: max(.85rem, env(safe-area-inset-top)); left: clamp(.65rem, 2vw, 1.4rem); min-width: 4.5rem; min-height: 2.5rem; padding: .4rem .65rem; border: 1.5px solid var(--color-gray-border); border-radius: .55rem; background: color-mix(in srgb, var(--color-cream) 94%, transparent); color: var(--color-gray-dark); font: 800 .6rem var(--font-mono); text-transform: uppercase; cursor: pointer; }
.game-drag-map-cancel:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-purple) 45%, transparent); outline-offset: 2px; }
.game-drag-map > header { display: flex; min-width: 0; min-height: 2.5rem; align-items: baseline; justify-content: center; gap: .8rem; padding-inline: 5rem; text-align: center; }
.game-drag-map > header strong { overflow: hidden; color: var(--color-gray-dark); font: 900 clamp(1rem, 2.4vw, 1.5rem) var(--font-heading); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.game-drag-map > header span { color: color-mix(in srgb, var(--color-gray-dark) 70%, transparent); font: 650 .62rem var(--font-mono); }
.game-drag-map-shelf { min-width: 0; overflow: hidden; border-radius: .85rem; }
.game-drag-map-shelf > header { display: flex; min-height: 2.15rem; align-items: center; justify-content: space-between; gap: .7rem; padding: .4rem .7rem; }
.game-drag-map-shelf > header h2 { margin: 0; color: var(--color-gray-dark); font: 900 .85rem var(--font-heading); letter-spacing: .04em; text-transform: uppercase; }
.game-drag-map-shelf > header span { color: var(--color-gray); font: 650 .5rem var(--font-mono); }
.game-drag-map-shelf > header .game-drag-map-active-collection-label { overflow: hidden; max-width: 65%; color: var(--color-gray-dark); font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.game-drag-map-status-targets { display: flex; min-width: 0; flex-wrap: wrap; justify-content: center; gap: clamp(.35rem, .8vw, .65rem); padding: .55rem; touch-action: none; }
.game-drag-map-status-targets > .game-drag-target { width: clamp(8rem, 16vw, 10.5rem); flex: 0 1 10.5rem; }
.game-drag-map-status-control { position: relative; z-index: 4; min-width: 0; }
.game-drag-map-status-control > .game-drag-map-utility { width: 100%; height: 100%; }
.game-drag-map-status-control--open > .game-drag-map-utility { border-radius: .7rem .7rem 0 0; }
.game-drag-map-status-dropdown { position: absolute; z-index: 5; top: calc(100% - 1px); left: 0; width: 100%; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--utility-accent) 48%, var(--color-gray-border)); border-top: 0; border-radius: 0 0 .7rem .7rem; background: color-mix(in srgb, var(--utility-accent) 10%, var(--color-cream)); box-shadow: 0 .65rem 1.1rem color-mix(in srgb, var(--color-gray-dark) 18%, transparent); transform-origin: top center; animation: game-drag-status-dropdown .18s ease-out both; }
.game-drag-map-status-dropdown > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .42rem .65rem .3rem; border-top: 1.5px dashed color-mix(in srgb, var(--utility-accent) 34%, var(--color-gray-border)); }
.game-drag-map-status-dropdown > header h2 { margin: 0; color: var(--utility-accent); font: 900 .55rem var(--font-heading); letter-spacing: .04em; text-transform: uppercase; }
.game-drag-map-status-dropdown-back { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .45rem; border: 0; border-radius: .4rem; background: transparent; color: var(--color-gray-dark); font: 800 .52rem var(--font-mono); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
.game-drag-map-status-dropdown-back:hover { color: var(--color-red); }
.game-drag-map-status-dropdown-targets { display: grid; gap: .25rem; padding: .35rem; touch-action: none; }
.game-drag-map-status-dropdown-targets > .game-drag-target { min-height: 3.2rem; border-color: color-mix(in srgb, var(--drag-target-accent) 20%, var(--color-gray-border)); background: color-mix(in srgb, var(--drag-target-accent) 4%, var(--color-cream)); }
.game-drag-map-status-dropdown-targets > .game-drag-target:hover,
.game-drag-map-status-dropdown-targets > .game-drag-target--active { border-color: color-mix(in srgb, var(--drag-target-accent) 42%, var(--color-gray-border)); background: color-mix(in srgb, var(--drag-target-accent) 14%, var(--color-cream)); }
.game-drag-map-status-dropdown-targets .game-drag-destination { grid-template-columns: 1.8rem minmax(0, 1fr); gap: .4rem; }
.game-drag-map-status-dropdown-targets .game-drag-destination-icon { width: 1.8rem; height: 1.8rem; }
@keyframes game-drag-status-dropdown { from { transform: translateY(-.35rem) scaleY(.94); opacity: 0; } }
.game-drag-map-collection-shelf { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.game-drag-map-utilities { display: grid; min-width: 0; grid-template-columns: 1fr; gap: .55rem; }
.game-drag-map-utilities--actions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.game-drag-map-utility { --utility-accent: var(--color-gray-medium); display: flex; min-width: 0; min-height: 3.6rem; box-sizing: border-box; align-items: center; justify-content: center; gap: .55rem; padding: .5rem .75rem; border: 1.5px solid color-mix(in srgb, var(--utility-accent) 32%, var(--color-gray-border)); border-radius: .7rem; background: color-mix(in srgb, var(--utility-accent) 5%, var(--color-cream)); color: var(--color-gray-dark); opacity: 1; transition: border-color .16s ease, box-shadow .16s ease; }
.game-drag-map-utility--multi { --utility-accent: var(--color-purple); }
.game-drag-map-utility--journal,
.game-drag-map-utility--review,
.game-drag-map-utility--status { --utility-accent: var(--color-red); background: var(--color-peach); border-color: var(--color-red); color: var(--color-red); }
.game-drag-map-utility--status { position: relative; overflow: hidden; }
.game-drag-map-utility--remove { --utility-accent: var(--color-red); }
.game-drag-map-utility--multi { min-height: 5.25rem; justify-content: flex-start; }
.game-drag-map-utility-icon { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; place-items: center; color: var(--utility-accent); font: 500 1.25rem/1 var(--font-heading); }
.game-drag-map-utility-copy { min-width: 0; }
.game-drag-map-utility strong, .game-drag-map-utility small { display: block; }
.game-drag-map-utility strong { overflow: hidden; font: 800 .62rem var(--font-mono); letter-spacing: .01em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.game-drag-map-utility small { margin-top: .12rem; color: var(--color-gray); font: 650 .44rem var(--font-mono); white-space: nowrap; }
.game-drag-map-utility--active, .game-drag-map-utility--received { border-color: color-mix(in srgb, var(--color-gray-dark) 38%, var(--color-gray-border)); background: color-mix(in srgb, var(--utility-accent) 10%, var(--color-cream)); box-shadow: 0 .16rem .4rem color-mix(in srgb, var(--color-gray-dark) 10%, transparent); }
.game-drag-map-utility-action { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.game-drag-map-utility-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--utility-accent) 45%, transparent); outline-offset: -4px; }
.game-drag-map-targets { --collection-drop-columns: 4; --collection-drop-target-height: 5.25rem; display: grid; min-height: 0; grid-template-columns: repeat(var(--collection-drop-columns), minmax(0, 1fr)); grid-auto-rows: var(--collection-drop-target-height); gap: clamp(.4rem, .9vw, .7rem); align-content: start; padding: .55rem; overflow-y: auto; scroll-padding: .55rem; overscroll-behavior: contain; touch-action: none; }
.game-drag-map-targets[data-collection-target-density="compact"] .game-drag-destination { grid-template-columns: 1.8rem minmax(0, 1fr); gap: .35rem; }
.game-drag-map-targets[data-collection-target-density="compact"] .game-drag-destination-icon { width: 1.8rem; height: 1.8rem; border-radius: .48rem; }
.game-drag-map-targets[data-collection-target-density="compact"] .game-drag-destination-icon > svg { width: 1rem; height: 1rem; }
.game-drag-map-targets[data-collection-target-density="compact"] .game-drag-destination-label { font-size: .8rem; }
.game-drag-map-targets[data-collection-target-density="icon"] .game-drag-target { padding: .18rem; }
.game-drag-map-targets[data-collection-target-density="icon"] .game-drag-destination { display: grid; grid-template-columns: 1fr; place-items: center; }
.game-drag-map-targets[data-collection-target-density="icon"] .game-drag-destination-icon { width: 2rem; height: 2rem; grid-row: auto; border-radius: .5rem; }
.game-drag-map-targets[data-collection-target-density="icon"] .game-drag-destination-icon > svg { width: 1.05rem; height: 1.05rem; }
.game-drag-map-targets[data-collection-target-density="icon"] .game-drag-destination-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.game-drag-map-targets > .game-drag-map-utility,
.game-drag-map-targets > .game-drag-target { min-height: 0; height: 100%; }
.game-drag-map-collections-state { grid-column: 1 / -1; margin: 0; padding: 1rem; color: var(--color-gray); font: 650 .58rem/1.5 var(--font-mono); text-align: center; }
.game-drag-map-collections-state--error { color: var(--color-red); }
.game-drag-target { --drag-target-accent: var(--group-accent, var(--color-gray-medium)); position: relative; display: grid; min-width: 0; min-height: 5.25rem; place-items: center; padding: .3rem; border: 2px solid var(--drag-target-accent); border-radius: .72rem; background: color-mix(in srgb, var(--drag-target-accent) 30%, var(--color-cream)); color: var(--drag-target-accent); transition: transform .16s cubic-bezier(.2,.9,.3,1.2), background .16s ease, border-color .16s ease; }
.game-drag-target--current { border-color: color-mix(in srgb, var(--color-gray-medium) 66%, var(--color-gray-border)); background: color-mix(in srgb, var(--color-gray-medium) 12%, var(--color-cream)); color: var(--color-gray-medium); }
.game-drag-target--active { transform: translateY(-.3rem) scale(1.04); background: color-mix(in srgb, var(--drag-target-accent) 48%, var(--color-cream)); }
.game-drag-target--dwelling { overflow: hidden; }
.game-drag-target--dwelling::after { content: ''; position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: .32rem; background: var(--drag-target-accent); transform: scaleX(0); transform-origin: left; animation: game-drag-collection-dwell var(--drag-dwell-duration, .8s) linear forwards; }
.game-drag-target--dwelling-remove::after { background: var(--color-red); }
@keyframes game-drag-collection-dwell { to { transform: scaleX(1); } }
.game-drag-target--received-add .game-drag-destination-icon,
.game-drag-target--received-status .game-drag-destination-icon { animation: global-status-received .3s cubic-bezier(.2,.9,.3,1.2); }
.game-drag-target--received-add .game-drag-destination-check,
.game-drag-target--received-status .game-drag-destination-check { animation: game-drag-check-in .34s cubic-bezier(.2,1.45,.35,1) both; }
.game-drag-target--received-remove .game-drag-destination-icon { animation: game-drag-remove-confirm .32s ease-out; }
.game-drag-destination { position: relative; display: grid; width: 100%; min-width: 0; grid-template-columns: 2.25rem minmax(0, 1fr); justify-items: start; align-items: center; align-content: center; gap: .5rem; color: inherit; text-align: left; }
.game-drag-destination-icon { position: relative; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; transition: transform .18s cubic-bezier(.2,.9,.3,1.2); }
.game-drag-destination-icon > svg { width: 1.15rem; height: 1.15rem; }
.game-drag-destination-check { position: absolute; top: -.45rem; right: -.45rem; display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border: 2px solid var(--color-cream); border-radius: 50%; background: var(--color-feedback-success); color: var(--color-gray-dark); font: 900 .72rem/1 var(--font-mono); box-shadow: 0 .15rem .35rem color-mix(in srgb, var(--color-gray-dark) 18%, transparent); }
.game-drag-destination-label { align-self: center; max-width: 100%; overflow: hidden; color: color-mix(in srgb, currentColor 78%, var(--color-gray-dark)); font: 800 .92rem var(--font-mono); letter-spacing: .01em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.game-drag-destination-count { position: absolute; top: -.35rem; right: -.35rem; min-width: 1.3rem; padding: .12rem .3rem; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, var(--color-cream)); color: inherit; font: 800 .54rem var(--font-mono); text-align: center; }
.game-drag-target--active .game-drag-destination-icon { transform: translateY(-.22rem) scale(1.1); }
.game-drag-destination-choice { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.game-drag-destination-choice:focus-visible { outline: 3px solid color-mix(in srgb, var(--drag-target-accent) 42%, transparent); outline-offset: -4px; }
.global-game-drag-overlay-frame { display: grid; place-items: center; pointer-events: none; }
.global-game-drag-overlay-stack { --drag-cover-width: clamp(4rem, 9vw, 5.5rem); position: relative; width: var(--drag-cover-width); aspect-ratio: 3 / 4; }
.global-game-drag-overlay-stack--multiple { width: calc(var(--drag-cover-width) + (var(--drag-stack-count) - 1) * .42rem); margin-left: calc((var(--drag-stack-count) - 1) * -.21rem); }
.global-game-drag-overlay { position: absolute; top: calc((var(--drag-stack-count, 1) - 1 - var(--drag-stack-index, 0)) * -.18rem); left: calc(var(--drag-stack-index, 0) * .42rem); z-index: calc(var(--drag-stack-index, 0) + 1); width: var(--drag-cover-width); aspect-ratio: 3 / 4; overflow: hidden; border: 2px solid var(--color-cream); border-radius: .65rem; background: var(--color-gray-dark); box-shadow: 0 .35rem 0 var(--color-orange), 0 .8rem 1.5rem color-mix(in srgb, var(--color-gray-dark) 25%, transparent); color: var(--color-cream); }
.global-game-drag-overlay img { width: 100%; height: 100%; object-fit: cover; }
.global-game-drag-overlay span { display: grid; height: 100%; padding: .4rem; place-items: center; font: 800 .6rem var(--font-heading); text-align: center; }
.global-game-drag-overlay-count { position: absolute; z-index: 10; top: -.8rem; right: -.8rem; display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border: 2px solid var(--color-cream); border-radius: 50%; background: var(--color-red); color: var(--color-cream); font: 900 .68rem var(--font-mono); }
.global-game-drag-overlay-progress { position: absolute; z-index: 12; top: calc(100% + .38rem); left: 0; width: var(--drag-cover-width); height: .32rem; overflow: hidden; border: 1px solid var(--color-cream); border-radius: 999px; background: color-mix(in srgb, var(--color-gray-dark) 20%, transparent); box-shadow: 0 .12rem .35rem color-mix(in srgb, var(--color-gray-dark) 20%, transparent); }
.global-game-drag-overlay-progress::after { content: ''; display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--color-blue); transform: scaleX(0); transform-origin: left; animation: game-drag-status-dwell .18s linear forwards; }
@keyframes game-drag-status-dwell { to { transform: scaleX(1); } }
.global-game-multi-tray { position: fixed; z-index: 1760; right: clamp(.75rem, 3vw, 2rem); bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem .45rem .7rem; border: 1.5px solid color-mix(in srgb, var(--color-purple) 35%, var(--color-gray-border)); border-radius: .8rem; background: color-mix(in srgb, var(--color-cream) 94%, transparent); box-shadow: 0 .45rem 1.2rem color-mix(in srgb, var(--color-gray-dark) 15%, transparent); }
.global-game-multi-tray > span { color: var(--color-purple); font: 800 .56rem var(--font-mono); text-transform: uppercase; }
.global-game-multi-tray-cover { width: 2.7rem; aspect-ratio: 3 / 4; overflow: hidden; border: 1.5px solid var(--color-cream); border-radius: .4rem; background: var(--color-gray-dark); box-shadow: 0 .2rem 0 var(--color-purple); }
.global-game-multi-tray-cover img { width: 100%; height: 100%; object-fit: cover; }
.global-game-multi-tray-cover > span { display: grid; height: 100%; padding: .2rem; place-items: center; color: var(--color-cream); font: 700 .4rem var(--font-heading); text-align: center; }
.global-game-multi-tray button { min-height: 2.75rem; padding: 0 .7rem; border: 1.5px solid var(--color-purple); border-radius: .45rem; background: var(--color-purple); color: var(--color-white); font: 800 .58rem var(--font-mono); text-transform: uppercase; cursor: pointer; }
html.global-game-touch-drag-active, body.global-game-touch-drag-active,
html.global-game-cover-drag-active, body.global-game-cover-drag-active {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body.global-game-cover-drag-active {
  position: fixed;
  top: var(--game-drag-locked-top, 0);
  right: 0;
  left: var(--game-drag-locked-left, 0);
}
body.global-game-touch-drag-active #root,
body.global-game-cover-drag-active #root { width: 100%; max-width: 100%; overflow-x: hidden; }
@keyframes global-status-map-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes game-drag-step-in { from { opacity: 0; transform: translateY(.45rem); } }
@keyframes game-drag-status-step-out { to { opacity: 0; transform: scale(.985); } }
@keyframes game-drag-collections-step-in { from { opacity: 0; transform: scale(.975); } }
@keyframes game-drag-collection-card-in { from { opacity: 0; transform: translateY(.3rem) scale(.96); } }
@keyframes global-status-received { 50% { transform: translateY(-.25rem) scale(1.12); } }
@keyframes game-drag-check-in {
  from { opacity: 0; transform: scale(.35) rotate(-18deg); }
  65% { transform: scale(1.16) rotate(3deg); }
}
@keyframes game-drag-remove-confirm {
  45% { opacity: .38; transform: scale(.72) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1); }
}
@media (max-width: 600px) {
  .game-drag-map { grid-template-rows: auto auto minmax(0, 1fr) auto; gap: .45rem; padding: max(.7rem, env(safe-area-inset-top)) .55rem max(.7rem, env(safe-area-inset-bottom)); }
  .game-drag-map > header { min-height: 2.4rem; align-items: center; flex-direction: column; gap: .12rem; padding-right: 3.5rem; padding-left: 3.5rem; }
  .game-drag-map > header strong { max-width: 100%; font-size: .92rem; }
  .game-drag-map > header span { overflow: hidden; max-width: 100%; font-size: .48rem; text-overflow: ellipsis; white-space: nowrap; }
  .game-drag-map-cancel { top: max(.75rem, env(safe-area-inset-top)); left: .75rem; min-width: 0; width: 3rem; padding-inline: .25rem; font-size: .52rem; }
  .game-drag-map-shelf > header { min-height: 1.85rem; padding: .32rem .5rem; }
  .game-drag-map-shelf > header h2 { font-size: .58rem; }
  .game-drag-map-shelf > header span { font-size: .42rem; }
  .game-drag-map--status-only,
  .game-drag-map--collection-only { grid-template-rows: auto auto auto auto; align-content: start; }
  .game-drag-map--status-only .game-drag-map-status-shelf,
  .game-drag-map--collection-only .game-drag-map-collection-shelf { align-self: start; }
  .game-drag-map-status-targets { gap: .35rem; padding: .4rem; }
  .game-drag-map-status-targets > .game-drag-target { width: calc(50% - .175rem); flex-basis: calc(50% - .175rem); max-width: 12rem; }
  .game-drag-map-status-targets .game-drag-destination { grid-template-columns: 1.8rem minmax(0, 1fr); gap: .35rem; }
  .game-drag-map-status-targets .game-drag-destination-icon { width: 1.8rem; height: 1.8rem; }
  .game-drag-map-status-targets .game-drag-destination-icon > svg { width: 1rem; height: 1rem; }
  .game-drag-map--collection-only.game-drag-map--dense-collections { grid-template-rows: auto auto minmax(0, 1fr) auto; align-content: stretch; }
  .game-drag-map--collection-only .game-drag-map-collection-shelf--dense { height: 100%; align-self: stretch; }
  .game-drag-map-targets { --collection-drop-columns: 2; --collection-drop-target-height: 4.5rem; gap: .4rem; padding: .4rem; scroll-padding: .4rem; }
  .game-drag-map-targets .game-drag-destination-label { font-size: .82rem; }
  .game-drag-map-utility--multi,
  .game-drag-target { min-height: 4.5rem; }
  .game-drag-map-utilities { grid-template-columns: 1fr; gap: .4rem; }
  /* The game actions share one compact row on phones so the collections
     stay in view (#2051); the desktop 7.2rem tiles would fill the screen. */
  .game-drag-map-utilities--actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  /* Icon above label: four tiles side by side leave ~23px for a label on a
     320px phone. */
  .game-drag-map-basic-utility .game-drag-map-utility { flex-direction: column; min-height: 3.6rem; padding: .35rem; gap: .15rem; text-align: center; }
  .game-drag-map-basic-utility .game-drag-map-utility-icon { width: 1.8rem; height: 1.8rem; }
  .game-drag-map-basic-utility .game-drag-map-utility-copy strong { font-size: .48rem; white-space: normal; }
  .game-drag-map-basic-utility .game-drag-map-utility-copy small { display: none; }
  .game-drag-map-utility { min-height: 3.4rem; padding: .4rem .55rem; }
  .game-drag-map-utility-icon { width: 1.85rem; height: 1.85rem; font-size: 1rem; }
  .game-drag-map-utility small { font-size: .4rem; }
  .game-drag-map--selecting .game-drag-map-utilities { visibility: hidden; min-height: 3.4rem; }
  .game-drag-map--selecting .game-drag-map-targets { padding-bottom: 5.25rem; scroll-padding-bottom: 5.25rem; }
  .global-game-multi-tray { right: .75rem; left: .75rem; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .game-drag-map { animation: none; }
  .game-drag-map--collection-only .game-drag-map-utilities,
  .game-drag-map--collection-only .game-drag-map-collection-shelf,
  .game-drag-map--step-out .game-drag-map-status-shelf,
  .game-drag-map--step-in .game-drag-map-collection-shelf .game-drag-target { animation: none; }
  .game-drag-target,
  .game-drag-destination-icon,
  .game-drag-map-utility { transition: none; }
  .game-drag-target--received .game-drag-destination-icon,
  .game-drag-target--received .game-drag-destination-check { animation: none; }
}
/* When the status menu is open, let it escape the card's clip box —
   with STATUS + ACTIONS + four options + up to three actions the menu is
   taller than the cover, and `overflow: hidden` above was hiding the
   trailing rows (Journal, Remove). The cover and hover overlay both get
   `border-radius: inherit` below so they still clip to the card's rounded
   corners even when the outer clip is off. */
/* Cards with interactive labels let them escape the rounded clip. The cover
   layers self-round below so exposing overflow does not square the artwork. */
.game-card:has(.card-action-bar),
.game-card:has(.game-platform-badges) { overflow: visible; }
.game-card-cover,
.game-card-fallback,
.game-card-shade,
.game-card-header,
.game-card-footer { border-radius: inherit; }
.game-card-fallback {
  display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
  padding: 0.5rem; text-align: center; font-size: 0.75rem;
  color: var(--color-text-secondary); background: var(--color-gray-bg);
}
.header-actions { display: flex; align-items: center; gap: 0.5rem; position: relative; }
.game-card:hover,
.game-card:focus-within {
  z-index: 10;
  transform: translateY(-4px);
  box-shadow: 3px 6px 0 0 var(--color-red);
}
/* The cover stays clean at rest. On hover/focus, a two-edge shade supports a
   title/platform header at the top and status/action controls at the bottom. */
.game-card-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.1) 25%, transparent 44%),
    linear-gradient(to top, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.12) 27%, transparent 48%);
  opacity: 0;
  transition: opacity 0.2s;
}
.game-card--in-library,
.game-card--in-library:hover,
.game-card--in-library:focus-within {
  box-shadow: 3px 6px 0 0 var(--color-red);
}
.game-card--status-playing { --game-card-library-accent: var(--color-status-playing); }
.game-card--status-played { --game-card-library-accent: var(--color-status-played); }
.game-card--status-paused { --game-card-library-accent: var(--color-status-paused); }
.game-card--status-backlog { --game-card-library-accent: var(--color-status-backlog); }
.game-card--status-abandoned { --game-card-library-accent: var(--color-status-abandoned); }
.game-card--status-wishlist { --game-card-library-accent: var(--color-status-want); }
.game-card--status-unknown { --game-card-library-accent: var(--color-gray); }
.game-card-badge-stack {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: .35rem;
}
.game-card-release-badge {
  display: grid;
  gap: .08rem;
  padding: .35rem .48rem;
  border: 1px solid color-mix(in srgb, var(--color-cream) 60%, transparent);
  border-radius: .42rem;
  background: rgba(30, 28, 26, .72);
  color: var(--color-cream);
  font: 700 .5rem/1.2 var(--font-mono);
  letter-spacing: .035em;
  text-align: right;
  text-transform: uppercase;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.game-card-release-badge span { font-weight: 500; opacity: .88; }
.steam-playtime-badge.icon-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .28rem .4rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: .42rem;
  background: rgba(20,20,20,.78);
  color: var(--color-white);
  font: 750 .52rem/1 var(--font-mono);
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
  white-space: nowrap;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.steam-playtime-badge img { width: .78rem; height: .78rem; object-fit: contain; filter: brightness(0) invert(1); }
.steam-playtime-badge.icon-tooltip::after {
  top: auto;
  bottom: calc(100% + .4rem);
}
.game-card:hover .game-card-release-badge,
.game-card:focus-within .game-card-release-badge,
.game-card--touch-open .game-card-release-badge { opacity: 0; }
.game-card-header,
.game-card-footer {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  pointer-events: none;
}
.game-card-header {
  top: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  padding: .5rem .55rem .75rem;
  opacity: 0;
  transform: translateY(-.2rem);
  transition: opacity .18s ease, transform .18s ease;
}
.game-card-footer {
  top: .4rem;
  right: .4rem;
  bottom: auto;
  left: auto;
  padding: 0;
}
.game-card:hover .game-card-shade,
.game-card:focus-within .game-card-shade,
.game-card--touch-open .game-card-shade,
.game-card:hover .game-card-header,
.game-card:focus-within .game-card-header,
.game-card--touch-open .game-card-header {
  opacity: 1;
  transform: translateY(0);
}
.game-card-hover-title {
  min-width: 0;
  max-width: calc(100% - 4rem);
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 1px #fff;
}
.game-platform-badges {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  align-items: center;
  gap: .25rem;
}
.game-platform-badge {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: .42rem;
  background: rgba(20,20,20,.72);
  color: var(--color-white);
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.game-platform-badge svg { width: .95rem; height: .95rem; }
/* Keep every supported platform visible. The group can wrap on compact cards
   instead of silently dropping Switch or another console family. */
.game-platform-badges { flex-wrap: wrap; justify-content: flex-end; max-width: calc(3 * 1.55rem + 2 * .25rem); }
/* The header normally passes clicks through to the cover link. Mouse-capable
   devices opt the platform group back into hit testing solely for its labels;
   touch keeps the whole header transparent to the two-tap card interaction. */
@media (hover: hover) {
  .game-platform-badges { pointer-events: auto; }
}
@media (max-width: 600px) {
  .game-platform-badges {
    flex-wrap: wrap;
    width: calc(3 * 1.55rem + 2 * .25rem);
  }
}
.game-card-link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}
.game-card-link img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; opacity: 0; transition: opacity 0.3s ease; }
.game-card-link img.loaded { opacity: 1; }
.game-card-cover { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.3s ease; }
.game-card-cover.loaded { opacity: 1; }

/* Visible labels for compact cover-card icons. Keyboard focus receives the
   same explanation as mouse hover; native title bubbles are too slow and
   inconsistent for controls this small. */
.icon-tooltip { position: relative; }
.icon-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  z-index: 50;
  width: max-content;
  max-width: 13rem;
  padding: .35rem .5rem;
  border-radius: .35rem;
  background: var(--color-gray-dark);
  color: var(--color-white);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  font: 600 .62rem/1.3 var(--font-mono);
  text-align: left;
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.15rem);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.icon-tooltip:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (hover: hover) {
  .icon-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.icon-tooltip[aria-expanded="true"]::after { display: none; }
.icon-tooltip--right::after { right: 0; left: auto; }
/* Utility actions live against the cover's right edge, so every label in that
   group opens inward even if a caller forgets the per-button modifier. */
.card-action-group--right .icon-tooltip::after { right: 0; left: auto; }

/* ── Card overlay: bottom action bar ──
   One horizontal icon row pinned to the bottom of every interactive cover.
   A single status icon opens the shared status fan; Journal / Pin / Remove
   disappear while it is open and return when it closes. A bottom scrim keeps
   the controls legible over any cover art. */
/* Outside cover cards (the game-page hero), the shared row remains an
   absolute bottom overlay. A card footer resets it into the footer flow. */
.card-action-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .25rem;
  padding: 0 .35rem;
  pointer-events: auto;
}
.game-card-footer > .card-action-bar {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  opacity: 0;
  transform: translateY(.25rem);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.game-card:hover .game-card-footer > .card-action-bar,
.game-card:focus-within .game-card-footer > .card-action-bar,
.game-card--touch-open .game-card-footer > .card-action-bar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.card-action-group {
  display: inline-flex;
  align-items: center;
  gap: .06rem;
  padding: .12rem;
  border: 1px solid rgba(255, 253, 235, .2);
  border-radius: .55rem;
  background: rgba(9, 12, 18, .38);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(7px) saturate(115%);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
}
.card-action-btn {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .04rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: .4rem;
  /* The group supplies one quiet glass surface. Individual controls stay
     transparent so a row reads as a single dock rather than a stack of dark
     tiles; selection and direct hover provide the inner emphasis. */
  background: transparent;
  box-shadow: none;
  color: rgba(255,253,235,.84);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.card-action-btn svg { width: 16px; height: 16px; display: block; }
.card-action-btn:hover,
.card-action-btn:focus-visible {
  transform: scale(1.08);
  background: rgba(255, 253, 235, .1);
  border-color: rgba(255, 253, 235, .14);
}

/* Per-status colour via a custom prop on each status button. Colour is a state
   signal: only the selected status carries it at rest, while an unselected
   option previews its meaning when that specific control is hovered/focused. */
.card-action-btn[data-status='playing']  { --action-color: var(--color-status-playing); }
.card-action-btn[data-status='played']   { --action-color: var(--color-status-played); }
.card-action-btn[data-status='paused']   { --action-color: var(--color-status-paused); }
.card-action-btn[data-status='backlog']  { --action-color: var(--color-status-backlog); }
.card-action-btn[data-status='abandoned'] { --action-color: var(--color-status-abandoned); }
.card-action-btn[data-status='wishlist'] { --action-color: var(--color-status-want); }
.card-action-btn[data-status]:hover,
.card-action-btn[data-status]:focus-visible { color: var(--action-color); }
.card-action-btn[data-status][data-active] {
  color: var(--action-color);
  background: color-mix(in srgb, var(--action-color) 20%, rgba(9, 12, 18, .46));
  border-color: color-mix(in srgb, var(--action-color) 42%, transparent);
}

/* Non-status actions keep a neutral cream tint; destructive Remove goes red. */
.card-action-btn--ghost { color: rgba(255,253,235,.82); }
.game-card:hover .card-action-btn--ghost { color: var(--color-cream); }
.card-action-btn--ghost[data-active] { color: #f5c542; }
.card-action-btn--destructive { color: rgba(255,253,235,.82); }
.game-card:hover .card-action-btn--destructive { color: var(--color-red); }

/* Larger hit area on touch; the row wraps if a full action set then exceeds
   the card width. */
@media (hover: none) and (pointer: coarse) {
  .card-action-btn { width: 2.75rem; height: 2.75rem; }
  .card-action-btn svg { width: 18px; height: 18px; }
  /* Hover tooltips have no useful trigger on touch and their generated boxes
     otherwise contribute horizontal scroll width while visually hidden. */
  .card-action-btn.icon-tooltip::after { display: none; }
}

@media (max-width: 380px) {
  .game-platform-badges {
    width: calc(3 * 1.4rem + 2 * .15rem);
    gap: 0.15rem;
  }
  .game-platform-badge { width: 1.4rem; height: 1.4rem; }
  .game-platform-badge svg { width: 0.875rem; height: 0.875rem; }
}

@keyframes card-menu-pop {
  from { opacity: 0; transform: translateY(-5px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes card-status-fan-out {
  from { opacity: 0; transform: translateX(-.7rem) scale(.72); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Avatar */
.avatar { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-cream); }
.avatar-sm { width: 2.5rem; height: 2.5rem; }

/* Ambassador verified dot — overlaid on avatar bottom-right */
.amb-avatar-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  flex-shrink: 0;
}
.amb-dot {
  /* Star matches the yellow used on the ambassador badge in ProfileHero
   * (#862). Text-align + line-height centre the ★ glyph vertically in the
   * dot; without them the star sat 1-2px low. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-yellow);
  border-radius: 50%;
  color: var(--color-gray-dark);
  font-size: 12px;
  line-height: 1;
  border: 2px solid #fff;
  cursor: default;
  text-align: center;
  position: absolute;
  bottom: -3px;
  right: -3px;
}
/* Large avatars (84px+): spotlight, profile */
.amb-dot-lg {
  width: 30px;
  height: 30px;
  font-size: 15px;
  line-height: 1;
  padding-bottom: 1px;
  border-width: 2.5px;
  bottom: -4px;
  right: -4px;
}

.entry-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-heading-regular);
  font-size: 0.75rem;
  color: #6b3e28;
  background: #f9e6d9;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
}
.entry-type-badge--icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.3rem;
  cursor: default;
  z-index: 1;
}

/* Section Headers */
.section-header {
  font-family: var(--font-heading-regular);
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--color-gray-dark);
}

/* Grid */
.game-grid-card {
  background: var(--color-peach);
  border-radius: 0.75rem;
  padding: 1rem;
}
.game-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.game-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.game-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* Slim editorial split — "Because You Like" sections (1/5 text : 4/5 covers) */
.slim-split-card {
  background: var(--color-peach);
  border-radius: 0.75rem;
  box-shadow: 6px 6px 0 0 var(--color-red);
  display: grid;
  grid-template-columns: 1fr 4fr;
}
.slim-split-left {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.slim-split-heading {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.3px;
}
.slim-split-right {
  padding: 14px 14px 14px 0;
}
@media (max-width: 820px) {
  .slim-split-card { grid-template-columns: 1fr; }
  .slim-split-right { padding: 0 14px 14px; }
}

/* Editorial split — game_grid sections */
.ed-split-card {
  background: var(--color-peach);
  border-radius: 0.75rem;
  box-shadow: 6px 6px 0 0 var(--color-red);
  display: grid;
  grid-template-columns: 240px 1fr;
}
.ed-split-left {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.ed-split-tag {
  display: inline-flex;
  align-items: center;
  background: var(--color-red);
  color: var(--color-cream);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 2px solid var(--color-gray-dark);
  box-shadow: 2px 2px 0 0 var(--color-gray-dark);
  align-self: flex-start;
}
.ed-split-heading {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.06;
  letter-spacing: -0.4px;
}
.ed-split-right {
  padding: 14px;
}
@media (max-width: 820px) {
  .ed-split-card { grid-template-columns: 1fr; }
}

/* Game pinboard — game_grid / most_collected sections */
.gp-board {
  background: var(--color-peach);
  border-radius: 0.75rem;
  padding: 22px 18px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
/* For You pinboards opt in; editorial grids keep their existing layout. */
.gp-board--four-columns { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .gp-board { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .gp-board { grid-template-columns: repeat(2, 1fr); padding: 16px 12px; gap: 12px; }
}

/* Skeleton placeholder */
.skeleton-card {
  aspect-ratio: 2/3;
  border-radius: 0.75rem;
  background: url('/images/placeholder.avif') center / cover no-repeat;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
.skeleton-title {
  width: 12rem;
  height: 1.5rem;
  border-radius: 0.5rem;
  background: var(--color-gray-bg);
  margin-bottom: 1rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Input */
.input {
  font-family: var(--font-heading-regular);
  font-size: 0.875rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-gray-border);
  border-radius: 0.5rem;
  background: var(--color-white);
  color: var(--color-gray-dark);
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}
.input:focus { border-color: var(--color-red); }
.input::placeholder { color: var(--color-gray-light); }

/* Modal */


.modal-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  margin: 0 0 1.5rem;
  color: var(--color-gray-dark);
}
.modal-label {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-gray-dark);
  margin-bottom: 0.5rem;
  display: block;
}
.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.game-drag-new-collection {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
}
.game-drag-new-collection > label {
  color: var(--color-gray-dark);
  font: 700 .7rem var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.game-drag-new-collection > input {
  min-width: 0;
  padding: .7rem .75rem;
  border: 1.5px solid var(--color-gray-border);
  border-radius: .55rem;
  background: var(--color-white);
  font: .8rem var(--font-mono);
}
.game-drag-new-collection .collection-icon-picker {
  display: grid;
  grid-template-columns: repeat(6, 1.95rem);
  gap: .25rem;
}
.game-drag-new-collection .collection-icon-picker button {
  display: grid;
  width: 1.95rem;
  height: 1.95rem;
  padding: .36rem;
  place-items: center;
  border: 1.5px solid var(--color-gray-border);
  border-radius: .48rem;
  background: var(--color-cream);
  color: var(--color-gray);
  cursor: pointer;
}
.game-drag-new-collection .collection-icon-picker button:hover,
.game-drag-new-collection .collection-icon-picker button.selected {
  border-color: var(--group-accent, var(--color-red));
  color: var(--group-accent, var(--color-red));
}
.game-drag-new-collection .collection-icon-picker button.selected {
  background: color-mix(in srgb, var(--group-accent, var(--color-red)) 10%, var(--color-cream));
}
.game-drag-new-collection .collection-icon-picker svg {
  width: 100%;
  height: 100%;
}
.game-drag-new-collection-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .25rem;
}

@media (max-width: 520px) {
  .game-drag-new-collection .collection-icon-picker {
    grid-template-columns: repeat(3, 1.95rem);
  }
}

/* ─── Journal Prompt Card ─── */
.journal-prompt-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 9.6rem;
  background: var(--color-peach);
  border: 2px solid var(--color-gray-dark);
  border-radius: 0.75rem;
  padding: 2rem 2.5rem;
  box-shadow: 5px 5px 0 0 var(--color-red);
}

.journal-prompt-icon {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  background: var(--color-red);
  border-radius: 0;
  border: 2px solid var(--color-gray-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.journal-prompt-icon img {
  width: 2.75rem;
  height: 2.75rem;
  filter: invert(1);
}

.journal-prompt-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.journal-prompt-question p,
.journal-prompt-question {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-dark);
  margin: 0;
  line-height: 1.2;
}

.journal-prompt-count {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red);
  margin: 0;
}

.journal-prompt-cta {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-dark);
  background: var(--color-cream);
  border: 2px solid var(--color-gray-dark);
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  min-height: 2.75rem;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.journal-prompt-cta:hover { background: var(--color-sand); }
.journal-prompt-cta:disabled { border-color: var(--color-gray-border); background: var(--color-gray-bg); color: var(--color-gray); box-shadow: none; cursor: default; }
.journal-prompt-response { min-width: 0; padding: .9rem; border: 1.5px solid var(--color-gray-border); border-radius: .65rem; background: var(--color-white); }
.journal-prompt-cta:active {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-cream);
}

@media (max-width: 768px) {
  .journal-prompt-card { min-height: 0; gap: 1rem; padding: 1.25rem 1.5rem; }
  .journal-prompt-question, .journal-prompt-question p { font-size: 1.125rem; }
  .journal-prompt-cta { font-size: 0.75rem; padding: 0.625rem 1rem; }
}

@media (max-width: 480px) {
  .journal-prompt-card { flex-wrap: wrap; }
  .journal-prompt-cta { width: 100%; text-align: center; }
}

/* Coarse-pointer tablets and phones in landscape should retain the mobile
   navigation model even when their CSS viewport is wider than 768px. */
@media (max-width: 960px) and (hover: none) and (pointer: coarse) {
  :root { --header-height: calc(56px + env(safe-area-inset-top)); --bottom-nav-height: calc(5rem + env(safe-area-inset-bottom)); }
  .header {
    padding-top: env(safe-area-inset-top);
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  .main-content {
    margin-left: 0;
    margin-right: 0;
    padding: 1.5rem 1rem calc(1.5rem + var(--bottom-nav-height));
  }
  .main-area {
    margin-left: 0;
    margin-right: 0;
    padding-bottom: var(--bottom-nav-height);
  }
}

/* The NoxHere mobile trigger is injected after the app stylesheet and ships
   with a 20px bottom offset. Lift it above Playnist's fixed bottom nav while
   retaining the widget's own safe-area-aware horizontal placement. */
@media (max-width: 768px), (max-width: 960px) and (hover: none) and (pointer: coarse) {
  .feedback-trigger { bottom: calc(var(--bottom-nav-height) + .75rem) !important; }
}

/* Empty State */
/* Reusable dotted card background */
.dotted-card {
  background:
    radial-gradient(circle, var(--color-gray-border) 1px, transparent 1px);
  background-size: 0.75rem 0.75rem;
  background-color: var(--color-peach);
  border: 1px solid var(--color-gray-border);
  border-radius: 1rem;
  padding: 3rem 2rem;
  text-align: center;
}

.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  border-radius: 1rem;
}
.empty-state-emoji { font-size: 3rem; margin-bottom: 0.75rem; }
.empty-state-text { font-size: 1rem; color: var(--color-gray); margin-bottom: 1rem; }

/* ─── Responsive ─── */

@media (max-width: 1024px) {
  .game-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  /* Extend the header downwards by the iOS notch safe area so the logo +
     search + icons don't get clipped under the status bar. Every layout
     anchor already keys off --header-height, so redefining it here flows
     through to main-content margin, sidebar top, dropdown max-heights, etc. */
  :root { --header-height: calc(56px + env(safe-area-inset-top)); --bottom-nav-height: calc(5rem + env(safe-area-inset-bottom)); }
  .header { padding-top: env(safe-area-inset-top); }
  .main-content { margin-left: 0; margin-right: 0; padding: 1.5rem 1rem calc(1.5rem + var(--bottom-nav-height)); }
  .main-area { margin-left: 0; margin-right: 0; padding-bottom: var(--bottom-nav-height); }
  .game-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
  .game-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  [data-slot="dialog-content"] { padding: 1.25rem 1rem; }
  [data-slot="dialog-content"] .pill { font-size: 0.75rem; padding: 0.3125rem 0.75rem; }

}

/* iOS Safari zooms into focused form fields below 16px. Key this protection
   to touch input rather than portrait width: landscape phones and compact
   tablets can be 812–960 CSS pixels wide and were falling back to 12–14px,
   zooming the visual viewport and making 100%-width pages appear broken.
   The rich-text editor is a contenteditable, which iOS zooms the same way
   (#2053). */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  textarea,
  select,
  [contenteditable="true"],
  [contenteditable=""],
  [contenteditable="plaintext-only"] {
    /* Keep the existing touch-field floor, including non-Tiptap editors.
       Respect a larger root text size instead of forcing it back to 16px. */
    font-size: max(16px, 1rem) !important;
  }

  /* Dialog auto-focus can run while its enter animation is still scaled
     down. Keep touch form text full-size throughout opening/closing without
     removing the fade, centering translation, or focus restoration. */
  :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"], [data-slot="sheet-content"])[data-size] {
    --tw-enter-scale: 1;
    --tw-exit-scale: 1;
  }

  /* Repeated taps on actions should activate the control, not zoom the page.
     Scope this to controls, not the document or reading/editing surfaces:
     manipulation retains panning and pinch zoom. Low specificity preserves
     the intentional drag/crop gestures owned by individual components. */
  :where(button, a[href], summary, input[type="button"], input[type="submit"], input[type="reset"],
    [role="button"], [role="tab"], [role="menuitem"], [role="option"],
    [role="checkbox"], [role="radio"], [role="switch"], [role="combobox"]):not(:where(.crop-handle, .crop-edge, [data-slot="sheet-handle"])) {
    touch-action: manipulation;
  }
}
@media (max-width: 480px) {
  .main-content { padding: 1rem 0.75rem calc(1rem + env(safe-area-inset-bottom)); }
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  .game-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .section-header { font-size: 1.25rem; }
  .empty-state { padding: 2rem 1rem; }
  /* Keep the shared dialog's transform-based centering on phones. Overriding
     top/left/transform here pushed every modal into the top-left corner. */
  [data-slot="dialog-content"] {
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    border-radius: 0.75rem;
    padding: calc(1rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
  }
  :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"], [data-slot="sheet-content"])[data-size] {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
  }
  :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"], [data-slot="sheet-content"])[data-size="tall"] {
    height: calc(100dvh - 1rem);
    max-height: calc(100dvh - 1rem);
  }

}


/* Shared spinner animation */
@keyframes spin { to { transform: rotate(360deg); } }
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    :root, :host {
      --shimmer-angle: 20deg;
    }

    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
      --scroll-fade-t: 0px;
      --scroll-fade-b: 0px;
      --scroll-fade-s: 0px;
      --scroll-fade-e: 0px;
      --scroll-fade-mask: initial;
      --shimmer-image: initial;
      --shimmer-text-fill: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: var(--plx-font-body);
    --font-mono: var(--plx-font-mono);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --tracking-wide: .025em;
    --radius-xs: var(--plx-radius-xs);
    --radius-sm: var(--plx-radius-sm);
    --radius-md: var(--plx-radius-md);
    --radius-lg: var(--plx-radius-lg);
    --radius-xl: var(--plx-radius-xl);
    --radius-2xl: var(--plx-radius-2xl);
    --shadow-xs: 0 0 #0000;
    --shadow-sm: var(--plx-shadow-brutalist-1);
    --shadow-md: var(--plx-shadow-brutalist-2);
    --shadow-lg: var(--plx-shadow-brutalist-3);
    --shadow-xl: var(--plx-shadow-brutalist-4);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --blur-xs: 4px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.2, 0, 0, 1);
    --color-background: var(--surface-page);
    --color-foreground: var(--text-primary);
    --color-card: var(--surface-raised);
    --color-card-foreground: var(--text-primary);
    --color-popover: var(--surface-raised);
    --color-popover-foreground: var(--text-primary);
    --color-primary: var(--accent);
    --color-primary-foreground: var(--text-on-accent);
    --color-secondary: var(--surface-muted);
    --color-secondary-foreground: var(--text-primary);
    --color-accent: var(--surface-accent);
    --color-accent-foreground: var(--text-accent);
    --color-muted: var(--surface-muted);
    --color-muted-foreground: var(--text-muted);
    --color-border: var(--rule-decorative);
    --color-input: var(--border-control);
    --color-ring: var(--focus-ring);
    --color-destructive: var(--status-bad);
    --color-status-ok: var(--status-ok);
    --color-status-ok-surface: var(--status-ok-surface);
    --color-status-ok-border: var(--status-ok-border);
    --color-status-warn: var(--status-warn);
    --color-status-warn-surface: var(--status-warn-surface);
    --color-status-warn-border: var(--status-warn-border);
    --color-status-bad: var(--status-bad);
    --color-status-bad-surface: var(--status-bad-surface);
    --color-status-bad-border: var(--status-bad-border);
    --color-status-bad-solid: var(--status-bad-solid);
    --color-status-bad-on-solid: var(--status-bad-on-solid);
    --color-status-info: var(--status-info);
    --color-status-info-surface: var(--status-info-surface);
    --color-status-info-border: var(--status-info-border);
    --color-page: var(--surface-page);
    --color-raised: var(--surface-raised);
    --color-sunken: var(--surface-sunken);
    --color-peach: var(--surface-accent);
    --color-sand: var(--surface-sand);
    --color-overlay: var(--surface-overlay);
    --color-ink: var(--text-primary);
    --color-ink-soft: var(--text-secondary);
    --color-faint: var(--text-muted);
    --color-brand: var(--text-brand);
    --color-rule: var(--rule-decorative);
    --color-control: var(--border-control);
    --color-strong: var(--border-strong);
    --color-border-control: var(--border-control);
    --color-game-playing: var(--game-status-playing);
    --color-game-played: var(--game-status-played);
    --color-game-paused: var(--game-status-paused);
    --color-game-backlog: var(--game-status-backlog);
    --color-game-abandoned: var(--game-status-abandoned);
    --color-game-want: var(--game-status-want);
    --color-game-all: var(--game-status-all);
    --color-red: var(--plx-red-700);
    --color-red-bright: var(--plx-red-600);
    --color-red-dark: var(--plx-red-800);
    --color-red-hover: var(--plx-red-hover);
    --color-terra: var(--plx-terra-400);
    --color-cream: var(--plx-cream-0);
    --color-green: var(--plx-green-600);
    --color-green-success: var(--plx-green-400);
    --color-blue-royal: var(--plx-blue-700);
    --color-blue-bright: var(--plx-blue-500);
    --color-purple: var(--plx-purple-500);
    --color-pink: var(--plx-pink-500);
    --color-orange: var(--plx-orange-500);
    --color-sidebar: var(--surface-raised);
    --color-sidebar-foreground: var(--text-primary);
    --color-sidebar-primary: var(--accent);
    --color-sidebar-primary-foreground: var(--text-on-accent);
    --color-sidebar-accent: var(--surface-muted);
    --color-sidebar-accent-foreground: var(--text-primary);
    --color-sidebar-border: var(--rule-decorative);
    --color-sidebar-ring: var(--focus-ring);
    --color-chart-1: var(--viz-1);
    --color-chart-2: var(--viz-2);
    --color-chart-3: var(--viz-3);
    --color-chart-4: var(--viz-4);
    --color-chart-5: var(--viz-5);
    --font-heading: var(--plx-font-heading);
    --font-heading-regular: var(--plx-font-heading-regular);
    --font-heading-light: var(--plx-font-heading-light);
    --text-display: var(--type-display-size);
    --text-display--line-height: var(--type-display-line-height);
    --text-display--font-weight: 700;
    --text-display--font-family: var(--plx-font-heading);
    --text-h1: var(--type-h1-size);
    --text-h1--line-height: var(--type-h1-line-height);
    --text-h1--font-weight: 700;
    --text-h1--font-family: var(--plx-font-heading);
    --text-h2: var(--type-h2-size);
    --text-h2--line-height: var(--type-h2-line-height);
    --text-h2--font-weight: 700;
    --text-h2--font-family: var(--plx-font-heading);
    --text-h3: var(--type-h3-size);
    --text-h3--line-height: var(--type-h3-line-height);
    --text-h3--font-weight: 700;
    --text-h3--font-family: var(--plx-font-heading);
    --text-body-lg: var(--type-body-lg-size);
    --text-body: var(--type-body-size);
    --text-body--line-height: var(--type-body-line-height);
    --text-body-sm: var(--type-body-sm-size);
    --text-label: var(--type-label-size);
    --text-label--font-family: var(--plx-font-heading-regular);
    --text-micro: var(--type-micro-size);
    --text-micro--font-family: var(--plx-font-mono);
    --radius-none: var(--plx-radius-none);
    --radius-full: var(--plx-radius-full);
    --shadow-brutalist-1: var(--plx-shadow-brutalist-1);
    --shadow-brutalist-2: var(--plx-shadow-brutalist-2);
    --shadow-brutalist-3: var(--plx-shadow-brutalist-3);
    --shadow-brutalist-4: var(--plx-shadow-brutalist-4);
    --shadow-brutalist-red: var(--plx-shadow-brutalist-red-3);
    --shadow-soft: var(--plx-shadow-soft);
    --animate-skeleton-pulse: skeleton-pulse 1.5s ease-in-out infinite;
    --animate-pop-in: pop-in .25s cubic-bezier(.2, 0, 0, 1);
    --animate-heart-burst: heart-burst .5s cubic-bezier(.2, 0, 0, 1);
  }
}

.collapse {
  visibility: collapse;
}

.invisible {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

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

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.static {
  position: static;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0;
}

.top-1\/2 {
  top: 50%;
}

.top-2 {
  top: calc(var(--spacing) * 2);
}

.right-2 {
  right: calc(var(--spacing) * 2);
}

.left-1\/2 {
  left: 50%;
}

.isolate {
  isolation: isolate;
}

.z-\(--z-modal\) {
  z-index: var(--z-modal);
}

.z-50 {
  z-index: 50;
}

.container {
  width: 100%;
}

@media (min-width: 40rem) {
  .container {
    max-width: 40rem;
  }
}

@media (min-width: 48rem) {
  .container {
    max-width: 48rem;
  }
}

@media (min-width: 64rem) {
  .container {
    max-width: 64rem;
  }
}

@media (min-width: 80rem) {
  .container {
    max-width: 80rem;
  }
}

@media (min-width: 96rem) {
  .container {
    max-width: 96rem;
  }
}

.-mx-4 {
  margin-inline: calc(var(--spacing) * -4);
}

.-mb-4 {
  margin-bottom: calc(var(--spacing) * -4);
}

.block {
  display: block;
}

.contents {
  display: contents;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.inline {
  display: inline;
}

.inline-flex {
  display: inline-flex;
}

.size-4 {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}

.size-7 {
  width: calc(var(--spacing) * 7);
  height: calc(var(--spacing) * 7);
}

.size-9 {
  width: calc(var(--spacing) * 9);
  height: calc(var(--spacing) * 9);
}

.size-11 {
  width: calc(var(--spacing) * 11);
  height: calc(var(--spacing) * 11);
}

.h-1 {
  height: var(--spacing);
}

.max-h-\[calc\(100dvh-2rem\)\] {
  max-height: calc(100dvh - 2rem);
}

.min-h-0 {
  min-height: 0;
}

.min-h-9 {
  min-height: calc(var(--spacing) * 9);
}

.min-h-11 {
  min-height: calc(var(--spacing) * 11);
}

.min-h-13 {
  min-height: calc(var(--spacing) * 13);
}

.w-10 {
  width: calc(var(--spacing) * 10);
}

.w-full {
  width: 100%;
}

.max-w-\[calc\(100\%-2rem\)\] {
  max-width: calc(100% - 2rem);
}

.flex-shrink, .shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.transform {
  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}

.shimmer {
  --_spread: var(--shimmer-spread, calc(3ch + 40px));
  --_base: currentColor;
  --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha* .2)));
  background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), var(--_highlight) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, var(--_highlight) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))));
}

@supports (color: color-mix(in lab, red, red)) {
  .shimmer {
    background-image: var(--shimmer-image, linear-gradient(calc(90deg + var(--shimmer-angle)), var(--_base) calc(50% - var(--_spread)), color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * .5), var(--_highlight) 50%, color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * .5), var(--_base) calc(50% + var(--_spread))));
  }
}

.shimmer {
  background-repeat: no-repeat;
  background-size: calc(200% + var(--_spread) * 2) 100%;
  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);
  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
}

@media (prefers-color-scheme: dark) {
  .shimmer {
    --_highlight: var(--shimmer-color, oklch(from currentColor max(.8, calc(l + .4)) c h / calc(alpha + .4)));
  }
}

.shimmer:where([dir="rtl"], [dir="rtl"] *) {
  animation-direction: reverse;
}

.animate-spin {
  animation: var(--animate-spin);
}

.cursor-grab {
  cursor: grab;
}

.cursor-pointer {
  cursor: pointer;
}

.touch-none {
  touch-action: none;
}

.resize {
  resize: both;
}

.grid-rows-\[auto_1fr\] {
  grid-template-rows: auto 1fr;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-items-center {
  place-items: center;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.gap-0\.5 {
  gap: calc(var(--spacing) * .5);
}

.gap-1\.5 {
  gap: calc(var(--spacing) * 1.5);
}

.gap-2 {
  gap: calc(var(--spacing) * 2);
}

.gap-4 {
  gap: calc(var(--spacing) * 4);
}

.overflow-y-auto {
  overflow-y: auto;
}

.rounded {
  border-radius: .25rem;
}

.rounded-full {
  border-radius: var(--plx-radius-full);
}

.rounded-lg {
  border-radius: var(--plx-radius-lg);
}

.rounded-md {
  border-radius: var(--plx-radius-md);
}

.rounded-xl {
  border-radius: var(--plx-radius-xl);
}

.rounded-b-xl {
  border-bottom-right-radius: var(--plx-radius-xl);
  border-bottom-left-radius: var(--plx-radius-xl);
}

.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}

.border-2 {
  border-style: var(--tw-border-style);
  border-width: 2px;
}

.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}

.border-none {
  --tw-border-style: none;
  border-style: none;
}

.border-current {
  border-color: currentColor;
}

.border-primary {
  border-color: var(--accent);
}

.border-status-bad {
  border-color: var(--status-bad);
}

.border-strong {
  border-color: var(--border-strong);
}

.border-transparent {
  border-color: #0000;
}

.bg-black\/10 {
  background-color: #0000001a;
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-black\/10 {
    background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
  }
}

.bg-border {
  background-color: var(--rule-decorative);
}

.bg-cream {
  background-color: var(--plx-cream-0);
}

.bg-game-want\/10 {
  background-color: var(--game-status-want);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-game-want\/10 {
    background-color: color-mix(in oklab, var(--game-status-want) 10%, transparent);
  }
}

.bg-ink {
  background-color: var(--text-primary);
}

.bg-muted\/50 {
  background-color: var(--surface-muted);
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-muted\/50 {
    background-color: color-mix(in oklab, var(--surface-muted) 50%, transparent);
  }
}

.bg-overlay {
  background-color: var(--surface-overlay);
}

.bg-popover {
  background-color: var(--surface-raised);
}

.bg-primary {
  background-color: var(--accent);
}

.bg-raised {
  background-color: var(--surface-raised);
}

.bg-status-bad-solid {
  background-color: var(--status-bad-solid);
}

.bg-status-warn-border {
  background-color: var(--status-warn-border);
}

.bg-sunken {
  background-color: var(--surface-sunken);
}

.bg-transparent {
  background-color: #0000;
}

.bg-white\/12 {
  background-color: #ffffff1f;
}

@supports (color: color-mix(in lab, red, red)) {
  .bg-white\/12 {
    background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
  }
}

.bg-clip-padding {
  background-clip: padding-box;
}

.fill-rule {
  fill: var(--rule-decorative);
}

.p-0 {
  padding: 0;
}

.p-4 {
  padding: calc(var(--spacing) * 4);
}

.p-5 {
  padding: calc(var(--spacing) * 5);
}

.px-2\.5 {
  padding-inline: calc(var(--spacing) * 2.5);
}

.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}

.px-6 {
  padding-inline: calc(var(--spacing) * 6);
}

.px-8 {
  padding-inline: calc(var(--spacing) * 8);
}

.py-1 {
  padding-block: var(--spacing);
}

.py-1\.5 {
  padding-block: calc(var(--spacing) * 1.5);
}

.py-2\.5 {
  padding-block: calc(var(--spacing) * 2.5);
}

.py-3 {
  padding-block: calc(var(--spacing) * 3);
}

.text-center {
  text-align: center;
}

.font-\[inherit\] {
  font-family: inherit;
}

.font-\[…\] {
  font-family: …;
}

.font-heading {
  font-family: var(--plx-font-heading);
}

.font-heading-regular {
  font-family: var(--plx-font-heading-regular);
}

.font-mono {
  font-family: var(--plx-font-mono);
}

.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}

.text-\[0\.65rem\] {
  font-size: .65rem;
}

.text-\[0\.6875rem\] {
  font-size: .6875rem;
}

.text-\[0\.8125rem\] {
  font-size: .8125rem;
}

.font-bold {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}

.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}

.tracking-\[0\.05em\] {
  --tw-tracking: .05em;
  letter-spacing: .05em;
}

.tracking-wide {
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
}

.text-balance {
  text-wrap: balance;
}

.text-wrap {
  text-wrap: wrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.text-brand {
  color: var(--text-brand);
}

.text-cream {
  color: var(--plx-cream-0);
}

.text-current {
  color: currentColor;
}

.text-foreground {
  color: var(--text-primary);
}

.text-game-playing {
  color: var(--game-status-playing);
}

.text-ink {
  color: var(--text-primary);
}

.text-ink-soft {
  color: var(--text-secondary);
}

.text-muted-foreground {
  color: var(--text-muted);
}

.text-popover-foreground {
  color: var(--text-primary);
}

.text-primary-foreground {
  color: var(--text-on-accent);
}

.text-secondary {
  color: var(--surface-muted);
}

.text-status-bad {
  color: var(--status-bad);
}

.uppercase {
  text-transform: uppercase;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
}

.numeric {
  font-variant-numeric: tabular-nums slashed-zero;
}

.underline {
  text-decoration-line: underline;
}

.underline-offset-4 {
  text-underline-offset: 4px;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-brutalist-red {
  --tw-shadow: var(--plx-shadow-brutalist-red-3);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.shadow-none {
  --tw-shadow: 0 0 #0000;
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ring, .ring-1 {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.ring-foreground\/10 {
  --tw-ring-color: var(--text-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  .ring-foreground\/10 {
    --tw-ring-color: color-mix(in oklab, var(--text-primary) 10%, transparent);
  }
}

.outline {
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.filter {
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}

.transition {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, cubic-bezier(.2, 0, 0, 1));
  transition-duration: var(--tw-duration, .15s);
}

.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, cubic-bezier(.2, 0, 0, 1));
  transition-duration: var(--tw-duration, .15s);
}

.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, cubic-bezier(.2, 0, 0, 1));
  transition-duration: var(--tw-duration, .15s);
}

.duration-100 {
  --tw-duration: .1s;
  transition-duration: .1s;
}

.duration-200 {
  --tw-duration: .2s;
  transition-duration: .2s;
}

.ease-in {
  --tw-ease: var(--ease-in);
  transition-timing-function: var(--ease-in);
}

.ease-in-out {
  --tw-ease: var(--ease-in-out);
  transition-timing-function: var(--ease-in-out);
}

.ease-out {
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
}

.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}

.select-none {
  -webkit-user-select: none;
  user-select: none;
}

.paused {
  animation-play-state: paused;
}

.running {
  animation-play-state: running;
}

@media (hover: hover) {
  .hover\:border-red-hover:hover {
    border-color: var(--plx-red-hover);
  }

  .hover\:bg-peach:hover {
    background-color: var(--surface-accent);
  }

  .hover\:bg-red-hover:hover {
    background-color: var(--plx-red-hover);
  }

  .hover\:bg-rule:hover {
    background-color: var(--rule-decorative);
  }

  .hover\:bg-status-bad-surface:hover {
    background-color: var(--status-bad-surface);
  }

  .hover\:bg-sunken:hover {
    background-color: var(--surface-sunken);
  }

  .hover\:bg-white\/24:hover {
    background-color: #ffffff3d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .hover\:bg-white\/24:hover {
      background-color: color-mix(in oklab, var(--color-white) 24%, transparent);
    }
  }

  .hover\:text-brand:hover {
    color: var(--text-brand);
  }

  .hover\:text-foreground:hover {
    color: var(--text-primary);
  }

  .hover\:underline:hover {
    text-decoration-line: underline;
  }
}

.focus-visible\:outline-2:focus-visible {
  outline-style: var(--tw-outline-style);
  outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}

.focus-visible\:outline-ring:focus-visible {
  outline-color: var(--focus-ring);
}

.active\:cursor-grabbing:active {
  cursor: grabbing;
}

.active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
  --tw-translate-y: 1px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:opacity-50:disabled {
  opacity: .5;
}

.has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_auto_1fr\]:has([data-slot="alert-dialog-media"]) {
  grid-template-rows: auto auto 1fr;
}

.has-data-\[slot\=alert-dialog-media\]\:gap-x-4:has([data-slot="alert-dialog-media"]) {
  column-gap: calc(var(--spacing) * 4);
}

.data-\[side\=bottom\]\:top-1\/2[data-side="bottom"] {
  top: 50%;
}

.data-\[side\=bottom\]\:left-1\/2[data-side="bottom"] {
  left: 50%;
}

.data-\[side\=bottom\]\:w-full[data-side="bottom"] {
  width: 100%;
}

.data-\[side\=bottom\]\:max-w-\[calc\(100\%-2rem\)\][data-side="bottom"] {
  max-width: calc(100% - 2rem);
}

.data-\[side\=bottom\]\:-translate-x-1\/2[data-side="bottom"] {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.data-\[side\=bottom\]\:-translate-y-1\/2[data-side="bottom"] {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}

.data-\[side\=bottom\]\:rounded-lg[data-side="bottom"] {
  border-radius: var(--plx-radius-lg);
}

.data-\[side\=left\]\:inset-y-0[data-side="left"] {
  inset-block: 0;
}

.data-\[side\=left\]\:left-0[data-side="left"] {
  left: 0;
}

.data-\[side\=left\]\:h-full[data-side="left"] {
  height: 100%;
}

.data-\[side\=left\]\:w-3\/4[data-side="left"] {
  width: 75%;
}

.data-\[side\=right\]\:inset-y-0[data-side="right"] {
  inset-block: 0;
}

.data-\[side\=right\]\:right-0[data-side="right"] {
  right: 0;
}

.data-\[side\=right\]\:h-full[data-side="right"] {
  height: 100%;
}

.data-\[side\=right\]\:w-3\/4[data-side="right"] {
  width: 75%;
}

.data-\[side\=top\]\:inset-x-0[data-side="top"] {
  inset-inline: 0;
}

.data-\[side\=top\]\:top-0[data-side="top"] {
  top: 0;
}

.data-\[side\=top\]\:h-auto[data-side="top"] {
  height: auto;
}

@supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
  .supports-backdrop-filter\:backdrop-blur-xs {
    --tw-backdrop-blur: blur(var(--blur-xs));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }
}

@media not all and (min-width: 768px) {
  .data-\[side\=bottom\]\:max-\[768px\]\:px-4[data-side="bottom"] {
    padding-inline: calc(var(--spacing) * 4);
  }

  .data-\[side\=bottom\]\:max-\[768px\]\:py-5[data-side="bottom"] {
    padding-block: calc(var(--spacing) * 5);
  }
}

@media not all and (min-width: 480px) {
  .max-\[480px\]\:right-3 {
    right: calc(var(--spacing) * 3);
  }

  .max-\[480px\]\:flex {
    display: flex;
  }

  .max-\[480px\]\:justify-center {
    justify-content: center;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:inset-x-0[data-side="bottom"] {
    inset-inline: 0;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:top-auto[data-side="bottom"] {
    top: auto;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:bottom-0[data-side="bottom"] {
    bottom: 0;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:left-auto[data-side="bottom"] {
    left: auto;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:max-h-\[85dvh\][data-side="bottom"] {
    max-height: 85dvh;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:w-full[data-side="bottom"] {
    width: 100%;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:max-w-full[data-side="bottom"] {
    max-width: 100%;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:translate-x-0[data-side="bottom"] {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:translate-y-0[data-side="bottom"] {
    --tw-translate-y: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:\[scrollbar-width\:none\][data-side="bottom"] {
    scrollbar-width: none;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:overflow-y-auto[data-side="bottom"] {
    overflow-y: auto;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:rounded-t-\[1\.25rem\][data-side="bottom"] {
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:rounded-b-none[data-side="bottom"] {
    border-bottom-right-radius: var(--plx-radius-none);
    border-bottom-left-radius: var(--plx-radius-none);
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:border-0[data-side="bottom"] {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:p-0[data-side="bottom"] {
    padding: 0;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:px-4[data-side="bottom"] {
    padding-inline: calc(var(--spacing) * 4);
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:pt-2[data-side="bottom"] {
    padding-top: calc(var(--spacing) * 2);
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:pb-\[calc\(1\.25rem\+env\(safe-area-inset-bottom\)\)\][data-side="bottom"] {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:shadow-none[data-side="bottom"] {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:transition-transform[data-side="bottom"] {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, cubic-bezier(.2, 0, 0, 1));
    transition-duration: var(--tw-duration, .15s);
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:duration-200[data-side="bottom"] {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .data-\[side\=bottom\]\:max-\[480px\]\:ease-out[data-side="bottom"] {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}

@media (min-width: 40rem) {
  .sm\:max-w-sm {
    max-width: var(--container-sm);
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:place-items-start {
    place-items: start;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:group-has-data-\[slot\=alert-dialog-media\]\/alert-dialog-content\:col-start-2:is(:where(.group\/alert-dialog-content):has([data-slot="alert-dialog-media"]) *) {
    grid-column-start: 2;
  }

  .sm\:has-data-\[slot\=alert-dialog-media\]\:grid-rows-\[auto_1fr\]:has([data-slot="alert-dialog-media"]) {
    grid-template-rows: auto 1fr;
  }

  .data-\[side\=bottom\]\:sm\:max-w-sm[data-side="bottom"], .data-\[side\=left\]\:sm\:max-w-sm[data-side="left"], .data-\[side\=right\]\:sm\:max-w-sm[data-side="right"] {
    max-width: var(--container-sm);
  }
}

@media (min-width: 48rem) {
  .md\:text-pretty {
    text-wrap: pretty;
  }
}

.data-open\:animate-in:where([data-state="open"]), .data-open\:animate-in:where([data-open]:not([data-open="false"])) {
  animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
}

.data-open\:fade-in-0:where([data-state="open"]), .data-open\:fade-in-0:where([data-open]:not([data-open="false"])) {
  --tw-enter-opacity: 0;
}

.data-open\:zoom-in-95:where([data-state="open"]), .data-open\:zoom-in-95:where([data-open]:not([data-open="false"])) {
  --tw-enter-scale: .95;
}

.data-\[side\=bottom\]\:data-open\:animate-in[data-side="bottom"]:where([data-state="open"]), .data-\[side\=bottom\]\:data-open\:animate-in[data-side="bottom"]:where([data-open]:not([data-open="false"])) {
  animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
}

.data-\[side\=bottom\]\:data-open\:fade-in-0[data-side="bottom"]:where([data-state="open"]), .data-\[side\=bottom\]\:data-open\:fade-in-0[data-side="bottom"]:where([data-open]:not([data-open="false"])) {
  --tw-enter-opacity: 0;
}

.data-\[side\=left\]\:data-open\:slide-in-from-left[data-side="left"]:where([data-state="open"]), .data-\[side\=left\]\:data-open\:slide-in-from-left[data-side="left"]:where([data-open]:not([data-open="false"])) {
  --tw-enter-translate-x: -100%;
}

.data-\[side\=right\]\:data-open\:slide-in-from-right[data-side="right"]:where([data-state="open"]), .data-\[side\=right\]\:data-open\:slide-in-from-right[data-side="right"]:where([data-open]:not([data-open="false"])) {
  --tw-enter-translate-x: 100%;
}

.data-\[side\=top\]\:data-open\:slide-in-from-top[data-side="top"]:where([data-state="open"]), .data-\[side\=top\]\:data-open\:slide-in-from-top[data-side="top"]:where([data-open]:not([data-open="false"])) {
  --tw-enter-translate-y: -100%;
}

@media not all and (min-width: 480px) {
  .data-\[side\=bottom\]\:max-\[480px\]\:data-open\:slide-in-from-bottom[data-side="bottom"]:where([data-state="open"]), .data-\[side\=bottom\]\:max-\[480px\]\:data-open\:slide-in-from-bottom[data-side="bottom"]:where([data-open]:not([data-open="false"])) {
    --tw-enter-translate-y: 100%;
  }
}

@media (min-width: 481px) {
  .data-\[side\=bottom\]\:min-\[481px\]\:data-open\:zoom-in-95[data-side="bottom"]:where([data-state="open"]), .data-\[side\=bottom\]\:min-\[481px\]\:data-open\:zoom-in-95[data-side="bottom"]:where([data-open]:not([data-open="false"])) {
    --tw-enter-scale: .95;
  }
}

.data-closed\:animate-out:where([data-state="closed"]), .data-closed\:animate-out:where([data-closed]:not([data-closed="false"])) {
  animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
}

.data-closed\:fade-out-0:where([data-state="closed"]), .data-closed\:fade-out-0:where([data-closed]:not([data-closed="false"])) {
  --tw-exit-opacity: 0;
}

.data-closed\:zoom-out-95:where([data-state="closed"]), .data-closed\:zoom-out-95:where([data-closed]:not([data-closed="false"])) {
  --tw-exit-scale: .95;
}

.data-\[side\=bottom\]\:data-closed\:animate-out[data-side="bottom"]:where([data-state="closed"]), .data-\[side\=bottom\]\:data-closed\:animate-out[data-side="bottom"]:where([data-closed]:not([data-closed="false"])) {
  animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
}

.data-\[side\=bottom\]\:data-closed\:fade-out-0[data-side="bottom"]:where([data-state="closed"]), .data-\[side\=bottom\]\:data-closed\:fade-out-0[data-side="bottom"]:where([data-closed]:not([data-closed="false"])) {
  --tw-exit-opacity: 0;
}

.data-\[side\=left\]\:data-closed\:slide-out-to-left[data-side="left"]:where([data-state="closed"]), .data-\[side\=left\]\:data-closed\:slide-out-to-left[data-side="left"]:where([data-closed]:not([data-closed="false"])) {
  --tw-exit-translate-x: -100%;
}

.data-\[side\=right\]\:data-closed\:slide-out-to-right[data-side="right"]:where([data-state="closed"]), .data-\[side\=right\]\:data-closed\:slide-out-to-right[data-side="right"]:where([data-closed]:not([data-closed="false"])) {
  --tw-exit-translate-x: 100%;
}

.data-\[side\=top\]\:data-closed\:slide-out-to-top[data-side="top"]:where([data-state="closed"]), .data-\[side\=top\]\:data-closed\:slide-out-to-top[data-side="top"]:where([data-closed]:not([data-closed="false"])) {
  --tw-exit-translate-y: -100%;
}

@media not all and (min-width: 480px) {
  .data-\[side\=bottom\]\:max-\[480px\]\:data-closed\:slide-out-to-bottom[data-side="bottom"]:where([data-state="closed"]), .data-\[side\=bottom\]\:max-\[480px\]\:data-closed\:slide-out-to-bottom[data-side="bottom"]:where([data-closed]:not([data-closed="false"])) {
    --tw-exit-translate-y: 100%;
  }
}

@media (min-width: 481px) {
  .data-\[side\=bottom\]\:min-\[481px\]\:data-closed\:zoom-out-95[data-side="bottom"]:where([data-state="closed"]), .data-\[side\=bottom\]\:min-\[481px\]\:data-closed\:zoom-out-95[data-side="bottom"]:where([data-closed]:not([data-closed="false"])) {
    --tw-exit-scale: .95;
  }
}

.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}

.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}

.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}

@media not all and (min-width: 480px) {
  .data-\[side\=bottom\]\:max-\[480px\]\:\[\&\:\:-webkit-scrollbar\]\:hidden[data-side="bottom"]::-webkit-scrollbar {
    display: none;
  }
}

:is(.\*\:\[a\]\:underline > *):is(a) {
  text-decoration-line: underline;
}

:is(.\*\:\[a\]\:underline-offset-3 > *):is(a) {
  text-underline-offset: 3px;
}

@media (hover: hover) {
  :is(.\*\:\[a\]\:hover\:text-foreground > *):is(a):hover {
    color: var(--text-primary);
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --scroll-fade-t {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}

@property --scroll-fade-b {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}

@property --scroll-fade-s {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}

@property --scroll-fade-e {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}

@property --scroll-fade-mask {
  syntax: "*";
  inherits: false
}

@property --shimmer-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 20deg;
}

@property --shimmer-image {
  syntax: "*";
  inherits: false
}

@property --shimmer-text-fill {
  syntax: "*";
  inherits: false
}

@media (prefers-reduced-motion: reduce) {
  .shimmer {
    -webkit-text-fill-color: currentColor;
    background-image: none;
    animation: none;
  }
}

:root {
  --plx-red-600: #ef2f15;
  --plx-red-700: #c62e07;
  --plx-red-800: #b0200c;
  --plx-red-hover: #d15839;
  --plx-terra-400: #dd8167;
  --plx-terra-200: #f9b3a9;
  --plx-terra-100: #fbd0cb;
  --plx-terra-50: #fdeae7;
  --plx-orange-500: #fa9b18;
  --plx-orange-600: #e89320;
  --plx-yellow-400: #f4cf03;
  --plx-yellow-200: #ffdc8a;
  --plx-gold-500: #ffb505;
  --plx-gold-700: #b88100;
  --plx-amber-500: #eba500;
  --plx-peach-25: #fff5e1;
  --plx-cream-0: #fffdeb;
  --plx-sand-100: #f5e6c8;
  --plx-green-300: #79bc90;
  --plx-green-700: #1e6c30;
  --plx-green-500: #2ea84a;
  --plx-green-600: #268838;
  --plx-green-400: #17db4e;
  --plx-green-200: #b7dcc0;
  --plx-green-100: #cfe8d5;
  --plx-green-50: #eaf5ed;
  --plx-green-25: #f5faf6;
  --plx-blue-800: #0205d3;
  --plx-blue-700: #0947d7;
  --plx-blue-500: #1e6df6;
  --plx-indigo-600: #401fc1;
  --plx-blue-200: #afcef8;
  --plx-blue-100: #d5e5fb;
  --plx-blue-50: #ebf3ff;
  --plx-blue-25: #f5faff;
  --plx-purple-500: #513edf;
  --plx-purple-400: #625dfe;
  --plx-purple-700: #341a9e;
  --plx-purple-navy: #0c29ab;
  --plx-purple-200: #bdc3f4;
  --plx-purple-100: #d8dbf9;
  --plx-purple-50: #e9ebfb;
  --plx-pink-500: #e83e8c;
  --plx-ink: #1a1a1a;
  --plx-ink-soft: #252525;
  --plx-navy-text: #091747;
  --plx-gray-600: #525252;
  --plx-gray-500: #8a8a8a;
  --plx-gray-cool: #9597a1;
  --plx-gray-400: #a6a6a6;
  --plx-gray-300: #c7c7c7;
  --plx-gray-200: #e3e3e5;
  --plx-tab-border: #e9e8e1;
  --plx-gray-100: #f2f2f2;
  --plx-gray-50: #f7f7f7;
  --plx-white: #fff;
  --plx-black: #000;
  --plx-font-heading: "HF Gesco Bold", Georgia, serif;
  --plx-font-heading-regular: "HF Gesco Regular", Georgia, serif;
  --plx-font-heading-light: "HF Gesco Light", Georgia, serif;
  --plx-font-body: "IBM Plex Sans Variable", system-ui, sans-serif;
  --plx-font-mono: "GT America Mono", "Courier New", monospace;
  --plx-radius-none: 0rem;
  --plx-radius-xs: .25rem;
  --plx-radius-sm: .375rem;
  --plx-radius-md: .5rem;
  --plx-radius-lg: .75rem;
  --plx-radius-xl: 1rem;
  --plx-radius-2xl: 1.25rem;
  --plx-radius-full: 999px;
  --plx-shadow-brutalist-1: 2px 2px 0 0 var(--plx-ink);
  --plx-shadow-brutalist-2: 3px 3px 0 0 var(--plx-ink);
  --plx-shadow-brutalist-3: 4px 4px 0 0 var(--plx-ink);
  --plx-shadow-brutalist-4: 6px 6px 0 0 var(--plx-ink);
  --plx-shadow-brutalist-red-3: 4px 4px 0 0 var(--plx-red-700);
  --plx-shadow-soft: 0 8px 24px #0000001f;
  --plx-header-height: 56px;
  --plx-sidebar-width: 136px;
  --plx-z-dropdown: 1050;
  --plx-z-modal: 1000;
  --plx-z-lightbox: 1100;
  --surface-page: var(--plx-cream-0);
  --surface-raised: var(--plx-white);
  --surface-sunken: var(--plx-gray-100);
  --surface-muted: var(--plx-gray-100);
  --surface-muted-light: var(--plx-gray-50);
  --surface-accent: var(--plx-peach-25);
  --surface-sand: var(--plx-sand-100);
  --surface-inverse: var(--plx-ink);
  --surface-overlay: #0000008c;
  --text-primary: var(--plx-ink);
  --text-secondary: var(--plx-gray-600);
  --text-muted: var(--plx-gray-500);
  --text-faint: var(--plx-gray-400);
  --text-on-accent: var(--plx-cream-0);
  --text-on-inverse: var(--plx-cream-0);
  --text-accent: var(--plx-red-700);
  --text-brand: var(--plx-red-700);
  --rule-decorative: var(--plx-gray-200);
  --border-control: var(--plx-gray-500);
  --border-strong: var(--plx-ink);
  --focus-ring: var(--plx-red-600);
  --accent: var(--plx-red-700);
  --accent-hover: var(--plx-red-hover);
  --type-display-size: 2.5rem;
  --type-display-line-height: 1.05;
  --type-h1-size: 1.75rem;
  --type-h1-line-height: 1.1;
  --type-h2-size: 1.375rem;
  --type-h2-line-height: 1.15;
  --type-h3-size: 1.125rem;
  --type-h3-line-height: 1.2;
  --type-body-lg-size: 1rem;
  --type-body-size: .9375rem;
  --type-body-line-height: 1.55;
  --type-body-sm-size: .8125rem;
  --type-label-size: .8125rem;
  --type-micro-size: .6875rem;
  --text-display: var(--type-display-size);
  --text-display--line-height: var(--type-display-line-height);
  --text-h1: var(--type-h1-size);
  --text-h1--line-height: var(--type-h1-line-height);
  --text-h2: var(--type-h2-size);
  --text-h2--line-height: var(--type-h2-line-height);
  --text-h3: var(--type-h3-size);
  --text-h3--line-height: var(--type-h3-line-height);
  --text-body-lg: var(--type-body-lg-size);
  --text-body: var(--type-body-size);
  --text-body--line-height: var(--type-body-line-height);
  --text-body-sm: var(--type-body-sm-size);
  --text-label: var(--type-label-size);
  --text-micro: var(--type-micro-size);
  --status-ok: var(--plx-green-700);
  --status-ok-surface: var(--plx-green-50);
  --status-ok-border: var(--plx-green-600);
  --status-ok-solid: var(--plx-green-600);
  --status-warn: var(--plx-gold-700);
  --status-warn-surface: var(--plx-peach-25);
  --status-warn-border: var(--plx-orange-500);
  --status-bad: var(--plx-red-700);
  --status-bad-surface: var(--plx-terra-50);
  --status-bad-border: var(--plx-red-700);
  --status-bad-solid: var(--plx-red-700);
  --status-bad-on-solid: var(--plx-cream-0);
  --status-info: var(--plx-blue-700);
  --status-info-surface: var(--plx-blue-50);
  --status-info-border: var(--plx-blue-500);
  --game-status-playing: var(--plx-green-600);
  --game-status-played: var(--plx-red-700);
  --game-status-paused: var(--plx-purple-500);
  --game-status-backlog: var(--plx-blue-500);
  --game-status-abandoned: var(--plx-gray-600);
  --game-status-want: var(--plx-orange-500);
  --game-status-all: var(--plx-ink-soft);
  --viz-1: var(--plx-red-700);
  --viz-2: var(--plx-orange-500);
  --viz-3: var(--plx-green-600);
  --viz-4: var(--plx-blue-700);
  --viz-5: var(--plx-purple-500);
}

@font-face {
  font-family: HF Gesco Bold;
  src: url("/fonts/HFGesco-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: HF Gesco Regular;
  src: url("/fonts/HFGesco-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: HF Gesco Light;
  src: url("/fonts/HFGesco-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: GT America Mono;
  src: url("/fonts/GTAmericaMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --background: var(--surface-page);
  --foreground: var(--text-primary);
  --card: var(--surface-raised);
  --card-foreground: var(--text-primary);
  --popover: var(--surface-raised);
  --popover-foreground: var(--text-primary);
  --primary: var(--accent);
  --primary-foreground: var(--text-on-accent);
  --secondary: var(--surface-muted);
  --secondary-foreground: var(--text-primary);
  --accent-foreground: var(--text-accent);
  --muted-foreground: var(--text-muted);
  --destructive: var(--status-bad);
  --border: var(--rule-decorative);
  --input: var(--border-control);
  --ring: var(--focus-ring);
  --chart-1: var(--viz-1);
  --chart-2: var(--viz-2);
  --chart-3: var(--viz-3);
  --chart-4: var(--viz-4);
  --chart-5: var(--viz-5);
  --radius-sm: var(--plx-radius-sm);
  --radius-md: var(--plx-radius-md);
  --radius-lg: var(--plx-radius-lg);
  --radius-xl: var(--plx-radius-xl);
  --z-dropdown: var(--plx-z-dropdown);
  --z-modal: var(--plx-z-modal);
  --z-lightbox: var(--plx-z-lightbox);
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0));
    filter: blur(var(--tw-enter-blur, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0));
    filter: blur(var(--tw-exit-blur, 0));
  }
}

@keyframes tw-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .45;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heart-burst {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.35);
  }

  100% {
    transform: scale(1);
  }
}