:root{
    --bg:#EBDDBB; --panel:#F2E7CB; --panel2:#F7EFDA; --line:#B69A6E;
    --text:#3A2A18; --muted:#7A6248; --amber:#8E3B2E; --teal:#5C7048;
    --danger:#A0342A; --blue:#56688A;
    --radius:14px;
    font-size:16px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{background:var(--bg); color:var(--text);
    font-family:'Alegreya',system-ui,-apple-system,sans-serif; min-height:100%;}
  .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
  .wrap{max-width:980px; margin:0 auto; padding:20px 16px 90px;}

  header{display:flex; justify-content:space-between; align-items:flex-end;
    padding:8px 2px 18px; gap:12px; flex-wrap:wrap;}
  .h-date{font-family:'IBM Plex Mono',monospace; color:var(--muted); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;}
  h1{font-size:1.45rem; font-weight:700; letter-spacing:-.01em;}
  h1 .lamp{color:var(--amber);}
  .clock{font-family:'IBM Plex Mono',monospace; font-size:1.3rem; color:var(--amber);}

  nav{display:flex; gap:6px; overflow-x:auto; padding-bottom:14px; scrollbar-width:none;}
  nav::-webkit-scrollbar{display:none;}
  nav button{background:var(--panel); border:1px solid var(--line); color:var(--muted);
    padding:9px 16px; border-radius:999px; font-family:inherit; font-size:.85rem;
    cursor:pointer; white-space:nowrap; transition:all .15s;}
  nav button.active{background:var(--amber); color:#F7EFDC; border-color:var(--amber); font-weight:600;}
  nav button:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}

  section{display:none;}
  section.show{display:block; animation:fade .2s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion: reduce){ section.show{animation:none;} }

  .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:18px; margin-bottom:14px;}
  .card h2{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
    margin-bottom:14px; font-weight:600;}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media(max-width:700px){ .grid2{grid-template-columns:1fr;} }

  /* stat tiles */
  .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:14px;}
  .tile{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px;}
  .tile .v{font-size:1.5rem; font-weight:700; font-family:'IBM Plex Mono',monospace;}
  .tile .l{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:4px;}
  .tile.ok .v{color:var(--teal);} .tile.warn .v{color:var(--amber);} .tile.bad .v{color:var(--danger);}

  /* day rail (signature) */
  .rail{position:relative; margin:6px 0 4px; padding-left:64px;}
  .rail-hour{position:relative; height:44px; border-top:1px dashed rgba(138,151,172,.22);}
  .rail-hour .hl{position:absolute; left:-64px; top:-8px; width:52px; text-align:right;
    font-family:'IBM Plex Mono',monospace; font-size:.68rem; color:var(--muted);}
  .blk{position:absolute; left:66px; right:4px; border-radius:8px; padding:4px 10px;
    font-size:.74rem; overflow:hidden; border:1px solid; line-height:1.25;}
  .blk .bt{font-family:'IBM Plex Mono',monospace; opacity:.8; font-size:.64rem;}
  .blk.task{background:rgba(107,74,43,.13); border-color:rgba(107,74,43,.45); color:#C9D8F5;}
  .blk.p1{background:rgba(107,74,43,.14); border-color:rgba(107,74,43,.55); color:#6B2F26;}
  .blk.health{background:rgba(92,112,72,.15); border-color:rgba(92,112,72,.5); color:#3F5233;}
  .blk.supp{background:rgba(232,112,95,.13); border-color:rgba(232,112,95,.5); color:#F3BCB2;}
  .blk.fixed{background:rgba(138,151,172,.12); border-color:rgba(138,151,172,.4); color:#C6CFDD;}
  .nowline{position:absolute; left:56px; right:0; height:0; border-top:2px solid var(--amber); z-index:5;}
  .nowline::before{content:""; position:absolute; left:-6px; top:-5px; width:8px; height:8px;
    border-radius:50%; background:var(--amber);}

  /* inputs */
  input,select{background:var(--panel2); border:1px solid var(--line); color:var(--text);
    border-radius:10px; padding:10px 12px; font-family:inherit; font-size:.9rem; width:100%;}
  input:focus-visible,select:focus-visible{outline:2px solid var(--amber); outline-offset:1px;}
  .row{display:flex; gap:8px; flex-wrap:wrap;}
  .row > *{flex:1; min-width:110px;}
  .btn{background:var(--amber); color:#F7EFDC; border:none; border-radius:10px; padding:11px 18px;
    font-family:inherit; font-weight:600; font-size:.9rem; cursor:pointer; flex:0 0 auto;}
  .btn.ghost{background:transparent; border:1px solid var(--line); color:var(--muted);}
  .btn.teal{background:var(--teal); color:#F7EFDC;}
  .btn:focus-visible{outline:2px solid var(--text); outline-offset:2px;}
  .btn:disabled{opacity:.5; cursor:default;}

  /* task list */
  .tlist{list-style:none;}
  .titem{display:flex; align-items:center; gap:8px 10px; padding:10px 12px; flex-wrap:wrap;
    background:rgba(255,255,255,.32); border:1px solid rgba(107,74,43,.28); border-radius:10px;
    margin:8px 0; box-shadow:0 1px 2px rgba(60,40,20,.08); max-width:100%;}
  .chip.cat-postura{color:var(--blue); border-color:var(--blue);}
  .chip.cat-moodcrafters{color:#6B4A6E; border-color:#6B4A6E;}
  .chip.cat-personal{color:var(--muted); border-color:var(--line);}
  .titem:last-child{border-bottom:none;}
  .titem input[type=checkbox]{width:19px; height:19px; flex:0 0 auto; accent-color:var(--teal); cursor:pointer;}
  .titem .name{flex:1 1 180px; min-width:140px; font-size:1.03rem; line-height:1.35; cursor:text;}
  .titem .name:hover{text-decoration:underline dotted rgba(107,74,43,.55); text-underline-offset:3px;}
  .titem.done .name{cursor:default;}
  .titem.done .name:hover{text-decoration:line-through;}
  .name-edit{flex:1 1 auto; font-size:1.03rem; min-width:150px; font-family:inherit;}
  .titem.done .name{color:var(--muted); text-decoration:line-through;}
  .chip{font-family:'IBM Plex Mono',monospace; font-size:.64rem; padding:3px 8px; border-radius:999px;
    border:1px solid; flex:0 0 auto;}
  .chip.p1{color:var(--amber); border-color:var(--amber);}
  .chip.p2{color:var(--teal); border-color:var(--teal);}
  .chip.p3{color:var(--blue); border-color:var(--blue);}
  .chip.kind{color:var(--muted); border-color:var(--line);}
  .del{background:none; border:none; color:var(--muted); cursor:pointer; font-size:1rem; padding:4px;}
  .del:hover{color:var(--danger);}
  .topbtn:hover{color:var(--amber);}
  .topbtn.on{color:var(--amber);}
  .fubtn:hover{color:var(--teal);}
  .fubtn.on{color:var(--teal);}
  .playbtn{color:var(--teal); font-size:.8rem;}
  .playbtn:hover{color:var(--amber);}
  .playbtn.on{color:var(--amber);}
  .titem.tracking{background:rgba(107,74,43,.07); border-radius:8px;}
  .hsub{padding:14px 4px 6px; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--muted); font-weight:600; list-style:none; border-bottom:1px solid rgba(107,74,43,.35);}
  button.hz{cursor:pointer; background:var(--panel2); line-height:normal;}
  select.hzsel{width:auto; flex:0 0 auto; padding:4px 8px; font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:.68rem; border-radius:999px; background:var(--panel2); cursor:pointer; border:1px solid var(--line);}
  .hzsel.hz-short{color:var(--teal); border-color:var(--teal);}
  .hzsel.hz-medium{color:var(--blue); border-color:var(--blue);}
  .hzsel.hz-long{color:var(--muted); border-color:var(--line);}
  select.catsel{width:auto; flex:0 0 auto; padding:4px 8px; font-family:'IBM Plex Mono',ui-monospace,monospace;
    font-size:.68rem; border-radius:999px; background:var(--panel2); cursor:pointer; border:1px solid var(--line);}
  .catsel.cat-postura{color:var(--blue); border-color:var(--blue);}
  .catsel.cat-moodcrafters{color:#6B4A6E; border-color:#6B4A6E;}
  .catsel.cat-personal{color:var(--muted); border-color:var(--line);}
  .hz.hz-short{color:var(--teal); border-color:var(--teal);}
  .hz.hz-medium{color:var(--blue); border-color:var(--blue);}
  .hz.hz-long{color:var(--muted); border-color:var(--line);}
  .empty{color:var(--muted); font-size:.86rem; padding:8px 2px;}

  /* supplements + health */
  .pilllist{display:flex; flex-direction:column; gap:8px;}
  .pill{display:flex; align-items:center; gap:10px; background:var(--panel2);
    border:1px solid var(--line); border-radius:10px; padding:10px 12px;}
  .pill input[type=checkbox]{width:19px; height:19px; accent-color:var(--danger);}
  .pill .name{flex:1; font-size:.9rem;}
  .seg{display:flex; gap:6px; flex-wrap:wrap;}
  .seg button{background:var(--panel2); border:1px solid var(--line); color:var(--muted);
    border-radius:10px; padding:9px 14px; font-family:inherit; font-size:.84rem; cursor:pointer;}
  .seg button.sel{background:var(--teal); color:#F7EFDC; border-color:var(--teal); font-weight:600;}

  .note{font-size:.78rem; color:var(--muted); margin-top:10px; line-height:1.5;}
  .banner{border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; font-size:.88rem; line-height:1.5; border:1px solid;}
  .banner.warn{background:rgba(107,74,43,.09); border-color:rgba(107,74,43,.4); color:#6B2F26;}
  .banner.good{background:rgba(92,112,72,.12); border-color:rgba(92,112,72,.45); color:#3F5233;}
  .banner.err{background:rgba(232,112,95,.1); border-color:rgba(232,112,95,.45); color:#F3BCB2;}

  textarea{width:100%; min-height:170px; background:var(--panel2); border:1px solid var(--line);
    color:var(--text); border-radius:10px; padding:12px; font-family:'IBM Plex Mono',monospace; font-size:.76rem; line-height:1.5;}
  .toast{position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
    background:var(--teal); color:#F7EFDC; font-weight:600; padding:10px 20px; border-radius:999px;
    font-size:.85rem; opacity:0; pointer-events:none; transition:opacity .25s; z-index:50;}
  .toast.on{opacity:1;}
  .bars{display:flex; gap:5px; align-items:flex-end; height:70px; margin-top:6px;}
  .bar{flex:1; background:rgba(107,74,43,.2); border-radius:5px 5px 0 0; position:relative; min-height:3px;}
  .bar.fill{background:var(--teal);}
  .bar .bl{position:absolute; bottom:-18px; left:0; right:0; text-align:center;
    font-family:'IBM Plex Mono',monospace; font-size:.6rem; color:var(--muted);}
  .agenda{list-style:none;}
  .agenda li{display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px solid rgba(107,74,43,.3);}
  .agenda li:last-child{border-bottom:none;}
  .ag-time{font-size:.72rem; color:var(--muted); min-width:92px; flex:0 0 auto;}
  .ag-bar{width:3px; align-self:stretch; border-radius:2px; flex:0 0 auto; min-height:22px;}
  .bar-task{background:var(--blue);} .bar-p1{background:var(--amber);} .bar-health{background:var(--teal);}
  .bar-supp{background:var(--danger);} .bar-fixed{background:var(--muted);}
  .ag-label{flex:1; font-size:.88rem; min-width:0; overflow-wrap:anywhere;}
  .ag-now{color:var(--amber); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;}
  .agenda li.nowrow{background:rgba(107,74,43,.08); border-radius:8px;}
  .ag-gap{color:var(--muted); font-size:.7rem; padding:6px;}
  /* --- liquid progress --- */
  .liq-track{position:relative; height:28px; border-radius:999px; background:rgba(10,17,29,.95);
    border:1px solid var(--line); overflow:hidden;}
  .liq-fill{position:absolute; left:0; top:0; bottom:0; border-radius:999px; overflow:hidden;
    background:linear-gradient(90deg,#3F6B2A,#6BA83C,#A4D64E,#6BA83C,#3F6B2A);
    background-size:300% 100%;
    animation:liqFlow 6s linear infinite;
    transition:width .9s cubic-bezier(.22,1,.36,1);
    box-shadow:0 0 18px rgba(107,168,60,.55);}
  @keyframes liqFlow{from{background-position:0% 0;} to{background-position:300% 0;}}
  .bub{position:absolute; bottom:-8px; width:6px; height:6px; border-radius:50%;
    background:rgba(214,240,180,.85); animation:bubUp 3.2s ease-in infinite;}
  .bub.b1{left:8%; animation-delay:0s; width:5px; height:5px;}
  .bub.b2{left:24%; animation-delay:.9s;}
  .bub.b3{left:42%; animation-delay:1.7s; width:4px; height:4px;}
  .bub.b4{left:60%; animation-delay:.4s;}
  .bub.b5{left:75%; animation-delay:2.3s; width:5px; height:5px;}
  .bub.b6{left:90%; animation-delay:1.2s; width:4px; height:4px;}
  @keyframes bubUp{0%{transform:translateY(0) translateX(0); opacity:0;}
    15%{opacity:.85;} 100%{transform:translateY(-32px) translateX(5px); opacity:0;}}
  @media (prefers-reduced-motion: reduce){ .liq-fill,.bub{animation:none;} }
  /* --- interactions & motion --- */
  .card{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
  .card:hover{transform:translateY(-2px); border-color:rgba(107,74,43,.35);
    box-shadow:0 10px 32px rgba(3,8,16,.55), 0 0 0 1px rgba(107,74,43,.07);}
  .tile{transition:transform .22s ease, border-color .22s ease;}
  .tile:hover{transform:translateY(-2px); border-color:rgba(107,74,43,.4);}
  .btn{transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;}
  .btn:hover{transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 4px 18px rgba(107,74,43,.28);}
  .btn:active{transform:translateY(0) scale(.98);}
  nav button:hover{border-color:rgba(107,74,43,.5); color:var(--text);}
  .seg button{transition:all .18s ease;}
  .seg button:hover{border-color:rgba(107,74,43,.5); color:var(--text);}
  .titem{transition:background .2s ease;}
  .titem:hover{background:rgba(107,74,43,.05); border-radius:8px;}
  .del{transition:color .15s ease, transform .15s ease;}
  .del:hover{transform:scale(1.18);}
  select,input{transition:border-color .2s ease;}
  select:hover,input:hover{border-color:rgba(107,74,43,.45);}
  .pill{transition:border-color .2s ease, transform .2s ease;}
  .pill:hover{border-color:rgba(107,74,43,.4);}
  section.show .card{animation:fadeUp .35s ease both;}
  section.show .card:nth-child(2){animation-delay:.05s;}
  section.show .card:nth-child(3){animation-delay:.1s;}
  section.show .card:nth-child(4){animation-delay:.15s;}
  section.show .card:nth-child(5){animation-delay:.2s;}
  @keyframes fadeUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
  /* completion FX */
  @keyframes rowFlash{0%{background:rgba(92,112,72,.3);} 100%{background:transparent;}}
  .titem.flash{animation:rowFlash .9s ease;}
  .pts-float{position:fixed; z-index:60; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.9rem;
    color:var(--teal); pointer-events:none; animation:ptsUp 1s ease forwards;
    text-shadow:0 0 14px rgba(200,155,74,.7);}
  @keyframes ptsUp{from{opacity:1; transform:translateY(0) scale(1);} to{opacity:0; transform:translateY(-48px) scale(1.15);}}
  .spark{position:fixed; width:5px; height:5px; border-radius:50%; z-index:59; pointer-events:none;
    animation:sparkOut .7s ease-out forwards;}
  @keyframes sparkOut{from{opacity:1; transform:translate(0,0) scale(1);} to{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.3);}}
  /* points badge */
  .pts-badge{display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
  .pts-num{font-family:'IBM Plex Mono',ui-monospace,monospace; color:var(--amber); font-size:1.05rem; font-weight:600;}
  .pts-num.pop{animation:ptsPop .45s ease;}
  @keyframes ptsPop{50%{transform:scale(1.3); text-shadow:0 0 16px rgba(107,74,43,.8);}}
  .pts-lvl{font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
  @media (prefers-reduced-motion: reduce){
    .card,.tile,.btn,.titem,.del,.pill{transition:none;}
    section.show .card,.titem.flash,.pts-float,.spark,.pts-num.pop{animation:none;}
    .card:hover,.tile:hover,.btn:hover{transform:none;}
  }
  /* --- Parchment theme --- */
  body{background:
    radial-gradient(1100px 800px at 15% 0%, rgba(120,86,48,.16), transparent 60%),
    radial-gradient(900px 700px at 88% 100%, rgba(120,86,48,.2), transparent 55%),
    linear-gradient(180deg,#F0E3C2 0%, #E9D9B4 50%, #E2D0A6 100%);}
  .card,.tile{background:linear-gradient(170deg,#F5EBD0 0%, #EFE2C2 100%);
    border:1px solid #B69A6E; box-shadow:0 1px 0 #FFF8E4 inset, 0 2px 10px rgba(90,64,32,.15);
    position:relative;}
  .card::after{content:""; position:absolute; inset:4px; border:1px solid rgba(107,74,43,.3);
    border-radius:10px; pointer-events:none;}
  h1{font-family:'Cinzel',serif; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    font-size:1.12rem; color:#4A3218;}
  h1 .lamp{color:#8E3B2E;}
  .card h2{font-family:'Cinzel',serif; font-weight:600; color:#6B4A2B;}
  header{position:relative; padding-bottom:22px;}
  header::after{content:""; position:absolute; left:0; right:0; bottom:10px; height:2px;
    background:linear-gradient(90deg, transparent, #8E6B3F, transparent);}
  .clock{color:#8E3B2E; font-weight:500;}
  .btn{background:linear-gradient(135deg,#6B4A2B,#4A3218); color:#F7EFDC; border:1px solid #3A2712; letter-spacing:.04em;}
  .btn.teal{background:linear-gradient(135deg,#5C7048,#3F5233); color:#F7EFDC;}
  .btn.ghost{background:transparent; color:#6B4A2B; border:1px solid #B69A6E;}
  nav button{background:#EFE2C2; border-color:#B69A6E;}
  nav button.active{background:linear-gradient(135deg,#6B4A2B,#4A3218); color:#F7EFDC; border-color:#3A2712;}
  .seg button{background:#EFE2C2; border-color:#B69A6E; color:#7A6248;}
  .seg button.sel{background:linear-gradient(135deg,#8E3B2E,#6B2F26); color:#F7EFDC; border-color:#5A241C;}
  input,select,textarea{background:#F7EFDA; border-color:#B69A6E; color:#3A2A18;}
  .toast{background:#5C7048; color:#F7EFDC;}
  .liq-track{background:#3A2A18; border-color:#6B4A2B;}
  .pts-num{color:#8E3B2E;}
  /* --- character & medals --- */
  @media (max-width:520px){
    .tiles{grid-template-columns:repeat(auto-fit,minmax(102px,1fr)); gap:8px;}
    .card{padding:12px;}
    h1{font-size:1.05rem;}
    .titem .name{font-size:.78rem;}
    .chip{font-size:.6rem;}
    .quest-scene{height:120px;}
  }
  @media (pointer:coarse){
    .playbtn{font-size:1rem; padding:8px 10px;}
    .del{font-size:1.05rem; padding:8px;}
    select, input[type=text], input[type=number], input[type=date], .btn{min-height:40px;}
  }
  #pepBench svg{width:100%; height:auto; display:block; max-height:190px; margin:0 auto;}
  .liqGrp{transition:transform 1.15s cubic-bezier(.25,1.25,.4,1);}
  @keyframes waveMove{0%{transform:translateX(0);}100%{transform:translateX(-52px);}}
  .wave{animation:waveMove 2.4s linear infinite;}
  .wave.w2{animation-duration:3.1s; animation-direction:reverse; opacity:.45;}
  .tubeG .bub{opacity:0;}
  .tubeG.filled .bub{animation:bubRise 2.6s ease-in infinite;}
  .tubeG.filled .bub.b2{animation-delay:.9s;}
  .tubeG.filled .bub.b3{animation-delay:1.7s;}
  @keyframes bubRise{0%{transform:translateY(0); opacity:0;}18%{opacity:.85;}100%{transform:translateY(-64px); opacity:0;}}
  .tubeG.filled .glassrim{stroke:#5C7048;}
  @media (prefers-reduced-motion: reduce){ .wave,.tubeG.filled .bub{animation:none;} }
  .pkDone .name{text-decoration:line-through; opacity:.55;}
  .pkbarO{height:8px; background:rgba(107,74,43,.18); border-radius:6px; margin:8px 0 4px; overflow:hidden;}
  .pkbarI{height:8px; background:#5C7048; border-radius:6px; transition:width .5s ease;}
  .pepdue{position:relative;}
  .pepdue.pdone{background:rgba(92,112,72,.12); opacity:.55; border-radius:8px;}
  .pepdue.pdone b{color:#5C7048; text-decoration:line-through; text-decoration-thickness:1px;}
  .pepdue.pdone .chip{opacity:.85;}
  @keyframes plogflash{0%{background:rgba(92,112,72,.38);}100%{background:transparent;}}
  .plogflash{animation:plogflash .8s ease-out;}
  @keyframes plogfloat{0%{opacity:1; transform:translateY(0);}100%{opacity:0; transform:translateY(-28px);}}
  .plogfloat{position:absolute; right:70px; top:6px; color:#5C7048; font-weight:bold; font-size:.82rem; animation:plogfloat .7s ease-out forwards; pointer-events:none;}
  .pcalgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:6px;}
  .pcalhead{font-size:.62rem; text-align:center; color:var(--muted); padding:2px 0;}
  .pcell{border:1px solid rgba(107,74,43,.25); border-radius:6px; min-height:46px; padding:3px 5px; font-size:.7rem; cursor:pointer; position:relative; background:rgba(255,255,255,.25);}
  .pcell.blank{border:none; background:none; cursor:default;}
  .pcell.today{outline:2px solid #5C7048;}
  .pcell.sel{background:rgba(92,112,72,.18);}
  .pcell .cnt{position:absolute; bottom:2px; left:5px; color:#5C7048; font-weight:bold; font-size:.66rem;}
  .pcell .nmark{position:absolute; bottom:1px; right:3px; font-size:.6rem;}
  .pdnrow{list-style:none; margin:2px 0 8px;}
  .pdnrow input{width:100%; font-size:.72rem; background:rgba(255,255,255,.4); box-sizing:border-box;}
  .ptog{font-size:.66rem; padding:4px 9px;}
  .ptog.on{color:#5C7048; border-color:#5C7048;}
  .ptog.off{color:var(--muted); opacity:.75;}
  #lockGate{position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at center, rgba(58,42,24,.88), rgba(30,22,12,.96)); backdrop-filter:blur(3px);}
  .lockCard{background:var(--paper, #F1E6CC); border:2px solid rgba(107,74,43,.6); border-radius:14px;
    padding:26px 26px 18px; max-width:320px; width:88%; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.5);}
  .lockCard input{width:100%; box-sizing:border-box; margin-top:8px; text-align:center; font-size:1rem;}
  .lockCard .btn{width:100%; margin-top:10px;}
  @keyframes shakeit{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-7px);}40%,80%{transform:translateX(7px);}}
  .shakeit{animation:shakeit .4s ease;}
  #pepDot{color:#8E3B2E; font-weight:bold; margin-left:2px;}
  .pepdue{display:flex; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px dashed rgba(107,74,43,.25); flex-wrap:wrap;}
  .pepdue:last-child{border-bottom:none;}
  .pepitem{padding:10px 4px; border-bottom:1px dashed rgba(107,74,43,.25);}
  .pepitem:last-child{border-bottom:none;}
  .frzone{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px;}
  .frzone label{font-size:.72rem; display:flex; align-items:center; gap:3px; cursor:pointer;}
  .feelchip{font-size:1rem;}
  .charttip{position:fixed; z-index:80; pointer-events:none; background:#3A2A18; color:#F7EFDC;
    font-family:'IBM Plex Mono',monospace; font-size:.72rem; padding:5px 9px; border-radius:6px;
    box-shadow:0 3px 8px rgba(0,0,0,.35); opacity:0; transition:opacity .12s; max-width:240px;}
  .coin{position:fixed; z-index:65; width:18px; height:18px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #F7E3A0, #D9A93C 70%);
    border:2px solid #8E6B1F; box-shadow:0 0 6px rgba(217,169,60,.75);
    display:flex; align-items:center; justify-content:center;
    font-family:'Cinzel',serif; font-size:.6rem; font-weight:700; color:#6B4A0F;
    pointer-events:none; animation:coinFall .9s cubic-bezier(.3,.1,.6,1) forwards;}
  @keyframes coinFall{0%{opacity:0; transform:translateY(0) rotate(0) scale(.7);}
    12%{opacity:1;} 80%{opacity:1; transform:translateY(var(--fall)) rotate(320deg) scale(1);}
    100%{opacity:0; transform:translateY(var(--fall)) rotate(360deg) scale(.5);}}
  .chest-bounce{animation:chestBounce .55s ease;}
  @keyframes chestBounce{0%,100%{transform:scale(1);} 40%{transform:scale(1.05);} 70%{transform:scale(.98);}}
  @media (prefers-reduced-motion: reduce){ .coin{animation:none; opacity:0;} .chest-bounce{animation:none;} }
  .twinkle{animation:twinkle 1.6s ease-in-out infinite alternate;}
  @keyframes twinkle{from{opacity:.15;} to{opacity:1;}}
  @media (prefers-reduced-motion: reduce){ .twinkle{animation:none;} }
  .medgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
  .statmed{text-align:center;}
  .sm-disc{position:relative; width:64px; height:64px; margin:0 auto; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #FBF3DC, #E8D8B2 78%); border:3px solid;
    box-shadow:inset 0 2px 5px rgba(90,64,32,.25), 0 2px 5px rgba(90,64,32,.3);
    display:flex; align-items:center; justify-content:center;}
  .sm-val{font-family:'Cinzel',serif; font-weight:700; font-size:1.35rem; color:#3A2A18;}
  .sm-gear{position:absolute; top:-7px; right:-9px; background:#6B4A2B; color:#F7EFDC;
    border-radius:999px; font-size:.6rem; padding:2px 6px; border:1px solid #3A2712;}
  .sm-lbl{font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:5px;}
  :root{--cave:url("assets/img/ec5536187d.webp");}
  .quest-scene{position:relative; height:136px; overflow:hidden; border-radius:10px;
    background:linear-gradient(180deg, rgba(8,5,14,.05), rgba(8,5,14,.28)), var(--cave) center 68% / cover no-repeat;
    border:1px solid rgba(70,52,96,.55); box-shadow:inset 0 0 24px rgba(0,0,0,.35);}
  .q-ground{position:absolute; left:0; right:0; bottom:0; height:10px; opacity:.55;
    background:repeating-linear-gradient(90deg, rgba(24,16,34,.85) 0 18px, rgba(74,56,102,.6) 18px 36px);
    animation:groundScroll 1.1s linear infinite;}
  @keyframes groundScroll{from{background-position:0 0;} to{background-position:-36px 0;}}
  .q-hero{position:absolute; left:26px; bottom:10px; width:84px;
    animation:qHeroLoop 3.2s ease-in-out infinite;}
  @keyframes qHeroLoop{0%,100%{transform:translateY(0) translateX(0);}
    8%{transform:translateY(-3px);} 16%{transform:translateY(0);}
    56%{transform:translateX(14px);} 66%{transform:translateX(0);}
    86%{transform:translateY(-3px);} 94%{transform:translateY(0);}}
  .q-mon{position:absolute; right:24px; bottom:10px; animation:qMonLoop 3.2s ease-in-out infinite;}
  @keyframes qMonLoop{0%,36%,100%{transform:translateX(0) rotate(0); filter:none;}
    44%{transform:translateX(-16px);} 50%{transform:translateX(-16px) rotate(-5deg);}
    58%{transform:translateX(0);}
    64%{filter:sepia(1) saturate(5) hue-rotate(-25deg) brightness(1.2); transform:translateX(5px);}
    70%{filter:none; transform:translateX(0);}
    78%{transform:translateX(-4px) rotate(3deg);} 84%{transform:translateX(0);}}
  .q-mon img{transform:perspective(420px) rotateY(-15deg); transform-origin:50% 82%;}
  .bt-mon img{transform:perspective(420px) rotateY(-15deg); transform-origin:50% 82%;}
  .q-claw{position:absolute; right:98px; bottom:68px; opacity:0; animation:qClawLoop 3.2s ease infinite;}
  @keyframes qClawLoop{0%,42%{opacity:0; transform:translate(14px,-6px) scale(.6);}
    47%{opacity:1;} 55%{opacity:0; transform:translate(-14px,8px) scale(1.05);} 100%{opacity:0;}}
  .q-fire{position:absolute; right:80px; bottom:46px; opacity:0; transform-origin:right center;
    animation:qFireLoop 3.2s ease infinite; filter:drop-shadow(0 0 6px rgba(224,123,42,.85));}
  @keyframes qFireLoop{0%,72%{opacity:0; transform:scaleX(.1);}
    78%{opacity:1; transform:scaleX(1);} 88%{opacity:0; transform:scaleX(1.05);} 100%{opacity:0;}}
  .q-slash{position:absolute; right:62px; bottom:64px; opacity:0;
    animation:qSlashLoop 3.2s ease infinite; filter:drop-shadow(0 0 8px rgba(255,248,228,.95));}
  @keyframes qSlashLoop{0%,56%{opacity:0; transform:rotate(-12deg) scale(.6);}
    61%{opacity:1;} 69%{opacity:0; transform:rotate(8deg) scale(1.05);} 100%{opacity:0;}}
  .q-orb{position:absolute; left:100px; bottom:66px; width:14px; height:14px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #D8CBF5, #7A5AC0 70%); opacity:0;
    box-shadow:0 0 12px rgba(122,90,192,.95); animation:qOrbLoop 3.2s ease-in infinite;}
  @keyframes qOrbLoop{0%,14%{opacity:0; transform:translateX(0) scale(.5);}
    18%{opacity:1;} 30%{opacity:1; transform:translateX(118px) scale(1.15);}
    34%{opacity:0; transform:translateX(128px);} 100%{opacity:0;}}
  .qmini{height:96px;}
  .qmini .q-hero{width:58px; left:14px; bottom:10px;}
  .qmini .q-torchwrap{left:62px; bottom:42px; transform:scale(.78);}
  .qmini .q-mon{right:14px; bottom:10px;}
  .qmini .q-claw{right:62px; bottom:38px; transform:scale(.8);}
  .qmini .q-fire{right:50px; bottom:22px; transform:scale(.8); transform-origin:right center;}
  .qmini .q-slash{right:44px; bottom:34px; transform:scale(.8);}
  .qmini .q-orb{left:64px; bottom:40px; animation-name:qOrbLoopS;}
  @keyframes qOrbLoopS{0%,14%{opacity:0; transform:translateX(0) scale(.5);}
    18%{opacity:1;} 30%{opacity:1; transform:translateX(78px) scale(1.1);}
    34%{opacity:0; transform:translateX(86px);} 100%{opacity:0;}}
  .battle-stage.engage .bt-mon{animation:btMonIn .3s ease both, btMonAtk .5s ease .5s, btMonHit .3s linear 1.3s;}
  @keyframes walkBob{from{transform:translateY(0) rotate(-1.3deg);} to{transform:translateY(-4px) rotate(1.3deg);}}
  .q-torchwrap{position:absolute; left:98px; bottom:64px; animation:qHeroLoop 3.2s ease-in-out infinite;}
  .q-stick{position:absolute; left:7px; top:10px; width:4px; height:27px; background:#6B4A2B;
    border-radius:2px; transform:rotate(8deg);}
  .q-flame{position:absolute; left:1px; top:-11px; font-size:18px; transform-origin:50% 90%;
    animation:torchFlick .35s ease-in-out infinite alternate;}
  @keyframes torchFlick{from{transform:scale(1) rotate(-6deg);} to{transform:scale(1.2) rotate(7deg);}}
  .q-glow{position:absolute; left:-26px; top:-34px; width:72px; height:72px; border-radius:50%;
    background:radial-gradient(circle, rgba(242,193,78,.55), rgba(242,193,78,0) 70%);
    animation:glowPulse 1.2s ease-in-out infinite alternate;}
  @keyframes glowPulse{from{opacity:.55; transform:scale(.88);} to{opacity:1; transform:scale(1.12);}}
  @media (prefers-reduced-motion: reduce){
    .q-ground,.q-hero,.q-torchwrap,.q-flame,.q-glow,.q-mon,.q-claw,.q-fire,.q-slash,.q-orb{animation:none; opacity:1;}
  }
  .battle-stage{position:fixed; z-index:64; width:280px; height:150px; pointer-events:none;
    background:linear-gradient(180deg, rgba(8,5,14,.05), rgba(8,5,14,.3)), var(--cave) center 68% / cover no-repeat;
    border-radius:12px; border:1px solid rgba(70,52,96,.55); box-shadow:0 6px 18px rgba(0,0,0,.4);
    overflow:hidden; animation:stageOut .3s ease 2.1s forwards;}
  @keyframes stageOut{to{opacity:0;}}
  .bt-hero{position:absolute; left:0; bottom:0; width:88px;
    animation:btHeroIn .3s ease both, btHeroLunge .35s ease 1.15s;}
  @keyframes btHeroIn{from{opacity:0; transform:translateX(-44px);} to{opacity:1; transform:none;}}
  @keyframes btHeroLunge{0%{transform:translateX(0);} 50%{transform:translateX(16px);} 100%{transform:translateX(0);}}
  .bt-mon{position:absolute; right:6px; bottom:0px;
    animation:btMonIn .3s ease both, btMonAtk .5s ease .5s, btMonHit .3s linear 1.3s, btMonDie .55s ease 1.7s forwards;}
  @keyframes btMonIn{from{opacity:0; transform:translateX(44px);} to{opacity:1; transform:none;}}
  @keyframes btMonAtk{0%,100%{transform:translateX(0);} 50%{transform:translateX(-18px);}}
  @keyframes btMonHit{0%,100%{filter:none;} 50%{filter:sepia(1) saturate(6) hue-rotate(-25deg) brightness(1.25); transform:translateX(5px);}}
  @keyframes btMonDie{to{opacity:0; transform:rotate(100deg) translateY(38px);}}
  .bt-claw{position:absolute; right:80px; bottom:58px; opacity:0; animation:btClaw .4s ease .55s;}
  @keyframes btClaw{0%{opacity:0; transform:translate(16px,-8px) scale(.6);}
    40%{opacity:1;} 100%{opacity:0; transform:translate(-18px,10px) scale(1.1);}}
  .bt-fire{position:absolute; right:64px; bottom:38px; opacity:0; transform-origin:right center;
    animation:btFire .55s ease .85s; filter:drop-shadow(0 0 7px rgba(224,123,42,.85));}
  @keyframes btFire{0%{opacity:0; transform:scaleX(.1);} 35%{opacity:1; transform:scaleX(1);}
    70%{opacity:.85; transform:scaleX(.96);} 100%{opacity:0; transform:scaleX(1.05);}}
  .bt-slash{position:absolute; right:54px; bottom:56px; opacity:0;
    animation:btSlash .35s ease 1.2s; filter:drop-shadow(0 0 8px rgba(255,248,228,.95));}
  @keyframes btSlash{0%{opacity:0; transform:rotate(-12deg) scale(.6);}
    45%{opacity:1;} 100%{opacity:0; transform:rotate(8deg) scale(1.05);}}
  .bt-orb{position:absolute; left:72px; bottom:66px; width:16px; height:16px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #D8CBF5, #7A5AC0 70%); opacity:0;
    box-shadow:0 0 14px rgba(122,90,192,.95), 0 0 26px rgba(122,90,192,.5);
    animation:btOrb .5s ease-in 1.45s;}
  @keyframes btOrb{0%{opacity:0; transform:translateX(0) scale(.5);}
    15%{opacity:1;} 85%{opacity:1;} 100%{opacity:0; transform:translateX(126px) scale(1.25);}}
  @media (prefers-reduced-motion: reduce){ .battle-stage{display:none;} }
  .fightscene{display:inline-flex; align-items:center; gap:4px; position:relative; flex:0 0 auto;}
  .fs-sword{font-size:1rem; display:inline-block; animation:swordSwing .8s ease-in-out infinite;
    transform-origin:70% 70%; color:#4A3218;}
  @keyframes swordSwing{0%,100%{transform:rotate(-24deg);} 50%{transform:rotate(28deg);}}
  .fs-mon{display:inline-block; animation:monShake .5s linear infinite;}
  @keyframes monShake{0%,100%{transform:translateX(0) rotate(0);}
    25%{transform:translateX(-1.5px) rotate(-4deg);} 75%{transform:translateX(1.5px) rotate(4deg);}}
  .fightscene::after{content:""; position:absolute; right:0; top:48%; width:26px; height:2px;
    background:linear-gradient(90deg,transparent,#FFF8E4,transparent); transform:rotate(-30deg);
    animation:slashLoop 1.6s ease-in-out infinite; box-shadow:0 0 6px rgba(255,248,228,.9);}
  @keyframes slashLoop{0%,55%{opacity:0;} 62%{opacity:1;} 78%{opacity:0;} 100%{opacity:0;}}
  .titem.tracking{animation:battleGlow 1.6s ease-in-out infinite;}
  @keyframes battleGlow{0%,100%{box-shadow:0 0 0 rgba(142,59,46,0);} 50%{box-shadow:0 0 14px rgba(142,59,46,.4);}}
  @keyframes burnRow{0%{filter:brightness(1);} 30%{filter:brightness(1.25) sepia(.5);}
    100%{opacity:0; filter:brightness(.35) sepia(1); transform:scaleY(.55);}}
  .titem.burning{animation:burnRow .65s ease forwards; overflow:hidden;}
  .flame{position:fixed; z-index:63; pointer-events:none; font-size:14px;
    animation:flameUp .85s ease-out forwards;}
  @keyframes flameUp{0%{opacity:0; transform:translateY(6px) scale(.6);}
    25%{opacity:1;} 100%{opacity:0; transform:translateY(-36px) scale(1.3);}}
  @media (prefers-reduced-motion: reduce){
    .fs-sword,.fs-mon,.fightscene::after,.titem.tracking,.titem.burning,.flame{animation:none;}
  }
  .kill-pop{position:fixed; z-index:61; pointer-events:none; animation:killAnim 1.15s ease forwards;}
  @keyframes killAnim{0%{transform:scale(.3) rotate(0); opacity:0;}
    18%{transform:scale(1.15); opacity:1;} 35%{transform:scale(1) rotate(-7deg);}
    50%{transform:rotate(7deg);} 70%{transform:rotate(75deg) translateY(10px); opacity:.9;}
    100%{transform:rotate(110deg) translateY(34px); opacity:0;}}
  .kill-slash{position:fixed; z-index:62; width:74px; height:3px; pointer-events:none;
    background:linear-gradient(90deg,transparent,#FFF8E4,transparent);
    box-shadow:0 0 8px rgba(255,248,228,.95);
    animation:slashAnim .5s ease forwards;}
  @keyframes slashAnim{0%{opacity:0; transform:rotate(-35deg) translateX(-32px) scaleX(.3);}
    40%{opacity:1;} 100%{opacity:0; transform:rotate(-35deg) translateX(32px) scaleX(1);}}
  .medal .plq{filter:drop-shadow(0 3px 5px rgba(58,42,24,.45));}
  @media (prefers-reduced-motion: reduce){ .kill-pop,.kill-slash{animation:none; opacity:0;} }
  .medalgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:14px;}
  .medal{text-align:center; position:relative; padding-top:2px;}
  .medal .disc{width:58px; height:58px; border-radius:50%; margin:0 auto 6px; display:flex;
    align-items:center; justify-content:center; font-family:'Cinzel',serif; font-weight:700;
    font-size:1.1rem; border:3px solid; box-shadow:inset 0 2px 6px rgba(0,0,0,.25), 0 2px 6px rgba(90,64,32,.3);}
  .medal.gold .disc{background:radial-gradient(circle at 35% 30%,#F2D98C,#C89B3C 75%); border-color:#8E6B1F; color:#5A430F;}
  .medal.silver .disc{background:radial-gradient(circle at 35% 30%,#F0EDE6,#A8A49C 75%); border-color:#6E6A62; color:#4A4640;}
  .medal.bronze .disc{background:radial-gradient(circle at 35% 30%,#E2B184,#A06B3E 75%); border-color:#6B4326; color:#4A2E18;}
  .medal .mt{font-size:.72rem; line-height:1.25;}
  .medal .md{font-size:.6rem; color:var(--muted); margin-top:2px;}
  .medal .mundo{position:absolute; top:-4px; right:2px; font-size:.8rem;}
  .heroaura{animation:heroPulse 2.6s ease-in-out infinite; transform-origin:center;}
  @keyframes heroPulse{0%,100%{opacity:.45;} 50%{opacity:.9;}}
  .duesel,.estsel{width:auto; flex:0 0 auto; padding:4px 6px; font-size:.66rem; border-radius:999px;
    font-family:'IBM Plex Mono',ui-monospace,monospace;}
  .duesel{max-width:122px;}
  @media (prefers-reduced-motion: reduce){ .heroaura{animation:none;} }