
body {
    margin : 0;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;
    -webkit-user-select : none;
}

#game {
    position : absolute;
    left : 0;
    top : 0;
    font-size : 40px;
    width : 8em;
    height : 12em;
    background-color : rgb(30,30,30);
    font-family : Geo;
    color : rgb(200,200,100);
}

.jewel-size {
    font-size : 40px;
}

#jewel-proto {
    position : absolute;
    width : 1em;
    height : 1em;
    left : -1000px;
}


#game .screen {
    position : absolute;
    width : 100%;
    height : 100%;
    display : none;
    z-index : 10;
}

#game .screen.active {
    display : block;
}


#splash-screen {
    text-align : center;
    padding-top : 2.5em;
}
#splash-screen .continue {
    cursor : pointer;
    font-size : 0.75em;
    display : none;
}
.logo {
    font-family : Slackey;
    margin : 0;
    text-align : center;
    color : rgb(70,120,20);
    font-size : 1.0em;
    line-height : 0.9em;
    text-shadow : 0.03em  0.03em  0.03em rgb(255,255,0),
                 -0.03em -0.03em  0.03em rgb(255,255,0),
                  0.10em  0.15em  0.15em rgb(0,0,0);
}

.no-textshadow .logo {
    filter : dropshadow(color=#000000,offX=3,offY=3);
}


/* Style głównego menu */
#main-menu {
    padding-top : 1em;
}

ul.menu {
    text-align : center;
    margin : 0;
    padding : 0;
    list-style : none;
}

ul.menu li {
    margin : 0.8em 0;
}

ul.menu li button {
    font-family : Slackey, sans-serif;
    font-size : 0.6em;
    color : rgb(100,120,0);
    width : 10em;
    height : 1.5em;
    background : rgb(10,20,0);
    border : 0.1em solid rgb(255,255,0);
    border-radius : 0.5em;
    -webkit-box-shadow : 0.2em 0.2em 0.3em rgb(0,0,0);
    -moz-box-shadow : 0.2em 0.2em 0.3em rgb(0,0,0);
    box-shadow : 0.2em 0.2em 0.3em rgb(0,0,0);
}

ul.menu li button:hover {
    background : rgb(30,40,0);
}

ul.menu li button:active {
    color : rgb(255,255,0);
    background : rgb(30,40,0);
}

/* Ekrany instalacyjne dla urządzeń iOS */
#install-screen  {
    padding-top : 0.5em;
    text-align : center;
}

#install-screen span {
    font-size : 0.75em;
    display : inline-block;
    padding : 0 0.5em;
}

/* Pasek stanu */
.progress {
    margin : 0 auto;
    width : 6em;
    height : 0.5em;
    border-radius : 0.5em;
    overflow : hidden;
    border : 1px solid rgb(200,200,100);
}

.progress .indicator {
    background-color : rgb(200,200,100);
    height : 100%;
    width : 0%;
}

/* Tło */
#game .background {
    position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
    z-index : 0;
}

#game .background canvas {
    width : 100%;
    height : 100%;
}


/* Ekran gry */
#game-screen .game-board {
    position : relative;
    width : 8em;
    height : 8em;
    -webkit-perspective : 16em;
}

#game-screen .game-board .board-bg,
#game-screen .game-board .board {
    position : absolute;
    width : 100%;
    height : 100%;
}

#game-screen .game-board .board {
    z-index : 10;
}

#game-screen .game-board .board-bg {
    z-index : 0;
}

/* Ekran gry - DOM */
#game-screen .game-board .dom-container {
    position : absolute;
    width : 100%;
    height : 100%;
}

#game-screen .game-board .dom-container .jewel {
    position : absolute;
    width : 1em;
    height : 1em;
    overflow : hidden;
}

#game-screen .game-board .board-bg div {
    position : absolute;
    width : 1em;
    height : 1em;
    background-color : rgba(225,235,255,0.15);
}

/* Ekran gry - stan gry */
#game-screen .game-info {
    width : 100%;
    float : left;
}

#game-screen .game-info label {
    display : inline-block;
    height : 1.5em;
    float : left;
    font-size : 0.6em;
    padding : 0.25em;
}

#game-screen .game-info .score {
    float : right;
}

#game-screen .time {
    height : 0.25em;
    border-radius : 0.5em;
}

#game-screen .time .indicator {
    width : 100%;
}

/* Ekran gry - Ogłoszenia */
#game-screen .announcement {
    position : absolute;
    left: 0;
    top : 50%;
    margin-top : -0.5em;
    width : 100%;

    font-family : Slackey, sans-serif;
    color : rgb(150,150,75);
    text-shadow : 0.03em 0.03em 0.03em rgb(255,255,0),
                 -0.03em -0.03em 0.03em rgb(255,255,0),
                  0.1em 0.15em 0.15em rgb(0,0,0);
    text-align : center;
    white-space : nowrap;

    z-index : 20; /* na pierwszym planie */
    opacity : 0; /* na początku jest przezroczysty */
    cursor : default;
}

.no-textshadow  #game-screen .announcement {
    filter: glow(color=#ffff00,strength=1),
            dropshadow(color=#000000,offX=3,offY=3);
}

/*Animacja komunikatu */
/* Klatki kluczowe w przeglądarce webkit */ 
@-webkit-keyframes zoomfade {
    0% {
        opacity : 1;
        -webkit-transform : scale(0.5);
    }
    25% { /* Komunikat jest w pełni widoczny przez chwilę */
        opacity : 1;
    }
    100% { /* Komunikat zanika */
        opacity : 0;
        -webkit-transform : scale(1.5);
    }
}
/* Klasa odpowiedzialna za przejście, zanikanie i skalowanie komunikatu. */
@-moz-keyframes zoomfade {
    0% {
        opacity : 1;
        -moz-transform : scale(0.5);
    }
    25% { /* Obiekt jest przez chwilę jednolity */
        opacity : 1;
    }
    100% { /* po czym staje sięw pełni przezroczysty. */
        opacity : 0;
        -moz-transform : scale(1.5);
    }
}
/* Klasa zoomfade odpowiedzialna za przejście, zanikanie i skalowanie komunikatu. */
.zoomfade {
    -webkit-animation-name : zoomfade;
    -webkit-animation-duration : 2s;
    -moz-animation-name : zoomfade;
    -moz-animation-duration : 2s;
}

/* Awaryjne rozwiązanie dla animacji CSS */
.no-cssanimations #game-screen .announcement {
    display : none;
}
.no-cssanimations #game-screen .announcement.active {
    opacity : 1;
    display : block;
}
