/* Bubna.ru — Quiet classic. The reusable tokens belong to this presentation layer. */
:root {
  --classic-paper: #f3f1e9;
  --classic-surface: #fcfaf5;
  --classic-soft: #f2f5f1;
  --classic-ink: #203a30;
  --classic-text: #33473f;
  --classic-muted: #5e6c64;
  --classic-line: #dce4dd;
  --classic-green: #195e49;
  --classic-green-hover: #124c3b;
  --classic-green-active: #0e3b2e;
  --classic-charcoal: #272b28;
  --classic-table: #0f5a43;
  --classic-bar: #183e31;
  --classic-error: #8b292f;
  --classic-display: Georgia, 'Times New Roman', serif;
  --classic-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --classic-radius: 24px;
  --classic-control-radius: 11px;
  --classic-shadow: 0 16px 48px #082e2826;
  color-scheme: light;
  background: var(--classic-paper);
}
:root body {
  font-family: var(--classic-ui);
}
:root body.portal-page {
  color: var(--classic-text);
  background: var(--classic-paper);
}
:root body:is(.game-page, .native-game-page),
:root:fullscreen,
:root .expansion-shell:fullscreen {
  background: var(--classic-table);
}
:root .game-page #info-block {
  background: var(--classic-bar);
}
:root :is(.game-page, .native-game-page) :is(button, input, select) {
  font-family: var(--classic-ui);
}
:root .portal-page a:not(.button),
:root
  :is(.account-panel, .bubna-auth-page, .portal-dialog, .bubna-auth-dialog)
  a:not(.button):not(.pseudo_btn) {
  color: var(--classic-green);
}
:root .skip-link:focus {
  color: var(--classic-ink);
  background: var(--classic-surface);
  border-radius: 0 0 11px 11px;
}

/* Reuse the admitted shared hover/active/disabled/focus mechanics. Low-specificity
   variables let the approved victory dialog and explicit variants keep their roles. */
:root
  :where(
    .bubna-button,
    .button,
    .pseudo_btn,
    .game-button,
    .bubna-auth button,
    .bubna-auth-dialog button,
    .portal-dialog button,
    .legacy-confirm button,
    .bubna-install-panel button,
    .bubna-install-button,
    .account > summary,
    #menu_mobile,
    #step_back_mobile
  ) {
  --bubna-button-normal-bg: var(--classic-surface);
  --bubna-button-normal-fg: var(--classic-ink);
  --bubna-button-normal-border: var(--classic-line);
  --bubna-button-hover-bg: #edf3ec;
  --bubna-button-hover-fg: var(--classic-ink);
  --bubna-button-hover-border: #a5b8ab;
  --bubna-button-active-bg: #dce8dd;
  --bubna-button-active-fg: var(--classic-ink);
  --bubna-button-active-border: #7f9c87;
  --bubna-button-disabled-bg: #e8ebe5;
  --bubna-button-disabled-fg: #626a66;
  --bubna-button-disabled-border: #bdc5c0;
  --bubna-button-focus: var(--classic-green);
}
:root
  :where(
    .bubna-button--primary,
    .button.primary,
    .bubna-install-actions [data-install],
    .legacy-confirm-ok,
    [data-action='confirm'],
    .bubna-auth-dialog button[type='submit']
  ) {
  --bubna-button-normal-bg: var(--classic-green);
  --bubna-button-normal-fg: #fff;
  --bubna-button-normal-border: var(--classic-green);
  --bubna-button-hover-bg: var(--classic-green-hover);
  --bubna-button-hover-fg: #fff;
  --bubna-button-hover-border: var(--classic-green-hover);
  --bubna-button-active-bg: var(--classic-green-active);
  --bubna-button-active-fg: #fff;
  --bubna-button-active-border: var(--classic-green-active);
  --bubna-button-focus: #eee3c6;
}
:root
  :where(
    .bubna-auth > .bubna-auth-actions > button:first-child,
    .bubna-auth-dialog > button:not(.bubna-auth-close)
  ) {
  --bubna-button-normal-bg: var(--classic-charcoal);
  --bubna-button-normal-fg: #fff;
  --bubna-button-normal-border: var(--classic-charcoal);
  --bubna-button-hover-bg: #3a423c;
  --bubna-button-hover-fg: #fff;
  --bubna-button-hover-border: #3a423c;
  --bubna-button-active-bg: #151c17;
  --bubna-button-active-fg: #fff;
  --bubna-button-active-border: #151c17;
  --bubna-button-focus: #eee3c6;
}
:root
  :where(
    .bubna-button--inverse,
    .user_menu_game .account > summary,
    .game-button,
    #menu_mobile,
    #step_back_mobile
  ) {
  --bubna-button-normal-bg: var(--classic-bar);
  --bubna-button-normal-fg: #fcfaf5;
  --bubna-button-normal-border: #728c7e;
  --bubna-button-hover-bg: #2e5946;
  --bubna-button-hover-fg: #fff;
  --bubna-button-hover-border: #b8cbbf;
  --bubna-button-active-bg: #0d2c20;
  --bubna-button-active-fg: #fff;
  --bubna-button-active-border: #b8cbbf;
  --bubna-button-disabled-bg: var(--classic-bar);
  --bubna-button-disabled-fg: #a9bab0;
  --bubna-button-disabled-border: #728c7e;
  --bubna-button-focus: #eee3c6;
}
:root :where(.bubna-button--ghost, .game-button) {
  --bubna-button-normal-bg: transparent;
  --bubna-button-normal-border: transparent;
  --bubna-button-disabled-bg: transparent;
  --bubna-button-disabled-border: transparent;
}
:root :where(.hero .button.primary) {
  --bubna-button-normal-bg: var(--classic-surface);
  --bubna-button-normal-fg: var(--classic-ink);
  --bubna-button-normal-border: var(--classic-surface);
  --bubna-button-hover-bg: #e3ebdf;
  --bubna-button-hover-fg: var(--classic-ink);
  --bubna-button-hover-border: #e3ebdf;
  --bubna-button-active-bg: #cfdccc;
  --bubna-button-active-fg: var(--classic-ink);
  --bubna-button-active-border: #cfdccc;
  --bubna-button-focus: var(--classic-green);
}
:root
  :is(
    .bubna-button,
    .button,
    .pseudo_btn,
    .bubna-auth button,
    .bubna-auth-dialog button,
    .portal-dialog button,
    .legacy-confirm button,
    .bubna-install-panel button,
    .bubna-install-button,
    .account > summary
  ) {
  border-radius: var(--classic-control-radius) !important;
  font-family: var(--classic-ui);
}
:root
  :is(
    .portal-page .button,
    .account-panel button,
    .bubna-auth-dialog button,
    .bubna-install-actions button,
    .legacy-confirm button
  ) {
  font-weight: 600;
  font-size: 14px;
}
:root :where(.dialog-close, .bubna-install-close, .bubna-auth-close) {
  --bubna-button-normal-bg: transparent;
  --bubna-button-normal-fg: var(--classic-muted);
  --bubna-button-normal-border: transparent;
  --bubna-button-hover-bg: #e9eee8;
  --bubna-button-hover-fg: var(--classic-ink);
  --bubna-button-hover-border: transparent;
  --bubna-button-active-bg: #dce6dc;
  --bubna-button-active-fg: var(--classic-ink);
  --bubna-button-active-border: transparent;
  --bubna-button-focus: var(--classic-green);
}
:root :is(.portal-dialog .dialog-close, .bubna-install-close) {
  width: 40px;
  height: 40px;
  min-height: 40px;
}
:root :is(.portal-dialog, .account-panel, .bubna-auth-dialog, .bubna-auth-page) input {
  accent-color: var(--classic-green);
}
:root :is(.classic-account-details, .victory-details) summary:focus-visible,
:root .portal-page a:not(.button):focus-visible {
  outline: 2px solid var(--classic-green);
  outline-offset: 4px;
  border-radius: 3px;
}

/* Home and catalogue. Existing content, URLs and illustrated cards stay intact. */
:root .portal-page :is(h1, h2, h3) {
  font-family: var(--classic-display);
  color: var(--classic-ink);
  font-weight: 400;
  letter-spacing: -0.025em;
}
:root .portal-page h1 {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.08;
}
:root .portal-page h2 {
  font-size: clamp(28px, 3vw, 38px);
}
:root .portal-page h3 {
  font-size: 25px;
}
:root .site-header {
  max-width: 1160px;
  gap: 32px;
  padding-block: 18px;
}
:root .site-header .brand {
  font: 400 30px/1.15 var(--classic-display);
  letter-spacing: -0.05em;
  color: var(--classic-ink);
}
:root .brand span {
  color: var(--classic-green);
}
:root .site-header nav a {
  color: var(--classic-muted);
  font-size: 14px;
  font-weight: 500;
}
:root .site-header nav a:hover {
  color: var(--classic-green);
  text-decoration: underline;
}
:root .portal-page .hero {
  background: var(--classic-green);
  color: var(--classic-surface);
  border-radius: var(--classic-radius);
  padding: clamp(28px, 4.5vw, 60px);
  margin: 8px 0 56px;
}
:root .portal-page .hero h1 {
  color: var(--classic-surface);
  margin-bottom: 24px;
}
:root .portal-page .hero a:not(.button) {
  color: var(--classic-surface);
}
:root .hero .eyebrow {
  color: #dae6d9;
  font-size: 11px;
  letter-spacing: 0.15em;
}
:root .hero p:not(.eyebrow) {
  line-height: 1.6;
}
:root .hero .small {
  color: #e0eadf;
  font-size: 13px;
}
:root .hero .actions {
  margin-block: 24px;
}
:root .portal-page .eyebrow {
  letter-spacing: 0.14em;
}
:root .section-heading {
  margin-bottom: 22px;
}
:root .catalog {
  gap: 20px;
  margin-block: 26px 42px;
}
:root .catalog-card.available,
:root .catalog-card {
  padding: 26px;
  border: 1px solid var(--classic-line);
  border-radius: 20px;
  background: var(--classic-surface);
  box-shadow: 0 3px 12px #183e3104;
}
:root .catalog-card:hover {
  border-color: #9eb4a5;
}
:root .catalog-card .catalog-symbol {
  font-size: 26px;
  color: var(--classic-green);
  line-height: 1.4;
}
:root .catalog-card .badge {
  background: var(--classic-soft);
  color: var(--classic-muted);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  margin-top: 6px;
}
:root .catalog-card h3 {
  margin: 16px 0 12px;
  line-height: 1.18;
}
:root .catalog-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--classic-muted);
  margin-bottom: 24px;
}
:root .catalog-card .button {
  min-height: 44px;
}
:root .site-footer {
  border-color: var(--classic-line);
  color: var(--classic-muted);
  padding: 28px 20px;
}
:root .portal-page :is(.notice, .seo-choice) {
  background: var(--classic-soft);
  border-radius: 16px;
  padding: 24px;
}
:root .portal-page .notice {
  border-color: #9eb4a5;
}
:root .seo-breadcrumbs {
  color: var(--classic-muted);
}

/* Same paper surface for account, installation, settings and confirmation. */
:root .account-panel,
:root .bubna-install-panel,
:root dialog.bubna-auth-dialog,
:root dialog.legacy-confirm,
:root dialog.portal-dialog:not(.victory-classic) {
  color: var(--classic-text);
  background: var(--classic-surface);
  border: 1px solid var(--classic-line);
  border-radius: var(--classic-radius);
  box-shadow: var(--classic-shadow);
  font-family: var(--classic-ui);
}
:root .account-panel {
  width: min(372px, calc(100vw - 32px));
  padding: 26px;
  line-height: 1.5;
}
:root .account-panel .classic-account-title {
  font: 400 28px/1.2 var(--classic-display);
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--classic-ink);
}
:root .account-panel .bubna-auth {
  padding: 0;
  background: transparent;
  font: 14px/1.55 var(--classic-ui);
  color: inherit;
}
:root .account-panel .bubna-auth p {
  margin: 10px 0;
  overflow-wrap: anywhere;
}
:root .account-panel .bubna-auth-actions {
  gap: 8px;
  margin: 16px 0 8px;
}
:root .account-panel .bubna-auth-actions > button:first-child {
  width: 100%;
  min-height: 46px;
}
:root .classic-account-details {
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1px solid var(--classic-line);
  color: var(--classic-muted);
  font-size: 12px;
}
:root .classic-account-details summary {
  cursor: pointer;
  padding: 10px 0;
  min-height: 40px;
  width: fit-content;
}
:root .classic-account-details p {
  margin: 8px 0 0;
  font: 12px/1.6 var(--classic-ui);
  color: var(--classic-muted);
}
:root .account-panel .bubna-auth p:empty,
:root .bubna-auth-dialog p:empty {
  display: none;
}
:root .bubna-install-panel {
  width: min(380px, calc(100vw - 32px));
  padding: 28px;
}
:root .bubna-install-panel > strong {
  font: 400 29px/1.2 var(--classic-display);
  letter-spacing: -0.025em;
  color: var(--classic-ink);
  padding-right: 24px;
}
:root .bubna-install-panel p {
  color: var(--classic-muted);
  font: 14px/1.6 var(--classic-ui);
  margin: 16px 0 22px;
}
:root .bubna-install-actions {
  gap: 10px;
  flex-wrap: wrap;
}
:root .bubna-install-close {
  top: 8px;
  right: 8px;
  font-size: 24px !important;
}
:root .bubna-install-button {
  font-size: 13px;
  box-shadow: 0 3px 12px #082e281a !important;
}
:root .bubna-install-in-game .bubna-install-panel {
  position: relative;
  margin-top: 22px;
  padding: 22px;
  background: var(--classic-soft);
  border-radius: 16px;
  box-shadow: none;
}
:root dialog.bubna-auth-dialog {
  width: min(448px, calc(100vw - 32px));
  padding: 28px;
  max-height: calc(100dvh - 32px);
}
:root .bubna-auth-dialog h2 {
  font: 400 32px/1.2 var(--classic-display);
  color: var(--classic-ink);
  letter-spacing: -0.03em;
  margin: 8px 0 24px;
}
:root .bubna-auth-dialog > button:not(.bubna-auth-close) {
  width: 100%;
  min-height: 48px;
}
:root .bubna-auth-close {
  min-height: 40px;
  font-size: 12px;
  padding: 8px 10px;
}
:root .bubna-auth-dialog .bubna-auth-notice {
  padding-top: 20px;
  margin-top: 24px;
  border-top: 1px solid var(--classic-line);
  color: var(--classic-muted);
  font-size: 12px;
}
:root .bubna-auth-dialog input {
  border: 1px solid #9eb4a5;
  border-radius: 10px;
  background: #fffefb;
  color: var(--classic-ink);
}
:root .bubna-auth-warning {
  color: var(--classic-error);
}
:root .bubna-auth-message {
  overflow-wrap: anywhere;
}
:root dialog.portal-dialog:not(.victory-classic):not(.rules-modal):not(.rules-lightbox),
:root dialog.legacy-confirm {
  width: min(480px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 30px;
  text-align: left;
  font-size: 15px;
  line-height: 1.6;
}
:root .portal-dialog:not(.victory-classic):not(.rules-modal):not(.rules-lightbox) h2,
:root .legacy-confirm p {
  font: 400 28px/1.25 var(--classic-display);
  color: var(--classic-ink);
  margin: 0 0 22px;
}
:root .legacy-confirm-actions {
  justify-content: flex-start;
  gap: 10px;
  margin-top: 24px;
}
:root .portal-dialog .option {
  padding-block: 6px;
}
:root .portal-dialog .option input {
  margin-right: 8px;
}
:root .portal-dialog .other-games-links {
  gap: 10px;
}
:root .portal-dialog::backdrop,
:root .legacy-confirm::backdrop,
:root .bubna-auth-dialog::backdrop {
  background: #052d24b3;
}

/* The auth callback clears its URL before loading the existing auth stylesheet.
   These rules are appended there as well; callback HTML/scripts are not edited. */
:root body.bubna-auth-page {
  box-sizing: border-box;
  width: min(640px, calc(100% - 32px));
  max-width: none;
  margin: clamp(24px, 7vh, 80px) auto;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid var(--classic-line);
  border-radius: var(--classic-radius);
  background: var(--classic-surface);
  box-shadow: var(--classic-shadow);
  color: var(--classic-text);
  font: 16px/1.6 var(--classic-ui);
}
:root .bubna-auth-page h1 {
  font: 400 clamp(30px, 5vw, 40px) / 1.15 var(--classic-display);
  color: var(--classic-ink);
  letter-spacing: -0.025em;
}
:root .bubna-auth-page .bubna-auth {
  background: var(--classic-soft);
  border-radius: 16px;
  padding: 18px;
}
:root .bubna-auth-page main > p {
  color: var(--classic-muted);
  font-size: 14px;
}

/* Reading uses the same type and surfaces; existing rule pictures keep their
   source pixels, measured padding and zoom behaviour. */
:root .rules-guide,
:root .rules-bar {
  color: var(--classic-text);
  background: var(--classic-surface);
  font-family: var(--classic-ui);
}
:root .rules-guide :is(h2, h3, h4) {
  font-family: var(--classic-display);
  color: var(--classic-ink);
  font-weight: 400;
}
:root .rules-guide h2 {
  font-size: clamp(30px, 4vw, 42px);
}
:root .rules-guide h3 {
  font-size: clamp(25px, 3vw, 32px);
}
:root .rules-guide :is(section, th, td),
:root .rules-bar {
  border-color: var(--classic-line);
}
:root .rules-goal {
  background: var(--classic-soft);
  border-color: #9eb4a5;
  border-radius: 12px;
}
:root .rules-toc a {
  color: var(--classic-green);
  background: var(--classic-soft);
  border-radius: 8px;
}
:root .rules-ranks {
  background: var(--classic-paper);
}
:root .rules-lightbox form {
  background: var(--classic-surface);
}
@media (max-width: 650px) {
  :root .site-header {
    gap: 10px;
    padding: 16px;
  }
  :root .site-header .brand {
    font-size: 26px;
  }
  :root .site-header nav {
    order: 3;
    width: 100%;
  }
  :root .portal-page .hero {
    margin-bottom: 36px;
  }
  :root .portal-page .hero h1 {
    font-size: clamp(38px, 9vw, 52px);
  }
  :root .catalog {
    gap: 16px;
  }
  :root .catalog-card {
    padding: 22px;
  }
  :root dialog.rules-modal.portal-dialog {
    border-radius: 0;
  }
}
@media (max-width: 380px) {
  :root .site-header {
    gap: 10px;
  }
  :root .site-header nav {
    order: 3;
    width: 100%;
  }
  :root .account-panel {
    padding: 22px;
  }
  :root .bubna-install-panel {
    padding: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root .catalog-card {
    transition: none;
  }
}