* { box-sizing: border-box; }
    body {
      margin: 0;
      background: #000;
      color: white;
      font-family: Arial, sans-serif;
      background-image:
        radial-gradient(circle at 7% 11%, #fff 0 1px, transparent 1.4px),
        radial-gradient(circle at 19% 33%, #fff 0 1.5px, transparent 1.8px),
        radial-gradient(circle at 31% 7%, #fff 0 1px, transparent 1.3px),
        radial-gradient(circle at 43% 26%, #fff 0 1px, transparent 1.4px),
        radial-gradient(circle at 57% 13%, #fff 0 1.4px, transparent 1.8px),
        radial-gradient(circle at 69% 38%, #fff 0 1px, transparent 1.3px),
        radial-gradient(circle at 83% 18%, #fff 0 1.6px, transparent 2px),
        radial-gradient(circle at 94% 43%, #fff 0 1px, transparent 1.3px),
        radial-gradient(circle at 12% 74%, #fff 0 1px, transparent 1.4px),
        radial-gradient(circle at 26% 88%, #fff 0 1.5px, transparent 1.9px),
        radial-gradient(circle at 48% 69%, #fff 0 1px, transparent 1.3px),
        radial-gradient(circle at 63% 91%, #fff 0 1.4px, transparent 1.8px),
        radial-gradient(circle at 78% 67%, #fff 0 1px, transparent 1.3px),
        radial-gradient(circle at 91% 82%, #fff 0 1.5px, transparent 1.9px);
      background-size: 720px 520px, 960px 700px, 830px 610px, 1100px 760px, 920px 680px, 1280px 820px, 1050px 720px, 1360px 900px, 890px 650px, 1220px 830px, 980px 690px, 1300px 860px, 1130px 790px, 1450px 960px;
      background-attachment: fixed;
    }
    .page { width: min(1120px, 94%); margin: auto; padding: 35px 0 80px; }
    .title-box { text-align: center; margin-bottom: 45px; line-height: .9; }
    .starwars { color: #ffe81f; font-family: Impact, "Arial Black", sans-serif; font-size: clamp(64px,11vw,110px); letter-spacing: 4px; text-transform: uppercase; }
    .middle-text { color: #ffe81f; font-weight: 900; font-size: clamp(18px,3vw,30px); letter-spacing: 5px; text-transform: uppercase; margin: 15px 0; }
    h2 { text-align: center; color: #ffe81f; font-size: 44px; letter-spacing: 5px; margin: 65px 0 30px; }
    h3 { font-size: 28px; border-bottom: 2px solid #ffe81f; padding-bottom: 8px; margin: 42px 0 18px; }
    .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 18px; }
    .card { border: 2px solid #ffe81f; border-radius: 14px; overflow: hidden; background: #0a0a0a; color: white; padding: 0; cursor: pointer; text-align: center; }
    .card:hover { transform: translateY(-3px); box-shadow: 0 0 16px rgba(255,232,31,.35); }
    .card-image { width: 100%; height: 210px; object-fit: cover; display: block; background: #111; }
    .card-name { font-size: 19px; font-weight: 800; padding: 14px 8px 5px; }
    .tap { color: #ffe81f; padding: 0 0 14px; font-size: 13px; }
    .modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.84); z-index: 10; }
    .modal.show { display: flex; }
    .modal-box { width: min(700px,100%); background: #080808; border: 3px solid #ffe81f; border-radius: 18px; padding: 28px; position: relative; }
    .close { position: absolute; right: 14px; top: 10px; background: none; border: 0; color: #ffe81f; font-size: 36px; cursor: pointer; }
    #modalName { color: #ffe81f; font-size: 34px; margin: 0 45px 18px 0; }
    .label { color: #ffe81f; font-weight: 900; font-size: 20px; margin-top: 20px; }
    .modal-box p { font-size: 18px; line-height: 1.5; }
  
    .creator-box {
      margin-top: 70px;
      border: 3px solid #ffe81f;
      border-radius: 18px;
      padding: 26px;
      background: rgba(5,5,5,.92);
      box-shadow: 0 0 25px rgba(255,232,31,.18);
    }
    .creator-box h2 {
      margin-top: 0;
    }
    .creator-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
      gap: 16px;
    }
    .creator-field label {
      display: block;
      color: #ffe81f;
      font-weight: 800;
      margin-bottom: 7px;
    }
    .creator-field input,
    .creator-field select,
    .creator-field textarea {
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      border: 2px solid #444;
      background: #111;
      color: white;
      font-size: 16px;
    }
    .creator-field textarea {
      min-height: 120px;
      resize: vertical;
    }
    .creator-button {
      margin-top: 20px;
      width: 100%;
      padding: 16px;
      border: 0;
      border-radius: 12px;
      background: #ffe81f;
      color: #000;
      font-weight: 900;
      font-size: 20px;
      cursor: pointer;
      letter-spacing: 1px;
    }
    .creator-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 18px rgba(255,232,31,.4);
    }
    .created-character {
      display: none;
      margin-top: 26px;
      border: 2px solid #ffe81f;
      border-radius: 16px;
      padding: 22px;
      background: #0a0a0a;
    }
    .created-character.show {
      display: block;
    }
    .created-character h3 {
      margin-top: 0;
      color: #ffe81f;
      border-bottom: 1px solid #555;
    }
    .created-character p {
      font-size: 18px;
      line-height: 1.5;
    }


    .planet-box {
      margin-top: 70px;
      border: 3px solid #ffe81f;
      border-radius: 18px;
      padding: 26px;
      background: rgba(5,5,5,.92);
      box-shadow: 0 0 25px rgba(255,232,31,.18);
    }
    .planet-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
      gap: 16px;
    }
    .planet-field label {
      display: block;
      color: #ffe81f;
      font-weight: 800;
      margin-bottom: 7px;
    }
    .planet-field input,
    .planet-field select,
    .planet-field textarea {
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      border: 2px solid #444;
      background: #111;
      color: white;
      font-size: 16px;
    }
    .planet-field textarea {
      min-height: 100px;
      resize: vertical;
    }
    .planet-button {
      margin-top: 20px;
      width: 100%;
      padding: 16px;
      border: 0;
      border-radius: 12px;
      background: #ffe81f;
      color: #000;
      font-weight: 900;
      font-size: 20px;
      cursor: pointer;
      letter-spacing: 1px;
    }
    .planet-card {
      display: none;
      margin-top: 26px;
      border: 2px solid #ffe81f;
      border-radius: 16px;
      padding: 24px;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 25%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
        radial-gradient(circle at 35% 80%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
        #050505;
      text-align: center;
    }
    .planet-card.show { display: block; }
    .planet-orb-wrap {
      position: relative;
      width: 220px;
      height: 220px;
      margin: 10px auto 22px;
      display: grid;
      place-items: center;
    }
    .planet-orb {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: var(--planet-color, #3b82f6);
      box-shadow:
        inset -28px -18px 35px rgba(0,0,0,.45),
        inset 20px 16px 25px rgba(255,255,255,.18),
        0 0 30px rgba(255,255,255,.12);
      position: relative;
      z-index: 2;
    }
    .planet-ring {
      position: absolute;
      width: 220px;
      height: 72px;
      border: 8px solid rgba(255,232,31,.75);
      border-radius: 50%;
      transform: rotate(-18deg);
      z-index: 1;
      display: none;
    }
    .planet-ring.show { display: block; }
    .moon {
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #ddd;
      box-shadow: inset -4px -3px 4px rgba(0,0,0,.4);
      z-index: 3;
    }
    .moon1 { top: 10px; right: 28px; }
    .moon2 { bottom: 20px; left: 18px; }
    .moon3 { top: 72px; left: 0; }
    .moon4 { bottom: 2px; right: 52px; }
    .moon5 { top: 20px; left: 52px; }
    .planet-card h3 {
      color: #ffe81f;
      margin-top: 0;
      font-size: 30px;
    }
    .planet-card p {
      font-size: 18px;
      line-height: 1.5;
    }


    .droid-creator-box {
      margin-top: 70px;
      border: 3px solid #ffe81f;
      border-radius: 18px;
      padding: 26px;
      background: rgba(5,5,5,.92);
      box-shadow: 0 0 25px rgba(255,232,31,.18);
    }
    .droid-creator-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
      gap: 16px;
    }
    .droid-field label {
      display: block;
      color: #ffe81f;
      font-weight: 800;
      margin-bottom: 7px;
    }
    .droid-field input,
    .droid-field select {
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      border: 2px solid #444;
      background: #111;
      color: white;
      font-size: 16px;
    }
    .droid-create-button {
      margin-top: 20px;
      width: 100%;
      padding: 16px;
      border: 0;
      border-radius: 12px;
      background: #ffe81f;
      color: #000;
      font-weight: 900;
      font-size: 20px;
      cursor: pointer;
      letter-spacing: 1px;
    }
    .created-droid-card {
      display: none;
      margin-top: 26px;
      border: 2px solid #ffe81f;
      border-radius: 16px;
      padding: 24px;
      background: #090909;
      text-align: center;
    }
    .created-droid-card.show { display: block; }
    .droid-visual {
      width: 180px;
      height: 220px;
      margin: 10px auto 20px;
      position: relative;
    }
    .droid-head {
      width: 100px;
      height: 60px;
      border-radius: 28px 28px 12px 12px;
      background: var(--droid-color, #3b82f6);
      margin: 0 auto;
      position: relative;
      border: 3px solid #ddd;
    }
    .droid-eye {
      width: 18px;
      height: 18px;
      background: #ff3b30;
      border-radius: 50%;
      position: absolute;
      top: 19px;
      left: 41px;
      box-shadow: 0 0 10px #ff3b30;
    }
    .droid-body {
      width: 120px;
      height: 110px;
      margin: -2px auto 0;
      background: var(--droid-color, #3b82f6);
      border: 3px solid #ddd;
      border-radius: 18px;
      position: relative;
    }
    .droid-panel {
      width: 54px;
      height: 44px;
      border: 3px solid #222;
      background: #bbb;
      position: absolute;
      top: 26px;
      left: 30px;
      border-radius: 6px;
    }
    .droid-leg {
      width: 24px;
      height: 64px;
      background: #aaa;
      position: absolute;
      bottom: 0;
      border-radius: 8px;
    }
    .droid-leg.left { left: 42px; }
    .droid-leg.right { right: 42px; }
    .created-droid-card h3 {
      color: #ffe81f;
      font-size: 30px;
      margin-top: 0;
    }
    .created-droid-card p {
      font-size: 18px;
      line-height: 1.5;
    }


    .ship-creator-box {
      margin-top: 70px;
      border: 3px solid #ffe81f;
      border-radius: 18px;
      padding: 26px;
      background: rgba(5,5,5,.92);
      box-shadow: 0 0 25px rgba(255,232,31,.18);
    }
    .ship-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
      gap: 16px;
    }
    .ship-field label {
      display: block;
      color: #ffe81f;
      font-weight: 800;
      margin-bottom: 7px;
    }
    .ship-field input,
    .ship-field select,
    .ship-field textarea {
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      border: 2px solid #444;
      background: #111;
      color: white;
      font-size: 16px;
    }
    .ship-button {
      margin-top: 20px;
      width: 100%;
      padding: 16px;
      border: 0;
      border-radius: 12px;
      background: #ffe81f;
      color: #000;
      font-weight: 900;
      font-size: 20px;
      cursor: pointer;
      letter-spacing: 1px;
    }
    .ship-card {
      display: none;
      margin-top: 26px;
      border: 2px solid #ffe81f;
      border-radius: 16px;
      padding: 24px;
      background: #090909;
      text-align: center;
    }
    .ship-card.show { display: block; }
    .ship-visual {
      width: 320px;
      max-width: 90%;
      height: 190px;
      margin: 10px auto 20px;
      position: relative;
    }
    .ship-body {
      position: absolute;
      width: 210px;
      height: 70px;
      left: 55px;
      top: 62px;
      background: var(--ship-color, #6b7280);
      clip-path: polygon(0 50%, 25% 0, 78% 15%, 100% 50%, 78% 85%, 25% 100%);
      box-shadow: inset -25px -10px 25px rgba(0,0,0,.35);
    }
    .ship-wing {
      position: absolute;
      width: 100px;
      height: 30px;
      background: var(--ship-color, #6b7280);
      top: 82px;
    }
    .ship-wing.left { left: 0; transform: rotate(-12deg); }
    .ship-wing.right { right: 0; transform: rotate(12deg); }
    .ship-cockpit {
      position: absolute;
      width: 50px;
      height: 28px;
      border-radius: 50% 50% 30% 30%;
      left: 135px;
      top: 55px;
      background: #6dd5ff;
      border: 3px solid #222;
      z-index: 3;
    }
    .ship-engine {
      position: absolute;
      width: 38px;
      height: 14px;
      background: #66d9ff;
      top: 89px;
      border-radius: 10px;
      box-shadow: 0 0 18px #66d9ff;
    }
    .ship-engine.e1 { left: 44px; }
    .ship-engine.e2 { right: 44px; }
    .ship-card h3 {
      color: #ffe81f;
      font-size: 30px;
      margin-top: 0;
    }
    .ship-card p {
      font-size: 18px;
      line-height: 1.5;
    }


    .site-intro {
      max-width: 900px;
      margin: 70px auto 110px;
      text-align: center;
      font-size: 24px;
      line-height: 1.5;
      color: #ffe81f;
      padding: 0 20px;
    }


    .lightsaber-box {
      margin-top: 70px;
      border: 3px solid #ffe81f;
      border-radius: 18px;
      padding: 26px;
      background: rgba(5,5,5,.92);
      box-shadow: 0 0 25px rgba(255,232,31,.18);
    }
    .lightsaber-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
      gap: 16px;
    }
    .lightsaber-field label {
      display: block;
      color: #ffe81f;
      font-weight: 800;
      margin-bottom: 7px;
    }
    .lightsaber-field input,
    .lightsaber-field select {
      width: 100%;
      padding: 12px;
      border-radius: 10px;
      border: 2px solid #444;
      background: #111;
      color: white;
      font-size: 16px;
    }
    .lightsaber-button {
      margin-top: 20px;
      width: 100%;
      padding: 16px;
      border: 0;
      border-radius: 12px;
      background: #ffe81f;
      color: #000;
      font-weight: 900;
      font-size: 20px;
      cursor: pointer;
      letter-spacing: 1px;
    }
    .lightsaber-card {
      display: none;
      margin-top: 26px;
      border: 2px solid #ffe81f;
      border-radius: 16px;
      padding: 24px;
      background: #090909;
      text-align: center;
    }
    .lightsaber-card.show { display: block; }
    .lightsaber-visual {
      height: 290px;
      width: 120px;
      margin: 0 auto 20px;
      position: relative;
    }
    .saber-blade {
      position: absolute;
      width: 22px;
      height: 205px;
      left: 49px;
      top: 4px;
      border-radius: 12px 12px 3px 3px;
      background: var(--blade-color, #3b82f6);
      box-shadow:
        0 0 10px var(--blade-color, #3b82f6),
        0 0 24px var(--blade-color, #3b82f6),
        0 0 38px var(--blade-color, #3b82f6);
    }
    .saber-hilt {
      position: absolute;
      width: 48px;
      height: 82px;
      left: 36px;
      bottom: 0;
      border-radius: 7px;
      background: linear-gradient(90deg,#777,#ddd,#555);
      border: 3px solid #222;
    }
    .saber-switch {
      width: 18px;
      height: 10px;
      background: #c33;
      border-radius: 3px;
      margin: 20px auto 0;
    }
    .lightsaber-card h3 {
      color: #ffe81f;
      font-size: 30px;
      margin-top: 0;
    }
    .lightsaber-card p {
      font-size: 18px;
      line-height: 1.5;
    }
    .my-creations-box {
      margin-top: 80px;
      border: 4px solid #ffe81f;
      border-radius: 22px;
      padding: 30px;
      min-height: 320px;
      background: rgba(5,5,5,.95);
      box-shadow: 0 0 30px rgba(255,232,31,.22);
    }
    .my-creations-box h2 {
      margin-top: 0;
    }
    .creation-shelf {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
      gap: 16px;
      margin-top: 20px;
    }
    .creation-slot {
      border: 2px dashed #666;
      border-radius: 14px;
      min-height: 120px;
      padding: 18px;
      display: grid;
      place-items: center;
      text-align: center;
      color: #aaa;
      background: #0b0b0b;
    }
    .creation-slot.filled {
      border-style: solid;
      border-color: #ffe81f;
      color: white;
    }
    .creation-slot strong {
      color: #ffe81f;
      display: block;
      margin-bottom: 6px;
    }


    .small-the {
      color: #ffe81f;
      font-weight: 900;
      font-size: clamp(18px, 3vw, 28px);
      letter-spacing: 8px;
      margin-bottom: 10px;
    }
    .info-title {
      font-size: clamp(22px, 4vw, 40px);
      letter-spacing: 6px;
      margin-top: 16px;
      padding: 8px 18px;
      display: inline-block;
      border: 3px solid #ffe81f;
      border-radius: 14px;
      box-shadow: 0 0 18px rgba(255,232,31,.18);
    }
    
    .cw-logo {
      text-align:center;
      margin: 18px auto 55px;
      max-width: 1050px;
    }
    .cw-starwars {
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(30px, 5vw, 58px);
      letter-spacing: 7px;
      color: #ffe81f;
      text-shadow:
        2px 2px 0 #222,
        -2px -2px 0 #222,
        0 0 10px rgba(255,255,255,.16);
      margin-bottom: 2px;
    }
    .cw-main {
      display:inline-block;
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(34px, 6vw, 76px);
      line-height: .95;
      letter-spacing: 2px;
      color: #ffe81f;
      -webkit-text-stroke: 2px #303030;
      text-shadow:
        3px 3px 0 #111,
        -2px -2px 0 #111,
        0 0 8px rgba(255,255,255,.12);
      border-top: 5px solid #7d7d7d;
      border-bottom: 5px solid #7d7d7d;
      padding: 8px 16px 10px;
    }
    .cw-the, .cw-wars {
      font-size: .55em;
      vertical-align: middle;
      letter-spacing: 3px;
    }
    
.bad-heading {
  color: #ff3b30 !important;
  border-bottom-color: #ff3b30 !important;
}

.bad-grid .card {
  border-color: #ff3b30 !important;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.bad-grid .card:hover {
  box-shadow: 0 0 16px rgba(255,59,48,.35) !important;
}

.bad-grid .tap {
  color: #ff3b30 !important;
}

.bad-heading {
  color: #ff1f1f !important;
  text-shadow: 0 0 10px rgba(255,0,0,.8), 0 0 20px rgba(255,0,0,.45);
}

.bad-grid .card {
  border: 3px solid #ff1f1f !important;
  background: linear-gradient(180deg, rgba(90,0,0,.96), rgba(20,0,0,.98)) !important;
  box-shadow:
    0 0 12px rgba(255,0,0,.55),
    inset 0 0 18px rgba(255,0,0,.18) !important;
}

.bad-grid .card-name {
  color: #ff3b30 !important;
  text-shadow: 0 0 8px rgba(255,0,0,.75);
}

.bad-grid .tap {
  color: #ff8a80 !important;
}

.bad-grid .card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 18px rgba(255,0,0,.9),
    0 0 34px rgba(255,0,0,.45),
    inset 0 0 20px rgba(255,0,0,.22) !important;
}

.good-heading {
  color: #ffe81f !important;
  text-shadow: 0 0 10px rgba(255,232,31,.85), 0 0 20px rgba(255,232,31,.45);
}

.good-grid .card {
  border: 3px solid #ffe81f !important;
  background: linear-gradient(180deg, rgba(75,65,0,.96), rgba(20,18,0,.98)) !important;
  box-shadow:
    0 0 12px rgba(255,232,31,.55),
    inset 0 0 18px rgba(255,232,31,.16) !important;
}

.good-grid .card-name {
  color: #ffe81f !important;
  text-shadow: 0 0 8px rgba(255,232,31,.75);
}

.good-grid .tap {
  color: #fff29a !important;
}

.good-grid .card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 18px rgba(255,232,31,.9),
    0 0 34px rgba(255,232,31,.45),
    inset 0 0 20px rgba(255,232,31,.22) !important;
}

.card-image.image-failed {
  display:none !important;
}
.image-fallback {
  display:none;
  width:100%;
  aspect-ratio: 16 / 10;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:22px;
  font-weight:900;
  color:#ffe81f;
  background:linear-gradient(180deg,#1a1a1a,#050505);
  border-bottom:2px solid #ffe81f;
}
.image-fallback.show { display:flex; }

.rebel-heading {
  color: #ff9c1a !important;
  border-bottom-color: #ff9c1a !important;
  text-shadow: 0 0 10px rgba(255,156,26,.85), 0 0 20px rgba(255,156,26,.45);
}

.rebel-grid .card {
  border: 3px solid #ff9c1a !important;
  background: linear-gradient(180deg, rgba(95,45,0,.96), rgba(25,12,0,.98)) !important;
  box-shadow:
    0 0 12px rgba(255,156,26,.55),
    inset 0 0 18px rgba(255,156,26,.16) !important;
}

.rebel-grid .card-name {
  color: #ffb347 !important;
  text-shadow: 0 0 8px rgba(255,156,26,.75);
}

.rebel-grid .tap {
  color: #ffd19a !important;
}

.rebel-grid .card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 18px rgba(255,156,26,.9),
    0 0 34px rgba(255,156,26,.45),
    inset 0 0 20px rgba(255,156,26,.22) !important;
}

#infoModal.rebel-info .modal-box,
#infoModal.rebel-info .modal-box h2,
#infoModal.rebel-info .modal-box h3,
#infoModal.rebel-info .modal-box strong,
#infoModal.rebel-info .modal-box p,
#infoModal.rebel-info #modalName,
#infoModal.rebel-info #modalFact,
#infoModal.rebel-info #modalAbout {
  color: #ffb347 !important;
}

#infoModal.rebel-info .modal-box {
  border-color: #ff9c1a !important;
  background: linear-gradient(180deg, rgba(95,45,0,.98), rgba(25,12,0,.99)) !important;
  box-shadow:
    0 0 18px rgba(255,156,26,.85),
    0 0 36px rgba(255,156,26,.35),
    inset 0 0 22px rgba(255,156,26,.18) !important;
}

#infoModal.rebel-info .modal-box .label {
  color: #ffd19a !important;
}

.items-section {
  margin-top: 70px;
}
.items-place {
  border: 4px solid #ffe81f;
  border-radius: 20px;
  padding: 28px;
  min-height: 240px;
  background: rgba(8,8,8,.96);
  box-shadow: 0 0 22px rgba(255,232,31,.28);
}
.item-slot {
  min-height: 170px;
  border: 3px dashed #ffe81f;
  border-radius: 16px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 24px;
}
.item-slot-title {
  color: #ffe81f;
  font-weight: 900;
  font-size: 28px;
  margin-bottom: 10px;
}
.item-slot-text {
  color: white;
  font-size: 18px;
}

.item-heading {
  color: #ffe81f;
  text-shadow: 0 0 10px rgba(255,232,31,.8);
}
.item-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin-top:20px;
}
.item-card {
  border:3px solid #ffe81f;
  border-radius:16px;
  padding:18px;
  background:linear-gradient(180deg,rgba(70,60,0,.96),rgba(15,14,0,.98));
  color:white;
  cursor:pointer;
  min-height:170px;
  box-shadow:0 0 12px rgba(255,232,31,.45);
}
.item-card:hover {
  box-shadow:0 0 20px rgba(255,232,31,.85);
  transform:translateY(-2px);
}
.item-icon {
  font-size:48px;
  color:#ffe81f;
  margin-bottom:12px;
}
.item-name {
  font-size:20px;
  font-weight:900;
  color:#ffe81f;
  margin-bottom:8px;
}
.item-tap {
  color:#fff29a;
  font-size:14px;
}
.item-info-box {
  display:none;
  margin-top:24px;
  padding:22px;
  border:3px solid #ffe81f;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(70,60,0,.98),rgba(15,14,0,.99));
  box-shadow:0 0 18px rgba(255,232,31,.55);
}
.item-info-box.show { display:block; }
.item-info-box h3 {
  color:#ffe81f;
  margin-top:0;
}
.item-info-box p {
  color:#fff6b8;
  font-size:18px;
}

.item-heading {
  color: #c084fc !important;
  border-bottom-color: #c084fc !important;
  text-shadow: 0 0 10px rgba(192,132,252,.85), 0 0 20px rgba(192,132,252,.45) !important;
}
.item-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin-top:20px;
}
.item-card {
  border:3px solid #a855f7 !important;
  border-radius:16px;
  padding:0 0 18px 0 !important;
  background:linear-gradient(180deg,rgba(62,24,105,.96),rgba(18,7,33,.98)) !important;
  color:white;
  cursor:pointer;
  min-height:250px !important;
  overflow:hidden;
  box-shadow:0 0 12px rgba(168,85,247,.45), inset 0 0 18px rgba(192,132,252,.12) !important;
}
.item-card:hover {
  box-shadow:0 0 20px rgba(192,132,252,.9), 0 0 34px rgba(168,85,247,.45) !important;
  transform:translateY(-2px);
}
.item-image {
  display:block;
  width:100%;
  height:150px;
  object-fit:cover;
  border-bottom:2px solid #a855f7;
  background:#140a22;
}
.item-icon {
  display:none !important;
}
.item-name {
  font-size:20px;
  font-weight:900;
  color:#d8b4fe !important;
  margin:14px 12px 8px;
  text-shadow: 0 0 8px rgba(192,132,252,.75);
}
.item-tap {
  color:#f3e8ff !important;
  font-size:14px;
}
.item-info-box {
  display:none;
  margin-top:24px;
  padding:22px;
  border:3px solid #a855f7 !important;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(62,24,105,.98),rgba(18,7,33,.99)) !important;
  box-shadow:0 0 18px rgba(192,132,252,.55), inset 0 0 22px rgba(192,132,252,.15) !important;
}
.item-info-box.show { display:block; }
.item-info-box h3 {
  color:#d8b4fe !important;
  margin-top:0;
}
.item-info-box p {
  color:#f3e8ff !important;
  font-size:18px;
}

.creator-box, .planet-creator, .droid-creator, .ship-creator, .lightsaber-box {
  border-width: 4px !important;
  border-radius: 22px !important;
  padding: 28px !important;
  margin-top: 70px !important;
  background: linear-gradient(180deg, rgba(18,18,30,.97), rgba(5,5,10,.99)) !important;
  box-shadow: 0 0 24px rgba(255,232,31,.22) !important;
}
.creator-box h2, .planet-creator h2, .droid-creator h2, .ship-creator h2, .lightsaber-box h2 {
  text-shadow: 0 0 12px currentColor;
}
.planet-creator { border-color:#4ade80 !important; box-shadow:0 0 24px rgba(74,222,128,.28) !important; }
.planet-creator h2, .planet-creator label { color:#4ade80 !important; }
.planet-creator button { background:#4ade80 !important; color:#06100a !important; }

.droid-creator { border-color:#38bdf8 !important; box-shadow:0 0 24px rgba(56,189,248,.28) !important; }
.droid-creator h2, .droid-creator label { color:#38bdf8 !important; }
.droid-creator button { background:#38bdf8 !important; color:#041018 !important; }

.ship-creator { border-color:#fb923c !important; box-shadow:0 0 24px rgba(251,146,60,.28) !important; }
.ship-creator h2, .ship-creator label { color:#fb923c !important; }
.ship-creator button { background:#fb923c !important; color:#160a02 !important; }

.lightsaber-box { border-color:#c084fc !important; box-shadow:0 0 24px rgba(192,132,252,.3) !important; }
.lightsaber-box h2, .lightsaber-box label { color:#c084fc !important; }
.lightsaber-button { background:#c084fc !important; color:#100318 !important; }

.created-card, #planetCard, #createdDroidCard, #shipCard, #lightsaberCard {
  border-radius: 18px !important;
  box-shadow: 0 0 22px rgba(255,255,255,.10);
}

    .item-image {
      display: block !important;
      width: 100% !important;
      height: 160px !important;
      object-fit: cover !important;
      background: #140a22 !important;
      border-bottom: 2px solid #a855f7 !important;
    }
    
/* REAL IMAGES - not the old block drawings */
.item-image {
  display:block !important;
  width:100% !important;
  height:180px !important;
  object-fit:cover !important;
  object-position:center !important;
  background:#10071c !important;
  border-bottom:3px solid #a855f7 !important;
}

.creator-real-photo {
  display:block;
  width:100%;
  max-height:300px;
  object-fit:cover;
  object-position:center;
  border-radius:16px;
  margin:16px 0 24px;
  border:3px solid #ffe81f;
  box-shadow:0 0 18px rgba(255,232,31,.35);
}

#planet-creator .creator-real-photo { border-color:#4ade80; box-shadow:0 0 18px rgba(74,222,128,.35); }
#droid-creator .creator-real-photo { border-color:#38bdf8; box-shadow:0 0 18px rgba(56,189,248,.35); }
#ship-creator .creator-real-photo { border-color:#fb923c; box-shadow:0 0 18px rgba(251,146,60,.35); }
#lightsaber-creator .creator-real-photo { border-color:#c084fc; box-shadow:0 0 18px rgba(192,132,252,.38); }

.created-real-photo {
  display:block;
  width:100%;
  max-height:320px;
  object-fit:cover;
  object-position:center;
  border-radius:14px;
  margin:0 auto 20px;
}

/* Hide the old CSS block drawings after a creation is made. */
#planetCard .planet-orb-wrap,
#createdDroidCard .droid-visual,
#shipCard .ship-visual,
#lightsaberCard .lightsaber-visual {
  display:none !important;
}

.example-note{
  margin:-12px 0 18px;
  text-align:center;
  color:#ddd;
  font-size:14px;
  font-style:italic;
}

/* Real image appears inside the finished Create Your Own result */
.creator-result-image {
  display:block;
  width:100%;
  max-width:560px;
  height:300px;
  object-fit:cover;
  object-position:center;
  margin:0 auto 20px;
  border-radius:16px;
  border:3px solid #ffe81f;
  box-shadow:0 0 18px rgba(255,232,31,.35);
}

#planetCard .creator-result-image {
  border-color:#4ade80;
  box-shadow:0 0 18px rgba(74,222,128,.35);
}
#createdDroidCard .creator-result-image {
  border-color:#38bdf8;
  box-shadow:0 0 18px rgba(56,189,248,.35);
}
#shipCard .creator-result-image {
  border-color:#fb923c;
  box-shadow:0 0 18px rgba(251,146,60,.35);
}
#lightsaberCard .creator-result-image {
  border-color:#c084fc;
  box-shadow:0 0 18px rgba(192,132,252,.38);
}

/* Remove the old block drawings */
#planetCard .planet-orb-wrap,
#createdDroidCard .droid-visual,
#shipCard .ship-visual,
#lightsaberCard .lightsaber-visual {
  display:none !important;
}

/* Website-generated creation images */
.creator-generate-button {
  width:100%;
  margin-top:12px;
  padding:15px;
  border:3px solid #ffffff;
  border-radius:12px;
  background:#111;
  color:#fff;
  font-weight:900;
  font-size:18px;
  cursor:pointer;
}
.creator-generate-button:hover {
  box-shadow:0 0 18px rgba(255,255,255,.35);
}
.generated-image-wrap {
  margin:0 auto 20px;
  max-width:620px;
}
.generated-image-status {
  color:#ddd;
  text-align:center;
  margin-bottom:10px;
  font-size:15px;
}
.generated-created-image {
  display:none;
  width:100%;
  max-height:520px;
  object-fit:contain;
  border-radius:16px;
  border:3px solid #ffe81f;
  background:#080808;
  box-shadow:0 0 18px rgba(255,232,31,.3);
}
.generated-created-image.show { display:block; }

#ships-vehicles { margin-top:80px; }
#ships-vehicles>h2 { color:#45b7ff!important; text-shadow:0 0 12px rgba(69,183,255,.9),0 0 28px rgba(69,183,255,.45); }
.vehicle-heading { color:#80d4ff!important; border-bottom-color:#45b7ff!important; text-shadow:0 0 10px rgba(69,183,255,.75); }
.vehicle-grid .card { border:3px solid #45b7ff!important; background:linear-gradient(180deg,rgba(0,45,80,.96),rgba(0,12,25,.99))!important; box-shadow:0 0 12px rgba(69,183,255,.55),inset 0 0 18px rgba(69,183,255,.12)!important; }
.vehicle-grid .card-name { color:#72ccff!important; text-shadow:0 0 9px rgba(69,183,255,.75); }
.vehicle-grid .tap { color:#c4ecff!important; }
.vehicle-grid .card:hover { transform:translateY(-3px); box-shadow:0 0 20px rgba(69,183,255,.95),0 0 38px rgba(69,183,255,.45)!important; }
#infoModal.vehicle-info .modal-box, #infoModal.vehicle-info .modal-box h2, #infoModal.vehicle-info .modal-box h3,
#infoModal.vehicle-info .modal-box strong, #infoModal.vehicle-info .modal-box p,
#infoModal.vehicle-info #modalName, #infoModal.vehicle-info #modalFact, #infoModal.vehicle-info #modalAbout { color:#72ccff!important; }
#infoModal.vehicle-info .modal-box { border-color:#45b7ff!important; background:linear-gradient(180deg,rgba(0,45,80,.98),rgba(0,12,25,.99))!important; box-shadow:0 0 20px rgba(69,183,255,.85),0 0 38px rgba(69,183,255,.35)!important; }

/* MOCKUP-STYLE WEBSITE LOOK */
body {
  background:
    radial-gradient(circle at 20% 10%, rgba(0,90,160,.16), transparent 28%),
    radial-gradient(circle at 80% 30%, rgba(0,120,220,.10), transparent 30%),
    #02070d !important;
}

.title-box {
  border-bottom: 2px solid #0f8cff;
  padding-bottom: 18px;
  margin-bottom: 26px;
}

#ships-vehicles {
  border: 4px solid #118dff !important;
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(0,42,78,.9), rgba(0,18,35,.96));
  box-shadow: 0 0 26px rgba(17,141,255,.55);
}

#ships-vehicles > h2 {
  font-size: clamp(38px, 6vw, 72px) !important;
  color: #f5fbff !important;
  text-shadow:
    0 0 7px #fff,
    0 0 18px #2ba5ff,
    0 0 30px #118dff !important;
}

.vehicle-heading {
  color: #bfe7ff !important;
  border: 0 !important;
  font-size: 19px !important;
}

.vehicle-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 16px !important;
}

.vehicle-grid .card {
  padding: 0 0 16px !important;
  border: 2px solid #118dff !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg,#071f33,#04101c) !important;
  overflow: hidden !important;
  text-align: left !important;
  box-shadow: none !important;
}

.vehicle-grid .card-image {
  width: 100% !important;
  height: 175px !important;
  object-fit: cover !important;
  border-bottom: 2px solid #118dff !important;
  background: #000 !important;
}

.vehicle-grid .card-name {
  font-size: 20px !important;
  margin: 12px 14px 6px !important;
  color: white !important;
  text-shadow: none !important;
}

.vehicle-grid .tap {
  display: inline-block !important;
  margin: 10px 14px 0 !important;
  padding: 10px 18px !important;
  border-radius: 9px !important;
  background: #0877e8 !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-align: center !important;
}

.bad-heading {
  color: white !important;
  text-shadow:
    0 0 7px #fff,
    0 0 18px #ff3131,
    0 0 28px #d10000 !important;
}

.bad-grid {
  padding: 12px;
  border: 4px solid #e31c25;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(75,0,0,.94), rgba(28,0,0,.98));
  box-shadow: 0 0 25px rgba(227,28,37,.5);
}

.bad-grid .card {
  padding: 0 0 14px !important;
  border: 2px solid #ff2432 !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg,#2d0507,#160203) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.bad-grid .card-image {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  border-bottom: 2px solid #ff2432 !important;
  background: #000 !important;
}

.bad-grid .card-name {
  color: white !important;
  margin-top: 10px !important;
  text-shadow: none !important;
}

.bad-grid .tap {
  display: inline-block !important;
  margin-top: 10px !important;
  padding: 9px 15px !important;
  background: #e51624 !important;
  border-radius: 8px !important;
  color: white !important;
  font-weight: 800 !important;
}

/* APPLY THE NEW CARD LOOK TO ALL MAIN SECTIONS */

/* GOOD / YELLOW */
.good-grid {
  padding: 12px;
  border: 4px solid #ffe81f;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(66,58,0,.92), rgba(20,18,0,.98));
  box-shadow: 0 0 25px rgba(255,232,31,.35);
}
.good-grid .card {
  padding: 0 0 14px !important;
  border: 2px solid #ffe81f !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg,#2e2904,#151200) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.good-grid .card-image {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  border-bottom: 2px solid #ffe81f !important;
  background: #000 !important;
}
.good-grid .card-name {
  color: white !important;
  margin-top: 10px !important;
  text-shadow: none !important;
}
.good-grid .tap {
  display: inline-block !important;
  margin-top: 10px !important;
  padding: 9px 15px !important;
  background: #d9bf00 !important;
  border-radius: 8px !important;
  color: #000 !important;
  font-weight: 800 !important;
}

/* REBELS / ORANGE */
.rebel-grid {
  padding: 12px;
  border: 4px solid #ff9c1a;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(92,45,0,.92), rgba(28,13,0,.98));
  box-shadow: 0 0 25px rgba(255,156,26,.35);
}
.rebel-grid .card {
  padding: 0 0 14px !important;
  border: 2px solid #ff9c1a !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg,#3b1d03,#1a0b00) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.rebel-grid .card-image {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  border-bottom: 2px solid #ff9c1a !important;
  background: #000 !important;
}
.rebel-grid .card-name {
  color: white !important;
  margin-top: 10px !important;
  text-shadow: none !important;
}
.rebel-grid .tap {
  display: inline-block !important;
  margin-top: 10px !important;
  padding: 9px 15px !important;
  background: #ff8a00 !important;
  border-radius: 8px !important;
  color: white !important;
  font-weight: 800 !important;
}

/* ITEMS / PURPLE */
.item-grid {
  padding: 12px;
  border: 4px solid #a855f7;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(58,22,95,.92), rgba(19,7,32,.98));
  box-shadow: 0 0 25px rgba(168,85,247,.35);
}
.item-card {
  border: 2px solid #a855f7 !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg,#28113f,#12071d) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.item-image {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  border-bottom: 2px solid #a855f7 !important;
}
.item-name {
  color: white !important;
  text-shadow: none !important;
}
.item-tap {
  display: inline-block !important;
  margin: 10px 14px 14px !important;
  padding: 9px 15px !important;
  background: #8b35df !important;
  border-radius: 8px !important;
  color: white !important;
  font-weight: 800 !important;
}

/* CLONES / YELLOW-BLUE MIX */
#clones .card-grid {
  padding: 12px;
  border: 4px solid #45b7ff;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(0,45,80,.9), rgba(0,18,35,.97));
  box-shadow: 0 0 25px rgba(69,183,255,.35);
}
#clones .card {
  padding: 0 0 14px !important;
  border: 2px solid #45b7ff !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg,#071f33,#04101c) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
#clones .card-image {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  border-bottom: 2px solid #45b7ff !important;
}
#clones .card-name {
  color: white !important;
  text-shadow: none !important;
}
#clones .tap {
  display: inline-block !important;
  margin-top: 10px !important;
  padding: 9px 15px !important;
  background: #0877e8 !important;
  border-radius: 8px !important;
  color: white !important;
  font-weight: 800 !important;
}


/* ===== Compact dashboard look ===== */
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 10% 10%, rgba(39,126,255,.12), transparent 24%),
    radial-gradient(circle at 88% 16%, rgba(39,126,255,.09), transparent 22%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 35%),
    #01050c;
  color: #eef6ff;
  font-family: Arial, sans-serif;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 7% 11%, rgba(255,255,255,.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 19% 33%, rgba(255,255,255,.85) 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 31% 7%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 43% 26%, rgba(255,255,255,.8) 0 1px, transparent 1.6px),
    radial-gradient(circle at 57% 13%, rgba(255,255,255,.8) 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 69% 38%, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 83% 18%, rgba(255,255,255,.85) 0 1.6px, transparent 2px),
    radial-gradient(circle at 94% 43%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 12% 74%, rgba(255,255,255,.78) 0 1px, transparent 1.5px),
    radial-gradient(circle at 26% 88%, rgba(255,255,255,.85) 0 1.5px, transparent 1.9px),
    radial-gradient(circle at 48% 69%, rgba(255,255,255,.7) 0 1px, transparent 1.4px),
    radial-gradient(circle at 63% 91%, rgba(255,255,255,.78) 0 1.4px, transparent 1.8px),
    radial-gradient(circle at 78% 67%, rgba(255,255,255,.76) 0 1px, transparent 1.4px),
    radial-gradient(circle at 91% 82%, rgba(255,255,255,.84) 0 1.5px, transparent 1.9px);
}
.page {
  width: min(1180px, 94%);
  margin: 16px auto 60px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(2,8,18,.92), rgba(1,5,12,.96));
  border: 2px solid #0e4f95;
  border-radius: 28px;
  box-shadow: 0 0 32px rgba(17,123,255,.2), inset 0 0 0 1px rgba(108,196,255,.08);
}
.title-box { display: none; }
.site-hud {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(84,160,255,.32);
}
.hud-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hud-logo {
  color: #ffe81f;
  font-family: Impact, 'Arial Black', sans-serif;
  font-size: 28px;
  line-height: .85;
  text-shadow: 0 0 8px rgba(255,232,31,.35);
}
.hud-title {
  color: #d7ebff;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(100,180,255,.25);
}
.hud-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hud-nav a {
  text-decoration: none;
  color: #eff8ff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(13,28,51,.96), rgba(8,18,34,.96));
  border: 1px solid #1e6cc0;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.hud-nav a:hover { box-shadow: 0 0 10px rgba(38,150,255,.25); }
.dashboard-section {
  margin: 18px 0 22px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(0,0,0,.2);
}
.dashboard-section > h2 {
  margin: 0 0 4px;
  text-align: left;
  font-size: clamp(28px, 4vw, 58px);
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
}
.section-subtitle {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(236,245,255,.88);
}
.good-heading, .bad-heading, .rebel-heading, .item-heading, .vehicle-heading {
  margin: 8px 0 10px;
  padding-bottom: 6px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom-width: 2px;
}
.theme-yellow > h2, .theme-yellow .good-heading { color: #fff5a6; text-shadow: 0 0 16px rgba(255,232,31,.6); }
.theme-yellow { border: 3px solid #ffe81f; box-shadow: 0 0 18px rgba(255,232,31,.18); }
.theme-yellow .good-heading { border-color: #ffe81f; }
.theme-yellow .good-grid { background: linear-gradient(180deg, rgba(70,61,0,.92), rgba(29,24,0,.98)); border: 2px solid #ffe81f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.theme-yellow .bad-grid { background: linear-gradient(180deg, rgba(73,6,8,.92), rgba(32,3,4,.98)); border: 2px solid #ff3440; }
.theme-yellow .bad-heading { color: #ffbec2; border-color: #ff3440; text-shadow: 0 0 14px rgba(255,52,64,.5); }

.theme-blue > h2, .theme-blue .vehicle-heading, .theme-blue .good-heading { color: #dff2ff; text-shadow: 0 0 14px rgba(49,171,255,.65); }
.theme-blue { border: 3px solid #31abff; box-shadow: 0 0 20px rgba(49,171,255,.18); }
.theme-blue .good-heading, .theme-blue .vehicle-heading { border-color: #31abff; }
.theme-blue .good-grid, .theme-blue .vehicle-grid { background: linear-gradient(180deg, rgba(0,43,82,.95), rgba(0,16,34,.98)); border: 2px solid #31abff; }

.theme-orange > h2, .theme-orange .rebel-heading, .theme-orange .good-heading { color: #ffe0b2; text-shadow: 0 0 14px rgba(255,151,33,.55); }
.theme-orange { border: 3px solid #ff971f; box-shadow: 0 0 18px rgba(255,151,33,.18); }
.theme-orange .good-heading, .theme-orange .rebel-heading { border-color: #ff971f; }
.theme-orange .rebel-grid, .theme-orange .good-grid { background: linear-gradient(180deg, rgba(81,41,0,.94), rgba(33,15,0,.98)); border: 2px solid #ff971f; }

.theme-purple > h2, .theme-purple .item-heading { color: #f0daff; text-shadow: 0 0 14px rgba(172,92,255,.55); }
.theme-purple { border: 3px solid #ac5cff; box-shadow: 0 0 18px rgba(172,92,255,.2); }
.theme-purple .item-heading { border-color: #ac5cff; }
.theme-purple .item-grid { background: linear-gradient(180deg, rgba(56,22,96,.95), rgba(21,7,37,.98)); border: 2px solid #ac5cff; }

.card-grid, .item-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
}
.card, .item-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 252px;
  padding: 0 0 10px;
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  background: rgba(0,0,0,.72);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover, .item-card:hover { transform: translateY(-2px); }
.good-grid .card { border: 2px solid #ffe81f; }
.bad-grid .card { border: 2px solid #ff3440; }
.rebel-grid .card { border: 2px solid #ff971f; }
.vehicle-grid .card, #clones .card-grid .card { border: 2px solid #31abff; }
.item-card { border: 2px solid #ac5cff; }
.card-image, .item-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  background: #07101d;
}
.item-icon { display: none; }
.card-name, .item-name {
  padding: 10px 10px 4px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .3px;
  min-height: 38px;
}
.card-summary, .item-summary {
  padding: 0 10px;
  font-size: 11px;
  line-height: 1.25;
  color: rgba(235,244,255,.84);
  min-height: 58px;
}
.tap, .item-tap {
  margin: auto 10px 0;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 900;
  border-radius: 8px;
  width: fit-content;
  text-transform: none;
}
.good-grid .tap { color: #0b0b0b; background: #e8cf12; }
.bad-grid .tap { color: #fff; background: #ff2634; }
.rebel-grid .tap { color: #fff; background: #ff971f; }
.vehicle-grid .tap, #clones .tap { color: #fff; background: #168bff; }
.item-tap { color: #fff; background: #9d53eb; }

/* compact creator sections */
.creator-box, .planet-box, .droid-creator-box, .ship-creator-box, .lightsaber-box {
  margin-top: 18px;
  border: 3px solid #ffe81f;
  border-radius: 20px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(24,24,24,.96), rgba(7,7,7,.99));
  box-shadow: 0 0 18px rgba(255,232,31,.12);
}
.creator-box h2, .planet-box h2, .droid-creator-box h2, .ship-creator-box h2, .lightsaber-box h2 {
  margin: 0 0 4px;
  text-align: left;
  font-size: clamp(26px, 4vw, 44px);
  color: #fff5a6;
  text-shadow: 0 0 14px rgba(255,232,31,.45);
}
.creator-grid, .planet-grid, .droid-creator-grid, .ship-grid, .lightsaber-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.creator-field label, .planet-field label, .droid-field label, .ship-field label, .lightsaber-field label {
  color: #ffe81f;
  font-size: 13px;
  margin-bottom: 5px;
}
.creator-field input, .creator-field select, .creator-field textarea,
.planet-field input, .planet-field select, .planet-field textarea,
.droid-field input, .droid-field select, .droid-field textarea,
.ship-field input, .ship-field select, .ship-field textarea,
.lightsaber-field input, .lightsaber-field select, .lightsaber-field textarea {
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
}
.creator-button, .planet-button, .droid-button, .ship-button, .lightsaber-button {
  padding: 14px;
  border-radius: 10px;
  font-size: 16px;
}
.created-character, .planet-card, .created-droid-card, .ship-card, .lightsaber-card {
  margin-top: 14px;
  padding: 16px;
  border-radius: 14px;
}
.generated-image-wrap { margin-top: 12px; }
.generated-created-image, .generated-planet-image, .generated-droid-image, .generated-ship-image, .generated-lightsaber-image {
  max-width: 320px;
  border-radius: 12px;
}
.modal-box {
  background: #07111d;
  border: 2px solid #31abff;
  box-shadow: 0 0 30px rgba(49,171,255,.2);
}
#modalName, .label, .close { color: #dff2ff; }
.modal-box p { color: #f3f8ff; }

@media (max-width: 1080px) {
  .card-grid, .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .hud-title { font-size: 22px; }
  .card-grid, .item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .creator-grid, .planet-grid, .droid-creator-grid, .ship-grid, .lightsaber-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .page { padding: 14px; }
  .card-grid, .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hud-nav a { font-size: 11px; padding: 7px 8px; }
}
@media (max-width: 420px) {
  .card-grid, .item-grid { grid-template-columns: 1fr; }
}

.hud-divider {
  width: 3px;
  height: 42px;
  background: #31abff;
  box-shadow: 0 0 10px rgba(49,171,255,.9);
  border-radius: 3px;
  flex: 0 0 auto;
}


/* Extra galaxy sections */
.theme-green {
  border: 3px solid #4ade80 !important;
  box-shadow: 0 0 18px rgba(74,222,128,.20) !important;
}
.theme-green > h2,
.theme-green .planet-heading {
  color: #d9ffe7 !important;
  text-shadow: 0 0 14px rgba(74,222,128,.60) !important;
}
.theme-green .planet-heading {
  border-color: #4ade80 !important;
}
.theme-green .planet-grid-cards {
  background: linear-gradient(180deg, rgba(6,66,36,.94), rgba(2,28,15,.98)) !important;
  border: 2px solid #4ade80 !important;
}
.theme-green .card {
  border: 2px solid #4ade80 !important;
}
.theme-green .tap {
  background: #22c55e !important;
  color: #041009 !important;
}

.theme-red {
  border: 3px solid #ff4452 !important;
  box-shadow: 0 0 18px rgba(255,68,82,.20) !important;
}
.theme-red > h2,
.theme-red .weapon-heading {
  color: #ffd7da !important;
  text-shadow: 0 0 14px rgba(255,68,82,.60) !important;
}
.theme-red .weapon-heading {
  border-color: #ff4452 !important;
}
.theme-red .weapon-grid {
  background: linear-gradient(180deg, rgba(75,5,9,.94), rgba(30,2,4,.98)) !important;
  border: 2px solid #ff4452 !important;
}
.theme-red .card {
  border: 2px solid #ff4452 !important;
}
.theme-red .tap {
  background: #ff3344 !important;
  color: white !important;
}

/* Galaxy search */
.hud-search {
  display:flex;
  align-items:center;
  gap:6px;
  min-width:245px;
  flex:1 1 245px;
  max-width:360px;
  margin-left:auto;
}
.hud-search input {
  width:100%;
  min-width:0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #2d7ecb;
  background:#06111f;
  color:#eef8ff;
  font-size:14px;
  outline:none;
}
.hud-search input:focus {
  border-color:#46b6ff;
  box-shadow:0 0 12px rgba(70,182,255,.28);
}
.hud-search input::placeholder { color:#94a9be; }
.hud-search button {
  width:40px;
  height:40px;
  border:1px solid #2d7ecb;
  border-radius:10px;
  background:#0b1c31;
  color:white;
  font-size:24px;
  cursor:pointer;
}
.search-message {
  display:none;
  margin:-4px 0 12px;
  padding:8px 10px;
  border:1px solid #2d7ecb;
  border-radius:9px;
  background:rgba(4,16,30,.92);
  color:#bfe5ff;
  font-size:13px;
}
.search-message.show { display:block; }
.search-hidden { display:none !important; }
.dashboard-section.search-no-match { display:none !important; }

/* --- Kieran update: green weapons, rainbow planets, guaranteed images --- */
#weapons,
#weapons.theme-red {
  border: 3px solid #34d399 !important;
  box-shadow: 0 0 20px rgba(52,211,153,.28) !important;
}
#weapons > h2,
#weapons .weapon-heading {
  color: #d1fae5 !important;
  text-shadow: 0 0 14px rgba(52,211,153,.55) !important;
}
#weapons .weapon-heading {
  border-bottom-color: #34d399 !important;
}
#weapons .weapon-grid {
  background: linear-gradient(180deg, rgba(7,58,39,.94), rgba(3,24,18,.98)) !important;
  border: 2px solid #34d399 !important;
}
#weapons .card {
  border-color: #34d399 !important;
  box-shadow: 0 0 12px rgba(52,211,153,.12);
}
#weapons .card:hover {
  box-shadow: 0 0 18px rgba(52,211,153,.35) !important;
}
#weapons .tap {
  background: #22c55e !important;
  color: #04210f !important;
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 14px !important;
  border-radius: 10px;
  font-weight: 800;
}

#planets {
  border: 3px solid transparent !important;
  background:
    linear-gradient(rgba(2,10,12,.95), rgba(2,10,12,.95)) padding-box,
    linear-gradient(90deg, #ff4d6d, #ff9f1c, #ffe81f, #2dd4bf, #60a5fa, #a855f7, #ff4d6d) border-box !important;
  box-shadow: 0 0 22px rgba(255,255,255,.12), 0 0 24px rgba(168,85,247,.18) !important;
}
#planets > h2,
#planets .planet-heading {
  background: linear-gradient(90deg, #ff5f6d, #ffb703, #ffee32, #4ade80, #38bdf8, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}
#planets .planet-heading {
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, #ff4d6d, #ff9f1c, #ffe81f, #22c55e, #38bdf8, #a855f7) 1 !important;
}
#planets .planet-grid-cards {
  background:
    linear-gradient(rgba(2,17,20,.92), rgba(2,17,20,.92)) padding-box,
    linear-gradient(120deg, rgba(255,77,109,.28), rgba(255,159,28,.22), rgba(255,232,31,.20), rgba(34,197,94,.20), rgba(56,189,248,.22), rgba(168,85,247,.28)) border-box !important;
  border: 2px solid transparent !important;
}
#planets .card {
  background: linear-gradient(180deg, #07151a, #06140f) !important;
  border-width: 2px !important;
}
#planets .card:nth-child(6n+1) { border-color: #ff4d6d !important; box-shadow: 0 0 12px rgba(255,77,109,.18); }
#planets .card:nth-child(6n+2) { border-color: #ff9f1c !important; box-shadow: 0 0 12px rgba(255,159,28,.18); }
#planets .card:nth-child(6n+3) { border-color: #ffe81f !important; box-shadow: 0 0 12px rgba(255,232,31,.16); }
#planets .card:nth-child(6n+4) { border-color: #22c55e !important; box-shadow: 0 0 12px rgba(34,197,94,.18); }
#planets .card:nth-child(6n+5) { border-color: #38bdf8 !important; box-shadow: 0 0 12px rgba(56,189,248,.18); }
#planets .card:nth-child(6n)   { border-color: #a855f7 !important; box-shadow: 0 0 12px rgba(168,85,247,.18); }
#planets .tap {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 14px !important;
  border-radius: 10px;
  color: #081017 !important;
  font-weight: 800;
}
#planets .card:nth-child(6n+1) .tap { background: #ff4d6d !important; }
#planets .card:nth-child(6n+2) .tap { background: #ff9f1c !important; }
#planets .card:nth-child(6n+3) .tap { background: #ffe81f !important; }
#planets .card:nth-child(6n+4) .tap { background: #22c55e !important; }
#planets .card:nth-child(6n+5) .tap { background: #38bdf8 !important; }
#planets .card:nth-child(6n) .tap   { background: #a855f7 !important; color: white !important; }

#planets .card-image,
#weapons .card-image {
  background: #08111b !important;
  object-fit: cover !important;
}

/* Fixed real-looking images */
#planets .card-image,
#weapons .card-image {
  display:block !important;
  width:100% !important;
  height:150px !important;
  object-fit:cover !important;
  object-position:center !important;
  background:#050b12 !important;
}

/* Glowing info modal that matches the section colour */
#infoModal .modal-box {
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#infoModal.info-yellow .modal-box {
  border-color:#ffe81f !important;
  background:linear-gradient(180deg,#2b2600,#0f0d00) !important;
  box-shadow:0 0 18px rgba(255,232,31,.9),0 0 40px rgba(255,232,31,.35) !important;
}
#infoModal.info-yellow #modalName,
#infoModal.info-yellow .label,
#infoModal.info-yellow .close,
#infoModal.info-yellow #modalFact,
#infoModal.info-yellow #modalAbout {
  color:#ffe81f !important;
  text-shadow:0 0 8px rgba(255,232,31,.55);
}

#infoModal.info-red .modal-box {
  border-color:#ff3344 !important;
  background:linear-gradient(180deg,#3b0508,#170103) !important;
  box-shadow:0 0 18px rgba(255,51,68,.9),0 0 40px rgba(255,51,68,.35) !important;
}
#infoModal.info-red #modalName,
#infoModal.info-red .label,
#infoModal.info-red .close,
#infoModal.info-red #modalFact,
#infoModal.info-red #modalAbout {
  color:#ff6572 !important;
  text-shadow:0 0 8px rgba(255,51,68,.55);
}

#infoModal.info-blue .modal-box {
  border-color:#31abff !important;
  background:linear-gradient(180deg,#06223a,#03111f) !important;
  box-shadow:0 0 18px rgba(49,171,255,.9),0 0 40px rgba(49,171,255,.35) !important;
}
#infoModal.info-blue #modalName,
#infoModal.info-blue .label,
#infoModal.info-blue .close,
#infoModal.info-blue #modalFact,
#infoModal.info-blue #modalAbout {
  color:#7fd0ff !important;
  text-shadow:0 0 8px rgba(49,171,255,.55);
}

#infoModal.info-orange .modal-box {
  border-color:#ff971f !important;
  background:linear-gradient(180deg,#3b1b02,#180a00) !important;
  box-shadow:0 0 18px rgba(255,151,31,.9),0 0 40px rgba(255,151,31,.35) !important;
}
#infoModal.info-orange #modalName,
#infoModal.info-orange .label,
#infoModal.info-orange .close,
#infoModal.info-orange #modalFact,
#infoModal.info-orange #modalAbout {
  color:#ffb45d !important;
  text-shadow:0 0 8px rgba(255,151,31,.55);
}

#infoModal.info-purple .modal-box {
  border-color:#ac5cff !important;
  background:linear-gradient(180deg,#28103f,#10061c) !important;
  box-shadow:0 0 18px rgba(172,92,255,.9),0 0 40px rgba(172,92,255,.35) !important;
}
#infoModal.info-purple #modalName,
#infoModal.info-purple .label,
#infoModal.info-purple .close,
#infoModal.info-purple #modalFact,
#infoModal.info-purple #modalAbout {
  color:#d6b0ff !important;
  text-shadow:0 0 8px rgba(172,92,255,.55);
}

#infoModal.info-green .modal-box {
  border-color:#34d399 !important;
  background:linear-gradient(180deg,#063522,#02170f) !important;
  box-shadow:0 0 18px rgba(52,211,153,.9),0 0 40px rgba(52,211,153,.35) !important;
}
#infoModal.info-green #modalName,
#infoModal.info-green .label,
#infoModal.info-green .close,
#infoModal.info-green #modalFact,
#infoModal.info-green #modalAbout {
  color:#7cf0bd !important;
  text-shadow:0 0 8px rgba(52,211,153,.55);
}

#infoModal.info-rainbow .modal-box {
  border:3px solid transparent !important;
  background:
    linear-gradient(#071015,#071015) padding-box,
    linear-gradient(90deg,#ff4d6d,#ff9f1c,#ffe81f,#22c55e,#38bdf8,#a855f7,#ff4d6d) border-box !important;
  box-shadow:0 0 20px rgba(255,77,109,.25),0 0 35px rgba(56,189,248,.22),0 0 48px rgba(168,85,247,.18) !important;
}
#infoModal.info-rainbow #modalName,
#infoModal.info-rainbow .label {
  background:linear-gradient(90deg,#ff5f6d,#ffb703,#ffee32,#4ade80,#38bdf8,#a855f7);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  text-shadow:none !important;
}
#infoModal.info-rainbow #modalFact,
#infoModal.info-rainbow #modalAbout {
  color:#f4f7fb !important;
}
#infoModal.info-rainbow .close {
  color:#ff74d8 !important;
  text-shadow:0 0 10px rgba(255,116,216,.6);
}

/* ===== Galaxy top header ===== */
.old-title-hidden { display:none !important; }

.galaxy-topbar{
  position:sticky;
  top:0;
  z-index:50;
  margin:0 0 18px;
  padding:12px 14px 10px;
  border:2px solid #168bff;
  border-radius:0 0 18px 18px;
  background:
    radial-gradient(circle at 88% 18%, rgba(110,180,255,.15), transparent 22%),
    linear-gradient(180deg, rgba(2,13,27,.98), rgba(3,11,21,.96));
  box-shadow:
    0 0 20px rgba(22,139,255,.28),
    inset 0 0 24px rgba(20,110,190,.08);
  backdrop-filter: blur(8px);
}

.galaxy-brand-row{
  display:grid;
  grid-template-columns:auto minmax(260px,1fr) auto;
  gap:18px;
  align-items:center;
}

.galaxy-brand{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:max-content;
}

.galaxy-logo{
  color:#ffe81f;
  font-family:Impact,"Arial Black",sans-serif;
  font-size:27px;
  line-height:.72;
  letter-spacing:1px;
  text-align:center;
  text-shadow:0 0 8px rgba(255,232,31,.5);
}

.galaxy-divider{
  width:3px;
  height:48px;
  border-radius:4px;
  background:#31abff;
  box-shadow:0 0 12px rgba(49,171,255,.9);
}

.galaxy-title{
  color:#eaf6ff;
  font-size:30px;
  font-weight:900;
  letter-spacing:1px;
  white-space:nowrap;
  text-shadow:
    0 0 6px #fff,
    0 0 15px rgba(49,171,255,.75);
}

.galaxy-tagline{
  margin-top:5px;
  color:#52c7ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:4px;
}

.galaxy-search-wrap{
  width:100%;
  max-width:480px;
  justify-self:center;
}

.galaxy-search-wrap input{
  width:100%;
  padding:12px 18px;
  border-radius:18px;
  border:2px solid #31abff;
  background:#071526;
  color:#f4f9ff;
  font-size:15px;
  outline:none;
  box-shadow:
    0 0 12px rgba(49,171,255,.35),
    inset 0 0 14px rgba(49,171,255,.06);
}

.galaxy-search-wrap input:focus{
  box-shadow:
    0 0 18px rgba(49,171,255,.65),
    inset 0 0 14px rgba(49,171,255,.10);
}

.galaxy-search-help{
  margin-top:4px;
  color:#5dd4ff;
  font-size:10px;
  text-align:center;
}

.galaxy-side-note{
  padding-left:12px;
  border-left:1px solid rgba(132,189,255,.35);
  text-align:right;
  white-space:nowrap;
}

.galaxy-side-title{
  color:#f4f7fb;
  font-size:12px;
  font-weight:900;
}

.galaxy-side-sub{
  margin-top:4px;
  color:#9eb8d0;
  font-size:10px;
}

.galaxy-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(72,146,220,.20);
}

.galaxy-nav a{
  text-decoration:none;
  color:#f4f8ff;
  font-size:12px;
  font-weight:800;
  padding:8px 12px;
  border:1px solid #1f70bc;
  border-radius:9px;
  background:linear-gradient(180deg,#0b1d32,#071320);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.galaxy-nav a:hover{
  box-shadow:0 0 10px rgba(49,171,255,.35);
}

.galaxy-nav .nav-blue{
  border-color:#31abff;
  background:#0d68c8;
  box-shadow:0 0 12px rgba(49,171,255,.45);
}

.galaxy-nav .nav-green{
  border-color:#34d399;
  background:#0c5d3d;
  box-shadow:0 0 12px rgba(52,211,153,.35);
}

.galaxy-nav .nav-rainbow{
  border:1px solid transparent;
  background:
    linear-gradient(#151321,#151321) padding-box,
    linear-gradient(90deg,#ff4d6d,#ff9f1c,#ffe81f,#22c55e,#38bdf8,#a855f7) border-box;
  box-shadow:0 0 12px rgba(168,85,247,.25);
}

.galaxy-nav .nav-yellow{
  border-color:#ffe81f;
  color:#fff7ba;
  background:linear-gradient(180deg,#5a5200,#2c2800);
  box-shadow:0 0 12px rgba(255,232,31,.35);
}

.galaxy-nav .nav-orange{
  border-color:#ff9f1c;
  color:#ffe0b0;
  background:linear-gradient(180deg,#6a3300,#311600);
  box-shadow:0 0 12px rgba(255,159,28,.35);
}

.galaxy-nav .nav-purple{
  border-color:#c084fc;
  color:#f0dcff;
  background:linear-gradient(180deg,#4a1677,#210a35);
  box-shadow:0 0 12px rgba(192,132,252,.35);
}

@media(max-width:980px){
  .galaxy-brand-row{
    grid-template-columns:1fr;
  }
  .galaxy-brand,
  .galaxy-search-wrap,
  .galaxy-side-note{
    justify-self:center;
    text-align:center;
  }
  .galaxy-side-note{
    border-left:0;
    padding-left:0;
  }
}

@media(max-width:640px){
  .galaxy-title{font-size:21px;}
  .galaxy-tagline{letter-spacing:2px;font-size:9px;}
  .galaxy-logo{font-size:22px;}
  .galaxy-nav a{font-size:11px;padding:7px 9px;}
}

/* Embedded ship & vehicle images */
#ships-vehicles .card-image {
  display:block !important;
  width:100% !important;
  height:170px !important;
  object-fit:cover !important;
  object-position:center !important;
  background:#000 !important;
}

/* Navigation fixes */
html { scroll-padding-top: 175px; }
section[id] { scroll-margin-top: 175px; }

@media (max-width: 980px) {
  html { scroll-padding-top: 255px; }
  section[id] { scroll-margin-top: 255px; }
}

/* Make the top navigation easier to click */
.galaxy-nav a {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* A-wing image is embedded and displayed like the other vehicle pictures */
#ships-vehicles .card-image {
  display: block !important;
  width: 100% !important;
  height: 170px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Clean planet images: each card gets its own image only */
#planets .card-image {
  display:block !important;
  width:100% !important;
  height:165px !important;
  object-fit:cover !important;
  object-position:center !important;
  background:#050b12 !important;
}

/* A-wing image reliability fix */
#ships-vehicles .card-image {
  display:block !important;
  width:100% !important;
  height:170px !important;
  object-fit:cover !important;
  object-position:center !important;
  background:#000 !important;
}


/* September fixes */
#clones {
  border-color: #ffe81f !important;
  box-shadow: 0 0 28px rgba(255,232,31,.24) !important;
}
#clones h2,
#clones h3,
#clones .section-subtitle {
  color: #ffe81f !important;
  text-shadow: 0 0 12px rgba(255,232,31,.45) !important;
}
#clones .card,
#clones .clone-card {
  border-color: #ffe81f !important;
  box-shadow: 0 0 14px rgba(255,232,31,.28) !important;
}
#clones .tap,
#clones .learn-more,
#clones button .tap {
  background: #ffe81f !important;
  color: #111 !important;
}
#clones .card-name,
#bounty-hunters .card-name,
#planets .card-name {
  margin-top: 12px;
}
.card-summary,
.item-summary,
#infoModal .about-label,
#infoModal .about-copy {
  display: none !important;
}
#infoModal.info-yellow .modal-box,
#infoModal.clone-yellow .modal-box {
  border-color: #ffe81f !important;
}
#bounty-hunters {
  border-color: #ff9c1a !important;
}
#bounty-hunters .card {
  border-color: #ff9c1a !important;
  box-shadow: 0 0 14px rgba(255,156,26,.25) !important;
}
#bounty-hunters .tap {
  background: #ff9c1a !important;
  color: #111 !important;
}
.about-section .about-box {
  border: 3px solid #ffe81f;
  border-radius: 20px;
  padding: 24px;
  background: rgba(10,10,10,.92);
  box-shadow: 0 0 20px rgba(255,232,31,.18);
  color: #f7f7f7;
}
.about-section .about-box ul {
  margin: 16px 0 0 20px;
}
.about-section .about-box li {
  margin-bottom: 10px;
}
#planets .section-subtitle {
  color: #ffffff !important;
}
#planets .planet-heading {
  color: #ffe81f !important;
}

/* Kieran final fixes */
#clones {
  border-color:#31abff !important;
  box-shadow:0 0 28px rgba(49,171,255,.24) !important;
}
#clones h2,
#clones h3,
#clones .section-subtitle {
  color:#dff2ff !important;
  text-shadow:0 0 12px rgba(49,171,255,.55) !important;
}
#clones .card {
  border-color:#31abff !important;
  box-shadow:0 0 14px rgba(49,171,255,.24) !important;
}
#clones .tap {
  background:#168bff !important;
  color:#fff !important;
}
.kieran-about-message{
  margin:0;
  text-align:center;
  font-size:28px;
  line-height:1.5;
  font-weight:800;
  color:#ffe81f;
  text-shadow:0 0 12px rgba(255,232,31,.45);
}

/* Restore character About info in popup */
#infoModal .about-label,
#infoModal .about-copy,
#infoModal #modalAbout {
  display:block !important;
}
#infoModal .label {
  display:block !important;
}


/* Bad-guy popup text */
#infoModal.bad-info .modal-box,
#infoModal.bad-info .modal-box h2,
#infoModal.bad-info .modal-box h3,
#infoModal.bad-info .modal-box strong,
#infoModal.bad-info .modal-box p,
#infoModal.bad-info #modalName,
#infoModal.bad-info #modalFact,
#infoModal.bad-info #modalAbout {
  color: #ff3b30 !important;
}

#infoModal.bad-info .modal-box {
  border-color: #ff1f1f !important;
  background: linear-gradient(180deg, rgba(90,0,0,.98), rgba(20,0,0,.99)) !important;
  box-shadow:
    0 0 18px rgba(255,0,0,.85),
    0 0 36px rgba(255,0,0,.35),
    inset 0 0 22px rgba(255,0,0,.18) !important;
}

#infoModal.bad-info .modal-box .label,
#infoModal.bad-info .modal-box .fact-label,
#infoModal.bad-info .modal-box .about-label {
  color: #ff8a80 !important;
}

.hud-divider {
  width: 3px;
  height: 42px;
  background: #31abff;
  box-shadow: 0 0 10px rgba(49,171,255,.9);
  border-radius: 3px;
  flex: 0 0 auto;
}




/* Good-guy popup text */
#infoModal.good-info .modal-box,
#infoModal.good-info .modal-box h2,
#infoModal.good-info .modal-box h3,
#infoModal.good-info .modal-box strong,
#infoModal.good-info .modal-box p,
#infoModal.good-info #modalName,
#infoModal.good-info #modalFact,
#infoModal.good-info #modalAbout {
  color: #ffe81f !important;
}

#infoModal.good-info .modal-box {
  border-color: #ffe81f !important;
  background: linear-gradient(180deg, rgba(75,65,0,.98), rgba(20,18,0,.99)) !important;
  box-shadow:
    0 0 18px rgba(255,232,31,.85),
    0 0 36px rgba(255,232,31,.35),
    inset 0 0 22px rgba(255,232,31,.18) !important;
}

#infoModal.good-info .modal-box .label,
#infoModal.good-info .modal-box .fact-label,
#infoModal.good-info .modal-box .about-label {
  color: #fff29a !important;
}

.hud-divider {
  width: 3px;
  height: 42px;
  background: #31abff;
  box-shadow: 0 0 10px rgba(49,171,255,.9);
  border-radius: 3px;
  flex: 0 0 auto;
}