*{box-sizing:border-box;margin:0;padding:0}
:root{--board-size:min(92vw,54vh,500px)}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(circle at 50% 30%,#2e8b46,#1b5e20 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}
.hiddenvis{visibility:hidden}
.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}
.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:#1b5e20;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:#e8f5e9;color:#1b5e20}
#end-actions{display:flex;gap:10px}
#end-actions .btn{padding:13px 22px;font-size:1rem}
#results-btn,#finish-btn{margin-top:14px;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:#1b5e20}

/* game screen */
#hud{
  width:min(92vw,500px);
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:4px;
}
.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.4rem;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 2px 6px rgba(0,0,0,.3)}
#timer.low{color:#ff6e6e;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}

#current-word-wrap{height:2.6rem;display:flex;align-items:center;justify-content:center;margin:6px 0 10px}
#current-word{
  padding:6px 18px;border-radius:999px;font-size:1.25rem;font-weight:800;letter-spacing:1px;
  background:rgba(0,0,0,.28);
}
#current-word.ok{background:#43a047;box-shadow:0 2px 8px rgba(0,0,0,.3)}
#current-word.dupe{background:#fbc02d;color:#4d3a00}
#current-word.bad{background:#e53935;animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

#board-wrap{position:relative;width:var(--board-size);height:var(--board-size);touch-action:none}
#board{
  display:grid;width:100%;height:100%;
  grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(4,1fr);
  gap:calc(var(--board-size)*.035);
}
.tile{
  background:#fdf7e8;border-radius:16%;
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--board-size)*.13);font-weight:800;color:#2d2a26;
  box-shadow:0 calc(var(--board-size)*.012) 0 rgba(0,0,0,.28);
}
.tile.sel{background:#d9d0b8}
.tile.sel.ok{background:#8be07a}
.tile.sel.dupe{background:#ffe066}
.tile.flash{animation:tileflash .45s ease-out}
@keyframes tileflash{0%{background:#8be07a;transform:scale(1.06)}100%{background:#fdf7e8;transform:scale(1)}}
#path-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
#path-line{fill:none;stroke:rgba(255,255,255,.55);stroke-linecap:round;stroke-linejoin:round}
#path-line.ok{stroke:rgba(103,220,80,.75)}
#path-line.dupe{stroke:rgba(255,214,10,.7)}

.pop{
  position:absolute;left:50%;top:-6px;z-index:3;
  font-size:1.7rem;font-weight:800;color:#b9f6ca;
  text-shadow:0 2px 5px rgba(0,0,0,.4);
  animation:pop .7s ease-out forwards;pointer-events:none;
}
@keyframes pop{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-46px)}}
.pop.big{font-size:2.3rem;color:#ffe066}

#found-row{
  width:min(92vw,500px);margin-top:14px;
  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:#1b5e20}
#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:#e8f5e9;color:#1b5e20}
#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:#c8e6c9}
.empty-note{opacity:.6;font-size:.9rem;padding:14px}