:root{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#203c55;background:#e6d5b7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.app{min-height:100svh;max-width:1040px;margin:auto;background:#f6e9d1;box-shadow:0 0 40px #6b492d40;position:relative;overflow:hidden}.screen{min-height:100svh;position:relative}.screen[hidden]{display:none!important}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:4px solid #236cb1;outline-offset:3px}.home-screen,.result-screen{display:grid;place-items:center;padding:24px;background:linear-gradient(#f7ead7c9,#efe3cfef),url('assets/celebration.png') center/cover}.hero-illustration,.result-illustration{position:absolute;inset:0;background:url('assets/celebration.png') center 20%/cover;opacity:.48;pointer-events:none}.hero-card,.result-card{position:relative;width:min(100%,610px);padding:clamp(22px,5vw,45px);border:9px solid #e3aa67;border-radius:34px;background:#fff3dbee;box-shadow:0 14px 0 #9a653b4d,0 24px 50px #5c351b4d;text-align:center}.eyebrow{font-size:.78rem;letter-spacing:.2em;color:#987047;font-weight:800}h1{font-size:clamp(2.1rem,5vw,3.8rem);line-height:1.05;margin:12px 0;color:#263e55}h2{font-size:clamp(1.35rem,3.5vw,2.3rem);margin:0;color:#243f57}.hero-card p{line-height:1.4}.modes{display:grid;gap:16px;margin:28px auto 18px}.mode{display:grid;gap:6px;justify-items:center;padding:18px 14px;border:4px solid #a77341;background:linear-gradient(#fff9e9,#f8dca2);color:#263f56;border-radius:22px;box-shadow:0 7px 0 #a77341}.mode:hover{transform:translateY(-2px)}.mode:active{transform:translateY(4px);box-shadow:0 2px 0 #a77341}.mode strong{font-size:1.35rem}.mode small{font-size:.98rem}.mode-icon{font-size:1.5rem}.note{font-size:.87rem;color:#6b6a60}.game-screen{display:flex;flex-direction:column;gap:10px;padding:clamp(12px,2.4vw,25px);background:linear-gradient(90deg,#f0dfbbbd,#f3e5cacc),url('assets/workshop.png') center/cover}.game-top{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff3dded;border:3px solid #dcb37c;padding:10px;border-radius:18px}.top-tag{font-size:clamp(.85rem,2vw,1.2rem);font-weight:800;text-align:center}.small-button{height:48px;width:54px;border:3px solid #c48c55;border-radius:14px;background:#ffedce;font-size:1.6rem;color:#243e56}.clock{font-weight:900;font-size:clamp(1rem,3vw,1.5rem);font-variant-numeric:tabular-nums;min-width:76px;text-align:right}.play-panel{flex:1;min-height:285px;padding:clamp(14px,2vw,22px);border:8px solid #e2a86a;border-radius:32px;background:#fff5e4f5;box-shadow:inset 0 0 0 3px #f9dfb5,0 7px 0 #ad7b4b65;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}.picture{position:relative;flex:1;min-height:185px;max-height:56svh;width:min(100%,630px);border:3px dashed #e0c9a6;border-radius:24px;background:#fffdf7;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .12s}.picture:active{transform:scale(.98)}.picture img{width:100%;height:100%;max-height:48svh;object-fit:contain;padding:8px}.picture #wordEmoji{font-size:clamp(6rem,20vw,12rem);line-height:1}.soundmark{position:absolute;right:13px;bottom:10px;color:#607b87;font-size:1rem;opacity:.65}.feedback{height:2rem;font-size:1.15rem;font-weight:900}.feedback.good{color:#2d7854}.feedback.bad{color:#a95643}.letter-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(5px,1.4vw,14px);padding:4px 0 12px}.letter-tile{height:clamp(68px,13vw,113px);min-width:0;background:linear-gradient(#fff8e9,#f5dca7);border:4px solid #cc9557;border-radius:clamp(12px,2vw,22px);box-shadow:inset 0 3px 0 #fff,0 8px 0 #ab7645;color:#23415a;font-size:clamp(2rem,6vw,4rem);font-weight:900}.letter-tile:active{transform:translateY(5px);box-shadow:0 3px 0 #ab7645}.letter-tile.wrong{background:#f8c4b5;border-color:#c76a56}.letter-tile.correct{background:#c7e9bb;border-color:#6ca16c}.letter-tile:disabled{cursor:default}.game-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff1d8dc;border-radius:12px;padding:9px 14px;font-weight:800}.text-button{border:0;background:transparent;color:#325d77;text-decoration:underline}.result-screen{background:linear-gradient(#fff3dbc0,#f0dfcfcf),url('assets/celebration.png') center/cover}.result-card{max-width:580px}.stars{color:#e5a51e;font-size:2.5rem}.result-card h2{margin:8px 0 20px;font-size:clamp(2rem,4vw,3.4rem)}.stat{padding:13px;margin:12px 0;background:#fffdf4;border:2px solid #e6caa1;border-radius:18px;text-align:left}.stat span{display:block;font-size:.93rem;color:#556a74}.stat strong{font-size:1.9rem}.result-actions{display:grid;gap:12px;margin-top:25px}.primary,.secondary{padding:17px;border-radius:17px;border:3px solid #3979a4;background:#72b4df;color:#123b5b;font-weight:900;font-size:1.1rem}.secondary{background:#a6cf88;border-color:#6d9a4f;color:#234a27}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#263d56;color:white;padding:15px 20px;border-radius:12px;z-index:10;width:max-content;max-width:90%;text-align:center}@media (min-width:850px){.modes{grid-template-columns:1fr 1fr}.home-screen{padding:40px}.play-panel{min-height:340px}}@media (max-height:650px){.game-screen{gap:5px;padding:8px}.play-panel{min-height:190px;gap:6px;padding:8px}.picture{min-height:115px}.picture #wordEmoji{font-size:5rem}.letter-tile{height:61px}.game-bottom{padding:5px 12px}}
