/* =====================================================================
   МАСТЕРСКАЯ ИГР — оформление: чертёжная синька + наклейки с жёсткой тенью
   ===================================================================== */
:root {
  --ink: #0d1030; --bp: #171c4a; --bp2: #10143a; --grid: #2b3380;
  --lime: #b9f535; --orange: #ff8b2b; --pink: #ff4f93; --sky: #4cd3ff; --butter: #ffd84a; --vio: #8a5cff;
  --paper: #fff6dc;
  --f-head: 'Unbounded', 'Arial Black', 'Segoe UI', Roboto, sans-serif;
  --f-body: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0d2b; }
body {
  font-family: var(--f-body); font-size: 15px; color: var(--paper);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  background:
    radial-gradient(circle at 20% 15%, rgba(76, 211, 255, .12), transparent 40%),
    radial-gradient(circle at 80% 85%, rgba(255, 79, 147, .1), transparent 40%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(76, 211, 255, .07) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(76, 211, 255, .07) 31px 32px), #0a0d2b;
}
* { box-sizing: border-box; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; -webkit-appearance: none; appearance: none; }
#app { position: fixed; top: 0; left: 0; overflow: hidden; background: var(--bp); box-shadow: 0 0 0 3px var(--ink), 0 0 60px rgba(0, 0, 0, .5); }
#cv { position: absolute; left: 0; top: 0; display: none; touch-action: none; }
#app.playing #cv { display: block; }
#ui { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ic { width: 24px; height: 24px; display: block; flex: none; overflow: visible; }

/* ---------- экраны ---------- */
.screen { position: absolute; inset: 0; display: none; overflow: hidden; }
.screen.on { display: block; }
.screen:not(#scr-game) {
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(160deg, #1d2358, #11153c 70%);
  background-blend-mode: soft-light, soft-light, normal;
}
.screen.enter > * { animation: scrIn .32s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes scrIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- кнопки-наклейки ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 8px 16px;
  font-family: var(--f-head); font-weight: 800; font-size: 14px; line-height: 1.1; color: var(--ink); text-align: center;
  border: 3px solid var(--ink); border-radius: 15px; box-shadow: 0 5px 0 var(--ink);
  transition: transform .08s, box-shadow .08s; position: relative;
}
.btn:active, .btn.dn { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.xl { min-height: 62px; font-size: 18px; border-radius: 18px; }
.btn.sm { min-height: 40px; padding: 4px 12px; font-size: 12px; box-shadow: 0 4px 0 var(--ink); }
.btn .ic { width: 26px; height: 26px; }
.btn.xl .ic { width: 32px; height: 32px; }
.b-lime { background: var(--lime); } .b-yel { background: var(--butter); } .b-sky { background: var(--sky); }
.b-pink { background: var(--pink); color: #fff; } .b-vio { background: var(--vio); color: #fff; } .b-orange { background: var(--orange); }
.b-pink span, .b-vio span { text-shadow: 0 2px 0 rgba(13, 16, 48, .5); }
.ib {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; flex: none;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.ib:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.ib.sm { width: 38px; height: 38px; border-radius: 12px; }
.ib .ic { width: 26px; height: 26px; }
.ib.sm .ic { width: 20px; height: 20px; }
.lnk { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; color: #aab4ff; padding: 8px 6px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(170, 180, 255, .4); }
.lnk .ic { width: 18px; height: 18px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two .btn { font-size: 12.5px; padding: 6px 8px; gap: 6px; }
.two .btn .ic { width: 22px; height: 22px; }

/* ---------- главный экран ---------- */
.home { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 18px 10px; gap: 8px; }
.hm-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xp { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; background: rgba(13, 16, 48, .6); border: 2px solid var(--grid); border-radius: 12px; padding: 5px 12px 6px; min-width: 150px; }
.xp b { font-family: var(--f-head); font-size: 13px; color: var(--butter); }
.xp em { grid-column: 1 / 3; font-style: normal; font-size: 11px; font-weight: 700; color: #aab4ff; }
.bar { display: block; height: 9px; border: 2px solid var(--ink); border-radius: 6px; background: #0b0e2c; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--lime), var(--butter)); border-radius: 4px; }
.hm-icons { display: flex; gap: 8px; }
.hm-hero { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.logo { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--f-head); color: var(--ink); filter: drop-shadow(0 6px 0 var(--ink)); }
.logo span { display: block; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 14px; font-weight: 900; line-height: 1.05; }
.l1 { background: var(--lime); font-size: 34px; transform: rotate(-3deg); }
.l2 { background: var(--orange); font-size: 46px; margin-top: -6px; margin-left: 56px; transform: rotate(2.5deg); }
.stage { position: relative; display: flex; justify-content: center; gap: 12px; padding-bottom: 10px; width: 100%; }
.ruler { position: absolute; left: 6%; right: 6%; bottom: 0; height: 12px; border-radius: 3px; background: var(--butter); border: 2px solid var(--ink); background-image: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 10px); background-size: 100% 6px; background-repeat: no-repeat; }
.hop { display: block; animation: hop 1.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hop { 0%, 55%, 100% { transform: translateY(0) scale(1.06, .94); } 25% { transform: translateY(-16px) scale(.94, 1.08); } }
.spr { display: block; image-rendering: auto; }
.spr.pix { image-rendering: pixelated; }
.spr.emo { text-align: center; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.hm-btns { display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }
.hm-foot { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- страницы ---------- */
.page { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 16px 12px; gap: 12px; }
.pg-top { display: flex; align-items: center; gap: 10px; }
.pg-top h2 { flex: 1; margin: 0; font-family: var(--f-head); font-weight: 900; font-size: 19px; line-height: 1.1; }
.shelf { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; align-content: start; padding: 6px 4px 14px; scrollbar-width: thin; scrollbar-color: var(--grid) transparent; }
.shelf::-webkit-scrollbar { width: 6px; } .shelf::-webkit-scrollbar-thumb { background: var(--grid); border-radius: 3px; }
.cart {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 8px 9px; text-align: center; color: var(--ink);
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink), inset 0 -26px 0 rgba(13, 16, 48, .06);
  transform: rotate(var(--rot, 0deg)); transition: transform .12s; position: relative;
}
.cart::before { content: ''; position: absolute; left: 14px; right: 14px; top: -8px; height: 8px; background: var(--gc); border: 3px solid var(--ink); border-bottom: 0; border-radius: 8px 8px 0 0; }
.cart:active { transform: rotate(0) translateY(3px); }
.cart-art { display: grid; place-items: center; width: 78px; height: 74px; border-radius: 10px; border: 2px solid var(--ink); background: radial-gradient(circle at 50% 35%, #fff, var(--gc)); }
.cart-n { font-family: var(--f-head); font-weight: 800; font-size: 11.5px; line-height: 1.2; height: 28px; display: flex; align-items: center; overflow: hidden; }
.cart-t { font-size: 11px; font-weight: 800; color: #4a4f80; }
.cart-s { display: flex; gap: 1px; } .cart-s .ic { width: 18px; height: 18px; }
.cart-b { font-size: 10.5px; font-weight: 700; color: #6a6f9a; }
.empty { grid-column: 1 / 3; text-align: center; padding: 40px 10px; font-weight: 700; color: #aab4ff; line-height: 1.5; }
.genres { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 6px 2px; justify-content: space-evenly; }
.gcard {
  flex: 1; max-height: 128px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 12px; align-items: center; text-align: left; padding: 10px 14px; color: var(--ink);
  background: var(--gc); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); transform: rotate(var(--rot)); transition: transform .1s, box-shadow .1s;
}
.gcard:active { transform: rotate(0) translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.gc-art { grid-row: 1 / 3; display: flex; gap: 0; flex-direction: column; flex-wrap: wrap; width: 86px; height: 86px; background: rgba(255, 255, 255, .55); border: 2px solid var(--ink); border-radius: 14px; align-items: center; justify-content: center; align-content: center; padding: 2px; overflow: hidden; }
.gc-art .spr { width: 40px !important; height: 40px !important; margin: -5px; }
.gc-t { align-self: end; font-family: var(--f-head); font-weight: 900; font-size: 16px; line-height: 1.1; }
.gc-b { align-self: start; font-weight: 700; font-size: 12px; line-height: 1.25; margin-top: 4px; }

/* ---------- оверлеи ---------- */
.ov { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(6, 8, 28, .72); animation: ovIn .16s ease-out both; }
.ov.out { animation: ovOut .16s ease-in both; }
@keyframes ovIn { from { opacity: 0; } } @keyframes ovOut { to { opacity: 0; } }
.panel {
  width: min(92%, 346px); background: linear-gradient(160deg, #232a6e, #151a4a); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 8px 0 var(--ink), 0 0 0 2px var(--grid) inset;
  padding: 16px; position: relative; transform-origin: 50% 50%; animation: panIn .26s cubic-bezier(.2, 1, .3, 1.25) both;
}
.ov.big .panel { width: min(94%, 372px); }
@keyframes panIn { from { opacity: 0; transform: translateY(22px) scale(.94); } }
.panel h3 { margin: 0 0 12px; font-family: var(--f-head); font-weight: 900; font-size: 22px; text-align: center; }
.dlg-t { font-family: var(--f-head); font-weight: 800; font-size: 16px; text-align: center; line-height: 1.3; margin-bottom: 14px; }
.dlg-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inp { width: 100%; font: 800 17px var(--f-body); color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; padding: 11px 12px; margin-bottom: 14px; outline: none; user-select: text; -webkit-user-select: text; }
.inp:focus { box-shadow: 0 0 0 3px var(--sky); }
.toast { position: absolute; left: 50%; top: 140px; transform: translateX(-50%); z-index: 80; max-width: 88%; padding: 10px 16px; border-radius: 14px; background: var(--butter); color: var(--ink); font-weight: 800; font-size: 13.5px; text-align: center; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); animation: toastIn .3s cubic-bezier(.2, 1, .3, 1.4) both; pointer-events: none; }
.toast.out { animation: ovOut .3s ease-in both; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -16px) scale(.9); } }
.sheet { display: flex; flex-direction: column; gap: 12px; }
.sh-h { display: flex; align-items: center; gap: 12px; }
.sh-h > span { background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 3px; }
.sh-h b { display: block; font-family: var(--f-head); font-size: 15px; line-height: 1.2; }
.sh-h em { font-style: normal; font-size: 12px; font-weight: 700; color: #aab4ff; }
.pk-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pk-t { flex: 1; font-family: var(--f-head); font-weight: 900; font-size: 16px; line-height: 1.15; }
.pk-t em { font-style: normal; color: var(--butter); font-size: 13px; }
.pk-cur { background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; padding: 2px; }
.pk-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.pt { padding: 8px 2px; font-weight: 800; font-size: 12.5px; background: #2b3380; border: 2px solid var(--ink); border-radius: 10px; color: #c9d0ff; }
.pt.on { background: var(--butter); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.pk-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; height: 268px; overflow-y: auto; align-content: start; padding: 6px; background: rgba(13, 16, 48, .5); border: 2px solid var(--ink); border-radius: 12px; margin-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--grid) transparent; }
.pk-c { aspect-ratio: 1; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; }
.pk-c.on { background: var(--lime); box-shadow: 0 0 0 3px var(--butter); }
.pk-c:active { transform: scale(.92); }
.pk-cat { grid-column: 1 / 6; font-weight: 800; font-size: 11px; color: #aab4ff; margin-top: 4px; }
.pk-empty { grid-column: 1 / 6; text-align: center; padding: 40px 8px; font-weight: 700; color: #aab4ff; line-height: 1.5; }
.pk-px { width: 100%; }

/* ---------- редактор ---------- */
#scr-editor { display: none; flex-direction: column; }
#scr-editor.on { display: flex; }
.ed-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.ed-name { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; background: rgba(13, 16, 48, .65); border: 2px dashed var(--grid); border-radius: 12px; font-family: var(--f-head); font-weight: 800; font-size: 13px; }
.ed-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-name .ic { width: 18px; height: 18px; }
.ed-play { min-height: 46px; padding: 6px 12px; font-size: 13px; }
.ed-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 12px; }
.ed-body.t-look, .ed-body.t-rules, .ed-body.t-sound { overflow-y: auto; padding-bottom: 10px; }
.ed-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 10px 10px; background: rgba(8, 10, 32, .7); border-top: 3px solid var(--ink); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 4px; border-radius: 12px; font-size: 11.5px; font-weight: 800; color: #aab4ff; border: 2px solid transparent; }
.tab .ic { width: 24px; height: 24px; filter: grayscale(.7); opacity: .8; }
.tab.on { background: var(--butter); color: var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.tab.on .ic { filter: none; opacity: 1; }
.lvbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { position: relative; min-width: 38px; height: 38px; padding: 0 8px; font-family: var(--f-head); font-weight: 900; font-size: 15px; background: #2b3380; color: #c9d0ff; border: 2px solid var(--ink); border-radius: 11px; }
.chip.on { background: var(--lime); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.chip.add { background: transparent; border-style: dashed; border-color: var(--grid); font-size: 20px; }
.chip b { position: absolute; right: -6px; top: -8px; width: 18px; height: 18px; }
.chip b .ic { width: 18px; height: 18px; }
.lvact { display: flex; gap: 4px; }
.mini { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 3px 6px; font-size: 10px; font-weight: 800; color: #c9d0ff; background: rgba(13, 16, 48, .6); border: 2px solid var(--grid); border-radius: 10px; min-width: 46px; }
.mini .ic { width: 20px; height: 20px; }
.mini:active { transform: translateY(2px); }
.tools { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; flex: none; }
.tools::-webkit-scrollbar { display: none; }
.tool { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px 3px; font-size: 10px; font-weight: 800; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; }
.tool .spr { width: 32px; height: 32px; } .tool .ic { width: 30px; height: 30px; }
.tool.on { background: var(--lime); box-shadow: 0 0 0 3px var(--butter), 0 3px 0 var(--ink); transform: translateY(-2px); }
.swatch { display: block; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 6px; }
.swatch.spr-p { background: linear-gradient(var(--orange) 0 40%, #c9ccd6 40% 80%, var(--ink) 80%); }
.swatch.pit { background: var(--ink); border-style: dashed; border-color: var(--grid); }
.ed-cv { flex: 1; min-height: 120px; position: relative; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: #0d1030; box-shadow: 0 0 0 2px var(--grid); }
.ed-cv canvas { position: absolute; left: 0; top: 0; display: block; touch-action: none; }
.ed-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.stat { flex: 1; display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12px; line-height: 1.25; }
.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.dot.ok { background: var(--lime); } .dot.bad { background: var(--pink); }
.lenbtns { display: flex; gap: 4px; }
.pan { width: 100%; margin: 0 0 4px; }
input[type=range] { -webkit-appearance: none; appearance: none; height: 28px; background: transparent; margin: 0; width: 100%; }
input[type=range]::-webkit-slider-runnable-track { height: 14px; background: #0b0e2c; border: 2px solid var(--ink); border-radius: 8px; }
input[type=range]::-moz-range-track { height: 12px; background: #0b0e2c; border: 2px solid var(--ink); border-radius: 8px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; background: var(--butter); border: 3px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--ink); }
input[type=range]::-moz-range-thumb { width: 26px; height: 26px; background: var(--butter); border: 3px solid var(--ink); border-radius: 10px; }
.sl-wrap { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.sl-card { background: rgba(13, 16, 48, .6); border: 2px solid var(--grid); border-radius: 14px; padding: 10px 14px 6px; }
.sl-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 13.5px; margin-bottom: 2px; }
.sl-h output { font-family: var(--f-head); font-size: 14px; color: var(--lime); }
.cast { display: flex; align-items: center; gap: 4px; padding: 8px 12px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); font-weight: 800; font-size: 13px; }
.cast span:last-child { margin-left: auto; font-family: var(--f-head); font-size: 11.5px; }
.sec-t { font-family: var(--f-head); font-weight: 800; font-size: 13px; color: var(--butter); margin: 6px 0 0; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
.role:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.rp { display: grid; place-items: center; background: #dfe3ff; border-radius: 10px; padding: 2px; }
.rn { font-family: var(--f-head); font-weight: 800; font-size: 12px; }
.re .ic { width: 18px; height: 18px; opacity: .7; }
.themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.th { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; font-weight: 800; font-size: 11.5px; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; }
.th.on { background: var(--lime); box-shadow: 0 0 0 3px var(--butter); }
.th-s { position: relative; display: block; width: 100%; height: 38px; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.th-s i { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; }
.rule { background: rgba(13, 16, 48, .6); border: 2px solid var(--grid); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; }
.rule-h { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
.rule-h b { font-family: var(--f-head); font-size: 14px; }
.rule-h span { font-size: 12px; font-weight: 600; color: #aab4ff; }
.seg { display: flex; gap: 6px; }
.sg { flex: 1; padding: 10px 2px; font-weight: 800; font-size: 13px; background: #2b3380; color: #c9d0ff; border: 2px solid var(--ink); border-radius: 10px; }
.sg.on { background: var(--lime); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.hint-b { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: #aab4ff; padding: 4px 4px 0; }
.mus-l { display: flex; flex-direction: column; gap: 8px; }
.mus { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-weight: 800; font-size: 15px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
.mus.on { background: var(--lime); }
.coach { position: absolute; z-index: 40; transform: translate(-50%, -100%); background: var(--butter); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; padding: 8px 14px; font-weight: 800; font-size: 13.5px; text-align: center; box-shadow: 0 4px 0 var(--ink); pointer-events: none; max-width: 260px; width: max-content; animation: coachIn .35s cubic-bezier(.2, 1, .3, 1.5) both; }
.coach.below { transform: translate(-50%, 0); }
.coach i { position: absolute; left: 90px; bottom: -11px; width: 14px; height: 14px; background: var(--butter); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.coach.below i { bottom: auto; top: -11px; transform: translateX(-50%) rotate(225deg); }
@keyframes coachIn { from { opacity: 0; margin-top: 8px; } }

/* ---------- пиксель-редактор ---------- */
.pxe { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pxe-h { display: flex; align-items: center; gap: 10px; width: 100%; }
.pxe-cvw { border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; line-height: 0; box-shadow: 0 0 0 2px var(--grid); }
.pxe-cvw canvas { width: 256px; height: 256px; image-rendering: pixelated; }
.pxe-tools { display: flex; gap: 6px; }
.tl { width: 46px; height: 42px; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--ink); border-radius: 11px; }
.tl .ic { width: 24px; height: 24px; }
.tl.on { background: var(--lime); box-shadow: 0 0 0 3px var(--butter); }
.pxe-pal { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; width: 100%; }
.pc { aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 5px; }
.pc.on { box-shadow: 0 0 0 2px var(--butter), 0 0 0 4px var(--ink); transform: scale(1.12); position: relative; z-index: 1; }
.pxe-f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }

/* ---------- игра ---------- */
#scr-game { background: transparent; pointer-events: none; }
#scr-game > * { pointer-events: auto; }
#touch { position: absolute; inset: 0; touch-action: none; }
.hud { position: absolute; left: 0; right: 0; top: 0; height: 58px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; pointer-events: none; }
.hud > * { pointer-events: none; }
.hud .hp { pointer-events: auto; width: 42px; height: 42px; }
.hearts { display: flex; gap: 0; filter: drop-shadow(0 2px 0 rgba(13, 16, 48, .6)); }
.hearts .ic { width: 22px; height: 22px; }
.sc { display: flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px 10px 4px 6px; background: rgba(13, 16, 48, .78); border: 2px solid var(--ink); border-radius: 12px; font-family: var(--f-head); font-weight: 900; font-size: 15px; min-width: 76px; }
.sc i { display: flex; } .sc .ic { width: 20px; height: 20px; }
.lvl { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-weight: 800; font-size: 10.5px; color: var(--paper); text-shadow: 0 2px 0 var(--ink), 0 0 4px var(--ink); }
.tm { display: none; align-items: center; gap: 3px; padding: 4px 8px 4px 5px; background: rgba(13, 16, 48, .78); border: 2px solid var(--ink); border-radius: 12px; font-family: var(--f-head); font-weight: 900; font-size: 14px; }
.tm .ic { width: 18px; height: 18px; } .tm.warn { background: var(--pink); animation: warn .5s infinite alternate; }
@keyframes warn { to { transform: scale(1.1); } }
.ctrl { position: absolute; left: 0; right: 0; bottom: 0; display: none; padding: 10px 14px 16px; pointer-events: none; }
.ctrl > * { pointer-events: auto; }
#scr-game[data-genre=platform] .c-plat { display: flex; justify-content: space-between; align-items: flex-end; }
#scr-game[data-genre=maze] .c-maze { display: flex; justify-content: center; }
.pad { position: relative; width: 190px; height: 92px; border: 3px solid var(--ink); border-radius: 46px; background: rgba(13, 16, 48, .72); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; touch-action: none; }
.pad .ic { width: 44px; height: 44px; }
.pad .pl .ic { transform: scaleX(-1); }
.pad > span { opacity: .65; transition: transform .08s, opacity .08s; }
.pad.l .pl, .pad.r .pr { opacity: 1; transform: scale(1.18); }
.pad .ic path { stroke: var(--paper); }
.jump { width: 96px; height: 96px; border-radius: 50%; background: var(--lime); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink); display: grid; place-items: center; touch-action: none; }
.jump.dn { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.jump .ic { width: 48px; height: 48px; }
.dpad { position: relative; width: 150px; height: 150px; border-radius: 50%; background: rgba(13, 16, 48, .72); border: 3px solid var(--ink); touch-action: none; }
.dpad i { position: absolute; display: block; width: 44px; height: 44px; opacity: .7; }
.dpad i .ic { width: 44px; height: 44px; } .dpad i .ic path { stroke: var(--paper); }
.dpad .du { left: 53px; top: 4px; transform: rotate(-90deg); } .dpad .dd { left: 53px; bottom: 4px; transform: rotate(90deg); }
.dpad .dl { left: 4px; top: 53px; transform: scaleX(-1); } .dpad .dr { right: 4px; top: 53px; }
.dpad.up .du, .dpad.down .dd, .dpad.left .dl, .dpad.right .dr { opacity: 1; filter: drop-shadow(0 0 6px var(--lime)); }

/* ---------- результат / пауза ---------- */
.res h3, .pz h3 { font-size: 24px; }
.res.win h3 { color: var(--lime); text-shadow: 0 3px 0 var(--ink); } .res.lose h3 { color: var(--pink); text-shadow: 0 3px 0 var(--ink); }
.res-st { display: flex; justify-content: center; gap: 4px; margin-bottom: 10px; }
.rs .ic { width: 62px; height: 62px; transform: scale(.8); }
.rs.pop .ic { animation: starPop .5s cubic-bezier(.2, 1, .3, 1.8) both; }
@keyframes starPop { 0% { transform: scale(.4) rotate(-40deg); } 60% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
.res-l { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.res-l > div { flex: 1; text-align: center; background: rgba(13, 16, 48, .6); border: 2px solid var(--grid); border-radius: 12px; padding: 6px 4px; }
.res-l em { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: #aab4ff; }
.res-l b { font-family: var(--f-head); font-size: 17px; }
.res-n { text-align: center; font-weight: 800; font-size: 13px; color: var(--butter); margin-bottom: 8px; display: flex; justify-content: center; align-items: center; gap: 6px; }
.res-n.dim { color: #aab4ff; font-weight: 700; font-size: 12px; } .res-n.ok { color: var(--lime); } .res-n .ic { width: 20px; height: 20px; }
.res-near { margin-bottom: 12px; text-align: center; font-weight: 800; font-size: 14px; }
.res-near .bar { margin-bottom: 6px; height: 14px; }
.res-b { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.res-b .lnk { align-self: center; }
.pz { display: flex; flex-direction: column; gap: 10px; }
.pz h3 { margin-bottom: 4px; }

/* ---------- обучение ---------- */
.tut { text-align: center; position: relative; }
.tut-x { position: absolute; right: -6px; top: -6px; }
.tut-art { height: 110px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 8px; background: rgba(13, 16, 48, .5); border: 2px dashed var(--grid); border-radius: 16px; }
.tut-art .ic { width: 52px; height: 52px; }
.tut h3 { margin-bottom: 8px; font-size: 20px; }
.tut p { margin: 0 0 12px; font-size: 14px; font-weight: 600; line-height: 1.45; min-height: 62px; }
.dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #2b3380; border: 2px solid var(--ink); }
.dots i.on { background: var(--butter); width: 24px; border-radius: 6px; }
.tut-b { display: flex; gap: 10px; } .tut-b .btn { flex: 1; }
.mini-grid { display: grid; grid-template-columns: repeat(6, 26px); gap: 2px; } .mini-grid i { width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 5px; display: block; }
.mg-w { background: #7a5230; } .mg-f { background: #dfe3ff; } .mg-c { background: var(--butter); border-radius: 50% !important; } .mg-s { background: var(--pink); } .mg-h { background: var(--lime); } .mg-x { background: var(--orange); }
.px-demo { filter: contrast(1.1); image-rendering: pixelated; }
.px-demo img { image-rendering: pixelated; filter: blur(0); transform: scale(1); }

/* ---------- достижения и рейтинг ---------- */
.ach-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 372px; overflow-y: auto; padding: 4px; scrollbar-width: thin; scrollbar-color: var(--grid) transparent; }
.ac { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 8px 4px; background: rgba(13, 16, 48, .5); border: 2px solid var(--grid); border-radius: 12px; }
.ac .badge { width: 54px; height: 54px; }
.ac b { font-family: var(--f-head); font-size: 10px; line-height: 1.15; }
.ac span { font-size: 10px; font-weight: 600; color: #aab4ff; line-height: 1.2; }
.ac.lock b { color: #8088c8; }
.lb-list { display: flex; flex-direction: column; gap: 6px; height: 360px; overflow-y: auto; padding: 4px; scrollbar-width: thin; scrollbar-color: var(--grid) transparent; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: rgba(13, 16, 48, .55); border: 2px solid var(--grid); border-radius: 12px; }
.lb-row.top-1 { background: linear-gradient(90deg, rgba(255, 216, 74, .3), rgba(13, 16, 48, .55)); border-color: var(--butter); }
.lb-row.top-2 { border-color: #c9ccd6; } .lb-row.top-3 { border-color: #d99968; }
.lb-medal { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-family: var(--f-head); font-weight: 900; font-size: 13px; color: #aab4ff; }
.lb-medal.gold, .lb-medal.silver, .lb-medal.bronze { color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; font-size: 16px; }
.lb-medal.gold { background: radial-gradient(circle at 35% 30%, #fff6a0, #ffb800); } .lb-medal.silver { background: radial-gradient(circle at 35% 30%, #fff, #a8aec8); } .lb-medal.bronze { background: radial-gradient(circle at 35% 30%, #ffd2a0, #c4783a); }
.lb-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--vio); border: 2px solid var(--ink); font-family: var(--f-head); font-weight: 900; font-size: 16px; }
.lb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.lb-name { flex: 1; min-width: 0; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-score { font-family: var(--f-head); font-weight: 900; font-size: 15px; color: var(--lime); }
.lb-empty { margin: auto; text-align: center; padding: 30px 14px; font-weight: 700; color: #aab4ff; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .hop, .screen.enter > *, .panel { animation: none !important; } }