* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 800px at 20% 0%, #1d1b3a 0%, #0a0a14 60%, #000 100%);
  color: #eef1f6;
  overflow: auto;
}

#bgParticles {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0;
}

#app { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; height: 100dvh; }

/* Loader */
.loader { position: fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index: 3; background: radial-gradient(900px 600px at 50% 0%, rgba(26,24,44,0.95), rgba(8,8,16,0.98)); backdrop-filter: blur(10px); transition: opacity .45s ease, transform .45s ease; }
.loader.hide { opacity: 0; pointer-events: none; transform: scale(1.02); }
.loader-inner { width: min(520px, 92%); padding: 24px 20px; text-align: center; }
.logo-wrap { display: inline-block; will-change: transform; transform: translate3d(0,0,0); }
.loader-logo { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5)); border-radius: 12px; animation: logoPop 800ms cubic-bezier(.2,.8,.2,1) 120ms both, logoBreath 3.6s ease-in-out 1s infinite; }
.loader-title { margin: 14px 0 6px; font-size: 22px; letter-spacing: 0.2px; background: linear-gradient(90deg, #ffffff, #bfc4ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 2px 16px rgba(104, 92, 255, 0.25); animation: fadeUp 700ms ease 180ms both; }
.loader-sub { margin: 0 0 14px; opacity: 0.85; animation: fadeUp 700ms ease 300ms both; }
.loader-progress { position: relative; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
.loader-progress span { position: absolute; inset: 0; width: 0%; background: linear-gradient(90deg, #6a5cff, #4437ff); box-shadow: 0 6px 16px rgba(68,55,255,0.5); animation: loaderBar 2.2s ease-in-out infinite; }
@keyframes loaderBar {
  0% { left: -30%; width: 30%; }
  50% { left: 20%; width: 60%; }
  100% { left: 100%; width: 30%; }
}

/* Subtle entrance/breath animations */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes logoPop {
  0% { opacity: 0; transform: scale(.8); }
  60% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes logoBreath {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5)); }
  50% { transform: scale(1.02); filter: drop-shadow(0 14px 36px rgba(0,0,0,0.55)); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .loader, .loader * { animation: none !important; transition: none !important; }
}

.glass {
  backdrop-filter: blur(12px) saturate(120%);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.card.glass { 
  background: rgba(255,255,255,0.06); 
  border: 1px solid rgba(255,255,255,0.08); 
  border-radius: 16px; 
  padding: 14px; 
  backdrop-filter: blur(10px); 
}

/* Gecko compact price widget */
.gecko-widget { display: grid; gap: 10px; }
.gecko-widget .gw-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gecko-widget .gw-title { display: flex; align-items: center; gap: 10px; }
.gecko-widget .gw-logo { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
.gecko-widget .gw-name { font-weight: 700; line-height: 1.1; }
.gecko-widget .gw-link { display: inline-block; font-size: 12px; opacity: .7; text-decoration: none; color: #9ecbff; }
.gecko-widget .gw-link:hover { text-decoration: underline; }
.gecko-widget .gw-price { font-size: 22px; font-weight: 800; letter-spacing: .2px; }
.gecko-widget .gw-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.gecko-widget .gw-stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 8px 10px; }
.gecko-widget .gw-stat .label { font-size: 12px; opacity: .7; margin-bottom: 2px; }
.gecko-widget .gw-stat .value { font-size: 14px; font-weight: 700; }
.gecko-widget .gw-updated { font-size: 12px; opacity: .65; }
.text-green { color: #3bd17f; }
.text-red { color: #ff6b6b; }

.topbar, .bottombar {
  margin: 12px; padding: 16px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.brand .logo { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.brand .title { font-weight: 800; letter-spacing: 0.3px; font-size: 16px; white-space: normal; overflow: visible; text-overflow: clip; }

.stats { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.stat { display: flex; align-items: center; gap: 6px; line-height: 1; padding: 4px 6px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.stat .icon { font-size: 14px; width: 1em; height: 1em; line-height: 1em; display: inline-block; }
.stat span { font-weight: 700; font-size: 13px; }
.icon-btn { appearance:none; border:0; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; cursor:pointer; background: rgba(255,255,255,0.06); color:#fff; border:1px solid rgba(255,255,255,0.1); }
.icon-btn:active { transform: translateY(1px); }

main { display: block; padding: 10px; overflow: visible; height: 100%; min-height: 0; }
.screen { display: none; width: min(740px, 100%); padding: 14px; padding-bottom: 140px; margin: 0 auto; min-height: 0; height: 100%; }
.screen.active { display: block; }

/* Enable scroll on menu and contracts screens */
#screen-menu,
#screen-contracts {
  overflow-y: auto; height: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* Hide scrollbar only for the menu screen (contracts keeps visible scrollbar) */
#screen-menu { scrollbar-width: none; -ms-overflow-style: none; }
#screen-menu::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Game screen: avoid scrolling and suppress browser gestures */
#screen-game {
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none; /* prevent UA panning/zooming inside game container */
}
.screen.active { display: block; }

.card { padding: 22px; }
.card h1, .card h2 { margin: 0 0 10px; }
.card p { margin: 0 0 16px; opacity: 0.9; }

/* vertical spacing between cards */
.screen .card { margin-bottom: 16px; }

/* Text clamp utilities */
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 1; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; }

/* Latest post card tweaks */
#latestPostCard h2 { font-size: 18px; line-height: 1.25; }
#latestPostCard p { font-size: 14px; line-height: 1.35; opacity: 0.95; }

.actions { margin-top: 14px; display: flex; gap: 12px; justify-content: center; }
.btn {
  appearance: none; border: 0; padding: 12px 18px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #24223f, #1b1a2f);
  color: #fff; font-weight: 600; letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,0.1);
}
.btn.primary {
  background: linear-gradient(180deg, #6a5cff, #4437ff);
  box-shadow: 0 8px 20px rgba(68,55,255,0.5);
}
.btn.disabled, .btn:disabled {
  cursor: not-allowed;
  background: linear-gradient(180deg, #5a5475, #3a3555); /* grey‑purple */
  border-color: rgba(255,255,255,0.08);
  box-shadow: none;
  opacity: 0.95;
}
.btn:disabled:active { transform: none; }
.btn.wide { width: 100%; padding: 16px 18px; font-size: 18px; }
.btn:active { transform: translateY(1px); }

/* Play row with 1/4 Trophy (left) and 3/4 Play (right) */
.play-row { display: grid; grid-template-columns: 1fr 3fr; gap: 10px; align-items: stretch; }
.play-row #btnPlay { grid-column: 2; grid-row: 1; width: 100%; padding: 16px 18px; font-size: 18px; }
.play-row #btnLeaderboard { grid-column: 1; grid-row: 1; width: 100%; font-size: 22px; padding: 16px 0; display: grid; place-items: center; }
.btn.trophy { background: linear-gradient(180deg, #2a2746, #1c1a2f); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.btn.trophy:active { transform: translateY(1px); filter: brightness(0.95); }

/* Contracts */
.contracts-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.contract-frame { border: 1px solid rgba(255,255,255,0.12); position: relative; }
.contract-title { font-weight: 800; font-size: 18px; margin-bottom: 6px; }
.contract-desc { opacity: .85; font-size: 14px; margin-bottom: 12px; }
.contract-split { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: 10px; padding: 10px 0; }
.contract-split::before { content: ""; grid-column: 2 / 3; grid-row: 1 / 3; width:1px; height:100%; background: rgba(255,255,255,0.12); justify-self:center; }
.contract-split .minus, .contract-split .plus { display:flex; flex-direction:column; align-items:center; gap:8px; }
.vstack { display:flex; flex-direction:column; gap:8px; align-items:center; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; font-weight:700; font-size:14px; border:1px solid rgba(255,255,255,0.1); }
.badge img { width:18px; height:18px; object-fit:contain; display:block; }
.badge-red { background: rgba(255,77,109,0.15); color:#ff6b81; border-color: rgba(255,107,129,0.35); }
.badge-green { background: rgba(68,255,153,0.12); color:#44ff99; border-color: rgba(68,255,153,0.35); }
.contract-actions { display:flex; align-items:center; gap:10px; margin-top: 10px; position: relative; }
.deal-status { padding:8px 12px; border-radius:10px; background: rgba(68,255,153,0.15); color:#44ff99; border:1px solid rgba(68,255,153,0.35); font-weight:800; }
.deal-status[aria-hidden="true"] { display:none; }

 

/* Profile redesigned */
.profile-card { padding: 18px; }
.profile-header { display:flex; align-items:center; gap:12px; margin-bottom: 10px; }
.profile-header .avatar { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }

/* Profile as modal overlay while game continues */
#screen-profile.as-modal { 
  position: fixed; inset: 0; z-index: 11000; display: grid !important; place-items: center; 
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
}
#screen-profile.as-modal .profile-card { 
  width: min(92vw, 520px); max-height: min(86vh, 720px); overflow: auto; position: relative; 
}
#screen-profile.as-modal .profile-card::after {
  content: ""; position: sticky; left: 0; right: 0; bottom: 0; height: 26px; display: block;
  margin-top: -26px; /* sits at the bottom edge */
  background: linear-gradient(180deg, rgba(20,20,34,0), rgba(20,20,34,0.9));
  pointer-events: none;
}
.profile-header .name { font-weight: 800; font-size: 18px; line-height: 1.1; }
.profile-header .uid { opacity: .75; font-size: 12px; margin-top: 4px; }
.profile-id { display:flex; flex-direction:column; gap:2px; }

.profile-stats { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 8px; }
.profile-stats .pstat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 10px 12px; }
.profile-stats .pstat.wide { grid-column: 1 / -1; }
.profile-stats .label { font-size: 12px; opacity: .75; }
.profile-stats .value { font-weight: 800; margin-top: 2px; }

.profile-settings { margin-top: 12px; display: grid; gap: 10px; }
.profile-settings .setting { display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.profile-settings .setting .title { font-weight: 700; }
.profile-settings .setting .sub { font-size: 12px; opacity: .75; }

/* Control mode two-button toggle */
.mode-toggle { display: grid; grid-template-columns: 1fr; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 6px; gap: 6px; }
.mode-toggle button { appearance: none; border: 0; padding: 10px 12px; border-radius: 10px; color: #dfe6ff; background: transparent; font-weight: 700; cursor: pointer; white-space: nowrap; width: 100%; text-align: center; }
.mode-toggle button.active { color: #fff; background: linear-gradient(180deg, #2a2746, #1c1a2f); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 6px 16px rgba(0,0,0,0.35); }
.mode-toggle button:active { transform: translateY(1px); }
.mode-toggle [role="tab"] { outline: none; }
.mode-toggle:focus-within { box-shadow: 0 0 0 2px rgba(108,95,255,0.35); }

@media (max-width: 380px) {
  .mode-toggle button { padding: 9px 10px; font-size: 13px; }
}

/* Pretty switch */
.switch { position: relative; display: inline-block; width: 52px; height: 30px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.14); transition: background .2s ease, border-color .2s ease; border-radius: 999px; }
.slider:before { content: ""; position: absolute; height: 24px; width: 24px; left: 3px; top: 50%; transform: translateY(-50%); background: linear-gradient(180deg, #fff, #dcdcff); border-radius: 50%; box-shadow: 0 6px 16px rgba(0,0,0,0.3); transition: transform .2s ease; }
.switch input:checked + .slider { background: linear-gradient(180deg, #6a5cff, #4437ff); border-color: rgba(68,55,255,0.6); }
.switch input:checked + .slider:before { transform: translate(22px, -50%); }

/* Danger button variant */
.btn.danger { background: linear-gradient(180deg, #3b1f2b, #2a1620); border-color: rgba(255,120,140,0.2); color: #ffe6ea; }
.btn.danger:active { transform: translateY(1px); }

/* Profile links */
.profile-links { display: grid; gap: 8px; margin-top: 12px; }
.profile-links .plink { display: block; text-decoration: none; color: #dfe6ff; opacity: .95; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 12px 14px; border-radius: 12px; font-weight: 600; }
.profile-links .plink:active { transform: translateY(1px); }

/* Confirm modal */
#modalConfirm {
  position: fixed; inset: 0; z-index: 9998;
  display: grid; place-items: center;
  opacity: 1; visibility: visible; pointer-events: auto;
}
#modalConfirm[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
#modalConfirm .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
#modalConfirm .modal-dialog { position: relative; width: min(92vw, 520px); }

/* Leaderboard modal */
#modalLeaderboard[aria-hidden="true"] { display: none; }
#modalLeaderboard { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; }
#modalLeaderboard .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.lb-dialog { position: relative; width: min(92vw, 520px); padding: 14px; animation: fadeUp 220ms ease both; }
.lb-head { display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.lb-body { margin-top: 8px; }
.lb-loading { opacity: .8; text-align: center; padding: 10px 0; }
.lb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; counter-reset: rank; }
.lb-list li { position: relative; display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.lb-user { display:flex; align-items:center; gap: 10px; min-width: 0; }
.lb-rank { font-weight: 900; width: 28px; text-align: right; }
.lb-name { font-weight: 700; white-space: nowrap; /* show up to JS-truncated 15 chars fully */ }
.lb-coins { font-weight: 800; }
/* self row and label */
.lb-self { background: rgba(108,95,255,0.10); border-color: rgba(108,95,255,0.35) !important; }
.lb-you { font-size: 12px; font-weight: 800; color: #cfd4ff; opacity: 0.95; padding: 2px 8px; border-radius: 999px; background: rgba(108,95,255,0.18); border: 1px solid rgba(108,95,255,0.35); }
/* medal colors */
.medal-1 { 
  background: linear-gradient(180deg, rgba(255,215,0,0.18), rgba(255,215,0,0.08)); 
  border-color: rgba(255,215,0,0.45) !important; 
  box-shadow: 
    0 0 0 1px rgba(255,215,0,0.35) inset,
    0 0 22px rgba(255,215,0,0.28),
    0 0 44px rgba(255,215,0,0.22);
  animation: medalGoldPulse 2600ms ease-in-out infinite alternate;
}
@keyframes medalGoldPulse {
  0% { box-shadow:
        0 0 0 1px rgba(255,215,0,0.35) inset,
        0 0 18px rgba(255,215,0,0.24),
        0 0 36px rgba(255,215,0,0.18);
     }
  100% { box-shadow:
        0 0 0 1px rgba(255,215,0,0.45) inset,
        0 0 28px rgba(255,215,0,0.34),
        0 0 56px rgba(255,215,0,0.26);
     }
}
.medal-2 { background: linear-gradient(180deg, rgba(192,192,192,0.18), rgba(192,192,192,0.08)); border-color: rgba(192,192,192,0.35) !important; }
.medal-3 { background: linear-gradient(180deg, rgba(205,127,50,0.18), rgba(205,127,50,0.08)); border-color: rgba(205,127,50,0.35) !important; }
/* colored ranks 1-3 */
.medal-1 .lb-rank { color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,0.35); }
.medal-2 .lb-rank { color: #c0c0c0; text-shadow: 0 0 8px rgba(192,192,192,0.3); }
.medal-3 .lb-rank { color: #cd7f32; text-shadow: 0 0 8px rgba(205,127,50,0.3); }

.profile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.label { opacity: 0.7; font-size: 12px; }
.value { font-weight: 700; }

.hud { padding: 8px 12px; margin-bottom: 10px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }

#gameCanvas {
  width: 100%; height: auto; max-width: 520px; aspect-ratio: 2/3;
  background: radial-gradient(600px 400px at 50% -10%, rgba(108,95,255,0.12), rgba(0,0,0,0.3) 60%), #090912;
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  /* Fit into viewport alongside HUD and controls */
  max-height: calc(100dvh - 240px);
  touch-action: none; /* keep swipe controls custom, block scroll */
  overscroll-behavior: contain;
}

/* Wrap canvas so we can place overlay tap zones without reflow */
.game-area {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* Enforce 3:4 aspect for the maze canvas */
#gameCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  display: block;
}

/* Gamepad controls under the canvas (mobile/touch) */
.gamepad {
  display: none; /* default hidden; shown on coarse pointer */
  margin: 14px auto 0;
  max-width: 520px;
  padding-bottom: 8px;
}
.gamepad .gp-row { display: flex; justify-content: center; gap: 12px; }
.gamepad .gp-top { margin-bottom: 8px; }
.gamepad .gp-btn {
  width: 58px; height: 58px; border-radius: 14px; font-weight: 800; font-size: 18px;
  color: #fff; background: linear-gradient(180deg, #222038, #1a182c);
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}
.gamepad .gp-btn:active { filter: brightness(0.9); transform: translateY(1px); }

/* WASD indicator (desktop) */
.kbd-wasd { display: none; margin: 12px auto 0; max-width: 520px; text-align: center; }
.kbd-wasd .kbd-row { display: flex; justify-content: center; gap: 10px; margin: 4px 0; }
.kbd-wasd .key {
  width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center;
  color: #cfd2ff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  font-weight: 800; letter-spacing: 0.5px;
}
.kbd-wasd .key.active { background: rgba(255,255,255,0.16); color: #fff; }

/* Pointer-based adaptation */
@media (pointer: coarse) {
  .gamepad { display: block; position: static !important; }
  .kbd-wasd { display: none; }
  /* Avoid taps too close to iOS home bar: remove bottom edge-tap on touch */
  .edge-tap.et-bottom { display: none; }
  /* Add space under canvas so gamepad sits below, not overlapping */
  .game-area { margin-bottom: 20px; }
  /* Move maze higher: compact game screen padding and HUD */
  #screen-game { padding: 8px 8px 8px; }
  .hud { margin-bottom: 6px; padding: 6px 10px; font-size: 12px; }
  .gamepad { margin-top: 8px; }
}
@media (pointer: fine) {
  .gamepad { display: none; }
  .kbd-wasd { display: block; }
}

/* iOS specific nudges to avoid Home indicator in non-fullscreen webview (e.g., Telegram) */
@supports (-webkit-touch-callout: none) {
  /* Extra breathing room at bottom in iOS webviews (e.g., Telegram) */
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); }
}

/* Compact gamepad on shorter screens to avoid overflow */
@media (max-height: 700px) and (pointer: coarse) {
  .gamepad { margin-top: 10px; }
  .gamepad .gp-row { gap: 10px; }
  .gamepad .gp-top { margin-bottom: 6px; }
  .gamepad .gp-btn { width: 52px; height: 52px; border-radius: 12px; font-size: 16px; }
}
@media (max-height: 620px) and (pointer: coarse) {
  .gamepad { margin-top: 8px; }
  .gamepad .gp-row { gap: 8px; }
  .gamepad .gp-top { margin-bottom: 4px; }
  .gamepad .gp-btn { width: 46px; height: 46px; border-radius: 10px; font-size: 15px; }
}
@media (max-height: 560px) and (pointer: coarse) {
  .gamepad { margin-top: 6px; }
  .gamepad .gp-row { gap: 6px; }
  .gamepad .gp-top { margin-bottom: 3px; }
  .gamepad .gp-btn { width: 42px; height: 42px; border-radius: 10px; font-size: 14px; }
}

/* Invisible edge tap areas for mobile directional control */
.edge-tap {
  position: absolute;
  z-index: 5;
  background: transparent; /* keep UI clean */
  pointer-events: auto;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation; /* allow quick taps */
}
.edge-tap.et-left  { left: 0; top: 26%; bottom: 26%; width: 28%; }
.edge-tap.et-right { right: 0; top: 26%; bottom: 26%; width: 28%; }
.edge-tap.et-top   { left: 28%; right: 28%; top: 0; height: 26%; }
.edge-tap.et-bottom{ left: 28%; right: 28%; bottom: 0; height: 26%; }

/* Do not show debug background, but keep here commented if needed */
/* .edge-tap { background: rgba(255,255,255,0.02); } */

.touch-controls { display: none !important; place-items: center; gap: 10px; margin-top: 12px; }
.touch-controls .h { display: flex; gap: 10px; }
.touch-controls button {
  width: 56px; height: 56px; border-radius: 50%; font-size: 18px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #222038, #1a182c);
  border: 1px solid rgba(255,255,255,0.1);
}

@media (min-width: 700px) {
  .touch-controls { display: none !important; }
}

/* Reduce sizes on short screens to avoid scroll in game */
@media (max-height: 740px) {
  #screen-game { padding-bottom: 10px; }
  .hud { margin-bottom: 6px; font-size: 13px; }
  #gameCanvas { max-height: calc(100dvh - 200px); }
  .touch-controls { gap: 8px; margin-top: 8px; }
  .touch-controls .h { gap: 8px; }
  .touch-controls button { width: 48px; height: 48px; font-size: 16px; }
}

@media (max-height: 680px) {
  #screen-game { padding: 10px 10px 8px; }
  .hud { margin-bottom: 6px; font-size: 12px; }
  #gameCanvas { max-height: calc(100dvh - 180px); max-width: 480px; }
  .touch-controls { gap: 8px; margin-top: 6px; }
  .touch-controls .h { gap: 6px; }
  .touch-controls button { width: 44px; height: 44px; font-size: 15px; }
}

@media (max-height: 620px) {
  #screen-game { padding: 8px 8px 6px; }
  .hud { margin-bottom: 4px; font-size: 12px; }
  #gameCanvas { max-height: calc(100dvh - 160px); max-width: 460px; }
  .touch-controls { gap: 6px; margin-top: 6px; }
  .touch-controls .h { gap: 6px; }
  .touch-controls button { width: 40px; height: 40px; font-size: 14px; }
}

@media (max-height: 580px) {
  #screen-game { padding: 6px; }
  .hud { margin-bottom: 2px; font-size: 11px; }
  #gameCanvas { max-height: calc(100dvh - 130px); max-width: 420px; }
  .touch-controls { gap: 4px; margin-top: 4px; }
  .touch-controls .h { gap: 4px; }
  .touch-controls button { width: 34px; height: 34px; font-size: 12px; }
}

/* Very short screens (old iPhone SE landscape-like heights) */
@media (max-height: 540px) {
  #screen-game { padding: 4px; }
  .hud { margin-bottom: 2px; font-size: 10px; }
  #gameCanvas { max-height: calc(100dvh - 120px); max-width: 400px; }
  .touch-controls { gap: 4px; margin-top: 2px; }
  .touch-controls .h { gap: 4px; }
  .touch-controls button { width: 32px; height: 32px; font-size: 12px; }
}

/* Small screens tightening */
@media (max-width: 380px) {
  .brand .logo { width: 32px; height: 32px; }
  .brand .title { font-size: 14px; }
  .icon-btn { width: 30px; height: 30px; }
}

/* Short screens: tighten header, cards, and chart height */
@media (max-height: 820px) {
  /* ensure content isn't hidden behind fixed menu */
  #screen-menu { padding-bottom: 160px; }
  #geckoCard { height: auto !important; }
}

@media (max-height: 740px) {
  .topbar, .bottombar { margin: 8px; padding: 10px; }
  .brand .logo { width: 36px; height: 36px; }
  .brand .title { font-size: 15px; }
  .stats { gap: 6px; }
  .card { padding: 18px; }
  #geckoCard { height: auto !important; }
}

@media (max-height: 620px) {
  .topbar, .bottombar { margin: 6px; padding: 8px 10px; }
  .brand .logo { width: 32px; height: 32px; }
  .brand .title { font-size: 14px; }
  .card { padding: 16px; }
  #geckoCard { height: auto !important; }
  /* extra bottom space for fixed menu panel */
  #screen-menu { padding-bottom: 160px; }
}

footer small { opacity: 0.7; }
code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 6px; }

/* Menu bottom panel */
.menu-bottom { position: fixed; left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 2; display: grid; gap: 10px; }
.menu-bottom { z-index: 10; }
.bottom-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { padding: 12px 14px; border-radius: 12px; display: grid; gap: 6px; }
.stat-card .label { opacity: 0.75; font-size: 12px; }
.stat-card .value { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.stat-card .value .icon { color: #ff4d6d; }
.lives-inline { display:flex; align-items:center; gap:8px; justify-content:center; opacity:0.9; }
.lives-inline .icon { font-size: 18px; }

/* Stories Overlay */
#storiesOverlay[aria-hidden="true"] { display: none; }
#storiesOverlay {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(4px);
}
#storiesOverlay img#storyImage {
  max-width: 92vw; max-height: calc(86vh - 64px); /* leave room for bottom CTA */
  width: auto; height: auto; object-fit: contain; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.story-frame { position: relative; display: inline-block; }
.stories-progress {
  position: absolute; left: 10px; right: 10px; top: 8px; height: 3px;
  background: rgba(255,255,255,0.18); border-radius: 999px; overflow: hidden;
  pointer-events: none; z-index: 10001;
}
.stories-progress::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, #fff, #ffe6e9); border-radius: inherit;
  transform-origin: left center;
  width: calc(var(--p, 0) * 1%);
}

/* Story slide animations */
.story-anim-next { animation: storySlideInNext 280ms ease-out; }
.story-anim-prev { animation: storySlideInPrev 280ms ease-out; }
@keyframes storySlideInNext {
  from { opacity: 0; transform: translateX(12px) scale(0.995); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes storySlideInPrev {
  from { opacity: 0; transform: translateX(-12px) scale(0.995); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.stories-close {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.4); color: #fff; font-size: 18px; line-height: 1;
  display: grid; place-items: center; cursor: pointer; z-index: 10000;
}
.tap-left, .tap-right {
  position: fixed; top: 0; bottom: 0; width: 50vw; cursor: pointer; z-index: 9998;
}
.tap-left { left: 0; }
.tap-right { right: 0; }

/* Stories FX Canvas (fireworks) */
#storiesFx[aria-hidden="true"] { display: none; }
#storiesFx {
  position: fixed; inset: 0; z-index: 10002; pointer-events: none;
}

/* CTA buttons below story image (both link and button share same look) */
.story-cta {
  display: none; position: absolute; left: 50%; transform: translateX(-50%);
  /* position overridden per id */
  padding: 10px 14px; border-radius: 12px; font-weight: 700; color: #111;
  background: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  z-index: 10003; cursor: pointer; user-select: none; touch-action: manipulation;
  border: 0; appearance: none;
}
.story-cta:active { transform: translateX(-50%) translateY(1px); }

/* Place "Написать мне" always in viewport at the bottom */
#storyCTA {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  color: #111; background: #fff;
  max-width: 92vw; text-align: center;
}

/* Place "Начать путешествие" on the image near bottom; make it primary */
#storyStartBtn {
  bottom: 20px;
  color: #fff;
  background: linear-gradient(180deg, #6a5cff, #4437ff);
  box-shadow: 0 10px 24px rgba(68,55,255,0.55);
}

/* Very short screens: move toasts to top and lift Start button a bit */
@media (max-height: 620px) {
  #toasts { top: max(12px, env(safe-area-inset-top)); bottom: auto; }
  .toast { animation: toastInTop 220ms ease-out both; }
  .toast.hide { animation: toastOutTop 180ms ease-in both; }
  @keyframes toastInTop { from { opacity: 0; transform: translateY(-8px);} to { opacity: 1; transform: translateY(0);} }
  @keyframes toastOutTop { from { opacity: 1; transform: translateY(0);} to { opacity: 0; transform: translateY(-6px);} }
  #storyStartBtn { bottom: 24px; }
}

/* Ultra small heights: shrink CTAs */
@media (max-height: 540px) {
  .story-cta { padding: 8px 12px; font-size: 13px; }
  #storyCTA { bottom: calc(env(safe-area-inset-bottom) + 10px); }
  #storyStartBtn { bottom: 18px; }
  #storiesOverlay img#storyImage { max-height: calc(80vh - 64px); }
}

/* Toasts */
#toasts {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; gap: 10px; z-index: 12000; width: min(92vw, 520px); pointer-events: none;
}
.toast {
  pointer-events: auto;
  padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(20,20,34,0.92); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex; align-items: center; gap: 10px; font-weight: 600;
  animation: toastIn 220ms ease-out both;
}
.toast.info { border-color: rgba(100,120,255,0.35); }
.toast.success { border-color: rgba(80,200,120,0.35); }
.toast.warn { border-color: rgba(250,190,60,0.35); }
.toast.error { border-color: rgba(255,90,90,0.35); }
.toast .icon { font-size: 16px; }
.toast .close { margin-left: auto; background: transparent; border: 0; color: #fff; opacity: 0.7; cursor: pointer; }
.toast.hide { animation: toastOut 180ms ease-in both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }
@keyframes toastOut { from { opacity: 1; transform: translateY(0);} to { opacity: 0; transform: translateY(6px);} }

/* Confirm Modal */
#modalConfirm[aria-hidden="true"] { display: none; }
#modalConfirm { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; }
#modalConfirm .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
#modalConfirm .modal-dialog { position: relative; width: min(92vw, 420px); padding: 16px; animation: fadeUp 220ms ease both; }
#modalConfirm h3 { margin: 4px 0 8px; }
#modalConfirm p { margin: 0 0 14px; opacity: 0.9; }
#modalConfirm .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* On touch devices, reserve space for HUD + gamepad below the maze */
@media (pointer: coarse) {
  /* Base reservation so gamepad sits below canvas, not off-screen */
  #screen-game #gameCanvas { max-height: calc(100dvh - 320px); max-width: 420px; /* smaller maze, strict 3:4 kept */ }
}
/* Tall touch devices (e.g., iPhone 15 Pro/Max): lift controls further from bottom */
@media (min-height: 900px) and (pointer: coarse) {
  /* Make maze a bit shorter to create more room for gamepad above home bar */
  #screen-game #gameCanvas { max-height: calc(100dvh - 360px); }
  .game-area { margin-bottom: 24px; }
  .gamepad { margin-top: 12px; }
  /* Extra bottom breathing room beyond safe-area to avoid visual crowding */
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
}
/* Slightly relax on shorter heights */
@media (max-height: 700px) and (pointer: coarse) {
  #screen-game #gameCanvas { max-height: calc(100dvh - 270px); max-width: 400px; }
}
@media (max-height: 620px) and (pointer: coarse) {
  #screen-game #gameCanvas { max-height: calc(100dvh - 250px); max-width: 380px; }
}

/* Precise iPhone 15 Pro Max viewport (Telegram/Safari webview often 430x932) */
@media (width: 430px) and (height: 932px) and (pointer: coarse) {
  #screen-game #gameCanvas { max-height: calc(100dvh - 380px); }
  .game-area { margin-bottom: 26px; }
  .gamepad { margin-top: 14px; }
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); }
}

/* iPhone SE-like mini-app viewport (375x667) on touch */
@media (max-width: 375px) and (max-height: 667px) and (pointer: coarse) {
  #screen-game { padding: 6px 6px 8px; }
  .hud { margin-bottom: 4px; padding: 6px 8px; font-size: 11px; }
  /* Keep strict 3:4, but shrink to fit HUD + gamepad */
  #screen-game #gameCanvas { max-width: 360px; max-height: calc(100dvh - 240px); }
  .game-area { margin-bottom: 12px; }
  .gamepad { margin-top: 6px; }
  .gamepad .gp-row { gap: 8px; }
  .gamepad .gp-top { margin-bottom: 4px; }
  .gamepad .gp-btn { width: 44px; height: 44px; border-radius: 10px; font-size: 14px; }
}