@import url("./stockquest-ui-base-v526.css"); /* ========================================================= V5.27 — MOBILE LOGIN LAYER + 44PX NEWS FIT Shared by Normal Game and Live Game. Important: stockquest-ui.js deliberately reparents News/Next directly under on mobile and gives them inline !important positioning/height/z-index. This file therefore works WITH that behaviour instead of trying to override those inline styles. ========================================================= */ @media (max-width:1050px){ #startOverlay{ z-index:20000 !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; align-items:flex-start !important; padding-top:max(18px, env(safe-area-inset-top)) !important; padding-bottom:max(18px, env(safe-area-inset-bottom)) !important; } #startOverlay > .card{ position:relative !important; z-index:20001 !important; margin:14px auto !important; } .news, body > .news{ box-sizing:border-box !important; } .news > b, body > .news > b{ display:block !important; margin:0 0 1px !important; font-size:10px !important; line-height:10px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .news .hint, body > .news .hint{ display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important; margin:0 !important; padding:0 !important; max-height:18px !important; overflow:hidden !important; font-size:8px !important; line-height:9px !important; color:#fff !important; } .news .news-source, body > .news .news-source, .news .real-news-badge, body > .news .real-news-badge, .news .pill, body > .news .pill{ display:none !important; } body:not(.mobile-portfolio):not(.mobile-leaderboard) .layout{ top:calc(var(--sq-sticky-header-h,64px) + var(--sq-sticky-status-h,66px) + 62px) !important; } } @media (max-width:390px){ .news > b, body > .news > b{ font-size:9px !important; line-height:9px !important; } .news .hint, body > .news .hint{ font-size:7.5px !important; line-height:8.5px !important; max-height:17px !important; } } /* ========================================================= V5.28 — APPROVED MOBILE STOCK CARD REFINEMENT Shared by Normal Game + Live Game. Desktop/web unchanged. ========================================================= */ @media (max-width:1050px){ .stock{ grid-template-columns:minmax(0,1fr) 88px 112px !important; grid-template-areas: "info price trade" "info zone trade" !important; column-gap:7px !important; row-gap:3px !important; min-height:112px !important; padding:9px !important; align-items:center !important; } .stock-info{grid-area:info !important;min-width:0 !important} .stock-chart-block{display:none !important} .stock-price-block{grid-area:price !important;min-width:0 !important;align-self:end !important;text-align:left !important} .stock-zone-block{grid-area:zone !important;min-width:0 !important;align-self:start !important;justify-self:start !important;margin-top:2px !important} .stock-price-block .price{font-size:23px !important;line-height:.95 !important;font-weight:950 !important;margin:0 0 6px !important} .stock-price-block .goodtxt,.stock-price-block .badtxt{display:block !important;font-size:16px !important;line-height:1 !important;font-weight:950 !important} .stock-zone-block .range-status-row{display:flex !important;align-items:center !important;justify-content:flex-start !important;margin:0 !important} .stock-zone-block .rating{max-width:86px !important;white-space:nowrap !important;font-size:9px !important;line-height:1 !important;padding:5px 7px !important;border-radius:999px !important} .stock-info .name{font-size:13px !important;line-height:1.08 !important;font-weight:950 !important} .stock-info .emoji{width:34px !important;height:34px !important;min-width:34px !important;font-size:20px !important} .stock-info .range-gauge{display:block !important;width:88% !important;max-width:176px !important;margin:6px 0 0 !important} .stock-info .range-gauge-track{height:7px !important;margin:6px 4px 11px 0 !important} .stock-info .range-gauge-marker{width:13px !important;height:13px !important} .stock-info .range-gauge-labels{font-size:9px !important;line-height:1 !important;font-weight:750 !important} .stock-info .mini{font-size:9px !important;line-height:1.2 !important} .stock .trade{grid-area:trade !important;width:112px !important;min-width:112px !important;max-width:112px !important} .stock .trade .maxbtn,.stock .trade .good.small,.stock .trade [data-buy]{height:40px !important;min-height:40px !important} .stock .qty-control .qty{height:38px !important;min-height:38px !important;font-size:14px !important} } @media (max-width:600px){ .stock{grid-template-columns:minmax(0,1fr) 82px 108px !important;min-height:108px !important;column-gap:6px !important} .stock .trade{width:108px !important;min-width:108px !important;max-width:108px !important} .stock-price-block .price{font-size:22px !important} .stock-price-block .goodtxt,.stock-price-block .badtxt{font-size:15px !important} .stock-info .name{font-size:12px !important} .stock-info .range-gauge{width:86% !important} .stock-info .range-gauge-labels{font-size:8.5px !important} } @media (max-width:390px){ .stock{grid-template-columns:minmax(0,1fr) 76px 104px !important;column-gap:5px !important} .stock .trade{width:104px !important;min-width:104px !important;max-width:104px !important} .stock-price-block .price{font-size:20px !important} .stock-price-block .goodtxt,.stock-price-block .badtxt{font-size:14px !important} .stock-zone-block .rating{font-size:8px !important;padding:4px 6px !important} .stock-info .name{font-size:11.5px !important} .stock-info .range-gauge{width:84% !important} .stock-info .range-gauge-labels{font-size:8px !important} } /* ========================================================= V5.29 — SLIGHTLY WIDER MOBILE BUY CONTROLS Keep everything else exactly as V5.28. Desktop/web unchanged. Shared by Normal Game + Live Game. ========================================================= */ @media (max-width:1050px){ .stock{grid-template-columns:minmax(0,1fr) 88px 118px !important} .stock .trade{width:118px !important;min-width:118px !important;max-width:118px !important} } @media (max-width:600px){ .stock{grid-template-columns:minmax(0,1fr) 82px 114px !important} .stock .trade{width:114px !important;min-width:114px !important;max-width:114px !important} } @media (max-width:390px){ .stock{grid-template-columns:minmax(0,1fr) 76px 110px !important} .stock .trade{width:110px !important;min-width:110px !important;max-width:110px !important} } /* ========================================================= V5.30 — LIVE PORTFOLIO VISUAL PARITY + HEADER COLOUR MATCH Mobile Live portfolio now follows the Normal Game card pattern. ========================================================= */ @media (max-width:1050px){ body.live-player .portfolio-panel .title h2{font-size:21px !important} body.live-player .sq-portfolio-summary{display:block !important;background:linear-gradient(135deg,#fff8d8,#eef8ff) !important;border:2px solid #ffdf85 !important;border-radius:16px !important;padding:10px !important;margin-bottom:8px !important} body.live-player .sq-portfolio-summary > div{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;margin:0 !important} body.live-player .sq-portfolio-summary > div + div{margin-top:4px !important} body.live-player .sq-portfolio-summary span{color:var(--ink) !important;font-size:13px !important;font-weight:800 !important} body.live-player .sq-portfolio-summary b{font-size:14px !important} body.live-player .sq-holding-head{display:none !important} body.live-player .holding.sq-holding-row{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;grid-template-areas:"name sell" "shares sell" "value sell" "change sell" !important;gap:3px 8px !important;align-items:center !important;background:#f8faff !important;border:2px solid var(--line) !important;border-radius:16px !important;padding:11px !important;margin-bottom:7px !important} body.live-player .sq-holding-row .sq-holding-name{grid-area:name !important;min-width:0 !important} body.live-player .sq-holding-row > div:nth-child(2){grid-area:shares !important;font-size:12px !important;color:var(--muted) !important} body.live-player .sq-holding-row > div:nth-child(2)::before{content:"Shares " !important;font-weight:800 !important} body.live-player .sq-holding-row > div:nth-child(3){grid-area:value !important;font-size:12px !important;color:var(--muted) !important} body.live-player .sq-holding-row > div:nth-child(3)::before{content:"Value " !important;font-weight:800 !important} body.live-player .sq-holding-row > div:nth-child(4){grid-area:change !important;font-size:12px !important;line-height:1.15 !important} body.live-player .sq-holding-row > button[data-port]{grid-area:sell !important;width:auto !important;min-width:82px !important;min-height:42px !important;align-self:center !important} } /* ========================================================= V5.31 — DESKTOP HEADER GRADIENT PARITY Remove the separate solid/gradient header slab completely so the StockQuest banner sits directly on the same page gradient beneath it. Applies identically to Normal + Live. Mobile remains unchanged. ========================================================= */ @media (min-width:1051px){ body, body.live-player{ background: radial-gradient(circle at 12% 0%,rgba(31,99,177,.42),transparent 30%), linear-gradient(180deg,#0d3973 0%,#092a5c 38%,#071b3e 100%) !important; } .app, body.live-player .app{ background:transparent !important; background-image:none !important; } .app > header, body.live-player .app > header{ background:transparent !important; background-color:transparent !important; background-image:none !important; box-shadow:none !important; } /* Give the desktop trade controls a little more breathing room from the right edge without changing their size or layout. Shared by Normal + Live. */ .stock .trade, body.live-player .stock .trade{ transform:translateX(-8px) !important; } /* Keep the desktop Next Round label perfectly centred within the button. */ #nextRoundBtn{ display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; } } /* ========================================================= V5.37 — KEEP DESKTOP HEADER AVAILABLE ON FINAL SCORE SCREEN The end-game result modal is full-screen, which previously hid the StockQuest logo and New Game control. Only while the final score modal is open, keep the desktop header pinned above the modal and start the modal below it. Mobile/tablet behaviour is unchanged. ========================================================= */ @media (min-width:1051px){ body:has(#scoreSubmitStatus) .app > header{ position:fixed !important; top:0 !important; left:50% !important; transform:translateX(-50%) !important; width:min(1480px,calc(100% - 32px)) !important; min-height:74px !important; z-index:90 !important; padding:12px 0 !important; margin:0 !important; background:#0d3973 !important; background-image:none !important; } .modal.show:has(#scoreSubmitStatus){ top:74px !important; } }