/* 試玩區：玩家試玩筆記本風（米白紙＋黑色手繪線＋麥克筆珊瑚紅／向日葵黃／薄荷綠） */
:root{
  --paper:#fbf7ee; --paper2:#fffdf8; --ink:#1f1b16; --ink2:#4a4339; --muted:#7a7164;
  --coral:#ee5f4a; --coral-ink:#c43f28; --sun:#ffc93c; --mint:#36b9a2; --mint2:#e3f5f1; --line:#ddd4c4;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background-color:var(--paper);
  background-image:radial-gradient(#d8cfbf 1px,transparent 1.2px);background-size:22px 22px;
  font:17px/1.85 "PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;line-break:strict}
a{color:#0f7f6c}
img{max-width:100%;height:auto}
.wrap{max-width:860px;margin:0 auto;padding:0 18px}

/* 頁首 */
.top{background:var(--paper2);border-bottom:3px solid var(--ink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:900;font-size:21px;letter-spacing:.06em}
.brand img{width:38px;height:38px}
.top nav a{color:var(--ink2);text-decoration:none;font-weight:700;margin-left:14px;font-size:15px}

/* 麵包屑、標題 */
.crumb{font-size:14px;color:var(--muted);margin:16px 0 4px}
.crumb a{color:var(--muted)}
h1{font-size:34px;line-height:1.3;margin:6px 0 4px;font-weight:900}
h1 small{display:block;font-size:15px;color:var(--muted);font-weight:700;letter-spacing:.04em;margin-top:4px}
.meta{font-size:14px;color:var(--muted);margin:0 0 14px}
.lead{font-size:18px;background:var(--paper2);border:2px dashed var(--line);border-radius:12px;padding:14px 16px;margin:0 0 18px}
.hl{background:linear-gradient(transparent 58%,rgba(255,201,60,.6) 58%);font-weight:700}

/* 試玩框 */
.demo{position:relative;border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:#0d2a33;
  box-shadow:6px 6px 0 var(--ink);aspect-ratio:16/10;margin:0 0 10px}
.demo .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.demo .ctl{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 12px 16px;background:linear-gradient(transparent,rgba(5,18,22,.82))}
.demo-start{display:flex;align-items:center;gap:6px;border:0;background:none;padding:0;cursor:pointer;
  color:#fff;font-family:inherit;font-weight:900;font-size:22px;line-height:1.2;text-shadow:0 2px 0 var(--ink),0 0 8px rgba(0,0,0,.6)}
.demo-start img{width:86px;height:86px;transition:transform .15s}
.demo-start:hover img,.demo-start:focus-visible img{transform:scale(1.06) rotate(-4deg)}
.demo-real{font-size:14px;color:#fff;background:rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.7);border-radius:99px;
  padding:3px 12px;text-decoration:none}
.demo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.demo.playing .poster,.demo.playing .ctl{display:none}
.demo-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;color:var(--ink2);margin:0 0 6px}
.demo-bar button{font-family:inherit;font-weight:700;font-size:14px;line-height:1;border:2px solid var(--ink);background:var(--sun);border-radius:8px;padding:6px 10px;cursor:pointer}
.demo-bar[hidden]{display:none}
.demo-note{font-size:14px;color:var(--muted);margin:0 0 26px}
@media (max-width:699px){.demo.playing{aspect-ratio:9/14}}

/* 段落與小標 */
h2{display:flex;align-items:center;gap:10px;font-size:25px;line-height:1.35;margin:44px 0 12px;font-weight:900}
h2 img{width:46px;height:46px;flex:0 0 46px}
h2 span{background:linear-gradient(transparent 60%,rgba(255,201,60,.55) 60%)}
h3{font-size:19px;margin:24px 0 8px}
p{margin:0 0 14px}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 16px}
ol.steps li{counter-increment:s;position:relative;padding:2px 0 10px 44px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:30px;height:30px;border:2px solid var(--ink);
  border-radius:50%;background:var(--sun);font-weight:900;text-align:center;line-height:26px;font-size:15px}
.src{font-size:13.5px;color:var(--muted)}

/* 表格：方格紙 */
.tbl{overflow-x:auto;margin:0 0 16px;border:2px solid var(--ink);border-radius:12px;background:var(--paper2)}
table{border-collapse:collapse;width:100%;font-size:15.5px;line-height:1.6}
th,td{border-bottom:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
thead th{background:var(--mint2);font-weight:900;border-bottom:2px solid var(--ink)}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:center;white-space:nowrap}
.tbl caption{caption-side:bottom;text-align:left;padding:8px 11px;font-size:13.5px;color:var(--muted)}

/* 導流 */
.real{border:3px solid var(--ink);border-radius:16px;background:var(--paper2);padding:18px;box-shadow:6px 6px 0 var(--mint);margin:10px 0 8px}
.real p{margin:0 0 12px}
.cta{display:flex;align-items:center;justify-content:center;width:min(100%,340px);height:54px;padding:0 30px;
  background:url(/assets/img/cta-plate.webp) center/100% 100% no-repeat;color:var(--ink);font-weight:900;font-size:18px;
  text-decoration:none;transition:transform .15s;margin:4px 0 2px}
.cta:hover,.cta:focus-visible{transform:rotate(-1.5deg) scale(1.03)}

/* 常見問題 */
.faq details{border:2px solid var(--ink);border-radius:12px;background:var(--paper2);margin:0 0 10px;padding:0 14px}
.faq summary{cursor:pointer;font-weight:900;padding:12px 0 12px 26px;text-indent:-26px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";display:inline-block;width:26px;color:var(--coral);text-indent:0}
.faq .ans{padding:0 0 12px 26px}

/* 首頁卡片 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin:10px 0 30px}
.card{display:block;border:3px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--paper2);color:var(--ink);
  text-decoration:none;box-shadow:5px 5px 0 var(--ink)}
.card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:62% 50%}
.card b{display:block;padding:10px 12px 2px;font-size:19px}
.card span{display:block;padding:0 12px 12px;font-size:14.5px;color:var(--ink2)}

.foot{margin-top:56px;border-top:3px solid var(--ink);background:var(--paper2);font-size:14px;color:var(--muted)}
.foot .wrap{padding:18px}
@media (max-width:480px){h1{font-size:28px}h2{font-size:21px}h2 img{width:38px;height:38px;flex-basis:38px}body{font-size:16.5px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 重點便條（黃色便利貼＋紙膠帶）、提醒框（薄荷綠） */
.keys{position:relative;background:#fff3b8;border:2px solid var(--ink);border-radius:6px 14px 10px 12px;padding:22px 18px 10px;
  margin:6px 0 30px;box-shadow:4px 5px 0 rgba(31,27,22,.18);transform:rotate(-.4deg)}
.keys::before{content:"";position:absolute;top:-12px;left:50%;width:110px;height:24px;margin-left:-55px;
  background:url(/assets/img/cta-plate.webp) center/100% 100% no-repeat;transform:rotate(-2deg)}
.keys-t,.note-t{font-weight:900;font-size:19px;margin:0 0 8px}
.keys ul,.note ul{margin:0;padding:0;list-style:none}
.keys li,.note li{position:relative;padding:0 0 9px 22px;line-height:1.7}
.keys li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--coral);border:2px solid var(--ink)}
.keys b{background:linear-gradient(transparent 55%,rgba(238,95,74,.28) 55%)}
.note{background:var(--mint2);border:2px solid var(--ink);border-left-width:8px;border-radius:12px;padding:14px 16px 6px;margin:4px 0 18px}
.note li::before{content:"";position:absolute;left:3px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--mint);border:2px solid var(--ink)}
ol.steps li b{display:inline;background:linear-gradient(transparent 58%,rgba(255,201,60,.55) 58%)}

/* 小標：主標＋副標；表格在手機上不擠 */
h2 .h2t{display:flex;flex-direction:column;gap:2px;background:none}
h2 .h2t>span{align-self:flex-start;background:linear-gradient(transparent 60%,rgba(255,201,60,.55) 60%)}
h2 .h2t small{font-size:15px;font-weight:700;color:var(--ink2)}
table.kv td:first-child{white-space:nowrap;font-weight:700;width:1%}
table.feat td:first-child{font-weight:900;width:38%}
table.feat td small{display:block;font-weight:500;font-size:12.5px;color:var(--muted);line-height:1.4}
/* 浮動徽章（owner 10-23）：全站右下角一顆；10-24 晚改成按鈕，按了開 #go-pop 確認小視窗再去註冊（站內 /go/join）；試玩框在畫面上時收起來 */
button.float-bonus{background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;text-align:left}
.float-bonus{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;width:200px;display:block;
 text-decoration:none;color:var(--ink);filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));transition:transform .2s,opacity .2s}
.float-bonus img{display:block;width:100%;height:auto}
.float-bonus .fb-t{position:absolute;left:34%;right:7%;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;
 align-items:center;text-align:center;line-height:1.25;white-space:nowrap}
.float-bonus .fb-t b{font-size:17px;color:var(--coral);letter-spacing:.5px}
.float-bonus .fb-t span{font-size:11px;font-weight:700}
.float-bonus:hover,.float-bonus:focus-visible{animation:none;transform:rotate(-2deg) scale(1.04)}
.float-bonus.off{opacity:0;pointer-events:none;transform:translateY(20px)}
@media (max-width:480px){.float-bonus{width:172px;right:8px}.float-bonus .fb-t b{font-size:15px}.float-bonus .fb-t span{font-size:10px}}
.foot{padding-bottom:90px}
@media (prefers-reduced-motion:no-preference){.float-bonus:not(.off){animation:fb-bob 3.2s ease-in-out infinite}}
@keyframes fb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* 只能橫著玩的遊戲（呂布、塔樓衝刺）：手機也用 16:9 框 */
@media (max-width:699px){.demo.wide.playing{aspect-ratio:16/9}}
.demo-down{position:absolute;left:12px;right:12px;bottom:12px;margin:0;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.72);color:#fff;font-size:15px;text-align:center}
.demo-start:disabled{opacity:.6;cursor:wait}
/* 自動清單（tools/fill_lists.py）：卡片的遊戲商小字、主圖還沒出來的文字卡、各區的總覽連結 */
.card b small{display:block;margin-top:2px;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.03em}
.card-t{background:var(--mint2);border-top-width:10px}
.card-t b{padding-top:14px}
.more{margin:0 0 8px;font-weight:700}
.cards+.more{margin-top:-16px}
.more a::after{content:" ›"}
table.feat td a{font-weight:900}
.nw{white-space:nowrap}
/* 首頁圖卡大廳（owner 10-24「首頁要做成圖卡 還有熱門遊戲 直接玩」）：tools/fill_lists.py 產 a.card.gc；總覽頁的卡片也用這套 */
.lobby-h1{margin:18px 0 4px}
.lobby-lead{margin:0 0 12px;font-size:16.5px;color:var(--ink2)}
.lobby-lead b{color:var(--ink)}
.lobby-meta{margin:18px 0 0}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.jump a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;
 background:var(--paper2);color:var(--ink);font-weight:800;font-size:15px;line-height:1;text-decoration:none;box-shadow:2px 2px 0 var(--ink);
 transition:transform .15s}
.jump a:hover,.jump a:focus-visible{transform:translateY(-2px)}
.sec{scroll-margin-top:12px}
.sec-hot h2{margin-top:22px}
.sec-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 12px;margin:40px 0 10px}
.sec-h h2{margin:0}
.sec-more{display:inline-flex;align-items:center;height:32px;padding:0 12px;margin-left:auto;border:2px solid var(--ink);border-radius:999px;
 background:var(--mint2);color:var(--ink);font-weight:800;font-size:14px;line-height:1;text-decoration:none;white-space:nowrap;transition:transform .15s}
.sec-more:hover,.sec-more:focus-visible{transform:translateX(3px)}
/* 卡片網格：手機 2 欄、600 起小卡 3 欄、860 起熱門 3 欄小卡 4 欄 */
.cards.gcs{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:12px 0 8px}
@media (min-width:600px){.cards.gcs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:860px){.cards.gcs{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.cards.gcs-big{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.card.gc{display:flex;flex-direction:column;position:relative;min-width:0;border-radius:14px;box-shadow:4px 4px 0 var(--ink);transition:transform .18s ease-out}
.card.gc span{display:block;padding:0;font-size:inherit;color:inherit}
.card.gc .gc-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0d2a33;border-bottom:3px solid var(--ink);container-type:inline-size}
.card.gc .gc-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.card.gc .gc-prov{position:absolute;left:7px;top:7px;padding:0 7px;border:2px solid var(--ink);border-radius:999px;background:var(--paper2);
 font-size:11.5px;font-weight:800;line-height:1.55;letter-spacing:.02em;white-space:nowrap}
.card.gc .gc-wide{position:absolute;right:7px;top:7px;padding:0 6px;border:2px solid var(--ink);border-radius:6px;background:var(--ink);color:var(--sun);
 font-size:11.5px;font-weight:800;line-height:1.55;white-space:nowrap}
.card.gc .gc-name{padding:8px 10px 0;font-size:16.5px;line-height:1.35;font-weight:900}
.card.gc .gc-line{padding:3px 10px 10px;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.card.gc .gc-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:38px;margin:auto 10px 10px;border:2.5px solid var(--ink);
 border-radius:999px;background:var(--paper2);box-shadow:2px 2px 0 var(--ink);font-size:15px;font-weight:900;line-height:1;letter-spacing:.06em;white-space:nowrap}
.card.gc.gc-play .gc-btn{background:var(--coral);color:var(--ink)}
.card.gc.gc-play .gc-btn::before{content:"";width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.card.gc.gc-how .gc-btn{background:var(--sun)}
.card.gc.gc-rules .gc-btn{background:var(--mint2)}
.gcs-big .card.gc .gc-name{padding:10px 12px 0;font-size:19px}
.gcs-big .card.gc .gc-line{padding:3px 12px 12px;font-size:14.5px}
.gcs-big .card.gc .gc-btn{height:42px;margin:auto 12px 12px;font-size:16px}
/* 主圖還沒產出：貼紙風色塊＋遊戲名大字（純 CSS，主圖出來 fill_lists 重跑就換成圖） */
.card.gc .gc-ph{display:flex;align-items:center;justify-content:center;background-color:var(--mint);
 background-image:radial-gradient(rgba(31,27,22,.16) 1.4px,transparent 1.7px);background-size:11px 11px}
.card.gc .gc-ph1{background-color:var(--coral)}
.card.gc .gc-ph2{background-color:var(--sun)}
.card.gc .gc-ph .gc-ph-t{max-width:84%;padding:3px 12px 4px;border:2.5px solid var(--ink);border-radius:10px;background:var(--paper2);
 box-shadow:3px 3px 0 var(--ink);font-size:18px;font-size:clamp(15px,11cqi,30px);font-weight:900;line-height:1.25;text-align:center;
 transform:rotate(-3deg)}
.card.gc:nth-child(even) .gc-ph .gc-ph-t{transform:rotate(2.5deg)}
.card.gc:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
@media (hover:hover){
 .card.gc:hover{z-index:1;transform:rotate(-1.2deg) scale(1.03)}
 .card.gc:nth-child(even):hover{transform:rotate(1.2deg) scale(1.03)}
}
/* 怎麼玩：電腦橫排三格、手機直排 */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:10px 0 6px}
.how-s{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 12px 14px;border:2px solid var(--ink);
 border-radius:14px;background:var(--paper2);box-shadow:3px 3px 0 var(--ink);text-align:center}
.how-s img{width:56px;height:56px}
.how-n{position:absolute;left:10px;top:10px;width:28px;height:28px;border:2px solid var(--ink);border-radius:50%;background:var(--sun);
 font-weight:900;font-size:14px;line-height:24px;text-align:center}
.how-t{font-weight:700;font-size:15.5px;line-height:1.5}
@media (max-width:599px){
 .how{grid-template-columns:1fr;gap:10px}
 .how-s{flex-direction:row;justify-content:flex-start;padding:10px 12px 10px 48px;text-align:left}
 .how-s img{width:44px;height:44px}
 .how-n{top:50%;margin-top:-14px}
}
/* 全部一覽：收合的總表 */
details.all{margin:34px 0 0;border:2px solid var(--ink);border-radius:14px;background:var(--paper2);box-shadow:3px 3px 0 var(--ink)}
details.all .all-s{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;cursor:pointer;list-style:none;
 font-weight:900;font-size:17px}
details.all .all-s::-webkit-details-marker{display:none}
details.all .all-s::after{content:"";flex:0 0 auto;width:10px;height:10px;margin-right:4px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
 transform:rotate(45deg);transition:transform .2s}
details.all[open] .all-s::after{transform:rotate(-135deg)}
details.all .tbl{margin:0 12px 12px}
@media (prefers-reduced-motion:reduce){
 .card.gc,.card.gc:hover,.card.gc:nth-child(even):hover,.jump a:hover,.jump a:focus-visible,.sec-more:hover,.sec-more:focus-visible{transform:none}
}
/* 中文只在標點、空白、詞界 <wbr>（fill_lists 插的）換行：首頁整區＋所有圖卡（owner「詞不准拆兩行」）；表格格子不跟著縮到一個字寬 */
.nd{white-space:nowrap}
.card.gc .nd{display:inline}
.lobby,.card.gc .gc-name,.card.gc .gc-line,.card.gc .gc-ph-t{word-break:keep-all;overflow-wrap:anywhere}
.lobby td,.lobby th{overflow-wrap:normal}
/* 佔位色塊：名字往下讓一點，不跟左上角遊戲商小標擠在一起 */
.card.gc .gc-ph{padding-top:16px}
.card.gc .gc-ph .gc-ph-t{max-width:90%;font-size:16px;font-size:clamp(14px,10cqi,28px)}
/* 10-24 手機表格：格子窄到字被擠成一直條（水果派對一格 10 字擠成 8 行）→ 每格至少 4.5 字寬，欄多的表格在框內左右滑 */
@media (max-width:600px){.tbl th,.tbl td{min-width:4.5em}}
@media (max-width:600px){.tbl th:first-child,.tbl td:first-child{min-width:6.5em}}
/* 10-24 中文詞不拆兩行（owner「詞不准拆兩行」，照副主站做法）：只在標點、空白、建置插的 <wbr> 詞界換行；表格格子不硬拆 */
body{word-break:keep-all;overflow-wrap:anywhere}
.tbl th,.tbl td{overflow-wrap:normal}
/* 10-24 手機上兩欄長句表格改上下排（build.py stack_tables 加 class="stack"＋data-label） */
@media (max-width:600px){
 .tbl table.stack thead{display:none}
 .tbl table.stack tr{display:block;padding:10px 12px;border-bottom:1px solid var(--line)}
 .tbl table.stack tbody tr:last-child{border-bottom:0}
 .tbl table.stack td{display:block;padding:2px 0;border:0;min-width:0}
 .tbl table.stack td::before{content:attr(data-label);display:block;font-size:13px;font-weight:800;color:var(--muted)}
 .tbl table.stack td:first-child{font-weight:800}
}
@media (max-width:600px){.tbl table.stack td{width:auto!important;white-space:normal!important}}

/* 10-24 全站：右上「領取體驗金」、手機底部導覽列、全站選單、彈窗、頁尾連結（build.py site_chrome 填進每頁） */
.top .wrap{gap:12px}
.top-nav{display:flex;align-items:center;margin-left:auto}
.top nav a[aria-current]{color:var(--coral)}
.hd-bonus{position:relative;flex:0 0 auto;width:158px;border:0;background:none;padding:0;cursor:pointer;font-family:inherit;
 transition:transform .15s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.hd-bonus img{display:block;width:100%;height:auto}
.hd-bonus span{position:absolute;left:24%;right:5%;top:24%;bottom:22%;display:flex;align-items:center;justify-content:center;
 color:#fff;font-weight:900;font-size:15px;letter-spacing:.05em;white-space:nowrap;text-shadow:0 1.5px 0 var(--ink),0 0 3px rgba(0,0,0,.35)}
.hd-bonus:hover,.hd-bonus:focus-visible{transform:rotate(-2deg) scale(1.04)}
@media (max-width:899px){.top-nav{display:none}.hd-bonus{margin-left:auto}}

.botnav{display:none}
@media (max-width:899px){
 .botnav{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--paper2);border-top:3px solid var(--ink);padding:6px 2px calc(5px + env(safe-area-inset-bottom));
  transition:transform .25s ease}
 .botnav a,.botnav button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-height:48px;
  font-family:inherit;font-size:12.5px;font-weight:800;line-height:1.2;color:var(--ink2);text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
 .botnav img{width:28px;height:28px;object-fit:contain;transition:transform .15s}
 .botnav a:active img,.botnav button:active img{transform:scale(.9)}
 .botnav [aria-current]{color:var(--ink)}
 .botnav [aria-current] span{background:linear-gradient(transparent 55%,rgba(255,201,60,.7) 55%)}
 body.demo-on .botnav{transform:translateY(110%)}
 .float-bonus{bottom:calc(72px + env(safe-area-inset-bottom))}
 .foot{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
}

/* 彈窗與選單（popover：不用 JS 就能開關；舊瀏覽器 site.js 補） */
.bonus-pop,.sheet{color:var(--ink);font:inherit;padding:0}
.bonus-pop::backdrop,.sheet::backdrop{background:rgba(31,27,22,.55)}
.bonus-pop{width:min(92vw,430px);max-height:90vh;overflow:auto;border:3px solid var(--ink);border-radius:18px;background:var(--paper);
 box-shadow:6px 6px 0 var(--ink)}
.bp-in{position:relative;padding:12px 14px 14px;text-align:center}
.bp-art{display:block;width:66%;height:auto;margin:0 auto}
.bp-t{display:block;font-size:22px;font-weight:900;margin:0 0 12px}
.bp-t{background:linear-gradient(transparent 58%,rgba(255,201,60,.6) 58%);display:inline-block;padding:0 4px}
.bp-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bp-item{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--ink);border-radius:12px;
 background:var(--paper2);padding:10px 8px 10px;box-shadow:3px 3px 0 rgba(31,27,22,.18)}
.bp-item img{width:100%;max-width:120px;height:42px;object-fit:contain;margin-bottom:4px}
.bp-item b{font-size:15.5px;line-height:1.3;color:var(--coral);text-align:center;text-wrap:balance}
.bp-item b .nw{white-space:nowrap;font-size:inherit;line-height:inherit;color:inherit}
.bp-item span{font-size:12.5px;line-height:1.5;color:var(--ink2)}
.bp-go{display:flex;align-items:center;justify-content:center;width:100%;height:44px;margin-top:auto;
 background:url(/assets/img/cta-plate.webp) center/100% 100% no-repeat;color:var(--ink);font-weight:900;font-size:15.5px;
 text-decoration:none;transition:transform .15s}
.bp-go:hover,.bp-go:focus-visible{transform:rotate(-1.5deg) scale(1.03)}
.bp-item span+.bp-go{margin-top:auto}
/* 10-25「立即領取」改成按鈕（先開確認視窗）：拿掉按鈕預設框線和字型 */
button.bp-go{border:0;padding:0;font-family:inherit;cursor:pointer}
@media (max-width:370px){.bp-item b{font-size:14px}}
.bp-note{display:block;margin-top:10px;font-size:12.5px;color:var(--muted)}
.pop-x{position:absolute;top:8px;right:8px;z-index:1;width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;
 background:var(--paper2);cursor:pointer;padding:0}
.pop-x::before,.pop-x::after{content:"";position:absolute;left:50%;top:50%;width:15px;height:2.5px;border-radius:2px;
 background:var(--ink);transform:translate(-50%,-50%) rotate(45deg)}
.pop-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:80vh;overflow:auto;border:0;
 border-top:3px solid var(--ink);border-radius:18px 18px 0 0;background:var(--paper)}
.sheet-in{position:relative;max-width:860px;margin:0 auto;padding:16px 16px calc(18px + env(safe-area-inset-bottom))}
.sheet-t{display:block;font-size:19px;font-weight:900;margin:2px 0 12px}
.sheet-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sheet-links a{display:block;border:2px solid var(--ink);border-radius:10px;background:var(--paper2);padding:10px 12px;
 font-weight:800;color:var(--ink);text-decoration:none}
.sheet-links a:active{background:#fff3b8}
@media (prefers-reduced-motion:no-preference){
 .bonus-pop:popover-open{animation:pop-in .22s ease-out}
 .sheet:popover-open{animation:sheet-in .22s ease-out}
}
@keyframes pop-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes sheet-in{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@supports not selector(:popover-open){
 [popover]{display:none}
 [popover].pop-open{display:block;position:fixed;z-index:100}
 .bonus-pop.pop-open{inset:0;margin:auto;height:fit-content}
}

/* 頁尾連結 */
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px}
.foot-nav a{color:var(--ink2);font-weight:700;text-decoration:none}
.foot-nav a:hover{text-decoration:underline}

/* 10-24 對標 asg818：首頁「為什麼在這裡試玩」、文末署名框、頁尾「關於我們」 */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 10px}
@media (min-width:860px){.why{grid-template-columns:repeat(4,minmax(0,1fr))}}
.why-s{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:2px solid var(--ink);border-radius:12px;
 background:var(--paper2);padding:12px 12px 14px;box-shadow:3px 3px 0 rgba(31,27,22,.18)}
.why-s img{width:44px;height:44px}
.why-s b{font-size:16.5px;line-height:1.35;background:linear-gradient(transparent 58%,rgba(255,201,60,.55) 58%)}
.why-s span{font-size:14px;line-height:1.6;color:var(--ink2)}
.byline-end{display:flex;align-items:center;gap:12px;margin:34px 0 0;padding:14px 16px;border:2px dashed var(--line);
 border-radius:12px;background:var(--paper2)}
.byline-end img{width:48px;height:48px;flex:0 0 48px}
.byline-end b{display:block;font-size:16px}
.byline-end b a{color:var(--ink)}
.byline-end span{display:block;font-size:13.5px;line-height:1.6;color:var(--muted)}
.foot-about{margin:0 0 12px;line-height:1.7}
.foot-about b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.foot-about a{margin-left:6px;color:#0f7f6c;font-weight:700}
.foot-c{line-height:1.7}

/* 10-24 對標 asg818 基本功能（自己的說法和樣子）：卡片外框＋書籤、卡片數字、館別分頁、照口味挑、我的試玩本、手帳精選、格紙評語、下一款試試看、回頂端 */
.gcw{position:relative;display:flex;min-width:0}
.gcw>.card.gc{flex:1}
.gcw[hidden]{display:none}
.gcw:nth-child(even) .card.gc .gc-ph .gc-ph-t{transform:rotate(2.5deg)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.gcw:nth-child(even) .card.gc:hover{transform:rotate(1.2deg) scale(1.03)}}
.card.gc .gc-stat{display:flex;flex-wrap:wrap;gap:4px;padding:0 10px 9px}
.card.gc .gc-stat i{font-style:normal;white-space:nowrap;font-size:12px;font-weight:800;color:var(--ink);background:#fff3b8;border:1.5px solid var(--ink);border-radius:6px;padding:0 6px;line-height:1.6}
.gcs-big .card.gc .gc-stat{padding:0 12px 10px;font-size:13.5px}
.gcw .card.gc .gc-wide{right:56px}
/* owner 10-24「標籤那個部分也用愛心好了 明顯一點的愛心」：圓形白底＋5090 畫的愛心，收了變珊瑚紅 */
.mark{position:absolute;top:8px;right:8px;z-index:2;width:42px;height:42px;border:2.5px solid var(--ink);border-radius:50%;padding:0;
 cursor:pointer;background:var(--paper2) url(/assets/img/heart-off.webp) center/26px 26px no-repeat;
 box-shadow:2px 2px 0 var(--ink);transition:transform .15s}
.mark[aria-pressed="true"]{background-color:#fff3b8;background-image:url(/assets/img/heart-on.webp)}
.mark:hover,.mark:focus-visible{transform:scale(1.08)}
@media (prefers-reduced-motion:no-preference){.mark[aria-pressed="true"]{animation:heart-pop .3s ease-out}}
@keyframes heart-pop{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.finder{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 6px}
.finder .jump{margin:0}
.jump a[aria-current]{background:var(--ink);color:var(--sun)}
.jump a.tab-nb{border-style:dashed}
.taste-btn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 8px;border:2px solid var(--ink);border-radius:999px;
 background:var(--mint2);font:inherit;font-size:15px;font-weight:800;color:var(--ink);cursor:pointer}
.taste-btn img{width:24px;height:24px;object-fit:contain}
.taste-btn.on{background:var(--sun)}
.finder-hub{margin:4px 0 10px}
.finder-note{margin:2px 0 12px;font-size:14.5px;color:var(--ink2)}
.finder-note b{color:var(--coral)}
.finder-note button{margin-left:8px;border:2px solid var(--ink);border-radius:999px;background:var(--paper2);font:inherit;font-size:13.5px;
 font-weight:700;padding:2px 10px;cursor:pointer}
.cards.gcs.empty::after{content:"這一區沒有符合的遊戲";grid-column:1/-1;color:var(--muted);font-size:14px}
.taste-pop{width:min(92vw,420px);border:3px solid var(--ink);border-radius:16px;background:var(--paper);box-shadow:6px 6px 0 var(--ink);
 color:var(--ink);font:inherit;padding:0}
.taste-pop::backdrop{background:rgba(31,27,22,.45)}
.tp-in{position:relative;padding:16px}
.tp-t{display:block;font-size:19px;font-weight:900;margin:0 0 10px}
.tp-group{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.tp-k{font-size:13px;font-weight:800;color:var(--muted)}
.tp-group label{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:10px;background:var(--paper2);
 padding:8px 10px;font-size:15px;font-weight:700;cursor:pointer}
.tp-group input{width:18px;height:18px;accent-color:var(--coral)}
.tp-group label:has(input:checked){background:#fff3b8}
.tp-note{display:block;font-size:12.5px;color:var(--muted);margin:0 0 12px}
.tp-act{display:flex;gap:10px;justify-content:flex-end}
.tp-act button{height:40px;padding:0 14px;border:2.5px solid var(--ink);border-radius:10px;font:inherit;font-weight:800;cursor:pointer;background:var(--paper2)}
.tp-act .tp-go{background:var(--coral)}
#notebook .nb-empty{display:block;color:var(--muted);font-size:14.5px;margin:6px 0 0}
#notebook .nb-empty[hidden]{display:none}
.picks-h{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:6px 0 8px}
.picks-h img{width:34px;height:34px}
.picks-h b{font-size:18px;font-weight:900;white-space:nowrap}
.picks-h small{flex-basis:100%;padding-left:42px;color:var(--muted);font-size:13px;font-weight:700}
.picks{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,300px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
 padding:4px 2px 12px;margin:0 0 18px;-webkit-overflow-scrolling:touch}
.pick{scroll-snap-align:start;display:flex;flex-direction:column;border:3px solid var(--ink);border-radius:14px;overflow:hidden;
 background:var(--paper2);color:var(--ink);text-decoration:none;box-shadow:4px 4px 0 var(--ink)}
.pick img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:62% 50%;border-bottom:3px solid var(--ink)}
.pick .pk-name{padding:8px 12px 0;font-size:18px;font-weight:900}
.pick small{padding:0 12px;font-size:12.5px;font-weight:800;color:var(--muted)}
.pk-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:8px 10px 0;border:2px dashed var(--line);border-radius:10px}
.pk-st span{display:flex;flex-direction:column;align-items:center;padding:6px 2px}
.pk-st span+span{border-left:2px dashed var(--line)}
.pk-st i{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:700}
.pk-st b{font-size:15px;font-weight:900;color:var(--coral-ink);white-space:nowrap}
.pk-btn{display:flex;align-items:center;justify-content:center;height:38px;margin:10px;border:2.5px solid var(--ink);border-radius:10px;
 background:var(--sun);font-weight:900}
.review .rv{display:grid;grid-template-columns:1fr;gap:12px;margin:6px 0 14px}
@media (min-width:700px){.review .rv{grid-template-columns:1fr 1fr}}
.rv-col{border:2px solid var(--ink);border-radius:12px;padding:12px 14px 6px;background:var(--paper2);box-shadow:3px 3px 0 rgba(31,27,22,.18)}
.rv-good{background:#fff3b8}
.rv-heads{background:var(--mint2)}
.rv-t{display:block;font-size:16.5px;font-weight:900;margin:0 0 6px}
.rv-col ul{margin:0;padding:0;list-style:none}
.rv-col li{position:relative;padding:0 0 8px 20px;line-height:1.65;font-size:15.5px}
.rv-good li::before{content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--coral);border:2px solid var(--ink)}
.rv-heads li::before{content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;border-radius:2px;background:var(--mint);border:2px solid var(--ink)}
.next-try .cards.gcs{margin-top:6px}
.to-top{position:fixed;right:16px;bottom:calc(150px + env(safe-area-inset-bottom));z-index:55;width:46px;height:46px;opacity:0;
 pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s}
.to-top img{display:block;width:100%;height:auto}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
@media (min-width:900px){.to-top{bottom:calc(110px + env(safe-area-inset-bottom))}}
body.demo-on .to-top{opacity:0;pointer-events:none}
/* 首頁主圖（10-24 owner「做一個多遊戲主角的圖」）：四款熱門主角合照，框線跟試玩框同一套 */
.lobby-hero{margin:4px 0 18px;border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:#2b2236;
  box-shadow:6px 6px 0 var(--coral);aspect-ratio:1280/714}
.lobby-hero img{display:block;width:100%;height:100%;object-fit:cover}
/* 主圖下緣的四館標誌（owner 10-24「要不要放各遊戲品牌的logo上去」「看怎麼放比較不會擋道」）：
   只壓在最底下一條（角色的腿和衣襬），臉、手、武器都不擋；白色貼紙底讓黑字的 QTech 也看得到；點了進該館 */
.lobby-hero{position:relative}
.hero-logos{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:10px;padding:34px 10px 12px;
  background:linear-gradient(to top,rgba(22,15,30,.82),rgba(22,15,30,0))}
.hero-logos a{display:flex;align-items:center;height:42px;padding:6px 14px;background:var(--paper2);border:2px solid var(--ink);
  border-radius:99px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s}
.hero-logos a:hover{transform:translateY(-2px)}
.hero-logos img{display:block;height:100%;width:auto}
@media (max-width:560px){
  .hero-logos{gap:5px;padding:18px 6px 6px}
  .hero-logos a{height:25px;padding:3px 7px;border-width:1.5px;box-shadow:2px 2px 0 var(--ink)}
}
.hero-logos a.lg-rsg img{height:150%;margin:-25% 0}   /* RSG 是方形皇冠，同高時字母太小，放大一半（超出的部分壓在白底外不影響） */
/* 10-24 晚 去註冊確認小視窗：沿用 .bonus-pop 外框與 .bp-go 按鈕底圖（5090 元素），只排 logo 和說明字 */
.go-pop{width:min(88vw,360px)}
.gp-logo{display:block;width:150px;height:auto;margin:6px auto 8px}
.go-pop .gp-t{margin:4px 0 18px}
.go-pop .bp-go{height:48px;font-size:17px}
/* 10-25 404 頁（找不到這一頁）：入口沿用全站選單的大按鈕 */
.nf{padding-top:18px;padding-bottom:36px}
.nf-links{margin:16px 0 4px}