/* the GAME css - later copy that to the www/... */

.hp-summon-slider {

}

#ui {
  font-size: 2em;
}

/* common: */

#game {
  /* OLD::: */
  /* position: absolute;
  top: 50%;
  transform: translate(0, -50%); */
}
/* NEW */
#game canvas {
  margin: 0 auto;
  display: block;
}
/* //////////////////// */

body {
  /* FIX FOR CANVAS-SOMETIMES-SCROLLABLE bug*/
  overflow: hidden;
}

#fpsCounter {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  font-size: 1.5rem;
  color: white;
  text-shadow: 3px 3px black;
}

.slide-text {
  /* transition: outline 0.5s; */
  /* outline: 3px solid rgba(88, 78, 136, 0.28); */

  font-size: 1rem;
  position: absolute;
  text-align: center;
  color: #ffffff;
  width: 320px;
  margin: 1rem 0;
  outline: none;
  height: 4rem;
  border: none;
  background-color: rgba(51,51,51,0.6);
  left: calc(100% / 2 - (320px / 2));
  text-shadow: 0px 2px 3px #989898;
  bottom: 50px; /* UNHARDCODE - +probably the mobile keyboard will push this one out !! */
}

.slide-text:focus {
  /* transition: outline 0.5s; */
  outline: 3px solid rgba(88, 78, 136, 0.28);
}

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/
* {
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
  -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
  -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
  background-color:#000000;
  /* background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%); */
  font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
  font-size:12px;
  height:100vh;
  margin:0px;
  padding:0px;
  /* Padding to avoid the "unsafe" areas behind notches in the screen */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  text-transform:uppercase;
  width:100%;
}

/* Portrait layout (default) */
.app {
  background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
  position:absolute;             /* position in the center of the screen */
  left:50%;
  top:50%;
  height:50px;                   /* text area height */
  width:225px;                   /* text area width */
  text-align:center;
  padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
  margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                 /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
  .app {
      background-position:left center;
      padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
      margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                    /* offset horizontal: half of image width and text area width */
  }
}

h1 {
  font-size:24px;
  font-weight:normal;
  margin:0px;
  overflow:visible;
  padding:0px;
  text-align:center;
}

.event {
  border-radius:4px;
  color:#FFFFFF;
  font-size:12px;
  margin:0px 30px;
  padding:2px 0px;
}

.event.listening {
  background-color:#333333;
  display:block;
}

.event.received {
  background-color:#4B946A;
  display:none;
}

#deviceready.ready .event.listening { display: none; }
#deviceready.ready .event.received { display: block; }

@keyframes fade {
  from { opacity: 1.0; }
  50% { opacity: 0.4; }
  to { opacity: 1.0; }
}

.blink {
  animation:fade 3000ms infinite;
  -webkit-animation:fade 3000ms infinite;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bg-1 {
  background: white;
}
@media screen and (prefers-color-scheme: dark) {
  body {
      background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
  }
}