/* ------------------------------------------------------------------
 * Deep Cuts: the dance music knowledge test.
 * thedj-diaries.com/deep-cuts/
 *
 * Scoped to .djd-dc so the Newspack theme cannot reach in, and so this
 * cannot reach out and touch anything else on the site.
 * ---------------------------------------------------------------- */

.djd-dc{
  --dc-gold:#ffc93c; --dc-gold2:#ffe08a; --dc-cyan:#34f5e1;
  --dc-vio:#a68cff; --dc-mag:#ff5fa8;
  --dc-ink:#0b0b0d; --dc-deep:#0f0e1a; --dc-muted:#9d9890;
  --dc-text:#ece9e4; --dc-text2:#b9b4ab; --dc-text3:#d8d3ca;
  --dc-panel:#141418; --dc-panel2:#191920; --dc-panel3:#23232a;
  --dc-line:rgba(255,255,255,.10); --dc-paper:#191920;
  --dc-good:#3fcf87; --dc-bad:#ff6b83;
  font-family:inherit;
  max-width:820px; margin:0 auto; padding:1.5rem 1rem 3rem;
  color:var(--dc-text); line-height:1.55;
}
.djd-dc *{box-sizing:border-box}
.djd-dc button{font-family:inherit}
.dc-screen{display:none}
.dc-screen.is-on{display:block}
.djd-dc :focus-visible{outline:3px solid var(--dc-cyan); outline-offset:3px}

/* ---------- intro and tier select ---------- */
.dc-hero{
  background:linear-gradient(135deg,#1a1929 0%,#0f0e1a 100%);
  border-radius:16px; color:#fff; padding:0 0 2rem; overflow:hidden; text-align:center;
}
.dc-hero .djd-page-hero{margin:0 0 1.75rem}
.dc-hero-in{max-width:560px; margin:0 auto; padding:0 1.5rem}
.dc-hero h1{font-family:Montserrat,sans-serif; font-size:2.3rem; font-weight:900; margin:0 0 .6rem; color:#fff; line-height:1.12}
.dc-hero p{font-size:1.05rem; color:rgba(255,255,255,.74); margin:0 0 1.5rem}
.dc-meta{display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.58)}
.dc-meta span{border:1px solid rgba(255,255,255,.16); border-radius:50px; padding:.3rem .8rem}

.dc-tiers{display:grid; gap:.9rem; margin:2rem 0 0}
.dc-tier{
  display:grid; grid-template-columns:54px 1fr auto; gap:1rem; align-items:center;
  width:100%; text-align:left; background:var(--dc-panel); border:1px solid var(--dc-line); color:var(--dc-text);
  border-radius:14px; padding:1.1rem 1.25rem; cursor:pointer;
  transition:border-color .15s, transform .1s, box-shadow .15s;
}
.dc-tier:hover:not(.is-locked){border-color:var(--dc-gold); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.35)}
.dc-tier.is-locked{cursor:not-allowed; background:var(--dc-ink); border-style:dashed}
.dc-tier.is-locked .dc-tier-n{opacity:.35}
.dc-tier.is-locked .dc-tier-b strong{color:var(--dc-text2)}
.dc-tier.is-locked .dc-tier-b span{color:var(--dc-muted)}
.dc-tier-n{
  width:54px; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:Montserrat,sans-serif; font-weight:900; font-size:1.3rem; color:#0f0e1a;
}
.dc-tier-b{min-width:0}
.dc-tier-b strong{display:block; font-family:Montserrat,sans-serif; font-size:1.08rem; font-weight:800; margin-bottom:.15rem; color:var(--dc-text)}
.dc-tier-b span{display:block; font-size:.88rem; color:var(--dc-text2); line-height:1.5}
.dc-tier-s{text-align:right; font-size:.78rem; color:var(--dc-muted); white-space:nowrap; line-height:1.5}
.dc-tier-s b{display:block; font-size:1.05rem; color:var(--dc-text); font-variant-numeric:tabular-nums}
.dc-cleared{display:inline-block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--dc-good); background:rgba(63,207,135,.14); border-radius:50px; padding:.15rem .55rem; margin-top:.25rem}

.dc-reset{margin:1.5rem 0 0; background:none; border:none; color:var(--dc-muted); font-size:.82rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:.3rem 0}
.dc-reset:hover{color:var(--dc-text)}

/* ---------- question screen ---------- */
.dc-bar{display:flex; align-items:center; gap:1rem; margin-bottom:.6rem}
.dc-bar-t{flex:1; height:6px; background:rgba(255,255,255,.10); border-radius:3px; overflow:hidden}
.dc-bar-f{height:100%; background:linear-gradient(90deg,var(--dc-cyan),var(--dc-gold)); border-radius:3px; width:0; transition:width .35s ease}
.dc-count{font-size:.82rem; color:var(--dc-muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.dc-crumb{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dc-muted); margin-bottom:1.4rem}
.dc-crumb b{color:var(--dc-text); font-weight:700}
.dc-q{font-family:Montserrat,sans-serif; font-size:1.28rem; font-weight:700; line-height:1.42; margin:0 0 1.4rem; color:var(--dc-text)}
.dc-opts{display:grid; gap:.7rem}
.dc-opt{
  position:relative; background:var(--dc-panel); border:2px solid var(--dc-line); border-radius:12px;
  padding:.95rem 1.15rem .95rem 3rem; text-align:left; font-size:1rem; line-height:1.45;
  cursor:pointer; color:var(--dc-text); transition:border-color .15s, background .15s;
}
.dc-opt::before{
  content:attr(data-k); position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  width:1.5rem; height:1.5rem; border-radius:50%; border:1.5px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; color:var(--dc-muted);
}
.dc-opt:hover:not(:disabled){border-color:var(--dc-gold); background:var(--dc-panel2)}
.dc-opt:disabled{cursor:default}
.dc-opt.is-right{border-color:var(--dc-good); background:rgba(63,207,135,.10)}
.dc-opt.is-right::before{background:var(--dc-good); border-color:var(--dc-good); color:#0b0b0d; content:"✓"}
.dc-opt.is-wrong{border-color:var(--dc-bad); background:rgba(255,107,131,.10)}
.dc-opt.is-wrong::before{background:var(--dc-bad); border-color:var(--dc-bad); color:#0b0b0d; content:"✕"}
.dc-opt.is-dim{opacity:.45}

.dc-why{
  margin:1.1rem 0 0; padding:1rem 1.2rem; border-radius:0 10px 10px 0;
  background:var(--dc-paper); border-left:3px solid var(--dc-gold);
}
.dc-why[hidden]{display:none}
.dc-why b{display:block; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--dc-gold); margin-bottom:.35rem}
.dc-why p{margin:0; font-size:.95rem; line-height:1.65; color:var(--dc-text3)}
.dc-why-read,.dc-why-src{display:block; margin-top:.8rem; text-decoration:none; font-size:.9rem; line-height:1.45}
.dc-why-read{
  background:var(--dc-panel); border:1px solid var(--dc-line); border-radius:8px;
  padding:.6rem .85rem; color:var(--dc-text); font-weight:600;
  transition:border-color .15s, background .15s;
}
.dc-why-read span{
  display:block; font-size:.66rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--dc-muted); font-weight:700; margin-bottom:.15rem;
}
.dc-why-read:hover{border-color:var(--dc-gold); background:var(--dc-panel3)}
.dc-why-read::after{content:" \203A"; color:var(--dc-muted)}
.dc-why-src{font-size:.8rem; color:var(--dc-muted); text-decoration:underline; text-underline-offset:3px; margin-top:.55rem}
.dc-why-src:hover{color:var(--dc-text)}
.dc-missed .dc-why-read{margin-top:.7rem}

.dc-next{
  margin-top:1.1rem; background:var(--dc-gold); color:var(--dc-ink); border:none; border-radius:50px;
  padding:.8rem 2rem; font-size:1rem; font-weight:700; cursor:pointer; letter-spacing:.03em;
}
.dc-next:hover{background:#f0b71f}
.dc-next[hidden]{display:none}

/* ---------- results ---------- */
.dc-res-head{padding:2.5rem 2rem 2rem; border-radius:16px 16px 0 0; color:#fff; text-align:center}
.dc-ring{width:132px; height:132px; margin:0 auto 1.2rem; display:block}
.dc-res-label{font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.75; margin-bottom:.4rem}
.dc-res-head h2{font-family:Montserrat,sans-serif; font-size:1.95rem; font-weight:900; margin:0 0 .8rem; color:#fff; line-height:1.15}
.dc-res-head p{font-size:1rem; line-height:1.6; max-width:480px; margin:0 auto; opacity:.92}
.dc-res-body{padding:2rem; background:var(--dc-panel); border:1px solid var(--dc-line); border-top:none; border-radius:0 0 16px 16px}

.dc-h{font-family:Montserrat,sans-serif; font-size:.75rem; font-weight:700; color:var(--dc-muted); text-transform:uppercase; letter-spacing:.12em; margin:0 0 1rem}
.dc-block{margin-bottom:2rem}

.dc-unlock{
  display:flex; gap:.9rem; align-items:flex-start; padding:1rem 1.2rem; border-radius:10px;
  background:rgba(63,207,135,.10); border:1px solid rgba(63,207,135,.28); margin-bottom:2rem;
}
.dc-unlock > svg{flex:0 0 auto; width:22px; height:22px; margin-top:.2rem}
.dc-unlock.is-miss{background:var(--dc-paper); border-color:var(--dc-line)}
.dc-unlock strong{display:block; font-size:.98rem; margin-bottom:.15rem; color:var(--dc-text)}
.dc-unlock span{display:block; font-size:.88rem; color:var(--dc-text3); line-height:1.55}

.dc-dom{display:grid; gap:.55rem}
.dc-dom-row{display:grid; grid-template-columns:7.5rem 1fr 2.6rem; gap:.75rem; align-items:center}
.dc-dom-row i{font-style:normal; font-size:.87rem; text-transform:capitalize; color:var(--dc-text2)}
.dc-dom-t{height:9px; background:rgba(255,255,255,.10); border-radius:5px; overflow:hidden}
.dc-dom-f{height:100%; border-radius:5px; width:0; transition:width .7s ease .2s}
.dc-dom-row em{font-style:normal; font-size:.82rem; color:var(--dc-muted); text-align:right; font-variant-numeric:tabular-nums}

.dc-ach{display:grid; gap:.6rem}
.dc-ach-i{display:flex; gap:.85rem; align-items:flex-start; background:var(--dc-paper); border:1px solid var(--dc-line); border-left:3px solid var(--dc-gold); border-radius:0 8px 8px 0; padding:.8rem 1rem}
.dc-ach-i svg{flex:0 0 auto; width:20px; height:20px; margin-top:.15rem}
.dc-ach-i strong{display:block; font-size:.94rem; margin-bottom:.1rem; color:var(--dc-text)}
.dc-ach-i span{display:block; font-size:.85rem; color:var(--dc-text2); line-height:1.5}

.dc-missed{display:grid; gap:.7rem}
.dc-missed details{border:1px solid var(--dc-line); border-radius:10px; background:var(--dc-paper); padding:.75rem 1rem}
.dc-missed summary{cursor:pointer; font-size:.93rem; font-weight:600; line-height:1.5; color:var(--dc-text)}
.dc-missed summary::marker{color:var(--dc-muted)}
.dc-missed .dc-m-a{margin:.6rem 0 0; font-size:.88rem; color:var(--dc-good); font-weight:600}
.dc-missed .dc-m-w{margin:.35rem 0 0; font-size:.88rem; color:var(--dc-text3); line-height:1.6}

.dc-links{display:grid; gap:.55rem}
.dc-links a{display:block; background:var(--dc-panel2); border:1px solid var(--dc-line); border-radius:8px; padding:.75rem 1rem; color:var(--dc-text); text-decoration:none; font-size:.94rem; font-weight:600; transition:background .15s,color .15s}
.dc-links a:hover{background:var(--dc-panel3); color:var(--dc-gold)}

.dc-acts{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.75rem}
.dc-btn{border-radius:50px; padding:.75rem 1.6rem; font-size:.95rem; font-weight:700; cursor:pointer; border:2px solid var(--dc-text); background:transparent; color:var(--dc-text); transition:background .15s,color .15s}
.dc-btn:hover{background:var(--dc-text); color:var(--dc-ink)}
.dc-btn.is-fill{background:var(--dc-gold); border-color:var(--dc-gold); color:var(--dc-deep)}
.dc-btn.is-fill:hover{background:#f0b71f; border-color:#f0b71f; color:var(--dc-deep)}
.dc-copied{font-size:.82rem; color:var(--dc-good); align-self:center}

/* ---------- the profile ---------- */
.dc-profile-card{border-style:dashed}
.dc-profile-card:hover:not(.is-locked){border-style:solid}
.dc-profile-card .dc-tier-n svg{display:block}
.dc-opt-p.is-picked{border-color:var(--dc-gold); background:rgba(255,201,60,.10)}
.dc-opt-p:disabled:not(.is-picked){opacity:.5}
.dc-prof-offer{display:block}
.dc-prof-offer > svg{float:left; width:22px; height:22px; margin:.15rem .85rem 0 0}
.dc-prof-go{margin-top:.9rem}

.dc-lede{margin:-.4rem 0 1.2rem; font-size:.92rem; color:var(--dc-text2); line-height:1.6}
.dc-axis{margin-bottom:1.15rem}
.dc-axis-top{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.4rem}
.dc-axis-name{font-size:.95rem; font-weight:700; color:var(--dc-text)}
.dc-axis-val{font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--dc-text)}
.dc-axis-bar{height:10px; background:rgba(255,255,255,.10); border-radius:5px; overflow:hidden}
.dc-axis-fill{height:100%; border-radius:5px; width:0; transition:width .8s ease .2s}
.dc-axis-note{font-size:.85rem; color:var(--dc-muted); margin:.35rem 0 0; line-height:1.55}
.dc-map-svg{width:100%; max-width:420px; margin:0 auto; display:block}

@media (max-width:600px){
  .djd-dc{padding:1rem .75rem 2.5rem}
  .dc-hero h1{font-size:1.8rem}
  .dc-res-head{padding:1.9rem 1.15rem 1.5rem}
  .dc-res-head h2{font-size:1.55rem}
  .dc-res-body{padding:1.25rem}
  .dc-q{font-size:1.12rem}
  .dc-opt{font-size:.95rem; padding:.85rem 1rem .85rem 2.8rem}
  .dc-tier{grid-template-columns:44px 1fr; gap:.8rem; padding:.95rem 1rem}
  .dc-tier-n{width:44px; height:44px; font-size:1.1rem}
  .dc-tier-s{grid-column:2; text-align:left; margin-top:.3rem}
  .dc-dom-row{grid-template-columns:6rem 1fr 2.4rem; gap:.5rem}
  .dc-dom-row i{font-size:.8rem}
  .dc-acts .dc-btn{flex:1 1 100%; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .dc-bar-f,.dc-dom-f,.dc-tier,.dc-opt{transition:none}
}

/* Language switch, sits under the hero chips. */
.djd-dc .dc-lang{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 0;font-family:inherit}
.djd-dc .dc-lang-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dc-muted)}
.djd-dc .dc-lang-group{display:inline-flex;border:1px solid var(--dc-line);border-radius:999px;overflow:hidden;background:var(--dc-panel)}
.djd-dc .dc-lang-btn{appearance:none;border:0;background:transparent;color:var(--dc-text2);font:inherit;font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer;line-height:1}
.djd-dc .dc-lang-btn + .dc-lang-btn{border-left:1px solid var(--dc-line)}
.djd-dc .dc-lang-btn.is-on{background:var(--dc-text);color:var(--dc-ink)}
.djd-dc .dc-lang-btn:focus-visible{outline:2px solid #ffc93c;outline-offset:-2px}
.djd-dc[lang="ko"]{word-break:keep-all}