/* EU Ruins unified site shell — responsive navigation, ultrawide scale,
   interaction polish and shared motion. Loaded last by site-nav.js so every
   live page uses the same header contract regardless of its inline CSS. */

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  background: var(--eu-shell-base);
}

/* The navigation shell is prepared before the body is parsed. This curtain
   keeps late fonts, legacy page CSS and the rebuilt account header behind one
   stable frame, then crossfades once their geometry is final. */
html::before,
html::after {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}

html::before {
  content: "";
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--eu-shell-accent) 13%, var(--eu-shell-base)), var(--eu-shell-base) 62%),
    var(--eu-shell-base);
}

html::after {
  content: "";
  top: 50%;
  left: 50%;
  width: clamp(130px, 12vw, 220px);
  height: 2px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--eu-shell-accent), var(--eu-shell-accent-2), transparent);
  box-shadow: 0 0 24px var(--eu-shell-glow);
}

html.eu-shell-booting::before,
html.eu-shell-booting::after,
html.eu-page-leaving::before,
html.eu-page-leaving::after {
  opacity: 1;
}

html.eu-shell-booting,
html.eu-page-leaving {
  cursor: progress;
}

html.eu-shell-booting body,
html.eu-page-leaving body {
  pointer-events: none;
}

body.site-polished {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* One header, on every page. */

/* A bare .logo is a flex box, and flex drops the trailing space in
   "EU <span>RUINS</span>", which rendered as "EURUINS". pre keeps it.
   (.logo-text spaces its two words with a flex gap instead.) */

.site-profile-chip {
  flex: 0 0 auto !important;
  width: clamp(300px, 18vw, 420px) !important;
  max-width: min(420px, 30vw) !important;
  min-height: clamp(46px, 2.7vw, 64px) !important;
  padding: clamp(6px, .38vw, 10px) !important;
  gap: clamp(5px, .3vw, 9px) !important;
  overflow: visible !important;
  border-color: rgba(var(--eu-shell-tint), .34) !important;
  border-radius: clamp(10px, .55vw, 16px) !important;
  background: linear-gradient(155deg, rgba(var(--eu-shell-tint), .12), rgba(var(--eu-shell-panel), .94)) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .3), inset 0 0 24px rgba(var(--eu-shell-tint), .035) !important;
}

.site-profile-currencies {
  gap: clamp(4px, .26vw, 8px) !important;
}

.site-profile-currency {
  min-width: 0 !important;
  min-height: clamp(30px, 1.7vw, 42px) !important;
  padding: 5px clamp(7px, .42vw, 12px) !important;
  border-color: color-mix(in srgb, var(--eu-shell-accent-2) 32%, transparent) !important;
  border-radius: clamp(7px, .36vw, 10px) !important;
  font-size: clamp(.69rem, .42vw, .88rem) !important;
}

.site-profile-currency i {
  width: clamp(15px, .8vw, 22px) !important;
  height: clamp(15px, .8vw, 22px) !important;
}

.site-profile-person,
.site-profile-identity {
  min-width: 0 !important;
  max-width: clamp(96px, 9vw, 190px) !important;
}

.site-profile-identity {
  min-height: clamp(34px, 1.9vw, 46px) !important;
  padding: 3px 4px 3px clamp(8px, .45vw, 13px) !important;
  border-radius: clamp(7px, .36vw, 10px) !important;
}

.site-profile-identity strong {
  font-size: clamp(.78rem, .46vw, .98rem) !important;
}

.site-profile-avatar {
  width: clamp(28px, 1.45vw, 42px) !important;
  height: clamp(28px, 1.45vw, 42px) !important;
  flex-basis: clamp(28px, 1.45vw, 42px) !important;
  border-radius: clamp(6px, .32vw, 9px) !important;
}

/* Real ultrawide layouts: use the screen and let cards grow with it. */
@media (min-width: 1700px) {
  html body.site-polished > main:not(.stage),
  body.site-polished .wrap,
  body.site-polished .shell,
  body.site-polished main.main,
  body.site-polished main.page,
  body.site-polished main.main-content,
  body.site-polished main.page-content,
  body.site-polished > .page-content > .container,
  body.site-polished > .container,
  body.site-polished .hero > .container,
  body.site-polished .page-hero > .container,
  body.site-polished .page-content > .container,
  body.site-polished main > .container,
  body.site-polished .main > .container,
  body.site-polished .page > .container {
    width: min(var(--eu-shell-max), calc(100vw - (var(--eu-shell-gutter) * 2))) !important;
    max-width: var(--eu-shell-max) !important;
    margin-inline: auto !important;
  }

  /* Isle's later polish layer historically forced these pages back to a
     narrow 1220–1420px column. Keep enough specificity to make the shared
     wide-screen contract authoritative without touching mobile layouts. */
  html[data-game="isle"] body.site-polished > :is(
    main.patreon-page,
    main.population-page,
    main.main,
    main.page,
    main.main-content,
    main.shell,
    main:not([class])
  ) {
    width: min(var(--eu-shell-max), calc(100vw - (var(--eu-shell-gutter) * 2))) !important;
    max-width: var(--eu-shell-max) !important;
    margin-inline: auto !important;
  }

  html[data-game="isle"][data-page="isle-patreon"] body.site-polished .patreon-hero:not(.eu-page-hero),
  html[data-game="isle"][data-page="isle-population"] body.site-polished .population-hero:not(.eu-page-hero) {
    grid-template-columns: minmax(0, 2.25fr) minmax(440px, .75fr) !important;
  }

  html[data-game="isle"][data-page="isle-patreon"] body.site-polished .unlock-grid {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important;
  }

  html[data-game="isle"][data-page="leaderboard"] body.site-polished .container {
    width: min(var(--eu-shell-max), calc(100vw - (var(--eu-shell-gutter) * 2))) !important;
    max-width: var(--eu-shell-max) !important;
  }

  body.site-polished .panel,
  body.site-polished .admin-card,
  body.site-polished .game-card,
  body.site-polished .status-card,
  body.site-polished .wallet-card {
    border-radius: clamp(12px, .55vw, 18px);
  }
}

@media (min-width: 2300px) {
  body.site-polished {
    font-size: clamp(16px, .52vw, 19px);
  }
}

@media (max-width: 1500px) {
  .site-profile-currency { font-size: 0 !important; }
  .site-profile-currency b,
  .site-profile-currency strong { font-size: .72rem !important; }
  .site-profile-chip { width: 260px !important; }
}

@media (max-width: 1180px) {
  .site-profile-currencies { display: none !important; }
  .site-profile-chip { width: min(190px, 40vw) !important; max-width: min(190px, 40vw) !important; }
}

@media (max-width: 620px) {
  .site-profile-chip { max-width: 42px !important; padding: 5px !important; }
  /* Logged out there is no avatar, just the Login button: let it fit. */
  .site-profile-chip.is-logged-out { max-width: none !important; width: auto !important; }
  .site-profile-chip.is-logged-out .site-profile-login { font-size: 12px !important; padding: 0 9px !important; }
  .site-profile-person,
  .site-profile-identity { width: 30px !important; max-width: 30px !important; }
  .site-profile-identity { padding: 0 !important; border: 0 !important; background: transparent !important; }
  .site-profile-identity strong { display: none !important; }
}

@keyframes euNavReveal {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* Shared interactions. Keep them quick and tactile, never floaty. */
body.site-polished :is(button, .btn, .abtn, [role="button"], input[type="button"], input[type="submit"], .site-profile-menu-item) {
  transition: transform .14s var(--eu-shell-ease), border-color .2s var(--eu-shell-ease), background-color .2s var(--eu-shell-ease), color .2s var(--eu-shell-ease), box-shadow .2s var(--eu-shell-ease), opacity .2s ease !important;
}

body.site-polished :is(button, .btn, .abtn, [role="button"], input[type="button"], input[type="submit"]):not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

body.site-polished :is(button, .btn, .abtn, [role="button"], input[type="button"], input[type="submit"]):not(:disabled):active {
  transform: translateY(0) scale(.975) !important;
  transition-duration: .07s !important;
}

body.site-polished :is(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--eu-shell-accent) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--eu-shell-accent) 16%, transparent) !important;
}

body.site-polished :is(button, input[type="submit"], .btn).eu-is-busy {
  cursor: progress !important;
  opacity: .72 !important;
  pointer-events: none !important;
}

.eu-click-ripple {
  position: absolute;
  z-index: 20;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .5), color-mix(in srgb, var(--eu-shell-accent) 30%, transparent) 45%, transparent 70%);
  pointer-events: none;
  animation: euRippleOut .48s var(--eu-shell-ease) forwards;
}

@keyframes euRippleOut {
  from { opacity: .8; transform: scale(.4); }
  to { opacity: 0; transform: scale(7); }
}

#eu-page-transition { display: none !important; }

#euruins-sound-toggle {
  position: fixed;
  z-index: 99990;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--eu-shell-accent) 36%, transparent);
  border-radius: 12px;
  color: var(--eu-shell-text-3);
  background: rgba(var(--eu-shell-panel), .9);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .34), inset 0 0 18px color-mix(in srgb, var(--eu-shell-accent) 7%, transparent);
  font: 900 17px/1 system-ui;
  cursor: pointer;
  backdrop-filter: blur(14px);
}

#euruins-sound-toggle:hover {
  border-color: var(--eu-shell-accent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .36), 0 0 20px var(--eu-shell-glow);
}

#euruins-sound-toggle[data-enabled="false"] {
  opacity: .52;
  filter: saturate(.25);
}

/* Docked by site-sounds.js: in the header beside search, or as the last row
   of the phone/tablet Menu panel. */
#euruins-sound-toggle.is-docked {
  position: static;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  box-shadow: none;
  backdrop-filter: none;
  font-size: 15px;
}
#euruins-sound-toggle.is-in-menu {
  grid-column: 1 / -1;
  width: 100%;
  height: 43px;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px;
  white-space: pre;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Logged out the chip holds only the Login button; the fixed widths above are
   sized for avatar + balances and leave an empty frame. */
.site-profile-chip.is-logged-out { width: auto !important; min-width: 0 !important; max-width: none !important; }

/* ===== Grouped navigation (Shop / Play / Community dropdowns, site-nav.js) ===== */
/* Invisible bridge so the menu stays open while the pointer crosses the gap. */
@media (max-width: 1180px) {
  /* In the Menu panel every group is shown expanded under its own label. */
}
@media (max-width: 620px) {
  /* Two columns throughout the phone Menu panel, so the direct links and the
     grouped ones line up. */
}

/* ===== Isle page shell: one width, one footer, shared utilities =====
   Below 1700px every Isle content page (not the full-screen map) sits in the
   same column, so headers, panels and the footer share the same edges. From
   1700px up the ultrawide rules above own the width (they size main *and* its
   inner .wrap/.container to the screen), so this column must not apply there:
   capping main alone left the inner wrapper screen-wide and pushed the page
   off the right edge. */
@media (max-width: 1699px) {
  html[data-game="isle"]:is([data-page^="isle-"], [data-page="player"]) body > main:is(.main, .page, .events-page, .patreon-page, .population-page):not(.map-page),
  html[data-game="isle"]:is([data-page^="isle-"], [data-page="player"]) body > main:not([class]) {
    width: 100%;
    max-width: var(--eu-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--eu-page-pad) !important;
    padding-right: var(--eu-page-pad) !important;
    box-sizing: border-box;
  }
  html[data-game="isle"]:is([data-page^="isle-"], [data-page="player"]) body > main .wrap { max-width: none; }
}
/* The footer follows the same width as the page above it. */
@media (min-width: 1700px) {
  :root { --eu-page-max: min(var(--eu-shell-max), calc(100vw - (var(--eu-shell-gutter) * 2))); }
  .eu-site-footer-inner,
  .eu-site-footer-base { padding-left: 0; padding-right: 0; }
}

/* Calmer panels: one radius for panels, one for controls. Pills, chips and
   badges stay fully rounded; .card is left alone because the casino pages use
   it for playing cards; checkboxes, radios and sliders keep their own shape. */
html[data-game="isle"]:is([data-page^="isle-"], [data-page="player"]) body > main :is(.panel, .hub-panel) {
  border-radius: var(--eu-r-lg);
}
html[data-game="isle"]:is([data-page^="isle-"], [data-page="player"]) body > main :is(.btn, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])) {
  border-radius: var(--eu-r-sm);
}

/* Type scale: page title, section title, sub-heading, small print. */
html[data-game="isle"]:is([data-page^="isle-"], [data-page="player"]) body > main h1 {
  font-family: var(--eu-font-title);
  font-size: var(--eu-fs-xl);
  line-height: 1.05;
  letter-spacing: .02em;
}
:where(html[data-game="isle"]:is([data-page^="isle-"], [data-page="player"]) body > main) h2 {
  font-family: var(--eu-font-head);
  font-size: var(--eu-fs-lg);
  line-height: 1.15;
}
:where(html[data-game="isle"]:is([data-page^="isle-"], [data-page="player"]) body > main) h3 {
  font-family: var(--eu-font-head);
  font-size: var(--eu-fs-md);
  line-height: 1.2;
}

/* Layout utilities used in place of inline style="" attributes. */
.u-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--eu-space-3); flex-wrap: wrap; }
.u-row { display: flex; align-items: center; gap: var(--eu-space-2); flex-wrap: wrap; }
.u-mt-1 { margin-top: var(--eu-space-2) !important; }
.u-mt-2 { margin-top: var(--eu-space-3) !important; }
.u-mt-3 { margin-top: var(--eu-space-4) !important; }
.u-mt-4 { margin-top: var(--eu-space-5) !important; }
.u-mb-1 { margin: 0 0 var(--eu-space-2) !important; }
.u-text-md { font-size: var(--eu-fs-md) !important; }
.u-stack-sm > * + * { margin-top: var(--eu-space-2); }
.u-stack-md > * + * { margin-top: var(--eu-space-4); }

/* Shared footer built by site-nav.js (buildIsleFooter). */
.eu-site-footer {
  margin-top: var(--eu-space-7);
  border-top: 1px solid var(--eu-hairline);
  background: color-mix(in srgb, var(--eu-bg-0, #04090d) 80%, transparent);
  color: var(--eu-text-dim);
  font-family: var(--eu-font-body);
  font-size: var(--eu-fs-sm);
}
.eu-site-footer-inner {
  max-width: var(--eu-page-max);
  margin: 0 auto;
  padding: var(--eu-space-6) var(--eu-page-pad) var(--eu-space-5);
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--eu-space-5);
  box-sizing: border-box;
}
.eu-site-footer-brand { display: flex; flex-direction: column; gap: var(--eu-space-2); }
.eu-site-footer-brand strong { font-family: var(--eu-font-head); font-size: var(--eu-fs-md); letter-spacing: .08em; color: var(--eu-text); }
.eu-site-footer-brand strong span { color: var(--eu-accent); }
.eu-site-footer-col { display: flex; flex-direction: column; gap: var(--eu-space-2); }
.eu-site-footer-col h2 {
  margin: 0 0 var(--eu-space-1);
  font-family: var(--eu-font-head);
  font-size: var(--eu-fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eu-text-mute);
}
.eu-site-footer-col a { color: var(--eu-text-dim); text-decoration: none; width: fit-content; }
.eu-site-footer-col a:hover,
.eu-site-footer-col a:focus-visible { color: var(--eu-accent); }
.eu-site-footer-base {
  max-width: var(--eu-page-max);
  margin: 0 auto;
  padding: var(--eu-space-4) var(--eu-page-pad) var(--eu-space-5);
  border-top: 1px solid var(--eu-hairline);
  display: flex;
  justify-content: space-between;
  gap: var(--eu-space-4);
  flex-wrap: wrap;
  color: var(--eu-text-mute);
  font-size: var(--eu-fs-xs);
  box-sizing: border-box;
}
.eu-site-footer-base p { margin: 0; }
.eu-site-footer-note { max-width: 70ch; }
@media (max-width: 860px) {
  .eu-site-footer-inner { grid-template-columns: repeat(2, 1fr); }
  .eu-site-footer-brand { grid-column: 1 / -1; }
}

/* ===== Page title block (.eu-page-hero) =====
   Every Isle page opens the same way: small label, title, one-line intro on
   the left, an optional status card on the right, then a hairline. No card
   behind the title, so the first real panel is the first thing that pops. */
html[data-game="isle"] body .eu-page-hero.eu-page-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--eu-space-5);
  margin: 0 0 var(--eu-space-5) !important;
  padding: var(--eu-space-6) 0 var(--eu-space-5) !important;
  min-height: 0 !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--eu-hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-game="isle"] body .eu-page-hero.eu-page-hero::before,
html[data-game="isle"] body .eu-page-hero.eu-page-hero::after { display: none !important; }
html[data-game="isle"] body .eu-page-hero.eu-page-hero > :first-child {
  min-width: 0;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-game="isle"] body .eu-page-hero.eu-page-hero .eyebrow {
  margin: 0 0 var(--eu-space-2) !important;
  font-size: var(--eu-fs-xs) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--eu-accent) !important;
}
html[data-game="isle"] body .eu-page-hero.eu-page-hero h1 {
  margin: 0 !important;
  font-size: var(--eu-fs-xl) !important;
}
html[data-game="isle"] body .eu-page-hero.eu-page-hero :is(.lead, .sub, .subtitle) {
  max-width: 64ch;
  margin: var(--eu-space-2) 0 0 !important;
  font-size: var(--eu-fs-base) !important;
  line-height: 1.55;
}
/* The right-hand card (status, stats, supporter state) keeps one size. */
html[data-game="isle"] body .eu-page-hero.eu-page-hero > :not(:first-child) {
  min-width: 240px;
  max-width: 560px;
  margin: 0 !important;
  border-radius: var(--eu-r-lg) !important;
}
@media (max-width: 760px) {
  html[data-game="isle"] body .eu-page-hero.eu-page-hero {
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: var(--eu-space-5) !important;
  }
  html[data-game="isle"] body .eu-page-hero.eu-page-hero > :not(:first-child) { max-width: none; min-width: 0; }
}

/* ===== Section tabs (.eu-section-tabs) =====
   Pages that belong together (Community: LFG / Roadmap / Packs; Events: This
   week / Hall of Fame) share one tab row so they read as one section. */
html[data-game="isle"] .eu-section-tabs {
  display: flex;
  gap: var(--eu-space-1);
  margin: calc(var(--eu-space-5) * -1 + var(--eu-space-2)) 0 var(--eu-space-5) !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--eu-hairline);
  overflow-x: auto;
  scrollbar-width: none;
}
/* Events lays its sections out in a grid with a 22px gap; pull its tab row
   up by that much more so it sits as close to the title as on other pages. */
html[data-game="isle"] .events-page > .eu-section-tabs {
  margin-top: calc(var(--eu-space-2) - var(--eu-space-5) - 22px) !important;
}
html[data-game="isle"] body .eu-section-tabs.eu-section-tabs > :is(a, button) {
  position: relative;
  flex: none;
  margin: 0 !important;
  padding: var(--eu-space-3) var(--eu-space-4) !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--eu-text-dim) !important;
  font: 700 var(--eu-fs-sm) var(--eu-font-head) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
html[data-game="isle"] body .eu-section-tabs.eu-section-tabs > :is(a, button):hover { color: var(--eu-text) !important; }
html[data-game="isle"] body .eu-section-tabs.eu-section-tabs > :is(a, button).active {
  color: var(--eu-accent) !important;
}
html[data-game="isle"] body .eu-section-tabs.eu-section-tabs > :is(a, button).active::after {
  content: "";
  position: absolute;
  left: var(--eu-space-3);
  right: var(--eu-space-3);
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--eu-accent);
}

/* ===== Empty, loading and error states (.eu-empty) =====
   One look for "nothing here yet": centred, quiet, with an optional link. */
.eu-empty {
  display: grid;
  justify-items: center;
  gap: var(--eu-space-2);
  padding: var(--eu-space-6) var(--eu-space-4);
  text-align: center;
  color: var(--eu-text-dim);
  font-size: var(--eu-fs-sm);
  border: 1px dashed var(--eu-hairline-2);
  border-radius: var(--eu-r-md);
  grid-column: 1 / -1;
}
.eu-empty strong { color: var(--eu-text); font-size: var(--eu-fs-base); font-family: var(--eu-font-head); letter-spacing: .02em; }
.eu-empty a { color: var(--eu-accent); text-decoration: none; font-weight: 600; }
.eu-empty a:hover { text-decoration: underline; }
.eu-empty.is-error { border-color: color-mix(in srgb, var(--eu-bad) 40%, transparent); }
.eu-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--eu-space-2);
  vertical-align: -2px;
  border: 2px solid var(--eu-hairline-2);
  border-top-color: var(--eu-accent);
  border-radius: 50%;
  animation: eu-spin .8s linear infinite;
}
@keyframes eu-spin { to { transform: rotate(360deg); } }
/* The pages' own .empty / .empty-state boxes take the same look. */
html[data-game="isle"]:is([data-page^="isle-"], [data-page="player"]) body > main :is(.empty, .empty-state) {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--eu-space-2);
  padding: var(--eu-space-6) var(--eu-space-4) !important;
  text-align: center;
  color: var(--eu-text-dim) !important;
  font-size: var(--eu-fs-sm) !important;
  background: none !important;
  border: 1px dashed var(--eu-hairline-2) !important;
  border-radius: var(--eu-r-md) !important;
  grid-column: 1 / -1;
}
html[data-game="isle"]:is([data-page^="isle-"], [data-page="player"]) body > main :is(.empty, .empty-state).is-error {
  border-color: color-mix(in srgb, var(--eu-bad) 45%, transparent) !important;
}
html[data-game="isle"]:is([data-page^="isle-"], [data-page="player"]) body > main :is(.empty, .empty-state) strong {
  color: var(--eu-text);
  font-family: var(--eu-font-head);
  font-size: var(--eu-fs-base);
}
.eu-retry {
  margin-top: var(--eu-space-1);
  padding: 6px 14px;
  border: 1px solid var(--eu-accent-line);
  border-radius: var(--eu-r-sm);
  background: var(--eu-accent-soft);
  color: var(--eu-text);
  font: 600 var(--eu-fs-sm) var(--eu-font-body);
  cursor: pointer;
}
.eu-retry:hover { border-color: var(--eu-accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .eu-click-ripple { display: none !important; }
}