/* ヒーロー画像（紫のアーチ扉・やわらかい 3D）に合わせた質感。色はここでだけ決める。 */
:root {
  --bg:#f6f4ef; --fg:#26233a; --card:#fff; --mute:#8a879c;
  --door:#7B5BE6; --door-dark:#5b3fcf; --door-light:#9d85f2;
  --acc:#6d5be6; --acc-dark:#5647c4;
  --yes:#2e9e5b; --no:#d14343; --close:#e0862a; --gold:#ffd76a;
  --shadow:0 8px 24px rgba(75, 56, 160, .10), 0 1px 3px rgba(0,0,0,.06);
  --radius:18px;
}
* { box-sizing:border-box; }
body { margin:0; padding:20px 14px 40px; background:radial-gradient(1200px 600px at 50% -200px, #ece7ff 0%, var(--bg) 60%); color:var(--fg); font:16px/1.6 system-ui, -apple-system, "Hiragino Sans", sans-serif; }
main { max-width:600px; margin:0 auto; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 16px; }
h1 { font-size:24px; margin:0; letter-spacing:.02em; color:var(--door-dark); }
.home { all:unset; cursor:pointer; color:inherit; font:inherit; letter-spacing:inherit; }
.home:hover { text-decoration:underline; }
select.lang { padding:6px 28px 6px 12px; border-radius:999px; border:1px solid #e6e2f6; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235b3fcf'/%3E%3C/svg%3E") no-repeat right 10px center; box-shadow:var(--shadow); font:inherit; font-size:13px; color:var(--door-dark); cursor:pointer; appearance:none; -webkit-appearance:none; }

/* 共通の部品 */
.card { background:var(--card); border-radius:var(--radius); padding:18px 20px 20px; margin-bottom:16px; box-shadow:var(--shadow); }
.hero { display:block; width:100%; height:auto; border-radius:14px; margin:0 0 16px; box-shadow:0 10px 30px rgba(123, 91, 230, .18); }
.rules { margin:0 0 18px; }
/* キーの取り方: 2 つの入手先を並べる */
.guide { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:10px 0; }
.guide section { border:1px solid #e8e3f7; border-radius:14px; background:#fbfaff; padding:10px 12px 12px; }
.guide h3 { margin:0 0 6px; font-size:14px; color:var(--door-dark); }
.guide ol { margin:0 0 10px; padding-left:18px; font-size:12.5px; line-height:1.7; color:#4a4760; }
.guide .keybtn { display:inline-block; text-decoration:none; }
.keytest { margin:10px 0 0; font-size:13px; }
.keytest #keyTestResult.ok { color:#1f7a3a; font-weight:700; }
.keytest #keyTestResult.ng { color:var(--no); font-weight:700; }
@media (max-width: 640px) { .guide { grid-template-columns:1fr; } }
/* 次にやることの指示。赤い右向き三角を行頭に置いて目立たせる */
.pick { display:flex; align-items:baseline; gap:8px; margin:20px 0 10px; font-size:17px; font-weight:800; color:var(--door-dark); }
/* 「ジャンル」「難易度」: 選ぶ場所の見出し。注記（.hint）より一段強く */
.sec { margin:22px 0 8px; font-size:17px; font-weight:800; color:var(--fg); letter-spacing:.02em; }
.pick::before { content:'\25b6'; color:#e5484d; font-size:13px; line-height:1; }
.rules .tagline { font-size:19px; font-weight:700; color:var(--door-dark); margin:0 0 12px; line-height:1.55; }
.rules .games { margin:-6px 0 12px; font-size:12px; color:var(--mute); }
.rules h2 { font-size:18px; margin:0 0 6px; }
/* 遊び方はゲームそのものではない補足なので、角丸の枠でまとめて本編と分ける */
.howto { border:1px solid #e8e3f7; border-radius:16px; background:#fbfaff; padding:12px 14px 14px; }
.rules-head { display:flex; align-items:baseline; gap:10px; margin:0 0 8px; }
.rules-head h2 { margin:0; }
.rules-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.tile { position:relative; padding:12px 14px 12px 52px; background:#fff; border:1px solid #efecfb; border-radius:14px; min-height:96px; }
.tile .ico { position:absolute; left:12px; top:12px; width:30px; height:30px; display:grid; place-items:center; font-size:20px; background:#fff; border-radius:10px; box-shadow:0 2px 6px rgba(75,56,160,.15); }
.tile h3 { margin:0 0 4px; font-size:14px; color:var(--door-dark); line-height:1.4; }
.tile p { margin:0; font-size:12.5px; line-height:1.6; color:#4a4760; }
.tile .mini { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.badge.hint-mock { background:#fff7e3; border:1px dashed #f5b342; color:#7a4b00; }
.tile .mini .badge { font-size:11px; padding:3px 9px; }
.tile .chip { font-size:11px; padding:3px 9px; border-radius:999px; background:#fff; border:1px solid #e6e2f6; color:var(--door-dark); }
.tile .chip.mute { color:var(--mute); }
.doors-mini .d { display:inline-block; width:14px; height:22px; border-radius:7px 7px 2px 2px; background:linear-gradient(180deg, var(--door-light), var(--door-dark)); }
.doors-mini .d.open { background:radial-gradient(circle at 50% 60%, #fff7d6 0%, #fff 60%); box-shadow:inset 0 0 0 2px var(--door-light); }
.doors-mini .plus { font-size:12px; font-weight:800; color:var(--door-dark); margin-left:4px; }
.scale { gap:6px; font-size:11px; color:var(--mute); }
.scale i { flex:1; height:8px; border-radius:4px; background:linear-gradient(90deg, var(--yes), #f0a24a 50%, var(--no)); }
.key-tile { background:#fff7e3; }
/* たたんだ状態: 見出しだけの低いカードを並べる */
.rules-grid.folded { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.rules-grid.folded .tile { min-height:0; padding:8px 10px 8px 42px; }
.rules-grid.folded .tile .ico { top:7px; left:8px; width:26px; height:26px; font-size:16px; border-radius:8px; }
.rules-grid.folded .tile h3 { margin:0; }
.rules-grid.folded .tile > p, .rules-grid.folded .tile > .mini { display:none; }
@media (max-width: 640px) { .rules-grid { grid-template-columns:1fr; } .rules-grid.folded { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.hint { color:var(--mute); font-size:13px; margin-top:8px; }
/* プレイ中のステータス（ジャンル・難易度・残り扉）: 目立つ角丸の箱 */
.status { margin:12px auto 0; width:fit-content; max-width:100%; padding:8px 18px; border-radius:999px; background:linear-gradient(160deg, #efeaff, #e3dbff); border:1px solid #d5c9ff; color:var(--door-dark); font-size:14px; text-align:center; box-shadow:0 2px 8px rgba(123,91,230,.15); }
.status b { color:var(--door-dark); }
.status #doorsLeft { font-weight:800; }
.last { margin:8px auto 0; width:fit-content; padding:5px 16px; border-radius:999px; background:#f3f1fb; color:var(--door-dark); font-weight:700; text-align:center; letter-spacing:.05em; }
.last.is-last { width:auto; padding:6px 14px; background:linear-gradient(160deg, #f0a24a, var(--close)); color:#fff; font-weight:800; box-shadow:0 2px 8px rgba(224,134,42,.35); }
.last-hint { margin:8px 0 0; padding:8px 14px; border-radius:12px; background:#fff7e3; border:1px dashed #f5b342; color:#7a4b00; font-weight:700; text-align:center; letter-spacing:.08em; }
.prompt { margin:12px 0 0; padding:14px 16px; background:linear-gradient(135deg, #fff4d6, #ffe3a3); border:2px solid #f2b84b; border-radius:14px; color:#6b3d00; font-weight:800; font-size:18px; line-height:1.55; text-align:center; box-shadow:0 4px 14px rgba(221,149,32,.22); }
@media (max-width: 640px) { .prompt { font-size:16px; padding:12px 12px; } }
.warn { background:#fff7e3; border-left:4px solid #f5b342; padding:8px 12px; border-radius:10px; margin-top:10px; font-size:14px; }
[hidden] { display:none !important; }

button, .share { font-family:inherit; }
.reco { margin:6px 0 4px; }
.reco-row { display:flex; flex-wrap:wrap; gap:8px; }
.reco-row button { padding:7px 12px; border-radius:999px; border:1px solid #d5c9ff; background:linear-gradient(#fff, #f3f0ff); font:inherit; font-size:13px; color:var(--door-dark); cursor:pointer; box-shadow:0 1px 0 #e6e2f6; }
.reco-row button b { font-weight:800; }
.filters { margin:0 0 10px; }
.filters button.on { background:linear-gradient(160deg, var(--door-light), var(--door)); color:#fff; border-color:transparent; }
.reco-row button:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(123,91,230,.15); }
.genres { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.genres button, .difficulty, #again, #extend, #reveal {
  padding:11px 14px; border-radius:14px; border:1px solid #e6e2f6; background:linear-gradient(#fff, #f7f5ff);
  cursor:pointer; font-size:15px; color:var(--fg); box-shadow:0 2px 0 #e6e2f6; transition:transform .08s, box-shadow .08s;
}
.genres button:hover, .difficulty:hover, #again:hover, #extend:hover, #reveal:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(123, 91, 230, .15); }
.genres button.on, .difficulty.on, #extend {
  background:linear-gradient(160deg, var(--door-light), var(--door)); color:#fff; border-color:transparent; box-shadow:0 3px 0 var(--door-dark);
}
.genres button.custom { border-color:#f5d98a; background:linear-gradient(#fff, #fff7e3); }
.genres button.custom.on { background:linear-gradient(160deg, #f2b84b, #dd9520); border-color:transparent; box-shadow:0 3px 0 #b3740e; color:#fff; }
.genres button { font-size:16px; font-weight:700; text-wrap:balance; }
.genres button small { display:block; font-size:11px; font-weight:400; color:var(--mute); margin-top:2px; }
.genres button.on small { color:rgba(255,255,255,.85); }
.genres button:disabled { color:#bdbacb; cursor:not-allowed; background:#f3f2f7; box-shadow:none; transform:none; }
.row { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
/* 開始前オプション: 目立つ角丸の箱 */
.options { margin-top:14px; padding:12px 14px; border-radius:14px; background:linear-gradient(160deg, #fff7e3, #fff1cf); border:1px solid #f5d98a; }
.options-title { margin:0 0 6px; font-size:13px; font-weight:800; color:#7a4b00; letter-spacing:.04em; }
.options label { display:flex; gap:8px; align-items:flex-start; font-size:13px; color:#4a3a1a; margin:6px 0 0; line-height:1.5; }
.options input { margin-top:3px; flex:none; }
.confirm-list { margin:8px 0 0; padding:0 0 0 18px; font-size:15px; line-height:1.9; }
.confirm-list b { color:var(--door-dark); }
#confirmBack { padding:11px 14px; border-radius:14px; border:1px solid #e6e2f6; background:#fff; cursor:pointer; font-size:15px; }
.difficulty { flex:1; min-width:80px; font-size:18px; font-weight:700; }
#start { font-size:21px; padding:16px 18px; letter-spacing:.08em; }
.foot { text-align:center; margin:18px 0 8px; font-size:13px; }
.foot .gh { display:inline-flex; align-items:center; gap:6px; color:var(--door-dark); text-decoration:none; padding:6px 12px; border-radius:999px; border:1px solid #e6e2f6; background:#fff; box-shadow:var(--shadow); }
.foot .gh:hover { text-decoration:underline; }
.foot .links { margin:10px 0 0; font-size:12px; color:var(--mute); }
.foot .links a { color:var(--door-dark); margin:0 6px; }
.keybtn { margin-left:auto; padding:6px 12px; border-radius:999px; border:1px solid #e6e2f6; background:#fff; color:var(--door-dark); font-size:13px; cursor:pointer; box-shadow:var(--shadow); }
.keybtn.ghbtn { margin-left:0; display:inline-flex; align-items:center; gap:5px; text-decoration:none; }
.keybtn.ghbtn:hover { text-decoration:underline; }
.keydialog { border:0; border-radius:var(--radius); padding:22px 24px; max-width:440px; width:calc(100% - 32px); box-shadow:0 20px 60px rgba(75, 56, 160, .25); }
.keydialog::backdrop { background:rgba(38, 35, 58, .45); backdrop-filter:blur(2px); }
.keydialog h2 { margin:0 0 6px; }
.keydialog input[type="password"] { width:100%; padding:12px 14px; margin-top:10px; border:1px solid #e3dff3; border-radius:14px; font-size:16px; font-family:inherit; background:#fbfaff; }
.keydialog input[type="password"]:focus { outline:2px solid var(--door-light); outline-offset:0; }
.keydialog label { display:block; margin-top:8px; }
.about { max-width:860px; }
.about > form > p { font-size:14px; line-height:1.7; color:#4a4760; }
/* 流れ図: 左に処理、右に Jev へのリクエストの吹き出し */
.flow { list-style:none; margin:14px 0 0; padding:0; position:relative; }
.flow::before { content:""; position:absolute; left:19px; top:8px; bottom:8px; width:3px; background:linear-gradient(var(--door-light), var(--door-dark)); border-radius:2px; opacity:.35; }
.step { display:grid; grid-template-columns:minmax(200px, 1fr) minmax(0, 1.6fr); gap:14px; align-items:start; margin:0 0 18px; }
.stepbox { position:relative; padding:10px 12px 10px 48px; background:#f7f5ff; border-radius:14px; min-height:64px; }
.stepbox .num { position:absolute; left:6px; top:10px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px; background:linear-gradient(160deg, var(--door-light), var(--door-dark)); box-shadow:0 2px 6px rgba(75,56,160,.3); }
.stepbox h3 { margin:0 0 4px; font-size:15px; color:var(--door-dark); }
.stepbox p { margin:0; font-size:13px; line-height:1.65; color:#4a4760; }
.bubble { position:relative; border-radius:14px; padding:10px 12px 8px; background:#fff; border:1px solid #e6e2f6; box-shadow:var(--shadow); min-width:0; }
.bubble::before { content:""; position:absolute; left:-9px; top:22px; border:8px solid transparent; border-right-color:#e6e2f6; border-left:0; }
.bubble::after { content:""; position:absolute; left:-7px; top:23px; border:7px solid transparent; border-right-color:#fff; border-left:0; }
.bubble.jev { border-color:#c9b8ff; background:#fbf9ff; }
.bubble.jev::before { border-right-color:#c9b8ff; }
.bubble.jev::after { border-right-color:#fbf9ff; }
.bubble.build { border-color:#f2d59a; background:#fffaf0; }
.bubble.build::before { border-right-color:#f2d59a; }
.bubble.build::after { border-right-color:#fffaf0; }
.bubble.code { background:#f3f4f6; border-color:#dfe2e8; }
.bubble.code::before { border-right-color:#dfe2e8; }
.bubble.code::after { border-right-color:#f3f4f6; }
.bubble .tag { display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; color:#fff; background:var(--door); margin-bottom:6px; }
.bubble.build .tag { background:#d99a2b; }
.bubble.code .tag { background:#6b7280; }
.bubble pre { margin:0; font:12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space:pre; overflow-x:auto; color:#26233a; padding-bottom:4px; }
.bubble pre .k { color:var(--mute); font-style:italic; }
.bubble .cap { margin:6px 0 0; font-size:12px; color:var(--mute); line-height:1.6; }
@media (max-width: 640px) {
  .step { grid-template-columns:1fr; }
  .flow::before { display:none; }
  .bubble::before, .bubble::after { display:none; }
}

/* 扉: ヒーロー画像と同じアーチ形。開くと中で ✓/✕ が光る */
.doors { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:6px 0 4px; }
.door {
  width:52px; height:78px; border-radius:26px 26px 6px 6px; position:relative; transition:.35s;
  background:linear-gradient(180deg, var(--door-light) 0%, var(--door) 55%, var(--door-dark) 100%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.18), 0 6px 12px rgba(75, 56, 160, .25);
}
.door::after { content:""; position:absolute; right:9px; top:44px; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 6px rgba(255, 215, 106, .9); }
.door.open { background:radial-gradient(circle at 50% 60%, #fff7d6 0%, #fff 45%, #efeaff 100%); box-shadow:inset 0 0 0 3px var(--door-light), 0 0 18px rgba(255, 215, 106, .55); }
.door.open::after { display:none; }
.door.open::before { content:""; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800; }
.door.open[data-mark="yes"]::before { content:"✓"; color:var(--yes); text-shadow:0 0 12px rgba(46, 158, 91, .5); }
.door.open[data-mark="no"]::before { content:"✕"; color:var(--no); text-shadow:0 0 12px rgba(209, 67, 67, .5); }
.door.open[data-mark="close"]::before { content:"△"; color:var(--close); text-shadow:0 0 12px rgba(224, 134, 42, .5); }

/* 入力 */
.ask { display:flex; gap:8px; margin-top:12px; }
.ask input { flex:1; min-width:0; padding:12px 14px; border:1px solid #e3dff3; border-radius:14px; font-size:16px; font-family:inherit; background:#fbfaff; }
.ask input:focus { outline:2px solid var(--door-light); outline-offset:0; }
.ask input:disabled { background:#f3f2f7; color:#bdbacb; }
.ask button { padding:12px 18px; border-radius:14px; border:0; color:#fff; cursor:pointer; font-size:15px; white-space:nowrap;
  background:linear-gradient(160deg, var(--door-light), var(--door)); box-shadow:0 3px 0 var(--door-dark); }
.ask button:active { transform:translateY(2px); box-shadow:0 1px 0 var(--door-dark); }
.ask button:disabled { background:#d6d0f3; box-shadow:none; cursor:not-allowed; }

/* 履歴 */
.log-title { margin:18px 0 0; font-size:14px; color:var(--mute); }
.log { list-style:none; margin:10px 0 0; padding:0 4px 0 0; max-height:40vh; overflow-y:auto; overscroll-behavior:contain; }
.log li { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:9px 0; border-top:1px solid #eeecf6; }
.log .warn { flex-basis:100%; margin:0; }
.log .no { flex:0 0 auto; padding:2px 8px; border-radius:999px; background:#f3f1fb; color:var(--door-dark); font-size:12px; font-weight:700; white-space:nowrap; }
.log .q { flex:1 1 200px; font-size:15px; }
.log .a { display:flex; align-items:center; gap:6px; margin-left:auto; }
.log .redo { padding:3px 9px; border-radius:999px; border:1px solid #e6e2f6; background:#fff; color:var(--door-dark); font-size:11px; cursor:pointer; }
.log .redo:hover { background:#f3f1fb; }
.log .redo:disabled { opacity:.5; cursor:progress; }
.log .report { border-color:#f2b84b; color:#6b3d00; background:#fff8e6; }
.log .report:disabled { cursor:default; }
.log .label { color:var(--mute); font-size:13px; font-weight:600; }
.badge { flex:none; padding:4px 12px; border-radius:999px; color:#fff; font-size:13px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.badge.yes { background:linear-gradient(160deg, #3fb56f, var(--yes)); }
.badge.no { background:linear-gradient(160deg, #e05a5a, var(--no)); }
.badge.mute { background:linear-gradient(160deg, #aab0b8, #8f959d); }
.badge.close { background:linear-gradient(160deg, #f0a24a, var(--close)); }

/* 結果 */
h2 { font-size:20px; margin:0 0 8px; }
#s-result { text-align:center; }
.result-img { margin-bottom:10px; }
#s-result h2 { font-size:34px; margin:6px 0 10px; }
#s-result .secret { margin:0; font-size:18px; }
#s-result .secret b { font-size:42px; display:block; margin:6px 0 2px; color:var(--door); text-shadow:0 2px 0 #fff, 0 6px 18px rgba(123, 91, 230, .25); }
#s-result .row { justify-content:center; }
#s-result #history { background:#f3f1fb; border-radius:14px; padding:12px 16px 14px; margin:18px 0; text-align:left; }
#s-result .log-title { margin:0 0 4px; }
#s-result .log li { border-top-color:#e4e0f3; }
.share { display:inline-block; padding:11px 18px; border-radius:14px; background:#111; color:#fff; text-decoration:none; font-size:15px; box-shadow:0 3px 0 #000; }
#again, #extend, #reveal { font-size:15px; }
.start { flex:1; padding:13px 18px; border-radius:14px; border:0; color:#fff; cursor:pointer; font-size:17px; font-weight:700;
  background:linear-gradient(160deg, var(--door-light), var(--door)); box-shadow:0 3px 0 var(--door-dark); }
.start:disabled { background:#d6d0f3; box-shadow:none; cursor:not-allowed; }

/* スマホ: 扉は 2 段に折り返し、入力と押しやすい大きさに */
@media (max-width: 480px) {
  body { padding:12px 10px 32px; }
  .card { padding:14px 14px 16px; border-radius:16px; }
  .howto { padding:10px 10px 12px; border-radius:14px; }
  h1 { font-size:20px; }
  .rules .tagline { font-size:17px; }
  .doors { gap:7px; }
  .door { width:40px; height:60px; border-radius:20px 20px 5px 5px; }
  .door::after { top:33px; right:6px; width:7px; height:7px; }
  .door.open::before { font-size:24px; }
  .ask { flex-direction:column; }
  .ask button { padding:13px; }
  .genres { grid-template-columns:repeat(2, 1fr); }
  .log .a { margin-left:0; width:100%; justify-content:flex-end; }
  #s-result .secret b { font-size:34px; }
  #s-result .row > * { flex:1; text-align:center; }
}