*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#02050c;color:#f2fbff;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}
.bg{position:fixed;inset:0;background:url("assets/arcadia-cinematic-bg.jpeg") center top/cover no-repeat;z-index:0}
.bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 35%,rgba(0,0,0,.22) 70%,rgba(0,0,0,.68)),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.30))}
#particles{position:fixed;inset:0;z-index:1;pointer-events:none}
.arcadia{position:relative;z-index:3;min-height:100vh;max-width:1600px;margin:0 auto}
.glass{border:1px solid rgba(119,232,255,.28);background:linear-gradient(180deg,rgba(3,12,25,.78),rgba(2,7,14,.58));box-shadow:0 0 32px rgba(0,190,255,.12),inset 0 0 24px rgba(255,255,255,.04);backdrop-filter:blur(8px);border-radius:18px}
.label{margin:0 0 10px;color:#8cefff;letter-spacing:.14em;font-size:12px}
.compose{position:absolute;left:2.2%;top:31.5%;width:17.5%;padding:14px}
.compose textarea{width:100%;height:145px;border-radius:12px;border:1px solid rgba(140,239,255,.25);background:rgba(0,8,18,.72);color:#fff;padding:11px;resize:none;outline:none}
.compose select,.compose button,.answer button{width:100%;margin-top:10px;border-radius:12px;border:1px solid rgba(255,214,135,.38);background:rgba(4,17,31,.82);color:white;padding:10px}
.compose button,.answer button{cursor:pointer;background:linear-gradient(90deg,#0aa8ff,#9f55ff,#ffc75a);font-weight:800;border:0;box-shadow:0 0 22px rgba(122,91,255,.35)}
.live-layer{position:absolute;inset:0;pointer-events:none}
.bottle{position:absolute;width:11%;left:22%;top:45%;filter:drop-shadow(0 0 24px #82f2ff);transform:translate(-50%,-50%) rotate(-21deg);transition:left 1s cubic-bezier(.2,.9,.2,1),top 1s cubic-bezier(.2,.9,.2,1),transform 1s cubic-bezier(.2,.9,.2,1);z-index:5}
.bottle.travel{animation:bob .7s ease-in-out infinite}
@keyframes bob{50%{margin-top:-10px}}
.portal{position:absolute;width:7.2%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff3bd;font-size:22px;border:1px solid rgba(255,255,255,.25);background:rgba(0,10,22,.4);box-shadow:0 0 18px rgba(0,210,255,.22);transform:translate(-50%,-50%);opacity:.0}
.portal.active{opacity:1;box-shadow:0 0 55px rgba(255,213,123,.75),inset 0 0 35px rgba(255,213,123,.18);border-color:#fff0bd}
.portal.danger{box-shadow:0 0 58px rgba(255,50,50,.7),inset 0 0 35px rgba(255,0,0,.16);border-color:#ff6868}
.p1{left:26%;top:47%}.p2{left:37%;top:38%}.p3{left:45%;top:55%}.p4{left:54%;top:40%}.p5{left:62%;top:50%}.p6{left:70%;top:43%}.p7{left:80%;top:51%}
.answer{position:absolute;right:2%;top:47%;width:16.5%;min-height:190px;padding:14px}
.answer #answer{font-size:14px;line-height:1.45;color:#eafcff}
.memory{position:absolute;left:20.5%;bottom:17%;width:25%;padding:12px}
.memory #memory{max-height:110px;overflow:auto;font-size:13px;color:#dff7ff}
.memo{border-top:1px solid rgba(255,255,255,.12);padding:7px 0}.memo small{color:#ffd98d}
@media(max-width:1000px){.bg{background-size:auto 100%;background-position:center top}.arcadia{min-height:900px}.compose{left:4%;top:28%;width:32%}.answer{right:4%;top:58%;width:32%}.memory{left:4%;bottom:4%;width:92%}.bottle{width:18%}.portal{width:10%}}
@media(max-width:650px){.arcadia{min-height:1050px}.compose,.answer{position:relative;left:auto;right:auto;top:auto;width:auto;margin:18px}.memory{position:relative;left:auto;bottom:auto;width:auto;margin:18px}.bottle{width:120px}.portal{display:none}}