/* Shared "block world" building pieces for the Minecraft landing page and
   the dashboard Minecraft tab: pixel buttons, 3D spinning cubes, XP bar,
   pixel panels. Original artwork - generic blocks only. */
:root {
    --mc-font-pixel: 'Pixelify Sans', 'Kanit', 'IBM Plex Sans Thai', sans-serif;
    --mc-font-head: 'Kanit', 'IBM Plex Sans Thai', sans-serif;
    --mc-grass: #5cc23a;
    --mc-grass-l: #7fe05a;
    --mc-grass-d: #2f8f22;
    --mc-dirt: #8b5a2b;
    --mc-dirt-d: #5f3b1a;
    --mc-stone: #8d939c;
    --mc-sky: #5ec8ff;
    --mc-gold: #ffd84d;
    --mc-gem: #4de0ff;
    --mc-ink: #1d2433;
}

/* ---------- pixel button (bevel + press) */
.mc-btn {
    --b: #5cc23a; --bl: #8fe06a; --bd: #2f7d1f; --tx: #fff;
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 10px 24px; border: 3px solid #1d2433; border-radius: 6px;
    background: var(--b); color: var(--tx); font: 600 1rem/1.2 var(--mc-font-pixel); letter-spacing: .3px;
    text-decoration: none; cursor: pointer; text-shadow: 0 2px 0 rgba(0, 0, 0, .28);
    box-shadow: inset 0 3px 0 var(--bl), inset 0 -5px 0 var(--bd), 0 5px 0 #1d2433;
    transform: translateY(0); transition: transform .08s, box-shadow .08s, filter .15s;
}
.mc-btn:hover { filter: brightness(1.08) saturate(1.1); }
.mc-btn:active, .mc-btn.is-pressed { transform: translateY(4px); box-shadow: inset 0 3px 0 var(--bl), inset 0 -3px 0 var(--bd), 0 1px 0 #1d2433; }
.mc-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.mc-btn[disabled], .mc-btn.is-disabled { filter: grayscale(.8) brightness(.95); cursor: not-allowed; opacity: .7; }
.mc-btn--orange { --b: #ff8a2a; --bl: #ffb36b; --bd: #c2531a; }
.mc-btn--stone { --b: #a6acb5; --bl: #cfd4da; --bd: #6f757e; --tx: #1d2433; text-shadow: none; }
.mc-btn--sky { --b: #39b6ff; --bl: #8ad6ff; --bd: #1c76b8; }
.mc-btn--red { --b: #ef5350; --bl: #ff8a80; --bd: #a12a27; }
.mc-btn--gold { --b: #ffcf33; --bl: #ffe788; --bd: #b58a00; --tx: #1d2433; text-shadow: none; }
.mc-btn--sm { min-height: 38px; padding: 6px 14px; font-size: .88rem; box-shadow: inset 0 2px 0 var(--bl), inset 0 -4px 0 var(--bd), 0 4px 0 #1d2433; }
.mc-btn--sm:active { transform: translateY(3px); box-shadow: inset 0 2px 0 var(--bl), inset 0 -2px 0 var(--bd), 0 1px 0 #1d2433; }
.mc-btn--lg { min-height: 60px; padding: 14px 34px; font-size: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .mc-btn { transition: none; } }

/* ---------- pixel panel */
.mc-panel {
    background: #fff; border: 3px solid #1d2433; border-radius: 8px;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .08), 0 6px 0 #1d2433;
}

/* ---------- 3D cube */
.mc-cube { --s: 64px; position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; animation: mcSpin 9s linear infinite; }
.mc-cube .f { position: absolute; inset: 0; width: var(--s); height: var(--s); image-rendering: pixelated; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18); }
.mc-cube .t { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.mc-cube .b { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.mc-cube .l { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.mc-cube .r { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.mc-cube .fr { transform: translateZ(calc(var(--s) / 2)); }
.mc-cube .bk { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.mc-cube-still { animation: none; transform: rotateX(-24deg) rotateY(38deg); }
@keyframes mcSpin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
@keyframes mcBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.mc-bob { animation: mcBob 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mc-cube, .mc-bob { animation: none; transform: rotateX(-24deg) rotateY(38deg); } }

/* textures (CSS-only "pixels") */
.mc-cube--grass .t { background: conic-gradient(from 90deg at 50% 50%, #6fd34b 25%, #5cc23a 0 50%, #7fe05a 0 75%, #64c842 0) 0 0 / 25% 25%; }
.mc-cube--grass .f:not(.t):not(.b) { background:
    linear-gradient(#6fd34b 0 22%, transparent 22%),
    repeating-linear-gradient(90deg, transparent 0 12.5%, rgba(111, 211, 75, .9) 12.5% 18%, transparent 18% 25%) 0 22% / 100% 12% no-repeat,
    conic-gradient(from 90deg, #8b5a2b 25%, #7a4e24 0 50%, #9a6633 0 75%, #835428 0) 0 0 / 25% 25%; }
.mc-cube--grass .b { background: conic-gradient(from 90deg, #8b5a2b 25%, #7a4e24 0 50%, #9a6633 0 75%, #835428 0) 0 0 / 25% 25%; }
.mc-cube--stone .f { background: conic-gradient(from 90deg, #8d939c 25%, #7e848d 0 50%, #9aa1aa 0 75%, #868c95 0) 0 0 / 25% 25%; }
.mc-cube--wood .f { background: repeating-linear-gradient(90deg, #a5763f 0 18%, #8f6433 18% 25%); }
.mc-cube--wood .t, .mc-cube--wood .b { background: radial-gradient(circle, #c99a5b 0 18%, #a5763f 19% 36%, #c99a5b 37% 50%, #8f6433 51%); }
.mc-cube--gold .f { background: conic-gradient(from 90deg, #ffd84d 25%, #f5c518 0 50%, #ffe680 0 75%, #e8b70e 0) 0 0 / 25% 25%; }
.mc-cube--gem .f { background: radial-gradient(circle at 30% 30%, #b3f6ff 0 10%, transparent 11%), conic-gradient(from 90deg, #4de0ff 25%, #22c4ea 0 50%, #8cecff 0 75%, #1fb3d6 0) 0 0 / 25% 25%; }
.mc-cube--ice .f { background: linear-gradient(135deg, #e6f7ff, #b8e6ff 60%, #9fd8ff); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.mc-cube--sand .f { background: conic-gradient(from 90deg, #f1dc8f 25%, #e6cf7c 0 50%, #f6e6a6 0 75%, #e9d384 0) 0 0 / 25% 25%; }
.mc-cube--purple .f { background: conic-gradient(from 90deg, #b48cff 25%, #9a6cf5 0 50%, #c9a8ff 0 75%, #8d5cf0 0) 0 0 / 25% 25%; }
.mc-cube--red .f { background: conic-gradient(from 90deg, #ff6b6b 25%, #e94f4f 0 50%, #ff9090 0 75%, #d94242 0) 0 0 / 25% 25%; }
.mc-cube--blue .f { background: conic-gradient(from 90deg, #5b9dff 25%, #4385f0 0 50%, #86b6ff 0 75%, #3a78e0 0) 0 0 / 25% 25%; }
.mc-cube--orange .f { background: conic-gradient(from 90deg, #ff9f43 25%, #f58b26 0 50%, #ffbd7a 0 75%, #e87d17 0) 0 0 / 25% 25%; }

/* ---------- XP-style progress bar */
.mc-xp { position: relative; height: 18px; border: 3px solid #1d2433; border-radius: 4px; background: #2b3346; overflow: hidden; }
.mc-xp > i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(0, 0, 0, .18) 18px 20px),
    linear-gradient(#b6ff6b 0 40%, #7ee03a 40% 75%, #5cbf22 75%); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.mc-xp.is-busy > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: mcShine 1.4s linear infinite; }
@keyframes mcShine { from { transform: translateX(-100%); } to { transform: translateX(200%); } }

/* ---------- block crack on hover (cards) */
.mc-crack { position: relative; overflow: hidden; }
.mc-crack::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s;
    background:
      linear-gradient(35deg, transparent 47%, rgba(29, 36, 51, .22) 48% 50%, transparent 51%) 20% 30% / 60% 60% no-repeat,
      linear-gradient(-50deg, transparent 47%, rgba(29, 36, 51, .18) 48% 50%, transparent 51%) 70% 60% / 50% 50% no-repeat; }
.mc-crack:hover::after { opacity: 1; }

/* ---------- tags */
.mc-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 2px solid #1d2433; border-radius: 4px; font: 600 .74rem/1.3 var(--mc-font-pixel); background: #fff; color: #1d2433; white-space: nowrap; }
.mc-tag--green { background: #c9f7b0; } .mc-tag--gold { background: #ffe788; } .mc-tag--sky { background: #c4ecff; } .mc-tag--red { background: #ffd1d1; } .mc-tag--stone { background: #e5e8ec; }