#hud{top:58px;left:0;right:0;text-align:center}
.hrow{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:0 8px}
.pill.role{color:#05202a;background:var(--cyan);border-color:var(--cyan)}
.pill.role.shadow{background:#2a1838;color:#ff9ef0;border-color:#ff6ad5}
.pill.role.guard{background:#d9f6ff;color:#06324a;border-color:#fff}
.pill.role.out{background:#333a48;color:#c6d0e0;border-color:#556}
.room{margin-top:6px;font-size:12px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.feed{position:fixed;left:10px;top:118px;z-index:16;display:flex;flex-direction:column;gap:5px;pointer-events:none;max-width:min(330px,70vw)}
.feed div{background:rgba(11,13,16,.8);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:10px;padding:6px 10px;font-size:12.5px;font-weight:600;transition:opacity .5s}
.feed div.warn{border-left-color:#ff6ad5}
.feed div.ice{border-left-color:#bff3ff}
.hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:16;font-size:13px;color:#c6d0e0;background:rgba(11,13,16,.75);border:1px solid var(--line);border-radius:10px;padding:6px 12px;pointer-events:none;white-space:nowrap}
.ff{position:fixed;right:12px;bottom:max(20px,env(safe-area-inset-bottom));z-index:26}
.rolebig{font-size:clamp(34px,10vw,54px);font-weight:800;letter-spacing:.08em;margin:6px 0}
.rolebig.shadow{color:#ff9ef0;text-shadow:0 0 26px rgba(255,106,213,.5)}
.rolebig.guard{color:#fff;text-shadow:0 0 26px rgba(191,243,255,.7)}
.rolebig.seeker{color:var(--cyan);text-shadow:0 0 26px rgba(0,229,255,.5)}
.picks{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.picks button{border:1px solid var(--line);background:#141b29;border-radius:10px;padding:8px 12px;font-weight:600;font-size:13px}
.picks button.on{background:var(--cyan);color:#05202a;border-color:var(--cyan)}
.breakdown{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:14px;margin-top:10px;color:#c6d0e0}
.breakdown b{color:var(--white);text-align:right}
.breakdown .tot{border-top:1px solid var(--line);padding-top:6px;font-size:16px;color:var(--white)}
@media (pointer:coarse){.hint{display:none}}
.maps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.maps button{border:1px solid #26314a;background:#121826;border-radius:12px;padding:8px;text-align:left;display:flex;flex-direction:column;gap:2px}
.maps button b{font-size:13px}.maps button span{font-size:11px;color:var(--dim);line-height:1.3}
.maps button.on{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset;background:#16233a}
.maps button.lock{opacity:.6}
@media (max-width:480px){.maps{grid-template-columns:1fr}}
#smx-edit,#smx-fs{top:calc(116px + env(safe-area-inset-top))!important}#smx-fs{right:auto!important;left:calc(56px + env(safe-area-inset-left))!important}
#hud{top:calc(50px + max(8px,env(safe-area-inset-top)))}
.feed{top:calc(110px + max(8px,env(safe-area-inset-top)));left:calc(10px + env(safe-area-inset-left));gap:7px}
.hint{bottom:calc(18px + env(safe-area-inset-bottom))}
.ff{right:calc(12px + env(safe-area-inset-right))}
.picks{gap:7px}
@media (pointer:coarse){.feed{max-height:calc(100dvh - 110px - max(8px,env(safe-area-inset-top)) - 168px - env(safe-area-inset-bottom));overflow:hidden}}
@media (pointer:coarse) and (max-height:380px){.feed div:nth-child(n+3){display:none}}
.sk-banner{top:62%}@media (max-height:500px){.sk-banner{top:72%}}