* { 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:#0e1424; color:#fff; overflow:hidden; width:100vw; height:100vh; }
.screen { position:fixed; inset:0; display:none; justify-content:center; align-items:center; }
.screen.active { display:flex; }

/* ボタン */
.btn-big { padding:16px 50px; font-size:clamp(1.1rem,3.5vw,1.6rem); border:none; border-radius:50px;
  background:linear-gradient(135deg,#f7971e,#ffd200); color:#333; font-weight:bold; cursor:pointer;
  box-shadow:0 6px 18px rgba(255,200,0,.4); margin-top:10px; transition:transform .1s; }
.btn-big:active { transform:scale(.95); }
.btn-small { margin-top:12px; padding:10px 26px; font-size:1rem; border:2px solid #8fb7e0; border-radius:50px;
  background:transparent; color:#8fb7e0; cursor:pointer; }

/* タイトル */
#screen-title { background:linear-gradient(135deg,#10162b,#1b2a4a); }
.title-box { text-align:center; animation:fadeUp .5s; }
.title-box h1 { font-size:clamp(2rem,6vw,3.4rem); color:#ffd200; text-shadow:0 0 18px rgba(255,210,0,.6); margin-bottom:16px; }
.subtitle { font-size:clamp(1rem,3vw,1.3rem); color:#aad4f5; line-height:1.7; margin-bottom:36px; }

/* ゲーム */
#screen-game { flex-direction:column; background:#0e1424; }
#top-bar { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px; background:rgba(0,0,0,.5); }
#stage-label { font-size:clamp(.9rem,2.5vw,1.2rem); font-weight:bold; color:#aad4f5; }
#found-label { font-size:clamp(1rem,3vw,1.4rem); font-weight:bold; color:#ffd200; }
#found-n { font-size:1.3em; }
.bar-btn { padding:8px 16px; border-radius:30px; border:2px solid #8fb7e0; background:#1c2b48; color:#fff;
  font-size:.95rem; cursor:pointer; display:flex; align-items:center; gap:4px; }
.bar-btn:disabled { opacity:.35; }
.bar-btn small { font-size:.7rem; color:#ffd200; }

/* パネル */
#panels { flex:1; width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:14px; }
.panel-divider { font-size:1.2rem; font-weight:bold; color:#5b6b8a; }
.panel { position:relative; aspect-ratio:4/3; background-size:cover; background-position:center;
  border-radius:16px; border:3px solid #3a4d72; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.5); }
/* 横並びが基本、狭ければ縦並び */
@media (max-aspect-ratio:1/1){ #panels{ flex-direction:column; } .panel-divider{ transform:rotate(90deg);} }

/* キャラ（シール風） */
.sticker { position:absolute; transform:translate(-50%,-50%); border-radius:50%;
  background:rgba(255,255,255,.92); box-shadow:0 2px 6px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; transition:filter .6s, opacity .6s, transform .6s; }
.sticker img { width:84%; height:84%; object-fit:contain; }

/* タップ可能スポット */
.spot { position:absolute; transform:translate(-50%,-50%); border-radius:50%; cursor:pointer; z-index:5; }
.spot.found { cursor:default; }

/* みつけたマーク */
.marker { position:absolute; transform:translate(-50%,-50%); border-radius:50%;
  border:4px solid #ff4d6d; box-shadow:0 0 14px #ff4d6d; pointer-events:none; z-index:6;
  animation:markPop .4s; }
@keyframes markPop { 0%{transform:translate(-50%,-50%) scale(1.8);opacity:0;} 100%{transform:translate(-50%,-50%) scale(1);opacity:1;} }
.marker.hint { border-color:#ffd200; box-shadow:0 0 14px #ffd200; animation:hintBlink 1s 3; }
@keyframes hintBlink { 0%,100%{opacity:1;} 50%{opacity:.2;} }

/* ハズレ印 */
.wrongmark { position:absolute; transform:translate(-50%,-50%); color:#888; font-size:2rem; font-weight:bold;
  pointer-events:none; z-index:6; animation:wrongFade .6s forwards; }
@keyframes wrongFade { 0%{opacity:1;transform:translate(-50%,-50%) scale(1.4);} 100%{opacity:0;transform:translate(-50%,-50%) scale(.8);} }

/* クリア */
#screen-clear { background:radial-gradient(circle at 50% 40%,#1e3c72,#0c1322); }
.clear-box { text-align:center; animation:fadeUp .5s; display:flex; flex-direction:column; align-items:center; padding:30px; }
#clear-stars { font-size:clamp(2rem,6vw,3rem); letter-spacing:4px; margin-bottom:6px; }
.clear-box h2 { font-size:clamp(1.8rem,5vw,2.8rem); color:#ffd200; text-shadow:0 0 14px rgba(255,210,0,.6); margin-bottom:10px; }
#clear-msg { font-size:clamp(1rem,3vw,1.3rem); color:#cce4ff; line-height:1.6; margin-bottom:10px; }

/* トースト */
#toast { position:fixed; top:18%; left:50%; transform:translateX(-50%) scale(.8);
  background:rgba(0,0,0,.85); border:3px solid #ffd200; border-radius:18px; padding:14px 32px;
  font-size:clamp(1.1rem,3.5vw,1.7rem); font-weight:bold; opacity:0; pointer-events:none; z-index:300; text-align:center; }
#toast.show { animation:toastPop 1.5s forwards; }
@keyframes toastPop { 0%{opacity:0;transform:translateX(-50%) scale(.6);} 15%{opacity:1;transform:translateX(-50%) scale(1.1);}
  30%{transform:translateX(-50%) scale(1);} 80%{opacity:1;} 100%{opacity:0;} }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }