/* =====================================================================
   FLOAT 關於我們・房間 —— starface.world/pages/star-corner 復刻
   ---------------------------------------------------------------------
   數值全部抄自存檔（Downloads/星臉明星角 _ 星臉世界_files/star-corner.css
   ＋ 同頁 DOM 上的 Tailwind class），不是量畫面反推的。
   對照寫在註解裡：`800:` 是他們的桌機斷點（min-width 800px）。

   字型：原站是 ABC Diatype Rounded（900/800/500）＋ GT Pressura Mono，
   兩支都是商業授權，這裡先用系統圓體堆疊頂著。站上已自架源泉圓體
   （uploads/float-delivery/），但那是政策頁的子集，收字不含這頁的文案，
   直接掛上會缺字，所以等這頁文案定案後再重新子集化。
   ===================================================================== */

/* ── 整頁不捲動。原站 body 就是 h-screen overflow-hidden。 ───────────── */
html, body.float-about-room {
	height: 100%;
	margin: 0;
	overflow: hidden;
	overscroll-behavior: none;
}

body.float-about-room {
	background: #ffffff;
	color: #000000;
	font-family: "PingFang TC", "Hiragino Maru Gothic ProN", "Yuanti TC",
		"Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.float-about-room * { box-sizing: border-box; }

/* 全站頁尾是一個掛在 wp_footer 的 Blocksy Content Block（渲染頁面 1506，
   Greenshift 積木）。我們沒有呼叫 get_footer()，但那一塊是掛在 wp_footer 上的，
   所以照樣會輸出，直接疊在滿版房間上面。
   它沒有 class 也沒有 id，只能用「body 底下、不是我們的、也不是無障礙專用的 div」
   來排除。這一頁本來就只有一塊內容，範圍不會誤傷。 */
body.float-about-room > div:not(.far):not(.screen-reader-text) { display: none !important; }

.far { position: relative; }
.far-defs { position: absolute; width: 0; height: 0; }

/* ── 1. 滿版變色背景 ────────────────────────────────────────────────
   原站 `.css-color-changer`：fixed 全螢幕、-z-10、18s 循環。
   keyframes 由 PHP 依 ?bg= 注入（far-color）。 */
.far-bg {
	position: fixed;
	inset: 0;
	z-index: -10;
	background-color: #ffffff;
}

/* ── 2. 左上：標題貼紙 ─────────────────────────────────────────────
   參考站這一格是三塊互相重疊的傾斜黃貼紙（黃底 #FDFF00、黑框、
   `rotate(-2.39)`）＋ 兩行標語，跟物件上的 hover 標籤是同一種東西。
   我們照著做：FLOAT → 關於我們 → 一塊放 shot glass 記號的小方塊。
   整組寬度用他們的 260px（手機 180px）。 */
.far-logo {
	position: fixed;
	top: 14px;
	left: 20px;              /* 800: left-10 = 40px */
	z-index: 1;
	display: flex;
	flex-direction: column;
	pointer-events: none;
}

.far-logo__stack {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-bottom: 6px;
}

/* 貼紙本體。2026-09-08 從「黃底黑字黑框」翻成「黑底白字白框」。
   底色循環的六停有三停偏暗（#db0356 L=.16、#0246b8 L=.08、#6a7665 L=.17），
   純黑貼紙壓在上面邊界會糊掉，所以框跟著翻白 —— 貼紙靠的就是那圈對比框。
   裡面的杯子記號是 `fill="currentColor"`，跟著 color 一起變白，不用另外改。 */
.far-logo__chip {
	display: inline-block;
	background: #000;
	color: #fff;
	border: 2px solid #fff;
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
}

.far-logo__chip--a {
	font-size: 19px;
	letter-spacing: .06em;
	padding: 6px 12px;
	transform: rotate(-3.4deg);
	transform-origin: left bottom;
	z-index: 2;
}

/* 第二塊往右錯開並上移，壓在第一塊上 —— 他們的兩塊也是這樣咬在一起的。
   −2.39° 是從 star-corner-logo.svg 的 transform 直接抄的。 */
.far-logo__chip--b {
	font-size: 34px;
	letter-spacing: .04em;
	padding: 7px 14px;
	/* 縮排要大於記號方塊的寬度，方塊才露得出左邊那塊空隙。
	   參考站：corner 的左緣在 205/1020 ≒ 20% 寬，星星方塊 110/1020 ≒ 11%，
	   剛好塞在 star 底下、corner 左邊。 */
	margin: -5px 0 0 40px;
	transform: rotate(-2.39deg);
	transform-origin: left bottom;
	z-index: 3;
}

/* 記號方塊塞在左下角，被第二塊壓住一角。 */
.far-logo__chip--m {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 32px;
	padding: 5px;
	transform: rotate(-9deg);
	z-index: 1;
}

.far-logo__glass { display: block; width: 100%; height: 100%; }

.far-logo__say {
	margin: 8px 0 0 44px;
	font-size: 12px;
	line-height: 1.35;
	font-weight: 800;
	letter-spacing: .01em;
}

/* 取不到貼紙時的退路（logo_lockup 永遠會輸出，這是保險） */
.far-logo__mark {
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -.02em;
}

/* ── 3. 右上：敘事者 ────────────────────────────────────────────────
   原站是 cube-y.png（60px，桌機 100px，rotate −15deg），台詞在它左邊：
   w-[180px] 800:w-[230px] / top-[14px] 800:top-[20px] /
   -left-[190px] 800:-left-[240px] / -rotate-[2deg] / text-right /
   12px‑16px（桌機 16px‑18px）/ font-extrabold。 */
.far-cube {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	pointer-events: none;
}

.far-cube__say {
	width: 180px;
	margin: 0;
	padding-top: 14px;
	transform: rotate(-2deg);
	text-align: right;
	font-size: 12px;
	line-height: 16px;
	font-weight: 800;
	color: #000;
	/* framer-motion 的進場：scale .8→1, opacity 0→1, y 10→0, .3s easeOut */
	transition: opacity .3s ease-out, transform .3s ease-out;
}

.far-cube__say.is-swap {
	opacity: 0;
	transform: rotate(-2deg) translateY(10px) scale(.8);
}

/* 參考站是 60/100px 的黃方塊，`rotate(-15deg)`。我們換成黑底白圈的杯墊圖示
   （2026-09-08 換掉原本的杯墊照片）。是圓的，所以不做整圈旋轉，只浮＋微擺；
   裡面的 shot 杯本身就是斜的，轉整圈反而會看出破綻。 */
.far-cube__box {
	width: 60px;
	height: auto;
	flex: none;
	margin: 4px 4px 0 0;
	display: block;
	animation: far-coaster 6.4s ease-in-out infinite alternate;
}

/* 敘事者也不能是死的。圓盤轉起來光影會不對，所以只讓它浮＋微擺。 */
@keyframes far-coaster {
	from { transform: translateY(4px) rotate(-2deg); }
	to   { transform: translateY(-6px) rotate(2.5deg); }
}

/* ── 4. 房間 ───────────────────────────────────────────────────────
   原站：外層 h-screen w-screen flex items-center justify-center，
   內層 keen-slider，slide min-width 1400px，
   `.screen-size` 原始 CSS 是 width:1500px!important;height:900px!important，
   @media (height>=1100px){ .screen-size{max-height:800px} }。 */
.far-stage {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	touch-action: pan-y;
	cursor: grab;
}

.far-stage.is-drag { cursor: grabbing; }

.far-track {
	display: flex;
	will-change: transform;
}

.far-scene {
	position: relative;
	flex: none;
	/* ⚠️ 跟 PHP 的 SCENE_W 綁在一起，改一邊一定要改另一邊。 */
	width: 1700px;
	/* ⚠️ 不要寫 `min(100vh, 600px)`。手機視窗約 980 高，那樣場景只用中間 600px，
	   上下各空一大塊，物件被壓成一條帶子（2026-09-08 手機截圖就是這個）。
	   參考站的原始 CSS 是 `height:900px!important` —— 沒有 600 這個上限。
	   用 dvh 是因為手機的網址列會伸縮，vh 會在捲動時跳動。 */
	height: min(100dvh, 900px);
}

/* ── 熱點 ───────────────────────────────────────────────────────── */
.far-hot {
	position: absolute;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
}

button.far-hot { cursor: pointer; }

.far-art {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* 真素材是 WebP 去背圖。高度由自己的比例決定，不要被 SVG 的 1:1 綁住。 */
img.far-art {
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;   /* 拖曳房間時不要變成「拖圖片」 */
}

/* 物件離地。背景 18 秒會循環過白與 #fdff00，在那兩段玻璃杯、透明包材、
   淺色杯子的最強對比只有 1.5–1.9:1 —— 整個物件糊進背景裡。

   ⚠️ 單一層柔陰影沒有用：實測 `0 8px 12px / .30` 只把最低對比拉高 0.03。
   有效的是「貼身那一層」，它等於一圈很窄的暗邊。兩層一起最低 2.01:1。
   數值是掃出來的，不要憑感覺調淡。 */
img.far-art,
svg.far-art,
.far-hot--3d {
	filter:
		drop-shadow(0 1px 3px rgba(0, 0, 0, .55))
		drop-shadow(0 8px 12px rgba(0, 0, 0, .30));
}

.far-b { fill: #0a0a0a; }
.far-p { fill: #ffffff; opacity: .9; }


/* ── index 覆蓋層 ───────────────────────────────────────────────────
   版面骨架來自參考站 star-corner `?section=index`（分類直排欄 + 內容面板
   的 bento），**顏色是我們自己政策頁的反相**。

   ⚠️ 抄版型時先量自己站上已經在跑的東西。2026-09-08 這一格改了四次：
   照抄 starface 的 #fdff00 + 40px 圓角 + 5px 縫 → 白底描邊 → 政策頁同款
   → 最後定案「政策頁反過來」。量到的政策頁（/order-returns-and-exchanges/）是：

       body            rgb(0, 0, 0)          ← 黑底
       .fdl__head      rgb(255, 255, 255)    ← 白面板，border-width 0
       文字             rgb(0, 0, 0)          ← 黑字
       圓角 26px、縫 3px（margin 做的，不是 gap）

   index 是它的反相：**白底、黑面板、白字**。圓角 26px 與縫 3px 照抄不變 ——
   反相只反顏色，不動尺寸。 */
.far-ix {
	position: fixed;
	inset: 0;
	z-index: 11;
	background: #fff;
	border: 0;
	padding: 3px;
	opacity: 0;
	transform: scale(.98);
	transition: opacity .35s ease-out, transform .35s ease-out;
}

.far-ix.is-open { opacity: 1; transform: scale(1); }

.far-ix__grid {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	height: 100%;
}

.far-ix__bar {
	position: relative;
	flex: 0 0 auto;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	border-radius: 26px;
	color: #fff;
	font-size: clamp(22px, 1.7vw, 40px);
	font-weight: 900;
}

.far-ix__close {
	position: absolute;
	top: 50%;
	right: 26px;
	transform: translateY(-50%);
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	font-size: clamp(18px, 1.3vw, 30px);
	line-height: 1;
	cursor: pointer;
}

.far-ix__body {
	flex: 1 1 auto;
	display: flex;
	gap: 3px;
	min-height: 0;   /* 沒有這行，內容多的那一欄會把 flex 撐破 */
}

.far-ix__side {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 0;
}

.far-ix__g {
	display: flex;
	gap: 3px;
	min-height: 0;
}

.far-ix__g--main { flex: 1 1 0; }
.far-ix__side .far-ix__g { flex: 1 1 0; }

.far-ix__rail {
	position: relative;
	flex: 0 0 clamp(52px, 4.4vw, 104px);
	margin: 0;
	background: #000;
	border-radius: 26px;
	color: #fff;
}

/* ⚠️ 直排標題不能用 `rotate(-90deg)` —— 參考站是英文，躺著還讀得出來；
   中文躺著就是躺著。要用 writing-mode 讓字正立、由上往下排。 */
.far-ix__rail span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: .12em;
	white-space: nowrap;
	font-size: clamp(20px, 1.5vw, 34px);
	font-weight: 900;
}

.far-ix__list {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	overflow: auto;
	padding: clamp(18px, 1.6vw, 40px) clamp(24px, 2.4vw, 60px);
	background: #000;
	border-radius: 26px;
}

.far-ix__list ul { margin: 0; padding: 0; list-style: none; width: 100%; }
.far-ix__list--2 ul { columns: 2; column-gap: 44px; }
.far-ix__list li { break-inside: avoid; }

.far-ix__list a,
.far-ix__list button {
	display: inline-block;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	font-size: clamp(17px, 1.15vw, 26px);
	line-height: 1.9;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.far-ix__list a:hover,
.far-ix__list button:hover { text-decoration-thickness: 3px; }

/* 手機：直排標題欄轉回橫的，整片改成可捲動，不再撐滿一屏。 */
@media (max-width: 799px) {
	.far-ix { padding: 4px; overflow: auto; }
	.far-ix__grid { height: auto; min-height: 100%; }
	.far-ix__bar { height: 52px; font-size: 22px; }
	.far-ix__close { right: 18px; }
	.far-ix__body { flex-direction: column; }
	.far-ix__g { flex-direction: column; }
	.far-ix__rail { flex: 0 0 52px; }
	.far-ix__rail span {
		writing-mode: horizontal-tb;
		letter-spacing: .04em;
		font-size: 20px;
	}
	.far-ix__list { padding: 16px 24px; }
	.far-ix__list--2 ul { columns: 1; }
}

/* ── 待機動作 ──────────────────────────────────────────────────
   參考站那 14 格**沒有一個是靜止的**：8 個是去背影片（autoplay muted loop，
   物件本身在動）、3 個是 three.js 每幀 rotation.y += 0.002、2 個是 PNG 掛
   `rotateY` 的 CSS 循環、最後一個是影片再疊一層 CSS 動畫。

   我們沒有去背影片，所以改用四種「物件浮在房間裡」的動作。品牌就叫 FLOAT，
   東西浮著是對的。秒數與負延遲在 PHP 逐格指定（OBJECTS 的 dur／delay），
   全部互質一點，才不會整排一起上下。

   動畫掛在 `.far-art`（圖本身），不掛在 `.far-hot` ——
   參考站也是掛在內層的 img／canvas 包裝上，所以黃色標籤不會跟著晃。
   全部只動 transform，走合成器，不會觸發 layout。 */
.far-m {
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

/* 幅度是量出來調的，不是憑感覺：第一版 turn 只有 ±9° rotateY，
   平面圖的寬度只變 1.2%（317→320px），等於看不出來。參考站的物件是影片、
   本身就有明顯的內部動作，我們用靜態去背圖要追上，幅度必須給足 ——
   位移 20px 上下、旋轉 3–4 度，才會讀成「浮著」而不是「沒動」。 */

/* 浮：上下＋左右一點點。左右那一點會讓它跟等速漂移的底層有速度差，
   看起來就不是整排一起被拉著走。 */
@keyframes far-m-float-a {
	from { transform: translate(-5px, 9px); }
	to   { transform: translate(5px, -14px); }
}

/* 浮＋轉：上下的同時歪一點，比純上下有生氣。
   ⚠️ 只給**平面剪影／沒有透視的去背圖**。有真透視的算圖（禁忌撲克那顆盒子）
      不能用這支 —— 它自己的立邊是垂直的、有明確的落地平面，
      2D 再轉 3 度會讓那個平面一起歪，讀起來是盒子要倒了。那種請用 float-a。
      同理 sway 與 turn（都含 rotate）也不給算圖用。 */
@keyframes far-m-float-b {
	from { transform: translate(4px, 8px) rotate(-2.6deg); }
	to   { transform: translate(-4px, -13px) rotate(3deg); }
}

/* 擺：以旋轉為主，給躺著的東西（說明書、卡牌）。 */
@keyframes far-m-sway {
	from { transform: rotate(-3.6deg) translateY(5px); }
	to   { transform: rotate(4deg) translateY(-7px); }
}

/* 轉：給等角視圖的盒子。單純 rotateY 在平面圖上幾乎看不出來，
   所以疊上位移與微旋轉，讀起來才像盒子在空中慢慢翻。 */
@keyframes far-m-turn {
	from { transform: perspective(620px) rotateY(-16deg) rotate(-2deg) translateY(8px); }
	to   { transform: perspective(620px) rotateY(16deg) rotate(2.2deg) translateY(-12px); }
}

/* 呼吸：只縮放＋上下。給玻璃杯這種線稿，轉起來會怪。 */
@keyframes far-m-breathe {
	from { transform: scale(.94) translateY(7px); }
	to   { transform: scale(1.07) translateY(-9px); }
}

/* 平面星星用 rotateY 轉到側面 —— 這兩支是參考站原本就有的
   `.animate-star` / `.animate-star-2`，秒數照抄。 */
@keyframes far-m-spin-a {
	0%   { transform: rotateY(0); }
	50%  { transform: rotateY(360deg); }
	100% { transform: rotateY(1deg); }
}

@keyframes far-m-spin-b {
	0%   { transform: rotateY(78deg); }
	50%  { transform: rotateY(258deg); }
	100% { transform: rotateY(78deg); }
}

/* 參考站的 bounceS。 */
@keyframes far-m-bounce {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(-10px) scale(1.05); }
	100% { transform: translateY(0); }
}

.far-m--float-a { animation-name: far-m-float-a; }
.far-m--float-b { animation-name: far-m-float-b; }
.far-m--sway    { animation-name: far-m-sway; }
.far-m--turn    { animation-name: far-m-turn; }
.far-m--breathe { animation-name: far-m-breathe; }

/* 這三支是完整循環、不要 alternate（照參考站的寫法） */
.far-m--spin-a,
.far-m--spin-b,
.far-m--bounce { animation-direction: normal; }

.far-m--spin-a { animation-name: far-m-spin-a; animation-timing-function: linear; }
.far-m--spin-b { animation-name: far-m-spin-b; animation-timing-function: linear; }
.far-m--bounce { animation-name: far-m-bounce; }

/* ── 真 3D 盒（泥醉撲克）──────────────────────────────────────────
   房間裡其他 13 格都是去背平面圖，只有這一格是**真的有厚度的盒子**：
   六個面各自 translateZ 出去，父層 preserve-3d，轉起來看得到盒側。
   來源是 `Downloads/FLOAT_Drunk_Poker_3D_V1/index.html`（老闆的 3D 母版），
   那份是滿版展示頁，這裡只把「盒子本體」抽出來塞進房間的熱點裡。

   同一份母版還附了 GLB 模型與 2MB 的 turntable.gif，兩個都沒用 ——
   GLB 要 model-viewer／three.js（母版自己的 index.html 也沒用它，是 CSS 3D），
   GIF 是 2MB。記憶 floatselect-no-site-burden：功能不能拖累網站效能。
   這裡只多下載一張 15KB 的正面貼圖，其餘五個面是漸層，零依賴。

   尺寸不是憑感覺，是實體盒的 65 × 90 × 20 mm：
   寬 w → 高 w × 90/65、厚 w × 20/65。厚度算好後由 PHP 寫進 --far-d（px），
   因為 translateZ() 不吃百分比。 */
.far-box3d {
	position: relative;
	width: 100%;
	/* 一盒一個比例，由 PHP 依 OBJECTS 的 mm 算出來寫進 --far-ar
	   （泥醉撲克 65/90、禁忌撲克 63/88）。外層只給寬度，高度靠這個撐。 */
	aspect-ratio: var(--far-ar, 65 / 90);
	perspective: 1050px;
	pointer-events: none;   /* 跟 img.far-art 一樣：拖房間時不要卡在盒子上 */
}

.far-box3d__inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	will-change: transform;
}

.far-box3d__face {
	position: absolute;
	overflow: hidden;
	backface-visibility: hidden;
	background-color: #08090a;
	border: 1px solid rgba(200, 225, 238, .13);
	box-shadow: inset 0 0 18px rgba(255, 255, 255, .025);
}

/* 正／背：整片，等於盒面 */
.far-box3d__front,
.far-box3d__back { inset: 0; border-radius: 5px; }

.far-box3d__front {
	transform: translateZ(calc(var(--far-d) / 2));
	background-image: var(--far-face);
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow:
		inset 0 0 22px rgba(0, 0, 0, .20),
		inset 2px 0 2px rgba(190, 222, 238, .07),
		inset -2px 0 3px rgba(0, 0, 0, .45);
}

.far-box3d__back {
	transform: rotateY(180deg) translateZ(calc(var(--far-d) / 2));
	background: linear-gradient(145deg, #101215, #050607 70%);
}

/* 左右側：寬 = 厚度，置中後往外推半個盒寬 */
.far-box3d__right,
.far-box3d__left {
	top: 0;
	bottom: 0;
	left: calc(50% - var(--far-d) / 2);
	width: var(--far-d);
	border-radius: 3px;
}

/* 有側面貼圖就用貼圖（禁忌撲克那包有給，看得到書背上的拇指凹槽），
   沒有就退回這兩道漸層（泥醉撲克）。var() 的 fallback 剛好就是「沒宣告時用它」，
   所以 PHP 只在有貼圖時才寫 --far-side，不必再多一個 class。 */
.far-box3d__right,
.far-box3d__left { background-size: 100% 100%; background-repeat: no-repeat; }

.far-box3d__right {
	transform: rotateY(90deg) translateZ(calc(var(--far-w) / 2));
	background-image: var(--far-side, linear-gradient(90deg, #111419, #030405 76%));
}

.far-box3d__left {
	transform: rotateY(-90deg) translateZ(calc(var(--far-w) / 2));
	background-image: var(--far-side, linear-gradient(90deg, #030405, #14181d));
}

/* 上下面：高 = 厚度 */
.far-box3d__top,
.far-box3d__bottom {
	left: 0;
	right: 0;
	top: calc(50% - var(--far-d) / 2);
	height: var(--far-d);
	border-radius: 4px;
}

.far-box3d__top    { transform: rotateX(90deg)  translateZ(calc(var(--far-h) / 2)); background: linear-gradient(#171b20, #090a0c); }
.far-box3d__bottom { transform: rotateX(-90deg) translateZ(calc(var(--far-h) / 2)); background: #040506; }

/* 3D 版的「轉」。平面圖那支 far-m-turn 是 perspective() 寫在 transform 裡、
   幅度只有 ±16°；真盒子可以轉更多，轉到看得見盒側才有意義（母版停在 −17°）。
   ⚠️ 這支不能疊 perspective()：透視由 .far-box3d 的 perspective 屬性給，
   寫在 transform 裡會把子元素壓平，六個面就變回一張紙。 */
@keyframes far-m-turn3d {
	from { transform: rotateX(-4deg)  rotateY(-30deg) rotateZ(-2deg)   translateY(8px); }
	to   { transform: rotateX(-13deg) rotateY(24deg)  rotateZ(2.2deg)  translateY(-12px); }
}

.far-m--turn3d { animation-name: far-m-turn3d; }

/* ── 旋轉的黃色標籤 ────────────────────────────────────────────────
   原站：bg-yellow border-2 border-black · font-black · 14px/16px ·
   p-2 px-6 · 桌機 opacity-0 → group-hover:opacity-100 duration-300 ·
   手機常駐。角度從 −65° 到 +12°，沒有一個是正的。 */
.far-tag {
	position: absolute;
	z-index: 2;
	white-space: nowrap;
	background: #fdff00;
	color: #000;
	border: 2px solid #000;
	font-size: 14px;
	line-height: 16px;
	font-weight: 900;
	padding: 8px 24px;
	opacity: 1;
	transition: opacity .3s;
	pointer-events: none;
}

@media (min-width: 800px) {
	.far-logo { top: 24px; left: 40px; }
	.far-logo__chip--a { font-size: 26px; padding: 8px 16px; }
	.far-logo__chip--b { font-size: 52px; padding: 8px 22px; margin: -9px 0 0 54px; }
	.far-logo__chip--m { width: 44px; height: 44px; padding: 7px; }
	.far-logo__say { margin: 11px 0 0 58px; font-size: 14px; }
	.far-cube__say { width: 230px; padding-top: 20px; font-size: 16px; line-height: 18px; }
	.far-cube__box { width: 100px; }
	.far-tag { opacity: 0; }
	.far-hot:hover .far-tag,
	.far-hot:focus-visible .far-tag { opacity: 1; }
}

/* ── 底色變深時，四個角要反白 ────────────────────────────────────
   參考站的循環只走白／螢光黃／桃紅／紫／水藍，永遠是淺底，所以他們的字
   一律黑色就夠了。我們的候選裡「深夜」會走到純黑、「三主色」會走到深寶藍，
   黑字會整個消失 —— 所以由 JS 量當下背景亮度，在 .far 上掛 is-dark。
   字標是黑色線稿圖，只能用 filter 反相；文字直接換色。 */
.far.is-dark .far-logo,
.far.is-dark .far-cube__say,
.far.is-dark .far-index,
.far.is-dark .far-foot { color: #fff; }

/* 貼紙本身不用管背景（黃底黑框不透明），只有下面兩行標語是純文字，
   深底時要翻白。 */
.far-logo, .far-cube__say, .far-index, .far-foot { transition: color .6s linear; }

/* ── 5/6. 右下 index、左下版權 ─────────────────────────────────────── */
.far-index,
.far-foot {
	position: fixed;
	bottom: 18px;
	z-index: 1;
	font-size: 13px;
	line-height: 1.4;
	color: #000;
}

.far-index {
	right: 20px;
	padding: 0;
	border: 0;
	background: none;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	font-weight: 700;
}

.far-foot {
	left: 20px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	pointer-events: none;
}

.far-foot__law { font-size: 11px; font-weight: 700; }

/* ── 彈窗 ──────────────────────────────────────────────────────────
   原站外殼：fixed w-screen h-dvh z-10 → bg-black border-[5px] border-black
   → 內面板 rounded-[40px]，進出場 scale .95↔1 ＋ opacity，.4s ease-out。 */
.far-modal {
	position: fixed;
	inset: 0;
	z-index: 10;
	width: 100vw;
	height: 100dvh;
	background: #000;
	border: 5px solid #000;
	padding: 18px;
	opacity: 0;
	transform: scale(.95);
	transition: opacity .4s ease-out, transform .4s ease-out;
}

.far-modal.is-open { opacity: 1; transform: scale(1); }

.far-modal__sheet {
	position: relative;
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 40px;
	overflow: auto;
}

.far-modal__close {
	position: absolute;
	top: 22px;
	right: 26px;
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
	padding: 8px 12px;
	border: 2px solid #000;
	background: #fdff00;
	cursor: pointer;
}

.far-modal__inner {
	max-width: 62ch;
	padding: clamp(40px, 8vw, 96px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.far-modal__eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	color: #666;
}

.far-modal__title { margin: 0; font-size: 34px; font-weight: 900; line-height: 1; }
.far-modal__body { margin: 0; font-size: 15px; line-height: 1.8; }

/* ── 密碼閘 ───────────────────────────────────────────────────────── */
.far-gate {
	max-width: 420px;
	margin: 18vh auto 0;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.far-gate__title { margin: 0; font-size: 20px; font-weight: 900; }
.far-gate input[type="password"] { padding: 8px 10px; border: 2px solid #000; }
.far-gate input[type="submit"] { padding: 8px 18px; border: 2px solid #000; background: #fdff00; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
	.far-bg, .far-m, .far-cube__box { animation: none !important; }
	.far-cube__say, .far-tag, .far-modal { transition: none !important; }
	/* 3D 盒要給一個靜止角度。停在 0° 會正對鏡頭、六個面看起來就是一張平面圖，
	   看不出有厚度 —— 用母版 index.html 的預設姿勢。 */
	.far-box3d__inner { transform: rotateX(-9deg) rotateY(-17deg) rotateZ(-2deg); }
}