* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #87ceeb 0%, #98fb98 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.game-wrapper {
  background: white;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  max-width: 800px;
  width: 100%;
}

header {
  text-align: center;
  margin-bottom: 16px;
}

.coin-bar {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 16px;
  background: #fff9c4;
  border: 3px solid #ffc107;
  border-radius: 20px;
  font-weight: bold;
  font-size: 1rem;
  color: #e65100;
}

header h1 {
  font-size: 2rem;
  color: #2d5a27;
  margin-bottom: 8px;
}

header p {
  color: #555;
  font-size: 1.05rem;
}

.viewport-wrap {
  overflow: hidden;
  border-radius: 16px;
  border: 4px solid #4a6741;
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
  background: #3d5c3a;
  position: relative;
  touch-action: none;
}

.viewport {
  position: relative;
  overflow: visible;
  background: #3d5c3a;
  image-rendering: pixelated;
  will-change: transform;
  transition: transform 0.08s linear;
}

.grid {
  display: grid;
  gap: 0;
  background: #3d5c3a;
  position: relative;
}

.tile {
  position: relative;
  image-rendering: pixelated;
  overflow: hidden;
}

/* Tiles estilo Pokémon */
.tile.grass {
  background-color: #58a832;
  background-image:
    linear-gradient(45deg, #4e9628 25%, transparent 25%),
    linear-gradient(-45deg, #4e9628 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #62b838 75%),
    linear-gradient(-45deg, transparent 75%, #62b838 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.tile.grass-dark {
  background-color: #4a9630;
  background-image: radial-gradient(circle, #3d8028 1px, transparent 1px);
  background-size: 6px 6px;
}

.tile.road {
  background: #5a5a5a;
  box-shadow: inset 0 0 0 2px #444;
}

.tile.road-h::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%; top: 50%; height: 14%;
  transform: translateY(-50%);
  background: #ffeb3b;
  border-radius: 1px;
  z-index: 1;
}

.tile.road-v::after {
  content: '';
  position: absolute;
  top: 10%; bottom: 10%; left: 50%; width: 14%;
  transform: translateX(-50%);
  background: #ffeb3b;
  border-radius: 1px;
  z-index: 1;
}

.tile.road-cross {
  background: #505050;
}

.tile.road-cross::before {
  content: '';
  position: absolute;
  left: 10%; right: 10%; top: 50%; height: 16%;
  transform: translateY(-50%);
  background: #ffeb3b;
  z-index: 1;
}

.tile.road-cross::after {
  content: '';
  position: absolute;
  top: 10%; bottom: 10%; left: 50%; width: 16%;
  transform: translateX(-50%);
  background: #ffeb3b;
  z-index: 1;
}

.tile.sidewalk {
  background: #c4b498;
  background-image: repeating-linear-gradient(
    90deg, transparent, transparent 7px, #b8a88c 7px, #b8a88c 8px
  );
  box-shadow: inset 0 0 0 2px #a89878;
}

.tile.path {
  background: #d9cbb0;
  box-shadow: inset 0 0 0 1px #c4b59c;
}

.tile.tree {
  background: #5a9e3e;
  background-image: radial-gradient(circle at 30% 40%, #4a8e32 2px, transparent 2px);
}

.tile-deco {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  z-index: 2;
  pointer-events: none;
}

.tile-water {
  background: #4fc3f7;
  animation: water-shine 2s ease infinite alternate;
}

@keyframes water-shine {
  from { filter: brightness(1); }
  to   { filter: brightness(1.15); }
}


.tile.fence {
  background: #8d6e63;
  box-shadow: inset 0 0 0 3px #6d4c41;
}

.tile-building,
.tile.building {
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 0 #000;
}

.tile.building-anchor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.tile.building-part {
  opacity: 0.95;
}

.tile.building-part::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  pointer-events: none;
}

.tile-building .b-emoji,
.tile.building .b-emoji {
  font-size: 1.2rem;
  line-height: 1;
}

.tile-building .b-label,
.tile.building .b-label {
  font-size: 0.5rem;
  line-height: 1;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

.tile.building-entrance .door-mark {
  font-size: 0.55rem;
  line-height: 1;
  opacity: 0.9;
}

.editor-dog-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}

.tile.house     { background: linear-gradient(#ff9a76, #e07a56); }
.tile.house-2   { background: linear-gradient(#7ec87e, #5aa85a); }
.tile.house-3   { background: linear-gradient(#ff6b9d, #e04a7d); }
.tile.bh-blue   { background: linear-gradient(#64b5f6, #1e88e5); }
.tile.bh-green  { background: linear-gradient(#81c784, #43a047); }
.tile.bh-pink   { background: linear-gradient(#f48fb1, #ec407a); }
.tile.mcdonalds { background: linear-gradient(#e4002b, #b8001f); color: #ffc72c; }
.tile.supermarket { background: linear-gradient(#42a5f5, #1565c0); }
.tile.football  { background: linear-gradient(#43a047, #2e7d32); }
.tile.shopping  { background: linear-gradient(#ab47bc, #7b1fa2); }
.tile.park      { background: linear-gradient(#aed581, #7cb342); }
.tile.car       { background: #78909c; }
.tile.portal {
  animation: portal-glow 1.5s ease infinite alternate;
}

.tile.building.portal {
  background: linear-gradient(#81c784, #388e3c) !important;
  border: 2px solid #fff;
}
.tile-garage    { background: #90a4ae; }

@keyframes portal-glow {
  from { box-shadow: inset 0 0 8px #fff176; }
  to   { box-shadow: inset 0 0 16px #ff6f00; }
}

.tile.wall  { background: #5d4037; box-shadow: inset 0 0 0 2px #3e2723; }
.tile.floor { background: #fff8e1; }
.tile.floor.decor { background: #fff3e0; }
.tile.grass-dark.decor {
  background-color: #4a9630;
  background-image: radial-gradient(circle, #3d8028 1px, transparent 1px);
  background-size: 6px 6px;
}

.tile.park-lake {
  background-color: #1565c0;
  background-image:
    radial-gradient(circle, #42a5f5 1.5px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 45%, rgba(0, 0, 0, 0.08) 100%);
  background-size: 7px 7px, 100% 100%;
  box-shadow:
    inset 0 0 0 2px #0d47a1,
    inset 0 2px 6px rgba(255, 255, 255, 0.2);
}

.tile.door {
  background: #4e342e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.tile.door .tile-icon {
  font-size: 0.55rem;
  font-weight: bold;
  background: #ff9800;
  padding: 2px 4px;
  border-radius: 4px;
}

.tile.door .door-label {
  font-size: 0.45rem;
  margin-top: 2px;
  opacity: 0.8;
}

.tile-icon {
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.slot-plus {
  font-size: 1.4rem;
  font-weight: bold;
  color: #9e9e9e;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.tile.furniture-slot.empty,
.tile.furniture-slot.filled,
.tile.furniture-slot.can-place,
.tile.shop-slot.empty,
.tile.shop-slot.filled,
.tile.shop-slot.can-place {
  /* classes applied via JS */
}

.tile.furniture-slot.empty {
  background: #efebe9;
  border: 2px dashed #bcaaa4;
}

.tile.furniture-slot.filled {
  background: #fff8e1;
  border: 2px solid #d7ccc8;
}

.tile.furniture-slot.can-place,
.tile.shop-slot.can-place {
  animation: pulse 0.8s ease infinite alternate;
}

.tile.shop-slot.empty {
  background: #e0e0e0;
  border: 2px dashed #9e9e9e;
}

.tile.shop-slot.filled {
  border: 2px solid rgba(255,255,255,0.5);
}

.viewport-wrap.interior-mode {
  border-color: #5d4037;
}

@keyframes pulse {
  from { box-shadow: inset 0 0 0 0 rgba(76, 175, 80, 0.6); }
  to   { box-shadow: inset 0 0 12px 4px rgba(76, 175, 80, 0.9); }
}

/* Personagem estilo Pokémon */
.player-sprite {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
  transition: none;
  will-change: transform;
}

.dogs-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}

.trees-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 35;
}

.tree-sprite {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
  pointer-events: none;
}

.dog-sprite {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  z-index: 40;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
  will-change: left, top;
}

.dog-sprite.walking {
  animation: dog-bob 0.25s steps(2) infinite;
}

@keyframes dog-bob {
  0%   { scale: 1; translate: 0 0; }
  100% { scale: 1.08; translate: 0 -2px; }
}

.player-sprite .sprite-body {
  width: 100%;
  height: 100%;
  position: relative;
}

.player-sprite .sprite-body::before {
  content: '';
  position: absolute;
  left: 50%; top: 5px;
  transform: translateX(-50%);
  width: 18px; height: 18px;
  background: #ffcc80;
  border-radius: 50%;
  border: 2px solid #e65100;
  box-shadow: 0 0 0 2px #fff;
}

.player-sprite .sprite-body::after {
  content: '';
  position: absolute;
  left: 50%; top: 22px;
  transform: translateX(-50%);
  width: 22px; height: 14px;
  background: var(--player-color, #42a5f5);
  border-radius: 4px 4px 2px 2px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

.players-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 45;
}

.remote-player {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 45;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s linear;
}

.remote-player .remote-name {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: bold;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--remote-color, #ef5350);
  border-radius: 6px;
  padding: 1px 4px;
  color: #333;
}

.remote-player .remote-avatar {
  font-size: 1.35rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.remote-player .remote-emote {
  position: absolute;
  top: -22px;
  font-size: 1rem;
  animation: emote-pop 1.6s ease-out forwards;
}

.account-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.account-bar #account-avatar-display {
  font-size: 1.4rem;
}

.account-bar #account-name-display {
  font-weight: bold;
  color: #2d5a27;
}

.account-note {
  display: block;
  width: 100%;
  font-size: 0.72rem;
  color: #777;
}

.multiplayer-panel {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #e3f2fd;
  border: 3px solid #42a5f5;
  text-align: center;
}

.mp-title {
  font-weight: bold;
  color: #1565c0;
  margin-bottom: 4px;
  font-size: 0.95rem;
}

.mp-status {
  text-align: center;
  font-size: 0.88rem;
  color: #1565c0;
}

.mp-status.mp-error {
  color: #c62828;
}

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.account-modal.hidden {
  display: none;
}

.account-box {
  background: white;
  border-radius: 20px;
  padding: 22px;
  max-width: 360px;
  width: 100%;
  border: 4px solid #43a047;
  text-align: center;
}

.account-box h2 {
  margin-bottom: 8px;
  color: #2d5a27;
}

.account-name-input {
  width: 100%;
  padding: 10px 12px;
  margin: 12px 0;
  border: 2px solid #81c784;
  border-radius: 12px;
  font-size: 1.1rem;
}

.account-label {
  font-size: 0.85rem;
  font-weight: bold;
  margin: 8px 0 4px;
}

.account-pick-row,
.account-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}

.account-pick-btn {
  font-size: 1.6rem;
  width: 48px;
  height: 48px;
  border: 3px solid #ccc;
  border-radius: 12px;
  background: white;
  cursor: pointer;
}

.account-pick-btn.selected {
  border-color: #43a047;
  background: #e8f5e9;
}

.account-color-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #ccc;
  cursor: pointer;
}

.account-color-btn.selected {
  box-shadow: 0 0 0 3px #333;
}

.player-sprite.facing-up .sprite-body::before { top: 3px; }
.player-sprite.facing-down .sprite-body::before { top: 7px; }
.player-sprite.facing-left .sprite-body::before { transform: translateX(calc(-50% - 2px)); }
.player-sprite.facing-right .sprite-body::before { transform: translateX(calc(-50% + 2px)); }

.player-sprite.in-car .sprite-body::before,
.player-sprite.in-car .sprite-body::after { display: none; }

.player-sprite .car-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  pointer-events: none;
}

.player-sprite.in-car .car-overlay.hidden {
  display: none;
}

.player-sprite.walking .sprite-body {
  animation: walk-bob 0.2s steps(2) infinite;
}

@keyframes walk-bob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

.player-sprite.emote-dance {
  animation: dance 0.4s ease infinite alternate;
}

@keyframes dance {
  from { transform: rotate(-8deg); }
  to   { transform: rotate(8deg); }
}

.emote-bubble {
  position: fixed;
  background: white;
  border: 3px solid #ff9800;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 2rem;
  z-index: 200;
  pointer-events: none;
  transform: translate(-50%, -100%);
  animation: bubble-pop 2s ease forwards;
}

.emote-bubble.hidden { display: none; }

@keyframes bubble-pop {
  0%   { opacity: 0; transform: translate(-50%, -80%) scale(0.5); }
  15%  { opacity: 1; transform: translate(-50%, -110%) scale(1.1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(0.9); }
}

.brookhaven-panel,
.furniture-panel,
.shop-builder {
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
}

.brookhaven-panel {
  background: #e3f2fd;
  border: 3px solid #1976d2;
}

.furniture-panel {
  background: #fff3e0;
  border: 3px solid #ff9800;
}

.shop-builder {
  background: #f3e5f5;
  border: 3px solid #9c27b0;
}

.shopping-panel {
  background: #f3e5f5;
  border: 3px solid #9c27b0;
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
}

.shopping-panel.hidden,
.furniture-store-modal.hidden,
.park-panel.hidden,
.market-panel.hidden { display: none; }

.furniture-store-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.furniture-store-modal:not(.hidden) {
  pointer-events: auto;
}

.furniture-store-window {
  position: relative;
  background: white;
  border: 5px solid #ff9800;
  border-radius: 20px;
  padding: 16px 14px 14px;
  max-width: 360px;
  width: 92%;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.modal-close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #ffcdd2;
  color: #c62828;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  z-index: 2;
}

.modal-close-btn:hover {
  background: #ef9a9a;
  transform: scale(1.08);
}

.furniture-store-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  overflow-y: auto;
  padding: 4px 2px 2px;
  margin-top: 4px;
}

.furniture-store-list .market-item-btn {
  min-width: 72px;
}

.tile.house-furnished .house-furn-icon {
  font-size: clamp(1.6rem, 85%, 2.4rem);
  line-height: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1.1);
}

.furniture-store-panel {
  display: none;
}

.bag-section-title {
  font-weight: bold;
  font-size: 0.85rem;
  margin: 8px 0 4px;
  text-align: center;
}

.eraser-btn {
  display: block;
  margin: 10px auto 0;
  width: 100%;
  max-width: 200px;
}

.eraser-btn.selected {
  background: #ffcdd2;
  border-color: #e53935;
}

.tile.placeable-floor.can-place {
  outline: 2px dashed #ff9800;
  cursor: pointer;
}

.tile.placeable-floor.eraser-target,
.tile.house-furnished.eraser-target {
  outline: 2px dashed #e53935;
  cursor: pointer;
}

.tile.shop-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 0.55rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

.tile.shop-display .shop-label {
  font-size: 0.45rem;
  line-height: 1;
}

.tile.shop-display.furniture-store {
  background: linear-gradient(#ffcc80, #ff9800);
  cursor: pointer;
}

.bag-item-btn.selected {
  background: #fff9c4;
  border-color: #ff9800;
}

.park-panel {
  background: #e8f5e9;
  border: 3px solid #7cb342;
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
}

.market-panel {
  background: #e3f2fd;
  border: 3px solid #42a5f5;
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
}

.bag-panel {
  background: #fff8e1;
  border: 3px solid #ffb300;
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
}

.bag-panel.hidden { display: none; }

.park-games-list,
.market-list,
.bag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.park-game-btn,
.market-item-btn,
.bag-item-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  font-size: 1.1rem;
}

.market-item-btn strong,
.bag-item-btn strong {
  font-size: 0.65rem;
  color: #e65100;
}

.market-item-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.panel-note {
  text-align: center;
  font-size: 0.8rem;
  color: #666;
  margin-top: 8px;
}

.panel-note.hidden { display: none; }

.tile.game-tile {
  background: linear-gradient(#c8e6c9, #81c784);
  cursor: pointer;
}

.minigame-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 20px;
  padding: 20px;
  z-index: 120;
  max-width: 340px;
  width: 92%;
  border: 5px solid #7cb342;
  text-align: center;
}

.minigame-box.hidden { display: none; }

.minigame-box h2 { margin-bottom: 8px; font-size: 1.4rem; }

.minigame-hint {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 12px;
  min-height: 1.2em;
}

.minigame-area {
  min-height: 140px;
  margin-bottom: 12px;
}

.minigame-tap-btn {
  font-size: 4rem;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #ccc;
  background: #f5f5f5;
  cursor: pointer;
  transition: transform 0.1s, background 0.2s;
}

.minigame-tap-btn.ready {
  background: #c8e6c9;
  border-color: #43a047;
  transform: scale(1.08);
  box-shadow: 0 0 20px #81c784;
}

.minigame-field {
  position: relative;
  width: 100%;
  height: 140px;
  background: #e8f5e9;
  border-radius: 12px;
  overflow: hidden;
}

.minigame-dog-btn {
  position: absolute;
  font-size: 2rem;
  width: 56px;
  height: 56px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.minigame-balloons {
  font-size: 2rem;
  letter-spacing: 4px;
  margin-bottom: 12px;
}

.minigame-options {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.minigame-area:has(.minigame-slide-field) {
  min-height: 250px;
}

.minigame-slide-field {
  position: relative;
  width: 100%;
  height: 240px;
  background: linear-gradient(180deg, #64b5f6 0%, #90caf9 38%, #b3e5fc 62%, #c8e6c9 100%);
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid #42a5f5;
}

.slide-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.slide-cloud {
  position: absolute;
  left: 105%;
  white-space: nowrap;
  animation: slide-drift-left linear forwards;
}

.slide-monster {
  position: absolute;
  left: 105%;
  font-size: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  pointer-events: auto;
  animation: slide-drift-left linear forwards;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  transition: transform 0.15s, opacity 0.15s;
}

@keyframes slide-drift-left {
  to { left: -22%; }
}

.slide-ramp {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58%;
  height: 82%;
  z-index: 2;
  pointer-events: none;
}

.slide-ramp-ladder {
  position: absolute;
  top: 0;
  left: 0;
  width: 28%;
  height: 34%;
  background: repeating-linear-gradient(
    90deg,
    #78909c 0 6px,
    #546e7a 6px 12px
  );
  border: 3px solid #455a64;
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.15);
}

.slide-ramp-ladder::after {
  content: '\1F6DD';
  position: absolute;
  top: -4px;
  left: 6px;
  font-size: 1.1rem;
}

.slide-ramp-surface {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    205deg,
    #ffe082 0%,
    #ffca28 22%,
    #ffb300 48%,
    #ff8f00 72%,
    #ef6c00 100%
  );
  clip-path: polygon(0 0, 0 100%, 100% 100%, 62% 8%);
  border-right: 5px solid #e65100;
  box-shadow:
    inset 12px -10px 24px rgba(0, 0, 0, 0.12),
    inset -8px 8px 16px rgba(255, 255, 255, 0.25);
}

.slide-ramp-shine {
  position: absolute;
  left: 8%;
  bottom: 12%;
  width: 18%;
  height: 55%;
  background: linear-gradient(200deg, rgba(255, 255, 255, 0.45), transparent 70%);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 60% 0);
  pointer-events: none;
}

.slide-player {
  position: absolute;
  left: 14%;
  bottom: 16%;
  font-size: 1.85rem;
  z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
  animation: slide-player-bob 0.55s ease-in-out infinite alternate;
}

@keyframes slide-player-bob {
  from { transform: translate(0, 0) rotate(8deg); }
  to { transform: translate(5px, 3px) rotate(12deg); }
}

.slide-timer {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #42a5f5;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: bold;
  color: #1565c0;
  pointer-events: none;
}

.slide-monsters {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.slide-monster:active {
  transform: scale(1.15);
}

.slide-monster.defeated {
  transform: scale(1.6);
  opacity: 0;
}

.panel-title, .shop-builder-title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.panel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.panel-btn {
  padding: 8px 14px;
  border: 3px solid #90caf9;
  border-radius: 14px;
  background: white;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: bold;
  transition: transform 0.1s;
}

.panel-btn:hover { transform: scale(1.05); }
.panel-btn.active { background: #bbdefb; border-color: #1565c0; }

.furniture-list, .shop-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.furniture-btn, .shop-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 3px solid #ccc;
  border-radius: 14px;
  background: white;
  cursor: pointer;
  font-size: 1.4rem;
  transition: transform 0.1s;
}

.furniture-btn small, .shop-btn small {
  font-size: 0.65rem;
  color: #555;
  font-weight: bold;
}

.furniture-btn.selected, .shop-btn.selected {
  background: #fff9c4;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.message-box {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 24px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 100;
  max-width: 340px;
  width: 90%;
  border: 5px solid #ff9800;
}

.message-box.hidden { display: none; }
.message-icon { font-size: 4rem; margin-bottom: 12px; }
.message-box h2 { color: #333; font-size: 1.6rem; margin-bottom: 12px; }
.message-box p { color: #555; font-size: 1.15rem; line-height: 1.5; margin-bottom: 20px; }

.message-box button {
  background: #4caf50;
  color: white;
  border: none;
  padding: 14px 32px;
  font-size: 1.2rem;
  border-radius: 50px;
  cursor: pointer;
  font-weight: bold;
}

.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.controls-row { display: flex; gap: 12px; }

.ctrl-btn {
  width: 64px; height: 64px;
  font-size: 1.8rem;
  border: none;
  border-radius: 16px;
  background: #fff3e0;
  border: 3px solid #ff9800;
  cursor: pointer;
  transition: transform 0.1s;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.ctrl-btn:active { transform: scale(0.92); background: #ffcc80; }

.ctrl-btn.enter-btn {
  width: 72px;
  background: #c8e6c9;
  border-color: #4caf50;
  font-size: 1.4rem;
}

footer {
  text-align: center;
  margin-top: 14px;
  font-size: 1rem;
  color: #444;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.editor-open-btn {
  padding: 10px 20px;
  border: 3px solid #ff9800;
  border-radius: 14px;
  background: #fff3e0;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.1s;
}

.editor-open-btn:hover { transform: scale(1.04); }
.editor-open-btn.hidden { display: none; }

.editor-panel {
  margin-top: 14px;
  padding: 12px;
  border-radius: 16px;
  background: #e8f5e9;
  border: 3px solid #43a047;
}

.editor-panel.hidden { display: none; }

.editor-target-switch {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

.editor-target-btn {
  flex: 1;
  max-width: 140px;
  font-size: 0.82rem;
  padding: 10px 12px;
  border: 3px solid #81c784;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  font-weight: bold;
}

.editor-target-btn.selected {
  background: #fff9c4;
  border-color: #ff9800;
}

.editor-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

.editor-brush {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border: 3px solid #ccc;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  font-size: 1.2rem;
  min-width: 58px;
}

.editor-brush small {
  font-size: 0.6rem;
  font-weight: bold;
  color: #555;
}

.editor-brush.selected {
  background: #fff9c4;
  border-color: #ff9800;
  transform: scale(1.06);
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.editor-actions .play-btn {
  background: #c8e6c9;
  border-color: #43a047;
}

.editor-note {
  text-align: center;
  font-size: 0.8rem;
  color: #555;
  margin-top: 10px;
  line-height: 1.4;
}

.tile.editor-tile {
  cursor: crosshair;
}

.tile.editor-tile:hover {
  outline: 2px solid #ff9800;
  outline-offset: -2px;
}

.controls.hidden { display: none; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

.overlay.hidden { display: none; }

@media (max-width: 640px) {
  body {
    padding: 8px;
    align-items: flex-start;
  }

  .game-wrapper {
    padding: 12px;
    padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
  }

  header h1 {
    font-size: 1.35rem;
  }

  header p {
    font-size: 0.88rem;
    line-height: 1.35;
  }

  .viewport-wrap {
    width: 100% !important;
    height: min(48vh, 340px);
    min-height: 220px;
  }

  .controls {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    margin: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    border-top: 4px solid #ff9800;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
  }

  .controls-row {
    gap: 10px;
  }

  .ctrl-btn {
    width: 68px;
    height: 68px;
    font-size: 1.9rem;
    border-radius: 18px;
  }

  .ctrl-btn.enter-btn {
    width: 76px;
    height: 76px;
    font-size: 1.5rem;
  }

  footer {
    margin-top: 8px;
    font-size: 0.85rem;
    padding-bottom: 4px;
  }

  .bag-panel,
  .brookhaven-panel,
  .park-panel,
  .market-panel,
  .shopping-panel {
    font-size: 0.9rem;
  }

  .panel-btn {
    min-height: 44px;
  }
}