.kdl-app{
  --kdl-ink:#17171d;
  --kdl-ink-2:#1e1e26;
  --kdl-parchment:#efe6d2;
  --kdl-parchment-dim:#d8cdb2;
  --kdl-brass:#c9a24a;
  --kdl-brass-dim:#a3833a;
  --kdl-ember:#b5482c;
  --kdl-moss:#5c7a52;
  --kdl-line: rgba(201,162,74,0.25);
  --kdl-shadow: rgba(0,0,0,0.45);

  max-width:760px;
  margin:0 auto;
  padding:32px 16px 48px;
  color:var(--kdl-parchment);
  font-family:'Work Sans', sans-serif;
  box-sizing:border-box;
}
.kdl-app *{ box-sizing:border-box; }
.kdl-app h2, .kdl-app h3, .kdl-h1, .kdl-h2{ font-family:'Cinzel', serif; letter-spacing:0.02em; margin:0; }
.kdl-eyebrow{
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--kdl-brass); opacity:0.85; margin-bottom:6px;
}
.kdl-top{ margin-bottom:32px; text-align:center; }
.kdl-h1{ font-size:30px; color:var(--kdl-parchment); }
.kdl-sub{ color:var(--kdl-parchment-dim); font-size:14px; margin-top:8px; }

.kdl-panel{
  background: linear-gradient(180deg, var(--kdl-ink-2), var(--kdl-ink));
  border:1px solid var(--kdl-line);
  border-radius:4px;
  padding:28px;
  box-shadow: 0 12px 30px var(--kdl-shadow);
  position:relative;
}
.kdl-panel::before{
  content:"";
  position:absolute; inset:6px;
  border:1px solid rgba(201,162,74,0.12);
  border-radius:2px;
  pointer-events:none;
}

.kdl-app label{ font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--kdl-brass); display:block; margin-bottom:6px; }
.kdl-app input[type=text]{
  width:100%; padding:12px 14px; border-radius:2px;
  border:1px solid var(--kdl-line); background:rgba(0,0,0,0.25);
  color:var(--kdl-parchment); font-family:'Work Sans'; font-size:15px;
  outline:none;
}
.kdl-app input[type=text]:focus{ border-color:var(--kdl-brass); }
.kdl-code-input{ font-family:'Space Mono'; letter-spacing:0.18em; text-transform:uppercase; }

.kdl-btn{
  font-family:'Work Sans'; font-weight:600; font-size:14px;
  border:1px solid var(--kdl-brass-dim); background:transparent; color:var(--kdl-brass);
  padding:11px 18px; border-radius:2px; cursor:pointer;
  transition:background .15s, color .15s, transform .05s;
}
.kdl-btn:hover{ background:var(--kdl-brass); color:var(--kdl-ink); }
.kdl-btn:active{ transform:translateY(1px); }
.kdl-primary{ background:var(--kdl-brass); color:var(--kdl-ink); }
.kdl-primary:hover{ background:var(--kdl-brass-dim); }
.kdl-ghost{ border-color:var(--kdl-line); color:var(--kdl-parchment-dim); }
.kdl-ghost:hover{ background:rgba(239,230,210,0.08); color:var(--kdl-parchment); }
.kdl-btn:disabled{ opacity:0.35; cursor:default; }
.kdl-btn:disabled:hover{ background:transparent; color:var(--kdl-brass); }

.kdl-row{ display:flex; gap:12px; }
.kdl-row.kdl-wrap{ flex-wrap:wrap; }
.kdl-between{ display:flex; justify-content:space-between; align-items:center; }

.kdl-toggle-group{ display:flex; border:1px solid var(--kdl-line); border-radius:2px; overflow:hidden; }
.kdl-toggle-group button{ flex:1; border:none; border-radius:0; font-family:'Work Sans'; font-weight:600; font-size:14px; background:transparent; color:var(--kdl-brass); padding:11px 18px; cursor:pointer; }
.kdl-toggle-group button.kdl-active{ background:var(--kdl-brass); color:var(--kdl-ink); }

.kdl-seal{
  font-family:'Space Mono', monospace; font-weight:700; letter-spacing:0.14em;
  color:var(--kdl-ink); background:var(--kdl-brass);
  padding:6px 12px; border-radius:2px; font-size:13px;
}

.kdl-divider{ height:1px; background:var(--kdl-line); margin:22px 0; }

.kdl-create-form{ margin-bottom:26px; padding:18px; border:1px solid var(--kdl-line); border-radius:2px; background:rgba(0,0,0,0.15); }

.kdl-room-card{
  border:1px solid var(--kdl-line); border-radius:2px; padding:16px 18px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-bottom:10px; background:rgba(0,0,0,0.15);
}
.kdl-room-card .kdl-name{ font-weight:600; font-size:15px; }
.kdl-room-card .kdl-meta{ font-size:12px; color:var(--kdl-parchment-dim); font-family:'Space Mono'; margin-top:4px; }
.kdl-empty{
  text-align:center; color:var(--kdl-parchment-dim); font-size:14px; padding:36px 12px;
  border:1px dashed var(--kdl-line); border-radius:2px;
}

.kdl-badge{ font-family:'Space Mono'; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.kdl-badge.kdl-public{ background:rgba(92,122,82,0.18); color:#9fbf90; border:1px solid rgba(92,122,82,0.4); }
.kdl-badge.kdl-private{ background:rgba(181,72,44,0.18); color:#e08d76; border:1px solid rgba(181,72,44,0.4); }

.kdl-highest-banner{
  text-align:center; padding:14px; margin-bottom:22px;
  border:1px solid var(--kdl-brass-dim); border-radius:2px;
  background:rgba(201,162,74,0.07);
  font-family:'Space Mono'; font-size:13px; letter-spacing:0.03em;
}
.kdl-highest-banner b{ color:var(--kdl-brass); font-size:15px; }

.kdl-players{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.kdl-player-card{
  border:1px solid var(--kdl-line); border-radius:3px; padding:16px 12px;
  text-align:center; background:rgba(0,0,0,0.15); position:relative;
}
.kdl-player-card.kdl-me{ border-color:var(--kdl-brass); box-shadow:0 0 0 1px var(--kdl-brass) inset; }
.kdl-player-card .kdl-pname{ font-size:13px; font-weight:600; margin-bottom:12px; word-break:break-word; }
.kdl-player-card .kdl-avatar{ margin-bottom:8px; }
.kdl-host-tag{ font-family:'Space Mono'; font-size:9px; color:var(--kdl-brass); letter-spacing:0.1em; display:block; margin-top:2px; }

.kdl-die{
  width:56px; height:56px; margin:0 auto 10px;
  background:var(--kdl-parchment); border-radius:8px;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  padding:8px; box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  cursor:pointer; transition: transform .12s;
}
.kdl-die.kdl-disabled{ cursor:default; }
.kdl-die:active:not(.kdl-disabled){ transform:scale(0.94); }
.kdl-die.kdl-rolling{ animation: kdl-tumble .5s ease; }
@keyframes kdl-tumble{ 0%{transform:rotate(0)} 30%{transform:rotate(-14deg)} 60%{transform:rotate(10deg)} 100%{transform:rotate(0)} }
.kdl-pip{ width:9px; height:9px; border-radius:50%; background:var(--kdl-ink); justify-self:center; align-self:center; opacity:0; }
.kdl-die.kdl-hidden-face{ background: var(--kdl-ink-2); border:1px dashed var(--kdl-brass-dim); }
.kdl-die.kdl-hidden-face .kdl-qmark{ grid-column:1/4; grid-row:1/4; display:flex; align-items:center; justify-content:center; font-family:'Cinzel'; color:var(--kdl-brass-dim); font-size:20px; }
.kdl-die.kdl-empty-face{ background:rgba(0,0,0,0.2); border:1px dashed var(--kdl-line); }
.kdl-die.kdl-empty-face .kdl-dash{ grid-column:1/4; grid-row:1/4; display:flex; align-items:center; justify-content:center; color:var(--kdl-parchment-dim); font-size:20px; }

.kdl-pc-controls{ display:flex; flex-direction:column; gap:6px; }
.kdl-pc-controls button{ font-size:11px; padding:6px 8px; }

.kdl-footer-row{ margin-top:26px; display:flex; justify-content:space-between; align-items:center; }
.kdl-muted{ color:var(--kdl-parchment-dim); font-size:13px; }
.kdl-link-btn{ color:var(--kdl-brass); font-size:13px; cursor:pointer; text-decoration:underline; }

.kdl-status-line{ font-family:'Space Mono'; font-size:11px; color:var(--kdl-parchment-dim); margin-top:14px; text-align:center; }
.kdl-hidden{ display:none !important; }

/* Tabs */
.kdl-tabnav{
  display:flex; gap:4px; margin-bottom:18px;
  border-bottom:1px solid var(--kdl-line);
}
.kdl-tab{
  font-family:'Space Mono'; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  background:transparent; border:none; color:var(--kdl-parchment-dim);
  padding:10px 14px; cursor:pointer; position:relative; top:1px;
  border-bottom:2px solid transparent;
}
.kdl-tab:hover{ color:var(--kdl-parchment); }
.kdl-tab.kdl-tab-active{ color:var(--kdl-brass); border-bottom-color:var(--kdl-brass); }
.kdl-tab-badge{
  display:inline-block; margin-left:6px; background:var(--kdl-ember); color:var(--kdl-parchment);
  font-size:10px; border-radius:10px; padding:1px 6px; vertical-align:middle;
}

/* Friend / invite list cards */
.kdl-list-block{ display:flex; flex-direction:column; gap:8px; }
.kdl-person-card{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--kdl-line); border-radius:2px; padding:10px 14px;
  background:rgba(0,0,0,0.15);
}
.kdl-avatar{ width:32px; height:32px; border-radius:50%; flex-shrink:0; border:1px solid var(--kdl-line); }
.kdl-person-name{ font-size:14px; font-weight:600; flex:1; }
.kdl-person-meta{ font-family:'Space Mono'; font-size:11px; color:var(--kdl-parchment-dim); }
.kdl-person-actions{ display:flex; gap:6px; flex-shrink:0; }
.kdl-person-actions button{ font-size:11px; padding:6px 10px; }

.kdl-invite-card{
  border:1px solid var(--kdl-line); border-radius:2px; padding:14px;
  background:rgba(0,0,0,0.15); display:flex; flex-direction:column; gap:8px;
}
.kdl-invite-card .kdl-invite-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.kdl-invite-card .kdl-invite-label{ font-weight:600; font-size:14px; }
.kdl-invite-card .kdl-invite-sub{ font-family:'Space Mono'; font-size:11px; color:var(--kdl-parchment-dim); margin-top:2px; }
.kdl-invite-card .kdl-invite-actions{ display:flex; gap:8px; }

.kdl-friend-pick-list{ display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; }

.kdl-status-pill{
  font-family:'Space Mono'; font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:2px; border:1px solid var(--kdl-line); color:var(--kdl-parchment-dim);
}
.kdl-status-pill.kdl-accepted{ color:#9fbf90; border-color:rgba(92,122,82,0.4); }
.kdl-status-pill.kdl-declined,
.kdl-status-pill.kdl-expired{ color:#e08d76; border-color:rgba(181,72,44,0.4); }

@media (max-width: 480px){
  .kdl-app{ padding:20px 10px 36px; }
  .kdl-panel{ padding:18px; }
}