* { 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,#fdf0ff,#eae6ff 55%,#e2f2ff);
  color:#41355c; min-height:100vh; overflow-x:hidden;
  user-select:none; -webkit-user-select:none;
}
.screen { display:none; padding:14px; max-width:640px; margin:0 auto; min-height:100vh; flex-direction:column; }
.screen.active { display:flex; }

.title { font-size:1.9rem; text-align:center; color:#7b4fd1; margin:10px 0 6px; text-shadow:0 2px 0 #fff; }
.lead { text-align:center; color:#7a6f96; line-height:1.7; margin-bottom:14px; }
.hint { text-align:center; color:#8f85ab; 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:#7b4fd1; margin:12px 0 8px; }
.row-label:first-child { margin-top:0; }

.opt-row { display:flex; gap:8px; flex-wrap:wrap; }
.opt { flex:1 1 70px; min-width:70px; padding:11px 6px; border:3px solid #e4dcf5; background:#fbf9ff;
  border-radius:14px; font-family:inherit; font-size:.95rem; font-weight:bold; color:#8f85ab; cursor:pointer; }
.opt.on { background:linear-gradient(135deg,#b79cff,#7b4fd1); border-color:#653cb5; color:#fff; box-shadow:0 4px 0 #563099; }
.opt:active { transform:translateY(2px); }

.mode-row { display:flex; gap:8px; }
.mode-btn { flex:1; padding:12px 6px; border:3px solid #e4dcf5; background:#fbf9ff; border-radius:16px;
  cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:3px; }
.mode-btn.on { border-color:#7b4fd1; background:#f3edff; box-shadow:0 0 0 3px #ddd0ff; }
.mode-emoji { font-size:1.7rem; }
.mode-name { font-size:.95rem; font-weight:bold; color:#7b4fd1; }
.mode-desc { font-size:.72rem; color:#8f85ab; text-align:center; line-height:1.35; }

.big-btn { display:block; width:100%; margin-top:14px; padding:16px; border:none; border-radius:18px;
  font-family:inherit; font-size:1.3rem; font-weight:bold; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#b79cff,#7b4fd1); box-shadow:0 6px 0 #563099; }
.big-btn:active { transform:translateY(4px); box-shadow:0 2px 0 #563099; }
.big-btn:disabled { background:#ded8ea; box-shadow:0 6px 0 #c3bcd4; cursor:default; }
.big-btn.sub { background:linear-gradient(135deg,#c3bcd4,#9a92ad); box-shadow:0 6px 0 #7f7791; font-size:1.05rem; }

/* フェーズ帯 */
.phase-bar { display:flex; align-items:center; justify-content:center; gap:12px;
  border-radius:16px; padding:12px 16px; font-weight:bold; font-size:1.1rem; color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.12); margin-bottom:10px; text-align:center; }
.phase-bar.look { background:linear-gradient(135deg,#ffcf6b,#ff9f45); }
.phase-bar.hide { background:linear-gradient(135deg,#8f86b5,#5f5680); }
.phase-bar.find { background:linear-gradient(135deg,#7ed957,#3fa64a); }
.phase-count { background:rgba(255,255,255,.9); color:#41355c; border-radius:20px;
  padding:2px 14px; font-size:1.4rem; min-width:56px; }

/* ばんめん */
.board-wrap { flex:1; display:flex; align-items:center; justify-content:center; }
.board { display:grid; gap:10px; width:100%; }
.cell { background:#fff; border-radius:16px; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.1); cursor:pointer; overflow:hidden; transition:transform .12s; }
.cell:active { transform:scale(.94); }
.cell.empty { background:repeating-linear-gradient(45deg,#f2eefb,#f2eefb 8px,#e8e1f7 8px,#e8e1f7 16px);
  box-shadow:inset 0 0 0 3px #ddd3f0; }
.cell-art { width:78%; height:78%; display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.cell-art svg { width:100%; height:100%; display:block; }
.cell.sel { box-shadow:0 0 0 5px #ffd24a, 0 4px 10px rgba(0,0,0,.15); }
.cell.hit { animation:hitPop .5s cubic-bezier(.3,1.6,.5,1); box-shadow:0 0 0 5px #3fa64a; }
@keyframes hitPop { 50% { transform:scale(1.18); } }
.cell.miss { animation:missShake .4s; }
@keyframes missShake { 25%{transform:translateX(-7px);} 75%{transform:translateX(7px);} }

/* かえる画面 */
.change-lead { text-align:center; color:#7a6f96; font-size:.92rem; line-height:1.6; margin-bottom:8px; }
.kind-row { display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:10px; }
.kind-btn { border:3px solid #e4dcf5; background:#fff; border-radius:14px; padding:8px 12px;
  font-family:inherit; font-size:.85rem; font-weight:bold; color:#7b4fd1; cursor:pointer;
  display:flex; align-items:center; gap:5px; }
.kind-btn.on { background:linear-gradient(135deg,#b79cff,#7b4fd1); color:#fff; border-color:#653cb5; }
.kb-emoji { font-size:1.05rem; }

.curtain { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#5f5680; border-radius:24px; color:#fff; padding:60px 20px; margin-top:10px; }
.curtain-emoji { font-size:5rem; animation:peek 1.2s ease-in-out infinite; }
@keyframes peek { 50% { transform:translateY(-10px) rotate(-6deg); } }
.curtain-txt { font-size:1.3rem; font-weight:bold; margin-top:12px; }

/* けっか */
.answer-box { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:12px; }
.ab-col { text-align:center; }
.ab-col small { color:#8f85ab; font-weight:bold; font-size:.78rem; }
.ab-cell { width:96px; height:96px; background:#f7f4ff; border-radius:16px; margin-top:4px;
  display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 3px #e4dcf5; }
.mini { width:74%; height:74%; }
.mini svg { width:100%; height:100%; display:block; }
.mini.none { display:flex; align-items:center; justify-content:center; color:#b4abc8; font-weight:bold; font-size:.9rem; }
.ab-arrow { font-size:1.6rem; color:#7b4fd1; }
.answer-text { text-align:center; font-size:1.25rem; font-weight:bold; color:#7b4fd1; margin-bottom:8px; }
.score-line { text-align:center; color:#7a6f96; font-weight:bold; }
.score-line b { font-size:1.6rem; color:#7b4fd1; }

/* フラッシュ */
.flash { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  font-size:clamp(2rem,10vw,3.6rem); font-weight:bold; color:#fff; pointer-events:none; z-index:50; }
.flash.show { display:flex; animation:fadeout .8s forwards; }
.flash.ok { background:rgba(63,166,74,.82); }
.flash.ng { background:rgba(120,110,140,.75); }
@keyframes fadeout { 0%{opacity:0;transform:scale(.8);} 25%{opacity:1;transform:scale(1);} 100%{opacity:0;} }

/* かえかたは 10しゅるい あるので すこし小さめに */
#opt-kinds .opt { flex:1 1 96px; min-width:96px; padding:8px 4px; font-size:.82rem; border-width:2px; }

/* せまい画面では 上のあきを つめて 1画面に おさめる */
@media (max-height:900px){
  .title { font-size:1.6rem; margin:4px 0 4px; }
  .lead { margin-bottom:10px; font-size:.92rem; }
  .card { padding:14px; }
  .row-label { margin:9px 0 6px; }
  .hint { margin-top:8px; }
}