@font-face{font-family:'retro-computer';src:url('fonts/retro-computer.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap}

html,body{background:#0e0e0e;margin:0;padding:0}
#wizard *{box-sizing:border-box;font-family:'retro-computer',monospace}
#wizard video{image-rendering:pixelated;image-rendering:crisp-edges}

.wizard-modal{position:fixed;inset:0;display:none;z-index:9999}
.wizard-modal.is-open{display:grid;place-items:center}
.wizard-backdrop{position:absolute;inset:0}
.wizard-window{position:relative;display:block;padding:0;background:transparent!important}
body.wizard-lock{overflow:hidden}

#wizard .wizard-crt,#wizard .wizard-bezel{background:transparent;box-shadow:none;padding:0;border:0}
#wizard .wizard-scanlines{display:none}
#wizard .wizard-dialog{display:none!important}
#wizard .wizard-exit{display:none!important}

#wizard .wizard-viewport{display:flex;justify-content:center;align-items:center;gap:0;padding:1.5rem 2rem}

#wizard .video-cell{display:block;width:100%;max-width:none;overflow:visible}
#wizard .wiz-stack{position:relative;aspect-ratio:1280/720;width:min(92vw,1400px);height:auto}
#wizard .wiz-frame-chrome{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;image-rendering:pixelated;pointer-events:none;z-index:300}

#wizard .wiz-screen-area{position:absolute;top:var(--screen-top);right:var(--screen-right);bottom:var(--screen-bottom);left:var(--screen-left);overflow:hidden;z-index:1;display:grid}
#wizard .wiz-video{width:100%;height:100%;object-fit:cover;background:#000;display:block}
#wizard #wizard-video{all:unset!important;display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}

#wizard .wiz-parch-inner{position:absolute;top:var(--p-top,62%);right:var(--p-right,10%);bottom:var(--p-bottom,4%);left:var(--p-left,37%);padding:.5rem;display:block;text-align:left;overflow:hidden;font-family:'retro-computer',monospace;font-size:clamp(14px,1.6vw,24px);line-height:1.35;color:#2b1a0e;text-shadow:0 1px 0 rgba(255,255,255,.2)}
#wizard #wiz-text{display:block;white-space:normal;word-break:normal}

#wizard .wiz-input{position:absolute;display:block;z-index:500;top:var(--in-top);right:var(--in-right);bottom:var(--in-bottom);left:var(--in-left)}
#wizard .wiz-input textarea#wiz-input-field{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;background:transparent;border:0;outline:0;resize:none;overflow-y:auto;cursor:url('img/pen.png') 8 0,auto;padding:12px 12px 10px 12px;text-align:left;white-space:pre-wrap;word-break:break-word;font-family:'retro-computer','Press Start 2P',monospace;font-size:clamp(11px,.95vw,16px);line-height:1.2;color:#000;-webkit-text-fill-color:#000;caret-color:#000;z-index:501}
#wizard .wiz-input textarea#wiz-input-field::placeholder{color:rgba(0,0,0,.6);opacity:1}

#wizard.debug-parch .wiz-parch-inner{outline:1px dashed red;background:rgba(255,255,255,.05)}
#wizard.debug-input #wiz-input{outline:2px dashed #00ff66;background:rgba(0,255,100,.06)}

#wizard .wiz-parch{position:absolute;inset:0;width:100%;height:100%;z-index:999;pointer-events:none;background:url('img/Parchment.png') center/100% 100% no-repeat;opacity:0;transition:opacity .15s linear}
#wizard .wiz-parch.show{opacity:1}

.wizard-modal.is-open,.wizard-modal.is-open *{cursor:url('img/hand.png') 8 0,auto}
#wizard:hover,#wizard:hover *{cursor:url('img/hand.png') 8 0,auto}

@media (max-width:1280px){#wizard .wiz-stack{width:95vw;aspect-ratio:1280/720}}

#wizard .wiz-escape{position:absolute;z-index:300;top:-.2%;right:-.5%;width:15%;aspect-ratio:478/214;background:url('img/escape_button.png') center/contain no-repeat;border:0;outline:0;cursor:url('img/hand.png') 8 0,pointer}
#wizard .wiz-escape:hover{transform:translateY(1px)}
#wizard .wiz-escape:active{transform:translateY(2px) scale(.98)}