/* Solver Layout & Accessibility — Digital Laboratory Skin */

/* ------------------------------
   Design tokens (solver-scoped)
   ------------------------------ */
   :root {
    /* Bridge to global theme tokens (style.css + html[data-theme]) */
    --wwe-color-bg: var(--lab-bg, #0D0D0D);
    --wwe-color-surface: var(--lab-surface, #111111);
    --wwe-color-surface-2: var(--lab-surface-2, #141414);
    --wwe-color-border: var(--lab-border, #1f1f1f);
    --wwe-color-border-2: var(--lab-border-2, #2a2a2a);
  
    --wwe-color-text: var(--lab-text, #E0E0E0);
    --wwe-color-muted: var(--lab-muted, #b6b6b6);
    --wwe-color-dim: var(--lab-dim, #8a8a8a);
  
    --wwe-color-primary: var(--lab-accent, #00FF41);
    --wwe-color-error: var(--lab-warn, #B22222);
    --wwe-color-success: var(--lab-accent, #00a32a);
  
    /* Typography */
    --wwe-font-mono: "JetBrains Mono", "IBM Plex Mono", "Roboto Mono",
                     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                     "Liberation Mono", "Courier New", monospace;
    --wwe-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  
    /* Focus ring (keep visible + HCM-friendly) */
    --wwe-ring-focus: 2px solid var(--wwe-color-primary);
  
    /* Layout */
    --wwe-maxw: 820px;
  }
  
  /* ------------------------------
     Container
     ------------------------------ */
  .wwe-solver-container {
    max-width: var(--wwe-maxw);
    margin: 2rem auto;
    padding: 0 16px;
    font-family: var(--wwe-font-sans);
    color: var(--wwe-color-text);
  }

  .wwe-streak-panel {
    margin: 0 auto 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--wwe-color-border-2);
    background: var(--wwe-ui-primary-soft);
  }

  .wwe-breadcrumbs {
    margin-bottom: 0.55rem;
    font-size: 0.9rem;
    color: var(--wwe-color-dim);
  }

  .wwe-breadcrumbs a {
    color: var(--wwe-color-muted);
    text-decoration: none;
  }

  .wwe-breadcrumbs a:hover,
  .wwe-breadcrumbs a:focus {
    color: var(--wwe-color-primary);
  }

  .wwe-play-instructions {
    margin: 0 0 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--wwe-color-border-2);
    background: var(--wwe-ui-overlay-subtle);
  }

  .wwe-play-instructions h2 {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    font-family: var(--wwe-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }

  .wwe-play-instructions ol {
    margin: 0;
    padding-left: 1.2rem;
  }

  .wwe-play-instructions li {
    margin-bottom: 0.35rem;
  }

  /* Fixed layout contract for playable singles: wheel before game UI. */
  #wwe-wheel-section,
  #wwe-game-ui-section {
    display: block;
  }

  .wwe-streak-title {
    font-family: var(--wwe-font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--wwe-color-muted);
  }

  .wwe-streak-value {
    margin-top: 0.2rem;
    font-family: var(--wwe-font-mono);
    font-size: 1.2rem;
    color: var(--wwe-color-primary);
    font-weight: 800;
  }

  .wwe-streak-subtitle {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: var(--wwe-color-dim);
  }
  
  /* Optional: if you want the whole solver area on dark bg even if theme differs */
  .wwe-solver-container {
    background: transparent;
  }
  
  /* ------------------------------
     Status & Alerts (ARIA Live)
     ------------------------------ */
  .wwe-status-region {
    margin-bottom: 1rem;
    min-height: 1.5rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--wwe-color-border-2);
    background: var(--wwe-ui-overlay-subtle);
    font-weight: 700;
    font-family: var(--wwe-font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  /* High contrast, readable on dark */
  .wwe-status-region.error {
    background-color: var(--wwe-ui-error-soft);
    color: var(--wwe-ui-status-error-text);
    border-left: 4px solid var(--wwe-color-error);
  }
  
  .wwe-status-region.success {
    background-color: var(--wwe-ui-success-soft);
    color: var(--wwe-ui-status-success-text);
    border-left: 4px solid var(--wwe-color-success);
  }
  
  /* ------------------------------
     Wheel Input Section
     ------------------------------ */
  .wwe-wheel-form {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: var(--wwe-color-surface);
    border: 1px solid var(--wwe-color-border);
    border-radius: 0; /* institutional edges */
    box-shadow: none;
  }
  
  /* Scanline animation on interaction (no JS needed) */
  .wwe-wheel-form:focus-within::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12%;
    height: 18%;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      transparent,
      var(--wwe-ui-primary-mid),
      transparent
    );
    animation: wwe-scanline 900ms linear 1;
  }
  
  @keyframes wwe-scanline {
    from { transform: translateY(0); opacity: 0; }
    15% { opacity: 1; }
    to { transform: translateY(650%); opacity: 0; }
  }
  
  .wwe-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
  }
  
  /* 3x3 visual */
  .wwe-inputs-visual {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    width: 300px;
  }
  
  /* Inputs: terminal */
  .wwe-letter-input {
    width: 100%;
    aspect-ratio: 1;
    text-align: center;
    font-size: 1.6rem;
    text-transform: uppercase;
  
    border: 1px solid var(--wwe-color-border-2);
    border-radius: 0;
    background: var(--wwe-ui-wheel-bg);
    color: var(--wwe-color-text);
    font-family: var(--wwe-font-mono);
  
    /* Remove browser default glow; we provide consistent focus below */
    outline: none;
  }
  
  /* Center input: subtle analysis highlight */
  .wwe-letter-input.center-input {
    background-color: var(--wwe-ui-primary-soft);
    border-color: var(--wwe-ui-primary-strong);
    font-weight: 800;
    grid-column: 2;
    grid-row: 2;
  }
  
  /* Strong visible focus ring */
  .wwe-letter-input:focus {
    outline: 2px solid transparent; /* keeps outline path for HCM */
    outline-offset: 2px;
    border-color: var(--wwe-color-primary);
    box-shadow: 0 0 0 2px var(--wwe-ui-primary-focus);
  }
  
  /* ------------------------------
     Actions
     ------------------------------ */
  .wwe-actions {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .wwe-btn-solve {
    width: min(360px, 100%);
    padding: 0.85rem 1rem;
    font-size: 1.125rem;
    background: transparent;
    color: var(--wwe-color-text);
    border: 1px solid var(--wwe-color-border-2);
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    font-family: var(--wwe-font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .wwe-btn-solve:hover,
  .wwe-btn-solve:focus {
    border-color: var(--wwe-color-primary);
    color: var(--wwe-color-text);
  }
  
  .wwe-btn-solve:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  
  /* Optional toggle row if present in markup */
  .wwe-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }
  
  .wwe-toggle-label {
    font-size: 0.95rem;
    color: var(--wwe-color-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--wwe-font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .wwe-toggle-wrapper input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--wwe-color-primary);
  }
  
  /* ------------------------------
     Results
     ------------------------------ */
  .wwe-results-area {
    margin-top: 2rem;
    background: transparent;
  }

  .wwe-daily-play {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--wwe-color-border-2);
    background: var(--wwe-color-surface-2);
  }

  .wwe-daily-play h2 {
    margin-top: 0;
    font-family: var(--wwe-font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
  }

  .wwe-daily-play [hidden] {
    display: none !important;
  }

  .wwe-daily-play-loading {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
    color: var(--wwe-color-muted);
    font-family: var(--wwe-font-mono);
    font-size: 0.9rem;
  }

  .wwe-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--wwe-ui-overlay-strong);
    border-top-color: var(--wwe-color-primary);
    animation: wwe-spin 0.8s linear infinite;
  }

  @keyframes wwe-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .wwe-daily-play-error {
    margin-bottom: 0.65rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--wwe-ui-error-mid);
    background: var(--wwe-ui-error-soft);
    color: var(--wwe-ui-status-error-text);
    font-size: 0.92rem;
  }

  .wwe-daily-play-status {
    margin-bottom: 0.65rem;
    min-height: 1.2rem;
    font-family: var(--wwe-font-mono);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--wwe-color-muted);
  }

  .wwe-daily-play-status.warning {
    color: var(--wwe-ui-status-warning-text);
  }

  .wwe-daily-play-status.error {
    color: var(--wwe-ui-status-error-text);
  }

  .wwe-daily-play-status.success {
    color: var(--wwe-ui-status-success-text);
  }

  .wwe-daily-guess-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
  }

  .wwe-daily-guess-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
  }

  #wwe-daily-guess-input {
    min-height: 42px;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--wwe-color-border-2);
    background: var(--wwe-ui-wheel-bg);
    color: var(--wwe-color-text);
    font-family: var(--wwe-font-mono);
    text-transform: uppercase;
    box-sizing: border-box;
  }

  .wwe-daily-guess-hint {
    min-height: 1.1rem;
    margin: 0.35rem 0 0;
    color: var(--wwe-color-dim);
    font-size: 0.82rem;
  }

  .wwe-daily-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.65rem 0;
    font-size: 0.95rem;
  }

  .wwe-daily-stats p {
    margin: 0;
  }

  .wwe-daily-expert-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.86rem;
    color: var(--wwe-color-muted);
  }

  .wwe-daily-expert-hint {
    color: var(--wwe-color-dim);
    font-size: 0.8rem;
  }

  .wwe-daily-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
  }

  .wwe-daily-actions .wwe-btn-solve {
    width: auto;
    min-height: 42px;
    padding: 0.55rem 0.8rem;
    font-size: 0.92rem;
  }

  .wwe-daily-tier-feedback {
    margin: 0.75rem 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--wwe-ui-primary-strong);
    background: var(--wwe-ui-primary-soft);
  }

  .wwe-daily-tier-title {
    margin: 0;
    font-family: var(--wwe-font-mono);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--wwe-color-text);
  }

  .wwe-daily-tier-message {
    margin: 0.25rem 0 0;
    color: var(--wwe-color-muted);
    font-size: 0.86rem;
  }

  .wwe-daily-tier-meta {
    margin: 0.3rem 0 0;
    color: var(--wwe-color-dim);
    font-size: 0.82rem;
    font-family: var(--wwe-font-mono);
  }

  .wwe-daily-found-block,
  .wwe-daily-missing-block {
    margin-top: 0.85rem;
  }

  .wwe-daily-found-block h3,
  .wwe-daily-missing-block h3 {
    margin: 0 0 0.45rem;
    font-size: 0.9rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-family: var(--wwe-font-mono);
  }

  .wwe-daily-word-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .wwe-daily-word {
    border: 1px solid var(--wwe-color-border-2);
    padding: 0.3rem 0.55rem;
    font-family: var(--wwe-font-mono);
    font-size: 0.85rem;
    background: var(--wwe-ui-overlay-soft);
  }

  .wwe-daily-word.found {
    border-color: var(--wwe-ui-primary-strong);
    background: var(--wwe-ui-primary-mid);
  }

  .wwe-daily-word.missing {
    border-color: var(--wwe-ui-warning-mid);
    background: var(--wwe-ui-warning-soft);
  }

  .wwe-daily-word-empty {
    color: var(--wwe-color-dim);
    font-size: 0.85rem;
    font-family: var(--wwe-font-mono);
  }

  .wwe-daily-leaderboard {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wwe-color-border);
  }

  .wwe-daily-leaderboard h3 {
    margin: 0 0 0.45rem;
    font-family: var(--wwe-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 0.9rem;
  }

  .wwe-daily-leaderboard-list {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .wwe-daily-leaderboard-item {
    font-family: var(--wwe-font-mono);
    font-size: 0.84rem;
    color: var(--wwe-color-text);
  }

  .wwe-daily-leaderboard-submit {
    margin-top: 0.7rem;
  }

  .wwe-play-rules-note {
    margin-bottom: 1.25rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--wwe-color-border-2);
    background: var(--wwe-ui-overlay-subtle);
    font-family: var(--wwe-font-mono);
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .wwe-play-rules-note strong {
    display: block;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wwe-color-muted);
  }

  .wwe-play-rules-note p {
    margin: 0.2rem 0;
  }

  .wwe-play-rules-meta {
    color: var(--wwe-color-dim);
  }
  
  .wwe-result-tier {
    margin-bottom: 2rem;
  }
  
  .wwe-result-tier h3 {
    border-bottom: 1px solid var(--wwe-color-border);
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
    font-family: var(--wwe-font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .wwe-word-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .wwe-word-item {
    background: var(--wwe-ui-overlay-mid);
    border: 1px solid var(--wwe-color-border);
    padding: 0.4rem 0.75rem;
    border-radius: 0;
    font-family: var(--wwe-font-mono);
    letter-spacing: 0.5px;
  }
  
  /* Pangram highlight: terminal green accent */
  .wwe-word-item.pangram {
    border-color: var(--wwe-ui-primary-strong);
    color: var(--wwe-color-text);
    background: var(--wwe-ui-primary-soft);
    font-weight: 800;
  }
  
  /* Empty state */
  .wwe-empty {
    color: var(--wwe-color-dim);
    font-family: var(--wwe-font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  /* ------------------------------
     Secret Reveal Slot
     ------------------------------ */
  .wwe-secret-slot {
    background: var(--wwe-ui-wheel-bg);
    border: 1px solid var(--wwe-ui-primary-strong);
    border-radius: 0;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: none;
  }
  
  .wwe-secret-label {
    display: block;
    font-weight: 800;
    color: var(--wwe-color-muted);
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 1px;
    font-family: var(--wwe-font-mono);
  }
  
  .wwe-secret-content {
    min-height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .wwe-secret-word {
    font-size: 2rem;
    font-weight: 900;
    color: var(--wwe-color-primary);
    letter-spacing: 2px;
    font-family: var(--wwe-font-mono);
    animation: wwe-reveal-pop 0.42s ease-out;
  }
  
  .wwe-secret-blur {
    filter: blur(10px);
    user-select: none;
    opacity: 0.65;
    background: var(--wwe-ui-overlay-mid);
    color: transparent;
    border-radius: 0;
    border: 1px solid var(--wwe-color-border);
    width: 220px;
    height: 2.8rem;
    margin-bottom: 1rem;
  }
  
  /* Reveal button: sharp */
  .wwe-btn-reveal {
    margin-top: 0.5rem;
    background: transparent;
    color: var(--wwe-color-primary);
    border: 1px solid var(--wwe-ui-primary-strong);
    padding: 0.65rem 1.25rem;
    border-radius: 0;
    cursor: pointer;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: border-color 0.15s ease-in-out, transform 0.1s ease-in-out;
    font-family: var(--wwe-font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  .wwe-btn-reveal:hover,
  .wwe-btn-reveal:focus {
    border-color: var(--wwe-color-primary);
  }
  
  .wwe-btn-reveal:active {
    transform: translateY(1px);
  }
  
  @keyframes wwe-reveal-pop {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  
  /* ------------------------------
     Accessibility: Visually Hidden
     ------------------------------ */
  .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
  }
  
  /* ------------------------------
     Mobile refinements
     ------------------------------ */
  @media (max-width: 520px) {
    .wwe-wheel-form {
      padding: 1.25rem;
    }
    .wwe-inputs-visual {
      width: 270px;
    }
    .wwe-letter-input {
      font-size: 1.45rem;
    }
  }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .wwe-wheel-form:focus-within::after {
      animation: none;
    }
    .wwe-secret-word {
      animation: none;
    }
  }
  
  /* =========================================================
   Word Wheel — clean 8 wedges + hub (matches reference style)
   Depends on JS setting --wwe-angle for 8 outer inputs
   ========================================================= */

.wwe-inputs-visual {
    /* wheel size + geometry */
    --wwe-wheel-size: min(420px, 100%);
    --wwe-radius: calc(var(--wwe-wheel-size) / 2);
    --wwe-ring-distance: calc(var(--wwe-radius) * 0.62); /* letters sit inside wedges */
  
    position: relative;
    width: var(--wwe-wheel-size);
    aspect-ratio: 1 / 1;
    margin: 18px auto 10px;
  
    border-radius: 50%;
    overflow: hidden;
  
    /* wedge fill (subtle) */
    background:
      repeating-conic-gradient(
        from -90deg,
        var(--wwe-ui-overlay-strong) 0 45deg,
        var(--wwe-ui-overlay-subtle) 45deg 90deg
      );
  
    /* strong outer ring like reference */
    box-shadow:
      inset 0 0 0 5px var(--wwe-ui-wheel-ring-outer),
      inset 0 0 0 6px var(--wwe-ui-wheel-ring-inner);
    background-color: var(--wwe-ui-wheel-bg);
  }
  
  /* Divider lines (thicker, clearer spokes) */
  .wwe-inputs-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
  
    background:
      repeating-conic-gradient(
        from -90deg,
        var(--wwe-ui-wheel-divider) 0 2.5deg,
        transparent 2.5deg 45deg
      );
    opacity: 0.95;
  }
  
  /* Center hub disc (single, clean) */
  .wwe-inputs-visual::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
  
    width: 40%;
    height: 40%;
  
    transform: translate(-50%, -50%);
    border-radius: 50%;
  
    background: var(--wwe-ui-overlay-strong);
    box-shadow:
      inset 0 0 0 5px var(--wwe-ui-wheel-ring-outer),
      inset 0 0 0 6px var(--wwe-ui-wheel-ring-inner);
  
    pointer-events: none;
    z-index: 1;
  }
  
  /* Inputs become "letter glyphs" with large hit targets */
  .wwe-inputs-visual .wwe-letter-input {
    position: absolute;
    top: 50%;
    left: 50%;
  
    /* hit area */
    width: clamp(52px, 12vw, 72px);
    height: clamp(52px, 12vw, 72px);
  
    /* remove disc look */
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
  
    /* glyph */
    color: var(--wwe-color-text, #E0E0E0);
    font-family: var(--wwe-font-mono, ui-monospace, monospace);
    font-weight: 900;
    font-size: clamp(34px, 6.5vw, 54px);
    letter-spacing: 1px;
    text-transform: uppercase;
  
    display: grid;
    place-items: center;
    text-align: center;
  
    outline: none;
    z-index: 2;
  
    transform: translate(-50%, -50%);
  }
  
  /* Focus styling (kept accessible) */
  .wwe-inputs-visual .wwe-letter-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--wwe-color-primary, #00FF41);
    box-shadow: 0 0 0 2px var(--wwe-ui-primary-focus);
    background: var(--wwe-ui-primary-soft);
  }
  
  /* Center input: sits in hub; no extra circle on top */
  .wwe-inputs-visual .wwe-letter-input.center-input {
    width: 38%;
    height: 38%;
    font-size: clamp(46px, 9vw, 74px);
  
    /* keep it clean; hub disc is behind */
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  
    z-index: 3;
    transform: translate(-50%, -50%);
  }
  
  /* Outer placement uses --wwe-angle (JS sets these) */
  .wwe-inputs-visual .wwe-letter-input:not(.center-input) {
    --wwe-angle: 0deg;
    transform:
      translate(-50%, -50%)
      rotate(var(--wwe-angle))
      translateY(calc(-1 * var(--wwe-ring-distance)))
      rotate(calc(-1 * var(--wwe-angle)));
  }
  
  /* Mobile tuning */
  @media (max-width: 520px) {
    .wwe-inputs-visual {
      --wwe-wheel-size: min(360px, 100%);
    }
  }

  /* =========================================================
   FIX: Ensure outer placement transform never becomes invalid
   Paste at END of solver.css
   ========================================================= */

/* Force a stable ring distance (no derived calc chains) */
.wwe-inputs-visual {
    --wwe-ring-distance: clamp(120px, 22vw, 160px);
  }
  
  /* Outer placement MUST always have a valid translateY */
  .wwe-inputs-visual .wwe-letter-input:not(.center-input) {
    /* fallback ensures transform remains valid even if variable fails */
    transform:
      translate(-50%, -50%)
      rotate(var(--wwe-angle, 0deg))
      translateY(calc(-1 * var(--wwe-ring-distance, 150px)))
      rotate(calc(-1 * var(--wwe-angle, 0deg)));
  }
  
  /* =========================================================
   WORD WHEEL — Reference geometry (shape + positioning)
   Paste at VERY END of solver.css
   ========================================================= */

.wwe-inputs-visual {
    /* kill old 3x3 grid styling */
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  
    --wwe-wheel-size: min(420px, 100%);
    --wwe-hub-d: 40%;                 /* hub diameter like reference */
    --wwe-hub-r: calc(var(--wwe-hub-d) / 2);
    --wwe-ring-distance: calc(var(--wwe-wheel-size) * 0.35); /* center of wedge band */
  
    position: relative;
    width: var(--wwe-wheel-size) !important;
    aspect-ratio: 1 / 1;
    margin: 18px auto 12px;
    border-radius: 50%;
    overflow: hidden;
  
    background: var(--wwe-ui-wheel-bg);
  
    /* strong outer ring */
    box-shadow:
      inset 0 0 0 6px var(--wwe-ui-wheel-ring-outer),
      inset 0 0 0 7px var(--wwe-ui-wheel-ring-inner);
  }
  
  /* Spokes: draw across wheel BUT mask the center so no lines in hub */
  .wwe-inputs-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
  
    /* Layer 1 (top): hub mask (paints over spokes inside hub) */
    /* Layer 2 (below): 8 spokes at 45° intervals */
    background:
      radial-gradient(
        circle at center,
        var(--wwe-ui-wheel-bg) 0 var(--wwe-hub-r),
        transparent calc(var(--wwe-hub-r) + 0.2%) 100%
      ),
      repeating-conic-gradient(
        from -90deg,
        var(--wwe-ui-wheel-spoke) 0 1.8deg,
        transparent 1.8deg 45deg
      );
  }
  
  /* Hub disc: opaque so spokes cannot show through */
  .wwe-inputs-visual::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--wwe-hub-d);
    height: var(--wwe-hub-d);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
  
    /* opaque fill is key to "no lines inside" */
    background: var(--wwe-ui-wheel-hub-bg);
  
    /* hub ring */
    box-shadow:
      inset 0 0 0 6px var(--wwe-ui-wheel-ring-outer),
      inset 0 0 0 7px var(--wwe-ui-wheel-ring-inner);
  }
  
  /* Inputs become letter glyphs (no boxes) */
  .wwe-inputs-visual .wwe-letter-input {
    position: absolute;
    top: 50%;
    left: 50%;
  
    width: clamp(52px, 12vw, 72px);
    height: clamp(52px, 12vw, 72px);
    padding: 0;
    margin: 0;
  
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
  
    color: var(--wwe-color-text, #E0E0E0);
    font-family: var(--wwe-font-mono, ui-monospace, monospace);
    font-weight: 900;
    font-size: clamp(34px, 6.5vw, 54px);
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
  
    outline: none;
    z-index: 2;
  
    transform: translate(-50%, -50%);
  }
  
  .wwe-inputs-visual .wwe-letter-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--wwe-color-primary, #00FF41);
    box-shadow: 0 0 0 2px var(--wwe-ui-primary-focus);
    background: var(--wwe-ui-primary-soft);
  }
  
  /* Center letter sits in hub */
  .wwe-inputs-visual .wwe-letter-input.center-input {
    width: var(--wwe-hub-d);
    height: var(--wwe-hub-d);
    font-size: clamp(48px, 9vw, 76px);
    z-index: 3;
    transform: translate(-50%, -50%);
  }
  
  /* Outer letters go to wedge centers (JS supplies --wwe-angle) */
  .wwe-inputs-visual .wwe-letter-input:not(.center-input) {
    transform:
      translate(-50%, -50%)
      rotate(var(--wwe-angle, 0deg))
      translateY(calc(-1 * var(--wwe-ring-distance)))
      rotate(calc(-1 * var(--wwe-angle, 0deg)));
  }

  /* Layout contract guardrails: keep radial positioning resilient to global theme overrides. */
  .wwe-inputs-visual {
    position: relative;
  }

  .wwe-inputs-visual .wwe-letter-input {
    position: absolute;
  }

.wwe-hidden-by-play-ui {
  display: none !important;
}