/* =========================================================
   Family Minecraft Portal - Dual-Mode Kid/Parent Stylesheet
   Tailwind Extension, Tactile 3D Buttons & WebUI Animations
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=VT323&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
  --mc-green: #22c55e;
  --mc-dark-green: #15803d;
  --mc-dirt: #854d0e;
  --mc-gold: #eab308;
  --mc-ruby: #e11d48;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background-color: #0b0f19;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(30, 41, 59, 0.7) 0%, rgba(11, 15, 25, 0.95) 75%),
    radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
  color: #f1f5f9;
  -webkit-tap-highlight-color: transparent;
}

.mc-font {
  font-family: 'VT323', monospace;
  letter-spacing: 0.05em;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

/* --- TACTILE 3D BUTTONS & CARDS --- */
.tactile-btn {
  position: relative;
  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), 0 10px 20px -5px rgba(0, 0, 0, 0.4);
  transform: translateY(0);
  cursor: pointer;
  user-select: none;
}

.tactile-btn:hover {
  filter: brightness(1.08);
}

.tactile-btn:active {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 3px 8px -2px rgba(0, 0, 0, 0.3);
  transform: translateY(5px);
}

/* Specific Action Deck Vibrant Gradients */
.btn-sunny {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 2px solid #fde68a;
  color: #451a03;
}
.btn-sunny:hover {
  box-shadow: 0 6px 0 #92400e, 0 12px 25px -4px rgba(245, 158, 11, 0.5);
}
.btn-sunny:active {
  box-shadow: 0 1px 0 #92400e;
}

.btn-day {
  background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  border: 2px solid #fed7aa;
  color: #431407;
}
.btn-day:hover {
  box-shadow: 0 6px 0 #9a3412, 0 12px 25px -4px rgba(251, 146, 60, 0.5);
}
.btn-day:active {
  box-shadow: 0 1px 0 #9a3412;
}

.btn-fireworks {
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  border: 2px solid #e9d5ff;
  color: #ffffff;
}
.btn-fireworks:hover {
  box-shadow: 0 6px 0 #581c87, 0 12px 25px -4px rgba(168, 85, 247, 0.5);
}
.btn-fireworks:active {
  box-shadow: 0 1px 0 #581c87;
}

.btn-heal {
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
  border: 2px solid #fecdd3;
  color: #ffffff;
}
.btn-heal:hover {
  box-shadow: 0 6px 0 #881337, 0 12px 25px -4px rgba(244, 63, 94, 0.5);
}
.btn-heal:active {
  box-shadow: 0 1px 0 #881337;
}

.btn-feed {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  border: 2px solid #a7f3d0;
  color: #ffffff;
}
.btn-feed:hover {
  box-shadow: 0 6px 0 #064e3b, 0 12px 25px -4px rgba(16, 185, 129, 0.5);
}
.btn-feed:active {
  box-shadow: 0 1px 0 #064e3b;
}

/* Big Red Undo Button */
.btn-big-undo {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  border: 2px solid #fca5a5;
  box-shadow: 0 6px 0 #7f1d1d, 0 12px 28px -5px rgba(239, 68, 68, 0.5);
}
.btn-big-undo:hover {
  box-shadow: 0 6px 0 #7f1d1d, 0 15px 35px -5px rgba(239, 68, 68, 0.7);
  filter: brightness(1.1);
}
.btn-big-undo:active {
  box-shadow: 0 1px 0 #7f1d1d, 0 4px 10px -2px rgba(239, 68, 68, 0.4);
  transform: translateY(5px);
}

/* IP Copy Pills */
.ip-pill {
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: all;
}
.ip-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
}
.ip-pill:active {
  transform: scale(0.97);
}

/* 3D Skin Avatar Heads */
.avatar-head {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avatar-head:hover {
  transform: scale(1.15) rotate(4deg);
}

/* Parent PIN Keypad */
.pin-key {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 1rem;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(71, 85, 105, 0.6);
  color: #e2e8f0;
  transition: all 0.12s ease;
  box-shadow: 0 4px 0 rgba(15, 23, 42, 0.8);
}
.pin-key:hover {
  background: rgba(51, 65, 85, 0.9);
  border-color: rgba(148, 163, 184, 0.8);
  color: #ffffff;
}
.pin-key:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.8);
}

/* PIN Dots */
.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  border: 2px solid #64748b;
  background-color: transparent;
  transition: all 0.2s ease;
}
.pin-dot.filled {
  border-color: #38bdf8;
  background-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
  transform: scale(1.2);
}

/* Keypad Shake on Invalid PIN */
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}
.animate-shake {
  animation: pin-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.6);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.8);
}

/* AI Safety Badges */
.badge-clean {
  background-color: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}
.badge-warn {
  background-color: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
.badge-incompatible {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

/* RCON Console Box */
.terminal-window {
  background-color: #050811;
  border: 1px solid #1e293b;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* =========================================================
   PHASE 2: ADVENTURE CHRONICLE PARCHMENT & EXPANDING REALMS
   ========================================================= */

/* Storybook Parchment Banner */
.chronicle-parchment {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fef08a 100%);
  border: 3px solid #b45309;
  box-shadow: 0 10px 30px -5px rgba(180, 83, 9, 0.3), inset 0 0 40px rgba(217, 119, 6, 0.15);
  position: relative;
  border-radius: 1.75rem;
}

.chronicle-parchment::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(180, 83, 9, 0.4);
  border-radius: 1.5rem;
  pointer-events: none;
}

@keyframes chronicle-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.5); }
  50% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.85); }
}

.btn-generate-story {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  border: 2px solid #fef3c7;
  color: #fff;
  animation: chronicle-glow 2.5s infinite ease-in-out;
}
.btn-generate-story:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.btn-generate-story:active {
  transform: translateY(2px);
}

/* Realm Preset Cards Grid */
.realm-card {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.realm-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.6);
}
.realm-card:active {
  transform: translateY(-1px) scale(0.99);
}

/* Realm Specific Gradients */
.realm-card-roblox {
  background: linear-gradient(145deg, rgba(6, 182, 212, 0.15) 0%, rgba(14, 165, 233, 0.25) 100%);
  border-color: rgba(56, 189, 248, 0.5);
}
.realm-card-anime {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.15) 0%, rgba(245, 158, 11, 0.25) 100%);
  border-color: rgba(251, 146, 60, 0.5);
}
.realm-card-pokemon {
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.15) 0%, rgba(132, 204, 22, 0.25) 100%);
  border-color: rgba(74, 222, 128, 0.5);
}
.realm-card-dungeon {
  background: linear-gradient(145deg, rgba(147, 51, 234, 0.15) 0%, rgba(99, 102, 241, 0.25) 100%);
  border-color: rgba(192, 132, 252, 0.5);
}
.realm-card-creative {
  background: linear-gradient(145deg, rgba(236, 72, 153, 0.15) 0%, rgba(217, 70, 239, 0.25) 100%);
  border-color: rgba(244, 114, 182, 0.5);
}
.realm-card-classic {
  background: linear-gradient(145deg, rgba(34, 197, 94, 0.15) 0%, rgba(180, 83, 9, 0.25) 100%);
  border-color: rgba(134, 239, 172, 0.5);
}

/* Full-Screen Expanding Modal Animations */
@keyframes modal-scale-up {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.animate-modal-scale {
  animation: modal-scale-up 0.25s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

/* Tactile Sandbox Toggle Switches */
.toggle-switch-track {
  width: 48px;
  height: 26px;
  background-color: #334155;
  border-radius: 9999px;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 2px solid #475569;
}
.toggle-switch-track.active {
  background-color: #10b981;
  border-color: #34d399;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}
.toggle-switch-thumb {
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 9999px;
  position: absolute;
  top: 2px;
  left: 3px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.toggle-switch-track.active .toggle-switch-thumb {
  transform: translateX(22px);
}

/* Difficulty Segmented Selector */
.diff-pill {
  transition: all 0.15s ease;
  border-radius: 0.75rem;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid transparent;
}
.diff-pill.active {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.6);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

/* World Kit Action Buttons */
.btn-kit-jump {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  border: 2px solid #bae6fd;
  color: #082f49;
}
.btn-kit-flight {
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  border: 2px solid #e9d5ff;
  color: #ffffff;
}