.jg-hub {
  --jg-ink:#133b56; --jg-muted:#527286; --jg-line:#bddce9;
  --jg-orange:#ff672b; --jg-cream:#fff9eb; --jg-yellow:#ffd568;
  position:absolute; inset:0; z-index:65; overflow:auto; overscroll-behavior:contain;
  pointer-events:auto; color:var(--jg-ink); font-family:system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  background:radial-gradient(ellipse at 9% 12%,#ffffffd9 0,transparent 29%),radial-gradient(ellipse at 95% 80%,#a4dfef 0,transparent 45%),linear-gradient(160deg,#e7f8ff 0%,#d8f3ff 48%,#c4eafa 100%);
  padding:max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  touch-action:pan-y; user-select:text; -webkit-user-select:text; -webkit-tap-highlight-color:transparent;
}
.jg-hub[hidden],.jg-toast[hidden],.jg-network[hidden] { display:none!important; }
.jg-hub * { box-sizing:border-box; }
.jg-hub button,.jg-hub input,.jg-hub select { font-family:inherit; }
.jg-wrap { width:min(1280px,100%); min-width:0; margin:auto; }
.jg-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 18px; padding:10px 18px; color:var(--jg-ink); background:#fffffff2; border:3px solid #fff; border-radius:22px; box-shadow:0 5px 0 #9bc9df66; }
.jg-wordmark { display:flex; align-items:center; flex-shrink:0; color:#ffc955; text-decoration:none; cursor:pointer; font-weight:950; font-style:italic; font-size:clamp(21px,2.7vw,30px); letter-spacing:0; border:0; background:none; min-height:48px; padding:0 3px 0 0; text-shadow:-1.5px -1.5px 0 #133b56,1.5px -1.5px 0 #133b56,-1.5px 1.5px 0 #133b56,1.5px 1.5px 0 #133b56,2px 3px 0 #133b56; }
.jg-wordmark:before { content:'军'; display:inline-grid; place-items:center; width:42px; height:42px; margin-right:9px; color:#fff8e7; font-size:23px; font-style:normal; background:linear-gradient(155deg,#ffb449,#ff672b); border:3px solid #133b56; border-radius:15px 15px 17px 17px; box-shadow:3px 3px 0 #ffd568; transform:rotate(-7deg); text-shadow:none; }
.jg-tag { margin-left:auto; color:#527286; font-size:13px; font-weight:750; }
.jg-top-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.jg-top-actions .jg-btn { min-height:44px; padding:9px 16px; border-color:#a9d5ef; background:#e1f4ff; box-shadow:0 3px 0 #a8cfe5; font-size:14px; }
.jg-top-actions .jg-btn:last-child { color:#fff; border-color:#ffa86b; background:linear-gradient(#ff873e,#ff672b); box-shadow:0 3px 0 #d95022; }
.jg-hero { position:relative; isolation:isolate; overflow:hidden; min-height:420px; padding:40px 42px 54px; color:var(--jg-ink); border:4px solid #fff; border-radius:30px; background:#d8f3ff; box-shadow:0 8px 0 #98bfd351,0 14px 25px #2c699819; }
.jg-hero-art { position:absolute; inset:0; z-index:-1; }
.jg-hero-art img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 20%; }
.jg-hero-art:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#e8f8ffe6 0%,#e8f8ffb3 30%,#d8f3ff00 58%); }
.jg-hero-intro { position:relative; max-width:57%; }
.jg-kicker { display:inline-block; color:#133b56; background:#ffd568; border:2px solid #fff1a9; border-radius:8px; padding:6px 12px; font-weight:850; letter-spacing:1px; font-size:13px; transform:rotate(-2deg); margin-bottom:13px; }
.jg-kicker:before { content:''; display:inline-block; width:17px; height:15px; margin-right:8px; vertical-align:-2px; background:conic-gradient(#133b56 25%,transparent 0 50%,#133b56 0 75%,transparent 0) 0 0/8px 8px; transform:skew(-12deg); }
.jg-hero h1 { font-size:clamp(36px,4.2vw,60px); line-height:1.15; margin:0 0 18px; font-weight:950; font-style:italic; letter-spacing:-1px; text-shadow:2px 3px 0 #ffffffad; }
.jg-title-accent { position:relative; z-index:0; white-space:nowrap; }
.jg-title-accent:after { content:''; position:absolute; z-index:-1; left:0; right:-10px; bottom:0; height:13px; border-radius:50%; background:#ffd568; transform:rotate(-3deg); }
.jg-hero p { color:#315976; font-weight:650; font-size:15px; line-height:1.75; margin:0; max-width:375px; }
.jg-hero-actions { display:flex; align-items:center; gap:17px; margin-top:22px; flex-wrap:wrap; }
.jg-btn.jg-play { display:flex; align-items:center; gap:28px; min-height:66px; padding:12px 27px; font-size:25px; font-weight:950; font-style:italic; color:#fff; border:4px solid #ffe58c; border-radius:20px; background:linear-gradient(155deg,#ffb638,#ff7929); box-shadow:0 6px 0 #df681b,0 8px 0 #fff4b0,0 12px 20px #e3753533; text-shadow:0 2px 0 #d74a22; }
.jg-button-arrow { font-size:31px; line-height:1; font-style:normal; }
.jg-hero-hint { font-size:13px; font-weight:750; color:#315976; }
.jg-modes { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:-27px 14px 0; }
.jg-mode { position:relative; display:block; overflow:hidden; border:4px solid #fff; text-align:left; cursor:pointer; border-radius:23px; padding:18px 16px 16px 41%; min-width:0; min-height:220px; color:var(--jg-ink); background:linear-gradient(135deg,#fff0c8,#fff9eb); box-shadow:0 6px 0 #93b2bc66,0 9px 18px #28506a15; font:inherit; transition:transform .15s,box-shadow .15s; touch-action:manipulation; }
.jg-mode:hover { transform:translateY(-3px); box-shadow:0 9px 0 #93b2bc55,0 13px 24px #28506a20; }
.jg-mode:active { transform:translateY(2px); box-shadow:0 3px 0 #93b2bc66; }
.jg-mode-timer { background:linear-gradient(135deg,#b5e6ff,#edf8ff); }
.jg-mode-flag { background:linear-gradient(135deg,#ffedbd,#fff9eb); }
.jg-mode-art { position:absolute; inset:0 auto 0 0; width:41%; background-image:url('./assets/ui/modes-atlas.webp'); background-size:auto 100%; background-position:0% 50%; background-repeat:no-repeat; mask-image:linear-gradient(90deg,#000 0%,#000 83%,transparent 100%); }
.jg-mode-timer .jg-mode-art { background-position:50% 50%; }
.jg-mode-flag .jg-mode-art { background-position:100% 50%; }
.jg-mode-content { position:relative; min-width:0; }
.jg-mode-heading { display:flex; align-items:center; gap:5px; margin-bottom:7px; }
.jg-mode-heading .jg-race-icon { width:24px; height:24px; color:#ffd568; }
.jg-mode .jg-pill { background:#ffffff9c; color:#315976; border:1px solid #fff; font-size:11px; padding:3px 7px; }
.jg-mode h2 { margin:3px 0 8px; font-size:clamp(23px,2.1vw,29px); line-height:1.2; font-style:italic; font-weight:950; letter-spacing:-.4px; }
.jg-mode p { margin:0; line-height:1.65; font-size:13px; color:#3c6176; }
.jg-mode-foot { margin-top:13px; display:grid; gap:8px; }
.jg-mode-foot>span { font-size:11px; color:#5a7888; }
.jg-mode-foot>strong { display:block; width:max-content; max-width:100%; min-height:35px; padding:7px 13px; background:linear-gradient(#ffe473,#ffcb44); border:1px solid #e8b13b; border-radius:10px; box-shadow:0 3px 0 #d9aa40; color:#133b56; font-size:14px; font-weight:900; }
.jg-mode-timer .jg-mode-foot>strong { background:linear-gradient(#37b4ff,#1979ec); color:#fff; border-color:#1979ec; box-shadow:0 3px 0 #175fb4; }
.jg-mode-flag .jg-mode-foot>strong { background:linear-gradient(#ff9c44,#ff672b); color:#fff; border-color:#ff672b; box-shadow:0 3px 0 #d84f22; }
.jg-home-bottom { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; margin:20px 14px 16px; }
.jg-member { display:flex; align-items:center; gap:18px; flex-wrap:wrap; border:4px solid #fff; border-radius:22px; padding:16px 20px; background:linear-gradient(125deg,#e6f7ff,#c8eaff); box-shadow:0 5px 0 #93b2bc50; }
.jg-member-line { display:flex; align-items:center; gap:14px; min-width:0; margin-bottom:18px; }
.jg-member .jg-member-line { flex:1; margin:0; }
.jg-member-line>div { min-width:0; }
.jg-avatar { object-fit:cover; border-radius:18px; width:64px; height:64px; background:#edf4f5; flex:none; border:3px solid #fff; box-shadow:0 3px 0 #91b4c844; }
.jg-avatar.small { width:44px; height:44px; border-radius:13px; border-width:2px; }
.jg-member-name { font-size:21px; font-weight:900; overflow-wrap:anywhere; }
.jg-member .jg-muted { color:#456c85; font-size:12px; }
.jg-member .jg-stats { flex-basis:100%; order:3; }
.jg-member>.jg-btn { flex-shrink:0; font-size:14px; }
.jg-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
.jg-stat { padding:14px; background:#e3f3fb; border:2px solid #fff; border-radius:15px; min-width:0; }
.jg-member .jg-stat { padding:9px 12px; background:#ffffff9c; }
.jg-stat strong { display:block; font-size:24px; line-height:1.35; overflow-wrap:anywhere; }
.jg-stat span { display:block; font-size:12px; color:#527286; margin-top:2px; }
.jg-friend-card { display:flex; align-items:center; gap:16px; min-width:0; min-height:108px; padding:18px 21px; color:#133b56; border:4px solid #fff; border-radius:22px; background:linear-gradient(135deg,#d4f1ff,#effaff); box-shadow:0 5px 0 #93b2bc50; text-align:left; cursor:pointer; font:inherit; touch-action:manipulation; }
.jg-friend-card .jg-race-icon { width:52px; height:52px; color:#4384c1; background:#fff; padding:7px; border-radius:16px; }
.jg-friend-card>div { min-width:0; flex:1; }
.jg-friend-card strong { display:block; font-size:21px; font-weight:900; }
.jg-friend-card>div>span { display:block; margin-top:5px; font-size:12px; line-height:1.6; color:#4d7086; }
.jg-friend-arrow { font-size:27px; font-weight:900; }
.jg-race-icon { display:block; flex:none; width:52px; height:52px; color:#ffd568; stroke:#133b56; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.jg-panel { position:relative; min-width:0; border:4px solid #fff; border-radius:27px; background:var(--jg-cream); padding:clamp(22px,3vw,34px); box-shadow:0 7px 0 #8fbacf66,0 16px 35px #3972981c; margin:0 auto 22px; }
.jg-panel:before { content:''; position:absolute; right:23px; top:22px; width:48px; height:18px; opacity:.12; background:conic-gradient(#133b56 25%,transparent 0 50%,#133b56 0 75%,transparent 0) 0 0/12px 12px; transform:skew(-15deg); pointer-events:none; }
.jg-panel.narrow { max-width:580px; }
.jg-page-heading { display:flex; gap:14px; align-items:center; padding:0 42px 17px 0; border-bottom:2px solid #e1dfd2; margin-bottom:19px; }
.jg-page-icon { background:#ffd568; width:62px; height:62px; padding:9px; border:3px solid #fff; border-radius:19px; box-shadow:0 4px 0 #e8bf51; }
.jg-page-titles { min-width:0; }
.jg-page-kicker { font-size:12px; letter-spacing:.7px; font-weight:800; color:#527286; margin-bottom:5px; }
.jg-panel h1 { font-size:clamp(24px,2.4vw,30px); line-height:1.3; margin:0; font-weight:950; }
.jg-panel h2 { font-size:20px; font-weight:900; margin:23px 0 13px; }
.jg-panel p { line-height:1.75; }
.jg-muted { color:var(--jg-muted); font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.jg-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.jg-actions { display:flex; gap:11px; flex-wrap:wrap; margin-top:21px; }
.jg-btn { border:2px solid #bcd9e6; border-radius:13px; min-height:48px; padding:11px 18px; font:inherit; font-weight:850; font-size:15px; line-height:1.4; color:var(--jg-ink); background:#fff; box-shadow:0 4px 0 #a7c1cc; cursor:pointer; touch-action:manipulation; transition:transform .12s,filter .12s,box-shadow .12s; }
.jg-btn:hover { filter:brightness(1.03); transform:translateY(-1px); }
.jg-btn:active { transform:translateY(2px); box-shadow:0 2px 0 #a7c1cc; }
.jg-btn.primary { background:linear-gradient(#ff9845,#ff672b); border-color:#ffb575; color:#fff; box-shadow:0 4px 0 #d85221; }
.jg-btn.secondary { background:#fff; border-color:#8bc3ea; color:#185b8c; box-shadow:0 4px 0 #97bfda; }
.jg-btn.danger { border-color:#ebc2ad; color:#a64027; background:#fff1e8; box-shadow:0 4px 0 #d5b49f; }
.jg-btn:disabled { opacity:.55; cursor:wait; transform:none; }
.jg-btn:focus-visible,.jg-mode:focus-visible,.jg-friend-card:focus-visible,.jg-wordmark:focus-visible,.jg-char:focus-visible,.jg-preset:focus-visible,.jg-tab:focus-visible { outline:3px solid #187bc6; outline-offset:4px; }
.jg-btn.full { width:100%; }
.jg-form { display:grid; gap:17px; margin-top:22px; }
.jg-field { display:block; min-width:0; font-size:14px; font-weight:800; }
.jg-field input,.jg-field select { width:100%; display:block; padding:13px 14px; font:inherit; font-size:16px; border:2px solid #bfd9e4; border-radius:12px; background:#fff; color:#133b56; min-height:50px; margin-top:7px; box-shadow:inset 0 2px 0 #eef5f8; user-select:text; }
.jg-field input:focus,.jg-field select:focus { outline:3px solid #ffd568; outline-offset:1px; border-color:#4e9dd1; }
.jg-field small { display:block; color:var(--jg-muted); font-weight:400; line-height:1.6; margin-top:6px; }
.jg-password { position:relative; }
.jg-password input { padding-right:76px; }
.jg-password button { position:absolute; right:4px; bottom:3px; min-width:58px; min-height:44px; padding:5px 11px; background:#e7f4fb; border:0; box-shadow:none; border-radius:9px; font:inherit; color:#305f7b; cursor:pointer; }
.jg-check { display:flex; align-items:flex-start; gap:9px; min-height:44px; padding:7px 0; font-size:13px; line-height:1.65; }
.jg-check input { width:23px; height:23px; margin-top:1px; flex:none; accent-color:#ff672b; }
.jg-error { background:#ffeae0; border:2px solid #efb59d; color:#9b381d; padding:12px 14px; border-radius:12px; font-size:14px; line-height:1.6; }
.jg-error:empty { display:none; }
.jg-note { background:#eaf5fa; border:2px solid #d6e7eb; padding:15px 17px; border-radius:14px; font-size:13px; line-height:1.8; color:#385e73; overflow-wrap:anywhere; }
.jg-tabs { display:flex; gap:7px; flex-wrap:wrap; background:#e8eff0; border:2px solid #fff; border-radius:14px; padding:5px; margin:20px 0 22px; }
.jg-tab { flex:1; background:none; border:0; border-radius:10px; padding:11px 15px; min-height:46px; font:inherit; font-weight:850; font-size:14px; color:#527286; cursor:pointer; touch-action:manipulation; }
.jg-tab.active { color:#133b56; background:#ffd568; box-shadow:0 3px 0 #deba58; }
.jg-account-number,.jg-secret { font-family:ui-monospace,SFMono-Regular,monospace; font-size:20px; font-weight:750; letter-spacing:1px; background:#eaf5fa; border:2px solid #c4dfeb; padding:15px 17px; border-radius:13px; margin:10px 0 18px; overflow-wrap:anywhere; user-select:all; -webkit-user-select:all; }
.jg-secret { color:#854414; background:#fff0c8; border-color:#eccc7d; font-size:18px; }
.jg-flex-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; }
.jg-presets { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:10px; margin:15px 0; }
.jg-preset { background:#fff; min-width:0; min-height:44px; padding:6px; border:3px solid #d9e6ea; border-radius:16px; cursor:pointer; box-shadow:0 3px 0 #c2d4dc; touch-action:manipulation; }
.jg-preset img { width:100%; aspect-ratio:1; border-radius:10px; display:block; }
.jg-preset.selected { border-color:#ff8a3c; background:#ffe4b0; box-shadow:0 3px 0 #d9682c; }
.jg-crop { display:grid; gap:14px; margin:15px 0; justify-items:center; }
.jg-crop canvas { display:block; width:256px; max-width:100%; border:3px solid #fff; border-radius:18px; box-shadow:0 4px 0 #b8d5df; touch-action:none; cursor:move; }
.jg-crop input { width:256px; max-width:100%; min-height:44px; accent-color:#ff672b; }
.jg-chars { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin:15px 0; }
.jg-char { min-width:0; min-height:70px; padding:11px; border:3px solid #d0e2e9; background:#fff; border-radius:15px; font:inherit; cursor:pointer; font-size:13px; font-weight:800; text-align:left; color:#133b56; box-shadow:0 3px 0 #b8cfda; touch-action:manipulation; }
.jg-char:before { content:'军'; display:inline-grid; place-items:center; width:31px; height:31px; border-radius:10px; background:var(--kart-color); color:#fff; border:2px solid #fff; box-shadow:0 2px 0 #133b5640; margin-right:7px; font-size:14px; font-weight:900; }
.jg-char.selected { border-color:#ff8a3c; background:#fff0d3; box-shadow:0 3px 0 #d9682c; }
.jg-rule-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin:20px 0; }
.jg-rule { background:#e4f2f8; border:2px solid #fff; box-shadow:0 3px 0 #c6dbe4; padding:14px; border-radius:14px; font-size:12px; line-height:1.7; }
.jg-rule strong { display:block; font-size:16px; font-weight:900; margin-bottom:4px; }
.jg-pill { display:inline-block; padding:5px 10px; font-size:12px; border-radius:9px; background:#e1eff4; font-weight:800; }
.jg-loading { display:inline-block; width:22px; height:22px; border-radius:50%; border:4px solid #c9e5f2; border-top-color:#ff672b; animation:jg-spin .8s linear infinite; vertical-align:middle; margin-right:9px; }
@keyframes jg-spin { to { transform:rotate(360deg); } }
.jg-wait-time { font-size:64px; font-weight:950; font-style:italic; color:#1776b0; font-variant-numeric:tabular-nums; letter-spacing:-2px; margin:20px 0; text-shadow:2px 3px 0 #fff; }
.jg-list { display:grid; gap:11px; margin:20px 0; }
.jg-racer { display:flex; align-items:center; gap:12px; background:#e8f3f8; border:2px solid #fff; padding:12px 14px; border-radius:15px; box-shadow:0 2px 0 #c4dbe4; min-width:0; }
.jg-racer-name { font-weight:850; overflow-wrap:anywhere; flex:1; min-width:0; }
.jg-ready { font-size:12px; font-weight:750; padding:5px 8px; border-radius:8px; color:#24614a; background:#d5edda; white-space:nowrap; }
.jg-ready.offline { color:#915321; background:#ffe9b2; }
.jg-code { width:max-content; max-width:100%; font-family:ui-monospace,monospace; font-size:42px; letter-spacing:7px; font-weight:950; margin:20px 0; padding:16px 21px; border:3px solid #fff; border-radius:17px; color:#165e8d; background:#ffd568; box-shadow:0 4px 0 #d6b350; user-select:all; overflow-wrap:anywhere; }
.jg-table-wrap { overflow-x:auto; max-width:100%; border:2px solid #d9e5e6; border-radius:16px; background:#fff; -webkit-overflow-scrolling:touch; margin-top:16px; }
.jg-table { width:100%; border-collapse:collapse; font-size:14px; min-width:440px; }
.jg-table th { color:#426c85; font-weight:850; font-size:12px; text-align:left; padding:14px 12px; background:#eaf5fc; border-bottom:2px solid #d4e4eb; white-space:nowrap; }
.jg-table td { padding:14px 12px; border-bottom:1px solid #e0e9eb; vertical-align:middle; }
.jg-table tr:last-child td { border-bottom:0; }
.jg-table tr.is-me { background:#fff0c8; }
.jg-table .player { display:flex; align-items:center; gap:10px; }
.jg-table .player-name { overflow-wrap:anywhere; min-width:64px; }
.jg-table .rank { font-size:22px; font-style:italic; font-weight:950; color:#df7925; }
.jg-positive { color:#087358; font-weight:850; }
.jg-negative { color:#aa463a; font-weight:850; }
.jg-network { position:absolute; z-index:80; left:50%; top:max(12px,env(safe-area-inset-top)); transform:translateX(-50%); background:#fff0be; color:#65421a; border:3px solid #fff; border-radius:14px; padding:11px 16px; box-shadow:0 4px 0 #d8b87366; pointer-events:none; max-width:90%; text-align:center; font-size:13px; }
.jg-toast { position:absolute; z-index:100; left:50%; bottom:max(20px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:90%; background:#133b56; color:#fff; border:3px solid #fff; box-shadow:0 4px 0 #0b293f80; padding:12px 18px; border-radius:14px; font-size:14px; line-height:1.6; text-align:center; pointer-events:none; }
.jg-help { display:flex; align-items:baseline; gap:13px; margin:0 18px; color:#55768a; font-size:11px; line-height:1.8; padding:6px 0; }
.jg-help strong { font-size:12px; flex-shrink:0; color:#315e7b; }
.jg-empty { text-align:center; padding:34px 20px; color:#5c7b8e; border:2px dashed #c6dce6; background:#f5fbfe; border-radius:16px; font-size:14px; line-height:1.8; margin:18px 0; }
.jg-spectate { color:#fff; background:#185b7a; padding:14px 17px; border-radius:14px; margin:14px 0; }
.jg-hub[data-view='preparing'] .jg-wait-time { font-size:88px; color:#ff672b; }
.jg-hub[data-view='waiting'] .jg-panel { text-align:center; }
.jg-hub[data-view='waiting'] .jg-page-heading { text-align:left; }
.jg-hub[data-view='results'] .jg-page-icon,.jg-hub[data-view='leaderboard'] .jg-page-icon { background:#ffd568; }
.jg-hub[data-view='profile'] .jg-member-line { padding:18px; background:#e4f3fb; border:3px solid #fff; border-radius:18px; }
@media(max-width:1080px) {
  .jg-hub { padding-right:max(18px,env(safe-area-inset-right)); padding-left:max(18px,env(safe-area-inset-left)); }
  .jg-tag { display:none; }
  .jg-hero { min-height:400px; padding:35px 30px 48px; }
  .jg-hero-intro { max-width:58%; }
  .jg-hero h1 { font-size:clamp(36px,4.4vw,48px); }
  .jg-modes { gap:12px; margin-left:8px; margin-right:8px; }
  .jg-mode { padding:16px 13px 15px 36%; min-height:230px; }
  .jg-mode-art { width:36%; }
  .jg-mode h2 { font-size:25px; }
  .jg-mode-heading .jg-race-icon { display:none; }
  .jg-home-bottom { margin-left:8px; margin-right:8px; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .jg-member { gap:12px; padding:16px; }
  .jg-friend-card { padding:17px 16px; gap:12px; }
  .jg-friend-card strong { font-size:19px; }
}
@media(max-width:760px) {
  .jg-hub { padding:max(12px,env(safe-area-inset-top)) max(13px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(13px,env(safe-area-inset-left)); }
  .jg-top { padding:9px 12px; gap:8px; margin-bottom:15px; border-radius:18px; flex-wrap:wrap; }
  .jg-wordmark { font-size:24px; }
  .jg-top-actions { margin-left:auto; gap:7px; }
  .jg-top-actions .jg-btn { padding:8px 11px; font-size:13px; }
  .jg-hero { min-height:0; padding:26px 24px 248px; border-radius:24px; }
  .jg-hero-intro { max-width:100%; }
  .jg-hero h1 { font-size:clamp(31px,7.5vw,47px); letter-spacing:-.7px; margin-bottom:14px; }
  .jg-hero p { font-size:13px; line-height:1.7; max-width:340px; }
  .jg-kicker { font-size:11px; padding:5px 9px; margin-bottom:11px; }
  .jg-hero-art { top:auto; height:310px; }
  .jg-hero-art img { object-position:76% center; }
  .jg-hero-art:after { background:linear-gradient(180deg,#d8f3ff 0%,#d8f3ff9c 13%,#d8f3ff00 34%); }
  .jg-hero-actions { margin-top:17px; gap:13px; }
  .jg-btn.jg-play { min-height:57px; padding:10px 20px; gap:25px; font-size:22px; border-radius:17px; }
  .jg-hero-hint { font-size:11px; }
  .jg-modes { grid-template-columns:1fr; gap:15px; margin:-22px 9px 0; }
  .jg-mode { min-height:176px; padding:17px 18px 17px 43%; border-radius:21px; }
  .jg-mode-art { width:43%; }
  .jg-mode-heading { margin-bottom:5px; }
  .jg-mode h2 { font-size:27px; margin-bottom:6px; }
  .jg-mode p { font-size:12px; line-height:1.6; }
  .jg-mode-foot { margin-top:10px; gap:7px; }
  .jg-mode-foot>span { font-size:10px; }
  .jg-mode-foot>strong { padding:6px 12px; min-height:32px; font-size:13px; }
  .jg-home-bottom { grid-template-columns:1fr; margin:19px 9px 12px; gap:15px; }
  .jg-member { gap:14px; padding:17px; }
  .jg-member-line { gap:11px; }
  .jg-member-name { font-size:20px; }
  .jg-member .jg-member-line { flex-basis:100%; }
  .jg-member>.jg-btn { width:100%; }
  .jg-member .jg-stats { order:0; margin:0; gap:7px; }
  .jg-member .jg-stat { padding:10px 8px; }
  .jg-stat strong { font-size:22px; }
  .jg-stat span { font-size:10px; }
  .jg-friend-card { min-height:99px; padding:16px 17px; }
  .jg-friend-card strong { font-size:20px; }
  .jg-flex-grid { grid-template-columns:1fr; gap:20px; }
  .jg-presets { grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
  .jg-chars { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jg-rule-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jg-panel { padding:21px 17px; border-radius:23px; }
  .jg-page-heading { gap:11px; padding-right:0; margin-bottom:17px; }
  .jg-page-icon { width:50px; height:50px; padding:7px; border-radius:15px; }
  .jg-page-kicker { font-size:10px; letter-spacing:.3px; }
  .jg-panel:before { display:none; }
  .jg-panel h1 { font-size:23px; }
  .jg-panel h2 { font-size:18px; }
  .jg-rule { padding:12px; font-size:11px; }
  .jg-rule strong { font-size:15px; }
  .jg-actions { gap:10px; }
  .jg-actions>.jg-btn { flex:1; }
  .jg-code { font-size:32px; letter-spacing:5px; padding:13px 16px; }
  .jg-table { min-width:390px; font-size:13px; }
  .jg-table td { padding:12px 9px; }
  .jg-table th { padding:12px 9px; }
  .jg-racer { gap:9px; padding:10px; }
  .jg-racer-name { font-size:13px; }
  .jg-racer .jg-pill,.jg-ready { font-size:10px; padding:4px 6px; }
  .jg-tabs { gap:4px; }
  .jg-tab { padding:10px 8px; font-size:13px; }
  .jg-help { margin:0 13px; display:block; }
  .jg-help strong { display:block; margin-bottom:3px; }
}
@media(max-width:390px) {
  .jg-top { padding:9px 10px; }
  .jg-wordmark { font-size:21px; }
  .jg-wordmark:before { width:36px; height:36px; font-size:20px; margin-right:7px; }
  .jg-top-actions { width:100%; justify-content:space-between; }
  .jg-top-actions .jg-btn { flex:1; }
  .jg-hero { padding:24px 18px 232px; }
  .jg-hero h1 { font-size:31px; }
  .jg-hero-actions { gap:10px; }
  .jg-hero-hint { width:100%; }
  .jg-mode { padding-left:39%; padding-right:13px; }
  .jg-mode-art { width:39%; }
  .jg-mode h2 { font-size:25px; }
  .jg-mode p { font-size:12px; }
  .jg-mode .jg-pill { font-size:10px; }
  .jg-panel { padding:20px 13px; }
  .jg-panel h1 { font-size:21px; }
  .jg-page-icon { width:44px; height:44px; padding:6px; }
  .jg-page-heading { gap:9px; }
  .jg-btn { padding:11px 13px; font-size:14px; }
  .jg-rule-grid { gap:9px; }
  .jg-rule { padding:10px; }
}
@media(max-height:550px) and (min-width:600px) {
  .jg-hub { padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  .jg-top { margin-bottom:12px; padding:7px 13px; }
  .jg-hero { min-height:310px; padding:25px 29px 43px; }
  .jg-hero-intro { max-width:60%; }
  .jg-hero-art { inset:0; height:auto; }
  .jg-hero-art:after { background:linear-gradient(90deg,#e8f8ffe6 0%,#e8f8ffb3 30%,#d8f3ff00 58%); }
  .jg-hero h1 { font-size:38px; }
  .jg-hero p { font-size:12px; max-width:320px; }
  .jg-hero-actions { margin-top:15px; }
  .jg-btn.jg-play { min-height:53px; font-size:21px; padding:9px 21px; }
  .jg-modes { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:-20px; gap:11px; }
  .jg-mode { padding:15px 11px 15px 31%; min-height:211px; }
  .jg-mode-art { width:31%; }
  .jg-mode h2 { font-size:21px; }
  .jg-mode p { font-size:11px; }
  .jg-mode-foot>strong { font-size:12px; padding:6px 9px; }
  .jg-home-bottom { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .jg-member .jg-member-line { flex-basis:100%; }
  .jg-panel.narrow { max-width:630px; }
}
@media(prefers-reduced-motion:reduce) {
  .jg-btn,.jg-mode { transition:none; }
  .jg-loading { animation-duration:1.8s; }
}