/* Étiquettes papier pour navigation, actions et règlement. */

/* Intro : feuille froissée et déchirure qui révèle Los Santos. */
.arrival-intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  overflow: hidden;
  /* L'accueil reste visible dès que les deux moitiés s'écartent. */
  background: transparent;
}
.arrival-intro__paper {
  position: absolute;
  inset: 0;
  background: url('/img/delta-paper-intro.png') center / cover no-repeat;
  box-shadow: inset 0 0 70px rgba(45, 31, 20, .2), 0 0 26px rgba(0, 0, 0, .22);
  filter: sepia(.14) contrast(1.07) brightness(.78) saturate(.72);
  will-change: transform;
}
.arrival-intro__paper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    repeating-radial-gradient(circle at 17% 29%, rgba(18, 13, 12, .36) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(96deg, rgba(16, 10, 10, .12) 0 1px, transparent 1px 5px),
    linear-gradient(110deg, rgba(13, 9, 9, .2), transparent 38%, rgba(20, 10, 9, .18));
  background-size: 9px 9px, 5px 5px, 100% 100%;
  mix-blend-mode: multiply;
}
.arrival-intro__paper--left { right: 50%; background-size: 200% 100%; background-position: left center; transform-origin: left center; animation: paper-settle-left .65s cubic-bezier(.2,.8,.25,1) both; }
.arrival-intro__paper--right { left: 50%; background-size: 200% 100%; background-position: right center; transform-origin: right center; animation: paper-settle-right .65s cubic-bezier(.2,.8,.25,1) both; }
.arrival-intro__mark {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 1;
  width: min(340px, 76vw);
  transform: translate(-50%, -50%) rotate(-3deg);
  text-align: center;
  color: #292027;
  animation: pencil-draw 2.15s steps(16, end) both;
}
.arrival-intro__mark { display: none; }
.arrival-intro__logo { display: inline-block; width: 122px; height: 88px; margin-bottom: 2px; }
.arrival-intro__logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; opacity: .94; }
.arrival-intro__mark p { margin: 5px 0 0; font: 700 clamp(3.2rem, 11vw, 6rem) var(--ui, 'Oswald', sans-serif); letter-spacing: .12em; text-shadow: 1px 1px 0 rgba(255,255,255,.42), -1px 0 rgba(28,21,25,.5); }
.arrival-intro__mark span { display: block; margin-top: 5px; font: 700 .7rem var(--ui, 'Oswald', sans-serif); letter-spacing: .32em; }
.arrival-intro__skip { position: absolute; right: 20px; bottom: 18px; z-index: 2; border: 0; background: transparent; color: #4b3d36; font: 700 .7rem var(--ui, 'Oswald', sans-serif); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.arrival-intro.is-leaving { pointer-events: none; }
.arrival-intro.is-leaving .arrival-intro__paper--left { animation: tear-left .76s cubic-bezier(.5,.02,.25,1) forwards; }
.arrival-intro.is-leaving .arrival-intro__paper--right { animation: tear-right .76s cubic-bezier(.5,.02,.25,1) forwards; }
@keyframes pencil-draw { from { opacity: 0; filter: blur(4px) grayscale(1); transform: translate(-50%, -50%) rotate(-3deg) scale(.92); } 35% { opacity: 1; } to { opacity: 1; filter: grayscale(1); transform: translate(-50%, -50%) rotate(-3deg) scale(1); } }
@keyframes paper-settle-left { from { transform: translateX(-1.5%) rotate(-.5deg) scale(1.02); } to { transform: translateX(0) rotate(0) scale(1); } }
@keyframes paper-settle-right { from { transform: translateX(1.5%) rotate(.5deg) scale(1.02); } to { transform: translateX(0) rotate(0) scale(1); } }
@keyframes tear-left { 35% { transform: translateX(-3%) rotate(-.7deg); } to { transform: translateX(-112%) rotate(-8deg); } }
@keyframes tear-right { 35% { transform: translateX(3%) rotate(.7deg); } to { transform: translateX(112%) rotate(8deg); } }
@keyframes intro-fade { to { opacity: 0; transform: translate(-50%, -50%) scale(.94); } }
@media (prefers-reduced-motion: reduce) { .arrival-intro__mark, .arrival-intro.is-leaving .arrival-intro__paper--left, .arrival-intro.is-leaving .arrival-intro__paper--right { animation-duration: .01ms; } }

/* Lecteur musical discret : l'utilisateur garde toujours la main sur la lecture. */
.music-player {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 120;
  display: grid;
  justify-items: end;
  gap: 9px;
}

.music-player__toggle,
.music-player__play {
  border: 1px solid rgba(255, 131, 57, .7);
  color: #fff8ed;
  font-family: var(--ui, 'Oswald', sans-serif);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.music-player__toggle {
  width: 54px;
  height: 42px;
  border-radius: 4px;
  background: #f2eee6;
  color: #221822;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  font-size: 1.25rem;
}

.music-player__panel {
  width: min(248px, calc(100vw - 44px));
  position: relative;
  padding: 24px 16px 16px;
  border: 1px solid #d9d1c3;
  border-radius: 2px;
  background: #f2eee6;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .42), inset 0 0 30px rgba(112, 80, 42, .06);
}
.music-player__panel::before { content: ''; position: absolute; top: -8px; left: 50%; width: 76px; height: 17px; transform: translateX(-50%) rotate(-2deg); background: rgba(159, 151, 139, .78); }

.music-player__panel[hidden] { display: none; }
.music-player__title { margin: 0 0 10px; color: #241922; font: 700 .84rem var(--ui, 'Oswald', sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.music-player__play { width: 100%; padding: 10px; border-radius: 5px; background: linear-gradient(90deg, #ff9d40, #e85428); color: #1b1112; }
.music-player__play[aria-pressed='true'] { background: #2c2632; color: #fff8ed; }
.music-player__volume { display: grid; gap: 7px; margin-top: 12px; color: #241922; font: 600 .7rem var(--ui, 'Oswald', sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.music-player__volume input { width: 100%; accent-color: #ff8339; }
.music-player__youtube {
  position: fixed;
  left: -240px;
  bottom: -240px;
  width: 200px;
  height: 200px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 560px) {
  .music-player { right: 14px; bottom: 14px; }
}
#page-boutique,
#page-reglement {
  position: relative;
  isolation: isolate;
  background: #100f15;
}
#page-boutique::before,
#page-reglement::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: '';
  pointer-events: none;
  opacity: .18;
  background:
    linear-gradient(180deg, rgba(12, 10, 15, .72), rgba(12, 10, 15, .92)),
    url('/img/photo1.jpg') center top / cover fixed;
  filter: grayscale(1) contrast(1.15);
}
#page-boutique > *,
#page-reglement > * { position: relative; z-index: 1; }
#page-boutique .page-head,
#page-reglement .page-head { border-bottom: 0 !important; }

.links a {
  position: relative;
  margin: 0 2px;
  padding: 8px 11px;
  color: #eee9e0;
}
.links a.active {
  color: #17131a;
  background: #f2eee6;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .24);
  transform: rotate(-1deg);
}
.links a.active::after {
  position: absolute;
  right: 9px;
  bottom: 3px;
  left: 9px;
  height: 2px;
  content: '';
  background: #c64e25;
}

.btn {
  position: relative;
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .22);
  transform: rotate(-.6deg);
}
.btn:hover { transform: translateY(-2px) rotate(.3deg); }
.btn-primary, .btn-discord {
  color: #17131a;
  border-color: #f2eee6;
  background: #f2eee6;
}
.btn-primary::before, .btn-discord::before {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 46px;
  height: 12px;
  content: '';
  background: rgba(185, 177, 164, .76);
  transform: translateX(-50%) rotate(2deg);
}
.btn-ghost { color: #f2eee6; border-color: #f2eee6; }

.steps ol { gap: 26px; }
.steps li,
.panel,
.rule-sec {
  position: relative;
  color: #17131a;
  border: 0;
  border-radius: 0;
  background: #f2eee6;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .28);
}
.steps li { padding: 27px 20px 20px; }
.steps li::before,
.panel::before,
.rule-sec::before {
  position: absolute;
  top: -11px;
  left: 50%;
  z-index: 1;
  width: 72px;
  height: 21px;
  content: '';
  background: rgba(185, 177, 164, .78);
  transform: translateX(-50%) rotate(-2deg);
}
.steps li:nth-child(2)::before { transform: translateX(-50%) rotate(2deg); }
.steps li:nth-child(3)::before { transform: translateX(-50%) rotate(-3deg); }
.steps li span, .rule-sec .num { color: #c64e25; }
.steps li h3, .rule-sec h3, .panel h2 { color: #17131a; }
.steps li p, .panel p, .hint { color: #514a45; }
.steps li:nth-child(2) { transform: rotate(1deg); }
.steps li:nth-child(3) { transform: rotate(-1deg); }

.panel { padding: 30px; }
.user-strip { align-items: center; }
.user-strip b { color: #17131a; }
.role-tag.yes { color: #0f5731; background: #d8eddd; }
.role-tag.no { color: #8b331d; background: #f3ddd2; }
.gate, .action-box, .result { text-align: center; }
.gate img { filter: brightness(.3); }

.rule-sec { margin-bottom: 28px; overflow: visible; }
#rules-body .rule-sec { color: #17131a !important; background: #f2eee6 !important; }
#rules-body .rule-sec summary { color: #17131a !important; background: transparent !important; }
#rules-body .rule-sec summary::after { color: #c64e25 !important; }
#rules-body .rule-sec ol {
  color: #2d2825 !important;
  border-top-color: rgba(23, 19, 26, .14) !important;
  background: #f2eee6 !important;
}
#rules-body .rule-sec li { color: #2d2825 !important; border-bottom-color: rgba(23, 19, 26, .12) !important; }
.rule-sec li::marker { color: #c64e25; font-weight: 700; }

@media (max-width: 700px) {
  .links a { margin: 0; padding: 7px 8px; }
  .panel { padding: 28px 18px; }
}