/* The two playable games from the classic site (Colour the letter, Pixel Perfect), embedded in the deck.
   Their rules are copied from site.css / portfolio-base.css and scoped with the palette values they need. */
.game{--bg:#f7f8fb;--surface:#fff;--ink:#0b1220;--muted:#5b6474;--line:#e2d8ca;--accent:#d56c4c;
  --pal-24:#d56c4c;--pal-68:#111111;--pal-72:rgba(0,0,0,.18);--pal-73:#efd8d1;--pal-77:#111827;--pal-78:rgba(15,23,42,.18);--pal-80:rgba(0,0,0,.25);
  width:min(1080px,100%);margin:0 auto;color:var(--ink);font-family:var(--sans)}
.game .label{font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:-.005em;color:var(--accent-deep);margin:0 0 6px}
.game h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.15;margin:0 0 12px}
.game .button{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;border:0;background:var(--accent);color:#fff;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.game .button:hover{background:var(--accent-deep)}
.game .text-link{border:0;background:none;font:inherit;font-weight:600;color:var(--accent-deep);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.game button{font:inherit}
.game p{margin:0 0 8px}
.details-section{padding:80px 0 0}
.cd-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:32px;padding:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.cd-play{display:flex;flex-direction:column;align-items:center;gap:14px}
.cd-board{width:min(100%,340px);aspect-ratio:1;padding:14px;border-radius:24px;background:#fff;border-bottom:6px solid var(--pal-73);box-shadow:0 14px 34px var(--pal-72);transition:transform .3s}
.cd-board svg{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.cd-paint path{fill:none;stroke-width:46;stroke-linecap:round;stroke-linejoin:round}
.cd-done .cd-board{transform:scale(1.04) rotate(-1.5deg)}
.cd-bar{width:min(100%,300px);height:10px;border-radius:5px;background:color-mix(in srgb,var(--ink) 12%,transparent);overflow:hidden}
.cd-bar i{display:block;height:100%;width:0;border-radius:5px;transition:width .15s}
.cd-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cd-controls button{min-width:46px;height:42px;padding:0 12px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:700 16px "Figtree", system-ui, sans-serif;cursor:pointer;transition:border-color .2s;font-size-adjust:none}
.cd-controls button[aria-pressed="true"]{border-color:var(--pal-24);background:color-mix(in srgb,var(--pal-24) 16%,var(--bg))}
.cd-controls button:focus-visible{outline:2px solid var(--pal-24);outline-offset:3px}
.cd-controls .cd-clear{font-size:14px}
.cd-copy h3{margin:6px 0 16px;font:600 clamp(26px,2.8vw,36px)/1.12 "Figtree", system-ui, sans-serif;color:var(--ink);font-size-adjust:none}
.cd-status{min-height:3.4em;margin:0 0 24px;font-size:17px;font-weight:600;line-height:1.6;color:var(--ink)}
.cd-note{padding-top:20px;border-top:1px solid var(--line)}
.cd-note p:not(.label){margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.7}
@media (max-width:760px){.details-section{padding-top:48px}.cd-wrap{grid-template-columns:1fr;padding:18px;gap:26px}}
.try-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--pal-24);color:var(--pal-68);font:700 12px "Figtree", system-ui, sans-serif;letter-spacing:.02em;box-shadow:0 8px 20px var(--pal-72);pointer-events:none;transition:opacity .35s,transform .35s;animation:try-bob 1.8s ease-in-out infinite;font-size-adjust:none}
.cd-board{position:relative}
.cd-board .try-pill{position:absolute;top:-14px;left:50%;translate:-50% 0;z-index:2}
.try-pill-inline{margin-top:14px}
.try-pill.is-gone{opacity:0;transform:scale(.8);animation:none}
@media (prefers-reduced-motion:reduce){.try-pill{animation:none}}
.pixel-game{padding:80px 0 100px}
@media (max-width:760px){.pixel-game{padding:48px 0 70px}}
.pp-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;margin-top:32px;padding:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.pp-stage{display:flex;justify-content:center;padding:28px 12px;border-radius:6px;background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(127,127,127,.08) 7px 8px),repeating-linear-gradient(90deg,transparent 0 7px,rgba(127,127,127,.08) 7px 8px)}
.pp-card{--pp-button-x:0px;--pp-pad-left:20px;--pp-grey:46%;--pp-star-y:0px;--pp-price-x:0px;width:250px;padding:20px 20px 22px var(--pp-pad-left);background:#fff;color:var(--pal-77);border-radius:14px;box-shadow:0 12px 32px var(--pal-78);font-family:"Figtree", system-ui, sans-serif;text-align:left;font-size-adjust:none}
.pp-card p{margin:0}
.pp-card.pp-settle,.pp-card.pp-settle *{transition:all .6s cubic-bezier(.2,.8,.2,1)}
.pp-thumb{height:104px;border-radius:10px;background:linear-gradient(135deg,#d9f2c4,#a8dcae);display:flex;align-items:center;justify-content:center;font-size:44px;margin-bottom:14px}
.pp-title{font-weight:700;font-size:16px;line-height:1.3}
.pp-rating{display:flex;align-items:center;gap:6px;margin-top:4px!important;font-size:12px;color:hsl(220 9% 46%)}
.pp-rating svg{transform:translateY(var(--pp-star-y));flex:none}
.pp-desc{margin-top:10px!important;font-size:13px;line-height:1.5;color:hsl(220 9% var(--pp-grey))}
.pp-price{margin-top:12px!important;font-weight:700;font-size:18px;transform:translateX(var(--pp-price-x))}
.pp-button{display:table;margin:16px auto 0;padding:9px 22px;border-radius:999px;background:var(--pal-77);color:#fff;font-size:13px;font-weight:600;transform:translateX(var(--pp-button-x))}
.pp-panel{min-width:0}
.pp-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.pp-dots{display:flex;gap:6px}
.pp-dots span{width:9px;height:9px;border-radius:50%;border:1px solid var(--line)}
.pp-dots span.is-current{border-color:var(--accent)}
.pp-dots span.is-hit{background:var(--accent);border-color:var(--accent)}
.pp-dots span.is-miss{background:var(--muted);border-color:var(--muted)}
.pp-task{margin:18px 0 20px;font:600 clamp(24px,2.6vw,32px)/1.15 "Figtree", system-ui, sans-serif;color:var(--ink);font-size-adjust:none}
#pp-slider{width:100%;accent-color:var(--accent);cursor:pointer}
#pp-slider:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.pp-hint{margin:8px 0 22px;color:var(--muted);font-size:12px}
.pp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.pp-actions .button{border:0;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:700}
.pp-result{min-height:1.6em;margin:18px 0 0;color:var(--ink);font-weight:600}
.pp-end-score{margin:4px 0 6px;font:600 64px/1 "Figtree", system-ui, sans-serif;color:var(--accent);font-size-adjust:none}
.pp-end-score:focus{outline:none}
.pp-end-text{margin:0 0 24px;color:var(--ink);font-size:18px}
.pp-again{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--ink)}
@media (max-width:760px){.pp-board{grid-template-columns:1fr;padding:18px;gap:22px}}
.pp-best{margin:-12px 0 18px;font-size:12px;font-weight:600;color:var(--pal-24);min-height:1em}
.cd-controls button.is-finished{position:relative}
.cd-controls button.is-finished::after{content:"✓";position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:#3ccf7a;color:#fff;font-size:11px;line-height:18px;text-align:center;box-shadow:0 2px 6px var(--pal-80)}
.workflow-section,#experience,#freelance,#projects,.about-section,.education,.pixel-game,.contact{padding-top:104px;padding-bottom:104px}
.pixel-game{padding-top:40px}
@keyframes try-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}/* keep the game's own show/hide working, and give the result line room under the buttons */
.game [hidden]{display:none!important}
.game .pp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.game .pp-result{margin-top:16px;line-height:1.4}
.game .pp-result:empty{margin-top:0}

/* the deck's self-playing demo stroke and the hand that paints it */
.cd-demo{pointer-events:none}
.cd-demo path{fill:none;stroke-width:46;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.cd-hand{font-size:40px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}