/* 趣味遊戲風格 — 鮮豔漸層 + 厚圓角 + 3D 按壓 + 動畫 */
:root{
  --ink:#2a1a4a; --card:#ffffff; --muted:#7a6aa0;
  --brand:#7c3aed; --brand-d:#5b21b6; --brand-l:#a78bfa;
  --accent:#ff5db1; --gold:#ffd23f;
  --c0:#e94b4b; --c1:#2b7fff; --c2:#ffb020; --c3:#22c07a; /* 四選項色 */
  --shadow:0 12px 30px rgba(40,10,80,.28);
  --pop:0 6px 0; /* 3D 按壓底邊 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:linear-gradient(135deg,#7c3aed 0%,#5b21b6 35%,#2b1b6b 70%,#3b1470 100%);
  background-attachment:fixed}
/* 背景漂浮泡泡 */
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(6px);opacity:.20;z-index:0;pointer-events:none}
body::before{width:340px;height:340px;background:var(--accent);top:-90px;left:-80px;animation:float1 13s ease-in-out infinite}
body::after{width:300px;height:300px;background:var(--gold);bottom:-90px;right:-70px;animation:float2 16s ease-in-out infinite}
@keyframes float1{50%{transform:translate(60px,50px) scale(1.15)}}
@keyframes float2{50%{transform:translate(-50px,-40px) scale(1.1)}}

.wrap{max-width:1000px;margin:0 auto;padding:10px 16px;position:relative;z-index:1}
.center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.6vh,16px);text-align:center;position:relative;z-index:1}
h1{color:#fff;font-size:clamp(26px,4.6vh,52px);margin:0;letter-spacing:1px;text-shadow:0 4px 0 rgba(0,0,0,.15);animation:pop .4s ease-out}
.sub{color:#e9deff;font-size:18px;margin:0}
.hint{color:#cdb8f5;font-size:14px;word-break:break-all}
.muted{color:var(--muted)}
@keyframes pop{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}

.card{background:var(--card);border-radius:26px;box-shadow:var(--shadow);padding:30px;width:100%;max-width:460px;animation:pop .4s ease-out}

/* 3D 按壓鈕 */
.btn{position:relative;border:0;border-radius:18px;padding:16px 22px;font-size:20px;font-weight:900;color:#fff;width:100%;cursor:pointer;
  background:var(--brand);box-shadow:var(--pop) var(--brand-d);transition:transform .06s,box-shadow .06s,filter .15s;letter-spacing:.5px}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--brand-d)}
.btn.alt{background:var(--accent);box-shadow:var(--pop) #c93685}
.btn.alt:active{box-shadow:0 0 0 #c93685}
.btn.ghost{background:#fff;color:var(--brand-d);box-shadow:var(--pop) #d9cdf3}
.btn.ghost:active{box-shadow:0 0 0 #d9cdf3}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:var(--pop) var(--brand-d)}
.btn.small{padding:9px 14px;font-size:15px;border-radius:12px;box-shadow:0 4px 0 var(--brand-d)}
.btn.small:active{box-shadow:0 0 0 var(--brand-d)}
.btn.small.ghost{box-shadow:0 4px 0 #d9cdf3}

input,select,textarea{width:100%;padding:15px;font-size:19px;border:3px solid #eadff9;border-radius:14px;outline:none;font-weight:700;
  font-family:inherit;color:var(--ink);background:#fff;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--brand-l)}
input[type=radio]{width:auto}
label{display:block;text-align:left;font-weight:800;color:var(--muted);margin:14px 0 6px}

.pin{font-size:clamp(40px,12vw,88px);font-weight:900;letter-spacing:8px;color:var(--brand-d);margin:6px 0}
.qr{width:clamp(180px,30vh,262px);height:clamp(180px,30vh,262px);border-radius:18px;background:#fff;padding:10px;box-shadow:var(--shadow);animation:pop .4s ease-out}
.wifi{color:#fff;background:#ffffff26;border:2px dashed #ffffff66;border-radius:14px;padding:10px 18px;font-size:16px;font-weight:800;margin-top:6px}
.wifi b{color:var(--gold)}

/* 玩家名牌 */
.roster{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:14px}
.chip{background:#fff;color:var(--brand-d);font-weight:900;padding:9px 16px;border-radius:999px;font-size:16px;box-shadow:0 4px 0 rgba(0,0,0,.12);animation:pop .35s ease-out}

/* 題目 / 倒數 */
.timer{font-size:clamp(34px,6vh,52px);font-weight:900;color:#fff;width:clamp(64px,11vh,96px);height:clamp(64px,11vh,96px);line-height:clamp(64px,11vh,96px);border-radius:50%;
  background:#ffffff26;border:5px solid #fff;margin:4px auto;box-shadow:var(--shadow);animation:tick 1s ease-in-out infinite}
@keyframes tick{50%{transform:scale(1.07)}}
.qtext{color:#fff;font-size:clamp(22px,4vh,42px);font-weight:900;text-align:center;margin:clamp(8px,1.6vh,16px) auto;max-width:860px;
  text-shadow:0 3px 0 rgba(0,0,0,.18);line-height:1.3}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.6vh,16px);width:100%;max-width:860px;margin:0 auto}
.opt{position:relative;border:0;border-radius:18px;padding:clamp(12px,2.2vh,26px) 20px;font-size:clamp(18px,2.6vh,23px);font-weight:900;color:#fff;cursor:pointer;
  display:flex;align-items:center;gap:14px;min-height:clamp(58px,9vh,104px);text-align:left;transition:transform .08s,filter .15s;animation:pop .35s ease-out}
.opt .sym{font-size:28px;flex:0 0 auto;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))}
.opt[data-i="0"]{background:var(--c0);box-shadow:0 7px 0 #b23636} .opt[data-i="1"]{background:var(--c1);box-shadow:0 7px 0 #1d5cc4}
.opt[data-i="2"]{background:var(--c2);box-shadow:0 7px 0 #c9840c} .opt[data-i="3"]{background:var(--c3);box-shadow:0 7px 0 #178a55}
.opt:not(.dim):not(.win):hover{filter:brightness(1.07)}
.opt:active{transform:translateY(5px)}
.opt.dim{filter:grayscale(.6) brightness(.6);opacity:.55;box-shadow:none}
.opt.win{outline:6px solid #fff;box-shadow:0 0 0 4px var(--gold),0 10px 30px rgba(0,0,0,.3);animation:winpop .5s ease-out}
@keyframes winpop{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.count{display:inline-block;min-width:64px;text-align:right;font-size:26px}

.stat{color:#fff;font-size:22px;font-weight:900;text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.big{font-size:clamp(34px,9vw,72px);font-weight:900;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.2);animation:pop .4s ease-out}
.good{color:#b6ff8f} .bad{color:#ffd0d0}

/* 排行榜清單 */
.board{background:#fff;border-radius:18px;padding:8px;width:min(560px,92vw);max-width:560px;margin:clamp(8px,1.6vh,16px) auto;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(7px,1.3vh,13px) 18px;border-radius:12px;font-size:clamp(16px,2.2vh,20px);font-weight:900;animation:pop .35s ease-out}
.row:nth-child(odd){background:#f6f1ff}
.row .r{color:var(--brand-d)}

/* 頒獎台 podium */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:24px auto 8px;max-width:720px}
.pod{flex:1;max-width:200px;display:flex;flex-direction:column;align-items:center;animation:rise .6s cubic-bezier(.2,1.4,.5,1) both}
.pod .who{color:#fff;font-weight:900;font-size:20px;margin-bottom:8px;text-shadow:0 2px 0 rgba(0,0,0,.2);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .medal{font-size:clamp(32px,5vh,44px);line-height:1}
.pod .bar{width:100%;border-radius:16px 16px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:12px;
  color:#3a2a10;font-weight:900;font-size:clamp(18px,3vh,24px);box-shadow:inset 0 6px 0 rgba(255,255,255,.35)}
.pod.p1 .bar{height:clamp(110px,22vh,190px);background:linear-gradient(#ffe066,#ffb800)}
.pod.p2 .bar{height:clamp(82px,16vh,140px);background:linear-gradient(#eef2f7,#c3ccd8)}
.pod.p3 .bar{height:clamp(64px,13vh,110px);background:linear-gradient(#f3b98a,#d98544)}
.pod.p1{order:2} .pod.p2{order:1} .pod.p3{order:3}
@keyframes rise{0%{transform:translateY(120px);opacity:0}}

@media(max-width:560px){
  .opts{grid-template-columns:1fr}.opt{min-height:78px;font-size:20px}
  .podium{gap:8px}.pod .bar{font-size:18px}.pod .who{font-size:15px}
}