:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#061020;color:#fff2ca}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;overflow-x:hidden}
.crossroads{position:relative;height:100svh;overflow:hidden}
.hall-scene{position:absolute;width:max(100vw,177.777778svh);height:max(100svh,56.25vw);left:50%;top:50%;transform:translate(-50%,-50%)}
.hall-art{display:block;width:100%;height:100%;object-fit:cover}
.portal{position:absolute;top:16%;height:69%;width:24%;border-radius:46% 46% 5% 5%;text-decoration:none;color:inherit}
.origins{left:4.5%}.elements{left:38%}.cards{left:71.5%}
.portal span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.portal:focus-visible{outline:2px solid #f8e8ac99;outline-offset:4px}.portal:hover,.portal:focus-visible{background:linear-gradient(180deg,transparent 70%,#d9bb5820);box-shadow:0 0 24px #e8d5a31a}
.crossroads-back{position:fixed;left:max(18px,env(safe-area-inset-left));top:max(18px,env(safe-area-inset-top));z-index:5;display:grid;place-items:center;width:46px;height:46px;border:1px solid #ddc18e77;border-radius:10px;background:#05111aca;color:#fff2ca;text-decoration:none;font:36px Georgia,serif}
.crossroads-back:focus-visible{outline:2px solid #fff2ca}
@media(orientation:portrait){
.crossroads{min-height:100svh;height:auto;padding-top:85px;padding-bottom:80px;overflow:visible}
.hall-scene{position:relative;width:100%;height:auto;left:auto;top:auto;transform:none}
.hall-art{height:auto;aspect-ratio:16/9}
.portals{display:grid;gap:14px;padding:24px}
.portal{position:relative;inset:auto;width:100%;height:auto;min-height:64px;border:1px solid #ddc18e77;border-radius:8px;display:grid;place-items:center;background:#0c2030}
.portal span{position:static;width:auto;height:auto;clip-path:none;font:600 20px Georgia,serif;letter-spacing:.12em}
}