/* Login / sign-up pages: same classic MapleStory look as the dashboard and boss timers */
:root{
  color-scheme: light;
  --sky-top:#5fb4ee; --sky-bot:#cdeeff; --grass:#5daa3a; --dirt:#9a6a3c;
  --frame:#23467f; --frame-hi:#5d9be6; --title-a:#4c8fe0; --title-b:#2559ad;
  --panel:#fbf3dd; --panel-edge:#c8ad7b; --inset:#ffffff; --ink:#3b2a17; --ink-soft:#7a6446;
  --btn-a:#ffc261; --btn-b:#f0861b; --btn-edge:#a2520c;
  --exp:#f5d320; --hp:#e6383a; --gold:#d9a441;
  --white:#ffffff; --shadow:rgba(20,40,80,.35);
  --f-title:"M PLUS Rounded 1c", "Trebuchet MS", sans-serif;
  --f-num:"DotGothic16", "Courier New", monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  color:var(--ink); font-family:var(--f-title); font-weight:500; font-size:14px;
  background:
    radial-gradient(ellipse 120px 40px at 12% 14%, rgba(255,255,255,.9) 60%, transparent 62%),
    radial-gradient(ellipse 90px 30px at 18% 11%, rgba(255,255,255,.9) 60%, transparent 62%),
    radial-gradient(ellipse 140px 44px at 78% 9%, rgba(255,255,255,.85) 60%, transparent 62%),
    radial-gradient(ellipse 100px 32px at 86% 13%, rgba(255,255,255,.85) 60%, transparent 62%),
    linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 70%);
  background-color:var(--sky-bot); background-attachment:fixed;
}
.page{flex:1;width:100%;max-width:860px;margin:0 auto;padding:24px 16px 0;
  display:flex;flex-direction:column;align-items:center;gap:20px}

/* Guild banner in a dark gold-trimmed frame */
.banner{width:100%;margin:0;background:#0d0d0f;border:2px solid var(--frame);border-radius:10px;overflow:hidden;
  box-shadow:0 3px 0 var(--frame),0 0 0 4px rgba(217,164,65,.35) inset,0 8px 18px var(--shadow)}
.banner img{display:block;width:100%;height:auto}

/* Game-style window */
.win{width:100%;max-width:400px;background:var(--panel);border:2px solid var(--frame);border-radius:8px;
  box-shadow:0 3px 0 var(--frame),0 6px 14px var(--shadow);overflow:hidden}
.win > .bar{padding:6px 12px;background:linear-gradient(180deg,var(--frame-hi) 0%,var(--title-a) 45%,var(--title-b) 100%);
  border-bottom:2px solid var(--frame);color:var(--white);font-weight:800;font-size:16px;letter-spacing:.02em;
  text-shadow:-1px -1px 0 var(--frame),1px -1px 0 var(--frame),-1px 1px 0 var(--frame),1px 1px 0 var(--frame)}
.win > .body{padding:16px 18px 18px}

label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:12px 0 4px}
label:first-of-type{margin-top:0}
input{width:100%;font-family:var(--f-title);font-weight:500;font-size:15px;color:var(--ink);background:var(--inset);
  border:1px solid var(--panel-edge);border-radius:5px;padding:8px 10px;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
input:focus{outline:3px solid var(--exp);outline-offset:1px;border-color:var(--btn-edge)}

button{width:100%;margin-top:18px;font-family:var(--f-title);font-weight:800;font-size:15px;color:var(--white);cursor:pointer;
  padding:9px 12px;border-radius:6px;border:1px solid var(--btn-edge);background:linear-gradient(180deg,var(--btn-a),var(--btn-b));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 0 var(--btn-edge);text-shadow:0 1px 0 var(--btn-edge)}
button:hover{filter:brightness(1.07)}
button:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 var(--btn-edge)}
button:focus-visible{outline:3px solid var(--exp);outline-offset:2px}

.error{margin:0 0 12px;background:#fdecec;color:#a12020;border:1px solid #e3a3a3;border-radius:5px;padding:8px 10px;font-size:13px}
.switch{margin:14px 0 0;font-size:13px;text-align:center;color:var(--ink-soft)}
.switch a{color:var(--frame);font-weight:800}

/* Ground strip with credit */
.ground{margin-top:36px;padding:14px 16px 10px;text-align:center;
  background:linear-gradient(180deg,var(--grass) 0 12px,var(--dirt) 12px);border-top:3px solid #3f8326}
.credit{display:block;margin-top:4px;font-size:12px;letter-spacing:.06em;color:#fbe9cf;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.credit b{color:var(--exp)}

@media (max-width:480px){ .page{padding-top:14px;gap:14px} }