@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0e0b1a;--surface:#1b1230;--surface2:#271a42;--accent:#b08fff;--accent2:#c9953a;--text:#e8dff8;--text-muted:#8878aa;--upright:#3d8f5f;--reversed:#8f4040;--radius:10px;--font:system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif;--font-display:"Cinzel", Georgia, serif}html{font-size:18px}body{background:var(--bg);color:var(--text);font-family:var(--font);background-image:radial-gradient(100% 50% at 50% -5%,#5a32a04d 0%,#0000 100%);background-attachment:fixed;min-height:100dvh;line-height:1.65}#app{flex-direction:column;min-height:100dvh;display:flex}.top-bar{border-bottom:1px solid var(--surface2);background:var(--bg);z-index:10;align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex;position:sticky;top:0}.site-title{color:var(--accent);letter-spacing:.08em;text-shadow:0 0 24px #b08fff80;white-space:nowrap;flex-shrink:0;font-size:1.1rem;font-weight:700}.top-bar .search-wrapper{flex:1;margin-bottom:0}.nav-toggle{background:var(--surface);border:1px solid var(--surface2);border-radius:var(--radius);color:var(--text);font-family:var(--font);cursor:pointer;white-space:nowrap;flex-shrink:0;padding:.5rem .85rem;font-size:.9rem}.nav-toggle:hover{border-color:var(--accent)}#main{flex:1;width:100%;max-width:680px;margin:0 auto;padding:1.25rem 1rem 5rem}.bottom-nav{border-top:1px solid var(--surface2);background:var(--bg);z-index:10;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav-btn{color:var(--text-muted);font-family:var(--font);cursor:pointer;background:0 0;border:none;flex:1;padding:.85rem;font-size:1rem}.bottom-nav-btn.active{color:var(--accent);border-top:2px solid var(--accent)}.browse-tabs{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.browse-tab{background:var(--surface);border:1px solid var(--surface2);border-radius:var(--radius);color:var(--text-muted);font-family:var(--font);cursor:pointer;padding:.4rem .85rem;font-size:.9rem}.browse-tab.active{border-color:var(--accent);color:var(--accent)}.browse-grid{grid-template-columns:repeat(3,1fr);gap:.75rem;display:grid}.browse-card{cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:.3rem;padding:0;display:flex}.browse-card img{aspect-ratio:2/3;object-fit:contain;border:1px solid var(--surface2);background:var(--surface2);border-radius:6px;width:100%}.browse-card:hover img{border-color:var(--accent)}.browse-card span{color:var(--text-muted);text-align:center;font-size:.7rem}.suggestion-hint{color:var(--text-muted);background:var(--surface2);border-radius:4px;margin-right:.25rem;padding:.1em .4em;font-size:.7rem}@media (width<=640px){.nav-toggle{display:none}}@media (width>=641px){.bottom-nav{display:none}#main{padding-bottom:2rem}.browse-grid{grid-template-columns:repeat(6,1fr)}}.search-wrapper{margin-bottom:1rem;position:relative}#search{width:100%;font-size:1rem;font-family:var(--font);background:var(--surface);color:var(--text);border:1.5px solid var(--surface2);border-radius:var(--radius);outline:none;padding:.75rem 1rem;transition:border-color .15s}#search:focus{border-color:var(--accent)}#search::placeholder{color:var(--text-muted)}.suggestions{background:var(--surface);border:1.5px solid var(--surface2);border-radius:var(--radius);z-index:100;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden;box-shadow:0 8px 24px #00000080}.suggestions li+li{border-top:1px solid var(--surface2)}.suggestions button{width:100%;color:var(--text);font-family:var(--font);text-align:left;cursor:pointer;background:0 0;border:none;align-items:baseline;gap:.5rem;padding:.6rem 1rem;font-size:1rem;transition:background .1s;display:flex}.suggestions button span{color:var(--text-muted);font-size:.85rem}.suggestions button:hover,.suggestions button:focus,.suggestions button.active{background:var(--surface2);outline:none}.card-detail{background:var(--surface);border-radius:var(--radius);border:1px solid #c9953a40;overflow:hidden;box-shadow:0 4px 32px #00000080,0 0 0 1px #b08fff0d}.card-header{border-bottom:1px solid #c9953a33;align-items:center;gap:1rem;padding:1.25rem 1.25rem 1rem;display:flex}.card-thumb{aspect-ratio:2/3;background:var(--surface2);cursor:zoom-in;border:1px solid #c9953a4d;border-radius:6px;flex-shrink:0;width:72px;transition:opacity .15s,box-shadow .15s;display:block}.card-thumb:hover{opacity:.85;box-shadow:0 0 12px #c9953a66}.card-name-ja{color:var(--text);font-size:1.6rem;font-weight:700;line-height:1.2}.card-number-inline{font-family:var(--font-display);color:var(--accent2);vertical-align:middle;margin-left:.3em;font-size:1rem;font-weight:400}.card-name-en{font-family:var(--font-display);color:var(--text-muted);letter-spacing:.04em;margin-top:.2rem;font-size:.82rem;font-weight:400}.lightbox{z-index:1000;cursor:zoom-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.lightbox[hidden]{display:none}.lightbox img{pointer-events:none;border-radius:8px;max-width:90dvw;max-height:90dvh;box-shadow:0 8px 48px #000c}.meaning{padding:1rem 1.25rem}.meaning+.meaning{border-top:1px solid #c9953a26}.meaning h3{align-items:baseline;gap:.4rem;margin-bottom:.5rem;font-size:1.15rem;font-weight:700;display:flex}.upright h3{color:var(--upright)}.reversed h3{color:var(--reversed)}.keywords{color:var(--text);margin-bottom:.5rem;font-size:1.15rem;font-weight:600}.detail-ja{color:var(--text);margin-bottom:.4rem;font-size:.95rem}.detail-en{color:var(--text-muted);font-size:.82rem;font-style:italic}@media (width<=480px){.card-name-ja{font-size:1.3rem}}.attribution{text-align:center;color:var(--text-muted);padding:1rem 1rem 5rem;font-size:.72rem}.attribution a{color:var(--text-muted);text-decoration:underline}@media (width>=641px){.attribution{padding-bottom:1.5rem}}