.aero-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "weather weather weather weather weather clock clock clock calendar calendar calendar calendar"
    "music   music   music   music   music   music music bubbles bubbles bubbles bubbles bubbles"
    "minesweeper minesweeper minesweeper minesweeper pond pond pond pond pond pond pond pond";
  gap: 18px;
  width: 100%;
}

.bento-card {
  position: relative;
  background: var(--glass-bg);
  border: 2px solid var(--glass-border);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  overflow: hidden;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.bento-card:hover {
  transform: translateY(-2px);
  border-color: #ffffff;
}

[data-theme="dark"] .bento-card:hover {
  border-color: rgba(56, 189, 248, 0.8);
}

.bento-glass-shine {
  position: absolute;
  top: 1px;
  left: 3px;
  right: 3px;
  height: 25%;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 100%);
  border-radius: 13px 13px 45% 45%;
  pointer-events: none;
  z-index: 5;
}

[data-theme="dark"] .bento-glass-shine {
  height: 22%;
  background: linear-gradient(180deg,
      rgba(56, 189, 248, 0.25) 0%,
      rgba(56, 189, 248, 0) 100%);
}

.bento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bento-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--aero-blue-dark);
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  padding: 3px 10px;
  border-radius: 999px;
  text-shadow: var(--ink-emboss);
  text-transform: uppercase;
}

[data-theme="dark"] .bento-tag {
  color: var(--aero-blue-bright);
}

.bento-location {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink-title);
  text-shadow: var(--ink-emboss);
  display: flex;
  align-items: center;
  gap: 4px;
}

.bento-weather {
  grid-area: weather;
}

.bento-music {
  grid-area: music;
  text-decoration: none;
  color: inherit;
}

.bento-bubbles {
  grid-area: bubbles;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  overflow: visible;
  transition: none;
  text-align: center;
  padding: 16px 14px;
}

.bento-bubbles .bento-glass-shine {
  display: none !important;
}

.standalone-clock-widget {
  grid-area: clock;
}

.bento-calendar {
  grid-area: calendar;
}

.bento-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  flex: 1 1 auto;
}

.bento-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.bento-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bento-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink-title);
  text-shadow: var(--ink-emboss);
  line-height: 1.25;
}

.bento-sub {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-body);
  line-height: 1.35;
}

.bento-icon-sphere {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--glass-bevel), var(--glass-shadow);
  backdrop-filter: blur(7px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(2, 132, 199, 0.6),
    0 6px 18px rgba(2, 132, 199, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] .bento-icon-sphere {
  background: radial-gradient(circle at 32% 28%,
      rgba(125, 211, 252, 0.38) 0%,
      rgba(14, 116, 144, 0.32) 32%,
      rgba(8, 47, 73, 0.78) 68%,
      rgba(2, 24, 40, 0.95) 100%);
  border: 1.5px solid rgba(125, 211, 252, 0.55);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.38),
    inset 0 -4px 8px rgba(2, 132, 199, 0.55),
    inset 2px 0 5px rgba(56, 189, 248, 0.18),
    0 0 10px rgba(56, 189, 248, 0.18),
    0 6px 20px rgba(0, 0, 0, 0.5);
}

.bento-bubbles .bento-card-body {
  flex-direction: column;
  gap: 8px;
}

.bento-bubbles .bento-body {
  align-items: center;
}

.bento-bubbles .bento-sub {
  font-size: 0.74rem;
  max-width: 180px;
}

.bento-bubbles:hover {
  transform: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.bento-bubbles:hover .bento-icon-sphere {
  transform: scale(1.12) rotate(8deg);
}

.standalone-clock-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  position: relative;
}

.standalone-clock-widget .clock-face-wrap {
  width: 140px;
  height: 140px;
  margin: 0 auto;
  padding: 5px;
  position: relative;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.standalone-clock-widget .clock-face-wrap:hover {
  transform: scale(1.04);
}

.standalone-clock-widget .clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(186, 230, 253, 0.45) 45%,
      rgba(56, 189, 248, 0.25) 100%);
  border: 2.5px solid var(--glass-border);
  box-shadow:
    var(--glass-bevel),
    0 12px 32px rgba(2, 132, 199, 0.28),
    inset 0 2px 5px rgba(255, 255, 255, 0.85);

}

[data-theme="dark"] .standalone-clock-widget .clock-face {
  background: radial-gradient(circle at 35% 30%,
      rgba(14, 45, 68, 0.9) 0%,
      rgba(8, 30, 48, 0.8) 50%,
      rgba(2, 132, 199, 0.25) 100%);
  box-shadow:
    var(--glass-bevel),
    0 12px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.digital-readout-standalone {
  padding: 5px 15px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--glass-bevel), var(--glass-shadow);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink-title);
  text-shadow: var(--ink-emboss);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.weather-avatar-frame {
  width: 90px;
  height: 90px;
  border-radius: 16px;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(186, 230, 253, 0.8) 100%);
  border: 1.5px solid #ffffff;
  box-shadow:
    inset 0 1px 2px #ffffff,
    0 4px 12px rgba(2, 132, 199, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

[data-theme="dark"] .weather-avatar-frame {
  background: linear-gradient(135deg,
      rgba(14, 45, 68, 0.9) 0%,
      rgba(4, 18, 30, 0.8) 100%);
  border-color: rgba(56, 189, 248, 0.45);
}

.weather-avatar-frame #weatherImage,
.weather-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.weather-avatar-frame #weatherEmoji {
  font-size: 34px;
  line-height: 1;
}

.weather-temp-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weather-temp-num {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink-title);
  text-shadow: var(--ink-emboss);
  line-height: 1.2;
}

.weather-desc {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--aero-blue-dark);
}

[data-theme="dark"] .weather-desc {
  color: var(--aero-blue-bright);
}

.weather-stats-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.w-stat {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--card-subbox-bg);
  border: 1px solid var(--glass-border);
  color: var(--ink-title);
  box-shadow:
    inset 0 1px 1px #ffffff,
    0 2px 6px rgba(0, 0, 0, 0.05);
}

.bento-music .bento-card-body {
  margin-top: -5px;
  margin-left: 3px;
}

.bento-music .aero-cd-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.bento-music .aero-cd-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: url('../../assets/icons/cd.png') center / 120% no-repeat;
  border: none;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 0 8px rgba(255, 255, 255, 0.5);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease;
}

.is-playing .aero-cd-disc,
.aero-cd-disc.playing {
  animation: spinCd 6s linear infinite;
}

@keyframes spinCd {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.bento-music .aero-cd-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 45deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.45) 30deg,
      transparent 60deg,
      rgba(56, 189, 248, 0.35) 120deg,
      transparent 180deg,
      rgba(255, 255, 255, 0.35) 240deg,
      transparent 300deg);
  pointer-events: none;
}

.bento-music .aero-cd-center {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid #ffffff;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  background: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.bento-minesweeper {
  grid-area: minesweeper;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  padding: 10px 14px;
}

.bento-minesweeper .bento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 260px;
  box-sizing: border-box;
}

.bento-minesweeper .bento-tag {
  margin-left: auto;
}

.bento-minesweeper .ms-control-bar,
.bento-minesweeper .ms-board-container,
.bento-minesweeper .ms-card-footer {
  width: 100%;
  max-width: 260px;
  box-sizing: border-box;
}

.ms-mode-switch {
  display: none;
  align-items: center;
  background: var(--card-subbox-bg);
  border: 1px solid var(--glass-border);
  padding: 2px;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px),
(pointer: coarse) {
  .ms-mode-switch {
    display: inline-flex;
  }
}

.ms-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  color: var(--ink-subtitle);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ms-mode-tab.active {
  background: linear-gradient(180deg, #ffffff 0%, rgba(186, 230, 253, 0.95) 100%);
  color: var(--aero-blue-dark);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.25), inset 0 1px 1px #ffffff;
}

[data-theme="dark"] .ms-mode-tab.active {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.3) 0%, rgba(2, 132, 199, 0.4) 100%);
  color: #ffffff;
  border: 1px solid rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.ms-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.06);
  border: 1.5px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .ms-control-bar {
  background: rgba(2, 6, 23, 0.4);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4);
}

.ms-digit-display {
  background: radial-gradient(ellipse at center, #0f172a 0%, #020617 100%);
  color: #ff3366;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.8),
    0 1px 1px rgba(255, 255, 255, 0.5);
  text-shadow: 0 0 6px rgba(255, 51, 102, 0.8);
  min-width: 40px;
  text-align: center;
}

[data-theme="dark"] .ms-digit-display {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.9),
    0 1px 1px rgba(56, 189, 248, 0.2);
}

.ms-face-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  background: radial-gradient(circle at 35% 25%, #ffffff 0%, #fef08a 45%, #eab308 90%);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 2px #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s;
  padding: 0;
}

.ms-face-btn:hover {
  transform: scale(1.12);
  box-shadow:
    0 4px 12px rgba(234, 179, 8, 0.4),
    inset 0 1px 3px #ffffff;
}

.ms-face-btn:active {
  transform: scale(0.92);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ms-board-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  border: 1.5px solid var(--glass-border);
  border-radius: 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06);
  width: 100%;
  box-sizing: border-box;
}

[data-theme="dark"] .ms-board-container {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

.ms-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2.5px;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.ms-cell {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.12s ease;
  user-select: none;
  position: relative;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.95) 10%,
      rgba(224, 242, 254, 0.75) 25%,
      rgba(186, 230, 253, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px #ffffff;
}

.ms-cell:hover:not(.revealed) {
  transform: scale(1.06);

  box-shadow:
    0 3px 8px rgba(2, 132, 199, 0.25),
    inset 0 1px 2px #ffffff;
}

[data-theme="dark"] .ms-cell {
  background: linear-gradient(180deg,
      rgba(30, 41, 59, 0.85) 0%,
      rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .ms-cell:hover:not(.revealed) {
  background: linear-gradient(180deg,
      rgba(56, 100, 150, 0.9) 0%,
      rgba(20, 55, 100, 0.95) 50%,
      rgba(10, 40, 80, 0.9) 100%);
  border-color: var(--aero-blue-bright);
  box-shadow:
    0 3px 10px rgba(56, 189, 248, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.ms-cell.revealed {
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: default;
  transform: none !important;
}

[data-theme="dark"] .ms-cell.revealed {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(56, 189, 248, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ms-cell.flagged {
  font-size: 14px;
  animation: msFlagPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes msFlagPop {
  0% {
    transform: scale(0.6);
  }

  100% {
    transform: scale(1);
  }
}

.ms-cell.mine-hit {
  background: radial-gradient(circle, #fecaca 0%, #ef4444 100%) !important;
  border-color: #dc2626 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
  animation: msMineShake 0.35s ease;
}

@keyframes msMineShake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  75% {
    transform: translateX(3px);
  }
}

/* Classic Number Color Scheme */
.ms-cell.cell-1 {
  color: #0284c7;
  text-shadow: 0 0 2px rgba(2, 132, 199, 0.2);
}

.ms-cell.cell-2 {
  color: #16a34a;
  text-shadow: 0 0 2px rgba(22, 163, 74, 0.2);
}

.ms-cell.cell-3 {
  color: #dc2626;
  text-shadow: 0 0 2px rgba(220, 38, 38, 0.2);
}

.ms-cell.cell-4 {
  color: #4f46e5;
  text-shadow: 0 0 2px rgba(79, 70, 229, 0.2);
}

.ms-cell.cell-5 {
  color: #9333ea;
  text-shadow: 0 0 2px rgba(147, 51, 234, 0.2);
}

.ms-cell.cell-6 {
  color: #0891b2;
  text-shadow: 0 0 2px rgba(8, 145, 178, 0.2);
}

.ms-cell.cell-7 {
  color: #1f2937;
}

.ms-cell.cell-8 {
  color: #64748b;
}

[data-theme="dark"] .ms-cell.cell-1 {
  color: #38bdf8;
  text-shadow: 0 0 4px rgba(56, 189, 248, 0.5);
}

[data-theme="dark"] .ms-cell.cell-2 {
  color: #4ade80;
  text-shadow: 0 0 4px rgba(74, 222, 128, 0.5);
}

[data-theme="dark"] .ms-cell.cell-3 {
  color: #f87171;
  text-shadow: 0 0 4px rgba(248, 113, 113, 0.5);
}

[data-theme="dark"] .ms-cell.cell-4 {
  color: #818cf8;
  text-shadow: 0 0 4px rgba(129, 140, 248, 0.5);
}

.ms-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ms-status-text {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-subtitle);
}

.ms-reset-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--aero-blue-dark);
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}

.ms-reset-pill:hover {
  transform: translateY(-1px);
  border-color: var(--aero-blue-bright);
}

[data-theme="dark"] .ms-reset-pill {
  color: var(--aero-blue-bright);
}

@media (max-width: 900px) {
  .aero-bento-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "weather weather weather weather weather weather clock clock clock calendar calendar calendar"
      "music music music music music music music bubbles bubbles bubbles bubbles bubbles"
      "minesweeper minesweeper minesweeper minesweeper pond pond pond pond pond pond pond pond";
  }

  .standalone-clock-widget .clock-face-wrap {
    width: 120px;
    height: 120px;
  }

  .bento-bubbles {
    text-align: left;
  }

  .bento-bubbles .bento-card-body {
    flex-direction: row;
  }

  .bento-bubbles .bento-body {
    align-items: flex-start;
  }

  .bento-bubbles .bento-sub {
    max-width: none;
  }
}

@media (max-width: 600px) {
  .aero-bento-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "weather weather weather weather weather weather weather weather weather weather weather weather"
      "clock clock clock clock clock clock calendar calendar calendar calendar calendar calendar"
      "music music music music music music music music music music music music"
      "minesweeper minesweeper minesweeper minesweeper minesweeper minesweeper minesweeper minesweeper bubbles bubbles bubbles bubbles"
      "pond pond pond pond pond pond pond pond pond pond pond pond";
    gap: 12px;
  }

  .bento-bubbles {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
  }

  .bento-bubbles .bento-card-body {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .bento-bubbles .bento-body {
    align-items: center;
  }

  .bento-card {
    padding: 16px;
    border-radius: 18px;
  }

  .standalone-clock-widget .clock-face-wrap {
    width: 110px;
    height: 110px;
  }

  .standalone-clock-widget {
    min-width: 0;
    padding: 10px;
  }

  .bento-music .aero-cd-wrap {
    width: 70px;
    height: 70px;
  }

  .bento-tag {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--aero-blue-dark);
    background: var(--tag-bg);
    border: 1px solid var(--tag-border);
    padding: 2px 5px;
    border-radius: 999px;
    text-shadow: var(--ink-emboss);
    text-transform: uppercase;
  }

  .bento-pond {
    height: auto;
    min-height: 250px;
  }

  .pond-canvas-wrap {
    min-height: 190px;
  }
}

.bento-pond {
  grid-area: pond;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  height: 93%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  padding: 10px 14px;
}

.pond-canvas-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--glass-border);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
  background: radial-gradient(circle at 50% 30%, #0284c7 0%, #0369a1 60%, #0c4a6e 100%);
  cursor: pointer;
  touch-action: none;
}

#pondCanvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.pond-hint {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
}

.pond-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex-wrap: nowrap;
  width: 100%;
}

.pond-stats {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-shrink: 1;
}

.pond-stat-pill {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--aero-blue-dark);
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

[data-theme="dark"] .pond-stat-pill {
  color: var(--aero-blue-bright);
}

.pond-btn-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.pond-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--aero-blue-dark);
  background: linear-gradient(180deg, #ffffff 0%, rgba(224, 242, 254, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.2), inset 0 1px 1px #ffffff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pond-action-btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3), inset 0 1px 2px #ffffff;
}

.pond-action-btn:active {
  transform: scale(0.95);
}

[data-theme="dark"] .pond-action-btn {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.3) 0%, rgba(2, 132, 199, 0.4) 100%);
  border: 1px solid rgba(56, 189, 248, 0.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}