@import url('data:text/css,');

:root {
  --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bg-dark: #0a0f18;
  --panel-bg: rgba(14, 22, 34, 0.78);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-glow: rgba(56, 189, 248, 0.38);
  --accent-gold: #f59e0b;
  --accent-cyan: #38bdf8;
  --accent-amber: #fbbf24;
  --accent-emerald: #10b981;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow: hidden;
  background: #0d1520;
  font-family: var(--font-main);
  color: var(--text-main);
  user-select: none;
  -webkit-user-select: none;
}

button, a {
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  cursor: pointer;
}

button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 4px;
}

#game {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-width: 100%;
  min-height: 100%;
  touch-action: none;
  outline: none;
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 55%, rgba(6, 10, 18, 0.65) 100%);
  transition: opacity 1s;
}

body.playing #vignette {
  opacity: 0.25;
}

/* ============================================================================
 * HEADER & TOP NAVIGATION
 * ============================================================================
 */

header {
  position: fixed;
  left: 3.5%;
  right: 3.5%;
  top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  text-decoration: none;
  font-size: 32px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.brand span {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 4px;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

.brand small {
  display: block;
  font-size: 9px;
  letter-spacing: 2.5px;
  font-weight: 600;
  margin-top: 3px;
  color: var(--accent-cyan);
}

.top-actions {
  display: flex;
  gap: 10px;
}

.top-actions button {
  border: 1px solid var(--glass-border);
  background: var(--panel-bg);
  color: #f1f5f9;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.top-actions button:hover {
  border-color: var(--glass-border-glow);
  background: rgba(22, 36, 56, 0.88);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25);
}

.top-actions span {
  font-size: 11px;
  letter-spacing: 1.2px;
  margin-left: 6px;
}

/* ============================================================================
 * MAIN MENU & DIFFICULTY SELECTOR
 * ============================================================================
 */

#menu {
  position: fixed;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  width: 530px;
  max-width: 90vw;
  background: var(--panel-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 22px 26px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 24px rgba(56, 189, 248, 0.12);
  transition: opacity 0.4s ease;
  overflow: visible;
  scrollbar-width: none;
}

#menu::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.eyebrow {
  font-size: 10px;
  letter-spacing: 2.8px;
  font-weight: 800;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
}

.eyebrow > span {
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), transparent);
}

h1 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.5px;
  margin: 8px 0 6px;
  background: linear-gradient(135deg, #ffffff 40%, var(--accent-amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h1 em {
  font-style: normal;
  color: var(--accent-cyan);
  -webkit-text-fill-color: var(--accent-cyan);
}

#menu p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.difficulty {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  margin: 0 0 10px;
}

.difficulty button {
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  background: rgba(15, 23, 42, 0.65);
  color: #e2e8f0;
  border-radius: 10px;
  text-align: left;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.difficulty button:hover {
  border-color: var(--glass-border-glow);
  background: rgba(30, 41, 59, 0.75);
}

.difficulty button.selected {
  border-color: var(--accent-cyan);
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.35), rgba(56, 189, 248, 0.2));
  color: #ffffff;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.3);
}

.difficulty b {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
}

.difficulty small {
  display: block;
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 4px;
}

.primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #38bdf8, #0284c7);
  color: #041322;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 13px;
  padding: 18px 24px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
  transition: all 0.2s ease;
}

.primary:hover {
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(56, 189, 248, 0.45);
}

.primary span {
  font-size: 20px;
  line-height: 12px;
}

.menu-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 18px 0 20px;
  font-size: 11px;
  color: var(--text-muted);
}

.menu-meta b {
  color: var(--text-main);
  font-size: 13px;
  margin-right: 4px;
}

.menu-meta i {
  height: 12px;
  width: 1px;
  background: var(--glass-border);
}

.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  color: var(--text-muted);
  align-items: center;
  margin-top: 8px;
}

.keys > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

kbd {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: rgba(255, 255, 255, 0.08);
  font-family: inherit;
  color: #f1f5f9;
}

/* ============================================================================
 * HUD, STATS & DASH STAMINA PILL
 * ============================================================================
 */

#hud, #hud * {
  pointer-events: none;
}

.stats {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  border: 1px solid var(--glass-border);
  background: var(--panel-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 12px 24px;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  z-index: 5;
}

.stats > div {
  min-width: 48px;
  text-align: center;
}

.stats small, .results small {
  display: block;
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 700;
}

.stats strong {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #ffffff;
}

.stats i {
  font-size: 11px;
  color: var(--text-muted);
  font-style: normal;
}

#dash-container {
  position: fixed;
  top: 86px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 6;
  pointer-events: none;
}

.dash-meta {
  display: flex;
  justify-content: space-between;
  width: 190px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #f8fafc;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.dash-meta span {
  color: var(--accent-cyan);
}

#dash-status {
  color: var(--accent-amber);
}

#dash-bar {
  width: 190px;
  height: 6px;
  background: rgba(10, 16, 26, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 14px rgba(2, 132, 199, 0.35);
}

#dash-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8, #fef08a);
  border-radius: 10px;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px #38bdf8;
}

#combat-hud {
  position: fixed;
  right: 24px;
  bottom: 58px;
  width: 185px;
  display: grid;
  gap: 7px;
  z-index: 7;
  pointer-events: none;
  padding: 11px 13px;
  border: 1px solid rgba(226, 196, 126, .28);
  background: linear-gradient(145deg, rgba(9, 18, 28, .86), rgba(44, 31, 23, .72));
  backdrop-filter: blur(9px);
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}

#combat-hud > div { display: grid; grid-template-columns: 86px 1fr; align-items: center; gap: 8px; }
#combat-hud b { font-size: 8px; letter-spacing: 1px; color: #f5e5bd; }
#combat-hud span { height: 4px; overflow: hidden; background: rgba(255,255,255,.12); }
#combat-hud i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#9f642f,#ffe09a); transition: width .08s linear; }
#combat-hud > div:nth-child(2) i { background: linear-gradient(90deg,#a32916,#ffb332); }
#combat-hud > div:nth-child(3) i { background: linear-gradient(90deg,#5d3bc4,#69e5ff); }
#combat-hud .health-row { grid-template-columns: 58px 48px 1fr; }
#combat-hud .health-row em { color: #ffd1c7; font: 800 9px/1 monospace; font-style: normal; }
#combat-hud .health-row i { background: linear-gradient(90deg,#7f101b,#ff334e,#ffbd73); }

#ancient-mage-qte {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; text-align: center;
  pointer-events: none; background: radial-gradient(circle,transparent 20%,rgba(80,0,8,.52) 70%,rgba(18,0,2,.9));
  animation: qte-pulse .28s steps(2,end) infinite;
}
#ancient-mage-qte.hidden { display: none; }
#ancient-mage-qte small { color: #ffb36b; letter-spacing: .42em; font: 800 13px/1.4 monospace; }
#ancient-mage-qte b { color: white; text-shadow: 0 0 18px #f20,0 3px #500; font: 900 clamp(42px,8vw,112px)/1.05 Georgia,serif; }
#ancient-mage-qte span { color: #ffda96; font: 900 24px/1.4 monospace; }
#ancient-mage-qte div { width: min(520px,70vw); height: 13px; margin-top: 12px; border: 2px solid #ffb36b; background: #180205; transform: skewX(-12deg); }
#ancient-mage-qte i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#a00,#ff2b18,#fff09a); box-shadow: 0 0 22px #f30; transition: width .06s; }
@keyframes qte-pulse { 50% { filter: brightness(1.18); transform: translateX(1px); } }

@media (max-width: 720px) {
  #combat-hud { right: 10px; bottom: 142px; width: 145px; padding: 8px; }
  #combat-hud > div { grid-template-columns: 70px 1fr; }
}

#hyper-banner {
  position: fixed;
  top: 122px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: rgba(14, 165, 233, 0.22);
  border: 1px solid rgba(56, 189, 248, 0.7);
  border-radius: 9999px;
  color: #38bdf8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.45), inset 0 0 10px rgba(56, 189, 248, 0.25);
  pointer-events: none;
  z-index: 8;
  animation: hyperPulse 0.4s ease-in-out infinite alternate;
}

#hyper-banner span {
  color: #fef08a;
  background: rgba(254, 240, 138, 0.18);
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(254, 240, 138, 0.4);
}

@keyframes hyperPulse {
  0% { transform: translateX(-50%) scale(0.97); box-shadow: 0 0 14px rgba(56, 189, 248, 0.4); }
  100% { transform: translateX(-50%) scale(1.03); box-shadow: 0 0 28px rgba(56, 189, 248, 0.8), 0 0 45px rgba(254, 240, 138, 0.4); }
}

#boss-container {
  position: fixed;
  top: 160px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 320px;
  max-width: 90vw;
  z-index: 10;
  pointer-events: none;
}

.boss-meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ef4444;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
}

#boss-hp-text {
  color: #fef08a;
}

#boss-bar {
  width: 100%;
  height: 10px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(239, 68, 68, 0.6);
  border-radius: 9999px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.4);
}

#boss-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #991b1b, #ef4444, #f59e0b);
  border-radius: 9999px;
  transition: width 0.15s ease-out;
  box-shadow: 0 0 12px #ef4444;
}

#stage-card {
  position: fixed;
  top: 118px;
  left: 4%;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}

#chapter {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent-cyan);
  font-weight: 700;
}

#stage-name {
  font-size: 22px;
  font-weight: 700;
  margin: 6px 0;
  color: #ffffff;
}

#hint {
  font-size: 13px;
  max-width: 360px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 0;
}

#progress {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(15, 23, 42, 0.6);
}

#progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-amber));
  transition: width 0.3s ease;
}

#bottom {
  position: fixed;
  bottom: 18px;
  left: 4%;
  right: 4%;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 11px;
  color: var(--text-muted);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

#toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 15px);
  opacity: 0;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid var(--glass-border-glow);
  background: rgba(15, 23, 42, 0.92);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(56, 189, 248, 0.25);
  transition: all 0.25s ease;
  text-align: center;
  pointer-events: none;
  z-index: 20;
}

#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

#death-flash {
  position: fixed;
  inset: 0;
  background: rgba(220, 38, 38, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 15;
}

#death-screen {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #f8ead1;
  background:
    radial-gradient(circle at center, rgba(82, 14, 12, .22) 0 18%, rgba(10, 7, 9, .9) 72%),
    linear-gradient(180deg, rgba(7, 10, 15, .45), rgba(4, 5, 8, .95));
  backdrop-filter: blur(5px) saturate(.55);
  animation: death-screen-in .22s ease-out both;
}
#death-screen.hidden { display: none; }
.death-card { width: min(560px, calc(100vw - 42px)); text-align: center; }
.death-card small { color: #d7a05a; font: 800 11px/1.2 Inter,sans-serif; letter-spacing: .52em; }
.death-card h2 { margin: 13px 0 8px; color: #fff4e4; font: 900 clamp(54px, 10vw, 116px)/.86 Georgia,serif; letter-spacing: .08em; text-shadow: 0 5px 0 #51150f, 0 0 46px rgba(221,64,35,.38); }
.death-card p { margin: 20px 0 30px; color: #d3c4b2; font: 600 14px/1.6 Inter,sans-serif; }
.death-line { display: flex; align-items: center; gap: 15px; color: #d7a05a; font: 800 9px/1 Inter,sans-serif; letter-spacing: .25em; }
.death-line i { height: 1px; flex: 1; background: linear-gradient(90deg,transparent,#9f5c37); animation: death-line-pulse .7s ease-in-out infinite alternate; }
.death-line i:last-child { transform: scaleX(-1); }
@keyframes death-screen-in { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:scale(1); } }
@keyframes death-line-pulse { to { filter:brightness(1.8); } }

/* ============================================================================
 * MODAL PANELS & PAUSE / FINISH
 * ============================================================================
 */

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 14, 24, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 25;
}

.panel {
  border: 1px solid var(--glass-border);
  background: var(--panel-bg);
  width: 460px;
  max-width: 90vw;
  padding: 38px 42px;
  border-radius: 18px;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.65), 0 0 28px rgba(56, 189, 248, 0.15);
}

.panel h2 {
  font-size: 28px;
  letter-spacing: -1px;
  margin: 12px 0 14px;
}

.panel p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

.panel .primary {
  width: 100%;
  margin-top: 24px;
}

.secondary {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: #f1f5f9;
  border-radius: 8px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glass-border-glow);
}

.panel .fine {
  font-size: 11px;
  margin-top: 22px;
  color: var(--text-muted);
}

.finish-panel {
  text-align: center;
}

.finish-panel .eyebrow {
  justify-content: center;
}

#rank {
  font-size: 84px;
  font-weight: 900;
  color: var(--accent-amber);
  line-height: 1.1;
  margin: 16px 0 10px;
  text-shadow: 0 0 32px rgba(245, 158, 11, 0.45);
}

.results {
  display: flex;
  justify-content: space-around;
  padding: 18px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  margin: 20px 0;
}

.results b {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

/* ============================================================================
 * MOBILE & TOUCH CONTROLS
 * ============================================================================
 */

#touch {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 10;
}

#stick {
  position: absolute;
  bottom: 0;
  left: 24px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: auto;
  touch-action: none;
}

#stick div {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 30px;
  top: 30px;
  background: var(--accent-cyan);
  border-radius: 50%;
  opacity: 0.65;
}

#touch button {
  position: absolute;
  right: 24px;
  bottom: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid var(--glass-border-glow);
  background: rgba(2, 132, 199, 0.45);
  color: #ffffff;
  pointer-events: auto;
  touch-action: none;
  font-size: 24px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

#touch #touch-run {
  right: 104px;
  width: 52px;
  height: 52px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.12);
}

#touch #touch-dash {
  right: 168px;
  width: 52px;
  height: 52px;
  font-size: 18px;
  background: rgba(56, 189, 248, 0.4);
  border-color: var(--accent-cyan);
}

.hidden {
  display: none !important;
}

/* ========================================================================== */
/* PROFESSIONAL ANCIENT UI                                                    */
/* ========================================================================== */
.professional-ui button { position: relative; overflow: hidden; }
.professional-ui button::after {
  content: ''; position: absolute; inset: -80% -30%; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,241,194,.28) 49%, transparent 61%);
  transform: translateX(-70%) rotate(8deg); transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.professional-ui button:hover::after { transform: translateX(70%) rotate(8deg); }
.professional-ui button:active { transform: translateY(1px) scale(.99); }
.controls-moved { display: none !important; }
.professional-ui #bottom { display:none!important; }
.professional-launch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 9px 0 7px; }
.ancient-action {
  min-height: 46px; display: grid; grid-template-columns: 34px 1fr 14px; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid rgba(215,170,86,.3); border-radius: 7px;
  color: #f7e6bd; background: linear-gradient(145deg,rgba(54,41,29,.92),rgba(14,25,37,.94));
  box-shadow: inset 0 1px rgba(255,239,193,.08),0 8px 22px rgba(0,0,0,.22); text-align: left;
  transition: border-color .18s,box-shadow .18s,transform .18s,background .18s;
}
.ancient-action:hover { border-color:#e4b35b; background:linear-gradient(145deg,#59432c,#182c3c); box-shadow:0 0 18px rgba(228,179,91,.18); }
.ancient-action > i { width:30px;height:30px;display:grid;place-items:center;border:1px solid #c99749;border-radius:50%;font:700 15px Georgia;color:#ffe7a9;background:radial-gradient(circle,#426575,#17212b 68%);box-shadow:inset 0 0 0 3px #101820,0 0 10px #40c8ff33; }
.ancient-action > span { font:800 9px/1.25 var(--font-main);letter-spacing:1.25px; }
.ancient-action > b { color:#55d9ff;font-size:19px; }
.combat-action { border-color:rgba(213,63,43,.62);background:linear-gradient(145deg,rgba(95,27,22,.94),rgba(22,17,22,.96)); }
.combat-action > i { border-color:#e76042;color:#ffb07a;background:radial-gradient(circle,#842d20,#210e10 70%); }
.professional-panel { width:min(880px,92vw); max-height:88dvh; overflow:auto; background:linear-gradient(145deg,rgba(24,31,39,.98),rgba(27,20,18,.98));border-color:rgba(214,168,83,.38);box-shadow:0 28px 90px #000b,inset 0 1px #ffe9ae18; }
.professional-panel::before { content:'';position:absolute;inset:10px;border:1px solid rgba(206,157,75,.12);pointer-events:none; }
.professional-panel .eyebrow { color:#d9a951; }
.panel-lead { max-width:68ch;color:#aeb8c0!important; }
.tutorial-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px; }
.tutorial-grid article,.save-card,.host-card,.story-list article { border:1px solid rgba(215,174,95,.2);background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(4,10,16,.25));padding:14px;box-shadow:inset 0 1px rgba(255,255,255,.035); }
.tutorial-grid article { min-height:118px;display:flex;flex-direction:column;align-items:flex-start;gap:9px; }
.tutorial-grid b { color:#f2dfb4;font-size:12px; }
.tutorial-grid small { color:#8fa0ad;font-size:10px;line-height:1.55; }
.save-slots { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px; }
.save-card { min-height:170px;display:flex;flex-direction:column;gap:9px; }
.save-card > small { color:#d7a34d;letter-spacing:2px;font-weight:800; }
.save-card > b { color:#fff0cc;font:800 13px/1.4 var(--font-main); }
.save-card > span { color:#8fa0ad;font-size:10px; }
.save-card > div { margin-top:auto;display:grid;gap:5px; }
.save-card button { padding:9px;border:1px solid #a67a3f66;background:#202a35;color:#f5deb0;font-size:9px;font-weight:800;letter-spacing:1px; }
.host-list,.story-list { display:grid;gap:8px;margin:17px 0; }
.host-card,.story-list article { display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center; }
.host-card > i { width:12px;height:12px;border-radius:50%;background:#7f1d1d;box-shadow:0 0 12px #ef444488; }
.host-card.online > i { background:#10b981;box-shadow:0 0 14px #10b981; }
.host-card b,.story-list b { display:block;color:#f2dfb4;font-size:12px;letter-spacing:1px; }
.host-card small,.story-list small { display:block;color:#8fa0ad;font-size:10px;line-height:1.5;margin-top:3px; }
.host-card > span,.story-list > article > span { color:#d9a951;font:800 9px/1 var(--font-main);letter-spacing:1px; }
.story-list article > i { color:#65d8f2;font:900 20px Georgia; }
#enemy-target-hud { position:fixed;left:50%;top:118px;transform:translateX(-50%);width:min(410px,70vw);z-index:12;pointer-events:none;padding:10px 14px;background:linear-gradient(90deg,transparent,rgba(8,12,17,.86) 15% 85%,transparent);filter:drop-shadow(0 8px 13px #0008); }
.enemy-target-meta { display:grid;grid-template-columns:52px 1fr auto;align-items:end;gap:8px; }
.enemy-target-meta span,#enemy-target-hud small { color:#d9a951;font:800 8px/1.2 var(--font-main);letter-spacing:1.7px; }
.enemy-target-meta b { color:#fff1d1;font:800 12px/1.2 var(--font-main);letter-spacing:.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.enemy-target-meta em { color:#e9c985;font:800 9px/1 monospace;font-style:normal; }
.enemy-target-track { height:9px;margin:7px 0 5px;border:1px solid #a6743e;background:#130e0d;transform:skewX(-12deg);overflow:hidden; }
.enemy-target-track i { display:block;height:100%;background:linear-gradient(90deg,#74130e,#d63b21 62%,#f1b35b);box-shadow:0 0 14px #e4512d;transition:width .16s ease-out; }
.target-swap { animation:target-swap .24s ease-out; }
@keyframes target-swap { from{opacity:0;transform:translate(-50%,-8px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)} }
#combat-hud { width:230px;padding:14px 15px;border-color:rgba(220,173,84,.48);box-shadow:0 15px 42px #0007,inset 0 1px #ffe9b51a; }
#combat-hud .health-row { grid-template-columns:62px 52px 1fr; }
#combat-hud span { height:7px;border:1px solid rgba(255,255,255,.08);transform:skewX(-9deg); }
#combat-hud i { box-shadow:0 0 9px currentColor; }
@media(max-width:800px){.professional-launch-grid{grid-template-columns:1fr 1fr}.tutorial-grid,.save-slots{grid-template-columns:1fr}.professional-panel{max-height:90dvh;padding:28px 22px}#enemy-target-hud{top:105px;width:82vw}}

/* AAA pass: asymmetric archaeological command interface. No card-template UI. */
body.professional-ui {
  --ui-bronze:#b98942; --ui-gold:#e4bd70; --ui-ivory:#f3ead7; --ui-ink:#071018;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3 2l17 10-7 2-3 7z' fill='%23e4bd70' stroke='%23071018' stroke-width='1.8'/%3E%3Ccircle cx='12.5' cy='13.5' r='2' fill='%235dd6eb'/%3E%3C/svg%3E") 3 2,auto;
}
body.professional-ui button,body.professional-ui a,body.professional-ui input { cursor:inherit; }
body.professional-ui #vignette { background:linear-gradient(90deg,rgba(4,9,15,.9) 0,rgba(6,11,18,.47) 35%,transparent 72%),linear-gradient(0deg,rgba(2,6,10,.36),transparent 34%); }
body.professional-ui #menu {
  left:0;top:0;transform:none;width:min(610px,51vw);max-width:none;height:100%;max-height:none!important;
  padding:clamp(115px,14vh,150px) 62px 38px 74px;border:0;border-radius:0;background:linear-gradient(100deg,rgba(5,12,19,.985) 0 72%,rgba(5,12,19,.91) 90%,transparent 100%);
  backdrop-filter:blur(5px);box-shadow:none;overflow:auto!important;clip-path:polygon(0 0,91% 0,100% 9%,95% 100%,0 100%);
}
body.professional-ui #menu::before { content:'';position:fixed;left:48px;top:105px;bottom:36px;width:1px;background:linear-gradient(transparent,var(--ui-bronze) 12% 86%,transparent);box-shadow:0 0 18px #d49a4777; }
body.professional-ui #menu::after { content:'SPQR  ·  SKYWARD ARCHIVE  /  SEASON 01';position:absolute;left:74px;bottom:21px;color:#927343;font:700 8px/1 var(--font-main);letter-spacing:2.4px; }
body.professional-ui #menu .eyebrow { color:#73d7e8;font-size:9px;letter-spacing:3.5px; }
body.professional-ui #menu h1 { margin:14px 0 11px!important;font:600 clamp(42px,4.3vw,68px)/.92 Georgia,serif!important;letter-spacing:-2.6px;text-transform:none;background:none;-webkit-text-fill-color:var(--ui-ivory);text-shadow:0 4px 25px #000; }
body.professional-ui #menu h1 em { color:#57cce1;-webkit-text-fill-color:#57cce1;text-shadow:0 0 25px #38bdf844; }
body.professional-ui #menu > p { max-width:440px!important;margin:0 0 16px!important;color:#8e9ba6!important;font-size:12px!important; }
body.professional-ui .difficulty { display:flex;gap:1px;margin-bottom:11px;background:#8a673c44;padding:1px;clip-path:polygon(0 0,96% 0,100% 28%,100% 100%,0 100%); }
body.professional-ui .difficulty button { border:0;border-radius:0;padding:9px 11px;background:#0b151f;color:#8996a0;backdrop-filter:none;box-shadow:none; }
body.professional-ui .difficulty button.selected { background:linear-gradient(180deg,#223442,#101b24);color:#fff3d5;box-shadow:inset 0 -2px #58cde3; }
body.professional-ui .difficulty button:hover { background:#172632;color:white;transform:none; }
body.professional-ui .primary { min-height:57px;border-radius:0;clip-path:polygon(0 0,96% 0,100% 36%,100% 100%,0 100%);background:linear-gradient(105deg,#d5a75f,#eee0b7 65%,#b99cde);color:#101820;box-shadow:0 10px 30px #0008,inset 0 1px #fff9;transition:filter .18s,letter-spacing .18s,transform .18s; }
body.professional-ui .primary:hover { background:linear-gradient(105deg,#e2b96f,#fff0c6 65%,#c9aef0);filter:brightness(1.08);letter-spacing:2.35px;box-shadow:0 12px 40px #0009,0 0 24px #d7ae5f22; }
body.professional-ui .classic-run { width:auto;padding:12px 16px;margin:8px 0 0;border:0;border-left:2px solid var(--ui-bronze);border-radius:0;background:linear-gradient(90deg,#16222d,transparent);color:#d7c9aa;text-align:left;font-size:9px;letter-spacing:.8px; }
body.professional-ui .classic-run:hover { border-left-color:#5bd6eb;background:linear-gradient(90deg,#203545,transparent); }
body.professional-ui .professional-launch-grid { grid-template-columns:1fr 1fr;gap:1px;margin:10px 0 8px;background:#a17b4630;padding:1px; }
body.professional-ui .ancient-action { min-height:44px;border:0;border-radius:0;background:#0c1721;box-shadow:none;clip-path:none; }
body.professional-ui .ancient-action:hover { background:linear-gradient(90deg,#263748,#111d27);box-shadow:inset 2px 0 var(--ui-gold);transform:none; }
body.professional-ui .ancient-action > i { width:25px;height:25px;border-radius:0;transform:rotate(45deg) scale(.72);background:#13242f;border:1px solid #b78949;box-shadow:none; }
body.professional-ui .ancient-action > i::first-letter { transform:rotate(-45deg); }
body.professional-ui .ancient-action > span { color:#d9caa8;font-size:8px;letter-spacing:1.45px; }
body.professional-ui .ancient-action > b { font-size:15px;color:#5bcce1; }
body.professional-ui .combat-action { background:linear-gradient(90deg,#351713,#101820);box-shadow:inset 2px 0 #b33b28; }
body.professional-ui .main-nav { gap:1px;margin-top:6px;background:#ffffff15;padding:1px; }
body.professional-ui .main-nav button { flex:1;border:0;border-radius:0;margin:0;padding:10px 8px;background:#111d29;color:#8996a4;font-size:9px; }
body.professional-ui .main-nav button:hover { background:#1c2b39;color:#f1dfb7;transform:none; }
body.professional-ui .menu-meta { margin:9px 0 22px!important;padding-top:8px;border-top:1px solid #ffffff10;color:#6f7d89; }
body.professional-ui .menu-meta b { color:#d8bf8b; }
body.professional-ui header { top:30px;left:3.5%;right:3.5%; }
body.professional-ui .top-actions { gap:2px; }
body.professional-ui .top-actions button { border:0;border-radius:0;background:#08131de6;border-top:1px solid #a7834f66;border-bottom:1px solid #ffffff12;clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px);box-shadow:0 10px 22px #0005; }
body.professional-ui .top-actions button:hover { background:#182734;transform:none;color:#f4dda8; }
body.professional-ui .modal { background:radial-gradient(circle at 60% 42%,rgba(29,47,57,.35),rgba(3,7,11,.93) 68%);backdrop-filter:blur(11px) saturate(.7); }
body.professional-ui .professional-panel { position:relative;width:min(940px,92vw);border:0;border-left:2px solid var(--ui-bronze);border-radius:0;padding:48px 54px;background:linear-gradient(115deg,#0b151e 0 66%,#101921 66%);clip-path:polygon(0 0,95% 0,100% 9%,100% 100%,5% 100%,0 91%);box-shadow:0 35px 100px #000d; }
body.professional-ui .professional-panel::before { inset:14px;border:1px solid #c99a4a24;clip-path:inherit; }
body.professional-ui .professional-panel h2 { color:var(--ui-ivory);font:500 36px/1 Georgia,serif;letter-spacing:-.5px; }
body.professional-ui .tutorial-grid { grid-template-columns:repeat(3,1fr);gap:1px;background:#b68a4930;padding:1px; }
body.professional-ui .tutorial-grid article,body.professional-ui .save-card,body.professional-ui .host-card,body.professional-ui .story-list article { border:0;border-radius:0;background:#0f1b25;box-shadow:none; }
body.professional-ui .tutorial-grid article:hover,body.professional-ui .story-list article:hover { background:#172733;box-shadow:inset 2px 0 #58cde3; }
body.professional-ui .save-slots { gap:1px;background:#b68a4930;padding:1px; }
body.professional-ui .save-card button { border:0;border-left:1px solid #b88948;background:#15232e; }
body.professional-ui #enemy-target-hud { top:126px;background:linear-gradient(90deg,transparent,#071018ed 12% 88%,transparent);clip-path:polygon(5% 0,95% 0,100% 100%,0 100%); }
body.professional-ui #combat-hud { right:28px;bottom:30px;border:0;border-left:2px solid var(--ui-bronze);border-radius:0;background:linear-gradient(110deg,#071018ed,#1d1713e8);clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,0 20%); }
@media(max-width:900px){body.professional-ui #menu{width:100%;clip-path:none;padding:100px 28px 34px 45px;background:rgba(5,12,19,.94)}body.professional-ui #menu::before{left:25px}.tutorial-grid{grid-template-columns:1fr 1fr!important}}

#loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #090e17;
  z-index: 40;
  letter-spacing: 2.5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-cyan);
}

#ancient-narration {
  position: fixed;
  left: clamp(20px, 4vw, 68px);
  bottom: clamp(74px, 11vh, 128px);
  width: min(520px, calc(100vw - 40px));
  padding: 20px 24px 18px;
  color: #f7e7bf;
  background:
    linear-gradient(102deg, rgba(30, 19, 15, .94), rgba(48, 34, 24, .84)),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.025) 6px);
  border: 1px solid rgba(226, 183, 101, .58);
  border-left: 4px solid #d9a94f;
  border-radius: 3px 18px 18px 3px;
  box-shadow: 0 24px 70px rgba(0,0,0,.48), inset 0 0 40px rgba(214,153,66,.06);
  backdrop-filter: blur(15px);
  z-index: 19;
  pointer-events: none;
  animation: ancient-record-in .42s cubic-bezier(.2,.8,.2,1);
}

#ancient-narration small {
  color: #e2b965;
  font: 700 10px/1.2 Inter, sans-serif;
  letter-spacing: .25em;
}

#ancient-narration h3 {
  margin: 7px 0 8px;
  font: 700 clamp(20px, 2.4vw, 29px)/1.05 Georgia, serif;
  letter-spacing: .025em;
}

#ancient-narration p {
  margin: 0;
  color: rgba(255,244,218,.86);
  font: 500 14px/1.58 Inter, sans-serif;
}

#ancient-narration div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: rgba(229,201,145,.62);
  font: 700 8px/1 Inter, sans-serif;
  letter-spacing: .18em;
}

#ancient-narration div span {
  display: block;
  width: 32px;
  height: 1px;
  background: #d9a94f;
}

@keyframes ancient-record-in {
  from { opacity: 0; transform: translateX(-28px) scale(.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (max-width: 720px) {
  #ancient-narration { bottom: 140px; padding: 16px 18px; }
  #ancient-narration p { font-size: 12px; line-height: 1.45; }
}

#fps-crosshair {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.9);
  transition: opacity 0.2s ease;
}

button, a {
  user-select: none;
  -webkit-user-select: none;
  outline: none !important;
}

canvas#game {
  outline: none !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#production-narration {
  position: fixed;
  left: clamp(20px, 4vw, 64px);
  bottom: clamp(82px, 12vh, 150px);
  width: min(440px, calc(100vw - 40px));
  padding: 19px 22px;
  color: #fff3d7;
  background: linear-gradient(135deg, rgba(18,19,23,.94), rgba(50,30,23,.88));
  border-left: 3px solid #d5a34c;
  box-shadow: 0 18px 60px rgba(0,0,0,.48);
  backdrop-filter: blur(13px);
  z-index: 22;
  pointer-events: none;
  animation: ancient-record-in .35s ease-out;
}
#production-narration small { color:#e8bd66; font:700 10px/1 Inter,sans-serif; letter-spacing:.22em; }
#production-narration h3 { margin:8px 0; font:700 27px/1.08 Georgia,serif; }
#production-narration p { margin:0 0 11px; color:rgba(255,244,220,.86); font:500 13px/1.55 Inter,sans-serif; }
#production-narration b { color:rgba(235,200,139,.7); font:700 9px/1 Inter,sans-serif; letter-spacing:.16em; }
.production-panel { display:flex; flex-direction:column; gap:14px; max-width:540px; }
.production-panel label { display:flex; align-items:center; justify-content:space-between; gap:22px; color:#f5e6c8; font:600 13px/1.3 Inter,sans-serif; }
.production-panel input[type="range"] { width:min(230px,45vw); accent-color:#d7a64d; }
.production-panel input[type="checkbox"] { width:18px; height:18px; accent-color:#d7a64d; }

/* Cinematic command menu: typography, motion and sound cues carry the hierarchy. */
.legacy-nav-hidden,.story-entry-hidden { display:none!important; }
body.professional-ui #menu {
  width:min(650px,50vw);
  padding-top:clamp(106px,12vh,138px);
  background:
    radial-gradient(circle at 17% 43%,rgba(154,56,31,.14),transparent 26%),
    linear-gradient(102deg,rgba(4,9,14,.995) 0 68%,rgba(4,9,14,.94) 83%,transparent 100%);
}
body.professional-ui #menu h1 {
  position:relative;
  margin:10px 0 8px!important;
  transform:translate3d(var(--menu-parallax-x,0px),var(--menu-parallax-y,0px),0);
  transition:transform .18s ease-out;
}
body.professional-ui #menu h1::after {
  content:'';position:absolute;left:0;bottom:-9px;width:92px;height:2px;
  background:linear-gradient(90deg,#e0af55,#e15d35 52%,transparent);
  box-shadow:0 0 16px #e15d3577;animation:menu-pulse 2.8s ease-in-out infinite;
}
body.professional-ui .professional-launch-grid.command-menu {
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
  width:min(430px,100%);margin:13px 0 8px;padding:0;background:none;
  counter-reset:command;
}
body.professional-ui .command-menu .ancient-action {
  counter-increment:command;isolation:isolate;position:relative;overflow:visible;
  display:grid;grid-template-columns:34px auto 24px;align-items:center;gap:13px;
  width:auto;min-width:315px;min-height:42px;padding:6px 18px 6px 8px;
  border:0;background:none!important;clip-path:none;box-shadow:none!important;
  color:#8c969d;opacity:.74;transform:translateX(0);transition:color .18s,opacity .18s,transform .22s cubic-bezier(.2,.8,.2,1);
}
body.professional-ui .command-menu .ancient-action::before {
  content:'';position:absolute;z-index:-1;left:25px;right:-28px;top:3px;bottom:3px;
  background:linear-gradient(96deg,rgba(104,30,21,.94),rgba(49,25,24,.75) 62%,transparent);
  clip-path:polygon(0 20%,91% 0,100% 47%,91% 100%,0 82%,5% 50%);
  opacity:0;transform:scaleX(.55) translateX(-36px);transform-origin:left;
  transition:opacity .16s,transform .23s cubic-bezier(.18,.82,.24,1);
}
body.professional-ui .command-menu .ancient-action::after {
  content:'';position:absolute;left:36px;top:50%;width:0;height:1px;
  background:linear-gradient(90deg,#efb85b,transparent);transform:translateY(-50%);
  transition:width .24s ease;pointer-events:none;
}
body.professional-ui .command-menu .ancient-action > i {
  width:auto;height:auto;border:0;border-radius:0;background:none;box-shadow:none;transform:none;
  color:#9a7444;font:600 10px/1 Georgia,serif;letter-spacing:.12em;transition:color .18s,transform .22s;
}
body.professional-ui .command-menu .ancient-action > span {
  position:relative;color:inherit;font:800 16px/1 var(--font-main);letter-spacing:1.7px;text-shadow:0 2px 12px #000;
}
body.professional-ui .command-menu .ancient-action > b {
  opacity:0;color:#f5cb78;font:400 27px/1 Georgia,serif;transform:translateX(-12px);transition:opacity .18s,transform .22s;
}
body.professional-ui .command-menu .ancient-action:hover,
body.professional-ui .command-menu .ancient-action:focus-visible,
body.professional-ui .command-menu .ancient-action.command-selected {
  color:#fff0d0;opacity:1;transform:translateX(14px);
}
body.professional-ui .command-menu .ancient-action:hover::before,
body.professional-ui .command-menu .ancient-action:focus-visible::before,
body.professional-ui .command-menu .ancient-action.command-selected::before { opacity:1;transform:scaleX(1) translateX(0); }
body.professional-ui .command-menu .ancient-action:hover::after,
body.professional-ui .command-menu .ancient-action:focus-visible::after,
body.professional-ui .command-menu .ancient-action.command-selected::after { width:240px;opacity:.2; }
body.professional-ui .command-menu .ancient-action:hover > i,
body.professional-ui .command-menu .ancient-action.command-selected > i { color:#ffd27c;transform:translateX(-3px); }
body.professional-ui .command-menu .ancient-action:hover > b,
body.professional-ui .command-menu .ancient-action.command-selected > b { opacity:1;transform:translateX(0); }
body.professional-ui .command-menu .combat-action::before { background:linear-gradient(96deg,#822617,#391a18 63%,transparent); }
body.professional-ui .command-menu .combat-action > span::after {
  content:'DALGA SAVAŞI';margin-left:13px;color:#d16b4c;font:700 7px/1 var(--font-main);letter-spacing:1.5px;vertical-align:middle;
}
.menu-host-status {
  display:flex;align-items:center;gap:8px;margin:4px 0 0 8px;padding:6px 0;border:0;background:none;color:#65737c;
  font:700 7px/1 var(--font-main);letter-spacing:1.3px;opacity:.75;transition:color .2s,opacity .2s;
}
.menu-host-status:hover { color:#a9d9d8;opacity:1; }
.menu-host-status i { width:6px;height:6px;border-radius:50%;background:#65d1ab;box-shadow:0 0 10px #65d1ab;animation:host-breathe 2s ease-in-out infinite; }
.menu-host-status b { color:#94764c;font-weight:700; }

body.professional-ui #menu::before {
  background:
    linear-gradient(transparent,#b98842 12% 86%,transparent),
    repeating-linear-gradient(0deg,transparent 0 19px,rgba(235,190,102,.28) 20px 21px,transparent 22px 31px);
}
body.professional-ui #menu .eyebrow::before { content:'Ⅻ  ';color:#b68543;font-family:Georgia,serif; }
body.professional-ui #menu .eyebrow::after { content:'  ·  SPQR';color:#896a40;font-family:Georgia,serif; }

.menu-atmosphere { position:fixed;z-index:3;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen; }
.menu-atmosphere .orbit-a,.menu-atmosphere .orbit-b {
  position:absolute;right:10vw;top:18vh;width:min(35vw,520px);aspect-ratio:1;border:1px solid rgba(224,170,84,.16);border-radius:50%;
  transform:translate3d(var(--menu-parallax-x,0px),var(--menu-parallax-y,0px),0);animation:orbit-turn 32s linear infinite;
}
.menu-atmosphere .orbit-a::before,.menu-atmosphere .orbit-a::after,.menu-atmosphere .orbit-b::before {
  content:'';position:absolute;border:1px solid rgba(92,211,226,.1);inset:12%;border-radius:50%;clip-path:polygon(0 0,100% 0,100% 46%,0 46%);
}
.menu-atmosphere .orbit-a::after { inset:34%;border-color:rgba(230,92,48,.22); }
.menu-atmosphere .orbit-b { right:17vw;top:27vh;width:min(21vw,310px);border-style:dashed;animation-direction:reverse;animation-duration:21s; }
.menu-sigil { position:absolute;right:25vw;top:43vh;color:rgba(248,185,79,.46);font:400 33px/1 Georgia;text-shadow:0 0 30px #f28a38;animation:sigil-beat 3.2s ease-in-out infinite; }
.menu-atmosphere > span {
  position:absolute;right:calc(4% + (var(--i) * 6.4%));top:calc(12% + (var(--i) * 5.1%));width:3px;height:18px;
  background:linear-gradient(#f9cf78,transparent);opacity:.18;transform:rotate(24deg);
  animation:ember-drift calc(4.2s + (var(--i) * .19s)) linear infinite;animation-delay:calc(var(--i) * -.43s);
}

body.professional-ui .professional-panel.panel-arrive { animation:panel-strike-in .32s cubic-bezier(.16,.82,.24,1) both; }
body.professional-ui .save-card { position:relative;overflow:hidden;min-height:190px;transition:background .2s,transform .2s; }
body.professional-ui .save-card::before { content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(#d7aa57,#713421);transform:scaleY(.15);transform-origin:top;transition:transform .25s; }
body.professional-ui .save-card:hover { background:#172631;transform:translateY(-3px); }
body.professional-ui .save-card:hover::before { transform:scaleY(1); }
body.professional-ui .save-card:nth-child(2) { animation-delay:.045s; }
body.professional-ui .save-card:nth-child(3) { animation-delay:.09s; }

body.professional-ui #portal .portal-panel {
  position:relative;width:min(890px,92vw);max-height:88vh;overflow:auto;padding:48px 58px;border:0;border-left:2px solid #b98a45;border-radius:0;
  background:linear-gradient(112deg,rgba(10,16,22,.985) 0 64%,rgba(29,25,24,.98) 64%);clip-path:polygon(0 0,96% 0,100% 8%,100% 100%,4% 100%,0 92%);
  box-shadow:0 34px 110px #000e;animation:panel-strike-in .3s cubic-bezier(.16,.82,.24,1) both;
}
body.professional-ui #portal-content h2 { color:#f4e9d3;font:500 39px/1 Georgia,serif;letter-spacing:-.7px; }
body.professional-ui #portal-content > div { gap:11px!important; }
body.professional-ui #portal-content label { padding:15px 0;border-bottom:1px solid #d9ab5a20;color:#d7d0c2;font-size:12px; }
body.professional-ui #portal-content input[type=range] { appearance:none;height:2px!important;background:linear-gradient(90deg,#d5a650,#85482c);accent-color:#e7bd68; }
body.professional-ui #portal-content input[type=range]::-webkit-slider-thumb { appearance:none;width:12px;height:12px;transform:rotate(45deg);background:#f4d58b;border:2px solid #6b4528;box-shadow:0 0 13px #d8993e; }
body.professional-ui #portal-content .secondary,body.professional-ui #portal-content .mode-card { border:0;border-left:1px solid #785c39;border-radius:0;background:linear-gradient(90deg,#111d25,transparent);color:#aaa69e;box-shadow:none; }
body.professional-ui #portal-content .secondary:hover,body.professional-ui #portal-content .mode-card:hover,body.professional-ui #portal-content .primary { border-left-color:#e5b657;background:linear-gradient(90deg,#3e261d,#142029);color:#fff0cf;transform:translateX(4px); }

@keyframes menu-pulse { 0%,100%{width:72px;opacity:.55}50%{width:124px;opacity:1} }
@keyframes host-breathe { 50%{opacity:.35;box-shadow:0 0 3px #65d1ab} }
@keyframes orbit-turn { to{transform:translate3d(var(--menu-parallax-x,0px),var(--menu-parallax-y,0px),0) rotate(360deg)} }
@keyframes sigil-beat { 0%,100%{transform:scale(.82) rotate(0);opacity:.32}50%{transform:scale(1.18) rotate(45deg);opacity:.75} }
@keyframes ember-drift { from{translate:0 35vh;opacity:0}18%{opacity:.28}to{translate:-18vw -52vh;opacity:0} }
@keyframes panel-strike-in { from{opacity:0;transform:translateX(-36px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none} }

@media(max-height:820px) and (min-width:901px) {
  body.professional-ui #menu { padding-top:88px; }
  body.professional-ui #menu h1 { font-size:48px!important; }
  body.professional-ui .command-menu .ancient-action { min-height:36px; }
  body.professional-ui .menu-meta { display:none; }
}
@media(max-width:900px) {
  body.professional-ui #menu { width:100%;padding:94px 28px 36px 45px; }
  body.professional-ui .command-menu .ancient-action { min-width:min(340px,85vw); }
  .menu-atmosphere { opacity:.42; }
}
@media(prefers-reduced-motion:reduce) {
  .menu-atmosphere *,.menu-host-status i,body.professional-ui #menu h1::after { animation:none!important; }
  body.professional-ui #menu h1,.menu-atmosphere .orbit-a,.menu-atmosphere .orbit-b { transform:none!important; }
}