/***** Clear Styles *****/
*{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;font-family:inherit;font-weight:inherit;vertical-align:baseline;box-sizing:border-box;}
ol,ul{list-style:none;}
a,a:hover,a:active{outline:none;text-decoration:none;color:inherit;}
html{overflow-y:scroll;}

/***** Design System Variables *****/
:root {
	/* Primary */
	--primary: #3366CC;
	--primary-hover: #224282;
	--primary-light: #E8F0FF;

	/* Neutrals */
	--background: #F8F9FA;
	--surface: #fff;
	--surface-hover: #F0F2F5;
	--border: #E3E8EE;
	--text-primary: #0A2540;
	--text-secondary: #425466;
	--text-tertiary: #8898AA;

	/* Semantic */
	--success: #00D924;
	--success-hover: #00B81F;
	--success-light: #E6F9EA;
	--error: #e2494a;
	--error-hover: #ae2727;
	--error-light: #FDE8EC;
	--warning: #FF9800;
	--warning-hover: #E68900;
	--warning-light: #FFF4E6;

	/* Spacing */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-xxl: 48px;
	--space-xxxl: 64px;

	/* Shadows - Stripe-inspired subtle shadows */
	--shadow-sm: 0 1px 3px rgba(10, 37, 64, 0.08);
	--shadow-md: 0 4px 12px rgba(10, 37, 64, 0.12);
	--shadow-lg: 0 8px 24px rgba(10, 37, 64, 0.16);

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;

	/* Sizes */
	--header-height: 60px;
}


/***** Custom Styles *****/

body{font-family:"Open Sans", sans-serif;font-size:16px;line-height:1.5;font-weight:400;background:var(--background);color:var(--text-primary);min-height:100vh;}
h1,h2,h3,h4,h5,h6{font-weight:600;}
hr{clear:both;margin-bottom:25px;border:0px;border-bottom:1px solid #ccc;height:0px;}
game{display:block;}

.content{width:1200px;max-width:100%;margin:0 auto;padding:25px 0px;}



/***** Card Styles *****/

.card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:25px;margin-bottom:25px;transition:0.2s ease-in-out;position:relative;}

.card-clickable{cursor:pointer;}
.card-clickable:hover{box-shadow:var(--shadow-md);border-color:var(--primary);}




/***** Header *****/

.header{position:fixed;top:0;left:0;width:100%;height:var(--header-height);background:var(--background);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);user-select:none;}
.header-spacer{height:var(--header-height);position:relative;z-index:-1;}
.header-hidden .header,
.header-hidden .header-spacer{display:none;}

.header-left{float:left;}
.header-left a{height:100%;padding:10px 10px;display:block;float:left;position:relative;}
.header-left a:first-of-type{padding:10px 24px;}
.header-left a:nth-of-type(2){top:2px;}
.header-left h1, .header-left h2, .header-left h3{line-height:40px;display:block;float:left;}
.header-left h1{font-size:24px;color:var(--primary);transition:0.2s ease-in-out;}
.header-left h1:hover{color:var(--primary-hover);}
.header-left h2{font-size:18px;color:#444;font-weight:400;transition:0.2s ease-in-out;}
.header-left h2:hover{color:#000;}
.header-left h3{font-size:18px;color:#444;font-weight:400;height:100%;padding:10px 10px;position:relative;top:2px;}

.header-right{float:right;margin-right:10px;}

.profile-badge{position:relative;width:60px;height:60px;}
.profile-badge.profile-badge-open .profile-badge-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.profile-badge-button:hover .profile-badge-icon{box-shadow:var(--shadow-sm);}
.profile-badge-button{width:100%;height:100%;cursor:pointer;}
.profile-badge-icon{width:40px;height:40px;position:relative;top:10px;left:10px;background:linear-gradient(135deg, var(--primary), #5588DD);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.1em;font-weight:600;color:white;transition:all 0.15s ease-in-out;}
.profile-badge-dropdown{position:absolute;top:100%;right:0;background:var(--background);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-md);min-width:150px;text-align:center;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out;z-index:100;display:flex;flex-direction:column;gap:var(--space-sm);box-shadow:var(--shadow-md);cursor:default;}
.profile-badge-name{color:var(--text-primary);font-weight:600;margin-bottom:var(--space-sm);white-space:nowrap;}



/***** Login Page *****/

.login{display:flex;align-items:center;justify-content:center;background:var(--surface);}

.login-container{background:var(--background);padding:var(--space-xl);border-radius:var(--radius-xl);width:100%;max-width:400px;box-shadow:var(--shadow-lg);border:1px solid var(--border);}
.login-container h1{text-align:center;margin-bottom:var(--space-lg);color:var(--text-primary);font-size:1.75em;}

.login-form .btn{width:100%;padding:12px;font-size:16px;}



/***** Profiles Page *****/

.profiles{display:flex;align-items:center;justify-content:center;}

.profiles-container{text-align:center;padding:var(--space-xxl);padding-top:0px;}
.profiles-container h1{margin-bottom:var(--space-xxl);font-size:2em;color:var(--text-primary);}

.profiles-list{display:flex;flex-wrap:wrap;gap:var(--space-lg);justify-content:center;}

.card.card-profile{display:flex;flex-direction:column;align-items:center;background:var(--background);color:var(--text-primary);}
.card.card-profile .profile-avatar{width:100px;height:100px;background:linear-gradient(135deg, var(--primary), #5588DD);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:2.5em;font-weight:600;color:white;margin-bottom:var(--space-md);}
.card.card-profile .profile-name{font-size:1em;font-weight:600;color:var(--text-primary);}
.card.card-profile .profile-edit-btn{position:absolute;bottom:-50px;left:50%;transform:translateX(-50%);background:transparent;border:none;color:var(--text-tertiary);cursor:pointer;font-size:0.85em;padding:var(--space-sm) var(--space-md);opacity:0;transition:opacity 0.2s ease-in-out, color 0.2s ease-in-out;white-space:nowrap;}
.card.card-profile:hover .profile-edit-btn{opacity:1;}
.card.card-profile .profile-edit-btn:hover{color:var(--primary);}

.card.card-profile.add-profile .profile-avatar{background:var(--surface);border:2px dashed var(--border);font-size:3em;font-weight:300;color:var(--text-tertiary);}
.card.card-profile.add-profile:hover .profile-avatar{border-color:var(--primary);color:var(--primary);}



/***** Dashboard *****/

.dashboard h2{margin-bottom:var(--space-lg);color:var(--text-primary);}

.games-list{}
.games-list:after{content:"";display:block;clear:both;}
.games-list .card.card-game:nth-of-type(6n){margin-right:0px;}

.card.card-game{width:180px;margin-right:24px;float:left;}
.card-game .game-icon{width:80px;height:80px;margin:0px auto 16px;background:linear-gradient(135deg, var(--primary), #5588DD);border-radius:12px;font-size:32px;font-weight:600;color:white;  display:flex;align-items:center;justify-content:center;}
.card-game .game-name{font-weight:600;text-align:center;color:var(--text-primary);}



/***** 404 Page *****/

.e404-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:var(--space-lg);background:var(--surface);}
.e404-container h1{font-size:8em;font-weight:600;color:var(--primary);margin-bottom:var(--space-md);}
.e404-container p{font-size:1.25em;color:var(--text-secondary);margin-bottom:var(--space-lg);}


/***** Games *****/

.game-page .header{display:none;}
.game-page .header-spacer{display:none;}

.back-button{position:fixed;top:0;left:0;z-index:99999;font-size:22px;color:var(--text-secondary);text-decoration:none;width:50px;height:50px;line-height:50px;text-align:center;border-bottom-right-radius:8px;transition:0.15s ease-in-out;cursor:pointer;}
.back-button:hover{color:var(--text-primary);background:rgba(0,0,0,0.06);}




/***** Button Framework *****/

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:12px 24px;border:none;border-radius:var(--radius-md);cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:all 0.15s ease-in-out;background:var(--primary);color:#fff;box-shadow:var(--shadow-sm);min-width:100px;user-select:none;}
.btn:hover{background:var(--primary-hover);}
.btn:active{transform:scale(0.98);}
.btn:disabled,.btn.disabled{opacity:0.5;cursor:not-allowed;pointer-events:none;}

.btn.btn-secondary{background:var(--surface);color:var(--text-primary);border:1px solid var(--border);}
.btn.btn-secondary:hover{background:var(--surface-hover);}

.btn.btn-danger{background:var(--error);}
.btn.btn-danger:hover{background:var(--error-hover);}

.btn.btn-half{width:calc(50% - 10px);}

.btn-xs{padding:4px 8px;font-size:12px;border-radius:var(--radius-sm);}
.btn-sm{padding:8px 16px;font-size:13px;}
.btn-lg{padding:16px 32px;font-size:16px;}
.btn-xl{padding:20px 40px;font-size:18px;border-radius:var(--radius-lg);}

.btn-group{display:inline-flex;}
.btn-group .btn{border-radius:0;}
.btn-group .btn:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md);}
.btn-group .btn:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0;}
.btn-group .btn:not(:last-child){border-right:1px solid rgba(255, 255, 255, 0.2);}


/***** Forms *****/

.form-group{margin-bottom:var(--space-md);}
.form-group label{display:block;margin-bottom:var(--space-xs);color:var(--text-secondary);font-size:14px;font-weight:600;}
.form-group input{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--background);color:var(--text-primary);font-size:16px;transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}
.form-group input::placeholder{color:var(--text-tertiary);}
.form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}

.error-message{background:var(--error-light);color:var(--error);padding:12px var(--space-md);border-radius:var(--radius-md);margin-bottom:var(--space-md);border:1px solid var(--error);font-size:14px;}



/***** Modal Styles *****/

.modal{z-index:11000;height:0px;width:0px;overflow:hidden;position:fixed;top:0px;left:0px;right:0px;bottom:0px;text-align:center;line-height:100vh;}
.modal .modal-window{z-index:11000;opacity:0;pointer-events:none;height:auto;width:300px;max-width:96%;display:inline-block;background:#f9f9f9;margin:auto;position:relative;vertical-align:middle;text-align:left;line-height:1.4em;box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);transition:0s opacity;transition-timing-function:cubic-bezier(0.445, 0.05, 0.55, 0.95);  border-radius:20px;}
.modal .modal-bg{z-index:10999;opacity:0;pointer-events:none;height:100%;width:100%;position:absolute;top:0px;background-color:#000;transition:0s opacity;transition-timing-function:cubic-bezier(0.445, 0.05, 0.55, 0.95);}

.modal .modal-exit{display:block;opacity:0.35;width:40px;height:40px;position:absolute;top:0px;right:0px;z-index:11001;cursor:pointer;transition:0.1s ease-in-out;}
.modal .modal-exit:before, .modal .modal-exit:after{position:absolute;content:'';display:block;height:12px;width:2px;background-color:#333;top:0px;right:0px;left:0px;bottom:0px;margin:auto;}
.modal .modal-exit:before {transform: rotate(45deg);}
.modal .modal-exit:after {transform: rotate(-45deg);}
.modal .modal-exit:hover{opacity:1;}

.modal .modal-content{padding:25px;color:#111;}
.modal h4{font-weight:600;font-size:24px;margin-bottom:15px;}
.modal p{font-size:16px;margin-bottom:15px;}
.modal input[type="text"]{width:100%;background:#fff;margin-bottom:15px;}
.modal .btns{text-align:right;padding:0px;margin-bottom:-15px;}
.modal .btns .btn{margin-bottom:0px;margin-left:15px;}
.modal .btns{margin-bottom:0px;}
.modal .btns .btn:first-of-type{margin-left:0px;}

.modal.modal-active{height:100%;width:100%;}
.modal.modal-active .modal-bg{opacity:.5;transition:.1s opacity;pointer-events:all;}
.modal.modal-active .modal-window{opacity:1;transition:.5s opacity;pointer-events:all;}

.modal.modal-no-close-bg .modal-bg{cursor:default;}
.modal.modal-no-close-x .modal-exit{display:none;pointer-events:none;}

.modal-auto-load{display:none;height:0px;width:0px;overflow:hidden;}

@media only screen and (min-width: 0px) and (max-width: 959px) {
	.modal .modal-bg{cursor:pointer;}
}

.modal-icon{font-size:28px;margin-bottom:10px;border-radius:100%;height:44px;width:44px;display:inline-block;box-sizing:content-box;text-align:center;}
.modal-icon.modal-icon-danger{color:var(--error);background:#ffcccc;border:6px solid #ffe7e7;}
.modal-icon.modal-icon-warning{color:var(--warning);}
.modal-icon i{position:relative;top:8px;}

.modal.modal-exit-verify .modal-window{text-align:center;width:370px;}
.modal.modal-exit-verify .btns{padding-top:10px;}




/***** Notice Styles *****/

.notices{}
.notice{width:100%;padding:8px 10px;margin-bottom:10px;border-radius:5px;box-shadow:0 6px 12px 0 rgba(50,50,93,.1),0 3px 6px 0 rgba(0,0,0,.07);}
.notice.notice-error{border:1px solid #ff0000;background:#ffa0a0;}
.notice.notice-success{border:1px solid #70964e;background:#d8f5c4;}
.notice.notice-warning{border:1px solid #cec460;background:#f8f4c4;}
.notice span:first-of-type{font-weight:bold;}
.notice:last-of-type{margin-bottom:25px;}
.notice a{color:#2980b9;border-bottom:1px dashed #2980b9;}
.notice a:hover{color:#3498db;border-bottom:1px dotted #3498db;}
.notice a.button{color:#fff;}
.notice a.button:hover{color:#fff;}

.notices-quick{z-index:10000;position:fixed;top:16px;left:0px;right:0px;text-align:center;height:0px;width:300px;margin:0px auto;}
.notices-quick .notice{padding:5px 15px;box-sizing:border-box;margin:0px auto;font-size:16px;min-width:125px;width:auto;display:inline-block;position:relative;color:#fff;font-weight:bold;text-align:center;border-radius:3px;box-shadow:0px 0px 8px rgba(0,0,0,0.15);  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}
.notices-quick .notice.notice-error{border:1px solid #c0392b;background:#e74c3c;}
.notices-quick .notice.notice-success{border:1px solid #27ae60;background:#2ecc71;}
.notices-quick .notice.notice-warning{border:1px solid #f1c40f;background:#f1c40f;}
.notices-quick .notice.notice-grey{border:1px solid #888;background:#999;}
.notices-quick .notice span:first-of-type{font-weight:bold;display:none;}
.notices-quick .notice a{border-bottom:1px dotted rgba(255,255,255,0.6);color:#fff;}
.notices-quick .notice a:hover{opacity:0.85;}
.notices-quick .notice.notice-hidden{top:-200px;}

.notices-quick .notice{transition:0.3s ease-in-out;opacity:0;transform:translateY(-100px);animation-name:notice;animation-duration:4s;}
@keyframes notice{
    0%   {opacity:0;transform:translateY(-100px);}
	8%   {opacity:1;transform:translateY(0px);}
	90%  {opacity:1;transform:translateY(0px);}
    100% {opacity:0;transform:translateY(-100px);}
}



/***** Selector Dropdown *****/

.selector{position:relative;user-select:none;}
.selector-label{display:block;width:200px;padding:10px 36px 10px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--background);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
.selector-label:hover{border-color:var(--text-tertiary);}
.selector-label::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%) rotate(45deg);width:7px;height:7px;border-right:2px solid var(--text-tertiary);border-bottom:2px solid var(--text-tertiary);transition:transform 0.2s ease-in-out;pointer-events:none;}
.selector-label i{margin-right:8px;font-size:16px;width:16px;text-align:center;display:inline-block;vertical-align:middle;position:relative;top:-1px;}
.selector.selector-open .selector-label{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
.selector.selector-open .selector-label::after{transform:translateY(-25%) rotate(-135deg);}

.selector-options{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--background);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:200;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 0.15s ease-in-out, transform 0.15s ease-in-out, visibility 0.15s ease-in-out;overflow:hidden;}
.selector.selector-open .selector-options{opacity:1;visibility:visible;transform:translateY(0);}

.selector-option{display:block;width:100%;padding:10px 16px;cursor:pointer;color:var(--text-primary);font-size:14px;transition:background 0.1s ease-in-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
.selector-option:hover{background:var(--surface);}
.selector-option.selected{background:var(--primary-light);color:var(--primary);font-weight:600;}
.selector-option i{margin-right:8px;font-size:16px;width:16px;text-align:center;display:inline-block;vertical-align:middle;position:relative;top:-1px;}



/***** General/Extra/Specific Styles *****/

.empty{color:var(--text-tertiary);text-align:center;padding:var(--space-xxl);}