:root{--paper: #fbf6e0;--ink: #1a2a5e;--margin: #e37070;--ruled: #a8c6dc}*{box-sizing:border-box}body{margin:0;padding:24px 0;background:var(--paper);display:flex;flex-direction:column;align-items:center;gap:12px;font-family:Caveat,Comic Sans MS,cursive,sans-serif;color:var(--ink);min-height:100vh}.title{font-size:36px;margin:0;font-weight:400;letter-spacing:1px}.stage{display:flex;gap:20px;align-items:flex-start}.canvas-wrap{position:relative;width:1200px;height:800px}#game{border:1px solid var(--ink);cursor:crosshair;touch-action:none;display:block}#transition-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;perspective:1400px;overflow:hidden}#transition-overlay:not(.active):not(.fade){display:none}#transition-overlay.active{pointer-events:auto}#transition-overlay.fade{background:var(--paper);animation:overlay-fade .3s linear forwards;pointer-events:auto}@keyframes overlay-fade{0%{opacity:1}to{opacity:0}}.flip-sheet{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--paper);border:1px solid var(--ink);transform-origin:left center;backface-visibility:hidden;box-shadow:2px 0 4px #1a2a5e14;transform:rotateY(0)}@keyframes page-flip{0%{transform:rotateY(0)}to{transform:rotateY(-180deg)}}#transition-overlay.active .flip-sheet[data-i="0"]{z-index:4;animation:page-flip .32s cubic-bezier(.55,0,.85,.35) 0ms forwards}#transition-overlay.active .flip-sheet[data-i="1"]{z-index:3;animation:page-flip .24s cubic-bezier(.55,0,.85,.35) .24s forwards}#transition-overlay.active .flip-sheet[data-i="2"]{z-index:2;animation:page-flip .2s cubic-bezier(.55,0,.85,.35) .44s forwards}#transition-overlay.active .flip-sheet[data-i="3"]{z-index:1;animation:page-flip .16s cubic-bezier(.55,0,.85,.35) .64s forwards}#stats{width:180px;padding:8px 12px;border-left:1px dashed var(--ink);color:var(--ink);font-size:22px}#stats h2{margin:0 0 6px;font-size:22px;font-weight:400;font-style:italic;opacity:.7}#stats dl{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px}#stats dt{opacity:.6;font-style:italic}#stats dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}#done-btn{margin-top:12px;width:100%;padding:6px 10px;font-family:inherit;font-size:22px;color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:4px;cursor:pointer}#done-btn:disabled{opacity:.35;cursor:not-allowed}#done-btn:not(:disabled):hover{background:var(--ink);color:var(--paper)}#restart-btn{margin-top:8px;width:100%;padding:4px 10px;font-family:inherit;font-size:16px;color:var(--ink);background:transparent;border:1.2px dashed var(--ink);border-radius:3px;opacity:.7;cursor:pointer}#restart-btn:hover{opacity:1;background:var(--ink);color:var(--paper)}#ink-meter{width:1200px;height:12px;border:1px solid var(--ink);border-radius:2px;overflow:hidden;background:transparent;transition:border-color .12s linear,box-shadow .12s linear}#ink-meter-fill{height:100%;width:100%;background:var(--ink);transition:width 80ms linear,background .12s linear}#ink-meter.empty{border-color:#c13838;box-shadow:0 0 0 2px #c138382e;animation:ink-empty-pulse 1.1s ease-in-out infinite}#ink-meter.empty #ink-meter-fill{background:#c13838}@keyframes ink-empty-pulse{0%,to{box-shadow:0 0 0 2px #c1383826}50%{box-shadow:0 0 0 4px #c1383852}}#prompt{min-height:24px;font-size:22px;font-style:italic;color:var(--ink)}body.in-combat .title,body.in-combat #stats,body.in-combat #restart-btn,body.in-combat #ink-meter,body.in-combat #prompt{display:none}#death-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#fbf6e08c;z-index:10;font-family:Caveat,Comic Sans MS,cursive,sans-serif;color:var(--ink)}#death-overlay[hidden]{display:none}.death-card{background:var(--paper);border:1.5px solid var(--ink);border-radius:4px;padding:22px 36px;text-align:center;box-shadow:3px 3px #1a2a5e1f}.death-title{font-size:34px;margin-bottom:4px}.death-countdown{font-size:20px;font-style:italic;opacity:.65;margin-bottom:14px}.death-actions{display:flex;gap:14px;justify-content:center}.death-actions button{font-family:inherit;font-size:22px;color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:4px;padding:6px 18px;cursor:pointer}.death-actions button:hover,.death-actions button:focus{background:var(--ink);color:var(--paper);outline:none}.death-actions:hover button:focus:not(:hover){background:transparent;color:var(--ink)}#offline-notice{position:fixed;top:14px;left:14px;font-family:Caveat,cursive;font-size:16px;font-style:italic;color:var(--ink);background:#fbf6e0eb;border:1px solid var(--ink);border-radius:4px;padding:6px 12px;opacity:.75;pointer-events:none;z-index:50;white-space:nowrap}