/* Gold Grab — canvas claw game, KidSafe Play pastel theme. All game rules are scoped under .gg so its generic class names (.pill, .btn, .app, .hint) don't clobber the site nav/buttons from head.php. The full-page html,body rules from the standalone version are dropped — the site owns . 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} .gg{user-select:none} .gg *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} .gg .app{display:flex;flex-direction:column;align-items:center;gap:9px;padding:10px 0} .gg .bar{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:center} .gg .pill{background:#fff;border:2px solid #ffe1ee;border-radius:999px;padding:5px 13px;font-size:14px;font-weight:800;color:#9a86ad;box-shadow:0 4px 12px rgba(255,150,180,.18)} .gg .pill b{color:#e8951f} .gg .pill.t b{color:#ff7eb3} .gg .pill.low{border-color:#ff6b6b;background:#fff0f0;animation:ggLowPulse .6s ease-in-out infinite} .gg .pill.low b{color:#e53935} @keyframes ggLowPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}} .gg .iconbtn{cursor:pointer;border:none;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ffa9cf,#ff7eb3);box-shadow:0 4px 0 #ef5e98} .gg .iconbtn:active{transform:translateY(2px);box-shadow:0 2px 0 #ef5e98} .gg .board-wrap{position:relative} .gg canvas{display:block;border-radius:18px;box-shadow:0 12px 30px rgba(180,140,60,.3),inset 0 0 0 4px #fff;touch-action:none;cursor:pointer} .gg .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.86);backdrop-filter:blur(4px);border-radius:18px;text-align:center;padding:18px} .gg .overlay.hidden{display:none} .gg .ovcard{display:flex;flex-direction:column;align-items:center;gap:12px} .gg .ovcard h2{margin:0;font-size:24px;color:#e8951f} .gg .ovcard p{margin:0;font-size:14px} .gg .btn{cursor:pointer;border:none;padding:12px 26px;border-radius:999px;font-size:16px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ffd36b,#ffb43f);box-shadow:0 5px 0 #e8951f} .gg .btn:active{transform:translateY(3px);box-shadow:0 2px 0 #e8951f} .gg .shopb{cursor:pointer;border:none;border-radius:14px;padding:11px 16px;font-size:14px;font-weight:800;color:#6a5a7a;background:#fff4d6;box-shadow:0 4px 0 #f3d27a;width:240px;display:flex;justify-content:space-between;align-items:center;gap:10px} .gg .shopb:active{transform:translateY(2px);box-shadow:0 2px 0 #f3d27a} .gg .shopb:disabled{opacity:.45} .gg .shopb b{color:#e8951f} .gg .iconbtn.dyna{background:linear-gradient(180deg,#ff9a6b,#ff6b3f);box-shadow:0 4px 0 #d44a1f} .gg .iconbtn.dyna:active{box-shadow:0 2px 0 #d44a1f} .gg .iconbtn.shop{background:linear-gradient(180deg,#8be08b,#46c46a);box-shadow:0 4px 0 #2f9c4f} .gg .iconbtn.shop:active{box-shadow:0 2px 0 #2f9c4f} .gg .iconbtn:disabled{opacity:.4} .gg .hint{margin:0;font-size:12px;color:#9a86ad;text-align:center}