*{box-sizing:border-box}:root{--bg-1: #0f172a;--bg-2: #071126;--card: #fff;--muted: #9aa4b2;--accent: #60c5a8;--accent-2: #7fc7ff}html,body,#root{height:100%}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;margin:0;padding:0;background:linear-gradient(180deg,var(--bg-1),var(--bg-2));color:#e6eef6}.app{min-height:100vh;display:flex;flex-direction:column}.game-header{display:flex;align-items:center;justify-content:space-between;padding:1.125rem 1.5rem;background:linear-gradient(90deg,#0a6,#06a);color:#022;box-shadow:0 .375rem 1.125rem #02080c40}.title{font-size:1.25rem;font-weight:700}.hud{display:flex;gap:.875rem;align-items:center}.hud-item{font-size:.8125rem;color:#0009}.hud .progress-wrap{display:flex;align-items:center;gap:10px}.progress{width:13.75rem;height:.75rem;background:#ffffff0f;border-radius:999px;overflow:hidden;box-shadow:inset 0 .0625rem #ffffff08}.progress .bar{height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));width:0%;transition:width .4s cubic-bezier(.2,.9,.2,1)}.game-main{display:flex;gap:1.125rem;padding:1.125rem;align-items:stretch;flex:1}.left{flex:0 0 50%}.panel{background:linear-gradient(180deg,#ffffff08,#ffffff03);border:1px solid rgba(255,255,255,.04);padding:.75rem;border-radius:.625rem}.left .panel{height:calc(100vh - 8.75rem);overflow:auto}.sequence{margin-top:.75rem;border-radius:.5rem;padding:.5rem;min-height:7.5rem;background:linear-gradient(180deg,#0000001f,#ffffff05);max-height:50vh;overflow:auto}.palette{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}.cmd-btn{padding:.5rem .625rem;border-radius:.5rem;border:none;background:#ffffff0f;color:var(--card);cursor:pointer;transition:transform .12s,background .12s}.cmd-btn:hover{transform:translateY(-.1875rem);background:#7fc7ff1f}.cmd-btn:active{transform:translateY(0)}.seq-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem;border-radius:.375rem;gap:.625rem}.seq-item+.seq-item{margin-top:.375rem}.seq-item.active{background:linear-gradient(90deg,#7fc7ff1f,#60c5a80f)}.seq-left span{color:var(--muted);margin-right:.5rem}.seq-actions button{margin-left:.375rem;padding:.375rem .5rem;border-radius:.375rem;border:none;background:#ffffff08;color:var(--card);cursor:pointer}.right{flex:0 0 50%}.world-panel{display:flex;flex-direction:column;gap:12px}.world-title{font-weight:600;margin-bottom:6px}.world{background:linear-gradient(180deg,#ffffff05,#0000001f);padding:12px;border-radius:10px;position:relative}.books-viewport{position:relative;overflow:hidden;height:11.25rem;display:flex;align-items:center}.books{display:flex;gap:.75rem;padding:.75rem;transition:transform .25s cubic-bezier(.2,.9,.2,1);position:absolute;left:0;top:50%;transform:translateY(-50%)}.slot{width:4.5rem;height:7rem;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.pos{position:absolute;left:.375rem;top:.375rem;font-size:.6875rem;color:var(--muted);background:#ffffff05;padding:.125rem .375rem;border-radius:.375rem}.slot .book-card{width:4rem;height:4rem;border-radius:.625rem;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem;color:#042;box-shadow:0 .375rem 1.125rem #02080c59;transition:transform .18s,box-shadow .18s}.slot .book-card{background:linear-gradient(180deg,#fff,#f1f5f9);border:.0625rem solid rgba(0,0,0,.06)}.slot.cursor .book-card{transform:translateY(-.5rem) scale(1.08);box-shadow:0 .875rem 2.25rem #02080c80;outline:.1875rem solid rgba(127,199,255,.18)}.slot .book-card:empty{opacity:.25}.books .slot:nth-child(4n) .book-card{background:linear-gradient(180deg,#ffd7a6,#ffefdc)}.books .slot:nth-child(4n+1) .book-card{background:linear-gradient(180deg,#d0f2ff,#eafcff)}.books .slot:nth-child(4n+2) .book-card{background:linear-gradient(180deg,#dff8e6,#f4fff2)}.books .slot:nth-child(4n+3) .book-card{background:linear-gradient(180deg,#f1d7ff,#fbf0ff)}.person-layer{position:absolute;left:0;right:0;top:60%;pointer-events:none;display:flex;align-items:center;justify-content:center}.person{width:7.5rem;height:10rem;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;transform:translateY(.75rem)}.person-head{width:3rem;height:3rem;border-radius:50%;background:linear-gradient(180deg,#fff,#f3f7fb);box-shadow:0 .375rem .875rem #02080c40;border:.125rem solid rgba(0,0,0,.04)}.person-body{width:5.25rem;height:5.25rem;border-radius:1.125rem;margin-top:.5rem;background:linear-gradient(180deg,#7fc7ff,#60c5a8);box-shadow:0 .5rem 1.25rem #02080c47}.held-book{position:absolute;bottom:2.25rem;width:3.5rem;height:3rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-weight:700;color:#042;background:linear-gradient(180deg,#fff,#f7f9fc);box-shadow:0 .625rem 1.625rem #02080c52;transform:translateY(.375rem);transition:transform .18s}.person .held-book:empty{opacity:.25}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0000008c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:all;z-index:9999}.overlay-inner{pointer-events:all;background:#fff;color:#082033;padding:3rem 3.5rem;border-radius:1rem;text-align:center;box-shadow:0 3rem 8rem #02080c99;width:min(80vw,760px);max-width:95vw;transform:scale(1);animation:pop .18s cubic-bezier(.2,.9,.2,1)}.overlay h3{margin:0 0 1rem;font-family:"Press Start 2P",monospace;font-size:1.6rem;color:#082033}.overlay p{margin:0 0 1.25rem;color:#44566a;font-size:1rem}.overlay .btn{padding:.75rem 1rem;font-weight:700}@keyframes pop{0%{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}.controls{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}.btn{padding:8px 12px;border-radius:8px;border:none;background:#ffffff0a;color:var(--card);cursor:pointer}.btn.primary{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#022}.btn.accent{background:linear-gradient(90deg,#ff9a9e,#fecfda);color:#222}.speed-controls{margin-top:8px}.speed-buttons{display:flex;gap:6px;margin-top:6px}.speed-label{margin-top:6px;color:var(--muted)}.status{margin-top:8px;color:var(--muted);font-size:13px}footer{padding:8px 16px;font-size:12px;color:var(--muted)}