:root{
  --logo-size:700px;
  --bg-padding:100px;
}

html,body{
  margin:0;
  font:normal 0/0 Arial,Helvetica,sans-serif;
  background:#fff;
  overflow:hidden;
  color:#fff;
  user-select:none;
}

html,body,.flipper,.f,.b,#g{
  width:100%;
  height:100%;
}

/* BG WRAP */
.menu-bg-wrapper{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:calc(var(--logo-size) + (2 * var(--bg-padding)));
  height:calc(var(--logo-size) + (2 * var(--bg-padding)));
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  pointer-events:none;
  background:url("images/bg.png") center/cover no-repeat;
  border-radius:10px;
}

/* ICON FONT */
@font-face{
  font-family:"GeneralFoundicons";
  src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60583/general_foundicons.eot");
  src:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60583/general_foundicons.eot?#iefix")format("embedded-opentype"),
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60583/general_foundicons.woff")format("woff"),
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60583/general_foundicons.ttf")format("truetype"),
      url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/60583/general_foundicons.svg#GeneralFoundicons")format("svg");
}

/* LINKS */
a{
  text-decoration:none;
  color:#fff;
  display:block;
  font:bold 18px/75px 'Open Sans';
  text-transform:uppercase;
  text-align:center;
  margin:0 1px;
}
a:hover{
  background:rgba(255,255,255,.1);
}

/* LOGO GRID */
.logo{
  --size:var(--logo-size);
  width:var(--size);
  height:var(--size);
  position:relative;
  z-index:2;
  pointer-events:auto;
  display:block;
  box-sizing:border-box;
}

.logo .card{width:50%;height:50%;cursor:default;position:relative}
.logo .card.left.active{z-index:2}
.logo .card.left.active+.card{opacity:0}
.logo .card.left.active .b{margin-left:-100%}

.logo .f{
  font:normal 195px/338px 'Open Sans';
  text-align:center;
  text-transform:uppercase;
}

.logo .c2{transform:scale(-1,1)}

.logo .contentbox{
  width:200%;
  font:normal 16px/20px 'Open Sans';
  text-align:left;
}

.logo .contentbox.levels{width:100%}
.logo .contentbox .padded{padding:0 15px;}
.logo .contentbox h2{font-size:24px;margin:28px 0;text-transform:uppercase}
.logo .contentbox p{
  line-height:14px;
  margin:14px 0;
  font-size:12px;
}

/* ⭐ updated stats layout */
#stats h2{
  font-size:20px;
  margin-bottom:10px;
}

#stats h2 i{
  margin-right:6px;
  font:italic normal 9px/8px 'Open Sans';
  color:rgba(255,255,255,.4);
}

#stats ul{
  list-style:none;
  margin:0 0 10px 0;
  padding:0;
  line-height:22px;
}

#stats li{margin:2px 0; display:flex; justify-content:space-between;}
#stats li b{
  font-size:12px;
  width:120px;
  display:inline-block;
}

/* helps bottom play button */
#stats a{
  position:absolute;
  bottom:0;
  width:100%;
  margin-left:-15px;
}

/* HELP TEXT */
.logo .info{
  font-size:14px;
  line-height:20px;
  text-align:center;
  color:rgba(255,255,255,.3);
  padding:0 25px;
}

/* GAME AREA */
#g{margin-top:4px}
#g .timer{
  width:0%;
  height:5px;
  position:absolute;
  top:0;
  background:#C0392B;
  z-index:1;
}

/* TIMER ANIM */
@keyframes timer{100%{width:100%}}

/* PAUSE OVERLAY */
.pause{
  position:absolute;
  inset:0;
  z-index:100;
  background:rgba(51,51,51,0.78);
}
.pause::before{
  content:'PAUSED';
  position:absolute;
  top:50%;
  margin-top:-100px;
  width:100%;
  background:#C0392B;
  color:#fff;
  font:bold 80px/200px 'Open Sans';
  text-align:center;
}

/* CARD STYLE */
#g .found{display:inline-block}
.card{display:inline-block;perspective:1000;}
.card:not(.active):hover{opacity:.8}

.b img{
  width:70%;
  height:70%;
  object-fit:contain;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.flipper{position:relative;transform-style:preserve-3d}
.f,.b{
  position:absolute;
  top:0;
  left:0;
  box-shadow:inset 0 0 0 1px #333;
  backface-visibility:hidden;
}

.f{background:#6CB03C;z-index:1}
#g .f::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:70%;
  height:70%;
  background:url("images/logo.png") no-repeat center/contain;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.b{background:#ED3783;opacity:0}
.card.active .b{z-index:2;opacity:1}

.card,.flipper,.logo .b{transition:400ms}
.card.active .flipper,.b{transform:rotateY(180deg)}

.logo .f,.pause::before{-webkit-text-stroke:1px #fff}

/* MOBILE */
@media(max-width:640px){
  :root{--logo-size:300px;}
  a{line-height:50px;font-size:13px}
  .logo{width:var(--logo-size);height:var(--logo-size)}
  .logo .f{font:normal 80px/150px 'Open Sans'}
  .logo .contentbox h2{font-size:16px;margin:24px 0}
  .logo .instructions h2{display:none}
  .logo .instructions.contentbox p:nth-child(3){display:none}
  #stats li b{width:auto}
}

/* POPUPS */
.welcome-popup,
.voucher-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}
.voucher-popup{z-index:99999}

.welcome-img{width:350px;pointer-events:none}
.voucher-img{width:600px;pointer-events:none}

/* NO HOVER DEVICES */
@media(hover:none) and (pointer:coarse){
  .card:not(.active):hover{opacity:1!important}
}

/* EFFECTS */
@keyframes pop{
  0%{transform:scale(0);opacity:0}
  100%{transform:scale(1);opacity:1}
}
@keyframes shake{
  0%{transform:rotate(0)}
  25%{transform:rotate(3deg)}
  50%{transform:rotate(0)}
  75%{transform:rotate(-3deg)}
  100%{transform:rotate(0)}
}
.card.shake{animation:shake .3s ease}

/* HELP BTN */
#helpBtn{
  position:fixed;
  top:15px;
  right:15px;
  width:200px;
  z-index:999999;
  cursor:pointer;
  object-fit:contain;
}

/* END SCREEN */
#endGameScreen{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9990;
}
#endGameBox{
  width:400px;
  padding:25px;
  background:#222;
  border-radius:12px;
  text-align:center;
  animation:pop .25s ease-out;
  position:relative;
}
#endGameBox h2{font-size:28px;margin-bottom:15px}
#endGameBox p{font-size:18px;margin:8px 0}
.end-close{
  position:absolute;
  top:10px;
  right:15px;
  font-size:26px;
  cursor:pointer;
  color:#fff;
  padding:4px 10px;
}
.end-close:hover{color:#ff4f4f}

/* 🔥 NEW SCORE DISPLAY */
#stats .latest-wrap{
  margin:6px 0 12px 0;
  text-align:left;
  display:flex;
  align-items:center;
  gap:8px;
}

#stats .latest-wrap .latest-score{
  font-size:26px;
  font-weight:bold;
  line-height:1;
}

#stats .latest-wrap .latest-label{
  font-size:10px;
  opacity:0.6;
  letter-spacing:1px;
}

/* 🎯 SCORE POPUP */
.score-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999999;
  backdrop-filter:blur(4px);
  animation:fadeIn .25s ease-out;
}
.score-box{
  background:#111;
  padding:30px;
  border-radius:16px;
  width:320px;
  text-align:center;
  box-shadow:0 0 25px rgba(0,0,0,.45);
  animation:pop .25s ease-out;
}
.score-box h2{
  font-size:26px;
  margin-bottom:15px;
  letter-spacing:1px;
}
.score-box p{
  margin:6px 0;
  font-size:18px;
}
.score-box .small{
  font-size:12px;
  opacity:.6;
  margin-top:15px;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}