html,body{height:100%}body{background-image:url(/img/night-background.jpg);background-repeat:repeat}#welcomeScreen{max-width:720px;min-height:90vh;margin:32px auto;padding:24px;background-color:#000000b3;color:#fff;border-radius:12px;text-align:center}#welcomeScreen h2{margin-top:24px}#welcomeScreen .auth-panel{margin-top:20px;padding:16px;border-radius:10px;background-color:#ffffff14}#welcomeScreen .auth-panel p{margin:8px 0 12px}#welcomeScreen .auth-form{display:grid;gap:10px;justify-items:center;margin-bottom:10px}#welcomeScreen .auth-form input{width:100%;max-width:320px;padding:10px 12px;border-radius:6px;border:none;font-size:14px}#welcomeScreen .auth-form button{width:100%;max-width:220px}#welcomeScreen .auth-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}#displayNameDialog{border:none;border-radius:10px;padding:20px;max-width:360px}#displayNameDialog::backdrop{background:#0000008c}#displayNameDialog input{width:100%;margin:10px 0;padding:10px 12px;border-radius:6px;border:1px solid #ccc}#displayNameDialog button{margin-right:8px}#welcomeScreen button{margin-top:12px;padding:10px 16px;font-size:16px;border:none;border-radius:6px;cursor:pointer}#welcomeBinderSelect,#privateBinderSelect{width:100%;max-width:320px;padding:10px 12px;font-size:14px;border-radius:6px}#privateBinderLabel{display:block;margin:6px auto 10px;font-size:14px}.menu{position:relative}.menu-trigger{padding:8px 12px;border:none;border-radius:6px;cursor:pointer}.menu-options{position:absolute;top:100%;left:0;margin-top:6px;display:none;flex-direction:column;gap:6px;background-color:#000000e6;border-radius:8px;padding:8px;min-width:140px;z-index:200}.menu.open .menu-options{display:flex}.menu-options button{background:#fff;border:none;border-radius:6px;padding:8px 10px;cursor:pointer;font-size:14px}.is-hidden{display:none!important}#pageContainer{display:flex;flex-wrap:wrap;gap:16px;margin:16px;justify-content:center;align-items:flex-start;padding-top:5vh}#buttonContainer{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:flex-start;margin-bottom:24px;position:fixed;top:0;left:0;right:0;z-index:100;background-color:#000c;padding:12px 16px}#buttonContainer button,#buttonContainer select,#buttonContainer label{font-size:14px}#buttonContainer .toggle-label{display:inline-flex;align-items:center;gap:6px;color:#fff}.read-only .remove-btn,.read-only .owned-btn,.read-only .search-btn,.read-only .page-remove-btn,.read-only .page-move-controls,.read-only .page-add-btn,.read-only .page-add-menu,.read-only .page-add-option{display:none!important}#buttonContainer button,#buttonContainer select{padding:6px 10px;border:none;border-radius:6px;cursor:pointer}#buttonContainer select,#buttonContainer button{background-color:#fff}#buttonContainer .danger-btn{background-color:#b00020;color:#fff}#buttonContainer .danger-btn:hover{background-color:#d32f2f}#saveHeaderBtn:enabled{background-color:#2e7d32;color:#fff}#homeBtn{width:28px;height:28px;padding:0!important;background-color:transparent!important;border:none;background-image:url(/img/binder.png);background-size:20px 20px;background-repeat:no-repeat;background-position:center}#buttonContainer button:hover,#buttonContainer select:hover{background-color:#e8e8e8}#buttonContainer button:active,#buttonContainer select:active{transform:translateY(1px)}#binderSelectLabel{font-size:small;background-color:#f0f8ff;padding:3px}#showOwnedLabel,#makePublicLabel{color:#fff}#showOwnedCheckbox,#makePublicCheckbox{margin:7px 0}section.page{border:5px solid #000000;background-color:#000;display:flex;flex-wrap:wrap;position:relative;background-image:radial-gradient(circle,#222222 .03rem,transparent .05rem),radial-gradient(circle,#222222 .03rem,transparent .05rem),radial-gradient(circle,#222222 .03rem,transparent .05rem),radial-gradient(circle,#222222 .03rem,transparent .05rem);background-size:.4rem .4rem;background-position:0 0,.3rem .2rem,.1rem .2rem,.2rem 0}section.page-3by3{border:5px solid #000000;width:min(45rem,95vw);height:auto;aspect-ratio:3 / 4;background-color:#000;display:flex;flex-wrap:wrap}section.page-3by3 .card-slot{width:auto;height:auto;aspect-ratio:230 / 310}section.page-2by2 .card-slot,section.page-3by4 .card-slot{width:auto;height:auto;aspect-ratio:230 / 310}section.page-2by2{border:5px solid #000000;width:30rem;height:40rem;background-color:#000;display:flex;flex-wrap:wrap}section.page-3by4{border:5px solid #000000;width:60rem;height:60rem;background-color:#000;display:flex;flex-wrap:wrap}div.card-slot-3by3{flex:0 0 calc(33.333% - 10px)}div.card-slot-2by2{flex:0 0 calc(50% - 10px)}div.card-slot-3by4{flex:0 0 calc(25% - 10px)}div.card-slot{margin:5px;box-sizing:border-box;background-color:#ffffff4d;position:relative;height:310px;width:230px}div.card-slot .card-image{position:absolute;inset:0;background-color:#000;background-position:center;background-repeat:no-repeat;pointer-events:none}div.card-image{z-index:1;margin:8px;background-size:100%;background-color:transparent!important;border-radius:8px;border:1px transparent #000000}#cardPreviewImage{box-sizing:border-box;border-radius:5.5%;border:1px transparent #000000}#cardCarousel{margin-top:12px}#carouselImages{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;overflow-y:auto;overflow-x:hidden;padding-right:4px}@media(max-aspect-ratio:1/1){#carouselImages{padding-right:32px}}#carouselImages img{width:100%;aspect-ratio:230 / 310;object-fit:contain;cursor:pointer}#myDialog{position:fixed;background-color:#000000f2;top:0;min-height:100vh;width:48vw;max-width:50vw;margin:0;border:none;padding:16px;overflow:auto;color:#fff;display:flex;flex-direction:column}#myDialog:not([open]){display:none}#myDialog .dialog-content{flex:1;width:100%;display:flex;flex-direction:column}@media(max-aspect-ratio:1/1){#myDialog{min-height:0vh}}#myDialog h1{text-align:center}#myDialog #cardName{display:block;margin:0 auto 12px;width:80%;font-size:24px;padding:5px 12px}#myDialog .search-toggle{display:flex;justify-content:center;gap:16px;margin-bottom:12px;font-size:14px}#myDialog .search-toggle label{display:flex;align-items:center;gap:6px;cursor:pointer}#saveBanner{position:fixed;top:12px;left:50%;transform:translate(-50%) translateY(-8px);background-color:#2e7d32;color:#fff;padding:8px 16px;border-radius:6px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:1000}#saveBanner.show{opacity:1;transform:translate(-50%) translateY(0)}#myDialog.dialog-left{left:0;right:auto}#myDialog.dialog-right{right:0;left:auto}@media(max-aspect-ratio:1/1){#myDialog{width:100vw;max-width:100vw;height:66.67vh;top:auto;bottom:0}#myDialog.dialog-left,#myDialog.dialog-right{left:0;right:0}}div.card-slot .remove-btn{position:absolute;top:5px;right:5px;width:24px;height:24px;background-color:#000000b3;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:16px;font-weight:700;display:none;align-items:center;justify-content:center;z-index:10}div.card-slot:hover .remove-btn{display:flex}div.card-slot .remove-btn:hover,div.card-slot .search-btn:hover,div.card-slot .owned-btn:hover{background-color:#000000d9}div.card-slot .remove-btn:active,div.card-slot .search-btn:active,div.card-slot .owned-btn:active{transform:translateY(1px)}div.card-slot .search-btn{position:absolute;top:5px;left:5px;width:24px;height:24px;background-color:#000000b3;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:14px;font-weight:700;background-image:url(/img/magnifying-glass.png);background-repeat:no-repeat;background-position:center;background-size:14px 14px;display:none;align-items:center;justify-content:center;z-index:10}div.card-slot:hover .search-btn{display:flex}div.card-slot .owned-btn{position:absolute;top:5px;left:50%;transform:translate(-50%);width:24px;height:24px;background-color:#000000b3;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:14px;font-weight:700;display:none;align-items:center;justify-content:center;z-index:10}div.card-slot:hover .owned-btn{display:flex}div.card-slot.card-owned .owned-btn{color:#2e7d32}body.show-unowned div.card-slot.card-unowned .card-image{filter:grayscale(1) brightness(.7)}section.page .page-remove-btn{position:absolute;top:-10px;right:-10px;width:24px;height:24px;background-color:#fff;color:#000;border:none;border-radius:50%;cursor:pointer;font-size:16px;font-weight:700;display:none;align-items:center;justify-content:center;z-index:20}section.page:hover .page-remove-btn{display:flex}section.page .page-move-controls{position:absolute;top:-20px;left:215px;display:none;gap:4px;z-index:20}section.page:hover .page-move-controls{display:flex}section.page .page-move-btn{width:24px;height:24px;background-color:#fff;color:#000;border:none;border-radius:50%;cursor:pointer;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}section.page .page-move-btn:disabled{opacity:.5;cursor:not-allowed}section.page .page-remove-btn:hover,section.page .page-move-btn:hover,section.page .page-add-btn:hover,section.page .page-add-option:hover{background-color:#e8e8e8}section.page .page-remove-btn:active,section.page .page-move-btn:active,section.page .page-add-btn:active,section.page .page-add-option:active{transform:translateY(1px)}section.page .page-add-btn{position:absolute;top:19rem;width:24px;height:24px;background-color:#fff;color:#000;border:none;border-radius:50%;cursor:pointer;font-size:18px;font-weight:700;display:none;align-items:center;justify-content:center;z-index:20}section.page .page-add-left{left:-12px}section.page .page-add-right{right:-12px}section.page:hover .page-add-btn{display:flex}section.page .page-add-menu{position:absolute;top:14rem;display:none;flex-direction:column;gap:4px;z-index:20;width:40px}section.page .page-add-menu-left{left:-16px}section.page .page-add-menu-right{right:-16px}section.page.add-menu-open .page-add-menu{display:flex}section.page .page-add-option{padding:4px 6px;font-size:12px;border:none;border-radius:6px;background-color:#fff;color:#000;cursor:pointer;text-align:center}.card-preview-overlay{border:none;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:auto}.card-preview-overlay:focus,.card-preview-overlay:focus-visible{outline:none}.card-preview-overlay[open]{display:flex;align-items:center;justify-content:center}.card-preview-overlay::backdrop{background:#000000d9}.card-preview-content{display:flex;gap:24px;align-items:flex-start;max-width:90vw;max-height:90vh;color:#fff}.card-preview-content img{width:30vw;object-fit:contain;box-shadow:0 0 20px #000c}.card-preview-details{overflow:auto;max-height:90vh;padding:8px 12px;background-color:#0009;border-radius:8px;width:30vw;text-align:right}.card-preview-details h2{margin:0 0 8px;font-size:22px}.card-preview-details .detail-row{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12);font-size:18px;line-height:1.6}.card-preview-details .detail-row:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.card-preview-details .detail-row strong{display:block;font-size:15px;color:#9bd0ff;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}.card-preview-details .detail-prices{display:flex;flex-direction:column;gap:8px}.card-preview-details .detail-prices .price-item{display:flex;flex-direction:column;gap:4px}.card-preview-details.type-water .detail-row strong{color:#4aa3ff}.card-preview-details.type-fire .detail-row strong{color:#ff6b4a}.card-preview-details.type-grass .detail-row strong{color:#5ccf6a}.card-preview-details.type-lightning .detail-row strong,.card-preview-details.type-electric .detail-row strong{color:#ffd54a}.card-preview-details.type-psychic .detail-row strong{color:#b38bff}.card-preview-details.type-fighting .detail-row strong{color:#d97745}.card-preview-details.type-dark .detail-row strong,.card-preview-details.type-darkness .detail-row strong{color:#8b8b8b}.card-preview-details.type-metal .detail-row strong,.card-preview-details.type-steel .detail-row strong{color:#b0b0b0}.card-preview-details.type-fairy .detail-row strong{color:#ff8fcf}.card-preview-details.type-dragon .detail-row strong{color:#9b7bff}.card-preview-details.type-colorless .detail-row strong{color:#cfcfcf}@media(max-aspect-ratio:1/1){.card-preview-content{flex-direction:column;align-items:center;max-width:95vw}.card-preview-content img{width:40vh}.card-preview-details{max-height:30vh;width:100%}}