/* NotBroken — Build section (games + trivia). Tokens match the other tools. */
:root {
  --primary: #84C0A0; --primary-deep: #5B8A72; --terra: #E8A375; --text-light: #F2EFEA;
  --surface-bg: rgba(255, 255, 255, 0.12); --surface-border: rgba(255, 255, 255, 0.18); --surface-highlight: rgba(255, 255, 255, 0.24);
  --good: #7ED6A5; --bad: #FF8A8A;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #15181D; color: var(--text-light); }
.page-container {
  min-height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 1rem;
  background: linear-gradient(-45deg, #151A2B, #1E3A2E, #1A1F36, #2A4A3A); background-size: 400% 400%; animation: nbGradient 25s ease infinite;
}
@keyframes nbGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@media (prefers-reduced-motion: reduce) { .page-container { animation: none; } }
main { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 1.25rem; padding: 0.5rem 0 1rem; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; margin: 0; }
.nb-hero { text-align: center; padding: 1.2rem 0.5rem 0.4rem; }
.nb-hero__eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); font-weight: 700; margin: 0 0 8px; }
.nb-hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); line-height: 1.15; }
.nb-hero p { max-width: 560px; margin: 12px auto 0; color: rgba(242, 239, 234, .82); line-height: 1.6; font-size: 15px; }
.nb-panel { background: var(--surface-bg); border: 1px solid var(--surface-border); border-radius: 20px; padding: 1.1rem 1.2rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0,0,0,.2); }
/* ---- skill colours (one gradient per primary skill) ---- */
:root {
  --sk-memory: #7FB3FF; --sk-memory-2: #5B83D6;
  --sk-speed: #E8A375; --sk-speed-2: #C9764A;
  --sk-attention: #F2D06B; --sk-attention-2: #C9A33E;
  --sk-visual: #C98BE8; --sk-visual-2: #9A5FC2;
  --sk-spatial: #6FD6CF; --sk-spatial-2: #3FA59E;
  --sk-reasoning: #84C0A0; --sk-reasoning-2: #5B8A72;
  --sk-flexibility: #FF9BB3; --sk-flexibility-2: #D66A86;
  --sk-knowledge: #F7C98B; --sk-knowledge-2: #D59A4E;
}
.nb-card, .nb-intro__icon { --sk: var(--primary); --sk2: var(--primary-deep); }
.nb-card--memory, .nb-chip-skill--memory { --sk: var(--sk-memory); --sk2: var(--sk-memory-2); }
.nb-card--speed, .nb-chip-skill--speed { --sk: var(--sk-speed); --sk2: var(--sk-speed-2); }
.nb-card--attention, .nb-chip-skill--attention { --sk: var(--sk-attention); --sk2: var(--sk-attention-2); }
.nb-card--visual, .nb-chip-skill--visual { --sk: var(--sk-visual); --sk2: var(--sk-visual-2); }
.nb-card--spatial, .nb-chip-skill--spatial { --sk: var(--sk-spatial); --sk2: var(--sk-spatial-2); }
.nb-card--reasoning, .nb-chip-skill--reasoning { --sk: var(--sk-reasoning); --sk2: var(--sk-reasoning-2); }
.nb-card--flexibility, .nb-chip-skill--flexibility { --sk: var(--sk-flexibility); --sk2: var(--sk-flexibility-2); }
.nb-card--knowledge, .nb-chip-skill--knowledge { --sk: var(--sk-knowledge); --sk2: var(--sk-knowledge-2); }
.nb-chip-skill--all { --sk: #F2EFEA; --sk2: #B9B4AC; }

/* ---- HUD: level ring, XP, streak, badges ---- */
.nb-hud { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .nb-hud { grid-template-columns: 1.2fr 1fr; } .nb-hud__badges { grid-column: 1 / -1; } }
.nb-hud__level { display: flex; align-items: center; gap: 14px; }
.nb-hud__ring { --p: 0; flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), rgba(255,255,255,.1) 0); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 30px -12px rgba(132,192,160,.8); }
.nb-hud__ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: linear-gradient(180deg, #1F3A33, #161B2C); }
.nb-hud__num { position: relative; font-family: 'Playfair Display', Georgia, serif; font-size: 1.7rem; font-weight: 700; color: var(--text-light); }
.nb-hud__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.nb-hud__meta strong { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; }
.nb-hud__meta > span { font-size: 12.5px; color: rgba(242,239,234,.72); }
.nb-hud__bar { display: block; width: 100%; height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.nb-hud__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-deep), var(--primary)); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.nb-hud__stats { display: flex; gap: 8px; }
.nb-hud__stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: 11.5px; color: rgba(242,239,234,.75); text-align: center; }
.nb-hud__stat em { font-style: normal; font-family: 'Playfair Display', Georgia, serif; font-size: 1.35rem; font-weight: 700; color: var(--text-light); line-height: 1; }
.nb-hud__stat.is-hot em { color: var(--terra); }
.nb-hud__stat.is-hot em::before { content: '🔥'; font-size: .8em; margin-right: 3px; }
.nb-hud__stat small { font-size: 10px; color: var(--terra); }
.nb-hud__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: rgba(242,239,234,.45); }
.nb-badge i { font-style: normal; font-size: 12px; }
.nb-badge.is-on { background: rgba(242,208,107,.14); border-color: rgba(242,208,107,.45); color: #F2D06B; }

/* ---- skill picker + decide ---- */
.nb-skillbar__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.nb-skillbar__head .nb-group__title { margin: 0; }
.nb-btn.nb-btn--dice { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; min-height: 40px; font-size: 14px; background: linear-gradient(135deg, var(--terra), #C9764A); border-color: transparent; color: #13171D; }
.nb-btn--dice svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nb-btn--dice svg circle { fill: currentColor; stroke: none; }
.nb-btn.nb-btn--dice:hover { background: linear-gradient(135deg, #F0B98F, var(--terra)); }
.nb-skillbar__chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 480px) { .nb-skillbar__chips { grid-template-columns: repeat(3, 1fr); } }
.nb-chip-skill { display: flex; align-items: center; gap: 9px; font: inherit; text-align: left; color: var(--text-light); cursor: pointer; padding: 8px 10px 8px 8px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: background .15s, border-color .15s, transform .15s; min-height: 56px; }
.nb-chip-skill:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.nb-chip-skill:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; }
.nb-chip-skill.is-on { background: color-mix(in srgb, var(--sk) 18%, rgba(255,255,255,.06)); border-color: var(--sk); }
@supports not (background: color-mix(in srgb, red 10%, blue)) { .nb-chip-skill.is-on { background: rgba(255,255,255,.14); } }
.nb-chip-skill__ring { --p: 0; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; background: conic-gradient(var(--sk) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.nb-chip-skill__ring::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #1A2430; }
.nb-chip-skill__ring svg { position: relative; width: 18px; height: 18px; fill: none; stroke: var(--sk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nb-chip-skill__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nb-chip-skill__text strong { font-size: 12.5px; line-height: 1.2; }
.nb-chip-skill__text small { font-size: 10.5px; color: rgba(242,239,234,.65); }
@media (max-width: 420px) { .nb-chip-skill { padding: 7px 6px; gap: 6px; min-height: 52px; } .nb-chip-skill__ring { flex-basis: 32px; width: 32px; height: 32px; } .nb-chip-skill__ring svg { width: 15px; height: 15px; } .nb-chip-skill__text strong { font-size: 11.5px; } .nb-chip-skill__text small { font-size: 10px; } }

/* ---- daily mix ---- */
.nb-mix { display: flex; flex-direction: column; gap: 10px; }
.nb-mix__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nb-mix__label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.nb-mix__progress { font-size: 12px; color: rgba(242,239,234,.7); }
.nb-mix__progress.is-done { color: var(--good); font-weight: 600; }
.nb-mix__items { display: flex; flex-wrap: wrap; gap: 8px; }
.nb-mix__item { position: relative; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-light); background: rgba(255,255,255,.08); border: 1px solid var(--surface-border); border-radius: 999px; padding: 8px 14px 8px 10px; cursor: pointer; }
.nb-mix__item svg { width: 18px; height: 18px; color: var(--primary); }
.nb-mix__item:hover { background: rgba(255,255,255,.16); }
.nb-mix__item.is-done { border-color: rgba(126,214,165,.6); background: rgba(126,214,165,.12); }
.nb-mix__tick { font-style: normal; color: var(--good); font-weight: 700; }

/* ---- game cards ---- */
.nb-group__title { font-size: 1.05rem; color: rgba(242,239,234,.9); margin: 0 0 10px 4px; }
.nb-grid__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.nb-grid__head .nb-group__title { margin: 0; }
.nb-grid__count { font-size: 12px; color: rgba(242,239,234,.6); background: rgba(255,255,255,.08); border-radius: 999px; padding: 2px 8px; }
.nb-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 620px) { .nb-grid { grid-template-columns: 1fr 1fr; } }
.nb-card { position: relative; display: flex; flex-direction: column; background: var(--surface-bg); border: 1px solid var(--surface-border); border-radius: 18px; overflow: hidden; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.nb-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--sk), var(--sk2)); opacity: .9; }
.nb-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); box-shadow: 0 14px 30px -18px rgba(0,0,0,.8); }
.nb-card.is-roulette { border-color: var(--terra); box-shadow: 0 0 0 2px var(--terra), 0 0 30px rgba(232,163,117,.45); transform: scale(1.015); }
.nb-card__main { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: var(--text-light); cursor: pointer; background: none; border: 0; padding: 14px 14px 10px 16px; }
.nb-card__main:focus-visible { outline: 3px solid var(--terra); outline-offset: -3px; border-radius: 18px; }
.nb-card__tile { position: relative; flex: 0 0 60px; width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(135deg, var(--sk), var(--sk2)); color: #13171D; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px -12px var(--sk); }
.nb-card__tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.45), transparent 55%); pointer-events: none; }
.nb-card__icon { display: flex; }
.nb-card__icon svg { width: 30px; height: 30px; stroke-width: 2.2; }
.nb-prog__icon svg, .nb-intro__icon svg { width: 26px; height: 26px; }
.nb-card__lvl { position: absolute; right: -6px; bottom: -6px; font-size: 10px; font-weight: 800; letter-spacing: .3px; background: #161B2C; color: var(--sk); border: 1px solid var(--sk); border-radius: 999px; padding: 2px 6px; }
.nb-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nb-card__name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.08rem; font-weight: 700; }
.nb-card__tag { font-size: 13px; color: rgba(242,239,234,.78); line-height: 1.4; }
.nb-card__skills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.nb-skill { font-size: 10.5px; font-weight: 600; letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(242,239,234,.85); }
.nb-skill--memory { background: rgba(127,179,255,.22); } .nb-skill--speed { background: rgba(232,163,117,.24); } .nb-skill--attention { background: rgba(242,208,107,.22); }
.nb-skill--visual { background: rgba(201,139,232,.22); } .nb-skill--spatial { background: rgba(111,214,207,.22); } .nb-skill--reasoning { background: rgba(132,192,160,.25); } .nb-skill--flexibility { background: rgba(255,155,179,.22); } .nb-skill--knowledge { background: rgba(247,201,139,.22); }
.nb-card__stats { display: flex; gap: 10px; font-size: 12px; color: rgba(242,239,234,.7); margin-top: 2px; }
.nb-card__stat strong { color: var(--primary); }
.nb-card__stat--new { color: var(--terra); }
.nb-card__play { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #13171D; background: var(--primary); border-radius: 999px; padding: 8px 14px; }
.nb-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 10px 16px; font-size: 12px; }
.nb-card__origin { color: rgba(242,239,234,.6); text-decoration: none; min-width: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-card__origin span { color: rgba(242,239,234,.85); border-bottom: 1px dotted rgba(242,239,234,.4); }
.nb-card__origin i { font-style: normal; color: var(--primary); }
.nb-card__origin:hover span { color: var(--primary); border-bottom-color: var(--primary); }
.nb-card__demo { flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 600; color: var(--primary); background: none; border: 1px solid rgba(132,192,160,.4); border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.nb-card__demo:hover { background: rgba(132,192,160,.15); }
.nb-card__demo:focus-visible, .nb-card__origin:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; }

/* ---- skill grid in the progress panel ---- */
.nb-skillgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 4px 0 12px; }
@media (min-width: 560px) { .nb-skillgrid { grid-template-columns: repeat(4, 1fr); } }
.nb-skillgrid__item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.nb-skillgrid__item > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.nb-skillgrid__item small { color: rgba(242,239,234,.65); font-size: 10.5px; }

/* progress */
.nb-progress__summary { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: rgba(242,239,234,.85); margin-bottom: 10px; }
.nb-progress__summary strong { color: var(--primary); font-size: 18px; }
.nb-progress__empty { margin: 0; color: rgba(242,239,234,.75); font-size: 14px; line-height: 1.55; }
.nb-prog { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.1); }
.nb-prog__head { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 4px; }
.nb-prog__icon { color: var(--primary); display: flex; } .nb-prog__icon svg { width: 18px; height: 18px; }
.nb-prog__name { font-weight: 600; flex: 1 1 auto; }
.nb-prog__best { font-size: 12.5px; color: var(--primary); }
.nb-prog__trend { font-size: 12.5px; color: rgba(242,239,234,.7); margin-top: 2px; }
.nb-progress__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nb-spark { display: block; }
.nb-spark__area { fill: rgba(132,192,160,.18); } .nb-spark__line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nb-spark__best { fill: var(--terra); } .nb-spark__last { fill: #fff; } .nb-spark__empty { fill: rgba(242,239,234,.55); font-size: 12px; }
/* buttons */
.nb-btn { font: inherit; font-size: 15px; font-weight: 600; border-radius: 12px; border: 1px solid var(--surface-border); background: rgba(255,255,255,.1); color: var(--text-light); padding: 12px 18px; min-height: 46px; cursor: pointer; transition: background .15s, transform .1s; }
.nb-btn:hover { background: rgba(255,255,255,.18); }
.nb-btn:active { transform: scale(.98); }
.nb-btn:disabled { opacity: .45; cursor: default; transform: none; }
.nb-btn:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; }
.nb-btn--primary { background: var(--primary); border-color: var(--primary); color: #13171D; }
.nb-btn--primary:hover { background: #A6D2BC; }
.nb-btn--ghost { background: transparent; }
.nb-btn--big { flex: 1 1 0; min-height: 64px; font-size: 17px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.nb-btn--big small { font-size: 11px; font-weight: 500; opacity: .6; }
.nb-btn--big.is-on { background: var(--primary); color: #13171D; }
/* stage */
.nb-stage.modal-overlay { display: flex; justify-content: center; align-items: flex-start; padding: 0; background: rgba(10, 13, 20, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 1100; }
.nb-stage.modal-overlay.visible { opacity: 1; visibility: visible; }
.nb-stage__card:focus, .nb-stage__card:focus-visible { outline: none; }
.nb-stage__card { width: 100%; max-width: 640px; min-height: 100%; background: linear-gradient(180deg, #1B2A2A 0%, #161B2C 100%); display: flex; flex-direction: column; }
@media (min-width: 700px) { .nb-stage.modal-overlay { padding: 24px 16px; align-items: flex-start; } .nb-stage__card { min-height: 0; border-radius: 22px; border: 1px solid var(--surface-border); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); margin-top: auto; margin-bottom: auto; } }
.nb-stage__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); position: sticky; top: 0; background: rgba(22,27,44,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2; border-radius: 22px 22px 0 0; }
.nb-stage__back { font: inherit; font-size: 14px; font-weight: 600; color: var(--primary); background: none; border: 0; cursor: pointer; padding: 8px 6px; min-height: 40px; }
.nb-stage__title { flex: 1 1 auto; font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; font-weight: 700; text-align: center; }
.nb-stage__status { min-width: 60px; text-align: right; font-size: 13px; color: rgba(242,239,234,.7); }
.nb-stage__body { padding: 18px 16px 28px; flex: 1 1 auto; }
html.nb-stage-open body { overflow: hidden; }
/* intro */
.nb-intro { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nb-intro__icon { width: 68px; height: 68px; border-radius: 20px; background: linear-gradient(135deg, var(--sk), var(--sk2)); color: #13171D; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px -14px var(--sk); } .nb-intro__icon svg { width: 34px; height: 34px; stroke-width: 2.2; }
.nb-intro__origin { margin: 0; font-size: 13px; color: rgba(242,239,234,.72); max-width: 480px; line-height: 1.5; }
.nb-intro__origin a { color: var(--primary); font-weight: 600; text-decoration: none; border-bottom: 1px dotted rgba(132,192,160,.6); }
.nb-intro__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; width: 100%; }
.nb-intro__tag { margin: 0; font-size: 15px; color: rgba(242,239,234,.85); line-height: 1.5; max-width: 460px; }
.nb-intro__skills { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.nb-intro__h { font-size: 1rem; margin-top: 8px; }
.nb-intro__steps { text-align: left; margin: 0; padding-left: 22px; font-size: 14.5px; line-height: 1.55; color: rgba(242,239,234,.88); max-width: 480px; }
.nb-intro__steps li { margin-bottom: 6px; }
.nb-intro__options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.nb-opt { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: rgba(242,239,234,.7); text-align: left; }
.nb-opt select { font: inherit; font-size: 14px; color: var(--text-light); background: rgba(255,255,255,.1); border: 1px solid var(--surface-border); border-radius: 10px; padding: 9px 12px; min-height: 42px; }
.nb-opt select option { color: #1A1F36; }
.nb-intro__best { margin: 2px 0; font-size: 13.5px; color: rgba(242,239,234,.8); } .nb-intro__best strong { color: var(--primary); }
.nb-intro__start { min-width: 180px; font-size: 17px; }
.nb-intro__demo { font-size: 14.5px; }
.nb-evidence__refs a { color: var(--primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nb-evidence__refs a:hover { text-decoration: underline; }
.nb-evidence { width: 100%; max-width: 520px; text-align: left; margin-top: 14px; font-size: 13.5px; }
.nb-evidence summary { cursor: pointer; color: var(--primary); font-weight: 600; padding: 8px 0; list-style: none; }
.nb-evidence summary::-webkit-details-marker { display: none; }
.nb-evidence summary::before { content: '\25B8  '; } .nb-evidence[open] summary::before { content: '\25BE  '; }
.nb-evidence__body { color: rgba(242,239,234,.82); line-height: 1.55; }
.nb-evidence__body ul { padding-left: 18px; margin: 8px 0; } .nb-evidence__body li { margin-bottom: 5px; font-size: 12.5px; }
.nb-evidence__note { font-size: 12.5px; color: rgba(242,239,234,.65); border-top: 1px solid rgba(255,255,255,.1); padding-top: 8px; }
/* play */
.nb-play { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* demo mode: caption bar + tap rings */
.nb-demo-bar { display: flex; align-items: center; gap: 10px; margin: -6px 0 14px; padding: 10px 12px; border-radius: 14px; background: rgba(232,163,117,.12); border: 1px solid rgba(232,163,117,.4); }
.nb-demo-bar__badge { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #13171D; background: var(--terra); border-radius: 999px; padding: 4px 8px; }
.nb-demo-bar__text { flex: 1 1 auto; font-size: 13.5px; line-height: 1.45; color: var(--text-light); min-height: 1.4em; }
.nb-demo-bar__skip { flex: 0 0 auto; font-size: 12.5px; padding: 7px 10px; min-height: 36px; }
.nb-play.is-demo { pointer-events: none; }
.nb-tapring { position: absolute; z-index: 5; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 3px solid var(--terra); box-shadow: 0 0 0 4px rgba(232,163,117,.35); pointer-events: none; animation: nbTap .7s ease-out forwards; }
@keyframes nbTap { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.nb-stage__card { position: relative; }
.nb-play__hint { margin: 0; font-size: 14px; color: rgba(242,239,234,.78); text-align: center; min-height: 1.3em; }
.nb-play__hint strong, .nb-play__hint span { color: var(--text-light); }
.is-good { color: var(--good) !important; } .is-bad { color: var(--bad) !important; }
.nb-error { color: var(--bad); }
/* results */
.nb-results { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nb-results__label { margin: 0; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.nb-results__score { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 2.6rem; font-weight: 700; line-height: 1.1; }
.nb-results__best { margin: 0; color: var(--terra); font-weight: 700; } .nb-results__sub { margin: 0; color: rgba(242,239,234,.7); font-size: 14px; }
.nb-results__lines { list-style: none; margin: 6px 0; padding: 0; font-size: 14px; color: rgba(242,239,234,.85); line-height: 1.6; }
.nb-results__trend { margin: 0; font-size: 13px; color: rgba(242,239,234,.7); min-height: 1.2em; }
.nb-results__tip { margin: 6px 0 0; font-size: 13.5px; color: rgba(242,239,234,.8); max-width: 440px; line-height: 1.5; background: rgba(255,255,255,.07); border-radius: 12px; padding: 10px 14px; }
.nb-results__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.nb-results__xp { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 6px 0 2px; }
.nb-results__xpgain { font-weight: 800; color: var(--terra); font-size: 15px; }
.nb-results__xpmeta { font-size: 12.5px; color: rgba(242,239,234,.7); }
.nb-results__badge { margin: 0; color: #F2D06B; font-weight: 700; font-size: 14px; }
.nb-results--demo .nb-results__score { color: var(--terra); }
.nb-results .nb-spark { max-width: 360px; margin-top: 8px; }
/* ---- game boards ---- */
.nb-corsi-board, .nb-tr-board, .nb-ch-board, .nb-fv-board, .nb-hm-board { position: relative; width: min(100%, 420px); aspect-ratio: 1; background: rgba(0,0,0,.25); border-radius: 18px; border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.nb-corsi-block { position: absolute; width: 14%; height: 14%; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.12); cursor: pointer; transition: background .1s, transform .1s; padding: 0; }
.nb-corsi-block.is-lit { background: var(--primary); box-shadow: 0 0 20px rgba(132,192,160,.7); }
.nb-corsi-block.is-tap { background: var(--terra); transform: scale(1.08); }
.is-showing .nb-corsi-block { cursor: default; }
.nb-ch-item { position: absolute; width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--c); border-radius: 3px; }
.nb-ch-item--circle { border-radius: 50%; } .nb-ch-item--diamond { transform: translate(-50%, -50%) rotate(45deg); border-radius: 4px; }
.nb-ch-item--triangle { background: none; width: 0; height: 0; border-left: 5.5vmin solid transparent; border-right: 5.5vmin solid transparent; border-bottom: 10vmin solid var(--c); max-width: 0; border-left-width: min(5.5vmin, 22px); border-right-width: min(5.5vmin, 22px); border-bottom-width: min(10vmin, 40px); aspect-ratio: auto; }
.nb-oo-cell .nb-ch-item { position: static; transform: none; width: 60%; } .nb-oo-cell .nb-ch-item--diamond { transform: rotate(45deg); width: 48%; }
.nb-oo-cell .nb-ch-item--triangle { width: 0; }
.nb-rt-light { width: min(220px, 60vw); aspect-ratio: 1; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: rgba(242,239,234,.7); font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; transition: background .05s; }
.nb-rt-light.is-go { background: var(--good); color: #13171D; box-shadow: 0 0 40px rgba(126,214,165,.6); }
.nb-rt-arrows { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.nb-rt-arrow { font-size: 4rem; line-height: 1; min-height: 4.5rem; color: var(--terra); }
.nb-rt-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 420px; }
.nb-rt-btns .nb-btn--big { font-size: 26px; }
.nb-st-word { font-size: 3rem; font-weight: 800; letter-spacing: 2px; min-height: 4rem; line-height: 4rem; }
.nb-st-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 420px; }
.nb-st-btn { height: 64px; border-radius: 14px; border: 2px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.nb-st-btn span { width: 28px; height: 28px; border-radius: 50%; background: var(--c); } .nb-st-btn small { font-size: 11px; color: rgba(242,239,234,.6); }
.nb-tr-dot { position: absolute; width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: var(--text-light); font: inherit; font-weight: 700; font-size: clamp(13px, 3.2vmin, 18px); cursor: pointer; padding: 0; }
.nb-tr-dot.is-done { background: var(--primary); border-color: var(--primary); color: #13171D; } .nb-tr-dot.is-wrong { background: var(--bad); }
.nb-fv-centre { position: absolute; left: 50%; top: 50%; width: 12%; aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; }
.nb-fv-centre.is-circle { opacity: 1; border-radius: 50%; background: var(--primary); } .nb-fv-centre.is-square { opacity: 1; border-radius: 3px; background: var(--primary); }
.nb-fv-centre.is-mask { opacity: 1; background: repeating-linear-gradient(45deg, #888 0 3px, #333 3px 6px); border-radius: 3px; }
.nb-fv-spot { position: absolute; width: 10%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(255,255,255,.15); background: transparent; cursor: pointer; padding: 0; }
.nb-fv-spot.is-target::after { content: '\2605'; color: var(--terra); font-size: clamp(16px, 5vmin, 28px); line-height: 1; }
.nb-fv-spot.is-distractor::after { content: '\25CF'; color: rgba(242,239,234,.35); font-size: clamp(14px, 4vmin, 22px); }
.nb-fv-spot.is-mask { background: repeating-linear-gradient(45deg, #888 0 3px, #333 3px 6px); }
.nb-fv-spot:not(:disabled) { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); }
.nb-fv-spot.is-reveal { background: var(--terra); }
.nb-fv-q { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nb-oo-grid { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 6px; width: min(100%, 400px); }
.nb-oo-cell { aspect-ratio: 1; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.nb-oo-cell.is-wrong { background: rgba(255,138,138,.3); }
.nb-rot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(100%, 420px); }
.nb-rot-a, .nb-rot-b { aspect-ratio: 1; background: rgba(0,0,0,.25); border-radius: 18px; border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
.nb-rot-shape { width: 85%; height: 85%; }
.nb-mx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(100%, 330px); }
.nb-mx-cell { aspect-ratio: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.nb-mx-cell svg, .nb-mx-opt svg { width: 80%; height: 80%; }
.nb-mx-cell.is-missing { font-family: 'Playfair Display', Georgia, serif; font-size: 2rem; color: var(--terra); border-style: dashed; }
.nb-mx-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 360px); }
.nb-mx-opt { aspect-ratio: 1; background: rgba(255,255,255,.1); border: 2px solid var(--surface-border); border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.nb-mx-opt:hover { border-color: var(--primary); } .nb-mx-opt.is-wrong { border-color: var(--bad); }
.nb-hm-svg { width: 100%; height: 100%; display: block; }
.nb-hm-path { fill: none; stroke: var(--primary); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.nb-hm-dot { fill: var(--terra); } .nb-hm-start { fill: none; stroke: var(--text-light); stroke-width: .8; } .nb-hm-answer { stroke: var(--good); }
.nb-hm-compass { position: absolute; width: 0; height: 0; }
.nb-hm-dir { position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(22,27,44,.9); color: var(--text-light); font-size: 18px; cursor: pointer; transform: rotate(var(--a)) translateY(-58px); padding: 0; }
.nb-hm-dir:hover { background: var(--primary); color: #13171D; }
/* trivia */
.nb-tv-card { width: 100%; max-width: 560px; }
.nb-tv-topic { margin: 0 0 6px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--primary); font-weight: 700; }
.nb-tv-q { font-size: 1.25rem; line-height: 1.35; margin: 0 0 14px; }
.nb-tv-opts { display: grid; gap: 8px; }
.nb-tv-opt { text-align: left; font: inherit; font-size: 15px; line-height: 1.4; color: var(--text-light); background: rgba(255,255,255,.08); border: 1px solid var(--surface-border); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.nb-tv-opt:hover:not(:disabled) { border-color: var(--primary); background: rgba(255,255,255,.14); }
.nb-tv-opt.is-right { border-color: var(--good); background: rgba(126,214,165,.18); } .nb-tv-opt.is-wrong { border-color: var(--bad); background: rgba(255,138,138,.15); }
.nb-tv-opt:disabled { cursor: default; opacity: .9; }
.nb-tv-after { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.nb-tv-verdict { margin: 0; font-weight: 700; }
.nb-tv-why { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(242,239,234,.9); }
.nb-tv-video { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-light); background: rgba(255,255,255,.07); border: 1px solid var(--surface-border); border-radius: 14px; padding: 10px 12px; }
.nb-tv-video:hover { border-color: var(--terra); }
.nb-tv-video__play { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--terra); color: #13171D; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.nb-tv-video__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nb-tv-video__text strong { font-size: 13.5px; line-height: 1.3; } .nb-tv-video__text small { font-size: 12px; color: rgba(242,239,234,.65); }
.nb-tv-next { align-self: flex-start; }
/* about-style note */
.nb-note { font-size: 13.5px; line-height: 1.6; color: rgba(242,239,234,.78); }
.nb-note a { color: var(--primary); font-weight: 600; }
@media (max-width: 400px) { .nb-btn--big { font-size: 15px; min-height: 58px; } .nb-st-btns, .nb-rt-btns { gap: 6px; } }