.wf-main{padding: 0}.wf-room{--wf-hairline: color-mix(in oklch,var(--club-brass) 34%,transparent);--wf-night: color-mix(in oklch,var(--ww-navy) 88%,var(--ww-blue-deep));--wf-day: color-mix(in oklab,var(--ww-paper) 88%,var(--club-brass));--wf-tile: color-mix(in oklch,var(--ww-paper-2) 92%,var(--ww-ink));min-height: calc(100dvh - var(--ww-topbar));display: grid;grid-template-columns: minmax(0,1fr);align-content: start;gap: 0.9rem;padding: 0.9rem 1rem calc(1rem + var(--ww-safe-bottom));background: var(--ww-paper);color: var(--ww-ink);transition: background-color 1.2s var(--ww-ease-in-out)}.wf-room:has(.wf-phase--night){background: var(--wf-night);color: var(--club-travertine)}.wf-room:has(.wf-phase--day,.wf-phase--dawn){background: var(--wf-day)}.wf-room:has(.wf-phase--dusk){background: color-mix(in oklab,var(--wf-day) 55%,var(--wf-night))}@media (min-width: 64rem){.wf-room{grid-template-columns: minmax(0,1fr) minmax(18rem,24rem);align-items: start}}.wf-seat-0{--wf-seat: var(--ww-sky)}.wf-seat-1{--wf-seat: var(--ww-danger)}.wf-seat-2{--wf-seat: var(--ww-emerald)}.wf-seat-3{--wf-seat: var(--ww-gold)}.wf-seat-4{--wf-seat: var(--ww-violet)}.wf-seat-5{--wf-seat: var(--club-celadon)}.wf-seat-6{--wf-seat: var(--club-brass)}.wf-seat-7{--wf-seat: var(--ww-blue)}.wf-role--wolf{--wf-role: var(--ww-danger)}.wf-role--seer{--wf-role: var(--ww-violet)}.wf-role--doctor{--wf-role: var(--ww-emerald)}.wf-role--villager{--wf-role: var(--club-brass)}.wf-label{font-size: 0.7rem;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: var(--ww-ink-soft)}.wf-title{margin: 0;font-family: var(--ww-display);font-size: clamp(1.5rem,3.4vw,2.2rem);font-weight: 800;line-height: 1.1}.wf-board{min-width: 0;display: grid;gap: 0.9rem}.wf-card{display: grid;gap: 0.75rem;padding: 1rem 1.1rem;border: 1px solid var(--wf-hairline,var(--ww-line));border-radius: var(--ww-radius-sm);background: var(--ww-paper-2);color: var(--ww-ink)}.wf-card p{margin: 0}.wf-card-title{margin: 0;font-family: var(--ww-display);font-size: 1.3rem;font-weight: 800}.wf-rules{color: var(--ww-ink-soft);font-size: 0.92rem}.wf-actions{display: flex;flex-wrap: wrap;gap: 0.6rem;align-items: center}.wf-sky{container-type: inline-size;position: relative;display: grid;grid-template-columns: minmax(0,1fr) auto;align-items: end;gap: 0.75rem;min-height: 7.5rem;padding: 3.4rem 1.1rem 0.9rem;overflow: hidden;border: 1px solid var(--wf-hairline);border-radius: var(--ww-radius-sm);background: linear-gradient(180deg,var(--club-travertine),color-mix(in oklab,var(--club-travertine) 65%,var(--club-brass)));color: var(--ww-navy)}.wf-sky .wf-label{color: color-mix(in oklab,var(--ww-navy) 82%,var(--club-walnut))}.wf-phase--night .wf-sky,.wf-phase--dusk .wf-sky{background: linear-gradient(180deg,color-mix(in oklab,var(--ww-navy) 80%,var(--club-walnut)),color-mix(in oklch,var(--ww-navy) 80%,var(--ww-blue-deep)));color: var(--club-travertine)}.wf-phase--night .wf-sky .wf-label,.wf-phase--dusk .wf-sky .wf-label{color: var(--club-celadon)}.wf-board--waiting .wf-sky{background: var(--ww-paper-2);color: var(--ww-ink)}.wf-board--waiting .wf-sky .wf-label{color: var(--ww-ink-soft)}.wf-sky-orb{position: absolute;left: 0.9rem;top: 1.7rem;display: grid;place-items: center;width: 2.2rem;height: 2.2rem;font-size: 1.6rem;color: var(--club-brass);transform: translate(calc(var(--wf-arc,0) * (100cqw - 4rem)),calc(var(--wf-arc,0) * (1 - var(--wf-arc,0)) * -5.6rem));transition: transform 250ms linear}.wf-phase--night .wf-sky-orb,.wf-phase--dawn .wf-sky-orb{color: var(--club-travertine)}.wf-board--waiting .wf-sky-orb{display: none}.wf-sky-text{display: grid;gap: 0.1rem;min-width: 0}.wf-sky-clock{display: grid;justify-items: end;gap: 0.15rem;min-width: 6.5rem}.wf-clock{font-family: var(--ww-mono);font-variant-numeric: tabular-nums;font-size: 1.7rem;line-height: 1}.wf-room.is-hurrying .wf-phase--day .wf-clock{color: var(--ww-danger-text)}.wf-clock-bar{width: 100%;height: 0.3rem;border-radius: 999px;background: color-mix(in oklch,currentColor 18%,transparent);overflow: hidden}.wf-clock-bar span{display: block;height: 100%;background: var(--club-brass);transform-origin: left center;transition: transform 250ms linear}.wf-you{display: grid;gap: 0.65rem;padding: 1rem 1.1rem;border: 1px solid color-mix(in oklch,var(--wf-role,var(--club-brass)) 55%,transparent);border-radius: var(--ww-radius-sm);background: var(--ww-paper-2);color: var(--ww-ink)}.wf-role-card{display: flex;gap: 0.9rem;align-items: center;animation: wf-deal var(--ww-dur-long) var(--ww-ease-play) both}@keyframes wf-deal{from{opacity: 0;transform: perspective(40rem) rotateY(-70deg)}to{opacity: 1;transform: none}}.wf-role-icon{display: grid;place-items: center;flex: none;width: 3.4rem;height: 3.4rem;border-radius: 50%;background: var(--wf-role,var(--club-brass));color: var(--ww-navy);font-size: 1.5rem}.wf-role-card.is-dead .wf-role-icon{background: var(--ww-ink-soft)}.wf-role-text{display: grid;gap: 0.1rem;min-width: 0}.wf-role-name{font-family: var(--ww-display);font-size: 1.35rem;font-weight: 800;line-height: 1.15}.wf-role-ability{margin: 0;color: var(--ww-ink-soft);font-size: 0.92rem}.wf-knows{margin: 0;display: flex;gap: 0.5rem;align-items: center;color: var(--ww-danger-text);font-weight: 600}.wf-visions{display: grid;gap: 0.3rem;margin: 0;padding: 0;list-style: none}.wf-visions li{display: flex;gap: 0.5rem;align-items: center;font-weight: 600}.wf-visions .is-wolf{color: var(--ww-danger-text)}.wf-visions .is-clear{color: var(--ww-success-text)}.wf-prompt{margin: 0;font-size: 1.05rem;font-weight: 600}.wf-skip{justify-self: start;display: inline-flex;gap: 0.5rem;align-items: center;min-height: var(--ww-control-min);padding: 0 1rem;border: 1px solid var(--ww-line);border-radius: var(--ww-radius-sm);background: transparent;color: var(--ww-ink);font: inherit;font-weight: 600;cursor: pointer;transition: border-color var(--ww-dur-micro) var(--ww-ease-out),background-color var(--ww-dur-micro) var(--ww-ease-out)}.wf-skip.is-chosen{border-color: var(--club-brass);background: color-mix(in oklch,var(--club-brass) 16%,transparent)}.wf-skip:active{transform: translateY(1px)}.wf-skip:disabled{opacity: 0.55;cursor: not-allowed}@media (hover: hover){.wf-skip:not(:disabled):hover{border-color: var(--club-brass)}}.wf-village{display: grid;grid-template-columns: repeat(auto-fill,minmax(min(100%,9.5rem),1fr));gap: 0.55rem;margin: 0;padding: 0;list-style: none}.wf-house{position: relative;display: grid;grid-template-columns: auto minmax(0,1fr) auto;grid-template-areas: "avatar name votes" "act act act";align-items: center;gap: 0.45rem 0.6rem;padding: 0.65rem 0.7rem;border: 1px solid var(--ww-line);border-radius: var(--ww-radius-sm);background: var(--wf-tile);color: var(--ww-ink);transition: border-color var(--ww-dur-short) var(--ww-ease-out),opacity var(--ww-dur-long) var(--ww-ease-out)}.wf-house.is-you{border-color: color-mix(in oklch,var(--wf-seat) 70%,transparent)}.wf-house.is-chosen{border-color: var(--club-brass)}.wf-house.is-dead{opacity: 0.62}.wf-house.is-dead .wf-avatar{background: var(--ww-ink-soft)}.wf-house.is-dead .wf-house-name small{color: var(--ww-ink)}.wf-avatar{grid-area: avatar;display: inline-grid;place-items: center;width: 2.2rem;height: 2.2rem;border-radius: 50%;background: var(--wf-seat,var(--ww-ink-soft));color: var(--ww-navy);font-weight: 800;font-size: 0.9rem}.wf-village--reveal .wf-avatar{background: var(--wf-role)}.wf-house-name{grid-area: name;display: grid;min-width: 0}.wf-house-name strong{overflow: hidden;text-overflow: ellipsis;white-space: nowrap}.wf-house-name small{color: var(--ww-ink-soft);font-size: 0.78rem}.wf-house-name small .fas{color: var(--wf-role)}.wf-votes{grid-area: votes;display: flex;flex-wrap: wrap;justify-content: end;gap: 0.15rem;max-width: 4.5rem;color: var(--club-brass);font-size: 0.85rem}.wf-votes .fas{animation: wf-pip var(--ww-dur-short) var(--ww-ease-play) both}@keyframes wf-pip{from{opacity: 0;transform: translateY(-0.4rem) scale(0.6)}to{opacity: 1;transform: none}}.wf-house > form{grid-area: act}.wf-act{width: 100%;min-height: var(--ww-control-min);border: 1px solid var(--wf-hairline);border-radius: var(--ww-radius-sm);background: transparent;color: var(--ww-ink);font: inherit;font-weight: 700;cursor: pointer;transition: border-color var(--ww-dur-micro) var(--ww-ease-out),background-color var(--ww-dur-micro) var(--ww-ease-out),color var(--ww-dur-micro) var(--ww-ease-out)}.wf-act--kill{--wf-act: var(--ww-danger)}.wf-act--peek{--wf-act: var(--ww-violet)}.wf-act--guard{--wf-act: var(--ww-emerald)}.wf-act--vote{--wf-act: var(--club-brass)}.wf-act.is-chosen{border-color: var(--wf-act);background: var(--wf-act);color: var(--ww-navy)}.wf-act:active{transform: translateY(1px)}.wf-act:disabled{opacity: 0.6;cursor: not-allowed}.wf-act[aria-busy="true"]{cursor: progress}@media (hover: hover){.wf-act:not(:disabled):not(.is-chosen):hover{border-color: var(--wf-act);background: color-mix(in oklch,var(--wf-act) 16%,transparent)}}.wf-leave{justify-self: start;min-height: var(--ww-control-min);padding: 0 0.2rem;border: 0;background: none;color: inherit;opacity: 0.8;font: inherit;text-decoration: underline;text-underline-offset: 0.2em;cursor: pointer}@media (hover: hover){.wf-leave:hover{opacity: 1}}.wf-results{display: grid;gap: 1rem;padding: 1.1rem;border: 1px solid var(--wf-hairline);border-radius: var(--ww-radius-sm);background: var(--ww-paper-2);color: var(--ww-ink)}.wf-results-head{display: flex;gap: 1rem;align-items: center}.wf-results-head .wf-sky-orb{position: static;transform: none;font-size: 2.4rem;width: 3rem;height: 3rem;animation: wf-deal var(--ww-dur-long) var(--ww-ease-play) both}.wf-won--wolves .wf-results-head .wf-sky-orb{color: var(--ww-danger)}.wf-results-you{margin: 0.2rem 0 0;color: var(--ww-ink-soft)}.wf-chat{min-width: 0;display: flex;flex-direction: column;border: 1px solid var(--wf-hairline);border-radius: var(--ww-radius-sm);background: var(--ww-paper-2);color: var(--ww-ink)}@media (min-width: 64rem){.wf-chat{position: sticky;top: calc(var(--ww-topbar) + 0.9rem);height: calc(100dvh - var(--ww-topbar) - 1.8rem)}}.wf-chat-log{flex: 1;min-height: 14rem;max-height: 55dvh;overflow-y: auto;display: flex;flex-direction: column;gap: 0.35rem;padding: 0.8rem 0.9rem;overscroll-behavior: contain}@media (min-width: 64rem){.wf-chat-log{max-height: none}}.wf-line{margin: 0;line-height: 1.4;overflow-wrap: anywhere}.wf-line-name{color: var(--wf-seat,var(--ww-ink));margin-right: 0.3rem}.wf-line--system{text-align: center;color: var(--ww-ink-soft);font-style: italic;font-size: 0.9rem;padding: 0.2rem 0}.wf-line--vote{color: var(--ww-ink-soft);font-size: 0.85rem}.wf-line--den{padding: 0.25rem 0.5rem;border-left: 3px solid var(--ww-danger);background: color-mix(in oklch,var(--ww-danger) 10%,transparent)}.wf-line--den .fas{color: var(--ww-danger-text);margin-right: 0.3rem}.wf-line--grave{color: var(--ww-ink-soft);font-style: italic}.wf-line--grave .fas{margin-right: 0.3rem}.wf-line--vision{padding: 0.35rem 0.55rem;border-left: 3px solid var(--ww-violet);background: color-mix(in oklch,var(--ww-violet) 12%,transparent);font-weight: 600}.wf-line--vision .fas{color: var(--ww-violet);margin-right: 0.3rem}.wf-line-tag{margin-right: 0.3rem}.wf-line{animation: wf-line-in var(--ww-dur-short) var(--ww-ease-out) both}@keyframes wf-line-in{from{opacity: 0;transform: translateY(0.3rem)}to{opacity: 1;transform: none}}.wf-chat-foot{padding: 0.6rem 0.7rem 0.7rem;border-top: 1px solid var(--ww-line)}.wf-chat-form{display: flex;gap: 0.5rem}.wf-chat-input{flex: 1;min-width: 0;min-height: var(--ww-control-min);padding: 0 0.8rem;border: 1px solid var(--ww-line);border-radius: var(--ww-radius-sm);background: var(--ww-paper);color: var(--ww-ink);font: inherit;transition: border-color var(--ww-dur-micro) var(--ww-ease-out)}.wf-chat-input:focus-visible{border-color: var(--club-brass)}.wf-chat-input[aria-invalid="true"]{border-color: var(--ww-danger)}.wf-chat-input--den{border-color: color-mix(in oklch,var(--ww-danger) 55%,transparent)}.wf-chat-send{min-width: var(--ww-control-min)}.wf-chat-error{min-height: 1lh;margin: 0.3rem 0 0;color: var(--ww-danger-text);font-size: 0.85rem}.wf-chat-hush{margin: 0;display: flex;gap: 0.5rem;align-items: center;min-height: var(--ww-control-min);color: var(--ww-ink-soft)}.wf-lobby{display: grid;gap: 1.4rem}.wf-lobby-head h1{margin: 0 0 0.4rem;font-family: var(--ww-display);font-size: clamp(2rem,5vw,3rem);font-weight: 800}.wf-lobby-head p{margin: 0;max-width: 42rem;color: var(--ww-ink-soft)}.wf-lobby-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(min(100%,20rem),1fr));gap: 1rem}.wf-create summary{cursor: pointer;font-weight: 600;min-height: var(--ww-control-min);display: flex;align-items: center}.wf-form{display: grid;gap: 0.8rem}.wf-legend{font-size: 0.8rem;font-weight: 700;color: var(--ww-ink-soft)}.wf-segment{display: flex;flex-wrap: wrap;gap: 0.35rem;border: 0;padding: 0;margin: 0}.wf-segment legend{width: 100%;margin-bottom: 0.35rem}.wf-choice-radio{position: absolute;opacity: 0;width: 1px;height: 1px}.wf-segment-option{min-height: var(--ww-control-min);min-width: 3rem;display: grid;place-items: center;padding: 0 0.8rem;border: 1px solid var(--ww-line);border-radius: var(--ww-radius-sm);background: var(--ww-paper);color: var(--ww-ink);cursor: pointer;font-weight: 600;font-variant-numeric: tabular-nums;transition: border-color var(--ww-dur-micro) var(--ww-ease-out),background-color var(--ww-dur-micro) var(--ww-ease-out)}@media (hover: hover){.wf-segment-option:hover{border-color: color-mix(in oklch,var(--club-brass) 50%,transparent)}}.wf-choice-radio:checked + .wf-segment-option{border-color: var(--club-brass);background: color-mix(in oklch,var(--club-brass) 14%,var(--ww-paper))}.wf-choice-radio:focus-visible + .wf-segment-option{outline: 3px solid var(--ww-focus);outline-offset: 2px}.wf-private{display: flex;gap: 0.7rem;align-items: flex-start;cursor: pointer}.wf-private input{width: 1.2rem;height: 1.2rem;margin-top: 0.15rem;flex: none}.wf-private span{display: grid;gap: 0.15rem}.wf-private small{color: var(--ww-ink-soft)}.wf-room-list{display: grid;gap: 0.5rem}.wf-room-row{display: flex;align-items: center;gap: 0.8rem;padding: 0.7rem 0.9rem;border: 1px solid var(--ww-line);border-radius: var(--ww-radius-sm);background: var(--ww-paper-2);color: var(--ww-ink);text-decoration: none;transition: border-color var(--ww-dur-micro) var(--ww-ease-out)}a.wf-room-row:active{transform: translateY(1px)}@media (hover: hover){a.wf-room-row:hover{border-color: var(--club-brass)}}.wf-room-info{flex: 1;display: grid;min-width: 0}.wf-room-info small{color: var(--ww-ink-soft)}.wf-room-note{color: var(--ww-ink-soft);font-weight: 600;white-space: nowrap}.wf-empty p{margin: 0;color: var(--ww-ink-soft)}