/* ===== はこだてKids おちものパズル（スマホ縦画面レイアウト） ===== */
.og-wrap{
  --og-coral:#FF6B6B; --og-orange:#FF9F43; --og-yellow:#FECA57;
  --og-ink:#2D2D2D; --og-sub:#7a6f66; --og-card:#ffffff; --og-line:#f3e3d6;
  --og-board1:#FFF8F1; --og-board2:#FFEADB;
  font-family:'Zen Maru Gothic','Kiwi Maru',system-ui,sans-serif;
  color:var(--og-ink);
  width:100%; max-width:460px; margin:0 auto; box-sizing:border-box;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:8px;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
.og-wrap *{box-sizing:border-box}

/* 上：NEXT・スコア・ボタン */
.og-hud{width:100%; display:flex; align-items:stretch; gap:8px}
.og-next,.og-scorebox{background:var(--og-card); border:2px solid var(--og-line); border-radius:16px; padding:5px 8px}
.og-next{flex:0 0 auto; text-align:center}
.og-next canvas{display:block; margin:2px auto 0}
.og-scorebox{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; text-align:center}
.og-label{font-size:10px; font-weight:900; letter-spacing:.08em; color:var(--og-coral); line-height:1.3}
.og-val{font-size:26px; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums}
.og-mini{display:flex; flex-wrap:wrap; justify-content:center; gap:0 8px; font-size:10px; color:var(--og-sub); font-weight:700; margin-top:2px;}
.og-mini span{white-space:nowrap}
.og-mini b{font-size:13px; color:var(--og-ink); margin-left:2px; font-variant-numeric:tabular-nums}
.og-tools{flex:0 0 auto; display:flex; flex-direction:column; gap:6px}
.og-tools button{flex:1; width:46px; font-size:18px; border:2px solid var(--og-line); background:var(--og-card); border-radius:14px; cursor:pointer; padding:0; color:var(--og-ink)}

/* 盤面 */
.og-boardframe{
  position:relative; border-radius:22px; padding:7px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--og-coral),var(--og-orange));
  box-shadow:0 8px 24px rgba(255,107,107,.28);
}
.og-board{display:block; border-radius:16px; touch-action:none; cursor:pointer;
  background:linear-gradient(180deg,var(--og-board1),var(--og-board2))}
.og-cheer{position:absolute; right:4px; top:16%; width:46%; pointer-events:none; z-index:2; display:flex; justify-content:center}
.og-cheer img{width:100%; height:auto; opacity:0; filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.og-cheer img.show{animation:og-cheer 1.15s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes og-cheer{0%{opacity:0;transform:translateY(40px) scale(.4) rotate(-8deg)}30%{opacity:1;transform:translateY(-8px) scale(1.05) rotate(4deg)}55%{transform:translateY(0) scale(1) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px) scale(.95)}}

/* 下：そうさボタン */
.og-pad{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; width:100%}
.og-pad button{
  font:inherit; font-size:24px; font-weight:900; height:62px; border:none; border-radius:18px; cursor:pointer;
  background:var(--og-card); color:var(--og-ink); box-shadow:0 4px 0 #f1d2bd, 0 6px 14px rgba(0,0,0,.06);
  touch-action:none; display:flex; align-items:center; justify-content:center; padding:0;
}
.og-pad button.on{transform:translateY(3px); box-shadow:0 1px 0 #f1d2bd}
.og-pad .rot{background:linear-gradient(135deg,var(--og-yellow),var(--og-orange)); color:#fff; box-shadow:0 4px 0 #e08a2c}
.og-pad .drop{background:linear-gradient(135deg,var(--og-coral),#ff8e8e); color:#fff; box-shadow:0 4px 0 #d64b4b}
.og-pad .rot.on{box-shadow:0 1px 0 #e08a2c}.og-pad .drop.on{box-shadow:0 1px 0 #d64b4b}
.og-hint{font-size:11px; color:var(--og-sub); text-align:center; margin:2px 0 0; line-height:1.9}
.og-hint kbd{font-family:inherit; background:#fff; border:1px solid #e6d5c8; border-bottom-width:2px; border-radius:5px; padding:0 4px; font-size:10px}
@media (hover:none) and (pointer:coarse){ .og-hint{display:none} }

/* オーバーレイ */
.og-overlay{position:absolute; inset:7px; border-radius:16px; display:flex; align-items:center; justify-content:center; padding:12px;
  background:rgba(255,251,246,.94); backdrop-filter:blur(3px); text-align:center; z-index:3}
.og-overlay[hidden]{display:none}
.og-ov{width:100%}
.og-title{font-size:22px; font-weight:900; line-height:1.3; margin:0 0 6px}
.og-title em{font-style:normal; color:var(--og-coral)}
.og-sub{font-size:13px; color:var(--og-sub); margin:0 0 12px; line-height:1.6}
.og-faces{display:flex; justify-content:center; gap:4px; margin:4px 0 10px}
.og-faces img{width:23%; max-width:64px; aspect-ratio:1; border-radius:14px; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.08); animation:og-bob 1.6s ease-in-out infinite}
.og-faces img:nth-child(2){animation-delay:.2s}.og-faces img:nth-child(3){animation-delay:.4s}.og-faces img:nth-child(4){animation-delay:.6s}
@keyframes og-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.og-diff{display:flex; gap:8px; justify-content:center; margin:0 0 14px}
.og-diff button{font:inherit; font-weight:900; font-size:14px; border:2px solid var(--og-line); background:#fff; border-radius:14px; padding:8px 12px; cursor:pointer; color:var(--og-ink); line-height:1.3}
.og-diff button small{display:block; font-size:10px; font-weight:700; color:var(--og-sub)}
.og-diff button.active{border-color:var(--og-coral); background:#FFF0F0; color:var(--og-coral)}
.og-start{font:inherit; font-size:19px; font-weight:900; color:#fff; border:none; border-radius:999px; padding:13px 36px; cursor:pointer;
  background:linear-gradient(135deg,var(--og-coral),var(--og-orange)); box-shadow:0 5px 0 #d64b4b}
.og-start:active{transform:translateY(3px); box-shadow:0 2px 0 #d64b4b}
.og-how{font-size:11px; color:var(--og-sub); margin:14px 0 0; line-height:1.7}
.og-link{font:inherit; font-size:12px; background:none; border:none; color:var(--og-sub); text-decoration:underline; cursor:pointer}
.og-downs{display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; margin:4px auto 6px; max-width:240px; align-items:center; justify-items:center}
.og-downs img{width:100%; max-width:110px; height:auto}
.og-result{font-size:14px; line-height:1.8; margin:2px 0 12px}
.og-result b{font-size:28px; color:var(--og-coral)}
.og-new{display:inline-block; background:var(--og-yellow); color:#7a4b00; font-weight:900; font-size:12px; border-radius:999px; padding:2px 10px; animation:og-bob 1s infinite}

@media (max-height:640px){
  .og-pad button{height:52px}
  .og-val{font-size:22px}
}