:root{
  --bg:#0b1020;
  --panel:#0f1733;
  --panel2:#0c1330;
  --text:#e9eeff;
  --muted:#a9b3d6;
  --outline:rgba(255,255,255,.08);
  --shadow: 0 18px 60px rgba(0,0,0,.42);

  --v:#d66052;     /* red-ish */
  --m3:#93a0ad;    /* gray */
  --z:#b7cf84;     /* green-ish */

  --btn:#24335f;
  --btn2:#2c3c6f;
  --btnText:#f3f6ff;
  --radius:16px;
}

*{box-sizing:border-box}
[hidden]{display:none !important;}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: radial-gradient(1200px 900px at 60% 0%, #182257 0%, var(--bg) 50%, #070a14 100%);
  color:var(--text);
  overflow:hidden;
}

/* Reduce horizontal back-swipe / overscroll behavior in embedded webviews */
html, body{
  overscroll-behavior-x: none;
}

.app{
  height:100%;
  display:flex;
  flex-direction:column;
  padding: max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  gap:10px;
}

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.brand__title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:16px;
  line-height:1.1;
}
.brand__subtitle{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
  line-height:1.2;
}
.linkPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--outline);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,255,.92);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
.linkPill:hover{background: rgba(255,255,255,.09);}
.linkPill:active{transform: translateY(1px);}

.legend{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.pill{
  display:flex;
  align-items:center;
  gap:8px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--outline);
  padding:6px 10px;
  border-radius:999px;
  backdrop-filter: blur(8px);
}
.pill__k{
  font-weight:800;
  font-size:12px;
  border-radius:8px;
  padding:2px 7px;
  border: 1px solid rgba(0,0,0,.12);
  color:#0e1326;
}
.pill__t{
  font-size:12px;
  color:var(--text);
  opacity:.95;
  white-space:nowrap;
}
.pill--v .pill__k{background:var(--v)}
.pill--m3 .pill__k{background:var(--m3)}
.pill--z .pill__k{background:var(--z)}

.stage{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
}

.game{
  width: min(100%, 720px);
  height: 100%;
  max-height: 100%;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--outline);
  box-shadow: var(--shadow);
  touch-action: none; /* we handle pointer input */
}

/* Invisible control pad (keeps touches away from screen edges in Telegram webview) */
.touchPad{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: 46%;
  max-height: 520px;
  pointer-events:auto;
  touch-action: none;
  /* keep interaction away from left/right edges to avoid Telegram back-swipe */
  margin: 0 26px max(0px, env(safe-area-inset-bottom));
  background: transparent;
}

/* On smaller screens hide legend to save vertical space (Telegram webview friendly) */
@media (max-width: 700px){
  .legend{display:none}
}

.hud{
  position:absolute;
  left:0;
  right:0;
  top:0;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  pointer-events:none;
}
.hud__left,.hud__right{display:flex; gap:8px; align-items:center; pointer-events:auto;}
.hud__center{
  flex: 1;
  min-width: 0;
  pointer-events:none;
  display:flex;
  justify-content:center;
}
.pickupMsg{
  opacity:0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--outline);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(8px);
  color: rgba(233,238,255,.92);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  text-align:center;
  box-shadow: 0 16px 50px rgba(0,0,0,.25);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pickupMsg--show{
  opacity:1;
  transform: translateY(0);
}

.timer{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width: 74px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--outline);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  font-weight:900;
  letter-spacing:.2px;
  font-size:13px;
  color: rgba(233,238,255,.92);
  font-variant-numeric: tabular-nums;
}

.lives{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--outline);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}
.heart{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  color:#ff5a6a;
  text-shadow: 0 6px 18px rgba(255,90,106,.22);
}
.heart--off{
  opacity:.28;
  filter: grayscale(1);
}

.btn{
  appearance:none;
  border:1px solid var(--outline);
  background: linear-gradient(180deg, var(--btn2), var(--btn));
  color:var(--btnText);
  padding:10px 12px;
  border-radius:14px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  user-select:none;
}
.btn--icon{
  width: 42px;
  padding: 10px 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 15px;
  font-weight: 900;
}
.btn:active{transform: translateY(1px)}
.btn--ghost{
  background: rgba(255,255,255,.05);
}
.btn--primary{
  background: linear-gradient(180deg, #4c66d8, #2f46b3);
}

.file{
  display:none;
}

.overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}
.overlay__card{
  width:min(360px, 100%);
  border-radius:20px;
  padding:18px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--outline);
  box-shadow: var(--shadow);
  text-align:center;
}
.overlay__title{
  font-size:18px;
  font-weight:900;
  margin-bottom:6px;
}
.overlay__desc{
  font-size:13px;
  color:var(--muted);
  margin-bottom:14px;
}
.overlay__actions{
  display:flex;
  gap:10px;
  justify-content:center;
}
.overlay__time{
  font-size:12px;
  color: rgba(233,238,255,.78);
  margin: -6px 0 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.help{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.2;
}
.help--spacer{
  min-height: 64px;
}
.help__row{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.muted{opacity:.9}
.kbd{
  padding:3px 8px;
  border-radius:10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--outline);
  color: var(--text);
  font-weight:800;
}
.sep{opacity:.9}

@media (max-width: 380px){
  .legend{display:none}
  .game{width:100%}
}