/* ============================================================
 *  style.css  ―  ライト系（若い女の子のスマホ）
 *  白ベース。ホームは壁紙の上にSVGアイコンが並ぶ。
 *  ※擬似スマホの本番デザイン。各アプリUIは今後さらに作り込む。
 * ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0;
    -webkit-tap-highlight-color: transparent; }
body {
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  background: #d9dbe3;
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh; padding: 20px;
}

/* スマホ枠 */
.phone {
  width: 360px; height: 720px;
  background: #fff; color: #1c1c1e;
  border-radius: 40px; overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  border: 10px solid #111;
}
#screen { flex: 1; overflow-y: auto; position: relative; background: #f2f2f7; }

/* 通報トレイ（常設） */
.tray { padding: 8px 12px; background: #fff; border-top: 1px solid #eee; }
#report {
  width: 100%; padding: 10px; cursor: pointer; font-size: 13px;
  background: #fff0f0; color: #d9534f; border: 1px solid #f3c6c6; border-radius: 12px;
}
#report:active { background: #ffe0e0; }

/* ステータスバー */
.statusbar {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between;
  padding: 10px 20px 4px; font-size: 12px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* ---- ホーム（壁紙＋アイコン） ---- */
.home { position: relative; min-height: 100%; }
.wallpaper {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.wallpaper svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.wallpaper.tappable { cursor: pointer; }

.grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px;
  padding: 20px 18px;
}
.app { text-align: center; cursor: pointer; }
.app.locked { cursor: default; }
.app .ic {
  position: relative; width: 56px; height: 56px; margin: 0 auto 5px;
  border-radius: 15px; overflow: visible;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.app .ic svg { width: 100%; height: 100%; display: block; border-radius: 15px; }
.app:active .ic { transform: scale(.92); transition: transform .1s; }
.applabel {
  font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4);
  display: block;
}
.badge {
  position: absolute; top: -5px; right: -5px; z-index: 3;
  background: #ff3b30; color: #fff; border-radius: 10px;
  font-size: 11px; min-width: 18px; height: 18px; line-height: 18px;
  padding: 0 5px; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* ---- アプリ画面（共通のガワ。個別UIは今後アプリごとに） ---- */
.appview { display: flex; flex-direction: column; height: 100%; background: #f2f2f7; }
.bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 12px; background: #fff; border-bottom: 1px solid #e5e5ea;
  font-weight: 600; position: sticky; top: 0; z-index: 2;
}
.bar button { background: none; color: #007aff; border: none; font-size: 20px; cursor: pointer; }

.clues { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.clue {
  background: #fff; padding: 14px; border-radius: 12px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.06); font-size: 14px;
}
.clue:active { background: #f0f0f5; }
.clue.seen { opacity: .55; }
.empty { color: #aaa; padding: 30px; text-align: center; }

/* ---- メッセージ ---- */
.log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f2f2f7; }
.msg { max-width: 78%; padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.5; }
.msg.fumi { background: #e9e9eb; color: #000; align-self: flex-start; border-bottom-left-radius: 5px; }
.msg.hina { background: #fff0e6; color: #000; align-self: flex-start; border-bottom-left-radius: 5px; }
.msg.me   { background: #007aff; color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }

#actionslot { padding: 12px; background: #fff; }
.action {
  width: 100%; padding: 13px; cursor: pointer; font-size: 15px; font-weight: 600;
  background: #007aff; color: #fff; border: none; border-radius: 14px;
}
.action:active { background: #0062cc; }

/* ---- モーダル（手がかり拡大・壁紙の真実） ---- */
#modal {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.5); align-items: center; justify-content: center; padding: 30px;
}
.sheet {
  background: #fff; color: #1c1c1e; padding: 22px; border-radius: 18px;
  max-width: 300px; max-height: 80%; overflow-y: auto; text-align: center;
}
.sheet h3 { margin-bottom: 10px; }
.sheet ul { margin: 10px 0; list-style: none; text-align: left; }
.sheet ul li { padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; color: #333; }
.sheet pre { white-space: pre-wrap; background: #f7f7fa; padding: 12px; border-radius: 8px; font-family: inherit; text-align: left; }
.sheet .img { background: #f0f0f5; padding: 30px; text-align: center; margin: 6px 0; border-radius: 10px; color: #999; font-size: 12px; }
.sheet .post { text-align: left; padding: 8px; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.sheet .truth { color: #34a853; font-weight: 600; }
.sheet .date { font-size: 22px; font-weight: 700; color: #ff7a7a; }
.sheet button { margin-top: 16px; padding: 8px 20px; cursor: pointer; border: none; background: #007aff; color: #fff; border-radius: 10px; }
.walltruth svg { width: 140px; height: 240px; border-radius: 10px; margin-bottom: 12px; }
.sheet p { font-size: 13px; line-height: 1.8; color: #444; }

/* ---- トースト ---- */
#toast {
  position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: rgba(0,0,0,.8); color: #fff; padding: 8px 16px; border-radius: 20px;
  font-size: 12px; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; }

/* ---- エンディング ---- */
.ending { padding: 34px 24px; line-height: 1.9; font-size: 14px; color: #333; }
.ending .silence { text-align: center; font-size: 24px; color: #ccc; margin: 40px 0; }
.ending .photo { background: #f0f0f5; color: #aaa; text-align: center; padding: 50px 20px; border-radius: 12px; margin: 18px 0; font-size: 12px; }
.ending .timeskip { text-align: center; color: #999; margin: 24px 0; font-size: 13px; }
.ending p { margin-bottom: 12px; }
.ending.bad { color: #b0605c; }
#replyslot { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
#replyslot input { padding: 11px; border-radius: 12px; border: 1px solid #ddd; background: #fff; font-size: 14px; }
#replyslot button { padding: 11px; cursor: pointer; border-radius: 12px; border: none; background: #007aff; color: #fff; font-weight: 600; }
#replyslot .ghost { background: #f2f2f7; color: #888; }