/* ===== Unschackle Crossplay — Minecraft-themed portal ===== */
:root{
  --grass:#5d9c3c; --grass-top:#7bb662; --dirt:#79553a; --dirt-dk:#5c3f2a;
  --stone:#8b8b8b; --stone-lt:#b3b3b3; --stone-dk:#5a5a5a;
  --gui:#c6c6c6; --gui-dk:#373737; --obsidian:#1a1426;
  --green:#5fb04a; --green-dk:#3c7a2e; --green-lt:#7ed36a;
  --red:#c0392b; --gold:#fcdb3f; --diamond:#3fd9c9; --txt:#e9e9e9;
  --pixel:'Press Start 2P', monospace; --read:'VT323', monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--read); color:var(--txt);
  background:#6ba9e0; overflow-x:hidden; position:relative; min-height:100vh;
  image-rendering:pixelated; -webkit-font-smoothing:none;
}

/* ---- sky / scenery ---- */
.sky{position:fixed; inset:0; z-index:-5;
  background:linear-gradient(#4a90d9 0%, #79b6ec 45%, #a9d4f5 70%, #cfe9fb 100%);}
.ground{position:fixed; left:0; right:0; bottom:0; height:90px; z-index:-4;
  background:
    repeating-linear-gradient(90deg,#6f4a32 0 32px,#79553a 32px 64px) 0 18px/64px 72px,
    repeating-linear-gradient(90deg,var(--grass) 0 32px,var(--grass-top) 32px 64px) 0 0/64px 18px;
  border-top:4px solid #4c7a30; box-shadow:0 -4px 0 #3f6628;}
.clouds .cloud{position:fixed; top:0; z-index:-4; background:#fff; opacity:.85;
  box-shadow:32px 0 #fff,64px 0 #fff,32px -16px #fff,0 0 0 4px #e3eefc;}
.cloud{width:96px;height:24px}
.c1{top:8%; animation:drift 70s linear infinite}
.c2{top:20%; transform:scale(1.6); animation:drift 110s linear infinite; animation-delay:-30s}
.c3{top:13%; transform:scale(.8); animation:drift 90s linear infinite; animation-delay:-60s}
@keyframes drift{from{left:-160px}to{left:110vw}}

.floaters .blk{position:fixed; width:38px;height:38px;z-index:-3;opacity:.8;
  border:3px solid rgba(0,0,0,.25); animation:bob 6s ease-in-out infinite;}
.blk.dirt{background:var(--dirt); top:30%; left:6%; animation-delay:-1s}
.blk.diamond{background:var(--diamond); top:62%; left:12%; animation-delay:-2s}
.blk.gold{background:var(--gold); top:24%; right:9%; animation-delay:-3s}
.blk.tnt{background:repeating-linear-gradient(#d63b2a 0 8px,#a82a1d 8px 12px); top:55%; right:7%; animation-delay:-4s}
.blk.grass{background:linear-gradient(var(--grass-top) 30%, var(--dirt) 30%); top:72%; right:16%; animation-delay:-2.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-18px) rotate(3deg)}}

/* ---- layout ---- */
.wrap{max-width:560px; margin:0 auto; padding:34px 18px 120px; position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;}

/* ---- hero ---- */
.hero{text-align:center; margin-bottom:22px}
.title{font-family:var(--pixel); font-size:30px; line-height:1.5; margin:0;
  color:#fff; text-shadow:4px 4px 0 #2d2d2d, 0 0 18px rgba(0,0,0,.3);}
.title span{display:block; font-size:18px; color:var(--green-lt); text-shadow:3px 3px 0 #244d19; margin-top:8px}
.splash{font-family:var(--pixel); font-size:12px; color:var(--gold); transform:rotate(-8deg);
  text-shadow:2px 2px 0 #7a5b00; margin:10px auto 14px; display:inline-block;
  animation:pulse 1.1s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-8deg) scale(1.08)}}
.status{display:inline-flex; align-items:center; gap:9px; font-size:21px;
  background:rgba(0,0,0,.45); padding:6px 14px; border:2px solid #000;}
.status .dot{width:12px;height:12px;background:#888; box-shadow:0 0 0 2px #000}
.status.online .dot{background:#52e066; box-shadow:0 0 8px #52e066,0 0 0 2px #000}
.status.offline .dot{background:var(--red)}

/* ---- GUI panel (classic MC inventory frame) ---- */
.panel{width:100%; background:var(--gui); padding:22px; position:relative;
  border:4px solid #000;
  box-shadow: inset 4px 4px 0 #fefefe, inset -4px -4px 0 #8a8a8a, 6px 6px 0 rgba(0,0,0,.35);}
.step{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px}
.hidden{display:none}
.panel h2{font-family:var(--pixel); font-size:16px; color:#2b2b2b; margin:2px 0; text-shadow:1px 1px 0 #fff}
.muted{font-size:20px; color:#3a3a3a; margin:0; max-width:42ch; line-height:1.15}
.lock{font-size:42px}

/* ---- inputs ---- */
.mc-input{width:100%; font-family:var(--read); font-size:24px; color:#fff; padding:12px 14px;
  background:#1c1c1c; border:3px solid #000; outline:none;
  box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #4a4a4a;}
.mc-input::placeholder{color:#7a7a7a}
.mc-input:focus{box-shadow: inset 0 0 0 2px var(--green-lt), inset 2px 2px 0 #000}
.mc-input:disabled{opacity:.55}

/* ---- buttons (Minecraft button look) ---- */
.mc-btn{font-family:var(--pixel); font-size:13px; color:#fff; cursor:pointer; width:100%;
  padding:15px 16px; background:linear-gradient(#a6a6a6,#8c8c8c); border:3px solid #000;
  text-shadow:2px 2px 0 #2c2c2c;
  box-shadow: inset 2px 2px 0 #d9d9d9, inset -2px -2px 0 #5a5a5a; transition:filter .08s;}
.mc-btn:hover{filter:brightness(1.12)}
.mc-btn:active{box-shadow: inset -2px -2px 0 #d9d9d9, inset 2px 2px 0 #5a5a5a; transform:translateY(1px)}
.mc-btn.green{background:linear-gradient(var(--green-lt),var(--green)); }
.mc-btn.green{box-shadow: inset 2px 2px 0 #a4ef93, inset -2px -2px 0 var(--green-dk)}
.mc-btn.big{font-size:15px; padding:17px}
.mc-btn:disabled{filter:grayscale(.7) brightness(.85); cursor:not-allowed}

/* ---- edition picker ---- */
.editions{display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%}
.ed-btn{display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  padding:16px 8px; background:#bdbdbd; border:3px solid #000;
  box-shadow: inset 2px 2px 0 #efefef, inset -2px -2px 0 #7e7e7e; transition:.08s}
.ed-btn:hover{filter:brightness(1.07)}
.ed-btn.active{background:linear-gradient(#cfeec6,#9fd98e);
  box-shadow: inset 0 0 0 3px var(--green-dk), inset 2px 2px 0 #eaffe2}
.ed-ico{font-size:30px}
.ed-name{font-family:var(--pixel); font-size:11px; color:#222}
.ed-sub{font-size:17px; color:#444}

/* ---- loading ---- */
.pick{font-size:46px; animation:swing .7s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(18deg)}}
.xpbar{width:100%; height:18px; background:#2a2a2a; border:3px solid #000; padding:2px}
.xpfill{height:100%; width:0%; background:linear-gradient(#a6ff5e,#62c328); transition:width .3s}

/* ---- success ---- */
.achievement{display:flex; align-items:center; gap:14px; width:100%; padding:12px 14px;
  background:#3a3a3a; border:3px solid #000; box-shadow: inset 2px 2px 0 #565656;}
.ach-ico{font-size:34px}
.ach-top{font-family:var(--read); font-size:20px; color:var(--gold)}
.ach-bot{font-family:var(--read); font-size:22px; color:#fff}
.connect{display:flex; flex-direction:column; gap:10px; width:100%; text-align:left}
.card{background:#1d1d1d; border:3px solid #000; padding:11px 13px; font-size:20px;
  box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #3d3d3d}
.card b{font-family:var(--pixel); font-size:11px; color:var(--green-lt); display:block; margin-bottom:6px}
.card code{font-size:21px; color:var(--diamond); background:#000; padding:1px 7px; word-break:break-all}
.card small{color:#9a9a9a; font-size:17px}

/* ---- misc ---- */
.err{color:#b1281b; font-size:19px; min-height:20px; margin:0; font-weight:bold}
.foot{margin-top:22px; font-size:18px; color:rgba(255,255,255,.85); text-align:center;
  text-shadow:1px 1px 0 #000}
.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* ---- help link + Xbox modal ---- */
.link-btn{background:none; border:none; cursor:pointer; font-family:var(--read); font-size:20px;
  color:var(--green-dk); text-decoration:underline; padding:4px; margin-top:2px}
.link-btn:hover{color:var(--green); filter:brightness(1.1)}

.modal{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.72);
  display:flex; align-items:center; justify-content:center; padding:16px; overflow-y:auto}
.modal.hidden{display:none}   /* must beat .modal's display:flex */
.modal-card{position:relative; width:100%; max-width:520px; background:var(--gui); padding:22px;
  border:4px solid #000; box-shadow: inset 4px 4px 0 #fefefe, inset -4px -4px 0 #8a8a8a, 6px 6px 0 rgba(0,0,0,.4);
  max-height:92vh; overflow-y:auto}
.modal-card h2{font-family:var(--pixel); font-size:16px; color:#2b2b2b; margin:0 0 10px; text-shadow:1px 1px 0 #fff}
.modal-close{position:absolute; top:8px; right:10px; background:var(--red); color:#fff; border:2px solid #000;
  font-family:var(--pixel); font-size:11px; width:30px; height:30px; cursor:pointer;
  box-shadow: inset 2px 2px 0 #e87a6f, inset -2px -2px 0 #7a1a10}
.modal-close:hover{filter:brightness(1.1)}
.small{font-size:17px; opacity:.85}

.steps{counter-reset:step; list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:8px; text-align:left}
.steps li{counter-increment:step; position:relative; background:#1d1d1d; color:#e9e9e9; font-size:20px;
  padding:11px 12px 11px 46px; border:3px solid #000;
  box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #3d3d3d}
.steps li::before{content:counter(step); position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; background:linear-gradient(var(--green-lt),var(--green)); color:#10330a;
  font-family:var(--pixel); font-size:11px; display:flex; align-items:center; justify-content:center;
  border:2px solid #000}
.steps code{background:#000; color:var(--diamond); padding:1px 7px; font-size:21px; word-break:break-all}
.steps small{color:#9a9a9a; font-size:17px}
.steps b{color:var(--gold)}
.undo{font-size:19px; color:#3a3a3a; background:#bdbdbd; border:3px solid #000; padding:8px 11px; margin:4px 0;
  box-shadow: inset 2px 2px 0 #efefef, inset -2px -2px 0 #7e7e7e}

@media(max-width:480px){
  .title{font-size:22px} .title span{font-size:14px}
  .panel h2{font-size:13px} .editions{grid-template-columns:1fr}
}