:root{
    --paper:#EFE9DA;
    --paper-deep:#DDD2B8;
    --graphite:#38352F;
    --graphite-soft:#6E6A60;
    --ink-faint:rgba(56,53,47,.16);
    --amber:#C98A2E;
    --amber-soft:#E8B25A;
    --red:#B5402F;
    --blue:#2E6677;
    --desk:#25221D;
    --font-display:"Caveat",cursive;
    --font-hand:"Neucha",cursive;
    --font-ui:"Nunito",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:
      radial-gradient(circle at 50% 40%, rgba(255,250,232,.18), transparent 42%),
      linear-gradient(135deg, #201d19 0%, #2d2922 45%, #1d1a17 100%);
    color:var(--graphite);
    font-family:var(--font-ui);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }
  #app{position:fixed;inset:0}
  canvas{position:absolute;inset:0;display:block;touch-action:none;z-index:0}
  #app::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
      radial-gradient(circle at 50% 48%, transparent 0 47%, rgba(27,22,16,.18) 72%, rgba(12,10,8,.42) 100%),
      repeating-linear-gradient(90deg, transparent 0 47px, rgba(255,255,255,.025) 48px, transparent 49px);
  }

  header,footer{position:absolute;left:0;right:0;display:flex;align-items:center;gap:18px;
    padding:0 54px;pointer-events:none;z-index:5}
  header{top:0;height:86px}
  footer{bottom:0;height:72px;font-size:18px;color:var(--graphite-soft)}

  .toprail,.bottomrail{
    position:absolute;left:24px;right:24px;pointer-events:none;
    background:
      linear-gradient(180deg, rgba(255,253,242,.64), rgba(232,222,198,.5)),
      repeating-linear-gradient(103deg, transparent 0 13px, rgba(56,53,47,.028) 14px, transparent 15px);
    border:1px solid rgba(56,53,47,.16);
    box-shadow:0 12px 30px rgba(31,27,21,.14), inset 0 1px rgba(255,255,255,.5);
    z-index:3;
    backdrop-filter:blur(1.5px);
    clip-path:polygon(0.5% 8%, 5% 0, 16% 4%, 27% 1%, 41% 7%, 57% 2%, 70% 5%, 84% 0, 99.2% 7%, 100% 88%, 91% 100%, 73% 94%, 54% 100%, 38% 93%, 19% 98%, 4% 92%);
  }
  .toprail{top:16px;height:66px;border-radius:8px;transform:rotate(-.18deg)}
  .bottomrail{bottom:14px;height:46px;border-radius:8px;transform:rotate(.12deg)}
  .toprail::before,.bottomrail::before{
    content:"";position:absolute;inset:7px 14px auto auto;width:98px;height:13px;
    background:rgba(223,204,151,.26);border:1px solid rgba(133,107,57,.12);
    transform:rotate(1.6deg);box-shadow:inset 0 1px rgba(255,255,255,.38);
  }
  .bottomrail::before{left:18px;right:auto;top:8px;transform:rotate(-1.4deg)}
  .ruler{
    position:absolute;left:44px;right:44px;top:82px;height:14px;z-index:4;pointer-events:none;
    background:repeating-linear-gradient(90deg, rgba(56,53,47,.38) 0 1px, transparent 1px 18px);
    opacity:.34;
    mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .ruler::after{
    content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(90deg, rgba(56,53,47,.52) 0 2px, transparent 2px 90px);
  }

  .title{font-family:var(--font-display);font-weight:700;font-size:46px;line-height:.82;letter-spacing:0;color:var(--graphite);
    text-shadow:0 1px rgba(255,255,255,.5);transform:rotate(-.8deg);min-width:0;max-width:36vw;overflow:hidden}
  .title small{display:block;font-family:var(--font-ui);font-weight:800;font-size:12px;letter-spacing:2.4px;
    text-transform:uppercase;color:var(--graphite-soft);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .spacer{flex:1}

  .levelcard{
    min-width:330px;padding:8px 18px 9px;border-left:1px solid rgba(56,53,47,.12);
    border-right:1px solid rgba(56,53,47,.12);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    pointer-events:none;max-width:360px;overflow:hidden;
  }
  .levelname{font-family:var(--font-hand);font-weight:400;font-size:29px;color:var(--graphite);
    transform:rotate(-1.2deg);white-space:nowrap}
  .levelname b{display:inline-block;font-family:var(--font-ui);font-weight:800;font-size:12px;letter-spacing:1.1px;text-transform:uppercase;
    color:var(--graphite-soft);transform:rotate(1.5deg);margin-right:8px;vertical-align:2px}
  .levelprogress{display:flex;gap:5px;margin-top:5px;align-items:center}
  .levelprogress i{
    width:7px;height:7px;border-radius:50%;display:block;flex:0 0 auto;
    border:1.5px solid rgba(56,53,47,.55);background:transparent;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  }
  .levelprogress i.on{border-color:var(--amber);background:var(--amber-soft);box-shadow:0 0 10px rgba(232,178,90,.55)}
  .levelprogress i.current{transform:scale(1.35);border-color:var(--red)}

  .btns{display:flex;gap:12px;pointer-events:auto;min-width:0;max-width:46vw;overflow:hidden;padding:2px 0 10px}
  button{
    pointer-events:auto;cursor:pointer;font-family:var(--font-ui);font-weight:800;font-size:16px;letter-spacing:.2px;color:var(--graphite);
    background:
      radial-gradient(circle at 35% 20%, rgba(255,255,255,.52), transparent 46%),
      linear-gradient(180deg, rgba(255,250,235,.72), rgba(218,202,169,.56));
    padding:7px 16px 8px;
    border:1.5px solid rgba(56,53,47,.58);
    border-radius:8px 3px 7px 4px;
    box-shadow:0 4px 0 rgba(56,53,47,.13), 0 11px 18px rgba(48,38,24,.1), inset 0 1px rgba(255,255,255,.48);
    transform:rotate(-.6deg);transition:transform .14s ease, color .12s ease, border-color .12s ease, box-shadow .14s ease;
  }
  button:nth-child(2){transform:rotate(.7deg)}
  button:hover{color:var(--red);border-color:var(--red);transform:rotate(-.6deg) translateY(-2px);
    box-shadow:0 7px 0 rgba(181,64,47,.14), 0 16px 24px rgba(48,38,24,.16), inset 0 1px rgba(255,255,255,.65)}
  button:active{transform:rotate(-.6deg) translateY(2px);box-shadow:0 2px 0 rgba(56,53,47,.18), 0 7px 14px rgba(48,38,24,.14)}
  button:disabled{opacity:.32;cursor:default;color:var(--graphite);border-color:var(--graphite)}
  button:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

  .levelpicker{
    position:absolute;z-index:9;right:254px;top:91px;width:min(680px,calc(100vw - 70px));
    overflow:visible;padding:0;
    background:
      linear-gradient(180deg, rgba(255,253,245,.97), rgba(232,224,205,.95)),
      repeating-linear-gradient(0deg, transparent 0 31px, rgba(46,102,119,.12) 32px, transparent 33px);
    border:1.5px solid rgba(56,53,47,.28);
    border-radius:4px 8px 6px 3px;
    box-shadow:0 26px 56px rgba(26,22,16,.3), inset 0 1px rgba(255,255,255,.58);
    pointer-events:auto;opacity:0;visibility:hidden;
    transition:opacity .12s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .levelpicker.open{opacity:1;visibility:visible;transition:opacity .08s ease}
  /* во время анимации бумагу рисует холст — прячем фон/рамку/тень DOM-панели */
  .levelpicker.anim{background:none;border-color:transparent;box-shadow:none}
  .levelpicker::before{
    content:"";position:absolute;left:20px;top:0;bottom:0;border-left:1px solid rgba(181,64,47,.22);
    z-index:1;pointer-events:none;transition:opacity .15s ease;
  }
  .levelpicker.anim::before{opacity:0}
  .levelgrid{
    position:relative;z-index:5;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;
    padding:18px 18px 18px 32px;
    opacity:0;transform:translateY(-10px) scale(.965);
    transition:opacity .34s ease, transform .42s cubic-bezier(.2,.9,.2,1);
  }
  .levelpicker.lift .levelgrid{opacity:1;transform:none}
  .leveltile{
    min-height:66px;text-align:left;padding:9px 10px 8px;background:rgba(255,255,255,.2);
    border:1px solid rgba(56,53,47,.16);border-radius:3px 7px 4px 6px;
    font-family:var(--font-ui);color:var(--graphite);cursor:pointer;
    box-shadow:inset 0 1px rgba(255,255,255,.36), 0 5px 12px rgba(41,32,20,.06);
    transform:none;transition:border-color .12s ease, color .12s ease, background .12s ease, box-shadow .12s ease;
  }
  .leveltile:nth-child(3n){transform:rotate(.35deg)}
  .leveltile:nth-child(4n){transform:rotate(-.28deg)}
  .leveltile:hover{border-color:var(--amber);color:var(--red);background:rgba(255,249,229,.5);transform:translateY(-1px) rotate(0)}
  .leveltile:active{transform:none}
  .leveltile.active{border-color:var(--red);box-shadow:0 0 0 2px rgba(181,64,47,.1), inset 0 1px rgba(255,255,255,.55)}
  .leveltile.done{background:rgba(255,248,226,.38)}
  .leveltile.done .tile-num::after{content:"готово";display:inline-block;margin-left:5px;color:var(--amber);font-size:10px;letter-spacing:.7px}
  .tile-num{display:block;font-size:11px;font-weight:800;color:var(--graphite-soft);letter-spacing:1px;text-transform:uppercase}
  .tile-name{display:block;margin-top:4px;font-family:var(--font-hand);font-weight:400;font-size:22px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tile-status{display:block;margin-top:6px;font-size:10px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:rgba(56,53,47,.45)}

  /* холст-перекладка «смятого листа» поверх панели; виден только во время анимации */
  .fl-flip{
    position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;
    transition:opacity .12s ease;
  }
  .fl-flip svg{display:block;width:100%;height:100%}

  .hint{flex:1;position:relative;padding-left:34px;color:var(--graphite);font-weight:700;text-shadow:0 1px rgba(255,255,255,.38);
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hint::before{
    content:"";position:absolute;left:4px;top:50%;width:20px;height:20px;transform:translateY(-50%) rotate(45deg);
    border:2px solid var(--amber);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;
    box-shadow:0 0 14px rgba(232,178,90,.38);
  }
  .counter{white-space:nowrap;font-size:15px;font-weight:700;color:var(--graphite-soft);display:flex;align-items:center;gap:10px;
    max-width:38vw;overflow:hidden}
  .counter span{
    display:inline-flex;align-items:center;gap:6px;padding:4px 9px 5px;border:1px solid rgba(56,53,47,.18);
    border-radius:7px;background:rgba(255,255,255,.2);
  }
  .counter b{color:var(--graphite);font-size:17px;font-weight:800}

  #stamp{
    position:absolute;z-index:8;pointer-events:none;
    left:50%;top:46%;transform:translate(-50%,-50%) rotate(-9deg) scale(.8);
    font-family:var(--font-display);font-weight:700;font-size:70px;color:var(--red);
    border:4px double var(--red);border-radius:255px 18px 225px 18px/18px 225px 18px 255px;
    padding:6px 34px 14px;opacity:0;transition:opacity .45s ease, transform .45s cubic-bezier(.2,1.4,.4,1)}
  #stamp.show{opacity:.92;transform:translate(-50%,-50%) rotate(-9deg) scale(1)}
  #stamp small{display:block;font-family:var(--font-ui);font-weight:800;font-size:13px;
    letter-spacing:2.2px;text-align:center;color:var(--red);opacity:.85;margin-top:-4px}

  @media (prefers-reduced-motion: reduce){
    button,#stamp,.levelpicker,.levelgrid,.fl-flip{transition:none!important;animation:none!important}
    .levelpicker.open .levelgrid,.levelpicker.lift .levelgrid{opacity:1;transform:none}
    .fl-flip{display:none}
  }

  @media (max-width: 1100px){
    header{gap:12px;padding:0 34px}
    .title{font-size:40px}
    .levelcard{min-width:260px;max-width:300px}
    .btns{gap:8px}
    button{font-size:15px;padding-left:12px;padding-right:12px}
    .levelpicker{right:20px;width:min(640px,calc(100vw - 40px))}
    .levelgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  }

  @media (max-width: 760px){
    #app::after{
      background:
        radial-gradient(circle at 50% 48%, transparent 0 42%, rgba(27,22,16,.14) 72%, rgba(12,10,8,.34) 100%),
        repeating-linear-gradient(90deg, transparent 0 36px, rgba(255,255,255,.02) 37px, transparent 38px);
    }
    header{
      height:128px;padding:12px 22px 0;gap:7px 10px;align-content:flex-start;
      align-items:flex-start;flex-wrap:wrap;
    }
    footer{
      height:104px;padding:10px 22px 12px;gap:7px;align-items:stretch;flex-direction:column;
      font-size:14px;
    }
    .toprail{left:8px;right:8px;top:7px;height:116px}
    .bottomrail{left:8px;right:8px;bottom:8px;height:90px}
    .ruler{left:16px;right:16px;top:126px;height:10px;opacity:.24}
    .title{font-size:34px;line-height:.76;flex:1 1 150px;min-width:0;max-width:none}
    .title small{font-size:9px;letter-spacing:1.4px;margin-top:5px;white-space:nowrap}
    .spacer{display:none}
    .levelcard{
      flex:1 1 168px;min-width:0;padding:6px 8px 7px;
      border-left-color:rgba(56,53,47,.08);border-right-color:rgba(56,53,47,.08);
    }
    .levelname{font-size:22px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
    .levelname b{display:block;font-size:10px;letter-spacing:.8px;margin:0 0 2px}
    .levelprogress{gap:3px;margin-top:4px;max-width:100%;overflow:hidden}
    .levelprogress i{width:5px;height:5px;border-width:1px}
    .btns{
      order:5;width:100%;gap:6px;overflow-x:auto;padding:2px 1px 8px;
      scrollbar-width:none;-webkit-overflow-scrolling:touch;
      max-width:none;
    }
    .btns::-webkit-scrollbar{display:none}
    button{
      flex:0 0 auto;min-height:34px;font-size:13px;padding:6px 10px 7px;
      white-space:nowrap;border-width:1.2px;
    }
    .levelpicker{
      position:absolute;left:10px;right:10px;top:136px;width:auto;max-height:calc(100dvh - 254px);
      overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    }
    .levelpicker::before{left:16px}
    .levelgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px 12px 14px 26px}
    .leveltile{min-height:62px;padding:8px 9px}
    .tile-name{font-size:20px}
    .tile-status{font-size:9px;margin-top:5px}
    .fl-flip{position:sticky;top:0;height:100%;min-height:360px}
    .hint{
      width:100%;padding-left:28px;font-size:14px;line-height:1.18;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    .hint::before{width:17px;height:17px;left:3px}
    .counter{
      width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
      font-size:12px;white-space:normal;max-width:none;
    }
    .counter span{justify-content:center;min-width:0;padding:4px 5px;border-radius:6px}
    .counter b{font-size:14px}
    #stamp{font-size:52px;padding:4px 24px 11px;top:45%}
  }

  @media (max-width: 430px){
    header{height:136px;padding:10px 18px 0}
    footer{height:112px;padding-left:18px;padding-right:18px}
    .toprail{height:124px}
    .bottomrail{height:98px}
    .ruler{top:134px}
    .title{font-size:30px;flex-basis:126px}
    .title small{display:none}
    .levelcard{flex-basis:150px}
    .levelname{font-size:20px}
    .btns{gap:5px}
    button{font-size:12px;padding-left:8px;padding-right:8px}
    .levelpicker{top:144px;max-height:calc(100dvh - 272px)}
    .levelgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding-left:24px}
    .leveltile{min-height:58px}
    .tile-num{font-size:10px}
    .tile-name{font-size:18px}
    .hint{font-size:13px}
  }

  @media (max-height: 540px) and (orientation: landscape){
    header{height:72px;padding:7px 24px;align-items:center;flex-wrap:nowrap}
    footer{height:58px;padding:6px 24px;flex-direction:row;align-items:center}
    .toprail{left:8px;right:8px;top:6px;height:58px}
    .bottomrail{left:8px;right:8px;bottom:6px;height:46px}
    .ruler{display:none}
    .title{font-size:27px;flex:0 0 auto;max-width:25vw}
    .title small{display:none}
    .levelcard{min-width:178px;flex:0 1 210px}
    .levelname{font-size:20px}
    .levelprogress{display:none}
    .btns{width:auto;order:0;flex:1 1 auto;justify-content:flex-end;padding-bottom:0}
    button{min-height:31px;font-size:12px;padding:5px 8px}
    .levelpicker{top:72px;left:12px;right:12px;max-height:calc(100dvh - 140px)}
    .levelgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .hint{-webkit-line-clamp:1;font-size:13px;flex:1 1 auto}
    .counter{display:flex;width:auto;flex:0 0 auto}
    .counter span{padding:3px 6px}
  }