/* ==========================================================================
   Section 3 Styles
   --------------------------------------------------------------------------
   Character showcase composition, tab carousel, and breakpoint refinements.
   ========================================================================== */

/* Section 3 root layout */
#character {
  display: flex;
  align-items: stretch;
}

/* Content frame sizing for character section */
#character .section-content {
  width: min(96vw, 1180px);
  height: 100%;
  min-height: inherit;
  padding-top: 18px;
  padding-bottom: 0;
}

/* Two-column character composition */
.character-layout {
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

.character-left {
  flex: 0 0 62%;
  padding-left: 12px;
  padding-top: 8px;
  padding-bottom: 0;
}

.character-title-image {
  margin: 14px 0 0;
}

.character-title-image img {
  width: min(100%, 1100px);
  display: block;
}

.character-nameplate {
  display: flex;
  width: fit-content;
  margin: 8px auto 0;
}

.character-nameplate img {
  width: clamp(420px, 45vw, 620px);
  display: block;
}

/* Character description and tab controls */
.character-copy {
  max-width: min(92%, 560px);
  font-size: clamp(22px, 1.85vw, 31px);
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: clamp(0.012em, 0.06vw, 0.028em);
  margin: 12px auto 0;
  text-align: left;
  text-shadow: none;
  -webkit-text-stroke: 0 transparent;
}

.character-tabs {
  margin-top: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
}

.character-tab-viewport {
  overflow: hidden;
  position: relative;
  flex: 0 1 auto;
  max-width: 100%;
}

.character-tab-track {
  display: flex;
  align-items: flex-end;
  width: max-content;
  will-change: transform;
  transform: translateX(0);
}

.character-tab-track .char-tab-image {
  flex: 0 0 auto;
}

.char-tab-clone {
  pointer-events: none;
}

.char-tab-image,
.char-arrow-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.char-arrow-btn {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(clamp(16px, 1.9vw, 28px));
}

.luffy-tab img {
  width: clamp(190px, 18.4vw, 238px);
}

.solo-tab img {
  width: clamp(204px, 19.6vw, 252px);
}

.nami-tab img {
  width: clamp(186px, 17.9vw, 232px);
}

.char-arrow-btn img {
  width: clamp(26px, 2.4vw, 38px);
}

.char-tab-image {
  opacity: 0.93;
}

.char-tab-image.is-active,
.char-tab-image:hover,
.char-tab-image:focus-visible {
  opacity: 1;
}

/* Right-side hero character image */
.character-right {
  flex: 0 0 38%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  padding-right: clamp(0px, 0.8vw, 14px);
}

.character-silhouette {
  width: min(100%, 560px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  margin: 0 auto -2px;
}

/* Mid-to-large desktop refinements */
@media (max-width: 1599px) and (min-width: 1201px) {
  .bg-page-3 {
    background-size: cover;
    background-position: 62% center;
  }

  #character .section-content {
    width: min(96vw, 1320px);
    padding-top: 16px;
    padding-bottom: 0;
  }

  .character-left {
    flex: 0 0 60%;
    padding-left: 16px;
    padding-bottom: 0;
  }

  .character-title-image img {
    width: min(100%, 980px);
  }

  .character-nameplate img {
    width: clamp(360px, 33vw, 560px);
  }

  .character-copy {
    max-width: min(92%, 540px);
    font-size: clamp(20px, 1.55vw, 28px);
  }

  .character-tabs {
    margin-top: 18px;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .luffy-tab img {
    width: clamp(162px, 11.6vw, 198px);
  }

  .solo-tab img {
    width: clamp(176px, 12.4vw, 214px);
  }

  .nami-tab img {
    width: clamp(160px, 11.3vw, 196px);
  }

  .char-arrow-btn img {
    width: clamp(24px, 1.8vw, 34px);
  }

  .char-arrow-btn {
    transform: translateY(clamp(12px, 1.2vw, 20px));
  }

  .character-right {
    flex: 0 0 40%;
    justify-content: center;
  }

  .character-silhouette {
    width: min(100%, 580px);
  }
}

/* Tablet refinements */
@media (max-width: 1200px) and (min-width: 901px) {
  .bg-page-3 {
    background-size: cover;
    background-position: 60% center;
  }

  #character .section-content {
    width: min(96vw, 1040px);
    padding-top: 6px;
    padding-bottom: 0;
  }

  .character-left {
    flex: 0 0 58%;
    padding-left: 6px;
    padding-bottom: 0;
  }

  .character-title-image {
    margin-top: 4px;
  }

  .character-title-image img {
    width: min(100%, 860px);
  }

  .character-nameplate img {
    width: clamp(320px, 36vw, 500px);
  }

  .character-copy {
    max-width: min(92%, 470px);
    font-size: clamp(18px, 1.85vw, 24px);
  }

  .character-tabs {
    margin-top: 10px;
    gap: 6px;
  }

  .luffy-tab img {
    width: clamp(150px, 15.2vw, 188px);
  }

  .solo-tab img {
    width: clamp(162px, 16.4vw, 202px);
  }

  .nami-tab img {
    width: clamp(148px, 15vw, 184px);
  }

  .char-arrow-btn img {
    width: clamp(22px, 2.2vw, 30px);
  }

  .char-arrow-btn {
    transform: translateY(clamp(12px, 1.4vw, 18px));
  }

  .character-right {
    flex: 0 0 42%;
    justify-content: flex-end;
    padding-right: 0;
  }

  .character-silhouette {
    width: min(112%, 500px);
    max-width: none;
    max-height: calc(100% - 4px);
    margin: 0 -4px -2px auto;
  }
}

/* Large desktop refinements */
@media (min-width: 1600px) {
  #character .section-content {
    width: min(96vw, 1800px);
    padding-top: 24px;
    padding-bottom: 0;
  }

  .character-left {
    padding-left: 54px;
    padding-top: 8px;
    padding-bottom: 0;
  }

  .character-title-image img {
    width: min(100%, 1220px);
  }

  .character-title-image {
    margin-top: 20px;
  }

  .character-nameplate img {
    width: 760px;
  }

  .character-copy {
    max-width: 760px;
    font-size: clamp(28px, 1.85vw, 36px);
    margin-top: 24px;
  }

  .character-tabs {
    margin-top: 40px;
    gap: 12px;
  }

  .luffy-tab img {
    width: 320px;
  }

  .solo-tab img {
    width: 342px;
  }

  .nami-tab img {
    width: 312px;
  }

  .char-arrow-btn img {
    width: 42px;
  }

  .char-arrow-btn {
    transform: translateY(30px);
  }

  .character-silhouette {
    width: min(100%, 700px);
  }
}

/* Mobile layout */
@media (max-width: 900px) {
  #character .section-content {
    padding-top: 24px;
    padding-bottom: 0;
  }

  .character-layout {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .character-left {
    width: 100%;
    flex: none;
    padding: 0;
  }

  .character-title-image img {
    width: min(96vw, 700px);
    margin: 0 auto;
  }

  .character-title-image {
    margin-top: 10px;
  }

  .character-copy {
    max-width: min(92vw, 500px);
    font-size: clamp(18px, 4.5vw, 24px);
    letter-spacing: clamp(0.01em, 0.28vw, 0.024em);
    line-height: 1.3;
    margin-left: auto;
    margin-right: auto;
  }

  .character-tabs {
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(2px, 1vw, 8px);
    width: 100%;
  }

  .character-nameplate img {
    width: min(92vw, 520px);
  }

  .luffy-tab img {
    width: clamp(82px, 22vw, 170px);
  }

  .solo-tab img {
    width: clamp(88px, 23vw, 180px);
  }

  .nami-tab img {
    width: clamp(82px, 22vw, 168px);
  }

  .char-arrow-btn img {
    width: clamp(16px, 4.8vw, 28px);
  }

  .char-arrow-btn {
    transform: translateY(0);
  }

  .character-right {
    width: min(90vw, 480px);
    flex: none;
    justify-content: center;
    align-self: center;
    height: auto;
    margin-bottom: 0;
  }

  .character-silhouette {
    width: 100%;
    max-width: none;
    height: auto;
    margin-bottom: 0;
    object-position: center bottom;
  }
}

/* Small phone tab scaling */
@media (max-width: 620px) {
  .character-copy {
    font-size: clamp(17px, 5vw, 22px);
    letter-spacing: 0.02em;
  }

  .character-tabs {
    gap: clamp(2px, 0.9vw, 6px);
  }

  .luffy-tab img {
    width: clamp(72px, 21vw, 130px);
  }

  .solo-tab img {
    width: clamp(76px, 22vw, 138px);
  }

  .nami-tab img {
    width: clamp(70px, 20.5vw, 126px);
  }

  .char-arrow-btn img {
    width: clamp(14px, 4.5vw, 22px);
  }
}

/* Main-site compact pass: Section 3 */
#character .section-content {
  width: min(calc(96vw * var(--compact-ui)), calc(1180px * var(--compact-ui)));
  padding-top: calc(18px * var(--compact-space));
}

.character-left {
  padding-left: calc(12px * var(--compact-space));
  padding-top: calc(8px * var(--compact-space));
}

.character-title-image {
  margin-top: calc(14px * var(--compact-space));
}

.character-title-image img {
  width: min(100%, calc(1100px * var(--compact-ui)));
}

.character-nameplate {
  margin-top: calc(8px * var(--compact-space));
}

.character-nameplate img {
  width: clamp(
    calc(420px * var(--compact-ui)),
    calc(45vw * var(--compact-ui)),
    calc(620px * var(--compact-ui))
  );
}

.character-copy {
  max-width: min(92%, calc(560px * var(--compact-ui)));
  font-size: clamp(
    calc(22px * var(--compact-type)),
    calc(1.85vw * var(--compact-type)),
    calc(31px * var(--compact-type))
  );
  margin-top: calc(12px * var(--compact-space));
}

.character-tabs {
  margin-top: calc(22px * var(--compact-space));
  gap: calc(10px * var(--compact-space));
}

.luffy-tab img {
  width: clamp(
    calc(190px * var(--compact-ui)),
    calc(18.4vw * var(--compact-ui)),
    calc(238px * var(--compact-ui))
  );
}

.solo-tab img {
  width: clamp(
    calc(204px * var(--compact-ui)),
    calc(19.6vw * var(--compact-ui)),
    calc(252px * var(--compact-ui))
  );
}

.nami-tab img {
  width: clamp(
    calc(186px * var(--compact-ui)),
    calc(17.9vw * var(--compact-ui)),
    calc(232px * var(--compact-ui))
  );
}

.char-arrow-btn img {
  width: clamp(
    calc(26px * var(--compact-ui)),
    calc(2.4vw * var(--compact-ui)),
    calc(38px * var(--compact-ui))
  );
}

.char-arrow-btn {
  transform: translateY(
    clamp(
      calc(16px * var(--compact-space)),
      calc(1.9vw * var(--compact-space)),
      calc(28px * var(--compact-space))
    )
  );
}

.character-right {
  padding-right: clamp(
    0px,
    calc(0.8vw * var(--compact-space)),
    calc(14px * var(--compact-space))
  );
}

.character-silhouette {
  width: min(100%, calc(560px * var(--compact-ui)));
}

@media (max-width: 1599px) and (min-width: 1201px) {
  #character .section-content {
    width: min(calc(96vw * var(--compact-ui)), calc(1320px * var(--compact-ui)));
    padding-top: calc(16px * var(--compact-space));
  }

  .character-left {
    padding-left: calc(16px * var(--compact-space));
  }

  .character-title-image img {
    width: min(100%, calc(980px * var(--compact-ui)));
  }

  .character-nameplate img {
    width: clamp(
      calc(360px * var(--compact-ui)),
      calc(33vw * var(--compact-ui)),
      calc(560px * var(--compact-ui))
    );
  }

  .character-copy {
    max-width: min(92%, calc(540px * var(--compact-ui)));
    font-size: clamp(
      calc(20px * var(--compact-type)),
      calc(1.55vw * var(--compact-type)),
      calc(28px * var(--compact-type))
    );
  }

  .character-tabs {
    margin-top: calc(18px * var(--compact-space));
    gap: calc(8px * var(--compact-space));
  }

  .luffy-tab img {
    width: clamp(
      calc(162px * var(--compact-ui)),
      calc(11.6vw * var(--compact-ui)),
      calc(198px * var(--compact-ui))
    );
  }

  .solo-tab img {
    width: clamp(
      calc(176px * var(--compact-ui)),
      calc(12.4vw * var(--compact-ui)),
      calc(214px * var(--compact-ui))
    );
  }

  .nami-tab img {
    width: clamp(
      calc(160px * var(--compact-ui)),
      calc(11.3vw * var(--compact-ui)),
      calc(196px * var(--compact-ui))
    );
  }

  .char-arrow-btn img {
    width: clamp(
      calc(24px * var(--compact-ui)),
      calc(1.8vw * var(--compact-ui)),
      calc(34px * var(--compact-ui))
    );
  }

  .char-arrow-btn {
    transform: translateY(
      clamp(
        calc(12px * var(--compact-space)),
        calc(1.2vw * var(--compact-space)),
        calc(20px * var(--compact-space))
      )
    );
  }

  .character-silhouette {
    width: min(100%, calc(580px * var(--compact-ui)));
  }
}

@media (max-width: 1200px) and (min-width: 901px) {
  #character .section-content {
    width: min(calc(96vw * var(--compact-ui)), calc(1040px * var(--compact-ui)));
    padding-top: calc(6px * var(--compact-space));
  }

  .character-left {
    padding-left: calc(6px * var(--compact-space));
  }

  .character-title-image {
    margin-top: calc(4px * var(--compact-space));
  }

  .character-title-image img {
    width: min(100%, calc(860px * var(--compact-ui)));
  }

  .character-nameplate img {
    width: clamp(
      calc(320px * var(--compact-ui)),
      calc(36vw * var(--compact-ui)),
      calc(500px * var(--compact-ui))
    );
  }

  .character-copy {
    max-width: min(92%, calc(470px * var(--compact-ui)));
    font-size: clamp(
      calc(18px * var(--compact-type)),
      calc(1.85vw * var(--compact-type)),
      calc(24px * var(--compact-type))
    );
  }

  .character-tabs {
    margin-top: calc(10px * var(--compact-space));
    gap: calc(6px * var(--compact-space));
  }

  .luffy-tab img {
    width: clamp(
      calc(150px * var(--compact-ui)),
      calc(15.2vw * var(--compact-ui)),
      calc(188px * var(--compact-ui))
    );
  }

  .solo-tab img {
    width: clamp(
      calc(162px * var(--compact-ui)),
      calc(16.4vw * var(--compact-ui)),
      calc(202px * var(--compact-ui))
    );
  }

  .nami-tab img {
    width: clamp(
      calc(148px * var(--compact-ui)),
      calc(15vw * var(--compact-ui)),
      calc(184px * var(--compact-ui))
    );
  }

  .char-arrow-btn img {
    width: clamp(
      calc(22px * var(--compact-ui)),
      calc(2.2vw * var(--compact-ui)),
      calc(30px * var(--compact-ui))
    );
  }

  .char-arrow-btn {
    transform: translateY(
      clamp(
        calc(12px * var(--compact-space)),
        calc(1.4vw * var(--compact-space)),
        calc(18px * var(--compact-space))
      )
    );
  }

  .character-silhouette {
    width: min(112%, calc(500px * var(--compact-ui)));
  }
}

@media (min-width: 1600px) {
  #character .section-content {
    width: min(calc(96vw * var(--compact-ui)), calc(1800px * var(--compact-ui)));
    padding-top: calc(24px * var(--compact-space));
  }

  .character-left {
    padding-left: calc(54px * var(--compact-space));
    padding-top: calc(8px * var(--compact-space));
  }

  .character-title-image {
    margin-top: calc(20px * var(--compact-space));
  }

  .character-title-image img {
    width: min(100%, calc(1220px * var(--compact-ui)));
  }

  .character-nameplate img {
    width: calc(760px * var(--compact-ui));
  }

  .character-copy {
    max-width: calc(760px * var(--compact-ui));
    font-size: clamp(
      calc(28px * var(--compact-type)),
      calc(1.85vw * var(--compact-type)),
      calc(36px * var(--compact-type))
    );
    margin-top: calc(24px * var(--compact-space));
  }

  .character-tabs {
    margin-top: calc(40px * var(--compact-space));
    gap: calc(12px * var(--compact-space));
  }

  .luffy-tab img {
    width: calc(320px * var(--compact-ui));
  }

  .solo-tab img {
    width: calc(342px * var(--compact-ui));
  }

  .nami-tab img {
    width: calc(312px * var(--compact-ui));
  }

  .char-arrow-btn img {
    width: calc(42px * var(--compact-ui));
  }

  .char-arrow-btn {
    transform: translateY(calc(30px * var(--compact-space)));
  }

  .character-silhouette {
    width: min(100%, calc(700px * var(--compact-ui)));
  }
}

@media (max-width: 900px) {
  #character .section-content {
    padding-top: calc(24px * var(--compact-space));
  }

  .character-layout {
    gap: calc(10px * var(--compact-space));
  }

  .character-title-image {
    margin-top: calc(10px * var(--compact-space));
  }

  .character-title-image img {
    width: min(calc(96vw * var(--compact-ui)), calc(560px * var(--compact-ui)));
  }

  .character-nameplate img {
    width: min(calc(92vw * var(--compact-ui)), calc(520px * var(--compact-ui)));
  }

  .character-copy {
    max-width: min(calc(92vw * var(--compact-ui)), calc(500px * var(--compact-ui)));
    font-size: clamp(
      calc(20px * var(--compact-type)),
      calc(4.9vw * var(--compact-type)),
      calc(27px * var(--compact-type))
    );
  }

  .character-tabs {
    gap: clamp(
      calc(2px * var(--compact-space)),
      calc(1vw * var(--compact-space)),
      calc(8px * var(--compact-space))
    );
  }

  .luffy-tab img {
    width: clamp(
      calc(82px * var(--compact-ui)),
      calc(22vw * var(--compact-ui)),
      calc(170px * var(--compact-ui))
    );
  }

  .solo-tab img {
    width: clamp(
      calc(88px * var(--compact-ui)),
      calc(23vw * var(--compact-ui)),
      calc(180px * var(--compact-ui))
    );
  }

  .nami-tab img {
    width: clamp(
      calc(82px * var(--compact-ui)),
      calc(22vw * var(--compact-ui)),
      calc(168px * var(--compact-ui))
    );
  }

  .char-arrow-btn img {
    width: clamp(
      calc(16px * var(--compact-ui)),
      calc(4.8vw * var(--compact-ui)),
      calc(28px * var(--compact-ui))
    );
  }

  .character-right {
    width: min(calc(90vw * var(--compact-ui)), calc(480px * var(--compact-ui)));
  }
}

@media (max-width: 620px) {
  .character-copy {
    font-size: clamp(
      calc(19px * var(--compact-type)),
      calc(5.3vw * var(--compact-type)),
      calc(24px * var(--compact-type))
    );
  }

  .character-tabs {
    gap: clamp(
      calc(2px * var(--compact-space)),
      calc(0.9vw * var(--compact-space)),
      calc(6px * var(--compact-space))
    );
  }

  .luffy-tab img {
    width: clamp(
      calc(72px * var(--compact-ui)),
      calc(21vw * var(--compact-ui)),
      calc(130px * var(--compact-ui))
    );
  }

  .solo-tab img {
    width: clamp(
      calc(76px * var(--compact-ui)),
      calc(22vw * var(--compact-ui)),
      calc(138px * var(--compact-ui))
    );
  }

  .nami-tab img {
    width: clamp(
      calc(70px * var(--compact-ui)),
      calc(20.5vw * var(--compact-ui)),
      calc(126px * var(--compact-ui))
    );
  }

  .char-arrow-btn img {
    width: clamp(
      calc(14px * var(--compact-ui)),
      calc(4.5vw * var(--compact-ui)),
      calc(22px * var(--compact-ui))
    );
  }
}

/* Final safeguard: all main sections remain strict viewport-height */
.bg-page-1,
.bg-page-2,
.bg-page-3 {
  height: var(--section-screen-height);
  min-height: var(--section-screen-height);
}

/* Section 3 visual match overrides (reference alignment) */
@media (max-width: 1200px) and (min-width: 901px) {
  #character .section-content {
    width: min(96vw, 1140px);
    padding-top: 10px;
  }

  .character-layout {
    align-items: flex-end;
  }

  .character-left {
    flex: 0 0 54%;
    padding-left: 10px;
    padding-top: 2px;
    align-self: flex-start;
  }

  .character-right {
    flex: 0 0 46%;
    justify-content: flex-end;
    padding-right: 0;
  }

  .character-title-image {
    margin-top: 2px;
  }

  .character-title-image img {
    width: min(100%, 799px);
  }

  .character-nameplate img {
    width: clamp(380px, 42vw, 580px);
  }

  .character-copy {
    max-width: min(96%, 560px);
    font-size: clamp(21px, 2.2vw, 30px);
    line-height: 1.28;
    margin-top: 12px;
  }

  .character-tabs {
    margin-top: 18px;
    gap: 8px;
  }

  .luffy-tab img {
    width: clamp(164px, 16.2vw, 206px);
  }

  .solo-tab img {
    width: clamp(176px, 17.4vw, 220px);
  }

  .nami-tab img {
    width: clamp(160px, 15.8vw, 200px);
  }

  .char-arrow-btn img {
    width: clamp(24px, 2.4vw, 32px);
  }

  .character-silhouette {
    width: min(124%, 620px);
    max-width: none;
    max-height: calc(100% - 2px);
    object-position: right bottom;
    margin: 0 -16px -4px auto;
  }
}

@media (max-width: 1599px) and (min-width: 1201px) {
  #character .section-content {
    width: min(96vw, 1420px);
    padding-top: 18px;
  }

  .character-layout {
    align-items: flex-end;
  }

  .character-left {
    flex: 0 0 56%;
    padding-left: 22px;
    padding-top: 4px;
    align-self: flex-start;
  }

  .character-right {
    flex: 0 0 44%;
    justify-content: flex-end;
    padding-right: 0;
  }

  .character-title-image {
    margin-top: 4px;
  }

  .character-title-image img {
    width: min(100%, 595px);
  }

  .character-nameplate img {
    width: clamp(420px, 36vw, 640px);
  }

  .character-copy {
    max-width: min(96%, 640px);
    font-size: clamp(24px, 1.9vw, 34px);
    line-height: 1.28;
    margin-top: 14px;
  }

  .character-tabs {
    margin-top: 24px;
    gap: 10px;
  }

  .luffy-tab img {
    width: clamp(178px, 13.3vw, 220px);
  }

  .solo-tab img {
    width: clamp(190px, 14.2vw, 236px);
  }

  .nami-tab img {
    width: clamp(174px, 13.1vw, 214px);
  }

  .char-arrow-btn img {
    width: clamp(26px, 2vw, 36px);
  }

  .character-silhouette {
    width: min(125%, 760px);
    max-width: none;
    max-height: calc(100% - 2px);
    object-position: right bottom;
    margin: 0 -20px -4px auto;
  }
}

@media (max-width: 1400px) and (min-width: 1201px) {
  .character-silhouette {
    width: min(93.75%, 570px);
  }
}

@media (min-width: 1600px) {
  #character .section-content {
    width: min(96vw, 1840px);
    padding-top: 20px;
  }

  .character-layout {
    align-items: flex-end;
  }

  .character-left {
    flex: 0 0 55%;
    padding-left: 48px;
    padding-top: 6px;
    align-self: flex-start;
  }

  .character-title-image {
    margin-top: 6px;
  }
  

  .character-right {
    flex: 0 0 45%;
    justify-content: flex-end;
  }

  .character-title-image img {
    width: min(100%, 680px);
  }

  .character-nameplate img {
    width: min(100%, 820px);
  }

  .character-copy {
    max-width: 820px;
    font-size: clamp(32px, 2.05vw, 42px);
    line-height: 1.24;
  }

  .character-tabs {
    margin-top: 34px;
  }

  .character-silhouette {
    width: min(120%, 860px);
    max-width: none;
    margin: 0 -26px -6px auto;
    object-position: right bottom;
  }
}

/* Carousel control reliability: keep arrows above cards so both stay clickable */
.character-tabs {
  position: relative;
  isolation: isolate;
}

.character-tab-viewport {
  position: relative;
  z-index: 1;
}

.char-arrow-btn {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .character-tabs {
    gap: clamp(8px, 2vw, 16px);
  }

  .char-arrow-btn {
    min-width: clamp(24px, 7.2vw, 38px);
    min-height: clamp(30px, 8.8vw, 44px);
  }
}

/* Sanji downscale for <=1200: about 80% of previous size */
@media (max-width: 1200px) and (min-width: 901px) {
  .character-silhouette {
    width: min(100%, 496px);
  }
}

@media (max-width: 900px) {
  .character-right {
    width: min(72vw, 384px);
  }
}

/* Final layout lock: Section 3 desktop centering + strict downscale */
@media (min-width: 901px) {
  #character .section-content {
    width: min(96vw, 1600px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }

  .character-layout {
    align-items: center;
    justify-content: center;
    gap: clamp(15px, 1.8vw, 24px);
    height: 100%;
  }

  .character-left {
    flex: 0 0 54%;
    padding: 0;
    align-self: center;
  }

  .character-title-image {
    margin: 0 auto;
  }

  .character-title-image img {
    width: min(100%, 504px);
    margin: 0 auto;
  }

  .character-nameplate {
    margin: 9px auto 0;
  }

  .character-nameplate img {
    width: clamp(270px, 30vw, 420px);
  }

  .character-copy {
    max-width: min(100%, 520px);
    font-size: clamp(20px, 1.75vw, 28px);
    line-height: 1.32;
    letter-spacing: 0.02em;
    text-align: center;
    margin: 12px auto 0;
  }

  .character-tabs {
    margin-top: 15px;
    justify-content: center;
    gap: clamp(6px, 0.75vw, 12px);
  }

  .luffy-tab img {
    width: clamp(123px, 10.5vw, 168px);
  }

  .solo-tab img {
    width: clamp(129px, 11.1vw, 177px);
  }

  .nami-tab img {
    width: clamp(120px, 10.2vw, 165px);
  }

  .char-arrow-btn {
    transform: translateY(0);
  }

  .char-arrow-btn img {
    width: clamp(21px, 1.8vw, 30px);
  }

  .character-right {
    flex: 0 0 48%;
    align-self: stretch;
    justify-content: center;
    align-items: flex-end;
    padding-right: 0;
    min-height: 0;
    height: 100%;
  }

  .character-silhouette {
    width: min(100%, 540px);
    max-width: 540px;
    max-height: min(86vh, 720px);
    object-position: center bottom;
    margin: 0 auto -1px;
  }
}

@media (min-width: 1600px) {
  .character-title-image img {
    width: min(100%, 560px);
  }

  .character-nameplate img {
    width: clamp(315px, 24vw, 480px);
  }

  .character-copy {
    max-width: 560px;
    font-size: clamp(23px, 1.35vw, 32px);
  }

  .character-silhouette {
    width: min(100%, 620px);
    max-width: 620px;
  }
}

/* Final mobile whitespace cleanup for Section 2 and Section 3 */
@media (max-width: 900px) {
  .bg-page-2,
  .bg-page-3 {
    height: auto;
    min-height: 0;
  }

  #game-guide .section-content {
    padding-top: 14px;
    padding-bottom: 8px;
  }

  .feature-title-image {
    margin-top: 8px;
  }

  .feature-stage {
    margin-top: 4px;
    gap: 6px;
  }

  .feature-detail-image {
    margin-top: 8px;
  }

  .feature-portrait {
    margin-top: clamp(18px, 4.5vw, 28px);
    width: min(66vw, 280px);
  }

  #character .section-content {
    padding-top: 10px;
    padding-bottom: 0;
  }

  .character-layout {
    gap: 4px;
  }

  .character-title-image {
    margin-top: 4px;
  }

  .character-nameplate {
    margin-top: 4px;
  }

  .character-copy {
    margin-top: 6px;
    line-height: 1.28;
  }

  .character-tabs {
    margin-top: 8px;
    gap: clamp(6px, 1.8vw, 12px);
  }

  .character-right {
    width: min(72vw, 384px);
    margin-top: 0;
    margin-bottom: -4px;
  }

  .character-silhouette {
    width: 100%;
    max-width: none;
    margin: 0 auto -6px;
  }
}