@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@400;600;700&display=swap');

#btd-app {
  --btd-bg:#fff; --btd-surface:#f7f7f5; --btd-surface2:#edede8;
  --btd-border:#dfdfdf; --btd-border-dk:#b0b0a8;
  --btd-text:#121212; --btd-muted:#737373;
  --btd-green:#6aaa64; --btd-red:#e03030; --btd-yellow:#f7da21;
  --btd-font-head:'Libre Baskerville',Georgia,serif;
  --btd-font-body:'Source Sans 3','Helvetica Neue',Arial,sans-serif;
  --btd-font-mono:'Courier New',monospace;
  font-family:var(--btd-font-body) !important;
  font-size:16px !important;
  line-height:1.5 !important;
  background:var(--btd-bg) !important;
  color:var(--btd-text) !important;
  min-height:520px;
  border:1px solid var(--btd-border);
  border-top:none;
  max-width:680px;
  margin:0 auto;
  position:relative;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* ── Genesis theme conflict overrides ──────────────────────────
   Targeted fixes for every Genesis rule that bleeds into #btd-app.
   These are specific to Genesis Sample / StudioPress themes.
   ─────────────────────────────────────────────────────────── */

/* Genesis sets p { margin:0 0 28px } */
#btd-app p { margin:0 !important; padding:0 !important; }

/* Genesis sets h1-h6 { margin:0 0 20px; font-weight:400; font-family:Source Sans Pro } */
#btd-app h1,#btd-app h2,#btd-app h3,#btd-app h4,#btd-app h5,#btd-app h6 {
  margin:0 !important; padding:0 !important; font-weight:inherit !important; font-size:inherit !important; font-family:inherit !important; line-height:inherit !important;
}

/* Genesis sets em,i,cite { margin-left:32px } — breaks italic subtitles */
#btd-app em, #btd-app i, #btd-app cite { margin-left:0 !important; font-style:italic; }

/* Genesis sets input { width:100%; padding:15px; font-size:18px; border:1px solid #ddd } */
#btd-app input {
  width:auto !important; padding:0 !important; font-size:inherit !important;
  font-family:inherit !important; border:none !important; background:none !important;
  color:inherit !important; margin:0 !important; line-height:inherit !important;
}

/* Genesis sets button { padding:15px 30px; font-size:16px; border-radius:5px; background:#333 } */
#btd-app button {
  padding:0 !important; font-size:inherit !important; border-radius:0 !important;
  background:none !important; border:none !important; color:inherit !important;
  font-family:inherit !important; font-weight:inherit !important;
  cursor:pointer !important; margin:0 !important; width:auto !important;
  text-transform:none !important; white-space:normal !important;
  letter-spacing:normal !important; transition:none !important;
}
/* Genesis button:hover sets background:#0073e5 */
#btd-app button:hover { background:none !important; color:inherit !important; }
#btd-app button:focus,#btd-app button:active { outline:none; }

/* Genesis sets a { color:#0073e5; text-decoration:underline } */
#btd-app a { color:var(--btd-text) !important; text-decoration:none !important; }
#btd-app a:hover,#btd-app a:focus { color:var(--btd-text) !important; text-decoration:none !important; }

/* Genesis sets img { height:auto; vertical-align:top } — distorts SVG ring */
#btd-app img { height:auto !important; vertical-align:top !important; }
#btd-app svg { display:block !important; overflow:visible !important; height:auto; }

/* Genesis sets ul,ol { margin:0; padding:0 } and li { list-style:none } — already fine */
#btd-app ul, #btd-app ol { list-style:none !important; margin:0 !important; padding:0 !important; }

/* Genesis strong { font-weight:bolder } */
#btd-app strong, #btd-app b { font-weight:700 !important; }

/* box-sizing */
#btd-app *, #btd-app *::before, #btd-app *::after { box-sizing:border-box !important; }

/* Genesis ::before on .entry clears floats — could inject content into our screens */
#btd-app .btd-screen::before, #btd-app .btd-screen::after { content:none !important; display:none !important; }
#btd-app::before { content:'' !important; display:block !important; height:3px !important; background:var(--btd-text) !important; margin:0 !important; padding:0 !important; }

/* Screen visibility — controlled entirely by JS inline styles now */
#btd-app .btd-screen { display:none !important; }
#btd-app .btd-screen.btd-active { display:block !important; }
#btd-welcome:not(.btd-active),
#btd-hub:not(.btd-active),
#btd-game:not(.btd-active),
#btd-results:not(.btd-active) {
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
  position:absolute !important;
  left:-9999px !important;
}
@keyframes btdFade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
#btd-app div.btd-screen.btd-active { animation:btdFade .2s ease; }

/* Welcome */
#btd-app .btd-welcome-inner { display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; padding:2.5rem 2rem 3rem !important; gap:1rem !important; }
#btd-app .btd-rule { width:100% !important; max-width:360px !important; height:1px !important; background:var(--btd-text) !important; }
#btd-app .btd-rule-sm { width:56px !important; height:2px !important; background:var(--btd-text) !important; }
#btd-app .btd-title { font-family:var(--btd-font-head) !important; font-size:clamp(1.9rem,5vw,2.5rem) !important; font-weight:700 !important; color:var(--btd-text) !important; }
#btd-app .btd-italic { font-family:var(--btd-font-head) !important; font-style:italic !important; color:var(--btd-muted) !important; font-size:.92rem !important; }
#btd-app .btd-sub { color:var(--btd-muted) !important; font-size:.92rem !important; max-width:310px !important; line-height:1.55 !important; }
#btd-app .btd-intro-body { max-width:400px !important; text-align:left !important; border-top:1px solid var(--btd-border) !important; border-bottom:1px solid var(--btd-border) !important; padding:1rem 0 !important; display:flex !important; flex-direction:column !important; gap:.75rem !important; }
#btd-app .btd-intro-body p { font-size:.9rem !important; color:var(--btd-muted) !important; line-height:1.65 !important; }
#btd-app .btd-intro-body strong { color:var(--btd-text) !important; font-weight:700 !important; }

/* Buttons */
#btd-app .btd-btn { display:inline-flex !important; align-items:center; justify-content:center; padding:.72rem 2rem; border-radius:99px; font-family:var(--btd-font-body); font-size:.9rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; border:none; transition:.18s ease; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#btd-app .btd-btn:active { transform:scale(.97) !important; }
#btd-app .btd-btn-primary { background:var(--btd-text); color:#fff; }
#btd-app .btd-btn-primary:hover { background:#333; color:#fff; }
#btd-app .btd-btn-secondary { background:transparent; border:2px solid var(--btd-text); color:var(--btd-text); }
#btd-app .btd-btn-secondary:hover { background:var(--btd-surface2); }

/* Hub */
#btd-app .btd-hub-header { padding:1rem 1.5rem .75rem !important; border-bottom:1px solid var(--btd-border) !important; }
#btd-app .btd-hub-top { display:flex !important; align-items:baseline !important; justify-content:space-between !important; margin-bottom:.7rem !important; }
#btd-app .btd-hub-title { font-family:var(--btd-font-head) !important; font-size:1rem !important; font-weight:700 !important; }
#btd-app .btd-hub-date { font-size:.75rem !important; color:var(--btd-muted) !important; font-style:italic !important; }
#btd-app .btd-prog-bar { height:3px !important; background:var(--btd-surface2) !important; margin-bottom:.6rem !important; overflow:hidden !important; }
#btd-app .btd-prog-fill { height:100% !important; background:var(--btd-text) !important; transition:width .5s ease !important; }
#btd-app .btd-hub-meta { display:flex !important; align-items:center !important; justify-content:space-between !important; font-size:.78rem !important; color:var(--btd-muted) !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.05em !important; }
#btd-app .btd-scores-btn { background:var(--btd-text) !important; border:2px solid var(--btd-text) !important; border-radius:99px !important; color:#fff !important; font-family:var(--btd-font-body) !important; font-size:.8rem !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.05em !important; padding:.35rem .85rem !important; cursor:pointer !important; transition:.18s ease !important; min-height:36px !important; white-space:nowrap !important; }

/* Cards */
#btd-app .btd-cards { display:grid !important; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important; border-top:1px solid var(--btd-border) !important; }
#btd-app .btd-card { background:var(--btd-bg) !important; border-bottom:1px solid var(--btd-border) !important; border-right:1px solid var(--btd-border) !important; padding:1.1rem 1.3rem !important; cursor:pointer !important; transition:background .18s !important; position:relative !important; min-height:44px !important; }
#btd-app .btd-card:hover { background:var(--btd-surface) !important; }
#btd-app .btd-card.btd-done { background:var(--btd-surface) !important; cursor:default !important; }
#btd-app .btd-card-emoji { font-size:1.35rem !important; display:block !important; margin-bottom:.45rem !important; }
#btd-app .btd-card-title { font-family:var(--btd-font-head) !important; font-size:.92rem !important; font-weight:700 !important; margin-bottom:.22rem !important; }
#btd-app .btd-card-desc { font-size:.8rem !important; color:var(--btd-muted) !important; line-height:1.5 !important; margin-bottom:.6rem !important; }
#btd-app .btd-card-status { display:inline-flex !important; align-items:center !important; font-size:.75rem !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.05em !important; color:var(--btd-text) !important; }
#btd-app .btd-card-status.btd-ok { color:var(--btd-green) !important; }
#btd-app .btd-card-badge { font-family:var(--btd-font-mono) !important; font-size:.72rem !important; background:var(--btd-green) !important; color:#fff !important; border-radius:2px !important; padding:.12rem .4rem !important; float:right !important; font-weight:700 !important; }

/* Back */
#btd-app .btd-back { display:inline-flex; align-items:center; gap:.4rem; background:none; border:none; border-bottom:1px solid var(--btd-border); color:var(--btd-muted); font-family:var(--btd-font-body); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.85rem 1.5rem .6rem; cursor:pointer; width:100%; min-height:44px; transition:color .18s; }
#btd-app .btd-back:hover { color:var(--btd-text); }

/* Game common */
#btd-mount { padding:0 1.5rem 2rem; }
#btd-app .btd-game-header { padding:.9rem 0 .7rem; border-bottom:1px solid var(--btd-border); margin-bottom:1.1rem; }
#btd-app .btd-game-title { font-family:var(--btd-font-head); font-size:1.15rem; font-weight:700; margin-bottom:.2rem; }
#btd-app .btd-game-inst { color:var(--btd-muted); font-size:.82rem; line-height:1.5; }
#btd-app .btd-score-disp { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--btd-muted); margin-bottom:.9rem; }
#btd-app .btd-score-disp span { color:var(--btd-text); }
#btd-app .btd-timer-bar { height:3px; background:var(--btd-surface2); margin:.55rem 0; overflow:hidden; }
#btd-app .btd-timer-fill { height:100%; background:var(--btd-text); }
#btd-app .btd-timer-fill.btd-urgent { background:var(--btd-red); }

/* Complete */
#btd-app .btd-complete { text-align:center; padding:2rem 1rem 1.5rem; animation:btdFade .3s ease; }
#btd-app .btd-complete h3 { font-family:var(--btd-font-head); font-size:1.2rem; font-weight:700; margin-bottom:.35rem; }
#btd-app .btd-big-score { font-family:var(--btd-font-mono); font-size:4.2rem; font-weight:700; color:var(--btd-text); line-height:1; margin:.35rem 0; }
#btd-app .btd-complete p { color:var(--btd-muted); margin-bottom:1.4rem; font-size:.88rem; }

/* Memory */
#btd-app .btd-memory-grid { display:grid !important; grid-template-columns:repeat(4,1fr); gap:.45rem; max-width:340px; margin:0 auto 1.4rem; }
#btd-app .btd-mc { aspect-ratio:1; perspective:600px; cursor:pointer; }
#btd-app .btd-mc-inner { width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform .32s; border-radius:3px; }
#btd-app .btd-mc.flipped .btd-mc-inner { transform:rotateY(180deg); }
#btd-app .btd-mc-front,#btd-app .btd-mc-back { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:3px; backface-visibility:hidden; }
#btd-app .btd-mc-front { background:var(--btd-text); color:#fff; font-family:var(--btd-font-head); font-weight:700; font-size:1.2rem; }
#btd-app .btd-mc-back { background:var(--btd-surface); border:2px solid var(--btd-text); transform:rotateY(180deg); font-size:1.4rem; }
#btd-app .btd-mc.matched .btd-mc-back { border-color:var(--btd-green); background:#edf7ed; }

/* Stroop */
#btd-app .btd-stroop-word { font-family:var(--btd-font-head); font-size:clamp(2.2rem,8vw,3.6rem); font-weight:700; letter-spacing:.04em; margin:.7rem 0 1.5rem; text-align:center; }
#btd-app .btd-stroop-opts { display:flex !important; gap:.55rem; flex-wrap:wrap; justify-content:center; }
#btd-app .btd-stroop-btn { padding:.58rem 1.25rem; border-radius:99px; border:2px solid transparent; font-family:var(--btd-font-body); font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; color:#fff; -webkit-tap-highlight-color:transparent; touch-action:manipulation; min-height:44px; }

/* Math */
#btd-app .btd-math-problem { font-family:var(--btd-font-head); font-size:clamp(1.9rem,7vw,3rem); font-weight:700; margin:.7rem 0 1.4rem; text-align:center; }
#btd-app .btd-math-opts { display:grid !important; grid-template-columns:1fr 1fr; gap:.55rem; max-width:280px; margin:0 auto; }
#btd-app .btd-math-btn { padding:.9rem; background:var(--btd-bg); border:2px solid var(--btd-text); border-radius:3px; color:var(--btd-text); font-family:var(--btd-font-mono); font-size:1.2rem; font-weight:700; cursor:pointer; min-height:56px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none; transition:background .15s,color .15s,border-color .15s; }
@media(hover:hover){ #btd-app .btd-math-btn:hover { background:var(--btd-text); color:#fff; } }
#btd-app .btd-math-btn:disabled { pointer-events:none; }
#btd-app .btd-math-btn.correct { background:var(--btd-green); border-color:var(--btd-green); color:#fff; }
#btd-app .btd-math-btn.wrong { background:var(--btd-red); border-color:var(--btd-red); color:#fff; }

/* Word Scramble */
#btd-app .btd-scrambled { font-family:var(--btd-font-mono); font-size:clamp(1.7rem,6vw,2.6rem); font-weight:700; letter-spacing:.28em; color:var(--btd-text); margin:.7rem 0 .35rem; text-transform:uppercase; text-align:center; }
#btd-app .btd-word-input { flex:1; background:var(--btd-bg); border:2px solid var(--btd-text); border-radius:3px; color:var(--btd-text); font-family:var(--btd-font-mono); font-weight:700; padding:.6rem .9rem; outline:none; text-transform:uppercase; letter-spacing:.1em; }
#btd-app .btd-word-input:focus { box-shadow:0 0 0 3px rgba(18,18,18,.1); }
#btd-app .btd-word-submit { background:var(--btd-text); border:none; border-radius:3px; color:#fff; font-weight:700; padding:.6rem .95rem; cursor:pointer; font-size:16px; min-height:44px; -webkit-tap-highlight-color:transparent; }
#btd-app .btd-word-list { list-style:none; display:flex !important; flex-wrap:wrap; gap:.35rem; justify-content:center; margin-top:.55rem; }
#btd-app .btd-word-list li { background:var(--btd-green); border-radius:3px; color:#fff; font-family:var(--btd-font-mono); font-size:.75rem; font-weight:700; padding:.2rem .55rem; letter-spacing:.07em; text-transform:uppercase; }

/* Reaction */
#btd-app .btd-react-zone { width:100%; max-width:420px; height:210px; margin:0 auto 1rem; border-radius:6px; background:var(--btd-surface); border:2px solid var(--btd-border-dk); display:flex !important; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; transition:background .2s,border-color .2s; user-select:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; outline:none; }
#btd-app .btd-react-zone.ready { background:#edf7ed; border-color:var(--btd-green); }
#btd-app .btd-react-zone.too-soon { background:#fdecea; border-color:var(--btd-red); }
#btd-app .btd-react-target { position:absolute; width:52px; height:52px; border-radius:50%; background:var(--btd-green); box-shadow:0 0 0 6px rgba(106,170,100,.22); display:none; animation:btdPop .16s ease; }
@keyframes btdPop { from{transform:scale(0)} to{transform:scale(1)} }
#btd-app .btd-react-msg { font-family:var(--btd-font-body); font-size:.88rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--btd-muted); pointer-events:none; }
#btd-app .btd-react-times { display:flex !important; gap:.4rem; flex-wrap:wrap; justify-content:center; margin-top:.45rem; }
#btd-app .btd-react-times span { background:var(--btd-surface2); border:1px solid var(--btd-border); border-radius:3px; font-family:var(--btd-font-mono); font-size:.73rem; font-weight:700; padding:.16rem .48rem; color:var(--btd-muted); }
#btd-app .btd-react-times span.best { border-color:var(--btd-green); color:var(--btd-green); background:#edf7ed; }

/* Results */
#btd-app .btd-results-inner { max-width:480px !important; margin:0 auto !important; padding:2rem 1.75rem 3rem !important; text-align:center !important; }
#btd-app .btd-ring-label { font-family:var(--btd-font-head) !important; font-size:.78rem !important; font-style:italic !important; color:var(--btd-muted) !important; margin-bottom:1rem !important; }
#btd-app #btd-score-label { font-family:var(--btd-font-head) !important; font-size:1.4rem !important; font-weight:700 !important; margin-bottom:.3rem !important; display:block !important; }
#btd-app #btd-score-desc { color:var(--btd-muted) !important; font-size:.9rem !important; line-height:1.55 !important; max-width:320px !important; margin:0 auto 1.25rem !important; display:block !important; }
#btd-app .btd-divider { height:1px !important; background:var(--btd-border) !important; margin:1.1rem 0 !important; }
#btd-app .btd-breakdown-title { font-size:.73rem !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.08em !important; color:var(--btd-muted) !important; margin-bottom:.65rem !important; text-align:left !important; }
#btd-app .btd-break-row { display:flex !important; align-items:center !important; gap:.65rem !important; padding:.5rem 0 !important; border-bottom:1px solid var(--btd-border) !important; }
#btd-app .btd-break-row:last-child { border-bottom:none !important; }
#btd-app .btd-break-emoji { font-size:1.05rem !important; flex-shrink:0 !important; }
#btd-app .btd-break-name { flex:1 !important; font-size:.86rem !important; font-weight:600 !important; text-align:left !important; }
#btd-app .btd-break-bar-wrap { width:88px !important; height:4px !important; background:var(--btd-surface2) !important; overflow:hidden !important; }
#btd-app .btd-break-bar { height:100% !important; background:var(--btd-text) !important; transition:width .8s ease !important; }
#btd-app .btd-break-pct { font-family:var(--btd-font-mono) !important; font-size:.8rem !important; font-weight:700 !important; width:36px !important; text-align:right !important; }

/* Initials */
#btd-app .btd-initials-label { font-size:.83rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--btd-muted); margin-bottom:.85rem; text-align:center; }
#btd-app .btd-initials-row { display:flex !important; gap:.6rem; justify-content:center; }
#btd-app .btd-initial { width:56px; height:64px; border:2px solid var(--btd-text); border-radius:3px; background:var(--btd-bg); font-family:var(--btd-font-mono); text-align:center; text-transform:uppercase; color:var(--btd-text); outline:none; font-size:16px; line-height:64px; padding:0; -webkit-tap-highlight-color:transparent; transition:border-color .15s; }
#btd-app .btd-initial:focus { box-shadow:0 0 0 3px rgba(18,18,18,.1); }

/* Leaderboard */
#btd-app .btd-lb-title { font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--btd-muted); margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem; }
#btd-app .btd-lb-title::after { content:''; flex:1; height:1px; background:var(--btd-border); }
#btd-app .btd-lb-row { display:flex !important; align-items:center; gap:.65rem; padding:.48rem 0; border-bottom:1px solid var(--btd-border); }
#btd-app .btd-lb-row:last-child { border-bottom:none; }
#btd-app .btd-lb-row.btd-lb-me { background:#fffbe6; margin:0 -.4rem; padding:.48rem .4rem; border-radius:3px; }
#btd-app .btd-lb-rank { font-size:.95rem; flex-shrink:0; width:1.6rem; text-align:center; }
#btd-app .btd-lb-name { flex:1; font-size:.86rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#btd-app .btd-lb-score { font-family:var(--btd-font-mono); font-size:.85rem; font-weight:700; background:var(--btd-surface2); border:1px solid var(--btd-border); border-radius:4px; padding:.12rem .45rem; }

/* Mobile */
@media(max-width:480px){
  #btd-app { border-left:none; border-right:none; }
  #btd-app .btd-cards { grid-template-columns:1fr !important; }
  #btd-mount { padding:0 .85rem 1.5rem; }
  #btd-app .btd-back { padding:.75rem 1rem; }
  #btd-app .btd-memory-grid { gap:.3rem; max-width:100%; }
  #btd-app .btd-math-opts { max-width:100% !important; }
  #btd-app .btd-results-inner { padding:1.25rem 1rem 2rem; }
  #btd-app .btd-ring-wrap { width:150px; height:150px; }
  #btd-app .btd-ring-center span { font-size:2.4rem; }
  #btd-app .btd-welcome-inner { padding:2rem 1.25rem 2.5rem; }
}