.tiu { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.tiu-cell { margin: 0; padding: 16px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tiu-wide { grid-column: 1 / -1; }
.tiu-cell figcaption { margin-top: auto; }
.tiu-pad { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 0; min-height: 300px; }
@media (max-width: 760px) { .tiu { grid-template-columns: 1fr; } .tiu-cell { padding: 12px; } }

/* marquee */
.tiu-board { position: relative; background: #1C0416; padding: 34px 34px; container-type: inline-size; cursor: text; }
.tiu-board:focus-within { outline: 1px solid #DCBF9F; outline-offset: 3px; }
.tiu-bulbs { position: absolute; display: flex; justify-content: space-between; }
.tiu-bt, .tiu-bb { left: 12px; right: 12px; height: 6px; } .tiu-bt { top: 12px; } .tiu-bb { bottom: 12px; }
.tiu-bl, .tiu-br { top: 12px; bottom: 12px; width: 6px; flex-direction: column; } .tiu-bl { left: 12px; } .tiu-br { right: 12px; }
.tiu-bulbs i { width: 6px; height: 6px; border-radius: 50%; background: #F6EEE9; opacity: .9; animation: tiu-tw 2.4s ease-in-out infinite; }
@keyframes tiu-tw { 0%, 100% { opacity: .95; } 50% { opacity: .3; } }
.tiu-static .tiu-bulbs i { animation: none; }
.tiu-tiles { display: grid; grid-template-columns: repeat(16, 1fr); gap: .5cqw; }
.tiu-tile { aspect-ratio: 3 / 4; background: #2a0a22; display: flex; align-items: center; justify-content: center; transition: transform .11s ease-in; color: #F6EEE9; font-family: var(--font-marquee); font-size: 4.2cqw; line-height: 1; }
.tiu-tile.tiu-flip { transform: rotateX(90deg); }
.tiu-ch { display: block; }
.tiu-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; cursor: text; text-transform: uppercase; }
@media (max-width: 760px) { .tiu-board { padding: 26px 22px; } .tiu-bt, .tiu-bb { left: 8px; right: 8px; } .tiu-bl, .tiu-br { top: 8px; bottom: 8px; } .tiu-bl { left: 8px; } .tiu-br { right: 8px; } .tiu-bt { top: 8px; } .tiu-bb { bottom: 8px; } .tiu-bulbs i { width: 4px; height: 4px; } .tiu-bt, .tiu-bb { height: 4px; } .tiu-bl, .tiu-br { width: 4px; } }

/* ticket */
.tiu-ticket { display: grid; grid-template-columns: 1fr 112px; width: 100%; max-width: 560px; background: #F6EEE9; color: #441C47; border: 1px solid rgba(68, 28, 71, .25); position: relative; transition: transform .4s var(--ease); }
.tiu-ticket:hover { transform: translateY(-6px); }
.tiu-ticket::before, .tiu-ticket::after { content: ''; position: absolute; right: calc(112px - 9px); width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 1px solid rgba(68, 28, 71, .25); }
.tiu-ticket::before { top: -10px; clip-path: inset(50% 0 0 0); } .tiu-ticket::after { bottom: -10px; clip-path: inset(0 0 50% 0); }
.tiu-main { padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tiu-logo { display: block; width: 92px; aspect-ratio: 1335 / 985; background: #441C47; -webkit-mask: no-repeat left center / contain; mask: no-repeat left center / contain; }
.tiu-tt { font-family: var(--font-marquee); font-size: clamp(22px, 3vw, 36px); line-height: 1.05; margin-top: 10px; }
.tiu-ts { font-family: var(--font-display); font-weight: 300; font-size: 16px; }
.tiu-stub { border-left: 1px dashed rgba(68, 28, 71, .5); padding: 22px 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; text-align: center; }
.tiu-stub small { display: block; font-family: var(--font-body); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.tiu-stub b { font-family: var(--font-marquee); font-weight: 400; font-size: 26px; line-height: 1.1; }
@media (max-width: 760px) { .tiu-ticket { grid-template-columns: 1fr 84px; } .tiu-ticket::before, .tiu-ticket::after { right: calc(84px - 9px); } .tiu-main { padding: 18px 16px; } .tiu-stub b { font-size: 20px; } }

/* title card */
.tiu-card { position: relative; width: min(100%, 340px); aspect-ratio: 4 / 5; background: radial-gradient(ellipse at 50% 38%, #5F187F 0%, #1C0416 78%); color: #F6EEE9; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; container-type: inline-size; }
.tiu-es { font-family: var(--font-marquee); font-size: 30cqw; line-height: 1; }
.tiu-en { font-family: var(--font-display); font-weight: 300; font-size: 5.4cqw; margin-top: 5cqw; }
.tiu-cred { position: absolute; bottom: 7cqw; left: 0; right: 0; font-family: var(--font-marquee); font-size: 3.2cqw; letter-spacing: .24em; text-indent: .24em; }

/* credits */
.tiu-credits { height: 280px; overflow: hidden; background: #1C0416; position: relative; -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.tiu-roll { animation: tiu-roll 26s linear infinite; }
.tiu-credits:hover .tiu-roll { animation-play-state: paused; }
.tiu-static .tiu-roll { animation: none; }
.tiu-static .tiu-credits { overflow: auto; }
@keyframes tiu-roll { to { transform: translateY(-50%); } }
.tiu-cr { text-align: center; padding: 18px 0; color: #F6EEE9; }
.tiu-cr span { display: block; font-family: var(--font-body); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; opacity: .65; margin-bottom: 6px; }
.tiu-cr b { font-family: var(--font-marquee); font-weight: 400; font-size: 24px; }