:root {
  color-scheme: light;
  --ink: #26223b;
  --muted: #77748a;
  --paper: #fffdf9;
  --line: #e8e2f0;
  --purple: #7654c8;
  --purple-dark: #4c358e;
  --pink: #f4e8ff;
  --gold: #c38d2c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 8% 0%, #f0eaff 0, transparent 34rem),
    radial-gradient(ellipse at 95% 20%, #fff0e6 0, transparent 32rem),
    #f8f6fb;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.site-header {
  max-width: 1080px; margin: 0 auto; padding: 28px 22px;
  display: flex; align-items: center; gap: 14px;
}
.brand-mark {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px;
  background: linear-gradient(135deg, #8867d9, #d6a8ee); color: white;
  font-size: 26px; font-weight: 900; box-shadow: 0 8px 20px #8b6acb33;
}
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 1.5rem; }
h2 { font-size: clamp(1.25rem, 3vw, 1.7rem); margin-bottom: 10px; }
h3 { line-height: 1.45; overflow-wrap: anywhere; }
.eyebrow { margin-bottom: 5px; font-size: .7rem; letter-spacing: .15em; font-weight: 800; color: var(--purple); }
.layout {
  max-width: 1080px; margin: 0 auto; padding: 0 22px 34px;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px;
}
.panel {
  min-width: 0; background: #ffffffed; border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(18px, 3vw, 28px); box-shadow: 0 14px 40px #49356d0c;
}
.muted { color: var(--muted); font-size: .92rem; line-height: 1.7; }
label { display: block; margin: 22px 0 8px; font-size: .88rem; font-weight: 750; }
.input-row { display: flex; gap: 8px; }
input {
  min-width: 0; flex: 1; padding: 13px 14px; border: 1px solid #d8cfe6; border-radius: 12px;
  font: inherit; background: white; outline: none;
}
input:focus { border-color: var(--purple); box-shadow: 0 0 0 3px #7654c81b; }
button {
  border: 0; border-radius: 12px; padding: 12px 16px; font: inherit; font-weight: 800;
  cursor: pointer; transition: transform .12s, opacity .12s;
}
button:hover { transform: translateY(-1px); }
button:disabled { opacity: .55; cursor: wait; transform: none; }
#generate-button { background: var(--purple); color: white; white-space: nowrap; }
.secondary-button { padding: 8px 11px; color: var(--purple-dark); background: #f2ecfb; font-size: .82rem; }
.status { min-height: 1.4em; margin: 10px 0; color: var(--purple-dark); font-size: .88rem; }
.status.error { color: #b42318; }
.result-card {
  position: relative; overflow: hidden; margin-top: 10px; padding: 18px;
  min-height: 225px; border: 1px solid #d7c4f1; border-radius: 19px;
  background: linear-gradient(145deg, #fffdfb 0%, #f7edff 52%, #fff5e6 100%);
  box-shadow: inset 0 0 0 5px #ffffff80;
}
.result-card::after {
  content: "✦"; position: absolute; right: 20px; top: 40px; color: #c2a2e9; font-size: 3rem;
}
.card-topline, .card-bottomline { display: flex; justify-content: space-between; color: #8c73b7; font-size: .65rem; font-weight: 900; letter-spacing: .13em; }
.card-symbol { margin: 18px 0 5px; color: var(--gold); font-size: 2.2rem; }
.result-card h3 { position: relative; z-index: 1; font-size: clamp(1.4rem, 4vw, 2rem); margin: 0 0 8px; }
.result-card .muted { margin-bottom: 20px; font-size: .8rem; }
.card-bottomline { padding-top: 12px; border-top: 1px solid #e4d6f0; }
.small-note { color: #918ba0; font-size: .75rem; line-height: 1.6; margin: 15px 0 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2 { margin-bottom: 0; }
.ranking-list { display: grid; gap: 8px; margin-top: 18px; }
.rank-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px; border: 1px solid #eee8f4; background: #fff; border-radius: 14px;
}
.rank-row.selected { border-color: #a98bdd; background: #faf6ff; }
.rank-number {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 11px;
  background: #f1ebfa; color: var(--purple-dark); font-weight: 900;
}
.rank-row:nth-child(1) .rank-number { background: #fff0c9; color: #8d6417; }
.rank-row:nth-child(2) .rank-number { background: #e8eaf1; color: #5d6373; }
.rank-row:nth-child(3) .rank-number { background: #f8e5d8; color: #9b5d37; }
.rank-word { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 800; }
.rank-count { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.rank-arrow { color: #9b8ab8; }
.detail-panel { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.detail-panel h3 { margin-bottom: 0; font-size: 1rem; }
.detail-list { display: grid; gap: 7px; margin-top: 14px; }
.name-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 11px; background: #faf8fd; font-size: .88rem; }
.name-row span:first-child { overflow-wrap: anywhere; font-weight: 700; }
.name-row span:last-child { flex-shrink: 0; color: var(--muted); font-size: .75rem; }
.hidden { display: none !important; }
footer { text-align: center; padding: 12px 20px 35px; color: var(--muted); font-size: .8rem; }
footer p { margin-bottom: 5px; }
@media (max-width: 760px) {
  .site-header { padding-top: 20px; padding-bottom: 18px; }
  .layout { grid-template-columns: 1fr; padding: 0 14px 24px; gap: 14px; }
  .panel { border-radius: 20px; }
  .input-row { flex-direction: column; }
  #generate-button { width: 100%; }
}

/* C/U/R retain the original, undecorated card background. */
.rarity-badge {font-size:.76rem;letter-spacing:.04em;border-radius:999px;padding:5px 9px;background:#ffffffb8;color:inherit;box-shadow:0 1px 4px #00000012;}
.source-count {font-size:.8rem;font-weight:750;opacity:.78;margin:-9px 0 15px;}
.result-card.rarity-vr,.result-card.rarity-sr { isolation:isolate;background-size:240% 240%;animation:foil-shimmer 6s ease-in-out infinite alternate; }
.result-card.rarity-vr {background-image:linear-gradient(120deg,#edf0f5 0%,#aebbc8 20%,#fff 38%,#b9c6d3 55%,#f8fcff 75%,#aab8c8 100%);border:2px solid #aab7c7;color:#263746;box-shadow:inset 0 0 0 4px #ffffffa6,0 0 24px #b3c5d875;}
.result-card.rarity-sr {background-image:linear-gradient(120deg,#fff2b5 0%,#d5a534 20%,#fffbe4 38%,#f3c64f 55%,#fff1ac 75%,#bd8520 100%);border:2px solid #c69a31;color:#513814;box-shadow:inset 0 0 0 4px #fff7d9a6,0 0 28px #e6ba4e85;}
.result-card.rarity-vr::before,.result-card.rarity-sr::before {content:"";pointer-events:none;position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 18% 25%,#fff 0 1px,transparent 3px),radial-gradient(circle at 72% 60%,#fff 0 2px,transparent 4px),radial-gradient(circle at 43% 80%,#fff 0 1px,transparent 3px),radial-gradient(circle at 85% 17%,#fff 0 1px,transparent 4px);background-size:135px 115px,190px 165px,155px 195px,220px 145px;opacity:.75;animation:glitter 3s ease-in-out infinite alternate;}
.result-card.rarity-vr .card-topline,.result-card.rarity-vr .card-bottomline,.result-card.rarity-sr .card-topline,.result-card.rarity-sr .card-bottomline {color:inherit;opacity:.8;}
@keyframes foil-shimmer {from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes glitter {from{opacity:.2;transform:translateY(0)}to{opacity:.95;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce) {.result-card.rarity-vr,.result-card.rarity-sr,.result-card.rarity-vr::before,.result-card.rarity-sr::before {animation:none;}}

.result-actions { display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px;position:relative;z-index:2; }
.history-list { display:grid;gap:9px;margin-top:14px;max-height:440px;overflow-y:auto; }
.history-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff; }
.history-row>div { display:grid;gap:4px;min-width:0; }
.history-name { overflow-wrap:anywhere;font-size:.9rem; }
.history-row .secondary-button { flex-shrink:0; }
.global-total { font-size:1.05rem;font-weight:800;color:var(--purple-dark);margin-bottom:12px; }

/* Victory Rare: 2% rainbow foil, independent of source count. */
.result-card.rarity-v {
  isolation:isolate;
  background-image:linear-gradient(120deg,#ffb7d7,#ffef9a,#a8f4b4,#9be5ff,#c5b3ff,#ffb7d7);
  background-size:320% 320%;
  animation:foil-shimmer 5s linear infinite alternate;
  border:2px solid #b78cdd;
  color:#382a58;
  box-shadow:inset 0 0 0 4px #ffffff9c,0 0 30px #b4a4ff80;
}
.result-card.rarity-v::before {
  content:"";pointer-events:none;position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 18% 25%,#fff 0 2px,transparent 5px),radial-gradient(circle at 73% 62%,#fff 0 2px,transparent 4px),radial-gradient(circle at 40% 83%,#fff 0 1px,transparent 4px);
  background-size:130px 130px,180px 150px,160px 170px;
  animation:glitter 2.5s ease-in-out infinite alternate;
}
.result-card.rarity-v .card-topline,.result-card.rarity-v .card-bottomline {color:inherit;opacity:.8;}
.ranking-more {display:block;margin:14px auto 0;min-width:140px;}
@media(prefers-reduced-motion:reduce){.result-card.rarity-v,.result-card.rarity-v::before{animation:none;}}

/* Slide-out navigation; rankings and history live exclusively inside this menu. */
.site-header { position:relative; }
.menu-toggle { width:48px;height:48px;border:1px solid #8fb3dc;border-radius:15px;background:#1c365c;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;cursor:pointer;z-index:1002; }
.menu-toggle span {width:22px;height:2px;background:#fff;border-radius:2px;}
.menu-backdrop {position:fixed;inset:0;background:#09142bc4;z-index:1000;}
.menu-panel {position:fixed;top:0;left:0;bottom:0;width:min(420px,94vw);z-index:1001;background:#f7faff;color:#1b2d4b;padding:82px 18px 25px;box-shadow:8px 0 30px #07132660;overflow-y:auto;}
.menu-head {display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.menu-tabs {display:flex;gap:8px;margin-bottom:18px;}
.menu-tab {flex:1;border:1px solid #9bb3d5;background:white;color:#203b64;border-radius:10px;padding:12px;cursor:pointer;font-weight:700;}
.menu-tab.active {background:#254d86;color:white;}
.menu-view h2 {font-size:1.2rem;margin:0 0 12px;}
.menu-view .section-heading {gap:12px;align-items:center;}
body.menu-open {overflow:hidden;}
.rank-entry {min-width:0;}
.rank-inline-details {margin:0 0 10px 22px;padding:8px 10px 10px;border-left:3px solid #85a9d8;background:#eef4fc;border-radius:0 0 10px 10px;}
.rank-inline-details .name-row {gap:12px;min-width:0;}
.generated-list-name {overflow-wrap:anywhere;min-width:0;}
.rarity-text-c {color:#64748b!important;}
.rarity-text-u {color:#16804d!important;}
.rarity-text-r {color:#2563eb!important;}
.rarity-text-vr {color:#65768f!important;text-shadow:0 0 1px #7d9fc0;}
.rarity-text-sr {color:#a36a04!important;}
.rarity-text-v {color:#a02bc1!important;background:linear-gradient(95deg,#d12c5b,#bc7810,#168f64,#2771d0,#a02bc1);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.rarity-text-unknown {color:inherit;}
.menu-panel .history-row {align-items:flex-start;}
.menu-panel .history-name {line-height:1.5;}

/* 履歴: 文字色ではなく、カードのレアリティに応じた背景色。 */
.menu-panel .history-row {color:#171717;background:#f4f4f4;border-color:#444;}
.menu-panel .history-row .history-name {color:inherit!important;-webkit-text-fill-color:currentColor;background:none;text-shadow:none;}
.menu-panel .history-row.rarity-bg-c {background:#242424;color:#fff;border-color:#080808;}
.menu-panel .history-row.rarity-bg-u {background:#d7f5df;color:#124e29;border-color:#2b9b55;}
.menu-panel .history-row.rarity-bg-r {background:#dbeafe;color:#173f87;border-color:#3b82f6;}
.menu-panel .history-row.rarity-bg-vr {background:linear-gradient(115deg,#b1bdc9,#f9fcff,#a4b2c2);color:#263746;border-color:#7e8d9f;}
.menu-panel .history-row.rarity-bg-sr {background:linear-gradient(115deg,#bd8723,#fff0ac,#e5b73e);color:#4b3004;border-color:#ad7915;}
.menu-panel .history-row.rarity-bg-v {background:linear-gradient(110deg,#ffd1e2,#ffefae,#c9f4d7,#c7e6ff,#e4ceff);color:#342250;border-color:#ab75cf;}
.menu-panel .history-row.rarity-bg-c .muted {color:#e1e1e1;}
.menu-panel .history-row.rarity-bg-c .secondary-button {background:#fff;color:#171717;}
/* ランキング: 入力語は最新の生成結果のレアリティ色、展開されたカード名も色分け。 */
.menu-panel .rank-word.rarity-text-c {color:#161616!important;}
.menu-panel .rank-word.rarity-text-vr {color:#607080!important;text-shadow:0 0 1px #a4b1c0;}
.menu-panel .rank-word.rarity-text-sr {color:#b17b0c!important;}
.menu-panel .rank-word.rarity-text-v {background:linear-gradient(90deg,#d42c55,#c58d10,#168f64,#2771d0,#a02bc1);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

/* Match the actual card backgrounds: C/U/R share the original pale lavender. */
.menu-panel .history-row.rarity-bg-c,
.menu-panel .history-row.rarity-bg-u,
.menu-panel .history-row.rarity-bg-r { background:#f0eafd; color:#21163a; border-color:#c6b9e2; }
.menu-panel .history-row.rarity-bg-c .muted,
.menu-panel .history-row.rarity-bg-u .muted,
.menu-panel .history-row.rarity-bg-r .muted { color:#665c79; }
.menu-panel .history-row.rarity-bg-c .secondary-button { background:#fff;color:#21163a; }
/* Ranking input words are neutral; only expanded generated cards get rarity coloring. */
.menu-panel .rank-word, .menu-panel .rank-word[class*="rarity-text-"] { color:inherit!important;background:none!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important; }
.menu-panel .rank-row:first-child, .menu-panel .rank-row:first-child .rank-word { color:inherit; }
.menu-panel .rank-inline-details .generated-list-name.rarity-text-c,
.menu-panel .rank-inline-details .generated-list-name.rarity-text-u,
.menu-panel .rank-inline-details .generated-list-name.rarity-text-r,
.menu-panel .rank-inline-details .inline-rarity.rarity-text-c,
.menu-panel .rank-inline-details .inline-rarity.rarity-text-u,
.menu-panel .rank-inline-details .inline-rarity.rarity-text-r { color:#21163a!important; }
.menu-panel .rank-inline-details .generated-list-name.rarity-text-vr,
.menu-panel .rank-inline-details .inline-rarity.rarity-text-vr { color:#263746!important; }
.menu-panel .rank-inline-details .generated-list-name.rarity-text-sr,
.menu-panel .rank-inline-details .inline-rarity.rarity-text-sr { color:#513814!important; }
.menu-panel .rank-inline-details .generated-list-name.rarity-text-v,
.menu-panel .rank-inline-details .inline-rarity.rarity-text-v { color:#a02bc1!important; }
.menu-panel .rank-inline-details .name-row { flex-wrap:wrap; }
.menu-panel .rank-inline-details .generated-list-name { flex:1 1 100%; }
.inline-rarity,.history-rarity { font-size:.75rem;font-weight:700; }

/* Expanded card names only; top-level ranking entries remain uncolored. */
.menu-panel .rank-row .rank-word { color:inherit!important;background:none!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important; }
.menu-panel .rank-inline-details .generated-list-name.rarity-text-c,
.menu-panel .rank-inline-details .generated-list-name.rarity-text-u,
.menu-panel .rank-inline-details .generated-list-name.rarity-text-r { color:#7453af!important;-webkit-text-fill-color:#7453af!important; }
.menu-panel .rank-inline-details .generated-list-name.rarity-text-vr { color:#8a9baa!important;-webkit-text-fill-color:#8a9baa!important;text-shadow:0 0 1px #f1f6ff; }
.menu-panel .rank-inline-details .generated-list-name.rarity-text-sr { color:#c79b30!important;-webkit-text-fill-color:#c79b30!important;text-shadow:0 0 1px #fff1bb; }
.menu-panel .rank-inline-details .generated-list-name.rarity-text-v { color:#a02bc1!important;background:linear-gradient(90deg,#e44875,#e8a529,#30ae78,#398ce5,#ae55da)!important;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important; }
.menu-panel .history-row .history-rarity {color:#8d8d99!important;-webkit-text-fill-color:#8d8d99!important;font-size:.76rem;font-weight:500;}

/* Stable page layout: viewport-anchored background, never content-height anchored. */
html { min-height:100%; scrollbar-gutter:stable; }
body {
  min-height:100vh;
  background:#f8f6fb !important;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow-x:clip;
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(115deg,#f1ebff 0%,#faf6fb 55%,#fff0eb 100%);
}
.site-header,.layout,footer {width:100%;}
.site-header {flex:0 0 auto;}
.layout {
  flex:1 0 auto;
  display:block;
  width:100%;
  max-width:1080px;
  margin:0 auto;
}
.generator-panel {width:100%;}
footer {flex:0 0 auto;min-height:106px;padding-top:16px;}
.global-total {margin:0 auto 12px;line-height:1.5;}
/* Result cards use a single stable lavender background for C/U/R. */
.result-card {
  background:#f4eefa;
  height:350px;
  min-height:350px;
  display:flex;
  flex-direction:column;
  padding:18px;
  overflow:hidden;
}
.result-card.rarity-c,.result-card.rarity-u,.result-card.rarity-r {background:#f4eefa !important;}
.result-card .card-topline {flex:0 0 auto;position:relative;z-index:2;}
.result-card .card-symbol {flex:0 0 auto;margin:12px 0 6px;}
.result-card h3 {
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  font-size:clamp(1.3rem,3.2vw,1.85rem);
  line-height:1.4;
  margin:0 0 7px;
  scrollbar-width:thin;
}
.result-card .muted {flex:0 0 auto;margin:0 0 8px;}
.result-card .result-actions {flex:0 0 auto;margin:0 0 12px;}
.result-card .card-bottomline {flex:0 0 auto;margin-top:auto;position:relative;z-index:2;min-height:27px;align-items:center;}
/* Prevent generated text from reflowing the whole card. */
.result-card .card-bottomline span {overflow-wrap:anywhere;}
/* One scrolling area for the entire menu, not a clipped nested history. */
.menu-panel {
  height:100dvh;
  max-height:100dvh;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:max(36px,env(safe-area-inset-bottom));
}
.menu-view {min-height:0;}
.menu-panel .history-list {
  max-height:none !important;
  overflow:visible !important;
  display:grid;
}
.menu-panel .history-row {min-width:0;}
.menu-panel .history-row>div {min-width:0;flex:1 1 auto;}
.menu-panel .history-row .secondary-button {flex:0 0 auto;}
@media(max-width:760px) {
  .layout {padding:0 14px 24px;}
  .result-card {height:330px;min-height:330px;padding:18px;}
  .result-card h3 {font-size:clamp(1.25rem,5vw,1.65rem);}
  .site-header {padding-top:20px;padding-bottom:18px;}
  footer {min-height:100px;}
}

/* Restore the original compact, left-aligned generator layout on desktop. */
@media (min-width: 761px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 22px 34px;
    width: 100%;
  }
  .layout > .generator-panel { grid-column: 1; width: 100%; min-width: 0; }
}
/* On phones, the card fits the screen; never widen it past the panel. */
@media (max-width: 760px) {
  .layout { display: block; width: 100%; max-width: 100%; padding: 0 14px 24px; }
  .layout > .generator-panel { width: 100%; min-width: 0; }
}
/* Share and secondary actions are always white with black text, regardless of rarity. */
.secondary-button,
.result-card .secondary-button,
.result-card .result-actions button,
.menu-panel .history-row .secondary-button,
.menu-panel .history-row.rarity-bg-c .secondary-button,
.menu-panel .history-row.rarity-bg-u .secondary-button,
.menu-panel .history-row.rarity-bg-r .secondary-button,
.menu-panel .history-row.rarity-bg-vr .secondary-button,
.menu-panel .history-row.rarity-bg-sr .secondary-button,
.menu-panel .history-row.rarity-bg-v .secondary-button {
  background: #fff !important;
  background-image: none !important;
  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;
  text-shadow: none !important;
  border: 1px solid #e5e5e5;
}

/* 2026-10-30 definitive fixes: keep generator narrow on every viewport. */
html,body { width:100%; max-width:100%; }
.layout {
  display:block !important;
  width:100% !important;
  max-width:1080px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:22px !important;
  padding-right:22px !important;
}
.layout > .generator-panel {
  display:block !important;
  width:100% !important;
  max-width:510px !important;
  min-width:0 !important;
  margin:0 !important;
  grid-column:auto !important;
}
/* White tweet buttons: override the entire rarity cascade with ID and context selectors. */
#share-x,
#result-card #share-x,
#result-card.rarity-c #share-x,
#result-card.rarity-u #share-x,
#result-card.rarity-r #share-x,
#result-card.rarity-vr #share-x,
#result-card.rarity-sr #share-x,
#result-card.rarity-v #share-x,
#history-list button,
#history-list .history-row button,
#history-list .history-row[class*="rarity-bg-"] button {
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  color:#171717 !important;
  -webkit-text-fill-color:#171717 !important;
  border:1px solid #e3e3e3 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  opacity:1;
}
#share-x *,#history-list button * {color:#171717 !important;-webkit-text-fill-color:#171717 !important;}
@media(max-width:760px) {
  .layout { padding-left:14px !important;padding-right:14px !important; }
  .layout > .generator-panel {max-width:510px !important;}
}

/* Long names must be fully visible without an internal scrollbar. */
.result-card,
.result-card.rarity-c,.result-card.rarity-u,.result-card.rarity-r,
.result-card.rarity-vr,.result-card.rarity-sr,.result-card.rarity-v {
  height:auto !important;
  min-height:350px !important;
  overflow:visible !important;
}
.result-card h3,#result-name {
  flex:0 0 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  scrollbar-width:none !important;
  overflow-wrap:anywhere;
  word-break:normal;
}
.result-card .card-bottomline { margin-top:auto !important; }
@media(max-width:760px) {
  .result-card,.result-card.rarity-c,.result-card.rarity-u,.result-card.rarity-r,
  .result-card.rarity-vr,.result-card.rarity-sr,.result-card.rarity-v {min-height:330px !important;}
}

.legal-links{display:flex;gap:12px 18px;flex-wrap:wrap;margin:16px 0;font-size:.82rem}
.legal-links a{color:#51438b;text-decoration:underline}
.info-page{max-width:720px;margin:24px auto 64px;padding:0 20px}
.info-page .panel{padding:26px}
.info-page h2{margin-top:24px;font-size:1.1rem}
.info-page p,.info-page li{line-height:1.85}
.info-page a{color:#51438b}
.info-page .note{background:#f4f0fc;padding:12px 14px;border-radius:10px}
 
.rarity-info{border-collapse:collapse;width:100%;font-size:.86rem;margin:18px 0}
.rarity-info th,.rarity-info td{padding:9px 6px;border-bottom:1px solid #ddd;text-align:left}
.info-page ol{padding-left:1.5em}
.info-page a,.legal-links a{overflow-wrap:anywhere}

/* The header logo/title is the home link; no extra back button. */
.home-brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:inherit;max-width:100%;min-width:0}
.home-brand h1{color:var(--ink)}
.home-brand:hover h1{text-decoration:underline;text-underline-offset:4px}
.home-brand:focus-visible{outline:2px solid var(--purple);outline-offset:5px;border-radius:6px}