/* 形狀島全年齡版 1-1 模擬頁：在 style.css 之後載入的覆寫與新元件樣式
   手機橫拿 844x390 時舞台縮成 0.49 倍，所以可點物件一律至少 92 舞台單位（約 45px） */

/* 頂列：返回、工具鈕放大到 92；進度條與圓點讓出身份膠囊的位置 */
#backBtn{width:92px;height:92px}
#tools .jelly{width:92px;height:92px}
#progress{left:124px;width:500px}
#qdots{left:380px}
#rolePill{position:absolute;left:640px;top:16px;width:230px;height:92px;border-radius:46px;font-size:34px;gap:10px;z-index:60;display:none;box-shadow:0 8px 0 var(--ink)}
#rolePill svg{flex:none}
.storyAgain{height:92px}
#nextBtn{height:92px}
#resetBtn{width:180px;height:92px;top:122px}
#prologueBtn{right:16px;top:226px}
#skipBtn{right:16px;top:122px;z-index:70}

/* 泡泡：設計師／工程師的長題目縮字 */
#bubble.long{font-size:28px;max-width:410px}

/* 地圖：即將推出 */
.station.soon{--c:#D5DAE8;color:#8A93AE;cursor:default;opacity:.85}
.stLabel.soon{color:#8A93AE;background:#EEF1F8}

/* 選身份 */
.roleTitle{position:absolute;left:424px;top:108px;width:740px;text-align:center;font-size:52px;font-weight:900;color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink)}
.roleCard{flex-direction:column;gap:8px;padding:16px 12px;border-radius:34px}
.roleCard .dot{width:96px;height:96px}
.roleCard .nm{font-size:48px;line-height:1.1;-webkit-text-stroke:1.5px var(--ink)}
.roleCard .sb{font-size:28px;line-height:1.3;font-weight:900;text-align:center}
.roleFoot{text-align:center;font-size:30px;font-weight:900;color:var(--ink)}

/* 安全卡（多行版） */
.k-safety.rows{top:104px;height:566px;padding:20px 34px;align-items:stretch;justify-content:flex-start}
.k-safety.rows .big{text-align:center;font-size:54px;margin:0 0 10px}
.k-safety .row{display:flex;align-items:center;gap:18px;height:72px;font-size:32px;font-weight:900;text-align:left;line-height:1.15}
.k-safety .row .ic{width:64px;height:64px;flex:none}
.k-safety .row .ic svg{width:100%;height:100%}

/* 深入一點卡 */
.k-deep{position:absolute;left:428px;top:116px;width:744px;background:#fff;border:7px solid var(--ink);border-radius:36px;box-shadow:0 12px 0 var(--ink);padding:18px 30px 22px}
.k-deep .hd{display:flex;align-items:center;gap:12px;font-size:40px;font-weight:900;color:#E8457C;margin-bottom:8px}
.k-deep .ln{display:flex;gap:14px;align-items:flex-start;font-size:31px;font-weight:900;line-height:1.35;margin:10px 0}
.k-deep .ln i{flex:none;width:16px;height:16px;border-radius:50%;background:var(--yellow);border:4px solid var(--ink);margin-top:13px}
.k-deep.dense .ln{font-size:28px;margin:6px 0;line-height:1.3}

/* 卡片式補充（工程師第 2 題答對後） */
.k-notecard{position:absolute;left:430px;top:600px;width:740px;background:#FFF3B0;border:6px solid var(--ink);border-radius:28px;box-shadow:0 8px 0 var(--ink);padding:14px 24px;font-size:30px;font-weight:900;line-height:1.35;z-index:30}
.k-note-small{font-size:26px;font-weight:900;color:var(--ink);background:rgba(255,255,255,.85);border:4px solid var(--ink);border-radius:18px;padding:6px 14px}

/* XYZ 方向盤 */
.k-xyz-top,.k-xyz-side{filter:drop-shadow(0 8px 0 rgba(27,44,139,.25))}

/* 層高滑桿 */
.k-ls-time{text-align:center;font-size:40px;font-weight:900}
.k-ls-tag{text-align:center;font-size:26px;font-weight:900;background:#fff;border:4px solid var(--ink);border-radius:999px;padding:0 0 2px}
.k-ls-cap{text-align:center;font-size:38px;font-weight:900;color:#E8457C}
.k-ls-track{background:#fff;border:5px solid var(--ink);border-radius:999px;box-shadow:0 5px 0 var(--ink)}
.k-ls-lab{position:absolute;border:5px solid var(--ink);border-radius:26px;background:#fff;font-size:32px;font-weight:900;box-shadow:0 6px 0 var(--ink)}
.k-ls-lab.on{background:var(--yellow)}
.k-ls-thumb{position:absolute;touch-action:none;cursor:grab;z-index:30;filter:drop-shadow(0 6px 0 rgba(27,44,139,.3))}
.k-ls-thumb.lift{transform:scale(1.1)}
.k-ls-thumb svg{pointer-events:none}

/* 大人操作小牌子 */
.k-adult{font-size:26px;font-weight:900;background:#FF9F1C;color:#fff;border:4px solid var(--ink);border-radius:999px;text-align:center;padding:2px 0 4px;-webkit-text-stroke:1px var(--ink)}

/* 選項卡字級可由選項設定 */
.k-card{font-size:34px}
.k-card .txt{font-size:inherit}

/* 序章 */
@keyframes zoomIsl{from{transform:scale(.6) translateY(120px)}to{transform:scale(1.05)}}
.pcard{left:360px;top:116px;width:620px;background:#fff;border:7px solid var(--ink);border-radius:36px;box-shadow:0 12px 0 var(--ink);padding:16px 28px 18px;text-align:center}
.pcard .pt1{font-size:54px;font-weight:900;color:#E8457C;line-height:1.2}
.pcard .pt2{font-size:30px;font-weight:900;margin:6px 0 4px}
.pcard ul{list-style:none;display:block;text-align:left;padding-left:30px}
.pcard li{white-space:nowrap;font-size:30px;font-weight:900;line-height:1.35;padding-left:26px;position:relative}
.pcard li::before{content:"";position:absolute;left:2px;top:12px;width:14px;height:14px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink)}
.wave{transform-origin:50% 90%;animation:waveHand .7s ease-in-out infinite alternate}
@keyframes waveHand{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}

/* 故事進度點移到左下，不被「再看一次」蓋住 */
.sdots{left:150px;transform:none}
/* 名詞卡背面：邊距小一點，名稱不斷開 */
.k-flip .back{padding:14px 8px}
.k-flip .back .nm{white-space:nowrap}

/* 小視窗（手機橫拿，舞台縮到 0.62 以下）：小字一律放大到舞台 30 以上（844x390 約 14.6px） */
html.small #bubble.long{font-size:30px;max-width:420px}
html.small .roleCard .sb{font-size:30px}
html.small .k-deep{top:108px;padding:12px 26px 14px}
html.small .k-deep .hd{font-size:36px;margin-bottom:2px}
html.small .k-deep .ln,html.small .k-deep.dense .ln{font-size:30px;line-height:1.24;margin:4px 0}
html.small .k-note-small,html.small .k-ls-tag,html.small .k-adult{font-size:30px}
html.small .k-cardpiece .txt{font-size:30px}
html.small .k-flip .back .ln{font-size:30px !important;line-height:1.25}
html.small .k-flip .back .nm{font-size:32px !important}
html.small #resetBtn{font-size:30px !important}
html.small .stLabel{font-size:30px}

html.small #resRole{font-size:30px !important}

/* 泡泡永遠在哭比熊上面（熊跳起來時不蓋字） */
#bubble{z-index:2}
#bear{z-index:1}
html.small .k-flip .back .nm{letter-spacing:-1px}
html.small .k-flip .back .nm{font-size:30px !important}