:root{--night:#202516;--pine:#3e4f35;--moss:#5f7b48;--iron:#232622;--bone:#fff3da;--ash:#dac8a5;--ember:#b85b34;--gold:#d8a84a;--wood-dark:#6f411d;--wood:#b47138;--wood-light:#e0a25d;--cell-one:#dca967;--cell-two:#c68a4f;--throne:#a35a34;--legal:#78a653;--danger:#d05339;--panel:#362b1fe0;--line:#f1e6cf2e;--shadow:#00000061}*{box-sizing:border-box}html{background:var(--night);min-height:100%}body{min-height:100vh;color:var(--bone);background:radial-gradient(at 20% 8%,#ffe6ab57,#0000 34%),radial-gradient(at 72% 88%,#10120c6b,#0000 46%),repeating-linear-gradient(90deg,#ffffff07 0 1px,#0000 1px 48px),linear-gradient(145deg,#323b2a 0%,#3c3d27 52%,#1a1f15 100%);margin:0;font-family:Avenir,Trebuchet MS,system-ui,-apple-system,BlinkMacSystemFont,sans-serif}button,input{font:inherit}button{color:inherit}.shell{width:min(1240px,100vw - 28px);min-height:100vh;margin:0 auto;padding:22px 0 28px}.hero{justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px;display:flex}.brand p,.eyebrow{color:var(--gold);letter-spacing:.16em;text-transform:uppercase;margin:0;font-size:12px;font-weight:900}.brand h1{letter-spacing:0;text-shadow:0 5px #00000038;margin:4px 0 2px;font-family:Georgia,Times New Roman,serif;font-size:clamp(44px,8vw,86px);line-height:.86}.brand span{color:var(--ash);font-size:15px}.brand small{color:#fff3dad1;margin-top:7px;font-size:13px;font-weight:800;display:block}.brand .version{color:#d8a84ae6;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;font-size:12px}.notice{border:1px solid var(--line);width:min(440px,100%);min-height:48px;box-shadow:0 12px 36px var(--shadow);color:var(--ash);background:#2d251cbd;align-items:center;padding:11px 14px;display:grid}.notice.good{color:#d9f1bf;border-color:#78a6538c}.notice.warn{color:#ffd8ce;border-color:#d05339a8}.game-layout{grid-template-columns:minmax(330px,1fr) 360px;align-items:start;gap:24px;display:grid}.board-stage{place-items:center;min-width:0;display:grid}.rune-frame{aspect-ratio:1;background:url(/assets/hnefatafl-board-exact-v112.png) 50%/100% 100% no-repeat;border:0;width:min(100%,780px);padding:0;position:relative;box-shadow:0 26px 70px #00000080,0 3px #2a1608c7}.rune-frame:before,.rune-frame:after{content:"";pointer-events:none;border:0;position:absolute;inset:0}.rune-frame:before{display:none}.frame-band{z-index:0;pointer-events:none;color:#ffeeb8b8;text-shadow:0 1px #4b260fd1,0 0 10px #ffe8ae38;filter:drop-shadow(0 1px #411f0ac7);display:none;position:absolute}.frame-band-top,.frame-band-bottom{opacity:.96;background:radial-gradient(at 8%,#0000 0 25%,#ffe6a8d1 26% 31%,#49230c80 32% 35%,#0000 36%),radial-gradient(at 22%,#0000 0 25%,#ffe6a8ad 26% 31%,#49230c6b 32% 35%,#0000 36%),radial-gradient(at 36%,#0000 0 25%,#ffe6a8d1 26% 31%,#49230c80 32% 35%,#0000 36%),radial-gradient(#0000 0 25%,#ffe6a8ad 26% 31%,#49230c6b 32% 35%,#0000 36%),radial-gradient(at 64%,#0000 0 25%,#ffe6a8d1 26% 31%,#49230c80 32% 35%,#0000 36%),radial-gradient(at 78%,#0000 0 25%,#ffe6a8ad 26% 31%,#49230c6b 32% 35%,#0000 36%),radial-gradient(at 92%,#0000 0 25%,#ffe6a8d1 26% 31%,#49230c80 32% 35%,#0000 36%),repeating-linear-gradient(135deg,#0000 0 12px,#ffebb2b3 13px 17px,#49230c57 18px 20px,#0000 21px 34px),repeating-linear-gradient(45deg,#0000 0 12px,#602d0f75 13px 17px,#ffebb266 18px 20px,#0000 21px 34px),linear-gradient(#ffeab33d,#50270e38);border:2px solid #ffdd9157;height:clamp(34px,4.7vw,52px);left:clamp(76px,10vw,112px);right:clamp(76px,10vw,112px);box-shadow:inset 0 2px 4px #fff3d147,inset 0 -4px 7px #461f0975,0 1px #ffecbc3d}.frame-band-top{top:clamp(12px,2vw,20px)}.frame-band-bottom{bottom:clamp(12px,2vw,20px);transform:scaleX(-1)}.frame-band-left,.frame-band-right{opacity:.96;background:radial-gradient(at 50% 8%,#0000 0 25%,#ffe6a8c7 26% 31%,#49230c7a 32% 35%,#0000 36%),radial-gradient(at 50% 22%,#0000 0 25%,#ffe6a8a3 26% 31%,#49230c66 32% 35%,#0000 36%),radial-gradient(at 50% 36%,#0000 0 25%,#ffe6a8c7 26% 31%,#49230c7a 32% 35%,#0000 36%),radial-gradient(#0000 0 25%,#ffe6a8a3 26% 31%,#49230c66 32% 35%,#0000 36%),radial-gradient(at 50% 64%,#0000 0 25%,#ffe6a8c7 26% 31%,#49230c7a 32% 35%,#0000 36%),radial-gradient(at 50% 78%,#0000 0 25%,#ffe6a8a3 26% 31%,#49230c66 32% 35%,#0000 36%),radial-gradient(at 50% 92%,#0000 0 25%,#ffe6a8c7 26% 31%,#49230c7a 32% 35%,#0000 36%),repeating-linear-gradient(45deg,#0000 0 12px,#ffebb2a3 13px 17px,#49230c57 18px 20px,#0000 21px 34px),repeating-linear-gradient(-45deg,#0000 0 12px,#602d0f6b 13px 17px,#ffebb25c 18px 20px,#0000 21px 34px),linear-gradient(90deg,#ffeab338,#50270e33);border:2px solid #ffdd914d;width:clamp(34px,4.7vw,52px);top:clamp(76px,10vw,112px);bottom:clamp(76px,10vw,112px);box-shadow:inset 2px 0 4px #fff3d13d,inset -4px 0 7px #461f096b,0 1px #ffecbc38}.frame-band-left{left:clamp(12px,2vw,20px);transform:rotate(180deg)}.frame-band-right{right:clamp(12px,2vw,20px)}.corner-carving{z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 50%, #ffe8a933 0 10%, transparent 11%), radial-gradient(ellipse at 50% 22%, transparent 0 18%, #ffe6a8c7 19% 24%, #4d240c6b 25% 28%, transparent 29%), radial-gradient(ellipse at 22% 62%, transparent 0 18%, #ffe6a8b8 19% 24%, #4d240c61 25% 28%, transparent 29%), radial-gradient(ellipse at 78% 62%, transparent 0 18%, #ffe6a8b8 19% 24%, #4d240c61 25% 28%, transparent 29%), conic-gradient(from 45deg, #ffe6a880 0 4%, transparent 5% 20%, #ffe6a86b 21% 25%, transparent 26% 45%, #ffe6a880 46% 50%, transparent 51% 70%, #ffe6a86b 71% 75%, transparent 76% 100%), linear-gradient(135deg, #cd7b3666, #56290e61);border:2px solid #ffe19959;width:clamp(58px,8.2vw,92px);height:clamp(58px,8.2vw,92px);display:none;position:absolute;box-shadow:inset 3px 3px 8px #ffefc53d,inset -5px -6px 10px #411d0880,0 2px 3px #31160773}.corner-carving-nw{top:clamp(14px,2.2vw,24px);left:clamp(14px,2.2vw,24px)}.corner-carving-ne{top:clamp(14px,2.2vw,24px);right:clamp(14px,2.2vw,24px);transform:rotate(90deg)}.corner-carving-se{bottom:clamp(14px,2.2vw,24px);right:clamp(14px,2.2vw,24px);transform:rotate(180deg)}.corner-carving-sw{bottom:clamp(14px,2.2vw,24px);left:clamp(14px,2.2vw,24px);transform:rotate(270deg)}.rune-frame:after{display:none}.board{z-index:1;width:75.44%;height:75.44%;box-shadow:none;background:0 0;border:0;grid-template-rows:repeat(11,1fr);grid-template-columns:repeat(11,1fr);gap:0;display:grid;position:absolute;top:11.48%;left:12.2%}.cell{cursor:pointer;background:0 0;border:0;place-items:center;min-width:0;min-height:0;padding:0;display:grid;position:relative}.cell:nth-child(2n){background:0 0}.cell.special{box-shadow:none;background:0 0}.cell:before{content:"";opacity:0;border:1px solid #5a3016bf;position:absolute;inset:12%;transform:rotate(45deg)}.cell.corner:before,.cell.throne:before,.cell.corner:after,.cell.throne:after{display:none}.cell.throne:after{background:radial-gradient(at 50% 18%,#0000 0 17%,#ffe6a8c7 18% 23%,#4d240c70 24% 27%,#0000 28%),radial-gradient(at 26% 68%,#0000 0 17%,#ffe6a8b3 18% 23%,#4d240c61 24% 27%,#0000 28%),radial-gradient(at 74% 68%,#0000 0 17%,#ffe6a8b3 18% 23%,#4d240c61 24% 27%,#0000 28%),repeating-linear-gradient(45deg,#0000 0 7px,#ffe6a86b 8px 10px,#0000 11px 18px),repeating-linear-gradient(-45deg,#0000 0 7px,#50240c57 8px 10px,#0000 11px 18px)}.cell.capture.corner:after,.cell.capture.throne:after{border-color:var(--danger);box-shadow:none;border-radius:0;transform:rotate(45deg)}.cell:disabled{cursor:default}.cell.selected{outline-offset:-5px;background:#ffe07f1f;outline:4px solid #d8a84af2}.cell.legal{outline-offset:-5px;background:#78a65333;outline:4px solid #78a653f2}.cell.capture:after{content:"";border:2px solid var(--danger);opacity:1;width:28%;height:28%;position:absolute;transform:rotate(45deg)}.piece{z-index:1;border:2px solid #0000006b;border-radius:50%;width:72%;height:72%;position:relative;box-shadow:inset 10px 9px 12px #ffffff42,inset -12px -14px 18px #00000057,8px 10px 13px #0000005c}.piece:before{content:"";background:radial-gradient(circle at 38% 30%,#fff7d2 0 12%,#0000 13%),radial-gradient(circle,#cfba7ef2,#644d29eb);border:1px solid #2d1f127a;border-radius:50%;width:28%;height:28%;position:absolute;top:17%;left:31%;box-shadow:0 2px 3px #00000057,inset 0 -2px 3px #412a1447}.piece.attacker{background:radial-gradient(circle at 28% 20%,#7d847a 0 10%,#0000 23%),radial-gradient(circle,#111412 0 17%,#0000 18%),radial-gradient(circle,#0000 0 39%,#bec9b82e 40% 44%,#0000 45%),linear-gradient(145deg,#353a34,#0b0d0b);border-color:#080908d1}.piece.attacker:after{content:"";border:2px solid #bec9b83d;border-radius:50%;position:absolute;inset:26%;box-shadow:0 0 0 3px #00000029}.piece.defender{background:linear-gradient(45deg,#0000 45%,#79593038 46% 48%,#0000 49%),linear-gradient(-45deg,#0000 45%,#7959302e 46% 48%,#0000 49%),radial-gradient(circle at 28% 22%,#fffdf0 0 12%,#0000 24%),radial-gradient(circle at 70% 75%,#87673d2e,#0000 26%),linear-gradient(145deg,#fff0d4,#c4a36a);border-color:#5c3f1c94}.piece.defender:after{content:"";border:1px solid #694c264d;border-radius:50%;position:absolute;inset:21%;transform:rotate(45deg)}.piece.king{background:radial-gradient(circle at 29% 22%,#fff9bee6 0 10%,#0000 21%),radial-gradient(circle,#0000 0 39%,#ffeb7e59 40% 45%,#0000 46%),radial-gradient(circle at 50% 55%,#f1bc4d 0 26%,#b96920 56%,#744014 100%);border:3px solid #5c3614f2;border-radius:50%;width:82%;height:82%;box-shadow:0 0 0 3px #ffe07f4d,inset 12px 10px 14px #ffffff57,inset -13px -16px 20px #5d300c6b,10px 13px 17px #00000075}.piece.king:before{content:"";clip-path:polygon(0 100%,0 38%,18% 67%,34% 24%,50% 0,66% 24%,82% 67%,100% 38%,100% 100%);filter:drop-shadow(0 2px 1px #562d0d9e);background:radial-gradient(circle at 8% 16%,#fff2a8 0 8%,#0000 9%),radial-gradient(circle at 50% 0,#fff2a8 0 10%,#0000 11%),radial-gradient(circle at 92% 16%,#fff2a8 0 8%,#0000 9%),linear-gradient(#ffe083,#b87222);height:34%;position:absolute;top:30%;left:18%;right:18%}.piece.king:after{content:"";background:radial-gradient(circle at 20%,#fff0a8 0 7%,#0000 8%),radial-gradient(circle,#fff0a8 0 7%,#0000 8%),radial-gradient(circle at 80%,#fff0a8 0 7%,#0000 8%),linear-gradient(#8a4c17,#5e2e0e);border-radius:3px;height:15%;position:absolute;top:56%;left:20%;right:20%;box-shadow:inset 0 1px #ffffff57,0 1px 2px #00000059}.side-panel{gap:12px;display:grid}.status-card,.actions,.game-controls,.side-choice,.difficulty-choice,.counts,.help-action,.saga-log{border:1px solid var(--line);background:linear-gradient(135deg, #ffffff0b, transparent 42%), var(--panel);box-shadow:0 16px 46px var(--shadow)}.status-card{padding:18px}.status-card strong{margin-top:7px;font-size:24px;line-height:1.05;display:block}.status-card p{color:var(--ash);margin:9px 0 0;line-height:1.4}.actions,.game-controls{background:var(--line);grid-template-columns:1fr 1fr;gap:1px;display:grid}.actions button,.game-controls button,.side-choice button,.difficulty-choice button,.help-action,.invite{cursor:pointer;background:#37452cd1;border:0;min-height:46px;font-weight:900}.actions button:hover,.game-controls button:hover,.side-choice button:hover,.difficulty-choice button:hover,.help-action:hover,.invite:hover{background:#6f572beb}.game-controls .danger-action{background:#8b3726e6}.game-controls .danger-action:hover{background:#b3452ff2}button:disabled{opacity:.48;cursor:not-allowed}.side-choice{padding:12px}.side-choice>span,.difficulty-choice>span{color:var(--ash);margin-bottom:8px;font-size:13px;display:block}.side-choice div,.difficulty-choice div{grid-template-columns:1fr 1fr;gap:8px;display:grid}.difficulty-choice{padding:12px}.difficulty-choice div{grid-template-columns:repeat(3,1fr)}.side-choice button,.difficulty-choice button{border:1px solid var(--line)}.side-choice button[aria-pressed=true],.difficulty-choice button[aria-pressed=true]{background:var(--gold);color:#19150e}.invite{background:#b85b34d1;border:1px solid #d2a2426b}.help-action{border:1px solid #d2a2425c}.help-overlay{z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0d0e0bad;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.rules-dialog{background:linear-gradient(135deg,#ffffff0e,#0000 44%),#362b1ff5;border:1px solid #d2a2426b;width:min(620px,100%);max-height:min(720px,100vh - 36px);padding:18px;overflow:auto;box-shadow:0 26px 90px #00000094}.rules-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.rules-head button{border:1px solid var(--line);min-height:38px;color:var(--bone);cursor:pointer;background:#37452cd1;padding:0 13px;font-weight:900}.rules-head button:hover{background:#6f572beb}.rules-dialog h2{letter-spacing:0;margin:12px 0;font-family:Georgia,Times New Roman,serif;font-size:34px;line-height:1}.rules-dialog ul{color:var(--ash);gap:10px;margin:0;padding-left:20px;line-height:1.45;display:grid}.rules-dialog li::marker{color:var(--gold)}.counts{grid-template-columns:repeat(3,1fr);display:grid}.counts div{text-align:center;border-right:1px solid var(--line);min-width:0;padding:13px 8px}.counts div:last-child{border-right:0}.counts b{font-size:28px;line-height:1;display:block}.counts span{color:var(--ash);font-size:12px}.saga-log{min-height:170px;max-height:230px;padding:14px;overflow:auto}.saga-log p{color:var(--ash);margin:8px 0 0;font-family:SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.35}@media (max-width:960px){.hero{flex-direction:column;align-items:stretch}.game-layout{grid-template-columns:1fr}.side-panel{grid-template-columns:1fr 1fr}.status-card,.saga-log{grid-column:1/-1}}@media (max-width:620px){.shell{width:min(100vw - 16px,780px);padding-top:12px}.side-panel{grid-template-columns:1fr}.brand h1{font-size:44px}.actions,.game-controls,.side-choice div{grid-template-columns:1fr}}