* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #f5f3ee; color: #1b1b1d; touch-action: manipulation;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
#app { touch-action: none; position: fixed; inset: 0; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }

#stage { position: relative; flex: 1; min-height: 0; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* 初回だけ: 画面のどこかを指でトン */
#hint { position: absolute; left: 50%; bottom: 8%; width: 60px; height: 80px; margin-left: -30px; pointer-events: none; }
#hint[hidden] { display: none; }
#hint svg { width: 100%; height: 100%; overflow: visible; }
#hint path { fill: #fff; stroke: #1b1b1d; stroke-width: 3; stroke-linejoin: round; animation: tap .8s ease-in-out infinite; }
#hint .ring { fill: none; stroke: #1b1b1d; stroke-width: 2.5; transform-origin: 30px 12px; animation: ring .8s ease-out infinite; }
@keyframes tap { 0%, 100% { transform: translateY(-8px); } 40% { transform: translateY(0); } }
@keyframes ring { 0%, 35% { transform: scale(.3); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

.panel { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(245,243,238,.9); overflow-y: auto; overscroll-behavior: contain; padding: 16px; z-index: 10; }
.panel[hidden] { display: none; }
#title { background: #f5f3ee; }
.box { width: 100%; max-width: 420px; text-align: center; margin: auto; }
#tart { width: 100%; height: clamp(150px, 30vh, 240px); display: block; margin: 0 auto 4px; }
h1 { font-size: 60px; letter-spacing: 8px; margin: 0 0 4px; }
.sub { margin: 0 0 24px; font-size: 16px; font-weight: 700; }
button, .button { font: inherit; font-size: 16px; font-weight: 700; color: #1b1b1d; background: #fff; border: 2px solid #1b1b1d; border-radius: 0;
  padding: 10px 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
button.primary, .button.primary { background: #1b1b1d; color: #fff; }
button.big { width: 100%; padding: 14px; font-size: 18px; margin-top: 8px; }
.button.x { background: #1b1b1d; color: #fff; }
.button.x svg { width: 17px; height: 17px; }

#result { align-items: flex-start; }
#card { display: block; width: 100%; height: auto; border: 2px solid #1b1b1d; background: #fff; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.row > * { min-height: 50px; }
#r-row { margin-top: 10px; }
#r-list { list-style: none; margin: 16px 0 0; padding: 0; text-align: left; }
#r-list li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1.5px solid #d8d3c8; font-size: 15px; font-weight: 700; }
#r-list li i { flex: none; width: 14px; height: 22px; border: 2.5px solid #1b1b1d; border-radius: 3px; background: #9fd0f0; }
#r-list li.rare i { background: #f4d77a; }
#r-list li.rare { color: #8a6410; }
#r-list li em { margin-left: auto; font-style: normal; font-size: 12px; color: #8b877e; }
.sn-after { margin-top: 24px; }
.sub, #r-list li, #r-row, #r-after { word-break: auto-phrase; text-wrap: pretty; }

/* 言語（2026-11-09。ムスビメと同じ切り替え）。日本語以外は表が読めるまで隠す */
html.lang-wait #app, html.lang-wait .panel { visibility: hidden; }
#t-lang { margin-top: 4px; }
.langsw { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 6px 12px; border: 1.5px solid #1b1b1d; border-radius: 99px; font-size: 14px; font-weight: 800; }
.langsw svg { width: 16px; height: 16px; }
.langsw select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
:lang(ko) body { font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", sans-serif; }
:lang(zh-Hans) body { font-family: "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
:lang(zh-Hant) body { font-family: "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif; }
:lang(en) body, :lang(es) body, :lang(pt) body, :lang(fr) body, :lang(de) body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
:lang(en) h1, :lang(es) h1, :lang(pt) h1, :lang(fr) h1, :lang(de) h1 { letter-spacing: 2px; }
:lang(en) .sub, :lang(es) .sub, :lang(pt) .sub, :lang(fr) .sub, :lang(de) .sub, :lang(ko) .sub { text-wrap: balance; }