/* Spiel des Lebens - fingerbedienbar, ohne heutiges Flexbox.
   Zielgeraet ist ein iPad 1 mit iOS 5.1.
   Farben und Schrift folgen dem Portal (vapor.css), die Datei wird hier aber
   NICHT eingebunden: dort heisst eine Klasse ebenfalls .knopf und wuerde die
   Bedienleiste zerlegen. Die paar Werte stehen deshalb doppelt. */
* { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none;
    -webkit-user-select: none; margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; color: #f0e2ff;
    background: #150a29;
    font-family: Futura, "Gill Sans", "Helvetica Neue", Helvetica, sans-serif; }

#feld { position: absolute; top: 0; left: 0; right: 0; bottom: 190px; }
#brett { display: block; width: 100%; height: 100%; }

#leiste { position: absolute; left: 0; right: 0; bottom: 96px; height: 94px;
    background: rgba(26,11,46,.92); border-top: 1px solid rgba(255,47,157,.45); }
.knopf { float: left; width: 66px; height: 56px; margin: 8px 0 0 7px;
    background: rgba(122,45,255,.14); border: 1px solid rgba(122,45,255,.6);
    border-radius: 4px;
    text-align: center; color: #e0cdf5; font-size: 15px; font-weight: 500;
    line-height: 1; padding-top: 7px; text-decoration: none; display: block; }
.knopf.gut { background: rgba(255,47,157,.18); border-color: #ff2f9d; color: #ffd9f2;
    text-shadow: 0 0 10px rgba(255,47,157,.9);
    -webkit-box-shadow: 0 0 14px rgba(255,47,157,.3); }
.knopf svg { display: block; margin: 0 auto 3px; }
.knopf b { display: block; font-size: 9px; font-weight: 500; letter-spacing: 1.4px;
    text-transform: uppercase; }
#rechts { float: right; margin-right: 7px; }
#rechts .knopf { margin-left: 6px; }
#stand { clear: both; padding: 4px 0 0 8px; font-size: 10px; color: #b98fd6;
    letter-spacing: 2px; text-transform: uppercase; }
#stand span { margin-right: 14px; }

/* Musterleiste: Vorschauen statt Namen. Ein Name wie "Pulsar" sagt niemandem,
   wie das Ding aussieht - ein Bildchen schon. */
#muster { position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    white-space: nowrap; background: rgba(18,7,31,.92); border-top: 1px solid rgba(122,45,255,.35);
    line-height: 0; font-size: 0; }
.mk { display: inline-block; vertical-align: top; margin: 8px 0 0 8px;
    width: 78px; text-align: center; }
.mk canvas { display: block; width: 72px; height: 56px; margin: 0 auto;
    background: #150a29; border: 1px solid rgba(122,45,255,.6); border-radius: 4px; }
.mk span { display: block; font-size: 9px; color: #b98fd6; margin-top: 5px;
    letter-spacing: 1px; text-transform: uppercase;
    line-height: 1.2; }
.mk.an canvas { border-color: #6ff0ff;
    -webkit-box-shadow: 0 0 14px rgba(45,226,230,.4); }
.mk.an span { color: #6ff0ff; }

/* Fenster fuer Regeln und Farben */
#schleier { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10,4,20,.8); display: none; }
.fenster { position: absolute; top: 50%; left: 50%; width: 460px;
    margin: -215px 0 0 -230px; background: rgba(26,11,46,.96);
    border: 1px solid rgba(255,47,157,.5); border-radius: 4px; padding: 24px;
    display: none;
    -webkit-box-shadow: 0 0 30px rgba(255,47,157,.25); }
.fenster h2 { font-size: 12px; margin-bottom: 16px; letter-spacing: 4px;
    text-transform: uppercase; font-weight: 500; color: #6ff0ff;
    text-shadow: 0 0 10px rgba(45,226,230,.7); }
.fenster p { font-family: Georgia, "Times New Roman", serif; font-size: 17px;
    line-height: 1.6; color: #e3d3f5; min-height: 66px; }
.zu { margin-top: 16px; height: 50px; line-height: 50px; text-align: center;
    background: rgba(255,47,157,.14); border: 1px solid #ff2f9d; border-radius: 4px;
    color: #ffd9f2; font-weight: 500; font-size: 12px; letter-spacing: 3.4px;
    text-transform: uppercase; }
#regeldemo { text-align: center; margin-bottom: 14px; }
#regeldemo canvas { display: inline-block; background: #150a29;
    border: 1px solid rgba(122,45,255,.6); border-radius: 4px; }
#schemata div { height: 54px; line-height: 54px; margin-bottom: 8px;
    border: 1px solid rgba(122,45,255,.6); border-radius: 4px; padding: 0 14px;
    font-size: 12px; font-weight: 500; letter-spacing: 2.4px;
    text-transform: uppercase; color: #e0cdf5; }
#schemata div.an { border-color: #6ff0ff; color: #6ff0ff;
    -webkit-box-shadow: 0 0 16px rgba(45,226,230,.3); }
#schemata i { float: right; width: 26px; height: 26px; margin: 14px 0 0 6px;
    border-radius: 3px; }