/* R58 — a finite Star Finale and constellation allocation, still inside 844:390. */

.star-finale-panel {
  display: none;
  opacity: 0;
  pointer-events: none;
}

/* The host may be Portrait while the game itself is letterboxed Landscape. */
@media (min-width: 680px) {
  .facility-panel[data-kind="new-game-plus"] { display: none !important; }

  .star-core-button {
    top: 91px;
    right: 112px;
    width: 82px;
    height: 96px;
    border: 0;
    border-radius: 44% 44% 48% 48%;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .star-core-button.is-installed {
    top: 114px;
    right: 142px;
    width: 50px;
    height: 58px;
    opacity: .9;
  }

  .star-core-glow {
    inset: 6%;
    background: radial-gradient(circle, rgba(255,246,155,.96), rgba(255,196,67,.26) 58%, transparent 74%);
    filter: blur(2px);
  }

  .star-finale-capsule {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(87,50,53,.28));
  }

  .star-core-gem { display: none; }

  .star-finale-label {
    position: absolute;
    z-index: 3;
    right: 70%;
    top: 4px;
    width: max-content;
    max-width: 122px;
    padding: 5px 10px;
    border: 1px solid rgba(245,188,61,.64);
    border-radius: 999px;
    background: rgba(255,251,231,.94);
    color: #725029;
    font-size: .56rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 5px 12px rgba(91,58,52,.16);
  }

  .star-core-button.is-charging .star-finale-capsule { filter: saturate(.7) opacity(.78) drop-shadow(0 6px 7px rgba(87,50,53,.2)); }
  .star-core-button.is-ready { animation: r58-finale-breathe 1.65s ease-in-out infinite; }

  .star-core-count {
    right: -3px;
    bottom: 4px;
    min-width: 30px;
    height: 22px;
    padding: 4px 6px;
    border: 2px solid #ffe794;
    background: #7459b6;
    font-size: .52rem;
    line-height: 11px;
  }

  .star-finale-panel {
    position: absolute;
    z-index: 52;
    top: 31px;
    bottom: 7px;
    left: 50%;
    width: min(520px, calc(100% - 92px));
    display: grid;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 7px) scale(.975);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.78,.24,1);
  }

  .is-star-preview-open .star-finale-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .star-map-book {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 13px 18px rgba(48,39,65,.34));
  }

  .star-finale-head {
    position: absolute;
    z-index: 2;
    top: 37px;
    left: 48px;
    right: 67px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff9d9;
    text-shadow: 0 2px 2px rgba(20,39,80,.5);
  }

  .star-finale-head strong { font-size: .78rem; letter-spacing: .05em; }
  .star-point-count {
    padding: 5px 9px;
    border: 1px solid rgba(255,218,98,.7);
    border-radius: 999px;
    background: rgba(22,65,126,.72);
    color: #ffe47c;
    font-size: .58rem;
    font-weight: 900;
  }

  .star-finale-close {
    position: absolute;
    z-index: 5;
    top: 28px;
    right: 27px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #fff7dc;
    color: #31598e;
    font: 900 1rem/1 system-ui, sans-serif;
    box-shadow: 0 4px 10px rgba(20,38,74,.28);
  }

  .star-goal-seals {
    position: absolute;
    z-index: 2;
    top: 66px;
    left: 49px;
    display: flex;
    gap: 6px;
  }

  .star-goal-seal {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 2px solid rgba(233,230,212,.7);
    border-radius: 50%;
    background: rgba(86,103,137,.86);
    color: #aeb6c9;
    font-size: .76rem;
    box-shadow: inset 0 2px rgba(255,255,255,.25);
  }

  .star-goal-seal.is-complete {
    border-color: #fff0a6;
    background: linear-gradient(145deg, #ffe982, #f2a836);
    color: #fffbdc;
    text-shadow: 0 1px #a36524;
    box-shadow: 0 0 12px rgba(255,211,81,.55), inset 0 2px rgba(255,255,255,.55);
  }

  .star-tree {
    position: absolute;
    z-index: 2;
    top: 105px;
    left: 43px;
    right: 41px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 7px;
  }

  .star-tree::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 10%;
    right: 10%;
    top: 34px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f5ba42, #ffe681 52%, rgba(255,224,112,.32));
    box-shadow: 0 0 9px rgba(255,213,83,.48);
  }

  .star-node {
    display: grid;
    min-width: 0;
    min-height: 92px;
    place-items: center;
    gap: 2px;
    padding: 2px;
    border: 0;
    background: transparent;
    color: #fff9df;
    font-family: inherit;
    text-shadow: 0 1px 2px rgba(10,34,76,.75);
  }

  .star-node-icon {
    position: relative;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 4px solid #d8a93e;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff4b1, #f5b446 62%, #d68136);
    color: #fffbe3;
    font-size: 1.25rem;
    font-weight: 950;
    box-shadow: 0 0 0 4px rgba(255,235,140,.15), 0 7px 13px rgba(10,31,72,.34), inset 0 3px rgba(255,255,255,.56);
  }

  .star-node strong { font-size: .57rem; line-height: 1.1; }
  .star-node small { color: #ffe274; font-size: .5rem; font-weight: 900; }
  .star-node:not(:disabled):hover .star-node-icon,
  .star-node:not(:disabled):focus-visible .star-node-icon { transform: translateY(-2px) scale(1.04); }
  .star-node.is-selected .star-node-icon { background: linear-gradient(145deg, #fff9c9, #73d8c0 58%, #4aa5a5); box-shadow: 0 0 18px rgba(255,229,112,.8), 0 7px 13px rgba(10,31,72,.34); }
  .star-node.is-committed .star-node-icon::after { content: "✓"; position: absolute; }
  .star-node.is-locked { opacity: .48; filter: grayscale(.5); }
  .star-node:disabled { cursor: not-allowed; }

  .star-finale-foot {
    position: absolute;
    z-index: 3;
    left: 48px;
    right: 42px;
    bottom: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .star-finale-requirement {
    max-width: 245px;
    color: #d9eaff;
    font-size: .53rem;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 1px 2px #15366b;
  }

  .star-finale-action {
    min-width: 142px;
    min-height: 45px;
    padding: 8px 16px;
    border: 3px solid #53bbaa;
    border-radius: 16px;
    background: linear-gradient(145deg, #ffbe87, #ff7e6d);
    color: #fff;
    font: 900 .72rem/1 inherit;
    box-shadow: 0 6px 0 #2a8b81, 0 10px 18px rgba(16,35,71,.32), inset 0 2px rgba(255,255,255,.45);
  }

  .star-finale-action:disabled {
    border-color: #6b7f9c;
    background: #72829d;
    color: #cfd7e5;
    box-shadow: 0 4px 0 #4f5d76;
  }

  @keyframes r58-finale-breathe {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.045); }
  }
}

@media (min-width: 680px) and (max-height: 380px) {
  .star-core-button { top: 79px; right: 108px; width: 74px; height: 86px; }
  .star-finale-panel { top: 29px; bottom: 4px; width: min(486px, calc(100% - 84px)); }
  .star-finale-head { top: 33px; left: 45px; right: 63px; }
  .star-finale-close { top: 24px; right: 25px; }
  .star-goal-seals { top: 59px; left: 46px; }
  .star-tree { top: 95px; left: 40px; right: 39px; }
  .star-node { min-height: 84px; }
  .star-node-icon { width: 48px; height: 48px; font-size: 1.08rem; }
  .star-finale-foot { left: 45px; right: 39px; bottom: 30px; }
  .star-finale-action { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .star-core-button.is-ready,
  .star-finale-panel { animation: none !important; transition-duration: 1ms !important; }
}