:root{--font-display: "Patrick Hand", cursive;--font-dokdo: "Dokdo", cursive;--font-sora: "Sora", sans-serif;--color-bg: #0a0a0a;--color-yellow: #ffd400;--color-red: #ff5a5f;--color-blue: #2f5fff;--color-orange: #fd7801;--color-orange-dark: #f2750a;--color-ink: #ffffff;--color-muted: #b8b8b8;--fs-sm: 16px;--fs-base: 20px;--fs-lg: 32px;--fs-xl: 40px;--fs-2xl: 60px;--fs-hero: 120px;--icon-size: 60px;--icon-img: 40px;--ctrl-height: 60px;--radius: 16px;--logo-height: 180px;--chrome-height: 220px;font-family:var(--font-display);line-height:1.5;font-weight:400;color-scheme:dark;color:var(--color-ink);background-color:var(--color-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (max-width: 649px){:root{--fs-sm: 12px;--fs-base: 16px;--fs-lg: 24px;--fs-xl: 32px;--fs-2xl: 44px;--fs-hero: 88px;--icon-size: 52px;--icon-img: 36px;--ctrl-height: 52px;--radius: 14px;--chrome-height: 152px}}@media (min-width: 650px) and (max-width: 1199px){:root{--fs-sm: 14px;--fs-base: 18px;--fs-lg: 28px;--fs-xl: 36px;--fs-2xl: 52px;--fs-hero: 104px;--icon-size: 52px;--icon-img: 36px;--ctrl-height: 52px;--radius: 14px;--chrome-height: 212px}}*{box-sizing:border-box}a{font-weight:500;color:var(--color-orange);text-decoration:inherit}a:hover{color:var(--color-orange-dark)}body{margin:0;display:block;min-width:320px;min-height:100vh}h1,h2,h3{font-family:var(--font-display);letter-spacing:.03em}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-orange);color:#fff;cursor:pointer;transition:opacity .2s,border-color .2s}button:hover{opacity:.9}button:focus,button:focus-visible{outline:none}button:disabled{cursor:not-allowed}.layout{position:relative;height:100vh;overflow:hidden;background-color:var(--color-bg);background-image:url(/assets/bg-DR2FI_8t.svg);background-repeat:no-repeat;background-size:cover;background-position:center;display:flex;flex-direction:column}.layout__header{display:flex;align-items:center;justify-content:space-between;padding:40px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);padding:0;border-radius:var(--radius);background:#fd7801;border:none}.icon-btn img{width:var(--icon-img);height:var(--icon-img)}.icon-btn__back{transform:scaleX(-1)}.icon-btn--spacer{background:transparent;visibility:hidden}.layout__title-compact{display:none}.layout__title{flex:1;text-align:center;font-family:var(--font-dokdo);font-size:var(--fs-xl);line-height:var(--fs-xl);font-weight:400;text-transform:uppercase;letter-spacing:normal;color:#fff;margin:0}.layout__content{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:0 40px 80px}.rules-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10;padding:100px}.rules-card{background:#fff;border-radius:32px;padding:32px;width:100%;height:fit-content;max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:16px}.rules-card__header{display:flex;align-items:center;justify-content:space-between}.rules-card__title{font-family:var(--font-dokdo);font-size:var(--fs-xl);line-height:1;text-transform:uppercase;color:#000}.rules-card__body{margin:0;font-family:var(--font-sora);font-size:var(--fs-base);line-height:1.5;color:#000}.rules-card__examples{display:flex;flex-direction:column;gap:8px}.rules-card__example-row{display:flex;align-items:center;gap:8px}.rules-card__example-label{font-family:var(--font-sora);font-size:var(--fs-base);color:#000;flex:1}.rules-card__example-cards{display:flex;gap:6px;flex-shrink:0}.rules-mini-card{width:40px;height:40px;border-radius:8px;border:1px solid rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center}.rules-mini-card--dark{border-color:transparent}.rules-card__scoring{display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--font-sora);font-size:var(--fs-base);font-weight:700;color:#000}.logo{text-align:center;margin:0;line-height:1;height:fit-content}.logo__image{height:var(--logo-height);width:auto;display:block;margin:0 auto}.page{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;gap:2.5rem;margin-top:2rem;text-align:center}.page__subtitle{margin:-1.5rem 0 0;font-size:var(--fs-base);color:var(--color-ink);letter-spacing:.04em}.lobby-page{margin:0;flex:1;width:100%;max-width:840px;justify-content:space-between}.lobby-page .page__subtitle{margin:16px 0 0;font-family:var(--font-dokdo);font-size:var(--fs-2xl);line-height:var(--fs-2xl);letter-spacing:normal;text-transform:uppercase}.lobby-page .join-or-create{flex-direction:row;align-items:center;gap:80px}.lobby-page .btn-pill{width:240px;max-width:100%;height:var(--ctrl-height);border-radius:var(--radius);background:#fd7801;font-family:var(--font-sora);font-weight:700;font-size:var(--fs-base);letter-spacing:normal;text-transform:none;padding:0}.room-page{margin:0;flex:1;width:100%;max-width:none;padding:0 40px 80px;justify-content:space-between}.room-page .page__subtitle.room-code{margin:16px 0 0;display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--font-dokdo);font-size:var(--fs-2xl);line-height:var(--fs-2xl);letter-spacing:normal;text-transform:uppercase;color:#fff}.room-page .room-code__copy{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:0;border:none;background:transparent;padding:0;color:#fd7801;font-size:var(--fs-xl);line-height:1}.room-page .room-code__copy img{width:40px;height:40px}.room-page__participants{width:100%;margin-top:40px}.room-page .participants-grid{gap:16px;width:100%;max-width:100%}.room-page .participants-grid__name{font-family:var(--font-sora);font-weight:700;font-size:var(--fs-base);letter-spacing:normal;color:#fff}.room-page .btn-pill{width:240px;max-width:100%;height:var(--ctrl-height);border-radius:var(--radius);background:#fd7801;color:#fff;font-family:var(--font-sora);font-weight:700;font-size:var(--fs-base);letter-spacing:normal;text-transform:none;padding:0}.login-form{display:flex;flex-direction:column;align-items:center;gap:16px}.login-page{margin:0;flex:1;width:100%;justify-content:space-between}.login-page .field-label,.lobby-page .field-label{font-family:var(--font-dokdo);font-size:var(--fs-xl);line-height:var(--fs-xl);text-transform:uppercase;color:#fff;letter-spacing:normal;margin:0}.field-row{display:inline-flex;align-items:center;gap:16px}.login-page .pill-form,.lobby-page .pill-form{display:flex;align-items:center;background:#fff;border:1px solid #d9d9d9;border-radius:var(--radius);height:var(--ctrl-height);width:240px;max-width:100%;padding:0 1rem}.login-page .pill-form input,.lobby-page .pill-form input{font-family:var(--font-sora);font-size:var(--fs-base);color:#000;min-width:0}.login-page .pill-form input::placeholder,.lobby-page .pill-form input::placeholder{color:#00000080}.login-page .pill-btn,.lobby-page .pill-btn{width:var(--icon-size);height:var(--icon-size);border-radius:var(--radius);background:#fd7801}.login-page .pill-btn:disabled,.lobby-page .pill-btn:disabled{background:color-mix(in srgb,#fd7801 50%,white)}.login-page .pill-btn img,.lobby-page .pill-btn img{width:var(--icon-img);height:var(--icon-img)}.field-label{text-transform:uppercase;letter-spacing:.08em;color:var(--color-ink);font-size:var(--fs-base);margin:0 0 .75rem}.pill-form{display:flex;align-items:center;background:#fff;border-radius:999px;padding:.3rem .3rem .3rem 1.25rem;gap:.5rem;width:100%;max-width:320px}.pill-form input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--fs-base);color:#2b2b2b;padding:.5rem 0}.pill-form input::placeholder{color:#9a9a9a}.pill-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius);background:var(--color-orange);border:none;padding:0;flex-shrink:0}.pill-btn img{width:18px;height:18px}.join-or-create{display:flex;align-items:center;justify-content:center;gap:2.5rem;width:100%;flex-wrap:wrap}.join-or-create__divider{display:flex;flex-direction:column;align-items:center;gap:.6rem;align-self:stretch}.join-or-create__divider span{text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted)}.join-or-create__divider:before,.join-or-create__divider:after{content:"";flex:1;width:1px;background:var(--color-muted);opacity:.4}.join-or-create__column{display:flex;flex-direction:column;align-items:center;gap:.75rem}.join-or-create__column--centered{justify-content:center}.btn-pill{border:none;border-radius:var(--radius);padding:.85rem 2rem;font-size:var(--fs-base);font-weight:500;font-family:inherit;cursor:pointer;background:var(--color-orange);color:#fff}.btn-pill:disabled{background:color-mix(in srgb,var(--color-orange) 50%,white);cursor:not-allowed}.error{color:var(--color-red)}.room-code{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--fs-base);letter-spacing:.04em;color:var(--color-ink)}.room-code__copy{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius);background:transparent;border:1.5px solid var(--color-ink);color:var(--color-ink);padding:0;font-size:var(--fs-sm);line-height:1}.room-page .participants-heading{font-size:var(--fs-xl);line-height:var(--fs-xl)}.participants-heading{font-family:var(--font-dokdo);font-size:var(--fs-lg);line-height:32px;font-weight:400;text-transform:uppercase;letter-spacing:normal;color:#fff;margin:0 0 16px;height:var(--ctrl-height);display:flex;align-items:center;justify-content:center;text-align:center}.participants-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem 2.5rem;width:100%;max-width:560px}.participants-grid__name{color:var(--color-ink);font-size:var(--fs-base);font-weight:600;letter-spacing:.02em}.game{width:100%;display:grid;grid-template-columns:1fr 2fr 1fr;gap:40px;align-items:start}.game__left-col{display:contents}.game__participants-col{display:flex;flex-direction:column;order:1}.game__board-col{display:flex;flex-direction:column;gap:16px;height:calc(100vh - var(--chrome-height));overflow:hidden;order:2}.called-haps{order:3}.feedback-banner{position:relative;overflow:hidden;border-radius:var(--radius);padding:16px 32px;height:var(--ctrl-height);display:flex;align-items:center;justify-content:center;text-align:center;gap:.75rem;font-family:var(--font-sora);font-weight:700;font-size:var(--fs-base)}.feedback-banner__fill{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;background:color-mix(in srgb,#0649D5 25%,white);transition:width 1s linear}.feedback-banner>span:not(.feedback-banner__fill){position:relative;z-index:1}.feedback-banner--success{color:#06bb46;background:color-mix(in srgb,#06bb46 10%,white)}.feedback-banner--error{color:#fd484f;background:color-mix(in srgb,#FD484F 10%,white)}.feedback-banner--finished,.feedback-banner--info{color:#0649d5;background:color-mix(in srgb,#0649D5 10%,white)}.feedback-banner--orange{color:#fd7801;background:color-mix(in srgb,#fd7801 10%,white)}.feedback-banner--placeholder{visibility:hidden}.feedback-banner__delta{font-weight:700;white-space:nowrap}.board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:16px;width:100%;flex:1;min-height:0}.board-grid--disabled{pointer-events:none}.hap-card{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:4px solid transparent;border-radius:var(--radius);cursor:pointer;transition:border-color .12s,transform .12s;padding:0}.hap-card:hover{transform:translateY(-2px)}.hap-card--selected{border-color:var(--color-orange)}.hap-card--black{box-shadow:inset 0 0 0 1px #ffffff80}.turn-actions{display:flex;flex-direction:column;align-items:center}.btn--gyul{width:100%;height:var(--ctrl-height);background:var(--color-orange);color:#fff;border-radius:var(--radius);padding:0;font-family:var(--font-dokdo);font-size:var(--fs-xl);font-weight:400;text-transform:uppercase;letter-spacing:normal;border:none}.game-over{display:flex;flex-direction:column;justify-content:space-between;flex:1;min-height:0;gap:40px}.game__participants-col:empty,.called-haps:empty{display:none}.game:has(.game-over){display:flex;flex-direction:column;align-items:stretch;height:100%;gap:0}.game:has(.game-over) .game__board-col{height:100%;flex:1;min-height:0}.game-over__scores{display:flex;flex-direction:column;gap:0;min-height:0;overflow:hidden}.scoreboard--scrollable{overflow-y:auto;min-height:0}.btn--new-game{width:100%;height:var(--ctrl-height);background:var(--color-orange);color:#fff;border-radius:var(--radius);padding:0;font-family:Sora,sans-serif;font-size:var(--fs-base);font-weight:700;border:none;cursor:pointer;flex-shrink:0}.scoreboard{display:grid;grid-template-columns:1fr;gap:16px}.scoreboard__row{display:flex;align-items:center;gap:16px;background:none;color:#fff;border-radius:var(--radius);border:4px solid color-mix(in srgb,#fff 50%,transparent);padding:0 24px;height:68px;font-family:var(--font-sora);font-weight:700;font-size:var(--fs-base)}.scoreboard__row--active{border-color:var(--color-orange)}.scoreboard__name{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.scoreboard__score{display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:700}.scoreboard__kick{background:none;border:none;cursor:pointer;padding:0;line-height:1}.scoreboard__kick img{width:20px;height:20px;filter:invert(27%) sepia(90%) saturate(700%) hue-rotate(330deg)}.called-haps h3{font-family:var(--font-dokdo);font-size:var(--fs-lg);line-height:32px;font-weight:400;text-transform:uppercase;letter-spacing:normal;margin:0 0 16px;height:var(--ctrl-height);display:flex;align-items:center;justify-content:center;color:#fff;text-align:center}.called-haps ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:16px}.claimed-hap{display:flex;align-items:center;gap:8px}.mini-card{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px}.mini-card--black{box-shadow:inset 0 0 0 1px #ffffff80}.scoreboard__row--gold{border-color:#ffd102;background:color-mix(in srgb,#FFD102 10%,white);color:#000}.scoreboard__row--silver{border-color:gray;background:color-mix(in srgb,#808080 10%,white);color:#000}.scoreboard__row--bronze{border-color:#fd7801;background:color-mix(in srgb,#fd7801 10%,white);color:#000}.scoreboard__row--gold .scoreboard__score,.scoreboard__row--silver .scoreboard__score,.scoreboard__row--bronze .scoreboard__score{color:#000}.scoreboard__rank{font-family:var(--font-sora);font-weight:700;font-size:var(--fs-base);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.scoreboard__rank--gold{color:#ffd102;background:#ffd10233}.scoreboard__rank--silver{color:gray;background:#80808033}.scoreboard__rank--bronze{color:#fd7801;background:#fd780133}@media (max-width: 760px){.game{grid-template-columns:1fr}}@media (max-width: 649px){.layout__header{padding-bottom:16px}.layout__content{padding-bottom:40px}.lobby-page .join-or-create{gap:16px}.lobby-page .join-or-create__column{width:100%}.participants-heading{height:fit-content}.room-page__participants{margin-top:0;padding-top:16px}.room-page .participants-grid{column-gap:16px}.room-page .participants-grid__name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-page .logo,.room-page .logo,.room-page .room-code__label{display:none}.lobby-page .btn-pill,.room-page .btn-pill{width:100%}.room-page .feedback-banner{width:100%;height:fit-content}.login-form,.login-page .field-row,.lobby-page .field-row{width:100%}.login-page .pill-form,.lobby-page .pill-form{flex:1;width:auto;min-width:0}.room-page .room-code__copy img{width:36px;height:36px}.layout__title{font-size:28px;line-height:28px}.layout__title-full{display:none}.layout__title-compact{display:inline}}@media (min-width: 650px) and (max-width: 1199px){.lobby-page .join-or-create{gap:40px}.lobby-page .btn-pill,.room-page .btn-pill,.login-page .pill-form,.lobby-page .pill-form{width:200px}.room-page .room-code__copy img{width:36px;height:36px}.game{grid-template-columns:1fr 2fr;align-items:start}.game__left-col{display:flex;flex-direction:column;gap:40px;min-width:0}.game__participants-col{max-height:calc(100vh - 240px);overflow:hidden}.game__participants-col .scoreboard{overflow-y:auto;min-height:0;flex:1}.layout__title{font-size:28px;line-height:28px}.btn--new-game{width:fit-content;align-self:center;padding:0 32px}}@media (min-width: 1200px){.game{align-items:start}.game__participants-col{max-height:calc(100vh - 240px);overflow:hidden}.game__participants-col .scoreboard{overflow-y:auto;min-height:0;flex:1}.layout__title{font-size:32px;line-height:32px}.btn--new-game{width:fit-content;align-self:center;padding:0 32px}}