/* ============================================================================
   Hearthlands / Ashfall UI style kit  (art-kit.css)  [v7 copy: px -> rem so it follows the game window-fit scale; no breakpoints]
   Charcoal panels, pale-grey line icons, ONE amber accent. Nation colour is
   allowed on exactly three surfaces: .ak-nation-stripe, .ak-minimap frame,
   .ak-card--people ribbon. Everything else stays monochrome.
   Zero deps, no fonts, works from file://. Prefix: ak-
   ========================================================================== */

:root,
[data-skin="hearthlands"] {
  /* surfaces */
  --ak-bg: #17171a;
  --ak-panel: rgba(31, 31, 36, .88);
  --ak-panel-solid: #1f1f24;
  --ak-panel-2: #27272d;
  --ak-panel-3: #303037;
  --ak-line: #37363a;
  --ak-line-2: #4a494f;
  /* ink */
  --ak-ink: #ece6da;
  --ak-icon: #d9d2c6;
  --ak-dim: #a39d92;
  --ak-mute: #6f6b64;
  /* the one accent */
  --ak-accent: #d9a24a;
  --ak-accent-2: #f0c070;
  --ak-accent-ink: #1a1408;
  --ak-accent-glow: rgba(217, 162, 74, .28);
  /* nation colour (set per player at runtime: style="--ak-nation:#b53a2e") */
  --ak-nation: #4a7fc1;
  /* shape + motion */
  --ak-r: 0.5rem;
  --ak-r-sm: 5px;
  --ak-r-lg: 0.75rem;
  --ak-ease: cubic-bezier(.2, .9, .25, 1.05);
  --ak-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ak-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .04) inset;
  --ak-cell: 2.5rem;
  --ak-drawer-w: var(--drW, 26rem);
  --ak-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ak-serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --ak-fs: 0.813rem;
  --ak-scale: 1;
}

/* Ashfall: cooler concrete greys, rust-leaning accent */
[data-skin="ashfall"] {
  --ak-bg: #161817;
  --ak-panel: rgba(30, 32, 31, .9);
  --ak-panel-solid: #1e201f;
  --ak-panel-2: #272a28;
  --ak-panel-3: #32352f;
  --ak-line: #3a3d3a;
  --ak-line-2: #4c504b;
  --ak-ink: #e4e1d8;
  --ak-icon: #cfc9c0;
  --ak-dim: #9c9890;
  --ak-mute: #6c6a63;
  --ak-accent: #c98b3c;
  --ak-accent-2: #e2aa5c;
  --ak-accent-glow: rgba(201, 139, 60, .28);
  --ak-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .03) inset;
}

/* Scale the whole interface with the window: 1000x600 -> ~0.86, 1440p -> ~1.2 */
/* v7: no px breakpoints; rem does the scaling */

.ak, .ak * , .ak *::before, .ak *::after { box-sizing: border-box; }
.ak {
  font-family: var(--ak-font);
  font-size: inherit; /* v7: the game scales by rem */
  color: var(--ak-ink);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
.ak button { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- icons */
.ak-ic { display: inline-flex; width: 1.25em; height: 1.25em; vertical-align: -0.3em; color: inherit; flex: none; }
.ak-ic svg { width: 100%; height: 100%; display: block; }
.ak-ic--16 { width: 1rem; height: 1rem; }
.ak-ic--20 { width: 1.25rem; height: 1.25rem; }
.ak-ic--24 { width: 1.5rem; height: 1.5rem; }
.ak-ic--32 { width: 2rem; height: 2rem; }
.ak-ic.is-accent { color: var(--ak-accent); }

/* ---------------------------------------------------------- icon button */
.ak-ibtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ak-cell); height: var(--ak-cell);
  border: 1px solid transparent; border-radius: var(--ak-r);
  background: transparent; color: var(--ak-icon);
  cursor: pointer; padding: 0; margin: 0;
  transition: background .15s var(--ak-ease), color .15s, border-color .15s, transform .18s var(--ak-ease);
}
.ak-ibtn .ak-ic { width: 1.375rem; height: 1.375rem; vertical-align: 0; }
.ak-ibtn:hover { background: var(--ak-panel-3); border-color: var(--ak-line-2); color: var(--ak-ink); }
.ak-ibtn:active { transform: translateY(1px) scale(.97); }
.ak-ibtn.is-active { color: var(--ak-accent); background: color-mix(in srgb, var(--ak-accent) 12%, transparent); border-color: color-mix(in srgb, var(--ak-accent) 45%, transparent); }
.ak-ibtn.is-active::before { content: ""; position: absolute; left: -1px; top: 25%; bottom: 25%; width: 2px; border-radius: 2px; background: var(--ak-accent); }
.ak-ibtn[disabled] { opacity: .35; cursor: default; pointer-events: none; }
.ak-ibtn--sm { width: 1.875rem; height: 1.875rem; border-radius: var(--ak-r-sm); }
.ak-ibtn--sm .ak-ic { width: 1.125rem; height: 1.125rem; }
/* numeric / dot badge on a button (alerts, inbox) */
.ak-ibtn .ak-dot { position: absolute; top: 0.375rem; right: 0.375rem; width: 0.438rem; height: 0.438rem; border-radius: 50%; background: var(--ak-accent); box-shadow: 0 0 0 2px var(--ak-panel-solid); }
.ak-ibtn .ak-count { position: absolute; top: 3px; right: 3px; min-width: 1rem; height: 1rem; padding: 0 4px; border-radius: 0.5rem; background: var(--ak-accent); color: var(--ak-accent-ink); font-size: 0.625rem; font-weight: 700; line-height: 1rem; text-align: center; }

/* ------------------------------------------------------------- tooltips
   data-tip="Word"  (+ data-tip-pos="top|bottom|left|right", default bottom)
   Word label appears on hover / keyboard focus only; never printed by default. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; z-index: 60; left: 50%; top: calc(100% + 0.438rem);
  transform: translate(calc(-50% + var(--tip-dx, 0px)), -4px);
  padding: 4px 0.5rem; border-radius: var(--ak-r-sm);
  background: var(--ak-panel-solid); color: var(--ak-ink);
  border: 1px solid var(--ak-line-2);
  font: 500 0.75rem/1.2 var(--ak-font); letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, .4);
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease .22s, transform .18s var(--ak-ease) .22s;
}
/* v7 final: a word shows on hover, or on keyboard focus once Tab was used (html.kbnav); a click, any key or a window blur hides it (html.tipoff) */
[data-tip]:hover::after, html.kbnav [data-tip]:focus-visible::after { opacity: 1; transform: translate(calc(-50% + var(--tip-dx, 0px)), 0); }
[data-tip-pos="top"]::after { top: auto; bottom: calc(100% + 0.438rem); transform: translate(calc(-50% + var(--tip-dx, 0px)), 4px); }
[data-tip-pos="top"]:hover::after, html.kbnav [data-tip-pos="top"]:focus-visible::after { transform: translate(calc(-50% + var(--tip-dx, 0px)), 0); }
[data-tip-pos="right"]::after { left: calc(100% + 0.5rem); top: 50%; transform: translate(-4px, calc(-50% + var(--tip-dy, 0px))); }
[data-tip-pos="right"]:hover::after, html.kbnav [data-tip-pos="right"]:focus-visible::after { transform: translate(0, calc(-50% + var(--tip-dy, 0px))); }
[data-tip-pos="left"]::after { left: auto; right: calc(100% + 0.5rem); top: 50%; transform: translate(4px, calc(-50% + var(--tip-dy, 0px))); }
[data-tip-pos="left"]:hover::after, html.kbnav [data-tip-pos="left"]:focus-visible::after { transform: translate(0, calc(-50% + var(--tip-dy, 0px))); }
html.tipoff [data-tip]::after { opacity: 0 !important; transition: none !important; }
/* optional key hint: data-key="G" renders a small kbd after the word */
[data-tip][data-key]::after { content: attr(data-tip) "   " attr(data-key); }

/* -------------------------------------------------------------- panels */
.ak-panel {
  background: var(--ak-panel); border: 1px solid var(--ak-line); border-radius: var(--ak-r);
  box-shadow: var(--ak-shadow); backdrop-filter: blur(0.375rem); -webkit-backdrop-filter: blur(0.375rem);
}
.ak-panel--solid { background: var(--ak-panel-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Drawer: right-side sheet with a PINNED header (close never scrolls away) */
.ak-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: var(--ak-drawer-w); max-width: 100%;
  display: flex; flex-direction: column;
  background: var(--ak-panel); border-left: 1px solid var(--ak-line);
  box-shadow: -0.875rem 0 2.5rem rgba(0, 0, 0, .4);
  backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem);
  transform: translateX(0); transition: transform .32s var(--ak-ease-out);
  z-index: 40;
}
.ak-drawer[hidden] { display: none; }
.ak-drawer.is-closed { transform: translateX(104%); }
.ak-drawer--left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--ak-line); }
.ak-drawer--left.is-closed { transform: translateX(-104%); }
.ak-drawer--modal { position: fixed; inset: 0; margin: auto; width: min(92vw, 53.75rem); height: min(88vh, 40rem); bottom: auto; top: 50%; right: auto; left: 50%; transform: translate(-50%, -50%); border: 1px solid var(--ak-line); border-radius: var(--ak-r-lg); }
.ak-drawer-head {
  position: sticky; top: 0; z-index: 2; flex: none;
  display: flex; align-items: center; gap: 0.5rem;
  min-height: calc(var(--ak-cell) + 0.75rem); padding: 0.375rem 0.375rem 0.375rem 0.875rem;
  border-bottom: 1px solid var(--ak-line);
  background: linear-gradient(to bottom, var(--ak-panel-solid), color-mix(in srgb, var(--ak-panel-solid) 92%, transparent));
}
.ak-drawer-title { display: flex; align-items: center; gap: 0.625rem; font-weight: 600; font-size: 1.05em; letter-spacing: .01em; flex: 1; min-width: 0; }
.ak-drawer-title .ak-ic { color: var(--ak-accent); width: 1.25rem; height: 1.25rem; }
.ak-drawer-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.875rem; overscroll-behavior: contain; }
.ak-drawer-foot { flex: none; display: flex; gap: 0.5rem; justify-content: flex-end; padding: 0.625rem 0.875rem; border-top: 1px solid var(--ak-line); background: var(--ak-panel-solid); }
/* the close button: always in the pinned header, large hit area, obvious on hover */
.ak-close { flex: none; margin-left: auto; }
.ak-close:hover { color: var(--ak-ink); background: var(--ak-panel-3); }
.ak-close .ak-ic { width: 1.375rem; height: 1.375rem; }
.ak-back { flex: none; }

/* ---------------------------------------------------------------- tabs
   Icon-only; the active tab unfolds its word. Inactive words live in tooltips. */
.ak-tabs { display: flex; gap: 4px; padding: 0.375rem 0.5rem; border-bottom: 1px solid var(--ak-line); background: color-mix(in srgb, var(--ak-panel-solid) 70%, transparent); flex: none; overflow-x: auto; scrollbar-width: none; }
.ak-tabs::-webkit-scrollbar { display: none; }
.ak-tab {
  display: inline-flex; align-items: center; gap: 0; height: 2.125rem; padding: 0 0.563rem;
  border: 1px solid transparent; border-radius: var(--ak-r-sm); background: transparent; color: var(--ak-icon);
  cursor: pointer; white-space: nowrap; position: relative;
  transition: background .15s, color .15s, padding .22s var(--ak-ease);
}
.ak-tab .ak-ic { width: 1.25rem; height: 1.25rem; vertical-align: 0; }
.ak-tab .ak-tab-word { max-width: 0; overflow: hidden; opacity: 0; font-weight: 600; font-size: .95em; letter-spacing: .01em; transition: max-width .26s var(--ak-ease), opacity .18s, margin .22s; }
.ak-tab:hover { background: var(--ak-panel-3); color: var(--ak-ink); }
.ak-tab[aria-selected="true"] { color: var(--ak-ink); background: var(--ak-panel-2); border-color: var(--ak-line-2); padding-right: 0.75rem; }
.ak-tab[aria-selected="true"] .ak-ic { color: var(--ak-accent); }
.ak-tab[aria-selected="true"] .ak-tab-word { max-width: 8.75rem; opacity: 1; margin-left: 0.5rem; }
.ak-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0.625rem; right: 0.625rem; bottom: -0.437rem; height: 2px; border-radius: 2px; background: var(--ak-accent); }
.ak-tabpanel[hidden] { display: none; }

/* --------------------------------------------------------------- cards */
.ak-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--ak-panel-2); border: 1px solid var(--ak-line); border-radius: var(--ak-r);
  overflow: hidden; color: var(--ak-ink);
  transition: transform .25s var(--ak-ease), border-color .2s, box-shadow .25s;
}
.ak-card:hover { border-color: var(--ak-line-2); transform: translateY(-2px); box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, .35); }
.ak-card.is-current { border-color: color-mix(in srgb, var(--ak-accent) 60%, var(--ak-line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ak-accent) 35%, transparent), 0 0.625rem 1.625rem rgba(0, 0, 0, .35); }
.ak-card.is-locked { opacity: .55; filter: saturate(.3); }
.ak-card.is-locked:hover { transform: none; }
.ak-card-media {
  position: relative; width: 100%; aspect-ratio: var(--ar, 3 / 4); overflow: hidden;
  background: var(--ak-panel-3);
  background-image: linear-gradient(135deg, transparent 0 46%, rgba(255, 255, 255, .035) 46% 54%, transparent 54%);
}
.ak-card-media .ak-art { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ak-ease-out); }
.ak-card:hover .ak-card-media .ak-art { transform: scale(1.03); }
.ak-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 20, 24, .55), transparent 45%); pointer-events: none; }
.ak-card-media.art-missing::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, var(--ak-line-2) 0 2px, transparent 3px), var(--ak-panel-3); }
.ak-card-media .ak-card-glyph { position: absolute; left: 0.625rem; top: 0.625rem; width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 20, 24, .7); color: var(--ak-icon); border: 1px solid var(--ak-line-2); z-index: 1; }
.ak-card-media .ak-card-glyph .ak-ic { width: 1.125rem; height: 1.125rem; vertical-align: 0; }
.ak-card-body { padding: 0.625rem 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 4px; }
.ak-card-kicker { font-size: .78em; letter-spacing: .12em; text-transform: uppercase; color: var(--ak-dim); }
.ak-card-title { font-family: var(--ak-serif); font-size: 1.25em; line-height: 1.1; letter-spacing: -.005em; }
.ak-card-text { color: var(--ak-dim); font-size: .92em; }
.ak-card-meta { display: flex; gap: 0.625rem; align-items: center; color: var(--ak-dim); font-size: .85em; margin-top: 4px; }
.ak-card-meta .ak-ic { width: 0.938rem; height: 0.938rem; vertical-align: -.25em; }
/* variants: aspect ratio + glyph */
.ak-card--era .ak-card-media, .ak-card--wonder .ak-card-media { --ar: 3 / 4; }
.ak-card--people .ak-card-media, .ak-card--squad .ak-card-media { --ar: 4 / 3; }
.ak-card--city .ak-card-media { --ar: 1 / 1; }
.ak-card--wide .ak-card-media { --ar: 2.36 / 1; }
/* people card: nation colour on ONE ribbon only */
.ak-card--people::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ak-nation); z-index: 2; }
.ak-card-row { display: flex; gap: 0.75rem; align-items: stretch; }
.ak-card--row { flex-direction: row; }
.ak-card--row .ak-card-media { width: 38%; flex: none; aspect-ratio: auto; }
.ak-card--row .ak-card-body { flex: 1; justify-content: center; }
.ak-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); }
.ak-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ak-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* entrance choreography: add .ak-stagger to a container, children fade+rise */
.ak-stagger > * { animation: ak-rise .5s var(--ak-ease-out) both; }
.ak-stagger > *:nth-child(2) { animation-delay: .06s } .ak-stagger > *:nth-child(3) { animation-delay: .12s }
.ak-stagger > *:nth-child(4) { animation-delay: .18s } .ak-stagger > *:nth-child(5) { animation-delay: .24s }
.ak-stagger > *:nth-child(6) { animation-delay: .30s } .ak-stagger > *:nth-child(n+7) { animation-delay: .36s }
@keyframes ak-rise { from { opacity: 0; transform: translateY(0.625rem) } to { opacity: 1; transform: none } }

/* ----------------------------------------------------------- pills / toasts */
.ak-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 2rem; padding: 0 0.75rem 0 0.625rem; border-radius: 1rem;
  background: var(--ak-panel); border: 1px solid var(--ak-line); color: var(--ak-ink);
  box-shadow: var(--ak-shadow); backdrop-filter: blur(0.375rem); -webkit-backdrop-filter: blur(0.375rem);
  cursor: pointer; font-size: .95em; white-space: nowrap; max-width: 100%;
  transition: border-color .2s, transform .2s var(--ak-ease);
}
.ak-pill:hover { border-color: var(--ak-line-2); transform: translateY(-1px); }
.ak-pill .ak-ic { width: 1.125rem; height: 1.125rem; vertical-align: 0; color: var(--ak-icon); }
.ak-pill .ak-pill-text { overflow: hidden; text-overflow: ellipsis; }
.ak-pill .ak-pill-key { font-size: .8em; color: var(--ak-dim); border: 1px solid var(--ak-line-2); border-radius: 4px; padding: 0 5px; line-height: 1.5; }
.ak-pill .ak-count { min-width: 1.125rem; height: 1.125rem; padding: 0 5px; border-radius: 0.563rem; background: var(--ak-panel-3); color: var(--ak-ink); font-size: 0.688rem; font-weight: 700; line-height: 1.125rem; text-align: center; }
.ak-pill.is-urgent { border-color: color-mix(in srgb, var(--ak-accent) 70%, var(--ak-line)); }
.ak-pill.is-urgent .ak-ic { color: var(--ak-accent); animation: ak-pulse 1.6s ease-in-out infinite; }
.ak-pill.is-urgent .ak-count { background: var(--ak-accent); color: var(--ak-accent-ink); }
@keyframes ak-pulse { 0%, 100% { opacity: 1; transform: none } 50% { opacity: .55; transform: scale(.92) } }
.ak-toast-stack { position: absolute; left: 50%; top: calc(var(--ak-cell) + 1.375rem); transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.375rem; align-items: center; z-index: 30; pointer-events: none; }
.ak-toast-stack > * { pointer-events: auto; animation: ak-drop .45s var(--ak-ease-out) both; }
@keyframes ak-drop { from { opacity: 0; transform: translateY(-0.625rem) } to { opacity: 1; transform: none } }

/* ------------------------------------------------------- unlock prompt */
.ak-unlock {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 26.25rem); z-index: 45;
  background: var(--ak-panel-solid); border: 1px solid var(--ak-line-2); border-radius: var(--ak-r-lg);
  box-shadow: 0 1.875rem 5rem rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4);
  overflow: hidden; animation: ak-spring .55s var(--ak-ease-out) both;
}
@keyframes ak-spring { 0% { opacity: 0; transform: translate(-50%, -46%) scale(.94) } 60% { opacity: 1 } 100% { transform: translate(-50%, -50%) scale(1) } }
.ak-unlock-media { position: relative; aspect-ratio: 2.36 / 1; background: var(--ak-panel-3); overflow: hidden; }
.ak-unlock-media .ak-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-unlock-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--ak-panel-solid), transparent 60%); }
.ak-unlock-tag { position: absolute; left: 0.875rem; top: 0.75rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.375rem; height: 1.5rem; padding: 0 0.625rem 0 0.438rem; border-radius: 0.75rem; background: var(--ak-accent); color: var(--ak-accent-ink); font-size: 0.688rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ak-unlock-tag .ak-ic { width: 0.875rem; height: 0.875rem; vertical-align: 0; }
.ak-unlock-body { padding: 4px 1.125rem 1rem; }
.ak-unlock-title { font-family: var(--ak-serif); font-size: 1.7em; line-height: 1.05; margin: 0 0 0.375rem; }
.ak-unlock-text { color: var(--ak-dim); margin: 0 0 0.875rem; }
.ak-unlock-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.ak-unlock .ak-close { position: absolute; right: 0.375rem; top: 0.375rem; z-index: 2; background: rgba(20, 20, 24, .55); }

/* ------------------------------------------------------------- buttons */
.ak-btn {
  display: inline-flex; align-items: center; gap: 0.438rem; height: 2.125rem; padding: 0 0.875rem;
  border-radius: var(--ak-r-sm); border: 1px solid var(--ak-line-2); background: var(--ak-panel-2); color: var(--ak-ink);
  cursor: pointer; font-weight: 600; letter-spacing: .01em; transition: background .15s, border-color .15s, transform .15s var(--ak-ease);
}
.ak-btn .ak-ic { width: 1.125rem; height: 1.125rem; vertical-align: 0; }
.ak-btn:hover { background: var(--ak-panel-3); border-color: var(--ak-dim); }
.ak-btn:active { transform: translateY(1px); }
.ak-btn--primary { background: var(--ak-accent); border-color: var(--ak-accent); color: var(--ak-accent-ink); }
.ak-btn--primary:hover { background: var(--ak-accent-2); border-color: var(--ak-accent-2); }
.ak-btn--ghost { background: transparent; border-color: transparent; color: var(--ak-dim); }
.ak-btn--ghost:hover { color: var(--ak-ink); background: var(--ak-panel-3); border-color: transparent; }

/* -------------------------------------------------- automation badges
   Shape carries the meaning (hand / bulb / cycle); auto alone gets the accent. */
.ak-mode { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; border: 1px solid var(--ak-line-2); background: var(--ak-panel-2); color: var(--ak-icon); cursor: pointer; }
.ak-mode .ak-ic { width: 0.938rem; height: 0.938rem; vertical-align: 0; }
.ak-mode--suggest { border-style: dashed; }
.ak-mode--auto { background: var(--ak-accent); border-color: var(--ak-accent); color: var(--ak-accent-ink); }
.ak-mode-group { display: inline-flex; gap: 2px; padding: 2px; border-radius: 0.5rem; background: var(--ak-panel-solid); border: 1px solid var(--ak-line); }
.ak-mode-group .ak-mode { border-color: transparent; background: transparent; }
.ak-mode-group .ak-mode.is-on { background: var(--ak-panel-3); color: var(--ak-ink); }
.ak-mode-group .ak-mode--auto.is-on { background: var(--ak-accent); color: var(--ak-accent-ink); }

/* ------------------------------------------------------------- HUD bits
   Add .has-drawer to the HUD root while a right drawer is open: the centred
   HUD (top bar, alert pill, selection card) re-centres in the uncovered map. */
.ak.has-drawer .ak-selcard { left: calc((100% - var(--ak-drawer-w)) / 2); max-width: calc(100% - var(--ak-drawer-w) - 1.5rem); }
.ak.has-drawer .ak-rail--right, .ak.has-drawer .ak-corner--tr, .ak.has-drawer .ak-corner--br { right: calc(var(--ak-drawer-w) + 0.75rem); }
.ak.has-drawer .ak-topzone { right: calc(var(--ak-drawer-w) + 9.75rem); }
@media (max-width: 106.25rem) { .ak.has-drawer .ak-res small, .ak.has-drawer .ak-res--optional { display: none; } }
.ak-selcard, .ak-rail--right, .ak-corner--tr, .ak-corner--br { transition: left .32s var(--ak-ease-out), right .32s var(--ak-ease-out); }
/* top zone: a column between the two top corners; the top bar, alert pill and hint strip centre inside it */
.ak-topzone { position: absolute; top: 0.75rem; left: 9.75rem; right: 9.75rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 20; pointer-events: none; transition: right .32s var(--ak-ease-out); }
.ak-topzone > * { pointer-events: auto; }
.ak-topbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 2px; min-height: calc(var(--ak-cell) + 4px); padding: 3px 0.375rem; max-width: 100%; }
.ak-topzone .ak-toast-stack { position: static; transform: none; }
.ak-res { display: inline-flex; align-items: center; gap: 0.438rem; height: 1.875rem; padding: 0 0.625rem 0 0.5rem; border-radius: 0.938rem; color: var(--ak-ink); font-variant-numeric: tabular-nums; cursor: default; white-space: nowrap; flex: none; }
.ak-res:hover { background: var(--ak-panel-3); }
.ak-res .ak-ic { width: 1.125rem; height: 1.125rem; vertical-align: 0; color: var(--ak-icon); }
.ak-res b { font-weight: 600; }
.ak-res small { color: var(--ak-dim); font-size: .85em; margin-left: -3px; }
.ak-res.is-low b { color: var(--ak-accent); }
.ak-sep { width: 1px; height: 1.25rem; background: var(--ak-line-2); margin: 0 0.375rem; flex: none; }
.ak-rail { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; padding: 4px; z-index: 20; }
.ak-rail--right { right: 0.75rem; }
.ak-rail--left { left: 0.75rem; }
.ak-rail .ak-sep { width: 1.25rem; height: 1px; margin: 4px auto; }
.ak-corner { position: absolute; z-index: 20; display: flex; gap: 2px; padding: 4px; }
.ak-corner--tl { left: 0.75rem; top: 0.75rem; } .ak-corner--tr { right: 0.75rem; top: 0.75rem; }
.ak-corner--bl { left: 0.75rem; bottom: 0.75rem; } .ak-corner--br { right: 0.75rem; bottom: 0.75rem; }
/* minimap: nation colour on its frame (surface 2 of 3) */
.ak-minimap { position: absolute; left: 0.75rem; bottom: 0.75rem; width: clamp(9.375rem, 15vw, 15rem); aspect-ratio: 1 / 1; padding: 4px; z-index: 20; border-color: color-mix(in srgb, var(--ak-nation) 55%, var(--ak-line)); }
.ak-minimap-view { position: relative; width: 100%; height: 100%; border-radius: 5px; overflow: hidden; background: #1a1c1e; }
.ak-minimap-view .ak-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-minimap-rect { position: absolute; border: 1.5px solid #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.ak-minimap-tools { position: absolute; right: 2px; top: 2px; display: flex; gap: 1px; }
/* selection card: bottom-centre; nation stripe (surface 1 of 3) */
.ak-selcard { position: absolute; left: 50%; bottom: 0.75rem; transform: translateX(-50%); display: flex; gap: 0.75rem; align-items: stretch; min-height: 6.75rem; max-width: min(92vw, 47.5rem); padding: 0.5rem; z-index: 20; }
.ak-selcard .ak-nation-stripe { width: 4px; border-radius: 2px; background: var(--ak-nation); flex: none; align-self: stretch; }
.ak-sel-portrait { width: 5.75rem; aspect-ratio: 1 / 1; border-radius: var(--ak-r-sm); overflow: hidden; background: var(--ak-panel-3); flex: none; align-self: center; }
.ak-sel-portrait .ak-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.ak-sel-info { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 9.375rem; }
.ak-sel-title { font-family: var(--ak-serif); font-size: 1.3em; line-height: 1.05; }
.ak-sel-sub { color: var(--ak-dim); font-size: .9em; }
.ak-stats { display: flex; gap: 0.75rem; margin-top: 4px; color: var(--ak-ink); font-variant-numeric: tabular-nums; font-size: .95em; }
.ak-stats span { display: inline-flex; align-items: center; gap: 4px; }
.ak-stats .ak-ic { width: 0.938rem; height: 0.938rem; vertical-align: 0; color: var(--ak-dim); }
.ak-cmdbar { display: grid; grid-template-columns: repeat(4, var(--ak-cell)); gap: 2px; align-content: center; padding-left: 0.625rem; border-left: 1px solid var(--ak-line); }
.ak-bar { height: 4px; border-radius: 2px; background: var(--ak-panel-3); overflow: hidden; }
.ak-bar > i { display: block; height: 100%; background: var(--ak-accent); border-radius: 2px; }

/* ----------------------------------------------------------- misc text */
.ak-h { font-family: var(--ak-serif); font-weight: 400; line-height: 1.1; letter-spacing: -.005em; margin: 0; }
.ak-h1 { font-size: 2.6em; } .ak-h2 { font-size: 1.7em; } .ak-h3 { font-size: 1.2em; }
.ak-kicker { font-size: .78em; letter-spacing: .14em; text-transform: uppercase; color: var(--ak-dim); }
.ak-dimtext { color: var(--ak-dim); }
.ak-section { margin: 0 0 1rem; }
.ak-section > .ak-kicker { display: block; margin: 0 0 0.5rem; }
.ak-hr { height: 1px; background: var(--ak-line); border: 0; margin: 0.875rem 0; }
.ak-kbd { display: inline-block; min-width: 1.125rem; padding: 0 5px; border: 1px solid var(--ak-line-2); border-bottom-width: 2px; border-radius: 4px; font: 600 0.688rem/1.6 var(--ak-font); color: var(--ak-dim); text-align: center; }
.ak-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.375rem; }
.ak-list li { display: flex; gap: 0.625rem; align-items: center; padding: 0.5rem 0.625rem; border-radius: var(--ak-r-sm); background: var(--ak-panel-2); border: 1px solid var(--ak-line); }
.ak-list li .ak-ic { width: 1.125rem; height: 1.125rem; vertical-align: 0; color: var(--ak-icon); }
.ak-list li .ak-grow { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- hero */
.ak-hero { position: relative; overflow: hidden; background: var(--ak-bg); }
.ak-hero .ak-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ak-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(23, 23, 26, .92) 0, rgba(23, 23, 26, .55) 38%, rgba(23, 23, 26, .15) 70%, rgba(23, 23, 26, .5) 100%), linear-gradient(to top, rgba(23, 23, 26, .9), transparent 40%); }
.ak-hero > .ak-hero-inner { position: relative; z-index: 1; }
/* slow drift on the hero image; respects reduced motion */
.ak-hero--drift .ak-art { animation: ak-drift 40s ease-in-out infinite alternate; transform-origin: 60% 50%; }
@keyframes ak-drift { from { transform: scale(1.04) translateX(0) } to { transform: scale(1.1) translateX(-2%) } }

/* ------------------------------------------------- scrollbars & focus */
.ak ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
.ak ::-webkit-scrollbar-track { background: transparent; }
.ak ::-webkit-scrollbar-thumb { background: var(--ak-line-2); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
.ak ::-webkit-scrollbar-thumb:hover { background: var(--ak-dim); background-clip: padding-box; }
.ak * { scrollbar-width: thin; scrollbar-color: var(--ak-line-2) transparent; }
.ak :focus { outline: none; }
.ak :focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 2px; border-radius: var(--ak-r-sm); }
.ak img { user-select: none; -webkit-user-drag: none; }

/* --------------------------------------------------------- responsive */
@media (max-width: 68.75rem) {
  .ak-selcard { min-height: 5.75rem; }
  .ak-sel-portrait { width: 4.5rem; }
  .ak-res { padding: 0 0.438rem 0 0.375rem; gap: 5px; }
  .ak-res small, .ak-res--optional { display: none; }
  .ak-sep { margin: 0 3px; }
  .ak-topzone { left: 8.75rem; right: 8.75rem; }
  .ak.has-drawer .ak-topzone { right: calc(var(--ak-drawer-w) + 8.75rem); }
}
@media (max-height: 40rem) {
  .ak-rail { top: auto; transform: none; bottom: 0.75rem; }
  .ak-rail--right { bottom: 0.75rem; }
  .ak-minimap { width: 8.125rem; }
  .ak-drawer-body { padding: 0.625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ak *, .ak *::before, .ak *::after { animation: none !important; transition: none !important; }
}