:root {
  --bg: #07070a;
  --panel: #101016;
  --panel-soft: #15151e;
  --text: #f6f4fb;
  --muted: #b5b0bf;
  --line: #2b2934;
  --purple: #a98bf3;
  --purple-bright: #cbb8ff;
  --lavender: #ded4ff;
  --peach: #f3b68c;
  --rose: #d98ba7;
  --focus: #f6e27a;
  --max: 1180px;
  --radius: 20px;
  --radius-small: 12px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 12%, rgba(169, 139, 243, 0.12), transparent 26rem),
    radial-gradient(circle at 10% 90%, rgba(243, 182, 140, 0.08), transparent 24rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.15;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 100% 4px;
  mix-blend-mode: screen;
}

a { color: inherit; }

img, svg { display: block; max-width: 100%; }

button, input, textarea, select { font: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  transform: translateY(-180%);
  z-index: 999;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 800;
}

.skip-link:focus { transform: translateY(0); }

.site-shell {
  width: min(calc(100% - 2rem), var(--max));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1rem 0;
  background: linear-gradient(to bottom, rgba(7,7,10,0.96), rgba(7,7,10,0.78), transparent);
  backdrop-filter: blur(12px);
}

.nav-frame {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
}

.lcars-cap {
  width: 62px;
  height: 52px;
  border-radius: 30px 0 0 30px;
  background: linear-gradient(135deg, var(--purple), var(--rose));
}

.brand {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  border-left: 8px solid var(--purple);
  border-radius: 0 12px 12px 0;
  background: rgba(16, 16, 22, 0.9);
  text-decoration: none;
  box-shadow: var(--shadow);
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lavender);
  color: #121018;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.brand-copy { line-height: 1.05; }
.brand-name { display: block; font-size: 0.96rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.brand-role { display: block; margin-top: 0.28rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

.nav-toggle {
  display: none;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.site-nav ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 0.72rem 0.82rem;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: var(--purple);
  color: #0d0b12;
}

main { overflow: clip; }

.hero {
  min-height: 74vh;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(4rem, 10vw, 8rem) 0 5rem;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 1rem;
  color: var(--purple-bright);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 46px;
  height: 8px;
  border-radius: 999px;
  background: var(--peach);
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 850px;
  margin-bottom: 1.35rem;
  font-size: clamp(3rem, 8vw, 7.2rem);
  line-height: 0.92;
  letter-spacing: -0.065em;
}

h1 .accent { color: var(--purple-bright); }

.lede {
  max-width: 690px;
  margin-bottom: 2rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.button-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 50px;
  padding: 0.8rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--purple);
  color: #0d0b12;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.button:hover { background: var(--purple-bright); transform: translateY(-1px); }
.button.secondary { border-color: var(--line); background: transparent; color: var(--text); }
.button.secondary:hover { border-color: var(--purple); background: rgba(169,139,243,0.08); }
.button.small { min-height: 42px; padding: 0.65rem 1rem; font-size: 0.9rem; }

.status-console {
  position: relative;
  min-height: 420px;
  padding: 1rem 1rem 1rem 2.25rem;
  border: 1px solid var(--line);
  border-radius: 44px 18px 18px 44px;
  background: rgba(16, 16, 22, 0.86);
  box-shadow: var(--shadow);
}

.status-console::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 25px;
  border-radius: 44px 0 0 44px;
  background: linear-gradient(to bottom, var(--purple) 0 37%, transparent 37% 42%, var(--peach) 42% 74%, transparent 74% 79%, var(--rose) 79% 100%);
}

.console-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.25rem 1.15rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.console-grid { display: grid; gap: 0.8rem; padding-top: 1rem; }

.console-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-soft);
}

.console-label { color: var(--muted); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.console-value { font-weight: 800; }

.console-bars { display: grid; grid-template-columns: 1.6fr 1fr 0.55fr; gap: 0.45rem; margin-top: 1rem; }
.console-bars span { height: 16px; border-radius: 999px; }
.console-bars span:nth-child(1) { background: var(--purple); }
.console-bars span:nth-child(2) { background: var(--peach); }
.console-bars span:nth-child(3) { background: var(--rose); }

.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section.compact { padding-top: 2rem; }

.section-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: end;
  margin-bottom: 2.4rem;
}

.section-code {
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: var(--peach);
  color: #1a1110;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.section-heading h2 {
  margin-bottom: 0;
  font-size: clamp(2rem, 5vw, 4.3rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.section-intro { max-width: 760px; color: var(--muted); font-size: 1.08rem; }

.services-grid,
.project-grid,
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.card {
  position: relative;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(21,21,30,0.96), rgba(13,13,18,0.96));
  box-shadow: 0 16px 45px rgba(0,0,0,0.2);
}

.card::after {
  content: "";
  position: absolute;
  left: 1.35rem;
  right: 1.35rem;
  bottom: 0;
  height: 5px;
  border-radius: 999px 999px 0 0;
  background: var(--purple);
  opacity: 0.85;
}

.card:nth-child(2)::after { background: var(--peach); }
.card:nth-child(3)::after { background: var(--rose); }

.card-kicker { color: var(--purple-bright); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.card h3 { margin: 0.55rem 0 0.7rem; font-size: 1.45rem; }
.card p { color: var(--muted); }
.card p:last-child { margin-bottom: 0.4rem; }

.project-card {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  justify-content: space-between;
}

.project-visual {
  min-height: 150px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(135deg, transparent 0 32%, rgba(169,139,243,0.22) 32% 36%, transparent 36% 64%, rgba(243,182,140,0.16) 64% 69%, transparent 69%),
    #0d0d12;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.tag { padding: 0.35rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.74rem; font-weight: 750; }

.split-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: stretch;
}

.lcars-rail {
  min-height: 440px;
  display: grid;
  grid-template-rows: 1.5fr 0.15fr 0.8fr 0.15fr 1fr;
  gap: 0.55rem;
}

.lcars-rail span { border-radius: 22px 0 0 22px; }
.lcars-rail span:nth-child(1) { background: var(--purple); }
.lcars-rail span:nth-child(2) { background: transparent; }
.lcars-rail span:nth-child(3) { background: var(--peach); }
.lcars-rail span:nth-child(4) { background: transparent; }
.lcars-rail span:nth-child(5) { background: var(--rose); }

.copy-panel {
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--panel);
}

.copy-panel h2 { margin-bottom: 1rem; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.045em; }
.copy-panel p { color: var(--muted); font-size: 1.05rem; }

.cta-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: 38px 16px 16px 38px;
  background: linear-gradient(100deg, rgba(169,139,243,0.14), rgba(16,16,22,0.98) 45%);
  box-shadow: var(--shadow);
}

.cta-panel h2 { margin-bottom: 0.65rem; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.04em; }
.cta-panel p { max-width: 720px; margin-bottom: 0; color: var(--muted); }

.page-hero { padding: clamp(5rem, 11vw, 9rem) 0 4rem; }
.page-hero h1 { max-width: 980px; font-size: clamp(3.2rem, 8vw, 6.8rem); }
.page-hero .lede { max-width: 780px; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.4rem; }
.filter-button {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
  cursor: pointer;
}
.filter-button:hover,
.filter-button.active { border-color: var(--purple); background: var(--purple); color: #0e0b12; }

.project-card[hidden] { display: none; }

.resume-layout {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 1rem;
}

.resume-sidebar,
.resume-main {
  padding: clamp(1.25rem, 4vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.resume-section + .resume-section { margin-top: 2.4rem; }
.resume-section h2 { padding-bottom: 0.65rem; border-bottom: 1px solid var(--line); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; }
.resume-list { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.resume-list li + li { margin-top: 0.5rem; }
.resume-item + .resume-item { margin-top: 2rem; }
.resume-item h3 { margin-bottom: 0.3rem; }
.resume-meta { color: var(--purple-bright); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 1rem;
}

.contact-info,
.contact-form {
  padding: clamp(1.25rem, 4vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.contact-info p { color: var(--muted); }
.contact-detail { display: block; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.contact-detail span { display: block; color: var(--muted); font-size: 0.74rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-detail a { display: inline-block; margin-top: 0.35rem; color: var(--purple-bright); font-weight: 800; overflow-wrap: anywhere; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field { display: grid; gap: 0.45rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { color: var(--muted); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0d0d12;
  color: var(--text);
  padding: 0.85rem 0.95rem;
}
.form-field textarea { min-height: 170px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--purple); outline: none; box-shadow: 0 0 0 3px rgba(169,139,243,0.16); }
.form-note { margin: 1rem 0 0; color: var(--muted); font-size: 0.86rem; }
.form-status { min-height: 1.6rem; margin: 0.8rem 0 0; color: var(--purple-bright); font-weight: 750; }

.site-footer { padding: 2rem 0 3rem; }
.footer-frame {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}
.footer-bar { height: 12px; border-radius: 999px; background: linear-gradient(to right, var(--purple) 0 55%, transparent 55% 58%, var(--peach) 58% 82%, transparent 82% 85%, var(--rose) 85%); }
.footer-links { display: flex; gap: 1rem; }
.footer-links a:hover { color: var(--text); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 560ms ease, transform 560ms ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .nav-frame { grid-template-columns: auto 1fr auto; }
  .lcars-cap { width: 34px; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .site-nav { position: absolute; top: calc(100% - 0.35rem); right: 1rem; left: 1rem; display: none; padding: 0.75rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(16,16,22,0.98); box-shadow: var(--shadow); }
  .site-nav.open { display: block; }
  .site-nav ul { align-items: stretch; flex-direction: column; }
  .site-nav a { border-radius: 10px; }
  .hero, .split-panel, .resume-layout, .contact-layout { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .status-console { min-height: auto; }
  .lcars-rail { display: none; }
  .copy-panel { border-radius: var(--radius); }
  .services-grid, .project-grid, .value-grid { grid-template-columns: 1fr 1fr; }
  .cta-panel { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .site-shell { width: min(calc(100% - 1rem), var(--max)); }
  .site-header { padding-top: 0.5rem; }
  .lcars-cap { display: none; }
  .nav-frame { grid-template-columns: 1fr auto; }
  .brand-role { display: none; }
  .services-grid, .project-grid, .value-grid, .form-grid { grid-template-columns: 1fr; }
  .section-heading { grid-template-columns: 1fr; }
  .status-console { border-radius: 28px 14px 14px 28px; }
  .console-row { grid-template-columns: 1fr; gap: 0.2rem; }
  .cta-panel { border-radius: 28px 14px 14px 28px; }
  .footer-frame { grid-template-columns: 1fr; }
  .footer-links { flex-wrap: wrap; }
}


/* Portfolio project additions */
.project-title-link { color: var(--text); text-decoration: none; }
.project-title-link:hover { color: var(--purple-bright); }
.text-link { display: inline-flex; gap: 0.45rem; margin-top: 1rem; color: var(--purple-bright); font-weight: 850; text-decoration: none; }
.text-link:hover { color: var(--text); }
.portfolio-more { margin-top: 1.4rem; }
.project-visual.image-cover { padding: 0; background: #0d0d12; }
.project-visual.image-cover img { width: 100%; height: 100%; min-height: 185px; object-fit: cover; }
.project-visual.text-cover { min-height: 185px; align-content: end; justify-items: start; gap: 0.35rem; padding: 1.25rem; text-align: left; text-transform: none; }
.project-visual.text-cover span { color: rgba(255,255,255,0.72); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.project-visual.text-cover strong { max-width: 95%; color: #fff; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 0.98; letter-spacing: -0.035em; }
.cover-stained { background: radial-gradient(circle at 75% 20%, rgba(217,139,167,0.42), transparent 32%), linear-gradient(145deg,#30141b,#0d0d12 68%); }
.cover-harbinger { background: radial-gradient(circle at 78% 18%, rgba(203,184,255,0.33), transparent 28%), linear-gradient(145deg,#101a29,#09090d 68%); }
.cover-chuck { background: radial-gradient(circle at 75% 20%, rgba(243,182,140,0.35), transparent 32%), linear-gradient(145deg,#233326,#0b0e0c 68%); }
.cover-timber { background: radial-gradient(circle at 75% 20%, rgba(169,139,243,0.35), transparent 32%), linear-gradient(145deg,#19291c,#090c0a 68%); }

.project-hero { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); gap: clamp(2rem,6vw,5rem); align-items: end; padding: clamp(5rem,11vw,9rem) 0 4rem; }
.project-hero h1 { max-width: 900px; margin-bottom: 1.2rem; font-size: clamp(3rem,8vw,6.6rem); line-height: .92; letter-spacing: -.06em; }
.project-facts { margin: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.project-facts div { display: grid; gap: .2rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.project-facts div:last-child { border-bottom: 0; }
.project-facts dt { color: var(--muted); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.project-facts dd { margin: 0; font-weight: 800; }
.project-detail-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); gap: 1rem; align-items: start; }
.project-media, .project-copy { padding: clamp(1rem,3vw,1.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.project-media .project-visual { min-height: min(58vw,620px); margin: 0; }
.project-media .project-visual.image-cover img { min-height: min(58vw,620px); object-fit: contain; background: #08080b; }
.video-media { padding: .75rem; }
.video-media video { display: block; width: 100%; border-radius: 14px; background: #000; }
.project-copy h2 { margin-bottom: 1rem; font-size: clamp(2rem,5vw,3.5rem); line-height: 1; letter-spacing: -.04em; }
.project-copy h3 { margin-top: 2rem; }
.project-copy p, .feature-list { color: var(--muted); }
.feature-list { padding-left: 1.2rem; }
.feature-list li + li { margin-top: .6rem; }
.project-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  .project-hero, .project-detail-grid { grid-template-columns: 1fr; }
  .project-media .project-visual, .project-media .project-visual.image-cover img { min-height: auto; }
}


/* Embedded video and audio portfolio media */
.embed-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  aspect-ratio: 16 / 9;
}
.embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.audio-media {
  display: grid;
  gap: 1rem;
}
.audio-media .project-visual {
  min-height: 300px;
}
.audio-media audio {
  display: block;
  width: 100%;
}
.waveform-cover img {
  object-fit: contain !important;
  background:
    radial-gradient(circle at 20% 15%, rgba(170, 150, 232, .18), transparent 36%),
    linear-gradient(145deg, #09090d, #11101a);
}
.cover-video-one {
  background:
    linear-gradient(135deg, rgba(169, 150, 232, .24), transparent 48%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 32px),
    #0a0a10;
}
.cover-video-two {
  background:
    radial-gradient(circle at 80% 20%, rgba(169, 150, 232, .26), transparent 34%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px),
    #0a0a10;
}
.spec-note {
  margin-top: 1.5rem;
  padding: .85rem 1rem;
  border-left: 4px solid var(--purple-bright);
  background: rgba(169, 150, 232, .07);
  color: var(--muted);
  font-size: .92rem;
}

/* Arcade landing page */
.arcade-hero { padding-bottom: 2rem; }
.arcade-hero h1 .accent { color: var(--purple-bright); }
.arcade-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 34px 16px 16px 34px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.arcade-cover {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-radius: 25px 10px 10px 25px;
  background:
    radial-gradient(circle at 75% 20%, rgba(169,139,243,.18), transparent 28%),
    radial-gradient(circle at 18% 78%, rgba(243,182,140,.13), transparent 25%),
    linear-gradient(145deg, #05050a, #100b20 58%, #07070c);
}
.arcade-stars,
.arcade-stars::before,
.arcade-stars::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(203,184,255,.65) 0 1px, transparent 1.5px);
  background-position: 0 0, 36px 48px;
  background-size: 78px 78px, 113px 113px;
}
.arcade-stars::before { transform: rotate(17deg) scale(1.15); opacity: .45; }
.arcade-stars::after { transform: rotate(-9deg) scale(1.3); opacity: .25; }
.arcade-planet {
  position: absolute;
  width: min(44vw, 380px);
  aspect-ratio: 1;
  right: -6%;
  bottom: -18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.76), transparent 7%),
    radial-gradient(circle at 38% 35%, #b69ce9, #5b397f 46%, #171020 72%);
  box-shadow: 0 0 80px rgba(169,139,243,.32);
}
.arcade-planet::after {
  content: "";
  position: absolute;
  inset: 40% -30%;
  border: 10px solid rgba(224,212,255,.24);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.arcade-ship {
  position: absolute;
  left: 25%;
  top: 34%;
  width: 90px;
  height: 32px;
  filter: drop-shadow(0 0 18px rgba(203,184,255,.75));
  transform: rotate(-14deg);
}
.arcade-ship::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(100% 50%, 14% 0, 34% 50%, 14% 100%);
  background: linear-gradient(90deg, #8d6ed7, #f2edf9);
}
.arcade-ship::after {
  content: "";
  position: absolute;
  left: -48px;
  top: 12px;
  width: 60px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--peach));
  filter: blur(1px);
}
.arcade-scanline {
  position: absolute;
  width: 230px;
  aspect-ratio: 1;
  left: calc(25% - 70px);
  top: calc(34% - 100px);
  border: 2px solid rgba(203,184,255,.28);
  border-radius: 50%;
  animation: arcade-pulse 3.2s ease-out infinite;
}
.arcade-cover-label {
  position: absolute;
  left: clamp(1.2rem, 4vw, 2.5rem);
  bottom: clamp(1.2rem, 4vw, 2.5rem);
  display: grid;
  gap: .35rem;
  max-width: 76%;
}
.arcade-cover-label span { color: var(--peach); font-size: .7rem; font-weight: 900; letter-spacing: .15em; }
.arcade-cover-label strong { font-size: clamp(2.2rem, 6vw, 5.6rem); line-height: .84; letter-spacing: -.055em; }
.arcade-feature-copy { align-self: center; padding: clamp(1.2rem, 4vw, 2.8rem); }
.arcade-feature-copy h2 { margin-bottom: 1rem; font-size: clamp(2.7rem, 5vw, 4.7rem); line-height: .92; letter-spacing: -.05em; }
.arcade-feature-copy p { color: var(--muted); }
.arcade-slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.arcade-slot { border-style: dashed; min-height: 220px; }

@keyframes arcade-pulse {
  from { opacity: .8; transform: scale(.15); }
  to { opacity: 0; transform: scale(1.5); }
}

/* Meridian Drift game */
.game-page { background: #050509; }
.game-main { overflow: visible; }
.game-titlebar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  padding: clamp(3.5rem, 8vw, 6rem) 0 2rem;
}
.game-titlebar h1 { margin-bottom: .75rem; font-size: clamp(3rem, 7vw, 6rem); }
.game-titlebar .lede { margin-bottom: 0; }
.game-title-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; padding-bottom: .6rem; }
.game-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 42px 18px 18px 42px;
  background: #0b0b11;
  box-shadow: 0 28px 90px rgba(0,0,0,.5);
}
.game-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 18px;
  border-radius: 42px 0 0 42px;
  background: linear-gradient(to bottom, var(--purple) 0 24%, transparent 24% 28%, var(--peach) 28% 54%, transparent 54% 58%, var(--rose) 58% 81%, transparent 81% 85%, var(--purple-bright) 85%);
}
.game-setup { position: relative; z-index: 2; padding: clamp(1.4rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3.4rem); }
.setup-heading { max-width: 780px; margin-bottom: 2rem; }
.setup-heading h2 { margin-bottom: .75rem; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .95; letter-spacing: -.045em; }
.setup-heading p:last-child { color: var(--muted); }
.setup-grid { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.1fr); gap: 1rem; }
.setup-panel { padding: clamp(1.1rem, 3vw, 1.7rem); border: 1px solid var(--line); border-radius: 18px; background: #101016; }
.game-label { display: block; margin: 0 0 .65rem; color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.game-input { width: 100%; margin-bottom: 1.5rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #09090e; color: var(--text); font-weight: 800; }
.game-input:focus { border-color: var(--purple); outline: 0; box-shadow: 0 0 0 3px rgba(169,139,243,.16); }
.doctrine-grid { display: grid; gap: .6rem; }
.doctrine-card {
  display: grid;
  gap: .25rem;
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b0b10;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.doctrine-card strong { color: var(--purple-bright); }
.doctrine-card span { color: var(--muted); font-size: .84rem; line-height: 1.4; }
.doctrine-card:hover,
.doctrine-card.selected { border-color: var(--purple); background: rgba(169,139,243,.09); }
.doctrine-card.selected { box-shadow: inset 5px 0 0 var(--purple); }
.cosmic-heading { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.cosmic-help { margin: 0; color: var(--muted); font-size: .86rem; }
.points-display { min-width: 78px; padding: .65rem .75rem; border-radius: 14px; background: var(--peach); color: #1a1110; text-align: center; }
.points-display span { display: block; font-size: 1.75rem; font-weight: 950; line-height: 1; }
.points-display small { font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.stat-allocator { display: grid; gap: .55rem; }
.stat-row { display: grid; grid-template-columns: 42px 1fr auto; gap: .8rem; align-items: center; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; background: #0a0a0f; }
.stat-badge { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border-radius: 50%; background: var(--lavender); color: #17121f; font-weight: 950; }
.stat-copy { display: grid; gap: .08rem; }
.stat-copy strong { font-size: .9rem; }
.stat-copy span { color: var(--muted); font-size: .74rem; line-height: 1.3; }
.stat-controls { display: grid; grid-template-columns: 30px 30px 30px; gap: .25rem; align-items: center; }
.stat-controls button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #15151e; color: var(--text); cursor: pointer; font-weight: 900; }
.stat-controls button:hover { border-color: var(--purple); color: var(--purple-bright); }
.stat-controls output { text-align: center; font-size: 1.05rem; font-weight: 900; }
.launch-button { width: 100%; margin-top: 1.2rem; }
.launch-note { margin: .75rem 0 0; color: var(--muted); font-size: .78rem; text-align: center; }
.launch-note.warning { color: var(--peach); font-weight: 800; }

.game-runtime { position: relative; z-index: 2; padding: 1rem 1rem 1rem 1.9rem; }
.game-hud { display: grid; grid-template-columns: repeat(3, minmax(105px, 1fr)) repeat(4, auto); gap: .55rem; margin-bottom: .8rem; }
.hud-item { min-width: 0; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 11px; background: #101016; }
.hud-item > span { display: block; color: var(--muted); font-size: .61rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.hud-item > strong { display: block; margin-top: .12rem; font-size: 1.05rem; }
.hud-item.compact { min-width: 78px; }
.hud-item.cipher { border-color: rgba(243,182,140,.45); }
.hud-item.cipher strong { color: var(--peach); }
.hud-meter { height: 4px; margin-top: .38rem; overflow: hidden; border-radius: 999px; background: #25242d; }
.hud-meter i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--purple); transition: width .18s linear; }
.hud-item:nth-child(2) .hud-meter i { background: var(--peach); }
.hud-item:nth-child(3) .hud-meter i { background: var(--rose); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: .8rem; }
.space-console { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px 8px 8px 18px; background: #050509; }
#spaceCanvas { display: block; width: 100%; height: min(68vh, 700px); min-height: 510px; touch-action: none; cursor: crosshair; }
.flight-message { position: absolute; top: 14px; left: 14px; max-width: min(72%, 560px); padding: .58rem .78rem; border: 1px solid rgba(169,139,243,.3); border-radius: 10px; background: rgba(7,7,12,.82); color: var(--muted); font-size: .78rem; font-weight: 750; opacity: .55; transition: opacity .2s ease; pointer-events: none; }
.flight-message.visible { opacity: 1; color: var(--text); }
.interaction-prompt { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); padding: .65rem .9rem; border: 1px solid var(--purple); border-radius: 999px; background: rgba(10,9,15,.92); color: var(--text); font-size: .82rem; font-weight: 800; text-align: center; }
kbd { display: inline-block; min-width: 1.7em; padding: .05rem .35rem; border: 1px solid #4a4657; border-bottom-width: 2px; border-radius: 5px; background: #15131c; color: #f0ebf8; font: inherit; font-size: .75em; text-align: center; }
.flight-actions { position: absolute; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; max-width: 72%; }
.flight-actions button { padding: .48rem .64rem; border: 1px solid rgba(169,139,243,.35); border-radius: 8px; background: rgba(11,11,17,.86); color: var(--text); font-size: .72rem; font-weight: 850; cursor: pointer; }
.flight-actions button:hover { border-color: var(--purple); background: rgba(169,139,243,.13); }
.touch-flight-controls { position: absolute; left: 12px; bottom: 12px; display: none; grid-template-columns: repeat(3, 44px); grid-template-areas: "left up right" ". down ."; gap: .35rem; }
.touch-flight-controls button { width: 44px; height: 44px; border: 1px solid rgba(203,184,255,.4); border-radius: 10px; background: rgba(10,9,15,.88); color: var(--text); font-weight: 900; touch-action: none; }
.touch-flight-controls button:nth-child(1) { grid-area: left; }
.touch-flight-controls button:nth-child(2) { grid-area: up; }
.touch-flight-controls button:nth-child(3) { grid-area: right; }
.touch-flight-controls button:nth-child(4) { grid-area: down; }
.mission-console { display: grid; align-content: start; gap: .6rem; }
.mission-block { padding: .85rem; border: 1px solid var(--line); border-radius: 10px; background: #101016; }
.mission-block > strong { display: block; margin-top: .18rem; font-size: .88rem; }
.mission-block > p { margin: .28rem 0 0; color: var(--muted); font-size: .74rem; line-height: 1.45; }
.mission-label { color: var(--purple-bright); font-size: .61rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.cosmic-readout #cosmicReadout { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-top: .5rem; }
.cosmic-readout #cosmicReadout span { display: flex; align-items: center; justify-content: center; gap: .25rem; padding: .35rem; border-radius: 7px; background: #09090e; font-size: .72rem; font-weight: 850; }
.cosmic-readout #cosmicReadout b { color: var(--peach); }
.log-block { min-height: 225px; }
.log-block ol { margin: .55rem 0 0; padding-left: 1.15rem; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.log-block li + li { margin-top: .38rem; }
.game-instructions { padding: 5rem 0 2rem; }
.instruction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.event-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(2,2,6,.82); backdrop-filter: blur(12px); }
.event-modal[hidden] { display: none; }
.event-dialog { width: min(760px, 100%); max-height: min(90vh, 820px); overflow: auto; padding: clamp(1.2rem, 4vw, 2.2rem); border: 1px solid #393344; border-radius: 34px 14px 14px 34px; background: linear-gradient(145deg, #13121a, #0b0b10 72%); box-shadow: 0 30px 100px rgba(0,0,0,.72); }
.event-dialog::before { content: ""; float: left; width: 10px; height: 82px; margin: 0 1rem 1rem 0; border-radius: 999px; background: linear-gradient(var(--purple), var(--peach)); }
.event-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.event-header h2 { margin-bottom: 0; font-size: clamp(2rem, 5vw, 3.5rem); line-height: .95; letter-spacing: -.045em; }
.event-signal { display: flex; align-items: end; gap: 4px; min-width: 42px; height: 42px; }
.event-signal i { width: 6px; border-radius: 999px; background: var(--purple); animation: signal-bars .8s ease-in-out infinite alternate; }
.event-signal i:nth-child(1) { height: 40%; animation-delay: -.2s; }
.event-signal i:nth-child(2) { height: 85%; animation-delay: -.5s; }
.event-signal i:nth-child(3) { height: 58%; animation-delay: -.1s; }
.event-body { padding: 1.2rem 0 .35rem; color: var(--muted); font-size: 1rem; }
.event-body strong { color: var(--text); }
.event-body em { color: var(--purple-bright); }
.event-choices { display: grid; gap: .55rem; margin-top: 1rem; }
.event-choice { display: grid; grid-template-columns: 44px 1fr; gap: .8rem; align-items: start; width: 100%; padding: .85rem; border: 1px solid var(--line); border-radius: 12px; background: #09090e; color: var(--text); text-align: left; cursor: pointer; }
.event-choice:hover { border-color: var(--purple); background: rgba(169,139,243,.08); transform: translateX(3px); }
.choice-number { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 50%; background: var(--lavender); color: #17121f; font-size: .72rem; font-weight: 950; }
.event-choice > span:last-child { display: grid; gap: .15rem; }
.event-choice strong { font-size: .95rem; }
.event-choice small { color: var(--muted); }
.event-choice em { color: var(--peach); font-size: .68rem; font-style: normal; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.event-result { margin-top: 1rem; }
.check-result { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: #09090e; }
.check-result span { padding: .28rem .48rem; border-radius: 999px; font-size: .62rem; font-weight: 950; letter-spacing: .08em; }
.check-result.success span { background: #8bc8a0; color: #07120b; }
.check-result.failure span { background: #d98ba7; color: #1c0810; }
.check-result strong { font-size: .8rem; }
.check-result small { color: var(--muted); font-size: .7rem; }
.result-narrative { padding: 1rem .2rem .2rem; color: var(--muted); }
.result-narrative p { margin-bottom: .65rem; }
.cipher-discovery { padding: .75rem; border-left: 4px solid var(--peach); background: rgba(243,182,140,.08); color: var(--text); }
.resource-summary { display: flex; flex-wrap: wrap; gap: .35rem; color: var(--text); font-size: .8rem; font-weight: 800; }
.resource-summary .gain { color: #9cdbb0; }
.resource-summary .loss { color: #eba4bb; }
.event-continue { justify-self: end; margin-top: .4rem; }
.ending-dialog { text-align: center; }
.ending-dialog::before { display: none; }
.ending-emblem { display: grid; place-items: center; width: 86px; aspect-ratio: 1; margin: 0 auto 1rem; border: 1px solid var(--purple); border-radius: 50%; background: rgba(169,139,243,.12); color: var(--peach); font-size: 2.5rem; }
.ending-dialog h2 { margin-bottom: 1rem; font-size: clamp(2.6rem, 6vw, 5rem); line-height: .9; letter-spacing: -.055em; }
.ending-dialog > p:not(.card-kicker) { max-width: 630px; margin: 0 auto 1.3rem; color: var(--muted); }
.ending-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 1.2rem 0 1.5rem; }
.ending-stats div { padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: #09090e; }
.ending-stats span { display: block; color: var(--muted); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ending-stats strong { display: block; margin-top: .18rem; }
.ending-dialog .button-row { justify-content: center; }

@keyframes signal-bars { from { transform: scaleY(.45); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }

@media (hover: none), (pointer: coarse) {
  .touch-flight-controls { display: grid; }
  .flight-actions { bottom: 112px; max-width: 48%; }
  .interaction-prompt { bottom: 175px; }
}

@media (max-width: 1000px) {
  .arcade-feature { grid-template-columns: 1fr; border-radius: 28px 14px 14px 28px; }
  .arcade-cover { min-height: 430px; }
  .setup-grid { grid-template-columns: 1fr; }
  .game-layout { grid-template-columns: 1fr; }
  .mission-console { grid-template-columns: repeat(3, 1fr); }
  .log-block { grid-column: span 3; min-height: auto; }
  .game-hud { grid-template-columns: repeat(3, 1fr) repeat(4, minmax(70px, .75fr)); }
}

@media (max-width: 760px) {
  .game-titlebar { grid-template-columns: 1fr; }
  .game-title-actions { justify-content: flex-start; }
  .game-frame { border-radius: 28px 12px 12px 28px; }
  .game-runtime { padding: .65rem .65rem .65rem 1.35rem; }
  .game-hud { grid-template-columns: repeat(3, 1fr); }
  .hud-item.compact { min-width: 0; }
  .game-layout { gap: .6rem; }
  #spaceCanvas { height: 62vh; min-height: 460px; }
  .mission-console { grid-template-columns: 1fr 1fr; }
  .log-block { grid-column: span 2; }
  .instruction-grid { grid-template-columns: 1fr; }
  .arcade-slot-grid { grid-template-columns: 1fr; }
  .check-result { grid-template-columns: 1fr; }
  .event-dialog { border-radius: 24px 10px 10px 24px; }
  .ending-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .arcade-cover { min-height: 340px; }
  .arcade-cover-label strong { font-size: 2.5rem; }
  .stat-row { grid-template-columns: 36px 1fr; }
  .stat-badge { width: 36px; }
  .stat-controls { grid-column: 2; justify-self: end; }
  .cosmic-heading { grid-template-columns: 1fr; }
  .points-display { justify-self: start; }
  #spaceCanvas { height: min(50vh, 430px); min-height: 390px; }
  .game-hud { grid-template-columns: repeat(2, 1fr); }
  .mission-console { grid-template-columns: 1fr; }
  .log-block { grid-column: auto; }
  .flight-actions { right: 8px; bottom: 110px; max-width: 52%; }
  .flight-actions button kbd { display: none; }
  .interaction-prompt { bottom: 170px; width: calc(100% - 1rem); border-radius: 10px; }
  .event-choice { grid-template-columns: 36px 1fr; padding: .72rem; }
  .choice-number { width: 34px; }
  .ending-stats { grid-template-columns: 1fr 1fr; }
}

/* Aetherfall: Greenhollow */
.rpg-page { --rpg-gold:#e5b65c; --rpg-green:#79b96d; --rpg-blue:#5ba6c9; --rpg-red:#b95f5f; --rpg-parchment:#d8caa9; }
.rpg-shell { margin-bottom: 5rem; border:1px solid #383140; border-radius:36px 14px 14px 36px; overflow:hidden; background:linear-gradient(145deg,#14121a,#08090b); box-shadow:0 30px 80px rgba(0,0,0,.55); }
.rpg-create { padding:clamp(1.2rem,4vw,3rem); }
.rpg-create-copy { max-width:760px; margin-bottom:1.5rem; }
.rpg-create-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:1rem; }
.rpg-create-panel { padding:1.1rem; border:1px solid var(--line); border-radius:14px; background:#0b0b10; }
.rpg-class-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; margin:.6rem 0 1rem; }
.rpg-class-card,.rpg-spec-card { border:1px solid #35323b; border-radius:10px; background:#121117; color:var(--text); text-align:left; cursor:pointer; }
.rpg-class-card { display:grid; grid-template-columns:44px 1fr; gap:.65rem; padding:.7rem; align-items:center; }
.rpg-class-card i { display:grid; place-items:center; width:42px; aspect-ratio:1; border-radius:50%; background:#211c29; font-style:normal; font-size:1.25rem; }
.rpg-class-card strong,.rpg-spec-card strong { display:block; }
.rpg-class-card span,.rpg-spec-card span { display:block; margin-top:.15rem; color:var(--muted); font-size:.7rem; line-height:1.35; }
.rpg-class-card:hover,.rpg-spec-card:hover,.rpg-class-card.selected,.rpg-spec-card.selected { border-color:var(--purple); background:rgba(169,139,243,.1); }
.rpg-spec-grid { display:grid; gap:.5rem; margin:.6rem 0 1rem; }
.rpg-spec-card { padding:.72rem; }
.rpg-class-preview { min-height:155px; margin:1rem 0; padding:1rem; border-left:5px solid var(--peach); background:rgba(243,182,140,.06); }
.rpg-class-preview h3 { margin:0 0 .4rem; }
.rpg-class-preview p { color:var(--muted); font-size:.82rem; }
.rpg-preview-abilities { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.7rem; }
.rpg-preview-abilities span { padding:.3rem .45rem; border:1px solid var(--line); border-radius:6px; font-size:.67rem; }
.rpg-runtime { padding:.8rem .8rem .8rem 1.5rem; }
.rpg-topbar { display:grid; grid-template-columns:240px 1fr auto; gap:1rem; align-items:center; padding:.7rem; border:1px solid var(--line); border-radius:10px; background:#0b0b0e; }
.rpg-identity { display:flex; align-items:center; gap:.7rem; }
.rpg-portrait { display:grid; place-items:center; width:52px; aspect-ratio:1; border:2px solid var(--rpg-gold); border-radius:50%; background:#201b18; font-size:1.5rem; }
.rpg-identity strong { display:block; }
.rpg-identity span { color:var(--muted); font-size:.72rem; }
.rpg-bars { display:grid; gap:.3rem; }
.rpg-bar { display:grid; grid-template-columns:150px 1fr; align-items:center; gap:.5rem; }
.rpg-bar span { font-size:.64rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.rpg-bar span b { color:var(--muted); font-weight:700; }
.rpg-bar > i,.rpg-target > i { height:10px; overflow:hidden; border:1px solid #39343b; border-radius:999px; background:#050506; }
.rpg-bar em,.rpg-target em { display:block; height:100%; transition:width .2s; }
.rpg-bar.hp em,.rpg-target em { background:linear-gradient(90deg,#763737,#c26a64); }
.rpg-bar.mana em { background:linear-gradient(90deg,#294f77,#5d9ed1); }
.rpg-bar.xp em { background:linear-gradient(90deg,#6b4c89,#ad83d1); }
.rpg-money { display:flex; gap:.5rem; font-size:.72rem; font-weight:900; }
.rpg-money .gold { color:#efc55f; }.rpg-money .silver{color:#c5cbd1}.rpg-money .copper{color:#c9824f}
.rpg-world-grid { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:.75rem; margin-top:.75rem; }
.rpg-world-wrap { position:relative; overflow:hidden; border:1px solid #343039; border-radius:10px; background:#17231c; }
#rpgCanvas { display:block; width:100%; height:auto; min-height:620px; max-height:75vh; background:#25382a; image-rendering:auto; }
.rpg-zone-title { position:absolute; top:12%; left:50%; transform:translateX(-50%); text-align:center; text-shadow:0 3px 8px #000; pointer-events:none; animation:rpg-zone 4s forwards; }
.rpg-zone-title small { display:block; color:#e7cf93; font-size:.63rem; letter-spacing:.25em; }.rpg-zone-title strong{font-family:Georgia,serif;font-size:2.1rem;letter-spacing:.05em}
@keyframes rpg-zone { 0%,65%{opacity:1}100%{opacity:0;visibility:hidden} }
.rpg-target { position:absolute; top:10px; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:1fr auto; gap:.2rem .7rem; width:min(300px,60%); padding:.55rem .7rem; border:1px solid #6a5640; border-radius:8px; background:rgba(17,13,10,.93); }
.rpg-target[hidden] { display:none; }.rpg-target strong{font-family:Georgia,serif}.rpg-target span{color:var(--muted);font-size:.7rem}.rpg-target i{grid-column:1/-1}
.rpg-castbar { position:absolute; left:50%; bottom:88px; transform:translateX(-50%); width:min(360px,70%); padding:.4rem; background:rgba(6,6,8,.9); border:1px solid #6e568a; border-radius:7px; text-align:center; }
.rpg-castbar[hidden]{display:none}.rpg-castbar span{font-size:.7rem;font-weight:850}.rpg-castbar i{display:block;height:7px;margin-top:.25rem;background:#151019}.rpg-castbar em{display:block;height:100%;background:#a98bf3}
.rpg-interact { position:absolute; left:50%; bottom:82px; transform:translateX(-50%); padding:.5rem .7rem; border:1px solid #c8a861; border-radius:8px; background:rgba(15,12,8,.9); font-size:.72rem; }.rpg-interact[hidden]{display:none}
.rpg-hotbar { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:.28rem; }
.rpg-ability { position:relative; width:58px; height:58px; padding:0; border:2px solid #6a5840; border-radius:7px; background:linear-gradient(145deg,#29211b,#0d0d0e); color:#fff; cursor:pointer; box-shadow:0 3px 8px #000; }
.rpg-ability:hover { border-color:#e0bf70; }.rpg-ability .key{position:absolute;top:2px;right:4px;color:#e5d7b1;font-size:.6rem;font-weight:900}.rpg-ability .icon{font-size:1.3rem}.rpg-ability .name{position:absolute;left:2px;right:2px;bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.48rem}.rpg-ability .cooldown{position:absolute;inset:0;display:grid;place-items:center;border-radius:5px;background:rgba(3,3,4,.75);font-weight:900}.rpg-ability.locked{filter:grayscale(1);opacity:.5}
.rpg-touch { position:absolute; left:10px; bottom:12px; display:none; grid-template-columns:repeat(3,40px); grid-template-areas:"l u r" ". d ."; gap:.25rem; }.rpg-touch button{width:40px;height:40px;border:1px solid #8b7954;border-radius:7px;background:rgba(10,9,8,.85);color:#fff;touch-action:none}.rpg-touch button:nth-child(1){grid-area:l}.rpg-touch button:nth-child(2){grid-area:u}.rpg-touch button:nth-child(3){grid-area:r}.rpg-touch button:nth-child(4){grid-area:d}
.rpg-sidebar { display:grid; align-content:start; gap:.55rem; }
.rpg-panel { padding:.72rem; border:1px solid var(--line); border-radius:9px; background:#0c0c10; }
.rpg-panel-head { display:flex; justify-content:space-between; align-items:center; }.rpg-panel-head button{border:0;background:none;color:var(--purple-bright);font-size:.68rem;cursor:pointer}
.quest-tracker h4{margin:.5rem 0 .2rem;font-family:Georgia,serif;font-size:.9rem}.quest-tracker p{margin:.2rem 0;color:var(--muted);font-size:.7rem}.quest-objective{color:#d6c59c!important}.quest-done{text-decoration:line-through;color:#7da57c!important}
.rpg-mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:.3rem; margin-top:.45rem; }.rpg-mini-stats span{padding:.3rem;background:#070709;font-size:.65rem}.rpg-mini-stats b{float:right;color:#ddc487}
.rpg-prof-mini { display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem}.rpg-prof-mini span{padding:.25rem .35rem;border-radius:5px;background:#070709;color:var(--muted);font-size:.6rem}.rpg-prof-mini span.learned{color:#cfbd8f;border:1px solid #4f4734}
.rpg-log ol,.rpg-log { min-height:145px }.rpg-log ol{margin:.5rem 0 0;padding-left:1rem;color:var(--muted);font-size:.64rem;line-height:1.4}.rpg-log li+li{margin-top:.3rem}.rpg-help p{margin:.4rem 0 0;color:var(--muted);font-size:.64rem;line-height:1.5}
.rpg-modal { position:fixed;z-index:1100;inset:0;display:grid;place-items:center;padding:1rem;background:rgba(2,2,4,.78);backdrop-filter:blur(8px) }.rpg-modal[hidden]{display:none}.rpg-window{position:relative;width:min(860px,100%);max-height:90vh;overflow:auto;padding:1.4rem;border:1px solid #69593d;border-radius:20px 8px 8px 20px;background:linear-gradient(145deg,#17140f,#09090b 60%);box-shadow:0 25px 80px #000}.rpg-close{position:absolute;top:.55rem;right:.65rem;width:34px;height:34px;border:1px solid #5b5140;border-radius:50%;background:#0d0c0a;color:#fff;font-size:1.3rem;cursor:pointer}.rpg-window h2{font-family:Georgia,serif;font-size:2.2rem}.rpg-window h3{margin-top:1rem;font-family:Georgia,serif}.rpg-window p{color:var(--muted)}
.rpg-dialogue { display:grid;grid-template-columns:100px 1fr;gap:1rem;align-items:start}.rpg-npc-art{display:grid;place-items:center;width:100px;aspect-ratio:1;border:2px solid #756442;border-radius:50%;background:#241e15;font-size:2.7rem}.rpg-dialogue-options{display:grid;gap:.4rem;margin-top:1rem}.rpg-dialogue-options button,.rpg-shop-row button,.rpg-tree-node{padding:.65rem;border:1px solid #403a30;border-radius:7px;background:#0b0b0d;color:#fff;text-align:left;cursor:pointer}.rpg-dialogue-options button:hover,.rpg-shop-row button:hover,.rpg-tree-node:hover{border-color:#c4a75f;background:#18150f}
.rpg-shop { display:grid;gap:.45rem;margin-top:1rem}.rpg-shop-row{display:grid;grid-template-columns:44px 1fr auto;gap:.7rem;align-items:center;padding:.55rem;border:1px solid #35312a;border-radius:8px;background:#0c0c0e}.rpg-shop-row i{font-style:normal;font-size:1.4rem}.rpg-shop-row strong{display:block}.rpg-shop-row span{color:var(--muted);font-size:.68rem}.rpg-shop-row button{padding:.4rem .55rem;font-size:.68rem}
.rpg-tabs { display:flex;flex-wrap:wrap;gap:.35rem;margin:.8rem 0}.rpg-tabs button{padding:.45rem .65rem;border:1px solid #454035;border-radius:999px;background:#0b0b0d;color:#ccc;cursor:pointer}.rpg-tabs button.active{border-color:#d0ad5c;color:#f2d68e;background:#211b10}
.rpg-tree { display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}.rpg-tree-column{padding:.7rem;border:1px solid #39342b;border-radius:10px;background:#0b0b0d}.rpg-tree-column.current{border-color:#9e8144}.rpg-tree-node{display:block;width:100%;margin-top:.4rem}.rpg-tree-node.unlocked{border-color:#6d9b64;background:#101b10}.rpg-tree-node.locked{opacity:.55}.rpg-tree-node strong{display:block}.rpg-tree-node small{color:var(--muted)}
.rpg-inventory-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;margin-top:.8rem}.rpg-item{min-height:72px;padding:.45rem;border:1px solid #39342b;border-radius:7px;background:#0b0b0d;text-align:center}.rpg-item i{display:block;font-style:normal;font-size:1.4rem}.rpg-item strong{display:block;font-size:.62rem}.rpg-item span{font-size:.55rem;color:var(--muted)}
.rpg-map-legend{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}.rpg-map-legend span{font-size:.7rem}.rpg-death{text-align:center}.rpg-death .skull{font-size:4rem}.rpg-reward{color:#d4b35e!important;font-weight:800}
@media (hover:none),(pointer:coarse){.rpg-touch{display:grid}.rpg-hotbar{bottom:105px}.rpg-interact{bottom:175px}.rpg-castbar{bottom:180px}}
@media(max-width:1000px){.rpg-create-grid{grid-template-columns:1fr}.rpg-world-grid{grid-template-columns:1fr}.rpg-sidebar{grid-template-columns:repeat(2,1fr)}.rpg-log{grid-column:span 2}.rpg-topbar{grid-template-columns:1fr}.rpg-money{justify-content:flex-start}}
@media(max-width:700px){.rpg-runtime{padding:.55rem}.rpg-class-grid{grid-template-columns:1fr}.rpg-sidebar{grid-template-columns:1fr}.rpg-log{grid-column:auto}#rpgCanvas{min-height:560px;height:70vh}.rpg-hotbar{max-width:95%;overflow-x:auto;padding-bottom:4px}.rpg-ability{flex:0 0 48px;width:48px;height:48px}.rpg-bar{grid-template-columns:110px 1fr}.rpg-tree{grid-template-columns:1fr}.rpg-dialogue{grid-template-columns:1fr}.rpg-npc-art{width:72px}.rpg-inventory-grid{grid-template-columns:repeat(4,1fr)}}
.rpg-arcade-cover{background:linear-gradient(#18162d 0 42%,#3d6640 43% 70%,#233925 71%);overflow:hidden}.rpg-cover-land{position:absolute;inset:38% -10% -20%;border-radius:50% 50% 0 0;background:radial-gradient(circle at 35% 20%,#7fa064 0 3%,transparent 4%),linear-gradient(150deg,#51764a,#243b2c)}.rpg-cover-tower{position:absolute;left:20%;top:24%;font-size:7rem;filter:drop-shadow(0 8px 8px #000)}.rpg-cover-hero{position:absolute;left:50%;top:51%;font-size:5rem;filter:drop-shadow(0 8px 8px #000)}.rpg-cover-monster{position:absolute;right:15%;top:40%;font-size:7rem;filter:drop-shadow(0 8px 8px #000)}

/* Crown of the Seven Roads ------------------------------------------------ */
.roads-page { background:radial-gradient(circle at 50% 0,#1e3b50 0,transparent 30rem),linear-gradient(#07111b,#090b12 55%,#120d0b); }
.roads-page::before { opacity:.08; }
.roads-titlebar h1 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.8rem,7vw,6.4rem); letter-spacing:-.045em; color:#fff1c7; text-shadow:0 4px 0 #402d23,0 10px 30px rgba(0,0,0,.8); }
.roads-shell { padding-bottom:4rem; }
.roads-create,.roads-runtime { overflow:hidden; border:1px solid #6e593b; border-radius:28px 10px 10px 28px; background:linear-gradient(150deg,#251c12,#0d1118 48%,#101018); box-shadow:0 35px 100px rgba(0,0,0,.55); }
.roads-create { padding:clamp(1rem,3vw,2.3rem); }
.roads-create-intro { max-width:850px; }
.roads-create h2,.roads-window h2 { font-family:Georgia,"Times New Roman",serif; color:#ffedb6; font-size:clamp(2rem,5vw,4rem); letter-spacing:-.035em; }
.roads-create-intro > p { color:#d1c4ad; }
.roads-save-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:.35rem 1rem; margin:1rem 0; padding:.8rem 1rem; border:1px solid #9b7a3c; border-radius:10px; background:#16130d; }
.roads-save-card strong,.roads-save-card span { grid-column:1; }.roads-save-card .button{grid-column:2;grid-row:1/3}.roads-save-card span{color:#c9baa0;font-size:.78rem}
.roads-create-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.75fr); gap:1rem; margin-top:1.3rem; }
.roads-create-panel { padding:1rem; border:1px solid #403729; border-radius:12px; background:rgba(5,8,12,.72); }
.roads-class-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.45rem; max-height:570px; overflow:auto; padding:.25rem; }
.roads-class-card { min-height:88px; padding:.55rem .4rem; border:1px solid #3d3a35; border-radius:9px; background:linear-gradient(145deg,#171a20,#0b0c10); color:#e8e2d6; cursor:pointer; text-align:center; }
.roads-class-card:hover,.roads-class-card.active { border-color:#e1b65f; background:linear-gradient(145deg,#3a2b16,#10131a); transform:translateY(-1px); }
.roads-class-card i { display:block; font-style:normal; font-size:1.65rem; line-height:1.2; }.roads-class-card strong{display:block;font-family:Georgia,serif;font-size:.73rem}.roads-class-card span{display:block;color:#9c978e;font-size:.53rem;line-height:1.2}
.roads-preview { display:flex; flex-direction:column; min-height:500px; background:radial-gradient(circle at 50% 18%,rgba(246,202,103,.14),transparent 15rem),#090d13; }
.roads-preview-portrait { display:grid; place-items:center; width:132px; aspect-ratio:1; margin:0 auto 1rem; border:3px double #c69b4f; border-radius:50%; background:radial-gradient(circle,#3b5271,#111823 68%); font-size:4.2rem; box-shadow:0 10px 30px #000; }
.roads-preview h3 { margin:.2rem 0; color:#ffe7aa; font-family:Georgia,serif; font-size:2rem; text-align:center; }.roads-preview .role{text-align:center;color:#d2b674;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.roads-preview p{color:#bfb7aa;font-size:.84rem}.roads-preview-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.35rem;margin:.7rem 0}.roads-preview-stats span{padding:.35rem .5rem;border:1px solid #302d27;background:#07090c;font-size:.68rem}.roads-preview-stats b{float:right;color:#f0ca75}.roads-preview-skills{margin:.5rem 0 1rem;padding-left:1.1rem;color:#c8bda9;font-size:.73rem}.roads-preview .button{margin-top:auto;width:100%}
.roads-runtime { padding:.7rem; }
.roads-hud { display:grid; grid-template-columns:250px minmax(280px,1fr) auto; align-items:center; gap:.8rem; padding:.65rem .8rem; border:1px solid #4a3d2a; border-radius:17px 7px 7px 17px; background:linear-gradient(90deg,#18140d,#10141b); }
.roads-hero-card { display:flex;align-items:center;gap:.7rem}.roads-hero-icon{display:grid;place-items:center;width:52px;height:52px;border:2px solid #d3ab59;border-radius:50%;background:#25364c;font-size:1.65rem}.roads-hero-card strong{display:block;font-family:Georgia,serif;color:#ffebba}.roads-hero-card span{display:block;color:#aaa296;font-size:.68rem}.roads-hero-card i{font-style:normal;color:#d6c08c}
.roads-bars { display:grid; gap:.28rem; }.roads-bar{display:grid;grid-template-columns:110px 1fr;gap:.5rem;align-items:center}.roads-bar span{font-size:.61rem;font-weight:900;letter-spacing:.07em}.roads-bar span b{color:#bcb5a9}.roads-bar > i,.roads-battle-bars > i{height:9px;border:1px solid #483f31;border-radius:999px;background:#050608;overflow:hidden}.roads-bar em,.roads-battle-bars em{display:block;height:100%;transition:width .25s}.roads-bar.hp em,.roads-battle-bars i:nth-of-type(1) em{background:linear-gradient(90deg,#7e2730,#e35f65)}.roads-bar.mp em,.roads-battle-bars i:nth-of-type(2) em{background:linear-gradient(90deg,#275b84,#65b3dc)}.roads-bar.xp em{background:linear-gradient(90deg,#9b6f25,#f0c862)}
.roads-hud-right { display:grid;justify-items:end;gap:.1rem;font-size:.68rem}.roads-gold{color:#f5cf63;font-weight:900}.roads-mount{color:#ceb986}.roads-place{color:#9ba9b8;font-size:.58rem;text-transform:uppercase;letter-spacing:.1em}
.roads-game-grid { display:grid; grid-template-columns:minmax(0,1fr) 255px; gap:.7rem; margin-top:.7rem; }
.roads-world-wrap { position:relative; overflow:hidden; min-height:650px; border:1px solid #4b402e; border-radius:12px; background:#132230; }
#roadsCanvas { display:block; width:100%; height:auto; min-height:650px; max-height:78vh; background:#173249; image-rendering:auto; }
.roads-zone-card { position:absolute; top:11%; left:50%; transform:translateX(-50%); min-width:min(430px,80%); padding:.65rem 1.2rem; border-top:2px solid #ebcf84;border-bottom:2px solid #ebcf84;background:linear-gradient(90deg,transparent,rgba(8,9,12,.92) 15% 85%,transparent);text-align:center;text-shadow:0 2px 5px #000;pointer-events:none;animation:roads-zone 4.2s forwards}.roads-zone-card small{display:block;color:#e4bf67;font-size:.55rem;font-weight:900;letter-spacing:.25em}.roads-zone-card strong{display:block;font-family:Georgia,serif;font-size:1.75rem;color:#fff2c3}.roads-zone-card span{display:block;color:#d2c8b5;font-size:.7rem}@keyframes roads-zone{0%,70%{opacity:1}100%{opacity:0;visibility:hidden}}
.roads-prompt { position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:.48rem .75rem;border:1px solid #dfbd6a;border-radius:8px;background:rgba(10,9,7,.92);font-size:.7rem;box-shadow:0 8px 25px #000}.roads-prompt[hidden],.roads-toast[hidden]{display:none}.roads-prompt kbd{color:#ffe096}.roads-toast{position:absolute;top:18px;right:18px;max-width:320px;padding:.55rem .75rem;border:1px solid #a48143;border-radius:8px;background:rgba(11,10,8,.94);color:#f4e4bd;font-size:.72rem;box-shadow:0 10px 30px #000}
.roads-sidebar { display:grid;align-content:start;gap:.55rem}.roads-panel{padding:.7rem;border:1px solid #393328;border-radius:8px;background:#0b0d12}.roads-panel p{margin-bottom:.35rem}.roads-quest-panel div{color:#d0c4af;font-family:Georgia,serif;font-size:.8rem;line-height:1.45}.roads-seals{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}.roads-seals span{padding:.35rem;border:1px solid #36322a;border-radius:5px;color:#77736c;font-size:.62rem;text-align:center}.roads-seals span.found{border-color:#d9b45e;color:#ffe29d;background:#221b0e}.roads-reputation{display:grid;gap:.25rem}.roads-reputation span{padding:.3rem;background:#07090c;color:#b9b1a4;font-size:.65rem}.roads-reputation b{float:right;color:#efcc76}.roads-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}.roads-menu-grid button{padding:.42rem;border:1px solid #3b352a;border-radius:5px;background:#11131a;color:#d9d0c1;font-size:.63rem;cursor:pointer}.roads-menu-grid button:hover{border-color:#d0a957;color:#ffe5a1}.roads-log-panel ol{min-height:135px;max-height:220px;overflow:auto;margin:.4rem 0 0;padding-left:1rem;color:#928c83;font-size:.61rem;line-height:1.45}.roads-log-panel li+li{margin-top:.28rem}
.roads-touch { position:absolute;left:12px;bottom:12px;display:none;grid-template-columns:repeat(3,42px);grid-template-areas:"l u r" ". d e";gap:.25rem}.roads-touch button{width:42px;height:42px;border:1px solid #b49657;border-radius:8px;background:rgba(8,9,12,.86);color:#fff;touch-action:none}.roads-touch button:nth-child(1){grid-area:l}.roads-touch button:nth-child(2){grid-area:u}.roads-touch button:nth-child(3){grid-area:r}.roads-touch button:nth-child(4){grid-area:d}.roads-touch button:nth-child(5){grid-area:e;color:#ffe19a;font-weight:900}
.roads-modal,.roads-combat { position:fixed;z-index:1300;inset:0;display:grid;place-items:center;padding:1rem;background:rgba(3,5,8,.82);backdrop-filter:blur(7px)}.roads-modal[hidden],.roads-combat[hidden]{display:none}.roads-window{position:relative;width:min(820px,100%);max-height:90vh;overflow:auto;padding:1.35rem;border:3px double #d0aa5b;border-radius:20px 8px 20px 8px;background:linear-gradient(145deg,#17212e,#090b10 60%,#17120c);box-shadow:0 30px 100px #000}.roads-close{position:absolute;right:.65rem;top:.6rem;width:34px;height:34px;border:1px solid #8d7545;border-radius:50%;background:#0d1118;color:#fff;font-size:1.25rem;cursor:pointer}.roads-dialogue{display:grid;grid-template-columns:105px 1fr;gap:1rem}.roads-speaker{display:grid;place-items:center;width:100px;aspect-ratio:1;border:3px double #c59b4d;border-radius:50%;background:radial-gradient(circle,#40546d,#151d28);font-size:2.8rem}.roads-dialogue h2{font-size:2.1rem;margin-bottom:.35rem}.roads-dialogue-text{min-height:85px;color:#e1d8c9;font-family:Georgia,serif;font-size:1.03rem;line-height:1.55}.roads-choice-list{display:grid;gap:.4rem;margin-top:1rem}.roads-choice-list button,.roads-shop-row button,.roads-item-action,.roads-class-skill{padding:.65rem .75rem;border:1px solid #403a30;border-radius:7px;background:#0b0e14;color:#efe8dc;text-align:left;cursor:pointer}.roads-choice-list button:hover,.roads-shop-row button:hover,.roads-item-action:hover{border-color:#d6ad5c;background:#1b170f}.roads-choice-list small{display:block;color:#948d83}.roads-lore-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}.roads-lore-card{padding:.7rem;border:1px solid #3a342a;border-radius:8px;background:#0b0e13}.roads-lore-card strong{display:block;color:#f2d58d;font-family:Georgia,serif}.roads-lore-card span{color:#aaa196;font-size:.7rem}.roads-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin:.7rem 0}.roads-stat-grid span{padding:.45rem;background:#07090c;color:#aaa39a;font-size:.68rem}.roads-stat-grid b{float:right;color:#f0c86c}.roads-skill-list{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}.roads-class-skill{cursor:default}.roads-class-skill strong{display:block;color:#f0d48e}.roads-class-skill small{color:#9e978c}.roads-bag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem}.roads-item-action{display:grid;grid-template-columns:40px 1fr auto;gap:.5rem;align-items:center}.roads-item-action i{font-style:normal;font-size:1.4rem}.roads-item-action span{color:#a9a198;font-size:.65rem}.roads-shop{display:grid;gap:.4rem}.roads-shop-row{display:grid;grid-template-columns:42px 1fr auto;gap:.65rem;align-items:center;padding:.55rem;border:1px solid #3a342a;border-radius:7px;background:#090c11}.roads-shop-row i{font-style:normal;font-size:1.5rem}.roads-shop-row strong{display:block;color:#f0d58f}.roads-shop-row span{display:block;color:#9e968c;font-size:.65rem}.roads-map-sheet{position:relative;aspect-ratio:1.45;border:2px solid #8a6f3f;border-radius:10px;background:linear-gradient(135deg,#dcc78f,#b89b60);overflow:hidden}.roads-map-sheet canvas{width:100%;height:100%}
.roads-battle-stage{position:relative;width:min(1080px,100%);height:min(760px,94vh);overflow:hidden;border:3px double #d0ad63;border-radius:20px 8px;background:linear-gradient(#5987ae 0 48%,#6f9a52 49% 70%,#3f6a3d 71%);box-shadow:0 30px 100px #000}.roads-battle-sky{position:absolute;inset:0;background:radial-gradient(circle at 80% 18%,#fff5bd 0 4%,transparent 5%),linear-gradient(rgba(255,255,255,.12),transparent 45%);pointer-events:none}.roads-battle-heading{position:absolute;top:18px;left:50%;transform:translateX(-50%);min-width:300px;padding:.45rem 1rem;border-top:2px solid #f1d688;border-bottom:2px solid #f1d688;background:rgba(7,10,14,.78);text-align:center}.roads-battle-heading span{display:block;color:#dfc582;font-size:.55rem;letter-spacing:.15em;text-transform:uppercase}.roads-battle-heading strong{display:block;color:#fff4ca;font-family:Georgia,serif;font-size:1.15rem}.roads-enemies{position:absolute;left:5%;right:5%;top:21%;height:42%;display:flex;align-items:flex-end;justify-content:center;gap:clamp(1rem,5vw,4rem)}.roads-enemy{position:relative;display:grid;place-items:center;min-width:150px;cursor:pointer;transition:transform .2s}.roads-enemy:hover,.roads-enemy.targeted{transform:translateY(-8px)}.roads-enemy.targeted::before{content:"▼";position:absolute;top:-28px;color:#ffe178;font-size:1.3rem}.roads-enemy-art{filter:drop-shadow(0 15px 8px rgba(0,0,0,.45));font-size:clamp(4rem,9vw,7rem);animation:roads-bob 1.8s ease-in-out infinite alternate}.roads-enemy:nth-child(2) .roads-enemy-art{animation-delay:-.7s}@keyframes roads-bob{to{transform:translateY(-7px) rotate(2deg)}}.roads-enemy strong{margin-top:.3rem;padding:.2rem .55rem;border-radius:999px;background:rgba(6,8,10,.75);font-family:Georgia,serif;color:#fff1c5}.roads-enemy-hp{width:120px;height:7px;margin-top:.25rem;border:1px solid #382e24;border-radius:999px;background:#201112;overflow:hidden}.roads-enemy-hp em{display:block;height:100%;background:#d9545b}.roads-enemy.defeated{opacity:.25;filter:grayscale(1);pointer-events:none}.roads-enemy.hit{animation:roads-hit .24s}@keyframes roads-hit{50%{transform:translateX(10px);filter:brightness(2)}}
.roads-battle-bottom{position:absolute;left:2%;right:2%;bottom:2%;display:grid;grid-template-columns:250px minmax(230px,1fr) 300px;gap:.6rem;min-height:185px}.roads-battle-hero,.roads-battle-log,.roads-command{padding:.75rem;border:3px double #c9a257;border-radius:12px 5px;background:rgba(7,10,15,.94);color:#f0e8d8}.roads-battle-hero strong{display:block;font-family:Georgia,serif;color:#ffe5a2;font-size:1.1rem}.roads-battle-hero span{color:#aaa299;font-size:.68rem}.roads-battle-hero i{font-style:normal}.roads-battle-bars{display:grid;grid-template-columns:60px 1fr;gap:.3rem;margin-top:.65rem}.roads-battle-bars p{margin:0;color:#d5ccbc;font-size:.61rem}.roads-battle-bars p span{float:right}.roads-battle-log{overflow:auto;font-family:Georgia,serif;font-size:.78rem;line-height:1.45}.roads-battle-log p{margin:0 0 .35rem}.roads-command{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:.35rem}.roads-command button{padding:.55rem;border:1px solid #554835;border-radius:6px;background:#111621;color:#f2e8d6;font-family:Georgia,serif;cursor:pointer;text-align:left}.roads-command button:hover,.roads-command button.active{border-color:#edc76e;background:#29200f;color:#ffe8a9}.roads-command .roads-command-title{grid-column:1/-1;color:#d8bd7a;font-size:.57rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.roads-command .roads-command-back{grid-column:1/-1}.roads-command button:disabled{opacity:.4;cursor:not-allowed}.roads-damage-number{position:absolute;z-index:5;color:#fff4c8;font-size:1.6rem;font-weight:950;text-shadow:0 2px 3px #000;animation:roads-float 1s forwards;pointer-events:none}@keyframes roads-float{to{transform:translateY(-50px);opacity:0}}
@media (hover:none),(pointer:coarse){.roads-touch{display:grid}.roads-prompt{bottom:75px}}
@media(max-width:1050px){.roads-create-grid{grid-template-columns:1fr}.roads-class-grid{grid-template-columns:repeat(4,1fr)}.roads-game-grid{grid-template-columns:1fr}.roads-sidebar{grid-template-columns:repeat(2,1fr)}.roads-log-panel{grid-column:span 2}.roads-hud{grid-template-columns:1fr}.roads-hud-right{justify-items:start;grid-template-columns:repeat(3,auto);gap:.8rem}.roads-battle-bottom{grid-template-columns:1fr 1fr}.roads-battle-log{grid-column:1/-1;grid-row:2}.roads-command{grid-column:2}.roads-battle-hero{grid-column:1}.roads-enemies{top:17%;height:44%}}
@media(max-width:700px){.roads-class-grid{grid-template-columns:repeat(3,1fr);max-height:460px}.roads-preview{min-height:0}.roads-world-wrap,#roadsCanvas{min-height:560px;height:70vh}.roads-sidebar{grid-template-columns:1fr}.roads-log-panel{grid-column:auto}.roads-dialogue{grid-template-columns:1fr}.roads-speaker{width:72px}.roads-stat-grid{grid-template-columns:repeat(2,1fr)}.roads-skill-list,.roads-bag-grid,.roads-lore-grid{grid-template-columns:1fr}.roads-battle-stage{height:96vh}.roads-battle-bottom{grid-template-columns:1fr;max-height:46%;overflow:auto}.roads-battle-hero,.roads-command,.roads-battle-log{grid-column:1}.roads-battle-log{grid-row:auto;min-height:90px}.roads-command{grid-template-columns:repeat(2,1fr)}.roads-enemies{top:14%;height:34%;gap:.6rem}.roads-enemy{min-width:90px}.roads-enemy-art{font-size:3.5rem}.roads-enemy strong{font-size:.66rem}.roads-enemy-hp{width:80px}.roads-battle-heading{top:8px}.roads-save-card{grid-template-columns:1fr}.roads-save-card .button{grid-column:1;grid-row:auto}}
.roads-arcade-cover{overflow:hidden;background:linear-gradient(#5d92b5 0 43%,#8eb35f 44% 66%,#4c713b 67%)}.roads-cover-sun{position:absolute;right:12%;top:10%;width:72px;aspect-ratio:1;border-radius:50%;background:#ffe397;box-shadow:0 0 40px #ffe5a5}.roads-cover-road{position:absolute;left:37%;bottom:-20%;width:26%;height:78%;clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);background:#d8c18d}.roads-cover-city{position:absolute;left:10%;bottom:29%;font-size:6.5rem;filter:drop-shadow(0 8px 7px #0006)}.roads-cover-horse{position:absolute;left:48%;bottom:22%;font-size:4.8rem;filter:drop-shadow(0 8px 7px #0007)}.roads-cover-dragon{position:absolute;right:9%;top:28%;font-size:6rem;filter:drop-shadow(0 8px 7px #0007)}
.roads-save-card[hidden] { display:none; }


/* Crown of the Seven Roads: equipment system */
.roads-shop-tabs{display:flex;gap:.35rem;margin:.75rem 0}.roads-shop-tabs button{padding:.48rem .72rem;border:1px solid #443b2e;border-radius:6px;background:#090c11;color:#aaa197;cursor:pointer}.roads-shop-tabs button.active,.roads-shop-tabs button:hover{border-color:#d6ad5c;background:#20190d;color:#ffe4a0}.roads-gear-row>div em{display:block;margin-top:.25rem;color:#78c99a;font-size:.6rem;font-style:normal;text-transform:uppercase;letter-spacing:.08em}.roads-gear-row>div strong small{color:#8f877c;font:500 .58rem sans-serif}.roads-shop-row button:disabled{opacity:.4;cursor:not-allowed}.rarity-common{border-color:#4d4b47!important}.rarity-uncommon{border-color:#478d62!important}.rarity-rare{border-color:#527dc6!important}.rarity-epic{border-color:#9a63c8!important}.rarity-legendary{border-color:#d5a13b!important;box-shadow:inset 0 0 18px rgba(213,161,59,.08)}
.roads-equipped-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin:.5rem 0 .7rem}.roads-equipped-mini{padding:.65rem;border:1px solid #3d372d;border-radius:8px;background:#090c11}.roads-equipped-mini span,.roads-equipped-mini small{display:block;color:#8f887d;font-size:.6rem}.roads-equipped-mini strong{display:block;margin:.2rem 0;color:#efd28a;font-family:Georgia,serif;font-size:.75rem}.roads-stat-grid span small{display:block;clear:both;color:#716c64;font-size:.52rem;text-align:right}
.roads-equipment-layout{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(340px,1.35fr);gap:1rem}.roads-equipment-layout h3{margin-top:.6rem}.roads-equipment-slots,.roads-owned-gear{display:grid;gap:.45rem}.roads-equipment-slot,.roads-owned-card{display:grid;grid-template-columns:42px 1fr auto;gap:.65rem;align-items:center;padding:.65rem;border:1px solid #3d372d;border-radius:8px;background:#090c11}.roads-equipment-slot>i,.roads-owned-card>i{font-style:normal;font-size:1.55rem;text-align:center}.roads-equipment-slot small,.roads-owned-card small{display:block;color:#817b72;font-size:.56rem;text-transform:uppercase;letter-spacing:.08em}.roads-equipment-slot strong,.roads-owned-card strong{display:block;color:#efd38d;font-family:Georgia,serif}.roads-equipment-slot span,.roads-owned-card span{display:block;color:#aaa197;font-size:.61rem;line-height:1.4}.roads-owned-card em{display:block;margin-top:.22rem;color:#75bf91;font-size:.56rem;font-style:normal;text-transform:uppercase;letter-spacing:.06em}.roads-equipment-slot button,.roads-owned-card button{padding:.42rem .55rem;border:1px solid #5a4930;border-radius:5px;background:#151108;color:#f0d390;font-size:.6rem;cursor:pointer}.roads-owned-card button:disabled{opacity:.38;cursor:not-allowed}.roads-equipment-slot button:hover,.roads-owned-card button:not(:disabled):hover{border-color:#d6ad5c;background:#241a0b}
@media(max-width:760px){.roads-equipment-layout{grid-template-columns:1fr}.roads-equipped-summary{grid-template-columns:1fr}.roads-owned-card,.roads-equipment-slot{grid-template-columns:38px 1fr}.roads-owned-card button,.roads-equipment-slot button{grid-column:2}}


/* Cinder Reach arcade cover */
.frontier-arcade-cover{overflow:hidden;background:radial-gradient(circle at 72% 20%,#1a4e66 0,transparent 28%),linear-gradient(145deg,#06111d,#02060b 72%)}.frontier-arcade-cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 0 1px,transparent 1.5px);background-size:58px 58px;opacity:.35}.frontier-cover-planet{position:absolute;right:-8%;top:4%;width:54%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#d2ffd9 0 4%,#4c9a7b 18%,#1d5364 58%,#06131d 73%);box-shadow:35px 15px 70px #000 inset,0 0 42px #3fc7e733}.frontier-cover-moon{position:absolute;right:42%;top:18%;width:55px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 25%,#d9e2e5,#596b76 63%,#121c22 64%)}.frontier-cover-ship{position:absolute;left:19%;top:26%;color:#b9f5ff;font-size:4.8rem;transform:rotate(38deg);filter:drop-shadow(0 0 12px #4de2ff)}.frontier-cover-colony{position:absolute;left:8%;right:34%;bottom:22%;height:75px;border-bottom:3px solid #5d8796}.frontier-cover-colony i{position:absolute;bottom:0;width:64px;height:46px;border:2px solid #79cde4;border-radius:25px 25px 4px 4px;background:#132c3a}.frontier-cover-colony i:nth-child(1){left:6%}.frontier-cover-colony i:nth-child(2){left:38%;height:62px}.frontier-cover-colony i:nth-child(3){left:72%;width:44px;height:34px}.frontier-cover-commander{position:absolute;left:46%;bottom:25%;color:#ff9f5a;font-size:3.8rem;filter:drop-shadow(0 5px 5px #000)}

/* Realmforge: Deckbound arcade cover */
.deckbound-arcade-cover{overflow:hidden;background:radial-gradient(circle at 72% 18%,#6d476e 0,transparent 30%),linear-gradient(150deg,#241329,#09070d 72%)}
.deckbound-arcade-cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#f7dfa8 0 1px,transparent 1.5px);background-size:47px 47px;opacity:.16}
.deckbound-cover-moon{position:absolute;right:10%;top:7%;width:115px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff4c9,#e2bd67 42%,#7f4c3a 74%);box-shadow:0 0 35px #e7bd6155}
.deckbound-cover-castle{position:absolute;left:7%;right:8%;bottom:23%;height:48%;clip-path:polygon(0 100%,0 64%,7% 64%,7% 39%,14% 39%,14% 61%,26% 61%,26% 29%,33% 29%,33% 58%,45% 58%,45% 12%,54% 12%,54% 58%,67% 58%,67% 36%,76% 36%,76% 63%,87% 63%,87% 45%,95% 45%,95% 100%);background:linear-gradient(90deg,#341e37,#0c0910 55%,#31172d);filter:drop-shadow(0 12px 8px #0009)}
.deckbound-cover-cards{position:absolute;left:13%;bottom:15%;width:230px;height:155px}.deckbound-cover-cards i{position:absolute;left:38%;bottom:0;width:72px;height:108px;border:2px solid #d2aa5c;border-radius:8px;background:linear-gradient(145deg,#32203b,#0e0a13);box-shadow:0 8px 15px #0008;transform-origin:50% 115%}.deckbound-cover-cards i::after{content:"✦";position:absolute;inset:20px;display:grid;place-items:center;border:1px solid #765a79;border-radius:50%;color:#d7b369}.deckbound-cover-cards i:nth-child(1){transform:rotate(-30deg)}.deckbound-cover-cards i:nth-child(2){transform:rotate(-10deg)}.deckbound-cover-cards i:nth-child(3){transform:rotate(10deg)}.deckbound-cover-cards i:nth-child(4){transform:rotate(30deg)}
.cover-nexus{background:radial-gradient(circle at 25% 25%,#d3bf4f22,transparent 24%),radial-gradient(circle at 75% 72%,#5b85d955,transparent 30%),linear-gradient(145deg,#10223e,#090b12 60%,#30152d)}.cover-nexus strong{color:#f3d365}.cover-nexus::after{content:"◆ ◇ ◆";position:absolute;right:8%;bottom:12%;font-size:2.2rem;letter-spacing:.35rem;color:#e7c85788}