@font-face{font-family:Acme;src:url('./ui/fonts/Acme-Regular.ttf')}@font-face{font-family:Cinzel;src:url('./ui/fonts/Cinzel.woff2')}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#121014;color:#f3e9dc;overflow:hidden}body{font:16px/1.45 Acme,serif}#canvas{display:block;width:100%;height:100%;outline:0;touch-action:none}[hidden]{display:none!important}
#gate{position:fixed;inset:0;z-index:2;display:grid;place-items:center;overflow:auto;padding:72px 20px 44px;isolation:isolate;background:#121014}
#gate:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-2;background:url('./ui/reino-costeiro.webp') center/cover no-repeat;filter:url('./palette-filters.svg#ash')}
#gate:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 40%,#12101410 20%,#121014a0 100%)}
.entry{position:relative;width:min(468px,100%);text-align:center}.eyebrow{color:#f4ae72;font:700 12px/1.4 Cinzel,serif;letter-spacing:.23em}.brand{font:700 clamp(30px,5vw,46px)/1.08 Cinzel,serif;color:#f3e9dc;text-shadow:0 3px 7px #071013;margin:10px 0}.motto{margin:12px 0 38px;color:#f3e9dc;text-shadow:0 2px 4px #071013;font-size:18px}
.panel{position:relative;margin:0;border:20px solid transparent;isolation:isolate;padding:30px 34px 17px;filter:drop-shadow(0 12px 17px #03090ac7)}
.plaque{position:absolute;top:-43px;left:50%;transform:translateX(-50%);width:192px;height:54px;display:grid;place-items:center;isolation:isolate;font:700 23px Cinzel,serif;text-shadow:1px 2px 2px #071013;margin:0}
.torch{position:absolute;top:26px;width:34px;height:116px;pointer-events:none;background:url('./ui/torch.webp') center/30px 93px no-repeat;image-rendering:pixelated;animation:torch 2.4s ease-in-out infinite alternate}.torch.left{left:-8px}.torch.right{right:-8px;animation-delay:-1s}.torch:before{content:'';position:absolute;left:-24px;top:-1px;width:82px;height:86px;background:radial-gradient(ellipse,#ff9a3c55,transparent 68%);mix-blend-mode:screen}
@keyframes torch{from{filter:brightness(.94)}to{filter:brightness(1.16)}}
.lead{font-size:21px;margin:0 0 4px;text-shadow:0 2px #071013}.mode{font-size:15px;color:#f4ae72;margin:0 0 18px}.entry-button{font:24px/1.15 Acme,serif;color:#f3e9dc;text-shadow:1px 2px 1px #071013;background:transparent;border:10px solid transparent;border-image:url('./ui/primary.webp') 13 fill / 11px / 0 stretch;min-height:58px;width:100%;padding:7px 10px;transition:filter .15s,transform .15s}.entry-button:hover:not(:disabled){filter:brightness(1.18);transform:translateY(-1px)}.entry-button:active:not(:disabled){transform:translateY(1px);filter:brightness(.92)}.entry-button:disabled{filter:saturate(.4);opacity:.75}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #f4ae72;outline-offset:4px}.secondary{border-image-source:url('./ui/secondary.webp');font-size:17px;min-height:44px}
.quiet{font-size:14px;color:#d2c6a6;margin:16px 0 0}.quiet a{color:#f4ae72;text-underline-offset:4px}.entry-footer{font-size:13px;color:#f3e9dc;margin:16px 0 0;text-shadow:0 2px 3px #071013}.entry-footer span{display:inline-block;background:#121014b8;padding:4px 10px;border-radius:3px}
.top-actions{position:fixed;top:16px;left:20px;right:20px;display:flex;justify-content:space-between;gap:12px;z-index:3}.hud{font:15px Acme,serif;color:#f3e9dc;background:#121014cb;border:1px solid #b87d597a;padding:10px 14px;min-height:44px;text-decoration:none;border-radius:3px}.hud:hover{border-color:#f4ae72;background:#25312bee}
#scene-hint{display:none;position:fixed;bottom:28px;left:50%;transform:translateX(-50%);padding:10px 16px;background:#121014cf;color:#f3e9dc;border:1px solid #b87d5966;z-index:3}.is-concealed .entry{visibility:hidden}.is-concealed #scene-hint{display:block}
.controls{font-size:14px;line-height:1.7;color:#f3e9dc;margin-top:15px}.controls summary{min-height:36px;color:#f4ae72}.controls p{margin:4px 0}.controls kbd{font:13px Acme,serif;background:#12101466;padding:1px 4px;border:1px solid #b87d5966}
progress{width:100%;height:9px;accent-color:#f4ae72;margin:14px 0 5px}#notice{font-size:17px;white-space:pre-line;margin:12px 0 0;min-height:24px}.steps{display:flex;justify-content:center;gap:14px;list-style:none;padding:0;color:#b9adb1;font-size:14px}.steps [data-ready=true]{color:#f4ae72}.steps [data-ready=true]:before{content:'✓ '}
#notice:empty,#detail:empty,#hint:empty{display:none}#detail,#hint{font-size:14px;color:#d5ccb8;margin:8px 0;min-height:20px}#recovery{font-size:17px;margin-top:12px}#back{position:fixed;right:14px;bottom:12px;z-index:1;color:#b9adb1;font-size:13px;text-decoration:none;background:#211e26cc;padding:6px 10px;border:1px solid #b87d5966}
@media(max-height:600px){#gate{padding-top:66px;padding-bottom:24px}.motto{margin:7px 0 31px}.brand{font-size:32px}.panel{padding-top:26px}.entry-footer{margin-top:8px}.quiet{margin-top:10px}.controls{margin-top:8px}}
@media(max-width:500px){#gate{padding-inline:10px}.panel{padding-inline:25px}.brand{font-size:34px}.top-actions{left:12px;right:12px}.entry-footer{font-size:12px}.torch.left{left:-13px}.torch.right{right:-13px}}
@media(prefers-reduced-motion:reduce){.torch{animation:none}.entry-button{transition:none}}

.panel:before{content:'';position:absolute;inset:-20px;border:20px solid transparent;border-image:url('./ui/panel.webp') 48 fill / 31px / 0 stretch;filter:url('./palette-filters.svg#material');z-index:-1;pointer-events:none}
.plaque:before{content:'';position:absolute;inset:0;background:url('./ui/plaque.webp') center/100% 100% no-repeat;filter:url('./palette-filters.svg#material');z-index:-1;pointer-events:none}