/* Floating brand and a content-sized command panel; no full-width bar. */
.shell > .topbar,
.shell.battle-mode > .topbar {
  height: 108px;
  flex: 0 0 108px;
  gap: 12px;
  padding: 4px 16px 6px 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.topbar .brand,
.battle-mode .topbar .brand {
  flex: 0 1 100px;
  width: 100px;
  min-width: 44px;
  height: 100px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 3px #000a) drop-shadow(0 9px 8px #0005);
}
.command-panel {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: max-content;
  margin-left: auto;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  border: 1px solid #729ca069;
  border-top-color: #a9ced590;
  border-radius: 22px;
  background: linear-gradient(155deg, #294f63, #102b42 80%);
  box-shadow:
    0 4px 0 #071b2b,
    0 7px 15px #0004,
    inset 0 1px 0 #d1f7ff20;
}
.topbar .wallet {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  margin: 0;
}
.topbar .gem-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 3px 0 0;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: none;
  box-shadow: none;
}
.topbar .header-gem-art {
  position: relative;
  display: block;
  flex: 0 0 42px;
  width: 42px;
  height: 48px;
  isolation: isolate;
}
.header-gem-art img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 0 #001822) drop-shadow(0 0 7px #46e4ff66);
  animation: header-gem-glow 5s ease-in-out infinite;
}
.header-gem-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 38%,
    #ffffff00 43%,
    #ffffffd9 49%,
    #ffffff40 54%,
    transparent 60%
  );
  background-size: 300% 100%;
  clip-path: polygon(23% 13%, 77% 13%, 98% 41%, 50% 94%, 2% 41%);
  animation: header-gem-shine 5s ease-in-out infinite;
  pointer-events: none;
}
.header-gem-art i {
  position: absolute;
  z-index: 1;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #eaffff;
  clip-path: polygon(50% 0, 60% 39%, 100% 50%, 60% 61%, 50% 100%, 40% 61%, 0 50%, 40% 39%);
  animation: header-gem-spark 5s ease-in-out infinite;
}
.header-gem-art i + i {
  top: auto;
  right: auto;
  left: -3px;
  bottom: 8px;
  width: 8px;
  height: 8px;
  animation-delay: 0.45s;
}
.topbar .header-gem-copy {
  display: grid;
  justify-items: start;
  gap: 1px;
}
.topbar .gem-balance small,
.topbar .player-level small {
  color: #b9dce4;
  font:
    900 10px/1.1 'Nunito',
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}
.topbar .gem-balance b {
  color: #b6f7ff;
  font:
    30px/1 'Lilita One',
    sans-serif;
  text-shadow: 0 2px 0 #07566b;
  font-variant-numeric: tabular-nums;
}
.topbar .player-level {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 40px;
}
.level-medallion {
  display: grid;
  place-items: center;
  width: 36px;
  height: 33px;
  border: 1px solid #ffe4a0;
  border-radius: 9px 9px 13px 13px;
  background: linear-gradient(145deg, #ffecab, #e9b94f);
  box-shadow:
    0 3px 0 #91612e,
    inset 0 2px 0 #fff5c9;
}
.topbar .player-level b {
  color: #60431e;
  font:
    23px/1 'Lilita One',
    sans-serif;
}
.topbar .nav-utilities {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 10px;
  border-left: 1px solid #95c8d12b;
}
.topbar .nav-tool,
.topbar .feedback-fab {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 56px;
  min-width: 44px;
  height: 52px;
  min-height: 44px;
  padding: 4px;
  border: 1px solid #8cc9d132;
  border-radius: 12px;
  background: linear-gradient(155deg, #47748780, #18364b80);
  box-shadow:
    inset 0 1px 0 #ffffff12,
    0 2px 0 #071c2b66;
  color: #f6e8c9;
  filter: none;
  transition:
    background 0.18s,
    transform 0.18s;
}
.topbar .nav-tool img,
.topbar .nav-tool svg {
  width: 27px;
  height: 27px;
  filter: drop-shadow(0 2px 1px #0006);
}
.topbar .nav-tool span {
  font:
    800 10px/1.1 'Nunito',
    sans-serif;
}
@media (hover: hover) {
  .topbar .nav-tool:hover {
    background: #456e83;
    transform: translateY(-1px);
  }
  .topbar .gem-balance:hover {
    background: #70e6ff10;
  }
}
.topbar .nav-tool:active {
  transform: translateY(1px);
}
@keyframes header-gem-glow {
  0%,
  70%,
  100% {
    filter: drop-shadow(0 2px 0 #001822) drop-shadow(0 0 5px #46e4ff55);
  }
  82% {
    filter: drop-shadow(0 2px 0 #001822) drop-shadow(0 0 10px #83f4ffbb);
  }
}
@keyframes header-gem-shine {
  0%,
  68% {
    background-position: 100% 0;
    opacity: 0;
  }
  73% {
    opacity: 1;
  }
  89%,
  100% {
    background-position: 0 0;
    opacity: 0;
  }
}
@keyframes header-gem-spark {
  0%,
  71%,
  96%,
  100% {
    transform: scale(0) rotate(0);
    opacity: 0;
  }
  82% {
    transform: scale(1.15) rotate(60deg);
    opacity: 1;
  }
}
@media (max-width: 600px) {
  .shell > .topbar,
  .shell.battle-mode > .topbar {
    height: 92px;
    flex-basis: 92px;
    padding: 2px 8px 4px 4px;
    gap: 5px;
  }
  .topbar .brand,
  .battle-mode .topbar .brand {
    flex-basis: 84px;
    width: 84px;
    height: 84px;
  }
  .command-panel {
    padding: 7px 6px 7px 8px;
    gap: 6px;
    border-radius: 17px;
  }
  .topbar .wallet {
    gap: 7px;
  }
  .topbar .gem-balance {
    gap: 3px;
    padding: 0;
  }
  .topbar .header-gem-art {
    flex-basis: 31px;
    width: 31px;
    height: 37px;
  }
  .topbar .gem-balance b {
    font-size: 24px;
  }
  .topbar .player-level {
    min-width: 32px;
  }
  .level-medallion {
    width: 30px;
    height: 29px;
  }
  .topbar .player-level b {
    font-size: 20px;
  }
  .topbar .gem-balance small,
  .topbar .player-level small {
    font-size: 9px;
    letter-spacing: 0.7px;
  }
  .topbar .nav-utilities {
    gap: 3px;
    padding-left: 6px;
  }
  .topbar .nav-tool,
  .topbar .feedback-fab {
    width: 44px;
    height: 48px;
    padding: 3px 1px;
    border-radius: 10px;
  }
  .topbar .nav-tool img,
  .topbar .nav-tool svg {
    width: 24px;
    height: 24px;
  }
  .topbar .nav-tool span {
    font-size: 9px;
  }
}
@media (max-width: 359px) {
  .topbar .brand,
  .battle-mode .topbar .brand {
    flex-basis: 66px;
    width: 66px;
    height: 74px;
  }
  .command-panel {
    padding-inline: 5px;
    gap: 4px;
  }
  .topbar .wallet {
    gap: 4px;
  }
  .topbar .gem-balance b {
    font-size: 21px;
  }
  .topbar .header-gem-art {
    flex-basis: 26px;
    width: 26px;
  }
  .topbar .nav-utilities {
    padding-left: 4px;
  }
}
/* Keep the floating header compact when the battlefield needs the space. */
.shell.battle-mode > .topbar {
  height: 80px;
  flex-basis: 80px;
  padding-block: 2px;
}
.battle-mode .topbar .brand {
  flex-basis: 72px;
  width: 72px;
  height: 72px;
}
@media (max-height: 450px) and (orientation: landscape) {
  .shell > .topbar,
  .shell.battle-mode > .topbar {
    height: 68px;
    flex-basis: 68px;
    padding-block: 2px;
  }
  .topbar .brand,
  .battle-mode .topbar .brand {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
  }
  .command-panel {
    padding-block: 4px;
    border-radius: 16px;
  }
  .topbar .nav-tool,
  .topbar .feedback-fab {
    height: 46px;
  }
  .topbar .gem-balance {
    min-height: 46px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header-gem-art img,
  .header-gem-art::after,
  .header-gem-art i {
    animation: none;
  }
  .header-gem-art::after,
  .header-gem-art i {
    opacity: 0;
  }
  .topbar .nav-tool {
    transition: none;
  }
}

/* Battle controls take the place of Settings/Feedback without covering the field. */
.topbar [hidden] {
  display: none !important;
}
.battle-header-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}
.topbar .battle-clock {
  position: static;
  padding: 5px 8px;
  min-width: 62px;
  color: #fff2bc;
  background: transparent;
  box-shadow: none;
  border: 0;
  font:
    26px/1 'Lilita One',
    sans-serif;
  font-variant-numeric: tabular-nums;
}
.topbar .battle-header-pause,
.topbar .battle-header-exit {
  min-height: 42px;
  border: 1px solid #ffecb2;
  border-radius: 12px;
  padding: 8px 11px;
  background: linear-gradient(#ffe89b, #edc766);
  color: #594122;
  box-shadow: 0 3px 0 #94703a;
  font:
    17px/1 'Lilita One',
    sans-serif;
}
.topbar .battle-header-exit {
  padding: 6px 10px;
  font-size: 27px;
}
.topbar.in-battle .command-panel {
  gap: 8px;
}
.topbar.in-battle .wallet {
  gap: 6px;
}
@media (max-width: 600px) {
  .topbar.in-battle .player-level {
    display: none;
  }
  .topbar.in-battle .command-panel {
    padding: 7px;
    gap: 5px;
  }
  .topbar.in-battle .header-gem-art {
    width: 25px;
    height: 30px;
  }
  .topbar.in-battle .header-gem-copy b {
    font-size: 21px;
  }
  .topbar.in-battle .header-gem-copy small {
    display: none;
  }
  .topbar .battle-clock {
    min-width: 45px;
    font-size: 21px;
    padding: 2px;
  }
  .battle-header-controls {
    gap: 5px;
  }
  .topbar .battle-header-pause {
    padding: 6px 8px;
    font-size: 14px;
  }
  .topbar .battle-header-exit {
    padding: 5px 8px;
  }
}

.topbar.in-battle .battle-header-controls {
  border-left: 1px solid #8ebec04d;
  padding-left: 7px;
}
@media (max-width: 600px) {
  .topbar.in-battle .header-gem-art {
    flex-basis: 23px;
    width: 23px;
  }
  .topbar .battle-header-pause {
    font-size: 0;
    min-width: 35px;
    padding: 8px;
  }
  .topbar .battle-header-pause::before {
    font-size: 20px;
    margin-right: 0;
  }
}