/* === 100% Self-Contained Mobile-First Utility & Theme CSS === */
    :root {
      --bg-obsidian: #090712;
      --panel-dark: rgba(18, 15, 32, 0.95);
      --gold-trim: #f59e0b;
      --vp-glow: #c084fc;
    }
    *, ::before, ::after {
      box-sizing: border-box;
      border-width: 0;
      border-style: solid;
      border-color: #334155;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      max-width: 100vw;
      overflow-x: hidden;
      font-family: 'Noto Sans CJK TC', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Inter', sans-serif;
      background: radial-gradient(circle at 50% 20%, #1d1536 0%, #0b0816 65%, #05030a 100%);
      color: #f8fafc;
      min-height: 100vh;
    }
    button, select, input {
      font-family: inherit;
      font-size: 100%;
      line-height: inherit;
      color: inherit;
      margin: 0;
      padding: 0;
    }
    button { cursor: pointer; background-color: transparent; background-image: none; }
    button:disabled { cursor: not-allowed; }
    h1, h2, h3, h4, p, ul { margin: 0; }

    /* Layout & Flex/Grid Utilities */
    .hidden { display: none !important; }
    .block { display: block; }
    .flex { display: flex; }
    .inline-flex { display: inline-flex; }
    .grid { display: grid; }
    .flex-1 { flex: 1 1 0%; }
    .shrink-0 { flex-shrink: 0; }
    .min-w-0 { min-width: 0px; }
    .flex-col { flex-direction: column; }
    .flex-wrap { flex-wrap: wrap; }
    .items-center { align-items: center; }
    .items-start { align-items: flex-start; }
    .items-stretch { align-items: stretch; }
    .justify-between { justify-content: space-between; }
    .justify-center { justify-content: center; }
    .justify-end { justify-content: flex-end; }

    .relative { position: relative; }
    .absolute { position: absolute; }
    .fixed { position: fixed; }
    .sticky { position: sticky; }
    .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
    .top-1 { top: 0.25rem; }
    .left-1 { left: 0.25rem; }
    .right-1 { right: 0.25rem; }
    .bottom-0 { bottom: 0; }
    .left-0 { left: 0; }
    .right-0 { right: 0; }
    .z-20 { z-index: 20; }
    .z-30 { z-index: 30; }
    .z-40 { z-index: 40; }
    .z-50 { z-index: 50; }

    /* Sizing */
    .w-full { width: 100%; }
    .max-w-full { max-width: 100%; }
    .w-4 { width: 1rem; }
    .w-5 { width: 1.25rem; }
    .w-6 { width: 1.5rem; }
    .w-7 { width: 1.75rem; }
    .w-36 { width: 9rem; }
    .w-40 { width: 10rem; }
    .w-44 { width: 11rem; }
    .w-\[142px\] { width: 142px; }
    .w-\[162px\] { width: 162px; }
    .w-\[170px\] { width: 170px; }
    .w-\[176px\] { width: 176px; }
    .h-4 { height: 1rem; }
    .h-5 { height: 1.25rem; }
    .h-6 { height: 1.5rem; }
    .h-7 { height: 1.75rem; }
    .h-40 { height: 10rem; }
    .h-44 { height: 11rem; }
    .h-\[166px\] { height: 166px; }
    .min-h-screen { min-height: 100vh; }
    .max-h-\[46vh\] { max-height: 46vh; }
    .max-h-\[85vh\] { max-height: 85vh; }
    .max-h-\[90vh\] { max-height: 90vh; }
    .max-w-md { max-width: 28rem; }
    .max-w-lg { max-width: 32rem; }
    .max-w-2xl { max-width: 42rem; }
    .max-w-4xl { max-width: 56rem; }
    .max-w-5xl { max-width: 64rem; }
    .max-w-\[1480px\] { max-width: 1480px; }

    /* Spacing */
    .mx-auto { margin-left: auto; margin-right: auto; }
    .my-0\.5 { margin-top: 0.125rem; margin-bottom: 0.125rem; }
    .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
    .mt-0\.5 { margin-top: 0.125rem; }
    .mt-1 { margin-top: 0.25rem; }
    .mt-1\.5 { margin-top: 0.375rem; }
    .mt-2 { margin-top: 0.5rem; }
    .mt-3 { margin-top: 0.75rem; }
    .mb-1 { margin-bottom: 0.25rem; }
    .mb-1\.5 { margin-bottom: 0.375rem; }
    .mb-2 { margin-bottom: 0.5rem; }
    .mb-3 { margin-bottom: 0.75rem; }

    .p-1 { padding: 0.25rem; }
    .p-1\.5 { padding: 0.375rem; }
    .p-2 { padding: 0.5rem; }
    .p-2\.5 { padding: 0.625rem; }
    .p-3 { padding: 0.75rem; }
    .p-4 { padding: 1rem; }
    .p-5 { padding: 1.25rem; }
    .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
    .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
    .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
    .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
    .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
    .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
    .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
    .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .pt-1 { padding-top: 0.25rem; }
    .pt-1\.5 { padding-top: 0.375rem; }
    .pb-1 { padding-bottom: 0.25rem; }
    .pb-1\.5 { padding-bottom: 0.375rem; }
    .pb-2 { padding-bottom: 0.5rem; }
    .pl-4 { padding-left: 1rem; }

    .gap-1 { gap: 0.25rem; }
    .gap-1\.5 { gap: 0.375rem; }
    .gap-2 { gap: 0.5rem; }
    .gap-2\.5 { gap: 0.625rem; }
    .gap-3 { gap: 0.75rem; }
    .space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
    .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }
    .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
    .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }

    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Borders & Radius */
    .rounded { border-radius: 0.25rem; }
    .rounded-md { border-radius: 0.375rem; }
    .rounded-lg { border-radius: 0.5rem; }
    .rounded-xl { border-radius: 0.75rem; }
    .rounded-2xl { border-radius: 1rem; }
    .rounded-full { border-radius: 9999px; }
    .rounded-t-lg { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
    .border { border-width: 1px; }
    .border-2 { border-width: 2px; }
    .border-b { border-bottom-width: 1px; }
    .border-t { border-top-width: 1px; }
    .border-dashed { border-style: dashed; }


    .text-\[9px\] { font-size: 9px; line-height: 1.15; }
    .w-\[196px\] { width: 196px; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


    .w-\[116px\] { width: 116px; }
    .w-\[122px\] { width: 122px; }
    .w-\[166px\] { width: 166px; }
    .w-\[178px\] { width: 178px; }
    .h-\[168px\] { height: 168px; }
    .border-t-2 { border-top-width: 2px; }
    @media (min-width: 640px) {
      .sm\:w-\[148px\] { width: 148px; }
      .sm\:h-\[190px\] { height: 190px; }
    }


    .self-stage-theme {
      background: linear-gradient(180deg, rgba(245, 158, 11, 0.10) 0%, rgba(15, 23, 42, 0.92) 100%);
      border: 2px solid rgba(251, 191, 36, 0.65);
      box-shadow: inset 0 0 22px rgba(245, 158, 11, 0.12);
    }
    .enemy-stage-theme {
      background: repeating-linear-gradient(-45deg, rgba(159, 18, 57, 0.16) 0px, rgba(159, 18, 57, 0.16) 10px, rgba(15, 23, 42, 0.95) 10px, rgba(15, 23, 42, 0.95) 20px);
      border: 2px solid #f43f5e;
      box-shadow: 0 0 18px rgba(244, 63, 94, 0.35), inset 0 0 24px rgba(225, 29, 72, 0.22);
    }
    .art-portrait-box {
      width: 64px;
      height: 64px;
      border-radius: 0.6rem;
      object-fit: cover;
      border: 1.5px solid rgba(251, 191, 36, 0.6);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
    }
    .art-portrait-box-lg {
      width: 84px;
      height: 84px;
      border-radius: 0.75rem;
      object-fit: cover;
      border: 2px solid rgba(251, 191, 36, 0.75);
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.8);
    }
    .art-mini-avatar {
      width: 24px;
      height: 24px;
      border-radius: 0.35rem;
      object-fit: cover;
      border: 1px solid rgba(255,255,255,0.4);
    }
    .full-gpt-card-img {
      width: 100%;
      height: auto;
      border-radius: 0.75rem;
      display: block;
      box-shadow: 0 10px 25px rgba(0,0,0,0.85);
    }

    .left-1\/2 { left: 50%; }
    .-translate-x-1\/2 { transform: translateX(-50%); }
    .bottom-2 { bottom: 0.5rem; }
    .h-\[256px\] { height: 256px; }

    /* === V9 UI Polish & 7-Part Interactive Animation Engine CSS === */
    .aspect-card-2-3 {
      aspect-ratio: 2 / 3;
      height: auto !important;
      align-self: center;
    }
    .empty-rune-slot {
      background:
        radial-gradient(circle at 50% 42%, rgba(30, 41, 59, 0.75) 0%, rgba(9, 13, 26, 0.96) 75%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 10px);
      box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.85);
    }
    .spell-card-sigil {
      background:
        radial-gradient(circle at 50% 45%, rgba(56, 189, 248, 0.14) 0%, rgba(15, 23, 42, 0.96) 70%);
    }
    .spell-card-sigil-atk {
      background:
        radial-gradient(circle at 50% 45%, rgba(244, 63, 94, 0.18) 0%, rgba(24, 10, 20, 0.96) 70%);
    }
    @keyframes playableBreath {
      0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 6px rgba(52, 211, 153, 0.35); }
      50% { box-shadow: 0 6px 16px rgba(0,0,0,0.75), 0 0 14px rgba(52, 211, 153, 0.75); }
    }
    .playable-card-glow {
      box-shadow: 0 4px 12px rgba(0,0,0,0.65), 0 0 10px rgba(52, 211, 153, 0.55);
    }

    /* 1. Holographic Foil Shimmer Overlay on 2:3 Cards */
    @keyframes holoSweep {
      0% { transform: translateX(-140%) skewX(-25deg); }
      35%, 100% { transform: translateX(220%) skewX(-25deg); }
    }
    .holo-sheen-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      border-radius: inherit;
      z-index: 10;
    }
    .holo-sheen-layer::after {
      content: "";
      position: absolute;
      top: 0; bottom: 0; left: 0;
      width: 45%;
      background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255, 248, 220, 0.24) 50%, rgba(255,255,255,0) 100%);
      transform: translateX(-140%) skewX(-25deg);
    }

    /* Interactive 3D Tilt Card Wrapper */
    .tilt-card-3d {
      transform-style: preserve-3d;
      transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.16s ease;
      will-change: transform;
    }
    .tilt-card-3d:active {
      transform: scale(0.97);
    }

    /* 2. 3D Y-Axis 180deg Flip Entry Animation */
    @keyframes cardFlip3D {
      0% { transform: perspective(800px) rotateY(90deg) scale(0.88); opacity: 0.3; filter: brightness(1.8); }
      60% { transform: perspective(800px) rotateY(-8deg) scale(1.03); opacity: 1; filter: brightness(1.15); }
      100% { transform: perspective(800px) rotateY(0deg) scale(1); opacity: 1; filter: brightness(1); }
    }
    .anim-flip-in {
      animation: cardFlip3D 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* 3. Hand Card Staggered Deal Animation */
    @keyframes handDealUp {
      0% { transform: translateY(28px) scale(0.9); opacity: 0; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }
    .anim-hand-deal {
      animation: handDealUp 0.38s cubic-bezier(0.2, 0.9, 0.2, 1) backwards;
    }

    /* 4. Target Hit Shake & Flash Animation */
    @keyframes hitShakeAnim {
      0%, 100% { transform: translateX(0); }
      15% { transform: translateX(-7px) rotate(-1.5deg); filter: brightness(1.5) sepia(0.5) hue-rotate(-30deg); }
      35% { transform: translateX(7px) rotate(1.5deg); }
      55% { transform: translateX(-5px); }
      75% { transform: translateX(4px); }
    }
    .anim-hit-shake {
      animation: hitShakeAnim 0.5s ease-in-out;
    }

    /* 5. Floating Combat Numbers (+10💎 / 🔥-9💎) */
    @keyframes floatUpFade {
      0% { transform: translate(-50%, 6px) scale(0.78); opacity: 0; }
      12% { transform: translate(-50%, -6px) scale(1.14); opacity: 1; }
      86% { transform: translate(-50%, -22px) scale(1.04); opacity: 1; }
      100% { transform: translate(-50%, -36px) scale(0.94); opacity: 0; }
    }
    .vfx-floating-number {
      position: fixed;
      z-index: 9999;
      pointer-events: none !important;
      font-weight: 900;
      font-size: 0.75rem;
      padding: 0.18rem 0.55rem;
      max-width: 82vw;
      overflow: hidden;
      text-overflow: ellipsis;
      border-radius: 9999px;
      white-space: nowrap;
      box-shadow: 0 6px 18px rgba(0,0,0,0.9);
      animation: floatUpFade var(--float-num-dur, 1.35s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* 6. Shockwave Ring on Target Impact */
    @keyframes shockwaveExpand {
      0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.95; border-width: 6px; }
      100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; border-width: 1px; }
    }
    .vfx-shockwave-ring {
      position: fixed;
      z-index: 9990;
      width: 90px;
      height: 90px;
      border-radius: 9999px;
      pointer-events: none;
      animation: shockwaveExpand 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* 7. Cinematic Spell Cut-In Banner */
    @keyframes cutInSlide {
      0% { transform: translate(-50%, -18px) scale(0.88); opacity: 0; }
      15% { transform: translate(-50%, 0px) scale(1.03); opacity: 1; }
      82% { transform: translate(-50%, 0px) scale(1); opacity: 1; }
      100% { transform: translate(-50%, -12px) scale(0.95); opacity: 0; }
    }
    .vfx-cutin-banner {
      position: fixed;
      top: 22%;
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(49, 16, 47, 0.98) 100%);
      backdrop-filter: blur(8px);
      left: 50%;
      z-index: 9995;
      pointer-events: none;
      width: 92%;
      max-width: 360px;
      border-radius: 0.85rem;
      padding: 0.55rem 0.85rem;
      box-shadow: 0 14px 35px rgba(0,0,0,0.9), 0 0 25px rgba(245, 158, 11, 0.55);
      animation: cutInSlide 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }


    .pointer-events-none { pointer-events: none !important; }
    .pointer-events-auto { pointer-events: auto !important; }
    .overflow-x-hidden { overflow-x: hidden; }
    .w-14 { width: 3.5rem; }
    .h-14 { height: 3.5rem; }
    .my-auto { margin-top: auto; margin-bottom: auto; }
    .gap-0\.5 { gap: 0.125rem; }
    .p-3\.5 { padding: 0.875rem; }
    .px-0\.5 { padding-left: 0.125rem; padding-right: 0.125rem; }
    .pt-0\.5 { padding-top: 0.125rem; }
    .pb-0\.5 { padding-bottom: 0.125rem; }
    .pt-2\.5 { padding-top: 0.625rem; }
    .mb-2\.5 { margin-bottom: 0.625rem; }
    .space-y-2\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem; }
    .bg-amber-500\/20 { background-color: rgba(245, 158, 11, 0.2); }
    .bg-black\/30 { background-color: rgba(0, 0, 0, 0.3); }
    .bg-purple-950\/90 { background-color: rgba(59, 7, 100, 0.9); }
    .bg-sky-400 { background-color: #38bdf8; }
    .border-slate-500 { border-color: #64748b; }
    .text-amber-300\/90 { color: rgba(252, 211, 77, 0.9); }
    .text-white\/40 { color: rgba(255, 255, 255, 0.4); }
    .text-white\/80 { color: rgba(255, 255, 255, 0.8); }
    @media (min-width: 640px) {
      .sm\:text-lg { font-size: 1.125rem; line-height: 1.55rem; }
    }


    /* === V10 Multiplayer 5-Zone & Directional Combat VFX CSS === */
    @keyframes activeTurnPulse {
      0%, 100% {
        box-shadow: 0 0 0 2px #fbbf24, 0 0 16px rgba(245, 158, 11, 0.75), inset 0 0 10px rgba(245, 158, 11, 0.25);
        border-color: #fbbf24 !important;
      }
      50% {
        box-shadow: 0 0 0 3px #fde047, 0 0 26px rgba(251, 191, 36, 0.95), inset 0 0 16px rgba(251, 191, 36, 0.4);
        border-color: #fde047 !important;
      }
    }
    .active-turn-seat {
      animation: activeTurnPulse 1.6s infinite ease-in-out;
      transform: translateY(-2px);
      z-index: 25;
    }
    .recon-viewed-seat {
      box-shadow: 0 0 0 2px #38bdf8, 0 0 14px rgba(56, 189, 248, 0.7);
      border-color: #38bdf8 !important;
    }
    @keyframes beamDashFlow {
      to { stroke-dashoffset: -28; }
    }
    .vfx-laser-path {
      stroke-dasharray: 9 5;
      animation: beamDashFlow 0.35s linear infinite;
    }
    @keyframes turnBannerSlide {
      0% { transform: scale(0.84) translateY(12px); opacity: 0; }
      12% { transform: scale(1.03) translateY(0); opacity: 1; }
      86% { transform: scale(1) translateY(0); opacity: 1; }
      100% { transform: scale(0.95) translateY(-8px); opacity: 0; }
    }
    @keyframes turnBackdropFade {
      0% { opacity: 0; }
      12% { opacity: 1; }
      86% { opacity: 1; }
      100% { opacity: 0; }
    }
    .vfx-turn-handover-backdrop {
      position: fixed;
      inset: 0;
      z-index: 9996;
      pointer-events: none !important;
      background: rgba(4, 6, 16, 0.72);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      animation: turnBackdropFade var(--turn-banner-dur, 2.3s) ease-in-out forwards;
    }
    .vfx-turn-handover {
      width: 96%;
      max-width: 376px;
      border-radius: 1.35rem;
      padding: 1.35rem 1.15rem;
      text-align: center;
      background: linear-gradient(145deg, rgba(15, 23, 42, 0.99) 0%, rgba(36, 22, 78, 0.99) 55%, rgba(12, 16, 36, 0.99) 100%);
      box-shadow: 0 25px 60px rgba(0,0,0,0.96), 0 0 42px rgba(251, 191, 36, 0.65), inset 0 0 24px rgba(251, 191, 36, 0.18);
      animation: turnBannerSlide var(--turn-banner-dur, 2.3s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes duelBannerHold {
      0% { transform: translate(-50%, -14px) scale(0.88); opacity: 0; }
      10% { transform: translate(-50%, 0) scale(1.02); opacity: 1; }
      88% { transform: translate(-50%, 0) scale(1); opacity: 1; }
      100% { transform: translate(-50%, -10px) scale(0.95); opacity: 0; }
    }
    .vfx-vs-duel-banner {
      position: fixed;
      top: 18%;
      left: 50%;
      z-index: 9995;
      pointer-events: none !important;
      width: 94%;
      max-width: 368px;
      border-radius: 0.85rem;
      padding: 0.45rem 0.65rem;
      background: linear-gradient(135deg, rgba(12, 18, 36, 0.97) 0%, rgba(76, 11, 26, 0.97) 50%, rgba(12, 18, 36, 0.97) 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow: 0 14px 32px rgba(0,0,0,0.92), 0 0 20px rgba(244, 63, 94, 0.65);
      animation: duelBannerHold var(--duel-banner-dur, 1.85s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .vfx-endpoint-tag {
      position: fixed;
      z-index: 9994;
      pointer-events: none !important;
      transform: translate(-50%, -50%);
      padding: 0.12rem 0.45rem;
      border-radius: 9999px;
      font-size: 10px;
      font-weight: 900;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0,0,0,0.88);
    }
    .opacity-75 { opacity: 0.75; }
    .opacity-85 { opacity: 0.85; }


    /* === V11 Frosted-Glass Tactical Overlay & Visual Portrait Target Cards === */
    .mode-d-overlay-backdrop {
      position: absolute;
      inset: 0;
      z-index: 40;
      background: rgba(6, 9, 20, 0.74);
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0.35rem;
      border-radius: 1rem;
      animation: fadeInOverlay 0.16s ease-out;
    }
    @keyframes fadeInOverlay {
      from { opacity: 0; transform: scale(0.97); }
      to { opacity: 1; transform: scale(1); }
    }
    .mode-d-sheet-card {
      width: 100%;
      max-height: 100%;
      overflow-y: auto;
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.97) 0%, rgba(9, 13, 28, 0.99) 100%);
      border: 2px solid #38bdf8;
      border-radius: 0.9rem;
      padding: 0.5rem;
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.92), 0 0 22px rgba(56, 189, 248, 0.35);
    }
    .portrait-target-avatar {
      width: 42px;
      height: 42px;
      border-radius: 0.55rem;
      object-fit: cover;
      object-position: center 18%;
      border: 1.5px solid rgba(251, 191, 36, 0.85);
      box-shadow: 0 3px 8px rgba(0,0,0,0.75);
      flex-shrink: 0;
    }
    @keyframes targetableSeatPulse {
      0%, 100% {
        box-shadow: 0 0 0 2px #f43f5e, 0 0 16px rgba(244, 63, 94, 0.85);
        border-color: #fb7185 !important;
      }
      50% {
        box-shadow: 0 0 0 3px #fda4af, 0 0 24px rgba(244, 63, 94, 1);
        border-color: #ffffff !important;
      }
    }
    .targetable-seat-glow {
      animation: targetableSeatPulse 1.1s infinite ease-in-out;
    }

    /* Typography */
    .text-\[10px\] { font-size: 10px; line-height: 1.2; }
    .text-\[11px\] { font-size: 11px; line-height: 1.25; }
    .text-xs { font-size: 0.75rem; line-height: 1.1rem; }
    .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .text-base { font-size: 1rem; line-height: 1.4rem; }
    .text-lg { font-size: 1.125rem; line-height: 1.55rem; }
    .text-xl { font-size: 1.25rem; line-height: 1.7rem; }
    .text-2xl { font-size: 1.5rem; line-height: 1.9rem; }
    .text-3xl { font-size: 1.875rem; line-height: 2.2rem; }
    .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .text-5xl { font-size: 3rem; line-height: 1; }

    .font-semibold { font-weight: 600; }
    .font-bold { font-weight: 700; }
    .font-extrabold { font-weight: 800; }
    .font-black { font-weight: 900; }
    .leading-none { line-height: 1; }
    .leading-tight { line-height: 1.22; }
    .text-left { text-align: left; }
    .text-center { text-align: center; }
    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .whitespace-nowrap { white-space: nowrap; }
    .list-disc { list-style-type: disc; }

    .overflow-hidden { overflow: hidden; }
    .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .overflow-y-auto { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .snap-x { scroll-snap-type: x mandatory; }
    .snap-start { scroll-snap-align: start; }
    .cursor-pointer { cursor: pointer; }
    .opacity-40 { opacity: 0.4; }
    .opacity-50 { opacity: 0.5; }
    .opacity-60 { opacity: 0.6; }
    .transition { transition: all 0.18s ease; }

    /* Colors */
    .bg-black\/85 { background-color: rgba(0, 0, 0, 0.85); }
    .bg-slate-800 { background-color: #1e293b; }
    .bg-slate-900 { background-color: #0f172a; }
    .bg-slate-900\/75 { background-color: rgba(15, 23, 42, 0.75); }
    .bg-slate-900\/90 { background-color: rgba(15, 23, 42, 0.9); }
    .bg-slate-950 { background-color: #020617; }
    .bg-slate-950\/80 { background-color: rgba(2, 6, 23, 0.8); }
    .bg-slate-950\/90 { background-color: rgba(2, 6, 23, 0.9); }
    .bg-slate-950\/95 { background-color: rgba(2, 6, 23, 0.95); }

    .bg-red-700 { background-color: #b91c1c; }
    .bg-red-900 { background-color: #7f1d1d; }
    .bg-red-950 { background-color: #450a0a; }
    .bg-red-950\/60 { background-color: rgba(69, 10, 10, 0.6); }
    .bg-rose-600 { background-color: #e11d48; }
    .bg-rose-700 { background-color: #be123c; }
    .bg-rose-950 { background-color: #4c0519; }
    .bg-rose-950\/70 { background-color: rgba(76, 5, 25, 0.7); }
    .bg-rose-950\/90 { background-color: rgba(76, 5, 25, 0.9); }

    .bg-amber-400 { background-color: #fbbf24; }
    .bg-amber-500 { background-color: #f59e0b; }
    .bg-amber-600 { background-color: #d97706; }
    .bg-amber-900 { background-color: #78350f; }
    .bg-amber-950\/60 { background-color: rgba(69, 26, 3, 0.6); }
    .bg-amber-950\/80 { background-color: rgba(69, 26, 3, 0.8); }
    .bg-orange-600 { background-color: #ea580c; }
    .bg-orange-950\/80 { background-color: rgba(67, 20, 7, 0.8); }

    .bg-emerald-400 { background-color: #34d399; }
    .bg-emerald-600 { background-color: #059669; }
    .bg-emerald-700 { background-color: #047857; }
    .bg-emerald-900 { background-color: #064e3b; }
    .bg-emerald-950\/60 { background-color: rgba(2, 44, 34, 0.6); }
    .bg-emerald-950\/80 { background-color: rgba(2, 44, 34, 0.8); }

    .bg-blue-700 { background-color: #1d4ed8; }
    .bg-blue-900 { background-color: #1e3a8a; }
    .bg-blue-950\/60 { background-color: rgba(23, 37, 84, 0.6); }
    .bg-sky-500 { background-color: #0ea5e9; }
    .bg-sky-600 { background-color: #0284c7; }
    .bg-indigo-600 { background-color: #4f46e5; }
    .bg-indigo-900\/80 { background-color: rgba(49, 46, 129, 0.8); }
    .bg-indigo-950\/90 { background-color: rgba(30, 27, 75, 0.9); }

    .bg-purple-600 { background-color: #9333ea; }
    .bg-purple-800 { background-color: #6b21a8; }
    .bg-purple-950 { background-color: #3b0764; }
    .bg-purple-950\/80 { background-color: rgba(59, 7, 100, 0.8); }

    /* Text Colors */
    .text-white { color: #ffffff; }
    .text-slate-200 { color: #e2e8f0; }
    .text-slate-300 { color: #cbd5e1; }
    .text-slate-400 { color: #94a3b8; }
    .text-slate-500 { color: #64748b; }
    .text-slate-950 { color: #020617; }
    .text-red-200 { color: #fecaca; }
    .text-red-300 { color: #fca5a5; }
    .text-rose-200 { color: #fecdd3; }
    .text-rose-300 { color: #fda4af; }
    .text-rose-400 { color: #fb7185; }
    .text-amber-200 { color: #fde68a; }
    .text-amber-300 { color: #fcd34d; }
    .text-amber-400 { color: #fbbf24; }
    .text-emerald-200 { color: #a7f3d0; }
    .text-emerald-300 { color: #6ee7b7; }
    .text-emerald-400 { color: #34d399; }
    .text-blue-300 { color: #93c5fd; }
    .text-sky-300 { color: #7dd3fc; }
    .text-indigo-100 { color: #e0e7ff; }
    .text-indigo-200 { color: #c7d2fe; }
    .text-indigo-300 { color: #a5b4fc; }
    .text-purple-200 { color: #e9d5ff; }
    .text-purple-300 { color: #d8b4fe; }

    /* Border Colors */
    .border-white { border-color: #ffffff; }
    .border-slate-600 { border-color: #475569; }
    .border-slate-700 { border-color: #334155; }
    .border-slate-800 { border-color: #1e293b; }
    .border-red-500 { border-color: #ef4444; }
    .border-red-500\/40 { border-color: rgba(239, 68, 68, 0.4); }
    .border-rose-400 { border-color: #fb7185; }
    .border-rose-500\/50 { border-color: rgba(244, 63, 94, 0.5); }
    .border-amber-300 { border-color: #fcd34d; }
    .border-amber-400 { border-color: #fbbf24; }
    .border-amber-500\/40 { border-color: rgba(245, 158, 11, 0.4); }
    .border-amber-500\/60 { border-color: rgba(245, 158, 11, 0.6); }
    .border-orange-400 { border-color: #fb923c; }
    .border-emerald-400 { border-color: #34d399; }
    .border-emerald-500\/40 { border-color: rgba(16, 185, 129, 0.4); }
    .border-blue-400 { border-color: #60a5fa; }
    .border-sky-400 { border-color: #38bdf8; }
    .border-sky-500\/50 { border-color: rgba(14, 165, 233, 0.5); }
    .border-indigo-400 { border-color: #818cf8; }
    .border-indigo-500\/50 { border-color: rgba(99, 102, 241, 0.5); }
    .border-purple-400 { border-color: #c084fc; }
    .border-purple-500\/50 { border-color: rgba(168, 85, 247, 0.5); }

    .shadow { box-shadow: 0 2px 5px rgba(0,0,0,0.45); }
    .shadow-lg { box-shadow: 0 8px 16px rgba(0,0,0,0.55); }
    .shadow-xl { box-shadow: 0 12px 24px rgba(0,0,0,0.68); }
    .shadow-2xl { box-shadow: 0 18px 38px rgba(0,0,0,0.85); }
    .ring-4.ring-rose-500 { box-shadow: 0 0 0 3px #f43f5e; }
    .backdrop-blur-sm { backdrop-filter: blur(4px); }
    .backdrop-blur-md { backdrop-filter: blur(8px); }

    /* Custom Visual Effects */
    @keyframes vpShimmer {
      0% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.55), inset 0 0 6px rgba(192, 132, 252, 0.45); border-color: #fbbf24; }
      50% { box-shadow: 0 0 16px rgba(192, 132, 252, 0.9), inset 0 0 10px rgba(245, 158, 11, 0.7); border-color: #e879f9; }
      100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.55), inset 0 0 6px rgba(192, 132, 252, 0.45); border-color: #fbbf24; }
    }
    .vp-card-frame { box-shadow: 0 0 12px rgba(245, 158, 11, 0.65), inset 0 0 8px rgba(192, 132, 252, 0.5); border-color: #fbbf24; }

    @keyframes pulseDanger {
      0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.65); }
      50% { box-shadow: 0 0 14px 2px rgba(244, 63, 94, 0.9); }
    }
    .danger-pulse { animation: pulseDanger 1.5s infinite; }

    .stage-25d-container {
      background:
        radial-gradient(ellipse at 50% 20%, rgba(139, 92, 246, 0.14) 0%, rgba(13, 10, 26, 0.95) 75%),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 2px, transparent 2px, transparent 14px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75), inset 0 0 24px rgba(168, 85, 247, 0.12);
    }

    .hand-card {
      transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease, opacity 0.18s ease;
    }
    .hand-card.selected-card {
      transform: translateY(-8px) scale(1.03);
      z-index: 35 !important;
      box-shadow: 0 0 20px rgba(56, 189, 248, 0.95), 0 10px 20px rgba(0,0,0,0.95);
      border-color: #38bdf8 !important;
    }
    .hand-card.unplayable-card {
      opacity: 0.6;
      filter: grayscale(35%);
    }

    .mode-d-drawer {
      background: linear-gradient(180deg, rgba(12, 25, 56, 0.98) 0%, rgba(7, 12, 28, 0.99) 100%);
      box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.85), 0 0 20px rgba(14, 165, 233, 0.35);
    }

    /* Responsive Breakpoints: Mobile Portrait Default -> Desktop Expansion */
    @media (min-width: 640px) {
      .sm\:w-40 { width: 10rem; }
      .sm\:h-44 { height: 11rem; }
      .sm\:w-\[210px\] { width: 210px; }
      .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .sm\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
      .sm\:text-base { font-size: 1rem; line-height: 1.45rem; }
    }
    @media (min-width: 1024px) {
      .lg\:flex-1 { flex: 1 1 0%; }
      .lg\:w-auto { width: auto; }
      .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
      .lg\:flex-row { flex-direction: row; }
    }

    ::-webkit-scrollbar { width: 4px; height: 5px; }
    ::-webkit-scrollbar-track { background: rgba(15, 12, 28, 0.5); }
    ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.55); border-radius: 3px; }

    /* === V13 Online Multiplayer Lobby, Room Code & Perspective Styles === */
    .mp-mode-tab-active {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      color: #090712;
      border-color: #fde68a;
      box-shadow: 0 0 14px rgba(245, 158, 11, 0.45);
    }
    .mp-room-code-box {
      font-family: 'Courier New', monospace;
      letter-spacing: 0.2em;
      background: radial-gradient(circle at 50% 50%, rgba(88, 28, 135, 0.65) 0%, rgba(9, 7, 18, 0.98) 100%);
      border: 2px solid #f59e0b;
      box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), inset 0 0 12px rgba(192, 132, 252, 0.25);
    }
    @keyframes onlinePulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.45; transform: scale(1.18); }
    }
    .online-dot-pulse {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 9999px;
      background-color: #34d399;
      box-shadow: 0 0 8px #34d399;
      animation: onlinePulse 1.8s infinite ease-in-out;
    }
    .seat-card-human {
      background: linear-gradient(135deg, rgba(6, 78, 59, 0.55) 0%, rgba(15, 23, 42, 0.95) 100%);
      border: 1.5px solid #34d399;
    }
    .seat-card-ai {
      background: linear-gradient(135deg, rgba(49, 46, 129, 0.45) 0%, rgba(15, 23, 42, 0.95) 100%);
      border: 1.5px solid #818cf8;
    }
    .seat-card-waiting {
      background: rgba(15, 23, 42, 0.85);
      border: 1.5px dashed #f59e0b;
    }
    .toast-notification {
      position: fixed;
      top: 52px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      padding: 0.5rem 1rem;
      border-radius: 0.75rem;
      background: rgba(15, 23, 42, 0.96);
      border: 2px solid #fbbf24;
      color: #fef3c7;
      font-size: 12px;
      font-weight: 900;
      box-shadow: 0 12px 28px rgba(0,0,0,0.85);
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    /* === V13.1 Mobile Portrait Ergonomic Spacing & Waiting Room Utilities === */
    .w-\[106px\] { width: 106px; }
    .w-\[148px\] { width: 148px; }
    .h-\[140px\] { height: 140px; }
    @media (min-width: 640px) {
      .sm\:w-\[142px\] { width: 142px; }
      .sm\:w-\[196px\] { width: 196px; }
      .sm\:h-\[184px\] { height: 184px; }
    }

    /* === V13.2 Compact Hand Cards, Tight Stage & Settings Menu Utilities === */
    .w-\[92px\] { width: 92px; }
    .w-\[152px\] { width: 152px; }
    .h-\[118px\] { height: 118px; }
    .w-3\.5 { width: 0.875rem; }
    .h-3\.5 { height: 0.875rem; }
    .max-w-sm { max-width: 24rem; }
    @media (min-width: 640px) {
      .sm\:inline-flex { display: inline-flex; }
      .sm\:w-\[128px\] { width: 128px; }
      .sm\:w-\[200px\] { width: 200px; }
      .sm\:h-\[164px\] { height: 164px; }
    }

    /* === V13.4 PWA Standalone Fullscreen, Enlarged Upper Arena & Compact Opponent Modal === */
    html, body {
      height: 100vh;
      height: 100dvh;
      max-height: 100vh;
      max-height: 100dvh;
      overflow: hidden;
    }
    .safe-area-body {
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .min-h-0 { min-height: 0px !important; }
    .h-full { height: 100% !important; }
    .items-baseline { align-items: baseline; }

    /* SCROLL MODE (V13.2 Comfortable Card Size): ~140-152px wide x 210-228px tall on mobile */
    .stage-track-scroll {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
    }
    .dept-card-scroll {
      height: clamp(192px, 26.5dvh, 226px) !important;
      width: auto !important;
      aspect-ratio: 2 / 3 !important;
      flex-shrink: 0;
      scroll-snap-align: start;
    }
    @media (min-width: 640px) {
      .dept-card-scroll {
        height: clamp(228px, 30dvh, 268px) !important;
      }
    }

    /* Enlarged Upper Zone 2: Vertical Portrait Mini-Cards in Public Talent Pool */
    .jobbank-portrait-card {
      height: 100%;
      min-height: 78px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0.35rem;
      border-radius: 0.75rem;
      overflow: hidden;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .jobbank-portrait-card:active {
      transform: scale(0.97);
    }
    .jobbank-portrait-art-wrap {
      flex: 1 1 0%;
      min-height: 34px;
      width: 100%;
      border-radius: 0.5rem;
      overflow: hidden;
      position: relative;
      background: #090712;
      border: 1px solid rgba(255, 255, 255, 0.18);
    }
    .jobbank-portrait-art-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 18%;
      display: block;
    }

    /* Opponent Detail Modal & Talent Pool Modal: Compact 2:3 Character Card Thumbnail */
    .opp-modal-card-wrap {
      width: 88px;
      max-width: 88px;
      aspect-ratio: 2 / 3;
      margin: 0 auto;
      flex-shrink: 0;
    }
    .bank-modal-card-wrap {
      width: 108px;
      max-width: 108px;
      aspect-ratio: 2 / 3;
      margin: 0 auto;
      flex-shrink: 0;
    }
    @media (min-width: 640px) {
      .opp-modal-card-wrap {
        width: 118px;
        max-width: 118px;
      }
      .bank-modal-card-wrap {
        width: 140px;
        max-width: 140px;
      }
    }

    .w-\[96px\] { width: 96px; }
    .h-\[128px\] { height: 128px; }
    .text-\[10px\] { font-size: 10px; line-height: 1.25; }
    .text-\[11px\] { font-size: 11px; line-height: 1.3; }
    .text-\[13px\] { font-size: 13px; line-height: 1.35; }

    /* === V13.5 Performance Containment & Anti-Flicker Rules === */
    .dept-card-scroll, .jobbank-portrait-card, .hand-card {
      contain: layout paint;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* === V13.6 Home Screen Card Fan + Pure 2:3 Card Thumbnails & Modals === */
    .home-screen-card {
      background: radial-gradient(circle at 50% 0%, rgba(88, 28, 135, 0.38) 0%, rgba(15, 23, 42, 0.98) 65%);
      box-shadow: 0 24px 55px rgba(0, 0, 0, 0.95), 0 0 32px rgba(245, 158, 11, 0.3);
    }
    .home-hero-fan-card {
      width: 62px;
      aspect-ratio: 2 / 3;
      border-radius: 0.55rem;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.85);
      flex-shrink: 0;
    }
    .home-hero-fan-left { transform: rotate(-8deg) translateY(4px); }
    .home-hero-fan-center { transform: scale(1.08) translateY(-2px); z-index: 5; }
    .home-hero-fan-right { transform: rotate(8deg) translateY(4px); }

    /* Public Talent Pool Pure 2:3 Card Thumbnail (No redundant header/footer text) */
    .jobbank-thumb-card {
      height: 100%;
      max-height: 132px;
      width: auto;
      max-width: 100%;
      aspect-ratio: 2 / 3;
      margin: 0 auto;
      padding: 0;
      border-radius: 0.65rem;
      overflow: hidden;
      position: relative;
      display: block;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.75);
      contain: layout paint;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transition: transform 0.14s ease;
    }
    .jobbank-thumb-card:active {
      transform: scale(0.96);
    }

    /* Pure 2:3 Character Card in Opponent Detail Modal & Talent Pool Modal */
    .modal-pure-card {
      width: 100%;
      max-width: 136px;
      aspect-ratio: 2 / 3;
      margin: 0 auto;
      display: block;
    }
    @media (min-width: 640px) {
      .modal-pure-card {
        max-width: 172px;
      }
      .jobbank-thumb-card {
        max-height: 156px;
      }
    }

    /* === V13.6.1 Modal Scroll & Viewport Height Fixes === */
    .max-h-\[85vh\] { max-height: 85vh !important; max-height: 85dvh !important; }
    .max-h-\[88vh\] { max-height: 88vh !important; max-height: 88dvh !important; }
    .max-h-\[90vh\] { max-height: 90vh !important; max-height: 90dvh !important; }
    .max-h-\[92vh\] { max-height: 92vh !important; max-height: 92dvh !important; }
    .max-h-\[94vh\] { max-height: 94vh !important; max-height: 94dvh !important; }
    .overflow-y-auto {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      overscroll-behavior: contain;
    }
    .touch-pan-y {
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    .pr-0\.5 { padding-right: 0.125rem; }
    .pt-2\.5 { padding-top: 0.625rem; }

    /* === V13.7 Classic Burn Rate Dynamic CSS 2:3 Card Architecture === */
    .burnrate-css-card {
      background:
        radial-gradient(circle at 50% 35%, rgba(30, 41, 59, 0.92) 0%, rgba(9, 13, 26, 0.99) 80%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, transparent 2px, transparent 10px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      position: relative;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.85), inset 0 0 16px rgba(255, 255, 255, 0.05);
    }
    .burnrate-skill-orb {
      width: 28px;
      height: 28px;
      border-radius: 9999px;
      background: radial-gradient(circle at 35% 30%, #1e293b 0%, #020617 100%);
      border: 2px solid #f8fafc;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 14px;
      line-height: 1;
      color: #ffffff;
    }
    .burnrate-skill-orb-vp {
      border-color: #fbbf24;
      color: #fde68a;
      box-shadow: 0 0 10px rgba(251, 191, 36, 0.65), 0 3px 8px rgba(0, 0, 0, 0.85);
    }
    .burnrate-emblem-circle {
      width: 52px;
      height: 52px;
      border-radius: 9999px;
      background: radial-gradient(circle at 50% 35%, rgba(51, 65, 85, 0.85) 0%, rgba(15, 23, 42, 0.98) 100%);
      border: 2px solid rgba(251, 191, 36, 0.65);
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.75), inset 0 0 10px rgba(251, 191, 36, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      line-height: 1;
    }
    .burnrate-thumb-orb {
      width: 18px;
      height: 18px;
      border-radius: 9999px;
      background: #020617;
      border: 1.5px solid #f8fafc;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 10px;
      line-height: 1;
      color: #ffffff;
    }
    .burnrate-thumb-emblem {
      width: 32px;
      height: 32px;
      border-radius: 9999px;
      background: rgba(15, 23, 42, 0.92);
      border: 1.5px solid rgba(251, 191, 36, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      line-height: 1;
    }

/* === V13.9 LANDSCAPE TABLETOP MODE (橫屏圓桌模式) === */
.ls-tabletop-bg {
  background: radial-gradient(ellipse at 50% 48%, #1c1610 0%, #0f0c08 62%, #070604 100%);
  color: #f8fafc;
}

body.theme-demon .ls-tabletop-bg {
  background: radial-gradient(ellipse at 50% 48%, #1e112a 0%, #0d0714 65%, #060309 100%);
}

/* Force 90-degree rotation when user manually enables Landscape Mode on a vertical phone */
body.force-landscape-rotate {
  position: fixed !important;
  top: 0 !important;
  left: var(--app-h, 100vw) !important;
  width: var(--app-w, 100dvh) !important;
  max-width: none !important;
  min-width: 0 !important;
  height: var(--app-h, 100dvw) !important;
  max-height: none !important;
  min-height: 0 !important;
  transform: rotate(90deg) !important;
  transform-origin: top left !important;
  overflow: hidden !important;
}

/* Ensure all modals and overlays respect rotated --app-w and --app-h */
body.is-landscape-active .max-h-\[85vh\] { max-height: calc(var(--app-h, 100dvh) * 0.85) !important; }
body.is-landscape-active .max-h-\[88vh\] { max-height: calc(var(--app-h, 100dvh) * 0.88) !important; }
body.is-landscape-active .max-h-\[90vh\] { max-height: calc(var(--app-h, 100dvh) * 0.90) !important; }
body.is-landscape-active .max-h-\[92vh\] { max-height: calc(var(--app-h, 100dvh) * 0.92) !important; }
body.is-landscape-active .max-h-\[94vh\] { max-height: calc(var(--app-h, 100dvh) * 0.94) !important; }

body.is-landscape-active .home-screen-card {
  max-width: min(calc(var(--app-w, 100vw) * 0.94), 760px) !important;
  max-height: calc(var(--app-h, 100vh) * 0.92) !important;
  padding: 0.75rem 1rem !important;
  overflow-y: auto !important;
}

body.is-landscape-active .ls-home-layout {
  display: grid !important;
  grid-template-columns: 1fr 1.15fr !important;
  gap: 0.85rem !important;
  align-items: center !important;
}
body.is-landscape-active .ls-home-layout > * + * {
  margin-top: 0 !important;
}

body.is-landscape-active .rules-modal-card {
  max-height: calc(var(--app-h, 100vh) * 0.90) !important;
  max-width: min(calc(var(--app-w, 100vw) * 0.92), 720px) !important;
}

body.is-landscape-active .mode-d-sheet-card {
  max-width: min(calc(var(--app-w, 100vw) * 0.94), 880px) !important;
  width: min(calc(var(--app-w, 100vw) * 0.94), 880px) !important;
  max-height: calc(var(--app-h, 100vh) * 0.90) !important;
}

.ls-row-top {
  height: 30%;
  min-height: 0;
  flex-shrink: 0;
}

.ls-row-mid {
  height: 30%;
  min-height: 0;
  flex-shrink: 0;
}

.ls-row-bot {
  height: 37%;
  min-height: 0;
  flex-shrink: 0;
}

.ls-pill-btn {
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  background: rgba(24, 20, 16, 0.92);
  border: 1px solid rgba(217, 179, 110, 0.38);
  color: #f3e8d2;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.ls-pill-btn:hover {
  border-color: #fbbf24;
  background: rgba(45, 35, 22, 0.95);
}
.ls-pill-btn-gold {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a;
  border-color: #fde68a;
}

.ls-seat-panel {
  background: rgba(18, 15, 11, 0.92);
  border: 1.5px solid rgba(217, 179, 110, 0.25);
  border-radius: 0.85rem;
  padding: 0.28rem 0.45rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
  transition: all 0.2s ease;
}
.ls-seat-panel.ls-seat-active {
  border-color: #f59e0b;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.28), inset 0 0 10px rgba(245, 158, 11, 0.08);
}

.ls-dept-card {
  height: 100%;
  aspect-ratio: 2 / 3;
  max-width: 100%;
  position: relative;
  border-radius: 0.48rem;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.65);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.ls-dept-card:hover {
  transform: translateY(-2px);
}
.ls-dept-card.ls-dept-target-glow {
  border: 2.5px solid #fde047 !important;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.85) !important;
}

.ls-orb-skill {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #090d16;
  border: 1.5px solid #cbd5e1;
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  box-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.ls-orb-salary {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #d97706;
  border: 1.5px solid #fef08a;
  color: #0f172a;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  box-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.ls-oval-felt {
  width: 100%;
  height: 100%;
  max-width: 520px;
  border-radius: 9999px;
  background: radial-gradient(ellipse at center, rgba(58, 45, 30, 0.88) 0%, rgba(26, 20, 14, 0.94) 68%, rgba(14, 11, 8, 0.98) 100%);
  border: 1.5px solid rgba(217, 179, 110, 0.34);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.85), 0 6px 20px rgba(0, 0, 0, 0.55);
  position: relative;
}

.ls-table-pile-card {
  height: 76%;
  aspect-ratio: 2 / 3;
  border-radius: 0.45rem;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.75);
}

/* Vertical 2:3 Poker-Style Action Hand Card for Landscape Mode */
.ls-hand-card {
  height: 96%;
  aspect-ratio: 2 / 3;
  flex-shrink: 0;
  border-radius: 0.55rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #f5efe6;
  border: 2px solid #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  position: relative;
  cursor: pointer;
}
.ls-hand-card:hover {
  transform: translateY(-3px);
}
.ls-hand-card.ls-hand-selected {
  transform: translateY(-6px);
  border-color: #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.75);
}
.ls-hand-card.ls-hand-discard-sel {
  transform: translateY(-5px);
  border-color: #f97316 !important;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.8);
}

/* Landscape Mode D 2-Column Command Sheet (Uses --app-w and --app-h so rotated portrait gets full 844px width!) */
body.is-landscape-active .mode-d-sheet-card {
  max-width: min(calc(var(--app-w, 100vw) * 0.94), 840px) !important;
  width: min(calc(var(--app-w, 100vw) * 0.94), 840px) !important;
  max-height: calc(var(--app-h, 100vh) * 0.92) !important;
  background: rgba(24, 20, 15, 0.98) !important;
  border: 2px solid rgba(245, 158, 11, 0.65) !important;
  border-radius: 1.1rem !important;
  padding: 0.55rem 0.8rem !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.92) !important;
  overflow-y: auto !important;
}

/* === V13.9.1 COMPLETE UTILITY COVERAGE FOR LANDSCAPE & MODALS === */
html.has-landscape-rotate {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  overflow: hidden !important;
}

.w-\[26\%\] { width: 26%; }
.w-\[29\%\] { width: 29%; }
.w-\[33\%\] { width: 33%; }
.w-\[39\%\] { width: 39%; }
.w-\[41\%\] { width: 41%; }
.w-\[61\%\] { width: 61%; }
.w-\[84px\] { width: 84px; }
.w-\[96px\] { width: 96px; }
.w-\[155px\] { width: 155px; }
.w-10 { width: 2.5rem; }
.w-11 { width: 2.75rem; }
.h-10 { height: 2.5rem; }
.h-11 { height: 2.75rem; }
.h-\[86px\] { height: 86px; }
.min-h-\[14px\] { min-height: 14px; }
.max-w-3xl { max-width: 48rem; }
.max-w-\[38px\] { max-width: 38px; }
.max-h-\[68vh\] { max-height: calc(var(--app-h, 100dvh) * 0.68); }

.aspect-\[2\/3\] { aspect-ratio: 2 / 3; }
.object-cover { object-fit: cover; }
.select-none { user-select: none; }
.uppercase { text-transform: uppercase; }
.leading-snug { line-height: 1.375; }
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inset-x-0 { left: 0; right: 0; }
.top-0 { top: 0; }
.top-0\.5 { top: 0.125rem; }
.top-1\.5 { top: 0.375rem; }
.bottom-0\.5 { bottom: 0.125rem; }
.bottom-1 { bottom: 0.25rem; }
.right-0\.5 { right: 0.125rem; }
.right-1\.5 { right: 0.375rem; }
.-bottom-1 { bottom: -0.25rem; }
.-right-1 { right: -0.25rem; }
.z-10 { z-index: 10; }

.items-end { align-items: flex-end; }
.justify-items-center { justify-items: center; }
.m-auto { margin: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mr-1 { margin-right: 0.25rem; }
.mt-2\.5 { margin-top: 0.625rem; }
.gap-5 { gap: 1.25rem; }
.p-0\.5 { padding: 0.125rem; }
.pl-2 { padding-left: 0.5rem; }
.pr-1 { padding-right: 0.25rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0\.2 { padding-top: 1px; padding-bottom: 1px; }

.border-l { border-left-width: 1px; }
.border-x { border-left-width: 1px; border-right-width: 1px; }
.opacity-45 { opacity: 0.45; }
.opacity-80 { opacity: 0.8; }
.drop-shadow { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.drop-shadow-md { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.75)); }
.drop-shadow-lg { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.85)); }

.text-\[7px\] { font-size: 7px; }
.text-\[8px\] { font-size: 8px; }
.text-slate-900 { color: #0f172a; }
.text-slate-600 { color: #475569; }
.text-slate-400\/80 { color: rgba(148, 163, 184, 0.8); }
.text-stone-100 { color: #f5f5f4; }
.text-stone-200 { color: #e7e5e4; }
.text-stone-300 { color: #d6d3d1; }
.text-stone-400 { color: #a8a29e; }
.text-stone-500 { color: #78716c; }
.text-amber-400\/80 { color: rgba(251, 191, 36, 0.85); }
.text-amber-300\/90 { color: rgba(252, 211, 77, 0.92); }
.text-sky-200 { color: #bae6fd; }
.text-emerald-100 { color: #d1fae5; }
.text-purple-100 { color: #f3e8ff; }

.bg-\[#f5efe6\] { background-color: #f5efe6; }
.bg-black\/45 { background-color: rgba(0, 0, 0, 0.45); }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.50); }
.bg-black\/90 { background-color: rgba(0, 0, 0, 0.90); }
.bg-stone-800 { background-color: #292524; }
.bg-stone-900\/50 { background-color: rgba(28, 25, 23, 0.50); }
.bg-stone-900\/70 { background-color: rgba(28, 25, 23, 0.70); }
.bg-stone-900\/75 { background-color: rgba(28, 25, 23, 0.75); }
.bg-stone-950 { background-color: #0c0a09; }
.bg-stone-950\/90 { background-color: rgba(12, 10, 9, 0.90); }
.bg-stone-950\/95 { background-color: rgba(12, 10, 9, 0.95); }
.bg-slate-900\/95 { background-color: rgba(15, 23, 42, 0.95); }
.bg-amber-950\/90 { background-color: rgba(69, 26, 3, 0.90); }
.bg-emerald-500 { background-color: #10b981; }
.bg-emerald-900\/90 { background-color: rgba(6, 78, 59, 0.90); }
.bg-emerald-950\/70 { background-color: rgba(2, 44, 34, 0.70); }
.bg-emerald-950\/75 { background-color: rgba(2, 44, 34, 0.75); }
.bg-emerald-950\/85 { background-color: rgba(2, 44, 34, 0.85); }
.bg-emerald-950\/90 { background-color: rgba(2, 44, 34, 0.90); }
.bg-indigo-900\/90 { background-color: rgba(49, 46, 129, 0.90); }
.bg-orange-600\/80 { background-color: rgba(234, 88, 12, 0.80); }
.bg-purple-500 { background-color: #a855f7; }
.bg-purple-900 { background-color: #581c87; }
.bg-purple-950\/75 { background-color: rgba(59, 7, 100, 0.75); }
.bg-purple-950\/85 { background-color: rgba(59, 7, 100, 0.85); }
.bg-red-950\/70 { background-color: rgba(69, 10, 10, 0.70); }
.bg-red-950\/75 { background-color: rgba(69, 10, 10, 0.75); }
.bg-red-950\/80 { background-color: rgba(69, 10, 10, 0.80); }
.bg-rose-500 { background-color: #f43f5e; }
.bg-rose-900\/90 { background-color: rgba(136, 19, 55, 0.90); }
.bg-rose-950\/75 { background-color: rgba(76, 5, 25, 0.75); }
.bg-rose-950\/85 { background-color: rgba(76, 5, 25, 0.85); }
.bg-rose-950\/95 { background-color: rgba(76, 5, 25, 0.95); }
.bg-sky-950\/60 { background-color: rgba(8, 47, 73, 0.60); }
.bg-rose-950\/60 { background-color: rgba(76, 5, 25, 0.60); }
.bg-amber-950\/60 { background-color: rgba(69, 26, 3, 0.60); }
.bg-emerald-950\/60 { background-color: rgba(2, 44, 34, 0.60); }

.border-amber-200 { border-color: #fde68a; }
.border-amber-400\/50 { border-color: rgba(251, 191, 36, 0.50); }
.border-amber-400\/60 { border-color: rgba(251, 191, 36, 0.60); }
.border-amber-400\/70 { border-color: rgba(251, 191, 36, 0.70); }
.border-amber-400\/80 { border-color: rgba(251, 191, 36, 0.80); }
.border-amber-500\/20 { border-color: rgba(245, 158, 11, 0.20); }
.border-amber-500\/30 { border-color: rgba(245, 158, 11, 0.30); }
.border-amber-500\/35 { border-color: rgba(245, 158, 11, 0.35); }
.border-amber-500\/45 { border-color: rgba(245, 158, 11, 0.45); }
.border-amber-500\/50 { border-color: rgba(245, 158, 11, 0.50); }
.border-blue-500\/40 { border-color: rgba(59, 130, 246, 0.40); }
.border-emerald-500\/45 { border-color: rgba(16, 185, 129, 0.45); }
.border-emerald-500\/50 { border-color: rgba(16, 185, 129, 0.50); }
.border-indigo-400\/60 { border-color: rgba(129, 140, 248, 0.60); }
.border-orange-300 { border-color: #fdba74; }
.border-purple-400\/60 { border-color: rgba(192, 132, 252, 0.60); }
.border-purple-500\/40 { border-color: rgba(168, 85, 247, 0.40); }
.border-red-500\/35 { border-color: rgba(239, 68, 68, 0.35); }
.border-red-500\/50 { border-color: rgba(239, 68, 68, 0.50); }
.border-rose-500\/40 { border-color: rgba(244, 63, 94, 0.40); }
.border-rose-500\/45 { border-color: rgba(244, 63, 94, 0.45); }
.border-rose-500\/60 { border-color: rgba(244, 63, 94, 0.60); }
.border-sky-400\/60 { border-color: rgba(56, 189, 248, 0.60); }
.border-sky-500\/40 { border-color: rgba(14, 165, 233, 0.40); }
.border-sky-500\/45 { border-color: rgba(14, 165, 233, 0.45); }
.border-stone-300 { border-color: #d6d3d1; }
.border-stone-600\/80 { border-color: rgba(87, 83, 78, 0.80); }
.border-stone-700 { border-color: #44403c; }
.border-stone-700\/80 { border-color: rgba(68, 64, 60, 0.80); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.20); }

.bg-gradient-to-b { background-image: linear-gradient(to bottom, #f59e0b, #d97706); }
.bg-gradient-to-r { background-image: linear-gradient(to right, #f59e0b, #d97706); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, #292524, #1c1917, #0c0a09); }

/* Dedicated Action Card Art Gradients for Landscape Hand & Table */
.ls-act-art-atk   { background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%); }
.ls-act-art-def   { background: linear-gradient(180deg, #e11d48 0%, #4c0519 100%); }
.ls-act-art-fin   { background: linear-gradient(180deg, #10b981 0%, #064e3b 100%); }
.ls-act-art-hire  { background: linear-gradient(180deg, #0284c7 0%, #0c4a6e 100%); }
.ls-act-art-fire  { background: linear-gradient(180deg, #475569 0%, #0f172a 100%); }
.ls-act-art-force { background: linear-gradient(180deg, #ea580c 0%, #431407 100%); }
.ls-act-art-poach { background: linear-gradient(180deg, #4f46e5 0%, #1e1b4b 100%); }
.ls-act-art-vp    { background: linear-gradient(180deg, #9333ea 0%, #2e1065 100%); }

@media (min-width: 640px) {
  .sm\:w-\[96px\] { width: 96px; }
  .sm\:w-\[175px\] { width: 175px; }
  .sm\:h-\[96px\] { height: 96px; }
  .sm\:gap-7 { gap: 1.75rem; }
  .sm\:p-2 { padding: 0.5rem; }
  .sm\:p-3 { padding: 0.75rem; }
  .sm\:p-3\.5 { padding: 0.875rem; }
  .sm\:p-4 { padding: 1rem; }
  .sm\:text-\[10px\] { font-size: 10px; }
  .sm\:text-\[11px\] { font-size: 11px; }
  .sm\:text-xs { font-size: 0.75rem; }
  .sm\:text-xl { font-size: 1.25rem; }
  .sm\:text-2xl { font-size: 1.5rem; }
}

.bg-ivory-card { background-color: #f5efe6 !important; }
.pointer-events-none { pointer-events: none; }
.hover\:-translate-y-0\.5:hover { transform: translateY(-2px); }
.hover\:bg-rose-600:hover { background-color: #e11d48; }
.hover\:border-amber-300:hover { border-color: #fcd34d; }
.group:hover .group-hover\:underline { text-decoration: underline; }

.ls-dept-row {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  overflow: hidden !important;
}

.ls-dept-card {
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 2 / 3 !important;
  width: auto !important;
  flex-shrink: 0 !important;
  position: relative !important;
  border-radius: 0.45rem !important;
  overflow: hidden !important;
  background: #0f172a;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.65);
  cursor: pointer;
}

.ls-dept-card > img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Compact hero cards fan on Home Screen when in Landscape Mode so 2-column Home Screen fits 100% without scrolling */
body.is-landscape-active .home-hero-fan-card {
  width: 44px !important;
  height: 66px !important;
}

/* === V13.9.2 FIXES: SEGMENTED PILLS, 6-CARD HAND STRIP & NON-OVERLAPPING MODE D COMPARISON === */
.seg-pill-btn {
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid rgba(100, 116, 139, 0.55);
  color: #cbd5e1;
  text-align: center;
  transition: all 0.14s ease;
}
.seg-pill-btn.seg-pill-active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35));
  border-color: #fbbf24 !important;
  color: #fde68a !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.28);
}

/* 6-Card Hand Strip in Landscape Mode: fits all 6 cards side-by-side, and centers 1-5 cards cleanly */
.ls-hand-strip {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  overflow: hidden !important;
}

.ls-hand-strip .ls-hand-card {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 82px !important;
  height: 96% !important;
  max-height: 96% !important;
}

/* Mode D Left Card Column & Width-Constrained 4-Department Opponent Comparison Grid */
.ls-moded-left-col {
  width: 106px !important;
}
@media (min-width: 640px) {
  .ls-moded-left-col {
    width: 118px !important;
  }
}
body.is-landscape-active .ls-moded-left-col {
  width: 112px !important;
}

.ls-comp-dept-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.ls-comp-dept-card {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  position: relative !important;
  border-radius: 0.35rem !important;
  overflow: hidden !important;
  background: #0f172a;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.65);
}

.ls-comp-dept-card > img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.ls-comp-dept-card.ls-dept-target-glow {
  border: 2px solid #fde047 !important;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.9) !important;
}

/* Force 4-column modal grids when Landscape Mode is active (even on rotated portrait phone) */
body.is-landscape-active .sm\:grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body.is-landscape-active .lg\:grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Action Card Header Background Colors (Fix white-on-white headers on Action Cards) */
.bg-amber-600   { background-color: #d97706 !important; }
.bg-amber-700   { background-color: #b45309 !important; }
.bg-rose-700    { background-color: #be123c !important; }
.bg-emerald-700 { background-color: #047857 !important; }
.bg-sky-700     { background-color: #0369a1 !important; }
.bg-slate-700   { background-color: #334155 !important; }
.bg-orange-700  { background-color: #c2410c !important; }
.bg-indigo-700  { background-color: #4338ca !important; }
.bg-purple-700  { background-color: #7e22ce !important; }
.bg-orange-900  { background-color: #7c2d12 !important; }

/* Landscape Modal Sizing & Card Height Constraints so no modal overflows 390px landscape height */
body.is-landscape-active #jobBankModal > div,
body.is-landscape-active #inspectorModal > div,
body.is-landscape-active #galleryModal > div,
body.is-landscape-active #logModal > div,
body.is-landscape-active #lobbyModal > div,
body.is-landscape-active #settingsMenuModal > div {
  max-width: min(calc(var(--app-w, 100vw) * 0.92), 780px) !important;
  max-height: calc(var(--app-h, 100vh) * 0.92) !important;
  overflow-y: auto !important;
  padding: 0.65rem 0.9rem !important;
}

body.is-landscape-active #jobBankModalGrid .modal-pure-card,
body.is-landscape-active #inspectorCardsGrid .modal-pure-card {
  max-width: 118px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ls-target-emp-card {
  height: clamp(82px, calc(var(--app-h, 390px) * 0.34), 124px) !important;
  aspect-ratio: 2 / 3 !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  border-radius: 0.45rem !important;
  overflow: hidden !important;
  background: #0f172a;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
}
.ls-target-emp-card > img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* === V14.0 FLUID RESPONSIVE CARD SIZING, STACKING & PHYSICAL CARD FLIGHT ENGINE === */
:root {
  --ls-dept-card-h: clamp(48px, calc(var(--app-h, 390px) * 0.162), 102px);
  --ls-pile-card-h: clamp(46px, calc(var(--app-h, 390px) * 0.150), 94px);
  --ls-hand-card-h: clamp(56px, calc(var(--app-h, 390px) * 0.192), 114px);
  --ls-modal-card-h: clamp(66px, calc(var(--app-h, 390px) * 0.228), 120px);
  --ls-moded-left-w: clamp(80px, calc(var(--app-w, 844px) * 0.108), 114px);
}

/* Override fixed 100% height on .ls-dept-card with fluid --ls-dept-card-h so cards are sleekly scaled to screen size */
.ls-dept-card {
  height: var(--ls-dept-card-h) !important;
  max-height: 100% !important;
  aspect-ratio: 2 / 3 !important;
  width: auto !important;
  flex-shrink: 0 !important;
  position: relative !important;
  border-radius: 0.38rem !important;
  overflow: hidden !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.72);
  transition: transform 0.14s ease, border-color 0.14s ease, opacity 0.18s ease;
}

.ls-table-pile-card {
  height: var(--ls-pile-card-h) !important;
  max-height: calc(100% - 14px) !important;
  aspect-ratio: 2 / 3 !important;
  width: auto !important;
  border-radius: 0.42rem !important;
  position: relative !important;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.8);
}

.ls-hand-strip .ls-hand-card {
  height: var(--ls-hand-card-h) !important;
  max-height: 96% !important;
  aspect-ratio: 2 / 3 !important;
  width: auto !important;
  max-width: calc((100% - 1.75rem) / 6) !important;
  flex: 0 1 auto !important;
}

.ls-target-emp-card {
  height: var(--ls-modal-card-h) !important;
  aspect-ratio: 2 / 3 !important;
  width: auto !important;
}

.ls-moded-left-col {
  width: var(--ls-moded-left-w) !important;
}

/* Department Vertical Card Stacking:
   Top Card (VP or highest-skill employee) on top, Subordinates stacked below exposing ONLY Salary (left) & Skill (right) */
.ls-dept-card.ls-dept-card-stacked {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #090d16 !important;
}

.ls-stack-head-wrap {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 10 !important;
  border-bottom: 1.5px solid rgba(251, 191, 36, 0.75);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
}

.ls-stack-head-wrap > img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

.ls-stack-subs-tray {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  background: #0f172a !important;
  z-index: 5 !important;
}

.ls-sub-peek-strip {
  width: 100% !important;
  height: 10px !important;
  padding: 0 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98)) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.35) !important;
  line-height: 1 !important;
}

.ls-sub-peek-sal {
  font-size: 7px !important;
  font-weight: 900 !important;
  color: #fda4af !important;
  letter-spacing: -0.02em;
}

.ls-sub-peek-skl {
  font-size: 7px !important;
  font-weight: 900 !important;
  color: #fde047 !important;
  letter-spacing: -0.02em;
}

/* Deferred Landing & Flying Card Clone Styles */
.ls-card-in-flight-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.ls-flying-card-clone {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 90 !important;
  will-change: transform, opacity;
}

.ls-fx-impact-ring {
  position: absolute !important;
  width: 18px !important;
  height: 18px !important;
  margin-left: -9px !important;
  margin-top: -9px !important;
  border-radius: 9999px !important;
  border: 2.5px solid #fbbf24;
  pointer-events: none !important;
  z-index: 85 !important;
  animation: lsImpactExpand 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes lsImpactExpand {
  0%   { transform: scale(0.4); opacity: 0.95; }
  100% { transform: scale(3.1); opacity: 0; }
}

/* Opening Ceremony Seat & Card Flip Animations */
.ls-seat-ceremony-hidden {
  opacity: 0 !important;
  transform: translateY(10px) scale(0.95) !important;
  pointer-events: none !important;
}

.ls-seat-ceremony-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.ls-card-flip-in {
  animation: lsCardFlip3D 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lsCardFlip3D {
  0%   { transform: perspective(400px) rotateY(90deg) scale(0.92); opacity: 0.4; }
  100% { transform: perspective(400px) rotateY(0deg) scale(1); opacity: 1; }
}

.ls-center-piles-reveal {
  animation: lsCenterPilesPop 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lsCenterPilesPop {
  0%   { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

/* === V14.0.1 LANDSCAPE FX LAYER, FLYING CARD TAG & TABLETOP RIBBON === */
.ls-fx-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 95 !important;
  overflow: hidden !important;
}

.ls-flying-card-tag {
  position: absolute !important;
  top: -15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(9, 13, 22, 0.96) !important;
  border: 1.5px solid #fbbf24 !important;
  border-radius: 9999px !important;
  padding: 1px 6px !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  color: #fef08a !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.85) !important;
  z-index: 98 !important;
}

.ls-table-ribbon {
  position: absolute !important;
  top: 26% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(12, 10, 9, 0.94) !important;
  border-radius: 9999px !important;
  padding: 3px 14px !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  color: #fde68a !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.88), 0 0 14px rgba(251, 191, 36, 0.35) !important;
  z-index: 92 !important;
  animation: lsRibbonPop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lsRibbonPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.88); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.ls-sub-peek-strip {
  height: 12px !important;
  padding: 0 3px !important;
}

.ls-sub-peek-sal,
.ls-sub-peek-skl {
  font-size: 8px !important;
}

/* === V14.1 HIGH SPACE UTILIZATION & CARD-HUGGING CONTAINERS === */
:root {
  --ls-dept-card-h: clamp(62px, calc(var(--app-h, 390px) * 0.205), 114px);
  --ls-my-dept-card-h: clamp(74px, calc(var(--app-h, 390px) * 0.246), 134px);
  --ls-pile-card-h: clamp(64px, calc(var(--app-h, 390px) * 0.208), 116px);
  --ls-hand-card-h: clamp(84px, calc(var(--app-h, 390px) * 0.292), 152px);
  --ls-modal-card-h: clamp(112px, calc(var(--app-h, 390px) * 0.445), 186px);
  --ls-comp-card-w: clamp(46px, calc(var(--app-w, 844px) * 0.062), 72px);
  --ls-moded-left-w: clamp(96px, calc(var(--app-w, 844px) * 0.132), 136px);
}

.ls-row-top {
  height: 29.5% !important;
}
.ls-row-mid {
  height: 31% !important;
}
.ls-row-bot {
  height: 36.5% !important;
}

/* Seat panels & Talent Pool tightly hug their 4 department cards instead of leaving wide empty black margins */
.ls-seat-panel {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 0.24rem 0.48rem !important;
}

.ls-dept-row {
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 0.35rem !important;
}

/* My Company 4 Department Cards are larger to fill the taller bottom row */
.ls-dept-card.ls-my-dept-card {
  height: var(--ls-my-dept-card-h) !important;
}

/* Stacked Department Cards: Preserve 100% of the Top Card's top & bottom numbers (object-fit: fill) + slightly taller stack */
.ls-dept-card.ls-dept-card-stacked {
  height: calc(var(--ls-dept-card-h) + 5px) !important;
}
.ls-dept-card.ls-my-dept-card.ls-dept-card-stacked {
  height: calc(var(--ls-my-dept-card-h) + 6px) !important;
}
.ls-stack-head-wrap > img {
  object-fit: fill !important;
}

/* Center Oval Table hugs the 3 card piles cleanly instead of stretching into a giant empty stadium */
.ls-oval-felt {
  width: fit-content !important;
  min-width: 228px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0.25rem 1.35rem !important;
}

/* Hand Cards: Larger height & width to fill the Bottom-Right Hand Dock */
.ls-hand-strip {
  gap: 0.38rem !important;
}
.ls-hand-strip .ls-hand-card {
  height: var(--ls-hand-card-h) !important;
  max-height: 98% !important;
  aspect-ratio: 2 / 3 !important;
  width: auto !important;
  max-width: calc((100% - 1.9rem) / 6) !important;
  flex: 0 1 auto !important;
}

/* Mode D Tactical Overlay in Landscape Mode: Auto-fit width around targets, 2x larger employee cards, zero black/green void */
body.is-landscape-active .mode-d-sheet-card {
  width: fit-content !important;
  min-width: 360px !important;
  max-width: min(calc(var(--app-w, 100vw) * 0.96), 880px) !important;
  max-height: calc(var(--app-h, 100vh) * 0.94) !important;
  padding: 0.6rem 0.9rem !important;
  margin: 0 auto !important;
}

.ls-target-emp-card {
  height: var(--ls-modal-card-h) !important;
  aspect-ratio: 2 / 3 !important;
  width: auto !important;
}

.ls-moded-emp-btn {
  width: calc(var(--ls-modal-card-h) * 0.667 + 14px) !important;
  flex-shrink: 0 !important;
}

.ls-moded-opp-card {
  width: fit-content !important;
}

.ls-moded-opp-card .ls-comp-dept-grid {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: fit-content !important;
}

.ls-moded-opp-card .ls-comp-dept-card {
  width: var(--ls-comp-card-w) !important;
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

/* === V14.1.1 COMPLETE FONT-SIZE UTILITIES, HAND CARD TYPOGRAPHY & NON-OVERLAPPING MODE D GRIDS === */
.text-\[6px\]    { font-size: 6px !important; }
.text-\[6\.5px\]  { font-size: 6.5px !important; }
.text-\[7\.5px\]  { font-size: 7.5px !important; }
.text-\[8\.5px\]  { font-size: 8.5px !important; }
.text-\[9\.5px\]  { font-size: 9.5px !important; }
.text-\[10\.5px\] { font-size: 10.5px !important; }
.w-\[74px\]      { width: 74px !important; }
.min-h-\[16px\]  { min-height: 16px !important; }
.min-h-\[20px\]  { min-height: 20px !important; }
.min-w-\[140px\] { min-width: 140px !important; }
.min-w-\[180px\] { min-width: 180px !important; }
.max-w-\[240px\] { max-width: 240px !important; }
.max-w-\[34px\]  { max-width: 34px !important; }
.w-fit           { width: fit-content !important; }
.grayscale-\[35\%\] { filter: grayscale(35%); }

@media (min-width: 640px) {
  .sm\:text-\[9\.5px\] { font-size: 9.5px !important; }
  .sm\:w-\[86px\]     { width: 86px !important; }
}

:root {
  --ls-dept-card-h: clamp(60px, calc(var(--app-h, 390px) * 0.202), 112px);
  --ls-my-dept-card-h: clamp(68px, calc(var(--app-h, 390px) * 0.228), 126px);
  --ls-pile-card-h: clamp(62px, calc(var(--app-h, 390px) * 0.205), 114px);
  --ls-hand-card-h: clamp(80px, calc(var(--app-h, 390px) * 0.278), 146px);
  --ls-modal-card-h: clamp(96px, calc(var(--app-h, 390px) * 0.365), 156px);
  --ls-moded-left-w: clamp(88px, calc(var(--app-w, 844px) * 0.118), 122px);
}

/* Hand Card Title & Skill Orbs: Crisp, proportional, never giant, never clipped */
.ls-hand-card-title {
  font-size: clamp(7.8px, calc(var(--ls-hand-card-h, 108px) * 0.080), 10px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  letter-spacing: -0.02em !important;
}

.ls-hand-req-pill {
  padding: 1px 4px !important;
  border-radius: 9999px !important;
  background: rgba(0, 0, 0, 0.68) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 96% !important;
}

.ls-hand-req-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.5px !important;
}

.ls-hand-req-prefix {
  font-size: 6.5px !important;
  font-weight: 900 !important;
  color: #fde68a !important;
  line-height: 1 !important;
  margin-right: 1px !important;
}

.ls-hand-req-orb {
  width: 11px !important;
  height: 11px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  color: #ffffff !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* My Company Stacked Card Height: Keep clean bottom clearance inside My Company box */
.ls-dept-card.ls-my-dept-card.ls-dept-card-stacked {
  height: calc(var(--ls-my-dept-card-h) + 2px) !important;
}

/* Mode D 2-Column Layout: Left Action Card Preview + Right Target Picker (100% Non-Overlapping!) */
body.is-landscape-active .mode-d-sheet-card {
  width: fit-content !important;
  min-width: 340px !important;
  max-width: min(calc(var(--app-w, 100vw) * 0.95), 850px) !important;
  max-height: calc(var(--app-h, 100vh) * 0.93) !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0 auto !important;
  overflow: hidden !important;
}

body.is-landscape-active .mode-d-sheet-card.ls-moded-sheet-wide {
  width: min(calc(var(--app-w, 100vw) * 0.95), 840px) !important;
}

.ls-moded-2col-layout {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.65rem !important;
  width: 100% !important;
  min-width: 0 !important;
}

.ls-moded-left-col {
  width: var(--ls-moded-left-w) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 20 !important;
}

.ls-moded-right-col {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 0.35rem !important;
  overflow: hidden !important;
}

/* Opponent Comparison Grid inside Mode D: Strict 3-Column / 2-Column Grid so cards NEVER overflow or overlap! */
.ls-moded-opp-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.45rem !important;
  width: 100% !important;
  min-width: 0 !important;
}

.ls-moded-opp-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.55rem !important;
  width: 100% !important;
  max-width: 480px !important;
  min-width: 0 !important;
}

.ls-moded-opp-grid-1 {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 260px !important;
  min-width: 0 !important;
}

.ls-moded-opp-card {
  width: 100% !important;
  min-width: 0 !important;
}

.ls-moded-opp-card .ls-comp-dept-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.ls-moded-opp-card .ls-comp-dept-card {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  min-width: 0 !important;
}

.ls-moded-opp-sub {
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  padding: 0 2px !important;
}

.ls-moded-opp-btn {
  width: 100% !important;
  padding: 4px 6px !important;
  border-radius: 0.45rem !important;
  font-size: 9.5px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* === V14.1.2 SAFE HORIZONTAL SCROLL TRACK & COLOR-CODED OPPONENT POACH GROUPS === */
/* Safe Horizontal Scroll Container: Centers when content is narrower than modal, starts at left=0 when wider so left edge is NEVER clipped! */
.ls-moded-scroll-row {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 4px 6px 4px !important;
  -webkit-overflow-scrolling: touch;
}

.ls-moded-scroll-track {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.55rem !important;
  width: max-content !important;
  margin: 0 auto !important;
}

/* Opponent Filter Pills Bar at Top of Poach Modal */
.ls-poach-filter-pill {
  padding: 0.22rem 0.6rem !important;
  border-radius: 9999px !important;
  background: rgba(28, 25, 23, 0.92) !important;
  border: 1.5px solid rgba(120, 113, 108, 0.55) !important;
  color: #e7e5e4 !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.14s ease !important;
}

.ls-poach-tab-all-active {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-color: #fef08a !important;
  color: #0f172a !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.45) !important;
}

.ls-poach-tab-rose {
  background: rgba(159, 18, 57, 0.92) !important;
  border-color: #fb7185 !important;
  color: #fff1f2 !important;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.45) !important;
}

.ls-poach-tab-purple {
  background: rgba(107, 33, 168, 0.92) !important;
  border-color: #c084fc !important;
  color: #faf5ff !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.45) !important;
}

.ls-poach-tab-sky {
  background: rgba(3, 105, 161, 0.92) !important;
  border-color: #38bdf8 !important;
  color: #f0f9ff !important;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.45) !important;
}

/* Color-Coded Opponent Group Trays inside Poach / VP Kick Modal */
.ls-poach-opp-group {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border-radius: 0.85rem !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.75) !important;
}

.ls-poach-group-rose {
  background: rgba(76, 5, 25, 0.45) !important;
  border: 2px solid #fb7185 !important;
}

.ls-poach-group-purple {
  background: rgba(59, 7, 100, 0.45) !important;
  border: 2px solid #c084fc !important;
}

.ls-poach-group-sky {
  background: rgba(8, 47, 73, 0.45) !important;
  border: 2px solid #38bdf8 !important;
}

.ls-poach-opp-header {
  padding: 0.22rem 0.6rem !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  white-space: nowrap !important;
}

.ls-poach-hdr-rose {
  background: linear-gradient(90deg, #be123c, #881337) !important;
  border-bottom: 1px solid rgba(251, 113, 133, 0.5) !important;
}

.ls-poach-hdr-purple {
  background: linear-gradient(90deg, #7e22ce, #581c87) !important;
  border-bottom: 1px solid rgba(192, 132, 252, 0.5) !important;
}

.ls-poach-hdr-sky {
  background: linear-gradient(90deg, #0284c7, #075985) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.5) !important;
}

.ls-poach-opp-cards {
  display: flex !important;
  align-items: stretch !important;
  gap: 0.4rem !important;
  padding: 0.35rem !important;
}

/* Slightly tune modal card height so Opponent Group Header + Card + Button fits 390px landscape height with zero vertical scroll */
:root {
  --ls-modal-card-h: clamp(86px, calc(var(--app-h, 390px) * 0.325), 142px);
}

/* === V14.1.3 INSPECTOR MODAL & JOB BANK MODAL LANDSCAPE CARD FIT (ZERO CLIPPING) === */
body.is-landscape-active #inspectorModal > div {
  max-width: min(calc(var(--app-w, 100vw) * 0.94), 820px) !important;
  max-height: calc(var(--app-h, 100vh) * 0.94) !important;
  padding: 0.55rem 0.85rem !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Convert #inspectorCardsGrid in Landscape Mode into a Safe Horizontal Scroll Row where every card fits 100% of its height with zero bottom or left clipping! */
body.is-landscape-active #inspectorCardsGrid {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.65rem !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 6px 8px 8px 8px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch;
}

/* Safe centering when few cards, safe left=0 start when many cards (never clips left edge!) */
body.is-landscape-active #inspectorCardsGrid > *:first-child {
  margin-left: auto !important;
}
body.is-landscape-active #inspectorCardsGrid > *:last-child {
  margin-right: auto !important;
}

/* Every card inside #inspectorCardsGrid scales to fit 100% vertically between header and footer */
body.is-landscape-active #inspectorCardsGrid > .ls-inspector-card-item,
body.is-landscape-active #inspectorCardsGrid > .modal-pure-card,
body.is-landscape-active #inspectorCardsGrid > div[data-emp-uid],
body.is-landscape-active #inspectorCardsGrid > div[data-card-uid] {
  height: clamp(124px, calc(var(--app-h, 390px) * 0.455), 188px) !important;
  aspect-ratio: 2 / 3 !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  position: relative !important;
}

body.is-landscape-active #inspectorCardsGrid .ls-inspector-card-item > div[data-emp-uid],
body.is-landscape-active #inspectorCardsGrid .ls-inspector-card-item > div[data-card-uid] {
  width: 100% !important;
  height: 100% !important;
}

body.is-landscape-active #inspectorCardsGrid .full-gpt-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  display: block !important;
}

body.is-landscape-active #inspectorModalFooter {
  margin-top: 0.35rem !important;
  padding-top: 0.4rem !important;
  flex-shrink: 0 !important;
}

/* Also ensure #jobBankModal (Talent Pool & Opponent Castle Inspector) fits cleanly in Landscape Mode */
body.is-landscape-active #jobBankModal > div {
  max-width: min(calc(var(--app-w, 100vw) * 0.94), 800px) !important;
  max-height: calc(var(--app-h, 100vh) * 0.94) !important;
  padding: 0.55rem 0.85rem !important;
}

body.is-landscape-active #jobBankModalGrid .modal-pure-card {
  height: clamp(114px, calc(var(--app-h, 390px) * 0.42), 176px) !important;
  aspect-ratio: 2 / 3 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
}

body.is-landscape-active #jobBankModalGrid .modal-pure-card > div[data-emp-uid] {
  width: 100% !important;
  height: 100% !important;
}