/* Sudoku — number-logic grid, KidSafe Play pastel theme. All game rules are scoped under .gw so the store's generic class names (.app, .btn, .opt, .hint, .overlay…) don't clobber the site nav/buttons from head.php. The standalone html,body rules are dropped — the site owns . The board is a compact, centred panel sized by the JS (cellPx); the fullscreen button gives the big view. */ .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{font-family:"Baloo 2","Comic Sans MS","Chalkboard SE",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#6a5a7a;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:4px 0} .gw .board-wrap{position:relative;margin-top:24px} .gw .grid{display:grid;background:#fffafd;border-radius:14px;padding:8px;box-shadow:0 12px 30px rgba(255,150,180,.25),inset 0 0 0 4px #fff} .gw .cell{display:flex;align-items:center;justify-content:center;cursor:pointer; background:#fff;color:#ff7eb3;font-weight:800;border:1px solid #f3e3ef} .gw .cell.given{color:#5a4a6a;background:#fdeef6} .gw .cell.peer{background:#f4e9fb} /* row + column of the selected cell */ .gw .cell.sel{background:#ffd0e8} .gw .cell.same{background:#ffe7f3} .gw .cell.bad{color:#ff5470 !important} /* Little tooltip above the selected cell's 3×3 box, listing its missing numbers. */ .gw .boxtip{position:absolute;bottom:100%;margin-bottom:5px;left:50%;transform:translateX(-50%); z-index:5;white-space:nowrap;pointer-events:none; background:linear-gradient(180deg,#fff,#fbeaf5);color:#b3578a; font-size:12.5px;font-weight:800;padding:5px 12px;border-radius:999px; box-shadow:0 4px 10px rgba(180,90,140,.22)} .gw .boxtip.hidden{display:none} .gw .pad{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:380px} .gw .key{cursor:pointer;border:none;border-radius:14px;font-size:22px;font-weight:900;color:#fff; background:linear-gradient(180deg,#ffa9cf,#ff7eb3);box-shadow:0 4px 0 #ef5e98; width:46px;height:46px;display:inline-block;transition:transform .06s ease,box-shadow .06s ease} .gw .key:active{transform:translateY(3px);box-shadow:0 1px 0 #ef5e98} .gw .key.erase{background:#fff;color:#ff7eb3;border:2px solid #ffd0e3;box-shadow:0 4px 0 #ffd0e3} .gw .controls{display:flex;gap:10px} /* head.php's global .btn is display:block;width:100%;margin-top:18px — reset all of that here (the margin-top is what knocked the race buttons below the dropdown). */ .gw .btn{cursor:pointer;border:2px solid #ffd0e3;padding:10px 20px;border-radius:999px;font-family:inherit; font-size:15px;font-weight:800;color:#ff7eb3;background:#fff;box-shadow:0 4px 0 #ffd0e3; display:inline-block;width:auto;margin:0} .gw .btn:active{transform:translateY(3px);box-shadow:0 1px 0 #ffd0e3} .gw .btn.solid{color:#fff;background:linear-gradient(180deg,#ffa9cf,#ff7eb3);border:none;box-shadow:0 5px 0 #ef5e98} .gw .btn.fsbtn{padding:10px 15px;font-size:18px;line-height:1} /* fullscreen icon toggle */ .gw .btn:disabled{opacity:.4;box-shadow:none;cursor:default} /* Hint after its single use */ .gw .btn:disabled:active{transform:none} .gw .timer{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:800;color:#b3578a; background:#fff;padding:5px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(255,150,180,.18)} .gw .timer .clock{font-size:14px} /* Toolbar: size dropdown · difficulty dropdown · timer — all on one line. Scoped to .bar so `.sel` never collides with a selected cell (.cell.sel). */ .gw .bar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap} .gw .bar .sel{border:2px solid #ffd0e3;border-radius:999px;padding:7px 14px;font-family:inherit; font-size:13.5px;font-weight:800;color:#ff7eb3;background:#fff;cursor:pointer} .gw .bar .sel:disabled{opacity:.5;cursor:default} .gw .ovcard .ovtime{font-weight:800;color:#ff7eb3;font-size:20px} .gw .ovcard .ovrank{font-weight:800;color:#7d6aa0;font-size:15px;margin:0} /* Race / campaign — pick or create a shared puzzle and chase the fastest time. */ .gw .hidden{display:none} /* element-specific so it beats the equal-specificity display rules below */ .gw .race-idle.hidden,.gw .race-live.hidden,.gw .race-board.hidden{display:none} .gw .race{width:100%;max-width:420px;display:flex;flex-direction:column;gap:8px; background:#fff;border-radius:16px;padding:10px 12px;box-shadow:0 4px 12px rgba(255,150,180,.18)} .gw .race-idle,.gw .race-live{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center} /* select + buttons share one height AND a soft (not bottom-bar) shadow so they line up visually — the default .btn drop-shadow draws a solid bar below the button, which makes it look lower than the shadowless select. */ .gw .race-select{flex:1 1 150px;min-width:120px;height:40px;box-sizing:border-box;border:2px solid #ffd0e3;border-radius:12px;padding:0 10px;font-family:inherit;font-size:13px;font-weight:700;color:#6a5a7a;background:#fff} .gw .race .btn{height:40px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center; padding:0 16px;font-size:13.5px;box-shadow:0 3px 8px rgba(231,155,190,.35)} .gw .race .btn.solid{box-shadow:0 3px 8px rgba(239,94,152,.45)} .gw .race .btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(231,155,190,.35)} .gw .race-on{font-weight:800;color:#ff7eb3} .gw .race-on::before{content:'🏁 '} .gw .race-msg{margin:0;text-align:center;font-size:12.5px;color:#b3578a} .gw .race-msg:empty{display:none} .gw .race-board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;width:100%} .gw .race-board li{display:flex;align-items:center;gap:8px;font-size:13.5px;background:#fff6fb;border-radius:10px;padding:5px 10px} .gw .race-board .rk{font-weight:800;color:#ff7eb3;width:18px;text-align:center} .gw .race-board .nm{flex:1;font-weight:700;color:#6a5a7a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gw .race-board .tm{font-weight:800;color:#7d6aa0} .gw .race-board.ovboard{margin:6px 0} /* New-race modal — one popup: race name + your name + create/cancel. */ .gw .race-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center; background:rgba(60,40,70,.45);padding:20px} .gw .race-modal.hidden{display:none} .gw .race-modal-card{background:#fff;border-radius:20px;padding:20px;width:min(92vw,320px); display:flex;flex-direction:column;gap:11px;box-shadow:0 18px 40px rgba(120,60,120,.32)} .gw .race-modal-card h3{margin:0 0 2px;color:#ff8fb1;font-size:20px;text-align:center;text-shadow:0 1px 0 #fff} .gw .race-modal-card input{border:2px solid #ffd0e3;border-radius:12px;padding:10px 14px;font-family:inherit; font-size:15px;font-weight:700;color:#6a5a7a} .gw .race-modal-msg{margin:0;text-align:center;font-size:12.5px;color:#ff5470} .gw .race-modal-msg:empty{display:none} .gw .race-modal-btns{display:flex;gap:10px;justify-content:center;margin-top:2px} .gw .race-modal-row{display:flex;gap:10px} .gw .race-modal-row.hidden,.gw .race-modal input.hidden{display:none} .gw .race-modal .sel{flex:1;border:2px solid #ffd0e3;border-radius:12px;padding:9px 12px;font-family:inherit; font-size:14px;font-weight:700;color:#6a5a7a;background:#fff;cursor:pointer} .gw .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.85);backdrop-filter:blur(4px);border-radius:14px;text-align:center;padding:18px} .gw .overlay.hidden{display:none} .gw .ovcard{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:280px} .gw .ovcard h2{margin:0;font-size:26px;color:#ff8fb1} .gw .ovcard p{margin:0;font-size:14.5px;line-height:1.5} .gw .hint{margin:0;font-size:13px;color:#9a86ad;text-align:center}