html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul, nav { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* ==|== Styles ===============================================================
   Author: Nathan Gordon
   ========================================================================== */

@font-face {
    font-family: 'delahaye-icons';
    src:url('../font/delahaye-icons.eot');
    src:url('../font/delahaye-icons.eot?#iefix') format('embedded-opentype'),
        url('../font/delahaye-icons.woff') format('woff'),
        url('../font/delahaye-icons.ttf') format('truetype'),
        url('../font/delahaye-icons.svg#delahaye-icons') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FuturaStd-Bold';
    src:url('../font/FuturaStd-Bold.eot');
    src:url('../font/FuturaStd-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/FuturaStd-Bold.otf') format('otf'),
        url('../font/FuturaStd-Bold.ttf') format('truetype'),
        url('../font/FuturaStd-Bold.svg#FuturaStd-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FuturaStd-Light';
    src:url('../font/FuturaStd-Light.eot');
    src:url('../font/FuturaStd-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/FuturaStd-Light.otf') format('otf'),
        url('../font/FuturaStd-Light.ttf') format('truetype'),
        url('../font/FuturaStd-Light.svg#FuturaStd-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'helvetica_lt_ultra_compressed';
    src: url('HelveticaLTStd-UltraComp.eot');
    src: url('HelveticaLTStd-UltraComp.eot?#iefix') format('embedded-opentype'),
         url('HelveticaLTStd-UltraComp.woff2') format('woff2'),
         url('HelveticaLTStd-UltraComp.woff') format('woff'),
         url('HelveticaLTStd-UltraComp.ttf') format('truetype'),
         url('HelveticaLTStd-UltraComp.svg#helvetica_lt_ultra_compressed') format('svg');
    font-weight: normal;
    font-style: normal;
}
.futura-bold { font-family: 'FuturaStd-Bold', sans-serif; }
.futura-light { font-family: 'FuturaStd-Light', sans-serif; }
.helvetica { font-family: 'helvetica_lt_ultra_compressed'; }
.icons { 
    font-family: 'delahaye-icons';
    speak: none; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    -webkit-font-smoothing: antialiased; 
}

/* ===// Common //================================================================ */

html { height: 100%; }
body { height: 100%; overflow: hidden; font-family: 'FuturaStd-Light', sans-serif; text-transform: uppercase; letter-spacing: 0.3em; font-size: 15px; line-height: 1.5em; color: #fff;}

* { user-select: none; -webkit-user-select: none; -moz-user-select: none; }

.console { position: absolute; bottom: 0; left: 0; background: #fff; color: #000; z-index: 1;}

.center-vert { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.arrow:after { content: ''; display: block; position: absolute; left: 100%; top: 50%; margin-top: -4px; border: 4px solid transparent; border-left: 6px solid #fff; }
.circle:after { content: ''; display: block; position: absolute; left: 50%; top: 50%; padding: 60px; border: 2px solid #fff; border-radius: 1000px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }

.step-load .go-prompt,
.game .replay-prompt { opacity: 0; visibility: hidden; }
.step-load,
.step-load .go-prompt,
.step-start,
.reveal,
.start,
.controls,
.game,
.gameover,
.about,
.replay-prompt,
.connection { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.logo-delahaye { position: absolute; top: 30px; left: 50%; margin-left: -40px; z-index: 1; width: 80px; }
.logo-delahaye img { width: 100%; display: block; }
.logo-delahaye .subtitle { letter-spacing: 1.4em; font-size: 7px; margin-top: 8px; color: #fff; text-align: center; padding-left: 0.8em; }

/* ===// Connection //============================================================ */

.connection { background: #e62043; z-index: 1; }
.connection .content { position: absolute; top: 33%; left: 0; right: 0; text-align: center; color: #fff; }
.connection .heading {  }
.connection .text {  }
.room-id { font-size: 45px; line-height: 2.5em;}

/* ===// Reveal //============================================================ */

.reveal { background: #e62043; }
.reveal .content { position: absolute; top: 50%; left: 0; right: 0; text-align: center; overflow: visible; }
.reveal .grab-prompt { position: absolute; top: 0; left: 50%; text-align: center; color: #fff; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); padding: 80px; font-size: 18px; letter-spacing: 0.2em; line-height: 1.5em;}
.reveal .heading { margin-top: 90px; }
.reveal .text {  }
.reveal .skip-prompt { position: absolute; bottom: 30px; left: 50%; font-size: 18px; width: 100px; margin-left: -50px; text-align: center; padding: 10px 0; }
.reveal .skip-prompt:after { content: ''; display: block; position: absolute; left: 100%; top: 50%; margin-top: -4px; border: 4px solid transparent; border-left: 6px solid #fff; }
@media only screen and (min-aspect-ratio: 13/9) {
    .reveal .skip-prompt { top: 50%; right: 30px; bottom: auto; left: auto; margin: -9px 0 0 0; }
}


/* ===// Instructions //===================================================== */

.start { background: #e62043; }
.step-start { background: #e62043; }
.step-start .start-prompt,
.step-load .go-prompt .button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); font-size: 18px; letter-spacing: 0.15em; }
.step-load { background: #e62043; text-align: center;}
.step-load .loading {  }
.step-load .text { position: absolute; top: 80%; left: 0; right: 0; }

/* ===// Game //============================================================= */

.game {  }
.controls { background: #e62043; }
.controls .wheel { position: absolute; display: block; width: 35%; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
.controls .prompts { position: absolute; top: 50%; width: 35%; height: 200px; transform: translateY(-50%); -webkit-transform: translateY(-50%); text-align: center; line-height: 200px; font-size: 50px; color: #e62043; }
.controls .prompts .icons { position: relative; letter-spacing: 0;}
.controls .prompts .label { position: absolute; bottom: 0; left: 0; right: 0; line-height: 1em; font-size: 20px; text-transform: uppercase; color: #fff; }
.controls .prompts:before { content: ''; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); padding: 40px; background: #fff; border-radius: 1000px; box-shadow: 0px 0px 0px 3px #e62043, 0px 0px 0px 5px #fff;}
.controls .prompts.active { color: #fff; }
.controls .prompts.active:before { box-shadow: inset 0px 3px 10px 0px rgba(0,0,0,0.5), 0px 0px 0px 3px #e62043, 0px 0px 0px 5px #c61937; background: #c61937; }
.controls .prompts.active .label {  }
.controls .slow-prompt { left: 0; }
.controls .fast-prompt { right: 0; }

.replay-prompt { background: #e62043; }
.replay-prompt .button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); font-size: 18px; letter-spacing: 0.15em; text-align: center; }

/* ===// Gameover //============================================================= */

.gameover { background: #e62043; }

/* ===// About //============================================================= */

.about { background: #e62043; }