/* Shrine Kana Quest — compact study HUD + neon shrine */

.flj-game-page .site-main {
  padding: 56px 0 0 !important;
  max-width: none !important;
}
.flj-game-page .page-wrap > footer { display: none; }
.flj-game-page #main-nav { border-bottom-color: rgba(255, 101, 132, 0.12); }

.site-main--game { min-height: calc(100vh - 56px); }

.sq-app {
  position: relative;
  width: 100%;
  height: calc(100vh - 56px);
  min-height: 480px;
  overflow: hidden;
  background: var(--bg);
}

#sq-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  pointer-events: none;
}
.sq-app.sq-playing #sq-canvas { pointer-events: auto; }

/* ── HUD (compact, non-blocking) ─────────────────────────────── */
.sq-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.sq-hud-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  backdrop-filter: blur(10px);
}

.sq-hearts { display: flex; gap: 5px; align-items: center; }
.sq-heart-glyph {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sakura, #ff6584), #e63946);
  box-shadow: 0 0 8px rgba(230, 57, 70, 0.35);
  flex-shrink: 0;
}
.sq-hearts .sq-heart-lost {
  opacity: 0.2;
  filter: grayscale(1);
  box-shadow: none;
}

.sq-pill-stat {
  font-size: 0.68rem;
  font-weight: 700;
  color: #777;
  padding: 3px 10px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}
.sq-pill-stat strong { color: var(--mint, #00f5d4); font-size: 0.82rem; }

.sq-pill-streak {
  color: var(--gold) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  background: rgba(251, 191, 36, 0.08) !important;
}
.sq-pill-streak strong { color: var(--gold) !important; }

.sq-pill-combo {
  color: var(--purple) !important;
  border-color: rgba(167, 139, 250, 0.35) !important;
  background: rgba(167, 139, 250, 0.1) !important;
  animation: sqComboPulse 0.8s ease-in-out infinite;
}
.sq-pill-combo strong { color: var(--text2) !important; }
@keyframes sqComboPulse {
  50% { box-shadow: 0 0 14px rgba(167, 139, 250, 0.35); }
}

.sq-powerups {
  display: flex;
  gap: 4px;
  align-items: center;
}
.sq-pu {
  font-size: 0.85rem;
  padding: 2px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  animation: sqPuPop 0.4s ease;
}
.sq-pu.is-active {
  border-color: rgba(0, 245, 212, 0.5);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.25);
}
@keyframes sqPuPop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.sq-hint-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  pointer-events: auto;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid rgba(240, 208, 128, 0.4);
  background: rgba(240, 208, 128, 0.12);
  color: var(--gold);
  font-family: 'Nunito', sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.16s, border-color 0.16s, background 0.16s, color 0.16s;
}
.sq-hint-toggle:hover {
  background: rgba(240, 208, 128, 0.22);
  border-color: rgba(240, 208, 128, 0.65);
}
.sq-hint-mark { font-size: 0.8em; opacity: 0.7; }
.sq-hint-toggle:hover .sq-hint-mark { opacity: 1; }
.sq-hint-toggle.is-off {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  background: transparent;
  color: #8b8b8b;
}
.sq-hint-toggle.is-off:hover {
  border-style: solid;
  border-color: rgba(240, 208, 128, 0.5);
  background: rgba(240, 208, 128, 0.12);
  color: var(--gold);
}

.sq-pill-mode {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sakura, #ff6584);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 101, 132, 0.25);
}

/* Study target — slim top pill */
.sq-study-pill {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1px solid rgba(0, 245, 212, 0.4);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 245, 212, 0.1);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  max-width: calc(100% - 20px);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.sq-study-pill.pulse {
  border-color: var(--sakura, #ff6584);
  box-shadow: 0 0 28px rgba(255, 101, 132, 0.25);
}

/* Direction cue — compact, high-contrast */
.sq-go-cue {
  position: absolute;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 12px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  backdrop-filter: blur(8px);
  pointer-events: none;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.sq-go-cue[hidden] { display: none !important; }
.sq-go-arrow {
  font-size: 0.72rem;
  line-height: 1;
  transition: transform 0.2s;
}
.sq-go-cue.is-ready {
  color: var(--mint, #00f5d4);
  border-color: rgba(0, 245, 212, 0.5);
  box-shadow: 0 0 18px rgba(0, 245, 212, 0.2);
}
.sq-go-cue.is-ready .sq-go-arrow { color: var(--mint, #00f5d4); }
.sq-go-cue.is-move-left { color: #ffd166; border-color: rgba(255, 209, 102, 0.45); }
.sq-go-cue.is-move-left .sq-go-arrow { transform: rotate(-90deg); color: #ffd166; }
.sq-go-cue.is-move-right { color: #ffd166; border-color: rgba(255, 209, 102, 0.45); }
.sq-go-cue.is-move-right .sq-go-arrow { transform: rotate(90deg); color: #ffd166; }
.sq-go-cue.is-urgent {
  color: #ff8a94;
  border-color: rgba(230, 57, 70, 0.55);
  animation: sqUrgent 0.6s ease-in-out infinite;
}
.sq-go-cue.is-urgent .sq-go-arrow { color: #ff8a94; }
@keyframes sqUrgent {
  50% { box-shadow: 0 0 20px rgba(230, 57, 70, 0.35); }
}

.sq-progress-mini {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  pointer-events: none;
}
.sq-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red, #e63946), var(--mint, #00f5d4));
  transition: width 0.35s ease;
  box-shadow: 0 0 8px rgba(0, 245, 212, 0.4);
}

.sq-replay-hud {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  cursor: pointer;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}
.sq-replay-hud:hover { background: rgba(230, 57, 70, 0.25); transform: scale(1.08); }

.sq-sp-label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
}
.sq-sp-kana {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
}
.sq-sp-eq { font-size: 0.75rem; color: #555; font-weight: 700; }
.sq-sp-romaji {
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--mint, #00f5d4);
  letter-spacing: 0.04em;
}

/* Lane guide strip — bottom study panel */
.sq-lane-strip {
  position: absolute;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: min(360px, calc(100% - 16px));
  pointer-events: none;
}

.sq-lane-card {
  position: relative;
  text-align: center;
  padding: 6px 4px 5px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  backdrop-filter: blur(8px);
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.sq-lane-card.is-wrong-lane {
  opacity: 0.55;
}

.sq-lc-go {
  display: none;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--mint, #00f5d4);
  margin-bottom: 2px;
  animation: sqGoPulse 1s ease-in-out infinite;
}
.sq-lane-card.is-target .sq-lc-go { display: block; }
.sq-lane-card.is-target {
  border-color: rgba(0, 245, 212, 0.65);
  background: rgba(0, 245, 212, 0.1);
  box-shadow: 0 0 24px rgba(0, 245, 212, 0.2);
  transform: translateY(-3px);
}
.sq-lane-card.is-player {
  border-color: rgba(255, 101, 132, 0.5);
  background: rgba(255, 101, 132, 0.08);
}
.sq-lane-card.is-target.is-player {
  border-color: #00f5d4;
  box-shadow: 0 0 32px rgba(0, 245, 212, 0.35);
}

.sq-lc-kana {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.1;
}
.sq-lc-rom {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #888;
  margin-top: 2px;
}
.sq-lc-name {
  display: block;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #555;
  margin-top: 4px;
}

.sq-lane-card.is-hidden-kana .sq-lc-kana,
.sq-lane-card.is-hidden-kana .sq-lc-rom {
  color: #444;
  filter: blur(3px);
}

@keyframes sqGoPulse {
  50% { opacity: 0.5; transform: translateY(-2px); }
}

/* Toast feedback */
.sq-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  max-width: 280px;
  pointer-events: none;
  z-index: 15;
  animation: sqToast 1.4s ease forwards;
}
.sq-toast.ok {
  background: rgba(0, 245, 212, 0.15);
  border: 1px solid rgba(0, 245, 212, 0.4);
  color: var(--mint, #00f5d4);
}
.sq-toast.bad {
  background: rgba(230, 57, 70, 0.15);
  border: 1px solid rgba(230, 57, 70, 0.4);
  color: #ff8a94;
}
.sq-toast.mega {
  font-size: 1rem;
  padding: 12px 22px;
  border-color: rgba(167, 139, 250, 0.55);
  background: rgba(167, 139, 250, 0.18);
  color: var(--text2);
  box-shadow: 0 0 32px rgba(167, 139, 250, 0.3);
}
@keyframes sqToast {
  0%   { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  25%  { transform: translate(-50%, -50%) scale(1); }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Screen flash on collect */
.sq-flash {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(0, 245, 212, 0.35), transparent 70%);
}
.sq-flash.is-ok {
  animation: sqFlashOk 0.45s ease forwards;
}
.sq-flash.is-bad {
  background: radial-gradient(ellipse at 50% 60%, rgba(230, 57, 70, 0.3), transparent 70%);
  animation: sqFlashBad 0.5s ease forwards;
}
@keyframes sqFlashOk {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}
@keyframes sqFlashBad {
  0% { opacity: 0.55; }
  100% { opacity: 0; }
}

/* Floating +XP popups */
.sq-float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 14;
  overflow: hidden;
}
.sq-float-xp {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--mint, #00f5d4);
  text-shadow: 0 0 12px rgba(0, 245, 212, 0.6);
  animation: sqFloatXp 1.1s ease forwards;
  white-space: nowrap;
}
.sq-float-xp.is-combo { color: var(--text2); text-shadow: 0 0 14px rgba(167, 139, 250, 0.6); font-size: 1.25rem; }
@keyframes sqFloatXp {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(1); }
}

/* Start countdown */
.sq-countdown {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 35%, transparent);
}
.sq-countdown[hidden] { display: none !important; }
.sq-count-num {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(4rem, 18vw, 7rem);
  font-weight: 900;
  color: var(--text);
  text-shadow: 0 0 40px rgba(255, 101, 132, 0.5), 0 0 80px rgba(0, 245, 212, 0.3);
  animation: sqCountPop 0.55s ease;
}
.sq-countdown.is-go .sq-count-num { color: var(--mint, #00f5d4); }
.sq-count-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  margin-top: 8px;
}
@keyframes sqCountPop {
  0%   { transform: scale(2); opacity: 0; }
  40%  { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Mobile steer */
.sq-steer {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 12;
  pointer-events: auto;
}
.sq-steer-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.2s;
}
.sq-steer-btn.is-target-lane {
  border-color: var(--mint, #00f5d4);
  background: rgba(0, 245, 212, 0.12);
  box-shadow: 0 0 14px rgba(0, 245, 212, 0.22);
}
.sq-steer-btn.is-player-lane {
  border-color: var(--sakura, #ff6584);
  background: rgba(255, 101, 132, 0.15);
}
.sq-steer-btn.is-player-lane.is-target-lane {
  border-color: #00f5d4;
  background: rgba(0, 245, 212, 0.22);
  box-shadow: 0 0 20px rgba(0, 245, 212, 0.4);
}

@media (min-width: 900px) {
  .sq-steer { display: none !important; }
  .sq-lane-strip { bottom: 24px; }
}

/* Overlays */
.sq-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.sq-overlay[hidden] { display: none !important; }

.sq-overlay-card {
  max-width: 420px;
  width: 100%;
  text-align: center;
  padding: 28px 24px;
  border-radius: 20px;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 101, 132, 0.1), transparent 60%), var(--bg2);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.sq-overlay-card--compact {
  max-width: 340px;
  padding: 20px 18px;
  border-radius: 16px;
}
.sq-overlay-card--sm { max-width: 280px; padding: 18px; }

.sq-overlay-eyebrow {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sakura, #ff6584);
  margin: 0 0 8px;
}
.sq-overlay-title {
  font-size: clamp(1.25rem, 3.5vw, 1.65rem);
  font-weight: 900;
  color: var(--text);
  margin: 0 0 4px;
  font-family: 'Noto Sans JP', 'Nunito', sans-serif;
}
.sq-overlay-sub { font-size: 0.82rem; color: var(--mint, #00f5d4); font-weight: 700; margin: 0 0 12px; }
.sq-overlay-desc { font-size: 0.72rem; color: #888; line-height: 1.5; margin: 0 0 12px; }
.sq-overlay-desc strong { color: var(--mint, #00f5d4); font-weight: 800; }

.sq-opt-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #555;
  margin: 0 0 6px;
  text-align: left;
}

.sq-set-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}
.sq-set-opt { cursor: pointer; }
.sq-set-opt input { position: absolute; opacity: 0; }
.sq-set-opt span {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text3);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  transition: all 0.2s;
}
.sq-set-opt input:checked + span {
  color: var(--text);
  border-color: rgba(230, 57, 70, 0.45);
  background: rgba(230, 57, 70, 0.12);
}

.sq-mode-desc {
  font-size: 0.72rem;
  color: #666;
  margin: -6px 0 14px;
  line-height: 1.45;
}

.sq-controls-hint { font-size: 0.68rem; color: #555; margin: 0 0 16px; }
.sq-controls-hint kbd {
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  font-size: 0.65rem;
}

.sq-btn-primary {
  display: block;
  width: 100%;
  padding: 12px 20px;
  margin-bottom: 8px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--red, #e63946), var(--sakura, #ff6584));
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(230, 57, 70, 0.35);
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.sq-btn-primary:hover { transform: translateY(-1px); }

.sq-btn-ghost {
  display: block;
  width: 100%;
  padding: 10px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #777;
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
}

.sq-end-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--sakura, #ff6584);
  margin: 0 0 6px;
}
.sq-end-rank {
  margin: 0 0 10px;
}
.sq-rank-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 101, 132, 0.3), rgba(0, 245, 212, 0.2));
  border: 2px solid color-mix(in srgb, var(--text) 15%, transparent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  animation: sqRankIn 0.6s ease;
}
.sq-rank-letter.rank-s { border-color: rgba(251, 191, 36, 0.6); color: var(--gold); box-shadow: 0 0 32px rgba(251, 191, 36, 0.25); }
.sq-rank-letter.rank-a { border-color: rgba(0, 245, 212, 0.5); color: var(--mint, #00f5d4); }
.sq-rank-letter.rank-b { border-color: rgba(255, 101, 132, 0.45); color: var(--sakura, #ff6584); }
.sq-rank-letter.rank-c { border-color: color-mix(in srgb, var(--text) 20%, transparent); color: var(--text3); }
@keyframes sqRankIn {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  70% { transform: scale(1.1) rotate(4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.sq-end-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 0 18px;
  text-align: left;
}
.sq-end-stats[hidden] { display: none !important; }
.sq-stat-cell {
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
}
.sq-stat-label {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #555;
  margin-bottom: 2px;
}
.sq-stat-val {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--text);
}
.sq-stat-val.accent { color: var(--mint, #00f5d4); }
.sq-stat-val.gold { color: var(--gold); }

.sq-overlay-card h2 { color: var(--text); font-size: 1.3rem; margin: 0 0 10px; }
#sq-end-msg { color: #888; font-size: 0.85rem; margin: 0 0 14px; line-height: 1.5; }

.sq-app.sq-rush .sq-progress-fill {
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.6);
  background: linear-gradient(90deg, #fbbf24, var(--mint, #00f5d4));
}
.sq-app.sq-lane-flash .sq-lane-card.is-player {
  box-shadow: 0 0 20px rgba(255, 101, 132, 0.45);
}

.sq-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: #888;
  z-index: 30;
  font-size: 0.85rem;
}
.sq-fallback[hidden] { display: none !important; }

@media (max-width: 480px) {
  .sq-study-pill { top: 40px; padding: 4px 8px 4px 5px; gap: 5px; }
  .sq-go-cue { top: 72px; font-size: 0.62rem; padding: 2px 10px; }
  .sq-sp-kana { font-size: 1.05rem; }
  .sq-sp-romaji { font-size: 0.85rem; }
  .sq-lc-kana { font-size: 1.1rem; }
  .sq-lane-strip { bottom: 78px; gap: 5px; width: min(320px, calc(100% - 12px)); }
  .sq-overlay-card--compact { max-width: 300px; padding: 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sq-lc-go, .sq-toast, .sq-go-cue.is-urgent, .sq-pill-combo, .sq-count-num, .sq-rank-letter { animation: none; }
}