:root{
    --bg:#000; --text:#fff;
    --tile:#0f0f17; --tile-border:#272737;
    --hit:#FF4FA3; --near:#3FCBFF; --miss:#28224C;
    --row-glow:#3fcbff;
    --tile-size: clamp(40px, 9.2vw, 62px);
    --radius: 10px; --kb-gap: 6px; --kb-max: 620px; --ad-h: 80px;
    --guess-blue:#1f6ffd; --sidebar-w: 260px; --stage-w: min(900px, 94vw); --stage-gap: 16px;
    --nav-h: 56px;

    /* NEW: theme surface variables (default = night) */
    --nav-bg:#000;
    --border-weak:#111;
    --panel:#0e0e16;
    --panel-2:#0a0a16;
    --panel-border:#232338;
    --panel-border-2:#202238;
    --key-bg:#12121a;
    --key-border:#232338;
    --ad-bg:#0a0a0a;
    --ad-border:#111;
    --ad-slot-bg:#121212;
    --ad-slot-border:#2a2a2a;
    --text-soft:#c9cefa;
  }

  /* NEW: Day mode overrides */
  body.day{
    --bg:#f7f8fb;
    --text:#0f1220;

    --nav-bg:#ffffff;
    --border-weak:rgba(15,18,32,0.10);

    --tile:#ffffff;
    --tile-border:rgba(15,18,32,0.14);
    --miss:#e9e7ff;

    --panel:#ffffff;
    --panel-2:#f4f5fb;
    --panel-border:rgba(15,18,32,0.14);
    --panel-border-2:rgba(15,18,32,0.12);

    --key-bg:#ffffff;
    --key-border:rgba(15,18,32,0.14);

    --ad-bg:#ffffff;
    --ad-border:rgba(15,18,32,0.10);
    --ad-slot-bg:#f6f7fb;
    --ad-slot-border:rgba(15,18,32,0.18);

    --text-soft:rgba(15,18,32,0.70);
  }

  @media (max-width: 520px){
    :root{ --nav-h: 48px; }
    .brand{ font-size:16px }
    .nav-cta .btn{ height:30px; font-size:.85rem }
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;display:flex;flex-direction:column}
  
  /* ===== Splash Screen ===== */
  .splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
  }
  
  .splash-screen.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
  }
  
  .splash-content {
    text-align: center;
    padding: 20px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .splash-logo-img {
    width: 180px;
    height: 180px;
    margin: 20px auto 24px;
    display: block;
    opacity: 0;
    animation: fadeInUp 0.5s ease-out 0.2s forwards;
    border-radius: 20px;
  }
  
  @keyframes logoReveal {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .splash-title {
    font-family: "Kalam", system-ui, sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0 0;
    opacity: 0;
    animation: fadeInUp 0.5s ease-out 0.1s forwards;
  }
  
  .splash-tagline {
    font-family: "Caveat", cursive;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 32px 0;
    color: var(--text-soft);
    opacity: 0;
    animation: fadeInUp 0.5s ease-out 0.3s forwards;
  }
  
  .splash-play-btn {
    background: var(--hit);
    color: #120513;
    border: 2px solid #ff4fa3;
    border-radius: 12px;
    padding: 16px 48px;
    font-size: 1.25rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
    animation: fadeInUp 0.5s ease-out 0.4s forwards;
    box-shadow: 0 4px 12px rgba(255, 79, 163, 0.3);
  }
  
  .splash-play-btn:hover {
    background: #ff79ba;
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(255, 79, 163, 0.4);
  }
  
  .splash-play-btn:active {
    transform: scale(0.95);
  }
  
  .splash-login-btn {
    background: var(--near);
    color: #031018;
    border: 2px solid #3fcbff;
    border-radius: 12px;
    padding: 14px 42px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
    animation: fadeInUp 0.5s ease-out 0.5s forwards;
    box-shadow: 0 4px 12px rgba(63, 203, 255, 0.3);
    margin-top: 12px;
  }
  
  .splash-login-btn:hover {
    background: #5fd5ff;
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(63, 203, 255, 0.4);
  }
  
  .splash-login-btn:active {
    transform: scale(0.95);
  }
  
  .splash-login-message {
    font-family: "Caveat", cursive;
    font-size: 1rem;
    font-weight: 600;
    margin: 12px 0 0 0;
    padding: 0 20px;
    max-width: 500px;
    color: var(--text-soft);
    text-align: center;
    line-height: 1.5;
    opacity: 0;
    display: none;
    animation: fadeInUp 0.4s ease-out forwards;
  }
  
  .splash-login-message.show {
    display: block;
  }
  
  .splash-meta {
    margin-top: 24px;
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: fadeInUp 0.5s ease-out 0.6s forwards;
  }
  
  .splash-date {
    font-size: 0.9rem;
    color: var(--text-soft);
  }
  
  .splash-number {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--near);
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .splash-screen,
    .splash-logo-img,
    .splash-title,
    .splash-tagline,
    .splash-play-btn,
    .splash-login-btn,
    .splash-login-message,
    .splash-meta {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
  
  @media (max-width: 520px) {
    .splash-title {
      font-size: 1.5rem;
    }
    .splash-tagline {
      font-size: 1.2rem;
    }
    .splash-play-btn {
      padding: 14px 40px;
      font-size: 1.1rem;
    }
    .splash-login-btn {
      padding: 12px 36px;
      font-size: 1rem;
    }
    .splash-login-message {
      font-size: 0.9rem;
      padding: 0 16px;
    }
  }

  .nav{height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--border-weak);letter-spacing:.6px;font-weight:800;position:sticky;top:0;background:var(--nav-bg);z-index:6;padding:0 10px}
  .nav-left{display:flex;align-items:center;gap:8px;justify-content:flex-start}
  .nav-center{display:flex;align-items:center;justify-content:center}
  .nav-right{display:flex;align-items:center;gap:10px;justify-content:flex-end}
  .hamburger{width:22px;height:16px;display:grid;gap:4px;cursor:pointer}
  .hamburger span{display:block;height:2px;background:var(--text);border-radius:2px}
  .menu{position:absolute;top:var(--nav-h);left:8px;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;box-shadow:0 20px 60px #0008;display:none;min-width:240px;overflow:hidden}
  body.day .menu{box-shadow:0 20px 60px rgba(15,18,32,.16)}
  .menu.show{display:block}
  .menu a{display:block;padding:10px 14px;color:inherit;text-decoration:none;border-bottom:1px solid var(--panel-border-2)}
  .menu a:last-child{border-bottom:none}
  .menu a:hover{background:rgba(127,201,255,0.08)}

  /* CHANGED: Wozzlar brand uses Uncial Antiqua */
  .brand{font-family:"Uncial Antiqua", ui-serif, Georgia, serif; font-size:18px;letter-spacing:1px;display:flex;gap:.15em;align-items:center;cursor:pointer}
  .brand span{opacity:.35;transition:opacity .2s ease,text-shadow .2s ease}
  .brand span.lit{opacity:1;text-shadow:0 0 8px #ff4fa333,0 0 18px #ff4fa322}
  body.day .brand span.lit{ text-shadow:0 0 8px rgba(255,79,163,.22),0 0 18px rgba(255,79,163,.14) }

  .badge{padding:.2rem .5rem; border:1px solid #412; border-radius:999px; font-size:.7rem; background:#1a0b12; color:#ff9ac7; display:none}
  body.day .badge{ border-color:rgba(255,79,163,.28); background:rgba(255,79,163,.10); color:#b0185e; }
  .badge.show{display:inline-block}

  .nav-cta .btn{height:32px;padding:0 10px;border-radius:8px;font-size:.9rem}

  .wrap{position:relative;margin:0 auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 0 calc(var(--ad-h) + 16px)}
  .stage{width:var(--stage-w);display:flex;flex-direction:column;align-items:center;gap:14px;z-index:2}

  .g-head{font-family:"Kalam",system-ui,sans-serif;font-weight:700;font-size:1.05rem;color:var(--guess-blue);margin:0 0 10px}

  .phrase{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;width:100%;overflow:visible}
  .word-row{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:6px;border-radius:14px}
  .word-row.active{outline-color:#194f65;box-shadow:0 0 0 4px #3fcbff22,0 0 0 8px #3fcbff12}
  body.day .word-row.active{ outline-color:rgba(63,203,255,.55); box-shadow:0 0 0 4px rgba(63,203,255,.14),0 0 0 8px rgba(63,203,255,.08); }
  .word-row[tabindex]{cursor:pointer}

  .side-tags{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}
  .side-tags.left{
    right:100%;margin-right:8px;text-align:right;max-width:30vw;
    display:flex;flex-direction:column;gap:4px;justify-items:end;
  }
  .tag{
    display:inline-block;
    font-family:"Kalam",system-ui,sans-serif;
    font-weight:700;
    font-size:11px; line-height:1.1;
    letter-spacing:.03em;
    color:#7fc9ff;
    opacity:.95;
    white-space:nowrap;
    margin:0;
    filter:drop-shadow(0 1px 0 #0008);
  }
  body.day .tag{ filter:none; color:#1f6ffd; opacity:.9; }
  .tag .ltr{display:inline-block}
  .tag .near{ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }

  .tile{width:var(--tile-size);height:var(--tile-size);display:grid;place-items:center;position:relative;border-radius:var(--radius);background:var(--tile);color:inherit;font-weight:800;font-size:clamp(16px,3.6vw,24px);text-transform:uppercase;border:1px solid var(--tile-border);user-select:none;transition:transform .08s,background .2s,border-color .2s,box-shadow .15s}
  body.day .tile{ color:var(--text); }
  .word-row.active .tile{transform:translateY(-1px)}
  .tile.hit{background:var(--hit);color:#120513;border-color:#ff4fa3}
  .tile.near{background:var(--near);color:#031018;border-color:#3fcbff}
  .tile.miss{background:var(--miss);color:#b7b3d6;border-color:#39335f}
  body.day .tile.miss{ color:rgba(15,18,32,.68); border-color:rgba(15,18,32,.12); }
  .tile.caret{box-shadow:0 0 0 3px #ffe57a55,0 0 0 6px #ffe57a22,inset 0 0 0 2px #ffe57aaa}
  .tile.caret-soft{box-shadow:0 0 0 2px #ffe57a66,inset 0 0 0 1px #ffe57a99}

  .tile > .char {
    position:relative;
    z-index:2;
    pointer-events:none;
  }

  .theme-row {
    display:flex;
    align-items:center;
    width:min(var(--kb-max),96vw);
    gap:8px;
    justify-content:center;
  }
  .theme-row .theme-text { flex: 1 1 auto; display:flex; justify-content:center; }
  .theme-row .share-btn { flex: 0 0 auto; margin-left:8px; display:flex; align-items:center; justify-content:center; border-radius:10px; min-width:44px; height:40px; padding:0 10px; background:transparent; border:1px solid rgba(255,255,255,0.06); color:inherit; }
  body.day .theme-row .share-btn{ border-color:rgba(15,18,32,0.12); }

  .theme-text{font-family:"Caveat",ui-serif,Georgia,serif;font-weight:700;font-size:clamp(22px,5.2vw,38px);color:inherit;min-height:36px;display:flex;align-items:center;justify-content:center;user-select:none;width:min(var(--kb-max),96vw);margin:2px 0;gap:8px}
  .theme-text .practice-pill{padding:.1rem .5rem;border:1px solid #224; border-radius:999px; background:#10102a; color:#9ad1ff; font-family: "Kalam", system-ui, sans-serif; font-size:.9em}
  body.day .theme-text .practice-pill{ border-color:rgba(31,111,253,.22); background:rgba(31,111,253,.10); color:#1f6ffd; }

  .kb{position:relative;width:min(var(--kb-max),96vw);display:flex;flex-direction:column;gap:8px;z-index:3}
  .kb-row{display:grid;gap:var(--kb-gap);grid-template-columns:repeat(var(--cols,10),1fr)}
  .key{height:44px;display:grid;place-items:center;background:var(--key-bg);color:inherit;border:1px solid var(--key-border);border-radius:8px;font-weight:800;user-select:none;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:filter .12s,background .2s,border-color .2s,opacity .2s;position:relative;padding:6px}
  .key:hover{filter:brightness(1.08)}
  .key.hit{background:var(--hit);color:#120513;border-color:#ff4fa3;box-shadow:0 0 0 2px #ff4fa333}
  .key.near{background:var(--near);color:#031018;border-color:#3fcbff;box-shadow:0 0 0 2px #3fcbff22}
  .key.miss{background:var(--miss);color:#b7b3d6;border-color:#39335f}
  body.day .key.miss{ color:rgba(15,18,32,.60); border-color:rgba(15,18,32,.12); }
  .key.ctrl{height:48px;font-size:1.02rem}
  .key.disabled{opacity:.5;pointer-events:none}

  .key .key-label{display:block; font-weight:800; font-size:1rem; line-height:1; text-transform:uppercase; pointer-events:none; user-select:none; z-index:1}
  .key .count-squares{
    position:absolute; top:4px; right:4px;
    display:grid; grid-auto-flow:row; grid-template-columns:repeat(3, 7px); gap:2px;
    pointer-events:none;
  }
  .count-squares.many{ grid-template-columns:repeat(3, 5px); gap:1.5px; }
  .count-squares.many .sq{ width:5px; height:5px; }

  .count-squares .sq{
    width:7px;
    height:7px;
    background: var(--near);
    border-radius:2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25) inset;
    display:inline-block;
    transition:transform .12s,opacity .12s;
  }
  .count-squares.many .sq{ width:5px; height:5px; }
  .key .count-squares{ display:inline-grid; align-items:start; justify-items:end; }

  #btnSolve[aria-pressed="true"]{
    outline:2px solid var(--hit);
    box-shadow:0 0 0 2px #ff4fa366;
    border-color:#ff4fa3;
  }

  .adbar{position:fixed;left:0;right:0;bottom:0;height:var(--ad-h);background:var(--ad-bg);border-top:1px solid var(--ad-border);z-index:5;display:flex;align-items:center;justify-content:center;padding:0 12px}
  .adbar .slot{width:min(960px,100%);height:calc(var(--ad-h) - 16px);background:var(--ad-slot-bg);border:1px dashed var(--ad-slot-border);border-radius:10px;display:flex;align-items:center;justify-content:center;color:rgba(189,189,189,.95);font-size:.95rem}
  body.day .adbar .slot{ color:rgba(15,18,32,.55); }

  /* Calmtent Ad Styles */
  .ad-content{display:flex;align-items:center;gap:16px;padding:12px 20px;text-decoration:none;color:var(--text);width:min(960px,100%);height:calc(var(--ad-h) - 16px);border-radius:12px;background:linear-gradient(135deg, rgba(63, 203, 255, 0.15) 0%, rgba(255, 193, 166, 0.15) 50%, rgba(229, 176, 255, 0.15) 100%);border:2px solid rgba(63, 203, 255, 0.3);transition:all 0.3s ease;box-shadow:0 2px 8px rgba(63, 203, 255, 0.1)}
  .ad-content:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(63, 203, 255, 0.25);border-color:rgba(63, 203, 255, 0.5)}
  .ad-logo{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.2);flex-shrink:0}
  .ad-text{display:flex;flex-direction:column;gap:4px;min-width:0}
  .ad-heading{font-weight:700;font-size:1.15rem;letter-spacing:0.6px;color:var(--text)}
  .ad-tagline{font-size:0.95rem;color:var(--text-soft);line-height:1.4}
  
  body.day .ad-content{background:linear-gradient(135deg, rgba(63, 203, 255, 0.1) 0%, rgba(255, 193, 166, 0.1) 50%, rgba(229, 176, 255, 0.1) 100%);border:2px solid rgba(63, 203, 255, 0.3);box-shadow:0 2px 8px rgba(63, 203, 255, 0.08)}
  body.day .ad-content:hover{box-shadow:0 6px 20px rgba(63, 203, 255, 0.18);border-color:rgba(63, 203, 255, 0.5)}
  body.day .ad-logo{border-color:rgba(15,18,32,0.15)}
  
  @media (max-width: 520px){
    .ad-content{gap:10px;padding:6px 12px}
    .ad-logo{width:36px;height:36px}
    .ad-heading{font-size:0.9rem}
    .ad-tagline{font-size:0.8rem}
  }

  .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#000a;z-index:10;padding:20px}
  body.day .modal{ background:rgba(15,18,32,.35); }
  .modal.show{display:flex}
  .modal-card{width:min(560px,92vw);background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;box-shadow:0 20px 60px #0008;max-height:min(88vh,680px);display:flex;flex-direction:column}
  body.day .modal-card{ box-shadow:0 20px 60px rgba(15,18,32,.16); }
  .modal-header{Padding:18px 18px 8px}
  .modal-header h3{margin:0 0 6px;font-size:1.2rem}
  .modal-header .meta-row{margin:4px 0 0;color:var(--text-soft);font-size:.95rem}
  .modal-body{padding:0 18px 12px;overflow:auto}
  .modal-actions{position:sticky;bottom:0;z-index:1;display:flex;gap:8px;justify-content:flex-end;padding:12px 18px 16px;background:linear-gradient(rgba(14,14,22,.80),rgba(14,14,22,.94) 40%,rgba(14,14,22,1));border-top:1px solid var(--panel-border-2);backdrop-filter:blur(2px)}
  body.day .modal-actions{ background:linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.90) 40%,rgba(255,255,255,1)); }

  .stack-title{font-weight:800;margin:10px 0 8px;color:inherit;font-size:1rem}
  .share-visual{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;background:var(--panel-2);border:1px solid var(--panel-border-2);margin-bottom:10px}
  .guess-line{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-weight:800;letter-spacing:.02em}
  .letter{display:inline-grid;place-items:center;min-width:1.6ch;padding:.2ch .35ch;border-radius:6px;text-transform:uppercase;border:1px solid transparent}
  .letter.hit{background:var(--hit);color:#120513;border-color:#ff4fa3}
  .letter.near{background:var(--near);color:#031018;border-color:#3fcbff}
  .letter.miss{background:var(--miss);color:#b7b3d6;border-color:#39335f}
  body.day .letter.miss{ color:rgba(15,18,32,.62); border-color:rgba(15,18,32,.12); }

  .share-wrap{background:var(--panel-2);border:1px solid var(--panel-border-2);border-radius:10px;padding:12px;margin:10px 0 16px;overflow:auto}
  .share-pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:1.05rem;line-height:1.5;color:inherit;margin:0;white-space:pre-wrap}

  .btn{height:40px;padding:0 14px;border-radius:10px;cursor:pointer;font-weight:700;border:1px solid rgba(42,42,63,.85);background:rgba(22,22,38,.92);color:inherit}
  body.day .btn{ background:#fff; border-color:rgba(15,18,32,.14); }
  .btn.primary{background:var(--hit);color:#120513;border-color:#ff4fa3}

  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  @keyframes shakeX{10%{transform:translateX(-4px)}20%{transform:translateX(4px)}30%{transform:translateX(-4px)}40%{transform:translateX(4px)}50%{transform:translateX(-3px)}60%{transform:translateX(3px)}70%{transform:translateX(-2px)}80%{transform:translateX(2px)}90%{transform:translateX(-1px)}100%{transform:translateX(0)}}
  .shake{animation:shakeX .45s ease}

  #hint{position:absolute;top:-9999px;left:-9999px;background:rgba(17,17,17,.66);border:1px solid rgba(51,51,51,.75);border-radius:8px;padding:6px 10px;font-size:.9rem;opacity:0;transition:opacity .2s,transform .2s;transform:translateY(-6px);pointer-events:none}
  body.day #hint{ background:rgba(255,255,255,.92); border-color:rgba(15,18,32,.14); }
  #hint.show{opacity:1;transform:translateY(-10px)}

  .wizard-wrap{display:flex; gap:12px; align-items:flex-start; margin:8px 0 2px}
  .wizard-emoji{flex:0 0 auto; font-size:40px; filter: drop-shadow(0 2px 4px #0008)}
  body.day .wizard-emoji{ filter:none; }
  .speech{position:relative; background:linear-gradient(180deg, rgba(21,21,40,.95), rgba(14,14,26,.95)); border:1px solid rgba(42,42,68,.95); color:inherit; padding:12px 14px; border-radius:14px; box-shadow:0 8px 24px #0006}
  body.day .speech{ background:linear-gradient(180deg, #ffffff, #f4f5fb); border-color:rgba(15,18,32,.14); box-shadow:0 8px 24px rgba(15,18,32,.12); }
  .speech::after{content:""; position:absolute; left:-8px; top:14px; border-width:8px; border-style:solid; border-color:transparent rgba(42,42,68,.95) transparent transparent; filter: drop-shadow(-1px 0 0 rgba(42,42,68,.95))}
  body.day .speech::after{ border-color:transparent rgba(15,18,32,.14) transparent transparent; filter:none; }
  .speech h4{margin:0 0 6px; font-size:1.05rem; color:#ffd1e6}
  body.day .speech h4{ color:#b0185e; }
  .speech p{margin:0; line-height:1.35}
  .superwomp-line{Margin-top:8px; font-weight:800; color:#ff9ac7}
  body.day .superwomp-line{ color:#b0185e; }

  .kb-row .controls{
    display:flex;
    gap:8px;
    align-items:center;
    width:100%;
    justify-content:center;
    flex-direction:column;
  }
  .kb-row .controls .ctrl-row{
    display:flex;
    gap:8px;
    align-items:center;
    width:100%;
  }
  .kb-row.controls-row{ display:flex; justify-content:center; gap:8px; padding:6px 0; }
  .kb-row.controls-row .controls{ width:100%; max-width:var(--kb-max); padding:0 6px; }
  .kb-row.controls-row .controls .ctrl-row{ justify-content:space-between; }
  .kb-row.controls-row .controls .ctrl-row > *{ flex:1; min-width:0; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; padding:6px 8px; font-weight:800; }
  .kb-row.controls-row .controls .ctrl-row > * + *{ margin-left:8px; }
  .kb-row.controls-row .controls .key.ctrl{ height:48px; }
  @media (max-width:380px){
    .kb-row.controls-row .controls .ctrl-row > *{ height:46px; font-size:.95rem; padding:6px; }
  }
  .share-btn svg{ width:20px; height:20px; display:block; }
  .share-btn.disabled{ opacity:0.45; pointer-events:none; }

  /* ===== Tutorial Tooltips (Lightweight Onboarding) ===== */
  .tutorial-tooltip {
    position: fixed;
    background: linear-gradient(180deg, rgba(21,21,40,.98) 0%, rgba(14,14,26,.98) 100%);
    border: 2px solid rgba(63,203,255,.35);
    border-radius: 16px;
    padding: 16px 20px;
    color: #ffffff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 320px;
    z-index: 10000;
    pointer-events: auto;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 20px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(63,203,255,.15);
  }
  
  body.day .tutorial-tooltip {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
    border-color: rgba(15,18,32,.20);
    color: var(--text);
    box-shadow: 0 16px 40px rgba(15,18,32,.25);
  }
  
  .tutorial-tooltip.show {
    opacity: 1;
    transform: scale(1);
  }
  
  .tutorial-continue-btn {
    margin-top: 14px;
    padding: 10px 20px;
    background: var(--hit);
    color: #120513;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s ease;
  }
  
  .tutorial-continue-btn:hover {
    background: #ff79ba;
  }
  
  .tutorial-highlight {
    position: relative;
    animation: tutorial-pulse 2s ease-in-out infinite;
  }
  
  @keyframes tutorial-pulse {
    0%, 100% { 
      box-shadow: 0 0 0 3px rgba(255,79,163,.35);
    }
    50% { 
      box-shadow: 0 0 0 6px rgba(255,79,163,.55);
    }
  }
  
  /* Respect user's motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .tutorial-highlight {
      animation: none;
      box-shadow: 0 0 0 3px rgba(255,79,163,.55);
    }
    .tutorial-tooltip {
      transition: opacity 0.15s ease;
    }
  }

  /* ===== Install Prompt Banner ===== */
  .install-prompt {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--panel);
    border-top: 1px solid var(--panel-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    padding: 16px;
    display: none;
    animation: slideUp 0.4s ease-out;
  }
  
  body.day .install-prompt {
    box-shadow: 0 -4px 20px rgba(15,18,32,0.12);
  }
  
  .install-prompt.show {
    display: block;
  }
  
  @keyframes slideUp {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .install-prompt-content {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .install-prompt-icon {
    font-size: 32px;
    flex-shrink: 0;
  }
  
  .install-prompt-text {
    flex: 1;
  }
  
  .install-prompt-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 4px 0;
    color: var(--text);
  }
  
  .install-prompt-message {
    font-size: 0.85rem;
    margin: 0;
    color: var(--text-soft);
    line-height: 1.4;
  }
  
  .install-prompt-action {
    background: var(--hit);
    color: #120513;
    border: 1px solid #ff4fa3;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    white-space: nowrap;
  }
  
  .install-prompt-action:hover {
    background: #ff79ba;
    transform: scale(1.05);
  }
  
  .install-prompt-action:active {
    transform: scale(0.95);
  }
  
  .install-prompt-close {
    background: transparent;
    border: none;
    color: var(--text-soft);
    cursor: pointer;
    padding: 8px;
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 4px;
    transition: background 0.2s ease;
  }
  
  .install-prompt-close:hover {
    background: rgba(127,201,255,0.08);
  }
  
  /* iOS-specific arrow pointing up */
  .install-prompt-arrow {
    position: absolute;
    top: -40px;
    right: 50%;
    transform: translateX(50%);
    font-size: 32px;
    animation: bounce 1.5s ease-in-out infinite;
    display: none;
  }
  
  .install-prompt.ios .install-prompt-arrow {
    display: block;
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateX(50%) translateY(0);
    }
    50% {
      transform: translateX(50%) translateY(-8px);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .install-prompt {
      animation: none;
    }
    .install-prompt-arrow {
      animation: none;
    }
  }
  
  @media (max-width: 520px) {
    .install-prompt {
      padding: 12px;
    }
    .install-prompt-content {
      gap: 8px;
    }
    .install-prompt-icon {
      font-size: 24px;
    }
    .install-prompt-title {
      font-size: 0.85rem;
    }
    .install-prompt-message {
      font-size: 0.75rem;
    }
    .install-prompt-action {
      font-size: 0.85rem;
      padding: 6px 12px;
    }
  }