:root {
  color-scheme:light;
  --navy:#123753;
  --blue:#238ac7;
  --gold:#ffe478;
  --text:#f5f9f5;
  --muted:#bed8e6;
  --panel:#e8f0ee;
  --ink:#224662;
  font-family:ui-rounded,'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#143c58;
  color:var(--text);
  font:15px ui-rounded,'Trebuchet MS',Arial,sans-serif;
  overflow:hidden
}
button,input {
  font:inherit
}
button {
  cursor:pointer;
  touch-action:manipulation;
  transition:filter .15s,transform .15s
}
button:disabled {
  cursor:default;
  filter:grayscale(.65);
  opacity:.5
}
button:not(:disabled):hover {
  filter:brightness(1.09)
}
button:focus-visible,input:focus-visible {
  outline:3px solid #ffda57;
  outline-offset:4px
}
button:active:not(:disabled) {
  transform:translateY(2px)
}
button {
  color:inherit
}
button .icon {
  pointer-events:none
}
.icon {
  width:25px;
  height:25px;
  flex:none;
  vertical-align:middle;
  filter:drop-shadow(0 2px 0 #102d4926)
}
main#app {
  display:block;
  position:relative;
  width:100%;
  height:100dvh;
  max-width:none;
  min-height:0;
  padding:0;
  margin:0
}
.boot {
  display:grid;
  place-content:center;
  height:100%;
  font-weight:bold;
  letter-spacing:1px
}
.scene {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#74bfbf url('/assets/ui/valley.svg') center/cover no-repeat
}
.scene:before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,#194c6a16,transparent 50%,#17372859)
}
.screen-corner {
  position:absolute;
  bottom:21px;
  left:28px;
  color:#efffede0;
  font-size:11px;
  letter-spacing:1px;
  text-shadow:0 1px 3px #123
}
.screen-version {
  left:auto;
  right:28px;
  opacity:.8
}
.logo {
  text-align:center;
  filter:drop-shadow(0 5px 0 #184466);
  position:relative;
  z-index:1
}
.logo small {
  display:block;
  font-size:11px;
  font-weight:900;
  letter-spacing:5px;
  color:#edffff;
  margin-bottom:2px
}
.logo h1 {
  color:#fff1b6;
  letter-spacing:-5px;
  font-size:clamp(66px,9vw,118px);
  font-weight:1000;
  font-family:ui-rounded,'Arial Rounded MT Bold',Arial,sans-serif;
  line-height:.92;
  margin:0;
  -webkit-text-stroke:2px #274860;
  text-shadow:0 3px #eaa843,0 7px #815932;
  transform:rotate(-3deg)
}
.logo p {
  margin:17px auto 0;
  font-size:11px;
  letter-spacing:3px;
  font-weight:bold;
  color:#fff7df
}
.welcome-layout {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:40px;
  padding-bottom:30px
}
.login-panel {
  position:relative;
  text-align:center;
  background:linear-gradient(155deg,#184b72ed,#12344ee8);
  border:2px solid #7cb3c79c;
  border-bottom:5px solid #0c2944;
  border-radius:22px;
  padding:24px 38px 25px;
  box-shadow:0 16px 40px #174f5559,inset 0 2px #d9fbff24;
  backdrop-filter:blur(7px)
}
.login-panel h2 {
  margin:0 0 7px;
  font-size:24px;
  color:#f5f4dc;
  text-shadow:0 2px #123750
}
.login-panel p {
  color:#bbd9e8;
  font-size:12px;
  margin:0 0 20px
}
.providers {
  display:flex;
  gap:10px;
  justify-content:center
}
.provider {
  border:2px solid #d2edf5;
  border-bottom:5px solid #84a9bd;
  border-radius:12px;
  width:51px;
  height:54px;
  font-size:23px;
  font-weight:bold;
  color:#183850;
  background:linear-gradient(#fff,#dceef2);
  box-shadow:0 3px 4px #052a4970;
  text-shadow:none
}
.provider[data-provider="Google"] {
  color:#4285f4
}
.provider[data-provider="Facebook"] {
  color:#1877f2
}
.provider[data-provider="VK"] {
  color:#087afa;
  font-size:18px
}
.provider[data-provider="Yandex"] {
  color:#f13b37
}
.provider[data-provider="Mail.ru"] {
  color:#df9705
}
.provider[data-provider="Apple"] {
  font-size:31px
}
.login-divider {
  display:flex;
  gap:13px;
  align-items:center;
  margin:18px 0;
  color:#aac4d5;
  font-size:10px
}
.login-divider:before,.login-divider:after {
  content:'';
  flex:1;
  height:1px;
  background:#71a7c44d
}
.game-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:2px solid #e8f7ff;
  border-bottom:5px solid #12517f;
  border-radius:12px;
  min-height:46px;
  padding:10px 22px;
  background:linear-gradient(#51b6ee 0%,#2493d0 65%,#1e87c3 66%);
  color:white;
  font-weight:900;
  font-size:14px;
  text-shadow:0 2px #1b517e;
  box-shadow:0 3px 0 #122f4c55,inset 0 2px #e7fbff5c;
  letter-spacing:.3px
}
.game-btn.gold {
  background:linear-gradient(#fff19a,#ffca46 66%,#f7b52c 67%);
  border-color:#fff2a5;
  border-bottom-color:#b76b1e;
  color:#634215;
  text-shadow:0 1px #fff8b7;
  box-shadow:0 3px 0 #75472a66,inset 0 2px #fff9be
}
.game-btn.green {
  background:linear-gradient(#adf27c,#68c54e 66%,#59b942 67%);
  border-color:#ddf9c4;
  border-bottom-color:#337d34;
  color:white;
  text-shadow:0 2px #3a7830
}
.game-btn.danger {
  background:linear-gradient(#ff978b,#e5665a);
  border-color:#ffe0bd;
  border-bottom-color:#99362e
}
.game-btn.secondary {
  background:linear-gradient(#9cafbd,#778c9d);
  border-color:#dbe7ed;
  border-bottom-color:#455d73
}
.game-btn.big {
  min-width:270px;
  min-height:72px;
  border-radius:16px;
  font-size:30px;
  border-bottom-width:7px
}
.login-panel .game-btn {
  width:100%;
  font-size:17px
}
.play-layout {
  gap:55px
}
.play-actions {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:24px
}
.account-button {
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 21px 9px 9px;
  border:1px solid #d5edff80;
  border-radius:40px;
  background:#154466d9;
  font-size:14px;
  font-weight:bold;
  text-shadow:0 1px #163246;
  box-shadow:0 4px 12px #16334a33
}
.account-button .avatar {
  background:#e1edf1;
  color:#456482;
  padding:8px;
  width:40px;
  height:40px;
  border:2px solid white;
  border-radius:50%
}
.account-button .avatar .icon {
  width:22px;
  height:22px
}
.account-button .chevron {
  width:15px;
  height:15px;
  opacity:.6;
  margin-left:15px
}
.settings-corner {
  position:absolute;
  top:24px;
  right:25px
}
.square-btn {
  padding:10px;
  width:50px;
  height:51px;
  border-radius:12px;
  flex:none
}
.square-btn .icon {
  width:26px;
  height:26px
}
.map-screen {
  background:#69a176
}
.map-screen:before {
  background:linear-gradient(180deg,#183b6677 0,transparent 150px,#1e493057 100%)
}
.topbar {
  position:absolute;
  z-index:6;
  top:18px;
  left:24px;
  right:24px;
  display:flex;
  align-items:center;
  gap:10px;
  height:auto;
  min-height:0;
  background:none;
  border:0;
  padding:0;
  box-shadow:none
}
.topbar .push {
  flex:1
}
.resource {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:110px;
  position:relative;
  background:linear-gradient(#143b62,#0e304e);
  border:2px solid #7aaac8;
  border-radius:13px;
  padding:5px 5px 5px 11px;
  height:48px;
  box-shadow:0 4px #102d4599
}
.resource .icon {
  width:28px;
  height:28px;
  color:#76dafb;
  stroke-width:2.5
}
.resource.lives .icon {
  fill:#f37186;
  color:#ffb1b6;
  width:26px
}
.resource strong {
  font-size:20px;
  min-width:26px;
  text-align:center;
  color:white
}
.resource .add {
  display:grid;
  place-items:center;
  background:linear-gradient(#b2ed72,#70b644);
  border:1px solid #d1efb5;
  border-bottom:3px solid #346329;
  border-radius:8px;
  padding:3px;
  width:29px;
  height:32px;
  margin-left:3px;
  color:white
}
.resource .add .icon {
  width:20px;
  height:20px;
  color:white
}
.nav-btn {
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  padding:10px 13px;
  min-height:49px
}
.nav-btn .icon {
  width:24px;
  height:24px
}
.nav-btn span {
  font-size:12px;
  line-height:1.15;
  white-space:nowrap
}
.badge {
  position:absolute;
  right:-5px;
  top:-7px;
  background:#ed645e;
  border:2px solid #fff1c5;
  border-radius:20px;
  font:900 11px Arial;
  padding:3px 6px
}
.map-heading {
  position:absolute;
  left:6%;
  top:115px;
  z-index:2;
  text-shadow:0 3px #20483a6e
}
.eyebrow {
  font-size:10px;
  font-weight:900;
  letter-spacing:2px;
  color:#cbe6d0
}
.map-heading h1 {
  font-family:inherit;
  font-weight:900;
  font-size:42px;
  color:#fff8da;
  margin:6px 0 8px;
  letter-spacing:-1.5px
}
.map-heading p {
  color:#e1f4dc;
  font-size:13px;
  margin:0
}
.chapter-badge {
  display:inline-flex;
  gap:7px;
  align-items:center;
  border-radius:7px;
  background:#1d514b99;
  border:1px solid #d9ffce55;
  padding:8px 11px;
  font-size:11px;
  color:#e8f4cc;
  margin-top:16px
}
.chapter-badge .icon {
  width:15px;
  height:15px;
  color:#ffe07a;
  fill:#ffe07a
}
.journey {
  position:absolute;
  inset:80px 0 0;
  min-height:0;
  overflow:auto;
  scrollbar-width:thin
}
.map-land {
  position:relative;
  min-width:740px;
  min-height:440px;
  width:100%;
  height:100%;
  background:radial-gradient(ellipse at 30% 70%,#b9d47788,transparent 55%)
}
.map-art {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  pointer-events:none
}
.level-node {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:translate(-50%,-50%);
  z-index:3;
  width:120px;
  pointer-events:none
}
.level-node .node {
  pointer-events:auto;
  display:grid;
  place-items:center;
  position:relative;
  width:76px;
  height:76px;
  border:4px solid #fff5ac;
  border-bottom:8px solid #ae741f;
  background:linear-gradient(145deg,#ffe98a,#f2b936);
  border-radius:50%;
  font-size:32px;
  font-weight:900;
  color:#6a4318;
  box-shadow:0 6px 0 #674822,0 9px 0 #243d4140,inset 0 3px #fff6c5;
  text-shadow:0 2px #fff1a3
}
.level-node .node:active {
  transform:translateY(2px)
}
.level-node.locked .node {
  background:linear-gradient(#9cb4ad,#6f8b86);
  border-color:#c8d5bc;
  border-bottom-color:#496866;
  box-shadow:0 6px 0 #365651,0 9px 0 #163b3433;
  color:#e1e8d3
}
.level-node.locked .node .icon {
  width:26px;
  height:26px
}
.level-node .node.current {
  outline:5px solid #fff9b14d;
  outline-offset:7px;
  animation:glow 3s infinite
}
.level-node small {
  font-size:11px;
  background:#254e43c9;
  border:1px solid #c1daa45c;
  padding:4px 10px;
  border-radius:20px;
  color:#f7f3d8;
  white-space:nowrap;
  margin-top:11px
}
.level-node .stars {
  display:flex;
  margin-top:8px;
  gap:2px;
  filter:drop-shadow(0 2px #31523c)
}
.stars .icon {
  width:22px;
  height:22px;
  fill:#648476;
  color:#adc4a4
}
.stars .earned {
  fill:#ffd653;
  color:#fff7b7
}
.level-node .flag {
  position:absolute;
  bottom:calc(100% + 10px);
  font-size:11px;
  font-weight:bold;
  color:#365c35;
  background:#fff5bd;
  border:2px solid #fffadd;
  padding:7px 13px;
  border-radius:8px;
  white-space:nowrap;
  box-shadow:0 4px #31594055
}
.level-node .flag:after {
  content:'';
  position:absolute;
  bottom:-8px;
  left:45%;
  border:5px solid transparent;
  border-top-color:#fff5bd;
  border-bottom:0
}
.map-footer {
  position:absolute;
  bottom:23px;
  left:25px;
  right:25px;
  display:flex;
  align-items:center;
  gap:13px;
  z-index:5;
  pointer-events:none
}
.map-footer>* {
  pointer-events:auto
}
.map-note {
  margin-left:auto;
  font-size:11px;
  color:#e8f3d6;
  background:#234e4cce;
  border:1px solid #9db78c88;
  border-radius:9px;
  padding:12px 15px;
  max-width:290px;
  line-height:1.5
}
.map-note .icon {
  width:17px;
  height:17px;
  margin-right:5px
}
.future-node {
  font-size:12px;
  position:absolute;
  right:5%;
  top:21%;
  color:#f2efd0;
  background:#31564180;
  border:1px dashed #c3d7a0;
  border-radius:15px;
  padding:12px 17px;
  text-align:center
}
.future-node b {
  display:block;
  font-size:20px;
  margin-bottom:4px
}
dialog {
  color:var(--ink);
  padding:0;
  border:3px solid #d8f0ed;
  border-bottom:6px solid #0c3758;
  border-radius:22px;
  background:linear-gradient(#f4f7e9,#dde9e5);
  width:min(830px,calc(100vw - 32px));
  max-width:830px;
  max-height:calc(100dvh - 28px);
  box-shadow:0 13px 0 #0a2c4477,0 30px 80px #0c25388c;
  overflow:auto
}
dialog::backdrop {
  background:#0c2745ae;
  backdrop-filter:blur(5px)
}
.modal-head {
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  gap:15px;
  padding:18px 24px;
  background:linear-gradient(#347dae,#20557e);
  box-shadow:0 3px #133f64;
  border-bottom:2px solid #5b9cc4;
  color:#fff4d2
}
.modal-head h2 {
  font:900 24px ui-rounded,'Trebuchet MS',Arial,sans-serif;
  margin:0;
  text-shadow:0 2px #173e5c
}
.modal-head> .icon {
  color:#ffe897;
  width:30px;
  height:30px
}
.modal-head .close {
  margin-left:auto;
  position:static;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:5px;
  border:2px solid #ffd7c6;
  border-bottom:4px solid #ad4b3e;
  border-radius:9px;
  background:linear-gradient(#fb9f81,#e4745a);
  color:#fff;
  flex:none
}
.modal-body {
  padding:22px 26px 26px
}
dialog p {
  font:14px/1.65 ui-rounded,'Trebuchet MS',Arial,sans-serif;
  color:#527089;
  margin:0 0 18px
}
dialog .eyebrow {
  color:#5c8091
}
.modal-description {
  margin-bottom:21px
}
.actions {
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:23px
}
.actions .game-btn {
  min-width:140px
}
.compact-modal {
  max-width:475px
}
.empty-state {
  text-align:center;
  padding:12px 15px 8px
}
.empty-state>.icon {
  width:65px;
  height:65px;
  color:#86a5b2;
  margin:10px
}
.empty-state h3 {
  font-size:21px;
  color:#2e5872;
  margin:10px 0
}
.empty-state p {
  max-width:440px;
  margin:0 auto 18px
}
.tabs {
  display:flex;
  gap:6px;
  justify-content:center;
  margin-bottom:20px
}
.tab {
  border:1px solid #9bb6c3;
  background:#cfdfdf;
  color:#4c7085;
  border-radius:8px;
  padding:9px 14px;
  font-size:12px
}
.tab.active {
  background:#286893;
  color:white;
  border-color:#286893
}
.shop-balance {
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:auto;
  font-size:18px;
  font-weight:900;
  color:#a8efff
}
.shop-balance .icon {
  width:22px
}
.booster-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px
}
.booster-card {
  position:relative;
  border:2px solid #bacdc9;
  border-bottom:4px solid #9bb4b8;
  border-radius:14px;
  background:#fffef4;
  padding:13px 10px 12px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:0
}
.booster-card.chosen {
  border-color:#4da861;
  box-shadow:0 0 0 3px #89cb7b77;
  background:#f2ffe3
}
.booster-art {
  display:grid;
  place-items:center;
  border:2px solid #ffffffa8;
  border-bottom:4px solid #213e672b;
  border-radius:15px;
  width:60px;
  height:61px;
  background:linear-gradient(145deg,#fff9,var(--color));
  box-shadow:0 4px 0 #7c95952b;
  color:#24527a;
  position:relative
}
.booster-art .icon {
  width:34px;
  height:34px;
  stroke-width:2.1
}
.booster-card b {
  font-size:13px;
  margin-top:12px;
  color:#31546b
}
.booster-card small {
  font-size:10px;
  margin:5px 0 10px;
  color:#6f8a96;
  line-height:1.4;
  flex:1
}
.booster-card .count {
  position:absolute;
  right:7px;
  top:7px;
  border-radius:8px;
  background:#274d6e;
  border:2px solid #fff8dc;
  padding:3px 5px;
  font-size:11px;
  font-weight:bold;
  color:white;
  z-index:1
}
.booster-card .game-btn {
  padding:6px 10px;
  min-height:34px;
  border-radius:8px;
  font-size:12px;
  width:100%
}
.booster-card .game-btn .icon {
  width:17px;
  height:17px
}
.booster-card.selectable {
  cursor:pointer
}
.booster-card.selectable:disabled {
  opacity:.5;
  filter:grayscale(.7)
}
.booster-card .selected-tick {
  position:absolute;
  top:4px;
  left:4px;
  color:#fff;
  background:#54ae64;
  border-radius:50%;
  padding:3px;
  width:23px;
  height:23px
}
.energy-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px
}
.energy-pack {
  padding:19px 9px;
  background:linear-gradient(#e8faff,#c3e4ee);
  border:2px solid #9fc4d1;
  border-bottom:5px solid #7d9fad;
  border-radius:13px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center
}
.energy-pack>.icon {
  height:50px;
  width:50px;
  fill:#80ddf0;
  color:#3a9abd
}
.energy-pack b {
  font-size:28px;
  color:#225573
}
.energy-pack small {
  font-size:11px;
  color:#71909c
}
.energy-pack .game-btn {
  font-size:11px;
  padding:8px;
  min-height:34px;
  width:100%
}
.notice {
  background:#d4e3df;
  border:1px solid #bbd0ce;
  border-radius:9px;
  padding:12px 14px;
  font-size:12px;
  line-height:1.6;
  color:#577582;
  margin:17px 0 0
}
.level-summary {
  display:flex;
  gap:20px;
  align-items:center;
  margin-bottom:18px
}
.level-medal {
  width:80px;
  height:80px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:4px solid #f3d182;
  background:#ffefb2;
  box-shadow:0 5px #cba251;
  color:#98732c;
  font-size:40px;
  font-weight:900;
  flex:none
}
.level-summary h3 {
  font-size:23px;
  margin:0 0 5px;
  color:#2d546b
}
.level-summary p {
  margin:0;
  font-size:12px
}
.level-facts {
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  margin:12px 0 0;
  font-size:11px;
  font-weight:bold;
  color:#628494
}
.loadout-caption {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:#476b7e;
  margin:15px 0 12px;
  gap:10px
}
.loadout-caption strong {
  color:#337ea1
}
.loadout .booster-card {
  padding:10px 6px
}
.loadout .booster-card b {
  font-size:11px
}
.loadout .booster-card small {
  font-size:10px;
  margin:4px 0 0
}
.loadout .booster-art {
  width:46px;
  height:46px;
  border-radius:11px
}
.loadout .booster-art .icon {
  width:29px;
  height:29px
}
.settings-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid #cbdcd8;
  font-size:15px;
  font-weight:bold
}
.settings-row span small {
  display:block;
  font-size:11px;
  font-weight:normal;
  color:#7d97a1;
  margin-top:4px
}
.settings-row input {
  appearance:none;
  width:49px;
  height:28px;
  border-radius:20px;
  background:#9fadb3;
  border:2px solid #819ca8;
  position:relative;
  cursor:pointer;
  flex:none
}
.settings-row input:before {
  content:'';
  width:21px;
  height:21px;
  border-radius:50%;
  background:#fff5d9;
  position:absolute;
  top:1.5px;
  left:2px;
  box-shadow:0 2px 0 #15374a44;
  transition:transform .15s
}
.settings-row input:checked {
  background:#72bb58;
  border-color:#54933f
}
.settings-row input:checked:before {
  transform:translateX(20px)
}
#toast {
  position:fixed;
  z-index:1000;
  bottom:27px;
  left:50%;
  transform:translate(-50%,15px);
  background:#123c58f2;
  border:2px solid #acc6c8;
  color:white;
  border-radius:12px;
  padding:13px 20px;
  max-width:min(580px,90vw);
  font-size:13px;
  text-align:center;
  opacity:0;
  transition:opacity .2s,transform .2s;
  pointer-events:none;
  box-shadow:0 7px 20px #1035484d
}
#toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.round-screen {
  position:absolute;
  inset:0;
  background:#bdcd97;
  overflow:hidden
}
#board {
  position:absolute;
  inset:66px 0 29px;
  background:#c6ce92;
  min-height:0;
  isolation:isolate;
  touch-action:none;
  overflow:hidden
}
#board canvas {
  position:absolute;
  inset:0;
  display:block
}
.round-top {
  position:absolute;
  z-index:7;
  inset:0 0 auto;
  height:71px;
  background:linear-gradient(#234e6ce8,#1a3a55df);
  border-bottom:3px solid #7b9a8d;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  pointer-events:auto
}
.round-identity {
  line-height:1.25;
  margin:0 10px 0 4px;
  min-width:100px
}
.round-identity small {
  display:block;
  font-size:10px;
  letter-spacing:1px;
  color:#b4d5d7
}
.round-identity b {
  font-size:21px;
  color:#fff2c7
}
.round-stat {
  padding:5px 13px;
  border-left:1px solid #73969666
}
.round-stat small {
  display:block;
  color:#b4cecf;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:3px
}
.round-stat b {
  font-size:18px;
  white-space:nowrap
}
.round-stat .icon {
  width:18px;
  height:18px;
  color:#f8da66
}
.round-stat.timer {
  min-width:103px
}
.round-progress {
  width:100%;
  height:4px;
  border-radius:4px;
  background:#17344f;
  margin-top:4px;
  overflow:hidden
}
.round-progress i {
  display:block;
  background:#a3d96e;
  height:100%;
  width:0
}
.round-spacer {
  flex:1
}
.hud-boosters {
  display:flex;
  gap:7px
}
.hud-tool {
  position:relative;
  width:49px;
  height:49px;
  min-height:0;
  padding:8px;
  border-radius:11px;
  background:linear-gradient(#476d99,#295179);
  border:2px solid #a7c9da;
  border-bottom:5px solid #163a5e;
  color:#e4f5fa;
  display:grid;
  place-content:center
}
.hud-tool .icon {
  width:26px;
  height:26px
}
.hud-tool.active {
  outline:3px solid #ffe268;
  outline-offset:2px
}
.hud-tool .stock {
  position:absolute;
  right:-5px;
  bottom:-5px;
  background:#183851;
  border:1px solid #b9d9da;
  border-radius:6px;
  min-width:20px;
  font-size:11px;
  padding:2px 4px;
  color:white
}
.hud-tool.gift {
  border-color:#ffdd73;
  background:linear-gradient(#f3c469,#b99048)
}
.hud-tool .cooldown {
  position:absolute;
  inset:0;
  background:#183548bb;
  display:grid;
  place-content:center;
  border-radius:7px;
  font-size:13px;
  font-weight:bold
}
.side-tools {
  position:absolute;
  z-index:6;
  top:89px;
  right:16px;
  display:flex;
  flex-direction:column;
  gap:12px
}
.side-tools .hud-tool {
  width:50px;
  height:50px
}
.round-bottom {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:30px;
  background:#234c55ed;
  color:#dfebd6;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:11px;
  text-align:center;
  padding:0 12px;
  z-index:6
}
.round-bottom .icon {
  width:16px;
  height:16px;
  color:#b6d491
}
.preparation-pill {
  position:absolute;
  top:90px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  display:flex;
  align-items:center;
  gap:13px;
  background:linear-gradient(#fff5cc,#f1d589);
  border:2px solid #fff6c6;
  border-bottom:4px solid #b58b49;
  border-radius:13px;
  padding:10px 18px;
  color:#6c522c;
  box-shadow:0 5px 15px #31472644;
  pointer-events:none
}
.preparation-pill b {
  font-size:28px;
  min-width:32px
}
.preparation-pill span {
  font-size:12px;
  font-weight:bold;
  line-height:1.4
}
.preparation-pill small {
  display:block;
  font-size:10px;
  font-weight:normal
}
.freeze-pill {
  background:#c5f4ff;
  border-color:white;
  color:#257596
}
.round-overlay {
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#14324bba;
  backdrop-filter:blur(5px)
}
.round-overlay .panel {
  background:linear-gradient(#eaf1e7,#d1e0d8);
  border:3px solid #f7f3ce;
  border-bottom:6px solid #174f64;
  border-radius:21px;
  color:#345a72;
  padding:28px;
  max-width:min(440px,92vw);
  text-align:center;
  box-shadow:0 12px 0 #143a5566
}
.round-overlay h2 {
  margin:3px 0 13px;
  font-size:28px;
  color:#244f69
}
.round-overlay p {
  font-size:13px;
  line-height:1.6;
  color:#64808c
}
.round-overlay .actions {
  flex-direction:column;
  gap:12px
}
.round-overlay .countdown-big {
  font-size:90px;
  font-weight:900;
  color:#fff3b0;
  text-shadow:0 5px #416678
}
.round-overlay .stars {
  display:flex;
  justify-content:center;
  gap:10px;
  margin:20px
}
.round-overlay .stars .icon {
  width:45px;
  height:45px
}
.tutorial-tip {
  position:absolute;
  left:18px;
  bottom:47px;
  z-index:8;
  max-width:325px;
  background:#fff4d6ed;
  border:2px solid #fffceb;
  border-bottom:4px solid #b99350;
  border-radius:14px;
  color:#36586b;
  padding:14px 17px;
  box-shadow:0 5px 20px #1d444a44
}
.tutorial-tip .eyebrow {
  color:#a98a45;
  font-size:9px
}
.tutorial-tip b {
  display:block;
  font-size:15px;
  margin:6px 0
}
.tutorial-tip p {
  font-size:11px;
  line-height:1.5;
  margin:0
}
.tutorial-tip .game-btn {
  padding:7px 10px;
  font-size:11px;
  min-height:34px;
  margin-top:10px
}
.field-controls {
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none
}
.field-control {
  position:absolute;
  pointer-events:auto;
  transform:translate(-50%,-50%);
  touch-action:manipulation;
  padding:0
}
/* Override the general pressed-button transform without moving the hit target. */
button.field-control:active:not(:disabled) {
  transform:translate(-50%,-50%)
}
.field-control.switch-control,.field-control.signal-control {
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:50%;
  width:35px;
  height:35px
}
.field-control.cancel-control,.field-control.clear-control {
  border:2px solid #ffe5cc;
  border-radius:50%;
  width:27px;
  height:27px;
  background:#d87150;
  color:white;
  line-height:20px;
  font-size:20px
}
.rotate-hint {
  display:none
}
.hidden,[hidden] {
  display:none!important
}
@keyframes glow {
  50% {
    outline-color:#fff9b188;
    outline-offset:10px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important
  }
}
@media(max-width:1050px) {
  .nav-btn span {
    display:none
  }
  .topbar {
    gap:9px;
    left:17px;
    right:17px
  }
  .nav-btn {
    width:48px;
    padding:10px;
    justify-content:center
  }
  .map-heading {
    top:101px
  }
  .map-heading h1 {
    font-size:34px
  }
  .round-identity {
    min-width:70px;
    margin-right:0
  }
  .round-stat {
    padding:5px 8px
  }
  .round-top {
    gap:7px
  }
  .hud-tool {
    width:43px;
    height:45px
  }
  .hud-boosters {
    gap:6px
  }
  .energy-grid {
    gap:8px
  }
  .round-stat.delivered {
    display:none
  }
}
@media(max-height:620px) {
  .welcome-layout {
    gap:24px;
    padding-bottom:0
  }
  .logo h1 {
    font-size:76px
  }
  .logo p {
    margin-top:12px;
    font-size:9px
  }
  .logo small {
    font-size:9px
  }
  .login-panel {
    padding:16px 28px 17px
  }
  .login-panel h2 {
    font-size:20px
  }
  .login-panel p {
    margin-bottom:14px
  }
  .login-divider {
    margin:12px 0
  }
  .provider {
    width:44px;
    height:46px;
    font-size:21px
  }
  .play-layout {
    gap:35px
  }
  .play-actions {
    gap:19px
  }
  .game-btn.big {
    min-height:65px
  }
  .map-heading {
    top:95px
  }
  .map-heading h1 {
    font-size:29px
  }
  .map-heading p {
    display:none
  }
  .chapter-badge {
    margin-top:7px;
    padding:5px 9px
  }
  .map-footer {
    bottom:15px
  }
  .modal-head {
    padding:12px 18px
  }
  .modal-head h2 {
    font-size:21px
  }
  .modal-body {
    padding:17px 21px
  }
  .loadout .booster-grid {
    grid-template-columns:repeat(8,1fr);
    gap:7px
  }
  .loadout .booster-card b {
    font-size:10px
  }
  .loadout .booster-art {
    width:38px;
    height:38px
  }
  .loadout .booster-card small {
    display:none
  }
  .level-summary {
    margin-bottom:10px
  }
  .level-medal {
    width:58px;
    height:58px;
    font-size:28px
  }
  .actions {
    margin-top:16px
  }
  .round-overlay .panel {
    padding:20px
  }
  .round-overlay h2 {
    font-size:24px
  }
  .round-overlay .actions {
    gap:8px;
    margin-top:12px
  }
  .round-overlay p {
    margin:8px 0
  }
  .round-top {
    height:63px;
    padding:6px 10px
  }
  #board {
    top:60px
  }
  .side-tools {
    top:79px
  }
  .preparation-pill {
    top:80px
  }
  .round-bottom {
    height:25px
  }
  #board {
    bottom:24px
  }
  .tutorial-tip {
    bottom:34px;
    padding:10px 13px;
    max-width:265px
  }
  .round-identity b {
    font-size:18px
  }
  .round-stat b {
    font-size:16px
  }
}
@media(max-width:740px) {
  .topbar {
    left:10px;
    right:10px;
    gap:6px
  }
  .resource {
    min-width:86px;
    padding-left:7px;
    gap:5px
  }
  .resource strong {
    font-size:17px;
    min-width:19px
  }
  .resource .icon {
    width:23px
  }
  .resource .add {
    width:24px;
    height:28px
  }
  .topbar .square-btn,.nav-btn {
    width:40px;
    height:44px;
    min-height:44px;
    padding:7px;
    border-radius:10px
  }
  .topbar .push {
    display:none
  }
  .map-heading {
    left:5%
  }
  .map-note {
    display:none
  }
  .round-stat {
    padding:4px 6px
  }
  .round-identity {
    min-width:60px
  }
  .round-identity b {
    font-size:16px
  }
  .round-identity small {
    font-size:8px
  }
  .round-stat.timer {
    min-width:73px
  }
  .round-stat b {
    font-size:14px
  }
  .hud-tool {
    width:37px;
    height:41px;
    padding:5px
  }
  .hud-tool .icon {
    width:22px;
    height:22px
  }
  .round-top {
    gap:5px
  }
  .hud-boosters {
    gap:5px
  }
  .energy-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .booster-grid {
    grid-template-columns:repeat(4,1fr)
  }
  .loadout .booster-grid {
    grid-template-columns:repeat(4,1fr)
  }
  .modal-head h2 {
    font-size:19px
  }
  .providers {
    gap:7px
  }
  .provider {
    width:40px;
    height:44px
  }
  .login-panel {
    padding:16px 22px
  }
  .round-bottom {
    font-size:10px
  }
}
@media(orientation:portrait) and (max-width:650px) {
  .rotate-hint {
    position:fixed;
    z-index:2000;
    inset:0;
    background:#173e5ff2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:15px;
    text-align:center;
    font-size:25px;
    padding:30px
  }
  .rotate-hint strong {
    font-size:14px;
    color:#bcdbe4;
    font-weight:normal;
    max-width:280px;
    line-height:1.6
  }
}
.field-control.train-target {
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid #fff3a0;
  background:#ffe47130;
  box-shadow:0 0 0 4px #ffffc133;
  cursor:crosshair
}
.field-control.wreck-control {
  border:2px solid #ffe5cc;
  border-radius:50%;
  width:27px;
  height:27px;
  background:#d87150;
  color:white;
  font-size:20px
}
@media(max-height:500px) {
  .tutorial-tip {
    max-width:min(210px,24vw);
    left:10px;
    padding:10px
  }
  .tutorial-tip b {
    font-size:12px
  }
  .tutorial-tip p {
    font-size:10px
  }
  .tutorial-tip .eyebrow {
    font-size:8px
  }
  .map-land {
    min-height:300px
  }
  .map-heading {
    top:87px
  }
  .map-heading h1 {
    font-size:24px
  }
  .map-heading .chapter-badge {
    display:none
  }
  .map-footer {
    bottom:10px
  }
  .level-node .node {
    width:60px;
    height:60px;
    font-size:26px;
    border-width:3px;
    border-bottom-width:6px
  }
  .level-node .stars {
    margin-top:6px
  }
  .level-node .stars .icon {
    width:16px;
    height:16px
  }
  .level-node small {
    font-size:9px;
    margin-top:5px;
    padding:3px 7px
  }
  .level-node .flag {
    font-size:9px;
    padding:5px 8px;
    bottom:calc(100% + 7px)
  }
  .future-node {
    padding:7px 10px;
    font-size:10px;
    top:9%
  }
  .future-node b {
    font-size:16px
  }
}
.nav-btn .badge {
  display:block;
  font-size:10px;
  line-height:1
}
@media(max-height:500px) {
  .journey {
    inset:62px 0 64px
  }
  .map-land {
    min-width:0;
    min-height:0
  }
  .map-heading {
    top:75px;
    pointer-events:none
  }
  .map-heading .eyebrow {
    font-size:8px
  }
  .map-heading h1 {
    font-size:20px;
    margin-top:4px
  }
  .level-node .flag,.future-node {
    display:none
  }
  .map-footer .game-btn {
    min-height:38px;
    padding:7px 12px;
    font-size:12px
  }
  .map-footer .icon {
    width:20px;
    height:20px
  }
  .map-footer {
    bottom:10px
  }
}
@media(max-height:500px) {
  .modal-head {
    padding:10px 17px
  }
  .modal-head h2 {
    font-size:19px
  }
  .modal-body:has(.loadout) {
    padding:11px 17px
  }
  .loadout .level-medal {
    width:47px;
    height:47px;
    font-size:25px
  }
  .loadout .level-summary {
    margin-bottom:7px;
    gap:13px
  }
  .loadout .level-summary h3 {
    font-size:18px;
    margin:1px 0
  }
  .loadout .level-summary p {
    display:none
  }
  .loadout .level-summary .eyebrow {
    font-size:8px
  }
  .loadout .level-facts {
    font-size:9px;
    margin-top:5px;
    gap:10px
  }
  .loadout .loadout-caption {
    font-size:11px;
    margin:8px 0
  }
  .loadout .booster-grid {
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:6px
  }
  .loadout .booster-card {
    padding:7px 3px 6px;
    border-radius:9px
  }
  .loadout .booster-art {
    width:31px;
    height:32px;
    border-radius:8px
  }
  .loadout .booster-art .icon {
    width:22px;
    height:22px
  }
  .loadout .booster-card b {
    font-size:9px;
    margin-top:7px;
    min-height:21px
  }
  .loadout .booster-card .count {
    top:2px;
    right:2px;
    font-size:8px;
    padding:2px;
    border-width:1px
  }
  .loadout .actions {
    margin-top:10px
  }
  .loadout .actions .game-btn {
    min-height:36px;
    padding:6px 12px;
    font-size:12px
  }
}
@media(max-height:500px) {
  .loadout .booster-card b {
    min-height:12px
  }
  .modal-head:has(+ .modal-body .loadout) {
    padding-top:8px;
    padding-bottom:8px
  }
}
@media(max-height:500px) {
  .welcome-layout {
    gap:12px
  }
  .logo h1 {
    font-size:48px;
    letter-spacing:-2px;
    -webkit-text-stroke-width:1.5px
  }
  .logo small {
    font-size:7px;
    letter-spacing:3px
  }
  .logo p {
    font-size:8px;
    letter-spacing:2px;
    margin-top:8px
  }
  .login-panel {
    padding:12px 22px
  }
  .login-panel h2 {
    font-size:17px;
    margin-bottom:5px
  }
  .login-panel p {
    font-size:10px;
    margin-bottom:10px
  }
  .providers {
    gap:8px
  }
  .provider {
    width:37px;
    height:39px;
    font-size:19px;
    border-radius:9px
  }
  .provider[data-provider="Apple"] {
    font-size:26px
  }
  .provider[data-provider="VK"] {
    font-size:15px
  }
  .login-divider {
    margin:10px 0;
    font-size:8px
  }
  .login-panel .game-btn {
    min-height:40px;
    font-size:14px;
    padding:7px 15px
  }
  .play-layout {
    gap:24px
  }
  .play-actions {
    gap:16px
  }
  .game-btn.big {
    min-height:58px;
    font-size:26px;
    min-width:240px
  }
  .screen-corner {
    bottom:8px;
    left:13px;
    font-size:7px
  }
  .screen-version {
    left:auto;
    right:13px
  }
}
.field-control.station-target {
  background: transparent;
  border: 2px dashed #fff3b7;
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--station-color), inset 0 0 16px #fff3b72b;
  cursor: pointer;
}
.field-control.station-target:hover,
.field-control.station-target:focus-visible {
  background: #fff3b726;
  border-style: solid;
}