:root{--ink:#10243a;--ink-soft:#3a536b;--foam:#f3f7f4;--mist:#ffffffb8;--sea:#1f7a6c;--sea-deep:#145a50;--sun:#d97706;--sun-soft:#d977062e;--match:#1a7a4c;--match-bg:#1a7a4c24;--miss:#b42318;--miss-bg:#b423181f;--line:#10243a1f;--shadow:0 18px 40px #10243a1f;--radius:18px;--font-display:"Bricolage Grotesque", Georgia, serif;--font-body:"Manrope", system-ui, sans-serif;color:var(--ink);font-family:var(--font-body);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#0b1c2c}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0}button{font:inherit}ul{margin:0;padding:0;list-style:none}h1,h2,p{margin:0}.app{isolation:isolate;min-height:100svh;padding:clamp(1.25rem,4vw,2.75rem);position:relative;overflow:hidden}.app__atmosphere{z-index:-1;background:radial-gradient(80% 55% at 12% 8%,#38bda859,#0000 55%),radial-gradient(70% 50% at 88% 12%,#d9770638,#0000 50%),radial-gradient(60% 45% at 50% 100%,#1f7a6c47,#0000 55%),linear-gradient(160deg,#0b1c2c 0%,#143447 42%,#0f2a38 100%);position:absolute;inset:0}.app__atmosphere:after{content:"";opacity:.35;background-image:linear-gradient(#ffffff08 1px,#0000 1px),linear-gradient(90deg,#ffffff08 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#000 35%,#0000 85%);mask-image:radial-gradient(circle,#000 35%,#0000 85%)}.hero{text-align:center;max-width:42rem;margin:0 auto 1.75rem;animation:.7s cubic-bezier(.22,1,.36,1) both rise-in}.brand{font-family:var(--font-display);letter-spacing:-.04em;color:var(--foam);text-shadow:0 10px 40px #00000040;font-size:clamp(2.75rem,8vw,4.5rem);font-weight:700;line-height:.95}.hero__title{font-family:var(--font-display);letter-spacing:-.02em;color:#f3f7f4e0;margin-top:.85rem;font-size:clamp(1.15rem,3vw,1.45rem);font-weight:500}.hero__lede{color:#f3f7f4ad;margin-top:.65rem;font-size:1rem;line-height:1.55}.panel{border-radius:calc(var(--radius) + 8px);width:min(720px,100%);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:linear-gradient(#ffffff24,#ffffff14);border:1px solid #ffffff24;margin:0 auto;padding:clamp(1rem,3vw,1.5rem);animation:.8s cubic-bezier(.22,1,.36,1) 80ms both rise-in}.panel__meta{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.mode-toggle{background:#10243a47;border:1px solid #f3f7f424;border-radius:999px;gap:.4rem;margin-top:1.1rem;padding:.25rem;display:inline-flex}.mode-toggle__btn{appearance:none;letter-spacing:.06em;text-transform:uppercase;color:#f3f7f4b8;cursor:pointer;background:0 0;border:none;border-radius:999px;padding:.45rem .85rem;font-size:.72rem;font-weight:700;transition:background-color .18s,color .18s}.mode-toggle__btn:hover{color:var(--foam)}.mode-toggle__btn.is-active{color:var(--foam);background:#f3f7f429}.mode-toggle__btn:focus-visible{outline:2px solid var(--sun);outline-offset:2px}.level-filter{margin-top:1.15rem;animation:.75s cubic-bezier(.22,1,.36,1) 40ms both rise-in}.level-filter__label{letter-spacing:.1em;text-transform:uppercase;color:#f3f7f494;margin:0 0 .45rem;font-size:.72rem;font-weight:700}.level-toggle{background:#10243a47;border:1px solid #f3f7f424;border-radius:999px;flex-wrap:wrap;justify-content:center;gap:.35rem;padding:.25rem;display:inline-flex}.level-toggle__btn{appearance:none;letter-spacing:.06em;text-transform:uppercase;color:#f3f7f4b8;cursor:pointer;background:0 0;border:none;border-radius:999px;min-width:2.5rem;padding:.42rem .7rem;font-size:.72rem;font-weight:700;transition:background-color .18s,color .18s,transform .16s}.level-toggle__btn:hover{color:var(--foam)}.level-toggle__btn.is-active{color:var(--foam);background:#38bda847;transform:translateY(-1px)}.level-toggle__btn:focus-visible{outline:2px solid var(--sun);outline-offset:2px}.level-filter__hint{color:#f3f7f485;margin:.5rem 0 0;font-size:.8rem}.empty-levels{text-align:center;color:#f3f7f4bf;margin:0;line-height:1.5}.mode-chip{letter-spacing:.08em;text-transform:uppercase;color:var(--foam);opacity:.8;font-size:.75rem;font-weight:700}.progress{color:#f3f7f4d1;font-size:.9rem;font-weight:600}.match-board{grid-template-columns:1fr 1fr;gap:clamp(.75rem,3vw,1.5rem);display:grid}.match-column__title{font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:#f3f7f4b3;text-align:center;margin-bottom:.65rem;font-size:.95rem;font-weight:600}.match-column__list{flex-direction:column;gap:.65rem;display:flex}.word-card{border-radius:var(--radius);background:var(--mist);width:100%;min-height:3.4rem;color:var(--ink);cursor:pointer;border:1.5px solid #0000;justify-content:center;align-items:center;padding:.85rem 1rem;transition:transform .18s,background-color .18s,border-color .18s,box-shadow .18s;animation:.52s cubic-bezier(.22,1,.36,1) both card-in;display:flex;position:relative}.match-column__list li:first-child .word-card{animation-delay:.12s}.match-column__list li:nth-child(2) .word-card{animation-delay:.18s}.match-column__list li:nth-child(3) .word-card{animation-delay:.24s}.match-column__list li:nth-child(4) .word-card{animation-delay:.3s}.match-column__list li:nth-child(5) .word-card{animation-delay:.36s}.word-card:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 24px #10243a29}.word-card:focus-visible{outline:2px solid var(--sun);outline-offset:3px}.word-card.selected{border-color:var(--sun);box-shadow:0 0 0 4px var(--sun-soft);background:#fff8eb;transform:scale(1.02)}.word-card.matched{background:var(--match-bg);color:var(--match);cursor:default;border-color:#0000;animation:.42s cubic-bezier(.22,1,.36,1) match-pop}.word-card.mismatched{border-color:var(--miss);background:var(--miss-bg);animation:.42s shake}.word-card__label{letter-spacing:-.01em;text-align:center;text-transform:capitalize;font-size:clamp(.95rem,2.5vw,1.1rem);font-weight:650}.word-card--long{align-items:flex-start;min-height:4.25rem;padding:.75rem 1.75rem .75rem .85rem}.word-card--long .word-card__label{text-transform:none;text-align:left;font-size:clamp(.78rem,2.1vw,.92rem);font-weight:600;line-height:1.35}.word-card__check{font-size:.95rem;font-weight:700;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.panel__actions{flex-direction:column;align-items:center;gap:.75rem;min-height:3.5rem;margin-top:1.25rem;display:flex}.btn{appearance:none;letter-spacing:.01em;cursor:pointer;border:none;border-radius:999px;padding:.85rem 1.6rem;font-weight:700;transition:transform .16s,background-color .16s}.btn--primary{background:linear-gradient(180deg, #2a9b88, var(--sea-deep));color:var(--foam);animation:.42s both rise-in;box-shadow:0 12px 28px #145a5059}.btn--primary:hover{background:linear-gradient(180deg, #34ad98, var(--sea));transform:translateY(-1px)}.btn--primary:focus-visible{outline:2px solid var(--foam);outline-offset:3px}.done-banner{text-align:center;color:#f3f7f4e6;flex-direction:column;align-items:center;gap:.85rem;animation:.42s both rise-in;display:flex}.done-banner p{font-size:1rem;font-weight:600}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes card-in{0%{opacity:0;transform:translateY(10px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes match-pop{0%{transform:scale(1)}45%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}@media (width<=540px){.app{padding:1rem .85rem 1.5rem}.brand{font-size:clamp(2.4rem,12vw,3.2rem)}.match-board{gap:.6rem}.word-card{min-height:3.1rem;padding:.7rem .55rem}.word-card--long{min-height:3.75rem;padding:.65rem .55rem}.word-card__label{font-size:.88rem}.word-card--long .word-card__label{font-size:.78rem}.word-card__check{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}