@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

#kd-app{
  --ink:#14101f; --ink-2:#1b1531; --ink-3:#241c3d;
  --line:rgba(227,193,105,.20); --line-soft:rgba(227,193,105,.10);
  --gold:#e3c169; --gold-deep:#b8912f;
  --parch:#efe6d0; --parch-dim:#a89c80;
  --emerald:#43c193; --crimson:#d6485f;
  --radius:14px;
  color:var(--parch); font-family:"EB Garamond",Georgia,serif; font-size:15px; line-height:1.35;
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(227,193,105,.10), transparent 60%),
    radial-gradient(100% 70% at 0% 110%, rgba(214,72,95,.08), transparent 55%), var(--ink);
  border:1px solid var(--line); border-radius:calc(var(--radius) + 6px);
  padding:clamp(8px,1.2vw,14px); max-width:1060px; margin:0 auto;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
}
#kd-app *{box-sizing:border-box;}

#kd-app .kd-eyebrow{ font-family:"Cinzel",serif; font-weight:600; letter-spacing:.42em; text-transform:uppercase; font-size:11px; color:var(--gold); margin:0 0 10px; opacity:.9; }
#kd-app .kd-title{ font-family:"Cinzel",serif; font-weight:700; font-size:clamp(15px,2vw,20px); line-height:1; letter-spacing:.02em; margin:0; color:var(--parch); text-shadow:0 1px 0 rgba(0,0,0,.6); }
#kd-app .kd-title span{color:var(--gold);}
#kd-app .kd-sub{ margin:0; color:var(--parch-dim); font-size:13px; font-style:italic; }
#kd-app .kd-rule{ height:1px; margin:8px 0; background:linear-gradient(90deg,transparent,var(--line),transparent); }
#kd-app .kd-header{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }

/* widescreen: left cluster (king + meters, events beneath) | chronicle rail */
#kd-app .kd-main{ display:grid; gap:8px; align-items:stretch; grid-template-columns:minmax(0,1fr) 268px; margin-bottom:0; }
#kd-app .kd-left{ display:grid; gap:8px; grid-template-columns:1fr 1fr; grid-template-areas:"portrait meters" "events events"; align-items:stretch; }
#kd-app .kd-throne{ grid-area:portrait; }
#kd-app .kd-expect{ grid-area:meters; }
#kd-app .kd-eventspanel{ grid-area:events; }
@media(max-width:820px){ #kd-app .kd-main{ grid-template-columns:1fr; } }
@media(max-width:560px){ #kd-app .kd-left{ grid-template-columns:1fr; grid-template-areas:"portrait" "meters" "events"; } }
#kd-app .kd-panel{ background:linear-gradient(180deg,var(--ink-2),var(--ink)); border:1px solid var(--line); border-radius:var(--radius); padding:9px; }
#kd-app .kd-panel-head{ font-family:"Cinzel",serif; font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:11px; color:var(--gold-deep); margin:0 0 7px; }

#kd-app .kd-throne{display:flex; flex-direction:column; gap:5px;}
#kd-app .kd-portrait{ position:relative; width:100%; min-height:80px; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:radial-gradient(80% 60% at 50% 30%, rgba(227,193,105,.16), transparent 70%), linear-gradient(180deg,#2a2140,#171122); transition:background .6s ease; }
#kd-app .kd-portrait img{ display:block; width:100%; height:auto; }
#kd-app .kd-portrait .kd-glyph{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; font-family:"Cinzel",serif; font-size:42px; line-height:1; color:var(--gold); text-shadow:0 4px 20px rgba(0,0,0,.5); transition:color .6s ease; }
#kd-app .kd-mood-label{ font-family:"Cinzel",serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:12px; text-align:center; color:var(--parch); }
#kd-app .kd-mood-cap{ text-align:center; font-style:italic; color:var(--parch-dim); margin-top:0; font-size:12px; }
#kd-app .kd-mood-nums{ text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; color:var(--parch-dim); opacity:.8; line-height:1.4; }

#kd-app .kd-events{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:5px; }
#kd-app .kd-card{ cursor:pointer; display:flex; align-items:center; justify-content:center; text-align:center; background:#2e2250; color:var(--parch); border:1px solid rgba(227,193,105,.40); border-radius:7px; padding:6px 8px; font-family:inherit; font-size:13px; line-height:1.25; min-height:48px; box-shadow:0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; }
#kd-app .kd-card:hover{ border-color:var(--gold); background:#3a2d62; box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.10); }
#kd-app .kd-card:active{ transform:translateY(1px); box-shadow:0 1px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04); }
#kd-app .kd-card:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
#kd-app .kd-pulse{animation:kd-pulse .4s ease;}
@keyframes kd-pulse{0%{box-shadow:0 0 0 0 rgba(227,193,105,.5);}100%{box-shadow:0 0 0 10px rgba(227,193,105,0);}}

#kd-app .kd-chron-head{ display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-wrap:wrap; }
#kd-app .kd-crest{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:2px solid var(--gold-deep); display:grid; place-items:center; line-height:1; background:radial-gradient(circle at 40% 35%, rgba(227,193,105,.22), rgba(20,16,31,.9)); box-shadow:inset 0 0 10px rgba(227,193,105,.12); }
#kd-app .kd-crest b{ font-family:"Cinzel",serif; font-weight:700; font-size:15px; color:var(--gold); }
#kd-app .kd-chron-title{ flex:1; min-width:0; }
#kd-app .kd-chron-title h2{ font-family:"Cinzel",serif; font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:11px; color:var(--parch); margin:0 0 1px; }
#kd-app .kd-chron-title p{ margin:0; font-size:11px; font-style:italic; color:var(--parch-dim); }
#kd-app .kd-clear{ background:none; border:1px solid var(--line); color:var(--parch-dim); font-family:"Cinzel",serif; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:20px; cursor:pointer; transition:color .2s,border-color .2s; }
#kd-app .kd-clear:hover{color:var(--crimson); border-color:var(--crimson);}
#kd-app .kd-chron{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }
#kd-app .kd-chron-list{ display:grid; grid-template-columns:1fr; gap:4px; align-content:start; overflow-y:auto; padding-right:4px; flex:1 1 0; }
#kd-app .kd-chron-list::-webkit-scrollbar{ width:6px; }
#kd-app .kd-chron-list::-webkit-scrollbar-thumb{ background:var(--ink-3); border-radius:6px; }
@media(max-width:820px){ #kd-app .kd-chron-list{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); flex:none; max-height:180px; } }
#kd-app .kd-empty-row{ grid-column:1 / -1; border:1px dashed var(--line-soft); border-radius:7px; padding:10px; text-align:center; color:var(--parch-dim); font-style:italic; font-size:13px; }
#kd-app .kd-ev{ display:grid; grid-template-columns:minmax(0,1fr) 64px 18px; gap:6px; align-items:center; background:#07050f; border:1px solid rgba(227,193,105,.38); border-radius:6px; padding:5px 8px; transition:opacity .45s ease; }
#kd-app .kd-ev .kd-ev-body{ min-width:0; }
#kd-app .kd-ev .kd-ev-text{ display:block; line-height:1.2; font-size:13px; }
#kd-app .kd-ev .kd-ev-round{ font-family:"Cinzel",serif; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-top:1px; }
#kd-app .kd-ev .kd-wt{ text-align:right; }
#kd-app .kd-ev .kd-wt-num{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--gold); display:block; margin-bottom:3px; }
#kd-app .kd-ev .kd-wt-track{ height:3px; border-radius:3px; background:var(--ink-3); overflow:hidden; }
#kd-app .kd-ev .kd-wt-fill{ height:100%; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); border-radius:3px; transition:width .45s ease; }
#kd-app .kd-ev.kd-fresh{ background:#0d0a1c; border-color:var(--gold); }
#kd-app .kd-ev.kd-spent{ border-color:rgba(227,193,105,.18); }
#kd-app .kd-ev.kd-spent .kd-wt-num{ color:var(--parch-dim); }
#kd-app .kd-ev.kd-spent .kd-ev-round::after{ content:" · spent"; color:var(--crimson); }
#kd-app .kd-ev-del{ background:none; border:none; color:rgba(227,193,105,.4); font-size:14px; line-height:1; padding:0; cursor:pointer; width:18px; height:18px; display:flex; align-items:center; justify-content:center; border-radius:3px; transition:color .15s, background .15s; }
#kd-app .kd-ev-del:hover{ color:var(--crimson); background:rgba(214,72,95,.15); }
#kd-app .kd-ev-enter{ animation:kd-enter .35s cubic-bezier(.22,1,.36,1); }
@keyframes kd-enter{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }

#kd-app .kd-disp-two{ display:grid; grid-template-columns:1fr; gap:8px; }
#kd-app .kd-disp-h{ font-family:"Cinzel",serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:10px; color:var(--parch); margin:0 0 4px; padding-bottom:3px; border-bottom:1px solid var(--line-soft); }
#kd-app .kd-disp-sum{ font-size:12px; font-style:italic; color:var(--parch); margin:0 0 5px; }
#kd-app .kd-disp-sum b{ font-style:normal; color:var(--gold); }

#kd-app .kd-jstrip{ display:grid; gap:4px; }
#kd-app .kd-jrow{ display:grid; grid-template-columns:56px minmax(0,1fr) 36px; gap:5px; align-items:center; }
#kd-app .kd-jrow .kd-j-adj{ font-family:"Cinzel",serif; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--parch-dim); transition:color .4s; }
#kd-app .kd-jrow .kd-j-track{ height:4px; border-radius:3px; background:var(--ink-3); overflow:hidden; }
#kd-app .kd-jrow .kd-j-fill{ height:100%; border-radius:3px; width:0; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); transition:width .5s ease; }
#kd-app .kd-jrow .kd-j-num{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; color:var(--parch-dim); text-align:right; }
#kd-app .kd-jrow.kd-top .kd-j-adj{ color:var(--gold); }

#kd-app .kd-mlabels{ display:flex; justify-content:space-between; margin-bottom:3px; font-size:11px; color:var(--parch-dim); }
#kd-app .kd-track{ position:relative; height:8px; border-radius:5px; border:1px solid var(--line); background:linear-gradient(90deg, rgba(90,84,110,.5) 0%, rgba(30,24,50,.6) 50%, rgba(67,193,147,.55) 100%); }
#kd-app .kd-track::after{ content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--line); transform:translateX(-.5px); }
#kd-app .kd-needle{ position:absolute; top:50%; left:50%; width:12px; height:12px; border-radius:3px; background:var(--gold); border:1px solid #fff6d8; box-shadow:0 0 8px rgba(227,193,105,.6); transform:translate(-50%,-50%) rotate(45deg); transition:left .55s cubic-bezier(.22,1,.36,1); }
#kd-app .kd-mfoot{ display:flex; justify-content:flex-end; margin-top:3px; font-family:"Cinzel",serif; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }

@media(prefers-reduced-motion:reduce){ #kd-app *{transition:none !important; animation:none !important;} }