/* 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. */

/* Author display rules (.iq-play flex, .iq-grid grid, .iq-tile flex) beat the
   browser's own [hidden] rule, so hidden sections would still paint. Same
   guard tile-memory and the other games carry. */
.mj-game [hidden]{ display:none !important; }

.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 (fixed overlay — never pushes the board down) */
.iq-result{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(10,14,18,.52); backdrop-filter:blur(3px); }
.iq-result[hidden]{ display:none; }
.iq-result-card{ width:min(440px,92vw); max-height:90vh; overflow:auto; text-align:center; padding:22px 16px; border-radius:var(--g-radius);
  background:linear-gradient(180deg, var(--g-card), var(--g-bg));
  border:1px solid var(--g-accent-edge); box-shadow:0 0 0 4px var(--g-accent-soft), var(--g-shadow-lg), inset 0 1px 0 rgba(255,255,255,.28); }
.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); }

/* help overlay (top-right "?" button) */
.iq-help{ position:fixed; inset:0; z-index:92; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(10,14,18,.52); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .18s ease; }
.iq-help.show{ opacity:1; }

.iq-help-card{ position:relative; width:min(560px,94vw); max-height:86vh; overflow:auto;
  padding:26px 26px 28px; border-radius:16px;
  background:linear-gradient(180deg, var(--g-card), var(--g-bg));
  border:1px solid var(--g-accent-edge);
  box-shadow:0 0 0 4px var(--g-accent-soft), var(--g-shadow-lg), inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateY(8px); transition:transform .18s ease; }
.iq-help.show .iq-help-card{ transform:translateY(0); }
.iq-help-card h2{ font-family:var(--serif,'Cormorant Garamond',Georgia,serif); font-size:24px;
  color:var(--g-heading); margin:0 0 12px; }
.iq-help-card h3{ font-family:var(--serif,'Cormorant Garamond',Georgia,serif); font-size:16px;
  color:var(--g-heading); margin:18px 0 6px; }
.iq-help-lead{ max-width:62ch; font-size:14px; line-height:1.66; color:var(--g-fg); margin:0 0 4px; }
.iq-help-card p{ max-width:64ch; font-size:13.5px; line-height:1.72; color:var(--g-muted); margin:8px 0 0; }
.iq-help-note{ border-top:1px solid var(--g-line); padding-top:10px; margin-top:16px !important;
  font-size:12px; opacity:.85; }
.iq-help-x{ position:absolute; top:12px; right:12px; width:34px; height:34px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font:inherit;
  font-size:22px; line-height:1; color:var(--g-strong);
  background:linear-gradient(180deg, var(--g-card), var(--g-bg));
  border:1px solid var(--g-line); border-radius:50%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--g-shadow-sm);
  transition:border-color .15s, color .15s, transform .12s; }
.iq-help-x:hover{ border-color:var(--g-accent); color:var(--g-accent); transform:translateY(-1px); }
.iq-help-x:focus-visible{ outline:2px solid var(--g-accent); outline-offset:2px; }

@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; }
  .iq-help-card{ padding:22px 18px 24px; }
}