/* ============================================================ mobile.css — 巫师3昆特牌 手机竖屏适配 由 game.html 在竖屏时给 添加 .portrait class 触发。 横屏/桌面保持原版 16:9 布局（由外壳 index.html 缩放）。 所有定位元素显式使用 position:absolute，覆盖原版 relative 定位。 ============================================================ */ /* ---------- 基础画布 ---------- */ html.portrait, html.portrait body { width: 100%; height: 100%; overflow: hidden; } html.portrait main { position: absolute; width: 100vw; height: 100vh; background-image: none; background-color: #101010; } html.portrait .panel { position: absolute !important; width: 100vw !important; height: 100vh !important; left: 0 !important; top: 0 !important; overflow: visible; } html.portrait #click-background { display: block; z-index: 5; background: transparent; } html.portrait #hand-op { display: none; } /* ---------- 退出按钮 ---------- */ html.portrait #exit-game { position: absolute; top: 1vh; left: auto; right: 1.5vw; width: 6vw; height: 6vw; opacity: .8; z-index: 200; } /* ---------- 顶部对手条 ---------- */ html.portrait #stats-op { position: absolute; top: 1vh; left: 2vw; width: 64vw; height: 6.5vh; margin-bottom: 0; background-color: rgba(20,20,20,.72); border-radius: 1.5vw; } html.portrait #name-op { position: absolute; left: 20%; top: 5%; width: 46%; font-size: 2.8vw; } html.portrait #deck-name-op { position: absolute; left: 20%; top: 40%; width: 46%; font-size: 2.2vw; } html.portrait #hand-count-op { position: absolute; left: 68%; top: 10%; height: 60%; width: 12%; font-size: 2.8vw; } html.portrait #score-total-op { position: absolute; left: 86%; top: 15%; height: 56%; width: 14%; font-size: 3.6vw; } html.portrait #gem1-op, html.portrait #gem2-op { position: absolute; width: 7%; height: 38%; } html.portrait #gem1-op { left: 62%; top: 52%; } html.portrait #gem2-op { left: 54%; top: 52%; } html.portrait #passed-op { position: absolute; font-size: 2.8vw; left: 50%; top: -8%; } html.portrait #leader-op { position: absolute; top: 1vh; left: 67vw; width: 12vw; height: 6.5vh; margin-bottom: 0; } html.portrait #leader-op .leader-container { width: 100%; height: 100%; margin-bottom: 0; } /* ---------- 对手战场 ---------- */ html.portrait #field-op { position: absolute; top: 8.5vh; left: 0; width: 100vw; height: 29vh; } html.portrait #field-op .field-row { height: 9.6vh; } /* ---------- 天气 ---------- */ html.portrait #weather { position: absolute; top: 38vh; left: 2vw; width: 96vw; height: 4.5vh; margin-bottom: 0; } /* ---------- 我方战场 ---------- */ html.portrait #field-me { position: absolute; top: 43vh; left: 0; width: 100vw; height: 29vh; } html.portrait #field-me .field-row { height: 9.6vh; } /* 战场行内元素适配（原版已 absolute） */ html.portrait .field-row .row-score { position: absolute; width: 9%; font-size: 3.4vw; } html.portrait .field-row .row-special { position: absolute; width: 16%; left: 9%; } html.portrait .field-row .row-cards { position: absolute; width: 74%; left: 26%; } html.portrait .field-row .row-weather { position: absolute; left: 9%; width: 90%; } /* ---------- 底部我方条 ---------- */ html.portrait #stats-me { position: absolute; top: 73vh; left: 2vw; width: 64vw; height: 6.5vh; margin-bottom: 0; background-color: rgba(20,20,20,.72); border-radius: 1.5vw; } html.portrait #name-me { position: absolute; left: 20%; top: 5%; width: 46%; font-size: 2.8vw; } html.portrait #deck-name-me { position: absolute; left: 20%; top: 40%; width: 46%; font-size: 2.2vw; } html.portrait #hand-count-me { position: absolute; left: 68%; top: 10%; height: 60%; width: 12%; font-size: 2.8vw; } html.portrait #score-total-me { position: absolute; left: 86%; top: 15%; height: 56%; width: 14%; font-size: 3.6vw; } html.portrait #gem1-me, html.portrait #gem2-me { position: absolute; width: 7%; height: 38%; } html.portrait #gem1-me { left: 62%; top: 52%; } html.portrait #gem2-me { left: 54%; top: 52%; } html.portrait #passed-me { position: absolute; font-size: 2.8vw; left: 50%; top: -8%; } html.portrait #leader-me { position: absolute; top: 73vh; left: 67vw; width: 12vw; height: 6.5vh; margin-bottom: 0; } html.portrait #leader-me .leader-container { width: 100%; height: 100%; margin-bottom: 0; } html.portrait #pass-button { position: absolute; top: 80vh; left: 2vw; width: 30vw; height: 4.5vh; font-size: 3.6vw; } /* ---------- 我方牌库/弃牌（底部右侧） ---------- */ html.portrait #deck-me { position: absolute; top: 80vh; left: 70vw; width: 12vw; height: 4.5vh; margin-bottom: 0; } html.portrait #grave-me { position: absolute; top: 80vh; left: 84vw; width: 12vw; height: 4.5vh; margin-bottom: 0; } /* ---------- 手牌区 ---------- */ html.portrait #field-hand { position: absolute; top: 85.5vh; left: 0; width: 100vw; height: 14.5vh; z-index: 50; } html.portrait #hand-row { position: absolute; left: 1vw; width: 98vw; height: 100%; top: 0; overflow-x: auto; overflow-y: visible; justify-content: flex-start; align-items: flex-end; padding-bottom: 1vh; } /* ---------- 卡牌尺寸（竖屏放大） ---------- */ html.portrait .card { height: 8.8vh; width: 6.1vh; } html.portrait .card-container .card { margin: 0 .4vw; } html.portrait .card > div:nth-child(1) > div { font-size: 2.2vw; } html.portrait .card > div:nth-child(3) { font-size: 2.2vw; } html.portrait .deck-card { height: 9.5vh; width: 6.6vh; } html.portrait #hand-row .card { height: 12.5vh; width: 8.7vh; flex-shrink: 0; } /* ---------- 通知条 ---------- */ html.portrait #notification-bar { position: absolute; top: 44%; height: 12%; } html.portrait #notification-bar > div { position: absolute; width: 30%; left: 12%; } html.portrait #notification-bar > div::after { font-size: 2.6vw; width: 320%; } /* ---------- 卡牌预览 ---------- */ html.portrait .card-preview > .card-lg { position: absolute; top: 12vh; left: 6vw; height: 34vh; width: 18vh; } html.portrait .card-preview > .card-description { position: absolute; top: 48vh; left: 4vw; width: 92vw; height: 12vh; } html.portrait .card-lg { height: 32vh; width: 17vh; border-radius: 2vw; } html.portrait .card-description > h1 { font-size: 2.6vw; } html.portrait .card-description > p { font-size: 2.4vw; } /* ---------- 弹窗 ---------- */ html.portrait #popup { position: absolute; height: 100vh; width: 100vw; } html.portrait #popup > div { width: 80%; margin-top: -50px; } html.portrait #popup h3 { font-size: 3vw; } html.portrait #popup p { font-size: 3.2vw; } html.portrait #popup button { height: 5vh; font-size: 3vw; } /* ---------- 结算界面 ---------- */ html.portrait #end-screen { position: absolute; width: 100vw; height: 100vh; } html.portrait #end-screen > :nth-child(1) { position: absolute; top: 10%; left: 10%; width: 80%; height: 30%; } html.portrait #end-screen > table { position: absolute; top: 42%; left: 5%; width: 90%; height: 26%; } html.portrait #end-screen tbody :first-child th { font-size: 2.6vw; } html.portrait #end-screen td { font-size: 4vw; } html.portrait #end-screen tr :first-child { font-size: 3vw; } html.portrait #end-screen > p { position: absolute; top: 72%; left: 5%; width: 90%; font-size: 2.8vw; } html.portrait #end-screen button { position: absolute; height: 7vh; width: 26vw; top: 84%; font-size: 3.4vw; } html.portrait #end-screen button:nth-of-type(1) { left: 4%; } html.portrait #end-screen button:nth-of-type(2) { left: 37%; } html.portrait #end-screen button:nth-of-type(3) { left: 70%; } /* ---------- 选牌轮播 ---------- */ html.portrait #carousel { position: absolute; width: 100vw; height: 100vh; } html.portrait #carousel > :nth-child(1) { padding: 18% 4%; align-items: center; } html.portrait #carousel > :nth-child(1) > .card-lg { height: 38vh; width: 20vh; } html.portrait #carousel > :nth-child(1) > :nth-child(2n) { width: 16vh; height: 30vh; } html.portrait #carousel > :nth-child(1) > :nth-child(4n - 3) { width: 13vh; height: 25vh; } html.portrait #carousel > :nth-child(3) { position: absolute; top: 6%; font-size: 3vw; } html.portrait #carousel .card-description { position: absolute; left: 6%; top: 76%; width: 88vw; } /* ---------- 牌组构筑界面 ---------- */ html.portrait #deck-customization { position: absolute; width: 100vw; height: 100vh; overflow-y: auto; background-color: rgba(8,8,8,.98); } html.portrait #faction-title { position: absolute; top: 1.5%; height: 6%; } html.portrait #deck-customization h1 { font-size: 4vw; top: -30%; } html.portrait #faction-description { position: absolute; top: 7%; left: 4%; width: 92%; font-size: 2.8vw; } html.portrait .deck-options { position: absolute; top: 12.5%; font-size: 3vw; } html.portrait #upload-deck { left: 6%; } html.portrait #change-faction { left: 38%; } html.portrait #download-deck { left: 66%; } html.portrait .card-contianer-title { position: absolute; font-size: 3vw; width: 30%; height: 3%; } html.portrait #card-bank-title { top: 16%; left: 5%; } html.portrait #card-deck-title { top: 50%; left: 5%; } html.portrait #card-bank { position: absolute; top: 19.5%; left: 3%; width: 46%; height: 29%; overflow-y: auto; } html.portrait #card-deck { position: absolute; top: 53.5%; left: 3%; width: 46%; height: 29%; overflow-y: auto; } html.portrait .card-array .card-lg { width: 15vw; height: 28vw; border-radius: 2vw; } html.portrait #card-leader { position: absolute; top: 17%; left: 56%; width: 30%; height: 22%; } html.portrait #card-leader p { font-size: 3vw; } html.portrait #deck-stats { position: absolute; top: 40%; left: 55%; width: 42%; height: 26%; } html.portrait #deck-stats > p:nth-child(odd) { font-size: 2.6vw; } html.portrait #deck-stats > p:nth-child(even) { font-size: 2.8vw; } html.portrait #start-game { position: absolute; top: 69%; left: 56%; width: 40%; height: 6%; font-size: 3.4vw; } html.portrait #opponent-preview { position: absolute; top: 76%; left: 0; width: 100%; } html.portrait #opponent-preview>div>p { font-size: 2.8vw; } html.portrait #op-preview-faction { width: 5vw; height: 5vw; } html.portrait #op-preview-leader>p { font-size: 2.8vw; } html.portrait #opponent-preview button { width: 5vw; height: 5vw; } /* ---------- 阵营选择 ---------- */ html.portrait #deck-selector { position: absolute; width: 100vw; height: 100vh; } /* ---------- 设置按钮 ---------- */ html.portrait .settings-button { width: 7vw; height: 7vw; } html.portrait .settings-button > img { width: 7vw; height: 7vw; } html.portrait #toggle-music { top: 90vh; left: 45vw; } html.portrait #toggle-sfx { top: 90vh; left: 55vw; } html.portrait #toggle-music.deck-menu { top: 84vh; left: 40vw; } html.portrait #toggle-sfx.deck-menu { top: 84vh; left: 52vw; }