.hf-game{--wood:#b9854c;--dark:#332318;--gold:#d9a532;max-width:980px;margin:1.5rem auto;padding:clamp(14px,3vw,28px);border-radius:24px;background:linear-gradient(145deg,#eee3d3,#d8c4a8);box-shadow:0 20px 50px #2e1e1530;color:#2d211a;box-sizing:border-box}
.hf-game *{box-sizing:border-box}.hf-game [hidden]{display:none!important}
.hf-setup h2{margin:0 0 1rem}.hf-setup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}.hf-setting{display:grid;gap:5px}.hf-setting select{width:100%;padding:.65rem .75rem;border:1px solid #8a6a45;border-radius:9px;background:#fff;color:inherit}.hf-setting select:disabled{opacity:.7}.hf-start{margin-top:18px}
.hf-btn{border:1px solid #97734f;border-radius:11px;background:#f7eee2;color:#3d2a1c;padding:.7rem 1rem;cursor:pointer}.hf-btn-primary{background:#664225;color:#fff;border-color:#55361e}
.hf-status{margin:0 0 14px;padding:10px 0;border-bottom:1px solid #bba78e;height:2.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hf-board-wrap{width:min(100%,820px);margin:0 auto}.hf-board{aspect-ratio:1;display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);border:7px solid #553a24;border-radius:8px;padding:5px;background:linear-gradient(90deg,#6b4629,#a06d3d 7%,#c28d52 50%,#9d693b 93%,#5a3b25);box-shadow:inset 0 0 0 2px #e1b477,inset 0 0 35px #43291570,0 14px 26px #422d1d45}
.hf-cell{position:relative;padding:0;border:1px solid #5f3f2755;background:linear-gradient(145deg,#d6aa6f,#b77e43);min-width:0;cursor:pointer}.hf-cell:nth-child(odd){background:linear-gradient(145deg,#dcb67f,#bd8750)}.hf-cell:hover{filter:brightness(1.08)}.hf-cell.is-selected{outline:4px solid #fff1a8;outline-offset:-5px;z-index:2}.hf-cell.is-legal:after{content:"";position:absolute;z-index:1;width:24%;aspect-ratio:1;border-radius:50%;left:38%;top:38%;background:#fff2a9;box-shadow:0 0 0 3px #593b2255,0 0 12px #fff1a8}.hf-cell.hf-corner{background:radial-gradient(circle,#f2d274 0 22%,#bd8737 24% 55%,#6c451f 58%);box-shadow:inset 0 0 0 3px #f2cf6a}.hf-cell.hf-corner:before{content:"ᛟ";position:absolute;inset:0;display:grid;place-items:center;color:#4b2d13}.hf-cell.hf-throne{background:radial-gradient(circle,#d8ad50 0 25%,#8c5e29 28% 56%,#4c311b 58%)}.hf-cell.hf-throne:before{content:"ᛏ";position:absolute;inset:0;display:grid;place-items:center;color:#f5dda1}.hf-piece{position:absolute;z-index:3;width:72%;height:72%;left:14%;top:12%;border-radius:50%;box-sizing:border-box}.hf-attacker{background:radial-gradient(circle at 34% 27%,#9a795d 0 8%,#42342b 18%,#171412 62%,#080707 100%);border:2px solid #060505;box-shadow:inset 0 3px 5px #b7957350,0 4px 6px #24160f80}.hf-attacker:after{content:"⚔";position:absolute;inset:0;display:grid;place-items:center;color:#c9b092;text-shadow:0 1px #000}.hf-defender{background:radial-gradient(circle at 34% 27%,#fff2c8 0 9%,#d8bf88 21%,#8f744d 67%,#5b462f 100%);border:2px solid #5a4127;box-shadow:inset 0 3px 5px #fff8de99,0 4px 6px #24160f70}.hf-defender:after{content:"◆";position:absolute;inset:0;display:grid;place-items:center;color:#f4dfaa;text-shadow:0 1px 2px #3a2719}.hf-king{width:82%;height:82%;left:9%;top:7%;background:radial-gradient(circle at 35% 24%,#fffbd6 0 9%,#e7bb3d 20%,#a26c13 66%,#65410c 100%);border:3px solid #5c3b0a;box-shadow:inset 0 4px 6px #fff2a6,0 5px 9px #2b1b0c88}.hf-king:after{content:"♛";position:absolute;inset:-8% 0 0;display:grid;place-items:center;color:#fff1a0;text-shadow:0 2px 2px #5f3b0b}.hf-board.is-busy .hf-cell{cursor:not-allowed}
.hf-rules{margin-top:16px;border-top:1px solid #bba78e;padding-top:12px}.hf-rules summary{cursor:pointer}.hf-rules p{color:#655241}
.hf-lightbox[hidden]{display:none!important}.hf-lightbox{position:fixed;inset:0;z-index:99999;background:#16100bd9;display:grid;place-items:center;padding:18px;backdrop-filter:blur(4px)}.hf-dialog{width:min(92vw,520px);text-align:center;border-radius:24px;padding:26px;background:linear-gradient(#fffaf0,#ead4af);box-shadow:0 28px 70px #0009;border:2px solid #bb8b48}.hf-result-symbol{color:#9a6a16}.hf-result-kicker{color:#8c6532}.hf-dialog h3{margin:.2rem 0}.hf-dialog p{color:#614c37}.hf-dialog-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
@media(max-width:760px){.hf-game{margin:.5rem -4px;padding:12px;border-radius:16px}.hf-setup-grid{grid-template-columns:1fr}.hf-board{border-width:5px;padding:3px}.hf-piece{width:78%;height:78%;left:11%;top:10%}.hf-king{width:86%;height:86%;left:7%;top:6%}}

/* 0.14.31: viewport-basiertes Brett und echte Gegnerwahl. */
.hf-setting input{width:100%;padding:.65rem .75rem;border:1px solid #8a6a45;border-radius:9px;background:#fff;color:inherit}
.hf-setup-status{margin-top:12px;min-height:1.5em}
.hf-board-wrap{width:min(100%,var(--hf-board-size,820px));height:var(--hf-board-size,auto);max-width:none}
.hf-board{width:100%;height:100%;aspect-ratio:1}
@media (orientation:landscape){.hf-play{min-height:0}.hf-status{margin-bottom:8px;padding-top:6px;padding-bottom:6px}.hf-rules{margin-top:8px}}
@media (orientation:portrait){.hf-board-wrap{width:min(100%,var(--hf-board-size,100%));height:var(--hf-board-size,auto)}}

/* 0.14.32: Neustart nach Spielende direkt am Brett. */
.hf-end-actions{display:flex;justify-content:center;margin-top:12px}

/* 0.16.88: animierte KI-gegen-KI-Vorführung. */
.hf-board-wrap{position:relative}
.hf-demo-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.hf-demo-controls[hidden]{display:none!important}
.hf-demo-controls [data-demo-move-count]{color:#655241;min-width:5.5em}
.hf-demo-moving{position:absolute!important;z-index:20!important;margin:0!important;pointer-events:none!important;transition:transform var(--hf-demo-duration,440ms) cubic-bezier(.22,.72,.2,1);will-change:transform;box-shadow:0 8px 14px #24160f66!important}


/* 0.8.1: Letzten Zug dezent markieren, bis der nächste Spieler eine eigene Figur auswählt. */
.hf-cell.is-last-from:not(.is-selected){
  box-shadow:inset 0 0 0 3px rgba(74,54,34,.32);
}
.hf-cell.is-last-to:not(.is-selected){
  box-shadow:inset 0 0 0 3px rgba(255,238,170,.72),inset 0 0 12px rgba(255,235,157,.18);
}
.hf-cell.is-last-from:not(.is-selected):after{
  content:"";
  position:absolute;
  z-index:2;
  width:12%;
  aspect-ratio:1;
  left:44%;
  top:44%;
  border-radius:50%;
  background:rgba(74,54,34,.45);
  pointer-events:none;
}