.rg{
  position:relative;width:100%;aspect-ratio:4/5;max-height:78vh;
  border:4px solid var(--ink,#0B1622);border-radius:20px;overflow:hidden;
  background:#5CACE8;box-shadow:0 8px 0 var(--ink,#0B1622);
  touch-action:none;user-select:none;-webkit-user-select:none
}
.rg-c{display:block;width:100%;height:100%}

.rg-hud{
  position:absolute;inset:.6rem .7rem auto;display:flex;justify-content:space-between;
  align-items:flex-start;gap:1rem;pointer-events:none;z-index:2
}
.rg-score{background:rgba(11,22,34,.72);border-radius:10px;padding:.35rem .6rem;color:#fff}
.rg-score span{
  display:block;font-family:var(--mono,monospace);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:#8fc2ea
}
.rg-score b{font-family:var(--display,sans-serif);font-size:1.5rem;line-height:1;color:#FFC53D}
.rg-right{text-align:right}
.rg-lives{display:flex;gap:.2rem;justify-content:flex-end;min-height:27px}
.rg-lives img{display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.rg-hi{
  margin-top:.25rem;font-family:var(--mono,monospace);font-size:.6rem;letter-spacing:.1em;
  color:#0B1622;background:rgba(255,255,255,.72);border-radius:6px;padding:.15rem .4rem;display:inline-block
}

.rg-mute{
  position:absolute;right:.7rem;bottom:.7rem;z-index:3;width:34px;height:34px;cursor:pointer;
  border:2px solid var(--ink,#0B1622);border-radius:50%;background:#fff;color:var(--ink,#0B1622);
  font:700 15px/1 system-ui,sans-serif
}
.rg-mute::before{content:'\266A'}
.rg-mute.off{background:#0B1622;color:#6d88a3}
.rg-mute.off::before{content:'\2715'}

.rg-over{
  position:absolute;inset:0;z-index:4;display:none;place-items:center;
  background:rgba(8,19,31,.62);backdrop-filter:blur(3px);padding:1rem
}
.rg-over.on{display:grid}
.rg-panel{
  background:#fff;border:4px solid var(--ink,#0B1622);border-radius:18px;
  box-shadow:0 8px 0 var(--ink,#0B1622);padding:1.4rem 1.3rem;text-align:center;max-width:24rem
}
.rg-panel h3{
  font-family:var(--display,sans-serif);font-weight:400;margin:0 0 .5rem;
  font-size:clamp(1.4rem,5vw,2rem);line-height:1;color:var(--ink,#0B1622)
}
.rg-panel p{margin:0 0 1rem;font-size:.92rem;color:#33475c}
.rg-final b{font-family:var(--display,sans-serif);font-size:2rem;color:#E0261A;vertical-align:-2px}
.rg-btn{
  font-family:var(--heavy,sans-serif);font-size:1rem;cursor:pointer;color:#fff;background:#E0261A;
  border:3px solid var(--ink,#0B1622);border-radius:999px;padding:.6em 1.3em;
  box-shadow:0 4px 0 var(--ink,#0B1622)
}
.rg-btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--ink,#0B1622)}
.rg-keys{
  margin:.9rem 0 0!important;font-family:var(--mono,monospace);font-size:.66rem;
  line-height:1.6;color:#5f7c97
}

@media (max-width:640px){
  .rg{aspect-ratio:3/4.4;max-height:74vh}
  .rg-score b{font-size:1.2rem}
}