* { 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,#fff6e2,#ffe7d1 60%,#ffd9e6);
  color:#4a3b2a; min-height:100vh; overflow-x:hidden;
  user-select:none; -webkit-user-select:none;
}
.screen { display:none; padding:16px; max-width:620px; margin:0 auto; min-height:100vh; flex-direction:column; }
.screen.active { display:flex; }

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

.opt-row { display:flex; gap:8px; }
.opt-row.wrap { flex-wrap:wrap; }
.opt {
  flex:1; min-width:84px; padding:12px 6px; border:3px solid #f0d6b0; background:#fffaf2;
  border-radius:14px; font-family:inherit; font-size:1rem; font-weight:bold; color:#a2795a; cursor:pointer;
}
.opt.on { background:linear-gradient(135deg,#ffcf6b,#ff9f45); border-color:#e08a2a; color:#fff; box-shadow:0 4px 0 #d9791f; }
.opt:active { transform:translateY(2px); }

.big-btn {
  display:block; width:100%; margin-top:16px; padding:18px; border:none; border-radius:18px;
  font-family:inherit; font-size:1.4rem; font-weight:bold; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,#ffb03a,#ff7e5f); box-shadow:0 6px 0 #d9642f;
}
.big-btn:active { transform:translateY(4px); box-shadow:0 2px 0 #d9642f; }
.big-btn.sub { background:linear-gradient(135deg,#c9bda8,#a2937c); box-shadow:0 6px 0 #85765f; font-size:1.1rem; }
.big-btn.found { background:linear-gradient(135deg,#7ed957,#3fa64a); box-shadow:0 6px 0 #2f8038; }
.big-btn.pass { background:linear-gradient(135deg,#c9bda8,#a2937c); box-shadow:0 6px 0 #85765f; font-size:1.1rem; flex:0 0 34%; }

/* あそぶ画面 */
.hud { display:flex; justify-content:space-between; background:#fff; border-radius:14px; padding:10px 16px;
  box-shadow:0 3px 10px rgba(0,0,0,.08); font-weight:bold; color:#a2795a; }
.hud-item b { color:#e0722f; font-size:1.2rem; margin-left:6px; }

.quest-card { background:#fff; border-radius:26px; padding:22px 18px; margin-top:14px; text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.12); }
.quest-card.pop { animation:pop .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop { from { transform:scale(.7); opacity:0; } to { transform:scale(1); opacity:1; } }
.quest-icon { width:min(42vw,170px); height:min(42vw,170px); margin:0 auto 10px; }
.quest-icon svg { width:100%; height:100%; display:block; }
.quest-text { font-size:clamp(1.6rem,7vw,2.4rem); font-weight:bold; color:#e0722f; line-height:1.3; }
.quest-sub { margin-top:8px; color:#a2795a; font-size:.95rem; }

.timer-wrap { position:relative; width:130px; height:130px; margin:14px auto 0; }
.timer-ring { width:100%; height:100%; transform:rotate(-90deg); }
.tr-bg { fill:none; stroke:#f0e0c8; stroke-width:11; }
.tr-fg { fill:none; stroke:#ffa23a; stroke-width:11; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.tr-fg.warn { stroke:#ff4d4d; }
.timer-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2.6rem; font-weight:bold; color:#e0722f; }
.timer-num.warn { color:#ff2d2d; animation:beat .5s infinite; }
@keyframes beat { 50% { transform:scale(1.18); } }

.btn-row { display:flex; gap:10px; margin-top:auto; padding-top:14px; }
.btn-row .big-btn { margin-top:0; }

/* けっか */
.stars { text-align:center; font-size:2.6rem; margin-bottom:10px; letter-spacing:4px; }
.score-big { text-align:center; font-size:1.3rem; font-weight:bold; color:#a2795a; margin-bottom:12px; }
.score-big b { font-size:2.4rem; color:#e0722f; }
.result-list { list-style:none; max-height:34vh; overflow-y:auto; }
.result-list li { padding:8px 12px; border-radius:10px; margin-bottom:6px; font-weight:bold; }
.result-list li.ok { background:#eafbe7; color:#3fa64a; }
.result-list li.ng { background:#f4f1ec; color:#a2937c; }

/* フラッシュ */
.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,100,.75); }
@keyframes fadeout { 0%{opacity:0;transform:scale(.8);} 25%{opacity:1;transform:scale(1);} 100%{opacity:0;} }

/* ---- ジェスチャー固有 ---- */
body { background:linear-gradient(165deg,#eef2ff,#e3e9ff 55%,#ffe6f2); }
.title { color:#5a4ad1; }
.row-label { color:#5a4ad1; }
.opt.on { background:linear-gradient(135deg,#9b8cff,#6d5ae0); border-color:#5a4ad1; box-shadow:0 4px 0 #4a3cc0; }
.big-btn { background:linear-gradient(135deg,#9b8cff,#6d5ae0); box-shadow:0 6px 0 #4a3cc0; }
.big-btn:active { box-shadow:0 2px 0 #4a3cc0; }
.big-btn.ok { background:linear-gradient(135deg,#7ed957,#3fa64a); box-shadow:0 6px 0 #2f8038; }
.big-btn.skip { flex:0 0 34%; }
.quest-text { color:#5a4ad1; }
.quest-hint { margin-top:8px; color:#8a84b8; font-size:.95rem; }
.tr-fg { stroke:#8b7bf0; }
.timer-num { color:#5a4ad1; }
.hud-item.timer { font-size:1.5rem; font-weight:bold; color:#5a4ad1; }
.hud-item.timer.warn { color:#ff2d2d; animation:beat .5s infinite; }
.hud-item b { color:#5a4ad1; }
.result-list li.ok { background:#eef0ff; color:#5a4ad1; }

/* よーいどん */
#screen-ready { align-items:center; justify-content:center; }
.ready-box { text-align:center; }
.ready-num { font-size:8rem; font-weight:bold; color:#5a4ad1; line-height:1;
  animation:countpop .8s ease-out; }
@keyframes countpop { from { transform:scale(2); opacity:0; } to { transform:scale(1); opacity:1; } }
.ready-txt { font-size:1.4rem; color:#8a84b8; margin-top:10px; font-weight:bold; }