/* Sticker Dress-Up — auto-cut a picture into peel-off stickers and dress the doll. All game rules are scoped under .gw so its generic class names (.btn, .row, .hint, #status…) 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} .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:8px;padding:6px 0} .gw .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .gw .btn{display:inline-block;width:auto;cursor:pointer;border:none;border-radius:12px;padding:9px 15px;font-family:inherit;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ffa9cf,#ff7eb3);box-shadow:0 4px 0 #ef5e98} .gw .btn.alt{background:linear-gradient(180deg,#9bd0ff,#5fb8ff);box-shadow:0 4px 0 #3a93dd} .gw .btn:active{transform:translateY(2px);box-shadow:0 2px 0 #ef5e98} .gw .btn.off{opacity:.55;filter:grayscale(.35)} .gw #modes{margin-top:12px} .gw .btn.mode{opacity:.5;filter:grayscale(.3)} .gw .btn.mode.on{opacity:1;filter:none;outline:3px solid #fff;outline-offset:1px} .gw .stage{position:relative;width:min(540px,94vw);max-width:100%;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(255,150,180,.28);border:4px solid #fff;touch-action:none} .gw .stage.tool{cursor:none} .gw .stage .fs-btn{z-index:10001} .gw .board{position:relative;width:100%} .gw .sticker{position:absolute;cursor:grab;will-change:transform;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))} .gw .sticker canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .gw .sticker.lift{cursor:grabbing;z-index:9999 !important;filter:drop-shadow(0 9px 11px rgba(0,0,0,.32))} .gw .hint{font-size:13px;color:#9a86ad;margin:6px 0 0;text-align:center;max-width:540px} .gw #status{font-size:13px;color:#ff7a3d;font-weight:800;min-height:18px} /* fullscreen: the shared helper centers the wrapper, which clips the top controls when the game is taller than the screen — top-align it and let it scroll instead (more specific than fullscreen.css, and split per-vendor so one unknown pseudo can't drop the whole rule). */ .game-page .gw:fullscreen{align-items:flex-start;overflow:auto;padding:10px 0} .game-page .gw:-webkit-full-screen{align-items:flex-start;overflow:auto;padding:10px 0} #tweezers{position:fixed;left:0;top:0;width:132px;height:132px;pointer-events:none;z-index:99999;display:none;filter:drop-shadow(0 4px 5px rgba(0,0,0,.28));will-change:transform} #tweezers .blade{transition:transform .13s ease;transform-box:fill-box;transform-origin:50% 0%} #tweezers .bl-l{transform:rotate(8deg)} /* open (idle / on drop): tips spread apart */ #tweezers .bl-r{transform:rotate(-8deg)} #tweezers.closed .bl-l{transform:rotate(0deg)} /* closed (pinched while grabbing) */ #tweezers.closed .bl-r{transform:rotate(0deg)}