:root {
  --kid-coral:#ff746f;
  --kid-mint:#7cddb5;
  --kid-sky:#63c9ef;
  --kid-lilac:#a987ef;
  --kid-sun:#ffd85d;
  --kid-ink:#173b43;
  --kid-cream:#fff9ed;
}

/* Friendly entry layer: the expert scenes keep their darker industrial identity. */
.circular-button { display:grid; grid-template-columns:auto auto; gap:0 6px; align-items:center; padding:7px 11px; border:1px solid rgba(255,216,93,.7); border-radius:999px; color:#fff; background:linear-gradient(135deg,rgba(255,116,111,.22),rgba(169,135,239,.2)); cursor:pointer; }
.circular-button>span { grid-row:1/3; color:var(--kid-sun); font-size:18px; filter:drop-shadow(0 0 7px rgba(255,216,93,.6)); }.circular-button b { font-size:10px; }.circular-button small { color:#ffd8ef; font-size:8px; }

.title-screen { padding-bottom:115px; background-image:url("assets/meguru-circular-club.webp"); background-position:center; }
.title-screen::before { background:linear-gradient(90deg,rgba(8,39,45,.96) 0%,rgba(8,39,45,.86) 31%,rgba(8,39,45,.27) 56%,rgba(8,39,45,.04) 100%); }
.title-screen::after { opacity:.07; background:radial-gradient(circle at 86% 20%,#fff 0 2px,transparent 3px),radial-gradient(circle at 72% 38%,#ffd85d 0 3px,transparent 4px); background-size:95px 95px,130px 130px; animation:kidTwinkle 5s ease-in-out infinite alternate; }
@keyframes kidTwinkle { to { opacity:.23; transform:translateY(-5px); } }
.title-copy { width:48%; max-width:690px; padding:clamp(34px,7vh,82px) clamp(20px,2.8vw,42px) 30px; border:1px solid rgba(255,255,255,.13); border-radius:30px; background:linear-gradient(145deg,rgba(5,32,38,.78),rgba(5,25,30,.49)); box-shadow:0 24px 70px rgba(5,26,32,.3); backdrop-filter:blur(9px); }
.title-copy::before { top:12%; bottom:12%; border-radius:9px; background:linear-gradient(var(--kid-coral),var(--kid-sun),var(--kid-mint),var(--kid-sky),var(--kid-lilac)); box-shadow:none; }
.title-screen h1 { font-size:clamp(48px,5.4vw,82px); text-shadow:0 4px 20px rgba(0,0,0,.34); animation:none; }.title-screen h1 em { color:#fff3a7; text-shadow:0 0 25px rgba(255,216,93,.4); }
.family-kicker { width:max-content; max-width:100%; margin:-7px 0 12px; padding:7px 12px 7px 7px; border-radius:999px; color:#fff; background:linear-gradient(90deg,rgba(255,116,111,.78),rgba(169,135,239,.72)); font-size:11px; font-weight:900; }.family-kicker span { margin-right:7px; padding:3px 6px; border-radius:999px; color:var(--kid-ink); background:var(--kid-sun); font-size:8px; }
.title-lead { margin-bottom:14px; color:#daf6ef; }
.title-screen .love-preview,.title-screen .crew-preview,.title-screen .hype-tags { display:none; }
.title-first-move { margin:0 0 13px; padding:12px 14px; border:1px solid rgba(255,216,93,.6); border-radius:19px; color:#effffb; background:linear-gradient(120deg,rgba(255,216,93,.15),rgba(99,201,239,.11)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.title-first-move>div { display:flex; align-items:center; gap:9px; margin-bottom:8px; }.title-first-move>div small { padding:4px 7px; border-radius:999px; color:#173b43; background:var(--kid-sun); font-size:8px; font-weight:1000; letter-spacing:.08em; }.title-first-move>div b { font-size:13px; }
.title-first-move ol { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:0; padding:0; list-style:none; }.title-first-move li { display:grid; grid-template-columns:24px 1fr; align-items:center; gap:6px; min-height:42px; padding:6px 8px; border-radius:13px; background:rgba(255,255,255,.1); }.title-first-move li span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#173b43; background:#fff3a7; font-size:11px; font-weight:1000; }.title-first-move li b { font-size:10px; line-height:1.35; }.title-first-move p { margin:8px 0 0; color:#bfe8e2; font-size:10px; }
.love-preview { border-radius:15px; background:rgba(5,40,44,.66); }.hype-tags { margin-bottom:16px; }.hype-tags span { border:0; border-radius:999px; color:#153d43; background:#e5fff8; font-size:8px; }.hype-tags span:nth-child(2){background:#ffe8f6}.hype-tags span:nth-child(3){background:#fff3b8}.hype-tags span:nth-child(4){background:#e7ddff}
.microcopy a { color:#fff3a7; text-decoration-color:rgba(255,243,167,.5); }
.title-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }.title-actions .primary-button { border:0; border-radius:999px; color:#173b43; background:linear-gradient(90deg,var(--kid-sun),#fff19b); box-shadow:6px 7px 0 rgba(99,201,239,.55),0 0 30px rgba(255,216,93,.2); text-transform:none; }.title-how-to { padding:11px 14px; border:2px solid rgba(255,243,167,.75); border-radius:999px; color:#fff9cf; background:rgba(255,255,255,.08); font-weight:900; cursor:pointer; }.title-how-to:hover { background:rgba(255,243,167,.16); }.expert-start { width:100%; padding:5px 0; border:0; color:#b9dcd7; background:transparent; text-align:left; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }.expert-start:hover { color:#fff; background:transparent; }.microcopy { color:#b9dcd7; }
.mode-preview { border-color:rgba(255,216,93,.5); background:rgba(6,33,38,.92); }.mode-preview span { color:var(--kid-sun); }

/* Sorting mission */
.sort-screen { position:relative; min-height:100vh; padding:105px clamp(18px,4vw,62px) 42px; overflow:hidden; color:var(--kid-ink); background:radial-gradient(circle at 8% 10%,rgba(255,216,93,.36),transparent 22%),radial-gradient(circle at 92% 8%,rgba(169,135,239,.25),transparent 24%),linear-gradient(145deg,#f4fffb,#fff5f8 50%,#f3f0ff); }
.sort-screen::before { content:""; position:absolute; inset:76px 0 auto; height:330px; opacity:.13; background-image:url("assets/meguru-circular-club.webp"); background-size:cover; background-position:center 38%; mask-image:linear-gradient(#000,transparent); pointer-events:none; }
.sort-sparkles i { position:absolute; z-index:0; width:12px; height:12px; border-radius:4px; background:var(--kid-sun); animation:sortFloat 4s ease-in-out infinite alternate; transform:rotate(45deg); }.sort-sparkles i:nth-child(1){left:4%;top:27%}.sort-sparkles i:nth-child(2){left:18%;top:82%;animation-delay:-1s;background:var(--kid-sky)}.sort-sparkles i:nth-child(3){right:6%;top:36%;animation-delay:-2s;background:var(--kid-coral)}.sort-sparkles i:nth-child(4){right:22%;top:88%;animation-delay:-3s;background:var(--kid-lilac)}.sort-sparkles i:nth-child(5){left:49%;top:14%;animation-delay:-.5s;background:var(--kid-mint)}
@keyframes sortFloat { to { transform:translateY(-14px) rotate(135deg) scale(.7); opacity:.45; } }
.sort-heading-row,.sort-stage,.sort-complete,.sort-note { position:relative; z-index:1; max-width:1450px; margin-inline:auto; }
.sort-heading-row { display:flex; justify-content:space-between; align-items:end; gap:22px; margin-bottom:18px; }.sort-heading-copy { max-width:820px; }.sort-heading-row .eyebrow { margin-bottom:8px; color:#297d8f; }.sort-heading-row h2 { margin-bottom:6px; font-size:clamp(30px,4vw,58px); letter-spacing:-.05em; }.sort-heading-row h2 em { color:#e45773; font-style:normal; }.sort-heading-row p { margin:0; color:#55777b; }.sort-score-card { display:flex; align-items:baseline; gap:7px; padding:14px 20px; border:2px solid #fff; border-radius:22px; background:linear-gradient(135deg,#fff,#fff7cc); box-shadow:0 14px 35px rgba(56,95,100,.13); }.sort-score-card small { align-self:start; color:#8c748d; font-size:8px; font-weight:900; }.sort-score-card strong { color:#e45773; font-size:38px; }.sort-score-card span { color:#55777b; }
.sort-stage { display:grid; grid-template-columns:250px minmax(360px,1fr) 360px; gap:16px; }
.friend-deck,.sorting-console,.sort-bins { border:2px solid #fff; border-radius:28px; box-shadow:0 22px 55px rgba(48,89,95,.13); }
.friend-deck { padding:18px; background:linear-gradient(170deg,#e6fff5,#fff); }.friend-intro small { color:#2ca27a; font-weight:900; letter-spacing:.12em; }.friend-intro b { display:block; margin:4px 0; font-size:20px; }.friend-intro p { color:#658481; font-size:11px; line-height:1.5; }
.friend-list { display:grid; gap:9px; }.friend-list article { display:grid; grid-template-columns:54px 1fr; align-items:center; min-height:65px; padding:7px 9px; border-radius:18px; background:#fff; }.friend-list article::before { grid-row:1/3; display:grid; place-items:center; width:46px; height:46px; border-radius:45% 55% 52% 48%; font-size:23px; box-shadow:inset 0 0 0 3px rgba(255,255,255,.7); }.friend-list span { color:#2f6667; font-size:10px; }.friend-list b { font-size:11px; }.friend-bottle::before { content:"💧"; background:#a8e7ff; }.friend-leaf::before { content:"🌱"; background:#bded9b; }.friend-energy::before { content:"⚡"; background:#ffe979; }
.friend-album { margin-top:16px; padding-top:12px; border-top:1px dashed #a8cbc3; }.friend-album>small { color:#72918e; font-weight:900; }.friend-album>div { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }.collection-gem { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--kid-coral),var(--kid-lilac)); box-shadow:0 4px 9px rgba(98,76,130,.2); }.collection-gem.is-empty { color:#a9c1bd; background:#e6efed; box-shadow:none; }
.sorting-console { display:flex; flex-direction:column; align-items:center; min-height:500px; padding:18px; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); }.sort-progress { align-self:stretch; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; }.sort-progress>span,.sort-progress>b { color:#5d7d7c; font-size:9px; }.sort-progress>div { height:8px; overflow:hidden; border-radius:99px; background:#e5efed; }.sort-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--kid-coral),var(--kid-sun),var(--kid-mint),var(--kid-sky)); transition:.35s ease; }
.sort-first-coach { align-self:stretch; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:11px; padding:9px 12px; border:2px solid #ffd85d; border-radius:15px; color:#244e52; background:linear-gradient(90deg,#fff8c7,#e8fff7); box-shadow:0 8px 18px rgba(88,122,105,.13); animation:sortCoachPulse 1.25s ease-in-out infinite alternate; }.sort-first-coach[hidden] { display:none!important; }.sort-first-coach span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#173b43; background:#ffd85d; font-size:11px; font-weight:1000; }.sort-first-coach b { font-size:11px; }.sort-first-coach i { color:#e65f7b; font-style:normal; font-weight:1000; }
@keyframes sortCoachPulse { to { box-shadow:0 8px 18px rgba(88,122,105,.13),0 0 0 5px rgba(255,216,93,.18); transform:translateY(1px); } }
.sort-item-card { position:relative; flex:1; width:min(100%,520px); min-height:270px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:16px 0 10px; padding:18px; overflow:hidden; border:2px solid #fff; border-radius:30px; background:linear-gradient(145deg,#f0fffb,#fdf2ff); box-shadow:inset 0 0 35px rgba(99,201,239,.12); transition:.25s ease; }.sort-item-glow { position:absolute; width:190px; height:190px; border-radius:50%; background:radial-gradient(circle,rgba(255,216,93,.46),transparent 68%); animation:itemGlow 2s ease-in-out infinite alternate; }.sort-item-emoji { position:relative; z-index:1; font-size:90px; filter:drop-shadow(0 10px 10px rgba(54,80,84,.13)); transition:.3s ease; }.sort-item-card.is-correct .sort-item-emoji { transform:rotate(-8deg) scale(1.15); }.sort-item-card.is-wrong { animation:itemWrong .3s ease; }.sort-item-card small,.sort-item-card h3,.sort-item-card p { position:relative; z-index:1; }.sort-item-card small { color:#8a7c99; }.sort-item-card h3 { margin:5px 0; font-size:clamp(20px,2vw,30px); }.sort-item-card p { margin:0; color:#688080; font-size:12px; }
@keyframes itemGlow { to { transform:scale(1.2); opacity:.5; } }@keyframes itemWrong { 33%{transform:translateX(-8px)}66%{transform:translateX(8px)} }
.sort-feedback { align-self:stretch; display:grid; grid-template-columns:36px 1fr; gap:10px; align-items:center; min-height:61px; padding:9px 12px; border-radius:16px; color:#476767; background:#eff7f5; }.sort-feedback>span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#fff; background:#8eb7b3; font-weight:900; }.sort-feedback b { font-size:12px; }.sort-feedback p { margin:2px 0 0; font-size:10px; }.sort-feedback.is-correct { color:#176b51; background:#ddfaec; }.sort-feedback.is-correct>span { background:#38b986; }.sort-feedback.is-wrong { color:#954e5e; background:#ffe7ed; }.sort-feedback.is-wrong>span { background:#ef7189; }.sort-next { align-self:flex-end; margin-top:9px; padding:10px 16px; border:0; border-radius:999px; color:#fff; background:linear-gradient(90deg,#2f9eb9,var(--kid-lilac)); font-weight:900; cursor:pointer; }.sort-next:disabled { opacity:.35; cursor:not-allowed; }.sort-next.is-launching,.sort-skip.is-launching { opacity:.82; cursor:progress; pointer-events:none; }
.sort-bins { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px; background:rgba(255,255,255,.72); }.sort-bins.is-coached { border-color:#ffd85d; box-shadow:0 22px 55px rgba(48,89,95,.13),0 0 0 7px rgba(255,216,93,.22); }.sort-bins.is-coached button { box-shadow:inset 0 0 0 3px rgba(255,216,93,.28); }.sort-bins button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:150px; padding:13px; overflow:hidden; border:2px solid color-mix(in srgb,var(--bin) 55%,#fff); border-radius:24px; color:var(--kid-ink); background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--bin) 17%,#fff)); cursor:pointer; transition:.2s ease; }.sort-bins button::after { content:""; position:absolute; inset:auto -25px -40px; height:75px; border-radius:50%; background:var(--bin); opacity:.13; }.sort-bins button:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 12px 22px color-mix(in srgb,var(--bin) 25%,transparent); }.sort-bins button>span { display:grid; place-items:center; width:50px; height:50px; margin-bottom:7px; border-radius:18px; color:#fff; background:var(--bin); font-size:25px; box-shadow:inset 0 0 0 3px rgba(255,255,255,.45); }.sort-bins button b { font-size:14px; }.sort-bins button small { margin-top:3px; color:#718786; font-size:9px; }.sort-bins button.is-answer { box-shadow:0 0 0 4px #fff,0 0 0 8px var(--bin); }.sort-bins button:disabled { cursor:default; }
.sort-complete { margin-top:18px; padding:28px; text-align:center; border:2px solid #fff; border-radius:30px; background:linear-gradient(120deg,#fff7ce,#edfff8 48%,#f4eaff); box-shadow:0 20px 50px rgba(50,90,96,.14); }.sort-complete>div:first-child { color:#e65674; }.sort-complete>div:first-child span { color:#f6b900; font-size:26px; }.sort-complete h3 { margin:8px 0; font-size:clamp(23px,3vw,38px); }.sort-complete p { max-width:720px; margin:0 auto 13px; color:#597778; }.sort-reward { display:inline-flex; gap:9px; align-items:center; margin:4px 0 18px; padding:9px 15px; border-radius:999px; background:#fff; }.sort-reward b { color:#23a47a; }.sort-reward small { color:#829693; }.sort-complete .primary-button { margin:auto; border-radius:999px; color:#173b43; background:linear-gradient(90deg,var(--kid-sun),#fff3a8); }
.sort-note { display:flex; gap:12px; align-items:center; margin-top:14px; padding:12px 16px; border:1px solid rgba(45,120,122,.18); border-radius:16px; color:#5c7777; background:rgba(255,255,255,.55); font-size:10px; }.sort-note b { color:#2a6e70; white-space:nowrap; }.sort-note button { margin-left:auto; padding:7px 10px; border:1px solid #78aaa6; border-radius:999px; color:#2b6c6e; background:#fff; white-space:nowrap; cursor:pointer; }

/* Friendly connective tissue across the expert game */
.family-bridge { position:relative; z-index:2; max-width:1500px; margin:0 auto 12px; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:12px 16px; border:1px solid rgba(255,216,93,.45); border-radius:18px; color:#eafff9; background:linear-gradient(90deg,rgba(255,116,111,.16),rgba(99,201,239,.11),rgba(169,135,239,.14)); }
.bridge-friends { display:flex; }.bridge-friends i { display:grid; place-items:center; width:39px; height:39px; margin-left:-6px; border:2px solid #fff; border-radius:50%; background:#dff9f1; font-style:normal; box-shadow:0 5px 12px rgba(0,0,0,.18); }.bridge-friends i:first-child{margin-left:0}.family-bridge small{color:#ffd85d;font-weight:900;letter-spacing:.1em}.family-bridge b{display:block;margin:2px 0}.family-bridge p{margin:0;color:#a9c5c0;font-size:10px}.family-bridge>span{padding:6px 9px;border-radius:999px;color:#173b43;background:#fff3a7;font-size:9px;font-weight:900}
.circular-bonus { max-width:1500px; margin:0 auto 16px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:3px 16px; padding:12px 15px; border:1px solid rgba(255,216,93,.55); border-radius:16px; color:#e8fff9; background:linear-gradient(90deg,rgba(255,216,93,.12),rgba(124,221,181,.08)); }.circular-bonus>div span{color:#ffd85d}.circular-bonus>div b{margin-left:6px}.circular-bonus strong{grid-row:1/3;grid-column:2;color:#fff3a7}.circular-bonus p{margin:0;color:#91aaa5;font-size:10px}.circular-bonus button{grid-row:1/3;grid-column:3;padding:8px 10px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;background:transparent;cursor:pointer}
.home-mission { max-width:1220px; margin:18px auto; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:17px 20px; border:3px solid #fff; border-radius:26px; color:#173b43; background:linear-gradient(115deg,#e5fff4,#fff6ca 55%,#f3e8ff); box-shadow:0 16px 40px rgba(13,54,57,.18); }.home-mission-mascot{display:grid;place-items:center;width:68px;height:68px;border-radius:45% 55% 53% 47%;background:#b9ec9d;font-size:34px}.home-mission small{color:#33816f;font-weight:900;letter-spacing:.1em}.home-mission h3{margin:3px 0;font-size:21px}.home-mission p{margin:0;color:#587574}.home-mission button{padding:11px 15px;border:0;border-radius:999px;color:#fff;background:linear-gradient(90deg,#e65f7b,#9a73df);font-weight:900;cursor:pointer}.home-mission.is-done{filter:saturate(.8)}.home-mission.is-done button{background:#3aad82}

@media(max-width:1050px){.title-copy{width:58%}.sort-stage{grid-template-columns:210px 1fr}.sort-bins{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}.sort-bins button{min-height:120px}.friend-deck{grid-row:1}.sorting-console{grid-row:1}.circular-bonus{grid-template-columns:1fr auto}.circular-bonus button{grid-row:3;grid-column:1;width:max-content}.home-mission{grid-template-columns:auto 1fr}.home-mission button{grid-column:2;width:max-content}}
@media(max-width:740px){.circular-button{display:none}.title-screen{background-position:66% center}.title-screen::before{background:linear-gradient(180deg,rgba(6,34,39,.92),rgba(6,34,39,.72) 62%,rgba(6,34,39,.28))}.title-copy{width:100%;padding:25px 18px;border-radius:22px}.title-screen h1{font-size:43px}.family-kicker{font-size:9px}.title-first-move ol{grid-template-columns:1fr}.title-first-move li{min-height:34px}.title-actions{align-items:stretch;flex-direction:column}.title-how-to{width:100%}.expert-start{width:max-content}.sort-screen{padding:90px 12px 30px}.sort-heading-row{align-items:start}.sort-score-card{padding:10px}.sort-score-card small{display:none}.sort-score-card strong{font-size:29px}.sort-stage{display:flex;flex-direction:column}.sorting-console{order:1;min-height:460px}.sort-first-coach{flex-wrap:wrap}.sort-first-coach i{transform:rotate(90deg)}.sort-bins{order:2;grid-template-columns:1fr 1fr}.friend-deck{order:3}.friend-list{grid-template-columns:repeat(3,1fr)}.friend-list article{display:block;text-align:center}.friend-list article::before{margin:auto}.friend-list span{display:block;margin-top:4px}.sort-note{align-items:flex-start;flex-wrap:wrap}.sort-note button{margin-left:0}.family-bridge{grid-template-columns:auto 1fr}.family-bridge>span{grid-column:1/-1;width:max-content}.circular-bonus{display:block}.circular-bonus strong,.circular-bonus p,.circular-bonus button{display:block;margin-top:7px}.home-mission{grid-template-columns:1fr;text-align:center}.home-mission-mascot{margin:auto}.home-mission button{grid-column:1;margin:auto}}
@media(max-width:740px){.brand{min-width:44px;min-height:44px;justify-content:center}.brand-mark{width:38px;height:38px}.site-legal-footer summary,.site-legal-about{display:flex;align-items:center;min-height:44px}}
@media(prefers-reduced-motion:reduce){.sort-sparkles i,.sort-item-glow,.title-screen::after,.sort-first-coach,.sort-bins.is-coached button{animation:none!important}}

/* Keep the sorting board cheerful but physically stable. Correct/wrong
   feedback remains animated; perpetual transforms do not run under taps. */
.sort-sparkles i,.sort-item-glow,.sort-first-coach,.title-screen::after { animation:none; }