: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;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}*{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;min-height:100vh;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:60px;height:60px;padding:0;border-radius:16px;background:#fd7801;border:none}.icon-btn img{width:40px;height:40px}.icon-btn__back{transform:scaleX(-1)}.icon-btn--spacer{background:transparent;visibility:hidden}.layout__title{flex:1;text-align:center;font-family:var(--font-dokdo);font-size:40px;line-height:40px;font-weight:400;text-transform:uppercase;letter-spacing:normal;color:#fff;margin:0}.layout__content{flex:1;display:flex;flex-direction:column;align-items:center;padding:0 100px 100px}.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:40px;line-height:1;text-transform:uppercase;color:#000}.rules-card__body{margin:0;font-family:var(--font-sora);font-size:16px;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:16px;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:16px;font-weight:700;color:#000}.logo{text-align:center;font-weight:400;letter-spacing:.06em;text-transform:uppercase;margin:0;line-height:1;height:fit-content}.logo--large{font-size:clamp(2.4rem,7vw,3.6rem)}.logo--small{font-size:clamp(1.6rem,5vw,2.2rem)}.logo--hero{font-family:var(--font-dokdo);font-size:120px;letter-spacing:normal;text-transform:uppercase;text-shadow:0 4px 10px rgba(0,0,0,.6)}.logo--hero .logo__word--hap{color:#ffd102}.logo--hero .logo__word--gyul{color:#fd484f}.logo--hero .logo__bang--blue{color:#0649d5}.logo__word--hap{color:var(--color-yellow)}.logo__word--gyul{color:var(--color-red)}.logo__bang{display:inline-block}.logo__bang--blue{color:var(--color-blue)}.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:1.3rem;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:60px;line-height:60px;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:60px;border-radius:16px;background:#fd7801;font-family:var(--font-sora);font-weight:700;font-size:20px;letter-spacing:normal;text-transform:none;padding:0}.room-page{margin:0;flex:1;width:100%;max-width:none;padding:0 100px 100px;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:60px;line-height:60px;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:40px;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:20px;letter-spacing:normal;color:#fff}.room-page .btn-pill{width:240px;max-width:100%;height:60px;border-radius:16px;background:#fd7801;color:#fff;font-family:var(--font-sora);font-weight:700;font-size:20px;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:40px;line-height:40px;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:16px;height:60px;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:20px;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:60px;height:60px;border-radius:16px;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:40px;height:40px}.field-label{text-transform:uppercase;letter-spacing:.08em;color:var(--color-ink);font-size:1.05rem;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:1.05rem;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:16px;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:16px;padding:.85rem 2rem;font-size:1.05rem;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:1.3rem;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:16px;background:transparent;border:1.5px solid var(--color-ink);color:var(--color-ink);padding:0;font-size:.85rem;line-height:1}.room-page .participants-heading{font-size:40px;line-height:40px}.participants-heading{font-family:var(--font-dokdo);font-size:32px;line-height:32px;font-weight:400;text-transform:uppercase;letter-spacing:normal;color:#fff;margin:0 0 16px;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:1.05rem;font-weight:600;letter-spacing:.02em}.game{width:100%;display:grid;grid-template-columns:1fr 2fr 1fr;gap:40px;align-items:start}.game__participants-col{display:flex;flex-direction:column}.game__board-col{display:flex;flex-direction:column;gap:16px;height:calc(100vh - 240px);overflow:hidden}.feedback-banner{border-radius:16px;padding:16px 32px;display:flex;align-items:center;justify-content:center;text-align:center;gap:.75rem;font-family:var(--font-sora);font-weight:700;font-size:20px}.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}.timer-bar{display:inline-flex;align-items:center;gap:8px;flex:1;min-width:0}.timer-bar__track{flex:1;min-width:0;height:8px;border-radius:4px;background:color-mix(in srgb,var(--color-orange) 20%,white);overflow:hidden}.timer-bar__fill{display:block;height:100%;border-radius:4px;background:var(--color-orange);transition:width 1s linear}.timer-bar__value{font-family:var(--font-sora);font-weight:700;font-size:20px;color:var(--color-orange);min-width:1.4em;text-align:right}.board-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,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:16px;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:60px;background:var(--color-orange);color:#fff;border-radius:16px;padding:0;font-family:var(--font-dokdo);font-size:40px;font-weight:400;text-transform:uppercase;letter-spacing:normal;border:none}.scoreboard{display:grid;grid-template-columns:1fr;gap:16px}.scoreboard__row{display:flex;align-items:center;gap:16px;background:#fff;color:#000;border-radius:16px;padding:0 24px;height:68px;font-family:var(--font-sora);font-weight:700;font-size:20px;border:4px solid transparent}.scoreboard__row--active{border-color:var(--color-orange)}.scoreboard__name{display:flex;align-items:center;gap:16px;flex:1;min-width:0}.scoreboard__score{display:flex;align-items:center;gap:.5rem;color:#000;font-weight:700}.scoreboard__kick{margin-left:auto;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:32px;line-height:32px;font-weight:400;text-transform:uppercase;letter-spacing:normal;margin:0 0 16px;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)}.scoreboard__row--silver{border-color:gray;background:color-mix(in srgb,#808080 10%,white)}.scoreboard__row--bronze{border-color:#fd7801;background:color-mix(in srgb,#fd7801 10%,white)}.scoreboard__rank{font-family:var(--font-sora);font-weight:700;font-size:20px;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}}