/* Layout revision: artwork and all gameplay behavior retained. */
:root{color:#243d42;background:#e9dfcd;font-family:'Trebuchet MS',ui-rounded,system-ui,sans-serif}
.app{max-width:none;box-shadow:none}.screen{min-height:100svh}
.home-screen{padding:clamp(24px,5vw,76px);display:flex;align-items:center;background:#f2e8d4 url('assets/start-workshop.png') center/cover no-repeat;isolation:isolate}
.home-screen:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#fff9e9e8 0%,#fff9e9c9 36%,#fff9e926 70%,transparent);z-index:-1}
.hero-illustration{display:none}.hero-card{width:min(650px,62%);padding:clamp(22px,3.5vw,48px);border:1px solid #ffffffb3;border-radius:30px;background:#fffaf0e8;box-shadow:0 18px 60px #624c2920;backdrop-filter:blur(7px);text-align:left}
.eyebrow{color:#68776a;font-size:.73rem;letter-spacing:.17em}h1{font-size:clamp(2rem,4.4vw,4.3rem);letter-spacing:-.055em;line-height:1.04;margin:17px 0 20px;overflow-wrap:anywhere;color:#244b4c}
.hero-card>p:first-of-type{font-size:clamp(1rem,1.5vw,1.16rem);max-width:35ch;color:#52635e;line-height:1.55}.modes{grid-template-columns:1fr;gap:14px;margin:28px 0 24px}
.mode{position:relative;display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:5px;justify-items:start;text-align:left;padding:20px;border:1px solid #b5c6b8;border-radius:18px;background:#eaf0df;color:#294841;box-shadow:0 4px 0 #b1c2ae;transition:transform .12s,box-shadow .12s}.mode:nth-child(2){background:#fff0ce;border-color:#dfc18b;box-shadow:0 4px 0 #ddc18e}.mode-icon{grid-row:1/3;align-self:center;display:grid;place-items:center;width:45px;height:45px;background:#fff9;border-radius:14px;font-size:1.55rem}.mode strong{font-size:clamp(1.05rem,1.7vw,1.4rem)}.mode small{font-size:.93rem;color:#56645b}.mode:hover{transform:translateY(-2px);box-shadow:0 6px 0 #b1c2ae}.mode:active{transform:translateY(3px);box-shadow:0 1px 0 #b1c2ae}.note{font-size:.8rem;line-height:1.5;color:#677264;margin:8px 0}.hero-card .note:last-child{border-top:1px solid #d7dfcf;padding-top:14px}
.game-screen{height:100svh;min-height:560px;max-width:1100px;margin:auto;gap:clamp(8px,1.6vh,16px);padding:clamp(12px,2vw,26px);background:linear-gradient(#f7eddbd9,#f7eddbed),url('assets/workshop.png') center/cover}.game-top{flex:none;padding:8px 12px;border:1px solid #d6c4a4;border-radius:18px;background:#fffaf0ed}.small-button{width:46px;height:44px;border-width:1px;border-color:#d5bc92;background:#fff9ed;border-radius:12px}.top-tag{color:#566659;font-size:clamp(.8rem,1.6vw,1.08rem)}.clock{color:#254d4c;min-width:66px}.play-panel{flex:1;min-height:0;padding:clamp(12px,2vh,24px);gap:8px;border:2px solid #dfc39a;border-radius:25px;background:#fffcf5f5;box-shadow:0 5px 0 #d9c6a64d}.play-panel h2{flex:none;font-size:clamp(1.1rem,2.5vw,1.8rem);color:#314d48}.picture{min-height:0;max-height:none;width:min(100%,580px);border:1px dashed #d5c7ad;border-radius:20px;background:#fffdf8;flex:1}.picture #wordEmoji{font-size:clamp(5rem,min(24vw,27vh),11rem)}.picture img{min-height:0;max-height:100%;max-width:100%;width:100%;height:100%;object-fit:contain;padding:10px}.soundmark{background:#eef0e4;border:1px solid #d9dfcb;border-radius:50%;height:34px;width:34px;display:grid;place-items:center;right:10px;bottom:10px;font-size:.85rem;opacity:1;color:#4d6861}.feedback{flex:none;min-height:24px;height:auto;line-height:1.25;font-size:clamp(.85rem,1.6vw,1.1rem);margin-top:2px}.letter-row{flex:none;gap:clamp(7px,1.3vw,15px);padding:0 0 7px;width:min(100%,780px);align-self:center}.letter-tile{height:clamp(62px,11vh,96px);border:2px solid #bf9765;border-radius:16px;background:linear-gradient(#fffaf0,#f4dfb9);box-shadow:inset 0 2px 0 #fff,0 5px 0 #ae8557;font-size:clamp(2rem,5vh,3.3rem);color:#2c4d4c}.letter-tile:active{transform:translateY(4px);box-shadow:0 1px 0 #ae8557}.game-bottom{flex:none;min-height:42px;padding:6px 12px;border-radius:12px;font-size:.9rem;background:#fffaf0d9}.text-button{min-height:36px;padding:4px 8px;color:#536958}.result-card{border-width:2px;border-color:#d9bb86;box-shadow:0 14px 50px #654e2626}.stat{border-width:1px}.primary,.secondary{border-width:1px}.toast{font-size:.9rem}
@media(min-width:1500px){.hero-card{margin-left:5vw}}
@media(max-width:760px){.home-screen{padding:24px;align-items:flex-end;min-height:100svh;background-position:100% center}.home-screen:before{background:linear-gradient(0deg,#fff6e8ed 0%,#fff6e88a 65%,transparent)}.hero-card{width:min(100%,560px);margin:0 auto;padding:26px;background:#fffaf0ed}.home-screen h1{font-size:clamp(2rem,6.4vw,3rem)}.hero-card>p:first-of-type{font-size:1rem}.modes{margin:20px 0;gap:12px}.mode{padding:15px}.game-screen{min-height:480px}.feedback{font-size:.88rem}.game-top{padding:6px 9px}}
@media(max-width:420px){.home-screen{padding:16px}.hero-card{padding:23px 19px;border-radius:24px}.hero-card h1{font-size:2rem}.mode{grid-template-columns:38px 1fr;column-gap:10px}.mode-icon{width:36px;height:38px;font-size:1.3rem}.mode small{font-size:.84rem}.mode strong{font-size:1.05rem}.game-screen{padding:10px;gap:9px}.letter-tile{border-radius:12px}.play-panel{padding:12px 10px}.game-bottom{font-size:.83rem}}
@media(max-height:600px) and (min-width:761px){.home-screen{padding:20px}.hero-card{padding:23px;width:min(650px,65%)}h1{font-size:2.5rem;margin:10px 0}.hero-card>p:first-of-type{margin:10px 0;font-size:.95rem}.modes{grid-template-columns:1fr 1fr;margin:16px 0}.mode{display:flex;flex-direction:column;align-items:flex-start;padding:13px;gap:7px}.mode-icon{display:none}.mode strong{font-size:1.02rem}.mode small{font-size:.8rem}.note{font-size:.72rem}.game-screen{min-height:360px;gap:6px;padding:8px}.game-top{padding:4px 10px}.small-button{height:36px;width:42px}.play-panel{padding:8px;gap:4px}.play-panel h2{font-size:1.1rem}.picture #wordEmoji{font-size:4.5rem}.letter-tile{height:52px;font-size:2rem}.game-bottom{min-height:32px;padding:0 10px}.feedback{min-height:20px;font-size:.85rem}}
@media(prefers-reduced-motion:reduce){button{transition:none!important}}