/* Shared styles for ClassroomGames player frames */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Baloo 2","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;background:#1f2a44;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.hud{position:absolute;top:8px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:5;pointer-events:none;flex-wrap:wrap;padding:0 8px}
.pill{background:rgba(10,20,40,.42);backdrop-filter:blur(4px);border-radius:999px;padding:3px 14px;font-weight:800;font-size:15px;letter-spacing:.3px}
.pill b{color:#ffd166}
.stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:44px 10px 10px}
canvas{display:block;max-width:100%;max-height:100%;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);touch-action:none}
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(20,28,50,.82);backdrop-filter:blur(3px);z-index:10;text-align:center;padding:20px}
.ov.hide{display:none}
.ov h2{font-size:clamp(26px,6vw,44px);line-height:1.05;color:#ffd166;text-shadow:0 3px 0 #e76f51}
.ov p{max-width:420px;font-size:clamp(14px,3.4vw,17px);opacity:.92;line-height:1.4}
.btn{font:inherit;font-weight:800;font-size:18px;border:0;border-radius:999px;padding:10px 28px;cursor:pointer;
  background:#06d6a0;color:#073b4c;box-shadow:0 5px 0 #048a68;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #048a68}
.btn.alt{background:#ffd166;box-shadow:0 5px 0 #c9971f}
.btn.ghost{background:rgba(255,255,255,.15);color:#fff;box-shadow:none}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pad{position:absolute;bottom:10px;right:10px;display:grid;grid-template-columns:repeat(3,48px);gap:4px;z-index:6}
.pad button{width:48px;height:48px;border-radius:12px;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:20px}
@media (hover:hover) and (pointer:fine){.pad{display:none}}