:root{
  --paper:#f3ecdd;
  --paper-2:#eadfc7;
  --ink:#2c2420;
  --ink-soft:#544539;
  --muted:#8a7c6a;
  --accent:#c1440e;
  --accent-soft:#e7c9a9;
  --teal:#2f6b5e;
  --line:rgba(44,36,32,0.16);
  --card:#fbf7ec;
  --wood:#c98a4b;
  --wood-dark:#8a5a2b;
  font-family:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(circle at 1px 1px, rgba(44,36,32,0.07) 1px, transparent 0);
  background-size:22px 22px;
}

.screen{
  position:relative;
  display:none;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  padding:3rem 1.25rem 2rem;
}
.screen.active{ display:flex; }

/* ---------- MENU ---------- */
.title{
  font-family:'Fraunces', serif;
  font-optical-sizing:auto;
  font-weight:600;
  font-size:clamp(2.4rem, 6vw, 3.6rem);
  text-align:center;
  margin:0.5rem 0 0.6rem;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.title .accent{
  color:var(--accent);
  font-style:italic;
  position:relative;
}
.title .accent::after{
  content:'';
  position:absolute;
  left:-2%;
  right:-2%;
  bottom:-0.08em;
  height:0.14em;
  background:var(--accent-soft);
  z-index:-1;
  transform:rotate(-1deg);
}

.subtitle{
  color:var(--ink-soft);
  text-align:center;
  max-width:480px;
  margin-bottom:2.75rem;
  font-size:1.05rem;
  line-height:1.5;
}
.subtitle strong{ color:var(--accent); }

.mode-cards{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  justify-content:center;
}

.mode-card{
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.45rem;
  width:210px;
  padding:1.6rem 1.2rem;
  border-radius:0.9rem;
  border:2px solid var(--ink);
  background:var(--card);
  color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mode-card:nth-child(2){ transform:rotate(-0.6deg); }
.mode-card:nth-child(1){ transform:rotate(0.6deg); }
.mode-card:hover{
  transform:translate(-3px,-3px) rotate(0deg);
  box-shadow:8px 8px 0 var(--accent);
}
.mode-card.small{ width:auto; padding:0.85rem 1.6rem; transform:none; }
.mode-icon{ font-size:2.2rem; }
.mode-name{ font-weight:700; font-size:1.05rem; }
.mode-desc{ font-size:0.85rem; color:var(--muted); text-align:center; }

.link-btn{
  margin-top:1.6rem;
  background:none;
  border:none;
  border-bottom:2px solid var(--ink);
  color:var(--ink);
  cursor:pointer;
  font-size:0.95rem;
  font-family:inherit;
  padding:0 0 2px;
}
.link-btn:hover{ color:var(--accent); border-color:var(--accent); }
a.link-btn{ text-decoration:none; }

.how-to-play{
  margin-top:1.2rem;
  max-width:520px;
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:0.9rem;
  padding:1.3rem 1.7rem;
  box-shadow:5px 5px 0 var(--ink);
}
.how-to-play.hidden{ display:none; }
.how-to-play h3{
  margin-top:0;
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--ink);
}
.how-to-play li{ margin-bottom:0.5rem; color:var(--ink-soft); line-height:1.45; }

/* ---------- GAME ---------- */
.topbar{
  width:100%;
  max-width:1100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.6rem;
  gap:1rem;
  flex-wrap:wrap;
}

.icon-btn{
  background:var(--card);
  border:2px solid var(--ink);
  color:var(--ink);
  padding:0.5rem 1rem;
  border-radius:0.6rem;
  cursor:pointer;
  font-size:0.9rem;
  font-family:inherit;
  font-weight:500;
  box-shadow:3px 3px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s;
}
.icon-btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--accent); }
.icon-btn:active{ transform:translate(0,0); box-shadow:1px 1px 0 var(--ink); }

.turn-banner{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.1rem;
  padding:0.5rem 1.5rem;
  border-radius:2rem;
  background:var(--ink);
  color:var(--paper);
  text-align:center;
}

.board{
  width:100%;
  max-width:1100px;
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  gap:1.2rem;
  align-items:start;
}

.player-panel{
  background:var(--card);
  border:2px solid var(--line);
  border-radius:0.9rem;
  padding:1rem;
  min-height:340px;
  display:flex;
  flex-direction:column;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.player-panel.active-turn{
  border-color:var(--ink);
  box-shadow:4px 4px 0 var(--accent-soft);
}

.panel-header{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin-bottom:0.6rem;
  padding-bottom:0.6rem;
  border-bottom:2px solid var(--line);
  font-weight:600;
}
.avatar{ font-size:1.4rem; }

.collected{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:4px;
  min-height:220px;
}

.count-badge{
  margin-top:0.5rem;
  font-size:0.8rem;
  color:var(--muted);
  text-align:center;
  background:var(--paper-2);
  border-radius:0.5rem;
  padding:0.35rem;
}

.center-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.3rem;
}

.pile-wrap{
  width:100%;
  background:var(--card);
  border:2px dashed var(--line);
  border-radius:1rem;
  padding:1.3rem;
  min-height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.pile-count{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--ink);
  margin-bottom:0.9rem;
  font-size:1.1rem;
}

.pile{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-content:flex-start;
  gap:6px;
  max-width:420px;
}

/* ---------- STICK ---------- */
.stick{
  --rot:0deg;
  position:relative;
  width:10px;
  height:70px;
  cursor:pointer;
  transform:rotate(var(--rot));
  transition: transform 0.25s ease, filter 0.25s ease;
  filter:drop-shadow(1px 3px 1px rgba(44,36,32,0.35));
}
.pile .stick:hover{
  transform:rotate(var(--rot)) translateY(-6px) scale(1.08);
}
.stick .shaft{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:5px;
  height:100%;
  border-radius:3px;
  background:linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 100%);
}
.stick .tip{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:11px;
  height:14px;
  border-radius:50% 50% 45% 45%;
  background:radial-gradient(circle at 35% 30%, #ff8a5c, var(--accent) 70%);
}
.stick.selected{
  transform:rotate(var(--rot)) translateY(-14px) scale(1.1);
  filter:drop-shadow(0 3px 6px rgba(193,68,14,0.5));
}
.stick.selected .tip{
  box-shadow:0 0 0 3px var(--accent-soft);
}
.stick.picked-up{
  width:8px;
  height:44px;
  cursor:default;
}
.stick.unclickable{ cursor:default; pointer-events:none; opacity:0.55; }

/* ---------- CONTROLS ---------- */
.controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.8rem;
  min-height:60px;
}

.quick-take{
  display:flex;
  gap:0.7rem;
}

.take-btn{
  background:var(--card);
  border:2px solid var(--ink);
  color:var(--ink);
  font-family:inherit;
  font-weight:600;
  padding:0.55rem 1.15rem;
  border-radius:0.6rem;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.take-btn:hover:not(:disabled){ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--teal); }
.take-btn:active:not(:disabled){ transform:translate(0,0); box-shadow:1px 1px 0 var(--ink); }
.take-btn:disabled{ opacity:0.35; cursor:not-allowed; box-shadow:none; }

.confirm-btn{
  background:var(--accent);
  border:2px solid var(--ink);
  color:var(--paper);
  font-family:inherit;
  font-weight:700;
  padding:0.65rem 1.5rem;
  border-radius:0.7rem;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  animation: pop 0.2s ease;
}
.confirm-btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.confirm-btn.hidden{ display:none; }
@keyframes pop{ from{ transform:scale(0.85); opacity:0; } to{ transform:scale(1); opacity:1; } }

.cpu-thinking{
  color:var(--muted);
  font-style:italic;
}
.cpu-thinking.hidden{ display:none; }
.dots span{ animation: blink 1.4s infinite; opacity:0; }
.dots span:nth-child(2){ animation-delay:0.2s; }
.dots span:nth-child(3){ animation-delay:0.4s; }
@keyframes blink{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }

/* ---------- OVERLAY ---------- */
.overlay{
  position:fixed;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(44,36,32,0.55);
}
.overlay.hidden{ display:none; }

.overlay-card{
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:1rem;
  padding:2.4rem 3rem;
  text-align:center;
  box-shadow:8px 8px 0 var(--ink);
  animation: pop 0.25s ease;
  max-width:90vw;
}
.overlay-emoji{ font-size:3rem; margin-bottom:0.4rem; }
.overlay-card h2{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--ink);
  margin:0.2rem 0;
}
.overlay-card p{ color:var(--muted); margin-bottom:1.6rem; }
.overlay-buttons{ display:flex; flex-direction:column; align-items:center; gap:0.4rem; }

@media (max-width: 800px){
  .board{ grid-template-columns:1fr; }
  .player-panel{ min-height:auto; }
  .collected{ min-height:80px; }
  .mode-card{ transform:none !important; }
}