:root{--color-background:#fff8e7;--color-surface:#fff;--color-text:#243047;--color-muted:#5c6680;--color-primary:#2563eb;--color-primary-dark:#1d4ed8;--color-secondary:#f97316;--color-success:#15803d;--color-retry:#b45309;--color-ring:#facc15;--shadow-soft:0 14px 32px #24304724;--radius:18px;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem}*{box-sizing:border-box}html,body{min-height:100%}body{background:radial-gradient(circle at top left, #facc1552, transparent 28rem), radial-gradient(circle at bottom right, #2563eb2e, transparent 24rem), var(--color-background);color:var(--color-text);margin:0;font-family:Arial Rounded MT Bold,Nunito,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.65}button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid var(--color-ring);outline-offset:3px}.app-shell{justify-content:center;align-items:center;min-height:100svh;padding:clamp(.5rem,1.6vw,1.25rem);display:flex}.game-panel{gap:clamp(.75rem,1.8vw,1.25rem);width:min(100%,76rem);display:grid}.welcome-panel,.activity-panel{border-radius:var(--radius);box-shadow:var(--shadow-soft);background:#ffffffe6;border:3px solid #2563eb2e;padding:clamp(.9rem,2vw,1.4rem)}.welcome-panel{gap:var(--space-lg);text-align:center;display:grid}.title{color:var(--color-primary);letter-spacing:0;margin:0;font-size:clamp(2.5rem,10vw,5rem);line-height:1}.subtitle,.prompt,.greeting{color:var(--color-muted);margin:0;font-size:clamp(1.2rem,4vw,1.75rem);line-height:1.25}.greeting{color:var(--color-primary);font-weight:800}.name-form{gap:var(--space-md);display:grid}.name-label{color:var(--color-text);font-size:1.15rem;font-weight:800}.name-input{background:var(--color-surface);width:100%;min-height:3.5rem;color:var(--color-text);text-align:center;border:3px solid #2563eb4d;border-radius:14px;padding:.75rem 1rem;font-size:clamp(1.2rem,4vw,1.5rem)}.syllable-menu-panel{text-align:center}.syllable-mode-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:clamp(.9rem,2.4vw,1.4rem);display:grid}.syllable-mode-card{place-items:center;gap:var(--space-sm);border-radius:var(--radius);color:#fff;border:4px solid #0000;min-height:clamp(10rem,26vw,15rem);padding:clamp(.8rem,2vw,1.25rem);text-decoration:none;transition:transform .14s,box-shadow .14s;display:grid;box-shadow:0 12px 26px #24304729}.syllable-mode-card:hover{transform:translateY(-2px);box-shadow:0 16px 30px #24304733}.syllable-mode-card--two{background:var(--color-primary)}.syllable-mode-card--three{background:var(--color-secondary)}.syllable-mode-card img{aspect-ratio:1;object-fit:contain;background:#ffffffdb;border-radius:16px;width:min(54%,8rem);padding:.45rem}.syllable-mode-card span{font-size:clamp(1.35rem,5vw,2.1rem);font-weight:900;line-height:1.05}.change-name-button{color:var(--color-muted);opacity:.86;text-underline-offset:.18rem;background:0 0;border:0;justify-self:center;padding:.25rem .45rem;font-size:clamp(.85rem,2.2vw,.98rem);font-weight:800;text-decoration:underline}.change-name-button:hover{opacity:1;color:var(--color-primary)}.activity-panel{gap:clamp(.85rem,1.6vw,1.2rem);display:grid}.activity-header{gap:var(--space-xs);text-align:center;display:grid}.back-link{color:var(--color-primary);background:#fff;border:3px solid #2563eb47;border-radius:50%;justify-content:center;justify-self:start;align-items:center;gap:.35rem;min-width:3rem;min-height:3rem;padding:.35rem;font-size:clamp(.95rem,2.5vw,1.1rem);font-weight:900;line-height:1;text-decoration:none;display:inline-flex}.back-link__icon{font-size:1.75rem;line-height:1}.action-row{gap:var(--space-sm);flex-wrap:wrap;justify-content:center;display:flex}.action-row .app-button{flex:10rem;max-width:16rem}.illustration-card{aspect-ratio:1;border-radius:var(--radius);background:#fff;border:3px solid #2563eb2e;justify-self:center;place-items:center;width:min(100%,14rem);margin:0;padding:.75rem;display:grid;box-shadow:0 10px 22px #2430471a}.illustration-card img{object-fit:contain;width:100%;height:100%;display:block}.illustration-card figcaption{color:var(--color-primary);font-size:2rem;font-weight:900}.app-button{white-space:normal;border:3px solid #0000;border-radius:14px;min-height:3.1rem;padding:.55rem 1rem;font-size:clamp(.95rem,2.4vw,1.2rem);font-weight:900;line-height:1.1;transition:transform .14s,background-color .14s,border-color .14s}.app-button:hover:not(:disabled){transform:translateY(-1px)}.app-button--primary{background:var(--color-primary);color:#fff}.app-button--secondary{background:var(--color-secondary);color:#fff}.app-button--outline{border-color:var(--color-primary);color:var(--color-primary);background:#fff}.syllable-grid{border-radius:var(--radius);background:#ffffff80;flex-wrap:wrap;place-content:center;gap:clamp(.7rem,1.6vw,1rem);padding:clamp(.35rem,1vw,.75rem);display:flex}.syllable-chip{min-width:clamp(5.4rem,11vw,7.4rem);min-height:clamp(4.2rem,8vw,5.4rem);color:var(--color-text);background:#fff;border:4px solid #24304738;border-radius:16px;font-size:clamp(1.7rem,4.8vw,2.6rem);font-weight:900;line-height:1;box-shadow:0 8px 18px #2430471f}.syllable-chip--selected{border-color:var(--color-primary);background:#dbeafe}.syllable-chip--revealed{border-color:var(--color-secondary);background:#fef3c7}.syllable-chip--correct{border-color:var(--color-success);background:#dcfce7}.message{color:var(--color-text);text-align:center;background:#dbeafe;border-radius:14px;gap:.2rem;padding:.7rem 1rem;display:grid}.message--success{background:#dcfce7}.message--retry{background:#ffedd5}.message strong{color:var(--color-primary);font-size:clamp(1rem,2.4vw,1.35rem)}.message--success strong{color:var(--color-success)}.message--retry strong{color:var(--color-retry)}.message p{margin:0;font-size:clamp(.95rem,2vw,1.1rem);line-height:1.35}.completed-word{color:var(--color-success);text-align:center;margin:0;font-size:clamp(2rem,8vw,4rem);font-weight:900;line-height:1}.success-overlay{z-index:10;background:#2430478f;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.success-modal{gap:var(--space-md);border-radius:calc(var(--radius) + 4px);text-align:center;background:#fff;border:4px solid #facc15cc;width:min(100%,28rem);padding:clamp(1.5rem,5vw,2.25rem);display:grid;box-shadow:0 20px 48px #2430474d}.success-modal h2,.success-modal p{margin:0}.success-modal h2{color:var(--color-success);font-size:clamp(2rem,8vw,3rem)}.success-modal p{color:var(--color-muted);font-size:clamp(1.05rem,3.8vw,1.35rem)}.success-modal .app-button{width:100%}@media (min-width:768px){.activity-panel{grid-template-columns:minmax(11rem,15rem) minmax(28rem,1fr);align-items:center}.activity-header,.completed-word{grid-column:1/-1}.message{grid-column:1}.illustration-card{grid-area:2/1}.action-row{grid-area:3/1;align-self:center}.syllable-grid{grid-area:2/2/span 3;justify-content:center;align-self:center}}@media (max-width:420px){.app-shell{align-items:stretch;padding:.75rem}.welcome-panel,.activity-panel{padding:.75rem}.action-row{grid-template-columns:1fr;display:grid}.action-row .app-button{max-width:none}.syllable-chip{min-width:4.8rem;min-height:3.8rem}.success-modal{padding:1.25rem}}@media (min-width:1024px){.activity-panel{grid-template-columns:minmax(12rem,16rem) minmax(42rem,1fr);gap:.65rem 1.15rem}.illustration-card{width:min(100%,15rem)}.syllable-grid{gap:.9rem}}