.title-screen.choice:not(.creation):not(.is-loading) { --skill: var(--gold-2); display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0; grid-template-rows: auto minmax(13rem, 1fr) auto auto; justify-items: center; row-gap: 1rem; padding: 3.2vh max(3.5vw, env(safe-area-inset-right)) max(2.6vh, env(safe-area-inset-bottom)) max(3.5vw, env(safe-area-inset-left)); }

.ft-arts { position: fixed; inset: 0; z-index: 0; background: #070b14; }
.ft-art { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease-out); }
.ft-art.is-shown { opacity: 1; }
.ft-art picture { position: absolute; inset: 0; display: block; }
.ft-art .title-art-img { object-position: 50% 42%; }
.ft-shade { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(46% 52% at 50% 46%, rgba(4, 7, 14, 0), rgba(4, 7, 14, .32) 100%),
    linear-gradient(180deg, rgba(4, 7, 14, .74) 0%, rgba(4, 7, 14, .18) 22%, rgba(4, 7, 14, 0) 40%, rgba(4, 7, 14, .3) 58%, rgba(4, 7, 14, .86) 80%, rgba(4, 7, 14, .94) 100%); }
.ft-head, .ft-stage, .ft-cards, .ft-go { position: relative; z-index: 2; }

.ft-head { display: grid; justify-items: center; gap: .45rem; max-width: 46rem; text-align: center; }
.ft-kicker { margin: 0; color: var(--gold-2); font-size: .78rem; text-shadow: 0 1px .4rem #000; }
.ft-title { margin: 0; font-size: clamp(2.1rem, 3.3vw, 3.25rem); line-height: 1.04; color: transparent;
  background: linear-gradient(180deg, #fff8df 0%, #ffe9ad 40%, #f0c46a 72%, #c48e3a 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 .12rem 0 rgba(0, 0, 0, .9)) drop-shadow(0 .4rem 1.1rem rgba(0, 0, 0, .65)); }
.ft-intro { margin: 0; font-size: 1.05rem; line-height: 1.4; color: var(--text-1); text-shadow: 0 1px .5rem #000, 0 0 1.2rem rgba(0, 0, 0, .7); text-wrap: balance; }

.ft-stage { justify-self: stretch; width: 100%; min-height: 0; }
.ft-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(22% 10% at 50% 88%, color-mix(in srgb, var(--skill) 30%, transparent), transparent 75%), radial-gradient(30% 46% at 50% 56%, rgba(255, 220, 170, .07), transparent 70%); transition: background .8s; }
.ft-host { position: absolute; inset: -2% 0 0; min-height: 0; }
.ft-host .cs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.ft-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 1rem; width: 100%; max-width: 78rem; align-items: end; }
.ft-card { --tint: color-mix(in srgb, var(--skill) 55%, var(--gold-3)); position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  border: 1px solid rgba(214, 170, 96, .3); border-radius: .95rem; color: var(--text-1);
  background: linear-gradient(180deg, rgba(20, 29, 48, .9) 0%, rgba(10, 15, 27, .95) 58%, rgba(7, 11, 20, .97) 100%);
  box-shadow: 0 1.1rem 2.4rem rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 238, 200, .07);
  transition: transform .32s var(--ease-out), border-color .25s, box-shadow .3s; }
.ft-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .25s; }
.ft-card:hover, .ft-card.is-shown { border-color: color-mix(in srgb, var(--skill) 60%, rgba(214, 170, 96, .3)); }
.ft-card:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 3px; }
.ft-card.is-picked { transform: translateY(-.55rem); border-color: var(--skill);
  box-shadow: 0 1.4rem 2.8rem rgba(0, 0, 0, .6), 0 0 2.2rem color-mix(in srgb, var(--skill) 38%, transparent), inset 0 1px 0 rgba(255, 238, 200, .1); }
.ft-card.is-picked::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--skill) 70%, transparent); }
.ft-card[disabled] { cursor: default; }
.ft-pic { position: relative; display: block; aspect-ratio: 16 / 8.4; overflow: hidden; }
.ft-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), filter .4s; filter: saturate(.92) brightness(.92); }
.ft-card:hover .ft-pic img, .ft-card.is-shown .ft-pic img, .ft-card.is-picked .ft-pic img { filter: none; transform: scale(1.035); }
.ft-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 11, 20, 0) 45%, rgba(10, 15, 27, .92) 100%); }
.ft-body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; row-gap: .1rem; padding: 0 1.05rem 1.05rem; margin-top: -1.85rem; }
.ft-medal { grid-row: 1 / span 2; align-self: end; filter: drop-shadow(0 .3rem .6rem rgba(0, 0, 0, .7)); }
.ft-medal .medal { --size: 3.2rem; }
.ft-name { align-self: end; font-size: 1.65rem; line-height: 1.05; color: #fff3d6; text-shadow: 0 .1rem .5rem rgba(0, 0, 0, .9); }
.ft-place { align-self: start; font-size: .84rem; font-weight: 650; color: color-mix(in srgb, var(--skill) 55%, #f7eed9); }
.ft-line { grid-column: 1 / -1; margin-top: .55rem; font-size: .92rem; line-height: 1.38; color: var(--text-2); }
.ft-first { grid-column: 1 / -1; display: grid; gap: .32rem; margin-top: .7rem; padding-top: .65rem; border-top: 1px solid rgba(214, 170, 96, .16); }
.ft-first small { color: var(--gold-2); font-size: .66rem; }
.ft-beat { display: flex; align-items: flex-start; gap: .45rem; font-size: .9rem; line-height: 1.3; color: var(--text-1); }
.ft-beat .ia-glyph { flex: none; width: .95rem; height: .95rem; margin-top: .12rem; color: color-mix(in srgb, var(--skill) 75%, #fff); }

.ft-go { display: grid; justify-items: center; min-height: 3.9rem; }
.ft-go-btn { min-width: min(22rem, 100%); }
.ft-go:not(.is-ready) .ft-go-btn { display: none; }
.ft-hint { align-self: center; margin: 0; font-size: .95rem; color: var(--text-2); text-shadow: 0 1px .4rem #000; }
.ft-go.is-ready .ft-hint { display: none; }

@media (prefers-reduced-motion: reduce) { .ft-art, .ft-card, .ft-pic img, .ft-stage::before { transition: none; } .ft-card.is-picked { transform: none; } }
.reduce-motion .ft-art, .reduce-motion .ft-card, .reduce-motion .ft-pic img { transition: none; }
.reduce-motion .ft-card.is-picked { transform: none; }

@media (min-width: 761px) and (max-height: 820px) {
  .title-screen.choice:not(.creation):not(.is-loading) { row-gap: .7rem; padding-top: 2.4vh; }
  .ft-title { font-size: clamp(1.9rem, 2.9vw, 2.6rem); }
  .ft-intro { font-size: .98rem; }
  .ft-pic { aspect-ratio: 16 / 6.6; }
  .ft-line { display: none; }
  .ft-first { margin-top: .55rem; padding-top: .5rem; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .ft-cards { gap: .7rem; }
  .ft-body { padding: 0 .8rem .85rem; column-gap: .6rem; }
  .ft-name { font-size: 1.4rem; }
  .ft-beat { font-size: .84rem; }
}

@media (max-width: 760px) {
  .title-screen.choice:not(.creation):not(.is-loading) { display: block; padding: 0 0 calc(6rem + env(safe-area-inset-bottom)); }
  .ft-head { margin: 0 auto; padding: calc(1.2rem + env(safe-area-inset-top)) 1.1rem 0; gap: .3rem; }
  .ft-title { font-size: 1.85rem; }
  .ft-intro { font-size: .9rem; }
  .ft-stage { height: min(38vh, 22rem); }
  .ft-cards { grid-auto-flow: row; grid-template-columns: 1fr; gap: .6rem; padding: 0 .75rem; }
  .ft-card { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); border-radius: .8rem; }
  .ft-card.is-picked { transform: none; }
  .ft-pic { aspect-ratio: auto; min-height: 100%; }
  .ft-pic::after { background: linear-gradient(90deg, rgba(10, 15, 27, 0) 45%, rgba(10, 15, 27, .9) 100%); }
  .ft-body { margin: 0; padding: .7rem .8rem .75rem .2rem; column-gap: .55rem; }
  .ft-medal .medal { --size: 2.4rem; }
  .ft-name { font-size: 1.3rem; }
  .ft-place { font-size: .78rem; }
  .ft-line { display: none; }
  .ft-first { margin-top: .45rem; padding-top: .4rem; gap: .22rem; }
  .ft-card:not(.is-picked) .ft-first .ft-beat:not(:first-of-type) { display: none; }
  .ft-beat { font-size: .82rem; }
  .ft-go { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; padding: .85rem 1rem calc(.95rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(7, 11, 20, 0), rgba(7, 11, 20, .94) 32%, rgba(7, 11, 20, .98)); }
  .ft-go-btn { width: 100%; }
  .ft-go:not(.is-ready) { display: none; }
  .ft-place, .ft-first small, .ft-kicker { font-size: .9rem; }
  .ft-beat { font-size: .95rem; }
}

@media (max-height: 500px) and (pointer: coarse) {
  .ft-place, .ft-first small, .ft-kicker { font-size: .9rem; }
  .ft-beat { font-size: .95rem; }
}