@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800;900&family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap');

#tfl-mq-app{
  --rt-bg:          linear-gradient(180deg, #fffdf6 0%, #f8f4e8 100%);
  --rt-surface:     rgba(255,255,255,.84);
  --rt-surface-soft:#fffaf0;
  --rt-border:      rgba(120,98,47,.14);
  --rt-border-strong: rgba(120,98,47,.24);
  --rt-text:        #231b10;
  --rt-heading:     #17110a;
  --rt-muted:       #726247;
  --rt-accent:      #c78918;
  --rt-accent-dark: #9e6507;
  --rt-accent-glow: rgba(199,137,24,.22);
  --rt-accent2:     #ef4444;
  --rt-green:       #177a4d;
  --rt-green-bg:    rgba(23,122,77,.1);
  --rt-green-border:rgba(23,122,77,.24);
  --rt-font-disp:   'Syne', sans-serif;
  --rt-font-mono:   'Space Mono', monospace;
  --rt-font-body:   'DM Sans', -apple-system, sans-serif;
  --rt-radius:      14px;
  --rt-radius-lg:   22px;
  --rt-shadow:      0 10px 30px rgba(63,41,11,.08);
  --rt-shadow-lg:   0 22px 52px rgba(63,41,11,.12);
  --rt-transition:  0.18s ease;

  font-family:   var(--rt-font-body);
  max-width:     720px;
  margin:        0 auto;
  background:    var(--rt-bg);
  border-radius: var(--rt-radius);
  box-shadow:    var(--rt-shadow);
  overflow:      hidden;
  color:         var(--rt-text);
  -webkit-tap-highlight-color: transparent;
}

/* Make the WP theme wrappers transparent so the “app” can go edge-to-edge on mobile */
body:has(#tfl-mq-app) .site,
body:has(#tfl-mq-app) .entry-content,
body:has(#tfl-mq-app) .hentry,
body:has(#tfl-mq-app) main,
body:has(#tfl-mq-app) article,
body:has(#tfl-mq-app) #content,
body:has(#tfl-mq-app) #primary{
  background: transparent !important;
  padding:    0 !important;
  margin:     0 !important;
  max-width:  none !important;
  width:      100% !important;
  box-shadow: none !important;
}

#tfl-mq-app.tfl-mq{ display:block; padding:0; }
#tfl-mq-app .tfl-mq-card{
  background: var(--rt-bg);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 28px;
  box-shadow: var(--rt-shadow-lg);
  overflow: visible;
  backdrop-filter: blur(12px);
}

/* Header — required structure */
.tfl-header{
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  flex-wrap:       wrap;
  padding:         18px 20px 10px;
  background:      transparent;
  border-bottom:   0;
}

.tfl-header__brand{ display:flex; flex-direction:column; }
.tfl-header__title{ display:flex; align-items:center; gap:9px; }

.tfl-logo-mark{
  width:38px; height:38px;
  border-radius:999px;
  background: rgba(199,137,24,.14);
  color: var(--rt-accent-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
  font-family: var(--rt-font-disp);
  font-weight:900;
  flex-shrink:0;
}

.tfl-header h1{
  font-family: var(--rt-font-disp);
  font-size: 22px;
  font-weight: 900;
  color: var(--rt-heading);
  line-height: 1;
  letter-spacing: -.04em;
  margin:0;
}

.tfl-header__sub{
  font-family: var(--rt-font-mono);
  font-size: 9px;
  color: var(--rt-muted);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding-left: 47px;
  margin-top: 6px;
}

/* Gamification */
.tfl-header__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
}

.tfl-level-badge{
  display:flex;
  align-items:baseline;
  gap:3px;
  background: rgba(255,255,255,.66);
  border: 1px solid var(--rt-border);
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
}

.tfl-level-badge__label{
  font-family: var(--rt-font-mono);
  font-size: 9px;
  color: var(--rt-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.tfl-level-badge__num{
  font-family: var(--rt-font-disp);
  font-size: 22px;
  font-weight: 900;
  color: var(--rt-text);
  line-height: 1;
}

.tfl-xp-wrap{ display:flex; align-items:center; gap:6px; }
.tfl-xp-bar{
  width:84px;
  height:5px;
  background: var(--rt-border);
  border-radius:2px;
  overflow:hidden;
}
.tfl-xp-bar__fill{
  height:100%;
  background: var(--rt-accent);
  border-radius:2px;
  width:0%;
  transition: width .5s ease;
}
.tfl-xp-text{
  font-family: var(--rt-font-mono);
  font-size: 10px;
  color: var(--rt-muted);
  min-width: 44px;
  text-align: right;
}

.tfl-mq-header{ background: transparent; }
.tfl-mq-subtitle{
  font-size: 13px;
  color: var(--rt-muted);
  line-height: 1.6;
  padding: 0 20px 12px;
  margin-top: -4px;
}
@media (max-width: 480px){
  .tfl-mq-subtitle{ padding: 0 14px 10px; }
}

/* Suite polish */
#tfl-mq-app{
  --rt-radius: 18px;
  --rt-radius-lg: 24px;
  --rt-shadow: 0 16px 34px rgba(63,41,11,.08);
  --rt-shadow-lg: 0 28px 58px rgba(63,41,11,.12);
}

.tfl-header h1{
  font-size: 24px;
  letter-spacing: -.05em;
}

.tfl-mq-subtitle{
  max-width: 56ch;
  font-size: 14px;
}

#tfl-mq-app .tfl-mq-player,
#tfl-mq-app .tfl-mq-quiz{
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(250,244,234,.96));
}

#tfl-mq-app .tfl-mq-choice{
  border-radius: 20px;
  min-height: 52px;
}

#tfl-mq-app .tfl-mq-result{
  border-radius: 18px;
  line-height: 1.6;
}

/* Sections */
#tfl-mq-app .tfl-mq-player,
#tfl-mq-app .tfl-mq-quiz{
  background: var(--rt-surface);
  border: 1px solid var(--rt-border);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-shadow);
  margin: 14px 16px;
  padding: 16px 18px;
  backdrop-filter: blur(10px);
}

#tfl-mq-app .tfl-mq-player{ margin-top: 16px; }
#tfl-mq-app .tfl-mq-quiz{ margin-bottom: 16px; }

#tfl-mq-app .tfl-mq-listen-stage{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 8px 0 18px;
}

#tfl-mq-app .tfl-mq-play{
  width: 136px;
  height: 136px;
  border: 2px solid rgba(166,108,8,.55);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rt-accent) 0%, #dfab43 100%);
  color: #fffaf0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 16px 28px var(--rt-accent-glow), 0 0 0 12px rgba(199,137,24,.12);
  transition: background var(--rt-transition), box-shadow var(--rt-transition), transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}

#tfl-mq-app .tfl-mq-play:hover{
  background: linear-gradient(135deg, #b97709 0%, #d99b28 100%);
  box-shadow: 0 20px 34px rgba(199,137,24,.28), 0 0 0 16px rgba(199,137,24,.14);
  transform: translateY(-1px) scale(1.02);
}

#tfl-mq-app .tfl-mq-play:active{ transform: scale(.96); }
#tfl-mq-app .tfl-mq-play:focus-visible{ outline: 4px solid rgba(199,137,24,.36); outline-offset: 5px; }
#tfl-mq-app .tfl-mq-play:disabled{ opacity:.48; cursor:not-allowed; transform:none; }

#tfl-mq-app .tfl-mq-play__icon{
  width:0;
  height:0;
  border-top: 28px solid transparent;
  border-bottom: 28px solid transparent;
  border-left: 42px solid currentColor;
  margin-left: 10px;
}

#tfl-mq-app .tfl-mq-play.is-playing .tfl-mq-play__icon{
  width:42px;
  height:52px;
  border:0;
  margin-left:0;
  display:flex;
  justify-content:space-between;
}

#tfl-mq-app .tfl-mq-play.is-playing .tfl-mq-play__icon::before,
#tfl-mq-app .tfl-mq-play.is-playing .tfl-mq-play__icon::after{
  content:"";
  width:14px;
  height:52px;
  border-radius:2px;
  background: currentColor;
}

#tfl-mq-app .tfl-mq-sr{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

#tfl-mq-app .tfl-mq-audio{
  width:100%;
  opacity:.9;
}

/* Labels / meta */
#tfl-mq-app .tfl-mq-label,
#tfl-mq-app .tfl-mq-track-label{
  font-family: var(--rt-font-mono);
  font-size: 11px;
  color: var(--rt-muted);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 700;
}

#tfl-mq-app .tfl-mq-row{
  display: grid;
  gap: 8px;
}

#tfl-mq-app .tfl-mq-row + .tfl-mq-row{
  margin-top: 18px;
}

#tfl-mq-app .tfl-mq-meta{ margin-top: 10px; font-size: 13px; color: var(--rt-muted); }
#tfl-mq-app .tfl-mq-track-id{ font-family: var(--rt-font-mono); color: var(--rt-text); font-weight:700; }

/* Form controls */
#tfl-mq-app .tfl-mq-select{
  width:100%;
  padding: 14px 14px;
  border: 1px solid var(--rt-border);
  border-radius: 14px;
  font-size: 16px;
  line-height: 1.3;
  background: rgba(255,255,255,.82);
  min-height: 52px;
  font-family: var(--rt-font-body);
  color: var(--rt-text);
  transition: border-color var(--rt-transition), background var(--rt-transition), box-shadow var(--rt-transition);
}
#tfl-mq-app .tfl-mq-select:focus{
  outline: none;
  border-color: rgba(176,116,17,.48);
  box-shadow: 0 0 0 4px rgba(199,137,24,.16);
}

/* Choices grid */
#tfl-mq-app .tfl-mq-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#tfl-mq-app .tfl-mq-choice{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid var(--rt-border);
  background: rgba(255,255,255,.72);
  text-align:left;
  font-size: 15px;
  line-height: 1.3;
  min-height: 48px;
  font-family: var(--rt-font-body);
  font-weight: 700;
  color: var(--rt-text);
  cursor:pointer;
  transition: background var(--rt-transition), border-color var(--rt-transition), transform .1s, box-shadow var(--rt-transition), color var(--rt-transition);
}
#tfl-mq-app .tfl-mq-choice:hover{
  border-color: var(--rt-accent);
  background: rgba(199,137,24,.14);
  color: var(--rt-accent-dark);
}
#tfl-mq-app .tfl-mq-choice:active{ transform: scale(.99); }

#tfl-mq-app .tfl-mq-choice.is-selected{
  border-color: var(--rt-accent);
  background: rgba(199,137,24,.16);
  color: var(--rt-accent-dark);
  outline: none;
}

#tfl-mq-app .tfl-mq-choice.is-dimmed-choice{
  opacity: 0.42;
  filter: grayscale(0.18);
  background: rgba(255,255,255,.5);
}

/* Buttons */
#tfl-mq-app .tfl-mq-actions{
  display:flex;
  gap:10px;
  margin-top: 16px;
  flex-wrap:wrap;
}

#tfl-mq-app .tfl-mq-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:56px;
  padding: 0 24px;
  border:1px solid rgba(166,108,8,.4);
  border-radius:999px;
  background: linear-gradient(135deg, var(--rt-accent) 0%, #dfab43 100%);
  color: #fffaf0;
  font-family: var(--rt-font-disp);
  font-size: 20px;
  font-weight: 900;
  cursor:pointer;
  transition: background var(--rt-transition), transform .1s;
  box-shadow: 0 10px 20px var(--rt-accent-glow);
  -webkit-tap-highlight-color: transparent;
}
#tfl-mq-app .tfl-mq-btn:hover{ background: linear-gradient(135deg, #b97709 0%, #d99b28 100%); }
#tfl-mq-app .tfl-mq-btn:active{ transform: scale(.97); }
#tfl-mq-app .tfl-mq-btn:focus-visible{ outline: 3px solid var(--rt-accent); outline-offset: 2px; }
#tfl-mq-app .tfl-mq-btn:disabled{ opacity:.5; cursor:not-allowed; }

#tfl-mq-app .tfl-mq-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height: 46px;
  padding: 10px 18px;
  border: 1px solid rgba(199,137,24,.25);
  border-radius: 999px;
  background: rgba(255,250,240,.86);
  color: var(--rt-text);
  font-family: var(--rt-font-body);
  font-size: 14px;
  font-weight: 700;
  cursor:pointer;
  transition: all var(--rt-transition);
  box-shadow:none;
}
#tfl-mq-app .tfl-mq-btn-secondary:hover{ border-color: rgba(199,137,24,.4); background: rgba(255,247,230,.96); color: var(--rt-accent-dark); }

#tfl-mq-app .tfl-mq-player-actions{ display:flex; gap:10px; margin-top: 12px; }
#tfl-mq-app .tfl-mq-player-actions .tfl-mq-btn-secondary{ width:auto; }

/* Result panel */
#tfl-mq-app .tfl-mq-result{
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--rt-border);
  font-weight: 700;
  font-size: 14px;
  display:none;
}
#tfl-mq-app .tfl-mq-result.is-show{ display:block; }
#tfl-mq-app .tfl-mq-result[data-good="1"]{
  background: var(--rt-green-bg);
  color: var(--rt-green);
  border-color: var(--rt-green-border);
}

/* Result rows */
#tfl-mq-app .tfl-mq-rhead{ font-size:14px; margin-bottom:14px; font-weight:800; font-family: var(--rt-font-body); }
#tfl-mq-app .tfl-mq-rrow{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding: 12px 0; border-top: 1px solid rgba(226,232,240,.8); }
#tfl-mq-app .tfl-mq-rrow:first-of-type{ border-top:0; }
#tfl-mq-app .tfl-mq-rlabel{ font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-muted); letter-spacing:1.1px; text-transform: uppercase; min-width: 132px; }
#tfl-mq-app .tfl-mq-rval{ font-size: 13px; color: var(--rt-text); text-align:right; }
#tfl-mq-app .tfl-mq-rval .sep{ color: var(--rt-muted); margin: 0 6px; }
#tfl-mq-app .tfl-mq-rrow.ok .a{ font-weight:900; }
#tfl-mq-app .tfl-mq-rrow.bad .u{ font-weight:900; }
#tfl-mq-app .tfl-mq-rrow.miss .u{ color: rgba(100,116,139,.55); }

/* Responsive */
@media (max-width: 480px){
  #tfl-mq-app{ border-radius:0; box-shadow:none; max-width:none; }
  .tfl-header{ padding: 12px 14px 10px; }
  .tfl-header h1{ font-size: 17px; }
  .tfl-header__meta{ width: 100%; align-items: flex-start; }
  #tfl-mq-app .tfl-mq-player,
  #tfl-mq-app .tfl-mq-quiz{ margin: 12px 10px; padding: 14px 14px; border-radius: 12px; }
  #tfl-mq-app .tfl-mq-listen-stage{ padding: 4px 0 14px; }
  #tfl-mq-app .tfl-mq-play{ width: 124px; height: 124px; }
  #tfl-mq-app .tfl-mq-play__icon{
    border-top-width: 25px;
    border-bottom-width: 25px;
    border-left-width: 38px;
  }
  #tfl-mq-app .tfl-mq-grid{ grid-template-columns: 1fr; }
  #tfl-mq-app .tfl-mq-actions{ flex-direction: column; }
  #tfl-mq-app .tfl-mq-player-actions{ flex-direction: column; }
  #tfl-mq-app .tfl-mq-player-actions .tfl-mq-btn-secondary{ width: 100%; }
  #tfl-mq-app .tfl-mq-btn{ min-height: 52px; font-size: 18px; }
  #tfl-mq-app .tfl-mq-rrow{ flex-direction: column; gap: 6px; }
  #tfl-mq-app .tfl-mq-rlabel{ min-width: 0; }
  #tfl-mq-app .tfl-mq-rval{ text-align: left; }
}