/* 臺南遊：每個遊戲共用的樣式（2026-10-19 從各遊戲搬出來）。改這裡，所有用共用核心的遊戲都會一起變。 */

:root{
  --bg:#FFF8EC; --card:#FFFDF7; --ink:#5A3E2B; --muted:#9A7B62; --line:#EBD9BF;
  --red:#E2574C; --sea:#9ED9EC; --water:#6EC3DD; --blue:#2E93B8; --green:#7BC47F; --sand:#F8E7C2;
  --f:"Huninn","Hiragino Sans","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:#F3E6CF;color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.7;overflow:hidden}
.app{height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;background:var(--bg);padding-top:env(safe-area-inset-top,0px)}
header{flex:none;display:flex;align-items:center;gap:10px;padding:8px 14px}
header h1{margin:0;font-size:20px;font-weight:400;flex:1;line-height:1.3}
.chips{display:flex;gap:3px;background:none;border:0;padding:4px;cursor:pointer;border-radius:8px}
.chips i{display:grid;place-items:center;width:22px;height:22px;border:1.5px dashed #D9BFA0;border-radius:6px;font:14px/19px var(--f);font-style:normal;text-align:center;color:transparent}
.chips i.on{border:1.5px solid var(--red);background:var(--red);color:#fff}
.chips i svg{width:17px;height:17px}
.chips i.pop{animation:pop .5s cubic-bezier(.2,1.8,.4,1)}

.stage{flex:none;position:relative;height:clamp(250px,50vh,520px);background:var(--sea);overflow:hidden;border-top:3px solid var(--line);transition:height .35s}
#map{width:100%;height:100%;display:block;touch-action:manipulation}
[hidden]{display:none!important}
#scene{position:absolute;inset:0;background:#DFF3F8;animation:fadein .35s}
#scene svg{display:block;width:100%;height:100%;margin:0;border-radius:0;background:none!important}
@keyframes fadein{from{opacity:0}}
#peek{position:absolute;left:8px;top:8px;font:15px var(--f);background:#fff;color:var(--ink);border:0;border-radius:999px;padding:5px 14px;box-shadow:0 2px 6px rgba(90,62,43,.18);cursor:pointer}
#past,#now{transition:opacity .7s}
#map.now #past{opacity:0}
#map:not(.now) #now{opacity:0;pointer-events:none}
#boat{transition:opacity .7s}#map.now #boat{opacity:0}
.era{position:absolute;right:8px;top:8px;display:flex;background:#fff;border-radius:999px;padding:3px;box-shadow:0 2px 6px rgba(90,62,43,.18)}
.era button{font:15px var(--f);border:0;background:none;color:var(--muted);padding:4px 12px;border-radius:999px;cursor:pointer}
.era button[aria-pressed="true"]{background:var(--ink);color:#fff}
.stop{cursor:pointer}
.stop.lock{opacity:.55;cursor:default}
.pin{animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}

main{flex:1;min-height:0;overflow-y:auto;padding:12px 16px 8px;font-size:19px;background:var(--card);border-radius:18px 18px 0 0;margin-top:-10px;position:relative;box-shadow:0 -3px 10px rgba(90,62,43,.08)}
.kick{margin:0;font-size:14px;color:var(--red)}
h2{margin:0 0 4px;font-size:26px;font-weight:400;line-height:1.35}
main p{margin:0 0 10px}
.task{background:#FFF0D6;border-radius:12px;padding:8px 12px;font-size:20px}
main .note{font-size:13px;line-height:1.5;color:var(--muted);margin-top:4px}
.big{display:block;width:100%;font:24px var(--f);background:var(--red);color:#fff;border:0;border-radius:16px;padding:12px;cursor:pointer;margin:8px 0;box-shadow:0 4px 0 #B8392F;transition:transform .08s}
.big:active,.big.down{transform:translateY(3px);box-shadow:0 1px 0 #B8392F}
.big.blue{background:var(--blue);box-shadow:0 4px 0 #1F6F8C}
.big.blue:active,.big.blue.down{box-shadow:0 1px 0 #1F6F8C}
.big:disabled{background:#D9C7B0;box-shadow:none;cursor:default}
.hold{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.mini{display:block;width:100%;height:auto;background:#DFF3F8;border-radius:14px;margin:4px 0 8px;touch-action:manipulation}
.item{transition:transform .55s cubic-bezier(.3,1.4,.5,1);cursor:pointer}
.item:focus-visible path{stroke:var(--red)}
.tap{cursor:pointer}
.tap:focus,.item:focus{outline:none}
.tap:focus-visible .ring{stroke:var(--red);stroke-width:3}
.bar{height:12px;background:#F0E2CC;border-radius:999px;overflow:hidden;margin:4px 0 8px}
.bar b{display:block;height:100%;width:0;background:var(--green);border-radius:999px;transition:width .3s}
.opt{display:block;width:100%;text-align:left;font:20px/1.5 var(--f);background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:14px;padding:10px 14px;margin:0 0 8px;cursor:pointer}
.opt.no{color:#C3AE97;border-style:dashed;text-decoration:line-through}
.opt.yes{border-color:var(--green);background:#EEF8EC}
.opt:disabled{cursor:default}
.say{background:#EEF8EC;border-radius:12px;padding:8px 12px;font-size:18px}
.say.again{background:#FDECE8}
.skip{font:15px var(--f);background:none;border:0;color:var(--muted);text-decoration:underline;padding:4px 0;cursor:pointer}
.got{display:flex;align-items:center;gap:14px;background:#FFF0D6;border-radius:14px;padding:10px 14px;margin:10px 0}
.got p{margin:0}
.why{background:#E6F4FA;border-radius:14px;padding:8px 12px;margin:0 0 10px}
.why summary{cursor:pointer;color:#1F6F8C;font-size:18px}
.why p{margin:6px 0 0}
.seal{display:grid;place-items:center;flex:none;width:56px;height:56px;border:3px solid var(--red);border-radius:12px;background:var(--red);color:#fff;font:32px/50px var(--f);text-align:center;transform:rotate(-6deg)}
.seal svg{width:74%;height:74%}
.seal.pop{animation:stamp .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp{0%{transform:scale(2.2) rotate(-20deg);opacity:0}100%{transform:rotate(-6deg);opacity:1}}
@keyframes pop{0%{transform:scale(1.8)}100%{transform:none}}
.again-btn{font:14px var(--f);background:none;border:1.5px solid var(--line);border-radius:999px;padding:3px 14px;color:var(--muted);cursor:pointer}

.foot{flex:none;display:flex;align-items:center;justify-content:space-between;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:2px solid var(--line)}
.foot button{font:17px var(--f);background:none;border:0;color:var(--ink);padding:6px 10px;cursor:pointer;border-radius:8px}
.foot #nx{color:var(--red)}
.foot button:disabled{color:#D9C7B0;cursor:default}
.foot span{font-size:14px;color:var(--muted)}

.doc{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:14px 14px 8px}
.doc h3{margin:0 0 8px;font-size:24px;font-weight:400;text-align:center;letter-spacing:.2em}
.doc dl{margin:0 0 8px;display:grid;grid-template-columns:4em minmax(0,1fr);gap:0 8px;font-size:15px}
.doc dt{color:var(--muted)}.doc dd{margin:0}
.doc ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:2px dashed var(--line);padding-top:10px}
.doc li{text-align:center;font-size:13px;color:var(--muted);line-height:1.4}
.doc li .seal{width:48px;height:48px;margin:0 auto 4px}
.doc li .seal.empty{background:none;border:2px dashed #D9BFA0;transform:none;color:transparent}
.doc .fic{margin:8px 0 0;font-size:12px;color:var(--muted);text-align:center}
.name{font:17px var(--f);border:0;border-bottom:2px solid var(--ink);background:none;width:9em;color:var(--ink);padding:0 2px}
.sheet{position:fixed;inset:0;z-index:10;background:rgba(90,62,43,.45);display:grid;place-items:center;padding:16px}
.sheet[hidden]{display:none}
.sheet .in{width:min(380px,100%);max-height:calc(100% - 32px);overflow-y:auto;background:var(--bg);border-radius:18px;padding:14px}
.sheet .x{display:block;margin:10px auto 0;font:16px var(--f);background:none;border:1.5px solid var(--line);border-radius:999px;padding:4px 18px;cursor:pointer;color:var(--ink)}
.conf{position:fixed;top:-12px;width:10px;height:14px;border-radius:3px;z-index:20;pointer-events:none;animation:fall 2.6s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
main a{color:var(--blue)}
@media (prefers-reduced-motion:reduce){.stage{transition:none}.pin,.seal.pop,.chips i.pop,.conf{animation:none}.item{transition:none}}
/* 平板直拿：畫面變寬一點 */
@media (min-width:700px){.app{max-width:760px}}
/* 電腦、平板橫拿、手機橫拿：左邊大舞台（地圖／遊戲），右邊文字卡片 */
@media (min-width:700px) and (min-aspect-ratio:5/4){
  body{background:#EADBC0}
  .app{max-width:1320px;display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,34vw,470px);grid-template-rows:auto minmax(0,1fr) auto}
  header{grid-column:1/-1;padding:10px 20px}
  header h1{font-size:24px}
  .chips i{width:26px;height:26px}.chips i svg{width:20px;height:20px}
  .stage{grid-column:1;grid-row:2/4;height:auto;border-top:3px solid var(--line)}
  main{grid-column:2;grid-row:2;margin-top:0;border-radius:0;box-shadow:none;border-top:3px solid var(--line);border-left:3px solid var(--line);padding:16px 20px 10px}
  .foot{grid-column:2;grid-row:3;border-left:3px solid var(--line)}
}
/* ===== 新版面：上面標題、中間遊戲畫面、下面文字 =====
   配色取自臺南城市識別：紅 #DB2E27、酒紅 #6C2024、金 #BD9558；插畫裡的水和海維持藍色 */
:root{
  --bg:#FBF7F1; --card:#FBF7F1; --paper:#FFFFFF; --ink:#2A2020; --muted:#8A7A70; --line:#EADFD3;
  --red:#DB2E27; --maroon:#6C2024; --gold:#BD9558; --goldsoft:#F3E8D6; --blue:#6C2024; --green:#BD9558;
  --f:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
}
body{background:#EFE7DC;color:var(--ink)}
header{padding:12px 18px 2px}
header h1{font:700 15px/1.3 var(--f);letter-spacing:.06em;color:var(--ink)}
.chips{gap:5px}
.chips i{width:20px;height:20px;border-radius:50%;border:1.5px dashed var(--gold)}
.chips i.on{background:var(--red);border-color:var(--red)}
.chips i svg{width:14px;height:14px}
.top{flex:none;padding:6px 18px 14px}
.top .kick{margin:0 0 2px;font:700 15px/1.4 var(--serif);letter-spacing:.06em;color:var(--red)}
.top h2{margin:0;font:900 30px/1.25 var(--serif);color:var(--ink);text-wrap:balance}
.stage{height:clamp(220px,42vh,480px);margin:0 16px;border-top:0;border-radius:26px;box-shadow:0 0 0 8px var(--goldsoft)}
main{margin-top:0;border-radius:0;box-shadow:none;background:var(--bg);padding:20px 18px 8px}
main p{line-height:1.75}
main .kick{font:700 15px var(--serif);letter-spacing:.04em}
.task{background:var(--goldsoft);border-radius:14px;padding:10px 14px;font-weight:500}
.big{font:700 22px var(--f);border-radius:14px;box-shadow:none;background:var(--red);letter-spacing:.04em}
.big:active,.big.down{transform:translateY(2px);box-shadow:none;filter:brightness(.9)}
.big.blue{background:var(--maroon);box-shadow:none}
.big.blue:active,.big.blue.down{box-shadow:none}
.big:disabled{background:#D8CFC4}
.opt{font:500 20px/1.5 var(--f);border:2px solid var(--line);background:var(--paper);border-radius:14px}
.opt.yes{border-color:var(--gold);background:#FAF3E6}
.say{background:#F2ECE2;border-radius:14px}
.say.again{background:#FBE8E5}
.why{background:var(--paper);border:2px solid var(--goldsoft);border-radius:14px}
.why summary{font:700 18px var(--serif);color:var(--maroon)}
.got{background:var(--paper);border:2px solid var(--goldsoft);border-radius:14px}
.seal{border:0;border-radius:50%;background:var(--red);transform:none;box-shadow:0 0 0 6px var(--goldsoft)}
@keyframes stamp{0%{transform:scale(1.8);opacity:0}100%{transform:none;opacity:1}}
.again-btn{border-color:var(--gold);color:var(--maroon)}
.bar{background:#EFE6D8}.bar b{background:var(--gold)}
.foot{background:var(--bg);border-top:1px solid var(--line)}
.foot #nx{color:var(--red);font-weight:700}
#peek,.era{box-shadow:0 2px 8px rgba(42,32,32,.15)}
.era button[aria-pressed="true"]{background:var(--maroon)}
.doc{border:0;border-radius:18px;background:var(--paper);box-shadow:0 0 0 8px var(--goldsoft)}
.doc h3{font:900 26px var(--serif);letter-spacing:.12em;color:var(--ink)}
.doc li .seal.empty{border:2px dashed var(--gold);box-shadow:none}
.sheet .in{background:var(--bg)}
/* 換關時文字一行一行浮上來 */
.enter>*{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.enter>*:nth-child(2){animation-delay:.06s}.enter>*:nth-child(3){animation-delay:.12s}.enter>*:nth-child(4){animation-delay:.18s}.enter>*:nth-child(5){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.enter>*{animation:none}}
@media (min-width:700px){.top h2{font-size:34px}.top{padding:8px 24px 16px}.stage{margin:0 24px}}
@media (min-width:700px) and (min-aspect-ratio:5/4){
  body{background:#EFE7DC}
  .app{grid-template-rows:auto auto minmax(0,1fr) auto}
  header{grid-column:1/-1;padding:12px 24px 4px}
  header h1{font-size:15px}
  .top{grid-column:1;grid-row:2}
  .stage{grid-column:1;grid-row:3/5;height:auto;margin:0 24px 24px;border-top:0}
  main{grid-column:2;grid-row:2/4;border-top:0;border-left:1px solid var(--line);padding:20px 22px 10px}
  .foot{grid-column:2;grid-row:4;border-left:1px solid var(--line)}
}
/* ===== 圓形遊戲框 ===== */
.stage{display:flex;align-items:center;justify-content:center;background:none;box-shadow:none;border-radius:0;overflow:visible;height:clamp(220px,46vh,460px)}
.stage{position:relative;min-height:0}
.disc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:300px;height:300px;border-radius:50%;overflow:hidden;background:var(--sea);box-shadow:0 0 0 12px var(--goldsoft)}
#map{width:100%;height:100%}
#scene{display:flex;align-items:center;justify-content:center}
#scene svg{flex:none}
#scene svg:focus:not(:focus-visible),#scene [tabindex]:focus:not(:focus-visible){outline:none}
#peek{left:50%;top:calc(50% + var(--d,300px)/2 - 14px);bottom:auto;transform:translateX(-50%);white-space:nowrap;z-index:2;display:flex;align-items:center;gap:5px;padding:6px 14px 6px 10px;font-size:14px;font-weight:700;color:var(--maroon)}
#peek::before{content:'';flex:none;width:12px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 15'%3E%3Cpath d='M6 0a6 6 0 0 1 6 6c0 4-6 9-6 9S0 10 0 6a6 6 0 0 1 6-6z' fill='%23DB2E27'/%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}
#peek.back{padding-left:14px}#peek.back::before{display:none}
.era{right:16px;top:0}
@media (min-width:700px) and (min-aspect-ratio:5/4){.stage{height:auto}}
/* ===== 不用色塊區分文字：改用粗體和顏色；大按鈕是圓的 ===== */
.task{background:none;padding:0;border-radius:0;font-weight:700;color:var(--maroon)}
.say{background:none;padding:0;border-radius:0;font-weight:700;color:#4E7D3A}
.say.again{background:none;color:var(--red)}
.why,.got{background:none;border:0;padding:0;border-radius:0}
.why summary{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
.got{margin:16px 0}
.opt{border-radius:999px;padding:10px 20px}
.big{display:grid;place-items:center;width:116px;height:116px;margin:18px auto;padding:10px;border-radius:50%;font:700 20px/1.3 var(--f);text-align:center;box-shadow:0 0 0 8px var(--goldsoft)}
.big.blue{box-shadow:0 0 0 8px var(--goldsoft)}
.big:active,.big.down,.big.blue:active,.big.blue.down{box-shadow:0 0 0 8px var(--goldsoft)}
.big:disabled{box-shadow:0 0 0 8px #EFE8DF}
.again-btn{border-radius:999px}
/* ===== 用粗細帶重點：內文細一點、淡一點，重點字粗黑 ===== */
main p,main li,.doc dd{color:#5A4E48}
main b,main strong{font-weight:700;color:var(--ink)}
.task,.task b{color:var(--maroon)}
.say b{color:inherit}
.say.again b{color:inherit}
/* 回饋訊息用一般粗細，只有重點詞粗 */
.say{font-weight:400;color:#3F6B2E}
.say.again{font-weight:400;color:#B8261F}
.say b{font-weight:700}
/* ===== 手機：地圖和文字在同一頁一起捲，上一關／下一關固定在最下面 ===== */
@media (max-width:699.98px),(max-aspect-ratio:1249/1000){
  html,body{height:auto;min-height:100%}
  body{overflow:visible}
  .app{height:auto;min-height:100vh}
  main{flex:none;overflow:visible;min-height:0}
  .foot{position:sticky;bottom:0;z-index:5}
  .stage{margin:0 2px}
  /* 圓黏在畫面上方：往下捲找按鈕時，圓和按鈕一定同時看得到 */
  .stage{position:sticky;top:0;z-index:4;background:var(--bg)}
  main *{scroll-margin-bottom:76px}
  .big{width:96px;height:96px;margin:12px auto;font-size:19px}
}
/* ===== 卡片文字角色（使用者定的規則） ===== */
.task{color:#6C2024;font-weight:700}
.bar{height:4px;background:#EFE6D8;border-radius:2px;margin:10px 0 12px}
.bar b{background:#6C2024;border-radius:2px}
.say{font-weight:400;color:#3F6B2E}
.say.again{font-weight:400;color:#B8261F}
.say.again::before{content:"もういちど";display:block;font:700 13px var(--serif);letter-spacing:.08em;color:var(--red);margin-bottom:2px}
main .kick+p{font-weight:700;color:var(--ink)}
.notes{margin-top:24px;padding-top:12px;border-top:1px solid var(--line)}
.notes .note{margin:0 0 6px}
.notes .note b{color:#8A7A70}
/* ===== 完成頁：一段一段回顧 ===== */
.recap{min-height:150px}
.rc{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start}
.rc .seal{width:58px;height:58px;margin-top:4px}
.rc .seal.empty{background:none;border:2px dashed var(--gold);box-shadow:none}
.rk{margin:0;font:700 13px var(--serif);letter-spacing:.08em;color:var(--red)}
.rh{margin:0 0 6px;font:900 22px/1.35 var(--serif);color:var(--ink)}
.rn{margin:-6px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.pad{display:grid;grid-template-columns:repeat(3,60px);grid-template-rows:repeat(2,60px);gap:8px;justify-content:center;margin:16px auto 12px}
.pad button{border:0;border-radius:50%;background:var(--maroon);color:#fff;font:700 26px/1 var(--f);box-shadow:0 0 0 5px var(--goldsoft);cursor:pointer;touch-action:manipulation}
.pad button:active{filter:brightness(.88)}
.pad button:disabled{background:#D8CFC4}
.notes .maps a{color:inherit;text-decoration:underline;text-decoration-color:#C9B8A6;text-underline-offset:3px}
.recap:empty{min-height:0}
/* 回到首頁的小房子（每個遊戲左上角都有） */
.home{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:var(--paper,#fff);color:var(--maroon,#6C2024);text-decoration:none}.home svg{width:20px;height:20px}.home:active{background:var(--goldsoft,#F3E8D6)}
/* 延伸閱讀：出發旁的小圓、完成頁的按鈕 */
.go-row{display:flex;align-items:center;justify-content:center;gap:26px}.go-row .big{margin:12px 0}
.learn-round{flex:none;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;border:2px solid var(--gold,#BD9558);background:var(--paper,#fff);color:var(--maroon,#6C2024);font:700 15px/1.3 var(--f);text-align:center;text-decoration:none;box-shadow:0 0 0 6px var(--goldsoft,#F3E8D6)}.learn-round:active{background:var(--goldsoft,#F3E8D6)}
.learn{margin:18px 0 10px}.learn-btn{display:inline-block;padding:8px 20px;border:2px solid var(--gold,#BD9558);border-radius:999px;color:var(--maroon,#6C2024);font-weight:700;font-size:16px;text-decoration:none}.learn-btn:active{background:var(--goldsoft,#F3E8D6)}
h1,h2,h3,.kick,.big,.opt,.rh{word-break:auto-phrase}
rt{font-size:.5em;font-weight:400;letter-spacing:0}