/* pro-speak-main.css — [Batch 40 g108 hygiene 2026-04-24] Stray `};` + 3 orphan CSS properties removed (legacy artifact). */
  /* pro-speak-main.css — 042026.1.68 */
  /* [g68 Session 64 — Batch 8 Part A] L10-2 Phase 3 HC token-bridge.
     Pro-Speak owns a bespoke earthy palette (--bg/--text already pure
     #000/#fff which match HC defaults; --green/--red/--muted are earthy
     brand values that would wash out in HC). Rather than migrate 62
     literal hex values across 1028 lines (most are decorative overlays
     of the brand palette) we add an HC bridge that flips the local
     brand tokens to HC-safe values (--green #7cff7c, --red #ff6b7a,
     --muted #fff) when body.jhacal-high-contrast is present. The
     shared-ui.css L10-1 !important HC layer continues to cover the
     element-level literals; this bridge closes the remaining gap for
     any rule that consumes the local brand tokens directly. */
  :root{
    /* Colors - Earthy tones for less glare */
    --bg:#000; --text:#fff; --green:#6b8e23; --red:#a0522d; --muted:#333;
    --jhacal-gold:#f6c177;
    --jhacal-orange:#ff9800;
    
    /* Font Scaling */
    --jhacal-primary-font-scale:0.5;

    /* UI Scale (buttons, icons, controls) — 1.0 = default */
    --jhacal-ui-scale: 1.0;
    
    /* Responsive Font Sizes */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-base: 16px;
    --font-lg: 20px;
    --font-xl: 24px;
    --font-2xl: 32px;
    --font-3xl: 48px;
    --font-4xl: 64px;
    --font-display: 20px;
    
    /* Responsive Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    
    /* Button Sizes */
    --btn-height-sm: 36px;
    --btn-height-md: 48px;
    --btn-height-lg: 80px;
    --btn-height-xl: 120px;
    --btn-width-min: 150px;
    --btn-width-max: 250px;
    
    /* Grid Columns */
    --grid-cols: 4;
    --launch-cols: 2;
    
    /* Modal Sizes */
    --modal-width: 90vw;
    --modal-max-width: 900px;
    --modal-padding: 20px;
    
    /* Touch Targets */
    --touch-min: 44px;
  }
  

  /* ========================================
     RESPONSIVE BREAKPOINTS
     ======================================== */
  
  /* Small phones (portrait): 320px - 480px */
  @media (max-width: 480px) {
    :root {
      --font-3xl: 32px;
      --font-4xl: 48px;
      --font-display: 80px;
      --btn-height-xl: 80px;
      --btn-width-min: 120px;
      --btn-width-max: 180px;
      --space-lg: 16px;
      --space-xl: 20px;
      --grid-cols: 2;
      --launch-cols: 1;
      --modal-padding: 15px;
    }
    /* Reduce big-button and .btn by ~25% on phone-sized screens (respects ui-scale) */
    .big-button {
      min-height: calc(60px * var(--jhacal-ui-scale)) !important;
      font-size: calc(clamp(18px, 5vw, 27px) * var(--jhacal-ui-scale)) !important;
    }
    .btn {
      padding: calc(11px * var(--jhacal-ui-scale)) calc(22px * var(--jhacal-ui-scale)) !important;
      font-size: calc(20px * var(--jhacal-ui-scale)) !important;
    }
    .controls {
      gap: 16px !important;
      padding: 8px 12px 80px 12px !important;
    }
  }
  
  /* Mobile landscape / Small tablets: 481px - 768px */
  @media (min-width: 481px) and (max-width: 768px) {
    :root {
      --font-3xl: 40px;
      --font-4xl: 56px;
      --font-display: 100px;
      --btn-height-xl: 100px;
      --btn-width-min: 140px;
      --btn-width-max: 220px;
      --grid-cols: 2;
      --launch-cols: 2;
    }
  }
  
  /* Tablets portrait: 769px - 1024px (iPad, Lenovo, etc.) */
  @media (min-width: 769px) and (max-width: 1024px) {
    :root {
      --font-3xl: 36px;
      --font-display: 60px;
      --btn-height-xl: 80px;
      --grid-cols: 3;
      --launch-cols: 2;
    }
  }
  
  /* Large desktop: 1440px+ */
  @media (min-width: 1440px) {
    :root {
      --font-3xl: 56px;
      --font-4xl: 72px;
      --font-display: 140px;
      --btn-height-xl: 140px;
      --space-2xl: 64px;
    }
  }
  
  /* Ultra-wide / 4K: 2560px+ */
  @media (min-width: 2560px) {
    :root {
      --font-display: 180px;
      --btn-height-xl: 160px;
      --modal-max-width: 1200px;
    }
  }
  
  /* Landscape orientation on small screens */
  @media (max-height: 600px) and (orientation: landscape) {
    :root {
      --btn-height-xl: 60px;
      --font-3xl: 28px;
      --font-display: 50px;
      --space-lg: 12px;
    }
  }
  
  /* Tablet landscape optimization (Lenovo, iPad, etc.) */
  @media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {
    :root {
      --font-display: 50px;
      --btn-height-xl: 70px;
      --font-3xl: 32px;
    }
  }
  
  /* Touch device optimization */
  @media (pointer: coarse) {
    :root {
      --touch-min: 48px;
    }
  }
  
  
  /* Disable text selection and zoom */
  * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, sans-serif;
    padding: 0;
    overflow: hidden;
    touch-action: manipulation;
  }
  
  /* ===== LAUNCH SCREEN STYLES (SPEAK-EASY FORMAT) ===== */
  .launch-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #1a1d21 0%, #272b31 50%, #1a1d21 100%);
    display: flex;
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 24px;
  }
  
  .launch-card {
    background: rgba(31, 35, 40, 0.98);
    /* Fallback for browsers that don't support backdrop-filter */
    background: #1f2328;
    backdrop-filter: blur(20px);
    border: 2px solid #ff9800;
    border-radius: 24px;
    padding: 48px;
    max-width: 700px;
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 60px rgba(255, 152, 0, 0.15);
    animation: plLaunchFadeIn 0.4s ease-out;
  }
  
  /* Browsers that don't support backdrop-filter will use solid background */
  @supports not (backdrop-filter: blur(20px)) {
    .launch-card {
      background: #1f2328;
    }
  }
  
  @keyframes plLaunchFadeIn {
    from { opacity: 0; transform: scale(0.97) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  
  .launch-logo {
    height: 80px;
    margin-bottom: 24px;
    border-radius: 12px;
  }
  
  .launch-title {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f6c177, #ff9800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 12px 0;
  }
  
  .launch-subtitle {
    font-size: 1.1rem;
    color: #9ca3af;
    margin: 0 0 32px 0;
    font-style: italic;
  }
  
  .launch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 6px;
  }
  
  .launch-tile {
    background: linear-gradient(135deg, rgba(91, 141, 87, 0.15), rgba(91, 141, 87, 0.05));
    border: 2px solid rgba(91, 141, 87, 0.3);
    border-radius: 16px;
    padding: 24px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 140px;
    position: relative;
    overflow: hidden;
  }
  
  /* Subtle shine effect on hover to make tiles feel premium */
  .launch-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
  }
  
  .launch-tile:hover::before {
    left: 100%;
  }
  
  .launch-tile:hover {
    background: linear-gradient(135deg, rgba(91, 141, 87, 0.25), rgba(91, 141, 87, 0.15));
    border-color: #5B8D57;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(91, 141, 87, 0.3);
  }
  
  /* Primary tile - Green */
  .launch-tile.primary {
    background: linear-gradient(135deg, rgba(91, 141, 87, 0.15), rgba(91, 141, 87, 0.05));
    border-color: rgba(91, 141, 87, 0.3);
  }
  
  .launch-tile.primary:hover {
    background: linear-gradient(135deg, rgba(91, 141, 87, 0.25), rgba(91, 141, 87, 0.15));
    border-color: #5B8D57;
    box-shadow: 0 8px 24px rgba(91, 141, 87, 0.3);
  }
  
  /* Tutorial tile - Blue */
  .launch-tile.tutorial-tile {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    border-color: rgba(59, 130, 246, 0.3);
  }
  
  .launch-tile.tutorial-tile:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.15));
    border-color: #3b82f6;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
  }
  
  /* Why/About tiles - Orange */
  .launch-tile.why-tile {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.15), rgba(255, 152, 0, 0.05));
    border-color: rgba(255, 152, 0, 0.3);
  }
  
  .launch-tile.why-tile:hover {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.25), rgba(255, 152, 0, 0.15));
    border-color: #ff9800;
    box-shadow: 0 8px 24px rgba(255, 152, 0, 0.3);
  }
  
  .launch-tile .tile-icon {
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
  
  .launch-tile .tile-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: #e5e7eb;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  
  .launch-tile .tile-desc {
    font-size: 0.9rem;
    color: #9ca3af;
    line-height: 1.4;
  }
  
  @media (max-width: 600px) {
    .launch-card { padding: 24px 16px; }
    .launch-title { font-size: 1.6rem; }
    /* Keep 2×2 grid on iPhone — single column was too tall */
    .launch-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .launch-tile { min-height: 100px; padding: 16px 10px; touch-action: manipulation; }
    .launch-tile .tile-icon { font-size: 2rem; }
    .launch-tile .tile-name { font-size: 0.95rem; }
    .launch-tile .tile-desc { font-size: 0.8rem; }
  }

  /* Why/About Modal */
  .info-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10001;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 24px;
  }
  
  .info-modal-backdrop.open {
    display: flex;
  }
  
  .info-modal {
    background: rgba(31, 35, 40, 0.98);
    backdrop-filter: blur(20px);
    border: 2px solid #ff9800;
    border-radius: 16px;
    padding: 18px 20px;
    max-width: 580px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
    animation: fadeIn 0.4s ease-out;
  }
  
  .info-modal h2 {
    color: #ff9800;
    margin: 0 0 12px 0;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .info-modal h3 {
    color: #ffb74d;
    margin: 12px 0 6px 0;
    font-size: 1.0rem;
  }
  
  .info-modal p {
    color: #d1d5db;
    line-height: 1.45;
    margin: 6px 0;
    font-size: 0.88rem;
  }
  
  .info-modal ul {
    margin: 6px 0 10px 0;
    padding-left: 20px;
    color: #d1d5db;
  }
  
  .info-modal li {
    margin: 5px 0;
    line-height: 1.4;
    font-size: 0.88rem;
  }
  
  .info-modal strong {
    color: #ffb74d;
  }
  
  .info-modal em {
    color: #ff9800;
    font-style: italic;
  }
  
  .jhacal-section {
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid rgba(255, 152, 0, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 10px 0;
  }
  
  .jhacal-section h3 {
    margin-top: 0;
  }
  
  .jhacal-section p {
    margin: 6px 0;
  }
  
  .jhacal-section ul {
    margin: 6px 0;
  }
  /* [Batch 40 g108] Stray `};` + 3 orphan properties removed (legacy artifact —
     properties had no parent selector; deletion changes nothing visible). */
  
  .close-modal-btn {
    background: linear-gradient(135deg, #ff9800, #ffb74d);
    color: #000;
    border: none;
    padding: 12px 32px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 24px;
    width: 100%;
    transition: all 0.3s ease;
  }
  
  .close-modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 152, 0, 0.4);
  }
  
  
  /* Hidden app view */
  .app {
    display: none;
    flex-direction: column;
    height: 100dvh;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 60px;
  }
  
  /* Top controls bar - centered header with logo */
  .top-controls {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
  }
  
  /* JHACAL brand - now part of centered header */
  .brand {
    display: inline-flex;
    align-items: center;
  }
  
  .brand img {
    height: 48px;
    width: auto;
    display: block;
    border-radius: 6px;
    cursor: pointer;
  }
  
  .btn-top {
    padding: var(--space-sm) var(--space-md);
    border-radius: 10px;
    background: var(--muted);
    border: 2px solid #666;
    font-size: clamp(14px, 2vw, 20px);
    font-weight: 800;
    min-height: var(--touch-min);
    cursor: pointer;
    color: #fff;
    transition: all 0.2s;
  }
  
  .btn-top:hover {
    background: #444;
  }
  
  .btn-top.btn-home {
    background: var(--jhacal-gold);
    border-color: var(--jhacal-gold);
    color: #000;
    font-size: clamp(16px, 2.5vw, 20px);
  }
  
  .btn-top.btn-home:hover {
    background: var(--jhacal-orange);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
  }
  
  .btn-top.btn-tutorial {
    background: var(--jhacal-orange);
    border-color: var(--jhacal-orange);
    color: white;
    font-weight: bold;
    font-size: clamp(18px, 3vw, 24px);
    padding: 8px 20px;
  }
  
  .btn-top.btn-tutorial:hover {
    background: #ffb74d;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
  }
  
  /* Word display - center of screen */
  .word-display {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    margin-top: 100px;
  }
  
#displayWord {
    /* Reduced max size from 300px to 180px, and min from 60px to 40px */
    font-size: clamp(40px, calc(var(--font-display) * var(--jhacal-primary-font-scale)), 180px);
    font-weight: 900;
    text-align: center;
    width: 100%;
    line-height: 1.1;
    letter-spacing: 2px;
  }
  
/* Further reduce word size on tablets to ensure buttons visible */
  @media (min-width: 768px) and (max-width: 1366px) {
    #displayWord {
      /* REDUCED MAX FROM 120px TO 90px */
      font-size: clamp(40px, calc(var(--font-display) * var(--jhacal-primary-font-scale)), 90px);
      max-height: 25vh;
    }
  }
  
  /* Control buttons - bottom */
.controls {
    display: flex;
    justify-content: center;
    gap: 30px;
    /* Added !important to force the padding to stick */
    padding: 10px 20px 120px 20px !important;
    /* Ensure no negative margins pull it down */
    margin-top: 0 !important; 
  }
  
  .big-button {
    min-width: calc(clamp(var(--btn-width-min), 40vw, var(--btn-width-max)) * var(--jhacal-ui-scale));
    max-width: calc(clamp(var(--btn-width-min), 40vw, var(--btn-width-max)) * var(--jhacal-ui-scale));
    min-height: calc(var(--btn-height-xl) * var(--jhacal-ui-scale));
    font-size: calc(clamp(24px, 3.5vw, 36px) * var(--jhacal-ui-scale));
    font-weight: 900;
    border-radius: var(--space-lg);
    border: 4px solid #fff;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0 calc(16px * var(--jhacal-ui-scale));
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .big-button:active {
    transform: scale(0.95);
  }
  
  .btn-start {
    background: var(--green);
    color: #000;
  }
  
  .btn-stop {
    background: var(--red);
    color: #fff;
  }
  
  /* Modal styles */
  .modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
  }
  
  .modal.open {
    display: flex;
  }
  
  .dialog {
    background: #1a1a1a;
    border: 3px solid #444;
    border-radius: var(--space-lg);
    padding: var(--modal-padding);
    max-width: 90vw;
    max-height: 85vh;
    overflow: auto;
    color: #fff;
  }
  
  .dialog h3 {
    font-size: clamp(24px, 5vw, 42px);
    margin-top: 0;
    color: var(--jhacal-orange);
  }
  
  .btn {
    padding: calc(15px * var(--jhacal-ui-scale)) calc(30px * var(--jhacal-ui-scale));
    font-size: calc(28px * var(--jhacal-ui-scale));
    font-weight: 800;
    border-radius: 15px;
    background: var(--muted);
    border: 2px solid #666;
    color: #fff;
    cursor: pointer;
  }
  
  .btn:hover {
    background: #444;
  }
  
  /* Category and subset styling in playlist modal */
  .cat {
    margin: 15px 0;
    padding: 15px;
    background: rgba(255,255,255,0.03);
    border: 2px solid #333;
    border-radius: 15px;
  }
  
  .cat h4 {
    font-size: 28px;
    margin: 0 0 15px 0;
  }
  
  .cat input[type="checkbox"] {
    width: 30px;
    height: 30px;
    margin-right: 15px;
  }
  
  .cat label {
    font-size: clamp(18px, 3vw, 24px);
  }
  
  /* Responsive design */
  /* ========================================
     TOUCH & INTERACTION OPTIMIZATION
     ======================================== */
  
  /* Ensure all buttons meet minimum touch target */
  button, .btn, .clickable, input[type="checkbox"] {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
  }
  
  /* Improve tap feedback on touch devices */
  @media (pointer: coarse) {
    button:active, .btn:active {
      transform: scale(0.97);
    }
    
    .ps-pl-tab {
      padding: 12px 20px;
    }

    .ps-sub-item {
      padding: 12px;
    }
  }
  
  /* Responsive spacing for controls */
  .controls {
    gap: clamp(20px, 5vw, 30px);
    padding: var(--space-md);
    margin-top: -50px;
  }
  
  /* Move buttons significantly higher on tablets */
  @media (min-width: 768px) and (max-width: 1366px) {
    .controls {
      margin-top: -80px;
    }
    
    .word-display {
      padding: 20px;
    }
  }
  
  .word-display {
    padding: clamp(20px, 5vh, 40px);
  }
  
  /* ========================================
     LANDSCAPE ORIENTATION OPTIMIZATIONS
     ======================================== */
  
  /* Compact layout for landscape on small devices */
  @media (max-height: 600px) and (orientation: landscape) {
    .word-display {
      padding: 15px;
    }
    
    .controls {
      margin-top: -70px;
    }
    
.app {
      /* INCREASED from 30px to 80px to push everything up in landscape */
      padding-bottom: 80px; 
    }
    
    .top-controls {
      top: 10px;
    }
  }
  
  /* Optimize tablet portrait */
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .launch-grid {
      padding: 0 10%;
    }
    
    .big-button {
      font-size: 30px;
    }
  }
  

  /* ── Word Preview Bottom Sheet ─────────────────────────────────────────── */
  .word-preview-sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #1a1d23;
    border: 2px solid #ff9800;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    z-index: 10010;
    padding: 0 20px 20px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    /* Only active on mobile */
    pointer-events: none;
  }
  .word-preview-sheet.open {
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Hide sheet entirely on desktop — use popup there */
  @media (min-width: 769px) {
    .word-preview-sheet { display: none !important; }
    .word-preview-sheet-backdrop { display: none !important; }
  }

  .word-preview-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10009;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .word-preview-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .word-preview-sheet-handle {
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    margin: 12px auto 16px;
    flex-shrink: 0;
  }
  .word-preview-sheet-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-shrink: 0;
  }
  .word-preview-sheet-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ff9800;
    flex: 1;
  }
  .word-preview-sheet-count {
    font-size: 0.8rem;
    color: #9ca3af;
    background: rgba(255,152,0,0.15);
    padding: 3px 8px;
    border-radius: 10px;
  }
  .word-preview-sheet-close {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    min-height: 0 !important;
  }
  .word-preview-sheet-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    padding-bottom: 8px;
  }
  .word-preview-sheet-content .word-preview-word {
    background: rgba(255, 152, 0, 0.15);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 152, 0, 0.4);
    font-size: 0.95rem;
    color: #e5e7eb;
    touch-action: manipulation;
  }
  .word-preview-sheet-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-shrink: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Word Editor Modal */
  .word-editor-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 10003;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  
  .word-editor-modal.open {
    display: flex;
  }
  
  .word-editor-content {
    background: #1a1d23;
    border: 2px solid #444;
    border-radius: 12px;
    padding: 20px;
    max-width: 700px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .word-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #444;
  }
  
  .word-editor-title {
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight: 700;
    color: var(--jhacal-orange);
  }
  
  .word-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin: 15px 0;
    max-height: 400px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
  }
  
  .word-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid #444;
    border-radius: 6px;
    font-size: clamp(12px, 1.8vw, 14px);
    gap: 8px;
  }
  
  .word-item-text {
    flex: 1;
    cursor: pointer;
  }
  
  .word-item-actions {
    display: flex;
    gap: 4px;
  }
  
  .word-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: clamp(14px, 2vw, 16px);
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.2s;
  }
  
  .word-action-btn.play {
    color: var(--jhacal-orange);
  }
  
  .word-action-btn.play:hover {
    background: rgba(98, 234, 165, 0.2);
  }
  
  .word-action-btn.edit {
    color: #ff9800;
  }
  
  .word-action-btn.edit:hover {
    background: rgba(255, 152, 0, 0.2);
  }
  
  .word-action-btn.delete {
    color: #f44336;
  }
  
  .word-action-btn.delete:hover {
    background: rgba(244, 67, 54, 0.2);
  }
  
  .word-editor-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
  }
  
  .word-editor-input {
    flex: 1;
    padding: 10px;
    font-size: clamp(12px, 1.8vw, 14px);
    border: 2px solid #444;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    color: #fff;
  }
  
  .word-editor-input:focus {
    border-color: var(--jhacal-orange);
    outline: none;
  }
  
  .word-editor-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #444;
  }

  /* [g68 L10-2 Phase 3] HC token bridge — local brand tokens flip to the
     shared HC hex values when body.jhacal-high-contrast is active. --bg
     and --text are omitted because they already match HC defaults
     (#000/#fff). Earthy --green/--red/--muted flip to high-vis values. */
  body.jhacal-high-contrast{
    --green:#7cff7c;
    --red:#ff6b7a;
    --muted:#fff;
  }