/* 試玩基地 — 設計系統 v2「像素遊戲選單」
   目標：特別、一目了然、不複雜。像素硬邊框＋硬位移陰影（投幣機台感），
   深藍底＋金／珊瑚紅／薄荷綠（刻意不跟評測站金色大廳、也不跟暗紫霓虹撞）。
   中文標題用粗體＋硬描邊陰影做出「遊戲標題」感；像素字型只用在英數小標與按鈕。 */

:root{
  --bg:#141A44;         /* 深royal navy底 */
  --bg2:#1D2560;        /* 面板 */
  --bg3:#28317A;        /* 浮起 */
  --ink:#FCF8EC;        /* 暖白 */
  --muted:#9FA8E0;      /* 次要（藍紫灰） */
  --faint:#6E77B8;
  --gold:#FFC73D;       /* 主色：金幣／CTA */
  --gold-d:#C8860E;
  --coral:#FF5D6C;      /* 強調 */
  --mint:#2FE0A8;       /* 試玩／RTP 正面 */
  --violet:#9B8CFF;
  --outline:#0A0D2A;    /* 像素描邊／硬陰影（近黑藍） */
  --line:#3A4290;
  color-scheme:dark;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:40px 40px;        /* 極淡像素格底，不吵 */
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:18px}
.px{font-family:"Press Start 2P",monospace;line-height:1.5}
.num{font-family:"Press Start 2P",monospace;font-variant-numeric:tabular-nums}

/* 共用：像素面板與像素按鈕 */
.panel{background:var(--bg2);border:3px solid var(--outline);box-shadow:6px 6px 0 var(--outline)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:15px;
  padding:12px 20px;border:3px solid var(--outline);cursor:pointer;color:var(--outline);
  background:var(--gold);box-shadow:0 5px 0 var(--gold-d);text-decoration:none;
  font-family:"Noto Sans TC",sans-serif;line-height:1}
.btn:hover{filter:brightness(1.05);text-decoration:none}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--gold-d)}
.btn.ghost{background:var(--bg3);color:var(--ink);box-shadow:0 5px 0 var(--outline)}
.btn.coral{background:var(--coral);color:#2a0007;box-shadow:0 5px 0 #b22a36}
.btn.sm{font-size:13px;padding:9px 14px}
.btn.block{width:100%;justify-content:center}
/* 首頁註冊按鈕（owner 10-07「這個能顯眼一點嗎 然後有赤兔馬的logo」）：珊瑚紅＋金邊＋發光，左邊放像素風赤兔馬 logo 牌 */
.btn.reg{background:var(--coral);color:#2a0007;font-size:19px;gap:12px;padding:7px 20px 7px 8px;
  border:3px solid var(--gold);box-shadow:0 5px 0 #b22a36,0 0 0 3px var(--outline);animation:regglow 2.2s ease-in-out infinite}
@keyframes regglow{0%,100%{box-shadow:0 5px 0 #b22a36,0 0 0 3px var(--outline)}
  50%{box-shadow:0 5px 0 #b22a36,0 0 0 3px var(--outline),0 0 22px rgba(255,199,61,.65)}}
.btn.reg .reglogo{height:44px;width:auto;display:block;flex:0 0 auto}
.btn.reg b{font-family:"Press Start 2P",monospace;font-size:.9em;color:#fff;text-shadow:2px 2px 0 #7a1020;margin:0 .1em}
.btn.reg .regtxt{white-space:nowrap}
.btn.reg::after{content:"▶";font-size:.75em;margin-left:2px}
@media (max-width:520px){
  .btn.reg{width:100%;justify-content:center;font-size:17px;padding:6px 12px 6px 6px}
  .btn.reg .reglogo{height:38px}
}
@media (max-width:360px){
  .btn.reg{font-size:15px;gap:8px;padding:5px 8px 5px 5px}
  .btn.reg .reglogo{height:30px}
  .btn.reg::after{display:none}
}

/* 像素標籤 */
.eyebrow{font-family:"Press Start 2P",monospace;font-size:10px;letter-spacing:.04em;color:var(--gold)}
.ttl{font-weight:900;letter-spacing:-.01em;text-shadow:3px 3px 0 var(--outline);text-wrap:balance}

/* ── 頂欄 ── */
header.nav{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:3px solid var(--outline)}
.nav .row{display:flex;align-items:center;gap:14px;height:64px}
.logo{display:flex;align-items:center;gap:10px}
.logo .mark{width:40px;height:40px;flex:0 0 40px;border:3px solid var(--outline);image-rendering:auto;
  object-fit:cover;background:var(--bg3);box-shadow:3px 3px 0 var(--outline)}
.logo .wordmark{height:30px;width:auto;display:block}
.nav nav{display:flex;gap:4px;margin-left:auto}
.nav nav a{color:var(--muted);font-weight:800;font-size:14px;padding:8px 11px}
.nav nav a:hover{color:var(--gold)}
/* 頁首註冊鈕：跟首頁大按鈕 .btn.reg 同一套（珊瑚紅＋金框＋像素字 188），金幣是 5090 像素圖（10-07 owner 嫌原本平面圓醜） */
.coinbtn{display:flex;align-items:center;gap:7px;background:var(--coral);border:3px solid var(--gold);
  box-shadow:0 4px 0 #b22a36,0 0 0 2px var(--outline);padding:3px 13px 3px 4px;color:#2a0007;font-weight:900;font-size:14px}
.coinbtn:hover{text-decoration:none;filter:brightness(1.07)}
.coinbtn .cbcoin{height:34px;width:auto;display:block;flex:0 0 auto}
.coinbtn .cbtxt{white-space:nowrap}
.coinbtn b{font-family:"Press Start 2P",monospace;font-size:.82em;color:#fff;text-shadow:2px 2px 0 #7a1020;margin-left:.1em}
.burger{display:none;margin-left:6px;background:var(--bg2);border:3px solid var(--outline);color:var(--ink);
  width:42px;height:42px;font-size:18px;box-shadow:3px 3px 0 var(--outline)}

/* ── HERO（標題畫面）── */
.hero{margin-top:22px}
.hero-compact{padding:14px 2px 10px}
.hero-compact .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.feats{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 20px}
.feat{background:var(--bg2);border:3px solid var(--outline);box-shadow:3px 3px 0 var(--outline);
  padding:7px 13px;font-size:13.5px;font-weight:700;color:var(--muted)}
.feat b{color:var(--gold)}
.hero-band{position:relative;border:3px solid var(--outline);box-shadow:6px 6px 0 var(--outline);
  overflow:hidden;background:var(--bg2)}
.hero-band img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.5}
.hero-band .in{position:relative;padding:40px 34px;max-width:620px}
.hero h1{font-size:clamp(28px,5.4vw,46px);line-height:1.1;margin:10px 0 12px;font-weight:900;
  color:var(--gold);text-shadow:4px 4px 0 var(--outline)}
.hero p{margin:0 0 20px;font-size:17px;color:var(--ink);max-width:48ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ── 分類 tab ── */
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 18px}
.tab{font-family:"Noto Sans TC";font-weight:800;font-size:14px;padding:8px 15px;color:var(--muted);
  background:var(--bg2);border:3px solid var(--outline);box-shadow:3px 3px 0 var(--outline);cursor:pointer}
.tab.on{background:var(--gold);color:var(--outline)}
.tab:hover{text-decoration:none;color:var(--ink)}
.tab.on:hover{color:var(--outline)}

/* ── 遊戲機台卡（主角）── */
section{padding-block:30px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.sec-head h2{font-size:clamp(20px,3.4vw,27px);font-weight:900;margin:0;text-shadow:3px 3px 0 var(--outline)}
.sec-sub{color:var(--muted);margin:0 0 16px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{position:relative;background:var(--bg2);border:3px solid var(--outline);box-shadow:6px 6px 0 var(--outline);
  display:flex;flex-direction:column;transition:transform .1s,box-shadow .1s}
.tile:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--outline);text-decoration:none}
.tile .art{position:relative;aspect-ratio:4/3;border-bottom:3px solid var(--outline);overflow:hidden;background:var(--bg3)}
.tile .art img{width:100%;height:100%;object-fit:cover}
.tile .ph{width:100%;height:100%;display:grid;place-items:center;font-size:40px;opacity:.55;
  background-image:linear-gradient(45deg,rgba(255,255,255,.03) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.03) 75%),
    linear-gradient(45deg,rgba(255,255,255,.03) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.03) 75%);
  background-size:18px 18px;background-position:0 0,9px 9px}
.tile .ph small{position:absolute;bottom:8px;font-family:"Press Start 2P";font-size:8px;color:var(--faint)}
.tile .rank{position:absolute;top:0;left:0;z-index:2;font-family:"Press Start 2P";font-size:12px;color:var(--outline);
  background:var(--gold);border-right:3px solid var(--outline);border-bottom:3px solid var(--outline);padding:7px 9px}
.tile .body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:4px;flex:1}
.tile .name{font-weight:900;font-size:19px;color:var(--ink);text-shadow:2px 2px 0 var(--outline)}
.tile .maker{font-size:12.5px;color:var(--muted)}
.tile .maker b{color:var(--violet)}
.tile .stat{display:flex;gap:16px;margin-top:4px;font-size:12px;color:var(--muted)}
.tile .stat b{display:block;font-family:"Press Start 2P";font-size:12px;margin-top:3px}
.tile .stat .rtp b{color:var(--mint)}
.tile .stat .mul b{color:var(--gold)}
.tile .go{margin-top:12px}

/* ── 導流條（10-07 owner「這不能做漂亮一點嗎」「那個188也可以用產圖做一下圖」：188 改像素金幣圖＋重新排版）── */
.funnel{position:relative;display:grid;grid-template-columns:minmax(150px,200px) 1fr;
  grid-template-areas:"coin ft" "coin cta";column-gap:26px;row-gap:14px;align-items:center;
  margin:14px 0;padding:24px 28px 26px;overflow:hidden;
  background:radial-gradient(circle at 15% 50%,rgba(255,199,61,.30),transparent 40%),
    linear-gradient(135deg,#2a338f 0%,var(--bg2) 55%,#151b4a 100%);
  border:3px solid var(--gold);box-shadow:6px 6px 0 var(--gold-d),inset 0 0 0 3px var(--outline)}
.funnel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1.5px,transparent 1.6px);background-size:14px 14px}
.funnel > *{position:relative;z-index:1}
.funnel .coinimg{grid-area:coin;width:100%;height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 8px 0 rgba(10,13,42,.55));animation:bob 2.6s ease-in-out infinite}
.funnel .ft{grid-area:ft}
.funnel .ft b{display:block;font-size:clamp(20px,2.6vw,26px);font-weight:900;line-height:1.45;color:var(--ink);
  text-shadow:3px 3px 0 var(--outline);word-break:keep-all;overflow-wrap:anywhere}
/* 不用 text-wrap:balance：它為了讓兩行一樣長，會把「體驗金」拆成「體驗｜金」（10-07 量到 63 處） */
.funnel .ft b .gold{font-family:"Press Start 2P",monospace;font-size:.9em;color:var(--gold);
  text-shadow:3px 3px 0 #7a4600;margin:0 .15em;letter-spacing:-.02em}
/* 逗號後半句整塊換行：放得下就同一行，放不下整塊掉到下一行，不會把「體驗金」拆兩半 */
.funnel .ft b .sub{display:inline-block;word-break:keep-all;overflow-wrap:anywhere}
.funnel .ft p{margin:10px 0 0;padding-left:12px;border-left:3px solid var(--gold);color:#c9cdf4;font-size:14.5px;line-height:1.75;text-wrap:pretty}
.funnel .btn.coral{grid-area:cta;justify-self:start;font-size:18px;padding:14px 26px}
.funnel .btn.coral::before{content:"▶ "}
@media (max-width:640px){
  .funnel{grid-template-columns:1fr;grid-template-areas:"coin" "ft" "cta";text-align:center;padding:20px 16px 22px}
  .funnel .coinimg{width:min(230px,72%);margin:0 auto}
  .funnel .ft p{border-left:0;padding-left:0}
  .funnel .btn.coral{justify-self:stretch;justify-content:center}
}
@media (max-width:380px){
  .funnel .btn.coral{font-size:16px;padding:13px 14px;white-space:nowrap}
}

/* ── 浮動體驗金徽章 ── */
.float-cta{position:fixed;z-index:60;left:14px;bottom:14px;width:152px;touch-action:none;-webkit-user-select:none;user-select:none}
.float-cta>a{display:block;line-height:0;cursor:grab}
.float-cta.dragging>a{cursor:grabbing}
.float-cta img{width:100%;height:auto;display:block;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.42));animation:bob 2.8s ease-in-out infinite;-webkit-user-drag:none}
.float-cta.dragging img{animation:none}
.float-cta>a:hover img{animation-play-state:paused;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.42)) brightness(1.08)}
.float-cta[hidden]{display:none}

/* ── 內容區（介紹／對照表／FAQ）── */
.content-sec p{color:var(--ink);font-size:16px;max-width:70ch}
.content-sec h3{margin-top:24px}
.tbl-wrap{overflow-x:auto;margin:8px 0 18px}
.ctbl{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:15px;min-width:440px}
.ctbl th,.ctbl td{text-align:left;padding:11px 16px;background:var(--bg2);
  border-top:2px solid var(--outline);border-bottom:2px solid var(--outline)}
.ctbl tr > :first-child{border-left:3px solid var(--outline)}
.ctbl tr > :last-child{border-right:3px solid var(--outline)}
.ctbl tr > * + *{border-left:2px solid var(--line)}
.ctbl thead th{background:var(--bg3);color:var(--gold);font-weight:800}
.ctbl td:first-child{color:var(--muted);font-weight:700;white-space:nowrap}

/* ── footer ── */
footer{border-top:3px solid var(--outline);margin-top:26px;padding-block:24px 40px;color:var(--faint);font-size:13px}
footer .cols{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:16px;color:var(--muted)}
footer b{color:var(--ink)}
footer .disc{font-size:12px;line-height:1.7;max-width:760px}

/* ════ 遊戲頁（set.html）同一套皮 ════ */
.crumb{font-size:13px;color:var(--faint);padding-top:16px}
.crumb a{color:var(--muted)}
/* 10-07 owner「比例不要跑掉」「文章內的圖不用那麼大」：圖欄固定 360px、圖高跟著寬度縮（之前沒寫 height:auto，手機上被 height="600" 撐成直的） */
.game-head{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:26px;align-items:start;margin-top:10px}
.art-real{border:3px solid var(--outline);box-shadow:6px 6px 0 var(--outline);overflow:hidden;background:var(--bg2)}
.art-real img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.game-head h1{font-size:clamp(26px,5vw,40px);font-weight:900;margin:8px 0 6px;color:var(--gold);
  text-shadow:4px 4px 0 var(--outline)}
.game-head .lead{font-size:16px;color:var(--ink)}
.tagrow{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}
.tag{font-size:12.5px;font-weight:800;padding:5px 11px;border:2px solid var(--outline);background:var(--bg3);color:var(--muted)}
.tag.maker{color:var(--violet)}
.tag.rtp{color:var(--mint)}
.tag.hot{color:var(--gold)}
.hrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}

h2.sec{font-size:clamp(19px,3.2vw,25px);font-weight:900;margin:0 0 6px;text-shadow:3px 3px 0 var(--outline)}
h3{font-size:18px;font-weight:800;margin:22px 0 8px;color:var(--gold)}
p{margin:0 0 14px}
strong{font-weight:800;color:#fff}
.lead{font-size:17px}

.trial{border:3px solid var(--outline);box-shadow:6px 6px 0 var(--outline);background:var(--bg2);margin:8px 0;overflow:hidden}
.trial .screen{aspect-ratio:16/9;background:var(--bg);display:grid;place-items:center;border-bottom:3px solid var(--outline)}
.trial .playbtn{display:flex;flex-direction:column;align-items:center;gap:12px}
.trial .ring{width:74px;height:74px;border-radius:50%;border:4px solid var(--outline);background:var(--gold);
  display:grid;place-items:center;box-shadow:5px 5px 0 var(--outline);cursor:pointer}
.trial .ring::before{content:"";border-left:22px solid var(--outline);border-top:14px solid transparent;
  border-bottom:14px solid transparent;margin-left:6px}
.trial .playbtn span{font-weight:900;color:var(--ink)}
.trial .playbtn small{color:var(--faint);font-size:12px}
.trial .bar{display:flex;align-items:center;gap:10px;padding:11px 15px;font-size:13px;color:var(--muted)}
.trial .bar .dot{width:9px;height:9px;background:var(--mint)}
.trial .bar .real{margin-left:auto;font-weight:900;color:var(--gold)}

/* 表格：每一行是獨立一條，行與行之間留空隔開；對照表（.multi）每個值各一欄 */
.spec{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:15px}
.spec th,.spec td{text-align:left;padding:12px 15px;vertical-align:top;
  border-top:2px solid var(--outline);border-bottom:2px solid var(--outline)}
.spec tr > :first-child{width:34%;border-left:3px solid var(--outline)}
.spec tr > :last-child{border-right:3px solid var(--outline)}
.spec tr > * + *{border-left:2px solid var(--line)}
.spec th{background:var(--bg3);color:var(--muted);font-weight:800;font-size:14px}
.spec td{background:var(--bg2)}
.spec tr.head > *{background:var(--bg3);color:var(--gold);font-weight:900}
.spec.multi tr > :first-child{width:24%}
.spec td b{color:var(--gold)}
.spec td .src,.spec th .src{font-size:11.5px;color:var(--faint)}
@media (max-width:560px){
  .spec{font-size:14px}
  .spec th,.spec td{padding:10px}
  .spec th{font-size:13px}
}

.faq{border:3px solid var(--outline);box-shadow:4px 4px 0 var(--outline);background:var(--bg2);margin-bottom:12px}
.faq summary{padding:14px 16px;font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-weight:900;font-size:20px}
.faq[open] summary::after{content:"–"}
.faq .ans{padding:0 16px 15px;color:var(--muted)}

ul.ticks{list-style:none;padding-left:0;margin:0 0 16px}
ul.ticks li{position:relative;padding-left:24px;margin-bottom:9px}
ul.ticks li::before{content:"▸";position:absolute;left:3px;color:var(--mint)}
.related{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ── 互動：跑馬燈／搜尋／手氣王／微動效 ── */
.ticker{overflow:hidden;border:3px solid var(--outline);box-shadow:4px 4px 0 var(--outline);background:var(--bg2);margin-top:18px}
.ticker .run{display:inline-block;white-space:nowrap;padding:9px 0;font-weight:800;color:var(--muted);animation:tick 26s linear infinite}
.ticker:hover .run{animation-play-state:paused}
.ticker .run .hot{color:var(--coral);font-family:"Press Start 2P";font-size:10px;margin:0 10px 0 18px}
.ticker .run .g{color:var(--gold);margin:0 5px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tabs{align-items:center}
.gsearch{margin-left:auto;background:var(--bg);border:3px solid var(--outline);box-shadow:3px 3px 0 var(--outline);
  color:var(--ink);font-size:14px;padding:8px 12px;font-family:"Noto Sans TC",sans-serif;min-width:140px;max-width:200px}
.gsearch::placeholder{color:var(--faint)}
.btn.lucky{background:var(--coral);color:#2a0007;box-shadow:0 5px 0 #b22a36}
.tile.lit{transform:translate(-3px,-3px)!important;box-shadow:9px 9px 0 var(--gold)!important;outline:3px solid var(--gold);outline-offset:-3px}
.noresult{color:var(--muted);padding:18px 2px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.funnel .btn.coral{animation:glow 2.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 5px 0 #b22a36}50%{box-shadow:0 5px 0 #b22a36,0 0 18px rgba(255,93,108,.55)}}

/* ── RWD ── */
@media (max-width:880px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .game-head{grid-template-columns:1fr}
  .game-head .art-real{max-width:300px}
  .related{grid-template-columns:repeat(2,1fr)}
  .nav nav{display:none}
  .coinbtn{margin-left:auto}   /* 選單收起來後註冊按鈕靠右；☰ 沒接選單程式，按了沒反應，所以不顯示（10-07） */
  .hero-band .in{padding:28px 22px}
}
@media (max-width:520px){
  .tiles{grid-template-columns:repeat(2,1fr);gap:11px}
  .tile .art .rank{font-size:10px;padding:5px 7px}
  .tile .body{padding:9px 10px 11px;gap:3px}
  .tile .name{font-size:14px}
  .tile .maker{font-size:10.5px}
  .tile .stat{gap:9px;font-size:10px}
  .tile .stat b{font-size:11px}
  .tile .go{margin-top:8px}
  .tile .go .btn{font-size:11px;padding:7px 6px}
  .tabs{gap:7px}
  .gsearch{margin-left:0;min-width:0;flex:1 1 100%;order:5}
  .feat{font-size:12px;padding:6px 10px}
  .float-cta{left:10px;bottom:10px;width:118px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}