/* ===================================================================== CROWBOUND TACTICS — MOBILE UI FOUNDATION Final cascade loaded after game.css/site.css. Targets iPhone 13 class devices, compact Android phones, large Android phones and tablets while preserving the desktop layout. ===================================================================== */ :root{ --cb-safe-top: env(safe-area-inset-top, 0px); --cb-safe-right: env(safe-area-inset-right, 0px); --cb-safe-bottom: env(safe-area-inset-bottom, 0px); --cb-safe-left: env(safe-area-inset-left, 0px); --cb-vh: var(--app-vh, 1vh); --cb-vw: var(--app-vw, 1vw); --cb-touch: 44px; --cb-mobile-gap: clamp(6px, 1.8vw, 12px); --cb-mobile-pad: clamp(8px, 2.6vw, 16px); --cb-mobile-font: clamp(12px, 3.25vw, 15px); --cb-mobile-title: clamp(20px, 6vw, 32px); } html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body.mobile-device{ width:100vw!important; height:calc(var(--cb-vh) * 100)!important; min-height:calc(var(--cb-vh) * 100)!important; max-height:calc(var(--cb-vh) * 100)!important; overflow:hidden!important; overscroll-behavior:none!important; touch-action:manipulation; -webkit-user-select:none; user-select:none; } body.mobile-device input, body.mobile-device textarea, body.mobile-device select{ -webkit-user-select:text; user-select:text; font-size:16px!important; /* evita zoom automático do Safari */ } body.mobile-device button, body.mobile-device [role="button"], body.mobile-device input, body.mobile-device select, body.mobile-device textarea{ touch-action:manipulation; } body.mobile-device button:not(.card):not(.deckCollectionCard):not(.deckPickerCard):not(.setupPieceOption), body.mobile-device [role="button"]{ min-height:var(--cb-touch); } body.mobile-device img, body.mobile-device canvas, body.mobile-device video{ max-width:100%; } body.mobile-device .hidden{display:none!important} /* --------------------------------------------------------------------- ORIENTATION Menus remain usable in portrait. Rotation is requested only in battle. --------------------------------------------------------------------- */ body.mobile-device .mobileRotateOverlay{display:none!important} body.mobile-device.mobile-portrait-lock:not(.menu-open):not(.match-ended) .mobileRotateOverlay{ display:grid!important; padding:calc(18px + var(--cb-safe-top)) calc(18px + var(--cb-safe-right)) calc(18px + var(--cb-safe-bottom)) calc(18px + var(--cb-safe-left))!important; } body.mobile-device.mobile-portrait-lock.menu-open{ overflow:hidden!important; touch-action:manipulation!important; } body.mobile-device .mobileRotateCard{ width:min(420px, 92vw)!important; max-height:calc(var(--cb-vh) * 100 - 40px)!important; overflow:auto!important; padding:clamp(20px, 6vw, 30px)!important; } body.mobile-device .mobileRotateCard strong{font-size:clamp(24px, 7vw, 34px)!important} body.mobile-device .mobileRotateCard span{font-size:clamp(13px, 3.8vw, 17px)!important} body.mobile-device .mobileFullscreenBtn{min-height:48px!important;padding:10px 20px!important;font-size:14px!important} /* --------------------------------------------------------------------- GENERIC MOBILE VIEWPORT / SCROLL CONTAINERS --------------------------------------------------------------------- */ @media (max-width: 1100px), (pointer:coarse){ body.mobile-device #game, body.mobile-device #mainMenu, body.mobile-device .loginSplashOverlay{ position:fixed!important; inset:0!important; width:100vw!important; height:calc(var(--cb-vh) * 100)!important; max-width:none!important; max-height:none!important; } body.mobile-device #mainMenu{ padding:0!important; overflow:hidden!important; place-items:stretch!important; } body.mobile-device .menuShell, body.mobile-device #menuShell, body.mobile-device #menuShell.home{ width:100vw!important; height:calc(var(--cb-vh) * 100)!important; min-height:0!important; max-width:none!important; max-height:none!important; margin:0!important; border-radius:0!important; border:0!important; padding:calc(var(--cb-safe-top) + var(--cb-mobile-pad)) calc(var(--cb-safe-right) + var(--cb-mobile-pad)) calc(var(--cb-safe-bottom) + var(--cb-mobile-pad)) calc(var(--cb-safe-left) + var(--cb-mobile-pad))!important; overflow:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch; } body.mobile-device .menuView:not(.hidden){ width:100%!important; min-width:0!important; max-width:none!important; min-height:100%!important; box-sizing:border-box!important; } body.mobile-device .menuTopline, body.mobile-device .deckForgeTopbar, body.mobile-device .onlineScreenTopbar, body.mobile-device .patchNotesHeader, body.mobile-device .playChoiceHeader, body.mobile-device .friendProfileHeader, body.mobile-device .deckBoardHeader, body.mobile-device .setupPiecePickerHeader, body.mobile-device .deckCardPickerHeader, body.mobile-device .deckCardInfoHeader, body.mobile-device .rewardHeader, body.mobile-device .gameOptionsHeader{ position:sticky!important; top:0!important; z-index:20!important; width:100%!important; min-width:0!important; margin:0 0 var(--cb-mobile-gap)!important; padding:8px!important; gap:8px!important; align-items:center!important; background:linear-gradient(180deg,rgba(5,10,18,.98),rgba(5,10,18,.88))!important; backdrop-filter:blur(12px)!important; } body.mobile-device .menuTopline h2, body.mobile-device .deckForgeTopbar h2, body.mobile-device .onlineScreenTopbar h2, body.mobile-device .patchNotesHeader h2, body.mobile-device .playChoiceHeader h2, body.mobile-device .friendProfileHeader h2, body.mobile-device .deckBoardHeader h2, body.mobile-device .deckCardPickerHeader h2, body.mobile-device .deckCardInfoHeader h2{ font-size:var(--cb-mobile-title)!important; line-height:1.05!important; overflow-wrap:anywhere!important; } body.mobile-device .menuTopline .sub, body.mobile-device .onlineScreenTopbar .sub, body.mobile-device .deckForgeTopbar .sub, body.mobile-device .playChoiceHeader .sub, body.mobile-device .patchNotesHeader .sub{ font-size:12px!important; line-height:1.25!important; } body.mobile-device .backToMainBtn, body.mobile-device .onlineBackBtn, body.mobile-device [id^="close"], body.mobile-device [id$="CancelBtn"]{ flex:0 0 auto!important; min-width:44px!important; white-space:nowrap!important; } body.mobile-device .panelWindow, body.mobile-device .panel, body.mobile-device .menuPanel, body.mobile-device .onlineBox, body.mobile-device .deckForgeSelectedPanel, body.mobile-device .deckForgeCollectionPanel{ min-width:0!important; box-sizing:border-box!important; } body.mobile-device .small, body.mobile-device .sub, body.mobile-device .hint, body.mobile-device small{ overflow-wrap:anywhere; } body.mobile-device .accountButtons, body.mobile-device .onlineActions, body.mobile-device .menuFooter, body.mobile-device .deckFooterActions, body.mobile-device .deckCardPickerActions{ display:flex!important; flex-wrap:wrap!important; gap:8px!important; } body.mobile-device .accountButtons > *, body.mobile-device .onlineActions > button, body.mobile-device .menuFooter > button, body.mobile-device .deckFooterActions > button{ flex:1 1 150px!important; } body.mobile-device .patchNotesPanel, body.mobile-device .playChoicePanel, body.mobile-device .friendProfilePanel, body.mobile-device .profileAvatarModalPanel, body.mobile-device .deckBoardPanel, body.mobile-device .setupPiecePickerPanel, body.mobile-device .deckCardPickerPanel, body.mobile-device .deckCardInfoPanel, body.mobile-device .devToolsCard, body.mobile-device .gameOptionsModal, body.mobile-device .nickModal > div, body.mobile-device .rewardPanel{ width:calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 16px)!important; max-width:none!important; max-height:calc(var(--cb-vh) * 100 - var(--cb-safe-top) - var(--cb-safe-bottom) - 16px)!important; margin:0!important; padding:var(--cb-mobile-pad)!important; overflow:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch; } body.mobile-device .patchNotesModal, body.mobile-device .playChoiceModal, body.mobile-device .friendProfileModal, body.mobile-device .profileAvatarModal, body.mobile-device .deckBoardModal, body.mobile-device .setupPiecePickerModal, body.mobile-device .deckCardPickerModal, body.mobile-device .deckCardInfoModal, body.mobile-device .devToolsModal, body.mobile-device .nickModal, body.mobile-device #rewardOverlay{ padding:calc(var(--cb-safe-top) + 8px) calc(var(--cb-safe-right) + 8px) calc(var(--cb-safe-bottom) + 8px) calc(var(--cb-safe-left) + 8px)!important; align-items:center!important; justify-content:center!important; } } /* --------------------------------------------------------------------- SPLASH + AUTH --------------------------------------------------------------------- */ @media (max-width:1100px), (pointer:coarse){ body.mobile-device .loginSplashOverlay{ padding:calc(var(--cb-safe-top) + 10px) calc(var(--cb-safe-right) + 10px) calc(var(--cb-safe-bottom) + 10px) calc(var(--cb-safe-left) + 10px)!important; overflow:auto!important; } body.mobile-device .loginSplashContent{ width:min(520px, 94vw)!important; max-width:100%!important; max-height:calc(var(--cb-vh) * 100 - var(--cb-safe-top) - var(--cb-safe-bottom) - 20px)!important; padding:10px!important; gap:10px!important; overflow:auto!important; } body.mobile-device .loginLogoBox{ width:min(320px, 72vw)!important; max-height:28vh!important; margin:0 auto!important; } body.mobile-device .loginLogoBox img{max-height:28vh!important;object-fit:contain!important} body.mobile-device .loginSplashDetail{font-size:clamp(12px,3.4vw,15px)!important;text-align:center!important} body.mobile-device .loginSplashActions{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important} body.mobile-device .loginSplashPrimary, body.mobile-device .loginSplashSecondary{width:100%!important;min-height:48px!important;font-size:14px!important} body.mobile-device.auth-locked #mainMenu, body.mobile-device.auth-locked #menuShell, body.mobile-device.auth-locked #menuShell.home, body.mobile-device.auth-locked .epicMenuStage{ width:100vw!important; height:calc(var(--cb-vh) * 100)!important; max-width:none!important; max-height:none!important; min-height:0!important; overflow:auto!important; } body.mobile-device.auth-locked .epicMenuStage{ display:grid!important; place-items:center!important; padding:calc(var(--cb-safe-top) + 8px) calc(var(--cb-safe-right) + 8px) calc(var(--cb-safe-bottom) + 8px) calc(var(--cb-safe-left) + 8px)!important; } body.mobile-device.auth-locked #accountPanel{ position:relative!important; inset:auto!important; left:auto!important; top:auto!important; transform:none!important; width:min(480px, 100%)!important; max-width:100%!important; max-height:calc(var(--cb-vh) * 100 - var(--cb-safe-top) - var(--cb-safe-bottom) - 16px)!important; margin:auto!important; padding:clamp(12px,3vw,18px)!important; overflow:auto!important; -webkit-overflow-scrolling:touch; } body.mobile-device.auth-locked #accountPanel input{ width:100%!important; min-height:48px!important; margin:4px 0!important; } body.mobile-device.auth-locked .firebaseGoogleBtn, body.mobile-device.auth-locked .accountTabs button, body.mobile-device.auth-locked .accountButtons button{min-height:48px!important} body.mobile-device.auth-locked .authInlineFields{display:grid!important;grid-template-columns:1fr!important;gap:4px!important} body.mobile-device.auth-locked .authTermsRow{align-items:flex-start!important;font-size:13px!important;line-height:1.35!important} body.mobile-device.auth-locked .authTermsRow input{width:22px!important;height:22px!important;min-height:22px!important;flex:0 0 22px!important} body.mobile-device.auth-locked .accountStatus{font-size:12px!important;line-height:1.35!important;max-height:none!important;overflow:visible!important} } /* --------------------------------------------------------------------- MAIN MENU --------------------------------------------------------------------- */ @media (max-width:760px) and (orientation:portrait){ body.mobile-device.menu-open:not(.auth-locked):not(.deck-open):not(.enchant-open) #menuShell.home .epicMenuStage.chessMenuStage{ width:100%!important; min-height:100%!important; height:auto!important; display:flex!important; flex-direction:column!important; gap:10px!important; padding:0!important; overflow:visible!important; } body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuLeftRail, body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuCenterColumn, body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .friendsSidebar{ position:relative!important; inset:auto!important; width:100%!important; max-width:none!important; height:auto!important; max-height:none!important; grid-column:auto!important; grid-row:auto!important; } body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuCenterColumn{order:-1!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:8px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .epicPlayWrap{width:100%!important;display:grid!important;place-items:center!important;margin:0!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .heroPlayButton.imageButton{ width:min(360px, 92vw)!important; min-height:92px!important; height:auto!important; margin:0!important; } body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .heroPlayButton.imageButton img{max-height:112px!important;object-fit:contain!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuActionStack{ width:100%!important; display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; } body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuActionBtn{ width:100%!important; min-width:0!important; min-height:58px!important; padding:7px 9px!important; font-size:clamp(11px,3.2vw,14px)!important; gap:7px!important; } body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuActionIcon{width:32px!important;height:32px!important;flex:0 0 32px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuProfileCard{width:100%!important;padding:10px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuProfileHero{grid-template-columns:72px minmax(0,1fr)!important;gap:10px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuProfileAvatarBtn, body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .avatarFrame--menu{width:72px!important;height:72px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .patchNotesDock{position:relative!important;inset:auto!important;width:100%!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .patchNotesBtn{width:100%!important;height:52px!important;display:flex!important;gap:8px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .friendsSidebar{display:flex!important;flex-direction:column!important;min-height:260px!important;max-height:55vh!important;overflow:hidden!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .friendsList{min-height:120px!important;overflow:auto!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .friendsWidgetToggle{display:none!important} } @media (orientation:landscape) and (max-height:680px) and (max-width:1100px){ body.mobile-device.menu-open:not(.auth-locked):not(.deck-open):not(.enchant-open) #menuShell.home .epicMenuStage.chessMenuStage{ display:grid!important; grid-template-columns:minmax(150px,22vw) minmax(280px,1fr) minmax(160px,24vw)!important; grid-template-rows:minmax(0,1fr)!important; gap:8px!important; height:100%!important; min-height:0!important; padding:0!important; overflow:hidden!important; } body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuLeftRail, body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuCenterColumn, body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .friendsSidebar{min-height:0!important;height:100%!important;overflow:hidden!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuLeftRail{display:flex!important;flex-direction:column!important;gap:6px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuCenterColumn{display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;align-items:center!important;justify-items:center!important;padding:0!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .heroPlayButton.imageButton{width:min(340px,48vw)!important;min-height:70px!important;height:auto!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .heroPlayButton.imageButton img{max-height:82px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuActionStack{width:min(430px,100%)!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuActionBtn{min-height:42px!important;height:auto!important;min-width:0!important;padding:4px 7px!important;font-size:11px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuActionIcon{width:27px!important;height:27px!important;flex:0 0 27px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuProfileCard{padding:7px!important;overflow:auto!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuProfileHero{grid-template-columns:54px 1fr!important;gap:6px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .menuProfileAvatarBtn, body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .avatarFrame--menu{width:54px!important;height:54px!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .friendsSidebar{padding:7px!important;display:flex!important;flex-direction:column!important} body.mobile-device.menu-open:not(.auth-locked) #menuShell.home .friendsList{min-height:0!important;overflow:auto!important} } /* --------------------------------------------------------------------- PLAY / ONLINE / SHOP / SETTINGS --------------------------------------------------------------------- */ @media (max-width:760px) and (orientation:portrait){ body.mobile-device #menuPlay, body.mobile-device #menuOnline, body.mobile-device #menuShop, body.mobile-device #menuSettings{ padding:0!important; min-height:100%!important; overflow:visible!important; } body.mobile-device #playDeckSlots, body.mobile-device .slotGrid{grid-template-columns:1fr!important;gap:10px!important} body.mobile-device .playChoiceGrid{grid-template-columns:1fr!important;gap:10px!important} body.mobile-device .playChoiceCard{min-height:116px!important;padding:14px!important} body.mobile-device .onlineScreenTopbar{position:sticky!important;inset:auto!important;display:flex!important;align-items:center!important} body.mobile-device .onlineScreenTopbar > div{min-width:0!important;flex:1!important} body.mobile-device .onlineLobbyScreen{min-height:100%!important;padding:0!important} body.mobile-device .onlineBox{min-height:0!important;margin:0!important;gap:10px!important;padding-bottom:12px!important} body.mobile-device .onlineLobbyStage{padding:0!important} body.mobile-device .onlineLobby{grid-template-columns:1fr!important;gap:10px!important;padding:10px!important} body.mobile-device .onlinePlayerSlot{min-height:150px!important;padding:12px!important} body.mobile-device .onlineRoomCode{font-size:clamp(22px,8vw,36px)!important;letter-spacing:.12em!important;overflow-wrap:anywhere!important} body.mobile-device .onlineActions input{flex:1 1 100%!important;min-width:0!important;min-height:48px!important} body.mobile-device .onlineRooms{max-height:none!important;overflow:visible!important} body.mobile-device .rankLeaderboardTable{overflow:auto!important} body.mobile-device #menuShop .shopCategories{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;gap:7px!important;padding-bottom:4px!important;scroll-snap-type:x proximity} body.mobile-device #menuShop .shopCategories button{flex:0 0 auto!important;min-height:44px!important;scroll-snap-align:start} body.mobile-device #menuShop .shopList{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} body.mobile-device #menuShop .shopCard{min-width:0!important;padding:8px!important} body.mobile-device #menuSettings .settingsTabs{position:sticky!important;top:68px!important;z-index:18!important;display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;gap:6px!important;padding:4px 0!important;background:rgba(5,10,18,.96)!important} body.mobile-device #menuSettings .settingsTab{flex:1 0 120px!important;min-height:44px!important;font-size:11px!important} body.mobile-device #menuSettings .settingsTabbedGrid{height:auto!important;overflow:visible!important} body.mobile-device #menuSettings .settingsPanelTab.active{height:auto!important;max-height:none!important;overflow:visible!important;padding-bottom:16px!important} body.mobile-device #menuSettings .configRow, body.mobile-device #menuSettings .configRow.configRowBlock{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;padding:10px!important} body.mobile-device #menuSettings .audioControl, body.mobile-device #menuSettings .graphicsControl{display:grid!important;grid-template-columns:1fr!important;gap:6px!important} body.mobile-device #menuSettings input[type="range"]{width:100%!important;min-height:44px!important} body.mobile-device #menuSettings select, body.mobile-device #menuSettings button{width:100%!important;min-height:48px!important} } @media (orientation:landscape) and (max-height:680px) and (max-width:1100px){ body.mobile-device #menuPlay, body.mobile-device #menuOnline, body.mobile-device #menuShop, body.mobile-device #menuSettings{height:100%!important;min-height:0!important;overflow:auto!important;padding:0!important} body.mobile-device .onlineScreenTopbar{position:sticky!important;inset:auto!important} body.mobile-device .onlineBox{min-height:0!important;margin:0!important} body.mobile-device .onlineLobby{min-height:0!important} body.mobile-device #menuShop .shopList{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important} } /* --------------------------------------------------------------------- DECK / STARTING BOARD / CARD MODALS --------------------------------------------------------------------- */ @media (max-width:760px) and (orientation:portrait){ body.mobile-device.deck-open #menuShell, body.mobile-device.deck-open #menuDeck.deckForgeScreen{ position:relative!important; inset:auto!important; width:100%!important; height:auto!important; min-height:100%!important; max-height:none!important; padding:0!important; overflow:visible!important; display:flex!important; flex-direction:column!important; gap:8px!important; } body.mobile-device.deck-open .deckForgeTopbar{grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:"back title" "currency currency"!important;padding:6px!important} body.mobile-device.deck-open .deckBackGem{grid-area:back!important;width:46px!important;height:46px!important;min-width:46px!important} body.mobile-device.deck-open .deckForgeHeading{grid-area:title!important;min-width:0!important} body.mobile-device.deck-open .deckForgeCurrencies{grid-area:currency!important;width:100%!important;display:flex!important;overflow-x:auto!important;gap:6px!important} body.mobile-device.deck-open .deckMainTabs{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;gap:6px!important;position:sticky!important;top:0!important;z-index:19!important;background:rgba(5,10,18,.97)!important;padding:4px 0!important} body.mobile-device.deck-open .deckMainTabs button{flex:1 0 115px!important;min-height:44px!important;font-size:11px!important} body.mobile-device.deck-open .deckSlotTabs{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;max-height:none!important;gap:6px!important} body.mobile-device.deck-open .deckSlotTabs button{flex:0 0 auto!important;min-height:44px!important} body.mobile-device.deck-open .deckForgeLayout{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px!important} body.mobile-device.deck-open .deckForgeSelectedPanel{display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;max-height:none!important;padding:8px!important;overflow:visible!important} body.mobile-device.deck-open .deckCountCard, body.mobile-device.deck-open .deckInspector{display:none!important} body.mobile-device.deck-open .deckTitleNav{width:100%!important} body.mobile-device.deck-open .deckForgeName{width:100%!important;min-height:44px!important;font-size:15px!important} body.mobile-device.deck-open .deckCarouselShell{display:grid!important;grid-template-columns:40px minmax(0,1fr) 40px!important;width:100%!important;gap:5px!important} body.mobile-device.deck-open .deckCarouselArrow{width:40px!important;height:96px!important;min-width:40px!important} body.mobile-device.deck-open #deckSummary.deckForgeStrip, body.mobile-device.deck-open .deckForgeStrip{display:flex!important;height:156px!important;min-height:156px!important;overflow-x:auto!important;overflow-y:hidden!important;gap:7px!important;padding:4px!important;scroll-snap-type:x mandatory} body.mobile-device.deck-open .deckForgeStrip .selectedDeckMini{flex:0 0 102px!important;min-width:102px!important;max-width:102px!important;min-height:144px!important;height:144px!important;scroll-snap-align:center!important;padding:5px!important} body.mobile-device.deck-open .deckForgeStrip .selectedDeckMini .cardPreview{height:92px!important;min-height:92px!important} body.mobile-device.deck-open .deckForgeStrip .selectedDeckMini b{font-size:10px!important;line-height:1.1!important} body.mobile-device.deck-open .deckForgeCollectionPanel{display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important} body.mobile-device.deck-open .deckCollectionSide{width:100%!important;display:flex!important;flex-direction:column!important;overflow:visible!important;padding:8px!important} body.mobile-device.deck-open .deckCategoryNav{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;gap:6px!important} body.mobile-device.deck-open .deckCategoryNav button{flex:0 0 auto!important;min-height:44px!important} body.mobile-device.deck-open .deckCollectionControls{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;padding:7px!important} body.mobile-device.deck-open #deckSearchInput, body.mobile-device.deck-open #deckSortSelect{width:100%!important;min-height:48px!important} body.mobile-device.deck-open .deckForgeLibrary{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:4px!important} body.mobile-device.deck-open .deckCollectionCard{min-width:0!important;min-height:248px!important;height:auto!important;padding:7px!important} body.mobile-device.deck-open .deckCollectionCard .cardPreview{height:132px!important;min-height:132px!important} body.mobile-device.deck-open .deckCollectionCard h3{font-size:12px!important;min-height:28px!important} body.mobile-device.deck-open .deckCollectionCard .counterRow button{width:44px!important;height:44px!important;min-height:44px!important} body.mobile-device.deck-open .deckForgeFooter{position:sticky!important;bottom:0!important;z-index:20!important;background:rgba(5,10,18,.96)!important;padding:8px!important} body.mobile-device .deckBoardPanel{height:auto!important;max-height:calc(var(--cb-vh) * 100 - var(--cb-safe-top) - var(--cb-safe-bottom) - 16px)!important} body.mobile-device .deckBoardPopupBody, body.mobile-device .startingSetupWrap{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:auto!important} body.mobile-device .setupPiecePickerList{overflow:visible!important} body.mobile-device .setupPieceOptionGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} body.mobile-device .setupPieceOption{min-width:0!important;padding:8px!important} body.mobile-device .deckCardPickerPanel{height:calc(var(--cb-vh) * 100 - var(--cb-safe-top) - var(--cb-safe-bottom) - 16px)!important} body.mobile-device .deckCardPickerActions{width:100%!important;justify-content:stretch!important} body.mobile-device .deckCardPickerActions button{flex:1 1 120px!important} body.mobile-device .deckCardPickerList{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} body.mobile-device .deckPickerCard{min-width:0!important;min-height:236px!important;padding:7px!important} body.mobile-device .deckPickerCard .cardPreview{height:132px!important} body.mobile-device .deckCardInfoBody{display:flex!important;flex-direction:column!important;overflow:auto!important} body.mobile-device .deckCardInfoArt .cardPreview{height:min(58vh,460px)!important;min-height:300px!important} } @media (max-width:360px) and (orientation:portrait){ body.mobile-device.deck-open .deckForgeLibrary, body.mobile-device .deckCardPickerList, body.mobile-device .setupPieceOptionGrid, body.mobile-device #menuShop .shopList{grid-template-columns:1fr!important} } @media (orientation:landscape) and (max-height:680px) and (max-width:1100px){ body.mobile-device.deck-open #menuShell, body.mobile-device.deck-open #menuDeck.deckForgeScreen{height:100%!important;min-height:0!important;overflow:hidden!important;padding:0!important} body.mobile-device.deck-open .deckForgeLayout{min-height:0!important;overflow:hidden!important} body.mobile-device.deck-open .deckForgeLibrary{overflow:auto!important} body.mobile-device .deckBoardPanel, body.mobile-device .setupPiecePickerPanel, body.mobile-device .deckCardPickerPanel, body.mobile-device .deckCardInfoPanel{height:calc(var(--cb-vh) * 100 - var(--cb-safe-top) - var(--cb-safe-bottom) - 12px)!important;max-height:none!important} } /* --------------------------------------------------------------------- PROFILE / PATCH NOTES / REWARD / LOADING --------------------------------------------------------------------- */ @media (max-width:760px) and (orientation:portrait){ body.mobile-device .patchNotesList{overflow:visible!important;max-height:none!important} body.mobile-device .friendProfileHeader{align-items:flex-start!important;flex-wrap:wrap!important} body.mobile-device .friendProfileIdentity{min-width:0!important;width:100%!important} body.mobile-device .friendProfileAvatarLarge{width:84px!important;height:84px!important;flex:0 0 84px!important} body.mobile-device .profileGrid{grid-template-columns:1fr 1fr!important;gap:8px!important} body.mobile-device .profileRankShowcase{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;padding:10px!important} body.mobile-device .profileRankShowcase .rankIconProfile{width:108px!important;height:108px!important;min-width:108px!important;max-width:108px!important} body.mobile-device .matchHistory{max-height:none!important;overflow:visible!important} body.mobile-device .profileAvatarChoices{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important} body.mobile-device #loadingOverlay{padding:calc(var(--cb-safe-top) + 8px) calc(var(--cb-safe-right) + 8px) calc(var(--cb-safe-bottom) + 8px) calc(var(--cb-safe-left) + 8px)!important;overflow:auto!important} body.mobile-device #loadingOverlay .loadingBattleStage{width:100%!important;max-width:none!important;display:flex!important;flex-direction:column!important;gap:8px!important} body.mobile-device #loadingOverlay .loadingFighter{width:100%!important;max-width:none!important;min-width:0!important;padding:10px!important} body.mobile-device #loadingOverlay .loadingAvatar{width:76px!important;height:76px!important;min-width:76px!important} body.mobile-device #loadingOverlay .loadingFighterName{font-size:clamp(16px,5vw,22px)!important;max-width:none!important;overflow-wrap:anywhere!important} body.mobile-device #loadingOverlay .loadingVs{font-size:clamp(28px,10vw,48px)!important} body.mobile-device #rewardOverlay{overflow:auto!important} body.mobile-device .rewardPanel{height:auto!important} body.mobile-device .rewardGrid, body.mobile-device .rewardSummaryGrid{grid-template-columns:1fr!important} body.mobile-device .rewardTabs{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important} body.mobile-device .rewardTabs button{flex:1 0 130px!important;min-height:48px!important} body.mobile-device .rewardList{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important} } /* --------------------------------------------------------------------- IN-GAME HUD — LANDSCAPE PHONE --------------------------------------------------------------------- */ @media (orientation:landscape) and (max-height:680px) and (max-width:1100px){ body.mobile-device:not(.menu-open) #hud{ position:fixed!important; inset:0!important; width:100vw!important; height:calc(var(--cb-vh) * 100)!important; pointer-events:none!important; z-index:40!important; } body.mobile-device:not(.menu-open) #hud .battleTopHud{ position:fixed!important; top:calc(var(--cb-safe-top) + 4px)!important; left:calc(var(--cb-safe-left) + 4px)!important; right:calc(var(--cb-safe-right) + 4px)!important; width:auto!important; height:72px!important; display:grid!important; grid-template-columns:minmax(150px,1fr) minmax(180px,36vw) minmax(150px,1fr)!important; gap:5px!important; padding:0!important; align-items:start!important; pointer-events:none!important; } body.mobile-device:not(.menu-open) .battleSideCard{ min-width:0!important; height:68px!important; padding:5px 7px!important; gap:5px!important; overflow:hidden!important; } body.mobile-device:not(.menu-open) .battleAvatar{width:52px!important;height:52px!important;min-width:52px!important;flex:0 0 52px!important} body.mobile-device:not(.menu-open) .battlePlayerName{font-size:clamp(11px,2.1vw,14px)!important;line-height:1.1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} body.mobile-device:not(.menu-open) .battleLifeMeta{font-size:9px!important;gap:4px!important} body.mobile-device:not(.menu-open) .battleCenterHud{min-width:0!important;height:68px!important;padding:5px!important;overflow:hidden!important} body.mobile-device:not(.menu-open) .turnClock{font-size:clamp(22px,5vw,34px)!important;line-height:1!important} body.mobile-device:not(.menu-open) .roundText, body.mobile-device:not(.menu-open) .battleCenterHud small{font-size:9px!important} body.mobile-device:not(.menu-open) .miniHudBtn{min-height:32px!important;height:32px!important;padding:3px 7px!important;font-size:9px!important} body.mobile-device:not(.menu-open) #leftPanel, body.mobile-device:not(.menu-open) #rightPanel{display:none!important} body.mobile-device:not(.menu-open) #roundCounter{top:calc(var(--cb-safe-top) + 76px)!important;font-size:10px!important;padding:5px 8px!important} body.mobile-device:not(.menu-open) #onlineBadge{top:calc(var(--cb-safe-top) + 76px)!important;right:calc(var(--cb-safe-right) + 5px)!important;font-size:9px!important;max-width:34vw!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important} body.mobile-device:not(.menu-open) #fpsMeter{top:calc(var(--cb-safe-top) + 78px)!important;left:calc(var(--cb-safe-left) + 5px)!important;font-size:9px!important} body.mobile-device:not(.menu-open) #bottomPanel{ position:fixed!important; left:50%!important; bottom:calc(var(--cb-safe-bottom) + 2px)!important; transform:translateX(-50%)!important; width:min(680px, calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 110px))!important; max-width:none!important; height:126px!important; min-height:126px!important; padding:0 8px 5px!important; border-radius:18px 18px 8px 8px!important; overflow:visible!important; pointer-events:none!important; } body.mobile-device:not(.menu-open) #bottomPanel > .section-title{height:18px!important;min-height:18px!important;font-size:9px!important;margin:0!important;justify-content:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} body.mobile-device:not(.menu-open) #bottomPanel > .section-title .small{display:none!important} body.mobile-device:not(.menu-open) #bottomPanel .cards, body.mobile-device:not(.menu-open) #bottomPanel .cards.wheelMode{height:86px!important;min-height:86px!important;max-height:86px!important;overflow:visible!important} body.mobile-device:not(.menu-open) #bottomPanel .cards.wheelMode .card{ width:78px!important; min-width:78px!important; max-width:78px!important; height:96px!important; min-height:96px!important; padding:3px!important; } body.mobile-device:not(.menu-open) #bottomPanel .cards.wheelMode .card .cardPreview{height:54px!important;min-height:54px!important;margin:0 0 2px!important} body.mobile-device:not(.menu-open) #bottomPanel .cards.wheelMode .card h3, body.mobile-device:not(.menu-open) #bottomPanel .cards.wheelMode .card b{font-size:8px!important;line-height:1!important;max-height:18px!important;overflow:hidden!important} body.mobile-device:not(.menu-open) #bottomPanel .cards.wheelMode .card p, body.mobile-device:not(.menu-open) #bottomPanel .cards.wheelMode .card .cardDesc, body.mobile-device:not(.menu-open) #bottomPanel .cards.wheelMode .card .cardMeta{display:none!important} body.mobile-device:not(.menu-open) #deckActionBar{ position:absolute!important; left:50%!important; bottom:1px!important; transform:translateX(-50%)!important; width:100%!important; height:34px!important; display:flex!important; justify-content:center!important; align-items:center!important; gap:6px!important; pointer-events:auto!important; } body.mobile-device:not(.menu-open) #drawBtn.drawBtnSkinned{width:154px!important;min-width:154px!important;max-width:154px!important;height:42px!important;min-height:42px!important;background-size:contain!important} body.mobile-device:not(.menu-open) #gameDeckCountLabel{font-size:9px!important;white-space:nowrap!important} body.mobile-device:not(.menu-open) #endTurnBtn{width:48px!important;height:42px!important;min-width:48px!important;min-height:42px!important;font-size:18px!important;padding:0!important} body.mobile-device:not(.menu-open) #gameOptions{top:calc(var(--cb-safe-top) + 78px)!important;right:calc(var(--cb-safe-right) + 5px)!important} body.mobile-device:not(.menu-open) #gameOptions > button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important} body.mobile-device:not(.menu-open) .gameOptionsModal{width:min(540px, calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 16px))!important;max-height:calc(var(--cb-vh) * 100 - var(--cb-safe-top) - var(--cb-safe-bottom) - 16px)!important;padding:10px!important} body.mobile-device:not(.menu-open) .gameOptionsScreen{overflow:auto!important;max-height:calc(var(--cb-vh) * 100 - 80px)!important} body.mobile-device:not(.menu-open) .inGameSettingsGrid{display:grid!important;grid-template-columns:1fr!important;max-height:none!important;overflow:visible!important} body.mobile-device:not(.menu-open) .globalChatWidget{display:none!important} body.mobile-device:not(.menu-open) .pieceStatusTooltip{max-width:42vw!important;font-size:10px!important;padding:7px!important} body.mobile-device:not(.menu-open) .gamepadHint{max-width:60vw!important;font-size:9px!important;padding:5px 8px!important;bottom:calc(var(--cb-safe-bottom) + 132px)!important} } /* --------------------------------------------------------------------- CHAT AS A MOBILE SHEET --------------------------------------------------------------------- */ @media (max-width:760px) and (orientation:portrait){ body.mobile-device .globalChatWidget{ left:calc(var(--cb-safe-left) + 6px)!important; right:calc(var(--cb-safe-right) + 6px)!important; bottom:calc(var(--cb-safe-bottom) + 6px)!important; top:auto!important; width:auto!important; max-width:none!important; } body.mobile-device .globalChatToggle{width:100%!important;min-height:48px!important} body.mobile-device .globalChatPanel{ width:100%!important; min-width:0!important; height:min(64vh, 520px)!important; min-height:280px!important; max-height:calc(var(--cb-vh) * 100 - var(--cb-safe-top) - var(--cb-safe-bottom) - 70px)!important; resize:none!important; border-width:14px!important; } body.mobile-device .globalChatMessages{font-size:13px!important} body.mobile-device .globalChatForm{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;gap:5px!important} body.mobile-device .globalChatForm input{min-width:0!important} } /* --------------------------------------------------------------------- KEYBOARD OPEN / VERY SHORT VIEWPORTS --------------------------------------------------------------------- */ body.mobile-device.mobile-keyboard-open .mobileFullscreenFloatBtn{display:none!important} body.mobile-device.mobile-keyboard-open #menuShell, body.mobile-device.mobile-keyboard-open #accountPanel, body.mobile-device.mobile-keyboard-open .deckCardPickerPanel, body.mobile-device.mobile-keyboard-open .setupPiecePickerPanel{ padding-bottom:8px!important; } body.mobile-device.mobile-keyboard-open .globalChatWidget{bottom:4px!important} @media (max-height:390px) and (orientation:landscape){ body.mobile-device:not(.menu-open) .battleTopHud{height:62px!important} body.mobile-device:not(.menu-open) .battleSideCard, body.mobile-device:not(.menu-open) .battleCenterHud{height:58px!important} body.mobile-device:not(.menu-open) .battleAvatar{width:44px!important;height:44px!important;min-width:44px!important} body.mobile-device:not(.menu-open) #bottomPanel{height:112px!important;min-height:112px!important} body.mobile-device:not(.menu-open) #bottomPanel .cards, body.mobile-device:not(.menu-open) #bottomPanel .cards.wheelMode{height:75px!important;min-height:75px!important} body.mobile-device:not(.menu-open) #bottomPanel .cards.wheelMode .card{width:70px!important;min-width:70px!important;max-width:70px!important;height:84px!important;min-height:84px!important} body.mobile-device:not(.menu-open) #bottomPanel .cards.wheelMode .card .cardPreview{height:46px!important;min-height:46px!important} body.mobile-device:not(.menu-open) #drawBtn.drawBtnSkinned{width:132px!important;min-width:132px!important;height:38px!important;min-height:38px!important} body.mobile-device:not(.menu-open) #endTurnBtn{height:38px!important;min-height:38px!important} } /* --------------------------------------------------------------------- REDUCED MOTION / PERFORMANCE SAFETY --------------------------------------------------------------------- */ @media (pointer:coarse){ body.mobile-device .site-bg__sparkles, body.mobile-device .crystal-orbit, body.mobile-device .showcase-card--float, body.mobile-device .menuDecorParticle{animation-duration:10s!important} } @media (prefers-reduced-motion:reduce){ body.mobile-device *,body.mobile-device *::before,body.mobile-device *::after{scroll-behavior:auto!important} } /* ===================================================================== MOBILE VALIDATION PASS 01 — final corrections after 390x844 / 844x390 ===================================================================== */ @media (max-width:760px) and (orientation:portrait){ body.mobile-device #menuMain, body.mobile-device #menuPlay, body.mobile-device #menuOnline, body.mobile-device #menuDeck, body.mobile-device #menuShop, body.mobile-device #menuSettings{ position:relative!important; inset:auto!important; width:100%!important; max-width:100%!important; height:auto!important; min-height:100%!important; max-height:none!important; margin:0!important; padding:0!important; overflow:visible!important; } body.mobile-device #menuSettings .settingsTabs{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; overflow:visible!important; top:0!important; gap:5px!important; } body.mobile-device #menuSettings .settingsTab{ min-width:0!important; width:100%!important; flex:initial!important; padding:5px 3px!important; font-size:clamp(8px,2.55vw,10px)!important; letter-spacing:.01em!important; white-space:normal!important; line-height:1.05!important; } } @media (orientation:landscape) and (max-height:680px) and (max-width:1100px){ body.mobile-device:not(.menu-open) #topbar{ position:fixed!important; left:50%!important; right:auto!important; top:calc(var(--cb-safe-top) + 3px)!important; transform:translateX(-50%)!important; width:min(760px, calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 76px))!important; min-height:76px!important; height:76px!important; padding:5px 9px 7px!important; border-width:10px!important; overflow:visible!important; } body.mobile-device:not(.menu-open) #topbar .battleTopWrap{ width:100%!important; height:100%!important; display:grid!important; grid-template-columns:minmax(150px,1fr) minmax(146px,170px) minmax(150px,1fr)!important; gap:7px!important; align-items:center!important; } body.mobile-device:not(.menu-open) #topbar .battleSideCard{ height:48px!important; min-height:48px!important; padding:4px 7px!important; gap:6px!important; border-radius:10px!important; } body.mobile-device:not(.menu-open) #topbar .battleAvatar, body.mobile-device:not(.menu-open) #topbar .battleAvatar .avatarFrame{ width:40px!important; height:40px!important; min-width:40px!important; flex:0 0 40px!important; } body.mobile-device:not(.menu-open) #topbar .battleSideInfo{gap:3px!important} body.mobile-device:not(.menu-open) #topbar .battlePlayerName{ padding:2px 6px!important; font-size:11px!important; line-height:1.1!important; } body.mobile-device:not(.menu-open) #topbar .battleLifeBar{height:9px!important;min-height:9px!important} body.mobile-device:not(.menu-open) #topbar .battleLifeMeta{ display:flex!important; font-size:8.5px!important; line-height:1!important; gap:4px!important; white-space:nowrap!important; overflow:hidden!important; } body.mobile-device:not(.menu-open) #topbar .battleLifeMeta strong{font-size:9px!important} body.mobile-device:not(.menu-open) #topbar .battleCenterHud{gap:3px!important;min-width:0!important} body.mobile-device:not(.menu-open) #topbar .turnClock{ min-width:78px!important; padding:4px 10px!important; border-radius:11px!important; font-size:19px!important; line-height:1!important; } body.mobile-device:not(.menu-open) #topbar .battleCenterMeta{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; width:100%!important; gap:3px!important; } body.mobile-device:not(.menu-open) #topbar .battleMetaPill{ display:flex!important; justify-content:center!important; align-items:center!important; min-width:0!important; height:18px!important; min-height:18px!important; padding:2px 3px!important; font-size:7.5px!important; line-height:1!important; white-space:nowrap!important; overflow:hidden!important; } body.mobile-device:not(.menu-open) #topbar #freeCameraBtn, body.mobile-device:not(.menu-open) #topbar #cardsVisibilityBtn{display:none!important} body.mobile-device:not(.menu-open) #bottomPanel{ width:min(720px, calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 72px))!important; } } @media (orientation:landscape) and (max-height:390px) and (max-width:700px){ body.mobile-device:not(.menu-open) #topbar{ width:calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 64px)!important; height:70px!important; min-height:70px!important; } body.mobile-device:not(.menu-open) #topbar .battleTopWrap{ grid-template-columns:minmax(126px,1fr) minmax(132px,150px) minmax(126px,1fr)!important; gap:5px!important; } body.mobile-device:not(.menu-open) #topbar .battleSideCard{height:44px!important;min-height:44px!important;padding:3px 5px!important} body.mobile-device:not(.menu-open) #topbar .battleAvatar, body.mobile-device:not(.menu-open) #topbar .battleAvatar .avatarFrame{width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px!important} body.mobile-device:not(.menu-open) #topbar .battlePlayerName{font-size:10px!important} body.mobile-device:not(.menu-open) #topbar .battleLifeMeta{font-size:7.5px!important} body.mobile-device:not(.menu-open) #topbar .turnClock{font-size:18px!important} body.mobile-device:not(.menu-open) #bottomPanel{width:calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 52px)!important} } /* ===================================================================== MOBILE VALIDATION PASS 02 — viewport anchored modals + touch targets Keeps nested deck/menu dialogs pinned to the visual viewport even when their parent screen is scrollable or used transforms on desktop. ===================================================================== */ @media (max-width:760px) and (orientation:portrait){ body.mobile-device.deck-open #menuDeck, body.mobile-device.deck-open #menuDeck.deckForgeScreen, body.mobile-device #menuMain{ transform:none!important; filter:none!important; perspective:none!important; contain:none!important; clip-path:none!important; } body.mobile-device .playChoiceModal, body.mobile-device .deckBoardModal, body.mobile-device .setupPiecePickerModal, body.mobile-device .deckCardPickerModal, body.mobile-device .deckCardInfoModal{ position:fixed!important; inset:0!important; top:0!important; right:0!important; bottom:0!important; left:0!important; width:100vw!important; height:calc(var(--cb-vh) * 100)!important; min-height:0!important; max-height:none!important; margin:0!important; box-sizing:border-box!important; transform:none!important; place-items:center!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; isolation:isolate!important; } body.mobile-device .playChoiceModal{z-index:2147482500!important} body.mobile-device .deckBoardModal{z-index:2147482600!important} body.mobile-device .setupPiecePickerModal{z-index:2147482700!important} body.mobile-device .deckCardPickerModal{z-index:2147482800!important} body.mobile-device .deckCardInfoModal{z-index:2147482900!important} body.mobile-device .playChoicePanel, body.mobile-device .deckBoardPanel, body.mobile-device .setupPiecePickerPanel, body.mobile-device .deckCardPickerPanel, body.mobile-device .deckCardInfoPanel{ position:relative!important; inset:auto!important; width:calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 16px)!important; height:auto!important; min-height:0!important; max-height:calc(var(--cb-vh) * 100 - var(--cb-safe-top) - var(--cb-safe-bottom) - 16px)!important; margin:auto!important; box-sizing:border-box!important; transform:none!important; overflow:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch!important; } body.mobile-device .deckCardPickerPanel{ height:calc(var(--cb-vh) * 100 - var(--cb-safe-top) - var(--cb-safe-bottom) - 16px)!important; display:flex!important; flex-direction:column!important; } body.mobile-device .deckCardPickerList{ flex:1 1 auto!important; min-height:0!important; overflow:auto!important; -webkit-overflow-scrolling:touch!important; } body.mobile-device .deckCardInfoPanel{ height:calc(var(--cb-vh) * 100 - var(--cb-safe-top) - var(--cb-safe-bottom) - 16px)!important; display:flex!important; flex-direction:column!important; } body.mobile-device .deckCardInfoBody{ flex:1 1 auto!important; min-height:0!important; overflow:auto!important; } body.mobile-device .deckCardInfoArt .cardPreview{ height:min(45vh,390px)!important; min-height:220px!important; } body.mobile-device .playChoicePanel{ padding:10px!important; } body.mobile-device .playChoiceGrid{ grid-template-columns:1fr!important; gap:8px!important; } body.mobile-device .playChoiceCard{ min-height:94px!important; padding:12px!important; } body.mobile-device .setupPiecePickerPanel, body.mobile-device .deckBoardPanel{ display:flex!important; flex-direction:column!important; } body.mobile-device .setupPiecePickerList, body.mobile-device .deckBoardPopupBody{ flex:1 1 auto!important; min-height:0!important; overflow:auto!important; -webkit-overflow-scrolling:touch!important; } } @media (orientation:landscape) and (max-height:680px) and (max-width:1100px){ body.mobile-device .playChoiceModal, body.mobile-device .deckBoardModal, body.mobile-device .setupPiecePickerModal, body.mobile-device .deckCardPickerModal, body.mobile-device .deckCardInfoModal{ position:fixed!important; inset:0!important; width:100vw!important; height:calc(var(--cb-vh) * 100)!important; transform:none!important; overflow:hidden!important; padding:calc(var(--cb-safe-top) + 6px) calc(var(--cb-safe-right) + 6px) calc(var(--cb-safe-bottom) + 6px) calc(var(--cb-safe-left) + 6px)!important; } body.mobile-device .playChoicePanel, body.mobile-device .deckBoardPanel, body.mobile-device .setupPiecePickerPanel, body.mobile-device .deckCardPickerPanel, body.mobile-device .deckCardInfoPanel{ width:calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 12px)!important; height:calc(var(--cb-vh) * 100 - var(--cb-safe-top) - var(--cb-safe-bottom) - 12px)!important; min-height:0!important; max-height:none!important; margin:auto!important; box-sizing:border-box!important; transform:none!important; overflow:auto!important; } body.mobile-device:not(.menu-open) #gameOptionsBtn, body.mobile-device:not(.menu-open) #gameOptions > button{ width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; max-width:44px!important; max-height:44px!important; padding:0!important; } body.mobile-device:not(.menu-open) #endTurnBtn{ width:48px!important; height:44px!important; min-width:48px!important; min-height:44px!important; max-height:44px!important; padding:0!important; } } @media (orientation:landscape) and (max-height:390px) and (max-width:700px){ body.mobile-device:not(.menu-open) #endTurnBtn{ height:44px!important; min-height:44px!important; max-height:44px!important; } } /* ===================================================================== MOBILE VALIDATION PASS 03 — win specificity over legacy mobile rules ===================================================================== */ @media (orientation:landscape) and (max-height:680px) and (max-width:1100px){ body.mobile-device.mobile-landscape:not(.menu-open) #gameOptions{ width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #gameOptions #gameOptionsBtn{ width:44px!important; height:44px!important; min-width:44px!important; min-height:44px!important; max-width:44px!important; max-height:44px!important; padding:0!important; font-size:18px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar{ box-sizing:border-box!important; top:calc(var(--cb-safe-top) + 4px)!important; left:50%!important; right:auto!important; transform:translateX(-50%)!important; width:min(720px, calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 76px))!important; height:72px!important; min-height:72px!important; max-height:72px!important; padding:5px 8px!important; border-width:8px!important; border-radius:14px!important; overflow:visible!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleTopWrap{ width:100%!important; height:100%!important; display:grid!important; grid-template-columns:minmax(138px,1fr) minmax(142px,170px) minmax(138px,1fr)!important; gap:6px!important; align-items:center!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleSideCard{ box-sizing:border-box!important; height:50px!important; min-height:50px!important; padding:4px 6px!important; gap:5px!important; border-radius:10px!important; overflow:hidden!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleAvatar, body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleAvatar .avatarFrame{ width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; flex:0 0 40px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleSideInfo{ min-width:0!important; gap:3px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battlePlayerName{ font-size:11px!important; line-height:1.05!important; padding:1px 4px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleLifeBar{ height:9px!important; min-height:9px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleLifeMeta{ display:flex!important; gap:3px!important; font-size:8px!important; line-height:1!important; overflow:hidden!important; white-space:nowrap!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleLifeMeta strong{font-size:8.5px!important} body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleCenterHud{ box-sizing:border-box!important; min-width:0!important; height:52px!important; min-height:52px!important; padding:3px 5px!important; gap:3px!important; overflow:hidden!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .turnClock{ min-width:74px!important; padding:3px 9px!important; font-size:19px!important; line-height:1!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleCenterMeta{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; width:100%!important; gap:3px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleMetaPill{ box-sizing:border-box!important; min-width:0!important; height:18px!important; min-height:18px!important; padding:2px 3px!important; font-size:7.5px!important; line-height:1!important; justify-content:center!important; white-space:nowrap!important; overflow:hidden!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar #freeCameraBtn, body.mobile-device.mobile-landscape:not(.menu-open) #topbar #cardsVisibilityBtn{display:none!important} body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel{ box-sizing:border-box!important; left:50%!important; right:auto!important; bottom:calc(var(--cb-safe-bottom) + 4px)!important; transform:translateX(-50%)!important; width:min(680px, calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 76px))!important; height:128px!important; min-height:128px!important; max-height:128px!important; padding:2px 6px 44px!important; border-width:8px!important; overflow:visible!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .section-title{display:none!important} body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .cards, body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .cards.wheelMode{ height:78px!important; min-height:78px!important; max-height:78px!important; overflow:visible!important; pointer-events:auto!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .cards.wheelMode .card, body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .card{ width:78px!important; min-width:78px!important; max-width:78px!important; height:84px!important; min-height:84px!important; max-height:84px!important; padding:4px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .cardPreview{ height:52px!important; min-height:52px!important; max-height:52px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .card h3{ font-size:8px!important; line-height:1.05!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel #deckActionBar{ position:absolute!important; left:50%!important; right:auto!important; bottom:2px!important; top:auto!important; transform:translateX(-50%)!important; width:100%!important; height:44px!important; min-height:44px!important; margin:0!important; padding:0 4px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; pointer-events:auto!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel #deckActionBar #drawBtn.drawBtnSkinned{ width:130px!important; min-width:130px!important; max-width:130px!important; height:42px!important; min-height:42px!important; max-height:42px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel #deckActionBar #gameDeckCountLabel{ height:30px!important; min-height:30px!important; max-width:116px!important; font-size:8px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel #deckActionBar #endTurnBtn{ width:48px!important; height:44px!important; min-width:48px!important; min-height:44px!important; max-width:48px!important; max-height:44px!important; padding:0!important; font-size:18px!important; } } @media (orientation:landscape) and (max-height:370px) and (max-width:700px){ body.mobile-device.mobile-landscape:not(.menu-open) #topbar{ width:calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 68px)!important; height:66px!important; min-height:66px!important; max-height:66px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleTopWrap{ grid-template-columns:minmax(118px,1fr) minmax(132px,148px) minmax(118px,1fr)!important; gap:4px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleSideCard{ height:46px!important; min-height:46px!important; padding:3px 5px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleAvatar, body.mobile-device.mobile-landscape:not(.menu-open) #topbar .battleAvatar .avatarFrame{ width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; flex-basis:36px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel{ width:calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 68px)!important; height:122px!important; min-height:122px!important; max-height:122px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .cards, body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .cards.wheelMode{ height:72px!important; min-height:72px!important; max-height:72px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .cards.wheelMode .card, body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .card{ width:70px!important; min-width:70px!important; max-width:70px!important; height:78px!important; min-height:78px!important; max-height:78px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .cardPreview{ height:46px!important; min-height:46px!important; max-height:46px!important; } } /* Login form must include its border/padding inside the viewport width. */ @media (max-width:760px) and (orientation:portrait){ body.mobile-device.auth-locked #accountPanel{ box-sizing:border-box!important; width:min(480px, calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 16px))!important; max-width:calc(100vw - var(--cb-safe-left) - var(--cb-safe-right) - 16px)!important; } body.mobile-device.auth-locked #accountPanel *, body.mobile-device.auth-locked #accountPanel *::before, body.mobile-device.auth-locked #accountPanel *::after{box-sizing:border-box} } @media (max-width:760px) and (orientation:portrait){ body.mobile-device.auth-locked #menuMain, body.mobile-device.auth-locked .epicMenuStage, body.mobile-device.auth-locked .epicMenuStage.chessMenuStage{ width:100%!important; max-width:100%!important; height:100%!important; min-height:0!important; box-sizing:border-box!important; } } @media (max-width:760px) and (orientation:portrait){ body.mobile-device.auth-locked #accountPanel{ width:min(480px,100%)!important; max-width:100%!important; } } /* ========================================================= CrowCore Mobile Stability 02 Cartas mais quadradas + hover estável + proteção de toque ========================================================= */ body:not(.menu-open) #bottomPanel .cards.wheelMode .card{ width:126px!important; min-width:126px!important; max-width:126px!important; height:136px!important; min-height:136px!important; max-height:136px!important; border-radius:11px!important; backface-visibility:hidden!important; transform-style:flat!important; will-change:auto!important; } body:not(.menu-open) #bottomPanel .cards.wheelMode .cardPreview{ height:84px!important; min-height:84px!important; max-height:84px!important; border-radius:8px!important; } /* O hover antigo zerava a rotação da carta. Como as cartas se sobrepõem, o próprio hitbox saía debaixo do mouse e entrava novamente, criando o "flip/click". */ body:not(.menu-open) #bottomPanel .cards.wheelMode .card:hover:not(.disabled), body:not(.menu-open) #bottomPanel .cards.wheelMode .card:focus-visible:not(.disabled){ transform:translateX(-50%) rotate(var(--slot-r,0deg)) scale(var(--slot-s,1))!important; filter:brightness(1.08) saturate(1.05)!important; z-index:calc(var(--slot-z,1) + 120)!important; outline:2px solid rgba(147,215,255,.78)!important; outline-offset:2px!important; } body:not(.menu-open) #bottomPanel .cards.wheelMode .card.active, body:not(.menu-open) #bottomPanel .cards.wheelMode .card.selected{ transform:translateX(-50%) rotate(var(--slot-r,0deg)) scale(var(--slot-s,1))!important; } @media (hover:none), (pointer:coarse){ body:not(.menu-open) #bottomPanel .cards.wheelMode .card:hover:not(.disabled){ transform:translateX(-50%) rotate(var(--slot-r,0deg)) scale(var(--slot-s,1))!important; outline:none!important; filter:brightness(calc(1 - var(--slot-dark,0))) saturate(calc(.82 + var(--slot-focus,0) * .18))!important; } } @media (max-width:850px), (pointer:coarse){ body:not(.menu-open) #bottomPanel .cards.wheelMode .card{ width:88px!important; min-width:88px!important; max-width:88px!important; height:92px!important; min-height:92px!important; max-height:92px!important; padding:3px!important; } body:not(.menu-open) #bottomPanel .cards.wheelMode .cardPreview{ height:58px!important; min-height:58px!important; max-height:58px!important; } } @media (pointer:coarse) and (orientation:landscape) and (max-height:430px){ body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .cards.wheelMode .card, body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .card{ width:86px!important; min-width:86px!important; max-width:86px!important; height:86px!important; min-height:86px!important; max-height:86px!important; } body.mobile-device.mobile-landscape:not(.menu-open) #bottomPanel .cardPreview{ height:54px!important; min-height:54px!important; max-height:54px!important; } } body.webgl-context-lost #game canvas{opacity:.28!important;filter:grayscale(.5)!important} /* OPTIMIZATION / UI CLARITY PATCH 03 */ @media (pointer:coarse), (max-width:900px){ .patchNotesPanel,.playChoicePanel,.friendProfilePanel,.profileAvatarModalPanel, .deckCardPickerPanel,.deckCardInfoPanel,.setupPiecePickerPanel,.gameOptionsModal, .tutorialBox,.mobileRotateCard{ max-width:calc(100vw - 20px)!important; max-height:calc(var(--app-height,100dvh) - 20px)!important; overflow:auto!important; overscroll-behavior:contain; } .patchNotesPanel button,.playChoicePanel button,.friendProfilePanel button, .profileAvatarModalPanel button,.deckCardPickerPanel button,.deckCardInfoPanel button, .setupPiecePickerPanel button,.gameOptionsModal button,.tutorialBox button{ min-height:44px!important; } .battlePlayerName{font-size:clamp(11px,2.9vw,14px)!important} }