/* 學習島・展場版:探長的官方樣子 + 島上的任務(xq)。接在 expo.css 後面 */

/* ---------- 探長的樣子:官方插圖(只取頭和帽子) ---------- */
.xp-pp-ava, .xp-ava { background-image: var(--hero-img) !important; background-size: 172% !important; background-position: 46% 10% !important; }
.expo .hero-here::after { background: #fff var(--hero-img) 46% 10% / 172% no-repeat !important; }
.expo .caption .ava svg { display: none; }
.expo .caption .ava { background: #fff4c4 var(--hero-img) 46% 10% / 172% no-repeat; }

/* ===================== 島上的任務:3D 島一直在 =====================
   左邊一欄是島(鏡頭對著那一站),左下是探長的對話框,右邊浮著道具卡 */
.expo { --xq-l: clamp(360px, 28vw, 440px); }
body.xp-quest .caption, body.xp-quest .credit { display: none !important; }
.xq-talk { position: absolute; z-index: 26; left: 16px; bottom: 16px; width: calc(var(--xq-l) - 32px); }
.xq-face { position: absolute; z-index: 2; left: -8px; bottom: calc(100% - 70px); width: 136px; height: auto; pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(48, 78, 70, .28)); transform-origin: 50% 100%; }
.xq-face.pop { animation: xq-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes xq-pop { 0% { transform: scale(.82) translateY(10px); } 100% { transform: none; } }
.xq-box { padding: 12px 16px 16px; border-radius: 28px; background: rgba(255, 253, 248, .97); box-shadow: var(--shadow), var(--clay); }
/* 「離開關卡」貼在對話框上緣右邊(以 .xq-talk 定位,對話框可以捲也不會被裁掉);
   原本和標題擠同一列,標題只剩「建…」「改…」兩個字 */
.xq-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0 0 112px; }
.xq-head .hex { flex: none; width: 40px; height: 36px; font-size: 18px; }
.xq-title { flex: 1; min-width: 0; line-height: 1.2; }
.xq-title small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 900; letter-spacing: .1em; color: color-mix(in srgb, var(--c) 70%, var(--ink)); }
.xq-title b { display: block; font-size: 17px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xq-leave { position: absolute; z-index: 3; top: -20px; right: 16px; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; font: 900 14.5px/1 var(--font); color: var(--ink); white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line), 0 4px 12px rgba(48, 78, 70, .18); }
.xq-leave:disabled { opacity: .5; cursor: not-allowed; }
.xq-leave:hover { background: var(--cream); }
.xq-steps { display: flex; gap: 6px; margin: 10px 0 6px; padding: 0; list-style: none; }
.xq-steps li { flex: 1 1 auto; display: flex; min-width: 0; border-radius: 14px; background: var(--track); font-size: 13px; font-weight: 900; color: var(--soft); white-space: nowrap; transition: box-shadow .15s, background .15s; }
/* 每一步是一顆按鈕:走過的可以點回去 */
.xq-step { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer; }
.xq-step:disabled { cursor: default; }
.xq-step:focus-visible { outline: 3px solid var(--c); outline-offset: 1px; }
.xq-steps li:has(.xq-step:not(:disabled)):hover { background: #fff; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 60%, #fff), 0 2px 6px rgba(48, 78, 70, .12); color: var(--ink); }
.xq-steps .n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: 12px; }
.xq-steps li.now { background: color-mix(in srgb, var(--c) 22%, #fff); color: var(--ink); box-shadow: inset 0 0 0 2px var(--c); }
.xq-steps li.done .n { background: var(--c); color: #fff; font-size: 0; }
.xq-steps li.done .n::before { content: "✓"; font-size: 13px; }
.xq-who { margin: 6px 0 2px; font-size: 12.5px; font-weight: 900; letter-spacing: .14em; color: #b07d10; }
.xq-line { margin: 0 0 12px; min-height: 2.6em; font-size: 17px; font-weight: 700; line-height: 1.65; color: var(--ink); }
/* 一直看得到的任務欄:整關的任務 + 這一步要做什麼 */
.xq-mission { display: grid; gap: 4px; margin: 8px 0 2px; padding: 9px 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--c) 11%, #fff); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 32%, #fff); }
.xq-mission p { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.xq-mission b { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 80%, var(--ink)); color: #fff; font-size: 12.5px; line-height: 1.7; vertical-align: 1px; }
.xq-mission-step b { background: var(--ink); }
.xq-mission-step[hidden] { display: none; }
.xq-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.xq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--yellow); color: var(--ink); font: 900 16px/1 var(--font); letter-spacing: .03em;
  box-shadow: inset 0 -4px 0 var(--yellow-d), inset 0 3px 0 rgba(255, 255, 255, .55), 0 4px 10px rgba(232, 165, 34, .28); transition: transform .12s, background .2s; }
.xq-btn:hover:not(:disabled) { background: #ffdc6b; }
.xq-btn:active:not(:disabled) { transform: translateY(2px) scale(.98); }
.xq-btn:disabled { opacity: .45; cursor: not-allowed; }
.xq-btn.ghost { background: #fff; box-shadow: inset 0 0 0 2px var(--line), 0 3px 8px rgba(48, 78, 70, .08); }
.xq-btn.ghost:hover:not(:disabled) { background: var(--cream); }
.xq-btn.small { min-height: 34px; padding: 0 14px; font-size: 14px; }
.xq-more { min-height: 36px; }

/* 道具卡區 */
.xq-props { position: absolute; z-index: 24; left: var(--xq-l); right: 16px; top: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 16px; pointer-events: none; }
.xq-props > * { pointer-events: auto; }
.xq-card { display: flex; flex-direction: column; max-height: 100%; border-radius: 30px; background: var(--paper); overflow: hidden;
  box-shadow: 0 20px 48px rgba(35, 48, 45, .24), var(--clay); animation: xq-in .5s cubic-bezier(.2, 1.25, .4, 1); }
@keyframes xq-in { from { transform: translateY(24px) scale(.96); opacity: 0; } }
.xq-card-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: 16px; font-weight: 900;
  background: color-mix(in srgb, var(--k, var(--c)) 22%, #fff); border-bottom: 3px solid color-mix(in srgb, var(--k, var(--c)) 45%, #fff); }
.xq-lights { display: inline-flex; gap: 5px; }
.xq-lights i { width: 11px; height: 11px; border-radius: 50%; background: #f2665c; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.xq-lights i:nth-child(2) { background: #ffd34d; }
.xq-lights i:nth-child(3) { background: #5cc36a; }
.xq-card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.xq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* 漫畫書 */
.xq-book { --k: #f4b63f; height: 100%; max-width: min(560px, 100%); }
.xq-comic { flex: 1; min-height: 0; width: 100%; object-fit: contain; border-radius: 16px; }
/* 遊戲機 */
.xq-arcade { --k: #ff9b54; width: min(500px, 100%); flex: none; }
.xq-code ~ .xq-arcade { width: min(460px, 44%); }
.xq-screen { position: relative; aspect-ratio: 4 / 3; padding: 8px; border-radius: 20px; background: #2f3640; box-shadow: inset 0 0 0 4px #485260, inset 0 -6px 0 #1f252c; }
.xq-canvas { display: block; width: 100%; height: 100%; border-radius: 13px; background: #111; outline: none; }
.xq-canvas:focus-visible { box-shadow: 0 0 0 3px var(--yellow); }
.xq-status { margin: 0; font-size: 14px; font-weight: 700; color: var(--soft); }
.xq-con summary { cursor: pointer; font-size: 13px; font-weight: 900; color: var(--soft); }
.xq-con .console { max-height: 110px; overflow: auto; margin-top: 6px; padding: 8px 10px; border-radius: 12px; background: #1f2328; color: #e8e8e8; font: 13px/1.5 Consolas, "Cascadia Mono", monospace; white-space: pre-wrap; }
.xq-con .console .err { color: #ff8a80; }
.xq-con .console .muted { color: #9aa4a0; }
.xq .btn-mute { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 900 15px/1 var(--font); cursor: pointer; box-shadow: inset 0 0 0 2px var(--line); }
.xq .btn-mute[aria-pressed="true"] { background: var(--cream); box-shadow: inset 0 0 0 2px var(--yellow-d); }
.xq .dpad { display: grid; gap: 6px; justify-items: center; }
.xq .dpad-row { display: flex; gap: 6px; }
.xq .dpad-btn { width: 56px; height: 46px; border: 0; border-radius: 14px; background: #fff; font-size: 18px; font-weight: 900; box-shadow: inset 0 0 0 2px var(--line); }
.xq .dpad-btn.wide { width: 118px; }
/* 觸控螢幕(手機、平板,不管多大):方向鍵排一行;卡片不夠寬就一起縮,不會跑出卡片外 */
@media (pointer: coarse) {
  .xq .dpad { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; }
  .xq .dpad-row { display: contents; }
  .xq .dpad-btn { flex: 0 1 50px; min-width: 34px; height: 42px; }
  .xq .dpad-btn.wide { flex: 0 1 72px; min-width: 52px; font-size: 15px; }
}
/* 程式控制台 */
.xq-code { --k: #4a97dd; flex: 1 1 520px; max-width: 640px; height: 100%; }
.xq-editor { position: relative; flex: 1; min-height: 220px; border-radius: 16px; overflow: hidden; background: #212121; box-shadow: inset 0 0 0 3px #33393f; }
.xq-editor .CodeMirror { position: absolute; inset: 0; height: 100%; font: 15.5px/1.6 Consolas, "Cascadia Mono", monospace; }
.xq-editor .code-fallback { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 10px; background: #212121; color: #eee; font: 15px/1.6 Consolas, monospace; }
.xq-hl { background: rgba(255, 211, 77, .3) !important; }
/* 程式 / 素材 分頁 */
.xq-tabs { flex: none; display: flex; gap: 6px; }
.xq-tab { height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--track); font: 900 15px/1 var(--font); color: var(--soft); cursor: pointer; }
.xq-tab:hover { color: var(--ink); }
.xq-tab.on { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--k) 55%, #fff), 0 3px 8px rgba(48, 78, 70, .1); }
.xq-assets { flex: 1; min-height: 220px; overflow: auto; padding: 4px 4px 8px; }
.xq-assets h4 { margin: 12px 0 6px; font-size: 15px; font-weight: 900; }
.xq-assets ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.xq-asset { display: grid; justify-items: center; gap: 6px; padding: 10px 8px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.xq-asset img { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; background: var(--track); }
.xq-asset code { max-width: 100%; overflow-wrap: anywhere; text-align: center; font: 800 13.5px/1.3 Consolas, "Cascadia Mono", monospace; color: var(--ink); }
.xq-play { width: 72px; height: 72px; border: 0; border-radius: 12px; background: var(--track); font-size: 30px; cursor: pointer; }
.xq-play:hover, .xq-copy:hover { background: var(--cream); }
.xq-copy { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--track); font: 900 13px/1 var(--font); color: var(--ink); cursor: pointer; }
.xq-muted { margin: 0; font-size: 14px; font-weight: 700; color: var(--soft); }
@media (prefers-reduced-motion: reduce) { .xq-face.pop, .xq-card { animation: none; } }

/* ---------- 兩張道具卡並排時:平分,內容太長就在卡片裡捲 ---------- */
.xq-props > .xq-card { flex: 1 1 0; min-width: 0; max-width: 600px; }
.xq-props > .xq-book { flex: 0 1 auto; }
.xq-props > .xq-arcade { flex: none; }
.xq-props > .xq-book + .xq-card { flex: 1 1 0; }
.xq-card-body { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.xq-book .xq-card-body { overflow: hidden; }
.xq-muted.small, .xq .small { font-size: 13px; }
.xq-b { margin: 0; font-weight: 900; }
.xq-big { margin: 0; font-size: 20px; font-weight: 900; }
.xq-err { margin: 0; font-size: 14.5px; font-weight: 800; color: #c2410c; }
.xq-err:empty { display: none; }
.xq-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 900; color: #2f78bd; box-shadow: inset 0 0 0 2px #cfe4f6; white-space: nowrap; }
.xq-btn.bad { color: #c2410c; }
.xq-btn.bad.on { background: #ffe1d6; box-shadow: inset 0 -4px 0 #f0a58a, 0 3px 8px rgba(194, 65, 12, .18); }
.xq-console .console { max-height: 150px; overflow: auto; padding: 10px 12px; border-radius: 14px; background: #1f2328; color: #e8e8e8; font: 14px/1.55 Consolas, "Cascadia Mono", monospace; white-space: pre-wrap; }
.xq-console .console .err { color: #ff8a80; }
.xq-console .console .ok { color: #8be0a8; }
.xq-console .console .muted { color: #9aa4a0; }
.xq textarea, .xq-slip input { width: 100%; padding: 10px 14px; border: 2px solid var(--line); border-radius: 16px; background: #fff; font: 700 16px/1.6 var(--font); color: var(--ink); outline: none; resize: vertical; }
.xq textarea:focus, .xq-slip input:focus { border-color: var(--yellow-d); box-shadow: 0 0 0 3px rgba(255, 211, 77, .35); }
/* 語音輸入鈕(體驗站的 micButton;這一頁沒有 style.css) */
.xq .mic-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.xq .mic-btn.mic-sm { width: 36px; height: 36px; font-size: 16px; }
.xq .mic-btn.listening { border-color: #f43f5e; background: #ffe4e6; animation: xq-blink 1.2s ease-in-out infinite; }
@keyframes xq-blink { 50% { opacity: .55; } }
.mic-tip { position: fixed; z-index: 3000; max-width: min(300px, calc(100vw - 16px)); padding: 8px 12px; border-radius: 12px; background: #fff3d6; border: 2px solid #ffd34d; color: #3b2f05; font: 800 14px/1.5 var(--font); box-shadow: 0 8px 20px rgba(60, 50, 10, .18); pointer-events: none; }

/* ---------- 指揮官島 ---------- */
.xq-slips { --k: #4a97dd; }
.xq-slip-list { display: grid; gap: 8px; }
.xq-slip { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 16px; background: #fffdf6; box-shadow: inset 0 0 0 2px #f1e6c8, 2px 3px 0 #f3e3b8; }
.xq-slip:nth-child(odd) { transform: rotate(-.4deg); }
.xq-slip:nth-child(even) { transform: rotate(.35deg); }
.xq-slip-no { flex: none; padding: 4px 10px; border-radius: 10px; background: #4a97dd; color: #fff; font-size: 13px; font-weight: 900; }
.xq-slip input { border: 0; box-shadow: none; padding: 6px 4px; background: transparent; }
.xq-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--track); color: var(--soft); cursor: pointer; }
.xq-x:hover { color: #c2410c; }
.xq-cmd-box { position: relative; display: flex; gap: 8px; align-items: flex-start; }
.xq-cmd-box textarea { flex: 1; }
.xq-cmd { --k: #4a97dd; }
.xq-echo { display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: #eaf3fc; box-shadow: inset 0 0 0 2px #cfe4f6; }
.xq-echo-head { margin: 0; font-weight: 900; color: #2f78bd; }
.xq-echo-row { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: #fff; }
.xq-echo-row p { margin: 0; font-weight: 700; }
.xq-echo-row.ok { background: #effaf3; }
.xq-ai-code { margin: 0; max-height: 210px; overflow: auto; padding: 12px 14px; border-radius: 14px; background: #212121; color: #c3e88d; font: 14px/1.55 Consolas, "Cascadia Mono", monospace; white-space: pre-wrap; }
.xq-badge { display: inline-block; padding: 1px 8px; border-radius: 6px; background: #2f78bd; color: #fff; font-size: 12px; font-weight: 900; }
.xq-ai { --k: #8fc7f5; }
.xq-station { --k: #3fae7a; }
.xq-station-list { display: grid; gap: 8px; }
.xq-version { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xq-check { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.xq-check.pass { box-shadow: inset 0 0 0 2px #8bd3a7; background: #f2fbf5; }
.xq-check.fail { box-shadow: inset 0 0 0 2px #f4b49e; background: #fff6f2; }
.xq-check-t { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xq-revise { display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: #fff6f2; }
.xq-stamp-btn { width: 100%; }
.xq-stamped { display: grid; justify-items: center; gap: 6px; padding: 10px; text-align: center; }
.xq-stamped img { width: 130px; height: auto; animation: xq-pop .6s cubic-bezier(.2, 1.6, .4, 1); }

/* ---------- 偵探島 ---------- */
.xq-suspect { --k: #3fae7a; }
.xq-suspect-code, .xq-hunt-lines { margin: 0; padding: 10px 0; border-radius: 16px; background: #212121; color: #e8e8e8; font: 15px/1.7 Consolas, "Cascadia Mono", monospace; overflow: auto; }
pre.xq-suspect-code > div { padding: 0 14px; white-space: pre; }
.xq-suspect-code .ln, .xq-line-btn .ln { display: inline-block; width: 2em; margin-right: 10px; color: #7d8590; text-align: right; user-select: none; }
.xq-hunt-lines { display: grid; gap: 2px; padding: 10px 8px; }
.xq-hunt-lines > .xq-muted { margin: 0 6px 6px; color: #c9d1d9; display: flex; gap: 8px; align-items: center; }
.xq-line-btn { display: block; width: 100%; padding: 2px 8px; border: 0; border-radius: 8px; background: transparent; color: #e8e8e8; font: inherit; text-align: left; white-space: pre; cursor: pointer; }
.xq-line-btn:hover { background: #33393f; }
.xq-line-btn.caught { background: #ffd34d; color: #23302d; font-weight: 700; }
.xq-line-btn.caught .ln { color: #6b5a2a; }
.xq-line-btn.miss { background: #5a2a2a; animation: xq-shake .4s; }
@keyframes xq-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.xq-why { margin: 8px 6px 0; padding: 10px 12px; border-radius: 14px; background: #fff; color: var(--ink); font-family: var(--font); white-space: normal; }
.xq-why b { color: #b07d10; }
.xq-why p { margin: 4px 0 0; font-weight: 700; }
.xq-hunt, .xq-witness { --k: #3fae7a; }
.xq-witness-body { display: grid; gap: 8px; }
.xq-witness-head { display: flex; gap: 10px; align-items: center; }
.xq-witness-head img { width: 64px; height: auto; }
.xq-witness-head b { font-size: 17px; }
.xq-witness-head p { margin: 2px 0 0; }
.xq-tip { margin: 0; padding: 8px 12px; border-radius: 12px; background: #fff3d6; font-size: 14px; font-weight: 800; color: #6b5a2a; }
.xq-qa { display: grid; gap: 6px; }
.xq-ask { padding: 10px 14px; border: 0; border-radius: 14px; background: #fff; text-align: left; font: 800 15px/1.5 var(--font); color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 2px #cdeedb; }
.xq-ask:hover:not(:disabled) { background: #f0faf4; }
.xq-ask.asked { box-shadow: inset 0 0 0 2px #8bd3a7; background: #f0faf4; }
.xq-ask:disabled { cursor: default; }
.xq-answer { margin: 0 0 4px; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: #eaf3fc; font-weight: 700; }
.xq-fix { --k: #3fae7a; }
.xq-editor.short { min-height: 190px; flex: 0 0 auto; height: 220px; }

/* ---------- 實戰島、隱藏關卡:體驗站的畫面裝在道具卡裡 ---------- */
.xq-legacy-card { height: 100%; max-width: 860px !important; }
.xq-legacy-card .xq-card-body { padding: 10px 12px; }
.xq-gemini { --k: #f07848; }
.xq-mail { --k: #8a6fd1; }
.xq-gift { --k: #2d4a78; }
.xq-gift.xq-legacy-card { height: auto; }

/* ---------- 探險護照:地圖和每一關都在右上角;關卡裡縮成一條,道具卡往下讓 ---------- */
.xp-restart { display: block; width: 100%; height: 34px; margin-top: 8px; border: 0; border-radius: 999px; background: var(--track); font: 900 13.5px/1 var(--font); color: var(--soft); cursor: pointer; }
.xp-restart:hover { background: #ffe1d6; color: #c2410c; }
body.xp-quest .xp-passport { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; border-radius: 999px; }
body.xp-quest .xp-pp-title { margin: 0; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; }
body.xp-quest .xp-pp-title > span:not(.xp-pp-ava), body.xp-quest .xp-pp-ava { display: none; }
body.xp-quest .xp-pp-title b { font-size: 14px; max-width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.xp-quest .xp-pp-title em { margin: 2px 0 0; padding: 0 8px; font-size: 12px; }
body.xp-quest #xp-stamps { gap: 3px; }
body.xp-quest #xp-stamps button { width: 50px; gap: 1px; }
body.xp-quest .xp-st { width: 38px; height: 34px; font-size: 16px; }
body.xp-quest .round .xp-st { width: 34px; height: 34px; }
body.xp-quest .xp-st-lab { font-size: 10.5px; }
body.xp-quest .xp-restart { width: auto; margin: 0; padding: 0 14px; white-space: nowrap; }
body.xp-quest .xq-props { top: 100px; }

/* ---------- 隱藏關卡:禮物盒 ---------- */
.xq-giftbox { --k: #2d4a78; max-width: 640px !important; }
.xq-gift-body { display: grid; gap: 10px; }
.xq-gift-btn { display: grid; justify-items: center; gap: 6px; margin: 10px auto; padding: 26px 46px; border: 3px dashed #e8a522; border-radius: 28px; background: #fff3d6; font-family: var(--font); color: var(--ink); cursor: pointer; transition: transform .15s; }
.xq-gift-btn:hover:not(:disabled) { transform: translateY(-3px) rotate(-1deg); }
.xq-gift-icon { font-size: 64px; line-height: 1; animation: xp-bob 2s ease-in-out infinite; }
.xq-gift-btn b { font-size: 20px; font-weight: 900; }
.xq-gift-btn small { font-size: 14px; font-weight: 700; color: var(--soft); }
.xq-bonus-top { justify-content: space-between; }
.xq-bonus-title { margin: 0; font-size: 24px; font-weight: 900; color: var(--ink); }
.xq-home { padding: 10px 14px; border-radius: 16px; background: #eef3fb; }
.xq-home p { margin: 0 0 4px; }
.xq-home ol { margin: 0; padding-left: 1.3em; font-size: 15px; font-weight: 700; line-height: 1.7; }

/* ---------- 實戰島:Gemini 工作坊(網頁題)、作品寄送站 ---------- */
.xq-prompt, .xq-go, .xq-paste, .xq-checks { --k: #f07848; }
.xq-webplay { --k: #ff9b54; }
.xq-work1, .xq-work2 { --k: #8a6fd1; }
.xq-shadow { display: block; --c: #f07848; }
.xq-gemini-btn { align-self: flex-start; background: #23302d; color: #fff; text-decoration: none; box-shadow: inset 0 -4px 0 #0f1a17, 0 4px 10px rgba(35, 48, 45, .25); }
.xq-gemini-btn:hover { background: #34433f !important; }
.xq-howto { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: 15.5px; font-weight: 700; line-height: 1.6; }
.xq-howto kbd, .xq kbd { padding: 1px 7px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px #d7cdb6, 0 2px 0 #d7cdb6; font: 800 13px/1.6 Consolas, monospace; }
.xq-paste-code { min-height: 180px; font: 13.5px/1.5 Consolas, "Cascadia Mono", monospace !important; white-space: pre; }
.xq-webscreen { display: grid; gap: 10px; }
.xq-webscreen iframe { width: 100%; aspect-ratio: 4 / 3; max-height: calc(100vh - 230px); border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 3px #ffd7b8, 0 4px 12px rgba(48, 78, 70, .12); }
.xq-empty { padding: 40px 16px; border-radius: 18px; background: #fff6ee; text-align: center; }
.xq-webplay { max-width: 640px !important; }
.xq-checklist { display: grid; gap: 8px; }
.xq-tick { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px var(--line); font-weight: 800; line-height: 1.5; cursor: pointer; }
.xq-tick input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: #3fae7a; }
.xq-tick.on { background: #f2fbf5; box-shadow: inset 0 0 0 2px #8bd3a7; }
.xq-share { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 18px; background: #f6f2ff; box-shadow: inset 0 0 0 2px #ddd2fa; }
.xq-qr { flex: none; padding: 8px; border-radius: 14px; background: #fff; }
.xq-qr img, .xq-qr canvas { display: block; width: 150px; height: 150px; }
.xq-share-txt { display: grid; gap: 6px; min-width: 0; }
.xq-share-txt p { margin: 0; }
.xq-ok-note { margin: 0; font-size: 14px; font-weight: 800; color: #23805a; }
.xq-ok-note:empty { display: none; }
.xq-replace { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2px #ddd2fa; }
.xq-work2-body { display: grid; gap: 10px; }
.xq-url { width: 100%; padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font: 13px Consolas, monospace; color: var(--ink); }
a.xq-btn { text-decoration: none; }


/* =====================================================================
   手機、直立平板(和學習島同一個斷點):
   開始畫面 → 按鈕縮成一行、放在下面的換島列上方
   選角色   → 面板縮小(鏡頭在 player.js 依螢幕比例拉遠)
   走路     → 品牌標誌收起來;護照縮成最上面一條、下一站在它下面;搖桿左下
   關卡     → 道具卡全寬疊在上面(可以捲);探長的對話在下面一片(可以捲)
   ===================================================================== */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  /* ---- 開始畫面 ---- */
  body.xp-attract .caption { bottom: auto; }   /* 手機的字幕在上面;桌機規則會把它上下撐開成一大片 */
  body.xp-attract .xp-start { bottom: calc(184px + var(--safe-b, 0px)); }
  body.xp-attract.has-card .xp-start { display: none; }
  .xp-go { gap: 10px; padding: 8px 24px 8px 8px; animation: none;
    box-shadow: inset 0 -5px 0 var(--yellow-d), inset 0 3px 0 rgba(255, 255, 255, .55), 0 10px 24px rgba(232, 165, 34, .35), 0 0 0 6px rgba(255, 255, 255, .55); }
  .xp-go-ava { width: 46px; height: 46px; }
  .xp-go-ava svg { width: 24px; height: 24px; }
  .xp-go-txt b { font-size: 24px; white-space: nowrap; }
  .xp-go-txt small { display: none; }

  /* ---- 選角色 ---- */
  .xp-picker { bottom: calc(10px + var(--safe-b, 0px)); padding: 12px 12px 14px; border-radius: 22px; }
  .xp-picker h2 { font-size: 20px; }
  .xp-pick-sub { margin: 2px 0 8px; font-size: 12.5px; }
  .xp-pick-row { gap: 5px; margin-bottom: 10px; }
  .xp-pick-row button { padding: 6px 2px 7px; border-radius: 14px; }
  .xp-pick-row button i { width: 20px; height: 20px; }
  .xp-pick-row button b { font-size: 15px; }
  .xp-pick-row button span { font-size: 11px; white-space: nowrap; }
  .xp-picker .xp-row { flex-wrap: nowrap; gap: 8px; }
  .xp-picker .xp-btn { min-height: 46px; padding: 0 14px; font-size: 15px; white-space: nowrap; }
  .xp-picker #xp-pick-ok { flex: 1; min-width: 0; font-size: 17px; }

  /* ---- 走路、關卡:護照縮成最上面一條 ---- */
  body.xp-map .brand, body.xp-quest .brand { display: none; }
  body.xp-map .xp-passport, body.xp-quest .xp-passport { top: calc(8px + var(--safe-t, 0px)); bottom: auto; left: 8px; right: 8px;
    display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 9px; border-radius: 22px; }
  body.xp-map .xp-pp-title, body.xp-quest .xp-pp-title { flex: none; margin: 0; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
  body.xp-map .xp-pp-title > span, body.xp-quest .xp-pp-title > span { display: none; }
  body.xp-map .xp-pp-title b, body.xp-quest .xp-pp-title b { max-width: 4.6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
  body.xp-map .xp-pp-title em, body.xp-quest .xp-pp-title em { margin: 2px 0 0; padding: 0 6px; font-size: 11px; }
  body.xp-map #xp-stamps, body.xp-quest #xp-stamps { flex: 1; min-width: 0; gap: 0; justify-content: space-between; }
  body.xp-map #xp-stamps button, body.xp-quest #xp-stamps button { width: 44px; gap: 1px; }
  body.xp-map .xp-st, body.xp-quest .xp-st { width: 32px; height: 29px; font-size: 14px; }
  body.xp-map .round .xp-st, body.xp-quest .round .xp-st { width: 29px; height: 29px; }
  body.xp-map .xp-st-lab, body.xp-quest .xp-st-lab { font-size: 9.5px; }
  /* iPhone 的 🔄 表情符號畫得比字級大,間距太小會壓到下面的字(10/24 她的截圖) */
  body.xp-map .xp-restart, body.xp-quest .xp-restart { flex: none; display: grid; place-items: center; align-content: center; gap: 3px; width: 54px; height: 46px; margin: 0; padding: 2px 0 0; border-radius: 14px; line-height: 1; }
  .xp-restart .xp-r-ic { display: block; height: 16px; font-size: 13px; line-height: 16px; } .xp-restart .xp-r-lb { font-size: 10px; letter-spacing: 0; white-space: nowrap; }

  /* ---- 走路:下一站、搖桿 ---- */
  .xp-goal { top: calc(70px + var(--safe-t, 0px)); left: 8px; right: 8px; max-width: none; padding: 7px 12px 8px; border-radius: 16px; }
  .xp-goal-k, .xp-goal-h { display: none; }
  .xp-goal-t { margin: 0 !important; font-size: 14.5px; line-height: 1.45; }
  .xp-joy { left: 14px; bottom: calc(42px + var(--safe-b, 0px)); width: 124px; height: 124px; }
  .xp-joy-knob { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  body.xp-map .caption { display: none !important; }
  body.xp-map .credit, body.xp-quest .credit { font-size: 9.5px; }

  /* ---- 關卡:探長的對話在下面一片 ---- */
  .xq-talk { left: 8px; right: 8px; bottom: calc(8px + var(--safe-b, 0px)); width: auto; }
  .xq-face { display: none; }
  .xq-box { max-height: min(44vh, 360px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px 12px; border-radius: 22px; }
  .xq-head { min-height: 40px; padding: 0; }
  .xq-title b { font-size: 16px; }
  /* 手機的對話框貼著道具卡下緣,鈕放回標題列 */
  .xq-leave { position: static; margin-left: auto; flex: none; height: 36px; padding: 0 12px; font-size: 13.5px; background: var(--track); box-shadow: inset 0 0 0 2px var(--line); }
  .xq-steps { margin: 6px 0 4px; gap: 4px; }
  .xq-steps li { font-size: 12px; }
  .xq-step { padding: 5px 6px; gap: 4px; }
  .xq-steps .n { width: 19px; height: 19px; font-size: 11px; }
  .xq-mission { margin: 6px 0 0; padding: 7px 10px; }
  .xq-mission p { font-size: 13.5px; line-height: 1.5; }
  .xq-mission b { font-size: 11.5px; }
  .xq-who { margin: 6px 0 0; }
  .xq-line { min-height: 0; margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
  .xq-btn { min-height: 42px; padding: 0 16px; font-size: 15px; }

  /* ---- 關卡:道具卡全寬疊在上面,可以捲 ---- */
  body.xp-quest .xq-props { top: calc(62px + var(--safe-t, 0px)); left: 8px; right: 8px; bottom: calc(min(44vh, 360px) + 22px + var(--safe-b, 0px));
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; scrollbar-width: thin; }
  .xq-props > * { flex: none !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; }
  .xq-card { border-radius: 22px; box-shadow: 0 10px 24px rgba(35, 48, 45, .2), var(--clay); }
  .xq-card-head { padding: 8px 14px; font-size: 14.5px; }
  .xq-card-body { padding: 10px; overflow: visible; }
  .xq-book .xq-comic { flex: none; height: auto; }
  .xq-editor, .xq-editor.short { flex: none; height: 230px; min-height: 0; }
  .xq-assets { flex: none; min-height: 0; max-height: 280px; }
  .xq-assets ul { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .xq-webscreen iframe { max-height: 62vh; }
  .xq-share { flex-direction: column; align-items: center; }
  .xq-qr img, .xq-qr canvas { width: 130px; height: 130px; }
  .xq .dpad { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; }
  .xq .dpad-row { display: contents; }
  .xq .dpad-btn { width: 50px; height: 44px; }
  .xq .dpad-btn.wide { width: 72px; font-size: 15px; }
  .xq-arcade .xq-screen { width: min(100%, calc(28vh * 4 / 3)); margin: 0 auto; }
  /* iPhone 點進字級小於 16px 的輸入框會自動放大畫面:程式框裡看不見的輸入框、文字框都給 16px */
  .xq textarea, .xq-slip input, .CodeMirror textarea { font-size: 16px !important; }
  .xq-editor .CodeMirror { font-size: 13.5px; line-height: 1.55; }

  /* ---- 改程式模式(點進程式框或貼上框):對話收起來,框框撐到最高(扣掉鍵盤) ---- */
  body.xq-editing .xq-talk { display: none; }
  body.xp-quest.xq-editing .xq-props { bottom: calc(8px + var(--safe-b, 0px)); }
  body.xq-editing .xq-editor, body.xq-editing .xq-editor.short { height: max(240px, calc(var(--vvh, 100vh) - 230px)); }
  body.xq-editing .xq-paste-code { min-height: max(220px, calc(var(--vvh, 100vh) - 330px)); }
}

/* =====================================================================
   矮的橫向螢幕(平板橫放、1366×768 筆電、瀏覽器分頁列吃掉高度):桌機排法,但每樣東西都要放得進一個畫面
   對話框太長就在框裡捲;遊戲機的畫面依高度縮,「▶ 開始玩」一定看得到;方向鍵排一行
   ===================================================================== */
@media (min-width: 901px) and (max-height: 820px) {
  .xq-face { width: 104px; bottom: calc(100% - 52px); }
  .xq-head { min-height: 44px; padding: 6px 0 0 86px; }
  .xq-head .hex { width: 36px; height: 32px; font-size: 16px; }
  .xq-title small { letter-spacing: .04em; }
  .xq-title b { font-size: 16px; }
  .xq-leave { height: 36px; top: -18px; padding: 0 14px; font-size: 14px; }
  /* 上面要留給品牌標誌(約 72px)和探長頭像露出來的部分 */
  .xq-box { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 10px 14px 12px; border-radius: 24px; }
  .xq-steps { gap: 4px; margin: 8px 0 4px; }
  .xq-steps li { font-size: 12.5px; }
  .xq-step { gap: 4px; padding: 5px 7px; }
  .xq-steps .n { width: 19px; height: 19px; font-size: 11px; }
  .xq-mission { margin: 6px 0 0; padding: 7px 10px; }
  .xq-mission p { font-size: 14px; line-height: 1.5; }
  .xq-who { margin: 6px 0 0; }
  .xq-line { min-height: 0; margin: 0 0 8px; font-size: 16px; line-height: 1.55; }
  .xq-btn { min-height: 40px; padding: 0 16px; font-size: 15px; }

  /* 走路時護照也縮成一條(大張的護照會蓋住探長頭上的對話) */
  body.xp-map .xp-passport { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 12px; border-radius: 999px; }
  body.xp-map .xp-pp-title { margin: 0; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; }
  body.xp-map .xp-pp-title > span:not(.xp-pp-ava), body.xp-map .xp-pp-ava { display: none; }
  body.xp-map .xp-pp-title b { font-size: 14px; max-width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.xp-map .xp-pp-title em { margin: 2px 0 0; padding: 0 8px; font-size: 12px; }
  body.xp-map #xp-stamps { gap: 3px; }
  body.xp-map #xp-stamps button { width: 50px; gap: 1px; }
  body.xp-map .xp-st { width: 38px; height: 34px; font-size: 16px; }
  body.xp-map .round .xp-st { width: 34px; height: 34px; }
  body.xp-map .xp-st-lab { font-size: 10.5px; }
  body.xp-map .xp-restart { width: auto; margin: 0; padding: 0 14px; white-space: nowrap; }

  body.xp-quest .xq-props { top: 90px; bottom: 12px; }
  .xq-card-head { padding: 8px 16px; font-size: 15px; }
  .xq-card-body { gap: 8px; padding: 10px 12px; }
  /* 遊戲機:畫面高度 = 螢幕高 − 標題列、按鈕列、方向鍵、說明(約 380px),最小 200px 寬 */
  .xq-arcade .xq-screen { width: min(100%, max(200px, calc((100vh - 380px) * 4 / 3))); margin: 0 auto; }
  .xq .dpad { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; }
  .xq .dpad-row { display: contents; }
  .xq .dpad-btn { width: 50px; height: 42px; }
  .xq .dpad-btn.wide { width: 72px; font-size: 15px; }
  .xq-editor { min-height: 150px; }
  .xq-editor .CodeMirror { font-size: 14.5px; line-height: 1.55; }
  .xq-editor.short { min-height: 150px; height: 170px; }
  .xq-suspect-code, .xq-hunt-lines { font-size: 14px; line-height: 1.6; }
  .xq-webscreen iframe { max-height: calc(100vh - 200px); }
}