/* Code Breaker: a warm board of pegs. Sizes come from game.js (--row, --peg, --sw, --slot). */
body{background:radial-gradient(120% 90% at 50% 0%,#FBF7EE,var(--paper) 60%,#E9E0CC)}

/* ------------------------------------------------------------ pegs */
.peg{position:relative;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55),rgba(255,255,255,0) 42%),var(--c);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 2px 4px rgba(40,30,10,.3)}
.peg svg{width:52%;height:52%;display:block;pointer-events:none}
.peg svg *{fill:#fff;stroke:none}
.peg.dark svg *{fill:#1D2433}
.peg svg .o{fill:none;stroke:#fff;stroke-width:3.4}
.peg.dark svg .o{stroke:#1D2433}
html.nosym .peg svg{display:none}
.hole{border-radius:50%;flex:none;background:radial-gradient(circle at 50% 38%,#B9AC90,#D9CEB6 70%);box-shadow:inset 0 2px 3px rgba(60,45,20,.35)}

/* ------------------------------------------------------------- home */
.home{align-items:center;justify-content:center;gap:1.4em;padding:1.2em;text-align:center}
.home-head{display:flex;flex-direction:column;align-items:center;gap:.5em}
.home-pegs{display:flex;gap:.55em;padding:.6em .9em;background:#E9DFC8;border-radius:999px;box-shadow:inset 0 2px 4px rgba(60,45,20,.25)}
.home-pegs .peg{width:2.6em;height:2.6em;animation:drop .5s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:calc(var(--i) * 90ms)}
.title{font:900 clamp(2.3em,9vw,3.6em)/1 var(--sans);margin:0;color:var(--ink);letter-spacing:-.01em}
.tagline{margin:0;color:var(--ink-soft);font-size:1.15em}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.9em}
.stepper{display:flex;align-items:center;gap:.6em;background:var(--panel);border:1px solid var(--hair);border-radius:999px;padding:.3em}
.step{width:48px;height:48px;border-radius:50%;border:0;background:var(--paper);font-size:1.5em;font-weight:800;color:var(--ink);display:grid;place-items:center;padding:0}
.step:disabled{opacity:.3;cursor:default}
.step:focus-visible,.icon-btn:focus-visible,.sw:focus-visible,.slot:focus-visible,.check:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px}
.lv{min-width:11em;display:flex;flex-direction:column;line-height:1.2}
.lv b{font-size:1.1em}
.lv small{color:var(--ink-soft);font-size:.82em}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:.2em}

/* ------------------------------------------------------------- play */
.play{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"bar" "board" "controls";
  padding:max(.4em,env(safe-area-inset-top)) max(.6em,env(safe-area-inset-right)) max(.6em,env(safe-area-inset-bottom)) max(.6em,env(safe-area-inset-left));gap:.5em}
.play.wide{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"board bar" "board controls";column-gap:1.2em;max-width:1100px;margin:0 auto}
.bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:.5em}
.icon-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--hair);background:var(--panel);display:grid;place-items:center;padding:0;flex:none;box-shadow:0 2px 6px rgba(60,45,20,.12)}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.where{display:flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center}
.where b{font-size:1.05em}
.where span{color:var(--ink-soft);font-size:.9em;font-variant-numeric:tabular-nums}
.where span.last{color:var(--bad);font-weight:700}

.boardwrap{grid-area:board;min-height:0;min-width:0;display:grid;place-items:center}
.board{--row:40px;--peg:30px;display:flex;flex-direction:column;gap:calc(var(--row) * .06);padding:calc(var(--row) * .2) calc(var(--row) * .25);
  background:linear-gradient(180deg,#EFE6D2,#E6DBC3);border-radius:calc(var(--row) * .35);box-shadow:0 1px 0 #fff inset,0 10px 28px rgba(60,45,20,.18),0 0 0 1px #D6C9AE}
.brow{height:calc(var(--row) * .94);display:flex;align-items:center;gap:calc(var(--row) * .14);padding:0 calc(var(--row) * .14);border-radius:calc(var(--row) * .5);transition:background .2s}
.brow .num{width:calc(var(--row) * .6);text-align:center;font-weight:700;font-size:calc(var(--row) * .34);color:var(--ink-dim);font-variant-numeric:tabular-nums}
.brow .pegs{display:flex;gap:calc(var(--row) * .14)}
.brow .peg,.brow .hole{width:var(--peg);height:var(--peg)}
.brow.now{background:rgba(47,111,222,.13);box-shadow:inset 0 0 0 2px rgba(47,111,222,.45)}
.brow.now .num{color:var(--accent)}
.brow.later{opacity:.55}
.keys{width:calc(var(--row) * .7);height:calc(var(--row) * .7);display:grid;grid-template-columns:1fr 1fr;place-items:center;margin-left:calc(var(--row) * .1)}
.k{width:calc(var(--row) * .25);height:calc(var(--row) * .25);border-radius:50%;background:#CDBFA2;box-shadow:inset 0 1px 2px rgba(60,45,20,.35)}
.k.b{background:#1D2433;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.k.w{background:#fff;box-shadow:0 0 0 1.5px #1D2433,0 1px 2px rgba(0,0,0,.25)}
.k.in{animation:keyin .32s cubic-bezier(.3,1.7,.5,1) backwards;animation-delay:calc(var(--i) * 110ms)}
.brow.secret{background:#2B3A55;margin-bottom:calc(var(--row) * .1);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.brow.secret .num{color:#B9C6DD}
.brow.secret .num svg{width:70%;height:70%;fill:none;stroke:#B9C6DD;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.brow.secret .keys{visibility:hidden}
.cap{width:var(--peg);height:var(--peg);border-radius:50%;display:grid;place-items:center;flex:none;background:radial-gradient(circle at 40% 30%,#51648A,#3A4B6C);
  color:#D8E1F0;font-weight:900;font-size:calc(var(--peg) * .5);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.brow.secret .peg.flip{animation:flip .5s ease-out backwards;animation-delay:calc(var(--i) * 140ms)}
.brow.win .peg{animation:hop .5s ease-out;animation-delay:calc(var(--i) * 80ms + .35s);animation-fill-mode:backwards}
.peg.drop{animation:drop .22s cubic-bezier(.3,1.6,.5,1)}

/* the tray, the colours, the check */
.controls{grid-area:controls;display:flex;flex-direction:column;align-items:center;gap:.6em;--sw:52px;--slot:56px}
.play.wide .controls{align-self:center}
.trayrow{display:flex;align-items:center;gap:.6em}
.tray{display:flex;gap:6px;padding:6px;background:#E6DBC3;border-radius:999px;box-shadow:inset 0 2px 4px rgba(60,45,20,.25)}
.slot{width:var(--slot);height:var(--slot);border-radius:50%;border:0;padding:0;background:none;display:grid;place-items:center;position:relative}
.slot .peg,.slot .hole{width:88%;height:88%}
.slot.cur::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--accent);animation:none}
.check{height:var(--slot);min-width:5.4em;padding:0 1.1em;border:0;border-radius:999px;font-weight:800;font-size:1.1em;color:#fff;
  background:linear-gradient(180deg,#3FBF7E,#239A5E);box-shadow:0 3px 0 #17704A,0 6px 14px rgba(23,112,74,.3);transition:filter .15s,opacity .15s}
.check:disabled{opacity:.42;filter:saturate(.3);cursor:default;box-shadow:0 3px 0 #9AA79F}
.check:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 #17704A}
.palette{display:grid;grid-template-columns:repeat(var(--pc,6),var(--sw));gap:6px;justify-content:center}
.sw{width:var(--sw);height:var(--sw);border-radius:50%;border:0;padding:0;background:none;display:grid;place-items:center;position:relative;transition:transform .1s,opacity .15s}
.sw .peg{width:100%;height:100%}
.sw:active{transform:scale(.9)}
.sw.used{opacity:.32}
.sw .d{position:absolute;right:-2px;bottom:-2px;min-width:1.25em;height:1.25em;border-radius:999px;background:var(--panel);color:var(--ink-soft);font-size:.62em;font-weight:800;line-height:1.25em;box-shadow:0 0 0 1px var(--hair);display:none}
@media (pointer:fine){.sw .d{display:block}}
.sw.del{background:var(--panel);border:1px solid var(--hair);box-shadow:0 2px 5px rgba(60,45,20,.15)}
.sw.del svg{width:50%;height:50%;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sw.del:disabled{opacity:.35;cursor:default}
.shake{animation:shake .32s}

@keyframes drop{0%{transform:scale(.3)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes keyin{0%{transform:scale(0)}70%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes flip{0%{transform:rotateY(90deg) scale(.8)}100%{transform:none}}
@keyframes hop{0%,100%{transform:none}40%{transform:translateY(-28%) scale(1.08)}}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* cards */
.card .brand{text-align:center;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.75em;color:var(--ink-dim);margin:-.4em 0 .5em}
.card .reveal{display:flex;justify-content:center;gap:.5em;margin:.2em 0 .7em}
.card .reveal .peg{width:2.5em;height:2.5em}
.card .line{text-align:center;color:var(--ink-soft)}
.card .up{text-align:center;font-weight:800;color:var(--good)}
.card.result.won h2{color:var(--good)}
.how p{margin:.35em 0}
.legend{display:flex;flex-direction:column;gap:.5em;margin:.6em 0}
.legend div{display:flex;align-items:center;gap:.7em}
.legend .k{width:1.1em;height:1.1em;flex:none}
.example{display:flex;align-items:center;gap:.4em;justify-content:center;margin:.5em 0}
.example .peg{width:2em;height:2em}
.example .keys{--row:2.4em}
.burst{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

@media (max-height:460px){.card{padding:.8em 1.1em .8em}.card h2{font-size:1.3em;margin-bottom:.35em}.card .reveal{margin:.1em 0 .3em}.card .reveal .peg{width:2em;height:2em}.card .stats{margin:.1em 0 .2em}.card .stats b{font-size:1.25em}.card .actions{flex-direction:row;justify-content:center;gap:1em;margin-top:.5em}.card .pill{padding:.5em 1.6em}.card .rows{gap:.3em}.card .row{min-height:44px;padding:.35em .8em}}
@media (max-height:420px){.home{gap:.6em;padding-top:.6em}.home-pegs{display:none}.title{font-size:2.2em}.home-body{gap:.4em}}