@import url('https://www.pellicciotta.com/hinolugi-support.js/css/reset.css');
@import url('https://www.pellicciotta.com/hinolugi-support.js/css/colors.css');

:root {
  /* Theme variables */
  --main-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --monospace-font: monospace;
  --font-size: 1rem;
  --fixed-sidebar-bg: rgb(27, 27, 27);

  /* Font weights / sizes */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-large: 1.25rem;
  --font-size-regular: 1rem;
  --font-size-small: 0.98rem;
  --font-size-x-small: 0.95rem;

  /* Layout */
  --app-header-height: 3.5rem;
  --score-badge-padding-vertical: 0.375rem;
  --score-badge-padding-horizontal: 0.625rem;
  --control-gap: 0.5rem;
  --header-toggle-size: 2.75rem;
  --sidebar-expanded-width: 18rem;
  --sidebar-collapsed-width: 3rem;
  --icons-col-width: 4.5rem;

  /* Common spacing tokens used through the stylesheet */
  --spacing: 1rem;
  --spacing-sm: 0.5rem;
  --spacing-xs: 0.25rem;

  /* Ranking colors */
  --rank-gold: #ffd700;
  --rank-contrast-dark: #000000;
  /* Add missing ranking color variables so silver/bronze/last styles work */
  --rank-silver: #c0c0c0;
  --rank-bronze: #cd7f32;
  --rank-last: #6b6b6b;
  /* Per-rank text color variables (can be overridden per theme) */
  --rank-gold-text: var(--rank-contrast-dark);
  --rank-silver-text: var(--rank-contrast-dark);
  --rank-bronze-text: var(--btn-contrast);
  --rank-last-text: var(--btn-contrast);
  /* Classic scoreboard column sizing (min / max) */
  --classic-player-min-width: 12rem;
  --classic-player-max-width: 15rem;
}

[data-theme="dark"] {
  --page-bg: rgb(17, 17, 17);
  --page-color: rgb(238, 238, 238);
  /* Sidebar/header background for dark theme */
  --fixed-sidebar-bg: rgb(27, 27, 27);
  --blue: rgb(37, 99, 235);
  --btn-contrast: #ffffff;
  --muted-bg: rgba(255, 255, 255, 0.02);
  --muted-hover: rgba(255, 255, 255, 0.03);
  --muted-border: rgba(255, 255, 255, 0.06);
  --shadow: rgba(0, 0, 0, 0.08);
  --config-editor-bg: rgba(0, 0, 0, 0.35);
  --btn-hover: var(--blue);
  --btn-active: #ffd700;
  /* gold */
  --btn-hover-bg: rgba(37, 99, 235, 0.04);
  --btn-active-bg: rgba(255, 215, 0, 0.08);
  /* Rank badge text colors for dark theme */
  --rank-gold-text: var(--rank-contrast-dark);
  --rank-silver-text: var(--rank-contrast-dark);
  --rank-bronze-text: var(--btn-contrast);
  --rank-last-text: var(--btn-contrast);
}

[data-theme="light"] {
  --page-bg: rgb(255, 255, 255);
  --page-color: rgb(20, 20, 20);
  --blue: rgb(37, 99, 235);
  --btn-contrast: #ffffff;
  --muted-bg: rgba(0, 0, 0, 0.02);
  --muted-hover: rgba(0, 0, 0, 0.03);
  --muted-border: rgba(0, 0, 0, 0.06);
  --shadow: rgba(0, 0, 0, 0.08);
  --config-editor-bg: rgba(0, 0, 0, 0.05);
  --btn-hover: var(--blue);
  --btn-active: #ddb700;
  /* gold */
  --btn-hover-bg: rgba(37, 99, 235, 0.04);
  --btn-active-bg: rgba(255, 215, 0, 0.08);
  /* Make header/sidebar light in the light theme so labels remain readable */
  --fixed-sidebar-bg: rgb(250, 250, 250);
  /* Rank badge text colors for light theme */
  --rank-gold-text: var(--rank-contrast-dark);
  --rank-silver-text: var(--rank-contrast-dark);
  --rank-bronze-text: var(--rank-contrast-dark);
  --rank-last-text: var(--rank-contrast-dark);
}

/* Base */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--page-bg);
  color: var(--page-color);
  font-family: var(--main-font);
  font-size: var(--font-size);
  color-scheme: dark light;
}

/* Counter-input defaults (themeable via --counter-* variables) */
counter-input {
  --counter-border-color: var(--muted-border);
  --counter-border-radius: 0.375rem;
  --counter-bg: transparent;
  --counter-padding: 0.125rem;
  --counter-width: fit-content;
  --counter-font-family: var(--main-font);

  --counter-btn-font-size: 0.95rem;
  --counter-btn-bg: var(--blue);
  --counter-btn-color: var(--btn-contrast);
  --counter-btn-radius: 0.25rem;
  --counter-btn-size: 2rem;
  --counter-btn-disabled-opacity: 0.5;

  --counter-value-font-family: var(--monospace-font);
  --counter-value-width: 3ch;
  --counter-value-color: var(--page-color);
  --counter-value-weight: 700;
}

/* Header */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--app-header-height);
  background: var(--fixed-sidebar-bg);
  border-bottom: 1px solid var(--muted-border);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing);
  z-index: 110;
  transition: background-color .18s ease, border-color .18s ease;
}

/* App toolbar (contextual) — now rendered inside the header */
.app-toolbar {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-sm);
  z-index: 96;
  background: transparent;
  border-bottom: none;
}

/* Style toolbar buttons to match general action buttons (compact) */
.app-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--muted-bg);
  color: var(--page-color);
  border: 1px solid var(--muted-border);
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
}

.app-toolbar button .label {
  display: inline-block;
  font-size: 0.95rem;
}

.app-toolbar button:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover);
}

/* Ensure mounted views fill the content area; config editor needs full height */
#mounted-view,
#mounted-view .view-content {
  min-height: calc(100vh - var(--app-header-height) - var(--spacing-sm) - var(--spacing));
  padding: var(--spacing);
}

/* When a view's toolbar is moved into the header, ensure content doesn't sit under it */
#mounted-view .view-content {
  padding-top: var(--spacing-sm);
}

/* Mounted view layout: make view fill available content and allow flexible children */
#mounted-view {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  height: calc(100vh - var(--app-header-height) - var(--spacing));
}

#mounted-view>.view-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  overflow: auto;
}

/* Configuration editor textarea should expand to fill the view-content area */
#config-textarea {
  width: 100%;
  flex: 1 1 auto;
  min-height: 40vh;
  resize: vertical;
  font-family: var(--monospace-font);
  background: var(--config-editor-bg);
  color: var(--page-color);
  border: 1px solid var(--muted-border);
  padding: 0.75rem;
  border-radius: 6px;
  box-sizing: border-box;
}

.config-buttons {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  margin-top: var(--spacing-sm);
}

.config-buttons button {
  padding: 0.5rem 0.75rem;
}

/* Style for New Game form: highlight the game name input with a blue border */
#game-name {
  border: 2px solid var(--blue);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: transparent;
  color: var(--page-color);
  outline: none;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.0);
}

#game-name:focus {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
}

.game-type-label {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.25rem;
  color: var(--page-color);
}

.app-header .app-title {
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  margin: 0 auto;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* App content */
.app-content {
  max-width: 880px;
  min-height: 100vh;
  margin: 0 auto;
  background: transparent;
  padding: calc(var(--app-header-height) + var(--spacing)) var(--spacing) var(--spacing) calc(var(--sidebar-collapsed-width) + var(--spacing));
  border-radius: 8px;
  font-size: var(--font-size);
  position: relative;
  overflow: auto;
  /* Creates a stacking context so position: sticky can be used by descendants */
}

/* When sidebar is expanded, it overlays the main content instead of
   shifting it — no margin-left adjustment. (Handled via absolute/fixed layout.) */

/* Scoreboard list (generic) */
.scoreboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scoreboard-header h1 {
  font-size: 2rem;
  margin: 0
}

.scoreboard-list {
  list-style: none;
  padding: 0
}

.score-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 15rem;
  max-width: 50rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  margin-bottom: 0.5rem;
  background: var(--muted-bg);
}

.score-meta {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0
}

.score-item .score-name {
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 2em;
}

.score-item .score-value {
  font-family: var(--monospace-font);
  margin-left: auto;
  min-width: 3ch;
  text-align: right;
  display: inline-block;
  padding: var(--score-badge-padding-vertical) var(--score-badge-padding-horizontal);
  border-radius: 0.375rem;
  font-weight: var(--font-weight-bold);
  box-shadow: 0 0.125rem 0.375rem var(--shadow);
}

/* Controls */
.score-controls {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
  margin-right: 0.5rem
}

.score-controls button {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--btn-contrast);
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  min-width: 0;
  margin: 0
}

.score-controls button i {
  font-size: var(--font-size-regular);
  line-height: 1
}

.score-controls button:hover {
  filter: brightness(0.95)
}

/* Toggles */
.header-toggle,
.sidebar-toggle {
  width: var(--header-toggle-size);
  height: var(--header-toggle-size);
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--blue);
  font-size: var(--font-size-large);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  border-radius: 0.375rem
}

.header-toggle {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 90
}

.sidebar-toggle {
  flex-shrink: 0;
  z-index: 96
}

.header-toggle:focus,
.sidebar-toggle:focus {
  outline: none
}

.header-toggle i,
.sidebar-toggle i {
  font-size: var(--font-size-large);
  line-height: 1;
  transition: transform .12s ease
}

.header-toggle:hover,
.sidebar-toggle:hover {
  color: var(--blue)
}

/* Sidebar */
.app-sidebar {
  position: fixed;
  top: var(--app-header-height);
  left: 0;
  /* limit sidebar height to viewport minus header so it doesn't overflow */
  height: calc(100vh - var(--app-header-height));
  overflow-y: auto;
  width: var(--sidebar-collapsed-width);
  max-width: 85vw;
  background: var(--fixed-sidebar-bg);
  border-right: 1px solid var(--muted-border);
  z-index: 80;
  display: flex;
  transition: background-color .18s ease, border-color .18s ease;
}

.app-sidebar .sidebar-content,
.app-sidebar.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: stretch;
  padding: 1rem;
  background: var(--fixed-sidebar-bg);
  transform: translateX(-100%);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  justify-content: space-between;
}

/* Visual divider used to group related sidebar actions */
.sidebar-sep {
  height: 1px;
  margin: 0.5rem 0;
  background: linear-gradient(90deg, transparent, var(--muted-border), transparent);
}

.app-sidebar.collapsed .sidebar-content,
.app-sidebar.collapsed.sidebar-content {
  transform: translateX(-100%);
  visibility: hidden;
  pointer-events: none
}

.app-sidebar.expanded {
  /* Let the expanded sidebar size to its content (widest button),
     but keep a sane maximum. Mobile rules override this. */
  width: auto;
  min-width: max-content;
  max-width: 22rem;
}

.app-sidebar.expanded .sidebar-content,
.app-sidebar.expanded.sidebar-content {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto
}

.app-sidebar .sidebar-content button,
.app-sidebar.sidebar-content>button,
.app-sidebar.sidebar-actions>button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-start;
  width: 100%
}

.app-sidebar .sidebar-content button i,
.app-sidebar.sidebar-content>button i,
.app-sidebar.sidebar-actions>button i {
  width: 1.25rem;
  text-align: center
}

.app-sidebar .sidebar-content .label,
.app-sidebar.sidebar-content>.label,
.app-sidebar.sidebar-actions>.label {
  flex: 1 1 auto;
  text-align: left;
  font-size: var(--font-size-small);
  padding-left: 0.25rem;
  color: var(--page-color);
  font-weight: var(--font-weight-normal)
}

/* Ensure sidebar button labels follow hover/active color variables
   (higher specificity than the standalone .label rule) */
.app-sidebar .sidebar-content button:hover .label,
.app-sidebar .sidebar-content button:focus .label {
  color: var(--btn-hover);
}

.app-sidebar .sidebar-content button:active .label {
  color: var(--btn-active);
}

/* Header action buttons */
.header-actions button {
  display: inline-grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--muted-border)
}

/* Notifier / toast UI */
#notifier {
  position: fixed;
  top: calc(var(--app-header-height) + 0.75rem);
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 300;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 16rem;
  max-width: 28rem;
  background: var(--muted-bg);
  color: var(--page-color);
  border: 1px solid var(--muted-border);
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.toast .message {
  flex: 1 1 auto;
}

.toast .actions {
  display: flex;
  gap: 0.4rem;
  align-items: center
}

.toast .dismiss {
  background: transparent;
  border: none;
  color: var(--page-color);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.35rem
}

.toast.info {
  border-left: 4px solid var(--blue);
}

.toast.success {
  border-left: 4px solid green;
}

.toast.error {
  border-left: 4px solid #d9534f;
  background: rgba(217, 83, 79, 0.04);
}

.toast.progress {
  border-left: 4px solid var(--blue);
}

.toast .spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-top-color: var(--blue);
  animation: spin 1s linear infinite;
}

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

.header-actions button i {
  font-size: var(--font-size-regular);
  line-height: 1
}

.header-actions button:hover {
  background: var(--muted-hover);
  color: var(--blue)
}

.header-actions button:active {
  transform: translateY(1px)
}

/* Ranking colours */
.score-item.rank-gold .score-value {
  background: var(--rank-gold);
  color: var(--rank-gold-text)
}

.score-item.rank-silver .score-value {
  background: var(--rank-silver);
  color: var(--rank-silver-text)
}

.score-item.rank-bronze .score-value {
  background: var(--rank-bronze);
  color: var(--rank-bronze-text)
}

.score-item.rank-last .score-value {
  background: var(--rank-last);
  color: var(--rank-last-text)
}

.score-item.rank-gold {
  border: 1px solid var(--rank-gold)
}

.score-item.rank-silver {
  border: 1px solid var(--rank-silver)
}

.score-item.rank-bronze {
  border: 1px solid var(--rank-bronze)
}

.score-item.rank-last {
  border: 1px solid var(--rank-last)
}

/* Make the small increase/decrease controls match the player's rank
   in the generic scoreboard list (rank-gold/rank-silver/rank-bronze). */
.score-item.rank-gold .score-controls button {
  background: var(--rank-gold);
  border-color: var(--rank-gold);
  color: var(--rank-gold-text);
}

.score-item.rank-gold .score-controls button:hover {
  background: color-mix(in srgb, var(--rank-gold) 85%, black 15%);
  border-color: color-mix(in srgb, var(--rank-gold) 85%, black 15%);
  filter: none;
}

.score-item.rank-gold .score-controls button:active {
  background: color-mix(in srgb, var(--rank-gold) 75%, black 25%);
  border-color: color-mix(in srgb, var(--rank-gold) 75%, black 25%);
  transform: translateY(1px);
}

.score-item.rank-silver .score-controls button {
  background: var(--rank-silver);
  border-color: var(--rank-silver);
  color: var(--rank-silver-text);
}

.score-item.rank-silver .score-controls button:hover {
  background: color-mix(in srgb, var(--rank-silver) 85%, black 15%);
  border-color: color-mix(in srgb, var(--rank-silver) 85%, black 15%);
  filter: none;
}

.score-item.rank-silver .score-controls button:active {
  background: color-mix(in srgb, var(--rank-silver) 75%, black 25%);
  border-color: color-mix(in srgb, var(--rank-silver) 75%, black 25%);
  transform: translateY(1px);
}

.score-item.rank-bronze .score-controls button {
  background: var(--rank-bronze);
  border-color: var(--rank-bronze);
  color: var(--rank-bronze-text);
}

.score-item.rank-bronze .score-controls button:hover {
  background: color-mix(in srgb, var(--rank-bronze) 85%, black 15%);
  border-color: color-mix(in srgb, var(--rank-bronze) 85%, black 15%);
  filter: none;
}

.score-item.rank-bronze .score-controls button:active {
  background: color-mix(in srgb, var(--rank-bronze) 75%, black 25%);
  border-color: color-mix(in srgb, var(--rank-bronze) 75%, black 25%);
  transform: translateY(1px);
}

.score-item.rank-last .score-controls button {
  background: var(--rank-last);
  border-color: var(--rank-last);
  color: var(--rank-last-text);
}

.score-item.rank-last .score-controls button:hover {
  background: color-mix(in srgb, var(--rank-last) 85%, black 15%);
  border-color: color-mix(in srgb, var(--rank-last) 85%, black 15%);
  filter: none;
}

.score-item.rank-last .score-controls button:active {
  background: color-mix(in srgb, var(--rank-last) 75%, black 25%);
  border-color: color-mix(in srgb, var(--rank-last) 75%, black 25%);
  transform: translateY(1px);
}

/* Generic buttons */
.app-content button,
.app-sidebar button {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  background: transparent;
  border: 1px solid var(--muted-border);
  color: var(--page-color)
}

.app-content button:hover,
.app-sidebar button:hover {
  color: var(--btn-hover);
  border-color: var(--btn-hover);
  background: var(--btn-hover-bg)
}

.app-content button:active,
.app-sidebar button:active {
  color: var(--btn-active);
  border-color: var(--btn-active);
  background: var(--btn-active-bg)
}

.app-content button[disabled],
.app-sidebar button[disabled] {
  opacity: .5;
  cursor: default
}

/* Small icon-only overrides */
.sidebar-toggle,
.score-controls button {
  border: none !important
}

.sidebar-toggle:hover,
.score-controls button:hover {
  border: none !important
}

.sidebar-toggle:active,
.score-controls button:active {
  border: none !important
}

button.sidebar-toggle {
  padding: 0.25rem !important
}

.app-content .score-controls button {
  min-width: 0;
  padding: 0;
  width: 2rem;
  height: 2rem;
  background: var(--blue);
  color: var(--btn-contrast)
}

.app-content .score-controls button:hover {
  background: var(--blue);
  filter: brightness(0.9)
}

.app-content .score-controls button:active {
  filter: brightness(0.8)
}

/* Config editor */
.config-editor:not([hidden]) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--sidebar-bg);
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 1rem
}

.config-editor textarea {
  width: 100%;
  flex-grow: 1;
  min-height: 0;
  font-family: var(--monospace-font);
  font-size: var(--font-size-x-small);
  padding: 0.5rem;
  border: 1px solid var(--muted-border);
  border-radius: 0.375rem;
  background: var(--config-editor-bg);
  color: var(--page-color);
}

.config-buttons {
  /* consolidated earlier */
}

/* Responsive */
@media (max-width: 768px) {
  .app-header {
    top: auto;
    bottom: 0;
    border-bottom: none;
    border-top: 1px solid var(--muted-border);
    flex-direction: row-reverse
  }

  /* Rely on flex-direction (row-reverse) to place the toolbar left of the title.
     Keep toolbar and toggle in the normal flow (no absolute positioning). */
  .app-toolbar {
    position: static;
    right: auto;
    top: auto;
    height: auto;
    padding: 0 .5rem;
    z-index: 100;
    background: transparent;
    display: flex;
    align-items: center;
  }

  /* Put the sidebar toggle into the normal flow so row-reverse ordering
     places it at the far right automatically. Remove absolute positioning. */
  .app-header .sidebar-toggle {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    z-index: 120;
    color: var(--page-color);
  }

  .app-content {
    padding: 1rem 1rem calc(var(--app-header-height) + 1rem) 1rem;
    border-radius: 0
  }

  .app-sidebar {
    max-width: 100vw;
    width: 100vw;
    height: auto;
    min-height: 0;
    top: unset;
    bottom: var(--app-header-height);
    left: 0;
    right: 0;
    border-right: none;
    border-top: 1px solid var(--muted-border);
    z-index: 99;
    transition: height .22s cubic-bezier(.2, .8, .2, 1);
  }

  .app-sidebar.expanded {
    height: auto;
    max-width: 100vw;
    width: 100vw;
  }

  /* Limit expanded sidebar height to viewport minus header and allow vertical scrolling
     so bottom actions remain accessible on small screens. */
  .app-sidebar.expanded {
    max-height: calc(100vh - var(--app-header-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* When expanded on mobile, bring the sidebar above the footer/header
     so bottom actions are not hidden. The hamburger toggle keeps a
     higher z-index so it's still visible. */
  .app-sidebar.expanded {
    z-index: 115;
  }

  /* When collapsed on mobile, keep the sidebar visually compact (only header-height tall)
     so it doesn't obscure most of the viewport while still allowing the hamburger toggle. */
  .app-sidebar.collapsed {
    height: var(--app-header-height) !important;
    min-height: 0 !important;
    top: unset !important;
    bottom: var(--app-header-height) !important;
    overflow: hidden !important;
    /* clip the hidden sidebar content */
  }

  /* Ensure collapsed sidebar content is hidden and non-interactive on mobile.
     Also handle the case where the sidebar action classes live on the <aside>
     itself (e.g. `.app-sidebar.sidebar-content`). */
  .app-sidebar.collapsed .sidebar-content,
  .app-sidebar.collapsed.sidebar-content,
  .app-sidebar.collapsed.sidebar-actions {
    transform: translateY(100%);
    pointer-events: none;
  }

  .app-sidebar .sidebar-content,
  .app-sidebar.sidebar-content,
  .app-sidebar.sidebar-actions {
    transform: translateY(100%);
    padding-top: 1rem;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
  }

  .app-sidebar.expanded .sidebar-content,
  .app-sidebar.expanded.sidebar-content,
  .app-sidebar.expanded.sidebar-actions {
    transform: translateY(0);
    pointer-events: auto;
    /* ensure the content area itself can scroll if it's taller than the allowed max-height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-sidebar.collapsed .sidebar-content,
  .app-sidebar.collapsed.sidebar-content,
  .app-sidebar.collapsed.sidebar-actions {
    transform: translateY(100%);
  }
}

/* New game UI */
.new-game-section:not([hidden]) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--sidebar-bg);
  z-index: 100;
  display: flex;
  gap: 1rem;
  flex-direction: column;
  padding: 1rem
}

.new-game-section h2 {
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: var(--font-weight-bold)
}

.game-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem
}

.game-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer
}

.game-settings {
  flex-grow: 1
}

.game-settings .setting {
  display: flex;
  flex-direction: column;
  gap: 0.5rem
}

.game-settings .setting[hidden] {
  display: none
}

.game-settings label {
  font-weight: var(--font-weight-semibold)
}

.game-settings input,
.game-settings counter-input {
  padding: 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--muted-border);
  background: var(--config-editor-bg);
  color: var(--page-color);
  font-family: var(--main-font)
}

.new-game-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem
}

.new-game-buttons button {
  padding: 0.5rem 0.75rem
}

/* Finished games table / panel */
#finished-games-section {
  border: 1px solid var(--muted-border);
  background: var(--config-editor-bg);
  padding: 0.75rem;
  border-radius: 8px;
}

.finished-games-panel {
  border-radius: 6px;
  padding: 0.5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), transparent);
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.finished-games-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.25rem;
}

.finished-games-table th,
.finished-games-table td {
  border-bottom: 1px solid var(--muted-border);
  padding: 0.5rem 0.5rem;
  text-align: left;
  font-size: var(--font-size-small);
}

.finished-games-table th {
  color: var(--page-color);
  opacity: 0.9;
}

.finished-games-table th,
.finished-games-table td {
  border-bottom: 1px solid var(--muted-border);
  padding: 0.5rem 0.5rem;
  text-align: left;
  font-size: var(--font-size-small);
}

.finished-games-table th {
  color: var(--page-color);
  opacity: 1;
  background: rgba(255, 255, 255, 0.02);
  font-weight: 700;
}

.finished-games-table tr td button.view-finished-btn {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

/* Toolbar for finished-games section */
.finished-games-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.finished-games-toolbar h2 {
  margin: 0;
  font-size: 1.1rem;
}

.finished-games-toolbar-right button {
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
}

/* Seven Wonders boards (common) */
#seven-wonders-duel-scoreboard:not([hidden]),
#seven-wonders-classic-scoreboard:not([hidden]) {
  display: flex;
  flex-direction: row;
  gap: 0.25rem 5rem;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Column-oriented layout for the Seven Wonders boards */
.columns:not([hidden]) {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: flex-start;
}

.columns {
  position: relative;
}

.columns .col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: stretch;
  min-width: 0;
  /* allow flex children to shrink and avoid overflow */
}

.columns .col.icons {
  align-items: center;
}

.columns .col.player {
  min-width: 8rem;
  max-width: 18rem;
}

.columns .col.player [data-type="name"] {
  font-weight: var(--font-weight-bold);
  font-size: calc(var(--font-size-regular) * 1.25);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.columns .col.player [data-type="sum"] {
  text-align: center;
  font-weight: var(--font-weight-semibold);
  font-size: calc(var(--font-size-regular) * 1.25);
  border-bottom: 1px solid var(--muted-border);
  padding-bottom: 0;
  /* remove bottom padding to align with sub-totals */
  margin-bottom: 0;
  /* remove extra bottom gap to align rows precisely */
}

/* Name icons: hide by default, size to match text height and show via column state */
/* Name icons: hide by default, size to match text height and show via column state
      Images are siblings of the name span, so use the general-sibling selector (~). */
.columns .col.player [data-type="name"]~img {
  display: none;
  height: 1em;
  /* same height as the surrounding text */
  width: auto;
  vertical-align: middle;
  margin-left: 0.4rem;
}

/* Show the military icon when the player column indicates a military victory */
.columns .col.player.military-victory [data-type="name"]~img.military-icon,
.columns .col.player.military-victory [data-type="name"]~img[data-role="military"] {
  display: inline-block;
}

/* Show the scientific icon when the player column indicates a scientific victory */
.columns .col.player.scientific-victory [data-type="name"]~img.scientific-icon,
.columns .col.player.scientific-victory [data-type="name"]~img[data-role="science"] {
  display: inline-block;
}

/* Fallbacks when images don't carry classes: assume first img = science, last img = military */
.columns .col.player.scientific-victory [data-type="name"]~img:first-of-type {
  display: inline-block;
}

.columns .col.player.military-victory [data-type="name"]~img:last-of-type {
  display: inline-block;
}

/* Style victory buttons based on the column state so visual state follows the same class */
.columns .col.player.military-victory .input-with-toggle button.duel-victory-toggle[data-victory="military"],
.columns .col.player.scientific-victory .input-with-toggle button.duel-victory-toggle[data-victory="science"] {
  background: var(--btn-active-bg);
  border-radius: 0.25rem;
}

/* Dim the non-matching victory button when one victory is active */
.columns .col.player.military-victory .input-with-toggle button.duel-victory-toggle[data-victory="science"],
.columns .col.player.scientific-victory .input-with-toggle button.duel-victory-toggle[data-victory="military"] {
  opacity: 0.45;
}

.columns .col.player counter-input {
  align-self: center;
}

/* Ensure highest-score styling applies to new column markup */
#seven-wonders-duel-scoreboard .highest-score,
#seven-wonders-classic-scoreboard .highest-score {
  color: var(--rank-gold);
}

/* Align icon cells and player cells: keep consistent row heights */
.columns .col.icons>*,
.columns .col.player>* {
  min-height: 2rem;
  min-width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.columns .col.icons {
  position: sticky;
  left: -4rem;
  z-index: 30;
  /* sit above scrolling player columns */
  background: inherit;
  width: var(--icons-col-width);
  flex: 0 0 var(--icons-col-width);
}

/* Mask anchored to the app content left boundary so nothing is visible
   to the left of the content area. This sits below icons (z-index 30)
   and above player columns, effectively clipping them at the app-content
   left edge (accounts for sidebar padding). */
.app-content {
  position: relative;
  /* ensure pseudo is positioned to content box */
}

/* Default view toolbar styling (make toolbar items look like buttons) */
.default-view .view-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.default-view .view-toolbar button {
  padding: 0.35rem 0.6rem;
  border-radius: 0.375rem;
  border: 1px solid var(--muted-border);
  background: transparent;
  color: var(--page-color);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.default-view .view-toolbar button:hover {
  background: var(--muted-hover);
}

/* Visual separation for the tip/note inside the welcome view */
.welcome .note {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--muted-border);
  color: var(--page-color);
  opacity: 0.95;
}

/* Distinct action vs. normal button styles for view toolbars
   `.action` is the primary/attention action, `.button` is neutral. */
.action {
  /* Match the generic sidebar/app button appearance so `.action` looks the same
     whether used inline in text or applied to sidebar buttons. Layout-specific
     rules for sidebar buttons (width, icon sizing) are handled by the
     `.app-sidebar .sidebar-content button` selector. */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  background: transparent;
  border: 1px solid var(--muted-border);
  color: var(--page-color);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.action:hover {
  color: var(--btn-hover);
  border-color: var(--btn-hover);
  background: var(--btn-hover-bg);
}

.action:active {
  color: var(--btn-active);
  border-color: var(--btn-active);
  background: var(--btn-active-bg);
  transform: translateY(1px);
}

p .action {
  margin: 0.25em 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.33rem 0.6rem;
  border-radius: 0.375rem;
  border: 1px solid var(--muted-border);
  background: transparent;
  color: var(--page-color);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.button:hover {
  background: var(--muted-hover);
  border-color: var(--btn-hover);
  color: var(--btn-hover);
}

.button:active {
  transform: translateY(1px);
}

.default-view .sidebar-toggle,
.default-view .sidebar-toggle:hover,
.default-view .sidebar-toggle:active {
  pointer-events: none;
}

.default-view .button,
.default-view .button:hover,
.default-view .button:active {
  background: var(--blue);
  line-height: 1.25em;
  padding: 0.75rem;
  height: 1.25em;
  width: 1.25em;
  font-size: 75%;
  pointer-events: none;
}

.default-view .action,
.default-view .action:hover,
.default-view .action:active {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--fixed-sidebar-bg);
  padding: 0.05rem 0.75rem;
  pointer-events: none;
  font-size: 75%;
}

.default-view {}

#mounted-view .default-view .view-content {
  padding-bottom: calc(var(--app-header-height) + var(--app-header-height));
}

.default-view h2 {
  font-size: 200%;
  padding-bottom: 1em;
}

.default-view p {
  line-height: 2em;
}

.default-view .note {
  padding-top: 2em;
  font-size: small;
  color: var(--page-color);
}

/* Make icons smaller and centered so they visually align with counters */
.columns .col.icons img {
  max-height: 1.6rem;
  width: auto;
}

/* Prevent flicker when unrelated DOM updates occur (e.g. counter button presses).
   Promote icons and toggle images to their own compositor layer so the browser
   doesn't repaint them on every document reflow. */
.columns .col.icons img,
.columns.duel-columns .input-with-toggle>button.duel-victory-toggle img,
.duel-victory-badge img {
  will-change: transform, opacity;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Ensure counter-inputs align consistently inside player columns (single definition above) */

.duel-victory-badge {
  display: inline-block;
  margin-left: 0.5rem;
}

.input-with-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.duel-victory-toggle {
  background: transparent;
  border: none;
  padding: 0.125rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.duel-victory-toggle img {
  width: 1.6rem;
  height: auto;
  display: block;
}

.duel-victory-toggle:hover {
  opacity: 0.9;
}

.duel-victory-toggle:focus {
  outline: 2px solid rgba(255, 255, 255, 0.08);
}

.duel-victory-toggle.active img {
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

.duel-victory-badge img,
img.duel-victory-badge,
img.duel-victory-icon,
img.duel-scientific-victory-icon {
  /* Match the surrounding text height so victory badges align with player names */
  height: 1em !important;
  max-height: 1em !important;
  width: auto !important;
  object-fit: contain;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Ensure duel toggle rows match the counter button height to avoid
   inconsistent row sizes. Also remove any focus outline/shadow applied
   globally so toggles remain visually flat. */

.columns.duel-columns .input-with-toggle>button.duel-victory-toggle {
  /* let the button size to its content; limit image below to avoid enlarging rows */
  height: auto;
  min-height: 0;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.columns.duel-columns .input-with-toggle>.duel-toggle-placeholder,
.columns.duel-columns .input-with-toggle>counter-input {
  /* ensure counters keep expected height while allowing toggles to remain compact */
  min-height: var(--counter-btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.columns.duel-columns .input-with-toggle>button.duel-victory-toggle img {
  /* cap icon size to the original visual size to avoid inflating the row */
  height: 1.6rem;
  max-height: var(--counter-btn-size);
  width: auto;
  display: block;
  vertical-align: middle;
}

/* Remove focus rings for duel toggles (visual design requires flat buttons).
   Keep :focus-visible hack minimal for accessibility if needed later. */
.columns.duel-columns .input-with-toggle>button.duel-victory-toggle:focus,
.columns.duel-columns .input-with-toggle>button.duel-victory-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Duel grid / alignment: layout the entire Duel scoreboard as a single grid so
   the icons column and player columns align perfectly by row. The icons column
   remains a regular grid cell (so sticky positioning still works); player
   columns use `display: contents` so their children participate in the
   parent grid and line up across columns. */
/* Duel scoreboard grid: ensure player columns never shrink below a readable minimum
   Use minmax() so the grid tracks have a sensible lower bound while remaining flexible. */
#seven-wonders-duel-scoreboard.columns.duel-columns {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: var(--icons-col-width) minmax(12rem, 15rem) minmax(12rem, 15rem);
  grid-template-rows: auto auto repeat(8, auto);
  /* name, sum, blue, green, yellow, purple, wonders, green-coins, money, military */
  gap: 0.375rem;
  align-items: center;
  align-content: start;
}

/* The icons and player containers are just that: containers. They should not participate in the grid themselves. */
.columns.duel-columns>.col.icons,
.columns.duel-columns>.col.player {
  display: contents;
}

/* Center common elements inside their grid cells */
.columns.duel-columns>.col.icons>*,
.columns.duel-columns>.col.player>* {
  justify-self: center;
  align-self: center;
}

/* Ensure the icons column images match the control height */
.columns.duel-columns>.col.icons img {
  width: 1.6rem;
  height: auto;
  display: block;
}

/* Classic grid / alignment: layout the Classic scoreboard as a single grid
   similar to Duel but supporting more player columns. Use repeat() so the
   number of player columns matches the HTML template (6 players). */
#seven-wonders-classic-scoreboard.columns.classic-columns {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: var(--icons-col-width);
  grid-auto-columns: minmax(var(--classic-player-min-width, 12rem), var(--classic-player-max-width, 15rem));
  grid-template-rows: auto auto repeat(7, auto);
  /* name, sum, then category rows */
  gap: 0.375rem;
  align-items: center;
  align-content: start;
}

/* The icons and player containers for Classic should not participate in the grid themselves. */
.columns.classic-columns>.col.icons,
.columns.classic-columns>.col.player {
  display: contents;
}

.columns.classic-columns>.col.icons>* {
  position: sticky;
  left: 0;
  z-index: 30;
  /* Sit above scrolling player columns */
  ;
}

/* Center common elements inside their grid cells (classic) */
.columns.classic-columns>.col.icons>*,
.columns.classic-columns>.col.player>* {
  justify-self: center;
  align-self: center;
}

/* Ensure the icons column images match the control height (classic) */
.columns.classic-columns>.col.icons img {
  width: 1.6rem;
  height: auto;
  display: block;
}

/* Make counter-inputs use consistent inline layout and centering */
counter-input {
  display: inline-flex;
  align-items: center;
}

/* Size the victory toggle to match counter button size */
.duel-victory-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* gap for .input-with-toggle consolidated above */

/* Placeholder used to align counter-inputs with duel toggle buttons */
.duel-toggle-placeholder {
  display: inline-flex;
  padding: 0;
  pointer-events: none;
}

/* Ensure total/sum aligns vertically with counters */
.columns.duel-columns [data-type="sum"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--counter-btn-size);
  padding: 0 0.25rem;
  font-size: calc(var(--font-size-regular) * 1.25);
}

/* Make the input-with-toggle a 3-cell grid so left placeholder and right
   toggle button take equal flexible space and the counter sits centered. */
.columns.duel-columns .input-with-toggle {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 0.5rem;
  width: 100%;
}

/* Place individual children into grid cells and align their content */
.columns.duel-columns .input-with-toggle>.duel-toggle-placeholder {
  grid-column: 1;
  justify-self: end;
  /* move placeholder content to the right edge */
}

.columns.duel-columns .input-with-toggle>counter-input {
  grid-column: 2;
  justify-self: center;
}

.columns.duel-columns .input-with-toggle>button.duel-victory-toggle {
  grid-column: 3;
  justify-self: start;
  /* align the button to the left of its cell */
}

/* Force toggle buttons to remain visually flat: no background, no border, no shadow. */
.columns.duel-columns .input-with-toggle>button.duel-victory-toggle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Small screens: reduce icon sizes slightly to preserve layout */
@media (max-width: 520px) {
  .duel-victory-toggle img {
    width: 1.4rem;
  }

  .columns.duel-columns>.col.icons img {
    width: 1.4rem;
  }

  .duel-victory-badge img,
  img.duel-victory-badge,
  img.duel-victory-icon,
  img.duel-scientific-victory-icon {
    max-height: 0.95em !important;
    width: auto !important;
  }
}