:root{--parch:#f3e6c8;--ink:#4a3520;--carrot:#e8772e;--gold:#c99a2e}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:radial-gradient(circle at 20% 30%,rgba(140,90,40,.12) 0 8%,transparent 9%),radial-gradient(circle at 85% 75%,rgba(140,90,40,.1) 0 6%,transparent 7%),radial-gradient(ellipse at center,var(--parch) 55%,#d9c49a);color:var(--ink);font-family:'IM Fell English',serif;display:flex;flex-direction:column;overflow:hidden}
header{text-align:center;padding:10px 8px 4px}
h1{font-family:Cinzel,serif;font-weight:900;margin:0;font-size:clamp(18px,3.4vw,34px);letter-spacing:1px}
#sub{margin:2px 0;font-style:italic;opacity:.8;transition:opacity .5s}
#count{font-family:Cinzel;font-size:13px}
main{flex:1;display:flex;min-height:0}
#stage{flex:1;position:relative;min-width:0}
canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
aside{width:300px;border-left:2px dashed var(--ink);padding:10px;overflow:auto;background:rgba(255,248,230,.5)}
#codexHead{font-family:Cinzel;font-weight:900;font-size:16px;cursor:pointer}
#tog{display:none}
#controls{display:flex;gap:6px;margin:8px 0}
button{font-family:'IM Fell English';font-size:15px;background:var(--parch);color:var(--ink);border:2px solid var(--ink);border-radius:3px 8px 4px 9px;padding:5px 9px;cursor:pointer}
button:hover{background:#e8d3a6}
ul{list-style:none;padding:0;margin:0}
li{border-bottom:1px dashed rgba(74,53,32,.4);padding:6px 0;font-size:14px;animation:ink .6s}
li b{color:#8a4a12}li i{font-size:12px;opacity:.7}
.empty{font-style:italic;opacity:.6}
@keyframes ink{from{opacity:0;transform:translateX(-10px)}}
#popup{position:absolute;left:50%;top:14px;transform:translateX(-50%);max-width:min(420px,92%);background:var(--parch);border:2px solid var(--ink);padding:14px 16px;box-shadow:4px 6px 0 rgba(74,53,32,.3);animation:unroll .4s ease-out;transform-origin:top;font-size:17px}
@keyframes unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.pbtns{display:flex;gap:6px;margin-top:10px;justify-content:flex-end}
.hidden{display:none!important}
#hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--parch);padding:6px 12px;border-radius:4px;font-style:italic}
footer{text-align:center;padding:6px;border-top:2px dashed var(--ink);font-size:13px}
footer a{color:#8a4a12}
@media(max-width:720px){main{flex-direction:column}aside{width:100%;max-height:40vh;border-left:0;border-top:2px dashed var(--ink)}aside.closed{max-height:38px;overflow:hidden}#tog{display:inline}}