/* baseline reset (auto-injected) */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
ul, ol { list-style: none; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.background,.game,.game-final-screen,.modal{position:absolute;inset:0}
:root{--color-primary:#046A38;--color-accent:#FDC452;--color-bg:#0B3D2E;--color-surface:#FFFFFF;--color-text:#FFFFFF;--color-text-muted:#D8D8D8;--radius-md:1.2rem;--radius-lg:2rem;--space-sm:0.8rem;--space-md:1.6rem;--space-lg:2.8rem;--shadow-soft:0 1.2rem 3rem rgba(0,0,0,0.35)}

html,body{width:100%;height:100%;background:var(--color-bg);color:var(--color-text);font-family:'Segoe UI',system-ui,sans-serif;overflow:hidden}

.background{background:radial-gradient(circle at 50% 20%, #0f5a3f 0%, var(--color-bg) 70%);z-index:0;overflow:hidden;pointer-events:none}
.background__left,.background__right{position:absolute;bottom:0;width:45%;pointer-events:none}
.background__left{left:0}
.background__right{right:0}
.background__left__top,.background__right__top{position:absolute;top:2rem}
.background__left__bottom,.background__right__bottom{position:absolute;bottom:0;display:flex;gap:0.5rem}
.background__left__top{left:0}
.background__right__top{right:0}
.background__left__bottom{left:0}
.background__right__bottom{right:0}
.background__cloud{max-width:14rem;filter:hue-rotate(-10deg) saturate(1.3);opacity:0.9}
.background__stars{position:absolute;inset:0;pointer-events:none}
.background__star{position:absolute;width:2.4rem;filter:drop-shadow(0 0 6px rgba(253,196,82,0.6));animation:twinkle 2.6s ease-in-out infinite}
.background__star-1{top:8%;left:12%}
.background__star-2{top:15%;right:15%;animation-delay:0.3s}
.background__star-3{top:35%;left:6%;animation-delay:0.6s}
.background__star-4{top:60%;right:8%;animation-delay:0.9s}
.background__star-5{top:75%;left:20%;animation-delay:1.2s}
.background__star-6{top:20%;left:45%;animation-delay:1.5s}

@keyframes twinkle{0%,100%{opacity:0.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}

.game{align-items:center;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;padding:var(--space-lg);position:relative;width:100%;z-index:1;transition:filter .4s ease;text-align:center}

@media screen and (orientation:landscape) and (max-height:550px){.game{flex-direction:row;gap:var(--space-lg)}}

.game__header{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);max-width:36rem}
.game__header__badge{width:5.6rem;height:5.6rem;pointer-events:none;user-select:none;filter:drop-shadow(0 0.4rem 1rem rgba(0,0,0,0.4))}
.game__header__h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;text-transform:uppercase;color:var(--color-accent);text-wrap:balance}
.game__header__h3{font-size:clamp(1.4rem,3vw,1.8rem);color:var(--color-text-muted);font-weight:600}
.game__header__text{color:#fff;text-transform:initial}

.game__main{position:relative;flex:1;display:flex;align-items:center;justify-content:center;width:100%;max-width:32rem}
.game__main__image{transform:rotate(0);transition:transform 1s;max-height:22rem;max-width:100%;user-select:none;filter:drop-shadow(0 1.2rem 2rem rgba(0,0,0,0.5))}
.game__main__image-rotate-1{transform:rotate(8deg)}
.game__main__image-rotate-2{transform:rotate(-8deg)}
.game__main__image-hand{bottom:5.5rem;height:8rem;position:absolute;right:4rem;width:8rem;pointer-events:none;user-select:none}
.game__main__image-hand-animation-pulse{animation:pulseHand 1.2s ease-in-out infinite}
@keyframes pulseHand{0%,100%{transform:scale(1);opacity:0.9}50%{transform:scale(1.15);opacity:1}}
.game__main__bonus-container{height:100%;left:0;position:absolute;top:0;width:100%;z-index:1;pointer-events:none}
.game__main__bonus-value{animation:fadeOut 3s forwards;color:var(--color-accent);font-size:2.4rem;font-weight:800;opacity:1;position:absolute;text-shadow:0 0.2rem 0.6rem rgba(0,0,0,0.5)}
@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-3rem)}}

.game__footer{width:100%;max-width:32rem}
.game__progress{align-items:center;background-color:rgba(0,0,0,0.35);border:2px solid var(--color-accent);border-radius:1.6rem;color:#fff;display:flex;height:5.6rem;justify-content:center;overflow:hidden;position:relative;width:100%}
.game__progress__bar{bottom:0;background-color:var(--color-accent);left:0;position:absolute;top:0;transition:width 1s linear;width:0;z-index:0}
.game__progress__text{position:relative;z-index:1;font-weight:700;font-size:1.4rem}

.game-final-screen{align-items:center;background:linear-gradient(to bottom,var(--color-accent),#fff4d9);bottom:0;cursor:pointer;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;padding:var(--space-lg);position:absolute;right:0;top:0;width:100%;z-index:2;overflow:hidden;gap:var(--space-md);text-align:center}

@media screen and (orientation:landscape) and (max-height:550px){.game-final-screen{flex-direction:row}}

.game-final-screen .game__header{max-width:35.7rem}
.game-final-screen .game__header__h1{color:var(--color-primary)}
.game-final-screen .game__header__h3{color:rgba(11,61,46,0.7)}
.game-final-screen .game__header__text{color:rgba(11,61,46,0.85)}
.game-final-screen .game__main__image{transform:scale(1.35)}

.game__button{background:var(--color-primary);border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-soft);color:#fff;cursor:pointer;font-size:clamp(1.4rem,3vw,1.8rem);font-weight:800;min-height:5.6rem;padding:1.2rem 2.4rem;text-transform:uppercase;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.game__button:hover{transform:translateY(-2px);box-shadow:0 1.6rem 3.4rem rgba(0,0,0,0.4)}
.game__button:active{transform:translateY(0);background-color:#03502a}
.game__button:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}

.blur{filter:blur(8px)}
.hidden{display:none}
.visible{animation:makeVisible 1s ease forwards;display:flex;opacity:0}
@keyframes makeVisible{0%{opacity:0}100%{opacity:1}}

.modal{align-items:center;background:rgba(4,25,18,0.55);display:flex;height:100%;justify-content:center;padding:1.6rem;position:absolute;width:100%;z-index:3}
.modal__window{background:var(--color-surface);border-radius:var(--radius-lg);border:4px solid var(--color-accent);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);max-width:36rem;width:100%;padding:2.4rem 2rem;text-align:center;color:var(--color-primary)}
.modal__window__badge{width:6rem;height:6rem;pointer-events:none;user-select:none}
.modal__window__ribbon{background:var(--color-primary);color:#fff;font-weight:700;font-size:1.2rem;text-transform:uppercase;padding:0.4rem 1.2rem;border-radius:999px;letter-spacing:0.03em}
.modal__window__title{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800;color:var(--color-primary)}
.modal__window__text{font-size:clamp(1.2rem,2.6vw,1.5rem);color:#333;line-height:1.5}
.modal__window__button{background-color:var(--color-primary);border-radius:0.8rem;color:#fff;display:block;font-size:clamp(1.6rem,3.5vw,2.2rem);font-weight:800;line-height:3.2rem;padding:1rem 1.6rem;text-transform:uppercase;text-decoration:none;min-height:5.2rem;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;box-shadow:var(--shadow-soft)}
.modal__window__button:hover{transform:translateY(-2px);background-color:#03502a}
.modal__window__button:active{transform:translateY(0)}
.modal__window__button:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px}

html[dir=rtl] .background__cloud{transform:scaleX(-1)}

@media (max-width:600px){.modal__window{padding:2rem 1.4rem}.game__main__image{max-height:16rem}.game__header__badge{width:4.4rem;height:4.4rem}}

@media (min-width:1024px){.game__header__h1{font-size:3.2rem}.modal__window{max-width:42rem}}

@media (prefers-reduced-motion:reduce){.background__star,.game__main__image-hand-animation-pulse,.game__main__bonus-value,.modal__window__button,.game__button{animation:none;transition:none}}

html,
body {
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}
