.auth-container{display:flex;flex:1 1 auto;height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-lg);position:relative;z-index:var(--z-content)}.auth-card{background:linear-gradient(135deg,var(--color-arcade-container-start) 0,var(--color-arcade-container-end) 100%);border:var(--border-arcade-heavy) solid var(--color-black);border-radius:var(--radius-2xl);box-shadow:var(--shadow-arcade-pink);margin:auto;max-width:min(400px,90vw);padding:var(--space-2xl);width:100%}.auth-title{color:var(--color-white);font-family:var(--font-arcade);font-size:1.5rem;font-weight:400;letter-spacing:2px;margin-bottom:var(--space-md);text-align:center;text-shadow:0 0 10px rgba(255,0,128,.8),2px 2px 0 var(--color-black)}.auth-subtitle{color:var(--color-text-secondary);font-size:.875rem;margin-bottom:var(--space-2xl);text-align:center}.auth-form{gap:var(--space-lg)}.auth-form,.form-group{display:flex;flex-direction:column}.form-group{gap:var(--space-xs)}.form-group label{color:var(--color-text-primary);font-size:.875rem;font-weight:500}.form-group input{background:#ffffffe6;border:var(--border-thick) solid var(--color-black);border-radius:var(--radius-sm);box-shadow:var(--shadow-arcade-input);color:var(--color-black);font-size:var(--text-base);padding:var(--space-md);transition:border-color var(--duration-instant),box-shadow var(--duration-instant)}.form-group input:focus{border-color:var(--color-arcade-bezel-start);box-shadow:var(--shadow-arcade-input-focus);outline:none}.form-group input:focus-visible{outline:2px solid gold;outline-offset:2px}.form-group input:disabled{cursor:not-allowed;opacity:.6}.form-hint{color:var(--color-text-secondary);font-size:.75rem}.auth-error{background:linear-gradient(135deg,var(--color-arcade-danger-end) 0,var(--color-arcade-bezel-start) 100%);border:var(--border-thick) solid var(--color-black);border-radius:var(--radius-sm);box-shadow:var(--shadow-arcade-md);color:var(--color-white);font-size:var(--text-sm);font-weight:700;padding:var(--space-md);text-align:center}.auth-button{background:var(--gradient-arcade-bezel);border:var(--border-thick) solid var(--color-black);border-radius:var(--radius-md);box-shadow:var(--shadow-arcade-button);color:var(--color-white);cursor:pointer;font-size:var(--text-base);font-weight:600;padding:var(--space-md) var(--space-xl);text-shadow:2px 2px 0 var(--color-black);transition:transform var(--duration-instant),box-shadow var(--duration-instant)}.auth-button:hover:not(:disabled){box-shadow:var(--shadow-arcade-button-hover);transform:translateY(-2px)}.auth-button:active:not(:disabled){box-shadow:var(--shadow-arcade-button-active);transform:translateY(2px)}.auth-button:disabled{cursor:not-allowed;opacity:.6}.auth-toggle{color:var(--color-text-secondary);font-size:.875rem;margin-top:var(--space-lg);text-align:center}.auth-toggle-button{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:inherit;font-weight:600;padding:0;text-decoration:underline}.auth-toggle-button:hover:not(:disabled){color:var(--color-secondary)}.auth-toggle-button:disabled{cursor:not-allowed;opacity:.6}.confirm-modal-backdrop{align-items:center;animation:fadeIn var(--duration-normal) ease-out;background-color:#000000bf;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--z-modal)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.confirm-modal{animation:slideIn var(--duration-slow) ease-out;background:linear-gradient(135deg,var(--color-arcade-container-start) 0,var(--color-arcade-container-end) 100%);border:var(--border-arcade) solid #000;border-radius:8px;box-shadow:var(--shadow-arcade-lg);box-sizing:border-box;max-width:90%;padding:var(--space-lg);width:min(450px,90vw)}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.confirm-modal__icon{font-size:48px;margin-bottom:var(--space-md);text-align:center}.confirm-modal__title{color:var(--color-text-primary,#f1f5f9);font-size:var(--text-2xl);font-weight:700;margin:0 0 var(--space-3) 0;text-align:center}.confirm-modal__message{color:var(--color-text-secondary,#cbd5e1);font-size:var(--text-base);line-height:1.5;margin:0 0 var(--space-lg) 0;text-align:center}.confirm-modal__actions{display:flex;gap:var(--space-3);justify-content:flex-end}.confirm-modal__button{border:var(--border-default) solid #000;border-radius:4px;box-shadow:0 3px #0000004d,0 5px 8px #0003;cursor:pointer;font-family:var(--font-primary,"Press Start 2P",monospace);font-size:var(--text-base);font-weight:700;min-width:100px;padding:10px 20px;text-shadow:1px 1px 0 rgba(0,0,0,.5);transition:background var(--duration-instant),transform var(--duration-instant),box-shadow var(--duration-instant)}.confirm-modal__button:disabled{cursor:not-allowed;opacity:.5}.confirm-modal__button:focus-visible{outline:var(--border-thick) solid var(--color-primary,#6366f1);outline-offset:2px}.confirm-modal__button--cancel{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff}.confirm-modal__button--cancel:hover:not(:disabled){background:linear-gradient(135deg,#4b5563,#374151);box-shadow:0 5px #0000004d,0 7px 12px #0000004d;transform:translateY(-2px)}.confirm-modal__button--cancel:active:not(:disabled){box-shadow:0 1px #0000004d,0 3px 5px #0003;transform:translateY(1px)}.confirm-modal__button--confirm{color:#fff}.confirm-modal__button--info{background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-dark) 100%)}.confirm-modal__button--info:hover:not(:disabled){background:linear-gradient(135deg,var(--color-primary-dark) 0,#4338ca 100%);box-shadow:0 5px #0000004d,0 7px 12px #0000004d;transform:translateY(-2px)}.confirm-modal__button--warning{background:linear-gradient(135deg,var(--color-warning) 0,#d97706 100%)}.confirm-modal__button--warning:hover:not(:disabled){background:linear-gradient(135deg,#d97706,#b45309);box-shadow:0 5px #0000004d,0 7px 12px #0000004d;transform:translateY(-2px)}.confirm-modal__button--danger{background:linear-gradient(135deg,var(--color-danger) 0,var(--color-danger-dark) 100%)}.confirm-modal__button--danger:hover:not(:disabled){background:linear-gradient(135deg,var(--color-danger-dark) 0,#b91c1c 100%);box-shadow:0 5px #0000004d,0 7px 12px #0000004d;transform:translateY(-2px)}.confirm-modal__button--confirm:active:not(:disabled){box-shadow:0 1px #0000004d,0 3px 5px #0003;transform:translateY(1px)}.confirm-modal__loading{align-items:center;display:inline-flex;gap:var(--space-2)}.confirm-modal--danger{border-color:var(--color-danger)}.confirm-modal--danger .confirm-modal__title{color:var(--color-error-light)}.confirm-modal--warning{border-color:var(--color-warning)}.confirm-modal--warning .confirm-modal__title{color:#fcd34d}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.spinner{animation:spin .6s linear infinite;border:var(--border-default) solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;display:inline-block;height:var(--space-md);width:var(--space-md)}@media(max-width:640px){.confirm-modal{max-width:none;padding:16px;width:calc(100% - 20px)}.confirm-modal__title{font-size:var(--text-xl)}.confirm-modal__button,.confirm-modal__message{font-size:var(--text-sm)}.confirm-modal__button{min-width:80px;padding:var(--space-2) var(--space-md)}.confirm-modal__actions{flex-direction:column-reverse}.confirm-modal__actions button{width:100%}}.arcade-leave-button.arcade-rooms-button{background:linear-gradient(135deg,#4ecdc4,#2c7a7b);box-shadow:0 4px #1d4f50,0 8px 12px #0006;padding:0 10px}@media(hover:hover)and (pointer:fine){.arcade-leave-button.arcade-rooms-button:hover{box-shadow:0 6px #1d4f50,0 10px 16px #00000080}}.arcade-rooms-button__badge{background:#f59e0b;border:2px solid #000;border-radius:10px;color:#111827;font-family:system-ui,sans-serif;font-size:11px;font-weight:800;height:20px;left:-8px;line-height:16px;min-width:20px;padding:0 5px;position:absolute;text-shadow:none;top:-8px}@media(max-width:768px){.arcade-rooms-button__arrow{display:none}}.connection-overlay{left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:var(--z-tooltip)}@media(prefers-reduced-motion:no-preference){.connection-overlay{animation:connectionSlideDown .3s ease-out}}@keyframes connectionSlideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.connection-banner{align-items:center;background:linear-gradient(135deg,var(--color-error-light) 0,#ee5a6f 100%);border-bottom:3px solid var(--color-error-dark);box-shadow:0 4px 12px #0000004d;color:#fff;display:flex;gap:16px;padding:16px 20px;pointer-events:auto}.connection-banner--disconnected{background:linear-gradient(135deg,#dc2626,#b91c1c);border-bottom-color:#991b1b}.connection-banner--reconnecting{background:linear-gradient(135deg,#d97706,#b45309);border-bottom-color:#92400e}.connection-banner--circuit-open{background:linear-gradient(135deg,#ea580c,#c2410c);border-bottom-color:#9a3412}.connection-icon{font-size:32px}@media(prefers-reduced-motion:no-preference){.connection-icon{animation:connectionPulse 2s ease-in-out infinite}}@keyframes connectionPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.connection-content{display:flex;flex:1;flex-direction:column;gap:4px}.connection-title{font-size:18px;font-weight:700;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.connection-message{align-items:center;display:flex;font-size:14px;gap:12px;opacity:1;text-shadow:0 1px 1px rgba(0,0,0,.2)}.connection-hint{font-size:12px;font-style:italic;opacity:.95;text-shadow:0 1px 1px rgba(0,0,0,.2)}.connection-queue-info{background:#fff3;border-radius:8px;display:inline-block;font-size:13px;font-weight:600;margin-top:4px;padding:6px 12px}.connection-spinner{border:2px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;height:14px;width:14px}@media(prefers-reduced-motion:no-preference){.connection-spinner{animation:connectionSpin .8s linear infinite}}@media(prefers-reduced-motion:reduce){.connection-spinner{opacity:.7}}@keyframes connectionSpin{to{transform:rotate(1turn)}}@media(max-width:640px){.connection-banner{gap:12px;padding:12px 16px}.connection-icon{font-size:24px}.connection-title{font-size:16px}.connection-message{font-size:13px}.connection-hint{font-size:11px}}.game-disabled-overlay{position:relative}.game-disabled-overlay:after{background:#0000001a;bottom:0;content:"";cursor:not-allowed;left:0;pointer-events:all;position:absolute;right:0;top:0;z-index:var(--z-dropdown)}.ping-indicator{align-items:center;background:#111827b8;border:1px solid hsla(0,0%,100%,.18);border-radius:11px;bottom:max(8px,env(safe-area-inset-bottom,0px));color:#ffffffe6;display:flex;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-variant-numeric:tabular-nums;font-weight:600;gap:6px;height:22px;line-height:1;padding:0 9px;pointer-events:none;position:fixed;right:max(8px,env(safe-area-inset-right,0px));-webkit-user-select:none;user-select:none;z-index:var(--z-tooltip)}.ping-indicator__dot{border-radius:50%;flex-shrink:0;height:7px;width:7px}.ping-indicator.connection-quality-badge{background:#111827e6;border-color:#eab308;color:#fde68a}@media(prefers-reduced-motion:no-preference){.ping-indicator.connection-quality-badge{animation:connectionBadgeFadeIn .3s ease-out}}@keyframes connectionBadgeFadeIn{0%{opacity:0}to{opacity:1}}.connection-retry-btn{background:#fffffff2;border:none;border-radius:8px;color:#1f2937;cursor:pointer;flex-shrink:0;font-size:14px;font-weight:600;min-height:44px;min-width:44px;padding:12px 24px;transition:background-color .2s,transform .1s;white-space:nowrap}.connection-retry-btn:hover{background:#fff;transform:translateY(-1px)}.connection-retry-btn:active{transform:translateY(0)}.connection-retry-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}@media(max-width:640px){.connection-retry-btn{font-size:13px;min-height:48px;padding:10px 20px}}.recovery-modal-backdrop{align-items:center;animation:recoveryFadeIn var(--duration-normal,.2s) ease-out;background-color:#000000bf;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--z-modal)}@keyframes recoveryFadeIn{0%{opacity:0}to{opacity:1}}.recovery-modal{animation:recoverySlideIn var(--duration-slow,.3s) ease-out;background:linear-gradient(135deg,var(--color-arcade-container-start,#1e293b) 0,var(--color-arcade-container-end,#0f172a) 100%);border:var(--border-arcade,3px) solid #000;border-radius:8px;box-shadow:var(--shadow-arcade-lg,0 8px 32px rgba(0,0,0,.5));display:flex;flex-direction:column;max-height:80dvh;max-width:90%;padding:var(--space-lg,24px);width:min(500px,90vw)}@keyframes recoverySlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.recovery-modal__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-md,16px)}.recovery-modal__title{color:var(--color-text-primary,#f1f5f9);font-size:var(--text-xl,20px);font-weight:700;margin:0}.recovery-modal__close{background:none;border:none;color:var(--color-text-secondary,#94a3b8);cursor:pointer;font-size:28px;line-height:1;padding:var(--space-1,4px);transition:color var(--duration-instant,.1s)}.recovery-modal__close:hover{color:var(--color-text-primary,#f1f5f9)}.recovery-modal__close:focus-visible{border-radius:4px;outline:var(--border-thick,2px) solid var(--color-primary,#6366f1);outline-offset:2px}.recovery-modal__description{color:var(--color-text-secondary,#94a3b8);font-size:var(--text-sm,14px);line-height:1.5;margin:0 0 var(--space-md,16px) 0}.recovery-modal__empty{color:var(--color-text-secondary,#94a3b8);font-size:var(--text-base,16px);padding:var(--space-lg,24px) 0;text-align:center}.recovery-modal__list{flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:0}.recovery-modal__item{margin-bottom:var(--space-2,8px)}.recovery-modal__item:last-child{margin-bottom:0}.recovery-modal__game-row{align-items:stretch;display:flex;gap:var(--space-2,8px)}.recovery-modal__delete-button{align-items:center;background:linear-gradient(135deg,#ef444426,#ef44440d);border:2px solid rgba(239,68,68,.3);border-radius:6px;color:#ef4444;cursor:pointer;display:flex;flex-shrink:0;font-size:24px;font-weight:700;justify-content:center;line-height:1;transition:background var(--duration-instant,.1s),border-color var(--duration-instant,.1s),transform var(--duration-instant,.1s);width:40px}.recovery-modal__delete-button:hover{background:linear-gradient(135deg,#ef444459,#ef444433);border-color:#ef444499;transform:scale(1.05)}.recovery-modal__delete-button:focus-visible{outline:var(--border-thick,2px) solid #ef4444;outline-offset:2px}.recovery-modal__delete-button:active{transform:scale(.95)}.recovery-modal__game-button{align-items:center;background:linear-gradient(135deg,#6366f126,#6366f10d);border:2px solid rgba(99,102,241,.3);border-radius:6px;cursor:pointer;display:flex;flex:1;font-family:inherit;justify-content:space-between;min-width:0;padding:var(--space-3,12px) var(--space-md,16px);transition:background var(--duration-instant,.1s),border-color var(--duration-instant,.1s),transform var(--duration-instant,.1s)}.recovery-modal__game-button:hover{background:linear-gradient(135deg,#6366f140,#6366f126);border-color:#6366f180;transform:translateY(-1px)}.recovery-modal__game-button:focus-visible{outline:var(--border-thick,2px) solid var(--color-primary,#6366f1);outline-offset:2px}.recovery-modal__game-button:active{transform:translateY(0)}.recovery-modal__game-info{align-items:flex-start;display:flex;flex-direction:column;gap:var(--space-1,4px)}.recovery-modal__game-type{color:var(--color-text-primary,#f1f5f9);font-size:var(--text-base,16px);font-weight:600}.recovery-modal__opponent{color:var(--color-text-secondary,#94a3b8);font-size:var(--text-sm,14px)}.recovery-modal__game-meta{align-items:flex-end;display:flex;flex-direction:column;gap:var(--space-1,4px)}.recovery-modal__time{color:var(--color-text-muted,#64748b);font-size:var(--text-xs,12px)}.recovery-modal__resume-text{color:var(--color-primary,#6366f1);font-size:var(--text-sm,14px);font-weight:600}.recovery-modal__footer{display:flex;gap:var(--space-2,8px);justify-content:flex-end;margin-top:var(--space-md,16px)}.recovery-modal__dismiss-button{background:linear-gradient(135deg,#6b7280,#4b5563);border:var(--border-default,2px) solid #000;border-radius:4px;box-shadow:0 3px #0000004d,0 5px 8px #0003;color:#fff;cursor:pointer;font-family:var(--font-primary,"Press Start 2P",monospace);font-size:var(--text-sm,14px);font-weight:600;padding:var(--space-2,8px) var(--space-md,16px);text-shadow:1px 1px 0 rgba(0,0,0,.5);transition:background var(--duration-instant,.1s),transform var(--duration-instant,.1s),box-shadow var(--duration-instant,.1s)}.recovery-modal__dismiss-button:hover{background:linear-gradient(135deg,#4b5563,#374151);box-shadow:0 5px #0000004d,0 7px 12px #0000004d;transform:translateY(-2px)}.recovery-modal__dismiss-button:focus-visible{outline:var(--border-thick,2px) solid var(--color-primary,#6366f1);outline-offset:2px}.recovery-modal__dismiss-button:active{box-shadow:0 1px #0000004d,0 3px 5px #0003;transform:translateY(1px)}.recovery-modal__dismiss-button--secondary{background:transparent;border-color:#6b728080;box-shadow:none;color:var(--color-text-secondary,#94a3b8);font-family:inherit;font-size:var(--text-xs,12px)}.recovery-modal__dismiss-button--secondary:hover{background:#6b728026;border-color:#6b7280b3;box-shadow:none;color:var(--color-text-primary,#f1f5f9);transform:none}.recovery-modal__dismiss-button--secondary:active{box-shadow:none;transform:none}@media(max-width:640px){.recovery-modal{max-height:85dvh;padding:var(--space-md,16px);width:95%}.recovery-modal__title{font-size:var(--text-lg,18px)}.recovery-modal__description{font-size:var(--text-xs,12px)}.recovery-modal__game-row{gap:var(--space-1,4px)}.recovery-modal__delete-button{font-size:20px;width:36px}.recovery-modal__game-button{align-items:flex-start;flex-direction:column;gap:var(--space-2,8px);padding:var(--space-2,8px) var(--space-3,12px)}.recovery-modal__game-meta{align-items:center;flex-direction:row;justify-content:space-between;width:100%}.recovery-modal__footer{flex-direction:column-reverse}.recovery-modal__dismiss-button{padding:var(--space-2,8px);width:100%}}.a11y-settings-backdrop{align-items:center;animation:fadeIn var(--duration-normal) ease-out;background-color:#000000bf;display:flex;top:0;right:0;bottom:0;left:0;justify-content:center;padding:var(--space-md);position:fixed;z-index:var(--z-modal)}.a11y-settings{background:linear-gradient(135deg,var(--color-arcade-container-start) 0,var(--color-arcade-container-end) 100%);border:var(--border-arcade) solid #000;border-radius:8px;box-shadow:var(--shadow-arcade-lg);box-sizing:border-box;max-height:90dvh;overflow-y:auto;padding:var(--space-lg);width:min(460px,92vw)}.a11y-settings__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-md)}.a11y-settings__title{color:var(--color-text-primary,#f1f5f9);font-size:var(--text-2xl);font-weight:700;margin:0}.a11y-settings__close{background:transparent;border:none;border-radius:6px;color:var(--color-text-primary,#f1f5f9);cursor:pointer;font-size:var(--text-xl);line-height:1;padding:var(--space-xs)}.a11y-settings__close:hover{background:#ffffff1a}.a11y-settings__group{border:1px solid hsla(0,0%,100%,.12);border-radius:8px;margin:0 0 var(--space-md) 0;padding:var(--space-md)}.a11y-settings__legend{color:var(--color-text-primary,#f1f5f9);font-weight:700;padding:0 var(--space-xs)}.a11y-settings__radio,.a11y-settings__toggle{align-items:center;cursor:pointer;display:flex;gap:var(--space-sm);padding:var(--space-sm) 0}.a11y-settings__radio-body,.a11y-settings__toggle-body{display:flex;flex:1;flex-direction:column}.a11y-settings__radio-label{color:var(--color-text-primary,#f1f5f9);font-weight:600}.a11y-settings__radio-hint{color:var(--color-text-secondary,#94a3b8);font-size:var(--text-sm)}.a11y-settings__swatches{display:inline-flex;gap:4px}.a11y-settings__swatch{border:1px solid rgba(0,0,0,.4);border-radius:50%;height:18px;width:18px}.a11y-settings__toggle+.a11y-settings__toggle{border-top:1px solid hsla(0,0%,100%,.08)}.app-header{align-items:center;background:linear-gradient(135deg,var(--color-arcade-container-start) 0,var(--color-arcade-container-end) 100%);border-bottom:var(--border-thick) solid var(--color-black);box-shadow:var(--shadow-arcade-sm);box-sizing:border-box;display:flex;flex-shrink:0;height:calc(var(--header-height) + env(safe-area-inset-top,0px));justify-content:space-between;max-height:calc(var(--header-height) + env(safe-area-inset-top,0px));min-height:calc(var(--header-height) + env(safe-area-inset-top,0px));padding:var(--space-2) max(var(--space-6),env(safe-area-inset-right)) var(--space-2) max(var(--space-6),env(safe-area-inset-left));padding-top:calc(var(--space-2) + env(safe-area-inset-top,0px));position:sticky;top:0;z-index:var(--z-header)}.app-header.friends-open{z-index:var(--z-modal)}.header-left{flex:1;gap:var(--space-8)}.header-center,.header-left{align-items:center;display:flex}.header-center{justify-content:center;left:50%;position:absolute;transform:translate(-50%)}.header-arcade-brand{background:var(--gradient-arcade-bezel);border-radius:8px;box-shadow:0 4px 12px #ff008080,inset 0 -2px 4px #0000004d;color:#fff;cursor:pointer;display:inline-block;font-family:var(--font-arcade);font-size:clamp(.6rem,1.2vw,.75rem);letter-spacing:2px;padding:8px 16px;text-decoration:none;text-shadow:0 0 10px hsla(0,0%,100%,.8);transition:transform var(--duration-fast) ease,filter var(--duration-fast) ease,box-shadow var(--duration-fast) ease}.header-arcade-brand:hover{box-shadow:0 6px 16px #ff0080b3,inset 0 -2px 4px #0000004d;filter:brightness(1.2);transform:scale(1.05)}.header-arcade-brand:active{transform:scale(.98)}@media(prefers-reduced-motion:no-preference){.header-arcade-brand{animation:neonPulse 2s ease-in-out infinite}}@keyframes neonPulse{0%,to{text-shadow:0 0 10px hsla(0,0%,100%,.8),0 0 20px rgba(255,0,128,.6),0 0 30px rgba(255,0,128,.4)}50%{text-shadow:0 0 15px #fff,0 0 30px rgba(255,0,128,.8),0 0 45px rgba(255,0,128,.6)}}.header-nav{align-items:center;display:flex;gap:var(--space-4)}.friends-dropdown-container,.nav-button,.nav-item{position:relative}.nav-button{align-items:center;background:linear-gradient(135deg,var(--color-primary) 0,var(--color-primary-dark) 100%);border:var(--border-default) solid var(--color-black);border-radius:var(--radius-sm);box-shadow:var(--shadow-arcade-sm);color:var(--color-white);cursor:pointer;display:flex;font-size:var(--text-base);font-weight:700;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-4);text-shadow:1px 1px 0 rgba(0,0,0,.5);transition:transform var(--duration-instant),background var(--duration-instant),box-shadow var(--duration-instant)}@media(hover:hover)and (pointer:fine){.nav-button:hover{background:linear-gradient(135deg,var(--color-primary-dark) 0,var(--color-indigo-dark) 100%);box-shadow:0 5px #0000004d,0 7px 12px #0000004d;transform:translateY(-2px)}}.nav-button:active{box-shadow:0 1px #0000004d,0 3px 5px #0003;transform:translateY(1px)}.nav-button.active{background:linear-gradient(135deg,var(--color-success) 0,var(--color-success-dark) 100%);box-shadow:0 0 15px #10b98180,0 3px #0000004d,0 5px 8px #0003}.nav-button.prefetching{opacity:.9}.prefetch-indicator{animation:prefetchPulse 1s ease-in-out infinite;color:#6366f1cc;font-size:var(--text-base);line-height:1;pointer-events:none;position:absolute;right:2px;top:-2px}@keyframes prefetchPulse{0%,to{opacity:.4}50%{opacity:1}}.dropdown-icon{font-size:var(--text-xs);transition:transform var(--duration-normal) ease}.friends-dropdown{background:linear-gradient(135deg,var(--color-arcade-container-start) 0,var(--color-arcade-container-end) 100%);border:var(--border-arcade) solid var(--color-black);border-radius:var(--radius-md);box-shadow:var(--shadow-arcade-lg);box-sizing:border-box;left:0;max-height:80dvh;max-width:min(600px,calc(100vw - var(--space-8)));overflow-x:hidden;overflow-y:auto;position:absolute;right:auto;top:calc(100% + var(--space-2));width:min(420px,calc(100vw - var(--space-8)));z-index:var(--z-modal)}@media(prefers-reduced-motion:no-preference){.friends-dropdown{animation:headerSlideDown var(--duration-normal) ease}}@keyframes headerSlideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.header-right{align-items:center;display:flex;gap:var(--space-6)}.user-info{align-items:flex-end;display:flex;flex-direction:column;gap:var(--space-1)}.username{color:var(--color-white);font-size:var(--text-base);font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.username.username-link{text-decoration:none;transition:color var(--duration-fast) ease}.username.username-link:hover{color:var(--color-indigo-light);text-decoration:underline}.user-stats-compact{display:flex;gap:var(--space-2)}.stat-badge{background:#6366f133;border-radius:var(--radius-md);color:var(--color-white);font-size:var(--text-xs);font-weight:600;padding:var(--space-1) var(--space-2)}.stat-badge.stat-wins{background:#10b98133;color:var(--color-success)}.stat-badge.stat-losses{background:#ef444433;color:var(--color-danger)}.header-icon-button{align-items:center;background:linear-gradient(135deg,var(--color-arcade-container-start) 0,var(--color-arcade-container-end) 100%);border:var(--border-default) solid var(--color-black);border-radius:var(--radius-sm);box-shadow:var(--shadow-arcade-sm);color:var(--color-white);cursor:pointer;display:inline-flex;flex-shrink:0;font-size:var(--text-lg);justify-content:center;min-height:44px;min-width:44px;padding:var(--space-2);transition:transform var(--duration-instant),box-shadow var(--duration-instant)}.header-icon-button:hover{box-shadow:0 5px #0000004d,0 7px 12px #0000004d;transform:translateY(-2px)}.header-icon-button:active{transform:translateY(1px)}.logout-button{background:linear-gradient(135deg,var(--color-danger) 0,var(--color-danger-dark) 100%);border:var(--border-default) solid var(--color-black);border-radius:var(--radius-sm);box-shadow:var(--shadow-arcade-sm);color:var(--color-white);cursor:pointer;flex-shrink:0;font-size:var(--text-sm);font-weight:700;min-height:44px;padding:var(--space-2) var(--space-4);text-shadow:1px 1px 0 rgba(0,0,0,.5);transition:transform var(--duration-instant),background var(--duration-instant),box-shadow var(--duration-instant)}.logout-button:hover{background:linear-gradient(135deg,var(--color-danger-dark) 0,#b91c1c 100%);box-shadow:0 5px #0000004d,0 7px 12px #0000004d;transform:translateY(-2px)}.logout-button:active{box-shadow:0 1px #0000004d,0 3px 5px #0003;transform:translateY(1px)}@media(max-width:1024px){.app-header{padding:var(--space-3) max(var(--space-6),env(safe-area-inset-right)) var(--space-3) max(var(--space-6),env(safe-area-inset-left));padding-top:calc(var(--space-3) + env(safe-area-inset-top,0px))}.header-left{gap:var(--space-6)}}@media(max-width:768px){.app-header{flex-wrap:nowrap;height:calc(var(--header-height-mobile) + env(safe-area-inset-top,0px));max-height:calc(var(--header-height-mobile) + env(safe-area-inset-top,0px));min-height:calc(var(--header-height-mobile) + env(safe-area-inset-top,0px));padding:var(--space-1) max(var(--space-3),env(safe-area-inset-right)) var(--space-1) max(var(--space-3),env(safe-area-inset-left));padding-top:calc(var(--space-1) + env(safe-area-inset-top,0px))}.header-left,.header-right{gap:var(--space-2)}.header-arcade-brand{font-size:.625rem;padding:4px 8px}.friends-dropdown{animation:slideDownMobile var(--duration-normal) ease;bottom:max(var(--space-4),env(safe-area-inset-bottom));left:var(--space-4);max-height:none;max-width:none;min-width:auto;position:fixed;right:var(--space-4);top:calc(var(--header-height-mobile) + env(safe-area-inset-top));transform:none;width:auto}@keyframes slideDownMobile{0%{margin-top:-10px;opacity:0}to{margin-top:0;opacity:1}}.user-info{align-items:center;display:flex;flex-direction:row;gap:var(--space-2)}.username{font-size:var(--text-sm);max-width:80px}.user-stats-compact{display:flex;gap:var(--space-1)}.stat-badge{font-size:.6rem;padding:2px 4px}.nav-button{font-size:var(--text-sm)}.logout-button,.nav-button{min-height:44px;padding:var(--space-1) var(--space-2)}.logout-button{font-size:var(--text-xs)}}@media(max-width:480px){.app-header{padding:var(--space-1) max(var(--space-2),env(safe-area-inset-right)) var(--space-1) max(var(--space-2),env(safe-area-inset-left))}.header-left,.header-right{gap:var(--space-1)}.user-stats-compact{display:none}.header-arcade-brand{font-size:.625rem;letter-spacing:1px;padding:3px 6px}.nav-button{font-size:var(--text-xs)}.logout-button,.nav-button{min-height:44px;padding:4px 8px}.logout-button{font-size:.65rem}}.header-brand-short{display:none}@media(max-width:480px){.header-brand-full{display:none}.header-brand-short{display:inline}}@media(max-width:1024px){.header-left{flex:0 0 auto}.header-center{flex:0 0 auto;margin:0 var(--space-2);position:static;transform:none}.header-right{flex:1 1 auto;justify-content:flex-end;min-width:0}.user-info{flex:0 1 auto;min-width:0}.username{max-width:30vw;min-width:0}}.loading-screen{align-items:center;background-color:#000c;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:var(--z-overlay)}.loading-content{align-items:center;display:flex;flex-direction:column;gap:1.5rem}.loading-spinner{animation:spin .7s linear infinite;border:6px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff;height:60px;width:60px}@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none;opacity:.7}}@keyframes spin{to{transform:rotate(1turn)}}.loading-message{color:#fff;font-size:1.25rem;font-weight:500;margin:0;text-align:center}.reconnect-countdown-overlay{animation:slideInRight .3s ease-out;bottom:100px;position:fixed;right:20px;z-index:var(--z-modal)}.reconnect-countdown-content{align-items:center;background:#2a9d8ff2;border:3px solid var(--color-white);border-radius:12px;box-shadow:0 8px 32px #0000004d;display:flex;gap:15px;padding:16px 24px;text-align:center}.reconnect-countdown-ring{animation:pulse 1s ease-in-out infinite}.reconnect-countdown-text{color:var(--color-white);font-size:16px;font-weight:600;letter-spacing:1px;text-shadow:1px 1px 2px rgba(0,0,0,.2);text-transform:uppercase}@keyframes slideInRight{0%{opacity:0;transform:translate(400px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.skeleton{background:linear-gradient(90deg,var(--color-gray-900) 0,var(--color-surface) 20%,var(--color-surface-light) 40%,var(--color-surface) 60%,var(--color-gray-900) 100%);background-size:200% 100%;border-radius:var(--radius-sm);display:block;pointer-events:none;-webkit-user-select:none;user-select:none}@media(prefers-reduced-motion:no-preference){.skeleton{animation:skeleton-shimmer 1.5s ease-in-out infinite}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}}@media(prefers-reduced-motion:reduce){.skeleton{animation:skeleton-pulse 2s ease-in-out infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}}.skeleton-rectangular{height:var(--space-5);margin-bottom:var(--space-2);width:100%}.skeleton-circle{border-radius:var(--radius-full);height:40px;margin-bottom:0;width:40px}.skeleton-text{border-radius:var(--radius-sm);height:1em;margin-bottom:.5em;width:100%}.skeleton-text:last-child{margin-bottom:0;width:80%}@media(prefers-contrast:high){.skeleton{background:linear-gradient(90deg,var(--color-border) 0,var(--color-border-light) 20%,var(--color-gray-600) 40%,var(--color-border-light) 60%,var(--color-border) 100%)}}@media(prefers-color-scheme:dark){.skeleton{background:linear-gradient(90deg,var(--color-gray-900) 0,var(--color-surface) 20%,var(--color-surface-light) 40%,var(--color-surface) 60%,var(--color-gray-900) 100%)}}.game-list-skeleton{display:flex;flex-direction:column;gap:var(--space-md)}.game-card-skeleton{background:#ffffff0d;border:var(--border-default) solid hsla(0,0%,100%,.1);border-radius:var(--radius-md);display:flex;flex-direction:column;padding:var(--space-md)}.game-card-skeleton-players{align-items:center;display:flex;margin-bottom:var(--space-md)}.game-card-skeleton-actions{display:flex;gap:var(--space-2)}.dashboard-skeleton-container{margin:0 auto;max-width:1200px;padding:var(--space-lg)}.dashboard-skeleton-header{align-items:flex-start;background:#ffffff0d;border:var(--border-arcade) solid var(--color-overlay-medium);border-radius:var(--radius-2xl);display:flex;justify-content:space-between;margin-bottom:var(--space-lg);padding:var(--space-lg)}.dashboard-skeleton-header-left{flex:1}.dashboard-skeleton-content{background:#ffffff0d;border:var(--border-arcade) solid var(--color-overlay-medium);border-radius:var(--radius-2xl);padding:var(--space-lg)}.dashboard-skeleton-actions{display:grid;gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:var(--space-lg)}.dashboard-skeleton-panel{background:var(--color-overlay-medium);border:var(--border-arcade) solid var(--color-overlay-medium);border-radius:var(--radius-md);margin-top:var(--space-md);padding:var(--space-lg)}.friend-list-skeleton{display:flex;flex-direction:column;gap:var(--space-3)}.friend-card-skeleton,.request-card-skeleton,.search-result-skeleton{align-items:center;background:var(--color-gray-900);border:var(--border-thin) solid var(--color-border);border-radius:var(--radius-md);display:flex;gap:var(--space-3);justify-content:space-between;padding:var(--space-md)}.friend-card-skeleton-info{flex:1;min-width:0}.friend-card-skeleton-actions{align-items:center;display:flex;flex-shrink:0;gap:var(--space-2)}@media(max-width:768px){.dashboard-skeleton-container{padding:var(--space-3)}.dashboard-skeleton-header{flex-direction:column;gap:var(--space-md);padding:var(--space-md)}.dashboard-skeleton-content{padding:var(--space-md)}.dashboard-skeleton-actions{gap:var(--space-3);grid-template-columns:1fr}.dashboard-skeleton-panel{padding:var(--space-md)}.friend-card-skeleton,.request-card-skeleton,.search-result-skeleton{align-items:stretch;flex-direction:column}.friend-card-skeleton-actions{justify-content:stretch;width:100%}.friend-card-skeleton-actions>*{flex:1}}.toast-container{bottom:calc(max(var(--space-5),env(safe-area-inset-bottom,0px)) + var(--ping-indicator-space));display:flex;flex-direction:column-reverse;gap:var(--space-3);max-height:calc(100dvh - 100px - env(safe-area-inset-bottom,0px));overflow-y:auto;pointer-events:none;position:fixed;right:max(var(--space-5),env(safe-area-inset-right,0px));z-index:var(--z-toast)}.toast{border-radius:var(--radius-md);box-shadow:var(--shadow-md);max-width:500px;min-width:300px;overflow:hidden;pointer-events:auto;position:relative}@media(prefers-reduced-motion:no-preference){.toast{animation:slideIn .3s ease-out}}.toast-error{background:var(--color-danger-dark);color:var(--color-white)}.toast-success{background:var(--color-success-dark);color:var(--color-white)}.toast-info{background:var(--color-speed-blue);color:var(--color-white)}.toast-warning{background:var(--color-warning);color:var(--color-white)}.toast-header{padding:var(--space-md)}.toast-content,.toast-header{align-items:center;display:flex;gap:var(--space-3)}.toast-icon{flex-shrink:0;font-size:20px}.toast-message{flex:1;font-weight:500;word-break:break-word}.toast-close{align-items:center;background:none;border:none;color:inherit;cursor:pointer;display:flex;flex-shrink:0;font-size:var(--text-2xl);justify-content:center;margin-left:auto;min-height:44px;min-width:44px;opacity:.8;padding:0;transition:opacity var(--duration-normal)}.toast-close:hover{opacity:1}.toast-body{border-top:var(--border-thin) solid hsla(0,0%,100%,.2);margin-top:-4px;padding:0 var(--space-md) var(--space-md) var(--space-md);padding-top:var(--space-3)}.toast-error-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:var(--text-xs);margin-bottom:var(--space-2);opacity:.9}.toast-error-code code{background:#fff3;border-radius:var(--radius-sm);font-weight:600;padding:var(--space-1) var(--space-2)}.toast-trace-id{cursor:help;font-size:11px;opacity:.7}.toast-guidance{font-size:var(--text-sm);line-height:1.4;margin-bottom:var(--space-3);opacity:.95}.toast-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.toast-action-btn{border:none;border-radius:var(--radius-md);cursor:pointer;font-size:13px;font-weight:500;min-height:44px;padding:var(--space-2) var(--space-md);transition:background-color var(--duration-normal),transform var(--duration-instant)}.toast-action-btn:hover{transform:translateY(-1px)}.toast-action-btn:active{transform:translateY(0)}.toast-action-btn--custom,.toast-action-btn--reconnect,.toast-action-btn--retry{background:#fffffff2;color:var(--color-gray-900)}.toast-action-btn--custom:hover,.toast-action-btn--reconnect:hover,.toast-action-btn--retry:hover{background:#fff}.toast-action-btn--redirect,.toast-action-btn--refresh{background:#ffffff4d;color:#fff}.toast-action-btn--redirect:hover,.toast-action-btn--refresh:hover{background:#fff6}.toast-action-btn--dismiss{background:transparent;color:#fff;text-decoration:underline;text-underline-offset:2px}.toast-action-btn--dismiss:hover{text-decoration-thickness:2px}.toast-action-btn--dismiss:active{opacity:.7}.toast-action-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}@media(prefers-reduced-motion:no-preference){@keyframes slideIn{0%{opacity:0;transform:translate(400px)}to{opacity:1;transform:translate(0)}}}@media(max-width:768px){.toast-container{bottom:calc(max(10px,env(safe-area-inset-bottom,0px)) + var(--ping-indicator-space));left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px))}.toast{max-width:unset;min-width:unset;width:100%}.toast-header{gap:var(--space-2);padding:.35rem .25rem .35rem .75rem}.toast-icon{font-size:16px}.toast-message{font-size:var(--text-sm);line-height:1.3;text-align:left}.toast-close{min-height:48px;min-width:48px}.toast-actions{flex-direction:column}.toast-action-btn{justify-content:center;width:100%}}.invite-card{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:12px;box-shadow:0 8px 24px #0000004d;color:#fff;max-width:420px;min-width:320px;overflow:hidden;padding:0;position:relative;width:100%}@media(prefers-reduced-motion:no-preference){.invite-card{animation:invite-card-slide-in .3s ease-out}}.invite-card .invite-content{padding:16px 20px}.invite-card .invite-header{align-items:center;display:flex;font-size:18px;font-weight:700;gap:10px;margin-bottom:12px}.invite-card .invite-icon{align-items:center;display:inline-flex;font-size:24px;justify-content:center}.invite-card .invite-icon svg{height:24px;width:24px}@media(prefers-reduced-motion:no-preference){.invite-card .invite-icon{animation:invite-icon-pulse 1.5s ease-in-out infinite}}@keyframes invite-icon-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.invite-card .invite-title{flex:1}.invite-card .invite-timer{align-items:center;display:inline-flex;flex-shrink:0}.invite-card .invite-circle-timer{filter:drop-shadow(0 0 4px rgba(0,0,0,.3));flex-shrink:0}.invite-card .invite-message{font-size:15px;line-height:1.5;margin-bottom:16px}.invite-card .invite-message strong{color:gold;font-weight:600}.invite-card .invite-actions{display:flex;gap:10px}.invite-card .invite-btn{border:none;border-radius:8px;cursor:pointer;flex:1;font-size:14px;font-weight:600;letter-spacing:.5px;padding:10px 16px;text-transform:uppercase;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.invite-card .invite-btn-accept{background:#10b981;color:#fff}.invite-card .invite-btn-accept:hover{background:#059669;box-shadow:0 4px 12px #10b98166;transform:translateY(-2px)}.invite-card .invite-btn-accept:active{transform:translateY(0)}.invite-card .invite-btn-decline{background:#fff3;border:1px solid hsla(0,0%,100%,.3);color:#fff}.invite-card .invite-btn-decline:hover{background:#ffffff4d;box-shadow:0 4px 12px #fff3;transform:translateY(-2px)}.invite-card .invite-btn-decline:active{transform:translateY(0)}@keyframes invite-card-slide-in{0%{opacity:0;transform:translate(400px)}to{opacity:1;transform:translate(0)}}@media(max-width:768px){.invite-card{min-width:unset}.invite-card .invite-content{padding:14px 16px}.invite-card .invite-actions{flex-direction:column}.invite-card .invite-btn{width:100%}}.invite-slot{align-items:flex-end;display:flex;flex-direction:column;gap:8px;pointer-events:none;position:fixed;right:max(20px,env(safe-area-inset-right,0px));top:calc(var(--header-height, 80px) + 16px);z-index:var(--z-notification,150)}.invite-slot .invite-card{pointer-events:auto;width:min(420px,calc(100vw - 40px))}@media(max-width:768px){.invite-slot{align-items:stretch;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));top:calc(var(--header-height-mobile, 60px) + 12px)}.invite-slot .invite-card{max-width:unset;width:100%}}html.in-game .invite-slot{top:calc(var(--header-height, 60px) + 76px)}@media(max-width:768px){html.in-game .invite-slot{top:calc(var(--header-height-mobile, 56px) + 56px)}}.error-boundary-container{align-items:center;display:flex;justify-content:center;min-height:400px;padding:var(--space-xl)}.error-boundary-content{background:#fffffff2;border-radius:16px;box-shadow:0 8px 32px #0000001a;max-width:500px;padding:var(--space-xl);text-align:center}.error-boundary-icon{font-size:64px;margin-bottom:var(--space-md)}.error-boundary-title{color:var(--color-danger);font-size:1.5rem;font-weight:700;margin-bottom:var(--space-md)}.error-boundary-message{color:#555;line-height:1.5;margin-bottom:var(--space-lg)}.error-boundary-details{background:#f5f5f5;border-radius:8px;margin-bottom:var(--space-lg);max-height:200px;overflow:auto;padding:var(--space-md);text-align:left}.error-boundary-details summary{cursor:pointer;font-weight:700;margin-bottom:var(--space-sm)}.error-boundary-details pre{font-size:12px;white-space:pre-wrap;word-wrap:break-word;margin-top:var(--space-sm)}.error-boundary-copy-button{background:var(--color-primary);border:none;border-radius:6px;color:#fff;cursor:pointer;display:inline-block;font-size:12px;font-weight:700;margin-bottom:var(--space-sm);padding:var(--space-xs) var(--space-md);transition:background var(--transition-base)}.error-boundary-copy-button:hover{background:var(--color-secondary)}.error-boundary-button{background:var(--color-primary);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;padding:var(--space-md) var(--space-xl);transition:background var(--transition-base),transform var(--transition-base)}.error-boundary-button:hover{background:var(--color-secondary);transform:translateY(-2px)}.error-boundary-button:active{transform:translateY(0)}.pwa-install-prompt{background:linear-gradient(135deg,#111827fa,#1e293bfa);border-top:2px solid var(--color-primary,#6366f1);bottom:env(safe-area-inset-bottom,0);font-family:Press Start\ 2P,monospace;left:env(safe-area-inset-left,0);padding:1rem;position:fixed;right:env(safe-area-inset-right,0);z-index:var(--z-toast,150)}@media(prefers-reduced-motion:no-preference){.pwa-install-prompt{animation:pwaSlideUp .3s ease-out}}@keyframes pwaSlideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.pwa-install-content{align-items:center;display:flex;gap:1rem;margin:0 auto;max-width:600px}.pwa-install-icon{flex-shrink:0}.app-icon{align-items:center;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;box-shadow:0 4px 12px #6366f166;color:#fff;display:flex;font-size:.9rem;font-weight:700;height:48px;justify-content:center;width:48px}.pwa-install-text{flex:1;min-width:0}.pwa-install-text h3{color:var(--color-primary,#6366f1);font-size:.7rem;margin:0 0 .25rem}.pwa-install-text p{color:#ffffffb3;font-size:.625rem;line-height:1.4;margin:0}.pwa-install-actions{display:flex;flex-direction:column;flex-shrink:0;gap:.5rem}.pwa-install-button{background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:4px;color:#fff;cursor:pointer;font-family:inherit;font-size:.625rem;min-height:44px;min-width:44px;padding:.6rem 1rem;transition:transform .1s,box-shadow .2s;white-space:nowrap}.pwa-install-button:hover:not(:disabled){box-shadow:0 4px 12px #6366f180;transform:translateY(-1px)}.pwa-install-button:active:not(:disabled){transform:translateY(0)}.pwa-install-button:disabled{cursor:not-allowed;opacity:.6}.pwa-dismiss-button{background:transparent;border:1px solid hsla(0,0%,100%,.2);border-radius:4px;color:#fff9;cursor:pointer;font-family:inherit;font-size:.625rem;min-height:44px;min-width:44px;padding:.4rem .8rem;transition:border-color .2s,color .2s}.pwa-dismiss-button:hover{border-color:#fff6;color:#fffc}.pwa-install-compact{align-items:center;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:2px solid hsla(0,0%,100%,.2);border-radius:50%;box-shadow:0 2px 8px #6366f14d;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:44px;justify-content:center;transition:transform .1s,box-shadow .2s;width:44px}.pwa-install-compact:hover{box-shadow:0 4px 16px #6366f180;transform:scale(1.1)}.install-icon{font-weight:700}.pwa-ios-modal{align-items:center;background:#000c;bottom:0;display:flex;justify-content:center;left:0;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);position:fixed;right:0;top:0;z-index:var(--z-modal)}@media(prefers-reduced-motion:no-preference){.pwa-ios-modal{animation:pwaFadeIn .2s ease-out}}@keyframes pwaFadeIn{0%{opacity:0}to{opacity:1}}.pwa-ios-content{background:linear-gradient(135deg,#111827fa,#1e293bfa);border:2px solid var(--color-primary,#6366f1);border-radius:12px;max-width:320px;padding:1.5rem;text-align:center;width:90%}.pwa-ios-content h3{color:var(--color-primary,#6366f1);font-size:.8rem;margin:0 0 1rem}.pwa-ios-steps{list-style:none;margin:0 0 1.5rem;padding:0;text-align:left}.pwa-ios-steps li{align-items:center;border-bottom:1px solid rgba(99,102,241,.2);color:#ffffffe6;display:flex;font-size:.625rem;gap:.75rem;padding:.75rem 0}.pwa-ios-steps li:last-child{border-bottom:none}.step-icon{align-items:center;background:var(--color-primary,#6366f1);border-radius:50%;display:flex;flex-shrink:0;font-size:.625rem;height:24px;justify-content:center;width:24px}.ios-share-icon{font-size:1rem;margin-left:.5rem}.pwa-ios-close{background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:6px;color:#fff;cursor:pointer;font-family:inherit;font-size:.65rem;padding:.75rem;transition:transform .1s;width:100%}.pwa-ios-close:hover{transform:translateY(-1px)}@media(max-width:480px){.pwa-install-content{flex-wrap:wrap}.pwa-install-text{flex-basis:calc(100% - 64px)}.pwa-install-actions{flex-basis:100%;flex-direction:row;justify-content:stretch}.pwa-dismiss-button,.pwa-install-button{flex:1}}@font-face{font-display:swap;font-family:Press Start\ 2P;font-style:normal;font-weight:400;src:local("Press Start 2P"),url(/fonts/PressStart2P-Regular.woff2) format("woff2"),url(/fonts/PressStart2P-Regular.ttf) format("truetype");unicode-range:u+0020-007f,u+00a0-00ff}:root{font-size:16px;--gradient-primary:linear-gradient(135deg,#3b82f6,#1e40af);--gradient-success:linear-gradient(135deg,#4caf50,#2e7d32);--gradient-danger:linear-gradient(135deg,#ff004d,#dc2626);--gradient-info:linear-gradient(135deg,#3b82f6,#1e40af);--gradient-warning:linear-gradient(135deg,#f59e0b,#d97706);--gradient-bg-dark:linear-gradient(135deg,#0f172a,#1e1b4b);--gradient-bg-surface:linear-gradient(135deg,var(--color-bg) 0%,#1e1b4b 100%);--gradient-arcade-bezel:linear-gradient(135deg,#ff0080,#ff8c00);--gradient-arcade-danger:linear-gradient(135deg,#ff0080,#ff004d);--gradient-arcade-container:linear-gradient(135deg,#1a1a2e,#16213e);--gradient-arcade-screen:radial-gradient(ellipse at center,rgba(99,102,241,.1) 0%,transparent 70%);--gradient-blob-primary:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);--gradient-blob-secondary:linear-gradient(135deg,var(--color-secondary) 0%,var(--color-speed-blue) 100%);--gradient-blob-teal:linear-gradient(135deg,var(--color-speed-teal) 0%,var(--color-primary) 100%);--gradient-scanline:repeating-linear-gradient(0deg,rgba(0,0,0,.1),transparent 1px,transparent 2px,rgba(0,0,0,.1) 3px);--font-display:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--font-body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;--font-arcade:"Press Start 2P","Courier New",Courier,monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--color-primary:#6366f1;--color-primary-dark:#4f46e5;--color-primary-light:#818cf8;--color-secondary:#8b5cf6;--color-secondary-dark:#7c3aed;--color-secondary-light:#a78bfa;--color-success:#10b981;--color-success-dark:#059669;--color-warning:#f59e0b;--color-danger:#ef4444;--color-danger-dark:#dc2626;--color-connect4-red:#f44;--color-connect4-yellow:#fc0;--color-speed-blue:#3b82f6;--color-speed-teal:#14b8a6;--color-bg:#0f172a;--color-bg-elevated:#1e293b;--color-bg-hover:#334155;--color-surface:#1e293b;--color-surface-light:#334155;--color-text-primary:#f1f5f9;--color-text-secondary:#cbd5e1;--color-text-muted:#94a3b8;--color-border:#334155;--color-border-light:#475569;--color-white:#fff;--color-black:#000;--color-gray-50:#f9fafb;--color-gray-100:#f5f5f5;--color-gray-200:#e5e7eb;--color-gray-300:#999;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#666;--color-gray-700:#374151;--color-gray-900:#1a1a1a;--color-indigo-light:#a5b4fc;--color-indigo-dark:#4338ca;--color-warning-dark:#d97706;--color-overlay-light:rgba(0,0,0,.1);--color-overlay-medium:rgba(0,0,0,.3);--color-overlay-heavy:rgba(0,0,0,.6);--color-overlay-dark:rgba(0,0,0,.75);--color-arcade-bezel-start:#ff0080;--color-arcade-bezel-end:#ff8c00;--color-arcade-danger-start:#ff0080;--color-arcade-danger-end:#ff004d;--color-arcade-container-start:#1a1a2e;--color-arcade-container-end:#16213e;--color-arcade-border-dark:#0f0f1e;--color-arcade-border-medium:#2a2a4e;--color-arcade-shadow:#603;--color-gold:gold;--color-error-light:#ff6b6b;--color-error-dark:#d93636;--color-teal:#2a9d8f;--space-0:0;--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;--space-24:6rem;--space-xs:var(--space-1);--space-sm:var(--space-2);--space-md:var(--space-4);--space-lg:var(--space-6);--space-xl:var(--space-8);--space-2xl:var(--space-12);--space-3xl:var(--space-16);--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--border-thin:1px;--border-default:2px;--border-thick:3px;--border-arcade:4px;--border-arcade-heavy:6px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.3);--shadow-md:0 4px 6px -1px rgba(0,0,0,.4),0 2px 4px -1px rgba(0,0,0,.3);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.4),0 4px 6px -2px rgba(0,0,0,.3);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.4),0 10px 10px -5px rgba(0,0,0,.3);--shadow-arcade-sm:2px 2px 0 rgba(0,0,0,.3),inset 0 0 0 1px hsla(0,0%,100%,.1);--shadow-arcade-md:3px 3px 0 rgba(0,0,0,.3),4px 4px 8px rgba(0,0,0,.2);--shadow-arcade-lg:0 0 30px rgba(99,102,241,.4),6px 6px 0 rgba(0,0,0,.4),inset 0 0 0 2px hsla(0,0%,100%,.1);--shadow-arcade-xl:0 0 40px rgba(99,102,241,.4),8px 8px 0 rgba(0,0,0,.4),inset 0 0 0 3px hsla(0,0%,100%,.1);--shadow-arcade-pink:0 0 40px rgba(255,0,128,.4),8px 8px 0 rgba(0,0,0,.4),inset 0 0 0 3px hsla(0,0%,100%,.1);--shadow-arcade-button:0 4px 0 var(--color-arcade-shadow),0 8px 12px rgba(0,0,0,.4);--shadow-arcade-button-hover:0 6px 0 var(--color-arcade-shadow),0 10px 16px rgba(0,0,0,.5);--shadow-arcade-button-active:0 2px 0 var(--color-arcade-shadow),0 4px 8px rgba(0,0,0,.3);--shadow-arcade-input:3px 3px 0 rgba(0,0,0,.3),inset 0 0 0 1px hsla(0,0%,100%,.8);--shadow-arcade-input-focus:0 0 20px rgba(255,0,128,.6),3px 3px 0 rgba(0,0,0,.3),inset 0 0 0 1px hsla(0,0%,100%,.8);--transition-fast:.15s cubic-bezier(.4,0,.2,1);--transition-base:.25s cubic-bezier(.4,0,.2,1);--transition-slow:.35s cubic-bezier(.4,0,.2,1);--duration-instant:.1s;--duration-fast:.15s;--duration-normal:.2s;--duration-slow:.3s;--z-base:0;--z-content:1;--z-header:10;--z-dropdown:100;--z-toast:150;--z-modal:200;--z-tooltip:250;--z-overlay:300;--z-escape:400;--header-height:60px;--header-height-mobile:56px;--z-notification:150;background:var(--gradient-bg-dark);color:var(--color-text-primary);font-family:var(--font-body);font-synthesis:none;font-weight:400;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}html{background-color:#0f0f1a;overscroll-behavior:none}body,html{overflow-x:clip;width:100%}@supports not (overflow:clip){body,html{overflow-x:hidden}}body{min-height:100vh;min-height:100dvh;overscroll-behavior:none;-webkit-overflow-scrolling:touch}@supports not ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))){.app-header,.dropdown,.modal-overlay{background:#111827f2}}.app-loading-container{position:relative;z-index:var(--z-base)}.app-loading-container,.app-loading-fallback{padding:var(--space-xl);text-align:center}.full-width{width:100%}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}body{background:var(--gradient-bg-surface);background-color:#0f0f1a;margin:0;min-width:320px;padding:0;touch-action:manipulation}#root{height:100vh;height:100svh;height:100dvh;margin:0;padding:0;position:relative;text-align:center;touch-action:manipulation}#root,.app-container{overflow:hidden;width:100%}.app-container{display:flex;flex-direction:column;height:100%;height:100svh;height:100dvh}.main-content{box-sizing:border-box;flex:1;min-height:0;overflow:hidden;padding-bottom:env(safe-area-max-inset-bottom,env(safe-area-inset-bottom,0));padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0);position:relative}html.in-game #root,html.in-game .app-container{height:auto;min-height:100vh;min-height:100svh;overflow:visible}html.in-game #root{display:flex;flex-direction:column}html.in-game .app-container{flex:1 0 auto}html.in-game .main-content{display:flex;flex:1 0 auto;flex-direction:column;min-height:auto;overflow:visible}html.in-game .app-header{position:relative}.game-view{box-sizing:border-box;display:flex;flex:1 0 auto;flex-direction:column;max-width:100vw;width:100%}:root{--app-header-offset:calc(var(--header-height) + env(safe-area-inset-top, 0px));--arcade-frame-v:50px;--game-topbar-h:44px;--safe-bottom:env(safe-area-max-inset-bottom,0px);--game-vh:100svh;--game-play-h:calc(var(--game-vh) - var(--app-header-offset) - var(--arcade-frame-v) - var(--game-topbar-h) - var(--safe-bottom));--leave-reserve:104px;--ping-indicator-space:26px}@media(display-mode:fullscreen),(display-mode:standalone){:root{--safe-bottom:env(safe-area-inset-bottom,0px);--game-vh:100dvh}}.game-stage{display:flex;flex-direction:column;gap:var(--stage-gap,6px);max-height:var(--game-play-h);width:100%}.game-stage>*{flex:0 0 auto;min-width:0}.game-stage>.game-stage__board{aspect-ratio:var(--board-ratio,1);flex:0 1 auto;min-height:0;position:relative}.game-stage__fit{container:game-board/size;display:grid;top:0;right:0;bottom:0;left:0;place-items:center;position:absolute}@media(max-width:768px){:root{--app-header-offset:calc(var(--header-height-mobile) + env(safe-area-inset-top, 0px));--arcade-frame-v:12px;--leave-reserve:76px}}h1,h2,h3,h4,h5,h6{color:var(--color-text-primary);font-family:var(--font-display);font-weight:700;line-height:1.2;margin:0}h1{font-size:3rem;letter-spacing:-.02em}h2{font-size:2.25rem;letter-spacing:-.01em}h3{font-size:1.875rem}h4{font-size:1.5rem}p{line-height:1.6;margin:0}button{background:var(--color-primary);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);color:#fff;cursor:pointer;font-family:var(--font-body);font-size:1rem;font-weight:600;overflow:hidden;padding:.75rem 1.5rem;position:relative;touch-action:manipulation;transition:transform var(--transition-base),background-color var(--transition-base),opacity var(--transition-base)}button:before{background:#ffffff26;border-radius:50%;content:"";height:300px;left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform var(--transition-fast),opacity var(--transition-fast);width:300px}@media(hover:hover)and (pointer:fine){button:hover:before{opacity:1;transform:translate(-50%,-50%) scale(1)}button:hover{background:var(--color-primary-dark);box-shadow:var(--shadow-lg);transform:translateY(-2px)}}button:active{box-shadow:var(--shadow-sm);transform:translateY(0)}button:disabled{cursor:not-allowed;opacity:.5;transform:none}button:disabled:hover{background:var(--color-primary);box-shadow:var(--shadow-sm)}:focus{outline:none}:focus-visible{border-radius:var(--radius-sm);outline:3px solid var(--color-primary);outline-offset:2px}button:focus-visible{box-shadow:0 0 0 4px #6366f133;outline:3px solid var(--color-primary);outline-offset:2px}a:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;text-decoration:underline}.button-success{background:var(--color-success)}.button-success:hover{background:var(--color-success-dark)}.button-danger{background:var(--color-danger)}.button-danger:hover{background:var(--color-danger-dark)}.button-secondary{background:var(--color-surface);border:2px solid var(--color-border);color:var(--color-text-primary)}.button-secondary:hover{background:var(--color-surface-light);border-color:var(--color-border-light)}input,select,textarea{background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-body);font-size:16px!important;outline:none;padding:.75rem 1rem;touch-action:manipulation;transition:border-color var(--transition-base),box-shadow var(--transition-base)}input:focus,select:focus,textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #6366f11a}input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--color-primary);box-shadow:0 0 0 4px #6366f133;outline:3px solid var(--color-primary);outline-offset:-1px}input::placeholder{color:var(--color-text-muted)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-xl);position:relative;z-index:var(--z-base)}@media(prefers-reduced-motion:no-preference){@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn var(--transition-slow) ease-out}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}}@media(prefers-reduced-motion:reduce){.fade-in{opacity:1}}@media(prefers-reduced-motion:no-preference){.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}}@media(prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.blob{animation:none!important}}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.arcade-game-container{background:var(--gradient-arcade-container);border-radius:16px;box-shadow:0 0 0 4px #0f0f1e,0 0 0 8px #2a2a4e,0 0 20px #6366f14d,inset 0 0 30px #0006;box-sizing:border-box;display:flex;flex-direction:column;height:100%;margin:0 auto;max-width:1200px;position:relative;width:min(95%,1200px)}@media(min-width:769px){.arcade-game-container:before{background:var(--gradient-scanline);bottom:0;content:"";left:0;opacity:.3;pointer-events:none;position:absolute;right:0;top:0;z-index:0}}.arcade-screen{align-items:stretch;background:var(--gradient-arcade-screen);border:3px solid rgba(0,0,0,.3);border-radius:12px;box-shadow:inset 0 0 15px #0006;display:flex;flex:1;flex-direction:column;justify-content:flex-start;margin:12px;min-height:0;overflow:hidden;padding:8px 8px 12px;position:relative}html.in-game .arcade-game-container{flex:1 0 auto;height:auto}html.in-game .arcade-screen{flex:1 0 auto;min-height:auto;overflow:visible}.arcade-leave-button{background:var(--gradient-arcade-danger);border:3px solid #000;border-radius:8px;box-shadow:0 4px #603,0 8px 12px #0006;color:#fff;cursor:pointer;font-family:var(--font-arcade);font-size:10px;height:44px;line-height:1;min-height:44px;min-width:44px;padding:0 18px;position:absolute;right:23px;text-shadow:2px 2px 0 #000;top:23px;touch-action:manipulation;transition:transform .1s ease,box-shadow .1s ease;z-index:var(--z-escape)}@media(hover:hover)and (pointer:fine){.arcade-leave-button:hover{box-shadow:0 6px #603,0 10px 16px #00000080;transform:translateY(-2px)}}.arcade-leave-button:active{box-shadow:0 2px #603,0 4px 8px #0000004d;transform:translateY(2px)}.arcade-leave-button:disabled{box-shadow:0 4px #603,0 8px 12px #0006;cursor:not-allowed;opacity:.7;transform:none}@media(min-width:1440px){.arcade-game-container{max-width:1600px}}@media(min-width:1920px){.arcade-game-container{max-width:1800px;width:min(90%,1800px)}}@media(min-width:2560px){.arcade-game-container{max-width:2200px;width:min(85%,2200px)}}@media(min-width:1024px)and (max-width:1439px){.arcade-game-container{width:min(90%,1200px)}}@media(max-width:768px){.arcade-game-container{border-radius:0;box-shadow:none;height:100%;margin:0;width:100%}.arcade-screen{border:none;border-radius:0;box-shadow:none;margin:0;padding:4px 4px 8px}.arcade-leave-button{padding:0 10px;right:4px;top:4px}}@media(max-width:320px){body{min-width:320px}}.disable-animations,.disable-animations *{animation:none!important;transition:none!important}.reduce-effects .blob{filter:blur(40px)!important;opacity:.1!important}.reduce-effects .blob-1,.reduce-effects .blob-2,.reduce-effects .blob-3{animation-duration:30s!important}@supports not (gap:1rem){.button-loading,.friend-actions,.friend-name,.friends-tabs,.game-type-selector,.gap-sm,.request-actions,.request-name,.search-input-group,.search-result-name,.user-stats{margin:calc(var(--space-sm)/-2)}.button-loading>*,.friend-actions>*,.friend-name>*,.friends-tabs>*,.game-type-selector>*,.gap-sm>*,.request-actions>*,.request-name>*,.search-input-group>*,.search-result-name>*,.user-stats>*{margin:calc(var(--space-sm)/2)}.game-actions,.gap-md{margin:calc(var(--space-md)/-2)}.game-actions>*,.gap-md>*{margin:calc(var(--space-md)/2)}.gap-lg{margin:calc(var(--space-lg)/-2)}.gap-lg>*{margin:calc(var(--space-lg)/2)}.auth-form-container>form{margin:calc(var(--space-lg)/-2)}.auth-form-container>form>*{margin:calc(var(--space-lg)/2)}.board-container>.board{margin:calc(var(--space-md)/-2)}.board-container>.board>*{margin:calc(var(--space-md)/2)}.lobby-players{margin:calc(var(--space-md)/-2)}.lobby-players>*{margin:calc(var(--space-md)/2)}.app-header nav{margin:-.5rem}.app-header nav>*{margin:.5rem}.toast-content{margin:-6px}.toast-content>*{margin:6px}.center-piles{margin:-10px}.center-piles>*{margin:10px}.player-hand-container{margin:-3px}.player-hand-container>*{margin:3px}.opponent-hand-container{margin:-3px}.opponent-hand-container>*{margin:3px}.challenge-actions{margin:-5px}.challenge-actions>*{margin:5px}.connection-status-container{margin:-8px}.connection-status-container>*{margin:8px}.game-switcher{margin:-4px}.game-switcher>*{margin:4px}.dashboard-content .game-actions{margin:calc(var(--space-lg)/-2)}.dashboard-content .game-actions>*{margin:calc(var(--space-lg)/2)}.friend-card,.request-card,.search-result-card{margin:-.375rem}.friend-card>*,.request-card>*,.search-result-card>*{margin:.375rem}}@supports (display:grid){.game-actions{display:grid;gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@supports (-webkit-appearance:none){@supports not (gap:1rem){.button-loading>*,.friend-actions>*,.friends-tabs>*,.game-type-selector>*,.gap-lg>*,.gap-md>*,.gap-sm>*,.request-actions>*,.user-stats>*{flex-shrink:1;min-width:0}}}:root{--connect4-player1-color:#f44;--connect4-player1-gradient:linear-gradient(135deg,#f44,#c00);--connect4-player1-glow:rgba(255,68,68,.6);--connect4-player1-name:"Red";--connect4-player2-color:#fc0;--connect4-player2-gradient:linear-gradient(135deg,#fc0,#f80);--connect4-player2-glow:rgba(255,204,0,.6);--connect4-player2-name:"Yellow";--connect4-player1-pattern:none;--connect4-player2-pattern:none}[data-colorblind-mode=deuteranopia]{--connect4-player1-color:#2563eb;--connect4-player1-gradient:linear-gradient(135deg,#3b82f6,#1d4ed8);--connect4-player1-glow:rgba(37,99,235,.6);--connect4-player2-color:#f97316;--connect4-player2-gradient:linear-gradient(135deg,#fb923c,#ea580c);--connect4-player2-glow:rgba(249,115,22,.6);--connect4-player1-pattern:repeating-linear-gradient(45deg,transparent,transparent 3px,hsla(0,0%,100%,.2) 0,hsla(0,0%,100%,.2) 6px);--connect4-player2-pattern:none}[data-colorblind-mode=protanopia]{--connect4-player1-color:#3b82f6;--connect4-player1-gradient:linear-gradient(135deg,#60a5fa,#2563eb);--connect4-player1-glow:rgba(59,130,246,.6);--connect4-player2-color:#eab308;--connect4-player2-gradient:linear-gradient(135deg,#facc15,#ca8a04);--connect4-player2-glow:rgba(234,179,8,.6);--connect4-player1-pattern:repeating-linear-gradient(45deg,transparent,transparent 3px,hsla(0,0%,100%,.2) 0,hsla(0,0%,100%,.2) 6px);--connect4-player2-pattern:none}[data-colorblind-mode=tritanopia]{--connect4-player1-color:#dc2626;--connect4-player1-gradient:linear-gradient(135deg,#ef4444,#b91c1c);--connect4-player1-glow:rgba(220,38,38,.6);--connect4-player2-color:#06b6d4;--connect4-player2-gradient:linear-gradient(135deg,#22d3ee,#0891b2);--connect4-player2-glow:rgba(6,182,212,.6);--connect4-player1-pattern:none;--connect4-player2-pattern:repeating-linear-gradient(-45deg,transparent,transparent 3px,rgba(0,0,0,.15) 0,rgba(0,0,0,.15) 6px)}[data-high-contrast=true]{--connect4-player1-color:red;--connect4-player1-gradient:red;--connect4-player1-glow:rgba(255,0,0,.8);--connect4-player2-color:#ff0;--connect4-player2-gradient:#ff0;--connect4-player2-glow:rgba(255,255,0,.8)}[data-high-contrast=true][data-colorblind-mode=deuteranopia]{--connect4-player1-color:#00f;--connect4-player1-gradient:#00f;--connect4-player1-glow:rgba(0,0,255,.8);--connect4-player2-color:#ff8000;--connect4-player2-gradient:#ff8000;--connect4-player2-glow:rgba(255,128,0,.8)}