:root{--ink:#123d77;--paper:#fffdf6;--mint:#36c894;--mint-dark:#1a9c75;--blue:#dff4ff;--line:#b9e3fa;--pink:#ff5267;--orange:#ff8139;--green:#30b98b;--yellow:#ffb915}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;margin:0;background:#d9f5f1;color:var(--ink);font-family:Nunito,sans-serif}button{font:inherit;cursor:pointer}.match-shell{width:min(calc(100% - 32px),1250px);min-height:calc(100vh - 32px);margin:16px auto;overflow:hidden;border:7px solid #15384a;border-radius:28px;background:var(--paper);box-shadow:0 10px 0 rgba(18,57,75,.17)}.match-topbar{display:flex;align-items:center;justify-content:space-between;height:75px;padding:0 clamp(20px,5vw,62px);border-bottom:2px solid rgba(18,61,119,.08)}.match-brand{color:var(--ink);font:800 clamp(19px,2.4vw,26px)/1 'Baloo 2',cursive;text-decoration:none;text-transform:uppercase}.match-brand span{color:#20a6cf}.match-menu{width:42px;height:42px;padding:8px;border:0;background:transparent}.match-menu span{display:block;height:3px;margin:4px 0;border-radius:4px;background:var(--ink)}.match-hero{position:relative;padding:19px 20px 16px;text-align:center}.eyebrow{margin:0;color:#2274b8;font-size:12px;font-weight:900;letter-spacing:1.4px}.eyebrow span{color:#20a6cf;font-size:18px;vertical-align:-2px}.match-hero h1{margin:3px 0 0;font:800 clamp(34px,5vw,57px)/.96 'Baloo 2',cursive}.match-hero>p:last-child{margin:4px 0 0;font-size:18px;font-weight:900}.game-area{position:relative;display:grid;grid-template-columns:minmax(300px,1fr) minmax(340px,1.08fr) minmax(170px,.55fr);gap:clamp(20px,3.5vw,54px);min-height:535px;padding:28px clamp(26px,6vw,78px) 24px;isolation:isolate;background:linear-gradient(180deg,#fffdf6,#f6fffb)}.line-layer{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.line-layer path{fill:none;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 3px 2px rgba(18,61,119,.1))}.line-layer path.preview{stroke-dasharray:10 10;opacity:.55}.bones-column,.jobs-column{position:relative;z-index:3;display:grid;align-content:center;gap:12px}.match-card{position:relative;display:flex;align-items:center;border-radius:20px;box-shadow:0 6px 0 rgba(18,61,119,.07)}.bone-card{min-height:83px;gap:15px;padding:10px 48px 10px 14px}.bone-card img{width:70px;height:64px;object-fit:contain;mix-blend-mode:multiply}.bone-card strong,.job-card strong{font-size:20px}.bone-card.pink{background:#ffe4e6;border:2px solid #ffa1ad}.bone-card.orange{background:#ffebd4;border:2px solid #ffc07b}.bone-card.green{background:#dff8e9;border:2px solid #9bdfbd}.bone-card.yellow{background:#fff4cc;border:2px solid #f4d776}.job-card{min-height:83px;padding:13px 48px 13px 55px;border:2px solid var(--line);background:#e3f5ff;text-align:center}.job-card strong{width:100%;font-size:19px;line-height:1.05}.connect-dot{--dot:var(--mint);position:absolute;z-index:5;top:50%;width:20px;height:20px;padding:0;transform:translateY(-50%);border:4px solid #fff;border-radius:50%;background:var(--dot);box-shadow:0 0 0 4px var(--dot);color:transparent}.source-dot{right:-11px}.target-dot{left:-11px;--dot:#2990d5}.bone-card.pink .source-dot{--dot:var(--pink)}.bone-card.orange .source-dot{--dot:var(--orange)}.bone-card.green .source-dot{--dot:var(--green)}.bone-card.yellow .source-dot{--dot:var(--yellow)}.connect-dot.is-selected{transform:translateY(-50%) scale(1.16);filter:saturate(1.25)}.match-card.is-linked{transform:translateY(-2px);box-shadow:0 7px 0 rgba(18,61,119,.1)}.match-card.is-correct{animation:correct-pop .45s ease both}.match-card.is-wrong{animation:wrong-shake .4s ease both}.coach-panel{position:relative;z-index:3;display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:flex-end}.speech{position:relative;z-index:2;max-width:165px;padding:17px 14px;border:3px solid #74d9ac;border-radius:40% 45% 42% 46%;background:#d8f9e4;font:800 23px/1.05 'Baloo 2',cursive;text-align:center;transform:rotate(-4deg)}.speech:after{position:absolute;bottom:-15px;left:35%;width:24px;height:25px;background:#d8f9e4;clip-path:polygon(0 0,100% 0,20% 100%);content:''}.match-boy{width:190px;max-height:310px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 8px 5px rgba(37,92,89,.14));animation:boy-float 3.2s ease-in-out infinite}.game-actions{display:flex;justify-content:center;gap:14px;padding:21px;background:#f4fffc;border-top:2px solid #dcf0ea}.match-action{min-width:180px;min-height:48px;padding:0 20px;border-radius:16px;font-size:16px;font-weight:900}.check{border:0;color:#fff;background:var(--mint);box-shadow:0 5px 0 var(--mint-dark)}.reset{border:2px solid #b8e1fa;color:var(--ink);background:#dff4ff;box-shadow:0 5px 0 rgba(36,115,189,.12)}.game-actions .is-disabled{opacity:.55;pointer-events:none}@keyframes boy-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}@keyframes correct-pop{50%{transform:scale(1.03)}100%{transform:scale(1)}}@keyframes wrong-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}100%{transform:translateX(0)}}@media(max-width:920px){.game-area{grid-template-columns:minmax(260px,1fr) minmax(300px,1.1fr);padding-inline:30px}.coach-panel{grid-column:1/-1;flex-direction:row;justify-content:center;gap:15px}.match-boy{width:130px;max-height:190px}.speech{max-width:150px}.game-area{min-height:600px}}@media(max-width:640px){.match-shell{width:min(calc(100% - 16px),650px);margin:8px auto;border-width:5px;border-radius:22px}.match-topbar{height:64px;padding-inline:18px}.match-hero{padding:17px 15px 13px}.match-hero h1{font-size:34px}.match-hero>p:last-child{font-size:15px}.game-area{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:530px;padding:18px 12px 8px}.bones-column,.jobs-column{gap:10px}.bone-card,.job-card{min-height:78px;border-radius:16px}.bone-card{gap:5px;padding:7px 24px 7px 6px}.bone-card img{width:48px;height:50px}.bone-card strong,.job-card strong{font-size:14px}.job-card{padding:8px 22px 8px 29px}.connect-dot{width:16px;height:16px;border-width:3px;box-shadow:0 0 0 3px var(--dot)}.source-dot{right:-9px}.target-dot{left:-9px}.coach-panel{grid-column:1/-1;min-height:170px;flex-direction:row;align-items:flex-end;gap:8px}.speech{max-width:135px;padding:13px 10px;font-size:19px}.match-boy{width:140px;max-height:200px}.game-actions{padding:18px 12px;gap:9px}.match-action{min-width:0;width:50%;padding-inline:8px;font-size:14px}}@media(prefers-reduced-motion:reduce){.match-boy{animation:none}}
/* Game state helpers */
.connect-dot{touch-action:none}
.line-layer path.correct{stroke:#36c894;stroke-width:8}
.line-layer path.wrong{stroke:#ff5267;stroke-dasharray:12 11}
.match-card.is-correct{outline:3px solid rgba(54,200,148,.45)}
.match-card.is-wrong{outline:3px solid rgba(255,82,103,.35)}

/* Emoji bone illustrations */
.bone-emoji{display:grid;place-items:center;flex:0 0 70px;width:70px;height:64px;border-radius:18px;background:rgba(255,255,255,.7);font-size:42px;line-height:1;filter:saturate(1.05)}
@media(max-width:640px){.bone-emoji{flex-basis:48px;width:48px;height:50px;border-radius:14px;font-size:28px}}