css/game-menu.css - main - VictoriaKoltsova/AI_2026_Module2_Project2

css/game-menu.css
1 061 строка35 KB
moskoltsova2009-ai
Build UK Quest game platform
09 авг 2026, 23:28
09 авг 2026, 23:2854234c0
.game-menu-body { min-height: 100vh; }
.game-menu-hero { min-height: 720px; padding: 78px 0 90px; display: grid; grid-template-columns: minmax(390px,.9fr) minmax(470px,1.1fr); align-items: stretch; gap: 62px; }
.menu-cover { min-height: 610px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: #091126; box-shadow: var(--shadow); }
.menu-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 48%,rgba(4,8,18,.92)); pointer-events: none; }
.menu-cover img { width: 100%; height: 100%; display: block; object-position: center; }
.word-cover img { object-fit: contain; background: radial-gradient(circle,rgba(56,82,153,.18),transparent 60%),#061126; }
.tower-cover img { object-fit: cover; }
.menu-cover > div { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 1; display: flex; justify-content: space-between; gap: 20px; }
.menu-cover span,.menu-cover strong { font-size: 9px; letter-spacing: .12em; }.menu-cover span { color: var(--cyan); }.menu-cover strong { color: #d9dfef; }
.menu-intro { min-width: 0; padding: 24px 0 4px; display: flex; flex-direction: column; }
.menu-back { width: fit-content; margin-bottom: 48px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .12em; }.menu-back:hover { color: var(--cyan); }
.menu-intro h1 { font-size: clamp(64px,7.1vw,108px); }.menu-intro > p:not(.eyebrow) { max-width: 570px; margin: 26px 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.menu-progress-line { margin: 0 0 24px; padding: 14px 0; display: flex; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; letter-spacing: .11em; }.menu-progress-line strong { color: var(--cyan); }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }.menu-actions .primary { grid-column: 1 / -1; }.menu-actions.two-actions { grid-template-columns: 1fr; }
.menu-action { min-height: 96px; padding: 18px 20px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); transition: .22s ease; }.menu-action:hover { border-color: rgba(110,137,255,.5); background: rgba(94,121,255,.07); transform: translateY(-2px); }.menu-action.primary { border-color: rgba(67,226,211,.28); background: linear-gradient(120deg,rgba(67,226,211,.1),rgba(94,121,255,.1)); }.tower-menu .menu-action.primary { border-color: rgba(246,201,106,.3); background: linear-gradient(120deg,rgba(246,201,106,.1),rgba(94,121,255,.08)); }
.menu-action > b { color: var(--blue-bright); font: 700 10px var(--display); }.menu-action > span { display: grid; gap: 4px; }.menu-action small { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .12em; }.menu-action strong { font: 600 17px var(--display); text-transform: uppercase; }.menu-action > i { color: var(--cyan); font-style: normal; }
.menu-section { padding: 90px 0 20px; scroll-margin-top: 105px; }.menu-section + .menu-section { padding-top: 115px; }.menu-section .section-heading b { color: var(--cyan); }
.menu-empty { min-height: 280px; padding: 45px; display: grid; place-items: center; align-content: center; gap: 12px; border: 1px dashed var(--line); border-radius: 20px; text-align: center; }.menu-empty strong { font: 600 25px var(--display); text-transform: uppercase; }.menu-empty span { margin-bottom: 10px; color: var(--muted); }

:root[data-theme="light"] .menu-cover { background: #e7edf7; box-shadow: 0 25px 65px rgba(38,54,85,.16); }
:root[data-theme="light"] .menu-action { background: rgba(255,255,255,.66); }
:root[data-theme="light"] .menu-action.primary { background: linear-gradient(120deg,rgba(22,164,152,.1),rgba(94,121,255,.09)); }

@media (max-width: 1000px) {
  .game-menu-hero { grid-template-columns: minmax(300px,.8fr) minmax(390px,1.2fr); gap: 34px; }.menu-cover { min-height: 560px; }.menu-intro h1 { font-size: clamp(60px,8vw,88px); }
}
@media (max-width: 760px) {
  .game-menu-hero { min-height: auto; padding: 48px 0 70px; grid-template-columns: 1fr; }.menu-cover { min-height: 520px; order: 2; }.menu-intro { order: 1; }.menu-back { margin-bottom: 34px; }.menu-actions { margin-top: 16px; }.menu-section { padding-top: 70px; }.menu-section + .menu-section { padding-top: 85px; }
}
@media (max-width: 500px) {
  .menu-actions { grid-template-columns: 1fr; }.menu-actions .primary { grid-column: auto; }.menu-cover { min-height: 460px; }.menu-cover > div { align-items: flex-start; flex-direction: column; }.menu-intro h1 { font-size: 58px; }.menu-action { min-height: 88px; }.menu-section .section-heading p { font-size: 12px; }
}

/* UK Word Adventure — premium game hub */
.word-menu {
  background:
    radial-gradient(circle at 75% 5%, rgba(86, 74, 221, .13), transparent 26%),
    radial-gradient(circle at 6% 42%, rgba(24, 190, 185, .07), transparent 30%),
    #050914;
}

.word-menu .site-header {
  width: min(1480px, calc(100% - 28px));
  height: 66px;
  margin-top: 14px;
  border-color: rgba(81, 176, 211, .22);
  background: rgba(3, 8, 19, .88);
}

.word-menu .desktop-nav {
  margin-inline: auto;
}

.word-menu-stage {
  width: min(1480px, calc(100% - 28px));
  min-height: min(700px, calc(100vh - 100px));
  margin-top: 14px;
  padding: clamp(38px, 4.6vw, 72px);
  display: grid;
  grid-template-columns: minmax(450px, 1.18fr) minmax(390px, .82fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(48, 193, 210, .24);
  border-radius: 22px;
  color: #f7f9ff;
  background-image: url("../assets/images/home/word-adventure-cover.png");
  background-position: center;
  background-size: cover;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .32);
}

.word-menu-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 7, 17, .98) 0%, rgba(2, 7, 17, .9) 35%, rgba(2, 7, 17, .42) 64%, rgba(2, 7, 17, .5)),
    linear-gradient(0deg, rgba(2, 7, 17, .88), transparent 55%);
}

.word-menu-copy {
  max-width: 620px;
  position: relative;
  z-index: 1;
}

.word-menu-back {
  display: inline-flex;
  margin-bottom: clamp(30px, 5vh, 55px);
  color: #8793ad;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.word-menu-back:hover {
  color: var(--cyan);
}

.word-menu-copy .eyebrow {
  margin-bottom: 17px;
}

.word-menu-copy h1 {
  margin: 0;
  color: #f8faff;
  font-size: clamp(57px, 5.3vw, 84px);
  line-height: .9;
  text-transform: uppercase;
  text-shadow: 0 8px 32px rgba(0, 0, 0, .48);
}

.word-menu-copy h1 span,
.word-menu-copy h1 em {
  display: inline-block;
  white-space: nowrap;
}

.word-menu-copy h1 em {
  color: transparent;
  background: linear-gradient(94deg, #25ddd4, #4a91ef 48%, #a264f3);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  font-style: normal;
}

.word-menu-lead {
  max-width: 450px;
  margin: 24px 0 27px;
  color: #c1c8d8;
  font-size: 16px;
  line-height: 1.7;
}

.word-menu-facts {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.word-menu-facts li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.word-menu-facts i {
  color: var(--cyan);
  font-size: 19px;
  font-style: normal;
  text-shadow: 0 0 14px rgba(67, 226, 211, .45);
}

.word-menu-facts li:nth-child(1) i { color: var(--violet); }
.word-menu-facts li:nth-child(3) i { color: var(--gold); }
.word-menu-facts strong { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.word-menu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.word-menu-actions .button {
  min-width: 200px;
  min-height: 52px;
  color: white;
  backdrop-filter: blur(12px);
}

.word-menu-actions .button-primary {
  background: linear-gradient(100deg, #12bfe3, #416dec 54%, #9f3ee6);
  box-shadow: 0 13px 30px rgba(39, 87, 224, .35), 0 0 22px rgba(45, 213, 222, .12);
}

.word-menu-actions .button-ghost {
  border-color: rgba(157, 104, 241, .42);
  background: rgba(4, 9, 23, .66);
}

.word-menu-dashboard {
  min-width: 0;
  display: grid;
  gap: 13px;
  position: relative;
  z-index: 1;
}

.word-overview-panel,
.word-journey-panel {
  padding: 24px;
  border: 1px solid rgba(104, 147, 222, .26);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(8, 17, 38, .87), rgba(5, 11, 27, .76));
  box-shadow: 0 18px 45px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(16px);
}

.word-panel-title {
  margin: 0 0 21px;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.word-overview-layout {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 24px;
}

.word-progress-ring {
  width: 112px;
  aspect-ratio: 1;
  padding: 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #20dbd2 0deg, #7658f2 var(--progress), rgba(111, 126, 165, .17) var(--progress), rgba(111, 126, 165, .17) 360deg);
  box-shadow: 0 0 24px rgba(86, 93, 239, .13);
}

.word-progress-ring > div {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  border-radius: 50%;
  text-align: center;
  background: #0a1227;
}

.word-progress-ring strong {
  font: 700 25px var(--display);
}

.word-progress-ring span {
  color: #a6b0c8;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.word-overview-stats {
  display: grid;
  gap: 20px;
}

.word-overview-stats > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}

.word-overview-stats strong {
  font: 600 17px var(--display);
}

.word-overview-stats span {
  color: #a5aec3;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.word-overview-stats i {
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, .09);
}

.word-overview-stats i b {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #28ddd4, #5d7bf1);
  transition: width .45s ease;
}

.word-overview-stats > div:last-child i b {
  background: linear-gradient(90deg, #6c68f3, #b24ae5);
}

.word-city-list {
  display: grid;
}

.word-city-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 44px 1fr 34px;
  align-items: center;
  gap: 12px;
  position: relative;
  color: #f1f4fb;
}

.word-city-row + .word-city-row::before {
  content: "";
  width: 1px;
  height: 18px;
  position: absolute;
  left: 21px;
  top: -9px;
  background: linear-gradient(var(--cyan), var(--violet));
}

.word-city-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(155, 108, 255, .6);
  border-radius: 50%;
  color: #d7c2ff;
  background: rgba(73, 40, 126, .14);
  font: 600 12px var(--display);
}

.word-city-row.complete .word-city-number,
.word-city-row:not(.locked):first-child .word-city-number {
  border-color: rgba(67, 226, 211, .7);
  color: var(--cyan);
}

.word-city-copy {
  display: grid;
  gap: 2px;
}

.word-city-copy strong {
  font: 600 14px var(--display);
  text-transform: uppercase;
}

.word-city-copy small {
  color: var(--cyan);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.word-city-row > i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(67, 226, 211, .48);
  border-radius: 50%;
  color: var(--cyan);
  font-style: normal;
}

.word-city-row.locked > i {
  position: relative;
}

.word-city-row.locked > i::before {
  content: "";
  width: 9px;
  height: 8px;
  margin-top: 5px;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.word-city-row.locked > i::after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  left: 11px;
  top: 7px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.word-city-row.locked {
  cursor: not-allowed;
  opacity: .48;
}

.word-city-row.locked small { color: #a4aec3; }
.word-city-row.locked > i { border-color: rgba(155, 108, 255, .4); color: #b18aeb; }

.word-how-modal ol {
  list-style: none;
  margin: 22px 0 28px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.word-how-modal li {
  padding: 11px 0;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.word-how-modal li > span {
  color: var(--cyan);
  font: 700 10px var(--display);
}

.word-how-modal li p {
  margin: 0;
  display: grid;
  color: var(--muted);
  font-size: 12px;
}

.word-how-modal li strong { color: var(--ink); }

:root[data-theme="light"] .word-menu {
  background: #eef3fa;
}

:root[data-theme="light"] .word-menu-stage,
:root[data-theme="light"] .word-menu-stage .button-ghost {
  color: #f7f9ff;
}

@media (max-width: 1080px) {
  .word-menu-stage {
    grid-template-columns: minmax(380px, 1fr) minmax(340px, .8fr);
    padding: 42px;
    gap: 30px;
  }

  .word-menu .desktop-nav a:nth-child(n+3) { display: none; }
}

@media (max-width: 820px) {
  .word-menu .desktop-nav { display: none; }
  .word-menu .header-tools { margin-left: auto; }
  .word-menu-stage {
    min-height: auto;
    grid-template-columns: 1fr;
    background-position: 67% top;
  }
  .word-menu-stage::before {
    background: linear-gradient(180deg, rgba(2, 7, 17, .56), rgba(2, 7, 17, .96) 48%);
  }
  .word-menu-copy { padding-top: 190px; }
  .word-menu-dashboard { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 660px) {
  .word-menu .section-shell,
  .word-menu .site-header { width: calc(100% - 20px); }
  .word-menu .theme-button { display: none; }
  .word-menu-stage { padding: 24px 20px; }
  .word-menu-copy { padding-top: 150px; }
  .word-menu-copy h1 { font-size: clamp(46px, 14vw, 66px); }
  .word-menu-lead { font-size: 14px; }
  .word-menu-actions .button { width: 100%; }
  .word-menu-dashboard { grid-template-columns: 1fr; }
  .word-overview-layout { grid-template-columns: 105px 1fr; }
  .word-progress-ring { width: 100px; }
}

@media (max-width: 420px) {
  .word-menu-copy h1 { font-size: 42px; }
  .word-menu-facts { gap: 14px; }
  .word-menu-facts strong { font-size: 8px; }
  .word-overview-panel, .word-journey-panel { padding: 18px; }
}

/* Tower Escape — premium game hub */
.tower-menu,
.tower-map-body {
  background:
    radial-gradient(circle at 74% 5%, rgba(67, 99, 163, .13), transparent 27%),
    radial-gradient(circle at 9% 50%, rgba(26, 183, 178, .055), transparent 31%),
    #050914;
}

.tower-menu .site-header,
.tower-map-body .site-header {
  width: min(1480px, calc(100% - 28px));
  height: 66px;
  margin-top: 14px;
  border-color: rgba(61, 174, 190, .2);
  background: rgba(3, 8, 17, .9);
}

.tower-menu .desktop-nav,
.tower-map-body .desktop-nav { margin-inline: auto; }

.tower-menu-stage {
  width: min(1480px, calc(100% - 28px));
  min-height: min(700px, calc(100vh - 100px));
  margin-top: 14px;
  padding: clamp(38px, 4.5vw, 70px);
  display: grid;
  grid-template-columns: minmax(470px, 1.15fr) minmax(370px, .65fr);
  align-items: center;
  gap: clamp(34px, 7vw, 110px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(50, 185, 190, .24);
  border-radius: 22px;
  color: #f7f8fc;
  background-image: url("../assets/images/home/tower-escape-cover.png");
  background-position: center;
  background-size: cover;
  box-shadow: 0 30px 85px rgba(0, 0, 0, .36);
}

.tower-menu-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 7, 16, .98) 0%, rgba(3, 7, 16, .91) 35%, rgba(3, 7, 16, .36) 66%, rgba(3, 7, 16, .46)),
    linear-gradient(0deg, rgba(3, 7, 16, .9), transparent 55%);
}

.tower-menu-copy {
  max-width: 610px;
  position: relative;
  z-index: 1;
}

.tower-menu-back {
  display: inline-flex;
  margin-bottom: clamp(30px, 5vh, 52px);
  color: #8792a9;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tower-menu-back:hover { color: var(--cyan); }
.tower-menu-copy .eyebrow { color: #d685ef; }

.tower-menu-copy h1 {
  max-width: 600px;
  margin: 0;
  color: #e9e4da;
  font-size: clamp(62px, 6vw, 94px);
  line-height: .87;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(102, 84, 64, .45), 0 12px 35px rgba(0, 0, 0, .7);
}

.tower-menu-copy h1 em {
  color: transparent;
  background: linear-gradient(95deg, #d9b765, #f1dcc0 45%, #ac74dc);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: normal;
}

.tower-menu-lead {
  max-width: 455px;
  margin: 25px 0 27px;
  color: #c3c8d4;
  font-size: 16px;
  line-height: 1.72;
}

.tower-menu-facts {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 21px;
}

.tower-menu-facts li { display: flex; align-items: center; gap: 8px; }
.tower-menu-facts i { color: var(--cyan); font-size: 19px; font-style: normal; text-shadow: 0 0 15px rgba(67, 226, 211, .34); }
.tower-menu-facts li:nth-child(1) i { color: var(--violet); }
.tower-menu-facts li:nth-child(4) i { color: var(--gold); }
.tower-menu-facts strong { font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }

.tower-menu-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.tower-menu-actions .button { min-width: 205px; min-height: 52px; color: white; backdrop-filter: blur(12px); }
.tower-menu-actions .button-primary { background: linear-gradient(100deg, #13b8db, #566ce8 55%, #a33bdd); box-shadow: 0 13px 30px rgba(55, 75, 218, .34), 0 0 22px rgba(50, 211, 218, .1); }
.tower-menu-actions .button-ghost { border-color: rgba(166, 92, 215, .42); background: rgba(4, 8, 20, .68); }
.tower-menu-actions b { font-style: normal; }

.tower-escape-panel {
  min-width: 0;
  padding: 25px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(93, 145, 211, .25);
  border-radius: 17px;
  background: linear-gradient(140deg, rgba(8, 17, 35, .9), rgba(4, 10, 24, .78));
  box-shadow: 0 20px 55px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(17px);
}

.tower-panel-title,
.tower-map-kicker {
  margin: 0;
  color: var(--cyan);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.tower-current-location {
  margin: 19px 0;
  padding-bottom: 19px;
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(137, 156, 203, .12);
}

.tower-current-location img {
  width: 90px;
  height: 78px;
  object-fit: cover;
  border: 1px solid rgba(109, 145, 218, .25);
  border-radius: 10px;
}

.tower-current-location p { margin: 0; display: grid; gap: 4px; }
.tower-current-location span { color: #a9b1c3; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.tower-current-location strong { font: 600 15px var(--display); text-transform: uppercase; }

.tower-progress-stat {
  min-height: 68px;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(137, 156, 203, .1);
}

.tower-progress-stat > i { color: var(--cyan); font-size: 21px; font-style: normal; text-align: center; }
.tower-progress-stat.purple > i { color: #b064e6; }
.tower-progress-stat.gold > i { color: var(--gold); }
.tower-progress-stat p { margin: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 15px; }
.tower-progress-stat p > span { color: #dce1eb; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.tower-progress-stat p > b { color: #e9edf5; font: 600 14px var(--display); }
.tower-progress-stat.gold p > b { color: var(--gold); font-size: 20px; }
.tower-progress-stat small { height: 4px; grid-column: 1 / -1; overflow: hidden; border-radius: 6px; background: rgba(255, 255, 255, .08); }
.tower-progress-stat small u { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #6c80ed); text-decoration: none; transition: width .4s ease; }
.tower-progress-stat.purple small u { background: linear-gradient(90deg, #8654dc, #c04adb); }

.tower-current-mission {
  min-height: 75px;
  padding: 15px 45px 10px 0;
  display: grid;
  gap: 4px;
  position: relative;
}

.tower-current-mission span { color: var(--cyan); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.tower-current-mission strong { color: #c4cad8; font-size: 11px; font-weight: 500; }
.tower-current-mission i { width: 35px; height: 35px; display: grid; place-items: center; position: absolute; right: 0; top: 16px; border: 1px solid rgba(246, 201, 106, .3); border-radius: 50%; color: var(--gold); font-style: normal; }

.tower-map-link {
  min-height: 42px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(67, 226, 211, .25);
  border-radius: 8px;
  color: var(--cyan);
  background: rgba(67, 226, 211, .04);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.tower-how-modal ol { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 8px; }
.tower-how-modal li { padding: 11px 0; display: grid; grid-template-columns: 34px 1fr; gap: 12px; border-bottom: 1px solid var(--line); }
.tower-how-modal li > span { color: var(--gold); font: 700 10px var(--display); }
.tower-how-modal li p { margin: 0; display: grid; color: var(--muted); font-size: 12px; }
.tower-how-modal li strong { color: var(--ink); }

:root[data-theme="light"] .tower-menu { background: #edf2f8; }
:root[data-theme="light"] .tower-menu-stage,
:root[data-theme="light"] .tower-menu-stage .button-ghost { color: #f7f8fc; }

/* Tower map */
.tower-map-shell {
  width: min(1480px, calc(100% - 28px));
  margin: 14px auto 24px;
}

.tower-map-stage {
  min-height: calc(100vh - 104px);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(390px, .83fr) minmax(530px, 1.17fr) minmax(205px, .42fr);
  gap: 13px;
  overflow: hidden;
  border: 1px solid rgba(44, 181, 190, .24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 42%, rgba(21, 157, 178, .07), transparent 31%),
    radial-gradient(circle at 82% 12%, rgba(128, 69, 204, .08), transparent 28%),
    linear-gradient(145deg, rgba(7, 15, 31, .98), rgba(3, 8, 18, .98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.tower-map-column,
.tower-rooms-column,
.tower-map-sidebar { min-width: 0; }

.tower-map-heading {
  min-height: 70px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.tower-map-heading h1,
.tower-rooms-heading h2 {
  margin: 4px 0 0;
  color: #f5f7fc;
  font-size: 30px;
  text-transform: uppercase;
}

.tower-map-heading > p {
  max-width: 220px;
  margin: 0 0 4px;
  color: #a9b2c5;
  font-size: 10px;
  line-height: 1.5;
}

.tower-map-art {
  height: 615px;
  margin-top: 11px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(67, 226, 211, .2);
  border-radius: 14px;
  background: #040a16;
}

.tower-map-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 55px 15px rgba(2, 7, 17, .65);
}

.tower-map-art > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: brightness(.82) saturate(.9);
}

.tower-route-line {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

.tower-route-line path {
  fill: none;
  stroke: url(#towerGradient);
  stroke: #8c5ee8;
  stroke-width: .55;
  stroke-dasharray: 2 1.4;
  filter: drop-shadow(0 0 2px #8c5ee8);
}

.tower-route-node {
  padding: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  position: absolute;
  z-index: 4;
  border: 0;
  color: white;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.tower-route-node > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid #af71e9;
  border-radius: 50%;
  background: rgba(9, 14, 32, .9);
  box-shadow: 0 0 0 5px rgba(8, 13, 29, .45), 0 0 18px rgba(164, 93, 226, .38);
  font: 700 11px var(--display);
}

.tower-route-node > small {
  padding: 3px 6px;
  border-radius: 10px;
  background: rgba(4, 8, 19, .72);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}

.tower-route-node.current > span {
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 0 6px rgba(67, 226, 211, .1), 0 0 23px rgba(67, 226, 211, .7);
  animation: towerNodePulse 2s ease-in-out infinite;
}

.tower-route-node.complete > span { border-color: var(--cyan); color: var(--cyan); }
.tower-route-node.locked { cursor: not-allowed; opacity: .48; filter: grayscale(.7); }
.node-1 { left: 50%; top: 86%; }.node-2 { left: 70%; top: 63%; }.node-3 { left: 31%; top: 48%; }.node-4 { left: 62%; top: 39%; }.node-5 { left: 53%; top: 20%; }
@keyframes towerNodePulse { 50% { transform: scale(1.08); } }

.tower-map-progress {
  padding: 9px 11px;
  display: grid;
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 4;
  border: 1px solid rgba(67, 226, 211, .22);
  border-radius: 9px;
  background: rgba(4, 9, 20, .78);
  backdrop-filter: blur(9px);
}
.tower-map-progress span { color: var(--cyan); font-size: 6px; letter-spacing: .1em; text-transform: uppercase; }
.tower-map-progress strong { font: 600 12px var(--display); }

.tower-inventory-panel {
  min-height: 105px;
  margin-top: 11px;
  padding: 12px;
  display: grid;
  grid-template-columns: 85px 1fr;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(67, 226, 211, .18);
  border-radius: 12px;
  background: rgba(5, 13, 28, .76);
}

.tower-inventory-panel > div:first-child { display: grid; gap: 4px; }
.tower-inventory-panel > div:first-child > span { color: var(--muted); font-size: 8px; }
.tower-map-inventory { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tower-inventory-slot { min-width: 0; height: 73px; padding: 6px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid rgba(111, 146, 213, .22); border-radius: 8px; background: rgba(7, 14, 31, .8); text-align: center; }
.tower-inventory-slot.found { border-color: rgba(67, 226, 211, .42); }
.tower-inventory-slot b { color: var(--gold); font: 600 10px var(--display); }
.tower-inventory-slot strong { overflow: hidden; color: #b9c1d2; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.tower-inventory-slot.empty { opacity: .38; }

.tower-rooms-heading {
  min-height: 70px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.tower-rooms-heading h2 { font-size: 24px; }
.tower-rooms-heading > a {
  min-height: 38px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(67, 226, 211, .32);
  border-radius: 8px;
  color: var(--cyan);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tower-room-list {
  margin-top: 11px;
  display: grid;
  gap: 7px;
}

.tower-room-card {
  min-height: 111px;
  display: grid;
  grid-template-columns: 140px 43px 1fr 70px;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(104, 137, 203, .2);
  border-radius: 11px;
  color: #eef1f8;
  background: rgba(7, 14, 31, .78);
  transition: transform .2s ease, border-color .2s ease;
}

.tower-room-card:hover:not(.locked) { transform: translateX(3px); border-color: rgba(67, 226, 211, .4); }
.tower-room-card.current, .tower-room-card.complete { border-color: rgba(67, 226, 211, .4); }
.tower-room-card.locked { opacity: .46; filter: grayscale(.62); }
.tower-room-card > img { width: 140px; height: 111px; object-fit: cover; }
.tower-room-number { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(164, 95, 226, .65); border-radius: 50%; color: #cb9bed; font: 600 11px var(--display); }
.tower-room-card.current .tower-room-number, .tower-room-card.complete .tower-room-number { border-color: var(--cyan); color: var(--cyan); }
.tower-room-copy { min-width: 0; display: grid; gap: 3px; }
.tower-room-copy > small { color: var(--cyan); font-size: 6px; letter-spacing: .09em; text-transform: uppercase; }
.tower-room-copy > strong { overflow: hidden; font: 600 14px var(--display); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.tower-room-copy > span { max-width: 330px; color: #a7afc2; font-size: 8px; line-height: 1.45; }
.tower-room-state { display: grid; justify-items: center; gap: 7px; text-align: center; }
.tower-room-state b { color: var(--cyan); font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
.tower-room-state small { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(67, 226, 211, .35); border-radius: 50%; color: var(--cyan); }
.tower-room-card.locked .tower-room-state b, .tower-room-card.locked .tower-room-state small { color: #c291ea; border-color: rgba(180, 103, 225, .35); }

.tower-feature-strip {
  min-height: 105px;
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(67, 226, 211, .15);
  border-radius: 12px;
  background: rgba(5, 13, 28, .76);
}

.tower-feature-strip > div { padding: 13px; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 9px; }
.tower-feature-strip > div + div { border-left: 1px solid rgba(117, 140, 190, .12); }
.tower-feature-strip i { color: var(--violet); font-size: 25px; font-style: normal; text-align: center; }
.tower-feature-strip > div:nth-child(even) i { color: var(--cyan); }
.tower-feature-strip p { margin: 0; display: grid; gap: 3px; }
.tower-feature-strip strong { color: var(--cyan); font-size: 7px; letter-spacing: .07em; text-transform: uppercase; }
.tower-feature-strip span { color: #9fa8bb; font-size: 7px; line-height: 1.35; }

.tower-map-sidebar { padding-top: 81px; display: grid; grid-template-rows: 1fr auto; gap: 11px; }
.tower-map-achievements, .tower-next-reward { padding: 15px; border: 1px solid rgba(67, 226, 211, .18); border-radius: 12px; background: rgba(5, 13, 28, .78); }
.tower-map-achievements > div { display: grid; gap: 9px; margin-top: 15px; }
.tower-map-achievement { min-height: 57px; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 9px; }
.tower-map-achievement > b { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(246, 201, 106, .34); border-radius: 10px 50% 45% 50%; color: var(--gold); font: 600 8px var(--display); transform: rotate(7deg); }
.tower-map-achievement > b::first-line { transform: rotate(-7deg); }
.tower-map-achievement p { margin: 0; display: grid; gap: 2px; }
.tower-map-achievement strong { font: 600 9px var(--display); }
.tower-map-achievement span { color: #a3acbe; font-size: 7px; line-height: 1.3; }
.tower-map-achievement.locked { opacity: .48; }
.tower-map-achievements > a { min-height: 35px; margin-top: 14px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(67, 226, 211, .26); border-radius: 7px; color: var(--cyan); font-size: 7px; font-weight: 700; text-transform: uppercase; }

.tower-next-reward { min-height: 210px; display: flex; flex-direction: column; }
.tower-next-reward > span { margin-top: 14px; color: #adb5c6; font-size: 8px; line-height: 1.5; }
.tower-reward-chest { width: min(150px, 100%); height: 110px; margin: auto; display: block; object-fit: contain; filter: drop-shadow(0 0 18px rgba(246, 201, 106, .2)); }
.tower-next-reward > strong { font: 600 11px var(--display); }
.tower-next-reward > i { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 7px; background: rgba(255, 255, 255, .08); }
.tower-next-reward > i u { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #6c7ff0); text-decoration: none; }

:root[data-theme="light"] .tower-map-body { background: #edf2f8; }
:root[data-theme="light"] .tower-map-stage { background: linear-gradient(145deg, rgba(249, 252, 255, .98), rgba(232, 239, 249, .98)); }
:root[data-theme="light"] .tower-map-heading h1,
:root[data-theme="light"] .tower-rooms-heading h2 { color: #17223a; }
:root[data-theme="light"] .tower-room-card,
:root[data-theme="light"] .tower-inventory-panel,
:root[data-theme="light"] .tower-feature-strip,
:root[data-theme="light"] .tower-map-achievements,
:root[data-theme="light"] .tower-next-reward { background: rgba(255, 255, 255, .72); }
:root[data-theme="light"] .tower-room-card { color: #17223a; }

@media (max-width: 1190px) {
  .tower-menu-stage { grid-template-columns: minmax(420px, 1fr) minmax(340px, .72fr); gap: 36px; padding: 42px; }
  .tower-menu .desktop-nav a:last-child { display: none; }
  .tower-map-stage { grid-template-columns: minmax(360px, .8fr) minmax(520px, 1.2fr); }
  .tower-map-sidebar { grid-column: 1 / -1; padding-top: 0; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .tower-map-art { height: 590px; }
}

@media (max-width: 900px) {
  .tower-menu .desktop-nav { display: none; }
  .tower-menu .header-tools { margin-left: auto; }
  .tower-menu-stage { grid-template-columns: 1fr; background-position: 68% top; }
  .tower-menu-stage::before { background: linear-gradient(180deg, rgba(3, 7, 16, .48), rgba(3, 7, 16, .96) 49%); }
  .tower-menu-copy { padding-top: 180px; }
  .tower-escape-panel { max-width: 620px; }
  .tower-map-body .desktop-nav { display: none; }
  .tower-map-body .header-tools { margin-left: auto; }
  .tower-map-stage { grid-template-columns: 1fr; }
  .tower-map-art { height: 760px; }
  .tower-map-sidebar { grid-column: auto; }
}

@media (max-width: 650px) {
  .tower-menu .section-shell,
  .tower-menu .site-header,
  .tower-map-body .site-header,
  .tower-map-shell { width: calc(100% - 20px); }
  .tower-menu .theme-button, .tower-map-body .theme-button { display: none; }
  .tower-menu-stage { padding: 24px 20px; }
  .tower-menu-copy { padding-top: 150px; }
  .tower-menu-copy h1 { font-size: clamp(49px, 15vw, 68px); }
  .tower-menu-lead { font-size: 14px; }
  .tower-menu-actions .button { width: 100%; }
  .tower-current-location { grid-template-columns: 72px 1fr; }
  .tower-current-location img { width: 72px; height: 67px; }
  .tower-map-stage { padding: 13px; }
  .tower-map-heading, .tower-rooms-heading { align-items: start; flex-direction: column; }
  .tower-map-heading > p { max-width: none; }
  .tower-map-art { height: 620px; }
  .tower-inventory-panel { grid-template-columns: 1fr; }
  .tower-map-inventory { grid-template-columns: repeat(3, 1fr); }
  .tower-room-card { grid-template-columns: 90px 36px 1fr; min-height: 100px; }
  .tower-room-card > img { width: 90px; height: 100px; }
  .tower-room-state { grid-column: 3; justify-items: start; grid-template-columns: auto auto; }
  .tower-room-copy > span { display: none; }
  .tower-feature-strip { grid-template-columns: 1fr 1fr; }
  .tower-feature-strip > div + div { border-left: 0; }
  .tower-map-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .tower-menu-copy h1 { font-size: 45px; }
  .tower-menu-facts { gap: 13px; }
  .tower-escape-panel { padding: 18px; }
  .tower-map-art { height: 520px; }
  .tower-route-node > small { display: none; }
  .tower-room-card { grid-template-columns: 76px 1fr; gap: 9px; }
  .tower-room-card > img { width: 76px; }
  .tower-room-number { display: none; }
  .tower-room-state { grid-column: 2; }
}