/* Mascot cheer animation */
.mascot-cheer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5rem;
}
.mascot-cheer {
  width: 90px;
  height: auto;
  transition: transform 0.4s cubic-bezier(.68,-0.55,.27,1.55);
  filter: drop-shadow(0 4px 8px #0008);
}
.mascot-cheer.cheer {
  animation: mascot-bounce 0.7s cubic-bezier(.68,-0.55,.27,1.55) 1;
}
@keyframes mascot-bounce {
  0% { transform: scale(1) translateY(0); }
  30% { transform: scale(1.15,0.85) translateY(-10px); }
  50% { transform: scale(0.95,1.1) translateY(-18px); }
  70% { transform: scale(1.1,0.9) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}
.mascot-cheer.hidden { display: none; }
/* Core palette inspired by provided screenshot */
:root {
  --bg-deep: #052e63;
  --bg-mid: #0d4d93;
  --panel-blue: #1d5fa8;
  --panel-blue-dark: #0d3d6b;
  --panel-red: #c73232;
  --panel-red-dark: #7c1414;
  --panel-green: #48c437;
  --panel-green-dark: #1e5e1e;
  --panel-orange: #f39406;
  --panel-orange-dark: #a65600;
  --text-light: #fefefe;
  --text-dark: #081a30;
  --accent: #ffd10a;
  --progress-bg: #133b6f;
  --progress-fill: #ff9c00;
  --focus-ring: #ffe15a;
}

html, body { height:100%; }
body {
  margin:0;
  font-family: inherit; /* unified body font via shared-theme (Nunito) */
  background: linear-gradient(180deg,var(--bg-deep),var(--bg-mid));
  color: var(--text-light);
  display:flex;
  flex-direction:column;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  image-rendering: pixelated;
}

#app { flex:1; display:flex; flex-direction:column; align-items:center; }

.screen { width:100%; max-width:900px; padding:1.25rem 1.25rem 4rem; box-sizing:border-box; }
.hidden { display:none !important; }

h1, h2, h3, .target-style { text-shadow:0 2px 0 #000; }

header#menu { text-align:center; }
.tagline { font-size:0.75rem; line-height:1.3; max-width:38ch; margin:0.75rem auto 1.25rem; }
.hint { font-size:0.55rem; opacity:0.75; }

.btn {
  background: var(--panel-blue);
  color: var(--text-light);
  padding:0.6rem 1rem;
  border:4px solid var(--panel-blue-dark);
  box-shadow:0 4px 0 var(--panel-blue-dark);
  font-size:0.75rem;
  cursor:pointer;
  text-transform:uppercase;
}
.btn.primary { background: var(--panel-orange); border-color: var(--panel-orange-dark); box-shadow:0 4px 0 var(--panel-orange-dark); }
.btn:active { transform:translateY(2px); box-shadow:0 2px 0 var(--panel-blue-dark); }
.btn.primary:active { box-shadow:0 2px 0 var(--panel-orange-dark); }
.btn:focus { outline:3px dotted var(--focus-ring); outline-offset:2px; }

/* HUD */
.hud { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:0.6rem; }
.hud-left, .hud-center, .hud-right { display:flex; flex-direction:column; gap:0.4rem; }
.timer { background:var(--panel-blue); border:4px solid var(--panel-blue-dark); padding:0.35rem 0.45rem; font-size:0.65rem; box-shadow:0 3px 0 var(--panel-blue-dark); }
.score { background:var(--panel-blue); border:4px solid var(--panel-blue-dark); padding:0.35rem 0.45rem; font-size:0.65rem; box-shadow:0 3px 0 var(--panel-blue-dark); }
.combo { font-size:0.55rem; color:var(--accent); min-height:0.75rem; }
.target-style { background:var(--panel-blue); border:4px solid var(--panel-blue-dark); padding:0.4rem 0.75rem; font-size:0.85rem; box-shadow:0 3px 0 var(--panel-blue-dark); }

.progress-wrapper { display:flex; align-items:center; gap:0.5rem; font-size:0.55rem; }
.progress-bar { width:140px; height:20px; background:var(--progress-bg); border:4px solid #081a30; box-shadow:0 3px 0 #081a30; position:relative; overflow:hidden; }
.progress-bar .fill { background:var(--progress-fill); height:100%; width:0%; transition:width 0.25s linear; position:absolute; top:0; left:0; }

/* Conveyor */
.conveyor { position:relative; width:100%; height:480px; border:6px solid #081a30; background:#092d56; box-shadow:0 6px 0 #081a30 inset; overflow:hidden; display:flex; align-items:flex-start; }
.reference-card { position:absolute; top:0; width:195px; min-height:160px; padding:0.65rem 0.55rem 0.75rem; box-sizing:border-box; font-size:0.55rem; line-height:1.25; cursor:pointer; user-select:none; }
.reference-card p { margin:0; }
.reference-card em { font-style:italic; }
.reference-card[data-style="APA"] { background:var(--panel-green); border:5px solid var(--panel-green-dark); box-shadow:0 6px 0 var(--panel-green-dark); }
.reference-card[data-style="MLA"] { background:var(--panel-red); border:5px solid var(--panel-red-dark); box-shadow:0 6px 0 var(--panel-red-dark); }
.reference-card.correct-pick { outline:3px solid var(--accent); }
.reference-card.wrong-pick { outline:3px solid #ff3b3b; }
.reference-card:focus { outline:3px dotted var(--focus-ring); }

/* Result Dialog */
#result { text-align:center; }
#result button { margin:0.5rem; }

/* Reward / coupon */
.reward-card { background:var(--panel-blue); border:5px solid var(--panel-blue-dark); box-shadow:0 6px 0 var(--panel-blue-dark); max-width:420px; margin:0.75rem auto 1.25rem; padding:0.75rem 0.9rem 1rem; font-size:0.55rem; text-align:center; }
.reward-card h3 { margin:0 0 0.5rem; font-size:0.7rem; }
.coupon-row { display:flex; justify-content:center; align-items:center; gap:0.5rem; margin-top:0.5rem; }
.coupon-code { background:#f7f5e9; color:#081a30; padding:0.4rem 0.55rem; border:4px solid #b6b2a4; box-shadow:0 4px 0 #b6b2a4; font-size:0.6rem; letter-spacing:1px; }


footer.credits { text-align:center; font-size:0.5rem; padding:0.75rem 0 1.25rem; opacity:0.7; }

/* Combo popup */
.combo-popup { position:absolute; z-index:50; font-size:0.6rem; color:var(--accent); text-shadow:0 2px 0 #000; animation:popup 0.9s ease-out forwards; }
@keyframes popup { 0% { transform:translateY(0); opacity:1; } 70% { opacity:1; } 100% { transform:translateY(-35px); opacity:0; } }

/* Toast */
.toast { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); background:#f7f5e9; color:#081a30; border:5px solid #b6b2a4; box-shadow:0 6px 0 #b6b2a4; padding:0.5rem 0.75rem; font-size:0.7rem; display:none; }
.toast.show { display:block; }

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  .reference-card { transition:none !important; animation:none !important; }
}

/* Responsive adjustments */
@media (max-width: 820px) { .reference-card { width:155px; font-size:0.5rem; } .conveyor { height:420px; } }
@media (max-width: 620px) { .hud { flex-wrap:wrap; } }