:root {
  --ink: #13241d;
  --green: #2f9b68;
  --green-dark: #0d3d2b;
  --mint: #a8ebc8;
  --cream: #fffaf0;
  --orange: #ff784c;
  --yellow: #ffd362;
  --line: rgba(19, 36, 29, .13);
  --muted: #748078;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font-family: Manrope, Arial, sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.leaf { position: fixed; z-index: -1; width: 360px; height: 180px; border-radius: 100% 0 100% 0; background: rgba(47,155,104,.08); transform: rotate(35deg); }
.leaf-one { right: -120px; top: 120px; }.leaf-two { left: -190px; bottom: 70px; transform: rotate(215deg); }

.play-nav { min-height: 76px; padding: 13px clamp(18px,5vw,70px); display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.play-nav > a, .play-nav > button { border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; background: rgba(255,255,255,.5); font-size: 12px; font-weight: 800; cursor: pointer; }
.game-logo { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.04em; }.game-logo span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; background: var(--green-dark); color: var(--mint); font-size: 24px; }

.game-shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: clamp(42px,7vw,90px) 0 70px; }
.game-screen { display: none; }.game-screen.active { display: block; animation: rise .45s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.setup-screen { grid-template-columns: minmax(280px,.85fr) minmax(560px,1.15fr); gap: clamp(42px,7vw,95px); align-items: start; }
.setup-screen.active { display: grid; }
.setup-copy { position: sticky; top: 110px; padding-top: 30px; }
.game-tag { color: var(--green); text-transform: uppercase; letter-spacing: .15em; font-size: 10px; font-weight: 800; }
.setup-copy h1 { margin: 24px 0; font: 700 clamp(50px,7vw,90px)/.92 Unbounded,sans-serif; letter-spacing: -.08em; }.setup-copy h1 em, .finish-screen h2 em { color: var(--orange); font-style: normal; }
.setup-copy p { max-width: 470px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.croc-face { width: 250px; height: 145px; margin-top: 45px; display: flex; justify-content: center; align-items: flex-start; gap: 58px; position: relative; isolation: isolate; border: 5px solid var(--green-dark); border-radius: 48% 48% 42% 42%; background: var(--green); transform: rotate(-4deg); box-shadow: 19px 20px 0 rgba(47,155,104,.13); animation: croc-bob 3.2s ease-in-out infinite; }
.croc-face:before { content: ""; position: absolute; z-index: -1; left: 18px; right: 18px; top: 42px; height: 67px; border-radius: 50%; background: #43ad78; }
.croc-face i { width: 47px; height: 47px; margin-top: -18px; border: 10px solid var(--green-dark); border-radius: 50%; background: #fff; position: relative; animation: croc-blink 4.2s ease-in-out infinite; }.croc-face i:after { content: ""; width: 10px; height: 10px; position: absolute; left: 8px; top: 8px; border-radius: 50%; background: var(--ink); }
.croc-snout { position: absolute; z-index: 2; left: 50%; top: 42px; width: 170px; height: 55px; border-radius: 48%; background: #51ba83; transform: translateX(-50%); }.croc-snout u { position: absolute; top: 20px; width: 9px; height: 7px; border-radius: 50%; background: var(--green-dark); opacity: .62; }.croc-snout u:first-child { left: 47px; }.croc-snout u:last-child { right: 47px; }
.croc-mouth { position: absolute; z-index: 3; left: 50%; bottom: 13px; width: 154px; height: 48px; overflow: hidden; border: 4px solid var(--green-dark); border-radius: 16px 16px 72px 72px; background: #34202a; transform: translateX(-50%) scaleY(.23); transform-origin: 50% 0; animation: croc-mouth-open 2.8s cubic-bezier(.55,.05,.35,1) infinite; }.croc-mouth:before { content: ""; position: absolute; z-index: 2; left: 9px; right: 9px; top: -1px; height: 17px; background: repeating-linear-gradient(135deg,#fff 0 9px,transparent 9px 19px); clip-path: polygon(0 0,100% 0,94% 100%,86% 18%,76% 100%,66% 18%,56% 100%,46% 18%,36% 100%,26% 18%,16% 100%,6% 18%); }.croc-mouth span { position: absolute; left: 29px; right: 29px; bottom: -5px; height: 23px; border-radius: 50% 50% 0 0; background: #f07b83; }
@keyframes croc-mouth-open { 0%,36%,100% { transform: translateX(-50%) scaleY(.23); } 52%,78% { transform: translateX(-50%) scaleY(1); } }@keyframes croc-bob { 50% { transform: translateY(-5px) rotate(2deg); } }@keyframes croc-blink { 0%,42%,48%,100% { transform: scaleY(1); } 45% { transform: scaleY(.12); } }

.setup-card { padding: clamp(22px,4vw,42px); border: 1px solid var(--line); border-radius: 32px; background: rgba(255,255,255,.83); box-shadow: 0 30px 80px rgba(35,86,62,.11); backdrop-filter: blur(15px); }
.setup-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.setup-row label, .section-title b { display: block; font-weight: 800; }.setup-row small, .section-title small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.stepper { min-width: 160px; padding: 6px; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; border-radius: 999px; background: #f0f5ef; }.stepper button { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; font-size: 23px; box-shadow: 0 4px 15px rgba(13,61,43,.08); }.stepper button:disabled { opacity: .35; cursor: default; }.stepper output { text-align: center; font: 700 22px Unbounded,sans-serif; }
.names-block { margin: 28px 0; }.section-title { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }.player-names { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.name-field { position: relative; }.name-field span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #91a097; font-size: 10px; font-weight: 800; }.name-field input { width: 100%; height: 49px; padding: 0 13px 0 41px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdf9; color: var(--ink); }.name-field input::placeholder { color: #9aa69f; }
fieldset { min-width: 0; margin: 25px 0 0; padding: 0; border: 0; }legend { margin-bottom: 11px; font-size: 12px; font-weight: 800; }.category-options { display: flex; flex-wrap: wrap; gap: 7px; }.category-options label, .option-row label { cursor: pointer; }.category-options input, .option-row input { position: absolute; opacity: 0; pointer-events: none; }.category-options span { display: block; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 11px; font-weight: 700; }.category-options input:checked + span { border-color: var(--green); background: var(--green); color: #fff; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.option-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 5px; border-radius: 14px; background: #eef4ef; }.option-row span { display: grid; min-height: 39px; place-items: center; border-radius: 10px; color: #6e7a72; font-size: 10px; font-weight: 800; text-align: center; }.option-row input:checked + span { background: #fff; color: var(--green-dark); box-shadow: 0 5px 16px rgba(13,61,43,.09); }
.primary-action { width: 100%; min-height: 60px; margin-top: 28px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 17px; background: var(--green-dark); color: #fff; cursor: pointer; font-weight: 800; transition: transform .2s, background .2s; }.primary-action:hover { transform: translateY(-2px); background: #15573f; }.primary-action.compact { width: auto; min-width: 230px; justify-content: center; margin-inline: auto; }

.pass-screen { width: min(720px,100%); margin: 3vh auto 0; padding: clamp(28px,6vw,65px); border: 1px solid var(--line); border-radius: 34px; background: #fff; text-align: center; box-shadow: 0 32px 80px rgba(35,86,62,.12); }.turn-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }.pass-croc { width: 150px; height: 90px; margin: 55px auto 30px; display: grid; place-items: center; border-radius: 50% 50% 35% 35%; background: var(--mint); color: var(--green-dark); font-size: 42px; transform: rotate(-3deg); box-shadow: 13px 14px 0 rgba(47,155,104,.11); }.pass-screen p { margin: 0; color: var(--muted); }.pass-screen h2 { margin: 10px 0; font: 600 clamp(31px,6vw,55px) Unbounded,sans-serif; letter-spacing: -.06em; }.pass-screen > small { color: var(--muted); }.pass-screen .primary-action { margin-top: 38px; }

.play-screen { width: min(850px,100%); margin: 0 auto; position: relative; }.game-hud { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; margin-bottom: 14px; }.game-hud > div:not(.timer) { min-height: 62px; padding: 11px 16px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.75); }.game-hud small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.game-hud b { margin-top: 4px; }.turn-score b { color: var(--green); }.pause-button { width: 58px; height: 58px; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; font-weight: 800; }.timer { --progress: 100%; width: 76px; height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border-radius: 50%; background: conic-gradient(var(--orange) var(--progress), #e8eee9 0); }.timer:after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--cream); }.timer span, .timer small { position: relative; z-index: 1; }.timer span { font: 700 21px Unbounded,sans-serif; }.timer small { font-size: 8px; }
.word-card { min-height: 430px; padding: clamp(28px,6vw,60px); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; border-radius: 34px; background: radial-gradient(circle at 50% 45%,#c5f4d8 0 24%,var(--mint) 25% 56%,#80dcaa 57%); box-shadow: 0 30px 70px rgba(35,86,62,.16); text-align: center; }.word-card:before, .word-card:after { content: ""; width: 110px; height: 55px; position: absolute; top: 45px; border-radius: 100% 0; background: rgba(255,255,255,.19); transform: rotate(30deg); }.word-card:before { left: -20px; }.word-card:after { right: -20px; transform: rotate(210deg); }.word-meta { position: absolute; top: 25px; display: flex; gap: 7px; }.word-meta span { padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.62); color: var(--green-dark); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.word-card > p { max-width: 700px; margin: 0; font: 700 clamp(42px,8vw,78px)/1.05 Unbounded,sans-serif; letter-spacing: -.075em; overflow-wrap: anywhere; }.gesture-reminder { position: absolute; bottom: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }.gesture-reminder span { padding: 7px 10px; border-radius: 999px; background: rgba(13,61,43,.09); color: #28684e; font-size: 9px; font-weight: 800; }
.word-actions { display: grid; grid-template-columns: .72fr 1.28fr; gap: 10px; margin-top: 13px; }.word-actions button { min-height: 68px; border: 0; border-radius: 17px; cursor: pointer; font-weight: 800; transition: transform .15s; }.word-actions button:active { transform: scale(.98); }.skip-button { background: #e9eee9; color: #68756d; }.guessed-button { background: var(--orange); color: #fff; }.word-actions button span { margin-right: 8px; font-size: 20px; }.timer-line { height: 5px; margin-top: 13px; overflow: hidden; border-radius: 99px; background: #e3e9e4; }.timer-line i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--orange); transform-origin: left; }
.pause-overlay, .next-overlay { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 34px; background: rgba(13,61,43,.94); color: #fff; text-align: center; backdrop-filter: blur(15px); }.pause-overlay[hidden], .next-overlay[hidden] { display: none; }.pause-overlay > span, .next-overlay > span { color: var(--mint); text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 800; }.pause-overlay h2 { margin: 13px 0 0; font: 600 clamp(28px,5vw,46px) Unbounded,sans-serif; }.next-overlay b { margin: 20px 0; font: 700 100px Unbounded,sans-serif; color: var(--yellow); }.next-overlay small { color: #c2ddcf; }

.finish-screen { width: min(760px,100%); margin: 1vh auto 0; padding: clamp(30px,7vw,70px); border: 1px solid var(--line); border-radius: 34px; background: #fff; text-align: center; box-shadow: 0 34px 90px rgba(35,86,62,.13); }.finish-crown { width: 105px; height: 105px; margin: 0 auto 25px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--green-dark); font-size: 50px; box-shadow: 0 0 0 17px rgba(255,211,98,.17); }.finish-screen h2 { margin: 18px 0; font: 700 clamp(40px,7vw,67px)/.96 Unbounded,sans-serif; letter-spacing: -.07em; }.finish-screen > p { color: var(--muted); }.final-score { margin-top: 28px; display: grid; gap: 8px; text-align: left; }.score-row { min-height: 65px; padding: 11px 16px; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 16px; }.score-row:first-child { border-color: rgba(255,120,76,.35); background: rgba(255,120,76,.06); }.score-rank { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; background: #eef4ef; font-weight: 800; }.score-row:first-child .score-rank { background: var(--yellow); }.score-row strong { color: var(--green); font: 700 18px Unbounded,sans-serif; }.finish-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }.finish-actions .primary-action { width: 100%; min-width: 0; margin: 0; }.finish-actions a { min-height: 60px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 17px; font-size: 12px; font-weight: 800; }

dialog { width: min(670px,calc(100% - 28px)); max-height: calc(100vh - 28px); padding: clamp(26px,5vw,48px); border: 1px solid var(--line); border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 40px 100px rgba(13,61,43,.32); }dialog::backdrop { background: rgba(13,35,27,.65); backdrop-filter: blur(8px); }.dialog-close { position: absolute; right: 20px; top: 20px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: #f4f7f3; cursor: pointer; font-size: 24px; }dialog > span { color: var(--green); text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 800; }dialog h2 { margin: 10px 0 22px; font: 600 34px Unbounded,sans-serif; letter-spacing: -.05em; }dialog ol { margin: 0; padding-left: 23px; }dialog li { padding: 8px 0 8px 7px; color: var(--muted); line-height: 1.55; font-size: 13px; }dialog li::marker { color: var(--orange); font-weight: 800; }

@media (max-width: 850px) { .setup-screen.active { display: block; }.setup-copy { position: static; padding: 0 3px 44px; }.setup-copy h1 { font-size: clamp(49px,13vw,78px); }.croc-face { display: none; }.setup-card { border-radius: 25px; } }
@media (max-width: 590px) { .play-nav { min-height: 65px; }.play-nav > a, .play-nav > button { padding: 9px 11px; font-size: 10px; }.game-logo { font-size: 12px; }.game-logo span { width: 34px; height: 34px; }.game-shell { width: calc(100% - 24px); padding-top: 32px; }.setup-row { display: block; }.stepper { width: 100%; margin-top: 18px; }.player-names, .settings-grid, .finish-actions { grid-template-columns: 1fr; }.section-title { display: block; }.game-hud { grid-template-columns: 1fr auto auto; }.turn-score { display: none !important; }.timer { width: 64px; height: 64px; }.pause-button { width: 52px; height: 52px; }.word-card { min-height: 390px; border-radius: 25px; }.word-card > p { font-size: clamp(37px,12vw,58px); }.word-actions { grid-template-columns: 1fr; }.word-actions button { min-height: 59px; }.pass-screen, .finish-screen { border-radius: 25px; }.category-options span { font-size: 10px; }.gesture-reminder { padding-inline: 12px; } }

/* Профильный крокодил улыбается в покое и открывает пасть только при взаимодействии. */
.croc-face{width:260px;height:150px;display:block;position:relative;isolation:isolate;border:0;border-radius:0;background:none;box-shadow:18px 20px 0 rgba(47,155,104,.1);transform:rotate(-3deg);animation:none;transition:transform .32s cubic-bezier(.2,.8,.2,1);cursor:pointer}
.croc-face:before{content:"";position:absolute;z-index:1;left:22px;top:25px;width:166px;height:98px;border:5px solid var(--green-dark);border-radius:62% 36% 43% 55%;background:linear-gradient(145deg,#43ad78,#2f9b68)}
.croc-face:after{content:"";position:absolute;z-index:2;left:145px;top:61px;width:98px;height:55px;border:5px solid var(--green-dark);border-left:0;border-radius:0 62% 48% 18%;background:radial-gradient(circle at 76% 31%,var(--green-dark) 0 4px,transparent 5px),#51ba83}
.croc-face i{position:absolute;z-index:5;left:72px;top:8px;width:48px;height:48px;margin:0;border:9px solid var(--green-dark);border-radius:50%;background:#fff;animation:none}.croc-face i:nth-of-type(2){display:none}.croc-face i:after{left:17px;top:10px;width:10px;height:10px}
.croc-snout{z-index:6;left:145px;top:61px;width:98px;height:55px;border-radius:0 62% 48% 18%;background:transparent;transform:none}.croc-snout u:first-child{display:none}.croc-snout u:last-child{right:18px;top:15px;width:10px;height:7px}
.croc-mouth{z-index:7;left:127px;bottom:22px;width:111px;height:42px;border:4px solid var(--green-dark);border-radius:10px 15px 55px 20px;background:#34202a;transform:scaleY(.18) rotate(-1deg);transform-origin:10% 0;animation:none}.croc-mouth:before{height:15px}.croc-mouth span{left:25px;right:16px;bottom:-5px;height:20px}
.croc-face:is(:hover,:active){transform:translateY(-5px) rotate(1deg) scale(1.03)}.croc-face:is(:hover,:active) .croc-mouth{animation:croc-profile-mouth .78s cubic-bezier(.55,.05,.35,1) 2}.croc-face:is(:hover,:active) i:first-of-type{animation:croc-profile-blink .78s ease-in-out 2}
@keyframes croc-profile-mouth{0%,100%{transform:scaleY(.18) rotate(-1deg)}42%,72%{transform:scaleY(1) rotate(2deg)}}@keyframes croc-profile-blink{0%,42%,58%,100%{transform:scaleY(1)}50%{transform:scaleY(.12)}}
@media(prefers-reduced-motion:reduce){.croc-face,.croc-face *{animation:none!important;transition:none!important}}
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }