/* Shared memory card: shell, label, connector and holographic finish.
   Rendered by renderMemoryCard() in card.js. Sizes are expressed in container
   units so the same card reads correctly from a 120px favorite to a 330px study. */
.memory-card,.memory-card *{box-sizing:border-box}
.memory-card{position:relative;container-type:inline-size;width:100%;aspect-ratio:330/410;filter:drop-shadow(0 10px 7px #0006);text-align:left}
.mc-shell{position:absolute;inset:0 0 5.3%;border-radius:7cqw 7cqw 4cqw 4cqw;border:1px solid #83b79966;background:linear-gradient(115deg,#3d7b62,#24563f 35%,#163e2e 80%,#31654d);box-shadow:inset 2px 2px 2px #b4e9c54a,inset -3px -4px 3px #031b1699;display:flex;flex-direction:column;padding:5% 5.5% 6%;overflow:hidden}
.mc-shell:before{content:'';position:absolute;inset:1.8cqw;border:1px solid #a1c49822;border-radius:5.5cqw 5.5cqw 3cqw 3cqw;pointer-events:none}
.mc-emboss{display:flex;justify-content:space-between;flex-shrink:0;font-size:4.6cqw;font-weight:850;letter-spacing:.45cqw;color:#103329;text-shadow:0 1px #8cd2ac70;padding:0 2%;white-space:nowrap}
.mc-grip{flex-shrink:0;height:max(2px,2.3cqw);margin:2.7cqw 2%;background:repeating-linear-gradient(0deg,#0c3023 0 1px,#7ca58333 1px 3px)}
.mc-label{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;background:#d6dfb9;border-radius:1.8cqw;display:flex;flex-direction:column}
/* The whole cover stays visible; a blurred copy fills the free space instead of green bands. */
.mc-art{position:relative;isolation:isolate;flex:1 1 0;min-width:0;min-height:0;overflow:hidden;background:#16261c}
.mc-art:before{content:'';position:absolute;inset:-12px;background-image:var(--cover);background-position:center;background-size:cover;filter:blur(10px) brightness(.65);z-index:0}
.mc-art img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.mc-caption{flex:0 0 auto;padding:2.7cqw 3.2cqw;color:#1b3524}
.mc-caption strong{font-size:max(7px,5cqw);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-caption small{display:block;font:3.2cqw monospace;color:inherit;letter-spacing:.2px;margin-top:1.8cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-foot{display:flex;justify-content:space-between;flex-shrink:0;font:3.2cqw monospace;letter-spacing:.5px;color:#c5d7b7;margin:3.6cqw 2% 0}
.mc-connector{position:absolute;bottom:0;left:17%;right:17%;height:8%;padding:1.4cqw 2.7cqw;background:#0a241a;border-radius:0 0 1.8cqw 1.8cqw;display:flex;gap:2.3cqw}
.mc-connector i{flex:1;background:linear-gradient(90deg,#776031,#d8be77,#9b854a);border-radius:0 0 2px 2px}
/* Face-down card in a box, or a game not discovered yet. */
.memory-card.is-back .mc-shell{background:linear-gradient(120deg,#375445,#1e3528 65%,#35513d)}
.memory-card.is-back .mc-emboss{color:#11251b;text-shadow:0 1px #74917c66}
.mc-unknown{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid #87a18438;margin-top:3.6cqw;border-radius:2.3cqw;background:repeating-linear-gradient(45deg,#ffffff02 0 1px,transparent 1px 5px);color:#a5bd9a}
.mc-unknown b{font:normal 22cqw Georgia,serif;color:#a6c78e;margin-bottom:6cqw}
.mc-unknown span{font:4cqw monospace;letter-spacing:.45cqw}
.mc-unknown small{font:3.2cqw monospace;margin-top:4.5cqw;color:#789775}
.memory-card.is-missing{filter:grayscale(.7) drop-shadow(0 10px 7px #0006);opacity:.6}
/* The finish belongs to the card, independently of the game. */
.memory-card.is-holo .mc-label:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 10%,#69ffd250 30%,#deb3ff70 43%,#fff2a760 57%,transparent 75%);mix-blend-mode:color-dodge;background-size:250% 100%;animation:mc-foil 6s ease-in-out infinite}
@keyframes mc-foil{0%,100%{background-position:100% 50%}50%{background-position:0% 50%}}
@media(prefers-reduced-motion:reduce){.memory-card *,.memory-card *:after{animation:none!important}}

/* Skip link, first focusable element of every page. */
.skip-link{position:absolute;left:20px;top:-80px;z-index:10;padding:14px;background:#ccdfb0;color:#20351e}.skip-link:focus{top:10px}
/* Sign-in state in the page header (account.js): a first name and an account menu. */
[data-account]{display:inline-flex;gap:10px;align-items:center}.account-menu{position:relative}.account-menu summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;color:#e0edcf}.account-menu summary::-webkit-details-marker{display:none}.account-avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#ccdfb0;color:#20351e;font:700 12px system-ui,sans-serif;text-transform:uppercase}.account-name{display:block;min-width:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:20;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:220px;max-width:calc(100vw - 40px);padding:14px 16px;background:#142016;border:1px solid #91a67a44;border-radius:10px;box-shadow:0 12px 30px #0008;font-size:12px}.account-panel p{margin:0;display:flex;flex-direction:column;gap:3px;max-width:100%}.account-panel strong{color:#e0edcf;font-weight:600}.account-panel span{color:#a2b19b;overflow-wrap:anywhere}@media(max-width:760px){.account-menu .account-name{display:none}}.link-button{border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}

/* Rarity controls the shell; the independent holographic finish above is unchanged. */
.memory-card .rarity-stamp{font:2.65cqw monospace;letter-spacing:.5cqw;color:#c1d4b6;text-align:center;margin-top:2.7cqw;flex-shrink:0}
.memory-card[data-rarity] .mc-foot{margin-top:2.2cqw}
/* Rare: keep the green body; just silver hardware and a fine inset line. */
.memory-card[data-rarity=rare] .mc-shell:before{border-color:#cfebee70;box-shadow:inset 0 0 0 .5cqw #122f2533}
.memory-card[data-rarity=rare] .mc-emboss{color:#cee0dc;text-shadow:0 1px 1px #071c17}
/* Common: the embossed title stays tone on tone, the catalog number must stay readable. */
.memory-card[data-rarity=common] .mc-emboss span+span{color:#d9ecd9;text-shadow:0 1px 1px #071c17}
.memory-card[data-rarity=rare] .mc-grip{background:repeating-linear-gradient(0deg,#13372c 0 1px,#b8d3cf80 1px 3px)}
.memory-card[data-rarity=rare] .rarity-stamp{color:#deeeee}
/* Ultra rare: ruby lacquer, copper engraving, broad faceted highlights. */
.memory-card[data-rarity=ultra_rare] .mc-shell{border-color:#e7a28b88;background:linear-gradient(135deg,#ffffff12 0 20%,transparent 20% 75%,#f5a78218 75%),linear-gradient(115deg,#b45851,#75252e 32%,#3f111e 72%,#933e43);box-shadow:inset 2px 2px 2px #f6b4a977,inset -3px -4px 3px #270611cc}
.memory-card[data-rarity=ultra_rare] .mc-shell:before{border-color:#efad8077}
.memory-card[data-rarity=ultra_rare] .mc-emboss{color:#f1b8a0;text-shadow:0 1px 2px #3e1017}
.memory-card[data-rarity=ultra_rare] .mc-grip{background:repeating-linear-gradient(0deg,#390e1c 0 1px,#d28e7955 1px 3px)}
.memory-card[data-rarity=ultra_rare] .mc-label{background:#e4c7b0}
.memory-card[data-rarity=ultra_rare] .mc-caption{color:#48232a}
.memory-card[data-rarity=ultra_rare] .mc-foot,.memory-card[data-rarity=ultra_rare] .rarity-stamp{color:#f0c4ad}
.memory-card[data-rarity=ultra_rare] .mc-connector{background:#310e18}
/* Legendary: brushed gold, engraved double border, warm ivory label. */
.memory-card[data-rarity=legendary] .mc-shell{border-color:#ffe8a8;background:repeating-linear-gradient(0deg,#fff4c00a 0 1px,#60400608 1px 3px),linear-gradient(120deg,#9e7029,#f0ce77 19%,#fff0b6 28%,#c4963e 43%,#ab7727 63%,#e3b95e 81%,#fff0ac);box-shadow:inset 2px 2px 2px #fff4cdbb,inset -3px -4px 3px #684314aa,0 0 20px #edc36412}
.memory-card[data-rarity=legendary] .mc-shell:before{border:1px solid #76501b99;box-shadow:0 0 0 1px #ffeab36b,inset 0 0 0 1px #ffeab36b}
.memory-card[data-rarity=legendary] .mc-emboss{color:#65451c;text-shadow:0 1px #fff1bbaa}
.memory-card[data-rarity=legendary] .mc-grip{background:repeating-linear-gradient(0deg,#825c26 0 1px,#ffdf9188 1px 3px)}
.memory-card[data-rarity=legendary] .mc-label{background:#efe0b8;box-shadow:0 0 0 1px #75521b77,0 1px 0 2px #fff0b444}
.memory-card[data-rarity=legendary] .mc-caption{color:#49351b}
.memory-card[data-rarity=legendary] .mc-foot,.memory-card[data-rarity=legendary] .rarity-stamp{color:#503812;text-shadow:0 1px #ffeeb577}
.memory-card[data-rarity=legendary] .mc-connector{background:#60421d}
.memory-card[data-rarity=legendary] .mc-connector i{background:linear-gradient(90deg,#b5832d,#fff0ae,#c39948)}
