/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html,button,input,select,textarea {
color:#222;
}
html {
font-size:1em;
line-height:1.4;
}
/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
 * A better looking default horizontal rule
 */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio,canvas,img,video {
vertical-align:middle;
}
/*
 * Remove default fieldset styles.
 */
fieldset {
border:0;
margin:0;
padding:0;
}
/*
 * Allow only vertical resizing of textareas.
 */
textarea {
resize:vertical;
}

/* ==========================================================================
   Main styles
   ========================================================================== */
   
@font-face {
    font-family: 'robotobold_condensed';
    src: url('fonts/roboto-boldcondensed-webfont.woff2') format('woff2'),
         url('fonts/roboto-boldcondensed-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select: none;-webkit-touch-callout:none; background:#BDD2D9;}

/*-- Percent Loader -- */
#mainLoader{position:absolute;z-index:5; display:none; font-size:25px; line-height:25px; color:#3691D6; text-align:center; width:100%; font-family:'robotobold_condensed';}

/*-- Content Wrapper -- */
#mainHolder{position:absolute; width:100%;height:100%;}

/*-- Browser Not Support -- */
#notSupportHolder{ width:90%; margin:5% auto; position:relative; color:#3691D6; text-align:center; font-size:25px; font-family:'robotobold_condensed'; display:none;}
.notSupport{margin-top:200px;}

/*-- Mobile Rotate Instruction -- */
#rotateHolder{position:absolute;width:100%;height:100%;background-color:#3691D6;z-index:1000; display:none;}
.mobileRotate{width:200px;height:auto;position:absolute;text-align:center;}
.rotateImg{-webkit-animation:spin .5s linear infinite; -moz-animation:spin .5s linear infinite; animation:spin .5s linear infinite; margin-bottom:10px;}
.rotateDesc{color:#fff; font-size:15px; line-height:15px; font-family:'robotobold_condensed';}

@-moz-keyframes spin { 50% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(0deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotate(90deg); } 100% { -webkit-transform: rotate(0deg); } }
@keyframes spin { 50% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }

/*-- Canvas Wrapper -- */
#canvasHolder{ display:none; width:100%; max-width:1280px; height:100%; margin:auto; position:relative;}
canvas{ position:fixed;}

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}



/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Image replacement
 */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}

.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
display: none !important;
visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,.clearfix:after{
content: " "; /* 1 */
display: table; /* 2 */
}

.clearfix:after{
clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix{
*zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print{
* {
background:transparent!important;
color:#000!important;
box-shadow:none!important;
text-shadow:none!important;
}

a,a:visited {
text-decoration:underline;
}

a[href]:after {
content:" (" attr(href) ")";
}

abbr[title]:after {
content:" (" attr(title) ")";
}

.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {
content:"";
}

pre,blockquote {
border:1px solid #999;
page-break-inside:avoid;
}

thead {
display:table-header-group;
}

tr,img {
page-break-inside:avoid;
}

img {
max-width:100%!important;
}

@page {
margin:.5cm;
}

p,h2,h3 {
orphans:3;
widows:3;
}

h2,h3 {
page-break-after:avoid;
}
}


/* HUBIQ LIFE mobile controls */
#mobileControls{display:none;position:fixed;inset:0;z-index:50;pointer-events:none;font-family:Arial,sans-serif;}
#mobileControls button{pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;border:1px solid rgba(117,223,200,.72);background:rgba(6,29,35,.78);color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.28);backdrop-filter:blur(4px);}
.mobile-dpad{position:absolute;left:18px;bottom:20px;width:156px;height:156px;}
.m-btn{position:absolute;width:52px;height:52px;border-radius:14px;font-size:22px;}
.m-up{left:52px;top:0}.m-left{left:0;top:52px}.m-down{left:52px;top:104px}.m-right{left:104px;top:52px}
.m-action{position:absolute;right:22px;bottom:28px;width:104px;height:104px;border-radius:52px;font-size:27px;font-weight:800;}
.m-action span{font-size:10px;letter-spacing:1px;font-weight:700;}
@media (pointer:coarse), (max-width:800px){#mobileControls{display:block;}#rotateHolder{display:none!important;}#canvasHolder{width:100%;height:100%;}}

/* HUBIQ LIFE home hero video */
#canvasHolder{position:relative;overflow:hidden;background:#06171d;}
.hubiq-home-video{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(1.08) contrast(1.04) brightness(.72);pointer-events:none;}
#gameCanvas{position:relative;z-index:1;background:transparent;}

/* HUBIQ LIFE global player identity + leaderboard */
#hubiqIdentityOverlay{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;background:rgba(3,13,18,.82);backdrop-filter:blur(8px);font-family:Arial,sans-serif;padding:20px;box-sizing:border-box}
.hubiq-identity-card{width:min(460px,92vw);box-sizing:border-box;padding:34px;border:1px solid rgba(97,226,207,.45);border-radius:24px;background:linear-gradient(145deg,rgba(9,35,42,.98),rgba(4,20,27,.98));box-shadow:0 24px 80px rgba(0,0,0,.45);color:#fff;text-align:center}
.hubiq-identity-card .hubiq-kicker{font-size:12px;font-weight:800;letter-spacing:2px;color:#65e2cf;margin-bottom:10px}
.hubiq-identity-card h2{margin:0 0 10px;font-size:30px}
.hubiq-identity-card p{margin:0 auto 22px;color:#a9c6c3;font-size:14px;line-height:1.5;max-width:360px}
.hubiq-identity-card input{width:100%;box-sizing:border-box;padding:15px 16px;border-radius:12px;border:1px solid #2e6f69;background:#071a20;color:#fff;outline:none;font-size:17px;text-align:center;margin-bottom:12px}
.hubiq-identity-card input:focus{border-color:#65e2cf;box-shadow:0 0 0 3px rgba(101,226,207,.12)}
.hubiq-identity-card button{width:100%;padding:15px;border:0;border-radius:12px;background:#0d7c70;color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.hubiq-identity-card button:hover{filter:brightness(1.1)}
.hubiq-identity-note{margin-top:16px;color:#6f9792;font-size:11px;line-height:1.4}
@media(max-width:700px){.hubiq-identity-card{padding:26px 20px}.hubiq-identity-card h2{font-size:25px}}