@font-face{font-family:H;src:url(../fonts/caveat.woff2);font-weight:400 700}
body{font-family:H,cursive;color:#2b2f38;background-color:#fbfaf4;background-image:linear-gradient(#cfdcf0 1px,transparent 1px),linear-gradient(90deg,#cfdcf0 1px,transparent 1px);background-size:22px 22px}
#app{border-left:2px solid #e88a8a;background:transparent}
h1{font-size:46px;font-weight:700;transform:rotate(-2deg)}.mhr{font-size:24px;color:#2a4fb0}
.stats div{border:2px solid #2b2f38;border-radius:50% 45% 50% 40%/40% 50% 45% 50%;background:#fff8}.stats b{font-size:28px}.stats small{font-size:15px;text-transform:none}
select,.chip{font-size:22px;background:#fff8;border:2px solid #2b2f38;border-radius:12px 18px 10px 16px;color:inherit}
.stage{background:#fffdf6cc;border:2px solid #2b2f38;border-radius:18px 8px 22px 10px;transform:rotate(-.4deg);box-shadow:3px 4px 0 #2b2f3833}
.p{opacity:0;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset .8s,opacity .1s}.p.on{opacity:1;stroke-dashoffset:0}
.cl{font-size:20px;color:#c0392b}.word i{font-size:44px;font-weight:700;height:56px;border-bottom:2.5px solid #2b2f38;border-radius:0 0 40% 30%/0 0 6px 4px}.word i.rv{color:#2a4fb0}.word i.miss{color:#c0392b}
.hintb{font-size:22px;background:#fff3a0;border:0;transform:rotate(1.5deg);box-shadow:2px 2px 0 #0002}.lives span{background:#2a4fb0;border-radius:40% 60%}.lives span.off{background:none;border:2px solid #c0392b;border-radius:0;transform:rotate(45deg)}
.hint{font-size:24px;color:#2a4fb0}
.kb button{font-size:28px;font-weight:700;background:#fffdf6;border:2px solid #2b2f38;border-radius:14px 10px 16px 8px;color:#2b2f38}.kb button:nth-child(odd){transform:rotate(-1deg)}.kb button.sp{color:#2a4fb0}
.kb button.ok{background:#d6f0c9;text-decoration:underline wavy #3a8a3a}.kb button.no{color:#bbb;text-decoration:line-through 3px #c0392b}
.ad{border:2px dashed #9ab;font-size:20px;color:#89a}.brand{font-size:18px}
.modal{background:#2b2f3866}.card{background:#fffdf6;border:2px solid #2b2f38;border-radius:20px 8px 24px 10px;transform:rotate(-1deg);background-image:linear-gradient(#cfdcf0 1px,transparent 1px);background-size:100% 26px}
.mt{font-size:36px;font-weight:700}.win .mt{color:#3a8a3a}.lose .mt{color:#c0392b}.mw{font-size:54px;font-weight:700;color:#2a4fb0}.mr,.ms{font-size:22px}.big{font-size:26px;font-weight:700;background:#2a4fb0;color:#fff;border-radius:14px 8px 16px 10px}
/* polish */
.hintb{color:#2b2f38;font-weight:700;padding:6px 16px;background:#fff3a0;border:2px solid #2b2f38;border-radius:10px 14px 8px 12px}
.hintb:disabled{opacity:1;background:#fffbe0;color:#6b6f78;border-style:dashed}
.hint{font-weight:700}
.ad{background:#fffdf6aa;border:2px dashed #2b2f38;border-radius:16px 8px 18px 10px;color:#6b6f78;transform:rotate(.3deg);position:relative}
.ad::before{content:"✎ здесь будет реклама";font-size:20px}.ad{font-size:0}
.card{padding:22px 24px 24px 40px;box-shadow:4px 5px 0 #2b2f3833;border-left:2px solid #2b2f38;background-image:linear-gradient(90deg,transparent 28px,#e88a8a 28px,#e88a8a 30px,transparent 30px),linear-gradient(#cfdcf0 1px,transparent 1px);background-size:100% 100%,100% 26px;position:relative}
.card::before{content:"";position:absolute;top:-14px;left:50%;width:110px;height:28px;margin-left:-55px;background:#f5e7a8cc;transform:rotate(-3deg);box-shadow:0 1px 2px #0002}
.win .mt::after{content:" ✓";}.lose .mt::after{content:" ✗"}
.mw{display:inline-block;padding:0 10px;border-bottom:3px solid #2a4fb0}.win .mw{border:3px solid #3a8a3a;border-radius:50% 45% 55% 40%/55% 45% 50% 45%;padding:0 18px;color:#2b2f38}
.lose .mw{color:#c0392b}.mr{color:#2b2f38}.big{box-shadow:2px 3px 0 #2b2f38}
/* fit-one-screen */
html,body{height:100%;overflow:hidden}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:max(6px,env(safe-area-inset-top)) 10px max(6px,env(safe-area-inset-bottom));gap:clamp(4px,1vh,10px)}
.hbar{flex:none}h1{font-size:clamp(26px,5vh,46px);line-height:1}.mhr{font-size:clamp(16px,2.6vh,24px);line-height:1.1}
.stats div{padding:2px 8px;min-width:50px}.stats b{font-size:clamp(18px,3vh,28px);line-height:1}.stats small{font-size:13px}
.bar{flex:none;margin:0}select,.chip{font-size:clamp(17px,2.6vh,22px);padding:clamp(3px,.8vh,10px) 10px}
.stage{flex:1 1 auto;min-height:0;padding:clamp(4px,1vh,14px);gap:clamp(2px,.6vh,10px);justify-content:center;overflow:hidden}
#gal{flex:1 1 auto;min-height:40px;height:100%;width:auto;max-width:100%;max-height:30vh}
.info{flex:none}.cl{font-size:clamp(15px,2.2vh,20px)}.word{margin:clamp(2px,.8vh,12px) 0}
.word i{height:clamp(32px,6vh,56px);width:clamp(26px,4.4vh,40px);font-size:clamp(28px,5.2vh,44px)}
.hintb{font-size:clamp(17px,2.6vh,22px);padding:clamp(1px,.4vh,6px) 14px}.hint{min-height:0;margin-top:clamp(2px,.6vh,10px);font-size:clamp(18px,2.8vh,24px);line-height:1.1}
.kb{flex:none;margin:0;gap:clamp(3px,.7vh,7px)}.kb button{height:clamp(38px,6.2vh,54px);font-size:clamp(22px,3.6vh,28px);padding:0}
.ad{flex:none;margin:0;min-height:0;height:56px}.brand{display:none}
@media(max-height:760px){.ad{display:none}}
@media(min-width:700px){.stage{flex-direction:row}#gal{max-height:100%;height:auto;width:38%}.info{flex:1}}
@media(max-height:520px) and (orientation:landscape){.mhr,.stats small{display:none}.bar{display:none}.kb{grid-template-columns:repeat(12,1fr)}.kb button{height:clamp(30px,8.5vh,44px)}#gal{max-height:100%}.stage{flex-direction:row}}
@media(min-width:700px){#gal{width:auto;max-width:300px;height:100%}.stage{justify-content:space-around}}
@media(max-height:520px) and (orientation:landscape){.word i{width:clamp(22px,6vh,34px)}#gal{max-width:240px}}
/* visual-viewport fit */
html,body{height:var(--app-h,100%);overflow:hidden;overscroll-behavior:none}
#app{position:fixed;left:0;right:0;top:0;height:var(--app-h,100dvh);max-width:720px;margin:0 auto}
@media(max-height:620px){h1{font-size:24px}.mhr{display:none}.stats small{display:none}}
/* no-overflow + share */
.card{max-width:min(360px,calc(100vw - 28px));overflow:hidden}
.mw{max-width:100%;white-space:nowrap;box-sizing:border-box;line-height:1.15}.win .mw{padding:0 12px}
.mr,.hint,.cl,h1,.mt{overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.mr{line-height:1.15}
select{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.word{flex-wrap:nowrap;max-width:100%}
.word i{width:var(--tw,36px);height:calc(var(--tw,36px)*1.35);font-size:calc(var(--tw,36px)*1.1);flex:none}
.share{font:inherit;font-size:20px;font-weight:700;margin-top:10px;background:none;border:2px dashed #2a4fb0;color:#2a4fb0;border-radius:12px 8px 14px 10px;padding:6px 14px;cursor:pointer;width:100%}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;background:#2b2f38;color:#fff;font-family:H,cursive;font-size:22px;padding:8px 18px;border-radius:12px;transition:.25s;z-index:99;pointer-events:none}#toast.on{opacity:1;transform:translate(-50%,0)}
.bar .chip{flex:none}
.stats .snd{align-self:center;font-size:20px;padding:4px 8px;min-width:0;border-radius:50%;line-height:1}
/* make-your-word sheet */
.mkc{text-align:left;position:relative}.mkc .mt{text-align:center;margin-bottom:6px}
.mkc label{display:block;font-size:20px;margin:8px 0 2px}.mkc input{display:block;width:100%;font:inherit;font-size:22px;padding:6px 10px;border:2px solid #2b2f38;border-radius:10px 14px 8px 12px;background:#fff;color:#2a4fb0;box-sizing:border-box}
#mkW{text-transform:lowercase;font-size:28px;font-weight:700}
.xrow{display:flex;gap:8px;margin:10px 0 4px}.xl{font:inherit;font-size:26px;font-weight:700;flex:1;height:44px;border:2px solid #2b2f38;border-radius:12px 8px 14px 10px;background:#fffdf6;color:#2a4fb0;cursor:pointer}
.mke{min-height:22px;color:#c0392b;font-size:18px;line-height:1.1}.mkx{position:absolute;right:8px;top:4px;font:inherit;font-size:30px;background:none;border:0;cursor:pointer;color:#2b2f38}
.mkl{margin-top:8px;font-size:14px!important;color:#6b6f78!important;border-style:dashed!important}.mkl{display:none}.mkl.on{display:block}
#mk{z-index:50}
html.app .ad{display:none!important}
/* fi: 21 буква — 3 ряда по 7 */
.kb{grid-template-columns:repeat(7,1fr)}.kb button{height:clamp(40px,7vh,58px)}
@media(min-width:700px){.kb{grid-template-columns:repeat(11,1fr)}}
@media(max-height:520px) and (orientation:landscape){.kb{grid-template-columns:repeat(11,1fr)}.kb button{height:clamp(30px,9vh,46px)}}
.mhr{font-style:italic;letter-spacing:.5px}
.lic{display:block;margin-top:8px;font-family:system-ui,sans-serif;font-size:10px;line-height:1.2;color:#6b6f78;text-decoration:none}

.alll{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-style:normal;font-size:12px;letter-spacing:0;color:#6b6f78;text-decoration:none;white-space:nowrap;vertical-align:2px;margin-left:2px}.alll:hover{color:#2a4fb0;text-decoration:underline}html.app .alll{display:none}