/* The board's look: layout and the game's own colours (--gm-*, defined in theme.css). The platform's screens are the SDK's and
   take their colours from the --pg-* tokens. Phone first (375 x 812), safe areas from the Telegram shell (--pg-inset-*).
   A dragged card lives in the page's stacking context: no zone below makes its own (no transform, filter or overflow on them),
   or the card would slip under the deck. */
html, body { margin: 0; height: 100%; background: var(--gm-bg, #0b0f17); color: var(--gm-text, #eef2f8); font-family: var(--pg-font, system-ui, -apple-system, "Segoe UI", sans-serif); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
#app { height: 100%; }
.gm-screen { height: 100%; }
.gm-screen[hidden] { display: none; }
.gm-screen--over { height: 0; }

.gm-board, .gm-landing {
  position: relative; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: 8px; overflow-x: clip;
  padding: calc(var(--pg-inset-top, env(safe-area-inset-top, 0px)) + 8px) 12px calc(var(--pg-inset-bottom, env(safe-area-inset-bottom, 0px)) + 12px);
  background: var(--gm-backdrop);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

/* --- the HUD ------------------------------------------------------------------------------------------------------------- */
.gm-hud { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 13px; color: var(--gm-dim); white-space: nowrap; }
.gm-badge { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-text); background: var(--gm-surface); border: 1px solid var(--gm-line); }
.gm-badge--live { color: var(--gm-up); border-color: var(--gm-up); background: var(--gm-up-soft); }
.gm-badge--fixture { color: var(--gm-gold); border-color: var(--gm-gold); }
.gm-stake { flex: none; font-weight: 700; color: var(--gm-text); white-space: nowrap; }
.gm-hand { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: clip; }
.gm-money { white-space: nowrap; }
.gm-money-code { font-size: .68em; font-weight: 700; opacity: .75; letter-spacing: .02em; }
.gm-offline { color: var(--gm-gold); font-size: 12px; }
.gm-hud-actions { display: flex; gap: 6px; margin-left: auto; }
.gm-icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 12px; cursor: pointer; color: var(--gm-text);
  background: var(--gm-surface); border: 1px solid var(--gm-line); transition: transform .1s, background .2s;
}
.gm-icon-btn:active { transform: scale(.94); background: var(--gm-surface-hi); }
.gm-icon { width: 20px; height: 20px; flex: none; }

/* --- the field: UP over DOWN --------------------------------------------------------------------------------------------- */
.gm-field { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.gm-zone {
  flex: 1 1 0; min-height: 156px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 10px;
  border-radius: 22px; border: 1.5px solid var(--zone-line); background: var(--zone-fill); transition: border-color .2s, box-shadow .2s, background .2s;
}
.gm-zone--up { --zone: var(--gm-up); --zone-line: var(--gm-up-line); --zone-fill: linear-gradient(180deg, var(--gm-up-soft) 0%, rgba(34, 211, 131, .03) 100%); }
.gm-zone--down { --zone: var(--gm-down); --zone-line: var(--gm-down-line); --zone-fill: linear-gradient(0deg, var(--gm-down-soft) 0%, rgba(255, 77, 106, .03) 100%); }
.gm-zone[data-hover="true"] { border-color: var(--zone); box-shadow: 0 0 0 3px var(--zone-line), 0 0 34px var(--zone-line); background: var(--zone-fill-hot); }
.gm-zone--up[data-hover="true"] { --zone-fill-hot: linear-gradient(180deg, rgba(34, 211, 131, .26), rgba(34, 211, 131, .08)); }
.gm-zone--down[data-hover="true"] { --zone-fill-hot: linear-gradient(0deg, rgba(255, 77, 106, .26), rgba(255, 77, 106, .08)); }
.gm-zone-head { display: flex; align-items: center; gap: 6px; color: var(--zone); font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.gm-zone-head .gm-icon { width: 18px; height: 18px; }
.gm-zone-cards { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; align-content: stretch; grid-template-rows: minmax(0, 1fr); }
.gm-zone-drop {
  grid-column: 1 / -1; align-self: stretch; min-height: 132px; display: grid; place-items: center; border: 1.5px dashed var(--zone-line); border-radius: 16px;
  color: var(--zone); opacity: .7; font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.gm-hint { margin: 0; min-height: 16px; text-align: center; font-size: 12.5px; color: var(--gm-dim); }

/* --- the deck ------------------------------------------------------------------------------------------------------------- */
.gm-deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0 10px; }
.gm-slot-empty { min-height: 132px; border-radius: 16px; border: 1.5px dashed var(--gm-line); background: rgba(255, 255, 255, .015); }

/* --- a card --------------------------------------------------------------------------------------------------------------- */
.gm-card {
  position: relative; box-sizing: border-box; min-height: 132px; padding: 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  border-radius: 16px; border: 1px solid var(--gm-card-line); background: var(--gm-card); box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  touch-action: none; cursor: default; outline: none; animation: gm-card-in .2s ease-out;
  transition: transform .24s cubic-bezier(.2, .9, .3, 1.15), box-shadow .2s, opacity .2s, border-color .2s;
}
.gm-card[data-draggable="true"] { cursor: grab; }
.gm-card[data-draggable="true"]:focus-visible { border-color: var(--gm-accent); box-shadow: 0 0 0 3px var(--gm-accent-soft); }
.gm-card[data-dragging="true"] { cursor: grabbing; border-color: rgba(255, 255, 255, .35); box-shadow: 0 22px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .12); }
.gm-card[data-passed="true"] { opacity: .45; }
.gm-card[data-zone-of="up"] { border-color: var(--gm-up-line); }
.gm-card[data-zone-of="down"] { border-color: var(--gm-down-line); }
.gm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.gm-glyph {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 800; line-height: 1;
  color: #fff; background: var(--market, var(--gm-accent)); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .25), inset 0 2px 3px rgba(255, 255, 255, .25);
}
.gm-card[data-market="crypto"] { --market: #f59e0b; }
.gm-card[data-market="stocks"] { --market: #6366f1; }
.gm-card[data-market="commodities"] { --market: #14b8a6; }
.gm-card[data-market="forex"] { --market: #ec4899; }
.gm-expiry { white-space: nowrap; padding: 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 800; color: var(--gm-text); background: rgba(255, 255, 255, .08); font-variant-numeric: tabular-nums; }
.gm-card-name { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-spark { width: 100%; height: 34px; display: block; --line: var(--gm-dim); overflow: visible; }
.gm-spark[data-direction="up"] { --line: var(--gm-up); }
.gm-spark[data-direction="down"] { --line: var(--gm-down); }
.gm-spark-line { stroke: var(--line); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gm-spark-area { fill: var(--line); opacity: .12; }
.gm-spark-dot { fill: var(--line); }
.gm-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: 12px; font-weight: 800; }
.gm-payout { color: var(--gm-up); font-variant-numeric: tabular-nums; }
.gm-passed { color: var(--gm-dim); font-weight: 700; }
.gm-card:not([data-phase="idle"]) .gm-card-foot { display: none; }

/* --- the timer on a placed card ------------------------------------------------------------------------------------------- */
.gm-timer { margin-top: auto; display: flex; flex-direction: column; gap: 3px; }
.gm-timer-track { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.gm-timer-fill { height: 100%; width: 100%; border-radius: inherit; transform-origin: left center; background: linear-gradient(90deg, var(--gm-accent), #8db8ff); }
.gm-card[data-zone-of="up"] .gm-timer-fill { background: linear-gradient(90deg, #17a566, var(--gm-up)); }
.gm-card[data-zone-of="down"] .gm-timer-fill { background: linear-gradient(90deg, #c9344f, var(--gm-down)); }
.gm-timer[data-phase="closing"] .gm-timer-fill, .gm-timer[data-phase="waiting"] .gm-timer-fill { animation: gm-pulse 1s ease-in-out infinite; }
.gm-timer-text { min-height: 14px; font-size: 12px; font-weight: 800; text-align: right; color: var(--gm-dim); font-variant-numeric: tabular-nums; }

/* --- the result laid on a settled card ------------------------------------------------------------------------------------ */
.gm-result {
  position: absolute; inset: 0; box-sizing: border-box; padding: 8px; border-radius: inherit; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 2px; overflow: hidden;
  background: var(--result-fill, #101722); animation: gm-reveal .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.gm-result-id { display: flex; flex-direction: column; gap: 4px; }
.gm-result-id .gm-card-top { justify-content: flex-start; gap: 4px; }
.gm-result-id .gm-expiry { margin-left: auto; padding: 2px 5px; font-size: 10.5px; white-space: nowrap; }
.gm-result-id .gm-glyph { width: 22px; height: 22px; font-size: 11px; }
.gm-result-id .gm-side { width: 16px; height: 16px; }
.gm-result-id .gm-side .gm-icon { width: 11px; height: 11px; }
.gm-result-score { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.gm-result-word { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--result, var(--gm-dim)); }
/* the code goes on its own small line: the card is narrow */
.gm-result-pnl .gm-money { display: flex; flex-direction: column; align-items: center; }
.gm-order .gm-money { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.gm-order .gm-money-code { font-size: 9px; }
.gm-result-pnl { font-size: 16px; line-height: 1.15; font-weight: 900; color: var(--result, var(--gm-text)); font-variant-numeric: tabular-nums; }
.gm-result[data-tone="gain"] { --result: var(--gm-up); --result-fill: radial-gradient(circle at 50% 40%, rgba(34, 211, 131, .3), transparent 75%), #0b1a16; }
.gm-result[data-tone="loss"] { --result: var(--gm-down); --result-fill: radial-gradient(circle at 50% 40%, rgba(255, 77, 106, .28), transparent 75%), #1a0d13; }
.gm-card[data-result="win"] { border-color: var(--gm-up); animation: gm-card-in .2s ease-out, gm-win .7s ease-out; }
.gm-card[data-result="loss"] { border-color: var(--gm-down); animation: gm-card-in .2s ease-out, gm-shake .4s ease-out; }
.gm-burst { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; }
.gm-bit { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--gm-gold); opacity: 0; animation: gm-bit .75s ease-out .08s both; }
.gm-bit:nth-child(odd) { background: var(--gm-up); }

/* --- the Place button, the status ---------------------------------------------------------------------------------------- */
.gm-actions { min-height: 84px; display: flex; flex-direction: column; justify-content: flex-end; }
.gm-place-wrap { display: flex; flex-direction: column; gap: 6px; }
.gm-place { width: 100%; min-height: 54px; border-radius: 16px; font-size: 18px; font-weight: 900; letter-spacing: .03em; background: linear-gradient(180deg, #4f94ff, #2f6fe0); box-shadow: 0 8px 22px rgba(47, 111, 224, .4), inset 0 1px 0 rgba(255, 255, 255, .3); }
.gm-place:disabled { box-shadow: none; background: var(--gm-surface-hi); color: var(--gm-dim); opacity: 1; }
.gm-status { margin: 0; min-height: 16px; text-align: center; color: var(--gm-dim); font-size: 13px; }

/* --- the combo ------------------------------------------------------------------------------------------------------------ */
.gm-combo {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 20px; border: 1.5px solid var(--gm-line);
  background: var(--gm-card); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); animation: gm-rise .45s cubic-bezier(.2, 1.1, .3, 1) both;
}
.gm-combo[data-tone="gain"] { border-color: var(--gm-up-line); box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 30px var(--gm-up-soft); }
.gm-combo[data-tone="loss"] { border-color: var(--gm-down-line); }
.gm-combo[data-perfect="true"] { border-color: var(--gm-gold); box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 34px rgba(242, 193, 78, .28); }
.gm-combo-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.gm-combo-score, .gm-combo-pnl { display: flex; flex-direction: column; gap: 0; }
.gm-combo-pnl { align-items: flex-end; }
.gm-combo-title, .gm-combo-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gm-dim); }
.gm-combo-value { font-size: 34px; line-height: 1.05; font-weight: 900; font-variant-numeric: tabular-nums; }
.gm-combo-amount { font-size: 26px; line-height: 1.1; font-weight: 900; font-variant-numeric: tabular-nums; }
.gm-combo-pnl[data-tone="gain"] .gm-combo-amount { color: var(--gm-up); }
.gm-combo-pnl[data-tone="loss"] .gm-combo-amount { color: var(--gm-down); }
.gm-combo-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.gm-combo-chips:empty { display: none; }
.gm-chip { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--gm-dim); background: rgba(255, 255, 255, .06); }
.gm-chip--win { color: var(--gm-up); background: var(--gm-up-soft); }
.gm-chip--loss { color: var(--gm-down); background: var(--gm-down-soft); }
.gm-chip--perfect { color: #1a1303; background: var(--gm-gold); }
.gm-next { width: 100%; min-height: 50px; border-radius: 14px; font-weight: 900; }

/* --- the chooser and the Live confirmation -------------------------------------------------------------------------------- */
.gm-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; background: rgba(5, 8, 14, .66); animation: gm-fade .18s ease-out both; }
.gm-chooser, .gm-sheet {
  box-sizing: border-box; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 10px; border-radius: 24px 24px 0 0; background: var(--gm-surface);
  border: 1px solid var(--gm-line); border-bottom: 0; animation: gm-rise .3s cubic-bezier(.2, 1, .3, 1) both;
  padding: 16px 16px calc(var(--pg-inset-bottom, env(safe-area-inset-bottom, 0px)) + 16px);
}
.gm-chooser-title { margin: 0; text-align: center; font-weight: 800; font-size: 16px; }
.gm-chooser-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gm-choice {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 16px; cursor: pointer; font: inherit; font-size: 18px; font-weight: 900; letter-spacing: .08em; color: #fff;
  border: 1.5px solid transparent;
}
.gm-choice--up { background: linear-gradient(180deg, #1fb878, #138a59); }
.gm-choice--down { background: linear-gradient(180deg, #f0566f, #bf3550); }
.gm-choice[data-current="true"] { border-color: #fff; }
.gm-choice:focus-visible { outline: 3px solid var(--gm-accent); outline-offset: 2px; }
.gm-sheet-title { margin: 0; text-align: center; font-size: 19px; font-weight: 900; }
.gm-orders { display: flex; flex-direction: column; gap: 4px; }
.gm-order { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.gm-order--head { background: none; padding-bottom: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-dim); }
.gm-order--total { background: rgba(255, 255, 255, .09); font-weight: 900; }
.gm-order-card { display: flex; align-items: center; gap: 6px; min-width: 0; text-align: left; }
.gm-order-card .gm-glyph { width: 22px; height: 22px; font-size: 11px; background: var(--gm-accent); }
.gm-order-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.gm-side { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; }
.gm-side .gm-icon { width: 14px; height: 14px; }
.gm-side--up { color: var(--gm-up); background: var(--gm-up-soft); }
.gm-side--down { color: var(--gm-down); background: var(--gm-down-soft); }
.gm-order-payout { color: var(--gm-up); }
.gm-order-risk { color: var(--gm-down); }
.gm-order--head .gm-order-payout, .gm-order--head .gm-order-risk { color: var(--gm-dim); }
.gm-note { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--gm-dim); text-align: center; }
.gm-confirm { width: 100%; min-height: 54px; border-radius: 16px; font-weight: 900; }
.gm-cancel, .gm-choice-back, .gm-choice-close { width: 100%; }

/* --- the landing ---------------------------------------------------------------------------------------------------------- */
.gm-landing { align-items: center; justify-content: center; text-align: center; gap: 12px; }
.gm-landing-cards { display: flex; gap: 10px; margin-bottom: 14px; }
.gm-landing-card {
  width: 64px; height: 88px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--gm-card-line); background: var(--gm-card);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45); color: var(--gm-dim); animation: gm-float 3.2s ease-in-out infinite;
}
.gm-landing-card .gm-icon { width: 28px; height: 28px; }
.gm-landing-card--0 { color: var(--gm-up); transform: rotate(-8deg); }
.gm-landing-card--1 { animation-delay: -1s; margin-top: -10px; }
.gm-landing-card--2 { color: var(--gm-down); transform: rotate(8deg); animation-delay: -2s; }
.gm-title { margin: 0; font-size: 34px; font-weight: 900; }
.gm-tagline { margin: 0 0 12px; max-width: 280px; color: var(--gm-dim); font-size: 17px; }
.gm-landing .pg-btn { min-width: 220px; }

/* --- motion --------------------------------------------------------------------------------------------------------------- */
@keyframes gm-card-in { from { opacity: 0; scale: .92; } }
@keyframes gm-reveal { from { opacity: 0; scale: .7; } 60% { scale: 1.06; } }
@keyframes gm-win { 0% { box-shadow: 0 0 0 0 var(--gm-up); } 40% { box-shadow: 0 0 0 6px rgba(34, 211, 131, .35), 0 0 30px rgba(34, 211, 131, .6); } 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, .35); } }
@keyframes gm-shake { 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
@keyframes gm-bit { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(46px) scale(.4); } }
@keyframes gm-pulse { 50% { opacity: .45; } }
@keyframes gm-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes gm-fade { from { opacity: 0; } }
@keyframes gm-float { 50% { translate: 0 -8px; } }

@media (max-height: 700px) {
  .gm-zone { min-height: 138px; }
  .gm-card, .gm-slot-empty { min-height: 118px; }
  .gm-spark { height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-card, .gm-result, .gm-bit, .gm-combo, .gm-chooser, .gm-sheet, .gm-backdrop, .gm-landing-card, .gm-timer-fill { animation: none !important; transition: none !important; }
}