@font-face{font-family:DancingScript;src:url('fonts/DancingScript-Bold.ttf') format('truetype');font-weight:700}
:root{color-scheme:dark;--ink:#13062e;--purple:#4f0e94;--lilac:#ccadff;--pink:#e8098c}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:white;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
#screen{position:relative;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(#4f0e9455,#13062edd),url('assets/Backgrounds/bg_main_nebula.png') center/cover}
header{position:absolute;z-index:4;top:5vh;left:4vw;right:4vw;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;text-shadow:0 2px 12px #13062e}
.brand{font:700 clamp(32px,4vw,76px)/.95 DancingScript,cursive;text-align:center}.brand small{display:block;font-size:.5em;margin-top:.25em}
#progress{text-align:right;font-size:clamp(18px,2vw,36px);font-weight:600;white-space:pre-line}
#table{position:absolute;inset:0;z-index:0;overflow:hidden}
.table-canvas{position:absolute;inset:0;width:100%;height:100%}
.table-card{position:absolute;left:0;top:0;display:none;width:min(19vw,42vh);transform-origin:center;transition:transform .225s ease-in-out;pointer-events:none}
#table.is-shuffling .table-card{display:block;will-change:transform}
#shade{position:absolute;inset:0;z-index:1;background:#13062e99;opacity:0;pointer-events:none;transition:opacity .35s}
#turn{position:absolute;inset:0;z-index:2;display:flex;justify-content:center;align-items:center;transition:opacity .35s;pointer-events:none}
#turn-identity{display:flex;flex-direction:column;align-items:center;gap:3vh;max-width:80vw;padding:2.5vh 2vw;overflow:visible}
#turn-identity.pulse{animation:pulse 2.4s ease-in-out infinite}
.avatar-frame{width:min(36vh,28vw);height:min(36vh,28vw);flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:visible;background:#4f0e94c0;border:1px solid #ffffff30;border-radius:50%;box-shadow:0 7px 12px #13062e80}
#avatar{display:block;width:80%;height:80%;object-fit:contain;flex:0 0 auto}
.nameplate{background:#13062eef;border-radius:24px;padding:2.5vh 3vw;text-align:center;width:fit-content;max-width:68vw;box-shadow:0 5px 18px #0005}.nameplate small{letter-spacing:.3em;font-weight:600;font-size:clamp(16px,2.6vh,30px);color:var(--lilac)}h1{margin:.5vh 0 0;font-size:clamp(40px,9vh,112px);line-height:1.12;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#lift{position:absolute;z-index:3;left:50%;top:50%;height:73vh;aspect-ratio:945/1300;perspective:1500px;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.36) rotate(-12deg)}
#lift.active{will-change:transform,opacity}
#flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(180deg);}
#lift.active #flip{will-change:transform}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px;overflow:hidden;box-shadow:0 15px 28px #0008;background:var(--purple)}
.face img{width:100%;height:100%;object-fit:contain;display:block}.back{transform:rotateY(180deg)}.front.generated{display:flex;flex-direction:column;justify-content:center;text-align:center;gap:2vh;padding:4vh 3vh;background-size:cover;background-position:center;overflow:auto}.generated h2{font-size:clamp(20px,2.1vw,36px);margin:0}.generated p{font-size:clamp(17px,1.8vw,30px);font-weight:600;line-height:1.35;white-space:pre-wrap;margin:0}.generated small{letter-spacing:.25em;color:var(--lilac)}
#idle{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(#4f0e9460,#13062ef0),url('assets/Backgrounds/bg_main_nebula.png') center/cover;gap:4vh;padding:6vw;text-align:center}#idle .brand{font-size:10vw}#idle p{font-size:2vw;color:var(--lilac)}
#results{position:absolute;z-index:4;inset:0;background:#13062ed9;padding:8vh 6vw;text-align:center}#results h2{font-size:5vw;margin:0 0 5vh}.winners{display:flex;justify-content:center;align-items:flex-end;gap:5vw}.winner img{height:20vh;width:20vh;object-fit:contain}.winner:first-child img{height:25vh;width:25vh}.winner h3{font-size:2.5vw;margin:1vh}.winner p{font-size:3vw;margin:0;color:var(--lilac)}#results>p{font-size:2vw;color:var(--lilac)}#status{position:absolute;z-index:6;bottom:3vh;left:4vw;right:4vw;text-align:center;font-size:1.2vw;color:var(--lilac);text-shadow:0 2px 4px #13062e}
#receiver-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;background:#faf1e4;color:#35313a;font-family:system-ui,sans-serif;text-align:center;padding:6vw}
#receiver-loading h1{font-size:5vh;margin:0}#receiver-loading p{font-size:2.8vh;margin:0;color:#707b75}
#caf-media{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
[hidden]{display:none!important}@keyframes pulse{50%{transform:scale(1.065)}}
.preview-controls{position:fixed;z-index:20;bottom:8px;left:8px;display:flex;gap:8px;flex-wrap:wrap;padding:10px;background:#13062eee;border:1px solid #ffffff30;border-radius:12px;font:13px system-ui}.preview-controls button{background:#4f0e94;border:1px solid #ccadff;color:white;padding:7px 12px;border-radius:8px;cursor:pointer}.preview-controls span{align-self:center;color:var(--lilac)}
@media(prefers-reduced-motion:reduce){#turn-identity.pulse{animation:none}.table-card,#turn{transition:none}}