/* Keyzira v6.6.30 — brand + authoritative Practice/Challenge fullscreen */

/* Brand mark */
body:not(.admin-mode) .brand .keyzira-mark{
  width:31px !important;
  height:31px !important;
  min-width:31px !important;
  flex:0 0 31px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 !important;
  border-radius:9px !important;
  background:linear-gradient(145deg,var(--primary),#38b8e8) !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:-.02em !important;
  box-shadow:0 6px 16px color-mix(in srgb,var(--primary) 24%,transparent) !important;
  transform:none !important;
}
body:not(.admin-mode) .brand .keyzira-mark span{display:none!important}

/*
  There were multiple historical fullscreen rules using conflicting flex/grid,
  child max-widths and margins. This block is the single final authority.
*/
.practice-arena:fullscreen,
.challenge-arena:fullscreen{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:clamp(20px,3vh,32px) clamp(22px,4vw,56px) !important;
  border:0 !important;
  border-radius:0 !important;
  background:var(--bg) !important;
  overflow:auto !important;
  box-sizing:border-box !important;

  display:grid !important;
  grid-template-columns:minmax(0,min(1180px,calc(100vw - 44px))) !important;
  grid-auto-rows:max-content !important;
  justify-content:center !important;
  align-content:center !important;
  gap:0 !important;
}

.practice-arena:fullscreen > *,
.challenge-arena:fullscreen > *{
  grid-column:1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

.practice-arena:fullscreen > .tf-mode-config,
.challenge-arena:fullscreen > .tf-mode-config{
  margin:0 !important;
  border:1px solid var(--line) !important;
  border-radius:16px 16px 0 0 !important;
  overflow:visible !important;
  background:var(--surface) !important;
}

.practice-arena:fullscreen > .tf-session-head,
.challenge-arena:fullscreen > .tf-session-head{
  min-height:56px !important;
  margin:0 !important;
  padding:11px 16px !important;
  border-left:1px solid var(--line) !important;
  border-right:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
  background:var(--surface) !important;
}

/* Reading/input are intentionally inset by the same amount, exactly like one workspace. */
.practice-arena:fullscreen > #practice-word-viewport,
.challenge-arena:fullscreen > #challenge-word-viewport{
  width:calc(100% - 36px) !important;
  max-width:none !important;
  margin:16px 18px 0 !important;
}
.practice-arena:fullscreen > .tf-entry-card,
.challenge-arena:fullscreen > .tf-entry-card{
  width:calc(100% - 36px) !important;
  max-width:none !important;
  margin:11px 18px 0 !important;
}
.practice-arena:fullscreen > .tf-typing-stats,
.challenge-arena:fullscreen > .tf-typing-stats{
  width:calc(100% - 36px) !important;
  max-width:none !important;
  margin:12px 18px 0 !important;
}
.practice-arena:fullscreen > .challenge-actions,
.challenge-arena:fullscreen > .challenge-actions{
  width:calc(100% - 36px) !important;
  max-width:none !important;
  min-height:64px !important;
  margin:0 18px !important;
  padding:13px 0 0 !important;
}

.practice-arena:fullscreen .tf-config-primary-row,
.challenge-arena:fullscreen .tf-config-primary-row{
  padding-top:12px !important;
}
.practice-arena:fullscreen .tf-mode-language-control,
.challenge-arena:fullscreen .tf-mode-language-control{
  margin-bottom:10px !important;
}

/* On short screens, centering can clip the top. Switch to safe top alignment. */
@media (max-height:720px){
  .practice-arena:fullscreen,
  .challenge-arena:fullscreen{
    align-content:start !important;
    padding-top:18px !important;
    padding-bottom:18px !important;
  }
}
@media (max-width:760px){
  .practice-arena:fullscreen,
  .challenge-arena:fullscreen{
    grid-template-columns:minmax(0,calc(100vw - 24px)) !important;
    padding:12px !important;
  }
  .practice-arena:fullscreen > #practice-word-viewport,
  .challenge-arena:fullscreen > #challenge-word-viewport,
  .practice-arena:fullscreen > .tf-entry-card,
  .challenge-arena:fullscreen > .tf-entry-card,
  .practice-arena:fullscreen > .tf-typing-stats,
  .challenge-arena:fullscreen > .tf-typing-stats,
  .practice-arena:fullscreen > .challenge-actions{
    width:calc(100% - 24px) !important;
    margin-left:12px !important;
    margin-right:12px !important;
  }
}

/* v6.6.30.1 — duplicate Keyzira logo fix
   theme-redesign.css still creates a legacy keycap through .brand:before.
   Keyzira now renders its real mark in the HTML, so the pseudo-element must stay off. */
body:not(.admin-mode) .brand::before,
body:not(.admin-mode) .brand:before{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  margin:0!important;
}