*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0B080E;overflow:hidden;overscroll-behavior:none}
body{font-family:'Schibsted Grotesk',system-ui,sans-serif;color:#F7F1F6;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:#D9B8F0}
a:hover{color:#F7F1F6}
input::placeholder{color:#8C7F94}
:focus-visible{outline:2px solid #A874D6;outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;opacity:0}

.root{position:fixed;inset:0;overflow:hidden;background:#0B080E;touch-action:none;user-select:none;-webkit-user-select:none}
.scene{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(.5);transform-origin:50% 50%}
.hall{position:absolute;left:0;top:0;width:1920px;height:1080px}
.anchor{position:absolute;left:960px;top:454px;width:0;height:0;pointer-events:none}
.cam{position:absolute;left:0;top:0;width:0;height:0}

.portal{position:absolute;left:-800px;top:-450px;width:1600px;height:900px;transform-origin:50% 50%;border:4px solid rgba(247,241,246,.3);display:flex;flex-direction:column;justify-content:space-between;padding:36px 44px;opacity:.3;pointer-events:none}
.portal[data-portal="0"]{z-index:10;opacity:1}
.portal[data-portal="1"]{z-index:9}
.portal[data-portal="2"]{z-index:8}
.portal[data-portal="3"]{z-index:7}
.glow{position:absolute;inset:-4px;border:4px solid #A874D6;box-shadow:0 0 70px rgba(168,116,214,.45),inset 0 0 70px rgba(168,116,214,.28);opacity:0;pointer-events:none}
.portal[data-portal="0"] .glow{opacity:1}
.ptop{display:flex;justify-content:space-between;font-size:24px;letter-spacing:.3em;color:rgba(247,241,246,.55)}
.pfoot{height:24px}
.ptxt{opacity:0}
.portal[data-portal="0"] .ptxt{opacity:1}
.stack{display:flex;flex-direction:column;align-items:center;text-align:center}
.ptitle{margin:0;font-weight:900;line-height:.86;letter-spacing:-.045em;text-align:center;text-shadow:0 0 40px rgba(168,116,214,.35)}
.pbr{display:none}
.t-home{font-size:220px}
.s-games{gap:56px}
.t-games{font-size:240px}
.game-list{margin:0;padding:0;list-style:none;display:flex;gap:28px;align-items:center;font-weight:700;font-size:46px;letter-spacing:-.01em;white-space:nowrap}
.game-list .dot{width:10px;height:10px;border-radius:50%;background:#A874D6}
.s-philo{gap:40px}
.t-philo{font-size:200px}
.philo-text{margin:0;max-width:1100px;font-weight:500;font-size:44px;line-height:1.3;color:#E8DCE6;text-wrap:pretty}
.s-follow{gap:48px}
.t-follow{font-size:240px}
.follow-form{display:flex;gap:18px;align-items:center;pointer-events:none}
.root.at-3 .follow-form,.root.at-3 .follow-mail{pointer-events:auto}
.follow-input{width:680px;height:96px;padding:0 40px;border-radius:999px;border:3px solid rgba(247,241,246,.35);background:rgba(11,8,14,.6);font-size:36px;outline:none;user-select:text;-webkit-user-select:text}
.follow-input:focus{border-color:#A874D6}
.follow-submit{height:96px;padding:0 52px;border-radius:999px;border:0;background:#F7F1F6;color:#0B080E;font-size:36px;font-weight:700;cursor:pointer}
.follow-submit:hover{background:#A874D6;color:#fff}
.follow-submit:disabled{opacity:.6;cursor:default}
.follow-status{margin:-24px 0 0;min-height:44px;font-weight:500;font-size:32px;color:#E8B4C8}
.follow-status:empty{display:none}
.follow-thanks{margin:0;font-weight:700;font-size:48px;color:#D9B8F0}
.follow-mail{display:inline-flex;align-items:center;height:96px;padding:0 52px;border-radius:999px;background:#F7F1F6;color:#0B080E;font-size:36px;font-weight:700;text-decoration:none;pointer-events:none}
.follow-mail:hover{background:#A874D6;color:#fff}

.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 80% at 50% 44%,rgba(0,0,0,0) 45%,rgba(0,0,0,.75))}

.brand{position:absolute;top:clamp(20px,4vh,40px);left:clamp(20px,3.4vw,64px);display:flex;align-items:center;gap:12px;color:#F7F1F6;text-decoration:none}
.brand:hover{color:#F7F1F6}
.brand-logo{width:clamp(44px,3.4vw,64px);height:clamp(44px,3.4vw,64px);display:block;margin:-6px -4px -6px -8px}
.brand-text{display:flex;flex-direction:column;gap:3px}
.brand-name{font-weight:900;font-size:clamp(20px,1.6vw,30px);line-height:.9;letter-spacing:-.03em;white-space:nowrap}
.brand-sub{font-weight:700;font-size:clamp(10px,.7vw,13px);line-height:1;letter-spacing:.52em;white-space:nowrap;color:#A874D6}
.follow-btn{position:absolute;top:clamp(18px,3.2vh,32px);right:clamp(20px,2.1vw,40px);height:clamp(40px,4.8vh,52px);padding:0 clamp(16px,1.3vw,24px);white-space:nowrap;border-radius:999px;border:1px solid rgba(247,241,246,.3);background:rgba(11,8,14,.5);font-size:clamp(14px,.85vw,16px);font-weight:700;cursor:pointer}
.follow-btn:hover{background:#F7F1F6;color:#0B080E}

.captions{position:absolute;left:0;right:0;bottom:clamp(108px,16vh,170px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 24px;pointer-events:none}
.note{font-size:clamp(16px,1.2vw,23px);line-height:1.4;font-weight:500;text-align:center;color:#D9CCD6;text-shadow:0 2px 10px #000;text-wrap:pretty}
.hint{display:none;font-size:11px;letter-spacing:.28em;color:#6E6275}

.menu{position:absolute;left:0;right:0;bottom:clamp(20px,4vh,44px);display:flex;justify-content:center;gap:clamp(28px,3.2vw,60px)}
.tab{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 2px;border:0;background:none;cursor:pointer}
.tab-num{font-size:12px;letter-spacing:.3em;color:#6E6275}
.tab-label{font-weight:700;font-size:clamp(17px,1.4vw,27px);letter-spacing:-.01em;white-space:nowrap;color:#6E6275;transition:color .3s}
.tab-ul{width:100%;height:2px;background:#A874D6;transform:scaleX(0);transition:transform .4s cubic-bezier(.2,.75,.2,1)}
.tab.is-current .tab-label{color:#F7F1F6}
.tab.is-current .tab-ul{transform:scaleX(1)}

/* Portrait (phone-shaped) layout — class set by main.js when height > width */
.is-portrait .anchor{left:540px;top:864px}
.is-portrait .portal{left:-500px;top:-750px;width:1000px;height:1500px;border-width:5px;padding:44px}
.is-portrait .glow{inset:-5px;border-width:5px}
.is-portrait .ptop{font-size:30px}
.is-portrait .pfoot{height:30px}
.is-portrait .pbr{display:block}
.is-portrait .t-home{font-size:190px}
.is-portrait .s-games{gap:70px}
.is-portrait .t-games{font-size:230px}
.is-portrait .game-list{flex-direction:column;gap:34px;font-size:66px;line-height:1;white-space:normal}
.is-portrait .game-list .dot{width:12px;height:12px}
.is-portrait .s-philo{gap:56px}
.is-portrait .t-philo{font-size:140px}
.is-portrait .philo-text{max-width:820px;font-size:60px}
.is-portrait .s-follow{gap:60px}
.is-portrait .t-follow{font-size:230px}
.is-portrait .follow-thanks{max-width:820px;font-size:60px;line-height:1.25}
.is-portrait .follow-form{flex-direction:column;gap:28px;align-items:stretch;width:820px}
.is-portrait .follow-input{width:auto;height:130px;padding:0 50px;border-width:4px;font-size:50px}
.is-portrait .follow-submit{height:130px;padding:0;font-size:50px}
.is-portrait .follow-submit:hover{background:#F7F1F6;color:#0B080E}
.is-portrait .follow-submit:active{background:#A874D6;color:#fff}
.is-portrait .follow-status{margin-top:-30px;font-size:44px}
.is-portrait .follow-mail{height:130px;padding:0 60px;font-size:50px}

.is-portrait .brand{top:calc(env(safe-area-inset-top) + 14px);left:16px;gap:8px;min-height:44px}
.is-portrait .brand-logo{width:44px;height:44px;margin:-4px -2px -4px -6px}
.is-portrait .brand-text{gap:2px}
.is-portrait .brand-name{font-size:19px}
.is-portrait .brand-sub{font-size:9px}
.is-portrait .follow-btn{top:calc(env(safe-area-inset-top) + 14px);right:16px;height:44px;padding:0 18px;font-size:14px}
.is-portrait .follow-btn:hover{background:rgba(11,8,14,.5);color:#F7F1F6}
.is-portrait .follow-btn:active{background:#F7F1F6;color:#0B080E}
.is-portrait .captions{bottom:calc(env(safe-area-inset-bottom) + 84px);padding:0 28px}
.is-portrait .note{font-size:15px}
.is-portrait .hint{display:block}
.is-portrait .menu{bottom:0;padding:6px 8px calc(env(safe-area-inset-bottom) + 8px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:linear-gradient(rgba(11,8,14,0),rgba(11,8,14,.92) 40%)}
.is-portrait .tab{min-height:60px;justify-content:center;gap:4px;padding:0 2px}
.is-portrait .tab-ul{order:-1;width:22px;border-radius:2px}
.is-portrait .tab-num{font-size:10px;letter-spacing:.24em}
.is-portrait .tab-label{font-size:14px}

@media (prefers-reduced-motion:reduce){.tab-label,.tab-ul{transition:none}}

.noscript{position:fixed;left:0;right:0;bottom:0;margin:0;padding:16px 24px;background:#0B080E;color:#D9CCD6;font-size:16px;text-align:center}

/* 404 page */
.page-404{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px;text-align:center}
.page-404 h1{margin:0;font-weight:900;font-size:clamp(64px,14vw,180px);line-height:.86;letter-spacing:-.045em;text-shadow:0 0 40px rgba(168,116,214,.35)}
.page-404 p{margin:0;font-size:18px;color:#D9CCD6}
.page-404 a{font-weight:700}