.swap-topline{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}.swap-topline strong{display:block;margin-top:8px;font:700 12px/1.3 'Space Mono',monospace;color:var(--ink-soft)}.swap-stats{display:flex;gap:8px;flex-wrap:wrap}.swap-stats span,.swap-result-stats span{padding:8px 10px;border:1px solid var(--line-soft);border-radius:9px;background:#fff;font-size:13px}.swap-stats b{margin-left:3px}.swap-instruction{max-width:650px;margin:18px auto 10px;text-align:center;color:var(--ink-soft);font-size:14px;line-height:1.5}.swap-board{position:relative;display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));grid-template-rows:repeat(5,minmax(44px,1fr));gap:7px;max-width:510px;margin:20px auto}.swap-connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.swap-connector{stroke:#7694a7;stroke-width:.08;stroke-linecap:round;opacity:.58}.swap-connector.is-complete{stroke:#0d7477;stroke-width:.13;opacity:1}.swap-connector.is-flash{animation:swap-path-flash .5s ease both}.swap-cell{z-index:1;grid-column:calc(var(--col) + 1);grid-row:calc(var(--row) + 1);display:grid;place-items:center;min-height:56px;padding:0;border:2px solid #9aa7bd;border-radius:14px;background:#f7f9fc;color:#192744;cursor:pointer;box-shadow:0 3px 0 rgba(25,39,68,.13);font:800 clamp(21px,5vw,34px)/1 'Bricolage Grotesque',sans-serif;transition:transform .16s ease,box-shadow .16s ease,background .22s ease,border-color .22s ease}.swap-cell:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(25,39,68,.14)}.swap-cell:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(25,39,68,.14)}.swap-cell i{margin-top:3px;font:700 11px/1 'Space Mono',monospace;font-style:normal}.swap-cell[data-state=locked]{border-color:#0d7477;background:#dff3ef;color:#064f59;box-shadow:0 3px 0 #a9d7ce}.swap-cell[data-state=connected]{border-color:#be8017;background:#fff0c8;color:#76500b}.swap-cell[data-state=open]{border-color:#405575;background:#eaf0f8;color:#1a3455}.swap-cell.is-selected{outline:4px solid #f2b844;outline-offset:3px;transform:translateY(-4px) scale(1.04);box-shadow:0 7px 0 rgba(190,128,23,.28)}.swap-cell.is-exchanging{animation:swap-exchange .16s ease-in-out}.swap-cell.is-snap{animation:swap-snap .28s cubic-bezier(.18,.89,.32,1.25)}.swap-cell:focus-visible,.swap-result button:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px}.swap-status{min-height:24px;margin:0;text-align:center;font-weight:700}.swap-result{margin:24px auto 0;max-width:620px;text-align:center;animation:swap-complete .45s ease both}.swap-result h2{font-size:clamp(28px,6vw,42px)}.swap-result ul{margin:12px auto;text-align:left;max-width:480px;line-height:1.65}.swap-word-groups{margin:12px auto;max-width:520px;text-align:left}.swap-word-groups div{padding:10px 12px;border:1px solid var(--line-soft);border-radius:9px;background:#fff;margin-top:7px}.swap-word-groups dt{font:800 12px/1.2 'Space Mono',monospace;color:#0d7477}.swap-word-groups dd{margin:5px 0 0;line-height:1.5}.swap-result-stats{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}@keyframes swap-exchange{50%{transform:translateY(-8px) rotate(2deg)}}@keyframes swap-snap{0%{transform:scale(.9)}65%{transform:scale(1.09)}100%{transform:scale(1)}}@keyframes swap-complete{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}@keyframes swap-path-flash{0%{stroke:#f2b844;stroke-width:.28;opacity:1}100%{stroke:#0d7477;stroke-width:.13;opacity:1}}@media(prefers-reduced-motion:reduce){.swap-cell,.swap-result,.swap-connector{transition:none!important;animation:none!important}}@media(max-width:600px){.swap-board{gap:5px;width:min(100%,355px)}.swap-cell{min-height:52px;border-radius:11px}.swap-topline{display:block;text-align:center}.swap-stats{justify-content:center;margin-top:12px}.swap-instruction{font-size:13px}.swap-result ul{font-size:14px}}
.swap-difficulties{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:18px 0 6px}.swap-difficulties button{min-height:44px;padding:9px 14px;border:1px solid var(--line-soft);border-radius:999px;background:#fff;color:var(--ink);font:700 14px/1 inherit;cursor:pointer}.swap-difficulties button.is-current{border-color:#0d7477;background:#0d7477;color:#fff}.swap-difficulties button:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px}
.games-hero:has(img[src$="word-swap.webp"]){--game-accent:#0d7477;--game-soft:#fff3ce;--game-glow:rgba(13,116,119,.24)}.swap-challenge{margin:18px 0 20px;padding:18px;border:1px solid var(--accent-edge);border-radius:18px;background:linear-gradient(135deg,#fff8e5,#f3fbf9);text-align:center}.swap-challenge h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(24px,4vw,32px)}.swap-challenge>p{margin:6px 0 0;color:var(--ink-soft);font-size:14px}.swap-challenge .swap-difficulties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 0}.swap-challenge .swap-difficulty-card{min-height:104px;padding:16px 14px;border:2px solid #d8b76d;border-radius:16px;background:#fffdf7;color:var(--ink);text-align:left;box-shadow:0 5px 0 rgba(190,128,23,.16);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}.swap-challenge .swap-difficulty-card:hover{transform:translateY(-2px);border-color:#d4931e;box-shadow:0 7px 0 rgba(190,128,23,.2)}.swap-challenge .swap-difficulty-card strong{font-size:19px}.swap-challenge .swap-difficulty-card span{margin-top:7px;font-size:13px;line-height:1.4}.swap-challenge .swap-difficulty-card[aria-pressed="true"]{border-color:#0d7477;background:#e2f5f1;color:#064f59;box-shadow:0 0 0 3px rgba(13,116,119,.17),0 5px 0 #a9d7ce}.swap-challenge .swap-difficulty-card[aria-pressed="true"] span{color:#185f65}@media(max-width:600px){.swap-challenge{padding:16px 12px}.swap-challenge .swap-difficulties{grid-template-columns:1fr;gap:9px}.swap-challenge .swap-difficulty-card{min-height:74px;padding:12px 14px;text-align:center}}@media(prefers-reduced-motion:reduce){.swap-difficulty-card{transition:none!important}}
.swap-next-action{margin:20px auto 14px;padding:16px 18px;max-width:540px;border:1px solid #a9d7ce;border-radius:14px;background:#f0faf7;text-align:left}.swap-next-action h3{margin:0 0 5px;color:#064f59}.swap-next-action p{margin:0;color:var(--ink-soft);line-height:1.55}@media(max-width:600px){.swap-next-action{padding:14px;text-align:center}}