/* 幸福模擬器 — 像素風視覺系統 規則：沒有圓角、硬邊框、硬陰影（offset 不模糊）、色階不漸層、字不抗鋸齒。 */ :root { --ground: #E7EBE3; --surface: #FFFFFF; --surface-2: #D7DED4; --ink: #0E1512; --ink-2: #3F534C; --ink-3: #6E837B; --edge: #0E1512; /* 硬邊框 */ --edge-soft: #A8B5AD; --hard: #0E1512; /* 硬陰影 */ --root-c: #0B7A63; --root-soft: #C8E4DA; --vol: #C4491A; --vol-soft: #F3DACE; --gold: #B0800E; --bar-bg: #0E1512; /* HUD／控制列：不隨主題翻轉 */ --bar-ink: #E7EBE3; --bar-edge: #46605A; --on-primary: #FFFFFF; /* 主要按鈕上的字 */ --scan: rgba(0, 0, 0, .035); color-scheme: light; --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; --serif: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; --pixel: "Press Start 2P", "IBM Plex Mono", ui-monospace, monospace; --mono: "Press Start 2P", "IBM Plex Mono", ui-monospace, monospace; } /* 深色：沒選過就跟系統走，選過就以那個選擇為準（theme.js 會在 上蓋 data-theme）。 下面兩塊的內容必須一模一樣 —— 改一個就要改另一個。 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0D1315; --surface: #182124; --surface-2: #222E31; --ink: #E9F1EC; --ink-2: #A7BBB4; --ink-3: #7A8F88; --edge: #6E8A82; --edge-soft: #2A383C; --hard: #04080A; --root-c: #54D6AF; --root-soft: #113A32; --vol: #FF8A4C; --vol-soft: #3A2116; --gold: #F0C64B; --bar-bg: #05090A; --bar-ink: #E9F1EC; --bar-edge: #46605A; --on-primary: #04120E; --scan: rgba(0, 0, 0, .13); color-scheme: dark; } } :root[data-theme="dark"] { --ground: #0D1315; --surface: #182124; --surface-2: #222E31; --ink: #E9F1EC; --ink-2: #A7BBB4; --ink-3: #7A8F88; --edge: #6E8A82; --edge-soft: #2A383C; --hard: #04080A; --root-c: #54D6AF; --root-soft: #113A32; --vol: #FF8A4C; --vol-soft: #3A2116; --gold: #F0C64B; --bar-bg: #05090A; --bar-ink: #E9F1EC; --bar-edge: #46605A; --on-primary: #04120E; --scan: rgba(0, 0, 0, .13); color-scheme: dark; } * { box-sizing: border-box; border-radius: 0 !important; } html, body { height: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); line-height: 1.7; -webkit-font-smoothing: none; /* 關掉抗鋸齒，中文字才有像素感 */ font-smooth: never; -webkit-tap-highlight-color: transparent; } /* 掃描線 */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 90; background: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px); } img, canvas { image-rendering: pixelated; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.35; margin: 0; } button { font-family: inherit; cursor: pointer; } /* 小標：英數用像素字 */ .kicker { display: block; font-family: var(--pixel); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; } .tag { display: inline-block; font-family: var(--pixel); font-size: 13px; letter-spacing: .06em; padding: 6px 9px; border: 2px solid var(--root-c); background: var(--root-soft); color: var(--root-c); } .tag.host { border-color: var(--vol); background: var(--vol-soft); color: var(--vol); } /* 按鈕：按下去會沉下去 */ .btn { border: 3px solid var(--edge); background: var(--surface); color: var(--ink); padding: 13px 16px; font-size: 16px; font-weight: 700; box-shadow: 4px 4px 0 var(--hard); transition: none; } /* 滑鼠移過去先沉一半，按下去才整個沉到底 —— 有回饋，又不會被誤認成已經按了。 只給有真的游標的裝置：手機上 :hover 會黏著不放，按過的鈕會一直卡在沉下去的樣子。 */ @media (hover: hover) { .btn:hover, .btn:focus-visible { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--hard); } .btn:disabled:hover { transform: none; box-shadow: 4px 4px 0 var(--edge-soft); } } .btn:active { transform: translate(4px, 4px); box-shadow: none; } .btn.primary { background: var(--root-c); border-color: var(--edge); color: var(--on-primary); } .btn.ghost { background: transparent; } .btn:disabled { opacity: .45; cursor: default; box-shadow: 4px 4px 0 var(--edge-soft); } /* 分段能量條 */ .bar { display: block; height: 16px; border: 2px solid var(--edge); background: var(--surface-2); padding: 2px; overflow: hidden; } .bar > i { display: block; height: 100%; /* 用遮罩切成一格一格，顏色由行內樣式給 */ -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px); mask-image: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px); transition: none; } .bar.locked { background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--edge-soft) 4px 8px); } .card-face { background: var(--surface); border: 3px solid var(--edge); box-shadow: 5px 5px 0 var(--hard); padding: 18px; } /* 輸入元件 */ input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: var(--surface-2); border: 3px solid var(--edge); padding: 0; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 22px; background: var(--vol); border: 3px solid var(--edge); cursor: pointer; } input[type=range]::-moz-range-thumb { width: 34px; height: 22px; background: var(--vol); border: 3px solid var(--edge); cursor: pointer; } input[type=text], input:not([type]), textarea, select { border: 3px solid var(--edge); background: var(--surface); color: var(--ink); font-family: var(--sans); } /* 主持人備忘錄的 QR 遮罩。大螢幕按 N 叫出來，主持人用自己的手機掃。 平常不顯示 —— 房號是公開的，這個網址能翻頁，不要一直掛在牆上。 */ .notesqr { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; gap: 40px; background: rgba(6, 12, 11, .96); padding: 40px; flex-wrap: wrap; } .notesqr.on { display: flex; } .notesqr canvas { border: 6px solid var(--edge); background: #fff; padding: 10px; } .notesqr .t { max-width: 34ch; } .notesqr h3 { font-size: 34px; font-weight: 900; } .notesqr p { color: var(--ink-2); font-size: 17px; margin-top: 14px; line-height: 1.9; } .notesqr .u { font-family: var(--pixel); font-size: 15px; color: var(--root-c); margin-top: 16px; word-break: break-all; } .notesqr .esc { font-family: var(--pixel); font-size: 13px; color: var(--ink-3); margin-top: 22px; } /* QR 一定要用 pixelated：canvas 的點陣被 CSS 縮放時，預設的平滑化會把 模組邊緣糊掉，掃描器就讀不到了。這是 QR 掃不出來最常見的原因。 */ canvas.qr, .qrbox canvas, .notesqr canvas { image-rendering: pixelated; } .notesqr canvas { flex-shrink: 0; } /* 入場頁右邊那個小的「主持人備忘錄」QR。 刻意做得比玩家的 QR 小、而且標得很清楚，不會有人搞錯要掃哪一個。 翻頁之後這一頁就消失了，所以它只在開場前露臉。 */ .hostqr { border: 3px dashed var(--gold); padding: 14px; text-align: center; align-self: flex-start; } .hostqr canvas { display: block; margin: 0 auto; background: #fff; padding: 5px; image-rendering: pixelated; position: relative; z-index: 95; } .hostqr .lbl { font-family: var(--pixel); color: var(--gold); letter-spacing: .06em; margin-bottom: 10px; } .hostqr .u { font-family: var(--pixel); color: var(--ink-3); margin-top: 10px; word-break: break-all; } /* 大螢幕上的共用插圖（見證分享那一頁之類的） */ .stageart { margin-top: 40px; } .stageart img { display: block; width: min(58%, 760px); height: auto; image-rendering: pixelated; } /* 見證分享那一頁只有一張圖，可以放大 */ .stageart.wide img { width: min(88%, 1180px); } /* 淺／深色切換鈕。三個畫面共用同一顆，擺哪裡各自決定。 */ .themebtn { font-family: var(--sans); font-size: 13px; font-weight: 700; line-height: 1; padding: 7px 10px; border: 2px solid var(--edge-soft); background: var(--surface); color: var(--ink-3); } .themebtn:hover, .themebtn:focus-visible { border-color: var(--ink-3); color: var(--ink); } /* 手機上釘在右下角，要蓋在掃描線上面才點得到 */ .themebtn.floating { position: fixed; right: 12px; bottom: 12px; z-index: 96; box-shadow: 3px 3px 0 var(--hard); }