/* ============================================================
   MHUR 謎解きLP — style.css （実デザイン準拠）
   @2x (750px=375pt) → 表示幅 375-390px
   ============================================================ */

:root{
  --purple:#2f0da0;     /* X解答・最終解答セクション背景 */
  --deep:#1f105c;       /* Story/Character/Questions 背景（濃紺） */
  --deep2:#16064d;      /* ヒント枠の暗色 */
  --teal:#2ed6c6;       /* 送信ボタン */
  --green:#39dbb0;      /* シェアセクション背景 */
  --yellow:#fff600;     /* ヒントボタン */
  --pink:#ff2e50;       /* 正解！ */
  --cyan:#00cfe4;       /* メニュー・リンク */
  --ink:#16064d;
  --phone-w:390px;

  /* 背景画像（提供後にこの1行を差し替え）:
     --bg-image: url('../assets/bg/bg.jpg'); */
  --bg-image:radial-gradient(circle at 50% 0%, #3a1ec0 0%, #1f105c 55%, #120a36 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important;}
html,body{height:100%}
body{
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN",sans-serif;
  color:#fff; background:#0c0826; -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
button,input,select,textarea{ font-family:inherit; }

/* 背景（PCで見える うねうね紫：リピートで敷き詰め）
   ※ 独立した合成レイヤーに昇格させ、高速スクロール時の描画乱れを防ぐ */
.bg{ position:fixed; inset:0; z-index:0;
  background:#5346c8 url("../assets/img/bg_swirl.jpg") top center repeat;
  transform:translateZ(0); will-change:transform; backface-visibility:hidden; }

/* コンテンツ列（スマホ＝全幅 / PC＝中央寄せの縦長カラム） */
.phone{
  position:relative; z-index:1; width:100%; max-width:100%;
  margin:0 auto; background:var(--deep); min-height:100vh; overflow:hidden;
  padding-top:60px;   /* フローティングヘッダー(60px)分の余白 */
}
@media (min-width:768px){
  /* タブレット/PCでは中央寄せの縦長カラムに（うねうね背景の中央／枠なし）
     ※ transform を付けると position:fixed の子(オーバーレイ/カギ)の基準が崩れるので付けない */
  .phone{ max-width:var(--phone-w); overflow:visible; box-shadow:0 0 60px rgba(8,4,30,.55); }
}

/* ===== PC専用デコレーション（左上ロゴ・右上メニュー）：既定は非表示 ===== */
.pc-logo, .pc-menu{ display:none; }
@media (min-width:1080px){
  /* PCではハンバーガーヘッダを隠し、右上メニューでナビ */
  .phone .hdr{ display:none; }
  .phone{ padding-top:0; }   /* ヘッダー非表示なので余白リセット */

  /* ロゴ・メニューは中央カラム左右の余白の中央（上下左右とも）に配置 */
  .pc-logo{ display:block; position:fixed; top:50%; left:calc(25% - 97.5px); right:auto;
    transform:translate(-50%,-50%); z-index:40;
    width:clamp(240px, 24vw, 360px); text-align:center; }
  /* EN版ロゴ（横長）はさらに大きめに */
  body.lang-en .pc-logo{ width:clamp(300px, 30vw, 470px); }
  .pc-logo__main{ width:100%; }
  .pc-logo__presents{ width:72%; margin:12px auto 0; }

  .pc-menu{ display:block; position:fixed; top:50%; left:calc(75% + 97.5px); right:auto;
    transform:translate(-50%,-50%); z-index:40;
    width:clamp(260px, 23vw, 340px);
    background:var(--cyan); border-radius:20px; padding:24px 28px 28px;
    box-shadow:0 12px 34px rgba(0,0,0,.4); }
  .pc-menu__title{ color:#000; font-weight:900; font-size:26px; letter-spacing:.05em;
    margin-bottom:14px; }
  .pc-menu__list{ list-style:none; display:flex; flex-direction:column; gap:13px; }
  .pc-menu__item{ display:flex; align-items:center; gap:13px; }
  .pc-menu__icon{ width:36px; height:32px; object-fit:contain; flex:none; }
  .pc-menu__link{ color:#000; font-weight:900; font-size:20px; line-height:1.05;
    text-decoration:none; display:block; }
  .pc-menu__link small{ display:block; font-size:11px; font-weight:700;
    color:#000; letter-spacing:.06em; margin-top:3px; }
  .pc-menu__link:hover{ opacity:.85; }
  .pc-menu__item--top{ padding-left:2px; margin-bottom:2px; }
  .pc-menu__chev{ font-size:22px; margin-right:8px; }
  /* 鍵はドラッグ可能 */
  /* 鍵はドラッグ可能でも掴むカーソル(grab)にはしない（常に通常ポインタ） */
  .pc-menu__key{ cursor:default; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
}

/* ============================================================ Header */
.hdr{
  position:fixed; top:0; left:0; right:0; margin:0 auto;
  width:100%; max-width:100%; z-index:45;
  display:flex; align-items:center;
  justify-content:space-between; height:60px; padding:0 0 0 18px;
  background:#000;
}
@media (min-width:768px){ .hdr{ max-width:var(--phone-w); } }
.hdr__logo{ display:flex; align-items:center; }
.hdr__globe{ display:block; }

/* 言語トグル（JP / EN） */
.langtoggle{ display:flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer;
  padding:6px 4px; color:#fff; font-weight:900; font-size:15px; letter-spacing:.04em; }
.langtoggle__opt{ opacity:.45; transition:opacity .15s; }
.langtoggle__sep{ opacity:.6; margin:0 1px; }
body.lang-ja .langtoggle__opt[data-lang="ja"],
body.lang-en .langtoggle__opt[data-lang="en"]{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
.langtoggle--pc{ color:#000; justify-content:center; width:100%; margin-bottom:8px; font-size:16px; }

/* EN表示：日本語サブタイトル類を隠す */
body.lang-en .sechead__ja,
body.lang-en .menunav__txt span:last-child,
body.lang-en .pc-menu__link small,
body.lang-en .pc-logo__presents{ display:none; }
/* EN表示：送信ボタンを SEND 画像に */
body.lang-en .btn-send{ background-image:url("../assets/img/btn_send_en.png"); }
/* 右上メニュー：シアンブロック(50×60)＋黒いハンバーガー(幅18・厚2.5・間隔6) */
.hdr__menu{ width:50px; height:60px; background:var(--cyan); border:0; padding:0; position:relative; cursor:pointer; }
.hdr__menu span{ position:absolute; left:50%; width:18px; height:2.5px; background:#000; border-radius:1.5px;
  transform:translateX(-50%); transition:.25s; }
.hdr__menu span:nth-child(1){ top:23px; }
.hdr__menu span:nth-child(2){ top:50%; margin-top:-1.25px; }
.hdr__menu span:nth-child(3){ bottom:23px; }
.hdr__menu.is-open span:nth-child(1){ top:50%; margin-top:-1.25px; transform:translate(-50%,0) rotate(45deg); }
.hdr__menu.is-open span:nth-child(2){ opacity:0; }
.hdr__menu.is-open span:nth-child(3){ bottom:auto; top:50%; margin-top:-1.25px; transform:translate(-50%,0) rotate(-45deg); }

/* ============================================================ Hero */
.hero{ background:var(--deep); }
.hero__img{ width:100%; display:block; }

/* ============================================================ 共通セクション */
.sec{ padding:30px 0 34px; scroll-margin-top:58px; }
/* Story/Character：うねうねパネルを上下2枚で敷き、間と上下は暗色の区切り帯 */
.storychar{ background:#231a47; padding:14px 0; }
.sec--story{ background:#2f0da0 url("../assets/img/bg_story.png") center / 100% 100% no-repeat;
  margin:0 0 16px; padding:34px 0 30px; }
.sec--char{ background:#2f0da0 url("../assets/img/bg_char.png") center / 100% 100% no-repeat;
  padding:34px 0 36px; }
.sec--xanswer{ background:var(--purple); }
.sec--q{ background:#fff; padding:0; }
.sec--final{ background:var(--purple); padding-top:34px; }

/* 見出し（STORY/CHARACTER：ミントEN＋白JA） */
.sechead{ text-align:center; margin-bottom:22px; line-height:1; }
.sechead__en{
  display:block; font-weight:900; font-size:30px; letter-spacing:.06em; color:#4addb7;
  text-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.sechead__ja{ display:block; margin-top:7px; font-weight:700; font-size:12px; letter-spacing:.2em; color:#fff; }

/* QUESTION 見出し：黄色帯＋黒文字（全幅バナー） */
.sechead--q{
  background:var(--yellow); border-top:3px solid #000; border-bottom:3px solid #000;
  padding:14px 0 12px; margin-bottom:0;
}
.sechead--q .sechead__en{ color:#000; text-shadow:none; font-size:30px; }
.sechead--q .sechead__ja{ color:#000; margin-top:4px; }

/* Story */
.story__text{ margin:0 26px; font-size:13px; line-height:2; text-align:center; color:#fff; font-weight:500; }

/* Character */
.charlist{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0 26px; }
.charlist li{ width:calc((100% - 20px) / 3); }
.charicon{ display:block; width:100%; padding:0; border:0; cursor:pointer; background:none;
  border-radius:12px; overflow:hidden; transition:transform .15s; }
.charicon img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; }
.charicon:hover,.charicon:focus-visible{ transform:translateY(-3px); outline:none; }

/* ============================================================ 解答ボックス */
.lead{ text-align:center; font-weight:900; font-size:18px; line-height:1.5; margin:0 20px 6px; color:#fff; }
.lead--final{ color:var(--yellow); font-size:21px; letter-spacing:.02em; margin:0 20px 18px; }
.postlink{ display:block; text-align:center; margin:0 0 16px; color:var(--cyan); font-weight:700;
  font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.postlink:hover{ opacity:.85; }
/* Xで出題された問題の画像（ポストはこちらの下） */
.xpost{ display:block; width:calc(100% - 40px); margin:6px auto 16px; border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.35); }

.answerbox{ margin:0 20px; }
.answerbox__row{ display:flex; gap:10px; width:100%; }
.answerbox__input{ flex:1 1 auto; min-width:0; width:100%; height:48px; border:0; border-radius:6px;
  padding:0 14px; font-size:16px; background:#fff; color:#222; box-shadow:0 2px 6px rgba(0,0,0,.25) inset; }
.btn-send{ flex:0 0 84px; }
.btn-send{ flex:0 0 84px; height:48px; border:0; padding:0; cursor:pointer;
  background:url("../assets/img/btn_send.png") center/contain no-repeat;
  font-size:0; color:transparent; transition:transform .08s; }
.btn-send:active{ transform:translateY(1px); }
.answerbox__result{ margin-top:14px; text-align:center; font-weight:900; font-size:22px;
  color:var(--pink); text-shadow:0 0 10px rgba(255,46,80,.4); animation:pop .3s ease; }
@keyframes pop{ from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }
/* 不正解メッセージ（青文字・2秒表示）。白/紫どちらの背景でも見えるブルー＋縁取り */
.answer-wrong{ margin-top:12px; text-align:center; font-weight:900; font-size:17px;
  color:#2e90ff; text-shadow:0 1px 2px rgba(0,0,0,.35); animation:pop .25s ease; }

/* ============================================================ 各問題の解答欄（白セクション内） */
.qanswer{ margin:16px 20px 2px; }
.qanswer__row{ display:flex; gap:10px; width:100%; }
.qanswer__input{ flex:1 1 auto; min-width:0; width:100%; height:48px; border:2px solid #1f105c; border-radius:6px;
  padding:0 14px; font-size:18px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  background:#fff; color:#1f105c; }
.qanswer__input:focus{ outline:2px solid var(--cyan); outline-offset:1px; }
.qanswer__send{ flex:0 0 84px; }
.qanswer__result{ margin-top:12px; text-align:center; font-weight:900; font-size:20px;
  color:var(--pink); text-shadow:0 0 10px rgba(255,46,80,.35); animation:pop .3s ease; }
/* マス目は正解するまで非表示 */
.qanswer__cells{ display:none; gap:8px; justify-content:center; margin-top:14px; }
.qanswer.is-correct .qanswer__cells{ display:flex; }
.qanswer__cells span{ flex:0 1 46px; aspect-ratio:1; min-width:0; border:2px solid var(--pink); border-radius:6px;
  background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:900; color:var(--pink); line-height:1; animation:pop .3s ease both; }
.qanswer.is-correct .qanswer__input{ background:#f1eefc; color:#9990c4; }
.qanswer.is-correct .qanswer__send{ opacity:.45; pointer-events:none; }

/* 最後の謎：グリッド画像に正解の文字をオーバーレイ */
.finalgrid{ position:relative; container-type:inline-size; }
.finalgrid__img,.finalgrid__exec{ width:100%; display:block; }
.finalgrid__cells{ position:absolute; inset:0; pointer-events:none; }
.finalgrid__cell{ position:absolute; transform:translate(-50%,-50%); line-height:1;
  font-weight:900; font-size:7cqw; color:var(--pink); }
/* translate を保持したままポップ（pop だと transform が上書きされ位置がズレる） */
.finalgrid__cell.is-filled{ animation:finalpop .3s ease both; }
@keyframes finalpop{ from{ transform:translate(-50%,-50%) scale(.5); opacity:0 }
  to{ transform:translate(-50%,-50%) scale(1); opacity:1 } }

/* 公式サイトリンク（ストーリー下） */
.officiallink{ display:block; text-align:center; margin:18px 26px 0; color:#fff; font-weight:800;
  font-size:14px; letter-spacing:.04em; text-decoration:underline; text-underline-offset:4px;
  text-shadow:0 1px 2px rgba(0,0,0,.4); }
.officiallink:hover{ color:var(--cyan); }

/* ============================================================ ヒント枠（暗色＋黄色ボタン） */
/* 既定（X解答・最終解答のヒント）＝前のフラット＋ハーフトーン */
.hintbox{ margin:18px 20px 0; border:0; border-radius:14px; padding:14px 16px 16px;
  box-shadow:0 4px 14px rgba(0,0,0,.35); background:#240b62;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.5px, transparent 1.5px);
  background-size:8px 8px; }
/* Q1〜Q4のヒントだけ渦巻き背景 */
.qcard .hintbox{ background:#2c1570 url("../assets/img/hint_bg.png") center/cover no-repeat; }
.hintbox__head{ display:flex; align-items:center; justify-content:center; gap:7px; font-weight:900;
  font-size:18px; color:#fbf048; margin-bottom:13px; }
.hintbox__bulb{ display:inline-block; width:24px; height:30px; flex:none; font-size:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40'%3E%3Cpath d='M16 2C9.4 2 4 7 4 13.6c0 3.6 1.7 6.3 3.6 8.3 1 1 1.6 2 1.7 3.4l.1 1.2h13l.1-1.2c.1-1.4.7-2.4 1.7-3.4 1.9-2 3.6-4.7 3.6-8.3C28 7 22.6 2 16 2z' fill='%23f7f1e3' stroke='%235c4d2e' stroke-width='1.1'/%3E%3Cpath d='M11.5 12l2.5 4 2-3 2 3 2.5-4' fill='none' stroke='%23e58a00' stroke-width='1.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3Crect x='10' y='27' width='12' height='3' rx='1.2' fill='%23c8c8c8' stroke='%23888' stroke-width='.5'/%3E%3Crect x='10.6' y='30.5' width='10.8' height='2.6' rx='1' fill='%23b0b0b0'/%3E%3Crect x='11.2' y='33.5' width='9.6' height='2.6' rx='1' fill='%239c9c9c'/%3E%3Cpath d='M12.5 36.5h7l-1.4 2.5h-4.2z' fill='%23808080'/%3E%3C/svg%3E") center/contain no-repeat; }
.hintbox__note{ font-size:13px; font-weight:700; color:#fbf048; margin-left:-6px; }
.hintrow{ margin-bottom:11px; }
.hintrow:last-child{ margin-bottom:0; }
.hintbtn{
  display:block; width:64%; margin:0 auto; aspect-ratio:318/65;
  border:0; padding:0; cursor:pointer;
  background:center/contain no-repeat;
  font-size:0; color:transparent; transition:transform .08s;
}
.hintbtn:active{ transform:translateY(2px); }
.hintbtn.is-open{ filter:brightness(.94); }
.hintrow:nth-child(2) .hintbtn{ background-image:url("../assets/img/hint1.png"); }
.hintrow:nth-child(3) .hintbtn{ background-image:url("../assets/img/hint2.png"); }
.hintrow:nth-child(4) .hintbtn{ background-image:url("../assets/img/hint3.png"); }
.hintrow:nth-child(5) .hintbtn{ background-image:url("../assets/img/hint4.png"); }
.hintrow:nth-child(6) .hintbtn{ background-image:url("../assets/img/hint5.png"); }
/* EN：ヒントボタンを英語版画像に */
body.lang-en .hintrow:nth-child(2) .hintbtn{ background-image:url("../assets/img/hint1_en.png"); }
body.lang-en .hintrow:nth-child(3) .hintbtn{ background-image:url("../assets/img/hint2_en.png"); }
body.lang-en .hintrow:nth-child(4) .hintbtn{ background-image:url("../assets/img/hint3_en.png"); }
body.lang-en .hintrow:nth-child(5) .hintbtn{ background-image:url("../assets/img/hint4_en.png"); }
body.lang-en .hintrow:nth-child(6) .hintbtn{ background-image:url("../assets/img/hint5_en.png"); }
.hinttext{ margin-top:9px; padding:10px 12px; background:rgba(255,255,255,.1); border-radius:8px;
  font-size:12.5px; line-height:1.7; color:#fff; }

/* ============================================================ Questions */
.qcard{ margin:0 0 26px; }
.qcard img{ width:100%; }
.qcard .hintbox{ margin-top:16px; }
.qcard--final{ margin-bottom:0; }

/* ============================================================ Final / CLEAR */
.clear{ margin-top:30px; text-align:center; padding:0; }
.clear__full{ width:100%; display:block; margin:0 auto; }
/* メッセージはCLEAR画像の下部（トゲの上）に重ねる（PSD準拠）。負マージンは横幅基準で画像にスケール追従 */
.clear__msg{ position:relative; z-index:2; margin:-25% 16px 6px; font-size:13px; line-height:1.9;
  color:#fff; font-weight:700; }

/* ============================================================ Share */
.sec--share{ background:var(--green); text-align:center; padding:28px 0 30px; }
.sharettl{ color:#0a0a0a; font-weight:900; font-size:26px; letter-spacing:.04em; margin-bottom:16px; }
.sharebtn{ display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; background:#000; border-radius:12px; text-decoration:none; }
.sharebtn__x{ width:26px; height:26px; }

/* ============================================================ Footer */
.ftr{ background:#0a0820; text-align:center; padding:16px; }
.ftr small{ color:#cfcfe0; font-size:11px; }

/* ============================================================ Overlay & Modals */
.overlay{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:18px 6px; background:rgba(10,8,30,.45); }
/* ハンバーガーメニュー表示時：背景はマスクせず、上から降りてくる形に */
.overlay.is-menu{ background:transparent; align-items:flex-start; padding:0; }
.modal{ position:relative; width:100%; max-width:340px; background:#fff; color:var(--ink);
  border-radius:18px; padding:22px 20px 24px; max-height:90vh; overflow-y:auto;
  animation:modalIn .22s ease; box-shadow:0 18px 50px rgba(0,0,0,.5); }
@keyframes modalIn{ from{transform:translateY(16px) scale(.96);opacity:0} to{transform:none;opacity:1} }
.modal__close{ position:absolute; top:10px; right:12px; z-index:2; width:30px; height:30px; border:0;
  border-radius:50%; cursor:pointer; background:rgba(0,0,0,.12); color:#222; font-size:18px; line-height:1; }
.modal__close:hover{ background:rgba(0,0,0,.22); }

/* メニューはヘッダー下から全幅で「ロール」して降りてくる大きめのドロップダウン */
.modal--menu{ background:var(--cyan); width:100%; max-width:100%; margin-top:60px;
  border-radius:0; padding:34px 34px 44px; max-height:calc(100vh - 60px);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  transform-origin:top center; animation:menuRoll .42s cubic-bezier(.22,.61,.36,1) both; }
@media (min-width:768px){ .modal--menu{ max-width:var(--phone-w); } }
/* 上から下へ巻物が降りるように展開 */
@keyframes menuRoll{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0 0); } }
/* 閉じる時は上へ巻き上がる */
.modal--menu.is-closing{ animation:menuRollUp .3s cubic-bezier(.4,0,.7,.4) forwards; }
@keyframes menuRollUp{ from{ clip-path:inset(0 0 0 0); } to{ clip-path:inset(0 0 100% 0); } }
/* メニュー内の×は不要（ヘッダーの×で閉じる） */
.modal--menu .modal__close{ display:none; }
.menunav{ display:flex; flex-direction:column; gap:30px; margin-top:10px; }
.menunav > a,.menunav__item{ display:grid; grid-template-columns:66px 1fr; align-items:center; column-gap:18px;
  text-decoration:none; color:#0a0a0a; }
.menunav__txt--link{ text-decoration:none; color:#0a0a0a; }
.menunav__icon{ width:58px; height:auto; justify-self:center; }
.menunav__txt{ display:flex; flex-direction:column; line-height:1.05; }
.menunav__txt b{ font-size:31px; font-weight:900; letter-spacing:.02em; color:#0a0a0a; }
.menunav__txt span{ font-size:15px; font-weight:700; color:#0a0a0a; margin-top:5px; }

/* 問題画像の拡大（ライトボックス） */
/* 拡大はPCのみ（SPはズーム不要） */
@media (min-width:768px){
  .qcard > img, .qimg-wrap img, .finalgrid__img, .finalgrid__exec, .xpost{ cursor:zoom-in; }
}
/* ボックスは画像サイズにフィット（×が画像の角にそろう） */
.modal--zoom{ background:transparent; padding:0; box-shadow:none; width:auto; max-width:92vw; }
.modal--zoom .modal__zoomimg{ display:block; max-width:92vw; max-height:86vh; width:auto; height:auto;
  border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6); cursor:zoom-out; }
/* ×はヒント/キャラ紹介と同じ黒い角丸ボタンを画像左上の角に配置 */
.modal--zoom .modal__close{ top:10px; left:10px; right:auto; width:38px; height:38px; background:#111;
  color:#fff; font-size:22px; line-height:1; border-radius:9px; box-shadow:0 2px 10px rgba(0,0,0,.45);
  cursor:pointer; z-index:4; }
.modal--zoom .modal__close:hover{ background:#333; }

/* ヒント表示ポップアップ（PSD準拠：黄色ヘッダー＋クリーム本文の2トーンカード） */
.modal--hint{ background:#fefbe8; color:#111; border-radius:16px; padding:0; overflow:hidden;
  max-width:min(430px, 92vw); box-shadow:0 14px 40px rgba(0,0,0,.45); }
/* 黄色ヘッダー：電球＋ヒントNを中央、×は左に重ねる */
.modalhint__title{ position:relative; background:#fff200; margin:0; padding:13px 16px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-weight:900; font-size:23px; color:#111; }
.modalhint__title .hintbox__bulb{ width:26px; height:32px; }
.modal--hint .modal__close{ top:12px; left:14px; right:auto;
  width:34px; height:34px; border-radius:9px; background:#18094e; color:#fff;
  font-size:20px; font-weight:700; box-shadow:none; }
.modal--hint .modal__close:hover{ background:#2a1570; }
/* クリーム本文：左揃え */
.modalhint__text{ margin:0; padding:18px 22px 22px; text-align:left; font-weight:700;
  font-size:16px; line-height:1.85; color:#111; }

/* キャラモーダル：説明文込みの合成画像をそのまま表示（崩れ防止） */
.modal--char{ background:transparent; padding:0; box-shadow:none; overflow:visible;
  max-width:min(430px, 92vw); position:relative; }
/* PC/タブレットではキャラ紹介をコンテンツ幅より大きく表示 */
@media (min-width:768px){ .modal--char{ max-width:min(640px, 86vw); } }
.modal__pop{ width:100%; display:block; }
/* 画像左上の×の上に透明クリック領域を重ねる */
.modal--char .modal__close{ top:5%; left:6%; right:auto; width:13%; height:12%;
  background:transparent; color:transparent; box-shadow:none; border-radius:50%; z-index:3; }
.modal--char .modal__close:hover{ background:transparent; }

.modal--key{ background:transparent; padding:0; box-shadow:none; max-width:min(440px, 92vw); position:relative; }
@media (min-width:768px){ .modal--key{ max-width:min(560px, 86vw); } }
.modal--key img{ width:100%; border-radius:14px; display:block; }
/* key.png には×が焼き込まれているので、左上の×の上に透明なクリック領域を重ねる（画像サイズに追従するよう%指定） */
.modal--key .modal__close{ top:3%; left:3%; right:auto; width:14%; height:15%;
  background:transparent; color:transparent; box-shadow:none; border-radius:8px; cursor:pointer; }
.modal--key .modal__close:hover{ background:transparent; }

/* ============================================================ ギミック追加分 */

/* Xロック注記 */
.locknote{ margin:14px 20px 0; text-align:center; font-size:12px; font-weight:700; color:var(--yellow); }

/* 最後の謎グリッド */
.lead--sm{ font-size:14px; margin-bottom:16px; }
.grid{ margin:0 20px; display:flex; flex-direction:column; gap:12px; }
.gridrow{ display:flex; align-items:center; gap:8px; }
.gridrow__no{ flex:none; width:36px; height:30px; display:flex; align-items:center; justify-content:center;
  background:#000; color:var(--yellow); font-weight:900; font-size:15px; border-radius:4px; }
.gridrow__boxes{ display:flex; gap:5px; flex:1; }
.gridrow__ok{ flex:none; width:22px; text-align:center; color:#3ee27a; font-weight:900; font-size:18px; opacity:0;
  transition:opacity .2s; }
.gridrow.is-solved .gridrow__ok{ opacity:1; }
.cell{ position:relative; flex:1; max-width:46px; }
.cell__no{ position:absolute; top:-7px; left:-2px; z-index:2; font-size:10px; font-weight:900; color:var(--cyan);
  background:#16064d; border-radius:50%; width:15px; height:15px; line-height:15px; text-align:center; }
.cell__in{ width:100%; aspect-ratio:1/1; border:0; border-radius:6px; text-align:center;
  font-size:20px; font-weight:900; text-transform:uppercase; color:#1b1146; background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.2) inset; padding:0; }
.gridrow.is-solved .cell__in{ background:#fff39a; color:#1b1146; }

.execbar{ margin:22px 20px 0; background:var(--yellow); color:#000; font-weight:900; font-size:15px;
  text-align:center; padding:10px; border-radius:4px; }
.openbanner{ margin:14px 20px 0; text-align:center; font-weight:900; font-size:26px; letter-spacing:.04em;
  color:#fff; text-shadow:0 0 14px rgba(0,207,228,.9), 0 2px 0 #007; animation:pop .4s ease; }
.keyhint{ margin:14px 20px 0; text-align:center; font-size:12.5px; font-weight:700; color:var(--cyan);
  line-height:1.6; animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.6} 50%{opacity:1} }

/* 問題③ ドアのドロップゾーン（q03画像内のトビラ＝下段左） */
.qimg-wrap{ position:relative; display:block; }
.qimg-wrap img{ width:100%; display:block; }
.doorzone{ position:absolute; left:4%; top:40%; width:26%; height:24%; z-index:3; border-radius:8px; }
/* ドラッグ時のドアのハイライト演出はなし（当たり判定のみ） */

/* ページ上に引っ張り出された鍵（背景なし・透明）。通常z55、ドラッグ中z90 */
.floatkey{ position:fixed; z-index:55; width:62px; height:62px;
  border:0; padding:0; background:none; cursor:grab; touch-action:none;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.floatkey img{ width:100%; height:100%; object-fit:contain; pointer-events:none;
  -webkit-user-drag:none; user-drag:none; }
.floatkey.is-dragging{ z-index:90; cursor:grabbing; }

/* メニュー内の鍵アイコン：ドラッグで引っ張り出せる示唆 */
.menunav__key{ cursor:grab; border-radius:8px; transition:transform .12s; touch-action:none;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-user-drag:none; user-drag:none; }
.menunav__key:hover,.menunav__key:active{ transform:scale(1.08); }

/* リセット */
.resetbtn{ display:block; margin:10px auto 0; background:none; border:1px solid rgba(255,255,255,.25);
  color:#9a9ab5; font-size:10px; padding:4px 12px; border-radius:20px; cursor:pointer; }
.resetbtn:hover{ color:#fff; border-color:rgba(255,255,255,.5); }

/* シェイク（誤答） */
.is-shake{ animation:shake .35s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }