:root{
    --navy: #0C346C;
    --navy-deep: #082347;
    --navy-soft: #12437F;
    --white: #FFFFFF;
    --page-bg-1: #F4F8FE;
    --page-bg-2: #E3ECFB;
    --ink: #0C346C;
    --muted: #5C7396;
    --line: #DCE6F5;
    --good: #2FBE7A;
    --good-deep: #1F9A62;
    --bad: #E85D5D;
    --bad-deep: #C74747;
    --gold: #F0B23A;
    --radius: 16px;
    --shadow: 0 20px 45px -18px rgba(12,52,108,0.35);
    --shadow-sm: 0 8px 20px -10px rgba(12,52,108,0.25);
    --font-display: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
  }

  [data-theme="dark"]{
    --page-bg-1: #071B38;
    --page-bg-2: #04122A;
    --navy: #12437F;
    --navy-deep: #06152C;
    --navy-soft: #1B4E8F;
    --white: #0F2A52;
    --ink: #EAF1FF;
    --muted: #8FA8D4;
    --line: #1D3A64;
    --shadow: 0 20px 45px -16px rgba(0,0,0,0.6);
    --shadow-sm: 0 8px 20px -10px rgba(0,0,0,0.5);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    min-height:100vh;
    font-family:var(--font-body);
    background:
      radial-gradient(circle at 15% 10%, rgba(12,52,108,0.06), transparent 45%),
      radial-gradient(circle at 90% 85%, rgba(240,178,58,0.08), transparent 40%),
      linear-gradient(160deg, var(--page-bg-1), var(--page-bg-2));
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px 12px;
    transition:background .4s ease, color .4s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .app{
    width:100%;
    max-width:700px;
  }

  .board{
    background:linear-gradient(165deg, var(--navy), var(--navy-deep));
    border-radius:calc(var(--radius) + 6px);
    box-shadow:var(--shadow);
    padding:clamp(16px,3.5vw,32px);
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  .board::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(circle at 85% -10%, rgba(255,255,255,0.10), transparent 55%);
    pointer-events:none;
  }

  /* Top bar */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:clamp(12px,2.5vw,20px);
    position:relative;
    z-index:1;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(1.1rem,3vw,1.5rem);
    letter-spacing:.2px;
  }
  .brand .dot{
    width:10px;height:10px;border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 4px rgba(240,178,58,.25);
  }
  .icon-row{display:flex; gap:8px;}
  .icon-btn{
    width:40px;height:40px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.18);
    background:rgba(255,255,255,0.08);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    font-size:1.05rem;
    transition:transform .15s ease, background .2s ease;
  }
  .icon-btn:hover{background:rgba(255,255,255,0.16); transform:translateY(-2px);}
  .icon-btn:active{transform:translateY(0) scale(.94);}
  .icon-btn[aria-pressed="true"]{background:var(--gold); color:var(--navy-deep); border-color:transparent;}

  /* Stats strip */
  .stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin-bottom:clamp(14px,3vw,20px);
    position:relative; z-index:1;
  }
  .stat{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    padding:8px 6px;
    text-align:center;
  }
  .stat .v{font-family:var(--font-display); font-weight:700; font-size:clamp(1rem,2.6vw,1.25rem);}
  .stat .k{font-size:clamp(.62rem,1.6vw,.72rem); color:rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:.06em; margin-top:2px;}

  /* Category + difficulty pill row */
  .meta-row{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:8px;
    margin-bottom:10px;
    position:relative; z-index:1;
  }
  .pill{
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.16);
    padding:6px 12px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.02em;
  }
  select.pill-select{
    appearance:none;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.16);
    color:#fff;
    padding:6px 28px 6px 12px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:600;
    cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat:no-repeat;
    background-position:right 8px center;
    background-size:14px;
  }
  select.pill-select option{color:#0C346C;}

  /* Main game area */
  .stage{
    background:var(--white);
    color:var(--ink);
    border-radius:var(--radius);
    padding:clamp(14px,3vw,24px);
    box-shadow:var(--shadow-sm);
    position:relative; z-index:1;
  }

  .gallows-wrap{
    display:flex; justify-content:center;
    margin-bottom:8px;
  }
  .gallows-wrap svg{
    width:min(220px, 55vw);
    height:auto;
  }
  .stroke{
    stroke:var(--navy);
    stroke-width:6;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:220;
    stroke-dashoffset:220;
    transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1);
  }
  [data-theme="dark"] .stroke{ stroke: var(--ink); }
  .stroke.show{stroke-dashoffset:0;}
  .part-bad .stroke.show{stroke:var(--bad);}

  .hint-row{
    text-align:center;
    min-height:20px;
    font-size:.85rem;
    color:var(--muted);
    margin-bottom:6px;
  }

  .word-row{
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
    margin:14px 0 18px;
  }
  .letter-box{
    width:clamp(26px,7vw,40px);
    height:clamp(34px,9vw,48px);
    border-bottom:3px solid var(--navy);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(1rem,4vw,1.4rem);
    text-transform:uppercase;
    transition:transform .25s ease;
  }
  .letter-box.space{ border-bottom:none; width:16px; }
  .letter-box.pop{ animation:pop .35s ease; }
  @keyframes pop{ 0%{transform:scale(0.4) rotate(-6deg);} 60%{transform:scale(1.15) rotate(2deg);} 100%{transform:scale(1);} }

  .keyboard{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(30px,1fr));
    gap:6px;
    margin-top:6px;
  }
  .key{
    border:none;
    border-radius:10px;
    background:var(--page-bg-2);
    color:var(--navy);
    font-family:var(--font-body);
    font-weight:700;
    font-size:clamp(.8rem,2.6vw,1rem);
    padding:10px 0;
    cursor:pointer;
    transition:transform .12s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    box-shadow:0 2px 0 rgba(12,52,108,0.08);
  }
  [data-theme="dark"] .key{ background:#123055; color:#EAF1FF; }
  .key:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 6px 12px -4px rgba(12,52,108,0.3); }
  .key:active:not(:disabled){ transform:translateY(0) scale(.95); }
  .key:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
  .key.correct{ background:var(--good); color:#fff; }
  .key.wrong{ background:var(--bad); color:#fff; }
  .key:disabled{ cursor:not-allowed; opacity:.55; }

  .action-row{
    display:flex; gap:10px; flex-wrap:wrap;
    margin-top:16px;
    justify-content:center;
  }
  .btn{
    border:none;
    border-radius:12px;
    padding:12px 20px;
    font-family:var(--font-body);
    font-weight:700;
    font-size:.9rem;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
    display:inline-flex; align-items:center; gap:8px;
  }
  .btn-primary{ background:var(--navy); color:#fff; box-shadow:0 10px 20px -10px rgba(12,52,108,0.6); }
  .btn-primary:hover{ transform:translateY(-2px); }
  .btn-ghost{ background:var(--page-bg-2); color:var(--navy); }
  [data-theme="dark"] .btn-ghost{ background:#123055; color:#EAF1FF; }
  .btn-ghost:hover{ transform:translateY(-2px); }
  .btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
  .btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

  .footnote{
    text-align:center;
    color:var(--muted);
    font-size:.72rem;
    margin-top:14px;
    letter-spacing:.03em;
  }

  /* Modal */
  .modal-overlay{
    position:fixed; inset:0;
    background:rgba(6,17,36,0.55);
    backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    z-index:50;
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
  }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }
  .modal{
    background:var(--white);
    color:var(--ink);
    border-radius:20px;
    padding:28px 24px;
    max-width:380px;
    width:100%;
    text-align:center;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.4);
    transform:translateY(16px) scale(.96);
    transition:transform .28s ease;
  }
  .modal-overlay.open .modal{ transform:translateY(0) scale(1); }
  .modal h2{
    font-family:var(--font-display);
    font-size:1.6rem;
    margin:0 0 4px;
  }
  .modal .word-reveal{
    font-family:var(--font-display);
    font-weight:700;
    color:var(--navy);
    text-transform:uppercase;
    letter-spacing:.05em;
    margin:10px 0;
    font-size:1.1rem;
  }
  .modal .details{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    margin:16px 0;
    text-align:left;
  }
  .modal .details div{
    background:var(--page-bg-2);
    border-radius:10px;
    padding:8px 10px;
    font-size:.78rem;
    color:var(--muted);
  }
  [data-theme="dark"] .modal .details div{ background:#123055; }
  .modal .details div b{
    display:block; font-family:var(--font-display); font-size:1rem; color:var(--ink);
  }
  .modal .actions{ display:flex; gap:10px; justify-content:center; margin-top:8px; }

  .confetti{
    position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden;
  }
  .confetti span{
    position:absolute; top:-10px;
    width:8px; height:14px;
    border-radius:2px;
    animation:fall linear forwards;
  }
  @keyframes fall{
    to{ transform:translateY(110vh) rotate(540deg); opacity:.9; }
  }

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

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
  }