/* Шрифты лежат в проекте (fonts/), лицензия SIL Open Font License */
@font-face { font-family: 'Lobster'; src: url('../fonts/lobster-cyrillic.woff2') format('woff2'); font-weight: 400; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Lobster'; src: url('../fonts/lobster-latin.woff2') format('woff2'); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito-cyrillic.woff2') format('woff2'); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Nunito'; src: url('../fonts/nunito-latin.woff2') format('woff2'); font-weight: 200 1000; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg1: #2b1055; --bgm: #6a2c8f; --bg2: #d77fd0;
  --panel: rgba(20, 10, 50, .55);
  --gold: #ffcc33; --text: #fff;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: linear-gradient(160deg, var(--bg1), var(--bgm) 50%, var(--bg2)) fixed;
  transition: background .4s;
  color: var(--text); font: 700 15px/1.3 "Nunito", "Segoe UI", sans-serif;
  overflow: hidden; user-select: none;
}
#app { max-width: 560px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; padding: 8px 12px; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }

#topbar { display: flex; gap: 8px; align-items: center; }
.pill { background: var(--panel); border-radius: 20px; padding: 6px 12px; font-weight: bold; display: flex; align-items: center; gap: 6px; }
.pill small { opacity: .75; font-weight: normal; font-size: 11px; }
.plus { background: #3bc14a; border-radius: 50%; width: 22px; height: 22px; font-weight: bold; line-height: 22px; padding: 0; }
.icon-btn { background: var(--panel); border-radius: 12px; padding: 6px 10px; font-size: 18px; margin-left: auto; }
#hud .icon-btn { margin-left: 0; }

.screen { display: none; flex: 1; flex-direction: column; min-height: 0; }
.screen.active { display: flex; }

.logo { text-align: center; font-size: 42px; margin: 18px 0 4px; color: var(--gold);
  text-shadow: 0 3px 0 #b36b00, 0 6px 14px rgba(0,0,0,.5); letter-spacing: 1px; }
.hello { text-align: center; margin: 0 0 12px; opacity: .9; }
#mapView.levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; overflow-y: auto; padding: 6px; flex: 1; align-content: start; }
.lvl { aspect-ratio: 1; border-radius: 16px; background: linear-gradient(#ffd966, #f0a500); color: #5a3000;
  font-size: 22px; font-weight: bold; box-shadow: 0 4px 0 #a86a00; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lvl .stars { font-size: 10px; letter-spacing: -1px; }
.lvl.locked { background: #5d5577; color: #aaa; box-shadow: 0 4px 0 #3b3550; cursor: default; }
.lvl.current { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.menu-actions { display: flex; gap: 10px; padding: 10px 0; }
.menu-actions .btn { flex: 1; }

.btn { background: linear-gradient(#5fd068, #2e9e3a); border-radius: 14px; padding: 12px 16px; font-weight: bold;
  box-shadow: 0 4px 0 #1d6b26; font-size: 16px; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1d6b26; }
.btn.gold { background: linear-gradient(#ffd966, #f0a500); color: #5a3000; box-shadow: 0 4px 0 #a86a00; }
.btn.blue { background: linear-gradient(#6fb3ff, #2f74d0); box-shadow: 0 4px 0 #1d4b8a; }
.btn.gray { background: #6b6385; box-shadow: 0 4px 0 #403a55; }
.btn[disabled] { opacity: .5; }

#hud { display: flex; gap: 8px; align-items: stretch; margin-top: 8px; }
.hud-box { flex: 1; background: var(--panel); border-radius: 12px; text-align: center; padding: 4px; }
.hud-box small { display: block; opacity: .7; font-size: 11px; }
.hud-box b { font-size: 20px; }
#goals { display: flex; justify-content: center; gap: 14px; margin: 8px 0 4px; min-height: 34px; }
.goal { background: var(--panel); border-radius: 18px; padding: 4px 12px 4px 4px; display: flex; align-items: center; gap: 6px; font-weight: bold; }
.goal canvas { width: 26px; height: 26px; }
.goal.done { color: #7dff8a; }
#progress { position: relative; height: 8px; background: var(--panel); border-radius: 4px; margin: 4px 0 8px; overflow: hidden; }
#progressFill { height: 100%; width: 0; background: linear-gradient(90deg, #ffcc33, #ff7b00); transition: width .3s; }
#progress i { position: absolute; top: 0; width: 2px; height: 100%; background: rgba(255,255,255,.5); }
#board { width: 100%; touch-action: none; border-radius: 14px; }
#boosters { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.booster { position: relative; background: var(--panel); border-radius: 14px; width: 84px; padding: 6px 0; font-size: 22px; display: flex; flex-direction: column; align-items: center; }
.booster small { font-size: 10px; opacity: .8; }
.booster.active { outline: 3px solid var(--gold); }
.booster .cnt { position: absolute; top: -6px; right: -6px; background: #e33; border-radius: 10px; font-size: 12px; min-width: 20px; padding: 1px 5px; font-weight: bold; }

#modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px; }
#modal.hidden, #toast.hidden { display: none; }
.modal-card { position: relative; background: linear-gradient(#4a2a85, #2b1655); border: 3px solid #8c6ad8; border-radius: 22px;
  padding: 20px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; text-align: center; animation: pop .25s; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.modal-card h2 { margin: 0 0 10px; color: var(--gold); }
.close { position: absolute; top: 8px; right: 10px; background: none; font-size: 20px; opacity: .7; }
.modal-card .btn { display: block; width: 100%; margin-top: 10px; }
.big-stars { font-size: 44px; letter-spacing: 4px; }
.shop-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border-radius: 14px; padding: 10px; margin: 8px 0; text-align: left; }
.shop-item .ico { font-size: 30px; width: 40px; text-align: center; }
.shop-item .info { flex: 1; }
.shop-item .info small { display: block; opacity: .7; }
.shop-item .btn { width: auto; margin: 0; padding: 8px 12px; font-size: 14px; white-space: nowrap; }
.shop-item.hit { border: 2px solid var(--gold); }
.badge { background: #e33; border-radius: 6px; font-size: 10px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
.tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.tabs button { flex: 1; background: rgba(255,255,255,.1); padding: 8px; border-radius: 10px; }
.tabs button.on { background: var(--gold); color: #5a3000; font-weight: bold; }

#toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); background: rgba(0,0,0,.8); padding: 10px 18px; border-radius: 20px; z-index: 20; }

/* ---- карта миров ---- */
#mapTitle { margin: 4px 0 6px; display: flex; align-items: center; gap: 8px; font-size: 18px; }
#mapTitle .back { margin: 0; font-size: 16px; }
#mapView { flex: 1; overflow-y: auto; min-height: 0; }
#mapView.worlds { display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.world { display: flex; align-items: center; gap: 12px; border-radius: 18px; padding: 12px; text-align: left;
  box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.15); }
.world.current { box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 0 3px var(--gold); }
.world.locked { filter: grayscale(.85) brightness(.6); cursor: default; }
.wemoji { font-size: 40px; width: 52px; text-align: center; filter: drop-shadow(0 3px 3px rgba(0,0,0,.4)); }
.winfo { flex: 1; display: flex; flex-direction: column; gap: 3px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.winfo b { font-size: 17px; }
.winfo small { opacity: .9; font-size: 12px; }
.wbar { height: 7px; border-radius: 4px; background: rgba(0,0,0,.35); overflow: hidden; }
.wbar i { display: block; height: 100%; background: linear-gradient(90deg, #ffe066, #ff9f1c); }
.lvl { position: relative; }
.lvl .mark { position: absolute; top: -6px; left: -4px; font-size: 16px; }
.lvl .feat { position: absolute; top: -6px; right: -4px; font-size: 12px; }
.lvl.hard:not(.locked) { background: linear-gradient(#ff8a80, #d32f2f); color: #fff; box-shadow: 0 4px 0 #8e1b1b; }
.lvl.boss:not(.locked) { background: linear-gradient(#e1b3ff, #7b1fa2); color: #fff; box-shadow: 0 4px 0 #4a126b; }
.chest { grid-column: 1 / -1; text-align: center; background: var(--panel); border-radius: 14px; padding: 10px; margin-top: 4px; }
.chest.got { opacity: .7; }
#hudTag { text-align: center; font-size: 13px; margin-top: 6px; opacity: .9; }
#hudTag.hard { color: #ff8a80; font-weight: bold; }
#hudTag.boss { color: #e1b3ff; font-weight: bold; }
.gi { font-size: 22px; line-height: 26px; width: 26px; text-align: center; display: inline-block; }

/* ---- ежедневные награды ---- */
#topbar .shop-btn { margin-left: 0; }
.streak { margin: 0 0 8px; }
.cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.day { background: rgba(255,255,255,.08); border-radius: 12px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 84px; justify-content: center; }
.day small { font-size: 10px; opacity: .8; }
.day .dico { font-size: 24px; }
.day .drew { font-size: 10px; line-height: 1.2; }
.day.big { grid-column: span 2; background: linear-gradient(135deg, rgba(255,204,51,.3), rgba(255,123,0,.3)); }
.day.big .dico { font-size: 32px; }
.day.got { opacity: .5; }
.day.today { outline: 3px solid var(--gold); background: rgba(255,204,51,.2); animation: pulse 1.2s infinite; }
.ms { font-size: 12px; background: rgba(0,0,0,.25); border-radius: 10px; padding: 6px; margin: 8px 0 0; }

/* ---- иконки (js/icons.js) ---- */
.i { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -.28em; flex: none; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.pill .i { font-size: 18px; }
.plus { background: none; width: 26px; height: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.plus .i { font-size: 20px; }
.icon-btn { display: flex; align-items: center; justify-content: center; }
.icon-btn .i { font-size: 22px; }
.icon-btn:active, .booster:active, .plus:active { transform: scale(.92); }
.booster { gap: 2px; }
.booster .i { font-size: 30px; }
.booster .cnt, .booster small { font-size: 11px; }
.close { opacity: 1; line-height: 1; }
.close .i { font-size: 18px; }
.btn .i { font-size: 1.1em; }
.shop-item .ico .i { font-size: 30px; }
.lvl .stars { display: flex; gap: 1px; margin-top: 1px; }
.lvl .stars:not(:empty) { background: rgba(70,35,0,.55); border-radius: 8px; padding: 1px 4px; }
.lvl .stars .i { font-size: 10px; filter: none; }
.lvl .mark .i { font-size: 18px; }
.lvl.locked .i { font-size: 22px; filter: grayscale(.4) brightness(.85); }
.drew .i { font-size: 11px; vertical-align: -.25em; }
.gi .i { font-size: 21px; vertical-align: -.2em; }
.goal b .i { font-size: 17px; }

/* ---- тематический фон (js/scenes.js) ---- */
#bg, #bg canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
#bg { z-index: 0; pointer-events: none; }
#bg canvas { opacity: 0; transition: opacity .7s; }
#bg canvas.on, #bg canvas.fx { opacity: 1; }
#app { position: relative; z-index: 1; }
.hello, #mapTitle, #hudTag { text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.45); }
#hudTag { width: fit-content; margin: 6px auto 0; padding: 1px 12px; border-radius: 12px; background: var(--panel); }
.hello { width: fit-content; margin-left: auto; margin-right: auto; padding: 1px 12px; border-radius: 12px; background: var(--panel); }

/* ---- настройки ---- */
#menu { position: relative; }
.menu-settings { position: absolute; top: 68px; right: 0; margin: 0; }
.vol { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.08); border-radius: 14px; padding: 12px; margin: 8px 0; text-align: left; font-weight: 800; }
.vol span { width: 110px; flex: none; }
.vol input { flex: 1; min-width: 0; accent-color: var(--gold); height: 24px; }

/* ---- типографика ---- */
.logo, .modal-card h2, #mapTitle { font-family: 'Lobster', 'Nunito', sans-serif; font-weight: 400; letter-spacing: .3px; }
.logo { font-size: 56px; line-height: 1.05; margin-bottom: 10px; }
#mapView, .modal-card { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
.modal-card h2 { font-size: 30px; line-height: 1.15; }
#mapTitle { font-size: 24px; }
b, .btn, .pill, .lvl, .goal, .tabs button.on { font-weight: 900; }
.hud-box b { font-size: 22px; }
.hud-box small, .booster small, .winfo small, .day small { font-weight: 800; }
.winfo b { font-size: 18px; }
.lvl { font-size: 24px; }

/* ссылка на политику конфиденциальности в настройках */
.legal { margin: 12px 0 0; text-align: center; font-size: 13px; }
.legal a { color: inherit; opacity: .75; }