/* ============================================================
   04 · 一个属于我的世界 — 像素 / 方块
   ============================================================ */

.scene--mc{
  --sky-1:#7EC8F5;
  --sky-2:#B7E2F8;
  --sky-3:#E8F6FD;
  --hill-far:#7FA9A0;
  --hill-near:#5C8A5A;
  --grass:#6FA83F;
  --grass-dark:#548230;
  --dirt:#7A5230;
  --dirt-dark:#5E3D22;
  --cloud:rgba(255,255,255,.92);
  --star:0;

  background:var(--sky-2);
  color:#1A2612;
  --sh-line:rgba(26,38,18,.24);
  --sh-num:#33501F;
  --sh-dim:#35471F;
  --sh-title:#16220E;
  --prose-lead:#2A1C0D;
  --prose-em:#7A3E12;
  --prose-hl:rgba(232,201,126,.7);
}
.scene--mc.is-night{
  --sky-1:#0A1230;
  --sky-2:#15224C;
  --sky-3:#22345F;
  --hill-far:#1B2E38;
  --hill-near:#14251F;
  --grass:#2C4A2A;
  --grass-dark:#1E351D;
  --dirt:#3B2A1C;
  --dirt-dark:#2A1D12;
  --cloud:rgba(190,208,255,.10);
  --star:1;
  color:#EDF3E4;
  --sh-line:rgba(237,243,228,.22);
  --sh-num:#B9D69A;
  --sh-dim:#B7C6AC;
  --sh-title:#FFFFFF;
}

.mc-sky{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(180deg,var(--sky-1),var(--sky-2) 46%,var(--sky-3));transition:background 1s}
.mc-sun{
  position:absolute;right:14%;top:8vh;
  width:56px;height:56px;
  background:#FFF8C9;
  box-shadow:0 0 0 6px rgba(255,248,201,.22),0 0 70px 20px rgba(255,240,170,.45);
  transition:background 1s,box-shadow 1s;
}
.scene--mc.is-night .mc-sun{
  background:#E8ECF5;
  box-shadow:0 0 0 6px rgba(220,230,255,.12),0 0 60px 14px rgba(180,200,255,.22);
}
.scene--mc.is-night .mc-sun::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 28% 34%,rgba(150,165,195,.55) 0 5px,transparent 5px),
    radial-gradient(circle at 64% 60%,rgba(150,165,195,.5) 0 7px,transparent 7px),
    radial-gradient(circle at 40% 72%,rgba(150,165,195,.4) 0 3px,transparent 3px);
}
.mc-clouds i{
  position:absolute;width:52px;height:16px;
  background:var(--cloud);
  box-shadow:
    26px 0 0 var(--cloud),
    52px 0 0 var(--cloud),
    -26px 0 0 var(--cloud),
    26px -14px 0 var(--cloud),
    52px -14px 0 var(--cloud),
    78px 0 0 var(--cloud),
    78px -14px 0 var(--cloud);
  transition:background 1s;
  animation:cloudDrift linear infinite;
}
.mc-clouds i:nth-child(1){top:14vh;left:6%;animation-duration:150s;opacity:.9}
.mc-clouds i:nth-child(2){top:26vh;left:52%;animation-duration:190s;opacity:.7;transform:scale(.8)}
.mc-clouds i:nth-child(3){top:9vh;left:78%;animation-duration:170s;opacity:.8;transform:scale(1.25)}
.mc-clouds i:nth-child(4){top:38vh;left:28%;animation-duration:230s;opacity:.55;transform:scale(.65)}
@keyframes cloudDrift{
  from{translate:0 0}
  to{translate:-190vw 0}
}
.mc-stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),
    radial-gradient(1px 1px at 80px 90px,#fff,transparent),
    radial-gradient(1.5px 1.5px at 130px 40px,#fff,transparent),
    radial-gradient(1px 1px at 170px 120px,#fff,transparent),
    radial-gradient(1.5px 1.5px at 60px 150px,#fff,transparent);
  background-size:190px 190px,190px 190px,190px 190px,190px 190px,190px 190px;
  opacity:var(--star);
  transition:opacity 1s;
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 85%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 85%);
}
.mc-hills{position:absolute;left:0;right:0;transition:background 1s}
.mc-hills--far{
  bottom:74px;height:30vh;
  background:var(--hill-far);
  clip-path:polygon(0 66%,7% 66%,7% 54%,14% 54%,14% 62%,22% 62%,22% 44%,31% 44%,31% 56%,39% 56%,39% 38%,47% 38%,47% 50%,56% 50%,56% 58%,64% 58%,64% 46%,73% 46%,73% 56%,82% 56%,82% 42%,90% 42%,90% 54%,100% 54%,100% 100%,0 100%);
  opacity:.75;
}
.mc-hills--near{
  bottom:54px;height:22vh;
  background:var(--hill-near);
  clip-path:polygon(0 74%,9% 74%,9% 60%,18% 60%,18% 70%,27% 70%,27% 52%,37% 52%,37% 66%,46% 66%,46% 58%,55% 58%,55% 72%,64% 72%,64% 54%,74% 54%,74% 68%,84% 68%,84% 60%,93% 60%,93% 72%,100% 72%,100% 100%,0 100%);
  opacity:.9;
}
.mc-ground{
  position:absolute;left:0;right:0;bottom:0;height:56px;
  background:
    linear-gradient(180deg,var(--grass) 0 13px,var(--grass-dark) 13px 17px,var(--dirt) 17px 100%);
  box-shadow:inset 0 -14px 0 rgba(0,0,0,.12);
}
.mc-ground::before{
  content:"";position:absolute;inset:17px 0 0;
  background-image:
    radial-gradient(2px 2px at 12px 10px,rgba(0,0,0,.22),transparent),
    radial-gradient(3px 3px at 46px 26px,rgba(0,0,0,.16),transparent),
    radial-gradient(2px 2px at 78px 14px,rgba(255,255,255,.10),transparent),
    radial-gradient(3px 3px at 110px 30px,rgba(0,0,0,.18),transparent);
  background-size:120px 44px;
}

/* ---------- 标题 ---------- */
.mc-head .sh-title{
  font-family:var(--f-pixel);
  font-weight:400;
  font-size:clamp(34px,3.4vw,48px);
  line-height:1.3;
  letter-spacing:.01em;
  text-shadow:2px 2px 0 rgba(54,72,38,.22);
}
.scene--mc.is-night .mc-head .sh-title{text-shadow:2px 2px 0 rgba(0,0,0,.55)}
.mc-head .sh-kicker{color:#2F421C;font-weight:700}
.scene--mc.is-night .mc-head .sh-kicker{color:#C3D3B7}
.mc-head .sh-meta{gap:12px}
.scene--mc.is-night .sh-meta{color:#C3D3B7}

.mc-toggle{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-pixel);font-size:12px;line-height:1;
  color:#3B3B3B;
  padding:8px 12px;
  background:#C6C6C6;
  border:2px solid #2E2E2E;
  box-shadow:inset 2px 2px 0 #FFF,inset -2px -2px 0 #8B8B8B,3px 3px 0 rgba(0,0,0,.18);
  transition:background .15s;
}
.mc-toggle:hover{background:#D4D4D4}
.mc-toggle:active{box-shadow:inset 2px 2px 0 #8B8B8B,inset -2px -2px 0 #FFF;transform:translate(2px,2px)}
.mc-toggle i{
  width:12px;height:12px;display:block;
  background:#FFD75A;
  box-shadow:0 0 0 2px #C79A2C inset;
}
.scene--mc.is-night .mc-toggle i{background:#DCE4F5;box-shadow:0 0 0 2px #8C97B5 inset;border-radius:50%}

/* ---------- 布局 ---------- */
.mc-layout{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(34px,4.6vw,66px);
  margin-top:clamp(44px,6.4vh,72px);
  align-items:start;
}
.mc-prose{
  max-width:32em;
  padding:26px 26px 28px;
  background:
    repeating-linear-gradient(180deg,rgba(120,86,45,.05) 0 2px,transparent 2px 4px),
    linear-gradient(160deg,#F8EFD9,#EFDFC0);
  border:3px solid #6B4A2A;
  box-shadow:
    inset 0 0 0 3px #D8BC8C,
    inset 0 0 40px rgba(140,100,50,.18),
    8px 8px 0 rgba(90,70,40,.22);
  color:#3B2B18;
  position:relative;
}
.mc-prose::before{
  content:"";position:absolute;left:9px;top:9px;width:6px;height:6px;
  background:#B08C56;box-shadow:calc(100% + 0px) 0 0 #B08C56;
}
.mc-prose .lead{
  font-family:var(--f-pixel);
  font-size:clamp(18px,2vw,23px);
  line-height:1.95;
  color:#2C1D0C;
  letter-spacing:.01em;
  margin-bottom:1.3em;
}
.mc-prose p{font-size:15px;line-height:2;color:#3E2D19}
.mc-prose .em{color:#6E3410;background:linear-gradient(transparent 62%,rgba(226,183,104,.85) 62%)}
.mc-prose p:first-of-type{margin-top:0}

/* ---------- 启动器 ---------- */
.mc-stage{position:relative;top:0}
.mc-launcher{position:relative;width:100%;max-width:540px;margin-inline:auto}
.mc-window{
  background:#C6C6C6;
  border:2px solid #1A1A1A;
  box-shadow:
    inset 2px 2px 0 #FFFFFF,
    inset -2px -2px 0 #8B8B8B,
    10px 10px 0 rgba(40,50,30,.22);
  color:#3B3B3B;
  font-family:var(--f-pixel);
  position:relative;
}
.mc-titlebar{
  height:32px;display:flex;align-items:center;gap:9px;
  padding:0 8px;
  background:#3E3E3E;
  border-bottom:2px solid #1A1A1A;
  color:#E8E8E8;
  font-size:12px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.14);
}
.mc-dirt-dot{
  width:12px;height:12px;flex:none;
  background:linear-gradient(180deg,#7CB342 0 4px,#8D6E63 4px);
  border:1px solid #1A1A1A;
}
.mc-titlebar b{font-weight:400;letter-spacing:.02em}
.mc-title-meta{margin-left:auto;font-size:9px;color:#B9B9B9;letter-spacing:.06em}
.mc-x{
  width:18px;height:18px;display:grid;place-items:center;
  font-size:10px;color:#E8E8E8;border:1px solid #6A6A6A;
  background:#5A5A5A;
}
.mc-tabs{
  display:flex;align-items:stretch;gap:0;
  background:#B0B0B0;
  border-bottom:2px solid #8B8B8B;
  padding:4px 4px 0;
}
.mc-tabs button{
  font-family:var(--f-pixel);font-size:11px;color:#4A4A4A;
  padding:6px 12px;border:2px solid transparent;border-bottom:0;
}
.mc-tabs button.on{
  background:#C6C6C6;border-color:#8B8B8B;
  box-shadow:inset 2px 2px 0 #FFF;
  color:#2E2E2E;
}
.mc-tab-note{
  margin-left:auto;align-self:center;
  font-size:8.5px;color:#6F6F6F;padding-right:4px;
}
.mc-launch-body{padding:12px 12px 10px}
.mc-version{
  display:flex;align-items:center;gap:10px;
  padding:8px 9px;margin-bottom:6px;
  background:#D8D8D8;
  border:2px solid #8B8B8B;
  box-shadow:inset 1px 1px 0 #FFF,inset -1px -1px 0 #A8A8A8;
}
.mc-version.is-sel{background:#DDE6D2;border-color:#7C8F63}
.mc-version--dim{opacity:.72}
.mc-version-icon{
  width:30px;height:30px;flex:none;
  display:grid;place-items:center;
  background:#B9B9B9;border:2px solid #8B8B8B;
}
.mc-version-icon svg{width:18px;height:18px;stroke:#4E5A42;stroke-width:1.6}
.mc-version div{flex:1;min-width:0}
.mc-version b{display:block;font-weight:400;font-size:11px;color:#2E2E2E}
.mc-version span{display:block;font-size:8.5px;color:#6A6A6A;margin-top:2px}
.mc-version em{font-size:8.5px;color:#5C7046;white-space:nowrap}
.mc-opt{
  display:flex;align-items:center;gap:8px;
  font-size:9px;color:#4A4A4A;
  padding:5px 2px;
}
.mc-opt span{width:34px;color:#6A6A6A;flex:none}
.mc-opt b{font-weight:400;color:#333;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-slider{
  margin-left:auto;width:84px;height:8px;flex:none;
  background:#8B8B8B;border:1px solid #6A6A6A;
  box-shadow:inset 1px 1px 0 #5A5A5A;
  position:relative;
}
.mc-slider u{
  position:absolute;left:0;top:0;bottom:0;width:62%;
  background:#7CB342;
}
.mc-slider u::after{
  content:"";position:absolute;right:-4px;top:-3px;width:8px;height:12px;
  background:#E0E0E0;border:1px solid #4A4A4A;
}
.mc-btn{
  display:block;
  font-family:var(--f-pixel);font-size:13px;line-height:1;color:#2F2F2F;
  text-align:center;
  padding:10px 14px;
  background:#C6C6C6;
  border:2px solid #2E2E2E;
  box-shadow:inset 2px 2px 0 #FFF,inset -2px -2px 0 #8B8B8B;
  transition:background .12s;
}
.mc-btn:hover{background:#D6D6D6;color:#1E3A12}
.mc-btn:active{box-shadow:inset 2px 2px 0 #8B8B8B,inset -2px -2px 0 #FFF;transform:translate(1px,1px)}
.mc-btn--wide{width:100%;margin-top:10px;padding-block:12px;background:#B9CDA6;box-shadow:inset 2px 2px 0 #F2FFF0,inset -2px -2px 0 #7C8F63}
.mc-btn--wide:hover{background:#C8DDB4}
.mc-btn--wide.is-running{background:#A9BFA0;color:#4A4A4A;pointer-events:none}
.mc-progress{
  height:6px;margin-top:8px;
  background:#8B8B8B;border:1px solid #6A6A6A;
  box-shadow:inset 1px 1px 0 #5A5A5A;
  overflow:hidden;
}
.mc-progress i{display:block;height:100%;width:0;background:#7CB342;transition:width .35s linear}
.mc-hint{
  margin-top:6px;font-size:8.5px;color:#6A6A6A;text-align:center;
}
.mc-console{
  margin:0 12px 12px;
  background:#1E1E1E;
  border:2px solid #0E0E0E;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.08);
}
.mc-console-head{
  display:flex;justify-content:space-between;
  padding:5px 8px;font-size:8.5px;color:#9A9A9A;
  border-bottom:1px solid #333;
}
.mc-log{height:132px;overflow:auto;padding:6px 8px;font-size:9px;line-height:1.7;color:#B9B9B9}
.mc-log .ln{white-space:pre-wrap;word-break:break-word}
.mc-log .ln i{color:#6F6F6F;margin-right:6px;font-style:normal}
.mc-log .ok{color:#7FE08A}
.mc-log .er{color:#FF7B72}
.mc-log .wn{color:#FFD37A}

.mc-footer{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:7px 10px;
  background:#B0B0B0;border-top:2px solid #8B8B8B;
  font-size:8.5px;color:#4E4E4E;
}
.mc-footer span{display:flex;align-items:center;gap:5px}
.mc-footer img{width:14px;height:14px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))}

/* 成就 */
.mc-achieve{
  position:absolute;right:-6px;top:-18px;z-index:6;
  display:flex;align-items:center;gap:9px;
  padding:9px 12px 9px 9px;
  background:#1D1D1D;
  border:2px solid #F3D37A;
  box-shadow:0 0 0 2px #2E2E2E,6px 6px 0 rgba(0,0,0,.25);
  color:#F3F3F3;
  opacity:0;transform:translateY(-10px) scale(.96);
  transition:opacity .4s var(--ease),transform .5s var(--ease);
  pointer-events:none;
}
.mc-achieve.is-on{opacity:1;transform:none}
.mc-ach-ico{
  width:28px;height:28px;flex:none;
  background:#3B2E13;border:2px solid #8C732F;
  display:grid;place-items:center;
}
.mc-ach-ico i{
  width:12px;height:12px;display:block;
  background:#F3D37A;
  clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,82% 100%,50% 76%,18% 100%,30% 60%,0 38%,38% 36%);
}
.mc-achieve b{display:block;font-size:9.5px;color:#F3D37A;font-weight:400}
.mc-achieve span{display:block;font-size:8.5px;color:#CFCFCF;margin-top:2px}

/* 物品栏 */
.mc-hotbar-wrap{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:8px}
.mc-hotbar{
  display:flex;gap:0;
  padding:3px;
  background:rgba(22,22,22,.62);
  border:2px solid rgba(0,0,0,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 8px 20px rgba(0,0,0,.22);
}
.mc-slot{
  width:38px;height:38px;
  display:grid;place-items:center;
  background:#8B8B8B;
  border:2px solid #373737;
  box-shadow:inset 2px 2px 0 #B0B0B0,inset -2px -2px 0 #5F5F5F;
  position:relative;
  transition:background .12s;
}
.mc-slot:hover{background:#A0A0A0}
.mc-slot.is-on{
  box-shadow:inset 0 0 0 2px #FFF,0 0 0 2px #FFF;
  z-index:2;
}
.mc-slot svg,.mc-slot img{width:26px;height:26px;object-fit:contain;image-rendering:pixelated}
.mc-itemname{
  font-family:var(--f-pixel);font-size:11px;color:#fff;
  text-shadow:1px 1px 0 #3F3F3F,2px 2px 0 rgba(0,0,0,.35);
  padding:2px 6px;min-height:18px;
}

@media (max-width:1100px){
  .mc-sun{right:24%;top:13vh}
  .mc-layout{grid-template-columns:1fr;gap:46px}
  .mc-stage{position:relative;top:0;max-width:560px;margin-inline:auto}
  .mc-prose{max-width:40em}
}
@media (max-width:760px){
  .mc-head .sh-meta{
    display:flex;flex-direction:row;align-items:center;justify-content:flex-end;
    grid-column:2;grid-row:2;padding:10px 0 0;
  }
  .mc-head .sh-meta > span{display:none}
}
@media (max-width:620px){
  .mc-prose{padding:20px 18px}
  .mc-prose .lead{font-size:18px}
  .mc-prose p{font-size:14.5px}
  .mc-achieve{right:0;top:-12px;max-width:calc(100vw - 32px);padding:7px 9px 7px 7px}
  .mc-achieve span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mc-ach-ico{width:24px;height:24px}
  .mc-slot{width:31px;height:31px}
  .mc-slot svg,.mc-slot img{width:21px;height:21px}
  .mc-hotbar{max-width:100%}
  .mc-toggle{font-size:10px;padding:6px 8px}
  .mc-title-meta{display:none}
}