*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bw:min(94vw,54vh*8/9,420px);
  --cell:calc(var(--bw)/8);
}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(circle at 50% 30%,#4a7fae,#2b5279 75%);
  color:#fff;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
.screen{
  position:fixed;inset:0;
  display:flex;flex-direction:column;align-items:center;
  padding:max(14px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));
}
.hidden{display:none !important}
.muted{opacity:.85}
.small{font-size:.8rem}

#mute-btn{
  position:fixed;top:max(10px,env(safe-area-inset-top));right:12px;z-index:10;
  width:44px;height:44px;border:none;border-radius:50%;
  background:rgba(0,0,0,.25);color:#fff;font-size:1.25rem;cursor:pointer;
}
#mute-btn:active{transform:scale(.92)}

/* start screen */
#start-screen{gap:14px;text-align:center;overflow-y:auto}
#start-screen::before,#start-screen::after{content:"";margin:auto}
#about{width:min(92vw,500px);margin-top:10px;text-align:left}
#about summary{
  text-align:center;cursor:pointer;font-size:.85rem;font-weight:700;
  opacity:.8;padding:6px;list-style:none;
}
#about summary::-webkit-details-marker{display:none}
#about summary:hover{opacity:1}
#about h2{font-size:1rem;margin:14px 0 4px}
#about p{font-size:.88rem;line-height:1.5;opacity:.92}
#about a{color:#fff}
.noscript-note{
  position:fixed;inset:auto 0 0 0;z-index:20;
  background:rgba(0,0,0,.6);color:#fff;
  padding:14px 18px;font-size:.9rem;line-height:1.5;text-align:center;
}
.title{font-size:3rem;font-weight:800;letter-spacing:-1px;text-shadow:0 3px 8px rgba(0,0,0,.3)}
.subtitle{font-size:1.1rem;opacity:.9;margin-bottom:18px}
.btn{
  background:#fff;color:#2b5279;font-weight:800;font-size:1.15rem;
  border:none;border-radius:999px;padding:15px 46px;
  box-shadow:0 4px 0 rgba(0,0,0,.25);cursor:pointer;
}
.btn:disabled{opacity:.6}
.btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn.secondary{background:#e3edf5;color:#2b5279}
#end-actions{display:flex;gap:10px}
#end-actions .btn{padding:13px 22px;font-size:1rem}
#results-btn,#finish-btn{margin-top:12px;padding:11px 26px;font-size:.95rem}

#mode-toggle{display:flex;gap:4px;background:rgba(0,0,0,.22);border-radius:999px;padding:4px}
.mode{
  background:none;border:none;color:rgba(255,255,255,.75);
  font-weight:700;font-size:.95rem;padding:8px 20px;border-radius:999px;cursor:pointer;
}
.mode.active{background:#fff;color:#2b5279}

/* game screen */
#hud{
  width:min(94vw,460px);
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;
}
.hud-box{text-align:center;min-width:72px}
.hud-num{font-size:1.5rem;font-weight:800}
#score.bump{animation:bump .25s ease-out}
@keyframes bump{50%{transform:scale(1.4)}}
.hud-label{font-size:.62rem;letter-spacing:2px;opacity:.8}
#timer{font-size:2.2rem;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 2px 6px rgba(0,0,0,.3)}
#timer.low{color:#ff8080;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}

#board-wrap{position:relative;touch-action:none}
#board{
  position:relative;
  width:var(--bw);height:calc(var(--cell)*9);
  background:rgba(255,255,255,.08);
  border-radius:8px;
}
.cell{
  position:absolute;
  left:calc(var(--cell)*var(--c));top:calc(var(--cell)*var(--r));
  width:var(--cell);height:var(--cell);
  border:1px dashed rgba(255,255,255,.18);
}
.piece{
  position:absolute;left:0;top:0;
  display:flex;
  padding:calc(var(--cell)*.06);
  cursor:grab;
  z-index:2;
  transform:translate(calc(var(--cell)*var(--c,0)),calc(var(--cell)*var(--r,0)));
  transition:transform .18s ease;
  will-change:transform;
}
.piece.s{width:var(--cell);height:var(--cell)}
.piece.h{width:calc(var(--cell)*2);height:var(--cell)}
.piece.v{width:var(--cell);height:calc(var(--cell)*2);flex-direction:column}
.piece.dragging{transition:none;z-index:5;cursor:grabbing}
.piece-body{
  flex:1;display:flex;border-radius:14%;
  background:linear-gradient(180deg,#f5dfae,#e6c789);
  box-shadow:0 calc(var(--cell)*.07) 0 rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.25);
}
.piece.dragging .piece-body{
  box-shadow:0 calc(var(--cell)*.12) 14px rgba(0,0,0,.4);
}
.piece.v .piece-body{flex-direction:column}
.piece span{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--cell)*.52);font-weight:800;color:#43392a;
}

.word-flash{
  position:absolute;z-index:4;pointer-events:none;
  border-radius:10px;
  background:rgba(139,224,122,.45);
  box-shadow:0 0 0 3px rgba(139,224,122,.7);
  animation:wordflash .6s ease-out forwards;
}
@keyframes wordflash{from{opacity:1}to{opacity:0}}
.word-toast{
  position:absolute;z-index:6;pointer-events:none;
  transform:translate(-50%,-100%);
  background:#fff;color:#2b5279;font-weight:800;font-size:.95rem;
  padding:6px 14px;border-radius:999px;white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
  animation:toast 1s ease-out forwards;
}
@keyframes toast{
  0%{opacity:0;margin-top:0}
  15%{opacity:1}
  80%{opacity:1}
  100%{opacity:0;margin-top:-18px}
}

#found-row{
  width:min(94vw,460px);margin-top:12px;
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  min-height:2rem;
}
#found-row::-webkit-scrollbar{display:none}
.fchip{
  flex:0 0 auto;background:rgba(0,0,0,.25);border-radius:999px;
  padding:5px 12px;font-size:.85rem;font-weight:700;letter-spacing:.5px;
}

/* end screen */
#end-screen{justify-content:flex-start;overflow-y:auto}
#end-panel{
  margin:auto;
  background:#fff;color:#2d2a26;border-radius:20px;
  width:min(94vw,520px);
  max-height:86vh;
  max-height:calc(100svh - 28px);
  display:flex;flex-direction:column;align-items:center;
  padding:22px 16px 16px;gap:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
#end-header{text-align:center}
#final-score{font-size:2.6rem;font-weight:800;color:#2b5279}
#end-stats{font-size:.95rem}
#end-best{margin-top:2px}
#tabs{display:flex;gap:8px}
.tab{
  background:none;border:none;font-size:1rem;font-weight:700;color:#888;
  padding:6px 14px;border-radius:999px;cursor:pointer;
}
.tab.active{background:#e3edf5;color:#2b5279}
#word-lists{flex:1 1 auto;overflow-y:auto;width:100%;min-height:80px}
.chip-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:4px}
.wchip{
  background:#f1efe8;border-radius:999px;padding:5px 12px;
  font-size:.85rem;font-weight:700;letter-spacing:.5px;
}
.wchip .pts{opacity:.55;font-weight:600;margin-left:5px}
.wchip.got{background:#c5dcf0}
.empty-note{opacity:.6;font-size:.9rem;padding:14px}