/*
 * The tunnel of the characters (D228-D235), shared by the home of the admin and Discover of the site (piano 10): the
 * admin publishes it from here (BrandAsset). The colours follow the theme of the page (css/pill.css): the admin is only
 * dark (D62); on the site the light theme is a light gallery with the neon switched off (piano 10, a trial).
 */
/* The colours of the tunnel and of its card (in the admin the card is outside the tunnel) */
.tunnel-stage, .tunnel-card { --tunnel-muted: var(--muted, #A6A3C9); --tunnel-line: var(--line, rgba(166, 163, 201, .28)); }
.tunnel-stage { position: relative; flex: 1; min-height: 420px; overflow: hidden; background: var(--bg, #0D0B1F); }
.tunnel-webgl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.tunnel-webgl.pointing { cursor: pointer; }
.tunnel-webgl.dragging { cursor: grabbing; }
.tunnel-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, color-mix(in srgb, var(--bg, #0D0B1F) 75%, transparent) 100%); }
/* Soft light at the end of the tunnel and faint scanlines: only in the dark */
.tunnel-horizon { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255, 87, 185, .16) 0, rgba(154, 92, 255, .10) 18%, transparent 42%); mix-blend-mode: screen; opacity: var(--glow, 1); }
.tunnel-scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; opacity: var(--glow, 1); }
.tunnel-counter { position: absolute; left: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); font-size: .78rem; letter-spacing: .06em; line-height: 1.9; color: var(--tunnel-muted); pointer-events: none; }
.tunnel-counter .n { color: var(--text, #E9E8F7); }
.tunnel-hint { font-size: .7rem; opacity: .8; }
.tunnel-counter, .tunnel-horizon { transition: opacity .4s ease; }
.tunnel-focused .tunnel-counter, .tunnel-focused .tunnel-horizon { opacity: 0; }
/* The card of the character open: a line on top says that the character opens the single; the buttons on the right */
.tunnel-card { position: fixed; z-index: 60; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); width: min(26rem, calc(100% - 2rem)); transform: translate(-50%, 1rem); padding: 1rem 1.2rem 1.1rem; border: 1px solid var(--tunnel-line, rgba(166, 163, 201, .28)); border-radius: 1rem; background: color-mix(in srgb, var(--bg, #0D0B1F) 78%, transparent); color: var(--text, #E9E8F7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
.tunnel-card.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tunnel-card::before { content: ''; position: absolute; left: 1.2rem; right: 1.2rem; top: -1px; height: 2px; border-radius: 2px; background: var(--neon, linear-gradient(90deg, #4D6AFF, #9A5CFF, #FF57B9, #FFEC70, #00FF9D)); }
.tunnel-card-tip { margin-bottom: .45rem; font-size: .72rem; color: var(--tunnel-muted); }
.tunnel-card-tip:empty { display: none; }
.tunnel-card-meta { font-size: .7rem; color: var(--tunnel-muted); letter-spacing: .12em; text-transform: uppercase; }
.tunnel-card-character { display: inline-block; margin-top: .35rem; font-size: 1.35rem; color: var(--accent, #FF57B9); text-shadow: 0 0 calc(12px * var(--glow, 1)) var(--accent, #FF57B9); text-decoration: none; }
a.tunnel-card-character[href]:hover, a.tunnel-card-character[href]:focus-visible { color: var(--accent, #FF57B9); text-decoration: underline; }
[data-theme="light"] .tunnel-card-character { color: color-mix(in srgb, var(--accent, #FF57B9) 38%, #1B1838); }
.tunnel-card-actor { margin-top: .15rem; font-size: .85rem; color: var(--tunnel-muted); }
.tunnel-card-actor:empty { display: none; }
.tunnel-card-collection { margin-top: .7rem; font-size: .9rem; }
/* Discover (piano 10, 2026-10-26): one line for each text (site.css, they roll when longer); the label of the
   interpreter soft, the name in the colour of the text; the work, then the collection */
.tunnel-card .roll-line { display: block; }
.tunnel-card-actor[hidden], .tunnel-card-part[hidden] { display: none; }
.tunnel-card-actor b, .tunnel-card-actor .tunnel-card-who { font-weight: 400; color: var(--text, #E9E8F7); }
.tunnel-card-part { color: var(--tunnel-muted); font-size: .85rem; }
.tunnel-thumbs { margin-top: .5rem; display: grid; grid-template-columns: repeat(8, 1fr); gap: .35rem; }
.tunnel-thumb { aspect-ratio: 1; padding: 0; border: 1px solid var(--tunnel-line); border-radius: .35rem; overflow: hidden; cursor: pointer; }
.tunnel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.tunnel-thumb:hover, .tunnel-thumb:focus-visible { border-color: var(--accent, #FF57B9); box-shadow: 0 0 calc(8px * var(--glow, 1)) var(--accent, #FF57B9); outline: none; }
.tunnel-card-actions { margin-top: .9rem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.tunnel-btn { font: 400 .78rem/1 'Varela Round', system-ui, sans-serif; color: var(--text, #E9E8F7); text-decoration: none; background: none; border: 1px solid var(--tunnel-line); border-radius: 999px; padding: .6rem .9rem; cursor: pointer; }
.tunnel-btn:hover, .tunnel-btn:focus-visible { border-color: currentColor; color: var(--text, #E9E8F7); }
.tunnel-btn.is-primary { border-color: var(--accent, #FF57B9); }
/* Discover (piano 10, 2026-10-26): one row, always, on the computer and on the phone: "Go to the single" on the left,
   "Go to the poster" in the middle, "Back to the tunnel" on the right; each keeps its place when the single is missing */
/* The poster in the middle, the two sides equal: where a word does not fit (narrow phones, the longer languages) it
   goes on two lines inside its button, never cut, and the three stay the same height */
.tunnel-card-actions.is-three { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr); gap: .4rem; }
.tunnel-card-actions.is-three .tunnel-btn { display: flex; align-items: center; justify-content: center; max-width: 100%; text-align: center; line-height: 1.2; border-radius: 1.1rem; }
.tunnel-card-actions.is-three #tunnel-open-single { grid-column: 1; justify-self: start; }
.tunnel-card-actions.is-three #tunnel-open-collection { grid-column: 2; justify-self: center; }
.tunnel-card-actions.is-three #tunnel-back { grid-column: 3; justify-self: end; }
@media (max-width: 420px) { .tunnel-card-actions.is-three .tunnel-btn { padding: .55rem .6rem; font-size: .74rem; } }
.tunnel-stage, .tunnel-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (min-width: 48rem) {
  .tunnel-counter { left: 2rem; bottom: 1.6rem; }
  .tunnel-card { bottom: 1.6rem; }
}
/* Phones in landscape: the card on the right, the square open on the left */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .tunnel-card { left: auto; right: 1rem; bottom: .75rem; width: min(24rem, 46vw); max-height: calc(100dvh - 1.5rem); overflow-y: auto; transform: translateY(1rem); }
  .tunnel-card.on { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tunnel-card, .tunnel-counter, .tunnel-horizon { transition: none; } }
.tunnel-stage.is-deep .tunnel-horizon { opacity: calc(.35 * var(--glow, 1)); }

/* Discover (piano 10): the tunnel between the pill and the footer, the page never scrolls; the card inside the tunnel */
body.discover { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.discover .site-main.discover-main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; padding: calc(var(--pill-top) + var(--pill-h) + 12px) 0 0; }
.discover .tunnel-stage { min-height: 0; }
.discover .tunnel-stage .tunnel-card { position: absolute; bottom: 1rem; }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .discover .tunnel-stage .tunnel-card { bottom: .75rem; max-height: calc(100% - 1.5rem); }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .discover .site-main.discover-main { padding-top: calc(var(--pill-top) + var(--pill-h) + 6px); }
}
/* Discover: the counter on top on the left, how to move on top on the right, on one line (piano 10) */
.discover .tunnel-counter { top: .75rem; bottom: auto; left: 1rem; right: 1rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; line-height: 1.4; }
.discover .tunnel-count { flex: none; white-space: nowrap; }
.discover .tunnel-hint { text-align: right; }
@media (min-width: 48rem) { .discover .tunnel-counter { top: 1rem; left: 2rem; right: 2rem; } }
/* The number that grows in the yellow of Discover (lit in the dark, unlit in the light) */
.discover .tunnel-counter .n { color: var(--c-discover); }
[data-theme="light"] .discover .tunnel-counter .n { font-weight: 700; }
/* Phones: the card stays above the tab of the footer */
@media (max-width: 899px), (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .discover .tunnel-stage .tunnel-card { bottom: calc(1rem + 26px); }
  .discover .tunnel-stage .tunnel-card { max-height: calc(100% - 1rem - 26px - .75rem); overflow-y: auto; }
}