/* ===== Poke Web Online — Tema visual Pokémon ===== */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Press+Start+2P&display=swap");

:root {
  --pk-red: #ee1515;
  --pk-red-dark: #b81010;
  --pk-blue: #3b4cca;
  --pk-blue-dark: #1d2c5e;
  --pk-yellow: #ffcb05;
  --pk-yellow-dark: #c7a008;
  --pk-white: #f8f8f8;
  --pk-screen: #f0e8c8;
  --pk-border: #184878;
  --pk-shadow: rgba(29, 44, 94, 0.55);
  --font-ui: "Fredoka", system-ui, sans-serif;
  --font-pixel: "Press Start 2P", monospace;
}

/* Canvas — renderização suave (mapas/sprites) */
#game {
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* ----- Login / Status ----- */
.overlay-auth {
  background:
    linear-gradient(180deg, rgba(29, 44, 94, 0.35) 0%, rgba(13, 20, 36, 0.75) 100%),
    url("assets/ui/login-bg.png") center / cover no-repeat;
  padding: 20px;
}

.auth-scene {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: authFadeIn 0.6s ease;
}

@keyframes authFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-logo {
  width: min(92vw, 340px);
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.45));
  image-rendering: auto;
}

.auth-tagline {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  margin: -6px 0 0;
}

.poke-panel {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, #fff 0%, #eef4ff 100%);
  border: 4px solid var(--pk-blue);
  border-radius: 18px;
  padding: 0 0 22px;
  box-shadow:
    inset 0 0 0 3px #fff,
    0 0 0 2px var(--pk-red),
    0 16px 40px var(--pk-shadow);
  text-align: center;
  color: var(--pk-blue-dark);
  overflow: hidden;
}

.poke-panel-top {
  height: 8px;
  background: linear-gradient(90deg, var(--pk-red), var(--pk-yellow), var(--pk-blue));
  margin-bottom: 16px;
}

.poke-panel .logo {
  display: none;
}

.poke-panel p.muted {
  color: #5a6a8a;
  font-size: 14px;
  padding: 0 20px;
  margin-bottom: 8px;
  line-height: 1.45;
}

.poke-panel input {
  width: calc(100% - 40px);
  padding: 13px 16px;
  margin-top: 10px;
  border-radius: 12px;
  border: 3px solid #c8d4ea;
  background: #fff;
  color: var(--pk-blue-dark);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.poke-panel input:focus {
  outline: none;
  border-color: var(--pk-blue);
  box-shadow: 0 0 0 3px rgba(59, 76, 202, 0.25);
}

.poke-panel .row {
  padding: 0 20px;
  margin-top: 16px;
}

.poke-panel .error {
  padding: 0 20px;
  font-weight: 600;
}

/* Botões estilo jogo */
.btn-poke {
  flex: 1;
  padding: 13px 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 0 rgba(0, 0, 0, 0.25);
}

.btn-poke:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
}

.btn-poke-primary {
  background: linear-gradient(180deg, #ff4d4d 0%, var(--pk-red) 50%, var(--pk-red-dark) 100%);
  color: #fff;
  border: 3px solid #fff;
  outline: 2px solid var(--pk-red-dark);
}

.btn-poke-secondary {
  background: linear-gradient(180deg, #6b7cff 0%, var(--pk-blue) 50%, #2a38a0 100%);
  color: #fff;
  border: 3px solid #fff;
  outline: 2px solid #2a38a0;
}

/* Pokeball loading */
.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.pokeball-spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background:
    linear-gradient(var(--pk-red) 50%, #fff 50%);
  border: 4px solid #303030;
  position: relative;
  animation: pokeballShake 1s ease-in-out infinite;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.pokeball-spinner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: #303030;
  transform: translateY(-50%);
}

.pokeball-spinner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #303030;
}

@keyframes pokeballShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}

.loading-box .auth-logo-sm {
  width: 200px;
  opacity: 0.95;
}

.loading-box #statusMsg {
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Decoração pokeballs flutuantes */
.auth-deco {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.auth-deco span {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(var(--pk-red) 50%, #fff 50%);
  border: 3px solid rgba(48, 48, 48, 0.6);
  opacity: 0.35;
  animation: floatBall 6s ease-in-out infinite;
}

.auth-deco span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(48, 48, 48, 0.6);
}

.auth-deco span:nth-child(1) { top: 12%; left: 8%; animation-delay: 0s; }
.auth-deco span:nth-child(2) { top: 22%; right: 10%; animation-delay: 1.2s; width: 20px; height: 20px; }
.auth-deco span:nth-child(3) { bottom: 18%; left: 14%; animation-delay: 2.4s; width: 22px; height: 22px; }
.auth-deco span:nth-child(4) { bottom: 24%; right: 12%; animation-delay: 0.8s; }

@keyframes floatBall {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}

.auth-scene, .loading-box { position: relative; z-index: 1; }

/* ----- HUD / Topbar ----- */
#topbar {
  padding: 8px 12px;
  z-index: 50;
  background: linear-gradient(180deg, rgba(29, 44, 94, 0.96) 0%, rgba(29, 44, 94, 0.72) 70%, transparent 100%);
  border-bottom: 2px solid rgba(255, 203, 5, 0.45);
  font-family: var(--font-ui);
}

.topright {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(72vw, 720px);
  gap: 6px !important;
}

#meName {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pk-yellow);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

#meName::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5fe06a;
  box-shadow: 0 0 6px #5fe06a;
}

#money {
  background: linear-gradient(180deg, var(--pk-yellow) 0%, var(--pk-yellow-dark) 100%);
  color: var(--pk-blue-dark) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 5px 12px;
  border-radius: 20px;
  border: 2px solid #fff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.hud-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.08s !important;
}

.hud-btn:active {
  transform: translateY(2px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2) !important;
}

.hud-btn-menu { background: linear-gradient(180deg, #ff6b6b, var(--pk-red)) !important; color: #fff !important; }
.hud-btn-online { background: linear-gradient(180deg, #7b8cff, var(--pk-blue)) !important; color: #fff !important; }
.hud-btn-social { background: linear-gradient(180deg, #5fe06a, #2fae3a) !important; color: #fff !important; }
.hud-btn-party { background: linear-gradient(180deg, #ffd23f, #e8a800) !important; color: var(--pk-blue-dark) !important; }
.hud-btn-bag { background: linear-gradient(180deg, #ffb347, #e87828) !important; color: #fff !important; }
.hud-btn-dex { background: linear-gradient(180deg, #ff7070, #c03030) !important; color: #fff !important; }

.hud-icon { font-size: 14px; line-height: 1; }
.hud-label { display: none; }

@media (min-width: 720px) {
  .hud-label { display: inline; }
  .hud-btn { padding: 6px 12px !important; font-size: 13px !important; }
}

#onlineCount {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#mapLocation {
  background: rgba(255, 203, 5, 0.15);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 203, 5, 0.45);
}

.hud-status { gap: 3px; }

/* Party HUD */
.pmon {
  background: linear-gradient(90deg, rgba(29, 44, 94, 0.92), rgba(29, 44, 94, 0.75));
  border: 2px solid rgba(255, 203, 5, 0.45);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.pname { color: #fff; }

/* Chat */
#chatInput {
  border: 2px solid var(--pk-blue);
  border-radius: 10px;
  font-family: var(--font-ui);
}

#chatForm button {
  background: linear-gradient(180deg, var(--pk-red), var(--pk-red-dark));
  border: 2px solid #fff;
  border-radius: 10px;
  font-weight: 700;
}

#chatLog .line {
  background: rgba(29, 44, 94, 0.88);
  border-left: 3px solid var(--pk-yellow);
  border-radius: 0 10px 10px 0;
}

/* Diálogo estilo Pokémon */
#dialog {
  background: var(--pk-white);
  border: 4px solid var(--pk-blue);
  border-radius: 16px;
  color: var(--pk-blue-dark);
  box-shadow:
    inset 0 0 0 3px #fff,
    0 0 0 2px var(--pk-red),
    0 12px 32px rgba(0, 0, 0, 0.45);
}

#dialogText {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

#dialogHint {
  color: var(--pk-blue);
  font-weight: 700;
}

/* Banner área / eventos */
#areaBanner {
  background: linear-gradient(180deg, rgba(29, 44, 94, 0.95), rgba(29, 44, 94, 0.85));
  border: 3px solid var(--pk-yellow);
  border-radius: 14px;
  font-family: var(--font-pixel);
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 10px 22px;
  text-transform: uppercase;
}

#eventBanner {
  background: linear-gradient(90deg, var(--pk-red-dark), var(--pk-blue));
  border-bottom: 3px solid var(--pk-yellow);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 14px;
}

/* D-pad estilo Game Boy */
#dpad button {
  background: linear-gradient(180deg, #4a5a7a, #2a3858);
  border: 3px solid #1a2848;
  color: #e8f0ff;
  font-size: 20px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 4px 0 #0a1020;
}

#dpad .actbtn,
#btnA {
  background: linear-gradient(180deg, var(--pk-yellow), var(--pk-yellow-dark));
  color: var(--pk-blue-dark);
  border-color: #a08000;
  font-family: var(--font-pixel);
  font-size: 11px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), 0 4px 0 #0a1020;
}
#btnA { font-size: 18px; border-width: 3px; border-style: solid; border-radius: 50%; }

#btnRun {
  background: linear-gradient(180deg, #4a5a7a, #2a3858);
  border: 3px solid #1a2848;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: 0 3px 0 #0a1020;
}

#btnRun.on {
  background: linear-gradient(180deg, var(--pk-yellow), var(--pk-yellow-dark));
  color: var(--pk-blue-dark);
  border-color: #a08000;
}

/* Painéis genéricos (loja, opções, cartão) */
.overlay:not(.overlay-auth):not(:has(.bag-device)):not(:has(.dex-device)):not(:has(.party-device)):not(:has(.pause-device)):not(:has(.pc-device)) {
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(59, 76, 202, 0.35), transparent),
    rgba(13, 20, 36, 0.88);
}

.overlay .panel:not(.poke-panel) {
  background: linear-gradient(180deg, #fff 0%, #eef4ff 100%);
  border: 4px solid var(--pk-blue);
  border-radius: 18px;
  color: var(--pk-blue-dark);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--pk-red), 0 16px 40px var(--pk-shadow);
}

.overlay .panel:not(.poke-panel) .logo {
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--pk-blue-dark);
  letter-spacing: 1px;
}

.overlay .panel:not(.poke-panel) .logo span {
  color: var(--pk-red);
}

.overlay .panel:not(.poke-panel) .muted {
  color: #5a6a8a;
}

.overlay .panel:not(.poke-panel) button:not(.game-btn):not(.mini):not(.hud-btn) {
  background: linear-gradient(180deg, #ff4d4d, var(--pk-red-dark));
  border: 3px solid #fff;
  outline: 2px solid var(--pk-red-dark);
  border-radius: 12px;
  font-weight: 700;
}

.overlay .panel:not(.poke-panel) button.secondary {
  background: linear-gradient(180deg, #6b7cff, #2a38a0);
  outline-color: #2a38a0;
}

.game-btn {
  background: linear-gradient(180deg, #fff 0%, #e0e8f0 100%) !important;
  color: var(--pk-blue) !important;
  border: 3px solid var(--pk-blue) !important;
  border-radius: 12px !important;
  font-family: var(--font-ui) !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--pk-border) !important;
}

.game-btn:active {
  transform: translateY(3px) !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--pk-border) !important;
}

.secondary-bag {
  background: linear-gradient(180deg, var(--pk-yellow), var(--pk-yellow-dark)) !important;
  color: var(--pk-blue-dark) !important;
  border-color: #a08000 !important;
}

/* Menu pausa */
.pause-header {
  background: linear-gradient(180deg, var(--pk-red), var(--pk-red-dark));
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 2px;
  border-color: var(--pk-blue-dark);
}

.pause-list button {
  font-family: var(--font-ui);
  color: var(--pk-blue-dark);
  font-weight: 600;
  padding-left: 20px;
  position: relative;
}

.pause-list button::before {
  content: "▶";
  position: absolute;
  left: 8px;
  color: var(--pk-red);
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.15s;
}

.pause-list button:hover:not(:disabled)::before {
  opacity: 1;
}

.pause-list button:hover:not(:disabled) {
  background: #fff8e8;
  color: var(--pk-red);
}

/* Social / Hub tabs */
.tab-row button {
  background: linear-gradient(180deg, #e8f0ff, #c8d8f0);
  color: var(--pk-blue-dark);
  border: 2px solid var(--pk-blue);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 12px;
  flex: none;
}

.tab-row button.active {
  background: linear-gradient(180deg, var(--pk-red), var(--pk-red-dark));
  color: #fff;
  border-color: #fff;
  outline: 2px solid var(--pk-red-dark);
}

.social-panel {
  border: 4px solid var(--pk-blue) !important;
  background: linear-gradient(180deg, #fff, #eef4ff) !important;
  color: var(--pk-blue-dark) !important;
}

.hub-card {
  background: #fff !important;
  border: 2px solid #c8d4ea !important;
  border-radius: 12px !important;
  color: var(--pk-blue-dark) !important;
}

/* Starter screen */
.overlay:has(.starter-panel) {
  background:
    linear-gradient(180deg, rgba(29, 44, 94, 0.5), rgba(13, 20, 36, 0.85)),
    url("assets/ui/login-bg.png") center / cover no-repeat;
}

.starter-panel {
  border: 4px solid var(--pk-blue);
  background: linear-gradient(180deg, #fff, #eef4ff);
  color: var(--pk-blue-dark);
}

.starter-panel .logo {
  font-family: var(--font-pixel);
  font-size: 13px;
}

.startergen h3 {
  color: var(--pk-blue);
  border-left: 4px solid var(--pk-red);
  padding-left: 8px;
}

.card {
  background: #fff;
  border: 3px solid #c8d4ea;
  border-radius: 16px;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.card:hover {
  border-color: var(--pk-yellow);
  box-shadow: 0 8px 20px rgba(255, 203, 5, 0.35);
  transform: translateY(-4px);
}

/* Invite bar */
.invite-bar {
  background: linear-gradient(180deg, #fff, #eef4ff);
  border: 3px solid var(--pk-blue);
  color: var(--pk-blue-dark);
  border-radius: 14px;
}

.invite-bar button.mini {
  background: linear-gradient(180deg, #5fe06a, #2fae3a) !important;
  color: #fff !important;
}

/* Cartão de treinador */
.trainer-card-panel { max-width: 400px !important; }

.trainer-card-frame {
  display: flex;
  gap: 16px;
  padding: 16px 20px 8px;
  text-align: left;
}

.trainer-card-photo {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: linear-gradient(180deg, var(--pk-yellow), var(--pk-yellow-dark));
  border: 4px solid var(--pk-blue);
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--pk-border);
}

.trainer-card-info { flex: 1; min-width: 0; }
.trainer-card-info .logo { text-align: left; margin-bottom: 8px; }
.trainer-card-info p { margin: 4px 0; font-size: 14px; }

/* Batalha — menu de ações */
.bbox {
  background: linear-gradient(180deg, var(--pk-blue-dark), #0d1424);
  border-top: 4px solid var(--pk-yellow);
}

#bmsg {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 10px;
  min-height: 44px;
}

.bmenu button {
  background: linear-gradient(180deg, #fff, #e8f0f8) !important;
  color: var(--pk-blue-dark) !important;
  border: 3px solid var(--pk-blue) !important;
  border-radius: 12px !important;
  font-family: var(--font-ui) !important;
  font-weight: 800 !important;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--pk-border) !important;
}

.bmenu button[data-act="fight"] {
  background: linear-gradient(180deg, #ff7070, var(--pk-red)) !important;
  color: #fff !important;
  border-color: #fff !important;
  outline: 2px solid var(--pk-red-dark);
}

.bmenu button[data-act="catch"] {
  background: linear-gradient(180deg, var(--pk-yellow), var(--pk-yellow-dark)) !important;
  color: var(--pk-blue-dark) !important;
}

.bmenu button.back {
  background: linear-gradient(180deg, #6b7cff, var(--pk-blue)) !important;
  color: #fff !important;
}

.bbar {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 3px solid var(--pk-blue) !important;
  color: var(--pk-blue-dark) !important;
  border-radius: 12px !important;
}

.bbar .bname { color: var(--pk-blue-dark); }
.bbar .blv { color: var(--pk-red); font-weight: 800; }

body.battle-active #hud { visibility: hidden; pointer-events: none; }

/* ===================== Mobile (layout enxuto) ===================== */
@media (max-width: 640px) {
  /* Topbar: barra única rolável, sem quebrar em 2 linhas */
  #topbar { padding: 6px 8px; align-items: center; gap: 6px; }
  #meName { font-size: 13px; flex: 0 0 auto; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topright {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 64vw;
    gap: 5px !important;
    pointer-events: auto;
  }
  .topright::-webkit-scrollbar { display: none; }
  #money { font-size: 11px !important; padding: 4px 8px; flex: 0 0 auto; }
  .hud-status { max-width: 34vw; flex: 0 0 auto; }
  #mapLocation { font-size: 10px; padding: 2px 8px; }
  #onlineCount { font-size: 10px; padding: 2px 8px; display: inline !important; }
  .hud-btn { padding: 6px 8px !important; flex: 0 0 auto; }
  .hud-icon { font-size: 16px; }

  /* Banner de evento mais fino e logo abaixo da barra */
  #eventBanner { top: 42px; font-size: 11px; padding: 5px 10px; }
  body.event-live #party { top: 74px; }

  /* Party HUD compacto (ocupava metade da tela) */
  #party { top: 42px; left: 6px; gap: 4px; transform: scale(0.82); transform-origin: top left; }
  .pmon { width: 150px; padding: 3px 6px 3px 3px; }
  .pname { font-size: 11px; }

  /* Chat centralizado entre os controles */
  #chat {
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px;
    width: min(280px, calc(100vw - 180px));
  }
  #chatLog { max-height: 18vh; font-size: 12px; }
  #chatInput { padding: 7px 9px; font-size: 13px; }

  /* D-pad à esquerda */
  #dpad { left: 10px; right: auto; bottom: 10px; width: 150px; height: 150px; opacity: 0.95; }
  #dpad button { width: 50px; height: 50px; }
  #dpad .up { left: 50px; } #dpad .left { top: 50px; } #dpad .right { top: 50px; left: 100px; }
  #dpad .down { top: 100px; left: 50px; }

  /* Botão A à direita (acima da batalha z-index 30) */
  #btnA { right: 10px; bottom: 52px; width: 68px; height: 68px; font-size: 20px; }

  #btnRun { left: 10px; right: auto; bottom: 168px; padding: 8px 12px; font-size: 13px; }
  .zoom-controls { left: 10px; right: auto; bottom: 218px; }

  .bscene-plat-enemy { top: 46%; right: 6%; }
  .bscene-plat-player { bottom: 4%; left: 4%; }
  .spr.enemy { width: min(36vw, 160px); height: min(36vw, 160px); }
  .spr.player { width: min(42vw, 190px); height: min(42vw, 190px); }
  .bbox { padding: 10px; min-height: 108px; }
  #bmsg { font-size: 14px; min-height: 36px; }
  .bmenu button { padding: 11px 8px; font-size: 14px; }
}

@media (max-width: 380px) {
  #party { transform: scale(0.72); }
  .topright { max-width: 58vw; }
  #meName { max-width: 28vw; }
}