/* साइकिल चली — the expressway runner (khel.html). Canvas game in a framed stage; HUD, toasts and the
   start / end / pause cards are HTML on top so they translate with i18n.js. Paper + ink, red only as accent. */
.kh{background:var(--paper);padding-bottom:40px}
.kh section{padding:0}
.kh-head{width:min(1100px,100%);margin:0 auto;padding:34px 16px 18px}
.kh-head h1{font-size:clamp(40px,6vw,66px);color:var(--green-ink);margin-top:8px;line-height:1.3}
.kh-head .lede{margin-top:6px;font-size:19px}

.kh-stage{position:relative;width:min(1100px,calc(100% - 32px));margin:0 auto;aspect-ratio:2/1;border-radius:18px;overflow:hidden;
  background:var(--paper-2);box-shadow:0 0 0 1px var(--line),0 24px 50px -30px rgba(8,42,29,.45);touch-action:manipulation;user-select:none;-webkit-user-select:none;direction:ltr}
.kh-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}

.kh-hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:14px;padding:12px 16px;pointer-events:none;font-size:15px;color:var(--ink)}
.kh-lives{display:flex;gap:4px;flex:none}
.kh-lives svg{width:20px;height:20px}
.kh-route{flex:1;display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;font-size:14px}
.kh-route i{flex:1;height:4px;border-radius:2px;background:var(--line);position:relative}
.kh-route b{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--red)}
.kh-route b::after{content:"";position:absolute;right:-6px;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px #fff}
.kh-shield{flex:none;font-weight:600;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:2px 12px;min-width:84px;text-align:center}
.kh-shield.on{border-color:var(--red);color:var(--red-deep)}

.kh-toast{position:absolute;left:50%;top:52px;transform:translateX(-50%);width:min(560px,calc(100% - 24px));background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:12px;padding:8px 14px;font-size:15px;line-height:1.5;box-shadow:0 10px 24px -16px rgba(0,0,0,.4);pointer-events:none}
.kh-toast s{color:var(--ink-2);text-decoration-color:var(--red);text-decoration-thickness:2px}
.kh-toast em{font-style:normal;font-weight:700;color:var(--red);margin-inline-end:6px}

.kh-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:24px;
  background:rgba(244,246,244,.94);overflow:auto}
.kh-card h2{font-size:clamp(30px,4vw,46px);color:var(--green-ink);line-height:1.3}
.kh-rules{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;max-width:760px;text-align:start;font-size:16px;color:var(--ink-2)}
.kh-rules b{display:block;font-weight:700;color:var(--ink)}
.kh-rules .k-tix{color:var(--red-deep)}
.kh-go{background:var(--red);color:#fff;font-size:18px;font-weight:600;border-radius:99px;padding:10px 28px}
.kh-go:hover,.kh-go:focus-visible{background:var(--red-deep)}
.kh-best,.kh-score{font-size:16px;color:var(--ink-2)}
.kh-score b{color:var(--ink);font-family:var(--mono)}
.kh-face{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--red)}
.kh-end{justify-content:flex-start;padding-top:30px}
.kh-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.kh-share{font-size:17px;font-weight:600;border:1px solid var(--ink);border-radius:99px;padding:9px 22px}
.kh-share:hover{background:#fff}

.kh-busted{list-style:none;display:grid;gap:10px;width:min(720px,100%);text-align:start}
.kh-busted li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.kh-busted s{display:block;font-size:15.5px;color:var(--ink-2);text-decoration-color:var(--red);text-decoration-thickness:2px}
.kh-busted p{font-size:16.5px;line-height:1.55;margin-top:4px;color:var(--ink)}
.kh-busted a{display:inline-block;margin-top:4px;font-size:14.5px;font-weight:600;color:var(--red-deep)}
.kh-busted .stamp{display:inline-block;font-size:12.5px;font-weight:700;color:var(--red);border:1.5px solid var(--red);border-radius:4px;padding:0 6px;margin-inline-end:8px;transform:rotate(-3deg)}

.kh-facts{width:min(1100px,100%);margin:0 auto;padding:46px 16px 10px!important}
.kh-facts h2{font-size:clamp(30px,4vw,44px);color:var(--green-ink)}
.kh-facts .lede{margin:6px 0 18px;font-size:18px}
.kh-all{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}

[dir="rtl"] .kh-toast{border-left:1px solid var(--line);border-right:4px solid var(--red)}
[dir="rtl"] .kh-hud,[dir="rtl"] .kh-card{direction:rtl}
[dir="rtl"] .kh-route b{left:auto;right:0}
[dir="rtl"] .kh-route b::after{right:auto;left:-6px}
body.ur .kh-busted p,body.ur .kh-toast,body.ur .kh-rules{line-height:2}

@media (max-width:760px){
  .kh-stage{aspect-ratio:auto;height:clamp(440px,62svh,500px);border-radius:14px}
  .kh-rules{grid-template-columns:1fr;font-size:15px}
  .kh-hud{gap:8px;padding:10px 10px;font-size:13px}
  .kh-route{font-size:12.5px}
  .kh-shield{min-width:0;font-size:12.5px;padding:2px 9px}
  .kh-toast{font-size:14px;top:46px}
  .kh-card{padding:18px 14px;gap:10px}
  .kh-all{grid-template-columns:1fr}
}
[hidden]{display:none!important}