/* V32 shared floors (Fable's phone findings across M1, M3 and M4; acceptance UI-05 and UI-06). Loaded last, so it settles what the older sheets leave below the floors: - colour (every layout): text at 4.5:1 or more against what is painted behind it; - size and targets (phones in landscape, the game's max-height 520px layouts): information text 11px or more, prices and primary actions 14px, close and primary targets 44 x 44px, other controls 32px with 8px round them. Desktop keeps its sizes and layout (Version 1: PC layout unchanged); only colours change there. The room rules use #room-screen.room-screen so they weigh as much as the older Casual (:not(.ranked-party)) and Ranked (.ranked-party) phone rules they replace; this sheet comes last, so it wins those ties. */ /* ---------- colour, every layout ---------- */ /* the shared blue button in dialogs ("Join", "Join room"): white on a darker blue, 5.2:1 at its lightest (was 3.1:1) */ .arcade-dialog .secondary-button{background:linear-gradient(#2f6cc0,#2459a3);border-color:#1d4f91;box-shadow:0 3px 0 #173f75;color:#fff} .arcade-dialog .eyebrow{color:#3d6f96} /* Story: the level panel's kicker (4.45:1 -> 5.7:1); the boss stand-ins' initials on a dark chip, readable on any boss colour until the boss art replaces them */ .story-room-head small{color:#8a5220} .story-boss-portrait b{color:#fff;background:#0b2540d9;border-radius:6px;padding:.12em .28em;text-shadow:none} /* the shared room frame (Casual, Ranked and Story) */ #room-screen .room-kicker{display:inline-block;width:max-content;max-width:100%;background:#0f3f78;color:#fff;border-radius:8px;padding:2px 8px} #room-screen .panel-heading{background:linear-gradient(#2c73c2,#2463b0);border-bottom-color:#1d559f} #room-screen .panel-heading span{background:#123f6e;color:#fff;border-radius:8px;padding:2px 8px} #room-screen .room-team-status>b{color:#1d4f80} #room-screen .room-team-status .team-seat.blue{color:#174a78} #room-screen .room-slot.empty>small,#room-screen .room-slot.empty>strong,#room-screen .room-slot.party-member>small{color:#2f5a80} /* an open seat's "+" is decoration (the OPEN SEAT badge says it; aria-hidden), drawn at the 3:1 icon floor anyway */ #room-screen .empty-seat{color:#4f78a0} #room-screen .room-slot.team-red>small,#room-screen .room-slot.team-red.empty>strong{color:#7f2a36} #room-screen .room-slot.team-blue>small,#room-screen .room-slot.team-blue.empty>strong{color:#184f80} #room-screen .crew-bottom button{background:#2f6cc0;border-color:#5d9ae0} #room-screen .chat-welcome{color:#3f6788} #room-screen .selected-character small{color:#234f80} #room-screen .selected-character p{color:#22507f} #room-screen #room-character-grid button{color:#2a557d} /* the kit and skins buttons: one label each on wide screens, a short one on phones (below) */ .room-label-short{display:none} #room-kit-toggle[aria-expanded=true]>.room-label-long,#room-kit-toggle[aria-expanded=true]>.room-label-short{transform:none} /* the Splash Pass: green actions dark enough for white text (5.0:1, was 2.7:1); tier numbers, labels and the test note readable; locked and premium tiles stay legible (the global disabled-button fade made their prizes 2:1): the badge and the muted tint say "locked", the words stay readable */ .pass-head .eyebrow{color:#3d6f96} .pass-tier[data-reached="true"] .pass-tier-num{background:#2f6cc0} .pass-tier[data-next="true"] .pass-tier-num{color:#2f6cc0;box-shadow:inset 0 0 0 2px #2f6cc0} .pass-tier-num{color:#456c8c} .pass-rowhead{color:#36607f} .pass-reward:disabled{opacity:1} .pass-reward[data-state="claimed"]{opacity:1;background:#f1f5f9;border-color:#d5e2ee} .pass-reward[data-state="claimed"] .pass-reward-art{opacity:.55} .pass-reward-text small{color:#4a6a83} .pass-reward-badge{color:#36607f} .pass-reward[data-state="ready"]{border-color:#1f7f4a;box-shadow:0 0 0 3px #1f7f4a33} .pass-reward[data-state="ready"] .pass-reward-badge{background:#1f7f4a;color:#fff;font-size:14px;padding:3px 10px} .pass-reward[data-state="claimed"] .pass-reward-badge{color:#246b45} .pass-collect-all{background:#1f7f4a;box-shadow:0 3px 0 #155c35;font-size:14px;min-height:44px} .pass-collect-all:disabled{opacity:1;color:#3f566b} .pass-test-note{color:#456c8c} /* Shop: the Recharge account note at full strength (3.4:1 at 85% opacity) */ .recharge-account-note{opacity:1} /* V32 (UI-06, L7): the Shop's tier labels ("NORMAL BALLOON") at 5.2:1 on their card (were 4.36:1) */ .shop-dialog .shop-tier{color:#2f6e76} /* V32 (UI-06, H2): the Collection. Back on the shared darker blue (white 5.2:1, was 3.05:1); the selected hero chip's ink on its teal (5.7:1, was 3.9:1); the small labels, rarities and notes 5:1 or more on their pale cards, down to the darker foot of each card's gradient (were 3.5 to 4.4:1) */ .profile-top .profile-back{background:linear-gradient(#2f6cc0,#2459a3);border-color:#b4ebff;box-shadow:0 3px 0 #173f75} /* V32 (UI-06): Back keeps a blue on hover (the profile's light hover fill left its white label unreadable) */ .profile-top .profile-back:hover{background:linear-gradient(#3672c4,#2a63ae)} #profile-dialog .skins-heroes button[aria-pressed=true]{color:#164e65} .balloons-heading small,.trails-heading small,.balloon-rarity,.trail-rarity{color:#356a6e} .balloons-equipped span,.trails-equipped small{color:#7a5c1f} .balloon-normal-note,.balloons-footnote,.trail-card p,.trails-loading{color:#38676f} .balloon-hero span{color:#634d6e} .balloon-hero small{color:#525e70} .trails-exclusives summary span{color:#6a5b80} /* the Casual and Ranked entry (room browser), where M4's reputation line lives */ #entry-dialog .browser-heading button{background:#2f6cc0} #entry-dialog .rooms-empty{color:#3f6788!important} #entry-dialog #room-browser-status{color:#3f6788} #entry-dialog .browser-scroll>p{color:#3f6788} #entry-dialog .browser-scroll>p.entry-reputation{font-size:12px;font-weight:800;color:#2a5f8a} #entry-dialog .browser-scroll>p.entry-reputation[data-low="true"],#entry-dialog .browser-scroll>p.entry-reputation[data-cooldown="true"]{color:#b5283a} #entry-dialog .mode-picker legend{color:#3f6788} #entry-dialog .mode-picker span{color:#36607f} #entry-dialog .mode-picker input:checked+span{background:#2f6cc0;border-color:#1d559f;color:#fff} #entry-dialog .entry-map{color:#2f5f88} /* ---------- size and targets, phones in landscape ---------- */ @media(max-height:520px){ /* every dialog's close at 44 x 44 (was 34) */ .dialog-close,.arcade-dialog .dialog-close{width:44px;height:44px} .pass-head{padding-right:52px} /* the 14px Collect fits the short phone tiles: a tighter pill and no gap over the coin */ .pass-reward[data-state="ready"] .pass-reward-badge{line-height:1;padding:2px 8px} .pass-reward-art[data-art="coins"]{margin-top:0} /* the prize on one line where it fits ("100 coins"), so the taller actions leave the tiles room (the Pass's own phone tiles were already 1.6px short at 667 x 375) */ .pass-reward-text{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:4px} /* the result banner of every mode: the button's label at 14px on a 44px target (was 12px) */ #round-banner .primary-button,.round-banner .primary-button{font-size:14px;min-height:44px} .round-banner .eyebrow{font-size:11px} /* the shared room frame: 11px and more (was 6 to 10px) */ #room-screen.room-screen .room-kicker{font-size:11px;line-height:1.3;letter-spacing:1px} #room-screen.room-screen .room-code-badge small{font-size:11px;line-height:1.1;letter-spacing:.5px;max-width:none} #room-screen.room-screen .room-back{font-size:14px}/* every room's Leave at 14px, Casual as Ranked (Fable ui-phone-floors-02 note) */ #room-screen.room-screen:not(.ranked-party) .room-back{min-height:44px} #room-screen.room-screen .panel-heading span{font-size:11px;letter-spacing:.4px} #room-screen.room-screen .room-team-status>b{font-size:11px} #room-screen.room-screen .room-team-status>span{font-size:11px;width:20px;height:20px;line-height:20px} .arcade-room #room-screen.room-screen #room-roster .slot-header .ready-badge{font-size:11px;letter-spacing:0} .arcade-room #room-screen.room-screen #room-roster .room-slot>small,#room-screen.room-screen .room-slot .slot-team{font-size:11px;line-height:14px} .arcade-room #room-screen.room-screen #room-roster .room-slot>strong{font-size:11px} .arcade-room #room-screen.room-screen #room-roster .room-slot.empty>strong{font-size:11px;line-height:12px;min-height:24px;flex-basis:24px;white-space:normal;overflow:visible;text-overflow:clip} .arcade-room #room-screen.room-screen #room-roster .slot-header .seat-move-button{font-size:11px;min-height:32px;padding:4px 8px} #room-screen.room-screen[data-roster-revision] #room-character-grid button .creature-name{font-size:11px;line-height:13px} #room-screen.room-screen #room-character-grid button .creature-name{font-size:11px;line-height:13px} #room-screen.room-screen #room-character-grid .hero-lock-badge{font-size:11px} /* the character strip: its label on one line and the hero's name under it; on phones the strip's small portrait gives way (the selected tile in the hero grid right below shows the same picture) */ #room-screen.room-screen .selected-character small{font-size:11px;line-height:13px;letter-spacing:0;white-space:nowrap} #room-screen.room-screen .selected-character>img{display:none} #room-screen.room-screen .selected-character p{font-size:11px} #room-screen.room-screen .crew-bottom button{font-size:11px} #room-screen.room-screen .room-map-copy small,#room-screen.room-screen .character-panel>.room-current-rank #room-map-terrain{font-size:11px} .arcade-room #room-screen.room-screen .room-start .start-battle{min-height:44px;height:44px} #room-screen.room-screen:not(.ranked-party) .room-code-badge button{width:44px;height:44px;justify-content:center;align-items:center} #room-screen.room-screen #room-chat-form{height:auto;min-height:40px;gap:8px} #room-screen.room-screen #room-chat-form button{min-height:32px;width:36px} #room-screen.room-screen #room-chat-input{min-height:32px} /* the kit and skins buttons share the character's first row, side by side with short labels, 32px tall and 8px apart, the row 40px so the hero grid below keeps 8px too; stacked they were taller than the row and covered Leave room (Ranked) or were cut off (Casual and Story), as in Version 30 */ #room-screen.ranked-party .character-panel{grid-template-rows:42px 60px minmax(48px,1fr) 20px} #room-screen.ranked-party .room-kit-disclosure{margin-top:2px} #room-screen:not(.ranked-party) .character-panel{grid-template-rows:40px auto auto} /* the team line keeps its words whole: with eight seats the seat numbers move under the label (the room scrolls) */ #room-screen.room-screen .room-team-status{flex-wrap:wrap;row-gap:3px} #room-screen.room-screen .room-team-status>b{white-space:nowrap} #room-screen.room-screen .room-kit-disclosure{flex-direction:row;align-items:flex-start;align-self:start;gap:8px;padding:0 6px 0 0;border:0} #room-screen.room-screen #room-kit-toggle,#room-screen.room-screen #room-skins-button{flex:1 1 0;min-width:0;width:auto;height:32px;min-height:32px;margin:0;padding:0 6px;display:flex;align-items:center;justify-content:center;gap:3px;font:800 11px/1 'Nunito Sans',sans-serif;text-align:center;white-space:nowrap} #room-screen.room-screen .room-label-long{display:none} #room-screen.room-screen .room-label-short{display:inline} /* Story: the level tabs keep 8px between them */ .story-tabs{gap:8px} /* the entry: labels at 11px, the primary action at 14px on 44px */ #entry-dialog .eyebrow{font-size:11px} #entry-dialog .browser-heading h3 span{font-size:11px} #entry-dialog .mode-picker legend{font-size:11px} #entry-dialog .mode-picker span{font-size:11px} #entry-dialog .entry-map small{font-size:11px;letter-spacing:.5px} #entry-dialog .browser-footer .primary-button{min-height:44px;font-size:14px} /* Join room completes joining by code: the primary floor, as New room (Fable ui-phone-floors-01, item 1); its code field matches */ #entry-dialog .browser-footer .join-row .secondary-button{min-height:44px;font-size:14px} #entry-dialog .browser-footer .join-row input{min-height:44px} /* a seat card's badge goes under its Move chip when both do not fit one row (eight seats at 667 x 375; item 2) */ .arcade-room #room-screen.room-screen #room-roster .slot-header{flex-wrap:wrap;row-gap:2px} /* Ranked: Leave room at the primary floor, 44px and 14px (item 3); its heading grows to hold it */ #room-screen.ranked-party .room-heading{height:44px;min-height:44px} #room-screen.ranked-party .room-back{height:44px;min-height:44px;font-size:14px} } /* the smallest phones (375px tall): in Ranked rooms, where the heading now holds Leave room at 44px, an open seat's decorative "+" gives way so its lines fit the card (the OPEN SEAT badge says it) */ @media(max-height:380px){ .arcade-room #room-screen.ranked-party #room-roster .room-slot.empty .empty-seat{display:none} } /* ---------- V32 (UI-05, H2): the Collection on phones ---------- Characters, Balloons and Trails drew their labels at 6 to 10px with tabs, hero chips and Equip buttons 17 to 30px tall. Text goes to 11px or more; every control to 32px with 8px round it; Back (the dialog's close) to 44px. */ @media(max-height:520px){ .profile-dialog[data-tab="Collections"] .profile-top{height:46px;padding-top:1px;padding-bottom:1px} .profile-dialog[data-tab="Collections"] .profile-body{height:calc(100% - 46px)} .profile-dialog[data-tab="Collections"] .profile-back{min-width:44px;min-height:44px;padding:0 14px;font-size:14px;border-width:2px;border-radius:10px} #profile-dialog .collection-tabs{gap:8px;padding:3px} #profile-dialog .collection-tabs button{min-height:32px;padding:0 14px!important;font-size:12px;line-height:1.2} /* V32 (UI-05, H2): Characters: the hero chips stay on one row at 667px (32px tall, 8px apart); stage and card labels at 11px */ #profile-dialog .skins-heading>span{font-size:11px;line-height:1.2;padding:3px 8px} #profile-dialog .skins-heroes{gap:8px;padding:0 2px 4px} #profile-dialog .skins-heroes button{flex:1 0 auto;min-width:40px;min-height:32px;padding:0 5px;font-size:11px;line-height:13px} #profile-dialog .skin-name{font-size:11px} #profile-dialog .skins-view>footer{flex:0 0 15px;min-height:15px} #profile-dialog .skins-status{font-size:11px;line-height:15px} #profile-dialog .skin-card .character-card-stamp-label{font-size:11px} /* V32 (UI-05, H2): Balloons: a Legendary card's hero line grows to hold its outfit's name at 11px */ #profile-dialog .balloons-equipped span{font-size:11px;line-height:13px;letter-spacing:1px} #profile-dialog .balloon-rarity{font-size:11px;line-height:1.2;letter-spacing:.8px} #profile-dialog .balloon-card[data-rarity=legendary]>.balloon-rarity{font-size:11px;padding:2px 6px;letter-spacing:.8px} #profile-dialog .balloon-hero{height:auto;min-height:28px} #profile-dialog .balloon-hero strong{font-size:11px;line-height:13px} #profile-dialog .balloon-hero small{font-size:11px;line-height:13px;margin-top:0} #profile-dialog .balloon-normal-note{font-size:11px;line-height:1.3} #profile-dialog .balloon-card>button{min-height:32px;font-size:11px} #profile-dialog .balloons-footnote{font-size:11px;line-height:1.3} /* V32 (UI-05, H2): Trails: the two choices 8px apart (were 7px) */ #profile-dialog .trails-equipped small{font-size:11px;line-height:13px} #profile-dialog .trail-choice-bar{gap:8px} #profile-dialog .trails-view button{font-size:12px} #profile-dialog .trail-choice-bar p{font-size:11px;line-height:1.3;margin-left:0} #profile-dialog .trail-rarity{font-size:11px;line-height:1.25;letter-spacing:.5px} #profile-dialog .trail-included{font-size:11px} } /* V32 (UI-05, H2): the three tabs' landscape phone layout (the older sheets' max-height 500px landscape rules): each tab's heading sits beside the tab row, as the Trails tab's already did, so the cards keep their height; the pressed tab names the section, so the big title gives way and the count or the equipped box stays */ @media(max-height:500px) and (orientation:landscape){ #profile-dialog .skins-view,#profile-dialog .balloons-view{position:relative} #profile-dialog .skins-heading,#profile-dialog .balloons-heading{position:absolute;top:0;right:0;height:40px;min-height:0;padding:0;align-items:center} #profile-dialog .skins-heading>div,#profile-dialog .balloons-heading>div:first-child{display:none} #profile-dialog .balloons-equipped{padding:2px 11px} #profile-dialog .balloons-equipped strong,#profile-dialog .trails-equipped strong{line-height:18px} #profile-dialog .trails-heading{top:0} #profile-dialog .trails-equipped{padding:2px 11px} #profile-dialog .trails-equipped small{display:block} /* V32 (M2): a trail preview keeps its canvas's 2.25 (2.7 squashed the drawing by about 18%); the lock badge sits on the card's corner, clear of the preview's label and trail (it covered about a quarter of the preview) */ #profile-dialog .trail-preview{aspect-ratio:2.25} #profile-dialog .trail-card[data-locked=true]::after{top:-4px;right:-4px;width:22px;height:22px;background-size:13px} } /* ---------- V32 (UI-05): Shop Outfits and the room's hero picker and code pill on phones (L5, L10, L11) ---------- */ @media(max-height:520px){ /* V32 (UI-05, L5): Outfits' twelve hero chips on one scrolling row (two rows left the cards about 115px), 8px under the 36px tabs (were 6px) */ .shop-hero-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:2px;padding-bottom:4px} .shop-hero-chips::-webkit-scrollbar{display:none} .shop-hero-chips button{flex:none} /* V32 (UI-05, L10): a locked hero's price on one line across the top of its picker tile, so the name under it shows (the room grid's span rule made the chip a block: coin over price, covering the tile and its name) */ #room-screen.room-screen #room-character-grid .hero-lock-badge{display:flex;flex-direction:row;top:2px;left:2px;right:2px;justify-content:center;gap:1px;padding:1px 2px;border-width:1px;line-height:1;white-space:nowrap} #room-screen.room-screen #room-character-grid .hero-lock-badge .shop-icon{flex:none;width:10px;height:10px} /* V32 (L11): Ranked's code pill holds its copy button inside its rounded end (the button sat on the border) */ #room-screen.ranked-party .room-code-badge{height:40px;padding:2px 3px 2px 10px} } /* ---------- V32 (card framing): Collection > Characters cards and the Home hero cards' names ---------- Desktop (and every layout but the phones' below): a Collection card picture keeps its catalog focal point, as on Home, the Shop, the refine sheet and the room picker. character-cards-v17.css draws the Collection's pictures from the centre with !important (the 10% for short screens comes before it and loses), which outweighs the focal point the card view sets on each picture (img.style.objectPosition); in the near-square desktop boxes that put faces under the rarity stamp and cut heads at the top. A style sheet cannot read that inline value back, so the focal points of assets/cards-v17/catalog.json are repeated here and must change with it: [0.5, 0.35] for every look (also the star cards' fallback), then the outfits that have their own. A 2- or 3-star card uses its outfit's. */ #profile-dialog .skins-cards .character-card-art[data-art=card] .character-card-image{object-position:50% 35%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=mira-island-salesman] .character-card-image{object-position:50% 34%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=vera-astral-wizard] .character-card-image{object-position:51% 37%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=orin-sky-explorer] .character-card-image{object-position:52% 31%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=dax-bear-king] .character-card-image{object-position:48% 27%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=kiki-spirit-dancer] .character-card-image{object-position:48% 29%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=lumi-celestial-princess] .character-card-image{object-position:52% 31%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=zed-dragon-emperor] .character-card-image{object-position:52% 31%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=nico-aurora-maestro] .character-card-image{object-position:51% 32%!important} /* Phones in landscape (601px wide or more): the cards row is a short scrolling strip (127px at 667 x 375, 140px at 844 x 390) and the 2:3 pictures (145 and 174px tall) left every card's name band below it. A picture keeps the card's width and is no taller than the strip, so its stamp, picture and name band show together; Equip, Get in Shop and the source line stay one short scroll below, as the phone list already was. The shortened picture keeps its top edge where the full 2:3 picture had it, so every face stays where it was under the stamp and only the feet are trimmed (at the focal point's 35% Rocco's raised eyes went under the stamp). */ @media(max-height:520px) and (min-width:601px){ #profile-dialog .skins-choice{container-type:size} #profile-dialog .skins-cards .skin-card .character-card-art{max-height:calc(100cqh - 1px)} #profile-dialog .skins-cards .skin-card .character-card-art[data-art=card][data-skin-id] .character-card-image{object-position:50% 0!important} } /* Home > Characters on phones in landscape: a hero's name stays whole on one line. At 667 x 375 "Trumbo" needed 81px of an 80px band at 23px and broke as "Trumb / o" (overflow-wrap:anywhere); at 22px it takes 78px. */ @media(max-height:520px){ #character-dialog #home-character-grid .character-card-name{font-size:22px;overflow-wrap:normal} } /* V32 (card framing, 2026-10-01): face-checked framing for Collection > Characters on desktop. The catalog focal point left some faces under the 41px rarity stamp in the near-square desktop box (Tavi, Fenn, Mira 2-star, Rocco); each value below is the nearest to the focal point that clears the eyes and mouth by about 3px (measured, opus/agents/card-framing/ option-table.json). Desktop layout boxes are unchanged; only the picture framing moves. */ @media(min-width:601px) and (min-height:601px){ #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=bao-bamboo-ranger]:not([data-star-card]) .character-card-image{object-position:50% 23%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=bao-mountain-courier]:not([data-star-card]) .character-card-image{object-position:50% 26%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=bao-jade-guardian][data-star-card="2"] .character-card-image{object-position:50% 26%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=bao-jade-guardian][data-star-card="3"] .character-card-image{object-position:50% 28%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-character-id=dax][data-skin-id=original]:not([data-star-card]) .character-card-image{object-position:50% 26%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=dax-neon-rider]:not([data-star-card]) .character-card-image{object-position:50% 30%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=dax-bear-king][data-star-card="2"] .character-card-image{object-position:48% 13%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=dax-bear-king][data-star-card="3"] .character-card-image{object-position:48% 15%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-character-id=fenn][data-skin-id=original]:not([data-star-card]) .character-card-image{object-position:50% 16%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=fenn-festival-scout]:not([data-star-card]) .character-card-image{object-position:50% 18%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=fenn-moonlit-messenger]:not([data-star-card]) .character-card-image{object-position:50% 26%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=fenn-mirage-kitsune][data-star-card="2"] .character-card-image{object-position:50% 18%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=fenn-mirage-kitsune][data-star-card="3"] .character-card-image{object-position:50% 18%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=lumi-celestial-princess][data-star-card="2"] .character-card-image{object-position:52% 28%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=lumi-celestial-princess][data-star-card="3"] .character-card-image{object-position:52% 28%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-character-id=mira][data-skin-id=original]:not([data-star-card]) .character-card-image{object-position:50% 32%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=mira-island-salesman][data-star-card="2"] .character-card-image{object-position:50% 19%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-character-id=tavi][data-skin-id=original]:not([data-star-card]) .character-card-image{object-position:50% 26%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=tavi-garden-keeper]:not([data-star-card]) .character-card-image{object-position:50% 28%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=tavi-candy-carpenter]:not([data-star-card]) .character-card-image{object-position:50% 20%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=tavi-business-leader]:not([data-star-card]) .character-card-image{object-position:50% 22%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=dax-bear-king]:not([data-star-card]) .character-card-image{object-position:48% 16%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=bao-jade-guardian]:not([data-star-card]) .character-card-image{object-position:50% 28%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=lumi-celestial-princess]:not([data-star-card]) .character-card-image{object-position:52% 28%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-character-id=zed][data-skin-id=original]:not([data-star-card]) .character-card-image{object-position:50% 25%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=zed-surf-ace]:not([data-star-card]) .character-card-image{object-position:50% 28%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=zed-storm-cadet]:not([data-star-card]) .character-card-image{object-position:50% 30%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=zed-dragon-emperor]:not([data-star-card]) .character-card-image{object-position:52% 30%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-character-id=mochi][data-skin-id=original]:not([data-star-card]) .character-card-image{object-position:50% 23%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=mochi-neon-courier]:not([data-star-card]) .character-card-image{object-position:50% 23%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=mochi-jungle-guide]:not([data-star-card]) .character-card-image{object-position:50% 30%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=fenn-mirage-kitsune]:not([data-star-card]) .character-card-image{object-position:50% 19%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-character-id=trumbo][data-skin-id=original]:not([data-star-card]) .character-card-image{object-position:50% 30%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=trumbo-harbor-helper]:not([data-star-card]) .character-card-image{object-position:50% 28%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=trumbo-coral-lifeguard]:not([data-star-card]) .character-card-image{object-position:50% 30%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=trumbo-tempest-royal]:not([data-star-card]) .character-card-image{object-position:50% 30%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-character-id=rocco][data-skin-id=original]:not([data-star-card]) .character-card-image{object-position:50% 0%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=rocco-harbor-captain]:not([data-star-card]) .character-card-image{object-position:50% 0%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=rocco-workshop-cadet]:not([data-star-card]) .character-card-image{object-position:50% 10%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=rocco-coral-knight]:not([data-star-card]) .character-card-image{object-position:50% 20%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=mira-island-salesman][data-star-card="3"] .character-card-image{object-position:50% 25%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=mochi-grand-prix][data-star-card="2"] .character-card-image{object-position:50% 41%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=mochi-grand-prix][data-star-card="3"] .character-card-image{object-position:50% 42%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=mira-island-salesman]:not([data-star-card]) .character-card-image{object-position:50% 28%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=nico-aurora-maestro][data-star-card="3"] .character-card-image{object-position:51% 35%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=rocco-coral-knight][data-star-card="2"] .character-card-image{object-position:50% 22%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=rocco-coral-knight][data-star-card="3"] .character-card-image{object-position:50% 25%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=tavi-business-leader][data-star-card="2"] .character-card-image{object-position:50% 17%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=tavi-business-leader][data-star-card="3"] .character-card-image{object-position:50% 20%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=trumbo-tempest-royal][data-star-card="2"] .character-card-image{object-position:50% 28%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=trumbo-tempest-royal][data-star-card="3"] .character-card-image{object-position:50% 29%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=vera-astral-wizard][data-star-card="2"] .character-card-image{object-position:51% 36%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=zed-dragon-emperor][data-star-card="2"] .character-card-image{object-position:52% 29%!important} #profile-dialog .skins-cards .character-card-art[data-art=card][data-skin-id=zed-dragon-emperor][data-star-card="3"] .character-card-image{object-position:52% 27%!important} } /* ---------- V32 (econ follow-ups, owner C, 2026-10-01) ---------- CARD-NAME-CONTRAST: a card's names keep 4.5:1 over any card art. The white outfit name over Fenn's orange Mirage Kitsune art measured 3.55:1 in the phone refine sheet: its soft 2px shadow did not separate it from bright art. A solid dark ring (eight offsets of about 1/14 of the letter size, so it scales from the 11px Collection names to the 25px desktop ones) plus a soft fall-off now outlines every letter of the name and of the line under it on every card surface (Home, Collection, Shop, refine sheet, room skins, matchmaking, chest reveal). A blurred glow alone measured worse: its graded edge left the letters' anti-aliasing as the commonest colour round them. text-shadow only paints, so no box moves. */ .character-card-art .character-card-name{text-shadow:.07em 0 0 #021220,-.07em 0 0 #021220,0 .07em 0 #021220,0 -.07em 0 #021220,.05em .05em 0 #021220,-.05em .05em 0 #021220,.05em -.05em 0 #021220,-.05em -.05em 0 #021220,0 .1em .2em #021220cc} /* CC-DPR1-1 (verify-C): at desktop DPR 1 the 11px subtitle's .08em ring is under one device pixel, and two Collection subtitles (Mira, Nico Original) measured 4.05:1 and 4.22:1. The ring is now at least 1px, and a soft dark glow (.45em) settles bright art round the letters. */ .character-card-art .character-card-subtitle{text-shadow:max(1px,.08em) 0 0 #021220,calc(-1*max(1px,.08em)) 0 0 #021220,0 max(1px,.08em) 0 #021220,0 calc(-1*max(1px,.08em)) 0 #021220,max(1px,.06em) max(1px,.06em) 0 #021220,calc(-1*max(1px,.06em)) max(1px,.06em) 0 #021220,max(1px,.06em) calc(-1*max(1px,.06em)) 0 #021220,calc(-1*max(1px,.06em)) calc(-1*max(1px,.06em)) 0 #021220,0 0 .45em #021220e6,0 .1em .3em #021220cc} @media(max-height:520px){ /* HOME-SUBTITLE-10PX: Home > Characters, the outfit line under each hero name at 11px (was 10px, progression-v22.css). It may use the copy's right padding (7px of its 8px; its left edge stays under the name) and drops the 0.1px tracking, so the same six long names as at 10px take two lines in the 96px cards at 667 x 375 (Mountain Courier, Celestial Princess, Moonlit Messenger, Workshop Cadet, Candy Carpenter, Grand Prix Champion; at 11px alone it was fourteen) and none from 740px wide; two lines split evenly, at word breaks only. */ #character-dialog #home-character-grid .character-card-subtitle{font-size:11px;letter-spacing:0;margin-right:-7px;text-wrap:balance} } /* TOAST-10PX: every toast at 11px in landscape phone layouts (styles.css drew them at 10px; the lobby's #toast was already 11px through shop-v32.css), battle toasts included */ @media(max-height:520px) and (min-width:650px){.toast{font-size:11px;line-height:15px}}