/* ═══════════════════════════════════════════════════════════
   SwissCraft SMP – style.css
   Font: Press Start 2P (headings) · Inter (body)
   Light = Overworld Day · Dark = Deep Dark Biome
═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  /* Light – Overworld Day */
  --bg:         #e8f0d8;
  --surface:    #f8f6ee;
  --surface2:   #eae8dc;
  --surface3:   #dddac8;
  --text:       #1a1a14;
  --text-2:     #4a4a38;
  --text-3:     #7a7a62;
  --accent:     #3d8c1a;
  --accent-l:   #5dae2a;
  --accent-dim: rgba(61,140,26,.12);
  --gold:       #c8950a;
  --gold-l:     #ffbb00;
  --diamond:    #0ea5d4;
  --red:        #cc2222;
  --border:     #c0bca8;
  --border-l:   #d8d4c0;
  --nav-bg:     rgba(232,240,216,.92);
  --sky:        #87ceeb;
  --grass:      #3d8c1a;
  --dirt:       #7a5230;
  --stone:      #8a8878;
  --shadow-px:  rgba(0,0,0,.35);
  --inv-bg:     #8b8b8b;
  --inv-light:  #c6c6c6;
  --inv-dark:   #373737;
}
[data-theme="dark"] {
  /* Dark – Deep Dark Biome */
  --bg:         #060810;
  --surface:    #0e1018;
  --surface2:   #161820;
  --surface3:   #1e2028;
  --text:       #c8e8f8;
  --text-2:     #7aa8c8;
  --text-3:     #4a6878;
  --accent:     #00c8e0;
  --accent-l:   #00e8ff;
  --accent-dim: rgba(0,200,224,.12);
  --gold:       #ffaa00;
  --gold-l:     #ffcc44;
  --diamond:    #00e8ff;
  --red:        #ff4444;
  --border:     #1e2830;
  --border-l:   #283038;
  --nav-bg:     rgba(6,8,16,.92);
  --sky:        #050a18;
  --grass:      #0a4a0a;
  --dirt:       #1a0e06;
  --stone:      #1a1c20;
  --shadow-px:  rgba(0,200,224,.3);
  --inv-bg:     #1e2028;
  --inv-light:  #3a3c48;
  --inv-dark:   #080a10;
}

/* ── Reset & Base ──────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{
  font-family:'Inter',-apple-system,sans-serif;
  background:var(--bg);color:var(--text);
  line-height:1.6;transition:background .3s,color .3s;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
code{font-family:'Press Start 2P',monospace;}

.container{max-width:1220px;margin:0 auto;padding:0 1.5rem;}
.section{padding:80px 0;}

/* Pixel box shadow helper */
.px-shadow{
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,.25),
    inset -2px -2px 0 rgba(0,0,0,.35),
    4px 4px 0 rgba(0,0,0,.5);
}

/* Scroll reveal */
.reveal-up{opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s;}
.reveal-up.visible{opacity:1;transform:none;}

/* ── Minecraft Buttons ─────────────────────────────────── */
.mc-btn {
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Press Start 2P',monospace;
  font-size:.6rem;padding:12px 22px;
  border:none;cursor:pointer;
  position:relative;transition:filter .1s,transform .1s;
  text-transform:uppercase;letter-spacing:.05em;
  image-rendering:pixelated;
}
.mc-btn.primary{
  background:#3d8c1a;color:#fff;
  box-shadow:inset 2px 2px 0 #6dc840,inset -2px -2px 0 #1a4a08, 0 4px 0 #0d2804,4px 4px 0 rgba(0,0,0,.5);
}
.mc-btn.primary:hover{background:#5dae2a;transform:translateY(-2px);}
.mc-btn.primary:active{transform:translateY(2px);box-shadow:inset 2px 2px 0 #1a4a08,inset -2px -2px 0 #6dc840,0 0 0 #0d2804;}

.mc-btn.discord{
  background:#5865F2;color:#fff;
  box-shadow:inset 2px 2px 0 #8891f8,inset -2px -2px 0 #3040d0, 0 4px 0 #1820a0,4px 4px 0 rgba(0,0,0,.5);
}
.mc-btn.discord:hover{background:#6875ff;transform:translateY(-2px);}

.mc-btn.discord-big{
  background:#5865F2;color:#fff;font-size:.65rem;padding:14px 28px;
  box-shadow:inset 2px 2px 0 #8891f8,inset -2px -2px 0 #3040d0,0 5px 0 #1820a0,4px 4px 0 rgba(0,0,0,.6);
}
.mc-btn.discord-big:hover{background:#6875ff;transform:translateY(-2px);}

.mc-btn.mode-btn{
  font-size:.55rem;padding:9px 16px;margin:1rem 1.25rem 1.25rem;
  background:var(--mode-color,#3d8c1a);color:#fff;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.3),inset -1px -1px 0 rgba(0,0,0,.4),0 3px 0 rgba(0,0,0,.5);
}
.mc-btn.mode-btn:hover{filter:brightness(1.2);transform:translateY(-1px);}

.mc-btn-sm{
  font-family:'Press Start 2P',monospace;font-size:.5rem;
  padding:8px 14px;background:#3d8c1a;color:#fff;border:none;cursor:pointer;
  box-shadow:inset 1px 1px 0 #6dc840,inset -1px -1px 0 #1a4a08,0 3px 0 #0d2804;
  transition:var(--t,.15s);
}
.mc-btn-sm:hover{background:#5dae2a;transform:translateY(-1px);}

/* ── Eyebrow / Headings ────────────────────────────────── */
.mc-eyebrow{
  font-family:'Press Start 2P',monospace;font-size:.6rem;
  color:var(--accent);letter-spacing:.15em;margin-bottom:1rem;
}
.mc-h2{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(1rem,2.5vw,1.7rem);
  color:var(--text);line-height:1.5;letter-spacing:-.01em;
  text-shadow:3px 3px 0 var(--shadow-px);
}
.mc-section-head{text-align:center;margin-bottom:3rem;}
.mc-section-sub{color:var(--text-2);font-size:.9rem;margin-top:.75rem;}

.mc-tag{
  display:inline-block;font-size:.65rem;font-weight:600;
  background:var(--surface2);color:var(--text-2);
  border:1px solid var(--border);padding:3px 8px;
}

/* ═════════════════════════════════════════════════════════
   ACHIEVEMENT TOAST
════════════════════════════════════════════════════════ */
.achievement{
  position:fixed;top:-100px;right:1.5rem;z-index:9999;
  display:flex;align-items:center;gap:.75rem;
  background:var(--surface2);
  border:2px solid var(--gold);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.15),inset -1px -1px 0 rgba(0,0,0,.3),
             4px 4px 0 rgba(0,0,0,.6);
  padding:.75rem 1rem;min-width:260px;
  transition:top .4s cubic-bezier(.175,.885,.32,1.275);
  image-rendering:pixelated;
}
.achievement.show{top:calc(74px + 1rem);}
.ach-icon{font-size:2rem;line-height:1;}
.ach-label{font-family:'Press Start 2P',monospace;font-size:.5rem;color:var(--gold);margin-bottom:3px;}
.ach-title{font-family:'Press Start 2P',monospace;font-size:.65rem;color:var(--text);}

/* ═════════════════════════════════════════════════════════
   NAV
════════════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:var(--nav-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:2px solid var(--border);
  transition:background .3s,border-color .3s,top .3s;
}
body.has-demo-banner .nav{top:74px;}
.nav-inner{
  max-width:1220px;margin:0 auto;padding:0 1.5rem;
  display:flex;align-items:center;gap:1.5rem;height:60px;
}
.nav-logo{
  display:flex;align-items:center;gap:10px;
  font-family:'Press Start 2P',monospace;font-size:.7rem;
  color:var(--text);letter-spacing:.05em;flex-shrink:0;
}
.logo-smp{color:var(--accent);}
.nav-links{display:flex;align-items:center;gap:1.5rem;margin-left:auto;}
.nav-links a{
  font-size:.78rem;font-weight:600;color:var(--text-2);
  transition:color .2s;
  padding:4px 0;border-bottom:2px solid transparent;
}
.nav-links a:hover{color:var(--accent);border-bottom-color:var(--accent);}

.nav-right{display:flex;align-items:center;gap:10px;}

/* Theme toggle */
.theme-toggle{
  width:44px;height:28px;border:2px solid var(--border);
  background:var(--surface2);cursor:pointer;
  position:relative;display:flex;align-items:center;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.3),inset -1px -1px 0 rgba(255,255,255,.15);
  transition:background .3s;
  padding:0;
}
.theme-toggle .tt-sun,.theme-toggle .tt-moon{
  position:absolute;font-size:.85rem;line-height:1;
  transition:opacity .3s,transform .3s;
}
.theme-toggle .tt-sun{left:4px;}
.theme-toggle .tt-moon{right:4px;}
[data-theme="light"] .tt-moon{opacity:.3;}
[data-theme="dark"]  .tt-sun {opacity:.3;}

.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);transition:.25s;}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

.mobile-drawer{
  display:none;flex-direction:column;gap:0;
  background:var(--surface);border-top:2px solid var(--border);
  padding:0 1.5rem 1rem;
}
.mobile-drawer.open{display:flex;}
.mobile-drawer a{
  padding:12px 0;font-size:.82rem;font-weight:600;
  color:var(--text-2);border-bottom:1px solid var(--border-l);
}
.mobile-drawer a.mc-btn-sm{border-bottom:none;margin-top:1rem;display:inline-block;width:auto;}

/* Creeper icon (CSS pixel art) */
.creeper-icon{
  display:inline-block;
  width:28px;height:28px;
  background:
    /* Eyes */
    linear-gradient(var(--bg) 0,var(--bg) 0) 4px 8px/8px 6px no-repeat,
    linear-gradient(var(--bg) 0,var(--bg) 0) 16px 8px/8px 6px no-repeat,
    /* Mouth */
    linear-gradient(var(--bg) 0,var(--bg) 0) 8px 18px/4px 4px no-repeat,
    linear-gradient(var(--bg) 0,var(--bg) 0) 16px 18px/4px 4px no-repeat,
    linear-gradient(var(--bg) 0,var(--bg) 0) 8px 22px/12px 4px no-repeat,
    /* Face */
    #3d8c1a;
  image-rendering:pixelated;
  flex-shrink:0;
}
.creeper-icon.sm{width:20px;height:20px;}

/* ═════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100vh;margin-top:60px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.1) brightness(.7);
  image-rendering:pixelated;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(5,10,20,.82) 100%);
}
.hero-scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.08) 4px);
  z-index:1;
}
.hero-content{
  position:relative;z-index:10;text-align:center;
  padding:2rem 1.5rem;max-width:820px;
}

/* Server status badge */
.server-status{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Press Start 2P',monospace;font-size:.5rem;
  padding:6px 14px;border:2px solid;
  margin-bottom:1.5rem;letter-spacing:.1em;
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
}
.server-status.online{color:#55ff55;border-color:#55ff55;background:rgba(0,255,0,.08);}
.server-status.offline{color:#ff5555;border-color:#ff5555;background:rgba(255,0,0,.08);}
.status-pulse{
  width:8px;height:8px;background:currentColor;
  animation:pulseBlink .8s step-start infinite;
}
.status-sep{opacity:.5;}
@keyframes pulseBlink{0%,100%{opacity:1;}50%{opacity:0;}}

/* Hero title */
.hero-title{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(1.8rem,5vw,3.8rem);
  line-height:1.3;margin-bottom:1rem;
  letter-spacing:.05em;
}
.title-swiss{color:#ffffff;text-shadow:3px 3px 0 #000,5px 5px 0 rgba(0,0,0,.3);}
.title-craft{color:#3dff3d;text-shadow:3px 3px 0 #004400,5px 5px 0 rgba(0,0,0,.3);}
.title-smp{
  display:block;font-size:.55em;color:rgba(255,255,255,.7);
  letter-spacing:.3em;margin-top:.4rem;
}

.hero-sub{
  color:rgba(255,255,255,.75);font-size:1rem;margin-bottom:2rem;
  text-shadow:1px 1px 3px rgba(0,0,0,.8);
}

/* IP Box */
.hero-ip-wrap{margin-bottom:2rem;}
.ip-label{
  font-family:'Press Start 2P',monospace;font-size:.5rem;
  color:rgba(255,255,255,.5);display:block;margin-bottom:.5rem;
  letter-spacing:.2em;
}
.ip-box{
  display:inline-flex;align-items:center;gap:0;
  background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.25);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.4),inset -1px -1px 0 rgba(255,255,255,.1),
             0 0 20px rgba(0,200,224,.15);
  overflow:hidden;
}
.ip-version{
  font-family:'Press Start 2P',monospace;font-size:.45rem;
  color:rgba(255,255,255,.4);padding:6px 10px;
  border-right:1px solid rgba(255,255,255,.1);
}
#server-ip{
  font-family:'Press Start 2P',monospace;font-size:.75rem;
  color:#7affb8;padding:10px 16px;letter-spacing:.08em;
}
.copy-btn{
  font-family:'Press Start 2P',monospace;font-size:.5rem;
  padding:10px 14px;background:#3d8c1a;color:#fff;border:none;cursor:pointer;
  box-shadow:inset 1px 1px 0 #6dc840,inset -1px -1px 0 #1a4a08;
  transition:background .15s;white-space:nowrap;
}
.copy-btn:hover{background:#5dae2a;}
.copy-btn.copied{background:#0ea5d4;color:#fff;}

/* Hearts */
.hearts-row{margin-top:1.5rem;display:flex;justify-content:center;gap:4px;}
.heart{
  font-size:1.2rem;
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.8));
  transition:transform .2s;
}
.heart.full{color:#ff3333;}
.heart.empty{color:rgba(255,255,255,.2);}
.heart.full:hover{transform:scale(1.3);}

.hero-btns{
  display:flex;gap:1rem;justify-content:center;
  flex-wrap:wrap;margin-bottom:1.5rem;
}

/* Scroll hint */
.hero-scroll{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  z-index:10;
  font-family:'Press Start 2P',monospace;font-size:.55rem;
  color:rgba(255,255,255,.4);
  animation:bobDown .8s ease-in-out infinite alternate;
}
@keyframes bobDown{from{transform:translateX(-50%) translateY(0);}to{transform:translateX(-50%) translateY(6px);}}

/* ═════════════════════════════════════════════════════════
   STATS STRIP
════════════════════════════════════════════════════════ */
.stats-strip{
  background:var(--surface2);
  border-top:4px solid var(--border);
  border-bottom:4px solid var(--border);
  padding:1.75rem 0;
}
.stats-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;
  text-align:center;
}
.stat-block{
  padding:.75rem .5rem;border:1px solid var(--border-l);
  background:var(--surface);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.1),inset -1px -1px 0 rgba(0,0,0,.15);
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
}
.stat-icon{font-size:1.2rem;}
.stat-value{
  font-family:'Press Start 2P',monospace;font-size:.7rem;
  color:var(--accent);line-height:1;
}
.stat-label{font-size:.72rem;color:var(--text-3);font-weight:500;}

/* ═════════════════════════════════════════════════════════
   GRASS DIVIDER
════════════════════════════════════════════════════════ */
.grass-divider{
  height:48px;position:relative;overflow:hidden;
}
.grass-divider::before{
  content:'';position:absolute;inset:0 0 24px;
  background:repeating-linear-gradient(
    90deg,
    var(--accent) 0px,var(--accent) 15px,
    var(--accent-l) 15px,var(--accent-l) 16px,
    var(--accent) 16px,var(--accent) 31px,
    rgba(0,0,0,.2) 31px,rgba(0,0,0,.2) 32px
  );
}
.grass-divider::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:24px;
  background:repeating-linear-gradient(
    90deg,
    var(--dirt) 0px,var(--dirt) 15px,
    #5a3a1a 15px,#5a3a1a 16px,
    var(--dirt) 16px,var(--dirt) 31px,
    rgba(0,0,0,.25) 31px,rgba(0,0,0,.25) 32px
  );
}
.grass-divider.flip{transform:scaleY(-1);}

/* ═════════════════════════════════════════════════════════
   SPIELMODI
════════════════════════════════════════════════════════ */
.modi-section{background:var(--bg);}
.modi-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;
}
.mode-card{
  background:var(--surface);
  border:2px solid var(--border);
  box-shadow:4px 4px 0 rgba(0,0,0,.4),
             inset 1px 1px 0 rgba(255,255,255,.1);
  display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s;
  border-top:4px solid var(--mode-color,#3d8c1a);
}
.mode-card:hover{
  transform:translateY(-4px) translateX(-2px);
  box-shadow:6px 8px 0 rgba(0,0,0,.5),
             inset 1px 1px 0 rgba(255,255,255,.1);
}
.mode-img{position:relative;aspect-ratio:16/9;overflow:hidden;}
.mode-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;filter:saturate(1.1);}
.mode-card:hover .mode-img img{transform:scale(1.06);}
.mode-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent);}
.mode-badge{
  position:absolute;bottom:8px;right:8px;
  font-size:.65rem;font-weight:700;color:#fff;
  background:rgba(0,0,0,.6);padding:3px 8px;
  display:flex;align-items:center;gap:5px;
  backdrop-filter:blur(4px);
}
.mode-dot{width:7px;height:7px;background:#55ff55;display:inline-block;animation:pulseBlink .8s step-start infinite;}
.mode-body{padding:1.25rem;flex:1;}
.mode-title-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;}
.mode-icon{font-size:1.3rem;}
.mode-body h3{font-family:'Press Start 2P',monospace;font-size:.65rem;color:var(--text);line-height:1.4;}
.mode-body p{font-size:.82rem;color:var(--text-2);line-height:1.65;margin-top:.5rem;}
.mode-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.75rem;}

/* ═════════════════════════════════════════════════════════
   FEATURES
════════════════════════════════════════════════════════ */
.features-section{
  background:var(--surface);
  border-top:4px solid var(--border);border-bottom:4px solid var(--border);
}

/* XP Bar */
.xp-bar-wrap{
  display:flex;align-items:center;gap:1rem;
  margin-bottom:2.5rem;max-width:600px;margin-left:auto;margin-right:auto;
}
.xp-label{font-size:.75rem;font-weight:600;color:var(--text-2);white-space:nowrap;}
.xp-track{
  flex:1;height:12px;background:var(--inv-dark);
  border:2px solid var(--border);
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.5);
}
.xp-fill{
  height:100%;width:var(--fill,0%);
  background:linear-gradient(to right,#5dae2a,#a0e040);
  transition:width 1.5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px rgba(100,220,0,.6);
}
.xp-val{font-family:'Press Start 2P',monospace;font-size:.5rem;color:var(--accent);white-space:nowrap;}

/* Inventory slots */
.features-inv{
  display:grid;grid-template-columns:repeat(9,64px);gap:4px;
  justify-content:center;margin-bottom:2.5rem;
  background:var(--inv-bg);
  border:4px solid var(--inv-dark);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.15),
             inset -2px -2px 0 rgba(0,0,0,.5),
             6px 6px 0 rgba(0,0,0,.5);
  padding:8px;
}
.inv-slot{
  width:64px;height:64px;
  background:var(--inv-bg);
  border:2px solid var(--inv-dark);
  box-shadow:inset 2px 2px 0 var(--inv-dark),
             inset -2px -2px 0 var(--inv-light);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;transition:filter .15s;
  image-rendering:pixelated;
}
.inv-slot:hover{filter:brightness(1.4);}
.inv-slot:focus{outline:2px solid var(--accent);outline-offset:2px;}
.inv-icon{font-size:1.8rem;line-height:1;pointer-events:none;}
.inv-tooltip{
  display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--surface2);border:2px solid var(--accent);
  padding:.6rem .75rem;min-width:180px;z-index:100;
  box-shadow:4px 4px 0 rgba(0,0,0,.6);pointer-events:none;
}
.inv-slot:hover .inv-tooltip,.inv-slot:focus .inv-tooltip{display:block;}
.inv-name{font-family:'Press Start 2P',monospace;font-size:.5rem;color:var(--text);margin-bottom:.4rem;line-height:1.5;}
.inv-desc{font-size:.75rem;color:var(--text-2);line-height:1.5;}

/* Features list (mobile) */
.features-list{
  display:none;
  flex-direction:column;gap:1rem;
}
.feat-row{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1rem;background:var(--surface2);
  border:2px solid var(--border);
  box-shadow:3px 3px 0 rgba(0,0,0,.3);
}
.feat-icon{font-size:1.5rem;flex-shrink:0;line-height:1;}
.feat-row strong{font-size:.88rem;font-weight:700;color:var(--text);display:block;margin-bottom:.25rem;}
.feat-row p{font-size:.82rem;color:var(--text-2);}

/* ═════════════════════════════════════════════════════════
   TEAM
════════════════════════════════════════════════════════ */
.team-section{background:var(--bg);}
.team-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;}
.player-card{
  background:var(--surface);border:2px solid var(--border);
  box-shadow:3px 3px 0 rgba(0,0,0,.4),
             inset 1px 1px 0 rgba(255,255,255,.1);
  padding:1.25rem 1rem;text-align:center;
  transition:transform .2s,box-shadow .2s;
  border-top:3px solid var(--role-color,#3d8c1a);
}
.player-card:hover{transform:translateY(-3px);box-shadow:5px 6px 0 rgba(0,0,0,.5);}
.player-head-wrap{
  width:64px;height:64px;margin:0 auto 1rem;
  border:2px solid var(--border);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.15),inset -1px -1px 0 rgba(0,0,0,.3);
  image-rendering:pixelated;overflow:hidden;
}
.player-head{width:64px;height:64px;image-rendering:pixelated;}
.player-head-fallback{
  width:64px;height:64px;
  background:var(--surface2);color:var(--accent);
  font-family:'Press Start 2P',monospace;font-size:.7rem;
  display:flex;align-items:center;justify-content:center;
}
.player-name{
  font-family:'Press Start 2P',monospace;font-size:.55rem;
  color:var(--text);margin-bottom:.3rem;line-height:1.5;
}
.player-role{
  font-size:.72rem;font-weight:700;
  color:var(--role-color,#3d8c1a);margin-bottom:.25rem;
}
.player-since{font-size:.7rem;color:var(--text-3);}

/* ═════════════════════════════════════════════════════════
   REGELN
════════════════════════════════════════════════════════ */
.regeln-section{
  background:var(--surface);
  border-top:4px solid var(--border);border-bottom:4px solid var(--border);
}
.regeln-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;}
.regel-card{
  display:flex;gap:1.25rem;
  background:var(--surface2);border:2px solid var(--border);
  padding:1.25rem;
  box-shadow:3px 3px 0 rgba(0,0,0,.35),
             inset 1px 1px 0 rgba(255,255,255,.1);
  transition:border-color .2s,transform .2s;
}
.regel-card:hover{border-color:var(--accent);transform:translateX(3px);}
.regel-nr{
  font-family:'Press Start 2P',monospace;font-size:1.4rem;
  color:var(--accent);flex-shrink:0;line-height:1;
  opacity:.5;
}
.regel-body h3{
  font-family:'Press Start 2P',monospace;font-size:.6rem;
  color:var(--text);margin-bottom:.6rem;line-height:1.5;
}
.regel-icon{font-size:.9rem;}
.regel-body p{font-size:.85rem;color:var(--text-2);line-height:1.65;}

/* ═════════════════════════════════════════════════════════
   JOIN SECTION
════════════════════════════════════════════════════════ */
.join-section{
  position:relative;overflow:hidden;
  padding:80px 0;
  background:var(--sky);
}
.join-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 120%,rgba(0,200,224,.25),transparent),
    repeating-linear-gradient(90deg,rgba(0,200,224,.03) 0,rgba(0,200,224,.03) 1px,transparent 1px,transparent 40px),
    repeating-linear-gradient(0deg,rgba(0,200,224,.03) 0,rgba(0,200,224,.03) 1px,transparent 1px,transparent 40px);
}
[data-theme="light"] .join-section{
  background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);
}
.join-inner{position:relative;z-index:1;text-align:center;max-width:680px;margin:0 auto;}
.join-title{color:#fff !important;margin-bottom:1rem;}
.join-highlight{color:var(--accent-l);}
.join-sub{color:rgba(255,255,255,.65);font-size:.95rem;margin-bottom:2rem;}

.join-ip{
  display:inline-flex;align-items:center;
  background:rgba(0,0,0,.55);border:2px solid var(--accent);
  box-shadow:0 0 20px var(--accent-dim),4px 4px 0 rgba(0,0,0,.5);
  overflow:hidden;margin-bottom:3rem;
}
.join-ip code{
  font-size:.8rem;color:#7affb8;padding:12px 20px;letter-spacing:.1em;
}
.join-ip .copy-btn{font-size:.5rem;padding:12px 16px;}

.join-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  margin-bottom:2.5rem;
}
.join-step{
  background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.1);
  padding:1.5rem 1rem;
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
}
.step-nr{
  font-family:'Press Start 2P',monospace;font-size:1.5rem;
  color:var(--accent-l);margin-bottom:.5rem;
}
.step-icon{font-size:1.5rem;margin-bottom:.75rem;}
.join-step h4{
  font-family:'Press Start 2P',monospace;font-size:.55rem;
  color:#fff;margin-bottom:.5rem;line-height:1.5;
}
.join-step p{font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.6;}

.join-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* ═════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════ */
.footer{
  background:var(--surface2);border-top:4px solid var(--border);
  padding:1.75rem 0;
}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;
}
.footer-brand{display:flex;align-items:center;gap:.6rem;}
.footer-logo{font-family:'Press Start 2P',monospace;font-size:.65rem;color:var(--text);}
.footer-ip{display:flex;align-items:center;gap:1rem;}
.footer-ip span:first-child{font-family:'Press Start 2P',monospace;font-size:.55rem;color:var(--accent);}
.footer-version{font-size:.72rem;color:var(--text-3);}
.footer-credit{font-size:.78rem;color:var(--text-3);}
.footer-credit a{color:var(--accent);font-weight:600;}

/* Back to top */
#back-to-top{
  position:fixed;bottom:1.5rem;right:1.5rem;
  width:44px;height:44px;
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  font-family:'Press Start 2P',monospace;font-size:.7rem;
  box-shadow:3px 3px 0 rgba(0,0,0,.5),
             inset 1px 1px 0 rgba(255,255,255,.3);
  opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s;z-index:800;
}
#back-to-top.visible{opacity:1;visibility:visible;}
#back-to-top:hover{filter:brightness(1.2);}

/* ═════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .modi-grid{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(3,1fr);}
  .stats-grid{grid-template-columns:repeat(3,1fr);}
  .features-inv{grid-template-columns:repeat(6,64px);}
}
@media(max-width:900px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .regeln-grid{grid-template-columns:1fr;}
  .join-steps{grid-template-columns:1fr;}
  .features-inv{display:none;}
  .features-list{display:flex;}
  .mc-h2{font-size:clamp(.8rem,2vw,1.3rem);}
}
@media(max-width:640px){
  .modi-grid{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  #server-ip{font-size:.55rem;}
  .hero-title{font-size:clamp(1.3rem,6vw,2.5rem);}
  .ip-box{flex-wrap:wrap;}
  .hero-btns{flex-direction:column;align-items:center;}
  .mc-btn{font-size:.5rem;padding:10px 16px;}
}
@media(max-width:420px){
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
}