:root{
  --bg:#0a0e1a;
  --bg-deep:#05080f;
  --panel:#0d1117;
  --panel-2:#14192a;
  --border:#3a3f55;
  --border-dim:#252a3a;
  --text:#e8eef9;
  --muted:#8893ad;
  --faint:#4a546c;
  --diamond:#3eddc5;
  --diamond-light:#7fe9ff;
  --gold:#f4d03f;
  --redstone:#ff5e3a;
  --grass:#5ba344;
  --grass-bright:#6bbd4f;
  --pixel-shadow:3px 3px 0 rgba(0,0,0,.55);
  --font-display:'Pixelify Sans','Courier New',monospace;
  --font-body:'VT323','Courier New',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
*::selection{background:var(--diamond);color:#000}

html,body{
  height:100%;
  overflow:hidden;
  background:var(--bg-deep);
  color:var(--text);
  font-family:var(--font-body);
  font-size:20px;
  line-height:1.4;
  -webkit-font-smoothing:none;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
  user-select:none;
}

body{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' shape-rendering='crispEdges'><rect x='14' y='2' width='2' height='2' fill='%237fe9ff'/><rect x='16' y='2' width='4' height='2' fill='%233eddc5'/><rect x='14' y='4' width='6' height='2' fill='%233eddc5'/><rect x='12' y='6' width='6' height='2' fill='%233eddc5'/><rect x='10' y='8' width='6' height='2' fill='%232bb5a3'/><rect x='8' y='10' width='4' height='2' fill='%236b4a2a'/><rect x='6' y='12' width='4' height='2' fill='%236b4a2a'/><rect x='4' y='14' width='4' height='2' fill='%237c5a36'/><rect x='2' y='16' width='4' height='2' fill='%236b4a2a'/></svg>") 4 4, crosshair;
  background:linear-gradient(180deg,#0a0e1a 0%,#1a1f35 60%,#2d1b4e 100%);
}

kbd{
  display:inline-block;
  font-family:var(--font-display);
  font-size:.7em;
  padding:1px 6px;
  margin:0 .3em 0 0;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-bottom-width:2px;
  letter-spacing:.05em;
  text-transform:uppercase;
}

code{
  font-family:var(--font-body);
  background:rgba(255,255,255,.05);
  padding:0 6px;
  color:var(--diamond);
  font-size:.95em;
}

#world{
  position:fixed;
  inset:0;
  z-index:0;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

.vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 40%,transparent 0%,transparent 50%,rgba(0,0,0,.45) 100%);
  mix-blend-mode:multiply;
}

.rain{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background-image:
    linear-gradient(180deg,transparent 0%,transparent 92%,rgba(140,180,220,.4) 92%,transparent 100%);
  background-size:3px 14px;
  opacity:0;
  transition:opacity 1s;
  animation:rain-fall 0.4s linear infinite;
}
.rain.on{opacity:.55}
@keyframes rain-fall{
  0%{background-position:0 0}
  100%{background-position:-12px 60px}
}

/* === HERO === */
.hero{
  position:fixed;
  top:max(1.8rem,4.5vh);
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  display:flex;
  align-items:center;
  gap:.95rem;
  padding:.4rem .9rem .4rem .4rem;
  pointer-events:none;
}

.logo{
  position:relative;
  width:64px;
  height:64px;
  flex-shrink:0;
}
#logo-canvas{
  position:relative;
  z-index:2;
  width:64px;
  height:64px;
  image-rendering:pixelated;
  animation:logo-float 4.5s ease-in-out infinite;
  filter:drop-shadow(var(--pixel-shadow));
}
.logo-glow{
  position:absolute;
  inset:-25%;
  background:radial-gradient(circle,rgba(62,221,197,.4) 0%,transparent 65%);
  z-index:1;
  animation:logo-glow 3.2s ease-in-out infinite alternate;
  filter:blur(8px);
}
@keyframes logo-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-6px) rotate(2deg)}
}
@keyframes logo-glow{
  0%{opacity:.45;transform:scale(.85)}
  100%{opacity:.9;transform:scale(1.1)}
}

.hero-text{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  text-align:left;
}

.title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.4rem);
  letter-spacing:.03em;
  line-height:.95;
  color:#fff;
  text-shadow:var(--pixel-shadow);
  filter:drop-shadow(0 0 14px rgba(232,238,249,.18));
}
.title-accent{
  color:var(--diamond);
  text-shadow:var(--pixel-shadow),0 0 14px rgba(62,221,197,.5);
}

.status{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:1px 8px;
  background:rgba(91,163,68,.1);
  border:1px solid var(--grass);
  color:var(--grass-bright);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  pointer-events:auto;
  width:max-content;
}
.status-dot{
  width:6px;
  height:6px;
  background:var(--grass-bright);
  animation:blink 1.6s ease-in-out infinite;
  box-shadow:0 0 6px var(--grass-bright);
}
@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:.25}
}

/* === F3 DEBUG === */
.debug{
  position:fixed;
  top:.8rem;
  left:.8rem;
  z-index:30;
  background:rgba(0,0,0,.55);
  padding:.4rem .7rem;
  font-size:.9rem;
  line-height:1.35;
  border-left:3px solid var(--diamond);
  text-shadow:1px 1px 0 #000;
  pointer-events:none;
  max-width:280px;
  animation:debug-in .2s ease;
}
.debug[hidden]{display:none!important}
.debug-row{display:flex;gap:.5rem}
.debug-row>span:first-child{color:var(--muted);min-width:64px}
.debug-row>span:nth-child(2){color:var(--text)}
.debug-row.sep{color:var(--faint);padding:.15rem 0}
.debug-row.dim{color:var(--muted);font-size:.82rem}
@keyframes debug-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

/* === ACHIEVEMENTS === */
.achievements{
  position:fixed;
  top:1rem;
  right:1rem;
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  pointer-events:none;
  max-width:340px;
}
.achievement{
  display:flex;
  gap:.85rem;
  align-items:center;
  padding:.65rem .9rem;
  background:linear-gradient(180deg,#2a2438 0%,#1a1428 100%);
  border:2px solid var(--gold);
  box-shadow:var(--pixel-shadow),0 0 30px rgba(244,208,63,.25);
  animation:ach-in .45s cubic-bezier(.3,1.5,.5,1) both,ach-out .4s ease 4.5s forwards;
  will-change:transform,opacity;
}
.achievement.rare{
  border-color:var(--diamond);
  box-shadow:var(--pixel-shadow),0 0 30px rgba(62,221,197,.35);
}
.achievement.rare .ach-tier{color:var(--diamond)}
.ach-icon{
  width:32px;
  height:32px;
  image-rendering:pixelated;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.5));
}
.ach-text small{
  display:block;
  font-family:var(--font-display);
  font-size:.7rem;
  color:var(--gold);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:1px;
}
.ach-text strong{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1rem;
  color:var(--text);
}
.ach-text em{
  display:block;
  font-style:normal;
  font-size:.85rem;
  color:var(--muted);
  margin-top:1px;
}
@keyframes ach-in{
  0%{transform:translateX(110%) scale(.95);opacity:0}
  60%{transform:translateX(-10px) scale(1.02);opacity:1}
  100%{transform:translateX(0) scale(1);opacity:1}
}
@keyframes ach-out{
  to{opacity:0;transform:translateX(20px) scale(.97)}
}

/* === HOTBAR === */
.hotbar{
  position:fixed;
  bottom:4.2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  display:flex;
  gap:3px;
  padding:3px;
  background:rgba(13,17,23,.72);
  border:2px solid var(--border);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:var(--pixel-shadow);
}
.slot{
  width:54px;
  height:54px;
  background:rgba(0,0,0,.45);
  border:2px solid transparent;
  position:relative;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .08s,border-color .1s,background .1s;
  pointer-events:auto;
}
.slot:hover{background:rgba(255,255,255,.05)}
.slot:active{transform:scale(.94)}
.slot.selected{
  border-color:#fff;
  background:rgba(62,221,197,.08);
  box-shadow:inset 0 0 0 1px var(--diamond),0 0 20px rgba(62,221,197,.4);
  animation:slot-pulse 1.4s ease-in-out infinite;
}
@keyframes slot-pulse{
  0%,100%{box-shadow:inset 0 0 0 1px var(--diamond),0 0 18px rgba(62,221,197,.35)}
  50%{box-shadow:inset 0 0 0 1px var(--diamond-light),0 0 28px rgba(62,221,197,.55)}
}
.slot-key{
  position:absolute;
  top:1px;
  left:4px;
  font-family:var(--font-display);
  font-size:.72rem;
  color:var(--muted);
  text-shadow:1px 1px 0 #000;
}
.slot.selected .slot-key{color:var(--diamond)}
.slot-icon{
  width:36px;
  height:36px;
  image-rendering:pixelated;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.4));
}
.slot-tip{
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:.4rem .7rem;
  background:var(--panel);
  border:1px solid var(--border);
  font-size:.92rem;
  color:var(--text);
  opacity:0;
  pointer-events:none;
  transition:opacity .12s;
  text-shadow:1px 1px 0 #000;
  z-index:2;
}
.slot-tip small{
  display:block;
  font-size:.75rem;
  color:var(--muted);
  margin-top:1px;
}
.slot:hover .slot-tip,.slot:focus .slot-tip{opacity:1}

/* === HINTS === */
.hints{
  position:fixed;
  bottom:1.4rem;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  display:flex;
  gap:1rem;
  font-size:.85rem;
  color:var(--muted);
  pointer-events:none;
  flex-wrap:wrap;
  justify-content:center;
  max-width:90vw;
}
.hint{display:inline-flex;align-items:center;white-space:nowrap}

/* === TICKER === */
.ticker{
  position:fixed;
  bottom:1.45rem;
  right:1rem;
  z-index:15;
  display:flex;
  gap:.55rem;
  align-items:center;
  font-size:.85rem;
  color:var(--muted);
  max-width:min(340px,38vw);
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .6s ease,transform .6s ease;
}
.ticker.show{opacity:.85;transform:translateY(0)}
.ticker-label{
  font-family:var(--font-display);
  font-size:.65rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  background:rgba(244,208,63,.1);
  padding:1px 6px;
  border:1px solid rgba(244,208,63,.35);
}
.ticker-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* === CHAT === */
.chat{
  position:fixed;
  bottom:12rem;
  left:1.2rem;
  right:auto;
  z-index:40;
  width:min(560px,90vw);
  font-family:var(--font-body);
  pointer-events:none; /* лог не блокирует мир в peek-режиме; форма/кнопка сами включают pointer-events */
}
.chat[hidden]{display:none}

/* ===== PEEK MODE (всегда виден, минималистичный fade-feed) ===== */
.chat.is-peek .chat-form{display:none}
.chat.is-peek .chat-log{
  background:transparent;
  max-height:9.5rem;
  overflow:hidden;
  font-size:.95rem;
  padding:.35rem .55rem;
  pointer-events:none;
  /* верхние сообщения растворяются в темноту */
  mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 100%);
  text-shadow:1px 1px 0 #000,0 0 4px #000;
  opacity:.85;
}
.chat.is-peek .chat-msg{filter:drop-shadow(1px 1px 0 #000)}
.chat-peek-hint{
  display:none;
  align-items:center;
  gap:.4rem;
  margin:.25rem 0 .15rem;
  padding:.18rem .55rem;
  font:inherit;
  font-size:.78rem;
  letter-spacing:.05em;
  color:rgba(232,238,249,.5);
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.07);
  border-radius:2px;
  text-transform:lowercase;
  cursor:pointer;
  pointer-events:auto;
  transition:color .15s,background .15s,border-color .15s;
}
.chat.is-peek .chat-peek-hint{display:inline-flex}
.chat-peek-hint:hover{color:var(--diamond);background:rgba(0,0,0,.55);border-color:var(--border)}
.chat-peek-hint .chat-peek-icon{color:var(--diamond);font-family:var(--font-display);font-weight:bold;font-size:.95rem}
/* «вспышка» peek-фида при новом сообщении */
.chat.is-peek.has-new .chat-log{opacity:1;transition:opacity .25s ease-out}

/* ===== OPEN MODE (полноценный чат) ===== */
.chat:not(.is-peek) .chat-peek-hint{display:none}
.chat-log{
  max-height:36vh;
  overflow-y:auto;
  padding:.6rem .8rem;
  background:rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  gap:.15rem;
  font-size:1rem;
  margin-bottom:.25rem;
  text-shadow:1px 1px 0 #000;
  pointer-events:auto;
}
.chat-form{pointer-events:auto}
.chat-log::-webkit-scrollbar{width:6px}
.chat-log::-webkit-scrollbar-thumb{background:var(--border)}
.chat-log::-webkit-scrollbar-track{background:rgba(0,0,0,.3)}
.chat-msg{line-height:1.25;word-wrap:break-word}
.chat-msg.you{color:#fff}
.chat-msg.you::before{content:'‹you› ';color:var(--diamond)}
.chat-msg.sys{color:var(--gold)}
.chat-msg.sys::before{content:'[server] ';color:var(--grass-bright)}
.chat-msg.err{color:var(--redstone)}
.chat-msg.err::before{content:'! ';color:var(--redstone)}
.chat-msg.tip{color:var(--muted);font-style:italic}
.chat-form{
  display:flex;
  align-items:center;
  padding:.5rem .8rem;
  background:rgba(0,0,0,.65);
  border:1px solid var(--border);
}
.chat-prompt{
  color:var(--diamond);
  margin-right:.55rem;
  font-family:var(--font-display);
  font-size:1.1rem;
}
#chat-input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--text);
  font:inherit;
  font-size:1.05rem;
  text-shadow:1px 1px 0 #000;
}
#chat-input::placeholder{color:var(--faint)}

/* === CREEPER FLASH === */
.creeper-flash{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle,rgba(91,163,68,.4) 0%,rgba(0,0,0,.85) 70%);
  animation:creeper-zoom 2.6s ease-out forwards;
  pointer-events:none;
}
#creeper-canvas{
  width:480px;
  height:480px;
  image-rendering:pixelated;
  animation:creeper-shake .08s linear infinite;
  filter:drop-shadow(0 0 30px rgba(91,163,68,.8));
}
@keyframes creeper-zoom{
  0%{background:radial-gradient(circle,rgba(91,163,68,0) 0%,rgba(0,0,0,0) 100%)}
  20%{background:radial-gradient(circle,rgba(91,163,68,.4) 0%,rgba(0,0,0,.85) 70%)}
  85%{background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(255,255,255,.9) 100%);transform:scale(2)}
  100%{background:radial-gradient(circle,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%);transform:scale(2);opacity:0}
}
@keyframes creeper-shake{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-2px,1px)}
  50%{transform:translate(2px,-1px)}
  75%{transform:translate(-1px,2px)}
}

/* === FOOT === */
.foot{
  position:fixed;
  bottom:.35rem;
  left:1rem;
  right:1rem;
  z-index:5;
  display:flex;
  gap:1.2rem;
  font-size:.78rem;
  color:var(--faint);
  pointer-events:none;
  justify-content:space-between;
  flex-wrap:wrap;
}
.foot-stat{color:var(--muted)}
.foot code{font-size:.85em}

/* === MEDIA QUERIES === */
@media (max-width:768px){
  body{font-size:18px}
  .slot{width:42px;height:42px}
  .slot-icon{width:26px;height:26px}
  .slot-key{font-size:.62rem}
  .debug{font-size:.78rem;max-width:200px}
  .achievements{max-width:280px;top:.5rem;right:.5rem}
  .hotbar{bottom:5.5rem;gap:2px;padding:2px}
  .hints{font-size:.75rem;gap:.6rem;bottom:2.6rem}
  .ticker{display:none}
  .chat{bottom:13rem;left:.6rem}
  .title{font-size:1.35rem}
  .logo,#logo-canvas{width:48px;height:48px}
  .foot{font-size:.7rem;gap:.6rem;justify-content:flex-start}
  .foot span:nth-child(n+4){display:none}
}

@media (max-width:480px){
  .hotbar .slot:nth-child(n+8){display:none}
  .slot{width:36px;height:36px}
  .slot-icon{width:22px;height:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* === MP STATUS DOT === */
#mp-status{background:var(--redstone)!important;animation:none!important;box-shadow:0 0 6px var(--redstone)!important}
#mp-status.online{background:var(--grass-bright)!important;box-shadow:0 0 6px var(--grass-bright)!important;animation:blink 1.6s ease-in-out infinite!important}

/* === USER BAR === */
.user-bar{
  position:fixed;
  top:max(1.8rem,4.5vh);
  right:1rem;
  z-index:21;
  display:flex;
  gap:.4rem;
  align-items:center;
  font-family:var(--font-display);
  pointer-events:auto;
}
.user-pill{
  display:inline-flex;
  gap:.4rem;
  align-items:center;
  padding:.3rem .7rem;
  background:rgba(13,17,23,.7);
  border:1px solid var(--border);
  font-size:.85rem;
  letter-spacing:.06em;
  text-shadow:1px 1px 0 #000;
  backdrop-filter:blur(4px);
}
.user-dot{
  width:6px;height:6px;
  display:inline-block;
  box-shadow:0 0 6px currentColor;
}
.user-action{
  padding:.3rem .55rem;
  background:rgba(13,17,23,.7);
  border:1px solid var(--border);
  color:var(--muted);
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .12s,border-color .12s;
}
.user-action:hover{color:var(--text);border-color:var(--diamond)}

/* === ONLINE PANEL === */
.online-panel{
  position:fixed;
  top:7.5rem;
  right:1rem;
  z-index:18;
  width:200px;
  background:rgba(13,17,23,.68);
  border:1px solid var(--border);
  font-family:var(--font-body);
  font-size:.95rem;
  backdrop-filter:blur(6px);
  pointer-events:none;
}
.online-header{
  padding:.35rem .7rem;
  font-family:var(--font-display);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--border-dim);
  text-shadow:1px 1px 0 #000;
}
.online-header span{color:var(--diamond)}
.online-list{
  max-height:200px;
  overflow-y:auto;
  padding:.35rem .55rem;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.online-empty{color:var(--faint);font-size:.85rem;text-align:center}
.online-item{
  display:flex;
  gap:.4rem;
  align-items:center;
  text-shadow:1px 1px 0 #000;
  pointer-events:auto;
  cursor:pointer;
  padding:1px 4px;
  border:1px solid transparent;
  transition:background .1s,border-color .1s;
}
.online-item:hover{background:rgba(62,221,197,.08);border-color:rgba(62,221,197,.3)}
.online-item:focus{outline:none;background:rgba(62,221,197,.12);border-color:var(--diamond)}
.online-item.is-me{cursor:default;background:rgba(255,255,255,.04)}
.online-item.is-me:hover{background:rgba(255,255,255,.04);border-color:transparent}
.online-nick{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-coord{
  font-family:var(--font-display);
  font-size:.65rem;
  color:var(--faint);
  letter-spacing:.05em;
}
.online-crown{color:var(--gold);font-size:.85rem;text-shadow:0 0 4px rgba(244,208,63,.6)}
.online-dot{
  width:6px;height:6px;
  display:inline-block;
  box-shadow:0 0 4px currentColor;
  flex-shrink:0;
}

/* === AUTH MODAL === */
.auth-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:auth-in .35s ease;
  pointer-events:auto;
  cursor:default;
}
@keyframes auth-in{from{opacity:0}to{opacity:1}}
.auth-card{
  width:min(420px,92vw);
  background:linear-gradient(180deg,#14192a 0%,#0a0e1a 100%);
  border:2px solid var(--border);
  box-shadow:0 20px 80px rgba(0,0,0,.65),0 0 60px rgba(62,221,197,.12);
  padding:1.4rem 1.4rem 1.2rem;
  font-family:var(--font-body);
  animation:auth-card-in .4s cubic-bezier(.3,1.4,.5,1);
}
@keyframes auth-card-in{
  from{transform:translateY(20px) scale(.97);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}
.auth-header{text-align:center;margin-bottom:1rem}
.auth-logo{
  width:48px;height:48px;
  margin:0 auto .4rem;
  background:linear-gradient(135deg,#7fe9ff 0%,#3eddc5 50%,#1a8e7e 100%);
  border:3px solid #0a4a3e;
  image-rendering:pixelated;
  box-shadow:0 0 24px rgba(62,221,197,.4);
  position:relative;
}
.auth-logo::before{
  content:'';
  position:absolute;
  top:6px;left:8px;
  width:14px;height:8px;
  background:rgba(255,255,255,.4);
}
.auth-header h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.8rem;
  letter-spacing:.04em;
  text-shadow:var(--pixel-shadow);
  margin-bottom:.2rem;
}
.auth-header h2 span{color:var(--diamond)}
.auth-sub{
  color:var(--muted);
  font-size:.95rem;
}
.auth-tabs{
  display:flex;
  gap:.2rem;
  margin-bottom:1rem;
  border-bottom:1px solid var(--border);
}
.auth-tab{
  flex:0 0 auto;
  padding:.45rem .9rem;
  background:transparent;
  border:none;
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .12s,border-color .12s;
}
.auth-tab:hover{color:var(--text)}
.auth-tab.active{color:var(--diamond);border-bottom-color:var(--diamond)}
.auth-tab.right{margin-left:auto;font-size:.7rem;color:var(--faint)}
.auth-tab.right:hover{color:var(--muted)}
.auth-form{display:flex;flex-direction:column;gap:.75rem}
.auth-form label{display:flex;flex-direction:column;gap:.25rem}
.auth-form label span{
  font-family:var(--font-display);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.auth-form input{
  padding:.55rem .7rem;
  background:rgba(0,0,0,.45);
  border:1px solid var(--border);
  color:var(--text);
  font:inherit;
  font-size:1rem;
  outline:none;
  text-shadow:1px 1px 0 #000;
  transition:border-color .12s;
}
.auth-form input:focus{border-color:var(--diamond);box-shadow:0 0 0 1px var(--diamond)}
.auth-error{
  padding:.4rem .7rem;
  background:rgba(255,94,58,.1);
  border:1px solid var(--redstone);
  color:var(--redstone);
  font-size:.9rem;
}
.auth-submit{
  padding:.65rem;
  background:var(--diamond);
  color:#0a0e1a;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  border:2px solid #2bb5a3;
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,.5);
  transition:transform .08s,box-shadow .08s;
  margin-top:.3rem;
}
.auth-submit:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.auth-submit:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.5)}
.auth-submit:disabled{opacity:.6;cursor:wait}
.auth-meta{
  margin-top:.75rem;
  font-size:.78rem;
  color:var(--faint);
  text-align:center;
}

/* === CHAT REMOTE NICK === */
.chat-msg.remote{color:#fff}
.chat-msg.remote::before{content:''}
.chat-nick{font-family:var(--font-display);font-size:.92em;margin-right:.3em}
.chat-msg.ai{color:#dbcdff}
.chat-msg.ai .chat-nick{color:#a98aff!important}
.chat-msg.ai::before{content:'⊕ '}

/* === USER-BAR EXTRAS === */
.user-action--admin{
  background:rgba(244,208,63,.12);
  border-color:var(--gold);
  color:var(--gold)!important;
}
.user-action--admin:hover{background:rgba(244,208,63,.22);border-color:var(--gold)!important}
.user-crown{color:var(--gold);margin-right:.2em;text-shadow:0 0 4px rgba(244,208,63,.6)}

/* === ADMIN PANEL === */
.admin-panel{
  position:fixed;
  inset:0;
  z-index:900;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  animation:auth-in .25s ease;
}
.admin-card{
  width:min(560px,96vw);
  max-height:90vh;
  overflow-y:auto;
  background:linear-gradient(180deg,#14192a 0%,#0a0e1a 100%);
  border:2px solid var(--gold);
  box-shadow:0 20px 80px rgba(0,0,0,.65),0 0 60px rgba(244,208,63,.15);
  padding:1.4rem 1.4rem 1rem;
  font-family:var(--font-body);
}
.admin-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--border);
}
.admin-head h3{
  font-family:var(--font-display);
  color:var(--gold);
  letter-spacing:.04em;
  text-shadow:var(--pixel-shadow);
}
.admin-section{
  margin-bottom:1.1rem;
}
.admin-section h4{
  font-family:var(--font-display);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.5rem;
}
.admin-section h4.admin-danger{color:var(--redstone)}
.admin-row{display:flex;gap:.5rem}
.admin-row input{
  flex:1;
  padding:.5rem .7rem;
  background:rgba(0,0,0,.45);
  border:1px solid var(--border);
  color:var(--text);
  font:inherit;
  font-size:1rem;
  outline:none;
}
.admin-row input:focus{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.admin-btn{
  padding:.45rem .9rem;
  background:var(--gold);
  color:#0a0e1a;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:2px solid #d4a720;
  cursor:pointer;
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
  transition:transform .08s,box-shadow .08s;
}
.admin-btn:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.5)}
.admin-btn--xs{padding:.2rem .55rem;font-size:.7rem}
.admin-btn--danger{background:var(--redstone);border-color:#a52a18;color:#fff}
.admin-btn--danger:hover{background:#ff7e5b}
.admin-stats{
  background:rgba(0,0,0,.35);
  padding:.6rem .8rem;
  margin-top:.5rem;
  font-size:.95rem;
  color:var(--muted);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.3rem .6rem;
}
.admin-stats code{color:var(--diamond)}
.admin-players{display:flex;flex-direction:column;gap:.3rem}
.admin-player-row{
  display:flex;
  gap:.4rem;
  align-items:center;
  padding:.3rem .5rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-dim);
  font-size:.95rem;
}
.admin-empty{color:var(--faint);text-align:center;padding:.5rem}
.admin-hint{display:block;color:var(--faint);font-size:.78rem;margin-top:.35rem}
.admin-foot{
  font-size:.78rem;
  color:var(--faint);
  padding-top:.6rem;
  border-top:1px solid var(--border-dim);
}
.admin-foot code{font-size:.85em;color:var(--muted)}

/* === TOUCH CONTROLS === */
.touch-pad{
  display:none;
  position:fixed;
  left:0;right:0;
  bottom:7.5rem;
  padding:0 1rem;
  z-index:40;
  pointer-events:none;
  justify-content:space-between;
  align-items:flex-end;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.touch-pad__cluster{display:flex;gap:.6rem;pointer-events:none}
.touch-pad__cluster--right{margin-left:auto}
.tbtn{
  pointer-events:auto;
  position:relative;
  width:60px;height:60px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(20,26,42,.92) 0%,rgba(10,14,26,.92) 100%);
  border:2px solid var(--border);
  border-top-color:#54607f;border-left-color:#54607f;
  border-bottom-color:#1a1f30;border-right-color:#1a1f30;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),0 0 0 2px rgba(0,0,0,.55),0 4px 0 0 rgba(0,0,0,.45);
  color:var(--diamond);
  cursor:pointer;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .06s linear,border-color .06s linear,box-shadow .06s linear;
  image-rendering:pixelated;
}
.tbtn:focus{outline:none}
.tbtn.is-pressed,.tbtn:active{
  transform:translateY(2px) scale(.95);
  border-color:var(--diamond);
  box-shadow:inset 0 0 0 2px rgba(62,221,197,.25),0 0 0 2px rgba(0,0,0,.55),0 1px 0 0 rgba(0,0,0,.45),0 0 10px rgba(62,221,197,.55);
  color:var(--diamond-light);
}
.tbtn--jump{color:var(--gold);border-top-color:#7a6a2c;border-left-color:#7a6a2c}
.tbtn--jump.is-pressed,.tbtn--jump:active{
  border-color:var(--gold);
  box-shadow:inset 0 0 0 2px rgba(244,208,63,.25),0 0 0 2px rgba(0,0,0,.55),0 1px 0 0 rgba(0,0,0,.45),0 0 12px rgba(244,208,63,.6);
  color:#fff3b0;
}
.tbtn__glyph{display:block;width:28px;height:28px;background:currentColor}
.tbtn__glyph--left{clip-path:polygon(62% 0,100% 0,100% 18%,80% 18%,80% 36%,60% 36%,60% 50%,40% 50%,40% 64%,60% 64%,60% 82%,80% 82%,80% 100%,100% 100%,100% 82%,62% 82%,42% 50%,62% 18%)}
.tbtn__glyph--right{clip-path:polygon(0 0,38% 0,58% 18%,78% 50%,58% 82%,38% 100%,0 100%,0 82%,20% 82%,20% 64%,40% 64%,40% 50%,60% 50%,40% 36%,20% 36%,20% 18%,0 18%)}
.tbtn__glyph--up{width:30px;height:30px;clip-path:polygon(50% 0,70% 20%,70% 35%,85% 35%,85% 55%,100% 55%,100% 70%,65% 70%,65% 100%,35% 100%,35% 70%,0 70%,0 55%,15% 55%,15% 35%,30% 35%,30% 20%)}
@media (pointer:coarse){.touch-pad{display:flex}}
.touch-pad.is-forced{display:flex}
@media (max-width:480px){
  .tbtn{width:54px;height:54px}
  .tbtn__glyph{width:24px;height:24px}
  .tbtn__glyph--up{width:26px;height:26px}
  .touch-pad{bottom:7rem;padding:0 .6rem}
  .touch-pad__cluster{gap:.4rem}
}

/* === TOASTS === */
.toasts{
  position:fixed;
  bottom:7rem;
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  pointer-events:none;
}
.toast{
  padding:.5rem .9rem;
  background:rgba(13,17,23,.92);
  border:1px solid var(--redstone);
  color:var(--redstone);
  font-family:var(--font-display);
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-shadow:1px 1px 0 #000;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  animation:toast-in .25s ease;
  max-width:90vw;
  text-align:center;
}
.toast-info{border-color:var(--diamond);color:var(--diamond)}
.toast.fade{opacity:0;transition:opacity .35s ease,transform .35s ease;transform:translateY(8px)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* === MOBILE === */
@media (max-width:768px){
  .user-bar{top:.6rem;right:.6rem}
  .user-pill{font-size:.78rem;padding:.25rem .55rem}
  .online-panel{top:6rem;right:.5rem;width:140px;font-size:.82rem}
  .online-panel .online-list{max-height:140px;padding:.25rem .35rem}
  .online-header{padding:.25rem .5rem;font-size:.62rem}
  .auth-card{padding:1rem;width:96vw}
  .auth-header h2{font-size:1.4rem}
}