.ghr-app{
  --ghr-ink:#17362b;
  --ghr-green:#2f8f57;
  --ghr-deep:#125038;
  --ghr-gold:#ffcf4a;
  --ghr-cream:#fff8e6;
  --ghr-sky:#dff7ff;
  --ghr-road:#424851;
  --ghr-white:#fff;
  --ghr-shadow:0 18px 55px rgba(21,69,51,.18);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ghr-ink);
  width:100%;
  margin:22px auto;
}
.ghr-app *{box-sizing:border-box}
.ghr-shell{max-width:1040px;margin:auto;background:linear-gradient(145deg,#fffdf4,#eefaf1);border:1px solid #dceee2;border-radius:28px;padding:18px;box-shadow:var(--ghr-shadow)}
.ghr-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 14px}
.ghr-kicker{text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:12px;color:var(--ghr-green)}
.ghr-title{margin:3px 0 0;font-size:clamp(24px,4vw,38px);line-height:1.05}
.ghr-sound,.ghr-pause,.ghr-mobile-controls button{border:0;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(24,73,53,.12);cursor:pointer}
.ghr-top-actions{display:flex;align-items:center;gap:8px}
.ghr-sound{width:48px;height:48px;font-size:22px}
.ghr-pause{height:48px;padding:0 16px;font-weight:900;color:#174833;font-size:14px}
.ghr-pause:disabled{opacity:.45;cursor:not-allowed}
.ghr-stage-wrap{position:relative;overflow:hidden;border-radius:24px;background:#bee49f;min-height:320px}
.ghr-canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;background:#91d881;touch-action:none}
.ghr-hud{position:absolute;z-index:6;left:12px;right:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.ghr-chip{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);padding:7px 10px;border-radius:999px;font-weight:800;font-size:13px;box-shadow:0 5px 16px rgba(0,0,0,.08)}
.ghr-panel{position:absolute;z-index:10;inset:0;margin:auto;width:min(92%,560px);height:max-content;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);border-radius:26px;padding:24px;box-shadow:0 28px 70px rgba(18,80,56,.25);text-align:center}
.ghr-panel[hidden]{display:none!important}
.ghr-mascot{font-size:48px;line-height:1}
.ghr-panel h3{margin:10px 0 6px;font-size:26px}
.ghr-panel p{margin:0 0 14px;line-height:1.55}
.ghr-panel label{display:block;text-align:left;font-size:13px;font-weight:800;margin:10px 0}
.ghr-panel input,.ghr-panel select{width:100%;margin-top:6px;border:1px solid #cadfd0;border-radius:12px;padding:11px 12px;font:inherit;background:#fff;color:#17362b}
.ghr-primary,.ghr-secondary,.ghr-link-btn{appearance:none;border:0;border-radius:14px;padding:12px 18px;font-weight:900;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ghr-primary{background:linear-gradient(135deg,#2f8f57,#17643f);color:#fff;box-shadow:0 10px 26px rgba(47,143,87,.25)}
.ghr-secondary{background:#f2f6f3;color:#234d38;border:1px solid #d9e9dd}
.ghr-link-btn{background:#fff4c9;color:#6e5100;border:1px solid #f2d779}
.ghr-help{margin-top:10px;font-size:12px;color:#60766b}
.ghr-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ghr-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.ghr-summary div{background:#f4f9f5;border-radius:16px;padding:12px}
.ghr-summary b{display:block;font-size:22px}
.ghr-summary span{font-size:12px;color:#6c7c72}
.ghr-fact-toast{position:absolute;z-index:7;left:50%;bottom:18px;transform:translate(-50%,20px);width:min(86%,540px);background:rgba(18,62,44,.94);color:white;border-radius:16px;padding:12px 16px;opacity:0;pointer-events:none;transition:.25s ease;box-shadow:0 14px 34px rgba(0,0,0,.25)}
.ghr-fact-toast.show{opacity:1;transform:translate(-50%,0)}
.ghr-fact-toast b{display:block;color:#ffe27e}
.ghr-fact-toast span{display:block;font-size:13px;line-height:1.4;margin-top:2px}
.ghr-mobile-controls{display:flex;justify-content:center;gap:14px;margin:14px 0 2px}
.ghr-mobile-controls button{width:84px;height:54px;font-size:28px;font-weight:900;color:#174833;touch-action:none;user-select:none}
.ghr-mobile-controls button:active{transform:translateY(1px);background:#eaf6ed}
.ghr-edu-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
.ghr-edu-strip div{background:#fff;border:1px solid #e1eee4;border-radius:16px;padding:10px;text-align:center;font-size:20px}
.ghr-edu-strip b,.ghr-edu-strip span{display:block}
.ghr-edu-strip b{font-size:12px;margin-top:4px}
.ghr-edu-strip span{font-size:10px;color:#738378}
.ghr-modal{position:fixed;z-index:999999;inset:0;background:rgba(10,35,25,.66);display:grid;place-items:center;padding:20px}
.ghr-modal[hidden]{display:none!important}
.ghr-modal-card{width:min(94vw,620px);max-height:94vh;overflow:auto;background:#fff;border-radius:26px;padding:18px;position:relative;box-shadow:0 32px 90px rgba(0,0,0,.32)}
.ghr-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:#eef4ef;font-size:26px;cursor:pointer}
.ghr-reward-card{background:radial-gradient(circle at top,#fff4b2,#e8f7e9 55%,#d8efe0);border:2px solid #d4a834;border-radius:24px;padding:28px;text-align:center;position:relative;overflow:hidden}
.ghr-reward-card:before,.ghr-reward-card:after{content:"🌿";position:absolute;font-size:74px;opacity:.12}
.ghr-reward-card:before{left:-10px;top:12px;transform:rotate(-25deg)}
.ghr-reward-card:after{right:-10px;bottom:12px;transform:rotate(155deg)}
.ghr-reward-badge{font-size:52px}
.ghr-reward-kicker{text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#2f8f57;font-size:12px}
.ghr-reward-card h3{font-size:28px;margin:5px 0 14px}
.ghr-reward-card p{margin:8px 0}
.ghr-player-award{font-size:28px;font-weight:1000;color:#124f37;padding:8px;border-bottom:2px dashed #99c3a9;margin:6px auto 14px;max-width:420px}
.ghr-discount{font-size:30px;font-weight:1000;color:#9b6200;margin-top:16px}
.ghr-code{display:inline-block;margin:6px 0 10px;padding:8px 14px;border:1px dashed #7f9e89;border-radius:12px;background:rgba(255,255,255,.65)}
.ghr-reward-card small{display:block;max-width:450px;margin:6px auto;line-height:1.4}
.ghr-reward-date{font-size:11px;margin-top:10px;color:#697c71}
.ghr-modal-actions{margin-top:14px}
@media (max-width:760px){
  .ghr-shell{border-radius:18px;padding:10px}
  .ghr-stage-wrap{border-radius:16px}
  .ghr-panel{padding:18px}
  .ghr-panel h3{font-size:22px}
  .ghr-hud{gap:5px;left:7px;right:7px;top:7px}
  .ghr-chip{font-size:11px;padding:5px 7px}
  .ghr-edu-strip{grid-template-columns:repeat(2,1fr)}
  .ghr-edu-strip div:last-child{grid-column:1/-1}
}

.ghr-pause-panel{z-index:12}
.ghr-pause-panel .ghr-primary{min-width:160px}