/* CHARANDEX styles — dark, retro, game-like. Change colours in :root. */
:root{--bg:#1e2a44;--panel:#26365c;--line:#3d5080;--text:#ece9ff;--dim:#9aa8cc;--xp:#ffd23f;--ok:#3ddc97;--bad:#ff5d8f;--cy:#5ac8fa;--pu:#9b6bff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;display:flex;min-height:100vh;
background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:24px 24px}
a{color:var(--cy)}small,.dim{color:var(--dim)}
#side{width:230px;flex:none;background:#172138;border-right:3px solid var(--line);padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto}
.logo{font-size:22px;font-weight:900;letter-spacing:3px;margin-bottom:18px}.logo b{color:var(--xp);text-shadow:3px 3px 0 var(--pu)}
#nav a{display:block;padding:9px 12px;margin-bottom:5px;color:var(--dim);text-decoration:none;border:2px solid transparent;border-radius:8px;font-size:12px;letter-spacing:1px}
#nav a:hover{color:var(--text);border-color:var(--line)}#nav a.on{color:#000;background:var(--xp);box-shadow:3px 3px 0 var(--pu)}
.motto{font-size:10px;color:var(--dim);margin-top:24px}
main{flex:1;min-width:0;padding:22px;max-width:1100px}
#top{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-bottom:20px}
h1{margin:0;font-size:30px;letter-spacing:5px;color:var(--xp);text-shadow:4px 4px 0 var(--pu)}#top p{margin:2px 0 0;color:var(--dim);font-size:12px;letter-spacing:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chips div{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:5px 12px;font-size:10px;color:var(--dim);letter-spacing:1px}
.chips b{display:block;font-size:16px;color:var(--text);letter-spacing:0}.chips .st{color:var(--ok);font-size:12px}
.hearts{color:var(--bad)}.hearts em{color:#3a2f55;font-style:normal}
.card{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 5px 0 #05040f}
.card h2,.page{margin:0 0 12px;font-size:13px;letter-spacing:2px;color:var(--cy)}.page{font-size:16px;color:var(--xp)}
.player{border-color:var(--pu)}.grid2,.grid3{display:grid;gap:16px}.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:repeat(3,1fr)}
.big{font-size:22px;font-weight:800;margin:6px 0;color:var(--xp)}.ok{color:var(--ok)}.no{color:var(--bad)}.warn{color:var(--bad);font-weight:700}
.bar{height:12px;background:#172138;border:2px solid var(--line);border-radius:8px;overflow:hidden;margin:6px 0}
.bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--ok) 0 10px,#2bb77c 10px 12px);transition:width .6s ease}
.stats{display:flex;gap:10px;margin:10px 0}.stats div{flex:1;text-align:center;background:#172138;border-radius:8px;padding:6px;font-size:20px;font-weight:800}.stats small{display:block;font-size:10px;font-weight:400}
.row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.entry{padding:10px 0;border-bottom:1px dashed var(--line)}.entry p{margin:4px 0}.entry em{color:var(--ok);font-style:normal}
button,.btn{font:inherit;font-size:12px;font-weight:700;letter-spacing:1px;background:var(--xp);color:#000;border:0;border-radius:8px;padding:9px 14px;cursor:pointer;box-shadow:0 4px 0 #a07f00;text-decoration:none;display:inline-block}
button:active,.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #a07f00}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--cy);outline-offset:2px}
.btns{display:flex;gap:8px;flex-wrap:wrap}.btns .sel{background:var(--ok);box-shadow:0 4px 0 #1b7a54}.danger{background:var(--bad);box-shadow:0 4px 0 #8f2347}.x{background:none;color:var(--bad);box-shadow:none;padding:0 6px}
input,select,textarea{font:inherit;background:#172138;color:var(--text);border:2px solid var(--line);border-radius:8px;padding:8px;min-width:0}
.add,.learn{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.add input,.add select{flex:1 1 150px}.learn input,.learn select,.learn textarea{flex:1 1 100%}
.stack{display:flex;flex-direction:column;gap:10px}.stack label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim)}fieldset{border:2px solid var(--line);border-radius:10px}
.pct{width:70px}.chk{display:block;padding:6px 0}.chk input{margin-right:8px}
.quest.complete{border-color:var(--ok)}.quest.complete h2{color:var(--ok)}
.banner{background:#2a1f00;border:2px solid var(--xp);border-radius:12px;padding:12px;margin-bottom:16px}.banner form{display:flex;gap:8px;margin-top:8px}
.phase{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--dim);margin-bottom:8px;flex-wrap:wrap}
.journey{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.day{position:relative;padding:8px 0;font-size:12px;border-radius:6px;box-shadow:none;background:#172138;color:var(--dim);border:2px solid var(--line);letter-spacing:0}
.day.done{background:var(--ok);color:#00331f;border-color:var(--ok)}.day.failed{background:var(--bad);color:#3a0018;border-color:var(--bad)}
.day.current{border-color:var(--xp);color:var(--xp)}.day.now{animation:pulse 1.6s infinite}.day.locked.p2{border-style:dashed}.day i{position:absolute;top:-6px;right:-3px;color:var(--xp);font-style:normal;font-size:12px}
.legend{font-size:11px;color:var(--dim)}.lg{margin-right:10px}.lg:before{content:"■ "}.lg.done:before{color:var(--ok)}.lg.failed:before{color:var(--bad)}.lg.current:before{color:var(--xp)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.badge{text-align:center;background:#172138;border:2px solid var(--line);border-radius:12px;padding:12px;font-size:12px;opacity:.45}
.badge.on{opacity:1;border-color:var(--xp);animation:pop .5s}.badge b{display:block;font-size:26px}.badge small{display:block}
#toast{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:6px;z-index:30}.toast{background:var(--xp);color:#000;font-weight:800;padding:10px 16px;border-radius:10px;box-shadow:3px 3px 0 var(--pu);animation:pop .3s}
.overlay{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:20;padding:16px}.dialog{background:var(--panel);border:3px solid var(--pu);border-radius:14px;padding:18px;width:min(520px,100%);max-height:90vh;overflow:auto}
#menu{display:none}
@keyframes pulse{50%{box-shadow:0 0 0 4px #ffd23f55}}@keyframes pop{from{transform:scale(.8);opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:800px){body{display:block}#menu{display:block;position:fixed;top:10px;right:10px;z-index:15}
#side{position:fixed;z-index:12;left:0;transform:translateX(-100%);transition:transform .2s}body.open #side{transform:none}main{padding:60px 12px 20px}
.grid2,.grid3{grid-template-columns:1fr}.journey{grid-template-columns:repeat(7,1fr)}h1{font-size:22px}}

/* ---- Codédex-logo look: navy, pixel font, white text with hard black shadow, gold coin ---- */
@font-face{font-family:"Press Start 2P";src:local("Press Start 2P"),url(assets/fonts/PressStart2P-Regular.ttf)} /* offline: drop the .ttf into assets/fonts */
:root{--px:"Press Start 2P",ui-monospace,Menlo,Consolas,monospace}
h1,.logo,.card h2,.page,.big,#nav a,button,.btn,.toast,#top p,.chips b{font-family:var(--px)}
h1{display:flex;align-items:center;gap:14px;font-size:28px;letter-spacing:0;color:#fff;text-shadow:3px 3px 0 #000}
.logo{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:0;color:#fff;text-shadow:2px 2px 0 #000}
.coin{width:30px;height:36px;image-rendering:pixelated;animation:flip 2.4s steps(6) infinite}.logo .coin{width:20px;height:24px}
@keyframes flip{50%{transform:scaleX(.25)}}
#top p{font-size:9px;letter-spacing:1px}.card h2{font-size:10px;line-height:1.6}.page{font-size:12px}.big{font-size:16px}
#nav a{font-size:9px;line-height:1.6}button,.btn{font-size:9px}.day{font-size:8px}.toast{font-size:10px}.chips b{font-size:12px}.chips .st{font-size:9px}
/* pixel world: characters walk on a strip of grass along the bottom */
main{padding-bottom:80px}#toast{bottom:70px}
#stage{position:fixed;left:230px;right:0;bottom:0;height:64px;pointer-events:none;z-index:5;overflow:hidden}
#stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;border-top:4px solid #1b7a54;background:repeating-linear-gradient(90deg,#3ddc97 0 8px,#2bb77c 8px 16px)}
.pw{position:absolute;bottom:12px;left:0}.pw img{display:block;image-rendering:pixelated}.pw img.hop{animation:hop .45s ease-out}
@keyframes hop{40%{transform:translateY(-22px)}}
@media(max-width:800px){#stage{left:0}}