/* V2 presentation only. The inherited engine owns every action and amount. */ #propcards-demo[data-layout-version="2"] { --v2-card-art: calc(70px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-app { border-radius:calc(18px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-topbar { position:relative;min-height:calc(58px * var(--pc-ui-scale, 1));padding:calc(6px * var(--pc-ui-scale, 1)) calc(14px * var(--pc-ui-scale, 1));gap:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-brand { flex:1;gap:calc(10px * var(--pc-ui-scale, 1));min-width:0; } #propcards-demo[data-layout-version="2"] .tch-brand-wordmark { width:calc(150px * var(--pc-ui-scale, 1));height:calc(44px * var(--pc-ui-scale, 1));flex:0 0 calc(150px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-powered-top { width:calc(88px * var(--pc-ui-scale, 1));height:calc(38px * var(--pc-ui-scale, 1));flex:0 0 calc(88px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-powered-top img { width:calc(88px * var(--pc-ui-scale, 1));height:calc(25px * var(--pc-ui-scale, 1));object-fit:contain; } #propcards-demo[data-layout-version="2"] .tch-brand > div:last-of-type { position:static;transform:none;flex:1;min-width:calc(120px * var(--pc-ui-scale, 1));max-width:none;margin-left:0;text-align:center; } #propcards-demo[data-layout-version="2"] .tch-brand [data-topbar-status] { display:block;overflow:visible;white-space:normal;text-wrap:balance;font-size:calc(12px * var(--pc-ui-scale, 1));line-height:1.35;font-weight:650; } #propcards-demo[data-layout-version="2"] .tch-wallets { display:flex;align-items:center;flex-wrap:nowrap;gap:calc(7px * var(--pc-ui-scale, 1));flex-shrink:0; } #propcards-demo[data-layout-version="2"] .tch-wallet { padding:calc(7px * var(--pc-ui-scale, 1)) calc(10px * var(--pc-ui-scale, 1));font-size:calc(13px * var(--pc-ui-scale, 1));white-space:nowrap; } #propcards-demo[data-layout-version="2"] .tch-sound-toggle { width:calc(32px * var(--pc-ui-scale, 1));height:calc(32px * var(--pc-ui-scale, 1));flex:0 0 calc(32px * var(--pc-ui-scale, 1));font-size:calc(16px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-dev-reset { font-size:calc(11px * var(--pc-ui-scale, 1));padding:calc(7px * var(--pc-ui-scale, 1));white-space:nowrap; } #propcards-demo[data-layout-version="2"] #propcards-owner-mode { white-space:nowrap; } #propcards-demo[data-layout-version="2"] .v2-coin-icon { display:inline-block;width:.9em;height:1.05em;max-width:none;object-fit:contain;vertical-align:-.14em;flex:none; } #propcards-demo[data-layout-version="2"] .tch-steps { padding:0;gap:calc(6px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-step { padding:calc(9px * var(--pc-ui-scale, 1)) calc(7px * var(--pc-ui-scale, 1));font-size:calc(13px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-main { padding:calc(14px * var(--pc-ui-scale, 1)) calc(18px * var(--pc-ui-scale, 1)) calc(18px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] [data-view="run"] { padding:0;max-width:calc(1280px * var(--pc-ui-scale, 1));margin:auto; } #propcards-demo[data-layout-version="2"] .tch-market-chart { display:block;position:relative;height:calc(60px * var(--pc-ui-scale, 1));min-height:calc(60px * var(--pc-ui-scale, 1));margin:0 0 calc(12px * var(--pc-ui-scale, 1));border-radius:calc(10px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-market-chart svg { position:absolute;inset:calc(6px * var(--pc-ui-scale, 1)) calc(8px * var(--pc-ui-scale, 1));width:calc(100% - calc(16px * var(--pc-ui-scale, 1)));height:calc(100% - calc(12px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .tch-run-side { box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:calc(78px * var(--pc-ui-scale, 1)) minmax(0,1fr) minmax(0,1.3fr);gap:calc(12px * var(--pc-ui-scale, 1));height:calc(440px * var(--pc-ui-scale, 1));min-height:calc(440px * var(--pc-ui-scale, 1));max-height:calc(440px * var(--pc-ui-scale, 1));overflow:hidden;padding:calc(14px * var(--pc-ui-scale, 1));border-radius:calc(12px * var(--pc-ui-scale, 1));background:#21132e; } #propcards-demo[data-layout-version="2"] .tch-run-side > .tch-run-stat:not(.v2-unbanked), #propcards-demo[data-layout-version="2"] .tch-run-side > .tch-consequence { display:none!important; } #propcards-demo[data-layout-version="2"] .tch-effect-bank, #propcards-demo[data-layout-version="2"] .tch-mythic-bank { display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;margin:0;padding:0;border:0; } #propcards-demo[data-layout-version="2"] .tch-mythic-bank { padding-top:calc(12px * var(--pc-ui-scale, 1));border-top:calc(1px * var(--pc-ui-scale, 1)) solid #ffffff18; } #propcards-demo[data-layout-version="2"] .tch-effect-bank h4, #propcards-demo[data-layout-version="2"] .tch-mythic-bank h4 { margin:0;font-size:calc(12px * var(--pc-ui-scale, 1));line-height:1.2;color:#d3bedf; } #propcards-demo[data-layout-version="2"] .tch-effect-bank > h4, #propcards-demo[data-layout-version="2"] .tch-mythic-bank-head { margin-bottom:calc(6px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-effect-empty { font-size:calc(12px * var(--pc-ui-scale, 1));line-height:1.3; } #propcards-demo[data-layout-version="2"] .tch-effect-list, #propcards-demo[data-layout-version="2"] .tch-mythic-list { min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9870b6 #ffffff08;scrollbar-gutter:stable;padding-right:calc(3px * var(--pc-ui-scale, 1));align-content:start; } #propcards-demo[data-layout-version="2"] .tch-effect-list:focus-visible, #propcards-demo[data-layout-version="2"] .tch-mythic-list:focus-visible { outline:calc(2px * var(--pc-ui-scale, 1)) solid #e4bc62;outline-offset:calc(-2px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-effect-list { display:flex;gap:calc(6px * var(--pc-ui-scale, 1));flex-wrap:wrap;align-items:flex-start; } #propcards-demo[data-layout-version="2"] .tch-effect-item { grid-template-columns:calc(18px * var(--pc-ui-scale, 1)) minmax(0,1fr);gap:calc(5px * var(--pc-ui-scale, 1));padding:calc(5px * var(--pc-ui-scale, 1)) calc(7px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #79559477;border-radius:calc(6px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-effect-icon { font-size:calc(16px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-effect-copy strong { font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-effect-copy small { font-size:calc(11px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-mythic-list { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(calc(190px * var(--pc-ui-scale, 1)),100%),1fr));gap:calc(6px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-mythic-perk { grid-template-columns:calc(23px * var(--pc-ui-scale, 1)) minmax(0,1fr);gap:calc(6px * var(--pc-ui-scale, 1));padding:calc(6px * var(--pc-ui-scale, 1));border-radius:calc(7px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-mythic-perk-icon { font-size:calc(19px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-mythic-perk-copy strong { font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-mythic-perk-copy small { font-size:calc(11px * var(--pc-ui-scale, 1));line-height:1.3; } #propcards-demo[data-layout-version="2"] .tch-run-head { margin:0 0 calc(6px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-run-head [data-round] { font-size:calc(13px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-run-head > div:nth-child(2), #propcards-demo[data-layout-version="2"] [data-ability], #propcards-demo[data-layout-version="2"] [data-event-title] { display:none; } #propcards-demo[data-layout-version="2"] .tch-run-progress { height:calc(3px * var(--pc-ui-scale, 1));margin:0 0 calc(9px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-run-grid { display:grid;grid-template-columns:minmax(0,calc(826px * var(--pc-ui-scale, 1))) minmax(calc(260px * var(--pc-ui-scale, 1)),1fr);align-items:start;gap:calc(16px * var(--pc-ui-scale, 1));margin:0; } #propcards-demo[data-layout-version="2"] .tch-event-card { display:block;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none; } #propcards-demo[data-layout-version="2"] .tch-event-card > div { width:100%;max-width:none; } #propcards-demo[data-layout-version="2"] .tch-active-hand-wrap { margin:0;padding:0;border:0;background:none; } #propcards-demo[data-layout-version="2"] .tch-active-hand-title { margin:0 0 calc(8px * var(--pc-ui-scale, 1));font-size:calc(12px * var(--pc-ui-scale, 1));align-items:center; } #propcards-demo[data-layout-version="2"] .tch-active-hand-title > strong { font-size:calc(14px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-active-hand { display:grid;grid-template-columns:repeat(auto-fill,calc(156px * var(--pc-ui-scale, 1)));justify-content:center;grid-auto-flow:row;grid-auto-columns:calc(156px * var(--pc-ui-scale, 1));gap:calc(10px * var(--pc-ui-scale, 1));padding:calc(3px * var(--pc-ui-scale, 1));overflow:visible; } #propcards-demo[data-layout-version="2"] .tch-play-card { box-sizing:border-box;display:grid;grid-template-rows:calc(14px * var(--pc-ui-scale, 1)) calc(32px * var(--pc-ui-scale, 1)) var(--v2-card-art) minmax(0,1fr);gap:calc(6px * var(--pc-ui-scale, 1));width:calc(156px * var(--pc-ui-scale, 1));min-width:calc(156px * var(--pc-ui-scale, 1));max-width:calc(156px * var(--pc-ui-scale, 1));height:calc(242px * var(--pc-ui-scale, 1));min-height:calc(242px * var(--pc-ui-scale, 1));max-height:calc(242px * var(--pc-ui-scale, 1));aspect-ratio:auto;padding:calc(9px * var(--pc-ui-scale, 1));overflow:visible;align-items:stretch; } #propcards-demo[data-layout-version="2"] .tch-play-card .tch-mini-rarity { width:100%;margin:0;font-size:calc(10px * var(--pc-ui-scale, 1));line-height:calc(14px * var(--pc-ui-scale, 1));align-self:start; } #propcards-demo[data-layout-version="2"] .tch-play-card > strong { display:grid;place-items:center;width:100%;min-height:0;max-height:none;margin:0;font-size:calc(13px * var(--pc-ui-scale, 1));line-height:1.2;white-space:normal;overflow:visible; } #propcards-demo[data-layout-version="2"] .tch-play-card .tch-card-visual { display:grid;place-items:center;height:var(--v2-card-art);min-height:var(--v2-card-art);width:100%;aspect-ratio:auto;margin:0;overflow:hidden; } #propcards-demo[data-layout-version="2"] .tch-play-card .tch-card-symbol { display:grid;place-items:center;width:calc(56px * var(--pc-ui-scale, 1));height:calc(56px * var(--pc-ui-scale, 1));min-height:calc(56px * var(--pc-ui-scale, 1));aspect-ratio:1;flex:none;margin:0;font-size:calc(32px * var(--pc-ui-scale, 1));line-height:1; } #propcards-demo[data-layout-version="2"] .tch-play-card .tch-card-symbol img { width:80%;height:80%;object-fit:contain; } #propcards-demo[data-layout-version="2"] .tch-play-card small, #propcards-demo[data-layout-version="2"] .tch-play-card small.tch-effect-text-xl, #propcards-demo[data-layout-version="2"] .tch-play-card small.tch-effect-text-lg, #propcards-demo[data-layout-version="2"] .tch-play-card small.tch-effect-text-compact { display:flex;flex-direction:column;justify-content:center;min-height:calc(48px * var(--pc-ui-scale, 1));margin:0;padding:calc(6px * var(--pc-ui-scale, 1)) 0 0;font-size:calc(14px * var(--pc-ui-scale, 1));line-height:1.17;font-weight:800;overflow:visible; } #propcards-demo[data-layout-version="2"] .tch-play-card:hover:not(:disabled) { transform:translateY(calc(-2px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .tch-hand-market { margin:calc(8px * var(--pc-ui-scale, 1)) 0;padding:calc(7px * var(--pc-ui-scale, 1)) calc(10px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-hand-market-copy strong { font-size:calc(14px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-hand-market-lock { font-size:calc(12px * var(--pc-ui-scale, 1));color:#e0c8ee;white-space:nowrap;align-self:center; } #propcards-demo[data-layout-version="2"] .tch-hand-market:not(.v2-hand-market-locked) .v2-hand-market-lock { visibility:hidden; } #propcards-demo[data-layout-version="2"] .tch-hand-market-actions button { padding:calc(7px * var(--pc-ui-scale, 1)) calc(10px * var(--pc-ui-scale, 1));font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-unbanked { display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:calc(3px * var(--pc-ui-scale, 1));margin:0;padding:0 0 calc(10px * var(--pc-ui-scale, 1));border:0;border-bottom:calc(1px * var(--pc-ui-scale, 1)) solid #ffffff18; } #propcards-demo[data-layout-version="2"] .v2-unbanked::before, #propcards-demo[data-layout-version="2"] .v2-unbanked::after { content:none; } #propcards-demo[data-layout-version="2"] .v2-unbanked > span { font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-unbanked .tch-pot-amount { display:flex;margin:0;gap:calc(5px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-unbanked .tch-pot-number { font-size:calc(32px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-unbanked .tch-pot-unit { margin:0;font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-trade-result { max-width:100%;margin:calc(8px * var(--pc-ui-scale, 1)) auto calc(12px * var(--pc-ui-scale, 1));padding:calc(9px * var(--pc-ui-scale, 1)) calc(12px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #a97ed055;border-radius:calc(9px * var(--pc-ui-scale, 1));font-size:calc(14px * var(--pc-ui-scale, 1));line-height:1.4;background:#261636; } #propcards-demo[data-layout-version="2"] .tch-choices { gap:calc(10px * var(--pc-ui-scale, 1));margin:calc(10px * var(--pc-ui-scale, 1)) 0 0; } #propcards-demo[data-layout-version="2"] .tch-choice { min-width:0;padding:calc(11px * var(--pc-ui-scale, 1)) calc(12px * var(--pc-ui-scale, 1));border-radius:calc(11px * var(--pc-ui-scale, 1));text-align:left; } #propcards-demo[data-layout-version="2"] .tch-choice strong { font-size:calc(14px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-choice span { font-size:calc(16px * var(--pc-ui-scale, 1));margin-top:calc(4px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-choice small { font-size:calc(12px * var(--pc-ui-scale, 1));line-height:1.3; } #propcards-demo[data-layout-version="2"] .tch-choice em { font-size:calc(12px * var(--pc-ui-scale, 1));line-height:1.3;margin-top:calc(4px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-actions { gap:calc(10px * var(--pc-ui-scale, 1));margin-top:calc(9px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-actions:has(> button:not([hidden])) { padding-bottom:calc(4px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-actions [data-continue], #propcards-demo[data-layout-version="2"] .tch-actions [data-cashout] { padding:calc(11px * var(--pc-ui-scale, 1)) calc(20px * var(--pc-ui-scale, 1));font-size:calc(15px * var(--pc-ui-scale, 1)); } /* Shop: the complete original inventory, displayed in a new order. */ #propcards-demo[data-layout-version="2"] .tch-shop { height:auto;min-height:0;max-height:none; } #propcards-demo[data-layout-version="2"] .tch-shop-scroll { display:flex;flex-direction:column;overflow:visible;padding:0; } #propcards-demo[data-layout-version="2"] .tch-shop-grid { display:contents; } #propcards-demo[data-layout-version="2"] .tch-shop-head { margin:calc(2px * var(--pc-ui-scale, 1)) 0 calc(14px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-shop-head .tch-kicker { font-size:calc(11px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-shop-head h2 { font-size:calc(24px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-shop-balance { display:none; } #propcards-demo[data-layout-version="2"] .tch-shop-section { margin:0; } #propcards-demo[data-layout-version="2"] .v2-pack-section { order:1; } #propcards-demo[data-layout-version="2"] .v2-giveaway-section { order:2;margin-top:calc(16px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-entry-bank { order:3;margin:calc(10px * var(--pc-ui-scale, 1)) 0 0;padding:calc(13px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-upgrade-section { order:4;margin-top:calc(16px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-coming-soon { order:5;margin:calc(14px * var(--pc-ui-scale, 1)) 0 0; } #propcards-demo[data-layout-version="2"] .tch-shop-note { order:6; } #propcards-demo[data-layout-version="2"] .tch-pack-shop-launch { min-height:calc(195px * var(--pc-ui-scale, 1));grid-template-columns:minmax(0,1fr) minmax(0,42%);padding:calc(24px * var(--pc-ui-scale, 1)) calc(26px * var(--pc-ui-scale, 1)) calc(47px * var(--pc-ui-scale, 1));border-radius:calc(15px * var(--pc-ui-scale, 1));gap:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-shop-launch-copy { position:static;justify-content:center; } #propcards-demo[data-layout-version="2"] .tch-pack-shop-launch-copy strong { font-size:calc(28px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-shop-launch-copy span { max-width:100%;font-size:calc(14px * var(--pc-ui-scale, 1));line-height:1.4;margin-top:calc(9px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-shop-launch-copy::after { left:calc(26px * var(--pc-ui-scale, 1));bottom:calc(10px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-shop-miniatures { inset:calc(-26px * var(--pc-ui-scale, 1)) calc(9px * var(--pc-ui-scale, 1)) calc(-26px * var(--pc-ui-scale, 1)) auto;width:43%; } #propcards-demo[data-layout-version="2"] .tch-pack-shop-miniatures img { min-width:0;width:38%;max-width:calc(154px * var(--pc-ui-scale, 1));height:calc(250px * var(--pc-ui-scale, 1));object-fit:contain; } #propcards-demo[data-layout-version="2"] .tch-shop-section-head h3 { font-size:calc(17px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-shop-section-head p { margin-top:calc(4px * var(--pc-ui-scale, 1));font-size:calc(12px * var(--pc-ui-scale, 1));line-height:1.4; } #propcards-demo[data-layout-version="2"] .v2-giveaway-section .tch-shop-perks { grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(10px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-upgrade-section .tch-shop-perks { grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-upgrade-section .tch-shop-item { min-width:0; } #propcards-demo[data-layout-version="2"] .tch-shop-copy > strong { font-size:calc(15px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-shop-copy > p { font-size:calc(13px * var(--pc-ui-scale, 1));line-height:1.4; } #propcards-demo[data-layout-version="2"] .tch-shop-copy > small { font-size:calc(11px * var(--pc-ui-scale, 1));line-height:1.4; } #propcards-demo[data-layout-version="2"] .tch-boost-number { font-size:calc(27px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-boost-copy strong { font-size:calc(13px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-boost-copy span { font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-boost-control { gap:calc(8px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-boost-control button, #propcards-demo[data-layout-version="2"] .tch-boost-actions > button { padding:calc(8px * var(--pc-ui-scale, 1)) calc(10px * var(--pc-ui-scale, 1));font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-shop-actions { margin-top:calc(15px * var(--pc-ui-scale, 1)); } /* Opening/reveal stay proportional instead of expanding to fill wide windows. */ #propcards-demo[data-layout-version="2"] [data-view="pack"] { max-width:calc(1120px * var(--pc-ui-scale, 1));margin:auto; } #propcards-demo[data-layout-version="2"] .tch-heading { margin:calc(8px * var(--pc-ui-scale, 1)) auto calc(14px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-heading h2 { font-size:calc(24px * var(--pc-ui-scale, 1));margin:calc(5px * var(--pc-ui-scale, 1)) 0 calc(6px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-heading p { font-size:calc(14px * var(--pc-ui-scale, 1));line-height:1.4; } #propcards-demo[data-layout-version="2"] .tch-pack-stage { min-height:calc(330px * var(--pc-ui-scale, 1));height:auto; } #propcards-demo[data-layout-version="2"] .tch-pack-stage.revealed { min-height:calc(300px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-cards { max-width:calc(1080px * var(--pc-ui-scale, 1));margin:auto;gap:calc(10px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card { min-height:calc(280px * var(--pc-ui-scale, 1));max-height:none;aspect-ratio:auto;padding:calc(11px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card > strong { font-size:calc(15px * var(--pc-ui-scale, 1));min-height:calc(36px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card-icon { height:calc(106px * var(--pc-ui-scale, 1));min-height:calc(106px * var(--pc-ui-scale, 1));aspect-ratio:auto; } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card-symbol { width:calc(76px * var(--pc-ui-scale, 1));height:calc(76px * var(--pc-ui-scale, 1));aspect-ratio:1;font-size:calc(37px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-power { font-size:calc(16px * var(--pc-ui-scale, 1));line-height:1.25; } #propcards-demo[data-layout-version="2"] .tch-pack-footer { margin-top:calc(10px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-rerolls { margin:calc(10px * var(--pc-ui-scale, 1)) auto 0; } #propcards-demo[data-layout-version="2"] .tch-pack-rerolls button { padding:calc(9px * var(--pc-ui-scale, 1)) calc(13px * var(--pc-ui-scale, 1));font-size:calc(13px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-streak-overlay { position:fixed;padding:calc(14px * var(--pc-ui-scale, 1));overflow-y:auto;align-items:center; } #propcards-demo[data-layout-version="2"] .tch-streak-popup { max-height:calc(100dvh - calc(28px * var(--pc-ui-scale, 1)));overflow-y:auto;overscroll-behavior:contain; } #propcards-demo[data-layout-version="2"] .tch-pack-shop-popup { width:min(calc(1040px * var(--pc-ui-scale, 1)),calc(100vw - calc(28px * var(--pc-ui-scale, 1)))); } /* The absolute wheel must never outgrow a flex-shrunk stage. Keep its centre aligned with the dialog and anchor the pointer to the same square. */ #propcards-demo[data-layout-version="2"] .tch-rare-wheel-popup { width:min(calc(900px * var(--pc-ui-scale, 1)),calc(100vw - calc(28px * var(--pc-ui-scale, 1))));height:auto;max-height:calc(100dvh - calc(28px * var(--pc-ui-scale, 1)));overflow-y:auto;overflow-x:hidden;padding:calc(24px * var(--pc-ui-scale, 1)) calc(28px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #e8bd51;border-radius:calc(24px * var(--pc-ui-scale, 1));background:radial-gradient(ellipse at 35% 0%,#421a59 0%,#1e0d2c 55%,#10091b 100%); } #propcards-demo[data-layout-version="2"] .tch-rare-wheel-popup > .tch-kicker { display:none; } #propcards-demo[data-layout-version="2"] #tch-rare-wheel-title { margin:0 0 calc(6px * var(--pc-ui-scale, 1));color:#ffe596;font-size:clamp(calc(30px * var(--pc-ui-scale, 1)),3.5vw,calc(48px * var(--pc-ui-scale, 1)));font-weight:950;line-height:1.1;text-shadow:0 calc(2px * var(--pc-ui-scale, 1)) 0 #985f21; } #propcards-demo[data-layout-version="2"] .tch-rare-wheel-copy { margin:0 auto calc(12px * var(--pc-ui-scale, 1));max-width:calc(650px * var(--pc-ui-scale, 1));color:#c9acd9;font-size:clamp(calc(14px * var(--pc-ui-scale, 1)),1.65vw,calc(21px * var(--pc-ui-scale, 1)));line-height:1.4; } #propcards-demo[data-layout-version="2"] .tch-rare-wheel-popup > * { flex-shrink:0; } #propcards-demo[data-layout-version="2"] .tch-wheel-stage { --wheel-size:min(calc(500px * var(--pc-ui-scale, 1)),calc(100vw - calc(115px * var(--pc-ui-scale, 1))),max(calc(220px * var(--pc-ui-scale, 1)),calc(100dvh - calc(350px * var(--pc-ui-scale, 1)))));width:var(--wheel-size);height:var(--wheel-size);min-height:var(--wheel-size);flex:none;margin:calc(20px * var(--pc-ui-scale, 1)) auto calc(20px * var(--pc-ui-scale, 1));container-type:inline-size; } #propcards-demo[data-layout-version="2"] .tch-lucky-wheel { box-sizing:border-box;width:100%;height:100%;top:0;left:0; } #propcards-demo[data-layout-version="2"] .tch-wheel-pointer { top:50%;left:calc(100% - calc(8px * var(--pc-ui-scale, 1)));right:auto;transform:translateY(-50%); } #propcards-demo[data-layout-version="2"] .tch-wheel-prize { transform:translate(-50%,-50%) rotate(var(--wheel-label-angle,0deg));white-space:nowrap;font-size:clamp(calc(17px * var(--pc-ui-scale, 1)),7.5cqw,calc(38px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .tch-wheel-prize-bust { color:#cb87a2;font-size:clamp(calc(11px * var(--pc-ui-scale, 1)),4.2cqw,calc(18px * var(--pc-ui-scale, 1)));font-style:italic;font-weight:850;text-shadow:0 calc(1px * var(--pc-ui-scale, 1)) calc(3px * var(--pc-ui-scale, 1)) #220916; } #propcards-demo[data-layout-version="2"] .tch-wheel-prize-narrow { font-size:clamp(calc(11px * var(--pc-ui-scale, 1)),4.5cqw,calc(23px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .tch-wheel-prize-narrow[data-amount="5000"] { color:#2a1034;text-shadow:none; } #propcards-demo[data-layout-version="2"] .tch-rare-wheel-result { margin:0 0 calc(12px * var(--pc-ui-scale, 1));min-height:calc(28px * var(--pc-ui-scale, 1));font-size:calc(16px * var(--pc-ui-scale, 1));color:#dac3e9;line-height:1.4; } #propcards-demo[data-layout-version="2"] .tch-rare-wheel-actions { flex-wrap:wrap;gap:calc(14px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-rare-wheel-actions button { min-height:calc(50px * var(--pc-ui-scale, 1));padding:calc(12px * var(--pc-ui-scale, 1)) calc(25px * var(--pc-ui-scale, 1));font-size:calc(19px * var(--pc-ui-scale, 1));border-radius:calc(14px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] [data-spin-rare-wheel] { color:#fff;background:linear-gradient(135deg,#9b37de,#5c1a91);border:calc(1px * var(--pc-ui-scale, 1)) solid #c97dfa;box-shadow:inset 0 calc(1px * var(--pc-ui-scale, 1)) #f6caff55,0 calc(3px * var(--pc-ui-scale, 1)) calc(12px * var(--pc-ui-scale, 1)) #a329ed33; } #propcards-demo[data-layout-version="2"] [data-close-rare-wheel] { color:#321605;background:linear-gradient(120deg,#fff09b,#efb932,#c38114);border:calc(1px * var(--pc-ui-scale, 1)) solid #ffe596; } @media (min-width:901px) and (max-height:700px) { #propcards-demo[data-layout-version="2"] .tch-main { padding:calc(10px * var(--pc-ui-scale, 1)) calc(16px * var(--pc-ui-scale, 1)) calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-heading { margin:calc(4px * var(--pc-ui-scale, 1)) auto calc(10px * var(--pc-ui-scale, 1)); } } @media (max-width:1100px) { #propcards-demo[data-layout-version="2"] .v2-upgrade-section .tch-shop-perks { grid-template-columns:repeat(2,minmax(0,1fr)); } #propcards-demo[data-layout-version="2"] .tch-boost-bank { grid-template-columns:calc(45px * var(--pc-ui-scale, 1)) minmax(0,1fr); } #propcards-demo[data-layout-version="2"] .tch-boost-actions { grid-column:1/-1;justify-content:center; } } @media (max-width:1160px) { #propcards-demo[data-layout-version="2"] .tch-run-grid { grid-template-columns:minmax(0,1fr);max-width:calc(826px * var(--pc-ui-scale, 1));margin:auto; } #propcards-demo[data-layout-version="2"] .tch-run-side { grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:calc(78px * var(--pc-ui-scale, 1)) minmax(0,1fr);height:calc(300px * var(--pc-ui-scale, 1));min-height:calc(300px * var(--pc-ui-scale, 1));max-height:calc(300px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-unbanked { grid-column:1/-1; } #propcards-demo[data-layout-version="2"] .tch-mythic-bank { padding:0 0 0 calc(12px * var(--pc-ui-scale, 1));border-top:0;border-left:calc(1px * var(--pc-ui-scale, 1)) solid #ffffff18; } } @media (max-width:800px) { #propcards-demo[data-layout-version="2"] .tch-topbar { flex-wrap:wrap; } #propcards-demo[data-layout-version="2"] .tch-wallets { flex-wrap:wrap; } #propcards-demo[data-layout-version="2"] .tch-main { padding:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-choices { grid-template-columns:repeat(3,minmax(0,1fr)); } #propcards-demo[data-layout-version="2"] .tch-choice { padding:calc(9px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } #propcards-demo[data-layout-version="2"] .tch-pack-shop-launch { padding:calc(22px * var(--pc-ui-scale, 1)) calc(20px * var(--pc-ui-scale, 1)) calc(46px * var(--pc-ui-scale, 1));min-height:calc(190px * var(--pc-ui-scale, 1));grid-template-columns:minmax(0,1fr) minmax(0,38%); } #propcards-demo[data-layout-version="2"] .tch-pack-shop-launch-copy::after { left:calc(20px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-shop-miniatures { width:38%; } #propcards-demo[data-layout-version="2"] .tch-pack-shop-miniatures img { height:calc(210px * var(--pc-ui-scale, 1)); } } @media (max-width:520px) { #propcards-demo[data-layout-version="2"] .tch-wallet { padding:calc(6px * var(--pc-ui-scale, 1));font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-main { padding:calc(10px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-choices { grid-template-columns:1fr; } #propcards-demo[data-layout-version="2"] .tch-active-hand-title { align-items:start; } #propcards-demo[data-layout-version="2"] .tch-active-hand-title > span { max-width:55%;text-align:right; } #propcards-demo[data-layout-version="2"] .tch-pack-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } #propcards-demo[data-layout-version="2"] .tch-pack-shop-launch { grid-template-columns:1fr;min-height:calc(260px * var(--pc-ui-scale, 1));padding:calc(20px * var(--pc-ui-scale, 1)) calc(18px * var(--pc-ui-scale, 1)) calc(125px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-shop-launch-copy::after { left:calc(18px * var(--pc-ui-scale, 1));bottom:calc(10px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-shop-launch-copy strong { font-size:calc(24px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-shop-miniatures { width:46%;inset:auto calc(5px * var(--pc-ui-scale, 1)) calc(-48px * var(--pc-ui-scale, 1)) auto;height:calc(165px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-shop-miniatures img { height:calc(165px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-giveaway-section .tch-shop-perks, #propcards-demo[data-layout-version="2"] .v2-upgrade-section .tch-shop-perks { grid-template-columns:1fr; } #propcards-demo[data-layout-version="2"] .tch-shop-item { grid-template-columns:calc(40px * var(--pc-ui-scale, 1)) minmax(0,1fr); } #propcards-demo[data-layout-version="2"] .tch-shop-item > .tch-shop-buttons { grid-column:1/-1; } #propcards-demo[data-layout-version="2"] .tch-boost-actions, #propcards-demo[data-layout-version="2"] .tch-boost-controls { flex-wrap:wrap; } } @media (prefers-reduced-motion:reduce) { #propcards-demo[data-layout-version="2"] .tch-pack-shop-launch::before, #propcards-demo[data-layout-version="2"] .tch-pack-shop-launch::after, #propcards-demo[data-layout-version="2"] .tch-pack-shop-miniatures img { animation:none; } } /* Approved card-table design. Changes stay within the active Trade screen. */ #propcards-demo[data-layout-version="2"] [data-view="run"] { overflow:visible;border-radius:0;background:none; } #propcards-demo[data-layout-version="2"]:has([data-view="run"]:not([hidden])) .tch-app { background:linear-gradient(#10071c22,#10071c44),url('propcards-v2-valley-v1.png') center/cover no-repeat; } #propcards-demo[data-layout-version="2"]:has([data-view="run"]:not([hidden])) .tch-topbar { background:#10091ddb; } #propcards-demo[data-layout-version="2"] [data-view="run"]::before, #propcards-demo[data-layout-version="2"] [data-view="run"]::after { display:none; } #propcards-demo[data-layout-version="2"] .tch-market-chart, #propcards-demo[data-layout-version="2"] .tch-run-head, #propcards-demo[data-layout-version="2"] .tch-run-progress, #propcards-demo[data-layout-version="2"] .tch-active-hand-title { display:none!important; } #propcards-demo[data-layout-version="2"] .v2-trade-heading { margin:0 0 calc(12px * var(--pc-ui-scale, 1));font-size:calc(14px * var(--pc-ui-scale, 1));line-height:calc(20px * var(--pc-ui-scale, 1));text-align:left;color:#d5bddf; } #propcards-demo[data-layout-version="2"] .v2-trade-heading strong { color:#fff3ff;font-weight:800; } #propcards-demo[data-layout-version="2"] .tch-run-grid { grid-template-columns:calc(820px * var(--pc-ui-scale, 1)) minmax(calc(250px * var(--pc-ui-scale, 1)),1fr);gap:calc(18px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-active-hand { padding:0;justify-content:start; } #propcards-demo[data-layout-version="2"] .tch-play-card { border-width:calc(2px * var(--pc-ui-scale, 1));border-radius:calc(12px * var(--pc-ui-scale, 1));--card-edge:#acd9ff;--card-glow:#70b7ff44;--card-top:#365d85;--card-bottom:#142640;background:linear-gradient(150deg,var(--card-top),var(--card-bottom));border-color:var(--card-edge);box-shadow:inset 0 0 0 calc(3px * var(--pc-ui-scale, 1)) #14071fe6,inset 0 0 0 calc(5px * var(--pc-ui-scale, 1)) var(--card-edge),0 0 calc(12px * var(--pc-ui-scale, 1)) var(--card-glow); } #propcards-demo[data-layout-version="2"] .tch-play-card.rarity-epic { --card-edge:#c966ff;--card-glow:#b335ff55;--card-top:#662190;--card-bottom:#21072f; } #propcards-demo[data-layout-version="2"] .tch-play-card.rarity-legendary { --card-edge:#ffda66;--card-glow:#ffc63244;--card-top:#72501b;--card-bottom:#241506; } #propcards-demo[data-layout-version="2"] .tch-play-card.rarity-mythic { --card-edge:#ff99df;--card-glow:#ef47ba55;--card-top:#78245e;--card-bottom:#290a24; } #propcards-demo[data-layout-version="2"] .tch-play-card.selected { outline:calc(2px * var(--pc-ui-scale, 1)) solid #ffdb69;outline-offset:calc(3px * var(--pc-ui-scale, 1));box-shadow:inset 0 0 0 calc(3px * var(--pc-ui-scale, 1)) #14071fe6,inset 0 0 0 calc(5px * var(--pc-ui-scale, 1)) var(--card-edge),0 0 calc(18px * var(--pc-ui-scale, 1)) var(--card-glow); } #propcards-demo[data-layout-version="2"] .tch-play-card > .tch-card-visual { background:linear-gradient(145deg,#ffffff12,#08021166);border:calc(1px * var(--pc-ui-scale, 1)) solid #d9b57599;border-radius:calc(8px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-play-card > small { border-top:calc(1px * var(--pc-ui-scale, 1)) solid #e2bd6055;color:#ffeaa5; } #propcards-demo[data-layout-version="2"] .tch-run-side { height:calc(390px * var(--pc-ui-scale, 1));min-height:calc(390px * var(--pc-ui-scale, 1));max-height:calc(390px * var(--pc-ui-scale, 1));grid-template-rows:calc(76px * var(--pc-ui-scale, 1)) calc(104px * var(--pc-ui-scale, 1)) minmax(0,1fr);gap:calc(10px * var(--pc-ui-scale, 1));padding:0;border:0;background:none;box-shadow:none; } #propcards-demo[data-layout-version="2"] .tch-effect-bank, #propcards-demo[data-layout-version="2"] .tch-mythic-bank { padding:calc(12px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #7e5ba066;border-radius:calc(12px * var(--pc-ui-scale, 1));background:linear-gradient(145deg,#211332e8,#120c24ef); } #propcards-demo[data-layout-version="2"] .tch-mythic-list { grid-template-columns:1fr; } #propcards-demo[data-layout-version="2"] .tch-mythic-perk { border:calc(1px * var(--pc-ui-scale, 1)) solid #d6a648aa;background:linear-gradient(120deg,#432241bb,#21142e); } #propcards-demo[data-layout-version="2"] .v2-unbanked { position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:calc(18px * var(--pc-ui-scale, 1)) 1fr;gap:calc(2px * var(--pc-ui-scale, 1)) calc(6px * var(--pc-ui-scale, 1));justify-content:start;padding:calc(11px * var(--pc-ui-scale, 1)) calc(68px * var(--pc-ui-scale, 1)) calc(10px * var(--pc-ui-scale, 1)) calc(14px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #d9b34d;border-radius:calc(12px * var(--pc-ui-scale, 1));background:radial-gradient(ellipse at right,#97701333,transparent 60%),linear-gradient(130deg,#241729,#160d21);box-shadow:inset 0 0 calc(16px * var(--pc-ui-scale, 1)) #e9b33410; } #propcards-demo[data-layout-version="2"] .v2-unbanked > span { grid-column:1/-1; } #propcards-demo[data-layout-version="2"] .v2-unbanked .tch-pot-amount { align-items:center; } #propcards-demo[data-layout-version="2"] .v2-unbanked .tch-pot-number { font-size:calc(26px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-unbanked .tch-pot-unit { align-self:center;font-size:calc(14px * var(--pc-ui-scale, 1));color:#fff3d2; } #propcards-demo[data-layout-version="2"] .v2-unbanked::after { content:'🪙';position:absolute;right:calc(14px * var(--pc-ui-scale, 1));top:calc(14px * var(--pc-ui-scale, 1));display:grid;place-items:center;width:calc(46px * var(--pc-ui-scale, 1));height:calc(46px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #efce73;border-radius:50%;font-size:calc(29px * var(--pc-ui-scale, 1));background:radial-gradient(#98672277,#52361433); } #propcards-demo[data-layout-version="2"] .tch-choice { display:grid;grid-template-columns:calc(30px * var(--pc-ui-scale, 1)) minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:calc(3px * var(--pc-ui-scale, 1)) calc(7px * var(--pc-ui-scale, 1));padding:calc(12px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #8762a38c;background:linear-gradient(135deg,#2b1a3ded,#161023f5);box-shadow:inset 0 calc(1px * var(--pc-ui-scale, 1)) #c192f017; } #propcards-demo[data-layout-version="2"] .tch-choice:disabled { opacity:1;cursor:default; } #propcards-demo[data-layout-version="2"] .tch-choice:hover:not(:disabled) { border-color:#dbb36c;background:linear-gradient(135deg,#3b2452,#21132f); } #propcards-demo[data-layout-version="2"] .v2-choice-icon { grid-row:1/3;grid-column:1;align-self:center;font-size:calc(26px * var(--pc-ui-scale, 1));font-style:normal; } #propcards-demo[data-layout-version="2"] .tch-choice > strong, #propcards-demo[data-layout-version="2"] .tch-choice > span { grid-column:2;margin:0; } #propcards-demo[data-layout-version="2"] .tch-choice > span { color:#ffe28b;font-size:calc(15px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-choice > em { grid-column:1/-1;font-size:calc(11px * var(--pc-ui-scale, 1));color:#d1b8e3; } #propcards-demo[data-layout-version="2"] .tch-choice .v2-risk-row { display:flex;align-items:center;gap:calc(8px * var(--pc-ui-scale, 1));grid-column:1/-1;margin:calc(7px * var(--pc-ui-scale, 1)) 0 calc(2px * var(--pc-ui-scale, 1));color:#dac7e8; } #propcards-demo[data-layout-version="2"] .v2-risk-track { display:block;flex:1;min-width:calc(20px * var(--pc-ui-scale, 1));height:calc(9px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #8d759c;border-radius:calc(99px * var(--pc-ui-scale, 1));overflow:hidden;background:#10091e; } #propcards-demo[data-layout-version="2"] .v2-risk-fill { display:block;height:100%;border-radius:calc(99px * var(--pc-ui-scale, 1));background:linear-gradient(90deg,#ffe691,#f3c540); } #propcards-demo[data-layout-version="2"] [data-choice="2"] .v2-risk-fill { background:linear-gradient(90deg,#ff61b4,#ed3890); } #propcards-demo[data-layout-version="2"] .v2-risk-label { flex:none;font-size:calc(11px * var(--pc-ui-scale, 1));font-weight:500;white-space:nowrap; } @media(max-width:1160px) { #propcards-demo[data-layout-version="2"] .tch-run-grid { grid-template-columns:minmax(0,1fr);max-width:calc(820px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-run-side { grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:calc(76px * var(--pc-ui-scale, 1)) minmax(0,1fr);height:calc(280px * var(--pc-ui-scale, 1));min-height:calc(280px * var(--pc-ui-scale, 1));max-height:calc(280px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-active-hand { justify-content:center; } } /* Mockup finish: CSS surfaces only; dimensions, logo and icon assets are intact. */ #propcards-demo[data-layout-version="2"]:has([data-view="pack"]:not([hidden]), [data-view="shop"]:not([hidden])) .tch-app { background:linear-gradient(90deg,#10091e55 0%,#10091eea 24%,#10091ef5 50%,#10091eea 76%,#10091e55 100%), linear-gradient(180deg,#10091e44,#10091e11 75%,#10091e55), url('propcards-v2-valley-v1.png') center/cover no-repeat; } #propcards-demo[data-layout-version="2"] .tch-topbar { background:linear-gradient(110deg,#160c22f5,#0c091bf7 64%,#21151cf5);box-shadow:inset 0 calc(1px * var(--pc-ui-scale, 1)) #e4bcff12; } #propcards-demo[data-layout-version="2"] .tch-wallet { border-color:#a68abd55;color:#ffe79a; background:radial-gradient(ellipse at 35% 0%,#b085c22b,transparent 72%),linear-gradient(160deg,#262035,#100d1c 75%); box-shadow:inset 0 calc(1px * var(--pc-ui-scale, 1)) calc(1px * var(--pc-ui-scale, 1)) #eddaff26,inset 0 calc(-2px * var(--pc-ui-scale, 1)) calc(3px * var(--pc-ui-scale, 1)) #0006,0 calc(3px * var(--pc-ui-scale, 1)) calc(8px * var(--pc-ui-scale, 1)) #0004; text-shadow:0 calc(1px * var(--pc-ui-scale, 1)) calc(2px * var(--pc-ui-scale, 1)) #000b; } #propcards-demo[data-layout-version="2"] .tch-wallet:has([data-wallet]) { border-color:#b29a695f;background:radial-gradient(ellipse at 25% 0%,#ecc46224,transparent 70%),linear-gradient(150deg,#282132,#141020 80%); } #propcards-demo[data-layout-version="2"] .tch-wallet:has([data-streak]) { color:#ffce71;border-color:#bc865456;background:radial-gradient(ellipse at 25% 0%,#e995382b,transparent 75%),linear-gradient(150deg,#322029,#19101b 80%); } #propcards-demo[data-layout-version="2"] :is(.tch-play-card,.tch-pack-cards .tch-card) { --card-edge:#adddff;--card-glow:#6ac0ff57;--card-light:#a6dfff73;--card-top:#345c82;--card-bottom:#0a182a; border:calc(2px * var(--pc-ui-scale, 1)) solid var(--card-edge);border-radius:calc(12px * var(--pc-ui-scale, 1)); background:radial-gradient(ellipse 90% 48% at 85% 0%,var(--card-light),transparent 78%), linear-gradient(90deg,#ffffff08,transparent 16%,transparent 86%,#0002), linear-gradient(165deg,var(--card-top),var(--card-bottom) 85%); box-shadow:inset 0 0 0 calc(2px * var(--pc-ui-scale, 1)) #160a20,inset 0 0 0 calc(4px * var(--pc-ui-scale, 1)) var(--card-edge),inset 0 calc(12px * var(--pc-ui-scale, 1)) 0 #ffffff08,inset 0 calc(-8px * var(--pc-ui-scale, 1)) calc(14px * var(--pc-ui-scale, 1)) #0005, 0 0 calc(3px * var(--pc-ui-scale, 1)) var(--card-edge),0 0 calc(12px * var(--pc-ui-scale, 1)) var(--card-glow),0 calc(7px * var(--pc-ui-scale, 1)) calc(14px * var(--pc-ui-scale, 1)) #0007; } #propcards-demo[data-layout-version="2"] :is(.tch-play-card,.tch-pack-cards .tch-card).rarity-epic { --card-edge:#c855ff;--card-glow:#a62dfb70;--card-light:#ac22ef35;--card-top:#490b7c;--card-bottom:#19072f; } #propcards-demo[data-layout-version="2"] :is(.tch-play-card,.tch-pack-cards .tch-card).rarity-legendary { --card-edge:#ffdb55;--card-glow:#ffc13766;--card-light:#d895183b;--card-top:#513208;--card-bottom:#17100a; } #propcards-demo[data-layout-version="2"] :is(.tch-play-card,.tch-pack-cards .tch-card).rarity-mythic { --card-edge:#ffb5e9;--card-glow:#ed58c166;--card-light:#ff94d58c;--card-top:#622044;--card-bottom:#200b21; } #propcards-demo[data-layout-version="2"] :is(.tch-play-card,.tch-pack-cards .tch-card):is(.rarity-legendary,.rarity-mythic)::before { content:'✦';top:calc(6px * var(--pc-ui-scale, 1));right:calc(8px * var(--pc-ui-scale, 1));font-size:calc(23px * var(--pc-ui-scale, 1));line-height:calc(25px * var(--pc-ui-scale, 1));color:#fffbe3; text-shadow:0 0 calc(2px * var(--pc-ui-scale, 1)) #fff,0 0 calc(6px * var(--pc-ui-scale, 1)) #ffbe41,0 0 calc(12px * var(--pc-ui-scale, 1)) #ef8615;pointer-events:none; } #propcards-demo[data-layout-version="2"] .tch-play-card.selected { outline:calc(2px * var(--pc-ui-scale, 1)) solid #ffdb69;outline-offset:calc(3px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-play-card > .tch-card-visual, #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card > .tch-card-icon { background:radial-gradient(ellipse at 0% 0%,var(--card-light),transparent 68%),linear-gradient(145deg,#ffffff06,#08051188); border:calc(1px * var(--pc-ui-scale, 1)) solid #d4b16c9c;box-shadow:inset 0 calc(1px * var(--pc-ui-scale, 1)) calc(1px * var(--pc-ui-scale, 1)) #ffffff12,0 calc(3px * var(--pc-ui-scale, 1)) calc(8px * var(--pc-ui-scale, 1)) #0004; } #propcards-demo[data-layout-version="2"] .tch-play-card > small, #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card .tch-power { color:#ffedaa;text-shadow:0 calc(1px * var(--pc-ui-scale, 1)) calc(2px * var(--pc-ui-scale, 1)) #000b;border-top-color:#eac67666; } #propcards-demo[data-layout-version="2"] .v2-unbanked { border-color:#e6bb56; background:radial-gradient(circle calc(66px * var(--pc-ui-scale, 1)) at calc(100% - calc(37px * var(--pc-ui-scale, 1))) 50%,#c282244d,transparent 100%),linear-gradient(110deg,#100e21 45%,#27180e); box-shadow:inset 0 0 0 calc(2px * var(--pc-ui-scale, 1)) #c58d2312,inset 0 calc(1px * var(--pc-ui-scale, 1)) calc(1px * var(--pc-ui-scale, 1)) #fff0b53d,inset 0 calc(-2px * var(--pc-ui-scale, 1)) calc(8px * var(--pc-ui-scale, 1)) #0006,0 0 calc(10px * var(--pc-ui-scale, 1)) #e6b53716,0 calc(4px * var(--pc-ui-scale, 1)) calc(10px * var(--pc-ui-scale, 1)) #0004; } #propcards-demo[data-layout-version="2"] .v2-unbanked > span { color:#edddc1; } #propcards-demo[data-layout-version="2"] .v2-unbanked .tch-pot-number { color:#fff9f0;font-size:calc(30px * var(--pc-ui-scale, 1));text-shadow:0 calc(1px * var(--pc-ui-scale, 1)) calc(2px * var(--pc-ui-scale, 1)) #000; } #propcards-demo[data-layout-version="2"] .v2-unbanked .tch-pot-unit { color:#fff4da; } #propcards-demo[data-layout-version="2"] .v2-unbanked::after { content:'';border-color:#e7b946; background:url('propcards-gold-coins-v1.svg') center/calc(34px * var(--pc-ui-scale, 1)) calc(39px * var(--pc-ui-scale, 1)) no-repeat,radial-gradient(circle at 50% 60%,#83501844,#20171322); box-shadow:inset 0 calc(1px * var(--pc-ui-scale, 1)) calc(1px * var(--pc-ui-scale, 1)) #ffdf8455,0 0 calc(14px * var(--pc-ui-scale, 1)) #e6b03724; } #propcards-demo[data-layout-version="2"] .v2-unbanked .tch-pot-coin { display:block;flex:none;width:calc(28px * var(--pc-ui-scale, 1));height:calc(32px * var(--pc-ui-scale, 1));font-size:0;background:url('propcards-gold-coins-v1.svg') center/contain no-repeat; } /* September 14: a little more card-table room, with a bounded sidebar. */ #propcards-demo[data-layout-version="2"] { --v2-card-art:calc(80px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-run-grid { grid-template-columns:calc(910px * var(--pc-ui-scale, 1)) minmax(calc(250px * var(--pc-ui-scale, 1)),1fr); } #propcards-demo[data-layout-version="2"] .tch-active-hand { grid-template-columns:repeat(auto-fill,calc(174px * var(--pc-ui-scale, 1)));grid-auto-columns:calc(174px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-play-card { width:calc(174px * var(--pc-ui-scale, 1));min-width:calc(174px * var(--pc-ui-scale, 1));max-width:calc(174px * var(--pc-ui-scale, 1));height:calc(256px * var(--pc-ui-scale, 1));min-height:calc(256px * var(--pc-ui-scale, 1));max-height:calc(256px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-run-side { height:calc(410px * var(--pc-ui-scale, 1));min-height:calc(410px * var(--pc-ui-scale, 1));max-height:calc(410px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] :is(.tch-play-card,.tch-pack-cards .tch-card).rarity-rare { --card-light:#6ea5d92b;--card-top:#234e78;--card-bottom:#0a192d; } #propcards-demo[data-layout-version="2"] :is(.tch-card-visual,.tch-card-icon)::before { opacity:.12; } /* The introduction belongs to the unopened pack, not its card reveal. */ #propcards-demo[data-layout-version="2"] [data-view="pack"]:has(.tch-pack-stage.revealed) > .tch-heading { display:none; } #propcards-demo[data-layout-version="2"] .tch-pack-stage.revealed { min-height:0;padding:calc(8px * var(--pc-ui-scale, 1)) 0 calc(4px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-stage.revealed .tch-pack-cards { max-width:calc(910px * var(--pc-ui-scale, 1));grid-template-columns:repeat(auto-fit,calc(174px * var(--pc-ui-scale, 1)));justify-content:center; } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card { width:calc(174px * var(--pc-ui-scale, 1));height:calc(256px * var(--pc-ui-scale, 1));min-height:calc(256px * var(--pc-ui-scale, 1));max-height:calc(256px * var(--pc-ui-scale, 1));display:grid;grid-template-rows:calc(14px * var(--pc-ui-scale, 1)) calc(32px * var(--pc-ui-scale, 1)) calc(80px * var(--pc-ui-scale, 1)) minmax(0,1fr);gap:calc(6px * var(--pc-ui-scale, 1));padding:calc(9px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card > strong { min-height:0;display:grid;place-items:center;font-size:calc(13px * var(--pc-ui-scale, 1));line-height:1.2;margin:0; } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card-icon { height:calc(80px * var(--pc-ui-scale, 1));min-height:calc(80px * var(--pc-ui-scale, 1));margin:0; } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card-symbol { width:calc(60px * var(--pc-ui-scale, 1));height:calc(60px * var(--pc-ui-scale, 1));min-height:calc(60px * var(--pc-ui-scale, 1));font-size:calc(34px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-power { min-height:0;margin:0;padding-top:calc(6px * var(--pc-ui-scale, 1));display:flex;flex-direction:column;justify-content:center;font-size:calc(14px * var(--pc-ui-scale, 1));line-height:1.17; } #propcards-demo[data-layout-version="2"] .tch-pack-footer { margin-top:calc(8px * var(--pc-ui-scale, 1));gap:calc(7px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] [data-to-desk] { padding:calc(11px * var(--pc-ui-scale, 1)) calc(24px * var(--pc-ui-scale, 1));font-size:calc(16px * var(--pc-ui-scale, 1)); } @media(max-width:1240px) { #propcards-demo[data-layout-version="2"] .tch-run-grid { grid-template-columns:minmax(0,1fr);max-width:calc(910px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-active-hand { justify-content:center; } #propcards-demo[data-layout-version="2"] .tch-run-side { grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:calc(76px * var(--pc-ui-scale, 1)) minmax(0,1fr);height:calc(280px * var(--pc-ui-scale, 1));min-height:calc(280px * var(--pc-ui-scale, 1));max-height:calc(280px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-unbanked { grid-column:1/-1; } } /* A stable viewport-aware shell. Only its content scrolls, never the header. Overflow on non-shop screens is a deliberate small-window safety fallback. */ body:has(> #propcards-demo[data-layout-version="2"]) { box-sizing:border-box;min-height:100dvh; } #propcards-demo[data-layout-version="2"] .tch-app { display:flex;flex-direction:column;height:min(calc(620px * var(--pc-ui-scale, 1)),calc(100dvh - calc(24px * var(--pc-ui-scale, 1))));min-height:calc(240px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-topbar, #propcards-demo[data-layout-version="2"] .tch-steps { flex-shrink:0; } #propcards-demo[data-layout-version="2"] .tch-main { flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9870b6 #ffffff08; } #propcards-demo[data-layout-version="2"] .tch-main:has([data-view="shop"]:not([hidden])) { overflow:hidden; } #propcards-demo[data-layout-version="2"] .tch-shop { height:100%;min-height:0;max-height:none; } #propcards-demo[data-layout-version="2"] .tch-shop-head { flex-shrink:0; } #propcards-demo[data-layout-version="2"] .tch-shop-scroll { flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:calc(8px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-shop-scroll > *, #propcards-demo[data-layout-version="2"] .tch-shop-section { flex-shrink:0; } #propcards-demo[data-layout-version="2"] .tch-pack-stage:not(.revealed) { min-height:0;padding:calc(8px * var(--pc-ui-scale, 1)) 0; } #propcards-demo[data-layout-version="2"] .tch-pack { height:clamp(calc(190px * var(--pc-ui-scale, 1)),calc(100dvh - calc(320px * var(--pc-ui-scale, 1))),calc(360px * var(--pc-ui-scale, 1)));width:auto;aspect-ratio:13/18; } /* Approved pack mockup: a single heading and a larger, fully visible pack. The entire revealed hand/footer is centered, not just the card row. */ #propcards-demo[data-layout-version="2"] [data-view="pack"]:not([hidden]) { display:flex;flex-direction:column;justify-content:center;min-height:100%;width:100%;box-sizing:border-box; } #propcards-demo[data-layout-version="2"] [data-view="pack"] > .tch-heading { margin:0 0 calc(8px * var(--pc-ui-scale, 1));flex:none; } #propcards-demo[data-layout-version="2"] [data-view="pack"] .tch-heading > :not(.v2-pack-title) { display:none; } #propcards-demo[data-layout-version="2"] [data-view="pack"] .v2-pack-title { margin:0;font-size:calc(22px * var(--pc-ui-scale, 1));line-height:1.25; } #propcards-demo[data-layout-version="2"] .v2-pack-block { flex:none;min-width:0;width:100%; } #propcards-demo[data-layout-version="2"] .tch-pack-stage:not(.revealed) { padding:calc(8px * var(--pc-ui-scale, 1)) 0; } #propcards-demo[data-layout-version="2"] .tch-pack { height:var(--v2-pack-size,calc(320px * var(--pc-ui-scale, 1)));width:auto;max-width:calc(100vw - calc(80px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .v2-pack-open-hint { position:relative;display:flex;align-items:center;justify-content:center;gap:calc(10px * var(--pc-ui-scale, 1));margin:calc(2px * var(--pc-ui-scale, 1)) 0 0;color:#c4b7d2;font-size:calc(13px * var(--pc-ui-scale, 1));line-height:calc(20px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-pack-odds-toggle { padding:0 0 0 calc(10px * var(--pc-ui-scale, 1));border:0;border-left:calc(1px * var(--pc-ui-scale, 1)) solid #8e7b9c;border-radius:0;color:#daceed;background:none;box-shadow:none;font:inherit;text-decoration:underline;text-underline-offset:calc(3px * var(--pc-ui-scale, 1));cursor:pointer; } #propcards-demo[data-layout-version="2"] .v2-pack-odds-toggle:focus-visible { outline:calc(2px * var(--pc-ui-scale, 1)) solid #f3ce67;outline-offset:calc(4px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-pack-odds { position:absolute;bottom:calc(100% + calc(8px * var(--pc-ui-scale, 1)));left:50%;transform:translateX(-50%);z-index:5;box-sizing:border-box;width:max-content;max-width:min(calc(380px * var(--pc-ui-scale, 1)),calc(100vw - calc(64px * var(--pc-ui-scale, 1))));padding:calc(12px * var(--pc-ui-scale, 1)) calc(16px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #9374b5;border-radius:calc(10px * var(--pc-ui-scale, 1));background:#1a0e29;color:#f4eaff;text-align:center;box-shadow:0 calc(8px * var(--pc-ui-scale, 1)) calc(24px * var(--pc-ui-scale, 1)) #0009; } #propcards-demo[data-layout-version="2"] [data-view="pack"]:not(:has(.revealed)) .tch-pack-footer { display:none; } #propcards-demo[data-layout-version="2"] .tch-pack-stage.revealed { padding:0; } #propcards-demo[data-layout-version="2"] .tch-pack-stage.revealed .tch-pack-cards { padding:0; } #propcards-demo[data-layout-version="2"] .v2-pack-block .tch-pack-footer { margin-top:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .v2-pack-open-hint[hidden], #propcards-demo[data-layout-version="2"] .v2-pack-odds-toggle[hidden], #propcards-demo[data-layout-version="2"] .v2-pack-odds[hidden] { display:none; } /* Reserve three complete effects; only additional effects scroll. */ #propcards-demo[data-layout-version="2"] .tch-run-side { height:auto;min-height:0;max-height:none;overflow:visible;grid-template-rows:calc(76px * var(--pc-ui-scale, 1)) max-content max-content;align-content:start;align-self:stretch; } #propcards-demo[data-layout-version="2"] .tch-mythic-bank { min-height:calc(90px * var(--pc-ui-scale, 1));grid-template-rows:auto 1fr;align-self:start; } #propcards-demo[data-layout-version="2"] .tch-effect-bank { min-height:0;grid-template-rows:auto minmax(0,auto);align-self:start; } #propcards-demo[data-layout-version="2"] .tch-mythic-list { max-height:none;overflow:visible;scrollbar-gutter:auto; } #propcards-demo[data-layout-version="2"] .tch-effect-list { display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:calc(6px * var(--pc-ui-scale, 1));height:var(--v2-effect-list-height,calc(144px * var(--pc-ui-scale, 1)));max-height:none;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable; } #propcards-demo[data-layout-version="2"] .tch-effect-item { flex:none;min-height:calc(44px * var(--pc-ui-scale, 1));box-sizing:border-box; } /* Small windows retain the countdown between the sponsor and settings. Wallet badges move below; the countdown is never hidden or truncated. */ @media (max-width:950px) { #propcards-demo[data-layout-version="2"] .tch-topbar { display:grid;grid-template-columns:calc(150px * var(--pc-ui-scale, 1)) calc(88px * var(--pc-ui-scale, 1)) minmax(calc(120px * var(--pc-ui-scale, 1)),1fr) calc(32px * var(--pc-ui-scale, 1)) calc(32px * var(--pc-ui-scale, 1));gap:calc(6px * var(--pc-ui-scale, 1)) calc(10px * var(--pc-ui-scale, 1));align-items:center; } #propcards-demo[data-layout-version="2"] .tch-brand, #propcards-demo[data-layout-version="2"] .tch-wallets { display:contents; } #propcards-demo[data-layout-version="2"] .tch-brand-wordmark { grid-area:1 / 1; } #propcards-demo[data-layout-version="2"] .tch-powered-top { grid-area:1 / 2; } #propcards-demo[data-layout-version="2"] .tch-brand > div:last-of-type { grid-area:1 / 3; } #propcards-demo[data-layout-version="2"] [data-sound-toggle] { grid-area:1 / 4; } #propcards-demo[data-layout-version="2"] [data-open-settings] { grid-area:1 / 5; } #propcards-demo[data-layout-version="2"] .tch-wallets > .tch-wallet:nth-of-type(1) { grid-area:2 / 1;justify-self:start; } #propcards-demo[data-layout-version="2"] .tch-wallets > .tch-wallet:nth-of-type(2) { grid-area:2 / 2 / auto / 4;justify-self:start; } #propcards-demo[data-layout-version="2"] .tch-dev-reset, #propcards-demo[data-layout-version="2"] #propcards-owner-mode { grid-area:2 / 4 / auto / 6;justify-self:end; } } @media (max-width:600px) { #propcards-demo[data-layout-version="2"] .tch-topbar { grid-template-columns:calc(88px * var(--pc-ui-scale, 1)) minmax(calc(100px * var(--pc-ui-scale, 1)),1fr) calc(32px * var(--pc-ui-scale, 1)) calc(32px * var(--pc-ui-scale, 1));gap:calc(6px * var(--pc-ui-scale, 1)); padding-inline:calc(8px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-brand-wordmark { grid-area:2 / 1 / auto / 3;width:calc(130px * var(--pc-ui-scale, 1));height:calc(34px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-powered-top { grid-area:1 / 1; } #propcards-demo[data-layout-version="2"] .tch-brand > div:last-of-type { grid-area:1 / 2;min-width:0; } #propcards-demo[data-layout-version="2"] [data-sound-toggle] { grid-area:1 / 3; } #propcards-demo[data-layout-version="2"] [data-open-settings] { grid-area:1 / 4; } #propcards-demo[data-layout-version="2"] .tch-wallets > .tch-wallet:nth-of-type(1) { grid-area:3 / 1 / auto / 3; } #propcards-demo[data-layout-version="2"] .tch-wallets > .tch-wallet:nth-of-type(2) { grid-area:3 / 3 / auto / 5;justify-self:end;font-size:calc(11px * var(--pc-ui-scale, 1));padding-inline:calc(4px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-dev-reset, #propcards-demo[data-layout-version="2"] #propcards-owner-mode { grid-area:2 / 3 / auto / 5; } } /* Keep all purchase/open actions on the same baseline, with status above. */ #propcards-demo[data-layout-version="2"] [data-open-owned-pack] { font-weight:800; } #propcards-demo[data-layout-version="2"] .tch-shop-pack .tch-shop-buttons > .tch-pack-stock { order:-1;min-height:0;margin:0 0 calc(4px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-app:has([data-view="run"]:not([hidden])) { height:auto;min-height:min(calc(620px * var(--pc-ui-scale, 1)),calc(100dvh - calc(24px * var(--pc-ui-scale, 1)))); } #propcards-demo[data-layout-version="2"] .tch-main:has([data-view="run"]:not([hidden])) { overflow:visible;flex:none; } #propcards-demo[data-layout-version="2"] .tch-mythic-perk:is(.selected,.armed) { opacity:1;filter:none;border:calc(2px * var(--pc-ui-scale, 1)) solid #ffdf6d;background:linear-gradient(125deg,#71500e,#342111);box-shadow:0 0 0 calc(2px * var(--pc-ui-scale, 1)) #dcae3733,0 0 calc(18px * var(--pc-ui-scale, 1)) #ffc83d55,inset 0 calc(1px * var(--pc-ui-scale, 1)) #fff0a666;color:#fff5ce; } #propcards-demo[data-layout-version="2"] .tch-mythic-perk:is(.selected,.armed) strong { color:#fff0a0; } #propcards-demo[data-layout-version="2"] .tch-mythic-perk:is(.selected,.armed) small { color:#f8e9c0; } @media(max-width:1240px) { #propcards-demo[data-layout-version="2"] .tch-run-side { min-height:0;grid-template-rows:calc(76px * var(--pc-ui-scale, 1)) max-content; } } /* Window-adaptive layout: scale content, not the entire page or saved state. */ #propcards-demo[data-layout-version="2"] .tch-app { height:calc(100dvh - calc(24px * var(--pc-ui-scale, 1)));min-height:calc(240px * var(--pc-ui-scale, 1));width:100%;max-width:none; } #propcards-demo[data-layout-version="2"] .tch-app:has([data-view="run"]:not([hidden])) { height:auto;min-height:calc(100dvh - calc(24px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] [data-view="run"], #propcards-demo[data-layout-version="2"] [data-view="pack"] { max-width:none;width:100%; } #propcards-demo[data-layout-version="2"] .tch-run-grid { grid-template-columns:minmax(0,1fr);max-width:none;min-height:var(--v2-main-room,calc(440px * var(--pc-ui-scale, 1)));gap:calc(18px * var(--pc-ui-scale, 1));align-items:stretch; } #propcards-demo[data-layout-version="2"][data-v2-wide-table="true"] .tch-run-grid { grid-template-columns:minmax(0,74fr) minmax(0,26fr); } #propcards-demo[data-layout-version="2"] .tch-event-card { min-width:0; } #propcards-demo[data-layout-version="2"] .tch-active-hand { grid-template-columns:repeat(auto-fill,var(--v2-card-w,calc(174px * var(--pc-ui-scale, 1))));grid-auto-columns:var(--v2-card-w,calc(174px * var(--pc-ui-scale, 1)));gap:var(--v2-card-gap,calc(10px * var(--pc-ui-scale, 1)));justify-content:start; } #propcards-demo[data-layout-version="2"] .tch-play-card { width:var(--v2-card-w,calc(174px * var(--pc-ui-scale, 1)));min-width:0;max-width:none;height:var(--v2-card-h,calc(256px * var(--pc-ui-scale, 1)));min-height:0;max-height:none;grid-template-rows:calc(14px * var(--pc-ui-scale, 1)) calc(32px * var(--pc-ui-scale, 1)) var(--v2-card-art) minmax(0,1fr); } #propcards-demo[data-layout-version="2"] .tch-play-card > strong { font-size:clamp(calc(13px * var(--pc-ui-scale, 1)),var(--v2-card-font),calc(20px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .tch-play-card small[class] { font-size:var(--v2-card-font,calc(14px * var(--pc-ui-scale, 1)));min-height:0; } #propcards-demo[data-layout-version="2"] .tch-play-card .tch-card-symbol { width:calc(var(--v2-card-art) * .72);height:calc(var(--v2-card-art) * .72);min-height:0;font-size:clamp(calc(32px * var(--pc-ui-scale, 1)),calc(var(--v2-card-art) * .45),calc(68px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .tch-run-side { grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:calc(76px * var(--pc-ui-scale, 1)) max-content;min-height:0; } #propcards-demo[data-layout-version="2"][data-v2-wide-table="true"] .tch-run-side { grid-template-columns:minmax(0,1fr);grid-template-rows:calc(90px * var(--pc-ui-scale, 1)) max-content max-content;min-height:0; } #propcards-demo[data-layout-version="2"] .tch-mythic-bank { padding:calc(12px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #79559477; } #propcards-demo[data-layout-version="2"] .tch-effect-bank { align-content:start; } #propcards-demo[data-layout-version="2"] .tch-mythic-list { grid-template-columns:minmax(0,1fr); } #propcards-demo[data-layout-version="2"] .v2-unbanked .tch-pot-number { font-size:clamp(calc(26px * var(--pc-ui-scale, 1)),2.2vw,calc(42px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .tch-choice strong { font-size:clamp(calc(14px * var(--pc-ui-scale, 1)),1.05vw,calc(20px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .tch-choice > span { font-size:clamp(calc(15px * var(--pc-ui-scale, 1)),1.15vw,calc(22px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .tch-choice { min-height:calc(110px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-pack-stage.revealed .tch-pack-cards { grid-template-columns:repeat(auto-fit,var(--v2-reveal-w,calc(174px * var(--pc-ui-scale, 1))));max-width:none;gap:var(--v2-card-gap,calc(10px * var(--pc-ui-scale, 1)));justify-content:center; } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card { width:var(--v2-reveal-w,calc(174px * var(--pc-ui-scale, 1)));height:var(--v2-reveal-h,calc(256px * var(--pc-ui-scale, 1)));min-height:0;max-height:none;grid-template-rows:calc(14px * var(--pc-ui-scale, 1)) calc(32px * var(--pc-ui-scale, 1)) calc(var(--v2-reveal-h,calc(256px * var(--pc-ui-scale, 1))) * .34) minmax(0,1fr); } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card-icon { height:calc(var(--v2-reveal-h,calc(256px * var(--pc-ui-scale, 1))) * .34);min-height:0; } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card-symbol { width:calc(var(--v2-reveal-h,calc(256px * var(--pc-ui-scale, 1))) * .24);height:calc(var(--v2-reveal-h,calc(256px * var(--pc-ui-scale, 1))) * .24);min-height:0;font-size:clamp(calc(32px * var(--pc-ui-scale, 1)),calc(var(--v2-reveal-h,calc(256px * var(--pc-ui-scale, 1))) * .15),calc(70px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-card > strong { font-size:clamp(calc(13px * var(--pc-ui-scale, 1)),1.1vw,calc(20px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .tch-pack-cards .tch-power { font-size:clamp(calc(14px * var(--pc-ui-scale, 1)),1.2vw,calc(22px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] [data-view="pack"] .v2-pack-title { font-size:clamp(calc(22px * var(--pc-ui-scale, 1)),2vw,calc(34px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] [data-to-desk] { font-size:clamp(calc(16px * var(--pc-ui-scale, 1)),1.25vw,calc(22px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"] .tch-finish { min-height:var(--v2-main-room,calc(440px * var(--pc-ui-scale, 1)));display:flex;flex-direction:column;align-items:center;justify-content:center; } /* Stable rank slots: loading, empty, error and success share the same geometry. */ /* Approved illustrations occupy only the art window, never the live text/frame. */ #propcards-demo[data-layout-version="2"] :is(.tch-card-icon,.tch-card-visual,.tch-mythic-perk-icon,.tch-overflow-mythic-icon):has(> .v2-card-art-image) { position:relative;overflow:hidden; } #propcards-demo[data-layout-version="2"] .v2-card-art-image { display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border:0;border-radius:inherit;pointer-events:none; } #propcards-demo[data-layout-version="2"] .v2-card-art-ready > .v2-card-art-image { display:block; } #propcards-demo[data-layout-version="2"] .v2-card-art-ready > .tch-card-symbol { visibility:hidden; } #propcards-demo[data-layout-version="2"] .v2-card-art-ready::before, #propcards-demo[data-layout-version="2"] .v2-card-art-ready::after { display:none; } #propcards-demo[data-layout-version="2"] .v2-card-art-ready { background:#10071e!important; } #propcards-demo[data-layout-version="2"] .tch-mythic-perk.v2-illustrated-card { grid-template-columns:calc(52px * var(--pc-ui-scale, 1)) minmax(0,1fr); } #propcards-demo[data-layout-version="2"] .tch-mythic-perk-icon.v2-card-art-ready { height:calc(36px * var(--pc-ui-scale, 1));width:calc(52px * var(--pc-ui-scale, 1));font-size:0;border-radius:calc(5px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"] .tch-overflow-mythic-icon.v2-card-art-ready { font-size:0; } #propcards-demo[data-layout-version="2"] .tch-leaderboard-popup { height:min(calc(820px * var(--pc-ui-scale, 1)),calc(100dvh - calc(28px * var(--pc-ui-scale, 1))));max-height:calc(100dvh - calc(28px * var(--pc-ui-scale, 1)));display:flex;flex-direction:column;overflow:hidden; } #propcards-demo[data-layout-version="2"] .tch-leaderboard-popup > * { flex-shrink:0; } #propcards-demo[data-layout-version="2"] .tch-leader-tabs { grid-template-columns:repeat(6,minmax(0,1fr)); } #propcards-demo [data-leaderboard-share] { align-self:center;padding:calc(9px * var(--pc-ui-scale, 1)) calc(22px * var(--pc-ui-scale, 1));margin-top:calc(5px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #d9b456;border-radius:calc(12px * var(--pc-ui-scale, 1));background:#663197;color:#fff;font-weight:700;cursor:pointer; } #propcards-demo [data-leaderboard-share]:disabled { opacity:.5;cursor:default; } #propcards-demo .v2-share-dialog { box-sizing:border-box;width:min(calc(680px * var(--pc-ui-scale, 1)),calc(100vw - calc(24px * var(--pc-ui-scale, 1))));max-height:calc(100dvh - calc(24px * var(--pc-ui-scale, 1)));overflow:auto;padding:calc(22px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #d9b456;border-radius:calc(20px * var(--pc-ui-scale, 1));background:linear-gradient(140deg,#43205f,#130b20);color:#fff; } #propcards-demo .v2-share-dialog::backdrop { background:#080311dc; } #propcards-demo .v2-share-dialog h2 { margin:0 0 calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo .v2-share-dialog p { font-size:calc(15px * var(--pc-ui-scale, 1));line-height:1.4; } #propcards-demo .v2-share-dialog img { display:block;width:100%;height:auto;border-radius:calc(14px * var(--pc-ui-scale, 1)); } #propcards-demo .v2-share-dialog img[hidden] { display:none; } #propcards-demo .v2-share-actions { display:flex;justify-content:flex-end;gap:calc(10px * var(--pc-ui-scale, 1));margin-top:calc(16px * var(--pc-ui-scale, 1)); } #propcards-demo .v2-share-actions button { padding:calc(10px * var(--pc-ui-scale, 1)) calc(18px * var(--pc-ui-scale, 1));border-radius:calc(10px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid #b48cc6;background:#502373;color:white;font-weight:700;cursor:pointer; } #propcards-demo .v2-share-actions button:last-child { background:#ffd96c;color:#211326; } #propcards-demo .v2-share-actions button:disabled { opacity:.5;cursor:default; } #propcards-demo[data-layout-version="2"] .tch-leader-tabs > button { grid-column:span 2;min-width:0; } #propcards-demo[data-layout-version="2"] .tch-leader-tabs > [data-leaderboard-tab="winRate"] { grid-column:2 / span 2; } #propcards-demo[data-layout-version="2"] .tch-leader-tabs > [data-leaderboard-tab="packs"] { grid-column:4 / span 2; } #propcards-demo[data-layout-version="2"] [data-active-hand]:has(.tch-play-card.selected:not(:disabled)) .tch-play-card:not(.selected):not(:disabled) { opacity:.7;filter:saturate(.65); } #propcards-demo #propcards-beta-controls { display:flex;flex-shrink:0;align-items:center;justify-content:center;gap:calc(12px * var(--pc-ui-scale, 1));padding:calc(5px * var(--pc-ui-scale, 1)) calc(12px * var(--pc-ui-scale, 1));background:#2a173c;color:#dec8f3;font-size:calc(11px * var(--pc-ui-scale, 1)); } #propcards-demo #propcards-beta-controls[hidden] { display:none; } #propcards-demo #propcards-skip-day { border:calc(1px * var(--pc-ui-scale, 1)) solid #bd92e7;border-radius:calc(8px * var(--pc-ui-scale, 1));padding:calc(5px * var(--pc-ui-scale, 1)) calc(12px * var(--pc-ui-scale, 1));background:#492260;color:#fff;font-weight:700;cursor:pointer; } #propcards-demo #propcards-skip-day:disabled { opacity:.5;cursor:not-allowed; } #propcards-demo[data-layout-version="2"] [data-leaderboard-top] { flex:1;min-height:0;overflow-y:auto;align-content:start; } #propcards-demo[data-layout-version="2"] .v2-leader-slot { display:grid;grid-template-columns:calc(38px * var(--pc-ui-scale, 1)) minmax(0,1fr) calc(110px * var(--pc-ui-scale, 1));align-items:center;gap:calc(10px * var(--pc-ui-scale, 1));height:calc(42px * var(--pc-ui-scale, 1));min-height:calc(42px * var(--pc-ui-scale, 1));padding:calc(6px * var(--pc-ui-scale, 1)) calc(11px * var(--pc-ui-scale, 1));border:calc(1px * var(--pc-ui-scale, 1)) solid transparent;border-radius:calc(10px * var(--pc-ui-scale, 1));background:#ffffff08; } #propcards-demo[data-layout-version="2"] .v2-leader-slot > b { color:#b59ac8; } #propcards-demo[data-layout-version="2"] .v2-leader-slot[hidden] { display:none; } #propcards-demo[data-layout-version="2"] .v2-leader-slot > strong { color:#ffe594;white-space:nowrap;text-align:right; } #propcards-demo[data-layout-version="2"] .v2-leader-slot .tch-leader-name { overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0; } #propcards-demo[data-layout-version="2"] .v2-leader-slot.is-empty .tch-leader-name, #propcards-demo[data-layout-version="2"] .v2-leader-slot.is-empty > strong { opacity:.45; } #propcards-demo[data-layout-version="2"] [data-leaderboard-status] { min-height:calc(36px * var(--pc-ui-scale, 1));height:calc(36px * var(--pc-ui-scale, 1));margin:calc(8px * var(--pc-ui-scale, 1)) 0 0;font-size:calc(12px * var(--pc-ui-scale, 1));line-height:calc(18px * var(--pc-ui-scale, 1));color:#cfbadf; } @media(max-width:500px) { #propcards-demo[data-layout-version="2"] .v2-leader-slot { grid-template-columns:calc(28px * var(--pc-ui-scale, 1)) minmax(0,1fr) calc(78px * var(--pc-ui-scale, 1));gap:calc(6px * var(--pc-ui-scale, 1));padding:calc(6px * var(--pc-ui-scale, 1));font-size:calc(12px * var(--pc-ui-scale, 1)); } } /* Isolated touch-device presentation: desktop selectors and game state unchanged. */ body:has(#propcards-demo[data-mobile-layout]) { margin:0!important;padding:0!important;overflow:hidden; } #propcards-demo[data-layout-version="2"][data-mobile-layout] { /* Discord's native controls are not included in the browser's env() insets. Some clients publish these variables only after their first resize. Leave room for the right-hand controls until an explicit value (including 0) arrives. */ --pc-safe-top:max(env(safe-area-inset-top,0px),var(--discord-safe-area-inset-top,0px)); --pc-safe-right:max(env(safe-area-inset-right,0px),var(--discord-safe-area-inset-right,72px)); --pc-safe-bottom:max(env(safe-area-inset-bottom,0px),var(--discord-safe-area-inset-bottom,0px)); --pc-safe-left:max(env(safe-area-inset-left,0px),var(--discord-safe-area-inset-left,0px)); --pc-safe-height:calc(100dvh - var(--pc-safe-top) - var(--pc-safe-bottom)); margin:0;width:100%;max-width:none;padding:var(--pc-safe-top) var(--pc-safe-right) var(--pc-safe-bottom) var(--pc-safe-left);box-sizing:border-box; container:propcards-mobile / inline-size; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-app { height:var(--pc-safe-height);min-height:0;border-radius:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-main { padding:calc(8px * var(--pc-ui-scale, 1));min-height:0;overflow:auto;flex:1; } /* Override the more-specific desktop run-screen auto-height rules too. Without this, the app grows beyond the phone while the outer page clips its bottom. */ #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-app:has([data-view="run"]:not([hidden])) { height:var(--pc-safe-height);min-height:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-main:has([data-view="run"]:not([hidden])) { flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y; } #propcards-demo[data-layout-version="2"][data-mobile-layout] button { touch-action:manipulation;user-select:none;-webkit-user-select:none; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-topbar { display:grid;grid-template-columns:calc(104px * var(--pc-ui-scale, 1)) calc(66px * var(--pc-ui-scale, 1)) minmax(calc(100px * var(--pc-ui-scale, 1)),1fr) calc(40px * var(--pc-ui-scale, 1)) calc(40px * var(--pc-ui-scale, 1)) auto auto;gap:calc(4px * var(--pc-ui-scale, 1));padding:calc(2px * var(--pc-ui-scale, 1)) calc(8px * var(--pc-ui-scale, 1));min-height:calc(44px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] :is(.tch-brand,.tch-wallets) { display:contents; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-brand-wordmark { grid-area:1/1;width:calc(104px * var(--pc-ui-scale, 1));height:calc(34px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-powered-top { grid-area:1/2;width:calc(66px * var(--pc-ui-scale, 1));height:calc(32px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-powered-top img { width:calc(66px * var(--pc-ui-scale, 1));height:calc(22px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-brand > div:last-of-type { grid-area:1/3;min-width:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] [data-topbar-status] { font-size:calc(10px * var(--pc-ui-scale, 1));line-height:1.25; } #propcards-demo[data-layout-version="2"][data-mobile-layout] [data-sound-toggle] { grid-area:1/4;width:calc(40px * var(--pc-ui-scale, 1));height:calc(40px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] [data-open-settings] { grid-area:1/5;width:calc(40px * var(--pc-ui-scale, 1));height:calc(40px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-wallets > .tch-wallet:nth-of-type(1) { grid-area:1/6;font-size:calc(11px * var(--pc-ui-scale, 1));padding:calc(5px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-wallets > .tch-wallet:nth-of-type(2) { grid-area:1/7;font-size:calc(10px * var(--pc-ui-scale, 1));padding:calc(5px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] #propcards-owner-mode { grid-area:2/1/auto/-1;justify-self:end;font-size:calc(11px * var(--pc-ui-scale, 1));min-height:calc(32px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] :is(#propcards-beta-controls,#propcards-test-mode-banner) { padding:calc(2px * var(--pc-ui-scale, 1)) calc(8px * var(--pc-ui-scale, 1));font-size:calc(10px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] #propcards-skip-day { min-height:calc(32px * var(--pc-ui-scale, 1));padding:calc(3px * var(--pc-ui-scale, 1)) calc(10px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-step { padding:calc(5px * var(--pc-ui-scale, 1));font-size:calc(11px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-run-grid { grid-template-columns:minmax(0,1fr) calc(180px * var(--pc-ui-scale, 1));gap:calc(10px * var(--pc-ui-scale, 1));min-height:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .v2-trade-heading { margin:0 0 calc(5px * var(--pc-ui-scale, 1));font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-active-hand { display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:clamp(calc(106px * var(--pc-ui-scale, 1)),15vw,calc(148px * var(--pc-ui-scale, 1)));justify-content:start;gap:calc(8px * var(--pc-ui-scale, 1));overflow-x:auto;overflow-y:hidden;padding:calc(5px * var(--pc-ui-scale, 1)) calc(4px * var(--pc-ui-scale, 1)) calc(8px * var(--pc-ui-scale, 1));scroll-snap-type:x proximity;scrollbar-width:thin; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-play-card { width:100%;height:calc(176px * var(--pc-ui-scale, 1));padding:calc(6px * var(--pc-ui-scale, 1));gap:calc(3px * var(--pc-ui-scale, 1));grid-template-rows:calc(12px * var(--pc-ui-scale, 1)) calc(26px * var(--pc-ui-scale, 1)) calc(58px * var(--pc-ui-scale, 1)) minmax(0,1fr);scroll-snap-align:start; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-play-card > strong { font-size:calc(11px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-play-card .tch-card-visual { height:calc(58px * var(--pc-ui-scale, 1));min-height:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-play-card small[class] { min-height:0;font-size:calc(12px * var(--pc-ui-scale, 1));padding-top:calc(3px * var(--pc-ui-scale, 1));line-height:1.15; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-play-card:hover:not(:disabled) { transform:none; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-hand-market { padding:calc(4px * var(--pc-ui-scale, 1)) calc(6px * var(--pc-ui-scale, 1));margin:calc(4px * var(--pc-ui-scale, 1)) 0;gap:calc(4px * var(--pc-ui-scale, 1));flex-wrap:wrap; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-hand-market-copy strong { font-size:calc(11px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .v2-hand-market-lock { font-size:calc(10px * var(--pc-ui-scale, 1));white-space:normal; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-hand-market-actions button { min-height:calc(36px * var(--pc-ui-scale, 1));font-size:calc(11px * var(--pc-ui-scale, 1));padding:calc(4px * var(--pc-ui-scale, 1)) calc(8px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-choices { grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(5px * var(--pc-ui-scale, 1));margin:calc(5px * var(--pc-ui-scale, 1)) 0 0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-choice { min-height:calc(80px * var(--pc-ui-scale, 1));padding:calc(6px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-choice :is(strong,span) { font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-choice :is(small,em,.v2-risk-label) { font-size:calc(10px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .v2-choice-icon { display:none; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-choice { grid-template-columns:minmax(0,1fr); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-choice > * { grid-column:1; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-run-side { grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:calc(8px * var(--pc-ui-scale, 1));min-height:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .v2-unbanked { min-height:calc(60px * var(--pc-ui-scale, 1));padding:calc(8px * var(--pc-ui-scale, 1));grid-column:1; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .v2-unbanked .tch-pot-number { font-size:calc(24px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] :is(.tch-effect-bank,.tch-mythic-bank) { padding:calc(8px * var(--pc-ui-scale, 1));min-height:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-effect-list:has(.tch-effect-empty) { height:auto;min-height:calc(32px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-mythic-perk { min-height:calc(44px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .v2-trade-result { margin:calc(6px * var(--pc-ui-scale, 1)) 0;padding:calc(8px * var(--pc-ui-scale, 1));font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-actions button { min-height:calc(44px * var(--pc-ui-scale, 1));padding:calc(8px * var(--pc-ui-scale, 1)) calc(12px * var(--pc-ui-scale, 1));font-size:calc(13px * var(--pc-ui-scale, 1)); } /* Open the real sealed pack, then swipe through the full-size readable cards. */ #propcards-demo[data-layout-version="2"][data-mobile-layout] [data-view="pack"] .v2-pack-title { font-size:calc(18px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack { height:clamp(calc(100px * var(--pc-ui-scale, 1)),calc(var(--pc-safe-height) - calc(190px * var(--pc-ui-scale, 1))),calc(360px * var(--pc-ui-scale, 1))); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .v2-pack-odds-toggle { min-height:calc(40px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-stage.revealed .tch-pack-cards { display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:clamp(calc(112px * var(--pc-ui-scale, 1)),17vw,calc(190px * var(--pc-ui-scale, 1)));justify-content:start;overflow-x:auto;padding:calc(5px * var(--pc-ui-scale, 1));gap:calc(8px * var(--pc-ui-scale, 1)); } /* A single bonus reveal is not a swipeable hand: center it over its action. */ #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-stage.revealed .tch-pack-cards:has(> .tch-pick:only-child) { justify-content:center; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-cards .tch-card { width:100%;height:calc(185px * var(--pc-ui-scale, 1));padding:calc(6px * var(--pc-ui-scale, 1));gap:calc(4px * var(--pc-ui-scale, 1));grid-template-rows:calc(12px * var(--pc-ui-scale, 1)) calc(26px * var(--pc-ui-scale, 1)) calc(62px * var(--pc-ui-scale, 1)) minmax(0,1fr); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-cards .tch-card-icon { height:calc(62px * var(--pc-ui-scale, 1));min-height:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-cards .tch-card :is(strong,.tch-power) { font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-footer { margin-top:calc(5px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] [data-to-desk] { min-height:calc(44px * var(--pc-ui-scale, 1));padding:calc(8px * var(--pc-ui-scale, 1)) calc(20px * var(--pc-ui-scale, 1));font-size:calc(14px * var(--pc-ui-scale, 1)); } /* Shop and all dialogs remain reachable without page-level overflow. */ #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-head h2 { font-size:calc(20px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-head { margin-bottom:calc(8px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-shop-launch { min-height:calc(130px * var(--pc-ui-scale, 1));--tch-pack-launch-pad-y:calc(12px * var(--pc-ui-scale, 1));padding:calc(12px * var(--pc-ui-scale, 1)) calc(18px * var(--pc-ui-scale, 1));gap:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-shop-launch-copy strong { font-size:calc(22px * var(--pc-ui-scale, 1)); } /* Let wrapped copy reserve space before the sponsor rather than overlaying it. */ #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-shop-launch-copy::after { position:static;flex:none;margin:calc(12px * var(--pc-ui-scale, 1)) 0 0;max-width:100%; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-shop-miniatures img { height:calc(160px * var(--pc-ui-scale, 1));min-width:calc(70px * var(--pc-ui-scale, 1));max-width:calc(100px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-items { grid-template-columns:repeat(2,minmax(0,1fr)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-streak-overlay { position:fixed;box-sizing:border-box;padding:calc(calc(8px * var(--pc-ui-scale, 1)) + var(--pc-safe-top)) calc(calc(8px * var(--pc-ui-scale, 1)) + var(--pc-safe-right)) calc(calc(8px * var(--pc-ui-scale, 1)) + var(--pc-safe-bottom)) calc(calc(8px * var(--pc-ui-scale, 1)) + var(--pc-safe-left)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-streak-popup { box-sizing:border-box;max-height:calc(var(--pc-safe-height) - calc(16px * var(--pc-ui-scale, 1)));min-height:0;overflow:auto;padding:calc(14px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-streak-popup h2 { font-size:calc(22px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-settings-head { margin-bottom:calc(6px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-streak-popup button { min-height:calc(40px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-settings-close { min-width:calc(44px * var(--pc-ui-scale, 1));min-height:calc(44px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-tutorial-popup { justify-content:flex-start;padding-bottom:calc(14px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-tutorial-popup > * { flex-shrink:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-tutorial-popup .tch-full-logo { width:calc(260px * var(--pc-ui-scale, 1));max-width:80%;height:calc(85px * var(--pc-ui-scale, 1));margin:calc(4px * var(--pc-ui-scale, 1)) auto calc(8px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-tutorial-popup .tch-powered-welcome { position:static;transform:none;margin:calc(12px * var(--pc-ui-scale, 1)) auto 0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-tutorial-icon { min-height:calc(100px * var(--pc-ui-scale, 1));margin:calc(8px * var(--pc-ui-scale, 1)) auto; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-tutorial-popup [data-tutorial-copy] { font-size:calc(14px * var(--pc-ui-scale, 1));min-height:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-shop-popup { width:min(calc(900px * var(--pc-ui-scale, 1)),100%);max-width:100%; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-shop-popup::before, #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-shop-popup::after { left:calc(16px * var(--pc-ui-scale, 1));right:calc(16px * var(--pc-ui-scale, 1));max-width:calc(100% - calc(32px * var(--pc-ui-scale, 1)));overflow:hidden;transform:none;animation:none; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-packs { grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-pack { padding:calc(10px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-pack img { max-height:calc(110px * var(--pc-ui-scale, 1));object-fit:contain; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-pack-art { height:calc(90px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-pack-art img { height:calc(90px * var(--pc-ui-scale, 1));width:auto; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-pack > strong { font-size:calc(15px * var(--pc-ui-scale, 1));margin:calc(2px * var(--pc-ui-scale, 1)) 0 calc(4px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-pack small { font-size:calc(11px * var(--pc-ui-scale, 1));min-height:calc(26px * var(--pc-ui-scale, 1));margin-bottom:calc(5px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-shop-popup .tch-settings-head { padding:0 0 calc(4px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-shop-popup .tch-settings-head { position:sticky;top:calc(-14px * var(--pc-ui-scale, 1));z-index:3;background:#21112f; } #propcards-demo[data-layout-version="2"][data-mobile-layout] [data-pack-shop-copy] { font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-pack-shop-popup .tch-shop-packs { margin-top:calc(6px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-leaderboard-popup { height:calc(var(--pc-safe-height) - calc(16px * var(--pc-ui-scale, 1)));overflow:hidden; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .v2-share-dialog { box-sizing:border-box;left:calc(var(--pc-safe-left) + calc(8px * var(--pc-ui-scale, 1)));right:calc(var(--pc-safe-right) + calc(8px * var(--pc-ui-scale, 1)));top:calc(var(--pc-safe-top) + calc(8px * var(--pc-ui-scale, 1)));bottom:calc(var(--pc-safe-bottom) + calc(8px * var(--pc-ui-scale, 1)));max-width:calc(100vw - var(--pc-safe-left) - var(--pc-safe-right) - calc(16px * var(--pc-ui-scale, 1)));max-height:calc(var(--pc-safe-height) - calc(16px * var(--pc-ui-scale, 1)));margin:auto; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-leader-tabs { margin:calc(6px * var(--pc-ui-scale, 1)) 0;gap:calc(4px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-leader-tabs button { padding:calc(5px * var(--pc-ui-scale, 1));font-size:calc(12px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] [data-leaderboard-status] { height:auto;min-height:calc(18px * var(--pc-ui-scale, 1));margin:calc(2px * var(--pc-ui-scale, 1)) 0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-leader-player { margin-top:calc(4px * var(--pc-ui-scale, 1));padding-top:calc(4px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .v2-leader-slot { height:calc(36px * var(--pc-ui-scale, 1));min-height:calc(36px * var(--pc-ui-scale, 1));font-size:calc(13px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-finish { min-height:0;padding:calc(12px * var(--pc-ui-scale, 1)); } .v2-rotate-device[hidden] { display:none; } .v2-rotate-device { position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(30px * var(--pc-ui-scale, 1));background:radial-gradient(ellipse at top,#4e2270,#12091f 70%);color:#fff;text-align:center;font:calc(16px * var(--pc-ui-scale, 1))/1.5 system-ui,sans-serif; } .v2-rotate-device > span { color:#ffdf79;font-size:calc(70px * var(--pc-ui-scale, 1)); } .v2-rotate-device h2 { color:#ffdf79;font-size:calc(24px * var(--pc-ui-scale, 1)); } .v2-rotate-device p { margin:calc(6px * var(--pc-ui-scale, 1)) 0;color:#dfcee9; } #propcards-demo[data-mobile-layout] .v2-rotate-device { box-sizing:border-box;padding:calc(calc(20px * var(--pc-ui-scale, 1)) + var(--pc-safe-top)) calc(calc(20px * var(--pc-ui-scale, 1)) + var(--pc-safe-right)) calc(calc(20px * var(--pc-ui-scale, 1)) + var(--pc-safe-bottom)) calc(calc(20px * var(--pc-ui-scale, 1)) + var(--pc-safe-left)); } @media (orientation:landscape) and (max-height:600px) { #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-play-card { height:calc(154px * var(--pc-ui-scale, 1));grid-template-rows:calc(12px * var(--pc-ui-scale, 1)) calc(24px * var(--pc-ui-scale, 1)) calc(44px * var(--pc-ui-scale, 1)) minmax(0,1fr); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-play-card .tch-card-visual { height:calc(44px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-choice { min-height:calc(74px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-rare-wheel-popup { display:grid;grid-template-columns:minmax(calc(200px * var(--pc-ui-scale, 1)),1fr) minmax(calc(230px * var(--pc-ui-scale, 1)),1fr);grid-template-rows:auto auto auto 1fr auto;gap:calc(6px * var(--pc-ui-scale, 1)) calc(22px * var(--pc-ui-scale, 1));width:min(calc(900px * var(--pc-ui-scale, 1)),100%); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-rare-wheel-popup > :not(.tch-wheel-stage) { grid-column:2; } #propcards-demo[data-layout-version="2"][data-mobile-layout] #tch-rare-wheel-title { font-size:calc(26px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-rare-wheel-copy { font-size:calc(12px * var(--pc-ui-scale, 1));margin:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-wheel-stage { grid-column:1;grid-row:1/6;--wheel-size:min(36cqw,calc(var(--pc-safe-height) - calc(60px * var(--pc-ui-scale, 1))));margin:auto; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-wheel-wallet { min-width:0;font-size:calc(11px * var(--pc-ui-scale, 1));padding:calc(5px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-wheel-wallet strong { font-size:calc(13px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-rare-wheel-result { min-height:calc(30px * var(--pc-ui-scale, 1));font-size:calc(12px * var(--pc-ui-scale, 1));margin:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-rare-wheel-actions { gap:calc(6px * var(--pc-ui-scale, 1));flex-wrap:wrap; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-rare-wheel-actions button { min-height:calc(44px * var(--pc-ui-scale, 1));padding:calc(8px * var(--pc-ui-scale, 1)) calc(12px * var(--pc-ui-scale, 1));font-size:calc(13px * var(--pc-ui-scale, 1)); } } /* Use the space left after Discord's controls, not a particular phone model. */ @container propcards-mobile (max-width:740px) { #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-topbar { grid-template-columns:calc(88px * var(--pc-ui-scale, 1)) calc(60px * var(--pc-ui-scale, 1)) minmax(calc(90px * var(--pc-ui-scale, 1)),1fr) calc(40px * var(--pc-ui-scale, 1)) calc(40px * var(--pc-ui-scale, 1)) auto; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-brand-wordmark { width:calc(88px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-wallets > .tch-wallet:nth-of-type(2) { grid-area:2/6; } #propcards-demo[data-layout-version="2"][data-mobile-layout] #propcards-owner-mode { grid-area:2/1/auto/6; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-run-grid { grid-template-columns:minmax(0,1fr) calc(162px * var(--pc-ui-scale, 1));gap:calc(8px * var(--pc-ui-scale, 1)); } } @container propcards-mobile (max-width:620px) { #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-topbar { grid-template-columns:calc(88px * var(--pc-ui-scale, 1)) calc(60px * var(--pc-ui-scale, 1)) minmax(calc(60px * var(--pc-ui-scale, 1)),1fr) calc(40px * var(--pc-ui-scale, 1)) calc(40px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-wallets > .tch-wallet:nth-of-type(1) { grid-area:2/1/auto/4;justify-self:start; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-wallets > .tch-wallet:nth-of-type(2) { grid-area:2/4/auto/6;justify-self:end; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-pack { padding:calc(6px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-pack .tch-primary { padding:calc(8px * var(--pc-ui-scale, 1)) calc(4px * var(--pc-ui-scale, 1));font-size:calc(12px * var(--pc-ui-scale, 1)); } } @container propcards-mobile (max-width:540px) { #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-rare-wheel-popup { display:flex;flex-direction:column;gap:calc(8px * var(--pc-ui-scale, 1)); } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-rare-wheel-popup > * { flex-shrink:0; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-wheel-stage { --wheel-size:min(calc(240px * var(--pc-ui-scale, 1)),60cqw);margin:0 auto; } } #propcards-demo { font-size:calc(16px * var(--pc-ui-scale, 1)); } /* At very short phone heights, pinned shop heading/footer consume the entire item viewport. Use one scrollable column so every purchase remains reachable. */ @media (max-height:320px) { #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-main:has([data-view="shop"]:not([hidden])) { overflow-y:auto; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop { height:auto; } #propcards-demo[data-layout-version="2"][data-mobile-layout] .tch-shop-scroll { flex:none;overflow:visible; } }