.tent-play {
  background:
    linear-gradient(90deg, rgba(185,221,124,.24) 0 1px, transparent 1px 100%) 0 0 / 22px 100%,
    linear-gradient(rgba(185,221,124,.24) 0 1px, transparent 1px 100%) 0 0 / 100% 22px,
    #fbfbef;
}
.camp-board {
  --size: 6;
  width:min(100%, 650px);
  margin:0 auto;
  display:grid;
  grid-template-columns: 42px repeat(var(--size), 1fr);
  grid-template-rows: 42px repeat(var(--size), 1fr);
  aspect-ratio: 1;
  border:2px solid var(--ink);
  border-radius:8px;
  background:var(--paper);
  box-shadow:0 16px 30px rgba(23,34,31,.12), 5px 5px 0 var(--ink);
  overflow:hidden;
}
.camp-corner,.camp-count,.camp-cell { display:grid;place-items:center;border-right:1px solid rgba(23,35,31,.13);border-bottom:1px solid rgba(23,35,31,.13); }
.camp-corner,.camp-count { background:#dff2cb;font:950 .9rem/1 ui-monospace,monospace;color:var(--ink); }
.camp-count.satisfied { background:var(--lime); }
.camp-count.over { background:var(--danger-soft);color:var(--danger); }
.camp-cell { position:relative;border:0;border-right:1px solid rgba(23,35,31,.13);border-bottom:1px solid rgba(23,35,31,.13);background:linear-gradient(135deg, rgba(201,231,123,.13), transparent);font:950 clamp(1rem,3.5vw,1.8rem)/1 system-ui;cursor:pointer; }
.camp-cell.tree { cursor:default;background:radial-gradient(circle at 50% 72%, rgba(116,79,45,.13), transparent 28%), #f7f2e6; }
.tree-sprite { position:relative;width:70%;height:76%;display:block;filter:drop-shadow(3px 3px 0 var(--ink)); }
.tree-sprite i { position:absolute;border:2px solid var(--ink);background:var(--lime);border-radius:48% 52% 45% 55%; }
.tree-sprite i:nth-child(1){width:58%;height:49%;left:5%;top:18%;transform:rotate(-12deg)}
.tree-sprite i:nth-child(2){width:62%;height:55%;right:2%;top:10%;background:#bfe16b;transform:rotate(10deg)}
.tree-sprite i:nth-child(3){width:66%;height:52%;left:17%;top:0;background:#d7ef8a;border-radius:52% 48% 58% 42%}
.tree-sprite b { position:absolute;left:43%;bottom:4%;width:17%;height:44%;border:2px solid var(--ink);border-radius:99px;background:#875734;z-index:-1; }
.camp-cell.tent::before { content:""; width:0;height:0;border-left:clamp(14px,3.4vw,25px) solid transparent;border-right:clamp(14px,3.4vw,25px) solid transparent;border-bottom:clamp(25px,6vw,46px) solid var(--coral);filter:drop-shadow(3px 3px 0 var(--ink)); }
.camp-cell.tent::after { content:""; position:absolute; bottom:28%; width:2px; height:22%; background:rgba(23,35,31,.75); transform:rotate(12deg); }
.camp-cell.tent.bad::after { content:"!"; position:absolute; right:7px; top:6px; bottom:auto; width:auto; height:auto; background:transparent; transform:none; color:var(--danger); font:950 .75rem/1 ui-monospace,monospace; }
.camp-cell.hint { animation: camp-hint .7s ease-in-out infinite alternate; }
.tent-pair { position:absolute; inset:14%; border:3px dashed var(--yellow); border-radius:14px; pointer-events:none; }
@keyframes camp-hint { to { background:rgba(245,212,109,.62); box-shadow:inset 0 0 0 4px var(--yellow); } }
@media (max-width:600px){ .camp-board{ grid-template-columns:32px repeat(var(--size),1fr); grid-template-rows:32px repeat(var(--size),1fr); border-radius:8px; } }