/* Prism OS HUD theme — ported from the approved mockup (docs/mockup/Main.dc.html).
   Class names kept readable. Dynamic values (bar widths, map dot positions)
   are applied by hud.js from data attributes, so the CSP needs no inline
   styles. All motion is disabled under prefers-reduced-motion. */

body{margin:0;background:#0d0a07}
a{color:#f2d27a}a:hover{color:#fff1c2}
.px{--stone:#0d0a07;--panel:#1b150f;--panel2:#241c13;--gold:#d4a843;--goldhi:#f6dc8a;--golddk:#7a5a22;--text:#ecdfc3;--muted:#b3a183;--health:#4cbf52;--mana:#3d8ae6;--ember:#ec7a30;--danger:#e0503f;--arcane:#a77ae8;font-family:'Alegreya Sans',Georgia,serif;color:var(--text);width:100%;min-height:100%;background:radial-gradient(ellipse at 50% 0%,#2a1d10 0%,#0d0a07 60%),#0d0a07;padding-bottom:48px}
.px *{box-sizing:border-box}
.disp{font-family:'Cinzel','Trajan Pro',Georgia,serif;letter-spacing:.06em}
.goldtext{background:linear-gradient(180deg,#fff3c4 0%,#f2d27a 38%,#c4902f 62%,#f7df93 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 #2a1a06) drop-shadow(0 0 14px rgba(246,200,90,.35))}

/* frames and plaques */
.frame{position:relative;background:linear-gradient(180deg,#221a12 0%,#17110b 100%);border:2px solid #6e5222;border-radius:6px;box-shadow:0 0 0 1px #050302,inset 0 0 0 1px #3b2c15,inset 0 0 30px rgba(0,0,0,.65),0 10px 30px rgba(0,0,0,.55);padding:26px 20px 20px}
.frame::before,.frame::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--gold);pointer-events:none;filter:drop-shadow(0 0 4px rgba(246,200,90,.45))}
.frame::before{top:-5px;left:-5px;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
.frame::after{bottom:-5px;right:-5px;border-left:none;border-top:none;border-radius:0 0 6px 0}
.frame-glow{box-shadow:0 0 0 1px #050302,inset 0 0 0 1px #3b2c15,0 0 26px rgba(246,200,90,.25)}
.plaque{display:flex;align-items:center;justify-content:center;gap:10px;margin:-18px auto 14px;width:max-content;max-width:100%;padding:6px 22px;background:linear-gradient(180deg,#5a1d14,#3a110b);border:1px solid #c79a3c;border-radius:3px;box-shadow:0 0 0 2px #1a0905,0 4px 10px rgba(0,0,0,.6);font-family:'Cinzel',Georgia,serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f6dc8a}

/* header */
.header{position:relative;height:390px;overflow:hidden;border-bottom:3px solid #8a6a2a;box-shadow:0 6px 24px rgba(0,0,0,.7);background:#0d0a07}
.header-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 4%}
.kb{animation:kb 30s ease-in-out infinite alternate;transform-origin:50% 0%}
.header-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,10,7,.35) 0%,rgba(13,10,7,0) 30%,rgba(13,10,7,0) 75%,rgba(13,10,7,.75) 100%)}
.embers{position:absolute;inset:0}
.ember{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#ffcf7a;box-shadow:0 0 8px 2px rgba(255,160,60,.8);animation:rise linear infinite;opacity:0}
.ember:nth-child(1){left:8%;animation-duration:7s;animation-delay:0s}
.ember:nth-child(2){left:17%;animation-duration:9s;animation-delay:2s}
.ember:nth-child(3){left:26%;animation-duration:6s;animation-delay:4s}
.ember:nth-child(4){left:41%;animation-duration:8s;animation-delay:1s}
.ember:nth-child(5){left:55%;animation-duration:10s;animation-delay:3s}
.ember:nth-child(6){left:68%;animation-duration:7.5s;animation-delay:5s}
.ember:nth-child(7){left:79%;animation-duration:9.5s;animation-delay:2.5s}
.ember:nth-child(8){left:91%;animation-duration:6.5s;animation-delay:4.5s}
.header-inner{position:relative;max-width:1440px;margin:0 auto;padding:22px 32px 0;display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}
.header-spacer{flex:1 1 0;min-width:0}
.header-brand{flex:none;display:flex;flex-direction:column;align-items:center;text-align:center}
.emblem{width:176px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(246,200,90,.35))}
.title{margin-top:-6px;font-size:54px;font-weight:900;line-height:1;filter:drop-shadow(0 3px 0 #1a0f03) drop-shadow(0 0 18px rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(246,200,90,.35))}
.subtitle-row{margin-top:10px;display:flex;align-items:center;gap:10px}
.rule{width:48px;height:1px;background:linear-gradient(90deg,transparent,#f2d27a)}
.subtitle-row .rule:last-child{background:linear-gradient(90deg,#f2d27a,transparent)}
.subtitle{font-size:13px;color:#fff3d6;letter-spacing:.26em;text-shadow:0 1px 3px #000,0 0 10px #000}
.header-side{flex:1 1 0;min-width:260px;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.user-plaque{padding:8px 14px 8px 8px;display:flex;align-items:center;gap:12px}
.avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 30%,#3d5f8f,#13213a 70%);border:3px solid #d4a843;box-shadow:0 0 12px rgba(246,200,90,.5)}
.avatar .disp{font-size:22px;font-weight:900;color:#fff1c2}
.user-name{font-size:16px;font-weight:700;color:#fff1c2}
.user-time{font-size:12px;color:#c9b892}
.switches-frame{padding:10px 16px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.gem-item{display:flex;align-items:center;gap:8px;font-size:13px}

/* gems */
.gem{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 2px #2a1f10,0 0 0 3px #8a6a2a,0 0 10px currentColor;animation:pulse 2.4s ease-in-out infinite}
.gem-on{color:#4cbf52;background:#4cbf52}
.gem-off{color:#e0503f;background:#e0503f}

/* nav */
.nav{max-width:1440px;margin:0 auto;padding:14px 32px 0;display:flex;flex-wrap:wrap;gap:6px;border-bottom:2px solid #5b4420}
.tab{display:inline-flex;align-items:center;gap:8px;padding:10px 18px 9px;font-family:'Cinzel',serif;font-size:14px;font-weight:700;letter-spacing:.08em;color:#cdb98e;text-decoration:none;background:linear-gradient(180deg,#2a2015,#160f09);border:1px solid #5b4420;border-bottom:none;border-radius:8px 8px 0 0;min-height:44px}
.tab:hover{color:#fff1c2}
.tab.on{color:#fff1c2;background:linear-gradient(180deg,#4a3418,#22180d);border-color:#c79a3c;box-shadow:0 -4px 14px rgba(246,200,90,.25)}
.tab.soon{opacity:.5}

/* layout */
.wrap{max-width:1440px;margin:0 auto;padding:0 32px}
.cols-3{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;padding-top:30px}
.col{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:28px}
.col-wide{flex:999 1 480px}
.footer{margin-top:36px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:12px;color:#8f826a}
.logout-form{margin:0}
.foot-note{margin-top:18px;font-size:12px;color:#8f826a;text-align:center}

/* bars */
.bars{display:flex;flex-direction:column;gap:16px}
.bar-head{display:flex;justify-content:space-between;font-size:14px;margin-bottom:5px}
.bar-cap{color:#9fe39f}
.bar{position:relative;height:22px;border-radius:4px;background:linear-gradient(180deg,#0a0705,#1d150d);border:1px solid #5b4420;box-shadow:inset 0 2px 6px rgba(0,0,0,.9);overflow:hidden}
.fill{position:absolute;inset:1px auto 1px 1px;border-radius:3px;transform-origin:left center;width:0;animation:grow 1.6s cubic-bezier(.2,.8,.2,1) both}
.fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.38) 48%,transparent 62%);background-size:220% 100%;animation:sheen 3.6s ease-in-out infinite 1.6s}
.fill::before{content:"";position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);border-radius:3px 3px 0 0}
.f-health{background:linear-gradient(180deg,#6fe06f,#2f9a37 55%,#1d6d25)}
.f-mana{background:linear-gradient(180deg,#7fb6ff,#2f74d6 55%,#1b4a98)}
.f-gold{background:linear-gradient(180deg,#ffe28a,#d29b2e 55%,#8a5a12)}
.f-arcane{background:linear-gradient(180deg,#d1a8ff,#8a55da 55%,#55289c)}
.f-ember{background:linear-gradient(180deg,#ffb36b,#e06a23 55%,#9a3a0c)}
.barlabel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;letter-spacing:.04em}
.stat-grid{margin-top:22px;padding-top:16px;border-top:1px solid rgba(212,168,67,.25);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center}
.stat-num{font-size:30px;font-weight:900}
.stat-label{font-size:12px;color:#b3a183}

/* territory map */
.map-row{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:center}
.map-disc{position:relative;width:320px;height:320px;flex:none}
.map-ring{position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(from 0deg,#f6dc8a,#7a5a22,#d4a843,#5a3e12,#f6dc8a,#7a5a22,#d4a843,#5a3e12,#f6dc8a);box-shadow:0 0 0 2px #000,0 0 30px rgba(246,200,90,.35)}
.map-inner{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 40px rgba(0,0,0,.9)}
.map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map-shade{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 50px rgba(0,0,0,.85)}
.dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle,#fff3c4,#e8a93a 60%,#7a4a0e);box-shadow:0 0 10px rgba(255,200,90,.9)}
.dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,214,120,.9);animation:ping 2.2s ease-out infinite}
.dot-sm{width:10px;height:10px;margin:-5px 0 0 -5px}
.dot-lg{width:20px;height:20px;margin:-10px 0 0 -10px}
.dotlabel{position:absolute;transform:translate(-50%,10px);font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:#fff1c2;text-shadow:0 1px 2px #000,0 0 6px #000;white-space:nowrap}
.north{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 30%,#fff0b8,#b5852c 65%,#4a3410);color:#2a1a06;font-weight:900;font-size:14px;box-shadow:0 0 0 2px #000}
.map-table{flex:1 1 220px;min-width:0}
.map-table table{width:100%;border-collapse:collapse;font-size:14px}
.map-table caption{text-align:left;font-size:12px;color:#b3a183;letter-spacing:.14em;padding-bottom:8px}
.map-table th{color:#b3a183;font-size:12px;text-align:left;font-weight:500;padding:4px 0}
.map-table td{padding:6px 0;border-top:1px solid rgba(212,168,67,.15)}

/* quests and problems */
.quest-list{display:flex;flex-direction:column;gap:10px}
.quest{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:4px;background:linear-gradient(90deg,rgba(212,168,67,.08),transparent);border:1px solid rgba(212,168,67,.18)}
.seal{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#d9574a,#8f1d14 70%);box-shadow:0 0 0 2px #3a0d08,0 2px 6px rgba(0,0,0,.7);color:#ffe6c4}
.seal-gold{background:radial-gradient(circle at 35% 30%,#d9a44a,#8a5a12 70%)}
.seal .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.quest-body{flex:1;min-width:0}
.quest-title{font-weight:700;color:#fff1c2}
.quest-sub{font-size:13px;color:#b3a183}
.empty{font-size:14px;color:#b3a183;margin:4px 0}
.problem{padding:8px 0;border-bottom:1px dashed rgba(212,168,67,.12)}
.problem-title{font-weight:700;color:#ffb3a6}
.problem-text{font-size:14px;color:#e6d6b0}
.warn{animation:warnglow 2s ease-in-out infinite}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 12px;font-family:'Cinzel',serif;font-size:12px;font-weight:700;letter-spacing:.06em;color:#fff1c2;background:linear-gradient(180deg,#7a2a18,#4a170c);border:1px solid #c79a3c;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.6);cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.2)}
.btn.alt{background:linear-gradient(180deg,#2c3b52,#17202e)}
.btn.ghost{background:linear-gradient(180deg,#2a2015,#160f09)}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;margin-bottom:14px}
input,select,textarea{font-family:'Alegreya Sans',Georgia,serif;font-size:14px;color:#fff1c2;background:linear-gradient(180deg,#0a0705,#1d150d);border:1px solid #5b4420;border-radius:4px;padding:8px 10px;min-height:36px}
input:focus,select:focus,textarea:focus{outline:2px solid #f6dc8a;outline-offset:2px}
.check{min-height:0;width:20px;height:20px}
.setting{margin-bottom:14px}
.setting-label{display:block;font-family:'Cinzel',serif;font-size:12px;letter-spacing:.06em;color:#cdb98e;margin-bottom:5px}
.field-error{color:#ff8a78;font-size:13px;margin:6px 0}
.saved{color:#7fe07f;font-size:13px;margin:6px 0}
.hint{color:#b3a183;font-size:12px;margin:8px 0}
.window-rows{display:flex;flex-direction:column;gap:6px}
.window-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;font-size:11px;color:#b3a183}
.window-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.noruns-row{display:flex;flex-wrap:wrap;gap:6px}
.noruns-row input{flex:1 1 160px}
.inline-form{display:inline;margin:0}
.role-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.settings{display:flex;flex-direction:column;gap:28px;padding-top:30px}
.switch-list{display:flex;flex-direction:column;gap:10px}
.switch-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed rgba(212,168,67,.12)}
.switch-name{font-weight:700;color:#fff1c2;flex:1 1 140px}
.switch-state{color:#b3a183}

/* tables */
.log-table{width:100%;border-collapse:collapse;font-size:13px}
.log-table th{text-align:left;color:#b3a183;font-size:12px;font-weight:500;padding:4px 8px 4px 0}
.log-table td{padding:5px 8px 5px 0;border-top:1px solid rgba(212,168,67,.15)}
.mono{font-family:monospace;font-size:12px;color:#c9b892;word-break:break-all}

/* auth pages */
.auth-wrap{display:flex;justify-content:center;padding-top:60px}
.auth-frame{width:100%;max-width:420px}
.auth-title{font-size:24px;font-weight:900;text-align:center;margin:10px 0 16px}
.auth-note{color:#b3a183;font-size:12px;text-align:center}
.coming-frame{margin-top:30px;text-align:center}
.coming-text{color:#e6d6b0;font-size:15px}

/* T16 pages: replies, campaigns, people */
.page-col{display:flex;flex-direction:column;gap:28px;padding-top:30px}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.filter{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#b3a183}
.filter.grow{flex:1 1 260px}
.undo-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;border-color:#c79a3c}
.undo-link{text-decoration:underline}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.msg{margin-top:8px;font-size:14px}
.msg summary{cursor:pointer;color:#f2d27a}
.msg-body{margin-top:6px;padding:10px 12px;border-radius:4px;background:rgba(212,168,67,.08);border:1px solid rgba(212,168,67,.18);white-space:pre-wrap;color:#e6d6b0}
.reason-list{margin:8px 0 0;padding-left:18px;font-size:13px;color:#ffb3a6}
.preview-list{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.preview-item{font-size:14px;color:#e6d6b0}
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.04em;background:#2a2015;border:1px solid #5b4420;color:#cdb98e;margin-right:4px}
.chip-gold{border-color:#c79a3c;color:#f2d27a}
.chip-green{border-color:#4cbf52;color:#7fe07f}
.chip-blue{border-color:#3d6aa8;color:#86b8ff}
.chip-red{border-color:#a3241a;color:#ff8a78}
.drop-zone{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:22px 16px;border:2px dashed #8a6a2a;border-radius:6px;background:radial-gradient(ellipse at 50% 30%,rgba(212,168,67,.14),transparent 70%)}
.drop-zone label{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:#fff1c2}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px;border-radius:4px;color:#2a1d0e;background:radial-gradient(ellipse at 30% 20%,#f4ead0 0%,#e6d4a8 55%,#cdb27c 100%);box-shadow:inset 0 0 30px rgba(110,70,20,.4)}
.form-grid .field{color:#2a1d0e;font-weight:700}
.form-grid input,.form-grid select{font:inherit;font-weight:400;color:#2a1d0e;background:#fbf5e4;border:1px solid #8a6a2a}
.form-grid .span-2{grid-column:1 / -1}
.form-grid .actions{margin-top:0}
.timeline{display:flex;flex-direction:column;gap:2px}
.tl-item{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px dashed rgba(212,168,67,.12);font-size:14px}
.tl-kind{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#b3a183;min-width:90px}
.tl-text{flex:1;min-width:0;color:#e6d6b0}
.tl-item .msg{flex:1;min-width:0;margin-top:0}
.kv{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:14px}
.kv .k{display:inline-block;min-width:150px;color:#b3a183;font-size:12px}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pager .on{border-color:#c79a3c;color:#fff1c2}

/* motion */
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sheen{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}100%{transform:translateY(-260px) translateX(30px);opacity:0}}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.6);opacity:0}}
@keyframes warnglow{0%,100%{box-shadow:0 0 0 1px #050302,inset 0 0 0 1px #3b2c15,0 0 0 rgba(224,80,63,0)}50%{box-shadow:0 0 0 1px #050302,inset 0 0 0 1px #3b2c15,0 0 22px rgba(224,80,63,.55)}}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.px *,.px *::before,.px *::after{animation:none !important;transition:none !important}}

/* phone width: nothing may break at 390 px */
@media (max-width:720px){
  .header{height:auto;min-height:260px}
  .emblem{width:120px}
  .title{font-size:34px}
  .header-inner{padding:16px 14px 0}
  .header-side{align-items:center}
  .nav{padding:12px 14px 0}
  .wrap{padding:0 14px}
  .cols-3{gap:20px}
  .map-disc{width:260px;height:260px}
  .stat-num{font-size:22px}
  .window-head,.window-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}
  .filters .filter{flex:1 1 140px}
  .kv .k{min-width:0;display:block}
  .tl-kind{min-width:0}
}