/* Нефритовый маджонг — оформление */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  color: #fff7df;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  background-color: #0e4633;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1.5'%3E%3Cpath d='M32 6c8 0 8 10 0 10s-8 10 0 10 8 10 0 10'/%3E%3Ccircle cx='0' cy='0' r='12'/%3E%3Ccircle cx='64' cy='0' r='12'/%3E%3Ccircle cx='0' cy='64' r='12'/%3E%3Ccircle cx='64' cy='64' r='12'/%3E%3Cpath d='M20 44h24M32 44v14'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 30%, #23805d 0%, #15603f 45%, #0b3a29 100%);
  background-attachment: fixed;
}
#app { position: relative; height: 100vh; height: 100dvh; max-width: 560px; margin: 0 auto; overflow: hidden; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; }
.screen.active { display: flex; }
button { font-family: inherit; cursor: pointer; }

/* ---------- кнопки ---------- */
.btn-gold {
  border: 0; border-radius: 999px; padding: 12px 28px; font-size: 18px; font-weight: 800; color: #4a2508;
  background: linear-gradient(180deg, #ffe89a 0%, #f2b93b 50%, #d28a17 100%);
  box-shadow: 0 4px 0 #8a4f0c, 0 8px 16px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.6);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a4f0c, 0 3px 8px rgba(0,0,0,.35); }
.btn-gold.big { font-size: 24px; padding: 14px 64px; margin: 6px auto 0; display: block; }
.btn-brown {
  border: 0; border-radius: 999px; padding: 11px 22px; font-size: 16px; font-weight: 700; color: #ffe9b8;
  background: linear-gradient(180deg, #a5622c, #6e3a14); box-shadow: 0 3px 0 #3e1f08, 0 6px 12px rgba(0,0,0,.3);
}
.link { background: none; border: 0; color: #cfe8d8; text-decoration: underline; font-size: 14px; padding: 8px; opacity: .8; }
.round {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid #f6c35a; color: #ffe7b0; padding: 9px;
  background: radial-gradient(circle at 35% 30%, #b8742f, #7a3f12 70%);
  box-shadow: 0 3px 0 #3e1f08, 0 5px 10px rgba(0,0,0,.35);
}
.round svg { width: 100%; height: 100%; display: block; }

/* ---------- главный экран ---------- */
#menu { align-items: center; padding: 18px 16px; overflow-y: auto; }
.logo { text-align: center; margin-top: 8px; }
.logo h1 { margin: 6px 0 0; font-size: 34px; line-height: 1.05; color: #ffe08a; letter-spacing: .5px;
  text-shadow: 0 2px 0 #7a4a0c, 0 4px 12px rgba(0,0,0,.5); font-weight: 900; }
.logo h1 span { font-size: 44px; color: #fff3cf; }
.subtitle { margin: 6px 0 14px; color: #cfe8d8; font-size: 15px; }
.logo-tiles { display: flex; justify-content: center; gap: 6px; height: 74px; margin-top: 6px; }
.logo-tiles .mini { position: relative; width: 50px; height: 62px; }
.logo-tiles .mini:nth-child(1) { transform: rotate(-12deg) translateY(8px); }
.logo-tiles .mini:nth-child(2) { transform: rotate(-4deg); }
.logo-tiles .mini:nth-child(3) { transform: rotate(4deg); }
.logo-tiles .mini:nth-child(4) { transform: rotate(12deg) translateY(8px); }
.levels-title { margin: 22px 0 10px; font-weight: 800; font-size: 18px; color: #ffe08a; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: 100%; max-width: 420px; padding-top: 8px; }
.level-btn.daily { outline: 3px solid #ffd54a; outline-offset: 1px; }
.level-btn.daily::before { content: 'дня'; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); background: #f2b93b; color: #4a2508; font-size: 9px; font-weight: 800; line-height: 13px; border-radius: 6px; padding: 0 4px; z-index: 2; }
.day-hint { margin: 10px 0 0; color: #ffe08a; font-size: 14px; font-weight: 800; text-align: center; text-shadow: 0 2px 3px rgba(0,0,0,.4); }
.level-btn {
  position: relative; aspect-ratio: 1 / 1.12; border: 0; border-radius: 14px; padding: 4px 0 0;
  background: linear-gradient(180deg, #fffaf0, #efe2c2); color: #6a3a10; font-size: 22px; font-weight: 900;
  box-shadow: 0 4px 0 #b9a271, 0 7px 0 #2c7a4c, 0 9px 14px rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.level-btn .st { font-size: 12px; letter-spacing: 1px; color: #c9b58a; margin-top: 2px; }
.level-btn .st b { color: #f2a91c; font-weight: 400; }
.level-btn.locked { background: linear-gradient(180deg, #9fb3a8, #7f958a); color: #4b5e55; box-shadow: 0 4px 0 #56695f, 0 9px 14px rgba(0,0,0,.3); }
.level-btn.locked::after { content: '🔒'; position: absolute; font-size: 14px; bottom: 7px; filter: grayscale(.3); }
.level-btn.current { outline: 3px solid #ffd54a; outline-offset: 2px; }
.menu-footer { margin-top: auto; padding-top: 18px; display: flex; gap: 16px; }
.mode-box { margin-top: 18px; text-align: center; }
.mode-title { font-weight: 800; font-size: 16px; color: #ffe08a; text-shadow: 0 2px 4px rgba(0,0,0,.4); margin-bottom: 8px; }
.mode-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.25); box-shadow: inset 0 2px 4px rgba(0,0,0,.4); }
.mode-btn { border: 0; border-radius: 999px; padding: 8px 18px; font-size: 15px; font-weight: 700; color: #cfe8d8; background: transparent; }
.mode-btn[aria-pressed="true"] { color: #4a2508; background: linear-gradient(180deg, #ffe89a 0%, #f2b93b 50%, #d28a17 100%); box-shadow: 0 2px 0 #8a4f0c; }
.mode-note { margin: 8px 0 0; font-size: 13px; color: #cfe8d8; opacity: .85; }

/* ---------- экран игры ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 0; flex: 0 0 auto; position: relative; z-index: 20000; }
.info { text-align: center; }
.lvl-name { font-weight: 800; font-size: 17px; color: #ffe08a; text-shadow: 0 2px 3px rgba(0,0,0,.45); }
.score { font-size: 14px; color: #e5f3ea; margin-top: 2px; }
.score b { color: #ffd54a; font-size: 16px; }
.tray-wrap { flex: 0 0 auto; display: flex; justify-content: center; padding: 10px 0 6px; }
.tray {
  display: flex; gap: 6px; padding: 8px; border-radius: 14px; width: min(78vw, 330px);
  background: linear-gradient(180deg, #8a4b1c, #5d2d0c);
  box-shadow: inset 0 2px 0 rgba(255,220,160,.35), 0 0 0 3px #c98a3a, 0 0 0 5px #5a2c0a, 0 8px 18px rgba(0,0,0,.45);
}
.slot { flex: 1; aspect-ratio: 0.82; border-radius: 9px; background: #3f1d07; box-shadow: inset 0 3px 6px rgba(0,0,0,.6); }
.tray.danger { animation: danger .6s ease-in-out infinite alternate; }
@keyframes danger { to { box-shadow: inset 0 2px 0 rgba(255,220,160,.35), 0 0 0 3px #ff5a3a, 0 0 0 5px #5a2c0a, 0 0 22px #ff5a3a; } }
.board { flex: 1 1 auto; margin: 4px 8px; position: relative; }
.boosters { flex: 0 0 auto; display: flex; justify-content: space-around; padding: 6px 10px calc(14px + env(safe-area-inset-bottom)); position: relative; z-index: 20000; }
.booster {
  position: relative; width: 64px; height: 64px; border-radius: 50%; padding: 14px; border: 3px solid #f6c35a; color: #fff1c9;
  background: radial-gradient(circle at 35% 30%, #c27a32, #7a3f12 70%);
  box-shadow: 0 4px 0 #3e1f08, 0 8px 14px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.25);
}
.booster svg { width: 100%; height: 100%; display: block; }
.booster:active { transform: translateY(3px); }
.booster.empty { filter: grayscale(.85) brightness(.8); }
.badge {
  position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; border-radius: 12px; padding: 0 6px;
  background: #d8342b; color: #fff; font-size: 14px; font-weight: 800; line-height: 24px; text-align: center;
  border: 2px solid #fff3d6; box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.cap { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); font-size: 11px; color: #d7eadf; white-space: nowrap; }

/* ---------- плитки ---------- */
.tile-layer, .fx-layer { position: absolute; inset: 0; pointer-events: none; }
.fx-layer { z-index: 30000; }
.tile {
  position: absolute; left: 0; top: 0; width: var(--tw); height: var(--th); transform-origin: 0 0; pointer-events: auto;
  transition: transform .26s cubic-bezier(.25,.8,.3,1); will-change: transform; cursor: pointer;
}
.no-anim .tile, .no-anim .tile .body { transition: none !important; }
.tile .body {
  position: absolute; inset: 0; border-radius: calc(var(--tw) * .15);
  background: linear-gradient(155deg, #fffef8 0%, #f8f0db 60%, #ecdfbd 100%);
  box-shadow:
    inset 0 0 0 1px rgba(140,110,50,.35), inset 2px 2px 0 rgba(255,255,255,.95),
    calc(var(--d) * .55) var(--d) 0 #d9c590,
    calc(var(--d) * .55) calc(var(--d) * 1.75) 0 #2b7a4b,
    calc(var(--d) * .55 + 1px) calc(var(--d) * 1.75 + 3px) 6px rgba(0,0,0,.45);
  transition: filter .2s, opacity .2s;
}
.tile .face { position: absolute; inset: 7% 7% 5%; }
.tile .face svg { width: 100%; height: 100%; display: block; }
.tile .face img, .mini .face img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.tile.blocked .body { filter: brightness(.66) saturate(.75); }
.tile.hint .body { animation: hint .7s ease-in-out infinite alternate; }
@keyframes hint { from { filter: drop-shadow(0 0 2px #ffe27a); } to { filter: drop-shadow(0 0 10px #ffd23a) brightness(1.08); } }
.tile.shake .body { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.tile.pop .body { animation: pop .32s ease-in forwards; }
@keyframes pop { 0% { transform: scale(1); filter: brightness(1.3); } 45% { transform: scale(1.25); filter: brightness(1.5) drop-shadow(0 0 10px #fff2a8); } 100% { transform: scale(.2); opacity: 0; } }
.tile.flip .body { animation: flip .5s ease-in-out; }
@keyframes flip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(.9); } 100% { transform: rotateY(0); } }
.tile.appear .body { animation: appear .35s ease-out; }
@keyframes appear { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.mini .body { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(155deg, #fffef8, #ecdfbd);
  box-shadow: inset 2px 2px 0 #fff, 3px 5px 0 #d9c590, 3px 9px 0 #2b7a4b, 4px 12px 10px rgba(0,0,0,.4); }
.mini .face { position: absolute; inset: 7%; } .mini .face svg { width: 100%; height: 100%; }

/* ---------- эффекты ---------- */
.floater { position: absolute; font-weight: 900; font-size: 24px; color: #ffe27a; text-shadow: 0 2px 0 #7a4a0c, 0 0 10px rgba(0,0,0,.5);
  animation: floatUp 1s ease-out forwards; transform: translate(-50%, 0); }
@keyframes floatUp { to { transform: translate(-50%, -48px); opacity: 0; } }
.spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffe27a; box-shadow: 0 0 8px #ffd23a;
  animation: spark .55s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--sx), var(--sy)) scale(.2); opacity: 0; } }

/* ---------- окна ---------- */
.overlay { position: absolute; inset: 0; z-index: 40000; background: rgba(4,25,17,.62); display: flex; align-items: center; justify-content: center; padding: 20px; }
.overlay.hidden { display: none; }
.dialog {
  width: min(92%, 360px); border-radius: 22px; padding: 22px 18px 20px; text-align: center; color: #5a3110;
  background: linear-gradient(180deg, #fff8e6, #f1dfb4); border: 4px solid #c98a3a;
  box-shadow: 0 0 0 4px #6e3a14, 0 18px 40px rgba(0,0,0,.55); animation: dlgIn .35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes dlgIn { from { transform: scale(.7); opacity: 0; } }
.dialog h2 { margin: 0 0 6px; font-size: 28px; color: #8a3f0a; }
.dialog p { margin: 8px 0 16px; font-size: 16px; line-height: 1.4; }
.stars { font-size: 44px; letter-spacing: 6px; color: #d9cfb6; min-height: 0; }
.stars b { color: #f2a91c; font-weight: 400; text-shadow: 0 2px 0 #9a5a0a; display: inline-block; animation: starIn .5s backwards; }
.stars b:nth-child(2) { animation-delay: .15s; } .stars b:nth-child(3) { animation-delay: .3s; }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
.dlg-buttons { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.dlg-buttons button { min-width: 220px; }
.rules { text-align: left; font-size: 15px; }
.rules li { margin: 6px 0; }
.toast { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%) translateY(20px); z-index: 45000;
  background: rgba(40,20,5,.92); color: #ffe9b8; padding: 10px 16px; border-radius: 12px; font-size: 15px; width: max-content; max-width: 88%;
  text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; border: 1px solid #c98a3a; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-height: 640px) { .booster { width: 54px; height: 54px; padding: 11px; } .tray { width: min(70vw, 280px); } .logo h1 span { font-size: 36px; } }