/* =========================================================
   PASTEL PINK YUMESHIP TMI — main.css
   Responsive • Apple + WUXGA 16:10 support • no JS
   ========================================================= */

/* ─── CUSTOM PROPERTIES ─── */
:root {
  --bg: #ffe9f3;
  --bg2: #ffd4e6;
  --card: #fff7fb;
  --card2: #ffffff;
  --ink: #3b2a33;
  --muted: #7b5f6f;
  --line: #f3b7d2;
  --shadow: 0 12px 34px rgba(59, 42, 51, .16);
  --accent: #ff6fb1;
  --accent2: #ffb74d;
  --accent3: #ffd166;
  --good: #53c79d;
  --warn: #ffb24a;
  --bad: #ff5a7a;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ─── RESET ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  background: linear-gradient(135deg, var(--bg), var(--bg2));
  min-height: 100vh;
  padding: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  background: #fff;
  padding: 2px 6px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.9em;
}

b {
  font-weight: 700;
}

/* ─── CONTAINER ─── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

/* ─── OUTER FRAME ─── */
.ship-frame {
  background: linear-gradient(135deg, var(--bg), var(--bg2));
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 18px;
  overflow: hidden;
}

/* ─── TOP BAR ─── */
.topbar {
  padding: 16px 16px 12px;
  background:
    radial-gradient(circle at 15% 35%, rgba(255, 255, 255, .85) 0 18px, transparent 19px),
    radial-gradient(circle at 85% 30%, rgba(255, 255, 255, .75) 0 14px, transparent 15px),
    linear-gradient(90deg, rgba(255, 255, 255, .65), rgba(255, 225, 190, .35));
  border-bottom: 2px solid var(--line);
}

.topbar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 8px 16px rgba(255, 111, 177, .25);
  cursor: pointer;
  transition: transform .2s;
}

.topbar-icon:hover {
  transform: scale(1.15);
}

.topbar-title {
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 14px;
}

.topbar-subtitle {
  font-size: 12px;
  color: var(--muted);
}

.topbar-meta {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.ribbon {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.ribbon-tag {
  padding: 7px 14px;
  border: 2px dashed rgba(255, 111, 177, .55);
  background: rgba(255, 255, 255, .55);
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .4px;
  text-align: center;
}

/* ─── MAIN GRID ─── */
.ship-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 14px;
}

/* ─── COLUMN CARDS ─── */
.col-card {
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 2px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.col-card-header {
  padding: 12px 12px 10px;
  border-bottom: 2px solid var(--line);
  background: rgba(255, 255, 255, .55);
}

.col-card-header h2 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 1em;
}

.col-card-header small {
  font-size: 12px;
  color: var(--muted);
}

.col-card-body {
  padding: 12px;
}

/* ─── IMAGE PLACEHOLDER ─── */
.img-placeholder {
  height: 190px;
  border: 2px dashed rgba(255, 111, 177, .55);
  border-radius: 14px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 111, 177, .10) 0 10px, rgba(255, 255, 255, .55) 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  overflow: hidden;
}

.img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.img-placeholder strong {
  font-weight: 900;
}

.img-placeholder small {
  font-size: 12px;
  color: var(--muted);
}

/* ─── PROFILE ROW ─── */
.profile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.profile-img {
  flex: 1 1 170px;
  min-width: 170px;
}

.profile-stats {
  flex: 1 1 170px;
  min-width: 170px;
}

/* ─── STAT CARD ─── */
.stat-card {
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 10px;
}

.stat-field {
  display: grid;
  gap: 8px;
}

.stat-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.stat-label {
  min-width: 86px;
  font-weight: 900;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
}

.stat-value {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
}

/* ─── TAGS ─── */
.tag-list {
  border: 2px dashed rgba(255, 111, 177, .55);
  border-radius: 14px;
  background: rgba(255, 255, 255, .75);
  padding: 10px;
}

.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  margin: 3px;
  font-size: 0.9em;
}

/* ─── SLIDERS ─── */
.sliders {
  display: grid;
  gap: 10px;
}

.slider-box {
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 10px;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-weight: 900;
  font-size: 12px;
}

.slider-track {
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  overflow: hidden;
  margin-top: 6px;
}

.slider-fill {
  height: 100%;
  border-radius: 999px;
}

.slider-fill--accent { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.slider-fill--accent2 { background: linear-gradient(90deg, var(--accent2), var(--accent3)); }
.slider-fill--mix { background: linear-gradient(90deg, var(--accent), var(--accent3)); }
.slider-fill--reverse { background: linear-gradient(90deg, var(--accent3), var(--accent2)); }
.slider-fill--alt { background: linear-gradient(90deg, var(--accent3), var(--accent)); }

.slider-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

/* ─── CONTENT BLOCK ─── */
.content-block {
  border: 2px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .8);
  padding: 12px;
}

.content-block h3 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 0.95em;
}

.content-block small {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

/* ─── GREEN / RED BOXES ─── */
.box-good {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 8px;
  font-size: 0.92em;
}

.box-good b:first-child {
  color: var(--good);
}

.box-bad {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 8px;
  font-size: 0.92em;
}

.box-bad b:first-child {
  color: var(--bad);
}

/* ─── SHIP SUMMARY ─── */
.ship-summary {
  border: 2px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 12px;
}

.ship-name {
  font-size: 16px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: .4px;
}

.diff-row {
  display: flex;
  gap: 8px;
}

.diff-col {
  flex: 1;
}

.diff-label {
  font-weight: 900;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
}

.diff-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 8px;
}

/* ─── CHECKBOX ─── */
.checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: var(--card);
  flex-shrink: 0;
}

/* ─── DASHED DIVIDER ─── */
.dashed-divider {
  border-top: 1px dashed rgba(255, 111, 177, .55);
  margin: 4px 0;
  padding-top: 10px;
}

/* ─── TEXTAREA BLOCK ─── */
.textarea-block {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 10px;
  min-height: 90px;
}

/* ─── AESTHETIC GRID ─── */
.aesthetic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.aesthetic-cell {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 2px dashed rgba(255, 111, 177, .55);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  overflow: hidden;
}

.aesthetic-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

/* ─── PLAYLIST ─── */
.playlist-player {
  border: 2px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 111, 177, .12), rgba(255, 255, 255, .85));
  padding: 12px;
}

.playlist-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.playlist-btn {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--ink);
  font-family: inherit;
}

.playlist-btn--play {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}

.playlist-progress {
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  overflow: hidden;
}

.playlist-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
}

.playlist-times {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

/* ─── SONG LIST ─── */
.song-list {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 10px;
  line-height: 1.8;
}

/* ─── PROMPTS ─── */
.prompts {
  display: grid;
  gap: 8px;
}

.prompt {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 10px;
}

/* ─── FOOTER ─── */
.ship-footer {
  padding: 12px 14px;
  border-top: 2px solid var(--line);
  background: rgba(255, 255, 255, .6);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

/* ─── iPhone SE / 5s (320px) ─── */
@media only screen and (max-width: 374px) {
  body { padding: 6px; }
  .ship-grid { gap: 8px; padding: 8px; }

  .topbar { padding: 10px 8px 8px; }
  .topbar-title { font-size: 11px; }
  .topbar-meta { font-size: 10px; text-align: left; }

  .stat-label { min-width: 64px; font-size: 10px; }
  .stat-value { font-size: 0.85em; padding: 4px 6px; }

  .img-placeholder { height: 140px; }
  .slider-labels { font-size: 10px; }

  .profile-row { gap: 8px; }
  .profile-img, .profile-stats { min-width: 130px; }

  .aesthetic-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .playlist-btn { width: 28px; height: 28px; border-radius: 10px; }
  .playlist-btn--play { width: 36px; height: 36px; border-radius: 14px; }
}

/* ─── iPhone 6/7/8/SE2/SE3 (375px) ─── */
@media only screen and (min-width: 375px) and (max-width: 413px) {
  body { padding: 8px; }
  .img-placeholder { height: 160px; }
}

/* ─── iPhone 12/13/14/15 (390px) ─── */
@media only screen and (min-width: 390px) and (max-width: 393px) {
  body { padding: 10px; }
}

/* ─── iPhone 14 Pro / 15 Pro (393px) ─── */
@media only screen and (min-width: 393px) and (max-width: 429px) {
  body { padding: 10px; }
}

/* ─── iPhone 12/13/14/15 Pro Max (430px) ─── */
@media only screen and (min-width: 430px) and (max-width: 479px) {
  body { padding: 12px; }
}

/* ─── Small phone to tablet gap (480px) ─── */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .aesthetic-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── iPad Mini portrait (744px) ─── */
@media only screen and (min-width: 744px) and (max-width: 767px) {
  body { padding: 14px; }
  .ship-grid { gap: 12px; padding: 12px; }
}

/* ─── iPad portrait (768px-834px) ─── */
@media only screen and (min-width: 768px) and (max-width: 834px) {
  body { padding: 16px; }

  .ship-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ship-core {
    grid-column: 1 / -1;
  }

  .extras-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* ─── iPad Pro 11" portrait to landscape (834-1024px) ─── */
@media only screen and (min-width: 835px) and (max-width: 1024px) {
  .ship-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ship-core {
    grid-column: 1 / -1;
  }
}

/* ─── Standard desktop (1025px-1279px) ─── */
@media only screen and (min-width: 1025px) {
  .ship-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ship-core {
    grid-column: 1 / -1;
  }

  .extras-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column: 1 / -1;
  }

  .ship-core-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ship-core-inner .ship-summary,
  .ship-core-inner .content-block {
    grid-column: 1 / -1;
  }
}

/* ─── WUXGA 16:10 (1200px+) ─── optimized for 1920×1200 ─── */
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1400px;
  }

  .ship-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
  }

  /* Left column (You) */
  .ship-grid > *:nth-child(1) { grid-column: 1; }

  /* Center column (Ship Core) */
  .ship-grid > *:nth-child(2) { grid-column: 2; }

  /* Right column (F/O) */
  .ship-grid > *:nth-child(3) { grid-column: 3; }

  /* Bottom extras span all columns */
  .ship-grid > *:nth-child(4) { grid-column: 1 / -1; }

  .ship-core-inner {
    display: block;
  }

  .extras-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .profile-row {
    flex-direction: column;
  }

  .profile-img,
  .profile-stats {
    min-width: 0;
    flex: 1;
  }

  .img-placeholder {
    height: 200px;
  }
}

/* ─── Ultra-wide / WUXGA+ (1600px+) ─── */
@media only screen and (min-width: 1600px) {
  .container {
    max-width: 1600px;
  }

  .ship-grid {
    gap: 18px;
    padding: 18px;
  }

  .profile-row {
    gap: 14px;
  }

  .img-placeholder {
    height: 220px;
  }

  .topbar-title { font-size: 16px; }
  .topbar-meta { font-size: 13px; }
}


/* ═══════════════════════════════════════════════════════════
   APPLE DEVICE FIXES (Safari / iOS / WebKit)
   ═══════════════════════════════════════════════════════════ */

/* Retina (2x+) */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  /* ensure crisp rendering */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Safari-only fixes */
@supports (-webkit-touch-callout: none) {
  .slider-track { overflow: hidden; }
  .img-placeholder img,
  .aesthetic-cell img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* iOS safe area support (notch devices) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* Prevent Safari overscroll bounce */
html {
  height: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100%;
}


/* ═══════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════ */

@media print {
  body { background: #fff; padding: 0; }
  .ship-frame { box-shadow: none; border: 1px solid #ccc; }
  .container { max-width: 100%; }
}