:root {
  --gold: #f7bd3c;
  --gold-light: #ffe5a0;
  --crimson: #8f130e;
  --ink: #080708;
  --nav-height: clamp(66px, 17.5dvh, 92px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ink);
  color: #fff;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

button,
a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

.hidden { display: none !important; }

#game-shell {
  position: fixed;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(91, 7, 2, .22), transparent 31%, transparent 69%, rgba(4, 30, 69, .25)),
    linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .68)),
    url("./backgrounds/arena-lobby-landscape.png") center 48% / cover no-repeat;
}

#game-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, transparent 5%, rgba(0, 0, 0, .08) 42%, rgba(0, 0, 0, .72) 112%);
}

.ambient {
  position: absolute;
  z-index: -1;
  top: 17%;
  bottom: 12%;
  width: 24vw;
  opacity: .34;
  filter: blur(28px);
  pointer-events: none;
}

.ambient-left { left: -12vw; background: #db1d09; }
.ambient-right { right: -12vw; background: #0757cc; }

.arena-energy-line {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, #ff655c 18%, #fff4da 50%, #62bfff 82%, transparent);
  box-shadow:
    -18px 0 18px rgba(255, 25, 19, .68),
    18px 0 18px rgba(0, 119, 255, .68),
    0 0 7px rgba(255, 255, 255, .82);
  opacity: 1;
}

.arena-energy-line::before {
  content: "";
  position: absolute;
  inset: 0 -8px;
  background: linear-gradient(90deg, rgba(255, 23, 18, .36), transparent 42%, transparent 58%, rgba(0, 115, 255, .36));
  filter: blur(8px);
}

.arena-energy-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid #fff4cf;
  background: linear-gradient(135deg, #ff2b22 0 48%, #168eff 52% 100%);
  box-shadow: -5px 0 13px #ff241f, 5px 0 13px #168eff, 0 0 14px #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}

.arena-energy-flow {
  position: absolute;
  z-index: 3;
  top: -18%;
  left: 50%;
  width: 7px;
  height: clamp(16px, 5dvh, 34px);
  border-radius: 50%;
  background: linear-gradient(180deg, transparent, #ff2d24 22%, #fff9d0 50%, #36aaff 78%, transparent);
  box-shadow: -4px 0 7px #ff2018, 4px 0 7px #0e86ff, 0 0 5px #fff, 0 0 12px #51aaff;
  filter: brightness(1.25);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  animation: arena-energy-flow 1.65s linear infinite;
}

.arena-energy-flow::before,
.arena-energy-flow::after {
  content: "";
  position: absolute;
  top: 12%;
  width: 7px;
  height: 76%;
  border-radius: 50%;
  filter: blur(4px);
  opacity: .62;
}

.arena-energy-flow::before { right: 100%; background: #ff241d; }
.arena-energy-flow::after { left: 100%; background: #138cff; }

@keyframes arena-energy-flow {
  0% { top: -20%; opacity: 0; transform: translateX(-50%) scaleY(.65); }
  12% { opacity: .98; }
  52% { opacity: 1; transform: translateX(-50%) scaleY(1.15); }
  88% { opacity: .9; }
  100% { top: 105%; opacity: 0; transform: translateX(-50%) scaleY(.72); }
}

.arena-energy-bolt {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 15px;
  height: clamp(110px, 29vh, 270px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -18vh, 0);
  will-change: transform, opacity;
}

.arena-energy-bolt::before,
.arena-energy-bolt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(42% 0, 24% 20%, 63% 35%, 18% 52%, 58% 68%, 30% 83%, 45% 100%, 67% 100%, 56% 82%, 80% 67%, 43% 51%, 86% 35%, 51% 19%, 65% 0);
  box-shadow: 0 0 8px currentColor, 0 0 18px currentColor;
}

.arena-energy-bolt::after { filter: blur(7px); opacity: 1; }
.arena-energy-bolt.is-red { color: #ff3329; filter: drop-shadow(0 0 5px #ff160f); }
.arena-energy-bolt.is-blue { color: #1b9aff; filter: drop-shadow(0 0 5px #006eff); }

.topbar {
  position: absolute;
  z-index: 10;
  inset: calc(var(--safe-top) + 5px) calc(var(--safe-right) + 8px) auto calc(var(--safe-left) + 8px);
  height: clamp(42px, 12dvh, 68px);
  display: flex;
  align-items: center;
  gap: clamp(5px, 1vw, 12px);
  pointer-events: none;
}

.topbar > * { pointer-events: auto; }

.topbar-actions {
  position: relative;
  z-index: 1;
  margin-left: auto;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(5px, 1vw, 12px);
}

.session-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 11px 5px 8px;
  border: 1px solid rgba(242, 177, 53, .55);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(35, 28, 25, .92), rgba(8, 7, 8, .94));
  box-shadow: 0 3px 10px #0008, inset 0 0 10px #d98b1417;
  font-family: Arial, sans-serif;
}

.session-badge span:last-child { display: grid; min-width: 0; }
.session-badge small { color: #d9b86f; font-size: clamp(7px, 1.25dvh, 10px); letter-spacing: .11em; }
.session-badge b { max-width: 17vw; overflow: hidden; color: #fff; font-size: clamp(9px, 1.8dvh, 13px); text-overflow: ellipsis; white-space: nowrap; }
.online-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #61e275; box-shadow: 0 0 8px #61e275; }

.icon-button {
  width: clamp(40px, 10dvh, 58px);
  height: clamp(40px, 10dvh, 58px);
  border: 1px solid #9c671e;
  border-radius: 8px;
  color: var(--gold-light);
  background: linear-gradient(145deg, #32251a, #100e0d 70%);
  box-shadow: 0 3px 7px #000b, inset 0 0 0 2px #000, inset 0 0 10px #e08c172c;
  cursor: pointer;
}

.icon-button:active { transform: translateY(2px) scale(.97); }
.fullscreen-button { width: auto; min-width: clamp(92px, 16vw, 135px); padding: 0 9px; font-family: Arial, sans-serif; font-size: clamp(9px, 2dvh, 13px); font-weight: 900; white-space: nowrap; }
.about-game-button {
  width: auto;
  min-width: clamp(92px, 14vw, 126px);
  padding: 0 10px;
  color: #ffe09a;
  font-family: Arial, sans-serif;
  font-size: clamp(8px, 1.8dvh, 12px);
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
}
.settings-button { padding: 3px; }
.settings-button img { width: 100%; height: 100%; object-fit: contain; }
.settings-button[aria-expanded="true"] { border-color: #ffd969; box-shadow: 0 0 13px #ffb52b99, inset 0 0 0 2px #000; }

.settings-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(10px, var(--safe-top)) max(10px, var(--safe-right)) max(10px, var(--safe-bottom)) max(10px, var(--safe-left));
  background: rgba(2, 2, 3, .76);
  backdrop-filter: blur(5px);
}

.settings-panel {
  width: min(92vw, 390px);
  max-height: calc(100dvh - 20px);
  padding: clamp(12px, 3dvh, 20px);
  border: 2px solid #b77725;
  border-radius: 7px;
  color: #fff0c1;
  background: linear-gradient(160deg, rgba(52, 27, 18, .98), rgba(8, 7, 8, .99) 62%);
  box-shadow: 0 12px 34px #000, inset 0 0 0 2px #160b07, inset 0 0 24px #d4761922;
  text-align: center;
}

.settings-panel small { color: #e8b650; font: 800 clamp(8px, 1.8dvh, 11px) Arial, sans-serif; letter-spacing: .15em; }
.settings-panel h2 { margin: 3px 0 5px; color: #ffe19a; font-size: clamp(21px, 5.2dvh, 34px); letter-spacing: .04em; text-shadow: 0 2px 2px #000; }
.settings-panel p { margin: 0 0 clamp(9px, 2.5dvh, 15px); color: #d9cfbd; font: clamp(10px, 2.2dvh, 14px)/1.3 Arial, sans-serif; }
.settings-panel button { width: 100%; min-height: clamp(32px, 8dvh, 44px); cursor: pointer; }
.settings-panel .site-audio-toggle { margin-bottom: 6px; border: 1px solid #f1c457; color: #261500; background: linear-gradient(#ffe275, #d9911f); font-weight: 900; }
.settings-panel .site-audio-toggle[aria-pressed="false"] { color: #d8cbb6; border-color: #71563b; background: #211713; }
.settings-controls-toggle { margin-bottom: 6px; border: 1px solid #57bff1; color: #e9f8ff; background: linear-gradient(#17678f, #0a2c45); font-weight: 900; }
.settings-panel.is-editing-controls { width: min(96vw, 820px); }
.settings-panel.is-editing-controls > p { display: none; }
.settings-panel.is-editing-controls .site-audio-toggle { display: none; }
.settings-controls-editor { display: grid; gap: 6px; margin-bottom: 7px; padding: 7px; border: 1px solid #86612b; border-radius: 6px; background: rgba(8, 7, 7, .78); }
.settings-controls-editor > small { color: #f4ce78; font: 800 clamp(7px, 1.55dvh, 10px)/1.1 Arial, sans-serif; letter-spacing: .06em; }
.settings-keybindings { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) clamp(20px, 4vw, 38px) minmax(0, 1.1fr); gap: clamp(5px, 1.2vw, 11px); align-items: stretch; }
.settings-control-group { min-width: 0; display: grid; grid-template-rows: auto 1fr; gap: 4px; padding: 5px; border: 1px solid rgba(188, 136, 54, .55); border-radius: 9px; background: linear-gradient(145deg, rgba(61, 37, 27, .72), rgba(13, 12, 15, .88)); box-shadow: inset 0 0 16px #0008; }
.settings-control-group > header { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 0 3px 3px; border-bottom: 1px solid rgba(205, 154, 69, .28); text-align: left; }
.settings-control-group > header b { color: #ffe09a; font: 900 clamp(8px, 1.9dvh, 12px)/1 Arial, sans-serif; letter-spacing: .07em; }
.settings-control-group > header small { color: #ac9e89; font: 700 clamp(6px, 1.3dvh, 8px)/1 Arial, sans-serif; letter-spacing: .08em; }
.settings-control-grid { min-height: 0; display: grid; gap: 4px; align-items: stretch; }
.settings-movement-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.settings-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.settings-keybinding { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 1fr; align-items: stretch; gap: 2px; color: #e8dac2; font: 800 clamp(7px, 1.55dvh, 10px)/1 Arial, sans-serif; text-align: center; }
.settings-keybinding > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-keybinding button { min-width: 0; min-height: clamp(24px, 5.7dvh, 32px); padding: 2px 4px; border: 1px solid #96713b; border-radius: 5px; color: #ffe49b; background: linear-gradient(#40291b, #1b100c); box-shadow: inset 0 0 7px #0009, 0 2px 3px #0008; font: 900 clamp(8px, 1.9dvh, 11px)/1 Arial, sans-serif; }
.settings-movement-grid .settings-key-up { grid-column: 2; grid-row: 1; }
.settings-movement-grid .settings-key-left { grid-column: 1; grid-row: 2; }
.settings-movement-grid .settings-key-down { grid-column: 2; grid-row: 2; }
.settings-movement-grid .settings-key-right { grid-column: 3; grid-row: 2; }
.settings-movement-grid .settings-key-jump { grid-column: 2; grid-row: 3; }
.settings-movement-grid .settings-keybinding button { border-color: #5f94b5; color: #e8f8ff; background: linear-gradient(#244d66, #102330); }
.settings-action-grid .settings-keybinding button { border-radius: 16px; }
.settings-action-grid .settings-key-punch button { border-color: #e85a4e; color: #fff0eb; background: linear-gradient(#9e2a22, #50100c); }
.settings-action-grid .settings-key-kick button { border-color: #ebbd4c; color: #fff4c6; background: linear-gradient(#936817, #493008); }
.settings-action-grid .settings-key-block button { border-color: #5baee1; color: #e8f8ff; background: linear-gradient(#22668d, #103149); }
.settings-action-grid .settings-key-throw button { border-color: #61c77b; color: #eaffee; background: linear-gradient(#257240, #123820); }
.settings-action-grid .settings-key-jump { grid-column: 1 / -1; grid-row: 3; width: 58%; justify-self: center; }
.settings-action-grid .settings-key-jump button { border-color: #b07ce8; color: #f6ebff; background: linear-gradient(#683598, #321747); }
.settings-controller-center { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; opacity: .65; }
.settings-controller-center::before { content: ""; width: 2px; height: 42%; background: linear-gradient(transparent, #d19b45, transparent); box-shadow: 0 0 7px #e8aa43; }
.settings-controller-center i { width: 7px; height: 7px; border: 1px solid #b37c2c; border-radius: 50%; background: #20130e; box-shadow: inset 0 0 3px #000; }
.settings-keybinding button.listening { border-color: #ffef8d; color: #211000; background: #ffd459; box-shadow: 0 0 12px #ffbb38; animation: settings-key-pulse .7s ease-in-out infinite alternate; }
.settings-control-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.settings-control-actions button { min-height: clamp(27px, 6.5dvh, 36px); border: 1px solid #8e6934; color: #eed8ae; background: #291911; font: 900 clamp(8px, 1.8dvh, 11px) Arial, sans-serif; }
.settings-control-actions #save-settings-controls { border-color: #f2c553; color: #261600; background: linear-gradient(#ffe276, #d9901e); }
@keyframes settings-key-pulse { to { filter: brightness(1.25); transform: scale(1.025); } }
.logout-account { border: 2px solid #ff4b3e; color: #fff; background: linear-gradient(#c92a20, #77100c); box-shadow: 0 0 12px #ff291f55, inset 0 0 0 1px #460705; font-size: clamp(13px, 3dvh, 19px); font-weight: 900; letter-spacing: .06em; }
.close-settings { margin-top: 6px; border: 1px solid #9a6a32; color: #f2d69e; background: linear-gradient(#4a2b1b, #1b100c); font: 800 clamp(10px, 2.2dvh, 14px) Arial, sans-serif; }
.settings-panel button:active { transform: translateY(1px) scale(.99); }

@media (orientation: landscape) and (max-height: 430px) {
  .settings-panel.is-editing-controls { padding: 7px 10px; }
  .settings-panel.is-editing-controls > small,
  .settings-panel.is-editing-controls > h2 { display: none; }
  .settings-panel.is-editing-controls .logout-account,
  .settings-panel.is-editing-controls .close-settings { min-height: 26px; }
}

body.is-guest .session-badge,
body.is-guest .settings-button,
body.is-guest .bottom-nav,
body.is-guest #play-lobby { display: none; }
body.is-guest .topbar-actions { margin-left: auto; }
body:not(.is-guest) .about-game-button { display: none; }
body.is-guest .hero { top: var(--safe-top); bottom: var(--safe-bottom); width: min(86vw, 920px); }
body.is-guest .hero-logo { height: clamp(145px, 45dvh, 285px); max-width: 57vw; }
body.is-guest #home-choice-label::after { content: "ACESSO À ARENA"; }
body.is-guest #home-choice-label { font-size: 0; }
body.is-guest #home-choice-label::after { font-size: clamp(9px, 2.3dvh, 15px); }
body:not(.is-guest) .guest-actions { display: none; }

#home-screen {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

#home-screen button,
#home-screen a { pointer-events: auto; }

.guest-actions {
  z-index: 2;
  width: min(76vw, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 14px);
}
.guest-actions .play-button { width: min(34vw, 360px); flex: 0 1 360px; }
.guest-actions .play-button:nth-child(2) { animation-delay: -.7s; }

.auth-overlay {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(7px, var(--safe-top)) max(8px, var(--safe-right)) max(7px, var(--safe-bottom)) max(8px, var(--safe-left));
  overflow: hidden;
  background: rgba(2, 2, 3, .76);
  backdrop-filter: blur(6px);
}

.auth-panel {
  width: min(94vw, 760px);
  max-height: calc(100dvh - 14px);
  padding: clamp(8px, 2dvh, 14px);
  border: 2px solid #b77725;
  border-radius: 7px;
  color: #fff0c1;
  background: linear-gradient(155deg, rgba(65, 31, 19, .99), rgba(8, 7, 8, .99) 58%);
  box-shadow: 0 12px 34px #000, inset 0 0 0 2px #160b07, inset 0 0 28px #d4761929;
}

.auth-panel-header { min-height: clamp(35px, 8dvh, 48px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #75461d; }
.auth-panel-header small { color: #e8b650; font: 800 clamp(7px, 1.5dvh, 10px) Arial, sans-serif; letter-spacing: .15em; }
.auth-panel-header h2 { margin: 1px 0 4px; color: #ffe19a; font-size: clamp(18px, 4.3dvh, 29px); line-height: .9; letter-spacing: .04em; text-shadow: 0 2px 2px #000; }
.auth-panel-header button { width: clamp(30px, 7dvh, 40px); height: clamp(30px, 7dvh, 40px); border: 1px solid #b87b2b; color: #ffe4a2; background: #32170f; font: 900 clamp(18px, 4dvh, 26px)/1 Arial, sans-serif; cursor: pointer; }

.mobile-auth-form { min-height: 0; padding-top: clamp(6px, 1.5dvh, 10px); font-family: Arial, sans-serif; }
.mobile-auth-form label { min-width: 0; }
.mobile-auth-form label > span:first-child { display: block; margin-bottom: 2px; color: #f2d69b; font-size: clamp(9px, 1.8dvh, 12px); font-weight: 800; }
.mobile-auth-form input:not([type="radio"]) { width: 100%; height: clamp(31px, 7.5dvh, 42px); padding: 0 9px; border: 2px solid #9d6a35; border-radius: 3px; outline: none; color: #1b130d; background: #fff9ec; font: clamp(11px, 2.4dvh, 15px) Arial, sans-serif; }
.mobile-auth-form input:not([type="radio"]):focus { border-color: #ffd36e; box-shadow: 0 0 9px #ffb52d66; }
.mobile-auth-form label > small { display: block; margin-top: 2px; color: #bfb09a; font-size: clamp(7px, 1.35dvh, 9px); }
.login-auth-form { width: min(100%, 470px); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(5px, 1.2dvh, 9px); }
.login-auth-form .auth-switch { justify-self: center; }

.auth-submit { min-height: clamp(33px, 8dvh, 44px); padding: 4px 18px; border: 2px solid #ffdc68; color: #260f00; background: linear-gradient(#ffe16f, #e98e17); box-shadow: 0 3px 8px #000b, inset 0 0 0 1px #814406; font: 900 clamp(12px, 2.7dvh, 18px) Impact, "Arial Narrow Bold", sans-serif; letter-spacing: .055em; cursor: pointer; }
.auth-submit:disabled { opacity: .55; cursor: wait; }
.auth-switch { min-height: 25px; padding: 3px 9px; border: 0; color: #e9bd66; background: transparent; font: 800 clamp(8px, 1.7dvh, 11px) Arial, sans-serif; text-decoration: underline; cursor: pointer; }

.register-auth-form { width: min(100%, 560px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "fields" "team" "note" "actions"; gap: clamp(4px, 1dvh, 7px); align-items: start; }
.register-fields { grid-area: fields; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(4px, 1dvh, 7px); }
.register-team-fieldset { grid-area: team; min-width: 0; margin: 0; padding: 4px 6px 6px; border: 1px solid #8c5c29; }
.register-team-fieldset legend { padding: 0 5px; color: #f4c767; font: 900 clamp(8px, 1.65dvh, 11px) Impact, sans-serif; letter-spacing: .04em; }
.auth-team-options { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.auth-team-option { position: relative; min-height: clamp(47px, 12dvh, 66px); display: flex; align-items: center; gap: 4px; padding: 3px 5px; border: 2px solid #68441f; color: #f5dfae; background: rgba(13, 10, 9, .78); cursor: pointer; }
.auth-team-option.left { border-color: #a52520; }.auth-team-option.right { border-color: #2467a2; }
.auth-team-option:has(input:checked) { border-color: #ffe06d; background: #674017; box-shadow: 0 0 10px #ffbc3659; }
.auth-team-option input { position: absolute; opacity: 0; pointer-events: none; }
.auth-team-option img { width: clamp(30px, 7dvh, 42px); height: clamp(30px, 7dvh, 42px); object-fit: contain; }
.auth-team-option span { min-width: 0; display: grid; }
.auth-team-option b { font: 900 clamp(9px, 2dvh, 13px) Impact, sans-serif; letter-spacing: .03em; }
.auth-team-option small { color: #c6b79f; font-size: clamp(6px, 1.2dvh, 8px); line-height: 1.05; }
.mobile-account-limit-note { grid-area: note; align-self: center; color: #d3b879; font: clamp(7px, 1.45dvh, 10px) Arial, sans-serif; }
.register-submit-row { grid-area: actions; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px; }
.register-submit-row .auth-submit { min-width: 0; }
.team-required-form { width: min(100%, 520px); margin: 0 auto; text-align: center; }
.team-required-form p { margin: 0 0 7px; color: #d8c9ae; font-size: clamp(9px, 2dvh, 13px); }
.team-required-form .auth-submit { width: 100%; margin-top: 7px; }
.mobile-auth-form.is-busy { pointer-events: none; opacity: .72; }

.feature-overlay {
  position: fixed;
  z-index: 105;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(5px, var(--safe-top)) max(6px, var(--safe-right)) max(5px, var(--safe-bottom)) max(6px, var(--safe-left));
  overflow: hidden;
  background: rgba(2, 2, 3, .78);
  backdrop-filter: blur(6px);
}
.feature-panel { width: min(97vw, 1180px); height: calc(100dvh - max(10px, var(--safe-top) + var(--safe-bottom))); min-height: 0; display: grid; grid-template-rows: auto 1fr; padding: clamp(6px, 1.5dvh, 11px); border: 2px solid #a96b23; border-radius: 7px; background: linear-gradient(145deg, rgba(57, 27, 17, .99), rgba(7, 7, 8, .99) 56%, rgba(12, 20, 34, .99)); box-shadow: 0 12px 36px #000, inset 0 0 0 2px #170b07, inset 0 0 34px #d2741725; }
.feature-header { min-height: clamp(37px, 9dvh, 56px); display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #75461d; }
.feature-header small { color: #e8b650; font: 800 clamp(7px, 1.5dvh, 10px) Arial, sans-serif; letter-spacing: .15em; }
.feature-header h2 { margin: 1px 0 4px; color: #ffe19a; font-size: clamp(19px, 4.7dvh, 31px); line-height: .88; letter-spacing: .045em; text-shadow: 0 2px 2px #000; }
.feature-header-actions { display: flex; align-items: center; gap: 5px; }
.feature-header-actions button { min-height: clamp(29px, 7dvh, 40px); border: 1px solid #b87b2b; color: #ffe4a2; background: #32170f; font: 900 clamp(9px, 2dvh, 13px) Arial, sans-serif; cursor: pointer; }
.feature-header-actions #close-feature-dialog { width: clamp(30px, 7dvh, 40px); padding: 0; font-size: clamp(18px, 4dvh, 26px); }
.feature-fullscreen { padding: 0 10px; }
.feature-content { min-height: 0; overflow: hidden; padding-top: clamp(5px, 1.3dvh, 9px); font-family: Arial, sans-serif; }
.feature-loading, .feature-empty { height: 100%; display: grid; place-items: center; color: #d6c5a5; font: 800 clamp(11px, 2.5dvh, 17px) Arial, sans-serif; text-align: center; }

.character-menu { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 5px; }
.feature-intro { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #d8c9ad; font-size: clamp(8px, 1.7dvh, 11px); }
.feature-intro strong { color: #f5cc76; font: 900 clamp(11px, 2.5dvh, 16px) Impact, sans-serif; letter-spacing: .04em; }
.character-browser { min-width: 0; min-height: 0; display: grid; grid-template-columns: clamp(34px, 7vw, 58px) auto clamp(34px, 7vw, 58px); justify-content: center; align-items: center; gap: clamp(5px, 1vw, 12px); }
.character-menu-grid { width: min(78vw, 1040px); height: min(100%, calc(100dvh - 130px)); max-width: 100%; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(3px, .65dvh, 6px); }
.character-page-arrow { width: 100%; height: clamp(52px, 15dvh, 92px); border: 2px solid #d89a32; border-radius: 5px; color: #ffe5a5; background: linear-gradient(#643019, #210e09); box-shadow: inset 0 0 9px #0009, 0 3px 7px #000a; font: 900 clamp(28px, 7dvh, 48px)/1 Arial, sans-serif; cursor: pointer; }
.character-page-arrow:disabled { opacity: .25; cursor: default; }
.character-page-label { color: #cdb78e; font: 800 clamp(7px, 1.5dvh, 10px)/1 Arial, sans-serif; letter-spacing: .08em; text-align: center; }
.character-page-label b { color: #ffe08a; font-size: 1.2em; }
.character-menu-card { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: 1fr auto auto; padding: 4px; border: 2px solid #70451f; color: #f2dfb0; background: linear-gradient(#2b1710cc, #090808ee); text-align: center; cursor: pointer; overflow: hidden; }
.character-menu-card.selected { border-color: #ffe06d; box-shadow: inset 0 0 20px #e9a21b33, 0 0 10px #ffbd3e5c; }
.character-menu-card .character-art { min-height: 0; background-repeat: no-repeat; background-position: left top; filter: drop-shadow(0 5px 4px #000); }
.character-menu-card b { overflow: hidden; font: 900 clamp(9px, 2dvh, 14px) Impact, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.character-menu-card small { color: #bda985; font-size: clamp(7px, 1.35dvh, 9px); }
.character-menu-card.selected small { color: #ffd96f; }
.feature-primary { min-height: clamp(30px, 7dvh, 40px); padding: 4px 15px; border: 2px solid #ffdc68; color: #251000; background: linear-gradient(#ffe16f, #e78c16); box-shadow: 0 3px 7px #000a, inset 0 0 0 1px #7e4206; font: 900 clamp(11px, 2.5dvh, 16px) Impact, sans-serif; letter-spacing: .045em; cursor: pointer; }
.character-menu .feature-primary { justify-self: center; min-width: min(54vw, 330px); }

.ranking-menu { height: 100%; min-height: 0; display: grid; grid-template-rows: auto 1fr; gap: 6px; }
.team-ranking-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.team-ranking-card { min-height: clamp(39px, 9dvh, 55px); display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 4px 10px; border: 2px solid #713428; background: #2f1310d9; }
.team-ranking-card.right { border-color: #225d93; background: #0b2038d9; }
.team-ranking-card span { display: grid; }.team-ranking-card small { color: #c6b28d; font-size: clamp(7px, 1.3dvh, 9px); }.team-ranking-card b { font: 900 clamp(11px, 2.5dvh, 16px) Impact, sans-serif; }.team-ranking-card strong { color: #ffd25e; font-size: clamp(15px, 3.5dvh, 23px); }
.ranking-table-wrap { min-height: 0; overflow: hidden; border: 1px solid #66431f; background: #080708c9; }
.ranking-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: clamp(8px, 1.7dvh, 12px); }
.ranking-table th { height: clamp(22px, 5.5dvh, 31px); color: #f4c96e; background: #30170f; text-align: left; }
.ranking-table th, .ranking-table td { padding: 2px 6px; border-bottom: 1px solid #412a17; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-table tbody tr { height: clamp(21px, 5dvh, 29px); color: #ddd1bd; }
.ranking-table tbody tr.mine { color: #fff2bb; background: #80501666; }
.ranking-table th:first-child, .ranking-table td:first-child { width: 8%; text-align: center; }.ranking-table th:nth-child(3), .ranking-table td:nth-child(3) { width: 20%; }.ranking-table th:nth-child(n+4), .ranking-table td:nth-child(n+4) { width: 13%; text-align: center; }

.store-menu { height: 100%; min-height: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 5px; touch-action: pan-y; }
.store-toolbar { display: flex; align-items: center; gap: 5px; min-height: clamp(28px, 6.5dvh, 38px); }
.store-toolbar button, .store-toolbar select { height: clamp(27px, 6dvh, 35px); border: 1px solid #8e5d29; color: #f3d99e; background: #25130e; font: 800 clamp(8px, 1.7dvh, 11px) Arial, sans-serif; }
.store-toolbar button { padding: 0 10px; cursor: pointer; }.store-toolbar button.active { color: #251000; border-color: #ffe06d; background: #e9a025; }.store-toolbar select { min-width: 150px; margin-left: auto; padding: 0 6px; }
.store-points { color: #ffe171; font: 900 clamp(10px, 2.2dvh, 15px) Arial, sans-serif; white-space: nowrap; }
.store-filters { min-width: 0; margin-left: auto; display: flex; gap: 4px; }
.store-toolbar .store-filters select { width: clamp(120px, 17vw, 190px); min-width: 0; margin-left: 0; color: #ffe2a2; border-color: #a87635; background: linear-gradient(#3c2116, #1a0d09); }
.store-grid { min-height: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-items: center; gap: clamp(5px, .65vw, 9px); overflow: hidden; }
.store-item-card { width: 100%; max-height: 100%; aspect-ratio: 1; min-width: 0; min-height: 0; align-self: center; justify-self: center; display: grid; grid-template-rows: minmax(0, 50%) minmax(0, 50%); gap: 0; padding: 4px; border: 2px solid #a36b25; border-radius: 7px; background: linear-gradient(155deg, #4a2819, #1c0e0a 72%); box-shadow: 0 4px 9px #000b, inset 0 0 0 1px #6e3b20; overflow: hidden; }
.store-item-card.owned { border-color: #35945a; box-shadow: 0 4px 9px #000b, inset 0 0 0 2px #285e38; }.store-item-card.equipped { border-color: #e7a91d; box-shadow: 0 4px 9px #000b, inset 0 0 0 2px #8b5c18, 0 0 11px #f1b62d78; }
.store-item-art { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid #744522; border-radius: 3px 3px 0 0; background: radial-gradient(circle at 50% 44%, #5a3421, #25130e 72%); }
.store-item-sprite { display: block; height: 100%; max-width: 100%; aspect-ratio: 1; background-repeat: no-repeat; background-position: left top; filter: drop-shadow(0 3px 3px #000a); }
.store-item-info { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 1px; padding: 3px 2px 0; background: #25130e; }
.store-item-info small { color: #d5aa68; font-size: clamp(7px, 1.35dvh, 10px); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.store-item-info b { color: #fff0c1; font-size: clamp(10px, 1.9dvh, 14px); line-height: 1.02; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.store-item-info p { flex: 1; min-height: 0; display: -webkit-box; margin: 0; overflow: hidden; color: #c9b89e; font-size: clamp(7px, 1.25dvh, 10px); line-height: 1.12; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.store-item-actions { display: flex; gap: 3px; }.store-item-actions button { min-width: 0; flex: 1; min-height: 23px; padding: 2px 4px; border: 1px solid #ba792b; color: #ffe3a3; background: #4b2415; font: 900 clamp(7px, 1.5dvh, 10px) Arial, sans-serif; cursor: pointer; }.store-item-actions button.primary { color: #251000; background: #e9a025; }.store-item-actions button:disabled { opacity: .7; cursor: default; }
.store-item-actions .store-pix-button { min-height: clamp(30px, 7dvh, 39px); display: grid; grid-template-rows: auto auto; place-items: center; align-content: center; gap: 1px; padding: 2px 4px; border-color: #62d180; color: #effff2; background: linear-gradient(#249d50, #106832); box-shadow: inset 0 0 0 1px #0b4a23, 0 2px 5px #0009, 0 0 7px #25b95b40; text-shadow: 0 1px 2px #063319; }
.store-pix-button span { color: #d9ffe3; font: 900 clamp(7px, 1.35dvh, 9px)/1 Arial, sans-serif; white-space: nowrap; }
.store-pix-button span small { color: #8ff0a9; font-size: .82em; letter-spacing: .06em; }
.store-pix-button strong { color: #fff; font: 900 clamp(8px, 1.65dvh, 11px)/1 Arial, sans-serif; letter-spacing: .045em; }
.store-pagination { min-height: clamp(39px, 9dvh, 50px); display: grid; grid-template-columns: clamp(54px, 9vw, 76px) minmax(150px, 240px) clamp(54px, 9vw, 76px); justify-content: center; align-items: center; gap: clamp(7px, 1.2vw, 12px); padding: 3px 8px; border: 1px solid #9d682b; border-radius: 5px; background: linear-gradient(90deg, rgba(40, 19, 13, .72), rgba(9, 8, 9, .9), rgba(40, 19, 13, .72)); box-shadow: inset 0 0 13px #0008, 0 0 8px #d18c2730; }
.store-pagination > button { width: 100%; height: clamp(32px, 7.5dvh, 42px); border: 2px solid #d89432; border-radius: 4px; color: #fff0b4; background: linear-gradient(#70351d, #2e140d); box-shadow: inset 0 0 8px #0009, 0 2px 5px #0009; font: 900 clamp(22px, 5dvh, 32px)/1 Arial, sans-serif; cursor: pointer; }
.store-pagination > button:not(:disabled) { animation: store-page-arrow-pulse 1.8s ease-in-out infinite; }
.store-pagination > button:disabled { opacity: .3; cursor: default; animation: none; }
.store-page-indicator { min-width: 0; display: grid; grid-template-columns: auto auto; grid-template-areas: "label value" "dots hint"; align-items: center; justify-content: center; column-gap: 7px; row-gap: 2px; text-align: center; }
.store-page-indicator > small { grid-area: label; color: #e1b55f; font: 900 clamp(7px, 1.45dvh, 10px)/1 Arial, sans-serif; letter-spacing: .09em; }
.store-page-indicator > strong { grid-area: value; color: #fff0b1; font: 900 clamp(13px, 3dvh, 20px)/1 Arial, sans-serif; text-shadow: 0 0 7px #e9a42d88; white-space: nowrap; }.store-page-indicator > strong i { color: #a9926e; font-size: .6em; font-style: normal; }
.store-page-dots { grid-area: dots; display: flex; justify-content: center; gap: 4px; }.store-page-dots i { width: 6px; height: 6px; border: 1px solid #90642b; border-radius: 50%; background: #28170f; }.store-page-dots i.active { border-color: #ffe17a; background: #f1ad31; box-shadow: 0 0 7px #ffc13d; }
.store-page-indicator > em { grid-area: hint; color: #bfb09a; font: 800 clamp(6px, 1.25dvh, 8px)/1 Arial, sans-serif; font-style: normal; letter-spacing: .045em; white-space: nowrap; }
@keyframes store-page-arrow-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); box-shadow: inset 0 0 8px #0009, 0 0 10px #e79732a3; } }
.pix-box { height: 100%; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 8px; }.pix-box img { width: min(31dvh, 190px); height: min(31dvh, 190px); padding: 5px; background: #fff; }.pix-details { min-width: 0; display: grid; gap: 6px; }.pix-details h3 { margin: 0; color: #ffe079; font-size: clamp(17px, 4dvh, 28px); }.pix-details input { width: 100%; height: 35px; padding: 0 7px; color: #16100b; background: #fff; }.pix-details p { margin: 0; color: #d8cbb7; font-size: clamp(9px, 2dvh, 13px); }

.training-menu { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: clamp(5px, .8vw, 10px); }

.battle-embed { position: fixed; z-index: 10000; inset: 0; width: 100vw; height: 100dvh; overflow: hidden; background: #000; }
.battle-embed iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
body.battle-embedded { overflow: hidden; }
.training-menu-card { position: relative; width: 100%; height: min(100%, 270px); min-height: 0; display: grid; grid-template-rows: auto auto auto auto; align-content: center; gap: clamp(3px, .8dvh, 6px); padding: clamp(5px, 1.2dvh, 9px); overflow: hidden; border: 2px solid #ad7428; border-radius: 6px; background: linear-gradient(160deg, #3a1d13, #090808 70%); box-shadow: inset 0 0 0 1px #160b08, inset 0 0 26px #d58a1b1f, 0 5px 15px #0009; text-align: center; }
.training-menu-card.combat { border-color: #b8322b; background: linear-gradient(160deg, #481411, #090808 70%); }
.training-menu-card.team4x4 { border-color: #587ec4; background: linear-gradient(160deg, #132d59, #090808 70%); }
.training-card-art { position: relative; width: clamp(112px, 35dvh, 168px); max-width: 42%; aspect-ratio: 1; justify-self: center; overflow: hidden; border: 1px solid #b17b36; border-radius: 4px; background: #080708; }
.training-menu-card.combat .training-card-art { border-color: #a53d36; }
.training-menu-card.team4x4 .training-card-art { border-color: #6292e3; }
.training-card-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(4, 3, 3, .88)); pointer-events: none; }
.training-card-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .25s ease, filter .25s ease; }
.training-card-art span { position: absolute; z-index: 2; right: 7px; bottom: 5px; padding: 2px 6px; color: #2b1700; background: #ffd35a; font: 900 clamp(7px, 1.5dvh, 10px) Arial, sans-serif; letter-spacing: .08em; }
.training-menu-card.combat .training-card-art span { color: #fff; background: #ba2922; }
.training-menu-card.team4x4 .training-card-art span { color: #fff; background: #245cb9; }
.training-menu-card h3 { margin: 0; color: #ffe08d; font: 900 clamp(14px, 3.5dvh, 24px)/.95 Impact, sans-serif; letter-spacing: .055em; }
.training-menu-card p { margin: 0; color: #d4c7b1; font-size: clamp(8px, 1.8dvh, 12px); line-height: 1.2; }
.training-menu-card button { width: 92%; min-height: clamp(32px, 7.5dvh, 43px); justify-self: center; color: #fff0d0; border-color: #ff5b47; background: linear-gradient(#dc3025, #7d0f0b); box-shadow: 0 3px 7px #000a, inset 0 0 0 1px #520805, 0 0 10px #f3312659; text-shadow: 0 2px 2px #370503; }
.training-menu-card:hover .training-card-art img { transform: scale(1.025); filter: brightness(1.08); }

.guide-book { height: 100%; min-height: 0; display: grid; grid-template-columns: clamp(42px, 6vw, 70px) minmax(0, 1fr) clamp(42px, 6vw, 70px); align-items: stretch; gap: clamp(4px, .8vw, 10px); overflow: hidden; touch-action: pan-y; }
.guide-page { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 3px; overflow: hidden; }
.guide-page-body { min-height: 0; overflow: hidden; }
.guide-page-arrow { min-width: 0; display: grid; place-content: center; gap: 3px; border: 2px solid #c8872d; border-radius: 5px; color: #ffe29a; background: linear-gradient(145deg, #642b18, #1b0c09 70%); box-shadow: inset 0 0 10px #000b, 0 0 10px #d88b293f; font: 900 clamp(29px, 8dvh, 52px)/.7 Impact, sans-serif; cursor: pointer; animation: guide-arrow-pulse 1.65s ease-in-out infinite; }
.guide-page-arrow.next { border-color: #457aaa; background: linear-gradient(145deg, #173c60, #080f19 70%); box-shadow: inset 0 0 10px #000b, 0 0 10px #3496e43f; }
.guide-page-arrow small { font: 900 clamp(6px, 1.2dvh, 8px)/1 Arial, sans-serif; letter-spacing: .04em; writing-mode: vertical-rl; justify-self: center; }
.guide-page-arrow:disabled { opacity: .2; animation: none; cursor: default; }
@keyframes guide-arrow-pulse { 0%, 100% { filter: brightness(1); transform: scale(.98); } 50% { filter: brightness(1.3); transform: scale(1); } }
.guide-page footer { min-height: clamp(22px, 5dvh, 30px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 2px 8px; border: 1px solid #70461d; background: rgba(20, 10, 8, .88); color: #cdbb9a; font: 800 clamp(7px, 1.35dvh, 9px)/1 Arial, sans-serif; letter-spacing: .06em; }
.guide-page footer span b { color: #ffe07e; font-size: 1.25em; }.guide-page footer > div { display: flex; justify-content: center; gap: 3px; }.guide-page footer i { width: 5px; height: 5px; border: 1px solid #80602d; border-radius: 50%; background: #26160e; }.guide-page footer i.active { border-color: #ffe078; background: #efa82c; box-shadow: 0 0 6px #ffbf35; }.guide-page footer em { color: #a99a82; font-style: normal; white-space: nowrap; }
.guide-step-grid, .guide-combat-grid { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(4px, .7vw, 8px); }
.guide-step-grid article, .guide-combat-grid article, .guide-platform-grid article, .guide-power-rules article, .guide-world-grid article { min-width: 0; min-height: 0; padding: clamp(6px, 1.4dvh, 10px); overflow: hidden; border: 1px solid #865425; border-radius: 5px; background: linear-gradient(155deg, rgba(61, 30, 18, .96), rgba(7, 7, 8, .97)); box-shadow: inset 0 0 16px #0007; }
.guide-step-grid article > b { display: block; color: #e8a731; font: 900 clamp(25px, 7dvh, 45px)/.9 Impact, sans-serif; opacity: .82; }
.guide-step-grid h3, .guide-combat-grid h3, .guide-platform-grid h3, .guide-power-rules h3, .guide-world-grid h3 { margin: 2px 0 4px; color: #ffe18c; font: 900 clamp(12px, 2.7dvh, 18px)/1 Impact, sans-serif; letter-spacing: .045em; }
.guide-step-grid p, .guide-combat-grid p, .guide-platform-grid p, .guide-power-rules p, .guide-world-grid p { margin: 2px 0; color: #d8cbb5; font-size: clamp(8px, 1.75dvh, 12px); line-height: 1.22; }.guide-step-grid strong, .guide-combat-grid b, .guide-platform-grid b, .guide-power-rules b, .guide-world-grid b { color: #fff0b8; }
.guide-pc-layout { height: calc(100% - clamp(25px, 5.5dvh, 34px) - 7px); display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(7px, 1.2vw, 14px); }
.guide-pc-layout > section { min-width: 0; min-height: 0; padding: 6px; border: 1px solid #906026; border-radius: 7px; background: linear-gradient(155deg, #351b12e8, #070708f2); }.guide-pc-layout > section:last-child { border-color: #ae7830; }.guide-pc-layout h3 { margin: 0 0 5px; padding-bottom: 3px; border-bottom: 1px solid #67411f; color: #ffdd82; font: 900 clamp(12px, 2.7dvh, 18px)/1 Impact, sans-serif; letter-spacing: .06em; }
.guide-movement-keys, .guide-action-keys { height: calc(100% - 25px); display: grid; align-items: stretch; gap: 4px; }.guide-movement-keys { grid-template: repeat(3, 1fr) / repeat(3, 1fr); }.guide-movement-keys .guide-command:nth-child(1) { grid-area: 1 / 2; }.guide-movement-keys .guide-command:nth-child(2) { grid-area: 2 / 1; }.guide-movement-keys .guide-command:nth-child(3) { grid-area: 2 / 2; }.guide-movement-keys .guide-command:nth-child(4) { grid-area: 2 / 3; }.guide-movement-keys .guide-command:nth-child(5) { grid-area: 3 / 2; }.guide-action-keys { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }.guide-action-keys .guide-command:last-child { grid-column: 1 / -1; width: 48%; justify-self: center; }
.guide-command { min-width: 0; min-height: 0; display: grid; place-items: center; align-content: center; gap: 2px; vertical-align: middle; }.guide-command kbd, .guide-mini-sequence kbd, .guide-example-sequence kbd { min-width: clamp(35px, 5.2vw, 70px); padding: clamp(3px, 1dvh, 6px) 5px; border: 1px solid #65a9cf; border-radius: 6px; color: #eefaff; background: linear-gradient(#245d7c, #102739); box-shadow: inset 0 0 7px #0008, 0 2px 3px #0008; font: 900 clamp(9px, 2dvh, 13px)/1 Arial, sans-serif; text-align: center; }.guide-command b { color: #e7d7bb; font: 900 clamp(6px, 1.25dvh, 8px)/1 Arial, sans-serif; letter-spacing: .045em; }.guide-action-keys .guide-command kbd { border-color: #e06c5f; color: #fff2e8; background: linear-gradient(#9e3027, #47100d); }.guide-action-keys .guide-command:nth-child(2) kbd { border-color: #58c47d; background: linear-gradient(#247b47, #103e24); }.guide-action-keys .guide-command:nth-child(3) kbd { border-color: #ad7838; background: linear-gradient(#63401f, #2b180d); }.guide-action-keys .guide-command:nth-child(5) kbd { border-color: #e0b347; background: linear-gradient(#94731a, #463408); }.guide-action-keys .guide-command:nth-child(6) kbd { border-color: #b987e0; background: linear-gradient(#67348e, #2a1042); }
.guide-note { height: clamp(23px, 5dvh, 31px); min-height: 0; display: grid; place-items: center; margin: 3px 0 0; padding: 0 4px; overflow: hidden; border: 1px solid #785020; color: #d5c6ac; background: #160d09d9; font-size: clamp(8px, 1.55dvh, 10px); line-height: 1.05; text-align: center; }.guide-note b { color: #ffe182; }
.guide-platform-grid, .guide-power-rules { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(5px, .8vw, 10px); }.guide-platform-grid article > span { float: right; font-size: clamp(24px, 7dvh, 45px); }.guide-platform-grid article:nth-child(2) { border-color: #466e9d; }.guide-platform-grid article:nth-child(3) { border-color: #8e7428; }
.guide-combat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }.guide-combat-grid .guide-command, .guide-world-grid .guide-command { display: inline-grid; margin: 1px 3px; }.guide-combat-grid .guide-command kbd, .guide-world-grid .guide-command kbd { min-width: 42px; padding: 3px 5px; }.guide-combat-grid .guide-command b, .guide-world-grid .guide-command b { font-size: 6px; }
.guide-power-rules article > strong { display: block; color: #f2b83c; font: 900 clamp(28px, 8dvh, 50px)/.9 Impact, sans-serif; text-shadow: 0 0 12px #d6781e66; }.guide-power-rules article:nth-child(2) > strong { color: #ef4f45; }.guide-power-rules article:nth-child(3) > strong { color: #61b9ff; }.guide-power-rules article > small { display: block; margin-top: 4px; color: #aa9d87; font-size: clamp(7px, 1.35dvh, 9px); }
.guide-example-sequence, .guide-mini-sequence { display: flex; align-items: center; gap: 2px; }.guide-example-sequence { margin-top: 6px; }.guide-example-sequence span, .guide-mini-sequence span { display: grid; gap: 1px; text-align: center; }.guide-example-sequence kbd { min-width: clamp(29px, 4vw, 52px); padding: 4px 2px; }.guide-example-sequence b { font-size: 6px; }.guide-example-sequence i, .guide-mini-sequence i { color: #d59a34; font-style: normal; }
.guide-world-grid { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(4px, .7vw, 8px); }
.guide-roster-grid { height: 100%; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(3px, .55vw, 7px); }
.guide-fighter-card { min-width: 0; min-height: 0; display: grid; grid-template-columns: 34% 66%; overflow: hidden; border: 1px solid #873a29; border-radius: 5px; background: linear-gradient(145deg, #3c1814ed, #080708f5); }.guide-fighter-card.right { border-color: #2e6695; background: linear-gradient(145deg, #102c4bed, #07080af5); }.guide-fighter-card.left.right { border-color: #a87831; background: linear-gradient(145deg, #352315ed, #080708f5); }
.guide-fighter-portrait { min-width: 0; min-height: 0; background-repeat: no-repeat; background-position: left top; filter: drop-shadow(0 3px 3px #000); }.guide-fighter-info { min-width: 0; display: grid; grid-template-rows: auto auto auto auto auto auto; align-content: center; gap: 1px; padding: 3px 4px; overflow: hidden; }.guide-fighter-info > small { color: #d29d58; font: 900 clamp(5px, 1dvh, 7px)/1 Arial, sans-serif; letter-spacing: .08em; }.guide-fighter-info h3 { margin: 0 0 1px; overflow: hidden; color: #ffe29a; font: 900 clamp(10px, 2.2dvh, 15px)/1 Impact, sans-serif; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .035em; }.guide-fighter-info p { min-width: 0; display: flex; align-items: baseline; gap: 4px; margin: 0; overflow: hidden; white-space: nowrap; }.guide-fighter-info p b { flex: 0 0 auto; color: #dc9e34; font-size: clamp(5px, 1dvh, 7px); }.guide-fighter-info p strong { overflow: hidden; color: #eee0c6; font-size: clamp(7px, 1.4dvh, 10px); text-overflow: ellipsis; }.guide-mini-sequence { transform-origin: left center; }.guide-mini-sequence kbd { min-width: clamp(20px, 2.7vw, 32px); padding: 2px; border-radius: 3px; font-size: clamp(6px, 1.2dvh, 8px); }.guide-mini-sequence b { font-size: clamp(4px, .8dvh, 5px); }
@media (orientation: landscape) and (max-height: 420px) { .guide-page footer em { display: none; }.guide-page footer { grid-template-columns: auto 1fr; }.guide-step-grid p, .guide-combat-grid p, .guide-platform-grid p, .guide-power-rules p, .guide-world-grid p { line-height: 1.14; }.guide-fighter-card { grid-template-columns: 31% 69%; } }
.store-grid > .feature-empty { grid-column: 1 / -1; grid-row: 1 / -1; }

@media (orientation: landscape) and (max-width: 999px) {
  .store-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  .store-item-info small { font-size: clamp(9px, 1.75dvh, 11px); }
  .store-item-info b { font-size: clamp(12px, 2.35dvh, 15px); }
  .store-item-info p { font-size: clamp(10px, 1.75dvh, 11px); }
}

/* Loja organizada em páginas fixas de 6 colunas por 2 linhas. */
.store-menu { gap: clamp(4px, .8dvh, 7px); }
.store-toolbar {
  display: grid;
  grid-template-columns: auto auto minmax(250px, 1fr) auto;
  align-items: end;
  gap: clamp(6px, 1vw, 12px);
  min-height: clamp(43px, 8dvh, 58px);
  padding: 4px 6px;
  border: 1px solid #70451e;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(45, 23, 15, .96), rgba(13, 10, 9, .95), rgba(28, 18, 14, .96));
  box-shadow: inset 0 0 14px #0008;
}
.store-mode-tabs { display: flex; align-items: stretch; gap: 3px; }
.store-mode-tabs button { min-width: clamp(62px, 8vw, 96px); }
.store-points {
  min-width: clamp(74px, 9vw, 118px);
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 3px 8px;
  border-left: 2px solid #b87929;
  line-height: 1;
}
.store-points small { color: #c99d54; font-size: clamp(6px, 1.2dvh, 9px); letter-spacing: .09em; }
.store-points b { color: #ffe171; font-size: clamp(10px, 2.2dvh, 15px); white-space: nowrap; }
.store-filters { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 5px; margin-left: 0; }
.store-filters label { min-width: 0; display: grid; gap: 2px; }
.store-filters label > small { color: #c99d62; font: 900 clamp(6px, 1.2dvh, 9px)/1 Arial, sans-serif; letter-spacing: .08em; }
.store-toolbar .store-filters select { width: 100%; min-width: 0; }
.store-results {
  min-width: clamp(64px, 7vw, 92px);
  display: grid;
  place-items: center;
  align-self: stretch;
  padding: 3px 6px;
  border-left: 1px solid #70451e;
  color: #e7bd6d;
  text-align: center;
}
.store-results b { color: #fff0b0; font-size: clamp(13px, 3dvh, 21px); line-height: 1; }
.store-results small { font-size: clamp(5px, 1dvh, 8px); font-weight: 900; letter-spacing: .06em; }
.store-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(3px, .55vw, 8px);
}
.store-item-card {
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  align-self: stretch;
  grid-template-rows: minmax(0, 48%) minmax(0, 52%);
  border-width: 1px;
  border-radius: 5px;
}
.store-item-art { background-position: center; }
.store-pagination { min-height: clamp(36px, 7.5dvh, 47px); }
.store-page-indicator { min-width: 0; }

@media (orientation: landscape) and (max-height: 520px) {
  .store-toolbar {
    grid-template-columns: auto auto minmax(220px, 1fr) auto;
    min-height: 41px;
    padding-block: 2px;
  }
  .store-toolbar button, .store-toolbar select { height: clamp(25px, 6.2dvh, 31px); }
  .store-mode-tabs button { min-width: clamp(52px, 8vw, 72px); padding-inline: 5px; }
  .store-points { min-width: 68px; padding-inline: 5px; }
  .store-filters label > small { display: none; }
  .store-results { min-width: 52px; padding-inline: 3px; }
  .store-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .store-item-card {
    grid-template-columns: clamp(36px, 5.3vw, 48px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    padding: 2px;
  }
  .store-item-art { border: 0; border-right: 1px solid #744522; border-radius: 3px 0 0 3px; }
  .store-item-sprite { width: 100%; height: auto; }
  .store-item-info { gap: 0; padding: 2px 2px 1px 3px; }
  .store-item-info small { font-size: clamp(5px, 1.15dvh, 7px); }
  .store-item-info b { font-size: clamp(8px, 1.75dvh, 10px); }
  .store-item-info p { display: none; }
  .store-item-actions { margin-top: auto; gap: 2px; }
  .store-item-actions button,
  .store-item-actions .store-pix-button { min-height: clamp(17px, 4.2dvh, 21px); padding: 1px 2px; font-size: clamp(5px, 1.2dvh, 7px); }
  .store-pix-button span { font-size: clamp(5px, 1.05dvh, 6px); }
  .store-pix-button strong { font-size: clamp(5px, 1.15dvh, 7px); }
  .store-pagination { min-height: 33px; padding-block: 1px; }
  .store-pagination > button { height: clamp(27px, 6.5dvh, 34px); }
}

.store-mode-tabs .store-special-link { display:inline-flex; align-items:center; justify-content:center; min-height:100%; padding:0 12px; border:1px solid #d59a32; color:#ffe19b; background:linear-gradient(#683519,#37180f); text-decoration:none; font-weight:900; }

.special-store-menu {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(5px, 1.2dvh, 10px);
}
.special-store-intro {
  min-height: clamp(38px, 8dvh, 58px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 9px;
  border: 1px solid #87551f;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(58, 28, 17, .95), rgba(12, 10, 10, .96), rgba(19, 28, 43, .96));
}
.special-store-intro > div { min-width: 0; display: grid; gap: 2px; }
.special-store-intro small { color: #d9a84d; font: 900 clamp(7px, 1.4dvh, 10px)/1 Arial, sans-serif; letter-spacing: .13em; }
.special-store-intro strong { color: #ffe5a0; font: 900 clamp(10px, 2.3dvh, 16px)/1.1 Arial, sans-serif; }
.special-demo-button {
  min-width: clamp(110px, 16vw, 180px);
  min-height: clamp(30px, 6.8dvh, 42px);
  display: grid;
  place-items: center;
  padding: 4px 12px;
  border: 2px solid #68bfff;
  border-radius: 5px;
  color: #effaff;
  background: linear-gradient(#1979bc, #0a3b72);
  box-shadow: inset 0 0 9px #001b35, 0 0 12px #248edc70;
  font: 900 clamp(9px, 2dvh, 14px)/1 Arial, sans-serif;
  text-decoration: none;
}
.special-products-grid { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(7px, 1.2vw, 15px); }
.special-product-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(90px, 35%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  grid-template-areas: "art copy" "art price" "art action";
  gap: 4px 9px;
  padding: clamp(8px, 1.7dvh, 14px);
  overflow: hidden;
  border: 2px solid #c27d24;
  border-radius: 8px;
  background: radial-gradient(circle at 20% 45%, #8b271e75, transparent 36%), linear-gradient(145deg, #4c2116, #100b0a 66%);
  box-shadow: inset 0 0 0 1px #1b0a07, inset 0 0 30px #d47e1827, 0 7px 18px #000a;
}
.special-product-2 { border-color: #387ec1; background: radial-gradient(circle at 20% 45%, #174e9270, transparent 36%), linear-gradient(145deg, #172e4b, #090b10 66%); box-shadow: inset 0 0 0 1px #07101d, inset 0 0 30px #258bd32b, 0 7px 18px #000a; }
.special-product-card.owned { border-color: #45c66c; box-shadow: inset 0 0 0 1px #123c20, 0 0 18px #35d16a66; }
.special-product-badge { position: absolute; z-index: 2; top: 6px; left: 7px; padding: 3px 7px; color: #fff0bd; border: 1px solid #c98a31; background: #3d1d12e8; font: 900 clamp(6px, 1.25dvh, 9px)/1 Arial, sans-serif; letter-spacing: .08em; }
.special-product-card.owned .special-product-badge { color: #eaffef; border-color: #54c977; background: #124524e8; }
.special-product-card > img { grid-area: art; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 5px #000c); }
.special-product-copy { grid-area: copy; min-width: 0; align-self: end; }
.special-product-copy small { color: #d8a855; font: 900 clamp(6px, 1.2dvh, 9px)/1 Arial, sans-serif; letter-spacing: .12em; }
.special-product-copy h3 { margin: 2px 0 4px; color: #fff0bc; font: 900 clamp(17px, 4.2dvh, 30px)/.95 Impact, Arial Black, sans-serif; letter-spacing: .05em; }
.special-product-copy p { margin: 0; color: #d3c3a9; font: 700 clamp(8px, 1.7dvh, 12px)/1.25 Arial, sans-serif; }
.special-product-price { grid-area: price; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid #70451f; }
.special-product-price small { color: #b99a68; font: 900 clamp(6px, 1.25dvh, 9px) Arial, sans-serif; }
.special-product-price strong { color: #ffe07e; font: 900 clamp(16px, 3.8dvh, 27px)/1 Arial, sans-serif; }
.special-buy-button, .special-download-button {
  grid-area: action;
  min-height: clamp(35px, 8dvh, 50px);
  display: grid;
  place-items: center;
  padding: 4px 8px;
  border: 2px solid #68d48a;
  border-radius: 5px;
  color: #effff3;
  background: linear-gradient(#25a956, #0d682f);
  box-shadow: inset 0 0 9px #06361a, 0 3px 8px #0009, 0 0 10px #2bd4634d;
  font-family: Arial, sans-serif;
  cursor: pointer;
}
.special-buy-button small { color: #caffd8; font-size: clamp(7px, 1.4dvh, 10px); font-weight: 900; }
.special-buy-button strong, .special-download-button { font-size: clamp(10px, 2.2dvh, 15px); font-weight: 900; letter-spacing: .04em; }
.special-download-button { background: linear-gradient(#31b860, #0d7435); animation: store-page-arrow-pulse 1.7s ease-in-out infinite; }
.special-download-button.waiting { opacity: .58; animation: none; cursor: default; }
.special-store-menu > footer { min-height: clamp(31px, 6.5dvh, 42px); display: flex; align-items: center; gap: 12px; padding: 4px 7px; border: 1px solid #60401f; color: #c8b89e; background: rgba(24, 15, 11, .85); font: 700 clamp(7px, 1.5dvh, 10px)/1.2 Arial, sans-serif; }
.special-store-menu > footer button { min-height: 27px; padding: 3px 10px; border: 1px solid #a66d2c; color: #ffe3a0; background: #3b1c12; font-weight: 900; cursor: pointer; }
.special-store-menu > footer span { flex: 1; text-align: center; }

@media (orientation: landscape) and (max-height: 430px) {
  .special-store-intro { min-height: 34px; padding-block: 3px; }
  .special-product-card { grid-template-columns: minmax(78px, 31%) minmax(0, 1fr); padding: 6px; }
  .special-product-copy h3 { font-size: clamp(15px, 3.8dvh, 21px); }
  .special-product-copy p { -webkit-line-clamp: 2; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
  .special-product-price strong { font-size: clamp(15px, 3.5dvh, 20px); }
  .special-store-menu > footer { min-height: 29px; }
}

.hero {
  position: absolute;
  z-index: 3;
  top: clamp(4px, 1.1dvh, 8px);
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 3px);
  left: 50%;
  width: min(55vw, 570px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  text-align: center;
  perspective: 900px;
}

.hero-aura {
  position: absolute;
  z-index: -1;
  width: min(48vw, 480px);
  height: 76%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 177, 46, .22), rgba(0, 0, 0, .05) 55%, transparent 72%);
  filter: blur(5px);
}

.hero-logo {
  --logo-shift-x: 0px;
  --logo-shift-y: 0px;
  --logo-rotate-x: 0deg;
  --logo-rotate-y: 0deg;
  width: auto;
  height: clamp(135px, 42dvh, 270px);
  max-width: 49vw;
  object-fit: contain;
  margin-bottom: clamp(-28px, -5.4dvh, -14px);
  transform: translate3d(var(--logo-shift-x), calc(clamp(-15px, -2.7dvh, -8px) + var(--logo-shift-y)), 0)
    rotateX(var(--logo-rotate-x)) rotateY(var(--logo-rotate-y));
  transform-style: preserve-3d;
  will-change: transform;
  animation: hero-logo-float 3.8s ease-in-out infinite;
  filter: drop-shadow(0 6px 6px #000c) drop-shadow(0 0 8px #e7a32344);
}

@keyframes hero-logo-float {
  0%, 100% {
    transform: translate3d(var(--logo-shift-x), calc(clamp(-15px, -2.7dvh, -8px) + var(--logo-shift-y) - 3px), 0)
      rotateX(var(--logo-rotate-x)) rotateY(var(--logo-rotate-y));
  }
  50% {
    transform: translate3d(var(--logo-shift-x), calc(clamp(-15px, -2.7dvh, -8px) + var(--logo-shift-y) + 3px), 12px)
      rotateX(var(--logo-rotate-x)) rotateY(var(--logo-rotate-y));
  }
}

.tagline {
  margin: clamp(4px, 1.2dvh, 9px) 0 clamp(3px, .9dvh, 7px);
  color: #f3dfad;
  font-size: clamp(10px, 2.9dvh, 19px);
  letter-spacing: .09em;
  text-shadow: 0 2px 1px #000, 0 0 4px #000;
}

.choice-label {
  z-index: 2;
  margin-bottom: clamp(-8px, -1.8dvh, -4px);
  padding: 2px 15px 4px;
  border: 1px solid #d89a2e;
  border-radius: 3px;
  color: #f8d887;
  background: linear-gradient(#4a2718, #21100c);
  box-shadow: 0 2px 4px #000;
  font-size: clamp(9px, 2.3dvh, 15px);
  letter-spacing: .06em;
}

.play-button {
  position: relative;
  width: clamp(208px, 34vw, 360px);
  aspect-ratio: 540 / 196;
  padding: 0;
  border: 0;
  color: var(--gold-light);
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 5px 4px #000c) drop-shadow(0 0 5px #ffc23b66);
  animation: play-pulse 2.8s ease-in-out infinite;
}

.play-button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.play-button span { position: absolute; inset: 24% 18% 19%; display: grid; place-content: center; font-size: clamp(13px, 3.4dvh, 23px); line-height: .9; letter-spacing: .02em; text-shadow: 0 3px 0 #2d0805, 0 0 3px #000; }
.play-button b { font-size: 1.13em; }
.play-button:active { animation: none; transform: scale(.96); }

@keyframes play-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 5px 4px #000c) drop-shadow(0 0 4px #ffc23b4d); }
  50% { transform: scale(1.025); filter: drop-shadow(0 6px 4px #000d) drop-shadow(0 0 12px #ffc23b9c); }
}

.ranking-card {
  position: absolute;
  z-index: 4;
  right: calc(var(--safe-right) + clamp(8px, 1.5vw, 20px));
  bottom: calc(var(--nav-height) + var(--safe-bottom) + clamp(8px, 2dvh, 16px));
  width: clamp(166px, 22vw, 260px);
  border: 2px solid #4c2b13;
  border-radius: 5px;
  background: linear-gradient(160deg, rgba(52, 32, 21, .96), rgba(8, 8, 9, .97));
  box-shadow: 0 5px 14px #000b, inset 0 0 0 1px #b57b2e88, inset 0 0 16px #df8c151b;
  font-family: Arial, sans-serif;
  overflow: hidden;
}

.ranking-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: clamp(24px, 5.3dvh, 34px);
  padding: 3px 7px;
  border-bottom: 1px solid #8d5c25;
  color: #f5cc70;
  background: linear-gradient(#412319, #24130f);
  font-size: clamp(8px, 1.85dvh, 12px);
  letter-spacing: .04em;
}

.ranking-head button { margin-left: auto; width: 20px; height: 20px; padding: 0; border: 1px solid #a26e2f; color: #f6d388; background: #190d09; line-height: 16px; cursor: pointer; }
.ranking-card ol { display: grid; gap: 1px; margin: 0; padding: 4px 6px 6px; list-style: none; }
.ranking-card li { display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 4px; min-height: clamp(16px, 3.8dvh, 23px); font-size: clamp(7px, 1.55dvh, 10px); }
.ranking-card li b { min-width: 0; overflow: hidden; color: #ddd2bc; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ranking-card em { color: #d6ad5a; font-style: normal; font-weight: 700; }
.rank-medal { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #eee; background: #373536; font-size: 8px; }
.rank-medal.gold { color: #2b1900; background: #ffc64b; }
.rank-medal.silver { color: #202020; background: #d7d9dd; }
.rank-medal.bronze { color: #2d1006; background: #c77a3c; }

.national-score {
  position: absolute;
  z-index: 5;
  top: 32%;
  width: clamp(150px, 22vw, 320px);
  aspect-ratio: 1672 / 941;
  padding: 0;
  border: 0;
  color: #fff1c1;
  background: transparent;
  filter: drop-shadow(0 8px 8px #000b);
  transform: translateY(calc(-50% + var(--rank-float-y, 0px))) rotate(var(--rank-float-angle, 0deg)) scale(var(--rank-hover-scale, 1));
  transform-origin: center;
  transition: filter .2s ease;
  will-change: transform;
  cursor: pointer;
}
.national-score-left { left: calc(var(--safe-left) + clamp(28px, 6vw, 105px)); }
.national-score-right { right: calc(var(--safe-right) + clamp(28px, 6vw, 105px)); }
.national-score img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.national-score > span {
  position: absolute;
  top: 28%;
  bottom: 24%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  line-height: 1.1;
  text-shadow: 0 2px 2px #000, 0 0 8px #000;
}
.national-score-left > span { right: 9%; left: 29%; }
.national-score-right > span { right: 29%; left: 9%; }
.national-score small { color: #e9c875; font-size: clamp(6px, 1.25dvh, 10px); font-weight: 900; letter-spacing: .13em; }
.national-score b { margin-top: 2px; font-size: clamp(11px, 2.7dvh, 20px); letter-spacing: .08em; }
.national-score strong { margin-top: 4px; color: #fff; font-size: clamp(8px, 1.9dvh, 14px); letter-spacing: .05em; }
.national-score-left strong { color: #ffb2a7; }
.national-score-right strong { color: #a9d1ff; }
.national-score:hover { filter: brightness(1.12) drop-shadow(0 8px 10px #000d); }
.national-score:active { filter: brightness(.96) drop-shadow(0 5px 7px #000d); }

.about-game-content { max-width: 900px; margin: 0 auto; color: #e8dcc6; font-family: Arial, sans-serif; text-align: center; }
.about-game-content h3 { margin: 0 0 10px; color: #ffcf65; font-family: Impact, Arial Black, sans-serif; font-size: clamp(20px, 5dvh, 38px); letter-spacing: .08em; }
.about-game-content p { max-width: 760px; margin: 8px auto; font-size: clamp(12px, 2.7dvh, 18px); line-height: 1.45; }
.about-game-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 12px; }
.about-game-pillars span { display: grid; gap: 5px; padding: 12px; border: 1px solid #8b5a22; background: linear-gradient(145deg, #3c2017, #120d0b); }
.about-game-pillars b { color: #ffd56f; font-size: clamp(11px, 2.4dvh, 16px); }
.about-game-pillars small { font-size: clamp(9px, 2dvh, 13px); }
.about-game-content footer { margin-top: 12px; color: #c8a861; font-size: clamp(9px, 2dvh, 13px); letter-spacing: .08em; }

.bottom-nav {
  position: absolute;
  z-index: 12;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  height: var(--nav-height);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  padding: clamp(3px, .8dvh, 6px) clamp(7px, 1.5vw, 18px) clamp(4px, 1dvh, 8px);
  gap: clamp(3px, .7vw, 9px);
  border-top: 1px solid #b07426;
  background: linear-gradient(180deg, rgba(4, 4, 5, .16), rgba(4, 4, 5, .97) 27%);
}

.bottom-nav button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .45vw, 7px);
  min-width: 0;
  padding: 2px clamp(2px, .6vw, 8px);
  border: 2px solid #7e501d;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
  color: #f8dfa1;
  background: linear-gradient(180deg, #54281c 0%, #2d1410 47%, #180c09 50%, #35180f 100%);
  box-shadow: inset 0 0 0 1px #170b07, inset 0 0 10px #de841322;
  cursor: pointer;
  overflow: hidden;
}

.bottom-nav button::after { content: ""; position: absolute; inset: 2px; pointer-events: none; border-top: 1px solid #ffd07077; }
.bottom-nav button img { width: auto; height: min(72%, 50px); flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
.bottom-nav button span { overflow: hidden; color: #fff0bd; font-size: clamp(10px, 2.6dvh, 17px); font-weight: 900; letter-spacing: .035em; text-overflow: ellipsis; text-shadow: 0 2px 1px #000, 0 0 4px #000; -webkit-text-stroke: .25px #3a1607; paint-order: stroke fill; white-space: nowrap; }
.bottom-nav button:active,
.bottom-nav button.is-active { border-color: #ffc84e; color: #fff2c3; background: linear-gradient(#7a371d, #3a140c); transform: translateY(1px); }

.toast {
  position: absolute;
  z-index: 30;
  top: 14%;
  left: 50%;
  max-width: 72vw;
  padding: 7px 17px;
  border: 1px solid #d3942c;
  border-radius: 3px;
  color: #ffe09a;
  background: rgba(19, 10, 8, .94);
  box-shadow: 0 4px 14px #000c;
  font-family: Arial, sans-serif;
  font-size: clamp(10px, 2.3dvh, 15px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -10px);
  transition: .2s ease;
}

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

/* Lobby: a second in-page screen. */
.lobby-screen {
  position: absolute;
  z-index: 8;
  inset: 0;
  padding: calc(var(--safe-top) + clamp(60px, 16dvh, 76px)) calc(var(--safe-right) + 6px) calc(var(--nav-height) + var(--safe-bottom) + 5px) calc(var(--safe-left) + 6px);
  overflow: hidden;
}

body.is-lobby .session-badge { display: none; }
body.is-lobby .topbar-actions { margin-left: auto; }
body.is-lobby .fullscreen-button { display: inline-grid; place-items: center; }
body.is-lobby .lobby-fullscreen,
body.is-lobby .room-fullscreen { display: none; }
body.is-lobby-menu .bottom-nav { right: calc(var(--safe-right) + 6vw); left: calc(var(--safe-left) + 6vw); }
body.is-lobby-menu #lobby-invite,
body.is-lobby-menu #open-create-room { display: none; }
body.is-lobby-menu #nav-training-button { border-color: #ff8372; color: #fff1dd; background: linear-gradient(180deg, #ef382d, #a7130d 54%, #740a07 55%, #a3110c); box-shadow: inset 0 0 0 1px #510806, 0 0 12px #ff332c73; animation: invite-float 1.8s ease-in-out infinite; }
body.is-lobby-menu #nav-how-button { border-color: #ffdc68; color: #251300; background: linear-gradient(180deg, #ffe06d, #f2a51e 52%, #d77b0f 53%, #f0a31b); text-shadow: 0 1px 0 #fff8c9; }
body.is-lobby-menu #nav-how-button span { color: #251300; text-shadow: 0 1px 0 #fff8c9; -webkit-text-stroke: 0; }
body.is-create-room .topbar { display: none; }
body.is-create-room .bottom-nav { display: none; }

.lobby-titlebar {
  position: absolute;
  top: calc(var(--safe-top) + 5px);
  right: calc(var(--safe-right) + clamp(170px, 25vw, 220px));
  left: calc(var(--safe-left) + 7px);
  height: clamp(36px, 9.5dvh, 49px);
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
  align-items: center;
  gap: 8px;
}

.lobby-titlebar > div { text-align: center; line-height: .83; }
.lobby-titlebar small { color: #e3b95c; font: 700 clamp(7px, 1.5dvh, 10px)/1 Arial, sans-serif; letter-spacing: .13em; }
.lobby-titlebar h1 { margin: 2px 0 0; color: #ffe4a1; font-size: clamp(16px, 4.2dvh, 27px); letter-spacing: .04em; text-shadow: 0 2px 2px #000; }
.lobby-global-rank {
  position: fixed;
  z-index: 11;
  top: calc(var(--safe-top) + 3px);
  left: 50%;
  width: min(38vw, 380px);
  min-width: 240px;
  pointer-events: none;
  transform: translateX(-50%);
}
.lobby-global-rank > small { display: block; font-size: clamp(8px, 1.8dvh, 12px); }
.lobby-global-rank > h1 { margin-top: 1px; font-size: clamp(19px, 4.8dvh, 31px); line-height: .88; }
.lobby-rank-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(5px, 1vw, 12px);
  margin-top: 2px;
  line-height: 1;
}
.lobby-rank-score span { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 0; }
.lobby-rank-score b { font: 900 clamp(10px, 2.3dvh, 15px)/1 Arial, sans-serif; letter-spacing: .08em; text-shadow: 0 2px 3px #000; }
.lobby-rank-score strong { font: 900 clamp(27px, 8dvh, 48px)/.8 Impact, "Arial Narrow Bold", sans-serif; text-shadow: 0 2px 3px #000, 0 0 8px currentColor; }
.lobby-rank-score .left strong { transform: translateX(clamp(8px, 1.4vw, 18px)); }
.lobby-rank-score .right strong { transform: translateX(clamp(-18px, -1.4vw, -8px)); }
.lobby-rank-score .left b,
.lobby-rank-score .left strong { color: #ff665a; }
.lobby-rank-score .right b,
.lobby-rank-score .right strong { color: #68b9ff; }
.lobby-rank-score i { color: #ffe3a0; font: normal 900 clamp(9px, 2dvh, 13px)/1 Arial, sans-serif; text-shadow: 0 2px 3px #000; }
.lobby-back,
.lobby-create,
.lobby-invite {
  justify-self: start;
  min-height: clamp(28px, 7dvh, 37px);
  padding: 4px 12px;
  border: 1px solid #c6892a;
  border-radius: 3px;
  color: #ffe0a0;
  background: linear-gradient(#4d2718, #1c0e0a);
  box-shadow: 0 3px 7px #0009, inset 0 0 0 1px #120704;
  font-size: clamp(9px, 2.1dvh, 13px);
  cursor: pointer;
}
.lobby-create,
.lobby-invite {
  position: fixed;
  z-index: 15;
  right: calc(var(--safe-right) + clamp(7px, 1.5vw, 18px));
  bottom: calc(var(--safe-bottom) + var(--nav-height) + 4px);
  width: calc((100vw - (clamp(7px, 1.5vw, 18px) * 2) - (clamp(3px, .7vw, 9px) * 5)) / 6);
  height: clamp(27px, 7.5dvh, 38px);
  min-height: 27px;
  display: grid;
  place-items: center;
  padding: 2px 8px;
  border: 2px solid #ffdc68;
  border-radius: 0;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
  color: #170900;
  background: linear-gradient(180deg, #ffe06d, #f2a51e 52%, #d77b0f 53%, #f0a31b);
  box-shadow: 0 4px 10px #000c, inset 0 0 0 1px #8b4808, 0 0 10px #ffbd3452;
  font-size: clamp(13px, 3.4dvh, 21px);
  font-weight: 900;
  letter-spacing: .035em;
  line-height: .82;
  text-align: center;
  text-shadow: 0 1px 0 #fff8c9, 0 0 1px #fff4b2;
  -webkit-text-stroke: .35px #5a2600;
  paint-order: stroke fill;
}
.lobby-create span,
.lobby-create strong,
.lobby-invite span,
.lobby-invite strong { display: block; font-weight: 900; }
.lobby-create strong,
.lobby-invite strong { font-size: 1.12em; }
.lobby-invite {
  right: calc(var(--safe-right) + clamp(7px, 1.5vw, 18px) + ((100vw - (clamp(7px, 1.5vw, 18px) * 2) - (clamp(3px, .7vw, 9px) * 5)) / 6) + clamp(3px, .7vw, 9px));
  color: #fff1dd;
  border-color: #ff8372;
  background: linear-gradient(180deg, #ef382d, #a7130d 54%, #740a07 55%, #a3110c);
  box-shadow: 0 4px 10px #000c, inset 0 0 0 1px #510806, 0 0 12px #ff332c73;
  text-shadow: 0 2px 2px #420604;
  -webkit-text-stroke: .25px #5a0805;
  animation: invite-float 1.8s ease-in-out infinite;
}
body.account-team-left .lobby-create { right: calc(var(--safe-right) + clamp(7px, 1.5vw, 18px)); left: auto; }
body.account-team-left .lobby-invite { right: calc(var(--safe-right) + clamp(7px, 1.5vw, 18px) + ((100vw - (clamp(7px, 1.5vw, 18px) * 2) - (clamp(3px, .7vw, 9px) * 5)) / 6) + clamp(3px, .7vw, 9px)); left: auto; }
body.account-team-right .lobby-create { right: auto; left: calc(var(--safe-left) + clamp(7px, 1.5vw, 18px)); }
body.account-team-right .lobby-invite { right: auto; left: calc(var(--safe-left) + clamp(7px, 1.5vw, 18px) + ((100vw - (clamp(7px, 1.5vw, 18px) * 2) - (clamp(3px, .7vw, 9px) * 5)) / 6) + clamp(3px, .7vw, 9px)); }

.lobby-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 37%) minmax(0, 25%) minmax(0, 38%);
  grid-template-areas: "fighter chat servers";
  gap: clamp(4px, .75vw, 9px);
}

.lobby-grid.team-right {
  grid-template-columns: minmax(0, 38%) minmax(0, 25%) minmax(0, 37%);
  grid-template-areas: "servers chat fighter";
}

.lobby-panel {
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.lobby-panel > header {
  flex: 0 0 auto;
  min-height: clamp(38px, 9dvh, 52px);
  padding: clamp(4px, 1dvh, 7px) clamp(6px, .8vw, 10px);
  border-bottom: 0;
  background: transparent;
}

.lobby-panel header small,
.lobby-panel header strong,
.lobby-panel header span { display: block; }
.lobby-panel header small { color: #e4b656; font: 700 clamp(7px, 1.45dvh, 10px)/1 Arial, sans-serif; letter-spacing: .11em; }
.lobby-panel header strong { margin-top: 2px; color: #fff0c1; font-size: clamp(12px, 3.2dvh, 20px); line-height: .9; }
.lobby-panel header span { margin-top: 2px; color: #bcae98; font: clamp(7px, 1.45dvh, 10px)/1 Arial, sans-serif; }

.fighter-panel { position: relative; grid-area: fighter; display: flex; flex-direction: column; align-items: stretch; overflow: visible; text-align: center; }
.fighter-panel > header { position: absolute; z-index: 4; top: 0; right: 4px; left: 4px; padding: 2px 5px; text-align: left; text-shadow: 0 2px 3px #000, 0 0 7px #000; }
.lobby-grid.team-right .fighter-panel > header { text-align: right; }
.fighter-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; transform: translateY(clamp(-11px, -2.4dvh, -6px)); }
.fighter-stage::before { content: ""; position: absolute; z-index: 1; right: 18%; bottom: 0; left: 18%; height: clamp(13px, 4dvh, 23px); border: 2px solid #d89a2d88; border-radius: 50%; background: radial-gradient(ellipse, #d88c2940, #080808bb 66%); box-shadow: 0 0 17px #efa32352; transform: perspective(90px) rotateX(57deg); }
.fighter-stage::after { content: ""; position: absolute; z-index: 1; right: 20%; bottom: 5px; left: 20%; height: 10px; border-radius: 50%; background: #000d; filter: blur(4px); }
.fighter-glow { position: absolute; inset: 5% 13% 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(239, 175, 49, .30), transparent 66%); }
.player-head-info { z-index: 5; display: grid; justify-items: center; max-width: 90%; padding: 3px 8px; overflow: hidden; border: 1px solid rgba(232, 172, 61, .68); border-radius: 7px; color: #fff2c9; background: rgba(17, 9, 7, .72); box-shadow: 0 2px 8px #000b, 0 0 9px rgba(240, 173, 47, .2); font-family: Arial, sans-serif; line-height: 1.05; text-align: center; text-shadow: 0 2px 3px #000; }
.player-head-info b, .player-head-info small, .player-head-info em { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-head-info b { color: #fff4d1; font-size: clamp(8px, 1.9dvh, 12px); font-weight: 900; letter-spacing: .075em; }
.player-head-info small { margin-top: 2px; color: #f2c867; font-size: clamp(6px, 1.25dvh, 8px); font-weight: 800; letter-spacing: .045em; }
.player-head-info em { margin-top: 1px; color: #8ee29a; font-size: clamp(6px, 1.2dvh, 8px); font-style: normal; font-weight: 800; letter-spacing: .04em; }
.fighter-identity { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.fighter-preview { position: absolute; z-index: 2; inset: 0 3%; background-repeat: no-repeat; background-position: left top; filter: drop-shadow(0 7px 4px #000); transform: scale(1.07); transform-origin: 50% 100%; }
.lobby-grid.team-right .fighter-preview { transform: scale(-1.07, 1.07); }
.fighter-preview.source-facing-left { transform: scale(-1.07, 1.07); }
.lobby-grid.team-right .fighter-preview.source-facing-left { transform: scale(1.07); }
.fighter-name { position: relative; z-index: 4; flex: 0 0 auto; margin-top: -2px; color: #ffe0a0; font-size: clamp(12px, 3.1dvh, 20px); line-height: 1; letter-spacing: .055em; text-shadow: 0 2px 2px #000, 0 0 5px #000; transform: translateY(clamp(-11px, -2.4dvh, -6px)); }
.fighter-controls { position: relative; z-index: 4; flex: 0 0 auto; display: grid; grid-template-columns: 34px 1fr 34px; gap: 4px; margin: 1px 7px 0; transform: translateY(-4px); }
.fighter-controls button { height: clamp(32px, 7.8dvh, 42px); border: 1px solid #b67924; color: #ffdda0; background: linear-gradient(#5c2b19, #1d0d09); cursor: pointer; }
.fighter-controls button:first-child,
.fighter-controls button:last-child { font: 700 23px/1 Arial, sans-serif; }
.fighter-controls #fighter-equip { color: #251100; background: linear-gradient(#ffe178, #df901d); font-size: clamp(11px, 2.6dvh, 16px); font-weight: 900; letter-spacing: .04em; text-shadow: 0 1px 0 #fff0a9; }
.fighter-help { position: relative; z-index: 4; flex: 0 0 auto; min-height: 12px; margin: -2px 4px 2px; color: #ffe19b; font: 900 clamp(7px, 1.55dvh, 10px)/1 Arial, sans-serif; letter-spacing: .025em; text-shadow: 0 2px 2px #000, 0 0 5px #000; }
.fighter-status { position: relative; z-index: 4; flex: 0 0 auto; min-height: 10px; margin-bottom: 2px; color: #7bdb89; font: 700 clamp(6px, 1.25dvh, 8px)/1 Arial, sans-serif; letter-spacing: .08em; }

.lobby-screen .lobby-titlebar h1,
.lobby-screen .lobby-panel header strong,
.lobby-screen .server-card strong,
.lobby-screen button { letter-spacing: .055em; }
.lobby-screen .lobby-panel header span,
.lobby-screen .server-card small,
.lobby-screen .rooms-empty { letter-spacing: .018em; }

.chat-panel { grid-area: chat; display: flex; flex-direction: column; align-self: end; height: min(76%, 260px); border: 1px solid rgba(205, 143, 47, .72); border-radius: 5px; background: linear-gradient(155deg, rgba(34, 21, 16, .74), rgba(5, 5, 6, .67)); box-shadow: 0 4px 13px #0009, inset 0 0 18px #dc8d1712; backdrop-filter: blur(5px); }
.chat-panel > header { border-bottom: 1px solid rgba(121, 80, 33, .76); background: rgba(44, 23, 16, .42); }
.chat-panel header span { display: flex; align-items: center; gap: 4px; }
.chat-panel .online-dot { display: inline-block; width: 6px; height: 6px; }
.chat-messages { flex: 1 1 auto; min-height: 0; padding: 6px 8px; overflow: hidden; font: clamp(9px, 1.9dvh, 13px)/1.22 Arial, sans-serif; }
.chat-messages p { margin: 0 0 5px; color: #ddd3c4; }
.chat-messages b { color: #efbd5a; }
.chat-messages .system-message { color: #87cf92; }
.chat-form { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 5px; border-top: 1px solid #6f461c; background: #0b0909e8; }
.chat-form input { min-width: 0; height: clamp(27px, 6.5dvh, 35px); padding: 0 8px; border: 1px solid #8b673e; border-radius: 2px; outline: none; color: #1d140d; background: #fff8e9; font: clamp(10px, 2.15dvh, 14px) Arial, sans-serif; }
.chat-form button { padding: 0 9px; border: 1px solid #d3972f; color: #2d1800; background: linear-gradient(#ffd35f, #d88819); font-size: clamp(8px, 1.8dvh, 11px); cursor: pointer; }

.servers-panel { grid-area: servers; display: flex; flex-direction: column; }
.servers-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-shadow: 0 2px 3px #000, 0 0 7px #000; }
.server-tools { display: flex; gap: 3px; }
.server-tools button { min-height: clamp(25px, 6dvh, 32px); padding: 0 7px; border: 1px solid #89622e; color: #ead29b; background: #171313; font-size: clamp(7px, 1.6dvh, 10px); cursor: pointer; }
.server-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 4px 6px; overflow: hidden; border: 1px solid rgba(216, 158, 61, .16); border-radius: 5px; background: linear-gradient(145deg, rgba(30, 18, 16, .11), rgba(5, 11, 20, .09)); box-shadow: inset 0 0 18px rgba(0, 0, 0, .08); backdrop-filter: blur(1px); }
.server-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; min-height: clamp(52px, 14dvh, 76px); padding: 3px 7px; border: 0; border-radius: 0; background: transparent; text-shadow: 0 2px 3px #000, 0 0 7px #000; }
.server-card > div { min-width: 0; }
.server-card span { display: inline-block; padding: 1px 5px; color: #291900; background: #ffc43f; font: 800 clamp(6px, 1.35dvh, 9px) Arial, sans-serif; }
.server-card strong { display: block; margin-top: 3px; color: #fff2d0; font-size: clamp(10px, 2.6dvh, 17px); white-space: nowrap; }
.server-card small { display: block; margin-top: 3px; color: #bdb3aa; font: clamp(7px, 1.5dvh, 10px)/1.15 Arial, sans-serif; }
.server-card button { min-width: clamp(55px, 8vw, 78px); min-height: clamp(30px, 8dvh, 43px); border: 1px solid #ffd35e; color: #2b1600; background: linear-gradient(#ffc943, #e68510); font-size: clamp(9px, 2.1dvh, 13px); cursor: pointer; }
.rooms-empty { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; margin: 0; border: 0; color: #ddd3c4; font: clamp(9px, 2dvh, 13px) Arial, sans-serif; text-align: center; text-shadow: 0 2px 3px #000, 0 0 8px #000; }

.create-room-modal { position: absolute; z-index: 25; inset: 0; display: grid; place-items: center; padding: calc(var(--safe-top) + 5px) calc(var(--safe-right) + 5vw) calc(var(--safe-bottom) + 5px) calc(var(--safe-left) + 5vw); background: rgba(0, 0, 0, .76); backdrop-filter: blur(3px); }
.create-room-card { width: min(100%, 990px); height: 100%; display: flex; flex-direction: column; border: 2px solid #b67b28; border-radius: 6px; background: linear-gradient(145deg, #29160f, #090808 72%); box-shadow: 0 10px 30px #000, inset 0 0 0 1px #25120c; overflow: hidden; }
.create-room-card > header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: clamp(38px, 10dvh, 51px); padding: 4px 10px; border-bottom: 1px solid #80501f; background: linear-gradient(#4e291a, #21110c); }
.create-room-card header small { color: #edba51; font: 700 clamp(7px, 1.5dvh, 10px) Arial, sans-serif; letter-spacing: .11em; }
.create-room-card h2 { margin: 1px 0 0; color: #ffe3a3; font-size: clamp(15px, 4dvh, 25px); line-height: .9; }
.create-room-card header button { height: 29px; border: 1px solid #b57524; color: #ffe1a4; background: #1b0b08; font: 22px/1 Arial, sans-serif; cursor: pointer; }
.create-header-actions { display: flex; align-items: center; gap: 5px; }
.create-room-card header .create-fullscreen { width: auto; min-width: 105px; padding: 0 9px; color: #291500; background: linear-gradient(#ffe16d, #db8915); font: 900 clamp(8px, 1.8dvh, 11px)/1 Arial, sans-serif; }
.create-room-card header #close-create-room { width: 29px; padding: 0; }
#create-room-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 6px 9px 8px; }
.create-fields { display: grid; grid-template-columns: .72fr 1.15fr 1.15fr; grid-template-areas: "team name password"; gap: 7px; }
.create-fields label { min-width: 0; display: grid; align-content: start; }
.create-fields .team-readonly { grid-area: team; }
.create-fields label:nth-child(2) { grid-area: name; }
.create-fields label:nth-child(3) { grid-area: password; }
body.account-team-right .create-fields { grid-template-columns: 1.15fr 1.15fr .72fr; grid-template-areas: "password name team"; }
body.account-team-right .create-fields .team-readonly { border-right: 4px solid #1fa86a; border-left: 0; text-align: right; }
.create-fields label > span { color: #dec69b; font: 700 clamp(7px, 1.6dvh, 10px) Arial, sans-serif; }
.create-fields input { min-width: 0; height: clamp(25px, 6dvh, 33px); margin-top: 2px; padding: 0 7px; border: 1px solid #a3763d; border-radius: 2px; color: #1b130d; background: #fffaf0; font: clamp(9px, 2dvh, 12px) Arial, sans-serif; }
.create-fields small { margin-top: 2px; overflow: hidden; color: #a79b8c; font: clamp(6px, 1.25dvh, 8px)/1 Arial, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.team-readonly { padding: 4px 7px; border-left: 4px solid #df3f3f; background: #ffffff0a; }
.team-readonly b { color: #fff0c9; font-size: clamp(13px, 3.2dvh, 20px); line-height: 1; }
#create-room-form fieldset { flex: 0 0 auto; width: 100%; height: clamp(82px, 31dvh, 125px); min-width: 0; min-height: 0; margin: 0; padding: 4px 6px 6px; border: 1px solid #72501f; overflow: hidden; }
#create-room-form legend { padding: 0 7px; color: #f2bc4e; font-size: clamp(8px, 2dvh, 12px); }
.map-grid { height: 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 5px; }
.map-option { position: relative; width: 100%; max-height: 100%; aspect-ratio: 4 / 3; min-width: 0; min-height: 0; display: grid; place-items: end center; overflow: hidden; border: 1px solid #645643; border-radius: 3px; background: #070707; cursor: pointer; }
.map-option input { position: absolute; opacity: 0; }
.map-option img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.map-option span { position: relative; z-index: 2; width: 100%; padding: 3px 2px; overflow: hidden; color: #fff1c9; background: #080706d9; font-size: clamp(7px, 1.6dvh, 10px); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.map-option.selected { border-color: #ffcb4c; box-shadow: inset 0 0 0 1px #f04131, 0 0 7px #ffb32877; }
.future-map { place-items: center; border-color: #7a2e28; color: #ffe100; font-size: clamp(27px, 8dvh, 51px); cursor: default; }
.create-submit { flex: 0 0 auto; align-self: center; width: min(290px, 45vw); min-height: clamp(31px, 8dvh, 42px); margin-top: auto; border: 1px solid #ffda61; color: #2d1700; background: linear-gradient(#ffd65c, #db8314); box-shadow: 0 3px 8px #000b; font-size: clamp(12px, 3dvh, 19px); cursor: pointer; }

/* Real room and battle views keep the entire flow inside the landscape shell. */
.room-screen { position: absolute; z-index: 12; inset: 0; padding: calc(var(--safe-top) + 48px) calc(var(--safe-right) + 8px) calc(var(--nav-height) + var(--safe-bottom) + 5px) calc(var(--safe-left) + 8px); overflow: hidden; }
.room-topbar { position: absolute; top: calc(var(--safe-top) + 5px); right: calc(var(--safe-right) + clamp(170px, 25vw, 220px)); left: calc(var(--safe-left) + 8px); height: 40px; display: grid; grid-template-columns: 100px 1fr minmax(105px, 215px); align-items: center; gap: 7px; }
.room-topbar > div { text-align: center; line-height: .85; }
.room-topbar small { color: #e3b95c; font: 800 clamp(7px, 1.5dvh, 10px) Arial, sans-serif; letter-spacing: .13em; }
.room-topbar h1 { margin: 2px 0 0; color: #ffe5a8; font-size: clamp(16px, 4dvh, 25px); text-shadow: 0 2px 3px #000; }
.room-topbar button { min-height: 31px; border: 1px solid #d09835; color: #ffe1a0; background: linear-gradient(#4e2818, #180b08); font: 900 clamp(9px, 2dvh, 12px) Arial, sans-serif; }
#room-invite { color: #241300; background: linear-gradient(#ffe169, #dd8a17); animation: invite-float 1.8s ease-in-out infinite; }
#room-team-menu { color: #fff3ca; border-color: #e6b44d; background: linear-gradient(#7d261d, #2c0c09); }
.room-header-actions { display: flex; justify-content: flex-end; gap: 5px; min-width: 0; }
.room-header-actions button { min-width: 0; padding-inline: 7px; white-space: nowrap; }
.room-fullscreen { color: #291500 !important; border-color: #ffe071 !important; background: linear-gradient(#ffe071, #dc8915) !important; }
@keyframes invite-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); box-shadow: 0 5px 12px #ffb72b66; } }
.room-layout { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 40%) minmax(0, 30%); grid-template-areas: "fighter center opponent"; gap: 7px; }
body.account-team-right .room-layout { grid-template-areas: "opponent center fighter"; }
.room-fighter, .room-opponent { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; text-shadow: 0 2px 4px #000; }
.room-fighter { grid-area: fighter; }
.room-center { grid-area: center; }
.room-opponent { grid-area: opponent; }
.room-fighter > small, .room-opponent > small { color: #e6b95d; font: 800 clamp(7px, 1.5dvh, 10px) Arial, sans-serif; letter-spacing: .12em; }
.room-player-info, .opponent-player-info { position: absolute; top: clamp(12px, 3dvh, 18px); left: 50%; width: min(88%, 205px); transform: translateX(-50%); }
.room-fighter-preview { flex: 1; width: 100%; min-height: 0; background-repeat: no-repeat; background-position: left top; filter: drop-shadow(0 7px 5px #000); }
body.account-team-right .room-fighter-preview { transform: scaleX(-1); }
.room-fighter-preview.source-facing-left { transform: scaleX(-1); }
body.account-team-right .room-fighter-preview.source-facing-left { transform: none; }
.room-fighter > strong, .room-opponent > strong { color: #ffe5a8; font-size: clamp(12px, 3dvh, 19px); }
.room-fighter-controls { width: 94%; display: grid; grid-template-columns: 35px 1fr 35px; gap: 4px; }
.room-fighter-controls button { height: clamp(29px, 7dvh, 38px); border: 1px solid #d59a36; color: #251300; background: linear-gradient(#ffe16e, #db8916); font-weight: 900; }
.room-fighter-controls button:first-child, .room-fighter-controls button:last-child { color: #ffe5a8; background: #27100b; font-size: 22px; }
.room-center { align-self: end; width: 100%; height: min(52dvh, 260px); max-height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 4px; padding: 5px; border: 1px solid #ad782d99; border-radius: 5px; background: linear-gradient(145deg, #281710b8, #080708ad); backdrop-filter: blur(5px); }
.room-code-line { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px; color: #bdad94; font: 800 clamp(7px, 1.5dvh, 10px) Arial, sans-serif; }
.room-code-line b { padding: 2px 6px; color: #291600; background: #ffc344; font-size: clamp(10px, 2.4dvh, 15px); }
.room-code-line small { overflow: hidden; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
.room-players { display: grid; gap: 2px; }
.room-players p { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 5px; min-width: 0; margin: 0; padding: 3px 5px; color: #d5c8b5; background: #0005; font: clamp(7px, 1.55dvh, 10px) Arial, sans-serif; }
.room-players p i { color: #59d779; }.room-players p em { color: #e3ad47; font-style: normal; font-weight: 900; }.room-players p.ready em { color: #68df82; }
.room-players .empty-slot { display: block; color: #a99f90; text-align: center; }
body.team-battle-room .room-center { align-self: stretch; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; }
body.team-battle-room .room-players { display: none; }
.team-roster { min-width: 0; display: grid; align-content: start; gap: 2px; }
.team-roster > strong { display: block; padding: 3px 5px; border-bottom: 2px solid currentColor; font: 900 clamp(8px, 1.8dvh, 12px) Impact, sans-serif; letter-spacing: .08em; text-align: center; }
.team-roster.left > strong { color: #ff6b58; background: #52140bbb; }
.team-roster.right > strong { color: #66a9ff; background: #0b2852bb; }
body.team-battle-room .room-players p { grid-template-columns: auto minmax(0, 1fr) auto; gap: 3px; padding: 2px 4px; font-size: clamp(6px, 1.3dvh, 9px); }
body.team-battle-room .room-players p span { display: none; }
body.team-battle-room .room-players p b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.team-battle-room .room-players .empty-slot { min-height: 18px; display: grid; place-items: center; opacity: .68; }
.team-character-grid { flex: 1 1 auto; width: 100%; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(3px, .7vw, 7px); padding: 3px; }
.team-character-slot { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #8c704b; border-radius: 5px; background: linear-gradient(155deg, #2c221dcf, #070707e8); box-shadow: inset 0 0 12px #000b; }
.team-character-slot.left { border-color: #b94a3e; background: linear-gradient(155deg, #52160ecf, #090505e8); }
.team-character-slot.right { border-color: #4778bd; background: linear-gradient(155deg, #102c57cf, #04070de8); }
.team-character-slot.ready { box-shadow: inset 0 0 0 1px #72e595, 0 0 8px #4ee37d77; }
.team-character-slot > i { position: absolute; inset: 0; display: grid; place-items: center; color: #e6bd68; font: normal 900 clamp(23px, 7dvh, 44px) Impact, sans-serif; opacity: .5; }
.team-character-slot.empty > b, .team-character-slot.empty > small { position: absolute; z-index: 2; right: 3px; left: 3px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.team-character-slot.empty > b { bottom: 17px; color: #d9c49d; font: 900 clamp(7px, 1.45dvh, 10px) Arial, sans-serif; }
.team-character-slot.empty > small { bottom: 5px; color: #948a7b; font: 700 clamp(6px, 1.2dvh, 8px) Arial, sans-serif; }
.team-slot-sprite { position: absolute; z-index: 1; inset: 2px 3px 25px; background-repeat: no-repeat; background-position: left top; filter: drop-shadow(0 4px 3px #000); }
.team-slot-sprite.flipped { transform: scaleX(-1); }
.team-character-slot > span { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; display: grid; padding: 3px 4px; background: linear-gradient(transparent, #030303 20%); text-align: center; }
.team-character-slot > span b, .team-character-slot > span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-character-slot > span b { color: #fff0c4; font: 900 clamp(7px, 1.55dvh, 11px) Arial, sans-serif; }
.team-character-slot > span small { color: #c9bca5; font: 700 clamp(5px, 1.05dvh, 8px) Arial, sans-serif; }
.team-character-slot .slot-ready-state { font-style: normal; font-weight: 900; }
.team-character-slot .slot-ready-state.ready { color: #55f084; text-shadow: 0 0 5px #22d95d; }
.team-character-slot .slot-ready-state.waiting { color: #e8b652; }
body.team-battle-room .room-player-info,
body.team-battle-room .room-fighter-preview,
body.team-battle-room .opponent-player-info,
body.team-battle-room .opponent-preview,
body.team-battle-room .room-opponent > strong { display: none; }
body.team-battle-room .room-fighter > strong { flex: 0 0 auto; font-size: clamp(9px, 2dvh, 13px); }
body.team-battle-room .opponent-status { flex: 0 0 auto; margin-top: 3px; }
body.team-battle-room-visible .room-screen { padding-bottom: calc(var(--safe-bottom) + 6px); }
body.team-battle-room-visible .bottom-nav { display: none; }
body.team-battle-room-visible.team-room-menu-open .bottom-nav { position: fixed; z-index: 45; top: calc(var(--safe-top) + 49px); right: calc(var(--safe-right) + 8px); bottom: auto; left: auto; width: min(390px, 54vw); height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 7px; gap: 5px; border: 1px solid #d49c3d; border-radius: 5px; background: rgba(10, 7, 6, .96); box-shadow: 0 8px 24px #000d; }
body.team-battle-room-visible.team-room-menu-open .bottom-nav button { min-height: clamp(34px, 8dvh, 46px); clip-path: none; }
body.team-battle-room-visible.team-room-menu-open .bottom-nav button img { height: clamp(22px, 5dvh, 31px); }
body.team-battle-room-visible.team-room-menu-open .bottom-nav button span { font-size: clamp(8px, 1.8dvh, 12px); }
.map-option.team-battle-map span b { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 3px; color: #fff; background: linear-gradient(90deg, #a31212, #174b99); font: 900 .82em Impact, sans-serif; letter-spacing: .08em; box-shadow: 0 0 7px #6ca6ff88; }
.training-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; min-height: 0; }
.training-options button { position: relative; min-width: 0; min-height: clamp(55px, 14dvh, 76px); display: grid; grid-template-columns: clamp(46px, 11dvh, 62px) 1fr; align-items: center; gap: 6px; padding: 4px; overflow: hidden; border: 2px solid #76542b; color: #e7d5b4; background: #160d0b; text-align: left; }
.training-options button img { width: 100%; aspect-ratio: 1; object-fit: cover; border-right: 1px solid #76542b; }
.training-options button span { min-width: 0; padding-right: 3px; }
.training-options button.selected { border-color: #ffd45d; color: #fff3c4; background: linear-gradient(100deg, #762019, #2a0e0c); box-shadow: 0 0 10px #ffb52d66; }
.training-options b, .training-options small { display: block; }.training-options b { font-size: clamp(9px, 2dvh, 13px); line-height: 1.05; letter-spacing: .035em; }.training-options small { margin-top: 3px; color: #cbbda7; font: clamp(7px, 1.5dvh, 10px)/1.15 Arial, sans-serif; }
.room-chat-form { min-height: 0; display: grid; grid-template-rows: 1fr auto; gap: 3px; }
body.team-battle-room .room-chat-form { height: 100%; }
#room-chat-messages { min-height: 0; overflow: hidden; padding: 3px 5px; color: #d8cdbc; font: clamp(9px, 1.8dvh, 12px)/1.2 Arial, sans-serif; }
#room-chat-messages p { margin: 0 0 3px; } #room-chat-messages b { color: #efbd5a; }
.room-chat-form label { display: grid; grid-template-columns: 1fr auto; gap: 3px; }.room-chat-form input { min-width: 0; height: 26px; padding: 0 6px; border: 1px solid #896438; background: #fff8eb; font-size: 11px; }.room-chat-form button { border: 1px solid #d3962f; color: #2a1600; background: #eaa526; font-weight: 900; }
.room-ready { position: relative; min-height: clamp(36px, 9dvh, 48px); overflow: hidden; border: 2px solid #ffdc68; color: #281500; background: linear-gradient(#ffe16e, #da8514); font: 900 clamp(11px, 2.7dvh, 17px) Arial, sans-serif; letter-spacing: .055em; }.room-ready:disabled { opacity: .48; }.room-ready.selected { color: #e8ffea; border-color: #5ee282; background: #17703a; }
.room-ready.action-start { color: #fff4dd; border-color: #ff8372; background: linear-gradient(#ef382d, #980f0a 58%, #6c0907); box-shadow: inset 0 0 0 1px #510806, 0 0 15px #f5332878; text-shadow: 0 2px 2px #420604; animation: fullscreen-window-alert 1s ease-in-out infinite; }
.room-ready.action-start::before { content: ""; position: absolute; z-index: 0; top: -55%; bottom: -55%; left: -32%; width: 18%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.88), transparent); filter: blur(2px); transform: skewX(-22deg); animation: room-ready-red-shine 1.65s ease-in-out infinite; }
.room-ready.action-start::after { content: "!"; position: relative; z-index: 1; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 8px; border-radius: 50%; color: #8b0c08; background: #ffe67a; box-shadow: 0 0 8px #fff1a1; font: 900 12px/1 Arial, sans-serif; animation: room-ready-alert 1.05s ease-in-out infinite; }
@keyframes room-ready-red-pulse {
  0%, 100% { filter: brightness(1); transform: translateY(0) scale(1); box-shadow: inset 0 0 0 1px #510806, 0 0 12px #f5332866; }
  50% { filter: brightness(1.24); transform: translateY(-2px) scale(1.025); box-shadow: inset 0 0 0 1px #6d0b07, 0 0 27px #ff3f32c4; }
}
@keyframes room-ready-red-shine {
  0%, 18% { left: -32%; opacity: 0; }
  28% { opacity: 1; }
  62%, 100% { left: 118%; opacity: 0; }
}
@keyframes room-ready-alert {
  0%, 100% { transform: scale(.9); }
  50% { transform: scale(1.16); }
}
.room-opponent { justify-content: flex-start; }
.opponent-preview { flex: 1 1 auto; width: 100%; min-height: 0; margin-top: 2px; background-repeat: no-repeat; background-position: left top; filter: drop-shadow(0 7px 5px #000); transform: scaleX(-1); }
body.account-team-right .opponent-preview { transform: none; }
.opponent-preview.source-facing-left { transform: none; }
body.account-team-right .opponent-preview.source-facing-left { transform: scaleX(-1); }
.opponent-preview.empty { position: relative; transform: none; }
.opponent-preview.empty::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; color: #ffe05d; font-size: clamp(42px, 14dvh, 82px); text-shadow: 0 4px 9px #000; }
.opponent-status { width: 92%; min-height: clamp(23px, 6dvh, 33px); display: grid; place-items: center; margin: 2px 0 4px; padding: 2px 5px; border: 1px solid #a9742d; color: #f0d29a; background: rgba(20,10,8,.7); font: 900 clamp(7px, 1.7dvh, 11px) Arial, sans-serif; text-shadow: 0 2px 3px #000; }

body.is-game { position: fixed; inset: 0; width: 100dvw; height: 100dvh; overflow: hidden; overscroll-behavior: none; background: #000; }
body.is-game #game-shell { position: fixed; inset: 0; width: 100dvw; height: 100dvh; max-width: none; overflow: hidden; }
body.is-game .topbar, body.is-game .bottom-nav { display: none; }
.game-screen { position: fixed; z-index: 999; inset: 0; width: 100dvw; height: 100dvh; overflow: hidden; }
.battle-stage { position: fixed; inset: 0; width: 100dvw; height: 100dvh; overflow: hidden; background: #090909 center/cover no-repeat; touch-action: none; user-select: none; -webkit-user-select: none; }
.battle-stage[data-map="congresso-dourado"] { background-image: linear-gradient(#0003,#0006), url('./maps/congresso-dourado.png'); }
.battle-stage[data-map="brasilia-tempestade"] { background-image: linear-gradient(#0003,#0006), url('./maps/brasilia-tempestade.png'); }
.battle-stage[data-map="debate-neon"] { background-image: linear-gradient(#0003,#0006), url('./maps/debate-neon.png'); }
.battle-stage[data-map="fortaleza-quatro-setores"] { background-image: linear-gradient(#0003,#0006), url('./maps/fortaleza-setores-centro.png'); }
.battle-world { position: absolute; inset: 0; }
.battle-hud { position: absolute; z-index: 8; top: max(7px, var(--safe-top)); right: max(12px, var(--safe-right)); left: max(12px, var(--safe-left)); display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(12px, 3vw, 30px); align-items: start; text-shadow: 0 3px 4px #000, 0 0 8px #000; }
.battle-hud > div:last-child { text-align: right; }.battle-hud b { display: block; color: #fff1c8; font: 900 clamp(12px, 3.2dvh, 20px) Arial, sans-serif; }.battle-hud > strong { color: #ffd157; font-size: clamp(20px, 5.5dvh, 34px); white-space: nowrap; }
.battle-hud span { display: block; height: clamp(15px, 4dvh, 24px); border: 3px solid #e4bd60; background: #190908; box-shadow: 0 3px 7px #000; }.battle-hud i { display: block; height: 100%; background: linear-gradient(90deg, #35d45f, #e5d53d); transition: width .12s linear; }.battle-hud > div:last-child i { margin-left: auto; }
.battle-fighter { position: absolute; width: auto; height: clamp(145px, 43dvh, 215px); aspect-ratio: 86 / 138; transform-origin: center bottom; transition: left .07s linear, bottom .07s linear; filter: drop-shadow(0 7px 4px #000); }
.battle-fighter > .battle-sprite { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: left top; background-size: 300% 200%; }.battle-fighter.facing-left > .battle-sprite { transform: scaleX(-1); }.battle-fighter.is-crouching { transform: scaleY(.73); }.battle-fighter.is-hit { filter: brightness(1.65) drop-shadow(0 0 6px #f22); }.battle-fighter.is-blocking { filter: drop-shadow(0 0 6px #5ac8ff); }
.battle-fighter.shield-broken::after { content:""; position:absolute; inset:-12% -22%; pointer-events:none; background:repeating-conic-gradient(from 8deg,transparent 0 8deg,#c9f7ff 9deg 10deg,transparent 11deg 25deg); filter:drop-shadow(0 0 4px #39bfff); opacity:0; animation:shield-break-mobile .42s ease-out; }
@keyframes shield-break-mobile { 0%{opacity:1;transform:scale(.55) rotate(-8deg)} 100%{opacity:0;transform:scale(1.45) rotate(12deg)} }
.battle-fighter.source-facing-left span { transform: scaleX(-1); }
.battle-fighter.source-facing-left.facing-left span { transform: none; }
.battle-player-info { position: absolute; top: clamp(-42px, -8.5dvh, -30px); left: 50%; width: max-content; min-width: clamp(82px, 15vw, 128px); transform: translateX(-50%); }
.move-controls, .attack-controls { position: absolute; z-index: 12; bottom: max(10px, var(--safe-bottom)); display: grid; gap: clamp(6px, 1.2dvh, 10px); }.move-controls { left: max(12px, var(--safe-left)); grid-template-columns: repeat(2, clamp(52px, 10dvh, 72px)); }.attack-controls { right: max(12px, var(--safe-right)); grid-template-columns: repeat(3, clamp(48px, 9dvh, 66px)); }
.move-controls button, .attack-controls button { height: clamp(50px, 12dvh, 72px); min-width: 0; border: 0; border-radius: 50%; color: #ffe9ae; background: #2a130de8; box-shadow: inset 0 0 12px #000, 0 3px 7px #000c; font: 900 clamp(12px, 3dvh, 18px) Arial, sans-serif; text-shadow: 0 2px 2px #000; }.attack-controls button { background: #781d15ed; }
.battle-stage, .move-controls, .attack-controls, .move-controls button, .attack-controls button { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.security-interruption { position: fixed; z-index: 2147483647; inset: 0; display: grid; place-items: center; padding: 20px; color: #f5ead3; background: rgba(2, 3, 6, .985); font-family: Arial, sans-serif; text-align: center; }
.security-interruption > div { width: min(520px, 90vw); padding: 28px; border: 2px solid #c83232; background: #160a0a; box-shadow: 0 0 35px #d51f1f55; }
.security-interruption strong { display: block; color: #ff4f4f; font-size: clamp(22px, 6dvh, 42px); }
.security-interruption p { margin: 14px 0 7px; }.security-interruption small { color: #cdbda5; }
.battle-exit, .battle-fullscreen { position: absolute; z-index: 15; top: max(58px, calc(var(--safe-top) + 55px)); min-height: 34px; padding: 0 10px; border: 1px solid #b88038; color: #f2dbad; background: #160d0be8; font: 900 clamp(9px, 2.2dvh, 13px) Arial, sans-serif; }
.battle-exit { right: max(10px, var(--safe-right)); }.battle-fullscreen { left: max(10px, var(--safe-left)); color: #281500; border-color: #ffe071; background: linear-gradient(#ffe071, #dc8915); }
body:fullscreen .battle-fullscreen, body.is-game:fullscreen .battle-fullscreen, :fullscreen .battle-fullscreen { display: none; }

@keyframes fullscreen-window-alert {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 7px rgba(255,28,28,.58), inset 0 0 0 1px #5f0000; transform: scale(1); }
  50% { filter: brightness(1.42); box-shadow: 0 0 22px rgba(255,35,35,.98), inset 0 0 0 1px #ff8b79; transform: scale(1.045); }
}
html:not(:fullscreen) .fullscreen-button,
html:not(:fullscreen) .lobby-fullscreen,
html:not(:fullscreen) .create-fullscreen,
html:not(:fullscreen) .room-fullscreen,
html:not(:fullscreen) .feature-fullscreen,
html:not(:fullscreen) .battle-fullscreen {
  color: #fff !important;
  border-color: #ff8b79 !important;
  background: linear-gradient(#df2924, #8c0808) !important;
  text-shadow: 0 2px 2px #390000 !important;
  animation: fullscreen-window-alert 1s ease-in-out infinite !important;
}
:fullscreen .feature-fullscreen { display: none; }

.rotate-device {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: none;
  place-content: center;
  justify-items: center;
  padding: 28px;
  color: #f8d98b;
  background: radial-gradient(circle at 50% 35%, #3b1c12, #080708 68%);
  text-align: center;
}

.rotate-device h1 { max-width: 100%; margin: 19px 0 5px; font-size: clamp(27px, 8.2vw, 44px); letter-spacing: .025em; white-space: nowrap; }
.rotate-device p { max-width: 330px; margin: 0; color: #d3c1a3; font: 16px/1.35 Arial, sans-serif; }
.phone-icon { width: 62px; height: 108px; padding: 6px; border: 4px solid #dda63c; border-radius: 10px; animation: rotate-phone 1.8s ease-in-out infinite; }
.phone-icon span { display: block; width: 100%; height: 100%; border-radius: 3px; background: linear-gradient(145deg, #8f1c12, #24100c); }

@keyframes rotate-phone { 0%, 25% { transform: rotate(0); } 70%, 100% { transform: rotate(90deg); } }

@media (orientation: portrait) {
  #game-shell { visibility: hidden; }
  .rotate-device { display: grid; }
}

@media (orientation: landscape) and (max-height: 390px) {
  .session-badge { display: none; }
  .hero { width: 53vw; }
  .hero-logo { height: 39dvh; }
  .ranking-card { width: 21vw; }
  .bottom-nav button span { font-size: clamp(9px, 2.35dvh, 14px); }
  .lobby-screen { padding-top: calc(var(--safe-top) + 69px); }
  .lobby-global-rank { width: min(39vw, 330px); min-width: 225px; }
  .register-auth-form { padding-top: 3px; gap: 3px; }
  .register-fields { gap: 2px; }
  .register-fields label > small { display: none; }
  .register-auth-form input:not([type="radio"]) { height: 27px; }
  .register-team-fieldset { padding-block: 2px 3px; }
  .register-auth-form .auth-team-option { min-height: 38px; }
  .register-auth-form .auth-team-option img { width: 29px; height: 29px; }
  .register-submit-row .auth-submit { min-height: 30px; }
}

@media (orientation: landscape) and (max-width: 700px) {
  .ranking-card { width: 22vw; }
  .ranking-card li:nth-child(4) { display: none; }
  .bottom-nav { gap: 2px; padding-inline: 4px; }
  .bottom-nav button { border-width: 1px; }
  .bottom-nav button img { height: 58%; }
  .lobby-titlebar { right: calc(var(--safe-right) + 155px); grid-template-columns: 78px auto 78px; }
  .lobby-create { right: calc(var(--safe-right) + 4px); width: calc((100vw - 18px) / 6); padding-inline: 5px; }
  body.account-team-left .lobby-create { right: calc(var(--safe-right) + 4px); left: auto; }
  body.account-team-right .lobby-create { right: auto; left: calc(var(--safe-left) + 4px); }
  .lobby-grid,
  .lobby-grid.team-right { grid-template-columns: minmax(0, 36%) minmax(0, 25%) minmax(0, 39%); }
  .lobby-grid.team-right { grid-template-columns: minmax(0, 39%) minmax(0, 25%) minmax(0, 36%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .arena-energy-line { opacity: 1; }
  .arena-energy-flow { animation: arena-energy-flow 2.4s linear infinite !important; }
}