/* ============================================================================ MOBILE PROTOTYPE — portrait phone layout (v2.5x) ---------------------------------------------------------------------------- First-pass layout for testing on a phone. Reflows the EXISTING desktop panels (no new render code) into three zones: FROZEN TOP play area (#dice-panel) + a one-line battle log SCROLLABLE players -> board & decks -> identity -> full battle log FROZEN BOTTOM your inventory (#hand-panel) Everything here is scoped to `html.mobile` (set by mobile.js on a phone) AND a portrait, coarse-pointer media query, so it can never touch the desktop UI. ========================================================================== */ @media (max-width: 820px) and (pointer: coarse) { html.mobile, html.mobile body { height: 100%; margin: 0; overflow: hidden; } /* Disable the browser's double-tap-to-zoom gesture (iOS Safari ignores user-scalable=no, but honours touch-action for the double-tap zoom). This stops an accidental double-tap on a card/button from zooming the whole page. Pinch-to-zoom is unaffected. */ html.mobile, html.mobile body, html.mobile button, html.mobile a, html.mobile .hand-card, html.mobile .card, html.mobile .mobile-card-link, html.mobile img { touch-action: manipulation; } /* The menu/room screens stay as normal flow; only the in-game screen is restructured. When the game screen is active we take over the viewport with a fixed-height flex column. On the MENU we must NOT lock the height, or a menu taller than the screen (e.g. with the High scores button) gets cut off with no way to scroll to the bottom. So the fixed height applies only in-game. */ html.mobile.in-game #app { height: 100dvh; display: flex; flex-direction: column; } /* Menu: allow the page to grow and scroll so every button is reachable. The base stylesheet pins html/body to height:100% + overflow:hidden (needed in-game); off the game screen we release that so the document scrolls. v5.0.75: added overscroll-behavior: contain, matching the same fix already applied to the in-game scroll pane (.play-area-scroll, below) for the same reason - a fast flick was reported to produce a choppy "recoil" once the scroll reached its end. Without this, iOS Safari's rubber-band overscroll at the top/bottom edge can chain into the fixed elements sitting behind (the background art, the header), which is the documented cause of exactly this kind of stutter/snap-back on a fast scroll. contain stops the bounce from propagating past this scroller. NOTE: this couldn't be reproduced in this environment's headless touch emulation (it has no real momentum/rubber-band physics at all - see the scroll trajectory sampled in testing, a flat jump with no bounce), so this fix targets the best-documented, already-precedented cause rather than a live repro here; please confirm on a real phone. */ html.mobile:not(.in-game) { height: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Both axes must be visible: `overflow-y: visible` with `overflow-x: hidden` (inherited from the in-game rule above) computes to `auto` per the CSS spec, which turns into a phantom scroll box and breaks position:sticky heads (e.g. the compendium / rarity "Back to Main Menu" bar). Full `visible` releases the scroll to the page so those sticky heads pin to the viewport top. */ html.mobile:not(.in-game) body { height: auto; min-height: 100%; overflow: visible; } html.mobile:not(.in-game) #app { height: auto; min-height: 100dvh; display: block; padding-bottom: max(env(safe-area-inset-bottom, 0px), 24px); } html.mobile:not(.in-game) #lobby-screen, html.mobile:not(.in-game) #room-screen { justify-content: flex-start; /* don't vertically-center a too-tall menu (that hides the ends) */ overflow-y: visible; /* the page scrolls, not just this box */ } /* ---- Compact main menu: tighten vertical spacing so the whole menu (both cards + How to play + High scores + any "room not found" error) fits on a phone without scrolling. Uses clamp()/dvh-aware sizing so it also fits short desktop windows. ---- */ /* Direct request: the intro eyes art (#menu-intro) sat flush against this 4px padding-top with no notch/Dynamic-Island clearance, so on a real phone with one, the safe-area cutout physically obscured a horizontal slice across the top of the artwork - a hard "cutoff" line, not a CSS clipping bug (the viewport meta already has viewport-fit=cover, so content can render fully UNDER that cutout unless it's explicitly given room). max() keeps the existing tight 4px on any device that reports no inset (env() resolves to 0 there, so max(4px, 0px) is still just 4px - no change on a non-notched phone), and only grows past that on a device that actually has one. */ html.mobile:not(.in-game) #app { padding-top: max(4px, env(safe-area-inset-top, 0px)); } html.mobile:not(.in-game) header { padding: 4px 12px !important; } html.mobile:not(.in-game) .menu-art { max-height: 10dvh; width: auto; margin: 0 auto; } html.mobile:not(.in-game) .tagline { font-size: 0.8rem; margin: 3px 10px 0; line-height: 1.2; } html.mobile:not(.in-game) #lobby-screen { gap: 6px; padding: 6px 12px; } html.mobile:not(.in-game) #lobby-screen .card { padding: 8px 12px; margin: 0; } html.mobile:not(.in-game) #lobby-screen .card h2 { margin: 0 0 4px; font-size: 1rem; } html.mobile:not(.in-game) #lobby-screen input { padding: 8px 10px; margin: 3px 0; } html.mobile:not(.in-game) #lobby-screen .card button { padding: 8px 12px; } html.mobile:not(.in-game) #lobby-screen .tutorial-open-btn { padding: 8px 12px; margin-top: 5px; } html.mobile:not(.in-game) #lobby-error { margin: 3px 0; } /* "Submit an Issue" button/overlay: same padding bump as the other 4 menu buttons above, plus a narrower/shorter overlay card so it comfortably fits a phone viewport without needing to scroll for most screen sizes. */ html.mobile:not(.in-game) .menu-secondary-row { margin-top: 10px; } /* Direct request: stack all 6 main-menu buttons vertically on mobile instead of the desktop flex-wrap rows, which pack them 2-per-row on a phone-width screen (cramped, uneven tap targets). Column + full-width items turns both rows into one consistent single-file list; the two rows stay as separate elements (unchanged markup/margin-top spacing between them) so this is layout-only. Direct follow-up request: line these buttons up width-wise with the Create a Game / Join a Game cards above (#lobby-screen .card), which are capped at var(--lobby-card-w) (clamp(240px, 15vw, 400px) - effectively a flat 240px at any phone width, since 15vw stays well under that floor). The first pass stretched each button to the FULL row width instead (align-items: stretch, no cap), which is #lobby-screen's whole content width minus its own padding - visibly wider than the capped cards sitting right above them. align-items: center (instead of stretch) + the SAME max-width cap on each button reproduces exactly how the cards themselves end up centered at that width (#lobby-screen's own align-items: center chain), so both button rows now line up edge-to-edge with the cards. Direct follow-up-follow-up request (previewed both options live first, user picked this one): group the 4 "explore" buttons and the 2 "other" buttons into their own bordered/background blocks, same treatment as the Create/Join .card panels above them, each with its own h2.menu-group-title ("Explore the Dungeon" / "Other" - see index.html). The row itself is now the "card": width 100%, capped at var(--lobby-card-w) (reusing the exact same variable the real .card elements use, not a re-derived value, per this project's own convention), with the SAME mobile padding (8px 12px) and background/border/radius #lobby-screen .card gets. Buttons inside now fill 100% of that inner content box - no max-width of their own needed, since the OUTER row is what's capped at var(--lobby-card-w) - which makes every button's rendered width identical to Create Room/ Join Room's, "including create room and join room" per the request, without hardcoding a second width value anywhere. */ html.mobile:not(.in-game) .menu-actions-row, html.mobile:not(.in-game) .menu-secondary-row { flex-direction: column; align-items: center; width: 100%; max-width: var(--lobby-card-w); margin-left: auto; margin-right: auto; background: var(--panel); border: 1px solid #33303e; border-radius: 10px; padding: 8px 12px; gap: 8px; } html.mobile:not(.in-game) .menu-group-title { display: block; width: 100%; text-align: center; margin: 0 0 4px; font-size: 1rem; } html.mobile:not(.in-game) .menu-actions-row button, html.mobile:not(.in-game) .menu-secondary-row button { width: 100%; max-width: none; flex: 0 0 auto; } html.mobile:not(.in-game) .report-issue-btn { padding: 8px 12px; } html.mobile .issue-report-card { max-width: 92vw; padding: 14px 16px; } /* The "pick your own emoji" is still fully tappable - tapping it opens the native option list with every player's full name. */ html.mobile #game-screen .hand-card.has-dice .weapon-target-select { width: 100%; max-width: 100%; margin: 0; font-size: 0.6rem; padding: 8px 3px; min-height: 32px; /* taller, easier-to-tap dropdown */ box-sizing: border-box; text-align: center; text-align-last: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; /* belt-and-suspenders: no custom arrow graphic either */ } /* Some engines still reserve arrow space via a pseudo — collapse it on mobile. */ html.mobile #game-screen .hand-card.has-dice .weapon-target-select::-ms-expand { display: none; } /* Mobile hides the weapon art behind the controls, so there's nothing for the "lift off the art" drop shadow to sit on - remove it from the dice pip, the multiplier, both buttons, and the dropdown. */ html.mobile #game-screen .hand-card.has-dice .weapon-dice-badge, html.mobile #game-screen .hand-card.has-dice .weapon-add-die, html.mobile #game-screen .hand-card.has-dice .weapon-clear-dice, html.mobile #game-screen .hand-card.has-dice .weapon-target-select { box-shadow: none; } html.mobile #game-screen .hand-card.has-dice .weapon-dice-mult { text-shadow: none; } html.mobile #game-screen .hand-card.has-dice .weapon-add-die, html.mobile #game-screen .hand-card.has-dice .weapon-clear-dice { width: 100%; box-sizing: border-box; margin: 0; min-height: 34px; /* a comfortable, deliberate tap target */ padding: 9px 3px; white-space: nowrap; line-height: 1; } html.mobile #game-screen .hand-card.has-dice .weapon-add-die { font-size: 0.68rem; } html.mobile #game-screen .hand-card.has-dice .weapon-clear-dice { font-size: 0.56rem; } /* Drop the die glyph inside "Add die" on the narrow tile — the label alone fits. */ html.mobile #game-screen .hand-card.has-dice .weapon-add-die .wadb-die { display: none; } html.mobile #game-screen .hand-card.has-dice .weapon-dice-badge { width: 30px; height: 30px; font-size: 0.95rem; } /* The weapon title WRAPS across as many centred lines as it needs to show the WHOLE name (the base .hand-card-title white-space:nowrap + ellipsis is undone). overflow-wrap:anywhere breaks a word only if it can't fit on a line on its own. */ html.mobile #game-screen .hand-card.has-dice .hand-card-title { display: block; font-size: 0.52rem !important; line-height: 1.1; text-align: center; color: var(--accent2); margin-top: 2px; max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; word-break: break-word; } /* The Attack-screen dice POOL (one token per die you own) is smaller on mobile than on desktop, so the whole attack menu (prompt + pool + Use Power + Attack + Clear / Cancel) fits the capped play-area height without the player having to scroll. */ html.mobile #game-screen .attack-dice-pool .pool-die { width: 52px; height: 52px; } html.mobile #game-screen .attack-dice-pool { gap: 5px; margin: 6px 0 8px; } /* Overlay prompts (reaction windows, card claims, "You obtained a card!") are rendered as the LAST child of the play area, so they get pushed below the stage/dice content into whatever room is left at the bottom — cramped, and the card gets squished. On mobile, when a prompt is present, float #overlay-panels as a centered overlay filling the play area, with its own backdrop, so the prompt is prominent and never squished. :has() is fine here (this is a modern enhancement; without it the prompt still shows, just inline as before). */ html.mobile #overlay-panels { position: relative; z-index: 60; } /* Obtained-card prompt: on mobile show only the card's name (no art / no preview /* The obtained-card prompt shows the real card art (small, phone-fit) with the card's name below it; tap the art for a full-size preview. */ html.mobile .obtain-card { padding: 8px 14px; } html.mobile .obtain-card strong { font-size: 1.05rem; color: var(--accent2); text-align: center; } /* A card name that doubles as a tap-to-preview control (used inside prompts where the render already emits a name next to the art). Style it so it reads as tappable, with the same magnifier affordance as the chips. */ /* Inline card names inside prompts (arrange inventory, obtained card, event/ card-use banners) are PLAIN TEXT that doubles as a tap-to-preview target. They get only a subtle dotted underline + small magnifier — never a button's background/border/padding. Because this is its own class (not .mobile-card-link), there's no chip styling to fight, so titles always look like titles. */ html.mobile .mobile-card-preview { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } html.mobile .mobile-card-preview::after { content: " 🔍"; font-size: 0.8em; opacity: 0.7; } /* The shared countdown bars (#play-countdowns) sit between the title and the YOUR TURN badge. On a phone the row is tight, so cap the bar width and shrink the label so all three (title · bar · YOUR TURN) fit on one line. */ html.mobile #play-countdowns { max-width: 45%; } html.mobile #play-countdowns .play-countdown { max-width: 160px; } html.mobile #play-countdowns .play-countdown-text { font-size: 0.62rem; } html.mobile #game-screen .play-area .play-area-head { gap: 6px; } html.mobile #game-screen .play-area .play-area-head h3 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.mobile #game-screen .play-area .play-area-head #turn-badge { flex: 0 0 auto; } /* When a blocking prompt is present, float #overlay-panels as a centered modal over the FULL VIEWPORT — not confined to the frozen play area (which is only ~52dvh tall and was clipping taller prompts like "You obtained a card!"). The prompt sizes to its content and scrolls internally only if it's taller than the screen, so the whole thing (title, explanation, buttons) is always visible. :has() is a progressive enhancement; the JS-set class is primary. */ html.mobile.overlay-prompt-active #overlay-panels, html.mobile #dice-panel.has-overlay-prompt #overlay-panels, html.mobile #dice-panel:has(#overlay-panels > .card:not(.inventory-select-prompt)) #overlay-panels { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: max(env(safe-area-inset-top, 0px), 16px) 14px max(env(safe-area-inset-bottom, 0px), 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; background: rgba(12, 10, 16, 0.82); border-radius: 0; } html.mobile.overlay-prompt-active #overlay-panels > .card, html.mobile #dice-panel.has-overlay-prompt #overlay-panels > .card, html.mobile #dice-panel:has(#overlay-panels > .card:not(.inventory-select-prompt)) #overlay-panels > .card { width: 100%; max-width: 400px; max-height: calc(100dvh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; margin: auto; } /* A reaction (Shield/Mirror/take-the-hit) is still a full blocking modal like any other prompt above — EXCEPT the fixed "Your Inventory" strip stays reachable underneath it, because Heal is playable at any time and its only control is the "Use Heal" button on the inventory card itself (see flagOverlayPrompt in mobile.js). Lift the inventory above the modal's backdrop, and reserve room for it in the modal's own flex box so the reaction card is never covered by (or covering) it. */ html.mobile.reaction-prompt-active #overlay-panels { /* Reserve exactly #hand-panel's real current height (+16px), set live as --reaction-inv-reserve by flagOverlayPrompt() in mobile.js - see its own comment. Falls back to the old worst-case (#hand-panel's own max-height) only if that JS hasn't run yet for some reason. */ padding-bottom: var(--reaction-inv-reserve, calc(48dvh + 16px)); } html.mobile.reaction-prompt-active #hand-panel { z-index: 210; /* above the reaction backdrop's z-index: 200 */ } /* Inventory-selection prompts ("Discard 1 card — tap a glowing card below") must NOT be a full-screen modal: the player needs to tap the glowing cards in their inventory, which sits below. Render it as a compact, non-blocking banner at the top of the play area with no backdrop, so taps pass through to the inventory. */ html.mobile #dice-panel.has-inventory-select-prompt #overlay-panels { position: static; inset: auto; z-index: auto; display: block; padding: 0; background: none; overflow: visible; } html.mobile #dice-panel.has-inventory-select-prompt #overlay-panels > .card.inventory-select-prompt { width: auto; max-width: 100%; margin: 0 auto 6px; padding: 8px 12px; text-align: center; background: rgba(30, 26, 38, 0.96); border: 1px solid var(--accent2); border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); } html.mobile #dice-panel.has-inventory-select-prompt #overlay-panels > .card.inventory-select-prompt .prompt-command { font-size: 1.05rem; margin: 0 0 2px; } html.mobile #dice-panel.has-inventory-select-prompt #overlay-panels > .card.inventory-select-prompt .prompt-hint { font-size: 0.85rem; margin: 0; } /* The obtained-card prompt's card sits at a comfortable, un-squished size. */ html.mobile #card-orientation-panel .hand-card { display: flex; flex-direction: column; align-items: center; gap: 6px; } html.mobile #card-orientation-panel .hand-card .card-art, html.mobile #card-orientation-panel .hand-card .card-art-back { display: block; max-height: 22dvh; width: auto; max-width: 100%; margin: 0 auto 4px; cursor: pointer; } /* Hide desktop-only chrome that doesn't fit the phone. */ html.mobile #game-screen .log-panel h3 { font-size: 0.8rem; } /* #5: battle log starts collapsed on mobile (a few lines); tapping the heading expands it. The heading text is reworded by mobile.js. */ html.mobile #mobile-scroll > .log-panel .log-panel h3, html.mobile #mobile-scroll > .log-panel h3 { cursor: pointer; color: var(--accent2); text-decoration: underline; text-underline-offset: 2px; } html.mobile #mobile-scroll > .log-panel.mobile-log-collapsed #log-list { max-height: 4.6em; /* ~3 lines */ overflow: hidden; } /* Expanded: open to a FIXED depth and DON'T scroll. The log renders newest-first, so the top (newest) stays pinned in view and older entries simply flow off the bottom edge (clipped by overflow:hidden) rather than the panel scrolling. Depth is 92vh — twice the previous 46vh — so an expand shows about double the log. It lives in the page's scroll flow, so the page (not the log) scrolls if the panel is taller than the screen. */ html.mobile #mobile-scroll > .log-panel:not(.mobile-log-collapsed) #log-list { max-height: 92vh; overflow: hidden; } /* ===== Mobile tutorial (light pass): the chapter nav is a horizontal scroller (desktop v5.0.68 uses a wrapping row instead - mobile keeps its own no-wrap scrolling version since it lives above a much narrower page), and enlarge tap targets. ===== */ html.mobile #tutorial-screen .tutorial-main { flex-direction: column !important; gap: 0; } html.mobile #tutorial-screen .tutorial-nav { flex: 0 0 auto !important; width: 100% !important; display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; border-right: none; border-bottom: 1px solid #2f2b3a; padding: 8px; } html.mobile #tutorial-screen .tut-nav-item { flex: 0 0 auto; width: auto; margin-bottom: 0; padding: 10px 14px; /* bigger tap target */ font-size: 0.9rem; white-space: nowrap; } /* The desktop small-screen rule hides the chapter title to shrink the sidebar; on mobile we WANT the titles back since the nav is now a full-width row. */ html.mobile #tutorial-screen .tut-nav-title { display: inline !important; } /* #1: make the tutorial pages scrollable on a phone. The desktop height chain relies on :has() to hide the header (unsupported on older iOS) and on flex heights that don't resolve in the restructured mobile layout. Pin the screen to the viewport and give the body a bounded, scrollable height. */ html.mobile #tutorial-screen:not(.hidden) { position: fixed; inset: 0; z-index: 100; /* cover the header/menu without needing :has() */ height: 100dvh !important; max-height: 100dvh; overflow: hidden; padding-top: env(safe-area-inset-top, 0px); background: var(--bg); } html.mobile #tutorial-screen .tutorial-main { flex: 1 1 auto; min-height: 0; } /* Lay the page area out as a positioning context so the two nav arrows can pin to the bottom corners (prev on the left, next on the right, across from each other) with the lesson text scrolling above them. The old `display:block` here left the arrows in normal flow, which pushed the "next" arrow off the bottom of the screen so it looked like it didn't exist. */ html.mobile #tutorial-screen .tutorial-page-area { flex: 1 1 auto; min-height: 0; position: relative; display: block; } html.mobile #tutorial-screen .tutorial-body { height: 100%; max-height: 100%; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; /* leave room at the bottom for the fixed arrow row so text never hides behind it */ padding: 16px 16px calc(64px + env(safe-area-inset-bottom, 0px)); font-size: 1rem; line-height: 1.5; } /* Both arrows: fixed to the bottom, one on each side, always visible. */ html.mobile #tutorial-screen .tut-side-btn { position: absolute; bottom: max(env(safe-area-inset-bottom, 0px), 10px); width: 64px; height: 48px; margin: 0; z-index: 5; font-size: 1.6rem; background: #14121a; border: 1px solid #45414f; } html.mobile #tutorial-screen #tutorial-side-prev { left: 12px; } html.mobile #tutorial-screen #tutorial-side-next { right: 12px; } html.mobile #tutorial-screen .tutorial-topbar { padding: 10px 12px; } /* Direct request: on mobile there was no easy way to exit the Rules overlay without scrolling all the way through it. This is a second, always-visible exit (the footer sits in normal flex flow below .tutorial-main, never inside the scrolling .tutorial-body - see #tutorial-screen's flex-column layout in style.css - so it's on screen the whole time, unlike the chapter content above it). Make it a real full-width tap target. */ html.mobile #tutorial-screen .tutorial-footer { flex-direction: column; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); } /* Direct follow-up request: the PC-only "Esc to leave, <- -> to navigate" hint (.tutorial-hint) makes no sense on mobile - there's no keyboard to press Esc or the arrow keys on. It had been showing anyway (no prior mobile override existed for it) in both the main-menu "How To Play" and the in-game "Rules" overlay, since both share this same #tutorial-screen markup. Removed entirely on mobile, not replaced - the bottom exit button right below already covers the "how do I leave" need. */ html.mobile #tutorial-screen .tutorial-hint { display: none; } html.mobile #tutorial-exit-bottom { display: block; width: 100%; padding: 12px; font-size: 0.95rem; } /* v5.0.68: the exit button is now .leave-room-btn (shared with the Compendium/Rarity Guide back buttons), which needs no mobile-specific override - it already renders fine at its default size there. */ /* v5.0.70: Stats for Nerds (#rarity-screen) is the exception - its head bar also holds the Rarity Guide / Weapon Analysis tab pair (#rarity-main-tabs), and the two together (full-size tabs + a full-size "← Back to Main Menu" button) run wider than a phone's content area, so the button wrapped onto its own row below the tabs instead of sitting alongside them. Shrinking the button toward the tabs' own compact pill scale (0.8rem / 6px 12px, see .comp-tab) gets both back onto one row on real phone widths; flex-wrap stays as a safety net (not switched to nowrap) for anything narrower still. */ html.mobile #rarity-screen .compendium-head { gap: 8px; } html.mobile #rarity-screen .compendium-head .leave-room-btn { flex: 0 1 auto; min-width: 0; padding: 6px 10px; font-size: 0.72rem; white-space: nowrap; } html.mobile #rarity-screen #rarity-main-tabs { flex: 0 1 auto; min-width: 0; } /* ===== Text-fit safety: keep labels inside their boxes on a phone. Buttons wrap rather than clip; long single words shrink to fit; the turn-grid keeps its buttons readable. `:not(.spectating-close)` - this rule's own #game-screen ID selector otherwise beats the small circular close button's plain-class `.spectating-close` rule on `height` (id specificity wins regardless of that rule's own explicit height:22px), and this rule's `height:auto` + `min-height: 40px` stretched a 22px-WIDE button to 40px TALL - a visible oval, confirmed live on a real iPhone. This treatment is for multi-word text buttons (Use Shield, Take the hit, turn-grid actions); a tiny icon-only circular control was never meant to be pulled in by the plain element selector. */ html.mobile #game-screen button:not(.spectating-close), html.mobile #tutorial-screen button { white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.2; min-height: 40px; /* comfortable tap target */ height: auto; } /* The collapsed Spectating bar's Leave Room button asks for a SHORT, compact look (see its own .spectating-pane.collapsed .btn-grey rule in style.css), but that rule is a plain class selector and loses the min-height:40px above to specificity (that rule's #game-screen ID beats any class-only rule) - confirmed live: the button kept rendering 40px tall regardless of its own reduced padding. #hand-panel is #hand-row's real parent, giving this override an ID of its own to actually win. */ html.mobile #hand-panel .spectating-pane.collapsed .btn-grey { min-height: 0; height: auto; } html.mobile #game-screen .turn-grid { display: flex; flex-wrap: wrap; gap: 6px; } html.mobile #game-screen .turn-grid button { flex: 1 1 auto; min-width: 30%; font-size: 0.85rem; padding: 8px 6px; } html.mobile #game-screen .end-turn-btn { width: 100%; } /* Player names / stat lines shouldn't run off the row. */ html.mobile #game-screen .player-row { overflow: hidden; } html.mobile #game-screen .player-row .player-name, html.mobile #game-screen .player-name { overflow-wrap: anywhere; } /* PC puts a revealed Maker's Maker-Only cards and the inventory thumbnails on one row (perm left / thumbs right). A phone row is far too narrow for both, so keep them stacked here: Maker-Only cards on their own full-width wrapping row above the thumbnails. */ /* One row, mirrored from the PC layout: the player's normal inventory sits on the LEFT and a revealed Maker's Maker-Only cards sit to the RIGHT of it, on the same line and at the same size. The markup puts the Maker-Only cards first (PC wants them left), so flip the two with `order` rather than moving them in the DOM. Both sides wrap, so all three Maker-Only cards still fit. */ html.mobile .player-row-bottom { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 6px; flex-wrap: wrap; } /* Player-row cards (v5.0.11.x): the inventory THUMBNAILS and the Maker-Only permanent cards keep their original sides — in the Right-handed (default) layout the thumbnails hug the RIGHT (under the left-aligned name) and a revealed Maker's Maker-Only cards sit to their LEFT. (Only the floating "Your Inventory" strip flips between the two settings; see the hand-row rule above.) */ html.mobile .player-row-bottom .player-card-thumbs { order: 2; width: auto; flex: 1 1 auto; justify-content: flex-end; /* a player's inventory thumbnails align to the RIGHT */ flex-wrap: wrap; } /* Player NAME + HP text align OPPOSITE the handedness (cards stay on the handedness side): for the right-handed layout the cards are on the right, so the name/HP sit on the LEFT. The turn arrow follows the name to the opposite side (see style.css) so it still points across at the player. */ html.mobile .player-row-name { text-align: left; } html.mobile .player-row-meta { justify-content: flex-start; } html.mobile .player-row-bottom .player-perm-cards { order: 1; width: auto; flex: 0 0 auto; justify-content: flex-start; /* Maker-Only permanent cards align to the LEFT (opposite the thumbnails) */ flex-wrap: wrap; } /* LEFT-HANDED orientation (html.left-handed, chosen in the lobby): the MIRROR of the default right-handed pane above — name/HP flip to the RIGHT, inventory thumbnails to the LEFT, a revealed Maker's Maker-Only cards to the RIGHT, and the floating "Your Inventory" strip to the RIGHT. The turn arrow flips too (in style.css). Higher specificity (.mobile.left-handed) lets these win over the right-handed defaults without touching them. */ html.mobile.left-handed .player-row-name { text-align: right; } html.mobile.left-handed .player-row-meta { justify-content: flex-end; } /* v5.1 (direct request): within that right-flush HP/badges group, the HP text itself should be the one flush against the right edge, with the status chips (poisoned/ knocked out/etc.) sitting to its LEFT - i.e. the badges and the HP text swap places, not just the whole group moving as a unit (which the justify-content: flex-end above already did). The markup always puts the HP span before the badges span, so pulling the badges to the FRONT of source order (order: -1, everything else defaults to order: 0 and keeps its place) puts them left of the HP text once flex-end packs the pair against the right edge. Scoped to this handedness only - right-handed keeps HP first/badges-after, unchanged. */ html.mobile.left-handed .player-row-meta .status-badges { order: -1; margin-left: 0; margin-right: 8px; } html.mobile.left-handed .player-row-bottom .player-card-thumbs { order: 1; justify-content: flex-start; } /* thumbnails LEFT */ html.mobile.left-handed .player-row-bottom .player-perm-cards { order: 2; justify-content: flex-end; } /* Maker-Only RIGHT */ /* Only the floating "Your Inventory" strip flips: left-handed puts it on the RIGHT — handled at the PANEL level (html.mobile.left-handed #hand-panel above), not here; the per-card margin-left:auto trick this used to do is gone now that the whole panel shrinks to its content's width and pins to an edge directly (an auto margin on one card inside an already-shrunk row had no extra space to push into anyway). */ /* A revealed player's identity card ("YOU ARE THE MAKER" / Hero card) mirrors too: right-handed puts it on the LEFT (source order), so left-handed flips it to the RIGHT — beside the right-aligned name/HP — with the row-main taking the left. This also clears the ▸ turn arrow, which sits at the LEFT in left-handed, so the card and arrow can no longer overlap. */ html.mobile.left-handed .player-row-top { flex-direction: row; } html.mobile.left-handed .player-row-top .player-row-main { order: 1; } html.mobile.left-handed .player-row-top .player-identity-card { order: 2; } /* The mobile card-title chips in the play area wrap instead of clipping. */ /* The play-area card-title chips already handle their own single-line ellipsis (see the .mobile-card-link rule above) — don't force wrapping here. */ /* Awards / match-stats screen: fit the phone width (no left-right scroll). One award per row; the "This game" figures go to 3 columns so their labels aren't forced wider than the cell (which used to push the whole card past the screen edge). Everything is width-capped so only VERTICAL scrolling is ever needed. */ html.mobile .victory-card.stats-card { width: 94vw; max-width: 94vw; box-sizing: border-box; overflow-x: hidden; } html.mobile .stats-grid { grid-template-columns: 1fr; gap: 8px; } html.mobile .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); /* Row gap leaves headroom for the rarity banner that pokes above each cell (top:-9px); the top margin does the same for the first row. */ gap: 20px 6px; margin-top: 14px; } /* overflow must stay VISIBLE or the rarity banner (top:-9px) is clipped off the top of the cell on mobile. Long values still wrap via overflow-wrap, so nothing spills. */ html.mobile .summary-cell { padding: 8px 4px; min-width: 0; overflow: visible; } html.mobile .summary-value { font-size: 1.05rem; overflow-wrap: anywhere; } html.mobile .summary-label { overflow-wrap: anywhere; } html.mobile .stats-groups, html.mobile .stat-group, html.mobile .stat-award, html.mobile .game-summary, html.mobile .summary-grid { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; } } /* Portrait lock: if the phone is rotated to landscape, ask them to rotate back (we intentionally do NOT support landscape in this prototype). */ @media (max-width: 960px) and (orientation: landscape) and (pointer: coarse) { html.mobile #rotate-portrait { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 24px; background: var(--bg); color: var(--text); } html.mobile #rotate-portrait .rp-icon { width: 54px; height: 90px; border: 4px solid var(--accent2); border-radius: 12px; transform: rotate(90deg); } } #rotate-portrait { display: none; }