/* щит */
  /* ====== GAME STYLES ====== */
  :root{ --bg:#f7fafc; --panel:#ffffffee; --border:#e5e7eb; --text:#111827; --muted:#6b7280; --accent:#2563eb; --accent-2:#60a5fa; --danger:#ef4444; --ok:#22c55e; --amber:#f59e0b; --shield:#c2410c; }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  .g1-defend{position:relative; height: 590px; width:100%; max-width:530px; aspect-ratio:16/9; margin:0 auto; border-radius:20px; overflow:hidden; background:radial-gradient(1000px 700px at 50% 50%, #ffffff 0%, #f4f7fb 70%, var(--bg) 100%); border:1px solid var(--border)}
  .g1-input{position:absolute; inset:0; touch-action:none}
  .g1-hud{position:absolute; inset:auto 0 0 0; display:flex; gap:10px; align-items:center; justify-content:space-between; padding:12px 14px; background:linear-gradient(0deg, #ffffffdd, #ffffffaa 60%, #ffffff00); color:var(--text); font:600 14px/1.2 system-ui}
  .g1-pill{background:var(--panel); padding:8px 10px; border-radius:999px; display:flex; align-items:center; gap:8px; border:1px solid var(--border); box-shadow:0 2px 6px #0001}
  .g1-life{width:12px;height:12px;border-radius:50%; background:var(--ok); box-shadow:0 0 8px #22c55e66}
  .g1-life.off{background:#d1d5db; box-shadow:none}
  .g1-btn{cursor:pointer; user-select:none; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:#ffffff; color:#000; box-shadow:0 2px 6px #0002}
  .g1-btn:hover{background:#f3f4f6}
  .g1-overlay{position:absolute; inset:0; display:none; place-items:center; background:#ffffffd9; color:var(--text)}
  .g1-overlay.show{display:grid}
  .g1-card{background:var(--panel); padding:24px; border-radius:18px; text-align:centder; min-width:280px; border:1px solid var(--border); box-shadow:0 10px 20px #0003}
  .g1-avatar{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80px; height:80px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 6px #ffffff, 0 0 30px #60a5fa30}
  .g1-avatar img{width:100%; height:100%; object-fit:cover; display:block}
  .g1-paused{position:absolute; top:10px; left:50%; transform:translateX(-50%); color:#111827cc; background:#ffffffcc; padding:6px 10px; border-radius:999px; font-weight:700; border:1px solid var(--border); display:none}
  .g1-paused.show{display:block}
  @media (max-width:900px){ .g1-defend { height: auto; min-height: 400px; } }

  /* ====== GENERIC PAGE STYLES (как в исходнике) ====== */
  
  :root{--bg:#f7f8fb;--card:#fff;--line:#e8ecf3;--text:#2a2f3a;--muted:#7b8497;--brand:#4b6bfb;--ok:#18a957;--warn:#e53935}
  *{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial}
  .wrap{max-width:1100px;margin:0 auto;padding:14px 16px}
  .header{position:sticky;top:0;background:#fffdfdcc;border-bottom:1px solid var(--line);backdrop-filter:saturate(1.1) blur(6px)}
  .headbar{display:flex;justify-content:space-between;align-items:center}
  .brand{font-weight:800}
  .nav{display:flex;gap:18px}
  .nav a{padding:8px 10px;border-radius:10px;color:#444;text-decoration:none}
  .nav a.active{background:var(--bg);color:var(--brand);font-weight:700}
  .profile{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-top:14px}
  .ava{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--line);background:#e4e8f0}
  .name{font-size:20px;font-weight:800}
  .note{color:var(--muted)}
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
  .switch{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);background:var(--card);border-radius:14px;cursor:pointer}
  .switch input{display:none}
  .track{width:40px;height:22px;background:#ccd3e0;border-radius:999px;position:relative;transition:.2s}
  .thumb{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px rgba(0,0,0,.12);transition:.2s}
  .switch input:checked + .track{background:#9fb1ff}
  .switch.seeprivate  input:checked + .track{background:#e53935}
  .switch input:checked + .track .thumb{left:20px}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0 40px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:14px}
  .card h3{margin:0;padding:14px 14px 0;font-size:14px;letter-spacing:.6px;color:#556070;text-transform:uppercase}
  .fields{padding:6px 8px 10px}
  .row{display:grid;grid-template-columns:22px 170px 1fr 22px;align-items:center;gap:8px;padding:10px;border-radius:10px}
  .row + .row{border-top:1px dashed var(--line)}
  .ico{width:22px;height:22px;display:inline-grid;place-items:center;color:#9aa6c1}
  .label{color:#6a7387;font-size:13px}
  .val{font-weight:600;min-height:20px}
  .reveal{cursor:pointer;color:var(--brand);text-decoration:underline dotted}
  .check{color:var(--ok)}
  .masked .data{display:none}
  .masked .placeholder{display:inline}
  .masked .ico .eye{display:none}
  .masked .ico .lock{display:inline}
  .revealed.has-data .data{display:inline}
  .revealed.has-data .placeholder{display:none}
  .revealed.has-data .ico .eye{display:inline}
  .revealed.has-data .ico .lock{display:none}
  .revealed.empty .data{display:none}
  .revealed.empty .placeholder{display:inline}
  .revealed.empty .ico .eye{display:none}
  .revealed.empty .ico .lock{display:inline}
  .risk{outline:2px solid var(--warn);background:#fff4f4}
  .risk .label,.risk .ico{color:#b22a25}
	h1 {
		font-size: 24px;
		margin: 5px 0;
	}

	.note {
		padding: 0;
	}
  @media (max-width:900px){.grid{grid-template-columns:1fr}.row{grid-template-columns:22px 100px 1fr 22px}}

  section.play { display: flex; flex-wrap: nowrap; align-content: flex-start; padding-top: 20px; justify-content: space-between; }
  @media (max-width:900px){ section.play { display: block; } span.switch-text { width: 90%; display: block; } }





/* Прыжки */

    :root{
      --bg:#f8fafc;--card:#ffffff;--text:#0b1220;--muted:#64748b;--accent:#2563eb;--good:#16a34a;--bad:#dc2626;--shadow:rgba(0,0,0,.08)
    }
    html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:14px/1.4 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
    .behavior-game{position:relative;display:block;width:100%;max-width:520px;margin:env(safe-area-inset-top) auto env(safe-area-inset-bottom);box-sizing:border-box;}
    .game-card{background:var(--card);border-radius:16px;box-shadow:0 10px 30px var(--shadow);overflow:hidden;border:1px solid #e5e7eb}

    /* HUD — responsive */
    .hud{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #e5e7eb;background:#f4f6fb;flex-wrap:wrap}
    .hud-left,.hud-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .pill{background:#eef2ff;border:1px solid #e5e7eb;color:var(--text);border-radius:999px;padding:6px 10px;font-weight:600;white-space:nowrap}
    .hud button{appearance:none;border:1px solid #e5e7eb;background:#f3f4f6;color:var(--text);padding:6px 10px;border-radius:10px;cursor:pointer;font-weight:600}
    .hud button:hover{background:#eef2f7}

    /* On narrow screens stack HUD blocks */
    @media (max-width:520px){
      .hud{gap:8px}
      .hud-left,.hud-right{width:100%;justify-content:space-between}
      .hud .pill{padding:6px 8px}
      .hud button{flex:1;min-width:0}
    }

    canvas{display:block;width:100%;height:420px;background:linear-gradient(180deg,#f8fafc,#eef2f7)}
    @media (max-width:520px){ canvas{height:58vh} }

    .footer{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:10px 12px;border-top:1px solid #e5e7eb;background:#fbfdff}
    .legend{color:var(--muted);font-size:12px}
    .scores{display:flex;gap:16px;flex-wrap:wrap}
    .scores h4{margin:0 0 6px;font-size:12px;color:var(--muted);font-weight:600}
    .scores ol{list-style:none;margin:0;padding:0}
    .scores li{padding:2px 0;font-variant-numeric:tabular-nums}

    /* Joystick (mobile) — semi-transparent grey ring + darker knob */
    .joystick{position:absolute;right:12px;bottom:12px;width:128px;height:128px;border-radius:999px;background:radial-gradient( circle at 50% 50%, rgba(0,0,0,.06) 0%, rgba(0,0,0,.06) 32%, rgba(0,0,0,.03) 33%, rgba(0,0,0,.03) 100% );border:1px dashed #cbd5e1;box-shadow:inset 0 0 0 6px rgba(0,0,0,.03);backdrop-filter:saturate(110%);touch-action:none;display:none}
    .stick{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:999px;background:rgba(0,0,0,.12);border:1px solid #cbd5e1;transform:translate(-50%,-50%);box-shadow:0 4px 10px rgba(0,0,0,.15)}
    .mobile .joystick{display:block}

    .notice{padding:8px 12px;background:#f8fafc;border-top:1px solid #e5e7eb;color:#475569;font-size:12px}
    .notice strong{color:#0b1220}

    /* Mobile visual hint: blinking arrows + pulse circle */
    .mobile-hint{position:absolute;left:12px;bottom:12px;display:none;align-items:center;gap:8px;pointer-events:none}
    .mobile .mobile-hint{display:flex}
    .hint-circle{width:36px;height:36px;border-radius:999px;border:2px solid rgba(0,0,0,.2);position:relative}
    .hint-circle::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgba(0,0,0,.12);animation:pulse 1.5s ease-out infinite}
    @keyframes pulse{0%{transform:scale(0.9);opacity:.8}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
    .hint-arrows{display:flex;gap:2px}
    .arrow{font-weight:900;opacity:.3;animation:blink 1.2s infinite}
    .arrow.left{animation-delay:.2s}
    .arrow.right{animation-delay:.8s}
    @keyframes blink{0%,60%{opacity:.3}61%,80%{opacity:.9}81%,100%{opacity:.3}}

    /* Utility for demo avatar block */
    .demo-ava{display:flex;align-items:center;gap:10px;margin:8px 0 12px;color:#475569}
    .demo-ava img{width:40px;height:40px;object-fit:cover;border-radius:999px;border:1px solid #e5e7eb}