/* =========================================================================
   みさきの たびの しおり — スタイル（ドラクエ風 / 依存なし）
   色は :root で一括管理
   ========================================================================= */
:root{
  --navy:#0b1a3a; --navy-deep:#060f24; --window:#000820; --frame:#fff;
  --ink:#fff; --gold:#ffd45e; --pink:#ff7eb6; --aqua:#79e0ff; --lemon:#eaff7a;
  --green:#8bf08b; --red:#ff6b6b; --dim:#9fb0d8; --maxw:680px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:"DotGothic16",sans-serif; background:var(--navy-deep);
  color:var(--ink); line-height:1.85; letter-spacing:.04em; overflow-x:hidden;
  -webkit-font-smoothing:none; min-height:100svh;
  -webkit-tap-highlight-color:transparent;        /* タップ時の灰色フラッシュ除去 */
  text-size-adjust:100%;
}
a{ color:inherit; }
img{ image-rendering:pixelated; }
.visually-hidden{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }

/* 星空 */
.stars{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 50% 16%, #16306a 0%, var(--navy) 45%, var(--navy-deep) 100%); }
.stars span{ position:absolute; background:#fff; border-radius:50%; opacity:.8; animation:blink 2s steps(1) infinite; }

.app{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding:20px 16px calc(64px + env(safe-area-inset-bottom)); }
.page-enter{ animation:riseIn .4s ease; }

/* DQウィンドウ共通 */
.dq-window{ background:var(--window); border:4px solid var(--frame); border-radius:14px;
  padding:18px 16px; box-shadow:0 0 0 4px var(--window),0 6px 0 0 rgba(0,0,0,.5); position:relative; }
.dq-window::after{ content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.3); border-radius:9px; pointer-events:none; }

/* ボタン */
.dq-btn{ display:inline-block; text-align:center; text-decoration:none; cursor:pointer;
  background:var(--window); color:var(--ink); border:3px solid var(--frame); border-radius:10px;
  font-family:inherit; font-size:1.05rem; padding:11px 18px; box-shadow:0 4px 0 0 rgba(0,0,0,.6);
  transition:transform .05s ease, background .15s ease; }
.dq-btn:hover{ background:#0a1a44; }
.dq-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 0 rgba(0,0,0,.6); }
.dq-btn::before{ content:"▶ "; color:var(--gold); }
.dq-btn.ghost{ box-shadow:none; border-color:rgba(255,255,255,.5); }
.dq-btn.ghost::before{ content:""; }

/* ===== 合言葉ゲート（index） ===== */
.gate{ min-height:100svh; display:flex; align-items:center; justify-content:center; padding:28px 18px; }
.gate-inner{ width:100%; max-width:480px; text-align:center; }
.title-logo{ margin-bottom:22px; animation:floaty 4s ease-in-out infinite; }
.title-sub{ font-family:"Press Start 2P",monospace; font-size:.7rem; color:var(--aqua); margin:0 0 10px; letter-spacing:.15em; }
.title-main{ margin:0; font-size:2.4rem; line-height:1.25; color:var(--gold); text-shadow:3px 3px 0 #000,0 0 18px rgba(255,212,94,.5); }
.title-tag{ margin:12px 0 0; color:var(--pink); font-size:1.05rem; text-shadow:2px 2px 0 #000; }
.gate-window{ text-align:left; }
.gate-window .msg{ margin:.2em 0 1em; }
.hl{ color:var(--gold); }
.pw-row{ display:flex; align-items:center; gap:8px; border-bottom:2px dashed rgba(255,255,255,.4); padding-bottom:6px; }
.caret{ color:var(--gold); animation:blink 1s steps(1) infinite; }
#pw{ flex:1; background:transparent; border:none; color:var(--ink); font-family:inherit; font-size:1.15rem; padding:6px 2px; }
#pw:focus{ outline:none; } #pw::placeholder{ color:#5e6f9a; }
.gate-window .dq-btn{ margin-top:16px; width:100%; }
.gate-hint{ color:var(--dim); font-size:.92rem; margin:14px 0 0; min-height:1.2em; }
.gate-error{ color:var(--red); margin:10px 0 0; min-height:1.2em; }
.gate-error.shake{ animation:shake .4s; }
.hint-toggle{ margin-top:18px; background:none; border:none; color:var(--aqua); font-family:inherit; font-size:.95rem; cursor:pointer; text-decoration:underline dotted; }

/* 解錠 → 遷移オーバーレイ */
.transition-overlay{ position:fixed; inset:0; z-index:50; background:#000; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .5s ease; }
.transition-overlay.show{ opacity:1; }
.trans-msg{ color:var(--gold); font-size:1.2rem; text-shadow:2px 2px 0 #000; animation:blink 1s steps(1) .3s infinite; }

/* ===== ホーム（メニュー） ===== */
.home-head{ text-align:center; margin:8px 0 22px; animation:floaty 4s ease-in-out infinite; }
.home-sub{ font-family:"Press Start 2P",monospace; font-size:.62rem; color:var(--aqua); letter-spacing:.12em; margin:0 0 8px; }
.home-title{ margin:0; font-size:2rem; color:var(--gold); text-shadow:3px 3px 0 #000; }
.home-tag{ margin:8px 0 0; color:var(--pink); }
.menu{ padding:10px; }
.menu-item{ display:flex; align-items:center; gap:12px; text-decoration:none; padding:12px 10px;
  border-bottom:1px dashed rgba(255,255,255,.16); border-radius:8px; }
.menu-item:last-child{ border-bottom:none; }
.menu-item:hover,.menu-item:focus{ background:#0a1a44; }
.mi-icon{ font-size:1.6rem; width:1.8em; text-align:center; }
.mi-body{ flex:1; display:flex; flex-direction:column; }
.mi-label{ color:var(--gold); font-size:1.15rem; }
.mi-desc{ color:var(--dim); font-size:.78rem; }
.mi-arrow{ color:var(--ink); animation:blink 1.1s steps(1) infinite; }
.home-foot{ text-align:center; color:var(--dim); font-size:.85rem; margin-top:18px; }

/* このたびの さくせん（選べる） */
.sakusen{ margin-top:22px; padding:14px 16px; }
.sakusen-h{ margin:0 0 8px; color:var(--aqua); font-size:.95rem; }
.sakusen-tip{ color:var(--dim); font-size:.72rem; }
.sakusen-list{ list-style:none; margin:0; padding:0; }
.sakusen-item{ width:100%; display:flex; align-items:center; gap:8px; background:none; border:none;
  color:inherit; font-family:inherit; text-align:left; cursor:pointer; padding:7px 6px; border-radius:8px;
  border-bottom:1px dotted rgba(255,255,255,.16); }
.sakusen-list li:last-child .sakusen-item{ border-bottom:none; }
.sakusen-item:hover{ background:#0a1a44; }
.sk-body{ flex:1; }
.sk-body b{ color:var(--gold); font-weight:normal; }
.sk-gloss{ display:block; color:var(--dim); font-size:.76rem; margin-top:1px; }
.sk-mark{ color:var(--gold); opacity:0; transition:opacity .15s; }
.sakusen-item.on{ background:#10245a; }
.sakusen-item.on .sk-mark{ opacity:1; animation:blink 1s steps(1) infinite; }
.sakusen-reply{ margin:10px 4px 0; color:var(--ink); font-size:.9rem; background:#10245a;
  border-radius:8px; padding:8px 10px; animation:popin .35s ease; }
.sakusen-reply b{ color:var(--lemon); }

/* ミュートボタン */
.mute-btn{ position:fixed; z-index:30; width:40px; height:40px;
  top:calc(10px + env(safe-area-inset-top)); right:calc(10px + env(safe-area-inset-right));
  background:var(--window); color:#fff; border:2px solid var(--frame); border-radius:9px;
  font-size:1.05rem; cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.5); line-height:1; padding:0; }
.mute-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.5); }
.page-head{ padding-right:46px; }  /* ミュートボタンとタイトルの かぶり防止 */

/* ===== ページ共通ヘッダ ===== */
.page-head{ display:flex; align-items:center; gap:12px; margin:4px 0 20px; }
.back-link{ text-decoration:none; color:var(--ink); border:3px solid var(--frame); border-radius:9px;
  padding:6px 12px; font-size:.85rem; background:var(--window); box-shadow:0 3px 0 rgba(0,0,0,.5); white-space:nowrap; }
.back-link:hover{ background:#0a1a44; color:var(--gold); }
.page-title{ margin:0; font-size:1.5rem; color:var(--gold); text-shadow:2px 2px 0 #000; }
.page-lead{ margin:0 0 18px; }
.page-lead .dim,.dim{ color:var(--dim); font-size:.85em; }
.page-next{ margin-top:24px; text-align:center; }
.page-next .dq-btn{ width:100%; max-width:340px; }

/* ===== ものがたり ===== */
.story-window{ min-height:55svh; cursor:pointer; }
.tap-hint{ position:absolute; right:14px; bottom:10px; color:var(--aqua); font-size:.72rem; opacity:.8; animation:blink 1.6s steps(1) infinite; }
.typer{ margin:0; white-space:pre-wrap; }
.typer b{ color:var(--gold); }
.next-tri{ display:block; text-align:right; color:var(--ink); animation:blink 1s steps(1) infinite; }
.story-actions{ margin-top:20px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.story-actions .dq-btn{ width:100%; max-width:340px; }

/* ===== なかま（プロフィール） ===== */
.party-list{ display:flex; flex-direction:column; gap:14px; }
.pcard{ padding:14px; }
.pcard.is-star{ border-color:var(--gold); box-shadow:0 0 14px rgba(255,212,94,.4),0 6px 0 0 rgba(0,0,0,.5); }
.pcard-top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.pcard-emoji{ font-size:2.6rem; line-height:1; }
.pcard-name{ margin:0; font-size:1.3rem; color:var(--gold); }
.pcard.is-star .pcard-name::after{ content:" ♛"; }
.pcard-job{ margin:2px 0 0; color:var(--aqua); font-size:.85rem; }
.pcard-lv{ color:var(--lemon); }
.pcard-stats{ list-style:none; margin:0 0 10px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 14px; font-size:.82rem; }
.pcard-stats li{ display:flex; justify-content:space-between; border-bottom:1px dotted rgba(255,255,255,.16); padding:2px 0; }
.pcard-stats b{ color:var(--gold); font-weight:normal; }
.pcard-skill{ margin:0 0 8px; color:var(--lemon); font-size:.85rem; }
.pcard-desc{ margin:0; font-size:.9rem; color:var(--ink); }

/* ===== おてんき ===== */
.weather-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.weather-loading{ grid-column:1/-1; text-align:center; color:var(--dim); animation:blink 1.4s steps(1) infinite; }
.wcard{ padding:12px 8px; text-align:center; }
.wcard .wdate{ font-size:.78rem; color:var(--aqua); } .wcard .wdate b{ color:var(--gold); font-weight:normal; }
.wcard .wicon{ font-size:2.2rem; line-height:1.5; }
.wcard .wdesc{ font-size:.8rem; min-height:2.4em; }
.wcard .wtemp .hi{ color:var(--red); } .wcard .wtemp .lo{ color:var(--aqua); }
.wcard .wpop{ font-size:.76rem; color:var(--dim); }
.wcard .wwear{ font-size:.74rem; color:var(--lemon); margin-top:6px; border-top:1px dotted rgba(255,255,255,.2); padding-top:6px; }
.weather-note{ color:var(--dim); font-size:.82rem; margin-top:12px; }
.weather-fail{ grid-column:1/-1; color:var(--dim); text-align:center; }

/* ===== こうてい ===== */
.jday{ margin-bottom:24px; }
.jday-h{ font-size:1.15rem; color:var(--ink); padding:10px 14px; margin:0 0 14px; line-height:1.5; }
.jday-h .jdate{ color:var(--gold); }
.jbadge{ float:right; font-size:.68rem; color:var(--navy-deep); background:var(--gold); border-radius:6px; padding:2px 8px; }
.jitem{ display:flex; gap:12px; padding:10px 2px; border-bottom:1px dashed rgba(255,255,255,.16); }
.jtime{ flex:0 0 58px; font-family:"Press Start 2P",monospace; font-size:.58rem; color:var(--aqua); padding-top:4px; }
.jbody{ flex:1; }
.jtitle{ margin:0 0 3px; font-size:1rem; } .jic{ margin-right:6px; }
.jsecret{ color:var(--pink); }
.jdesc{ margin:0 0 6px; font-size:.85rem; color:var(--dim); }
.jwear{ display:inline-block; font-size:.76rem; color:var(--navy-deep); background:var(--lemon); border-radius:6px; padding:2px 8px; }
.jwear.dressy{ background:var(--pink); color:#2a0a1a; }

/* ===== そうび ===== */
.equip-list{ list-style:none; margin:0; padding:18px; columns:2; column-gap:18px; }
.equip-list li{ break-inside:avoid; padding:3px 0; font-size:.9rem; }
.equip-list li::before{ content:"◇ "; color:var(--gold); }
.equip-list li.h{ column-span:all; color:var(--aqua); font-size:.8rem; margin-top:8px; }
.equip-list li.h:first-child{ margin-top:0; }
.equip-list li.h::before{ content:"― "; }

/* ===== おわりに ===== */
.ending{ text-align:center; }
.ending-lead{ margin:.2em 0 1.2em; }
.treasure-btn{ width:100%; max-width:280px; }
.treasure-reveal{ margin-top:18px; color:var(--gold); font-size:1.05rem; line-height:1.9; animation:popin .5s ease; }
.treasure-reveal .big{ font-size:1.4rem; display:block; margin-bottom:8px; }
.ending-foot{ text-align:center; color:var(--dim); margin-top:22px; font-size:.85rem; }

/* ===== アニメーション ===== */
@keyframes blink{ 50%{ opacity:0; } }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@keyframes popin{ 0%{ transform:scale(.6); opacity:0;} 70%{ transform:scale(1.08);} 100%{ transform:scale(1); opacity:1;} }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
@keyframes riseIn{ from{ transform:translateY(10px);} to{ transform:translateY(0);} }

@media (max-width:480px){
  .title-main{ font-size:2rem; } .home-title{ font-size:1.7rem; }
  .weather-grid{ gap:6px; } .wcard{ padding:8px 4px; } .wcard .wdesc{ font-size:.72rem; }
  .pcard-stats{ font-size:.78rem; }
}
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; } }