/* Old Oak opening: dedicated compositions, preserving every path and sign. */
.opening.opening--old-oak {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
}
.opening--old-oak::before { display: none; }
.opening-stage {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
}
.opening--old-oak .opening-art { z-index: 0; }
.opening--old-oak .opening-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}
.opening-launch {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(36%, 420px);
}
.opening--old-oak .opening-title {
  width: 100%;
  padding: 10px 20px;
  color: #43301d;
  background: linear-gradient(150deg, #fff9e9, #f5dfb0);
  border: 2px solid #b88c49;
  border-bottom-width: 5px;
  border-radius: 24px 28px 23px 27px;
  box-shadow: 0 7px 22px #352b2338, inset 0 1px 0 #fff;
  text-shadow: none;
}
.opening--old-oak .opening-title > span {
  display: block;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: 0;
}
.opening--old-oak h1 { font-size: clamp(24px, 2.7vw, 37px); line-height: 1.04; }
.opening--old-oak h1 br { display: block; }
.opening--old-oak .opening-action .icon { width: 176px; height: 176px; }
.opening--old-oak #play-button:focus-visible {
  outline: 4px solid #fff8e6;
  outline-offset: 4px;
  box-shadow: 0 0 0 8px #3d3226;
  border-radius: 50%;
}
@media (orientation: portrait) {
  .opening-stage {
    width: 100%;
    height: 100%;
  }
  .opening-launch {
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(76%, 310px);
    gap: 7px;
  }
  .opening--old-oak .opening-title { padding: 8px 12px; border-radius: 22px; }
  .opening--old-oak .opening-title > span { font-size: 17px; }
  .opening--old-oak h1 { font-size: clamp(22px, 6vw, 26px); }
  .opening--old-oak .opening-action .icon { width: 148px; height: 148px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .opening-launch { bottom: 8px; gap: 4px; }
  .opening--old-oak .opening-title { padding: 5px 12px; }
  .opening--old-oak .opening-title > span { font-size: 14px; }
  .opening--old-oak h1 { font-size: 22px; }
  .opening--old-oak .opening-action .icon { width: 120px; height: 120px; }
}