/* The Hnefatafl board and pieces, shared by games/hnefatafl.html and the profile preview.
   The look comes from CSS variables set by js/shared/hnefatafl-look.js:
   --tb-bg, --tb-line, --tb-special, --piece-black, --piece-white, and .t3d (3D pieces). */
.tboard{display:grid;grid-template-columns:repeat(11,1fr);gap:1px;width:100%;max-width:600px;margin:0 auto;aspect-ratio:1;padding:3px;background:var(--tb-line,#9c7a45);border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.4);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.tsq{position:relative;border:0;padding:0;margin:0;aspect-ratio:1;min-width:0;background:var(--tb-bg,#e3c894);cursor:pointer}
.tboard{container-type:inline-size}
.tsq .co{position:absolute;z-index:2;font-size:max(7px,1.8cqw);font-weight:700;line-height:1;color:var(--tb-line,#9c7a45);opacity:.9;pointer-events:none}
.tsq .co.rk{left:5%;top:4%}
.tsq .co.fl{right:6%;bottom:4%}
.tsq:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;z-index:2}
/* The throne and the corners: only the king may stop there */
.tsq.throne,.tsq.corner{background:color-mix(in srgb,var(--tb-special,#b5854a) 55%,var(--tb-bg,#e3c894))}
.tsq.throne::before,.tsq.corner::before{content:'';position:absolute;inset:18%;border:2px solid var(--tb-special,#b5854a);transform:rotate(45deg);pointer-events:none;opacity:.8}

.tsq .piece{position:absolute;inset:12%;border-radius:50%;pointer-events:none;transform:scale(0);transition:transform .12s;display:grid;place-items:center}
.tsq.a .piece,.tsq.d .piece{transform:scale(1)}
.tsq.a .piece{background:var(--piece-black,#1b1b1b);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 2px 0 rgba(0,0,0,.3)}
.tsq.d .piece{background:var(--piece-white,#f2efe6);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 2px 0 rgba(0,0,0,.3)}
/* The king: bigger, with a crown */
.tsq.k .piece{inset:6%;box-shadow:0 0 0 2px var(--piece-black,#1b1b1b),0 2px 0 rgba(0,0,0,.3)}
.tsq.k .piece::after{content:'\265A\FE0E';font-family:'Segoe UI Symbol','DejaVu Sans',serif;font-size:clamp(11px,3.4vw,26px);line-height:1;color:var(--piece-black,#1b1b1b)}

/* 3D pieces (reward for a win on Medium) */
.t3d .tsq.a .piece{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--piece-black,#1b1b1b),#fff 42%) 0,var(--piece-black,#1b1b1b) 52%,color-mix(in srgb,var(--piece-black,#1b1b1b),#000 45%) 100%);box-shadow:1px 3px 4px rgba(0,0,0,.55)}
.t3d .tsq.d .piece{background:radial-gradient(circle at 35% 30%,#fff 0,var(--piece-white,#f2efe6) 45%,color-mix(in srgb,var(--piece-white,#f2efe6),#000 30%) 100%);box-shadow:1px 3px 4px rgba(0,0,0,.55)}
.t3d .tsq.k .piece{box-shadow:0 0 0 2px var(--piece-black,#1b1b1b),1px 4px 5px rgba(0,0,0,.55)}

/* The chosen piece, where it can go (only on the player's turn), the last move, captures */
.tsq.sel{background:color-mix(in srgb,var(--green) 45%,var(--tb-bg,#e3c894))}
.tboard.mine .tsq.to::after{content:'';position:absolute;inset:38%;border-radius:50%;background:rgba(0,0,0,.3);pointer-events:none}
.tsq.from,.tsq.last{box-shadow:inset 0 0 0 3px rgba(229,57,53,.75)}
.tsq.from{box-shadow:inset 0 0 0 2px rgba(229,57,53,.45)}
.tsq.gone::after{content:'';position:absolute;inset:20%;border-radius:50%;border:3px solid #e53935;animation:tb-gone .6s ease forwards;pointer-events:none}
@keyframes tb-gone{0%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}
.tsq.pending .piece{opacity:.6}
@media (prefers-reduced-motion:reduce){.tsq .piece{transition:none}.tsq.gone::after{animation:none;opacity:0}}