.turn-banner-stage {
  position: absolute;
  z-index: 18;
  left: 50%;
  top: 20px;
  width: min(520px, 74vw);
  transform: translateX(-50%);
  pointer-events: none;
}

.turn-banner {
  --turn-bg: linear-gradient(100deg, #0c6b58, #35d8b4, #e4c753);
  --turn-border: #f3d578;
  --turn-text: #031b14;
  --turn-glow: rgb(74 255 204 / 32%);

  position: relative;
  min-height: 52px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 5px 18px 5px 6px;
  overflow: hidden;
  color: var(--turn-text);
  border: 2px solid var(--turn-border);
  border-radius: 18px;
  background: var(--turn-bg);
  box-shadow:
    0 8px 22px rgb(0 0 0 / 36%),
    0 0 20px var(--turn-glow),
    inset 0 1px 0 rgb(255 255 255 / 34%);
  font-family: inherit;
  font-size: clamp(14px, 1.45vw, 20px);
  font-weight: 850;
  letter-spacing: 0.025em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  transform-origin: center;
}

.turn-banner[hidden] { display: none; }

.turn-banner::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(110deg, transparent 20%, rgb(255 255 255 / 25%) 47%, transparent 72%);
  transform: translateX(-120%);
  animation: turn-banner-shimmer 2.4s ease-in-out infinite;
}

.turn-banner__icon-wrap {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--turn-border), white 20%);
  border-radius: 50%;
  background: rgb(1 15 11 / 72%);
  box-shadow: inset 0 1px 7px rgb(255 255 255 / 12%);
}

.turn-banner__icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 45%));
}

.turn-banner__text {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turn-banner.is-entering { animation: turn-banner-pop 360ms cubic-bezier(.2, .9, .3, 1.2); }

.turn-banner[data-theme="01-hangyodon"] {
  --turn-bg: linear-gradient(100deg, #0b5b50, #30d1bd, #d6b851);
  --turn-border: #f0d27a;
  --turn-text: #031b18;
  --turn-glow: rgb(45 229 202 / 34%);
}

.turn-banner[data-theme="02-crybaby"] {
  --turn-bg: linear-gradient(100deg, #91c7ea, #f2a9cf, #c8a7ea);
  --turn-border: #ffe0f3;
  --turn-text: #2e1630;
  --turn-glow: rgb(244 165 218 / 40%);
}

.turn-banner[data-theme="03-hirono-woodland"] {
  --turn-bg: linear-gradient(100deg, #2f3b27, #756044, #b18a4d);
  --turn-border: #d7b66f;
  --turn-text: #fff0c8;
  --turn-glow: rgb(181 139 73 / 34%);
}

.turn-banner[data-theme="04-capybara"] {
  --turn-bg: linear-gradient(100deg, #39724e, #d59a4d, #f2c269);
  --turn-border: #f5dc95;
  --turn-text: #2a1809;
  --turn-glow: rgb(229 167 81 / 38%);
}

.turn-banner[data-theme="05-hirono-moonlit"] {
  --turn-bg: linear-gradient(100deg, #111c3b, #2e4b83, #987b48);
  --turn-border: #e4c776;
  --turn-text: #f4f5ff;
  --turn-glow: rgb(84 126 208 / 38%);
}

.turn-banner[data-theme="06-molly"] {
  --turn-bg: linear-gradient(100deg, #075f52, #267f9b, #d5a64c);
  --turn-border: #f1d071;
  --turn-text: #f8ffff;
  --turn-glow: rgb(44 176 172 / 36%);
}

.turn-banner[data-theme="07-sanrio"] {
  --turn-bg: linear-gradient(100deg, #f09fc4, #c8b7ef, #f4dc7e);
  --turn-border: #fff1bf;
  --turn-text: #3b1f39;
  --turn-glow: rgb(242 170 216 / 40%);
}

.turn-banner[data-theme="08-lulu-the-piggy"] {
  --turn-bg: linear-gradient(100deg, #7ac7a7, #f0aab5, #d6b45d);
  --turn-border: #f9df9a;
  --turn-text: #1d3027;
  --turn-glow: rgb(122 211 174 / 38%);
}

.turn-banner[data-theme="09-brawl-stars-brawlers"] {
  --turn-bg: linear-gradient(100deg, #174d39, #d09838, #a43b37);
  --turn-border: #f0c95b;
  --turn-text: #fff8d9;
  --turn-glow: rgb(237 172 54 / 38%);
}

.turn-banner[data-theme="10-stitch-inspired"] {
  --turn-bg: linear-gradient(100deg, #155d9c, #2bbac4, #e8737f);
  --turn-border: #f0cc74;
  --turn-text: #f7ffff;
  --turn-glow: rgb(57 193 223 / 40%);
}

@keyframes turn-banner-pop {
  0% { opacity: 0; transform: scale(.84) translateY(6px); }
  72% { opacity: 1; transform: scale(1.035) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes turn-banner-shimmer {
  0%, 55% { transform: translateX(-120%); }
  82%, 100% { transform: translateX(120%); }
}

@media (max-width: 720px) {
  .turn-banner-stage { top: 12px; width: min(390px, 82vw); }
  .turn-banner {
    min-height: 44px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 4px 12px 4px 5px;
    border-radius: 15px;
    font-size: clamp(12px, 3.4vw, 16px);
  }
  .turn-banner__icon-wrap { width: 32px; height: 32px; }
  .turn-banner__icon { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .turn-banner,
  .turn-banner::after { animation: none !important; }
}