/**
 * Matchington Mansion Studio Stylesheet
 * Warm Parquet & Brass Interior Parlor, Porcelain Cushion Tiles,
 * Flying Paper Plane Trajectories, and Illustrated SVG Room Renovation Canvas.
 */

.matchington-app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
  user-select: none;
  -webkit-user-select: none;
}

/* --- Mode Switcher Bar --- */
.mm-mode-bar {
  display: flex;
  gap: 8px;
  background: var(--board-bezel-bg, linear-gradient(180deg, #3b1320 0%, #220911 100%));
  border: 2px solid var(--board-bezel-border, #f59e0b);
  border-radius: 16px;
  padding: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.mm-mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: transparent;
  border: none;
  border-radius: 11px;
  padding: 7px 10px;
  color: #fde68a;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  min-height: 40px;
  transition: all 0.2s ease;
}

.mm-mode-btn.active {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  color: #ffffff;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4);
}

.mm-star-pill {
  background: rgba(69, 26, 3, 0.65);
  border: 1.5px solid #fde047;
  color: #fef08a;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 0.74rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* --- Content Wrapper --- */
.mm-content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 8px;
}

/* --- Warm Parlor Puzzle HUD --- */
.mm-hud {
  display: flex;
  flex-direction: column;
  background: var(--board-bezel-bg, linear-gradient(180deg, #3b1320 0%, #220911 100%));
  border: 2px solid var(--board-bezel-border, #f59e0b);
  border-radius: 16px;
  padding: 7px 12px;
  gap: 6px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.3);
}

.mm-hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mm-level-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
  border: 1.5px solid #fde68a;
  border-radius: 11px;
  padding: 4px 10px;
  min-width: 52px;
}

.mm-level-badge .lvl-lbl { font-size: 0.62rem; color: #fde68a; font-weight: 900; }
.mm-level-badge .lvl-num { font-size: 1.15rem; font-weight: 900; color: #ffffff; line-height: 1.05; }

.mm-goals-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.mm-goal-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(254, 243, 199, 0.14);
  border: 1.5px solid rgba(253, 230, 138, 0.35);
  border-radius: 20px;
  padding: 4px 9px;
  color: #fef3c7;
  font-weight: 900;
  font-size: 0.84rem;
}

.mm-goal-chip.done {
  background: rgba(16, 185, 129, 0.28);
  border-color: #34d399;
}

.mm-moves-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ec4899 0%, #9d174d 100%);
  border: 1.5px solid #fbcfe8;
  border-radius: 12px;
  padding: 4px 10px;
  min-width: 54px;
  box-shadow: 0 3px 0 #500724;
}

.mm-moves-badge.moves-low {
  background: linear-gradient(180deg, #ef4444, #991b1b);
  animation: movesPulse 1.1s infinite alternate ease-in-out;
}

.mm-moves-badge .moves-num { font-size: 1.22rem; font-weight: 900; color: #ffffff; line-height: 1; }
.mm-moves-badge .moves-lbl { font-size: 0.58rem; font-weight: 900; color: #fce7f3; }

.mm-score-strip {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 0.82rem;
  color: #fde68a;
}

.mm-score-strip .score-val { color: #ffffff; font-weight: 900; }

/* --- 8x8 Brass & Parquet Board --- */
.mm-board-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 2px 0;
}

.mm-grid {
  display: grid;
  grid-template-columns: repeat(var(--mm-cols, 8), 1fr);
  grid-template-rows: repeat(var(--mm-rows, 8), 1fr);
  gap: 5px;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  background: var(--board-bezel-bg, linear-gradient(180deg, #3b1320 0%, #220911 100%));
  border: 3.5px solid var(--board-bezel-border, #f59e0b);
  border-radius: 22px;
  padding: 8px;
  box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.55), 0 8px 0 rgba(0, 0, 0, 0.35), 0 14px 32px rgba(0, 0, 0, 0.45);
}

/* Warm Cream-Porcelain Cushion Tiles */
.mm-cell {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
  border: 1.5px solid #f59e0b;
  box-shadow: 0 3px 0 #92400e, inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
  touch-action: none;
}

.mm-cell.type-empty {
  background: rgba(0, 0, 0, 0.22);
  border-color: transparent;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.mm-cell.selected {
  transform: scale(1.1);
  background: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px #38bdf8, 0 6px 14px rgba(2, 132, 199, 0.5);
  z-index: 5;
}

.mm-cell.has-ice {
  background: linear-gradient(135deg, #e0f2fe 0%, #7dd3fc 100%);
  border: 2px solid #0284c7;
  box-shadow: 0 3px 0 #0369a1, inset 0 0 8px rgba(255, 255, 255, 0.8);
}

.mm-cell.shake {
  animation: shakeCell 0.3s ease-in-out;
}

/* Plush Multi-Tone Decor Item Accents */
.mm-cell.item-pillow { color: #0284c7; }
.mm-cell.item-teacup { color: #16a34a; }
.mm-cell.item-lamp { color: #d97706; }
.mm-cell.item-book { color: #7e22ce; }
.mm-cell.item-gem { color: #e11d48; }
.mm-cell.item-plant { color: #15803d; }

/* Boosters */
.mm-booster {
  animation: boosterPulse 1.6s infinite alternate ease-in-out;
}

.mm-booster.rocket-h, .mm-booster.rocket-v {
  background: linear-gradient(180deg, #fb923c, #c2410c);
  color: #ffffff;
  border-color: #ffedd5;
  box-shadow: 0 3px 0 #7c2d12;
}

.mm-booster.paper-plane {
  background: linear-gradient(180deg, #38bdf8, #0284c7);
  color: #ffffff;
  border-color: #e0f2fe;
  box-shadow: 0 3px 0 #075985;
}

.mm-booster.bomb {
  background: linear-gradient(180deg, #475569, #0f172a);
  color: #f87171;
  border-color: #ef4444;
  box-shadow: 0 3px 0 #020617;
}

.mm-booster.rainbow {
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
  color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 3px 0 #4c1d95;
}

.mm-obstacle.wood {
  background: linear-gradient(180deg, #b45309, #78350f);
  color: #fde68a;
  border: 2px solid #f59e0b;
  box-shadow: 0 3px 0 #451a03;
}

/* Flying Homing Paper Plane Animation */
.mm-flying-plane {
  position: fixed;
  width: 28px;
  height: 28px;
  color: #38bdf8;
  filter: drop-shadow(0 6px 12px rgba(2, 132, 199, 0.75));
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Footer Controls */
.mm-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.mm-ctrl-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--board-bezel-bg, linear-gradient(180deg, #3b1320 0%, #220911 100%));
  border: 2px solid var(--board-bezel-border, #f59e0b);
  border-radius: 14px;
  padding: 8px 14px;
  color: #fef3c7;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  min-height: 44px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
}

/* --- Illustrated Mansion Renovation View --- */
.mansion-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.room-nav-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.room-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(253, 230, 138, 0.3);
  border-radius: 12px;
  padding: 7px 12px;
  color: #fde68a;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.room-tab-btn.active {
  background: linear-gradient(135deg, #ec4899, #be185d);
  color: #ffffff;
  border-color: #fbcfe8;
}

.room-scene {
  flex: 1;
  position: relative;
  background: linear-gradient(180deg, #2e1018 0%, #1a080d 100%);
  border: 3px solid var(--board-bezel-border, #f59e0b);
  border-radius: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  min-height: 0;
  overflow: hidden;
}

/* Interactive Illustrated SVG Room Canvas Stage */
.room-canvas-stage {
  position: relative;
  width: 100%;
  height: clamp(165px, 28vh, 230px);
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(253, 230, 138, 0.35);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.mm-room-canvas-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.svg-furniture-group {
  cursor: pointer;
  transition: filter 0.2s ease;
}

.svg-furniture-group:hover {
  filter: brightness(1.15);
}

/* Floating Interactive Pins over Furniture inside SVG Room */
.room-floating-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}

.room-floating-pin.can-build {
  background: linear-gradient(135deg, #fde047, #d97706);
  color: #451a03;
  animation: floatingPinPulse 1.5s infinite ease-in-out;
}

.room-floating-pin.is-done {
  background: linear-gradient(135deg, #10b981, #047857);
  color: #ffffff;
}

@keyframes floatingPinPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -58%) scale(1.1); }
}

.room-header-overlay {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
}

.room-header-overlay h2 {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fef3c7;
  margin: 0;
}

.room-header-overlay p {
  font-size: 0.74rem;
  color: #fde68a;
  opacity: 0.85;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact 2x2 Furniture Strip below Room Canvas */
.room-hotspots {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  overflow-y: auto;
  align-content: start;
}

.furniture-spot {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(253, 230, 138, 0.25);
  border-radius: 12px;
  padding: 7px 9px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.furniture-spot:hover {
  border-color: #fde047;
}

.spot-pin {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.spot-pin.can-build {
  background: linear-gradient(135deg, #fde047, #eab308);
  color: #451a03;
}

.spot-pin.is-done {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
}

.spot-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.spot-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spot-choice {
  font-size: 0.68rem;
  color: #fde68a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mansion-footer-cta {
  display: flex;
  justify-content: center;
}

.mansion-play-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  color: #ffffff;
  border: 2px solid #fef3c7;
  border-radius: 14px;
  padding: 10px;
  font-size: 0.92rem;
  font-weight: 900;
  cursor: pointer;
  min-height: 44px;
  box-shadow: 0 4px 0 #78350f;
}

/* Modals */
.mm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 5, 10, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.mm-modal-card {
  background: linear-gradient(165deg, #3b1320 0%, #1c070e 100%);
  border: 2.5px solid #f59e0b;
  border-radius: 24px;
  width: 100%;
  max-width: 400px;
  padding: 22px 18px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65);
  text-align: center;
}

.mm-modal-header h2 { font-size: 1.35rem; font-weight: 900; color: #fef3c7; margin: 0 0 4px; }
.mm-modal-header p { font-size: 0.85rem; color: #fde68a; margin: 0; }

.reno-choices-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
}

.reno-choice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid rgba(253, 230, 138, 0.25);
  border-radius: 14px;
  padding: 10px;
  text-align: left;
}

.reno-choice-card.selected {
  border-color: #fde047;
  background: rgba(245, 158, 11, 0.22);
}

.choice-swatch {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.choice-details {
  flex: 1;
}

.choice-details strong { display: block; font-size: 0.88rem; color: #ffffff; }
.choice-details p { font-size: 0.75rem; color: #fde68a; margin: 2px 0 0; }

.choice-select-btn {
  background: linear-gradient(180deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.reno-choice-card.selected .choice-select-btn {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.reno-stars-status {
  font-size: 0.9rem;
  color: #fde047;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mm-vic-trophy { color: #fde047; margin-bottom: 8px; }

.mm-vic-rewards {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 14px 0;
}

.reward-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(253, 230, 138, 0.35);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 0.86rem;
}

.reward-pill.star { color: #fde047; }
.reward-pill.coins { color: #34d399; }

.mm-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mm-modal-btn {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  font-size: 0.98rem;
  font-weight: 900;
  cursor: pointer;
  border: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mm-modal-btn.primary {
  background: linear-gradient(180deg, #f59e0b, #b45309);
  color: #ffffff;
  box-shadow: 0 4px 0 #78350f;
}

.mm-modal-btn.secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #fef3c7;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
}