/* Fruit Cut — ported from game-store/fruit-cut.html. All rules scoped under .gw so the
   store's generic class names (.app/.btn/.overlay…) don't collide with the site chrome. */

/* shared game header chrome (copied from gold-grab.css) */
.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:8px 0}

/* the play area — a compact, centred panel; canvas is sized by the JS, not the page width */
.gw .stage{position:relative;max-width:100%;border-radius:18px;overflow:hidden;
  box-shadow:0 12px 30px rgba(255,150,180,.30);
  background:linear-gradient(160deg,#bfe7ff,#ffd6ea 60%,#fff0c2)}
.gw canvas{display:block;touch-action:none}

.gw .hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:center;padding:10px 14px;pointer-events:none;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.4)}
.gw .score{font-size:26px;flex:1;color:#fff}
.gw .level{font-size:18px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.7);color:#ff7eb3;white-space:nowrap}
.gw .lives{font-size:20px;letter-spacing:2px;flex:1;text-align:right}

.gw .levelup{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(0);
  font-size:30px;font-weight:900;pointer-events:none;color:#7CFC00;text-shadow:0 2px 10px rgba(0,0,0,.6);
  transition:transform .2s ease,opacity .5s ease;opacity:0}
.gw .levelup.show{transform:translate(-50%,-50%) scale(1);opacity:1}
.gw .combo{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(0);
  font-size:34px;font-weight:900;pointer-events:none;color:#ffe600;text-shadow:0 2px 10px rgba(0,0,0,.6);
  transition:transform .15s ease,opacity .4s ease;opacity:0}
.gw .combo.show{transform:translate(-50%,-50%) scale(1);opacity:1}

.gw .overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;background:rgba(255,255,255,.82);backdrop-filter:blur(4px);
  text-align:center;padding:24px}
.gw .overlay.hidden{display:none}
.gw .overlay h2{margin:0;font-size:30px;color:#5a4a6a}
.gw .overlay p{margin:0;opacity:.85;font-size:15px;max-width:280px;line-height:1.5}
.gw .best{font-size:14px;opacity:.8}

/* reset the site's global block/full-width .btn, then style */
.gw .btn{display:inline-block;width:auto;pointer-events:auto;cursor:pointer;border:none;
  padding:14px 30px;border-radius:999px;font-size:18px;font-weight:800;color:#fff;
  background:linear-gradient(180deg,#ffa9cf,#ff7eb3);
  box-shadow:0 6px 0 #ef5e98,0 10px 20px rgba(255,150,180,.4);
  transition:transform .08s ease,box-shadow .08s ease;margin:0}
.gw .btn:active{transform:translateY(4px);box-shadow:0 2px 0 #ef5e98,0 6px 12px rgba(255,150,180,.4)}