.intro{display:none}html.play-intro body{overflow:hidden}html.play-intro .intro{--dw: clamp(104px, min(28vw, 26vh), 230px);--dh: calc(var(--dw) * 1.78);--trim: calc(var(--dw) * .07);--transom: calc(var(--dw) * .26);--wall-w: calc(var(--dw) * 2.7);--wall-h: calc(var(--dh) + var(--transom) + var(--trim) * 2 + var(--dw) * .3);--roof-h: calc(var(--dw) * .95);position:fixed;inset:0;z-index:1000;display:grid;place-items:center;align-content:center;gap:28px;overflow:hidden;cursor:pointer;background:radial-gradient(ellipse 60% 50% at 50% 42%,rgb(255 156 0 / .16),transparent 70%),linear-gradient(180deg,#120d0a,#1c1512 60%,#241a15);animation:intro-out .45s ease 3.3s forwards}.intro.intro-leaving{animation:intro-out .35s ease forwards!important}.intro-house{position:relative;display:flex;flex-direction:column;align-items:center;transform-origin:50% calc(var(--roof-h) + var(--wall-h) - var(--dh) / 2);animation:intro-rise .7s cubic-bezier(.2,.7,.2,1) both,intro-zoom .85s cubic-bezier(.7,0,.84,0) 2.65s forwards}.intro-roof{width:calc(var(--wall-w) + var(--dw) * .5);height:var(--roof-h);margin-bottom:-1px;background:linear-gradient(90deg,#ff9c00 0% 50%,#e34800 50% 100%);clip-path:polygon(50% 0,100% 100%,0 100%)}.intro-wall{position:relative;width:var(--wall-w);height:var(--wall-h);display:flex;align-items:flex-end;justify-content:center;background:repeating-linear-gradient(180deg,transparent 0 calc(var(--dw) * .16 - 1px),rgb(0 0 0 / .18) calc(var(--dw) * .16 - 1px) calc(var(--dw) * .16)),#3a2c24;box-shadow:inset 0 18px 30px -18px #0009}.intro-lamp{position:absolute;left:calc(50% - var(--dw) / 2 - var(--dw) * .38);top:calc(var(--wall-h) - var(--dh) - var(--transom) + var(--dw) * .05);width:calc(var(--dw) * .12);height:calc(var(--dw) * .2);border-radius:40% 40% 20% 20%;background:#ffd27a;box-shadow:0 0 calc(var(--dw) * .25) calc(var(--dw) * .08) #ffb43c8c,0 0 calc(var(--dw) * .9) calc(var(--dw) * .2) #ff9c0033;animation:intro-flicker 2.4s ease-in-out infinite}.intro-frame{padding:var(--trim) var(--trim) 0;background:#f4ebe0;border-radius:6px 6px 0 0;box-shadow:0 0 0 2px #00000040}.intro-transom{width:var(--dw);height:var(--transom);margin-bottom:var(--trim);border-radius:var(--dw) var(--dw) 4px 4px / calc(var(--transom) * 2) calc(var(--transom) * 2) 4px 4px;background:linear-gradient(90deg,transparent 32%,#f4ebe0 32% 34%,transparent 34% 66%,#f4ebe0 66% 68%,transparent 68%),radial-gradient(ellipse at 50% 100%,#ffe2a8,#ffb340 70%);animation:intro-glow 1.2s ease 1s both}.intro-doorway{position:relative;width:var(--dw);height:var(--dh);overflow:hidden;perspective:calc(var(--dw) * 5);background:#fffaf4}.intro-inside{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;padding-left:14%;background:radial-gradient(ellipse at 50% 40%,#fff3df,#fffaf4 65%);text-align:center}.intro-inside img{width:52%;height:auto;opacity:0;animation:intro-text .6s ease 1.35s forwards,intro-fade .3s ease 2.6s forwards}.intro-welcome{margin:0;font-family:var(--font-display);font-size:calc(var(--dw) * .19);font-weight:600;line-height:1.02;color:var(--ink);opacity:0;animation:intro-text .7s ease 1.55s forwards,intro-fade .3s ease 2.6s forwards}.intro-welcome em{color:var(--orange-deep)}.intro-door{position:absolute;inset:0;display:grid;grid-template-rows:30% 1fr;gap:7%;padding:10% 11% 12%;background:linear-gradient(90deg,#c84300,#b93a00 60%,#a63300);transform-origin:left center;box-shadow:inset 0 0 0 2px #00000026;animation:intro-open 1.25s cubic-bezier(.55,.05,.25,1) .85s forwards}.intro-lites{display:grid;grid-template-columns:repeat(3,1fr);gap:6%}.intro-lites i{border-radius:3px;background:linear-gradient(160deg,#ffe7b8,#ffb84a);box-shadow:inset 0 0 0 2px #0000001f}.intro-panels{display:grid;grid-template-columns:1fr 1fr;gap:10%}.intro-panels i{border-radius:3px;box-shadow:inset 2px 2px #0003,inset -2px -2px #ffffff1f}.intro-handle{position:absolute;right:10%;top:54%;width:18%;height:calc(var(--dw) * .035);border-radius:99px;background:linear-gradient(180deg,#ffe3a3,#c9922e);transform-origin:85% 50%;box-shadow:0 1px 2px #0006;animation:intro-turn .4s ease-in-out .45s both}.intro-step{width:calc(var(--dw) * 1.6);height:calc(var(--dw) * .09);background:#57463b;border-radius:0 0 4px 4px;box-shadow:0 10px 30px #00000073}.intro-caption{margin:0;font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);opacity:0;animation:intro-text .7s ease .35s forwards,intro-fade .3s ease 2.55s forwards}.intro-caption span{color:#d9cdc2}.intro-skip{position:absolute;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));padding:8px 16px;border:1px solid rgb(255 255 255 / .25);border-radius:99px;background:transparent;color:#d9cdc2;font:600 .82rem var(--font-body);cursor:pointer}.intro-skip:hover{color:#fff;border-color:#fff}@keyframes intro-rise{0%{opacity:0;transform:translateY(24px) scale(.96)}}@keyframes intro-turn{50%{transform:rotate(28deg)}}@keyframes intro-open{to{transform:rotateY(88deg);filter:brightness(.55)}}@keyframes intro-glow{0%{filter:brightness(.7)}}@keyframes intro-text{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes intro-fade{0%{opacity:1}to{opacity:0}}@keyframes intro-zoom{to{transform:scale(14)}}@keyframes intro-flicker{50%{opacity:.85}}@keyframes intro-out{to{opacity:0;visibility:hidden}}