/* Hop & Shout — voice-controlled platformer. Everything is scoped under .gw so the
   store's generic class names (.app/.pill/.btn/.hint…) don't collide with the site
   nav/buttons in head.php. The .game-* chrome matches the other game pages. */

.game-page{width:min(96vw,920px);margin:0 auto}
.game-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.game-thumb{border-radius:16px;flex:none;box-shadow:0 6px 14px rgba(255,150,180,.25)}
.game-head h1{margin:0;font-size:26px;color:#5a4a6a;text-shadow:0 2px 0 #fff}
.game-head .sub{margin:2px 0 0;color:#9a86ad;font-size:14px}

.gw{user-select:none}
.gw *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.gw .app{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0}
.gw .hud{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.gw .pill{background:#fff;border:2px solid #ffe1ee;border-radius:999px;padding:6px 14px;font-size:15px;font-weight:800;color:#9a86ad;box-shadow:0 4px 12px rgba(255,150,180,.18)}
.gw .pill b{color:#ff7eb3}

.gw .board-wrap{position:relative;max-width:100%}
.gw canvas{display:block;border-radius:16px;box-shadow:0 12px 30px rgba(255,150,180,.25),inset 0 0 0 4px #fff;touch-action:none}

.gw .pad{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:440px}
.gw .left-pad{display:flex;gap:10px}
.gw .dbtn{width:60px;height:60px;border:none;border-radius:18px;cursor:pointer;font-size:24px;font-weight:900;color:#fff;background:linear-gradient(180deg,#ffa9cf,#ff7eb3);box-shadow:0 5px 0 #ef5e98;touch-action:none}
.gw .dbtn:active,.gw .dbtn.on{transform:translateY(3px);box-shadow:0 2px 0 #ef5e98}
.gw .jump{width:84px;height:60px;background:linear-gradient(180deg,#9bd0ff,#5fb8ff);box-shadow:0 5px 0 #3a93dd}
.gw .jump:active,.gw .jump.on{box-shadow:0 2px 0 #3a93dd}

.gw .vbtn{border:none;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:800;cursor:pointer;color:#fff;background:linear-gradient(180deg,#c9a6f0,#a06bff);box-shadow:0 4px 0 #7d49d1}
.gw .vbtn:active{transform:translateY(2px);box-shadow:0 2px 0 #7d49d1}
.gw .vbtn.off{background:#fff;color:#a06bff;box-shadow:0 4px 0 #e5d5fb;border:2px solid #e5d5fb}

.gw .mic{display:flex;align-items:center;gap:8px;width:100%;max-width:440px}
.gw .mic.hidden{display:none}
.gw .mic-ic{font-size:18px;filter:grayscale(1);opacity:.45;transition:opacity .1s,transform .1s}
.gw .mic-ic.live{filter:none;opacity:1;transform:scale(1.15)}
.gw .mic-track{position:relative;flex:1;height:18px;background:#fff;border:2px solid #ffe1ee;border-radius:999px;overflow:hidden}
.gw .mic-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#cfe0ee}
.gw .mic-mark{position:absolute;top:0;bottom:0;width:2px;background:#7ec850}
.gw .mic-mark.jump{background:#ff7eb3}
.gw .mic-status{font-size:12px;font-weight:800;color:#b3a3c4;white-space:nowrap;min-width:92px;text-align:left}
.gw .mic-status.live{color:#3fa96a}
.gw .mic-status.err{color:#e0607a}

.gw .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85);backdrop-filter:blur(4px);border-radius:16px;text-align:center;padding:18px}
.gw .overlay.hidden{display:none}
.gw .ovcard{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:300px}
.gw .ovcard h2{margin:0;font-size:25px;color:#ff8fb1}
.gw .ovcard p{margin:0;font-size:14px;line-height:1.5;color:#6a5a7a}
.gw .btn{display:inline-block;width:auto;cursor:pointer;border:none;padding:12px 26px;border-radius:999px;font-size:16px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ffa9cf,#ff7eb3);box-shadow:0 5px 0 #ef5e98}
.gw .btn:active{transform:translateY(3px);box-shadow:0 2px 0 #ef5e98}
.gw .hint{margin:0;font-size:12px;color:#9a86ad;text-align:center;line-height:1.5}