/* Лето в Гусевке: деревянные таблички с гвоздями, глянцевая «Играть», небо и трава. Базовый размер 700 x 372. */
body { background: #2d8cf0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #fff; }
#gl, #fx2d { position: absolute; left: 0; top: 0; display: block; }
#gl { z-index: 0; background: #8fd0ff; }
#fx2d { z-index: 1; pointer-events: none; }
.screen { z-index: 2; }
.overlay { z-index: 60; background: rgba(20, 10, 4, .55); }

/* ---------- заставка */
#intro-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%) scale(.6); opacity: 0; transition: opacity .8s, transform .9s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
#intro-title.show { opacity: 1; transform: translate(-50%, -60%) scale(1); }
#intro-title svg { width: 420px; height: auto; }
.skip { position: absolute; right: 12px; top: 12px; display: none; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 20px; border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(10, 8, 20, .55); color: #fff; font: inherit; font-size: 14px; font-weight: 800; }
.skip.show { display: flex; }

/* ---------- отъезд домой */
#outro-caption { position: absolute; left: 6%; right: 6%; bottom: 4%; margin: 0; padding: 10px 16px; border-radius: 12px;
  background: rgba(11, 10, 20, .82); color: #fff6d8; text-align: center; font-size: clamp(14px, 2.4vw, 19px); font-weight: 800; line-height: 1.35; }
#outro-caption:empty { display: none; }
#outro-card { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 16px 7%;
  background: #0b0a14; color: #fff6d8; text-align: center; }
#outro-card[hidden] { display: none; }
.outro-kicker { font-size: 15px; color: #d8bc82; font-weight: 800; }
#outro-card h1 { margin: 0; color: #ffd23f; font-size: clamp(25px, 5vw, 42px); line-height: 1.15; text-shadow: 0 3px 0 #5a2a00; }
#outro-card p { margin: 0; font-size: clamp(14px, 2.8vw, 18px); line-height: 1.5; }
#outro-card .btn { min-width: 180px; }
@media (max-height: 340px) { #outro-card { gap: 10px; } }

/* ---------- меню */
#menuIn { color: #fff; font-weight: 900; }
#menu-drag { position: absolute; left: 0; top: 0; bottom: 0; right: 260px; touch-action: none; }
.m-top { position: absolute; left: 12px; top: 10px; display: flex; gap: 12px; pointer-events: none; }
.m-stat { position: relative; display: flex; align-items: center; height: 36px; padding: 3px 3px 3px 26px; margin-left: 16px; border-radius: 11px; border: 2px solid #3a1a08;
  background: linear-gradient(#d8964e, #a8642c 55%, #8a4c1e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 8px rgba(0, 0, 0, .4); }
.m-stat svg { position: absolute; left: -18px; top: -5px; width: 44px; height: 44px; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .45)); }
.m-val { min-width: 70px; height: 100%; padding: 0 10px; border-radius: 7px; display: flex; align-items: center; justify-content: flex-end; color: #ffe27a; font-size: 17px;
  background: linear-gradient(#1e1208, #3a2412); box-shadow: inset 0 2px 4px #000; text-shadow: 0 0 8px rgba(255, 190, 40, .6); }
.m-val small { color: #c8a07a; font-size: 12px; margin-left: 3px; text-shadow: none; }
.m-col { position: absolute; right: 10px; top: 0; bottom: 0; width: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.m-plate { position: relative; width: 250px; padding: 9px 0 7px; border-radius: 14px; line-height: 0; text-align: center; border: 3px solid #3a1a08;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .0) 0 13px, rgba(60, 25, 5, .35) 13px 15px), linear-gradient(#d89a58, #b0703a 45%, #8a4c1e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 8px 18px rgba(0, 0, 0, .5); animation: plate 4s ease-in-out infinite; }
.m-plate i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2f4f7, #5a5f68 70%); box-shadow: 0 1px 1px #000; }
.m-plate i:nth-child(1) { left: 8px; top: 8px; } .m-plate i:nth-child(2) { right: 8px; top: 8px; } .m-plate i:nth-child(3) { left: 8px; bottom: 8px; } .m-plate i:nth-child(4) { right: 8px; bottom: 8px; }
@keyframes plate { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
.m-guest { display: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: rgba(13, 7, 3, .7); color: #ffd9a0; font-size: 11px; font-weight: 600; }
.m-guest.show { display: flex; }
.m-play { position: relative; width: 230px; height: 68px; margin: 6px 0 4px; border-radius: 18px; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 8px; line-height: 0; color: transparent; font-size: 1px;
  background: linear-gradient(#ffc233, #ff8a00 48%, #f25c00 52%, #ff7a00);
  box-shadow: 0 0 0 3px #7a2a00, 0 0 0 6px #ffd98a, 0 0 0 8px #7a2a00, 0 9px 0 8px #3a1200, 0 18px 22px rgba(0, 0, 0, .55); transition: transform .06s; animation: pulse 1.7s ease-in-out infinite; }
.m-play::before { content: ""; position: absolute; left: 10px; right: 10px; top: 6px; height: 34%; border-radius: 12px; background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .1)); pointer-events: none; }
.m-play:active { transform: translateY(6px); }
.m-play > * { position: relative; pointer-events: none; }
@keyframes pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.14); } }
.m-row { display: flex; gap: 5px; margin-top: 10px; }
.m-rb { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 46px; background: none; border: 0; padding: 0; color: #fff3d6; font: inherit; font-size: 9.5px; white-space: nowrap; font-weight: 800; text-shadow: 0 1px 2px #000, 0 0 4px #000; transition: opacity .3s, filter .3s; }
.m-rb b { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid #2a1206;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), inset 0 -4px 0 rgba(0, 0, 0, .35), 0 4px 0 #1a0a03, 0 8px 10px rgba(0, 0, 0, .45); transition: transform .06s; }
.m-rb:active b { transform: translateY(3px); }
.m-rb * { pointer-events: none; }
.m-l b { background: radial-gradient(circle at 35% 25%, #ffd98a, #f08a10 70%); }
.m-f b { background: radial-gradient(circle at 35% 25%, #ff9ac0, #e0306a 70%); }
.m-b b { background: radial-gradient(circle at 35% 25%, #8fd8ff, #1877d8 70%); }
.m-s b { background: radial-gradient(circle at 35% 25%, #b8f58a, #2fa83a 70%); }
.m-p b { background: radial-gradient(circle at 35% 25%, #d8c8b0, #7a6450 70%); }
#menuIn.first .m-rb { opacity: .45; filter: grayscale(.85); }
#menuIn.first .m-stat { opacity: .6; }

/* ---------- игра */
#touch { position: absolute; inset: 0; touch-action: none; }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255, 0, 40, 0) 45%, rgba(255, 20, 60, .6)); }
#flash.on { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.hud { pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-left { position: absolute; left: 10px; top: 8px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#hearts { display: flex; gap: 3px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.hud-geese { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 4px; border-radius: 16px; border: 2px solid #3a1a08; font-size: 17px; font-weight: 900; color: #ffe27a;
  background: linear-gradient(#5a3418, #2e1a0a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 6px rgba(0, 0, 0, .4); }
.hud-goal { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 16px; border-radius: 10px; border: 2px solid #3a1a08; pointer-events: none;
  background: linear-gradient(#d89a58, #a8642c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 8px rgba(0, 0, 0, .4); font-size: 15px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #5a2a00; white-space: nowrap; }
.btn-icon { width: 46px; height: 46px; border: 2px solid #3a1a08; border-radius: 12px; color: #fff; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#d89a58, #a8642c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 #3a1a08; }
.hud-pause { position: absolute; right: 10px; top: 8px; }
.ctrl-group { position: absolute; z-index: 3; }
.ctrl-r { right: 18px; bottom: 18px; transform-origin: 100% 100%; display: flex; align-items: flex-end; gap: 14px; }
.shoo.b2 { width: 70px; height: 70px; margin-bottom: 40px; background: radial-gradient(circle at 35% 30%, #8fe0ff, #2a8ad8 70%); border-color: #0a3a6a; }
.shoo.b2 span { font-size: 11px; }
.shoo { --cd: 0; position: relative; width: 86px; height: 86px; border-radius: 50%; border: 3px solid #7a2a00; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 0;
  background: radial-gradient(circle at 35% 28%, #ffe98a, #ff8a00 70%); color: #fff; font: inherit; font-size: 15px; font-weight: 900; text-shadow: 0 2px 0 #7a2a00; touch-action: none;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), 0 5px 0 #3a1200, 0 10px 12px rgba(0, 0, 0, .45); }
.shoo.dim { filter: grayscale(.8) brightness(.8); }
.shoo.show { display: flex; animation: pop .35s cubic-bezier(.2, 1.8, .4, 1); }
.shoo::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(rgba(20, 10, 4, .6) calc(var(--cd) * 360deg), transparent 0); pointer-events: none; }
.shoo:active { transform: translateY(4px); }
.shoo * { pointer-events: none; }
@keyframes pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
.dlg { position: absolute; left: 50%; bottom: 10px; width: 520px; margin-left: -260px; display: none; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; border: 3px solid #3a1a08;
  background: linear-gradient(#fff6e0, #f4dcb0); color: #3a1a08; box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }
.dlg.show { display: flex; animation: pop .25s ease-out; }
.dlg.hero { background: linear-gradient(#e6f6ff, #bfe2ff); }
.dlg * { pointer-events: none; }
.dlg-face { flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; border: 3px solid #3a1a08; overflow: hidden; line-height: 0; }
.dlg-body { flex: 1; min-width: 0; }
#dlg-name { font-size: 13px; font-weight: 900; color: #c8401a; }
.dlg.hero #dlg-name { color: #1a64c8; }
#dlg-text { font-size: 16px; font-weight: 700; line-height: 1.25; }
.dlg-more { display: flex; align-items: center; gap: 3px; align-self: flex-end; font-size: 11px; font-weight: 800; opacity: .7; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- окна */
.panel { width: 300px; padding: 16px 18px 18px; border-radius: 18px; border: 3px solid #3a1a08; align-items: stretch; animation: pop .3s cubic-bezier(.2, 1.5, .4, 1);
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 22px, rgba(60, 25, 5, .25) 22px 24px), linear-gradient(#d89a58, #a8642c 55%, #8a4c1e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 12px 26px rgba(0, 0, 0, .5); }
.panel-title { font-size: 26px; font-weight: 900; text-align: center; color: #ffd23f; text-shadow: 0 3px 0 #5a2a00; }
.btn { min-height: 46px; padding: 0 16px; border: 2px solid #3a1a08; border-radius: 12px; font: inherit; font-size: 17px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  background: linear-gradient(#5ab8ff, #1f78d8); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 #0d3a6a; }
.btn:active { transform: translateY(3px); }
.btn-go { min-height: 54px; font-size: 20px; background: linear-gradient(#ffc233, #ff8a00 50%, #f25c00); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 5px 0 #7a2a00; }
.btn-sm { min-height: 40px; font-size: 14px; background: linear-gradient(#9ad86a, #3f9a2f); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 #1f4a12; }
.res { gap: 8px; text-align: center; }
#res-title { line-height: 0; }
.res-stars { display: flex; justify-content: center; gap: 4px; }
.res-stars svg { filter: grayscale(1) brightness(.45); transform: scale(.85); }
.res-stars svg.on { filter: drop-shadow(0 0 6px #ffd23f); transform: scale(1); animation: pop .5s cubic-bezier(.2, 1.8, .4, 1) both; }
.res-stars svg.on:nth-child(2) { animation-delay: .15s; } .res-stars svg.on:nth-child(3) { animation-delay: .3s; }
.res-line { font-size: 15px; font-weight: 700; color: #fff8e6; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.res-row { display: flex; justify-content: center; gap: 18px; font-size: 14px; font-weight: 700; color: #ffe8c0; }
.res-row b { color: #ffe27a; font-size: 18px; }
.res-btns { display: flex; gap: 8px; }
.btn-half { flex: 1; min-width: 0; font-size: 15px; }
.btn-share { background: linear-gradient(#ff8fc0, #e0306a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 #6a0a30; }
.lb-row { border-radius: 10px; background: rgba(255, 255, 255, .12); }
.lb-row.top-1 { background: #b8860b; } .lb-row.top-2 { background: #6c7a89; } .lb-row.top-3 { background: #8b5a2b; }
.lb-row.me { outline: 2px solid #ffd23f; }
.lb-avatar { background: #2f7fc1; }
#toast { top: 50px; padding: 10px 16px; border-radius: 12px; background: rgba(30, 14, 4, .88); border: 2px solid #ffd23f; font-size: 15px; font-weight: 800; }

/* ---------- задания и подсказка */
#lv-list { max-height: 214px; display: flex; flex-direction: column; gap: 7px; }
.lv-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 10px; border-radius: 12px; border: 2px solid #3a1a08; text-align: left; font: inherit; color: #3a1a08;
  background: linear-gradient(#fff6e0, #f0d6a8); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 #5a2a10; flex-shrink: 0; }
.lv-row:active { transform: translateY(2px); }
.lv-row.done { background: linear-gradient(#eaffd8, #c8eca0); }
.lv-row.locked { filter: grayscale(.7); opacity: .7; }
.lv-row * { pointer-events: none; }
.lv-n { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 900; color: #fff;
  background: radial-gradient(circle at 35% 30%, #ffc233, #f25c00 70%); border: 2px solid #7a2a00; text-shadow: 0 1px 0 #7a2a00; }
.lv-t { flex: 1; min-width: 0; font-size: 16px; font-weight: 900; line-height: 1.15; }
.lv-t small { display: block; font-size: 11px; font-weight: 700; opacity: .7; }
.lv-s { display: flex; flex-shrink: 0; }
.lv-s svg { filter: grayscale(1) brightness(.5); } .lv-s svg.on { filter: none; }
.lv-lock { flex-shrink: 0; }
.tip { text-align: center; align-items: center; gap: 8px; }
.tip-ico { line-height: 0; animation: pulse 1.2s ease-in-out infinite; }
#ov-tip { z-index: 70; }

.choice { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; width: min(560px, 92%); display: flex; flex-direction: column; gap: 7px; align-items: stretch; }
.choice-q { background: #fff3d6; color: #3a1a08; border: 3px solid #7a4600; border-radius: 14px; padding: 8px 14px; font-weight: 800; font-size: 15px; text-align: center; box-shadow: 0 4px 0 #3a1a08; }
.choice-b { background: linear-gradient(#ffb04a, #e8761a); font-size: 14px; min-height: 40px; text-align: left; }