/* =========================================================================
   World Postcards — liquid-glass composer, FAB, shutter, and the standalone
   /postcard.php share-view page. Inherits apple.css tokens (--hud-glass,
   --apple-accent, --hud-hairline, --apple-mono, etc). Light + dark aware,
   reduced-motion aware.
   ========================================================================= */

:root {
  --wpc-accent: var(--apple-accent, #0071e3);
  --wpc-amber: #fb923c;
  --wpc-blue: #38b2ff;
  --wpc-red: #f87171;
  --wpc-radius: 22px;
  --wpc-ease: cubic-bezier(.32, .72, 0, 1);
}

/* Per-mode accent applied to the composer panel + preview */
.wpc-panel[data-mode="creative"], .wpc-preview[data-mode="creative"] { --wpc-tint: var(--wpc-amber); }
.wpc-panel[data-mode="survival"], .wpc-preview[data-mode="survival"] { --wpc-tint: var(--wpc-red); }
.wpc-panel[data-mode="johto"],    .wpc-preview[data-mode="johto"]    { --wpc-tint: var(--wpc-blue); }

/* ----------------------------------------------------------------------- */
/* Floating action button                                                   */
/* ----------------------------------------------------------------------- */
.wpc-fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 1999990000; /* above in-game HUD, below the overlay */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px 11px 13px;
  border: 1px solid var(--hud-hairline, rgba(255,255,255,.14));
  border-radius: 999px;
  background: var(--hud-glass, rgba(22,22,23,.72));
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--apple-fg, #f5f5f7);
  font: 600 14px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .28s var(--wpc-ease), box-shadow .28s var(--wpc-ease), background .2s ease;
}
.wpc-fab svg { width: 19px; height: 19px; color: var(--wpc-amber); }
.wpc-fab:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.16); }
.wpc-fab:active { transform: translateY(0) scale(.98); }

/* ----------------------------------------------------------------------- */
/* Overlay + panel                                                          */
/* ----------------------------------------------------------------------- */
.wpc-overlay {
  position: fixed; inset: 0; z-index: 2000000000; /* above in-game HUD (9990) + FABs, below network-bar (2147483600) */
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.wpc-scrim {
  position: absolute; inset: 0; z-index: 0;
  background: rgba(6, 6, 10, .58);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  opacity: 0; transition: opacity .24s ease;
}
.wpc-overlay.is-open .wpc-scrim { opacity: 1; }

.wpc-panel {
  position: relative;
  z-index: 1; /* sit above .wpc-scrim for pointer events */
  width: min(680px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  border-radius: var(--wpc-radius);
  border: 1px solid var(--hud-hairline, rgba(255,255,255,.12));
  background: var(--hud-glass-strong, rgba(28,28,30,.9));
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  box-shadow: 0 40px 100px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
  padding: 18px;
  transform: translateY(14px) scale(.97);
  opacity: 0;
  transition: transform .34s var(--wpc-ease), opacity .26s ease;
}
.wpc-overlay.is-open .wpc-panel { transform: translateY(0) scale(1); opacity: 1; }

/* specular top edge tinted by mode */
.wpc-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--wpc-radius) var(--wpc-radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--wpc-tint, var(--wpc-amber)), transparent);
  opacity: .8;
}

/* Header */
.wpc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wpc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--apple-fg-soft, #aeaeb2);
  margin-right: auto;
}
.wpc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wpc-tint, var(--wpc-amber));
  box-shadow: 0 0 10px var(--wpc-tint, var(--wpc-amber));
}
.wpc-seg {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--hud-hairline, rgba(255,255,255,.1));
  background: var(--hud-glass-soft, rgba(28,28,30,.5));
}
.wpc-seg-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 6px 13px; border-radius: 999px;
  font: 600 12.5px/1 -apple-system, system-ui, sans-serif;
  color: var(--apple-fg-soft, #aeaeb2);
  background: transparent;
  transition: color .18s ease, background .18s ease;
}
.wpc-seg-btn.is-on {
  color: #fff;
  background: var(--wpc-tint, var(--wpc-amber));
  box-shadow: 0 2px 10px color-mix(in srgb, var(--wpc-tint, var(--wpc-amber)) 50%, transparent);
}
.wpc-close {
  appearance: none; border: 0; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 22px; line-height: 1;
  color: var(--apple-fg-soft, #aeaeb2);
  background: var(--hud-glass-soft, rgba(28,28,30,.5));
  border: 1px solid var(--hud-hairline, rgba(255,255,255,.08));
  transition: transform .18s ease, color .18s ease;
}
.wpc-close:hover { color: #fff; transform: rotate(90deg); }

/* ----------------------------------------------------------------------- */
/* Live preview (mirrors the server PNG)                                    */
/* ----------------------------------------------------------------------- */
.wpc-preview-wrap { margin-bottom: 16px; }
.wpc-preview {
  position: relative;
  aspect-ratio: 1200 / 630;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 10px;
  padding: clamp(14px, 3.2vw, 26px);
  color: #fff7ed;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(420px 320px at 88% 6%, color-mix(in srgb, var(--wpc-tint) 32%, transparent), transparent 70%),
    radial-gradient(300px 240px at 6% 38%, color-mix(in srgb, var(--wpc-tint) 16%, transparent), transparent 70%),
    linear-gradient(160deg, #1f1226, #150e22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.wpc-preview[data-mode="survival"] { background:
    radial-gradient(420px 320px at 88% 6%, color-mix(in srgb, var(--wpc-tint) 32%, transparent), transparent 70%),
    radial-gradient(300px 240px at 6% 38%, color-mix(in srgb, var(--wpc-tint) 16%, transparent), transparent 70%),
    linear-gradient(160deg, #1c0c0c, #120a14); }
.wpc-preview[data-mode="johto"] { background:
    radial-gradient(420px 320px at 88% 6%, color-mix(in srgb, var(--wpc-tint) 32%, transparent), transparent 70%),
    radial-gradient(300px 240px at 6% 38%, color-mix(in srgb, var(--wpc-tint) 16%, transparent), transparent 70%),
    linear-gradient(160deg, #0a1626, #0c1022); }

.wpc-pv-left { display: flex; flex-direction: column; min-width: 0; }
.wpc-pv-eyebrow {
  font: 700 clamp(8px, 1.7vw, 13px)/1 -apple-system, system-ui, sans-serif;
  letter-spacing: .06em; color: var(--wpc-tint);
}
.wpc-pv-eyebrow span { color: rgba(255,247,237,.6); font-weight: 500; }
.wpc-pv-title {
  font: 700 clamp(16px, 4.6vw, 38px)/1.04 -apple-system, system-ui, sans-serif;
  letter-spacing: -.02em; margin: clamp(6px, 1.6vw, 14px) 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wpc-pv-sub {
  font: 400 clamp(9px, 1.9vw, 15px)/1.32 -apple-system, system-ui, sans-serif;
  color: rgba(255,247,237,.62); margin-top: clamp(4px, 1vw, 9px);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wpc-pv-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.wpc-pv-pill {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: clamp(3px, .9vw, 7px) clamp(7px, 1.6vw, 13px);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.1);
  font: 600 clamp(8px, 1.6vw, 13px)/1 -apple-system, system-ui, sans-serif;
  letter-spacing: .03em;
  color: rgba(255,247,237,.78);
}
.wpc-pv-pill b { color: #fff; font-weight: 700; }
.wpc-pv-seed {
  align-self: flex-start; margin-top: 8px;
  padding: clamp(3px, .8vw, 6px) clamp(7px, 1.4vw, 11px);
  border-radius: 8px;
  background: color-mix(in srgb, var(--wpc-tint) 32%, transparent);
  font: 700 clamp(7px, 1.4vw, 12px)/1 var(--apple-mono, ui-monospace, monospace);
  letter-spacing: .04em; color: #fff;
}
.wpc-pv-brand {
  margin-top: 10px;
  font: 700 clamp(9px, 1.9vw, 16px)/1 -apple-system, system-ui, sans-serif;
  color: var(--wpc-tint);
}
.wpc-pv-brand i { color: rgba(255,247,237,.5); font-style: normal; font-weight: 500; margin-left: 8px; font-size: .8em; }

.wpc-pv-inset {
  position: relative; border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  display: flex; align-items: flex-start; justify-content: flex-start;
  min-height: 0;
}
.wpc-pv-inset::before {
  content: ""; position: absolute; top: 0; left: 0; width: 28%; height: 3px;
  background: var(--wpc-tint);
}
.wpc-pv-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpc-pv-runlabel {
  position: absolute; top: 12px; left: 14px;
  font: 600 clamp(8px, 1.7vw, 13px)/1 -apple-system, system-ui, sans-serif;
  letter-spacing: .1em; color: rgba(255,247,237,.4);
}
.wpc-pv-party {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  display: flex; gap: 5px; flex-wrap: wrap;
}
.wpc-pv-mon {
  width: clamp(28px, 6vw, 46px); aspect-ratio: 1;
  border-radius: 10px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
}
.wpc-pv-mon img { width: 86%; height: 86%; object-fit: contain; image-rendering: pixelated; }

/* ----------------------------------------------------------------------- */
/* Controls                                                                 */
/* ----------------------------------------------------------------------- */
.wpc-controls { display: grid; gap: 11px; margin-bottom: 16px; }
.wpc-field { display: flex; flex-direction: column; gap: 5px; }
.wpc-field-label {
  font: 600 11px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--apple-fg-soft, #aeaeb2);
}
.wpc-input {
  appearance: none; width: 100%;
  padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--hud-hairline, rgba(255,255,255,.12));
  background: var(--hud-glass-soft, rgba(28,28,30,.5));
  color: var(--apple-fg, #f5f5f7);
  font: 500 15px/1.2 -apple-system, system-ui, sans-serif;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.wpc-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--wpc-tint, var(--wpc-amber)) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpc-tint, var(--wpc-amber)) 22%, transparent);
}

/* ----------------------------------------------------------------------- */
/* Actions + result                                                         */
/* ----------------------------------------------------------------------- */
.wpc-actions { display: flex; flex-direction: column; gap: 12px; }
.wpc-status {
  min-height: 18px;
  font: 500 13px/1.3 -apple-system, system-ui, sans-serif;
  color: var(--apple-fg-soft, #aeaeb2);
}
.wpc-status.is-ok { color: #34c759; }
.wpc-status.is-err { color: var(--wpc-red); }
.wpc-status.is-busy { color: var(--wpc-tint, var(--wpc-amber)); }

.wpc-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 12px;
  font: 600 14.5px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform .18s var(--wpc-ease), background .18s ease, box-shadow .18s ease, opacity .18s ease;
  text-decoration: none;
}
.wpc-btn-primary {
  width: 100%;
  color: #fff;
  background: var(--wpc-tint, var(--wpc-amber));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--wpc-tint, var(--wpc-amber)) 40%, transparent);
}
.wpc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px color-mix(in srgb, var(--wpc-tint, var(--wpc-amber)) 48%, transparent); }
.wpc-btn-primary:active { transform: translateY(0); }
.wpc-btn-primary.is-busy { opacity: .7; cursor: progress; }
.wpc-btn-ghost {
  color: var(--apple-fg, #f5f5f7);
  background: var(--hud-glass-soft, rgba(28,28,30,.5));
  border-color: var(--hud-hairline, rgba(255,255,255,.12));
}
.wpc-btn-ghost:hover { background: var(--hud-glass, rgba(28,28,30,.72)); transform: translateY(-1px); }

.wpc-result {
  display: none;
  gap: 14px; align-items: stretch;
  padding: 14px; border-radius: 14px;
  border: 1px solid var(--hud-hairline, rgba(255,255,255,.1));
  background: var(--hud-glass-soft, rgba(28,28,30,.5));
}
.wpc-result.is-shown { display: flex; animation: wpc-rise .34s var(--wpc-ease); }
@keyframes wpc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wpc-result-thumb {
  flex: 0 0 42%; max-width: 230px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--hud-hairline, rgba(255,255,255,.12));
  align-self: flex-start;
}
.wpc-result-thumb img { width: 100%; display: block; }
.wpc-result-col { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wpc-link {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--hud-hairline, rgba(255,255,255,.12));
  background: rgba(0,0,0,.25);
  color: var(--apple-fg, #f5f5f7);
  font: 500 12.5px/1.2 var(--apple-mono, ui-monospace, monospace);
}
.wpc-result-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.wpc-result-btns .wpc-btn { padding: 9px 14px; font-size: 13px; }

/* ----------------------------------------------------------------------- */
/* Shutter flash                                                            */
/* ----------------------------------------------------------------------- */
.wpc-shutter {
  position: fixed; inset: 0; z-index: 2000000100; pointer-events: none;
  background: #fff; opacity: 0;
}
.wpc-shutter.is-flash { animation: wpc-flash .44s ease-out forwards; }
@keyframes wpc-flash {
  0% { opacity: 0; }
  18% { opacity: .82; }
  100% { opacity: 0; }
}

/* ----------------------------------------------------------------------- */
/* Standalone share-view page (/postcard.php?id=...)                        */
/* ----------------------------------------------------------------------- */
.wpc-page { min-height: 100dvh; }
.wpc-page[data-mode="creative"] { --wpc-tint: var(--wpc-amber); }
.wpc-page[data-mode="survival"] { --wpc-tint: var(--wpc-red); }
.wpc-page[data-mode="johto"]    { --wpc-tint: var(--wpc-blue); }
.wpc-page:not([data-mode]) { --wpc-tint: var(--wpc-amber); }

.wpc-aurora {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 480px at 82% -6%, color-mix(in srgb, var(--wpc-tint) 26%, transparent), transparent 60%),
    radial-gradient(520px 420px at 4% 88%, color-mix(in srgb, var(--wpc-tint) 14%, transparent), transparent 60%);
}

.wpc-topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 40px);
  max-width: 1120px; margin: 0 auto;
}
.wpc-topnav .brand {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 16px/1 -apple-system, system-ui, sans-serif;
  color: var(--apple-fg, #f5f5f7); text-decoration: none;
}
.wpc-topnav .brand .wpc-dot { width: 9px; height: 9px; }
.wpc-topnav .links { display: flex; gap: clamp(10px, 2vw, 22px); align-items: center; }
.wpc-topnav .links a {
  font: 500 14px/1 -apple-system, system-ui, sans-serif;
  color: var(--apple-fg-soft, #aeaeb2); text-decoration: none;
  transition: color .18s ease;
}
.wpc-topnav .links a:hover { color: var(--apple-fg, #f5f5f7); }
.wpc-topnav .links a.cta {
  color: #fff; padding: 8px 15px; border-radius: 999px;
  background: var(--wpc-tint); font-weight: 600;
}

.wpc-standalone {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(20px, 6vw, 60px) clamp(16px, 4vw, 40px) 80px;
  display: flex; align-items: center; justify-content: center;
  min-height: 60dvh;
}
.wpc-card-view {
  width: 100%; max-width: 760px;
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--hud-hairline, rgba(255,255,255,.12));
  background: var(--hud-glass-strong, rgba(28,28,30,.86));
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  box-shadow: 0 40px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
}
.wpc-card-frame {
  border-bottom: 1px solid var(--hud-hairline, rgba(255,255,255,.1));
  background: #0d0a14;
}
.wpc-card-img { width: 100%; display: block; }
.wpc-card-meta { padding: clamp(18px, 4vw, 30px); }
.wpc-pill {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  font: 600 12px/1 -apple-system, system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--wpc-tint);
  margin-bottom: 14px;
}
.wpc-card-meta h1 {
  font: 700 clamp(22px, 4.4vw, 34px)/1.1 -apple-system, system-ui, sans-serif;
  letter-spacing: -.025em; margin: 0 0 10px;
  color: var(--apple-fg, #f5f5f7);
}
.wpc-card-desc {
  font: 400 16px/1.5 -apple-system, system-ui, sans-serif;
  color: var(--apple-fg-soft, #aeaeb2); margin: 0 0 22px;
}
.wpc-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wpc-cta, .wpc-ghost {
  appearance: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 12px;
  font: 600 14.5px/1 -apple-system, system-ui, sans-serif;
  border: 1px solid transparent;
  transition: transform .18s var(--wpc-ease), background .18s ease, box-shadow .18s ease;
}
.wpc-cta {
  color: #fff; background: var(--wpc-tint);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--wpc-tint) 40%, transparent);
}
.wpc-cta:hover { transform: translateY(-1px); }
.wpc-ghost {
  color: var(--apple-fg, #f5f5f7);
  background: var(--hud-glass-soft, rgba(28,28,30,.5));
  border-color: var(--hud-hairline, rgba(255,255,255,.12));
}
.wpc-ghost:hover { background: var(--hud-glass, rgba(28,28,30,.72)); transform: translateY(-1px); }

/* ----------------------------------------------------------------------- */
/* Light theme adjustments                                                  */
/* ----------------------------------------------------------------------- */
[data-theme="light"] .wpc-fab,
[data-theme="light"] .wpc-panel,
[data-theme="light"] .wpc-card-view {
  background: var(--hud-glass-strong, rgba(255,255,255,.86));
  color: var(--apple-fg, #1d1d1f);
}
[data-theme="light"] .wpc-scrim { background: rgba(240,240,245,.5); }
[data-theme="light"] .wpc-input,
[data-theme="light"] .wpc-seg,
[data-theme="light"] .wpc-result,
[data-theme="light"] .wpc-btn-ghost,
[data-theme="light"] .wpc-ghost { background: rgba(0,0,0,.04); }
[data-theme="light"] .wpc-link { background: rgba(0,0,0,.05); color: #1d1d1f; }

/* ----------------------------------------------------------------------- */
/* Responsive                                                               */
/* ----------------------------------------------------------------------- */
@media (max-width: 560px) {
  .wpc-result { flex-direction: column; }
  .wpc-result-thumb { max-width: none; flex-basis: auto; }
  .wpc-topnav .links a:not(.cta) { display: none; }
  .wpc-fab span { display: none; }
  .wpc-fab { padding: 12px; }
}

/* ----------------------------------------------------------------------- */
/* Reduced motion                                                           */
/* ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wpc-fab, .wpc-panel, .wpc-scrim, .wpc-btn, .wpc-cta, .wpc-ghost,
  .wpc-close, .wpc-result, .wpc-shutter, .wpc-input { transition: none !important; animation: none !important; }
  .wpc-overlay .wpc-panel { transform: none; opacity: 1; }
}
.wpc-no-motion .wpc-panel { transition: none; transform: none; }