/* ═════ 卡桌：紫檀桌面、織錦桌旗、青銅包角、油燈火光（2026-10 擬物改版）═════ * 材質圖由系列提供（series//board/），main.js 以 CSS 變數 --tbl-* 掛上；沒有的系列退回純色。 * 效能：大面積只用背景圖與 transform/opacity 動畫，不對多個元素用 filter。 */ :root { --bronze: #b08a3e; --bronze-hi: #e9cf8b; --bronze-lo: #5a4219; --wood: #2a120c; --silk-shadow: rgba(0,0,0,.55); } /* 桌面（所有畫面共用，選單也坐在同一張桌上） */ html { background: var(--wood); } /* 外面是青石桌（cover，不平鋪）；卡陣本身是一塊紫檀木板放在石上 */ html { background: #23272d; } body { background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(4,6,9,.7) 100%), var(--tbl-stone, none) center / cover no-repeat, #2a2e34; background-attachment: fixed; } #app { position: relative; isolation: isolate; background: linear-gradient(180deg, rgba(255,220,170,.05), transparent 30%, rgba(0,0,0,.18)), var(--tbl-wood, none) center top / 768px 768px repeat, var(--wood); box-shadow: inset 0 0 0 1px rgba(233,207,139,.55), inset 0 0 0 3px #3a1a0e, inset 0 0 0 4px rgba(176,138,62,.5), /* 細青銅包邊 */ inset 0 2px 0 5px rgba(255,210,170,.08), inset 0 -3px 0 5px rgba(0,0,0,.35), /* 木板斜面：上亮下暗 */ inset 0 0 40px rgba(0,0,0,.45), 0 2px 0 #1a0a05, 0 6px 0 #120703, 0 18px 30px rgba(0,0,0,.65), 0 40px 80px rgba(0,0,0,.5); } /* 板厚與投在石上的影子 */ @media (min-width: 600px) { #app { margin-top: 14px; margin-bottom: 30px; border-radius: 10px; min-height: calc(100dvh - 44px); } #app.board-screen { margin-top: 10px; margin-bottom: 0; height: calc(100dvh - 26px); } } #app > * { position: relative; z-index: 1; } /* 換頁時舊畫面的複本（main.js screenGhost）：蓋在原位淡出 */ #app.kz-ghost { position: fixed !important; margin: 0 !important; min-height: 0 !important; max-width: none; overflow: hidden; z-index: 5; pointer-events: none; } /* 青銅按鈕 */ .btn { background: linear-gradient(180deg, #4a3519, #2b1d0d); border: 1px solid var(--bronze); color: #f4e6c4; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,230,170,.35), inset 0 -2px 0 rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.5); transition: transform .12s, box-shadow .12s, filter .12s; text-shadow: 0 1px 0 #000; } .btn.primary { background: linear-gradient(180deg, #b0452f, #7a2716); border-color: #e2a35c; color: #fff4e0; } .btn.ghost { background: rgba(20,10,5,.35); } @media (hover: hover) { .btn:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-1px); } } .btn:not(:disabled):active { transform: translateY(1px) scale(.98); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); } .mute { position: fixed; z-index: 30; right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); width: 34px; height: 34px; border-radius: 50%; padding: 0; border: 1px solid var(--bronze); background: radial-gradient(circle at 40% 30%, #5b4320, #22160a); color: var(--bronze-hi); font-size: 15px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.6); } #app.board-screen .side.opp { padding-right: 42px; } /* 選單、牌組、結算：織錦面板＋青銅邊 */ .title h1 { color: var(--bronze-hi); text-shadow: 0 2px 0 #3a2208, 0 0 24px rgba(255,170,80,.35); } .overlay-card, .detail, .deck-pick .series, .factions > *, .panel { background: linear-gradient(rgba(28,14,8,.82), rgba(20,10,6,.9)), var(--tbl-sky, none) center / 256px; border: 1px solid var(--bronze) !important; box-shadow: inset 0 0 0 3px rgba(0,0,0,.35), inset 0 0 0 4px rgba(233,207,139,.25), 0 10px 30px rgba(0,0,0,.6); } .overlay { background: radial-gradient(circle, rgba(10,4,2,.55), rgba(10,4,2,.85)); } /* ── 棋盤 ── */ #app.board-screen .hand, #app.board-screen .selinfo, #app.board-screen .hint { z-index: 4; } #app.board-screen { padding-left: 14px; padding-right: 14px; } #app.board-screen::before { content: ''; position: absolute; inset: 7px 6px; border-radius: 6px; pointer-events: none; z-index: 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), inset 0 0 0 3px rgba(176,138,62,.35), inset 0 0 40px rgba(0,0,0,.5); } /* v37／v38 盒模型：.field 是一塊不透明織錦匣；排無縫堆疊，框線掛在匣上／排間單線。 * v38 根因：layout gap=0 仍見鬼縫——(1) 半透明 0 0 0 1px 描邊在 border:0 的匣緣把 #app 紫檀透出； * (2) .dock 透明，織錦底邊硬切到木紋＝一條「木紋線」。撤描邊；封邊畫在 .dock 偽元素上（見下）。 */ #app.board-screen .field { gap: 0; background: #160b06; /* 不透明墊底：亞像素髮絲也是マット，不是紫檀木紋 */ overflow: hidden; /* v74：四邊完整青銅框＋內陷陰影，像嵌進木桌；撤 v38 dock 封邊條（白線根因） */ border: 2px solid rgba(176,138,62,.7); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 2px 4px rgba(0,0,0,.45), 0 1px 0 rgba(255,220,160,.12); } #app.board-screen .row { position: relative; isolation: isolate; overflow: hidden; border-radius: 0; border: 0; border-bottom: 1px solid rgba(176,138,62,.4); padding: 4px; background-color: var(--row-c, #333); background-position: 0 50%; background-size: auto 100%; background-repeat: repeat-x; animation: none; box-shadow: inset 0 6px 10px -4px var(--silk-shadow), inset 0 -3px 6px -3px rgba(255,230,180,.18); transition: box-shadow .25s, border-color .25s; } #app.board-screen .field .row:last-child { border-bottom: 0; } /* 每排直接 background-image: var(--tbl-*)，零層巢狀（Safari 巢狀自訂屬性常整段失效） */ #app.board-screen .row[data-row="land"] { --row-c: #a7732a; background-image: var(--tbl-land); } #app.board-screen .row[data-row="water"] { --row-c: #303c4d; background-image: var(--tbl-water); } #app.board-screen .row[data-row="sky"] { --row-c: #d9d4c7; background-image: var(--tbl-sky); } /* 對手那邊離燈遠，壓暗；織錦邊緣暗、中間受光 */ #app.board-screen .row > .shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 160% at 50% 50%, transparent 40%, rgba(0,0,0,.42)), linear-gradient(180deg, rgba(255,220,160,.08), transparent 30%, rgba(0,0,0,.18)); } #app.board-screen .field.opp .row > .shade { background: radial-gradient(120% 160% at 50% 50%, rgba(0,0,0,.06) 35%, rgba(0,0,0,.32)), linear-gradient(180deg, rgba(0,0,0,.18), transparent 40%); } #app.board-screen .row.target { border-color: var(--bronze-hi); box-shadow: inset 0 0 0 2px var(--bronze-hi), inset 0 6px 10px -4px var(--silk-shadow), 0 0 18px 3px rgba(255,200,110,.55); cursor: default; } #app.board-screen .row.target > .shade { animation: breathe 1.3s ease-in-out infinite alternate; } @keyframes breathe { to { opacity: .45 } } #app.board-screen .row .row-label { position: relative; z-index: 2; width: 2.8rem; border: 0; gap: 2px; } #app.board-screen .row-name { font-size: .72rem; font-weight: 900; color: #f6e7c4; text-shadow: 0 1px 2px #000, 0 0 6px #000; letter-spacing: .1em; } #app.board-screen .row-units { position: relative; z-index: 2; gap: 5px; } /* 卡落在絲上：陰影＋布面微凹 */ #app.board-screen .row-units .tile { box-shadow: 0 2px 2px rgba(0,0,0,.45), 0 7px 10px -3px rgba(0,0,0,.55); } #app.board-screen .row-units .tile::after { content: ''; position: absolute; left: -12%; right: -12%; bottom: -14%; height: 26%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent); pointer-events: none; } .ripple { position: absolute; z-index: 1; width: 140px; height: 70px; margin: -35px 0 0 -70px; border-radius: 50%; pointer-events: none; border: 2px solid rgba(255,240,210,.45); box-shadow: 0 0 0 6px rgba(255,240,210,.12); animation: ripple .7s ease-out forwards; } @keyframes ripple { from { transform: scale(.25); opacity: 1 } to { transform: scale(1.4); opacity: 0 } } /* 青銅雲紋徽章：排分與總分 */ .row-score, .side-total { display: grid !important; place-items: center; background: var(--tbl-medal, radial-gradient(#c9a24f, #6b4d1c)) center / contain no-repeat !important; box-shadow: none !important; border-radius: 50%; color: #2a1a06 !important; font: 900 .95rem/1 "Noto Serif TC", serif !important; text-shadow: 0 1px 0 rgba(255,236,190,.6) !important; } .row-score { width: 2.1rem; height: 2.1rem; min-width: 0 !important; padding: 0 !important; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); } .row-score.lead { color: #5a0d02 !important; } .row-score.lead::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 10px 2px rgba(255,200,100,.55); pointer-events: none; } .side-total { position: relative; width: 2.8rem; height: 2.8rem; margin-left: auto; font-size: 1.2rem !important; filter: drop-shadow(0 3px 3px rgba(0,0,0,.6)); } .tick { animation: tick .45s cubic-bezier(.3,1.8,.5,1); } @keyframes tick { 0% { transform: scale(1) } 35% { transform: scale(1.3) rotate(-6deg) } 100% { transform: scale(1) } } /* 兩邊：青銅框領袖、玉璧命數 */ #app.board-screen .side { gap: .5rem; padding: .35rem .3rem; text-shadow: 0 1px 2px #000; } .portrait { position: relative; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 6px; overflow: hidden; padding: 0; border: 0; cursor: pointer; background: #2b2721; box-shadow: 0 0 0 2px #e2c47a, 0 0 0 4px #6b4d1c, 0 0 0 5px #2a1a06, 0 4px 10px rgba(0,0,0,.7); transition: transform .15s; } .portrait::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 8px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,240,200,.5); pointer-events: none; } .portrait .tile { position: absolute; inset: -18% -10% auto; width: 120%; height: auto; border: 0; border-radius: 0; pointer-events: none; } .portrait .tile-name, .portrait .tile-pow, .portrait .tile-ab { display: none; } .portrait .seal { position: absolute; right: 0; bottom: 0; font-size: .55rem; width: 1.3em; height: 1.3em; z-index: 2; } .portrait.used .tile { opacity: .45; } .side.active .portrait { box-shadow: 0 0 0 2px #fff0c0, 0 0 0 4px #8a6a2a, 0 0 16px 3px rgba(255,190,100,.6), 0 4px 10px rgba(0,0,0,.7); } @media (hover: hover) { .portrait:hover { transform: scale(1.06); } } .lives { display: flex; gap: 5px; } .lives i { width: 1.05rem; height: 1.05rem; border: 0; border-radius: 50%; display: block; background: radial-gradient(circle, transparent 25%, #22332c 27%, #2e4a3f 50%, #1d2e27 72%, transparent 74%); opacity: .55; } .lives i.on { opacity: 1; background: radial-gradient(circle at 40% 35%, transparent 23%, #d4f5e4 25%, #7cc8a8 38%, #3a8f70 60%, #1f5a45 72%, transparent 74%); filter: drop-shadow(0 0 4px rgba(120,210,170,.5)); } .lives i.lost { animation: shatter .7s ease-out; } @keyframes shatter { 0% { transform: scale(1.3) } 60% { transform: scale(.8) rotate(-12deg) } } /* 手牌：從桌沿拿起 */ #app.board-screen .hand { background: linear-gradient(180deg, transparent, rgba(0,0,0,.35)); } .hand .tile { transition: transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease; box-shadow: 0 3px 6px rgba(0,0,0,.55); } @media (hover: hover) { .hand .tile:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 12px 16px rgba(0,0,0,.5); } } .hand .tile:active { transform: translateY(-4px) scale(.97); } .hand .tile.sel { transform: translateY(-14px) scale(1.06); box-shadow: 0 0 0 2px var(--bronze-hi), 0 16px 22px rgba(0,0,0,.6); } .tile.fresh { animation: none; } .tile.flying { z-index: 50; position: relative; } /* 回合結算：朱印 */ .overlay-card { position: relative; overflow: hidden; } .overlay-card > * { position: relative; z-index: 1; } .overlay-card.win::before { content: ''; position: absolute; inset: -60%; z-index: 0; background: repeating-conic-gradient(rgba(255,210,130,.13) 0 8deg, transparent 8deg 22deg); animation: rays 14s linear infinite; } .stamp { display: inline-grid; place-items: center; width: 4.6rem; height: 4.6rem; margin: .3rem auto .7rem; border-radius: 10px; color: #fff1e0; font-size: 2.4rem; font-weight: 900; background: radial-gradient(circle at 40% 35%, #d2462c, #8e1f10); box-shadow: inset 0 0 0 3px rgba(255,220,200,.55), inset 0 0 12px rgba(60,0,0,.6), 0 3px 8px rgba(0,0,0,.5); transform: rotate(-8deg); animation: stamp .5s cubic-bezier(.3,1.6,.5,1) both; } .overlay-card.lose .stamp { background: radial-gradient(circle at 40% 35%, #6b6255, #3a332a); } @keyframes stamp { 0% { transform: scale(2.6) rotate(-22deg); opacity: 0 } 70% { transform: scale(.94) rotate(-7deg); opacity: 1 } 100% { transform: rotate(-8deg) } } @keyframes rays { to { transform: rotate(360deg) } } /* 終局卷軸（main.js ceremony）：兩根軸木夾著結算卡，展開與蓋印由 WAAPI 演 */ .scroll-wrap { position: relative; width: min(420px, 100%); } .scroll-wrap > .overlay-card { width: 100%; } .kz-rod { position: absolute; top: -10px; bottom: -10px; width: 14px; z-index: 2; border-radius: 7px; pointer-events: none; background: linear-gradient(90deg, #2a1408, #7a4a24 35%, #b07a45 50%, #6a3c1c 70%, #241006); box-shadow: 0 4px 10px rgba(0,0,0,.6), inset 0 10px 0 -6px #c9a24f, inset 0 -10px 0 -6px #c9a24f; } .kz-rod.l { left: -7px; } .kz-rod.r { right: -7px; } .overlay-card.ceremony .stamp { animation: none; } .overlay-card > .ink-dot { position: absolute; z-index: 1; border-radius: 50% 45% 55% 50%; pointer-events: none; background: radial-gradient(circle at 40% 40%, #c23a22, #7e1a0c 70%, rgba(126,26,12,0)); } .overlay-card > .ink-dot.gray { background: radial-gradient(circle at 40% 40%, #5a5248, #2e2822 70%, rgba(46,40,34,0)); } @media (min-width: 1000px) { #app.board-screen { max-width: 960px; } } @media (min-width: 700px) and (min-height: 700px) { .portrait { width: 3.6rem; height: 3.6rem; } .row-score { width: 2.6rem; height: 2.6rem; font-size: 1.1rem !important; } .side-total { width: 3.4rem; height: 3.4rem; font-size: 1.45rem !important; } #app.board-screen .row .row-label { width: 3.4rem; } #app.board-screen .row-name { font-size: .9rem; } .lives i { width: 1.3rem; height: 1.3rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .overlay-card.win::before, .row.wx > .fx, .row.wx > .fx::before, .row.wx > .fx::after { animation: none !important; } .ripple { display: none; } } /* ═════ v2：真織錦桌旗（整幅 cover，不平鋪）、布料光澤、弱水界河、天象粒子 ═════ */ /* v3：織錦按原圖比例橫向無縫平鋪（每張是一整條花紋帶，高＝排高），疊層極淡，讓布料本身說話 */ /* 織錦在 .row background-image；::before 僅天象 filter 掛點。天排勿對整排設 filter */ #app.board-screen .row::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: none; transition: filter .8s; } #app.board-screen .row[data-row="sky"] .row-label { background: linear-gradient(90deg, rgba(20,22,30,.55), rgba(20,22,30,.25) 70%, transparent); border-radius: 3px; } #app.board-screen .row[data-row="sky"] .row-name { color: #f4f6fa; } #app.board-screen .row > .shade { background: linear-gradient(180deg, rgba(0,0,0,.14), transparent 18%, transparent 82%, rgba(0,0,0,.16)) !important; box-shadow: inset 0 0 8px rgba(0,0,0,.4); } #app.board-screen .field.opp .row > .shade { background-color: rgba(0,0,0,.08) !important; } /* v31：完全拿掉 shade::after 高光層（mix-blend／動畫是 Safari 天排閃爍主因） */ #app.board-screen .row > .shade::after { content: none !important; display: none !important; animation: none !important; } @keyframes gust { 0%, 100% { opacity: .3 } 30% { opacity: .9 } 45% { opacity: .45 } 60% { opacity: .8 } } /* 天象共用層 */ .row > .fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .row > canvas.wxc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .row-wx { position: relative; z-index: 3; font-size: .58rem; padding: 1px 4px; border-radius: 3px; background: rgba(10,5,2,.72); color: #f6dfb0; white-space: nowrap; } .row.wx .tile:not(.gold) .tile-pow { box-shadow: 0 0 0 1.5px #9cc2ee; } /* 大旱：褪色變暖、裂紋蔓延、熱浪、日光脈動；降下時一道熱浪掃過 */ #app.board-screen .row.wx-drought::before { filter: saturate(.35) sepia(.45) brightness(.95) contrast(1.08); } .row.wx-drought > .fx { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='110'%3E%3Cg fill='none' stroke='%23240c02' stroke-opacity='.7' stroke-linecap='round'%3E%3Cpath stroke-width='1.6' d='M0 52l26 7 18-15 25 10 9 25 32-5 22 18 30-9 20 12 38-6M69 54l8-36 22-16M112 76l26-38 34-8 26 13M138 38l-10-38M44 44l-13-44M80 80l-7 30M172 30l5 48-17 32M198 43l22-8'/%3E%3Cpath stroke-width='.8' stroke-opacity='.5' d='M20 58l-6 22M100 18l14 12M150 70l14 16M60 30l-14 6M186 76l14 24'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 110px, linear-gradient(0deg, rgba(150,70,20,.4), rgba(210,130,50,.12)); mix-blend-mode: multiply; } .row.wx-drought > .fx::before { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 160% at 82% -30%, rgba(255,190,90,.75), rgba(255,140,40,.25) 40%, transparent 70%); mix-blend-mode: screen; animation: glare 4s ease-in-out infinite; } .row.wx-drought > .fx::after { content: ''; position: absolute; inset: -20% 0; background: repeating-linear-gradient(0deg, rgba(255,220,160,.12) 0 2px, transparent 2px 9px); mix-blend-mode: screen; animation: haze 1.3s ease-in-out infinite alternate; } @keyframes glare { 50% { opacity: .45 } } @keyframes haze { from { transform: translateY(0) skewX(0) } to { transform: translateY(-7px) skewX(2deg) scaleY(1.05) } } .row.wx-drought.cast > .fx { animation: crack 1.4s ease-out both; } @keyframes crack { from { clip-path: circle(0% at 50% 55%) } to { clip-path: circle(80% at 50% 55%) } } .row.wx-drought.cast::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,170,60,.0) 30%, rgba(255,200,110,.75) 48%, rgba(255,120,30,.4) 55%, transparent 70%) 0 0 / 250% 100% no-repeat; animation: sweepx 1s ease-out both; mix-blend-mode: screen; } /* 大水：水漫上桌旗、浪頭、焦散光紋、濕暗光澤；降下時浪花濺起 */ #app.board-screen .row.wx-flood::before { filter: brightness(.68) saturate(1.25) hue-rotate(-8deg); } .row.wx-flood > .fx { background: linear-gradient(180deg, transparent 14%, rgba(70,140,190,.32) 26%, rgba(30,90,150,.5)); } .row.wx-flood > .fx::before { content: ''; position: absolute; left: 0; right: 0; top: 6%; height: 26%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='30'%3E%3Cpath d='M0 16 Q20 4 40 16 T80 16 T120 16 T160 16 V30 H0Z' fill='%2378b4dc' fill-opacity='.35'/%3E%3Cpath d='M0 16 Q20 4 40 16 T80 16 T120 16 T160 16' fill='none' stroke='%23e6f6ff' stroke-opacity='.7' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 160px 100% repeat-x; animation: tide2 3.5s linear infinite; } .row.wx-flood > .fx::after { content: ''; position: absolute; inset: 0 -50%; mix-blend-mode: screen; opacity: .55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='90'%3E%3Cg fill='none' stroke='%23bfeaff' stroke-opacity='.45' stroke-width='1.3'%3E%3Cpath d='M5 20c15-12 30 8 45-2s25-10 40 4 30 2 45-6M0 55c18-10 26 10 44 0s30-12 46 2 28 4 50-4M10 82c14-6 30 6 44-2s28-6 40 2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 140px 90px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='70'%3E%3Cg fill='none' stroke='%23d8f3ff' stroke-opacity='.3' stroke-width='1'%3E%3Cpath d='M0 30c12-9 24 6 36-1s22-8 34 3 24 2 40-5M8 60c12-5 22 6 34-1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 110px 70px; animation: caustic 7s linear infinite; } @keyframes tide2 { to { background-position: 160px 0 } } @keyframes caustic { to { background-position: 140px 90px, -110px 70px } } .row.wx-flood.cast > .fx { animation: rise 1.1s cubic-bezier(.2,.8,.3,1) both; } @keyframes rise { from { transform: translateY(100%) } to { transform: none } } .row.wx-flood.cast::after { content: ''; position: absolute; left: 50%; top: 40%; width: 220px; height: 110px; margin: -55px -110px; z-index: 4; pointer-events: none; border-radius: 50%; border: 3px solid rgba(220,245,255,.8); box-shadow: 0 0 0 8px rgba(160,210,240,.25), inset 0 0 20px rgba(220,245,255,.4); animation: splash .9s ease-out both; } @keyframes splash { from { transform: scale(.1); opacity: 1 } to { transform: scale(2.2); opacity: 0 } } /* 風雨：烏雲壓暗、霧氣流動；雨滴在 canvas；閃電照亮整張桌子 */ #app.board-screen .row.wx-storm::before { filter: brightness(.5) saturate(.6) contrast(1.1); } .row.wx-storm > .fx { background: linear-gradient(180deg, rgba(14,20,36,.6), rgba(40,52,80,.25)); } .row.wx-storm > .fx::before { content: ''; position: absolute; inset: 0 -100% 0 0; opacity: .5; background: radial-gradient(30% 70% at 20% 70%, rgba(200,215,235,.35), transparent 70%), radial-gradient(25% 60% at 55% 40%, rgba(200,215,235,.28), transparent 70%), radial-gradient(30% 70% at 85% 75%, rgba(200,215,235,.3), transparent 70%); animation: mist 14s linear infinite; } @keyframes mist { to { transform: translateX(-50%) } } .row.wx-storm.bolt > .fx { animation: boltrow .5s ease-out; } @keyframes boltrow { 0%, 20% { background-color: rgba(220,230,255,.6) } 10%, 40% { background-color: rgba(220,230,255,.1) } 30% { background-color: rgba(230,240,255,.45) } } .flash { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: radial-gradient(80% 60% at 50% 30%, rgba(230,238,255,.75), rgba(180,200,255,.25)); animation: flash .55s ease-out both; } @keyframes flash { 0% { opacity: 0 } 8% { opacity: 1 } 18% { opacity: .2 } 28% { opacity: .8 } 100% { opacity: 0 } } /* 散天象：一道金光從左掃到右 */ .field.sweep::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,220,130,.0) 38%, rgba(255,230,160,.85) 48%, rgba(255,200,90,.35) 54%, transparent 64%) 0 0 / 250% 100% no-repeat; mix-blend-mode: screen; animation: sweepx 1.1s ease-in-out both; } .field { position: relative; } @keyframes sweepx { from { background-position: 120% 0 } to { background-position: -40% 0 } } /* ═ 弱水：兩軍之間的界河（鴻毛不浮） ═ */ #app.board-screen .mid { position: relative; overflow: hidden; margin: 6px -6px; padding: 0 12px; height: 46px; --rh: 46; border-radius: 0; color: #e6eefc; background: var(--tbl-river, #0d1622) 0 50% / auto 100% repeat-x, #0b1420; animation: flow 38s linear infinite; box-shadow: inset 0 6px 8px -4px rgba(0,0,0,.9), inset 0 -6px 8px -4px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.6), 0 -1px 0 rgba(176,138,62,.5), 0 1px 0 rgba(176,138,62,.5); text-shadow: 0 1px 3px #000, 0 0 8px #000; transition: box-shadow 1s; } @keyframes flow { to { background-position: calc(-615px * var(--rh, 40) / 190) 50%, 0 0 } } #app.board-screen .mid::before { content: ''; position: absolute; inset: 0 -50%; pointer-events: none; z-index: 0; mix-blend-mode: screen; background: linear-gradient(90deg, transparent 20%, rgba(150,200,255,.12) 35%, transparent 45%, rgba(170,210,255,.1) 70%, transparent 80%); animation: flow2 11s linear infinite; } @keyframes flow2 { from { transform: translateX(-25%) } to { transform: translateX(25%) } } #app.board-screen .mid::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1.2s; } #app.board-screen .mid.lead-me::after { opacity: 1; background: linear-gradient(0deg, rgba(120,190,255,.35), transparent 70%); } #app.board-screen .mid.lead-opp::after { opacity: 1; background: linear-gradient(180deg, rgba(120,190,255,.35), transparent 70%); } #app.board-screen .mid > * { position: relative; z-index: 2; } #app.board-screen .mid .round { color: #cfe0ff; } #app.board-screen .mid .logline { opacity: .92; } #app.board-screen .mid .turn { padding: 1px 8px; border-radius: 99px; background: rgba(5,10,20,.55); } #app.board-screen .mid .turn.mine { background: linear-gradient(180deg, #b0452f, #7a2716); color: #fff3df; box-shadow: 0 0 10px rgba(255,140,80,.5); animation: breathe2 1.6s ease-in-out infinite alternate; } @keyframes breathe2 { to { box-shadow: 0 0 2px rgba(255,140,80,.2) } } .feather { position: absolute !important; z-index: 1 !important; top: 30%; left: -40px; width: 30px; height: 12px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Cpath d='M2 12C14 2 40 0 58 10 40 14 18 22 2 12Z' fill='%23eef2f8' fill-opacity='.85'/%3E%3Cpath d='M2 12C20 11 40 10 58 10' stroke='%23a9b6c9' stroke-width='1.2' fill='none'/%3E%3Cpath d='M14 12l4-5M22 11l5-6M30 11l6-6M38 10l6-5M18 12l3 5M26 12l4 6M34 11l5 6M42 11l5 4' stroke='%23c9d3e2' stroke-width='.7'/%3E%3C/svg%3E") center / contain no-repeat; animation: featherfloat 9s cubic-bezier(.4,0,.6,1) forwards; } @keyframes featherfloat { 0% { transform: translate(0, 0) rotate(-8deg); opacity: 0 } 10% { opacity: .95 } 45% { transform: translate(calc(var(--fw) * .45), -4px) rotate(6deg); opacity: .95 } 70% { transform: translate(calc(var(--fw) * .6), 6px) rotate(18deg) scale(.8); opacity: .6 } 100% { transform: translate(calc(var(--fw) * .68), 14px) rotate(30deg) scale(.45); opacity: 0 } } @media (min-width: 700px) and (min-height: 700px) { #app.board-screen .mid { height: 54px; --rh: 54; } } @media (prefers-reduced-motion: reduce) { .row > canvas.wxc, .feather, .flash, .field.sweep::after, .row.cast::after { display: none !important; } #app.board-screen .mid, #app.board-screen .mid::before, .row > .shade::after, .row.wx > .fx, .row.wx > .fx::before, .row.wx > .fx::after { animation: none !important; } } /* v4：石桌上的木板 */ body { display: flow-root; } /* 防止 #app 的 margin 外溢，露出 html 底色 */ /* ═ v5：弱水只是一條安靜的河；資訊放在中央的漆木青銅牌上 ═ */ #app.board-screen .mid { height: 50px; --rh: 50; padding: 0; display: flex; align-items: center; justify-content: center; overflow: visible; background: linear-gradient(rgba(8,12,20,.5), rgba(8,12,20,.5)), var(--tbl-river, #0d1622) 0 50% / auto 100% repeat-x, #0b1420; animation: flow 90s steps(180) infinite; } /* 每秒只流 ~2px：分 180 格走，每秒重繪 2 次而非 60 次 */ #app.board-screen .mid::before { opacity: .5; animation-duration: 24s; } #app.board-screen .mid.lead-me::after, #app.board-screen .mid.lead-opp::after { opacity: .55; } .plaque { position: relative; z-index: 3 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 13rem; max-width: min(72%, 26rem); height: 46px; padding: 0 18px; border-radius: 6px; text-shadow: none; background: radial-gradient(120% 140% at 50% 0%, #3a1d14, #1c0d08 70%); box-shadow: 0 0 0 1px #0d0603, 0 0 0 2.5px #c9a24f, 0 0 0 3.5px #4a3313, 0 4px 10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,220,180,.15); } .plaque::before, .plaque::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; transform: rotate(45deg); background: #c9a24f; box-shadow: 0 0 0 1px #4a3313; } .plaque::before { left: -6px; } .plaque::after { right: -6px; } .plaque .turn { margin: 0 auto !important; justify-content: center; font-size: .98rem; font-weight: 900; letter-spacing: .12em; color: #e8dcc4; line-height: 1.1; padding: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; display: flex; gap: .5em; align-items: center; } .plaque .turn.mine { color: #ffd88a; text-shadow: 0 0 10px rgba(255,190,90,.55); } .plaque .turn.long { font-size: .84rem; letter-spacing: .02em; gap: .35em; white-space: nowrap; } .plaque .turn .clock { font-size: .72rem; letter-spacing: 0; color: #cdbb98; font-weight: 600; } .plaque .turn .clock.low { color: #ff8a6a; } .pl-sub { display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; font-size: .66rem; color: #b9a98a; line-height: 1.2; } .rdots { display: flex; gap: 3px; flex: none; } .rdots i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid #a8894a; } .rdots i.done { background: #a8894a; } .rdots i.now { background: #ffd88a; border-color: #ffd88a; box-shadow: 0 0 4px #ffd88a; } .pl-sub .logline { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 1 !important; } .pl-sub .logline.me { color: #9fd3b8; } .pl-sub .logline.opp { color: #e6a08e; } #app.board-screen .mid .err { position: absolute; right: 8px; z-index: 3; font-size: .7rem; } .feather { opacity: .5; width: 22px; height: 9px; } @media (min-width: 700px) and (min-height: 700px) { #app.board-screen .mid { height: 56px; --rh: 56; } .plaque { height: 50px; min-width: 16rem; } .plaque .turn { font-size: 1.1rem; } .pl-sub { font-size: .74rem; } } .pl-sub { justify-content: center; margin: 0 auto; } /* ═ v6：卡牌投影與牌匾高光的固定參數（原隨油燈火光晃動，油燈已拿掉） ═ */ :root { --f1: .5; --f2: .5; --fl: .5; --g1: 0; --g2: 0; --s1: 3.8px; --s2: -3.8px; --sb: 8.5px; } /* 投影：對手排往右下、我方排往左上 */ #app.board-screen .field.opp .row-units .tile { box-shadow: 0 1px 2px rgba(0,0,0,.45), var(--s1) calc(var(--s1) + 3px) var(--sb) -2px rgba(0,0,0,.55); } #app.board-screen .field.me .row-units .tile, #app.board-screen .hand .tile { box-shadow: 0 1px 2px rgba(0,0,0,.45), var(--s2) calc(var(--s2) * .4 + 4px) var(--sb) -2px rgba(0,0,0,.55); } /* 青銅高光（牌匾框） */ .plaque { box-shadow: 0 0 0 1px #0d0603, 0 0 0 2.5px rgb(calc(185 + var(--fl) * 50) calc(148 + var(--fl) * 40) calc(72 + var(--fl) * 25)), 0 0 0 3.5px #4a3313, 0 4px 10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,220,180,calc(.1 + var(--fl) * .15)); } .plaque > .turn::after { content: none; } /* ═ v7：寬螢幕桌旁石面——牌堆、墓地、領袖、手牌數與本局圖鑑竹簡（窄螢幕不顯示） ═ */ @media (min-width: 1100px) { #app.board-screen { --bw: min(960px, calc(100vw - 320px)); max-width: var(--bw); } .stone-zone { --zw: calc((100vw - var(--bw)) / 2 - 28px); --cw: clamp(52px, calc(var(--zw) * .36), 78px); position: fixed; z-index: 4; width: var(--zw); display: flex; flex-direction: column; align-items: center; gap: 14px; color: #d9c9a6; font-size: .72rem; } .stone-zone.opp { right: 14px; top: 22px; --sz-sh: var(--s1) calc(var(--s1) + 4px) var(--sb) rgba(0,0,0,.6); } .stone-zone.me { left: 14px; bottom: 22px; flex-direction: column-reverse; --sz-sh: var(--s2) calc(var(--s2) * .4 + 5px) var(--sb) rgba(0,0,0,.6); } .stone-zone .tile { width: var(--cw); height: calc(var(--cw) * 1.4); max-height: none; box-shadow: var(--sz-sh); pointer-events: none; } .sz-leader, .sz-grave, .sz-deck, .sz-hand { position: relative; display: grid; justify-items: center; gap: 4px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; } .sz-deck, .sz-hand { cursor: default; } .sz-leader.used .tile { filter: grayscale(.8) brightness(.6); } .sz-leader.ready .tile { box-shadow: 0 0 0 2px #ffd88a, 0 0 14px 3px rgba(255,190,90,.55), var(--sz-sh); } .sz-leader:hover .tile, .sz-grave:not(:disabled):hover .gcard:last-of-type .tile { transform: translateY(-3px); } .sz-cap { font-size: .7rem; letter-spacing: .08em; color: #d9c9a6; text-shadow: 0 1px 2px #000; } .sz-leader.ready .sz-cap { color: #ffd88a; } .sz-piles { display: flex; gap: 14px; } .cback { display: block; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: 5px; border: 1px solid #c9a24f; background: radial-gradient(circle at 50% 50%, #b0452f 0 14%, transparent 15%), repeating-linear-gradient(45deg, rgba(201,162,79,.18) 0 2px, transparent 2px 7px), linear-gradient(160deg, #5a1d12, #2e0c07); } .cback.empty { border: 1px dashed rgba(217,201,166,.35); background: rgba(0,0,0,.18); box-shadow: none; } .sz-grave { width: var(--cw); } .sz-grave .gcard { grid-area: 1 / 1; display: block; } .sz-grave .gcard:not(:last-of-type) .tile { box-shadow: 0 1px 2px rgba(0,0,0,.5); } .sz-grave .sz-cap { grid-row: 2; } .sz-grave:disabled { cursor: default; } .fan { display: flex; height: calc(var(--cw) * .9); align-items: flex-end; } .fan .cback { width: calc(var(--cw) * .6); height: calc(var(--cw) * .84); margin: 0 calc(var(--cw) * -.22); transform-origin: 50% 120%; box-shadow: var(--sz-sh); } .stone-zone.me .sz-hand { display: none; } } } .list-panel { width: min(720px, 94vw); } .list-panel h3 { margin: 0 0 .3rem; } .lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: .6rem; } .lp-item .tile { width: 100%; height: auto; aspect-ratio: 5 / 7; max-height: none; } @media (min-width: 1100px) { #app.board-screen .stone-zone { position: fixed !important; } } /* ═ v8：手機／窄螢幕——同樣的實體牌堆、墓地、領袖、手牌扇，縮小放在雙方資訊列的板邊 ═ */ @media (max-width: 1099px) { .stone-zone { --cw: 30px; display: flex; align-items: flex-end; gap: 6px; flex: none; --sz-sh: 0 2px 4px rgba(0,0,0,.6); } .stone-zone.opp { --sz-sh: var(--s1) calc(var(--s1) + 1px) calc(var(--sb) * .5) rgba(0,0,0,.6); } .stone-zone.me { --sz-sh: var(--s2) calc(var(--s2) * .4 + 2px) calc(var(--sb) * .5) rgba(0,0,0,.6); } .stone-zone .tile { width: var(--cw); height: calc(var(--cw) * 1.4); max-height: none; box-shadow: var(--sz-sh); pointer-events: none; border-radius: 3px; } .stone-zone .tile .tile-name, .stone-zone .tile .tile-ab, .stone-zone .tile .tile-pow { display: none; } .stone-zone .sz-leader .tile { --cw: 38px; } .sz-leader, .sz-grave, .sz-deck, .sz-hand { position: relative; display: grid; justify-items: center; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; } .sz-deck, .sz-hand { cursor: default; } .sz-piles { display: flex; gap: 6px; } .sz-cap { position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); white-space: nowrap; font-size: .56rem; line-height: 1; padding: 2px 3px; border-radius: 3px; background: rgba(20,10,6,.85); color: #e8dcc4; letter-spacing: 0; z-index: 2; } .sz-leader.used .tile { filter: grayscale(.8) brightness(.6); } .sz-leader.ready .tile { box-shadow: 0 0 0 2px #ffd88a, 0 0 10px 2px rgba(255,190,90,.6); } .sz-leader.ready .sz-cap { color: #ffd88a; } .cback { display: block; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: 3px; border: 1px solid #c9a24f; background: radial-gradient(circle, #b0452f 0 14%, transparent 15%), repeating-linear-gradient(45deg, rgba(201,162,79,.18) 0 2px, transparent 2px 5px), linear-gradient(160deg, #5a1d12, #2e0c07); } .cback.empty { border: 1px dashed rgba(217,201,166,.35); background: rgba(0,0,0,.18); box-shadow: none !important; } .sz-grave { width: var(--cw); } .sz-grave .gcard { grid-area: 1 / 1; display: block; } .sz-grave:disabled { cursor: default; } .fan { display: flex; align-items: flex-end; height: 34px; padding: 0 8px; } .fan .cback { width: 16px; height: 23px; margin: 0 -5px; transform-origin: 50% 120%; } .stone-zone.me .sz-hand { display: none; } } /* ═ v9：卡牌手感 ═ */ .tile-sheen, .tile-foil { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; } .tile-sheen { opacity: 0; transition: opacity .2s; mix-blend-mode: soft-light; background: radial-gradient(60% 50% at calc(var(--mx, .5) * 100%) calc(var(--my, .3) * 100%), rgba(255,255,255,.85), transparent 70%); } .tile-foil { mix-blend-mode: color-dodge; opacity: .32; overflow: hidden; } /* 箔光層 300%×300%，用 transform 平移（等同 background-position 0–100%），合成器處理、不每幀重繪 */ .tile-foil::before { content: ''; position: absolute; left: 0; top: 0; width: 300%; height: 300%; background: linear-gradient(115deg, transparent 20%, rgba(255,120,200,.55) 32%, rgba(120,220,255,.55) 42%, rgba(255,240,140,.55) 52%, rgba(160,255,170,.5) 62%, transparent 75%); transform: translate(calc(var(--mx, .5) * -66.667%), calc(var(--my, .5) * -66.667%)); animation: foil 6s ease-in-out infinite alternate; } .tile.r-SSR .tile-foil { opacity: .45; } .tile.tilt .tile-foil { opacity: .55; } .tile.tilt .tile-foil::before { animation: none; } @keyframes foil { from { transform: translate(0, -20%) } to { transform: translate(-66.667%, -46.667%) } } /* 手牌：閒置輕擺（獨立 rotate 屬性，不與傾斜 transform 衝突），指向時 3D 傾斜＋抬起＋視差 */ #app.board-screen .hand { perspective: 700px; } #app.board-screen .hand .tile { animation: sway 4.2s ease-in-out infinite alternate; --ly: 0px; --ls: 1; transform: translateY(var(--ly)) scale(var(--ls)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease; } #app.board-screen .hand .tile:nth-child(3n+1) { animation-duration: 3.7s; animation-delay: -1.3s; } #app.board-screen .hand .tile:nth-child(3n+2) { animation-duration: 4.9s; animation-delay: -2.4s; } /* 觸控：只有選中那張輕擺（其餘靜止，省掉 10 個常駐動畫層）；滑選時選中卡照舊暫停（見下方 .swiping） */ @media (hover: none), (pointer: coarse) { #app.board-screen .hand .tile:not(.sel) { animation: none; } } @keyframes sway { from { rotate: -1.2deg; translate: 0 0 } to { rotate: 1.2deg; translate: 0 -2px } } #app.board-screen .hand .tile.tilt { transform-style: preserve-3d; --ly: -12px; --ls: 1.09; z-index: 5; animation-play-state: paused; transition: transform .06s linear, box-shadow .2s; box-shadow: calc(var(--s2) * 2) calc(var(--s2) * .8 + 18px) calc(var(--sb) * 2.2) -4px rgba(0,0,0,.6); } #app.board-screen .hand .tile.sel { --ly: -16px; --ls: 1.08; } #app.board-screen .hand .tile:active { --ls: 1.02; } .hand .tile.tilt .tile-sheen { opacity: .9; } .tile .tile-art img { transition: transform .12s linear; } .hand .tile.tilt .tile-art img:not(.tile-sub) { transform: translate(calc((var(--mx) - .5) * -4px), calc((var(--my) - .5) * -4px)) scale(1.06); } .hand .tile.tilt .tile-art .tile-sub { transform: translate(calc((var(--mx) - .5) * 8px), calc((var(--my) - .5) * 8px)) scale(1.06); } /* 選中的手牌：主體先往前一跳，之後與背景反向慢漂，看得出前後兩層（觸控沒有滑鼠傾斜，靠這個顯出景深）。 * 用獨立的 translate／scale 屬性，和滑鼠傾斜寫的 transform 疊加不互蓋 */ #app.board-screen .hand .tile.sel .tile-art img { animation: bgdrift 3.6s ease-in-out infinite alternate; } #app.board-screen .hand .tile.sel .tile-art .tile-sub { animation: subpop .5s cubic-bezier(.3,1.6,.5,1), subdrift 3.6s ease-in-out .5s infinite alternate; } #app.board-screen .hand .tile.sel.tilt .tile-art img { animation-play-state: paused; } @keyframes bgdrift { from { translate: 1.5px 1px; scale: 1.08 } to { translate: -1.5px -1px; scale: 1.08 } } @keyframes subpop { 0% { scale: 1 } 55% { scale: 1.16; translate: 0 -3px } 100% { scale: 1.09; translate: -2px -1px } } @keyframes subdrift { from { scale: 1.09; translate: -2px -1px } to { scale: 1.09; translate: 2.5px 1.5px } } /* 金卡／SSR 在牌桌上呼吸：卡圖內緣一圈金光明暗，只動 opacity。 * 卡節點每次重畫都會搬家，CSS 動畫跟著重來；renderBoard 把 --kz-phase 設成全域時鐘的負延遲，重來也接得上拍子 */ .tile.gold .tile-art::after, .tile.r-SSR .tile-art::after, .tile.r-UR .tile-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 6px 1px rgba(255,214,120,.85), inset 0 0 16px rgba(255,186,80,.5); opacity: .3; } #app.board-screen .tile.gold .tile-art::after, #app.board-screen .tile.r-SSR .tile-art::after, #app.board-screen .tile.r-UR .tile-art::after { animation: aura 3.2s ease-in-out var(--kz-phase, 0s) infinite alternate; } @keyframes aura { to { opacity: 1 } } /* 數字跳動：增益金光、減益紅閃 */ .tile.buffed .tile-pow, .tile.debuffed .tile-pow { animation: powpop .6s cubic-bezier(.3,1.8,.5,1); } @keyframes powpop { 0% { transform: scale(1) } 35% { transform: scale(1.7) } 100% { transform: scale(1) } } .tile.buffed .tile-sheen { animation: glint .8s ease-out; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 30%, rgba(255,215,120,.9) 50%, transparent 70%) -100% 0 / 250% 100% no-repeat; } @keyframes glint { 0% { opacity: 1; background-position: 120% 0 } 100% { opacity: 0; background-position: -60% 0 } } .tile.debuffed .tile-sheen { animation: redflash .7s ease-out; mix-blend-mode: multiply; background: rgba(220,40,30,.85); } @keyframes redflash { 0%, 30% { opacity: .8 } 100% { opacity: 0 } } /* 特效層：墨散、塵 */ .juice-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; } .juice-layer .ink { position: fixed; border-radius: 50%; background: radial-gradient(circle, #120a06 30%, rgba(18,10,6,.4) 70%, transparent); } .juice-layer .dust { position: fixed; border-radius: 50%; background: radial-gradient(circle, rgba(230,215,185,.6), transparent 70%); } @media (prefers-reduced-motion: reduce) { #app.board-screen .hand .tile { animation: none !important; transition: none !important; transform: translateY(var(--ly)) !important; } .tile-foil::before { animation: none !important; } .tile.buffed .tile-pow, .tile.debuffed .tile-pow, .tile.buffed .tile-sheen, .tile.debuffed .tile-sheen { animation: none !important; } } /* ═ v10：守陣人頭像 ═ */ .pface { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: radial-gradient(#3a2414, #160b05); box-shadow: 0 0 0 1.5px #c9a24f, 0 0 0 2.5px #3a2410, 0 2px 4px rgba(0,0,0,.6); color: #f0dfb8; font-weight: 900; font-size: .9rem; } .pface img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.5); } .personas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .8rem; margin: .6rem 0; } .persona { display: inline-flex; align-items: center; gap: .35rem; color: #e8dcc4; font-weight: 700; } .persona small { color: #b9a98a; font-weight: 400; } .vs-line { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .2rem 0 .6rem; } .vs-line .pface { width: 40px; height: 40px; } @media (min-width: 1100px) { #app.board-screen .side.opp .pface { width: 34px; height: 34px; } } #app.board-screen .side-name { white-space: nowrap; flex: none; } /* ═ v11：橫幅、輪到你提示、結果慶祝、手機分數徽章避開靜音鈕 ═ */ .jbanner { position: fixed; left: 50%; top: 46%; transform: translate(-50%,-50%); z-index: 61; display: grid; justify-items: center; gap: 4px; padding: 14px 42px; border-radius: 6px; pointer-events: none; white-space: nowrap; background: linear-gradient(90deg, transparent, rgba(20,9,5,.92) 18%, rgba(20,9,5,.92) 82%, transparent); color: #f3e3bd; text-shadow: 0 2px 4px #000; } .jbanner b { font-size: 2rem; font-weight: 900; letter-spacing: .3em; padding-left: .3em; } .jbanner small { font-size: .85rem; color: #d2bf98; letter-spacing: .1em; } .jbanner::before, .jbanner::after { content: ''; position: absolute; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #c9a24f, transparent); } .jbanner::before { top: 4px; } .jbanner::after { bottom: 4px; } .jbanner.pass b { font-size: 1.4rem; letter-spacing: .15em; color: #e6d0a0; } .plaque.cue { animation: cue 1.1s ease-out 1; } @keyframes cue { 0% { transform: scale(1) } 18% { transform: scale(1.1); filter: brightness(1.35) } 40% { transform: scale(.98) } 60% { transform: scale(1.03) } 100% { transform: scale(1); filter: none } } .juice-layer .gold-bit { position: fixed; border-radius: 1px; background: linear-gradient(90deg, #fff1b8, #d9a93f); box-shadow: 0 0 4px rgba(255,210,120,.8); } @media (max-width: 599px) { #app.board-screen .side.opp { padding-right: 54px; } .jbanner b { font-size: 1.6rem; } } @media (prefers-reduced-motion: reduce) { .plaque.cue { animation: none; } } @media (max-width: 599px) { #app.board-screen .side.opp .pface { display: none; } } /* 手機：領袖卡已有圖，省空間讓分數徽章不被靜音鈕蓋住 */ /* ═ v13：讓場上的卡變大——資訊列變細、弱水變窄、提示改浮層、手牌下沉重疊、排高依可用高度 ═ */ #app.board-screen { overflow: hidden; padding-top: 4px; padding-bottom: 0; --hw: 58px; --tuck: .3; } @media (min-width: 700px) { #app.board-screen { --hw: 72px; } } @media (min-width: 1100px) { #app.board-screen { --hw: 84px; } } @media (min-width: 1100px) and (min-height: 860px) { #app.board-screen { --hw: 92px; } } #app.board-screen .field { gap: 0; } /* v37：與上方基線一致；3px 縫＝幽靈木紋根因 */ #app.board-screen .row { padding: 2px 3px; } /* 排名＋分數徽章疊在織錦左緣，不另佔欄 */ #app.board-screen .row .row-label { position: absolute; left: 2px; top: 0; bottom: 0; width: 2.3rem; z-index: 3; } #app.board-screen .row-units { margin-left: 2.4rem; container-type: size; overflow: visible; } @media (min-width: 700px) { #app.board-screen .row .row-label { width: 2.9rem; } #app.board-screen .row-units { margin-left: 3rem; } } #app.board-screen .row-units .tile { height: 100%; width: auto; max-height: none; flex: none; } #app.board-screen .row-units .tile + .tile { margin-left: min(5px, calc((100cqw - var(--n) * 100cqh * 2 / 3) / max(var(--n) - 1, 1))); } /* 雙方資訊列：細 */ #app.board-screen .side { padding: 1px .3rem; gap: .4rem; min-height: 0; } .side-total { width: 2.2rem !important; height: 2.2rem !important; font-size: 1rem !important; } .lives i { width: .85rem !important; height: .85rem !important; } #app.board-screen .side .btn.small { padding: .15rem .6rem; font-size: .8rem; } @media (max-width: 1099px) { .stone-zone { --cw: 24px; gap: 5px; } .stone-zone .sz-leader .tile { --cw: 28px; } .fan { height: 26px; } .fan .cback { width: 13px; height: 19px; margin: 0 -4px; } } /* 弱水：細，牌匾可略壓到上下排 */ #app.board-screen .mid { height: 28px !important; --rh: 28; margin: 0; position: relative; z-index: 5 !important; } /* v37：勿上下 margin 露木紋 */ .plaque { height: 40px !important; gap: 0 !important; } .plaque .turn { font-size: .92rem !important; } .pl-sub { font-size: .62rem !important; } @media (min-width: 700px) and (min-height: 700px) { #app.board-screen .mid { height: 32px !important; --rh: 32; } .plaque { height: 44px !important; } } /* 提示與選卡說明：浮在手牌上方，不佔版面 */ #app.board-screen .hint, #app.board-screen .selinfo { position: absolute !important; left: 12px; right: 12px; bottom: calc(var(--hw) * 1.5 * (1 - var(--tuck)) + 10px); z-index: 8 !important; margin: 0; background: rgba(22,14,9,.93); border: 1px solid rgba(201,162,79,.5); box-shadow: 0 6px 18px rgba(0,0,0,.6); } #app.board-screen .hint { font-size: .74rem; padding: .3rem .55rem; cursor: pointer; max-width: 34rem; margin: 0 auto; } /* 手牌：下沉、重疊，指到才浮起 */ #app.board-screen .hand { container-type: inline-size; overflow: visible; justify-content: center; gap: 0; padding: 6px 4px 0; height: calc(var(--hw) * 1.5 * (1 - var(--tuck)) + 6px); flex: none; background: none; } #app.board-screen .hand .tile { width: var(--hw); flex: none; --ly: calc(var(--hw) * 1.5 * var(--tuck)); } #app.board-screen .hand .tile + .tile { margin-left: min(5px, calc((100cqw - var(--n) * var(--hw)) / max(var(--n) - 1, 1))); } #app.board-screen .hand .tile.tilt { --ly: -6px; } #app.board-screen .hand .tile.sel { --ly: -10px; z-index: 6; } #app.board-screen .hand .tile:active { --ls: 1.02; } /* 下沉時戰力與技能放到上方仍看得到 */ #app.board-screen .hand .tile-pow { bottom: auto; top: 22%; left: 3px; } #app.board-screen .hand .tile-ab { bottom: auto; top: 22%; right: 2px; } @media (prefers-reduced-motion: reduce) { #app.board-screen .hand .tile { transform: translateY(var(--ly)) !important; } } /* ═ v13b：拿掉雙方資訊列——總分進弱水（對手在上緣、我在下緣）、讓過到手牌右側、認輸縮成小旗 ═ */ #app.board-screen { --pw: min(13rem, calc(100vw - 10.5rem)); } @media (min-width: 700px) { #app.board-screen { --pw: 17rem; } } .plaque { width: var(--pw) !important; min-width: 0 !important; max-width: var(--pw) !important; } .mscore { position: absolute; z-index: 6; display: flex; align-items: center; gap: 4px; pointer-events: none; } .mscore.opp { right: calc(50% + var(--pw) / 2 + 12px); top: 0; transform: translateY(-50%); } .mscore.me { left: calc(50% + var(--pw) / 2 + 12px); bottom: 0; transform: translateY(50%); flex-direction: row-reverse; } .mscore .side-total { width: 2.6rem !important; height: 2.6rem !important; font-size: 1.25rem !important; margin: 0; } .mscore .lives i { width: .95rem !important; height: .95rem !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* v76：讓過標記掛在該方織錦匣靠中央的一緣（不蓋整張牌、不染色）；.fresh 只在剛讓過那次播入場 */ #app.board-screen .field { position: relative; } #app.board-screen .pass-mark { position: absolute; left: 50%; z-index: 5; transform: translateX(-50%); pointer-events: none; white-space: nowrap; padding: 3px 14px; border-radius: 4px; font-size: .9rem; font-weight: 900; letter-spacing: .14em; color: #fff1e0; background: linear-gradient(180deg, rgba(150,46,30,.94), rgba(104,26,14,.94)); border: 1px solid #e0b46a; box-shadow: 0 2px 8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.35); text-shadow: 0 1px 0 rgba(0,0,0,.5); } #app.board-screen .pass-mark.opp { bottom: 6px; } #app.board-screen .pass-mark.me { top: 6px; } #app.board-screen .pass-mark.fresh { animation: passIn .45s cubic-bezier(.3,1.5,.5,1) both; } @keyframes passIn { 0% { opacity: 0; transform: translateX(-50%) scale(1.8); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } } @media (prefers-reduced-motion: reduce) { #app.board-screen .pass-mark.fresh { animation: none; } } .pl-sub .logline.pinned { display: block; } #app.board-screen .mid .logline.pinned b { color: #ffb08a; font-weight: 900; } .overlay-card.draw .stamp { background: radial-gradient(circle at 40% 35%, #b08a3e, #6a4f1e); } .mscore.active .side-total { filter: drop-shadow(0 0 6px rgba(255,200,110,.75)) drop-shadow(0 3px 3px rgba(0,0,0,.6)); } @media (min-width: 700px) { .mscore .side-total { width: 3.1rem !important; height: 3.1rem !important; font-size: 1.45rem !important; } .mscore .lives i { width: 1.1rem !important; height: 1.1rem !important; } } @media (max-width: 420px) { #app.board-screen { --pw: min(11.5rem, calc(100vw - 8.6rem)); } .mscore.opp { right: calc(50% + var(--pw) / 2 + 6px); } .mscore.me { left: calc(50% + var(--pw) / 2 + 6px); } .mscore .lives { flex-direction: column; gap: 2px; } .mscore .lives i { width: .75rem !important; height: .75rem !important; } } #app.board-screen .mid .err { right: auto; left: 8px; bottom: 1px; } /* 對手牌區：手機在棋盤頂端一條很細的邊；寬螢幕本來就放到石上 */ #app.board-screen .opp-zone { flex: none; display: flex; align-items: center; padding: 0 48px 2px 4px; min-height: 0; } #app.board-screen .dock { flex: none; display: flex; align-items: flex-end; gap: 6px; position: relative; } #app.board-screen .dock .hand { flex: 1; min-width: 0; } #app.board-screen .me-zone { flex: none; align-self: center; } #app.board-screen .dock .btn.pass { flex: none; align-self: center; margin: 0 2px 6px 0; padding: .4rem .8rem; font-size: .9rem; z-index: 7; } @media (min-width: 1100px) { #app.board-screen .opp-zone, #app.board-screen .me-zone { display: contents; } .stone-zone.opp { top: 58px !important; } } @media (max-width: 1099px) { .stone-zone .sz-cap { font-size: .58rem; } .me-zone .stone-zone { flex-direction: column; align-items: center; gap: 2px; } .me-zone .sz-piles { display: flex; gap: 3px; } } /* 認輸旗：必須用 #app > .forfeit——`#app > *` 的 position:relative 特異度較高，會把 fixed 蓋掉， * 旗子就留在棋盤 flex 流裡佔一條高度（線上對戰時弱水上方的木紋空帶）。位置在靜音鈕正下方，即對手手牌列右側的預留欄。 */ #app > .forfeit { position: fixed; z-index: 30; right: calc(max(8px, env(safe-area-inset-right)) + 2px); top: calc(max(8px, env(safe-area-inset-top)) + 38px); width: 30px; height: 30px; margin: 0; border-radius: 50%; padding: 0; border: 1px solid #6b5430; background: radial-gradient(circle at 40% 30%, #3e2d17, #1a1008); font-size: 13px; cursor: pointer; opacity: .8; } #app.board-screen.online .opp-zone { padding-right: 84px; } #app.board-screen .mid > .mscore { position: absolute; } #app.board-screen { overflow: clip; } /* hidden 仍可被聚焦捲動，手牌下沉部分會把整個棋盤往上推 */ /* 總分硬幣收在弱水帶內（不壓到排上的卡角戰力） */ #app.board-screen .mid { height: 40px !important; --rh: 40; } @media (min-width: 700px) and (min-height: 700px) { #app.board-screen .mid { height: 46px !important; --rh: 46; } } .mscore.opp { top: -3px; transform: none; align-items: flex-start; } .mscore.me { bottom: -3px; transform: none; align-items: flex-end; } .mscore .side-total { width: 2.3rem !important; height: 2.3rem !important; font-size: 1.12rem !important; } @media (min-width: 700px) { .mscore .side-total { width: 2.75rem !important; height: 2.75rem !important; font-size: 1.32rem !important; } } @media (max-width: 1099px) { .me-zone .stone-zone { flex-direction: row; align-items: flex-end; gap: 3px; } .me-zone .stone-zone .sz-leader .tile { --cw: 30px; } .opp-zone .stone-zone .sz-leader .tile { --cw: 28px; } } @media (max-width: 1099px) { #app.board-screen .me-zone .sz-piles { gap: 6px; } #app.board-screen .me-zone .sz-deck, #app.board-screen .me-zone .sz-grave { width: auto; min-width: 36px; } #app.board-screen .me-zone .sz-cap { font-size: .52rem; padding: 1px 2px; } } @media (max-width: 420px) { #app.board-screen .me-zone .sz-cap { white-space: normal; width: min-content; text-align: center; line-height: 1.05; bottom: -6px; } } /* 對手天排（棋盤最上一排）名稱離板邊留空 */ #app.board-screen .field.opp .row:first-child .row-label { top: 6px; } /* ═ v14：昆特式上下完全對稱——上：對手領袖｜背面手牌｜牌堆墓地；下：我方鏡像。排分：對手在左、我在右；兩方材質冷暖分明 ═ */ #app.board-screen { --dh: calc(var(--hw) * 1.5 * (1 - var(--tuck)) + 4px); --lw: calc((var(--dh) - 8px) / 1.4); } #app.board-screen .stone-zone { display: none !important; } #app.board-screen .dock { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) 4.6rem auto; align-items: center; gap: 6px; height: var(--dh); padding: 0 4px; position: relative; z-index: 4; } #app.board-screen .dock.opp { padding-right: 46px; } /* 靜音鈕 */ #app.board-screen .dock .hand { height: var(--dh); padding: 0; align-self: stretch; display: flex; align-items: flex-start; } #app.board-screen .dock.me .hand { align-items: flex-start; } #app.board-screen .dock.opp .hand { align-items: flex-end; pointer-events: none; } #app.board-screen .dock .btn.pass { margin: 0; padding: .4rem .5rem; width: 100%; font-size: .88rem; } #app.board-screen .dock .pass-ph { display: block; } #app.board-screen .ohand .cback { flex: none; display: block; width: var(--hw); height: calc(var(--hw) * 1.5); border-radius: 5px; border: 1px solid #6f7d8c; transform: translateY(calc(var(--hw) * -1.5 * var(--tuck))) rotate(180deg); background: radial-gradient(circle, #3d5670 0 13%, transparent 14%), repeating-linear-gradient(45deg, rgba(160,180,200,.14) 0 2px, transparent 2px 6px), linear-gradient(160deg, #26323f, #10161d); box-shadow: 0 3px 6px rgba(0,0,0,.6); } #app.board-screen .ohand .cback + .cback { margin-left: min(5px, calc((100cqw - var(--n) * var(--hw)) / max(var(--n) - 1, 1))); } /* 領袖、牌堆、墓地：兩方固定同位 */ #app.board-screen .dock .sz-leader, #app.board-screen .dock .sz-grave, #app.board-screen .dock .sz-deck { position: relative; display: grid; justify-items: center; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; } #app.board-screen .dock .sz-deck { cursor: default; } #app.board-screen .dock .sz-piles { display: flex; gap: 8px; } #app.board-screen .dock .sz-leader .tile, #app.board-screen .dock .sz-piles .tile, #app.board-screen .dock .sz-piles .cback { width: var(--lw); height: calc(var(--lw) * 1.4); max-height: none; border-radius: 4px; } #app.board-screen .dock .sz-leader .tile, #app.board-screen .dock .sz-piles .tile { pointer-events: none; box-shadow: 0 3px 6px rgba(0,0,0,.6); } #app.board-screen .dock .sz-leader .tile .tile-name, #app.board-screen .dock .sz-leader .tile .tile-ab, #app.board-screen .dock .sz-leader .tile .tile-pow, #app.board-screen .dock .sz-piles .tile .tile-name, #app.board-screen .dock .sz-piles .tile .tile-ab, #app.board-screen .dock .sz-piles .tile .tile-pow { display: none; } #app.board-screen .dock .sz-grave { width: var(--lw); } #app.board-screen .dock .sz-grave .gcard { grid-area: 1 / 1; display: block; } #app.board-screen .dock .sz-piles .cback { display: block; border: 1px solid #c9a24f; background: radial-gradient(circle, #b0452f 0 14%, transparent 15%), repeating-linear-gradient(45deg, rgba(201,162,79,.18) 0 2px, transparent 2px 5px), linear-gradient(160deg, #5a1d12, #2e0c07); } #app.board-screen .dock.opp .sz-piles .cback:not(.empty) { border-color: #6f7d8c; background: radial-gradient(circle, #3d5670 0 13%, transparent 14%), repeating-linear-gradient(45deg, rgba(160,180,200,.14) 0 2px, transparent 2px 6px), linear-gradient(160deg, #26323f, #10161d); } #app.board-screen .dock .cback.empty { border: 1px dashed rgba(217,201,166,.35); background: rgba(0,0,0,.18); box-shadow: none !important; } #app.board-screen .dock .sz-cap { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); white-space: nowrap; font-size: .58rem; line-height: 1.05; padding: 1px 3px; border-radius: 3px; background: rgba(20,10,6,.85); color: #e8dcc4; z-index: 2; } #app.board-screen .dock .sz-leader.used .tile { filter: grayscale(.8) brightness(.6); } #app.board-screen .dock .sz-leader.ready .tile { box-shadow: 0 0 0 2px #ffd88a, 0 0 10px 2px rgba(255,190,90,.6); } #app.board-screen .dock .sz-leader.ready .sz-cap { color: #ffd88a; } @media (max-width: 420px) { #app.board-screen .dock { grid-template-columns: auto minmax(0, 1fr) 3.4rem auto; gap: 4px; } #app.board-screen .dock .sz-piles { gap: 4px; } #app.board-screen .dock .sz-cap { white-space: normal; width: min-content; text-align: center; font-size: .52rem; } #app.board-screen .dock .btn.pass { font-size: .8rem; padding: .35rem .2rem; } } /* 排分：對手排在左、我方排在右 */ #app.board-screen .field.me .row .row-label { left: auto; right: 2px; } #app.board-screen .field.me .row-units { margin-left: 3px; margin-right: 2.4rem; } @media (min-width: 700px) { #app.board-screen .field.me .row-units { margin-left: 4px; margin-right: 3rem; } } /* 弱水：對手總分在左、我在右，垂直置中；兩岸冷暖 */ .mscore.opp, .mscore.me { top: 50%; bottom: auto; transform: translateY(-50%); align-items: center; } #app.board-screen .mid { box-shadow: inset 0 2px 0 rgba(130,160,200,.45), inset 0 7px 9px -5px rgba(90,130,180,.35), inset 0 -2px 0 rgba(230,180,90,.5), inset 0 -7px 9px -5px rgba(230,170,80,.3); } /* 材質：我方暖金青銅、對手冷鐵 */ #app.board-screen .field.opp .row-score, .mscore.opp .side-total { filter: saturate(.25) brightness(.78) hue-rotate(180deg) saturate(1.6) drop-shadow(0 2px 2px rgba(0,0,0,.6)); color: #e6eef8 !important; } #app.board-screen .field.me .row-score, .mscore.me .side-total { filter: saturate(1.25) brightness(1.05) drop-shadow(0 2px 2px rgba(0,0,0,.6)); } .mscore.opp .lives i.on { filter: hue-rotate(55deg) saturate(.7) brightness(.95) drop-shadow(0 0 4px rgba(140,180,230,.5)); } .mscore.me .lives i.on { filter: hue-rotate(-95deg) saturate(1.4) drop-shadow(0 0 4px rgba(255,190,90,.55)); } .mscore.me .side-total.lead { filter: saturate(1.3) brightness(1.12) drop-shadow(0 0 8px rgba(255,200,100,.9)) drop-shadow(0 0 3px rgba(255,220,150,.8)); animation: leadglow 1.8s ease-in-out infinite alternate; } .mscore.opp .side-total.lead { filter: saturate(.25) brightness(.9) hue-rotate(180deg) saturate(1.6) drop-shadow(0 0 8px rgba(130,180,255,.9)) drop-shadow(0 0 3px rgba(190,220,255,.8)); animation: leadglow 1.8s ease-in-out infinite alternate; } @keyframes leadglow { to { transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .mscore .side-total.lead { animation: none; } } #app.board-screen .field.me .row-score.lead { filter: saturate(1.3) brightness(1.15) drop-shadow(0 0 6px rgba(255,200,100,.85)); } #app.board-screen .field.opp .row-score.lead { filter: saturate(.25) brightness(.95) hue-rotate(180deg) saturate(1.6) drop-shadow(0 0 6px rgba(130,180,255,.85)); } @media (min-width: 700px) { #app.board-screen { --tuck: .42; } } #app.board-screen .dock .hand .tile { --ly: 0px; } #app.board-screen .dock .hand .tile.tilt { --ly: -12px; } #app.board-screen .dock .hand .tile.sel { --ly: -18px; } #app.board-screen .ohand .cback { transform: rotate(180deg); } #app.board-screen .dock .hand { justify-content: center; } @media (max-width: 600px) { #app.board-screen .dock { grid-template-columns: auto minmax(0, 1fr) 2.1rem auto; gap: 4px; } #app.board-screen .dock .btn.pass { writing-mode: vertical-rl; letter-spacing: .2em; padding: .45rem 0; font-size: .82rem; height: calc(var(--dh) - 8px); } #app.board-screen .dock .sz-piles { gap: 3px; } } /* ═ v15：兩方手牌都完整露出、同尺寸（重疊扇開）；指到／點選放大預覽；對手用山海卡背＋一致微光＋張數；命改玉璧 ═ */ #app.board-screen { --hw: clamp(42px, 8.4vh, 84px); --dh: calc(var(--hw) * 1.5); --lw: calc((var(--dh) - 10px) / 1.4); } @media (min-width: 700px) { #app.board-screen { --hw: clamp(46px, 8.6vh, 84px); } } #app.board-screen .dock.opp .hand { align-items: flex-end !important; } #app.board-screen .dock.me .hand { align-items: flex-start !important; } #app.board-screen .dock .hand .tile { --ly: 0px; transform-origin: 50% 100%; } #app.board-screen .dock.me { z-index: 9; } #app.board-screen .dock .hand .tile.tilt { --ly: -6px; --ls: 1.32; z-index: 8; } #app.board-screen .dock .hand .tile.sel { --ly: -8px; --ls: 1.42; z-index: 9; } #app.board-screen .dock .hand .tile-pow { top: auto; bottom: 3px; } #app.board-screen .dock .hand .tile-ab { top: auto; bottom: 3px; } #app.board-screen .hint, #app.board-screen .selinfo { bottom: calc(var(--dh) * 1.45 + 4px) !important; max-width: 36rem; margin: 0 auto; } /* 對手手牌：同尺寸、正面朝下、同一張卡背（不洩漏稀有度），整排一致的微光 */ #app.board-screen .ohand { position: relative; } #app.board-screen .ohand .cback { transform: none; height: calc(var(--hw) * 1.5); border: 0; position: relative; overflow: hidden; background: var(--tbl-back, linear-gradient(160deg, #26323f, #10161d)) center / cover; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 3px 6px rgba(0,0,0,.6); } #app.board-screen .ohand .cback::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 300%; background: linear-gradient(105deg, transparent 35%, rgba(255,235,190,.16) 48%, rgba(255,235,190,.04) 56%, transparent 65%); animation: backshine 5.5s ease-in-out infinite; } /* 等同 300% 寬背景的 background-position 120% → -120%，改用 transform 不每幀重繪 */ @keyframes backshine { from { transform: translateX(-80%); } to { transform: translateX(80%); } } @media (prefers-reduced-motion: reduce) { #app.board-screen .ohand .cback::after { animation: none; opacity: 0; } } #app.board-screen .dock .sz-piles .cback:not(.empty), #app.board-screen .dock.opp .sz-piles .cback:not(.empty) { background: var(--tbl-back) center / cover; border: 0; } /* 命：兩枚小玉璧；我方蜜黃玉、對手青白玉；輸掉一回合就裂開變暗 */ .mscore .lives { display: flex; align-items: center; gap: 3px; } .mscore .lives .lv-l { font-size: .58rem; font-weight: 900; color: #d9c9a6; text-shadow: 0 1px 2px #000; letter-spacing: 0; } .mscore .lives i { position: relative; width: 1.15rem !important; height: 1.15rem !important; border-radius: 50%; opacity: 1; filter: none !important; background: radial-gradient(circle, transparent 0 24%, var(--j3) 25%, var(--j1) 34%, var(--j2) 52%, var(--j3) 68%, rgba(0,0,0,.6) 71%, transparent 73%); box-shadow: none; } .mscore .lives i::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.12) 0 6deg, transparent 6deg 30deg); -webkit-mask: radial-gradient(circle, transparent 0 30%, #000 32% 64%, transparent 66%); mask: radial-gradient(circle, transparent 0 30%, #000 32% 64%, transparent 66%); } .mscore.me .lives i { --j1: #fff1c2; --j2: #e2b45a; --j3: #8a5e1e; } .mscore.opp .lives i { --j1: #e8f2f6; --j2: #9db7c6; --j3: #47606f; } .mscore .lives i.on { filter: drop-shadow(0 0 3px var(--j2)) !important; } .mscore .lives i.broken { opacity: .45; filter: grayscale(.6) brightness(.7) !important; } .mscore .lives i.broken::after { content: ''; position: absolute; left: 48%; top: 6%; width: 2px; height: 88%; background: linear-gradient(#111 0 30%, transparent 30% 34%, #111 34%); transform: rotate(22deg) skewY(18deg); } .mscore.me .lives { flex-direction: row-reverse; } @media (max-width: 420px) { .mscore .lives { flex-direction: column !important; gap: 1px; } .mscore .lives i { width: .9rem !important; height: .9rem !important; } .mscore .lives .lv-l { font-size: .5rem; } } /* 對手背面牌重疊時每張都留出可數的邊（至少 22% 寬），左緣金線分隔 */ #app.board-screen .ohand .cback + .cback { margin-left: min(5px, max(calc((100cqw - var(--n) * var(--hw)) / max(var(--n) - 1, 1)), calc(var(--hw) * -.78))); } #app.board-screen .ohand .cback { box-shadow: -1px 0 0 rgba(232,196,140,.75), -3px 0 5px rgba(0,0,0,.65), 0 3px 6px rgba(0,0,0,.6); } #app.board-screen .ohand { overflow: visible; } #app.board-screen { --hw: clamp(40px, 7.8vh, 80px); } @media (min-width: 700px) { #app.board-screen { --hw: clamp(44px, 7.8vh, 80px); } } /* ═ v16／v30／v36：上下手牌區完全等高鏡像、零木條縫（--dh＝卡高，勿再 +8px／上下 padding）═ * 不變式：.dock.opp 底邊 ≡ .field.opp 第一排頂邊（關閉抽屜時 gap≈0）。 * 易回歸：--dh: hh+8、dock 上下 padding、≥900px padding:4px 10px、safe-area 殘留、min-height:auto 撐高 dock。 */ #app.board-screen { --hw: clamp(34px, 5.9vh, 64px) !important; --hh: calc(var(--hw) * 1.5); --dh: var(--hh); padding: 0 14px !important; /* 完整 shorthand，清掉 #app safe-area 上下內距 */ } #app.board-screen .dock { height: var(--dh) !important; min-height: var(--dh) !important; max-height: var(--dh) !important; padding: 0 4px !important; box-sizing: border-box; align-items: stretch; } #app.board-screen .dock.opp .hand { height: var(--hh) !important; align-self: stretch !important; align-items: flex-end !important; padding: 0 !important; } #app.board-screen .dock.me .hand { height: var(--hh) !important; align-self: stretch !important; align-items: flex-start !important; padding: 0 !important; } #app.board-screen .dock .hand .tile, #app.board-screen .ohand .cback { width: var(--hw) !important; height: var(--hh) !important; max-height: none; flex: none; } #app.board-screen .dock .hand .tile.tilt { --ls: 1.5; } #app.board-screen .dock .hand .tile.sel { --ls: 1.65; } #app.board-screen .dock .hand .tile-name { font-size: .55rem; } #app.board-screen .hint, #app.board-screen .selinfo { bottom: calc(var(--dh) * 1.7 + 4px) !important; } /* ═ v17：手牌區高度只看「窄邊」，高窗多出來的高度全給六排；提示改成牌匾上的短暫字幕 ═ */ @media (min-width: 700px) { #app.board-screen { --hw: clamp(34px, min(5.9vh, 4.1vw), 60px) !important; } } #app.board-screen .hint { display: none !important; } .pl-hint { max-width: 100%; overflow: hidden; white-space: nowrap; color: #ffe2a0; cursor: pointer; justify-content: flex-start; } .pl-hint .hint-t { display: inline-block; padding-left: 0; } .pl-hint .hint-t.long { padding-left: 100%; animation: marq calc(var(--len) * .28s + 3s) linear 1 forwards; } @keyframes marq { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .pl-hint .hint-t.long { animation: none; padding-left: 0; } .pl-hint { white-space: normal; font-size: .58rem; line-height: 1.1; } } .pl-q { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; padding: 0; border: 1px solid #a8894a; background: #2a160d; color: #ffd88a; font-size: .7rem; font-weight: 900; line-height: 1; cursor: pointer; z-index: 4; } /* 領袖／牌堆／墓地：外框高度＝卡高，上下置中，兩邊才是精確鏡像 */ #app.board-screen .dock .sz-leader, #app.board-screen .dock .sz-deck, #app.board-screen .dock .sz-grave { height: calc(var(--lw) * 1.4); width: var(--lw); line-height: 0; align-self: center; align-content: center; overflow: visible; } #app.board-screen .dock .sz-grave .gcard, #app.board-screen .dock .sz-grave > .cback { grid-area: 1 / 1; line-height: 0; } #app.board-screen .dock .sz-piles { align-self: center; align-items: center; height: calc(var(--lw) * 1.4); } /* ═ v18：排上的卡置中、由中間向兩側展開（昆特式）；兩端都留出排名／分數徽章的空位，滿了往中間疊 ═ */ #app.board-screen .row-units, #app.board-screen .field.me .row-units { margin-left: 2.6rem !important; margin-right: 2.6rem !important; justify-content: center; } @media (min-width: 700px) { #app.board-screen .row-units, #app.board-screen .field.me .row-units { margin-left: 3.3rem !important; margin-right: 3.3rem !important; } } #app.board-screen .row-units .tile + .tile { margin-left: min(5px, calc((100cqw - var(--n) * 100cqh * 2 / 3) / max(var(--n) - 1, 1))); } #app.board-screen .row-units .tile { box-sizing: border-box; width: calc(100cqh * 2 / 3) !important; height: 100cqh !important; flex: none; } #app.board-screen .row-units { gap: 0 !important; } /* ═ v19：每排最多 9 張；擠時往中間疊，但每張至少露出 1/3 卡寬（左下角戰力與一條卡圖）。卡寬依排高，排太窄時縮到放得下 9 張 ═ */ #app.board-screen .row-units { --cap: 9; --tw: min(100cqh * 2 / 3, (100cqw - 4px) / (1 + (var(--cap) - 1) / 3), 100cqw - (var(--cap) - 1) * 22px); --step: min(var(--tw) + 5px, (100cqw - var(--tw)) / max(var(--n) - 1, 1)); } #app.board-screen .row-units .tile { width: var(--tw) !important; height: calc(var(--tw) * 1.5) !important; max-height: 100cqh; align-self: center; } #app.board-screen .row-units .tile + .tile { margin-left: calc(var(--step) - var(--tw)) !important; } #app.board-screen .row-units .tile-pow { z-index: 4; } /* 手牌：能放的排都滿了，這張暫時不能出 */ #app.board-screen .hand .tile.blocked { filter: grayscale(.85) brightness(.7); } #app.board-screen .hand .tile.blocked::before { content: '排滿'; position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 5; padding: 1px 4px; border-radius: 3px; background: rgba(20,10,6,.85); color: #f0d9a8; font-size: .55rem; white-space: nowrap; } /* ═ v23：圓章約 82%；左端貼邊、縫隙收緊；張數疊在小牌面上，小牌略大於 v22 ═ */ #app.board-screen .dock { grid-template-columns: auto minmax(0, 1fr) var(--passw) !important; gap: 3px !important; --passw: 4.4rem; --bd: clamp(28px, calc(var(--hh) * .52), 38px); padding: 0 1px !important; /* v30：勿上下 padding，否則對手手牌與天排之間露木紋 */ } @media (max-width: 600px) { #app.board-screen .dock { --passw: 2.6rem; gap: 3px !important; } } #app.board-screen .dock.opp { padding-right: 2px !important; } #app.board-screen .dock.opp .pass-ph { width: var(--passw); } #app.board-screen .dock-end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: max-content; height: 100%; min-width: 0; flex: none; margin: 0; padding: 0; } #app.board-screen .dock.opp .dock-end { flex-direction: column-reverse; } .ldr-badge { position: relative; width: var(--bd); height: var(--bd); flex: none; border-radius: 50%; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: radial-gradient(#3a2414, #160b05); box-shadow: 0 0 0 1.5px #d8b25e, 0 0 0 3px #2e1c0c, 0 0 0 3.5px rgba(216,178,94,.55), 0 3px 6px rgba(0,0,0,.65); color: #f0dfb8; font-weight: 900; transition: transform .15s, filter .15s; } .ldr-badge img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(1.45); } /* 銅錢般的內圈高光與下緣暗影，讓圓章有厚度 */ .ldr-badge::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1.5px rgba(255,236,190,.32), inset 0 -6px 9px rgba(0,0,0,.5), inset 0 4px 6px rgba(255,230,180,.16); } @media (hover: hover) { .ldr-badge:not(.used):hover { transform: translateY(-1px) scale(1.04); filter: brightness(1.1); } } .ldr-badge.ready { box-shadow: 0 0 0 1.5px #ffe3a0, 0 0 0 2.5px #8a6a2a, 0 0 10px 3px rgba(255,190,90,.65); animation: breathe2 1.6s ease-in-out infinite alternate; } .ldr-badge.used { filter: grayscale(1) brightness(.55); } #app.board-screen .dock-end .strips, #app.board-screen .dock-end { } /* 兩張小牌並排在圓章下方；張數疊在牌面正中 */ #app.board-screen .dock-end { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 3px; row-gap: 2px; place-items: center; } #app.board-screen .dock-end .ldr-badge { grid-column: 1 / -1; } #app.board-screen .dock.opp .dock-end .ldr-badge { grid-row: 2; } #app.board-screen .dock.opp .dock-end .strip { grid-row: 1; } #app.board-screen .dock .strip { position: relative; display: grid !important; place-items: center; width: auto !important; height: auto !important; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; color: #f3e6c0; } #app.board-screen .dock .strip::after { content: ''; position: absolute; inset: -6px -4px; } /* 隱形加大點擊 */ #app.board-screen .dock .strip:disabled { cursor: default; } #app.board-screen .dock .strip::before { content: none; } /* 牌堆＝卡背疊；墓地＝最上面那張的卡圖（褪色）；張數是銅錢小章。空了就只剩石槽與一個淡字 */ .strip .pile { --pw: 20px; position: relative; z-index: 1; display: grid; place-items: center; width: var(--pw); height: calc(var(--pw) * 1.42); border-radius: 3px; background: var(--tbl-back, #5a1d12) center / cover; box-shadow: 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 1px rgba(226,186,110,.5), 1.5px -1.5px 0 #2a140c, 3px -3px 0 #c9a24f99, 0 3px 4px rgba(0,0,0,.55); transition: transform .18s ease, box-shadow .18s ease; } @media (min-width: 700px) { .strip .pile { --pw: 22px; } } .strip .pile.grave { background: linear-gradient(160deg, #57504a, #2a2520); box-shadow: 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 1px rgba(200,190,170,.35), 1.5px -1.5px 0 #1a1612, 3px -3px 0 #8a8070aa, 0 3px 4px rgba(0,0,0,.55); } .strip .pile .pile-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; filter: grayscale(.75) sepia(.35) brightness(.72) contrast(1.05); } .strip .pile.empty { background: rgba(0,0,0,.3); box-shadow: inset 0 1px 4px rgba(0,0,0,.8), 0 0 0 1px rgba(217,201,166,.3); } .strip .pile.empty b { display: none; } .strip .pile.empty::before { content: '空'; font: 900 calc(var(--pw) * .5)/1 "Noto Serif TC", serif; color: rgba(217,201,166,.32); } .strip .pile.grave.empty::before { content: '墓'; } .strip .pile b { position: relative; z-index: 2; display: grid; place-items: center; min-width: 1.55em; height: 1.55em; padding: 0 .18em; box-sizing: border-box; border-radius: 99px; font: 900 calc(var(--pw) * .5)/1 "Noto Serif TC", system-ui, sans-serif; color: #fff1cc; background: radial-gradient(circle at 40% 30%, #4a2e16, #140904 75%); box-shadow: 0 0 0 1px #d0a752, 0 1px 3px rgba(0,0,0,.75); text-shadow: 0 1px 1px #000; } .strip .pile.grave b { align-self: end; margin-bottom: 8%; color: #ece4d2; box-shadow: 0 0 0 1px #a9a292, 0 1px 3px rgba(0,0,0,.75); background: radial-gradient(circle at 40% 30%, #4a453d, #15130f 75%); } @media (hover: hover) { #app.board-screen .dock .sz-grave.strip:not(:disabled):hover .pile { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,226,160,.7), 1.5px -1.5px 0 #1a1612, 3px -3px 0 #8a8070aa, 0 0 10px rgba(255,200,120,.55), 0 4px 6px rgba(0,0,0,.55); } } /* 讓過：青銅框漆牌，高度約手牌的三分之二、在手牌帶裡置中，不再頂到天排 */ #app.board-screen .dock .btn.pass { align-self: center; width: 100% !important; height: min(calc(var(--hh) - 16px), 3.3rem) !important; writing-mode: horizontal-tb !important; padding: 0 0 0 .3em !important; font: 900 1rem/1 "Noto Serif TC", serif !important; letter-spacing: .3em; color: #ffe9bd; border: 1px solid #d6ad62; border-radius: 7px; background: radial-gradient(120% 90% at 50% 0%, #6a4a24, #33200e 62%, #24160a); box-shadow: inset 0 0 0 2px #1e1208, inset 0 0 0 3px rgba(226,186,110,.5), inset 0 10px 12px -8px rgba(255,226,170,.3), 0 3px 8px rgba(0,0,0,.55); text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.6); } #app.board-screen .dock .btn.pass:disabled { opacity: .8; filter: saturate(.5) brightness(.7); cursor: default; } @media (max-width: 600px) { #app.board-screen .dock .btn.pass { writing-mode: vertical-rl !important; height: calc(var(--hh) - 12px) !important; padding: .3em 0 0 !important; font-size: .95rem !important; letter-spacing: .3em; } } #app.board-screen .dock .btn.pass.armed { background: linear-gradient(180deg, #e0662f, #a3301a); border-color: #ffd88a; box-shadow: inset 0 0 0 2px rgba(80,20,8,.5), 0 0 0 2px #ffd88a, 0 0 14px rgba(255,170,80,.7); font-size: .8rem !important; letter-spacing: .05em; padding: 0 !important; animation: breathe2 .5s ease-in-out infinite alternate; } @media (max-width: 600px) { #app.board-screen .dock .btn.pass.armed { font-size: .7rem !important; letter-spacing: 0; } } /* ═ v26（接 v25）：青石牌堆加大～1.75×、內移靠木板。原 v25：≥900px 牌堆／墓地移出木板，放到青石上「沒有油燈」的那一側（我方左下、對手右上；燈在左上＋右下對角）。領袖留在底排。＜900 維持 v23 ═ */ /* 2026-10-16：門檻 900→1200。牌桌最寬 960，視窗不到約 1200 時兩側青石放不下牌堆，fixed 牌堆會疊到桌面上 */ @media (min-width: 1200px) { #app.board-screen .dock { gap: 12px !important; padding: 0 10px !important; /* v36：勿上下 padding，否則對手手牌與天排露木紋 */ --passw: 5rem; --bd: clamp(44px, calc(var(--hh) * .72), 56px); } /* 底排左端只留圓章；兩張小牌改 fixed 掛到青石 */ #app.board-screen .dock-end { display: block !important; align-self: center; width: var(--bd); height: var(--bd); place-items: unset; grid-template-columns: unset; grid-template-rows: unset; } #app.board-screen .dock-end .ldr-badge { grid-column: unset; display: block; } #app.board-screen .dock .strip { position: fixed !important; z-index: 6; display: grid !important; place-items: center; margin: 0; } #app.board-screen .dock .strip::after { inset: -10px; } /* 牌堆／墓地名牌掛在牌疊正下方 */ #app.board-screen .dock .strip::before { content: attr(data-cap); position: absolute; left: 50%; top: calc(100% + 7px); transform: translateX(-50%); z-index: 2; white-space: nowrap; padding: 2px 9px 2px calc(9px + .3em); border-radius: 99px; font: 700 .74rem/1.3 "Noto Serif TC", serif; letter-spacing: .3em; color: #e6d7b4; background: linear-gradient(180deg, rgba(42,26,14,.92), rgba(20,12,6,.92)); box-shadow: 0 0 0 1px rgba(201,162,79,.5), 0 2px 5px rgba(0,0,0,.5); transition: color .18s, box-shadow .18s; } @media (hover: hover) { #app.board-screen .dock .sz-grave.strip:not(:disabled):hover::before { color: #ffd88a; box-shadow: 0 0 0 1px #e2b45a, 0 0 8px rgba(255,190,90,.45), 0 2px 5px rgba(0,0,0,.5); } } .strip .pile { --pw: 70px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 2px rgba(226,186,110,.45), 3px -3px 0 #2a140c, 4px -4px 0 rgba(201,162,79,.55), 7px -7px 0 #2a140c, 8px -8px 0 rgba(201,162,79,.4), 0 10px 18px rgba(0,0,0,.6); } .strip .pile.grave { box-shadow: 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 2px rgba(200,190,170,.3), 3px -3px 0 #1a1612, 4px -4px 0 rgba(160,150,130,.5), 7px -7px 0 #1a1612, 8px -8px 0 rgba(160,150,130,.35), 0 10px 18px rgba(0,0,0,.6); } .strip .pile.empty { box-shadow: inset 0 2px 10px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.6), 0 0 0 1px rgba(217,201,166,.28), 0 1px 0 rgba(255,240,210,.08); } .strip .pile.empty::before { font-size: 1.9rem; color: rgba(217,201,166,.2); } .strip .pile b { font-size: 1.25rem; min-width: 1.75em; height: 1.75em; box-shadow: 0 0 0 1.5px #d0a752, 0 0 0 3px rgba(20,9,4,.85), 0 2px 6px rgba(0,0,0,.75); } .strip .pile.grave b { margin-bottom: 9px; box-shadow: 0 0 0 1.5px #a9a292, 0 0 0 3px rgba(15,13,10,.85), 0 2px 6px rgba(0,0,0,.75); } @media (hover: hover) { #app.board-screen .dock .sz-grave.strip:not(:disabled):hover .pile { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 2px rgba(255,226,160,.6), 3px -3px 0 #1a1612, 4px -4px 0 rgba(160,150,130,.5), 7px -7px 0 #1a1612, 8px -8px 0 rgba(160,150,130,.35), 0 0 16px rgba(255,200,120,.5), 0 12px 20px rgba(0,0,0,.6); } } /* 靠木板：放在視窗邊與 #app 之間偏內側（約石帶中線靠木板），不再貼螢幕外緣 */ #app.board-screen .dock.me .sz-deck.strip { left: max(24px, calc((100vw - min(960px, 100vw - 40px)) / 4 - 20px)); bottom: max(28px, env(safe-area-inset-bottom)); } #app.board-screen .dock.me .sz-grave.strip { left: max(24px, calc((100vw - min(960px, 100vw - 40px)) / 4 - 20px)); bottom: calc(max(28px, env(safe-area-inset-bottom)) + 132px); } #app.board-screen .dock.opp .sz-deck.strip { right: max(24px, calc((100vw - min(960px, 100vw - 40px)) / 4 - 20px)); top: max(28px, env(safe-area-inset-top)); } #app.board-screen .dock.opp .sz-grave.strip { right: max(24px, calc((100vw - min(960px, 100vw - 40px)) / 4 - 20px)); top: calc(max(28px, env(safe-area-inset-top)) + 132px); } /* 手牌平鋪 */ #app.board-screen .dock .hand .tile + .tile, #app.board-screen .ohand .cback + .cback { margin-left: clamp(calc(var(--hw) * -.78), calc((100cqw - var(--n) * var(--hw)) / max(var(--n) - 1, 1)), 10px) !important; } } /* ═ v34：矮抽屜（play 緊湊）；整桌 translateY 上移；開合有過渡；滑選跟手＋鄰卡預覽 ═ */ .kz-drawer { position: fixed; left: 50%; bottom: 0; z-index: 28; width: min(960px, 100vw); height: 0; max-height: 0; transform: translate(-50%, 100%); display: flex; flex-direction: column; box-sizing: border-box; background: linear-gradient(180deg, #3a1d14, #1c0d08 55%); border: 1px solid #c9a24f; border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -8px 28px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,180,.18); color: #e8dcc4; transition: transform .3s cubic-bezier(.22,.8,.2,1), opacity .24s ease, bottom .2s; padding: 0 8px calc(6px + env(safe-area-inset-bottom, 0px)); overflow: hidden; opacity: .96; -webkit-backdrop-filter: none; } .kz-drawer[hidden] { display: none !important; } body.kz-drawer-open { overflow: hidden; } body.kz-drawer-open .kz-drawer { transform: translate(-50%, 0); opacity: 1; } .kz-drawer-handle { width: 32px; height: 3px; border-radius: 99px; background: rgba(201,162,79,.55); margin: 3px auto 0; flex: none; } .kz-drawer-head { display: flex; align-items: center; gap: 6px; flex: none; padding: 0 0 1px; } .kz-drawer-title { font-weight: 900; font-size: .86rem; letter-spacing: .04em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffd88a; } .kz-drawer-x { background: none; border: 0; color: #cdbb98; font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 0 2px; } .kz-drawer-body { overflow: visible; flex: 0 0 auto; min-height: 0; font-size: .78rem; line-height: 1.35; padding: 0 0 2px; } .kz-drawer-body p { margin: .06rem 0; } .kz-drawer-body .ab { color: #e8dcc4; margin: 0; line-height: 1.3; } .kz-drawer-body .ab b { color: #ffd88a; } .kz-drawer-body blockquote { font-size: .78rem; margin: .12rem 0; padding: .1rem .4rem; border-left: 3px solid #b0452f; color: #f3e8d0; font-weight: 700; } .kz-drawer-body .why, .kz-drawer-body .src, .kz-drawer-body .muted { color: #b9a98a; font-size: .72rem; } .kz-drawer-body .err { color: #ff8a6a; font-weight: 700; font-size: .74rem; } .kz-drawer-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-items: center; flex: none; padding-top: 1px; padding-bottom: 0; } .kz-drawer-actions .btn { min-height: 24px; padding: .15rem .4rem; font-size: .72rem; } /* play：更矮更緊——能力＋典故擠在兩行內 */ .kz-drawer.kz-drawer-play { padding-top: 0; } .kz-drawer.kz-drawer-play .kz-drawer-body { font-size: .74rem; } .kz-drawer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; } .kz-drawer-grid .tile { width: 100%; height: auto; aspect-ratio: 2/3; max-height: none; } /* 牌桌畫面：html 不捲、body 捲（iOS 網址列不會跟著伸縮把 100dvh 弄變）。 * 抽屜開著時 main.js 的 layoutDrawerLift 在 #app 底下墊出抽屜高度（inline margin），預設捲到對手場上第一排貼頂，往上捲看得到對手手牌。 */ html.kz-board { overflow: hidden; } html.kz-board body { overflow-y: auto; overscroll-behavior: none; } #app.board-screen.drawer-open { padding-bottom: 0 !important; } @media (prefers-reduced-motion: reduce) { .kz-drawer { transition: none !important; } } /* 手牌上的手勢全歸遊戲（左右換選、往上拖出牌），不讓瀏覽器拿去捲動或縮放；整桌不選字、不跳長按選單 */ #app.board-screen .dock.me .hand { touch-action: none; } #app.board-screen, #app.board-screen * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } #app.board-screen img { -webkit-user-drag: none; } /* 拖曳出牌：跟手的是 .juice-layer 裡的分身，原牌在手牌裡留淡影；能放的排亮起，指到的那排讓出空位、亮出落點；拖曳中先收起出牌抽屜 */ body.kz-dragging, body.kz-dragging * { cursor: grabbing !important; } #app.board-screen .dock.me .hand .tile.kz-drag-src { opacity: .28 !important; filter: grayscale(.5) brightness(.8); animation: none !important; transform: none !important; } .juice-layer .tile.kz-avatar { z-index: 8; will-change: transform; transition: none; box-shadow: 0 0 0 1.5px #ffd88a, 0 18px 30px rgba(0,0,0,.6); } .juice-layer .kz-slot { z-index: 1; border-radius: 5px; border: 2px dashed rgba(255,228,165,.95); background: rgba(255,214,140,.14); opacity: 0; box-shadow: 0 0 14px 2px rgba(255,200,110,.55), inset 0 0 14px rgba(255,210,130,.35); transition: opacity .12s, left .14s cubic-bezier(.2,.8,.3,1), top .14s cubic-bezier(.2,.8,.3,1), width .14s, height .14s; } .juice-layer .kz-slot.on { opacity: 1; animation: slot-breathe 1s ease-in-out infinite alternate; } @keyframes slot-breathe { to { background: rgba(255,214,140,.26); } } .juice-layer .land-ring { z-index: 3; border-radius: 6px; border: 2px solid rgba(255,232,170,.95); box-shadow: 0 0 16px rgba(255,205,120,.85); } /* 讓位：排上的卡用 translate（不佔 transform，出牌演出的位移照常）；過渡只在拖曳中，落下那一刻 mount 清掉 --gx 時不能再滑一次 */ #app.board-screen .field.me .row-units > .tile { translate: var(--gx, 0px) 0; } body.kz-dragging #app.board-screen .field.me .row-units > .tile, body.kz-settle #app.board-screen .field.me .row-units > .tile { transition: translate .2s cubic-bezier(.2,.8,.3,1); } body.kz-dragging .kz-drawer { opacity: 0 !important; pointer-events: none; } #app.board-screen .row.drop-hot { box-shadow: inset 0 0 0 3px #ffe3a0, inset 0 0 28px rgba(255,210,130,.45), 0 0 26px 6px rgba(255,200,110,.75); } #app.board-screen .row.drop-hot::after { content: attr(data-drop); position: absolute; left: 50%; top: 3px; transform: translateX(-50%); z-index: 6; pointer-events: none; white-space: nowrap; padding: .15rem .7rem .15rem calc(.7rem + .3em); border-radius: 99px; font: 900 .78rem/1.2 "Noto Serif TC", serif; letter-spacing: .3em; color: #ffe9bd; background: rgba(30,16,8,.88); box-shadow: 0 0 0 1px #d6ad62, 0 3px 8px rgba(0,0,0,.5); } /* 滑動選牌：整排手牌不平移；只動 .tile.sel／.swipe-near（跟手／抬起／scale） */ #app.board-screen .dock.me .hand .tile { transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, opacity .18s ease, filter .18s ease; } #app.board-screen .dock.me .hand.swiping .tile.sel, #app.board-screen .dock.me .hand.swiping .tile.swipe-near { animation-play-state: paused; } #app.board-screen .dock.me .hand.swiping .tile.sel { transform: translate3d(var(--swipe-x, 0px), var(--ly), 0) scale(var(--ls)); transition: none; will-change: transform; } #app.board-screen .dock.me .hand.swiping .tile.swipe-near { --ly: -12px; --ls: 1.24; z-index: 7; opacity: .94; filter: brightness(1.07); transform: translate3d(var(--swipe-x, 0px), var(--ly), 0) scale(var(--ls)); transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease, filter .12s ease; box-shadow: 0 0 0 1px rgba(226,196,122,.55), 0 10px 16px rgba(0,0,0,.45); } #app.board-screen .dock.me .hand.swipe-snap .tile.sel, #app.board-screen .dock.me .hand.swipe-snap .tile.swipe-near { transform: translate3d(var(--swipe-x, 0px), var(--ly), 0) scale(var(--ls)); transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, opacity .18s ease, filter .18s ease; } /* ═ v36／v37／v38：.kz-stack 結構上把 dock 與 field 相鄰（gap:0）═ * v37：撤銷 -3px；匣不透明＋gap:0。 * v38：撤半透明描邊＋.dock 偽元素 4px 匣色封邊（見上方），杜絕織錦↔手牌木紋髮絲。 */ #app.board-screen .kz-stack { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 0 !important; margin: 0 !important; padding: 0 !important; } #app.board-screen .kz-stack > .dock { flex: none; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #app.board-screen .kz-stack > .field { flex: 1 1 0; min-height: 0; margin: 0 !important; padding: 0 !important; } #app.board-screen .opp-stack > .dock.opp { position: relative; z-index: 5; overflow: hidden; /* 鎖死高度：dock-end 不得把 --dh 撐開 */ } #app.board-screen .me-stack > .dock.me { position: relative; z-index: 9; } /* v30／v31：觸控仍保留排上 sheen2（transform）；只停卡背 background-position 來回掃 */ @media (pointer: coarse) { #app.board-screen .ohand .cback::after { animation: none !important; opacity: .2; transform: translateX(-26.667%); } }