/* All visible board artwork, nodes, icons, frames, buttons and lines are Higgsfield assets.
   CSS only places hit regions, crops that supplied skin for state feedback, and fits live copy. */
*{box-sizing:border-box}body{margin:0;background:#05090b;color:#c6edf2;font-family:Arial,sans-serif}main{max-width:1920px;margin:auto}#boardViewport{overflow:auto}#board{position:relative;width:100%;min-width:1100px;aspect-ratio:1344/752;container-type:inline-size}.board-skin{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}#tree,#detail{position:absolute;inset:0;pointer-events:none}.socket,.hit{position:absolute;border:0;background:transparent;padding:0;color:inherit;font:inherit;cursor:pointer;pointer-events:auto}.socket{overflow:hidden}.socket img{position:absolute;max-width:none;pointer-events:none}.socket.locked img{filter:brightness(.55) saturate(.5)}.socket.learned img{filter:brightness(1.28)}.socket.selected img,.socket:hover img{filter:brightness(1.4)}.socket:focus-visible,.hit:focus-visible{outline:2px solid white;outline-offset:2px}.hit:disabled{cursor:default}.home{left:4%;top:1%;width:15%;height:4.5%}.field-guide{left:22%;top:1%;width:11%;height:4.5%}#startLesson,#finishLesson{left:65.7%;top:7.8%;width:10.5%;height:6.8%}#reset{left:77%;top:7.8%;width:10.4%;height:6.8%}#points{position:absolute;left:90%;top:9%;width:6.5%;text-align:center;font-size:1.25cqw;line-height:1.2}#unlock{left:84.4%;top:79.3%;width:13.2%;height:10%}#unlock:disabled{backdrop-filter:brightness(.5) saturate(.5)}#showRules{left:1%;top:94.5%;width:19%;height:4.5%}#detail h2{position:absolute;left:66%;top:79.7%;width:17.1%;margin:0;font-size:1.22cqw;line-height:1.2;font-weight:normal}.effect-copy{position:absolute;left:10.8%;top:78%;width:32.4%;font-size:1cqw;line-height:1.35}.effect-copy p{margin:0 0 .45cqw}.effect-copy p:first-child{font-size:.78cqw}.effect-copy p:last-child{font-size:.84cqw}.ap-value,.cooldown-value,.requires-value{position:absolute;left:71.4%;width:11.5%;font-size:.82cqw;line-height:1.1}.ap-value{top:85%}.cooldown-value{top:87%}.requires-value{top:89.2%}#feedback,.notice,#rules{font-size:13px;line-height:1.5;margin:8px 18px}#feedback:empty{display:none}.notice{opacity:.75}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){#boardVideo{display:none}}

.medallion{position:absolute;top:14.36%;width:4.76%;height:8.51%;pointer-events:auto}.medallion.ranger{left:11.9%}.medallion.assaulter{left:42.26%}.medallion.vanguard{left:72.84%}.medallion canvas{width:100%;height:100%;display:block}



/* Mask the state crop at the actual node, never its rectangular surrounding board. */
.socket{clip-path:ellipse(35% 40% at 50% 43%)}
#boardVideo{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 93%,97% 93%,97% 5%,3% 5%,3% 93%,0 93%)}