:root{
  --brand-ivory:#FDF8F3;
  --brand-warm-gold:#B68E6B;
  --brand-coral:#E8654B;
  --brand-deep-moss:#7D733A;
  --frame-orange:#ff7c00;
  --frame-gap:24px;
  --topbar:calc(var(--frame-gap)*6);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--frame-orange);
  color:#333;
  overscroll-behavior:contain; /* prevent viewport jumps while dragging */
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* Шапка */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
  height:var(--topbar);
  padding:0 12px
}
.header img{height:calc(var(--topbar)*1.0)}
.header .title{
  flex:1;
  text-align:center;
  font-weight:800;
  color:#fff;
  letter-spacing:.5px;
  font-size:calc(var(--topbar)*0.7);
  line-height:var(--topbar)
}

/* Контейнер */
.container{
  position:relative;
  max-width:1200px;
  margin:var(--frame-gap) auto var(--frame-gap);
  padding:24px;
  background:var(--brand-ivory);
  border-radius:28px;
  box-shadow:0 12px 32px rgba(0,0,0,.08)
}

/* Карточки */
.card{background:transparent;border:0;border-radius:16px;padding:16px}
.hidden{display:none !important}

/* Панели */
.controls-row{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0;justify-content:center}
.controls-row .group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.controls-row .group label{min-width:110px;color:var(--brand-deep-moss)}

select,input[type="number"],input[type="text"]{
  padding:10px 12px;
  border:2px solid var(--brand-warm-gold);
  border-radius:12px;
  background:#fff;
  font-size:16px; /* убираем зум на iOS */
  min-height:44px;
}

/* Кнопки */
button{
  padding:10px 14px;
  border:0;
  border-radius:12px;
  background:var(--brand-coral);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  font-size:16px;
  min-height:44px;
}
button.secondary{background:#fff;color:var(--brand-coral);border:2px solid var(--brand-coral)}
.exit{
  background:#fff;color:var(--brand-coral);
  border:2px solid var(--brand-coral);
  padding:8px 12px;
  border-radius:12px;
  font-weight:700
}

/* Контент */
.flex-col{display:flex;flex-direction:column;gap:12px}
.memory-stage,.play-stage{display:grid;gap:16px;grid-template-columns:1fr 320px}
@media (max-width:900px){.memory-stage,.play-stage{grid-template-columns:1fr}}
.pair-view{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.pair-view{grid-template-columns:1fr}}

/* Рамка */
.frame{
  aspect-ratio:1/1;
  min-height:220px;
  border:3px dashed var(--brand-warm-gold);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  position:relative;
  overflow:hidden
}
.frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
}

/* Текст внутри рамок */
.frame .word{
  display:flex;
  align-items:center;
  justify-content:center;
  width:90%;
  height:90%;
  margin:auto;
  border:none;
  background:#fff;
  color:var(--brand-deep-moss);
  font-weight:800;
  line-height:1.1;
  text-align:center;
  white-space:normal;
  word-break:break-word;
  overflow:hidden;
  font-size:clamp(18px, 6vw, 72px);
}

/* Навигация */
.nav-vertical{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.nav-vertical button{padding:12px;font-size:18px}
@media (max-width:900px){.nav-vertical{flex-direction:row;justify-content:center}}

/* Остальное */
.meta{color:#777}
.bottom-tray{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:12px;
  min-height:120px;
  border:2px dashed var(--brand-warm-gold);
  border-radius:16px;
  background:#fff
}
.option{
  user-select:none;
  border:2px solid var(--brand-warm-gold);
  border-radius:12px;
  background:#fff;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  min-height:96px;
  cursor:grab;
  touch-action:manipulation;
}
.option img{max-width:90px;max-height:90px}
.option .word{
  font-weight:700;
  color:var(--brand-deep-moss);
  padding:6px 10px;
  border:2px solid var(--brand-warm-gold);
  border-radius:10px;
  background:#fff
}
.drop-target{outline:3px dotted transparent}
.drop-target.over{outline-color:var(--brand-warm-gold);box-shadow:0 0 0 6px rgba(182,142,107,.18) inset}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border:2px solid var(--brand-warm-gold);border-radius:12px;background:#fff}
.badge{background:var(--brand-warm-gold);color:#fff;padding:6px 10px;border-radius:999px;font-weight:700}
.results{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.results .stats{display:flex;gap:16px;flex-wrap:wrap}
.results .stat{padding:12px 16px;border-radius:12px;background:#fff;border:2px solid var(--brand-warm-gold);font-weight:700}

/* Wrong overlay image */
.bad-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.bad-img{max-width:70%;max-height:70%;animation:popPulse .9s ease-out 2;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
@keyframes popPulse{0%{transform:scale(.6);opacity:.1}40%{transform:scale(1.05);opacity:1}100%{transform:scale(1);opacity:.9}}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);z-index:10000}
.modal.hidden{display:none}
.modal-card{width:min(92vw,460px);background:var(--brand-ivory);border:2px solid var(--brand-warm-gold);border-radius:16px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modal-card h3{margin:0 0 8px;color:var(--brand-deep-moss)}

/* Mascot + praise */
.leo-mascot{position:absolute;bottom:10px;right:10px;width:140px;z-index:9999;animation:leoEnter 1s ease-out forwards,leoBounce 2s ease-in-out infinite 1s}
@keyframes leoEnter{from{bottom:-200px;opacity:0}to{bottom:10px;opacity:1}}
@keyframes leoBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.leo-praise{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(232,101,75,.95);color:#fff;padding:12px 22px;border-radius:14px;font-size:32px;font-weight:800;z-index:9998;box-shadow:0 6px 20px rgba(0,0,0,.25)}

.start-panel{max-width:70%;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}

.lang-switcher { margin-left: 12px; }
.lang-switcher select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 2px solid var(--brand-warm-gold);
  font-weight: 600;
  background:#fff;
}

/* === Mobile & Touch Enhancements === */
.bottom-tray,
.option,
#playRight,
#memoryRight,
#playLeft,
#memoryLeft {
  touch-action: manipulation;
}

/* Варианты ответа — сетка на узких экранах */
@media (max-width: 900px){
  .bottom-tray{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 12px;
  }
}

/* Адаптация шапки и контейнера под мобильные */
@media (max-width: 720px){
  :root{
    --frame-gap: 16px;
    --topbar: calc(var(--frame-gap) * 4.5);
  }
  .header img{ height: calc(var(--topbar) * 0.7); }
  .header .title{
    font-size: clamp(20px, 7vw, 36px);
    line-height: var(--topbar);
  }
  .container{
    padding: 16px;
    border-radius: 20px;
    margin: var(--frame-gap) auto var(--frame-gap);
  }
  .start-panel{ max-width: 100%; }
  .memory-stage, .play-stage{ grid-template-columns: 1fr; }
  .pair-view{ grid-template-columns: 1fr; }
  .frame{ min-height: clamp(180px, 45vw, 300px); }
  .nav-vertical{ flex-direction: row; justify-content: center; }
}

/* Фокус-стили */
button:focus-visible,
select:focus-visible,
input:focus-visible{
  outline: 3px solid rgba(182,142,107,.6);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Слегка увеличиваем вариант при перетаскивании */
.option.dragging{ transform: scale(1.05); }

/* Маскот не блокирует клики */
#leoMascot, #leoMessage, #leoPraise { pointer-events: none; }

/* Чуть более мягкая подсветка цели броска */
#playRight.over{
  outline: 3px dashed rgba(0,0,0,0.25);
  outline-offset: 4px;
}

/* Предпочтение уменьшенной анимации */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}