/* Fruity Pi — drop-and-merge fruit (Suika-style), KidSafe Play. All game rules are scoped under .gw so its generic class names (.app, .panel, .hint, button) don't clobber the site nav/buttons from head.php. The standalone html,body full-page rules are dropped — the site owns . The canvas is sized by the JS to a compact, centred mobile panel (the fullscreen button gives the big view). 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;color:#5a3b1a} .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:12px;width:100%;max-width:420px} .gw .panel{background:#fff;border:2px solid #ffe1ee;border-radius:14px;padding:8px 14px;flex:1;text-align:center;box-shadow:0 4px 12px rgba(255,150,180,.18)} .gw .panel .label{font-size:10px;opacity:.7;text-transform:uppercase;letter-spacing:1px;color:#9a86ad} .gw .panel .value{font-size:22px;font-weight:800;color:#e8951f} .gw .stage{position:relative;max-width:100%} .gw canvas{background:linear-gradient(180deg,#fffaf0,#fff1d8);border-radius:16px;box-shadow:0 12px 30px rgba(150,90,20,.3),inset 0 0 0 4px rgba(255,255,255,.6);touch-action:none;display:block} /* tilt buttons sit in the board's top corners; Next is a small icon on the board (top-center) */ .gw .next-ic{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:5;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(150,90,20,.18)} .gw .controls{display:flex;gap:10px} .gw button{font:inherit;font-weight:800;display:inline-block;width:auto;background:linear-gradient(180deg,#ffb43f,#ff8a3d);color:#fff;border:none;padding:10px 22px;border-radius:999px;cursor:pointer;box-shadow:0 4px 0 #d96a20;transition:transform .08s,box-shadow .08s} .gw button:active{transform:translateY(3px);box-shadow:0 1px 0 #d96a20} .gw .hint{font-size:12px;opacity:.75;color:#9a86ad;text-align:center} .gw .overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(90,59,26,.78);color:#fff;border-radius:16px;z-index:10;backdrop-filter:blur(3px)} .gw .overlay.show{display:flex} .gw .overlay h2{margin:0;font-size:30px} /* sound + fullscreen now sit in a bottom bar — override the shared absolute positioning */ .gw .botbar{display:flex;justify-content:center;gap:14px;margin-top:10px} .gw .botbar .snd-btn,.gw .botbar .fs-btn{position:static;top:auto;right:auto;background:rgba(255,255,255,.95);color:#6a5a7a;box-shadow:0 4px 12px rgba(150,90,20,.18)} .gw .stage.arming{cursor:crosshair} /* danger countdown — blinks over the board while the lose-timer runs */ .gw .danger{position:absolute;top:56px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:4px;background:#fff0f0;border:2px solid #ff6b6b;color:#e53935;font-size:15px;font-weight:800;border-radius:999px;padding:5px 13px;box-shadow:0 3px 10px rgba(229,57,53,.25);z-index:6} .gw .danger.show{display:inline-flex;animation:fpDanger .5s ease-in-out infinite} @keyframes fpDanger{0%,100%{transform:translateX(-50%) scale(1);opacity:1}50%{transform:translateX(-50%) scale(1.12);opacity:.55}} /* tilt buttons — in the board's top corners; 3 charges each (badge) */ .gw .stage .tilt{position:absolute;top:8px;z-index:5;font-size:18px;line-height:1;padding:12px 13px;border-radius:14px;background:linear-gradient(180deg,#9bd0ff,#5fb8ff);box-shadow:0 4px 0 #3a93dd} .gw .stage .tilt.corner-l{left:8px} .gw .stage .tilt.corner-r{right:8px} .gw .stage .tilt:active{transform:translateY(3px);box-shadow:0 1px 0 #3a93dd} .gw .stage .tilt.corner-r .cnt{right:auto;left:-7px} .gw .tilt .ti{display:block} .gw .tilt .cnt{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;line-height:20px;text-align:center;font-size:12px;font-weight:800;color:#fff;background:#ff7eb3;border-radius:999px;box-shadow:0 2px 5px rgba(239,94,152,.4)} .gw .tilt.off{opacity:.4} .gw .tilt.off .cnt{background:#c7b6d6} /* power-up row */ .gw .powers{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap} .gw .power{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:auto;padding:8px 16px;border-radius:16px;background:#fff;border:2px solid #ffe1ee;color:#9a86ad;box-shadow:0 4px 12px rgba(255,150,180,.18)} .gw .power:active{transform:translateY(2px);box-shadow:0 2px 6px rgba(255,150,180,.18)} .gw .power .ico{font-size:22px;line-height:1} .gw .power .plabel{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px} .gw .power .cnt{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;line-height:20px;text-align:center;font-size:12px;font-weight:800;color:#fff;background:#ff7eb3;border-radius:999px;box-shadow:0 2px 5px rgba(239,94,152,.4)} .gw .power.off{opacity:.4} .gw .power.off .cnt{background:#c7b6d6} .gw .power.active{border-color:#ff7eb3;background:#fff0f6;box-shadow:0 0 0 3px rgba(255,126,179,.3)} /* special-bomb fruit picker */ .gw .pick-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(90,59,26,.5);backdrop-filter:blur(3px);z-index:20;padding:18px} .gw .pick-overlay.hidden{display:none} .gw .pick-card{background:#fff;border:3px solid #ffe1ee;border-radius:22px;padding:18px;max-width:340px;width:100%;box-shadow:0 16px 40px rgba(150,90,20,.3);text-align:center} .gw .pick-card h3{margin:0 0 12px;font-size:17px;color:#5a4a6a} .gw .pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px} .gw .pickb{position:relative;display:flex;flex-direction:column;align-items:center;width:auto;padding:8px 0;border-radius:14px;background:#fff7fb;border:2px solid #ffe1ee;box-shadow:none} .gw .pickb:active{transform:translateY(2px)} .gw .pickb .pe{display:block;width:32px;height:32px} .gw .pickb .pc{font-size:11px;font-weight:800;color:#9a86ad} .gw .pickb.off{opacity:.35} .gw .pick-card #pickCancel{background:#fff0f3;color:#d24a63;box-shadow:0 4px 0 #ffd5dd;padding:9px 22px} .gw .pick-card #pickCancel:active{transform:translateY(2px);box-shadow:0 1px 0 #ffd5dd}