@import "https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Quicksand:wght@400;500;600;700&display=swap";:root{--board-green:#2d8a4e;--board-green-dark:#1a5c2a;--board-green-light:#3aad62;--wood-primary:#8b7355;--wood-dark:#6b5438;--wood-light:#a9946e;--wood-grain:#7a6348;--cream:#faf3e8;--cream-dark:#f0e6d4;--cream-light:#fffaf2;--gold:#c9a84c;--gold-light:#e0c872;--black-stone:#1a1a1a;--black-stone-highlight:#444;--white-stone:#f5f0e8;--white-stone-highlight:#fff;--text-primary:#2c2416;--text-secondary:#6b5d4f;--text-light:#9a8b7a;--shadow-sm:0 1px 3px #2c24161f;--shadow-md:0 4px 12px #2c241626;--shadow-lg:0 8px 30px #2c241633;--shadow-xl:0 16px 50px #2c241640;--font-display:"DM Serif Display", Georgia, serif;--font-body:"Quicksand", "Segoe UI", sans-serif;--board-cell-size:60px;--board-gap:2px;--transition-fast:.15s ease;--transition-normal:.3s ease;--transition-slow:.5s cubic-bezier(.4, 0, .2, 1)}@media (width<=640px){:root{--board-cell-size:calc((100vw - 80px) / 8)}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-body);background-color:var(--cream);color:var(--text-primary);min-height:100vh;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background-image:radial-gradient(circle at 20% 30%,#c9a84c0f 0%,#0000 50%),radial-gradient(circle at 80% 70%,#2d8a4e0d 0%,#0000 50%),radial-gradient(circle,#8b735508 0%,#0000 70%);position:fixed;inset:0}body:after{content:"";opacity:.025;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");position:fixed;inset:0}#root{z-index:1;min-height:100vh;position:relative}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px #c9a84c4d,inset 0 0 4px #c9a84c1a}50%{box-shadow:0 0 16px #c9a84c80,inset 0 0 8px #c9a84c33}}@keyframes stone-place{0%{opacity:0;transform:scale(0)rotate(-45deg)}60%{opacity:1;transform:scale(1.15)rotate(5deg)}80%{transform:scale(.95)rotate(-2deg)}to{transform:scale(1)rotate(0)}}@keyframes stone-flip{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes modal-in{0%{opacity:0;transform:scale(.8)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes backdrop-in{0%{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}to{opacity:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes count-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes light-float{0%,to{opacity:.4;transform:translate(0)scale(1)}25%{opacity:.7;transform:translate(30px,-20px)scale(1.2)}50%{opacity:.3;transform:translate(-10px,-40px)scale(.9)}75%{opacity:.6;transform:translate(-30px,-15px)scale(1.1)}}.page{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px;animation:.5s fadeIn;display:flex}.home-page{gap:40px;position:relative}.home-page__lights{pointer-events:none;position:absolute;inset:0;overflow:hidden}.home-page__light{filter:blur(80px);border-radius:50%;width:200px;height:200px;animation:12s ease-in-out infinite light-float;position:absolute}.home-page__light:first-child{background:#c9a84c26;animation-delay:0s;top:10%;left:15%}.home-page__light:nth-child(2){background:#2d8a4e1f;animation-delay:-4s;top:60%;right:10%}.home-page__light:nth-child(3){background:#8b73551a;animation-delay:-8s;bottom:15%;left:40%}.home-page__title{font-family:var(--font-display);color:var(--text-primary);letter-spacing:.15em;text-align:center;font-size:clamp(3rem,8vw,5.5rem);animation:.8s fadeInScale;position:relative}.home-page__title:after{content:"";background:linear-gradient(90deg, transparent, var(--gold), transparent);width:60%;height:2px;margin:12px auto 0;display:block}.home-page__subtitle{font-family:var(--font-body);color:var(--text-light);letter-spacing:.3em;text-transform:uppercase;margin-top:-20px;font-size:1rem;animation:.8s .2s both fadeIn}.home-page__modes{gap:24px;animation:.6s .3s both slideUp;display:flex}@media (width<=640px){.home-page__modes{flex-direction:column;gap:16px;width:100%;max-width:320px}}.mode-card{background:linear-gradient(145deg, var(--cream-light), var(--cream-dark));cursor:pointer;width:240px;transition:all var(--transition-normal);box-shadow:var(--shadow-md);text-align:center;border:1px solid #8b735533;border-radius:16px;padding:36px 32px;position:relative;overflow:hidden}@media (width<=640px){.mode-card{width:100%}}.mode-card:before{content:"";opacity:0;transition:opacity var(--transition-normal);background:linear-gradient(135deg,#c9a84c14,#0000 60%);position:absolute;inset:0}.mode-card:hover{box-shadow:var(--shadow-xl);border-color:var(--gold);transform:translateY(-4px)}.mode-card:hover:before{opacity:1}.mode-card__icon{margin-bottom:16px;font-size:2.5rem;display:block}.mode-card__title{font-family:var(--font-display);color:var(--text-primary);margin-bottom:8px;font-size:1.3rem}.mode-card__desc{color:var(--text-secondary);font-size:.85rem;line-height:1.5}.game-page{gap:16px;padding:16px}.game-page__header{align-items:center;gap:12px;animation:.4s fadeIn;display:flex}.back-button{font-family:var(--font-body);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:1px solid #8b73554d;border-radius:8px;padding:8px 16px;font-size:.85rem;font-weight:600}.back-button:hover{color:var(--text-primary);border-color:var(--wood-primary);background:#8b73551a}.game-page__title{font-family:var(--font-display);color:var(--text-primary);font-size:1.2rem}.game-page__content{align-items:center;gap:24px;animation:.6s fadeInScale;display:flex}@media (width<=768px){.game-page__content{flex-direction:column;gap:16px}}.score-panel{flex-direction:column;align-items:center;gap:12px;min-width:100px;display:flex}@media (width<=768px){.score-panel{flex-direction:row;justify-content:center;width:100%;min-width:auto}}.score-item{background:linear-gradient(145deg, var(--cream-light), var(--cream-dark));box-shadow:var(--shadow-sm);transition:all var(--transition-normal);border:1px solid #8b735526;border-radius:12px;align-items:center;gap:10px;min-width:100px;padding:12px 16px;display:flex}.score-item--active{border-color:var(--gold);box-shadow:0 0 12px #c9a84c33}.score-item__stone{border-radius:50%;flex-shrink:0;width:28px;height:28px}.score-item__stone--black{background:radial-gradient(circle at 35% 35%, var(--black-stone-highlight), var(--black-stone));box-shadow:1px 1px 3px #0006}.score-item__stone--white{background:radial-gradient(circle at 35% 35%, var(--white-stone-highlight), var(--white-stone));box-shadow:1px 1px 3px #00000026}.score-item__count{font-family:var(--font-display);color:var(--text-primary);text-align:center;min-width:28px;font-size:1.5rem}.score-item__count--animate{animation:.3s count-up}.turn-label{color:var(--gold);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;font-weight:600}.board-frame{background:repeating-linear-gradient(90deg, transparent, transparent 2px, #6b54381a 2px, #6b54381a 4px), linear-gradient(180deg, var(--wood-light) 0%, var(--wood-primary) 20%, var(--wood-dark) 50%, var(--wood-primary) 80%, var(--wood-light) 100%);box-shadow:var(--shadow-xl), inset 0 2px 4px #ffffff26, inset 0 -2px 4px #00000026;border-radius:12px;padding:16px;position:relative}.board-frame:before{content:"";pointer-events:none;border:2px solid #c9a84c4d;border-radius:9px;position:absolute;inset:4px}.board{grid-template-columns:repeat(8, var(--board-cell-size));grid-template-rows:repeat(8, var(--board-cell-size));gap:var(--board-gap);background:var(--board-green-dark);padding:var(--board-gap);border-radius:4px;display:grid;position:relative}.cell{width:var(--board-cell-size);height:var(--board-cell-size);background:linear-gradient(135deg, var(--board-green-light) 0%, var(--board-green) 50%, var(--board-green-dark) 100%);cursor:default;transition:background var(--transition-fast);justify-content:center;align-items:center;display:flex;position:relative}.cell:after{content:"";pointer-events:none;border:.5px solid #00000026;position:absolute;inset:0}.cell--valid{cursor:pointer}.cell--valid:before{content:"";z-index:1;background:#c9a84c59;border-radius:50%;width:35%;height:35%;animation:2s ease-in-out infinite pulse-glow;position:absolute}.cell--valid:hover{background:linear-gradient(135deg,#3cb862 0%,#35a858 50%,#2d8a4e 100%)}.cell--valid:hover:before{background:#c9a84c40;width:70%;height:70%}.cell--last-move:after{border-color:var(--gold);border-width:1.5px}.stone{z-index:2;width:80%;height:80%;transform-style:preserve-3d;border-radius:50%;position:relative}.stone--placed{animation:.4s cubic-bezier(.34,1.56,.64,1) stone-place}.stone--black{background:radial-gradient(circle at 35% 30%,#555 0%,#333 25%,#1a1a1a 60%,#111 100%);box-shadow:2px 3px 6px #00000080,inset 0 -2px 4px #0006,inset 0 2px 3px #ffffff14}.stone--white{background:radial-gradient(circle at 35% 30%,#fff 0%,#f5f0e8 25%,#e8e0d0 60%,#ddd5c5 100%);box-shadow:2px 3px 6px #00000040,inset 0 -2px 4px #0000000f,inset 0 2px 3px #fffc}.stone--flipping{animation:.5s ease-in-out stone-flip}.turn-indicator{color:var(--text-primary);background:linear-gradient(145deg, var(--cream-light), var(--cream-dark));border:1px solid #8b735526;border-radius:8px;align-items:center;gap:8px;padding:8px 16px;font-size:.9rem;font-weight:600;display:flex}.turn-indicator__dot{width:12px;height:12px;transition:background var(--transition-normal);border-radius:50%}.turn-indicator__dot--black{background:var(--black-stone);box-shadow:0 1px 2px #0000004d}.turn-indicator__dot--white{background:var(--white-stone);border:1px solid #0000001a;box-shadow:0 1px 2px #0000001a}.difficulty-select{flex-direction:column;align-items:center;gap:24px;animation:.5s fadeInScale;display:flex}.difficulty-select__title{font-family:var(--font-display);color:var(--text-primary);font-size:1.8rem}.difficulty-select__options{gap:16px;display:flex}@media (width<=640px){.difficulty-select__options{flex-direction:column;width:100%;max-width:280px}}.difficulty-btn{background:linear-gradient(145deg, var(--cream-light), var(--cream-dark));font-family:var(--font-body);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md);text-align:center;border:2px solid #8b735533;border-radius:12px;padding:20px 28px}.difficulty-btn:hover{box-shadow:var(--shadow-lg);border-color:var(--gold);transform:translateY(-3px)}.difficulty-btn__name{font-family:var(--font-display);color:var(--text-primary);margin-bottom:4px;font-size:1.1rem}.difficulty-btn__desc{color:var(--text-secondary);font-size:.8rem}.lobby{flex-direction:column;align-items:center;gap:24px;width:100%;max-width:400px;animation:.5s fadeInScale;display:flex}.lobby__title{font-family:var(--font-display);color:var(--text-primary);font-size:1.8rem}.lobby__section{background:linear-gradient(145deg, var(--cream-light), var(--cream-dark));width:100%;box-shadow:var(--shadow-md);border:1px solid #8b735526;border-radius:16px;padding:24px}.lobby__section-title{font-family:var(--font-display);color:var(--text-primary);text-align:center;margin-bottom:16px;font-size:1.1rem}.lobby__room-code{justify-content:center;align-items:center;gap:8px;margin:16px 0;display:flex}.lobby__room-code__chars{gap:6px;display:flex}.lobby__room-code__char{width:44px;height:52px;font-family:var(--font-display);color:var(--text-primary);background:var(--cream);border:2px solid var(--gold);box-shadow:var(--shadow-sm);border-radius:8px;justify-content:center;align-items:center;font-size:1.4rem;display:flex}.lobby__copy-btn{background:var(--gold);color:#fff;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast);border:none;border-radius:8px;padding:8px 12px;font-size:.8rem;font-weight:600}.lobby__copy-btn:hover{background:var(--gold-light)}.lobby__room-hint{color:var(--text-light);text-align:center;margin-top:8px;font-size:.85rem}.lobby__room-hint strong{color:var(--text-secondary);letter-spacing:2px}.lobby__waiting{text-align:center;color:var(--text-secondary)}.lobby__waiting__spinner{border:3px solid var(--cream-dark);border-top-color:var(--gold);border-radius:50%;width:32px;height:32px;margin:12px auto;animation:1s linear infinite spin-slow}.lobby__input-group{gap:8px;display:flex}.lobby__input{font-family:var(--font-body);letter-spacing:.15em;text-transform:uppercase;text-align:center;background:var(--cream-light);color:var(--text-primary);transition:border-color var(--transition-fast);border:2px solid #8b735533;border-radius:8px;outline:none;flex:1;padding:10px 14px;font-size:1rem;font-weight:600}.lobby__input:focus{border-color:var(--gold)}.lobby__input::placeholder{color:var(--text-light);text-transform:none;letter-spacing:normal}.lobby__join-btn{background:var(--board-green);color:#fff;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast);border:none;border-radius:8px;padding:10px 20px;font-size:.9rem;font-weight:700}.lobby__join-btn:hover{background:var(--board-green-light)}.lobby__create-btn{background:linear-gradient(135deg, var(--board-green), var(--board-green-dark));color:#fff;width:100%;font-family:var(--font-body);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md);border:none;border-radius:10px;padding:14px;font-size:1rem;font-weight:700}.lobby__create-btn:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.modal-overlay{z-index:100;background:#2c241680;justify-content:center;align-items:center;animation:.3s backdrop-in;display:flex;position:fixed;inset:0}.modal{background:linear-gradient(145deg, var(--cream-light), var(--cream));text-align:center;box-shadow:var(--shadow-xl);border:1px solid #c9a84c4d;border-radius:20px;width:90%;max-width:360px;padding:40px 48px;animation:.4s cubic-bezier(.34,1.56,.64,1) modal-in}.modal__result-icon{margin-bottom:16px;font-size:3rem;display:block}.modal__title{font-family:var(--font-display);color:var(--text-primary);margin-bottom:8px;font-size:1.8rem}.modal__score{color:var(--text-secondary);margin-bottom:24px;font-size:1.1rem}.modal__score span{font-family:var(--font-display);font-size:1.3rem;font-weight:700}.modal__buttons{justify-content:center;gap:12px;display:flex}.modal__btn{font-family:var(--font-body);cursor:pointer;transition:all var(--transition-normal);border:none;border-radius:10px;padding:12px 24px;font-size:.9rem;font-weight:700}.modal__btn--primary{background:linear-gradient(135deg, var(--board-green), var(--board-green-dark));color:#fff;box-shadow:var(--shadow-md)}.modal__btn--primary:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.modal__btn--secondary{color:var(--text-secondary);background:0 0;border:1px solid #8b73554d}.modal__btn--secondary:hover{color:var(--text-primary);background:#8b73551a}.disconnect-notice{color:#8b3030;text-align:center;background:#c832321a;border:1px solid #c832324d;border-radius:10px;padding:12px 20px;font-size:.9rem;font-weight:600;animation:.3s fadeIn}.pass-notice{color:var(--text-secondary);background:#c9a84c1a;border:1px solid #c9a84c4d;border-radius:8px;padding:8px 16px;font-size:.85rem;font-weight:600;animation:.3s fadeIn}.loading{color:var(--text-secondary);justify-content:center;align-items:center;gap:12px;font-weight:600;display:flex}.loading__spinner{border:3px solid var(--cream-dark);border-top-color:var(--gold);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin-slow}.error-message{color:#8b3030;text-align:center;background:#c8323214;border:1px solid #c8323233;border-radius:10px;padding:12px 20px;font-size:.85rem;font-weight:600}.game-info-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;animation:.4s .2s both fadeIn;display:flex}@media (width<=640px){.game-info-bar{gap:8px}}