/* Showcases (12.2): the Collection | Showcase switch, the collector's binder (cover, pages that turn,
   rings, the bar and tools under the page), the editor's tabs, the pages index and friends' pages.
   Uses the look's own colours (--g-*), so blue, green and pink all fit. */
.collection-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:16px 0 4px;padding:4px;border-radius:16px;background:rgba(10,8,22,.35);border:1px solid var(--g-edge,#a9c4da42)}
.collection-switch button{position:relative;height:38px;min-height:38px;border-radius:12px;color:var(--g-soft,#a9c4da);font-size:12.5px;letter-spacing:.06em;background:transparent;border:1px solid transparent}
.collection-switch button.selected{background:var(--g-glass-strong,#121a47);border-color:var(--g-edge-bright,#dae7f1);color:var(--g-ink,#f4efe3);box-shadow:var(--g-glow,none)}
.switch-dot{position:absolute;top:8px;right:14px;width:7px;height:7px;border-radius:50%;background:var(--g-pink,#e77bb4);box-shadow:0 0 8px var(--g-pink,#e77bb4)}
.switch-dot[hidden]{display:none}
.showcase-footnote{margin:16px 4px 6px;font-size:11px;line-height:1.7;color:var(--g-muted,#717380);text-align:center}
.showcase-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.showcase-help{margin:0;font-size:12px;line-height:1.6;color:var(--g-soft,#a1a2a7)}
.showcase-friend-line{margin:4px 2px;font-size:12px;color:var(--g-soft,#a1a2a7);text-align:center}
.showcase-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:12px 0 10px}
.showcase-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;height:48px;min-height:48px;padding:0 3px;border-radius:12px;border:1px solid var(--g-edge,#a9c4da42);color:var(--g-soft,#a1a2a7)}
.showcase-tab b{font-size:11.5px;font-weight:600;letter-spacing:.02em}
.showcase-tab small{max-width:100%;font-size:9.5px;color:var(--g-muted,#7497b4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showcase-tab.selected{background:var(--g-glass-strong,#121a47);border-color:var(--g-edge-bright,#dae7f1);color:var(--g-ink,#f4efe3)}
.showcase-tab.selected small{color:var(--g-soft,#a9c4da)}
.showcase-panel{min-height:120px}
.showcase-panel .pick-tools{margin:8px 0}
.showcase-pals,.showcase-things{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.showcase-pal,.showcase-thing{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 3px 7px;border-radius:12px;border:1px solid var(--g-edge,#a9c4da30);background:rgba(12,10,26,.35)}
.showcase-pal canvas{width:48px;height:48px}
.showcase-pal span,.showcase-thing span{max-width:100%;font-size:10px;line-height:1.35;color:var(--g-soft,#a1a2a7);text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.showcase-pal.is-in,.showcase-thing.is-in{border-color:var(--g-edge-bright,#dae7f1);background:var(--g-glass-strong,#121a47)}
.showcase-pal.is-in span,.showcase-thing.is-in span{color:var(--g-ink,#f4efe3)}
.showcase-pal.shiny.is-in{border-color:var(--g-gold,#f1c593)}
.showcase-pal.prism.is-in{border-color:#e5b3da}
.showcase-check,.showcase-count{position:absolute;top:4px;right:5px;font-style:normal;font-size:10px;color:var(--g-ink,#f4efe3)}
.showcase-minus{position:absolute;top:2px;left:3px;width:22px;height:22px;display:grid;place-items:center;border-radius:8px;font-size:14px;color:var(--g-ink,#f4efe3);background:rgba(0,0,0,.35)}
.showcase-thing.is-center{border-color:rgba(241,197,147,.5)}
.showcase-thing.is-locked{opacity:.55}
.showcase-thing small{font-size:9px;color:var(--g-gold,#f1c593);text-align:center}
.showcase-thumb{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
.showcase-thumb.is-dim{filter:grayscale(.8) brightness(.55)}
.showcase-habitats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.showcase-habitat{display:grid;grid-template-columns:92px minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;align-items:center;text-align:left;padding:6px;border-radius:12px;border:1px solid var(--g-edge,#a9c4da30);background:rgba(12,10,26,.35);min-width:0}
.showcase-habitat .showcase-thumb{grid-row:1/3;border-radius:7px}
.showcase-habitat b{font-size:11.5px;color:var(--g-ink,#f4efe3);font-weight:600;align-self:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showcase-habitat small{font-size:9.5px;line-height:1.4;color:var(--g-soft,#a1a2a7);align-self:start;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.showcase-habitat.selected{border-color:var(--g-edge-bright,#dae7f1);background:var(--g-glass-strong,#121a47)}
.showcase-habitat.is-locked b{color:var(--g-muted,#7497b4)}
.showcase-habitat.is-locked small{color:var(--g-gold,#f1c593)}
@media(max-width:400px){.showcase-habitats{grid-template-columns:1fr}}
.showcase-label{margin:16px 2px 8px;font-size:10.5px;letter-spacing:.14em;color:var(--g-soft,#a9c4da)}
.showcase-panel>.showcase-label:first-child{margin-top:4px}
.showcase-glasses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.showcase-glass{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 6px;border-radius:12px;border:1px solid var(--g-edge,#a9c4da30);background:rgba(12,10,26,.35);min-width:0}
.showcase-glass b{font-size:11px;color:var(--g-ink,#f4efe3);font-weight:600}
.showcase-glass small{font-size:9px;line-height:1.3;color:var(--g-gold,#f1c593);text-align:center;min-height:12px}
.showcase-glass.selected{border-color:var(--g-edge-bright,#dae7f1);background:var(--g-glass-strong,#121a47)}
.showcase-glass .showcase-thumb{width:100%!important;max-width:56px;height:auto!important;aspect-ratio:2/3}
.showcase-chips{display:flex;flex-wrap:wrap;gap:6px}
.showcase-chip{height:40px;min-height:40px;padding:0 16px;border-radius:20px;border:1px solid var(--g-edge,#a9c4da42);font-size:12px;color:var(--g-soft,#a1a2a7)}
.showcase-chip.selected{background:var(--g-glass-strong,#121a47);border-color:var(--g-edge-bright,#dae7f1);color:var(--g-ink,#f4efe3)}
.showcase-chip.is-locked{opacity:.6}
.showcase-panel>.showcase-chips+.showcase-help{margin-top:12px}

/* ---- the binder ---- */
.showcase-view{padding-top:4px}
.binder{position:relative;padding-bottom:6px}
.binder-news{position:relative;display:flex;flex-direction:column;gap:3px;margin:8px 0 10px;padding:10px 40px 10px 12px;border-radius:14px;border:1px solid var(--g-gold,#f1c593);background:rgba(241,197,147,.08);font-size:11.5px;line-height:1.55;color:var(--g-soft,#a9c4da)}
.binder-news b{color:var(--g-gold,#f1c593);font-size:12px}
.binder-news-close{position:absolute;top:6px;right:6px;width:32px;height:32px;min-height:32px;border-radius:10px;font-size:13px;color:var(--g-soft,#a9c4da)}
.binder-book{position:relative;width:min(100%,calc(min(60vh,680px) * 2 / 3));width:min(100%,calc(min(60dvh,680px,max(52dvh,100dvh - 330px)) * 2 / 3));aspect-ratio:2/3;margin:10px auto 0;perspective:1800px;touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.binder.is-editing .binder-book{width:min(100%,calc(min(42vh,440px) * 2 / 3));width:min(100%,calc(min(42dvh,440px) * 2 / 3));touch-action:none}
.binder-board{position:absolute;top:5px;left:4px;right:-7px;bottom:-7px;border-radius:12px;background:linear-gradient(180deg,#3a3390,#231f5c);box-shadow:0 14px 30px rgba(6,4,20,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.binder-sheet{position:absolute;inset:0;border-radius:10px;transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:flat;overflow:hidden;box-shadow:2px 3px 10px rgba(4,3,16,.45);cursor:pointer}
.binder-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.binder-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,4,20,.15),rgba(6,4,20,.7));opacity:0}
.binder-rings{position:absolute;left:-2.5%;top:0;bottom:0;width:8%;z-index:4;pointer-events:none}
.binder-rings i{position:absolute;left:0;right:0;height:3.4%;border-radius:999px;border:3px solid #cfd5ee;border-left-color:#eef1ff;border-bottom-color:#8e97c0;box-shadow:0 2px 3px rgba(4,3,16,.55),inset 0 1px 0 rgba(255,255,255,.6)}
.binder-rings i:nth-child(1){top:calc(16.7% - 1.7%)}.binder-rings i:nth-child(2){top:calc(50% - 1.7%)}.binder-rings i:nth-child(3){top:calc(83.3% - 1.7%)}
.binder-plate{position:absolute;left:31.5%;width:44.5%;top:85.2%;height:5.2%;display:grid;place-items:center;font-size:clamp(8px,2.6vw,11px);font-weight:700;letter-spacing:.03em;color:#4a3216;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.binder-blank-note{position:absolute;left:50%;top:61%;transform:translate(-50%,-50%);white-space:nowrap;padding:5px 12px;border-radius:999px;background:rgba(20,22,58,.92);box-shadow:0 0 0 1px rgba(150,170,255,.18);text-align:center;font-size:12px;letter-spacing:.08em;color:var(--g-soft,#a9c4da);pointer-events:none}
.binder-bar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;margin:12px 0 8px}
.binder-arrow{width:44px;height:44px;min-height:44px;border-radius:50%;border:1px solid var(--g-edge,#a9c4da42);font-size:22px;line-height:1;color:var(--g-ink,#f4efe3);background:var(--g-glass,rgba(53,100,136,.3))}
.binder-arrow:disabled{opacity:.3}
.binder-where{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;text-align:center}
.binder-where b{max-width:100%;font-size:13.5px;font-weight:600;color:var(--g-ink,#f4efe3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.binder-where small{max-width:100%;font-size:10.5px;color:var(--g-soft,#a1a2a7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.binder-tools{display:flex;flex-direction:column;gap:8px}
.binder-buttons{display:grid;grid-template-columns:1.25fr 1.15fr .62fr .62fr .62fr;gap:6px}
.binder-buttons .secondary-button,.binder-tools>.secondary-button,.binder-tools>.primary-button{margin:0;min-height:46px;padding:0 6px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.binder-buttons .is-on{border-color:var(--g-edge-bright,#dae7f1);background:var(--g-glass-strong,#121a47)}
.binder-buttons .is-gold{border-color:var(--g-gold,#f1c593);color:var(--g-gold,#f1c593)}
.binder-open{width:100%}
.binder-pages-button{width:100%}
.binder-empty-hint{text-align:center}
.binder-edit-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.binder-done{min-height:44px;padding:0 18px}
.binder-selection{display:flex;flex-direction:column;gap:8px;min-width:0}
.binder-selection .showcase-tools .secondary-button{margin:0;min-height:40px;padding:0 6px;font-size:12px}
.binder-tabs .showcase-tab{height:46px;min-height:46px}
.binder-tabs .showcase-tab b{font-size:11px}
.binder-tabs .showcase-tab small{font-size:9px}
.binder-quick{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.7fr);gap:6px;margin:10px 0 2px}
.binder-quick select{height:40px;min-height:40px;margin:0;padding:0 8px;border-radius:12px;font-size:11.5px}
.binder-quick .secondary-button{margin:0;min-height:40px;padding:0 6px;font-size:12px}
.binder-more{margin-top:10px}
.binder-name{width:100%;height:44px;min-height:44px;margin:0;padding:0 12px;border-radius:12px;font-size:15px}
.binder-remove.is-armed{border-color:#e8698a;color:#ffb0c4}
.binder-pages{margin-top:14px;padding:12px 12px 16px;border-radius:18px;border:1px solid var(--g-edge,#a9c4da42);background:rgba(14,12,34,.92)}
.binder-pages-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.binder-pages-head b{font-size:13px;color:var(--g-ink,#f4efe3)}
.binder-pages-head .binder-news-close{position:static}
.binder-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(min-width:560px){.binder-thumbs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.binder-thumb{display:flex;flex-direction:column;gap:4px;align-items:stretch;min-width:0;padding:0;text-align:left}
.binder-thumb canvas{width:100%;height:auto;aspect-ratio:2/3;border-radius:7px;box-shadow:0 4px 10px rgba(4,3,16,.45)}
.binder-thumb span{font-size:10.5px;color:var(--g-soft,#a1a2a7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.binder-thumb.is-featured span{color:var(--g-gold,#f1c593)}
.binder-thumb.is-new span{color:var(--g-ink,#f4efe3)}
.binder-rewards{display:flex;flex-direction:column;gap:6px}
.binder-reward{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--g-edge,#a9c4da22)}
.binder-reward b{font-size:11.5px;color:var(--g-ink,#f4efe3);font-weight:600}
.binder-reward small{grid-column:1;font-size:10.5px;line-height:1.5;color:var(--g-soft,#a1a2a7)}
.binder-reward span{grid-column:2;grid-row:1/3;align-self:center;font-size:12px;color:#85cd74}
.binder-reward:not(.is-done){opacity:.78}
.binder-reward:not(.is-done) small{color:var(--g-gold,#f1c593)}

/* a friend's page */
.showcase-dialog .showcase-shell{padding:22px 16px 26px}
.binder-book.is-solo{width:min(100%,calc(min(60vh,640px) * 2 / 3));width:min(100%,calc(min(60dvh,640px) * 2 / 3));margin-top:14px}

/* friends' pages, on the friends list */
.friend-showcases{margin:6px 0 4px}
.friend-showcase-row{display:flex;gap:10px;overflow-x:auto;margin:0 -4px;padding:2px 4px 8px;scrollbar-width:none;scroll-snap-type:x proximity}
.friend-showcase-row::-webkit-scrollbar{display:none}
.friend-showcase{flex:0 0 108px;display:flex;flex-direction:column;gap:3px;padding:0;text-align:left;scroll-snap-align:start;min-width:0}
.friend-showcase canvas{width:100%;height:auto;aspect-ratio:2/3;border-radius:8px;box-shadow:0 4px 10px rgba(4,3,16,.45)}
.friend-showcase b{margin:2px 2px 0;font-size:11.5px;color:var(--g-ink,#f4efe3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-showcase small{margin:0 2px;font-size:10px;color:var(--g-soft,#a1a2a7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-showcase-empty{display:grid;place-items:center;aspect-ratio:2/3;border-radius:8px;font-size:10.5px;line-height:1.5;color:var(--g-soft,#a1a2a7);text-align:center;padding:8px;border:1px dashed var(--g-edge,#a9c4da42)}
.friend-showcase-peek{display:flex;align-items:center;gap:12px;width:100%;margin:10px 0 0;padding:6px;border-radius:12px;border:1px solid var(--g-edge,#a9c4da42);text-align:left}
.friend-showcase-peek canvas{width:64px;height:auto;aspect-ratio:2/3;flex:none;border-radius:6px}
.friend-showcase-peek span{font-size:12px;line-height:1.5;color:var(--g-soft,#a1a2a7)}
.friend-showcase-peek b{display:block;color:var(--g-ink,#f4efe3);font-size:12.5px}
@media(max-width:360px){.binder-buttons{grid-template-columns:1.2fr 1.1fr .6fr .6fr .6fr;gap:4px}.binder-buttons .secondary-button{font-size:11.5px}.showcase-pals,.showcase-things{grid-template-columns:repeat(3,minmax(0,1fr))}.binder-tabs .showcase-tab b{font-size:10px}}
@media(prefers-reduced-motion:reduce){.binder-book{transition:none}}

/* little drawn icons: the binder's grid, the live page, the pages menu */
.ico{display:inline-block;flex:none;vertical-align:-1px;margin-right:7px}
.ico.solo{margin-right:0}
.ico-grid{width:12px;height:12px;background:linear-gradient(currentColor,currentColor) 0 0/5px 5px no-repeat,linear-gradient(currentColor,currentColor) 7px 0/5px 5px no-repeat,linear-gradient(currentColor,currentColor) 0 7px/5px 5px no-repeat,linear-gradient(currentColor,currentColor) 7px 7px/5px 5px no-repeat}
.ico-menu{width:14px;height:11px;background:linear-gradient(currentColor,currentColor) 0 0/14px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 4.5px/14px 2px no-repeat,linear-gradient(currentColor,currentColor) 0 9px/14px 2px no-repeat}
.ico-live{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,currentColor 0 2.6px,transparent 3.1px);box-shadow:inset 0 0 0 1.5px currentColor}
.binder-star{font-size:15px;color:var(--g-muted,#7497b4)}
.binder-buttons .binder-star.is-gold{color:var(--g-gold,#f1c593)}
.binder-buttons .secondary-button,.binder-tools>.binder-pages-button{display:inline-flex;align-items:center;justify-content:center}
.binder-solo-toggle{display:flex;align-items:center;justify-content:center;width:fit-content;margin:10px auto 0;padding:0 22px}

/* 12.3 · store-ready bits: delete my account, the legal links, reporting a player */
.account-delete{margin-top:14px;border-top:1px solid #2c2838;padding-top:4px}
.account-delete summary{cursor:pointer;color:var(--muted,#a1a2a7);font-size:11px;padding:10px 0;list-style-position:inside}
.account-delete[open] summary{color:#e8a29a}
.account-delete .account-line{font-size:12px;line-height:1.6;margin:4px 0 10px}
.account-delete-local{display:flex;gap:8px;align-items:center;font-size:12px;color:#dae7f1;margin:0 0 10px}
.account-delete-local input{width:18px;height:18px;accent-color:#c4685c}
.account-delete input[type=text]{width:100%;box-sizing:border-box;margin:0 0 10px;letter-spacing:.2em;text-transform:uppercase}
.danger-button{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #c4685c;background:#3a1f26;color:#ffd9d3;font:inherit;font-size:13px;cursor:pointer}
.danger-button:disabled{opacity:.4;cursor:default}
.legal-links{margin:16px 0 4px;text-align:center;font-size:11px;color:var(--muted,#a1a2a7)}
.legal-links a{color:inherit;text-decoration:underline;text-underline-offset:3px;padding:6px 2px;display:inline-block}
.friend-report{margin-top:10px;padding:10px 12px;border:1px solid #2c2838;border-radius:12px}
.friend-report .friends-help{margin:0 0 6px}
.friend-report a.text-button{display:inline-block;margin-top:6px}
.account-age{display:flex;gap:8px;align-items:center;font-size:12px;color:#dae7f1;margin:10px 0 4px}
.account-age input{width:18px;height:18px;flex:none}
.account-terms{font-size:10px;line-height:1.6;color:var(--muted,#a1a2a7);margin:4px 0 8px}
.account-terms a{color:inherit;text-decoration:underline;text-underline-offset:2px}
html:not(.is-native) .native-only{display:none!important}