:root {
      --zoom: 4;
      --icon-size: calc(10px * var(--zoom));
      --label-gap: 6px;
      --map-tiles: 75;
      --tile-size: 32px;
      --vision-blocks: 10;
      --vision-fade-blocks: 3;
      --vision-radius: calc(var(--tile-size) * var(--vision-blocks));
      --vision-fade: calc(var(--tile-size) * var(--vision-fade-blocks));
      --bg-1: #0f1424;
      --bg-2: #182239;
      --grid: rgba(180, 214, 255, 0.08);
      --label-bg: rgba(5, 7, 12, 0.7);
      --label-text: #f6f7fa;
      --wall-fill: #3d4f68;
      --wall-edge: #7a93b2;
      --wall-shadow: rgba(12, 18, 32, 0.82);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      font-family: "Trebuchet MS", "Verdana", sans-serif;
      background: radial-gradient(circle at 20% 20%, #263051 0%, var(--bg-2) 45%, var(--bg-1) 100%);
    }

    .screen-reader-only {
      position: absolute;
      left: -10000px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
      white-space: nowrap;
    }

    .transition-layer {
      position: fixed;
      inset: 0;
      z-index: 280;
      pointer-events: none;
      opacity: 0;
      background: radial-gradient(ellipse at 50% 50%, transparent 8%, rgba(6, 4, 20, 0.95) 55%, #030108 92%);
      will-change: opacity, transform, filter;
    }

    .transition-layer--enter {
      pointer-events: auto;
      animation: warp-zoom-in 0.46s ease-in forwards;
    }

    .transition-layer--leave {
      animation: warp-zoom-out 0.54s ease-out forwards;
    }

    @keyframes warp-zoom-in {
      0% {
        opacity: 0;
        transform: scale(1.06);
        filter: brightness(1.6);
      }
      45% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(0.2);
      }
      100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(0.08);
      }
    }

    @keyframes warp-zoom-out {
      0% {
        opacity: 1;
        filter: brightness(0.1);
      }
      35% {
        opacity: 0.85;
        filter: brightness(1.05);
      }
      100% {
        opacity: 0;
        filter: brightness(1.2);
      }
    }

    .menu-lobby {
      position: fixed;
      inset: 0;
      z-index: 240;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 1;
      visibility: visible;
      transition:
        opacity 0.42s ease,
        visibility 0.42s ease,
        transform 0.52s cubic-bezier(0.4, 0, 0.2, 1);
      transform: scale(1);
    }

    .menu-lobby--hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: scale(1.04);
    }

    .menu-lobby__coins {
      position: absolute;
      top: 20px;
      right: 22px;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      max-width: min(96vw, 420px);
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(6, 12, 36, 0.72);
      border: 1px solid rgba(255, 215, 120, 0.35);
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    }

    .menu-lobby__coins-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 220, 150, 0.9);
    }

    .menu-lobby__coins-value {
      font-size: 20px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: #ffe08a;
      text-shadow: 0 0 12px rgba(255, 200, 80, 0.45);
      flex-shrink: 0;
      white-space: nowrap;
      text-align: right;
    }

    .lobby-shop-toggle {
      margin-left: 4px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #0a1430;
      background: linear-gradient(180deg, #a8d4ff 0%, #6aa8f0 100%);
      border: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 40, 120, 0.35);
    }

    .lobby-shop-toggle:hover {
      filter: brightness(1.06);
    }

    .lobby-settings-toggle {
      margin-left: 4px;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #0f2030;
      background: linear-gradient(180deg, #c4ffd8 0%, #6bd49a 100%);
      border: 1px solid rgba(255, 255, 255, 0.35);
      border-radius: 999px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 80, 60, 0.28);
    }

    .lobby-settings-toggle:hover {
      filter: brightness(1.06);
    }

    .lobby-settings {
      position: fixed;
      inset: 0;
      z-index: 341;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(4, 12, 28, 0.74);
      backdrop-filter: blur(6px);
    }

    .lobby-settings[hidden] {
      display: none;
    }

    .lobby-settings__panel {
      width: 100%;
      max-width: 440px;
      max-height: min(88vh, 520px);
      overflow: auto;
      padding: 20px 22px 22px;
      border-radius: 18px;
      background: rgba(12, 18, 42, 0.94);
      border: 1px solid rgba(120, 220, 180, 0.35);
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 24px 60px rgba(0, 40, 40, 0.55);
    }

    .lobby-settings__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .lobby-settings__title {
      margin: 0;
      font-size: 20px;
      color: #e8fff4;
    }

    .lobby-settings__close {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      margin: -6px -6px 0 0;
      font-size: 26px;
      line-height: 1;
      color: rgba(220, 245, 235, 0.88);
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    .lobby-settings__close:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .lobby-settings__fieldset {
      margin: 0 0 16px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(100, 160, 200, 0.28);
      background: rgba(8, 14, 36, 0.65);
    }

    .lobby-settings__legend {
      padding: 0 6px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(160, 230, 200, 0.95);
    }

    .lobby-settings__radio,
    .lobby-settings__check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 10px 0 0;
      font-size: 13px;
      line-height: 1.45;
      color: rgba(210, 228, 255, 0.92);
      cursor: pointer;
    }

    .lobby-settings__radio:first-of-type,
    .lobby-settings__check {
      margin-top: 8px;
    }

    .lobby-settings__radio input,
    .lobby-settings__check input {
      margin-top: 3px;
      flex-shrink: 0;
    }

    .lobby-settings__hint {
      margin: 0;
      font-size: 11px;
      line-height: 1.45;
      color: rgba(160, 190, 220, 0.78);
    }

    .lobby-dev-password {
      position: fixed;
      inset: 0;
      z-index: 343;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(4, 12, 28, 0.78);
      backdrop-filter: blur(6px);
    }

    .lobby-dev-password[hidden] {
      display: none;
    }

    .lobby-dev-password__panel {
      width: 100%;
      max-width: 380px;
      padding: 20px 22px 22px;
      border-radius: 18px;
      background: rgba(12, 18, 42, 0.94);
      border: 1px solid rgba(180, 140, 255, 0.35);
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 24px 60px rgba(30, 20, 60, 0.55);
    }

    .lobby-dev-password__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .lobby-dev-password__title {
      margin: 0;
      font-size: 20px;
      color: #ede8ff;
    }

    .lobby-dev-password__close {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      margin: -6px -6px 0 0;
      font-size: 26px;
      line-height: 1;
      color: rgba(220, 215, 255, 0.88);
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    .lobby-dev-password__close:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .lobby-dev-password__hint {
      margin: 0 0 14px;
      font-size: 13px;
      line-height: 1.45;
      color: rgba(200, 210, 255, 0.85);
    }

    .lobby-dev-password__input {
      width: 100%;
      box-sizing: border-box;
      padding: 12px 14px;
      margin-bottom: 8px;
      font-size: 16px;
      color: #f0f4ff;
      background: rgba(8, 14, 36, 0.85);
      border: 1px solid rgba(120, 160, 220, 0.35);
      border-radius: 12px;
    }

    .lobby-dev-password__input:focus {
      outline: none;
      border-color: rgba(180, 140, 255, 0.65);
      box-shadow: 0 0 0 2px rgba(140, 100, 255, 0.25);
    }

    .lobby-dev-password__error {
      margin: 0 0 12px;
      font-size: 13px;
      color: #ff8a8a;
    }

    .lobby-dev-password__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }

    .lobby-dev-password__btn {
      flex: 1;
      min-width: 120px;
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-radius: 999px;
      cursor: pointer;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: rgba(40, 50, 90, 0.85);
      color: rgba(230, 235, 255, 0.92);
    }

    .lobby-dev-password__btn:hover {
      filter: brightness(1.08);
    }

    .lobby-dev-password__btn--primary {
      border-color: rgba(200, 160, 255, 0.45);
      background: linear-gradient(180deg, #9a7dff 0%, #6b4bdb 100%);
      color: #fff;
    }

    .arena.playing.arena--tablet-mode {
      touch-action: none;
    }

    .touch-game-controls {
      --touch-pad: clamp(88px, min(18vmin, 22vw), 124px);
      --touch-knob: clamp(36px, min(9vmin, 11vw), 50px);
      --touch-dir-cell: clamp(34px, min(7.2vmin, 8.5vw), 48px);
      --touch-dir-gap: clamp(3px, 1vmin, 6px);
      position: fixed;
      inset: 0;
      z-index: 72;
      pointer-events: none;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: clamp(6px, 2vmin, 14px);
      padding-top: max(8px, env(safe-area-inset-top, 0px));
      padding-right: max(8px, env(safe-area-inset-right, 0px));
      padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
      padding-left: max(8px, env(safe-area-inset-left, 0px));
      box-sizing: border-box;
    }

    .touch-game-controls[hidden] {
      display: none !important;
    }

    .touch-game-controls .touch-joystick,
    .touch-game-controls .touch-game-controls__stack,
    .touch-game-controls .touch-game-controls__left {
      pointer-events: auto;
      flex-shrink: 0;
      max-width: 100%;
    }

    .touch-game-controls__left {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: clamp(6px, 1.5vmin, 10px);
    }

    .touch-pause-lobby {
      display: flex;
      flex-direction: column;
      gap: clamp(4px, 1vmin, 8px);
      width: var(--touch-pad);
      max-width: 100%;
    }

    .touch-meta-btn {
      width: 100%;
      box-sizing: border-box;
      padding: clamp(8px, 2vmin, 12px) clamp(6px, 1.5vmin, 10px);
      font-size: clamp(9px, 2.3vmin, 12px);
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-radius: 999px;
      border: 2px solid rgba(255, 255, 255, 0.38);
      cursor: pointer;
      touch-action: manipulation;
      box-shadow: 0 5px 14px rgba(0, 0, 0, 0.38);
      color: rgba(255, 255, 255, 0.96);
    }

    .touch-meta-btn:active {
      transform: scale(0.97);
    }

    .touch-meta-btn--pause {
      background: linear-gradient(180deg, #f0b860 0%, #c07820 100%);
      border-color: rgba(255, 230, 180, 0.55);
      color: #1a1208;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    }

    .touch-meta-btn--lobby {
      background: linear-gradient(180deg, #5a7ad8 0%, #3048a8 100%);
      border-color: rgba(180, 210, 255, 0.45);
    }

    .touch-game-controls__stack {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: clamp(6px, 1.5vmin, 10px);
      margin-bottom: 0;
    }

    .touch-joystick {
      position: relative;
      width: var(--touch-pad);
      height: var(--touch-pad);
      margin-bottom: 0;
      touch-action: none;
      user-select: none;
    }

    .touch-joystick__ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.14) 0%, transparent 45%),
        rgba(10, 20, 48, 0.65);
      border: 2px solid rgba(130, 180, 255, 0.42);
      box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.35),
        0 6px 22px rgba(0, 0, 0, 0.45);
    }

    .touch-joystick__knob {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--touch-knob);
      height: var(--touch-knob);
      margin-left: calc(var(--touch-knob) * -0.5);
      margin-top: calc(var(--touch-knob) * -0.5);
      border-radius: 50%;
      background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.35) 0%, rgba(90, 140, 240, 0.95) 42%, #2848a8 100%);
      border: 2px solid rgba(255, 255, 255, 0.45);
      box-shadow: 0 4px 14px rgba(0, 30, 90, 0.55);
      transform: translate(0, 0);
      transition: transform 0.05s ease-out;
      pointer-events: none;
    }

    .touch-dir-grid {
      display: grid;
      grid-template-columns: var(--touch-dir-cell) var(--touch-dir-cell) var(--touch-dir-cell);
      grid-template-rows: var(--touch-dir-cell) var(--touch-dir-cell) var(--touch-dir-cell);
      gap: var(--touch-dir-gap);
      touch-action: manipulation;
    }

    .touch-dir-gap {
      pointer-events: none;
    }

    .touch-dir {
      padding: 0;
      font-size: clamp(14px, 4vmin, 18px);
      line-height: 1;
      color: #eaf4ff;
      background: rgba(16, 26, 56, 0.82);
      border: 2px solid rgba(120, 170, 255, 0.45);
      border-radius: clamp(10px, 2vmin, 14px);
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
      touch-action: manipulation;
    }

    .touch-dir:active {
      filter: brightness(1.12);
    }

    .touch-dir.is-selected {
      border-color: rgba(255, 210, 120, 0.95);
      background: rgba(60, 45, 90, 0.88);
      box-shadow: 0 0 16px rgba(255, 200, 100, 0.35);
    }

    .touch-action-btn {
      width: 100%;
      max-width: calc(var(--touch-dir-cell) * 3 + var(--touch-dir-gap) * 2);
      min-width: 0;
      box-sizing: border-box;
      padding: clamp(9px, 2.2vmin, 14px) clamp(12px, 3vmin, 18px);
      font-size: clamp(11px, 2.6vmin, 14px);
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-radius: 999px;
      border: 2px solid rgba(255, 255, 255, 0.35);
      cursor: pointer;
      touch-action: manipulation;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    }

    .touch-action-btn--bomb {
      color: #fff8f0;
      background: linear-gradient(180deg, #ff7088 0%, #c01840 100%);
    }

    .touch-action-btn:active {
      transform: scale(0.97);
    }

    @media (orientation: landscape) and (max-height: 520px) {
      .touch-game-controls {
        --touch-pad: clamp(72px, 34vh, 108px);
        --touch-knob: clamp(30px, 16vh, 44px);
        --touch-dir-cell: clamp(28px, 14vh, 40px);
        --touch-dir-gap: clamp(2px, 0.8vh, 5px);
      }
    }

    @media (max-width: 380px) {
      .touch-game-controls {
        --touch-pad: clamp(76px, 34vw, 100px);
        --touch-dir-cell: clamp(30px, 17vw, 42px);
      }
    }

    .lobby-shop {
      position: fixed;
      inset: 0;
      z-index: 340;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(4, 8, 24, 0.72);
      backdrop-filter: blur(6px);
    }

    .lobby-shop[hidden] {
      display: none;
    }

    .lobby-shop__panel {
      width: 100%;
      max-width: 420px;
      max-height: min(86vh, 560px);
      display: flex;
      flex-direction: column;
      padding: 20px 22px 22px;
      border-radius: 18px;
      background: rgba(10, 14, 40, 0.92);
      border: 1px solid rgba(130, 180, 255, 0.35);
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 24px 60px rgba(0, 0, 50, 0.65);
    }

    .lobby-shop__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .lobby-shop__title {
      margin: 0;
      font-size: 20px;
      color: #e8f0ff;
    }

    .lobby-shop__close {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      margin: -6px -6px 0 0;
      font-size: 26px;
      line-height: 1;
      color: rgba(220, 230, 255, 0.85);
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    .lobby-shop__close:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    .lobby-shop__hint {
      margin: 0 0 14px;
      font-size: 12px;
      line-height: 1.45;
      color: rgba(180, 200, 255, 0.82);
    }

    .lobby-shop__tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
    }

    .lobby-shop__tab {
      flex: 1;
      padding: 8px 6px;
      font-size: 12px;
      font-weight: 700;
      color: rgba(200, 215, 255, 0.75);
      background: rgba(30, 40, 80, 0.5);
      border: 1px solid rgba(100, 140, 220, 0.25);
      border-radius: 10px;
      cursor: pointer;
    }

    .lobby-shop__tab--active {
      color: #0a1430;
      background: linear-gradient(180deg, #c8e2ff 0%, #7eb6ff 100%);
      border-color: rgba(255, 255, 255, 0.35);
    }

    .lobby-shop__list {
      overflow: auto;
      flex: 1;
      min-height: 0;
      padding-right: 4px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .shop-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(20, 28, 60, 0.55);
      border: 1px solid rgba(90, 120, 200, 0.22);
    }

    .shop-item__body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .shop-item-preview-wrap {
      flex-shrink: 0;
      width: 60px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: rgba(0, 0, 16, 0.35);
      border: 1px solid rgba(120, 170, 255, 0.18);
      overflow: hidden;
    }

    /* Şapka / kıyafet: oyuncu .player position:absolute lobide kutudan taşıyordu; sabit kutu + göreli hizalama */
    .shop-item-preview-wrap--character {
      position: relative;
      width: 76px;
      height: 76px;
      min-width: 76px;
      min-height: 76px;
      padding: 0;
      overflow: hidden;
      background:
        radial-gradient(ellipse 88% 70% at 50% 88%, rgba(55, 85, 155, 0.42) 0%, transparent 62%),
        linear-gradient(165deg, rgba(18, 26, 52, 0.92) 0%, rgba(4, 8, 22, 0.78) 100%);
      border: 1px solid rgba(130, 175, 255, 0.28);
    }

    .shop-item-preview-wrap--character .shop-item-preview--crew.player {
      position: relative;
      left: auto;
      top: auto;
      width: var(--icon-size);
      height: var(--icon-size);
      margin: 0 auto;
      flex-shrink: 0;
      z-index: 0;
      transform: translateZ(0);
      will-change: auto;
    }

    .shop-item-preview-wrap--character .shop-item-preview--crew .pa-tilt {
      transform: translateZ(0);
    }

    .shop-item-preview-wrap--character .shop-item-preview--crew .player-avatar {
      position: relative;
      inset: auto;
      width: var(--icon-size);
      height: var(--icon-size);
      margin: 0 auto;
      perspective: 150px;
      perspective-origin: 52% 56%;
      pointer-events: none;
      transform: scale(0.58) translateZ(0);
      transform-origin: 50% 90%;
      image-rendering: pixelated;
      transform-style: preserve-3d;
      backface-visibility: hidden;
    }

    .shop-item-preview-wrap--character .shop-item-preview--crew .sprite-wrap,
    .shop-item-preview-wrap--character .shop-item-preview--crew .crew-root {
      image-rendering: pixelated;
      transform-style: preserve-3d;
      backface-visibility: hidden;
    }

    .shop-item-preview-wrap--character .shop-item-preview-sword {
      opacity: 1;
      filter: none;
    }

    .shop-item-preview--sword-only {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
    }

    .shop-item-preview--sword-only svg {
      height: 52px;
      width: auto;
      image-rendering: pixelated;
    }

    .shop-item__meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-align: left;
    }

    .shop-item__name {
      font-size: 14px;
      font-weight: 700;
      color: #f0f4ff;
    }

    .shop-item__price {
      font-size: 12px;
      color: rgba(255, 210, 120, 0.95);
    }

    .shop-item__actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .shop-item__badge {
      font-size: 11px;
      font-weight: 700;
      color: rgba(140, 255, 180, 0.95);
    }

    .shop-buy-btn,
    .shop-equip-btn {
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 700;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      cursor: pointer;
    }

    .shop-buy-btn {
      color: #0a1430;
      background: linear-gradient(180deg, #ffe8a0 0%, #f0b840 100%);
    }

    .shop-buy-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .shop-equip-btn {
      color: #e8f0ff;
      background: rgba(50, 70, 140, 0.75);
    }

    .shop-equip-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .lobby-color-label {
      margin: 0 0 10px;
      font-size: 13px;
      color: rgba(180, 205, 255, 0.9);
    }

    .lobby-color-picker {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      max-width: 280px;
      margin: 0 auto 22px;
    }

    .lobby-color-swatch {
      width: 32px;
      height: 32px;
      padding: 0;
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      cursor: pointer;
      box-sizing: border-box;
      transition:
        transform 0.12s ease,
        box-shadow 0.12s ease;
    }

    .lobby-color-swatch:hover {
      transform: scale(1.08);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
    }

    .lobby-color-swatch.is-selected {
      box-shadow:
        0 0 0 3px #f0f4ff,
        0 0 14px rgba(120, 180, 255, 0.65);
      border-color: rgba(255, 255, 255, 0.65);
    }

    .lobby-color-swatch:focus-visible {
      outline: 2px solid #9ec5ff;
      outline-offset: 3px;
    }

    .menu-lobby__space {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(90, 70, 180, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(30, 100, 160, 0.25) 0%, transparent 50%),
        linear-gradient(180deg, #0a0620 0%, #121036 42%, #0c1440 72%, #040818 100%);
    }

    .menu-lobby__nebula {
      position: absolute;
      inset: -20%;
      background:
        radial-gradient(ellipse at 22% 35%, rgba(255, 100, 200, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 72% 18%, rgba(100, 200, 255, 0.1) 0%, transparent 38%),
        radial-gradient(ellipse at 58% 70%, rgba(180, 120, 255, 0.07) 0%, transparent 42%);
      animation: lobby-nebula-drift 22s linear infinite alternate;
      filter: blur(1px);
    }

    @keyframes lobby-nebula-drift {
      0% {
        transform: translate(0, 0) rotate(0deg);
      }
      100% {
        transform: translate(-3%, -2%) rotate(4deg);
      }
    }

    .menu-lobby__stars {
      position: absolute;
      inset: 0;
      background-repeat: repeat;
      background-size: 400px 400px;
      animation: lobby-stars-shift 140s linear infinite;
      opacity: 0.9;
      mix-blend-mode: screen;
    }

    .menu-lobby__stars--1 {
      background-image:
        radial-gradient(1px 1px at 20px 80px, rgba(255, 255, 255, 0.95) 0%, transparent 100%),
        radial-gradient(1px 1px at 230px 30px, rgba(255, 255, 255, 0.8) 0%, transparent 100%),
        radial-gradient(2px 2px at 120px 200px, rgba(200, 230, 255, 1) 0%, transparent 100%),
        radial-gradient(1px 1px at 310px 160px, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 370px 90px, rgba(255, 255, 255, 0.85) 0%, transparent 100%),
        radial-gradient(1px 1px at 160px 320px, rgba(255, 255, 255, 0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 340px 300px, rgba(255, 230, 200, 0.9) 0%, transparent 100%);
      animation-duration: 95s;
    }

    .menu-lobby__stars--2 {
      background-position: 140px 200px;
      background-image:
        radial-gradient(1px 1px at 42px 12px, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 288px 110px, rgba(255, 255, 255, 0.65) 0%, transparent 100%),
        radial-gradient(1px 1px at 60px 240px, rgba(240, 255, 220, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 180px 40px, rgba(200, 215, 255, 1) 0%, transparent 100%),
        radial-gradient(1px 1px at 320px 220px, rgba(255, 255, 255, 0.72) 0%, transparent 100%);
      animation-duration: 130s;
      animation-direction: reverse;
      opacity: 0.75;
    }

    @keyframes lobby-stars-shift {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(-120px, -80px);
      }
    }

    .menu-lobby__meteor {
      position: absolute;
      width: 3px;
      height: 2px;
      border-radius: 1px;
      background: rgba(255, 255, 255, 0.95);
      box-shadow:
        -5px 1px 0 rgba(220, 240, 255, 0.6),
        -12px 2px 0 rgba(140, 180, 230, 0.28),
        -22px 4px 0 rgba(70, 100, 180, 0.12);
      opacity: 0;
      animation: meteor-streak linear infinite;
    }

    .menu-lobby__meteor--1 {
      left: 15%;
      top: -5%;
      animation-duration: 2.8s;
      animation-delay: 0.3s;
    }

    .menu-lobby__meteor--2 {
      left: 65%;
      top: -12%;
      transform: rotate(-18deg);
      animation-duration: 3.9s;
      animation-delay: 1.9s;
    }

    .menu-lobby__meteor--3 {
      left: 38%;
      top: -18%;
      transform: rotate(-8deg);
      animation-duration: 5.2s;
      animation-delay: 3.2s;
    }

    @keyframes meteor-streak {
      0% {
        opacity: 0;
        transform: translate(0, 0) rotate(-35deg);
      }
      8% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translate(-140vw, 85vh) rotate(-35deg);
      }
    }

    .menu-lobby__satellite {
      position: absolute;
      width: 10px;
      height: 4px;
      background: rgba(180, 195, 220, 0.85);
      border-radius: 1px;
      box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.45);
      animation: orbit-sat linear infinite;
    }

    .menu-lobby__satellite::after {
      content: "";
      position: absolute;
      left: 3px;
      top: -2px;
      width: 1px;
      height: 8px;
      background: rgba(160, 180, 210, 0.5);
    }

    .menu-lobby__satellite--a {
      left: 10%;
      top: 42%;
      animation-duration: 11s;
    }

    .menu-lobby__satellite--b {
      right: 8%;
      top: 52%;
      animation-duration: 15s;
      animation-delay: -4s;
    }

    @keyframes orbit-sat {
      0% {
        transform: translate(0, 0);
        opacity: 0.85;
      }
      33% {
        transform: translate(25vw, -8px);
        opacity: 0.6;
      }
      66% {
        transform: translate(52vw, 6px);
        opacity: 0.95;
      }
      100% {
        transform: translate(92vw, -4px);
        opacity: 0.85;
      }
    }

    .menu-lobby__float {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(140, 200, 255, 0.15) 50%, transparent 70%);
      filter: blur(0.6px);
      animation: orb-float linear infinite alternate;
      pointer-events: none;
      opacity: 0.65;
    }

    .menu-lobby__float--1 {
      width: 8px;
      height: 8px;
      left: 18%;
      top: 60%;
      animation-duration: 4.8s;
    }

    .menu-lobby__float--2 {
      width: 5px;
      height: 5px;
      right: 24%;
      top: 38%;
      animation-duration: 3.9s;
      animation-delay: -1s;
    }

    .menu-lobby__float--3 {
      width: 6px;
      height: 6px;
      left: 48%;
      top: 82%;
      animation-duration: 5.8s;
      animation-delay: -2.2s;
    }

    .menu-lobby__float--4 {
      width: 4px;
      height: 4px;
      right: 12%;
      top: 74%;
      animation-duration: 3.2s;
      animation-delay: -0.4s;
    }

    @keyframes orb-float {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(12px, -18px);
      }
    }

    .menu-lobby__panel {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: 420px;
      padding: 36px 40px 40px;
      background: rgba(8, 10, 32, 0.65);
      border: 1px solid rgba(120, 170, 255, 0.28);
      border-radius: 20px;
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 20px 50px rgba(0, 0, 40, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(10px);
      animation: lobby-panel-rise 1s ease forwards;
      transform-origin: 50% 80%;
    }

    @keyframes lobby-panel-rise {
      0% {
        opacity: 0;
        transform: translateY(22px) scale(0.96);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .menu-lobby__tag {
      margin: 0 0 8px;
      font-size: 12px;
      letter-spacing: 0.55em;
      text-transform: uppercase;
      color: rgba(164, 200, 255, 0.75);
      text-indent: 0.55em;
    }

    .menu-lobby__title {
      margin: 0 0 20px;
      font-size: 36px;
      line-height: 1.08;
      color: #f0f4ff;
      text-shadow:
        0 0 30px rgba(100, 150, 255, 0.45),
        0 4px 2px rgba(0, 0, 30, 0.8);
    }

    .menu-lobby__title-sub {
      font-size: 0.72em;
      font-weight: 400;
      color: rgba(200, 220, 255, 0.85);
      letter-spacing: 0.12em;
    }

    .lobby-name-input {
      display: block;
      width: 100%;
      max-width: 280px;
      margin: 0 auto 22px;
      box-sizing: border-box;
      text-align: center;
    }

    .lobby-account-hint {
      max-width: 320px;
      margin: -12px auto 18px;
      font-size: 12px;
      line-height: 1.35;
      color: rgba(180, 205, 255, 0.75);
      text-align: center;
    }

    .lobby-play-btn {
      display: inline-block;
      padding: 14px 44px;
      font-size: 18px;
      font-weight: 700;
      color: #0a1430;
      background: linear-gradient(180deg, #9ec5ff 0%, #6b94ff 45%, #4b74ff 100%);
      border: none;
      border-radius: 999px;
      cursor: pointer;
      box-shadow:
        0 4px 0 #2f4abf,
        0 10px 28px rgba(60, 100, 255, 0.45);
      transition:
        transform 0.14s ease,
        box-shadow 0.14s ease,
        filter 0.14s ease;
    }

    .lobby-play-btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.05);
      box-shadow:
        0 6px 0 #2f4abf,
        0 14px 36px rgba(60, 100, 255, 0.55);
    }

    .lobby-play-btn:active {
      transform: translateY(2px);
      box-shadow:
        0 2px 0 #2f4abf,
        0 6px 16px rgba(60, 100, 255, 0.4);
    }

    .play-mode-modal,
    .mp-lobby-modal {
      position: fixed;
      inset: 0;
      z-index: 9000;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .play-mode-modal[hidden],
    .mp-lobby-modal[hidden] {
      display: none !important;
    }

    .play-mode-modal__backdrop,
    .mp-lobby-modal__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(4, 8, 20, 0.72);
      pointer-events: auto;
      backdrop-filter: blur(6px);
    }

    .play-mode-modal__panel,
    .mp-lobby-modal__panel {
      position: relative;
      z-index: 1;
      width: min(92vw, 400px);
      max-height: 88vh;
      overflow-y: auto;
      padding: 24px 24px 20px;
      box-sizing: border-box;
      background: linear-gradient(165deg, rgba(22, 32, 58, 0.96) 0%, rgba(12, 18, 36, 0.98) 100%);
      border: 1px solid rgba(120, 170, 255, 0.28);
      border-radius: 16px;
      box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      pointer-events: auto;
    }

    .play-mode-modal__title,
    .mp-lobby-modal__title {
      margin: 0 0 16px;
      font-size: 20px;
      font-weight: 700;
      color: #e8efff;
      text-align: center;
      line-height: 1.25;
    }

    .play-mode-modal__btn {
      display: block;
      width: 100%;
      margin-bottom: 10px;
      padding: 12px 16px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      transition:
        transform 0.12s ease,
        filter 0.12s ease;
    }

    .play-mode-modal__btn--primary {
      color: #0a1430;
      background: linear-gradient(180deg, #9ec5ff 0%, #6b94ff 50%, #4b74ff 100%);
      box-shadow: 0 3px 0 #2f4abf;
    }

    .play-mode-modal__btn--accent {
      margin-top: 14px;
      color: #0a2010;
      background: linear-gradient(180deg, #9ef0b0 0%, #4ecf6c 55%, #2fa84a 100%);
      box-shadow: 0 3px 0 #206a32;
    }

    .play-mode-modal__btn--ghost {
      color: rgba(220, 232, 255, 0.88);
      background: rgba(50, 70, 120, 0.35);
      border: 1px solid rgba(140, 180, 255, 0.25);
    }

    .play-mode-modal__btn:hover {
      filter: brightness(1.06);
      transform: translateY(-1px);
    }

    .play-mode-modal__btn:active {
      transform: translateY(1px);
    }

    .mp-lobby-modal__hint {
      font-size: 12px;
      line-height: 1.45;
      color: rgba(180, 200, 240, 0.8);
      margin: 0 0 16px;
    }

    .mp-lobby-modal__hint code {
      font-size: 11px;
      color: #b8d4ff;
      background: rgba(0, 0, 0, 0.25);
      padding: 1px 6px;
      border-radius: 4px;
    }

    .mp-join-code-input {
      display: block;
      width: 100%;
      max-width: 200px;
      margin: 0 auto 14px;
      padding: 12px;
      font-size: 22px;
      letter-spacing: 0.35em;
      text-align: center;
      font-family: ui-monospace, monospace;
      border-radius: 10px;
      border: 1px solid rgba(120, 170, 255, 0.35);
      background: rgba(8, 12, 24, 0.85);
      color: #eef4ff;
      box-sizing: border-box;
    }

    .mp-room-error {
      color: #ff9c9c;
      font-size: 13px;
      text-align: center;
      margin: 0 0 12px;
    }

    .mp-lobby-room {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 14px;
    }

    .mp-lobby-room__main {
      flex: 1 1 160px;
      min-width: 0;
    }

    .mp-lobby-room__code-block {
      flex: 0 0 auto;
      width: min(100%, 160px);
      margin-left: auto;
      text-align: center;
      align-self: center;
    }

    @media (max-width: 520px) {
      .mp-lobby-room__code-block {
        width: 100%;
        margin-left: 0;
      }
    }

    .mp-room-label {
      margin: 0 0 6px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: rgba(180, 200, 240, 0.75);
    }

    .mp-room-code {
      font-family: ui-monospace, monospace;
      font-size: 28px;
      font-weight: 800;
      letter-spacing: 0.12em;
      color: #fff;
      text-shadow: 0 0 18px rgba(120, 180, 255, 0.45);
      padding: 10px 8px;
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(120, 170, 255, 0.3);
    }

    .mp-lobby-room__status {
      margin: 0 0 12px;
      font-size: 13px;
      color: rgba(200, 216, 255, 0.85);
      line-height: 1.35;
    }

    .mp-member-list {
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 14px;
      color: rgba(230, 238, 255, 0.92);
    }

    .mp-member-list li {
      padding: 6px 8px;
      border-radius: 8px;
      margin-bottom: 4px;
      background: rgba(30, 45, 85, 0.45);
    }

    .pause-lobby-btn {
      margin-top: 26px;
      padding: 10px 24px;
      font-size: 15px;
      color: rgba(240, 245, 255, 0.95);
      background: rgba(40, 60, 120, 0.55);
      border: 1px solid rgba(160, 195, 255, 0.35);
      border-radius: 10px;
      cursor: pointer;
      transition:
        background 0.2s ease,
        transform 0.15s ease;
    }

    .pause-lobby-btn:hover {
      background: rgba(60, 90, 160, 0.65);
      transform: translateY(-1px);
    }

    .arena {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: #020202;
    }

    .arena::before {
      content: "";
      position: absolute;
      inset: -10px;
      background-image: 
        radial-gradient(4px 4px at 5% 5%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(4px 4px at 15% 3%, rgba(255,255,255,0.45) 0%, transparent 100%),
        radial-gradient(4px 4px at 3% 15%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(4px 4px at 95% 5%, rgba(255,255,255,0.55) 0%, transparent 100%),
        radial-gradient(4px 4px at 85% 3%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(4px 4px at 97% 15%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(4px 4px at 5% 95%, rgba(255,255,255,0.55) 0%, transparent 100%),
        radial-gradient(4px 4px at 15% 97%, rgba(255,255,255,0.45) 0%, transparent 100%),
        radial-gradient(4px 4px at 3% 85%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(4px 4px at 95% 95%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(4px 4px at 85% 97%, rgba(255,255,255,0.45) 0%, transparent 100%),
        radial-gradient(4px 4px at 97% 85%, rgba(255,255,255,0.5) 0%, transparent 100%);
      pointer-events: none;
      z-index: 0;
    }

    .world {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      width: calc(var(--tile-size) * var(--map-tiles));
      height: calc(var(--tile-size) * var(--map-tiles));
      background-color: #1a2812;
      background-image:
        linear-gradient(to right, rgba(40, 60, 30, 0.2) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(40, 60, 30, 0.2) 1px, transparent 1px);
      background-size:
        var(--tile-size) var(--tile-size),
        var(--tile-size) var(--tile-size);
      will-change: transform;
    }

    .wall {
      position: absolute;
      box-sizing: border-box;
      border-radius: 3px;
      overflow: visible;
      transform-style: preserve-3d;
      perspective: inherit;
      transform: perspective(700px) rotateX(13deg);
      transform-origin: 50% 100%;
      image-rendering: auto;
      z-index: 8;
      border: none;
      background-color: var(--wall-fill);
      background-image:
        linear-gradient(
          188deg,
          rgba(156, 180, 210, 0.38) 0%,
          color-mix(in srgb, var(--wall-fill) 92%, #1a2840) 28%,
          var(--wall-fill) 52%,
          color-mix(in srgb, var(--wall-fill) 55%, #0a1018) 100%
        ),
        radial-gradient(ellipse 85% 55% at 12% 8%, rgba(255, 255, 255, 0.22) 0%, transparent 58%),
        radial-gradient(ellipse 60% 80% at 92% 75%, rgba(0, 12, 32, 0.55) 0%, transparent 52%),
        repeating-linear-gradient(
          92deg,
          rgba(255, 255, 255, 0.028) 0,
          rgba(255, 255, 255, 0.028) 1px,
          transparent 1px,
          transparent 34px
        ),
        repeating-linear-gradient(
          0deg,
          transparent 0,
          transparent 26px,
          rgba(14, 20, 36, 0.42) 26px,
          rgba(14, 20, 36, 0.42) 28px,
          transparent 28px,
          transparent 58px
        );
      box-shadow:
        inset 16px 0 32px rgba(4, 10, 24, 0.58),
        inset -14px -8px 24px rgba(255, 255, 255, 0.035),
        inset 0 -4px 0 rgba(70, 90, 118, 0.28),
        0 -2px 0 rgba(148, 170, 200, 0.1),
        0 8px 28px rgba(0, 4, 16, 0.82),
        0 32px 60px rgba(0, 6, 26, 0.42),
        0 0 0 1px rgba(8, 14, 24, 0.75),
        inset 0 1px 0 rgba(200, 210, 230, 0.08);
      filter: saturate(1.07) brightness(1.03) contrast(1.02);
    }

    .wall::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: clamp(4px, 9%, 11px);
      min-height: 4px;
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--wall-edge) 45%, white),
        color-mix(in srgb, var(--wall-fill) 65%, #121a26)
      );
      transform-origin: 50% 100%;
      transform: rotateX(-34deg);
      border-radius: 3px 3px 2px 2px;
      pointer-events: none;
      z-index: 1;
      box-shadow:
        inset 0 4px 6px rgba(255, 255, 255, 0.2),
        inset 0 -3px 5px rgba(0, 8, 20, 0.55),
        0 -2px 5px rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(20, 32, 48, 0.75);
    }

    .wall::after {
      content: "";
      position: absolute;
      top: 0;
      right: -1px;
      bottom: 0;
      width: clamp(4px, 6.5%, 12px);
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(12, 20, 40, 0.65) 45%,
        #060a12 100%
      );
      border-radius: 0 3px 3px 0;
      pointer-events: none;
      z-index: 2;
      box-shadow:
        inset -3px 0 12px rgba(0, 0, 0, 0.55),
        -3px 0 14px rgba(0, 0, 0, 0.35);
      transform-origin: left center;
    }

    .world-fx {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 20;
      width: calc(var(--tile-size) * var(--map-tiles));
      height: calc(var(--tile-size) * var(--map-tiles));
      pointer-events: none;
      will-change: transform;
    }

    @keyframes storyAmbienceFloat {
      0% {
        opacity: 0;
        transform: translate3d(0, 12px, 0) scale(0.82);
      }
      10% {
        opacity: 0.88;
      }
      55% {
        opacity: 0.52;
      }
      100% {
        opacity: 0;
        transform: translate3d(var(--story-drift-x), var(--story-float-y), 0) scale(1.05);
      }
    }

    .story-ambience-particle {
      position: absolute;
      bottom: 4%;
      font-size: clamp(12px, 2.2vw, 17px);
      font-weight: 800;
      letter-spacing: 0.02em;
      color: rgba(200, 230, 255, 0.55);
      text-shadow:
        0 0 10px rgba(120, 190, 255, 0.45),
        0 0 22px rgba(80, 140, 220, 0.22);
      animation-name: storyAmbienceFloat;
      animation-timing-function: ease-out;
      animation-iteration-count: infinite;
      pointer-events: none;
      will-change: transform, opacity;
    }

    .player {
      position: absolute;
      width: var(--icon-size);
      height: var(--icon-size);
      will-change: transform;
      transform: translate3d(0, 0, 0);
      transform-style: preserve-3d;
      z-index: 60;
      visibility: visible;
      opacity: 1;
    }

    .player .name {
      position: absolute;
      left: 50%;
      bottom: calc(100% + var(--label-gap));
      transform: translate(-50%, 0) translateZ(22px);
      padding: 2px 6px;
      border-radius: 999px;
      font-size: 11px;
      line-height: 1;
      color: var(--label-text);
      background: var(--label-bg);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
      white-space: nowrap;
      pointer-events: none;
      z-index: 20;
    }

    .player .player-avatar {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
      transform: translateZ(0);
      /* Düşük px = daha belirgin derinlik (kameradan uzak merkez) */
      perspective: 128px;
      perspective-origin: 52% 58%;
      pointer-events: none;
    }

    .player .pa-tilt {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
      transform-origin: 50% 90%;
      transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    .sprite-floor-shadow {
      position: absolute;
      left: 5%;
      right: 5%;
      bottom: -7%;
      height: 24%;
      z-index: 1;
      --shadow-color: #3a4660;
      border-radius: 50%;
      transform: rotateX(86deg) translateZ(-12px);
      transform-style: preserve-3d;
      filter: blur(0.42px);
      background: radial-gradient(
        ellipse at 50% 30%,
        color-mix(in srgb, var(--shadow-color) 42%, #000000) 0%,
        color-mix(in srgb, var(--shadow-color) 22%, rgba(0, 0, 0, 0.75)) 38%,
        rgba(0, 0, 0, 0.28) 55%,
        transparent 76%
      );
    }

    @supports not (background: color-mix(in srgb, red 50%, blue)) {
      .sprite-floor-shadow {
        background: radial-gradient(
          ellipse at 50% 30%,
          rgba(25, 30, 40, 0.78) 0%,
          rgba(14, 16, 24, 0.45) 48%,
          transparent 74%
        );
      }
    }

    /*
      Yön (ekran): aşağı = ön (vizör kameraya), yukarı = sırt (rotateY 180),
      sağ/sol = profil; sağa giderken +Y yaw sağ profili gösterir.
    */
    .player .sprite-wrap {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
      transform-origin: 50% 84%;
      z-index: 4;
    }

    .player.dir-down .sprite-wrap {
      transform: rotateX(-8deg) rotateY(0deg);
    }

    .player.dir-up .sprite-wrap {
      transform: rotateX(10deg) rotateY(180deg);
    }

    .player.dir-right .sprite-wrap {
      transform: rotateX(-6deg) rotateY(32deg);
    }

    .player.dir-left .sprite-wrap {
      transform: rotateX(-6deg) rotateY(-32deg);
    }

    .player .sprite-flip {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transform-origin: 50% 84%;
      transition: transform 0.2s ease;
    }

    .cosmetic-hat {
      position: absolute;
      left: 50%;
      top: 15%;
      width: 24px;
      height: 12px;
      margin-left: -12px;
      pointer-events: none;
      z-index: 8;
      image-rendering: pixelated;
      transform-style: preserve-3d;
      backface-visibility: visible;
      -webkit-backface-visibility: visible;
      transform: translateZ(20px);
      box-sizing: border-box;
    }

    /* Keşif şapkası — vizörün üzerinde küçük siper */
    .cosmetic-hat--cap {
      top: 10%;
      height: 8px;
      background: linear-gradient(180deg, #3a5898 0 50%, #2a4080 50% 100%);
      border-radius: 2px 2px 0 0;
      box-shadow:
        inset 0 -2px 0 rgba(0, 0, 0, 0.25),
        2px 6px 0 -1px #1e2f58,
        -2px 6px 0 -1px #1e2f58,
        0 6px 0 0 #284878;
    }

    .cosmetic-hat--crown {
      top: 8%;
      height: 10px;
      background:
        linear-gradient(90deg, transparent 0 20%, #d4af37 20% 35%, transparent 35% 50%, #d4af37 50% 65%, transparent 65% 80%, #d4af37 80% 100%),
        linear-gradient(180deg, #f0dc78 40%, #b8922a 40%);
      clip-path: polygon(8% 100%, 12% 35%, 25% 60%, 38% 30%, 50% 52%, 62% 30%, 75% 60%, 88% 35%, 92% 100%);
      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
    }

    .cosmetic-hat--horn {
      top: 12%;
      width: 8px;
      height: 16px;
      margin-left: 2px;
      background: linear-gradient(90deg, #7a5838 30%, #c49868 55%, #4a3018 100%);
      border-radius: 40% 60% 20% 20%;
      transform: translateZ(21px) rotate(-18deg);
    }

    .cosmetic-hat--beanie {
      top: 7%;
      width: 24px;
      height: 10px;
      margin-left: -12px;
      background: radial-gradient(
        ellipse at 50% 0%,
        #5a6890 0%,
        #384060 70%,
        #202838 100%
      );
      border-radius: 50% 50% 30% 30%;
      transform: translateZ(20px);
    }

    .cosmetic-hat--earmuffs {
      top: 12%;
      width: 26px;
      height: 8px;
      margin-left: -13px;
      background: radial-gradient(circle at 15% 50%, #d84040 0 35%, transparent 36%),
        radial-gradient(circle at 85% 50%, #d84040 0 35%, transparent 36%),
        linear-gradient(90deg, transparent 38%, #4a4860 38% 62%, transparent 62%);
      transform: translateZ(20px);
    }

    .cosmetic-hat--goggles {
      top: 14%;
      width: 26px;
      height: 7px;
      margin-left: -13px;
      background: radial-gradient(circle at 26% 50%, rgba(140, 255, 230, 0.55) 0 40%, transparent 42%),
        radial-gradient(circle at 74% 50%, rgba(140, 255, 230, 0.55) 0 40%, transparent 42%),
        linear-gradient(#2a3448, #182030);
      border-radius: 2px;
      transform: translateZ(21px);
    }

    .cosmetic-hat--vizor {
      top: 11%;
      width: 24px;
      height: 5px;
      margin-left: -12px;
      background: linear-gradient(180deg, #88c0ff, #3870d0);
      border-radius: 1px;
      opacity: 0.92;
      transform: translateZ(22px);
    }

    .cosmetic-hat--petals {
      top: 4%;
      width: 26px;
      height: 12px;
      margin-left: -13px;
      background: radial-gradient(circle at 30% 40%, #ff6890 0 22%, transparent 24%),
        radial-gradient(circle at 62% 30%, #ffd060 0 20%, transparent 22%),
        radial-gradient(circle at 74% 70%, #80ff96 0 22%, transparent 24%),
        radial-gradient(circle at 38% 80%, #b080ff 0 20%, transparent 23%);
      transform: translateZ(20px);
    }

    .cosmetic-hat--mohawk {
      top: 2%;
      width: 6px;
      height: 16px;
      margin-left: -3px;
      background: linear-gradient(180deg, #ffd040 0%, #ff2080 100%);
      border-radius: 1px 4px 0 0;
      transform: translateZ(23px);
    }

    .cosmetic-hat--ninja {
      top: 9%;
      width: 24px;
      height: 8px;
      margin-left: -12px;
      background: linear-gradient(135deg, #2a4860 0%, #080c18 100%);
      clip-path: polygon(6% 0, 94% 0, 88% 100%, 12% 100%);
      transform: translateZ(20px);
    }

    .cosmetic-hat--halo {
      top: -2%;
      width: 22px;
      height: 10px;
      margin-left: -11px;
      border-radius: 50%;
      box-shadow:
        inset 0 0 0 2px rgba(255, 240, 140, 0.85),
        0 0 14px rgba(255, 220, 120, 0.75);
      background: transparent;
      opacity: 0.95;
      transform: translateZ(20px);
      animation: hat-halo-pulse 3s ease-in-out infinite alternate;
    }

    @keyframes hat-halo-pulse {
      0% {
        filter: brightness(0.92);
      }
      100% {
        filter: brightness(1.35);
      }
    }

    .crew-root.cosmetic-outfit--stripe .crew-torso-3d .tf-front {
      background-image: repeating-linear-gradient(
          90deg,
          var(--c-front) 0 3px,
          rgba(255, 255, 255, 0.42) 3px 4px,
          rgba(12, 18, 42, 0.65) 4px 8px,
          var(--c-front) 8px 12px
        ),
        linear-gradient(var(--c-front), var(--c-front));
      box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.12);
    }

    /*
      DnyaToxic — Endie tam 2D billboard (çok oyunculu aynı PNG); 3D model gizlenir, yön titreşimi sade bunda.
      Görsel: assets/dnya-endie-sheet.png
    */

    .player-flat-exclusive {
      display: none;
      position: absolute;
      inset: -6% -8% -2% -8%;
      z-index: 8;
      align-items: flex-end;
      justify-content: center;
      pointer-events: none;
    }

    .player-flat-exclusive img {
      width: 108%;
      max-width: none;
      height: auto;
      margin-bottom: -4%;
      object-fit: contain;
      filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }

    .player.player--flat-endie .crew-root {
      visibility: hidden !important;
    }

    .player.player--flat-endie .sprite-wrap {
      transform: none !important;
      transform-origin: 50% 90%;
    }

    .player.walking.player--flat-endie .sprite-wrap {
      transform: none !important;
    }

    .player.player--flat-endie .sprite-flip {
      transform: none !important;
    }

    .player.player--flat-endie .held-sword,
    .player.player--flat-endie .sword-slash,
    .player.player--flat-endie .bomb-place-hands {
      visibility: hidden !important;
    }

    .player.player--flat-endie .cosmetic-hat {
      display: none !important;
    }

    .player.player--flat-endie .player-flat-exclusive {
      display: flex;
    }

    /* Mağaza: düz görsel ön izleme */
    .shop-item-preview-wrap--flat-endie {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 120px;
      padding: 8px;
      background: radial-gradient(circle at 50% 50%, rgba(60, 44, 100, 0.55), rgba(20, 12, 40, 0.92));
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-sizing: border-box;
    }

    img.shop-item-preview-flat-img {
      max-height: 110px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      image-rendering: pixelated;
    }

    /* Skor kartı küçük portre */
    .scoreboard-mini--flat-endie {
      width: var(--icon-size);
      height: var(--icon-size);
      border-radius: 10px;
      overflow: hidden;
      background: radial-gradient(circle at 50% 40%, rgba(90, 60, 130, 0.9), rgba(25, 15, 45, 0.95));
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .scoreboard-mini--flat-endie img {
      width: 92%;
      height: auto;
      object-fit: contain;
      margin-bottom: 2px;
      image-rendering: pixelated;
    }

    /*
      Göğüs yüzü hem .tf hem .tf-front: .tf { position:absolute }.
      position:relative burada absolute'ı ezip 3D yüzü bozmuştu.
      isolation: filter+mix-blend-mode birleşiminde dokunun "kaybolmasını" önler (yeni blend arka planı = yüzün kendisi).
    */
    .crew-root[class*="cosmetic-outfit--"] .crew-torso-3d .tf.tf-front {
      isolation: isolate;
      overflow: hidden;
      border-radius: 1px;
    }

    .crew-root[class*="cosmetic-outfit--"] .crew-torso-3d .crew-visor-3d {
      z-index: 2;
    }

    /* Boyalar yalnızca yüzey polygonu içinde — bacak / kep dahil */
    .crew-root[class*="cosmetic-outfit--"] .crew-cap-3d .cf-front,
    .crew-root[class*="cosmetic-outfit--"] .crew-cap-3d .cf-back,
    .crew-root[class*="cosmetic-outfit--"] .crew-cap-3d .cf-right,
    .crew-root[class*="cosmetic-outfit--"] .crew-cap-3d .cf-left,
    .crew-root[class*="cosmetic-outfit--"] .crew-cap-3d .cf-top,
    .crew-root[class*="cosmetic-outfit--"] .leg-leg .lf-front,
    .crew-root[class*="cosmetic-outfit--"] .leg-leg .lf-back,
    .crew-root[class*="cosmetic-outfit--"] .leg-leg .lf-right,
    .crew-root[class*="cosmetic-outfit--"] .leg-leg .lf-left {
      overflow: hidden;
    }

    /* filter .crew-hull üzerinde tüm prizmayı düzleştirir — yüzey başına uygula, 3D küp korunur */
    .crew-root.cosmetic-outfit--dusk .crew-hull .tf,
    .crew-root.cosmetic-outfit--dusk .crew-hull .cf,
    .crew-root.cosmetic-outfit--dusk .crew-hull .lf {
      filter: saturate(1.22) hue-rotate(-22deg) brightness(0.92) contrast(1.12);
    }

    /* Alacakaranlık — tüm gövde yüzeyi koyu evren tabanı */
    .crew-root.cosmetic-outfit--dusk .crew-torso-3d .tf-front {
      background-image:
        radial-gradient(ellipse 130% 90% at 50% 120%, rgba(255, 90, 160, 0.22) 0%, transparent 46%),
        radial-gradient(ellipse 80% 70% at -5% 30%, rgba(80, 160, 255, 0.28) 0%, transparent 48%),
        radial-gradient(ellipse 70% 60% at 105% 25%, rgba(160, 90, 255, 0.26) 0%, transparent 46%),
        linear-gradient(168deg, #070510 0%, #14082c 28%, #0a1538 52%, #12081a 78%, #05030c 100%),
        linear-gradient(var(--c-front), var(--c-front));
      box-shadow:
        inset 0 0 18px rgba(40, 20, 80, 0.55),
        inset 0 -10px 22px rgba(10, 40, 90, 0.4);
    }

    .crew-root.cosmetic-outfit--dusk .crew-torso-3d .tf-front::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(circle at 12% 18%, #ffffff 0, #ffffff 0.55px, transparent 0.7px),
        radial-gradient(circle at 88% 12%, #e8f4ff 0, #e8f4ff 0.48px, transparent 0.62px),
        radial-gradient(circle at 42% 72%, #ffe8c8 0, #ffe8c8 0.42px, transparent 0.55px),
        radial-gradient(circle at 68% 38%, #fff 0, #fff 0.4px, transparent 0.5px),
        radial-gradient(circle at 22% 48%, #dde8ff 0, transparent 0.9px),
        radial-gradient(circle at 55% 22%, #fff6dd 0, transparent 0.85px),
        radial-gradient(ellipse 220% 220% at 50% 50%, rgba(255, 120, 200, 0.18) 0%, transparent 42%),
        radial-gradient(ellipse 200% 200% at 30% 70%, rgba(60, 140, 255, 0.2) 0%, transparent 45%),
        radial-gradient(ellipse 180% 180% at 75% 35%, rgba(180, 80, 255, 0.16) 0%, transparent 44%),
        linear-gradient(
          125deg,
          rgba(255, 170, 120, 0.35) 0%,
          transparent 28%,
          rgba(140, 80, 220, 0.32) 45%,
          transparent 58%,
          rgba(70, 190, 255, 0.3) 78%,
          transparent 100%
        );
      background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        320% 320%,
        300% 300%,
        280% 280%,
        260% 260%;
      background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        20% 35%,
        70% 60%,
        45% 25%,
        15% 40%;
      mix-blend-mode: screen;
      opacity: 0.92;
      pointer-events: none;
      animation: cosmetic-dusk-drift 9s ease-in-out infinite alternate, cosmetic-dusk-twinkle 3.8s ease-in-out infinite;
    }

    .crew-root.cosmetic-outfit--dusk .crew-torso-3d .tf-front::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 245, 255, 0.14) 47%,
        rgba(200, 190, 255, 0.18) 50%,
        rgba(255, 250, 255, 0.12) 53%,
        transparent 68%
      );
      background-size: 220% 100%;
      mix-blend-mode: soft-light;
      opacity: 0.65;
      pointer-events: none;
      animation: cosmetic-dusk-milky 14s linear infinite;
    }

    .crew-root.cosmetic-outfit--dusk .crew-cap-3d .cf-front,
    .crew-root.cosmetic-outfit--dusk .crew-cap-3d .cf-top {
      background-image:
        radial-gradient(circle at 25% 40%, rgba(255, 255, 255, 0.95) 0, transparent 0.7px),
        radial-gradient(circle at 78% 35%, rgba(220, 235, 255, 0.9) 0, transparent 0.65px),
        radial-gradient(ellipse 140% 120% at 50% 100%, rgba(120, 60, 180, 0.35) 0%, transparent 48%),
        linear-gradient(175deg, rgba(8, 6, 18, 0.92) 0%, rgba(22, 12, 45, 0.88) 55%, rgba(8, 6, 18, 0.92) 100%),
        linear-gradient(180deg, var(--c-cap-front), var(--c-cap-back));
    }

    .crew-root.cosmetic-outfit--dusk .leg-leg .lf-front {
      background-image:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9) 0, transparent 0.55px),
        radial-gradient(circle at 70% 55%, rgba(200, 230, 255, 0.85) 0, transparent 0.5px),
        radial-gradient(ellipse 120% 100% at 50% 0%, rgba(90, 50, 160, 0.32) 0%, transparent 50%),
        linear-gradient(180deg, rgba(12, 6, 24, 0.9) 0%, rgba(18, 10, 40, 0.88) 100%),
        linear-gradient(180deg, var(--c-front), var(--c-back));
    }

    @keyframes cosmetic-dusk-drift {
      0% {
        background-position:
          0 0,
          0 0,
          0 0,
          0 0,
          0 0,
          0 0,
          12% 28%,
          65% 55%,
          40% 18%,
          8% 35%;
      }
      100% {
        background-position:
          0 0,
          0 0,
          0 0,
          0 0,
          0 0,
          0 0,
          88% 72%,
          28% 38%,
          62% 82%,
          92% 58%;
      }
    }

    @keyframes cosmetic-dusk-twinkle {
      0%, 100% {
        opacity: 0.76;
      }
      50% {
        opacity: 1;
      }
    }

    @keyframes cosmetic-dusk-milky {
      0% {
        background-position: 0% 50%;
        opacity: 0.45;
      }
      50% {
        opacity: 0.82;
      }
      100% {
        background-position: 100% 50%;
        opacity: 0.48;
      }
    }

    .crew-root.cosmetic-outfit--camo .crew-hull .tf,
    .crew-root.cosmetic-outfit--camo .crew-hull .cf,
    .crew-root.cosmetic-outfit--camo .crew-hull .lf {
      filter: saturate(1.2) contrast(1.14) brightness(1.04);
    }

    .crew-root.cosmetic-outfit--camo .crew-torso-3d .tf-front {
      background-image: linear-gradient(
          142deg,
          rgba(255, 50, 140, 0.52) 0 14%,
          transparent 14% 28%,
          rgba(55, 255, 155, 0.42) 28% 46%,
          transparent 46% 58%,
          rgba(90, 140, 255, 0.48) 58% 76%,
          transparent 76% 100%
        ),
        linear-gradient(var(--c-front), var(--c-front));
      box-shadow:
        inset 0 0 10px rgba(255, 80, 200, 0.15),
        inset 0 -6px 12px rgba(60, 255, 180, 0.12);
    }

    .crew-root.cosmetic-outfit--iced .crew-hull .tf,
    .crew-root.cosmetic-outfit--iced .crew-hull .cf,
    .crew-root.cosmetic-outfit--iced .crew-hull .lf {
      filter: saturate(1.28) brightness(1.12) hue-rotate(4deg);
    }

    .crew-root.cosmetic-outfit--iced .crew-torso-3d .tf-front {
      box-shadow:
        inset 0 0 16px rgba(25, 70, 160, 0.55),
        inset 0 2px 0 rgba(200, 250, 255, 0.35);
    }

    .crew-root.cosmetic-outfit--iced .crew-torso-3d .tf-front::before {
      content: "";
      position: absolute;
      inset: -12%;
      z-index: 0;
      background:
        linear-gradient(118deg, transparent 46%, rgba(255, 255, 255, 0.96) 47.2%, rgba(190, 250, 255, 0.9) 48%, transparent 49%),
        linear-gradient(-54deg, transparent 52%, rgba(230, 255, 255, 0.92) 53%, rgba(140, 230, 255, 0.85) 54%, transparent 55.5%),
        linear-gradient(12deg, transparent 38%, rgba(180, 245, 255, 0.75) 39.2%, transparent 40.5%),
        linear-gradient(-102deg, transparent 62%, rgba(255, 255, 255, 0.88) 63%, transparent 64%),
        radial-gradient(ellipse 130% 100% at 48% 35%, rgba(35, 90, 210, 0.55) 0%, rgba(12, 40, 120, 0.88) 42%, rgba(4, 18, 72, 0.96) 100%);
      mix-blend-mode: screen;
      opacity: 0.95;
      pointer-events: none;
      animation: cosmetic-iced-frost 3.2s ease-in-out infinite alternate;
    }

    .crew-root.cosmetic-outfit--iced .crew-torso-3d .tf-front::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: repeating-linear-gradient(
        -22deg,
        transparent 0 7px,
        rgba(255, 255, 255, 0.06) 7px 8px,
        transparent 8px 16px
      );
      mix-blend-mode: overlay;
      opacity: 0.5;
      pointer-events: none;
    }

    .crew-root.cosmetic-outfit--iced .crew-cap-3d .cf-front,
    .crew-root.cosmetic-outfit--iced .crew-cap-3d .cf-top {
      box-shadow:
        inset 0 0 8px rgba(80, 190, 255, 0.45),
        inset 0 1px 0 rgba(220, 250, 255, 0.55);
    }

    .crew-root.cosmetic-outfit--iced .leg-leg .lf-front {
      box-shadow:
        inset 0 0 7px rgba(60, 160, 240, 0.45),
        inset 0 1px 0 rgba(200, 240, 255, 0.35);
    }

    @keyframes cosmetic-iced-frost {
      0% {
        opacity: 0.82;
      }
      100% {
        opacity: 1;
      }
    }

    .crew-root.cosmetic-outfit--magma_skin .crew-hull .tf,
    .crew-root.cosmetic-outfit--magma_skin .crew-hull .cf,
    .crew-root.cosmetic-outfit--magma_skin .crew-hull .lf {
      filter:
        brightness(1.12)
        saturate(1.48)
        contrast(1.12);
    }

    .crew-root.cosmetic-outfit--magma_skin .crew-torso-3d .tf-front {
      background-image:
        repeating-linear-gradient(
          72deg,
          transparent 0 3px,
          rgba(255, 150, 45, 0.98) 3px 4px,
          transparent 4px 8px,
          rgba(255, 45, 12, 0.95) 8px 9px,
          transparent 9px 15px,
          rgba(255, 220, 90, 0.75) 15px 16px,
          transparent 16px 22px,
          rgba(255, 90, 25, 0.88) 22px 23px,
          transparent 23px 30px
        ),
        repeating-linear-gradient(
          -32deg,
          transparent 0 7px,
          rgba(255, 70, 18, 0.62) 7px 8px,
          transparent 8px 18px
        ),
        linear-gradient(180deg, var(--c-front), var(--c-bot));
      box-shadow: inset 0 -8px 14px rgba(180, 40, 0, 0.35);
    }

    .crew-root.cosmetic-outfit--magma_skin .crew-torso-3d .tf-front::before {
      content: "";
      position: absolute;
      inset: -18%;
      z-index: 0;
      background:
        radial-gradient(circle at 22% 32%, rgba(255, 240, 120, 0.98) 0, transparent 38%),
        radial-gradient(circle at 82% 24%, rgba(255, 55, 15, 0.95) 0, transparent 34%),
        radial-gradient(circle at 50% 88%, rgba(255, 150, 50, 0.92) 0, transparent 42%),
        radial-gradient(circle at 92% 68%, rgba(255, 110, 35, 0.82) 0, transparent 30%),
        radial-gradient(circle at 8% 72%, rgba(255, 180, 60, 0.7) 0, transparent 26%);
      opacity: 0.78;
      mix-blend-mode: screen;
      pointer-events: none;
      animation: cosmetic-magma-ember 2.2s linear infinite, cosmetic-magma-pulse 1.85s ease-in-out infinite alternate;
    }

    .crew-root.cosmetic-outfit--magma_skin .crew-cap-3d .cf-front {
      background-image:
        repeating-linear-gradient(
          96deg,
          transparent 0 3px,
          rgba(255, 120, 40, 0.95) 3px 4px,
          transparent 4px 10px,
          rgba(255, 55, 20, 0.88) 10px 11px,
          transparent 11px 18px
        ),
        linear-gradient(180deg, var(--c-cap-front), var(--c-cap-back));
    }

    .crew-root.cosmetic-outfit--magma_skin .crew-cap-3d .cf-top {
      background-image:
        repeating-linear-gradient(
          -48deg,
          transparent 0 3px,
          rgba(255, 85, 28, 0.72) 3px 4px,
          transparent 4px 9px
        ),
        linear-gradient(180deg, var(--c-cap-top), var(--c-cap-side));
    }

    .crew-root.cosmetic-outfit--magma_skin .leg-leg .lf-front {
      background-image:
        repeating-linear-gradient(
          84deg,
          transparent 0 2px,
          rgba(255, 110, 38, 0.92) 2px 3px,
          transparent 3px 8px,
          rgba(255, 50, 15, 0.78) 8px 9px,
          transparent 9px 15px
        ),
        linear-gradient(180deg, var(--c-front), var(--c-back));
    }

    @keyframes cosmetic-magma-ember {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(-4px, -5px);
      }
    }

    @keyframes cosmetic-magma-pulse {
      0% {
        opacity: 0.62;
      }
      100% {
        opacity: 0.92;
      }
    }

    .crew-root.cosmetic-outfit--circuit .crew-hull .tf,
    .crew-root.cosmetic-outfit--circuit .crew-hull .cf,
    .crew-root.cosmetic-outfit--circuit .crew-hull .lf {
      filter: saturate(1.18) contrast(1.14) brightness(1.06);
    }

    /* Çip devresi — PCB yeşili, kalın yollar, altın pad */
    .crew-root.cosmetic-outfit--circuit .crew-torso-3d .tf-front {
      background-image:
        repeating-linear-gradient(
          0deg,
          transparent 0 6px,
          rgba(0, 255, 190, 0.22) 6px 7px,
          transparent 7px 12px
        ),
        repeating-linear-gradient(
          90deg,
          transparent 0 5px,
          rgba(40, 220, 255, 0.18) 5px 6px,
          transparent 6px 11px
        ),
        linear-gradient(180deg, #072018 0%, #0a2e22 42%, #061410 100%);
      box-shadow:
        inset 0 0 14px rgba(0, 255, 200, 0.12),
        inset 0 0 24px rgba(0, 0, 0, 0.45);
    }

    .crew-root.cosmetic-outfit--circuit .crew-torso-3d .tf-front::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
        radial-gradient(circle at 18% 28%, rgba(255, 220, 120, 1) 0, rgba(255, 200, 80, 0.65) 1.5px, transparent 2.2px),
        radial-gradient(circle at 82% 65%, rgba(255, 220, 120, 1) 0, rgba(255, 200, 80, 0.65) 1.4px, transparent 2px),
        radial-gradient(circle at 48% 78%, rgba(255, 240, 160, 0.9) 0, transparent 1.8px),
        linear-gradient(0deg, transparent 44%, rgba(0, 255, 190, 0.88) 45.5%, rgba(0, 255, 190, 0.88) 48.5%, transparent 50%),
        linear-gradient(90deg, transparent 62%, rgba(80, 255, 255, 0.75) 63.5%, rgba(80, 255, 255, 0.75) 66.5%, transparent 68%),
        linear-gradient(0deg, transparent 12%, rgba(0, 220, 170, 0.55) 13.5%, rgba(0, 220, 170, 0.55) 14.5%, transparent 16%),
        repeating-linear-gradient(
          -18deg,
          transparent 0 1px,
          rgba(180, 255, 60, 0.38) 1px 2px,
          transparent 2px 5px,
          rgba(0, 255, 220, 0.42) 5px 6px,
          transparent 6px 9px,
          rgba(255, 80, 200, 0.32) 9px 10px,
          transparent 10px 14px
        );
      opacity: 0.95;
      mix-blend-mode: screen;
      pointer-events: none;
      animation: cosmetic-circuit-shift 5s linear infinite, cosmetic-circuit-pulse 2.2s ease-in-out infinite alternate;
    }

    .crew-root.cosmetic-outfit--circuit .crew-torso-3d .tf-front::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: repeating-linear-gradient(
        90deg,
        transparent 0 8px,
        rgba(255, 60, 200, 0.22) 8px 9px,
        transparent 9px 17px
      );
      mix-blend-mode: lighten;
      opacity: 0.38;
      pointer-events: none;
      animation: cosmetic-circuit-scan 2.6s linear infinite;
    }

    .crew-root.cosmetic-outfit--circuit .crew-cap-3d .cf-front,
    .crew-root.cosmetic-outfit--circuit .crew-cap-3d .cf-top {
      background-image:
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 255, 200, 0.35) 2px 3px, transparent 3px 6px),
        repeating-linear-gradient(90deg, transparent 0 3px, rgba(100, 255, 255, 0.22) 3px 4px, transparent 4px 8px),
        radial-gradient(circle at 30% 50%, rgba(255, 215, 100, 0.95) 0, transparent 1.6px),
        linear-gradient(180deg, rgba(8, 22, 16, 0.94) 0%, rgba(12, 36, 28, 0.92) 100%),
        linear-gradient(180deg, var(--c-cap-front), var(--c-cap-back));
    }

    .crew-root.cosmetic-outfit--circuit .leg-leg .lf-front {
      background-image:
        repeating-linear-gradient(
          -12deg,
          transparent 0 2px,
          rgba(0, 255, 210, 0.45) 2px 3px,
          transparent 3px 7px,
          rgba(60, 255, 255, 0.35) 7px 8px,
          transparent 8px 12px
        ),
        linear-gradient(180deg, rgba(5, 20, 14, 0.95) 0%, rgba(8, 28, 18, 0.93) 100%),
        linear-gradient(180deg, var(--c-front), var(--c-back));
    }

    @keyframes cosmetic-circuit-shift {
      0% {
        filter: hue-rotate(0deg) brightness(1);
      }
      50% {
        filter: hue-rotate(18deg) brightness(1.08);
      }
      100% {
        filter: hue-rotate(-12deg) brightness(1.02);
      }
    }

    @keyframes cosmetic-circuit-pulse {
      0% {
        opacity: 0.82;
      }
      100% {
        opacity: 1;
      }
    }

    @keyframes cosmetic-circuit-scan {
      0% {
        transform: translateY(-2px);
        opacity: 0.28;
      }
      50% {
        opacity: 0.48;
      }
      100% {
        transform: translateY(2px);
        opacity: 0.3;
      }
    }

    .crew-root.cosmetic-outfit--hologram .crew-hull .tf,
    .crew-root.cosmetic-outfit--hologram .crew-hull .cf,
    .crew-root.cosmetic-outfit--hologram .crew-hull .lf {
      filter: saturate(1.35) brightness(1.12);
    }

    .crew-root.cosmetic-outfit--hologram {
      animation: hologram-entity-flicker 2.8s ease-in-out infinite;
    }

    .crew-root.cosmetic-outfit--hologram .crew-torso-3d .tf-front::before {
      content: "";
      position: absolute;
      inset: -10% -24%;
      z-index: 0;
      background:
        repeating-linear-gradient(
          178deg,
          rgba(160, 255, 235, 0.32) 0 1px,
          transparent 1px 2px,
          rgba(120, 200, 255, 0.22) 2px 3px,
          transparent 3px 5px
        ),
        repeating-linear-gradient(
          92deg,
          transparent 0 8px,
          rgba(0, 255, 240, 0.08) 8px 9px,
          transparent 9px 22px
        ),
        linear-gradient(
          105deg,
          rgba(255, 0, 200, 0.04) 0%,
          transparent 22%,
          rgba(0, 255, 255, 0.06) 48%,
          transparent 72%,
          rgba(200, 100, 255, 0.05) 100%
        );
      mix-blend-mode: screen;
      pointer-events: none;
      opacity: 0.82;
      animation: hologram-scan 1.65s linear infinite;
    }

    .crew-root.cosmetic-outfit--hologram .crew-torso-3d .tf-front::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 255, 220, 0.07) 35%,
        rgba(120, 255, 255, 0.12) 50%,
        rgba(0, 200, 255, 0.08) 65%,
        transparent 100%
      );
      background-size: 100% 220%;
      mix-blend-mode: soft-light;
      opacity: 0.65;
      pointer-events: none;
      animation: hologram-scan-slow 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
    }

    .crew-root.cosmetic-outfit--hologram .crew-cap-3d .cf-front::before,
    .crew-root.cosmetic-outfit--hologram .crew-cap-3d .cf-top::before {
      content: "";
      position: absolute;
      inset: -18%;
      z-index: 0;
      background: repeating-linear-gradient(
        -15deg,
        rgba(100, 255, 250, 0.22) 0 1px,
        transparent 1px 3px,
        rgba(160, 220, 255, 0.14) 3px 4px,
        transparent 4px 7px
      );
      mix-blend-mode: screen;
      pointer-events: none;
      opacity: 0.62;
      animation: hologram-scan 2.05s linear infinite reverse;
    }

    .crew-root.cosmetic-outfit--hologram .leg-leg .lf-front::before {
      content: "";
      position: absolute;
      inset: -12%;
      z-index: 0;
      background: repeating-linear-gradient(
        88deg,
        rgba(80, 240, 255, 0.2) 0 1px,
        transparent 1px 5px
      );
      mix-blend-mode: screen;
      pointer-events: none;
      opacity: 0.48;
      animation: hologram-scan 1.88s linear infinite;
    }

    .crew-root.cosmetic-outfit--hologram .crew-visor-3d {
      background: linear-gradient(
        165deg,
        rgba(160, 255, 255, 0.42) 0%,
        rgba(40, 180, 255, 0.28) 45%,
        rgba(120, 255, 240, 0.35) 100%
      );
      border-color: rgba(140, 255, 255, 0.75);
      box-shadow:
        0 0 7px rgba(0, 255, 230, 0.65),
        inset 0 0 5px rgba(200, 255, 255, 0.45);
      mix-blend-mode: screen;
      animation: hologram-visor-scan 1.45s ease-in-out infinite alternate;
    }

    @keyframes hologram-scan {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(5px);
      }
    }

    @keyframes hologram-scan-slow {
      0% {
        background-position: 0% 0%;
        opacity: 0.45;
      }
      100% {
        background-position: 0% 100%;
        opacity: 0.82;
      }
    }

    @keyframes hologram-entity-flicker {
      0%, 100% {
        opacity: 0.94;
      }
      22% {
        opacity: 0.88;
      }
      25% {
        opacity: 0.98;
      }
      52% {
        opacity: 0.9;
      }
      55% {
        opacity: 1;
      }
      78% {
        opacity: 0.92;
      }
    }

    @keyframes hologram-visor-scan {
      0% {
        opacity: 0.82;
        filter: brightness(1) hue-rotate(0deg);
      }
      100% {
        opacity: 1;
        filter: brightness(1.2) hue-rotate(-8deg);
      }
    }

    /* Havai fişek patlaması (cosmetic-outfit--prism): premium ametist / kıvılcım */
    .crew-root.cosmetic-outfit--prism .crew-hull .tf,
    .crew-root.cosmetic-outfit--prism .crew-hull .cf,
    .crew-root.cosmetic-outfit--prism .crew-hull .lf {
      filter: saturate(1.5) brightness(1.1) contrast(1.1);
    }

    .crew-root.cosmetic-outfit--prism .crew-hull::after {
      content: "";
      position: absolute;
      inset: -22%;
      pointer-events: none;
      z-index: -2;
      background:
        radial-gradient(ellipse 58% 62% at 50% 46%, rgba(200, 120, 255, 0.42) 0%, rgba(100, 40, 200, 0.12) 45%, transparent 68%),
        radial-gradient(ellipse 85% 40% at 50% 112%, rgba(170, 80, 255, 0.28) 0%, transparent 55%);
      opacity: 0.95;
      mix-blend-mode: screen;
      animation: cosmetic-prism-outer-glow 3.4s ease-in-out infinite alternate;
    }

    @keyframes cosmetic-prism-outer-glow {
      0% {
        opacity: 0.78;
        transform: scale(1);
      }
      100% {
        opacity: 1;
        transform: scale(1.04);
      }
    }

    .crew-root.cosmetic-outfit--prism .crew-hull::before {
      content: "";
      position: absolute;
      inset: -18%;
      pointer-events: none;
      z-index: -1;
      opacity: 1;
      background:
        repeating-conic-gradient(
          from -4deg at 50% 44%,
          transparent 0 7deg,
          rgba(255, 200, 255, 0.95) 7deg 7.9deg,
          rgba(160, 60, 255, 0.88) 7.9deg 9.2deg,
          rgba(60, 10, 120, 0.75) 9.2deg 10.5deg,
          rgba(220, 150, 255, 0.55) 10.5deg 11.4deg,
          transparent 11.4deg 20deg
        ),
        repeating-conic-gradient(
          from 14deg at 50% 44%,
          transparent 0 13deg,
          rgba(180, 90, 255, 0.82) 13deg 14deg,
          rgba(255, 240, 255, 0.45) 14deg 15deg,
          transparent 15deg 28deg
        ),
        repeating-conic-gradient(
          from 33deg at 50% 42%,
          transparent 0 9deg,
          rgba(140, 40, 220, 0.7) 9deg 10deg,
          transparent 10deg 22deg
        );
      mix-blend-mode: screen;
      filter: drop-shadow(0 0 5px rgba(200, 100, 255, 0.85)) drop-shadow(0 0 12px rgba(160, 60, 255, 0.5));
      mask-image: radial-gradient(
        ellipse 54% 58% at 50% 46%,
        transparent 32%,
        #000 37%,
        #000 78%,
        transparent 84%
      );
      -webkit-mask-image: radial-gradient(
        ellipse 54% 58% at 50% 46%,
        transparent 32%,
        #000 37%,
        #000 78%,
        transparent 84%
      );
      animation: cosmetic-prism-crystals 2.9s ease-in-out infinite alternate;
    }

    @keyframes cosmetic-prism-crystals {
      0% {
        opacity: 0.88;
        transform: rotate(0deg) scale(1);
        filter: drop-shadow(0 0 4px rgba(200, 100, 255, 0.75)) drop-shadow(0 0 10px rgba(160, 60, 255, 0.45));
      }
      100% {
        opacity: 1;
        transform: rotate(8deg) scale(1.06);
        filter: drop-shadow(0 0 9px rgba(240, 180, 255, 1)) drop-shadow(0 0 18px rgba(140, 70, 255, 0.65));
      }
    }

    .crew-root.cosmetic-outfit--prism .crew-torso-3d .tf-front {
      background-image:
        linear-gradient(
          158deg,
          rgba(45, 12, 85, 0.95) 0%,
          rgba(110, 45, 190, 0.82) 28%,
          rgba(160, 70, 255, 0.55) 48%,
          rgba(55, 15, 105, 0.92) 72%,
          rgba(32, 6, 62, 0.98) 100%
        ),
        linear-gradient(var(--c-front), var(--c-bot));
      box-shadow:
        inset 0 0 18px rgba(220, 160, 255, 0.5),
        inset 0 -10px 24px rgba(70, 20, 130, 0.55),
        0 0 14px rgba(180, 90, 255, 0.4);
    }

    .crew-root.cosmetic-outfit--prism .crew-torso-3d .tf-back {
      background: color-mix(in srgb, var(--c-back) 32%, #4a148c 68%);
      box-shadow: inset 0 0 10px rgba(150, 80, 220, 0.35);
    }

    .crew-root.cosmetic-outfit--prism .crew-torso-3d .tf-right {
      background: color-mix(in srgb, var(--c-right) 30%, #5c1fa8 70%);
      box-shadow: inset 0 0 10px rgba(130, 60, 200, 0.32);
    }

    .crew-root.cosmetic-outfit--prism .crew-torso-3d .tf-left {
      background: color-mix(in srgb, var(--c-left) 30%, #3d0f78 70%);
      box-shadow: inset 0 0 10px rgba(120, 50, 190, 0.32);
    }

    .crew-root.cosmetic-outfit--prism .crew-torso-3d .tf-top {
      background: color-mix(in srgb, var(--c-top) 35%, #7b3ddb 65%);
      box-shadow: inset 0 0 12px rgba(200, 140, 255, 0.38);
    }

    .crew-root.cosmetic-outfit--prism .crew-torso-3d .tf-bottom {
      background: color-mix(in srgb, var(--c-bot) 28%, #2d0a5c 72%);
      box-shadow: inset 0 0 8px rgba(80, 30, 140, 0.45);
    }

    .crew-root.cosmetic-outfit--prism .crew-torso-3d .tf-front::before {
      content: "";
      position: absolute;
      inset: -20%;
      z-index: 0;
      background:
        linear-gradient(
          125deg,
          transparent 1%,
          rgba(255, 210, 255, 0.45) 11%,
          transparent 19%,
          rgba(200, 120, 255, 0.38) 38%,
          transparent 48%,
          rgba(255, 255, 255, 0.28) 52%,
          transparent 58%,
          rgba(160, 80, 255, 0.42) 76%,
          transparent 92%
        ),
        repeating-linear-gradient(
          118deg,
          rgba(80, 20, 140, 0.15) 0 1px,
          transparent 1px 5px,
          rgba(240, 200, 255, 0.2) 5px 6px,
          transparent 6px 11px
        ),
        linear-gradient(
          168deg,
          rgba(100, 40, 180, 0.35) 0%,
          rgba(220, 150, 255, 0.2) 45%,
          rgba(60, 15, 120, 0.4) 100%
        );
      opacity: 0.92;
      mix-blend-mode: soft-light;
      pointer-events: none;
      animation: cosmetic-prism 2.6s ease-in-out infinite alternate;
    }

    .crew-root.cosmetic-outfit--prism .crew-torso-3d .tf-front::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background-image:
        radial-gradient(circle at 12% 28%, #fff 0, #fff 0.55px, transparent 0.75px),
        radial-gradient(circle at 82% 18%, rgba(255, 230, 255, 1) 0, rgba(255, 230, 255, 1) 0.48px, transparent 0.65px),
        radial-gradient(circle at 38% 62%, rgba(220, 170, 255, 1) 0, transparent 0.55px),
        radial-gradient(circle at 68% 48%, #fff 0, transparent 0.5px),
        radial-gradient(circle at 22% 82%, rgba(200, 160, 255, 0.95) 0, transparent 0.55px),
        radial-gradient(circle at 90% 72%, rgba(255, 255, 255, 0.9) 0, transparent 0.45px),
        radial-gradient(circle at 52% 35%, rgba(255, 200, 255, 0.85) 0, transparent 0.42px);
      background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        120% 120%;
      background-position:
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        40% 30%;
      mix-blend-mode: screen;
      opacity: 0.88;
      pointer-events: none;
      animation: cosmetic-prism-sparkle 2.1s ease-in-out infinite alternate;
    }

    @keyframes cosmetic-prism-sparkle {
      0% {
        opacity: 0.62;
        background-position:
          0 0,
          0 0,
          0 0,
          0 0,
          0 0,
          0 0,
          40% 30%;
      }
      100% {
        opacity: 1;
        background-position:
          2px -1px,
          -1px 2px,
          1px 1px,
          0 0,
          -2px 0,
          1px -2px,
          62% 68%;
      }
    }

    @keyframes cosmetic-prism {
      0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.78;
      }
      100% {
        transform: rotate(-4deg) scale(1.05);
        opacity: 0.98;
      }
    }

    .crew-root.cosmetic-outfit--prism .crew-cap-3d .cf-front {
      background-image:
        linear-gradient(148deg, rgba(90, 35, 160, 0.92) 0%, rgba(190, 100, 255, 0.65) 55%, rgba(50, 12, 95, 0.95) 100%),
        linear-gradient(180deg, var(--c-cap-front), var(--c-cap-back));
      box-shadow:
        inset 0 0 14px rgba(210, 140, 255, 0.45),
        0 0 8px rgba(170, 80, 255, 0.35);
    }

    .crew-root.cosmetic-outfit--prism .crew-cap-3d .cf-top {
      background-image:
        linear-gradient(160deg, rgba(120, 55, 210, 0.88) 0%, rgba(230, 180, 255, 0.5) 100%),
        linear-gradient(180deg, var(--c-cap-top), var(--c-cap-side));
      box-shadow: inset 0 0 10px rgba(200, 120, 255, 0.4);
    }

    .crew-root.cosmetic-outfit--prism .crew-cap-3d .cf-back {
      background: color-mix(in srgb, var(--c-cap-back) 35%, #3a0f70 65%);
    }

    .crew-root.cosmetic-outfit--prism .crew-cap-3d .cf-right,
    .crew-root.cosmetic-outfit--prism .crew-cap-3d .cf-left {
      background: color-mix(in srgb, var(--c-cap-side) 32%, #4f1892 68%);
    }

    .crew-root.cosmetic-outfit--prism .leg-leg .lf-front {
      background-image:
        linear-gradient(175deg, rgba(55, 15, 105, 0.9) 0%, rgba(150, 70, 230, 0.72) 55%, rgba(40, 8, 78, 0.94) 100%),
        linear-gradient(180deg, var(--c-front), var(--c-back));
      box-shadow:
        inset 0 0 12px rgba(190, 110, 255, 0.42),
        0 0 6px rgba(140, 60, 220, 0.3);
    }

    .crew-root.cosmetic-outfit--prism .leg-leg .lf-back {
      background: color-mix(in srgb, var(--c-back) 32%, #42127a 68%);
    }

    .crew-root.cosmetic-outfit--prism .leg-leg .lf-right {
      background: color-mix(in srgb, var(--c-right) 32%, #4a1490 68%);
    }

    .crew-root.cosmetic-outfit--prism .leg-leg .lf-left {
      background: color-mix(in srgb, var(--c-left) 32%, #350a6e 68%);
    }

    .crew-root.cosmetic-outfit--prism .leg-leg .lf-bottom {
      background: color-mix(in srgb, var(--c-bot) 30%, #240848 70%);
      box-shadow: inset 0 0 6px rgba(100, 50, 180, 0.35);
    }

    .crew-root.cosmetic-outfit--prism .crew-visor-3d {
      background: linear-gradient(180deg, rgba(190, 140, 255, 0.45) 0%, rgba(110, 60, 180, 0.55) 100%);
      border-color: rgba(220, 180, 255, 0.85);
      box-shadow:
        inset 0 0 8px rgba(255, 230, 255, 0.35),
        0 0 6px rgba(180, 100, 255, 0.55);
    }

    .crew-root.cosmetic-outfit--dark .crew-hull .tf,
    .crew-root.cosmetic-outfit--dark .crew-hull .cf,
    .crew-root.cosmetic-outfit--dark .crew-hull .lf {
      filter: brightness(0.72) saturate(0.9);
    }

    /* Gece tonu — göğüs yüzünde akan yıldızlar (::before içerikten önce = vizörün altında) */
    .crew-root.cosmetic-outfit--dark .crew-torso-3d .tf-front::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: 0;
      background-image:
        radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 1) 0, transparent 38%),
        radial-gradient(circle at 82% 18%, rgba(230, 245, 255, 0.95) 0, transparent 36%),
        radial-gradient(circle at 62% 78%, rgba(255, 255, 255, 0.9) 0, transparent 35%),
        radial-gradient(circle at 38% 55%, rgba(255, 255, 250, 0.82) 0, transparent 33%),
        radial-gradient(circle at 72% 45%, rgba(210, 230, 255, 0.88) 0, transparent 37%),
        radial-gradient(circle at 22% 72%, rgba(255, 255, 255, 0.72) 0, transparent 31%),
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.65) 0, transparent 28%);
      background-size: 10px 12px;
      background-repeat: repeat;
      opacity: 0.78;
      mix-blend-mode: screen;
      pointer-events: none;
      animation: cosmetic-dark-stars 5.8s linear infinite;
    }


    @keyframes cosmetic-dark-stars {
      0% {
        background-position: 0 0, 5px -3px, -4px 2px, 3px 6px, -2px 4px, 6px -2px, 1px 3px;
      }
      100% {
        background-position: 10px 12px, 15px 9px, 6px 14px, 13px 18px, 8px 16px, 16px 10px, 11px 15px;
      }
    }

    .crew-root.cosmetic-outfit--pastel .crew-hull .tf,
    .crew-root.cosmetic-outfit--pastel .crew-hull .cf,
    .crew-root.cosmetic-outfit--pastel .crew-hull .lf {
      filter: saturate(1.22) brightness(1.06);
    }

    .crew-root.cosmetic-outfit--pastel .crew-torso-3d .tf-front {
      background-image:
        linear-gradient(
          138deg,
          rgba(255, 120, 190, 0.65) 0%,
          rgba(130, 220, 255, 0.68) 22%,
          rgba(255, 235, 140, 0.62) 44%,
          rgba(200, 160, 255, 0.65) 66%,
          rgba(255, 180, 210, 0.58) 88%,
          rgba(160, 255, 220, 0.55) 100%
        ),
        linear-gradient(var(--c-front), var(--c-front));
      box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.18);
    }

    /* Pastel üst yıkama — yüzey içinde kalır */
    .crew-root.cosmetic-outfit--pastel .crew-torso-3d .tf-front::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(
        118deg,
        rgba(255, 100, 180, 0.5) 8%,
        rgba(100, 210, 255, 0.52) 28%,
        rgba(255, 240, 120, 0.48) 48%,
        rgba(220, 150, 255, 0.5) 68%,
        rgba(255, 160, 200, 0.45) 88%
      );
      background-size: 200% 200%;
      mix-blend-mode: soft-light;
      pointer-events: none;
      animation: cosmetic-pastel-wash 4s ease-in-out infinite alternate;
      opacity: 0.95;
    }


    @keyframes cosmetic-pastel-wash {
      0% {
        background-position: 0% 38%;
      }
      100% {
        background-position: 100% 62%;
      }
    }

    .player .crew-root {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      visibility: visible;
      opacity: 1;
      transform-style: preserve-3d;
      transform-origin: 50% 84%;
      transform: translateZ(10px);
      image-rendering: auto;
    }

    .crew-hull {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
      transform-origin: 50% 90%;
    }

    .prism {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
    }

    .prism-axis {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      transform-style: preserve-3d;
    }

    .prism--torso {
      --cw: 24px;
      --ch: 20px;
      --cd: 17px;
    }

    .prism--cap {
      --cw: 18px;
      --ch: 6px;
      --cd: 13px;
    }

    .prism--leg {
      --lw: 8px;
      --lh: 9px;
      --ld: 11px;
    }

    .tf {
      position: absolute;
      left: 50%;
      top: 50%;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      box-sizing: border-box;
    }

    .tf-front {
      width: var(--cw);
      height: var(--ch);
      margin-left: calc(var(--cw) / -2);
      margin-top: calc(var(--ch) / -2);
      transform: rotateY(0deg) translateZ(calc(var(--cd) / 2));
      background: var(--c-front);
      border-radius: 1px;
    }

    .tf-back {
      width: var(--cw);
      height: var(--ch);
      margin-left: calc(var(--cw) / -2);
      margin-top: calc(var(--ch) / -2);
      transform: rotateY(180deg) translateZ(calc(var(--cd) / 2));
      background: var(--c-back);
      border-radius: 1px;
    }

    .tf-right {
      width: var(--cd);
      height: var(--ch);
      margin-left: calc(var(--cd) / -2);
      margin-top: calc(var(--ch) / -2);
      transform: rotateY(90deg) translateZ(calc(var(--cw) / 2));
      background: var(--c-right);
    }

    .tf-left {
      width: var(--cd);
      height: var(--ch);
      margin-left: calc(var(--cd) / -2);
      margin-top: calc(var(--ch) / -2);
      transform: rotateY(-90deg) translateZ(calc(var(--cw) / 2));
      background: var(--c-left);
    }

    .tf-top {
      width: var(--cw);
      height: var(--cd);
      margin-left: calc(var(--cw) / -2);
      margin-top: calc(var(--cd) / -2);
      transform: rotateX(90deg) translateZ(calc(var(--ch) / 2));
      background: var(--c-top);
    }

    .tf-bottom {
      width: var(--cw);
      height: var(--cd);
      margin-left: calc(var(--cw) / -2);
      margin-top: calc(var(--cd) / -2);
      transform: rotateX(-90deg) translateZ(calc(var(--ch) / 2));
      background: var(--c-bot);
    }

    .crew-visor-3d {
      position: absolute;
      left: 16%;
      top: 38%;
      width: 68%;
      height: 32%;
      background: var(--visor);
      border: 1px solid var(--visor-edge);
      border-radius: 1px;
      box-sizing: border-box;
      pointer-events: none;
    }

    .cf {
      position: absolute;
      left: 50%;
      top: 50%;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      box-sizing: border-box;
    }

    .cf-front {
      width: var(--cw);
      height: var(--ch);
      margin-left: calc(var(--cw) / -2);
      margin-top: calc(var(--ch) / -2);
      transform: rotateY(0deg) translateZ(calc(var(--cd) / 2));
      background: var(--c-cap-front);
      border-radius: 1px;
    }

    .cf-back {
      width: var(--cw);
      height: var(--ch);
      margin-left: calc(var(--cw) / -2);
      margin-top: calc(var(--ch) / -2);
      transform: rotateY(180deg) translateZ(calc(var(--cd) / 2));
      background: var(--c-cap-back);
      border-radius: 1px;
    }

    .cf-right {
      width: var(--cd);
      height: var(--ch);
      margin-left: calc(var(--cd) / -2);
      margin-top: calc(var(--ch) / -2);
      transform: rotateY(90deg) translateZ(calc(var(--cw) / 2));
      background: var(--c-cap-side);
    }

    .cf-left {
      width: var(--cd);
      height: var(--ch);
      margin-left: calc(var(--cd) / -2);
      margin-top: calc(var(--ch) / -2);
      transform: rotateY(-90deg) translateZ(calc(var(--cw) / 2));
      background: var(--c-cap-side);
    }

    .cf-top {
      width: var(--cw);
      height: var(--cd);
      margin-left: calc(var(--cw) / -2);
      margin-top: calc(var(--cd) / -2);
      transform: rotateX(90deg) translateZ(calc(var(--ch) / 2));
      background: var(--c-cap-top);
      border-radius: 1px;
    }

    .crew-cap-3d {
      position: absolute;
      left: 50%;
      bottom: calc(8px + 20px - 2px);
      width: 18px;
      height: 6px;
      margin-left: -9px;
      transform-style: preserve-3d;
      transform-origin: 50% 100%;
    }

    .crew-cap-3d .prism--cap {
      width: 100%;
      height: 100%;
    }

    .crew-torso-3d {
      position: absolute;
      left: 50%;
      bottom: 8px;
      width: 24px;
      height: 20px;
      margin-left: -12px;
      transform-style: preserve-3d;
      transform-origin: 50% 100%;
    }

    .crew-torso-3d .prism--torso {
      width: 100%;
      height: 100%;
    }

    .crew-legs-3d {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 10px;
      transform-style: preserve-3d;
      pointer-events: none;
    }

    .leg-leg {
      position: absolute;
      bottom: 0;
      width: 8px;
      height: 9px;
      transform-style: preserve-3d;
      transform-origin: 50% 10%;
    }

    .leg-leg.leg-left {
      left: 8px;
    }

    .leg-leg.leg-right {
      right: 8px;
    }

    .leg-leg .prism--leg {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 8px;
      height: 9px;
    }

    .lf {
      position: absolute;
      left: 50%;
      top: 50%;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      box-sizing: border-box;
    }

    .lf-front {
      width: var(--lw);
      height: var(--lh);
      margin-left: calc(var(--lw) / -2);
      margin-top: calc(var(--lh) / -2);
      transform: rotateY(0deg) translateZ(calc(var(--ld) / 2));
      background: var(--c-front);
    }

    .lf-back {
      width: var(--lw);
      height: var(--lh);
      margin-left: calc(var(--lw) / -2);
      margin-top: calc(var(--lh) / -2);
      transform: rotateY(180deg) translateZ(calc(var(--ld) / 2));
      background: var(--c-back);
    }

    .lf-right {
      width: var(--ld);
      height: var(--lh);
      margin-left: calc(var(--ld) / -2);
      margin-top: calc(var(--lh) / -2);
      transform: rotateY(90deg) translateZ(calc(var(--lw) / 2));
      background: var(--c-right);
    }

    .lf-left {
      width: var(--ld);
      height: var(--lh);
      margin-left: calc(var(--ld) / -2);
      margin-top: calc(var(--lh) / -2);
      transform: rotateY(-90deg) translateZ(calc(var(--lw) / 2));
      background: var(--c-left);
    }

    .lf-bottom {
      width: var(--lw);
      height: var(--ld);
      margin-left: calc(var(--lw) / -2);
      margin-top: calc(var(--ld) / -2);
      transform: rotateX(-90deg) translateZ(calc(var(--lh) / 2));
      background: var(--c-bot);
    }

    .player.walking .pa-tilt {
      animation: pa-walk-3d-pulse 0.28s steps(2, end) infinite;
    }

    .player.walking.dir-down .sprite-wrap {
      animation: sway-down 0.3s ease-in-out infinite alternate;
    }

    .player.walking.dir-up .sprite-wrap {
      animation: sway-up 0.3s ease-in-out infinite alternate;
    }

    .player.walking.dir-right .sprite-wrap {
      animation: sway-side 0.28s ease-in-out infinite alternate;
    }

    .player.walking.dir-left .sprite-wrap {
      animation: sway-side-left 0.28s ease-in-out infinite alternate;
    }

    @keyframes pa-walk-3d-pulse {
      0%, 100% {
        transform: translateZ(0) rotateX(1deg);
      }
      50% {
        transform: translateZ(5px) rotateX(-3deg);
      }
    }

    @keyframes sway-down {
      0% {
        transform: rotateX(-7deg) rotateY(0deg);
      }
      100% {
        transform: rotateX(-11deg) rotateY(0deg);
      }
    }

    @keyframes sway-up {
      0% {
        transform: rotateX(8deg) rotateY(180deg);
      }
      100% {
        transform: rotateX(13deg) rotateY(180deg);
      }
    }

    @keyframes sway-side {
      0% {
        transform: rotateX(-5deg) rotateY(32deg);
      }
      100% {
        transform: rotateX(-9deg) rotateY(32deg);
      }
    }

    @keyframes sway-side-left {
      0% {
        transform: rotateX(-5deg) rotateY(-32deg);
      }
      100% {
        transform: rotateX(-9deg) rotateY(-32deg);
      }
    }

    .player.walking .leg-left {
      animation: leg-left 0.26s steps(2, end) infinite;
      transform-origin: 50% 10%;
    }

    .player.walking .leg-right {
      animation: leg-right 0.26s steps(2, end) infinite;
      transform-origin: 50% 10%;
    }

    .player.hit .crew-root {
      filter:
        brightness(1.55) saturate(1.35)
        drop-shadow(1px 2px 3px rgba(0, 0, 25, 0.45))
        drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
    }

    .player.player--dead .pa-tilt {
      animation: none !important;
      transform: rotateZ(93deg) translate3d(-2px, 4px, -6px) !important;
    }

    .player.player--dead .sprite-floor-shadow {
      opacity: 0.5;
      transform: rotateX(86deg) scale(0.88) translateZ(-10px);
    }

    .player.placing:not(.walking) .pa-tilt {
      animation: body-squat-bomb-prep 0.64s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    }

    .player.placing.walking .pa-tilt {
      animation: placing-squash-walk 0.26s ease-in-out infinite alternate !important;
    }

    @keyframes body-squat-bomb-prep {
      0%, 100% {
        transform: translateZ(0) rotateX(0deg);
      }
      30% {
        transform: translateZ(4px) rotateX(-8deg);
      }
      55% {
        transform: translateZ(2px) rotateX(-14deg);
      }
    }

    @keyframes placing-squash-walk {
      0% {
        transform: rotateX(-4deg) translateZ(-1px);
      }
      100% {
        transform: rotateX(-9deg) translateZ(-4px);
      }
    }

    .bomb-place-hands {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      z-index: 14;
      transform-style: preserve-3d;
    }

    .player.placing .bomb-place-hands {
      visibility: visible;
      opacity: 1;
      transition: opacity 0.12s ease;
    }

    .bph-scene {
      position: absolute;
      left: 50%;
      bottom: -18%;
      width: 118%;
      height: 100%;
      margin-left: -59%;
      transform-origin: 50% 94%;
      transform-style: preserve-3d;
    }

    .bph-square {
      position: absolute;
      bottom: 14%;
      width: 5px;
      height: 5px;
      box-sizing: border-box;
      background: linear-gradient(145deg, #3a3628 0%, #141210 100%);
      border: 1px solid #050403;
      image-rendering: pixelated;
      transform-style: preserve-3d;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 3px rgba(0, 0, 0, 0.45);
    }

    .bph-square--l {
      left: 20%;
    }

    .bph-square--r {
      right: 20%;
    }

    .player.placing .bph-square--l {
      animation: bph-square-tap 0.64s cubic-bezier(0.45, 0, 0.25, 1) forwards;
    }

    .player.placing .bph-square--r {
      animation: bph-square-tap 0.64s cubic-bezier(0.45, 0, 0.25, 1) 0.07s forwards;
    }

    @keyframes bph-square-tap {
      0% {
        transform: translateY(10px) translateZ(0) scale(1);
        opacity: 0;
      }
      18% {
        opacity: 1;
      }
      42% {
        transform: translateY(2px) translateZ(8px) scale(1.08);
      }
      62% {
        transform: translateY(0) translateZ(4px) scale(1);
      }
      100% {
        transform: translateY(1px) translateZ(0) scale(1);
        opacity: 1;
      }
    }

    .player:not(.placing) .bomb-place-hands {
      transition:
        opacity 0.28s ease 0.1s,
        visibility 0s linear 0.4s;
    }

    .player.local {
      z-index: 62;
    }

    @keyframes storyMoodBob {
      0%,
      100% {
        transform: translate(-50%, 0) rotate(-4deg);
      }
      50% {
        transform: translate(-50%, -3px) rotate(3deg);
      }
    }

    @keyframes storyMoodDots {
      0%,
      100% {
        opacity: 0.35;
      }
      50% {
        opacity: 1;
      }
    }

    @keyframes storyIdleSway {
      0%,
      100% {
        transform: translateZ(0) rotateX(0deg) rotateZ(-1.8deg);
      }
      50% {
        transform: translateZ(5px) rotateX(-2.5deg) rotateZ(2deg);
      }
    }

    .player-story-mood {
      position: absolute;
      left: 50%;
      bottom: 100%;
      z-index: 26;
      pointer-events: none;
      transform: translate(-50%, -6px);
      display: none;
    }

    .arena.story-intro .player.local .player-story-mood {
      display: block;
    }

    .player-story-mood__bubble {
      display: inline-flex;
      align-items: baseline;
      gap: 2px;
      padding: 3px 9px 4px;
      border-radius: 12px 12px 12px 4px;
      background: linear-gradient(165deg, #ffffff 0%, #eef2ff 100%);
      border: 2px solid rgba(34, 46, 86, 0.92);
      box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
      animation: storyMoodBob 1.35s ease-in-out infinite;
    }

    .player-story-mood__q {
      font-size: 15px;
      font-weight: 900;
      color: #1e2744;
      line-height: 1;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    .player-story-mood__dots {
      font-size: 0;
      line-height: 1;
    }

    .player-story-mood__dots::after {
      content: "...";
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.06em;
      color: rgba(70, 82, 118, 0.88);
      animation: storyMoodDots 0.9s ease-in-out infinite;
    }

    .arena.story-intro
      .player.local:not(.walking):not(.placing):not(.player--dead)
      .pa-tilt {
      animation: storyIdleSway 2.35s ease-in-out infinite !important;
    }

    .grass-blade {
      position: absolute;
      width: 2px;
      height: 8px;
      background: linear-gradient(180deg, #2a4a1a 0%, #1a3a10 100%);
      border-radius: 1px 1px 0 0;
      pointer-events: none;
      z-index: 5;
    }

    .grass-blade::before {
      content: "";
      position: absolute;
      left: -3px;
      top: 2px;
      width: 2px;
      height: 6px;
      background: linear-gradient(180deg, #3a5a2a 0%, #2a4a1a 100%);
      border-radius: 1px;
      transform: rotate(-20deg);
    }

    .grass-blade::after {
      content: "";
      position: absolute;
      left: 3px;
      top: 2px;
      width: 2px;
      height: 6px;
      background: linear-gradient(180deg, #2a4a1a 0%, #1a3a10 100%);
      border-radius: 1px;
      transform: rotate(20deg);
    }

    .furniture {
      position: absolute;
      box-sizing: border-box;
      transform-style: preserve-3d;
      transform: perspective(520px) rotateX(8deg);
      transform-origin: bottom center;
      border-radius: 3px;
      z-index: 6;
      isolation: isolate;
      filter: drop-shadow(1px 14px 24px rgba(0, 0, 14, 0.58))
        drop-shadow(0 2px 6px rgba(0, 0, 10, 0.35));
      backface-visibility: hidden;
    }

    .furniture.pond {
      position: relative;
      overflow: visible;
      border-radius: 50%;
      transform: perspective(480px) rotateX(11deg) scale(1.02);
      background:
        radial-gradient(ellipse at 42% 32%, rgba(255, 255, 255, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(0, 65, 80, 0.55) 0%, transparent 55%),
        linear-gradient(
          168deg,
          #1a6890 0%,
          #0e5f78 40%,
          #083d52 100%
        );
      border: none;
      box-shadow:
        inset 0 -18px 40px rgba(0, 15, 30, 0.55),
        inset 0 -4px 0 rgba(140, 200, 220, 0.15),
        inset 0 0 0 2px rgba(255, 255, 255, 0.12),
        0 -3px 0 rgba(220, 250, 255, 0.08),
        0 8px 20px rgba(0, 20, 40, 0.55),
        0 26px 50px rgba(0, 12, 30, 0.35),
        inset 24px -20px 50px rgba(0, 50, 70, 0.25);
    }

    .furniture.pond::before {
      content: "";
      position: absolute;
      left: 3%;
      top: 3%;
      right: 3%;
      bottom: 3%;
      background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.55) 0%, transparent 42%),
        radial-gradient(circle at 72% 78%, rgba(0, 110, 130, 0.45) 0%, transparent 48%),
        radial-gradient(circle at 50% 50%, rgba(30, 150, 180, 0.12) 0%, transparent 70%);
      border-radius: 50%;
      animation: pond-shimmer 3s ease-in-out infinite;
      mix-blend-mode: overlay;
      pointer-events: none;
      filter: saturate(1.15);
    }

    .furniture.pond::after {
      content: "";
      position: absolute;
      inset: -4%;
      border-radius: 50%;
      pointer-events: none;
      border: 1px solid rgba(180, 230, 255, 0.25);
      box-shadow:
        inset 0 -8px 20px rgba(0, 30, 50, 0.4),
        inset 0 16px 30px rgba(255, 255, 255, 0.07);
      background: repeating-linear-gradient(
        -12deg,
        transparent 0px,
        transparent 9px,
        rgba(255, 255, 255, 0.05) 9px,
        rgba(255, 255, 255, 0.05) 11px
      );
      animation: pond-wave 5s linear infinite;
      mask: radial-gradient(closest-side, transparent 92%, black 100%);
    }

    @keyframes pond-shimmer {
      0%,
      100% {
        opacity: 0.85;
        transform: translate(0%, 0%) scale(1);
      }
      33% {
        opacity: 1;
        transform: translate(-1.5%, 1%) scale(1.02);
      }
      66% {
        opacity: 0.9;
        transform: translate(1.2%, -0.8%) scale(1.01);
      }
    }

    @keyframes pond-wave {
      0% {
        opacity: 0.45;
        transform: rotate(0deg);
      }
      50% {
        opacity: 0.7;
      }
      100% {
        opacity: 0.45;
        transform: rotate(360deg);
      }
    }

    .furniture.table {
      background-color: transparent;
      background-image:
        radial-gradient(
          ellipse at 42% -20%,
          rgba(230, 200, 120, 0.35) 0%,
          transparent 62%
        ),
        linear-gradient(92deg, #4a3620 0%, #705228 35%, #8b6f3a 50%, #5c4518 82%, #3d2a14 100%),
        repeating-linear-gradient(
          178deg,
          rgba(52, 40, 18, 0.15) 0px,
          rgba(52, 40, 18, 0.15) 1px,
          transparent 2px,
          transparent 6px
        );
      border: 1px solid color-mix(in srgb, #2a1810 60%, black);
      box-shadow:
        inset 2px -3px 0 rgba(140, 100, 50, 0.25),
        inset -3px -2px 6px rgba(0, 0, 0, 0.35),
        inset 0 6px 10px rgba(255, 220, 168, 0.16),
        0 -1px 0 rgba(205, 170, 100, 0.22),
        0 4px 14px rgba(20, 8, 0, 0.55),
        0 22px 40px rgba(10, 4, 0, 0.28);
      border-radius: 4px 4px 2px 2px;
    }

    .furniture.table::before {
      content: "";
      position: absolute;
      left: 5%;
      right: 5%;
      top: 4%;
      height: 34%;
      background: linear-gradient(180deg, rgba(252, 240, 200, 0.45) 0%, rgba(150, 120, 72, 0.08) 100%);
      border-radius: 2px;
      pointer-events: none;
    }

    .furniture.table::after {
      content: "";
      position: absolute;
      inset: auto 14% -18% 14%;
      height: 35%;
      background: radial-gradient(ellipse closest-side at 50% 0%, rgba(0, 0, 0, 0.38) 10%, transparent 78%);
      border-radius: 50%;
      z-index: -1;
      pointer-events: none;
    }

    .furniture.chair {
      transform: perspective(480px) rotateX(10deg) rotateZ(-2deg);
      border-radius: 3px;
      border: 1px solid #2e1608;
      background:
        radial-gradient(ellipse at 62% -10%, rgba(255, 200, 150, 0.12) 0%, transparent 45%),
        linear-gradient(
          98deg,
          #3d1c08 0%,
          #6e3818 42%,
          #8f4f22 62%,
          #5e2a10 100%
        ),
        repeating-linear-gradient(3deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 5px);
      box-shadow:
        inset 10px -5px 16px rgba(0, 0, 0, 0.35),
        inset -8px -3px 10px rgba(255, 150, 100, 0.07),
        0 -2px 0 rgba(200, 120, 72, 0.12),
        0 5px 16px rgba(16, 4, 0, 0.55),
        0 22px 36px rgba(10, 2, 0, 0.32);
    }

    .furniture.chair::before {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      top: -42%;
      height: 55%;
      background: linear-gradient(94deg, #4f220f 8%, #7a3918 52%, #4a2210 100%);
      border: 1px solid #351208;
      border-radius: 3px 3px 0 0;
      transform-origin: 50% 100%;
      transform: perspective(120px) rotateX(-26deg);
      box-shadow:
        inset 8px -4px 12px rgba(0, 0, 0, 0.42),
        inset -4px -2px 6px rgba(255, 120, 60, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.4);
      z-index: 1;
      pointer-events: none;
    }

    .furniture.cabinet {
      border-radius: 2px;
      border: none;
      background:
        linear-gradient(174deg, #6b5e52 0%, #483c32 52%, #2a2418 100%),
        radial-gradient(circle at 22% 8%, rgba(255, 255, 255, 0.12) 0%, transparent 45%);
      box-shadow:
        inset 22px -8px 32px rgba(0, 0, 0, 0.52),
        inset -10px -4px 16px rgba(255, 255, 255, 0.04),
        inset 0 10px 0 rgba(230, 220, 206, 0.07),
        0 -1px 0 rgba(155, 140, 120, 0.12),
        0 8px 20px rgba(5, 2, 0, 0.58),
        0 26px 48px rgba(0, 4, 8, 0.28);
      border: 1px solid #120a06;
      border-image: linear-gradient(
          165deg,
          rgba(155, 140, 120, 0.45),
          transparent 42%,
          rgba(24, 16, 8, 0.9)
        )
        1;
    }

    .furniture.cabinet::before {
      content: "";
      position: absolute;
      inset: 10% 6% 8% 6%;
      background: linear-gradient(90deg, rgba(255, 255, 240, 0.05) 0%, transparent 8%, transparent 92%, rgba(255, 255, 240, 0.035) 100%);
      border-radius: 2px;
      box-shadow:
        inset 26% 14% 0 -1px rgba(0, 0, 0, 0.62),
        inset 73% 14% 0 -1px rgba(0, 0, 0, 0.62),
        inset 0 72% 0 -1px rgba(0, 0, 0, 0.35);
      pointer-events: none;
    }

    .furniture.plant {
      border-radius: 50%;
      border: none;
      background:
        radial-gradient(circle at 36% 30%, rgba(255, 255, 240, 0.15) 0%, transparent 38%),
        radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.5) 0%, transparent 50%),
        linear-gradient(
          185deg,
          #4f7048 12%,
          #2f5038 72%,
          #1e3528 100%
        );
      box-shadow:
        inset 6px -8px 22px rgba(0, 20, 8, 0.55),
        inset -12px -4px 16px rgba(255, 255, 230, 0.04),
        0 -1px 0 rgba(168, 200, 150, 0.12),
        0 5px 16px rgba(0, 10, 2, 0.45),
        0 20px 40px rgba(0, 6, 0, 0.22);
      transform: perspective(460px) rotateX(14deg);
    }

    .furniture.plant::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -46%;
      width: 118%;
      height: 148%;
      margin-left: -59%;
      background:
        radial-gradient(ellipse at 52% 18%, rgba(120, 200, 100, 0.55) 0%, transparent 40%),
        linear-gradient(
          10deg,
          transparent 42%,
          rgba(54, 90, 50, 0.95) 50%,
          transparent 54%
        );
      transform-origin: 50% 90%;
      transform: perspective(80px) rotateX(-8deg);
      border-radius: 50% 50% 30% 30%;
      pointer-events: none;
      filter: saturate(1.2);
      z-index: 1;
      box-shadow:
        inset -14px -6px 20px rgba(0, 0, 0, 0.32),
        0 -4px 8px rgba(0, 0, 0, 0.25);
    }

    .furniture.box {
      transform: perspective(500px) rotateX(11deg);
      border: 1px solid #382010;
      border-radius: 2px;
      background:
        linear-gradient(
          98deg,
          #6f5230 0%,
          #9b7848 42%,
          #7a5828 82%,
          #4f381a 100%
        ),
        repeating-linear-gradient(3deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 2px);
      box-shadow:
        inset 12px -6px 22px rgba(0, 0, 0, 0.38),
        inset -8px -2px 10px rgba(255, 200, 150, 0.08),
        0 -1px 0 rgba(235, 200, 150, 0.12),
        0 8px 20px rgba(12, 4, 0, 0.55),
        0 26px 48px rgba(6, 0, 0, 0.18);
    }

    .furniture.barrel {
      border-radius: 40% / 52%;
      border: 1px solid #1a0804;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 50% -5%, rgba(255, 255, 252, 0.18) 0%, transparent 45%),
        linear-gradient(
          90deg,
          #3a2618 0%,
          #7a5838 42%,
          #5a3820 50%,
          #6f5030 100%
        ),
        repeating-linear-gradient(0deg, #2f1a10 0, #2f1a10 2px, #4a3620 4px);
      background-blend-mode: soft-light, normal, multiply;
      box-shadow:
        inset 18px -2px 24px rgba(0, 0, 0, 0.5),
        inset -14px -1px 16px rgba(255, 200, 150, 0.06),
        0 7px 20px rgba(6, 0, 0, 0.55),
        0 28px 50px rgba(2, 0, 0, 0.3);
      transform: perspective(520px) rotateX(11deg);
    }

    .furniture.barrel::before {
      content: "";
      position: absolute;
      left: 14%;
      right: 14%;
      top: 10%;
      height: 13%;
      background: linear-gradient(
        180deg,
        #1a0804 30%,
        #3a2820 100%
      );
      border-radius: 40%;
      pointer-events: none;
      box-shadow:
        inset 0 5px 6px rgba(0, 0, 0, 0.6),
        0 -1px 0 rgba(150, 120, 92, 0.15);
    }

    .furniture.barrel::after {
      content: "";
      position: absolute;
      left: 14%;
      right: 14%;
      bottom: 11%;
      height: 13%;
      background: linear-gradient(
        0deg,
        #1a0804 30%,
        #3a2820 100%
      );
      border-radius: 40%;
      pointer-events: none;
      box-shadow:
        inset 0 -4px 5px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(150, 120, 92, 0.1);
    }

    .furniture.crate {
      transform: perspective(500px) rotateX(10deg);
      border-radius: 2px;
      border: 1px solid #241808;
      background:
        linear-gradient(168deg, #a88848 12%, #7d6028 72%, #4a3820 100%),
        repeating-linear-gradient(45deg, rgba(52, 40, 20, 0.12) 0 8px, transparent 12px),
        radial-gradient(at 82% -10%, rgba(255, 240, 200, 0.15) 0%, transparent 50%);
      box-shadow:
        inset 10px -8px 20px rgba(0, 0, 0, 0.4),
        inset -6px 5px 10px rgba(255, 220, 150, 0.08),
        0 -1px 0 rgba(255, 220, 172, 0.1),
        0 6px 14px rgba(12, 4, 0, 0.48),
        0 26px 48px rgba(6, 0, 0, 0.2);
      overflow: hidden;
    }

    .furniture.crate::before {
      content: "";
      position: absolute;
      inset: 8%;
      pointer-events: none;
      border: 3px dashed rgba(32, 24, 8, 0.35);
      border-radius: 2px;
      box-shadow:
        inset 4px -4px 8px rgba(0, 0, 0, 0.2),
        0 -2px 0 rgba(255, 236, 200, 0.08);
      background-image:
        linear-gradient(92deg, rgba(0, 0, 0, 0) 42%, rgba(52, 40, 20, 0.45) 50%, transparent 54%),
        linear-gradient(rgba(0, 0, 0, 0) 38%, rgba(52, 40, 20, 0.5) 50%, transparent 62%);
      background-blend-mode: multiply;
    }

    .furniture.lamp {
      border-radius: 50%;
      border: 1px solid #080808;
      background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 252, 0.25) 0%, transparent 40%),
        linear-gradient(
          180deg,
          #4a4848 0%,
          #201c1c 60%,
          #0c0a0c 100%
        );
      box-shadow:
        inset 8px -6px 20px rgba(0, 0, 0, 0.7),
        inset -5px -2px 8px rgba(255, 255, 252, 0.04),
        0 -1px 0 rgba(222, 220, 220, 0.08),
        0 12px 32px rgba(255, 200, 100, 0.25),
        0 38px 60px rgba(255, 180, 60, 0.12),
        0 4px 10px rgba(0, 0, 0, 0.5);
      transform: perspective(400px) rotateX(13deg);
    }

    .furniture.lamp::before {
      content: "";
      position: absolute;
      left: 46%;
      top: 52%;
      width: 32%;
      height: 38%;
      background: radial-gradient(
        ellipse at 50% 42%,
        #ffffea 8%,
        #ffcca4 72%,
        #c86820 118%
      );
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-46%, -50%);
      mask: radial-gradient(circle at 48% 40%, black 74%, transparent 100%);
      box-shadow:
        0 0 18px #fff4a8,
        0 0 38px rgba(255, 200, 100, 0.55),
        0 0 68px rgba(255, 150, 50, 0.22),
        inset 0 -3px 5px rgba(180, 60, 0, 0.35);
      filter: saturate(1.2);
      z-index: 1;
    }

    .furniture.statue {
      border-radius: 3px;
      border: none;
      background:
        linear-gradient(
          98deg,
          #8a8784 12%,
          #5f5d58 72%,
          #3e3c39 100%
        ),
        radial-gradient(circle at 25% -5%, rgba(255, 255, 255, 0.22) 0%, transparent 38%);
      box-shadow:
        inset 26px -10px 42px rgba(0, 0, 0, 0.38),
        inset -12px -3px 16px rgba(255, 255, 255, 0.05),
        0 -1px 0 rgba(220, 215, 210, 0.12),
        0 14px 32px rgba(0, 0, 10, 0.45),
        0 40px 72px rgba(0, 0, 14, 0.18);
      border: 1px solid #282624;
      transform: perspective(480px) rotateX(11deg);
    }

    .furniture.statue::before {
      content: "";
      position: absolute;
      left: 52%;
      top: -72%;
      width: 70%;
      height: 118%;
      margin-left: -35%;
      background: radial-gradient(
        ellipse at 50% 52%,
        #a8aaa8 22%,
        #6f6f6f 74%,
        #3f3f3e 118%
      );
      border-radius: 50%;
      pointer-events: none;
      transform: perspective(140px) rotateX(-38deg);
      border: 1px solid #2a2928;
      box-shadow:
        inset 10px -14px 18px rgba(0, 0, 6, 0.45),
        inset -4px -2px 6px rgba(255, 255, 255, 0.06),
        0 -3px 5px rgba(0, 0, 0, 0.35),
        inset 46% -10% 0 -2px rgba(0, 0, 0, 0.58);
      z-index: 1;
      filter: drop-shadow(-2px 6px 8px rgba(0, 0, 12, 0.45));
    }

    .furniture.bed {
      border-radius: 5px;
      transform: perspective(560px) rotateX(11deg);
      border: none;
      background:
        linear-gradient(
          98deg,
          #6f5880 22%,
          #4f3c62 74%,
          #301c34 118%
        ),
        radial-gradient(ellipse at 18% 8%, rgba(255, 200, 255, 0.12) 0%, transparent 50%);
      border: 1px solid rgba(24, 8, 32, 0.88);
      box-shadow:
        inset 18px -8px 28px rgba(0, 0, 8, 0.45),
        inset -14px -2px 12px rgba(255, 200, 255, 0.05),
        0 -1px 0 rgba(220, 200, 240, 0.1),
        0 8px 18px rgba(8, 0, 22, 0.45),
        0 38px 64px rgba(4, 0, 12, 0.22);
    }

    .furniture.bed::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 48%;
      width: 52%;
      background: linear-gradient(
        174deg,
        #7a6890 0%,
        #4f4058 92%
      );
      border-radius: 6px 0 4px 0;
      border: 1px solid rgba(32, 12, 40, 0.86);
      box-shadow:
        inset 10px -6px 16px rgba(0, 0, 14, 0.45),
        inset -4px 4px 6px rgba(255, 220, 254, 0.05);
      z-index: 1;
      pointer-events: none;
      transform-origin: bottom left;
      transform: perspective(200px) rotateY(28deg);
    }

    .furniture.bed::after {
      content: "";
      position: absolute;
      right: -2%;
      top: -8%;
      width: 32%;
      height: 118%;
      background: linear-gradient(
        176deg,
        rgba(250, 250, 255, 0.08) 0%,
        rgba(230, 200, 255, 0.04) 100%
      );
      border-radius: 4px;
      opacity: 0.18;
      filter: blur(1px);
      pointer-events: none;
    }

    .furniture.rock {
      border-radius: 44% 40% 38% 48%;
      border: none;
      background:
        radial-gradient(ellipse at 28% 22%, rgba(255, 255, 254, 0.18) 0%, transparent 42%),
        radial-gradient(circle at 76% 78%, rgba(0, 0, 0, 0.35) 0%, transparent 58%),
        linear-gradient(
          142deg,
          #8b8884 8%,
          #5a5752 42%,
          #2e2c28 100%
        );
      box-shadow:
        inset -18px -10px 42px rgba(0, 0, 0, 0.55),
        inset 10px 14px 38px rgba(240, 240, 238, 0.04),
        0 -1px 0 rgba(206, 202, 198, 0.08),
        0 9px 18px rgba(0, 0, 8, 0.55),
        0 34px 60px rgba(0, 0, 14, 0.22),
        inset 0 4px 0 rgba(252, 250, 248, 0.05);
      border: 1px solid #171412;
      transform: perspective(420px) rotateX(9deg);
    }

    .furniture.rock::before {
      content: "";
      position: absolute;
      width: 38%;
      height: 42%;
      top: 8%;
      right: 6%;
      background: radial-gradient(
        circle at 50% 42%,
        rgba(252, 252, 250, 0.18) 0%,
        rgba(252, 252, 248, 0.02) 64%,
        transparent 118%
      );
      border-radius: 40%;
      pointer-events: none;
      filter: saturate(1.05);
      mix-blend-mode: overlay;
      z-index: 1;
    }

    .furniture.flower {
      background: radial-gradient(circle at 50% 70%, rgba(34, 70, 24, 1) 0%, transparent 55%);
      border: none;
      filter: drop-shadow(0 22px 32px rgba(0, 8, 0, 0.35));
      transform: perspective(420px) rotateX(12deg);
    }

    .furniture.flower::before {
      content: "";
      position: absolute;
      left: 48%;
      top: 62%;
      width: 32%;
      height: 94%;
      margin-left: -16%;
      background: linear-gradient(
        174deg,
        #3c6228 0%,
        #213818 92%
      );
      border-radius: 3px;
      pointer-events: none;
      transform: perspective(50px) rotateX(-48deg);
      box-shadow:
        inset -10px -2px 10px rgba(0, 0, 0, 0.4),
        0 -2px 2px rgba(255, 255, 254, 0.05);
      z-index: 0;
    }

    .furniture.flower.yellow::after {
      content: "";
      position: absolute;
      left: 52%;
      top: 14%;
      width: 60%;
      height: 62%;
      margin-left: -30%;
      background: radial-gradient(
        circle at 50% 50%,
        #fff6a4 22%,
        #eecd40 92%,
        transparent 138%
      );
      border-radius: 50%;
      transform: translateZ(6px) perspective(140px) rotateX(-42deg);
      pointer-events: none;
      filter: saturate(1.15) brightness(1.05);
      z-index: 2;
      box-shadow:
        0 -5px 0 -6px rgba(255, 220, 96, 0.78),
        8px -2px 0 -9px rgba(255, 196, 50, 0.65),
        -8px -2px 0 -9px rgba(255, 196, 50, 0.65),
        0 -12px 0 -8px rgba(255, 210, 60, 0.82),
        12px 6px 0 -10px rgba(240, 180, 44, 0.65),
        -12px 6px 0 -10px rgba(240, 180, 44, 0.65),
        inset 0 -14px 12px rgba(180, 120, 0, 0.18);
      mix-blend-mode: normal;
    }

    .furniture.flower.blue::after {
      content: "";
      position: absolute;
      left: 52%;
      top: 14%;
      width: 60%;
      height: 62%;
      margin-left: -30%;
      background: radial-gradient(
        circle at 50% 50%,
        #d8f0ff 18%,
        #4f9fe8 88%,
        transparent 138%
      );
      border-radius: 50%;
      pointer-events: none;
      transform: translateZ(6px) perspective(140px) rotateX(-42deg);
      z-index: 2;
      box-shadow:
        0 -5px 0 -6px rgba(120, 190, 255, 0.78),
        8px -2px 0 -9px rgba(90, 150, 240, 0.65),
        -8px -2px 0 -9px rgba(90, 150, 240, 0.65),
        0 -12px 0 -8px rgba(100, 170, 255, 0.82),
        12px 6px 0 -10px rgba(70, 130, 220, 0.65),
        -12px 6px 0 -10px rgba(70, 130, 220, 0.65),
        inset 0 -12px 10px rgba(20, 60, 120, 0.25);
      filter: saturate(1.1);
      mix-blend-mode: normal;
    }

    .furniture.flower:not(.yellow):not(.blue)::after {
      content: "";
      position: absolute;
      left: 52%;
      top: 14%;
      width: 60%;
      height: 62%;
      margin-left: -30%;
      background: radial-gradient(
        circle at 50% 52%,
        #ffd8e8 12%,
        #e84878 94%,
        transparent 138%
      );
      border-radius: 50%;
      pointer-events: none;
      transform: translateZ(6px) perspective(140px) rotateX(-42deg);
      z-index: 2;
      box-shadow:
        0 -6px 0 -6px rgba(255, 160, 192, 0.78),
        8px -2px 0 -9px rgba(255, 100, 150, 0.65),
        -8px -2px 0 -9px rgba(255, 100, 150, 0.65),
        0 -12px 0 -8px rgba(255, 120, 160, 0.82),
        12px 6px 0 -10px rgba(240, 80, 120, 0.65),
        -12px 6px 0 -10px rgba(240, 80, 120, 0.65),
        inset 0 -10px 8px rgba(120, 20, 50, 0.22);
      filter: saturate(1.12);
      mix-blend-mode: normal;
    }

    .bomb-deny-flash {
      position: absolute;
      background: rgba(255, 50, 50, 0.4);
      border: 2px solid #ff3333;
      border-radius: 4px;
      pointer-events: none;
      animation: deny-flash 0.3s ease-out forwards;
      z-index: 5;
    }

    @keyframes deny-flash {
      0% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(1.1); }
    }

    .fog {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.38s ease;
      background: radial-gradient(
        circle at 50% 50%,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) calc(var(--vision-radius) - var(--vision-fade)),
        rgba(0, 0, 0, 0.35) calc(var(--vision-radius) - 1px),
        rgba(0, 0, 0, 0.78) calc(var(--vision-radius) + 48px),
        rgba(0, 0, 0, 1) calc(var(--vision-radius) + var(--vision-fade))
      );
      z-index: 40;
    }

    .arena.playing .fog {
      opacity: 1;
    }

    .arena.playing.story-intro .fog {
      opacity: 0.94;
    }

    .story-intro-overlay {
      position: fixed;
      inset: 0;
      z-index: 86;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 20px 18px max(40px, 8vh);
      pointer-events: none;
      background: linear-gradient(to top, rgba(5, 10, 24, 0.82) 0%, rgba(5, 10, 24, 0.2) 42%, transparent 72%);
    }

    .story-intro-overlay[hidden] {
      display: none !important;
    }

    @keyframes storyIntroPanelGlow {
      0%,
      100% {
        border-color: rgba(140, 180, 255, 0.28);
        box-shadow:
          0 10px 36px rgba(0, 0, 0, 0.45),
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 0 0 rgba(120, 170, 255, 0);
        transform: translateY(0);
      }
      50% {
        border-color: rgba(170, 210, 255, 0.55);
        box-shadow:
          0 12px 40px rgba(0, 0, 0, 0.48),
          inset 0 1px 0 rgba(255, 255, 255, 0.1),
          0 0 28px rgba(100, 160, 255, 0.22);
        transform: translateY(-3px);
      }
    }

    @keyframes storyIntroTextShimmer {
      0%,
      100% {
        text-shadow: 0 0 20px rgba(100, 160, 255, 0.25);
      }
      50% {
        text-shadow:
          0 0 24px rgba(140, 200, 255, 0.45),
          0 0 40px rgba(80, 140, 255, 0.2);
      }
    }

    .story-intro-overlay__panel {
      max-width: min(420px, 92vw);
      padding: 14px 18px 16px;
      border-radius: 14px;
      background: rgba(8, 14, 32, 0.78);
      border: 1px solid rgba(140, 180, 255, 0.28);
      box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(6px);
      pointer-events: auto;
    }

    .story-intro-overlay__skip {
      display: block;
      width: 100%;
      margin-top: 12px;
      padding: 10px 16px;
      box-sizing: border-box;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(232, 240, 255, 0.95);
      background: rgba(50, 78, 160, 0.75);
      border: 1px solid rgba(170, 210, 255, 0.35);
      border-radius: 10px;
      cursor: pointer;
      transition:
        background 0.2s ease,
        transform 0.15s ease;
    }

    .story-intro-overlay__skip:hover {
      background: rgba(65, 98, 195, 0.85);
      transform: translateY(-1px);
    }

    .story-intro-overlay__skip:active {
      transform: translateY(0);
    }

    .arena.story-intro .story-intro-overlay__panel {
      animation: storyIntroPanelGlow 3.6s ease-in-out infinite;
    }

    .arena.story-intro .story-intro-overlay__text {
      animation: storyIntroTextShimmer 2.8s ease-in-out infinite;
    }

    .story-intro-overlay__eyebrow {
      margin: 0 0 6px 0;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(180, 210, 255, 0.75);
    }

    .story-intro-overlay__text {
      margin: 0;
      font-size: clamp(15px, 3.5vw, 18px);
      line-height: 1.45;
      font-weight: 600;
      color: #e8f0ff;
      text-shadow: 0 0 20px rgba(100, 160, 255, 0.25);
    }

    .story-island-cluster {
      position: absolute;
      z-index: 2;
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
      pointer-events: none;
    }

    .story-island-lagoon {
      position: absolute;
      left: 0;
      top: 0;
      width: calc(var(--tile-size) * 3.6);
      height: calc(var(--tile-size) * 2.5);
      transform: translate(-50%, -58%);
      border-radius: 50%;
      background:
        radial-gradient(ellipse 72% 68% at 40% 38%, rgba(130, 190, 220, 0.42) 0%, rgba(50, 90, 120, 0.52) 55%, rgba(25, 50, 70, 0.6) 100%);
      border: 1px solid rgba(80, 140, 170, 0.35);
      box-shadow: inset 0 0 20px rgba(20, 60, 90, 0.45);
      opacity: 0.95;
    }

    .story-island-sand {
      position: absolute;
      width: 12px;
      height: 9px;
      margin-left: -6px;
      margin-top: -4px;
      border-radius: 42% 58% 48% 52%;
      background: linear-gradient(168deg, #d4c4a4 0%, #a89272 42%, #6e5c44 100%);
      opacity: 0.9;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    .story-island-rock {
      position: absolute;
      width: 15px;
      height: 12px;
      margin-left: -7px;
      margin-top: -6px;
      border-radius: 46%;
      background: linear-gradient(148deg, #6a6a74 0%, #383840 100%);
      opacity: 0.92;
      box-shadow:
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        1px 2px 4px rgba(0, 0, 0, 0.35);
    }

    .name-input-wrap {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 95;
    }

    .name-input {
      padding: 8px 12px;
      font-size: 14px;
      background: rgba(5, 8, 14, 0.85);
      border: 1px solid rgba(164, 192, 232, 0.4);
      border-radius: 8px;
      color: #ffffff;
      outline: none;
      backdrop-filter: blur(2px);
      min-width: 150px;
      text-align: center;
    }

    .name-input::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }

    .name-input:focus {
      border-color: #4b7bff;
      box-shadow: 0 0 8px rgba(75, 123, 255, 0.4);
    }

    .hud {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 70;
      color: #eaf2ff;
      font-size: 13px;
      line-height: 1.4;
      background: rgba(5, 8, 14, 0.72);
      border: 1px solid rgba(164, 192, 232, 0.4);
      border-radius: 8px;
      padding: 8px 10px;
      min-width: 170px;
      backdrop-filter: blur(2px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
    }

    .arena.playing .hud {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* Sağ kenar — karakter tepkisi (5 sn balon); z-index dokunmatik kontroller (72) üstü */
    .player-emote-tray {
      position: fixed;
      right: max(12px, env(safe-area-inset-right, 0px));
      top: 50%;
      transform: translateY(-50%);
      z-index: 75;
      display: none;
      flex-direction: column;
      gap: 8px;
      pointer-events: auto;
    }

    .arena.playing .player-emote-tray {
      display: flex;
    }

    .arena.playing.story-intro .player-emote-tray,
    .arena.playing:has(#gameOver.show) .player-emote-tray,
    .arena.playing:has(#pauseOverlay.show) .player-emote-tray {
      display: none !important;
      pointer-events: none;
    }

    .player-emote-btn {
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 12px;
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
      border: 2px solid rgba(255, 255, 255, 0.38);
      background: rgba(18, 28, 58, 0.82);
      box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
      touch-action: manipulation;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .player-emote-btn:hover {
      filter: brightness(1.1);
    }

    .player-emote-btn:active {
      transform: scale(0.96);
    }

    .arena.playing.arena--tablet-mode .player-emote-tray {
      top: max(28%, env(safe-area-inset-top, 0px) + 56px);
      transform: translateY(0);
    }

    .player-emote-bubble {
      position: absolute;
      left: 50%;
      bottom: 100%;
      z-index: 28;
      pointer-events: none;
      transform: translate(-50%, -4px);
      display: none;
    }

    .player-emote-bubble.player-emote-bubble--show {
      display: block;
      animation: playerEmotePop 0.28s ease-out;
    }

    .player-emote-bubble__glyph {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      min-height: 34px;
      padding: 4px 8px;
      border-radius: 14px 14px 14px 5px;
      font-size: 22px;
      line-height: 1;
      background: linear-gradient(165deg, #fff9f0 0%, #ffe8f0 100%);
      border: 2px solid rgba(34, 46, 86, 0.88);
      box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
      image-rendering: auto;
    }

    @keyframes playerEmotePop {
      0% {
        transform: translate(-50%, 2px) scale(0.72);
        opacity: 0.6;
      }
      100% {
        transform: translate(-50%, -4px) scale(1);
        opacity: 1;
      }
    }

    .hud strong {
      color: #ffffff;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    .game-over {
      position: absolute;
      inset: 0;
      z-index: 100;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: clamp(16px, 4vh, 36px) 16px;
      gap: 8px;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: rgba(0, 0, 0, 0);
      backdrop-filter: blur(0px);
      transition: background 0.5s ease, backdrop-filter 0.5s ease;
    }

    .game-over.show {
      display: flex;
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(4px);
    }

    .game-over h1 {
      font-size: clamp(28px, 6vw, 48px);
      margin: 0 0 12px 0;
      flex-shrink: 0;
      text-shadow: 0 0 20px currentColor;
      opacity: 0;
      transform: scale(0.5) translateY(-30px);
      animation: title-pop 0.6s ease forwards;
    }

    @keyframes title-pop {
      0% { opacity: 0; transform: scale(0.5) translateY(-30px); }
      60% { transform: scale(1.1) translateY(5px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }

    .game-over.win h1 {
      color: #4ade80;
    }

    .game-over.lose h1 {
      color: #f87171;
    }

    .game-over p {
      font-size: clamp(15px, 3vw, 24px);
      color: #e0e0e0;
      margin: 0;
      flex-shrink: 0;
      opacity: 0;
      transform: translateY(20px);
      animation: subtitle-slide 0.4s ease 0.3s forwards;
    }

    @keyframes subtitle-slide {
      to { opacity: 1; transform: translateY(0); }
    }

    .game-over-scoreboard {
      width: min(420px, 94vw);
      max-height: min(280px, 38vh);
      overflow: auto;
      flex-shrink: 0;
      margin: 12px 0 4px;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(12, 16, 40, 0.85);
      border: 1px solid rgba(120, 170, 255, 0.28);
      box-shadow: 0 12px 32px rgba(0, 0, 40, 0.45);
      opacity: 0;
      transform: translateY(12px);
      animation: subtitle-slide 0.45s ease 0.4s forwards;
    }

    .game-over-scoreboard[hidden] {
      display: none !important;
    }

    .end-scoreboard__title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(180, 210, 255, 0.88);
      margin-bottom: 8px;
      text-align: center;
    }

    .end-scoreboard__rows {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .end-scoreboard__row {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(24, 32, 70, 0.55);
      border: 1px solid rgba(90, 120, 180, 0.25);
    }

    .end-scoreboard__place {
      font-size: 18px;
      font-weight: 800;
      color: #ffd88a;
      min-width: 2.25ch;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .end-scoreboard__skin {
      flex-shrink: 0;
      width: 52px;
      height: auto;
      min-height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: rgba(0, 0, 22, 0.4);
      overflow: visible;
      padding: 6px 0;
    }

    .end-scoreboard__skin .scoreboard-mini .player-avatar {
      width: var(--icon-size);
      height: var(--icon-size);
      transform: scale(0.38);
      transform-origin: 50% 90%;
      pointer-events: none;
    }

    .end-scoreboard__detail {
      flex: 1;
      min-width: 0;
      text-align: left;
    }

    .end-scoreboard__name {
      font-size: 15px;
      font-weight: 700;
      color: #f2f6ff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .end-scoreboard__kills {
      font-size: 12px;
      color: rgba(200, 220, 255, 0.78);
      margin-top: 2px;
    }

    .restart-btn {
      margin-top: 30px;
      padding: 12px 32px;
      font-size: 18px;
      background: #4b7bff;
      color: white;
      border: none;
      opacity: 0;
      transform: translateY(20px);
      animation: button-fade 0.4s ease 0.5s forwards;
    }

    @keyframes button-fade {
      to { opacity: 1; transform: translateY(0); }
    }

    .restart-btn {
      margin-top: 30px;
      padding: 12px 32px;
      font-size: 18px;
      background: #4b7bff;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      opacity: 0;
      transform: translateY(20px);
      animation: button-fade 0.4s ease 0.5s forwards;
    }

    .restart-btn:hover {
      background: #3b6bdf;
    }

    .restart-btn {
      margin-top: 30px;
      padding: 12px 32px;
      font-size: 18px;
      background: #4b7bff;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    .restart-btn:hover {
      background: #3b6bdf;
    }

    .pause-overlay {
      position: absolute;
      inset: 0;
      z-index: 90;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(3px);
      pointer-events: none;
    }

    .pause-overlay .pause-text,
    .pause-overlay .pause-hint,
    .pause-overlay .pause-lobby-btn {
      pointer-events: auto;
    }

    .pause-overlay.show {
      display: flex;
    }

    .pause-text {
      font-size: 48px;
      color: #ffffff;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
      margin-bottom: 20px;
    }

    .pause-hint {
      font-size: 20px;
      color: #aaaaaa;
    }

    .kill-notify {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 80;
      font-size: 18px;
      font-weight: bold;
      padding: 10px 20px;
      background: rgba(0, 0, 0, 0.8);
      border-radius: 8px;
      color: #ffffff;
      text-shadow: 0 0 10px rgba(255, 100, 100, 0.8);
      opacity: 0;
      pointer-events: none;
      white-space: nowrap;
    }

    .kill-notify.show {
      animation: kill-pop 2s ease-out forwards;
    }

    .death-summary {
      position: fixed;
      left: 50%;
      bottom: 28px;
      z-index: 260;
      min-width: 260px;
      max-width: 92vw;
      padding: 14px 20px 16px;
      text-align: center;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      border-radius: 14px;
      background: rgba(8, 10, 22, 0.88);
      border: 1px solid rgba(255, 100, 100, 0.35);
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 12px 38px rgba(0, 0, 25, 0.55);
      transition:
        opacity 0.38s ease,
        visibility 0.38s ease,
        transform 0.38s ease;
      transform-origin: center bottom;
      transform: translateX(-50%) translateY(16px);
    }

    .death-summary.death-summary--visible {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .death-summary__badge {
      font-size: 11px;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: rgba(255, 160, 160, 0.85);
      margin-bottom: 6px;
    }

    .death-summary__place {
      font-size: 26px;
      font-weight: 800;
      color: #f0f4ff;
      line-height: 1.15;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
      margin-bottom: 8px;
    }

    .death-summary__killer {
      font-size: 14px;
      line-height: 1.35;
      color: rgba(210, 220, 245, 0.95);
    }

    .death-summary__killer strong {
      color: #fff;
      font-weight: 700;
    }

    @keyframes kill-pop {
      0% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.8); }
      10% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1); }
      20% { transform: translateX(-50%) scale(1); }
      70% { opacity: 1; }
      100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    }

    .bomb-notify {
      position: absolute;
      top: 130px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 80;
      font-size: 18px;
      font-weight: bold;
      padding: 10px 20px;
      background: linear-gradient(135deg, #ff6b00, #ff0000);
      border-radius: 8px;
      color: #ffffff;
      text-shadow: 0 0 10px rgba(255, 100, 0, 0.8);
      opacity: 0;
      pointer-events: none;
      white-space: nowrap;
      box-shadow: 0 0 20px rgba(255, 100, 0, 0.6);
    }

    .bomb-notify.show {
      animation: bomb-explode 2s ease-out forwards;
    }

    @keyframes bomb-explode {
      0% { opacity: 0; transform: translateX(-50%) scale(0) rotate(-10deg); }
      15% { opacity: 1; transform: translateX(-50%) scale(1.3) rotate(5deg); }
      25% { transform: translateX(-50%) scale(0.9) rotate(-3deg); }
      35% { transform: translateX(-50%) scale(1.05) rotate(2deg); }
      45% { transform: translateX(-50%) scale(1) rotate(0deg); }
      70% { opacity: 1; }
      100% { opacity: 0; transform: translateX(-50%) scale(0.8) rotate(5deg); }
    }

    .bomb-wrap {
      position: absolute;
      width: 18px;
      height: 18px;
      pointer-events: none;
    }

    .bomb {
      position: absolute;
      left: 0;
      top: 0;
      width: 18px;
      height: 18px;
      border-radius: 2px;
      border: 2px solid #121217;
      background:
        linear-gradient(90deg, #c83b24 0 50%, #b7291b 50% 100%),
        linear-gradient(180deg, #f99864 0 30%, #7a1f17 100%);
      box-shadow: 0 0 0 2px #5f1510 inset, 0 0 10px rgba(252, 104, 56, 0.45);
      transform-origin: 50% 50%;
      animation: bomb-arming 2s cubic-bezier(0.33, 1.42, 0.28, 1) forwards;
      image-rendering: pixelated;
    }

    .bomb::before {
      content: "";
      position: absolute;
      width: 4px;
      height: 6px;
      left: 7px;
      top: -6px;
      background: #d8b96b;
      border: 1px solid #5b4a27;
      border-bottom: 0;
    }

    .bomb::after {
      content: "";
      position: absolute;
      left: 8px;
      top: -9px;
      width: 2px;
      height: 2px;
      background: #ffec89;
      box-shadow: 0 0 0 1px #ef8e29, 0 0 8px #ffbd56;
      animation: spark-flicker 0.28s ease-in-out infinite alternate;
    }

    .bomb.armed {
      animation: bomb-idle 0.82s ease-in-out infinite;
    }

    .bomb-timer,
    .bomb-arm {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-family: "Courier New", monospace;
      font-size: 9px;
      line-height: 1;
      letter-spacing: 0.25px;
      color: #fff8d6;
      text-shadow: 1px 1px 0 #000;
      white-space: nowrap;
      pointer-events: none;
    }

    .bomb-timer {
      bottom: calc(100% + 10px);
      background: rgba(4, 5, 9, 0.85);
      border: 1px solid rgba(255, 209, 113, 0.65);
      border-radius: 2px;
      padding: 1px 3px;
      min-width: 32px;
      text-align: center;
    }

    .bomb-arm {
      bottom: calc(100% + 23px);
      color: #ffb38f;
      opacity: 0;
    }

    .bomb-wrap.arming .bomb-arm {
      opacity: 1;
    }

    .bomb-wrap.bot-bomb {
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    .bomb-wrap.bot-bomb .bomb {
      border-color: #121217;
      background:
        linear-gradient(90deg, #246bff 0 50%, #1b5ab7 50% 100%),
        linear-gradient(180deg, #64a4ff 0 30%, #1a3d7a 100%) !important;
      box-shadow: 0 0 0 2px #0f2a5f inset, 0 0 10px rgba(56, 139, 253, 0.45) !important;
    }

    .bomb-wrap.bot-bomb .bomb::before {
      background: #d8d36b;
      border-color: #5b4a27;
    }

    .bomb-wrap.bot-bomb .bomb::after {
      background: #89ecff;
      box-shadow: 0 0 0 1px #29b8ef, 0 0 8px #56c8ff !important;
    }

    .bomb-wrap.bot-bomb .bomb-timer,
    .bomb-wrap.bot-bomb .bomb-arm {
      opacity: 1;
    }

    .bomb-wrap.hidden-bomb {
      display: none;
    }

    .bomb-wrap.almost-hidden {
      opacity: 0.3;
    }

    .explosion {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .blast-flash {
      position: absolute;
      z-index: 70;
      width: calc(var(--tile-size) * 2.4);
      height: calc(var(--tile-size) * 2.4);
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(
        circle at 45% 40%,
        rgba(255, 255, 240, 0.98) 0%,
        rgba(255, 200, 80, 0.55) 32%,
        rgba(255, 80, 30, 0.22) 58%,
        transparent 74%
      );
      mix-blend-mode: screen;
      animation: blast-flash-pop 0.26s cubic-bezier(0.2, 0.95, 0.15, 1) forwards;
    }

    .blast-ring {
      position: absolute;
      margin: 0;
      border-radius: 50%;
      border: 3px solid #ff6b35;
      background: radial-gradient(circle, rgba(255, 230, 120, 0.95) 0%, rgba(255, 160, 40, 0.85) 28%, rgba(220, 50, 20, 0) 74%);
      box-shadow: 0 0 12px rgba(255, 150, 50, 0.45);
      animation: ring-expand 0.62s cubic-bezier(0.15, 0.82, 0.12, 1) forwards;
    }

    .blast-ring-2 {
      border-color: #ffaa30;
      animation-duration: 0.74s;
      animation-delay: 0.06s;
    }

    .blast-ring-3 {
      border-color: #ffe870;
      animation-duration: 0.92s;
      animation-delay: 0.14s;
    }

    .blast-debris {
      position: absolute;
      width: 6px;
      height: 6px;
      background: #ffcc40;
      border: 1px solid #e05010;
      image-rendering: pixelated;
      animation: debris-fly 0.58s cubic-bezier(0.12, 0.88, 0.16, 1) forwards;
    }

    .arena.screen-shake {
      animation: screen-shake 0.4s ease-out;
    }

    .hearts {
      position: absolute;
      left: 50%;
      top: calc(100% + 4px);
      transform: translateX(-50%) translateZ(26px);
      display: flex;
      gap: 3px;
      pointer-events: none;
      z-index: 22;
    }

    .heart {
      width: 8px;
      height: 8px;
      background: #ff4757;
      clip-path: polygon(50% 100%, 0% 35%, 25% 0%, 75% 0%, 100% 35%);
    }

    .heart.empty {
      background: rgba(255, 71, 87, 0.3);
    }

    .heart.heart--half {
      background: linear-gradient(90deg, #ff4757 0%, #ff4757 50%, rgba(255, 71, 87, 0.34) 50%, rgba(255, 71, 87, 0.34) 100%);
    }

    .sword-cooldown {
      position: absolute;
      left: 50%;
      top: calc(100% + 14px);
      transform: translateX(-50%) translateZ(26px);
      width: 24px;
      height: 4px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 2px;
      overflow: hidden;
      pointer-events: none;
      z-index: 22;
    }

    .sword-cooldown-fill {
      width: 100%;
      height: 100%;
      background: #60a5fa;
      border-radius: 2px;
      transition: width 0.1s linear;
    }

    .bomb-count {
      position: absolute;
      left: 50%;
      top: calc(100% + 20px);
      transform: translateX(-50%) translateZ(26px);
      display: flex;
      align-items: center;
      gap: 2px;
      pointer-events: none;
      z-index: 22;
    }

    .bomb-count-icon {
      width: 8px;
      height: 10px;
      image-rendering: pixelated;
    }

    .bomb-count-num {
      font-size: 10px;
      color: #ffd700;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
      font-weight: bold;
      font-family: monospace;
    }

    .player .held-sword {
      position: absolute;
      width: 8px;
      height: 36px;
      pointer-events: none;
      z-index: 11;
      transform-style: preserve-3d;
      transform-origin: 50% 92%;
      transition:
        transform 0.1s ease-out,
        opacity 0.22s ease 0.12s,
        visibility 0s linear 0;
    }

    .player .held-sword svg {
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
    }

    .player:not(.placing) .held-sword {
      opacity: 1;
      visibility: visible;
    }

    .player.placing .held-sword {
      opacity: 0;
      visibility: hidden;
      transition:
        opacity 0.08s ease,
        transform 0.1s ease-out,
        visibility 0s linear 0.08s;
    }

    .player.dir-right .held-sword {
      right: 1px;
      top: 4px;
      transform: translate3d(0, 0, 22px) rotate(18deg);
    }

    .player.dir-left .held-sword {
      left: 1px;
      top: 4px;
      transform: translate3d(0, 0, 22px) scaleX(-1) rotate(18deg);
    }

    .player.dir-up .held-sword {
      top: -6px;
      left: 50%;
      transform: translateX(-50%) translateZ(22px) rotate(-90deg);
    }

    .player.dir-down .held-sword {
      top: 6px;
      left: 50%;
      transform: translateX(-50%) translateZ(22px) rotate(90deg);
    }

    .player.swinging .held-sword {
      animation-duration: 0.26s;
      animation-timing-function: cubic-bezier(0.34, 0.82, 0.35, 1);
      animation-fill-mode: forwards;
    }

    .player.swinging.dir-right .held-sword {
      animation-name: sword-swing-held-right;
    }

    @keyframes sword-swing-held-right {
      0% { transform: translate3d(0, 0, 22px) rotate(26deg); }
      42% { transform: translate3d(-3px, 2px, 26px) rotate(-52deg); }
      100% { transform: translate3d(0, 0, 22px) rotate(18deg); }
    }

    .player.swinging.dir-left .held-sword {
      animation-name: sword-swing-held-left;
    }

    @keyframes sword-swing-held-left {
      0% { transform: translate3d(0, 0, 22px) scaleX(-1) rotate(26deg); }
      42% { transform: translate3d(3px, 2px, 26px) scaleX(-1) rotate(-52deg); }
      100% { transform: translate3d(0, 0, 22px) scaleX(-1) rotate(18deg); }
    }

    .player.swinging.dir-up .held-sword {
      animation-name: sword-swing-held-up;
    }

    @keyframes sword-swing-held-up {
      0% { transform: translateX(-50%) translateZ(22px) rotate(-92deg); }
      42% { transform: translateX(-50%) translateZ(26px) rotate(-158deg); }
      100% { transform: translateX(-50%) translateZ(22px) rotate(-90deg); }
    }

    .player.swinging.dir-down .held-sword {
      animation-name: sword-swing-held-down;
    }

    @keyframes sword-swing-held-down {
      0% { transform: translateX(-50%) translateZ(22px) rotate(92deg); }
      42% { transform: translateX(-50%) translateZ(26px) rotate(158deg); }
      100% { transform: translateX(-50%) translateZ(22px) rotate(90deg); }
    }

    .sword-slash {
      position: absolute;
      width: 38px;
      height: 5px;
      margin: 0;
      pointer-events: none;
      z-index: 36;
      opacity: 0;
      border-radius: 2px;
      background: linear-gradient(90deg, transparent 0%, rgba(240, 250, 255, 1) 50%, transparent 100%);
      box-shadow:
        0 0 8px rgba(180, 220, 255, 0.7),
        0 0 16px rgba(100, 160, 255, 0.35);
      transform-origin: center center;
    }

    .player.swinging.dir-right .sword-slash {
      left: auto;
      right: 22px;
      top: 16px;
      width: 38px;
      height: 5px;
      transform: none;
      transform-origin: 0% 50%;
      animation: slash-sweep-right 0.26s cubic-bezier(0.34, 0.82, 0.35, 1) forwards;
    }

    .player.swinging.dir-left .sword-slash {
      right: auto;
      left: 22px;
      top: 16px;
      width: 38px;
      height: 5px;
      transform: none;
      transform-origin: 100% 50%;
      animation: slash-sweep-left 0.26s cubic-bezier(0.34, 0.82, 0.35, 1) forwards;
    }

    .player.swinging.dir-up .sword-slash {
      top: -2px;
      left: 50%;
      right: auto;
      width: 5px;
      height: 36px;
      margin-left: 0;
      background: linear-gradient(180deg, transparent 0%, rgba(240, 250, 255, 1) 45%, transparent 100%);
      transform-origin: 50% 100%;
      animation: slash-sweep-up 0.26s cubic-bezier(0.34, 0.82, 0.35, 1) forwards;
    }

    .player.swinging.dir-down .sword-slash {
      top: 18px;
      left: 50%;
      right: auto;
      width: 5px;
      height: 36px;
      margin-left: 0;
      background: linear-gradient(180deg, transparent 0%, rgba(240, 250, 255, 1) 55%, transparent 100%);
      transform-origin: 50% 0%;
      animation: slash-sweep-down 0.26s cubic-bezier(0.34, 0.82, 0.35, 1) forwards;
    }

    @keyframes slash-sweep-right {
      0% { opacity: 0; transform: translateX(-6px) rotate(-14deg) scaleX(0.12); }
      22% { opacity: 1; }
      100% { opacity: 0; transform: translateX(20px) rotate(10deg) scaleX(1.08); }
    }

    @keyframes slash-sweep-left {
      0% { opacity: 0; transform: translateX(6px) rotate(14deg) scaleX(0.12); }
      22% { opacity: 1; }
      100% { opacity: 0; transform: translateX(-20px) rotate(-10deg) scaleX(1.08); }
    }

    @keyframes slash-sweep-up {
      0% { opacity: 0; transform: translate(-50%, 12px) scaleY(0.15); }
      22% { opacity: 1; }
      100% { opacity: 0; transform: translate(-50%, -26px) scaleY(1.08); }
    }

    @keyframes slash-sweep-down {
      0% { opacity: 0; transform: translate(-50%, -12px) scaleY(0.15); }
      22% { opacity: 1; }
      100% { opacity: 0; transform: translate(-50%, 26px) scaleY(1.08); }
    }

    @keyframes walk-bounce {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-1px); }
    }

    @keyframes walk-bounce-left {
      0%, 100% { transform: scaleX(-1) translateY(0px); }
      50% { transform: scaleX(-1) translateY(-1px); }
    }

    @keyframes walk-up {
      0%, 100% { transform: translateY(-1px) scale(0.95); }
      50% { transform: translateY(0px) scale(0.96); }
    }

    @keyframes walk-down {
      0%, 100% { transform: translateY(1px) scale(1.03); }
      50% { transform: translateY(0px) scale(1.02); }
    }

    @keyframes leg-left {
      0%, 100% { transform: translateX(0px) translateY(0px); }
      25% { transform: translateX(-2px) translateY(-1px); }
      50% { transform: translateX(0px) translateY(0px); }
      75% { transform: translateX(2px) translateY(1px); }
    }

    @keyframes leg-right {
      0%, 100% { transform: translateX(0px) translateY(0px); }
      25% { transform: translateX(2px) translateY(1px); }
      50% { transform: translateX(0px) translateY(0px); }
      75% { transform: translateX(-2px) translateY(-1px); }
    }

    @keyframes blast-flash-pop {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.12);
      }
      38% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.45);
      }
    }

    @keyframes bomb-arming {
      0% {
        transform: scale(0.25) rotate(-8deg);
        opacity: 0;
        filter: brightness(0.55);
      }
      28% {
        transform: scale(1.12) rotate(5deg);
        opacity: 1;
        filter: brightness(1.18);
      }
      52% {
        transform: scale(0.93) rotate(-4deg);
        filter: brightness(0.92);
      }
      74% {
        transform: scale(1.06) rotate(3deg);
        filter: brightness(1.25);
      }
      100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
        filter: brightness(1);
      }
    }

    @keyframes bomb-idle {
      0%,
      100% {
        transform: translateY(0);
        filter: brightness(1) drop-shadow(0 0 4px rgba(255, 150, 60, 0.35));
      }
      50% {
        transform: translateY(-2px);
        filter: brightness(1.38) drop-shadow(0 0 9px rgba(255, 180, 85, 0.55));
      }
    }

    @keyframes spark-flicker {
      0% {
        transform: translate(0, 0);
        opacity: 1;
      }
      100% {
        transform: translate(-1px, -1px);
        opacity: 0.62;
      }
    }

    @keyframes ring-expand {
      0% {
        transform: translate(-50%, -50%) scale(0.12);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) scale(2.65);
        opacity: 0;
      }
    }

    @keyframes debris-fly {
      0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 1;
      }
      100% {
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(148deg)
          scale(0.12);
        opacity: 0;
      }
    }

    @keyframes screen-shake {
      0%, 100% { transform: translate(0, 0); }
      10% { transform: translate(-4px, 3px); }
      20% { transform: translate(5px, -4px); }
      30% { transform: translate(-3px, 5px); }
      40% { transform: translate(4px, -3px); }
      50% { transform: translate(-5px, 4px); }
      60% { transform: translate(3px, -5px); }
      70% { transform: translate(-4px, 3px); }
      80% { transform: translate(5px, -4px); }
      90% { transform: translate(-3px, 2px); }
    }