#jg-game { --jg-gold:#ffd166; --jg-ink:#2a1a12; position:relative; width:100%; max-width:100%; margin:18px 0 24px; overflow:hidden; border-radius:24px; border:1px solid #4a3346; background:#22162a; color:#fbf3e6; box-shadow:0 16px 44px rgba(20,8,24,.28); font-family:inherit; isolation:isolate; }
#jg-game *, #jg-game *::before, #jg-game *::after { box-sizing:border-box; }
#jg-game [hidden] { display:none !important; }
#jg-game button { font-family:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#jg-game button:disabled { cursor:default; opacity:.5; }
#jg-game button:focus-visible, #jg-field:focus-visible { outline:3px solid #fff2aa; outline-offset:-4px; }
.jg-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:15px 18px 10px; }
.jg-brand { font-size:12px; font-weight:900; letter-spacing:2px; white-space:nowrap; }
.jg-brand small { color:#c6a9b4; font-size:11px; letter-spacing:0; margin-left:6px; }
.jg-dot { display:inline-block; width:7px; height:7px; background:var(--jg-gold); border-radius:50%; margin-right:6px; }
.jg-tools { display:flex; gap:6px; }
.jg-tools button { min-height:40px; min-width:42px; padding:6px 10px; border:1px solid #5a4258; border-radius:10px; background:#33233a; color:#f1e3e6; font-size:11px; font-weight:800; }
.jg-hud { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 18px 8px; text-align:center; }
.jg-hud>div { padding:9px 3px; border:1px solid #4d3a4d; border-radius:12px; background:#2c1e33; }
.jg-hud small { display:block; color:#c9b0bb; font-size:11px; }
.jg-hud strong { display:block; margin-top:3px; font-size:26px; line-height:1.1; font-weight:900; font-variant-numeric:tabular-nums; }
.jg-hud>div:first-child strong { color:var(--jg-gold); }
.jg-hud>div:nth-child(2) strong { color:#ff8fa3; }
.jg-hud>div:last-child strong { color:#ffe9b5; }
#jg-field { position:relative; height:440px; height:clamp(380px,62svh,600px); margin:0 12px; border:1px solid #4a3346; border-radius:16px; overflow:hidden; touch-action:none; cursor:pointer; user-select:none; -webkit-user-select:none; background:#3a2148; }
#jg-canvas { display:block; width:100%; height:100%; }
.jg-field-top { position:absolute; inset:12px 14px auto; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:1px; color:#ffe9b5; pointer-events:none; font-variant-numeric:tabular-nums; }
.jg-field-top span { padding:3px 9px; border:1px solid rgba(255,233,181,.4); border-radius:20px; background:rgba(34,22,42,.55); font-size:10px; letter-spacing:0; }
#jg-feedback { position:absolute; top:15%; left:10px; right:10px; color:#fff6dc; font-size:19px; font-weight:900; text-align:center; pointer-events:none; text-shadow:0 2px 8px rgba(0,0,0,.45); transition:opacity .2s; }
#jg-feedback[data-tone="perfect"] { color:var(--jg-gold); }
#jg-feedback[data-tone="close"] { color:#ff9fb0; }
#jg-feedback[data-tone="warn"] { color:#ffb08a; }
#jg-feedback[data-tone="milestone"] { color:#8be9a3; font-size:22px; }
#jg-feedback[data-tone="hint"] { color:#ffe9b5; font-size:15px; font-weight:700; }
.jg-floor { padding:12px 18px 14px; text-align:center; color:#c9b0bb; font-size:12px; line-height:1.6; }
.jg-floor b { color:#fff6dc; }
.jg-overlay { position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(28,14,32,.88); border-radius:inherit; }
.jg-panel { width:100%; max-width:390px; text-align:center; }
.jg-eyebrow { color:var(--jg-gold); letter-spacing:2px; font-size:11px; font-weight:900; }
#jg-game .jg-panel h2 { color:#fff6dc; font-size:26px; line-height:1.35; letter-spacing:-1px; font-weight:900; margin:12px 0 16px; word-break:keep-all; }
.jg-panel p { font-size:14px; line-height:1.8; color:#dcc6cd; margin:14px 0; word-break:keep-all; }
.jg-panel p b { color:#fff6dc; }
.jg-pills { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin:16px 0 22px; }
.jg-pills span { border:1px solid #5d4560; padding:5px 9px; border-radius:30px; color:#e6d2d8; font-size:11px; }
.jg-subcopy { display:block; color:#c2a6b1; line-height:1.6; font-size:11px; margin-top:14px; min-height:18px; }
#jg-game .jg-primary { display:flex; align-items:center; justify-content:center; gap:14px; min-height:54px; width:100%; padding:13px 16px; border:0; border-radius:13px; background:var(--jg-gold); color:var(--jg-ink); font-size:17px; line-height:1.3; font-weight:900; box-shadow:0 4px 0 #b98a2a; }
#jg-game .jg-primary span { font-size:12px; opacity:.65; }
#jg-game .jg-primary:active:not(:disabled) { transform:translateY(2px); box-shadow:0 2px 0 #b98a2a; }
#jg-game .jg-secondary { margin-top:12px; padding:12px; width:100%; min-height:46px; background:#3a2742; color:#f1e3e6; border:1px solid #6a4f6c; border-radius:12px; font-size:13px; font-weight:700; }
.jg-demo { position:relative; height:96px; width:180px; margin:18px auto 10px; border-bottom:2px solid #6a4f6c; }
.jg-demo i { position:absolute; left:50%; bottom:6px; width:26px; height:38px; margin-left:-13px; background:radial-gradient(circle at 50% 88%,#ffd166 0 7px,transparent 8px), linear-gradient(90deg,#ff5f6d 0 20%,#ffd166 20% 40%,#4cc9f0 40% 60%,#f8f4e6 60% 80%,#7ae582 80%); background-repeat:no-repeat; clip-path:polygon(22% 0,78% 0,66% 70%,50% 100%,34% 70%); animation:jg-bounce 1.4s ease-in-out infinite; }
.jg-demo b { position:absolute; left:50%; bottom:-2px; width:44px; height:14px; margin-left:-30px; background:#f7f1e3; border:1.5px solid #3a2a28; border-radius:3px 12px 12px 3px; transform-origin:0 100%; animation:jg-foot 1.4s ease-in-out infinite; }
@keyframes jg-bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-62px); } }
@keyframes jg-foot { 0%,80%,100% { transform:rotate(0); } 90% { transform:rotate(-28deg) translateY(-6px); } }
.jg-result-number b { display:block; color:var(--jg-gold); font-size:80px; font-weight:900; letter-spacing:-5px; line-height:1.1; font-variant-numeric:tabular-nums; }
.jg-result-number>span { color:#dcc6cd; font-size:12px; }
.jg-result-detail { border:1px solid #5d4560; border-radius:12px; padding:10px; color:#ffe9b5; margin:16px 0; font-size:12px; line-height:1.6; }
.jg-guide { text-align:left; line-height:1.7; }
.jg-guide h3 { font-size:15px; font-weight:800; margin:0 0 6px; }
.jg-guide p { font-size:14px; margin:0 0 6px; }
.jg-guide small { font-size:12px; color:#7c8795; }
@media (max-width:420px) { #jg-game { border-radius:18px; } .jg-toolbar { padding:12px 12px 8px; } .jg-brand { letter-spacing:1px; font-size:11px; } .jg-brand small { display:none; } .jg-hud { margin:0 12px 8px; } #jg-game .jg-panel h2 { font-size:23px; } .jg-panel p { font-size:13px; } .jg-hud strong { font-size:23px; } }
@media (orientation:landscape) and (max-height:520px) { #jg-field { height:clamp(280px,74svh,520px); } }
@media (prefers-reduced-motion:reduce) { .jg-demo i, .jg-demo b { animation:none; } }