/* Tile IQ — recognition drill.
   Every color comes from the shell's --g-* variables so the drill survives
   any background and theme combination. Never hard-code a color here. */

.iq-wrap{
  width:100%; max-width:820px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}

.iq-hud{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px;
  font-size:13px; color:var(--g-muted);
}
.iq-hud b{ color:var(--g-heading); font-weight:600; }
.iq-lv{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:19px; font-weight:600; color:var(--g-heading); letter-spacing:.01em;
}

/* countdown bar */
.iq-bar{
  width:min(560px,100%); height:7px; border-radius:99px; overflow:hidden;
  background:var(--g-line); box-shadow:inset 0 1px 2px var(--g-shadow-sm);
}
.iq-bar i{
  display:block; height:100%; width:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--g-accent-lt), var(--g-accent));
  transition:width .1s linear;
}
.iq-bar.low i{ background:linear-gradient(90deg, var(--g-accent), var(--g-accent-dk)); }

.iq-play{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:18px 14px; border-radius:var(--g-radius);
  background:var(--g-card); border:1px solid var(--g-line);
  box-shadow:var(--g-shadow-md);
}
.iq-prompt{ margin:0; font-size:17px; font-weight:600; color:var(--g-heading); text-align:center; }
.iq-prompt b{ color:var(--g-accent-dk); }

.iq-tile{
  display:flex; justify-content:center; align-items:center;
  /* the tile is scaled up below; reserve the real height so it never
     slides over the prompt above it */
  height:172px; padding:0;
}
.iq-tile .tl{ transform:scale(1.9); transform-origin:center; }

.iq-grid{
  display:grid; gap:8px; justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(0,64px));
}
.iq-cell{
  width:64px; height:86px; border-radius:10px; padding:0;
  background:linear-gradient(180deg, var(--g-panel), var(--g-card));
  border:1px solid var(--g-line); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--g-shadow-sm); transition:transform .08s, box-shadow .15s, border-color .15s;
}
.iq-cell:hover{ transform:translateY(-2px); box-shadow:var(--g-shadow-md); }
.iq-cell.found{
  border-color:var(--g-accent); box-shadow:0 0 0 3px var(--g-accent-soft), var(--g-shadow-md);
  cursor:default;
}
.iq-cell.miss{ animation:iq-shake .3s ease; border-color:var(--g-accent-dk); }
@keyframes iq-shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); }
}

.iq-opts{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.iq-opt{
  font:inherit; font-size:15px; padding:11px 16px; border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg, var(--g-panel), var(--g-card));
  border:1px solid var(--g-line); color:var(--g-heading);
  box-shadow:var(--g-shadow-sm); transition:transform .08s, border-color .15s, box-shadow .15s;
}
.iq-opt:hover{ border-color:var(--g-accent); transform:translateY(-2px); box-shadow:var(--g-shadow-md); }
.iq-opt:active{ transform:translateY(1px); }
.iq-opt.good{ border-color:var(--g-accent); box-shadow:0 0 0 3px var(--g-accent-soft), var(--g-shadow-md); }
.iq-opt.bad{ border-color:var(--g-accent-dk); opacity:.72; }
.iq-opt .k{ font-size:11px; color:var(--g-muted); margin-right:6px; }
.iq-opt[disabled]{ cursor:default; }

.iq-feed{ margin:0; min-height:22px; font-size:14px; color:var(--g-muted); text-align:center; }
.iq-feed.ok{ color:var(--g-accent-dk); font-weight:600; }
.iq-feed.no{ color:var(--g-heading); }

/* result */
.iq-result{
  width:100%; text-align:center; padding:22px 16px; border-radius:var(--g-radius);
  background:var(--g-card); border:1px solid var(--g-line); box-shadow:var(--g-shadow-md);
}
.iq-result h2{
  margin:0 0 8px; font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:26px; color:var(--g-heading);
}
.iq-stars{ font-size:26px; letter-spacing:6px; color:var(--g-accent); margin-bottom:6px; }
.iq-line{ margin:0 0 14px; font-size:15px; color:var(--g-muted); }
.iq-line b{ color:var(--g-heading); }
.iq-ctrl{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }

/* stage picker */
.iq-levels{ width:100%; text-align:center; }
.iq-levels h2{
  margin:0 0 12px; font-family:var(--serif,'Cormorant Garamond',Georgia,serif);
  font-size:21px; color:var(--g-heading);
}
.iq-cards{
  display:grid; gap:10px; justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.iq-card{
  text-align:left; padding:12px 13px; border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg, var(--g-panel), var(--g-card));
  border:1px solid var(--g-line); box-shadow:var(--g-shadow-sm);
  transition:transform .1s, box-shadow .15s, border-color .15s;
}
.iq-card:hover{ transform:translateY(-2px); box-shadow:var(--g-shadow-md); border-color:var(--g-accent); }
.iq-card h3{ margin:0 0 3px; font-size:15px; font-weight:600; color:var(--g-heading); }
.iq-card p{ margin:0; font-size:12px; color:var(--g-muted); line-height:1.45; }
.iq-card .st{ display:block; margin-top:6px; font-size:13px; color:var(--g-accent); letter-spacing:2px; }
.iq-card.locked{ opacity:.5; cursor:not-allowed; }
.iq-card.locked:hover{ transform:none; box-shadow:var(--g-shadow-sm); border-color:var(--g-line); }
.iq-card .best{ display:block; margin-top:4px; font-size:11px; color:var(--g-muted); }

.iq-tip{
  margin:0; max-width:640px; text-align:center; font-size:13px;
  line-height:1.6; color:var(--g-muted);
}
.iq-about{
  width:100%; max-width:640px; font-size:13px; line-height:1.65; color:var(--g-muted);
  border-top:1px solid var(--g-line); padding-top:12px; text-align:left;
}
.iq-about summary{ cursor:pointer; color:var(--g-heading); font-weight:600; }
.iq-about p{ margin:10px 0 0; }

@media (max-width:560px){
  .iq-tile{ height:136px; }
  .iq-tile .tl{ transform:scale(1.5); }
  .iq-cell{ width:52px; height:72px; }
  .iq-opt{ font-size:14px; padding:10px 13px; }
}