:root{--ink:#e9eef6;--line:rgba(255,255,255,.12)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial;background:#0c0f18;color:var(--ink);overflow-x:hidden}
.poster-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.poster-bg .base{position:absolute;inset:-10% -10% -10% -10%;
  background:
    radial-gradient(1200px 800px at 20% -8%, rgba(180,30,40,.16), transparent 65%),
    radial-gradient(900px 600px at 80% 14%, rgba(120,30,30,.14), transparent 70%),
    radial-gradient(1100px 900px at 50% 115%, rgba(110,160,220,.10), transparent 60%),
    linear-gradient(180deg,#101521,#0a0e18);
  background-repeat:no-repeat;background-attachment:fixed}
.bloom-layer{position:fixed;inset:0;pointer-events:none;z-index:0}
.bloom-layer span{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(32px);mix-blend-mode:screen;opacity:0;animation:bloom 16s ease-in-out infinite}
.bl1{top:-12vh;left:-10vw;background:radial-gradient(closest-side,rgba(200,40,40,.20),transparent 70%);animation-delay:0s}
.bl2{bottom:-14vh;right:-16vw;background:radial-gradient(closest-side,rgba(255,120,90,.16),transparent 70%);animation-delay:6s}
.bl3{top:40vh;right:6vw;background:radial-gradient(closest-side,rgba(110,170,255,.14),transparent 70%);animation-delay:10s}
@keyframes bloom{0%{opacity:0;transform:scale(.85)}35%{opacity:.26;transform:scale(1.02)}55%{opacity:.18;transform:scale(1.08)}100%{opacity:0;transform:scale(1.16)}}
header{position:sticky;top:0;z-index:5;background:rgba(12,14,20,.35);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.head{max-width:1000px;margin:0 auto;padding:calc(8px + env(safe-area-inset-top)) 16px 8px;text-align:center;font:700 18px/1 Oswald,sans-serif;letter-spacing:.08em}
/* Curtain (1.17s) */
.curtain{position:fixed;inset:0;z-index:6;display:grid;grid-template-columns:1fr 1fr;cursor:pointer;touch-action:manipulation}
.curtain>div{background:radial-gradient(120% 140% at 50% 50%,rgba(60,20,20,.95),rgba(20,8,8,.98));box-shadow:inset 0 0 60px rgba(0,0,0,.65);transition:transform 1.17s cubic-bezier(.2,.8,.2,1)}
.curtain.open{pointer-events:none}.curtain.open .l{transform:translateX(-101%)}.curtain.open .r{transform:translateX(101%)}
.container{width:min(1000px,94vw);margin:0 auto;padding:20px 16px calc(28px + env(safe-area-inset-bottom));position:relative;z-index:2;text-align:center}
.rule{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);margin:18px 0}
/* CREDIT */
.credit{display:flex;align-items:center;gap:14px;margin:6px 0 22px}
.credit::before,.credit::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent),repeating-linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.08) 2px,transparent 2px,transparent 6px)}
.cap{font:700 clamp(16px,2.4vw,28px)/1.1 Oswald,sans-serif;letter-spacing:.32em;text-transform:uppercase}
/* TICKETS (stable geometry) */
.tickets{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:6px 0 6px}
.ticket{position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 14px 9px 12px;
  font:700 11px/1 Oswald,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#1a1713;
  background:#f6edd9;border:1px solid #b9a988;border-radius:10px;cursor:pointer;overflow:hidden}
.ticket:before,.ticket:after{content:"";position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#0c0f18;border:1px solid #b9a988;transform:translateY(-50%)}
.ticket:before{left:-8px}.ticket:after{right:-8px}
.ticket .perf{position:absolute;top:0;bottom:0;left:70%;width:1px;background:repeating-linear-gradient(#b9a988 0 4px,transparent 4px 8px)}
.ticket .code{width:20px;height:20px;background:repeating-linear-gradient(90deg,#111 0 1px,#fff 1px 3px,#111 3px 4px);opacity:.45;border-radius:3px}
.ticket.active{background:#ffe7a8}
.ticket:hover{filter:brightness(1.03)}
/* PLAYER */
.screen-wrap{margin-top:10px;position:relative;width:100%}
.screen-frame{position:relative;border-radius:12px;padding:3px;background:transparent;border:1px solid rgba(255,255,255,.05);overflow:hidden}
.screen-frame::before{content:"";position:absolute;inset:-10px;border-radius:18px;pointer-events:none;
  background:
    radial-gradient(64% 100% at 50% 0%, rgba(255,110,75,.24), transparent 70%),
    radial-gradient(60% 60% at 50% 50%, rgba(170,210,255,.16), transparent 70%);
  box-shadow:0 0 52px rgba(180,210,255,.26),0 0 100px rgba(240,170,130,.20),0 0 0 2px rgba(200,220,255,.10) inset;
  filter:saturate(1.04);}
.edge-glow{display:none}
.screen-frame::after{display:none}
.slider{position:relative;border-radius:10px;overflow:hidden;scroll-snap-type:x mandatory;display:flex;gap:0;width:100%;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-y}
.slide{min-width:100%;scroll-snap-align:center;position:relative;background:#0a0e1b}
.slide .thumb{position:relative;aspect-ratio:16/9;background:#0a0e1b center/contain no-repeat}
.slide .thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.30))}
.slide .overlay-play{position:absolute;inset:0;display:grid;place-items:center}
.play-btn{width:72px;height:72px;border-radius:9999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);display:grid;place-items:center;backdrop-filter: blur(1px)}
.player{position:absolute;inset:0;display:none}.player iframe{width:100%;height:100%;border:0}
.arrows{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 8px;pointer-events:none}
.arrow{pointer-events:auto;width:44px;height:44px;border-radius:9999px;display:grid;place-items:center;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.28)}
.arrow svg{width:20px;height:20px;fill:#fff}
.dust{position:absolute;inset:4px;pointer-events:none;mix-blend-mode:screen;z-index:2}
.dust span{position:absolute;width:2px;height:2px;background:rgba(255,255,255,.55);border-radius:2px;filter:blur(.4px);opacity:.0;animation:dust 6s linear infinite}
@keyframes dust{0%{transform:translateY(20%);opacity:0}10%{opacity:.22}60%{opacity:.12}100%{transform:translateY(-40%);opacity:0}}
.under{text-align:center;margin-top:14px;width:100%}.sup{font:700 13px/1 Oswald,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#e9d2a2;opacity:.95;margin-bottom:6px}
.big{font:700 clamp(26px,6vw,88px) Oswald,sans-serif;line-height:.9;letter-spacing:.04em;color:#FFA463;text-transform:uppercase}
.crawl-stage{perspective:900px;width:calc(100% - 10px);margin:12px auto 0;height:min(360px,40vh);overflow:hidden}
.crawl{transform-origin:50% 100%;transform:rotateX(28deg) translateY(8px);padding:0 6px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 85%,transparent);mask-image:linear-gradient(180deg,transparent,#000 10%,#000 85%,transparent)}
.crawl .tags{font:700 clamp(16px,2.6vw,28px)/1.18 Oswald,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#e9d2a2;text-align:center;margin-bottom:10px}
.crawl .credits .line, .crawl .about .line{font:700 clamp(14px,2.2vw,24px)/1.35 Oswald,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#e8ecf5}
#contact{margin:22px 0 60px;width:100%}
.contact{background:rgba(12,13,18,.62);border-radius:18px;border:1px solid rgba(255,255,255,.10);position:relative;overflow:hidden;width:min(700px,100%);margin:0 auto}
.contact::before{content:'';position:absolute;inset:-2px;border-radius:20px;background:linear-gradient(90deg,rgba(216,168,78,.35),rgba(150,190,230,.28));filter:blur(14px);opacity:.35;z-index:0}
.contact .inner{position:relative;z-index:1;padding:16px}
.contact h2{font:700 28px Oswald,sans-serif;margin:0 0 6px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field{width:100%;padding:12px 13px;background:rgba(21,28,46,.30);border:1px solid rgba(255,255,255,.14);border-radius:10px;color:var(--ink)}
.form textarea{grid-column:1/-1}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;font:700 14px Oswald,sans-serif;letter-spacing:.08em;text-decoration:none;background:linear-gradient(90deg,#c9c9c9,#9f9f9f);color:#121316;border:none;justify-self:center}
.btn:hover{box-shadow:0 0 26px rgba(111,170,208,.18),0 0 26px rgba(211,171,104,.16)}
footer{margin:14px 0 34px;text-align:center;color:#b6b9b0;font:400 12px/1.4 Inter,sans-serif}
/* Mobile tweaks (no geometry change for ticket notches/perf) */
@media (max-width:600px){
  .container{width:min(1000px,96vw);padding:16px 12px calc(20px + env(safe-area-inset-bottom))}
  .credit{gap:10px;margin:6px 0 16px}
  .cap{letter-spacing:.26em}
  .tickets{gap:8px}
  .ticket{padding:8px 12px 8px 11px;font-size:10.5px}
  .screen-frame{border-radius:10px;padding:3px}
  .slider{border-radius:8px}
  .play-btn{width:60px;height:60px}
  .arrow{width:36px;height:36px}
  .big{font-size:clamp(26px,8.2vw,72px)}
  .crawl-stage{height:min(280px,34vh)}
  .crawl .tags{letter-spacing:.24em}
  .form{grid-template-columns:1fr}
  .bloom-layer span{filter:blur(26px)}
  .dust{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bloom-layer span{animation:none;opacity:.10}
  .dust{display:none}
  .curtain>div{transition-duration:0.6s}
}

/* ===== CV link tuning (underline + spacing + gold) ===== */
.head .cv-link{
  color:#e9d2a2;            /* same gold as credits */
  margin-left:12px;         /* a little more spacing */
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  border-bottom:none;
}
.head .cv-link::before{ margin-right:8px; }
.head .cv-link:hover{ text-shadow:0 0 14px rgba(233,210,162,.25); filter:none; }


/* === Mini‑Game (Cinema seats) === */
.popcorn-btn{
  position:fixed; right:16px; bottom:18px; z-index:7;
  width:54px; height:54px; border-radius:999px; border:1px solid rgba(255,255,255,.22);
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,190,120,.35), rgba(255,140,90,.18)) , rgba(12,14,20,.55);
  box-shadow:0 8px 28px rgba(0,0,0,.35), 0 0 30px rgba(255,160,110,.18);
  display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(4px);
}
.popcorn-btn svg{width:30px;height:30px; filter:drop-shadow(0 0 6px rgba(255,230,160,.26));}
.popcorn-btn:hover{box-shadow:0 10px 36px rgba(0,0,0,.45), 0 0 36px rgba(255,160,110,.26)}

.game-modal{position:fixed; inset:0; z-index:8; display:none; place-items:center;
  background:rgba(6,8,12,.6); backdrop-filter:blur(6px);}
.game-modal.open{display:grid}
.game-card{
  width:min(900px,92vw); background:rgba(12,13,18,.78);
  border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:16px 16px 18px;
  box-shadow:0 18px 70px rgba(0,0,0,.5);
}
.game-head{display:flex; align-items:center; gap:10px; font:700 20px Oswald,sans-serif; letter-spacing:.08em;}
.game-head .sub{font:700 12px Oswald,sans-serif; opacity:.8}
.game-close{margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,.25); color:var(--ink);
  width:32px; height:32px; border-radius:10px; cursor:pointer}
.game-ui{display:flex; align-items:center; gap:14px; margin:10px 0 12px}
.game-ui .stat{font:600 13px/1.2 Inter,system-ui; color:rgba(255,255,255,.9)}
.game-ui .grow{flex:1}
.btn-ghost.small{padding:8px 12px; border-radius:10px; background:transparent; color:#e9d2a2;
  border:1px solid rgba(233,210,162,.45); cursor:pointer}
.btn-ghost.small:hover{box-shadow:0 0 20px rgba(233,210,162,.2)}

.seats{display:grid; grid-template-columns:repeat(8,1fr); gap:8px; padding:8px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); border-radius:12px;}
.seat{aspect-ratio:5/4; border-radius:8px; border:1px solid rgba(255,255,255,.14); background:rgba(20,26,42,.5);
  cursor:pointer; position:relative}
.seat::after{content:""; position:absolute; inset:0; border-radius:8px; box-shadow:inset 0 6px 16px rgba(0,0,0,.35)}
.seat.selected{outline:2px solid #7acbff; box-shadow:0 0 16px rgba(120,180,255,.25)}
.seat.taken{background:rgba(140,150,160,.25); border-color:rgba(220,220,220,.25); cursor:not-allowed}
.seat.correct{background:rgba(105,210,140,.35); border-color:rgba(105,210,140,.8);}
.seat.wrong{animation:shake .25s}
@keyframes shake{10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-3px)} 40%,60%{transform:translateX(3px)}}
.hint{font:400 12px/1.5 Inter,system-ui; opacity:.75; margin:10px 4px 0; text-align:center}
@media (max-width:600px){ .popcorn-btn{right:12px; bottom:14px} .game-card{padding:12px} .seats{gap:6px} }