/* ---------- images Minecraft ---------- */
canvas, img.wicon, img.sico, .ic img, .av, .strip, .world { image-rendering: pixelated; }
.logo canvas { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(255,122,61,.6)); }
.logo i { display: none; }
.spell-btn .ic { background: var(--night); }
.spell-btn .ic img { width: 32px; height: 32px; }
.spell-btn[aria-pressed="true"] .ic img { animation: hop .5s steps(2) infinite alternate; }
@keyframes hop { to { transform: translateY(-3px) rotate(-6deg); } }
.wicon { width: 56px; height: 56px; margin-bottom: 12px; transition: transform .3s; }
.hero-card:hover .wicon { transform: rotate(-12deg) scale(1.2); }
.sico { width: 44px; height: 44px; margin-bottom: 14px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px); } }
.strip { height: 48px; background: url(img/mc/grass_block_side.png) repeat-x 0 0 / 48px 48px; }
.lineup { display: flex; gap: 14px; margin-bottom: 26px; }
.lineup canvas { width: 54px; height: 54px; animation: bob 2.2s ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.lineup canvas:nth-child(2) { animation-delay: .25s; } .lineup canvas:nth-child(3) { animation-delay: .5s; }
.lineup canvas:nth-child(4) { animation-delay: .75s; } .lineup canvas:nth-child(5) { animation-delay: 1s; }
.world { background: linear-gradient(180deg, rgba(21,18,29,.05), rgba(21,18,29,.85)), linear-gradient(var(--tint), var(--tint)), var(--tile) 0 0 / 64px 64px; background-blend-mode: normal, multiply, normal; }
.world canvas { position: absolute; top: 18px; right: 18px; width: 56px; height: 56px; transition: transform .4s; filter: drop-shadow(0 5px 0 rgba(0,0,0,.4)); }
.world:hover canvas { transform: translateY(-6px) rotate(8deg) scale(1.1); }
.world h3 { text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.tl { padding-right: 90px; }
.tl .bface { position: absolute; right: 0; top: 0; width: 72px; height: auto; filter: drop-shadow(0 5px 0 rgba(0,0,0,.4)); transition: transform .4s; }
.tl:hover .bface { transform: rotate(-6deg) scale(1.1); }
.av { width: 34px; height: 34px; border-radius: 6px; flex: none; background: url(img/mc/steve.png) -34px -34px / 272px 272px; overflow: hidden; display: block; }
.av img { width: 100%; height: 100%; display: block; }
.row .name .av img { background: none; }
.av.big { width: 72px; height: 72px; margin: 0 auto 12px; background-position: -72px -72px; background-size: 576px 576px; border-radius: 10px; box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.pod.p1 .av.big { width: 88px; height: 88px; background-position: -88px -88px; background-size: 704px 704px; }
.pod:hover .av.big { animation: hop .4s steps(2) infinite alternate; }
.hud-box b { text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.loop .step:hover .sico { animation-duration: .6s; }

/* ---------- captures du jeu + vue iso ---------- */
.shot { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #000; }
.shot img { width: 100%; height: auto; display: block; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.shot:hover img { transform: scale(1.04); }
.shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 18px 14px; font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bone); background: linear-gradient(transparent, rgba(10,8,16,.9)); }
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.gallery .shot:nth-child(1) { grid-column: span 8; }
.gallery .shot:nth-child(2) { grid-column: span 4; }
.gallery .shot:nth-child(3) { grid-column: span 4; }
.gallery .shot:nth-child(4) { grid-column: span 8; }
.gallery .shot img { height: 100%; object-fit: cover; }
.iso-demo { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 26px; }
.key { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: .92rem; color: var(--mute); }
.key kbd { font-family: var(--mono); font-weight: 700; font-size: 1rem; min-width: 36px; height: 36px; display: grid; place-items: center; color: var(--bone); background: var(--night); border: 1px solid var(--mute); border-bottom-width: 4px; border-radius: 8px; transition: transform .1s; }
.key:hover kbd { transform: translateY(3px); border-bottom-width: 1px; }
@media (max-width: 900px) { .gallery .shot, .gallery .shot:nth-child(n) { grid-column: span 12; } .iso-demo { grid-template-columns: 1fr; } }

/* ---------- présentation : en-tête, règles, annotations, boss, stats ---------- */
.hero-page.split { padding-block: clamp(44px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.hero-page.split h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); margin-block: 14px 8px; }
.tilt { margin: 0; border-radius: 16px; overflow: hidden; border: 2px solid var(--bone); box-shadow: 14px 14px 0 var(--ember), 0 30px 60px rgba(0,0,0,.5); transform: perspective(1400px) rotateY(-9deg) rotateX(4deg) rotate(1deg); transition: transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .7s; animation: floaty 6s ease-in-out infinite; }
.tilt:hover { transform: perspective(1400px) rotateY(0) rotateX(0) rotate(0); box-shadow: 8px 8px 0 var(--ember), 0 30px 60px rgba(0,0,0,.5); animation-play-state: paused; }
.tilt img { width: 100%; height: auto; display: block; }
@keyframes floaty { 50% { translate: 0 -10px; } }

.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.rule { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; position: relative; overflow: hidden; transition: transform .25s, border-color .25s; }
.rule:hover { transform: translateY(-6px); border-color: var(--ember); }
.rule canvas, .rule > img { position: absolute; top: 20px; right: 20px; width: 48px; height: auto; opacity: .95; }
.rule b { display: block; font-family: var(--display); font-weight: 800; font-stretch: 80%; font-size: 3.6rem; line-height: 1; color: var(--ember); margin-bottom: 14px; }
.rule b small { font-size: 1.2rem; color: var(--mute); font-weight: 600; letter-spacing: 0; }
.rule h3 { font-size: 1.25rem; margin-bottom: 8px; }
.rule p { color: var(--mute); font-size: .95rem; }

.shot.big, .shot.wide { border-radius: 18px; border: 2px solid var(--line); }
.shot.big img, .shot.wide img { width: 100%; height: auto; }
.shot.wide figcaption, .shot.big figcaption { padding: 40px 22px 16px; }
.co { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 2; }
.co i { width: 16px; height: 16px; border-radius: 50%; background: var(--ember); border: 3px solid #fff; box-shadow: 0 0 0 0 rgba(255,122,61,.7); animation: ping 2s infinite; }
.co em { font-style: normal; font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: var(--night); color: var(--bone); border: 1px solid var(--ember); padding: 5px 10px; border-radius: 99px; transform: translateY(0); order: 2; }
.co:nth-of-type(2) em { animation-delay: .2s; }
@keyframes ping { 70% { box-shadow: 0 0 0 16px rgba(255,122,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,122,61,0); } }
.shot.big .keys, #iso .keys { margin-top: 22px; }

.bosses { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; position: relative; }
.boss { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 26px; text-align: center; transition: transform .3s, border-color .3s; }
.boss:hover { transform: translateY(-8px) rotate(-.6deg); border-color: var(--blood); }
.boss .bw { display: inline-block; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; background: var(--ember); color: #1b0e06; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.boss canvas { width: 112px; height: auto; margin: 22px auto 18px; display: block; filter: drop-shadow(0 8px 0 rgba(0,0,0,.4)); animation: bob 2.6s ease-in-out infinite; }
.boss:nth-child(2) canvas { animation-delay: .4s; } .boss:nth-child(3) canvas { animation-delay: .8s; } .boss:nth-child(4) canvas { animation-delay: 1.2s; }
.boss h3 { font-size: 1.3rem; margin-bottom: 8px; }
.boss p { color: var(--mute); font-size: .93rem; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-family: var(--mono); font-weight: 700; font-size: .95rem; padding: 10px 18px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--night)); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); transition: transform .2s; }
.chip:hover { transform: translateY(-4px) rotate(-2deg); }
.rv.in .chip { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: var(--d); }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .tilt { transform: none; box-shadow: 8px 8px 0 var(--ember); animation: none; }
  .co em { font-size: .6rem; padding: 3px 7px; }
  .co.left { transform: translate(-30%, -50%); }
}
.shot.hub img { aspect-ratio: 21 / 8; object-fit: cover; object-position: 50% 28%; }