@layer layout {
  .topbar__booth {
    min-width: 0;
    align-self: stretch;
  }

  .lane {
    display: none;
    min-width: 0;
  }

  @media not all and (orientation: portrait) and (max-aspect-ratio: 4/5) {
    .app[data-announcer='on'] {
      --topbar-h: 78px;
    }
  }

  @media (max-height: 540px) and (orientation: landscape) {
    .app[data-announcer='on'] {
      --topbar-h: 58px;
    }
  }

  @media (orientation: portrait) and (max-aspect-ratio: 4/5) {
    .topbar__booth {
      display: none;
    }

    .lane {
      display: block;
      grid-area: lane;
    }
  }
}

@layer overlays {
  :root[data-ann-mode='booth'] .toast-root {
    top: calc(var(--ann-top, 78px) + 10px);
  }

  :root[data-ann-mode='strip'] .toast-root {
    top: calc(var(--ann-top, 90px) + 6px);
  }

  :root[data-ann-mode='booth'] .panel {
    padding-top: calc(var(--ann-top, 78px) + 10px);
  }

  :root[data-ann-mode='booth'] .panel__sheet {
    max-height: min(760px, calc(100dvh - var(--ann-top, 78px) - 30px));
  }

  @media (max-width: 640px), (orientation: portrait) and (max-aspect-ratio: 4/5) {
    :root[data-ann-mode='lane'] .panel__sheet,
    :root[data-ann-mode='strip'] .panel__sheet,
    :root[data-ann-mode='lane'] .panel[data-wide='true'] .panel__sheet,
    :root[data-ann-mode='strip'] .panel[data-wide='true'] .panel__sheet {
      max-height: calc(100dvh - var(--safe-top) - 104px);
    }

    :root[data-ann-mode='booth'] .panel {
      padding-top: 0;
    }

    :root[data-ann-mode='booth'] .panel__sheet,
    :root[data-ann-mode='booth'] .panel[data-wide='true'] .panel__sheet {
      max-height: calc(100dvh - var(--ann-top, 60px) - 8px);
    }
  }

  .announcer {
    position: fixed;
    inset: 0;
    z-index: 88;
    pointer-events: none;
    contain: layout style;
  }

  .announcer.is-away {
    visibility: hidden;
    transition: visibility 0s linear 0.42s;
  }

  .announcer.is-tucked {
    visibility: hidden;
  }

  .announcer__mover {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    will-change: transform;
  }

  .announcer__walker {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 50% 100%;
    will-change: transform;
    transition: opacity 0.24s ease, filter 0.24s ease;
  }

  .announcer__body {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
  }

  .announcer__walker.is-dangling .announcer__body {
    transform-origin: 50% 10%;
  }

  .announcer__body > .actor {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .announcer.is-swapping .announcer__walker {
    opacity: 0;
    filter: brightness(2.4) saturate(0);
  }

  .announcer__walker.is-poofing .announcer__body {
    animation: ann-poof 0.46s var(--ease-out, ease-out) forwards;
  }

  .announcer__walker.is-poofing .announcer__shadow {
    animation: ann-poof-shadow 0.4s ease-out forwards;
  }

  .announcer__walker.is-returning .announcer__body {
    animation: ann-unpoof 0.52s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
  }

  :root[data-motion='reduced'] .announcer__walker.is-poofing .announcer__body,
  :root[data-motion='reduced'] .announcer__walker.is-returning .announcer__body,
  :root[data-motion='reduced'] .announcer__walker.is-poofing .announcer__shadow {
    animation: none;
  }

  .announcer__shadow {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -5px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.22) 60%, rgba(0, 0, 0, 0));
    transform-origin: 50% 50%;
  }

  .announcer__walker.is-dangling .announcer__shadow {
    opacity: 0.25;
  }

  .announcer__hit {
    position: absolute;
    inset: 10% 16% 0;
    border-radius: 40% 40% 30% 30%;
    pointer-events: auto;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    cursor: var(--cursor-hand, pointer);
  }

  .announcer__walker.is-dangling .announcer__hit {
    cursor: var(--cursor-grab, grabbing);
  }

  .announcer.is-docked .announcer__hit {
    inset: 12% 18% 0;
  }

  .announcer__hit:focus-visible {
    outline: none;
  }

  .announcer__alert {
    position: absolute;
    left: -15px;
    top: -15px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: 'Luckiest Guy', var(--font);
    font-size: 21px;
    line-height: 1;
    padding-top: 3px;
    color: #2a1500;
    background:
      radial-gradient(120% 80% at 35% 20%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%),
      linear-gradient(180deg, #ffe27a, #f5b52c 60%, #d88a0c);
    box-shadow: 0 0 0 2px #2a1500, 0 0 0 4px #fff4d6, 0 0 0 5.5px #2a1500, 0 6px 14px rgba(0, 0, 0, 0.45);
    pointer-events: none;
  }

  .announcer__alert[hidden] {
    display: none;
  }

  .announcer__arrow {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    pointer-events: none;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
  }

  .announcer__arrow[hidden] {
    display: none;
  }

  .announcer__arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: ann-arrow-bob 0.62s ease-in-out infinite alternate;
  }

  .announcer__arrow path {
    fill: #ffd84a;
    stroke: #2a1500;
    stroke-width: 4.5;
    stroke-linejoin: round;
    paint-order: stroke;
  }

  :root[data-motion='reduced'] .announcer__arrow svg {
    animation: none;
  }

  .announcer__bubble {
    --bubble-edge: #f0b534;
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    width: max-content;
    padding: 7px 9px 7px 13px;
    border-radius: 16px;
    color: #241304;
    background:
      radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%),
      linear-gradient(180deg, #fffaf0 0%, #fff1d2 100%);
    box-shadow:
      0 0 0 1.5px #1a0c02,
      0 0 0 3.5px var(--bubble-edge),
      0 0 0 5px #2a1500,
      0 10px 24px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    overflow: visible;
    cursor: var(--cursor-arrow, default);
  }

  .announcer__bubble[data-tone='wild'] {
    --bubble-edge: #b28bff;
  }

  .announcer__bubble[data-tone='mint'] {
    --bubble-edge: #5ee06a;
  }

  .announcer__bubble[data-tone='coral'] {
    --bubble-edge: #ff5a6e;
  }

  .announcer__bubble[data-tone='reward'] {
    --bubble-edge: #ffd84a;
    cursor: var(--cursor-point, pointer);
    background:
      radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%),
      linear-gradient(180deg, #fffbe8 0%, #ffe9a8 100%);
  }

  .announcer__bubble::before {
    content: '';
    position: absolute;
    left: -9px;
    top: var(--tail-y, 50%);
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background: #fff4dc;
    transform: rotate(45deg);
    box-shadow: -1.5px 1.5px 0 0 #1a0c02, -3.5px 3.5px 0 0 var(--bubble-edge);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
  }

  .announcer__bubble.is-left::before {
    left: auto;
    right: -9px;
    box-shadow: 1.5px -1.5px 0 0 #1a0c02, 3.5px -3.5px 0 0 var(--bubble-edge);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }

  .announcer__bubble.is-drop::before {
    left: calc(var(--tail-x, 28px) - 7px);
    right: auto;
    top: -9px;
    margin-top: 0;
    background: #fffcf6;
    box-shadow: -1.5px -1.5px 0 0 #1a0c02, -3.5px -3.5px 0 0 var(--bubble-edge);
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  .announcer__bubble.is-above::before {
    left: calc(var(--tail-x, 28px) - 7px);
    right: auto;
    top: auto;
    bottom: -9px;
    margin-top: 0;
    background: #fff1d2;
    box-shadow: 1.5px 1.5px 0 0 #1a0c02, 3.5px 3.5px 0 0 var(--bubble-edge);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }

  .announcer__bubble[data-tone='reward'].is-above::before {
    background: #ffe9a8;
  }

  .announcer__bubble.is-in {
    animation: ann-bubble-in 0.34s var(--ease-spring);
  }

  .announcer__bubble.is-leaving {
    opacity: 0;
    transition: opacity 0.18s ease;
  }

  .announcer__say {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .announcer__name {
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #a0550a;
    line-height: 1.1;
  }

  .announcer__text {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.28;
    color: #241304;
    overflow-wrap: anywhere;
  }

  .announcer__rest {
    visibility: hidden;
  }

  .announcer__bubble.is-dense .announcer__text {
    font-size: 12px;
    line-height: 1.22;
  }

  .announcer__bubble.is-denser .announcer__text {
    font-size: 11px;
    line-height: 1.16;
  }

  .announcer__bubble.is-denser .announcer__name {
    display: none;
  }

  .announcer__actions {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .announcer__actions:empty {
    display: none;
  }

  .announcer__bubble.is-stacked {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 5px;
  }

  .announcer__bubble.is-stacked .announcer__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .announcer__bubble.is-stacked .announcer__btn {
    height: 28px;
    min-width: 0;
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .announcer__btn {
    height: 32px;
    min-width: 58px;
    padding: 0 12px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #2a1500;
    white-space: nowrap;
    background: linear-gradient(180deg, #fff3cf, #f1d49a);
    box-shadow: 0 0 0 1.5px #2a1500, 0 3px 0 0 #8a5200, 0 3px 0 1.5px #2a1500;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
  }

  .announcer__btn.is-primary {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%),
      linear-gradient(180deg, #ffe27a, #f5b52c 55%, #d88a0c);
  }

  .announcer__btn.is-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.18);
    animation: glow-breathe 1.6s ease-in-out infinite;
    pointer-events: none;
  }

  .announcer__btn:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 1.5px #2a1500, 0 0 0 0 #8a5200;
  }

  .announcer[data-mode='lane'] .announcer__text,
  .announcer[data-mode='strip'] .announcer__text {
    font-size: 13px;
  }

  .announcer[data-mode='booth'] .announcer__bubble {
    padding: 6px 8px 6px 12px;
  }

  @media (max-height: 540px) and (orientation: landscape) {
    .announcer__text {
      font-size: 12px;
    }

    .announcer__btn {
      height: 28px;
    }
  }

  .actor {
    position: relative;
    pointer-events: none;
  }

  .actor--sprite .actor__frame {
    position: absolute;
    overflow: hidden;
    opacity: 0;
  }

  .actor--sprite .actor__strip {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .actor--sprite.is-ready .actor__frame {
    opacity: 1;
    transition: opacity 0.2s ease;
  }

  .actor--pixel .actor__rig {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
  }

  .actor--pixel .actor__body {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 100%;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .actor--pixel.is-ready .actor__body {
    opacity: 1;
  }

  .actor--pixel[data-facing='left'] .actor__body {
    transform: scaleX(-1);
  }

  .actor--pixel[data-facing='back'] .actor__body {
    filter: brightness(0.7);
  }

  .actor--pixel[data-anim='idle'] .actor__rig {
    animation: px-breathe 2.8s ease-in-out infinite;
  }

  .actor--pixel[data-anim='walk'] .actor__rig {
    animation: px-walk 0.52s ease-in-out infinite;
  }

  .actor--pixel[data-anim='run'] .actor__rig {
    animation: px-walk 0.3s ease-in-out infinite;
  }

  .actor--pixel[data-anim='attack'].is-once .actor__rig {
    animation: px-jump 0.76s var(--ease-out);
  }

  .actor--pixel[data-anim='hurt'].is-once .actor__rig {
    animation: px-shake 0.62s ease;
  }

  .actor--pixel[data-anim='dying'].is-once .actor__rig {
    animation: px-faint 1.2s ease;
  }

  .announcer__bubble[data-tone='glow'] {
    --bubble-edge: #ffd44a;
    color: #fff;
    background:
      radial-gradient(120% 100% at 18% 0%, rgba(255, 61, 154, 0.5), rgba(255, 61, 154, 0) 60%),
      radial-gradient(120% 100% at 100% 100%, rgba(93, 233, 255, 0.3), rgba(93, 233, 255, 0) 60%),
      linear-gradient(180deg, #2a1344 0%, #14092a 100%);
    box-shadow:
      0 0 0 1.5px #1a0c02,
      0 0 0 3.5px var(--bubble-edge),
      0 0 0 5px #2a1500,
      0 0 22px rgba(255, 212, 74, 0.75),
      0 0 46px rgba(255, 61, 154, 0.55),
      0 10px 24px rgba(0, 0, 0, 0.45);
    isolation: isolate;
  }

  .announcer__bubble[data-tone='glow']::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow:
      0 0 0 1.5px #1a0c02,
      0 0 0 3.5px #fff4c4,
      0 0 0 5px #2a1500,
      0 0 32px rgba(255, 212, 74, 0.95),
      0 0 64px rgba(255, 61, 154, 0.75);
    opacity: 0;
    pointer-events: none;
    animation: ann-glow-pulse 1.8s ease-in-out 0.34s infinite;
  }

  .announcer__bubble[data-tone='glow']::before,
  .announcer__bubble[data-tone='glow'].is-drop::before,
  .announcer__bubble[data-tone='glow'].is-above::before {
    background: #22103a;
  }

  .announcer__bubble[data-tone='glow'] .announcer__name {
    color: #ffd44a;
    text-shadow: 0 0 8px rgba(255, 212, 74, 0.8);
  }

  .announcer__bubble[data-tone='glow'] .announcer__text {
    font-family: 'Tilt Neon', var(--font);
    font-size: 15.5px;
    font-weight: 400;
    letter-spacing: 0.015em;
    color: #fff;
    text-shadow: 0 0 3px #fff, 0 0 8px #ffd44a, 0 0 16px #ff3d9a, 0 0 28px #ff3d9a;
  }

  .announcer__bubble.is-dense[data-tone='glow'] .announcer__text {
    font-size: 13.5px;
  }

  .announcer__bubble.is-denser[data-tone='glow'] .announcer__text {
    font-size: 12px;
  }

  .tut-picker.tut-picker--roster .tut-picker__grid {
    grid-template-columns: repeat(var(--pick-cols, 4), minmax(0, 1fr));
    gap: var(--pick-gap, 8px);
  }

  .tut-picker.tut-picker--roster .tut-pick {
    min-height: var(--pick-h, 104px);
    padding: 6px 3px 6px;
    border-radius: 16px;
  }

  .tut-picker.tut-picker--roster .tut-pick__art {
    height: var(--pick-art, 68px);
  }

  .tut-picker.tut-picker--roster .tut-pick__name {
    font-size: var(--pick-font, 11px);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .tut-picker.tut-picker--roster[data-fit='compact'] .tut-picker__intro {
    display: none;
  }

  .tut-picker.tut-picker--roster[data-fit='compact'] .tut-picker__stage {
    height: var(--pick-stage, 104px);
  }

  @media not all and (max-height: 540px) and (orientation: landscape) {
    .tut-picker.tut-picker--roster[data-fit='compact'] .tut-picker__show {
      grid-template-columns: var(--pick-stage-w, 104px) minmax(0, 1fr);
      padding: 4px 12px;
    }
  }

  .tut-picker.tut-picker--roster[data-fit='compact'] .tut-picker__name {
    font-size: clamp(19px, 5vw, 26px);
  }

  .tut-picker.tut-picker--roster[data-fit='compact'] .tut-picker__tagline {
    font-size: 12.5px;
  }
}

@layer fx {
  @keyframes ann-bubble-in {
    from {
      opacity: 0;
      scale: 0.7;
    }

    to {
      opacity: 1;
      scale: 1;
    }
  }

  @keyframes ann-arrow-bob {
    from {
      transform: translateY(-5px);
    }

    to {
      transform: translateY(5px);
    }
  }

  @keyframes ann-poof {
    0% {
      opacity: 1;
      scale: 1 1;
      filter: brightness(1);
    }

    35% {
      opacity: 1;
      scale: 1.16 0.86;
      filter: brightness(2.2) saturate(0.4);
    }

    100% {
      opacity: 0;
      scale: 0.2 1.35;
      filter: brightness(3) saturate(0);
    }
  }

  @keyframes ann-poof-shadow {
    from {
      opacity: 0.8;
      scale: 1;
    }

    to {
      opacity: 0;
      scale: 0.3;
    }
  }

  @keyframes ann-unpoof {
    0% {
      opacity: 0;
      scale: 0.25 1.3;
      filter: brightness(3) saturate(0);
    }

    45% {
      opacity: 1;
      scale: 1.12 0.9;
      filter: brightness(1.8) saturate(0.6);
    }

    100% {
      opacity: 1;
      scale: 1 1;
      filter: brightness(1);
    }
  }

  @keyframes px-breathe {
    0%,
    100% {
      transform: scale(1, 1);
    }

    50% {
      transform: scale(1.015, 0.982);
    }
  }

  @keyframes px-walk {
    0%,
    100% {
      transform: translateY(0) rotate(-2.5deg);
    }

    50% {
      transform: translateY(-6%) rotate(2.5deg);
    }
  }

  @keyframes px-jump {
    0% {
      transform: none;
    }

    30% {
      transform: translateY(-22%) scale(1.04);
    }

    58% {
      transform: translateY(0) scale(1.07, 0.93);
    }

    78% {
      transform: translateY(-5%) scale(0.98, 1.02);
    }

    100% {
      transform: none;
    }
  }

  @keyframes px-shake {
    0%,
    100% {
      transform: none;
    }

    18% {
      transform: translateX(-8%) rotate(-5deg);
    }

    38% {
      transform: translateX(7%) rotate(4deg);
    }

    58% {
      transform: translateX(-5%) rotate(-2deg);
    }

    78% {
      transform: translateX(3%);
    }
  }

  @keyframes px-faint {
    0% {
      transform: none;
    }

    35%,
    70% {
      transform: translateY(8%) rotate(-82deg);
    }

    100% {
      transform: none;
    }
  }

  @keyframes ann-glow-pulse {
    50% {
      opacity: 1;
    }
  }
}