@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f0f11;--surface:#1a1a1f;--surface2:#222228;--border:#2a2a32;
  --text:#f0f0f2;--muted:#6b6b7a;
  --correct:#4ade80;--present:#fbbf24;--absent:#3a3a42;
  --accent:#818cf8;
  --correct-bg:#166534;--present-bg:#92400e;--absent-bg:#2a2a32;
}
html { overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;margin:0;padding:0}

/* ── Confetti Canvas ── */
#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:500;will-change:transform}

/* ── Loading ── */
#loading{position:fixed;inset:0;background:var(--bg);z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#loading.show{display:flex}
.spinner{width:30px;height:30px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .65s linear infinite}
.load-text{font-size:13px;color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Header ── */
header{width:100%;max-width:700px;display:flex;align-items:center;justify-content:space-between;padding:18px 16px 14px;border-bottom:1px solid var(--border)}
.logo{font-size:21px;font-weight:800;letter-spacing:-1px}.logo span{color:var(--accent)}
.header-right{display:flex;align-items:center;gap:8px}
.icon-btn{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:14px;cursor:pointer;color:var(--muted);transition:border-color .15s,color .15s;line-height:1;display:inline-flex;align-items:center;justify-content:center;}
.icon-btn:hover{border-color:var(--accent);color:var(--text)}
.score-pill{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px 13px;font-size:12px;color:var(--muted)}
.score-pill strong{color:var(--accent);font-size:14px;font-weight:700}

/* ── Message ── */
#message{width:100%;max-width:700px;min-height:34px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;padding:8px 16px 0;text-align:center;color:transparent;transition:color .2s}
#message.error{color:#f87171}#message.success{color:var(--correct)}#message.info{color:var(--accent)}

/* ── Grid ── */
#grid-container{flex:1;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
#grid{display:grid;grid-template-rows:repeat(6,1fr);gap:clamp(4px, 1.2vmin, 8px);padding:10px;width:100%;max-width:min(100vw - 32px, 800px, calc((100vh - 330px) * var(--wl, 5) / 6));max-width:min(100vw - 32px, 800px, calc((100dvh - 330px) * var(--wl, 5) / 6));margin:auto}
.row{display:grid;gap:clamp(5px, 1.5vmin, 8px)}
.tile{aspect-ratio:1;border:2px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:clamp(17px,5vmin,40px);font-weight:800;text-transform:uppercase;background:transparent;color:var(--text);will-change:transform;transition:border-color .1s,background .15s}
.tile.filled{border-color:#4a4a56;animation:pop .1s ease}
.tile.selected{background:rgba(129,140,248,.18);border-color:var(--accent)}
.tile.correct{background:var(--correct-bg);border-color:var(--correct);color:var(--correct)}
.tile.present{background:var(--present-bg);border-color:var(--present);color:var(--present)}
.tile.absent{background:var(--absent-bg);border-color:var(--absent);color:var(--muted)}
.tile.reveal{animation:flip .48s ease forwards;will-change:transform}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes flip{0%{transform:rotateX(0)}49%{transform:rotateX(-90deg)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.row.shake{animation:shake .38s ease}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tile.bounce{animation:bounce .5s ease}

/* ── Keyboard ── */
#keyboard{--kb-gap:6px;padding:4px 6px calc(12px + env(safe-area-inset-bottom));width:100%;max-width:750px;display:flex;flex-direction:column;gap:var(--kb-gap);margin:0 auto;flex-shrink:0;box-sizing:border-box}
.kb-row{display:flex;justify-content:center;gap:var(--kb-gap);width:100%}
.key{--key-width:calc((100% - 10 * var(--kb-gap)) / 11);width:var(--key-width);flex:none;max-width:none;height:clamp(42px,6.5vh,60px);min-width:0;padding:0;border:1px solid var(--border);border-radius:6px;background:var(--surface2);color:var(--text);font-family:'Inter',sans-serif;font-size:clamp(12px,2.2vh,18px);font-weight:700;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .08s;text-transform:uppercase;will-change:transform;user-select:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.key.wide{width:calc(2 * var(--key-width) + var(--kb-gap));font-size:clamp(10.5px, 1.8vmin, 15px);letter-spacing:-.2px}
.key:hover{background:#2c2c36;transform:translateY(-1px)}
.key:active{transform:translateY(1px)}
.key.correct{background:var(--correct-bg);border-color:var(--correct);color:var(--correct)}
.key.present{background:var(--present-bg);border-color:var(--present);color:var(--present)}
.key.absent{background:var(--absent-bg);border-color:var(--absent-bg);color:var(--muted)}

/* ── Modals shared ── */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(5px)}
.modal.open{display:flex}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:32px 28px;width:92%;max-width:360px;text-align:center;animation:slideUp .28s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.modal-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--muted);margin-bottom:6px}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px}
.modal-close:hover{color:var(--text)}
.modal-box-rel{position:relative}

/* ── End-game modal ── */
.modal-word{font-size:30px;font-weight:800;letter-spacing:5px;text-transform:uppercase;color:var(--text);margin-bottom:20px}
.modal-points{font-size:52px;font-weight:800;color:var(--accent);line-height:1;margin-bottom:2px}
.modal-pts-label{font-size:11px;color:var(--muted);margin-bottom:6px}
.modal-total{font-size:13px;color:var(--muted);margin-bottom:22px}.modal-total strong{color:var(--text)}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-bottom:0}
.btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:8px;padding:11px 20px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s;white-space:nowrap}
.btn:hover{opacity:.86;transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.btn-accent{background:var(--accent);color:#fff}
.modal-history-wrap{margin-top:18px;border-top:1px solid var(--border);padding-top:14px}
.modal-history-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:8px}
  .history-list{display:flex;flex-direction:column;gap:3px;max-height:110px;overflow-y:auto;padding-right:12px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
  .history-list::-webkit-scrollbar { width: 6px; }
  .history-list::-webkit-scrollbar-track { background: transparent; }
  .history-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
  .history-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.history-item{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:3px 0;color:var(--muted)}
.history-item .h-word{text-transform:uppercase;font-weight:700;color:var(--text);letter-spacing:1px}
.history-item .h-pts{color:var(--accent);font-weight:700}

/* ── Stats modal ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 20px}
.stat-box{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 6px}
.stat-num{font-size:26px;font-weight:800;color:var(--text)}
.stat-lbl{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--muted);text-align:center;line-height:1.3}
.dist-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:10px}
.dist-rows{display:flex;flex-direction:column;gap:5px}
.dist-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}
.dist-bar-wrap{flex:1;height:22px;background:var(--surface2);border-radius:4px;overflow:hidden}
.dist-bar{height:100%;background:var(--accent);border-radius:4px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;font-weight:700;color:#fff;min-width:26px;transition:width .6s ease}
.dist-bar.highlight{background:var(--correct-bg);border:1px solid var(--correct)}

/* ── Mobile Responsiveness ── */
@media (max-width: 500px) {
  header { flex-wrap: wrap; padding: 10px; gap: 8px; justify-content: center; }
  .logo { flex: 1 1 100%; text-align: center; font-size: 26px; }
  .header-right { flex: 1 1 100%; justify-content: space-between; gap: 4px; }
  .icon-btn { padding: 6px; font-size: 13px; }
  .score-pill { padding: 4px 10px; font-size: 11px; }
  
  #grid {
    padding: 6px;
    gap: 4px;
    max-width: min(100vw - 16px, calc((100vh - 280px) * var(--wl, 5) / 6));
    max-width: min(100vw - 16px, calc((100dvh - 280px) * var(--wl, 5) / 6));
  }
  .row { gap: 4px; }
  
  #keyboard { padding: 4px 4px 12px; --kb-gap: 4px; }
  .kb-row { gap: var(--kb-gap); width: 100%; }
  .key { height: clamp(40px, 6vh, 52px); font-size: clamp(11px, 2vh, 15px); border-radius: 4px; }
  .key.wide { font-size: clamp(10px, 1.8vh, 13px); }
  
  .modal-box { padding: 24px 20px; width: 95%; }
  .stats-grid { gap: 4px; }
  .stat-box { padding: 8px 4px; }
  .stat-num { font-size: 20px; }
}

/* ── Disable selection ── */
body { user-select: none; -webkit-user-select: none; }
.modal-word, .modal-points { user-select: text; -webkit-user-select: text; }

/* ── Modal Minimize ── */
.modal.minimized {
  background: transparent;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 16px;
  pointer-events: none;
  backdrop-filter: none;
}
.modal.minimized .modal-box {
  transform: scale(0.65);
  transform-origin: top right;
  pointer-events: auto;
  margin: 0;
  cursor: pointer;
}
.modal.minimized .modal-box * {
  pointer-events: none;
}
.modal.minimized .history-list { display: none; }
.modal.minimized .modal-history-title { display: none; }
.modal.minimized .modal-history-wrap { border: none; margin: 0; padding: 0; }