/* Piano Tiles — 7-lane falling-tile rhythm game, KidSafe Play pastel theme. All game rules are scoped under .gw so its generic class names (.app, .hud, .stage, .overlay, .songbtn, .bigbtn) don't clobber the site nav/buttons from head.php. The standalone html,body rules are dropped — the site owns . The .game-* chrome matches the other game pages. Desktop: the stage fills the full .game-page width (a landscape panel, not a narrow portrait column). */ .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;font-family:"Baloo 2","Comic Sans MS","Chalkboard SE",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#6a5a7a} .gw *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} .gw .app{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;width:100%} .gw .hud{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:420px;padding:0 6px;height:34px;flex:0 0 auto} .gw .hud .song{font-size:16px;font-weight:800;color:#ff8fb1;text-shadow:0 1px 0 #fff;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gw .hud .stat{font-size:16px;font-weight:800;color:#7d6aa0} .gw .hud .lives{letter-spacing:1px;font-size:17px} /* Compact portrait panel, centred in .game-page — the JS sizes it (max ~420x660), the fullscreen button gives the big view. Not full-width: a wide landscape board would wreck the falling-tile genre. */ .gw .stage{position:relative;max-width:100%; border-radius:22px;overflow:hidden;touch-action:none; background:linear-gradient(180deg,#2a2342,#3a2f5c); box-shadow:0 10px 30px rgba(90,60,120,.30),inset 0 2px 8px rgba(255,255,255,.08)} .gw canvas{display:block;width:100%;height:100%;touch-action:none} .gw .overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:14px;padding:22px;text-align:center;background:rgba(34,26,56,.78);backdrop-filter:blur(3px)} .gw .overlay.hide{display:none} .gw .overlay h1{margin:0;font-size:30px;color:#ffd9ea;text-shadow:0 2px 0 rgba(0,0,0,.25)} .gw .overlay h2{margin:0;font-size:24px;color:#fff} .gw .overlay p{margin:0;font-size:15px;color:#d9cdf0;line-height:1.5} .gw .stars{font-size:38px;letter-spacing:4px} .gw .speedsel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:420px} .gw .speedlabel{font-size:14px;font-weight:800;color:#d9cdf0} .gw .speedbtn{border:0;cursor:pointer;padding:7px 14px;border-radius:13px;font-family:inherit; font-size:13px;font-weight:800;width:auto;display:inline-block; background:rgba(255,255,255,.16);color:#e9def8; box-shadow:inset 0 0 0 2px rgba(255,255,255,.18); transition:transform .06s ease,background .12s ease,box-shadow .12s ease} .gw .speedbtn.is-active{background:linear-gradient(180deg,#ffe3f1,#ffc2dd);color:#5b3b6e; box-shadow:0 4px 0 #e79bbe,inset 0 2px 5px rgba(255,255,255,.6)} .gw .speedbtn:active{transform:translateY(2px)} .gw .songlist{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:420px} .gw .songbtn{border:0;cursor:pointer;padding:11px 16px;border-radius:16px;font-family:inherit; font-size:15px;font-weight:800;color:#5b3b6e;width:auto;display:inline-block; background:linear-gradient(180deg,#ffe3f1,#ffc2dd); box-shadow:0 5px 0 #e79bbe,inset 0 2px 5px rgba(255,255,255,.6); transition:transform .06s ease,box-shadow .06s ease} .gw .songbtn:active{transform:translateY(3px);box-shadow:0 2px 0 #e79bbe} .gw .bigbtn{border:0;cursor:pointer;padding:13px 30px;border-radius:18px;font-family:inherit; font-size:18px;font-weight:800;color:#fff;width:auto;display:inline-block; background:linear-gradient(180deg,#7bd0ff,#4dabf7); box-shadow:0 6px 0 #2f8fd6,inset 0 2px 6px rgba(255,255,255,.5); transition:transform .06s ease,box-shadow .06s ease} .gw .bigbtn:active{transform:translateY(3px);box-shadow:0 2px 0 #2f8fd6}