/* IQ Test — on top of /brain-games/brain.css */
.welcome[hidden], .test[hidden]{ display:none; }
.parts{ display:grid; gap:8px; margin:4px 0 16px; list-style:none; }
.parts li{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:var(--paper); border:1.5px solid var(--line); }
.parts .pn{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:900; font-family:"Fraunces",Georgia,serif; background:var(--c); }
.parts b{ display:block; font-size:15.5px; }
.parts span{ font-size:13.5px; color:var(--inksoft); }
.parts .pt{ margin-left:auto; font-size:13px; font-weight:800; color:var(--inksoft); white-space:nowrap; }
.startbox{ display:grid; justify-items:center; gap:10px; text-align:center; background:var(--paper); border:1.5px solid var(--line); border-radius:20px; padding:20px 16px; margin-bottom:12px; }
.startbox .btn.big{ min-width:220px; }
.honest{ font-size:14px; color:#3d3226; background:#fff7e6; border:1.5px solid #f0dcb0; border-radius:14px; padding:12px 14px; margin-bottom:14px; }
.resume{ font-size:14px; color:var(--inksoft); }
.hist{ list-style:none; display:grid; gap:6px; margin:8px 0 10px; }
.hist li{ font-size:14.5px; padding:8px 12px; border-radius:10px; background:var(--paper); border:1px solid var(--line); }
#history h2{ font-family:"Fraunces",Georgia,serif; font-size:19px; margin-top:6px; }
#history{ margin-bottom:16px; }

/* the bar at the top of every test screen */
.tbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.tpart{ font-size:14px; color:var(--inksoft); }
.tpart b{ color:var(--c); font-weight:800; }
.tright{ display:flex; align-items:center; gap:8px; }
.pdots{ list-style:none; display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin:0 0 12px; }
.pdots li{ height:6px; border-radius:99px; background:var(--sand); position:relative; }
.pdots li.done{ background:var(--c); }
.pdots li.now{ background:linear-gradient(90deg, var(--c) 0 40%, var(--sand) 40%); }
.pdots span{ position:absolute; top:9px; left:0; right:0; text-align:center; font-size:11px; font-weight:700; color:var(--inksoft); }
.pdots{ margin-bottom:28px; }

.tstage{ justify-content:flex-start; }
.tstage .intro{ max-width:520px; }
.tstage .pk{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.example{ display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; justify-items:center; background:var(--cream); border-radius:14px; padding:12px; }
.example p{ font-size:14px; text-align:center; }
.exgrid .mx-grid{ width:min(100%, 220px); }
.shex{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; width:100%; max-width:360px; }
.shex figure{ display:grid; gap:4px; justify-items:center; }
.shex figcaption{ font-size:12px; font-weight:700; color:var(--inksoft); text-align:center; }
.shbox{ width:100%; aspect-ratio:1; border-radius:14px; background:var(--paper); border:1.5px solid var(--line); padding:6%; }
.shbox svg, .shopt svg{ width:100%; height:100%; display:block; }
.shbox.good{ border-color:var(--good); } .shbox.bad{ border-color:#d8b4ae; }

.q{ gap:12px; }
.qtop{ width:100%; display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--inksoft); }
.qtop b{ color:var(--ink); }
.clock{ font-family:"Fraunces",Georgia,serif; font-weight:800; font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums; background:var(--sand); border-radius:10px; padding:2px 10px; }
.clock.low{ background:#fbe9e7; color:var(--bad); }
.qdots{ display:flex; flex-wrap:wrap; gap:5px; justify-content:center; }
.qdot{ width:30px; height:30px; border-radius:8px; border:1.5px solid var(--line); background:var(--paper); font-size:12px; font-weight:800; color:var(--inksoft); cursor:pointer; }
.qdot.ans{ background:var(--sand); color:var(--ink); }
.qdot.now{ border-color:var(--ink); color:var(--ink); box-shadow:0 0 0 2px var(--ink) inset; }
.qbody{ width:100%; display:grid; grid-template-columns:minmax(0, 1fr); justify-items:center; gap:14px; }
.qnav{ display:flex; gap:8px; justify-content:space-between; width:100%; max-width:440px; }
.qnav .btn{ flex:1; }
.qnote{ font-size:14px; color:var(--bad); text-align:center; min-height:0; font-weight:700; }
.timeup{ font-family:"Fraunces",Georgia,serif; font-size:24px; font-weight:800; padding:40px 0; }

.shtarget{ display:grid; justify-items:center; gap:6px; width:min(60%, 210px); }
.shtarget span{ font-size:14px; font-weight:700; color:var(--inksoft); text-align:center; }
.shtarget .shbox{ border-width:2px; border-color:#cdbd9f; }
.shopts{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; width:min(100%, 460px); }
.shopt{ position:relative; aspect-ratio:1; border-radius:14px; border:2px solid var(--line); background:var(--paper); padding:6%; cursor:pointer; touch-action:manipulation; }
.shopt:hover{ border-color:#7b3fa8; }
.shopt i{ position:absolute; top:3px; left:7px; font-style:normal; font-size:11px; font-weight:800; color:#b8a98e; }
.shopt.chosen{ border-color:#7b3fa8; background:#f4eefa; box-shadow:0 0 0 3px #e2d3f0; }

.memarea{ width:100%; display:grid; grid-template-columns:minmax(0, 1fr); justify-items:center; gap:14px; min-height:260px; align-content:center; }
.memintro{ display:grid; gap:14px; justify-items:center; text-align:center; max-width:420px; }
.codes{ display:grid; gap:10px; justify-items:center; padding:14px 0; }
.codes.new .code{ animation:pop .18s ease-out; }
.code{ font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; font-weight:700; font-size:clamp(30px, 9vw, 42px); letter-spacing:.18em; padding:6px 16px; border-radius:12px; background:var(--cream); border:1.5px solid var(--line); min-width:7.5em; text-align:center; min-height:1.6em; }

/* results */
.results{ gap:16px; }
.rcard{ width:100%; max-width:560px; display:grid; gap:14px; }
.rcard .rk{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--inksoft); text-align:center; }
.rhead{ display:flex; align-items:center; gap:16px; justify-content:center; }
.ring{ flex:none; width:104px; height:104px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--maroon) calc(var(--p) * 1%), var(--sand) 0); position:relative; }
.ring::before{ content:""; position:absolute; inset:10px; border-radius:50%; background:var(--paper); }
.ring b{ position:relative; font-family:"Fraunces",Georgia,serif; font-size:28px; font-weight:900; }
.rband{ font-family:"Fraunces",Georgia,serif; font-size:34px; font-weight:900; line-height:1.05; letter-spacing:-.02em; }
.rline{ font-size:14.5px; color:#3d3226; max-width:300px; }
.bars{ display:grid; gap:10px; }
.barrow{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; }
.barlab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; font-size:14px; }
.barlab b{ color:var(--c); }
.barlab span{ color:var(--inksoft); font-size:13px; }
.bartrack{ grid-column:1 / -1; height:12px; border-radius:99px; background:var(--sand); overflow:hidden; }
.bartrack i{ display:block; height:100%; border-radius:99px; background:var(--c); }
.barpct{ grid-row:1; grid-column:2; font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; }
.rexplain{ width:100%; max-width:560px; display:grid; gap:8px; font-size:15px; color:#3d3226; }
.rexplain h3{ font-family:"Fraunces",Georgia,serif; font-size:19px; color:var(--ink); margin-top:8px; }
.memcmp{ margin-left:20px; display:grid; gap:4px; }
.memcmp li.above b{ color:var(--good); } .memcmp li.below b{ color:var(--bad); }
.mh-note{ font-size:14px; border-left:3px solid var(--gold); padding:2px 0 2px 12px; }
.rscore.small{ font-size:32px; }

body.testing .welcome-only{ display:none; }
@media (max-width:420px){
  .rhead{ flex-direction:column; text-align:center; }
  .rline{ margin:0 auto; }
  .tpart{ font-size:13px; }
  .pdots span{ font-size:10px; }
  .shopts{ grid-template-columns:repeat(2, 1fr); width:min(100%, 300px); }
  .shtarget{ width:min(50%, 170px); }
}
@media print{
  body{ background:#fff; }
  .welcome, .tbar, .pdots, .rbtns, .rexplain, .mh-guide, .mh-related, h1.title, .sub{ display:none !important; }
  .stage{ border:none; box-shadow:none; }
  .ring, .bartrack, .bartrack i, .pn{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}