:root{--gradient-cyan-primary: #22d3ee;--gradient-cyan-secondary: #0891b2;--gradient-cyan-tertiary: #0e7490;--gradient-ocean-primary: #0abde3;--gradient-ocean-secondary: #48dbfb;--gradient-ocean-tertiary: #00d2d3;--gradient-angle: 135deg}body{margin:0;font-family:Roboto,Roboto Fallback,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}body:not(.theme-light){background-color:#0f172a;color:#f8fafc}body.theme-light{background-color:#f8fafc;color:#0f172a}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.content-transition{max-height:500px;opacity:1;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .4s cubic-bezier(.4,0,.2,1),margin .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);margin-top:16px;pointer-events:auto;position:relative;z-index:1;transform:translateY(0)}.content-transition.hidden{max-height:0;opacity:0;margin-top:0;pointer-events:none;transform:translateY(-10px)}.content-transition.visible{max-height:500px;opacity:1;transform:translateY(0)}.fade-in{animation:fadeIn .5s ease-in-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.pulse{animation:pulse 2s infinite}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #22d3ee80}70%{transform:scale(1.05);box-shadow:0 0 0 10px #22d3ee00}to{transform:scale(1);box-shadow:0 0 #22d3ee00}}.glass{background:#1e293be6;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(148,163,184,.2);box-shadow:0 12px 48px #0006,0 4px 16px #0003}.glass-light{background:#1e293bb3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(148,163,184,.15);box-shadow:0 8px 32px #0000004d}.glass-heavy{background:#0f172af2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(148,163,184,.3);box-shadow:0 20px 80px #00000080,0 8px 32px #0000004d}body.theme-light .glass{background:#ffffffe6;border:1px solid rgba(148,163,184,.3);box-shadow:0 12px 48px #00000014,0 4px 16px #0000000f}body.theme-light .glass-light{background:#ffffffb3;border:1px solid rgba(148,163,184,.25);box-shadow:0 8px 32px #0000000f}body.theme-light .glass-heavy{background:#f8fafcf2;border:1px solid rgba(148,163,184,.4);box-shadow:0 20px 80px #0000001a,0 8px 32px #00000014}.gradient-text{color:#22d3ee;display:inline-block;text-shadow:0 0 30px rgba(34,211,238,.3);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}@supports (-webkit-background-clip: text){.gradient-text{background:linear-gradient(var(--gradient-angle),var(--gradient-cyan-primary) 0%,var(--gradient-cyan-secondary) 50%,var(--gradient-cyan-tertiary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}}.gradient-text-flame{color:#22d3ee;display:inline-block}@supports (-webkit-background-clip: text){.gradient-text-flame{background:linear-gradient(var(--gradient-angle),var(--gradient-cyan-primary) 0%,var(--gradient-cyan-secondary) 50%,var(--gradient-cyan-tertiary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}}.gradient-text-ocean{color:#0abde3;display:inline-block}@supports (-webkit-background-clip: text){.gradient-text-ocean{background:linear-gradient(var(--gradient-angle),var(--gradient-ocean-primary) 0%,var(--gradient-ocean-secondary) 50%,var(--gradient-ocean-tertiary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}}.gradient-text-vibrant{color:#74b9ff;display:inline-block}@supports (-webkit-background-clip: text){.gradient-text-vibrant{background:linear-gradient(135deg,#fd79a8,#fdcb6e,#6c5ce7,#a29bfe,#74b9ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}}.gradient-text-hero{color:#22d3ee;display:inline-block;filter:drop-shadow(0 2px 8px rgba(34,211,238,.4));position:relative}@supports (-webkit-background-clip: text){.gradient-text-hero{background:linear-gradient(135deg,#22d3ee,#0891b2,#48dbfb,#0e7490,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}}.gradient-text-hero:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#22d3ee,#0891b2,#48dbfb,#0e7490,#22d3ee);border-radius:8px;filter:blur(20px);opacity:.3;z-index:-1}.gradient-background{background:linear-gradient(135deg,#0f172a,#1e293b,#334155,#1e293b,#0f172a,#020617)}body.theme-light .gradient-background{background:linear-gradient(135deg,#f8fafc,#e2e8f0,#cbd5e1,#e2e8f0,#f8fafc,#fff)}.gradient-background-vibrant{background:linear-gradient(135deg,#0f172ae6,#1e293bf2,#334155e6,#1e293bf2,#0f172ae6,#020617f2),radial-gradient(ellipse at top left,rgba(34,211,238,.15) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(72,219,251,.15) 0%,transparent 50%)}body.theme-light .gradient-background-vibrant{background:linear-gradient(135deg,#f8fafce6,#e2e8f0f2,#cbd5e1e6,#e2e8f0f2,#f8fafce6,#fffffff2),radial-gradient(ellipse at top left,rgba(34,211,238,.1) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(34,211,238,.1) 0%,transparent 50%)}.btn-gradient-flame{background:linear-gradient(135deg,#22d3ee,#0891b2,#0e7490);border:none;box-shadow:0 4px 16px #22d3ee66}.btn-gradient-ocean{background:linear-gradient(135deg,#0abde3,#48dbfb,#00d2d3);border:none;box-shadow:0 4px 16px #48dbfb66}.btn-gradient-sunset{background:linear-gradient(135deg,#fd79a8,#fdcb6e,#e84393);border:none;box-shadow:0 4px 16px #fd79a866}.accent-border-flame{border:1px solid rgba(34,211,238,.4);box-shadow:0 0 20px #22d3ee33}.accent-border-ocean{border:1px solid rgba(72,219,251,.4);box-shadow:0 0 20px #48dbfb33}.accent-glow-flame{box-shadow:0 0 30px #22d3ee4d}.accent-glow-ocean{box-shadow:0 0 30px #48dbfb4d}.hover-lift{transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.hover-lift:hover{transform:translateY(-4px);box-shadow:0 10px 25px -5px #0000001a,0 10px 10px -5px #0000000a}html{scroll-behavior:smooth}.transparent-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.transparent-scrollbar::-webkit-scrollbar{width:8px}.transparent-scrollbar::-webkit-scrollbar-track{background:transparent}.transparent-scrollbar::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.transparent-scrollbar::-webkit-scrollbar-thumb:hover{background:#ffffff80}body.theme-light .transparent-scrollbar{scrollbar-color:rgba(0,0,0,.3) transparent}body.theme-light .transparent-scrollbar::-webkit-scrollbar-thumb{background:#0000004d}body.theme-light .transparent-scrollbar::-webkit-scrollbar-thumb:hover{background:#00000080}*{box-sizing:border-box}html{--color-blue: hsl(224, 56%, 36%);--color-gray: hsl(210, 3%, 25%);--color-white: white;--border-radius: 12px;--border-radius-lg: 16px;--border-radius-sm: 8px;--border-radius-xs: 6px;--shadow-md: 0 8px 32px rgba(0, 0, 0, .3);--shadow-lg: 0 12px 48px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .2);--shadow-xl: 0 16px 56px rgba(0, 0, 0, .5), 0 6px 24px rgba(0, 0, 0, .3);--color-surface: rgba(15, 23, 42, .95);--nav-background: rgba(15, 23, 42, .95);--nav-border: rgba(148, 163, 184, .2);--nav-shadow: 0 8px 32px rgba(0, 0, 0, .3), 0 0 40px rgba(72, 219, 251, .1);--container-background: rgba(30, 41, 59, .9);--container-border: rgba(148, 163, 184, .2);--message-border: rgba(255, 255, 255, .1);--message-hover: rgba(255, 255, 255, .05);--page-gradient: linear-gradient( 135deg, #0f172a 0%, #1e293b 20%, #334155 40%, #1e293b 60%, #0f172a 80%, #020617 100% );--gradient-primary: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);--gradient-primary-alt: linear-gradient(135deg, #48dbfb 0%, #0abde3 100%);--gradient-primary-button: linear-gradient(135deg, #22d3ee 0%, #0891b2 50%, #0e7490 100%);--gradient-section-divider: linear-gradient( 90deg, transparent, rgba(34, 211, 238, .3), transparent );--gradient-feature-item: linear-gradient(90deg, #22d3ee, #0891b2, #48dbfb);--color-cyan-400: #22d3ee;--color-cyan-500: #06b6d4;--color-cyan-600: #0891b2;--color-cyan-700: #0e7490;--color-brand-teal: #48dbfb;--color-slate-400: rgba(148, 163, 184, 1);--color-slate-400-20: rgba(148, 163, 184, .2);--color-slate-400-15: rgba(148, 163, 184, .15);--color-slate-400-08: rgba(148, 163, 184, .08);--color-white-05: rgba(255, 255, 255, .05);--color-white-10: rgba(255, 255, 255, .1);--color-white-70: rgba(255, 255, 255, .7);--color-white-80: rgba(255, 255, 255, .8);--color-white-85: rgba(255, 255, 255, .85);--color-white-95: rgba(255, 255, 255, .95);--surface-dark-07: rgba(15, 23, 42, .7);--surface-dark-08: rgba(15, 23, 42, .8);--surface-secondary: rgba(30, 41, 59, .5);--surface-secondary-hover: rgba(30, 41, 59, .7);--button-glow-shadow: 0 4px 16px rgba(34, 211, 238, .4);--button-glow-shadow-hover: 0 6px 24px rgba(34, 211, 238, .5);--focus-ring-cyan: 0 0 0 2px rgba(34, 211, 238, .2);--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;color:var(--color-white)}body.theme-light{--shadow-md: 0 8px 32px rgba(0, 0, 0, .1);--shadow-lg: 0 12px 48px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .06);--shadow-xl: 0 16px 56px rgba(0, 0, 0, .1), 0 6px 24px rgba(0, 0, 0, .08);--color-surface: rgba(255, 255, 255, .95);--nav-background: rgba(255, 255, 255, .95);--nav-border: rgba(148, 163, 184, .3);--nav-shadow: 0 8px 32px rgba(0, 0, 0, .08), 0 0 40px rgba(34, 211, 238, .1);--container-background: rgba(255, 255, 255, .9);--container-border: rgba(148, 163, 184, .3);--message-border: rgba(0, 0, 0, .1);--message-hover: rgba(0, 0, 0, .05);--page-gradient: linear-gradient( 135deg, #f8fafc 0%, #e2e8f0 20%, #cbd5e1 40%, #e2e8f0 60%, #f8fafc 80%, #ffffff 100% );--gradient-primary: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);--gradient-primary-alt: linear-gradient( 135deg, #0891b2 0%, #06b6d4 25%, #0e7490 50%, #155e75 100% );--gradient-primary-button: linear-gradient( 135deg, #0891b2 0%, #06b6d4 25%, #0e7490 50%, #155e75 100% );--color-white-70: rgba(71, 85, 105, .8);--color-white-80: rgba(71, 85, 105, .8);--color-white-85: rgba(15, 23, 42, .85);--color-white-95: rgba(15, 23, 42, .9);--surface-dark-07: rgba(255, 255, 255, .9);--surface-dark-08: rgba(255, 255, 255, .95);--surface-secondary: rgba(148, 163, 184, .08);--surface-secondary-hover: rgba(148, 163, 184, .12);--button-glow-shadow: 0 4px 16px rgba(8, 145, 178, .3);--button-glow-shadow-hover: 0 6px 24px rgba(8, 145, 178, .4);--focus-ring-cyan: 0 0 0 2px rgba(8, 145, 178, .2)}h1,h2,h3,h4,ul{margin:0}a{color:inherit;text-decoration:none}ul{padding:0;list-style:none}button{cursor:pointer}input,button{font-size:1rem;color:inherit;border:none;border-radius:var(--border-radius)}.about-accordion{margin-bottom:1rem;background:var(--color-surface);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid var(--nav-border);border-radius:8px;overflow:hidden}.about-accordion:before{display:none}.accordion-title{font-weight:600;background:var(--gradient-primary-alt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}body.theme-light .accordion-title{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@keyframes app-skeleton-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.login{background:var(--color-blue);padding:16px}.unauthenticated-container{min-height:100vh;background:var(--page-gradient);padding:2rem 0}body.theme-light .unauthenticated-container{background:var(--page-gradient)}h1.setup{padding:.25rem 0;text-align:center;margin-bottom:.5rem;font-weight:600;font-size:1.8rem;background:var(--gradient-primary-button);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 8px rgba(34,211,238,.4));letter-spacing:-.01em;line-height:1.2}.setup-subtitle{text-align:center;color:var(--color-white-70);margin-bottom:1rem;font-size:1rem;line-height:1.4}.footer-language-container{display:flex;justify-content:center;padding:1.5rem 0 2rem;margin-top:2rem}.footer-language-selector{display:flex;align-items:center;gap:.5rem;opacity:.8;transition:opacity .3s ease}.footer-language-selector:hover{opacity:1}body.theme-light .setup-subtitle{color:var(--color-white-80)}body.theme-light h1.setup{background:var(--gradient-primary-alt);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 8px rgba(8,145,178,.3))}body.theme-light .footer-language-selector svg{color:#47556999!important}body.theme-light .footer-language-selector .MuiSelect-root{color:#475569cc}body.theme-light .footer-language-selector .MuiSelect-icon{color:#47556999!important}.main-setup-card{background:var(--color-surface);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--container-border);box-shadow:0 20px 80px #00000080,var(--shadow-md),0 0 30px #ff6b6b1a}body.theme-light .main-setup-card{background:var(--color-surface);border:1px solid var(--container-border);box-shadow:0 20px 80px #00000014,var(--shadow-md),0 0 30px #0891b20d}.unauthenticated-card{margin:.25rem;height:100%;background:var(--container-background);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid var(--container-border);box-shadow:var(--shadow-lg);transition:all .3s ease}.unauthenticated-card:hover{transform:translateY(-2px);box-shadow:0 12px 48px #00000026}body.theme-light .unauthenticated-card{background:var(--container-background);border:1px solid var(--container-border);box-shadow:var(--shadow-lg)}body.theme-light .unauthenticated-card:hover{box-shadow:0 16px 56px #0000001f}.auth-button-container{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}.auth-button-container button{width:100%;transition:all .2s ease}.auth-button-container button:hover{transform:translateY(-1px)}.jump-in-button{background:var(--gradient-primary-button);border:none;box-shadow:var(--button-glow-shadow);position:relative;overflow:hidden}.jump-in-button:hover{box-shadow:var(--button-glow-shadow-hover);transform:translateY(-1px)}.jump-in-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.jump-in-button:hover:before{left:100%}@keyframes pulse{0%{box-shadow:var(--button-glow-shadow)}50%{box-shadow:var(--button-glow-shadow-hover)}to{box-shadow:var(--button-glow-shadow)}}.jump-in-button{animation:pulse 3s ease-in-out infinite}.jump-in-button:focus-visible{outline:3px solid #667eea;outline-offset:2px}.auth-button-container button:focus-visible{outline:2px solid currentColor;outline-offset:2px}@media (prefers-reduced-motion: reduce){.jump-in-button{animation:none}.unauthenticated-card,.unauthenticated-card:hover,.auth-button-container button,.auth-button-container button:hover,.jump-in-button:hover{transform:none;transition:none}.jump-in-button:before{transition:none}}@media screen and (min-width: 768px){.unauthenticated-container{padding:3rem 0}h1.setup{font-size:1.9rem;margin-bottom:.75rem;letter-spacing:-.02em;line-height:1.15}.setup-subtitle{font-size:1rem;margin-bottom:1rem;line-height:1.3}.main-setup-card,.main-setup-card .MuiCardContent-root{padding:.75rem}.auth-button-container{margin-top:1rem}.jump-in-button{padding:1rem 2rem;font-size:1.1rem}}@media screen and (min-width: 1024px){h1.setup{font-size:2.1rem;letter-spacing:-.02em;line-height:1.1;margin-bottom:.75rem}.setup-subtitle{font-size:1.1rem;line-height:1.3;margin-bottom:1rem}.main-setup-card,.main-setup-card .MuiCardContent-root{padding:1rem}}@media screen and (max-width: 767px){.unauthenticated-card{margin:.25rem 0}.auth-button-container{flex-direction:column;gap:.5rem}h1.setup{font-size:1.6rem;padding:.25rem 0}.setup-subtitle{font-size:1rem}}.game-guide{padding:.75rem}@media screen and (min-width: 768px){.game-guide{padding:.75rem}}@media screen and (min-width: 1024px){.game-guide{padding:1rem}}.hero-section{text-align:left}.hero-section .hero-title{font-weight:700;font-size:1.5rem;letter-spacing:-.025em;text-align:center;width:100%}.hero-description{color:var(--color-white-85);margin-bottom:1.5rem;line-height:1.6;font-size:1rem;text-align:left}.hero-section .hero-subtitle{color:var(--color-white-85);line-height:1.5;font-size:.9rem;text-align:left;margin:1.5rem 0}.hero-subtitle:first-of-type{margin-top:2rem}.section-divider{margin:2.5rem 0;border-color:var(--color-slate-400-20);background:var(--gradient-section-divider);height:1px}.features-section{margin-bottom:2rem}.features-section .section-title{text-align:center;margin:1rem 0;font-weight:600;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.features-grid{display:grid;grid-template-columns:1fr;gap:1rem}.feature-item{background:var(--surface-dark-07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--color-slate-400-15);border-radius:var(--border-radius-sm);padding:1rem;transition:all .3s ease;position:relative;overflow:hidden}.feature-item:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-feature-item);opacity:0;transition:opacity .3s ease}.feature-item:hover{transform:translateY(-2px);box-shadow:0 8px 32px #0000004d;border-color:#22d3ee4d}.feature-item:hover:before,.feature-item:focus-visible:before{opacity:1}.feature-icon{font-size:1.5rem;margin-bottom:.5rem;display:flex;justify-content:center}.feature-title{font-weight:600;margin-bottom:.5rem;color:var(--color-white-95);text-align:center}.feature-description{color:var(--color-white-80);line-height:1.5;text-align:center;font-size:.9rem}.steps-container{margin-bottom:1.5rem}.step-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem;padding:.75rem;background:var(--surface-secondary);border-radius:var(--border-radius-xs);border-left:3px solid rgba(34,211,238,.5);transition:all .3s ease}.step-item:hover{background:var(--surface-secondary-hover);border-left-color:#22d3eecc}.step-number{background:var(--gradient-primary);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:600;flex-shrink:0;margin-top:2px}.helpful-tip{background:#48dbfb1a;border:1px solid rgba(72,219,251,.3);border-radius:6px;padding:1rem;color:#fffc;font-style:italic;line-height:1.5}body.theme-light .hero-description,body.theme-light .hero-subtitle{color:var(--color-white-85)}body.theme-light .feature-item{background:var(--surface-dark-07);border-color:var(--container-border);box-shadow:0 4px 16px #00000014}body.theme-light .feature-item:hover{box-shadow:0 8px 32px #0000001f;border-color:#0891b266}body.theme-light .feature-title{color:var(--color-white-95)}body.theme-light .feature-description{color:var(--color-white-80)}body.theme-light .step-item{background:var(--surface-secondary);border-left-color:#0891b299}body.theme-light .step-item:hover{background:var(--surface-secondary-hover);border-left-color:#0891b2cc}body.theme-light .helpful-tip{background:#0891b214;border-color:#0891b24d;color:#0f172acc}body.theme-light .section-title{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media screen and (min-width: 768px){.hero-title{font-size:1.7rem}.hero-description{font-size:1.1rem;margin-bottom:1.5rem}.hero-subtitle{font-size:1rem}.features-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}.feature-item{padding:1.5rem}.section-divider{margin:3rem 0}}@media screen and (min-width: 1024px){.hero-title{font-size:1.9rem}.hero-description{font-size:1.2rem;margin-bottom:1.75rem}.hero-subtitle{font-size:1.05rem}.features-section{margin-bottom:2.5rem}}.site-name{display:flex;align-items:center}@media screen and (max-width: 270px){.site-name>h1{display:none}}.nav{display:flex;width:100%;align-items:center;padding:10px 32px;background:var(--nav-background);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);justify-content:space-between;box-shadow:var(--nav-shadow);border-bottom:1px solid var(--nav-border);position:sticky;top:0;z-index:1000;transition:all .3s ease}@media screen and (max-width: 600px){.nav{padding:5px 8px}}.nav>div{flex:1;display:flex}.nav-room-name{display:flex;align-items:center}.nav-room-name h2{margin-right:.5rem;color:inherit}body.theme-light .nav-room-name h2{color:var(--color-white-95)}.nav-room-name{margin:auto;white-space:nowrap}.menu-drawer{justify-content:flex-end}@media screen and (max-width: 600px){.nav{font-size:75%}.nav>div{flex:auto}}@media screen and (min-width: 600px) and (max-width: 750px){.nav>div.menu-drawer{flex:.5}}@media screen and (max-width: 475px){.nav-room-name h2{display:none}}.settings-box{min-width:100%;padding:1rem;border-radius:12px}label.settings-switch{display:flex;justify-content:space-between;margin:.5rem}.flex-buttons{margin-top:1rem;display:flex;justify-content:space-between;align-items:center}.left-buttons{display:flex;gap:.5rem}.flex-buttons>button{margin-left:auto}.flex-buttons button{transition:all .3s ease}.flex-buttons button:hover{transform:translateY(-1px)}.MuiSelect-select>.menu-item-icon{display:none}.menu-item-icon{margin-right:8px;vertical-align:middle}.text-stroke{color:#fff;text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 3px 0 #000,3px 0 0 #000,0 -3px 0 #000,-3px 0 0 #000}.flex-column{display:flex;flex-direction:column}.cast-container{height:calc(100vh - 5rem)}.cast-container h1{font-weight:600;text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 3px 0 #000,3px 0 0 #000,0 -3px 0 #000,-3px 0 0 #000}.action-box{background-color:#00000080;padding:2rem;border-radius:.5rem;box-shadow:1px 1px 3px #000;margin-top:3rem}.divider{margin-top:-.5rem;height:.5rem;background-color:#fff;border:2px solid black}.cast-receiver-mode{overflow:hidden;background-color:#000!important;color:#fff!important}.cast-receiver-mode .flex-column{background-color:#000!important;color:#fff!important}.cast-receiver-mode .cast-container{height:100vh;margin:0;padding:0}.cast-receiver-mode .action-box{padding:2rem;text-shadow:1px 1px 2px rgba(0,0,0,.7);background-color:#000000b3;max-width:95vw;min-width:fit-content;width:auto;margin:0 auto;margin-top:3rem}.cast-receiver-mode h1,.cast-receiver-mode h3,.cast-receiver-mode h4{text-shadow:2px 2px 4px rgba(0,0,0,.8)}.flex-column{min-height:100vh;background-color:transparent}.responsive-cast-box{min-height:fit-content;height:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.responsive-cast-box h1,.responsive-cast-box h2,.responsive-cast-box h3,.responsive-cast-box h4{word-wrap:normal;-webkit-hyphens:none;hyphens:none;max-width:100%;text-align:center;overflow-wrap:normal;min-width:fit-content}.cast-receiver-mode iframe,.cast-container iframe{-webkit-transform:translateZ(0);transform:translateZ(0)}.cast-receiver-mode.cast-receiver-mode video,.cast-container.cast-container video{object-fit:cover;width:100%;height:100%}.cast-main-container{background-color:transparent;color:#fff;min-height:100vh;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}.cast-grid-container{min-height:100vh}.cast-grid-container-adjusted{min-height:calc(100vh - 5rem);z-index:10}.action-box-large{background-color:#000000b3;padding:clamp(1rem,4vw,4rem);border-radius:clamp(.5rem,1vw,1rem);text-align:center;width:clamp(320px,90vw,1400px);margin:0 auto}.action-box-responsive{background-color:#000000b3;padding:clamp(1rem,4vw,4rem);border-radius:clamp(.5rem,1vw,1rem);max-width:95vw;min-width:fit-content;margin:0 auto}.cast-title{color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8);margin-bottom:1rem;font-size:clamp(1.5rem,6vw,4rem)}.cast-loading-text{color:#90caf9;text-shadow:1px 1px 2px rgba(0,0,0,.8);font-size:clamp(1rem,4vw,2.5rem)}.cast-ready-text{color:#a5d6a7;text-shadow:1px 1px 2px rgba(0,0,0,.8);font-size:clamp(1rem,4vw,2.5rem)}.cast-next-player{color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8);font-size:clamp(1rem,3vw,2rem)}.cast-room-url{color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8);font-size:clamp(.8rem,2.5vw,1.5rem)}.cast-type-text{color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8);font-size:clamp(1.2rem,5vw,3rem)}.cast-activity-text,.cast-room-main{color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8);font-weight:600;font-size:clamp(1.8rem,8vw,6rem);line-height:1.2}.user-interaction-overlay{position:absolute;top:0;left:0;right:0;bottom:80px;display:flex;align-items:center;justify-content:center;background-color:#00000080;color:#fff;font-size:1.5rem;cursor:pointer;z-index:1000}.cast-header-bar{margin:1rem 1rem -1rem;z-index:10}.cast-fullscreen-button{color:#fff}.cast-divider{margin-top:-.5rem;height:.5rem;background-color:#fff;border:2px solid black}.cast-alert-text{color:#fff}.main-container{background-size:cover;background-position:center;background-repeat:no-repeat;height:100vh;width:100vw;position:fixed;top:0;left:0;transition:all .5s cubic-bezier(.4,0,.2,1)}@media (max-width: 599.95px){.main-container{height:calc(100vh - 3rem)}}.main-container.default-background{background:linear-gradient(135deg,#0f172a,#1e293b,#334155,#1e293b,#0f172a,#020617)}body.theme-light .main-container.default-background{background:linear-gradient(135deg,#f8fafc,#e2e8f0,#cbd5e1,#e2e8f0,#f8fafc,#fff)}.main-container iframe,.main-container video,.video-background{width:100%;height:100%;position:absolute;top:0;left:0;border:none}.main-container video,.video-background{object-fit:cover;transition:opacity .5s ease-in-out}.cast-receiver-mode .main-container,body.in-iframe .main-container{position:absolute!important;width:100%!important;height:100%!important;top:0!important;left:0!important}.slideshow-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000c}.loading-message{color:#fff;font-size:1.2rem;opacity:.7;position:relative}.image-slideshow-container{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.image-slideshow-fallback{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#0f172a,#1e293b,#334155,#1e293b,#0f172a,#020617);z-index:1}body.theme-light .image-slideshow-fallback{background:linear-gradient(135deg,#f8fafc,#e2e8f0,#cbd5e1,#e2e8f0,#f8fafc,#fff)}.image-slideshow-slide{position:absolute;top:0;right:0;bottom:0;left:0;background-size:contain;background-position:center;background-repeat:no-repeat;opacity:1;animation:zoom-in-slideshow var(--animation-duration, 3s) ease-out forwards;will-change:transform;z-index:2}.loading-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fffc;font-size:18px;font-weight:500;text-align:center;background:#0000004d;padding:16px 24px;border-radius:12px;z-index:10;-webkit-user-select:none;user-select:none;pointer-events:none}body.theme-light .loading-message{color:#000c;background:#ffffff4d}@keyframes zoom-in-slideshow{0%{transform:scale(1)}to{transform:scale(var(--zoom-scale, 1.4))}}.desktop-container{display:flex;justify-content:center;padding:4rem 1rem 0;height:100vh;overflow-x:hidden;overflow-y:auto;transition:all .3s cubic-bezier(.4,0,.2,1);animation:fadeIn .5s ease-out forwards}.desktop-container.default-room-background{background:var(--page-gradient)}.messages-container{min-width:375px;max-width:375px;min-height:calc(100vh - 12rem);padding:var(--spacing-md);display:flex;flex-direction:column;margin-left:1rem;background:transparent;transition:all .3s ease;animation:slideIn .5s ease-out forwards;overflow:hidden}@media screen and (max-width: 600px){.messages-container{min-width:100%;max-width:100%;margin-left:0}}.video-adjust{height:calc(100vh - 4rem)}.game-board-container{border-radius:12px;overflow:hidden;transition:all .3s ease;background:var(--container-background);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid var(--container-border);box-shadow:var(--shadow-lg);animation:slideIn .5s ease-out .1s forwards;margin-bottom:56px}.game-board-container:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px)}.tab-container{border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;overflow:hidden;transition:all .3s ease;background-color:var(--color-surface)}.tab{transition:all .3s ease;position:relative;overflow:hidden}.tab:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:linear-gradient(90deg,var(--color-primary-dark),var(--color-secondary-dark));transition:all .3s ease;transform:translate(-50%)}.tab.active:after{width:100%}.MuiAppBar-positionFixed.MuiAppBar-root{z-index:1100}.MuiAppBar-root[style*="bottom: 0"]{bottom:0!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.roll-button{transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:center}.roll-button:hover{transform:scale(1.05);box-shadow:0 0 15px #4f46e566}.roll-button:active{transform:scale(.95)}.message{transition:all .3s ease;animation:messageSlideIn .3s ease-out forwards;transform-origin:top}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.navigation{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--nav-background);border-bottom:1px solid var(--nav-border);transition:all .3s ease}.message-input-container{display:flex;gap:4px}.message-input-container .MuiInputBase-root{padding:16.5px 5px}.transparent .MuiOutlinedInput-root{background-color:#636363bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1)}.transparent input::placeholder,.transparent,.transparent input{color:#fff}body.theme-light .transparent .MuiOutlinedInput-root{background-color:#fffc;-webkit-backdrop-filter:blur(8px) brightness(1.1);backdrop-filter:blur(8px) brightness(1.1);border:1px solid rgba(0,0,0,.15)}body.theme-light .transparent input::placeholder,body.theme-light .transparent,body.theme-light .transparent input{color:#000}.default-background~* .transparent .MuiOutlinedInput-root{background-color:#4b4b4b4d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(255,255,255,.05)}body.theme-light .default-background~* .transparent .MuiOutlinedInput-root{background-color:#ffffffe6;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:1px solid rgba(0,0,0,.08)}body.theme-light .default-background~* .transparent input::placeholder,body.theme-light .default-background~* .transparent,body.theme-light .default-background~* .transparent input{color:#000000de}.dice-roller{position:fixed!important;bottom:50px;left:50px;z-index:999;box-shadow:0 8px 32px #0006,0 4px 16px #0003!important;border-radius:12px!important}.dice-roller>div{width:100%}.dice-roller button{background:#0284c7!important;background-color:#0284c7!important;background-image:none!important;border:2px solid #0284c7!important;color:#fff!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:.05em!important;transition:all .2s cubic-bezier(.4,0,.2,1)!important}.dice-roller button:hover{background:#0369a1!important;background-color:#0369a1!important;background-image:none!important;transform:translateY(0)!important}.dice-roller button:active{transform:translateY(0)!important}.dice-roller button:disabled{background:#475569!important;background-color:#475569!important;background-image:none!important;border-color:#475569!important;transform:none!important}.dice-roller button:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:none!important;position:relative!important}.dice-roller button:first-child:after{content:"";position:absolute;right:0;top:20%;bottom:20%;width:1px;background:#ffffff4d}.dice-roller button:last-child{border-top-left-radius:0!important;border-bottom-left-radius:0!important;min-width:40px!important;padding:0 8px!important}.dice-roller button .MuiSvgIcon-root{color:#fff!important}@media screen and (max-width: 600px){.dice-roller{bottom:65px;right:50px;width:calc(100% - 6rem)}.dice-roller button:first-child{width:100%}}@media screen and (max-width: 250px){.dice-roller{width:calc(100% - 40px);left:20px;right:20px}}.message-list-container{margin-bottom:16px;flex:1;height:calc(100vh - 15rem);display:flex;flex-direction:column;position:relative}@media screen and (max-width: 600px){.message-list-container{min-height:auto;max-height:calc(100vh - 20rem)}}.message-filter-header{position:absolute;top:-8px;right:-16px;z-index:1001;display:flex;justify-content:flex-end}.message-filter-fab{z-index:1000}.message-list-scroll{flex:1;overflow-y:auto;overflow-x:hidden;position:relative}.message-list-scroll-content{width:100%;height:100%}.message-list{width:100%;display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:0;list-style:none}.message{padding:var(--spacing-sm) var(--spacing-md);margin-bottom:1px;background:transparent;border-bottom:1px solid var(--message-border);text-align:left;width:100%;transition:background-color .2s ease}.message:hover{background:var(--message-hover)}.message-message{word-break:break-word}.message-message p{white-space:pre-wrap}body.theme-light .message{color:var(--color-white-95)}.message.transparent{background:#4b4b4bcc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-shadow:0 1px 3px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.1)}.message.transparent:hover{background:#000c}body.theme-light .message.transparent{background:#fffc;color:#000000e6;text-shadow:0 1px 2px rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.15);-webkit-backdrop-filter:blur(8px) brightness(1.1);backdrop-filter:blur(8px) brightness(1.1)}body.theme-light .message.transparent:hover{background:#fffffffa}.default-background~* .message-list .message.transparent{background:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);text-shadow:none;border:1px solid rgba(255,255,255,.05)}.default-background~* .message-list .message.transparent:hover{background:#0006}body.theme-light .default-background~* .message-list .message.transparent{background:#ffffffe6;color:#000000de;text-shadow:none;border:1px solid rgba(0,0,0,.08);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}body.theme-light .default-background~* .message-list .message.transparent:hover{background:#fffffff2}.message td,.message th{padding:.4em;border-right:dashed 1px gray}.message td:last-child,.message th:last-child{border-right:none}.message th{border-bottom:dashed 1px gray}.message tr:not(:last-child){border-bottom:solid 1px gray}.message ul{list-style:disc;padding-left:1rem}.message a{text-decoration:underline}.message a:hover{text-decoration:none}.message code{background-color:var(--message-hover);padding:.25rem;border-radius:4px}.message img{max-width:100%}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.message-actions{display:flex;align-items:center;gap:8px}.timestamp-chip{margin-left:8px!important;font-size:.7rem!important;height:20px!important}.message .timestamp-chip{font-size:.7rem!important;height:20px!important}.message-action-box{margin-top:8px;padding-top:8px;border-top:1px solid var(--message-border)}.system-details-popover{padding:16px;max-width:400px;max-height:60vh;overflow-y:auto}.system-details-content{margin-bottom:12px}.system-action-buttons{padding-top:12px;border-top:1px solid var(--message-border)}.system-action-buttons .MuiButton-root{text-transform:none;font-weight:500;box-shadow:0 2px 4px #0000001a;transition:all .2s ease}.system-action-buttons .MuiButton-root:hover{transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.system-details-popover h1,.system-details-popover h2,.system-details-popover h3{margin-top:8px;margin-bottom:4px}.system-details-popover ul{list-style:disc;padding-left:1rem;margin:8px 0}.system-details-popover p{margin:4px 0}.own-message:has(.message-header){background:#1976d21a;border-left:3px solid var(--color-blue);align-self:flex-end}.own-message:has(.message-header):hover{background:#1976d226}.own-message.transparent:has(.message-header){background:#114e8ccc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-shadow:0 1px 3px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.2)}.own-message.transparent:has(.message-header):hover{background:#1976d2cc}body.theme-light .own-message.transparent:has(.message-header){background:#1976d2cc;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.9);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(8px) brightness(1.1);backdrop-filter:blur(8px) brightness(1.1)}body.theme-light .own-message.transparent:has(.message-header) .MuiChip-label{color:#fff}body.theme-light .own-message.transparent:has(.message-header):hover{background:#1976d2fa}body.theme-light .own-message.transparent:has(.message-header) .MuiButton-root{text-shadow:0 2px 8px rgba(0,0,0,1),0 0 6px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.6);font-weight:700}body.theme-light .own-message.transparent:has(.message-header) .MuiButton-root:hover{color:#fff;transform:translateY(-1px);border:none}.default-background~* .message-list .own-message.transparent:has(.message-header){background:#1976d24d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);text-shadow:none;border:1px solid rgba(255,255,255,.1)}.default-background~* .message-list .own-message.transparent:has(.message-header):hover{background:#1976d266}body.theme-light .default-background~* .message-list .own-message.transparent:has(.message-header){background:#1976d226;color:#fffffff2;text-shadow:none;border:1px solid rgba(25,118,210,.3);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}body.theme-light .default-background~* .message-list .own-message.transparent:has(.message-header):hover{background:#1976d233}.sender{display:flex;align-items:center}.sender-name{font-weight:500;margin-left:8px}.sender>div:first-child{margin-right:0}.sender small{font-weight:400}.tile-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-description{white-space:pre-wrap}.pop-text{text-shadow:0 2px 4px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.8);font-weight:600}body.theme-light .pop-text{text-shadow:0 2px 4px rgba(255,255,255,.9),0 1px 2px rgba(255,255,255,.8),1px 1px 2px rgba(0,0,0,.3);font-weight:600;color:#1a1a1a}.player-indicator{position:absolute;top:.5em;right:.5em}.pulse-animation{scroll-margin-top:5rem;animation:pulse-brand 1.5s 1;box-shadow:0 0 10px 2px #22d3eeb3}li.pulse-animation.gray-tiles{animation:pulse-bright-brand 1.5s 1;box-shadow:0 0 10px 10px #22d3eecc}body.theme-light .pulse-animation{box-shadow:0 0 8px 2px #22d3eecc;animation:pulse-brand-light 1.5s 1}body.theme-light li.pulse-animation.gray-tiles{box-shadow:0 0 8px 6px #22d3eee6;animation:pulse-bright-brand-light 1.5s 1}@keyframes pulse-brand{0%{transform:scale(.95);box-shadow:0 0 #22d3eeb3}70%{transform:scale(1);box-shadow:0 0 10px 10px #22d3eeb3}to{transform:scale(1);box-shadow:0 0 10px 2px #22d3eeb3}}@keyframes pulse-bright-brand{0%{transform:scale(.95);box-shadow:0 0 #22d3eecc}70%{transform:scale(1);box-shadow:0 0 10px 15px #22d3eecc}to{transform:scale(1);box-shadow:0 0 10px 10px #22d3eecc}}@keyframes pulse-brand-light{0%{transform:scale(.95);box-shadow:0 0 #22d3eecc}70%{transform:scale(1);box-shadow:0 0 8px 8px #22d3eecc}to{transform:scale(1);box-shadow:0 0 8px 2px #22d3eecc}}@keyframes pulse-bright-brand-light{0%{transform:scale(.95);box-shadow:0 0 #22d3eee6}70%{transform:scale(1);box-shadow:0 0 8px 10px #22d3eee6}to{transform:scale(1);box-shadow:0 0 8px 6px #22d3eee6}}@keyframes pulse-white{0%{transform:scale(.95);box-shadow:0 0 #ffffffb3}70%{transform:scale(1);box-shadow:0 0 10px 10px #ffffffb3}to{transform:scale(1);box-shadow:0 0 10px 2px #ffffffb3}}@keyframes pulse-bright-white{0%{transform:scale(.95);box-shadow:0 0 #fff}70%{transform:scale(1);box-shadow:0 0 10px 15px #fff}to{transform:scale(1);box-shadow:0 0 10px 10px #fff}}.token-animation-layer{contain:layout style;pointer-events:none}.animated-token{will-change:transform;contain:layout style}.animated-token.current-player{z-index:1001}.animated-token.other-player{z-index:1000}.token-glow{will-change:opacity}.flight-trail{will-change:transform,opacity;border-radius:1px}@media (prefers-reduced-motion: reduce){.animated-token{transition:none!important}.token-glow{animation:none!important}.flight-trail{display:none}}@media (max-width: 768px){.flight-trail{display:none}.token-glow{filter:none}}@media (prefers-contrast: high){.animated-token.current-player{outline:3px solid currentColor;outline-offset:2px}}body.theme-dark .animated-token.current-player{filter:drop-shadow(0 0 12px rgba(34,211,238,.9))}body.theme-dark .flight-trail{opacity:.8}.flight-trail{width:clamp(0px,var(--trail-distance, 0px),200px)}body.theme-light .animated-token.current-player{filter:drop-shadow(0 0 8px rgba(34,211,238,.7));border:2px solid rgba(34,211,238,1)}body.theme-light .flight-trail{opacity:.6}body.theme-light .token-glow{background:radial-gradient(circle,rgba(34,211,238,.4) 0%,transparent 70%)}.gameboard{display:grid;height:100%;overflow-y:auto;padding-bottom:3rem;-webkit-overflow-scrolling:touch;scroll-behavior:auto}.gameboard ol{list-style:none;padding:0;--hue: 1;--unit: 1rem;--connector-color: rgba(148, 163, 184, .5);--connector-shadow: 0 1px 4px rgba(0, 0, 0, .2);--connector-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2));margin:0 auto}.gameboard li{--height: 6rem;position:relative;display:block;background-color:hsl(calc(var(--hue) * 360 / 10),70%,30%);border-color:hsl(calc(var(--hue) * 360 / 10),70%,30%);padding:.75rem;margin:2rem 1rem;border-radius:12px;color:#f5f5f5;text-shadow:0 2px 4px rgba(0,0,0,.8);box-shadow:0 8px 24px #0006,0 4px 16px #0003,0 2px 8px #0000001a;transition:all .3s cubic-bezier(.4,0,.2,1)}body.theme-light .gameboard li{background-color:hsla(calc(var(--hue) * 360 / 10),75%,55%,.7);border-color:hsla(calc(var(--hue) * 360 / 10),75%,55%,.7);color:#1a1a1a;text-shadow:none;box-shadow:0 3px 10px #0000001f,0 2px 6px #00000014,0 1px 3px #0000000f}.gameboard li.gray-tiles{background-color:#4b4b4bb3;border-color:#4b4b4bcc;--connector-color: rgba(75, 75, 75, .7)}body.theme-light .gameboard li.gray-tiles{background-color:#c8c8c8b3;border-color:#c8c8c8cc;--connector-color: rgba(200, 200, 200, .7);color:#3a3a3a;text-shadow:none}.gameboard li:before{content:"";background-color:var(--connector-color);position:absolute;display:block;width:var(--unit);height:var(--unit);top:100%;left:calc(50% - (var(--unit) / 2));box-shadow:var(--connector-shadow)}.gameboard li:after{content:"";position:absolute;display:block;top:calc(100% + var(--unit));left:calc(50% - (var(--unit)));border:var(--unit) solid transparent;border-top-color:var(--connector-color);filter:var(--connector-filter)}.gameboard li:last-child:before,.gameboard li:last-child:after{content:none!important}.gameboard .hue0{--hue: 0}.gameboard .hue1{--hue: 3}.gameboard .hue2{--hue: 6}.gameboard .hue3{--hue: 9}.gameboard .hue4{--hue: 2}.gameboard .hue5{--hue: 5}.gameboard .hue6{--hue: 8}.gameboard .hue7{--hue: 1}.gameboard .hue8{--hue: 4}.gameboard .hue9{--hue: 7}.gameboard .hue10{--hue: 10}@media (max-width: 820px){.gameboard li:first-child{margin-top:0}}@media (min-width: 820px){.gameboard li{margin:1rem;float:left;min-height:11rem}.gameboard li.left-connector:before,.gameboard li[class*=left-connect]:before{content:"";background-color:var(--connector-color);box-shadow:var(--connector-shadow);top:calc(var(--height) / 2 + var(--unit) / 2);left:100%}.gameboard li.left-connector:after,.gameboard li[class*=left-connect]:after{content:"";top:calc(var(--height) / 2);left:calc(100% + var(--unit));border:var(--unit) solid transparent;border-left-color:var(--connector-color);border-top-color:transparent;filter:var(--connector-filter)}.gameboard li.right-connector:before,.gameboard li[class*=right-connect]:before{content:"";background-color:var(--connector-color);box-shadow:var(--connector-shadow);top:calc(var(--height) / 2 + var(--unit) / 2);left:-1rem}.gameboard li.right-connector:after,.gameboard li[class*=right-connect]:after{content:"";top:calc(var(--height) / 2);left:-3rem;border:var(--unit) solid transparent;border-right-color:var(--connector-color);border-top-color:transparent;filter:var(--connector-filter)}}@media (min-width: 820px) and (max-width: 1019px){.gameboard li{width:calc(50% - 2rem)}.gameboard li:nth-child(4n+3),.gameboard li:nth-child(4n+4){float:right}.gameboard li:nth-child(4n+1):before,.gameboard li:nth-child(4n+1):after{content:"";top:calc(var(--height) / 2 + var(--unit) / 2);left:100%}.gameboard li:nth-child(4n+1):before{background-color:var(--connector-color);box-shadow:var(--connector-shadow)}.gameboard li:nth-child(4n+1):after{top:calc(var(--height) / 2);left:calc(100% + var(--unit));border:var(--unit) solid transparent;border-left-color:var(--connector-color);border-top-color:transparent;filter:var(--connector-filter)}.gameboard li:nth-child(4n+3):before{content:"";background-color:var(--connector-color);box-shadow:var(--connector-shadow);top:calc(var(--height) / 2 + var(--unit) / 2);left:-1rem}.gameboard li:nth-child(4n+3):after{content:"";top:calc(var(--height) / 2);left:-3rem;border:var(--unit) solid transparent;border-right-color:var(--connector-color);border-top-color:transparent;filter:var(--connector-filter)}}@media (min-width: 1020px) and (max-width: 1249px){.gameboard li{width:calc(33% - 2rem);min-height:12rem}.gameboard li:nth-child(6n+4),.gameboard li:nth-child(6n+5),.gameboard li:nth-child(6n+6){float:right}.gameboard li:nth-child(6n+1):before,.gameboard li:nth-child(6n+2):before,.gameboard li:nth-child(6n+1):after,.gameboard li:nth-child(6n+2):after{content:""}.gameboard li:nth-child(6n+1):before,.gameboard li:nth-child(6n+2):before{background-color:var(--connector-color);box-shadow:var(--connector-shadow);top:calc(var(--height) / 2 + var(--unit) / 2);left:100%}.gameboard li:nth-child(6n+1):after,.gameboard li:nth-child(6n+2):after{top:calc(var(--height) / 2);left:calc(100% + var(--unit));border:var(--unit) solid transparent;border-left-color:var(--connector-color);border-top-color:transparent;filter:var(--connector-filter)}.gameboard li:nth-child(6n+4):before,.gameboard li:nth-child(6n+5):before,.gameboard li:nth-child(6n+4):after,.gameboard li:nth-child(6n+5):after{content:""}.gameboard li:nth-child(6n+4):before,.gameboard li:nth-child(6n+5):before{background-color:var(--connector-color);box-shadow:var(--connector-shadow);top:calc(var(--height) / 2 + var(--unit) / 2);left:-1rem}.gameboard li:nth-child(6n+4):after,.gameboard li:nth-child(6n+5):after{top:calc(var(--height) / 2);left:-3rem;border:var(--unit) solid transparent;border-right-color:var(--connector-color);border-top-color:transparent;filter:var(--connector-filter)}}@media (min-width: 1250px) and (max-width: 1549px){.gameboard li{width:calc(25% - 2rem);min-height:12rem}.gameboard li:nth-child(8n+5),.gameboard li:nth-child(8n+6),.gameboard li:nth-child(8n+7),.gameboard li:nth-child(8n+8){float:right}.gameboard li:nth-child(8n+1):before,.gameboard li:nth-child(8n+2):before,.gameboard li:nth-child(8n+3):before,.gameboard li:nth-child(8n+1):after,.gameboard li:nth-child(8n+2):after,.gameboard li:nth-child(8n+3):after{content:""}.gameboard li:nth-child(8n+1):before,.gameboard li:nth-child(8n+2):before,.gameboard li:nth-child(8n+3):before{background-color:var(--connector-color);box-shadow:var(--connector-shadow);top:calc(var(--height) / 2 + var(--unit) / 2);left:100%}.gameboard li:nth-child(8n+1):after,.gameboard li:nth-child(8n+2):after,.gameboard li:nth-child(8n+3):after{top:calc(var(--height) / 2);left:calc(100% + var(--unit));border:var(--unit) solid transparent;border-left-color:var(--connector-color);border-top-color:transparent;filter:var(--connector-filter)}.gameboard li:nth-child(8n+5):before,.gameboard li:nth-child(8n+6):before,.gameboard li:nth-child(8n+7):before,.gameboard li:nth-child(8n+5):after,.gameboard li:nth-child(8n+6):after,.gameboard li:nth-child(8n+7):after{content:""}.gameboard li:nth-child(8n+5):before,.gameboard li:nth-child(8n+6):before,.gameboard li:nth-child(8n+7):before{background-color:var(--connector-color);box-shadow:var(--connector-shadow);top:calc(var(--height) / 2 + var(--unit) / 2);left:-1rem}.gameboard li:nth-child(8n+5):after,.gameboard li:nth-child(8n+6):after,.gameboard li:nth-child(8n+7):after{top:calc(var(--height) / 2);left:-3rem;border:var(--unit) solid transparent;border-right-color:var(--connector-color);border-top-color:transparent;filter:var(--connector-filter)}}@media (min-width: 1550px){.gameboard ol{max-width:1600px}.gameboard li{width:calc(100% / 6 - 2rem);min-height:12rem}.gameboard li:nth-child(12n+7),.gameboard li:nth-child(12n+8),.gameboard li:nth-child(12n+9),.gameboard li:nth-child(12n+10),.gameboard li:nth-child(12n+11),.gameboard li:nth-child(12n+12){float:right}.gameboard li:nth-child(12n+1):before,.gameboard li:nth-child(12n+2):before,.gameboard li:nth-child(12n+3):before,.gameboard li:nth-child(12n+4):before,.gameboard li:nth-child(12n+5):before{content:"";background-color:var(--connector-color);box-shadow:var(--connector-shadow);top:calc(var(--height) / 2 + var(--unit) / 2);left:100%}.gameboard li:nth-child(12n+1):after,.gameboard li:nth-child(12n+2):after,.gameboard li:nth-child(12n+3):after,.gameboard li:nth-child(12n+4):after,.gameboard li:nth-child(12n+5):after{content:"";top:calc(var(--height) / 2);left:calc(100% + var(--unit));border:var(--unit) solid transparent;border-left-color:var(--connector-color);border-top-color:transparent;filter:var(--connector-filter)}.gameboard li:nth-child(12n+7):before,.gameboard li:nth-child(12n+8):before,.gameboard li:nth-child(12n+9):before,.gameboard li:nth-child(12n+10):before,.gameboard li:nth-child(12n+11):before{content:"";background-color:var(--connector-color);box-shadow:var(--connector-shadow);top:calc(var(--height) / 2 + var(--unit) / 2);left:-1rem}.gameboard li:nth-child(12n+7):after,.gameboard li:nth-child(12n+8):after,.gameboard li:nth-child(12n+9):after,.gameboard li:nth-child(12n+10):after,.gameboard li:nth-child(12n+11):after{content:"";top:calc(var(--height) / 2);left:-3rem;border:var(--unit) solid transparent;border-right-color:var(--connector-color);border-top-color:transparent;filter:var(--connector-filter)}}