:root{
    --amber:#f2b705;
    --amber-dark:#c98f04;
    --dark:#14120f;
    --panel:#221f19;
    --panel2:#2b271f;
    --border:#463f30;
    --text:#f5f1e6;
    --muted:#a89b7f;
    --found-bg:#3a3324;
    --pangram:#e94f37;
    --good:#4caf50;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
  body{
    margin:0;
    font-family:'Segoe UI', Roboto, Arial, sans-serif;
    background:radial-gradient(circle at 50% -10%, #2a2416 0%, var(--dark) 60%);
    color:var(--text);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-bottom:20px;
    user-select:none;
  }
  header{
    width:100%;
    text-align:center;
    padding:18px 12px 8px;
  }
  header h1{
    margin:0;
    font-size:2.1rem;
    letter-spacing:1px;
    background:linear-gradient(90deg,var(--amber),#ffe08a);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  header p{margin:4px 0 0;font-size:.85rem;color:var(--muted);}

  .tabs{
    display:flex;
    gap:8px;
    margin:14px 0 4px;
    background:var(--panel);
    padding:6px;
    border-radius:12px;
  }
  .tab-btn{
    background:transparent;
    border:none;
    color:var(--muted);
    padding:8px 16px;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
    font-size:.9rem;
  }
  .tab-btn.active{
    background:linear-gradient(90deg,var(--amber-dark),var(--amber));
    color:#1a1608;
  }

  .archive-bar{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
    max-width:480px;
    margin:6px 0;
  }
  #archiveDateInput{
    background:var(--panel2);
    border:1px solid var(--border);
    color:var(--text);
    padding:5px 10px;
    border-radius:8px;
    font-size:.8rem;
  }
  .date-chip{
    background:var(--panel2);
    border:1px solid var(--border);
    color:var(--text);
    padding:5px 10px;
    border-radius:20px;
    font-size:.75rem;
    cursor:pointer;
  }
  .date-chip.active{background:var(--amber-dark);border-color:var(--amber-dark);color:#1a1608;}
  .date-chip.done{opacity:.5;}

  #status-line{
    font-size:.82rem;
    color:var(--muted);
    margin:6px 0 4px;
    text-align:center;
    min-height:16px;
  }

  /* progress bar */
  #progressWrap{
    width:100%;
    max-width:460px;
    padding:0 16px;
    margin:6px 0 10px;
  }
  #rankLabel{
    display:flex;
    justify-content:space-between;
    font-size:.72rem;
    color:var(--muted);
    margin-bottom:4px;
  }
  #rankLabel span#rankName{color:var(--amber); font-weight:700;}
  .prog-track{
    height:8px;
    border-radius:5px;
    background:var(--panel2);
    position:relative;
    overflow:hidden;
    border:1px solid var(--border);
  }
  .prog-fill{
    height:100%;
    background:linear-gradient(90deg,var(--amber-dark),var(--amber));
    width:0%;
    transition:width .3s;
  }
  .prog-dots{
    position:absolute; inset:0;
    display:flex; justify-content:space-between;
  }
  .prog-dots div{
    width:2px;height:100%;background:rgba(0,0,0,.25);
  }

  #currentWord{
    min-height:34px;
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    text-align:center;
    margin:8px 0 6px;
    min-width:200px;
  }
  #currentWord .center-letter{color:var(--amber);}
  #msg{
    min-height:20px;
    text-align:center;
    font-size:.85rem;
    font-weight:600;
    margin-bottom:4px;
    color:var(--good);
  }
  #msg.err{color:var(--pangram);}

  /* honeycomb */
  #hive{
    position:relative;
    width:280px;
    height:280px;
    margin:10px auto 18px;
  }
  .hex{
    position:absolute;
    width:88px;height:100px;
    left:50%; top:50%;
    margin-left:-44px; margin-top:-50px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--panel2);
    border:2px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    font-weight:800;
    text-transform:uppercase;
    color:var(--text);
    cursor:pointer;
    transition:transform .1s;
  }
  .hex:hover{ filter:brightness(1.15); }
  .hex:active{ transform:scale(0.92); }
  .hex.center{
    background:linear-gradient(160deg,var(--amber),var(--amber-dark));
    color:#1a1608;
    border-color:var(--amber-dark);
    z-index:2;
  }
  .hex.pos-0{ transform:translate(0px,-96px); }
  .hex.pos-1{ transform:translate(83px,-48px); }
  .hex.pos-2{ transform:translate(83px,48px); }
  .hex.pos-3{ transform:translate(0px,96px); }
  .hex.pos-4{ transform:translate(-83px,48px); }
  .hex.pos-5{ transform:translate(-83px,-48px); }
  .hex.pop{ animation: hexpop .15s ease; }
  @keyframes hexpop{ 0%{transform-origin:center;} 50%{ filter:brightness(1.3);} }

  #controls{
    display:flex;
    gap:10px;
    margin:4px 0 14px;
  }
  .ctrl-btn{
    background:var(--panel2);
    border:1px solid var(--border);
    color:var(--text);
    padding:10px 18px;
    border-radius:24px;
    font-weight:700;
    font-size:.85rem;
    cursor:pointer;
  }
  .ctrl-btn.shuffle{font-size:1.1rem; padding:10px 14px;}
  .ctrl-btn.enter{
    background:linear-gradient(90deg,var(--amber-dark),var(--amber));
    color:#1a1608;
  }

  #wordsPanel{
    width:100%;
    max-width:460px;
    padding:0 16px;
  }
  #wordsPanel h3{
    font-size:.8rem;
    color:var(--muted);
    margin:6px 0;
    text-align:center;
  }
  #foundList{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
    max-height:140px;
    overflow-y:auto;
    padding:6px;
    background:var(--panel);
    border-radius:10px;
    border:1px solid var(--border);
  }
  .found-word{
    background:var(--found-bg);
    padding:4px 10px;
    border-radius:14px;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.5px;
  }
  .found-word.pangram{
    background:linear-gradient(90deg,var(--pangram),#ff7a5c);
    color:#1a0805;
    font-weight:700;
  }

  #hintToggle{
    display:block;
    margin:12px auto 0;
    background:none;
    border:1px solid var(--border);
    color:var(--muted);
    padding:6px 14px;
    border-radius:16px;
    font-size:.75rem;
    cursor:pointer;
  }
  #hintTable{
    display:none;
    margin:10px auto 0;
    max-width:460px;
    border-collapse:collapse;
    font-size:.75rem;
  }
  #hintTable.show{display:table;}
  #hintTable th, #hintTable td{
    border:1px solid var(--border);
    padding:4px 8px;
    text-align:center;
    color:var(--muted);
  }
  #hintTable th{color:var(--amber);}

  footer{margin:24px 0 10px;font-size:.7rem;color:var(--muted);text-align:center; padding:0 20px;}

  .modal-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.7);
    display:none;align-items:center;justify-content:center;z-index:60;
    padding:16px;
  }
  .modal-overlay.show{display:flex;}
  .modal{
    background:var(--panel);border:1px solid var(--border);
    border-radius:14px;padding:22px;max-width:380px;width:100%;
    text-align:center; position:relative;
  }
  .modal h2{margin-top:0;color:var(--amber);}
  .modal .close-x{
    position:absolute;top:10px;right:14px;background:none;color:var(--muted);
    font-size:1.2rem;cursor:pointer;border:none;
  }
  .stat-grid{display:flex;justify-content:space-around;margin:14px 0;flex-wrap:wrap; gap:8px;}
  .stat{display:flex;flex-direction:column;align-items:center;min-width:70px;}
  .stat .num{font-size:1.3rem;font-weight:800;color:var(--amber);}
  .stat .lbl{font-size:.68rem;color:var(--muted);}
  .modal button.primary{
    background:linear-gradient(90deg,var(--amber-dark),var(--amber));
    border:none;color:#1a1608;padding:10px 20px;border-radius:8px;
    font-weight:700;cursor:pointer;margin-top:8px;font-size:.9rem;
  }

  @media (max-width:400px){
    #hive{width:250px;height:250px;}
    .hex{width:76px;height:88px;margin-left:-38px;margin-top:-44px;font-size:1.4rem;}
    .hex.pos-0{ transform:translate(0px,-84px); }
    .hex.pos-1{ transform:translate(73px,-42px); }
    .hex.pos-2{ transform:translate(73px,42px); }
    .hex.pos-3{ transform:translate(0px,84px); }
    .hex.pos-4{ transform:translate(-73px,42px); }
    .hex.pos-5{ transform:translate(-73px,-42px); }
  }