/* ═══════════════════════════════════════════════════════════════════════
   Rever.si 字標（logo 候選共 10 款，.rs-logo--1 ~ --10）

   概念：「.」是一顆黑子，「i」的點是一顆白子。

   兩顆子都是 CSS 畫的圓，不是字型裡的標點，所以不論字型有沒有載到、
   哪個瀏覽器、幾倍螢幕，子的形狀都一樣。所有尺寸用 em，會跟著
   .logo h1 既有的 16~24px 斷點一起縮放；白子的高度用 ex（字型的 x 高）
   定位，換字型或退回系統字型時仍會落在 i 的豎筆正上方。
   ═══════════════════════════════════════════════════════════════════════ */
.rs-logo {
    --ink: #1f2d27;
    --disc: 0.28em;         /* 棋子直徑 */
    --iw: 0.32em;           /* i 佔的寬度 */
    --xh: 0.55em;           /* 豎筆高度（＝該字型的 x 高）*/
    --sw: 0.17em;           /* 豎筆粗細（＝該字型的筆畫粗細）*/
    --sr: 0;                /* 豎筆圓角 */
    --gap: 0.055em;         /* 白子與豎筆的距離 */
    display: inline-block;
    white-space: nowrap;
    line-height: 1.25;
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.rs-logo:hover { color: var(--ink); text-decoration: none; }

/* 給搜尋引擎與螢幕報讀器的真實文字；畫面上的字標另外標 aria-hidden */
.rs-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.rs-b, .rs-w {
    display: inline-block;
    width: var(--disc);
    height: var(--disc);
    border-radius: 50%;
    flex: none;
}
/* 黑子＝「.」：空的 inline-block 底邊就在基線上，正好是句點的位置 */
.rs-b {
    margin: 0 0.055em;
    background: #111;
    background: radial-gradient(circle at 34% 28%, #5a5a5a 0%, #1c1c1c 46%, #050505 100%);
    box-shadow: 0 0.03em 0.06em rgba(0, 0, 0, 0.35);
}
/* i 整個自己畫：豎筆是一個色塊、上面放白子。
   不用字型裡的 i —— 各字型的 x 高、豎筆位置都不同，子集化後瀏覽器回報的 ex 也不可靠，
   白子會對不準。自己畫就完全不受字型影響，字型沒載到時版面也不會跑掉。
   空的 inline-block 以底邊對齊基線，所以豎筆正好站在基線上。 */
.rs-i {
    display: inline-block;
    position: relative;
    width: var(--iw);
    height: calc(var(--xh) + var(--gap) + var(--disc));
}
.rs-i::before {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    width: var(--sw);
    margin-left: calc(var(--sw) / -2);
    height: var(--xh);
    background: currentColor;
    border-radius: var(--sr);
}
.rs-w {
    position: absolute;
    left: 50%; top: 0;
    margin-left: calc(var(--disc) / -2);
    background: #fff;
    background: radial-gradient(circle at 34% 28%, #ffffff 0%, #f5f5f3 48%, #d2d2cd 100%);
    /* 白底 header 上白子要靠一圈細邊才看得見 */
    box-shadow: 0 0 0 1px rgba(20, 40, 30, 0.38), 0 0.03em 0.07em rgba(0, 0, 0, 0.28);
}
/* 第 10 款：白子與黑子等大。
   邊線改畫在圓的「裡面」（inset），外徑才會和黑子一模一樣；淺色在白底上本來就會
   顯得比深色大一點（光滲錯覺），所以再把黑子的外陰影拿掉、兩顆都不外擴。 */
.rs-logo--10 .rs-w { box-shadow: inset 0 0 0 1px rgba(20, 40, 30, 0.45); }
.rs-logo--10 .rs-b { box-shadow: none; }

/* ── 1 Classic：幾何無襯線＋擬真棋子 ── */
.rs-logo--1 { font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-weight: 700; --xh: 0.558em; --sw: 0.171em; }

/* ── 2 Felt Green：棋盤綠 ── */
.rs-logo--2 { font-family: 'Outfit', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-weight: 800; --ink: #17694a; letter-spacing: 0; --xh: 0.489em; --sw: 0.174em; --iw: 0.29em; }

/* ── 3 Board Tile：「.si」落在一格綠色棋盤格上 ── */
.rs-logo--3 { font-family: 'Sora', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-weight: 700; --xh: 0.548em; --sw: 0.165em; }
.rs-logo--3 .rs-tile {
    display: inline-block;
    margin-left: 0.1em;
    padding: 0.02em 0.14em 0.02em 0.06em;
    border-radius: 0.2em;
    color: #fff;
    background: #1b8050;
    background: linear-gradient(160deg, #23935f, #177044);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}
.rs-logo--3 .rs-w { box-shadow: 0 0.03em 0.07em rgba(0, 0, 0, 0.4); }

/* ── 4 Frame Pill：整個字標放進棋盤外框色的膠囊 ── */
.rs-logo--4 {
    font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-weight: 800;
    --ink: #fff; --xh: 0.54em; --sw: 0.136em; --iw: 0.3em;
    padding: 0.2em 0.62em 0.22em;
    border-radius: 999px;
    background: #23372c;
    background: linear-gradient(160deg, #33503f, #22352b);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.rs-logo--4 .rs-b { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42); }
.rs-logo--4 .rs-w { box-shadow: 0 0.03em 0.07em rgba(0, 0, 0, 0.5); }

/* ── 5 Serif：襯線體，偏傳統棋具的氣質 ── */
.rs-logo--5 { font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: 0.005em; font-size: 1.08em; --iw: 0.3em; --xh: 0.495em; --sw: 0.125em; }
.rs-logo--5 .rs-i::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0.25em; margin-left: -0.125em; height: 0.035em; background: currentColor; }

/* ── 6 Lowercase Grotesk：全小寫、字距收緊 ── */
.rs-logo--6 { font-family: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-weight: 700; letter-spacing: -0.035em; --ink: #111917; --iw: 0.27em; --xh: 0.496em; --sw: 0.126em; }
.rs-logo--6 .rs-b { margin: 0 0.07em; }

/* ── 7 Site Blue：沿用現站主色藍的圓體 ── */
.rs-logo--7 { font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-weight: 900; --ink: #3498db; --disc: 0.29em; --iw: 0.3em; --xh: 0.501em; --sw: 0.178em; --sr: 0.09em; letter-spacing: 0; }

/* ── 8 Flat Minimal：細字＋平面棋子（黑實心、白空心）── */
.rs-logo--8 { font-family: 'Jost', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-weight: 400; letter-spacing: 0.06em; --ink: #16211c; --disc: 0.25em; --iw: 0.27em; --xh: 0.46em; --sw: 0.078em; font-size: 1.06em; }
.rs-logo--8 .rs-i { margin-right: 0.06em; }
.rs-logo--8 .rs-b { background: #16211c; box-shadow: none; }
.rs-logo--8 .rs-w { background: #fff; box-shadow: inset 0 0 0 0.055em #16211c; }

/* ── 9 Two-tone Flip：雙色，滑過時兩顆子翻面 ── */
.rs-logo--9 { font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-weight: 600; --xh: 0.548em; --sw: 0.15em; }
.rs-logo--9 .rs-si { color: #1b8050; }
@keyframes rs-flip-b {
    0%   { transform: rotateY(0); }
    50%  { transform: rotateY(90deg); background: #111; box-shadow: none; }
    51%  { transform: rotateY(90deg); background: #f5f5f3; }
    100% { transform: rotateY(180deg); background: radial-gradient(circle at 66% 28%, #fff 0%, #f5f5f3 48%, #d2d2cd 100%); box-shadow: 0 0 0 1px rgba(20, 40, 30, 0.38); }
}
@keyframes rs-flip-w {
    0%   { transform: rotateY(0); }
    50%  { transform: rotateY(90deg); background: #f5f5f3; }
    51%  { transform: rotateY(90deg); background: #111; }
    100% { transform: rotateY(180deg); background: radial-gradient(circle at 66% 28%, #5a5a5a 0%, #1c1c1c 46%, #050505 100%); box-shadow: 0 0.03em 0.06em rgba(0, 0, 0, 0.35); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .rs-logo--9:hover .rs-b { animation: rs-flip-b 0.45s ease forwards; }
    .rs-logo--9:hover .rs-w { animation: rs-flip-w 0.45s ease 0.08s forwards; }
}

/* ── 10 Mark + Wordmark：迷你棋盤圖示（初期配置四子）＋字標 ── */
.rs-logo--10 { font-family: 'Outfit', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; font-weight: 700; letter-spacing: 0; --xh: 0.489em; --sw: 0.155em; --iw: 0.28em; --disc: 0.26em; }
.rs-mark {
    display: inline-block;
    width: 1.12em; height: 1.12em;
    margin-right: 0.3em;
    vertical-align: -0.24em;
    border-radius: 0.24em;
    background-color: #1b8050;
    /* d4 白、e4 黑、d5 黑、e5 白 —— 和實際開局一樣 */
    background-image:
        radial-gradient(circle at 31% 31%, #fff 0, #fff 16.5%, rgba(255,255,255,0) 18.5%),
        radial-gradient(circle at 69% 31%, #111 0, #111 16.5%, rgba(17,17,17,0) 18.5%),
        radial-gradient(circle at 31% 69%, #111 0, #111 16.5%, rgba(17,17,17,0) 18.5%),
        radial-gradient(circle at 69% 69%, #fff 0, #fff 16.5%, rgba(255,255,255,0) 18.5%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}