:root{
  --ink:#262b3c; --coral:#e0684c; --sage:#6b8f71; --mute:#787e8c;
  --cream:#faf8f3; --card:#ffffff; --line:#e7e3d8; --soft:#464a56;
  --sage-bg:#eaf1ea; --coral-bg:#fbe9e3;
  --radius:14px;
  --found-1:#6b8f71; --found-2:#e0684c; --found-3:#4f7cac; --found-4:#b06aa6;
  --found-5:#c98a3c; --found-6:#4f9c8b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column;
}
.topbar{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.brand{font-family:Georgia,"Times New Roman",serif; font-weight:700; font-size:20px; letter-spacing:.2px}
.bundle-title{color:var(--mute); font-size:14px}
main{flex:1; width:100%; max-width:900px; margin:0 auto; padding:20px}
.loading{color:var(--mute); padding:40px 0; text-align:center}
.footsig{
  text-align:center; color:var(--mute); font-size:12px;
  padding:20px; border-top:1px solid var(--line);
}

/* ---------- landing / not-found ---------- */
.notice{max-width:520px; margin:8vh auto; text-align:center}
.notice .em{font-family:Georgia,serif; font-size:26px; margin:0 0 10px}
.notice p{color:var(--soft); margin:6px 0}
.notice .hint{color:var(--mute); font-size:14px; margin-top:18px}

/* ---------- hub ---------- */
.hub-head{margin:0 0 4px}
.hub-head h1{font-family:Georgia,serif; font-weight:700; font-size:26px; margin:0}
.hub-head .sub{color:var(--mute); font-size:14px; margin:4px 0 20px}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px}
.pcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; cursor:pointer; text-align:left; font:inherit; color:inherit;
  display:flex; flex-direction:column; gap:10px; transition:border-color .12s, transform .06s;
}
.pcard:hover{border-color:var(--sage)}
.pcard:active{transform:scale(.99)}
.pcard .pn{font-size:12px; color:var(--coral); font-weight:700; letter-spacing:.4px}
.pcard .pt{font-family:Georgia,serif; font-size:19px}
.pcard .bar{height:6px; border-radius:6px; background:var(--line); overflow:hidden}
.pcard .bar > span{display:block; height:100%; background:var(--sage); width:0}
.pcard .pstat{font-size:12px; color:var(--mute)}
.pcard.done .pn{color:var(--sage)}

/* ---------- player ---------- */
.pl-top{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.btn{
  font:inherit; font-size:14px; background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:8px 14px; cursor:pointer;
}
.btn:hover{border-color:var(--sage)}
.btn.ghost{background:transparent}
.pl-title{font-family:Georgia,serif; font-size:22px; margin-right:auto}
.pl-progress{font-size:14px; color:var(--sage); font-weight:700}

.play-wrap{display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start}
.grid{
  display:grid; gap:2px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px;
  touch-action:none; user-select:none; -webkit-user-select:none;
}
.cell{
  display:flex; align-items:center; justify-content:center;
  width:min(7.6vw,38px); height:min(7.6vw,38px);
  font-size:min(4.2vw,19px); font-weight:700; color:var(--ink);
  background:var(--cream); border-radius:7px;
  transition:background .07s, color .07s;
}
.words{flex:1; min-width:150px}
.words h3{font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--mute); margin:2px 0 10px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{
  font-size:14px; padding:5px 11px; border-radius:10px;
  background:var(--card); border:1px solid var(--line); color:var(--soft);
}
.chip.found{text-decoration:line-through; color:var(--mute); background:var(--cream)}
.pl-actions{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}
.win{
  margin-top:16px; padding:14px 16px; border-radius:var(--radius);
  background:var(--sage-bg); color:#2f5138; font-weight:600; display:none;
}
.win.show{display:block}