/* Five stacked gradients allow a true color crossfade without abrupt gradient swaps. */
.poster-showcase{position:relative;isolation:isolate}
.poster-lights{position:absolute;inset:24px -28px -24px;z-index:-1;pointer-events:none;filter:blur(30px)}
.poster-lights i{position:absolute;inset:0;border-radius:40px;opacity:0;transition:opacity 1.25s cubic-bezier(.22,.61,.36,1)}
.poster-lights [data-light="0"]{background:radial-gradient(ellipse at 15% 45%,#28a9ec65,transparent 62%),radial-gradient(ellipse at 85% 70%,#3ac79a55,transparent 60%)}
.poster-lights [data-light="1"]{background:radial-gradient(ellipse at 15% 45%,#2c8dff65,transparent 62%),radial-gradient(ellipse at 85% 65%,#ba5bf35a,transparent 60%)}
.poster-lights [data-light="2"]{background:radial-gradient(ellipse at 20% 45%,#854ce775,transparent 62%),radial-gradient(ellipse at 80% 65%,#bd6bea60,transparent 60%)}
.poster-lights [data-light="3"]{background:radial-gradient(ellipse at 20% 45%,#a8ba6e65,transparent 62%),radial-gradient(ellipse at 80% 65%,#688f5a65,transparent 60%)}
.poster-lights [data-light="8"]{background:radial-gradient(ellipse at 20% 45%,#7da2b865,transparent 62%),radial-gradient(ellipse at 80% 65%,#6987a460,transparent 60%)}
.poster-showcase[data-active-game="0"] [data-light="0"],.poster-showcase[data-active-game="1"] [data-light="1"],.poster-showcase[data-active-game="2"] [data-light="2"],.poster-showcase[data-active-game="3"] [data-light="3"],.poster-showcase[data-active-game="8"] [data-light="8"]{opacity:1}
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.7s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
::view-transition-old(root){animation:journey-out .25s ease both}
::view-transition-new(root){animation:journey-in .55s .15s ease both}
@keyframes journey-out{to{opacity:0}}
@keyframes journey-in{from{opacity:0}to{opacity:1}}
@keyframes detail-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.project-page>section,.project-page>.game-actions{animation:detail-arrive .65s .35s both}
.project-page>section:nth-of-type(2){animation-delay:.46s}
.project-page>section:nth-of-type(3){animation-delay:.56s}
@media(max-width:700px){.poster-lights{inset:15px -10px -12px;filter:blur(20px)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}.poster-lights i{transition:none}.project-page>section,.project-page>.game-actions{animation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* A full-page palette follows the selected game, including its detail panel. */
body{transition:background-color 1.2s ease,color .4s ease}
body[data-active-game="0"]{--bg:#e5f1ed;background-color:#e5f1ed}
body[data-active-game="1"]{--bg:#e3ebfa;background-color:#e3ebfa}
body[data-active-game="2"]{--bg:#eee6f7;background-color:#eee6f7}
body[data-active-game="3"]{--bg:#e8eddf;background-color:#e8eddf}
body[data-active-game="8"]{--bg:#e4eaf0;background-color:#e4eaf0}
body.night[data-active-game="0"]{--bg:#142b2b;background-color:#142b2b}
body.night[data-active-game="1"]{--bg:#142443;background-color:#142443}
body.night[data-active-game="2"]{--bg:#271b38;background-color:#271b38}
body.night[data-active-game="3"]{--bg:#232c1d;background-color:#232c1d}
body.night[data-active-game="8"]{--bg:#202b37;background-color:#202b37}
body.panel-open{overflow:hidden}
button.detail-link{border:0;background:transparent;text-align:left;cursor:pointer;padding:12px 0;font:inherit}
.new-blast-cover{background:#071e46!important}.new-blast-cover img:first-child{width:100%!important;height:100%!important;object-fit:contain!important;position:static!important;transform:none!important;filter:none!important}
#detail{margin:18px 18px 18px auto;width:min(900px,calc(100% - 36px));max-width:900px;height:calc(100dvh - 36px);max-height:calc(100dvh - 36px);padding:28px 40px 45px;border-radius:24px;box-shadow:0 30px 100px #081b3740;overscroll-behavior:contain}
#detail[open]{animation:drawer-enter .55s cubic-bezier(.22,.61,.36,1) both}#detail.closing{animation:drawer-exit .3s ease both}
#detail .close{position:sticky;display:block;margin-left:auto;top:0;right:0;z-index:5;width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px solid var(--line);line-height:1}
#detail h2{font-size:34px;line-height:1.2;margin-top:10px}#detail h3{margin-top:28px}#detail p{font-size:15px;line-height:1.8}.panel-role{color:var(--muted)}
#detail .project-video{width:100%;max-height:58vh;object-fit:contain;background:#07182e;border-radius:16px}#detail .panel-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gallery-poster{display:block;padding:0;border:0;background:transparent;border-radius:14px;overflow:hidden;cursor:zoom-in}.gallery-poster img{display:block;width:100%;height:auto!important;object-fit:contain!important}.gallery-poster.expanded{grid-column:1/-1;cursor:zoom-out}
@keyframes drawer-enter{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}@keyframes drawer-exit{to{opacity:0;transform:translateX(60px)}}
@media(max-width:600px){#detail{margin:8px;width:calc(100% - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);padding:14px 20px 30px;border-radius:18px}#detail h2{font-size:28px}#detail .panel-gallery{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#detail[open],#detail.closing{animation:none!important}}