:root {
      --bg0:#061030;
      --bg1:#1553d0;
      --cyan:#22e8ff;
      --blue:#1d6bff;
      --white:#f8fbff;
      --yellow:#ffe351;
      --green:#30ff91;
      --red:#ff355f;
      --purple:#bb50ff;
      --panel:rgba(4,8,24,.78);
    }

    * {
      box-sizing:border-box;
      -webkit-tap-highlight-color:transparent;
      user-select:none;
    }

    html, body {
      margin:0;
      width:100%;
      height:100%;
      overflow:hidden;
      background:
        radial-gradient(circle at 18% 18%, rgba(34,232,255,.22), transparent 28%),
        radial-gradient(circle at 82% 32%, rgba(29,107,255,.26), transparent 28%),
        linear-gradient(180deg, #1553d0, var(--bg0));
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--white);
    }

    body {
      display:grid;
      place-items:center;
    }

    .wrap {
      position:relative;
      width:min(100vw,1180px);
      height:min(100dvh,680px);
      min-height:min(430px,100dvh);
      overflow:hidden;
      border-radius:24px;
      background:#071846;
      box-shadow:
        0 24px 90px rgba(0,0,0,.5),
        inset 0 0 0 1px rgba(255,255,255,.13);
    }

    canvas {
      width:100%;
      height:100%;
      display:block;
      cursor:pointer;
      touch-action:none;
    }

    .hud {
      position:absolute;
      inset:0;
      pointer-events:none;
    }

    .topbar {
      position:absolute;
      top:14px;
      left:14px;
      right:14px;
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:flex-start;
      text-shadow:0 2px 10px rgba(0,0,0,.55);
    }

    .topbar.hidden,
    .tip.hidden {
      display:none;
    }

    .badge, .progressBox, .panel {
      background:var(--panel);
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter:blur(12px);
      box-shadow:0 10px 35px rgba(0,0,0,.28);
    }

    .badge {
      padding:9px 12px;
      border-radius:999px;
      font-size:14px;
      font-weight:850;
      line-height:1.25;
    }

    .progressBox {
      width:min(46vw,440px);
      padding:10px 12px 12px;
      border-radius:17px;
      font-weight:850;
    }

    .progressText {
      display:flex;
      justify-content:space-between;
      margin-bottom:7px;
      font-size:12px;
      opacity:.92;
    }

    .progressOuter {
      height:9px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(255,255,255,.13);
    }

    .progressInner {
      height:100%;
      width:0%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--cyan),#80f7ff,var(--yellow));
      box-shadow:0 0 18px rgba(34,232,255,.72);
    }

    .screen {
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      padding:18px;
      pointer-events:auto;
    }

    .screen.hidden {
      display:none;
    }

    .screenHeader {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      min-height:38px;
      margin:-4px 0 12px;
    }

    .screenHeaderTitle,
    .editorTopTitle {
      color:var(--cyan);
      font-size:11px;
      font-weight:950;
      letter-spacing:1.2px;
      text-transform:uppercase;
    }

    .screenHeaderSpacer {
      width:72px;
    }

    .screenBackBtn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      min-width:72px;
      min-height:36px;
      padding:8px 12px;
      margin:0;
      font-size:11px;
      letter-spacing:.2px;
    }

    .screenBackBtn > span:first-child {
      display:inline-grid;
      place-items:center;
      width:1em;
      height:1em;
      line-height:1;
      font-family:Arial,sans-serif;
    }

    .panel {
      width:min(94%,760px);
      max-height:92%;
      overflow:auto;
      padding:28px;
      border-radius:28px;
      text-align:center;
    }

    h1 {
      margin:0 0 9px;
      font-size:clamp(34px,6.2vw,76px);
      line-height:.9;
      letter-spacing:-2px;
      text-transform:uppercase;
      background:linear-gradient(90deg,var(--cyan),#ffffff,var(--yellow));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      filter:drop-shadow(0 5px 16px rgba(0,0,0,.42));
    }

    h2 {
      margin:0 0 14px;
      font-size:clamp(24px,4vw,42px);
      text-transform:uppercase;
    }

    .subtitle {
      margin:0 auto 20px;
      max-width:620px;
      opacity:.88;
      font-size:15px;
      line-height:1.5;
    }

    .row {
      display:flex;
      justify-content:center;
      align-items:center;
      flex-wrap:wrap;
      gap:10px;
    }

    button {
      border:0;
      border-radius:999px;
      padding:13px 22px;
      margin:4px;
      font-weight:950;
      color:#06101f;
      background:linear-gradient(90deg,var(--cyan),var(--green));
      box-shadow:0 14px 35px rgba(34,232,255,.27);
      cursor:pointer;
      transition:transform .12s ease,filter .12s ease,opacity .12s ease;
    }

    button:hover {
      transform:translateY(-1px) scale(1.02);
      filter:brightness(1.08);
    }

    button:active {
      transform:translateY(1px) scale(.98);
    }

    button:disabled {
      opacity:.45;
      cursor:not-allowed;
      transform:none;
    }

    .ghost {
      color:var(--white);
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:none;
    }

    .danger {
      color:#fff;
      background:linear-gradient(90deg,var(--red),#ff8a35);
    }

    .purple {
      color:#fff;
      background:linear-gradient(90deg,var(--purple),var(--blue));
    }

    .nextLevelBtn {
      background:linear-gradient(90deg,var(--yellow),#ff9d35);
      box-shadow:0 14px 35px rgba(255,227,81,.24);
    }

    .mainMenuPanel {
      width:min(94%,900px);
      padding:34px 26px 28px;
      border-radius:0;
      background:transparent;
      border:0;
      box-shadow:none;
      backdrop-filter:none;
      overflow:visible;
      position:relative;
    }

    .mainMenuPanel::before {
      content:"";
      position:absolute;
      left:50%;
      top:52%;
      width:min(55vw,420px);
      height:min(55vw,420px);
      transform:translate(-50%, -50%) rotate(45deg);
      border-radius:42px;
      background:linear-gradient(135deg, rgba(34,232,255,.18), rgba(29,107,255,.08), rgba(255,255,255,.07));
      box-shadow:0 0 70px rgba(34,232,255,.22);
      pointer-events:none;
      z-index:-1;
    }

    .mainMenuPanel .subtitle {
      max-width:700px;
      margin-bottom:24px;
      text-shadow:0 3px 14px rgba(0,0,0,.45);
    }

    .mainMenuButtons {
      display:flex;
      justify-content:center;
      align-items:flex-start;
      gap:18px;
      flex-wrap:wrap;
      margin:8px 0 8px;
    }

    .editorChoicePanel {
      max-width:640px;
    }

    .playerLevelsPanel {
      max-width:640px;
    }

    .editorLevelsPanel {
      max-width:760px;
    }

    .editorLevelsToolbar {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin:18px 0 12px;
    }

    .editorLevelsToolbar button {
      margin:0;
    }

    .editorLevelsLimit {
      color:rgba(255,255,255,.70);
      font-size:12px;
      font-weight:850;
      white-space:nowrap;
    }

    .editorLevelsGrid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
      gap:12px;
      margin:12px 0 18px;
      text-align:left;
    }

    .editorLevelCard {
      display:grid;
      grid-template-columns:48px 1fr;
      gap:10px 12px;
      align-items:center;
      min-height:150px;
      cursor:default;
    }

    .editorLevelCardIcon {
      width:48px;
      height:48px;
      display:grid;
      place-items:center;
      border-radius:14px;
      color:#fff;
      background:linear-gradient(145deg,#bb50ff,#1d6bff);
      box-shadow:0 0 22px rgba(80,120,255,.36), inset 0 0 0 3px rgba(255,255,255,.13);
      font-size:25px;
      font-weight:950;
    }

    .editorLevelCardInfo {
      min-width:0;
    }

    .editorLevelCardInfo strong {
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .editorLevelCardActions {
      grid-column:1 / -1;
      display:flex;
      gap:7px;
      justify-content:flex-end;
      border-top:1px solid rgba(255,255,255,.10);
      padding-top:9px;
    }

    .editorLevelCardActions button {
      padding:9px 13px;
      margin:0;
      font-size:11px;
    }

    .playProjectBtn {
      color:#06101f;
      background:linear-gradient(90deg,var(--cyan),var(--green));
    }

    .editorLevelsEmpty {
      min-height:190px;
      display:grid;
      place-items:center;
      align-content:center;
      gap:12px;
      margin-top:18px;
      border:1px dashed rgba(255,255,255,.20);
      border-radius:22px;
      background:rgba(255,255,255,.035);
      color:rgba(255,255,255,.72);
    }

    .editorLevelsEmpty[hidden],
    .playerLevelsEmpty[hidden] {
      display:none;
    }

    .playerLevelsEmpty {
      min-height:230px;
      display:grid;
      place-items:center;
      align-content:center;
      gap:12px;
      margin-top:24px;
      border:1px dashed rgba(255,255,255,.20);
      border-radius:22px;
      background:rgba(255,255,255,.035);
      color:rgba(255,255,255,.72);
    }

    .playerLevelsEmptyIcon {
      width:74px;
      height:74px;
      display:grid;
      place-items:center;
      border-radius:20px;
      color:#8cf8ff;
      background:linear-gradient(145deg,rgba(34,232,255,.20),rgba(80,72,255,.18));
      border:2px solid rgba(140,248,255,.58);
      box-shadow:0 0 28px rgba(34,232,255,.24), inset 0 0 0 5px rgba(255,255,255,.06);
      font-size:42px;
      line-height:1;
    }

    .playerLevelsEmpty p {
      margin:0;
      font-size:15px;
      font-weight:850;
    }

    .editorChoiceButtons {
      display:flex;
      justify-content:center;
      align-items:flex-start;
      gap:18px;
      flex-wrap:wrap;
      margin:24px 0 8px;
    }

    .editorChoiceBtn {
      width:180px;
      min-width:160px;
      height:180px;
      overflow:visible;
    }

    .editorChoiceEditorIcon,
    .editorChoicePlayerIcon {
      width:76px;
      height:68px;
      position:relative;
    }

    .editorChoiceEditorIcon::before {
      content:"";
      position:absolute;
      left:13px;
      top:4px;
      width:46px;
      height:56px;
      border:3px solid #fff;
      border-radius:9px;
      background:
        linear-gradient(#63eaff,#63eaff) 10px 14px / 25px 4px no-repeat,
        linear-gradient(#63eaff,#63eaff) 10px 26px / 19px 4px no-repeat,
        linear-gradient(#63eaff,#63eaff) 10px 38px / 28px 4px no-repeat,
        rgba(13,69,153,.86);
      box-shadow:0 0 18px rgba(34,232,255,.62), inset 0 0 0 4px rgba(255,255,255,.10);
      transform:rotate(-7deg);
    }

    .editorChoicePencil {
      position:absolute;
      z-index:1;
      right:5px;
      bottom:5px;
      width:42px;
      height:13px;
      border-radius:5px;
      background:linear-gradient(90deg,#ffe351 0 22%,#ff8a35 22% 82%,#fff 82%);
      border:2px solid #071842;
      box-shadow:0 0 12px rgba(255,227,81,.75);
      transform:rotate(-42deg);
    }

    .editorChoicePlayerIcon::before {
      content:"";
      position:absolute;
      left:8px;
      top:12px;
      width:60px;
      height:43px;
      border:3px solid #fff;
      border-radius:12px;
      background:rgba(9,71,144,.80);
      box-shadow:0 0 18px rgba(48,255,145,.60), inset 0 0 0 4px rgba(255,255,255,.10);
    }

    .playerLevelsGrid {
      position:absolute;
      z-index:1;
      left:21px;
      top:20px;
      width:34px;
      height:27px;
      background:
        linear-gradient(#fff,#fff) 0 0 / 8px 5px no-repeat,
        linear-gradient(#fff,#fff) 13px 0 / 21px 5px no-repeat,
        linear-gradient(#fff,#fff) 0 11px / 8px 5px no-repeat,
        linear-gradient(#fff,#fff) 13px 11px / 21px 5px no-repeat,
        linear-gradient(#fff,#fff) 0 22px / 8px 5px no-repeat,
        linear-gradient(#fff,#fff) 13px 22px / 21px 5px no-repeat;
    }

    .mainCircleBtn {
      width:170px;
      min-width:170px;
      height:170px;
      border-radius:50%;
      margin:0;
      padding:0;
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:8px;
      color:#fff;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.22);
      box-shadow:
        0 18px 44px rgba(0,0,0,.30),
        inset 0 0 0 4px rgba(255,255,255,.08);
    }

    .mainCircleBtn .menuLabel {
      font-size:17px;
      font-weight:950;
      letter-spacing:.4px;
      text-transform:uppercase;
      color:#fff;
      text-shadow:0 2px 10px rgba(0,0,0,.35);
    }

    .editorChoiceBtn {
      border:2px solid rgba(255,255,255,.38);
      box-shadow:
        0 20px 42px rgba(0,0,0,.34),
        inset 0 0 0 5px rgba(255,255,255,.12),
        inset 0 0 28px rgba(255,255,255,.12);
      transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
    }

    .editorChoiceBtn:first-child {
      background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.38), transparent 23%),
        linear-gradient(145deg,#8b5cff 0%,#5045d8 48%,#171e91 100%);
    }

    .editorChoiceBtn:last-child {
      background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.38), transparent 23%),
        linear-gradient(145deg,#34f1d0 0%,#16bbba 48%,#087caa 100%);
    }

    .editorChoiceBtn::after {
      content:"";
      position:absolute;
      inset:10px;
      border:1px solid rgba(255,255,255,.28);
      border-radius:50%;
      pointer-events:none;
    }

    .editorChoiceBtn:hover,
    .editorChoiceBtn:focus-visible {
      transform:translateY(-4px) scale(1.025);
      filter:saturate(1.12) brightness(1.05);
      box-shadow:
        0 26px 50px rgba(0,0,0,.40),
        inset 0 0 0 5px rgba(255,255,255,.18),
        0 0 30px rgba(95,225,255,.38);
    }

    .editorChoiceBtn .menuLabel {
      max-width:90%;
      line-height:1.05;
      text-align:center;
    }

    .menuIcon {
      display:grid;
      place-items:center;
      pointer-events:none;
    }

    .skinMenuBtn {
      background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.35), transparent 22%),
        linear-gradient(180deg, #2be9ff, #0d49c3);
    }

    .menuCubeIcon {
      width:68px;
      height:68px;
      transform:rotate(45deg);
      border-radius:16px;
      background:linear-gradient(135deg, #ffffff 0%, #7ff6ff 28%, #2ce8ff 48%, #2e70ff 100%);
      box-shadow:
        0 12px 24px rgba(0,0,0,.20),
        inset 0 0 0 4px rgba(255,255,255,.18);
      position:relative;
    }

    .menuCubeIcon::before,
    .menuCubeIcon::after {
      content:"";
      position:absolute;
      width:10px;
      height:10px;
      background:#071842;
      border-radius:2px;
      top:18px;
    }

    .menuCubeIcon::before { left:16px; }
    .menuCubeIcon::after { right:16px; }

    .menuCubeIcon .cubeMouth {
      position:absolute;
      left:16px;
      right:16px;
      bottom:16px;
      height:6px;
      border-radius:999px;
      background:#071842;
    }

    .playMenuBtnBig {
      background:
        radial-gradient(circle at 28% 25%, rgba(255,255,255,.25), transparent 24%),
        linear-gradient(180deg, #ffe351, #ff8b1e);
    }

    .menuPlayIcon {
      font-size:112px;
      line-height:1;
      transform:translateX(7px);
      font-weight:900;
      text-shadow:0 8px 24px rgba(0,0,0,.22);
    }

    .editorMenuBtn {
      background:
        radial-gradient(circle at 34% 26%, rgba(255,255,255,.18), transparent 24%),
        linear-gradient(180deg, #d15dff, #5048ff);
    }

    .menuTextBig {
      font-size:32px;
      font-weight:1000;
      line-height:1;
      letter-spacing:1px;
      color:#fff;
      text-shadow:0 8px 20px rgba(0,0,0,.22);
    }

    .editorPictureIcon {
      width:78px;
      height:62px;
      border-radius:16px;
      position:relative;
      display:block;
      background:
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(34,232,255,.42) 42%, rgba(80,72,255,.44)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 2px, transparent 2px 12px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 12px);
      border:3px solid rgba(255,255,255,.88);
      box-shadow:0 12px 26px rgba(0,0,0,.24), inset 0 0 18px rgba(255,255,255,.20);
      overflow:hidden;
    }

    .editorPictureIcon::before {
      content:"";
      position:absolute;
      left:8px;
      bottom:8px;
      width:18px;
      height:18px;
      transform:rotate(45deg);
      border-radius:5px;
      background:linear-gradient(135deg,#22e8ff,#1d6bff);
      box-shadow:24px -10px 0 rgba(255,227,81,.96), 44px 5px 0 rgba(48,255,145,.78);
    }

    .editorPencilIcon {
      position:absolute;
      right:5px;
      top:25px;
      width:38px;
      height:10px;
      border-radius:999px;
      background:linear-gradient(90deg,#ffe351 0 62%,#ffffff 62% 78%,#ff355f 78%);
      transform:rotate(-34deg);
      box-shadow:0 4px 12px rgba(0,0,0,.28);
    }

    .editorPencilIcon::after {
      content:"";
      position:absolute;
      left:-8px;
      top:0;
      width:0;
      height:0;
      border-top:5px solid transparent;
      border-bottom:5px solid transparent;
      border-right:9px solid #4b2700;
    }

    .skinsGrid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
      gap:14px;
      margin:18px 0 22px;
    }

    .skinCard {
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      padding:16px 10px 14px;
      border-radius:24px;
      background:rgba(255,255,255,.085);
      border:1px solid rgba(255,255,255,.14);
      cursor:pointer;
      transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
    }

    .skinCard:hover {
      transform:translateY(-2px);
      background:rgba(255,255,255,.13);
    }

    .skinCard.active {
      background:rgba(34,232,255,.14);
      box-shadow:0 0 0 3px rgba(34,232,255,.26);
    }

    .skinPreview {
      width:72px;
      height:72px;
      border-radius:18px;
      transform:none;
      box-shadow:
        0 12px 22px rgba(0,0,0,.20),
        inset 0 0 0 4px rgba(255,255,255,.16);
      position:relative;
    }

    .skinPreview::before,
    .skinPreview::after {
      content:"";
      position:absolute;
      width:10px;
      height:10px;
      background:#071842;
      border-radius:2px;
      top:18px;
    }

    .skinPreview::before { left:16px; }
    .skinPreview::after { right:16px; }

    .skinPreview span {
      position:absolute;
      left:16px;
      right:16px;
      bottom:16px;
      height:6px;
      border-radius:999px;
      background:#071842;
      display:block;
    }

    .skinPalettePanel {
      display:flex;
      align-items:center;
      gap:12px;
      margin:10px 0 16px;
      padding:10px 12px;
      border-radius:18px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
    }

    .skinPaletteTitle {
      min-width:154px;
      font-size:12px;
      font-weight:900;
      opacity:.82;
    }

    .skinPaletteGrid {
      display:grid;
      grid-template-columns:repeat(8, 24px);
      gap:7px;
    }

    .skinPaletteSwatch {
      width:24px;
      height:24px;
      padding:0;
      border-radius:50%;
      background:linear-gradient(135deg,var(--paletteA),var(--paletteB) 60%,var(--paletteC));
      border:2px solid rgba(255,255,255,.62);
      box-shadow:0 0 10px var(--paletteA);
      cursor:pointer;
    }

    .skinPaletteSwatch:not(:disabled):hover,
    .skinPaletteSwatch.active {
      outline:2px solid #fff;
      outline-offset:2px;
      transform:scale(1.08);
    }

    .skinPaletteSwatch:disabled,
    .skinPaletteSwatch.lockedPaletteSwatch {
      opacity:.28;
      filter:grayscale(.72);
      cursor:not-allowed;
      box-shadow:none;
    }

    .skinPaletteSwatch:disabled.active {
      outline:none;
      transform:none;
    }

    .skinCustomColorControl {
      display:flex;
      align-items:center;
      gap:7px;
      color:rgba(255,255,255,.82);
      font-size:11px;
      font-weight:900;
      white-space:nowrap;
      cursor:pointer;
    }

    .skinCustomColorControl[hidden] {
      display:none;
    }

    .skinCustomColorControl input {
      width:30px;
      height:30px;
      padding:2px;
      border:2px solid rgba(255,255,255,.68);
      border-radius:9px;
      background:rgba(255,255,255,.12);
      cursor:pointer;
    }

    .skinName {
      font-size:14px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.4px;
    }

    .skinHint {
      opacity:.72;
      font-size:12px;
    }

    .levelGrid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
      gap:12px;
      margin:18px 0;
      text-align:left;
    }

    .card {
      padding:16px;
      border-radius:20px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.14);
      cursor:pointer;
      transition:transform .12s ease,background .12s ease;
    }

    .card:hover {
      transform:translateY(-2px);
      background:rgba(255,255,255,.13);
    }

    .card strong {
      display:block;
      font-size:18px;
      margin-bottom:4px;
    }

    .card span {
      display:block;
      opacity:.75;
      font-size:13px;
      line-height:1.35;
    }


    .levelCard {
      display:grid;
      grid-template-columns:86px 1fr;
      gap:14px;
      align-items:center;
      position:relative;
      overflow:hidden;
      min-height:128px;
    }

    .levelCard::after {
      content:"";
      position:absolute;
      right:-42px;
      top:-42px;
      width:120px;
      height:120px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.13), transparent 68%);
      pointer-events:none;
    }

    .difficultyWrap {
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:6px;
      min-width:72px;
    }

    .difficultyFace {
      width:62px;
      height:62px;
      border-radius:50%;
      position:relative;
      background:linear-gradient(180deg,#7cff9e,#22b95f);
      border:3px solid rgba(255,255,255,.92);
      box-shadow:
        0 10px 22px rgba(0,0,0,.28),
        inset 0 7px 10px rgba(255,255,255,.28),
        inset 0 -8px 14px rgba(0,0,0,.18);
    }

    .difficultyFace::before {
      content:"";
      position:absolute;
      left:15px;
      top:22px;
      width:9px;
      height:10px;
      border-radius:50%;
      background:#061030;
      box-shadow:21px 0 0 #061030;
    }

    .difficultyFace::after {
      content:"";
      position:absolute;
      left:18px;
      top:38px;
      width:26px;
      height:12px;
      border-bottom:4px solid #061030;
      border-radius:0 0 999px 999px;
    }

    .faceBrow,
    .faceBrow::before,
    .faceBrow::after {
      position:absolute;
      display:block;
      content:"";
      pointer-events:none;
    }

    .faceBrow::before,
    .faceBrow::after {
      top:15px;
      width:17px;
      height:4px;
      border-radius:999px;
      background:#061030;
      opacity:0;
    }

    .faceBrow::before {
      left:10px;
      transform:rotate(18deg);
    }

    .faceBrow::after {
      right:10px;
      transform:rotate(-18deg);
    }

    .difficulty-normal { background:linear-gradient(180deg,#fff278,#ffbd2e); }
    .difficulty-hard { background:linear-gradient(180deg,#ffb14f,#ff633b); }
    .difficulty-harder { background:linear-gradient(180deg,#ff6a78,#d7194e); }
    .difficulty-insane { background:linear-gradient(180deg,#ff8cff,#8b47ff); }
    .difficulty-demon { background:linear-gradient(180deg,#4b224f,#16051d); }
    .difficulty-custom { background:linear-gradient(180deg,#7cfbff,#356fff); }

    .difficulty-hard::after,
    .difficulty-harder::after,
    .difficulty-insane::after,
    .difficulty-demon::after {
      top:42px;
      height:11px;
      border-bottom:0;
      border-top:4px solid #061030;
      border-radius:999px 999px 0 0;
    }

    .difficulty-hard .faceBrow::before,
    .difficulty-hard .faceBrow::after,
    .difficulty-harder .faceBrow::before,
    .difficulty-harder .faceBrow::after,
    .difficulty-insane .faceBrow::before,
    .difficulty-insane .faceBrow::after,
    .difficulty-demon .faceBrow::before,
    .difficulty-demon .faceBrow::after {
      opacity:1;
    }

    .difficulty-demon::before,
    .difficulty-demon::after,
    .difficulty-demon .faceBrow::before,
    .difficulty-demon .faceBrow::after {
      background:#fff;
      border-color:#fff;
      box-shadow:21px 0 0 #fff;
    }

    .difficulty-demon::after {
      background:transparent;
      box-shadow:none;
    }

    .difficultyName {
      padding:4px 8px;
      border-radius:999px;
      background:rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.13);
      font-size:11px;
      font-weight:950;
      letter-spacing:.25px;
      text-transform:uppercase;
      text-align:center;
      white-space:nowrap;
    }

    .difficultyStars {
      color:var(--yellow);
      font-size:11px;
      font-weight:950;
      text-shadow:0 0 10px rgba(255,227,81,.55);
    }

    .levelCardInfo {
      min-width:0;
      position:relative;
      z-index:1;
    }

    .levelMeta {
      margin-top:8px;
      color:#bff8ff;
      opacity:.86 !important;
      font-weight:780;
    }

    @media (hover:none), (pointer:coarse) {
      .levelCard {
        grid-template-columns:72px 1fr;
        gap:10px;
        min-height:116px;
        padding:13px;
      }

      .difficultyFace {
        width:54px;
        height:54px;
      }

      .difficultyName {
        font-size:10px;
        padding:3px 6px;
      }
    }

    .stats {
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:10px;
      margin:16px 0 20px;
    }

    .stat {
      min-width:124px;
      padding:12px 14px;
      border-radius:17px;
      background:rgba(255,255,255,.085);
      border:1px solid rgba(255,255,255,.13);
    }

    .stat strong {
      display:block;
      font-size:25px;
      color:var(--yellow);
    }

    .stat span {
      font-size:12px;
      opacity:.74;
    }

    .editorUI {
      position:absolute;
      left:12px;
      right:12px;
      bottom:0;
      display:none;
      gap:8px;
      flex-wrap:wrap;
      justify-content:center;
      align-items:center;
      padding:10px 116px;
      box-sizing:border-box;
      border-radius:22px;
      background:rgba(4,8,24,.82);
      border:1px solid rgba(255,255,255,.16);
      backdrop-filter:blur(12px);
      box-shadow:0 10px 35px rgba(0,0,0,.28);
      pointer-events:auto;
      transform:translateY(0);
      opacity:1;
      transition:transform .22s ease, opacity .22s ease;
    }

    .editorUI.visible {
      display:flex;
    }

    .editorUI.visible {
      display:grid;
      grid-template-columns:90px minmax(0,1fr) 204px;
      column-gap:12px;
      align-items:start;
    }

    .editorCenter {
      grid-column:2;
      grid-row:1;
      width:100%;
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .editorUI .legacyEditorTools,
    .editorUI .editorModeTools {
      position:static;
      grid-row:1;
    }

    .editorUI .legacyEditorTools {
      grid-column:1;
    }

    .editorUI .editorModeTools {
      grid-column:3;
      justify-self:end;
    }

    .editorUI.visible.autoHidden {
      transform:translateY(calc(100% - 28px));
      opacity:.24;
    }

    .editorUI.visible.autoHidden::before {
      content:"▲ EDITOR";
      position:absolute;
      top:4px;
      left:50%;
      transform:translateX(-50%);
      color:#fff;
      font-size:11px;
      font-weight:950;
      letter-spacing:.7px;
      text-shadow:0 0 12px rgba(34,232,255,.9);
      pointer-events:none;
    }

    .editorTopBar {
      position:absolute;
      left:14px;
      top:14px;
      z-index:9;
      display:none;
      align-items:center;
      gap:10px;
      pointer-events:auto;
    }

    .editorTopBar.visible {
      display:flex;
    }


    .colorPickerOverlay {
      position:absolute;
      inset:0;
      z-index:30;
      display:grid;
      place-items:center;
      padding:18px;
      background:rgba(1,6,22,.58);
      backdrop-filter:blur(10px);
      pointer-events:auto;
    }

    .colorPickerOverlay.hidden {
      display:none;
    }

    .colorPickerBox {
      width:min(92vw,430px);
      border-radius:28px;
      padding:22px;
      text-align:center;
      background:rgba(4,8,24,.88);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 26px 80px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.08);
    }

    .colorPickerArt {
      width:92px;
      height:92px;
      margin:0 auto 14px;
      border-radius:26px;
      position:relative;
      display:grid;
      place-items:center;
      background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,.55), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,.16), rgba(34,232,255,.12));
      border:1px solid rgba(255,255,255,.22);
      box-shadow:0 18px 42px rgba(0,0,0,.32), 0 0 36px var(--pickedColor, #22e8ff);
      overflow:hidden;
    }

    .colorPickerArt::before {
      content:"";
      width:58px;
      height:58px;
      border-radius:50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0 18%, transparent 19%),
        conic-gradient(#ff355f, #ff8a35, #ffe351, #30ff91, #22e8ff, #5048ff, #bb50ff, #ff355f);
      border:3px solid rgba(255,255,255,.92);
      box-shadow:0 0 22px rgba(255,255,255,.28), inset 0 0 0 4px rgba(255,255,255,.12);
    }

    .colorPickerArt::after {
      content:"BG";
      position:absolute;
      right:13px;
      bottom:13px;
      padding:5px 8px;
      border-radius:999px;
      background:rgba(6,16,48,.86);
      border:1px solid rgba(255,255,255,.28);
      color:#fff;
      font-size:12px;
      font-weight:1000;
      letter-spacing:.6px;
      text-shadow:0 2px 8px rgba(0,0,0,.65);
    }

    .colorPickerBox h3 {
      margin:0 0 8px;
      font-size:24px;
      text-transform:uppercase;
      letter-spacing:.5px;
    }

    .colorPickerBox p {
      margin:0 0 16px;
      opacity:.78;
      font-size:13px;
      line-height:1.45;
    }

    .colorPickerInputRow {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      margin:12px 0 16px;
    }

    .colorPickerPickLabel {
      font-size:12px;
      font-weight:950;
      letter-spacing:.8px;
      text-transform:uppercase;
      opacity:.82;
      color:var(--cyan);
    }

    .colorPickerPreview {
      min-width:172px;
      padding:15px 18px;
      border-radius:20px;
      background:linear-gradient(90deg,var(--pickedColor, #22e8ff),rgba(255,255,255,.20));
      border:2px solid rgba(255,255,255,.42);
      font-size:14px;
      font-weight:950;
      color:#fff;
      text-shadow:0 2px 8px rgba(0,0,0,.38);
      box-shadow:0 0 24px var(--pickedColor, #22e8ff), inset 0 0 0 1px rgba(255,255,255,.13);
    }

    .colorSwatches {
      display:none;
    }

    .googleColorInput {
      width:96px;
      height:58px;
      padding:0;
      border:3px solid rgba(255,255,255,.70);
      border-radius:18px;
      background:rgba(255,255,255,.12);
      cursor:pointer;
      box-shadow:0 0 24px var(--pickedColor, #22e8ff);
      overflow:hidden;
    }

    .googleColorInput::-webkit-color-swatch-wrapper {
      padding:5px;
    }

    .googleColorInput::-webkit-color-swatch {
      border:0;
      border-radius:12px;
    }

    .googleColorInput::-moz-color-swatch {
      border:0;
      border-radius:12px;
    }

    .colorSwatch {
      width:100%;
      aspect-ratio:1;
      border-radius:16px;
      border:2px solid rgba(255,255,255,.58);
      box-shadow:0 8px 18px rgba(0,0,0,.25), 0 0 14px var(--swatchColor);
      background:var(--swatchColor);
      cursor:pointer;
      position:relative;
      transition:transform .12s ease, outline .12s ease, box-shadow .12s ease;
    }

    .colorSwatch:hover {
      transform:translateY(-1px) scale(1.04);
    }

    .colorSwatch.active {
      outline:3px solid #fff;
      box-shadow:0 8px 18px rgba(0,0,0,.25), 0 0 24px var(--swatchColor), inset 0 0 0 4px rgba(255,255,255,.30);
    }

    .colorSwatch.active::after {
      content:"✓";
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      font-size:22px;
      font-weight:1000;
      color:#fff;
      text-shadow:0 2px 8px rgba(0,0,0,.75);
    }

    .colorEventLineHint {
      margin:8px auto 0;
      width:72%;
      height:5px;
      border-radius:999px;
      background:var(--pickedColor, #22e8ff);
      box-shadow:0 0 18px var(--pickedColor, #22e8ff);
    }

    .pageTabs, .palettePage, .editorActions {
      display:flex;
      justify-content:center;
      align-items:center;
      gap:7px;
      flex-wrap:wrap;
    }

    .pageTabs {
      width:100%;
      padding-bottom:4px;
      border-bottom:1px solid rgba(255,255,255,.12);
    }

    .palettePage {
      display:none;
      width:100%;
    }

    .palettePage.active {
      display:flex;
    }

    .editorActions {
      width:100%;
      padding-top:4px;
      border-top:1px solid rgba(255,255,255,.12);
    }

    .editorEraserActions {
      display:none;
      width:100%;
      justify-content:center;
      align-items:center;
      flex-wrap:wrap;
      gap:7px;
      padding:4px 0 2px;
      border-top:1px solid rgba(255,255,255,.12);
    }

    .editorUI.eraseMode .editorEraserActions {
      display:flex;
    }

    .editorEraserActions button {
      margin:0;
      padding:10px 14px;
      font-size:11px;
    }

    .editorModeTools {
      position:absolute;
      left:auto;
      right:10px;
      top:10px;
      z-index:2;
      display:flex;
      flex-direction:row;
      gap:6px;
      width:auto;
    }

    .editorModeTools.visible {
      display:flex;
    }

    .legacyEditorTools {
      position:absolute;
      left:10px;
      top:10px;
      z-index:2;
      display:flex;
      flex-direction:column;
      gap:6px;
      width:auto;
    }

    .legacyEditorModeBtn {
      width:90px;
      min-width:0;
      height:52px;
      padding:5px 7px;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:7px;
      border-radius:14px;
      color:#fff;
      background:linear-gradient(135deg,rgba(21,150,83,.86),rgba(13,92,57,.9));
      border:1px solid rgba(107,255,165,.75);
      box-shadow:inset 0 0 14px rgba(180,255,210,.10), 0 4px 12px rgba(0,0,0,.20);
      font-size:11px;
      font-weight:900;
      cursor:pointer;
    }

    .legacyEditorModeBtn:hover,
    .legacyEditorModeBtn.active {
      background:linear-gradient(135deg,#35d879,#16934f);
    }

    .editorUI.visible {
      min-height:196px;
    }

    .editorUI.viewMode,
    .editorUI.selectMode {
      min-height:92px;
      padding:10px;
      grid-template-columns:minmax(0,1fr) 204px;
      column-gap:12px;
    }

    .editorUI.viewMode .pageTabs,
    .editorUI.viewMode .palettePage,
    .editorUI.viewMode .palettePager,
    .editorUI.viewMode .editorActions,
    .editorUI.selectMode .pageTabs,
    .editorUI.selectMode .palettePage,
    .editorUI.selectMode .palettePager,
    .editorUI.selectMode .editorActions,
    .editorUI.moveMode .pageTabs,
    .editorUI.moveMode .palettePage,
    .editorUI.moveMode .palettePager,
    .editorUI.moveMode .editorActions,
    .editorUI.eraseMode .pageTabs,
    .editorUI.eraseMode .palettePage,
    .editorUI.eraseMode .palettePager,
    .editorUI.eraseMode .editorActions {
      display:none !important;
    }

    .editorUI.viewMode .legacyEditorTools,
    .editorUI.selectMode .legacyEditorTools {
      display:none !important;
    }

    .editorUI.viewMode .editorModeTools,
    .editorUI.selectMode .editorModeTools {
      grid-column:2;
    }

    .editorModeBtn {
      width:64px;
      min-width:0;
      height:64px;
      padding:6px 4px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:3px;
      border-radius:14px;
      color:#fff;
      background:linear-gradient(135deg,rgba(21,150,83,.86),rgba(13,92,57,.9));
      border:1px solid rgba(107,255,165,.75);
      box-shadow:inset 0 0 14px rgba(180,255,210,.10), 0 4px 12px rgba(0,0,0,.20);
      font-size:10px;
      font-weight:900;
      cursor:pointer;
    }

    .editorModeBtn:hover {
      background:linear-gradient(135deg,rgba(38,194,105,.95),rgba(22,129,73,.96));
    }

    .editorModeBtn.active {
      background:linear-gradient(135deg,#35d879,#16934f);
      outline:2px solid #c1ffd5;
      box-shadow:0 0 0 4px rgba(53,216,121,.20), inset 0 0 14px rgba(255,255,255,.14), 0 4px 14px rgba(0,0,0,.22);
    }

    .editorObjectInspector[hidden] {
      display:none !important;
    }

    .editorObjectInspector {
      position:absolute;
      left:50%;
      bottom:calc(100% + 12px);
      z-index:12;
      width:min(430px, calc(100vw - 34px));
      padding:12px;
      display:flex;
      flex-direction:column;
      gap:10px;
      transform:translateX(-50%);
      border:1px solid rgba(255,255,255,.22);
      border-radius:20px;
      background:rgba(4,8,24,.96);
      box-shadow:0 20px 55px rgba(0,0,0,.48), inset 0 0 18px rgba(255,255,255,.05);
      backdrop-filter:blur(16px);
    }

    .editorObjectInspectorHeader {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color:#fff;
      font-size:13px;
    }

    .inspectorCloseBtn {
      width:30px;
      min-width:30px;
      height:30px;
      padding:0;
      border-radius:9px;
      color:#fff;
      background:rgba(255,53,95,.78);
      border:1px solid rgba(255,170,185,.7);
      font-size:22px;
      line-height:1;
    }

    .editorInspectorTools {
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:7px;
    }

    .inspectorToolBtn,
    .inspectorActionBtn {
      min-width:0;
      padding:8px 6px;
      border-radius:12px;
      color:#fff;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:none;
      font-size:10px;
      font-weight:900;
    }

    .inspectorToolBtn {
      display:grid;
      place-items:center;
      gap:3px;
    }

    .inspectorToolBtn.active,
    .inspectorToolBtn:hover,
    .inspectorActionBtn:hover {
      background:linear-gradient(135deg,#35d879,#16934f);
      border-color:#baffd0;
    }

    .inspectorToolIcon {
      width:25px;
      height:25px;
      display:grid;
      place-items:center;
      border-radius:8px;
      color:#ffe351;
      background:rgba(4,8,24,.6);
      font-size:21px;
      line-height:1;
    }

    .inspectorRotateIcon {
      font-size:25px;
    }

    .inspectorColorIcon {
      background:conic-gradient(#ff355f, #ffe351, #30ff91, #22e8ff, #bb50ff, #ff355f);
      border:2px solid #fff;
    }

    .inspectorToolBtn small {
      color:rgba(255,255,255,.7);
      font-size:9px;
    }

    .editorInspectorSection {
      min-height:58px;
      padding:9px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      border-radius:14px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.11);
    }

    .editorInspectorSection[hidden] {
      display:none !important;
    }

    .rotationDial {
      position:relative;
      width:58px;
      height:58px;
      flex:0 0 58px;
      border-radius:50%;
      border:2px solid rgba(124,251,255,.7);
      background:radial-gradient(circle,rgba(34,232,255,.18),rgba(4,8,24,.75) 62%);
      box-shadow:0 0 16px rgba(34,232,255,.25);
      touch-action:none;
      cursor:grab;
    }

    .rotationDial:active {
      cursor:grabbing;
    }

    .rotationDialMark {
      position:absolute;
      color:#fff;
      font-size:10px;
      line-height:1;
      text-shadow:0 0 8px #22e8ff;
    }

    .rotationDialMarkTop { top:3px; left:24px; }
    .rotationDialMarkRight { top:24px; right:4px; }
    .rotationDialMarkBottom { bottom:3px; left:24px; }
    .rotationDialMarkLeft { top:24px; left:4px; }

    .rotationDialKnob {
      position:absolute;
      left:24px;
      top:4px;
      width:10px;
      height:10px;
      display:grid;
      place-items:center;
      border-radius:50%;
      color:#ffe351;
      background:#ffe351;
      box-shadow:0 0 12px #ffe351;
      transform-origin:5px 25px;
      font-size:12px;
    }

    .inspectorActionBtn {
      min-width:105px;
      background:linear-gradient(135deg,rgba(21,150,83,.86),rgba(13,92,57,.9));
    }

    .editorInspectorSection label {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      width:100%;
      color:#fff;
      font-size:11px;
      font-weight:900;
    }

    .editorInspectorSection input[type="range"] {
      width:100%;
      accent-color:#35d879;
    }

    .editorSizeControl {
      flex-direction:column;
      align-items:stretch;
      gap:5px;
    }

    .inspectorRangeLabels {
      display:flex;
      justify-content:space-between;
      color:rgba(255,255,255,.58);
      font-size:9px;
    }

    .editorColorPalette {
      width:100%;
      display:grid;
      grid-template-columns:repeat(10, 1fr);
      gap:6px;
    }

    .editorColorSwatch {
      width:100%;
      aspect-ratio:1;
      padding:0;
      min-width:0;
      border-radius:8px;
      border:2px solid rgba(255,255,255,.42);
      background:var(--swatchColor);
      box-shadow:0 0 10px var(--swatchColor);
    }

    .editorColorSwatch.active {
      outline:2px solid #fff;
      outline-offset:2px;
    }

    .editorModeIcon {
      width:27px;
      height:27px;
      flex:0 0 27px;
      display:grid;
      place-items:center;
      border-radius:8px;
      background:rgba(4,8,24,.5);
      color:#ffe351;
      font-size:20px;
      line-height:1;
    }

    .pageBtn, .toolBtn {
      min-width:74px;
      padding:10px 12px;
      margin:0;
      font-size:12px;
    }

    .pageBtn {
      color:#fff;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.15);
      box-shadow:none;
    }

    .pageBtn.active {
      background:linear-gradient(90deg,rgba(34,232,255,.38),rgba(187,80,255,.38));
      outline:2px solid rgba(255,255,255,.65);
    }

    .toolBtn.active {
      outline:2px solid #fff;
      box-shadow:0 0 0 5px rgba(34,232,255,.18);
    }

    .iconTool {
      min-width:84px;
      height:74px;
      padding:7px 8px;
      border-radius:18px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:4px;
      color:#fff;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.16);
      box-shadow:inset 0 0 18px rgba(255,255,255,.05);
    }

    .iconTool span:last-child {
      font-size:11px;
      line-height:1;
      opacity:.92;
    }

    .iconPreview {
      position:relative;
      width:34px;
      height:34px;
      display:block;
      filter:drop-shadow(0 0 8px rgba(34,232,255,.55));
    }


    /* Палитра показывает два ряда; стрелки переключают остальные предметы. */
    .palettePage {
      max-height:155px;
      overflow:hidden;
      align-content:flex-start;
      padding:2px 4px 6px;
      display:none;
      grid-template-columns:repeat(5, minmax(0, 84px));
      grid-auto-rows:74px;
      justify-content:center;
      gap:7px;
    }

    .palettePage.active {
      display:grid;
    }

    .palettePage .iconTool {
      width:84px;
      min-width:0;
    }

    .palettePage .toolBtn[hidden] {
      display:none !important;
    }

    .palettePager {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:32px;
    }

    .palettePager[hidden] {
      display:none !important;
    }

    .palettePagerBtn {
      width:42px;
      min-width:42px;
      height:30px;
      padding:0;
      border-radius:10px;
      color:#fff;
      background:rgba(255,255,255,.12);
      border:1px solid rgba(255,255,255,.22);
      font-size:18px;
      line-height:1;
    }

    .palettePagerBtn:not(:disabled):hover {
      background:linear-gradient(135deg,#35d879,#16934f);
    }

    .palettePageReadout {
      min-width:42px;
      color:rgba(255,255,255,.72);
      font-size:11px;
      font-weight:900;
      text-align:center;
    }

    .autoBlockIcon::before,
    .autoSpikeIcon::before {
      content:"";
      position:absolute;
      border:2px solid #fff;
      box-shadow:inset 0 0 0 4px rgba(255,255,255,.12), 0 0 12px var(--iconGlow, #22e8ff);
      background:linear-gradient(135deg,var(--iconA,#22e8ff),var(--iconB,#1d6bff));
    }

    .autoBlockIcon[data-shape="rect"]::before { inset:5px; border-radius:3px; }
    .autoBlockIcon[data-shape="wide"]::before { left:0; right:0; top:11px; height:13px; border-radius:3px; }
    .autoBlockIcon[data-shape="tall"]::before { top:0; bottom:0; left:11px; width:13px; border-radius:3px; }
    .autoBlockIcon[data-shape="chunk"]::before { inset:2px; border-radius:5px; }
    .autoBlockIcon[data-shape="mini"]::before { inset:11px; border-radius:3px; }
    .autoBlockIcon[data-shape="tri"]::before { inset:3px; clip-path:polygon(50% 0%,100% 100%,0% 100%); border-radius:0; }
    .autoBlockIcon[data-shape="triDown"]::before { inset:3px; clip-path:polygon(0% 0%,100% 0%,50% 100%); border-radius:0; }
    .autoBlockIcon[data-shape="slope"]::before { inset:3px; clip-path:polygon(0% 100%,100% 0%,100% 100%); border-radius:0; }
    .autoBlockIcon[data-shape="slopeBack"]::before { inset:3px; clip-path:polygon(0% 0%,100% 100%,0% 100%); border-radius:0; }
    .autoBlockIcon[data-shape="diamond"]::before { inset:5px; transform:rotate(45deg); border-radius:3px; }
    .autoBlockIcon[data-shape="circle"]::before { inset:4px; border-radius:50%; }
    .autoBlockIcon[data-shape="glass"]::before { inset:5px; border-radius:4px; background:linear-gradient(135deg,rgba(255,255,255,.82),var(--iconA,#22e8ff)); }

    .autoSpikeIcon::before {
      left:3px;
      top:4px;
      width:28px;
      height:28px;
      clip-path:polygon(50% 0%,100% 100%,0% 100%);
      border:0;
      filter:drop-shadow(0 0 8px var(--iconGlow,#fff));
    }

    .autoSpikeIcon[data-shape="mini"]::before { left:8px; top:11px; width:18px; height:18px; }
    .autoSpikeIcon[data-shape="tall"]::before { left:6px; top:-2px; width:22px; height:36px; }
    .autoSpikeIcon[data-shape="double"]::before { left:0; top:7px; width:34px; height:25px; clip-path:polygon(0% 100%,22% 0%,44% 100%,56% 100%,78% 0%,100% 100%); }
    .autoSpikeIcon[data-shape="triple"]::before { left:0; top:8px; width:34px; height:24px; clip-path:polygon(0% 100%,15% 0%,30% 100%,35% 100%,50% 0%,65% 100%,70% 100%,85% 0%,100% 100%); }
    .autoSpikeIcon[data-shape="saw"]::before { inset:1px; width:auto; height:auto; border-radius:50%; clip-path:polygon(50% 0%,60% 28%,88% 12%,72% 40%,100% 50%,72% 60%,88% 88%,60% 72%,50% 100%,40% 72%,12% 88%,28% 60%,0% 50%,28% 40%,12% 12%,40% 28%); }
    .autoSpikeIcon[data-shape="diamond"]::before { left:6px; top:6px; width:22px; height:22px; clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); }

    .iconBlock::before {
      content:"";
      position:absolute;
      inset:4px;
      background:linear-gradient(135deg,#22e8ff,#1d6bff);
      border:2px solid #fff;
      box-shadow:inset 0 0 0 4px rgba(255,255,255,.12);
    }

    .iconWide::before {
      content:"";
      position:absolute;
      left:1px;
      right:1px;
      top:9px;
      height:17px;
      background:linear-gradient(135deg,#22e8ff,#1d6bff);
      border:2px solid #fff;
    }

    .iconTall::before {
      content:"";
      position:absolute;
      top:1px;
      bottom:1px;
      left:9px;
      width:17px;
      background:linear-gradient(135deg,#22e8ff,#1d6bff);
      border:2px solid #fff;
    }

    .iconLong::before {
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:11px;
      height:13px;
      background:linear-gradient(135deg,#22e8ff,#1d6bff);
      border:2px solid #fff;
    }

    .iconChunk::before {
      content:"";
      position:absolute;
      inset:3px;
      background:linear-gradient(135deg,#35f3ff,#bb50ff);
      border:2px solid #fff;
      box-shadow:inset 0 0 0 7px rgba(255,255,255,.10);
    }

    .iconGlass::before {
      content:"";
      position:absolute;
      inset:5px;
      border:2px solid #fff;
      background:linear-gradient(135deg,rgba(255,255,255,.70),rgba(34,232,255,.26));
      box-shadow:inset 0 0 12px rgba(255,255,255,.45), 0 0 10px rgba(34,232,255,.55);
    }

    .iconMiniBlock::before,
    .iconMegaLong::before,
    .iconPillar::before,
    .iconBigChunk::before,
    .iconYellowBlock::before,
    .iconRedBlock::before,
    .iconGreenBlock::before,
    .iconDiamondBlock::before,
    .iconCircleBlock::before {
      content:"";
      position:absolute;
      border:2px solid #fff;
      box-shadow:inset 0 0 0 4px rgba(255,255,255,.11), 0 0 11px rgba(34,232,255,.45);
    }

    .iconMiniBlock::before { inset:10px; background:linear-gradient(135deg,#22e8ff,#1d6bff); }
    .iconMegaLong::before { left:-2px; right:-2px; top:12px; height:10px; background:linear-gradient(135deg,#22e8ff,#1d6bff); }
    .iconPillar::before { top:-2px; bottom:-2px; left:12px; width:10px; background:linear-gradient(135deg,#22e8ff,#1d6bff); }
    .iconBigChunk::before { inset:1px; background:linear-gradient(135deg,#1458dc,#bb50ff); }
    .iconYellowBlock::before { inset:4px; background:linear-gradient(135deg,#fff8a0,#ffe351,#ff8b1e); }
    .iconRedBlock::before { inset:4px; background:linear-gradient(135deg,#ffb3b3,#ff355f,#8c0b2a); }
    .iconGreenBlock::before { inset:4px; background:linear-gradient(135deg,#d7ff9c,#30ff91,#087a45); }
    .iconDiamondBlock::before { inset:5px; transform:rotate(45deg); border-radius:5px; background:linear-gradient(135deg,#ffffff,#22e8ff,#bb50ff); }
    .iconCircleBlock::before { inset:4px; border-radius:50%; background:linear-gradient(135deg,#ffffff,#22e8ff,#1d6bff); }

    .iconTriBlock::before,
    .iconTriBlockFlip::before,
    .iconSlopeBlock::before {
      content:"";
      position:absolute;
      width:0;
      height:0;
      filter:drop-shadow(0 0 8px rgba(34,232,255,.68));
    }

    .iconTriBlock::before {
      left:4px;
      top:5px;
      border-left:13px solid transparent;
      border-right:13px solid transparent;
      border-bottom:25px solid #22e8ff;
    }

    .iconTriBlockFlip::before {
      left:4px;
      top:4px;
      border-left:13px solid transparent;
      border-right:13px solid transparent;
      border-top:25px solid #ffe351;
    }

    .iconSlopeBlock::before {
      left:4px;
      top:5px;
      border-left:26px solid #30ff91;
      border-top:25px solid transparent;
    }

    .iconSpike::before {
      content:"";
      position:absolute;
      left:3px;
      top:3px;
      width:0;
      height:0;
      border-left:14px solid transparent;
      border-right:14px solid transparent;
      border-bottom:27px solid #fff;
      filter:drop-shadow(0 0 6px #fff);
    }

    .iconSmallSpike::before {
      content:"";
      position:absolute;
      left:6px;
      bottom:4px;
      width:0;
      height:0;
      border-left:11px solid transparent;
      border-right:11px solid transparent;
      border-bottom:18px solid #fff;
      filter:drop-shadow(0 0 6px #fff);
    }

    .iconDoubleSpike::before,
    .iconDoubleSpike::after {
      content:"";
      position:absolute;
      bottom:4px;
      width:0;
      height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:23px solid #fff;
      filter:drop-shadow(0 0 6px #fff);
    }

    .iconDoubleSpike::before { left:2px; }
    .iconDoubleSpike::after { right:2px; }

    .iconSaw::before {
      content:"✹";
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      color:#ff355f;
      font-size:32px;
      line-height:1;
      text-shadow:0 0 12px #ff355f;
    }



    .iconTallSpike::before {
      content:"";
      position:absolute;
      left:5px;
      top:-4px;
      width:0;
      height:0;
      border-left:12px solid transparent;
      border-right:12px solid transparent;
      border-bottom:36px solid #fff;
      filter:drop-shadow(0 0 6px #fff);
    }

    .iconTripleSpike::before,
    .iconTripleSpike::after {
      content:"";
      position:absolute;
      top:7px;
      width:0;
      height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:24px solid #fff;
      filter:drop-shadow(0 0 6px #fff);
    }

    .iconTripleSpike::before { left:0; }
    .iconTripleSpike::after { right:0; }
    .iconTripleSpike span {
      position:absolute;
      left:9px;
      top:4px;
      width:0;
      height:0;
      border-left:8px solid transparent;
      border-right:8px solid transparent;
      border-bottom:27px solid #fff;
      filter:drop-shadow(0 0 6px #fff);
      display:block;
    }

    .iconDiamondSpike::before {
      content:"";
      position:absolute;
      left:6px;
      top:4px;
      width:22px;
      height:22px;
      transform:rotate(45deg);
      background:linear-gradient(135deg,#ffffff,#ff355f);
      border:2px solid #fff;
      box-shadow:0 0 12px rgba(255,53,95,.75);
    }

    .iconCoin::before {
      content:"★";
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:#ffe351;
      color:#6b4a00;
      border:2px solid #fff7ad;
      font-size:20px;
      line-height:1;
    }

    .iconPortal::before {
      content:"";
      position:absolute;
      left:8px;
      top:0;
      width:18px;
      height:34px;
      border-radius:50%;
      border:4px solid #30ff91;
      background:rgba(48,255,145,.18);
      box-shadow:0 0 14px #30ff91;
    }

    .iconPortalCube::before {
      border-color:#ffe351;
      background:rgba(255,227,81,.18);
      box-shadow:0 0 14px #ffe351;
    }

    .iconPortalUfo::before {
      border-color:#ff80fb;
      background:rgba(255,128,251,.18);
      box-shadow:0 0 14px #ff80fb;
    }

    .iconPortalRobot::before {
      border-color:#22e8ff;
      background:rgba(34,232,255,.18);
      box-shadow:0 0 14px #22e8ff;
    }


    .iconPortalWave::before {
      border-color:#ff355f;
      background:rgba(255,53,95,.18);
      box-shadow:0 0 14px #ff355f;
    }

    .iconPortalFlip::before {
      border-color:#ffffff;
      background:rgba(255,255,255,.16);
      box-shadow:0 0 14px #ffffff;
    }

    .iconPortalNormal::before {
      border-color:#30ff91;
      background:rgba(48,255,145,.16);
      box-shadow:0 0 14px #30ff91;
    }

    .iconPortalBall::before {
      border-color:#ff8a35;
      background:rgba(255,138,53,.18);
      box-shadow:0 0 14px #ff8a35;
    }

    .iconPortalSpider::before {
      border-color:#ffffff;
      background:rgba(187,80,255,.18);
      box-shadow:0 0 14px #bb50ff;
    }

    .iconPortalMini::before {
      border-color:#7cfbff;
      background:rgba(124,251,255,.16);
      box-shadow:0 0 14px #7cfbff;
      transform:scale(.72);
      transform-origin:center;
    }

    .iconPortalBig::before {
      border-color:#ffe351;
      background:rgba(255,227,81,.16);
      box-shadow:0 0 14px #ffe351;
      transform:scale(1.12);
      transform-origin:center;
    }

    .iconPortalSizeNormal::before {
      border-color:#ffffff;
      background:rgba(255,255,255,.18);
      box-shadow:0 0 14px #ffffff;
      transform:scale(1);
      transform-origin:center;
    }

    .iconPortalSizeNormal::after {
      content:"1";
      position:absolute;
      left:13px;
      top:8px;
      font-size:16px;
      font-weight:1000;
      color:#061030;
      text-shadow:0 1px 0 #fff;
      pointer-events:none;
    }

    .iconEventSlow::before {
      content:"←";
      color:#7cfbff;
      text-shadow:0 0 12px #7cfbff;
    }

    .iconEventUltra::before {
      content:"➜➜➜";
      color:#ff8a35;
      font-size:17px;
      letter-spacing:-7px;
      text-shadow:0 0 12px #ff8a35;
    }

    .iconEventZoomIn::before { content:"＋"; color:#ffffff; text-shadow:0 0 12px #ffffff; }
    .iconEventZoomOut::before { content:"−"; color:#ffe351; text-shadow:0 0 12px #ffe351; }
    .iconEventPulse::before { content:"✦"; color:#ff80fb; text-shadow:0 0 12px #ff80fb; }

    .iconEventColor {
      border-radius:50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0 21%, transparent 22%),
        conic-gradient(from -35deg, #ff355f, #ff8a35, #ffe351, #30ff91, #22e8ff, #5048ff, #bb50ff, #ff355f);
      border:2px solid rgba(255,255,255,.92);
      box-shadow:
        0 0 16px rgba(34,232,255,.85),
        0 0 28px rgba(187,80,255,.46),
        inset 0 0 0 3px rgba(255,255,255,.12);
    }

    .iconEventColor::before {
      content:"";
      position:absolute;
      left:7px;
      top:7px;
      width:20px;
      height:20px;
      border-radius:50%;
      background:radial-gradient(circle at 32% 28%, #fff, transparent 26%), conic-gradient(#ff355f,#ffe351,#30ff91,#22e8ff,#bb50ff,#ff355f);
      box-shadow:inset 0 0 0 2px rgba(255,255,255,.82), 0 0 12px rgba(255,255,255,.60);
    }

    .iconEventColor::after {
      content:"BG";
      position:absolute;
      left:8px;
      right:8px;
      bottom:5px;
      height:10px;
      display:grid;
      place-items:center;
      border-radius:999px;
      background:rgba(6,16,48,.78);
      color:#fff;
      font-size:8px;
      font-weight:1000;
      letter-spacing:.2px;
      text-shadow:0 1px 4px rgba(0,0,0,.7);
    }

    .editorMusicSelect {
      min-width:156px;
      color:#fff;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.16);
      box-shadow:none;
    }

    .editorMusicSelect option {
      color:#061030;
      background:#f8fbff;
    }

    .iconErase::before {
      content:"";
      position:absolute;
      left:6px;
      top:9px;
      width:24px;
      height:16px;
      border-radius:5px;
      background:linear-gradient(135deg,#ff355f,#ffb347);
      border:2px solid #fff;
      transform:rotate(-22deg);
    }

    .iconEvent::before {
      content:"";
      position:absolute;
      left:2px;
      top:-3px;
      width:32px;
      height:36px;
      display:grid;
      place-items:center;
      font-size:30px;
      line-height:1;
    }

    .iconEventSlow::before { content:"←"; color:#7cfbff; text-shadow:0 0 12px #7cfbff; }
    .iconEventUltra::before { content:"➜➜➜"; color:#ff8a35; font-size:17px; letter-spacing:-7px; text-shadow:0 0 12px #ff8a35; }
    .iconEventZoomIn::before { content:"＋"; color:#ffffff; text-shadow:0 0 12px #ffffff; }
    .iconEventZoomOut::before { content:"−"; color:#ffe351; text-shadow:0 0 12px #ffe351; }
    .iconEventPulse::before { content:"✦"; color:#ff80fb; text-shadow:0 0 12px #ff80fb; }
    .iconEventShake::before { content:"≈"; color:#ff9f43; text-shadow:0 0 12px #ff9f43; }
    .iconEventFlash::before { content:"✹"; color:#ffffff; text-shadow:0 0 12px #ffffff; }
    .iconEventHide::before { content:"−"; color:#bb50ff; text-shadow:0 0 12px #bb50ff; }
    .iconEventShow::before { content:"＋"; color:#30ff91; text-shadow:0 0 12px #30ff91; }
    .iconEventEnd::before { content:"■"; color:#ff355f; text-shadow:0 0 12px #ff355f; }


    .iconSpeed1::before,
    .iconSpeed2::before,
    .iconSpeed3::before {
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      font-weight:950;
      line-height:1;
      transform:translateX(1px);
    }

    .iconSpeed1::before {
      content:"➜";
      color:#22e8ff;
      font-size:31px;
      text-shadow:0 0 12px #22e8ff;
    }

    .iconSpeed2::before {
      content:"➜➜";
      color:#ff355f;
      font-size:22px;
      letter-spacing:-8px;
      text-shadow:0 0 12px #ff355f;
    }

    .iconSpeed3::before {
      content:"➜➜➜";
      color:#ffe351;
      font-size:17px;
      letter-spacing:-7px;
      text-shadow:0 0 12px #ffe351;
    }

    .rotateReadout {
      color:#ffe351;
      font-weight:950;
    }

    .hamburgerBtn {
      position:absolute;
      right:14px;
      top:66px;
      width:48px;
      height:48px;
      margin:0;
      padding:0;
      border-radius:15px;
      display:none;
      place-items:center;
      pointer-events:auto;
      background:rgba(4,8,24,.78);
      border:1px solid rgba(255,255,255,.2);
      box-shadow:0 10px 35px rgba(0,0,0,.28), inset 0 0 18px rgba(255,255,255,.05);
      cursor:pointer;
      backdrop-filter:blur(12px);
      z-index:8;
    }

    .hamburgerBtn.visible {
      display:grid;
    }

    .hamburgerLines,
    .hamburgerLines::before,
    .hamburgerLines::after {
      content:"";
      width:24px;
      height:3px;
      border-radius:99px;
      background:#fff;
      box-shadow:0 0 10px rgba(34,232,255,.75);
      display:block;
    }

    .hamburgerLines {
      position:relative;
      margin:0;
      transform:none;
    }

    .hamburgerLines::before,
    .hamburgerLines::after {
      position:absolute;
      left:0;
    }

    .hamburgerLines::before { top:-8px; }
    .hamburgerLines::after { top:8px; }


    .musicPanel {
      position:absolute;
      left:14px;
      bottom:14px;
      z-index:9;
      display:none;
      align-items:center;
      gap:8px;
      max-width:min(560px, calc(100% - 28px));
      padding:9px 10px;
      border-radius:999px;
      background:rgba(4,8,24,.78);
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter:blur(12px);
      box-shadow:0 10px 35px rgba(0,0,0,.28);
      pointer-events:auto;
    }

    .musicPanel.visible {
      display:flex;
    }

    .musicLabel {
      font-size:12px;
      font-weight:950;
      letter-spacing:.4px;
      text-transform:uppercase;
      color:var(--cyan);
      white-space:nowrap;
    }

    .musicSelect {
      min-width:148px;
      max-width:220px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      padding:10px 34px 10px 12px;
      color:var(--white);
      background:rgba(255,255,255,.10);
      outline:0;
      font-weight:850;
      cursor:pointer;
    }

    .musicSelect option {
      color:#061030;
      background:#f8fbff;
    }

    .musicSmallBtn {
      min-width:70px;
      padding:10px 13px;
      margin:0;
      font-size:12px;
      box-shadow:0 8px 22px rgba(34,232,255,.22);
    }

    /* removed unused checkpoint styles */

    .editorHelp {
      position:absolute;
      left:14px;
      top:78px;
      max-width:min(520px, calc(100% - 28px));
      padding:10px 12px;
      border-radius:18px;
      background:rgba(4,8,24,.68);
      border:1px solid rgba(255,255,255,.14);
      font-size:13px;
      font-weight:750;
      line-height:1.45;
      display:none;
      pointer-events:none;
    }

    .editorHelp.visible {
      display:block;
    }

    .mobileJump {
      position:absolute;
      right:18px;
      bottom:18px;
      width:88px;
      height:88px;
      border-radius:50%;
      display:none;
      place-items:center;
      pointer-events:auto;
      user-select:none;
      background:rgba(255,255,255,.105);
      border:1px solid rgba(255,255,255,.24);
      backdrop-filter:blur(10px);
      box-shadow:0 12px 34px rgba(0,0,0,.28);
      font-size:12px;
      font-weight:950;
    }

    .tip {
      position:absolute;
      left:50%;
      bottom:18px;
      transform:translateX(-50%);
      padding:8px 12px;
      border-radius:999px;
      background:rgba(0,0,0,.28);
      border:1px solid rgba(255,255,255,.12);
      font-size:12px;
      font-weight:800;
      opacity:.82;
      pointer-events:none;
      white-space:nowrap;
    }

    .credits {
      margin-top:16px;
      opacity:.65;
      font-size:12px;
      line-height:1.4;
    }

    @media (hover:none), (pointer:coarse) {
      .wrap {
        width:100vw;
        height:100dvh;
        border-radius:0;
      }

      .topbar {
        top:10px;
        left:10px;
        right:10px;
      }

      .badge {
        font-size:12px;
        padding:8px 10px;
      }

      .progressBox {
        width:52vw;
      }

      .panel {
        padding:22px 16px;
      }

      .mainCircleBtn {
        width:132px;
        min-width:132px;
        height:132px;
      }

      .menuPlayIcon {
        font-size:84px;
      }

      .menuTextBig {
        font-size:24px;
      }

      .mainCircleBtn .menuLabel {
        font-size:14px;
      }

      .mobileJump {
        display:grid;
      }

      .tip {
        display:none;
      }

      .editorHelp {
        top:70px;
        font-size:12px;
      }

      .toolBtn {
        min-width:64px;
        padding:9px 9px;
      }

      .editorModeBtn {
        width:56px;
        height:56px;
        gap:2px;
        font-size:9px;
      }

      .editorModeTools {
        gap:4px;
        max-width:calc(100% - 20px);
      }

      .legacyEditorTools {
        gap:4px;
      }

      .legacyEditorModeBtn {
        width:84px;
        height:46px;
        gap:4px;
        font-size:10px;
      }

      .editorUI.visible {
        min-height:180px;
        grid-template-columns:84px minmax(0,1fr) 176px;
        column-gap:6px;
        padding:8px;
      }

      .editorUI.viewMode,
      .editorUI.selectMode {
        min-height:92px;
        padding:8px;
        grid-template-columns:minmax(0,1fr) 176px;
        column-gap:6px;
      }

      .editorModeIcon {
        width:22px;
        height:22px;
        flex-basis:22px;
        font-size:17px;
      }


      .musicPanel {
        left:10px;
        right:10px;
        bottom:112px;
        justify-content:center;
        border-radius:22px;
        padding:8px;
        gap:6px;
      }

      .musicLabel {
        display:none;
      }

      .musicSelect {
        min-width:0;
        flex:1;
        max-width:none;
        font-size:12px;
      }

      .musicSmallBtn {
        min-width:56px;
        padding:10px 9px;
      }
    }

    @media (max-width:720px) {
      .wrap {
        width:100vw;
        height:100dvh;
        min-height:0;
        border-radius:0;
      }

      .screen {
        padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
      }

      .screen.menuScreen {
        align-items:start;
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
      }

      .screen.menuScreen > .panel {
        max-height:none;
        margin:0 auto;
        overflow:visible;
      }

      .screenHeader {
        position:sticky;
        top:0;
        z-index:3;
        min-height:46px;
        margin:-20px -14px 14px;
        padding:10px 14px;
        background:rgba(7,24,70,.96);
        border-bottom:1px solid rgba(255,255,255,.12);
      }

      .screenHeaderTitle {
        display:block;
      }

      .screenHeaderSpacer {
        width:72px;
      }

      .duplicateBackBtn {
        display:none;
      }

      .screenActions {
        position:sticky;
        bottom:0;
        z-index:2;
        margin:12px -14px -20px;
        padding:10px 14px max(10px, env(safe-area-inset-bottom));
        background:linear-gradient(180deg, rgba(7,24,70,0), rgba(7,24,70,.98) 22%);
      }

      .screenBackBtn {
        min-width:68px;
        min-height:34px;
        padding:7px 10px;
        font-size:11px;
      }

      .screenHeader + h2 {
        margin-bottom:8px;
        font-size:clamp(25px,7vw,32px);
      }

      .menuScreen .subtitle {
        max-width:560px;
        margin-bottom:12px;
        font-size:12px;
        line-height:1.4;
      }

      .menuScreen .progressNotice {
        margin-bottom:10px;
        padding:8px 10px;
        font-size:11px;
        line-height:1.35;
      }

      .panel {
        width:100%;
        max-height:100%;
        padding:20px 14px;
        border-radius:22px;
      }

      .mainMenuPanel {
        padding:18px 8px;
      }

      .mainMenuPanel::before {
        width:min(78vw,340px);
        height:min(78vw,340px);
      }

      .mainMenuPanel .subtitle {
        margin-bottom:16px;
        font-size:13px;
      }

      .mainMenuButtons {
        flex-wrap:nowrap;
        gap:clamp(6px,2vw,12px);
      }

      .mainCircleBtn {
        width:clamp(88px,28vw,132px);
        min-width:0;
        height:clamp(88px,28vw,132px);
        gap:5px;
      }

      .mainCircleBtn .menuLabel {
        font-size:clamp(11px,3.2vw,14px);
      }

      .menuCubeIcon {
        width:clamp(42px,12vw,58px);
        height:clamp(42px,12vw,58px);
        border-radius:12px;
      }

      .menuCubeIcon::before,
      .menuCubeIcon::after {
        top:27%;
        width:8px;
        height:8px;
      }

      .menuCubeIcon::before { left:23%; }
      .menuCubeIcon::after { right:23%; }

      .menuCubeIcon .cubeMouth {
        left:23%;
        right:23%;
        bottom:22%;
      }

      .menuPlayIcon {
        font-size:clamp(58px,20vw,84px);
      }

      .editorPictureIcon {
        width:clamp(52px,15vw,68px);
        height:clamp(42px,12vw,54px);
        border-radius:12px;
      }

      .skinsGrid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin:12px 0 14px;
      }

      .skinPalettePanel {
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
      }

      .skinPaletteGrid {
        grid-template-columns:repeat(8, 22px);
        gap:6px;
      }

      .skinPaletteSwatch {
        width:22px;
        height:22px;
      }

      .skinCard {
        gap:7px;
        padding:12px 7px 10px;
        border-radius:18px;
      }

      .skinPreview {
        width:54px;
        height:54px;
        border-radius:14px;
      }

      .skinPreview::before,
      .skinPreview::after {
        width:8px;
        height:8px;
        top:14px;
      }

      .skinPreview::before { left:12px; }
      .skinPreview::after { right:12px; }

      .skinPreview span {
        left:12px;
        right:12px;
        bottom:12px;
        height:5px;
      }

      .skinName {
        font-size:11px;
        letter-spacing:.2px;
      }

      .skinHint {
        font-size:10px;
      }

      .levelGrid {
        grid-template-columns:1fr;
        gap:8px;
        margin:12px 0 14px;
      }

      .levelCard {
        grid-template-columns:58px 1fr;
        gap:9px;
        min-height:94px;
        padding:10px;
        border-radius:16px;
      }

      .difficultyWrap {
        min-width:52px;
        gap:4px;
      }

      .difficultyFace {
        width:48px;
        height:48px;
        border-width:2px;
        transform:scale(.9);
      }

      .difficultyFace::before {
        left:11px;
        top:16px;
        width:7px;
        height:8px;
        box-shadow:17px 0 0 #061030;
      }

      .difficultyFace::after {
        left:13px;
        top:29px;
        width:20px;
        border-bottom-width:3px;
      }

      .difficultyName {
        max-width:58px;
        overflow:hidden;
        text-overflow:ellipsis;
        font-size:9px;
      }

      .difficultyStars {
        font-size:10px;
      }

      .levelCard .card strong,
      .levelCard strong {
        margin-bottom:3px;
        font-size:15px;
        line-height:1.15;
      }

      .levelCard .card span,
      .levelCard span {
        font-size:11px;
        line-height:1.3;
      }

      .levelCardInfo {
        overflow:hidden;
      }

      .levelCardInfo > span:not(.levelMeta) {
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow:hidden;
      }

      .levelMeta {
        margin-top:5px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      .colorPickerBox {
        width:100%;
        max-height:100%;
        overflow:auto;
        padding:18px 14px;
      }

      .colorPickerInputRow {
        flex-wrap:wrap;
        gap:8px;
      }

      .colorPickerPreview {
        min-width:140px;
      }

      .topbar {
        top:max(8px, env(safe-area-inset-top));
        left:max(8px, env(safe-area-inset-left));
        right:max(8px, env(safe-area-inset-right));
        gap:8px;
      }

      .badge {
        max-width:46vw;
        padding:7px 9px;
        font-size:11px;
      }

      .progressBox {
        width:48vw;
        padding:8px 9px 9px;
      }

      .progressText {
        gap:6px;
        font-size:10px;
      }

      .editorTopBar {
        left:max(10px, env(safe-area-inset-left));
        top:max(10px, env(safe-area-inset-top));
      }

      .editorTopTitle {
        display:none;
      }

      .editorHelp {
        left:10px;
        right:10px;
        max-width:none;
        top:58px;
        padding:8px 10px;
        font-size:11px;
        line-height:1.35;
      }
    }

    @media (max-height:560px) {
      .panel {
        max-height:calc(100dvh - 16px);
        padding:14px;
      }

      .mainMenuPanel .subtitle {
        display:none;
      }

      .mainMenuPanel h1 {
        margin-bottom:12px;
        font-size:clamp(30px,8vh,52px);
      }

      .mainMenuButtons {
        margin:0;
      }

      .mainCircleBtn {
        width:clamp(82px,24vh,118px);
        min-width:clamp(82px,24vh,118px);
        height:clamp(82px,24vh,118px);
      }

      .menuPlayIcon {
        font-size:clamp(52px,17vh,76px);
      }

      .musicPanel {
        bottom:max(8px, env(safe-area-inset-bottom));
      }

      .colorPickerArt {
        width:64px;
        height:64px;
        margin-bottom:8px;
      }

      .colorPickerArt::before {
        width:42px;
        height:42px;
      }
    }

    @media (max-width:380px) {
      h1 {
        letter-spacing:-1px;
      }

      .mainMenuPanel .subtitle {
        display:none;
      }

      .mainCircleBtn {
        width:28vw;
        height:28vw;
      }

      button {
        padding:11px 16px;
      }

      .stat {
        min-width:92px;
        padding:10px;
      }
    }

    .playerNameBadge {
      width:max-content;
      margin:-10px auto 18px;
      padding:7px 13px;
      border:1px solid rgba(255,255,255,.2);
      border-radius:999px;
      background:rgba(0,0,0,.22);
      color:var(--cyan);
      font-size:12px;
      font-weight:900;
      letter-spacing:.4px;
    }

    .playerNameBadge.offline {
      color:var(--yellow);
    }

    .offlineNotice {
      max-width:420px;
      margin:-10px auto 15px;
      color:rgba(255,227,81,.9);
      font-size:11px;
      font-weight:750;
      line-height:1.4;
    }

    .syncNotice {
      max-width:420px;
      margin:-8px auto 14px;
      color:rgba(140,248,255,.92);
      font-size:11px;
      font-weight:800;
      line-height:1.4;
    }

    .syncNotice.pending,
    .syncNotice.error,
    .syncNotice.conflict {
      color:rgba(255,227,81,.94);
    }

    .progressSummary,
    .progressNotice {
      margin:0 auto 14px;
      color:rgba(255,255,255,.76);
      font-size:12px;
      font-weight:800;
      line-height:1.4;
      letter-spacing:.15px;
    }

    .progressSummary {
      color:var(--yellow);
    }

    .progressNotice {
      max-width:680px;
      padding:9px 13px;
      border:1px solid rgba(34,232,255,.24);
      border-radius:14px;
      background:rgba(34,232,255,.08);
    }

    .progressToast {
      position:absolute;
      z-index:40;
      left:50%;
      bottom:24px;
      transform:translateX(-50%);
      width:min(92vw,580px);
      padding:13px 16px;
      border:1px solid rgba(255,227,81,.42);
      border-radius:16px;
      background:rgba(5,10,28,.94);
      color:var(--yellow);
      font-size:13px;
      font-weight:850;
      line-height:1.4;
      text-align:center;
      box-shadow:0 14px 38px rgba(0,0,0,.35);
      pointer-events:none;
    }

    .lockedCard,
    .lockedTool {
      filter:saturate(.48);
      opacity:.66;
    }

    .lockedCard {
      cursor:not-allowed;
    }

    .lockedCard:hover {
      transform:none;
      background:rgba(255,255,255,.09);
    }

    .lockedTool {
      cursor:not-allowed;
    }

    .levelStatus {
      margin-top:7px;
      color:var(--yellow);
      font-size:11px;
      font-weight:850;
    }

    .editorMenuBtn.lockedAction {
      filter:saturate(.55);
      opacity:.74;
    }

    .profileManageBtn {
      display:block;
      margin:0 auto 16px;
      padding:9px 15px;
      font-size:11px;
    }

    .profileOverlay {
      position:absolute;
      inset:0;
      z-index:100;
      display:grid;
      place-items:center;
      padding:18px;
      background:rgba(2,7,25,.82);
      backdrop-filter:blur(18px);
      pointer-events:auto;
    }

    .profileOverlay.hidden {
      display:none;
    }

    .profileCard {
      width:min(100%,430px);
      padding:30px;
      border:1px solid rgba(255,255,255,.2);
      border-radius:30px;
      background:linear-gradient(145deg,rgba(11,31,86,.98),rgba(4,9,29,.98));
      box-shadow:0 28px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(34,232,255,.08);
      text-align:left;
    }

    .profileMark {
      width:72px;
      height:72px;
      display:grid;
      place-items:center;
      margin:0 0 20px;
      background:transparent;
    }

    .profileMark img {
      display:block;
      width:100%;
      height:100%;
      object-fit:contain;
    }

    .profileCard h2 {
      margin-bottom:8px;
    }

    .profileCard p {
      margin:0 0 20px;
      color:rgba(248,251,255,.72);
      font-size:13px;
      line-height:1.5;
    }

    .profileCard label {
      display:block;
      margin-bottom:7px;
      font-size:12px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.7px;
    }

    .profileCard input {
      width:100%;
      padding:14px 16px;
      border:1px solid rgba(255,255,255,.22);
      border-radius:16px;
      outline:0;
      background:rgba(255,255,255,.09);
      color:#fff;
      font:inherit;
      font-size:16px;
      user-select:text;
    }

    .profileCard input:focus {
      border-color:var(--cyan);
      box-shadow:0 0 0 3px rgba(34,232,255,.14);
    }

    .profileCard button {
      width:100%;
      margin:8px 0 0;
    }

    .profileCard .profileOfflineBtn {
      margin-top:8px;
      color:#fff;
    }

    .profileError {
      min-height:20px;
      padding-top:7px;
      color:#ff91a9;
      font-size:12px;
      font-weight:800;
    }

    .profileManagerCard {
      max-height:calc(100dvh - 36px);
      overflow:auto;
    }

    .accountConflictCard {
      max-height:calc(100dvh - 36px);
      overflow:auto;
    }

    .accountConflictCard form {
      margin:0;
    }

    .accountConflictCard label + input {
      margin-bottom:8px;
    }

    .accountConflictDivider {
      display:flex;
      align-items:center;
      gap:10px;
      margin:14px 0 10px;
      color:rgba(255,255,255,.5);
      font-size:11px;
      font-weight:850;
      text-transform:uppercase;
    }

    .accountConflictDivider::before,
    .accountConflictDivider::after {
      content:"";
      flex:1;
      height:1px;
      background:rgba(255,255,255,.15);
    }

    .profileManagerCard h2 {
      margin-top:0;
    }

    .profileHint {
      margin:8px 0 4px;
      font-size:11px;
    }

    .deletionCodePanel {
      margin:0 0 12px;
    }

    .deletionCodePanel input {
      color:var(--yellow);
      font-family:monospace;
      font-size:14px;
      letter-spacing:1px;
    }

    .profileLegalLink {
      display:block;
      margin:12px 0;
      color:var(--cyan);
      font-size:12px;
      font-weight:800;
      text-align:center;
      text-decoration:underline;
      text-underline-offset:3px;
    }

    @media (max-width:480px) {
      .profileCard {
        padding:24px 18px;
        border-radius:24px;
      }
    }

    @media (pointer:coarse), (max-width:720px) {
      .badge,
      .progressBox,
      .panel,
      .editorUI,
      .musicPanel,
      .mobileJump,
      .profileOverlay {
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
      }

      .badge,
      .progressBox,
      .editorUI,
      .musicPanel {
        box-shadow:none;
      }
    }

    @media (pointer:coarse) {
      button,
      .editorUI {
        touch-action:manipulation;
      }

      .editorUI {
        transition:none;
      }

      .editorUI.visible.autoHidden {
        transform:none;
        opacity:1;
      }
    }

    /* Keep the Android landscape UI readable instead of stretching it across tablets/emulators. */
    @media (orientation:landscape) and (pointer:coarse) {
      .wrap {
        width:min(100vw,1180px);
        height:min(100dvh,680px);
        min-height:0;
        border-radius:24px;
      }

      .screen {
        padding:12px;
      }

      .panel {
        width:min(100%,760px);
        max-height:calc(100% - 24px);
        padding:18px;
        border-radius:22px;
      }

      .editorChoicePanel,
      .playerLevelsPanel {
        max-width:600px;
      }

      .editorChoiceButtons {
        gap:12px;
        margin:14px 0 4px;
      }

      .editorChoiceBtn {
        width:clamp(112px,18vw,150px);
        min-width:0;
        height:clamp(112px,18vw,150px);
      }

      .editorChoiceBtn .menuLabel {
        font-size:clamp(10px,1.7vw,13px);
      }

      .screenHeader {
        margin:-4px 0 8px;
      }

      .screenHeader + h2 {
        font-size:clamp(24px,4vw,36px);
      }

      .editorUI.visible {
        left:8px;
        right:8px;
        min-height:170px;
        grid-template-columns:76px minmax(0,1fr) 150px;
        column-gap:6px;
        padding:6px;
      }

      .legacyEditorModeBtn {
        width:76px;
        height:42px;
        gap:4px;
        font-size:9px;
      }

      .editorModeBtn {
        width:48px;
        height:48px;
        gap:2px;
        font-size:8px;
      }

      .editorModeIcon {
        width:19px;
        height:19px;
        flex-basis:19px;
        font-size:15px;
      }

      .pageTabs,
      .palettePage,
      .editorActions {
        gap:4px;
      }

      .pageBtn,
      .toolBtn {
        min-width:54px;
        padding:7px 7px;
        font-size:10px;
      }

      .iconTool {
        min-width:54px;
        height:58px;
        padding:5px 6px;
      }

      .editorActions button {
        min-width:52px;
      }

      .musicPanel {
        left:8px;
        right:auto;
        bottom:8px;
        max-width:220px;
        padding:6px 8px;
      }

      .musicLabel {
        display:block;
        font-size:10px;
      }

      .musicSmallBtn {
        min-width:46px;
        padding:8px;
        font-size:10px;
      }
    }

    /* Capacitor Android WebView may report a fine pointer even when the device is touch-only. */
    html.android-app button,
    html.android-app .editorUI {
      touch-action:manipulation;
    }

    html.android-app .wrap {
      width:100vw;
      height:100dvh;
      min-height:0;
      border-radius:0;
    }

    html.android-app .screen {
      padding:12px;
    }

    html.android-app .panel {
      width:min(100%,760px);
      max-height:calc(100% - 24px);
      padding:18px;
      border-radius:22px;
    }

    html.android-app .mainCircleBtn {
      width:150px;
      min-width:150px;
      height:150px;
    }

    html.android-app .editorChoicePanel,
    html.android-app .playerLevelsPanel {
      max-width:600px;
    }

    html.android-app .editorChoiceButtons {
      gap:12px;
      margin:14px 0 4px;
    }

    html.android-app .editorChoiceBtn {
      width:150px;
      min-width:0;
      height:150px;
    }

    html.android-app .editorChoiceBtn .menuLabel {
      max-width:90%;
      font-size:13px;
      line-height:1.05;
    }

    html.android-app .editorUI {
      transition:none;
    }

    html.android-app .editorUI.visible.autoHidden {
      transform:none;
      opacity:1;
    }

    html.android-app .editorUI.visible {
      left:8px;
      right:8px;
      min-height:170px;
      grid-template-columns:76px minmax(0,1fr) 150px;
      column-gap:6px;
      padding:6px;
    }

    html.android-app .legacyEditorModeBtn {
      width:76px;
      height:42px;
      gap:4px;
      font-size:9px;
    }

    html.android-app .editorModeBtn {
      width:48px;
      height:48px;
      gap:2px;
      font-size:8px;
    }

    html.android-app .editorModeIcon {
      width:19px;
      height:19px;
      flex-basis:19px;
      font-size:15px;
    }

    html.android-app .pageTabs,
    html.android-app .palettePage,
    html.android-app .editorActions {
      gap:4px;
    }

    html.android-app .pageBtn,
    html.android-app .toolBtn {
      min-width:54px;
      padding:7px;
      font-size:10px;
    }

    html.android-app .iconTool {
      min-width:54px;
      height:58px;
      padding:5px 6px;
    }

    html.android-app .editorActions button {
      min-width:52px;
    }

    html.android-app .musicPanel {
      left:8px;
      right:auto;
      bottom:8px;
      max-width:220px;
      padding:6px 8px;
    }

    html.android-app .musicLabel {
      display:block;
      font-size:10px;
    }

    html.android-app .musicSmallBtn {
      min-width:46px;
      padding:8px;
      font-size:10px;
    }

    /* Profile actions must remain reachable on compact landscape WebViews. */
    html.android-app .profileOverlay {
      place-items:start center;
      padding:10px;
      overflow-y:auto;
    }

    html.android-app .profileCard {
      width:min(100%,430px);
      padding:18px;
      border-radius:22px;
    }

    html.android-app .profileManagerCard,
    html.android-app .accountConflictCard {
      max-height:none;
      margin:auto 0;
    }

    html.android-app .profileManagerCard h2,
    html.android-app .accountConflictCard h2 {
      font-size:clamp(24px, 5vw, 34px);
    }

    html.android-app .profileCard p {
      margin-bottom:12px;
      font-size:11px;
      line-height:1.35;
    }

    html.android-app .profileCard button {
      margin-top:5px;
      padding:10px 14px;
    }

    html.android-app .profileLegalLink {
      margin:8px 0;
      font-size:11px;
    }