*{box-sizing:border-box;margin:0;padding:0}
html,body,#viewport{width:100%;height:100%;overflow:hidden;background:#000}
body{font-family:Arial,sans-serif;user-select:none}
button{border:0;background:transparent;padding:0;cursor:pointer}
img{display:block;-webkit-user-drag:none;user-select:none}

/* FIXED DESIGN CANVAS */
#lobby{
  position:absolute;
  left:0;
  top:0;
  width:1920px;
  height:1080px;
  overflow:hidden;
  transform-origin:0 0;
  background:#000;
}

.master-bg{
  position:absolute;
  inset:0;
  width:1920px;
  height:1080px;
  object-fit:fill;
  pointer-events:none;
  z-index:0;
}

#games{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}

.game,.more{
  position:absolute;
  pointer-events:auto;
  outline:none;
}

.game{
  width:580px;
  height:290px;
  transition:filter .12s ease,opacity .12s ease;
}

.game img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.game:hover{
  filter:brightness(1.08) drop-shadow(0 0 10px rgba(255,196,55,.55));
}

.game:active{
  filter:brightness(.92);
}

/* 7 GAME POSITIONS */
.p1{left:40px;top:18px}
.p2{left:670px;top:12px}
.p3{right:40px;top:18px}

.p4{left:40px;top:327px}
.p5{right:40px;top:327px}

.p6{left:40px;top:636px}
.p7{right:40px;top:636px}

/* MORE GAMES */
.more{
  left:670px;
  top: 730px;
  width:580px;
  height: 165px;
  pointer-events:auto;
}

.more > img{
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}

.more:hover{
  filter:brightness(1.08);
}

.more:active{
  filter:brightness(.92);
}


/* =========================
   BOTTOM UI
   ========================= */

.ui{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
}

.lang,
.credits,
.exit{
  position:absolute;
  pointer-events:auto;
  margin:0;
  padding:0;
}

/* LANGUAGE */
.lang{
  left:30px;
  bottom:18px;
  width:350px;
  height:110px;
}

.credits{
    position:absolute;
    left:1280px;
    bottom:18px;
    width:300px;
    height:110px;
    pointer-events:none;
}

.credits img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:fill;
}

#creditValue{
    position:absolute;

    left:-6px;
    width:100%;

    bottom:18px;

    text-align:center;
    color:#ffd52a;
    font-family:Arial,sans-serif;
    font-size:34px;
    font-weight:700;
    line-height:1;

    text-shadow:
        0 0 4px rgba(255,213,42,.9),
        0 0 9px rgba(255,170,0,.45);

    z-index:5;
    pointer-events:none;
}
/* EXIT */
.exit{
  left:1605px;
  bottom:18px;
  width:280px;
  height:110px;
}

.lang img,
.credits img,
.exit img{
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
}

.lang:hover,
.exit:hover{
  filter:brightness(1.08);
}

.lang:active,
.exit:active{
  filter:brightness(.92);
}


/* =========================
   PAGE ARROWS
   ========================= */

.page-arrow{
  position:absolute;
  top:0;
  width:24%;
  height:100%;
  z-index:50;
  cursor:pointer;
  background:transparent;
  border:0;
  outline:0;
  pointer-events:auto;
}

/* LEFT ARROW */
.page-prev{
  left:0;
  right:auto;
}

/* RIGHT ARROW */
.page-next{
  right:0;
  left:auto;
}

/* Disabled only at first/last page */
.page-arrow:disabled{
  cursor:default;
  pointer-events:none;
}


/* =========================
   PAGE INDICATOR 1/5
   ========================= */

.page-indicator,
#pageIndicator{
  position:absolute;

  /* YOUR CURRENT POSITION */
  right:-100px !important;
  left:auto !important;
  bottom:150px !important;

  width:280px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#ffd52a !important;
  font-family:Arial,sans-serif;
  font-size:40px !important;
  font-weight:700;
  line-height:1;

  letter-spacing:0 !important;
  word-spacing:0 !important;
  white-space:nowrap;

  text-shadow:
    0 0 5px rgba(255,213,42,.85),
    0 0 10px rgba(255,170,0,.35);

  pointer-events:none;
}


/* PAGE CHANGE FADE */
.game.page-changing{
  opacity:0;
}

/* APOLLO LOBBY SOCKET LOCK */
.disconnect-overlay{
  position:absolute; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,5,14,.82); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
}
.disconnect-overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.disconnect-card{
  width:610px; min-height:330px; box-sizing:border-box;
  padding:42px 52px 38px; text-align:center;
  border:2px solid rgba(38,163,255,.88); border-radius:20px;
  background:linear-gradient(180deg,rgba(3,20,43,.98),rgba(1,8,20,.99));
  box-shadow:0 0 50px rgba(0,125,255,.25),inset 0 0 35px rgba(0,0,0,.7);
  font-family:Arial,sans-serif;
}
.disconnect-icon{
  width:66px;height:66px;margin:0 auto 20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:3px solid #ffb000;color:#ffd35a;font-size:44px;font-weight:900;
  box-shadow:0 0 20px rgba(255,176,0,.35)
}
.disconnect-title{color:#fff;font-size:36px;font-weight:800;letter-spacing:2px}
.disconnect-message{margin-top:12px;color:#8bcfff;font-size:21px;letter-spacing:1.5px}
.reconnect-button{
  margin-top:34px;min-width:280px;height:66px;border-radius:12px;
  border:2px solid #e6b93e;color:#ffe58a;background:linear-gradient(#173f67,#071a31);
  font-size:24px;font-weight:800;letter-spacing:1.5px;cursor:pointer;
  box-shadow:0 0 18px rgba(0,143,255,.3),inset 0 0 12px rgba(255,202,70,.08)
}
.reconnect-button:hover{filter:brightness(1.15)}
.reconnect-button:disabled{opacity:.55;cursor:default}
.reconnect-status{height:24px;margin-top:18px;color:#76caff;font-size:16px;letter-spacing:1px}