:root { --bg:#0b0c10; --panel:#151821; --ink:#e9edf1; --muted:#a7b0be; --accent:#5ad; --ok:#3bbf70; --warn:#f0b35d; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:#0e1118;border-bottom:1px solid #222}
.topbar h1{font-size:18px;margin:0}
.controls{display:flex;gap:8px;flex-wrap:wrap}
.controls input,.controls select,.controls button{background:#10131a;color:var(--ink);border:1px solid #2a2f3a;border-radius:10px;padding:8px 10px}
.controls button{cursor:pointer}
.wrap{max-width:980px;margin:20px auto;padding:0 16px}
.stats{display:flex;gap:20px;margin-bottom:10px;color:var(--muted)}
.card{background:var(--panel);border:1px solid #222;border-radius:16px;padding:16px;display:grid;grid-template-columns:1fr;gap:16px}
.imgWrap{position:relative;width:100%;max-width:520px;margin:0 auto;border-radius:12px;overflow:hidden;background:#0e1118;border:1px solid #222;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}
#face{max-width:100%;max-height:100%;display:none}
.noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#889;letter-spacing:.2em;border:2px dashed #303849;border-radius:12px}
.front,.back{text-align:center}
.hint{color:var(--muted)}
.name{font-size:28px;font-weight:700;margin-top:6px}
.yomi{font-size:16px;color:var(--muted)}
.cat{font-size:12px;color:#9ab;margin-top:6px}
.buttons{display:flex;gap:8px;justify-content:center;margin:14px 0}
.buttons button{padding:10px 14px;border:0;border-radius:12px;background:#162030;color:var(--ink);cursor:pointer}
.buttons .ok{background:var(--ok)}
.help details{background:#0f131b;border:1px solid #222;border-radius:12px;padding:10px;margin-top:10px}
@media(min-width:800px){ .card{grid-template-columns:1fr 1fr} }

/* スケルトンローダー */
.img-skeleton {
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 400px;
  background: #1a1a2e;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skeleton-inner {
  width: 80%;
  height: 70%;
  background: linear-gradient(90deg, #2a2a4e 25%, #3a3a6e 50%, #2a2a4e 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}