/* 遊戲製作大師：製作頁 /make/ 與作品頁 /m/ 共用。長輩友善（CONTRACT.md 第 0 節：字 ≥18px、主要鈕 ≥56px、放中間）：內文 22px、按鈕 64px、一步只問一件事、對比 7:1 以上 */
:root{color-scheme:light;--bg:#F2F6FA;--card:#fff;--ink:#10233F;--dim:#3D4C63;--blue:#02539C;--blue2:#E3EEF8;--line:#B3CBE1;--yel:#FFC83D;--ok:#0B6B3A;--err:#A3141F;}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"PingFang TC","Noto Sans TC",system-ui,sans-serif;font-size:22px;line-height:1.55;}
main{max-width:560px;margin:0 auto;padding:16px 16px 48px;}
/* 出口鈕（10/31 加；11/01 m5 改，critic「固定在左上，蓋住每個畫面的標題」）：不再固定，放在頁首標題上面自己一列、跟著頁面捲走，不蓋任何標題；
   z-index 照舊高於登入彈窗（.sc-ov 9500）和靜音鈕（9800），頁面在頂端時彈窗開著也按得到。要開回固定：position 改回 fixed、main padding-top 68px、.card scroll-margin-top 68px */
.mk-exit{position:absolute;top:calc(10px + env(safe-area-inset-top));left:max(8px,calc(50% - 272px));z-index:9900;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:#fff;color:#02539C;border:2px solid #B3CBE1;font-weight:800;font-size:16px;text-decoration:none}
.mk-exit + main{padding-top:58px}
.mk-exit ~ main .card{scroll-margin-top:12px}
.shop-line{text-align:center;margin:8px 0 4px}
.shop-line a{display:inline-flex;align-items:center;min-height:48px;padding:6px 4px;font-size:17px;font-weight:800;color:var(--blue);text-decoration:underline;text-underline-offset:5px}   /* 店家活動遊戲那行（10/31）：小字連結，不搶「傳給家人朋友」 */
h1{font-size:30px;line-height:1.3;margin:8px 0 6px;}
h2{font-size:26px;line-height:1.35;margin:0 0 8px;}
p{margin:0 0 12px;}
.lead{color:var(--dim);margin-bottom:16px;}
.card{background:var(--card);border-radius:16px;padding:20px 18px;margin:0 0 16px;}
.step{font-size:18px;font-weight:800;color:var(--blue);margin-bottom:4px;}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:64px;padding:12px 16px;border-radius:14px;border:3px solid var(--blue);background:var(--blue);color:#fff;font:inherit;font-size:24px;font-weight:800;text-decoration:none;cursor:pointer;touch-action:manipulation;}
.btn:focus-visible,.pick:focus-visible,input:focus-visible,textarea:focus-visible{outline:4px solid var(--yel);outline-offset:2px;}
.btn.ghost{background:#fff;color:var(--blue);}
.btn.yel{background:var(--yel);border-color:var(--yel);color:var(--ink);}
.btn.line{background:#06C755;border-color:#06C755;}
.btn[disabled]{opacity:.45;cursor:default;}
.row{display:flex;gap:12px;}
.row>.btn{flex:1;}
.stack{display:flex;flex-direction:column;gap:12px;}
label.q{display:block;font-weight:800;font-size:24px;margin-bottom:8px;}
input[type=text],textarea{width:100%;font:inherit;font-size:26px;padding:14px 14px;border:3px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);}
textarea{min-height:110px;resize:vertical;}
.hint{font-size:19px;color:var(--dim);margin-top:6px;}
.count{font-size:18px;color:var(--dim);text-align:right;}
.msg{font-size:20px;font-weight:800;min-height:1.5em;margin-top:8px;}
.msg.err{color:var(--err);} .msg.ok{color:var(--ok);}
.mic{min-height:72px;}
.mic.on{background:var(--err);border-color:var(--err);color:#fff;}
.speak{min-height:52px;font-size:20px;width:auto;padding:8px 14px;}
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.pick{min-height:72px;font-size:38px;border-radius:14px;border:3px solid var(--line);background:#fff;cursor:pointer;}
.pick[aria-pressed=true]{border-color:var(--blue);background:var(--blue2);box-shadow:inset 0 0 0 3px var(--blue);}
.tpls{display:flex;flex-direction:column;gap:12px;}
.tpl{display:flex;align-items:center;gap:14px;width:100%;min-height:84px;padding:12px 16px;border-radius:14px;border:3px solid var(--line);background:#fff;font:inherit;text-align:left;color:var(--ink);cursor:pointer;}
.tpl .e{font-size:40px;line-height:1;}
.tpl b{display:block;font-size:24px;}
.tpl small{display:block;font-size:18px;color:var(--dim);}
.tpl[disabled]{opacity:.55;cursor:default;}
.tpl[aria-pressed=true]{border-color:var(--blue);background:var(--blue2);}
.tabs{display:flex;gap:8px;margin-bottom:12px;}
.tabs button{flex:1;min-height:56px;font:inherit;font-size:20px;font-weight:800;border-radius:12px;border:3px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer;}
.tabs button[aria-selected=true]{background:var(--blue);color:#fff;}
ol.rank{list-style:none;margin:0;padding:0;}
ol.rank li{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:2px solid var(--blue2);}
ol.rank li:last-child{border-bottom:0;}
ol.rank .n{flex:0 0 2em;font-weight:900;font-size:24px;color:var(--blue);text-align:center;}
ol.rank .t{flex:1;min-width:0;}
ol.rank .t a{color:var(--ink);font-weight:800;}
ol.rank .t small{display:block;font-size:18px;color:var(--dim);}
ol.rank .s{font-weight:900;font-size:22px;}
.empty{color:var(--dim);font-size:20px;padding:8px 0;}
.byline{font-size:20px;color:var(--dim);}
.remix{font-size:19px;color:var(--dim);}
.remix a,.byline a{color:var(--blue);}
#stage{position:relative;height:min(62vh,520px);background:#fff;border-radius:16px;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;}
.hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;padding:10px 14px;font-size:26px;font-weight:900;pointer-events:none;}
.big{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;gap:12px;font-size:28px;font-weight:900;}
.tap{position:absolute;width:96px;height:96px;margin:-48px 0 0 -48px;border:0;border-radius:50%;background:var(--yel);font-size:56px;line-height:96px;padding:0;cursor:pointer;touch-action:manipulation;}
.share img{width:100%;border-radius:12px;display:block;margin-bottom:12px;}
.foot{font-size:18px;color:var(--dim);text-align:center;margin-top:20px;}
[hidden]{display:none !important;}
@media (prefers-reduced-motion:no-preference){.tap{transition:transform .08s;} .tap:active{transform:scale(.9);}}
.center{text-align:center;}
.center .btn,.center textarea{margin-left:auto;margin-right:auto;}
.center .stack{align-items:stretch;}
.big-q{font-size:30px;line-height:1.35;margin-bottom:14px;}
.mic-main{min-height:96px;font-size:28px;margin-bottom:6px;}
#ask textarea,#fixBox textarea{margin-top:4px;text-align:left;}
#ask .btn.yel{margin-top:14px;min-height:72px;font-size:28px;}
.chips{display:flex;flex-direction:column;gap:8px;margin:12px 0 0;}
.chip{font:inherit;font-size:19px;text-align:left;padding:10px 14px;min-height:56px;border-radius:12px;border:2px dashed var(--line);background:var(--bg);color:var(--ink);cursor:pointer;}
.chip::before{content:"💡 ";}
.adv{margin:18px 0 0;font-size:18px;}
.adv a{color:var(--blue);}
.busy-art{font-size:80px;line-height:1.1;margin:8px 0;}
/* dev2 複驗 N1（10/26）：字放大 200%（約 195×422）時 🎉 和說明佔掉第一屏，「傳給家人朋友玩」只露出上緣 → 窄或矮的畫面收起 🎉 */
@media (max-width:300px),(max-height:500px){#done .busy-art{display:none}#done h2{margin-top:0}}
/* dev2 複驗二（10/26）：Chromium 200% 把「傳給家人朋友玩」折成 4 行（按鈕 216 高），底邊 462 超出 422 → 窄畫面縮卡片和按鈕的邊距、字 24（仍 ≥18），折成兩行 */
@media (max-width:300px){#done.card{padding:14px 10px}#done .btn{padding:10px 6px}#done .btn.hero{font-size:24px;min-height:72px}}
.servers{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;font-size:40px;margin-top:8px;}
.servers-cap{flex-basis:100%;font-size:18px;font-weight:800;color:var(--err);margin-top:6px;}
@media (prefers-reduced-motion:no-preference){
  .servers span{display:inline-block;animation:srv 1.1s ease-in-out infinite;}
  #busy .busy-art{animation:srv 1.4s ease-in-out infinite;}
}
@keyframes srv{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1.08);}}
.frame-wrap{position:relative;height:min(72vh,640px);margin:0 0 16px;border-radius:16px;overflow:hidden;background:#fff;}
.frame-wrap iframe{display:block;width:100%;height:100%;border:0;}
/* dev2 複驗 N3（10/26）：200% 時製作頁遊戲框只有 304 高，下方按鍵被切 → 矮畫面讓框幾乎占滿一屏（作品頁的 .playzone 另有 flex 規則，不受影響） */
@media (max-height:500px){.frame-wrap{height:calc(100vh - 24px)}}
.frame-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;font-size:24px;font-weight:800;color:var(--dim);}
#after.over{box-shadow:0 0 0 4px var(--yel);}
/* 試玩畫面的「再做一款」（m4 11/01）：次要＝底線字、比發布小，一定排在發布下面（order:1），不搶主按鈕 */
.again-sm{order:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:4px 8px;border:0;background:none;color:var(--blue);font:inherit;font-size:18px;font-weight:800;text-decoration:underline;text-underline-offset:5px;cursor:pointer;touch-action:manipulation;}
/* 手機（直式）：發布鈕固定在第一屏底部當主按鈕（Atlas 10/30；查因 joey-ai-agent docs/reviews/maker-publish-drop-20261030.md：原本在 664 高的畫面上從 904px 起，0 人按）。
   遊戲框縮到「框＋底條」剛好一屏，底條不蓋遊戲裡的虛擬按鍵；打開「你幫我修」輸入框時底條回到原位（不浮在鍵盤上）。電腦版、橫式矮畫面不變 */
@media (max-width:600px) and (min-height:501px){
  #play .frame-wrap{height:max(300px,calc(100svh - 278px));margin-bottom:12px;}
  #after:not(:has(#fixBox:not([hidden]))) > .stack{position:fixed;left:0;right:0;bottom:0;z-index:20;flex-direction:row;flex-wrap:wrap;gap:2px 10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -2px 14px rgba(16,35,63,.2);}
  #after:not(:has(#fixBox:not([hidden]))) > .stack #pubBtn{order:-1;flex:3;}
  #after:not(:has(#fixBox:not([hidden]))) > .stack #fixBtn{flex:2;min-height:64px;margin:0;font-size:18px;padding:8px 6px;white-space:nowrap;gap:4px;}
  #after.over > .stack #pubBtn{box-shadow:0 0 0 4px var(--yel);}
  #after:not(:has(#fixBox:not([hidden]))) > .stack #playAgain{flex:1 0 100%;min-height:40px;margin-top:2px;}
  main:has(#play:not([hidden])){padding-bottom:calc(var(--dock,110px) + 16px);}
  /* 底條蓋住說明卡最後一行（m5 11/01，critic 第 6 項）：捲到說明卡、訊息時把底條的高度讓出來（make.js 量底條高度寫進 --dock） */
  #after:not(:has(#fixBox:not([hidden]))){scroll-margin-bottom:calc(var(--dock,110px) + 12px);}
  #after:not(:has(#fixBox:not([hidden]))) *{scroll-margin-bottom:calc(var(--dock,110px) + 12px);}
}
#fixBox{margin-top:16px;text-align:left;}
.opts{display:flex;flex-direction:column;gap:10px;}
.opts.grid{display:grid;grid-template-columns:1fr 1fr;}
.opts .tpl{min-height:64px;justify-content:center;text-align:center;}
.opts .tpl b{font-size:22px;}
.cover-box{text-align:center;padding:20px;display:flex;flex-direction:column;gap:14px;align-items:stretch;max-width:320px;}
.cover-box p{margin:0;}

/* 載入過場：布幕＋主角走上台（10/26） */
.stage{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 70%,#FFF3CF,#FFC83D 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.stage p{margin:0;font-size:22px;font-weight:900;color:#10233F;text-align:center;padding:4px 14px;position:relative;z-index:3;background:#FFFFFFE6;border-radius:14px;max-width:84%}
.stage .walker{font-size:84px;line-height:1;position:relative;z-index:3;animation:walkin 1.2s ease-out both, bob .45s ease-in-out 1.2s infinite alternate}
.stage .curt{position:absolute;top:0;bottom:0;width:51%;background:repeating-linear-gradient(90deg,#C62F3A 0 22px,#A8202B 22px 30px);z-index:2;transition:transform .6s ease-in}
.stage .curt.l{left:0;transform:translateX(-86%)}.stage .curt.r{right:0;transform:translateX(86%)}
.stage.open .curt.l{transform:translateX(-102%)}.stage.open .curt.r{transform:translateX(102%)}
.stage.open .walker,.stage.open p{opacity:0;transition:opacity .3s}
@keyframes walkin{from{transform:translateX(-160px) rotate(-8deg)}to{transform:translateX(0) rotate(0)}}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@media (prefers-reduced-motion: reduce){.stage .walker{animation:none}}

/* 作品頁遊戲區（Atlas 10/26，長輩 390 寬）：標題縮成一條，遊戲框吃掉剩下的可視高度；手機上左右貼齊螢幕邊 */
.playzone{display:flex;flex-direction:column;height:calc(100vh - 24px);height:calc(100svh - 24px);min-height:460px;max-height:960px;margin:0 0 16px;}
.head{flex:none;display:flex;align-items:center;gap:12px;padding:0 2px 10px;}
.head-e{flex:none;font-size:48px;line-height:1;}
.head-t{min-width:0;}
.head h1{font-size:24px;line-height:1.25;margin:0;overflow-wrap:anywhere;}
.head .byline{font-size:19px;margin:2px 0 0;}
.playzone .status{flex:none;font-size:19px;margin:0 0 10px;}
.playzone .frame-wrap{flex:1;height:auto;min-height:0;margin:0;}
@media (max-width:600px){.playzone .frame-wrap{margin:0 -16px;border-radius:0;}}

/* 發布完成分輕重（10/26）：最大一顆傳給家人朋友，其他收成小字 */
.btn.hero{min-height:88px;font-size:30px;box-shadow:0 6px 0 #04913E;}
.more-h{font-size:18px;color:var(--dim);margin:20px 0 0;}
.more{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;margin-top:4px;}
.more a,.more button{font:inherit;font-size:19px;font-weight:800;color:var(--blue);background:none;border:0;min-height:48px;padding:6px 4px;text-decoration:underline;text-underline-offset:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#privRate{margin-top:8px;}
/* 作品頁海報（10/26）：黃底招牌接遊戲框；標題、一句話各最多兩行，框的高度才保得住 */
.poster{flex:none;display:flex;align-items:center;gap:10px;background:var(--yel);color:var(--ink);padding:14px 16px 16px;border-radius:18px 18px 0 0;}
.p-t{flex:1;min-width:0;}
.poster h1{font-size:32px;line-height:1.15;margin:0;font-weight:900;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.p-line{font-size:19px;line-height:1.4;font-weight:700;margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.p-by{margin:10px 0 0;}
.badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:var(--blue);color:#fff;border-radius:999px;padding:4px 14px;font-size:18px;font-weight:800;}
.badge .b-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.badge b{font-weight:900;}
.p-e{flex:none;font-size:64px;line-height:1;transform:rotate(-8deg);}
.playzone .poster + .status,.playzone .poster + .frame-wrap{border-radius:0;}
.playzone .frame-wrap{border-radius:0 0 16px 16px;}
@media (max-width:600px){.poster{margin:0 -16px;border-radius:0;}.playzone .frame-wrap{border-radius:0;}}

/* 長輩走一遍（10/26）：LINE 裡改用手機瀏覽器開＝一行小字；打字框長高、例句換行 */
#ask #go{margin-top:12px;}
.mv-ext{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:6px;font-size:18px;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:4px;}
#say,#fix{overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;}
#say::placeholder,#fix::placeholder{white-space:pre-wrap;overflow-wrap:anywhere;}
/* 作品頁很窄（字放大到 200% 左右，畫面只剩 ~200 寬）：海報縮成一條，讓遊戲框多一點 */
@media (max-width:300px){.poster{padding:8px 12px 10px;gap:6px;}.poster h1{font-size:22px;-webkit-line-clamp:1;}.p-line{display:none !important;}.p-by{margin-top:6px;}.badge{font-size:18px;padding:2px 10px;}.p-e{font-size:36px;}}
/* 10/27 凍結前外觀（Atlas）：講話是主角、打字收起來；語音狀態沒字時不佔位；首屏 3 款玩家作品 */
#sayVoice:empty{display:none;}
.type-toggle{display:block;margin:10px auto 4px;background:none;border:0;color:var(--blue,#02539C);font-size:18px;font-weight:700;text-decoration:underline;padding:8px 12px;cursor:pointer;}
#typeBox{margin-top:8px;}
.showcase{margin-top:18px;}
.showcase-h{font-size:18px;font-weight:800;margin:0 0 8px;}
.showcase-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.show-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:16px;background:#FFF3CF;border:2px solid #FFC83D;color:inherit;text-decoration:none;min-width:0;}
.show-emoji{font-size:40px;line-height:1;}
.show-card b{font-size:15px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;}
.show-card small{font-size:12px;opacity:.75;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#askMsg:empty{display:none;}   /* 沒訊息時不佔位（10/27） */
#doneLogin{margin-top:12px}   /* 免登入分享的登入鈕，跟「再做一款」隔開（10/31） */

/* 示範作品卡（m5 11/01）：遊戲真畫面縮圖＋作品名＋那一句 */
.show-card.demo{padding:0 0 8px;overflow:hidden;background:#fff;}
.show-card.demo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 62%;border-bottom:2px solid #FFC83D;margin-bottom:4px;}
.show-card.demo b{padding:0 4px;}
.show-card.demo small{white-space:normal;font-size:12px;line-height:1.35;padding:0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
/* m8 11/01 推一把（Atlas 選 A＋1）：第一局玩完的底部卡片＋玩 20 秒的小泡泡 */
.nudge{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(16,35,63,.45);}
.nudge[hidden],.nudge-tip[hidden]{display:none;}
.nudge-box{width:100%;max-width:520px;background:#fff;border-radius:20px 20px 0 0;padding:22px 18px calc(16px + env(safe-area-inset-bottom));text-align:center;box-shadow:0 -4px 20px rgba(16,35,63,.25);}
.nudge-h{font-size:26px;font-weight:900;margin:0 0 6px;}
.nudge-box .btn{margin-top:12px;}
.nudge-box .again-sm{margin-top:8px;}
.nudge-tip{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--dock,110px) + 10px);z-index:21;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-size:18px;font-weight:800;padding:10px 18px;box-shadow:0 4px 12px rgba(0,0,0,.25);white-space:nowrap;cursor:pointer;animation:tipbob 1.2s ease-in-out infinite;}
@keyframes tipbob{50%{transform:translate(-50%,-4px);}}
@media (prefers-reduced-motion:reduce){.nudge-tip{animation:none;}}
#gateShare{margin-bottom:12px;flex-direction:column;gap:2px;}
#gateShare small{font-size:17px;font-weight:700;opacity:.9;}
/* m9 11/02 A：分享選單沒傳出去的備案（複製連結＋LINE），B：擋登入頁先講「已經可以玩了」 */
.fb-box{margin:12px 0 4px;padding:12px;border:3px solid #06C755;border-radius:16px;background:#F0FFF5;text-align:center}
.fb-h{font-weight:900;font-size:17px;margin:0 0 8px}
.fb-url{width:100%;font:inherit;font-size:14px;padding:10px;border:2px solid #B3CBE1;border-radius:10px;background:#fff;color:#10233F;margin-bottom:10px;-webkit-user-select:text;user-select:text}
.fb-box .row{display:flex;gap:8px}.fb-box .btn{min-height:56px;font-size:17px;padding:8px}
/* m10 先秀按鈕：兩顆跟原本「傳給家人朋友玩」一樣大；系統分享是下面一行小字 */
.fb-first .btn{min-height:72px;font-size:22px;flex:1}
.fb-sys{margin-top:10px;background:none;border:0;color:var(--blue);font:inherit;font-size:15px;text-decoration:underline;padding:6px;cursor:pointer}
.gate-ready{font-size:20px;font-weight:900;color:#10233F;margin:0 0 6px}
.btn.gate-main{min-height:76px;font-size:22px}   /* 不能叫 .big：第 66 行的 .big 是全版面蓋板（11/02 第一次筆電測試整頁變黃） */