/* Crack the Code — kid-friendly Mastermind (DOM pegs + color palette), KidSafe Play pastel theme. Scoped under .cc so generic class names don't clobber the site nav/buttons from head.php. No full-page html,body rules — the site owns . */ .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} .cc{user-select:none} .cc *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} .cc .app{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0;max-width:min(96vw,440px);margin:0 auto} .cc .toprow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center} .cc .lbl{font-size:13px;font-weight:800;color:#9a86ad} .cc .toggle{display:flex;gap:6px;background:#fff;padding:4px;border-radius:999px;box-shadow:0 4px 12px rgba(255,150,180,.18)} .cc .opt{cursor:pointer;border:none;background:transparent;color:#9a86ad;padding:6px 14px;border-radius:999px;font-size:14px;font-weight:800} .cc .opt.active{background:linear-gradient(180deg,#ffa9cf,#ff7eb3);color:#fff} .cc .iconbtn{cursor:pointer;border:none;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ffa9cf,#ff7eb3);box-shadow:0 4px 0 #ef5e98} .cc .iconbtn:active{transform:translateY(2px);box-shadow:0 2px 0 #ef5e98} .cc .iconbtn.ghost-ic{background:#fff;color:#9a86ad;box-shadow:0 4px 0 #e7dced;padding:6px 12px} .cc .iconbtn.ghost-ic:active{box-shadow:0 2px 0 #e7dced} .cc .board-wrap{position:relative;padding:4px} .cc .board{display:flex;flex-direction:column;gap:7px;align-items:center} .cc .crow{display:flex;gap:9px;align-items:center;opacity:.55} .cc .crow.active{opacity:1} .cc .crow.done{opacity:1} .cc .peg{width:clamp(30px,9.5vw,42px);height:clamp(30px,9.5vw,42px);border-radius:50%;background:#fff7fb;border:2px dashed #e6d7ee;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:clamp(15px,5vw,22px);color:#5a4a6a} .cc .peg.set{border:2px solid #ffd5e6;background:#fff} .cc .peg.correct{background:#57c65f;border-color:#57c65f} .cc .peg.present{background:#ffc24b;border-color:#ffc24b} .cc .peg.absent{background:#ff6b6b;border-color:#ff6b6b} .cc .palette{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;align-items:center} .cc .pk{width:clamp(34px,10vw,44px);height:clamp(34px,10vw,44px);border-radius:50%;background:#fff;border:2px solid #ffd5e6;cursor:pointer;box-shadow:0 3px 8px rgba(150,120,170,.25);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:clamp(16px,5vw,22px);color:#5a4a6a} .cc .pk:active{transform:translateY(2px)} .cc .actions{display:flex;gap:9px;justify-content:center;margin-top:2px} .cc .btn{cursor:pointer;border:none;display:inline-block;width:auto;padding:10px 22px;border-radius:999px;font-size:15px;font-weight:800;color:#fff;background:linear-gradient(180deg,#8be08b,#46c46a);box-shadow:0 5px 0 #2f9c4f} .cc .btn:active{transform:translateY(3px);box-shadow:0 2px 0 #2f9c4f} .cc .btn.ghost{color:#9a86ad;background:#fff;box-shadow:0 4px 0 #e7dced} .cc .overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border-radius:18px;text-align:center;padding:18px} .cc .overlay.hidden{display:none} .cc .ovcard{display:flex;flex-direction:column;align-items:center;gap:12px} .cc .ovcard h2{margin:0;font-size:24px;color:#ff8fb1} .cc .ovcard p{margin:0;font-size:15px} .cc .ovcode{display:flex;gap:8px;justify-content:center} .cc .dot{width:30px;height:30px;border-radius:50%;background:#57c65f;border:2px solid #57c65f;box-shadow:0 2px 6px rgba(150,120,170,.25);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;color:#5a4a6a} .cc .ovbtn{cursor:pointer;border:none;padding:12px 26px;border-radius:999px;font-size:16px;font-weight:800;color:#fff;background:linear-gradient(180deg,#ffa9cf,#ff7eb3);box-shadow:0 5px 0 #ef5e98} .cc .ovbtn:active{transform:translateY(3px);box-shadow:0 2px 0 #ef5e98} .cc .hint{margin:0;font-size:12.5px;color:#9a86ad;text-align:center;max-width:420px;line-height:1.5}