.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.card-thumb{background:var(--color-surface);border:1.5px solid var(--color-border);border-bottom:3px solid var(--type-color, var(--color-border));border-radius:10px;padding:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;transition:border-color .15s,transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}.card-thumb:focus{outline:none}.card-thumb:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.card-thumb:hover{border-color:var(--type-color, var(--color-accent));transform:translateY(-3px);box-shadow:0 8px 24px #0006}.card-thumb-img-wrap{position:relative;width:100%}.card-thumb-img{width:100%;border-radius:6px;display:block}.card-thumb-name{position:absolute;bottom:0;left:0;right:0;padding:20px 6px 6px;background:linear-gradient(transparent,#000000c7);border-radius:0 0 6px 6px;font-size:.72rem;font-weight:600;color:#fff;text-align:center;line-height:1.3;word-break:break-all}@media (max-width: 480px){.card-grid,.grid-skeleton{grid-template-columns:repeat(3,1fr);gap:8px}}.grid-skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.skeleton-card{aspect-ratio:2 / 3;border-radius:10px;background:var(--color-surface);background-image:linear-gradient(90deg,var(--color-surface) 0%,var(--color-border) 50%,var(--color-surface) 100%);background-size:200% 100%;animation:shimmer 1.4s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.grid-message{color:var(--color-text-secondary);font-size:.9rem}.grid-error{color:#e05a5a;font-size:.9rem;line-height:1.6}.grid-error-hint{color:var(--color-text-secondary);font-size:.8rem}.grid-error code{background:var(--color-border);padding:1px 5px;border-radius:4px;font-size:.78rem}.grid-sentinel{grid-column:1 / -1;height:1px}.energy-symbol{display:inline-block;flex-shrink:0;vertical-align:middle}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;align-items:center;justify-content:center;gap:16px;z-index:1000;padding:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .15s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{to{opacity:0}}@keyframes slideDown{to{transform:translateY(100vh)}}.modal-backdrop.closing{animation:fadeOut .42s ease forwards;pointer-events:none}.modal-panel.closing{animation:slideDown .42s ease forwards}.modal-panel{background:var(--color-surface);border-radius:16px;box-shadow:0 24px 64px #00000080;display:flex;flex-direction:column;max-width:960px;width:100%;max-height:90vh;overflow:hidden;position:relative;animation:slideUp .38s ease}.modal-content{display:flex;flex-direction:row;gap:28px;flex:1;min-height:0}@keyframes slideUp{0%{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes slideExitLeft{to{transform:translate(-28px);opacity:0}}@keyframes slideExitRight{to{transform:translate(28px);opacity:0}}@keyframes slideEnterRight{0%{transform:translate(28px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideEnterLeft{0%{transform:translate(-28px);opacity:0}to{transform:translate(0);opacity:1}}.modal-content.slide-exit-left{animation:slideExitLeft .18s cubic-bezier(.4,0,1,1) forwards}.modal-content.slide-exit-right{animation:slideExitRight .18s cubic-bezier(.4,0,1,1) forwards}.modal-content.slide-enter-right{animation:slideEnterRight .24s cubic-bezier(0,.0,.2,1) forwards}.modal-content.slide-enter-left{animation:slideEnterLeft .24s cubic-bezier(0,.0,.2,1) forwards}.modal-drag-handle{display:none}@media (max-width: 600px){.modal-drag-handle{display:block;width:36px;height:4px;background:var(--color-border);border-radius:2px;margin:10px auto 0;flex-shrink:0}}.modal-favorite{position:absolute;top:28px;right:20px;z-index:10;background:#0f11178c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#ffffffb3;cursor:pointer;transition:color .15s,transform .15s,background .15s}.modal-favorite:hover{color:#fff;transform:scale(1.1);background:#0f1117bf}.modal-favorite.is-active{color:#e05070}.modal-close{display:none}.modal-image-wrap{position:relative;flex-shrink:0;width:320px;background:var(--color-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 16px;border-right:1px solid var(--color-border)}.modal-card-image{width:100%;border-radius:10px;box-shadow:0 8px 24px #0000004d;opacity:0;transform:scale(.96);transition:opacity .2s ease,transform .2s ease}.modal-card-image.visible{opacity:1;transform:scale(1)}.modal-card-image.clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}.modal-card-image.clickable:hover{box-shadow:0 8px 28px #a8d4e840}.modal-image-container{position:relative;width:100%;line-height:0}.modal-fav-inline{display:none}.lang-toggle{display:flex;border:1.5px solid var(--color-border);border-radius:8px;overflow:hidden}.lang-btn{padding:6px 18px;font-size:.8rem;font-weight:700;letter-spacing:.05em;border:none;background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:background .15s,color .15s;font-family:var(--font-body)}.lang-btn:hover:not(:disabled){background:var(--color-border);color:var(--color-text)}.lang-btn.active{background:var(--color-accent);color:#0f1117}.lang-btn:disabled{opacity:.35;cursor:not-allowed}.no-en-notice{font-size:.72rem;color:var(--color-text-secondary);text-align:center;margin:0}.modal-details{flex:1;padding:24px 24px 24px 0;overflow-y:auto;display:flex;flex-direction:column;gap:14px}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-right:28px}.card-name{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin:0;color:var(--color-text);line-height:1.2}.pronounce-btn{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;padding:3px 6px;background:none;border:1.5px solid var(--color-border);border-radius:6px;color:var(--color-text-secondary);cursor:pointer;vertical-align:middle;transition:color .15s,border-color .15s}.pronounce-btn:hover{color:var(--color-accent);border-color:var(--color-accent)}.card-name-sub{font-size:.85rem;color:var(--color-text-secondary);margin:2px 0 0}.card-meta-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}.card-hp{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--color-accent)}.card-types{display:flex;gap:4px}.card-tags{display:flex;flex-wrap:wrap;gap:6px}.tag{font-size:.72rem;font-weight:600;padding:3px 8px;border-radius:4px;background:var(--color-border);color:var(--color-text-secondary);letter-spacing:.03em}.tag-number{font-family:monospace}.tag-reg{background:var(--color-accent);color:#0f1117}.tag-stage{background:#3a3a5a;color:#c8c8e8}.tag-set{background:#2d2a3a;color:#c4b0e8;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trainer-text{font-size:.85rem;color:var(--color-text-secondary);line-height:1.6;margin:0}.evolves-from{font-size:.82rem;color:var(--color-text-secondary);margin:0}.section{border-top:1px solid var(--color-border);padding-top:12px;display:flex;flex-direction:column;gap:10px}.ability-block{display:flex;flex-direction:column;gap:4px}.ability-header{display:flex;align-items:center;gap:8px}.ability-badge{font-size:.68rem;font-weight:700;padding:2px 6px;border-radius:4px;background:#d63b3b;color:#fff;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0}.ability-name{font-weight:700;font-size:.92rem;color:var(--color-text)}.ability-text{font-size:.82rem;color:var(--color-text-secondary);line-height:1.5;margin:0}.attack-block{display:flex;flex-direction:column;gap:4px}.attack-header{display:flex;align-items:center;gap:8px}.attack-cost{display:flex;gap:2px;flex-shrink:0}.attack-name{font-weight:700;font-size:.92rem;color:var(--color-text);flex:1}.attack-damage{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--color-text);flex-shrink:0}.attack-text{font-size:.82rem;color:var(--color-text-secondary);line-height:1.5;margin:0}.wrc-row{flex-direction:row!important;gap:20px}.wrc-block{display:flex;flex-direction:column;gap:4px}.wrc-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-secondary)}.wrc-values{display:flex;align-items:center;gap:4px}.wrc-item{display:flex;align-items:center;gap:3px;font-size:.82rem;font-weight:600;color:var(--color-text)}.wrc-none{font-size:.85rem;color:var(--color-text-secondary)}.modal-nav{flex-shrink:0;background:#0f1117d1;border:1px solid var(--color-border);border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.6rem;line-height:1;color:var(--color-text-secondary);transition:background .15s,border-color .15s,color .15s;padding:0}.modal-nav:hover{background:var(--color-border);border-color:var(--color-accent);color:var(--color-accent)}@media (max-width: 600px){.modal-nav{display:none}}.modal-footer-meta{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--color-text-secondary);border-top:1px solid var(--color-border);padding-top:10px;margin-top:auto}.modal-footer-right{display:flex;gap:12px;align-items:center}.modal-position{font-family:monospace;font-size:.7rem;color:var(--color-text-secondary);opacity:.7}@media (max-width: 600px){.modal-panel{max-height:95vh;border-radius:12px 12px 0 0;position:fixed;bottom:0;left:0;right:0;max-width:100%}.modal-content{flex-direction:column;overflow:hidden}.modal-image-wrap{width:100%;border-right:none;border-bottom:1px solid var(--color-border);flex-direction:column;padding:12px 16px;align-items:center;flex-shrink:0;overflow:hidden}.modal-image-container{width:fit-content}.modal-card-image{max-height:60vh;width:auto;max-width:95%;touch-action:none;will-change:transform}.modal-favorite{display:none}.modal-fav-inline{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;padding:3px 5px;border-radius:6px;vertical-align:middle;transition:color .15s}.modal-fav-inline.is-active{color:#e05070}.lang-toggle,.no-en-notice{display:none}.modal-details{flex:1;min-height:0;padding:12px 16px;overflow-y:auto}.modal-image-container:has(.modal-card-image.clickable)::after{content:"タップで日英切り替え";display:block;font-size:.68rem;color:var(--color-text-secondary);text-align:center;padding-top:6px;opacity:.65;letter-spacing:.03em;line-height:normal;}}