@layer components{.hat-stage{container-type:inline-size}.hat-stage-board{border-top:1px solid var(--board-edge);background:var(--board);padding:18px}.hat-stage-grid{--u:min(2px, calc((100cqw - 36px) / 950));grid-template-columns:calc(314 * var(--u)) calc(636 * var(--u));justify-content:center;display:grid}.hat-at{top:calc(var(--y) * var(--u));left:calc(var(--x) * var(--u));margin:0;position:absolute}.hat-stage [data-sprite]{display:block}.hat-scene .hat-at{top:calc((var(--y) - var(--scene-top,0)) * var(--u));left:calc((var(--x) - var(--scene-left,0)) * var(--u))}.hat-stand [data-sprite],.hat-highlight [data-sprite],.hat-harold [data-sprite],.hat-picked-art [data-sprite],.hat-deposit-art [data-sprite]{width:100%;height:100%}.hat-scene{width:calc(314 * var(--u));height:calc(469 * var(--u));position:relative}.hat-scene:after{content:"";top:calc((258 - var(--scene-top,0)) * var(--u));right:calc(24 * var(--u));height:calc(5 * var(--u));border-radius:calc(3 * var(--u));pointer-events:none;background:#00000038;position:absolute;left:0}.hat-stand{width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));pointer-events:none}.hat-highlight{width:calc(29 * var(--u));height:calc(28 * var(--u));pointer-events:none}.hat-pick{width:calc(25 * var(--u));height:calc(25 * var(--u));border-radius:calc(4 * var(--u));background:0 0;border:0;padding:0}.hat-frame{top:calc(-4 * var(--u));left:calc(-4 * var(--u));width:calc(30 * var(--u));height:calc(50 * var(--u));pointer-events:none;transition:translate .12s ease-out;position:absolute}.hat-pick[aria-pressed=true] .hat-frame{translate:0 calc(-2 * var(--u))}.hat-pick:focus-visible,.hat-ask:focus-visible{outline-offset:2px;outline-color:#fff}.hat-panel{width:calc(636 * var(--u));height:calc(453 * var(--u));margin-top:calc(16 * var(--u));color:#fbeed6;font-family:var(--font-display);text-shadow:0 calc(1.5 * var(--u)) 0 #0000008c;line-height:1;position:relative}.hat-panel-art{width:100%;height:100%;position:absolute;inset:0}.hat-panel p,.hat-panel ul,.hat-panel h3{margin:0;padding:0}.hat-panel ul{list-style:none}.hat-centred{text-align:center;white-space:nowrap;translate:-50%}.hat-collected{font-size:max(10px, calc(13 * var(--u)))}.hat-collected strong{font-weight:600}.hat-collected strong[data-all]{color:var(--gold-light)}.hat-ask{width:calc(124 * var(--u));height:calc(34 * var(--u));border-radius:calc(6 * var(--u));color:inherit;font:inherit;background:0 0;border:0;padding:0;transition:filter .12s}.hat-ask:hover{filter:brightness(1.1)}.hat-ask[aria-pressed=true]{filter:brightness(1.15)drop-shadow(0 0 4px #efc86bb3)}.hat-ask-art{width:100%;height:100%}.hat-ask-text{display:none}.hat-line{font-size:max(9px, calc(11.5 * var(--u)));white-space:nowrap;font-weight:600}.hat-line:before{content:"";top:calc(1 * var(--u));left:calc(-10 * var(--u));width:calc(6 * var(--u));height:calc(6 * var(--u));border:calc(1 * var(--u)) solid #2b1810;border-radius:calc(1 * var(--u));background:#e8b45e;position:absolute;rotate:45deg}.hat-empty{top:calc(84 * var(--u));color:#e2cfae;font-size:max(10px, calc(12 * var(--u)));text-align:center;position:absolute;left:0;right:0}.hat-harold{width:calc(78 * var(--u));height:calc(132 * var(--u))}.hat-speech{width:calc(442 * var(--u));height:calc(278 * var(--u))}.hat-speech-art{width:100%;height:100%;position:absolute;inset:0}.hat-speech-text{top:calc(9 * var(--u));left:calc(26 * var(--u));width:calc(390 * var(--u));gap:calc(6 * var(--u));color:#f4e6cc;font-family:var(--font-sans);font-size:max(9px, calc(11 * var(--u)));text-align:center;text-shadow:none;line-height:1.35;display:grid;position:absolute}.hat-picked-art{width:calc(36 * var(--u));height:calc(36 * var(--u));animation:.12s ease-out hat-turn-in,1.4s ease-in-out infinite alternate hat-rock;scale:1.75}@keyframes hat-turn-in{0%{scale:.5}}@keyframes hat-rock{0%{rotate:-12deg}to{rotate:12deg}}.hat-picked-name{color:#fff;font-size:max(10px, calc(13 * var(--u)));font-weight:600}.hat-picked-line{font-size:max(9px, calc(11.5 * var(--u)));font-weight:600}.hat-picked-line small{margin-top:calc(2 * var(--u));color:#e2cfae;font-family:var(--font-sans);font-size:max(8px, calc(9 * var(--u)));text-shadow:none;font-weight:500;display:block}.hat-hint{color:#c5d9ff;font-size:max(9px, calc(11.5 * var(--u)))}.hat-multi span,.hat-multi strong{display:block}.hat-multi span{color:#e2cfae;font-size:max(8px, calc(10 * var(--u)))}.hat-multi strong{margin-top:calc(4 * var(--u));color:var(--gold-light);font-size:max(11px, calc(15 * var(--u)));font-weight:600}.hat-deposit-art{width:calc(134 * var(--u));height:calc(44 * var(--u));opacity:.75}.hat-deposit:has([data-some]) .hat-deposit-art{opacity:1}.hat-deposit-text{width:calc(170 * var(--u));color:#e2cfae;font-size:max(8px, calc(10 * var(--u)));white-space:normal;line-height:1.4}.hat-deposit-text[data-some]{color:var(--gold-light)}@container (width<=760px){.hat-stage-board{padding:12px}.hat-stage-grid{--u:min(1.6px, calc((100cqw - 24px) / var(--rack-width)));grid-template-columns:minmax(0,1fr)}.hat-scene{--scene-left:var(--rack-left);--scene-top:var(--rack-top);width:calc(var(--rack-width) * var(--u));height:calc((268 - var(--rack-top)) * var(--u));justify-self:center}.hat-scene:after{right:0}.hat-panel{text-shadow:0 1px #0000008c;background:linear-gradient(#553429,#3f261d);border:2px solid #c08d5d;border-radius:12px;flex-direction:column;gap:14px;width:auto;height:auto;margin-top:12px;padding:14px 16px 16px;display:flex;box-shadow:0 0 0 1px #1d100b}.hat-panel .hat-panel-art{display:none}.hat-panel .hat-at{position:static;translate:none}.hat-panel .hat-centred{white-space:normal}.hat-ask{background:#00000040;border:1px solid #c08d5d;align-self:flex-start;align-items:center;gap:6px;width:auto;height:auto;padding:6px 10px;font-size:13px;display:inline-flex}.hat-ask .hat-ask-art{display:none}.hat-ask-text{align-items:center;gap:6px;display:inline-flex}.hat-ask-text svg{width:15px;height:15px}.hat-collected{order:-1;font-size:15px}.hat-lines{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px;padding-left:12px;display:grid}.hat-panel .hat-line{white-space:normal;font-size:12.5px;position:relative;top:0;left:0}.hat-line:before{border-width:1px;width:6px;height:6px;top:3px;left:-12px}.hat-empty{font-size:13px;position:static}.hat-help{align-items:flex-end;gap:10px;display:flex}.hat-harold{flex-shrink:0;width:39px;height:66px}.hat-speech{background:#2e1c16;border-radius:10px;width:auto;height:auto;padding:12px 14px;box-shadow:inset 0 0 0 1px #6b4a37}.hat-speech .hat-speech-art{display:none}.hat-speech-text{text-align:left;width:auto;font-size:13px;position:static}.hat-picked{background:#00000047;border-radius:10px;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 16px;min-height:76px;padding:10px 14px;display:grid}.hat-picked-art{grid-row:span 2;width:54px;height:54px;scale:1}.hat-picked-name,.hat-picked-lines,.hat-picked .hat-centred{text-align:left}.hat-picked-name{font-size:15px}.hat-picked-lines{gap:6px;display:grid}.hat-picked-line{font-size:13px}.hat-picked-line small{font-size:11.5px}.hat-hint,.hat-multi{text-align:center;grid-column:1/-1}.hat-hint{font-size:13px}.hat-multi span{font-size:12px}.hat-multi strong{font-size:18px}.hat-deposit{align-items:center;gap:12px;display:flex}.hat-deposit-art{flex-shrink:0;width:101px;height:33px}.hat-deposit-text{text-align:left;width:auto;font-size:12.5px}}@media (prefers-reduced-motion:reduce){.hat-picked-art{animation:none}.hat-frame{transition:none}}}