html,body{height:100%;margin:0;background:#0b1320;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;}
#stage{position:fixed;inset:0;overflow:hidden;background:#000;}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;}
#hud{position:absolute;inset:0;pointer-events:none;}
.card{
  pointer-events:auto;
  position:absolute;left:28px;top:28px;
  max-width:min(720px,calc(100vw - 56px));
  background:rgba(0,0,0,.55);
  border-radius:18px;
  padding:22px 26px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}
.h1{font-size:44px;font-weight:800;line-height:1.05;margin-bottom:10px;}
.sub{font-size:18px;opacity:.9;margin-bottom:18px;}
.hint{font-size:14px;opacity:.9;line-height:1.4}
.toast{
  pointer-events:none;
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  background:rgba(0,0,0,.65);border-radius:12px;padding:10px 14px;
  max-width:min(900px,calc(100vw - 44px));
  font-size:14px;opacity:.95;
}
.hidden{display:none;}

/* --- FORCE Title Card VISIBLE (Day 5 fix) --- */
#titleCard {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 99999 !important;
}
#toast {
  z-index: 100000 !important;
}

/* ===== InstructionalX V1 Accessibility ===== */

:root {
  --ix-text-scale: 1;
}

.cc-line {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92%;
  padding: 8px 14px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  border-radius: 8px;
  font-size: calc(16px * var(--ix-text-scale));
  z-index: 90;
  pointer-events: none;
  text-align: center;
  calc(var(--ix-composer-h, 72px) + 10px + env(safe-area-inset-bottom));
}

.cc-hidden {
  display: none;
}

body.high-contrast .cc-line {
  background: #000;
  color: #fff;
}

body.high-contrast .bubble {
  background: #000 !important;
  color: #fff !important;
}

.bubble {
  font-size: calc(14px * var(--ix-text-scale));
}

/* CC button slash when OFF */
#ccToggle.cc-off{
  position: relative;
  opacity: 0.85;
}

#ccToggle.cc-off::after{
  content: "";
  position: absolute;
  width: 32%;
  height: 3px;
  left: 34%;
  top: 52%;
  background: rgba(255,255,255,0.95);
  transform: rotate(-45deg);
  border-radius: 2px;
  pointer-events: none;
}

/* FORCE: CC OFF slash should only cover the letters "CC" (not the whole circle) */
#ccToggle {
  position: relative; /* ensure ::after anchors correctly */
}

#ccToggle.cc-off::after{
  content: "";
  position: absolute;
  width: 18px !important;   /* small slash */
  height: 3px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) rotate(-45deg) !important;
  background: rgba(255,255,255,0.95) !important;
  border-radius: 2px !important;
  pointer-events: none;
}