/*! normalize.css v2.1.2 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}



html, body { 
    height: 100%; 
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body { 
    box-sizing: border-box;
    overflow-y:hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

#main {
    padding: 3px;
    height: 100%;
    box-sizing: border-box;
}

#board-view {
    margin: 0 auto;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
}

#board-view canvas {
    position: fixed;
}

a.button {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    box-sizing: border-box;
    color: black;
    
    display: block;
    font-size: 32pt;
    font-family: Arial;
    
    position: fixed;
    
    text-decoration: none;
    text-align: center;

    width: 56px;
    height: 56px;

    outline: none;
    user-select: none;
    -webkit-user-select: none;
}

a.button.utf {
    line-height: 52px;
    font-family: EmojiSymbols;
}

a.button.hamburger {
    line-height: 54px;
}

.is-local a.button.hamburger {
    line-height: 56px;
    padding-top: 1px;
}


a.button.buy-menu.open {
    background-color: rgba(0, 0, 0, 0.65);
}

a.button.buy-letter {
    padding-top: 7px;
    font-size: 36px;
}

a.button:active {
    background-color: rgba(0, 0, 0, 0.8);
    user-select: none;
    -webkit-user-select: none;
}

.button.tr1 { top: 32px; right: 24px; }
.button.tr2 { top: 96px; right: 24px; }
.button.tr3 { top: 160px; right: 24px; }
.button.tr4 { top: 224px; right: 24px; }
.button.tr5 { top: 288px; right: 24px; }

.button.br1 { bottom: 32px; right: 24px; }
.button.br2 { bottom: 96px; right: 24px; }
.button.br3 { bottom: 160px; right: 24px; }
.button.br4 { bottom: 224px; right: 24px; }

.button.c2 { right: 88px !important; }
.button.c3 { right: 152px !important; }
.button.c4 { right: 216px !important; }

@media (hover: hover) and (pointer: fine) {
    a.button[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        top: 50%;
        right: calc(100% + 12px);
        transform: translateY(-50%);

        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
        font-family: Arial, sans-serif;
        font-size: 13px;
        line-height: normal;
        white-space: nowrap;
        padding: 6px 10px;
        border-radius: 4px;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: 10;
    }

    a.button[data-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;
        transition-delay: 0.4s;
    }
}

#player-bar {
    bottom: 54px;
    display: flex;
    margin: 0 auto;
    position: relative;
    padding: 4px;
    pointer-events:none;
}

#player-tiles {
    background-color: rgba(0,0,0,0.3);
    border-radius: 4px;
    margin: auto;
    padding: 2px 2px;
    pointer-events:auto;
}

#player-tiles .tile {
    background-color: #fd4;
    border-radius: 2px;
    box-sizing: border-box;
    display: inline-block;
    font-family: Arial;
    font-size: 24px;
    width: 40px;
    height: 40px;
    padding-top: 4px;
    position: relative;
    margin: 2px;
    text-align: center;
    touch-action:none;
    user-select: none;
    -webkit-user-select: none;
}

#player-tiles .tile.sortable-fallback {
    background-color: #4df;
    border: none !important;
}

#player-tiles .tile.sortable-ghost {
    opacity: 0.6;
}

body.lang-en #player-tiles .tile {
    font-family: Zerofour;
    padding-top: 8px;
}


#player-tiles .tile > .tile-value {
    color: gray;
    font-family: arial;
    font-size: 8pt;
    position: absolute;

    left: 1px;
    bottom: 1px;
}

#player-tiles .tile.selected {
    border: 2px dashed red;
    width: 44px;
    height: 44px;
    margin:0;
}

#version {
    color: gray;
    font-size: 8pt;
    position: absolute;
    top: 12px;
    right: 24px;
}

#version a { color: gray; }

#winner {
    color: gray;
    font-size: 8pt;
    position: absolute;
    top: 12px;
    left: 20px;
}

#loading {
    font-family: Zerofour;
    font-size: 40px;
    position: relative;
    top: -60%;
    text-align: center;
    color: gray;
}


.is-local #winner,
.is-local #version {
    top: 2px;
}

@media only screen and (max-width:380px) {

    #player-bar {
        padding: 4px 0px;
    }
}


h1,h2,h3 { margin: 0; }

.dialog {
    border: 2px solid gray;
    box-sizing: border-box;
    padding: 16px;
    position: absolute;
    

    font-family: Zerofour;
    font-size: 16px;
    background-color: rgba(34,34,34, 0.9);
    color: white;
    -webkit-font-smoothing: none;
}

.dialog a.close {
    color: white;
    text-decoration: none;
    position: absolute;
    top:12px;
    right:12px;
    font-size: 2em;
    font-weight: bold;
}

.dialog h2 {
    color: #fd4;
    font-size: 32px;
    -webkit-font-smoothing: none;
    font-weight: normal;
    margin-bottom: 8px;
    text-align: center;
}

.dialog .section {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid gray;
}

.dialog .section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom:-4px;
}

.dialog input[type=button],
.dialog input[type=submit] {
    background-color: rgba(34,34,34, 0.0);
    border: 2px solid #fd4;
    color: #fd4;
    padding: 4px 8px;
    border-radius: 0;
    text-align: center;
    text-transform:uppercase;
} 

/* leader board / start dialog */
.dialog.leaders {
    width: 95%;
    max-width: 400px;
}

.dialog.leaders input[type=button], 
.dialog.leaders input[type=submit] {
    padding-top: 6px;
    position: relative;
    top: 2px;
}

.dialog.leaders a.chat-button {
    font-family: Zerofour;
    font-size: 16px;
    -webkit-font-smoothing: none;
}

.dialog .tabs a.chat-button {
    float:right;
    padding: 2px 6px;
    margin-top: -3px;
}

.dialog a {
    color: #fd4;
    text-decoration: underline;
}

.dialog a:active {
    color:white;
}

.score-table.timed {
    margin-left: -8px;
}

.score-table {
    width: 100%;
    max-width: 300px;
}

.score-table td {
    padding: 2px 6px;
}

.score-table td.numeric {
    text-align:right;
}

.score-table td.dem {
    color: gray;
}

.score-table tr.me {
    color: #fd4;
}

/* name change in start dialog */
.name-form {
    text-align:center;
}

.name-form input {
    font-size: 24px;
    outline: none;
    padding: 4px 8px;
    border-radius: 0;
    -webkit-font-smoothing: none;
    box-sizing: border-box;
}

.name-form input[type=text] {
    background-color: #444;
    border: none;
    border-bottom: 2px solid gray;
    color:white;
    width: 70%;
}

.dialog .plain {
    color:gray;
    font-family: arial;
    font-size:8pt;
    padding-right: 6px;
    -webkit-font-smoothing: subpixel-antialiased;;
}

.dialog .plain em {
    color:white;
    font-style: normal;
}

.tabs {
    border-bottom: 2px solid gray;
    margin-bottom: 8px;
    padding-left: 8px;
}

.tabs > span {
    border: 2px solid gray;
    display: inline-block;
    cursor: pointer;
    padding: 3px 6px;
    margin-bottom: -2px;
}

.tabs > span.selected {
    color: #4df;
}

/* buy item dialog */
.dialog.buy {
    width:95%;
    max-width: 300px;
}

.dialog a.link-button {
    background-color: rgba(34,34,34, 0.0);
    border: 2px solid #fd4;
    color: #fd4;
    padding: 4px 8px;
    text-decoration: none;
    
}

.dialog .sharing a.twitter-share-button {
    position: relative;
    height: 20px;
    box-sizing: border-box;
    padding: 1px 8px 1px 6px;
    background-color: #1b95e0;
    color: #fff;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    text-decoration:none;

    vertical-align:super;
    padding: 3.5px 8px;
    outline:none; 
}
.dialog .sharing a.twitter-share-button i {
    display: inline-block;
    vertical-align:middle;
    margin-left: -4px;
    padding-right: 4px;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E)
}


.dialog a.link-button:active {
    color:white;
}

.dialog.credits .header a.link-button,
.dialog.buy .header a.link-button {
    float:right;
}

.dialog .section .right {
    float:right;
    text-align: right;
    margin-top: -8px;
}

.dialog .section .left,
.dialog.credits .balance,
.dialog.buy .balance {
    float:left;
    margin-top: -8px;
}

.dialog label,
.dialog label {
    color:gray;
}

.dialog .header .cr {
    vertical-align: middle;
    font-size: 32px;
}

.dialog.buy .section.desc {
    font-size: 24px;
    text-align: center;
}

.dialog.buy .section.desc em {
    color: #fd4;
    font-style: normal;
}

.dialog form.full-width input,
.dialog.buy form input {
    display:block;
    margin-top: 8px;
    font-size: 24px;
    text-align: center;
    width: 100%;
    outline:none;
}

.dialog form.full-width input[type=submit],
.dialog.buy form input.buy {
    color: #4df;
}

/* buy credits dialog */
.dialog.credits {
    max-width: 270px;
}

.dialog.credits .section.items > div {
    margin-top: 16px;
}

.dialog.credits .section.items > div > span {
    float: left;
    font-size: 24px;
    padding-right: 16px;
}

.dialog.credits .section.items > div > a {
    float: right;
    margin-top: -3px;
    min-width: 90px;
    text-align: center;
}

.dialog .tiles-list {
    margin-top: 8px;    
}

.dialog span.tile-select {
    background-color: #fd4;
    display: inline-block;
    color: black;
    box-sizing: border-box;
    font-size: 24px;
    margin-bottom: 8px;
    width: 30px;
    height: 30px;
    padding-top: 4px;
    border-radius: 2px;
    cursor: pointer;
}

.dialog span.tile-select.selected {
    background-color: #4df;
}
.dialog .alert {
    color: red;
}


/* game over dialog */
.dialog.game-start,
.dialog.game-over {
    width:95%;
    max-width:330px;
}

.dialog.game-over .cr {
    font-size: 40px;
}

.dialog .section:first-child {
    margin-top: -4px;
    margin-bottom: 12px;
}

.dialog .section:first-child h2 {
    text-transform: uppercase;
    margin:0;
}

.dialog .section:first-child a.close {
    margin-top: -6px;
}

.dialog.leaders .section.name-form {
    margin-bottom: 3px;
}

.dialog.leaders .fb-invite-button {
    color: #4df;
    width: 100%;
    outline:none;
    margin-bottom: 4px;
}

.is-local .dialog.leaders .name-form {
    border-bottom: none;
}

.is-local .dialog.leaders .chat-button,
.is-local .dialog.leaders .sharing,
.is-local .dialog .buy-more-link {
    display:none; 
}

/* invites */
.dialog.invite {
    width: 95%;
    max-width: 320px;
}

.dialog.invite em {
    font-style: normal;
    color: #fd4;
}

.dialog p:last-child {
    margin-bottom: 0;
}