/* TypeFlow v6.6.1
   Unified typing workspace:
   reading surface -> separated typing field -> stats/actions.
   IDs and JS behavior are unchanged.
*/

/* ---------- Shared visual language ---------- */
.tf-reading-card{
  position:relative;
  box-sizing:border-box;
  border:1px solid color-mix(in srgb,var(--line-strong) 84%,var(--line)) !important;
  border-radius:14px !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface) 98%,transparent),
      color-mix(in srgb,var(--surface-2) 90%,var(--surface))) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 8px 24px rgba(28,35,72,.035);
}

.tf-reading-card:focus-within,
.tf-reading-card:focus{
  border-color:color-mix(in srgb,var(--primary) 42%,var(--line)) !important;
}

.tf-entry-card{
  position:relative;
  box-sizing:border-box;
  border:1px solid color-mix(in srgb,var(--primary) 46%,var(--line)) !important;
  border-radius:12px !important;
  background:var(--surface) !important;
  box-shadow:
    0 8px 22px rgba(28,35,72,.045),
    inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}

.tf-entry-card:focus-within{
  border-color:var(--primary) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--primary) 11%,transparent),
    0 10px 26px color-mix(in srgb,var(--primary) 8%,transparent) !important;
}

/* ---------- Main typing test ---------- */
.typing-tool-page .tf-main-typing-stage{
  margin:11px 18px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  overflow:visible !important;
  box-shadow:none !important;
}

.typing-tool-page .tf-main-typing-stage .word-viewport{
  margin:0 !important;
  height:142px !important;
  padding:15px 16px !important;
  overflow:hidden;
}

.typing-tool-page .tf-main-typing-stage .word-stream{
  font-size:19px !important;
  line-height:1.62 !important;
  gap:5px 9px !important;
  font-weight:620 !important;
}

.typing-tool-page .tf-main-typing-stage .typing-entry-wrap{
  margin-top:12px !important;
  border-top-width:1px !important;
  overflow:hidden;
}

.typing-tool-page .tf-main-typing-stage .typing-entry-wrap:focus-within{
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--primary) 11%,transparent),
    0 10px 26px color-mix(in srgb,var(--primary) 8%,transparent) !important;
}

.typing-tool-page .tf-main-typing-stage .typing-input{
  height:50px !important;
  padding:0 92px 0 15px !important;
  font-size:14.5px !important;
  font-weight:560 !important;
}

.typing-tool-page .tf-main-typing-stage .space-tip{
  right:10px;
  padding:4px 7px;
  font-size:9.5px;
  background:var(--surface-2);
}

.typing-tool-page .premium-metrics{
  margin-top:14px !important;
  border-top:1px solid var(--line);
}

/* ---------- Daily Challenge + Personal Practice ---------- */
.challenge-arena,
.practice-arena{
  overflow:hidden;
}

.challenge-arena .tf-reading-card,
.practice-arena .tf-reading-card{
  width:auto !important;
  height:178px !important;
  margin:16px 20px 0 !important;
  padding:17px 18px !important;
  overflow:hidden;
}

.challenge-arena .challenge-word-stream,
.practice-arena .challenge-word-stream{
  font-size:20px !important;
  line-height:1.58 !important;
  gap:6px 10px !important;
  font-weight:650 !important;
}

.challenge-arena .tf-entry-card,
.practice-arena .tf-entry-card{
  margin:12px 20px 0 !important;
  overflow:hidden;
}

.challenge-arena .tf-entry-card input,
.practice-arena .tf-entry-card input{
  height:50px !important;
  padding:0 92px 0 15px !important;
  font-size:14.5px !important;
}

.challenge-arena .tf-entry-card span,
.practice-arena .tf-entry-card span{
  right:10px;
  font-size:9.5px;
  padding:4px 7px;
  background:var(--surface-2);
}

.challenge-arena .tf-typing-stats,
.practice-arena .tf-typing-stats{
  margin:14px 20px 0 !important;
  overflow:hidden;
  border:1px solid var(--line) !important;
  border-radius:12px;
  background:var(--surface-2);
}

.challenge-arena .tf-typing-stats>div,
.practice-arena .tf-typing-stats>div{
  min-height:62px !important;
  padding:10px 12px !important;
}

.challenge-arena .challenge-actions,
.practice-arena .challenge-actions{
  padding-top:14px !important;
}

/* ---------- 1v1 Duel ---------- */
.duel-arena .tf-reading-card{
  width:auto !important;
  height:174px !important;
  margin:16px 26px 0 !important;
  padding:17px 18px !important;
  overflow:hidden;
  border-top:1px solid color-mix(in srgb,var(--line-strong) 84%,var(--line)) !important;
}

.duel-arena .duel-word-stream{
  font-size:20px !important;
  line-height:1.58 !important;
  gap:6px 10px !important;
  font-weight:650 !important;
}

.duel-arena .tf-entry-card{
  margin:12px 26px 0 !important;
  overflow:hidden;
}

.duel-arena .tf-entry-card input{
  height:50px !important;
  padding:0 92px 0 15px !important;
  font-size:14.5px !important;
}

.duel-arena .tf-entry-card span{
  right:10px;
  padding:4px 7px;
  font-size:9.5px;
  background:var(--surface-2);
}

.duel-arena .tf-typing-stats{
  margin:14px 26px 0 !important;
  overflow:hidden;
  border:1px solid var(--line) !important;
  border-radius:12px;
  background:var(--surface-2);
}

.duel-arena .tf-typing-stats>div{
  min-height:62px !important;
}

.duel-arena .duel-arena-actions{
  padding-top:13px !important;
}

/* Active/current word stays clear without becoming visually noisy. */
.tf-reading-card .test-word.active,
.tf-reading-card .challenge-word.active,
.tf-reading-card .duel-word.active{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 30%,transparent);
}

/* ---------- Dark theme ---------- */
html[data-theme="dark"] .tf-reading-card{
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface) 93%,#111421),
      color-mix(in srgb,var(--surface-2) 88%,#0d1019)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 10px 26px rgba(0,0,0,.12);
}

html[data-theme="dark"] .tf-entry-card{
  background:color-mix(in srgb,var(--surface) 96%,#090b12) !important;
}

/* ---------- Laptop / narrower desktop ---------- */
@media (min-width:761px) and (max-width:1199px){
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:136px !important;
    padding:14px !important;
  }
  .typing-tool-page .tf-main-typing-stage .word-stream{
    font-size:18.5px !important;
  }

  .challenge-arena .tf-reading-card,
  .practice-arena .tf-reading-card{
    height:168px !important;
    margin-left:17px !important;
    margin-right:17px !important;
  }
  .challenge-arena .tf-entry-card,
  .practice-arena .tf-entry-card,
  .challenge-arena .tf-typing-stats,
  .practice-arena .tf-typing-stats{
    margin-left:17px !important;
    margin-right:17px !important;
  }

  .duel-arena .tf-reading-card{
    height:166px !important;
    margin-left:20px !important;
    margin-right:20px !important;
  }
  .duel-arena .tf-entry-card,
  .duel-arena .tf-typing-stats{
    margin-left:20px !important;
    margin-right:20px !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .typing-tool-page .tf-main-typing-stage{
    margin:9px 13px 0 !important;
  }
  .typing-tool-page .tf-main-typing-stage .word-viewport{
    height:150px !important;
    padding:13px !important;
    border-radius:12px !important;
  }
  .typing-tool-page .tf-main-typing-stage .word-stream{
    font-size:18px !important;
    line-height:1.56 !important;
    gap:5px 8px !important;
  }
  .typing-tool-page .tf-main-typing-stage .typing-entry-wrap{
    margin-top:9px !important;
  }
  .typing-tool-page .tf-main-typing-stage .typing-input{
    height:48px !important;
    font-size:14px !important;
  }

  .challenge-arena .tf-reading-card,
  .practice-arena .tf-reading-card{
    height:174px !important;
    margin:13px 13px 0 !important;
    padding:14px !important;
  }
  .challenge-arena .challenge-word-stream,
  .practice-arena .challenge-word-stream{
    font-size:18px !important;
    line-height:1.58 !important;
    gap:5px 8px !important;
  }
  .challenge-arena .tf-entry-card,
  .practice-arena .tf-entry-card{
    margin:9px 13px 0 !important;
  }
  .challenge-arena .tf-entry-card input,
  .practice-arena .tf-entry-card input{
    height:48px !important;
    font-size:14px !important;
  }
  .challenge-arena .tf-typing-stats,
  .practice-arena .tf-typing-stats{
    margin:11px 13px 0 !important;
  }

  .duel-arena .tf-reading-card{
    height:168px !important;
    margin:13px 13px 0 !important;
    padding:14px !important;
  }
  .duel-arena .duel-word-stream{
    font-size:18px !important;
    line-height:1.58 !important;
    gap:5px 8px !important;
  }
  .duel-arena .tf-entry-card{
    margin:9px 13px 0 !important;
  }
  .duel-arena .tf-entry-card input{
    height:48px !important;
    font-size:14px !important;
  }
  .duel-arena .tf-typing-stats{
    margin:11px 13px 0 !important;
  }
}

@media (max-width:430px){
  .tf-entry-card input{
    padding-right:72px !important;
  }
  .tf-entry-card>span,
  .space-tip{
    font-size:8.5px !important;
    padding:3px 5px !important;
  }
}