:root{
  --bg:#100d0f; --bg-raised:#171315; --parchment:#e9e0c8; --parchment-dim:#a89f8a;
  --amber:#c9973c; --amber-dim:#8a6b2e; --violet:#5c4a7a; --violet-glow:#3a2f4d;
  --oxide:#7a3030; --hairline:#35302f; --ok:#5c8a5c;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh;
  background:radial-gradient(ellipse 900px 500px at 50% -10%, var(--violet-glow) 0%, transparent 60%), var(--bg);
  color:var(--parchment); font-family:'EB Garamond', serif; font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:'JetBrains Mono', monospace; }
h1,h2,h3,.display{ font-family:'Cinzel', serif; font-weight:600; letter-spacing:0.03em; color:var(--amber); margin:0; }
a{ color:inherit; }
::selection{ background:var(--violet); color:var(--parchment); }

.shard{
  display:inline-block; width:14px; height:14px;
  background:linear-gradient(135deg, var(--amber), var(--violet));
  clip-path:polygon(50% 0%, 100% 35%, 78% 100%, 22% 100%, 0% 35%);
  margin:0 0.6rem; vertical-align:middle; box-shadow:0 0 10px rgba(201,151,60,0.5);
}

[contenteditable="true"]{ outline:none; border-radius:2px; transition:background 0.15s; }
[contenteditable="true"]:hover{ background:rgba(201,151,60,0.06); }
[contenteditable="true"]:focus{ background:rgba(201,151,60,0.10); box-shadow:0 0 0 1px var(--amber-dim); }
input[type="text"], input[type="number"], input[type="password"]{
  background:transparent; border:none; border-bottom:1px dotted var(--hairline);
  color:inherit; font-family:inherit; font-size:inherit; width:100%; padding:2px 0;
}
input:focus{ outline:none; border-bottom-color:var(--amber); background:rgba(201,151,60,0.06); }

button, .btn{
  font-family:'Cinzel', serif; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  background:none; border:1px solid var(--hairline); color:var(--parchment-dim);
  padding:0.6rem 1.1rem; cursor:pointer; transition:color 0.15s, border-color 0.15s;
}
button:hover, .btn:hover{ border-color:var(--amber-dim); color:var(--amber); }
button.primary{ border-color:var(--amber-dim); color:var(--amber); }
button.danger:hover{ border-color:var(--oxide); color:var(--oxide); }
button:disabled{ opacity:0.4; cursor:default; }

.center-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column;
  padding:2rem 1.5rem;
}
.card{
  background:var(--bg-raised); border:1px solid var(--hairline); padding:2.5rem;
  max-width:420px; width:100%;
}
.card h1{ font-size:1.6rem; text-align:center; margin-bottom:0.4rem; }
.card .sub{ text-align:center; color:var(--parchment-dim); font-style:italic; font-size:0.95rem; margin-bottom:2rem; }
.field{ margin-bottom:1.3rem; }
.field label{
  display:block; font-family:'Cinzel', serif; font-size:0.65rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--amber-dim); margin-bottom:0.4rem;
}
.card button.primary{ width:100%; padding:0.8rem; margin-top:0.5rem; }
.toggle-link{
  display:block; text-align:center; margin-top:1.5rem; font-size:0.85rem; color:var(--parchment-dim);
  cursor:pointer; text-decoration:underline; text-decoration-color:var(--hairline);
}
.toggle-link:hover{ color:var(--amber); }
.error-msg{ color:var(--oxide); font-size:0.85rem; margin-top:0.5rem; min-height:1.2em; }
.recovery-box{
  background:var(--bg); border:1px solid var(--amber-dim); padding:1.2rem; margin:1.2rem 0;
  text-align:center;
}
.recovery-box .code{ font-family:'JetBrains Mono', monospace; font-size:1.3rem; color:var(--amber); letter-spacing:0.05em; margin:0.5rem 0; }
.recovery-box .warn{ font-size:0.82rem; color:var(--parchment-dim); }

/* Top bar used on characters + sheet pages */
.topbar{
  position:sticky; top:0; z-index:10; background:rgba(16,13,15,0.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hairline); display:flex; align-items:center; justify-content:space-between;
  padding:0.9rem 1.5rem; flex-wrap:wrap; gap:0.6rem;
}
.topbar .brand{ font-family:'Cinzel', serif; font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; }
.topbar .right{ display:flex; align-items:center; gap:0.8rem; font-size:0.85rem; color:var(--parchment-dim); }
#saveStatus{ font-family:'JetBrains Mono', monospace; font-size:0.68rem; color:var(--parchment-dim); opacity:0.8; }
#saveStatus.saved{ color:var(--ok); }

/* Character list */
.char-grid{ max-width:760px; margin:3rem auto; padding:0 1.5rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.char-card{
  background:var(--bg-raised); border:1px solid var(--hairline); padding:1.4rem; position:relative;
  display:flex; flex-direction:column; gap:0.5rem; min-height:120px;
}
.char-card h3{ font-size:1.05rem; }
.char-card .updated{ font-size:0.78rem; color:var(--parchment-dim); margin-top:auto; }
.char-card .actions{ display:flex; gap:0.5rem; }
.char-card .actions button{ flex:1; font-size:0.62rem; padding:0.4rem; }
.new-char-card{
  border:1px dashed var(--hairline); display:flex; align-items:center; justify-content:center;
  color:var(--parchment-dim); font-family:'Cinzel', serif; font-size:0.85rem; letter-spacing:0.06em;
  text-transform:uppercase; cursor:pointer; min-height:120px;
}
.new-char-card:hover{ border-color:var(--amber-dim); color:var(--amber); }
.empty-msg{ text-align:center; color:var(--parchment-dim); padding:3rem 1.5rem; font-style:italic; }