/* The hidden arcade: the overlay a game plays in, its HUD, LLisa's takeover,
   and the coin "door" that appears once the arcade is open. Everything is
   scoped under .ic- so nothing collides with the theme. */

.ic-overlay {
  position: fixed; inset: 0; z-index: 2147483000;
  background: #0a0807; opacity: 0; transition: opacity .26s ease;
  overscroll-behavior: contain; touch-action: none;
  font-family: Cinzel, Georgia, serif;
}
.ic-overlay.ic-on { opacity: 1; }
.ic-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Candlelit CRT: warm scanlines and a heavy vignette. */
.ic-scanlines {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(20,10,0,.24) 3px, rgba(0,0,0,0) 4px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 52%, rgba(10,4,0,.62) 100%);
}

.ic-hud {
  position: absolute; top: 0; left: 0; right: 0; height: 48px;
  display: flex; align-items: center; gap: 14px; padding: 0 14px;
  color: #e8dcc0; pointer-events: none; user-select: none;
  background: linear-gradient(to bottom, rgba(10,8,7,.94), rgba(10,8,7,0));
}
.ic-hud-title { font-weight: 700; letter-spacing: .12em; font-size: 14px; color: #d4a017; text-shadow: 0 0 10px rgba(212,160,23,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-hud-found { font-weight: 600; font-size: 12px; letter-spacing: .1em; color: #8a7d64; white-space: nowrap; }
.ic-hud-coins { margin-left: auto; font-weight: 700; font-size: 14px; letter-spacing: .06em; color: #f2c94c; white-space: nowrap; }
.ic-overlay .ic-hud-exit {
  pointer-events: auto; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 12px; letter-spacing: .12em;
  color: #0a0807 !important; background: #d4a017 !important; border: 0 !important; border-radius: 2px !important;
  padding: 7px 12px !important; box-shadow: none !important; line-height: 1; text-transform: none; white-space: nowrap;
}
.ic-overlay .ic-hud-exit:hover { background: #f2c94c !important; }
.ic-overlay .ic-hud-exit:focus-visible { outline: 2px solid #e8dcc0; outline-offset: 2px; }

/* Toasts: "FOUND · 3 OF 20", "THE ARCADE IS OPEN", "+5 ◉" */
.ic-toast {
  position: absolute; left: 50%; top: 62px; transform: translateX(-50%);
  padding: 8px 18px; border: 1px solid rgba(212,160,23,.6); background: rgba(10,8,7,.88);
  color: #f2c94c; font-weight: 700; font-size: 13px; letter-spacing: .18em; white-space: nowrap;
  pointer-events: none; animation: ic-toast 2.6s ease forwards;
}
.ic-toast-big { top: 38%; font-size: clamp(18px, 4vw, 34px); padding: 16px 30px; border-width: 2px; box-shadow: 0 0 40px rgba(212,160,23,.25); animation-duration: 3.4s; }
.ic-coin-pop {
  position: absolute; right: 120px; top: 30px; color: #f2c94c; font-weight: 700; font-size: 16px; letter-spacing: .06em;
  pointer-events: none; animation: ic-pop 1.6s ease-out forwards;
}
@keyframes ic-toast { 0% { opacity: 0; transform: translate(-50%, -6px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
@keyframes ic-pop { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }

/* LLisa hijacks the intro: the hall comes up hue-flipped, then order returns. */
.ic-llisa .ic-canvas { animation: ic-llisa-hue 2.6s steps(1, end) forwards, ic-llisa-calm 2.6s ease forwards; }
@keyframes ic-llisa-hue {
  0% { filter: hue-rotate(180deg) saturate(2); transform: translateX(0); }
  8% { transform: translateX(-6px); } 12% { transform: translateX(5px); } 16% { transform: translateX(0); }
  40% { transform: translateX(3px); } 44% { transform: translateX(0); }
}
@keyframes ic-llisa-calm { 0%, 55% { filter: hue-rotate(180deg) saturate(2); } 100% { filter: none; } }
.ic-llisa-tag {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; text-align: center; font-family: Cinzel, Georgia, serif;
}
.ic-llisa-tag span { position: absolute; font-weight: 700; letter-spacing: .08em; }
.ic-llisa-a { color: #ff00ff; font-size: clamp(26px, 5vw, 52px); text-shadow: -3px 0 #00ffff, 3px 0 #ff0066; animation: ic-llisa-a 2.7s ease forwards; }
.ic-llisa-b { color: #f2c94c; font-size: clamp(16px, 2.6vw, 26px); opacity: 0; animation: ic-llisa-b 2.7s ease forwards; }
@keyframes ic-llisa-a { 0% { opacity: 0; transform: skewX(-12deg); } 8% { opacity: 1; transform: skewX(6deg); } 14% { transform: skewX(0); } 50% { opacity: 1; } 60% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 0; } }
@keyframes ic-llisa-b { 0%, 55% { opacity: 0; transform: translateY(10px); } 66%, 86% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

/* The door: a gold coin in the corner once the arcade is open. */
.ic-door {
  position: fixed; left: 14px; bottom: 14px; z-index: 99995;
  width: 38px; height: 38px; padding: 0 !important; border-radius: 50% !important; cursor: pointer;
  border: 1px solid #8a6a1c !important; box-shadow: 0 2px 10px rgba(0,0,0,.6), inset 0 0 0 3px rgba(10,8,7,.25) !important;
  background: radial-gradient(circle at 35% 30%, #f7dc85, #d4a017 48%, #8a6a1c 100%) !important;
  color: #3a2a06 !important; font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 13px; line-height: 38px; letter-spacing: 0;
  opacity: .78; transition: opacity .2s, transform .2s, bottom .25s; transform: none;
}
.ic-door:hover, .ic-door:focus-visible { opacity: 1; transform: rotate(-12deg) scale(1.08); outline: none; }
.ic-door span { display: block; text-shadow: 0 1px 0 rgba(255,240,190,.5); }

@media (prefers-reduced-motion: reduce) {
  .ic-overlay { transition: none; }
  .ic-scanlines { background: radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(10,4,0,.55) 100%); }
  .ic-toast, .ic-coin-pop { animation-duration: .01s; animation-delay: 2s; }
  .ic-door { transition: none; }
}
@media (max-width: 560px) {
  .ic-hud { gap: 8px; padding: 0 8px; }
  .ic-hud-title { font-size: 11px; }
  .ic-hud-found { display: none; }
}