@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323:wght@400&display=swap');
@font-face { font-family:'PixelCastle'; src:url('Pixelcastle-Regular.otf') format('opentype'),url('pixelcastle.ttf') format('truetype'); font-display:swap; }

:root {
  --black:#000; --white:#fff; --cyan:#00ffff; --yellow:#ffff00;
  --red:#ff0000; --magenta:#ff00ff; --green:#00ff00;
  --dk-cyan:#00c7c7; --dk-yellow:#c7c700; --dk-red:#c70000;
  --dk-green:#00c700; --dk-magenta:#c700c7; --orange:#ff8800;
  --px:'Press Start 2P',monospace; --vt:'VT323',monospace;
  --castle:'PixelCastle','Press Start 2P',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:var(--black);}
body{color:var(--white);font-family:var(--px);font-size:10px;image-rendering:pixelated;}
/* Font scale — applied via class on body, scales everything uniformly */
/* Font scale — zoom scales everything uniformly including bitmap fonts */
body.font-large #app{ zoom:1.25; }
body.font-large #auth-screen{ zoom:1.25; }

body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9997;
  background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,0.2) 1px,rgba(0,0,0,0.2) 2px);}
#noise-canvas{position:fixed;inset:0;pointer-events:none;z-index:9995;opacity:0.045;mix-blend-mode:screen;}
@keyframes flicker{0%,100%{opacity:1}88%{opacity:1}89%{opacity:.95}90%{opacity:1}96%{opacity:.98}97%{opacity:1}}
#app{animation:flicker 9s infinite;height:100%;display:flex;flex-direction:column;overflow:hidden;}

/* ── AUTH ─────────────────────────────── */
#auth-screen{display:flex;align-items:center;justify-content:center;height:100vh;flex-direction:column;gap:20px;background:var(--black);padding:20px;}
#auth-title{font-family:var(--castle);font-size:clamp(22px,6vw,48px);color:var(--cyan);letter-spacing:4px;text-align:center;line-height:1.2;}
#auth-sub{font-family:var(--vt);font-size:18px;color:#666;letter-spacing:2px;text-align:center;}
#auth-flame{font-size:40px;animation:charFloat 2s ease-in-out infinite;}
#google-btn{display:flex;align-items:center;gap:10px;background:transparent;border:2px solid var(--dk-cyan);color:var(--cyan);font-family:var(--px);font-size:8px;padding:12px 20px;cursor:pointer;letter-spacing:2px;margin-top:10px;min-height:44px;}
#google-btn:hover,#google-btn:active{background:var(--dk-cyan);color:var(--black);}
#auth-status{font-family:var(--vt);font-size:15px;color:var(--dk-magenta);min-height:20px;}

/* ── VICTORY ──────────────────────────── */
#victory-overlay{display:none;position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;}
#victory-overlay.show{display:flex;pointer-events:all;}
#victory-bg{position:absolute;inset:0;}
@keyframes vBg{0%{background:rgba(0,0,0,0)}8%{background:rgba(0,0,0,0.92)}78%{background:rgba(0,0,0,0.92)}100%{background:rgba(0,0,0,0)}}
#victory-flash{position:absolute;inset:0;opacity:0;background:var(--yellow);}
@keyframes vFlash{0%,100%{opacity:0}4%{opacity:.55}8%{opacity:0}12%{opacity:.12}16%{opacity:0}}
.v-slash{width:72vw;height:2px;position:relative;z-index:1;background:linear-gradient(90deg,transparent,var(--yellow),transparent);box-shadow:0 0 10px var(--yellow),0 0 28px var(--dk-yellow);transform:scaleX(0);}
@keyframes vS1{0%{transform:scaleX(0);opacity:0}16%{transform:scaleX(1.03);opacity:1}22%{transform:scaleX(1);opacity:1}80%{opacity:1}100%{transform:scaleX(0);opacity:0}}
@keyframes vS2{0%,5%{transform:scaleX(0);opacity:0}20%{transform:scaleX(1.03);opacity:1}26%{transform:scaleX(1);opacity:1}80%{opacity:1}100%{transform:scaleX(0);opacity:0}}
#victory-content{display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;z-index:2;padding:22px 20px;}
#victory-eye{font-size:26px;letter-spacing:10px;opacity:0;}
@keyframes vEye{0%,10%{opacity:0}22%{opacity:1}78%{opacity:1}100%{opacity:0}}
#victory-main{font-family:var(--castle);font-size:clamp(20px,5vw,40px);color:var(--yellow);letter-spacing:6px;text-align:center;opacity:0;text-shadow:2px 2px 0 var(--dk-yellow),0 0 20px var(--yellow);}
@keyframes vMain{0%,12%{opacity:0;letter-spacing:16px}26%{opacity:1;letter-spacing:6px}78%{opacity:1}100%{opacity:0;letter-spacing:12px}}
#victory-sub{font-family:var(--vt);font-size:clamp(16px,4vw,22px);color:var(--white);letter-spacing:3px;opacity:0;text-align:center;max-width:80vw;}
@keyframes vSub{0%,20%{opacity:0}34%{opacity:1}78%{opacity:1}100%{opacity:0}}
#victory-prompt{font-family:var(--vt);font-size:16px;color:var(--dk-cyan);letter-spacing:2px;opacity:0;}
@keyframes vPrompt{0%,35%{opacity:0}48%{opacity:1}78%{opacity:1}100%{opacity:0}}

/* ── JOURNAL MODAL ────────────────────── */
#journal-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.93);z-index:10001;align-items:flex-end;justify-content:center;padding:0;}
#journal-modal-overlay.show{display:flex;}
@media(min-width:600px){#journal-modal-overlay{align-items:center;padding:20px;}}
#journal-modal{background:var(--black);border:2px solid var(--dk-yellow);border-bottom:none;padding:20px;width:100%;max-width:520px;max-height:85vh;display:flex;flex-direction:column;gap:12px;}
@media(min-width:600px){#journal-modal{border:2px solid var(--dk-yellow);max-height:80vh;}}
#jm-header{font-family:var(--px);font-size:8px;color:var(--yellow);letter-spacing:1px;}
#jm-quest-name{font-family:var(--castle);font-size:22px;color:var(--cyan);line-height:1.2;}
#jm-prompt{font-family:var(--vt);font-size:15px;color:#888;font-style:italic;}
#jm-textarea{flex:1;background:#0a0a0a;border:1px solid #333;color:var(--white);font-family:var(--vt);font-size:17px;padding:10px;outline:none;resize:none;min-height:100px;line-height:1.5;}
#jm-textarea:focus{border-color:var(--dk-yellow);}
#jm-actions{display:flex;gap:8px;justify-content:flex-end;}
.jm-btn{font-family:var(--px);font-size:7px;padding:10px 14px;border:1px solid currentColor;background:transparent;cursor:pointer;letter-spacing:1px;min-height:40px;}
.jm-save{color:var(--dk-yellow);}.jm-save:hover,.jm-save:active{background:var(--dk-yellow);color:var(--black);}
.jm-skip{color:#555;}.jm-skip:hover,.jm-skip:active{background:#333;color:var(--white);}

/* ── WORKOUT MODAL ────────────────────── */
#workout-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.93);z-index:9500;align-items:flex-end;justify-content:center;}
#workout-modal-overlay.show{display:flex;}
@media(min-width:600px){#workout-modal-overlay{align-items:center;padding:20px;}}
#workout-modal{background:var(--black);border:2px solid var(--orange);border-bottom:none;padding:0;width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;}
@media(min-width:600px){#workout-modal{border:2px solid var(--orange);max-height:85vh;}}
#wm-header{background:var(--orange);color:var(--black);padding:10px 16px;font-size:8px;letter-spacing:2px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;}
#wm-body{flex:1;overflow-y:auto;padding:14px;}
#wm-body::-webkit-scrollbar{width:4px;}
#wm-body::-webkit-scrollbar-thumb{background:var(--orange);}
.wm-section{margin-bottom:14px;}
.wm-label{font-size:6px;color:var(--orange);letter-spacing:1px;margin-bottom:6px;display:block;}
.wm-input{width:100%;background:#111;border:1px solid #333;color:var(--white);font-family:var(--vt);font-size:17px;padding:7px 8px;outline:none;}
.wm-input:focus{border-color:var(--orange);}
.wm-select{width:100%;background:#111;border:1px solid #333;color:var(--white);font-family:var(--vt);font-size:16px;padding:7px 8px;outline:none;}
.wm-row{display:flex;gap:8px;}
.wm-row .wm-input{flex:1;}
#wm-exercises{margin-top:4px;}
.wm-exercise{border:1px solid #2a1800;background:#0a0500;padding:8px 10px;margin-bottom:6px;position:relative;}
.wm-ex-name{font-family:var(--vt);font-size:16px;color:var(--orange);}
.wm-ex-detail{font-size:6px;color:#666;margin-top:2px;}
.wm-ex-sets{margin-top:6px;}
.wm-set-row{display:flex;gap:6px;align-items:center;margin-bottom:4px;}
.wm-set-input{background:#111;border:1px solid #333;color:var(--white);font-family:var(--vt);font-size:16px;padding:4px 6px;width:70px;outline:none;text-align:center;}
.wm-set-input:focus{border-color:var(--orange);}
.wm-set-label{font-size:6px;color:#666;width:30px;}
.wm-add-set{background:transparent;border:1px dashed #2a1800;color:var(--orange);font-family:var(--px);font-size:6px;padding:4px 8px;cursor:pointer;margin-top:2px;}
.wm-del-ex{position:absolute;top:6px;right:8px;background:transparent;border:none;color:#444;cursor:pointer;font-size:12px;}
.wm-del-ex:hover{color:var(--red);}
#wm-add-exercise-area{border:1px solid #2a1800;padding:10px;margin-top:8px;}
.wm-add-ex-title{font-size:6px;color:var(--orange);letter-spacing:1px;margin-bottom:8px;}
#wm-footer{padding:10px 14px;border-top:1px solid #2a1800;display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;}
.wm-btn{font-family:var(--px);font-size:7px;padding:10px 14px;border:1px solid currentColor;background:transparent;cursor:pointer;letter-spacing:1px;min-height:40px;}
.wm-finish{color:var(--orange);}.wm-finish:hover,.wm-finish:active{background:var(--orange);color:var(--black);}
.wm-cancel{color:#555;}.wm-cancel:hover,.wm-cancel:active{background:#333;color:var(--white);}
.wm-del-set{background:transparent;border:none;color:#444;cursor:pointer;font-size:11px;padding:2px;}
.wm-del-set:hover{color:var(--red);}

/* ── TOP BAR ──────────────────────────── */
#topbar{background:var(--dk-cyan);color:var(--black);display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:3px solid var(--cyan);flex-shrink:0;min-height:36px;}
#topbar .title{font-family:var(--castle);font-size:clamp(14px,3vw,20px);letter-spacing:3px;color:var(--black);}
#topbar .right{display:flex;gap:8px;align-items:center;flex-shrink:0;}
#clock{font-family:var(--vt);font-size:20px;color:var(--black);}
#date-display{font-family:var(--vt);font-size:13px;color:var(--black);display:none;}
@media(min-width:500px){#date-display{display:block;}}
#user-avatar{width:22px;height:22px;border-radius:50%;border:1px solid var(--black);}
#signout-btn{font-family:var(--px);font-size:6px;background:transparent;border:1px solid rgba(0,0,0,0.3);color:var(--black);padding:4px 6px;cursor:pointer;min-height:28px;}
#sync-indicator{font-size:8px;opacity:0.7;}

/* ── MOBILE BOTTOM NAV ────────────────── */
#bottom-nav{display:none;background:#0a0a0a;border-top:2px solid var(--dk-cyan);flex-shrink:0;z-index:100;safe-area-inset-bottom:env(safe-area-inset-bottom);}
.bn-btn{flex:1;padding:10px 4px 8px;font-family:var(--px);font-size:5.5px;background:transparent;border:none;color:#555;cursor:pointer;letter-spacing:.5px;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;}
.bn-btn .bn-icon{font-size:18px;display:block;}
.bn-btn.active{color:var(--cyan);}
.bn-btn.active .bn-icon{filter:drop-shadow(0 0 4px var(--cyan));}
@media(max-width:700px){
  #bottom-nav{display:flex;}
  #main{grid-template-columns:1fr!important;}
  .panel{display:none!important;}
  .panel.active{display:flex!important;}
}

/* ── MAIN LAYOUT ──────────────────────── */
#main{display:grid;grid-template-columns:200px 1fr 230px;flex:1;overflow:hidden;min-height:0;}
.panel{display:flex;flex-direction:column;overflow:hidden;}

/* LEFT NAV */
#leftnav{background:var(--black);border-right:2px solid var(--dk-cyan);}
#leftnav-scroll{flex:1;overflow-y:auto;padding:8px 0;}
.nav-label{font-family:var(--vt);font-size:13px;color:var(--dk-cyan);padding:4px 10px 2px;letter-spacing:1px;}
.arc-row{display:flex;align-items:stretch;border-left:3px solid transparent;}
.arc-row:hover,.arc-row.active{border-left-color:var(--cyan);background:var(--dk-cyan);}
.arc-row .arc-btn{flex:1;display:flex;align-items:center;gap:6px;padding:7px 8px;cursor:pointer;border:none;background:transparent;color:var(--white);font-family:var(--px);font-size:7px;text-align:left;line-height:1.5;}
.arc-row:hover .arc-btn,.arc-row.active .arc-btn{color:var(--black);}
.arc-btn .arc-icon{font-size:14px;flex-shrink:0;}
.arc-btn .arc-name{font-family:var(--vt);font-size:13px;line-height:1.1;}
.arc-btn .arc-sub{font-size:6px;color:var(--dk-cyan);margin-top:1px;}
.arc-row:hover .arc-sub,.arc-row.active .arc-sub{color:rgba(0,0,0,0.6);}
.arc-rename{background:transparent;border:none;border-left:1px solid #1a1a1a;color:#444;cursor:pointer;padding:0 8px;font-size:12px;flex-shrink:0;}
.arc-row:hover .arc-rename,.arc-row.active .arc-rename{color:rgba(0,0,0,0.4);border-left-color:rgba(0,0,0,0.1);}
.arc-rename:hover{color:var(--black)!important;}
.special-row{display:flex;align-items:center;gap:6px;padding:7px 10px;cursor:pointer;border:none;background:transparent;color:var(--white);width:100%;border-left:3px solid transparent;text-align:left;}
.special-row:hover,.special-row.active{background:var(--dk-red);border-left-color:var(--red);color:var(--white);}
.special-row .arc-name{font-family:var(--vt);font-size:13px;}
.special-row .arc-sub{font-size:6px;color:#666;margin-top:1px;display:block;}
.special-row:hover .arc-sub,.special-row.active .arc-sub{color:rgba(255,255,255,0.6);}
.workout-row:hover,.workout-row.active{background:#331a00!important;border-left-color:var(--orange)!important;}
.nav-divider{border:none;border-top:1px solid #1a1a1a;margin:4px 10px;}
.add-arc-btn{margin:8px;padding:8px;background:transparent;border:1px dashed var(--dk-green);color:var(--dk-green);font-family:var(--px);font-size:6px;cursor:pointer;text-align:center;letter-spacing:1px;min-height:36px;}
.add-arc-btn:hover,.add-arc-btn:active{background:var(--dk-green);color:var(--black);}

/* CENTER QUEST VIEW */
#center{background:var(--black);}
#arc-header{border-bottom:2px solid var(--dk-yellow);padding:10px 14px 8px;flex-shrink:0;}
#arc-title{font-family:var(--castle);font-size:clamp(18px,4vw,28px);color:var(--yellow);letter-spacing:2px;line-height:1.2;}
#arc-lore{font-family:var(--vt);font-size:13px;color:#aaa;margin-top:4px;font-style:italic;min-height:16px;}
#arc-progress-bar{margin-top:6px;height:5px;background:#222;border:1px solid #444;}
#arc-progress-fill{height:100%;background:var(--dk-yellow);transition:width 0.4s;}
/* boss completion ribbon */

#quest-list{flex:1;overflow-y:auto;padding:10px;}
#quest-list::-webkit-scrollbar{width:5px;}
#quest-list::-webkit-scrollbar-thumb{background:var(--dk-cyan);}

.quest-item{border:1px solid #222;margin-bottom:8px;padding:8px 10px;background:#080808;position:relative;}
.quest-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--dk-cyan);}
.quest-item.done::before{background:var(--dk-green);}
.quest-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.quest-gothic-name{font-family:var(--vt);font-size:16px;color:var(--cyan);line-height:1.1;}
.quest-item.done .quest-gothic-name{color:var(--dk-green);text-decoration:line-through;}
.quest-badge{font-size:6px;padding:2px 5px;border:1px solid currentColor;white-space:nowrap;flex-shrink:0;}
.badge-active{color:var(--cyan);}
.badge-done{color:var(--dk-green);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.quest-plain{font-family:var(--vt);font-size:12px;color:#555;margin-top:2px;font-style:italic;}
.quest-actions{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;}
.q-btn{font-family:var(--px);font-size:6px;padding:5px 8px;border:1px solid currentColor;background:transparent;cursor:pointer;letter-spacing:.5px;min-height:32px;}
.q-btn-complete{color:var(--dk-green);}.q-btn-complete:hover,.q-btn-complete:active{background:var(--dk-green);color:var(--black);}
.q-btn-note{color:var(--dk-yellow);}.q-btn-note:hover,.q-btn-note:active{background:var(--dk-yellow);color:var(--black);}

/* REALM NOTES (inline in quest list) — yellow accent so they read as
   inscriptions rather than active quests. Sit alongside .quest-item rows. */
.note-item{border:1px solid #2a2200;margin-bottom:8px;padding:8px 10px;background:#0a0905;position:relative;}
.note-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--dk-yellow);}
.note-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.note-title{font-family:var(--vt);font-size:16px;color:var(--dk-yellow);line-height:1.2;word-break:break-word;}
.note-meta{font-family:var(--vt);font-size:11px;color:#555;margin-top:2px;font-style:italic;}
.note-body{font-family:var(--vt);font-size:14px;color:#aaa;line-height:1.55;white-space:pre-wrap;word-break:break-word;margin-top:6px;padding-top:6px;border-top:1px solid #1a1500;}
.note-actions{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;}
.note-badge{color:var(--dk-yellow);}

#add-quest-area{border-top:2px solid #1a1a1a;padding:10px;flex-shrink:0;background:#050505;}
#add-quest-label{font-family:var(--vt);font-size:13px;color:var(--dk-cyan);margin-bottom:6px;letter-spacing:1px;}
#quest-input-row{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap;}
#quest-input{flex:1;min-width:140px;background:#111;border:1px solid var(--dk-cyan);color:var(--white);font-family:var(--vt);font-size:16px;padding:8px;outline:none;min-height:40px;}
#quest-input:focus{border-color:var(--cyan);}
#add-quest-btn{background:var(--dk-cyan);color:var(--black);border:none;font-family:var(--px);font-size:7px;padding:8px 10px;cursor:pointer;letter-spacing:1px;min-height:40px;}
#add-quest-btn:hover,#add-quest-btn:active{background:var(--cyan);}
#gothify-status{font-family:var(--vt);font-size:13px;color:var(--dk-magenta);margin-top:4px;min-height:16px;}

/* BONFIRE / DAILY VIEW */
#bonfire-view{background:var(--black);}
#bonfire-header{border-bottom:2px solid var(--dk-red);padding:10px 14px 8px;flex-shrink:0;}
#bonfire-tabs{display:flex;gap:0;border-bottom:1px solid #1a1a1a;flex-shrink:0;}
.bf-tab{flex:1;padding:8px 4px;font-family:var(--px);font-size:6px;background:transparent;border:none;color:#555;cursor:pointer;letter-spacing:.5px;border-bottom:2px solid transparent;min-height:36px;}
.bf-tab.active{color:var(--red);border-bottom-color:var(--red);}
#bonfire-list,#daily-list{flex:1;overflow-y:auto;padding:10px;}
#bonfire-list::-webkit-scrollbar,#daily-list::-webkit-scrollbar{width:5px;}
#bonfire-list::-webkit-scrollbar-thumb{background:var(--dk-red);}
#daily-list::-webkit-scrollbar-thumb{background:var(--dk-cyan);}
#daily-list{display:none;}
#bonfire-view.show-daily #bonfire-list{display:none;}
#bonfire-view.show-daily #bonfire-controls{display:none;}
#bonfire-view.show-daily #daily-list{display:block;}

.bonfire-entry{border:1px solid #2a1a1a;margin-bottom:10px;background:#070303;position:relative;}
.bonfire-entry::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--dk-red);}
.be-top{padding:8px 10px 6px;}
.be-type{font-size:6px;letter-spacing:1px;margin-bottom:3px;}
.be-type.task{color:var(--dk-red);}
.be-type.workout{color:var(--orange);}
.be-type.meditation{color:var(--dk-cyan);}
.be-type.journal{color:var(--dk-yellow);}
.be-type.boss{color:var(--yellow);}
.be-realm{font-family:var(--px);font-size:5.5px;color:#555;letter-spacing:1px;margin-bottom:3px;}
.be-quest{font-family:var(--vt);font-size:16px;color:var(--dk-green);}
.be-plain{font-family:var(--vt);font-size:12px;color:#444;font-style:italic;margin-top:2px;}
.be-date{font-size:6px;color:#333;margin-top:4px;}
.be-journal{padding:8px 10px;border-top:1px solid #1a0808;background:#030101;}
.be-journal-text{font-family:var(--vt);font-size:15px;color:#aaa;line-height:1.6;white-space:pre-wrap;word-break:break-word;}
.be-add-journal{font-family:var(--px);font-size:6px;padding:5px 8px;border:1px dashed var(--dk-yellow);color:var(--dk-yellow);background:transparent;cursor:pointer;letter-spacing:1px;min-height:30px;}
.be-add-journal:hover,.be-add-journal:active{background:var(--dk-yellow);color:var(--black);}
.be-edit-journal{font-family:var(--px);font-size:6px;padding:3px 6px;border:1px solid #333;color:#444;background:transparent;cursor:pointer;margin-top:4px;float:right;}

/* DAILY HABITS */
.daily-section{margin-bottom:16px;border:1px solid #1a1a1a;padding:12px;background:#050505;}
.daily-section-title{font-size:7px;color:var(--dk-cyan);letter-spacing:2px;margin-bottom:4px;}
.daily-gothic-sub{font-family:var(--vt);font-size:13px;color:#444;font-style:italic;margin-bottom:10px;line-height:1.4;}
.daily-streak-text{font-family:var(--vt);font-size:13px;color:var(--dk-cyan);margin-top:6px;}
.meditation-btn{width:100%;padding:12px;background:transparent;border:1px solid #2a2a00;color:#888;font-family:var(--px);font-size:6px;cursor:pointer;letter-spacing:1px;min-height:44px;text-align:left;line-height:1.6;}
.meditation-btn.checked{background:#001a0a;border-color:var(--dk-green);color:var(--dk-green);}
.meditation-btn:hover:not(.checked){border-color:var(--dk-cyan);color:var(--cyan);}
.workout-start-btn{width:100%;padding:12px;background:transparent;border:1px solid #2a1000;color:#777;font-family:var(--px);font-size:6px;cursor:pointer;letter-spacing:1px;min-height:44px;text-align:left;}
.workout-start-btn:hover,.workout-start-btn:active{background:#1a0800;border-color:var(--orange);color:var(--orange);}

/* RIGHT PANEL */
#rightpanel{border-left:2px solid var(--dk-cyan);background:#050505;}
#rightpanel-scroll{flex:1;overflow-y:auto;}
.rp-section{border-bottom:1px solid #1a1a1a;padding:8px 10px;}
.rp-title{font-size:6px;color:var(--dk-yellow);letter-spacing:1px;margin-bottom:6px;text-transform:uppercase;}
#big-clock{font-family:var(--vt);font-size:clamp(32px,6vw,42px);color:var(--cyan);text-align:center;letter-spacing:4px;line-height:1;}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.clock-colon{animation:blink 1s infinite;}
#big-date{font-family:var(--vt);font-size:13px;color:var(--dk-cyan);text-align:center;margin-top:2px;}
#char-area{text-align:center;}
@keyframes charFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
#char-name{font-family:var(--castle);font-size:16px;color:var(--yellow);margin-top:4px;}
#char-level{font-size:6px;color:var(--dk-yellow);margin-top:2px;}
#tasks-done-count{font-family:var(--vt);font-size:13px;color:#555;margin-top:3px;}

#meetings-list{max-height:130px;overflow-y:auto;}
.meeting-item{display:flex;gap:6px;align-items:flex-start;padding:4px 0;border-bottom:1px solid #111;}
.meeting-time{font-family:var(--vt);font-size:13px;color:var(--yellow);white-space:nowrap;flex-shrink:0;min-width:40px;}
.meeting-name{font-family:var(--vt);font-size:13px;color:var(--white);line-height:1.1;flex:1;}
.meeting-del{background:transparent;border:none;color:#333;cursor:pointer;font-size:10px;padding:0 2px;flex-shrink:0;min-height:22px;}
.meeting-del:hover{color:var(--red);}
.meeting-now{background:#0d0a00;}
.meeting-now .meeting-time{color:var(--red);animation:pulse 1s infinite;}
#add-meeting-row{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;}
.meeting-input{background:#111;border:1px solid #222;color:var(--white);font-family:var(--vt);font-size:14px;padding:5px;outline:none;flex:1;min-width:50px;min-height:34px;}
.meeting-input:focus{border-color:var(--dk-cyan);}
#add-meeting-btn{background:var(--dk-yellow);color:var(--black);border:none;font-family:var(--px);font-size:6px;padding:5px 8px;cursor:pointer;min-height:34px;}
#streak-area{text-align:center;padding:10px;}
#streak-flame{font-size:22px;animation:charFloat 2s ease-in-out infinite;display:block;}
#streak-text{font-family:var(--vt);font-size:13px;color:var(--dk-red);margin-top:2px;}
#streak-sub{font-size:6px;color:#555;margin-top:2px;}

/* MODALS (shared) */
.modal-overlay-base{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:3000;align-items:center;justify-content:center;padding:20px;}
.modal-overlay-base.show{display:flex;}
.modal-box{background:var(--black);padding:20px;width:100%;max-width:420px;font-family:var(--px);}
.modal-title{font-size:9px;color:var(--yellow);margin-bottom:14px;letter-spacing:1px;}
.modal-field{margin-bottom:12px;}
.modal-label{font-size:7px;color:var(--dk-cyan);margin-bottom:5px;display:block;}
.modal-input{width:100%;background:#111;border:1px solid var(--dk-cyan);color:var(--white);font-family:var(--vt);font-size:18px;padding:7px 8px;outline:none;min-height:40px;}
.modal-input:focus{border-color:var(--cyan);}
.modal-select{width:100%;background:#111;border:1px solid var(--dk-cyan);color:var(--cyan);font-family:var(--px);font-size:7px;padding:7px 8px;outline:none;min-height:36px;}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;}
.modal-btn{font-family:var(--px);font-size:7px;padding:8px 12px;border:1px solid currentColor;background:transparent;cursor:pointer;letter-spacing:1px;min-height:38px;}
.modal-btn-confirm{color:var(--dk-green);}.modal-btn-confirm:hover,.modal-btn-confirm:active{background:var(--dk-green);color:var(--black);}
.modal-btn-cancel{color:#555;}.modal-btn-cancel:hover,.modal-btn-cancel:active{background:#333;color:var(--white);}

/* ONBOARDING */
/* ── ONBOARDING TOUR ──────────────────────────────────── */
#tour-overlay{
  display:none; position:fixed; inset:0; z-index:9996; pointer-events:none;
}
#tour-overlay.show{ display:block; pointer-events:all; }

/* Dark backdrop with cutout — done via box-shadow on spotlight */
#tour-spotlight{
  position:fixed; border:2px solid var(--cyan);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.88);
  z-index:9997; pointer-events:none;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  border-radius:2px;
}

#tour-card{
  position:fixed; z-index:9998;
  background:var(--black); border:2px solid var(--dk-cyan);
  padding:16px; max-width:280px; width:calc(100vw - 40px);
  pointer-events:all;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}
#tour-step-label{ font-size:6px; color:var(--dk-cyan); letter-spacing:2px; margin-bottom:8px; }
#tour-title{ font-family:var(--castle); font-size:20px; color:var(--yellow); margin-bottom:8px; line-height:1.2; }
#tour-text{ font-family:var(--vt); font-size:15px; color:#bbb; line-height:1.6; margin-bottom:14px; }
#tour-actions{ display:flex; gap:8px; justify-content:space-between; align-items:center; }
#tour-progress{ display:flex; gap:4px; align-items:center; }
.tour-pip{ width:6px; height:6px; background:#333; }
.tour-pip.active{ background:var(--cyan); }
#tour-next-btn{
  font-family:var(--px); font-size:7px; padding:8px 14px;
  background:var(--dk-cyan); color:var(--black); border:none;
  cursor:pointer; letter-spacing:1px; min-height:36px;
}
#tour-next-btn:hover{ background:var(--cyan); }
#tour-skip{ font-family:var(--px); font-size:6px; color:#444; background:transparent; border:none; cursor:pointer; padding:4px; }
#tour-skip:hover{ color:#888; }

/* ── WORKOUT STICKY BAR ───────────────────────────────── */
#workout-sticky{
  display:none; background:#1a0800; border-bottom:2px solid var(--orange);
  padding:5px 12px; flex-shrink:0; align-items:center; gap:10px;
  z-index:500; cursor:pointer;
}
#workout-sticky.active{ display:flex; }
#ws-ex-name{ font-family:var(--vt); font-size:15px; color:var(--orange); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ws-set-count{ font-size:6px; color:#888; letter-spacing:1px; flex-shrink:0; }
#ws-rest{ font-family:var(--vt); font-size:15px; flex-shrink:0; }
#ws-rest.resting{ color:var(--cyan); animation:pulse 1s infinite; }
#ws-rest.ready{ color:var(--dk-green); }
#ws-back-btn{ font-family:var(--px); font-size:6px; padding:4px 8px; border:1px solid var(--orange); color:var(--orange); background:transparent; cursor:pointer; flex-shrink:0; min-height:28px; }
#ws-back-btn:hover,#ws-back-btn:active{ background:var(--orange); color:var(--black); }

/* REST TIMER OVERLAY on set row */
.wm-set-rest{ font-family:var(--vt); font-size:13px; color:var(--cyan); padding:2px 6px; animation:pulse 1s infinite; }
.wm-set-rest.ready{ color:var(--dk-green); animation:none; }
.wm-log-btn{
  flex:1; background:var(--orange); color:var(--black); border:none;
  font-family:var(--px); font-size:6px; padding:8px; cursor:pointer;
  letter-spacing:1px; min-height:38px; margin-top:6px; width:100%;
}
.wm-log-btn:active{ opacity:0.8; }
.wm-set-row-logged{ opacity:0.5; }
.wm-set-prev{ font-size:6px; color:#444; letter-spacing:.5px; margin-left:4px; font-style:italic; }
.wm-set-prev-last{ color:var(--orange); opacity:.75; }
.wm-set-beat{ font-family:var(--vt); font-size:13px; color:var(--dk-green); margin-left:4px; }
.wm-set-miss{ font-family:var(--vt); font-size:13px; color:var(--dk-red); margin-left:4px; opacity:.7; }
.wm-ex-last{ font-family:var(--vt); font-size:12px; color:#7a4a00; margin-top:2px; letter-spacing:.3px; }
.wm-ex-last b{ color:var(--orange); font-weight:normal; }
#char-screen-overlay{ display:none; }
#char-screen-overlay.show{ display:flex; }
.archetype-card{border:1px solid #222;padding:8px 6px;cursor:pointer;background:#080808;display:flex;flex-direction:column;align-items:center;gap:4px;transition:border-color 0.15s;}
.archetype-card:hover{border-color:var(--dk-cyan);}
.archetype-card.selected{border-color:var(--cyan);background:#001a1a;}
.archetype-card canvas{image-rendering:pixelated;width:40px;height:40px;}
.archetype-card-name{font-size:6px;color:#888;letter-spacing:1px;text-align:center;}
.archetype-card.selected .archetype-card-name{color:var(--cyan);}
.prog-sprite{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;}
.prog-sprite canvas{image-rendering:pixelated;width:28px;height:28px;}
.prog-sprite-label{font-size:5px;color:#444;letter-spacing:.5px;text-align:center;max-width:38px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prog-sprite.current .prog-sprite-label{color:var(--dk-yellow);}
.prog-sprite.current canvas{outline:1px solid var(--dk-yellow);}

/* ── SEALED REALM ARCHIVE ─────────────────────────────── */
.archive-label{ font-family:var(--vt); font-size:12px; color:#444; padding:4px 10px 2px; letter-spacing:1px; }
.arc-row.sealed{ opacity:0.5; }
.arc-row.sealed .arc-name{ color:#555; }
.arc-row.sealed:hover{ opacity:0.8; }
#sealed-arcs-section{ border-top:1px solid #111; margin-top:2px; }

/* UNSEAL MODAL */
#unseal-modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:3000; align-items:center; justify-content:center; padding:20px; }
#unseal-modal-overlay.show{ display:flex; }
#unseal-modal{ background:var(--black); border:2px solid var(--dk-red); padding:20px; max-width:420px; width:100%; font-family:var(--px); }
#unseal-modal .modal-title{ color:var(--red); }
#unseal-reason-text{ font-family:var(--vt); font-size:15px; color:#888; font-style:italic; margin-bottom:10px; line-height:1.4; }

/* BONFIRE GROUPED BY REALM */
.bonfire-realm-group{ margin-bottom:8px; border:1px solid #1a0a0a; }
.bonfire-realm-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 10px; cursor:pointer; background:#080303; border-bottom:1px solid #1a0a0a;
  user-select:none;
}
.bonfire-realm-header:hover{ background:#100505; }
.brh-name{ font-family:var(--castle); font-size:16px; line-height:1.2; }
.brh-name.sealed-realm{ color:var(--dk-yellow); }
.brh-name.active-realm{ color:var(--dk-red); }
.brh-name.daily-group{ color:var(--dk-cyan); }
.brh-meta{ font-size:5.5px; color:#555; letter-spacing:.5px; flex-shrink:0; }
.brh-chevron{ font-size:8px; color:#444; flex-shrink:0; transition:transform 0.2s; }
.bonfire-realm-group.open .brh-chevron{ transform:rotate(90deg); }
.bonfire-realm-entries{ display:none; }
.bonfire-realm-group.open .bonfire-realm-entries{ display:block; }
.bonfire-entry{ border-bottom:1px solid #110808; padding:6px 10px; background:#070303; position:relative; }
.bonfire-entry::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--dk-red); }
.bonfire-entry.type-workout::before{ background:var(--orange); }
.bonfire-entry.type-meditation::before{ background:var(--dk-cyan); }
.bonfire-entry.type-boss::before{ background:var(--yellow); }
.bonfire-entry.type-journal::before{ background:var(--dk-yellow); }
.bonfire-entry.type-note::before{ background:var(--dk-yellow); }
.be-type.note{ color:var(--dk-yellow); }
.bonfire-chronological{ padding:6px 8px; }
.bonfire-chronological .bonfire-entry{ margin-bottom:6px; }
.inv-item{ padding:5px 8px; border-bottom:1px solid #111; display:flex; gap:8px; align-items:flex-start; }
.inv-item.equipped-item{ background:#0d0a00; border-left:2px solid var(--dk-yellow); }
.inv-icon{ font-size:18px; flex-shrink:0; width:22px; text-align:center; margin-top:1px; }
.inv-body{ flex:1; min-width:0; }
.inv-title{ font-family:var(--vt); font-size:15px; color:var(--white); line-height:1.2; }
.inv-desc{ font-family:var(--vt); font-size:13px; color:#666; margin-top:1px; font-style:italic; line-height:1.3; }
.inv-link{ font-size:6px; color:var(--dk-cyan); letter-spacing:.5px; margin-top:2px; display:block; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.inv-link:hover{ color:var(--cyan); text-decoration:underline; }
.inv-del{ background:transparent; border:none; color:#333; cursor:pointer; font-size:11px; padding:2px 4px; flex-shrink:0; }
.inv-del:hover{ color:var(--red); }
.inv-empty{ font-family:var(--vt); font-size:13px; color:#333; padding:6px 8px; }
/* ── MILESTONES ─────────────────── */
.quest-milestones{ margin-top:6px; padding-left:10px; border-left:2px solid #1a1a1a; }
.milestone-row{ display:flex; align-items:center; gap:6px; padding:3px 0; border-bottom:1px solid #0d0d0d; }
.milestone-check{ width:14px; height:14px; border:1px solid #333; background:transparent; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; }
.milestone-check.reached{ border-color:var(--dk-yellow); background:#1a1200; color:var(--dk-yellow); }
.milestone-name{ font-family:var(--vt); font-size:14px; color:#888; flex:1; line-height:1.1; }
.milestone-row.reached-row .milestone-name{ color:#444; text-decoration:line-through; }
.milestone-del{ background:transparent; border:none; color:#2a2a2a; cursor:pointer; font-size:10px; padding:0 2px; }
.milestone-del:hover{ color:var(--red); }
.add-milestone-row{ display:flex; gap:4px; margin-top:5px; }
.milestone-input{ flex:1; background:#0a0a0a; border:1px solid #1a1a1a; color:#aaa; font-family:var(--vt); font-size:15px; padding:3px 6px; outline:none; }
.milestone-input:focus{ border-color:#333; }
.add-milestone-btn{ font-family:var(--px); font-size:5.5px; padding:3px 7px; border:1px solid #2a2a2a; color:#555; background:transparent; cursor:pointer; min-height:26px; }
.add-milestone-btn:hover,.add-milestone-btn:active{ border-color:var(--dk-yellow); color:var(--dk-yellow); }
/* ── DELETE BUTTON ───────────────── */
.del-btn{ font-family:var(--px); font-size:5px; padding:3px 5px; border:1px solid #2a1a1a; color:#555; background:transparent; cursor:pointer; }
.del-btn:hover{ border-color:var(--red); color:var(--red); }

/* ── RITE CARD ───────────────────── */
.rite-card{ border:1px solid #1a1a1a; background:#050505; margin-bottom:10px; }
.rite-card-header{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; }
.rite-icon{ font-size:20px; flex-shrink:0; }
.rite-info{ flex:1; min-width:0; padding:0 10px; }
.rite-name{ font-family:var(--px); font-size:7px; color:var(--cyan); letter-spacing:1px; }
.rite-gothic{ font-family:var(--vt); font-size:13px; color:#444; font-style:italic; margin-top:2px; }
.rite-streak{ font-size:6px; color:#555; letter-spacing:.5px; margin-top:3px; }
.rite-streak.burning{ color:var(--dk-yellow); }
.rite-check-btn{ font-family:var(--px); font-size:6px; padding:6px 10px; border:1px solid #222; color:#555; background:transparent; cursor:pointer; min-height:36px; flex-shrink:0; }
.rite-check-btn.done{ border-color:var(--dk-green); color:var(--dk-green); background:#001a00; }
.rite-check-btn:hover:not(.done){ border-color:var(--dk-cyan); color:var(--cyan); }
.rite-week{ display:flex; gap:4px; padding:0 12px 8px; }
.rite-day{ flex:1; text-align:center; }
.rite-day-label{ font-size:5px; color:#333; letter-spacing:.5px; }
.rite-day-dot{ width:10px; height:10px; border-radius:50%; background:#111; border:1px solid #1a1a1a; margin:2px auto 0; }
.rite-day-dot.done{ background:var(--dk-green); border-color:var(--dk-green); }
.rite-day-dot.today{ border-color:var(--dk-cyan); }
.rite-actions{ display:flex; gap:4px; padding:0 12px 8px; justify-content:flex-end; }
.rite-edit-btn{ font-family:var(--px); font-size:5px; padding:3px 6px; border:1px solid #222; color:#555; background:transparent; cursor:pointer; }
.rite-edit-btn:hover{ border-color:var(--dk-cyan); color:var(--cyan); }
#map-overlay.edit-mode #map-canvas{ cursor:grab; }
#map-overlay.dragging #map-canvas{ cursor:grabbing; }

/* TOAST */
#toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);background:var(--dk-cyan);color:var(--black);font-family:var(--px);font-size:7px;padding:8px 16px;letter-spacing:1px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:9999;max-width:90vw;text-align:center;white-space:nowrap;}
#toast.show{opacity:1;}
#toast.danger{background:var(--dk-red);color:var(--white);pointer-events:all;}
#toast-confirm-btn{display:none;margin-left:10px;background:var(--red);color:var(--white);border:none;font-family:var(--px);font-size:6px;padding:3px 8px;cursor:pointer;vertical-align:middle;}
#toast.danger #toast-confirm-btn{display:inline-block;}
@media(min-width:700px){#toast{bottom:20px;}}

/* EMOJI CANVAS */
.emoji-canvas{display:inline-block;vertical-align:middle;image-rendering:pixelated;}

.loading-dots::after{content:'';animation:dots 1.2s infinite;}
@keyframes dots{0%{content:''}33%{content:'.'}66%{content:'..'}100%{content:'...'}}

/* Glitch on topbar title */
@keyframes glitch {
  0%,90%,100%{ text-shadow:none; transform:none; }
  91%{ text-shadow:-2px 0 var(--red),2px 0 var(--cyan); transform:skewX(-1deg); }
  93%{ text-shadow:2px 0 var(--red),-2px 0 var(--cyan); transform:skewX(1deg); }
  95%{ text-shadow:none; transform:none; }
  97%{ text-shadow:-1px 0 var(--magenta),1px 0 var(--cyan); transform:skewX(-0.5deg); }
}
#topbar .title{ animation:glitch 8s infinite; }

/* Breathing glow on arc title */
@keyframes breathe {
  0%,100%{ text-shadow:0 0 8px rgba(255,255,0,0.3); }
  50%{ text-shadow:0 0 20px rgba(255,255,0,0.7),0 0 40px rgba(255,255,0,0.2); }
}
#arc-title{ animation:breathe 4s ease-in-out infinite; }

/* Bonfire header ember glow */
@keyframes embергlow {
  0%,100%{ color:var(--red); text-shadow:0 0 10px rgba(255,0,0,0.4); }
  33%{ color:#ff4400; text-shadow:0 0 18px rgba(255,68,0,0.6); }
  66%{ color:var(--dk-red); text-shadow:0 0 6px rgba(199,0,0,0.3); }
}
#bonfire-header .castle-title{ animation:embергlow 3s ease-in-out infinite; }

/* Slow cursor blink on quest input focus */
#quest-input{ caret-color:var(--cyan); }

/* Ember canvas */
#ember-canvas{ position:fixed; inset:0; pointer-events:none; z-index:9993; }

/* Victory main text — castle font mixed case override */
#victory-main{ text-transform:none; letter-spacing:4px; }

/* Auth title — no all caps */
#auth-title{ text-transform:none; }

/* Char name pulse */
@keyframes namepulse {
  0%,100%{ opacity:1; }
  50%{ opacity:0.75; }
}
#char-name{ animation:namepulse 6s ease-in-out infinite; }

/* Quest gothic name hover shimmer */
.quest-gothic-name{
  transition:text-shadow 0.3s;
}
.quest-item:hover .quest-gothic-name{
  text-shadow:0 0 8px var(--cyan);
}
.quest-item.done:hover .quest-gothic-name{
  text-shadow:0 0 8px var(--dk-green);
}

/* Arc button hover glow */
.arc-row{ transition:border-left-color 0.15s; }

/* Lore text fade in */
@keyframes loreFade {
  from{ opacity:0; transform:translateY(3px); }
  to{ opacity:1; transform:none; }
}
.lore-animate{ animation:loreFade 0.6s ease forwards; }

/* Boss zone pulse */