*{box-sizing:border-box}
  html,body{margin:0;overflow-x:clip}
  body{
    font-family:"Pixelify Sans", ui-monospace, monospace;
    color:#3f3f3f; min-height:100vh;
    background-color:#2a1d13;
    image-rendering:pixelated;
  }
  button{font-family:inherit}
  /* ---------- header ---------- */
  header{position:relative;text-align:center;padding:34px 16px 20px}
  .logo{
    display:inline-block;margin:0;font-family:"Press Start 2P", "Pixelify Sans", monospace;
    font-size:clamp(22px,5vw,46px);line-height:1.15;letter-spacing:2px;
    color:#e9e9e9; text-shadow:0 4px 0 #6d6d6d, 0 8px 0 #3a3a3a, 0 12px 14px rgba(0,0,0,.6);
  }
  .logo b{color:#7ed957;text-shadow:0 4px 0 #3e7b26, 0 8px 0 #1f3f12, 0 12px 14px rgba(0,0,0,.6);font-weight:normal}
  .splash{color:#ffff55;text-shadow:2px 2px 0 #3f3f15;font-weight:700;white-space:nowrap;pointer-events:none}
  .sub{color:#d8d0c4;margin:12px 0 0;font-size:17px;text-shadow:2px 2px 0 #000}

  main{max-width:1240px;margin:0 auto;padding:8px 18px 50px;display:grid;grid-template-columns:minmax(330px,430px) 1fr;gap:22px;align-items:start}
  @media (max-width:900px){ main{grid-template-columns:minmax(0,1fr)} }
  .editor{min-width:0}

  /* ---------- minecraft GUI ---------- */
  .gui{background:#c6c6c6;border:3px solid #000;box-shadow:inset 3px 3px 0 #fff, inset -3px -3px 0 #555;padding:18px}
  .gui h2{margin:0 0 10px;font-size:17px;font-weight:600;color:#3f3f3f}
  .gui h3{margin:18px 0 8px;font-size:15px;font-weight:600;color:#3f3f3f;display:flex;gap:8px;align-items:baseline}
  .gui h3:first-child{margin-top:0}
  .gui h3.proh{color:#8a6400;border-top:3px dashed #a8a8a8;padding-top:14px;margin-top:22px}
  .gui h3 .unlock{margin-left:auto;padding:4px 10px;font-size:13px}
  .gui h3 small{font-weight:400;color:#6a6a6a;font-size:13px}

  .mc{
    position:relative;cursor:pointer;color:#fff;font-size:15px;font-weight:500;padding:9px 14px;
    background-color:#6f6f6f;background-size:48px 48px;
    border:3px solid #000;box-shadow:inset 3px 3px 0 rgba(255,255,255,.32), inset -3px -4px 0 rgba(0,0,0,.38);
    text-shadow:2px 2px 0 #3f3f3f;
  }
  .mc:hover{border-color:#fff}
  .mc:active{box-shadow:inset -3px -3px 0 rgba(255,255,255,.25), inset 3px 4px 0 rgba(0,0,0,.4)}
  .mc.on{background-color:#4f8a2b}
  .mc.green{background-color:#4f8a2b;font-size:19px;padding:13px 14px}
  .mc:focus-visible,.slot:focus-visible,.tab:focus-visible{outline:3px solid #ffff55;outline-offset:2px}

  /* scene */
  .scene{position:relative;height:460px;border:3px solid #000;overflow:hidden;perspective:1200px;cursor:grab;touch-action:none;user-select:none;transition:background .4s}
  .scene:active{cursor:grabbing}
  .model{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
  .joint{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
  .face{position:absolute;background-repeat:no-repeat;image-rendering:pixelated;backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .skinface{background-image:var(--skin)}
  .f-top{filter:brightness(1.07)} .f-left,.f-right{filter:brightness(.84)} .f-back{filter:brightness(.76)} .f-bottom{filter:brightness(.55)}
  .cloud{position:absolute;height:18px;background:rgba(255,255,255,.92);animation:drift linear infinite;pointer-events:none}
  .cloud::before{content:"";position:absolute;left:22%;top:-14px;width:46%;height:14px;background:inherit}
  @keyframes drift{from{transform:translateX(-260px)}to{transform:translateX(560px)}}
  .scene.noclouds .cloud{display:none}
  .hint{position:absolute;left:8px;bottom:6px;font-size:13px;color:#fff;text-shadow:2px 2px 0 #000;pointer-events:none}
  .ctrl{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
  .ctrl .mc{padding:7px 10px;font-size:14px}
  .ctrl .sp{flex:1}
  .scenes{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:8px}
  .scenes .mc{padding:6px 0;font-size:13px}
  .file{display:flex;gap:14px;align-items:center;margin:16px 0}
  .tex{width:104px;height:104px;flex:none;image-rendering:pixelated;background:#8b8b8b;box-shadow:inset 3px 3px 0 #373737, inset -3px -3px 0 #fff;padding:3px}
  .file p{margin:0;font-size:14px;line-height:1.45}
  .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .actions .green{grid-column:1/-1}
  .status{margin-top:8px;font-size:14px}
  .status:empty{display:none}

  /* tabs */
  .tabs{display:flex;gap:3px;align-items:flex-end;padding:0 2px}
  .tabs .tab{flex:1 1 0;min-width:0;padding-left:2px;padding-right:2px;font-size:13px}
  .tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tab.pro:not(.on){background:#b8901e}
  .tab.pro:not(.on):hover{background:#c9a030}
  @media (max-width:1180px){ .tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-top:6px} .tabs .tab{flex:none;padding-left:8px;padding-right:8px} }
  .tab{
    flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
    background:#8b8b8b;color:#fff;text-shadow:2px 2px 0 #3f3f3f;font-size:14px;font-weight:500;
    border:3px solid #000;border-bottom:none;padding:7px 10px 6px;margin-top:6px;
    box-shadow:inset 3px 3px 0 rgba(255,255,255,.35), inset -3px 0 0 rgba(0,0,0,.25)
  }
  .tab canvas{width:36px;height:36px;image-rendering:pixelated}
  .tab.on{background:#c6c6c6;color:#3f3f3f;text-shadow:none;margin-top:0;padding-bottom:12px;position:relative;z-index:1;box-shadow:inset 3px 3px 0 #fff}
  .tab:hover:not(.on){background:#9d9d9d}
  .tabpanel{margin-top:-3px;min-height:520px}

  /* slots */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
  .slot{
    position:relative;cursor:pointer;padding:6px 4px 5px;border:0;
    background:#8b8b8b;box-shadow:inset 3px 3px 0 #373737, inset -3px -3px 0 #fff;
    display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;text-shadow:1px 1px 0 #3f3f3f;font-size:12px;line-height:1.15;text-align:center
  }
  .slot .pic{height:72px;display:flex;align-items:center;justify-content:center}
  .slot canvas{image-rendering:pixelated;max-width:84px;max-height:72px}
  .slot:hover::after{content:"";position:absolute;inset:3px;background:rgba(255,255,255,.28);pointer-events:none}
  .slot.on{background:#a8d68f;box-shadow:inset 3px 3px 0 #2f5a1d, inset -3px -3px 0 #fff, 0 0 0 3px #fff, 0 0 0 6px #000;z-index:1}
  .slot.on span{color:#1f3f12;text-shadow:none;font-weight:600}
  .swatches{display:flex;flex-wrap:wrap;gap:6px}
  .sw{width:38px;height:38px;cursor:pointer;border:0;padding:6px;background:#8b8b8b;box-shadow:inset 3px 3px 0 #373737, inset -3px -3px 0 #fff;position:relative}
  .sw i{display:block;width:100%;height:100%;box-shadow:inset 2px 2px 0 rgba(255,255,255,.25), inset -2px -2px 0 rgba(0,0,0,.25)}
  .sw.on{box-shadow:inset 3px 3px 0 #373737, inset -3px -3px 0 #fff, 0 0 0 3px #fff, 0 0 0 6px #000;z-index:1}
  .sw.custom i{background:conic-gradient(#ff5555,#ffff55,#55ff55,#55ffff,#5555ff,#ff55ff,#ff5555)}
  .sw.custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
  .sw.custom.on i{background:var(--c)}
  .note{font-size:13px;color:#5a5a5a;margin:4px 0 10px;line-height:1.4}

  /* modal */
  .modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:flex-start;justify-content:center;padding:20px 12px;z-index:40;overflow-y:auto}
  .modal>.gui{margin:auto 0}
  .modal.open{display:flex}
  .modal .gui{max-width:380px;text-align:center}
  .modal img{width:256px;height:256px;image-rendering:pixelated;background:#8b8b8b;margin:8px 0 12px;box-shadow:inset 3px 3px 0 #373737, inset -3px -3px 0 #fff;padding:4px}
  .modal p{font-size:15px;line-height:1.45;margin:0 0 14px}

  /* ---------- top bar / account ---------- */
  .topbar{max-width:1240px;margin:0 auto;padding:12px 18px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .topbar .sp{flex:1}
  .mc.discord{background-color:#5865f2;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
  .mc.discord svg{width:20px;height:16px}
  .mc.gold{background-color:#c9961a;color:#fff}
  .acct{display:flex;align-items:center;gap:8px;cursor:pointer;background:rgba(0,0,0,.45);border:3px solid #000;color:#fff;padding:5px 10px 5px 5px;font-size:14px;text-shadow:2px 2px 0 #000;max-width:260px}
  .acct:hover{border-color:#fff}
  .acct img{width:28px;height:28px;image-rendering:pixelated;background:#555;flex:none}
  .acct span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .acct b{background:#6f6f6f;color:#fff;padding:1px 6px;font-size:12px;font-weight:600;flex:none}
  .acct b.pro{background:#ffcc33;color:#3a2a00;text-shadow:none}

  /* ---------- left column ---------- */
  .left{position:sticky;top:14px;display:flex;flex-direction:column;gap:10px}
  .stage{position:relative;padding:12px}
  .heart{position:absolute;top:22px;right:22px;z-index:3;width:56px;height:52px;cursor:pointer;border:3px solid #000;background:rgba(0,0,0,.35);padding:6px;box-shadow:inset 3px 3px 0 rgba(255,255,255,.25)}
  .heart:hover{border-color:#fff}
  .heart svg{width:100%;height:100%;display:block;filter:drop-shadow(2px 2px 0 #000)}
  .heart rect{fill:#e9e9e9;transition:fill .15s}
  .heart.on rect{fill:#ff3d5e}
  .heart.pop{animation:pop .35s}
  @keyframes pop{50%{transform:scale(1.25)}}
  .editing{display:none;background:#8b8b8b;box-shadow:inset 3px 3px 0 #373737, inset -3px -3px 0 #fff;padding:8px 10px;margin-bottom:12px;font-size:14px;color:#fff;text-shadow:1px 1px 0 #3f3f3f;align-items:center;gap:8px;flex-wrap:wrap}
  .editing.show{display:flex}
  .editing span{flex:1;min-width:140px}
  .editing .mc{padding:5px 9px;font-size:13px}

  /* ---------- premium ---------- */
  .slot .lock{position:absolute;top:4px;right:4px;background:#ffcc33;color:#3a2a00;font-size:11px;font-weight:700;padding:1px 5px;text-shadow:none;border:2px solid #000;z-index:2}
  .slot.locked canvas{filter:saturate(.85)}
  .promo{background:linear-gradient(135deg,#3a2a6a,#6a2a5a);border:3px solid #000;box-shadow:inset 3px 3px 0 rgba(255,255,255,.25), inset -3px -3px 0 rgba(0,0,0,.35);color:#fff;text-shadow:2px 2px 0 #000;padding:16px 18px;margin-bottom:16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .promo .t{flex:1;min-width:200px}
  .promo h4{margin:0 0 4px;font-size:18px;color:#ffdd55}
  .promo p{margin:0;font-size:14px;line-height:1.45}
  .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:14px 0}
  @media (max-width:460px){ .plans{grid-template-columns:1fr} }
  .plan{background:#8b8b8b;box-shadow:inset 3px 3px 0 #373737, inset -3px -3px 0 #fff;padding:14px 12px;color:#fff;text-shadow:2px 2px 0 #3f3f3f;position:relative;text-align:center}
  .plan .price{font-size:28px;font-weight:700;color:#ffff55;margin:4px 0}
  .plan .per{font-size:13px;margin-bottom:10px}
  .plan .mc{width:100%}
  .plan .best{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#ffcc33;color:#3a2a00;text-shadow:none;font-size:12px;font-weight:700;padding:2px 8px;border:2px solid #000;white-space:nowrap}
  .perks{text-align:left;margin:0;padding:0;list-style:none;font-size:15px;line-height:1.6}
  .perks li::before{content:"★ ";color:#c9961a}
  .modal .gui.wide{max-width:520px;text-align:left}
  .modal .gui.wide h2{font-size:22px}
  .small{font-size:13px;color:#5a5a5a}
  .row-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

  /* ---------- library ---------- */
  .lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .card{background:#8b8b8b;box-shadow:inset 3px 3px 0 #373737, inset -3px -3px 0 #fff;padding:10px;display:flex;flex-direction:column;gap:8px;align-items:center}
  .card.cur{box-shadow:inset 3px 3px 0 #373737, inset -3px -3px 0 #fff, 0 0 0 3px #fff, 0 0 0 6px #000}
  .card canvas{image-rendering:pixelated;height:120px}
  .card input{width:100%;font-family:inherit;font-size:14px;background:#000;color:#fff;border:2px solid #555;padding:5px 6px;text-align:center}
  .card input:focus{border-color:#fff;outline:none}
  .card .btns{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%}
  .card .mc{padding:5px 4px;font-size:13px}
  .card .del{grid-column:1/-1;background-color:#8a2a2a}
  .empty{text-align:center;padding:30px 10px;font-size:16px}

  /* ---------- toast ---------- */
  .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;background:rgba(16,16,16,.92);color:#fff;border:3px solid #000;box-shadow:inset 3px 3px 0 rgba(255,255,255,.2);padding:10px 16px;font-size:15px;z-index:30;text-shadow:2px 2px 0 #000;max-width:90vw;text-align:center}
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}

  /* ---------- phone ---------- */
  .bottombar{display:none}
  @media (max-width:900px){
    .topbar{padding:8px 10px 0}
    .acct span{max-width:90px}
    header{padding:14px 10px 8px}
    .sub{font-size:15px}
    main{padding:6px 10px 100px;gap:12px}
    .left{display:contents}
    .stage{position:sticky;top:0;z-index:6;padding:6px}
    .scene{height:clamp(220px,36vh,330px)}
    .heart{top:14px;right:14px;width:48px;height:44px}
    .hint{display:none}
    .editor{order:2} .preview{order:3}
    .tabs{margin:0 -2px}
    .tab{padding:5px 8px 5px;font-size:13px}
    .tab canvas{width:28px;height:28px}
    .tabpanel{min-height:0;padding:12px}
    .grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px}
    .slot .pic{height:62px}
    .slot canvas{max-width:72px;max-height:62px}
    .sw{width:36px;height:36px}
    .toast{bottom:84px}
    .bottombar{display:grid;grid-template-columns:1.2fr 1.4fr 1fr;gap:6px;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#c6c6c6;border-top:3px solid #000;box-shadow:inset 0 3px 0 #fff}
    .bottombar .mc{padding:11px 4px;font-size:15px}
  }

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:10px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600}
.form small{font-weight:400;color:#5a5a5a}
.form input,.redeem input,.admin input,.admin select{font-family:inherit;font-size:16px;color:#fff;background:#000;border:3px solid #6a6a6a;padding:10px;border-radius:0;outline:none}
.form input:focus,.redeem input:focus,.admin input:focus,.admin select:focus{border-color:#fff}
.redeem{display:flex;gap:8px}
.redeem input{flex:1;min-width:0;text-transform:uppercase}
.err{color:#a8141e;font-size:14px;min-height:18px;margin:4px 0 0}
.mc:disabled{opacity:.6;cursor:wait}

.promo .price-line{margin-top:6px;font-weight:700;color:#ffff88}

/* ---------- readability: small text and numbers use a clear font ---------- */
:root{--clear:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.slot span,.gui h3 small,.note,.small,.file p,.sub,.perks,.plan .per,.promo p,.editing span,.status,.toast,.empty,.err,
.form input,.redeem input,.card input,#proWhy,#acctPlanText,#acctEmail,.modal p{font-family:var(--clear)}
.slot span{font-size:12px;font-weight:600;letter-spacing:.1px}
.gui h3 small{font-size:13px;font-weight:600}
.plan .price{font-family:var(--clear);font-weight:800;font-size:30px;color:#ffff55;text-shadow:2px 2px 0 #3f3f15}
.lock{font-family:var(--clear)}
.acct span,.acct b{font-family:var(--clear);font-weight:600}

/* =====================================================================
   New sections and tools
   ===================================================================== */
.mc.icon{padding:7px 11px;font-size:16px}
.mcsel{font-family:inherit;font-size:14px;color:#fff;background:#6f6f6f;border:3px solid #000;padding:8px 6px;box-shadow:inset 3px 3px 0 rgba(255,255,255,.32), inset -3px -4px 0 rgba(0,0,0,.38);cursor:pointer}
/* mode bar */
.modes{max-width:1240px;margin:0 auto 12px;padding:0 18px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.modes .mc{min-width:110px;font-size:15px}
.challenge{max-width:1204px;margin:0 auto 12px;padding:10px 14px;background:linear-gradient(90deg,#4a2a7a,#7a2a5a);border:3px solid #000;box-shadow:inset 3px 3px 0 rgba(255,255,255,.25);color:#fff;text-shadow:2px 2px 0 #000;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:15px}
.challenge b{color:#ffff55}
.challenge .mc{margin-left:auto;padding:5px 10px;font-size:13px}
.mode[hidden]{display:none!important}
.page{max-width:1240px;margin:0 auto;padding:0 18px 60px}
.pagehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.pagehead h2{margin:0}
.seg{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.seg .mc{padding:6px 10px;font-size:13px}
.profilehead{margin:-4px 0 12px;font-size:15px}
/* preview extras */
.subhead{font-size:13px;font-weight:600;color:#3f3f3f;margin:10px 0 4px}
.poses{display:flex;flex-wrap:wrap;gap:5px}
.poses .mc,.scenes .mc{padding:6px 8px;font-size:13px;position:relative}
.mc.locked{opacity:.8}
.mc .star{position:absolute;top:-7px;right:-5px;font-style:normal;font-size:11px;color:#3a2a00;background:#ffcc33;border:2px solid #000;padding:0 3px;line-height:1.2}
.works{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:12px;margin:6px 0 0;font-family:var(--clear)}
.works .ok{color:#2c6b1a;font-weight:600}.works .no{color:#8a3a3a}
.works .tip{flex-basis:100%;color:#5a5a5a}
/* compact preview toolbar */
.ctrl{align-items:stretch;gap:5px}
.ctrl .mc.icon{width:40px;padding:6px 0;font-size:18px;line-height:1;flex:none}
.drops{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:5px;min-width:0}
.drop{position:relative;min-width:0;display:flex}
.drop .dropbtn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:7px 8px;font-size:13px}
.popmenu{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:max(100%,300px);max-width:calc(100vw - 32px);padding:10px;box-shadow:inset 3px 3px 0 #fff, inset -3px -3px 0 #555, 0 10px 24px rgba(0,0,0,.45)}
.drop:last-child .popmenu{left:auto;right:0}
.popmenu[hidden]{display:none!important}
.popmenu .scenes{margin-top:0;grid-template-columns:repeat(3,1fr)}
.popmenu.list{display:flex;flex-direction:column;gap:6px;width:max(100%,200px)}
.drop.up .popmenu{top:auto;bottom:calc(100% + 6px)}
.actions .drop{flex:none}
.actions .drop .dropbtn{font-size:inherit}
.ctrl .mc:disabled{opacity:.5;cursor:default}
/* tab tools */
.tabtools{display:flex;gap:6px;justify-content:flex-end;margin:-4px 0 12px}
.tabtools .mc{padding:5px 9px;font-size:13px}
.slot.soon canvas{filter:grayscale(.6) brightness(.9)}
.slot.soon .lock{background:#8fd3ff}
.sw.none i{background:repeating-linear-gradient(45deg,#ddd 0 4px,#fff 4px 8px)}
.importbox{display:flex;flex-direction:column;gap:8px}
.importbox label.mc{cursor:pointer;display:inline-block}
.linkbtn{background:none;border:0;padding:2px 0;color:#2b4fa8;text-decoration:underline;cursor:pointer;font-family:var(--clear);font-size:14px;align-self:flex-start}
.check{display:flex;gap:6px;align-items:center;font-size:14px;font-family:var(--clear);margin-top:8px}
.social{margin-top:10px}.social .row-btns{margin-top:4px}.social a.mc{text-decoration:none}
/* gallery cards */
.card{position:relative}
.card .gname{font-size:15px;text-align:center;color:#fff;text-shadow:1px 1px 0 #3f3f3f;word-break:break-word}
.card .linkbtn{color:#ffff88;align-self:center;font-size:13px}
.chtag{position:absolute;top:6px;left:6px;background:#ffcc33;color:#3a2a00;border:2px solid #000;font-size:11px;font-weight:700;padding:1px 5px;font-family:var(--clear)}
/* poster + paint modals */
.modal .gui.poster{max-width:460px}
#posterCanvas{width:100%;height:auto;display:block;margin:6px 0 10px;border:3px solid #000}
.modal .gui.paint{max-width:620px}
#paintCanvas{width:100%;height:auto;display:block;margin:10px 0;image-rendering:pixelated;background:repeating-conic-gradient(#bbb 0 25%,#ddd 0 50%) 0 0/32px 32px;border:3px solid #000;touch-action:none;cursor:crosshair}
#paintSw{margin-bottom:6px}
.paintviews{margin-top:8px}
.paintviews .mc{padding:5px 8px;font-size:12px}
#paintCanvas{width:auto;max-width:100%;max-height:58vh;margin-left:auto;margin-right:auto}
.form.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:460px){ .form.two{grid-template-columns:1fr} }
.form select{font-family:inherit;font-size:16px;color:#fff;background:#000;border:3px solid #6a6a6a;padding:10px;border-radius:0}
/* help */
.help h2{font-size:22px}
.helpbox{background:#8b8b8b;box-shadow:inset 3px 3px 0 #373737, inset -3px -3px 0 #fff;padding:14px 18px;margin-bottom:14px;color:#fff;text-shadow:1px 1px 0 #3f3f3f}
.helpbox h3{color:#ffff88!important;margin:0 0 6px}
.helpbox ol{margin:0;padding-left:22px;font-family:var(--clear);font-size:15px;line-height:1.6}
.helpbox li{animation:stepin .5s both}
@keyframes stepin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.helpbox details{font-family:var(--clear);font-size:15px;margin:6px 0;background:rgba(0,0,0,.15);padding:8px 10px}
.helpbox summary{cursor:pointer;font-weight:700}
.helpbox details p{margin:6px 0 0}

/* =====================================================================
   Dark mode (Minecraft dark GUI)
   ===================================================================== */
body.dark::before{content:"";position:fixed;inset:0;background:rgba(4,6,18,.55);pointer-events:none;z-index:-1}
body.dark .gui{background:#2f2f33;box-shadow:inset 3px 3px 0 #4a4a50, inset -3px -3px 0 #151518;color:#e8e8ec}
body.dark .gui h2,body.dark .gui h3,body.dark .subhead,body.dark .form label{color:#ececf0}
body.dark .gui h3 small,body.dark .note,body.dark .small,body.dark .file p,body.dark .works .tip,body.dark .status{color:#a9a9b4}
body.dark .gui h3.proh{color:#ffcc55}
body.dark .slot{background:#1f1f23;box-shadow:inset 3px 3px 0 #0e0e10, inset -3px -3px 0 #4a4a50}
body.dark .slot.on{background:#2f5a1d;box-shadow:inset 3px 3px 0 #1a3610, inset -3px -3px 0 #6aa84f, 0 0 0 3px #fff, 0 0 0 6px #000}
body.dark .slot.on span{color:#d8ffc8}
body.dark .tab{background:#3a3a40}
body.dark .tab.on{background:#2f2f33;color:#ececf0;box-shadow:inset 3px 3px 0 #4a4a50}
body.dark .sw{background:#1f1f23;box-shadow:inset 3px 3px 0 #0e0e10, inset -3px -3px 0 #4a4a50}
body.dark .tex,body.dark .plan,body.dark .card,body.dark .helpbox,body.dark .editing{background:#1f1f23;box-shadow:inset 3px 3px 0 #0e0e10, inset -3px -3px 0 #4a4a50}
body.dark .works .ok{color:#8fe07a}.body.dark .works .no{color:#ff9a9a}
body.dark .linkbtn{color:#9ab8ff}
body.dark .bottombar{background:#2f2f33;box-shadow:inset 0 3px 0 #4a4a50}
body.dark .modal .gui{background:#2f2f33}
.challenge[hidden]{display:none!important}
.form.two label{min-width:0}
.form.two input,.form.two select{width:100%;min-width:0;box-sizing:border-box}
/* language flags */
.langpick{position:relative}
.flagbtn{width:52px;height:40px;padding:7px 8px!important;display:flex;align-items:center;justify-content:center}
.flagbtn svg,.flagitem svg{width:100%;height:100%;display:block;box-shadow:0 0 0 2px #000}
.langmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:#c6c6c6;border:3px solid #000;box-shadow:inset 3px 3px 0 #fff, inset -3px -3px 0 #555;padding:8px;display:grid;grid-template-columns:repeat(5,44px);gap:8px}
.langmenu[hidden]{display:none}
.flagitem{width:44px;height:30px;padding:3px;border:0;background:#8b8b8b;box-shadow:inset 2px 2px 0 #373737, inset -2px -2px 0 #fff;cursor:pointer}
.flagitem:hover{filter:brightness(1.15)}
.flagitem.on{outline:3px solid #fff;outline-offset:1px}
@media (max-width:460px){ .langmenu{grid-template-columns:repeat(3,44px)} }

/* footer */
.foot{margin-top:40px;background:rgba(0,0,0,.62);border-top:3px solid #000;box-shadow:inset 0 3px 0 rgba(255,255,255,.12);color:#d8d8d8}
.footin{max-width:1200px;margin:0 auto;padding:22px 16px 26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
.footlogo{font-family:"Press Start 2P","Pixelify Sans",monospace;font-size:13px;color:#e9e9e9;text-shadow:0 2px 0 #3a3a3a}
.footlogo b{color:#7ed957;font-weight:normal;text-shadow:0 2px 0 #1f3f12}
.footlinks{display:flex;flex-wrap:wrap;gap:6px 18px;flex:1}
.footlinks a{color:#fff;text-decoration:none;font-size:15px;text-shadow:2px 2px 0 #000}
.footlinks a:hover{color:#ffff55;text-decoration:underline}
.footnote{flex-basis:100%;margin:4px 0 0;font-family:var(--clear);font-size:12px;color:#9d9d9d}
@media (max-width:700px){ .footin{justify-content:center;text-align:center} .footlinks{justify-content:center;flex-basis:100%} }
body.dark .foot{background:rgba(4,6,20,.7)}

/* ---------- polish ---------- */
body{image-rendering:pixelated}
.gui,.tabs,.bottombar,.challenge{image-rendering:auto}
.logo svg{display:block;max-width:92vw;height:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.logo{animation:logoin .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes logoin{from{transform:translateY(-18px) scale(.96);opacity:0}}
.footlogo svg{display:block;height:auto}
/* Minecraft-style splash: tilted over the bottom-right corner of the title */
.logowrap{position:relative;display:inline-block}
.logowrap .splash{position:absolute;left:auto;right:0;top:auto;bottom:16%;margin:0;transform-origin:center;
  transform:translate(42%,0) rotate(-20deg);animation:splash .5s ease-in-out infinite alternate;font-size:clamp(12px,2vw,20px);z-index:2}
@keyframes splash{to{transform:translate(42%,0) rotate(-20deg) scale(1.12)}}
.sub{text-shadow:2px 2px 0 rgba(0,0,0,.85);font-size:16px}
/* panels sit on the world with a soft shadow */
main > .left > .gui,.tabpanel,.mode .gui{box-shadow:inset 3px 3px 0 #fff, inset -3px -3px 0 #555, 0 12px 26px rgba(0,0,0,.38)}
body.dark main > .left > .gui,body.dark .tabpanel,body.dark .mode .gui{box-shadow:inset 3px 3px 0 #4a4a50, inset -3px -3px 0 #151518, 0 12px 26px rgba(0,0,0,.5)}
/* preview window: soft vignette and a shadow under the grass block */
.scene::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px rgba(0,0,0,.28)}
/* item slots: Minecraft-style hover and a little pop when picked */
.slot{transition:transform .08s}
.slot:hover{transform:translateY(-2px)}
.slot:hover::after{background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.slot.on{animation:pick .25s ease-out}
@keyframes pick{50%{transform:scale(1.06)}}
.slot:active{transform:translateY(1px)}
/* stone buttons press down */
.mc{transition:transform .06s, filter .1s}
.mc:hover{filter:brightness(1.12)}
.mc:active{transform:translateY(2px)}
.mc:disabled:hover{filter:none;border-color:#000}
/* tabs lift on hover */
.tab{transition:transform .08s}
.tab:not(.on):hover{transform:translateY(-3px)}
/* nicer scrollbars in panels */
.gui ::-webkit-scrollbar,.popmenu::-webkit-scrollbar{width:12px}
.gui ::-webkit-scrollbar-thumb{background:#6f6f6f;border:3px solid #000;box-shadow:inset 2px 2px 0 rgba(255,255,255,.3)}
.gui ::-webkit-scrollbar-track{background:#8b8b8b}
@media (prefers-reduced-motion:reduce){ .logo,.slot.on{animation:none} .slot,.mc,.tab{transition:none} }
header .sub{margin-top:20px}
@media (max-width:700px){ header .sub{margin-top:22px} .logowrap .splash{position:absolute;display:block;right:0;bottom:-12%;transform:translate(-12%,0) rotate(-18deg);animation-name:splashm;font-size:11px} @keyframes splashm{to{transform:translate(-12%,0) rotate(-18deg) scale(1.12)}} }

/* Cyrillic: the pixel font is hard to read in Russian/Ukrainian, so use a clear bold font there (still with the Minecraft shadow) */
html:lang(ru) body,html:lang(uk) body{font-family:var(--clear)}
html:lang(ru) .mc,html:lang(uk) .mc,html:lang(ru) .tab,html:lang(uk) .tab,html:lang(ru) .gui h2,html:lang(uk) .gui h2,html:lang(ru) .gui h3,html:lang(uk) .gui h3{font-family:var(--clear);font-weight:700;letter-spacing:.2px}
html:lang(ru) .mc,html:lang(uk) .mc{text-shadow:2px 2px 0 #2f2f2f}
html:lang(ru) .tab span,html:lang(uk) .tab span{font-size:12.5px}
html:lang(ru) .splash,html:lang(uk) .splash,html:lang(ru) .hint,html:lang(uk) .hint{font-family:var(--clear);font-weight:800}
@media (max-width:700px){ html:lang(ru) .logowrap .splash,html:lang(uk) .logowrap .splash{font-size:10px} }

/* demo banner (only when there is no real server) */
.demobar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;padding:8px 12px;background:#2b2010;border-bottom:3px solid #000;color:#ffe9a8;font-family:var(--clear);font-size:13px;text-align:center}
.demobar b{color:#ffcc33;font-family:inherit}
.demobar code{background:#000;color:#ffff55;padding:1px 6px;border:1px solid #6a5a2a}
.demobar .mc{padding:4px 10px;font-size:12px}

/* upload your own skin */
.importbox{display:grid;gap:8px;padding:12px 14px;margin-bottom:6px;background:#a9c98f;box-shadow:inset 3px 3px 0 #d9f0c8, inset -3px -3px 0 #5d8a45;border:3px solid #000}
.importbox.has{grid-template-columns:auto 1fr;align-items:center}
.importbox.has > :not(.basepv){grid-column:2}
.importbox .basepv{grid-row:1 / span 3;width:96px;height:96px;image-rendering:pixelated;background:repeating-conic-gradient(#bbb 0 25%,#ddd 0 50%) 0 0/16px 16px;border:3px solid #000}
.importbox .small{color:#24401a}
.importbox .redeem input{max-width:220px}
body.dark .importbox{background:#24361c;box-shadow:inset 3px 3px 0 #3d5a2f, inset -3px -3px 0 #10190b}
body.dark .importbox .small{color:#cfe8c0}
.basebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding:9px 12px;background:#fff3c4;border:3px solid #000;font-family:var(--clear);font-size:14px;color:#4a3a00}
.basebar.over{background:#d6f0c6;color:#1f3f12}
.basebar .mc{padding:5px 10px;font-size:13px;margin-left:auto}
body.dark .basebar{background:#3a3214;color:#ffe9a8} body.dark .basebar.over{background:#1f3a16;color:#cfe8c0}
.dropzone{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(20,40,14,.72);pointer-events:none}
.dropzone > div{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 46px;background:#c6c6c6;border:3px solid #000;box-shadow:inset 3px 3px 0 #fff, inset -3px -3px 0 #555;color:#3f3f3f;font-size:20px}
.dropzone b{font-size:46px;color:#4f8a2b}
body.dropping .dropzone{display:flex}

/* footer always sits at the bottom of the page */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body > .foot{margin-top:auto}
body > main, body > section.mode, body > header, body > nav, body > .topbar, body > .challenge, body > .demobar{flex:none}
.foot{width:100%;box-sizing:border-box;margin-top:40px}
body > section.mode + .foot, body > main + .foot{margin-top:auto}
.footin{justify-content:space-between}
@media (max-width:700px){ .foot{margin-bottom:0;padding-bottom:76px} }
body > main, body > section.mode, body > header{width:100%;box-sizing:border-box}
body > .challenge{width:calc(100% - 36px);max-width:1204px;box-sizing:border-box}
body > .topbar, body > div.topbar, body > nav{width:100%;box-sizing:border-box}
@media (max-width:700px){ .footlogo svg{margin:0 auto} .footlogo{flex-basis:100%;text-align:center} }

/* ---------- spacing polish ---------- */
.importbox .row-btns{margin-top:0;align-items:center}
.importbox .redeem{margin:0}
.gui h3 + .importbox, .note + .importbox{margin-top:4px}
.importbox + h3{margin-top:22px}
@media (min-width:701px) and (max-width:1000px){ .logowrap .splash{transform:translate(8%,0) rotate(-20deg);animation-name:splashm2} @keyframes splashm2{to{transform:translate(8%,0) rotate(-20deg) scale(1.12)}} }
.preview .ctrl{margin-bottom:4px}
.preview .file{margin:14px 0}
.preview .actions{margin-top:4px}

.plan[hidden],.plans[hidden],#giftBuy[hidden]{display:none!important}