/* PANDA MEME BOMBERMAN — IN-GAME DOM CHROME (top bar, touch controls, emote picker, banners, toast) — owned file; see DESIGN.md */

:root {
  --hud-right: max(var(--space-3), env(safe-area-inset-right, 0px));
  --ctl-joystick: 140px;
  --ctl-knob: 54px;
  --ctl-dash: 98px;
  --ctl-item: 62px;
  --ctl-emote: 46px;
  --ctl-user-opacity: 0.76;
}

/* --------------------------------------------------------------------------
   1. Top bar — 3 clean dark-teal rounded square utility buttons ([🔊] [⚙️] [⛶])
   -------------------------------------------------------------------------- */
#top-controls {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: var(--z-topbar);
}

#top-controls .arcade-icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(16, 68, 60, 0.94) 0%, rgba(7, 30, 26, 0.98) 100%);
  border: 2px solid rgba(94, 234, 212, 0.78);
  color: #f8fafc;
  box-shadow: 0 0 0 2.5px rgba(3, 21, 18, 0.92), 0 4px 10px rgba(0, 0, 0, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

#top-controls .arcade-icon-btn .icon,
#top-controls .arcade-icon-btn .svg-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

#top-controls .arcade-icon-btn.mobile-only-btn {
  display: none;
}

body.touch-input #top-controls .arcade-icon-btn.mobile-only-btn {
  display: inline-flex;
}

@media (max-width: 900px) {
  #top-controls .arcade-icon-btn.mobile-only-btn {
    display: inline-flex;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  #top-controls {
    top: max(8px, env(safe-area-inset-top, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    gap: 6px;
  }

  #top-controls .arcade-icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 9px;
  }

  #top-controls .arcade-icon-btn .icon,
  #top-controls .arcade-icon-btn .svg-icon {
    width: 19px;
    height: 19px;
  }
}

#top-controls .arcade-icon-btn:hover,
#top-controls .arcade-icon-btn:active {
  border-color: #22d3ee;
  background: rgba(20, 82, 74, 0.98);
  transform: translateY(-1px);
}

.icon-btn-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.svg-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
}

.mobile-only-btn {
  display: none;
}

body.touch-input .mobile-only-btn {
  display: inline-flex;
}

@media (max-width: 900px) {
  .mobile-only-btn {
    display: inline-flex;
  }
}

/* Mobile Portrait Rotate Card ("Xoay ngang để chơi") */
.landscape-hint-pill {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 18, 16, 0.82);
  backdrop-filter: blur(6px);
}

.rotate-card-inner {
  position: relative;
  width: min(320px, 90vw);
  padding: 24px 20px 20px;
  background: linear-gradient(180deg, rgba(11, 43, 39, 0.98) 0%, rgba(7, 26, 24, 0.99) 100%);
  border: 2px solid rgba(45, 212, 191, 0.55);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.rotate-card-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: rgba(20, 83, 75, 0.55);
  border: 1.5px solid rgba(94, 234, 212, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #facc15;
  margin-bottom: 4px;
}

.rotate-card-icon-wrap .svg-icon {
  width: 38px;
  height: 38px;
  color: #facc15;
}

.rotate-card-title {
  margin: 0;
  font: 900 20px/1.2 var(--font-display);
  color: #facc15;
  letter-spacing: 0.4px;
}

.rotate-card-subtitle {
  margin: 0 0 6px;
  font: 600 13px/1.4 var(--font-body);
  color: #cbd5e1;
}

.rotate-card-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
}

.landscape-hint-action {
  width: 100%;
  background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
  color: #091e1b;
  border: 1.5px solid #091e1b;
  border-radius: 10px;
  padding: 10px 14px;
  font: 900 13px/1 var(--font-display);
  cursor: pointer;
}

.landscape-hint-back,
.landscape-hint-close {
  position: static;
  width: 100%;
  height: auto;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(15, 42, 38, 0.88);
  color: #e2e8f0;
  border: 1.5px solid rgba(94, 234, 212, 0.35);
  border-radius: 10px;
  padding: 9px 14px;
  font: 800 12.5px/1 var(--font-body);
  cursor: pointer;
}

@media (max-width: 767px) and (orientation: portrait) {
  body.in-game .landscape-hint-pill:not(.is-dismissed) {
    display: flex;
  }
}

body.show-landscape-hint .landscape-hint-pill:not(.is-dismissed) {
  display: flex;
}

body.in-game #top-controls .lobby-only,
body:not(.in-game) #top-controls .game-only {
  display: none;
}

/* Sound / fullscreen buttons carry both icons; state picks one. */
#btn-sound[aria-pressed="false"] .icon-sound-on,
#btn-sound:not([aria-pressed="false"]) .icon-sound-off,
:root:fullscreen .icon-fs-enter,
:root:not(:fullscreen) .icon-fs-exit {
  display: none;
}

#top-room-badge {
  display: none !important;
}

.pause-room-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(7, 26, 24, 0.72);
  border: 1.5px solid rgba(94, 234, 212, 0.3);
  border-radius: 10px;
  font: 800 13px/1.2 var(--font-body);
  color: var(--text-secondary);
}

.pause-room-code-bar strong {
  color: var(--color-gold);
  letter-spacing: 1.5px;
  font-family: var(--font-display);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   2. Unified Bottom Controls — Translucent Joystick + Item Slot + Dash / Stone-Throw
   (Close-up Mockups 4 & 5: 1792439408870 & 1792439416615)
   -------------------------------------------------------------------------- */
#mobile-controls {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-controls);
  display: none;
}

body.in-game #mobile-controls {
  display: block;
}

/* Virtual joystick is only needed on touch/mobile devices; desktop shows WASD key hints */
body:not(.touch-input) #joystick-container {
  display: none;
}

body.is-ghost-spectator #btn-item-slot {
  display: none !important;
}

/* Translucent dark-teal Joystick with double mint-teal/dark ring, 4 directional arrows & 3D white/silver knob */
#joystick-container {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  left: max(18px, env(safe-area-inset-left, 0px));
  width: var(--ctl-joystick);
  height: var(--ctl-joystick);
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle, rgba(16, 68, 60, 0.5) 0%, rgba(7, 30, 26, 0.78) 100%);
  border: 2.5px solid rgba(94, 234, 212, 0.75);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(3, 21, 18, 0.88), 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 0 16px rgba(45, 212, 191, 0.22);
  opacity: var(--ctl-user-opacity, 0.78);
  transform: translate(var(--joy-float-x, 0px), var(--joy-float-y, 0px));
  transition: opacity 0.16s ease, border-color 0.16s ease;
  pointer-events: auto;
  touch-action: none;
}

#joystick-container.is-active,
#joystick-container:active {
  opacity: 0.95;
  border-color: #22d3ee;
}

#joystick-zone,
.joystick-zone {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  touch-action: none;
}

.joy-dir-arrow {
  position: absolute;
  font-size: 11px;
  line-height: 1;
  color: rgba(153, 246, 228, 0.78);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  user-select: none;
}

.joy-dir-up { top: 9px; left: 50%; transform: translateX(-50%); }
.joy-dir-down { bottom: 9px; left: 50%; transform: translateX(-50%); }
.joy-dir-left { left: 9px; top: 50%; transform: translateY(-50%); }
.joy-dir-right { right: 9px; top: 50%; transform: translateY(-50%); }

#joystick-knob {
  width: var(--ctl-knob);
  height: var(--ctl-knob);
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, #f1f5f9 48%, #cbd5e1 82%, #94a3b8 100%);
  border: 2.5px solid rgba(15, 23, 42, 0.65);
  border-radius: 50%;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.55), inset 0 2px 3px rgba(255, 255, 255, 0.9);
  transform: translate(0px, 0px);
  transition: transform 0.04s ease-out;
  pointer-events: none;
  z-index: 2;
}

#action-buttons {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  right: max(18px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 14px;
  pointer-events: auto;
}

.action-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border: 2.5px solid rgba(94, 234, 212, 0.82);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(20, 88, 80, 0.94) 0%, rgba(7, 32, 28, 0.98) 100%);
  color: var(--color-white);
  font: 900 13px/1 var(--font-display);
  letter-spacing: 0.5px;
  text-shadow: 0 2px 0 rgba(2, 16, 12, 0.9);
  box-shadow: 0 0 0 3px rgba(3, 21, 18, 0.92), 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 2px 3px rgba(255, 255, 255, 0.22);
  opacity: var(--ctl-user-opacity, 0.82);
  cursor: pointer;
  touch-action: none;
  transition: transform var(--duration-fast) var(--ease-smooth), box-shadow var(--duration-fast), border-color var(--duration-fast), opacity var(--duration-fast);
}

.action-btn:active,
.action-btn.is-pressed {
  transform: translateY(2px) scale(0.95);
  opacity: 0.98 !important;
  border-color: #22d3ee;
}

/* 1-Slot Tactical Item Button (#btn-item-slot — Close-up Mockup 4: circular dark-teal button to left of LƯỚT) */
.btn-item-slot {
  display: flex;
  width: var(--ctl-item, 62px);
  height: var(--ctl-item, 62px);
  background: radial-gradient(circle at 35% 28%, rgba(20, 86, 78, 0.92) 0%, rgba(7, 30, 26, 0.96) 100%);
  border: 2.5px solid rgba(94, 234, 212, 0.78);
}

.btn-item-slot.has-item {
  opacity: 0.95;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(3, 21, 18, 0.92), 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 14px rgba(250, 204, 21, 0.45);
}

.btn-item-slot .item-slot-icon {
  font-size: 25px;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.65));
}

.btn-item-slot .btn-label {
  display: none;
}

.item-key-pill {
  position: absolute;
  bottom: 5px;
  font-size: 10px;
  color: var(--color-gold);
}

body.touch-input .item-key-pill {
  display: none;
}

/* Large Circular LƯỚT Button (#btn-dash — Close-up Mockup 4: bold white » on top + LƯỚT below) */
.btn-dash {
  width: var(--ctl-dash);
  height: var(--ctl-dash);
  background: radial-gradient(circle at 35% 28%, rgba(22, 96, 86, 0.95) 0%, rgba(8, 35, 31, 0.98) 100%);
  border: 2.5px solid rgba(94, 234, 212, 0.85);
}

.dash-double-chevron {
  font: 900 32px/0.82 var(--font-display);
  color: #ffffff;
  -webkit-text-stroke: 1.5px #031512;
  text-shadow: 0 2px 0 #031512, 0 3px 6px rgba(0, 0, 0, 0.65);
  z-index: 2;
}

.desktop-space-pill {
  display: none;
}

.mobile-dash-icon {
  display: none;
}

/* Ghost Stone Throw mode ("NÉM ĐÁ") */
.btn-dash.is-ghost-skill {
  background: radial-gradient(circle at 35% 28%, rgba(30, 64, 88, 0.94) 0%, rgba(11, 27, 40, 0.98) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(3, 21, 18, 0.92), 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 14px rgba(56, 189, 248, 0.4);
}

.btn-dash.is-ready {
  border-color: #5eead4;
  box-shadow: 0 0 0 3px rgba(3, 21, 18, 0.92), 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 2px 3px rgba(255, 255, 255, 0.24);
}

.btn-dash .btn-label,
.btn-dash .dash-label {
  z-index: 2;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #ffffff;
  text-shadow: 0 2px 0 #031512;
}

/* Dash / Stone-Throw radial cooldown sweep + remaining seconds overlay */
.btn-dash .cooldown-sweep {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
}

.btn-dash .cooldown-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 20, 18, 0.76);
  color: #facc15;
  font: 900 18px/1 var(--font-display);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: opacity 0.12s;
}

.btn-dash.on-cooldown {
  filter: saturate(0.5);
  border-color: rgba(148, 163, 184, 0.5);
}

.btn-dash.on-cooldown .cooldown-overlay {
  opacity: 1;
}

.key-hint-badge {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Emote Trigger (#emote-bar) & Quick Chat Popup (#emote-picker)
   (Close-up Mockup 4: circular dark-teal button with white "..." speech bubble above LƯỚT)
   -------------------------------------------------------------------------- */
#emote-bar {
  position: fixed;
  top: auto;
  left: auto;
  right: calc(max(18px, env(safe-area-inset-right, 0px)) + (var(--ctl-dash) - var(--ctl-emote)) / 2);
  bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + var(--ctl-dash) + 12px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: var(--z-picker);
  pointer-events: auto;
}

body.in-game #emote-bar {
  display: inline-flex;
}

body:not(.in-game) #emote-bar {
  display: none !important;
}

#emote-bar.on-emote-cooldown {
  opacity: 0.65;
  filter: grayscale(0.45);
}

.emote-quick-favorites,
.emote-toggle-badge {
  display: none !important;
}

.btn-emote {
  width: var(--ctl-emote);
  height: var(--ctl-emote);
  min-width: var(--ctl-emote);
  min-height: var(--ctl-emote);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(20, 88, 80, 0.94) 0%, rgba(7, 32, 28, 0.98) 100%);
  border: 2.5px solid rgba(94, 234, 212, 0.8);
  box-shadow: 0 0 0 3px rgba(3, 21, 18, 0.92), 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 2px 2px rgba(255, 255, 255, 0.2);
  opacity: var(--ctl-user-opacity, 0.84);
}

.btn-emote:hover,
.btn-emote:active,
.btn-emote[aria-expanded="true"] {
  opacity: 0.98;
  border-color: #facc15;
}

.emote-toggle-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.btn-emote .icon,
.btn-emote .chat-dots-svg {
  width: 24px;
  height: 24px;
}

/* Image 5 Bottom-Left: Quick Chat 2x3 Grid + Panda Reactions (#emote-picker) */
#emote-picker {
  position: fixed;
  top: auto;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + var(--ctl-dash) + var(--ctl-emote) + 18px);
  width: min(268px, calc(100vw - 32px));
  max-height: calc(100dvh - 140px);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(8, 28, 26, 0.96);
  border: 2px solid rgba(45, 212, 191, 0.55);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65);
  z-index: var(--z-picker);
}

@media (min-width: 901px) {
  body:not(.touch-input) #emote-picker {
    bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 106px);
  }
}

.emote-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(94, 234, 212, 0.2);
}

.emote-picker-title {
  font: 900 11px/1 var(--font-display);
  color: #5eead4;
  letter-spacing: 0.8px;
}

.emote-picker-close {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  font: 900 11px/1 var(--font-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quick-chat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#emote-picker .quick-chat-pill {
  min-height: 34px;
  padding: 6px 8px;
  background: rgba(17, 58, 53, 0.85);
  border: 1.5px solid rgba(94, 234, 212, 0.35);
  border-radius: 8px;
  color: #f8fafc;
  font: 800 12px/1.15 var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

#emote-picker .quick-chat-pill:hover,
#emote-picker .quick-chat-pill:active {
  background: rgba(20, 83, 75, 0.95);
  border-color: #facc15;
  transform: translateY(-1px);
}

.emote-faces-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(94, 234, 212, 0.18);
}

.emote-faces-strip .emote-choice {
  min-height: 44px;
  padding: 3px 2px;
  background: rgba(13, 42, 39, 0.75);
  border: 1px solid rgba(94, 234, 212, 0.25);
  border-radius: 8px;
  color: #cbd5e1;
  font: 700 9px/1.1 var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
}

.emote-faces-strip .emote-choice img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
}

.emote-faces-strip .emote-choice span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emote-choice.on-cooldown {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   4. Desktop keyboard hints (#key-hints) — Image 1 Bottom-Left: [W][A][S][D] • Di chuyển
   -------------------------------------------------------------------------- */
#key-hints {
  position: fixed;
  left: 16px;
  bottom: 18px;
  z-index: var(--z-hud);
  display: none;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

body.in-game:not(.touch-input) #key-hints {
  display: inline-flex;
}

#key-hints kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  margin: 0;
  border: 1.5px solid rgba(94, 234, 212, 0.42);
  border-bottom-width: 2.5px;
  border-radius: 6px;
  background: rgba(9, 32, 30, 0.88);
  color: #f8fafc;
  font: 800 11.5px/1 var(--font-mono);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.key-hints-label {
  margin-left: 4px;
  font: 700 12px/1 var(--font-body);
  color: rgba(226, 232, 240, 0.88);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------------------
   5. Spectator (ghost) banner — Rendered on Canvas top-center ("Bạn đã thành hồn ma")
   -------------------------------------------------------------------------- */
.spectator-banner {
  display: none !important;
}

/* --------------------------------------------------------------------------
   6. Toast
   -------------------------------------------------------------------------- */
#arcade-toast-container {
  position: fixed;
  top: calc(var(--hud-top) + var(--hud-bar-height) + var(--space-2));
  left: 50%;
  transform: translate(-50%, -12px);
  max-width: calc(100vw - 2 * var(--hud-edge));
  width: max-content;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(9, 32, 30, 0.94);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-arcade-md);
  color: var(--hud-text);
  font: 800 13px/1.3 var(--font-body);
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-toast);
  transition: transform var(--duration-normal) var(--ease-smooth), opacity var(--duration-normal);
}

#arcade-toast-container.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

#arcade-toast-container.toast-warn { border-color: var(--hud-danger); }
#arcade-toast-icon { display: inline-flex; color: var(--color-gold); }
#arcade-toast-container.toast-warn #arcade-toast-icon { color: var(--hud-danger); }
#arcade-toast-icon:empty { display: none; }

/* --------------------------------------------------------------------------
   7. Responsive HUD Media Queries (768px, 520px, 360px, Mobile Landscape)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --ctl-joystick: 136px;
    --ctl-knob: 52px;
    --ctl-dash: 94px;
    --ctl-item: 58px;
    --ctl-emote: 44px;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  :root {
    --ctl-joystick: 130px;
    --ctl-knob: 48px;
    --ctl-dash: 90px;
    --ctl-item: 56px;
    --ctl-emote: 48px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --ctl-joystick: 112px;
    --ctl-knob: 48px;
    --ctl-dash: 84px;
    --ctl-item: 58px;
    --ctl-emote: 48px;
  }
  #emote-bar {
    bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + var(--ctl-dash) + 8px);
  }
  #emote-picker {
    top: auto;
    right: calc(max(18px, env(safe-area-inset-right, 0px)) + var(--ctl-emote) + 10px);
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 24px);
  }
}

.rotate-phone-illustration .icon { width: 92px; height: 92px; color: var(--color-cyan-400); }
.dash-double-chevron .icon { width: 44px; height: 44px; }
.item-slot-icon .icon { width: 28px; height: 28px; }
.joy-dir-arrow .icon { width: 20px; height: 20px; }
.emote-picker-close { min-width: 44px; min-height: 44px; }
.quick-chat-btn, .emote-face-mini { min-height: 44px; }