/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid}}}@layer theme{:host,:root{--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.flex{display:flex}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.border{border-style:var(--tw-border-style);border-width:1px}}:root{--cell-size:64px;--cell-gap:8px;--board-radius:24px}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow:hidden}body{color:#fff;background:radial-gradient(#0d1b2a 0,#0a0a1a 70%,#000 100%);font-family:Segoe UI,system-ui,-apple-system,sans-serif}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.menu-overlay{z-index:50;flex-direction:column;justify-content:center;align-items:center;gap:32px;display:flex;position:fixed;inset:0}.menu-title{-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 40px #ff6b354d);letter-spacing:4px;text-align:center;background:linear-gradient(135deg,gold,#ff6b35,#ff0040);-webkit-background-clip:text;background-clip:text;font-size:clamp(3rem,8vw,6rem);font-weight:900;line-height:1}.menu-subtitle{color:#ffffff80;letter-spacing:8px;text-transform:uppercase;margin-top:-16px;font-size:1.1rem}.menu-buttons{flex-direction:column;align-items:center;gap:16px;display:flex}.menu-btn{cursor:pointer;text-transform:uppercase;letter-spacing:2.5px;color:#fff;border:none;border-radius:18px;outline:none;width:380px;max-width:85vw;padding:20px 44px;font-size:1.1rem;font-weight:700;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s;position:relative;overflow:hidden}.menu-btn:before{border-radius:18px;inset:0}.menu-btn:after,.menu-btn:before{content:"";transition:opacity .4s;position:absolute}.menu-btn:after{background:#00000026;border-radius:17px;inset:1px}.menu-btn span{z-index:2;justify-content:center;align-items:center;gap:12px;display:flex;position:relative}.menu-btn:hover{transform:translateY(-4px)scale(1.03)}.menu-btn:active{transform:translateY(-1px)scale(1.01)}.menu-btn-ai{background:linear-gradient(145deg,#2a0a0a,#1a0505);box-shadow:0 0 0 1px #ff3c1e33,0 0 30px #ff3c1e14,inset 0 1px #ffffff0f,inset 0 -1px #0000004d,0 8px 32px #0006}.menu-btn-ai:before{opacity:.15;background:linear-gradient(135deg,#ff2d00,#f06)}.menu-btn-ai:after{background:linear-gradient(135deg,#ff2d0014,#ff006608)}.menu-btn-ai span{-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px #ff2d004d);background:linear-gradient(135deg,#ff6b35,#ff0040);-webkit-background-clip:text;background-clip:text}.menu-btn-ai:hover{box-shadow:0 0 0 1px #ff3c1e66,0 0 50px #ff3c1e26,0 0 100px #ff3c1e0d,inset 0 1px #ffffff14,inset 0 -1px #0000004d,0 12px 48px #00000080}.menu-btn-ai:hover:before{opacity:.25}.menu-btn-friend{background:linear-gradient(145deg,#1a0f1a,#0f0a15);box-shadow:0 0 0 1px #b48cff26,0 0 30px #b48cff0d,inset 0 1px #ffffff0f,inset 0 -1px #0000004d,0 8px 32px #0006}.menu-btn-friend:before{opacity:.12;background:linear-gradient(135deg,#8b5cf6,#d946ef,#f59e0b)}.menu-btn-friend:after{background:linear-gradient(135deg,#8b5cf60f,#d946ef05)}.menu-btn-friend span{-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px #8b5cf640);background:linear-gradient(135deg,#a78bfa,#e879f9,#fbbf24);-webkit-background-clip:text;background-clip:text}.menu-btn-friend:hover{box-shadow:0 0 0 1px #b48cff59,0 0 50px #b48cff1f,0 0 100px #b48cff0a,inset 0 1px #ffffff14,inset 0 -1px #0000004d,0 12px 48px #00000080}.menu-btn-friend:hover:before{opacity:.22}.menu-btn-join{background:linear-gradient(145deg,#0a1a14,#050f0a);box-shadow:0 0 0 1px #14dc9626,0 0 30px #14dc960d,inset 0 1px #ffffff0f,inset 0 -1px #0000004d,0 8px 32px #0006}.menu-btn-join:before{opacity:.12;background:linear-gradient(135deg,#10b981,#06b6d4)}.menu-btn-join:after{background:linear-gradient(135deg,#10b9810f,#06b6d405)}.menu-btn-join span{-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px #10b98140);background:linear-gradient(135deg,#34d399,#22d3ee);-webkit-background-clip:text;background-clip:text}.menu-btn-join:hover{box-shadow:0 0 0 1px #14dc9659,0 0 50px #14dc961f,0 0 100px #14dc960a,inset 0 1px #ffffff14,inset 0 -1px #0000004d,0 12px 48px #00000080}.menu-btn-join:hover:before{opacity:.22}.board-wrapper{flex-direction:column;justify-content:center;align-items:center;gap:24px;height:100vh;display:flex}.board-frame,.board-wrapper{padding:20px;position:relative}.board-frame{border-radius:var(--board-radius);background:linear-gradient(145deg,#1a0e0a,#3a2018,#1a0e0a);box-shadow:0 20px 60px #000000b3,0 0 0 2px #5a3a2a,inset 0 1px 3px #ffffff1a,inset 0 -3px 6px #00000080}.board-frame:before{content:"";border-radius:calc(var(--board-radius) - 4px);pointer-events:none;background:linear-gradient(#ffffff08,#0000);position:absolute;inset:4px}.board-inner{padding:var(--cell-gap);z-index:0;position:relative;overflow:visible;box-shadow:inset 0 0 40px #0009,inset 0 2px 4px #ffffff0d}.board-inner,.board-inner:after{background:linear-gradient(#1a2940,#0d1b2a 50%,#0a1628);border-radius:16px}.board-inner:after{content:"";z-index:10;pointer-events:none;-webkit-mask:radial-gradient(circle at calc(var(--cell-gap) + var(--cell-size) / 2) calc(var(--cell-gap) + var(--cell-size) / 2),transparent calc(var(--cell-size) / 2),black calc(var(--cell-size) / 2 + 1px));mask:radial-gradient(circle at calc(var(--cell-gap) + var(--cell-size) / 2) calc(var(--cell-gap) + var(--cell-size) / 2),transparent calc(var(--cell-size) / 2),black calc(var(--cell-size) / 2 + 1px));-webkit-mask-size:calc(var(--cell-size) + var(--cell-gap)) calc(var(--cell-size) + var(--cell-gap));mask-size:calc(var(--cell-size) + var(--cell-gap)) calc(var(--cell-size) + var(--cell-gap));position:absolute;inset:0;-webkit-mask-repeat:repeat;mask-repeat:repeat}.board-grid{grid-template-columns:repeat(7,var(--cell-size));display:grid}.board-grid,.column{gap:var(--cell-gap);position:relative}.column{cursor:pointer;flex-direction:column;display:flex}.column:before{content:"";width:calc(var(--cell-size) * .5);pointer-events:none;opacity:0;background:radial-gradient(#ffffff14,#0000);border-radius:50%;height:50px;transition:opacity .3s;position:absolute;top:-60px;left:50%;transform:translate(-50%)}.column:hover:before{opacity:1}.column-highlight{width:var(--cell-size);height:var(--cell-size);opacity:0;z-index:10;pointer-events:none;border-radius:50%;transition:opacity .2s;position:absolute;top:-40px;left:50%;transform:translate(-50%)}.column:hover .column-highlight{opacity:.6}.cell{width:var(--cell-size);height:var(--cell-size);background:0 0;border-radius:50%;position:relative;overflow:visible}.cell:before{content:"";pointer-events:none;z-index:11;border:2px solid #3c3c5a59;border-radius:50%;position:absolute;inset:0}.column:hover .cell{box-shadow:inset 0 4px 12px #000000e6,inset 0 -2px 4px #ffffff14,0 0 0 2px #6464a066}.token{z-index:1;border-radius:50%;position:absolute;inset:0;overflow:hidden}.token:before{z-index:6;background:conic-gradient(from 45deg,#0000 0deg,#ffffff40 30deg,#ffffff0d 60deg,#0000 90deg,#ffffff26 120deg,#0000 180deg,#fff3 210deg,#0000 270deg,#ffffff1a 300deg,#0000 1turn);border-radius:50%;inset:-1px;-webkit-mask:radial-gradient(circle,#0000 20%,#000 60%);mask:radial-gradient(circle,#0000 20%,#000 60%)}.token:after,.token:before{content:"";pointer-events:none;position:absolute}.token:after{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);z-index:7;width:58%;height:58%;top:50%;left:50%;transform:translate(-50%,-50%)}.token-red{background:linear-gradient(145deg,#e60000,#c00 40%,#b30000 70%,#900);box-shadow:inset 0 2px 4px #ffb4b433,inset 0 -3px 6px #0006,inset 0 0 0 2px #b41e1e66,0 4px 8px #00000080}.token-red:after{background:#78000059}.token-yellow{background:linear-gradient(145deg,gold,#e6c200 40%,#cca800 70%,#b8960f);box-shadow:inset 0 2px 4px #fff0b440,inset 0 -3px 6px #0006,inset 0 0 0 2px #b4a01e66,0 4px 8px #00000080}.token-yellow:after{background:#8c780059}.token-preview{opacity:0;transform:scale(.8)}.column:hover .token-preview.token-red,.column:hover .token-preview.token-yellow{opacity:.5}.token-dropping{animation:tokenDrop var(--drop-duration,.4s) cubic-bezier(.22,.61,.36,1) forwards}@keyframes tokenDrop{0%{transform:translateY(calc(var(--drop-distance) * -1));opacity:0}15%{opacity:1}60%{transform:translateY(8px)}72%{transform:translateY(-4px)}82%{transform:translateY(2px)}90%{transform:translateY(-1px)}95%{transform:translateY(.5px)}to{opacity:1;transform:translateY(0)}}.token-winning{animation:winPulse .6s ease-in-out infinite alternate}@keyframes winPulse{0%{filter:brightness();box-shadow:var(--win-glow-start,0 0 10px #ffffff80);transform:scale(1)}to{filter:brightness(1.3);box-shadow:var(--win-glow-end,0 0 30px #fffc);transform:scale(1.08)}}.token-red.token-winning{--win-glow-start:0 0 10px #ff323299;--win-glow-end:0 0 40px #ff3232e6,0 0 60px #ff323266}.token-yellow.token-winning{--win-glow-start:0 0 10px #ffd70099;--win-glow-end:0 0 40px #ffd700e6,0 0 60px #ffd70066}.token-clearing{animation:clearFall var(--clear-duration,.6s) ease-in forwards}@keyframes clearFall{0%{opacity:1;transform:translateY(0)}to{transform:translateY(calc(var(--clear-distance,200px)));opacity:0}}.win-bar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:20px 32px;animation:winBarIn .5s ease-out both;display:flex}@keyframes winBarIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.win-bar-title{text-align:center;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;line-height:1.2}.win-title-red{filter:drop-shadow(0 0 20px #ff00404d);background:linear-gradient(135deg,#ff6b6b,#ff0040);-webkit-background-clip:text;background-clip:text}.win-title-red,.win-title-yellow{-webkit-text-fill-color:transparent}.win-title-yellow{filter:drop-shadow(0 0 20px #ffd7004d);background:linear-gradient(135deg,#fff176,gold);-webkit-background-clip:text;background-clip:text}.win-title-draw{color:#89a;filter:drop-shadow(0 0 20px #89a3)}.win-title-win{filter:drop-shadow(0 0 20px #38ef7d4d);background:linear-gradient(135deg,#38ef7d,#11998e);-webkit-background-clip:text;background-clip:text}.win-title-lose,.win-title-win{-webkit-text-fill-color:transparent}.win-title-lose{filter:drop-shadow(0 0 20px #ff6b6b4d);background:linear-gradient(135deg,#ff6b6b,#ee5a24);-webkit-background-clip:text;background-clip:text}.win-bar-buttons{gap:12px;animation:winBarIn .5s ease-out .15s both;display:flex}.win-btn{cursor:pointer;text-transform:uppercase;letter-spacing:1.5px;color:#fff;border:none;border-radius:14px;padding:16px 40px;font-size:1.1rem;font-weight:700;transition:all .3s}.win-btn:hover{transform:translateY(-3px)}.win-btn-rematch{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 8px 24px #667eea66}.win-btn-menu{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3}.win-btn-menu:hover{background:#fff3}.game-header{justify-content:space-between;align-items:center;width:100%;max-width:600px;padding:0 8px;display:flex}.game-status{color:#ffffffb3;text-align:center;letter-spacing:1px;font-size:1.05rem}.game-turn{font-size:1.2rem;font-weight:700}.turn-red{color:#f44}.turn-yellow{color:gold}.game-back-btn{color:#ffffffb3;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:10px;padding:10px 20px;font-size:.9rem;text-decoration:none;transition:all .3s}.game-back-btn:hover{color:#fff;background:#ffffff26}.share-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;align-items:center;gap:12px;padding:20px 32px;animation:overlayIn .5s ease-out;display:flex}.share-title{color:#fffc;font-size:1.1rem;font-weight:600}.share-link{color:gold;letter-spacing:1px;text-align:center;-webkit-user-select:all;user-select:all;background:#0006;border:1px solid #ffffff1f;border-radius:10px;padding:12px 20px;font-family:monospace;font-size:.95rem}.share-waiting{color:#ffffff80;font-size:.9rem;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{50%{opacity:.5}}.join-container{flex-direction:column;align-items:center;gap:24px;padding:20px;display:flex}.join-title{font-size:2rem;font-weight:700}.join-input-group{align-items:center;gap:12px;display:flex}.join-input{color:#fff;text-align:center;letter-spacing:3px;text-transform:uppercase;background:#ffffff0d;border:2px solid #ffffff26;border-radius:12px;outline:none;width:200px;padding:14px 20px;font-family:monospace;font-size:1.1rem;transition:all .3s}.join-input:focus{background:#ffffff14;border-color:#667eea99;box-shadow:0 0 20px #667eea33}.join-input::placeholder{color:#fff3;letter-spacing:1px}@media (max-width:600px){:root{--cell-size:42px;--cell-gap:5px;--board-radius:16px}.board-frame{padding:12px}.board-inner{border-radius:10px;padding:5px}.menu-btn{width:300px;padding:16px 24px;font-size:1rem}.menu-title{font-size:clamp(2.2rem,10vw,3rem)}.column-highlight,.column:before{display:none}.win-buttons{flex-direction:column}}@media (min-width:601px) and (max-width:900px){:root{--cell-size:52px;--cell-gap:6px}}@media (min-width:1200px){:root{--cell-size:72px;--cell-gap:10px;--board-radius:28px}.board-frame{padding:24px}.board-inner{border-radius:18px;padding:12px}}.bg-particles{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.bg-particle{background:#ffffff4d;border-radius:50%;width:3px;height:3px;animation:floatParticle linear infinite;position:absolute}@keyframes floatParticle{0%{opacity:0;transform:translateY(100vh)translate(0)scale(1)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:translateY(-10vh)translate(50px)scale(.5)}}.confetti-container{pointer-events:none;z-index:200;position:fixed;inset:0;overflow:hidden}.confetti-piece{width:10px;height:10px;animation:confettiFall var(--confetti-duration,3s) ease-in forwards;position:absolute;top:-10px}@keyframes confettiFall{0%{opacity:1;transform:translateY(0)rotate(0)scale(1)}to{opacity:0;transform:translateY(100vh)rotate(2turn)scale(.3)}}@keyframes ripple{0%{opacity:.8;transform:scale(.3)}to{opacity:0;transform:scale(2.5)}}.ripple{pointer-events:none;border:3px solid #fff6;border-radius:50%;animation:ripple .6s ease-out forwards;position:absolute;inset:0}.board-glow{animation:boardGlow 1.5s ease-in-out infinite alternate}@keyframes boardGlow{0%{box-shadow:0 20px 60px #000000b3,0 0 0 2px #5a3a2a,0 0 30px #ffc8321a,inset 0 1px 3px #ffffff1a}to{box-shadow:0 20px 60px #000000b3,0 0 0 2px #5a3a2a,0 0 60px #ffc8324d,inset 0 1px 3px #ffffff1a}}@keyframes copyToast{0%{opacity:0;transform:scale(.5)translateY(20px)}20%{opacity:1;transform:scale(1.1)translateY(0)}30%{opacity:1;transform:scale(1)translateY(0)}70%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(.8)translateY(-10px)}}.copy-toast{color:#fff;letter-spacing:1px;z-index:999;pointer-events:none;background:linear-gradient(135deg,#11998e,#38ef7d);border-radius:12px;padding:14px 32px;font-size:1rem;font-weight:700;animation:copyToast 1.8s ease-out forwards;position:fixed;bottom:40px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #11998e66}@keyframes copyBtnPulse{0%{transform:scale(1)}50%{transform:scale(1.05);box-shadow:0 8px 32px #667eea99}to{transform:scale(1)}}.copy-btn-copied{animation:copyBtnPulse .4s ease-out!important}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}