/* TypeFlow v6.6.24 — unified typing controls, fullscreen layouts and tier emblems */

/* ========================= RANK / TIER EMBLEM ========================= */
.tier-emblem{
  --tier-a:#aeb7c8;
  --tier-b:#697386;
  position:relative;
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:13px;
  border:1px solid color-mix(in srgb,var(--tier-a) 48%,var(--line));
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.24),transparent 28%),
    linear-gradient(145deg,color-mix(in srgb,var(--tier-a) 24%,var(--surface)),color-mix(in srgb,var(--tier-b) 16%,var(--surface-2)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 20px color-mix(in srgb,var(--tier-b) 13%,transparent);
}
.tier-emblem--lg{width:52px;height:52px;flex-basis:52px;border-radius:15px}
.tier-emblem--sm{width:24px;height:24px;flex-basis:24px;border-radius:7px}
.tier-emblem>i,
.tier-emblem>b,
.tier-emblem>em{position:absolute;display:block;margin:0;font:inherit}
.tier-emblem>i{
  width:44%;height:44%;
  border:2px solid color-mix(in srgb,var(--tier-a) 84%,#fff);
  border-radius:7px 11px 7px 11px;
  transform:rotate(45deg);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tier-b) 9%,transparent);
}
.tier-emblem>b{
  width:18%;height:18%;
  border-radius:50%;
  background:color-mix(in srgb,var(--tier-a) 82%,#fff);
  box-shadow:0 0 12px color-mix(in srgb,var(--tier-a) 35%,transparent);
}
.tier-emblem>em{
  width:42%;height:2px;
  border-radius:99px;
  background:color-mix(in srgb,var(--tier-a) 68%,#fff);
  transform:rotate(-45deg);
  opacity:.54;
}
.tier-emblem--sm>i{border-width:1px;border-radius:4px 6px 4px 6px}
.tier-emblem--sm>em{height:1px}
.tier-bronze{--tier-a:#c88762;--tier-b:#8a5039}
.tier-silver{--tier-a:#bdc7d6;--tier-b:#68758d}
.tier-gold{--tier-a:#e6ba42;--tier-b:#a66f09}
.tier-platinum{--tier-a:#85c6c7;--tier-b:#477d91}
.tier-diamond{--tier-a:#73a8ff;--tier-b:#6657db}
.tier-master{--tier-a:#9b72ff;--tier-b:#7842bc}
.tier-grandmaster{--tier-a:#e76fc1;--tier-b:#8d4bd1}
.duel-season-mini-status>span:not(.tier-emblem){color:var(--text);font-size:9px;font-weight:800}
.ranked-your-tier .tier-emblem,.season-rank-hero .tier-emblem{align-self:center}

/* ========================= SHARED TOOL BUTTONS ========================= */
.typing-mode-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.typing-mode-time{display:grid;justify-items:end;gap:2px}
.typing-mode-time small{color:var(--muted);font-size:9px}
.typing-mode-time strong{font-variant-numeric:tabular-nums}
.typing-mode-tools{display:flex;align-items:center;gap:6px}
.typing-mode-tool{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
  color:var(--muted);
  font-size:14px;
  cursor:pointer;
  transition:.15s border-color,.15s color,.15s background,.15s transform;
}
.typing-mode-tool:hover,.typing-mode-tool.active{
  border-color:color-mix(in srgb,var(--primary) 52%,var(--line));
  color:var(--primary);
  background:var(--primary-soft);
}
.typing-mode-tool:active{transform:scale(.96)}

/* ========================= MAIN TEST — FONT SIZE REALLY WORKS ========================= */
.typing-tool-page .tf-main-typing-stage .word-stream{
  font-size:var(--typing-size,26px) !important;
  line-height:1.58 !important;
}
.typing-tool-page .tf-main-typing-stage .word-viewport{
  height:var(--typing-viewport-height,182px) !important;
  min-height:var(--typing-viewport-height,182px) !important;
  max-height:var(--typing-viewport-height,182px) !important;
}

/* ========================= PRACTICE / CHALLENGE SETTINGS =========================
   v6.6.42: no separate typing-surface rules.
   Practice + Daily Challenge now use the Main Test classes directly.
   ================================================================================ */

/* ========================= MAIN TEST FULLSCREEN ========================= */
#typing-panel:fullscreen{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  padding:clamp(22px,3.5vh,48px) clamp(22px,5vw,88px) !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:auto !important;
  background:var(--bg) !important;
  box-sizing:border-box !important;
}
#typing-panel:fullscreen > .test-config-row,
#typing-panel:fullscreen > .typing-language-control,
#typing-panel:fullscreen > .premium-content-tabs,
#typing-panel:fullscreen > .custom-text-box,
#typing-panel:fullscreen > .tf-main-typing-stage,
#typing-panel:fullscreen > .premium-metrics,
#typing-panel:fullscreen > .premium-actions,
#typing-panel:fullscreen > .test-status{
  width:min(1480px,100%) !important;
  max-width:1480px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
#typing-panel:fullscreen > .test-config-row{margin-top:0!important}
#typing-panel:fullscreen .typing-language-control{position:relative!important}
#typing-panel:fullscreen .workspace-tools{right:14px!important}
#typing-panel:fullscreen .tf-main-typing-stage{margin-top:14px!important}
#typing-panel:fullscreen .premium-actions{padding-top:18px!important}
#typing-panel:fullscreen .word-stream{font-size:var(--typing-size,26px)!important}

/* ========================= PRACTICE / CHALLENGE FULLSCREEN ========================= */
.practice-arena:fullscreen,
.challenge-arena:fullscreen{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  padding:clamp(24px,5vh,58px) clamp(22px,6vw,100px) !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:auto !important;
  background:var(--bg) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}
.practice-arena:fullscreen > *,
.challenge-arena:fullscreen > *{
  width:min(1420px,100%) !important;
  max-width:1420px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
.practice-arena:fullscreen .practice-arena-head,
.challenge-arena:fullscreen .challenge-topline{margin-bottom:14px!important}
.practice-arena:fullscreen .challenge-word-viewport,
.challenge-arena:fullscreen .challenge-word-viewport{
  margin-top:0!important;
}
.practice-arena:fullscreen .challenge-input-wrap,
.challenge-arena:fullscreen .challenge-input-wrap{
  margin-top:12px!important;
}
.practice-arena:fullscreen .challenge-actions,
.challenge-arena:fullscreen .challenge-actions{
  padding-top:18px!important;
}

/* ========================= DUEL FULLSCREEN ========================= */
.duel-rule{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important}
.duel-rule .duel-fullscreen-toggle{margin-left:auto}
.duel-arena-actions .duel-fullscreen-toggle{margin-left:0}
#duel-page:fullscreen{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  margin:0 !important;
  padding:clamp(22px,4vh,54px) clamp(22px,5vw,90px) !important;
  overflow:auto !important;
  background:var(--bg) !important;
  box-sizing:border-box !important;
}
#duel-page:fullscreen > .duel-hero,
#duel-page:fullscreen > .duel-invite-strip,
#duel-page:fullscreen > .ranked-season-hub,
#duel-page:fullscreen > .duel-meta-panels{
  display:none !important;
}
#duel-page:fullscreen > .duel-lobby,
#duel-page:fullscreen > .duel-search,
#duel-page:fullscreen > .duel-arena,
#duel-page:fullscreen > .duel-result{
  width:min(1480px,100%) !important;
  max-width:1480px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
#duel-page:fullscreen > .duel-lobby,
#duel-page:fullscreen > .duel-search,
#duel-page:fullscreen > .duel-arena,
#duel-page:fullscreen > .duel-result{
  margin-top:clamp(8px,5vh,58px) !important;
}
#duel-page:fullscreen .duel-word-viewport{
  height:clamp(190px,30vh,320px) !important;
}

@media(max-width:760px){
  .typing-mode-head-actions{gap:7px}
  .typing-mode-tool{width:35px;height:35px}
  .practice-arena:fullscreen,.challenge-arena:fullscreen,#typing-panel:fullscreen,#duel-page:fullscreen{padding:16px 12px!important}
  #typing-panel:fullscreen .test-config-row{grid-template-columns:1fr!important}
  #duel-page:fullscreen .duel-versus{grid-template-columns:1fr 46px 1fr!important}
}

/* Practice config no longer reserves an empty third column for the moved gear button. */
.practice-config-row{
  grid-template-columns:minmax(300px,.9fr) minmax(430px,1.4fr) !important;
}
.duel-season-mini-status{
  grid-template-columns:24px minmax(0,1fr) auto auto !important;
}
@media(max-width:1050px){
  .practice-config-row{grid-template-columns:1fr !important}
  .practice-language-group{grid-column:auto!important;grid-row:auto!important}
}
@media(max-width:760px){
  .practice-config-row{grid-template-columns:1fr !important}
}