/* SUSAN · refined heart memory game with actual lamp lenses */

.susan-section {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  overflow: hidden;
}

.susan-shell {
  width: 100%;
  min-width: 0;
}

.susan-machine {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 16px;
  border: 1px solid rgba(7,24,44,.24);
  background:
    radial-gradient(circle at 14% 12%, rgba(255,45,141,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 18%, rgba(7,24,44,.06) 0 1px, transparent 2px),
    linear-gradient(180deg,#fffdf9,#fff7ed);
  box-shadow: 3px 3px 0 rgba(255,45,141,.10);
  overflow: hidden;
}

.susan-title-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 11px;
}

.susan-heading {
  margin: 0;
  color: var(--pink);
  font-family: var(--heading-font);
  font-size: clamp(2.7rem,8vw,4.4rem);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.025em;
  text-shadow: none;
}

.susan-tagline {
  margin: 4px 0 0 !important;
  color: rgba(7,24,44,.62);
  font-size: .7rem !important;
  font-weight: 800;
}

.susan-hud {
  display: grid;
  grid-template-columns: repeat(3,auto);
  gap: 4px;
}

.susan-hud span {
  min-width: 56px;
  padding: 5px 6px;
  border: 1px solid rgba(7,24,44,.18);
  background: rgba(255,255,255,.74);
  color: rgba(7,24,44,.56);
  font: 800 .46rem/1 "Courier New",monospace;
  text-align: center;
}

.susan-hud b {
  display: block;
  margin-top: 3px;
  color: var(--navy);
  font-size: .76rem;
}

/* Grid overlay keeps everything physically inside the game card. */
.susan-board {
  display: grid;
  place-items: center;
  width: min(100%,430px);
  aspect-ratio: 400 / 360;
  margin: 0 auto;
  isolation: isolate;
  contain: layout paint;
}

.susan-board > * {
  grid-area: 1 / 1;
}

.susan-heart-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 11px 18px rgba(7,24,44,.11));
  z-index: 1;
}

.susan-segment {
  opacity: .22;
  transition: opacity .11s ease, filter .11s ease;
}

.susan-segment-a { fill:#ff2d8d; }
.susan-segment-b { fill:#ff8bc1; }
.susan-segment-c { fill:#9f7cff; }
.susan-segment-d { fill:#ffd86a; }

.susan-segment.is-lit {
  opacity: .62;
  filter: brightness(1.35) saturate(1.15);
}

/* The actual "bulb" inside each quadrant. */
.susan-lamp {
  opacity: .34;
  transition: opacity .08s ease, filter .08s ease;
  pointer-events: none;
}

.susan-lamp-a { color:#ff2d8d; }
.susan-lamp-b { color:#ff8bc1; }
.susan-lamp-c { color:#9f7cff; }
.susan-lamp-d { color:#ffd86a; }

.susan-lamp-halo {
  fill: currentColor;
  opacity: .08;
}

.susan-lamp-glass {
  fill: rgba(255,248,236,.24);
  stroke: rgba(255,255,255,.42);
  stroke-width: 2;
}

.susan-lamp-core {
  fill: #fff8ec;
  opacity: .18;
}

.susan-lamp-shine {
  fill: #fff;
  opacity: .26;
}

.susan-lamp.is-lit {
  opacity: 1;
  filter: url(#susan-lamp-glow);
}

.susan-lamp.is-lit .susan-lamp-halo {
  opacity: .82;
}

.susan-lamp.is-lit .susan-lamp-glass {
  fill: url(#susan-lamp-white);
  stroke: #fff;
  stroke-width: 3;
}

.susan-lamp.is-lit .susan-lamp-core {
  fill: #fff;
  opacity: 1;
}

.susan-lamp.is-lit .susan-lamp-shine {
  opacity: 1;
}

.susan-heart-outline {
  fill:none;
  stroke:var(--navy);
  stroke-width:5px;
  stroke-linejoin:round;
  pointer-events:none;
}

.susan-seam {
  stroke:rgba(7,24,44,.64);
  stroke-width:3px;
  stroke-linecap:round;
  pointer-events:none;
}

/* Native HTML buttons make taps reliable on iPhone. */
.susan-hit-grid {
  z-index: 2;
  width: 100%;
  height: 100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  overflow:hidden;
  clip-path: polygon(
    50% 100%,
    30% 79%,
    13% 62%,
    4% 47%,
    0% 32%,
    3% 18%,
    13% 7%,
    27% 1%,
    39% 4%,
    47% 14%,
    50% 20%,
    53% 14%,
    61% 4%,
    73% 1%,
    87% 7%,
    97% 18%,
    100% 32%,
    96% 47%,
    87% 62%,
    70% 79%
  );
}

.susan-hit-grid button {
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.susan-hit-grid button:disabled {
  cursor:default;
}

.susan-hit-grid button:focus-visible {
  outline:4px solid rgba(255,255,255,.9);
  outline-offset:-10px;
}

/* Center heart is part of the same CSS grid, not absolutely positioned. */
.susan-start {
  z-index: 4;
  place-self:center;
  width: 25%;
  aspect-ratio: 1 / .92;
  display:grid;
  place-items:center;
  padding:0 6px 8px;
  border:0;
  background:rgba(7,24,44,.96);
  color:var(--cream);
  clip-path:polygon(
    50% 100%,14% 65%,3% 48%,1% 30%,8% 15%,21% 5%,35% 3%,46% 10%,
    50% 18%,54% 10%,65% 3%,79% 5%,92% 15%,99% 30%,97% 48%,86% 65%
  );
  font-family:var(--heading-font);
  font-weight:800;
  cursor:pointer;
  touch-action:manipulation;
  transition:background .12s ease,color .12s ease,filter .12s ease;
}

.susan-start span {
  font-size:clamp(.6rem,2.4vw,.9rem);
  letter-spacing:.04em;
}

.susan-start:hover,
.susan-start:focus-visible {
  background:var(--pink);
  color:var(--navy);
  filter:drop-shadow(0 0 13px rgba(255,45,141,.48));
  outline:none;
}

.susan-status {
  min-height:1.4em;
  margin:8px 0 0 !important;
  color:rgba(7,24,44,.68);
  font-size:.7rem !important;
  font-weight:800;
  text-align:center;
}

/* Starcade portal icon stays clean. */
.portal-susan .portal-symbol {
  position:relative;
  background:linear-gradient(145deg,#07182c 0%,#102a4b 68%,#ff2d8d 155%);
  color:var(--pink);
}

.susan-portal-symbol span {
  font-family:Georgia,serif;
  font-size:3.2rem;
  line-height:1;
  text-shadow:0 0 12px rgba(255,45,141,.42);
}

.susan-portal-symbol i {
  position:absolute;
  right:27%;
  top:23%;
  color:var(--cream);
  font:normal .9rem "Courier New",monospace;
}

.susan-side {
  display:grid;
  gap:8px;
  margin-top:12px;
}

@media (min-width:780px) {
  .starcade-page [data-arcade-panel="susan"] .susan-shell {
    display:grid;
    grid-template-columns:minmax(340px,580px) minmax(190px,1fr);
    gap:14px;
    align-items:start;
  }
  .starcade-page [data-arcade-panel="susan"] .susan-side { margin-top:0; }
}

@media (max-width:620px) {
  .susan-machine { padding:13px 10px; box-shadow:none; }
  .susan-title-row { grid-template-columns:1fr; gap:8px; }
  .susan-heading { text-align:center; font-size:clamp(3rem,15vw,4.1rem); }
  .susan-tagline { text-align:center; }
  .susan-hud { grid-template-columns:repeat(3,1fr); }
  .susan-hud span { min-width:0; }
  .susan-board { width:min(100%,350px); }
  .susan-start { width:27%; }
}

@media (prefers-reduced-motion:reduce) {
  .susan-segment,.susan-lamp,.susan-start { transition:none; }
}