* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #f4f1ea; 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; overflow: hidden; }
#app { touch-action: none; position: fixed; inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
p, span, div { word-break: auto-phrase; text-wrap: pretty; }

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; white-space: nowrap; }
button.primary { background: #1b1b1d; color: #fff; }
[hidden] { display: none !important; }

/* 決めるボタン（帯のすぐ下。top は main.js が入れる）と配信の案内 */
#foot { position: fixed; left: 0; right: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 5; pointer-events: none; }
#foot > * { pointer-events: auto; }
#decide { min-width: min(200px, 60vw); max-width: calc(100vw - 32px); height: 44px; padding: 0 22px; font-size: 16px; border-radius: 22px; }
#guide { min-height: 28px; font-size: 13px; }

/* 結果：画像と同じ絵を 1 枚、その下にボタン、その下にほかのゲーム（ふつうに縦に流れる。上下に分けない） */
#result { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: #f4f1ea;
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 10; }
#view { display: block; margin: 0 auto; }
.row { display: flex; gap: 8px; justify-content: center; max-width: 440px; margin: 8px auto 0; }
#r-post { flex: 1.6; background: #1b1b1d; color: #fff; font-size: 15px; height: 44px; padding: 0 8px; border-radius: 22px; }
#r-post svg { width: 15px; height: 15px; }
#again { flex: 1; font-size: 14px; height: 44px; padding: 0 4px; border-radius: 22px; }
#r-after { max-width: 440px; margin: 10px auto 0; }

/* 言語の切り替え（右上・小さく。カキーンの .langsw と同じ形） */
#t-lang { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); right: 8px; z-index: 6; }
.langsw { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1.5px solid #1b1b1d; border-radius: 99px; font-size: 12px; font-weight: 800; background: #f4f1ea; min-height: 36px; }
.langsw svg { width: 14px; height: 14px; }
.langsw select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }