/* ===== Single-player layouts (VS CPU, ranked, tutorial): the CPU is a compact card, the player gets the room ===== 2 PLAYERS (pvp) and online keep their split layouts (build.css / online.css). Loaded after fit.css. Build screen composition (0.7.10), the same for the tutorial pick shop and normal solo play: header row [pause] [ROUND n | 1 : 0] [arena] [timer] ........ [skip pill] [CPU card: bot | nameplate / state | trophies] player panel [name ............] [card-area title ........ scrap] [bot preview (margin) | stats] [cards on a tray ] [slots .........................] [READY / REROLL ] Portrait stacks the same blocks: header row, CPU card, name, bot, slots, card-area title, cards, buttons. Nothing floats over the cards: the tutorial task and the one-time hints are the card area's title (ui/coach.js, ui/hints.js). */ /* ---------- build screen: grid ---------- */ #scr-build:not(.solo) .opp-strip { display: none; } #scr-build.solo .panel.p2 { display: none; } #scr-build.solo .build-grid { --hh: clamp(54px, 9.4cqh, 86px); --hb: var(--hh); gap: max(6px, 1cqmin); padding: max(6px, 1cqmin); } .landscape #scr-build.solo .build-grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--hh) minmax(0, 1fr); } .landscape #scr-build.solo .center { grid-column: 1; grid-row: 1; } .landscape #scr-build.solo .opp-strip { grid-column: 2; grid-row: 1; max-width: 46cqw; } .landscape #scr-build.solo .panel.p1 { grid-column: 1 / -1; grid-row: 2; } .portrait #scr-build.solo .build-grid { --hh: clamp(50px, 7cqh, 72px); --hb: clamp(48px, 5.8cqh, 60px); grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--hb) var(--hh) minmax(0, 1fr); } .portrait #scr-build.solo .center { order: 1; } .portrait #scr-build.solo .opp-strip { order: 2; } .portrait #scr-build.solo .panel.p1 { order: 3; } /* ---------- header row: pause, ROUND | score (one scoreboard pill), arena, timer; the skip pill small at the far end ---------- */ #scr-build.solo .center { --g: .8em; flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--g); padding: 0 .2em; min-height: 0; font-size: clamp(11px, calc(var(--hb) * .27), 19px); } #scr-build.solo .c-pause { order: 0; flex: none; } #scr-build.solo .center .pause-btn { width: 2.75em; height: 2.75em; } #scr-build.solo .c-round, #scr-build.solo .c-scores { height: 2.45em; box-sizing: border-box; display: flex; align-items: center; flex: none; background: rgba(12, 6, 26, .72); border: .14em solid var(--ink); box-shadow: 0 .16em 0 var(--ink), inset 0 .1em 0 rgba(255, 255, 255, .07); } #scr-build.solo .c-round { order: 1; transform: none; white-space: nowrap; font-size: 1em; padding: 0 .75em 0 .9em; border-radius: 1.2em 0 0 1.2em; border-right: 0; max-width: none; } #scr-build.solo .c-round .round-lbl { font-size: 1.1em; line-height: 1.2; } #scr-build.solo .c-scores { order: 2; flex-direction: row; gap: .3em; font-size: 1em; margin-left: calc(-1 * var(--g)); padding: 0 .9em 0 .55em; border-radius: 0 1.2em 1.2em 0; border-left: .12em solid rgba(255, 255, 255, .14); } #scr-build.solo .cscore { font-size: 1.15em; gap: .1em; line-height: 1; } #scr-build.solo .cscore .ico { width: 1.1em; height: 1.1em; } #scr-build.solo .cdash { display: inline; font-weight: 800; } #scr-build.solo .c-arena { order: 3; flex-direction: row; gap: .4em; flex: 0 1 auto; min-width: 0; } #scr-build.solo .c-arena .ac-cap { display: none; } #scr-build.solo .c-arena .ac-ico { width: 2.3em; height: 2.3em; flex: none; } #scr-build.solo .c-arena .ac-name { font-size: .9em; max-width: 7.5em; text-align: left; } #scr-build.solo .c-timer { order: 4; width: 2.9em; height: 2.9em; } #scr-build.solo .time-num { font-size: 1.15em; } #scr-build.solo .tut-skip, .landscape #scr-build.solo .tut-skip, .portrait #scr-build.solo .tut-skip { order: 9; position: static; margin-left: auto; flex: none; min-width: 0; max-width: none; min-height: 0; padding: .45em .85em; line-height: 1.1; font-size: max(.74em, 10px); white-space: nowrap; text-align: center; opacity: .8; box-shadow: 0 .14em 0 var(--ink); } #scr-build.solo .tut-skip > span { display: block; } .short.landscape #scr-build.solo .c-arena .ac-name { display: none; } @container stage (max-width: 1150px) { .landscape #scr-build.solo .c-arena .ac-name { display: none; } } /* narrow phones: the scoreboard pill keeps its size, the skip pill wraps on two short lines */ @container stage (max-width: 420px) { #scr-build.solo .center { --g: .55em; padding: 0; } #scr-build.solo .c-round { padding: 0 .6em 0 .75em; } #scr-build.solo .c-scores { padding: 0 .75em 0 .45em; } #scr-build.solo .tut-skip, .portrait #scr-build.solo .tut-skip { flex: 0 1 auto; font-size: max(.68em, 9.5px); padding: .3em .7em; white-space: normal; text-wrap: balance; line-height: 1.05; } } /* ---------- the CPU card: small bot | nameplate over its state | trophies | stat bars (normal play, wide stages) ---------- */ .opp-strip { --team: var(--t2); position: relative; min-width: 0; min-height: 0; z-index: 2; height: 100%; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-rows: minmax(0, 1fr); align-items: center; column-gap: .75em; font-size: clamp(10px, calc(var(--hh) * .21), 16.5px); padding: .3em 1em .3em .3em; border: .2em solid var(--ink); border-radius: 1.3em; background: linear-gradient(180deg, rgba(58, 29, 99, .9), rgba(28, 14, 52, .94)); box-shadow: 0 .3em 0 var(--ink), 0 .6em 1.2em rgba(0, 0, 0, .4), inset 0 .12em 0 rgba(255, 255, 255, .12), inset 0 0 0 .18em color-mix(in srgb, var(--team) 38%, transparent); } .opp-strip[hidden] { display: none; } .os-bot { position: relative; height: 100%; aspect-ratio: 1.25; min-width: 0; border-radius: 1em; overflow: hidden; background: radial-gradient(ellipse 75% 45% at 50% 92%, color-mix(in srgb, var(--team) 50%, transparent), transparent 78%), linear-gradient(180deg, rgba(12, 6, 26, .6), rgba(40, 20, 70, .55)); border: .14em solid rgba(20, 12, 34, .9); box-shadow: inset 0 .2em .5em rgba(0, 0, 0, .4); } .os-bot canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .os-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .2em; } .os-name { max-width: 100%; font-family: var(--font-display); font-size: 1.3em; line-height: 1.1; text-transform: uppercase; color: var(--team); letter-spacing: .02em; min-width: 0; white-space: nowrap; text-shadow: 0 .08em 0 var(--ink), .06em 0 0 var(--ink), -.06em 0 0 var(--ink), 0 -.06em 0 var(--ink); } .os-name.has-np { display: flex; align-items: center; font-size: 1em; overflow: visible; } .os-name.has-np .np { font-size: 1em; max-width: 100%; padding: .04em .65em .06em; border-width: .13em; } .os-name.has-np .np-title { font-size: max(.5em, 9px); margin-top: 0; } .os-sub { display: flex; align-items: center; gap: .7em; min-width: 0; max-width: 100%; } .os-status { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: .4em; font-family: var(--font-display); font-size: max(.95em, 9.5px); line-height: 1.15; color: var(--text-dim); text-transform: uppercase; letter-spacing: .02em; } .os-status .fit { min-width: 0; white-space: nowrap; } .os-gear { flex: none; width: 1.3em; height: 1.3em; background: url('gear.svg') center / contain no-repeat; filter: brightness(1.8); animation: spin 3s linear infinite; } .os-wins { grid-column: 3; display: flex; gap: .05em; } .os-wins .trophy { width: 1.3em; height: 1.3em; } .os-stats { grid-column: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45em .9em; width: 15em; align-content: center; } .os-stat { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); align-items: center; gap: .3em; min-width: 0; } .os-stat b { display: block; font-size: max(.85em, 9px); font-weight: 800; color: var(--text-dim); line-height: 1; letter-spacing: .02em; } .os-track { display: block; height: .75em; border-radius: .5em; background: #0e0720; border: .13em solid var(--ink); overflow: hidden; box-shadow: inset 0 .12em .15em rgba(0, 0, 0, .5); } .os-track i { display: block; height: 100%; width: 0; border-radius: .4em; transition: width .5s var(--ease-out); background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 60%, #fff), var(--sc)); } .os-stat.hp { --sc: #5BE37D; } .os-stat.dmg { --sc: #ff7a3d; } .os-stat.speed { --sc: #2EC4F1; } .os-stat.armor { --sc: #9fb2d0; } /* the bars only where the card has the room for them (wide landscape); the tutorial never shows them */ @container stage (max-width: 1350px) { .os-stats { display: none; } } #scr-build.simple .os-stats { display: none; } /* ---------- the player's panel ---------- */ .p-tray, .p-shophead { display: none; } #scr-build.solo .p-in { padding: .6em .8em .7em; row-gap: .5em; } #scr-build.solo .p-in > .p-tray { display: block; min-width: 0; min-height: 0; border-radius: 1.1em; pointer-events: none; background: linear-gradient(180deg, rgba(12, 6, 26, .5), rgba(12, 6, 26, .28)); border: .14em solid rgba(20, 12, 34, .85); box-shadow: inset 0 .2em .7em rgba(0, 0, 0, .35); } #scr-build.solo .p-in > .p-shophead { display: flex; align-items: center; justify-content: space-between; gap: .7em; min-width: 0; min-height: 2.3em; padding: .35em .75em 0; } #scr-build.solo .p-in > .p-shop { padding: .35em .75em .75em; min-height: 0; } #scr-build.solo .p-head { min-height: 2.3em; padding-top: .35em; } #scr-build.solo .p-name { flex: 0 1 auto; font-size: 1.3em; white-space: nowrap; } #scr-build.solo .p-name.has-np .np-title { font-size: max(.45em, 9px); } #scr-build.solo .p-wins { margin-left: auto; } #scr-build.solo .p-wins .trophy { width: 1.3em; height: 1.3em; } /* the card area's title: section label by default, a yellow task / hint line in the tutorial and for one-time hints */ .sh-title { flex: 1 1 0; min-width: 0; font-family: var(--font-display); font-size: 1.05em; line-height: 1.15; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); text-shadow: 0 .08em 0 var(--ink); text-wrap: balance; } .p-shophead[data-kind="task"] .sh-title { font-size: 1.45em; letter-spacing: .02em; text-transform: none; color: var(--yellow); -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; } .p-shophead[data-kind="hint"] .sh-title { font-size: 1.1em; letter-spacing: .01em; text-transform: none; color: var(--yellow); animation: shHint 1.4s ease-in-out infinite; } @keyframes shHint { 50% { color: #fff3b0; } } .p-shophead .p-scrap { flex: none; } /* the "tap a part" pill is the card area's title in single-player (it never covers the bot) */ #scr-build.solo .p-hint { display: none !important; } /* landscape: player area left, card area right; READY under the cards */ .landscape #scr-build.solo .p-in { grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 1.1em; } .landscape #scr-build.solo .p-in > .p-tray { grid-column: 2; grid-row: 1 / 3; } .landscape #scr-build.solo .p-in > .p-head { grid-column: 1; grid-row: 1; } .landscape #scr-build.solo .p-in > .p-main { grid-column: 1; grid-row: 2; } .landscape #scr-build.solo .p-in > .p-chips { grid-column: 1; grid-row: 3; } .landscape #scr-build.solo .p-in > .p-shophead { grid-column: 2; grid-row: 1; } .landscape #scr-build.solo .p-in > .p-shop { grid-column: 2; grid-row: 2; } .landscape #scr-build.solo .p-in > .p-actions { grid-column: 2; grid-row: 3; } /* portrait: one column */ .portrait #scr-build.solo .p-in { --k: max(.8px, min(.34cqw, .3333cqh)); grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; } .portrait #scr-build.solo .p-in > .p-head { grid-row: 1; } .portrait #scr-build.solo .p-in > .p-main { grid-row: 2; } .portrait #scr-build.solo .p-in > .p-chips { grid-row: 3; } .portrait #scr-build.solo .p-in > .p-tray { grid-row: 4 / 6; } .portrait #scr-build.solo .p-in > .p-shophead { grid-row: 4; } .portrait #scr-build.solo .p-in > .p-shop { grid-row: 5; } .portrait #scr-build.solo .p-in > .p-actions { grid-row: 6; } #scr-build.solo .p-main, #scr-build.solo.simple .p-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; row-gap: .5em; } #scr-build.solo .p-stats { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(2.4em, auto) auto minmax(0, 1fr) minmax(2.4em, auto); align-items: center; gap: .35em .45em; padding: 0 .2em; } #scr-build.solo .p-stats > .stat { display: contents; } #scr-build.solo .s-lbl { white-space: nowrap; overflow: visible; } #scr-build.solo .stat.dmg .s-lbl, #scr-build.solo .stat.armor .s-lbl { margin-left: .8em; } #scr-build.solo .pop { width: 100%; } /* over the bot and its stats: the popover lists the stat changes itself */ #scr-build.solo .btn.act .lbl { line-height: 1.25; } #scr-build.solo .pop .btn .lbl, #scr-build.solo .pop .pi-name { line-height: 1.2; } /* readability floors (>= 9px) for the small labels on phones */ #scr-build.solo .chip .chip-lbl { font-size: max(.72em, 9px); } #scr-build.solo .c-ribbon { font-size: max(.78em, 9px); } #scr-build.solo .c-vs b { font-size: max(.8em, 9px); } #scr-build.solo .pop .pi-brand, #scr-build.solo .pop .role-tag, #scr-build.solo .pop .role-tag b { font-size: max(.82em, 9px); } /* the cards: five in two rows (3 + 2); a single row on short card areas */ #scr-build.solo .p-shop { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: .75em .7em; align-content: stretch; } #scr-build.solo .p-shop .card { grid-column: span 2; min-height: 0; height: 100%; box-sizing: border-box; } #scr-build.solo .p-shop .card:nth-child(4) { grid-column: 2 / span 2; } #scr-build.solo .p-shop .card:nth-child(5) { grid-column: 4 / span 2; } #scr-build.solo .p-shop .card .c-icon { position: relative; flex: 1 1 0; } #scr-build.solo .p-shop .card .c-icon canvas.fit-icon { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; } #scr-build.solo .card .c-name { font-size: max(1.05em, 9.5px); line-height: 1.1; max-height: 2.3em; } .portrait #scr-build.solo .p-shop { grid-auto-rows: 8.6em; } /* small phones (360x640): the stats sit beside the bot so the preview keeps a usable height */ @container panel (max-height: 560px) { .portrait #scr-build.solo:not(.simple) .p-shop { grid-auto-rows: 6.4em; gap: .55em .6em; } .portrait #scr-build.solo:not(.simple) .p-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: .7em; } .portrait #scr-build.solo:not(.simple) .p-stats { grid-template-columns: auto minmax(0, 1fr) minmax(2.3em, auto); align-content: space-evenly; row-gap: .2em; } .portrait #scr-build.solo:not(.simple) .stat.dmg .s-lbl, .portrait #scr-build.solo:not(.simple) .stat.armor .s-lbl { margin-left: 0; } } @container panel (max-height: 360px) { .landscape #scr-build.solo:not(.simple) .p-shop { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6em; } .landscape #scr-build.solo:not(.simple) .p-shop .card, .landscape #scr-build.solo:not(.simple) .p-shop .card:nth-child(n) { grid-column: auto; } } #scr-build.solo .p-actions { min-height: max(44px, 3em); } #scr-build.solo .btn.act { font-size: 1.45em; } #scr-build.solo .p-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } @container panel (max-width: 520px) { #scr-build.solo .btn.act.reroll > .ico { display: none; } } /* ---------- tutorial shop: "Pick a new part" (3 big cards, nothing else) ---------- */ #scr-build.simple .p-stats, #scr-build.simple .p-chips, #scr-build.simple .p-scrap, #scr-build.simple .p-wins, #scr-build.simple .btn.reroll, #scr-build.simple .c-timer, #scr-build.simple .p-brands, #scr-build.simple .card .c-vs, #scr-build.simple .card .c-role, #scr-build.simple .card .c-cost, #scr-build.simple .card .c-gems, #scr-build.simple .card .c-set, #scr-build.simple .p-hint, #scr-build.simple .c-arena { display: none !important; } #scr-build.simple .card.empty { display: none; } #scr-build.simple .p-main { grid-template-columns: minmax(0, 1fr); } #scr-build.simple .p-actions { grid-template-columns: minmax(0, 1fr); } .landscape #scr-build.simple .p-in > .p-main { grid-row: 2 / 4; } .portrait #scr-build.simple .p-in { grid-template-rows: auto minmax(0, 1fr) auto auto auto; } .portrait #scr-build.simple .p-in > .p-tray { grid-row: 3 / 5; } .portrait #scr-build.simple .p-in > .p-shophead { grid-row: 3; } .portrait #scr-build.simple .p-in > .p-shop { grid-row: 4; } .portrait #scr-build.simple .p-in > .p-actions { grid-row: 5; } #scr-build.simple .p-shop, #scr-build.simple .p-shop.locked { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); align-items: center; gap: .9em; } #scr-build.simple .p-shop .card, #scr-build.simple .p-shop .card:nth-child(n) { grid-column: auto; height: 100%; max-height: 17em; padding: .9em .45em .8em; gap: .25em; justify-content: flex-end; } .portrait #scr-build.simple .p-shop { grid-auto-rows: 13em; } #scr-build.simple .card .c-icon { min-height: 3em; } #scr-build.simple .card .c-name { font-size: max(1.15em, 11px); max-height: none; line-height: 1.1; overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; } .short #scr-build.simple .card .c-name { font-size: max(1em, 11px); } @container panel (max-width: 520px) { #scr-build.simple .p-shop .card, #scr-build.simple .p-shop .card:nth-child(n) { padding-inline: .3em; } #scr-build.simple .card .c-name { font-size: max(1em, 10.5px); } } .card .c-desc { display: none; } #scr-build.simple .card .c-desc { display: block; font-size: max(.8em, 10px); font-weight: 700; line-height: 1.2; color: color-mix(in srgb, #fff 80%, var(--bc)); text-align: center; text-wrap: balance; padding: 0 .2em; text-shadow: 0 .08em 0 var(--ink); } #scr-build.simple .btn.act.ready { font-size: 1.8em; } /* the task: the cards breathe with a soft yellow glow (one after the other), nothing sits on their art */ #scr-build.simple .panel.coach-pick .p-shop .card:not(.sold):not(.deal) { animation: pickGlow 1.8s ease-in-out infinite; } #scr-build.simple .panel.coach-pick .p-shop .card:nth-child(2):not(.deal) { animation-delay: .3s; } #scr-build.simple .panel.coach-pick .p-shop .card:nth-child(3):not(.deal) { animation-delay: .6s; } @keyframes pickGlow { 50% { box-shadow: 0 .3em 0 var(--ink), 0 0 0 .2em var(--yellow), 0 0 1.5em .25em rgba(255, 210, 63, .55); } } /* after the pick: the chosen card turns into a green check, the others step back, READY beats */ #scr-build.simple .p-shop.locked .card:not(.sold) { opacity: .38; filter: grayscale(.7) brightness(.8); pointer-events: none; transform: scale(.95); } #scr-build.simple .p-shop .card.sold { opacity: 1; filter: none; transform: none; border-color: var(--green); box-shadow: 0 .3em 0 var(--ink), 0 0 0 .14em rgba(91, 227, 125, .5), 0 0 1.2em rgba(91, 227, 125, .35); } #scr-build.simple .p-shop .card.sold > * { visibility: visible; } #scr-build.simple .p-shop .card.sold::after { content: '\2714'; position: absolute; top: .45em; right: .45em; z-index: 3; width: 1.7em; height: 1.7em; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05em; line-height: 1; color: var(--ink); background: var(--green); border: .14em solid var(--ink); box-shadow: 0 .12em 0 var(--ink); } #scr-build.simple .panel.pick-done .btn.ready:not(.on) { animation: readyBeat .9s ease-in-out infinite; box-shadow: 0 .32em 0 var(--ink), 0 0 1.4em .1em rgba(91, 227, 125, .75); } @keyframes readyBeat { 50% { transform: scale(1.04); filter: brightness(1.18); } } /* ---------- battle: the guided first match's skip pill (top left, under the HP bar) ---------- */ .battle-tutskip { position: absolute; left: 2.5cqmin; top: calc(max(8px, 1.2cqmin) + clamp(52px, 8.5cqmin, 90px) + 3.2cqmin); z-index: 5; font-size: clamp(10px, 1.7cqmin, 16px); padding: .4em .8em; min-height: 2.2em; line-height: 1.15; opacity: .92; white-space: nowrap; } .battle-tutskip[hidden] { display: none; } #stage.rr-open .battle-tutskip { visibility: hidden; } /* ---------- round result (single-player): the player's side is wide, the CPU's a compact line ---------- */ .rr.solo .rr-score { gap: .6em; } .rr.solo .rr-side.p1 { flex: 1.7 1 0; } .rr.solo .rr-side.p2 { flex: .85 1 0; } .rr.solo .rr-side.p1 .rr-name { font-size: 1.1em; } .rr.solo .rr-side.p1 .rr-trophies .trophy { width: 1.8em; height: 1.8em; } .rr.solo .rr-side.p2 .rr-name { font-size: .75em; opacity: .9; } .rr.solo .rr-side.p2 .rr-trophies .trophy { width: 1.15em; height: 1.15em; } .rr.solo .rp-cols { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); } .rr.solo .rp-col.p2 .rw-ico { width: 1.3em; height: 1.3em; } .rr.solo .rp-col.p2 .rw-num { font-size: .8em; min-width: 2em; } .rr.solo .rr-scrap.p2 { font-size: .78em; } .rr.solo .rr-scrap.p1 { font-size: 1.05em; } /* ---------- match result (single-player): the player's bot is the big one, the CPU a small card ---------- */ .mr-bots { container-type: size; } #scr-result.solo .mr-win { width: 88%; } #scr-result.solo .mr-lose { position: absolute; right: 0; bottom: 0; width: min(26cqw, 34cqh); height: min(26cqw, 34cqh); transform: none; padding: .3em; border-radius: 1em; background: linear-gradient(180deg, rgba(40, 20, 70, .75), rgba(20, 10, 40, .85)); border: .14em solid var(--t2); box-shadow: 0 .25em 0 var(--ink); } .portrait #scr-result.solo .mr-win { width: 90%; } .portrait #scr-result.solo .mr-lose { width: min(24cqw, 30cqh); height: min(24cqw, 30cqh); } .mr-lose canvas { position: absolute; inset: .3em; width: calc(100% - .6em); height: calc(100% - .6em); }