/* Real community cards and a two-page collecting binder. */
.modal { background: var(--panel); color: var(--paper); border: 3px solid var(--mint); padding: 28px; max-width: min(1120px, 94vw); max-height: 94dvh; overflow: auto; box-shadow: 0 24px 100px #000b; }
.modal::backdrop { background: rgba(5, 8, 6, .9); backdrop-filter: blur(5px); }
.modal-x { position: absolute; top: 8px; right: 10px; background: #0e1511; border: 1px solid #668171; color: var(--mint); font-size: 20px; cursor: pointer; padding: 3px 9px; z-index: 20; }
.modal-x:hover { color: #102a1d; background: var(--mint); }
.modal-card { text-align: center; padding-top: 40px; }
.card-stage { display: grid; place-items: center; perspective: 800px; }
.modal-card .op-card { animation: cardIn .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes cardIn { from { transform: rotateY(90deg) scale(.8); } to { transform: none; } }
.card-note { color: var(--muted); font-size: 14px; max-width: 34ch; margin: 14px auto; }
.card-return { display: block; margin: 18px auto 0; background: none; border: none; color: var(--mint); font: 14px var(--f-mono); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.op-card { --rc: #74b494; position: relative; width: 270px; padding: 11px; text-align: left; color: #b1f3d0; overflow: hidden; box-shadow: inset 0 0 0 2px #07120d, inset 0 0 0 3px #567567, 3px 5px 0 #030705;
  background: linear-gradient(160deg, #172723, #090f10 65%) padding-box, linear-gradient(135deg, #b0fad9, var(--rc) 30%, #365b4c 65%, #a1ebc0) border-box; border: 3px solid transparent; border-radius: 3px; }
.op-card.r-rare { --rc: #9bf5c0; }
.op-card.r-operative { --rc: #6fa88a; }
.op-card.r-legendary { background: linear-gradient(160deg, #172723, #090f10 65%) padding-box, conic-gradient(from var(--a, 0deg), #fff196, #a8f7dc, #4bd2fa, #aa6bff, #f587ad, #f8c27b, #b9f577, #fff196) border-box; animation: holo 5s linear infinite; border-width: 5px; box-shadow: 0 0 20px #a2e47b35, inset 0 0 0 2px #101915; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes holo { to { --a: 360deg; } }
.op-shine { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.06) 45%, transparent 65%); }
.r-legendary .op-shine { background: linear-gradient(115deg, transparent 25%, #e1ffe612 40%, #92ecff16 47%, #c76cff10 54%, transparent 68%); background-size: 240% 100%; animation: foil 5s ease-in-out infinite; }
@keyframes foil { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.op-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 600 10px/1.4 var(--f-mono); color: #a3f6c7; letter-spacing: .04em; }
.op-head > span:first-child { max-width: 145px; }
.op-pwr { display: flex; flex-direction: column-reverse; align-items: center; font: 600 9px var(--f-pixel); }
.op-pwr b { font: 700 26px/1 var(--f-pixel); color: #b2f4d0; }
.op-portrait { margin: 8px 0; aspect-ratio: 1.06; background: radial-gradient(circle, rgba(175,230,184,.17) 1px, transparent 1.4px) 0 0 / 5px 5px, linear-gradient(#111c19, #132221); border: 1px solid #304a3c; display: grid; place-items: center; overflow: hidden; }
.op-portrait canvas { width: 100% !important; height: 100% !important; image-rendering: pixelated; }
.op-portrait canvas.op-fallback { width: 94% !important; height: auto !important; aspect-ratio: 18 / 20; align-self: end; }
.op-name { font: 700 19px/1.2 var(--f-pixel); overflow-wrap: anywhere; }
.op-role { display: inline-block; margin: 5px 0 7px; font: 600 11px/1 var(--f-pixel); color: #182620; background: #a7ebbb; padding: 4px 6px; }
.op-tags { display: flex; flex-wrap: wrap; gap: 5px; font: 600 11px/1 var(--f-pixel); }
.op-tags span { padding: 4px 5px; border: 1px solid #679581; }
.e-fire .op-el { color: #151c16; background: #f59a51; border-color: #f59a51; }
.e-water .op-el { color: #151c16; background: #6bcde4; border-color: #6bcde4; }
.e-earth .op-el { color: #151c16; background: #a2d65f; border-color: #a2d65f; }
.r-legendary .op-rar { color: #162219; border-color: transparent; background: linear-gradient(100deg, #ffe37b, #8cdff7, #ad83f0); }
.op-abil { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 10px 0 0; font: 500 11px/1.3 var(--f-mono); color: var(--muted); }
.op-abil dd { margin: 0; color: var(--paper); font-weight: 700; }
.op-foot { display: flex; justify-content: space-between; margin-top: 8px; font: 500 9px/1 var(--f-mono); color: #77a38d; }
.op-card.small { width: 100%; height: 100%; padding: 8px; }
.op-card.small .op-name { font-size: 16px; }
.op-card.small .op-pwr b { font-size: 23px; }
.op-card.small .op-head > span:first-child { font-size: 9px; }
.op-card.small .op-tags { font-size: 10px; }
.op-card.small .op-tags span { padding: 3px 4px; }
.op-card.small .op-role { font-size: 10px; }
.btn + .btn { margin-left: 10px; }

/* Dark dotted KL silhouettes frame the collector's tabletop. */
.modal-binder { background: radial-gradient(circle, #9aaa9914 .85px, transparent 1.2px) 0 0 / 5px 5px, radial-gradient(ellipse at 50% 42%, #19271caa, transparent 60%), #0b0e0d; }
/* A leather cover, stitched pockets, and steel rings. */
.modal-binder { width: min(1000px, 96vw); max-width: 96vw; padding: 26px 48px 20px 24px; overflow-x: hidden; }
.binder-head { text-align: center; margin-bottom: 16px; }
.binder-head p { margin: 0 0 8px; color: #a1b5a8; font: 10px var(--f-mono); letter-spacing: .18em; }
.binder-head h2 { display: inline-block; margin: 0; padding: 9px 20px; border: 1px solid #91c5a6; box-shadow: 0 0 0 3px #070c08; background: #0c130e; font: 600 25px/1 var(--f-pixel); color: #b5f3ce; }
.binder-directory-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; color: #a1b5a8; font: 10px/1.5 var(--f-mono); }
.binder-directory { display: inline-flex; align-items: center; min-height: 44px; color: #b5f3ce; text-underline-offset: 4px; }
.binder-directory:focus-visible { outline: 2px solid #b5f3ce; outline-offset: 4px; }
.binder-tabs { display: flex; gap: 6px; justify-content: center; margin: 0 0 8px; flex-wrap: wrap; }
.binder-tabs button { cursor: pointer; background: #10201a; border: 1px solid #415e4b; min-height: 32px; padding: 6px 10px; font: 600 12px/1.3 var(--f-pixel); color: #b1cab9; }
.binder-tabs button[aria-pressed='true'] { background: #b0eabd; color: #13261c; border-color: #b0eabd; }
.binder-book { position: relative; padding: 16px 20px 18px; background: linear-gradient(90deg, #153a28, #1b5940 3%, #0d2e20 49%, #0a1e15 50%, #22543a 96%, #153727); border: 4px solid #174a31; border-radius: 14px 17px 12px 12px; box-shadow: 0 4px 0 #06100b, 0 8px 0 #17402e, 0 13px 22px #000a, inset 0 0 0 2px #386e50; }
.binder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.binder-leaf { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 8px; padding: 11px; background: radial-gradient(circle, #9da5a71a .75px, transparent 1.1px) 0 0 / 3px 3px, linear-gradient(125deg, #363b3d, #1b2023 55%, #303738); border: 4px solid #535b58; border-radius: 8px; box-shadow: 0 0 0 3px #182321, inset 0 0 0 2px #89978c55, 0 3px 0 #0a0e0c, 0 5px 0 #535a55; }
.binder-slot { position: relative; display: block; min-width: 0; padding: 5px; cursor: pointer; background: #101516; border: 1px solid #78817b; outline: 1px dashed #596962; outline-offset: -3px; border-radius: 3px; box-shadow: 1px 2px 0 #080c09, inset 0 0 0 4px #bec9c211; }
.binder-slot::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(130deg, #ffffff0a, transparent 35%, #ffffff06 65%, transparent 70%); border-top: 1px solid #c3d5c53d; }
.binder-slot:hover { background: #3d5946; border-color: #bcf1cb; }
.modal-binder button:focus-visible { outline: 2px solid #d5f5dc; outline-offset: 3px; }
.binder-slot:focus-visible { z-index: 6; }
.binder-slot .op-card.small { display: flex; flex-direction: column; padding: 6px; border-width: 2px; box-shadow: inset 0 0 0 1px #14231b; }
.binder-slot .op-head, .binder-slot .op-tags { flex-shrink: 0; }
.binder-slot .op-card.small .op-head > span:first-child { font-size: 7px; line-height: 1.3; max-width: 72px; }
.binder-slot .op-card.small .op-pwr b { font-size: 18px; }
.binder-slot .op-card.small .op-pwr { font-size: 7px; }
.binder-slot .op-portrait { position: relative; flex: 1 1 auto; min-height: 36px; margin: 5px 0; aspect-ratio: 1.35; }
.binder-slot .op-portrait canvas { position: absolute; inset: 0; min-width: 0; min-height: 0; object-fit: contain; }
.binder-slot .op-card.small .op-name { display: grid; place-items: center; flex-shrink: 0; min-height: 2.4em; font-size: 11px; text-align: center; }
.binder-slot .op-card.small .op-role { padding: 3px; font-size: 7px; margin: 4px 0; }
.binder-slot .op-card.small .op-tags { gap: 3px; font-size: 7px; }
.binder-slot .op-card.small .op-tags span { padding: 2px 3px; }
.binder-slot .op-rar { display: none; }
.binder-slot .op-foot { font-size: 5px; margin-top: 5px; }
.binder-slot.empty { display: grid; place-items: center; min-height: 0; cursor: default; color: #64716b; }
.binder-slot.empty span { display: grid; place-items: center; width: 100%; height: 100%; border: 1px dashed #56615a; font: 600 40px var(--f-pixel); }
.binder-rings { position: absolute; inset: 3% calc(50% - 24px); width: 48px; display: flex; flex-direction: column; justify-content: space-around; pointer-events: none; z-index: 5; }
.binder-rings::before { content: ''; position: absolute; inset: -2% 18px; width: 10px; background: linear-gradient(90deg, #06160d, #366343, #08130b); border: 1px solid #3c7d52; }
.binder-rings i { position: relative; display: block; height: 16px; border-radius: 50% 50% 28% 28%; border: 4px solid #d7ded7; border-bottom-color: #33433a; box-shadow: inset 0 3px 2px #3b4c3b, 0 3px 0 #050a06, 1px -1px 0 #fff; }
.binder-els { position: absolute; display: flex; flex-direction: column; gap: 9px; top: 40px; right: -30px; z-index: 4; }
.binder-els button { cursor: pointer; display: grid; place-items: center; padding: 0; width: 34px; height: 85px; color: #161f18; border: 2px solid #050a06; border-left: 0; font: 700 14px/1 var(--f-pixel); box-shadow: 3px 4px 0 #0008; transition: transform .15s; }
.binder-element-label { display: block; writing-mode: vertical-rl; white-space: nowrap; }
.binder-els .e-fire { background: #f49a43; } .binder-els .e-water { background: #a0e4d0; } .binder-els .e-earth { background: #c7ba78; }
.binder-els button[aria-pressed='true'] { transform: translateX(6px); outline: 2px solid #dcecd4; outline-offset: 2px; }
/* Keep every pocket unobstructed, including the last card on the right page. */
.binder-fold { display: none; }
.binder-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 22px; }
.binder-motto { font: 10px var(--f-pixel); color: #a0b9a7; letter-spacing: .12em; }
.binder-pages { display: flex; align-items: center; gap: 10px; }
.binder-page-label { font: 11px/1.4 var(--f-mono); color: #b2c7b8; text-align: center; }
.binder-page-btn { border: 1px solid #739f81; min-width: 38px; min-height: 34px; padding: 3px 12px; color: #b8f0c8; background: #14251c; cursor: pointer; }
.binder-page-btn:disabled { opacity: .35; cursor: default; }
.binder-no-results { text-align: center; color: #e4dfc7; font: 13px var(--f-mono); }

@media (max-width: 1000px) {
  .op-card.small .op-name { font-size: 14px; }
  .op-card.small .op-head > span:first-child { font-size: 8px; }
  .op-card.small .op-role { font-size: 8px; }
  .binder-slot .op-card.small .op-pwr { display: none; }
  .binder-slot .op-card.small .op-head > span:first-child { max-width: none; }
  .binder-slot .op-card.small .op-tags { font-size: 6px; }
  .binder-leaf { padding: 7px; gap: 6px; }
}
@media (max-width: 760px) {
  .modal { padding: 26px 14px 18px; }
  .modal-binder { padding: 28px 36px 20px 12px; }
  .binder-head h2 { font-size: 22px; padding: 9px 11px; }
  .binder-head p { font-size: 9px; letter-spacing: .1em; }
  .binder-tabs { gap: 5px; }
  .binder-tabs button { font-size: 10px; padding: 5px 7px; }
  .binder-book { padding: 10px; border-width: 3px; }
  .binder-grid { display: block; }
  .binder-leaf { padding: 8px; gap: 7px; grid-auto-rows: auto; }
  .leaf-0 { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 13px; }
  .leaf-1 { margin-top: 22px; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 13px; }
  .binder-rings { inset: calc(50% - 8px) 5% auto; width: 90%; height: 16px; flex-direction: row; }
  .binder-rings i { width: 16px; height: 38px; margin-top: -12px; border-radius: 45%; }
  .binder-rings::before { inset: 4px -2%; width: 104%; height: 8px; background: linear-gradient(#10291a, #396143, #0a1b0f); }
  .binder-slot .op-card.small .op-name { font-size: 10px; }
  .binder-slot .op-card.small .op-role { font-size: 6px; }
  .binder-slot .op-card.small .op-head > span:first-child { font-size: 6px; }
  .binder-slot .op-card.small .op-tags { font-size: 6px; }
  .binder-slot .op-foot { font-size: 4px; }
  .binder-slot .op-card.small { padding: 4px; }
  .binder-slot.empty { min-height: 147px; }
  .binder-els { right: -28px; top: 18px; gap: 7px; }
  .binder-els button { width: 30px; height: 75px; font-size: 12px; }
  .binder-footer { flex-direction: column-reverse; gap: 14px; margin-top: 18px; }
  .binder-page-label { font-size: 10px; }
}
@media (max-width: 440px) {
  .binder-slot.empty { min-height: 142px; }
}
/* World previews have no fixed parent height; only sleeved cards fill their slot. */
/* The album shows the compact identity/element face; full role and stats are in the opened card. */
.binder-slot .op-card.small .op-role, .binder-slot .op-card.small .op-foot { display: none; }
.binder-slot .op-card.small .op-name { margin: 4px 0 7px; }
.binder-rarities { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.binder-rarities button { border: 1px solid #59745f; background: #14221a; color: #b1cab9; min-height: 28px; font: 600 11px/1.3 var(--f-pixel); padding: 5px 10px; cursor: pointer; }
.binder-rarities button[data-rarity='LEGENDARY'] { color: #eddc8b; border-color: #827444; }
.binder-rarities button[aria-pressed='true'] { background: #dfd593; color: #1b261c; border-color: #f4e9b0; }
@media (min-width: 761px) { .modal-binder { max-height: 96dvh; } }