:root{
  --w: 900px;
  --h: 600px;
  --tray-h: 140px;
  --cta-pad: 70px; /* extra space at bottom for CTA */
  --z-bg: 0; --z-hoop: 2; --z-canvas: 3; --z-ui: 4; --z-modal: 10;
  --card: #0e1220;
  --text: #f3f6ff;
  --accent: #5ac8fa;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#000; color:var(--text); font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  display:grid; place-items:center;
}
.game-root{
  position:relative; width:min(100vw, var(--w)); aspect-ratio: 3 / 2; max-height:95vh; overflow:hidden; border-radius:16px;
  background:#031026; box-shadow:0 20px 60px rgba(0,0,0,.5);
  padding-bottom: calc(var(--tray-h) + var(--cta-pad)); /* room for CTA */
}
.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:var(--z-bg);
}
.header-wrap{
  position:absolute; left:50%; transform:translateX(-50%); top:12px; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:var(--z-ui);
  text-align:center; pointer-events:none;
}
.logo{height:36px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.headline{height:64px; filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}

.court{
  position:absolute; inset:64px 0 calc(var(--tray-h) + var(--cta-pad)) 0; z-index:var(--z-hoop);
  display:grid; place-items:center;
}

/* Make the hoop image visually smaller; adjust these two values to taste */
.hoop{
  position:absolute;
  top:48px;    /* was 30px — increase to move further down */
  width:48%;
  max-width:420px;
  pointer-events:none;
}

.playfield{
  position:absolute; inset:0; width:100%; height:100%; z-index:var(--z-canvas);
  touch-action:none;
}

.tray{
  position:absolute; left:0; right:0; bottom: var(--cta-pad); height:var(--tray-h); z-index:var(--z-ui);
  backdrop-filter: blur(6px); background:linear-gradient(0deg, rgba(2,6,16,.9), rgba(2,6,16,.6));
  display:flex; align-items:center; justify-content:center; gap:18px; padding:10px 14px;
}
.tray .item{
  position:relative; width:100px; height:132px; display:grid; place-items:end center; cursor:pointer; transition:transform .12s ease;
}
.tray .item img{
  max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(0,0,0,.6));
  user-select:none; -webkit-user-drag:none;
}
.tray .item.active{ transform:translateY(-6px) scale(1.05) }
.tray .item:focus-visible{ outline:3px solid var(--accent); outline-offset:4px; border-radius:8px }

/* CTA below the tray */
.cta{
  position:absolute; left:50%; transform:translateX(-50%); bottom:16px; z-index:var(--z-ui);
  background:transparent; border:0; padding:0; cursor:pointer;
}
.cta img{height:44px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}

.modal{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:var(--z-modal);
  background:rgba(0,0,0,.5);
}
.modal.show{ display:flex }
.modal-card{
  width:min(92%,520px); background:var(--card); border-radius:16px; padding:18px; box-shadow:0 14px 50px rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.08);
}
.close{
  position:absolute; margin:8px; right:8px; top:8px; width:36px; height:36px; border-radius:10px; border:0; cursor:pointer;
  background:#1b2238; color:#fff; font-size:22px; line-height:1;
}
.recipe-head{display:flex; gap:14px; align-items:center; margin-bottom:8px}
.recipe-image{width:72px; height:96px; object-fit:contain}
.sub{opacity:.8; margin:0}
.recipe-body{white-space:pre-wrap; opacity:.95}
.primary{
  display:block; width:100%; margin-top:14px; padding:12px 16px; border-radius:12px; border:0;
  background:#2563eb; color:#fff; font-weight:700; cursor:pointer;
}

@media (max-width: 640px){
  .headline{height:54px}
  .logo{height:30px}
  .tray .item{ width:86px; height:118px }
  .hoop{ width:52%; max-width:360px; } /* slightly larger on small screens if desired */
}