/* Update 6.5: the first screen is only the brand on black. The mark draws itself (the ring traces round, the ball arrives, the orange
   point lights and keeps a slow pulse), the name rises in, a thin lime heartbeat line runs under it, and the prompt appears last,
   quietly breathing. Nothing else on screen. The first key / click still starts the music (title-screen.mjs). */
.title-screen{position:fixed;inset:0;z-index:1000;overflow:hidden;isolation:isolate;background:#000;color:#f4f4ee;font-family:Arial,Helvetica,sans-serif;display:grid;place-items:center;transition:opacity .45s ease,visibility .45s}
.title-screen[hidden]{display:none}.title-active #game{visibility:hidden}.title-screen.leaving{opacity:0;pointer-events:none;visibility:hidden}
.ts-stage{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,26px);transform:translateY(-3vh);transition:transform .6s ease}
.ts-mark{width:clamp(96px,12vw,150px);height:auto;overflow:visible}
.ts-ring{fill:none;stroke:#d4f26a;stroke-width:5.2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:ts-draw 1.1s cubic-bezier(.6,0,.2,1) .15s forwards}
.ts-ball{fill:#d4f26a;transform-origin:31.5px 32.5px;transform:scale(.4);opacity:0;animation:ts-ball .7s cubic-bezier(.2,1.4,.4,1) .55s forwards}
.ts-seam{fill:none;stroke:#000;stroke-width:3;stroke-linecap:round;opacity:0;animation:ts-fade .4s ease 1s forwards}
.ts-dot{fill:#ff8f2e;transform-origin:57.6px 27.5px;transform:scale(0);animation:ts-dot .5s cubic-bezier(.2,1.6,.4,1) 1.15s forwards,ts-beat 2.4s ease-in-out 1.8s infinite}
.ts-word{margin:0;display:flex;flex-direction:column;align-items:center;font-family:"Arial Black","Segoe UI Black",Arial,sans-serif;font-style:italic;font-weight:900;letter-spacing:-.045em;line-height:.9;opacity:0;transform:translateY(10px);animation:ts-rise .8s ease 1s forwards}
.ts-word>span{font-size:clamp(58px,8.6vw,132px);color:#fff}
.ts-word small{margin-top:.28em;font-size:clamp(15px,2vw,30px);letter-spacing:.14em;color:#e9ecdf;font-style:italic}.ts-word small b{color:#ff8f2e}
.ts-pulse{width:clamp(220px,26vw,380px);height:22px;overflow:visible}
.ts-line,.ts-spark{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ts-line{stroke:#d4f26a55;stroke-width:1.6;stroke-dasharray:100;stroke-dashoffset:100;animation:ts-draw 1.3s ease-in-out 1.5s forwards}
.ts-spark{stroke:#d4f26a;stroke-width:2.2;stroke-dasharray:9 91;stroke-dashoffset:9;opacity:0;animation:ts-spark 3.2s linear 3s infinite}
.ts-start{position:absolute;left:50%;bottom:clamp(40px,9vh,90px);transform:translateX(-50%);appearance:none;border:0;background:none;color:#cfd5c4;font:700 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.34em;padding:12px 18px;cursor:pointer;opacity:0;animation:ts-fade .6s ease 2.4s forwards,ts-breathe 2.8s ease-in-out 3s infinite}
.ts-start:focus-visible{outline:1px solid #d4f26a88;outline-offset:4px;border-radius:4px}
.ts-start:disabled{cursor:default}
.starting .ts-stage{transform:translateY(-3vh) scale(1.03)}.starting .ts-start{animation:none;opacity:.9;color:#d4f26a}
@keyframes ts-draw{to{stroke-dashoffset:0}}
@keyframes ts-ball{to{transform:scale(1);opacity:1}}
@keyframes ts-fade{to{opacity:1}}
@keyframes ts-dot{to{transform:scale(1)}}
@keyframes ts-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.45)}24%{transform:scale(1)}36%{transform:scale(1.25)}50%{transform:scale(1)}}
@keyframes ts-rise{to{opacity:1;transform:none}}
@keyframes ts-spark{0%{stroke-dashoffset:9;opacity:0}8%{opacity:1}70%{opacity:1}85%{stroke-dashoffset:-91;opacity:0}100%{stroke-dashoffset:-91;opacity:0}}
@keyframes ts-breathe{0%,100%{opacity:.45}50%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.ts-ring,.ts-ball,.ts-seam,.ts-dot,.ts-word,.ts-line,.ts-start{animation:none!important;opacity:1;transform:none;stroke-dashoffset:0}.ts-spark{display:none}.ts-start{transform:translateX(-50%)}}

/* Update 8.29b: the opening card - black, then "ARTmike presents" (Garamond, white with a silver sheen) comes up slowly - opacity and scale only, run by the compositor, smooth while the game loads behind it - and
   stays while the game loads behind it (index.html), then dissolves; then the title, whose animations wait for it. The heartbeat line is gone:
   a white rectangular loading bar in its place, filled by the real loading (title-screen.mjs) */
@font-face{font-family:'ArtmikeSerif';src:local('Garamond'),local('Cormorant Garamond'),local('EB Garamond'),local('Adobe Garamond Pro'),local('Book Antiqua');font-weight:400}
.ts-intro{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#000;pointer-events:none;transition:opacity .5s ease,visibility .5s}
.title-screen.intro-done .ts-intro{opacity:0;visibility:hidden}
.ts-art{display:flex;flex-direction:column;align-items:center;font-family:'ArtmikeSerif',Garamond,'Cormorant Garamond','Book Antiqua',Georgia,serif;font-weight:400;color:#f4f4f2;opacity:0;transform:scale(1.045);will-change:opacity,transform;transition:opacity 2.4s ease-in-out,transform 4.5s cubic-bezier(.2,.6,.2,1)}
.title-screen.intro-in .ts-art{opacity:1;transform:scale(1)}
.title-screen.intro-out .ts-art{opacity:0;transition:opacity .9s ease}
.ts-art b{font-weight:400;font-size:clamp(60px,9.9vw,210px);line-height:1;letter-spacing:-.012em;background:linear-gradient(100deg,#d9d9d6 0%,#ffffff 38%,#ffffff 46%,#c9c9c6 54%,#f4f4f1 70%,#dcdcd9 100%);background-size:260% 100%;background-position:30% 0;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(255,255,255,.08)}
.ts-art span{margin-top:.42em;font-size:clamp(19px,3vw,64px);line-height:1;letter-spacing:.42em;margin-right:-.42em;color:#ececea}
.title-screen:not(.intro-done) :is(.ts-ring,.ts-ball,.ts-seam,.ts-dot,.ts-word,.ts-load){animation-play-state:paused}
.ts-load{width:clamp(220px,26vw,380px);height:8px;border:1.5px solid #fff;border-radius:2px;padding:1.5px;box-sizing:border-box;opacity:0;animation:ts-fade .5s ease 1.2s forwards}
.ts-load i{display:block;height:100%;width:0;background:#fff;transition:width .25s ease}
.ts-start{animation:none;opacity:0}
.title-screen.loaded.intro-done .ts-start{animation:ts-fade .6s ease .1s forwards,ts-breathe 2.8s ease-in-out .7s infinite}
@media(prefers-reduced-motion:reduce){.ts-load{animation:none;opacity:1}}

/* Update 8.30: no loading bar - the Pulse logo's ring turns round the ball while the game loads, and stops on a whole turn when it is ready
   (title-screen.mjs); under it a quiet "CARICAMENTO", then the usual prompt */
.ts-orbit{transform-box:view-box;transform-origin:31.5px 32.5px}
.title-screen.intro-done .ts-orbit{animation:ts-spin 1.15s cubic-bezier(.45,.05,.55,.95) 1.3s infinite}
@keyframes ts-spin{to{transform:rotate(360deg)}}
.ts-wait{position:absolute;left:50%;bottom:clamp(40px,9vh,90px);transform:translateX(-50%);font:700 11px/1 Arial,Helvetica,sans-serif;letter-spacing:.34em;color:#cfd5c4;opacity:0}
.title-screen.intro-done:not(.loaded) .ts-wait{animation:ts-fade .5s ease 1.4s forwards,ts-breathe 2.2s ease-in-out 1.9s infinite}
.title-screen.loaded .ts-wait{display:none}