/* Harbor Arcade 1.0. Original theme for RomM 5.4.0.
   Design advisory: UI UX Pro Max, commit 7246805992a42b7bba37d4cac83b01416f0c6c44.
   Runtime uses local fonts and assets. No remote font or script dependency. */
html:root {
  --harbor-navy-950: 15, 23, 42;
  --harbor-navy-900: 25, 33, 52;
  --harbor-navy-800: 33, 44, 64;
  --harbor-white: 248, 250, 252;
  --harbor-slate: 184, 197, 216;
  --harbor-red: 220, 38, 38;
  --harbor-red-light: 248, 113, 113;
  --harbor-green: 34, 197, 94;
  --harbor-blue: 37, 99, 235;
  --harbor-focus: 134, 239, 172;
  --harbor-surface-rgb: var(--harbor-navy-900);
  --harbor-canvas-rgb: var(--harbor-navy-950);
  --harbor-text-rgb: var(--harbor-white);
  --harbor-action-rgb: var(--harbor-red);
  --harbor-positive-rgb: var(--harbor-green);
  --harbor-focus-color: rgb(var(--harbor-focus));
  --harbor-body-font: "Segoe UI", system-ui, sans-serif;
  --harbor-display-font: "Cascadia Mono", Consolas, "Courier New", monospace;
  --harbor-radius-panel: 6px;
  --harbor-radius-control: 3px;
  --harbor-feedback-duration: 120ms;

  --console-accent-primary: rgb(var(--harbor-red));
  --console-accent-secondary: rgb(var(--harbor-green));
  --console-accent-tertiary: rgb(var(--harbor-blue));
  --console-accent-fallback: rgb(var(--harbor-red));
  --console-text-primary: rgb(var(--harbor-white));
  --console-text-secondary: rgb(var(--harbor-slate));
  --console-text-muted: rgb(var(--harbor-slate));
  --console-text-dimmed: rgb(var(--harbor-slate));
  --console-modal-bg: rgb(var(--harbor-navy-950));
  --console-modal-header-bg: rgb(var(--harbor-navy-900));
  --console-modal-border: rgb(var(--harbor-navy-800));
  --console-modal-tile-bg: rgb(var(--harbor-navy-900));
  --console-modal-tile-selected-bg: rgb(var(--harbor-navy-800));
  --console-modal-tile-selected-border: var(--harbor-focus-color);
  --console-game-card-focus-border: var(--harbor-focus-color);
  --console-game-play-button-bg: rgb(var(--harbor-green));
  --console-game-play-button-text: rgb(var(--harbor-navy-950));
  --console-game-play-button-focus-border: var(--harbor-focus-color);
  --console-game-details-button-bg: rgb(var(--harbor-navy-800));
  --console-game-details-button-text: rgb(var(--harbor-white));
  --console-gameslist-alphabet-active-bg: rgb(var(--harbor-red));
  --console-gameslist-alphabet-active-text: rgb(var(--harbor-white));
}

:root .v-theme--dark {
  --v-theme-primary: var(--harbor-red-light);
  --v-theme-on-primary: var(--harbor-canvas-rgb);
  --v-theme-primary-lighten: var(--harbor-red-light);
  --v-theme-primary-darken: 185, 28, 28;
  --v-theme-secondary: 184, 197, 216;
  --v-theme-on-secondary: var(--harbor-canvas-rgb);
  --v-theme-accent: var(--harbor-positive-rgb);
  --v-theme-on-accent: var(--harbor-canvas-rgb);
  --v-theme-background: var(--harbor-canvas-rgb);
  --v-theme-on-background: var(--harbor-text-rgb);
  --v-theme-surface: var(--harbor-surface-rgb);
  --v-theme-on-surface: var(--harbor-text-rgb);
  --v-theme-toplayer: var(--harbor-navy-800);
}

:root .v-theme--light {
  --v-theme-primary: 185, 28, 28;
  --v-theme-on-primary: 255, 255, 255;
  --v-theme-secondary: 71, 85, 105;
  --v-theme-on-secondary: 255, 255, 255;
  --v-theme-accent: 21, 128, 61;
  --v-theme-on-accent: 255, 255, 255;
  --v-theme-background: 241, 245, 249;
  --v-theme-on-background: 15, 23, 42;
  --v-theme-surface: 255, 255, 255;
  --v-theme-on-surface: 15, 23, 42;
  --v-theme-toplayer: 226, 232, 240;
}

/* RomM 5.4's main catalog uses R* primitives in addition to Vuetify. */
html.r-v2 {
  --r-font-family-sans: var(--harbor-body-font);
  --r-font-family-display: var(--harbor-display-font);
  --r-font-family-mono: var(--harbor-display-font);
  --r-font-size-xs: 12px;
  --r-font-size-sm: 13px;
  --r-font-size-md: 15px;
  --r-font-size-lg: 16px;
  --r-line-height-normal: 1.5;
  --r-radius-card: var(--harbor-radius-panel);
  --r-radius-art: var(--harbor-radius-panel);
  --r-radius-pill: 8px;
  --r-radius-lg: 6px;
  --r-radius-xl: 10px;
  --r-color-brand-primary: rgb(var(--harbor-red-light));
  --r-color-brand-primary-hover: #FCA5A5;
  --r-color-brand-primary-pressed: #F87171;
  --r-color-brand-secondary: rgb(var(--harbor-slate));
  --r-color-brand-accent: rgb(var(--harbor-green));
  --r-color-brand-accent-hover: #86EFAC;
  --r-color-avatar-gradient: linear-gradient(135deg, #DC2626, #991B1B);
  --r-color-focus: var(--harbor-focus-color);
  --r-touch-target: 44px;
}
html.r-v2.r-v2-dark {
  --r-color-bg: rgb(var(--harbor-navy-950));
  --r-color-bg-elevated: rgb(var(--harbor-navy-900));
  --r-color-surface: rgb(var(--harbor-navy-900));
  --r-color-surface-hover: rgb(var(--harbor-navy-800));
  --r-color-fg: rgb(var(--harbor-white));
  --r-color-fg-heading: rgb(var(--harbor-white));
  --r-color-fg-secondary: rgb(var(--harbor-slate));
  --r-color-fg-muted: rgb(var(--harbor-slate));
  --r-color-fg-faint: rgb(var(--harbor-slate));
  --r-color-panel: rgb(var(--harbor-navy-900));
  --r-color-panel-border: #52627C;
  --r-color-border: #394861;
  --r-color-border-strong: #697B98;
  --r-color-tooltip-bg: rgb(var(--harbor-navy-900));
  --r-color-cover-placeholder: rgb(var(--harbor-navy-900));
  --r-color-cover-placeholder-bright: rgb(var(--harbor-navy-800));
  --r-color-toast-bg: rgb(var(--harbor-navy-900));
}
html.r-v2.r-v2-light {
  --r-color-brand-primary: #B91C1C;
  --r-color-brand-primary-hover: #991B1B;
  --r-color-brand-primary-pressed: #7F1D1D;
  --r-color-brand-secondary: #475569;
  --r-color-brand-accent: #15803D;
  --r-color-brand-accent-hover: #166534;
  --r-color-bg: #F1F5F9;
  --r-color-bg-elevated: #FFFFFF;
  --r-color-surface: #FFFFFF;
  --r-color-surface-hover: #E2E8F0;
  --r-color-fg: #0F172A;
  --r-color-fg-heading: #0F172A;
  --r-color-fg-secondary: #334155;
  --r-color-fg-muted: #475569;
  --r-color-fg-faint: #475569;
  --r-color-panel: #FFFFFF;
  --r-color-focus: #15803D;
}
html.r-v2 .r-v2-bg__layer {
  background-image: none !important;
  background-color: var(--r-color-bg);
  filter: none;
  transform: none;
}
html.r-v2 .r-v2-bg__overlay {
  background: transparent;
}

.v-application {
  font-family: var(--harbor-body-font);
  line-height: 1.5;
}
.v-application :is(h1, h2, .text-h4, .text-h5) {
  font-family: var(--harbor-display-font) !important;
  font-weight: 700;
  letter-spacing: -0.025em !important;
  overflow-wrap: anywhere;
}
.v-application .v-card {
  border-radius: var(--harbor-radius-panel);
}
.v-application .v-btn {
  border-radius: var(--harbor-radius-control);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.01em;
}
.v-application .v-btn.bg-primary {
  background-color: rgb(var(--harbor-red)) !important;
  color: #FFFFFF !important;
}
.v-application .v-btn.play-button {
  background-color: rgb(var(--harbor-green)) !important;
  color: rgb(var(--harbor-navy-950)) !important;
  box-shadow: none;
}
.harbor-source-link {
  position: fixed;
  bottom: 8px;
  left: 16px;
  z-index: 100;
  padding: 4px 8px;
  border-radius: 3px;
  color: rgb(var(--harbor-slate));
  background: rgb(var(--harbor-navy-950));
  font: 12px/1.5 var(--harbor-body-font);
  text-decoration: underline;
}
.harbor-source-link:focus-visible {
  outline: 3px solid var(--harbor-focus-color);
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .harbor-source-link { bottom: calc(var(--r-bottom-nav-h, 0px) + 8px); }
}
.v-application .v-btn:not(.v-btn--size-x-small):not(.v-btn--density-compact) {
  min-height: 44px;
}
.v-application :is(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--harbor-focus-color);
  outline-offset: 3px;
}
.v-theme--light :is(a, button, input, [tabindex]):focus-visible {
  outline-color: rgb(21, 128, 61);
}
@media (prefers-reduced-motion: reduce) {
  .v-application *, .v-application *::before, .v-application *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (forced-colors: active) {
  .v-application :is(a, button, input, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
}