@font-face{
  font-family:'AlwaysAngry';
  src: url('assets/fonts/AlwaysAngry-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family:'AlwaysAngry';
  src: url('assets/fonts/AlwaysAngry-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root{
  --bg1:#fff2d6;
  --bg2:#ffd9a8;
  --bg3:#f7b979;
  --ink:#4a2a10;
  --ink-soft:#7a4a1e;
  --paper:#fffaf0;
  --paper-2:#fff1d6;
  --accent:#e07a2b;
  --accent-2:#c95a1a;
  --good:#6aa84f;
  --bad:#c0392b;
  --shadow: 0 8px 22px rgba(90,50,10,.18);
  --shadow-soft: 0 3px 10px rgba(90,50,10,.14);
  --radius: 22px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;font-family:'AlwaysAngry',system-ui,sans-serif}
html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 20% 0%, #ffe6bd 0%, transparent 60%),
    radial-gradient(900px 700px at 100% 100%, #ffcf94 0%, transparent 60%),
    linear-gradient(160deg, var(--bg1), var(--bg2) 60%, var(--bg3));
  user-select:none;
}

[hidden]{ display:none !important; }

#app{
  display:flex; flex-direction:column;
  height:100dvh; max-width:520px; margin:0 auto;
  position:relative;
  animation: fadeIn .6s ease both;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px 8px;
  gap:10px;
}
.coin-display{
  display:flex; align-items:center; gap:10px;
  background: var(--paper);
  padding: 8px 16px 10px 6px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  box-shadow: var(--shadow-soft);
  transform: rotate(-1deg);
  flex-shrink:0;
}
.coin-icon{
  width:42px;height:42px; display:grid; place-items:center;
  animation: spinCoin 6s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes spinCoin{
  0%,100%{transform:rotate(-8deg)}
  50%{transform:rotate(8deg)}
}
.coin-count{display:flex; flex-direction:column; line-height:1}
.coin-count #coins{
  font-weight:700;
  font-size: 26px; color:var(--ink);
  letter-spacing:.5px;
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  display:inline-block;
}
.coin-count small{ font-size:11px; color:var(--ink-soft); margin-top:4px; line-height:1.2; padding-bottom:2px; }

.stats{display:flex; align-items:center; gap:8px; flex-shrink:0}
.stat{
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:14px;
  padding: 4px 10px;
  text-align:center;
  min-width:58px;
  box-shadow: var(--shadow-soft);
  transform: rotate(1.5deg);
  flex-shrink:0;
}
.stat + .stat{ transform: rotate(-1.5deg);}
.stat span{ font-size:10px; color:var(--ink-soft); display:block; line-height:1 }
.stat b{ font-size:18px; display:block; margin-top:1px; font-variant-numeric: tabular-nums }

.icon-btn{
  background:var(--paper);
  color:var(--ink);
  border:2.5px solid var(--ink);
  width:42px;height:42px; border-radius:50%;
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .15s;
}
.icon-btn:active{ transform: scale(.9) rotate(30deg); }

.screens{
  flex:1; position:relative; overflow:hidden;
  margin: 6px 12px 0;
}
.screen{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transform: translateY(12px) scale(.98);
  transition: opacity .35s ease, transform .35s ease;
  overflow-y:auto;
  padding-bottom: 16px;
  scrollbar-width: none;
}
.screen::-webkit-scrollbar{display:none}
.screen.active{
  opacity:1; pointer-events:auto;
  transform: none;
}
.screen-title{
  font-size:30px; margin: 4px 8px 12px;
  transform: rotate(-1deg);
  font-weight:700;
}

.cat-stage{
  position:relative; height:100%;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius);
  overflow:hidden;
  background:
    radial-gradient(closest-side at 50% 60%, rgba(255,255,255,.55), transparent 70%),
    url('assets/backgrounds/bg.jpg') center/cover no-repeat,
    var(--paper-2);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow), inset 0 0 0 6px rgba(255,255,255,.35);
}

/* Помощь Андрея — стили строки в списке улучшений (см. ниже) */


.andrey-row.andrey-badge, .andrey-badge{
  background: linear-gradient(160deg,#c95a1a,#7a1e05) !important;
  color:#ffe9a8 !important;
}
.andrey-row.active{
  outline: 2px solid var(--accent);
  background: linear-gradient(180deg, #fff2d6, #ffe0b3);
}
.andrey-timer{ display:block; margin-top:2px; color: var(--accent-2); }
.cat-wrap{
  position:relative;
  width: min(72vw, 340px);
  aspect-ratio: 1;
  cursor:pointer;
  display:grid; place-items:center;
  animation: idleSway 3.6s ease-in-out infinite;
}
@keyframes idleSway{
  0%,100%{transform: translateY(0) rotate(-1.5deg)}
  50%{transform: translateY(-6px) rotate(1.5deg)}
}
.cat-wrap img{
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 12px 12px rgba(60,30,0,.25));
  pointer-events:none;
}
.cat-wrap.click{ animation: catPress .32s ease; }
@keyframes catPress{
  0%{transform: scale(1)}
  25%{transform: scale(.9) translateY(4px)}
  55%{transform: scale(1.06) translateY(-14px)}
  100%{transform: scale(1)}
}
.shadow{
  position:absolute; bottom:-14px; left:50%;
  width:60%; height:22px; background: radial-gradient(ellipse, rgba(0,0,0,.28), transparent 70%);
  transform: translateX(-50%);
  filter: blur(2px);
}
.hint{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%) rotate(-2deg);
  background:var(--paper); padding:6px 14px; border-radius:14px;
  border:2px dashed var(--ink); font-size:18px;
  box-shadow: var(--shadow-soft);
}

.particles{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2}
.pop{
  position:absolute; font-weight:700;
  font-size:26px; color:var(--accent-2);
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 rgba(0,0,0,.12);
  animation: popUp 900ms ease-out forwards;
  pointer-events:none;
}
@keyframes popUp{
  0%{opacity:0; transform: translate(-50%,-40%) scale(.6)}
  20%{opacity:1}
  100%{opacity:0; transform: translate(-50%,-160%) scale(1.2)}
}
.spark{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle, #ffe08a, #e07a2b);
  animation: spark 700ms ease-out forwards;
  pointer-events:none;
}
@keyframes spark{
  0%{opacity:1; transform: translate(-50%,-50%) scale(1)}
  100%{opacity:0; transform: translate(var(--dx), var(--dy)) scale(.2)}
}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap:12px;
  padding: 0 4px 8px;
}
.card{
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius: 20px;
  padding:10px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow: var(--shadow-soft);
  position:relative;
  transform: rotate(-.5deg);
  transition: transform .2s;
}
.card:nth-child(even){ transform: rotate(.7deg);}
.card:hover{ transform: translateY(-3px) rotate(0);}
.card .thumb{
  width:100%; aspect-ratio:1; border-radius:16px;
  background: linear-gradient(135deg, #fff7e2, #ffdca8);
  border:2px dashed var(--ink-soft);
  display:grid; place-items:center; overflow:hidden;
}
.card .thumb img{ width:88%; height:88%; object-fit:contain; filter: drop-shadow(0 4px 6px rgba(60,30,0,.2));}
.card .name{ font-size:20px; line-height:1.05; text-align:center; font-weight:700; word-break:break-word; overflow-wrap:anywhere; max-width:100%; padding:0 4px; box-sizing:border-box; hyphens:auto }
.card .name:has(.ra-red){ font-size:13px; letter-spacing:-0.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.card .price{
  display:flex; align-items:center; gap:6px; font-size:16px; color:var(--ink-soft);
}
.card .price::before{
  content:''; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #d1901a 70%, #7a4708);
  border:1.5px solid #6b3d10;
}
.card.owned{ background: linear-gradient(180deg,#fff, #e9f6df); }
.card.active-skin{ box-shadow: 0 0 0 3px var(--good), var(--shadow-soft); }

.list{ display:flex; flex-direction:column; gap:10px; padding:0 4px 8px }
.up-row{
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:18px;
  padding:10px 12px;
  display:flex; align-items:center; gap:12px;
  box-shadow: var(--shadow-soft);
}
.up-badge{
  width:52px;height:52px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg,#fff2cf,#ffd299);
  border:2px solid var(--ink);
  font-size:22px; font-weight:700; color:var(--ink);
  flex-shrink:0;
}
.up-row .info{ flex:1; min-width:0 }
.up-row .info b{ font-size:20px; display:block; line-height:1; font-weight:700 }
.up-row .info small{ color:var(--ink-soft); font-size:14px }
.up-row .info .rate{ color:var(--good); font-weight:700; font-size:14px }

.btn{
  font-weight:700;
  background: linear-gradient(180deg, #ffcf94, #e07a2b);
  color:#3a1e05;
  border:2.5px solid var(--ink);
  border-radius: 14px;
  padding: 8px 14px;
  cursor:pointer;
  box-shadow: 0 3px 0 var(--ink), var(--shadow-soft);
  transition: transform .1s, box-shadow .1s, filter .1s;
  font-size:16px;
  white-space:nowrap;
}
.btn:hover{ filter:brightness(1.05) }
.btn:active{ transform: translateY(3px); box-shadow: 0 0 0 var(--ink), var(--shadow-soft);}
.btn.small{ padding:6px 10px; font-size:14px; border-radius:12px }
.btn.disabled, .btn:disabled{
  background: #e6ddd0; color:#8a7a67; cursor:not-allowed;
  box-shadow: 0 3px 0 #a89882;
}
.btn.good{ background: linear-gradient(180deg,#b8e39a,#6aa84f); color:#1e3a0a }
.btn.danger{ background: linear-gradient(180deg,#f2a29a,#c0392b); color:#fff }

.bottom-nav{
  display:flex; gap:8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,250,240,0), rgba(255,236,205,.9));
}
.nav-btn{
  position:relative;
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
  border:2.5px solid var(--ink); border-radius:14px;
  padding: 10px 4px;
  font-weight:700; font-size:13px; line-height:1;
  color:var(--ink); cursor:pointer;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .12s, background .2s;
  white-space:nowrap;
  letter-spacing:-0.3px;
}
.nav-btn .nav-badge{
  position:absolute; top:-5px; right:-4px;
  min-width:12px; height:12px; padding:0 3px;
  border-radius:999px;
  background:#e53935; border:2px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  animation: navBadgePulse 1.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes navBadgePulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.18); }
}

.nav-btn.active{
  background: linear-gradient(180deg,#ffe0b3,#ffb976);
  transform: translateY(-4px) rotate(-1deg);
}
.nav-btn:active{ transform: translateY(1px) }
@media (max-width: 420px){
  .nav-btn{ font-size:11px; padding:10px 1px; letter-spacing:-0.5px; }
  .bottom-nav{ gap:4px !important; padding-left:6px; padding-right:6px; }
}
@media (max-width: 360px){
  .nav-btn{ font-size:10px; }
}

.modal{
  position:fixed; inset:0; background: rgba(60,30,10,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:50;
  animation: fadeIn .25s ease;
  padding:20px;
}
.modal-card{
  background:var(--paper); border:3px solid var(--ink);
  border-radius: 22px; padding:20px; width:100%; max-width:340px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:12px;
  transform: rotate(-.5deg);
}
.modal-card h3{ font-size:28px; margin:0; font-weight:700 }
.modal-card .row{ display:flex; justify-content:space-between; align-items:center; font-size:18px }
.modal-card input[type=checkbox]{ width:22px; height:22px; accent-color: var(--accent);}

.toast{
  position:fixed; left:50%; bottom: 90px;
  transform: translateX(-50%);
  background:var(--paper); border:2.5px solid var(--ink);
  padding: 8px 16px; border-radius:14px;
  font-size:20px; font-weight:700;
  box-shadow: var(--shadow);
  z-index:60;
  animation: toastIn .35s ease;
}
@keyframes toastIn{from{opacity:0; transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

@keyframes buyFlash{
  0%{box-shadow: 0 0 0 0 rgba(106,168,79,.7)}
  100%{box-shadow: 0 0 0 20px rgba(106,168,79,0)}
}
.flash{ animation: buyFlash .6s ease-out;}

@media (min-width: 720px){
  #app{ max-width: 640px; }
  .cat-wrap{ width: min(50vw, 380px);}
}

/* ===== Мини-коты (бонус каждые 25 кликов) ===== */
.mini-cat{
  position:absolute;
  pointer-events:none;
  transform: translate(-50%,-50%) rotate(0deg) scale(.2);
  filter: drop-shadow(0 4px 6px rgba(90,50,10,.35));
  animation: miniCatFly 1.15s cubic-bezier(.22,.75,.3,1) forwards;
  will-change: transform, opacity;
  z-index: 5;
}
@keyframes miniCatFly{
  0%   { transform: translate(-50%,-50%) rotate(0deg) scale(.2); opacity: 0; }
  15%  { opacity: 1; transform: translate(-50%,-50%) rotate(calc(var(--mr) * .2)) scale(1.05); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my))) rotate(var(--mr)) scale(.6);
  }
}

/* ===== Credits в настройках ===== */
.credits{
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--paper-2);
  border: 2px dashed var(--ink);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}
.credits h4{
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.credits .row-c{
  display:grid;
  grid-template-columns: 40% 1fr;
  align-items:center;
  gap:10px;
  padding: 3px 0;
}
.credits .row-c > :first-child{ color: var(--ink-soft); }
.credits .row-c > :last-child{
  font-weight:700;
  text-align:right;
  min-width:0;
  overflow-wrap: anywhere;
}
.credits .credit-link{
  font-weight: 700;
  color: var(--accent-2);
  text-decoration: none;
  border-bottom: none;
}
.credits .credit-link:hover{ color: var(--accent); }
.credits .credit-link:active{ opacity: .7; }
.credits .credit-link-full{
  grid-column: 1 / -1;
  text-align: center;
  padding-top: 4px;
}
.credits .credit-link-block{
  display:block;
  margin-top: 8px;
  padding: 8px 12px;
  text-align:center;
  border: 2px dashed var(--accent-2);
  border-radius: 12px;
  background: #fff6e6;
}
.credits .credit-link-block:hover{ background: #ffe9c8; }

/* ===== Секретный скин ===== */
.card.secret-locked .thumb{
  background: linear-gradient(135deg, #2a1a10, #4a2a10);
  border-style: solid;
}
.card.secret-locked .thumb img{
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
}
.card.secret-locked .name{
  letter-spacing: 4px;
  color: var(--ink-soft);
}

/* ===== Колесо фортуны ===== */
.wheel-wrap{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding: 4px 8px 20px;
}
.wheel-stage{
  position:relative;
  width: min(88vw, 340px);
  aspect-ratio: 1;
  display:grid; place-items:center;
  filter: drop-shadow(0 8px 14px rgba(90,50,10,.25));
}
.wheel-outer{
  position:relative;
  width:100%; height:100%;
  border-radius:50%;
  border: 4px solid var(--ink);
  background: var(--paper);
  overflow:hidden;
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.35), var(--shadow);
}
.wheel-svg{
  width:100%; height:100%;
  display:block;
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  will-change: transform;
}
.wheel-hub{
  position:absolute; top:50%; left:50%;
  width: 22%; height:22%;
  transform: translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #d1901a 70%, #7a4708);
  border: 3px solid var(--ink);
  display:grid; place-items:center;
  font-weight:700; font-size: clamp(18px, 5vw, 26px);
  color:#5a3208;
  box-shadow: 0 4px 0 var(--ink), inset 0 -3px 0 rgba(0,0,0,.15);
  z-index:3;
}
.wheel-pointer{
  position:absolute; top:-2px; left:50%;
  width: 0; height:0;
  transform: translate(-50%, -30%);
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 30px solid var(--accent-2);
  filter: drop-shadow(0 2px 0 var(--ink));
  z-index:4;
}
.wheel-pointer::after{
  content:'';
  position:absolute; top:-32px; left:-14px;
  width:28px; height:28px; border-radius:50%;
  background: var(--paper);
  border: 3px solid var(--ink);
}
.wheel-btn{
  min-width: 60%;
  font-size: 22px;
  padding: 12px 22px;
}
.wheel-info{
  font-size: 16px; color: var(--ink-soft);
  text-align:center;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--paper-2);
  border: 2px dashed var(--ink);
  font-variant-numeric: tabular-nums;
}
.wheel-legend{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  width:100%;
  max-width: 340px;
  padding: 10px 12px;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  font-size: 14px;
}
.leg-item{ display:flex; align-items:center; gap:6px; }
.leg-dot{
  width:14px; height:14px; border-radius:50%;
  border: 1.5px solid var(--ink);
  flex-shrink:0;
}

/* Prize modal */
.prize-card{ text-align:center; align-items:center; }
.prize-card h3{ text-align:center; }
.prize-visual{
  width: 140px; height:140px;
  display:grid; place-items:center;
  margin: 4px auto;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff7e2, #ffdca8);
  border: 2px dashed var(--ink-soft);
}
.prize-img{ width: 85%; height:85%; object-fit:contain;
  filter: drop-shadow(0 4px 6px rgba(60,30,0,.2)); }
.prize-coin{
  width: 90px; height:90px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #d1901a 70%, #7a4708);
  border: 3px solid var(--ink);
  animation: spinCoin 1.6s ease-in-out infinite;
}
.prize-desc{ font-size: 16px; color: var(--ink-soft); text-align:center; }

/* Wheel-only shop card */
.card.wheel-only .thumb{
  background: linear-gradient(135deg, #f4e5c8, #e0c99a);
}
.wheel-only-tag{
  font-size: 11px;
  color: var(--accent-2);
  font-weight: 700;
  letter-spacing: .3px;
  text-align:center;
  line-height: 1.15;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.card .btn.small{ max-width: 100%; white-space: normal; overflow-wrap: break-word; word-break: break-word; hyphens: auto; line-height: 1.15; padding: 6px 8px; font-size: 12px; }

.card.riddle-locked .thumb{ background: linear-gradient(135deg, #2a1a0a, #3a2410); }
.card.riddle-locked .thumb img{ filter: brightness(.95) contrast(1.05); }
.riddle-input{ width: 100%; box-sizing: border-box; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 10px; font-size: 15px; font-family: inherit; text-align: center; background: #fff8ec; color: #3a2108; outline: none; }
.riddle-input:focus{ border-color: var(--accent-2); background: #fff; }
.riddle-input.shake{ animation: riddleShake .35s ease; border-color: #d64545; background: #ffefef; }
@keyframes riddleShake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.riddle-card{ text-align:center; }
.riddle-q-modal{ font-size: 18px; font-style: italic; color: var(--ink); font-weight: 700; margin-top: 4px; }
.riddle-nums-modal{ font-family: 'Courier New', monospace; letter-spacing: 6px; font-size: 20px; color: var(--accent-2); font-weight: 800; margin-bottom: 4px; }

/* Rebirth button: allow wrap so long text doesn't overflow */
.btn[data-action="rebirth-open"]{
  white-space: normal;
  line-height: 1.15;
  padding: 12px 16px;
  font-size: 15px;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
}

.ach-progress{ display:flex; flex-direction:column; gap:4px; width:100%; margin: 4px 0 6px; }
.ach-bar{ width:100%; height:6px; background: rgba(107,61,16,.15); border-radius: 999px; overflow: hidden; }
.ach-bar-fill{ height:100%; background: linear-gradient(90deg, #ff9a3c, #ff4e50); border-radius:999px; transition: width .3s ease; }
.ach-days{ display:grid; grid-template-columns: repeat(7, 1fr); gap:3px; }
.ach-day{ font-size:10px; font-weight:800; text-align:center; padding:2px 0; border-radius:6px; background: rgba(107,61,16,.1); color: var(--ink-soft); }
.ach-day.on{ background: linear-gradient(180deg, #ffb347, #ff6a3d); color:#fff; box-shadow: 0 1px 2px rgba(255,90,50,.4); }
.ach-label{ font-size:10px; color: var(--ink-soft); text-align:center; font-weight:700; }

/* ===== Fixes v9 ===== */
/* Settings button lives inside .stats on the right of the topbar */
#settingsBtn{
  position: static;
  flex-shrink: 0;
}
/* Keep the coin display from overflowing on small screens */
.topbar{ padding-right: 16px; }
.coin-display{ min-width: 0; max-width: calc(100% - 170px); }
.stats{ margin-right: 0; }
.stat{ max-width: 92px; overflow: hidden; }
.stat b{ font-size: clamp(12px, 3.6vw, 18px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-count{ min-width: 0; overflow: hidden; }
.coin-count #coins{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(18px, 5.5vw, 26px);
}

/* Wheel actions row + paid button */
.wheel-actions{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center; width:100%;
}
.wheel-btn{ min-width: 45%; }
.wheel-btn.paid{
  background: linear-gradient(180deg, #ffe08a, #d1901a);
}
.wheel-btn.paid::before{
  content:''; display:inline-block; vertical-align: middle;
  width:16px; height:16px; margin-right:6px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #d1901a 70%, #7a4708);
  border:1.5px solid #6b3d10;
}

/* ===== v10: задания / стрик / перерождение ===== */
.bottom-nav{ gap: 5px; padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); }

.quests-wrap{ display:flex; flex-direction:column; gap:14px; padding: 0 4px 12px; }
.quests-sub{
  font-size: 15px; color: var(--ink-soft);
  padding: 6px 12px; border-radius: 12px;
  background: var(--paper-2); border: 2px dashed var(--ink);
  text-align:center;
}
.quests-list{ display:flex; flex-direction:column; gap:10px; }
.quest-row{
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:18px;
  padding:10px 12px;
  display:flex; align-items:center; gap:10px;
  box-shadow: var(--shadow-soft);
}
.quest-row.ready{ background: linear-gradient(180deg,#fff,#f3f0c8); }
.quest-row.claimed{ background: linear-gradient(180deg,#fff,#e9f6df); opacity: .8; }
.quest-check{
  width: 30px; height:30px; flex-shrink:0;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display:grid; place-items:center;
  background: var(--paper-2);
  font-weight:700; font-size:20px; color: var(--good);
  line-height: 1;
}
.quest-row.claimed .quest-check{ background: var(--good); color:#fff; border-color: var(--ink); }
.quest-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.quest-info b{ font-size:16px; line-height:1.15; font-weight:700; }
.quest-info small{ color: var(--ink-soft); font-size:13px; }
.quest-bar{
  width:100%; height:8px; border-radius:6px;
  background: #eee2c8; border: 1.5px solid var(--ink);
  overflow:hidden;
}
.quest-bar span{
  display:block; height:100%;
  background: linear-gradient(90deg,#ffcf94,#e07a2b);
  transition: width .35s ease;
}

.quest-bonus{
  border: 2.5px dashed var(--ink);
  border-radius: 18px;
  padding: 12px 14px;
  background: var(--paper-2);
  display:flex; flex-direction:column; gap:8px; align-items:stretch;
  text-align:center;
}
.quest-bonus.ready{ background: linear-gradient(180deg,#fff2b8,#ffd299); animation: buyFlash 1.4s ease-out infinite; }
.quest-bonus.claimed{ opacity: .75; }
.bonus-title{ font-size: 18px; font-weight: 700; }
.bonus-desc{ font-size: 15px; color: var(--ink-soft); }

/* стрик */
.streak-block{
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  padding: 12px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow: var(--shadow-soft);
}
.streak-title{ font-size: 18px; font-weight: 700; text-align:center; }
.streak-days{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.streak-day{
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 6px 2px;
  background: var(--paper-2);
  text-align:center;
  display:flex; flex-direction:column; gap:2px;
  min-width: 0;
}
.streak-day .d-num{ font-size: 11px; color: var(--ink-soft); line-height:1; }
.streak-day .d-rew{ font-size: 12px; font-weight:700; line-height:1.1; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; justify-content:center; min-height: 26px; }
.streak-day .d-skin{ width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(60,30,0,.3)); }
.streak-day.special .d-skin{ filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.streak-day.on{ background: linear-gradient(180deg,#b8e39a,#8fc76e); }
.streak-day.next{
  background: linear-gradient(180deg,#ffe08a,#e07a2b);
  transform: scale(1.06); box-shadow: 0 2px 0 var(--ink);
}
.streak-day.special{
  background: linear-gradient(180deg,#ffc9c9,#e05a5a);
  color: #fff;
}
.streak-day.special .d-num{ color: rgba(255,255,255,.85); }
.streak-day.special.on{ background: linear-gradient(180deg,#ff8a8a,#c0392b); }
.streak-hint{ font-size: 13px; color: var(--ink-soft); text-align:center; }

/* перерождение */
.rebirth-wrap{ padding: 0 4px 20px; }
.rebirth-card{
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:14px;
  text-align:center;
}
.stars-display{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding: 6px 0;
}
.star-big{
  font-size: 64px; line-height: 1;
  color: #e07a2b;
  text-shadow: 0 3px 0 var(--ink), 0 0 22px rgba(224,122,43,.4);
  animation: spinCoin 4s ease-in-out infinite;
}
.star-count{ font-size: 34px; font-weight: 700; line-height: 1; }
.star-label{ font-size: 14px; color: var(--ink-soft); letter-spacing: 1px; text-transform: uppercase; }
.rebirth-desc{ font-size: 15px; color: var(--ink); line-height: 1.4; padding: 0 4px; }
.rebirth-stats{
  background: var(--paper-2);
  border: 2px dashed var(--ink);
  border-radius: 14px;
  padding: 10px 14px;
  display:flex; flex-direction:column; gap:6px;
}
.rs-row{ display:flex; justify-content:space-between; align-items:center; font-size: 15px; }
.rs-row span{ color: var(--ink-soft); }
.rs-row b{ font-weight: 700; font-variant-numeric: tabular-nums; }
.rebirth-lock{
  font-size: 14px; color: var(--bad);
  padding: 10px; border-radius: 12px;
  background: #fff3ef; border: 2px dashed var(--bad);
  line-height: 1.4;
}
.rebirth-confirm{ font-size: 15px; line-height: 1.5; }
.rebirth-balance{
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 10px 14px;
  display:flex; flex-direction:column; gap:8px;
}
.rb-row{ display:flex; justify-content:space-between; align-items:center; font-size: 15px; }
.rb-row span{ color: var(--ink-soft); }
.rb-row b{ font-weight: 800; font-variant-numeric: tabular-nums; }
.rebirth-bar{
  height: 10px; border-radius: 999px;
  background: #f1e4c8; border: 2px solid var(--ink);
  overflow: hidden;
}
.rebirth-bar > span{
  display:block; height:100%;
  background: linear-gradient(90deg, #f2b64a, #e07a2b);
  transition: width .25s ease;
}

/* ===== Спасибо, что играешь! (после 7-дневного скина) ===== */
.thanks-toast{
  position: fixed;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%) rotate(-3deg) scale(.6);
  background: linear-gradient(160deg, #fff2d6, #ffd299);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 16px 22px;
  box-shadow: 0 10px 0 var(--ink), var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  max-width: min(88vw, 360px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,1.4,.36,1);
}
.thanks-toast.show{
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-2deg) scale(1);
  animation: thanksWobble 2.2s ease-in-out .5s infinite;
}
@keyframes thanksWobble{
  0%,100%{ transform: translate(-50%, -50%) rotate(-2deg) scale(1); }
  50%    { transform: translate(-50%, -54%) rotate(2deg)  scale(1.02); }
}
.thanks-toast .th-text{
  display: flex; flex-direction: column; gap: 4px;
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
  flex: 1; min-width: 0;
}
.thanks-toast .th-text b{
  font-size: 22px; font-weight: 700;
  letter-spacing: .3px;
}
.thanks-toast .th-text small{
  font-size: 13px;
  color: var(--ink-soft);
}
.thanks-toast .th-heart{
  font-size: 34px;
  color: #d64545;
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 rgba(0,0,0,.12);
  animation: thanksHeart 1s ease-in-out infinite;
  flex-shrink: 0;
}
.thanks-toast .th-r{ animation-delay: .5s; }
@keyframes thanksHeart{
  0%,100%{ transform: scale(1) rotate(-8deg); }
  50%    { transform: scale(1.25) rotate(8deg); }
}

/* Skins counter block */
.skins-counter{
  grid-column: 1 / -1;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 3px 0 rgba(0,0,0,.08);
}
.skins-counter-total{
  font-family: 'AlwaysAngry', sans-serif;
  font-size: 16px; color: var(--ink); text-align:center;
}
.skins-counter-total b{ color: var(--accent-2); }
.skins-counter-chips{
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.skin-chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #fff8ec; border: 2px solid var(--ink);
  font-size: 12px; color: #3a2108;
}
.skin-chip b{ color: var(--accent-2); font-weight: 800; }
.skin-chip.full{ background: #ffe6a8; }
.skin-chip.full b{ color: #2a7a2a; }

/* Поиск скинов в магазине */
.shop-search{
  grid-column: 1 / -1;
  position: relative;
  margin: 4px 0 2px;
}
.shop-search-input{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 36px 10px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(107,61,16,.25);
  background: #fff8e7;
  font: inherit;
  font-size: 14px;
  color: #5a3208;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.shop-search-input::placeholder{ color: rgba(107,61,16,.5); }
.shop-search-input:focus{
  border-color: var(--accent-2, #e07a2b);
  box-shadow: 0 0 0 3px rgba(224,122,43,.18);
}
.shop-search-clear{
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(107,61,16,.15);
  color: #5a3208;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.shop-search-clear:active{ background: rgba(107,61,16,.28); }
.shop-empty{
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 12px;
  color: rgba(107,61,16,.7);
  font-size: 14px;
}

/* Riddle modal hint */
.riddle-hint-modal{
  margin-top: 8px;
  font-size: 11px;
  color: #6b5236;
  text-align: center;
  opacity: .85;
}
.riddle-hint-modal a{
  color: var(--accent-2);
  text-decoration: underline;
  font-weight: 700;
}

/* Rose riddle multi-step */
.rose-riddle-card{ text-align:center; max-width: 420px; }
.rose-progress{ font-size: 12px; color: #6b5236; margin: 2px 0 6px; letter-spacing: 1px; text-transform: uppercase; }
.rose-progress b{ color: var(--accent-2); font-weight: 800; }
.rose-question{
  font-size: 15px; line-height: 1.35; font-style: italic; font-weight: 700;
  color: var(--ink); margin: 4px 0 6px; padding: 10px 12px;
  background: #fff8ec; border: 2px dashed var(--accent-2); border-radius: 12px;
}
.rose-hint{
  font-family: 'Courier New', monospace; font-size: 12px; letter-spacing: 3px;
  color: var(--accent-2); font-weight: 800; margin-bottom: 6px;
}

/* ========= Мини-игра «Капитан Р(а)» ========= */
#minigameModal{ padding:16px; }
#minigameModal .mg-root{
  width:100%; max-width:420px; height:100%; max-height:min(760px, 92vh);
  margin:auto;
  display:flex; flex-direction:column;
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius: var(--radius);
  padding:10px;
  box-shadow: var(--shadow);
  transform: rotate(-.5deg);
}
.mg-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 6px 10px;
  flex:0 0 auto;
}
.mg-topbar .mg-timer{
  background:var(--ink); color:var(--paper);
  padding:6px 14px; border-radius:14px;
  font-size:22px; letter-spacing:.5px;
}
.mg-topbar .mg-close{
  width:38px; height:38px; border-radius:50%; border:2px solid var(--ink);
  background:var(--paper); color:var(--ink);
  font-size:22px; line-height:1; cursor:pointer;
}
.mg-stage{
  position:relative; flex:1 1 auto; width:100%; overflow:hidden;
  background:#8fc7ea;
  border-radius: calc(var(--radius) - 8px);
  border:2px solid var(--ink);
  touch-action:manipulation;
}

.mg-sky, .mg-storm{
  position:absolute; inset:0; background-size:cover; background-position:center bottom;
  transition:opacity 1.4s ease;
  pointer-events:none;
}
.mg-sky{ background-image:url('assets/minigame/sky.png?v=1'); opacity:1; }
.mg-storm{ background-image:url('assets/minigame/storm.png?v=3'); opacity:0; }
#minigameModal.mg-is-storm .mg-sky{ opacity:0; }
#minigameModal.mg-is-storm .mg-storm{ opacity:1; }

.mg-flash{
  position:absolute; inset:0; background:#eaf2ff; opacity:0;
  mix-blend-mode:screen; pointer-events:none; transition:opacity .08s linear;
}
.mg-bolt{
  position:absolute; top:-2%; left:20%; width:44%; max-width:280px;
  opacity:0; pointer-events:none; transform-origin:top center;
  filter: drop-shadow(0 0 12px #cfe0ff) brightness(1.4);
  transition:opacity .12s linear;
}
.mg-rain{ display:none; }

/* Русалка плывёт между волнами */
.mg-mermaid{
  position:absolute; left:0; top:0;
  width:16%; max-width:120px; min-width:56px;
  height:auto; z-index:2; pointer-events:none;
  opacity:0; will-change:transform,opacity,left,top;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  transition: opacity .25s linear;
}
/* Песочный островок под русалкой на камне (появляется ближе к финалу) */
.mg-island{
  position:absolute; right:2%; bottom:22%;
  width:34%; max-width:230px; min-width:130px;
  height:auto; z-index:3; pointer-events:none;
  opacity:0; transition: opacity 1.2s ease-out;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
}
/* Русалка сидит на камне поверх островка */
.mg-mermaid-rock{
  position:absolute; right:9%; bottom:29%;
  width:18%; max-width:130px; min-width:70px;
  height:auto; z-index:4; pointer-events:none;
  opacity:0; transition: opacity 1.2s ease-out;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.45));
}
@media (max-width: 380px){
  .mg-mermaid{ width:20%; }
  .mg-island{ width:40%; bottom:24%; }
  .mg-mermaid-rock{ width:22%; bottom:31%; right:10%; }
}

/* Плашка «включите музыку» */
.mg-music-tip{
  position:absolute; top:44px; left:50%; transform:translateX(-50%);
  z-index:6; max-width:min(92%, 340px);
  padding:6px 12px; border-radius:999px;
  background: rgba(10,18,32,.55);
  border:1px solid rgba(255,255,255,.18);
  color:#eaf3ff; font-size:11.5px; font-weight:600;
  text-align:center; line-height:1.25; letter-spacing:.1px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  pointer-events:auto;
}
.mg-music-tip a{ color:#ffd28a; text-decoration:underline; }
@media (max-width: 380px){
  .mg-music-tip{ font-size:10.5px; padding:5px 10px; top:42px; }
}

/* JS-driven cartoon waves — SVG paths updated every frame, boat rides the crest */
.mg-waves{
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:52%;
  pointer-events:none; z-index:1;
  display:block;
}

/* Compact tap stat + progress */
.mg-progress-wrap{
  position:absolute; top:8px; left:10px; right:10px; z-index:5;
  pointer-events:none;
}
.mg-tapstat{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:10px; font-weight:700; letter-spacing:.3px;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.75);
  margin-bottom:3px;
}
.mg-tapstat-plus{ color:#b8ffcf; }
.mg-tapstat-minus{ color:#ffb3b3; }
.mg-tapstat-sep{ opacity:.7; }
.mg-progress-bar{
  height:8px; background:rgba(0,0,0,.4); border:2px solid var(--ink);
  border-radius:8px; overflow:hidden;
}
.mg-progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, #ffb347, #ff5252);
  transition:width .18s linear;
  box-shadow:0 0 8px rgba(255,120,80,.6) inset;
}


.mg-captain-btn{
  position:absolute; left:50%; top:58%;
  transform:translate(-50%,-50%);
  width:58%; max-width:230px; min-width:140px; aspect-ratio:1/1;
  padding:0; margin:0; border:none; background:transparent;
  cursor:pointer;
  z-index:3;
  will-change: transform;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.3));
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* Расширенная зона касания на тач-устройствах — не меняет визуал */
.mg-captain-btn::before{
  content:""; position:absolute; inset:-14%;
  border-radius:50%;
}
@media (hover:none) and (pointer:coarse){
  .mg-captain-btn::before{ inset:-22%; }
}
.mg-captain{
  width:100%; height:100%; object-fit:contain;
  pointer-events:none;
  user-select:none; -webkit-user-drag:none;
}

/* Реплей + perf-лог в топбаре */
.mg-replay{
  position:absolute; top:6px; right:52px; width:36px; height:36px;
  border-radius:50%; border:2px solid var(--ink);
  background:#fff; color:var(--ink);
  font-size:20px; font-weight:900; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  z-index:11; box-shadow: var(--shadow);
  -webkit-tap-highlight-color:transparent;
}
.mg-replay:active{ transform:scale(.92); }
.mg-music{
  position:absolute; top:6px; right:98px; width:36px; height:36px;
  border-radius:50%; border:2px solid var(--ink);
  background:#fff; color:var(--ink);
  font-size:18px; font-weight:900; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  z-index:11; box-shadow: var(--shadow);
  -webkit-tap-highlight-color:transparent;
}
.mg-music.off{ background:#eee; color:#888; text-decoration:line-through; }
.mg-music:active{ transform:scale(.92); }
.mg-perf{
  position:absolute; top:52px; right:10px;
  font: 600 10px/1.2 ui-monospace, Menlo, Consolas, monospace;
  color:#fff; background:rgba(0,0,0,.55);
  padding:3px 6px; border-radius:6px;
  pointer-events:none; z-index:11;
  display:none;
}

.mg-splash{
  position:absolute; width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,0) 70%);
  pointer-events:none; z-index:4;
  animation: mg-splash 0.7s ease-out forwards;
}
@keyframes mg-splash{
  0%{ transform:scale(.4); opacity:.9; }
  100%{ transform:scale(2.8) translateY(-22px); opacity:0; }
}

.mg-label{
  position:absolute; left:0; right:0; bottom:8px;
  text-align:center; z-index:4;
  color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.75);
  font-size:15px; font-weight:700;
  pointer-events:none;
}

.mg-intro{
  position:absolute; left:12px; right:12px; top:50%;
  transform:translateY(-50%);
  text-align:center; z-index:6;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.6);
  font-size:20px; line-height:1.15; font-weight:900; letter-spacing:.4px;
  padding:14px 12px;
  background:rgba(0,0,0,.35);
  border:2px solid rgba(255,255,255,.2);
  border-radius:14px;
  backdrop-filter: blur(2px);
  pointer-events:none;
  opacity:0;
  animation: mg-intro-in .4s ease-out forwards;
}
.mg-intro.mg-intro-out{
  animation: mg-intro-out .6s ease-in forwards;
}
@keyframes mg-intro-in{
  from{ opacity:0; transform:translateY(-50%) scale(.92); }
  to  { opacity:1; transform:translateY(-50%) scale(1); }
}
@keyframes mg-intro-out{
  from{ opacity:1; transform:translateY(-50%) scale(1); }
  to  { opacity:0; transform:translateY(-50%) scale(1.04); }
}
@media (max-width: 380px){
  .mg-intro{ font-size:17px; padding:12px 10px; }
}

.mg-end{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center; z-index:10;
  border-radius: calc(var(--radius) - 8px);
  padding:16px;
}
.mg-end-card{
  background:var(--paper); color:var(--ink);
  padding:22px 22px 16px; border-radius:20px;
  min-width:220px; max-width:100%; text-align:center;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:10px;
  border:3px solid var(--ink);
  animation: mg-end-in .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes mg-end-in{
  from{ transform: scale(.85) rotate(-2deg); opacity:0; }
  to  { transform: scale(1) rotate(0); opacity:1; }
}
.mg-end-card h3{ margin:0; font-size:22px; }
.mg-end-desc{ font-size:15px; color:var(--ink-soft); }
.mg-end-card .btn.ghost{ background:transparent; }

/* ==== Mea Maxima disclaimer ==== */
.mea-disclaimer{
  background: #fff4d6;
  border: 1px solid #e6c67b;
  color: #5a3208;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 13px;
  margin: 6px 0 10px;
  text-align: center;
}

/* ==== Box scratch minigame ==== */
.box-scratch-card{ max-width: 380px; }
.box-sub{ font-size: 13px; color: var(--ink-soft, #5a3208); text-align:center; margin-bottom: 10px; }
.box-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #fff8ea, #ffe9c9);
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #6b3d10;
  touch-action: none;
  user-select: none;
}
.box-reveal{
  position: absolute; inset: 8%;
  width: 84%; height: 84%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.9);
  transition: opacity 700ms ease, transform 900ms ease;
  pointer-events: none;
}
.box-reveal.shown{ opacity: 1; transform: scale(1); }
.box-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.box-progress-bar{
  height: 10px; background:#f0dcb0; border-radius: 999px;
  margin: 10px 0; overflow: hidden; border:1px solid #c99a58;
}
.box-progress-fill{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #f2b64a, #e07a2b);
  transition: width 200ms ease;
}
.box-end{
  text-align: center;
  padding: 12px 4px 6px;
}
.box-end h3{ margin: 0 0 6px; }

/* ==== Bath minigame (Ра в Ванной) ==== */
.bath-scratch-card{ max-width: 380px; }
.bath-sub{ font-size: 13px; color: var(--ink-soft, #5a3208); text-align:center; margin-bottom: 10px; }
.bath-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #dff2ff 0%, #b6dcf5 60%, #8fc4e8 100%);
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #3b6c8f;
  touch-action: none;
  user-select: none;
  cursor: none;
}
.bath-bg{
  position: absolute; inset: 5%;
  width: 90%; height: 90%;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 900ms ease;
}
.bath-reveal{
  position: absolute; inset: 8%;
  width: 84%; height: 84%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.85);
  transition: opacity 800ms ease, transform 900ms ease;
  pointer-events: none;
}
.bath-reveal.shown{ opacity: 1; transform: scale(1); }
.bath-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
  cursor: none;
}
.bath-sponge{
  position: absolute;
  width: 80px; height: auto;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.25));
  transition: opacity 120ms ease;
}
.bath-progress-bar{
  height: 10px; background:#dbeaf5; border-radius: 999px;
  margin: 10px 0; overflow: hidden; border:1px solid #6ea3c9;
}
.bath-progress-fill{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #7fd0ff, #2b8fd6);
  transition: width 200ms ease;
}
.bath-end{ text-align:center; padding: 12px 4px 6px; }
.bath-end h3{ margin: 0 0 6px; }
@media (max-width: 380px){
  .bath-sponge{ width: 64px; }
}


/* ==== Puzzle minigame ==== */
.puzzle-card{ max-width: 420px; }
.puzzle-sub{ font-size: 13px; color: var(--ink-soft, #5a3208); text-align:center; margin-bottom: 10px; }
.puzzle-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #fff8ea, #ffe9c9);
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #6b3d10;
  touch-action: manipulation;
  user-select: none;
}
.puzzle-grid{
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  padding: 2px;
  background: #6b3d10;
  z-index: 2;
}
.puzzle-piece{
  background-size: 400% 400%;
  background-repeat: no-repeat;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.puzzle-piece.movable:active{ transform: scale(.96); }
.puzzle-piece.empty{
  background: #2a1a08;
  cursor: default;
  box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}
.puzzle-reveal{
  position: absolute; inset: 4%;
  width: 92%; height: 92%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.94);
  transition: opacity 600ms ease, transform 700ms ease;
  pointer-events: none;
  z-index: 1;
}
.puzzle-reveal.shown{ opacity: 1; transform: scale(1); z-index: 5; }
.puzzle-info{
  display: flex; justify-content: center;
  font-size: 13px; color: var(--ink-soft, #5a3208);
  margin: 8px 0 6px;
}
.puzzle-actions{
  display: flex; gap: 8px; justify-content: center; margin-top: 8px;
}
.puzzle-actions .btn{ flex: 1; max-width: 160px; }
.angel-morse{
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  letter-spacing: 2px;
  font-size: 14px;
  color: #3a2108;
  background: #fff8ec;
  border: 2px dashed #c99a58;
  border-radius: 10px;
  padding: 10px 8px;
  margin: 6px 0 10px;
  word-break: break-all;
}
.name .ra-red{ color: #d62828; }

/* Tap/selection hardening (Telegram in-app browser) */
html, body, #app, .card, .card *, .shop-search, .shop-search *, .nav-btn, .btn, img, .cat-wrap, .cat-wrap * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
img { -webkit-user-drag: none; }
.riddle-input, input[type="text"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* Artists section in settings */
.artists{
  margin: 10px 0 6px;
  border: 2px dashed rgba(107,61,16,.35);
  border-radius: 14px;
  background: #fffaf1;
  overflow: hidden;
}
.artists > summary{
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 800;
  font-family: 'AlwaysAngry', sans-serif;
  font-size: 18px;
  color: var(--ink);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.artists > summary::-webkit-details-marker{ display:none }
.artists > summary::after{ content:'▾'; font-size:14px; transition: transform .2s }
.artists[open] > summary::after{ transform: rotate(180deg) }
.artists-list{
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 4px 12px 12px;
  max-height: 42vh;
  overflow-y: auto;
}
.artist-row{
  display: flex; flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
  background: #fff;
  border: 1.5px solid rgba(107,61,16,.18);
  border-radius: 10px;
}
.artist-row b{ font-size: 14px; color: var(--ink); }
.artist-row span{ font-size: 12px; color: rgba(60,30,0,.7); line-height: 1.25 }

/* ===== Artists collapsible (JS-toggled) ===== */
.artists-block{
  margin: 10px 0 6px;
  border: 2px dashed rgba(107,61,16,.35);
  border-radius: 14px;
  background: #fffaf1;
  overflow: visible;
}
.artists-title{
  padding: 10px 14px 4px;
  font-weight: 800;
  font-family: 'AlwaysAngry', sans-serif;
  font-size: 18px;
  color: var(--ink);
}
.artists-toggle{
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 800;
  font-family: 'AlwaysAngry', sans-serif;
  font-size: 18px;
  color: var(--ink);
  background: transparent;
  border: none;
  display: flex; align-items: center; justify-content: space-between;
}
.artists-toggle .chev{ font-size: 14px; transition: transform .2s; }
.artists-toggle.open .chev{ transform: rotate(180deg); }
.artists-block .artists-list{
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 4px 12px 12px;
  max-height: none;
  overflow: visible;
}

.streak-restore{
  margin-top: 10px;
  padding: 10px 12px;
  border: 2px dashed rgba(107,61,16,.35);
  border-radius: 12px;
  background: #fffaf1;
  display: flex; flex-direction: column; gap: 8px;
}
.streak-restore-info{
  font-size: 13px; line-height: 1.35; color: rgba(60,30,0,.8);
}

/* ===== Save export/import ===== */
.save-io{
  margin: 10px 0 6px;
  padding: 10px 12px;
  border: 2px dashed rgba(107,61,16,.35);
  border-radius: 14px;
  background: #fffaf1;
}
.save-io h4{
  margin: 0 0 8px;
  font-family: 'AlwaysAngry', sans-serif;
  font-size: 16px;
  color: var(--ink);
}
.save-io-text{
  width: 100%;
  min-height: 60px;
  max-height: 120px;
  padding: 8px 10px;
  border: 1.5px solid rgba(107,61,16,.3);
  border-radius: 10px;
  font-size: 12px;
  font-family: monospace;
  resize: vertical;
  box-sizing: border-box;
  background: #fff;
  color: var(--ink);
}
.save-io-actions{
  display: flex; gap: 8px; margin-top: 8px;
}
.save-io-actions .btn{ flex: 1; }
.save-io-hint{
  margin-top: 6px;
  font-size: 11px;
  color: rgba(60,30,0,.65);
  line-height: 1.3;
}

/* ===== Backgrounds section in shop ===== */
.bg-section-header{
  grid-column: 1 / -1;
  margin: 14px 4px 4px;
  padding: 6px 12px;
  font-family: 'AlwaysAngry', sans-serif;
  font-size: 20px;
  color: var(--ink);
  border-bottom: 2px dashed rgba(107,61,16,.35);
}
.bg-card .bg-thumb{
  width: 100%;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  border: 2px solid var(--ink);
  display: block;
}

/* ==== Flappy Пироберд minigame ==== */
#flappyModal .modal-card.flappy-card{
  max-width: 420px; width: 100%;
  padding: 12px 12px 14px;
  transform: rotate(-.4deg);
  display:flex; flex-direction:column; gap:10px;
}
.flappy-topbar{
  display:flex; align-items:center; gap:8px;
  flex-wrap: nowrap;
}
.flappy-score, .flappy-best{
  flex:1 1 0;
  background:var(--paper-2);
  border:2px solid var(--ink);
  border-radius:14px;
  padding:6px 10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1;
  min-width:0;
}
.flappy-score-label, .flappy-best-label{
  font-size:10px; color:var(--ink-soft); letter-spacing:.5px;
}
.flappy-score b, .flappy-best b{
  font-size:22px; color:var(--ink); margin-top:2px;
}
.flappy-btn-icon{
  width:38px; height:38px; border-radius:50%;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink);
  font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  font-family:'AlwaysAngry',system-ui,sans-serif;
}
.flappy-btn-icon:active{ transform:scale(.94); }
.flappy-btn-icon .pause-ico{
  display:inline-block; position:relative;
  width:14px; height:16px;
}
.flappy-btn-icon .pause-ico::before,
.flappy-btn-icon .pause-ico::after{
  content:""; position:absolute; top:0; bottom:0; width:4px;
  background:var(--ink); border-radius:2px;
}
.flappy-btn-icon .pause-ico::before{ left:1px; }
.flappy-btn-icon .pause-ico::after{ right:1px; }
.flappy-stage{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 4;
  border-radius:16px;
  overflow:hidden;
  border:2.5px solid var(--ink);
  background:#8fc7ea;
  touch-action:none;
  user-select:none;
}
.flappy-sky, .flappy-storm{
  position:absolute; inset:0;
  background-size:cover; background-position:center bottom;
  transition:opacity 1.2s ease;
  pointer-events:none;
}
.flappy-sky{ background-image:url('assets/minigame/sky.png?v=1'); opacity:1; }
.flappy-storm{ background-image:url('assets/minigame/storm.png?v=3'); opacity:0; }
#flappyModal.flappy-storm-on .flappy-sky{ opacity:0; }
#flappyModal.flappy-storm-on .flappy-storm{ opacity:1; }
.flappy-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  touch-action:none;
  display:block;
}
.flappy-hint{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background: rgba(255,250,240,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.flappy-hint[hidden]{ display:none; }
.flappy-hint-card{
  background:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:18px;
  padding:14px 16px 16px;
  box-shadow: var(--shadow, 0 6px 0 rgba(0,0,0,.15));
  display:flex; flex-direction:column; gap:10px; align-items:center;
  text-align:center;
  max-width:280px;
  transform: rotate(-.5deg);
}
.flappy-hint-title{
  font-size:22px; color:var(--ink); font-weight:700;
}
.flappy-hint-desc{
  font-size:14px; color:var(--ink-soft); line-height:1.35;
}
.flappy-jump{
  width:100%;
  min-height:74px;
  border-radius:20px;
  border:2.5px solid var(--ink);
  background: linear-gradient(180deg, #ffd58a, #f2a13a);
  color:var(--ink);
  font-family:'AlwaysAngry',system-ui,sans-serif;
  font-size:24px; font-weight:700; letter-spacing:1px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow: 0 4px 0 var(--ink);
  cursor:pointer;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.flappy-jump:active{ transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.flappy-jump-ico{ font-size:26px; }