body{
  color:#ffffff;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at center, rgba(0,255,255,.15), rgba(0,0,0,.7)),
    url("../images/bg.jpg") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}

.container{
    text-align:center;
}

/* LOGO */
.logo img{
    width:220px;
    animation:pulse 3s infinite;
    filter:drop-shadow(0 0 40px rgba(0,255,255,1));
    margin-bottom:8px;
}

/* TITLE */
h1{
    margin-top:-2px;
    font-size:32px;
    letter-spacing:4px;
    color:#dfffff;
    text-shadow:0 0 15px rgba(0,255,255,.9);
}

/* SUB TEXT */
.subtitle{
    margin-top:10px;
    font-size:18px;          /* كبرنا الخط */
    color:#eaffff;
    opacity:0.95;
    text-shadow:0 0 12px rgba(0,255,255,.7);
}

/* clickable */
.subtitle.link{
    cursor:pointer;
    transition:0.3s;
}

.subtitle.link:hover{
    color:#ffffff;
    text-shadow:0 0 20px rgba(0,255,255,1);
    transform:scale(1.05);
}


/* INPUTS */
.inputs{
    margin-top:30px;
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
}

.inputs input{
    width:220px;
    padding:14px;
    background:rgba(0,0,0,.35);
    border:1px solid rgba(0,255,255,.7);
    color:#fff;
    text-align:center;
    font-size:14px;
    outline:none;
    box-shadow:0 0 15px rgba(0,255,255,.4);
}

.inputs input::placeholder{
    color:#ccffff;
}

button,
#verifyBtn,
.platform-continue{
  border-radius:16px;       /* Softer */
  transition:.25s ease;
    padding:14px;
    background:rgba(0,255,255,.8);
    border:none;
    cursor:not-allowed;
    font-weight:bold;
    color:#003333;
    box-shadow:0 0 25px rgba(0,255,255,1);
    transition:.3s;
}

button.active{
    cursor:pointer;
}

button.active:hover{
    transform:scale(1.05);
}

/* ANIMATION */
@keyframes pulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.06)}
    100%{transform:scale(1)}
}
/* PLATFORM PAGE */

.platform-container{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.platform-title{
  letter-spacing:4px;
  margin-bottom:8px;
}

.platform-sub{
  opacity:.8;
  margin-bottom:40px;
}

.platform-list{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:40px;
}

/* ROW */
.platform-row{
  width:420px;
  min-height:96px;

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

  padding:18px 26px;   /* MORE horizontal space */
  gap:20px;            /* KEY: space between text & image */

  border:1px solid rgba(0,255,255,.35);
  border-radius:18px;  /* Softer edges */
  cursor:pointer;
  transition:all .3s ease;
  background:rgba(0,0,0,.25);
}

/* NAME */
.platform-name{
  font-size:18px;
  letter-spacing:3px;
  margin-right:auto;  /* pushes logo away */
}
/* HOVER */
.platform-row:hover{
  transform:translateY(-4px);
  box-shadow:0 0 25px rgba(0,255,255,.6);
}

/* ACTIVE (selected) */
.platform-row.active{
  opacity: 1;
  filter: none;
  border-color: #00ffff;
  background: rgba(0,255,255,.08);
  box-shadow: 0 0 35px rgba(0,255,255,.9);
  cursor: pointer;
}

/* CONTINUE BUTTON */
.platform-continue{
  display: flex;
  align-items: center;     /* vertical centering */
  justify-content: center; /* horizontal centering */
  text-align: center;
  line-height: 1;
}


.platform-continue.active{
  cursor:pointer;
  opacity:1;
  box-shadow:0 0 25px rgba(0,255,255,1);
}

.platform-continue.active:hover{
  transform:scale(1.05);
}
/* LOCKED STATE */
.platform-row.locked{
  opacity: 0.35;
  filter: grayscale(100%);
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}
/* UPLOAD PAGE */

.center{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.uploads{
  display:flex;
  gap:30px;
  margin:40px 0;
}

.upload-box{
  width:260px;
  height:200px;

  min-width:260px;
  max-width:260px;

  min-height:200px;
  max-height:200px;

  flex: 0 0 auto;          /* 🔑 REQUIRED — FIXES MOBILE COLLAPSE */

  border:2px dashed rgba(0,255,255,.5);
  border-radius:18px;

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

  position:relative;
  overflow:hidden;         /* 🔑 VERY IMPORTANT */

  background:rgba(0,0,0,.25);
  cursor:pointer;
  transition:.3s;
}



.upload-box:hover{
  box-shadow:0 0 25px rgba(0,255,255,.6);
  transform:translateY(-3px);
}

.upload-box input{
  display:none;
}

.upload-text{
  color:#bfffff;
  letter-spacing:2px;
  font-size:14px;
  line-height:1.6;     /* Air */
  padding:0 10px;      /* Prevent edge touching */
}


.upload-box .preview{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit: cover;   /* fills box nicely */
  object-position:center;

  border-radius:16px;
  display:none;
}



/* VERIFY BUTTON */
#verifyBtn{
  padding:14px 60px;
  letter-spacing:3px;
  opacity:.4;
  cursor:not-allowed;
}

#verifyBtn.active{
  opacity:1;
  cursor:pointer;
  box-shadow:0 0 25px rgba(0,255,255,1);
}
/* FIX VERIFY BUTTON TEXT OVERFLOW */

#verifyBtn{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  white-space: nowrap;     /* keep text on one line */
  overflow: hidden;        /* prevent overflow */
  text-overflow: ellipsis; /* safety fallback */

  min-width: 160px;        /* prevents shrinking */
  padding: 14px 24px;      /* balanced spacing */

}.upload-text small{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:#9ff;
  letter-spacing:1px;
}
/* ===== MODALS ===== */

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.modal.hidden{
  display:none;
}

.modal-box{
  background:#0b2d3f;
  border:1px solid rgba(0,255,255,.4);
  padding:28px;
  width:360px;
  text-align:center;
  border-radius:16px;
  box-shadow:0 0 40px rgba(0,255,255,.4);
}

.modal-box.error{
  border-color:rgba(255,80,80,.6);
}

.error-icon{
  width:48px;
  height:48px;
  margin:0 auto 12px;
  border-radius:50%;
  background:#ff4b4b;
  color:#fff;
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.modal-box h2{
  margin-bottom:8px;
}

.modal-text,
.details{
  font-size:14px;
  line-height:1.8;
  color:#dfffff;
}

.user-id-box{
  margin:14px auto;
  padding:10px;
  border:1px dashed #00ffff;
  width:fit-content;
  min-width:140px;
  border-radius:10px;
}

.user-id-box span{
  display:block;
  font-size:12px;
  opacity:.8;
}

.user-id-box strong{
  font-size:18px;
  letter-spacing:2px;
  color:#00ffff;
}

.modal-box button{
  margin-top:18px;
  padding:10px 40px;
  background:#00ffff;
  border:none;
  cursor:pointer;
  color:#003333;
  font-weight:bold;
}

/* SPINNER */
.spinner{
  width:48px;
  height:48px;
  border:4px solid rgba(255,255,255,.2);
  border-top:4px solid #00ffff;
  border-radius:50%;
  margin:0 auto 16px;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}
/* ===== VERSION BADGE ===== */
.version-badge{
  position:fixed;
  top:16px;
  right:16px;

  padding:8px 14px;
  font-size:14px;
  font-weight:600;
  letter-spacing:1px;

  background:rgba(0,0,0,.35);
  border:1px solid rgba(0,255,255,.6);
  border-radius:12px;

  color:#eaffff;
  box-shadow:0 0 18px rgba(0,255,255,.6);
  z-index:999;
}

/* ===== USERS ONLINE (TOP LEFT) ===== */
.users-online{
  position:fixed;
  top:16px;
  left:16px;

  padding:8px 14px;
  font-size:14px;
  font-weight:600;
  letter-spacing:1px;

  background:rgba(0,0,0,.35);
  border:1px solid rgba(0,255,255,.6);
  border-radius:12px;

  color:#eaffff;
  box-shadow:0 0 18px rgba(0,255,255,.6);
  z-index:999;

  display:flex;
  gap:8px;
  align-items:center;
}

.users-online .label{
  opacity:.75;
}

.users-online .count{
  color:#00ffff;
  font-weight:700;
}


/* ===== SUCCESS MODAL ===== */
.success-icon{
  width:52px;
  height:52px;
  margin:0 auto 14px;
  border-radius:50%;
  background:#00ffcc;
  color:#003333;
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 25px rgba(0,255,255,.9);
}
/* LOGO HOLDER (unchanged, neutral) */
.platform-logo{
  width:72px;
  height:72px;

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

  border-radius:16px; /* soft container */
}

/* LOGO IMAGE — SOFT EDGES */
.platform-logo img{
  width:80%;
  height:80%;

  object-fit:contain;

  border-radius:10px; /* ← softens edges */
  
  /* subtle smoothing (NOT shadow) */
  background: rgba(255,255,255,0.02);
}
/* ================================
   MOBILE FIX (IMPORTANT)
================================ */

@media (max-width: 768px) {

  body{
    height:auto;
    min-height:100vh;
    overflow-y:auto;
  }

  .container,
  .center,
  .platform-container{
    padding-top:100px;
    padding-bottom:40px;
    padding-left:20px;
    padding-right:20px;
  }

  /* PLATFORM PAGE */
  .platform-row{
    width:100%;
    max-width:360px;
  }

  /* UPLOAD PAGE */
  .uploads{
    flex-direction:column;
    align-items:center;
    gap:24px;
  }
  
.upload-box{
    width:90vw;
    max-width:340px;
    min-width:280px;
    height:190px;

    flex: 0 0 auto;  /* 🔑 KEEP THIS HERE TOO */
  }

}

  /* MODALS NEVER CLIP */
  .modal{
    padding:20px;
  }

  .modal-box{
    max-height:90vh;
    overflow-y:auto;
  }

}.get-key-btn{
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);

  padding:14px 28px;
  border-radius:18px;
  border:none;

  background:#00ffff;
  color:#003333;
  font-weight:bold;
  letter-spacing:1px;

  cursor:pointer;
  box-shadow:0 0 25px rgba(0,255,255,.9);
}
.get-key-btn {
  margin-top: 28px;     /* pushes it down */
  padding: 14px 28px;
  border-radius: 14px; /* softer edges */
  font-weight: bold;
}
.platform-logo img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 14px;
}
.success-note {
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.7;
  color: #bfffff;
  opacity: 0.9;
}
.hidden {
  display: none !important;
}
.success-note{
  margin-top:16px;
  padding:14px;
  border:1px solid rgba(0,255,255,.5);
  border-radius:12px;

  font-size:15px;        /* bigger */
  font-weight:600;       /* bolder */
  line-height:1.9;

  color:#eaffff;
  background:rgba(0,255,255,.08);

  text-shadow:0 0 6px rgba(0,255,255,.4);
}
.apple-container{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin-top:40px;
}

.multipliers{
  display:flex;
  flex-direction:column;
  gap:18px;
  font-weight:bold;
  color:#00ffff;
}

.apple-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.apple-row{
  display:flex;
  gap:14px;
  justify-content:center;
}

.apple{
  width:60px;
  height:60px;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  cursor:pointer;
  transition:.3s;
}

/* Revealed apple */
.apple.revealed{
  background-image:url("apple-win.png");
  transform:scale(1.1);
}
.apple-controls{
  margin-top:30px;
  display:flex;
  justify-content:center;
  gap:20px;
}
.game-bg{
  background: radial-gradient(circle at top, #0b2a2a, #000);
  min-height:100vh;
  display:flex;
  justify-content:center;
  color:#fff;
}

.game-wrapper{
  width:100%;
  max-width:420px;
  padding:20px;
}

.game-header{
  text-align:center;
  margin-bottom:20px;
}

.game-logo{
  width:180px;              /* base width */
  max-width:90vw;           /* mobile safety */
  transform:scale(1.25);    /* 🔑 visual size boost */
  transform-origin:center;
  filter:drop-shadow(0 0 25px rgba(0,255,255,.9));
}

/* ---- Apple game board (responsive, exact-fit) ---- */

/* cell base size variable (adjust if you want bigger/smaller) */
:root { --cell-size: 56px; --gap: 8px; }

/* container */
.game-board {
  position: relative;
  width: 100%;
  max-width: 520px; /* widened so it looks less cramped on desktop */
  margin: 0 auto;
  padding: 12px 14px 12px; /* no big bottom padding (removes the empty gap) */
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(0,255,255,.06);
  box-sizing: border-box;
  overflow: hidden;
}

/* row layout: multiplier column + cells column */
.game-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

/* multiplier */
.multiplier {
  text-align: center;
  padding: 8px;
  border-radius: 10px;
  background: #0b3a3a;
  font-weight: 700;
  color: #fff;
  min-width: 56px;
}
.multiplier.active{
  background:#1aff6a; color:#000; box-shadow:0 0 15px #1aff6a;
}

/* CELLS: layout that *always* fits 5 cells inside the available width */
.cells {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* five equal columns */
  gap: var(--gap);
  justify-content: center;
  width: 100%;
  /* limit max width to avoid overgrowing multipliers on very large screens */
  max-width: calc((var(--cell-size) * 5) + (var(--gap) * 4));
}

/* cell sizing uses computed available column width while keeping aspect ratio */
.cell {
  width: 100%;
  max-width: var(--cell-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  opacity: .35;
  transition: all .28s ease;
  overflow: hidden;
}

/* row image types */
.row-dark .cell   { background-image: url("../css/apple-dark.png"); }
.row-medium .cell { background-image: url("../css/apple-medium.png"); }
.row-light .cell  { background-image: url("../css/apple-light.png"); }

/* revealed (win) */
.cell.win {
  background-image: url("../css/apple-win.png") !important;
  opacity: 1;
  box-shadow: 0 0 18px #00ff88;
  transform: scale(1.03);
}

/* grey-out done rows (but keep the winner bright) */
.row-done .cell:not(.win) {
  filter: grayscale(1);
  opacity: 0.18;
}

/* ARROW OVERLAY (sized to match cells) */
.arrow-overlay {
  position: absolute;
  top: 0;
  left: 0;                 /* JS will set exact left */
  width: 100%;             /* JS will adjust width to exact cells width */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  z-index: 20;
  pointer-events: none;
  transition: top .35s ease, left .25s ease, width .25s ease, opacity .25s ease;
  /* transparent so overlay matches board background seamlessly */
  background: transparent;
}

/* each arrow will be resized by JS to match .cell size */
.arrow {
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1/1;
  background: url("../css/arrow.png") center/contain no-repeat;
  filter: drop-shadow(0 0 12px #00ff88);
  margin: 0 auto;
}

/* Get-Apple loading modal reuse same modal styling */
/* (You probably already have .modal/.modal-box/.spinner; ensure spinner exists) */

/* Controls under the game board */
.game-controls {
  display:flex;
  gap:14px;
  justify-content:center;
  margin-top:12px;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.game-controls button{
  flex:1;
  padding:12px;
  border-radius:12px;
  background:#001919;
  border:1px solid #00ffff;
  color:#fff;
  cursor:pointer;
}

/* responsive adjustments for narrow screens */
@media (max-width: 700px) {
  :root { --cell-size: 46px; --gap: 6px; }
  .game-board { max-width: 100%; padding-bottom: 12px; }
  .cells { max-width: calc((var(--cell-size) * 5) + (var(--gap) * 4)); }
  .arrow-overlay { left: 64px; width: calc(100% - 64px); }
}
.promo{
  text-align:center;
  margin-top:30px;   /* pushes it lower */
  color:#ffffff;
  font-size:14px;
  opacity:0.85;
}