/* pokemon-theme.css */
/* 寶可夢風格班級寵物系統專屬樣式表 */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Noto+Sans+TC:wght@300..900&display=swap');

:root {
  /* 🌙 Dark Mode - 寶可夢深色系 */
  --color-background: #0A122C;
  --color-text-primary: #FFF1C5;
  --color-text-secondary: #FFCC00;
  --color-glass-bg: rgba(10, 25, 60, 0.65);
  --color-glass-border: rgba(255, 204, 0, 0.35);
  --color-glass-hover: rgba(255, 204, 0, 0.15);
  --color-input-bg: rgba(5, 12, 30, 0.9);
  --color-accent: #FFCC00;
  --color-accent-hover: rgba(255, 204, 0, 0.2);
  --color-heart: #FF1C1C;
  --font-pokemon: "Fredoka", "Noto Sans TC", sans-serif;
  
  /* Unified theme variables for blackboard and others */
  --manager-glass: rgba(10, 25, 60, 0.65);
  --manager-line: rgba(255, 204, 0, 0.35);
  --manager-ink: #FFF1C5;
  --manager-accent: #FFCC00;
  --manager-muted: #8FA2C4;
}

body.light-mode {
  /* ☕ Light Mode - 寶可夢淺色系 */
  --color-background: #FFFDF0;
  --color-text-primary: #0A285F;
  --color-text-secondary: #3E5E98;
  --color-glass-bg: rgba(255, 255, 255, 0.85);
  --color-glass-border: rgba(10, 40, 95, 0.15);
  --color-glass-hover: rgba(255, 255, 255, 0.98);
  --color-input-bg: #FFFFFF;
  --color-accent: #FF1C1C;
  --color-accent-hover: rgba(255, 28, 28, 0.1);
  --color-heart: #FF1C1C;
  
  --manager-glass: rgba(255, 255, 255, 0.85);
  --manager-line: rgba(10, 40, 95, 0.15);
  --manager-ink: #0A285F;
  --manager-accent: #FF1C1C;
  --manager-muted: #5A7EBA;
}

/* 全域字體覆蓋，營動漫、活潑的遊戲感 */
body, button, input, select, textarea {
  font-family: var(--font-pokemon) !important;
}

/* 底部草叢裝飾 */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background-image: url('./assets/grass_decor.png');
  background-repeat: repeat-x;
  background-size: auto 48px;
  pointer-events: none;
  z-index: 10005;
}

/* 為了不要讓底部草叢擋住內容，給整個容器底部的 padding */
.app-container {
  padding-bottom: 48px;
}

/* 寶貝球 Wobble 抖動動畫 */
@keyframes pokeball-wobble {
  0% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-18deg) scale(1.1); }
  30% { transform: rotate(15deg) scale(1.1); }
  45% { transform: rotate(-12deg) scale(1.1); }
  60% { transform: rotate(9deg) scale(1.1); }
  75% { transform: rotate(-5deg) scale(1.05); }
  90% { transform: rotate(3deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

.pokeball-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

/* 側邊欄導覽按鈕 Hover 效果 */
.nav-btn:hover .pokeball-icon,
.nav-btn.active .pokeball-icon {
  animation: pokeball-wobble 0.9s ease-in-out;
}

/* 寶可夢卡片樣式 */
.pokemon-card {
  position: relative;
  background: linear-gradient(135deg, #FFF5CC 0%, #FFE57F 100%);
  border: 4px solid #FFC107;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
  overflow: hidden;
  color: #0A285F !important;
}

.pokemon-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.pokemon-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.pokemon-card-type {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
  margin-top: 4px;
}

/* 屬性標籤顏色 */
.type-草 { background-color: #4CAF50; }
.type-火 { background-color: #FF5722; }
.type-水 { background-color: #2196F3; }
.type-電 { background-color: #FFEB3B; color: #333 !important; text-shadow: none !important; }
.type-蟲, .type-蟲\/飛行 { background-color: #8BC34A; }
.type-一般, .type-一般\/飛行 { background-color: #9E9E9E; }
.type-毒, .type-毒\/惡 { background-color: #9C27B0; }
.type-地面, .type-地面\/岩石 { background-color: #FF9800; }
.type-幽靈, .type-幽靈\/火 { background-color: #673AB7; }
.type-超能力, .type-超能力\/妖精 { background-color: #E91E63; }
.type-岩石 { background-color: #795548; }
.type-冰, .type-水\/冰, .type-冰\/蟲 { background-color: #00BCD4; }
.type-龍, .type-龍\/火, .type-龍\/惡, .type-龍\/妖精 { background-color: #3F51B5; }
.type-格鬥, .type-格鬥\/鋼鐵, .type-蟲\/格鬥 { background-color: #D32F2F; }
.type-妖精, .type-草\/妖精 { background-color: #FF80AB; }
.type-鋼鐵, .type-電\/鋼鐵 { background-color: #607D8B; }
.type-惡 { background-color: #263238; }

/* 寵物卡片展示欄 */
.pet-showcase {
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 207, 79, 0.18), transparent 58%),
    transparent;
  border: 2px dashed rgba(10, 40, 95, 0.12);
  border-radius: 12px;
  padding: 8px;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pet-emoji-large {
  font-size: 3.2rem;
  margin: 6px 0;
  display: inline-block;
  transition: transform 0.2s ease;
}

.pokemon-card:hover .pet-emoji-large {
  transform: scale(1.2) rotate(5deg);
}

/* 抽卡轉蛋機面板 */
.gacha-machine-panel {
  background: linear-gradient(180deg, #FF4B4B 0%, #FF1C1C 50%, #FFFFFF 50%, #FFFFFF 100%);
  border: 6px solid #263238;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.gacha-machine-panel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: #FFFFFF;
  border: 6px solid #263238;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 10;
}

.gacha-title {
  color: #FFFFFF;
  font-size: 1.8rem;
  font-weight: 900;
  text-shadow: 2px 2px 0px #000000;
  margin-bottom: 20px;
  z-index: 1;
}

.gacha-button {
  background: #FFCC00;
  color: #0A285F;
  border: 3px solid #0A285F;
  border-radius: 999px;
  font-size: 1.25rem;
  font-weight: 900;
  padding: 12px 36px;
  cursor: pointer;
  box-shadow: 0 6px 0px #08204D;
  transition: all 0.1s ease;
  z-index: 1;
}

.gacha-button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0px #08204D;
}

/* 遊戲風格按鈕 */
.game-btn {
  background: #FFCC00;
  color: #0A285F;
  border: 3px solid #0A285F;
  border-radius: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0px #08204D;
  transition: all 0.1s ease;
  padding: 8px 16px;
}

.game-btn:hover {
  background: #FFE066;
}

.game-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0px #08204D;
}

.game-btn.btn-red {
  background: #FF4B4B;
  color: white;
  border-color: #263238;
  box-shadow: 0 4px 0px #263238;
}

.game-btn.btn-red:hover { background: #FF6B6B; }

.game-btn.btn-blue {
  background: #2196F3;
  color: white;
  border-color: #0A285F;
  box-shadow: 0 4px 0px #0A285F;
}

.game-btn.btn-blue:hover { background: #42A5F5; }

.game-btn.btn-green {
  background: #4CAF50;
  color: white;
  border-color: #1B5E20;
  box-shadow: 0 4px 0px #1B5E20;
}

.game-btn.btn-green:hover { background: #66BB6A; }

/* 寵物力狀態條 */
.power-bar-container {
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
  height: 12px;
  width: 100%;
  overflow: hidden;
  margin: 6px 0;
  border: 1px solid rgba(0,0,0,0.2);
}

.power-bar-fill {
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  height: 100%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pokedex 網格 */
.pokedex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  max-height: 350px;
  overflow-y: auto;
  padding: 8px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}

.pokedex-slot {
  width: 100%;
  aspect-ratio: 1;
  background: #FFF;
  border: 2px solid #DDD;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  position: relative;
  transition: all 0.2s ease;
}

.pokedex-slot.locked {
  background: #ECEFF1;
  color: #B0BEC5;
  filter: grayscale(1);
}

.pokedex-slot.locked::after {
  content: "?";
  font-weight: 900;
  font-size: 1.4rem;
  color: #B0BEC5;
}

.pokedex-slot.owned {
  border-color: #FFC107;
  background: #FFF9C4;
}

.pokedex-slot:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 2;
}

/* 顯示特定小角標，如進化階段或已裝備 */
.slot-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: #FF1C1C;
  color: white;
  font-size: 0.6rem;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 4px;
}

/* 學生卡上的已裝備寵物小標誌 */
.equipped-pet-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.8rem;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFC107;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.equipped-pet-badge:hover {
  transform: scale(1.2);
}

/* 擬寶可夢對戰、進化的彈窗場景 */
.evolution-scene {
  text-align: center;
  padding: 40px 20px;
  background: radial-gradient(circle, #2196F3 0%, #0D47A1 100%);
  color: white;
  border-radius: 20px;
  box-shadow: inset 0 0 100px rgba(0,0,0,0.8);
  overflow: hidden;
  position: relative;
}

.evo-flash {
  animation: flash-animation 1.5s ease-out infinite alternate;
}

@keyframes flash-animation {
  0% { filter: brightness(1) drop-shadow(0 0 10px rgba(255,255,255,0)); }
  100% { filter: brightness(2.2) drop-shadow(0 0 30px rgba(255,255,255,1)); }
}

.evo-particles {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.15) 10%, transparent 10%);
  background-size: 16px 16px;
}

/* QR Code 彈窗設計 */
.qr-modal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.qr-code-img {
  border: 6px solid #263238;
  border-radius: 16px;
  background: white;
  padding: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  margin: 16px 0;
}

/* 轉蛋抽卡場景 */
.gacha-reveal-scene {
  text-align: center;
  padding: 30px 20px;
  background: radial-gradient(circle, #ff5f6d 0%, #ffc371 100%);
  color: white;
  border-radius: 24px;
  border: 4px solid #FFCC00;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 0 80px rgba(0,0,0,0.3);
  overflow: hidden;
  position: relative;
}

.gacha-stars {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.4) 10%, transparent 10%);
  background-size: 24px 24px;
  animation: star-move 10s linear infinite;
}

@keyframes star-move {
  from { background-position: 0 0; }
  to { background-position: 100px 100px; }
}

.gacha-animation-container {
  position: relative;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

/* Wobble animation for the Pokéball */
.gacha-pokeball-wobble {
  width: 140px;
  height: 140px;
  position: absolute;
  animation: gacha-shake-and-burst 2.8s cubic-bezier(.36,.07,.19,.97) forwards;
  transform-origin: bottom center;
}

.gacha-pokeball-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}

@keyframes gacha-shake-and-burst {
  0% { transform: scale(0.2) rotate(0deg); opacity: 0; }
  10% { transform: scale(1) rotate(0deg); opacity: 1; }
  15% { transform: rotate(-15deg); }
  20% { transform: rotate(15deg); }
  25% { transform: rotate(-15deg); }
  30% { transform: rotate(15deg); }
  35% { transform: rotate(0deg); }
  /* pause and blink red/white */
  45% { transform: scale(1) rotate(0deg); filter: none; }
  50% { transform: rotate(-15deg) scale(1.05); filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8)); }
  55% { transform: rotate(15deg) scale(1.05); filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8)); }
  60% { transform: rotate(-15deg) scale(1.05); filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8)); }
  65% { transform: rotate(15deg) scale(1.05); filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.8)); }
  70% { transform: rotate(0deg) scale(1.1); filter: brightness(1.5) drop-shadow(0 0 25px rgba(255, 255, 255, 1)); }
  75% { transform: scale(1.3); opacity: 1; filter: brightness(3); }
  80% { transform: scale(2); opacity: 0; filter: brightness(5); }
  100% { transform: scale(2); opacity: 0; }
}

/* Card reveal animation starting after ball burst */
.gacha-reveal-card {
  opacity: 0;
  transform: scale(0.1) rotate(-20deg);
  animation: gacha-card-enter 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.3s forwards;
  width: 100%;
}

@keyframes gacha-card-enter {
  0% { opacity: 0; transform: scale(0.1) rotate(-20deg); }
  10% { opacity: 0.5; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Legendary card shine effect */
.legendary-glow {
  box-shadow: 0 0 25px #FFCC00, 0 0 50px rgba(255, 204, 0, 0.6);
  animation: legendary-pulse 2s infinite alternate;
}

/* Legendary img glow (prevents rectangular white background/glow box on transparent PNGs) */
img.legendary-glow {
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  filter: drop-shadow(0 0 10px #FFCC00) drop-shadow(0 0 20px rgba(255, 204, 0, 0.6)) !important;
  animation: legendary-img-pulse 2s infinite alternate !important;
}

@keyframes legendary-pulse {
  0% { box-shadow: 0 0 15px #FFCC00, 0 0 30px rgba(255, 204, 0, 0.5); }
  100% { box-shadow: 0 0 30px #FFD700, 0 0 60px rgba(255, 215, 0, 0.9); }
}

@keyframes legendary-img-pulse {
  0% { filter: drop-shadow(0 0 6px #FFCC00) drop-shadow(0 0 12px rgba(255, 204, 0, 0.5)) !important; }
  100% { filter: drop-shadow(0 0 12px #FFD700) drop-shadow(0 0 24px rgba(255, 215, 0, 0.9)) !important; }
}

/* --- Student Cards Grid & Game Elements --- */
.student-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 16px;
  padding: 10px;
  width: 100%;
}

.student-pet-card {
  position: relative;
  background: var(--color-glass-bg);
  border: 3px solid var(--color-glass-border);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  aspect-ratio: 1 / 1.25;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.student-pet-card:hover {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--color-accent);
  box-shadow: 0 8px 24px rgba(255, 204, 0, 0.3);
}

.student-pet-card.active {
  border-color: var(--color-accent);
  background: rgba(255, 204, 0, 0.1);
}

.student-pet-card .card-number {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--color-text-secondary);
  background: rgba(0,0,0,0.2);
  padding: 2px 8px;
  border-radius: 20px;
  align-self: flex-start;
  margin-bottom: 4px;
}

.student-pet-card .card-sprite-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 4px;
  position: relative;
}

.student-pet-card .card-sprite-container img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
  transition: transform 0.2s ease;
}

.student-pet-card:hover .card-sprite-container img {
  transform: scale(1.15) rotate(4deg);
}

.student-pet-card .card-sprite-empty {
  font-size: 2.2rem;
  opacity: 0.25;
  filter: grayscale(1);
}

.student-pet-card .card-name {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-text-primary);
  margin-top: 4px;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.student-pet-card .card-score {
  font-size: 0.75rem;
  opacity: 0.8;
  color: var(--manager-muted);
}

/* Sprite utility classes */
.pet-sprite-thumb {
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: middle;
  image-rendering: -webkit-optimize-contrast;
}

.pet-sprite-medium {
  width: 56px;
  height: 56px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

.pet-sprite-large {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* Fullscreen gacha reveal overlay */
.gacha-overlay-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(10, 18, 44, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gacha-reveal-container {
  width: 100%;
  max-width: 480px;
}

.mode-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--color-glass-border);
  padding-bottom: 8px;
}

.mode-tab-button {
  background: transparent;
  border: none;
  color: var(--manager-muted);
  font-weight: 900;
  font-size: 1rem;
  padding: 6px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.mode-tab-button.active {
  color: var(--color-text-secondary);
  background: var(--color-glass-hover);
  border: 1px solid var(--color-glass-border);
}

/* ============================================================
   Student Game Console (學生遊戲艙) — Premium Game-Quality UI
   ============================================================ */

/* ---------- 6. Entrance Animation ---------- */
@keyframes console-zoom-in {
  0%   { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

.student-game-console {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at 40% 30%, #0F2042 0%, #050b1a 80%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  color: #FFF1C5;
  font-family: var(--font-pokemon) !important;
  overflow: hidden;
  box-sizing: border-box;
  animation: console-zoom-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- 2. Ambient Background — Floating Glow ---------- */
@keyframes ambient-float {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.35; }
  25%  { transform: translate(30px, -40px) scale(1.15); opacity: 0.5; }
  50%  { transform: translate(-20px, -60px) scale(1.05); opacity: 0.3; }
  75%  { transform: translate(10px, -30px) scale(1.2); opacity: 0.45; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
}

.student-game-console::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle 220px at 15% 70%, rgba(255, 204, 0, 0.06) 0%, transparent 70%),
    radial-gradient(circle 180px at 80% 20%, rgba(33, 150, 243, 0.07) 0%, transparent 70%),
    radial-gradient(circle 260px at 50% 50%, rgba(255, 87, 34, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: ambient-float 18s ease-in-out infinite;
}

/* ---------- 2. Ambient Background — Star Particles ---------- */
@keyframes ambient-stars {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 200px 300px, -150px 200px, 100px -250px; }
}

.student-game-console::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 20px 30px, rgba(255,255,255,0.35) 50%, transparent 50%),
    radial-gradient(1px 1px at 80px 120px, rgba(255,255,255,0.25) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 160px 60px, rgba(255,255,255,0.2) 50%, transparent 50%);
  background-size: 200px 200px, 170px 170px, 220px 220px;
  pointer-events: none;
  z-index: 0;
  animation: ambient-stars 40s linear infinite;
}

/* All console children above ambient layers */
.student-game-console > * {
  position: relative;
  z-index: 1;
}

/* =========================
   Console Header (1. Fix)
   ========================= */
.console-header {
  background: rgba(10, 25, 60, 0.92);
  border-bottom: 4px solid #FFCC00;
  padding: 12px 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 204, 0, 0.15);
}

.console-title-area {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.console-title-area h2 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 900;
  color: #FFCC00;
  text-shadow: 2px 2px 0px #000, 0 0 12px rgba(255, 204, 0, 0.3);
  white-space: nowrap;
}

.console-student-info {
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid #FFCC00;
  padding: 6px 16px;
  border-radius: 99px;
  font-size: 1.1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #FFF;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.3);
}

/* ---------- 7. Token Badge — Golden Glow ---------- */
@keyframes token-glow {
  0%, 100% { text-shadow: 1px 1px 0px #000, 0 0 6px rgba(255, 204, 0, 0.4); }
  50%      { text-shadow: 1px 1px 0px #000, 0 0 14px rgba(255, 204, 0, 0.8), 0 0 24px rgba(255, 204, 0, 0.3); }
}

.console-token-badge {
  color: #FFCC00;
  font-weight: 900;
  animation: token-glow 3s ease-in-out infinite;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 7. Token spend animation — brief shrink-bounce */
.token-spend-anim {
  animation: token-spend 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes token-spend {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.7); }
  60%  { transform: scale(1.15); color: #FF5722; }
  100% { transform: scale(1); }
}

/* 7. Token earn animation — grow-bounce with green flash */
.token-earn-anim {
  animation: token-earn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes token-earn {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); color: #4CAF50; text-shadow: 0 0 16px rgba(76,175,80,0.8); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* =========================
   Console Tab Bar (1. Fix)
   ========================= */
.console-tab-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.console-tab-btn {
  background: rgba(38, 50, 56, 0.85);
  color: #8FA2C4;
  border: 3px solid #8FA2C4;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 10px 22px;
  font-size: 1.05rem;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateY(4px);
  white-space: nowrap;
}

.console-tab-btn.active {
  background: #FFCC00;
  color: #0A285F;
  border-color: #0A285F;
  transform: translateY(0);
  box-shadow: 0 -4px 14px rgba(255, 204, 0, 0.35);
  z-index: 2;
}

.console-tab-btn:hover:not(.active) {
  background: #37474F;
  color: #FFF;
  transform: translateY(2px);
}

/* =========================
   Console Body (1. Fix)
   ========================= */
.console-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* ---------- 6. Page Content — Slide + Fade ---------- */
@keyframes console-fade-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.console-page-content {
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: console-fade-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- 6. Screen Shake Effect ---------- */
@keyframes shake-it {
  0%, 100% { transform: translateX(0); }
  10%      { transform: translateX(-6px); }
  20%      { transform: translateX(5px); }
  30%      { transform: translateX(-4px); }
  40%      { transform: translateX(3px); }
  50%      { transform: translateX(-2px); }
  60%      { transform: translateX(1px); }
}

.console-screen-shake {
  animation: shake-it 0.45s ease-out !important;
}

/* =====================================================
   3. GACHA PAGE — Machine, Button, Sparkles, Glow
   ===================================================== */
.console-gacha-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}

.console-gacha-info {
  background: rgba(10, 25, 60, 0.8);
  border: 3px solid var(--color-glass-border);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.console-gacha-info h3 {
  margin-top: 0;
  color: #FFCC00;
  font-size: 1.5rem;
  font-weight: 900;
}

/* Gacha Machine Wrapper */
.console-gacha-machine-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  position: relative;
}

/* 3. Gacha Machine Glow — radial halo */
@keyframes gacha-glow-pulse {
  0%, 100% { box-shadow: 0 0 40px 10px rgba(255, 204, 0, 0.15), 0 0 80px 30px rgba(255, 204, 0, 0.06); }
  50%      { box-shadow: 0 0 60px 20px rgba(255, 204, 0, 0.25), 0 0 120px 50px rgba(255, 204, 0, 0.1); }
}

.gacha-machine-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 204, 0, 0.1) 0%, transparent 70%);
  animation: gacha-glow-pulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* 3. Gacha Machine Float with Glow */
@keyframes float-gacha {
  0%, 100% { transform: translateY(0) rotate(0deg); filter: drop-shadow(0 15px 30px rgba(0,0,0,0.5)) drop-shadow(0 0 12px rgba(255,204,0,0.08)); }
  50%      { transform: translateY(-12px) rotate(1deg); filter: drop-shadow(0 20px 35px rgba(0,0,0,0.4)) drop-shadow(0 0 20px rgba(255,204,0,0.15)); }
}

.console-gacha-machine-img {
  width: 100%;
  max-width: 320px;
  animation: float-gacha 4s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

/* 3. Gacha Sparkles — CSS-only particles */
@keyframes sparkle-drift-1 { 0%, 100% { transform: translate(0, 0) scale(0); opacity: 0; } 20% { opacity: 1; transform: translate(-15px, -25px) scale(1); } 80% { opacity: 0.6; transform: translate(-30px, -60px) scale(0.6); } }
@keyframes sparkle-drift-2 { 0%, 100% { transform: translate(0, 0) scale(0); opacity: 0; } 25% { opacity: 1; transform: translate(20px, -30px) scale(1.1); } 85% { opacity: 0.4; transform: translate(40px, -70px) scale(0.4); } }
@keyframes sparkle-drift-3 { 0%, 100% { transform: translate(0, 0) scale(0); opacity: 0; } 30% { opacity: 1; transform: translate(-10px, -20px) scale(0.9); } 90% { opacity: 0.3; transform: translate(-25px, -55px) scale(0.3); } }

.gacha-sparkles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2;
}
.gacha-sparkles::before,
.gacha-sparkles::after {
  content: "✦";
  position: absolute;
  font-size: 1rem;
  color: #FFCC00;
  text-shadow: 0 0 6px rgba(255, 204, 0, 0.8);
}
.gacha-sparkles::before {
  top: 20%;
  left: 15%;
  animation: sparkle-drift-1 3s ease-in-out infinite;
}
.gacha-sparkles::after {
  top: 30%;
  right: 18%;
  animation: sparkle-drift-2 3.5s ease-in-out infinite 0.5s;
}

/* 3. Gacha Button — Idle Pulse/Bounce */
@keyframes gacha-btn-pulse {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.04) translateY(-3px); }
}

.student-game-console .gacha-button {
  background: #FFCC00;
  color: #0A285F;
  border: 3px solid #0A285F;
  border-radius: 999px;
  font-size: 1.25rem;
  font-weight: 900;
  padding: 12px 36px;
  cursor: pointer;
  box-shadow: 0 6px 0px #08204D, 0 0 18px rgba(255, 204, 0, 0.2);
  transition: box-shadow 0.2s ease, background 0.15s ease;
  z-index: 1;
  animation: gacha-btn-pulse 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  will-change: transform;
}

.student-game-console .gacha-button:hover {
  background: #FFE066;
  box-shadow: 0 6px 0px #08204D, 0 0 28px rgba(255, 204, 0, 0.4);
}

.student-game-console .gacha-button:active {
  transform: translateY(4px) scale(0.97) !important;
  box-shadow: 0 2px 0px #08204D;
  animation: none;
}

.student-game-console .gacha-button:disabled {
  background: #555;
  color: #999;
  border-color: #666;
  box-shadow: 0 4px 0px #333;
  cursor: not-allowed;
  animation: none;
  opacity: 0.6;
}

/* =====================================================
   4. SHOP PAGE — Shimmer, Flash, Power-Up
   ===================================================== */
.console-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  width: 100%;
}

.console-shop-card {
  background: linear-gradient(135deg, rgba(15, 32, 67, 0.95) 0%, rgba(10, 25, 60, 0.95) 100%);
  border: 3px solid var(--color-glass-border);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

/* 4. Shop Card Shimmer Sweep */
.console-shop-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 70%
  );
  transition: left 0.7s ease;
  pointer-events: none;
  z-index: 1;
}

.console-shop-card:hover::after {
  left: 130%;
}

.console-shop-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: #FFCC00;
  box-shadow: 0 14px 36px rgba(255, 204, 0, 0.22);
}

/* 4. Shop Card Image — Float Bob */
@keyframes shop-item-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.console-shop-card img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 12px 0;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
  animation: shop-item-bob 3.5s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

.console-shop-item-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #FFCC00;
  margin: 0;
  position: relative;
  z-index: 2;
}

.console-shop-item-desc {
  font-size: 0.85rem;
  color: #8FA2C4;
  margin: 8px 0 16px 0;
  min-height: 40px;
  line-height: 1.4;
  position: relative;
  z-index: 2;
}

/* 4. Shop Price — Gentle Pulse */
@keyframes price-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.console-shop-price {
  background: #FF5722;
  color: white;
  font-weight: 900;
  padding: 4px 14px;
  border-radius: 99px;
  margin-bottom: 12px;
  font-size: 0.95rem;
  box-shadow: 0 3px 8px rgba(255,87,34,0.35);
  animation: price-pulse 2.5s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

/* 4. Shop Buy Flash — Full card white flash */
@keyframes shop-buy-flash {
  0%   { opacity: 0; }
  15%  { opacity: 0.6; }
  100% { opacity: 0; }
}

.shop-buy-flash::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 18px;
  z-index: 10;
  animation: shop-buy-flash 0.5s ease-out forwards;
  pointer-events: none;
}

/* 4. Shop Power-Up — Green Glow Pulse */
@keyframes shop-power-glow {
  0%   { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
  30%  { box-shadow: 0 0 30px rgba(76, 175, 80, 0.6), 0 0 60px rgba(76, 175, 80, 0.25); border-color: #4CAF50; }
  100% { box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
}

.shop-power-up {
  animation: shop-power-glow 0.8s ease-out !important;
}

/* =====================================================
   5. POKEDEX PAGE — Glass, Glow, Unlock Pulse
   ===================================================== */
.console-pokedex-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.console-pokedex-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 5. Glass-morphism Container */
.console-pokedex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 10px;
  height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 204, 0, 0.2);
  border-radius: 20px;
  box-shadow: inset 0 4px 20px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.05);
}

/* 5. Pokedex Slot — Owned Glow Border */
@keyframes pokedex-owned-glow {
  0%, 100% { border-color: #FFC107; box-shadow: 0 0 6px rgba(255, 193, 7, 0.2); }
  50%      { border-color: #FFD54F; box-shadow: 0 0 14px rgba(255, 193, 7, 0.45); }
}

.student-game-console .pokedex-slot.owned {
  border-color: #FFC107;
  background: #FFF9C4;
  animation: pokedex-owned-glow 3s ease-in-out infinite;
}

.student-game-console .pokedex-slot.owned:hover {
  transform: scale(1.18);
  box-shadow: 0 0 18px rgba(255, 193, 7, 0.6);
  z-index: 3;
}

/* 5. Pokedex Unlock Pulse — Ring expand for newly viewed */
@keyframes pokedex-unlock-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.6); transform: scale(0.95); }
  50%  { box-shadow: 0 0 0 10px rgba(255, 204, 0, 0); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); transform: scale(1); }
}

.pokedex-unlock-pulse {
  animation: pokedex-unlock-pulse 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.console-pokedex-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* 5. Detail Card — Glass Effect */
.console-detail-card {
  background: linear-gradient(135deg, rgba(15, 32, 67, 0.85) 0%, rgba(10, 25, 60, 0.85) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 3px solid rgba(255, 204, 0, 0.25);
  border-radius: 24px;
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 10px 35px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.console-detail-card:hover {
  border-color: rgba(255, 204, 0, 0.45);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 18px rgba(255,204,0,0.1);
}

.console-pokedex-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.console-pokedex-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 900;
  color: #FFCC00;
}

.console-pokedex-progress {
  font-weight: bold;
  font-size: 1.1rem;
  color: #FFCC00;
}

/* =====================================================
   8. EVOLUTION & LEGENDARY — Enhanced Effects
   ===================================================== */

/* 8. Legendary Rainbow Shimmer in Console */
@keyframes console-legendary-rainbow {
  0%   { box-shadow: 0 0 18px #FFCC00, 0 0 40px rgba(255, 204, 0, 0.5); border-color: #FFCC00; }
  25%  { box-shadow: 0 0 18px #FF5722, 0 0 40px rgba(255, 87, 34, 0.4); border-color: #FF5722; }
  50%  { box-shadow: 0 0 18px #E91E63, 0 0 40px rgba(233, 30, 99, 0.4); border-color: #E91E63; }
  75%  { box-shadow: 0 0 18px #2196F3, 0 0 40px rgba(33, 150, 243, 0.4); border-color: #2196F3; }
  100% { box-shadow: 0 0 18px #FFCC00, 0 0 40px rgba(255, 204, 0, 0.5); border-color: #FFCC00; }
}

.student-game-console .legendary-glow {
  animation: console-legendary-rainbow 3s linear infinite !important;
}

/* 8. Evo-Ready Pulse — Pulsing green glow for evolve button */
@keyframes evo-ready-glow {
  0%, 100% { box-shadow: 0 4px 0px #1B5E20, 0 0 8px rgba(76, 175, 80, 0.3); }
  50%      { box-shadow: 0 4px 0px #1B5E20, 0 0 22px rgba(76, 175, 80, 0.65), 0 0 40px rgba(76, 175, 80, 0.2); }
}

.evo-ready-pulse {
  animation: evo-ready-glow 1.8s ease-in-out infinite !important;
}

/* 8. Enhanced Evolution Overlay — Dramatic Light Rays */
.student-game-console .evolution-scene::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255,255,255,0.06) 5deg,
    transparent 10deg,
    transparent 30deg,
    rgba(255,255,255,0.04) 35deg,
    transparent 40deg,
    transparent 60deg,
    rgba(255,255,255,0.07) 65deg,
    transparent 70deg
  );
  animation: evo-rays-spin 8s linear infinite;
  pointer-events: none;
}

@keyframes evo-rays-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =====================================================
   9. POWER BAR — Animated Stripes, Threshold Glow
   ===================================================== */
@keyframes power-bar-stripes {
  from { background-position: 0 0; }
  to   { background-position: 30px 0; }
}

.student-game-console .power-bar-container {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  height: 14px;
  width: 100%;
  overflow: hidden;
  margin: 6px 0;
  border: 1px solid rgba(255,255,255,0.08);
  transition: box-shadow 0.5s ease;
}

/* Threshold glow — applied via JS when near evolve threshold */
.student-game-console .power-bar-container.near-threshold {
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5), 0 0 22px rgba(76, 175, 80, 0.2);
}

.student-game-console .power-bar-fill {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,0.08) 0px,
      rgba(255,255,255,0.08) 6px,
      transparent 6px,
      transparent 12px
    ),
    linear-gradient(90deg, #4CAF50, #8BC34A);
  background-size: 30px 30px, 100% 100%;
  height: 100%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: power-bar-stripes 1.2s linear infinite;
  border-radius: 10px;
}

/* =====================================================
   10. RESPONSIVE — Mobile / Tablet Fixes
   ===================================================== */

/* Desktop-up: side by side layouts */
@media (min-width: 768px) {
  .console-gacha-layout {
    grid-template-columns: 1fr 1.2fr;
  }
  .console-pokedex-layout {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* Tablet max-width adjustment */
@media (max-width: 1024px) {
  .console-page-content {
    max-width: 92vw;
  }
}

/* Mobile */
@media (max-width: 768px) {
  /* 1. Header stacks vertically */
  .console-header {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
    gap: 8px;
  }

  .console-title-area {
    justify-content: center;
    flex-wrap: wrap;
  }

  .console-title-area h2 {
    font-size: 1.25rem;
    text-align: center;
  }

  .console-student-info {
    justify-content: center;
    font-size: 0.95rem;
    padding: 5px 12px;
  }

  /* 1. Tab bar wraps and centers */
  .console-tab-bar {
    justify-content: center;
    gap: 4px;
  }

  .console-tab-btn {
    padding: 8px 14px;
    font-size: 0.9rem;
  }

  /* 1. Body proper scroll */
  .console-body {
    padding: 14px 10px 70px 10px;
  }

  .console-page-content {
    max-width: 100%;
    gap: 14px;
  }

  /* Gacha single column is already default */
  .console-gacha-machine-img {
    max-width: 240px;
  }

  .gacha-machine-glow {
    width: 200px;
    height: 200px;
  }

  /* Shop cards single column */
  .console-shop-grid {
    grid-template-columns: 1fr;
  }

  /* Pokedex adjustments */
  .console-pokedex-grid {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    height: 45vh;
    gap: 8px;
    padding: 10px;
  }

  .console-detail-card {
    padding: 16px;
  }

  .console-pokedex-title {
    font-size: 1.15rem;
  }

  .console-pokedex-progress {
    font-size: 0.95rem;
  }

  /* Gacha info */
  .console-gacha-info {
    padding: 16px;
  }

  .console-gacha-info h3 {
    font-size: 1.2rem;
  }

  .student-game-console .gacha-button {
    font-size: 1.1rem;
    padding: 10px 28px;
  }

  /* Shop card adjustments */
  .console-shop-card {
    padding: 16px;
  }

  .console-shop-card img {
    width: 72px;
    height: 72px;
  }

  .console-shop-item-title {
    font-size: 1.1rem;
  }
}

/* Extra small screens */
@media (max-width: 400px) {
  .console-tab-btn {
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .console-title-area h2 {
    font-size: 1.1rem;
  }

  .student-game-console .gacha-button {
    font-size: 1rem;
    padding: 8px 22px;
  }

  .console-pokedex-grid {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  }
}

/* ============================================================
   Anime Classroom Game Polish
   ============================================================ */

body.pokemon-theme {
  --color-background: #fff8d7;
  --color-text-primary: #17325f;
  --color-text-secondary: #ff5f4c;
  --color-glass-bg: rgba(255, 255, 255, 0.88);
  --color-glass-border: rgba(23, 50, 95, 0.28);
  --color-glass-hover: rgba(255, 255, 255, 0.98);
  --color-accent: #ff5f4c;
  --manager-ink: #17325f;
  --manager-muted: #496b95;
  --manager-line: rgba(23, 50, 95, 0.18);
  --manager-glass: rgba(255, 255, 255, 0.88);
  --manager-accent: #ff5f4c;
  --manager-accent-2: #2f8c70;
  --manager-warm: #ffcf4f;
  background:
    linear-gradient(120deg, rgba(255, 248, 215, 0.96), rgba(225, 246, 255, 0.92) 52%, rgba(255, 236, 214, 0.94)),
    url('./assets/anime-classroom-hub.png') center top / cover fixed !important;
}

body.pokemon-theme::before {
  background-image:
    linear-gradient(rgba(23, 50, 95, 0.06) 2px, transparent 2px),
    linear-gradient(90deg, rgba(23, 50, 95, 0.05) 2px, transparent 2px),
    linear-gradient(45deg, transparent 0 46%, rgba(255, 207, 79, 0.18) 46% 54%, transparent 54% 100%);
  background-size: 46px 46px, 46px 46px, 28px 28px;
  opacity: 0.52;
}

body.pokemon-theme::after {
  height: 54px;
  opacity: 0.82;
  mix-blend-mode: multiply;
  z-index: 8;
}

.pokemon-theme .cm-app-shell {
  width: min(1540px, calc(100vw - 24px));
  gap: 18px;
  padding-bottom: 60px;
}

.pokemon-theme .cm-sidebar,
.pokemon-theme .cm-main,
.pokemon-theme .cm-glass,
.pokemon-theme .cm-card,
.pokemon-theme .glass-card,
.pokemon-theme .modal-card {
  border: 3px solid #17325f;
  box-shadow: 0 10px 0 #17325f, 0 24px 60px rgba(23, 50, 95, 0.18);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.pokemon-theme .cm-sidebar,
.pokemon-theme .rail {
  background:
    linear-gradient(180deg, rgba(255, 248, 215, 0.96), rgba(255, 255, 255, 0.92)),
    repeating-linear-gradient(-45deg, rgba(255, 207, 79, 0.15) 0 8px, transparent 8px 18px);
}

.pokemon-theme .cm-main,
.pokemon-theme .workspace {
  background: rgba(255, 255, 255, 0.88);
  position: relative;
}

.pokemon-theme .cm-main::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 18px;
  width: min(360px, 35vw);
  aspect-ratio: 1;
  background: url('./assets/anime-teacher-mode.png') center / cover;
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  box-shadow: 0 10px 0 #17325f, 0 24px 46px rgba(23, 50, 95, 0.2);
  opacity: 0.16;
  transform: rotate(4deg);
  pointer-events: none;
}

.pokemon-theme .cm-topbar,
.pokemon-theme .topbar {
  position: relative;
  background:
    linear-gradient(90deg, rgba(255, 248, 215, 0.98), rgba(255, 248, 215, 0.94) 54%, rgba(255, 248, 215, 0.28)),
    url('./assets/anime-classroom-hub.png') center / cover !important;
  color: #17325f;
  border-bottom: 4px solid #17325f;
  overflow: hidden;
}

.pokemon-theme .cm-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.18), transparent 32%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 3px, transparent 3px 18px);
  pointer-events: none;
}

.pokemon-theme .cm-topbar > * {
  position: relative;
  z-index: 1;
}

.pokemon-theme .cm-topbar .cm-title,
.pokemon-theme .topbar .page-title {
  color: #17325f;
  text-shadow: 0 3px 0 #ffcf4f, 0 0 16px rgba(255, 255, 255, 0.72);
}

.pokemon-theme .cm-topbar .cm-description,
.pokemon-theme .topbar .page-desc,
.pokemon-theme .cm-topbar .eyebrow,
.pokemon-theme .topbar .eyebrow {
  color: #335783;
}

.pokemon-theme .cm-button,
.pokemon-theme .btn,
.pokemon-theme .tool-link {
  border: 3px solid #17325f;
  border-radius: 14px;
  box-shadow: 0 4px 0 #17325f;
  font-weight: 900;
}

.pokemon-theme .cm-button:hover,
.pokemon-theme .btn:hover,
.pokemon-theme .tool-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 #17325f, 0 14px 28px rgba(23, 50, 95, 0.18);
}

.pokemon-theme .cm-button:active,
.pokemon-theme .btn:active,
.pokemon-theme .tool-link:active,
.pokemon-theme .game-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #17325f;
}

.pokemon-theme .cm-primary,
.pokemon-theme .btn.primary {
  color: #17325f;
  background: linear-gradient(180deg, #ffe66b, #ffcf4f);
}

.pokemon-theme .cm-secondary,
.pokemon-theme .btn.secondary {
  color: #17325f;
  background: linear-gradient(180deg, #e7fbff, #c4efff);
}

.pokemon-theme .cm-brand-icon,
.pokemon-theme .brand-badge {
  color: #17325f;
  background: linear-gradient(145deg, #ffcf4f, #6ee7b7);
  border: 3px solid #17325f;
  border-radius: 14px;
  box-shadow: 0 5px 0 #17325f;
}

.pokemon-theme .cm-nav-link {
  background: #ffffff;
  border: 3px solid #17325f;
  box-shadow: 0 4px 0 #17325f;
}

.pokemon-theme .cm-nav-link.is-active {
  background: linear-gradient(135deg, #ff5f4c, #ffcf4f);
  color: #17325f;
}

.pokemon-theme .daily-home-hero {
  min-height: 310px;
  align-items: end;
  color: #fff8d7;
  background:
    linear-gradient(90deg, rgba(23, 50, 95, 0.92), rgba(23, 50, 95, 0.42) 56%, rgba(23, 50, 95, 0.08)),
    url('./assets/anime-classroom-hub.png') center / cover !important;
  border-radius: 28px;
  overflow: hidden;
}

.pokemon-theme .daily-home-hero h2 {
  color: #fff8d7;
  text-shadow: 0 4px 0 #17325f;
}

.pokemon-theme .daily-home-hero p,
.pokemon-theme .daily-home-hero .cm-eyebrow {
  color: rgba(255, 248, 215, 0.92);
}

.pokemon-theme .feature-launch-card,
.pokemon-theme .daily-reminders-card,
.pokemon-theme .daily-board-preview,
.pokemon-theme .student-card,
.pokemon-theme .class-card,
.pokemon-theme .stat-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 226, 0.92)),
    repeating-linear-gradient(135deg, rgba(255, 207, 79, 0.11) 0 6px, transparent 6px 18px);
  border: 3px solid #17325f;
  box-shadow: 0 8px 0 #17325f, 0 18px 36px rgba(23, 50, 95, 0.14);
}

@keyframes animeMascotFloat {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes animeSparkleDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 110px -80px, -90px 100px; }
}

@keyframes animeCardPop {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pet-system-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mode-tab-shell {
  position: relative;
  z-index: 1;
}

.mode-tab-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 10px;
  border: 3px solid #17325f;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(231, 251, 255, 0.9)),
    repeating-linear-gradient(90deg, rgba(255, 207, 79, 0.15) 0 10px, transparent 10px 20px);
  box-shadow: 0 8px 0 #17325f, 0 18px 34px rgba(23, 50, 95, 0.14);
}

.mode-tab-button {
  min-height: 86px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border: 3px solid #17325f;
  border-radius: 18px;
  background: #ffffff;
  color: #17325f;
  box-shadow: 0 5px 0 #17325f;
  text-align: left;
}

.mode-tab-button:hover {
  transform: translateY(-3px);
}

.mode-tab-button.active {
  color: #17325f;
  border-color: #17325f;
  box-shadow: 0 7px 0 #17325f, 0 0 0 5px rgba(255, 207, 79, 0.28);
}

.mode-tab-student.active {
  background: linear-gradient(135deg, #6ee7b7, #c4efff 58%, #ffcf4f);
}

.mode-tab-teacher.active {
  background: linear-gradient(135deg, #ffcf4f, #ffad8c 55%, #9ec6ff);
}

.mode-tab-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.mode-svg,
.card-placeholder-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 0 rgba(23, 50, 95, 0.25));
}

.mode-tab-copy {
  display: grid;
  gap: 3px;
}

.mode-tab-copy strong {
  font-size: clamp(1rem, 2vw, 1.22rem);
  line-height: 1.1;
}

.mode-tab-copy small {
  color: #496b95;
  font-size: 0.78rem;
  line-height: 1.35;
}

.pet-mode-hero {
  position: relative;
  min-height: 250px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(20px, 4vw, 34px);
  border: 4px solid #17325f;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 12px 0 #17325f, 0 28px 60px rgba(23, 50, 95, 0.18);
  animation: animeCardPop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.pet-mode-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18px 22px, rgba(255, 255, 255, 0.42) 0 2px, transparent 3px),
    radial-gradient(circle at 64px 44px, rgba(255, 207, 79, 0.4) 0 3px, transparent 4px);
  background-size: 96px 72px, 124px 92px;
  animation: animeSparkleDrift 16s linear infinite;
  pointer-events: none;
}

.pet-mode-hero.is-student {
  background:
    linear-gradient(120deg, rgba(35, 146, 186, 0.92), rgba(111, 231, 183, 0.8) 56%, rgba(255, 207, 79, 0.82)),
    url('./assets/anime-student-mode.png') right center / auto 120% no-repeat;
}

.pet-mode-hero.is-teacher {
  background:
    linear-gradient(120deg, rgba(23, 50, 95, 0.94), rgba(255, 95, 76, 0.7) 52%, rgba(255, 207, 79, 0.88)),
    url('./assets/anime-teacher-mode.png') right center / auto 120% no-repeat;
}

.pet-mode-copy,
.pet-mode-art-wrap {
  position: relative;
  z-index: 1;
}

.pet-mode-copy {
  max-width: 680px;
  color: #ffffff;
  text-shadow: 0 2px 0 rgba(23, 50, 95, 0.52);
}

.pet-mode-kicker {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff8d7;
  color: #17325f;
  border: 2px solid #17325f;
  box-shadow: 0 3px 0 #17325f;
  font-size: 0.78rem;
  font-weight: 900;
}

.pet-mode-copy h2 {
  margin: 14px 0 8px;
  color: #fff8d7;
  font-size: clamp(2.2rem, 6vw, 4.8rem);
  line-height: 0.92;
  text-shadow: 0 5px 0 #17325f, 0 0 18px rgba(255, 207, 79, 0.28);
}

.pet-mode-copy p {
  max-width: 620px;
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.65;
}

.pet-mode-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.pet-mode-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: 12px;
  background: #ffffff;
  color: #17325f;
  border: 2px solid #17325f;
  box-shadow: 0 3px 0 #17325f;
  font-weight: 900;
}

.pet-mode-art-wrap {
  align-self: stretch;
  display: grid;
  place-items: center;
}

.pet-mode-art {
  width: min(100%, 280px);
  aspect-ratio: 1;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 28px;
  box-shadow: 0 10px 0 #17325f, 0 22px 44px rgba(23, 50, 95, 0.24);
  animation: animeMascotFloat 4.2s ease-in-out infinite;
}

.student-cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
  padding: 8px 0 18px;
}

.student-pet-card {
  min-height: 210px;
  border: 3px solid #17325f;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(231, 251, 255, 0.9)),
    repeating-linear-gradient(135deg, rgba(110, 231, 183, 0.13) 0 8px, transparent 8px 18px);
  box-shadow: 0 8px 0 #17325f, 0 18px 32px rgba(23, 50, 95, 0.16);
  animation: animeCardPop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.student-pet-card:hover {
  border-color: #17325f;
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: 0 12px 0 #17325f, 0 24px 46px rgba(23, 50, 95, 0.22);
}

.student-pet-card .card-number {
  color: #17325f;
  background: #ffcf4f;
  border: 2px solid #17325f;
  box-shadow: 0 3px 0 #17325f;
}

.student-pet-card .card-name {
  color: #17325f;
  font-weight: 900;
}

.student-pet-card .card-score {
  color: #496b95;
  font-weight: 800;
}

.student-pet-card .card-sprite-container {
  min-height: 96px;
}

.student-pet-card .card-sprite-container img,
.pet-sprite-large,
.pet-sprite-medium,
.pet-sprite-thumb {
  background: transparent !important;
  filter: drop-shadow(0 6px 0 rgba(23, 50, 95, 0.16)) drop-shadow(0 12px 18px rgba(23, 50, 95, 0.18));
}

img[src*="assets/pets/pet_"] {
  background: transparent !important;
  object-fit: contain;
}

.student-pet-card .card-sprite-empty {
  width: 74px;
  height: 74px;
  opacity: 0.82;
}

.teacher-command-grid {
  gap: 20px !important;
}

.teacher-roster-panel,
.teacher-command-panel {
  border: 3px solid #17325f !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 215, 0.9)) !important;
  box-shadow: 0 8px 0 #17325f, 0 18px 36px rgba(23, 50, 95, 0.16) !important;
}

.pet-mode-teacher .cm-list-item {
  background: rgba(255, 255, 255, 0.78);
  border: 2px solid rgba(23, 50, 95, 0.14) !important;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.pet-mode-teacher .cm-list-item:hover,
.pet-mode-teacher .cm-list-item.is-active {
  transform: translateX(4px);
  background: #fff8d7;
  border-color: #17325f !important;
}

.game-toast {
  border: 3px solid #17325f !important;
  box-shadow: 0 7px 0 #17325f, 0 18px 38px rgba(23, 50, 95, 0.2) !important;
}

.student-game-console {
  background:
    linear-gradient(180deg, rgba(10, 25, 60, 0.72), rgba(5, 11, 26, 0.88)),
    url('./assets/anime-classroom-hub.png') center / cover;
}

.student-game-console::before {
  background:
    repeating-linear-gradient(90deg, rgba(255, 207, 79, 0.08) 0 4px, transparent 4px 24px),
    repeating-linear-gradient(0deg, rgba(110, 231, 183, 0.06) 0 3px, transparent 3px 24px);
}

.console-header {
  border-bottom-color: #17325f;
  box-shadow: 0 8px 0 #17325f, 0 16px 34px rgba(0, 0, 0, 0.28);
}

.console-tab-btn,
.student-game-console .gacha-button,
.student-game-console .game-btn {
  border: 3px solid #17325f;
  box-shadow: 0 5px 0 #17325f;
}

.console-tab-btn.active {
  box-shadow: 0 5px 0 #17325f, 0 0 0 5px rgba(255, 207, 79, 0.25);
}

@media (max-width: 980px) {
  .pokemon-theme .cm-main::after {
    display: none;
  }

  .pet-mode-hero {
    grid-template-columns: 1fr;
  }

  .pet-mode-art-wrap {
    display: none;
  }

  .teacher-command-grid {
    flex-direction: column;
  }

  .teacher-roster-panel {
    width: 100% !important;
    max-height: none !important;
  }
}

@media (max-width: 620px) {
  .mode-tab-bar {
    grid-template-columns: 1fr;
  }

  .mode-tab-button {
    min-height: 76px;
  }

  .pet-mode-hero {
    min-height: 300px;
    padding: 18px;
    align-items: end;
  }

  .pet-mode-copy h2 {
    font-size: clamp(2rem, 15vw, 3.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pet-mode-art,
  .pet-mode-hero::before,
  .student-pet-card,
  .student-game-console::after,
  .student-game-console .gacha-button {
    animation: none !important;
  }
}

/* Student game console refresh */
.brand-login-button {
  width: fit-content;
  margin-top: 8px;
  padding: 6px 10px;
  border: 2px solid #17325f;
  border-radius: 9px;
  background: #fff8d7;
  color: #17325f;
  box-shadow: 0 3px 0 #17325f;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.brand-login-button:hover {
  transform: translateY(-1px);
  background: #ffcf4f;
}

.student-game-console {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden !important;
  color: #f8fbff;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 207, 79, 0.32), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(110, 231, 183, 0.24), transparent 26%),
    linear-gradient(135deg, rgba(12, 30, 70, 0.9), rgba(20, 15, 46, 0.9)),
    url('./assets/anime-student-mode.png') center / cover !important;
}

/* Ambient Particles Overlay (pull from Grid flow) */
.student-game-console .console-ambient-particles {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

/* Base style for particles */
.student-game-console .particle {
  position: absolute !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%) !important;
  pointer-events: none !important;
}

/* Individual particle placement & floating animations */
.student-game-console .particle-1 {
  width: 12px; height: 12px;
  top: 15%; left: 8%;
  opacity: 0.4;
  animation: console-particle-float-1 8s ease-in-out infinite;
}
.student-game-console .particle-2 {
  width: 8px; height: 8px;
  top: 40%; right: 12%;
  opacity: 0.3;
  animation: console-particle-float-2 12s ease-in-out infinite 1s;
}
.student-game-console .particle-3 {
  width: 14px; height: 14px;
  bottom: 25%; left: 16%;
  opacity: 0.5;
  animation: console-particle-float-3 10s ease-in-out infinite 0.5s;
}
.student-game-console .particle-4 {
  width: 9px; height: 9px;
  top: 25%; right: 30%;
  opacity: 0.35;
  animation: console-particle-float-4 14s ease-in-out infinite 2s;
}
.student-game-console .particle-5 {
  width: 10px; height: 10px;
  bottom: 12%; right: 18%;
  opacity: 0.4;
  animation: console-particle-float-1 9s ease-in-out infinite 1.5s;
}
.student-game-console .particle-6 {
  width: 7px; height: 7px;
  top: 55%; left: 5%;
  opacity: 0.25;
  animation: console-particle-float-2 11s ease-in-out infinite 3s;
}

@keyframes console-particle-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate(15px, -25px) scale(1.2); opacity: 0.6; }
}
@keyframes console-particle-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  50% { transform: translate(-20px, -40px) scale(0.9); opacity: 0.5; }
}
@keyframes console-particle-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50% { transform: translate(25px, -15px) scale(1.15); opacity: 0.7; }
}
@keyframes console-particle-float-4 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
  50% { transform: translate(-10px, -30px) scale(1.3); opacity: 0.55; }
}


.cm-app-shell.has-student-console {
  overflow: hidden;
}

.cm-app-shell.has-student-console .cm-sidebar {
  display: none !important;
}

.cm-app-shell.has-student-console .cm-main {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

.cm-app-shell.has-student-console .cm-topbar {
  display: none !important;
}

.cm-app-shell.has-student-console .cm-content {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.student-game-console::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

.console-exit-button {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(14px, env(safe-area-inset-left));
  z-index: 12020;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 14px 8px 10px;
  border: 3px solid #17325f;
  border-radius: 12px;
  background: #fff8d7;
  color: #17325f;
  box-shadow: 0 5px 0 #17325f, 0 14px 28px rgba(0, 0, 0, 0.22);
  font-weight: 950;
  cursor: pointer;
}

.console-exit-button svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.console-exit-button:hover {
  transform: translateY(-2px);
  background: #ffcf4f;
}

.console-auto-sync-status {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 12020;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  max-width: min(280px, calc(100vw - 28px));
  box-sizing: border-box;
  padding: 8px 13px;
  border: 3px solid #17325f;
  border-radius: 999px;
  background: rgba(244, 255, 238, 0.94);
  color: #155724;
  box-shadow: 0 4px 0 #17325f, 0 12px 26px rgba(0, 0, 0, 0.2);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1.15;
  pointer-events: none;
}

.console-auto-sync-status svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.console-auto-sync-status.is-syncing {
  background: rgba(255, 248, 215, 0.96);
  color: #8a5c00;
}

.console-auto-sync-status.is-limited {
  background: rgba(242, 244, 247, 0.96);
  color: #667085;
}

.student-game-console .console-header {
  position: relative;
  z-index: 2;
  display: grid !important;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 18px 24px 16px 130px !important;
  border: 0 !important;
  border-bottom: 4px solid #17325f !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(230, 247, 255, 0.9)),
    repeating-linear-gradient(135deg, rgba(255, 207, 79, 0.18) 0 8px, transparent 8px 18px);
  color: #17325f;
  box-shadow: 0 8px 0 #17325f, 0 18px 36px rgba(0, 0, 0, 0.28) !important;
  min-height: 90px;
  max-height: 120px;
  box-sizing: border-box;
}

@media (min-width: 801px) {
  .student-game-console .console-header {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }
}

.console-title-lockup p,
.console-section-heading p,
.console-panel-kicker,
.gacha-kicker,
.evo-kicker {
  margin: 0;
  color: #e4563a;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0;
}

.console-title-area h2 {
  margin: 2px 0 8px !important;
  color: #17325f !important;
  font-size: clamp(1.65rem, 3.2vw, 2.5rem) !important;
  line-height: 1 !important;
  text-shadow: 0 3px 0 #ffcf4f;
}

.console-resource-pills {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}

.console-resource-pills span,
.console-token-badge,
.console-section-heading > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 2px solid #17325f;
  border-radius: 10px;
  background: #ffffff;
  color: #17325f !important;
  box-shadow: 0 3px 0 #17325f;
  font-weight: 900;
}

.student-game-console .console-tab-bar {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(82px, 1fr));
  gap: 8px;
  align-self: center;
}

.student-game-console .console-tab-btn {
  min-height: 44px;
  padding: 6px 10px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #17325f !important;
  font-size: 0.9rem !important;
  line-height: 1.15;
}

.student-game-console .console-tab-btn.active {
  background: #ffcf4f !important;
  color: #17325f !important;
}

.console-player-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 3px solid #17325f;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 5px 0 #17325f;
}

.console-player-card img,
.console-player-empty {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

.console-player-card strong,
.console-player-card span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-player-card strong {
  color: #17325f;
  font-size: 0.95rem;
}

.console-player-card span {
  color: #496b95;
  font-size: 0.82rem;
  font-weight: 800;
}

.student-game-console .console-body {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding: 12px clamp(14px, 3vw, 36px) 36px !important;
}

.student-game-console .console-page-content {
  width: min(1180px, 100%);
  min-height: auto !important;
  margin: 0 auto;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.console-section-heading {
  display: none !important;
}

.console-section-heading h3 {
  margin: 2px 0 0;
  color: #fff8d7;
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  text-shadow: 0 3px 0 #17325f;
}

.student-game-console .console-gacha-layout {
  display: grid !important;
  grid-template-columns: minmax(300px, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: start !important;
  margin-top: 0 !important;
}

.console-gacha-stage,
.console-action-panel,
.student-game-console .console-detail-card,
.student-game-console .console-shop-card,
.student-game-console .cm-glass {
  border: 4px solid #17325f !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(232, 249, 255, 0.9)) !important;
  color: #17325f !important;
  box-shadow: 0 9px 0 #17325f, 0 22px 44px rgba(0, 0, 0, 0.24) !important;
}

.console-gacha-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 430px;
  padding: clamp(18px, 4vw, 36px);
  overflow: hidden;
}

.console-gacha-stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px dashed rgba(23, 50, 95, 0.26);
  border-radius: 16px;
  pointer-events: none;
}

.console-gacha-machine-art {
  position: relative;
  z-index: 1;
  width: min(390px, 82vw) !important;
  height: auto !important;
  max-height: 340px;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 10px 0 rgba(23, 50, 95, 0.26)) drop-shadow(0 22px 34px rgba(0, 0, 0, 0.22));
  animation: animeMascotFloat 3.8s ease-in-out infinite;
}

.console-gacha-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 12px;
  width: min(420px, 100%);
  margin-top: 18px;
}

.console-gacha-stats div {
  padding: 10px;
  border: 3px solid #17325f;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 5px 0 #17325f;
  text-align: center;
}

.console-gacha-stats strong {
  display: block;
  color: #e4563a;
  font-size: 1.55rem;
}

.console-gacha-stats span {
  color: #496b95;
  font-weight: 900;
}

.console-action-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 430px;
  padding: clamp(18px, 3vw, 32px);
}

.console-action-panel h3 {
  margin: 4px 0 12px;
  color: #17325f;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
}

.console-action-panel > p:not(.console-panel-kicker) {
  margin: 0 0 20px;
  color: #496b95;
  line-height: 1.7;
  font-weight: 800;
}

.console-pity-track {
  height: 18px;
  margin: 4px 0 22px;
  overflow: hidden;
  border: 3px solid #17325f;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: inset 0 3px 0 rgba(23, 50, 95, 0.12);
}

.console-pity-fill {
  height: 100%;
  border-right: 3px solid #17325f;
  background: linear-gradient(90deg, #6ee7b7, #ffcf4f, #e4563a);
  transition: width 0.45s ease;
}

.student-game-console .gacha-button {
  min-height: 58px;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #e4563a, #c73f30) !important;
  color: #ffffff !important;
  font-size: 1.1rem !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
  animation: gachaButtonPulse 1.8s ease-in-out infinite;
}

.console-warning-text {
  margin-top: 14px;
  color: #c73f30;
  font-weight: 950;
}

.student-game-console .console-shop-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.student-game-console .console-shop-card {
  padding: 18px !important;
}

.student-game-console .console-shop-card img {
  width: min(120px, 42vw) !important;
  height: min(120px, 42vw) !important;
  object-fit: contain;
}

.student-game-console .console-pokedex-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.student-game-console .console-pokedex-left,
.student-game-console .console-pokedex-right {
  min-width: 0;
}

.student-game-console .console-pokedex-grid {
  max-height: min(62vh, 640px);
  overflow: auto;
  padding: 8px;
  border: 4px solid #17325f;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 0 #17325f;
}

.student-game-console .pokedex-slot {
  border: 2px solid #17325f !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 3px 0 #17325f;
}

.student-game-console .pokedex-slot.locked {
  opacity: 0.42;
  background: repeating-linear-gradient(135deg, #e8f2ff 0 6px, #ffffff 6px 14px) !important;
}

.student-game-console .game-btn,
.student-game-console .gacha-button {
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.student-game-console .game-btn:hover,
.student-game-console .gacha-button:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
}

.gacha-overlay-backdrop {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 207, 79, 0.3), transparent 30%),
    rgba(8, 14, 30, 0.78) !important;
  backdrop-filter: blur(8px);
}

.gacha-reveal-scene,
.evolution-scene {
  border: 4px solid #17325f !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(24, 46, 96, 0.98), rgba(12, 24, 58, 0.98)) !important;
  box-shadow: 0 10px 0 #17325f, 0 30px 70px rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
}

.gacha-reveal-scene h2,
.evolution-scene h2 {
  margin: 4px 0 10px !important;
  color: #fff8d7 !important;
  font-size: clamp(1.8rem, 5vw, 3rem) !important;
  text-shadow: 0 4px 0 #17325f;
}

.gacha-reveal-scene > p:not(.gacha-kicker),
.evo-copy {
  color: #d9f7ff !important;
  font-weight: 800;
}

.gacha-animation-container {
  min-height: 330px;
  display: grid;
  place-items: center;
}

.gacha-reveal-card {
  animation: gachaCardReveal 3.15s ease forwards !important;
}

.evolution-scene {
  padding: clamp(18px, 4vw, 34px) !important;
  text-align: center;
}

.evo-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 80px minmax(120px, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 26px;
}

.evo-pet-frame {
  position: relative;
  padding: 16px 10px;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
}

.evo-pet-frame div {
  margin-top: 8px;
  color: #fff8d7;
  font-weight: 950;
}

.evo-old-pet {
  animation: evoOldPhase 2.4s ease-in-out infinite;
}

.evo-new-pet {
  animation: evoNewPhase 1.1s ease-out both;
}

.evo-arrow-beam {
  height: 20px;
  border: 3px solid #17325f;
  border-radius: 999px;
  background: linear-gradient(90deg, #6ee7b7, #fff8d7, #ffcf4f);
  box-shadow: 0 0 24px rgba(255, 207, 79, 0.74);
  animation: evoBeam 1.2s ease-in-out infinite;
}

@keyframes gachaButtonPulse {
  0%, 100% { box-shadow: 0 5px 0 #17325f, 0 0 0 rgba(255, 207, 79, 0); }
  50% { box-shadow: 0 5px 0 #17325f, 0 0 0 8px rgba(255, 207, 79, 0.22); }
}

@keyframes gachaCardReveal {
  0%, 68% { opacity: 0; transform: translateY(18px) scale(0.84); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes evoOldPhase {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(0.92); filter: brightness(1.8); }
}

@keyframes evoNewPhase {
  0% { transform: scale(0.55); opacity: 0; filter: brightness(2.3) blur(8px); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1) blur(0); }
}

@keyframes evoBeam {
  0%, 100% { transform: scaleX(0.78); opacity: 0.75; }
  50% { transform: scaleX(1.08); opacity: 1; }
}

@media (max-width: 800px) {
  .student-game-console .console-header {
    grid-template-columns: 1fr;
    padding: 72px 16px 14px !important;
    max-height: none;
  }

  .student-game-console .console-tab-bar {
    width: 100%;
  }

  .console-player-card {
    grid-template-columns: 48px 1fr;
  }

  .student-game-console .console-gacha-layout,
  .student-game-console .console-pokedex-layout {
    grid-template-columns: 1fr;
  }

  .console-gacha-stage,
  .console-action-panel {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .console-exit-button {
    min-height: 38px;
    padding: 6px 10px;
  }

  .student-game-console .console-header {
    padding-top: 64px !important;
  }

  .student-game-console .console-tab-bar {
    grid-template-columns: 1fr;
  }

  .console-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .console-gacha-stats,
  .evo-stage {
    grid-template-columns: 1fr;
  }

  .evo-arrow-beam {
    width: 20px;
    height: 54px;
    margin: 0 auto;
    background: linear-gradient(180deg, #6ee7b7, #fff8d7, #ffcf4f);
  }
}

@media (prefers-reduced-motion: reduce) {
  .console-gacha-machine-art,
  .student-game-console .gacha-button,
  .gacha-reveal-card,
  .evo-old-pet,
  .evo-new-pet,
  .evo-arrow-beam {
    animation: none !important;
  }
}

/* Battle power and equipment update */
.student-pet-card {
  min-height: 208px;
  aspect-ratio: auto;
  width: 100%;
  box-sizing: border-box;
}

.student-pet-card .battle-power-badge {
  min-width: 96px;
  justify-content: center;
  background: #e4563a;
  color: #ffffff;
}

.student-pet-card .card-sprite-container {
  min-height: 105px;
  overflow: visible;
}

.student-pet-card .card-sprite-container img {
  width: min(120px, 92%) !important;
  height: min(120px, 92%) !important;
  transform-origin: center;
  animation: petFloatLarge 3.4s ease-in-out infinite;
}

.student-pet-card .card-name {
  font-size: 1.05rem;
}

.student-pet-card .card-score {
  font-size: 0.86rem;
}

.student-game-console .console-tab-bar {
  grid-template-columns: repeat(5, minmax(82px, 1fr));
}

.current-pet-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: stretch;
}

.current-pet-stage-card,
.current-pet-control-card,
.current-pet-empty,
.console-shop-status {
  border: 4px solid #17325f;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(232, 249, 255, 0.92)),
    repeating-linear-gradient(135deg, rgba(255, 207, 79, 0.1) 0 8px, transparent 8px 20px);
  color: #17325f;
  box-shadow: 0 9px 0 #17325f, 0 22px 46px rgba(0, 0, 0, 0.24);
}

.current-pet-stage-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  min-height: 560px;
  padding: clamp(18px, 4vw, 36px);
  overflow: hidden;
}

.current-pet-stage-card::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 207, 79, 0.36), transparent 68%);
  filter: blur(10px);
}

.current-pet-hero-img {
  position: relative;
  z-index: 1;
  width: min(448px, 73.6vw);
  height: min(416px, 49.6vh);
  object-fit: contain;
  transform-origin: center;
  filter: drop-shadow(0 12px 0 rgba(23, 50, 95, 0.14)) drop-shadow(0 28px 40px rgba(23, 50, 95, 0.26));
  animation: petFloatLarge 3.6s ease-in-out infinite;
}

.current-pet-nameplate {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  margin-top: 18px;
  padding: 12px;
  border: 3px solid #17325f;
  border-radius: 16px;
  background: #fff8d7;
  box-shadow: 0 5px 0 #17325f;
}

.current-pet-nameplate strong {
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  line-height: 1;
}

.current-pet-nameplate span {
  font-weight: 900;
  color: #496b95;
}

.current-pet-control-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(18px, 3vw, 30px);
}

.battle-power-readout {
  padding: 18px;
  border: 4px solid #17325f;
  border-radius: 18px;
  background: linear-gradient(135deg, #17325f, #284b86);
  color: #fff8d7;
  box-shadow: 0 7px 0 #0d1d3d;
}

.battle-power-readout span {
  display: block;
  color: #6ee7b7;
  font-size: 0.78rem;
  font-weight: 950;
}

.battle-power-readout strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 0.95;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.22);
}

.pet-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.pet-stat-grid div {
  padding: 12px;
  border: 3px solid #17325f;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 5px 0 #17325f;
}

.pet-stat-grid span,
.equipment-slot-card span,
.equipment-card-topline span {
  display: block;
  color: #496b95;
  font-size: 0.74rem;
  font-weight: 950;
}

.pet-stat-grid strong {
  display: block;
  margin-top: 3px;
  color: #17325f;
  font-size: 1.2rem;
}

.current-upgrade-btn {
  min-height: 58px;
  font-size: 1.06rem !important;
}

.pet-feed-effect {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.feed-treat {
  position: absolute;
  width: clamp(62px, 9vw, 92px);
  height: clamp(62px, 9vw, 92px);
  filter: drop-shadow(0 8px 0 rgba(23, 50, 95, 0.18)) drop-shadow(0 18px 24px rgba(23, 50, 95, 0.24));
  transform-origin: center;
}

.feed-treat.treat-1 {
  right: 8%;
  bottom: 24%;
  animation: feedTreatArcOne 1.15s cubic-bezier(0.18, 0.86, 0.25, 1) forwards;
}

.feed-treat.treat-2 {
  right: 12%;
  bottom: 17%;
  width: clamp(50px, 7.5vw, 78px);
  height: clamp(50px, 7.5vw, 78px);
  animation: feedTreatArcTwo 1.08s 0.12s cubic-bezier(0.18, 0.86, 0.25, 1) forwards;
}

.feed-sparkles {
  position: absolute;
  left: 50%;
  top: 43%;
  width: clamp(150px, 26vw, 240px);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.45);
  animation: feedSparkBurst 0.62s 0.72s ease-out forwards;
  filter: drop-shadow(0 4px 0 rgba(23, 50, 95, 0.18));
}

.current-pet-hero-img.pet-fed-bounce {
  animation: petFedBounce 0.86s cubic-bezier(0.18, 0.86, 0.25, 1), petFloatLarge 3.6s 0.86s ease-in-out infinite !important;
}

.equipment-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.equipment-slot-card {
  min-height: 176px;
  padding: 12px;
  border: 3px solid #17325f;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 6px 0 #17325f;
  text-align: center;
}

.equipment-slot-card img,
.empty-equipment-slot {
  width: 86px;
  height: 86px;
  margin: 6px auto;
  object-fit: contain;
}

.equipment-slot-card img {
  animation: petFloatLarge 3.2s ease-in-out infinite;
}

.empty-equipment-slot {
  border: 3px dashed rgba(23, 50, 95, 0.3);
  border-radius: 18px;
  background: rgba(23, 50, 95, 0.04);
}

.equipment-slot-card strong {
  display: block;
  min-height: 38px;
  color: #17325f;
  font-size: 0.9rem;
}

.equipment-slot-card small {
  display: block;
  color: #e4563a;
  font-weight: 900;
}

.mini-text-button {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #e4563a;
  font-weight: 950;
  cursor: pointer;
}

.current-pet-empty {
  display: grid;
  place-items: center;
  min-height: 460px;
  padding: 36px;
  text-align: center;
}

.current-pet-empty img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  animation: petFloatLarge 3.3s ease-in-out infinite;
}

.console-shop-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 18px;
}

.console-shop-status strong {
  font-size: 1.05rem;
}

.console-shop-status span {
  color: #496b95;
  font-weight: 800;
}

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

.equipment-card-topline strong {
  padding: 4px 8px;
  border: 2px solid #17325f;
  border-radius: 9px;
  background: #6ee7b7;
  color: #17325f;
  box-shadow: 0 3px 0 #17325f;
  font-size: 0.76rem;
}

.equipment-shop-icon {
  width: min(148px, 52vw) !important;
  height: min(148px, 52vw) !important;
  margin: 8px auto 10px;
  object-fit: contain;
  animation: petFloatLarge 3.5s ease-in-out infinite;
}

.gacha-prize-card .pet-showcase {
  min-height: 165px;
  overflow: visible;
}

.gacha-prize-pet {
  width: min(190px, 42vw) !important;
  height: min(180px, 25vh) !important;
  transform-origin: center;
  animation: petFloatLarge 3.2s ease-in-out infinite;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid var(--color-glass-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.settings-toggle-row input {
  width: 18px;
  height: 18px;
}

.settings-toggle-row span {
  font-weight: 900;
}

.settings-toggle-row small {
  color: var(--manager-muted);
}

.settings-switch-row {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 14px;
  background: rgba(255, 255, 255, 0.62);
}

.settings-toggle-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.settings-toggle-copy span,
.settings-toggle-copy small {
  overflow-wrap: anywhere;
}

.settings-switch-row > button {
  flex: 0 0 auto;
}

@keyframes petFloatLarge {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1.1); }
  50% { transform: translateY(-10px) rotate(1deg) scale(1.2); }
}

@keyframes feedTreatArcOne {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(12deg) scale(0.75);
  }
  16% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: translate(-220%, -118%) rotate(-12deg) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-275%, -150%) rotate(8deg) scale(0.28);
  }
}

@keyframes feedTreatArcTwo {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-16deg) scale(0.7);
  }
  18% {
    opacity: 1;
  }
  76% {
    opacity: 1;
    transform: translate(-250%, -96%) rotate(18deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-305%, -126%) rotate(-8deg) scale(0.24);
  }
}

@keyframes feedSparkBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45) rotate(-8deg);
  }
  38% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(3deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.38) rotate(8deg);
  }
}

@keyframes petFedBounce {
  0% {
    transform: translateY(0) rotate(-1deg) scale(1.1);
    filter: drop-shadow(0 12px 0 rgba(23, 50, 95, 0.14)) drop-shadow(0 28px 40px rgba(23, 50, 95, 0.26));
  }
  38% {
    transform: translateY(-18px) rotate(2deg) scale(1.28);
    filter: drop-shadow(0 0 0 rgba(23, 50, 95, 0)) drop-shadow(0 0 34px rgba(255, 207, 79, 0.84));
  }
  68% {
    transform: translateY(3px) rotate(-2deg) scale(1.16);
  }
  100% {
    transform: translateY(0) rotate(-1deg) scale(1.1);
    filter: drop-shadow(0 12px 0 rgba(23, 50, 95, 0.14)) drop-shadow(0 28px 40px rgba(23, 50, 95, 0.26));
  }
}

@media (max-width: 800px) {
  .current-pet-layout {
    grid-template-columns: 1fr;
  }

  .current-pet-stage-card {
    min-height: 420px;
  }

  .student-game-console .console-tab-bar {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .student-game-console .console-shop-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  .pet-stat-grid,
  .equipment-slots {
    grid-template-columns: 1fr;
  }

  .console-shop-status {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .student-pet-card .card-sprite-container img,
  .current-pet-hero-img,
  .equipment-slot-card img,
  .equipment-shop-icon,
  .gacha-prize-pet,
  .feed-treat,
  .feed-sparkles,
  .current-pet-hero-img.pet-fed-bounce {
    animation: none !important;
  }
}

/* ─── Shop Sub-Tab Bar ─── */
.shop-sub-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px;
  border: 3px solid #17325f;
  border-radius: 16px;
  background: rgba(255,255,255,0.12);
}

.shop-sub-tab-btn {
  flex: 1;
  min-height: 42px;
  padding: 8px 16px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: #8FA2C4;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shop-sub-tab-btn:hover {
  background: rgba(255,255,255,0.15);
  color: #ffffff;
}

.shop-sub-tab-btn.active {
  border-color: #ffcf4f;
  background: linear-gradient(135deg, #17325f, #1e4280);
  color: #ffcf4f;
  box-shadow: 0 3px 0 #0c1e3a, 0 6px 18px rgba(0,0,0,0.3);
}

.shop-sub-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.shop-tab-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Ensure shop card buttons sit above the shimmer overlay */
.console-shop-card .game-btn,
.console-shop-card button {
  position: relative;
  z-index: 2;
}

/* ─── Shop Card Owned State ─── */
.shop-card-owned {
  opacity: 0.65;
  position: relative;
}

.shop-card-owned::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #27ae60;
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Responsive fixes for teacher hero and student full-screen console */
.pet-mode-hero.is-teacher {
  min-height: clamp(300px, 30vw, 380px);
  align-items: center;
}

.pet-mode-hero.is-teacher .pet-mode-copy {
  max-width: min(640px, 100%);
  padding: 6px 0 8px;
}

.pet-mode-hero.is-teacher .pet-mode-copy h2 {
  margin: 12px 0 10px;
  font-size: clamp(2.35rem, 5.2vw, 4.25rem);
  line-height: 1;
}

.pet-mode-hero.is-teacher .pet-mode-copy p {
  max-width: 580px;
  font-size: clamp(0.95rem, 1.45vw, 1.12rem);
  line-height: 1.55;
}

.pet-mode-hero.is-teacher .pet-mode-badges {
  margin-top: 14px;
  padding-bottom: 4px;
}

.student-game-console {
  width: 100vw !important;
  height: 100vh !important;
}

@supports (height: 100dvh) {
  .student-game-console,
  .cm-app-shell.has-student-console .cm-main,
  .cm-app-shell.has-student-console .cm-content {
    height: 100dvh !important;
  }
}

.student-game-console .console-header,
.student-game-console .console-title-area,
.student-game-console .console-tab-bar,
.student-game-console .console-player-card,
.student-game-console .console-page-content,
.current-pet-layout,
.current-pet-stage-card,
.current-pet-control-card,
.console-gacha-layout,
.student-game-console .console-pokedex-layout {
  min-width: 0 !important;
}

.student-game-console .console-header {
  overflow: hidden;
}

.student-game-console .console-body {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.current-pet-control-card {
  min-height: 0;
}

.current-pet-control-card > div:last-child {
  flex-wrap: wrap !important;
}

.current-pet-control-card > div:last-child .game-btn {
  min-width: 150px;
}

@media (max-width: 1180px) {
  .pet-mode-hero.is-teacher {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 240px);
    min-height: 304px;
    padding: 24px;
  }

  .pet-mode-hero.is-teacher .pet-mode-copy h2 {
    font-size: clamp(2.15rem, 4.8vw, 3.55rem);
  }

  .pet-mode-hero.is-teacher .pet-mode-copy p {
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .pet-mode-hero.is-teacher .pet-mode-art {
    width: min(100%, 220px);
  }

  .student-game-console .console-header {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 280px) !important;
    grid-template-areas:
      "title player"
      "tabs tabs";
    height: auto !important;
    min-height: 126px !important;
    max-height: 168px !important;
    gap: 10px 12px !important;
    padding: 12px 16px 12px 130px !important;
  }

  .student-game-console .console-title-area {
    grid-area: title;
  }

  .student-game-console .console-tab-bar {
    grid-area: tabs;
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px;
  }

  .student-game-console .console-player-card {
    grid-area: player;
    justify-self: end;
    width: min(280px, 100%);
  }

  .console-title-area h2 {
    margin: 2px 0 6px !important;
    font-size: clamp(1.3rem, 2.4vw, 2rem) !important;
  }

  .console-title-lockup p {
    font-size: 0.68rem;
  }

  .console-resource-pills {
    gap: 6px;
  }

  .console-resource-pills span,
  .console-token-badge,
  .console-section-heading > span {
    min-height: 26px;
    padding: 3px 8px;
    font-size: 0.78rem;
  }

  .student-game-console .console-tab-btn {
    min-height: 38px;
    padding: 5px 8px !important;
    font-size: 0.82rem !important;
  }

  .student-game-console .console-body {
    padding: 10px 14px 30px !important;
  }

  .student-game-console .console-page-content {
    width: min(100%, 1040px);
  }

  .current-pet-layout {
    grid-template-columns: minmax(260px, 0.95fr) minmax(300px, 1.05fr);
    gap: 14px;
  }

  .current-pet-stage-card {
    min-height: clamp(320px, 46vh, 420px);
    padding: 16px;
  }

  .current-pet-hero-img {
    width: min(330px, 42vw) !important;
    height: min(300px, 34vh) !important;
  }

  .current-pet-nameplate {
    margin-top: 12px;
    padding: 10px;
  }

  .current-pet-nameplate strong {
    font-size: clamp(1.15rem, 2.7vw, 1.65rem);
  }

  .current-pet-control-card {
    gap: 12px;
    padding: 16px;
  }

  .battle-power-readout {
    padding: 14px;
  }

  .battle-power-readout strong {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
  }

  .pet-stat-grid div {
    padding: 10px;
  }

  .pet-stat-grid strong {
    font-size: 1.05rem;
  }

  .current-upgrade-btn {
    min-height: 48px;
    font-size: 0.95rem !important;
  }

  .equipment-slots {
    gap: 10px;
  }

  .equipment-slot-card {
    min-height: 138px;
    padding: 10px;
  }

  .equipment-slot-card img,
  .empty-equipment-slot {
    width: 62px;
    height: 62px;
  }

  .equipment-slot-card strong {
    min-height: 32px;
    font-size: 0.82rem;
  }

  .equipment-slot-card small {
    font-size: 0.72rem;
  }

  .student-game-console .console-gacha-layout {
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.86fr);
    gap: 14px;
  }

  .console-gacha-stage,
  .console-action-panel {
    min-height: clamp(300px, 43vh, 380px);
    padding: 16px;
  }

  .console-gacha-machine-art {
    max-height: min(260px, 31vh);
  }

  .console-action-panel h3 {
    font-size: clamp(1.75rem, 4vw, 2.7rem);
  }

  .console-action-panel > p:not(.console-panel-kicker) {
    margin-bottom: 14px;
    line-height: 1.55;
  }

  .student-game-console .console-shop-grid,
  .mission-console-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px;
  }
}

@media (max-width: 980px) {
  .pet-mode-hero.is-teacher {
    min-height: auto;
    padding: 22px;
  }

  .pet-mode-hero.is-teacher .pet-mode-copy h2 {
    font-size: clamp(2.1rem, 9vw, 3.4rem);
  }

  .pet-mode-hero.is-teacher .pet-mode-badges {
    gap: 7px;
  }

  .pet-mode-hero.is-teacher .pet-mode-badges span {
    min-height: 30px;
    padding: 4px 10px;
  }
}

@media (max-width: 900px) {
  .student-game-console .console-header {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "tabs"
      "player";
    min-height: 0 !important;
    max-height: none !important;
    padding: 64px 14px 12px !important;
  }

  .student-game-console .console-player-card {
    justify-self: stretch;
    width: 100%;
  }

  .student-game-console .console-tab-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .student-game-console .console-body {
    padding: 10px 12px 28px !important;
  }

  .current-pet-layout,
  .student-game-console .console-gacha-layout,
  .student-game-console .console-pokedex-layout {
    grid-template-columns: 1fr !important;
  }

  .current-pet-stage-card {
    min-height: 320px;
  }

  .current-pet-hero-img {
    width: min(300px, 72vw) !important;
    height: min(270px, 32vh) !important;
  }

  .pet-stat-grid,
  .equipment-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .console-gacha-stage,
  .console-action-panel {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .student-game-console .console-tab-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pet-stat-grid {
    grid-template-columns: 1fr;
  }

  .equipment-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .current-pet-control-card > div:last-child .game-btn {
    min-width: 100%;
  }
}

.owned-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #27ae60;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 800;
}

.btn-disabled {
  background: #4a5568 !important;
  color: #a0aec0 !important;
  cursor: not-allowed;
  box-shadow: 0 3px 0 #2d3748;
}

.btn-yellow {
  background: linear-gradient(180deg, #FFD54F 0%, #FFC107 100%) !important;
  color: #17325f !important;
  border: 2px solid #17325f;
  box-shadow: 0 3px 0 #17325f;
}

.btn-yellow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Pet Visual Effects Container ─── */
.pet-visual-fx-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 180px;
}

.pet-visual-fx-container .current-pet-hero-img {
  position: relative;
  z-index: 2;
}

/* Badge: Feet Glow */
.badge-feet-glow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 40px;
  border-radius: 50%;
  opacity: 0.55;
  z-index: 1;
  animation: feetGlowPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes feetGlowPulse {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.65; transform: translateX(-50%) scale(1.1); }
}

/* Armor: Body Glow */
.armor-body-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  animation: armorGlowPulse 3s ease-in-out infinite;
}

@keyframes armorGlowPulse {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.32; }
}

/* Charm: Floating Particles */
.floating-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.7;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 8px currentColor;
}

.fp-1 { animation: floatParticle1 4s ease-in-out infinite; top: 15%; left: 10%; }
.fp-2 { animation: floatParticle2 4.5s ease-in-out infinite; top: 25%; right: 8%; }
.fp-3 { animation: floatParticle3 3.8s ease-in-out infinite; bottom: 20%; left: 15%; }
.fp-4 { animation: floatParticle4 5s ease-in-out infinite; top: 10%; right: 20%; }
.fp-5 { animation: floatParticle5 4.2s ease-in-out infinite; bottom: 30%; right: 12%; }
.fp-6 { animation: floatParticle6 3.5s ease-in-out infinite; top: 50%; left: 5%; }

@keyframes floatParticle1 {
  0% { transform: translate(0, 0); opacity: 0.5; }
  25% { transform: translate(8px, -12px); opacity: 0.9; }
  50% { transform: translate(-4px, -20px); opacity: 0.6; }
  75% { transform: translate(12px, -8px); opacity: 0.85; }
  100% { transform: translate(0, 0); opacity: 0.5; }
}
@keyframes floatParticle2 {
  0% { transform: translate(0, 0); opacity: 0.6; }
  33% { transform: translate(-10px, -15px); opacity: 0.9; }
  66% { transform: translate(5px, -25px); opacity: 0.5; }
  100% { transform: translate(0, 0); opacity: 0.6; }
}
@keyframes floatParticle3 {
  0% { transform: translate(0, 0); opacity: 0.7; }
  50% { transform: translate(15px, -18px); opacity: 0.4; }
  100% { transform: translate(0, 0); opacity: 0.7; }
}
@keyframes floatParticle4 {
  0% { transform: translate(0, 0); opacity: 0.4; }
  40% { transform: translate(-12px, 10px); opacity: 0.85; }
  80% { transform: translate(8px, -14px); opacity: 0.55; }
  100% { transform: translate(0, 0); opacity: 0.4; }
}
@keyframes floatParticle5 {
  0% { transform: translate(0, 0); opacity: 0.65; }
  30% { transform: translate(10px, 8px); opacity: 0.4; }
  60% { transform: translate(-8px, -12px); opacity: 0.9; }
  100% { transform: translate(0, 0); opacity: 0.65; }
}
@keyframes floatParticle6 {
  0% { transform: translate(0, 0); opacity: 0.5; }
  50% { transform: translate(-6px, -16px); opacity: 0.8; }
  100% { transform: translate(0, 0); opacity: 0.5; }
}

/* ─── Equipment Slot Tap Hint ─── */
.slot-tap-hint {
  display: block;
  color: #8FA2C4 !important;
  font-size: 0.7rem !important;
  font-weight: 700;
  opacity: 0.7;
  margin-top: 2px;
}

.equipment-slot-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255,207,79,0.25);
  border-color: #ffcf4f;
}

/* ─── Equipment Popup Modal ─── */
.eq-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease-out;
}

.eq-popup-modal {
  width: min(420px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  border: 3px solid #ffcf4f;
  border-radius: 20px;
  background: linear-gradient(150deg, #1a2d4d, #17325f, #0f2240);
  color: #ffffff;
  box-shadow: 0 8px 0 #0c1e3a, 0 24px 60px rgba(0,0,0,0.5);
  animation: popupSlideUp 0.3s ease-out;
}

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

.eq-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 2px solid rgba(255,207,79,0.3);
}

.eq-popup-header h3 {
  margin: 0;
  color: #ffcf4f;
  font-size: 1.15rem;
  font-weight: 900;
}

.eq-popup-close {
  width: 32px;
  height: 32px;
  border: 2px solid #ffffff40;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.eq-popup-close:hover {
  background: #e4563a;
  border-color: #e4563a;
}

.eq-popup-empty {
  padding: 30px 20px;
  text-align: center;
}

.eq-popup-empty p {
  margin: 0 0 16px;
  color: #8FA2C4;
  font-size: 0.95rem;
}

.eq-popup-list {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eq-popup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  transition: all 0.2s ease;
}

.eq-popup-item.eq-active {
  border-color: #ffcf4f;
  background: rgba(255,207,79,0.1);
}

.eq-popup-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.eq-popup-item-info img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
  padding: 4px;
}

.eq-popup-item-info strong {
  display: block;
  color: #ffffff;
  font-size: 0.9rem;
}

.eq-popup-item-info span {
  display: block;
  color: #8FA2C4;
  font-size: 0.78rem;
  font-weight: 700;
}

.eq-popup-item-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.eq-active-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  background: #27ae60;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Legendary Draw Special Effects */
.gacha-overlay-backdrop.is-legendary-draw {
  background: radial-gradient(circle, rgba(255, 223, 0, 0.45) 0%, rgba(10, 18, 44, 0.96) 75%) !important;
  animation: legendary-bg-flash 0.8s ease-out;
}

@keyframes legendary-bg-flash {
  0% { background-color: rgba(255, 255, 255, 1); }
  50% { background-color: rgba(255, 215, 0, 0.8); }
  100% { background-color: rgba(10, 18, 44, 0.96); }
}

.gacha-reveal-scene.legendary-reveal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  margin-top: -450px;
  margin-left: -450px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 215, 0, 0) 0deg 15deg, rgba(255, 215, 0, 0.16) 15deg 30deg);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  animation: legendary-sunburst-spin 25s linear infinite;
}

@keyframes legendary-sunburst-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Gold sparkle particles */
.legendary-sparkle-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 13500;
  background-image: 
    radial-gradient(circle at 30% 40%, #ffd700 0.5%, transparent 1%),
    radial-gradient(circle at 70% 30%, #ffd700 0.6%, transparent 1.2%),
    radial-gradient(circle at 40% 70%, #ffcf4f 0.5%, transparent 1.1%),
    radial-gradient(circle at 80% 80%, #ffd700 0.4%, transparent 0.9%),
    radial-gradient(circle at 20% 80%, #ffd700 0.7%, transparent 1.4%),
    radial-gradient(circle at 50% 20%, #ffd700 0.5%, transparent 1%),
    radial-gradient(circle at 60% 60%, #ffcf4f 0.6%, transparent 1.2%);
  background-size: 100% 100%;
  animation: legendary-sparkles-fade 3s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes legendary-sparkles-fade {
  0% { opacity: 0; transform: scale(0.6) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3) rotate(35deg); }
}

/* Legendary Pokéball specific effects during gacha pull */
.is-legendary-draw .gacha-pokeball-wobble {
  animation: gacha-shake-and-burst 2.8s cubic-bezier(.36,.07,.19,.97) forwards, legendary-wobble-pulse 0.5s ease-in-out infinite alternate !important;
}
.is-legendary-draw .gacha-pokeball-img {
  filter: drop-shadow(0 8px 20px rgba(255, 215, 0, 0.8)) !important;
}
@keyframes legendary-wobble-pulse {
  0% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)) brightness(1); }
  100% { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) brightness(1.3); }
}

/* Pet missions and teacher settings */
.pet-teacher-mission-stack {
  display: grid;
  gap: 18px;
}

.pet-teacher-settings-panel,
.pet-mission-manager {
  padding: 18px;
  border-radius: 16px;
}

.pet-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px solid rgba(255, 207, 79, 0.35);
}

.pet-panel-head h3 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 1.22rem;
}

.mission-ratio-readout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 2px solid #17325f;
  border-radius: 12px;
  background: #ffcf4f;
  color: #17325f;
  box-shadow: 0 4px 0 #17325f;
  font-weight: 950;
}

.ratio-control-row,
.mission-create-form {
  display: grid;
  gap: 10px;
  align-items: end;
}

.ratio-control-row {
  grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.7fr) auto;
}

.mission-create-form {
  grid-template-columns: minmax(220px, 1.2fr) minmax(130px, 0.7fr) minmax(96px, 0.45fr) minmax(110px, 0.55fr) auto;
}

.ratio-control-row label {
  display: grid;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--color-text-secondary);
}

.ratio-control-row select,
.ratio-control-row input,
.mission-create-form input,
.mission-create-form select {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 2px solid #17325f;
  border-radius: 10px;
  background: rgba(255,255,255,0.92);
  color: #17325f;
  font-weight: 850;
}

.ratio-control-row p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--manager-muted);
  font-size: 0.85rem;
}

.mission-review-board {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 14px;
  margin-top: 16px;
}

.mission-review-column {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  border: 2px solid rgba(23, 50, 95, 0.2);
  border-radius: 14px;
  background: rgba(255,255,255,0.52);
}

.mission-review-column h4 {
  margin: 0;
  color: #17325f;
  font-size: 1rem;
}

.mission-review-row,
.mission-admin-card,
.mission-console-card {
  display: grid;
  gap: 10px;
  border: 2px solid #17325f;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf0, #eef9ff);
  box-shadow: 0 5px 0 #17325f, 0 12px 26px rgba(23, 50, 95, 0.15);
}

.mission-review-row,
.mission-admin-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 12px;
}

.mission-admin-card {
  grid-template-columns: 1fr;
  align-items: stretch;
  position: relative;
  padding: 14px 12px 12px 44px;
}

.mission-delete-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 3px solid #17325f;
  border-radius: 999px;
  background: #ff8a8a;
  color: #17325f;
  box-shadow: 0 3px 0 #17325f;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.mission-delete-button:hover {
  background: #ffb0a3;
  transform: translateY(-1px);
}

.mission-delete-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #17325f;
}

.mission-review-row strong,
.mission-admin-card strong {
  display: block;
  color: #17325f;
  font-size: 0.98rem;
}

.mission-review-row span,
.mission-admin-card span {
  display: block;
  color: rgba(23, 50, 95, 0.72);
  font-size: 0.82rem;
  font-weight: 800;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.mission-review-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mission-admin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(132px, 1fr));
  gap: 8px;
}

.mission-admin-actions .game-btn {
  min-width: 0;
  padding: 9px 13px;
  font-size: 0.86rem;
}

.mission-admin-card.is-disabled {
  opacity: 0.62;
  filter: grayscale(0.45);
}

.mission-empty-note,
.mission-console-empty {
  min-height: 112px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 2px dashed rgba(23, 50, 95, 0.25);
  border-radius: 14px;
  color: rgba(23, 50, 95, 0.72);
  font-weight: 850;
}

.teacher-student-missions-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
}

.teacher-student-missions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(23, 50, 95, 0.22);
}

.teacher-student-missions-head h3 {
  margin: 0;
  color: #17325f;
  font-size: 1.15rem;
  line-height: 1.15;
}

.teacher-student-missions-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  border: 2px solid #17325f;
  border-radius: 999px;
  background: #ffcf4f;
  color: #17325f;
  font-size: 0.78rem;
  font-weight: 950;
}

.teacher-student-mission-list {
  display: grid;
  gap: 10px;
}

.teacher-student-mission-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 2px solid #17325f;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf0, #eef9ff);
  box-shadow: 0 5px 0 #17325f, 0 12px 24px rgba(23, 50, 95, 0.13);
}

.teacher-student-mission-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.teacher-student-mission-main strong {
  color: #17325f;
  overflow-wrap: anywhere;
}

.teacher-student-mission-main > span {
  color: rgba(23, 50, 95, 0.72);
  font-size: 0.84rem;
  font-weight: 850;
}

.teacher-student-mission-row .game-btn {
  min-width: 0;
  white-space: normal;
}

.mission-console-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.mission-console-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.mission-console-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 12% 18%, rgba(255, 207, 79, 0.32), transparent 28%);
}

.mission-console-card > * {
  position: relative;
  z-index: 1;
}

.mission-console-main {
  display: grid;
  gap: 6px;
}

.mission-type-badge {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  border: 2px solid #17325f;
  color: #17325f;
  background: #ffcf4f;
  font-size: 0.74rem;
  font-weight: 950;
}

.mission-type-badge.is-daily {
  background: #9cf1ff;
}

.mission-console-card h4 {
  margin: 0;
  color: #17325f;
  font-size: 1.1rem;
}

.mission-console-card p {
  margin: 0;
  color: rgba(23, 50, 95, 0.72);
  font-weight: 800;
}

.mission-console-reward {
  display: grid;
  place-items: center;
  justify-self: end;
  align-self: center;
  width: 74px;
  height: 74px;
  border: 2px solid #17325f;
  border-radius: 16px;
  background: #fff4a8;
  color: #17325f;
}

.mission-console-reward strong {
  font-size: 1.35rem;
  line-height: 1;
}

.mission-console-reward span {
  font-size: 0.78rem;
  font-weight: 900;
}

.mission-status-approved {
  background: linear-gradient(180deg, #ecfff2, #e7fbff);
}

.mission-status-submitted {
  background: linear-gradient(180deg, #fff8da, #edf8ff);
}

.mission-filter-bar,
.mission-card-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.mission-filter-bar {
  padding: 8px;
  border: 3px solid #17325f;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 5px 0 #17325f;
}

.mission-filter-chip,
.mission-category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  max-width: 100%;
  padding: 5px 11px;
  border: 2px solid #17325f;
  border-radius: 999px;
  background: #ffffff;
  color: #17325f;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.1;
  overflow-wrap: anywhere;
  white-space: normal;
}

.mission-filter-chip {
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}

.mission-filter-chip.active,
.mission-filter-chip:hover {
  background: #ffcf4f;
  transform: translateY(-1px);
}

.mission-category-badge.tone-cyan,
.mission-filter-chip.tone-cyan.active { background: #9cf1ff; }
.mission-category-badge.tone-yellow,
.mission-filter-chip.tone-yellow.active { background: #ffcf4f; }
.mission-category-badge.tone-red,
.mission-filter-chip.tone-red.active { background: #ffb6a3; }
.mission-category-badge.tone-green,
.mission-filter-chip.tone-green.active { background: #b9ffd1; }
.mission-category-badge.tone-blue,
.mission-filter-chip.tone-blue.active { background: #b9d7ff; }
.mission-category-badge.tone-purple,
.mission-filter-chip.tone-purple.active { background: #dcc7ff; }
.mission-category-badge.tone-custom,
.mission-filter-chip.tone-custom.active { background: #fff8d7; }

.mission-template-library {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 2px solid rgba(23, 50, 95, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.54);
}

.mission-template-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mission-template-head h4,
.mission-template-head p {
  margin: 0;
}

.mission-template-head h4 {
  color: #17325f;
  font-size: 1.05rem;
}

.mission-template-head p {
  color: rgba(23, 50, 95, 0.68);
  font-weight: 800;
  font-size: 0.86rem;
}

.mission-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.mission-template-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 2px solid #17325f;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf0, #eef9ff);
  box-shadow: 0 4px 0 #17325f;
}

.mission-template-card strong {
  color: #17325f;
  line-height: 1.25;
}

.mission-template-card > span {
  color: rgba(23, 50, 95, 0.72);
  font-weight: 900;
}

.mission-template-actions,
.mission-custom-category-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mission-template-actions .game-btn {
  flex: 1 1 80px;
}

.mission-custom-category-row input {
  flex: 1 1 220px;
}

.leaderboard-console-page {
  gap: 16px;
}

.pet-leaderboard-list,
.teacher-leaderboard-list {
  display: grid;
  gap: 10px;
}

.pet-leaderboard-row,
.teacher-leaderboard-row {
  display: grid;
  align-items: center;
  gap: 10px;
  border: 2px solid #17325f;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  color: #17325f;
  box-shadow: 0 5px 0 #17325f;
}

.pet-leaderboard-row {
  grid-template-columns: 54px 64px minmax(0, 1fr) minmax(86px, auto) minmax(92px, auto);
  padding: 12px;
}

.teacher-leaderboard-row {
  grid-template-columns: 48px 46px minmax(0, 1fr) 72px;
  padding: 9px 10px;
}

.leaderboard-rank,
.teacher-leaderboard-row > strong {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: 12px;
  background: #ffcf4f;
  border: 2px solid #17325f;
  font-weight: 950;
}

.pet-leaderboard-row.rank-1 .leaderboard-rank,
.teacher-leaderboard-row.rank-1 > strong {
  background: #fff4a8;
  box-shadow: 0 0 0 4px rgba(255, 207, 79, 0.28);
}

.leaderboard-pet,
.teacher-leaderboard-row img,
.leaderboard-pet-empty {
  width: 54px;
  height: 54px;
}

.teacher-leaderboard-row img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.leaderboard-pet {
  display: grid;
  place-items: center;
}

.leaderboard-pet img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 5px 0 rgba(23, 50, 95, 0.2));
}

.leaderboard-pet-empty {
  display: grid;
  place-items: center;
  border: 2px dashed rgba(23, 50, 95, 0.36);
  border-radius: 12px;
  color: rgba(23, 50, 95, 0.62);
  font-weight: 950;
}

.leaderboard-main {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.leaderboard-main strong,
.teacher-leaderboard-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #17325f;
}

.leaderboard-main span,
.teacher-leaderboard-row span,
.leaderboard-token {
  color: rgba(23, 50, 95, 0.68);
  font-size: 0.84rem;
  font-weight: 850;
}

.leaderboard-stat {
  display: grid;
  place-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: #17325f;
  color: #fff8d7;
}

.leaderboard-stat strong {
  font-size: 1.3rem;
  line-height: 1;
}

.leaderboard-stat span {
  font-size: 0.72rem;
  font-weight: 950;
}

.leaderboard-token {
  justify-self: end;
  white-space: nowrap;
}

.teacher-leaderboard-panel {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 16px;
}

.teacher-leaderboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: 14px;
}

.teacher-leaderboard-row em {
  justify-self: end;
  color: #17325f;
  font-style: normal;
  font-size: 1.2rem;
  font-weight: 950;
}

.teacher-leaderboard-alerts {
  display: grid;
  gap: 10px;
  align-content: start;
}

.teacher-leaderboard-alerts > div {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 14px;
  border: 2px solid rgba(23, 50, 95, 0.22);
  border-radius: 14px;
  background: rgba(255, 248, 215, 0.72);
}

.teacher-leaderboard-alerts strong {
  color: #17325f;
}

.teacher-leaderboard-alerts span {
  color: rgba(23, 50, 95, 0.72);
  font-weight: 850;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .ratio-control-row,
  .mission-create-form,
  .mission-review-board,
  .teacher-leaderboard-grid,
  .mission-review-row,
  .mission-admin-card,
  .mission-console-card {
    grid-template-columns: 1fr;
  }

  .mission-review-actions {
    justify-content: stretch;
  }

  .mission-admin-actions {
    justify-content: stretch;
  }

  .mission-admin-actions .game-btn {
    flex: 1 1 150px;
  }

  .mission-console-reward {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 58px;
    justify-self: stretch;
    gap: 6px;
    padding: 10px 14px;
  }

  .pet-leaderboard-row {
    grid-template-columns: 44px 54px minmax(0, 1fr) minmax(76px, auto);
  }

  .leaderboard-token {
    grid-column: 3 / -1;
    justify-self: start;
  }
}

@media (max-width: 620px) {
  .mission-template-head {
    align-items: stretch;
    flex-direction: column;
  }

  .pet-leaderboard-row,
  .teacher-leaderboard-row {
    grid-template-columns: 42px 48px minmax(0, 1fr);
  }

  .leaderboard-stat,
  .teacher-leaderboard-row em {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* Responsive stabilization for iPad 9/10 game console and teacher pet operations */
.student-game-console {
  container-type: inline-size;
}

.student-game-console .console-header {
  flex: 0 0 auto;
  overflow: visible !important;
  grid-template-columns: minmax(250px, 0.86fr) minmax(420px, 1.18fr) minmax(172px, 0.56fr) !important;
  gap: clamp(8px, 1.1vw, 14px) !important;
  max-height: none !important;
}

.student-game-console .console-title-area,
.student-game-console .console-title-lockup,
.student-game-console .console-player-card,
.student-game-console .leaderboard-main {
  min-width: 0;
}

.student-game-console .console-tab-bar {
  min-width: 0;
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch;
}

.student-game-console .console-tab-btn {
  width: 100%;
  min-width: 0;
  min-height: clamp(36px, 4.6cqw, 44px);
  padding: 5px clamp(5px, 0.9cqw, 10px) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.72rem, 1.08cqw, 0.9rem) !important;
  line-height: 1.08;
}

.console-title-lockup p {
  font-size: clamp(0.62rem, 0.9cqw, 0.74rem);
}

.console-title-area h2 {
  font-size: clamp(1.45rem, 2.7cqw, 2.45rem) !important;
  overflow-wrap: anywhere;
}

.console-resource-pills {
  min-width: 0;
}

.console-resource-pills span,
.console-token-badge,
.console-section-heading > span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.72rem, 0.95cqw, 0.9rem);
}

.student-game-console .console-player-card {
  justify-self: end;
  width: min(218px, 100%);
  grid-template-columns: clamp(40px, 5cqw, 52px) minmax(0, 1fr);
  padding: clamp(6px, 0.8cqw, 8px);
}

.student-game-console .console-player-card img,
.student-game-console .console-player-empty {
  width: clamp(40px, 5cqw, 52px);
  height: clamp(40px, 5cqw, 52px);
}

.student-game-console .console-player-card strong {
  font-size: clamp(0.78rem, 0.95cqw, 0.95rem);
}

.student-game-console .console-player-card span {
  font-size: clamp(0.68rem, 0.82cqw, 0.82rem);
}

.pet-leaderboard-list {
  min-width: 0;
}

.pet-leaderboard-row {
  min-width: 0;
  grid-template-columns: clamp(38px, 4.8cqw, 54px) clamp(48px, 6cqw, 64px) minmax(0, 1fr) minmax(68px, auto) minmax(78px, auto);
  gap: clamp(6px, 0.9cqw, 10px);
  padding: clamp(8px, 1.2cqw, 12px);
}

.leaderboard-pet,
.leaderboard-pet-empty {
  width: clamp(46px, 6cqw, 54px);
  height: clamp(46px, 6cqw, 54px);
}

.leaderboard-pet img {
  width: clamp(52px, 7cqw, 62px);
  height: clamp(52px, 7cqw, 62px);
}

.leaderboard-main strong,
.teacher-leaderboard-row b {
  font-size: clamp(0.82rem, 1.05cqw, 1rem);
}

.leaderboard-stat {
  min-width: 0;
  padding: 7px 8px;
}

.leaderboard-stat strong {
  font-size: clamp(1rem, 1.7cqw, 1.3rem);
}

.leaderboard-token {
  min-width: 0;
  font-size: clamp(0.72rem, 0.95cqw, 0.84rem);
}

.pet-teacher-ops-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.pet-teacher-ops-head {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  padding: 18px;
  border: 3px solid #17325f;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(232,249,255,0.9)),
    repeating-linear-gradient(135deg, rgba(255,207,79,0.12) 0 8px, transparent 8px 20px);
  box-shadow: 0 7px 0 #17325f, 0 18px 34px rgba(23, 50, 95, 0.16);
}

.pet-teacher-ops-head h3 {
  margin: 3px 0 0;
  color: #17325f;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.pet-teacher-ops-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pet-teacher-ops-tab {
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 3px solid #17325f;
  border-radius: 12px;
  background: #ffffff;
  color: #17325f;
  box-shadow: 0 4px 0 #17325f;
  font: inherit;
  font-size: clamp(0.82rem, 1.1vw, 0.96rem);
  font-weight: 950;
  cursor: pointer;
}

.pet-teacher-ops-tab.is-active {
  background: #ffcf4f;
  transform: translateY(2px);
  box-shadow: 0 2px 0 #17325f;
}

.pet-teacher-ops-content,
.pet-teacher-ops-content > * {
  min-width: 0;
}

.pet-teacher-ops-content .pet-teacher-settings-panel,
.pet-teacher-ops-content .pet-mission-manager,
.pet-teacher-ops-content .teacher-leaderboard-panel {
  margin: 0;
}

.mission-create-form {
  grid-template-columns: minmax(260px, 1.2fr) minmax(130px, 0.62fr) minmax(88px, 0.38fr) minmax(118px, 0.55fr) minmax(132px, auto);
  gap: 12px;
}

.mission-create-form .game-btn,
.mission-custom-category-row .game-btn,
.mission-template-head .game-btn,
.pet-panel-head .game-btn {
  min-width: max-content;
  white-space: nowrap;
}

.mission-custom-category-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(132px, auto);
  gap: 12px;
  align-items: stretch;
}

.mission-custom-category-row input {
  flex: none;
  width: 100%;
}

.mission-template-library {
  min-width: 0;
}

.mission-template-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

@media (max-width: 1280px) {
  .student-game-console .console-header {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 218px) !important;
    grid-template-areas:
      "title player"
      "tabs tabs";
    padding: 12px 14px 12px 130px !important;
  }

  .student-game-console .console-title-area {
    grid-area: title;
  }

  .student-game-console .console-tab-bar {
    grid-area: tabs;
  }

  .student-game-console .console-player-card {
    grid-area: player;
  }

  .student-game-console .console-tab-btn {
    min-height: 36px;
    font-size: clamp(0.7rem, 1.4cqw, 0.8rem) !important;
  }

  .pet-leaderboard-row {
    grid-template-columns: 44px 54px minmax(0, 1fr) minmax(72px, auto);
  }

  .leaderboard-token {
    grid-column: 3 / -1;
    justify-self: start;
    white-space: normal;
  }

  .mission-create-form {
    grid-template-columns: minmax(280px, 1fr) minmax(130px, 0.45fr) minmax(96px, 0.32fr) minmax(130px, 0.45fr);
  }

  .mission-create-form input[name="missionTitle"] {
    grid-column: 1 / -1;
  }

  .mission-create-form .game-btn {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

@media (max-width: 900px) {
  .student-game-console .console-header {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "tabs"
      "player";
    padding: 64px 12px 12px !important;
  }

  .student-game-console .console-tab-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .student-game-console .console-player-card {
    width: 100%;
    justify-self: stretch;
  }

  .pet-teacher-ops-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .mission-create-form,
  .mission-custom-category-row {
    grid-template-columns: 1fr;
  }

  .mission-create-form input[name="missionTitle"],
  .mission-create-form .game-btn {
    grid-column: auto;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .student-game-console .console-header {
    grid-template-columns: minmax(0, 1fr) minmax(168px, 218px) !important;
    grid-template-areas:
      "title player"
      "tabs tabs";
    padding: 12px 14px 12px 130px !important;
  }

  .student-game-console .console-title-area {
    grid-area: title;
  }

  .student-game-console .console-tab-bar {
    grid-area: tabs;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .student-game-console .console-player-card {
    grid-area: player;
    width: min(218px, 100%);
    justify-self: end;
  }
}

@media (max-width: 620px) {
  .student-game-console .console-tab-bar,
  .pet-teacher-ops-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Final pet layout guard: keeps the game console and mission controls inside their containers. */
.student-game-console .console-header {
  height: auto !important;
  min-height: clamp(94px, 8vw, 118px) !important;
  max-height: none !important;
  gap: clamp(8px, 1vw, 16px) !important;
  align-items: center !important;
  overflow: visible !important;
}
@media (min-width: 1281px) {
  .student-game-console .console-header {
    grid-template-columns: minmax(420px, 0.82fr) minmax(460px, 1fr) minmax(196px, 0.32fr) !important;
  }
}

.student-game-console .console-title-area.console-title-lockup {
  display: grid !important;
  grid-template-columns: minmax(180px, max-content) minmax(0, 1fr);
  align-items: center;
  gap: 6px clamp(8px, 1vw, 14px);
  width: 100%;
  min-width: 0;
}

.student-game-console .console-title-text {
  min-width: 0;
}

.student-game-console .console-title-lockup p {
  margin: 0;
  font-size: clamp(0.62rem, 0.86cqw, 0.76rem);
  line-height: 1.05;
}

.student-game-console .console-title-lockup h2 {
  margin: 2px 0 0 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(1.5rem, 2.45cqw, 2.45rem) !important;
}

.student-game-console .console-student-info {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.student-game-console .pill-icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.student-game-console .console-resource-pills {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(74px, 1fr));
  align-self: center;
  justify-self: start;
  width: min(224px, 100%);
  max-width: 100%;
  gap: 6px;
}

.student-game-console .console-resource-pills span,
.student-game-console .console-token-badge {
  width: 100%;
  min-height: 28px;
  padding: 3px 7px;
  justify-content: center;
  font-size: clamp(0.62rem, 0.78cqw, 0.82rem);
  line-height: 1.05;
}

.student-game-console .console-token-badge {
  animation: none !important;
  text-shadow: none !important;
}

.student-game-console .console-token-badge.token-spend-anim {
  animation: token-spend 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.student-game-console .console-tab-bar {
  align-self: center;
  justify-self: stretch;
  max-width: 100%;
  gap: clamp(6px, 0.8vw, 10px);
}

.student-game-console .console-tab-btn {
  min-width: 0;
  min-height: clamp(38px, 3.8cqw, 52px);
  padding: 6px clamp(5px, 0.8cqw, 10px) !important;
  font-size: clamp(0.7rem, 0.9cqw, 0.92rem) !important;
  line-height: 1.08;
  white-space: normal;
}

.student-game-console .console-player-card {
  position: relative;
  z-index: 3;
  width: min(230px, 100%);
  max-width: 100%;
}

.student-game-console .console-body {
  min-height: 0;
}

.pet-mission-manager {
  overflow: visible !important;
}

.pet-mission-manager .mission-create-form {
  grid-template-columns: minmax(220px, 1.1fr) minmax(120px, 0.45fr) minmax(88px, 0.28fr) minmax(124px, 0.45fr) !important;
  gap: 12px;
  align-items: stretch;
  max-width: 100%;
}

.pet-mission-manager .mission-create-form input[name="missionTitle"] {
  grid-column: auto;
}

.pet-mission-manager .mission-create-form .game-btn {
  grid-column: 1 / -1 !important;
  justify-self: end !important;
  width: min(190px, 100%) !important;
  min-width: 0 !important;
  max-width: 100%;
}

.pet-mission-manager .mission-custom-category-row {
  grid-template-columns: minmax(220px, 1fr) minmax(160px, auto) !important;
  max-width: 100%;
  overflow: visible;
}

.pet-mission-manager .mission-custom-category-row .game-btn {
  width: 100% !important;
  min-width: 0 !important;
}

@media (min-width: 1700px) {
  .student-game-console .console-header {
    grid-template-columns: minmax(550px, 0.88fr) minmax(620px, 1fr) minmax(230px, 0.32fr) !important;
  }

  .student-game-console .console-resource-pills {
    width: min(252px, 100%);
  }
}

@media (min-width: 1281px) and (max-width: 1440px) {
  .student-game-console .console-header {
    grid-template-columns: minmax(400px, 0.78fr) minmax(430px, 1fr) minmax(188px, 0.34fr) !important;
  }

  .student-game-console .console-title-area.console-title-lockup {
    grid-template-columns: minmax(168px, max-content) minmax(0, 1fr);
  }

  .student-game-console .console-resource-pills {
    width: min(196px, 100%);
  }

  .student-game-console .console-player-card {
    width: min(204px, 100%);
  }
}

@media (max-width: 1280px) {
  .student-game-console .console-header {
    min-height: 132px !important;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 224px) !important;
    grid-template-areas:
      "title player"
      "tabs tabs";
    padding: 12px 14px 12px 130px !important;
  }

  .student-game-console .console-title-area.console-title-lockup {
    grid-area: title;
    grid-template-columns: minmax(180px, max-content) minmax(0, 220px);
  }

  .student-game-console .console-tab-bar {
    grid-area: tabs;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .student-game-console .console-player-card {
    grid-area: player;
    justify-self: end;
  }

  .pet-mission-manager .mission-create-form {
    grid-template-columns: minmax(220px, 1fr) minmax(126px, 0.45fr) minmax(88px, 0.32fr) minmax(126px, 0.45fr) !important;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .student-game-console .console-header {
    min-height: 138px !important;
    grid-template-columns: minmax(0, 1fr) minmax(168px, 212px) !important;
    grid-template-areas:
      "title player"
      "tabs tabs";
    padding: 12px 12px 12px 130px !important;
  }

  .student-game-console .console-title-area.console-title-lockup {
    grid-template-columns: minmax(158px, max-content) minmax(0, 190px);
  }

  .student-game-console .console-title-lockup h2 {
    font-size: clamp(1.42rem, 3.5cqw, 1.82rem) !important;
  }

  .student-game-console .console-resource-pills {
    width: min(190px, 100%);
  }

  .student-game-console .console-tab-btn {
    min-height: 38px;
    font-size: clamp(0.66rem, 1.45cqw, 0.78rem) !important;
  }
}

@media (max-width: 760px) {
  .student-game-console .console-header {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "tabs"
      "player";
    padding: 62px 12px 12px !important;
  }

  .student-game-console .console-title-area.console-title-lockup {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .student-game-console .console-resource-pills {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-game-console .console-player-card {
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 980px) {
  .pet-mission-manager .mission-create-form {
    grid-template-columns: minmax(0, 1fr) minmax(118px, 0.52fr) !important;
  }

  .pet-mission-manager .mission-create-form input[name="missionTitle"],
  .pet-mission-manager .mission-create-form .game-btn {
    grid-column: 1 / -1 !important;
  }

  .pet-mission-manager .mission-create-form .game-btn {
    justify-self: stretch !important;
    width: 100% !important;
  }

  .pet-mission-manager .mission-custom-category-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .student-game-console .console-tab-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Refined mission composer layout */
.pet-mission-manager .mission-compose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 16px 0 18px;
}

.pet-mission-manager .mission-composer-card {
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  gap: 14px;
  padding: 18px 20px 22px;
  border: 3px solid #17325f;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 252, 232, 0.84)),
    repeating-linear-gradient(135deg, rgba(255, 207, 79, 0.08) 0 10px, transparent 10px 22px);
  box-shadow: 0 6px 0 #17325f, 0 18px 34px rgba(23, 50, 95, 0.12);
}

.pet-mission-manager .mission-category-composer {
  padding-bottom: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(237, 255, 244, 0.86)),
    repeating-linear-gradient(135deg, rgba(110, 231, 183, 0.08) 0 10px, transparent 10px 22px);
}

.pet-mission-manager .mission-composer-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.pet-mission-manager .mission-composer-head h4,
.pet-mission-manager .mission-composer-head p {
  margin: 0;
}

.pet-mission-manager .mission-composer-head h4 {
  color: #17325f;
  font-size: 1.08rem;
  line-height: 1.15;
}

.pet-mission-manager .mission-composer-head p {
  margin-top: 4px;
  color: rgba(23, 50, 95, 0.72);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.35;
}

.pet-mission-manager .mission-composer-head > span {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 32px;
  box-sizing: border-box;
  margin: 0 0 0 12px;
  padding: 5px 10px;
  border: 2px solid #17325f;
  border-radius: 999px;
  background: #ffcf4f;
  color: #17325f;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
}

.pet-mission-manager .mission-create-form.mission-create-form-refined {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.4fr) minmax(130px, 0.58fr) minmax(86px, 0.34fr) minmax(128px, 0.52fr) !important;
  gap: 12px !important;
  align-items: end !important;
  max-width: 100%;
}

.pet-mission-manager .mission-field {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #17325f;
  font-size: 0.78rem;
  font-weight: 950;
}

.pet-mission-manager .mission-field > span {
  line-height: 1;
}

.pet-mission-manager .mission-field input,
.pet-mission-manager .mission-field select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  box-sizing: border-box;
}

.pet-mission-manager .mission-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.pet-mission-manager .mission-form-actions .game-btn {
  width: min(220px, 100%) !important;
  min-width: 0 !important;
}

.pet-mission-manager .mission-custom-category-row.mission-category-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) !important;
  gap: 12px !important;
  align-items: end;
  padding-bottom: 12px;
  overflow: visible;
}

.pet-mission-manager .mission-custom-category-row.mission-category-form input {
  width: 100%;
  min-width: 0;
}

.pet-mission-manager .mission-custom-category-row.mission-category-form .game-btn {
  width: min(180px, 100%) !important;
  min-width: 0 !important;
  justify-self: end;
  margin-bottom: 4px;
}

@media (max-width: 1180px) {
  .pet-mission-manager .mission-compose-grid {
    grid-template-columns: 1fr;
  }

  .pet-mission-manager .mission-custom-category-row.mission-category-form {
    grid-template-columns: minmax(0, 1fr) minmax(150px, auto) !important;
    align-items: end;
  }
}

@media (max-width: 920px) {
  .pet-mission-manager .mission-create-form.mission-create-form-refined {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.45fr);
  }

  .pet-mission-manager .mission-title-field,
  .pet-mission-manager .mission-form-actions {
    grid-column: 1 / -1;
  }

  .pet-mission-manager .mission-form-actions .game-btn {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .pet-mission-manager .mission-create-form.mission-create-form-refined,
  .pet-mission-manager .mission-custom-category-row.mission-category-form {
    grid-template-columns: 1fr !important;
  }

  .pet-mission-manager .mission-composer-head {
    grid-template-columns: 1fr;
  }

  .pet-mission-manager .mission-composer-head > span {
    justify-self: start;
    margin-left: 0;
  }
}

/* Google login gate and pet password settings */
.pet-login-gate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 46px);
  background:
    linear-gradient(180deg, rgba(13, 28, 62, 0.82), rgba(8, 12, 32, 0.9)),
    radial-gradient(circle at 18% 18%, rgba(255, 207, 79, 0.3), transparent 28%),
    radial-gradient(circle at 84% 72%, rgba(110, 231, 183, 0.24), transparent 32%);
  backdrop-filter: blur(14px);
}

.pet-login-gate-backdrop.is-inline {
  position: fixed;
  min-height: 0;
  border: 0;
  border-radius: 0;
  overflow: auto;
  box-shadow: none;
}

.pet-login-gate-card {
  position: relative;
  width: min(520px, 100%);
  padding: clamp(22px, 4vw, 34px);
  border: 4px solid #17325f;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 250, 255, 0.96)),
    repeating-linear-gradient(135deg, rgba(255, 207, 79, 0.14) 0 8px, transparent 8px 20px);
  color: #17325f;
  text-align: center;
  box-shadow: 0 9px 0 #17325f, 0 26px 54px rgba(0, 0, 0, 0.25);
}

.pet-login-gate-card::before,
.pet-login-gate-card::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
  border: 3px solid rgba(23, 50, 95, 0.22);
  border-radius: 18px;
  transform: rotate(12deg);
}

.pet-login-gate-card::before {
  top: 18px;
  left: 18px;
  background: rgba(255, 207, 79, 0.28);
}

.pet-login-gate-card::after {
  right: 18px;
  bottom: 18px;
  background: rgba(110, 231, 183, 0.26);
  transform: rotate(-10deg);
}

.pet-login-crest {
  position: relative;
  z-index: 1;
  width: 112px;
  height: 112px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border: 4px solid #17325f;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5959 0 48%, #ffffff 49% 100%);
  box-shadow: 0 7px 0 #17325f, 0 18px 34px rgba(23, 50, 95, 0.18);
  animation: pokeball-wobble 2.8s ease-in-out infinite;
}

.pet-login-crest.is-key {
  background: linear-gradient(180deg, #ffcf4f, #fff8d7);
}

.pet-login-crest svg {
  width: 78px;
  height: 78px;
  fill: none;
  stroke: #17325f;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pet-login-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 6px;
  color: #e4563a;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
}

.pet-login-gate-card h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #17325f;
  font-size: clamp(1.7rem, 5vw, 2.65rem);
  line-height: 1.05;
  text-shadow: 0 3px 0 #ffcf4f;
}

.pet-login-gate-card p {
  position: relative;
  z-index: 1;
  margin: 12px auto 18px;
  max-width: 34em;
  color: #496b95;
  font-weight: 800;
  line-height: 1.55;
}

.pet-google-login-button,
.pet-login-secondary-button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  min-width: min(280px, 100%);
  padding: 10px 18px;
  border: 4px solid #17325f;
  border-radius: 14px;
  color: #17325f;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.pet-google-login-button {
  background: linear-gradient(180deg, #ffffff, #e9f8ff);
  box-shadow: 0 6px 0 #17325f, 0 16px 28px rgba(23, 50, 95, 0.16);
}

.pet-google-login-button.is-password {
  background: linear-gradient(180deg, #4bb857, #2f973d);
  color: #ffffff;
}

.pet-login-secondary-button {
  margin-top: 12px;
  min-height: 40px;
  min-width: min(190px, 100%);
  border-width: 3px;
  background: #fff8d7;
  box-shadow: 0 4px 0 #17325f;
}

.pet-google-login-button:not(:disabled):hover,
.pet-login-secondary-button:hover {
  transform: translateY(-2px);
  filter: saturate(1.05);
}

.pet-google-login-button:disabled {
  opacity: 0.62;
  cursor: wait;
}

.google-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 3px solid #17325f;
  border-radius: 999px;
  background: #ffffff;
  color: #e4563a;
  box-shadow: 0 2px 0 #17325f;
  font-weight: 950;
}

.pet-login-user {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 12px;
  border: 3px solid #17325f;
  border-radius: 999px;
  background: #fff8d7;
  color: #17325f;
  font-weight: 900;
}

.pet-login-user img {
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

.pet-login-gate-card small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 12px;
  color: #6b7890;
  font-weight: 800;
}

.pet-password-input {
  position: relative;
  z-index: 1;
  width: min(260px, 100%);
  margin: 0 auto 14px;
  text-align: center;
  letter-spacing: 0.26em;
  font-size: 1.3rem;
  font-weight: 950;
}

.pet-password-settings {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.pet-password-field {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 2px solid rgba(23, 50, 95, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
}

.pet-password-field span,
.pet-password-toggle span {
  color: #17325f;
  font-weight: 950;
}

.pet-password-field input {
  max-width: 220px;
  letter-spacing: 0.16em;
}

.pet-password-field small,
.pet-password-toggle small {
  color: #6b7890;
  font-weight: 800;
}

.pet-password-toggle {
  align-items: flex-start;
  padding: 12px;
  border: 2px solid rgba(23, 50, 95, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
}

@media (max-width: 620px) {
  .pet-login-gate-backdrop {
    padding: 14px;
  }

  .pet-login-gate-card {
    padding: 20px 16px;
  }

  .pet-login-crest {
    width: 92px;
    height: 92px;
  }

  .pet-login-crest svg {
    width: 62px;
    height: 62px;
  }
}

/* Zoom and narrow-window guards for teacher pet tools. */
.pet-system-page,
.pet-system-layout,
.teacher-command-grid,
.teacher-control-panel,
.teacher-roster-panel,
.teacher-command-panel,
.pet-teacher-ops-panel,
.pet-teacher-ops-content,
.pet-mission-manager,
.mission-template-library,
.mission-template-card,
.mission-composer-card,
.mission-review-column,
.mission-admin-card,
.teacher-student-missions-panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.teacher-command-grid {
  align-items: flex-start;
}

.teacher-control-panel,
.teacher-command-panel {
  overflow-wrap: anywhere;
}

.teacher-command-panel .game-btn {
  max-width: 100%;
  white-space: normal;
}

.teacher-qr-actions {
  width: min(620px, 100%);
  min-width: 0;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  justify-content: stretch;
}

.teacher-qr-actions .game-btn {
  width: 100%;
  min-width: 0;
}

.teacher-roster-actions {
  min-width: 0;
}

.teacher-roster-actions .cm-badge {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-switch-row.pet-password-toggle,
.settings-switch-row.score-password-toggle {
  align-items: center;
}

@media (max-width: 1180px) {
  .teacher-command-grid {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
  }

  .teacher-roster-panel {
    width: 100% !important;
    flex-shrink: 1 !important;
    max-height: none !important;
  }

  .teacher-control-panel {
    width: 100%;
    flex: 1 1 auto !important;
  }

  .teacher-student-mission-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .teacher-qr-actions {
    grid-template-columns: 1fr;
  }

  .settings-switch-row {
    align-items: flex-start;
  }
}

/* 125% browser zoom guard: keep mission controls inside their cards. */
@media (max-width: 1280px) {
  .pet-mission-manager {
    overflow: hidden !important;
  }

  .pet-mission-manager .mission-template-head,
  .pet-mission-manager .pet-panel-head {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .pet-mission-manager .mission-template-head .game-btn,
  .pet-mission-manager .pet-panel-head .game-btn {
    width: 100%;
    min-width: 0;
  }

  .pet-mission-manager .mission-composer-card {
    padding: 16px;
    overflow: hidden;
  }

  .pet-mission-manager .mission-composer-head {
    grid-template-columns: 1fr;
  }

  .pet-mission-manager .mission-composer-head > span {
    justify-self: start;
    max-width: 100%;
    margin-left: 0;
  }

  .pet-mission-manager .mission-create-form.mission-create-form-refined {
    grid-template-columns: minmax(0, 1.4fr) minmax(128px, 0.7fr) !important;
    gap: 12px !important;
  }

  .pet-mission-manager .mission-title-field,
  .pet-mission-manager .mission-form-actions {
    grid-column: 1 / -1 !important;
  }

  .pet-mission-manager .mission-field input,
  .pet-mission-manager .mission-field select {
    max-width: 100%;
  }

  .pet-mission-manager .mission-form-actions {
    justify-content: stretch;
  }

  .pet-mission-manager .mission-form-actions .game-btn,
  .pet-mission-manager .mission-create-form .game-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .pet-mission-manager .mission-custom-category-row.mission-category-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pet-mission-manager .mission-custom-category-row.mission-category-form .game-btn {
    width: 100% !important;
    justify-self: stretch;
  }

  .pet-mission-manager .mission-review-board {
    grid-template-columns: 1fr !important;
  }

  .mission-admin-card {
    padding-right: 12px;
  }

  .mission-admin-actions {
    grid-template-columns: 1fr !important;
  }

  .mission-admin-actions .game-btn {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}