@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Serif+Display:ital@0;1&display=swap";:root{--bg: #f5f2ed;--bg-warm: #efe9e0;--surface: #ffffff;--surface-alt: #f0ece6;--surface-hover: #e8e3db;--primary: #1c1c1e;--primary-light: #3a3a3c;--accent: #1a6b6d;--accent-hover: #145455;--accent-light: rgba(26, 107, 109, .08);--accent-subtle: rgba(26, 107, 109, .04);--secondary: #c4873b;--secondary-hover: #a8712f;--secondary-light: rgba(196, 135, 59, .08);--text: #1c1c1e;--text-secondary: #6b6b6e;--text-muted: #a0a0a4;--text-inverse: #ffffff;--danger: #c44040;--danger-light: rgba(196, 64, 64, .08);--success: #3a8a5c;--success-light: rgba(58, 138, 92, .08);--warning: #c4873b;--border: #e2ddd5;--border-light: #ebe6de;--border-focus: var(--accent);--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: "DM Serif Display", Georgia, serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--text-5xl: 3.5rem;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--weight-extrabold: 700;--leading-tight: 1.15;--leading-normal: 1.5;--leading-relaxed: 1.6;--tracking-tight: -.02em;--tracking-normal: 0;--tracking-wide: .02em;--tracking-wider: .08em;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 8px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .08), 0 4px 10px rgba(0, 0, 0, .04);--shadow-xl: 0 20px 40px rgba(0, 0, 0, .1);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease;--max-width-sm: 24rem;--max-width-md: 32rem;--max-width-lg: 48rem;--max-width-content: 56rem;--board-border: #d5cfc6;--board-shadow: rgba(0, 0, 0, .08)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100%;overscroll-behavior:none}body{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-normal);line-height:var(--leading-normal);color:var(--text);background:var(--bg);letter-spacing:var(--tracking-normal)}#root{height:100svh;width:100vw;overflow:hidden;position:relative}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:var(--weight-normal);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--primary)}a{color:var(--accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-hover)}button{font-family:inherit;cursor:pointer;border:none;background:none;font-size:inherit}input{font-family:inherit;font-size:inherit}ul,ol{list-style:none}img{max-width:100%;display:block}canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;border-radius:var(--radius-md);transition:all var(--transition-fast);white-space:nowrap;letter-spacing:var(--tracking-wide)}.btn:active{transform:scale(.97)}.btn-primary{background-color:var(--accent);color:var(--text-inverse);box-shadow:var(--shadow-sm)}.btn-primary:hover{background-color:var(--accent-hover);box-shadow:var(--shadow-md)}.btn-outline{background-color:transparent;color:var(--accent);border:1.5px solid var(--border)}.btn-outline:hover{border-color:var(--accent);background-color:var(--accent-light)}.btn-secondary{background-color:var(--surface-alt);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background-color:var(--surface-hover);border-color:var(--border)}.btn-danger{background-color:var(--danger-light);color:var(--danger);border:1px solid transparent}.btn-danger:hover{background-color:var(--danger);color:var(--text-inverse)}.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-full);display:inline-flex;align-items:center;justify-content:center}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base);border-radius:var(--radius-lg)}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}.btn img,.btn svg{width:18px;height:18px}.btn-lg img,.btn-lg svg{width:20px;height:20px}.card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}.card-body{padding:var(--space-6)}.input{width:100%;padding:var(--space-3) var(--space-4);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text);font-size:var(--text-base);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);outline:none}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.input-error{border-color:var(--danger)}.input-error:focus{box-shadow:0 0 0 3px var(--danger-light)}.error-text{font-size:var(--text-xs);color:var(--danger);margin-top:var(--space-1)}.top-banner{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;height:40px;background:var(--surface);border-bottom:1px solid var(--border-light);cursor:pointer;transition:background var(--transition-fast)}.top-banner:hover{background:var(--accent-subtle)}.top-banner__back{display:inline-flex;align-items:center;color:var(--accent);margin-right:var(--space-2)}.top-banner__back svg{display:block}.top-banner__text{font-family:var(--font-display);font-size:var(--text-sm);color:var(--text-secondary);letter-spacing:var(--tracking-wide)}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--text-inverse);flex-shrink:0}.badge{display:inline-block;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-semibold);border-radius:var(--radius-full);letter-spacing:var(--tracking-wide)}.badge-success{background:var(--success-light);color:var(--success)}.badge-danger{background:var(--danger-light);color:var(--danger)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:rgba(28,28,30,.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:fadeIn var(--transition-fast) ease}.modal{background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);padding:var(--space-8);max-width:var(--max-width-sm);width:calc(100% - var(--space-8));text-align:center;display:flex;flex-direction:column;gap:var(--space-4)}.modal h2{font-size:var(--text-xl)}.toast{position:fixed;right:var(--space-4);bottom:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);box-shadow:var(--shadow-lg);font-size:var(--text-sm);color:var(--accent);font-weight:var(--weight-medium);animation:toastIn var(--transition-base) ease,toastOut var(--transition-base) ease 2.5s forwards;z-index:300}.center-layout{display:flex;align-items:center;justify-content:center;height:100%;padding:var(--space-4)}.center-card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-8);max-width:var(--max-width-sm);width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.center-card h2{font-size:var(--text-xl)}.page-enter{animation:pageEnter var(--transition-base) ease}@keyframes pageEnter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.trial-badge{display:inline-block;padding:var(--space-2) var(--space-4);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--accent);background:var(--accent-light);border:1px solid var(--accent);border-radius:var(--radius-full);letter-spacing:var(--tracking-wide);text-align:center;margin-bottom:var(--space-2)}.paywall-overlay{margin-top:var(--space-6);text-align:center}.paywall-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.paywall-card h3{font-family:var(--font-display);font-size:var(--text-lg);color:var(--text)}.paywall-card p{font-size:var(--text-sm);color:var(--text-secondary)}.paywall-note{font-size:var(--text-xs);color:var(--text-muted);font-style:italic}.dev-panel{position:fixed;bottom:var(--space-4);right:var(--space-4);background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-lg);z-index:500;min-width:200px}.dev-panel__title{font-size:var(--text-xs);font-weight:var(--weight-bold);color:var(--accent);margin-bottom:var(--space-3);letter-spacing:var(--tracking-wide);text-transform:uppercase}.dev-panel__buttons{display:flex;gap:var(--space-2);margin-bottom:var(--space-3)}.dev-panel__status{font-size:var(--text-xs);color:var(--text-muted);font-family:monospace}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.landing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-10);height:100%;padding-top:48px;position:relative;overflow:hidden}.landing__bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at 50% 20%,rgba(26,107,109,.06) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(196,135,59,.04) 0%,transparent 50%)}.landing__header{text-align:center;z-index:1}.landing__subtitle{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);letter-spacing:var(--tracking-wider);text-transform:uppercase;margin-bottom:var(--space-2)}.landing__title{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:var(--weight-normal);color:var(--primary);letter-spacing:var(--tracking-tight);line-height:1}.landing__rink{display:flex;justify-content:center;margin-top:var(--space-6);margin-bottom:var(--space-4);opacity:0;animation:rinkReveal 1s ease .6s forwards}@keyframes rinkReveal{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.landing__tagline{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary);letter-spacing:var(--tracking-wider);text-transform:uppercase}.landing__actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);z-index:1}.landing__actions .btn{width:260px}.landing__actions .btn:nth-child(1){animation:slideUp .5s ease backwards;animation-delay:.15s}.landing__actions .btn:nth-child(2){animation:slideUp .5s ease backwards;animation-delay:.25s}.landing__actions .btn:nth-child(3){animation:slideUp .5s ease backwards;animation-delay:.35s}.landing__clear{position:fixed;top:var(--space-2);left:var(--space-2);font-size:var(--text-xs);color:var(--text-muted);z-index:10;opacity:.4;transition:opacity var(--transition-fast)}.landing__clear:hover{opacity:1;color:var(--accent)}.choose-name{display:flex;align-items:center;justify-content:center;height:100%;padding:var(--space-4)}.choose-name__card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-8);max-width:var(--max-width-sm);width:100%;display:flex;flex-direction:column;gap:var(--space-5)}.choose-name__title{font-size:var(--text-2xl);text-align:center}.choose-name__form{display:flex;flex-direction:column;gap:var(--space-3)}.games-layout{height:100%;display:flex;flex-direction:column;padding-top:40px}.games-layout__content{flex:1;overflow-y:auto}.available-games{max-width:var(--max-width-lg);margin:0 auto;padding:var(--space-4);height:100%;display:flex;flex-direction:column}.available-games__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-8) 0 var(--space-4)}.available-games__title{font-size:var(--text-3xl)}.available-games__list{display:flex;flex-direction:column;gap:var(--space-2)}.game-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-md);transition:all var(--transition-fast)}.game-row:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}.game-row--full{opacity:.6}.game-row--full:hover{opacity:.75;box-shadow:none;border-color:var(--border-light)}.game-row__info{display:flex;align-items:center;gap:var(--space-3)}.game-row__avatar{width:36px;height:36px;border-radius:var(--radius-full);background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--text-inverse);flex-shrink:0}.game-row__avatar--busy{background:var(--secondary)}.game-row__details{display:flex;flex-direction:column;gap:2px}.game-row__name{font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--text)}.game-row__status{font-size:var(--text-xs);color:var(--text-muted)}.game-row__status--open{color:var(--success)}.game-row__status--busy{color:var(--secondary)}.empty-state{text-align:center;padding:var(--space-12) var(--space-8);display:flex;flex-direction:column;align-items:center;gap:var(--space-4);color:var(--text-secondary)}.empty-state p{color:var(--text-muted);font-size:var(--text-sm)}.lobby{max-width:var(--max-width-lg);margin:0 auto;padding:var(--space-4);height:100%;display:flex;flex-direction:column;gap:var(--space-3)}.lobby__title{font-size:var(--text-3xl);text-align:center;padding:var(--space-4) 0}.lobby__toolbar{display:flex;align-items:center;justify-content:space-between}.lobby__toolbar-right{display:flex;align-items:center;gap:var(--space-2)}.lobby__players{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4)}.lobby__player-name{font-size:var(--text-xs);font-weight:var(--weight-medium);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text-secondary)}.lobby__player-name.is-ready{color:var(--success)}.lobby__chat{flex:1;display:flex;flex-direction:column-reverse;overflow-y:auto;background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--space-3);gap:var(--space-1)}.chat-message{display:flex;gap:var(--space-2);font-size:var(--text-sm);line-height:var(--leading-relaxed)}.chat-message__time{color:var(--text-muted);font-size:var(--text-xs);flex-shrink:0}.chat-message__user{font-weight:var(--weight-semibold);color:var(--accent);flex-shrink:0}.chat-message__user--me{color:var(--accent)}.chat-message__user--other{color:var(--secondary)}.chat-message__text{color:var(--text)}.lobby__input-row{display:flex;gap:var(--space-2)}.lobby__input-row .input{flex:1}.action-menu{position:relative}.action-menu__trigger{width:36px;height:36px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);cursor:pointer}.action-menu__trigger:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}.action-menu__dropdown{position:absolute;right:0;top:calc(100% + 4px);min-width:160px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1);opacity:0;visibility:hidden;transform:translateY(-4px);transition:all var(--transition-fast);z-index:50}.action-menu__dropdown.is-open{opacity:1;visibility:visible;transform:translateY(0)}.action-menu__item{width:100%;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--text);border-radius:var(--radius-sm);transition:all var(--transition-fast);cursor:pointer;background:none;border:none;font-family:inherit;text-align:left}.action-menu__item:hover{background:var(--surface-alt);color:var(--accent)}.action-menu__item--danger:hover{background:var(--danger-light);color:var(--danger)}.game-view{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;overflow:hidden;padding-top:var(--space-1)}.score-banner{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);height:48px;margin-bottom:var(--space-2);position:relative;box-shadow:var(--shadow-xs)}.score-banner__player{display:flex;flex-direction:column;align-items:center;padding:0 var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-medium)}.score-banner__player-name{color:var(--text-secondary)}.score-banner__player-score{font-family:var(--font-display);font-size:var(--text-lg);color:var(--primary)}.score-banner__timer{position:absolute;left:50%;transform:translate(-50%);font-family:var(--font-display);font-size:var(--text-lg);color:var(--primary)}.game-canvas{border-radius:var(--radius-lg);border:2px solid var(--board-border);box-shadow:0 4px 20px var(--board-shadow)}.online-users{max-width:var(--max-width-lg);margin:0 auto;padding:var(--space-4)}.online-users__header{padding:var(--space-8) 0 var(--space-4);text-align:center}.online-users__title{font-size:var(--text-3xl)}.online-users__count{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-1)}.online-users__list{display:flex;flex-direction:column;gap:var(--space-2)}.online-users__item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-md);transition:all var(--transition-fast);animation:slideUp .3s ease backwards}.online-users__item:hover{border-color:var(--border);box-shadow:var(--shadow-sm)}.online-users__status{width:8px;height:8px;border-radius:var(--radius-full);background:var(--success);flex-shrink:0}.online-users__avatar{width:36px;height:36px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--text-inverse);flex-shrink:0}.online-users__item-name{font-weight:var(--weight-medium);font-size:var(--text-sm)}.error-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--space-4);text-align:center;padding:var(--space-4)}.error-page h1{font-size:var(--text-3xl)}.error-page p{color:var(--text-secondary);max-width:360px}.status-screen{display:flex;align-items:center;justify-content:center;height:100%}.status-screen__text{font-weight:var(--weight-medium);font-size:var(--text-lg);color:var(--text-secondary)}.login{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-8);height:100%;position:relative;overflow:hidden}.login__bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at 50% 20%,rgba(26,107,109,.06) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(196,135,59,.04) 0%,transparent 50%)}.login__header{text-align:center;z-index:1}.login__subtitle{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted);letter-spacing:var(--tracking-wider);text-transform:uppercase;margin-bottom:var(--space-2)}.login__title{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:var(--weight-normal);color:var(--primary);letter-spacing:var(--tracking-tight);line-height:1}.login__rink{display:flex;justify-content:center;margin-top:var(--space-6);margin-bottom:var(--space-4);opacity:0;animation:rinkReveal 1s ease .6s forwards}.login__card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-8);max-width:var(--max-width-sm);width:calc(100% - var(--space-8));text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);z-index:1;animation:slideUp .5s ease backwards;animation-delay:.2s}.login__card-title{font-size:var(--text-xl)}.login__card-subtitle{font-size:var(--text-sm);color:var(--text-secondary)}.login__divider{width:100%;display:flex;align-items:center;gap:var(--space-3)}.login__divider-line{flex:1;height:1px;background:var(--border-light)}.login__google-btn{display:flex;justify-content:center;min-height:44px}.login__error{font-size:var(--text-sm);color:var(--danger)}.login__footer{font-size:var(--text-xs);color:var(--text-muted);z-index:1;animation:slideUp .5s ease backwards;animation-delay:.4s}.landing__user-bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 var(--space-4);background:var(--surface);border-bottom:1px solid var(--border-light)}.landing__user-info{display:flex;align-items:center;gap:var(--space-2)}.landing__user-avatar{width:30px;height:30px;border-radius:var(--radius-full);background:var(--accent);color:var(--text-inverse);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:var(--weight-bold)}.landing__user-name{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary)}@media (max-width: 640px){.landing__title{font-size:var(--text-4xl)}.landing__actions .btn{width:220px}.login__title{font-size:var(--text-4xl)}.login__card{padding:var(--space-6)}}.ripple{animation:titleReveal .8s ease-out}@keyframes titleReveal{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fabSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.is-loading{animation:pulse 1.8s ease-in-out infinite}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}