.st.window{color:var(--color-white);background:var(--color-black)}.st__bar{justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);font-family:var(--font-pixel);text-transform:uppercase;color:var(--color-black);background:var(--color-white);font-size:10px;display:flex}.st__sp{align-items:center;gap:var(--space-1);display:flex}.st__sp-meter{background:var(--color-black);width:120px;height:10px;padding:2px;display:block}.st__sp-meter i{background:repeating-linear-gradient(to right, var(--color-white) 0 6px, transparent 6px 8px);height:100%;animation:.9s steps(10,end) both st-fill;display:block}.st__keys{gap:4px;display:flex}.st__keys .keycap{scale:.8}.st__body{align-items:center;gap:var(--space-3);padding:var(--space-3);background:linear-gradient(var(--color-gray-800) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, var(--color-gray-800) 1px, transparent 1px) 0 0 / 16px 16px, var(--color-black);grid-template-columns:minmax(0,1fr) 320px;display:grid}.hex{width:100%;max-width:680px;margin:0 auto;position:relative}.hex__cell{--edge:var(--color-gray-600);--face:var(--color-gray-800);font:inherit;color:var(--color-gray-300);background:var(--edge);clip-path:polygon(50% 2%,97% 26%,97% 74%,50% 98%,3% 74%,3% 26%);cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;padding:0;transition:translate .15s steps(2,end),color .15s steps(2,end),background-color .15s steps(2,end);display:block;position:absolute}.hex__inner{background:var(--face);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);flex-direction:column;justify-content:center;align-items:center;gap:4px;transition:background-color .15s steps(2,end);display:flex;position:absolute;inset:4px}.hex__cell--empty{--edge:var(--color-gray-800);background:var(--edge);cursor:default}.hex__cell--empty:after{content:"";background:var(--color-black);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);position:absolute;inset:4px}.hex__cell--stone{--edge:var(--color-gray-500);--face:var(--color-black);color:var(--color-gray-100)}.hex__cell--root{--edge:var(--color-white);--face:var(--color-gray-700)}.hex__cell--sector{--edge:var(--color-gray-400);--face:var(--color-gray-700);color:var(--color-white)}.hex__cell--path{--edge:var(--color-white);color:var(--color-white)}.hex__cell--lit{--edge:var(--color-white);--face:var(--color-white);color:var(--color-black)}.hex__cell--stone.hex__cell--lit{--face:var(--color-gray-100)}.hex__icon{width:32%;height:auto}.hex__gem{opacity:.85;width:38%;height:auto}.hex__cell--lit .hex__gem,.hex__cell--path .hex__gem{opacity:1;filter:drop-shadow(0 0 6px var(--gem-base));animation:1.4s steps(4,end) infinite alternate st-float}.hex__face.portrait{aspect-ratio:1;width:74%;height:auto;box-shadow:none;background:0 0;border:0;padding:0}.hex__label{max-width:88%;font-family:var(--font-pixel);text-align:center;text-transform:uppercase;font-size:8px;line-height:1.4}.hex__cell--skill .hex__label{font-size:7px}.hex__cell--stone .hex__label{font-size:9px}.st__info.window{align-self:center}.st__info-title{align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);display:flex}.st__info-title .gem{filter:drop-shadow(0 0 6px var(--gem-base));flex:none}.st__info-icon{flex:none;width:40px;height:40px}.st__info-face.portrait{width:48px;height:48px;padding:2px}.st__info-title h2{font-size:var(--text-base);margin:0}.st__info-title p{font-family:var(--font-pixel);text-transform:uppercase;color:var(--color-gray-500);margin:4px 0 0;font-size:9px;line-height:1.5}.st__info-text{margin:0 0 var(--space-2);font-size:var(--text-sm)}@keyframes st-float{to{transform:translateY(-3px)}}@keyframes st-fill{0%{width:0}}@media (hover:hover){.hex__cell:not(.hex__cell--empty,.hex__cell--lit):hover{--edge:var(--color-gray-300);color:var(--color-white)}}.hex__cell:focus-visible{--edge:var(--color-white);outline:none}@media (width<=1000px){.st__body{grid-template-columns:1fr}}@media (width<=720px){.st__keys{display:none}.st__bar{white-space:nowrap;font-size:8px}.st__bar-who{display:none}.st__sp-meter{width:60px}.st__body{padding:var(--space-2) var(--space-1)}.hex__inner,.hex__cell--empty:after{inset:2px}.hex__label{display:none}.hex__icon{width:44%}.hex__gem{width:50%}}@media (prefers-reduced-motion:reduce){.hex__cell,.hex__inner{transition:none}.hex__cell--lit .hex__gem,.hex__cell--path .hex__gem,.st__sp-meter i{animation:none}}
