* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  font-family:'Hiragino Maru Gothic ProN','BIZ UDPGothic',sans-serif;
  background:linear-gradient(165deg,#e9f7ee,#dff0f7 55%,#fdf0dd);
  color:#3a4a3f; min-height:100vh; overflow-x:hidden;
  user-select:none; -webkit-user-select:none;
}
.screen { display:none; padding:14px; max-width:680px; margin:0 auto; min-height:100vh; flex-direction:column; }
.screen.active { display:flex; }

.title { font-size:1.9rem; text-align:center; color:#2e8b6f; margin:10px 0 6px; text-shadow:0 2px 0 #fff; }
.lead { text-align:center; color:#6d8a7c; line-height:1.7; margin-bottom:14px; }
.hint { text-align:center; color:#7f9a8c; font-size:.85rem; margin-top:14px; line-height:1.6; }

.card { background:#fff; border-radius:22px; padding:18px; box-shadow:0 6px 18px rgba(0,0,0,.1); }
.row-label { font-weight:bold; color:#2e8b6f; margin-bottom:8px; }

.room-input { width:100%; padding:12px; font-size:1.2rem; text-align:center; font-family:inherit;
  border:3px solid #bfe3d2; border-radius:14px; margin-bottom:16px; color:#2e8b6f; font-weight:bold; }
.room-input:focus { outline:none; border-color:#2e8b6f; }

.role-row { display:flex; gap:12px; }
.role-btn { flex:1; padding:18px 8px; border:none; border-radius:20px; cursor:pointer;
  font-family:inherit; color:#fff; display:flex; flex-direction:column; align-items:center; gap:4px; }
.role-btn.hide { background:linear-gradient(135deg,#7bc6ff,#3f8fd6); box-shadow:0 6px 0 #2f74b0; }
.role-btn.seek { background:linear-gradient(135deg,#ffc46b,#ff8f3a); box-shadow:0 6px 0 #d96f22; }
.role-btn:active { transform:translateY(4px); box-shadow:none; }
.role-emoji { font-size:2.4rem; }
.role-name { font-size:1.3rem; font-weight:bold; }
.role-desc { font-size:.8rem; opacity:.9; }

/* トップバー */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.back-btn { background:#fff; border:2px solid #cfe3d8; border-radius:12px; padding:8px 12px;
  font-family:inherit; font-weight:bold; color:#6d8a7c; cursor:pointer; }
.topbar-title { font-weight:bold; color:#2e8b6f; font-size:1.1rem; }
.conn { font-size:.78rem; color:#c0392b; font-weight:bold; }
.conn.on { color:#3fa64a; }

.step-msg { background:#fff; border-radius:14px; padding:10px 14px; font-weight:bold;
  color:#2e8b6f; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,.07); margin-bottom:8px; line-height:1.5; }

/* あそびかた えらび */
.mode-row { display:flex; gap:8px; margin-bottom:8px; }
.mode-btn { flex:1; padding:10px 6px; border:3px solid #d8e8df; background:#fff; border-radius:16px;
  cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:2px; }
.mode-btn.on { border-color:#2e8b6f; background:#f0fbf6; box-shadow:0 0 0 3px #cdeade; }
.mode-emoji { font-size:1.5rem; }
.mode-name { font-size:.9rem; font-weight:bold; color:#2e8b6f; }
.mode-desc { font-size:.7rem; color:#7f9a8c; text-align:center; line-height:1.3; }

.setting-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.set-label { font-weight:bold; color:#2e8b6f; font-size:.9rem; flex:0 0 auto; }
.opt-row { display:flex; gap:6px; flex:1; }
.opt { flex:1; padding:8px 4px; border:3px solid #d8e8df; background:#fff; border-radius:12px;
  font-family:inherit; font-size:.85rem; font-weight:bold; color:#7f9a8c; cursor:pointer; }
.opt.on { background:linear-gradient(135deg,#4ecb9a,#2e8b6f); border-color:#24705a; color:#fff; }

.step-msg.done { background:#e6f9ef; color:#1f7a54; box-shadow:0 0 0 3px #b7e7cf inset; }

/* いまの えらび（要約バー） */
.summary-bar { display:flex; align-items:center; gap:6px; background:#fff; border-radius:14px;
  padding:6px 10px; margin-bottom:6px; box-shadow:0 3px 10px rgba(0,0,0,.08); }
.sum-label { font-size:.72rem; color:#7f9a8c; font-weight:bold; }
#sum-char { width:34px; height:34px; object-fit:contain; }
#sum-bg { width:46px; height:32px; object-fit:cover; border-radius:7px; }
.sum-level { font-size:.78rem; font-weight:bold; color:#2e8b6f; background:#e6f4ee;
  padding:4px 8px; border-radius:9px; }
.sum-btn { margin-left:auto; background:#fff; border:2px solid #7fd4ab; color:#2e8b6f; border-radius:11px;
  padding:7px 12px; font-family:inherit; font-weight:bold; font-size:.82rem; cursor:pointer; }
.sum-btn:active { transform:translateY(2px); }
.sum-btn.wide { width:100%; margin:6px 0 0; padding:10px; font-size:.95rem;
  background:linear-gradient(135deg,#4ecb9a,#2e8b6f); color:#fff; border:none; }

.pick-panel { background:#fff; border-radius:16px; padding:10px 12px; margin-bottom:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.1); }
.pick-head { font-weight:bold; color:#2e8b6f; font-size:.85rem; margin:6px 0 4px; }

/* ドラッグするキャラ */
.drag-zone { display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px;
  padding:8px 14px; margin-top:8px; box-shadow:0 3px 10px rgba(0,0,0,.1); }
.drag-token { flex:0 0 auto; width:74px; height:74px; border-radius:16px; cursor:grab;
  background:linear-gradient(135deg,#fff6d8,#ffe6a8); border:3px dashed #e0a94a;
  display:flex; align-items:center; justify-content:center; touch-action:none;
  animation:tokenBob 1.8s ease-in-out infinite; }
.drag-token:active { cursor:grabbing; transform:scale(.94); }
.drag-token img { width:82%; height:82%; object-fit:contain; pointer-events:none; }
@keyframes tokenBob { 50% { transform:translateY(-5px); } }
.drag-say { font-size:.85rem; color:#7f9a8c; font-weight:bold; line-height:1.5; }
.drag-ghost { position:fixed; width:84px; height:84px; object-fit:contain; transform:translate(-50%,-50%);
  pointer-events:none; z-index:80; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.spot.hover { z-index:6; }
.spot.hover .spot-cover { transform:scale(1.16) translateY(-6%); filter:drop-shadow(0 0 8px #ffd24a) drop-shadow(0 3px 5px rgba(0,0,0,.4)); }

/* かくし終わった表示 */
.placed-box { display:flex; align-items:center; gap:10px; background:#e6f9ef; border:3px solid #7fd4ab;
  border-radius:16px; padding:10px 14px; margin-top:8px; }
.placed-emoji { font-size:1.7rem; }
.placed-text { font-weight:bold; color:#1f7a54; font-size:.95rem; }
.placed-text b { font-size:1.1rem; }
.placed-redo { margin-left:auto; flex:0 0 auto; background:#fff; border:2px solid #7fd4ab; color:#2e8b6f;
  border-radius:12px; padding:8px 12px; font-family:inherit; font-weight:bold; font-size:.85rem; cursor:pointer; }
.placed-redo:active { transform:translateY(2px); }

/* えらぶチップ */
.chooser { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:6px; }
.chip { flex:0 0 auto; border:3px solid #d8e8df; background:#fff; border-radius:14px; padding:4px;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; font-family:inherit; }
.chip img { width:60px; height:40px; object-fit:cover; border-radius:9px; display:block; }
.chip span { font-size:.7rem; color:#6d8a7c; font-weight:bold; }
.chip.on { border-color:#2e8b6f; box-shadow:0 0 0 3px #cdeade; }
.chooser.chars .chip img { width:46px; height:46px; object-fit:contain; }

/* さがすキャラ */
.target-row { display:flex; align-items:center; gap:12px; background:#fff; border-radius:14px;
  padding:8px 14px; margin-bottom:8px; box-shadow:0 3px 10px rgba(0,0,0,.08); }
.target-label { font-weight:bold; color:#e0722f; }
.target-row img { width:56px; height:56px; object-fit:contain; margin-left:auto;
  animation:targetBeat 1.6s ease-in-out infinite; }
@keyframes targetBeat { 50% { transform:scale(1.1); } }

/* ステージ */
.stage-wrap { flex:1; display:flex; align-items:center; }
.stage { position:relative; width:100%; aspect-ratio:4/3; border-radius:18px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.16); background:#dfe8e3; }
.stage-bg { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.items { position:absolute; inset:0; }

/* ---- モノ（かくれ場所）---- */
.spot { position:absolute; width:20%; aspect-ratio:1; transform:translate(-50%,-50%); cursor:pointer; }
.spot-inside, .spot-cover { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.spot-inside { opacity:0; transition:opacity .25s .18s; }
.spot-inside img { width:76%; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.spot-inside .empty-mark { font-size:1.6rem; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.6); }
.spot-cover svg { width:100%; height:100%; display:block; filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.spot-cover { transition:transform .45s cubic-bezier(.3,1.3,.5,1), opacity .45s; transform-origin:50% 100%; }
.spot:active .spot-cover { transform:scale(.94); }

/* あいた ときの うごき */
.spot.open .spot-inside { opacity:1; }
.spot.open .spot-cover { pointer-events:none; }
.spot.open[data-anim="lift"]  .spot-cover { transform:translateY(-34%) rotate(-14deg); opacity:.35; }
.spot.open[data-anim="slide"] .spot-cover { transform:translateY(30%); opacity:.35; }
.spot.open[data-anim="swing"] .spot-cover { transform-origin:8% 50%; transform:perspective(220px) rotateY(-72deg); opacity:.5; }
.spot.open[data-anim="part"]  .spot-cover { transform:scale(.55) translateY(28%); opacity:.3; }

.spot.picked::after { content:'🙈'; position:absolute; top:-6px; right:-6px; font-size:1.3rem;
  background:#fff; border-radius:50%; padding:2px 3px; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.spot.answer { animation:answerPop .7s cubic-bezier(.3,1.6,.5,1); z-index:5; }
.spot.answer .spot-inside { opacity:1; }
@keyframes answerPop { 0%{ transform:translate(-50%,-50%) scale(1); } 45%{ transform:translate(-50%,-50%) scale(1.35); } 100%{ transform:translate(-50%,-50%) scale(1.12); } }

/* ---- おおぜい（ウォーリー式）---- */
.crowd { position:absolute; width:calc(11% * var(--s,1)); transform:translate(-50%,-50%); cursor:pointer; }
.crowd img { width:100%; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.crowd:active { transform:translate(-50%,-50%) scale(.9); }
.crowd.missed { animation:shake .4s; }
.crowd.missed::after { content:'✕'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#e8341c; font-size:1.6rem; font-weight:bold; text-shadow:0 0 4px #fff, 0 0 4px #fff; }
@keyframes shake { 25%{ transform:translate(-50%,-50%) rotate(-12deg);} 75%{ transform:translate(-50%,-50%) rotate(12deg);} }
.crowd.marked { outline:3px dashed #ffd24a; outline-offset:3px; border-radius:50%; }
.crowd.answer { z-index:5; animation:answerPop2 .7s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes answerPop2 { 0%{ transform:translate(-50%,-50%) scale(1);} 100%{ transform:translate(-50%,-50%) scale(2);} }
.crowd.answer img { filter:drop-shadow(0 0 10px #ffd24a) drop-shadow(0 2px 4px rgba(0,0,0,.4)); }

.dark-layer { position:absolute; inset:0; pointer-events:none; }

/* あつさメーター */
.meter-wrap { margin-bottom:8px; }
.meter { height:20px; background:#e2ecf2; border-radius:10px; overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.08); }
.meter-fill { height:100%; width:0; border-radius:10px; transition:width .45s ease;
  background:linear-gradient(90deg,#6cc6f0,#ffd24a 55%,#ff5b3a); }
.meter-label { text-align:center; font-weight:bold; margin-top:4px; font-size:1.15rem; color:#6d8a7c; }
.meter-label.hot  { color:#e8341c; animation:beat .5s infinite; }
.meter-label.warm { color:#ef8a1f; }
.meter-label.cool { color:#4f9ec9; }
.meter-label.cold { color:#3f7fd6; }
@keyframes beat { 50% { transform:scale(1.15); } }

.try-row { text-align:center; font-weight:bold; color:#6d8a7c; margin-top:8px; }
.try-row b { color:#e0722f; font-size:1.3rem; }

/* ヒントボタン */
.hint-row { display:flex; gap:8px; margin-top:10px; }
.hint-btn { flex:1; padding:13px 4px; border:none; border-radius:14px; cursor:pointer;
  font-family:inherit; font-size:.95rem; font-weight:bold; color:#fff; }
.hint-btn.hot  { background:linear-gradient(135deg,#ff8a5b,#e8341c); box-shadow:0 4px 0 #b8250f; }
.hint-btn.warm { background:linear-gradient(135deg,#ffd24a,#f0a020); box-shadow:0 4px 0 #c07d10; }
.hint-btn.cold { background:linear-gradient(135deg,#8fd6ff,#3f8fd6); box-shadow:0 4px 0 #2f74b0; }
.hint-btn:active, .hint-btn.sent { transform:translateY(3px); box-shadow:none; }

.big-btn { display:block; width:100%; margin-top:10px; padding:15px; border:none; border-radius:18px;
  font-family:inherit; font-size:1.25rem; font-weight:bold; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#4ecb9a,#2e8b6f); box-shadow:0 6px 0 #24705a; }
.big-btn:active { transform:translateY(4px); box-shadow:0 2px 0 #24705a; }
.big-btn:disabled { background:#cfd8d4; box-shadow:0 6px 0 #b3bdb8; cursor:default; }
.big-btn.sub { background:linear-gradient(135deg,#b9c8c1,#8fa39a); box-shadow:0 6px 0 #75887f; font-size:1rem; }
.two-btn { display:flex; gap:8px; }
.two-btn .big-btn { flex:1; }

/* ふきだし */
.bubble { position:fixed; left:50%; top:16%; transform:translateX(-50%) scale(.7); opacity:0;
  background:#fff; border:4px solid #ffd24a; border-radius:20px; padding:14px 24px;
  font-size:1.5rem; font-weight:bold; color:#e0722f; box-shadow:0 8px 20px rgba(0,0,0,.2);
  pointer-events:none; z-index:60; transition:all .3s cubic-bezier(.3,1.6,.5,1); }
.bubble.show { opacity:1; transform:translateX(-50%) scale(1); }

/* クリア */
.clear-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none;
  align-items:center; justify-content:center; z-index:70; padding:20px; }
.clear-overlay.show { display:flex; }
.clear-box { background:#fff; border-radius:26px; padding:24px; text-align:center; max-width:340px; width:100%;
  animation:pop .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop { from { transform:scale(.6); opacity:0; } to { transform:scale(1); opacity:1; } }
.clear-emoji { font-size:3.4rem; }
.clear-title { font-size:1.8rem; font-weight:bold; color:#e0722f; margin-bottom:10px; }
.clear-box img { width:56%; max-width:180px; }