/* =============================================================
   GAME: Tents
   ============================================================= */
.board-tents {
  --tn-glow: #66f06a;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.tn-grid {
  --cell: min(calc((100vw - 90px) / (var(--n, 8) + 1)), 46px);
  display: grid; grid-template-columns: repeat(calc(var(--n, 8) + 1), var(--cell)); grid-auto-rows: var(--cell); gap: 2px;
  padding: 6px 8px 8px 6px; border-radius: 16px;
  background: radial-gradient(120% 90% at 50% 0%, #17361d, #0b1a10 70%);
  box-shadow: 0 0 0 2px var(--tn-glow), 0 0 28px rgba(102, 240, 106, .32), 0 12px 30px rgba(0, 0, 0, .4);
}
.tn-corner { display: block; }
.tn-clue {
  border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; border-radius: 8px;
  display: grid; place-items: center; color: #d8ffd6;
  font: 700 calc(var(--cell) * .5) / 1 var(--font-body); font-variant-numeric: tabular-nums;
  transition: color .15s, background .15s, text-shadow .15s;
}
.tn-clue:hover:not(:disabled) { background: rgba(102, 240, 106, .1); }
.tn-clue:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tn-clue:disabled { cursor: default; }
.tn-clue.tn-ok { color: rgba(170, 220, 170, .45); }
.tn-clue.tn-over { color: var(--t-red); text-shadow: 0 0 10px rgba(255, 61, 127, .6); }
.tn-cell {
  position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 5px;
  display: grid; place-items: center; color: #4fae5a;
  background: linear-gradient(180deg, #24432a, #1b3520);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .25);
  transition: background .15s, box-shadow .15s;
}
.tn-cell svg { width: 84%; height: 84%; display: block; pointer-events: none; }
.tn-cell:hover:not(:disabled) { background: linear-gradient(180deg, #2c5333, #213f27); }
.tn-grid:focus-within .tn-cell.tn-line { background: linear-gradient(180deg, #284b2f, #1f3d25); }
.tn-cell:focus { outline: none; }
.tn-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--focus), 0 0 10px rgba(245, 168, 255, .4); z-index: 1; }
.tn-cell.tn-tree { background: linear-gradient(180deg, #1a3a22, #12291a); cursor: default; }
.tn-cell.tn-tree svg { width: 92%; height: 92%; filter: drop-shadow(0 0 4px rgba(95, 224, 138, .35)); }
.tn-cell.tn-tent { background: linear-gradient(180deg, #2f4a2c, #243a22); }
.tn-cell.tn-tent svg { filter: drop-shadow(0 0 5px rgba(255, 138, 61, .45)); }
.tn-cell.tn-grass { background: linear-gradient(180deg, #1d3a22, #15301b); }
.tn-cell.tn-grass svg { width: 70%; height: 70%; opacity: .8; }
.tn-cell.tn-bad { box-shadow: inset 0 0 0 2px rgba(255, 61, 127, .85), 0 0 12px rgba(255, 61, 127, .45); }
.tn-cell.tn-bad svg { filter: drop-shadow(0 0 4px rgba(255, 61, 127, .8)); }
.tn-cell.tn-pop svg { animation: tnpop .28s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tnpop { from { transform: scale(.4); opacity: .2; } }
.tn-cell.tn-bad.tn-pop svg { animation: tnshake .32s ease; }
@keyframes tnshake { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.tn-cell.tn-flash { animation: tnflash .7s ease both; }
@keyframes tnflash { 35% { background: #3f8f46; box-shadow: 0 0 14px rgba(102, 240, 106, .7); } }
.tn-cell.tn-done { animation: tnwin .8s ease both; }
.tn-cell.tn-done.tn-tent { animation-delay: .15s; }
@keyframes tnwin { 50% { background: #3c8a44; } }
.tn-cell:disabled { cursor: default; }
.tn-loading .tn-cell { background: #15281a; animation: tnload 1.2s ease-in-out infinite alternate; }
.tn-loading .tn-cell:nth-child(2n) { animation-delay: .3s; }
@keyframes tnload { to { background: #1d3823; } }

.tn-tools { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-size: .9rem; font-weight: 600; color: var(--ink); }
.tn-legend { display: inline-flex; align-items: center; gap: 6px; }
.tn-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #24432a; }
.tn-ico svg { width: 22px; height: 22px; }
.tn-ico-grass { color: #4fae5a; }
.tn-hint { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; max-width: 360px; }
@media (hover: none) { .tn-desk { display: none; } }
.tn-clock { font-variant-numeric: tabular-nums; }
.tn-count { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .tn-cell, .tn-clue { transition: none; }
}