:root {
  color-scheme: light;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  --layout-width: 100vw;
  --layout-vw: 1vw;
  --ink: #18372d;
  --muted: #75877f;
  --purple: #6957e8;
  --purple-dark: #5040c8;
  --red: #ed5864;
  --panel: rgba(255, 255, 255, 0.88);
  --line: rgba(40, 72, 61, 0.12);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1f2f6;
  --muted: #a9abb5;
  --panel: rgba(40, 41, 50, 0.9);
  --line: rgba(220, 221, 235, 0.16);
}

* { box-sizing: border-box; }

html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#app {
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

body { background: #eef3ef; color: var(--ink); }
button, input { font: inherit; }
button { cursor: pointer; }

#game-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hidden { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.entry-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center start;
  padding: 28px clamp(24px, calc(var(--layout-vw) * 7), 112px);
  overflow: hidden;
  background: linear-gradient(90deg, rgba(238,243,239,.88) 0%, rgba(238,243,239,.45) 38%, rgba(238,243,239,.08) 68%, rgba(238,243,239,.02) 100%);
}

.entry-stack {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(420px, calc(var(--layout-width) - 36px));
  gap: 12px;
}

.entry-card {
  position: relative;
  width: 100%;
  padding: 38px 42px 25px;
  text-align: center;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(35, 72, 59, 0.1);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(39, 65, 56, 0.16), 0 3px 0 rgba(255,255,255,0.88) inset;
  backdrop-filter: blur(16px);
}

.eyebrow {
  margin: 0 0 15px;
  color: #65776f;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.19em;
}
.eyebrow b { font: inherit; }

.eyebrow span, .status-chip span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #19b98d;
  box-shadow: 0 0 0 4px rgba(25,185,141,0.1);
}

.entry-card h1 {
  margin: 0;
  color: #193c31;
  font-size: clamp(52px, calc(var(--layout-vw) * 8), 72px);
  line-height: 0.92;
  letter-spacing: -0.075em;
  font-weight: 950;
}

.tempor-wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.tempor-wordmark__visual { display: inline-flex; align-items: center; justify-content: center; }
.tempor-wordmark [data-wordmark]::before { content: attr(data-wordmark); }
.tempor-wordmark__base { color: inherit; }
.tempor-wordmark__suffix { color: var(--purple); }
.tempor-core {
  width: .89em;
  height: .89em;
  margin: 0 -.015em 0 -.01em;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
}
.tempor-core__body {
  fill: #f3faf6;
  stroke: var(--purple);
  stroke-width: 2.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1.1px rgb(157 145 255 / 82%));
}
.tempor-core__projectile {
  fill: var(--purple);
  stroke: var(--purple);
  stroke-width: 1.15;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1.15px rgb(157 145 255 / 90%));
}
.tempor-wordmark--hero { color: #193c31; }
.tagline { margin: 13px 0 0; color: var(--purple); font-size: 18px; font-weight: 750; letter-spacing: -0.02em; }
.pitch { margin: 16px 0 23px; color: #72817b; font-size: 13px; line-height: 1.58; }

#entry-form { text-align: left; }
#entry-form label { display: block; margin: 0 0 8px 4px; color: #465a53; font-size: 10px; font-weight: 850; letter-spacing: 0.15em; }
.input-shell { position: relative; }
.input-shell input {
  width: 100%;
  height: 54px;
  padding: 0 62px 0 17px;
  color: var(--ink);
  background: #f8faf9;
  border: 1.5px solid #d8e1dc;
  border-radius: 13px;
  outline: none;
  font-weight: 650;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.input-shell input::placeholder { color: #a5b1ac; font-weight: 500; }
.input-shell input:focus { background: #fff; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(105,87,232,0.1); }
.input-shell input.invalid { border-color: var(--red); box-shadow: 0 0 0 4px rgba(237,88,100,0.1); }
.char-count { position: absolute; right: 16px; top: 19px; color: #64776f; font-size: 11px; font-weight: 700; }
.char-count b { color: #52675e; }
.form-error { min-height: 20px; margin: 6px 4px 2px; color: #d94f5a; font-size: 11px; font-weight: 650; }

#enter-arena, .modal-card > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 55px;
  color: #fff;
  background: var(--purple);
  border: 0;
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(105,87,232,0.25), inset 0 1px 0 rgba(255,255,255,0.25);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.13em;
  transition: transform .16s, background .16s, box-shadow .16s;
}
#enter-arena:hover, .modal-card > button:hover { transform: translateY(-2px); background: #5e4cdc; box-shadow: 0 11px 27px rgba(105,87,232,0.32); }
#enter-arena:active, .modal-card > button:active { transform: translateY(0); }
.button-arrow { font-size: 20px; line-height: 1; font-weight: 500; }

.entry-footer { display: flex; justify-content: center; gap: 22px; margin-top: 26px; color: #829089; font-size: 8px; font-weight: 800; letter-spacing: 0.09em; }
.entry-footer span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.guide-preview {
  position: relative;
  display: grid;
  min-height: 88px;
  grid-template-columns: 70px 1fr 34px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  overflow: hidden;
  color: var(--ink);
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(35,72,59,.11);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(39,65,56,.13), 0 1px 0 rgba(255,255,255,.88) inset;
  backdrop-filter: blur(16px);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.guide-preview:hover { transform: translateY(-3px); border-color: rgba(105,87,232,.26); box-shadow: 0 23px 55px rgba(39,65,56,.17), 0 1px 0 rgba(255,255,255,.9) inset; }
.guide-preview-art { position: relative; display: grid; width: 66px; height: 66px; place-items: center; background: radial-gradient(circle, rgba(105,87,232,.12), rgba(105,87,232,.025) 58%, transparent 60%); border-radius: 50%; }
.guide-preview-orbit { position: absolute; inset: 7px; border: 1px dashed rgba(105,87,232,.35); border-radius: 50%; animation: guide-orbit-spin 8s linear infinite; }
.guide-preview-orbit::after { position: absolute; top: 2px; left: 7px; width: 6px; height: 6px; background: #19b98d; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 3px 8px rgba(25,185,141,.25); content: ""; }
.guide-preview-shard { position: relative; display: block; width: 27px; height: 25px; background: var(--purple); clip-path: polygon(47% 0, 89% 17%, 100% 62%, 68% 100%, 18% 89%, 0 42%, 19% 10%); filter: drop-shadow(0 7px 6px rgba(105,87,232,.24)); animation: guide-shard-spin 3.4s ease-in-out infinite; }
.guide-preview-shard::after { position: absolute; inset: 6px 7px 9px 6px; background: rgba(255,255,255,.26); clip-path: inherit; content: ""; }
.guide-preview-speck { position: absolute; width: 5px; height: 5px; background: #e9a52e; border-radius: 50%; box-shadow: 0 0 0 3px rgba(233,165,46,.1); }
.guide-preview-speck--one { top: 8px; right: 4px; animation: guide-speck-float 2.2s ease-in-out infinite; }
.guide-preview-speck--two { bottom: 9px; left: 5px; background: #51aee7; animation: guide-speck-float 2.2s -.9s ease-in-out infinite; }
.guide-preview-copy { display: grid; min-width: 0; gap: 3px; text-align: left; }
.guide-preview-copy small { display: flex; align-items: center; gap: 6px; color: var(--purple); font-size: 7px; font-weight: 950; letter-spacing: .13em; }
.guide-preview-copy small b { padding: 4px 6px; color: #fff; background: var(--purple); border-radius: 999px; font-size: 7px; letter-spacing: .11em; line-height: 1; }
.guide-preview-copy small span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-preview-copy strong { color: var(--ink); font-size: 13px; font-weight: 850; letter-spacing: -.015em; }
.guide-preview-copy > span { overflow: hidden; color: #7d8d86; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.guide-preview-arrow { display: grid; width: 31px; height: 31px; place-items: center; color: #fff; background: var(--ink); border-radius: 50%; font-size: 14px; transition: transform .2s ease, background .2s ease; }
.guide-preview:hover .guide-preview-arrow { background: var(--purple); transform: translateX(3px); }
@keyframes guide-orbit-spin { to { transform: rotate(360deg); } }
@keyframes guide-shard-spin { 0%,100% { transform: rotate(-12deg) scale(.94); } 50% { transform: rotate(170deg) scale(1.08); } }
@keyframes guide-speck-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.key-icon, .mouse-icon { display: inline-grid; place-items: center; min-width: 23px; height: 20px; padding: 0 4px; color: #5e7068; background: #fff; border: 1px solid #cdd8d3; border-bottom-width: 2px; border-radius: 5px; font-style: normal; font-size: 7px; font-weight: 850; letter-spacing: 0; }
.mouse-icon { min-width: 13px; width: 13px; padding: 0; border-radius: 7px; }
.mouse-icon::before { content: ""; width: 2px; height: 5px; margin-top: -6px; border-radius: 2px; background: #8b9993; }
.build-actions { position: absolute; bottom: 18px; left: 20px; z-index: 5; display: flex; align-items: center; gap: 12px; }
.build-label { margin: 0; color: #9ba8a2; font-size: 8px; font-weight: 800; letter-spacing: 0.15em; }
.feedback-open {
  padding: 5px 8px;
  color: #6d7974;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(43,77,64,.13);
  border-radius: 999px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
  transition: color .16s, border-color .16s, background .16s;
}
.feedback-open:hover { color: var(--purple); background: rgba(255,255,255,.94); border-color: rgba(105,87,232,.28); }
.feedback-open:focus-visible { outline: 3px solid rgba(105,87,232,.24); outline-offset: 2px; }

.feedback-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  overflow: visible;
  color: var(--ink);
  background: transparent;
  border: 0;
}
.feedback-dialog::backdrop { background: rgba(18,28,24,.48); backdrop-filter: blur(8px); }
.feedback-dialog-card {
  position: relative;
  max-height: min(760px, calc(100dvh - 32px));
  padding: 30px;
  overflow-y: auto;
  background: rgba(251,253,251,.98);
  border: 1px solid rgba(43,77,64,.16);
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(15,28,23,.28), inset 0 1px rgba(255,255,255,.92);
}
.feedback-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  color: #687871;
  background: rgba(43,77,64,.07);
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
}
.feedback-dialog h2 { margin: 5px 42px 7px 0; font-size: 28px; letter-spacing: -.035em; }
.feedback-intro { max-width: 440px; margin: 0 0 22px; color: #6f7e78; font-size: 12px; line-height: 1.55; }
#feedback-form { display: grid; }
#feedback-form > label:not(.feedback-honeypot) { margin: 0 0 7px; color: #55675f; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
#feedback-form input,
#feedback-form textarea {
  width: 100%;
  padding: 12px 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd8d4;
  border-radius: 11px;
  outline: 0;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
#feedback-form input:focus,
#feedback-form textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(105,87,232,.12); }
#feedback-form [aria-invalid="true"] { border-color: #d94f5a; box-shadow: 0 0 0 3px rgba(217,79,90,.09); }
.feedback-field-error { min-height: 17px; margin: 4px 2px 8px; color: #c83f4b; font-size: 10px; line-height: 1.3; }
.feedback-message-meta { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.feedback-message-meta .feedback-field-error { flex: 1; }
.feedback-message-meta span { padding-top: 5px; color: #8b9892; font-size: 9px; font-variant-numeric: tabular-nums; }
.feedback-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.feedback-status { min-height: 18px; margin: 0 2px 8px; color: #c83f4b; font-size: 10px; }
.feedback-actions { display: flex; justify-content: flex-end; gap: 9px; }
.feedback-primary,
.feedback-secondary { min-height: 42px; padding: 0 17px; border-radius: 11px; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.feedback-primary { color: #fff; background: var(--purple); border: 1px solid var(--purple); box-shadow: 0 9px 22px rgba(105,87,232,.22); }
.feedback-primary:hover { background: #5c4bd1; }
.feedback-primary:disabled { opacity: .58; cursor: wait; }
.feedback-secondary { color: #53665e; background: transparent; border: 1px solid #ccd7d2; }
.feedback-success { min-height: 330px; place-content: center; justify-items: center; text-align: center; }
.feedback-success:not(.hidden) { display: grid; }
.feedback-success > span { display: grid; width: 54px; height: 54px; margin-bottom: 14px; place-items: center; color: #fff; background: #26a47f; border-radius: 50%; box-shadow: 0 12px 30px rgba(38,164,127,.22); font-size: 23px; }
.feedback-success h2 { margin: 5px 0 8px; }
.feedback-success > p:not(.eyebrow) { max-width: 390px; margin: 0 0 22px; color: #6f7e78; font-size: 12px; line-height: 1.55; }

.entry-corner-controls {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}
.entry-settings-toggle,
.language-toggle {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #52665e;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,77,64,.13);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(28,54,45,.11);
  backdrop-filter: blur(14px);
}
.entry-settings-toggle:hover,
.language-toggle:hover { color: var(--purple); background: rgba(255,255,255,.94); }
.entry-settings-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.entry-settings-toggle:focus-visible,
.language-toggle:focus-visible,
.language-option:focus-visible,
.entry-settings-panel button:focus-visible,
.entry-settings-panel select:focus-visible { outline: 3px solid rgba(105,87,232,.25); outline-offset: 2px; }
.language-switcher { position: relative; }
.language-toggle {
  width: auto;
  min-width: 76px;
  grid-template-columns: 28px auto 10px;
  gap: 7px;
  padding: 0 10px;
  color: #52665e;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}
.language-flag {
  display: block;
  width: 28px;
  height: 20px;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(32,55,47,.15), 0 2px 5px rgba(32,55,47,.12);
}
.language-chevron { width: 10px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.language-toggle[aria-expanded="true"] .language-chevron { transform: rotate(180deg); }
.language-menu {
  position: absolute;
  top: 50px;
  right: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: min(358px, calc(var(--layout-width) - 28px));
  max-height: min(520px, calc(100vh - 86px));
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(43,77,64,.13);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(25,49,41,.18);
}
.language-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 7px 8px;
  color: #50635b;
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.language-option:hover { color: var(--purple); background: #f4f2ff; }
.language-option.is-current { color: #5745cf; background: #f0edff; border-color: rgba(105,87,232,.2); }
.language-option span { overflow: hidden; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.language-option small { color: #98a59f; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.language-option.is-current small { color: #7668d7; }
.entry-settings-panel {
  position: absolute;
  top: 72px;
  right: 24px;
  z-index: 6;
  width: min(350px, calc(var(--layout-width) - 32px));
  padding: 16px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(43,77,64,.12);
  border-radius: 17px;
  box-shadow: 0 22px 60px rgba(25,49,41,.18);
  backdrop-filter: blur(18px);
}
.entry-settings-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 13px; }
.entry-settings-heading > div { display: grid; gap: 2px; }
.entry-settings-heading span { color: #8a9892; font-size: 7px; font-weight: 900; letter-spacing: .15em; }
.entry-settings-heading strong { color: var(--ink); font-size: 15px; }
.entry-settings-heading button { width: 28px; height: 28px; padding: 0; color: #75857e; background: #f2f5f3; border: 0; border-radius: 8px; font-size: 18px; }

.game-ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.brand-chip { position: absolute; top: 24px; left: 28px; color: var(--ink); font-size: 22px; font-weight: 950; letter-spacing: -0.06em; }
.status-chip { position: absolute; top: 57px; left: 30px; color: #73837c; font-size: 8px; font-weight: 850; letter-spacing: 0.16em; }
.status-chip span { width: 6px; height: 6px; margin-right: 5px; }
.panel { background: var(--panel); border: 1px solid rgba(42,72,62,0.1); box-shadow: 0 13px 35px rgba(32,55,47,0.1); backdrop-filter: blur(12px); }

.leaderboard { position: absolute; top: 22px; right: 24px; width: 216px; padding: 15px 14px 12px; border-radius: 16px; }
.leaderboard-header { display: flex; align-items: center; margin-bottom: 10px; padding: 0 4px 9px; border-bottom: 1px solid var(--line); }
.leaderboard-header strong { font-size: 10px; letter-spacing: 0.14em; }
.leader-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; min-height: 26px; padding: 0 4px; border-radius: 7px; font-size: 10px; }
.leader-row.me { color: var(--purple); background: rgba(105,87,232,0.08); font-weight: 800; }
.leaderboard-self-divider { height: 1px; margin: 8px 4px 7px; background: var(--line); }
.leader-row.self-position { min-height: 28px; }
.leader-row .rank { color: #9aa6a1; font-size: 9px; font-weight: 850; }
.leader-row .rank.first { color: #e5a12d; }
.leader-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.leader-row .time { color: #5f7069; font-size: 9px; font-weight: 800; }

.timer-dock { position: absolute; bottom: 20px; left: 50%; width: 260px; transform: translateX(-50%); text-align: center; }
.timer-dock > span { display: block; color: #72827b; font-size: 8px; font-weight: 850; letter-spacing: 0.16em; }
.timer-dock > strong { display: block; margin: 3px 0 7px; color: var(--ink); font-size: 27px; line-height: 1; letter-spacing: -0.04em; text-shadow: 0 1px 0 #fff; }
.flow-readout {
  --flow-level: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  width: 188px;
  min-height: 48px;
  margin: 0 auto 8px;
  padding: 6px 10px 6px 12px;
  text-align: left;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(43,74,63,.11);
  border-radius: 13px;
  box-shadow: 0 8px 24px rgba(31,57,48,.1);
  transition: width .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.flow-readout > span { align-self: end; color: #71817a; font-size: 7px; font-weight: 900; letter-spacing: .17em; }
.flow-readout > strong {
  grid-column: 2;
  grid-row: 1 / 3;
  display: block;
  min-width: 72px;
  margin-left: 9px;
  color: #27443a;
  font-size: 30px;
  font-weight: 1000;
  line-height: .95;
  letter-spacing: -.07em;
  text-align: right;
  text-shadow: 0 2px 0 #fff;
}
.flow-readout > em { align-self: start; margin-top: 2px; color: #83918c; font-size: 6px; font-style: normal; font-weight: 900; letter-spacing: .09em; }
.flow-readout.resting { border-color: rgba(22,147,114,.2); }
.flow-readout.resting > strong, .flow-readout.resting > em { color: #168c70; }
.flow-readout.moving > strong { color: #5a49cf; }
.flow-readout.overdrive {
  width: 222px;
  border-color: rgba(228,78,90,calc(.3 + var(--flow-level) * .45));
  background: linear-gradient(115deg, rgba(255,255,255,.94), rgba(255,232,226,.94));
  box-shadow: 0 9px 28px rgba(216,62,76,calc(.16 + var(--flow-level) * .2));
  animation: flow-pulse .72s ease-in-out infinite alternate;
}
.flow-readout.overdrive > strong { color: #df3d4d; font-size: 34px; }
.flow-readout.overdrive > em { color: #c84b55; }
.flow-readout.anomaly {
  width: 222px;
  border-color: rgba(127,78,221,.48);
  background: linear-gradient(115deg, rgba(255,255,255,.95), rgba(244,235,255,.95), rgba(255,242,224,.94));
  box-shadow: 0 9px 30px rgba(115,70,207,.2), 0 0 24px rgba(242,139,48,.11);
}
.flow-readout.anomaly > strong { color: #7446cb; font-size: 34px; }
.flow-readout.anomaly > em { color: #95562f; }
.flow-readout.flow-hundred {
  width: 286px;
  min-height: 58px;
}
.flow-readout.flow-hundred > strong {
  min-width: 154px;
  font-size: 48px;
}
.flow-readout.flow-thousand {
  width: 350px;
  min-height: 70px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.flow-readout.flow-thousand > strong {
  min-width: 230px;
  font-size: 64px;
}
@keyframes flow-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.025); }
}
.timer-track { height: 5px; overflow: hidden; background: rgba(31,63,52,0.12); border-radius: 5px; box-shadow: 0 1px 0 rgba(255,255,255,0.8); }
.timer-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #6b59e8, #8c7bf0); border-radius: inherit; transition: width .2s, background .2s; }

.controls-hint { position: absolute; left: 25px; bottom: 24px; display: flex; gap: 17px; padding: 9px 12px; border-radius: 12px; }
.controls-hint > div { display: flex; align-items: center; gap: 6px; color: #78877f; font-size: 7px; font-weight: 850; letter-spacing: 0.09em; }
.controls-hint .key-icon, .controls-hint .mouse-icon { background: #f9fbfa; }
.control-toggle {
  pointer-events: auto;
  position: absolute;
  right: 25px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 0 11px;
  border: 1px solid rgba(43,77,64,.12);
  border-radius: 11px;
  background: rgba(250,252,251,.9);
  color: #65766f;
  box-shadow: 0 8px 24px rgba(35,62,52,.08);
  font: 850 7px/1 Inter, Arial, sans-serif;
  letter-spacing: .11em;
  cursor: pointer;
}
.control-toggle.keyboard { color: #5b49d0; border-color: rgba(107,89,232,.28); }
.control-toggle.locked { color: #7b4fb4; border-color: rgba(123,79,180,.34); background: rgba(248,245,253,.94); }
.control-toggle .key-icon { background: #fff; }
.drive-status {
  position: absolute;
  right: 25px;
  bottom: 70px;
  display: grid;
  min-width: 176px;
  min-height: 44px;
  grid-template-columns: auto 1fr 7px;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  color: #667871;
  background: rgba(250,252,251,.9);
  border: 1px solid rgba(43,77,64,.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(35,62,52,.08);
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
.drive-status__keys { display: flex; gap: 3px; }
.drive-status__keys i { padding: 5px 4px; color: #6f7e78; background: #fff; border: 1px solid rgba(43,77,64,.13); border-bottom-width: 2px; border-radius: 5px; font-size: 5px; font-style: normal; font-weight: 950; letter-spacing: .04em; }
.drive-status__copy { display: grid; gap: 2px; }
.drive-status__copy small { color: #929f9a; font-size: 5px; font-weight: 900; letter-spacing: .16em; }
.drive-status__copy strong { color: #5b49d0; font-size: 7px; font-weight: 950; letter-spacing: .1em; }
.drive-status__lamp { width: 7px; height: 7px; background: #9aa7a2; border-radius: 50%; box-shadow: 0 0 0 3px rgba(117,137,129,.1); }
.drive-status.accelerating { border-color: rgba(228,78,90,.38); background: rgba(255,247,245,.94); box-shadow: 0 9px 26px rgba(216,62,76,.14); transform: translateY(-1px); }
.drive-status.accelerating .drive-status__copy strong { color: #df3d4d; }
.drive-status.accelerating .drive-status__lamp { background: #ed5864; box-shadow: 0 0 0 4px rgba(237,88,100,.12); }
.drive-status.held { border-color: rgba(107,89,232,.28); }
.drive-status.held .drive-status__lamp { background: #6957e8; box-shadow: 0 0 0 3px rgba(105,87,232,.12); }

.event-toast { position: absolute; top: 23px; left: 50%; transform: translate(-50%, -20px); padding: 9px 16px; color: #fff; background: #2f5045; border-radius: 20px; box-shadow: 0 9px 25px rgba(38,67,57,.2); opacity: 0; font-size: 9px; font-weight: 900; letter-spacing: .13em; transition: opacity .22s, transform .22s; }
.event-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.event-toast.danger { background: #df5660; }
.event-toast.gold { background: #d99628; }

.modal-screen { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(24,44,37,0.32); backdrop-filter: blur(9px); }
#death-screen {
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease-out;
}
#death-screen .death-card {
  opacity: 0;
  transform: translateY(12px) scale(.975);
  transition: opacity .24s ease-out, transform .3s cubic-bezier(.2,.75,.25,1);
}
#death-screen.visible { opacity: 1; pointer-events: auto; }
#death-screen.visible .death-card { opacity: 1; transform: translateY(0) scale(1); }
.modal-card { width: min(400px, calc(var(--layout-width) - 34px)); padding: 42px; text-align: center; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.8); border-radius: 25px; box-shadow: 0 28px 80px rgba(23,45,37,.25); }
.modal-card h2 { margin: 0; color: var(--ink); font-size: 48px; letter-spacing: -.06em; }
.modal-card > p:not(.eyebrow) { margin: 10px 0 28px; color: #72827b; font-size: 13px; }
.graphics-settings { padding: 14px; text-align: left; background: #f3f6f4; border: 1px solid rgba(42,72,62,.07); border-radius: 15px; }
.graphics-settings-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; color: #829089; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.graphics-settings-heading strong { color: #5d4bd5; font-size: 8px; }
.theme-settings { margin-bottom: 8px; }
.locale-settings { display: grid; gap: 7px; margin-bottom: 8px; padding: 12px 14px; text-align: left; background: #f3f6f4; border: 1px solid rgba(42,72,62,.07); border-radius: 15px; }
.locale-settings label { color: #829089; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.locale-settings select { width: 100%; min-height: 36px; padding: 0 34px 0 10px; color: #465c53; background: rgba(255,255,255,.84); border: 1px solid rgba(43,77,64,.12); border-radius: 9px; font: 800 10px/1 Inter, Arial, sans-serif; cursor: pointer; }
.graphics-quality-options { display: grid; grid-template-columns: .8fr 1.1fr 1.35fr; gap: 5px; }
.theme-options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.graphics-quality-options button,
.theme-options button { min-width: 0; padding: 10px 5px; color: #78877f; background: rgba(255,255,255,.78); border: 1px solid rgba(43,77,64,.1); border-radius: 9px; font-size: 7px; font-weight: 900; letter-spacing: .06em; transition: color .16s, border-color .16s, background .16s, box-shadow .16s; }
.graphics-quality-options button:hover,
.theme-options button:hover { color: #5b49d0; border-color: rgba(107,89,232,.25); }
.graphics-quality-options button.active,
.theme-options button.active { color: #5745cf; background: #fff; border-color: rgba(107,89,232,.38); box-shadow: 0 5px 14px rgba(75,59,171,.1); }
.graphics-settings > p { min-height: 22px; margin: 9px 2px 0; color: #78877f; font-size: 9px; line-height: 1.35; }
.eyebrow.danger { color: #d6545e; }
.eyebrow.danger span { background: #ed5864; box-shadow: 0 0 0 4px rgba(237,88,100,.1); }
.death-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 25px; }
.death-stats > div { padding: 14px; background: #f3f6f4; border-radius: 12px; }
.death-stats span { display: block; margin-bottom: 4px; color: #8b9993; font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.death-stats strong { color: #344d44; font-size: 17px; }

:root[data-layout="compact"] .entry-screen { place-items: center; padding: 70px 18px 38px; background: rgba(238,243,239,.38); }
:root[data-layout="compact"] .entry-stack { width: 100%; max-width: 420px; gap: 10px; }
:root[data-layout="compact"] .entry-card { width: 100%; padding: 32px 28px 23px; }
:root[data-layout="compact"] .guide-preview { min-height: 82px; grid-template-columns: 60px 1fr 31px; padding: 8px 12px 8px 8px; border-radius: 18px; }
:root[data-layout="compact"] .guide-preview-art { width: 58px; height: 58px; }
:root[data-layout="compact"] .entry-footer { gap: 10px; }
:root[data-layout="compact"] .entry-corner-controls { top: 14px; right: 14px; }
:root[data-layout="compact"] .entry-settings-panel { top: 62px; right: 14px; }
:root[data-layout="compact"] .leaderboard { width: 180px; right: 12px; top: 12px; }
:root[data-layout="compact"] .controls-hint { display: none; }
:root[data-layout="compact"] .control-toggle { top: 71px; right: auto; bottom: auto; left: 16px; }
:root[data-layout="compact"] .drive-status { top: 113px; right: auto; bottom: auto; left: 16px; min-width: 164px; }
:root[data-layout="compact"] .brand-chip { left: 16px; top: 16px; }
:root[data-layout="compact"] .status-chip { left: 18px; top: 48px; }
:root[data-layout="compact"] .modal-card { padding: 34px 24px; }
:root[data-layout="compact"] .graphics-quality-options button { padding: 8px; }

.mobile-controls,
.mobile-rotate-hint,
.mobile-hud-button,
.ios-install-guide { display: none; }

:root[data-mobile-device="true"] body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
:root[data-mobile-device="true"] #game-canvas,
:root[data-mobile-device="true"] .game-ui {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
:root[data-mobile-device="true"] .controls-hint,
:root[data-mobile-device="true"] .control-toggle,
:root[data-mobile-device="true"] .drive-status { display: none !important; }
:root[data-mobile-device="true"] .event-toast,
:root[data-mobile-device="true"] .mobile-rotate-hint { display: none !important; }
:root[data-mobile-device="true"] .brand-chip { top: max(12px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); font-size: 17px; }
:root[data-mobile-device="true"] .status-chip { top: max(39px, calc(env(safe-area-inset-top) + 27px)); left: max(15px, env(safe-area-inset-left)); font-size: 6px; }
:root[data-mobile-device="true"] .leaderboard {
  top: max(52px, calc(env(safe-area-inset-top) + 43px));
  right: max(10px, env(safe-area-inset-right));
  display: none;
  width: 154px;
  padding: 9px 9px 8px;
  border-radius: 13px;
}
:root[data-mobile-device="true"] .leaderboard.mobile-open { display: block; }
:root[data-mobile-device="true"] .leaderboard-header { margin-bottom: 5px; padding: 0 3px 5px; }
:root[data-mobile-device="true"] .leaderboard-header strong { font-size: 7px; }
:root[data-mobile-device="true"] .leader-row { grid-template-columns: 18px 1fr auto; min-height: 20px; padding: 0 3px; font-size: 8px; }
:root[data-mobile-device="true"] .leader-row .rank,
:root[data-mobile-device="true"] .leader-row .time { font-size: 7px; }
:root[data-mobile-device="true"] .leaderboard-self-divider { margin: 5px 3px 4px; }
:root[data-mobile-device="true"] .leader-row.self-position { min-height: 21px; }
:root[data-mobile-device="true"] .mobile-hud-button {
  position: absolute;
  z-index: 7;
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 58px;
  height: 37px;
  padding: 0 9px;
  pointer-events: auto;
  touch-action: manipulation;
  color: #5d4bd5;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(67,72,129,.16);
  border-radius: 11px;
  box-shadow: 0 7px 20px rgba(31,56,48,.12);
  backdrop-filter: blur(10px);
}
:root[data-mobile-device="true"] .mobile-hud-button small { color: #7b8983; font-size: 5px; font-weight: 900; letter-spacing: .13em; }
:root[data-mobile-device="true"] .mobile-fullscreen {
  top: max(60px, calc(env(safe-area-inset-top) + 50px));
  left: max(14px, env(safe-area-inset-left));
  grid-template-columns: 15px auto;
  gap: 6px;
}
:root[data-mobile-device="true"] .mobile-fullscreen svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-mobile-device="true"] .mobile-fullscreen.active { color: #168c70; border-color: rgba(22,140,112,.3); }
:root[data-mobile-device="true"] .mobile-fullscreen.install { width: 80px; color: #d17429; border-color: rgba(209,116,41,.32); }
:root[data-mobile-device="true"] .mobile-fullscreen.standalone { display: none !important; }
:root[data-mobile-device="true"] .mobile-fullscreen.unavailable { width: 102px; color: #d17429; border-color: rgba(209,116,41,.32); }
:root[data-mobile-device="true"] .ios-install-guide:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: end center;
  padding: 18px max(18px, env(safe-area-inset-right)) max(18px, calc(env(safe-area-inset-bottom) + 12px)) max(18px, env(safe-area-inset-left));
  pointer-events: auto;
  touch-action: manipulation;
  background: rgba(16,22,20,.42);
  backdrop-filter: blur(7px);
}
:root[data-mobile-device="true"] .ios-install-card {
  position: relative;
  width: min(420px, 100%);
  padding: 22px 22px 18px;
  color: #24352f;
  background: rgba(250,252,250,.97);
  border: 1px solid rgba(43,77,64,.16);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(8,16,13,.32);
}
:root[data-mobile-device="true"] .ios-install-card h2 { max-width: 310px; margin: 5px 0 14px; font-size: 20px; line-height: 1.05; }
:root[data-mobile-device="true"] .ios-install-card .eyebrow { margin: 0; color: #6957e8; font-size: 8px; }
:root[data-mobile-device="true"] .ios-install-card ol { display: grid; gap: 8px; margin: 0 0 16px; padding-left: 19px; color: #5d6c66; font-size: 12px; line-height: 1.4; }
:root[data-mobile-device="true"] .ios-install-card li::marker { color: #6957e8; font-weight: 900; }
:root[data-mobile-device="true"] .ios-install-icon { display: grid; width: 38px; height: 38px; margin-bottom: 12px; place-items: center; color: #6957e8; background: rgba(105,87,232,.1); border-radius: 12px; }
:root[data-mobile-device="true"] .ios-install-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-mobile-device="true"] .ios-install-close { position: absolute; top: 11px; right: 12px; width: 32px; height: 32px; padding: 0; color: #687871; background: rgba(43,77,64,.07); border: 0; border-radius: 50%; font-size: 23px; line-height: 1; }
:root[data-mobile-device="true"] .ios-install-done { width: 100%; min-height: 42px; color: #fff; background: #5d4bd5; border: 0; border-radius: 12px; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
:root[data-mobile-device="true"] .mobile-leaderboard-toggle {
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
}
:root[data-mobile-device="true"] .mobile-leaderboard-toggle strong { color: #5d4bd5; font-size: 9px; line-height: 1; }
:root[data-mobile-device="true"] .mobile-leaderboard-toggle.active { color: #fff; background: #5d4bd5; border-color: rgba(255,255,255,.55); }
:root[data-mobile-device="true"] .mobile-leaderboard-toggle.active strong,
:root[data-mobile-device="true"] .mobile-leaderboard-toggle.active small { color: #fff; }
:root[data-mobile-device="true"] .mobile-controls {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  pointer-events: none;
}
:root[data-mobile-device="true"] .mobile-stick {
  --stick-size: 136px;
  position: absolute;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: var(--stick-size);
  height: var(--stick-size);
  pointer-events: auto;
  touch-action: none;
  border-radius: 50%;
  isolation: isolate;
}
:root[data-mobile-device="true"] .mobile-stick--move { --stick-size: 152px; left: max(12px, env(safe-area-inset-left)); }
:root[data-mobile-device="true"] .mobile-stick--aim { right: max(12px, env(safe-area-inset-right)); }
:root[data-mobile-device="true"] .mobile-stick__ring {
  position: absolute;
  inset: 8px;
  z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,.5) 0 29%, rgba(255,255,255,.22) 30% 56%, rgba(105,87,232,.12) 57% 100%);
  border: 1px solid rgba(50,77,67,.2);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(31,56,48,.14), inset 0 0 0 7px rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
:root[data-mobile-device="true"] .mobile-stick__knob {
  --stick-x: 0px;
  --stick-y: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 47px;
  height: 47px;
  margin: -23.5px;
  transform: translate(var(--stick-x), var(--stick-y));
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(68,61,154,.34);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(57,46,148,.2), inset 0 1px 0 rgba(255,255,255,.9);
  transition: box-shadow .12s, background .12s;
}
:root[data-mobile-device="true"] .mobile-stick > strong,
:root[data-mobile-device="true"] .mobile-stick > small {
  position: absolute;
  left: 50%;
  z-index: 2;
  width: 100%;
  transform: translateX(-50%);
  pointer-events: none;
  text-align: center;
  letter-spacing: .13em;
}
:root[data-mobile-device="true"] .mobile-stick > strong { bottom: 39px; color: #5949cf; font-size: 7px; font-weight: 950; }
:root[data-mobile-device="true"] .mobile-stick > small { bottom: 26px; color: #7f8d87; font-size: 4px; font-weight: 900; }
:root[data-mobile-device="true"] .mobile-stick.active .mobile-stick__ring { border-color: rgba(105,87,232,.42); box-shadow: 0 10px 30px rgba(75,59,171,.2), inset 0 0 0 7px rgba(105,87,232,.06); }
:root[data-mobile-device="true"] .mobile-stick.overdrive .mobile-stick__ring {
  border-color: rgba(237,88,100,.58);
  background: radial-gradient(circle, rgba(255,255,255,.5) 0 29%, rgba(255,238,235,.3) 30% 56%, rgba(237,88,100,.22) 57% 100%);
  box-shadow: 0 10px 32px rgba(218,65,78,.24), inset 0 0 0 7px rgba(237,88,100,.08);
}
:root[data-mobile-device="true"] .mobile-stick.overdrive > strong { color: #df3d4d; }
:root[data-mobile-device="true"] .mobile-stick--aim.charging .mobile-stick__ring {
  border-color: rgba(237,88,100,.58);
  background: radial-gradient(circle, rgba(255,255,255,.56) 0 29%, rgba(255,238,235,.32) 30% 56%, rgba(237,88,100,.2) 57% 100%);
  box-shadow: 0 10px 34px rgba(218,65,78,.28), 0 0 0 8px rgba(237,88,100,.08), inset 0 0 0 7px rgba(237,88,100,.08);
}
:root[data-mobile-device="true"] .mobile-stick--aim.charging .mobile-stick__knob { border-color: rgba(237,88,100,.58); box-shadow: 0 6px 20px rgba(216,62,76,.32), inset 0 1px 0 rgba(255,255,255,.9); }
:root[data-mobile-device="true"] .mobile-stick--aim.charging > strong { color: #df3d4d; }
:root[data-mobile-device="true"] .timer-dock {
  bottom: max(10px, env(safe-area-inset-bottom));
  width: 174px;
}
:root[data-mobile-device="true"] .timer-dock > span { display: none; }
:root[data-mobile-device="true"] .timer-dock > strong { margin: 0 0 4px; font-size: 19px; }
:root[data-mobile-device="true"] .flow-readout,
:root[data-mobile-device="true"] .flow-readout.overdrive,
:root[data-mobile-device="true"] .flow-readout.anomaly,
:root[data-mobile-device="true"] .flow-readout.flow-hundred,
:root[data-mobile-device="true"] .flow-readout.flow-thousand {
  width: 156px;
  min-height: 37px;
  margin-bottom: 5px;
  padding: 4px 8px 4px 9px;
  border-radius: 10px;
}
:root[data-mobile-device="true"] .flow-readout > span { font-size: 5px; }
:root[data-mobile-device="true"] .flow-readout > em { max-width: 75px; overflow: hidden; font-size: 4px; text-overflow: ellipsis; white-space: nowrap; }
:root[data-mobile-device="true"] .flow-readout > strong,
:root[data-mobile-device="true"] .flow-readout.overdrive > strong,
:root[data-mobile-device="true"] .flow-readout.anomaly > strong,
:root[data-mobile-device="true"] .flow-readout.flow-hundred > strong,
:root[data-mobile-device="true"] .flow-readout.flow-thousand > strong {
  min-width: 60px;
  margin-left: 5px;
  font-size: 24px;
}
:root[data-mobile-device="true"] .mobile-rotate-hint {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  transform: translateX(-50%);
  padding: 6px 9px;
  color: #687871;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(43,77,64,.12);
  border-radius: 20px;
  box-shadow: 0 7px 20px rgba(31,56,48,.1);
  backdrop-filter: blur(8px);
  font-size: 5px;
  font-weight: 900;
  letter-spacing: .11em;
}
:root[data-mobile-device="true"] .mobile-rotate-hint span { color: #6957e8; font-size: 13px; line-height: 1; }

@media (orientation: landscape) {
  :root[data-mobile-device="true"] .mobile-rotate-hint { display: none; }
}

@media (orientation: portrait) {
  :root[data-mobile-device="true"] .mobile-stick--move { --stick-size: 146px; }
  :root[data-mobile-device="true"] .mobile-stick--aim { --stick-size: 132px; }
  :root[data-mobile-device="true"] .timer-dock { bottom: max(145px, calc(env(safe-area-inset-bottom) + 145px)); }
  :root[data-mobile-device="true"] .event-toast { top: 112px; }
  :root[data-mobile-device="true"] .mobile-rotate-hint {
    top: max(63px, calc(env(safe-area-inset-top) + 51px));
    left: max(14px, env(safe-area-inset-left));
    transform: none;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  :root[data-mobile-device="true"] .entry-screen { place-items: center start; padding: 16px max(24px, env(safe-area-inset-left)); overflow-y: auto; }
  :root[data-mobile-device="true"] .entry-stack { width: min(380px, calc(100vw - 48px)); gap: 7px; }
  :root[data-mobile-device="true"] .entry-card { padding: 20px 30px 16px; }
  :root[data-mobile-device="true"] .entry-card h1 { font-size: 48px; }
  :root[data-mobile-device="true"] .guide-preview { display: none; }
  :root[data-mobile-device="true"] .mobile-stick--move { --stick-size: 142px; }
  :root[data-mobile-device="true"] .mobile-stick--aim { --stick-size: 130px; }
}

:root[data-theme="dark"] body { background: #202128; }
:root[data-theme="dark"] .entry-screen {
  background: linear-gradient(90deg, rgba(28,29,36,.9) 0%, rgba(28,29,36,.58) 38%, rgba(28,29,36,.2) 68%, rgba(28,29,36,.06) 100%);
}
:root[data-theme="dark"] .entry-card {
  background: rgba(40,41,49,.92);
  border-color: rgba(220,221,235,.17);
  box-shadow: 0 30px 90px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.08) inset;
}
:root[data-theme="dark"] .guide-preview {
  background: rgba(43,44,53,.92);
  border-color: rgba(220,221,235,.17);
  box-shadow: 0 22px 60px rgba(0,0,0,.27), 0 1px 0 rgba(255,255,255,.07) inset;
}
:root[data-theme="dark"] .guide-preview-copy strong { color: #f4f4f8; }
:root[data-theme="dark"] .guide-preview-copy > span { color: #a0a2ad; }
:root[data-theme="dark"] .guide-preview-arrow { color: #292a34; background: #e2dfff; }
:root[data-theme="dark"] .feedback-open { color: #b6b8c1; background: rgba(43,44,53,.86); border-color: rgba(220,221,235,.16); }
:root[data-theme="dark"] .feedback-open:hover { color: #c7beff; background: rgba(51,52,63,.98); border-color: rgba(169,156,255,.3); }
:root[data-theme="dark"] .feedback-dialog-card { color: #f3f4f7; background: rgba(39,40,49,.99); border-color: rgba(220,221,235,.17); box-shadow: 0 30px 90px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.07); }
:root[data-theme="dark"] .feedback-close { color: #c8cad3; background: rgba(255,255,255,.08); }
:root[data-theme="dark"] .feedback-intro,
:root[data-theme="dark"] .feedback-success > p:not(.eyebrow) { color: #afb1bc; }
:root[data-theme="dark"] #feedback-form > label:not(.feedback-honeypot) { color: #c8c9d1; }
:root[data-theme="dark"] #feedback-form input,
:root[data-theme="dark"] #feedback-form textarea { color: #f2f3f7; background: #30313a; border-color: #50525f; }
:root[data-theme="dark"] #feedback-form input::placeholder { color: #858793; }
:root[data-theme="dark"] .feedback-secondary { color: #d2d3da; border-color: #555762; }
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .pitch,
:root[data-theme="dark"] .entry-footer,
:root[data-theme="dark"] .build-label,
:root[data-theme="dark"] .status-chip,
:root[data-theme="dark"] .timer-dock > span,
:root[data-theme="dark"] .controls-hint > div,
:root[data-theme="dark"] .modal-card > p:not(.eyebrow) { color: #a6a8b2; }
:root[data-theme="dark"] .entry-card h1,
:root[data-theme="dark"] .tempor-wordmark--hero { color: #f3f4f7; }
:root[data-theme="dark"] #entry-form label { color: #c8c9d1; }
:root[data-theme="dark"] .input-shell input {
  color: #f2f3f7;
  background: #30313a;
  border-color: #50525f;
}
:root[data-theme="dark"] .input-shell input::placeholder { color: #858793; }
:root[data-theme="dark"] .input-shell input:focus { background: #373842; }
:root[data-theme="dark"] .char-count { color: #afb1bc; }
:root[data-theme="dark"] .char-count b { color: #d0d1d8; }
:root[data-theme="dark"] .key-icon,
:root[data-theme="dark"] .mouse-icon {
  color: #c3c4cc;
  background: #30313a;
  border-color: #535561;
}
:root[data-theme="dark"] .mouse-icon::before { background: #92949f; }
:root[data-theme="dark"] .entry-settings-toggle,
:root[data-theme="dark"] .language-toggle {
  color: #cecfd6;
  background: rgba(41,42,51,.94);
  border-color: rgba(220,221,235,.17);
  box-shadow: 0 12px 34px rgba(0,0,0,.26);
}
:root[data-theme="dark"] .entry-settings-toggle:hover,
:root[data-theme="dark"] .language-toggle:hover { color: #b9afff; background: rgba(51,52,63,.98); }
:root[data-theme="dark"] .language-menu {
  background: rgba(39,40,49,.98);
  border-color: rgba(220,221,235,.17);
  box-shadow: 0 24px 70px rgba(0,0,0,.36);
}
:root[data-theme="dark"] .language-option { color: #c8cad2; }
:root[data-theme="dark"] .language-option:hover { color: #c7beff; background: rgba(137,116,255,.12); }
:root[data-theme="dark"] .language-option.is-current { color: #c7beff; background: rgba(137,116,255,.17); border-color: rgba(169,156,255,.3); }
:root[data-theme="dark"] .language-option small { color: #9698a3; }
:root[data-theme="dark"] .entry-settings-panel {
  background: rgba(39,40,49,.98);
  border-color: rgba(220,221,235,.17);
  box-shadow: 0 24px 70px rgba(0,0,0,.36);
}
:root[data-theme="dark"] .entry-settings-heading span,
:root[data-theme="dark"] .graphics-settings-heading,
:root[data-theme="dark"] .graphics-settings > p,
:root[data-theme="dark"] .locale-settings label { color: #a4a6b0; }
:root[data-theme="dark"] .entry-settings-heading button {
  color: #c3c4cc;
  background: #33343e;
}
:root[data-theme="dark"] .panel {
  border-color: rgba(220,221,235,.15);
  box-shadow: 0 15px 40px rgba(0,0,0,.3);
}
:root[data-theme="dark"] .leader-row .rank { color: #9698a3; }
:root[data-theme="dark"] .leader-row .time { color: #bfc0c8; }
:root[data-theme="dark"] .leader-row.me { background: rgba(137,116,255,.14); }
:root[data-theme="dark"] .timer-dock > strong { text-shadow: 0 2px 0 rgba(0,0,0,.72); }
:root[data-theme="dark"] .flow-readout {
  background: rgba(42,43,52,.94);
  border-color: rgba(220,221,235,.17);
  box-shadow: 0 10px 28px rgba(0,0,0,.23);
}
:root[data-theme="dark"] .flow-readout > span { color: #a5a7b1; }
:root[data-theme="dark"] .flow-readout > strong { color: #eff0f4; text-shadow: 0 2px 0 rgba(0,0,0,.75); }
:root[data-theme="dark"] .flow-readout > em { color: #9698a3; }
:root[data-theme="dark"] .flow-readout.resting > strong,
:root[data-theme="dark"] .flow-readout.resting > em { color: #4ed4ae; }
:root[data-theme="dark"] .flow-readout.moving > strong { color: #a99cff; }
:root[data-theme="dark"] .flow-readout.overdrive {
  background: linear-gradient(115deg, rgba(27,22,23,.96), rgba(55,25,28,.96));
}
:root[data-theme="dark"] .flow-readout.anomaly {
  background: linear-gradient(115deg, rgba(22,19,34,.97), rgba(39,27,58,.97), rgba(48,31,21,.96));
}
:root[data-theme="dark"] .flow-readout.anomaly > strong { color: #b697ff; }
:root[data-theme="dark"] .flow-readout.anomaly > em { color: #e0a273; }
:root[data-theme="dark"] .timer-track { background: rgba(220,221,235,.13); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
:root[data-theme="dark"] .controls-hint .key-icon,
:root[data-theme="dark"] .controls-hint .mouse-icon,
:root[data-theme="dark"] .control-toggle .key-icon { background: #30313a; }
:root[data-theme="dark"] .control-toggle {
  color: #bebfc8;
  background: rgba(42,43,52,.95);
  border-color: rgba(220,221,235,.17);
  box-shadow: 0 9px 26px rgba(0,0,0,.22);
}
:root[data-theme="dark"] .control-toggle.keyboard { color: #a99cff; }
:root[data-theme="dark"] .control-toggle.locked { color: #c1a8ff; border-color: rgba(169,156,255,.38); background: rgba(48,43,62,.96); }
:root[data-theme="dark"] .drive-status {
  color: #bebfc8;
  background: rgba(42,43,52,.95);
  border-color: rgba(220,221,235,.17);
  box-shadow: 0 9px 26px rgba(0,0,0,.22);
}
:root[data-theme="dark"] .drive-status__keys i { color: #c2c3cc; background: #30313a; border-color: rgba(220,221,235,.18); }
:root[data-theme="dark"] .drive-status__copy small { color: #8f919b; }
:root[data-theme="dark"] .drive-status__copy strong { color: #a99cff; }
:root[data-theme="dark"] .drive-status.accelerating { background: rgba(55,25,28,.96); border-color: rgba(237,88,100,.42); }
:root[data-theme="dark"] .drive-status.accelerating .drive-status__copy strong { color: #ff7d86; }
:root[data-theme="dark"] .drive-status.held { border-color: rgba(137,116,255,.38); }
:root[data-theme="dark"] .event-toast { background: #393a46; box-shadow: 0 9px 26px rgba(0,0,0,.26); }
:root[data-theme="dark"] .modal-screen { background: rgba(15,16,20,.52); }
:root[data-theme="dark"] .modal-card {
  background: rgba(39,40,49,.98);
  border-color: rgba(220,221,235,.17);
  box-shadow: 0 30px 90px rgba(0,0,0,.42);
}
:root[data-theme="dark"] .graphics-settings,
:root[data-theme="dark"] .locale-settings,
:root[data-theme="dark"] .death-stats > div {
  background: #30313a;
  border-color: rgba(220,221,235,.13);
}
:root[data-theme="dark"] .locale-settings select { color: #d3d4dc; background: rgba(50,51,61,.94); border-color: rgba(220,221,235,.15); }

:root[dir="rtl"] .entry-settings-panel,
:root[dir="rtl"] .locale-settings,
:root[dir="rtl"] .graphics-settings { text-align: right; }
:root[dir="rtl"] .entry-screen,
:root[dir="rtl"] .game-ui { direction: ltr; }
:root[dir="rtl"] .entry-card,
:root[dir="rtl"] .entry-settings-panel,
:root[dir="rtl"] .guide-preview,
:root[dir="rtl"] .modal-card { direction: rtl; }
:root[data-theme="dark"] .graphics-quality-options button,
:root[data-theme="dark"] .theme-options button {
  color: #adafb9;
  background: rgba(50,51,61,.94);
  border-color: rgba(220,221,235,.15);
}
:root[data-theme="dark"] .graphics-quality-options button:hover,
:root[data-theme="dark"] .theme-options button:hover { color: #b9adff; border-color: rgba(150,130,255,.38); }
:root[data-theme="dark"] .graphics-quality-options button.active,
:root[data-theme="dark"] .theme-options button.active {
  color: #c1b7ff;
  background: #312b4c;
  border-color: rgba(150,130,255,.55);
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
}
:root[data-theme="dark"] .death-stats span { color: #989aa5; }
:root[data-theme="dark"] .death-stats strong { color: #e2e3e8; }

:root[data-theme="dark"][data-mobile-device="true"] .mobile-stick__ring {
  background: radial-gradient(circle, rgba(52,53,64,.68) 0 29%, rgba(47,48,58,.5) 30% 56%, rgba(128,108,248,.18) 57% 100%);
  border-color: rgba(220,221,235,.22);
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 0 0 7px rgba(255,255,255,.03);
}
:root[data-theme="dark"][data-mobile-device="true"] .mobile-stick__knob { background: rgba(57,58,70,.94); border-color: rgba(154,137,255,.5); box-shadow: 0 6px 18px rgba(0,0,0,.32); }
:root[data-theme="dark"][data-mobile-device="true"] .mobile-stick--aim.charging .mobile-stick__ring {
  background: radial-gradient(circle, rgba(59,50,58,.78) 0 29%, rgba(61,47,54,.58) 30% 56%, rgba(237,88,100,.22) 57% 100%);
  border-color: rgba(244,111,122,.58);
  box-shadow: 0 10px 34px rgba(0,0,0,.32), 0 0 0 8px rgba(237,88,100,.09), inset 0 0 0 7px rgba(237,88,100,.07);
}
:root[data-theme="dark"][data-mobile-device="true"] .mobile-stick--aim.charging .mobile-stick__knob { border-color: rgba(244,111,122,.66); box-shadow: 0 6px 20px rgba(216,62,76,.28); }
:root[data-theme="dark"][data-mobile-device="true"] .mobile-stick--aim.charging > strong { color: #ff8791; }
:root[data-theme="dark"][data-mobile-device="true"] .mobile-stick > strong { color: #b8adff; }
:root[data-theme="dark"][data-mobile-device="true"] .mobile-stick > small { color: #9698a3; }
:root[data-theme="dark"][data-mobile-device="true"] .mobile-hud-button { color: #b8adff; background: rgba(43,44,53,.9); border-color: rgba(220,221,235,.17); box-shadow: 0 7px 20px rgba(0,0,0,.26); }
:root[data-theme="dark"][data-mobile-device="true"] .mobile-hud-button small { color: #9a9ca7; }
:root[data-theme="dark"][data-mobile-device="true"] .mobile-leaderboard-toggle strong { color: #b8adff; }
:root[data-theme="dark"][data-mobile-device="true"] .mobile-leaderboard-toggle.active { background: #7564ed; }
:root[data-theme="dark"][data-mobile-device="true"] .mobile-leaderboard-toggle.active strong,
:root[data-theme="dark"][data-mobile-device="true"] .mobile-leaderboard-toggle.active small { color: #fff; }
:root[data-theme="dark"][data-mobile-device="true"] .ios-install-guide:not(.hidden) { background: rgba(7,8,12,.58); }
:root[data-theme="dark"][data-mobile-device="true"] .ios-install-card { color: #f0f1f5; background: rgba(42,43,52,.98); border-color: rgba(220,221,235,.17); box-shadow: 0 24px 70px rgba(0,0,0,.48); }
:root[data-theme="dark"][data-mobile-device="true"] .ios-install-card ol { color: #b9bbc5; }
:root[data-theme="dark"][data-mobile-device="true"] .ios-install-close { color: #c8cad3; background: rgba(255,255,255,.08); }
:root[data-theme="dark"][data-mobile-device="true"] .mobile-rotate-hint { color: #b9bbc5; background: rgba(43,44,53,.88); border-color: rgba(220,221,235,.16); box-shadow: 0 7px 20px rgba(0,0,0,.24); }

@media (max-width: 620px) {
  .build-actions { right: 14px; bottom: max(12px, env(safe-area-inset-bottom)); left: 14px; justify-content: space-between; }
  .feedback-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .feedback-dialog-card { max-height: calc(100dvh - 20px); padding: 25px 19px 19px; border-radius: 19px; }
  .feedback-dialog h2 { font-size: 24px; }
  .feedback-actions { display: grid; grid-template-columns: 1fr 1.25fr; }
  .feedback-primary, .feedback-secondary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-readout.overdrive,
  .guide-preview-orbit,
  .guide-preview-shard,
  .guide-preview-speck { animation: none; }
  #death-screen,
  #death-screen .death-card { transition-duration: .08s; }
}