/* Hnefatafl — Viking Tafl. Themed to ancientgames.org palette. */
.hnef-wrap{
    --h-primary:#8B4513;--h-secondary:#C19A6B;--h-accent:#B8860B;
    --h-bg:#FDF8F0;--h-ink:#2C1810;--h-panel:#F5EDE0;--h-line:#D4C4A8;
    max-width:600px;margin:2rem auto;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--h-ink);
}
.hnef-wrap *{box-sizing:border-box}
.hnef-topbar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}
.hnef-side{display:inline-flex;border:2px solid var(--h-secondary);border-radius:999px;overflow:hidden}
.hnef-side-btn{background:var(--h-panel);color:var(--h-primary);border:none;padding:.45rem .85rem;font-weight:600;cursor:pointer;font-size:.8rem;line-height:1}
.hnef-side-btn.is-active{background:var(--h-primary);color:#fff}
.hnef-sound-btn{background:var(--h-panel);border:2px solid var(--h-secondary);border-radius:50%;width:2.4rem;height:2.4rem;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}
.hnef-sound-btn .hnef-snd-on{display:none}
.hnef-sound-btn[aria-pressed="true"] .hnef-snd-on{display:inline}
.hnef-sound-btn[aria-pressed="true"] .hnef-snd-off{display:none}
.hnef-status{text-align:center;font-size:1.02rem;font-weight:600;color:var(--h-primary);min-height:1.5em;margin:.25rem 0 .75rem}
.hnef-board-shell{position:relative;width:100%}
.hnef-canvas{display:block;width:100%;max-width:550px;margin:0 auto;aspect-ratio:1/1;
    background:#E9D8B5;border:3px solid var(--h-primary);border-radius:8px;
    box-shadow:0 6px 20px rgba(44,24,16,.18);cursor:pointer;touch-action:manipulation}
.hnef-winmodal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(44,24,16,.55);border-radius:8px}
.hnef-winmodal[hidden]{display:none}
.hnef-winmodal-card{background:var(--h-bg);border:3px solid var(--h-accent);border-radius:12px;padding:1.5rem 1.75rem;text-align:center;max-width:80%;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.hnef-win-title{margin:.2rem 0 .4rem;color:var(--h-primary);font-size:1.4rem}
.hnef-win-sub{margin:0 0 1rem;font-size:.95rem}
.hnef-hud{display:flex;justify-content:space-between;gap:.5rem;margin:1rem 0 .5rem;font-size:.88rem}
.hnef-dot{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;vertical-align:middle;margin-right:.2rem;border:2px solid rgba(0,0,0,.2)}
.hnef-dot-att{background:#3a2c22}.hnef-dot-def{background:#f3ead6}
.hnef-controls{display:flex;justify-content:center;margin:.5rem 0}
.hnef-new-btn,.hnef-again-btn{border:none;border-radius:6px;font-weight:700;cursor:pointer;font-size:1rem;padding:.7rem 1.6rem;color:#fff}
.hnef-new-btn{background:var(--h-primary)}.hnef-new-btn:hover{background:#73380f}
.hnef-again-btn{background:var(--h-accent)}.hnef-again-btn:hover{background:#a6790a}
.hnef-rules{margin-top:1rem;background:var(--h-panel);border:1px solid var(--h-line);border-radius:8px;padding:.4rem 1rem}
.hnef-rules summary{cursor:pointer;font-weight:700;color:var(--h-primary);padding:.4rem 0}
.hnef-rules-body{font-size:.9rem;line-height:1.6;padding-bottom:.6rem}
.hnef-disclaimer{background:#fff;border-left:3px solid var(--h-accent);padding:.5rem .75rem;border-radius:4px;font-size:.85rem}
@media (max-width:480px){
    .hnef-wrap{margin:1.25rem auto}
    .hnef-side-btn{padding:.45rem .6rem;font-size:.72rem}
    .hnef-status{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){.hnef-winmodal{animation:none}}
/* Collapsible FAQ (shared style, matches casino pages) */
details.ag-faq{background:#fff;border:1px solid #d8cfc0;border-radius:6px;margin:0 0 10px;overflow:hidden}
details.ag-faq summary{cursor:pointer;list-style:none;padding:14px 44px 14px 18px;position:relative;font-weight:700;color:#2C1810;font-size:16px;line-height:1.4;user-select:none}
details.ag-faq summary h3,details.ag-faq summary .ag-faq-q{display:inline;margin:0;padding:0;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit}
details.ag-faq summary::-webkit-details-marker{display:none}
details.ag-faq summary::after{content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;font-weight:400;color:#B8860B;border:1px solid #C19A6B;border-radius:50%;transition:transform .2s ease}
details.ag-faq[open] summary::after{content:'\2212';transform:translateY(-50%)}
details.ag-faq summary:hover{background:#f5efe3}
details.ag-faq .ag-faq-body{padding:0 18px 14px;color:#2C1810;font-size:15px;line-height:1.6;border-top:1px solid #d8cfc0}
details.ag-faq .ag-faq-body p{margin:12px 0 0}