/* Midnight edition: the familiar BOOK sleeves, with two-sided memory cards. */
:root{--bg:#1a1a2e;--gold:#d4af37;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace}
.ambient{background:radial-gradient(ellipse at 15% 8%,#48527430,transparent 58%),radial-gradient(ellipse at 88% 85%,#5743201c,transparent 50%),linear-gradient(135deg,#1a1a2e,#161827 55%,#10121e)}
.ambient::after{opacity:.35}
.topbar{border-bottom-color:#d4af371c}
.brand{color:#f4ead3}
.brand small,.top-caption,.cover-caption,.site-footer,.eyebrow,.collection-numbers,.page-center>span,.page-topline,.page-bottomline,.pocket-number,.view-tabs span,.back-index,.back-limit,.character-count{font-family:var(--mono)}
.entry h1 span{color:#dec68e}
.tiny-diamond,.heading-star{color:#d4af37}
.primary{background:linear-gradient(120deg,#e5d4a3,#cbb16d);border-color:#d1b779}
.primary:hover:not(:disabled){background:linear-gradient(120deg,#f0dfaf,#d7bf7e)}
.collection-track i{background:linear-gradient(90deg,#99824b,#e0c984)}
.book{border-color:#283452;box-shadow:0 1px 0 #b9a67566,0 3px 0 #14203b,0 6px 0 #bbbbaa,0 8px 0 #858a7b,0 11px 0 #e0dfcf,0 15px 0 #202b4c,0 30px 50px -15px #0009,0 50px 90px -25px #0004}

/* Keep the 3D rotor free of overflow/filter/opacity, which flatten its faces. */
.gi-slot{position:relative;aspect-ratio:65/90;min-width:0;width:100%;isolation:isolate}
.gi-slot:has(:focus-visible),.gi-slot:hover{z-index:2}
.gi-card-container{position:relative;width:100%;height:100%;perspective:1100px;text-align:left}
.pocket.has-card.gi-card-container{padding:0;clip-path:none;overflow:visible;background:transparent;box-shadow:none;border-radius:2px;transform:none;transition:none}
.pocket.has-card.gi-card-container::before,.pocket.has-card.gi-card-container::after{display:none}
.pocket.has-card.gi-card-container:hover{transform:none;box-shadow:none}
.gi-card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .78s cubic-bezier(.22,.75,.2,1);transform:rotateY(0deg)}
.is-flipped>.gi-card{transform:rotateY(180deg)}
.gi-card-face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border:1px solid #bfaa693d;border-radius:2px;box-shadow:0 3px 7px #15201735}
.gi-card-front{transform:rotateY(0deg);background:#121812}
.gi-card-back{transform:rotateY(180deg);background:#f3eddb;color:#24293a;padding:6%;background-image:var(--grain),radial-gradient(ellipse at 90% 0,#d4af3726,transparent 65%);border-color:#9c874b}
.gi-card-back::after{content:'';position:absolute;inset:3%;border:1px solid #ad955460;pointer-events:none}
.holographic-glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 22%,#a8dcec0a 30%,#c9b6ec33 36%,#ffffff85 41%,#e8d69345 46%,#add7c719 51%,transparent 60%);background-size:300% 300%;background-position:150% 150%;mix-blend-mode:screen;transition:background-position .7s ease}
.gi-slot:hover .holographic-glare,.gi-card-container:focus-visible .holographic-glare,.gi-card-container.is-flipped .holographic-glare{background-position:0% 0%}
.gi-slot:hover .gi-card-face{box-shadow:0 8px 18px #1520173d}
.card-edit-button{position:absolute;right:-8px;top:-9px;z-index:3;display:grid;place-items:center;width:30px;height:30px;border:1px solid #d5bd77;border-radius:50%;background:#25283b;color:#eee0b8;box-shadow:0 2px 6px #0003;padding:7px;transition:background .2s,transform .2s}
.card-edit-button svg{width:100%;height:100%;pointer-events:none}
.card-edit-button:hover{background:#45425a;transform:translateY(-2px)}
.card-edit-button:focus-visible{outline-color:#6b551f;outline-offset:3px}
.origin-page>.gi-slot{width:135px;flex-shrink:0;z-index:1}
.origin-page .gi-slot .pocket{width:100%;max-width:none;box-shadow:none}
.console-controls>.gi-slot{width:30%;flex-shrink:0}
.card-back-content{container-type:inline-size;display:flex;flex-direction:column;height:100%;width:100%;position:relative;text-align:left;font-family:var(--serif)}
.back-index{display:flex;justify-content:space-between;gap:4px;font-size:5.3cqw;letter-spacing:.3px;color:#6f603d;border-bottom:1px solid #aa955749;padding-bottom:5%;white-space:nowrap}
.back-emblem{text-align:center;color:#ae9350;font-size:10cqw;line-height:1;margin-top:3%}
.card-back-content h3{font-size:8cqw;font-weight:600;line-height:1.5;text-align:center;overflow-wrap:anywhere;margin:3% 0 5%;letter-spacing:.3px}
.back-abilities{flex:1;min-height:0;overflow:hidden}
.back-abilities>div+div{margin-top:7%}
.back-abilities strong{display:block;font-size:5.4cqw;font-weight:600;color:#8a7030;letter-spacing:.5px;margin-bottom:3%}
.back-abilities p{font-size:6cqw;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;color:#414037}
.gi-slot .back-abilities p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.back-limit{border-top:1px solid #aa955749;padding-top:3%;margin-top:4%;text-align:center;display:flex;flex-direction:column;gap:1px;flex-shrink:0;line-height:1.3}
.back-limit span{font-size:3.8cqw;letter-spacing:1px;color:#8d7f5c}
.back-limit b{font-size:5.2cqw;font-weight:500;letter-spacing:1px;color:#685637}
.back-limit small{font-size:4.4cqw;color:#8d7f5c;margin-top:2%}
.large-card{transform:rotate(-3deg);max-width:275px}
.preview-card{aspect-ratio:65/90}
.preview-card .back-abilities{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#bba675 transparent;overscroll-behavior:contain;padding-right:3px}
.preview-card .back-abilities p{font-size:6cqw}
.preview-card .gi-card-face{box-shadow:0 0 0 1px #dfc77a33}
.preview-controls{text-align:center}
.preview-flip-button{font-size:12px;min-height:44px;line-height:1.5;letter-spacing:.5px;border:1px solid #d4bd793d;border-radius:24px;background:#f5ddb509;color:#ddc994;padding:9px 20px}
.preview-flip-button:hover{background:#e4cc9120;border-color:#d4bd7980}
.preview-caption{font-size:12px;color:#9ca4b3;margin:14px 0 0}

/* Translucent midnight glass, with opaque enough form controls to stay readable. */
.card-dialog,.confirm-dialog{color-scheme:dark;background:rgba(26,26,46,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#efe7d4;border:1px solid #d4af3750;border-radius:16px;box-shadow:0 30px 100px #0009,inset 0 1px 0 #ffffff09}
.card-dialog::backdrop,.confirm-dialog::backdrop,.cover-dialog::backdrop{background:#0b0d1a9c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.editor-preview{background-color:#14192b9c;background-image:radial-gradient(ellipse at 50% 40%,#6a674224,transparent 65%),var(--grain);border-right:1px solid #d4af371c;overflow:visible}
.editor-preview::before{border-color:#d4af3721;box-shadow:0 0 0 35px #d4af3704,0 0 0 36px #d4af3711}
.editor-preview .eyebrow{color:#b9a674}
.editor-form{background-color:#20203550}
.editor-form>.eyebrow{color:#bdab79}
.editor-form h2{color:#f1e6cc}
.editor-form label{color:#c7c5c7}
.editor-form input:not([type=file]):not([type=range]),.editor-form textarea,.editor-form select{color:#eeebdf;background:#11152385;border-color:#a5a4b32e;border-radius:6px;box-shadow:inset 0 1px 3px #0001}
.editor-form input:focus,.editor-form textarea:focus,.editor-form select:focus{background:#16192d;border-color:#c4ac65;outline:1px solid #c4ac6540;outline-offset:1px}
.editor-form input::placeholder,.editor-form textarea::placeholder{color:#898797}
.editor-form select option{background:#232338;color:#eeebdf}
.editor-form .photo-upload{background:#d4af3708;border-color:#d4af3759;color:#d6c693;border-radius:7px}
.editor-form .photo-upload:hover{background:#d4af3712}
.photo-upload small{color:#9995a4}
.upload-icon{border-color:#d4af374d;color:#d6be7c}
.character-count,.photo-options label,.photo-options button,.save-footnote{color:#a4a1af}
.photo-options input{accent-color:#cbb36e}
.editor-form .form-message{color:#e4b797}
.editor-actions{background:linear-gradient(#202035ee,#202035 35%);border-top:1px solid #d4af3720;margin-inline:-10px;padding-inline:10px;border-radius:0 0 8px 8px}
.editor-actions .text-button{color:#d7a898}
.dialog-close,.cover-dialog .dialog-close{background:#24263ae8;color:#ddd3b8;border-color:#b7a16550;width:36px;height:36px}
.dialog-close:hover{background:#3c3b4e;color:#fff2ca}
.confirm-dialog .secondary{color:#e1d4b0;border-color:#b7a1656b}
.confirm-dialog p{color:#bbb8c5}
.ability-fields{margin:19px 0 16px;border:1px solid #d4af3730;border-radius:7px;background:#d4af3705}
.ability-fields summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 12px;cursor:pointer;list-style:none;color:#d8c594;min-height:48px;font-size:13px}
.ability-fields summary::-webkit-details-marker{display:none}
.ability-fields summary::after{content:'＋';font-size:16px;color:#ac9b6e}
.ability-fields[open] summary::after{content:'−'}
.ability-fields summary small{font-size:10px;color:#a29caa;margin-left:auto}
.ability-fields summary:focus-visible{outline:2px solid #c5ac68;outline-offset:2px;border-radius:5px}
.ability-inputs{border-top:1px solid #d4af371a;padding:14px 12px 7px}
.ability-inputs label+label{margin-top:12px}
.editor-form .ability-inputs textarea{min-height:78px;font-size:14px}
.ability-inputs>p{font-size:10px;color:#97919f;margin:10px 0 5px;line-height:1.8}
.album-hint span{color:#9294a4}

@media(min-width:701px) and (max-width:1050px){.origin-page>.gi-slot{width:125px}}
@media(min-width:701px) and (max-width:820px){.origin-page>.gi-slot{width:110px}}
@media(max-width:700px){
  .book{box-shadow:0 1px 0 #b9a67566,0 4px 0 #babfae,0 7px 0 #818b7d,0 10px 0 #283452,0 20px 35px -10px #0008}
  .origin-page>.gi-slot{grid-area:1/1/4/2;width:110px;max-width:100%;justify-self:center}
  .card-edit-button{width:30px;height:30px;right:-5px;top:-9px}
  .card-edit-button::before{content:'';position:absolute;inset:-7px}
  .card-dialog{border-radius:14px}
  .editor-preview{border-right:0;border-bottom:1px solid #d4af3720;grid-template-columns:1fr 155px;padding:28px 23px 24px;min-height:250px}
  .editor-preview .eyebrow{font-size:10px}
  .large-card{width:145px;transform:rotate(4deg)}
  .preview-controls{grid-area:2/1;text-align:left;align-self:start}
  .preview-flip-button{font-size:11px;padding-inline:12px;min-height:44px;letter-spacing:0}
  .editor-preview .preview-caption{display:block;font-size:11px;margin-top:12px;line-height:1.8;letter-spacing:1px}
  .editor-preview:has(.preview-card.is-flipped){grid-template-columns:1fr;grid-template-rows:auto auto;gap:20px;padding-block:35px 25px}
  .editor-preview:has(.preview-card.is-flipped)>.eyebrow{display:none}
  .editor-preview:has(.preview-card.is-flipped) .large-card{grid-area:1/1;width:min(260px,90%);transform:rotate(-2deg)}
  .editor-preview:has(.preview-card.is-flipped) .preview-controls{grid-area:2/1;text-align:center}
  .editor-preview:has(.preview-card.is-flipped) .preview-caption{display:none}
  .editor-form .ability-inputs textarea{font-size:16px}
  .album-hint span{color:#9294a4}
  .page-controls{background:#1a1a2eea;border-color:#d4af3729;-webkit-backdrop-filter:blur(16px)}
}
@media(max-width:380px){.origin-page>.gi-slot{width:100px}.editor-preview{padding-inline:19px;grid-template-columns:1fr 135px}.large-card{width:130px}.ability-fields summary{flex-wrap:wrap}.ability-fields summary small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.gi-card,.holographic-glare{transition:none!important}.holographic-glare{display:none}}