@import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap);.container{flex-direction:column;padding:10px;width:100%}@media (min-width:768px){.container{flex-direction:row;padding:20px}}@media (min-width:1200px){.container{margin:0 auto;max-width:1140px}}@media (max-width:768px){body,html{max-width:100vw;overflow-x:hidden!important}*{box-sizing:border-box}.app-container{max-width:100vw;overflow-x:hidden}.game-board-layout{gap:var(--spacing-sm);grid-template-areas:"player-list" "top-players" "main-area" "left-side" "right-side" "player-hand" "controls";grid-template-columns:1fr;grid-template-rows:auto;height:auto;padding:var(--spacing-sm)}.player-status-sidebar{grid-area:player-list}.game-board .top-players{grid-area:top-players}.lobby-status-section,.room-code-display{box-shadow:none;margin:var(--spacing-sm) auto;max-width:300px;padding:var(--spacing-xs) var(--spacing-sm);position:static;width:90%}.lobby-status-section h4{font-size:1.1em;margin-bottom:var(--spacing-xs)}.lobby-label,.status-value{font-size:.9em}.room-code-label{font-size:.75em;margin-bottom:0}.room-code-value{font-size:1.8em;letter-spacing:1px}.game-top-bar{align-items:center;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-sm) 0}.player-status-sidebar{background-color:var(--bg-card);border-radius:var(--border-radius-default);box-shadow:0 2px 5px var(--shadow-black);max-height:120px;overflow-x:auto;overflow-y:hidden;padding:var(--spacing-sm);position:static;white-space:nowrap;width:100%}.player-list-grid{align-items:center;display:flex;flex-direction:row;gap:var(--spacing-sm);height:100%}.player-status-item{align-items:flex-start;display:flex;flex-direction:column;flex-shrink:0;font-size:.85em;height:80px;justify-content:center;max-width:150px;min-width:120px;overflow:hidden;padding:var(--spacing-xs);text-overflow:ellipsis;white-space:normal}.player-name-wrapper{margin-bottom:2px}.player-hand-size,.player-rank{font-size:.75em;margin-left:0}}@media (max-width:768px){.player-status-sidebar::-webkit-scrollbar{height:var(--spacing-sm)}.player-status-sidebar::-webkit-scrollbar-track{background:var(--bg-card-alt);border-radius:var(--border-radius-default)}.player-status-sidebar::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:var(--border-radius-default)}.player-status-sidebar::-webkit-scrollbar-thumb:hover{background:var(--text-disabled)}}@media (max-width:576px){.card-rank{font-size:1.1em}.card-suit-symbol{font-size:1em}}@media (max-width:768px){.pile-area{flex-wrap:wrap;height:auto;min-height:150px;padding:var(--spacing-sm);width:95%}}@media (max-width:576px){.pile-area .card{height:110px;margin:2px;width:80px}}@media (max-width:768px){.button{font-size:1em;padding:var(--spacing-sm) var(--spacing-md)}}:root{--color-dark-blue-gray:#2c3e50;--color-vibrant-green:#2ecc71;--color-gold-yellow:#f1c40f;--color-deep-red:#e74c3c;--color-light-gray:#ecf0f1;--color-muted-gray:#bdc3c7;--color-dark-text:#34495e;--color-off-white:#fdfdfd;--bg-page:var(--color-dark-blue-gray);--bg-card:#34495e;--bg-lobby-card:#465a71;--bg-input:#44586c;--bg-game-board:var(--color-off-white);--bg-error-overlay:#e74c3c33;--suit-black:#222;--suit-red:#d00000;--text-primary:var(--color-light-gray);--text-secondary:var(--color-muted-gray);--text-on-light:var(--color-dark-text);--text-disabled:#bdc3c7;--border-default:#3d516d;--border-accent:#b0c4de;--border-light:#dbe4ee;--action-accent:var(
    --color-vibrant-green
  );--action-accent-dark:#27ae60;--action-disabled:#95a5a6;--status-success:#28a745;--status-warning:#ffc107;--status-info:#6c757d;--status-error:var(--color-deep-red);--shadow-black:#0000001a;--shadow-green:#2ecc7180;--shadow-gold:#f1c40f80;--header-height-desktop:80px;--header-height-mobile-fixed:0;--header-height:90px;--spacing-xxl:48px;--spacing-xxxl:64px;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1200px;--breakpoint-xxl:1440px}body,html{background-color:#2c3e50;background-color:var(--bg-page);color:#ecf0f1;color:var(--text-primary);font-family:Inter,sans-serif;height:100%;margin:0;overflow-x:hidden;padding:0}#root{display:flex;flex-direction:column;height:100%}h1,h2,h3,h4,h5,h6{font-family:Montserrat,sans-serif;font-weight:700}.app-container{min-height:100vh;padding-top:0}.app-container,.app-main-content{box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1}.app-main-content{max-width:100vw;padding:24px;padding:var(--spacing-lg);width:100%}.app-title,.game-board-title{color:#34495e;color:var(--color-dark-text);font-family:Montserrat,sans-serif;font-size:2.2em;font-weight:700;margin:0;text-align:center}.app{text-align:center}@media (max-width:768px){.app-container{min-height:0;min-height:auto;padding-top:0;padding-top:var(--header-height-mobile-fixed)}.app-main-content{padding:16px;padding:var(--spacing-md)}}.game-selection-page{padding:20px;text-align:center}.game-selection-page h2{color:var(--text-primary);font-size:2.5em;margin-bottom:40px}.game-list{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:30px}.game-card{background-color:var(--bg-card);border:1px solid var(--border-default);border-radius:8px;box-shadow:0 4px 8px var(--shadow-black);display:flex;flex-direction:column;text-align:left;transition:transform .2s ease-in-out;width:280px}.game-card .game-thumbnail{border-radius:4px 4px 0 0;display:block;height:auto;margin-bottom:15px;width:100%}.game-card .game-item{padding:20px}.game-card h3{color:var(--text-primary);margin-top:0}.game-card p{color:var(--text-primary);font-size:.9em;margin-bottom:20px}.game-card .play-button{background-color:var(--action-primary);border-radius:5px;color:var(--text-primary);display:inline-block;font-weight:700;padding:10px 15px;text-decoration:none}.game-card .play-button:hover{background-color:var(--action-hover)}.game-card:hover{transform:translateY(-5px)}.game-thumbnail{border-bottom:1px solid var(--border-default);height:180px;object-fit:cover;width:100%}.game-details{display:flex;flex-direction:column;flex-grow:1;padding:20px}.game-details h3{color:var(--text-primary);font-size:1.5em;margin-bottom:10px;margin-top:0}.game-details p{color:var(--text-primary);flex-grow:1;font-size:.95em;line-height:1.5;margin-bottom:20px}.game-actions,.game-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}.button{background-color:var(--action-primary);border-radius:5px;color:var(--text-primary);font-size:.9em;padding:10px 15px;transition:background-color .2s ease}.button:hover:not(:disabled){background-color:var(--action-hover)}.button:disabled{background-color:var(--text-disabled);opacity:.7}.game-card.coming-soon{opacity:.7;pointer-events:none}.game-card.coming-soon .button{background-color:var(--status-info);cursor:not-allowed}@media (max-width:768px){.game-list{align-items:center;flex-direction:column}.game-card{max-width:350px;width:90%}}@media (max-width:480px){.game-selection-page h2{font-size:2em}.button{font-size:.85em;padding:10px 12px}}.game-lobby-page-container{align-items:center;background-color:var(--bg-page);box-sizing:border-box;color:var(--text-primary);display:flex;flex-direction:column;min-height:100vh;padding:var(--spacing-lg)}.game-lobby-page-container h2{color:var(--color-deep-red);font-size:2.5em;margin-bottom:var(--spacing-lg);text-shadow:1px 1px 2px var(--shadow-black)}.tabs-container{border-bottom:2px solid var(--border-default);display:flex;margin-bottom:var(--spacing-md);max-width:400px;width:100%}.tab-button{background-color:var(--bg-input);border:none;border-radius:var(--border-radius-default) var(--border-radius-default) 0 0;color:var(--text-primary);cursor:pointer;flex:1 1;font-size:1.1em;margin:0 var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);transition:background-color .3s ease,color .3s ease}.tab-button:hover:not(.active){background-color:color-mix(in srgb,var(--bg-input) 80%,#000)}.tab-button.active{background-color:var(--action-primary);border-bottom:2px solid var(--action-primary);color:var(--color-white);font-weight:700;padding-bottom:calc(var(--spacing-sm) + 2px)}.tab-button:disabled{background-color:var(--action-disabled);color:var(--text-disabled);cursor:not-allowed;opacity:.6}.tab-content{background-color:var(--bg-lobby-card);border-radius:var(--border-radius-default);box-shadow:0 4px 8px var(--shadow-black);max-width:400px;padding:var(--spacing-lg);text-align:center;width:100%}.tab-content h2{color:var(--text-primary);font-size:1.5em;margin-bottom:var(--spacing-md)}.form-section{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-group{text-align:left}.form-group label{color:#bbb;display:block;margin-bottom:5px}.form-group input,.form-group select{background-color:#444;border:1px solid #555;border-radius:4px;color:#f8f8f2;font-size:1em;padding:10px;width:calc(100% - 20px)}.form-group input:focus,.form-group select:focus{border-color:var(--action-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--action-primary) 30%,#0000);outline:none}button[type=submit]{background-color:var(--status-success);border:none;border-radius:var(--border-radius-default);color:var(--color-white);cursor:pointer;font-size:1.1em;margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-lg);transition:background-color .3s ease}button[type=submit]:hover:not(:disabled){background-color:var(--action-accent-dark)}button[type=submit]:disabled{background-color:var(--action-disabled);cursor:not-allowed}.divider{background-image:linear-gradient(to right,#0000,var(--border-default),#0000);border:0;height:1px;margin:var(--spacing-lg) 0;width:80%}.lobbies-grid{grid-gap:var(--spacing-md);display:grid;gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:var(--spacing-md);max-width:1200px;width:100%}.lobby-card{background-color:var(--bg-lobby-card);border:1px solid var(--border-light);border-radius:var(--border-radius-default);box-shadow:0 2px 5px var(--shadow-black);display:flex;flex-direction:column;justify-content:space-between;padding:var(--spacing-md);text-align:center;transition:transform .2s ease,box-shadow .2s ease}.lobby-card:hover{box-shadow:0 6px 12px var(--shadow-black);transform:translateY(-5px)}.lobby-card h4{color:var(--action-primary);font-size:1.5em;margin-bottom:var(--spacing-sm);margin-top:0}.lobby-card p{color:var(--text-primary);margin:var(--spacing-xs) 0}.lobby-status{border-radius:var(--border-radius-default);color:var(--color-white);display:inline-block;font-weight:700;margin-top:var(--spacing-sm);padding:5px 10px}.lobby-status.waiting{background-color:var(--status-success)}.lobby-status.in-progress{background-color:var(--status-warning);color:var(--text-on-light)}.lobby-status.finished{background-color:var(--status-info)}.join-lobby-list-button{background-color:var(--color-vibrant-green);border:none;border-radius:var(--border-radius-default);color:var(--color-white);cursor:pointer;font-size:1em;font-weight:700;margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);transition:background-color .3s ease;width:100%}.join-lobby-list-button:hover{background-color:var(--action-accent-dark)}.join-lobby-list-button:disabled{background-color:var(--action-disabled);cursor:not-allowed}.game-page-container{background-color:var(--bg-page);display:flex;flex-direction:column;flex-grow:1;gap:var(--spacing-md);padding:var(--spacing-md)}.game-page-loading{align-items:center;color:var(--text-secondary);display:flex;font-size:1.5em;justify-content:center;min-height:80vh}.game-page-title{color:var(--text-primary);flex-basis:100%;font-size:2em;margin-bottom:var(--spacing-md);text-align:center;width:100%}.game-page-top-info.desktop-ui{align-items:flex-start;background-color:var(--bg-card);border-radius:var(--border-radius-default);box-shadow:0 2px 5px #0000000d;display:flex;flex-wrap:wrap;gap:var(--spacing-md);justify-content:space-between;padding:var(--spacing-md)}.lobby-status-section{background-color:var(--color-white);border:1px solid var(--border-light);border-radius:var(--border-radius-default);box-shadow:0 4px 8px var(--shadow-black);color:var(--text-on-light);left:var(--spacing-md);min-width:200px;padding:var(--spacing-sm) var(--spacing-md);text-align:left;top:var(--spacing-md);z-index:10}.lobby-status-section h4{color:var(--color-dark-text);font-family:Montserrat,sans-serif;font-size:1.4em;margin-bottom:var(--spacing-md);margin-top:0;text-align:center}.lobby-status-grid{grid-gap:var(--spacing-sm) var(--spacing-md);display:grid;gap:var(--spacing-sm) var(--spacing-md);grid-template-columns:auto 1fr}.lobby-status-row{display:contents}.lobby-label{color:var(--text-secondary);font-weight:600;text-align:right}.status-value{color:var(--text-on-light);font-size:1.1em;font-weight:700;text-align:left}.status-indicator-group{align-items:center;display:flex;gap:5px}.status-light{background-color:var(--color-red);border-radius:50%;height:10px;width:10px}.status-light-container{align-items:center;display:flex;justify-content:center;margin-right:var(--spacing-xs);position:relative}.status-light.active,.status-light.active-game{animation:pulse 1.5s ease-in-out infinite;background-color:var(--color-vibrant-green);box-shadow:0 0 5px var(--color-vibrant-green)}.status-light.inactive{background-color:var(--color-muted-gray);box-shadow:0 0 3px var(--color-muted-gray)}.status-light.inactive-game{background-color:var(--color-deep-red);box-shadow:0 0 5px #e74c3cb3}.status-light.disabled{background-color:var(--text-disabled);border:1px solid #ffffff4d;border-radius:50%;height:10px;position:relative;width:10px}.status-light.current-turn-light{background-color:var(--color-gold-yellow);box-shadow:0 0 8px var(--shadow-gold);height:8px;position:absolute;right:-12px;top:-2px;width:8px}.room-code-display{align-items:center;background-color:var(--color-white);border-radius:var(--border-radius-default);box-shadow:0 2px 5px var(--shadow-black);color:var(--text-on-light);display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);right:var(--spacing-md);top:var(--spacing-md);z-index:10}.room-code-label{color:var(--text-secondary);font-size:.85em;font-weight:400;letter-spacing:1px;text-transform:uppercase}.room-code-value{color:var(--color-dark-text);font-size:2.2em;font-weight:700;letter-spacing:2px;text-shadow:1px 1px 2px var(--shadow-black)}.room-management-actions.game-page-actions{align-items:flex-start;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:flex-end}.room-management-actions.game-page-actions .button{font-size:.9em;min-width:100px;padding:var(--spacing-sm) var(--spacing-md)}.header-right-info-column{align-items:flex-end;display:flex;flex-direction:column;gap:10px;margin-left:20px;right:20px;top:20px}.player-status-sidebar{background-color:var(--bg-card);border-radius:var(--border-radius-default);box-shadow:0 2px 5px var(--shadow-black);margin-top:var(--spacing-md);max-height:120px;overflow-x:auto;overflow-y:hidden;padding:var(--spacing-sm);position:relative;scrollbar-width:none;white-space:nowrap;width:100%}.player-list-grid{align-items:center;display:flex;flex-direction:row;gap:var(--spacing-sm);height:100%}.player-status-item{align-items:flex-start;background-color:var(--color-white);border-radius:var(--border-radius-sm);box-shadow:0 1px 3px #0000001a;cursor:pointer;display:flex;flex-direction:column;flex-shrink:0;font-size:.85em;height:80px;justify-content:center;max-width:150px;min-width:120px;overflow:hidden;padding:var(--spacing-xs);text-overflow:ellipsis;transition:transform .1s ease-out,box-shadow .1s ease-out;white-space:normal}.player-status-item:hover{box-shadow:0 3px 8px #00000026;transform:translateY(-2px)}.player-status-item.you{background-color:color-mix(in srgb,var(--action-primary) 10%,var(--color-white));border:2px solid var(--action-primary)}.player-status-item.current-turn{background-color:color-mix(in srgb,var(--color-green) 10%,var(--color-white));border:2px solid var(--color-green);box-shadow:0 0 10px var(--color-green-light)}.player-name-wrapper{align-items:center;color:var(--text-primary);display:flex;font-weight:600;gap:5px;margin-bottom:2px}.player-you-tag{background-color:var(--action-primary)}.player-turn-tag,.player-you-tag{border-radius:var(--border-radius-sm);color:var(--color-white);font-size:.7em;font-weight:400;padding:2px 6px}.player-turn-tag{background-color:var(--color-green)}.player-details{color:var(--text-secondary);font-size:.75em}.player-status-sidebar::-webkit-scrollbar{height:var(--spacing-sm)}.player-status-sidebar::-webkit-scrollbar-track{background:var(--bg-card-alt);border-radius:var(--border-radius-default)}.player-status-sidebar::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:var(--border-radius-default)}.player-status-sidebar::-webkit-scrollbar-thumb:hover{background:var(--text-disabled)}.player-item{align-items:flex-start;background-color:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--border-radius-default);color:var(--text-primary);display:flex;flex-direction:column;max-height:56px;min-width:175px;padding:var(--spacing-sm);transition:background-color .2s ease,transform .1s ease}.player-item.you{background-color:color-mix(in srgb,var(--color-dark-blue-gray) 90%,var(--color-vibrant-green) 10%);border-color:var(--color-vibrant-green);font-weight:700}.player-item:hover{background-color:color-mix(in srgb,var(--bg-card) 90%,var(--text-primary) 10%);transform:translateY(-2px)}.player-name{color:var(--text-primary);font-weight:700;margin-bottom:3px;position:relative}.player-name span{font-size:.85em;font-weight:400;opacity:.8}.player-hand-size,.player-rank{color:var(--text-secondary);font-size:.85em;margin-left:calc(var(--spacing-md) + var(--spacing-xs))}.player-rank{color:var(--color-gold-yellow);font-style:italic}.player-status-sidebar p{color:var(--text-secondary);padding:var(--spacing-sm);text-align:center}.player-details{display:flex;flex-direction:column;flex-grow:1}.player-card-count,.player-rank,.player-role{color:var(--text-secondary);font-size:.85em;margin-bottom:2px}.game-message{-webkit-overflow-scrolling:touch;background-color:var(--bg-card);border-radius:var(--border-radius-default);box-shadow:0 1px 3px #00000014;color:var(--text-primary);font-size:1.1em;font-weight:500;overflow-x:auto;padding:var(--spacing-sm);padding-bottom:var(--spacing-xs);text-align:center;white-space:nowrap}.start-game-button-container{display:flex;justify-content:center;padding:var(--spacing-md) 0}.start-game-button{background-color:var(--color-vibrant-green);border:none;border-radius:var(--border-radius-lg);box-shadow:0 4px 10px #0080004d;color:var(--color-white);cursor:pointer;font-size:1.2em;font-weight:700;padding:var(--spacing-md) var(--spacing-lg);transition:background-color .2s ease,transform .1s ease}.start-game-button:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-vibrant-green) 80%,#000);transform:translateY(-2px)}.start-game-button:disabled{background-color:var(--action-disabled);box-shadow:none;cursor:not-allowed;opacity:.7}.rankings-section{border-radius:var(--border-radius-lg);box-shadow:0 5px 15px #0000001a}.rankings-section h3{color:var(--text-primary);font-size:1.8em}.rankings-list li{background-color:var(--color-white);box-shadow:0 1px 3px #0000000d;color:var(--text-on-light);margin-bottom:var(--spacing-xs)}.error-message,.rankings-list li{border-radius:var(--border-radius-default);padding:var(--spacing-sm)}.error-message{background-color:var(--color-red-light);color:var(--color-red-dark);font-weight:500}@media (max-width:768px){.game-page-container{gap:var(--spacing-sm);padding:var(--spacing-sm)}.game-page-title{font-size:1.5em;margin-bottom:var(--spacing-sm)}.game-page-top-info.desktop-ui{display:none}.game-page-top-info.mobile-ui{align-items:center;background-color:var(--bg-card);border-radius:var(--border-radius-default);box-shadow:0 2px 5px #0000000d;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-sm);width:100%}.game-page-title-mobile{color:var(--text-primary);font-size:1.3em;margin-bottom:var(--spacing-xs);text-align:center;width:100%}.mobile-info-bar{align-items:center;border-radius:var(--border-radius-sm);box-shadow:0 1px 3px #0000000d;display:flex;font-size:.9em;justify-content:space-around;padding:var(--spacing-xs) var(--spacing-sm);width:100%}.mobile-info-bar span{color:var(--text-primary);font-weight:500}.mobile-info-bar strong{color:var(--text-primary);font-weight:600;margin-left:5px}.mobile-game-actions-bar{display:flex;gap:var(--spacing-xs);justify-content:center;margin-top:var(--spacing-xs);width:100%}.mobile-game-actions-bar .mobile-action-button{flex-grow:1;font-size:.8em;max-width:100px;min-width:70px;padding:var(--spacing-xs) var(--spacing-sm)}.mobile-game-actions-bar .delete-button{background-color:var(--color-red);color:var(--color-white)}.lobby-status-section{flex-basis:auto;flex-grow:0;font-size:.8em;padding:var(--spacing-xs);width:100%}.lobby-status-section h4{font-size:1em;margin-bottom:var(--spacing-xs)}.lobby-status-grid{gap:2px 5px}.lobby-label{font-weight:500}.status-light{height:8px;width:8px}.room-code-display,.room-management-actions.game-page-actions{font-size:.9em;justify-content:center;padding:var(--spacing-sm);text-align:center;width:100%}.room-code-display{align-items:center}.room-management-actions.game-page-actions .button{max-width:150px;width:auto}.player-status-sidebar{max-height:100px;padding:var(--spacing-xs)}.player-status-item{font-size:.8em;height:70px;min-width:100px;padding:var(--spacing-xs)}.player-name-wrapper{font-size:.9em}.player-turn-tag,.player-you-tag{font-size:.6em;padding:1px 4px}.player-details{font-size:.7em}.game-message{font-size:1em;padding:var(--spacing-xs)}.start-game-button{font-size:1em;padding:var(--spacing-sm) var(--spacing-md)}.rankings-section{padding:var(--spacing-md)}.rankings-section h3{font-size:1.5em}.rankings-list li{font-size:1em}}.game-chat{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#1a1a1af2;border:1px solid #ffffff1a;border-radius:var(--border-radius-default);bottom:20px;box-shadow:0 10px 30px #0000004d;display:flex;flex-direction:column;height:400px;position:fixed;right:20px;width:350px;z-index:1000}.game-chat.mobile{border-radius:12px 12px 0 0;bottom:0;box-sizing:border-box;height:50vh;left:0;max-height:400px;max-width:100%;position:fixed;right:0;width:100vw;z-index:1002}.chat-toggle-button{border:none;border-radius:50%;box-shadow:0 4px 15px #0000004d;color:#fff;cursor:pointer;font-size:1.5em;height:60px;position:fixed;right:20px;transition:all .3s ease;width:60px;z-index:999}.chat-toggle-button,.chat-toggle-button.mobile{background:var(--color-vibrant-green);bottom:20px}.chat-toggle-button.mobile{font-size:1.3em;height:56px;left:20px;right:auto;width:56px;z-index:1001}.chat-toggle-button:hover{background:var(--action-accent-dark);transform:scale(1.1)}.chat-notification-badge{align-items:center;background:#e74c3c;border-radius:50%;color:#fff;display:flex;font-size:.7em;height:20px;justify-content:center;position:absolute;right:-5px;top:-5px;width:20px}.chat-header{align-items:center;background:#ffffff0d;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:var(--spacing-md)}.chat-title{color:var(--color-white);font-weight:600}.chat-controls,.chat-title{align-items:center;display:flex;gap:var(--spacing-sm)}.chat-close-button,.voice-chat-button,.voice-control-button{background:none;border:none;border-radius:var(--border-radius-sm);color:var(--text-secondary);cursor:pointer;padding:var(--spacing-xs);transition:all .2s ease}.chat-close-button:hover,.voice-chat-button:hover,.voice-control-button:hover{background:#ffffff1a;color:var(--color-white)}.voice-controls{display:flex;gap:var(--spacing-xs)}.voice-control-button.muted{color:#e74c3c}.voice-control-button.deafened{color:#f39c12}.voice-control-button.leave{color:#e74c3c}.chat-messages{display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-sm);overflow-y:auto;padding:var(--spacing-sm)}.chat-message{background:#ffffff0d;border-radius:var(--border-radius-sm);padding:var(--spacing-sm)}.message-header{align-items:center;display:flex;font-size:.8em;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.message-sender{color:var(--color-vibrant-green);font-weight:600}.sender-wins{align-items:center;color:var(--color-gold-yellow);display:flex;font-size:.9em;gap:2px}.message-time{color:var(--text-secondary);margin-left:auto}.message-content{word-wrap:break-word;color:var(--color-white)}.typing-indicator{color:var(--text-secondary);font-size:.9em;font-style:italic;padding:var(--spacing-xs) var(--spacing-sm)}.chat-input-form{border-top:1px solid #ffffff1a;box-sizing:border-box;display:flex;gap:var(--spacing-sm);padding:var(--spacing-md)}.chat-input{background:#ffffff1a;border:1px solid #fff3;border-radius:var(--border-radius-sm);box-sizing:border-box;color:var(--color-white);flex:1 1;font-size:.9em;min-width:0;padding:var(--spacing-sm)}.chat-input:focus{background:#ffffff26;border-color:var(--color-vibrant-green);outline:none}.chat-send-button{background:var(--color-vibrant-green);border:none;border-radius:var(--border-radius-sm);color:#fff;cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);transition:all .2s ease}.chat-send-button:hover:not(:disabled){background:var(--action-accent-dark)}.chat-send-button:disabled{cursor:not-allowed;opacity:.5}.voice-chat-overlay{background-color:#000000b3;border-radius:8px;bottom:20px;color:#fff;left:10px;max-height:250px;overflow-y:auto;padding:10px;position:fixed;top:auto;width:200px;z-index:1000}.voice-user{align-items:center;background-color:#1e2730e6;border-radius:20px;box-shadow:0 2px 5px #0000004d;color:var(--text-primary);display:flex;font-size:.9em;font-weight:500;gap:8px;padding:5px 10px;pointer-events:auto;position:relative;transition:background-color .2s ease}.voice-user.speaking .voice-user-avatar{box-shadow:0 0 8px #2ecc71b3}.voice-user.muted .voice-user-avatar{border:3px solid #e74c3c}.voice-user-avatar{align-items:center;background-color:#556b7f;border:3px solid #0000;border-radius:50%;color:var(--color-white);display:flex;font-weight:700;height:36px;justify-content:center;overflow:hidden;transition:border .2s ease,box-shadow .2s ease;width:36px}.voice-user-avatar img{height:100%;object-fit:cover;width:100%}.voice-user-info{display:flex;flex-direction:column;flex-grow:1}.voice-user-name{color:var(--text-primary);font-weight:600;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.voice-user-status{align-items:center;color:var(--text-secondary);display:flex;font-size:.8em;gap:5px}.voice-user-status .deafened-icon,.voice-user-status .muted-icon{color:#e74c3c;font-size:1.1em}.muted-icon{color:#e53e3e;font-size:12px}.deafened-icon{color:#f80;font-size:12px}.speaking-indicator{align-items:center;display:flex;gap:2px}.speaking-wave{animation:speaking-wave .6s ease-in-out infinite alternate;background:#0f8;border-radius:1px;height:8px;width:2px}.speaking-wave:nth-child(2){animation-delay:.2s}.speaking-wave:nth-child(3){animation-delay:.4s}@keyframes pulse-border{0%{box-shadow:0 0 0 #2ecc71b3}50%{box-shadow:0 0 10px #2ecc71}to{box-shadow:0 0 0 #2ecc71b3}}.voice-user.speaking .voice-user-avatar{animation:pulse-border 1.5s ease-out infinite;border:3px solid #2ecc71}@media (max-width:768px){.voice-chat-overlay{left:10px;top:10px}.voice-user{padding:4px 8px}.voice-user-name{font-size:12px}.voice-user-avatar{font-size:10px;height:20px;width:20px}}.asshole-game-board-wrapper{align-items:center;background-color:var(--bg-page);box-shadow:0 4px 15px var(--shadow-black);color:var(--text-primary);display:flex;flex-direction:column;flex-grow:1;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;justify-content:center;margin:var(--spacing-sm) auto;max-width:1200px;min-height:auto;padding:var(--spacing-md);position:relative;width:90%}.asshole-game-board-wrapper h2{font-size:1.8em;letter-spacing:1px;margin-bottom:var(--spacing-md)}.asshole-game-board-wrapper h2,.asshole-game-board-wrapper h3{color:var(--text-primary);position:relative;text-align:center;z-index:5}.asshole-game-board-wrapper h3{font-size:1em;margin-bottom:var(--spacing-lg)}.error-message{color:var(--status-error);font-size:1em;text-align:center}.error-message,.game-board{margin-top:var(--spacing-md)}.game-board{align-items:center;display:flex;flex-direction:column;max-width:1200px;width:100%}.game-board-layout{grid-gap:var(--spacing-sm);display:grid;gap:var(--spacing-sm);grid-template-areas:"top-players" "main-area" "controls" "player-hand";grid-template-columns:1fr;grid-template-rows:auto auto auto auto;height:100%;overflow-x:hidden;width:100%}.top-players{align-items:flex-start;background-color:#0003;flex-wrap:wrap;gap:var(--spacing-md);grid-area:top-players;min-height:100px;width:100%}.main-area,.top-players{border-radius:var(--border-radius-md);display:flex;justify-content:center;padding:var(--spacing-sm)}.main-area{background-color:#0000004d;grid-area:main-area;min-height:150px;position:relative;width:35%}.interrupt-overlay,.main-area{align-items:center;flex-direction:column}.interrupt-overlay{background-color:#000000b3;border-radius:8px;box-sizing:border-box;color:#fff;display:flex;height:100%;justify-content:center;left:0;padding:20px;position:absolute;text-align:center;top:0;width:100%;z-index:10}.interrupt-overlay h3{color:gold;margin-top:0}.interrupt-overlay p{margin-bottom:10px}.interrupt-overlay .interrupt-actions button{cursor:pointer;font-size:1em;margin:5px;padding:10px 15px}.interrupt-overlay .current-interrupt-bids{font-size:.9em;margin-top:15px}.interrupt-overlay .current-interrupt-bids ul{list-style:none;max-height:80px;overflow-y:auto;padding:0}.interrupt-overlay .current-interrupt-bids li{margin-bottom:3px}.controls-area{box-sizing:border-box;flex-direction:row;grid-area:controls;justify-content:center;margin-bottom:var(--spacing-sm);padding:var(--spacing-md);width:30%}.controls-area,.pile-area{align-items:center;display:flex}.pile-area{flex-direction:column;gap:var(--spacing-sm);margin:0 auto;max-width:250px;min-height:150px;position:relative;width:100%}.pile-area h4{color:var(--text-primary);font-size:1.1em;margin-bottom:var(--spacing-sm)}.pile-cards-display{align-items:center;display:flex;height:120px;justify-content:center;margin-bottom:var(--spacing-sm);max-width:120px;overflow:hidden;position:relative;width:100%}.pile-cards-display .card{border-radius:8px;box-shadow:0 4px 8px #0006;height:98px;left:50%;position:absolute;top:50%;transform-origin:center;transition:all .3s ease-out;width:70px}.pile-cards-display .card:last-child{transform:translate(-50%,-50%) rotate(0deg);z-index:5}.pile-cards-display .card:nth-last-child(2){transform:translate(calc(-50% - 7px),calc(-50% - 4px)) rotate(-3deg);z-index:4}.pile-cards-display .card:nth-last-child(3){transform:translate(calc(-50% + 7px),calc(-50% + 4px)) rotate(3deg);z-index:3}.pile-cards-display .card:nth-last-child(4){transform:translate(calc(-50% - 14px),calc(-50% - 8px)) rotate(-6deg);z-index:2}.pile-cards-display .card:nth-last-child(5){transform:translate(calc(-50% + 14px),calc(-50% + 8px)) rotate(6deg);z-index:1}.pile-info{color:var(--text-secondary);font-size:.9em;margin-top:var(--spacing-sm)}.no-pile-message{color:var(--text-secondary);font-style:italic}.animating-pile-clear{align-items:center;display:flex;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%}.animating-pile-clear .card-wrapper{--end-x:0px;--end-y:0px;--end-rotate:0deg;animation:pileClearSweepAway .8s ease-out forwards;position:absolute}@keyframes fadeAndShrink{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}@keyframes pileClearSweepAway{0%{opacity:1;transform:translate(0) rotate(0deg) scale(1)}to{opacity:0;transform:translate(var(--end-x),var(--end-y)) rotate(var(--end-rotate)) scale(.8)}}.opponent-display{align-items:center;background-color:var(--bg-card);border:1px solid var(--border-dark);border-radius:var(--border-radius-md);box-shadow:0 2px 5px #0000004d;display:flex;flex-direction:row;gap:var(--spacing-sm);justify-content:space-between;padding:var(--spacing-sm);transition:all .2s ease;width:100%}.opponent-display.current-turn{border-color:var(--color-primary);box-shadow:0 0 10px var(--color-primary),inset 0 0 5px var(--color-primary);transform:translateY(-5px)}.opponent-info{align-items:center;display:flex;flex-direction:row;gap:var(--spacing-xs);margin-bottom:0}.opponent-name{color:var(--text-primary);font-size:1em;font-weight:600}.opponent-cards-count{color:var(--text-secondary);font-size:.7em}.opponent-cards{display:flex;flex-wrap:wrap;gap:0;justify-content:center}.opponent-cards .card{border-radius:var(--border-radius-sm);box-shadow:0 1px 3px #0003;height:63px;margin-right:-25px;width:45px}.opponent-cards .card:last-child{margin-right:0}.player-hand-container{align-items:flex-end;grid-area:player-hand;margin-top:var(--spacing-lg);overflow-x:hidden;padding:var(--spacing-md) 0;perspective:1000px}.player-hand-container .card{cursor:pointer;height:140px;margin-left:-20px;position:relative;transform:rotate(0deg);transform-origin:bottom center;transition:transform .2s ease-out,margin-left .2s ease-out,z-index .1s ease;width:100px;z-index:1}.player-hand-container .card:first-child{margin-left:0}.player-hand-container .card:hover{box-shadow:0 5px 15px #0000004d;transform:translateY(-5px) scale(1.02);z-index:10}.player-hand-container .card.selected{border:3px solid var(--action-primary);box-shadow:0 0 10px color-mix(in srgb,var(--action-primary) 70%,#0000);transform:translateY(-15px) scale(1.05);z-index:15}.card-image{align-items:center;background-color:var(--color-off-white);border:1px solid var(--border-default);border-radius:var(--border-radius-default);box-shadow:1px 1px 3px #0000004d;color:var(--color-dark-text);cursor:pointer;display:flex;font-size:.9em;font-weight:700;height:110px;justify-content:center;position:relative;transition:transform .1s ease-in-out,box-shadow .1s ease-in-out;width:80px}.card-image img{display:block;max-height:100%;max-width:100%;object-fit:contain}.card-image.no-image{background-color:var(--color-white);font-size:1em}.card-image.selected{border-color:var(--action-primary);box-shadow:0 5px 15px color-mix(in srgb,var(--action-primary) 60%,#0000);transform:translateY(-5px)}.game-top-bar{justify-content:center;margin-bottom:var(--spacing-md);padding:0 var(--spacing-sm)}.game-board-actions,.game-top-bar{align-items:center;display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.game-board-actions{flex-shrink:0;margin-bottom:0;margin-top:0}.player-turn-actions{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs)}.player-turn-actions,.room-management-actions{display:flex;flex-direction:column;justify-content:center;max-width:400px;width:100%}.room-management-actions{gap:var(--spacing-md)}.button{border:none;border-radius:var(--border-radius-default);color:var(--color-white);cursor:pointer;flex-grow:1;font-size:1em;font-weight:700;min-width:100px;padding:var(--spacing-sm) var(--spacing-md);transition:background-color .3s ease,transform .1s ease,box-shadow .3s ease;width:100%}.button:hover:not(:disabled){box-shadow:0 5px 15px #0003;transform:translateY(-2px)}.button:disabled{background-color:var(--action-disabled);color:var(--text-disabled);cursor:not-allowed;opacity:.6}.play-button{background-color:var(--color-vibrant-green)}.play-button:hover:not(:disabled){background-color:var(--action-accent-dark)}.pass-button{background-color:var(--action-primary)}.pass-button:hover:not(:disabled){background-color:var(--action-hover)}.leave-room-button{background-color:var(--color-gold-yellow);color:var(--text-on-light);font-size:.8em;padding:var(--spacing-sm) var(--spacing-xs)}.leave-room-button:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-gold-yellow) 90%,#000)}.delete-room-button{background-color:var(--color-deep-red)}.delete-room-button:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-deep-red) 90%,#000)}.start-game-button{font-size:1em;margin-top:var(--spacing-md);padding:var(--spacing-md);width:100%}.rankings-section{background-color:var(--bg-card);border-radius:var(--border-radius-default);box-shadow:0 5px 15px #0006;color:var(--text-primary);margin-top:var(--spacing-lg);max-width:500px;padding:var(--spacing-lg);text-align:center;width:90%}.rankings-section h3{color:var(--action-primary);margin-bottom:var(--spacing-md)}.rankings-list{list-style:none;margin:0;padding:0}.rankings-list li{border-bottom:1px solid var(--border-default);color:var(--text-primary);font-size:1.1em;padding:var(--spacing-xs) 0}.rankings-list li:last-child{border-bottom:none}@media (min-width:768px){.asshole-game-board-wrapper{margin:var(--spacing-md) auto;min-height:70vh;width:100%}.asshole-game-board-wrapper h2{font-size:2.2em}.asshole-game-board-wrapper h3{font-size:1.2em}.error-message{font-size:1.1em}.game-board-layout{gap:var(--spacing-md);grid-template-areas:"top-players top-players top-players" "left-pad main-area right-pad" ". player-hand ." ". controls .";grid-template-columns:1fr 2fr 1fr;grid-template-rows:auto 1fr auto}.top-players{gap:var(--spacing-lg);grid-area:top-players;min-height:120px;padding:var(--spacing-md)}.main-area{grid-area:main-area;grid-column:2/3;min-height:200px}.controls-area,.main-area{padding:var(--spacing-md);width:auto}.controls-area{align-items:center;flex-direction:row;gap:var(--spacing-md);grid-area:controls;grid-column:3/4;justify-content:flex-end}.pile-area{max-width:300px;min-height:200px;width:100%}.pile-area h4{font-size:1.2em}.pile-cards-display{height:200px;max-width:200px}.pile-cards-display .card{height:168px;width:120px}.pile-cards-display .card:nth-last-child(2){transform:translate(calc(-50% - 12px),calc(-50% - 6px)) rotate(-3deg)}.pile-cards-display .card:nth-last-child(3){transform:translate(calc(-50% + 12px),calc(-50% + 6px)) rotate(3deg)}.pile-cards-display .card:nth-last-child(4){transform:translate(calc(-50% - 24px),calc(-50% - 12px)) rotate(-6deg)}.pile-cards-display .card:nth-last-child(5){transform:translate(calc(-50% + 24px),calc(-50% + 12px)) rotate(6deg)}.opponent-display{align-items:center;flex-direction:column;gap:var(--spacing-sm);justify-content:center;width:auto}.opponent-info{flex-direction:column;gap:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.opponent-name{font-size:1.1em}.opponent-cards-count{font-size:.8em}.opponent-cards .card{height:84px;margin-right:-40px;width:60px}.player-hand-container{align-items:center;grid-column:2/3;justify-content:center;margin-top:var(--spacing-xl);padding:var(--spacing-lg) 0}.player-hand-container .card{height:182px;margin-left:-40px;width:130px}.player-hand-container .card:hover{transform:translateY(-15px) scale(1.05)}.player-hand-container .card.selected{transform:translateY(-25px) scale(1.08)}.card-image{height:140px;width:100px}.card-image.selected{transform:translateY(-8px)}.game-top-bar{align-items:flex-start;flex-direction:row;gap:0;justify-content:space-between}.game-board-actions,.player-turn-actions{align-items:flex-end;flex-direction:row;gap:var(--spacing-sm);width:auto}.room-management-actions{align-items:flex-end;flex-direction:column;gap:var(--spacing-sm);width:auto}.button{font-size:1.1em;min-width:150px;padding:var(--spacing-md);width:auto}.start-game-button{font-size:1.2em;margin-top:0;padding:var(--spacing-md) var(--spacing-lg);width:auto}.rankings-section{width:80%}}@media (min-width:1024px){.asshole-game-board-wrapper{margin:var(--spacing-lg) auto}.game-board-layout{grid-template-areas:"top-players top-players top-players" "side-panel-left main-area side-panel-right" ". player-hand ." ". controls ."}}.main-game-content{margin-left:0}@media (max-width:768px){.game-board-layout{gap:var(--spacing-sm);height:auto;padding:var(--spacing-sm)}.game-board-layout,.main-area{display:flex;flex-direction:column;width:100%}.main-area{align-items:center;background-color:var(--bg-card);border-radius:var(--border-radius-default);justify-content:center;min-height:300px;padding:var(--spacing-md)}.top-players{order:1;width:100%}.player-hand{order:3;width:100%}.controls{order:4;width:100%}}.card-container{background-color:#fff;border:2px solid #ccc;border-radius:8px;box-shadow:0 4px 6px #0000001a;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;font-family:Inter,sans-serif;height:112px;justify-content:space-between;overflow:hidden;padding:8px;position:relative;transition:all .2s ease-in-out;width:80px}@media (min-width:640px){.card-container{border-radius:10px;height:128px;padding:10px;width:96px}}@media (min-width:768px){.card-container{border-radius:12px;height:144px;padding:12px;width:112px}}.card-selected{border-color:#60a5fa;box-shadow:0 0 0 4px #60a5fa;transform:translateY(-16px)}.red-suit{color:var(--suit-red)}.black-suit{color:var(--suit-black)}.card-corner{align-items:center;display:flex;flex-direction:column;line-height:1;position:absolute;z-index:10}.card-top-left{left:8px;top:8px}.card-bottom-right{bottom:8px;right:8px;transform:rotate(180deg)}.card-rank{font-size:1.25rem;font-weight:700}@media (min-width:640px){.card-rank{font-size:1.5rem}}.card-corner-suit-svg{fill:currentColor;height:16px;width:16px}@media (min-width:640px){.card-corner-suit-svg{height:20px;width:20px}}.card-pip-area{box-sizing:border-box;height:100%;left:0;padding:25% 15%;pointer-events:none;position:absolute;top:0;width:100%}.pip-wrapper{fill:currentColor;height:12px;position:absolute;width:12px}@media (min-width:640px){.pip-wrapper{height:16px;width:16px}}@media (min-width:768px){.pip-wrapper{height:20px;width:20px}}.rotated-pip{transform:rotate(180deg)}.pip-position-top-left{left:30%;position:inherit;top:28%;transform:translate(-50%,-50%)}.pip-position-top-right{position:inherit;right:30%;top:28%;transform:translate(50%,-50%)}.pip-position-top-middle{top:28%}.pip-position-top-center-top,.pip-position-top-middle{left:50%;position:inherit;transform:translate(-50%,-50%)}.pip-position-top-center-top{top:38%}.pip-position-middle-left{left:30%;position:inherit;top:50%;transform:translate(-50%,-50%)}.pip-position-middle-right{position:inherit;right:30%;top:50%;transform:translate(50%,-50%)}.pip-position-center-middle{left:50%;position:inherit;top:50%;transform:translate(-50%,-50%)}.pip-position-middle-left-narrow{left:30%;position:inherit;top:43%;transform:translate(-50%,-50%)}.pip-position-middle-right-narrow{position:inherit;right:30%;top:43%;transform:translate(50%,-50%)}.pip-position-center-left-vertical{left:30%;position:inherit;top:58%;transform:translate(-50%,-50%) rotate(180deg)}.pip-position-center-right-vertical{position:inherit;right:30%;top:58%;transform:translate(50%,-50%) rotate(180deg)}.pip-position-bottom-left-rotated{bottom:28%;left:30%;position:inherit;transform:translate(-50%,50%) rotate(180deg)}.pip-position-bottom-right-rotated{bottom:28%;position:inherit;right:30%;transform:translate(50%,50%) rotate(180deg)}.pip-position-bottom-middle-rotated{bottom:28%;left:50%;position:inherit;transform:translate(-50%,50%) rotate(180deg)}.pip-position-bottom-center-bottom-rotated{bottom:38%;left:50%;position:inherit;transform:translate(-50%,50%) rotate(180deg)}.card-center-face-symbol{align-items:center;display:flex;height:60%;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:60%}.card-center-suit-svg{fill:currentColor;height:100%;width:100%}.card-center-face-image-wrapper{align-items:center;border-radius:4px;display:flex;height:60%;justify-content:center;left:50%;overflow:hidden;position:absolute;top:50%;transform:translate(-50%,-50%);width:60%}.card-center-face-image{border-radius:inherit;height:100%;object-fit:contain;width:100%}.card-face-down{background-color:#1a202c;border-radius:8px;isolation:isolate;overflow:hidden;position:relative}.card-back-pattern,.card-face-down{align-items:center;display:flex;justify-content:center}.card-back-pattern{-webkit-clip-path:inset(0);clip-path:inset(0);inset:0;position:absolute;z-index:1}.card-back-symbol{fill:currentColor;color:#90cdf4;height:50px;max-height:100%;max-width:100%;object-fit:contain;width:50px;z-index:2}.card-back-gradient{background:linear-gradient(to bottom right,#3b82f6,#4f46e5);border-radius:8px;inset:0;opacity:.7;z-index:0}@media (min-width:640px){.card-back-gradient{border-radius:10px}}@media (min-width:768px){.card-back-gradient{border-radius:12px}}.card-back-initials{color:#fff;font-size:1.875rem;font-weight:700;position:relative;z-index:10}.player-hand-container{align-items:center;background-color:var(--bg-card);border-radius:var(--border-radius-default);box-sizing:border-box;display:flex;height:250px;justify-content:center;margin-bottom:10px;margin-top:auto;overflow:hidden;padding:10px var(--spacing-lg);position:relative;width:100%;z-index:100}.hand-cards-wrapper{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;flex-grow:1;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap}.hand-cards-wrapper::-webkit-scrollbar{display:none}.hand-cards{align-items:center;display:inline-flex;height:100%}.card-wrapper{cursor:pointer;flex-shrink:0;margin-right:-90px;position:relative;transition:transform .2s ease-out,box-shadow .2s ease-out,border .2s ease-out,z-index 0s;-webkit-user-select:none;user-select:none;z-index:1}.card-wrapper:first-child{margin-left:0}.card-wrapper .card{border-radius:8px;box-shadow:0 4px 8px #0003;height:210px;overflow:hidden;transition:transform .2s ease-out;width:150px}.player-hand-container .card-wrapper:hover .card{box-shadow:0 10px 20px #0000004d;transform:translateY(-20px);z-index:10}.player-hand-container .card-wrapper.selected .card{border:3px solid var(--action-primary);box-shadow:0 0 15px color-mix(in srgb,var(--action-primary) 70%,#0000);transform:translateY(-30px);z-index:15}.scroll-arrow{align-items:center;background-color:#0009;border:none;border-radius:50%;box-shadow:0 2px 5px #0000004d;box-sizing:border-box;color:var(--color-white);cursor:pointer;display:flex;font-size:1.2em;height:40px;justify-content:center;padding:0;position:absolute;top:50%;transform:translateY(-50%);transition:background-color .2s ease,transform .1s ease;width:40px;z-index:20}.scroll-arrow:hover{background-color:#000c;transform:translateY(-50%) scale(1.1)}.scroll-arrow.left-arrow{left:var(--spacing-sm)}.scroll-arrow.right-arrow{right:var(--spacing-sm)}@media (max-width:768px){.player-hand-container{align-items:center;display:flex;height:160px;justify-content:center;margin-bottom:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);width:100%}.hand-cards-wrapper{flex-grow:1;width:100%}.card-wrapper{margin-right:-20px}.card-wrapper .card{box-shadow:0 2px 5px #0003;height:140px;width:100px}.player-hand-container .card-wrapper:hover .card{box-shadow:0 5px 15px #0000004d;transform:translateY(-5px)}.player-hand-container .card-wrapper.selected .card{border:3px solid var(--action-primary);box-shadow:0 0 10px color-mix(in srgb,var(--action-primary) 70%,#0000);transform:translateY(-15px)}.scroll-arrow{background-color:#000000b3;box-shadow:0 1px 3px #0006;box-sizing:border-box;flex-shrink:0;font-size:.9em;height:30px;left:auto;padding:0;position:static;right:auto;top:auto;transform:none;width:30px}.scroll-arrow:hover{background-color:#000c;transform:scale(1.1)}.card-rank{font-size:1.1em}.card-suit-symbol{font-size:1em}.card-pip-symbol{font-size:1.2em}.card-face-rank{font-size:1.4em}}.app-header{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#14141ef2;box-shadow:0 2px 8px #0003;box-sizing:border-box;color:var(--color-white);display:flex;height:60px;justify-content:space-between;left:0;padding:10px var(--spacing-lg);position:-webkit-sticky;position:sticky;top:0;width:100%;z-index:1000}.header-left-section{align-items:center;display:flex;gap:var(--spacing-xl)}.app-logo-link{align-items:center;display:flex;height:40px}.app-logo{border-radius:var(--border-radius-sm);height:100%;object-fit:contain;width:auto}.main-nav ul{gap:var(--spacing-xl);list-style:none;margin:0;padding:0}.header-left,.main-nav ul{align-items:center;display:flex}.header-left{gap:var(--spacing-lg)}.header-logo{align-items:center;color:var(--color-white);display:flex;font-size:1.2em;font-weight:700;gap:var(--spacing-sm);text-decoration:none}.logo-icon{color:var(--color-vibrant-green);font-size:1.5em}.header-center{display:flex;flex:1 1;justify-content:center}.header-center ul{align-items:center;display:flex;gap:var(--spacing-lg);list-style:none;margin:0;padding:0}.header-right{align-items:center;display:flex;gap:var(--spacing-md)}.nav-dropdown{position:relative}.nav-dropdown-button{align-items:center;background:none;border:none;border-radius:6px;color:#fffc;cursor:pointer;display:flex;font-size:.9em;font-weight:600;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);transition:all .2s ease}.nav-dropdown-button.active,.nav-dropdown-button:hover{background-color:#ffffff1a;color:var(--color-white)}.nav-dropdown-icon{font-size:.8em;transition:transform .2s ease}.nav-dropdown.open .nav-dropdown-icon{transform:rotate(180deg)}.nav-dropdown-menu{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background-color:#1a1a1afa;border:1px solid #ffffff1a;border-radius:var(--border-radius-default);box-shadow:0 10px 30px #0006;left:50%;opacity:0;position:absolute;top:100%;transform:translateX(-50%);transform:translateX(-50%) translateY(-10px);transition:all .3s cubic-bezier(.2,.8,.2,1);visibility:hidden;width:320px;z-index:1100}.nav-dropdown-menu.open{opacity:1;transform:translateX(-50%) translateY(0);visibility:visible}.dropdown-category{padding:var(--spacing-md)}.dropdown-category:not(:last-child){border-bottom:1px solid #ffffff1a}.category-label{color:var(--text-secondary);display:block;font-size:.7em;font-weight:700;letter-spacing:1px;margin-bottom:var(--spacing-sm);text-transform:uppercase}.game-mode-item{align-items:center;border-radius:var(--border-radius-default);color:var(--text-primary);display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xs);padding:var(--spacing-md);position:relative;text-decoration:none;transition:all .2s ease}.game-mode-item:hover:not(.disabled){background-color:#ffffff1a;color:var(--color-vibrant-green)}.game-mode-item.disabled{cursor:not-allowed;opacity:.6}.game-mode-icon{align-items:center;background:linear-gradient(135deg,#3498db,#2980b9);border-radius:8px;color:#fff;display:flex;flex-shrink:0;font-size:1.1em;height:40px;justify-content:center;width:40px}.game-mode-info{flex:1 1}.game-mode-title{display:block;font-size:.9em;font-weight:700;margin-bottom:2px}.game-mode-description{color:var(--text-secondary);display:block;font-size:.75em;line-height:1.3}.coming-soon-badge{background-color:var(--color-gold-yellow);border-radius:4px;color:#000;font-size:.65em;font-weight:700;padding:2px 6px;position:absolute;right:var(--spacing-xs);text-transform:uppercase;top:var(--spacing-xs)}.nav-more-button{background:none;border:none;border-radius:6px;color:#fffc;cursor:pointer;font-size:.9em;padding:var(--spacing-sm) var(--spacing-md);transition:all .2s ease}.nav-more-button:hover{background-color:#ffffff1a;color:var(--color-white)}.more-menu{min-width:280px;width:280px}.more-menu-item{align-items:center;color:var(--text-primary);display:flex;font-size:.9em;font-weight:600;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);position:relative;text-decoration:none;transition:all .2s ease}.more-menu-item:hover{background-color:#ffffff1a;color:var(--color-vibrant-green)}.more-item-icon{font-size:1em;width:16px}.tournament-item{border-top:1px solid #ffffff1a;margin-top:var(--spacing-xs);padding-top:var(--spacing-sm)}.tournament-item .more-item-icon{color:var(--color-gold-yellow)}.game-mode-icon.practice{background:linear-gradient(135deg,#10b981,#059669)}.game-mode-icon.challenges{background:linear-gradient(135deg,#f59e0b,#d97706)}.game-mode-icon.party{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.game-mode-icon.join-code{background:linear-gradient(135deg,#06b6d4,#0891b2)}.header-notifications-button,.header-search-button{align-items:center;background:none;border:none;border-radius:50%;color:#fffc;cursor:pointer;display:flex;font-size:1.1em;height:40px;justify-content:center;padding:var(--spacing-sm);position:relative;transition:all .2s ease;width:40px}.header-notifications-button:hover,.header-search-button:hover{background-color:#ffffff1a;color:var(--color-white)}.user-profile-compact{position:relative}.user-profile-button-compact{align-items:center;background:none;border:none;border-radius:var(--border-radius-default);color:var(--color-white);cursor:pointer;display:flex;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);transition:all .2s ease}.user-profile-button-compact:hover{background-color:#ffffff1a}.user-avatar-compact{align-items:center;background:linear-gradient(135deg,var(--color-vibrant-green),#27ae60);border-radius:50%;color:#fff;display:flex;font-size:.9em;height:32px;justify-content:center;width:32px}.user-info-compact{align-items:flex-start;display:flex;flex-direction:column;gap:2px}.user-name-compact{font-size:.85em;font-weight:600;line-height:1}.user-level-bar{align-items:center;display:flex;gap:var(--spacing-xs)}.level-text{color:var(--text-secondary);font-size:.7em;font-weight:600}.level-progress{background-color:#fff3;border-radius:2px;height:4px;overflow:hidden;width:40px}.level-progress-fill{background-color:gold;transition:width .3s ease}.user-stats-compact{align-items:center;color:#ffffffb3;display:flex;font-size:.7em;gap:4px}.user-stats-compact svg{color:gold;font-size:.8em}.notification-badge{align-items:center;animation:pulse 2s infinite;background-color:var(--color-deep-red);border:2px solid var(--bg-page);border-radius:9px;color:#fff;display:flex;font-size:.7em;font-weight:600;height:18px;justify-content:center;min-width:18px;position:absolute;right:-5px;top:-5px}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.notifications-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#1a1a1af2;bottom:0;box-shadow:-5px 0 25px #0000004d;display:flex;flex-direction:column;height:100vh;max-width:380px;overflow:hidden;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);width:100%;z-index:1200}.notifications-panel.open{transform:translateX(0)}.notifications-overlay{animation:fadeIn .3s ease forwards;background-color:#00000080;bottom:0;left:0;opacity:0;position:fixed;right:0;top:0;z-index:1100}@keyframes fadeIn{to{opacity:1}}.notifications-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;flex-shrink:0;justify-content:space-between;padding:var(--spacing-lg)}.notifications-tabs{display:flex;gap:var(--spacing-sm)}.notification-tab{background:none;border:none;border-radius:var(--border-radius-default);color:var(--text-secondary);cursor:pointer;font-size:.8em;font-weight:700;letter-spacing:.5px;padding:var(--spacing-xs) var(--spacing-sm);text-transform:uppercase;transition:all .2s ease}.notification-tab.active{background-color:#2ecc711a;color:var(--color-vibrant-green)}.notifications-close{background:none;border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;font-size:1.2em;padding:var(--spacing-xs);transition:all .2s ease}.notifications-close:hover{background-color:#ffffff1a;color:var(--color-white)}.notifications-content{-webkit-overflow-scrolling:touch;flex:1 1;min-height:0;overflow-y:auto;padding:var(--spacing-md)}.club-invite-item{align-items:center;background-color:#8b5cf61a;border:1px solid #8b5cf633;border-radius:var(--border-radius-default);display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding:var(--spacing-md);position:relative}.club-invite-icon{align-items:center;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;color:#fff;display:flex;font-size:1.1em;height:40px;justify-content:center;width:40px}.club-invite-info{flex:1 1}.club-invite-title{color:var(--text-primary);font-size:.9em;font-weight:700}.beta-badge{background-color:var(--color-gold-yellow);border-radius:4px;color:#000;font-size:.65em;font-weight:700;padding:2px 6px;position:absolute;right:var(--spacing-xs);text-transform:uppercase;top:var(--spacing-xs)}.friend-requests-section,.friends-list-section{margin-bottom:var(--spacing-lg)}.friend-requests-section h4,.friends-list-section h4{color:var(--text-primary);font-size:.9em;font-weight:700;letter-spacing:.5px;margin-bottom:var(--spacing-md);text-transform:uppercase}.friend-item,.friend-request-item{align-items:center;border-radius:var(--border-radius-default);display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xs);padding:var(--spacing-sm);transition:all .2s ease}.friend-item:hover,.friend-request-item:hover{background-color:#ffffff0d}.friend-avatar{align-items:center;background:linear-gradient(135deg,var(--color-vibrant-green),#27ae60);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:1em;height:36px;justify-content:center;width:36px}.friend-info{align-items:flex-start;display:flex;flex:1 1;flex-direction:column}.friend-name{color:var(--text-primary);font-size:.9em;font-weight:600;line-height:1.2}.friend-status{color:var(--text-secondary);font-size:.75em}.friend-status.online{color:var(--color-vibrant-green)}.friend-actions{color:var(--text-secondary);font-size:.9em}.friend-actions,.friend-request-actions{display:flex;gap:var(--spacing-xs)}.accept-btn,.decline-btn{align-items:center;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:.8em;height:28px;justify-content:center;transition:all .2s ease;width:28px}.accept-btn{background-color:var(--color-vibrant-green);color:#fff}.accept-btn:hover{background-color:#27ae60}.decline-btn{background-color:var(--color-deep-red);color:#fff}.decline-btn:hover{background-color:#c0392b}.no-notifications{align-items:center;color:var(--text-secondary);display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-xl);text-align:center}.no-notifications svg{font-size:2em;opacity:.5}.notification-item{align-items:flex-start;border-radius:var(--border-radius-default);cursor:pointer;display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-xs);padding:var(--spacing-md);position:relative;transition:all .2s ease}.notification-item:hover{background-color:#ffffff0d}.notification-item.unread{background-color:#3b82f61a;border-left:3px solid var(--action-primary)}.notification-icon{align-items:center;background:linear-gradient(135deg,var(--action-primary),#2563eb);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:.9em;height:32px;justify-content:center;margin-top:2px;width:32px}.notification-content{flex:1 1}.notification-text{color:var(--text-primary);font-size:.85em;line-height:1.4;margin-bottom:4px}.notification-time{color:var(--text-secondary);font-size:.75em}.unread-dot{background-color:var(--action-primary);border-radius:50%;height:8px;position:absolute;right:var(--spacing-md);top:var(--spacing-md);width:8px}@media (max-width:768px){.header-left-section,.header-right-section{display:none}.mobile-header-bar{display:flex}.menu-overlay{background-color:#000000b3;height:100%;left:0;opacity:0;position:fixed;top:0;transition:opacity .4s ease,visibility .4s ease;visibility:hidden;width:100%;z-index:1090}.app-header.mobile-menu-open+.menu-overlay{opacity:1;visibility:visible}.app-header{height:60px;padding:var(--spacing-sm) var(--spacing-md);position:-webkit-sticky;position:sticky;top:0;z-index:1000}.header-left{flex:1 1}.header-center{display:none}.header-right{gap:var(--spacing-sm)}.mobile-menu-button{align-items:center;background:none;border:none;border-radius:var(--border-radius-default);color:var(--text-primary);cursor:pointer;display:flex;font-size:1.2em;height:40px;justify-content:center;transition:all .2s ease;width:40px}.mobile-menu-button:hover{background-color:#ffffff1a}.mobile-nav-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#1a1a1afa;height:calc(100vh - 60px);left:0;overflow-y:auto;position:fixed;top:60px;transform:translateX(-100%);transition:transform .4s cubic-bezier(.25,.46,.45,.94);width:100%;z-index:1001}.mobile-nav-overlay.open{transform:translateX(0)}.mobile-nav-content{height:100%;max-width:100%;opacity:0;padding:var(--spacing-lg);transform:translateX(-20px);transition:transform .4s cubic-bezier(.25,.46,.45,.94) .1s,opacity .3s ease .1s}.mobile-nav-overlay.open .mobile-nav-content{opacity:1;transform:translateX(0)}.mobile-nav-section{border-bottom:1px solid #ffffff1a;padding-bottom:var(--spacing-lg)}.mobile-nav-section:last-child{border-bottom:none}.mobile-nav-title{color:var(--text-secondary);font-size:.8em;font-weight:700;letter-spacing:1px;margin-bottom:var(--spacing-md);text-transform:uppercase}.mobile-nav-item{align-items:center;border-radius:var(--border-radius-default);color:var(--text-primary);display:flex;font-weight:600;gap:var(--spacing-md);margin-bottom:var(--spacing-xs);padding:var(--spacing-md);text-decoration:none;transition:all .2s ease}.mobile-nav-item:hover{background-color:#ffffff1a;color:var(--color-vibrant-green)}.mobile-nav-item.active{background-color:#2ecc711a;color:var(--color-vibrant-green)}.mobile-nav-item.disabled{cursor:not-allowed;opacity:.6;pointer-events:none;position:relative}.mobile-nav-item.disabled:hover{background-color:initial;color:var(--text-primary)}.mobile-nav-icon{align-items:center;background:linear-gradient(135deg,var(--action-primary),var(--color-vibrant-green));border-radius:8px;color:#fff;display:flex;font-size:1.1em;height:40px;justify-content:center;width:40px}.mobile-user-profile{align-items:center;background-color:#ffffff0d;border-radius:var(--border-radius-default);display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding:var(--spacing-lg)}.mobile-user-avatar{align-items:center;background:linear-gradient(135deg,var(--action-primary),var(--color-vibrant-green));border-radius:50%;color:#fff;display:flex;font-size:1.3em;height:50px;justify-content:center;width:50px}.mobile-user-info h3{color:var(--text-primary);font-size:1.1em;margin-bottom:4px}.mobile-user-stats{color:var(--text-secondary);display:flex;font-size:.8em;gap:var(--spacing-md)}.notifications-panel{max-width:100%;width:100%}.notifications-header{padding:var(--spacing-md) var(--spacing-lg)}.notification-tab{font-size:.9em;padding:var(--spacing-sm) var(--spacing-md)}.header-notifications-button,.header-profile-button{height:44px;min-height:44px;min-width:44px;width:44px}.friend-item,.friend-request-item,.notification-item{min-height:60px;padding:var(--spacing-md)}.notifications-content{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.friend-request-actions{gap:var(--spacing-md)}.accept-btn,.decline-btn{width:36px}.accept-btn,.decline-btn,.mobile-nav-overlay:before{font-size:1em;height:36px}.mobile-nav-overlay:before{background-color:#ffffff4d;border-radius:2px;content:"";height:4px;left:50%;position:absolute;top:10px;transform:translateX(-50%);width:40px}}.header-login-button{align-items:center;background:var(--action-primary);border:none;border-radius:var(--border-radius-default);box-shadow:0 2px 4px #0000001a;color:var(--color-white);cursor:pointer;display:flex;font-size:.95em;font-weight:600;gap:var(--spacing-xs);height:40px;margin-right:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);transition:all .2s ease;white-space:nowrap}.header-login-button:hover{background:var(--action-hover);box-shadow:0 4px 8px #00000026;transform:translateY(-1px)}.header-login-button:active{box-shadow:0 2px 4px #0000001a;transform:translateY(0)}@media (max-width:768px){.header-login-button{font-size:.9em;height:36px;padding:var(--spacing-xs) var(--spacing-sm)}}.profile-dropdown-menu{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background-color:#1a1a1afa;border:1px solid #ffffff1a;border-radius:var(--border-radius-default);box-shadow:0 10px 30px #0006;padding:var(--spacing-xs) 0;position:absolute;right:0;top:100%;width:200px;z-index:1100}.profile-dropdown-item{align-items:center;background:none;border:none;color:var(--text-primary);cursor:pointer;display:flex;font-size:.9em;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);text-decoration:none;transition:all .2s ease;width:100%}.profile-dropdown-item:hover{background-color:#ffffff1a;color:var(--color-vibrant-green)}.profile-dropdown-item.logout{color:#e74c3c}.profile-dropdown-item.logout:hover{background-color:#e74c3c1a;color:#e74c3c}.profile-dropdown-divider{background-color:#ffffff1a;height:1px;margin:var(--spacing-xs) 0}.profile-dropdown-arrow{font-size:.7em;transition:transform .2s ease}.user-profile-compact.open .profile-dropdown-arrow{transform:rotate(180deg)}.login-modal-overlay{align-items:center;background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:230px;z-index:1000}.login-modal{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--border-radius-default);box-shadow:0 8px 32px #0000004d;margin:20px;max-width:400px;padding:var(--spacing-lg);position:relative;width:90%}.login-modal-close{align-items:center;background:none;border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;font-size:1.2rem;height:32px;justify-content:center;padding:var(--spacing-xs);position:absolute;right:var(--spacing-md);top:var(--spacing-md);transition:all .2s ease;width:32px}.login-modal-close:hover{background:#ffffff1a;color:var(--text-primary)}.login-modal-header{margin-bottom:var(--spacing-lg)}.login-modal-header h2{color:var(--text-primary);font-family:Montserrat,sans-serif;font-size:1.5rem;font-weight:600;margin:0;text-align:center}.login-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-group{position:relative}.form-group input{background:var(--bg-input);border-radius:var(--border-radius-default);box-sizing:border-box;font-size:1rem;padding:12px 16px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.form-group input::placeholder{color:var(--text-secondary)}.form-group input:focus{border-color:var(--action-primary);box-shadow:0 0 0 2px #3498db33;outline:none}.password-group{position:relative}.password-toggle{align-items:center;background:none;border:none;border-radius:var(--border-radius-default);color:var(--text-secondary);cursor:pointer;display:flex;height:24px;justify-content:center;padding:4px;position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px}.password-toggle:hover{background:#ffffff1a;color:var(--text-primary)}.login-submit{background:var(--action-primary);border:none;border-radius:var(--border-radius-default);color:var(--color-white);cursor:pointer;font-size:1rem;font-weight:600;margin-top:var(--spacing-sm);padding:12px 16px;transition:all .2s ease}.login-submit:hover:not(:disabled){background:var(--action-hover);transform:translateY(-1px)}.login-submit:disabled{background:var(--action-disabled);cursor:not-allowed;opacity:.7;transform:none}.login-switch{color:var(--text-secondary);font-size:.9rem;margin-top:var(--spacing-md);text-align:center}.login-switch button{background:none;border:none;color:var(--action-primary);cursor:pointer;font-size:inherit;padding:0;text-decoration:underline}.login-switch button:hover{color:var(--action-hover)}.login-error{background:var(--bg-error-overlay);border:1px solid var(--status-error);border-radius:var(--border-radius-default);color:var(--status-error);font-size:.9rem;margin-bottom:var(--spacing-md);padding:var(--spacing-sm);text-align:center}@media (max-width:480px){.login-modal{margin:10px;padding:var(--spacing-md);width:95%}.login-modal-header h2{font-size:1.3rem}}.rules-page{background:var(--bg-primary);max-width:100vw!important;min-height:calc(100vh - 60px);overflow-x:hidden!important;padding:0!important}.rules-container,.rules-page{margin:0!important;width:100%!important}.rules-container{color:var(--text-primary);max-width:100%!important;padding:16px!important}.rules-container h1{font-size:28px;margin:0 0 16px;text-align:center;word-break:break-word}.game-rules-section{background:var(--bg-card);border:1px solid #ffffff1a;border-radius:8px;margin-bottom:16px;padding:16px}.game-rules-section h2{border-bottom:2px solid var(--color-vibrant-green);color:var(--color-vibrant-green);font-size:24px;margin-bottom:16px;padding-bottom:8px}.rules-content h3{color:var(--color-white);font-size:20px;margin:16px 0 12px}.rules-content p{color:var(--text-secondary);line-height:1.6;margin-bottom:12px;word-break:break-word}.rules-content ul{margin:0 0 12px;padding-left:24px}.rules-content li{margin-bottom:8px;word-break:break-word}.rules-content{overflow-wrap:break-word}.coming-soon{background:#ffffff0d;border:1px dashed #fff3;border-radius:var(--border-radius-lg);padding:var(--spacing-xl);text-align:center}.coming-soon h2{color:var(--color-gold-yellow);margin-bottom:var(--spacing-md)}.coming-soon p{color:var(--text-secondary)}.page-content{box-sizing:border-box;max-width:100%;overflow-x:hidden;padding:1rem}.game-rules-section{overflow-wrap:break-word}.game-rules-section,.rules-content{max-width:100%;width:100%}.rules-content ul{margin:0;padding-left:1.5rem}.rules-content li{word-wrap:break-word;margin-bottom:.5rem}@media (min-width:769px){.rules-page{padding:32px}.rules-container{margin:0 auto;max-width:800px;padding:0}.rules-container h1{font-size:40px;margin-bottom:32px}.game-rules-section{margin-bottom:32px;padding:32px}}*{box-sizing:border-box!important}body,html{max-width:100vw!important;overflow-x:hidden!important}.app-main-content,.page-container{margin:0!important;max-width:100vw!important;overflow-x:hidden!important;padding:0!important;width:100%!important}.page-content{margin:0!important;max-width:100%!important;padding:16px!important;width:100%!important}.page-content h1{font-size:28px;margin:0 0 16px;word-break:break-word}.settings-sections{width:100%}.settings-section{background:var(--bg-card);border:1px solid #ffffff1a;border-radius:8px;margin-bottom:16px;padding:16px;width:100%}.settings-section h2{font-size:20px;margin:0 0 16px}.setting-item{border-bottom:1px solid #ffffff0d;padding:12px 0;width:100%}.setting-item label{display:block;margin-bottom:8px;width:100%}.setting-item input[type=checkbox]{accent-color:var(--color-vibrant-green);height:18px;width:18px}.setting-item select{background:var(--bg-input);border:1px solid #fff3;border-radius:4px;color:var(--text-primary);max-width:200px;padding:8px;width:100%}.volume-control{width:100%}.volume-control input[type=range]{margin:8px 0;width:100%}.volume-control span{color:var(--text-secondary);font-size:.9rem;min-width:40px}.settings-actions{border-top:1px solid #ffffff1a;margin-top:2rem;padding-top:2rem;text-align:center}.reset-button{background:var(--color-deep-red);border:none;border-radius:var(--border-radius-default);color:#fff;cursor:pointer;font-weight:500;padding:.75rem 1.5rem;transition:background-color .2s}.reset-button:hover{background:#c0392b}@media (min-width:769px){.page-container{padding:32px}.page-content{margin:0 auto;max-width:800px;padding:0}.page-content h1{font-size:40px;margin-bottom:32px}.settings-sections{grid-gap:32px;display:grid;gap:32px}.settings-section{margin-bottom:32px;padding:24px}.setting-item{align-items:center;display:flex;justify-content:space-between}.setting-item label{margin-bottom:0;width:auto}.volume-control{align-items:center;display:flex;gap:16px;max-width:250px}.volume-control input[type=range]{margin:0;width:150px}}.page-container{background:var(--bg-primary);min-height:calc(100vh - 60px);padding:var(--spacing-xl)}.page-content{color:var(--text-primary);margin:0 auto;max-width:1000px}.page-content h1{align-items:center;color:var(--color-vibrant-green);display:flex;font-size:2.5em;gap:var(--spacing-md);justify-content:center;margin-bottom:var(--spacing-xl);text-align:center}.placeholder-content{background:var(--bg-card);border:1px solid #ffffff1a;border-radius:var(--border-radius-lg);padding:var(--spacing-xl);text-align:center}.placeholder-content p{color:var(--text-secondary);font-size:1.2em;margin-bottom:var(--spacing-xl)}.feature-list{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:var(--spacing-xl)}.feature-item{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:var(--border-radius);display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-lg)}.feature-item svg{color:var(--color-gold-yellow);font-size:2em}.feature-item span{color:var(--text-primary);font-weight:600}@media (max-width:768px){.page-container{padding:var(--spacing-md)}.page-content h1{font-size:2em}.feature-list{grid-template-columns:1fr}}:root{--bg-primary:#283747;--bg-card:#364a5f;--text-primary:#f8f8f8;--text-secondary:#b0b0b0;--border-default:#4a5c70;--action-primary:#3498db;--action-hover:#2980b9;--color-white:#fff;--color-green:#27ae60;--color-red:#e74c3c;--color-yellow:#f1c40f;--color-purple:#9b59b6;--color-teal:#1abc9c;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--border-radius-default:8px;--border-radius-lg:12px}body{background-color:#283747;background-color:var(--bg-primary);color:#f8f8f8;color:var(--text-primary);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.user-profile{background:#0000;border-radius:8px;border-radius:var(--border-radius-default);margin:32px auto;margin:var(--spacing-xl) auto;max-width:700px;overflow-x:hidden;padding:0 16px;padding:0 var(--spacing-md)}.user-profile h2{color:#f8f8f8;color:var(--text-primary);font-size:2em;margin:32px 0 24px;margin:var(--spacing-xl) 0 var(--spacing-lg) 0;text-align:center}.profile-section{background:#364a5f;background:var(--bg-card);border:1px solid #4a5c70;border:1px solid var(--border-default);border-radius:8px;border-radius:var(--border-radius-default);box-shadow:0 2px 5px #0003;margin-bottom:16px;margin-bottom:var(--spacing-md);padding:16px 24px;padding:var(--spacing-md) var(--spacing-lg)}.profile-section:last-of-type{margin-bottom:0}.profile-section h3{color:#f8f8f8;color:var(--text-primary);font-size:1.2rem;gap:8px;gap:var(--spacing-sm);margin-top:0}.profile-header,.profile-section h3{align-items:center;display:flex;margin-bottom:16px;margin-bottom:var(--spacing-md)}.profile-header{border-bottom:1px solid #4a5c70;border-bottom:1px solid var(--border-default);flex-wrap:wrap;justify-content:center;padding-bottom:16px;padding-bottom:var(--spacing-md);padding-top:16px;padding-top:var(--spacing-md);text-align:center}.profile-avatar{border:3px solid #3498db;border:3px solid var(--action-primary);border-radius:50%;flex-shrink:0;height:80px;margin-bottom:8px;margin-bottom:var(--spacing-sm);margin-right:24px;margin-right:var(--spacing-lg);overflow:hidden;width:80px}@media (max-width:480px){.profile-avatar{margin:0 0 16px;margin-bottom:var(
      --spacing-md
    )}}.profile-info{flex-grow:1;text-align:left}@media (max-width:480px){.profile-info{text-align:center}}.profile-avatar .avatar-image{display:block;height:100%;object-fit:cover;width:100%}.profile-info h1{font-size:1.8em;margin:0 0 4px;margin:0 0 var(--spacing-xs) 0}.profile-info .user-type{margin-bottom:8px;margin-bottom:var(--spacing-sm)}.level-info,.profile-info .user-type{color:#b0b0b0;color:var(--text-secondary);font-size:.9em}.level-progress-bar{background-color:#0000004d;border-radius:5px;height:10px;margin-top:4px;margin-top:var(--spacing-xs);overflow:hidden;width:100%}.level-progress-fill{background-color:#27ae60;background-color:var(--color-green);border-radius:5px;height:100%;transition:width .5s ease-in-out}.profile-stats{display:flex;flex-wrap:wrap;gap:16px;gap:var(--spacing-md);justify-content:space-around;margin-top:16px;margin-top:var(--spacing-md)}.stat-card{align-items:center;background-color:initial;border-radius:8px;border-radius:var(--border-radius-default);box-sizing:border-box;display:flex;flex:1 1 calc(33.33% - 16px);flex:1 1 calc(33.33% - var(--spacing-md));flex-direction:column;justify-content:center;max-width:calc(33.33% - 16px);max-width:calc(33.33% - var(--spacing-md));min-width:100px;padding:8px;padding:var(--spacing-sm);text-align:center}.stat-card .svg-inline--fa{color:#3498db;color:var(--action-primary);font-size:2.2em;margin-bottom:4px;margin-bottom:var(--spacing-xs)}.stat-info h3{color:#f1c40f;color:var(--color-yellow);font-size:1.6em;font-weight:700;margin:0 0 4px;margin:0 0 var(--spacing-xs) 0}.stat-info p{color:#b0b0b0;color:var(--text-secondary);font-size:.8em;margin:0}@media (max-width:600px){.stat-card{flex:1 1 calc(50% - 16px);flex:1 1 calc(50% - var(--spacing-md));max-width:calc(50% - 16px);max-width:calc(50% - var(--spacing-md))}}@media (max-width:400px){.stat-card{flex:1 1 100%;max-width:100%}}.preferences-form{flex-direction:column;margin-top:16px;margin-top:var(--spacing-md)}.preferences-form,.preferences-form label{display:flex;gap:8px;gap:var(--spacing-sm)}.preferences-form label{align-items:center;color:#f8f8f8;color:var(--text-primary);cursor:pointer;font-size:1em}.preferences-form input[type=checkbox]{-webkit-appearance:none;appearance:none;background-color:#283747;background-color:var(--bg-primary);border:2px solid #4a5c70;border:2px solid var(--border-default);border-radius:4px;display:inline-block;flex-shrink:0;height:20px;position:relative;width:20px}.preferences-form input[type=checkbox]:checked{background-color:#3498db;background-color:var(--action-primary);border-color:#3498db;border-color:var(--action-primary)}.preferences-form input[type=checkbox]:checked:after{color:#fff;color:var(--color-white);content:"\2713";font-size:14px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.form-group label{font-weight:400}.form-group input{background:#283747;background:var(--bg-primary);border:1px solid #4a5c70;border:1px solid var(--border-default);color:#f8f8f8;color:var(--text-primary)}.profile-actions{display:flex;flex-wrap:wrap;gap:16px;gap:var(--spacing-md);justify-content:center;margin-top:24px;margin-top:var(--spacing-lg)}.btn-primary,.btn-secondary{border-radius:8px;border-radius:var(--border-radius-default);cursor:pointer;flex-basis:auto;flex-grow:1;font-size:1em;font-weight:600;min-width:140px;padding:8px 24px;padding:var(--spacing-sm) var(--spacing-lg);transition:all .2s ease}@media (max-width:480px){.btn-primary,.btn-secondary{flex-basis:100%;max-width:100%}}.btn-primary{background:#3498db;background:var(--action-primary);border:none;color:#fff;color:var(--color-white)}.btn-primary:hover{background:#2980b9;background:var(--action-hover)}.btn-secondary{background:#0000;border:1px solid #4a5c70;border:1px solid var(--border-default);color:#b0b0b0;color:var(--text-secondary)}.btn-secondary:hover{background:#ffffff1a;color:#f8f8f8;color:var(--text-primary)}.user-profile-container{background-color:#364a5f;background-color:var(--bg-card);border:1px solid #4a5c70;border:1px solid var(--border-default);border-radius:8px;border-radius:var(--border-radius-default);box-shadow:0 4px 8px #0000004d;color:#f8f8f8;color:var(--text-primary);margin:32px auto;margin:var(--spacing-xl) auto;max-width:600px;padding:32px;padding:var(--spacing-xl);text-align:center}.login-prompt .svg-inline--fa{color:#b0b0b0;color:var(--text-secondary);font-size:4em;margin-bottom:16px;margin-bottom:var(--spacing-md)}.login-prompt h2{color:#f8f8f8;color:var(--text-primary);font-size:1.8em;margin-bottom:8px;margin-bottom:var(--spacing-sm)}.login-prompt p{color:#b0b0b0;color:var(--text-secondary);font-size:1.1em}
/*# sourceMappingURL=main.ffa000c2.css.map*/