/* MEGURU WORLD CREW — inclusive adventure, creative agency and travel memories */
:root {
  --crew-color:#ff7b73;
  --crew-accent:#ffd166;
  --signature-color:#72d9a8;
  --crew-navy:#081b2d;
  --crew-ink:#173847;
  --crew-paper:#fffaf1;
}

.crew-button {
  display:grid;
  grid-template-columns:48px auto;
  grid-template-rows:1fr 1fr;
  gap:0 7px;
  align-items:center;
  min-height:52px;
  padding:5px 11px 5px 6px;
  border:1px solid color-mix(in srgb,var(--crew-color) 70%,#fff);
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--crew-color) 24%,transparent),rgba(81,201,255,.1));
  cursor:pointer;
  box-shadow:inset 0 0 18px rgba(255,255,255,.04);
}
.crew-button>span { grid-row:1/3; display:grid; place-items:center; width:46px; height:39px; border:2px solid rgba(255,255,255,.8); border-radius:15px; color:#102b37; background:linear-gradient(135deg,var(--member-color,var(--crew-color)),#fff3a9); font-size:12px; font-weight:1000; box-shadow:0 0 14px color-mix(in srgb,var(--member-color,var(--crew-color)) 65%,transparent); }
.crew-button b { align-self:end; font-size:10px; line-height:1.1; }
.crew-button small { align-self:start; color:#c7e7e8; font-size:6px; font-weight:900; letter-spacing:.16em; }

/* New key art: people remain visible when the game becomes technical. */
.title-screen {
  background-image:radial-gradient(circle at 88% 12%,rgba(86,208,255,.24),transparent 26%),linear-gradient(135deg,#071f31,#102a3a 55%,#071b2b)!important;
}
.title-screen::before {
  z-index:1;
  inset:76px 0 0!important;
  display:block!important;
  background:linear-gradient(90deg,rgba(4,23,35,.99) 0%,rgba(4,23,35,.94) 34%,rgba(4,23,35,.55) 48%,rgba(4,23,35,.05) 73%,rgba(4,23,35,.02) 100%)!important;
  clip-path:none!important;
}
.title-screen::after { z-index:2; opacity:.14; background:radial-gradient(circle at 74% 15%,#fff 0 2px,transparent 3px),radial-gradient(circle at 91% 37%,#ffd166 0 3px,transparent 4px),linear-gradient(120deg,transparent 35%,rgba(255,255,255,.18) 44%,transparent 52%); background-size:120px 120px,160px 160px,260% 100%; animation:crewShimmer 9s ease-in-out infinite; }
@keyframes crewShimmer { 50%{background-position:30px -12px,-20px 8px,100% 0} }
.title-copy { width:47%; max-width:680px; }
.crew-key-art {
  position:absolute;
  z-index:1;
  top:96px;
  right:-1.5vw;
  bottom:94px;
  width:59%;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.26);
  border-radius:42px 0 0 42px;
  background-image:linear-gradient(180deg,transparent 54%,rgba(5,20,32,.72)),url("assets/meguru-world-crew.webp");
  background-position:center;
  background-size:cover;
  box-shadow:-30px 26px 80px rgba(0,0,0,.34),inset 0 0 60px rgba(6,23,35,.22);
}
.crew-key-art::before { position:absolute; inset:0; content:""; pointer-events:none; background:linear-gradient(115deg,transparent 56%,rgba(255,255,255,.18) 63%,transparent 70%); background-size:230% 100%; animation:keyArtGlint 7s ease-in-out infinite; }
@keyframes keyArtGlint { 0%,60%{background-position:130% 0} 100%{background-position:-80% 0} }
.crew-key-art figcaption { position:absolute; right:30px; bottom:24px; left:30px; display:flex; align-items:end; justify-content:space-between; gap:20px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.65); }
.crew-key-art figcaption span { padding:7px 10px; border:1px solid rgba(255,255,255,.7); border-radius:999px; background:rgba(7,27,41,.45); font:900 7px/1 ui-monospace,monospace; letter-spacing:.16em; backdrop-filter:blur(8px); }
.crew-key-art figcaption b { max-width:350px; font-size:clamp(13px,1.3vw,20px); line-height:1.45; text-align:right; }
.title-copy,.mode-preview { position:relative; z-index:4; }

.crew-preview {
  display:grid;
  grid-template-columns:76px 1fr auto;
  gap:11px;
  align-items:center;
  width:min(100%,570px);
  margin:-11px 0 17px;
  padding:9px 12px 9px 8px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:17px;
  color:#fff;
  background:linear-gradient(100deg,color-mix(in srgb,var(--crew-color) 30%,rgba(7,29,40,.88)),rgba(7,29,40,.77));
  cursor:pointer;
  text-align:left;
  backdrop-filter:blur(12px);
  transition:.2s ease;
}
.crew-preview:hover { border-color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.22); }
.crew-preview-avatar { display:grid; place-items:center; width:74px; height:62px; border:2px solid rgba(255,255,255,.83); border-radius:22px 24px 20px 22px; color:#123441; background:linear-gradient(135deg,var(--member-color,var(--crew-color)),#fff0a8); font-size:20px; font-weight:1000; }
.crew-preview>span:nth-child(2) { min-width:0; }
.crew-preview small,.crew-preview b,.crew-preview em { display:block; }
.crew-preview small { color:#bfe8ee; font-size:7px; font-weight:900; letter-spacing:.14em; }
.crew-preview b { margin:2px 0; font-size:11px; }
.crew-preview em { overflow:hidden; color:#d8ecec; font-size:9px; font-style:normal; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.crew-preview>i { color:#fff3a7; font-size:8px; font-style:normal; font-weight:900; white-space:nowrap; }

/* A collectible bridge between the map and the technical game. */
.tour-scrapbook-callout {
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:12px;
  align-items:center;
  width:min(100%,1450px);
  margin:0 auto 16px;
  padding:11px 15px;
  border:1px solid rgba(255,155,199,.48);
  border-radius:18px;
  color:#ecfbff;
  background:linear-gradient(100deg,rgba(255,123,115,.14),rgba(169,140,255,.13),rgba(81,201,255,.12));
  cursor:pointer;
  text-align:left;
  box-shadow:inset 0 0 28px rgba(255,255,255,.03);
}
.tour-scrapbook-callout>span:first-child { display:grid; place-items:center; width:43px; height:43px; border-radius:50%; color:#152f3c; background:linear-gradient(135deg,#ff9bc7,#fff1a0,#72d9a8); font-size:20px; box-shadow:0 0 18px rgba(255,155,199,.35); }
.tour-scrapbook-callout small,.tour-scrapbook-callout b { display:block; }
.tour-scrapbook-callout small { color:#91dce9; font:900 7px/1 ui-monospace,monospace; letter-spacing:.15em; }
.tour-scrapbook-callout b { margin-top:4px; font-size:11px; }
.tour-scrapbook-callout strong { color:#fff; font:900 12px/1 ui-monospace,monospace; }.tour-scrapbook-callout strong i { color:#ffcf77; font-size:25px; font-style:normal; }

/* The plant also gets a creative and civic identity, not only a score. */
.city-signature {
  max-width:1400px;
  margin:0 auto 18px;
  padding:18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(14,31,35,.95),rgba(9,21,30,.92));
  box-shadow:0 20px 50px rgba(0,0,0,.24);
}
.city-signature>header { display:grid; grid-template-columns:1.2fr .8fr; gap:25px; align-items:end; margin-bottom:14px; }
.city-signature>header small { color:#83dbe8; font:900 7px/1 ui-monospace,monospace; letter-spacing:.15em; }
.city-signature>header h3 { margin:5px 0 0; color:#fff; font-size:clamp(18px,2vw,28px); }
.city-signature>header p { margin:0; color:#a6c0c1; font-size:10px; line-height:1.65; }
.city-signature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.city-signature-card { position:relative; display:grid; grid-template-columns:38px 1fr; gap:3px 10px; min-height:162px; padding:13px; overflow:hidden; border:1px solid color-mix(in srgb,var(--signature) 38%,rgba(255,255,255,.14)); border-radius:17px; color:#eaffff; background:linear-gradient(145deg,color-mix(in srgb,var(--signature) 12%,rgba(7,20,25,.96)),rgba(6,15,21,.96)); cursor:pointer; text-align:left; transition:.2s ease; }
.city-signature-card::after { position:absolute; right:-40px; bottom:-45px; width:110px; height:110px; content:""; border:20px solid var(--signature); border-radius:50%; opacity:.08; }
.city-signature-card:hover:not(:disabled) { border-color:var(--signature); transform:translateY(-3px); box-shadow:0 13px 28px color-mix(in srgb,var(--signature) 18%,transparent); }
.city-signature-card.is-selected { border:2px solid var(--signature); box-shadow:inset 0 0 28px color-mix(in srgb,var(--signature) 12%,transparent),0 0 22px color-mix(in srgb,var(--signature) 15%,transparent); }
.city-signature-card>span { grid-row:1/5; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#10232b; background:var(--signature); font-size:17px; }
.city-signature-card small { color:var(--signature); font:900 7px/1 ui-monospace,monospace; letter-spacing:.11em; }
.city-signature-card b { font-size:13px; }.city-signature-card p { margin:4px 0; color:#a9c0c2; font-size:9px; line-height:1.55; }.city-signature-card em { color:#fff2ab; font-size:8px; font-style:normal; font-weight:900; }
.city-signature-card:disabled { cursor:default; opacity:.76; }.city-signature-card:disabled.is-selected { opacity:1; }
.city-signature-note { margin:10px 2px 0; color:#7f9ea0; font-size:8px; }

.draft-visual::before { position:absolute; z-index:1; inset:0; content:""; pointer-events:none; opacity:.34; transition:.35s ease; }
[data-city-signature="sky"] .draft-visual::before { background:linear-gradient(180deg,rgba(114,217,168,.18),transparent 45%),radial-gradient(circle at 50% 13%,rgba(201,255,175,.44),transparent 22%); }
[data-city-signature="open"] .draft-visual::before { background:linear-gradient(115deg,transparent 38%,rgba(208,179,255,.28) 50%,transparent 62%),repeating-linear-gradient(90deg,transparent 0 70px,rgba(169,140,244,.11) 71px 72px); }
[data-city-signature="heat"] .draft-visual::before { background:radial-gradient(circle at 24% 75%,rgba(255,155,105,.43),transparent 26%),linear-gradient(180deg,transparent,rgba(255,184,92,.18)); }
[data-city-signature="aurora"] .draft-visual::before { background:linear-gradient(120deg,rgba(81,201,255,.18),transparent 35%,rgba(255,155,199,.2) 55%,transparent 78%),radial-gradient(circle at 80% 15%,rgba(122,235,255,.4),transparent 22%); }

/* One persistent teammate across sorting, touring, design, making and operation. */
.crew-coach[hidden] { display:none; }
.crew-coach {
  display:grid;
  grid-template-columns:86px 1fr auto;
  gap:13px;
  align-items:center;
  max-width:1400px;
  margin:0 auto 17px;
  padding:11px 13px;
  border:1px solid color-mix(in srgb,var(--member-color) 50%,rgba(255,255,255,.18));
  border-radius:18px;
  color:#efffff;
  background:linear-gradient(105deg,color-mix(in srgb,var(--member-color) 18%,rgba(7,21,28,.96)),rgba(6,18,25,.96));
  box-shadow:0 16px 34px rgba(0,0,0,.2);
}
.crew-coach-avatar { position:relative; display:grid; place-items:center; width:84px; height:71px; border:2px solid rgba(255,255,255,.8); border-radius:25px 27px 23px 25px; color:#173540; background:linear-gradient(135deg,var(--member-color),#fff0a3); cursor:default; }
.crew-coach-avatar span { font-size:17px; font-weight:1000; }.crew-coach-avatar i { position:absolute; right:-5px; bottom:-4px; display:grid; place-items:center; width:22px; height:22px; border:2px solid #fff; border-radius:50%; color:#fff; background:#163b46; font-size:9px; font-style:normal; }
.crew-coach small,.crew-coach b { display:block; }.crew-coach small { color:color-mix(in srgb,var(--member-color) 70%,#fff); font:900 7px/1 ui-monospace,monospace; letter-spacing:.12em; }.crew-coach b { margin:3px 0; font-size:12px; }.crew-coach p { margin:0; color:#b7ced0; font-size:10px; line-height:1.5; }
.crew-coach-more { padding:9px 12px; border:1px solid color-mix(in srgb,var(--member-color) 60%,#fff); border-radius:999px; color:#fff; background:transparent; cursor:pointer; font-size:8px; font-weight:900; white-space:nowrap; }
.sort-screen .crew-coach { color:#173b43; background:rgba(255,255,255,.9); box-shadow:0 14px 35px rgba(56,95,100,.12); }.sort-screen .crew-coach b { color:#173b43; }.sort-screen .crew-coach p { color:#57797c; }.sort-screen .crew-coach-more { color:#315e67; border-color:#9ccfd1; }

/* Crew and scrapbook modal */
.crew-modal[hidden] { display:none; }
.crew-modal { position:fixed; z-index:135; inset:0; display:grid; place-items:center; padding:20px; }
.crew-backdrop { position:absolute; inset:0; background:rgba(1,10,18,.82); backdrop-filter:blur(10px); }
.crew-dialog { position:relative; display:flex; flex-direction:column; width:min(1180px,100%); max-height:min(900px,94vh); overflow:hidden; border:1px solid rgba(255,255,255,.25); border-radius:30px; color:#173847; background:linear-gradient(145deg,#fffdf7,#eefcff 50%,#faf2ff); box-shadow:0 40px 110px rgba(0,0,0,.5); }
.crew-dialog::before { position:absolute; z-index:0; top:-170px; right:-110px; width:430px; height:430px; content:""; border-radius:50%; background:radial-gradient(circle,rgba(169,140,255,.24),transparent 65%); pointer-events:none; }
.crew-dialog>header { position:relative; z-index:1; display:flex; justify-content:space-between; gap:25px; padding:24px 28px 17px; }
.crew-dialog>header>div>span { color:#4a91a4; font:900 8px/1 ui-monospace,monospace; letter-spacing:.17em; }.crew-dialog>header h2 { margin:5px 0 4px; font-size:clamp(26px,3.3vw,45px); letter-spacing:-.05em; }.crew-dialog>header p { max-width:720px; margin:0; color:#66828a; font-size:11px; }
.crew-dialog>header>button { flex:0 0 auto; width:42px; height:42px; border:1px solid #bad5d9; border-radius:50%; color:#173847; background:rgba(255,255,255,.68); cursor:pointer; font-size:23px; }
.crew-tabs { position:relative; z-index:1; display:flex; gap:7px; padding:0 28px 13px; border-bottom:1px solid #d9e6e8; }
.crew-tabs button { padding:10px 15px; border:1px solid #c8dade; border-radius:999px; color:#52727a; background:#fff; cursor:pointer; font-size:10px; font-weight:900; }.crew-tabs button.is-active { border-color:#173847; color:#fff; background:linear-gradient(90deg,#173847,#326d78); }.crew-tabs b { margin-left:6px; color:#ffd166; }
.crew-panel { display:none; min-height:0; overflow:auto; padding:18px 28px 27px; }.crew-panel.is-active { display:block; }
.crew-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.crew-choice-explainer { grid-column:1/-1; display:grid; grid-template-columns:38px 1fr; gap:11px; align-items:center; padding:12px 15px; border:1px solid #badde1; border-radius:17px; color:#214a56; background:linear-gradient(100deg,#eefcff,#fff9e9 55%,#fff0f8); box-shadow:0 9px 24px rgba(50,92,102,.08); }
.crew-choice-explainer>span { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; color:#173847; background:linear-gradient(135deg,#ff9bc7,#fff1a0,#72d9a8); font-size:18px; font-weight:1000; }
.crew-choice-explainer b,.crew-choice-explainer p { display:block; margin:0; }.crew-choice-explainer b { color:#2b7382; font-size:8px; letter-spacing:.09em; }.crew-choice-explainer p { margin-top:3px; font-size:10px; font-weight:800; line-height:1.45; }
.crew-card { position:relative; display:grid; grid-template-columns:160px minmax(0,1fr) auto; gap:14px; align-items:start; min-height:262px; padding:14px; overflow:hidden; border:2px solid #fff; border-radius:23px; color:#173847; background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--member-color) 10%,#fff)); box-shadow:0 12px 30px rgba(50,92,102,.1); cursor:pointer; text-align:left; transition:.2s ease; }
.crew-card::after { position:absolute; right:-42px; bottom:-56px; width:130px; height:130px; content:""; border:26px solid var(--member-color); border-radius:50%; opacity:.08; }.crew-card:hover { border-color:color-mix(in srgb,var(--member-color) 55%,#fff); transform:translateY(-2px); }.crew-card.is-selected { border-color:var(--member-color); box-shadow:0 14px 34px color-mix(in srgb,var(--member-color) 22%,transparent); }
.crew-card-portrait { position:relative; display:block; width:158px; height:133px; overflow:hidden; border:3px solid rgba(255,255,255,.92); border-radius:35px 35px 28px 28px; color:#173847; box-shadow:0 12px 23px color-mix(in srgb,var(--member-color) 25%,rgba(29,64,74,.12)),inset 0 0 0 1px color-mix(in srgb,var(--member-color) 45%,transparent); }.crew-card-portrait::after { display:none; }.crew-card-portrait b { position:absolute; z-index:2; right:8px; bottom:8px; display:grid; place-items:center; width:32px; height:32px; border:2px solid #fff; border-radius:50%; color:#fff; background:#173847; font-size:10px; box-shadow:0 5px 14px rgba(0,0,0,.24); }
.crew-card-copy { position:relative; z-index:1; display:grid; gap:7px; min-width:0; }
.crew-card-heading { display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:start; padding-bottom:6px; border-bottom:1px solid color-mix(in srgb,var(--member-color) 28%,#d7e5e6); }.crew-card-heading small,.crew-card-heading strong,.crew-card-heading i { display:block; }.crew-card-heading small { grid-column:1/3; color:#527982; font-size:7px; font-weight:900; letter-spacing:.08em; }.crew-card-heading strong { font-size:21px; line-height:1.1; }.crew-card-heading i { align-self:center; padding:4px 6px; border-radius:999px; color:#315d66; background:color-mix(in srgb,var(--member-color) 13%,#edf8f8); font-size:6px; font-style:normal; font-weight:1000; white-space:nowrap; }
.crew-card-detail { display:grid; gap:2px; padding:6px 8px; border-left:3px solid color-mix(in srgb,var(--member-color) 54%,#d4e7e8); border-radius:0 9px 9px 0; background:rgba(255,255,255,.62); }.crew-card-detail b,.crew-card-detail em { display:block; }.crew-card-detail b { color:color-mix(in srgb,var(--member-color) 58%,#315661); font-size:7px; letter-spacing:.06em; }.crew-card-detail em { color:#4f6d74; font-size:9px; font-style:normal; line-height:1.42; }.crew-card-detail.is-reason { border-left-color:var(--member-color); background:color-mix(in srgb,var(--member-color) 10%,#fff); }.crew-card-detail.is-reason em { color:#294d56; font-weight:850; }.crew-card-detail.is-appears em { color:#315b67; font-weight:900; }
.crew-card-check { align-self:start; padding:6px 7px; border-radius:999px; color:#668088; background:#edf5f5; font-size:6px; font-weight:1000; letter-spacing:.1em; }.crew-card.is-selected .crew-card-check { color:#173847; background:var(--member-accent); }
.crew-choice-footer { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-top:16px; padding:13px 15px; border:1px dashed #b8d4d7; border-radius:17px; background:rgba(255,255,255,.7); }.crew-choice-footer span { display:grid; gap:3px; color:#69848a; font-size:9px; }.crew-choice-footer span b { color:#275765; font-size:11px; }.crew-choice-footer span small { color:#69848a; font-size:9px; line-height:1.4; }.crew-choice-footer button { padding:12px 18px; border:0; border-radius:999px; color:#fff; background:linear-gradient(90deg,#e9667c,#9277e6,#3facc7); box-shadow:4px 5px 0 rgba(23,56,71,.16); cursor:pointer; font-weight:900; }

/* One illustrated 3 x 2 crew sheet keeps every appearance consistent. */
.crew-face { background-color:var(--member-color,var(--crew-color)); background-image:url("assets/meguru-crew-roster-v2.webp"),linear-gradient(145deg,var(--member-color,var(--crew-color)),var(--member-accent,#fff0a8)); background-position:var(--portrait-x,0%) var(--portrait-y,0%),center; background-repeat:no-repeat; background-size:300% 200%,cover; }
.crew-button>span.crew-face,.crew-preview-avatar.crew-face,.crew-coach-avatar.crew-face { color:transparent; background-image:url("assets/meguru-crew-roster-v2.webp"),linear-gradient(145deg,var(--member-color,var(--crew-color)),var(--member-accent,#fff0a8)); background-position:var(--portrait-x,0%) var(--portrait-y,0%),center; background-size:300% 200%,cover; }
.crew-face[data-crew-portrait="mio"] { background-position:0% 0%,center!important; }
.crew-face[data-crew-portrait="rin"] { background-position:50% 0%,center!important; }
.crew-face[data-crew-portrait="mei"] { background-position:100% 0%,center!important; }
.crew-face[data-crew-portrait="sara"] { background-position:0% 100%,center!important; }
.crew-face[data-crew-portrait="haru"] { background-position:50% 100%,center!important; }
.crew-face[data-crew-portrait="ren"] { background-position:100% 100%,center!important; }
.crew-coach-avatar.crew-face { display:block; }
.crew-coach-avatar.crew-face i { color:#fff; }

.scrapbook-hero { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:20px 22px; border-radius:23px; color:#fff; background:linear-gradient(120deg,#123f50,#315d75 55%,#785d99); box-shadow:0 18px 36px rgba(33,74,86,.18); }.scrapbook-hero small { color:#a8e9f3; font:900 7px/1 ui-monospace,monospace; letter-spacing:.15em; }.scrapbook-hero h3 { margin:5px 0; font-size:25px; }.scrapbook-hero p { max-width:720px; margin:0; color:#d4e9eb; font-size:10px; }.scrapbook-hero>strong { display:grid; place-items:center; width:95px; height:95px; border:2px solid #fff; border-radius:50%; background:rgba(255,255,255,.09); transform:rotate(4deg); }.scrapbook-hero>strong span,.scrapbook-hero>strong small { display:block; text-align:center; }.scrapbook-hero>strong span { font-size:35px; }.scrapbook-hero>strong small { color:#fff5ad; font-size:7px; }
.scrapbook-zones { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin:12px 0; }.scrap-zone { display:grid; grid-template-columns:auto 1fr auto; gap:5px; align-items:center; padding:8px; border:1px solid #d5e5e6; border-radius:13px; background:rgba(255,255,255,.72); }.scrap-zone i { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:#fff; background:#7c9ea4; font-size:9px; font-style:normal; font-weight:900; }.scrap-zone b { overflow:hidden; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }.scrap-zone small { color:#789096; font-size:7px; }.scrap-zone.is-complete i { color:#173847; background:#ffd166; }
.scrapbook-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.scrap-card { position:relative; display:grid; grid-template-columns:auto 1fr; gap:4px 9px; min-height:235px; padding:13px; overflow:hidden; border:1px solid #d8e4e4; border-radius:20px; background:rgba(255,255,255,.82); box-shadow:0 10px 24px rgba(38,75,82,.08); }.scrap-card::after { position:absolute; right:-35px; bottom:-38px; width:100px; height:100px; content:""; border:15px solid var(--stamp-color,#b8cbcc); border-radius:50%; opacity:.08; }.scrap-number { grid-row:1/3; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:#fff; background:#284f5b; font:900 11px/1 ui-monospace,monospace; }.scrap-stamp { justify-self:end; display:grid; place-items:center; min-width:78px; padding:5px 8px; border:2px solid var(--stamp-color,#9dbec4); border-radius:50%; color:var(--stamp-color,#557d84); transform:rotate(-4deg); }.scrap-stamp i,.scrap-stamp b { font-style:normal; line-height:1.05; }.scrap-stamp i { font-size:5px; letter-spacing:.12em; }.scrap-stamp b { margin-top:2px; font-size:9px; }.scrap-card>small { grid-column:1/3; color:#728e94; font-size:7px; font-weight:900; letter-spacing:.1em; }.scrap-card h4 { grid-column:1/3; margin:1px 0; font-size:14px; }.scrap-card p { grid-column:1/3; margin:0; color:#607c82; font-size:9px; line-height:1.55; }.scrap-card footer { position:relative; z-index:1; grid-column:1/3; align-self:end; display:flex; justify-content:space-between; gap:8px; padding-top:7px; border-top:1px dashed #c7d9db; font-size:7px; }.scrap-card footer span { color:var(--stamp-color,#5c858b); font-weight:1000; }.scrap-card footer b { color:#537178; }.scrap-card.is-seen { background:linear-gradient(145deg,#fffdf2,#edfaff); }.scrap-card.is-locked { filter:saturate(.35); opacity:.62; }.scrap-lock { justify-self:end; display:grid; place-items:center; width:40px; height:40px; border:2px dashed #93aaae; border-radius:50%; color:#7d969b; font-size:18px; font-weight:900; }

/* A share-worthy final scrapbook card. */
.crew-result-page { position:relative; z-index:2; display:grid; grid-template-columns:minmax(220px,.75fr) 1.3fr .55fr; gap:20px; align-items:stretch; max-width:1220px; min-height:210px; margin:16px auto; overflow:hidden; border:2px solid rgba(255,255,255,.28); border-radius:27px; color:#f5ffff; background:linear-gradient(120deg,rgba(8,31,44,.96),rgba(20,49,58,.95)); box-shadow:0 22px 60px rgba(0,0,0,.34); text-align:left; }
.crew-result-page::after { position:absolute; right:-90px; bottom:-110px; width:270px; height:270px; content:""; border:44px solid var(--signature-color); border-radius:50%; opacity:.08; }
.crew-result-art { min-height:210px; background-image:linear-gradient(90deg,transparent 55%,rgba(8,31,44,.94)),url("assets/meguru-world-crew.webp"); background-position:44% center; background-size:cover; }
.crew-result-copy { align-self:center; padding:18px 5px; }.crew-result-copy>small { color:#7de0ec; font:900 7px/1 ui-monospace,monospace; letter-spacing:.15em; }.crew-result-copy h3 { margin:6px 0; font-size:clamp(19px,2vw,29px); }.crew-result-copy p { margin:0; color:#b9d4d5; font-size:10px; line-height:1.6; }.crew-result-copy>div { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }.crew-result-copy span { padding:6px 8px; border:1px solid rgba(255,255,255,.24); border-radius:999px; color:#fff; background:rgba(255,255,255,.06); font-size:7px; font-weight:900; }
.crew-result-badge { position:relative; z-index:1; align-self:center; justify-self:center; display:grid; place-items:center; width:150px; min-height:150px; padding:14px; border:3px double var(--signature-color); border-radius:50%; color:#fff; background:color-mix(in srgb,var(--signature-color) 12%,rgba(6,20,28,.9)); text-align:center; transform:rotate(3deg); }.crew-result-badge small { color:var(--signature-color); font:900 7px/1 ui-monospace,monospace; letter-spacing:.13em; }.crew-result-badge b { font-size:14px; line-height:1.35; }.crew-result-badge span { color:#c5d9dc; font-size:7px; }

@media (max-width:1200px) {
  .crew-button { grid-template-columns:48px; padding:4px; }.crew-button b,.crew-button small { display:none; }
  .title-copy { width:55%; }.crew-key-art { width:54%; }
  .city-signature-grid { grid-template-columns:repeat(2,1fr); }
  .scrapbook-zones { grid-template-columns:repeat(4,1fr); }
}

@media (max-width:1050px) {
  .crew-grid { grid-template-columns:1fr; }
}

@media (max-width:820px) {
  .crew-key-art { top:76px; right:0; bottom:auto; width:100%; height:auto; min-height:0; aspect-ratio:16/9; border:0; border-radius:0; opacity:.94; background-color:#0a2232; background-position:center top; background-size:contain; background-repeat:no-repeat; }
  .title-screen::before { background:linear-gradient(180deg,rgba(4,23,35,.88),rgba(4,23,35,.7) 50%,rgba(4,23,35,.97) 76%)!important; }
  .title-copy { width:100%; margin-top:clamp(205px,56.25vw,460px); padding:20px!important; }
  .crew-key-art figcaption { display:none; }
  .crew-preview { grid-template-columns:66px 1fr; }.crew-preview>i { display:none; }.crew-preview-avatar { width:64px; height:54px; }
  .tour-scrapbook-callout { grid-template-columns:42px 1fr; }.tour-scrapbook-callout strong { grid-column:2; }
  .city-signature>header { grid-template-columns:1fr; gap:6px; }
  .crew-coach { grid-template-columns:72px 1fr; }.crew-coach-avatar { width:70px; height:59px; }.crew-coach-more { grid-column:2; justify-self:start; }
  .crew-grid { grid-template-columns:1fr; }.crew-card { grid-template-columns:144px minmax(0,1fr) auto; min-height:245px; }.crew-card-portrait { width:142px; height:120px; }
  .scrapbook-grid { grid-template-columns:repeat(2,1fr); }
  .crew-result-page { grid-template-columns:180px 1fr; }.crew-result-badge { grid-column:1/3; width:auto; min-height:0; margin:0 18px 18px; border-radius:18px; transform:none; }.crew-result-art { min-height:240px; }
}

@media (max-width:560px) {
  .crew-key-art { opacity:1; }
  .crew-button { width:50px; min-height:44px; border:0; background:transparent; }.crew-button>span { width:44px; height:37px; }
  .circular-button { display:grid; grid-template-columns:1fr; width:36px; min-height:36px; padding:0; border-radius:50%; }.circular-button>span { grid-row:auto; }.circular-button b,.circular-button small { display:none; }
  .crew-preview em { white-space:normal; }
  .city-signature { padding:13px; }.city-signature-grid { grid-template-columns:1fr; }.city-signature-card { min-height:142px; }
  .crew-modal { padding:0; }.crew-dialog { width:100%; max-height:100vh; height:100vh; border:0; border-radius:0; }.crew-dialog>header { padding:18px 16px 12px; }.crew-dialog>header p { font-size:9px; }.crew-dialog>header h2 { font-size:29px; }.crew-tabs { padding:0 16px 10px; }.crew-panel { padding:13px 12px 24px; }
  .crew-choice-explainer { grid-template-columns:32px 1fr; padding:10px; }.crew-choice-explainer>span { width:30px; height:30px; }.crew-choice-explainer p { font-size:9px; }
  .crew-card { grid-template-columns:112px minmax(0,1fr); min-height:0; padding:10px; }.crew-card-portrait { width:108px; height:91px; }.crew-card-copy { display:contents; }.crew-card-check { grid-column:2; justify-self:start; }.crew-card-heading { grid-column:2; grid-template-columns:1fr; }.crew-card-heading small,.crew-card-heading strong,.crew-card-heading i { grid-column:1; }.crew-card-heading strong { font-size:18px; }.crew-card-heading i { justify-self:start; white-space:normal; }.crew-card-detail { grid-column:1/3; }.crew-card-detail em { font-size:8.5px; }
  .crew-choice-footer { display:grid; }.crew-choice-footer button { width:100%; }
  .scrapbook-hero { grid-template-columns:1fr; }.scrapbook-hero>strong { width:auto; height:auto; display:flex; gap:8px; justify-content:center; padding:10px; border-radius:15px; transform:none; }.scrapbook-hero>strong span { font-size:24px; }
  .scrapbook-zones { grid-template-columns:repeat(2,1fr); }.scrapbook-grid { grid-template-columns:1fr; }
  .crew-result-page { grid-template-columns:1fr; }.crew-result-art { min-height:185px; }.crew-result-copy { padding:4px 16px 18px; }.crew-result-badge { grid-column:1; }
}

@media (prefers-reduced-motion:reduce) {
  .crew-key-art::before,.title-screen::after { animation:none!important; }
  .crew-card,.city-signature-card,.crew-preview { transition:none!important; }
}