/* ========================================
   任天堂风像素游戏 UI 组件
   Nintendo-style Pixel Game UI Components
   ======================================== */

/* 马里奥风格配色 */
:root {
  /* 经典马里奥配色 */
  --mario-red: #E52521;
  --mario-green: #43B047;
  --mario-blue: #049CD8;
  --mario-yellow: #FBAC13;
  --mario-brown: #8B4513;
  --mario-brick: #C84C0C;
  --mario-sky: #6B8CFF;
  --mario-cloud: #FFFFFF;

  /* 游戏UI配色 */
  --game-ui-bg: #F8F8F8;
  --game-ui-border: #000;
  --game-ui-shadow: #333;
}

/* ========================================
   马里奥风格砖块背景
   ======================================== */

.mario-brick-pattern {
  background-image:
    linear-gradient(90deg,
      transparent 50%,
      rgba(0, 0, 0, 0.1) 50%
    ),
    linear-gradient(rgba(200, 76, 12, 0.1) 2px, transparent 2px),
    linear-gradient(90deg, rgba(200, 76, 12, 0.1) 2px, transparent 2px);
  background-size:
    4px 4px,
    32px 32px,
    32px 32px;
  background-position:
    0 0,
    0 0,
    0 0;
}

/* ========================================
   游戏风格对话框 - RPG Dialog Box
   ======================================== */

.game-dialog-box {
  border: 4px solid var(--game-ui-border) !important;
  background: var(--game-ui-bg) !important;
  box-shadow:
    6px 6px 0 rgba(0, 0, 0, 0.3),
    inset 2px 2px 0 rgba(255, 255, 255, 0.5) !important;
  border-radius: 0 !important;
  padding: 16px;
  position: relative;
  margin: 16px 0;
}

.game-dialog-box::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border: 2px dashed var(--mario-blue);
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}

.game-dialog-box::after {
  content: '▼';
  position: absolute;
  bottom: -20px;
  left: 24px;
  font-size: 16px;
  color: var(--mario-red);
  animation: dialog-blink 1.5s ease-in-out infinite;
}

@keyframes dialog-blink {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0.5; transform: translateY(2px); }
}

/* ========================================
   游戏风格按钮 - Game Button
   ======================================== */

.game-button {
  position: relative;
  padding: 12px 24px;
  font-family: 'Fusion Pixel 12px M zh_hans', monospace;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  cursor: url('/cursors/click.cur'), pointer;
  transition: all 0.1s ease;
  margin: 4px;
}

/* 红色按钮（马里奥风格） */
.game-button.primary {
  background: linear-gradient(180deg, #FF6B6B 0%, var(--mario-red) 50%, #C71C1C 100%);
  color: #FFF;
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    0 4px 0 #8B0000,
    0 6px 8px rgba(0, 0, 0, 0.3);
  border: 3px solid #000;
  text-shadow: 2px 2px 0 #000;
}

.game-button.primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    0 6px 0 #8B0000,
    0 8px 12px rgba(0, 0, 0, 0.4);
}

.game-button.primary:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 0 #8B0000;
}

/* 绿色按钮（路易吉风格） */
.game-button.success {
  background: linear-gradient(180deg, #6BFF6B 0%, var(--mario-green) 50%, #2D8B35 100%);
  color: #FFF;
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    0 4px 0 #1A5220,
    0 6px 8px rgba(0, 0, 0, 0.3);
  border: 3px solid #000;
  text-shadow: 2px 2px 0 #000;
}

/* 蓝色按钮（蘑菇风格） */
.game-button.info {
  background: linear-gradient(180deg, #6BB3FF 0%, var(--mario-blue) 50%, #036A91 100%);
  color: #FFF;
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    0 4px 0 #02455C,
    0 6px 8px rgba(0, 0, 0, 0.3);
  border: 3px solid #000;
  text-shadow: 2px 2px 0 #000;
}

/* 黄色按钮（金币风格） */
.game-button.warning {
  background: linear-gradient(180deg, #FFE66B 0%, var(--mario-yellow) 50%, #D49800 100%);
  color: #000;
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 4px 0 #A67C00,
    0 6px 8px rgba(0, 0, 0, 0.3);
  border: 3px solid #000;
  text-shadow: 1px 1px 0 #FFF;
}

/* ========================================
   游戏风格卡片 - Game Card
   ======================================== */

.game-card {
  border: 4px solid var(--game-ui-border) !important;
  background: var(--game-ui-bg) !important;
  box-shadow:
    6px 6px 0 rgba(0, 0, 0, 0.2),
    inset 2px 2px 0 rgba(255, 255, 255, 0.5) !important;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--mario-red) 0%,
    var(--mario-yellow) 25%,
    var(--mario-green) 50%,
    var(--mario-blue) 75%,
    var(--mario-red) 100%);
  background-size: 200% 100%;
  animation: rainbow-scroll 3s linear infinite;
}

.game-card:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    8px 8px 0 rgba(0, 0, 0, 0.3),
    inset 2px 2px 0 rgba(255, 255, 255, 0.5) !important;
}

@keyframes rainbow-scroll {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ========================================
   HUD 元素 - Game HUD Elements
   ======================================== */

/* 生命值心形 */
.game-hearts {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.game-heart {
  width: 24px;
  height: 24px;
  background: var(--mario-red);
  clip-path: path('M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z');
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.2);
  position: relative;
}

.game-heart.empty {
  background: #CCC;
}

.game-heart::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}

/* 分数显示 */
.game-score {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: linear-gradient(180deg, #000 0%, #222 100%);
  color: #FFF;
  font-family: 'Fusion Pixel 12px M zh_hans', monospace;
  font-size: 16px;
  font-weight: bold;
  border: 3px solid #FFF;
  box-shadow:
    0 0 0 3px #000,
    4px 4px 0 rgba(0, 0, 0, 0.3);
  letter-spacing: 2px;
}

.game-score::before {
  content: '★ ';
  color: var(--mario-yellow);
}

/* ========================================
   像素图标 - Pixel Icons
   ======================================== */

/* 金币图标 */
.game-coin {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: radial-gradient(ellipse at 30% 30%, #FFE066, var(--mario-yellow));
  border: 3px solid #B8860B;
  border-radius: 50%;
  position: relative;
  box-shadow:
    inset -2px -2px 0 rgba(0, 0, 0, 0.2),
    2px 2px 0 rgba(0, 0, 0, 0.3);
  animation: coin-spin 0.6s ease-in-out;
}

.game-coin::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--mario-yellow);
  border: 2px solid #B8860B;
  border-radius: 50%;
}

@keyframes coin-spin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* 星星图标 */
.game-star {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--mario-yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.2);
  animation: star-pulse 1s ease-in-out infinite;
}

@keyframes star-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* 问号方块 */
.game-question-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border: 4px solid #8B4513;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.5),
    4px 4px 0 rgba(0, 0, 0, 0.3);
  font-family: 'Fusion Pixel 12px M zh_hans', monospace;
  font-size: 28px;
  font-weight: bold;
  color: #8B4513;
  cursor: url('/cursors/click.cur'), pointer;
  transition: all 0.1s ease;
  animation: block-bob 2s ease-in-out infinite;
}

.game-question-block:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.5),
    4px 8px 0 rgba(0, 0, 0, 0.3);
}

.game-question-block:active {
  transform: translateY(2px);
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.2),
    2px 2px 0 rgba(0, 0, 0, 0.3);
  animation: none;
}

@keyframes block-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ========================================
   进度条 - Game Progress Bar
   ======================================== */

.game-progress {
  height: 24px;
  background: #222;
  border: 3px solid #000;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.game-progress-bar {
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--mario-green) 0px,
    var(--mario-green) 16px,
    #2D8B35 16px,
    #2D8B35 32px
  );
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
  transition: width 0.3s ease;
  position: relative;
}

.game-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%);
  animation: progress-shine 1.5s linear infinite;
}

@keyframes progress-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ========================================
   装饰性云朵
   ======================================== */

.game-cloud {
  position: relative;
  display: inline-block;
  background: #FFF;
  border: 3px solid rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
  animation: cloud-float 6s ease-in-out infinite;
}

.game-cloud::before,
.game-cloud::after {
  content: '';
  position: absolute;
  background: #FFF;
  border: 3px solid rgba(0, 0, 0, 0.2);
}

.game-cloud::before {
  width: 60%;
  height: 100%;
  top: -40%;
  left: 20%;
}

.game-cloud::after {
  width: 40%;
  height: 120%;
  top: -60%;
  left: 50%;
}

@keyframes cloud-float {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }
}

/* ========================================
   应用到 Butterfly 组件
   ======================================== */

/* 侧边栏卡片游戏化 */
#aside-content .card-widget {
  border: 4px solid var(--game-ui-border) !important;
  background: var(--game-ui-bg) !important;
  box-shadow:
    6px 6px 0 rgba(0, 0, 0, 0.2),
    inset 2px 2px 0 rgba(255, 255, 255, 0.5) !important;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
}

#aside-content .card-widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--mario-red) 0%,
    var(--mario-yellow) 25%,
    var(--mario-green) 50%,
    var(--mario-blue) 75%,
    var(--mario-red) 100%);
  background-size: 200% 100%;
  animation: rainbow-scroll 3s linear infinite;
}

/* 文章卡片游戏化 */
.recent-post-item {
  border: 4px solid var(--game-ui-border) !important;
  background: var(--game-ui-bg) !important;
  box-shadow:
    6px 6px 0 rgba(0, 0, 0, 0.2),
    inset 2px 2px 0 rgba(255, 255, 255, 0.5) !important;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.recent-post-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--mario-blue) 0%,
    var(--mario-green) 50%,
    var(--mario-blue) 100%);
  background-size: 200% 100%;
  animation: rainbow-scroll 3s linear infinite;
}

.recent-post-item:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    8px 8px 0 rgba(0, 0, 0, 0.3),
    inset 2px 2px 0 rgba(255, 255, 255, 0.5) !important;
}

/* 标签按钮游戏化 */
.card-tag-cloud a,
a.tag {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(180deg, #6BFF6B 0%, var(--mario-green) 50%, #2D8B35 100%);
  color: #FFF;
  font-family: 'Fusion Pixel 12px M zh_hans', monospace;
  font-size: 12px;
  font-weight: bold;
  border: 3px solid #000;
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 3px 0 #1A5220;
  text-shadow: 2px 2px 0 #000;
  margin: 4px;
  cursor: url('/cursors/click.cur'), pointer;
  transition: all 0.1s ease;
  text-decoration: none;
  text-transform: uppercase;
}

.card-tag-cloud a:hover,
a.tag:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.3),
    0 5px 0 #1A5220;
  background: linear-gradient(180deg, #8BFF8B 0%, #5CB85C 50%, #3D9E44 100%);
}

.card-tag-cloud a:active,
a.tag:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.2),
    0 1px 0 #1A5220;
}

/* ========================================
   深色模式适配
   ======================================== */

[data-theme="dark"] .game-dialog-box,
.dark .game-dialog-box,
[data-theme="dark"] .game-card,
.dark .game-card,
[data-theme="dark"] #aside-content .card-widget,
.dark #aside-content .card-widget,
[data-theme="dark"] .recent-post-item,
.dark .recent-post-item {
  background: #1A1A1A !important;
  border-color: #FFF !important;
}

[data-theme="dark"] .game-score,
.dark .game-score {
  background: linear-gradient(180deg, #333 0%, #222 100%);
  border-color: #FFF;
}

/* ========================================
   移动端适配
   ======================================== */

@media (max-width: 768px) {
  .game-button {
    padding: 10px 20px;
    font-size: 12px;
  }

  .game-card,
  #aside-content .card-widget,
  .recent-post-item {
    box-shadow:
      4px 4px 0 rgba(0, 0, 0, 0.2),
      inset 2px 2px 0 rgba(255, 255, 255, 0.5) !important;
  }
}