/* Game announcements (LitRPG tags -> styled boxes) */
.game-announcement {
  position: relative;
  margin: 0.8em auto;
  padding: 0.6em 1em;
  max-width: 92%;
  background: hsla(230, 70%, 50%, 0.1);
  border-radius: 8px;
  border: 1px solid hsla(230, 70%, 50%, 0.2);
  text-align: center;
  font-weight: 500;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.92em;
  line-height: 1.4;
  color: hsl(230, 60%, 45%);
  animation: announcementPulse 2s infinite;
}

[data-mode='dark'] .game-announcement {
  background: hsla(230, 70%, 50%, 0.15);
  border-color: hsla(230, 70%, 50%, 0.3);
  color: hsl(230, 80%, 75%);
}

@keyframes announcementPulse {
  0% { box-shadow: 0 0 0 0 hsla(230, 70%, 50%, 0.3); }
  70% { box-shadow: 0 0 0 6px hsla(230, 70%, 50%, 0); }
  100% { box-shadow: 0 0 0 0 hsla(230, 70%, 50%, 0); }
}

/* Level up/down */
.game-lvl {
  background: hsla(45, 100%, 50%, 0.1);
  border-color: hsla(45, 100%, 50%, 0.3);
  color: hsl(45, 100%, 45%);
}

[data-mode='dark'] .game-lvl {
  background: hsla(45, 100%, 50%, 0.15);
  border-color: hsla(45, 100%, 50%, 0.4);
  color: hsl(45, 100%, 65%);
}

.game-lvl::before,
.game-lvl::after {
  content: '↑';
  margin: 0 0.3em;
  font-weight: bold;
  animation: floatArrow 1s ease-in-out infinite;
}

@keyframes floatArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.game-lvl.down {
  background: hsla(0, 70%, 50%, 0.1);
  border-color: hsla(0, 70%, 50%, 0.3);
  color: hsl(0, 60%, 45%);
}

[data-mode='dark'] .game-lvl.down {
  background: hsla(0, 70%, 50%, 0.15);
  border-color: hsla(0, 70%, 50%, 0.4);
  color: hsl(0, 70%, 75%);
}

.game-lvl.down::before,
.game-lvl.down::after {
  content: '↓';
  margin: 0 0.3em;
  font-weight: bold;
  animation: floatArrowDown 1s ease-in-out infinite;
}

@keyframes floatArrowDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* Skill */
.game-skl {
  background: hsla(120, 70%, 50%, 0.1);
  border-color: hsla(120, 70%, 50%, 0.3);
  color: hsl(120, 50%, 40%);
}
[data-mode='dark'] .game-skl {
  background: hsla(120, 70%, 50%, 0.15);
  border-color: hsla(120, 70%, 50%, 0.4);
  color: hsl(120, 70%, 65%);
}
.game-skl::before { content: '✦'; margin-right: 0.3em; }
.game-skl::after  { content: '✦'; margin-left: 0.3em; }

/* Achievement */
.game-ach {
  background: hsla(280, 70%, 50%, 0.1);
  border-color: hsla(280, 70%, 50%, 0.3);
  color: hsl(280, 50%, 45%);
}
[data-mode='dark'] .game-ach {
  background: hsla(280, 70%, 50%, 0.15);
  border-color: hsla(280, 70%, 50%, 0.4);
  color: hsl(280, 70%, 75%);
}
.game-ach::before { content: '🏆'; margin-right: 0.3em; font-size: 0.9em; }

/* Warning */
.game-wrn {
  background: hsla(0, 70%, 50%, 0.1);
  border-color: hsla(0, 70%, 50%, 0.3);
  color: hsl(0, 60%, 45%);
}
[data-mode='dark'] .game-wrn {
  background: hsla(0, 70%, 50%, 0.15);
  border-color: hsla(0, 70%, 50%, 0.4);
  color: hsl(0, 70%, 75%);
}
.game-wrn::before { content: '⚠️'; margin-right: 0.3em; font-size: 0.9em; }

/* Message */
.game-msg {
  background: hsla(210, 70%, 50%, 0.1);
  border-color: hsla(210, 70%, 50%, 0.3);
  color: hsl(210, 60%, 45%);
}
[data-mode='dark'] .game-msg {
  background: hsla(210, 70%, 50%, 0.15);
  border-color: hsla(210, 70%, 50%, 0.4);
  color: hsl(210, 70%, 75%);
}
.game-msg::before { content: '◈'; margin-right: 0.3em; font-size: 0.9em; }

/* Quest */
.game-qst {
  background: hsla(200, 70%, 50%, 0.1);
  border-color: hsla(200, 70%, 50%, 0.3);
  color: hsl(200, 60%, 45%);
}
[data-mode='dark'] .game-qst {
  background: hsla(200, 70%, 50%, 0.15);
  border-color: hsla(200, 70%, 50%, 0.4);
  color: hsl(200, 70%, 75%);
}
.game-qst::before { content: '📜'; margin-right: 0.3em; font-size: 0.9em; }

/* Important pulse */
.game-important {
  font-weight: 600;
  animation: importantPulse 2s infinite;
}
@keyframes importantPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

@media screen and (max-width: 768px) {
  .game-announcement { padding: 0.5em 0.8em; margin: 0.6em auto; font-size: 0.9em; }
}
@media screen and (max-width: 480px) {
  .game-announcement { padding: 0.4em 0.7em; margin: 0.5em auto; font-size: 0.85em; border-radius: 6px; }
}