:root{color-scheme:light;font-family:Arial,Tahoma,sans-serif;background:#102b29;color:white;--teal:#26a69a;--bar:#00897b}
*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:pointer;border:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid #fff;outline-offset:3px}button:disabled{cursor:default}button:active:not(:disabled){filter:brightness(.92);transform:translateY(1px)}[hidden]{display:none!important}
.phone{position:relative;isolation:isolate;max-width:500px;margin:auto;background:var(--teal);height:100vh;height:100dvh;min-height:530px;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}
.topbar{height:clamp(40px,10vw,55px);display:flex;align-items:stretch;background:var(--bar);gap:5px;box-shadow:0 2px 4px #00554d44;padding-right:5px;position:relative;z-index:1}
.raised{border-radius:4px;box-shadow:0 3px 2px #0003;font-size:clamp(18px,5vw,25px)}.menu{background:none;width:52px;padding:10px 16px;display:flex;flex-direction:column;justify-content:center;gap:4px}.menu span{height:3px;width:21px;background:#fff}.top-spacer{flex:1}.level{background:#4caf50;padding:0 18px;white-space:nowrap}.money{background:#e040fb;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 15px}.coin{display:inline-flex;justify-content:center;align-items:center;color:#ffca28;border:3px solid currentColor;border-radius:50%;font-family:Arial,sans-serif;font-weight:bold;font-size:23px;line-height:1;width:28px;height:28px}
.play-area{height:calc(100% - clamp(40px,10vw,55px));display:flex;flex-direction:column;align-items:stretch}.space{min-height:8px}.space-top,.space-middle{flex:1}.space-bottom{flex:2;min-height:14px}.picture-wrap{position:relative;margin:0 8px;flex-shrink:0;height:clamp(270px,75vw,350px)}#puzzle{width:100%;height:100%;object-fit:fill;display:block}#image-error{position:absolute;inset:0;background:#00695c;align-content:center;text-align:center}
.answer-panel{flex-shrink:0}.slots{display:flex;justify-content:center;gap:5px;min-height:49px}.slot{width:clamp(30px,8.33vw,50px);height:46px;background:none;border-bottom:3px solid #795548;border-radius:0;font-size:clamp(20px,5.55vw,25px);font-weight:bold;padding:0 0 8px;color:white}.slots.wrong .slot{animation:wrong 600ms steps(1,end) 3;color:#f44336}.slots.correct .slot{color:#1b09e2}.helpers{display:flex;gap:5px;padding:8px}.helpers button{flex:1;height:40px;font-size:clamp(18px,5vw,25px)}.friend{background:#9c27b0}.solve{background:#2196f3}.hint{background:#4caf50}.letters{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:10px 8px 0}.letter{height:42px;min-width:0;background:#ef6c00;font-weight:bold;font-size:clamp(18px,5vw,25px);padding:0;border-radius:4px;box-shadow:0 3px 2px #0003}.letter.used{visibility:hidden}
.success{text-align:center;min-height:212px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.solved-word{font-size:35px;font-weight:bold;color:#df29bd}.reward{display:flex;align-items:center;justify-content:center;gap:7px;min-width:100px;border-radius:20px;background:#1b5e20;padding:3px 9px;font-size:17px}.reward .coin{width:23px;height:23px;font-size:18px;border-width:2px}.next{background:#ff5722;padding:20px;margin-top:7px;font-size:20px;font-weight:bold;min-width:96px}
dialog{color:white;border:0;box-shadow:0 8px 28px #0005}dialog::backdrop{background:#0008}.drawer{position:fixed;inset:0 auto 0 max(0px,calc((100vw - 500px)/2));margin:0;width:min(75vw,375px);height:100dvh;max-height:100dvh;max-width:none;padding:0;background:#055353;overflow:hidden}.drawer[open]{display:flex;flex-direction:column;animation:drawer-in 220ms ease-out}.drawer-header{flex-shrink:0;height:20%;min-height:110px;text-align:center;padding:20px 8px 10px;position:relative}.drawer-header p:first-of-type{font-size:20px;margin:10px 0 20px}.drawer-header p:last-child{font-size:16px}.close{position:absolute;left:7px;top:3px;background:none;color:white;font-size:28px;width:32px;height:32px}.stage-list{overflow:auto;flex:1;overscroll-behavior:contain;direction:ltr}.stage-card{display:flex;align-items:center;background:rgba(8,188,188,.8);border-bottom:5px solid #013838;min-height:180px}.stage-card img{width:66.666%;height:200px;object-fit:cover;filter:grayscale(1)}.stage-card div{flex:1;text-align:center;color:#330786a0;font-size:16px;font-weight:bold;direction:rtl}.stage-card p{margin:15px 4px}.stage-card.current div{color:white}.stage-card.current{outline:2px solid #5de6cf;outline-offset:-2px}
.modal{background:#52ccce;max-width:calc(100vw - 38px);width:330px;border-radius:4px;padding:32px 22px 22px;text-align:center;direction:rtl}.modal h2{font-size:21px;margin:6px 0 16px;color:#264d4e}.modal p{line-height:1.7;color:#214e4f}.modal-actions{border-top:3px solid #177c75;padding-top:15px;display:flex;justify-content:center;gap:10px;margin-top:15px}.modal-actions button{background:#2196f3;border-radius:4px;padding:9px 17px;box-shadow:0 2px 3px #0003;font-size:18px}.modal-actions .secondary{background:#00897b}.toast{position:absolute;bottom:14px;left:8px;right:8px;padding:14px;text-align:center;background:#ff5252;color:#151515;z-index:5;border-radius:3px;box-shadow:0 4px 12px #0003}.toast.hint-toast{font-size:29px;background:#69f0ae;direction:rtl;white-space:pre-wrap}.toast.info{background:#69f0ae;font-size:17px}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}.confetti i{position:absolute;width:7px;height:12px;left:50%;top:25%;background:var(--color);animation:burst 3s ease-out forwards;animation-delay:var(--delay)}
@keyframes wrong{0%,100%{color:#f44336}50%{color:white}}@keyframes drawer-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes burst{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@media(max-height:640px){.picture-wrap{height:min(47vh,270px)}.space{min-height:5px}.letter{height:38px}.helpers button{height:36px}.letters{padding-top:5px}.success{min-height:180px}.space-bottom{min-height:8px}}
@media(min-width:600px){.phone{box-shadow:0 0 60px #0005}.letter{height:48px}.helpers button{height:44px}}
@media(prefers-reduced-motion:reduce){.confetti i{display:none}.drawer[open]{animation:none}.slots.wrong .slot{animation:none}}