@layer reset, base, components, utilities;

:root {
  --hud-bg: rgb(16 30 23 / 0.84);
  --hud-bg-strong: rgb(18 34 26 / 0.94);
  --hud-card: rgb(255 255 255 / 0.05);
  --hud-card-hover: rgb(255 255 255 / 0.1);
  --hud-border: rgb(255 255 255 / 0.13);
  --hud-border-strong: rgb(255 255 255 / 0.22);

  --ink-light: #f6f2df;
  --ink-soft: #c9d5c8;
  --ink-muted: #98aa9b;

  --accent-gold: #e7c45c;
  --accent-gold-hover: #f1d274;
  --accent-ink: #15271d;
  --accent-green: #6cc26f;

  --shadow-hud: 0 14px 36px rgb(7 15 11 / 0.34);
  --shadow-modal: 0 28px 72px rgb(6 14 10 / 0.55);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@layer reset {
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
  }

  button,
  dialog,
  aside,
  header,
  nav,
  article,
  div,
  input,
  dl,
  dt,
  dd,
  ul {
    box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  p,
  ul,
  dl,
  dd,
  blockquote {
    margin: 0;
  }
}

@layer base {
  body {
    overflow: hidden;
    background: #87ab64;
    color: var(--ink-light);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    text-align: start;
    -webkit-font-smoothing: antialiased;
  }

  h2,
  h3 {
    font-family: var(--font-display);
    text-wrap: balance;
  }

  p,
  blockquote {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
    transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out, scale 150ms ease-out;
  }

  button:active:not(:disabled) {
    scale: 0.97;
  }

  :where(a, button, input, [tabindex]):focus-visible {
    outline: 2.5px solid var(--accent-gold);
    outline-offset: 2px;
  }
}

@layer components {
  .viewport {
    position: relative;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
  }

  .stage {
    position: relative;
    width: 100%;
    height: 100%;
  }

  #world {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
  }

  /* Synced keyboard/screen-reader button directly over character sprite */
  .hero-trigger {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 64px;
    height: 86px;
    border-radius: 18px;
    padding: 0;
    z-index: 4;
    touch-action: none;
  }

  .hero-trigger:focus-visible {
    outline: 3px solid var(--accent-gold);
    outline-offset: 4px;
    background: rgb(231 196 92 / 0.16);
    box-shadow: 0 0 0 6px rgb(21 39 29 / 0.45);
  }

  /* Top Floating HUD (Search Center + Clock/Help Right) */
  .hud-top {
    position: fixed;
    inset-block-start: 16px;
    inset-inline: 18px;
    z-index: 12;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 12px;
    pointer-events: none;
  }

  .search-shell {
    grid-column: 2;
    position: relative;
    width: min(390px, calc(100dvw - 230px));
    pointer-events: auto;
  }

  .search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hud-bg);
    border: 1px solid var(--hud-border);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-hud);
    border-radius: var(--radius-pill);
    padding: 6px 14px 6px 6px;
  }

  .brand-crest {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #234935;
    color: var(--ink-light);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    text-decoration: none;
    border: 1px solid rgb(231 196 92 / 0.35);
  }

  .search-box input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink-light);
    font: inherit;
    font-size: 0.84rem;
    padding-block: 6px;
  }

  .search-box input::placeholder {
    color: var(--ink-soft);
    opacity: 0.78;
  }

  .search-box input:focus {
    outline: none;
  }

  .search-results {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline: 0;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--hud-bg-strong);
    border: 1px solid var(--hud-border-strong);
    border-radius: var(--radius-md);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-hud);
    gap: 3px;
  }

  .search-results:not([hidden]) {
    display: grid;
  }

  .search-results button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.825rem;
    text-align: start;
  }

  .search-results button:hover {
    background: var(--hud-card-hover);
  }

  .search-results small {
    font-size: 0.7rem;
    color: var(--accent-gold);
    font-weight: 600;
  }

  .hud-top-right {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
  }

  .clock-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hud-bg);
    border: 1px solid var(--hud-border);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-hud);
    border-radius: var(--radius-md);
    padding: 7px 13px;
  }

  .clock-orb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff6c9, var(--accent-gold));
    box-shadow: 0 0 10px rgb(231 196 92 / 0.5);
    flex-shrink: 0;
  }

  .clock-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  .clock-text strong {
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .clock-text strong small {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--ink-muted);
  }

  .clock-text span {
    font-size: 0.68rem;
    color: var(--ink-soft);
  }

  .hud-icon-btn {
    min-width: 42px;
    min-height: 42px;
    border-radius: 50%;
    background: var(--hud-bg);
    border: 1px solid var(--hud-border);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-hud);
    font-weight: 700;
    font-size: 0.95rem;
    display: grid;
    place-items: center;
  }

  .hud-icon-btn:hover {
    background: var(--hud-bg-strong);
    border-color: var(--hud-border-strong);
  }

  /* Left Vertical Icon Dock (matching reference rail) */
  .hud-dock {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: 16px;
    transform: translateY(-50%);
    z-index: 11;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 7px;
    background: var(--hud-bg);
    border: 1px solid var(--hud-border);
    border-radius: 22px;
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-hud);
  }

  .dock-btn {
    min-width: 54px;
    min-block-size: 52px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--ink-soft);
    font-size: 0.66rem;
    font-weight: 600;
    padding: 6px 4px;
  }

  .dock-btn:hover:not(.is-active) {
    background: var(--hud-card-hover);
    color: var(--ink-light);
  }

  .dock-btn.is-active {
    background: var(--accent-gold);
    color: var(--accent-ink);
    box-shadow: 0 6px 18px rgb(231 196 92 / 0.35);
  }

  /* Toggleable Hari 1 Sidebar Panel */
  .day-sidebar {
    position: fixed;
    inset-block-start: 78px;
    inset-inline-start: 96px;
    width: min(344px, calc(100dvw - 116px));
    max-height: calc(100dvh - 176px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: var(--hud-bg);
    border: 1px solid var(--hud-border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow-hud);
    overflow: hidden;
    transition: opacity 200ms ease-out, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .day-sidebar.is-collapsed {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-16px) scale(0.98);
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 14px;
    border-block-end: 1px solid var(--hud-border);
  }

  .sidebar-kicker {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent-gold);
  }

  .sidebar-header h2 {
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-block-start: 2px;
  }

  .sidebar-close {
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    background: var(--hud-card);
    color: var(--ink-soft);
    font-size: 1.25rem;
    line-height: 1;
    display: grid;
    place-items: center;
  }

  .sidebar-close:hover {
    background: var(--hud-card-hover);
    color: var(--ink-light);
  }

  .sidebar-scroll {
    overflow-y: auto;
    padding: 14px;
    display: grid;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 0.2) transparent;
  }

  .story-card {
    background: var(--hud-card);
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: var(--radius-md);
    padding: 14px 15px;
    display: grid;
    gap: 8px;
  }

  .card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .tag-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.1);
    color: var(--ink-light);
  }

  .tag-pill.is-gold {
    background: rgb(231 196 92 / 0.18);
    color: var(--accent-gold);
  }

  .meta-date {
    font-size: 0.72rem;
    color: var(--ink-muted);
  }

  .story-card h3 {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
  }

  .story-card p {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  .sidebar-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-block-start: 10px;
    margin-block-start: 2px;
    border-block-start: 1px solid rgb(255 255 255 / 0.1);
  }

  .sidebar-stats div {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
  }

  .sidebar-stats dt {
    font-size: 0.68rem;
    color: var(--ink-muted);
  }

  .sidebar-stats dd {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink-light);
    font-variant-numeric: tabular-nums;
  }

  .quick-pins {
    display: grid;
    gap: 6px;
    margin-block-start: 2px;
  }

  .pin-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / 0.05);
    border: 1px solid rgb(255 255 255 / 0.07);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: start;
  }

  .pin-link:hover {
    background: rgb(255 255 255 / 0.12);
    border-color: rgb(231 196 92 / 0.35);
  }

  .pin-link span:nth-child(2) {
    flex: 1;
  }

  .pin-link small {
    font-size: 0.7rem;
    color: var(--accent-gold);
  }

  .pin-dot,
  .online-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-gold);
    flex-shrink: 0;
  }

  .pin-dot.is-online,
  .online-dot {
    background: var(--accent-green);
    box-shadow: 0 0 0 3px rgb(108 194 111 / 0.22);
  }

  /* Bottom-left Compact Counter Pill */
  .summary-chip {
    position: fixed;
    inset-block-end: 16px;
    inset-inline-start: 16px;
    z-index: 9;
    display: grid;
    gap: 6px;
    min-width: 215px;
    padding: 11px 14px;
    background: var(--hud-bg);
    border: 1px solid var(--hud-border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-hud);
    text-align: start;
  }

  .summary-chip:hover {
    background: var(--hud-bg-strong);
    border-color: var(--hud-border-strong);
  }

  .summary-top {
    display: flex;
    align-items: baseline;
    gap: 7px;
  }

  .summary-top strong {
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .summary-top span {
    font-size: 0.74rem;
    color: var(--ink-soft);
  }

  .summary-bar {
    height: 3px;
    border-radius: 99px;
    background: rgb(255 255 255 / 0.12);
    overflow: hidden;
  }

  .summary-bar span {
    display: block;
    width: 65%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-gold));
  }

  .summary-foot {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    color: var(--ink-muted);
  }

  /* Bottom-right Zoom & Home FAB */
  .hud-bottom-right {
    position: fixed;
    inset-block-end: 16px;
    inset-inline-end: 18px;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .zoom-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--hud-bg);
    border: 1px solid var(--hud-border);
    border-radius: 13px;
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-hud);
  }

  .zoom-btn {
    min-width: 36px;
    min-height: 36px;
    border-radius: 9px;
    font-size: 1.125rem;
    font-weight: 500;
    display: grid;
    place-items: center;
  }

  .zoom-btn:hover {
    background: var(--hud-card-hover);
  }

  .zoom-readout {
    min-width: 42px;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
  }

  .home-fab {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--accent-gold);
    color: var(--accent-ink);
    box-shadow: 0 10px 26px rgb(7 15 11 / 0.36);
    display: grid;
    place-items: center;
  }

  .home-fab:hover {
    background: var(--accent-gold-hover);
  }

  /* Native Help Popover */
  .help-popover {
    position-area: bottom span-left;
    inset: auto;
    margin: 8px 0 0;
    width: min(325px, calc(100dvw - 32px));
    background: var(--hud-bg-strong);
    color: var(--ink-light);
    border: 1px solid var(--hud-border-strong);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-modal);
    backdrop-filter: blur(18px);
    transform-origin: top right;
    opacity: 0;
    transition-property: opacity, transform, display, overlay;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;
  }

  .help-popover:where(:popover-open, .\:popover-open) {
    display: block;
    opacity: 1;

    @starting-style {
      opacity: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
      transform: scale(1);

      @starting-style {
        transform: scale(0.95);
      }
    }
  }

  .help-popover h2 {
    font-size: 0.98rem;
    font-weight: 700;
    margin-block-end: 10px;
    color: var(--accent-gold);
  }

  .help-popover ul {
    padding-inline-start: 18px;
    display: grid;
    gap: 8px;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  /* Character Detail Modal Dialog */
  .char-dialog {
    margin-block: auto;
    margin-inline-start: auto;
    margin-inline-end: 24px;
    width: min(384px, calc(100dvw - 28px));
    max-height: calc(100dvh - 40px);
    padding: 0;
    border: 1px solid var(--hud-border-strong);
    border-radius: var(--radius-lg);
    background: rgb(20 35 27 / 0.96);
    color: var(--ink-light);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-modal);
    overflow-y: auto;
    opacity: 0;
    transition-property: opacity, transform, display, overlay;
    transition-duration: 240ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-behavior: allow-discrete;

    @media (prefers-reduced-motion: no-preference) {
      transform: translateY(10px) scale(0.96);
    }
  }

  .char-dialog:modal {
    overscroll-behavior: contain;
  }

  .char-dialog::backdrop {
    background-color: rgb(8 16 12 / 0);
    backdrop-filter: blur(0px);
    overflow: hidden;
    overscroll-behavior: contain;
    transition-property: background-color, backdrop-filter, display, overlay;
    transition-duration: 240ms;
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;
  }

  .char-dialog[open]:where(:not([data-closing])) {
    opacity: 1;

    @starting-style {
      opacity: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
      transform: translateY(0) scale(1);

      @starting-style {
        transform: translateY(10px) scale(0.96);
      }
    }

    &::backdrop {
      background-color: rgb(8 16 12 / 0.42);
      backdrop-filter: blur(3px);

      @starting-style {
        background-color: rgb(8 16 12 / 0);
        backdrop-filter: blur(0px);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .char-dialog,
    .char-dialog::backdrop,
    .help-popover,
    .day-sidebar {
      transition-duration: 100ms;
    }
  }

  .dialog-shell {
    padding: 22px 22px 24px;
    display: grid;
    gap: 15px;
  }

  .dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .char-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent-gold);
    background: rgb(231 196 92 / 0.14);
    padding: 6px 11px;
    border-radius: var(--radius-pill);
  }

  .dialog-close {
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    background: var(--hud-card);
    font-size: 1.35rem;
    line-height: 1;
    display: grid;
    place-items: center;
    color: var(--ink-soft);
  }

  .dialog-close:hover {
    background: var(--hud-card-hover);
    color: var(--ink-light);
  }

  .char-hero {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .char-avatar {
    flex-shrink: 0;
    filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.25));
  }

  .char-identity h2 {
    font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.48rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .char-role {
    display: inline-block;
    margin-block-start: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--accent-gold);
    background: rgb(255 255 255 / 0.08);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
  }

  .char-quote {
    padding: 11px 13px;
    background: rgb(255 255 255 / 0.05);
    border-inline-start: 3px solid var(--accent-gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--ink-soft);
  }

  .char-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .char-traits span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-light);
    border: 1px solid var(--hud-border);
    background: rgb(255 255 255 / 0.05);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
  }

  .char-bio {
    font-size: 0.84rem;
    line-height: 1.62;
    color: var(--ink-soft);
  }

  .char-details {
    display: grid;
    border-block: 1px solid var(--hud-border);
  }

  .char-details div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 10px;
    font-size: 0.8125rem;
  }

  .char-details div:not(:last-child) {
    border-block-end: 1px solid rgb(255 255 255 / 0.08);
  }

  .char-details dt {
    color: var(--ink-muted);
  }

  .char-details dd {
    font-weight: 600;
    color: var(--ink-light);
    text-align: end;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .btn-primary,
  .btn-secondary {
    min-block-size: 44px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-primary {
    background: var(--accent-gold);
    color: var(--accent-ink);
  }

  .btn-primary:hover {
    background: var(--accent-gold-hover);
  }

  .btn-secondary {
    background: var(--hud-card);
    color: var(--ink-light);
    border: 1px solid var(--hud-border);
  }

  .btn-secondary:hover {
    background: var(--hud-card-hover);
  }
}

@layer utilities {
  [hidden] {
    display: none !important;
  }

  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 820px) {
  .hud-top {
    grid-template-columns: 1fr auto;
    inset-block-start: 12px;
    inset-inline: 12px;
  }

  .search-shell {
    grid-column: 1;
    width: 100%;
  }

  .hud-top-right {
    grid-column: 2;
  }

  .clock-pill {
    display: none;
  }

  .hud-dock {
    inset-block-start: auto;
    inset-block-end: 12px;
    inset-inline-start: 12px;
    transform: none;
    flex-direction: row;
    border-radius: 18px;
    padding: 5px;
    gap: 4px;
  }

  .dock-btn {
    min-width: 52px;
    min-block-size: 46px;
    border-radius: 13px;
    font-size: 0.62rem;
  }

  .day-sidebar {
    inset-block-start: 68px;
    inset-inline: 12px;
    width: auto;
    max-height: calc(100dvh - 152px);
  }

  .summary-chip {
    display: none;
  }

  .hud-bottom-right {
    inset-block-end: 14px;
    inset-inline-end: 12px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .zoom-group {
    display: inline-flex;
    flex-direction: column;
  }

  .home-fab {
    width: 48px;
    height: 48px;
  }

  .char-dialog {
    margin: auto 12px 12px;
    width: calc(100dvw - 24px);
    max-height: calc(100dvh - 32px);
  }
}

@media (pointer: coarse) {
  .hud-icon-btn,
  .zoom-btn,
  .dialog-close,
  .sidebar-close {
    min-width: 44px;
    min-height: 44px;
  }
}

.citizen-profile-avatar{width:76px;height:76px;display:grid;place-items:center;border-radius:50%;background:#e9efdd;color:#567b51;font-size:32px;margin:24px auto 12px}.citizen-profile-heading{text-align:center}.citizen-profile-heading h2{margin:0;font-family:Georgia,serif;font-size:24px}.citizen-profile-heading .char-role{margin:5px 0;color:#6c7b68}