@font-face {
  font-family: "myfont";
  src: url("Boogaloo-Regular.ttf");
}

* {
  margin: 0;
  padding: 0;
}

::-moz-selection {
  color: #333;
  text-shadow: none;
}
::selection {
  color: #333;
  text-shadow: none;
}
.clear:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clear {
  display: inline-table;
  clear: both;
}

* html .clear {
  height: 1%;
}
.clear {
  display: block;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  display: inline-block;
}

#bgimage {
  position: absolute;
  width: 100%;
  height: 115%;
  background-image: url("icon.png");
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
  z-index: -10;
}

.context {
  z-index: 0;
  position: relative;
}

p.header,
p.footer {
  display: none;
}
div.logo {
  width: 204px;
  height: 38px;
  float: left;
  position: relative;
  z-index: 10;
}
div.title {
  height: 38px;
  line-height: 38px;
  padding: 0 10px;
  margin: 0 1px 0 0;
  float: right;
  color: #333;
  text-align: right;
  font-size: 18px;
  position: relative;
  z-index: 10;
}
.template-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.template-wrap canvas {
  margin: 0 0 10px 0;
  position: relative;
  z-index: 9;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.fullscreen {
  float: right;
  position: relative;
  z-index: 10;
}

canvas {
  width: 100%;
  height: 100%;
  position: absolute;
}

#super {
  margin-top: 5%;
  padding: 10px;
}

ul {
  list-style-type: none;
}

#topline {
  text-align: center;
  padding: 10px;
  background-color: #ff8400;
  display: block;
  height: 38px;
  border: 1px solid black;
}

span .left .right .center {
  margin-top: 10px;
}
.left {
  float: left;
  font-size: 1.4em;
  color: #ffffff;
  background-color: #ffbb6e;
  font-weight: bold;
  font-family: "myfont";
}

.right {
  float: right;
  font-family: "myfont";
}

#wrapper {
  margin: 0 auto;
  max-width: 960px;
  height: 660px;
  padding: 10px;
  background-color: #fff;
}

#gameContainer {
  margin: 0 auto;
  max-width: 960px;
  height: 600px;
  background-color: black;
  border: 1px solid black;
}

/* ── Mobile: fit the game to the screen so answer options are never cropped ──
   Desktop keeps the fixed 960x600. On phones we drop the fixed heights and keep
   the game's ~1.6:1 landscape shape, so the whole board scales down intact. */
@media (max-width: 768px) {
  #wrapper {
    height: auto;
  }
  #gameContainer {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 960 / 600;
  }
}

/* (Rotate-to-landscape overlay removed — it fired on any narrow window, including a
   resized desktop, and its purpose is moot while the games can't run on mobile.) */

#center-text {
  font-family: "myfont";
  color: white;
  text-align: center;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
}

div#webgl-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

div#loadingBox {
  width: 100%;
  height: 0px;
  position: absolute;
  top: 50%;
  margin-top: 137px;
  text-align: center;
}

div#icon {
  width: 380px;
  height: 340px;
  margin-left: 10px;
  margin-top: -20px;
  position: relative;
  background: url("loading_sprite2.gif") center no-repeat;
}

div#box {
  width: 400px;
  height: 367px;
  position: absolute;
  top: 35%;
  left: 50%;
  margin-top: -200px;
  /* center a 400px box: -half-width. Was -170px, which sat 30px right of center. */
  margin-left: -200px;
}

div#bgBar {
  display: none;
  position: absolute;
  width: 360px;
  margin-left: -180px;
  left: 50%;
  height: 18px;
  background-color: #000;
  box-shadow: 1px 1px 5px #111;
}

div#progressBar {
  display: none;
  left: 50%;
  position: absolute;
  margin-left: -180px;
  width: 0px;
  height: 18px;
  background-color: #f9e677;
}

p#loadingInfo {
  color: #fff;
  letter-spacing: 1px;
  position: absolute;
  width: 100%;
  font-family: sans-serif;
  text-align: center;
  top: 50%;
  font-size: 11px;
  font-weight: 500;
  margin-top: 140px;
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000; */
}

div#spinner {
  position: absolute;
  height: 18px;
  left: 50%;
  margin-left: -180px;
  width: 360px;
  position: relative;
  overflow: hidden;
  background-color: #fcbc3c;
  box-shadow: 1px 1px 5px #111;
}

div#spinner:before {
  display: block;
  position: absolute;
  content: "";
  width: 150%;
  margin-left: -10px;
  height: 10px;
  background-color: #f98900;
  transform: rotate(12deg);
  animation: loading 2s linear 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;
}

ul.dropdown {
  margin-top: -16px;
  margin-left: 250px;
  position: absolute;
}
ul.dropdown li {
  font-weight: bold;
  font-size: 1.5em;
  width: 400px;
  position: relative;
}
ul.dropdown p:hover {
  color: #000000;
}
ul.dropdown li p {
  display: block;
  padding: 20px 8px;
  color: #222;
  position: relative;
  z-index: 2000;
}
ul.dropdown li p:hover,
#center-text.hover{
  background: #ff8400;
  position: relative;
}
ul.dropdown li p.hover {
  background: #f4cd7e;
  position: relative;
}

ul.dropdown ul {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  z-index: 1000;
}
ul.dropdown ul li {
  text-align: left;
  font-size: 0.5em;
  font-weight: bold;
  color: #fff;
  border-bottom: 1px solid #888;
}
ul.dropdown ul li p {
  display: block;
  color: #000;
  font-weight: bolder;
  font-size: 1em;
  /* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000; */
  background: #fcbc3c;
}
ul.dropdown ul li:nth-child(odd)  p{
  background: #fcbc3c;
}
ul.dropdown ul li p:hover {
  display: block;
  font-size: 1.3em;
  padding-left: 10px;
  background: #ff8400 !important;
  text-shadow: none;
}
@keyframes loading {
  from {
    top: -185%;
  }
  to {
    top: 225%;
  }
}

.levelname {
  background-color: #000;
  color: #fff;
  text-align: center;
}

@media screen and (max-width: 50em) {
  .center {
    margin-left: 6%;
  }
}

@media screen and (max-width: 40em) {
  /* Mobile header: lay out logo | right-cluster as a flex row with everything
     vertically centered, so the timer and expand button stay inside the bar
     instead of spilling out. */
  #topline {
    height: auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .left {
    float: none;
    margin-right: 0;
  }

  .center {
    display: none;
    margin-left: 0px;
  }

  .right {
    float: none;
    margin-left: 0;
    align-items: center;
  }

  /* The center title row is already hidden on mobile, so drop the bulky "Pre-K"
     label too and keep just the timer + expand button. */
  #right_text {
    display: none !important;
  }
}

.goalCompletedContainer,
.nextGoalContainer {
  position: absolute;
  display: none;
  top: 255px;
  left: 290px;
}

/* On mobile the fixed left:290px (tuned for the 960px desktop game) lands
   right-of-center. Pin these reward panels to true center instead. !important
   overrides the inline left the JS animation sets. Desktop keeps its slide-in. */
@media (max-width: 768px) {
  .goalCompletedContainer,
  .nextGoalContainer {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    max-width: 90%;
  }
  .goalCompletedContainer img,
  .nextGoalContainer img {
    max-width: 100%;
    height: auto;
  }
  /* The badge/icon (2nd img) is absolutely positioned at a fixed left:171px tuned
     for the 400px box; once the box scales down on mobile that lands off-center.
     Center it horizontally relative to the (scaled) box instead. */
  .goalCompletedContainer img:last-of-type,
  .nextGoalContainer img:last-of-type {
    left: 50% !important;
    transform: translateX(-50%);
  }
}



.nextGoalContainer  {
  z-index: 10;
}

.goalCompletedContainer img:first-of-type,
.nextGoalContainer  img:first-of-type {
  width: 400px;
}
.goalCompletedContainer img:last-of-type,
.nextGoalContainer  img:last-of-type{
  position: absolute;
  top: 78px;
  left: 171px;
  width: 60px;
}

.nextGoalContainer img:last-of-type {
  top: 95px !important;
}

/* On mobile the reward box scales down, so the badge/icon's fixed desktop `top`
   lands too low. Nudge it up. (Placed after the base rules so this !important wins.) */
@media (max-width: 768px) {
  .goalCompletedContainer img:last-of-type {
    top: 50px !important;
  }
  .nextGoalContainer img:last-of-type {
    top: 62px !important;
  }
}

/* On mobile the absolutely-positioned loading bar overlaps the description panel
   below the game, obscuring the top of the text. Reserve space by pushing the
   description down so it clears the bar while loading. (Desktop is unaffected.) */
@media (max-width: 768px) {
  .game-desc {
    margin-top: 80px !important;
  }
}


.p-relative {
  position: relative;
}

.m-auto {
  margin: auto !important;
}