/* Five Tips: the loading bar fills as tips unlock; tips stack like loading-screen hints. */

/* ---------- Loader ---------- */
.loader{display:flex;flex-direction:column;gap:8px}
.loader-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.loader-head .hud{color:var(--muted)}
.loader-head .pct{color:var(--fg)}
.bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.seg{height:20px;border-radius:3px;background:var(--surface);border:1px solid var(--line)}
.seg.active{
  border-color:var(--accent-deep);
  background:repeating-linear-gradient(-45deg,var(--accent) 0 6px,var(--accent-deep) 6px 12px);
  background-size:17px 17px;
  animation:stripes .9s linear infinite;
}
@keyframes stripes{to{background-position:17px 0}}
.seg.wrong{background:var(--bad);border-color:var(--bad)}
.seg.skip{background:var(--skip);border-color:var(--skip)}
.seg.right{background:var(--good);border-color:var(--good)}
.seg.rest{background:var(--good-soft);border-color:var(--good);animation:fillin .4s ease-out both;animation-delay:calc(var(--i) * 90ms)}
@keyframes fillin{from{background:var(--surface);border-color:var(--line)}}

/* ---------- Tips ---------- */
.tips{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tip{
  display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:4px 12px;align-items:baseline;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
}
.tip .tip-no{color:var(--accent-text);padding-top:2px}
.tip p{margin:0;font-size:1.05rem;line-height:1.45;max-width:58ch}
.tip.latest{border-color:var(--accent-deep);box-shadow:var(--shadow)}
.tip.new{animation:tipin .35s ease-out}
@keyframes tipin{from{transform:translateY(6px);opacity:.35}to{transform:none;opacity:1}}
.tip.locked{background:transparent;border-style:dashed}
.tip.locked .tip-no,.tip.locked p{color:var(--muted)}
.tip.locked p{font-size:.92rem}

/* ---------- Guess form ---------- */
.play-area{display:flex;flex-direction:column;gap:10px}
.guess-form{display:flex;gap:8px;align-items:stretch}
.combo{position:relative;flex:1;min-width:0}
.combo input{
  width:100%;height:50px;padding:0 14px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);color:var(--fg);font-size:1rem;
}
.combo input::placeholder{color:var(--muted)}
.combo input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent-deep)}
.suggest{
  position:absolute;z-index:6;left:0;right:0;top:calc(100% + 6px);
  list-style:none;margin:0;padding:6px;max-height:280px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.suggest li{padding:10px 12px;border-radius:7px;cursor:pointer;line-height:1.3}
.suggest li[aria-selected="true"],.suggest li:hover{background:var(--accent-soft);color:var(--fg)}
.suggest .empty{color:var(--muted);cursor:default}
.suggest .empty:hover{background:none}
.guess-form .btn{height:50px}
.under-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}

/* ---------- Attempts ---------- */
.attempts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.att{display:grid;grid-template-columns:1.8rem minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 12px;border-radius:8px;border:1px solid transparent}
.att .att-t{overflow-wrap:anywhere}
.att.wrong{background:var(--bad-soft);border-color:var(--bad-soft)}
.att.wrong .att-r{color:var(--bad)}
.att.skip{background:var(--skip-soft)}
.att.skip .att-t{color:var(--muted);font-style:italic}
.att.skip .att-r{color:var(--muted)}
.att.right{background:var(--good-soft);border-color:var(--good)}
.att.right .att-r{color:var(--good)}
.att-no{color:var(--muted)}

@media (max-width:420px){
  .tip{grid-template-columns:1fr;gap:2px}
}