html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#07111f;font-family:Trebuchet MS,Segoe UI,Arial,Helvetica,sans-serif}#game{width:100vw;height:100vh;height:100dvh}canvas{display:block;image-rendering:pixelated}.prologue-ui{position:fixed;z-index:24;overflow:hidden;pointer-events:none;color:#f8f0dc;text-rendering:optimizeLegibility;-webkit-user-select:none;user-select:none}.prologue-dialogue{position:absolute;left:50%;bottom:clamp(18px,4vh,32px);width:min(900px,calc(100% - 72px));box-sizing:border-box;display:grid;grid-template-columns:124px minmax(0,1fr);gap:12px;align-items:end;transform:translate(-50%)}.prologue-dialogue-portrait{width:124px;height:116px;padding:5px;box-sizing:border-box;border:1px solid rgba(240,212,139,.7);border-radius:4px;background:linear-gradient(180deg,#12142be6,#060b1cf0),#060b1cf0;box-shadow:0 22px 54px #0000009e,inset 0 0 0 1px #7ee4ff2e;image-rendering:pixelated;object-fit:contain}.prologue-dialogue-box{min-height:116px;padding:18px 24px 19px;box-sizing:border-box;border:1px solid rgba(240,212,139,.7);border-left:3px solid rgba(157,241,255,.82);border-radius:4px;background:linear-gradient(180deg,#12142be6,#060b1cf0),#060b1cf0;box-shadow:0 22px 54px #0000009e,inset 0 0 0 1px #7ee4ff2e}.prologue-speaker{margin-bottom:9px;color:#9df1ff;font-size:clamp(11px,1.2vw,13px);font-weight:900;letter-spacing:2px;line-height:1;text-transform:uppercase}.prologue-line{max-width:690px;color:#fff9ef;font-size:clamp(15px,1.85vw,19px);font-weight:760;line-height:1.38;letter-spacing:0;overflow-wrap:anywhere;text-shadow:0 2px 0 rgba(0,0,0,.5)}.prologue-prompt,.prologue-skip{color:#f8f0dc94;font-size:10px;font-weight:900;letter-spacing:1px;line-height:1;text-transform:uppercase}.prologue-prompt{margin-top:14px}.prologue-skip{position:absolute;top:16px;right:18px;padding:7px 9px;border:1px solid rgba(240,212,139,.28);border-radius:3px;background:#060b1c7a}.story-ui{position:fixed;z-index:20;pointer-events:none;overflow:hidden;color:#f6ecdc;text-rendering:optimizeLegibility;-webkit-user-select:none;user-select:none}.story-objective{position:absolute;top:14px;left:50%;transform:translate(-50%);min-width:172px;max-width:min(420px,calc(100% - 32px));padding:6px 18px 7px;box-sizing:border-box;border:1px solid rgba(238,204,124,.72);border-radius:2px;background:linear-gradient(180deg,#fff8d6f0,#dcb560e6),#fff1b2eb;color:#233241;box-shadow:0 8px 18px #00000057,inset 0 0 0 1px #ffffff57;font-size:clamp(11px,1.35vw,14px);font-weight:800;line-height:1;letter-spacing:2px;text-align:center;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.story-title-card{position:absolute;top:58px;left:50%;transform:translate(-50%,-12px);width:min(430px,calc(100% - 58px));padding:16px 26px 18px;box-sizing:border-box;border:1px solid rgba(231,194,114,.62);border-radius:3px;background:linear-gradient(180deg,#121921eb,#080f1ae6),#080f1aeb;box-shadow:0 18px 44px #0000008c,inset 0 0 0 1px #7ee4ff29;opacity:0;transition:opacity .32s ease,transform .32s ease}.story-title-card.visible{opacity:1;transform:translate(-50%)}.story-title-kicker{margin-bottom:6px;color:#7ee4ffeb;font-size:10px;font-weight:800;letter-spacing:3px;line-height:1;text-align:center;text-transform:uppercase}.story-title-text{color:#fff1c9;font-size:clamp(21px,3vw,28px);font-weight:900;line-height:1;letter-spacing:2px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 rgba(0,0,0,.62),0 0 18px rgba(126,228,255,.28)}.story-dialogue{position:absolute;left:50%;bottom:18px;width:min(760px,calc(100% - 64px));display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:end;opacity:0;transform:translate(-50%,16px);transition:opacity .18s ease,transform .18s ease}.story-dialogue.visible{opacity:1;transform:translate(-50%)}.story-dialogue-portrait{width:104px;height:104px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 12px 18px rgba(0,0,0,.58))}.story-dialogue-box{position:relative;min-height:98px;padding:14px 20px 16px;box-sizing:border-box;border:1px solid rgba(232,204,140,.62);border-radius:3px;background:linear-gradient(180deg,#0a1f33f0,#031122f2),#031122f2;box-shadow:0 18px 42px #00000094,inset 0 0 0 1px #6fdfff33}.story-dialogue-speaker{margin-bottom:8px;color:#8beaff;font-size:clamp(11px,1.25vw,13px);font-weight:900;letter-spacing:2px;line-height:1;text-transform:uppercase}.story-dialogue-line{max-width:560px;color:#f7fbff;font-size:clamp(16px,2vw,20px);font-weight:750;line-height:1.34;letter-spacing:0;overflow-wrap:anywhere;text-shadow:0 2px 0 rgba(0,0,0,.46)}.story-dialogue-next{position:absolute;right:20px;bottom:10px;color:#f6ecdc85;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.character-sheet-ui{position:fixed;z-index:36;overflow:hidden;pointer-events:auto;color:#f9f2df;text-rendering:optimizeLegibility;-webkit-user-select:none;user-select:none}.character-sheet-panel{position:absolute;top:22px;right:22px;bottom:22px;left:22px;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);box-sizing:border-box;border:1px solid rgba(231,194,114,.72);border-radius:4px;background:linear-gradient(180deg,#141e29f7,#050e1bfa),#050e1bfa;box-shadow:0 26px 70px #000000a3,inset 0 0 0 1px #7ee4ff26}.character-sheet-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px 12px}.character-sheet-title{color:#fff1c9;font-size:clamp(20px,2.4vw,30px);font-weight:900;letter-spacing:1px;line-height:1;text-transform:uppercase}.character-sheet-close,.character-sheet-actions button,.character-sheet-tabs button{border:1px solid rgba(231,194,114,.55);border-radius:3px;background:#fff1be1a;color:#fff3cf;font:inherit;font-size:12px;font-weight:900;letter-spacing:1px;line-height:1;text-transform:uppercase;cursor:pointer}.character-sheet-close{padding:10px 14px}.character-sheet-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-left:auto}.character-sheet-actions button{padding:10px 12px}.character-sheet-actions button.danger{border-color:#ff8e768f;color:#ffd3c8;background:#78262638}.character-sheet-status{padding:0 22px 12px;color:#f9f2dfad;font-size:12px;font-weight:800;letter-spacing:.5px;line-height:1.25;text-transform:uppercase}.character-sheet-tabs{display:flex;gap:8px;padding:0 22px 16px}.character-sheet-tabs button{min-width:106px;padding:10px 12px}.character-sheet-tabs button.active{background:linear-gradient(180deg,#7ee4ff57,#12719052);color:#f7fbff}.character-sheet-body{min-height:0;overflow:auto;padding:0 22px 22px}.character-sheet-character-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.8fr);gap:14px}.character-sheet-hero,.character-sheet-locked,.character-sheet-row{border:1px solid rgba(126,228,255,.2);border-radius:4px;background:#ffffff0e;box-shadow:inset 0 0 0 1px #ffffff0a}.character-sheet-hero{display:grid;grid-template-columns:136px minmax(0,1fr);gap:18px;padding:18px}.character-sheet-portrait{width:136px;height:136px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}.character-sheet-detail h2,.character-sheet-list h2{margin:0 0 10px;color:#8beaff;font-size:18px;font-weight:900;letter-spacing:1px;line-height:1.12;text-transform:uppercase}.character-sheet-level,.character-sheet-note,.character-sheet-row span,.character-sheet-locked span,.character-sheet-empty{color:#f9f2dfc7;font-size:13px;font-weight:700;line-height:1.35}.character-sheet-xp{width:min(340px,100%);height:10px;margin:10px 0 14px;border:1px solid rgba(126,228,255,.35);border-radius:2px;background:#0000005c;overflow:hidden}.character-sheet-xp span{display:block;height:100%;background:linear-gradient(90deg,#7ee4ff,#f6d27a)}.character-sheet-stats{display:grid;grid-template-columns:repeat(4,minmax(58px,1fr));gap:8px;margin:0 0 12px}.character-sheet-stats dt,.character-sheet-stats dd{margin:0}.character-sheet-stats dt{color:#7ee4ffe6;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.character-sheet-stats dd{color:#f9f2df;font-size:18px;font-weight:900}.character-sheet-roster,.character-sheet-list{display:grid;gap:10px}.character-sheet-locked,.character-sheet-row{display:grid;gap:4px;padding:12px 14px}.character-sheet-locked strong,.character-sheet-row strong{color:#fff1c9;font-size:14px;font-weight:900;letter-spacing:.5px}.character-sheet-row.completed{border-color:#77ffad47}.character-sheet-row.completed strong:before{content:"DONE ";color:#77ffad;font-size:10px;letter-spacing:1px}@media(max-width:720px){.prologue-dialogue{bottom:12px;width:min(430px,calc(100% - 22px));grid-template-columns:78px minmax(0,1fr);gap:8px}.prologue-dialogue-portrait{width:78px;height:104px;padding:4px}.prologue-dialogue-box{min-height:104px;padding:14px 16px 16px}.prologue-line{font-size:clamp(14px,3.6vw,17px);line-height:1.32}.prologue-prompt{margin-top:10px}.prologue-skip{top:10px;right:10px;font-size:9px}.story-objective{top:10px;min-width:140px;padding-inline:12px;letter-spacing:1px}.story-title-card{top:44px;width:min(360px,calc(100% - 28px));padding:13px 18px 15px}.story-dialogue{left:50%;width:min(390px,calc(100% - 20px));bottom:12px;grid-template-columns:64px minmax(0,1fr);gap:8px;transform:translate(-50%,16px)}.story-dialogue.visible{transform:translate(-50%)}.story-dialogue-portrait{width:64px;height:78px}.story-dialogue-box{min-height:78px;padding:10px 12px 13px}.story-dialogue-next{right:12px;bottom:7px;font-size:8px}.story-dialogue-speaker{margin-bottom:6px;font-size:10px}.story-dialogue-line{font-size:clamp(13px,3.2vw,16px);line-height:1.26}.character-sheet-panel{top:10px;right:10px;bottom:10px;left:10px}.character-sheet-header{align-items:flex-start;flex-wrap:wrap;padding:14px 14px 10px}.character-sheet-actions{order:3;width:100%;justify-content:stretch}.character-sheet-actions button{flex:1;min-width:0;padding:9px 7px;font-size:10px}.character-sheet-status{padding:0 14px 10px;font-size:10px}.character-sheet-tabs{padding:0 14px 12px;gap:6px}.character-sheet-tabs button{min-width:0;flex:1;padding:9px 8px;font-size:10px}.character-sheet-body{padding:0 14px 14px}.character-sheet-character-grid,.character-sheet-hero{grid-template-columns:1fr}.character-sheet-portrait{width:96px;height:96px}.character-sheet-stats{grid-template-columns:repeat(2,minmax(72px,1fr))}}@media(max-height:560px)and (orientation:landscape){.prologue-dialogue{bottom:8px;width:min(610px,calc(100% - 104px));grid-template-columns:58px minmax(0,1fr);gap:6px}.prologue-dialogue-portrait{width:58px;height:58px;padding:3px}.prologue-dialogue-box{min-height:58px;padding:7px 11px 8px}.prologue-speaker{margin-bottom:4px;font-size:8px;letter-spacing:1.25px}.prologue-line{max-width:none;font-size:clamp(10px,2vh,12px);line-height:1.18}.prologue-prompt{margin-top:5px;font-size:7px}.prologue-skip{top:8px;right:10px;padding:5px 7px;font-size:8px}.story-objective{top:8px;min-width:136px;max-width:min(360px,calc(100% - 28px));padding:5px 12px 6px;font-size:10px;letter-spacing:1px}.story-title-card{top:34px;width:min(340px,calc(100% - 48px));padding:10px 18px 11px}.story-title-kicker{margin-bottom:4px;font-size:8px}.story-title-text{font-size:clamp(17px,4vh,22px)}.story-dialogue{bottom:8px;width:min(650px,calc(100% - 44px));grid-template-columns:58px minmax(0,1fr);gap:8px}.story-dialogue-portrait{width:58px;height:66px}.story-dialogue-box{min-height:66px;padding:9px 13px 12px}.story-dialogue-speaker{margin-bottom:5px;font-size:9px;letter-spacing:1.5px}.story-dialogue-line{max-width:none;font-size:clamp(12px,2.4vh,15px);line-height:1.22}.story-dialogue-next{right:12px;bottom:6px;font-size:8px}}