253 lines
14 KiB
CSS
253 lines
14 KiB
CSS
/* Match layout only; character poses, projectiles and finish cutscenes stay in game.css. */
|
|
.emote-menu { position: absolute; z-index: 16; right: var(--edge); top: calc(110px + env(safe-area-inset-top)); }
|
|
.emote-menu summary { cursor: pointer; padding: 8px 12px; border: 1px solid #56615a; background: #fffdf1; color: #232a2c; }
|
|
.emote-menu > div { position: absolute; top: 100%; right: 0; display: grid; grid-template-columns: repeat(2, 64px); gap: 4px; padding: 6px; background: #fffdf1; border: 1px solid #56615a; }
|
|
.emote-menu button { padding: 10px 6px; min-height: 44px; }
|
|
.emote-bubble { position: absolute; z-index: 7; top: -28px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(180px, 39vw); padding: 9px 12px; border: 2px solid #36433b; border-radius: 14px; background: #fffdf1; color: #232a2c; font-size: clamp(12px, 2vw, 17px); text-align: center; overflow-wrap: anywhere; pointer-events: none; }
|
|
.emote-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; border: 7px solid transparent; border-top-color: #36433b; }
|
|
@media (max-height: 500px) { .emote-menu { top: 66px; } }
|
|
body:is([data-screen=match], [data-screen=result]) {
|
|
overflow: hidden;
|
|
background: #d9ddd4;
|
|
}
|
|
body:is([data-screen=match], [data-screen=result]) .app {
|
|
width: 100%; max-width: none; height: 100dvh; min-height: 0; padding: 0;
|
|
}
|
|
body:is([data-screen=match], [data-screen=result]) .app > :is(header, footer) { display: none; }
|
|
body:is([data-screen=match], [data-screen=result]) main { padding: 0; min-height: 0; }
|
|
#match {
|
|
--stage-top: calc(120px + env(safe-area-inset-top));
|
|
--stage-bottom: 24px;
|
|
--fighter-size: min(32vw, calc((100cqh - 38px) * .866667), 460px);
|
|
--edge: clamp(20px, 3vw, 56px);
|
|
--self-position: 26.63%;
|
|
position: relative; isolation: isolate; flex: 1; width: 100%; max-width: none;
|
|
min-height: 0; height: 100%; margin: 0;
|
|
display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden;
|
|
background: #bebda9;
|
|
}
|
|
#match[data-self="1"] { --self-position: 73.37%; }
|
|
#match[data-phase=finished] { --stage-top: calc(260px + env(safe-area-inset-top)); }
|
|
#match .arena, #match[data-phase=finished] .arena {
|
|
--floor-line: calc(100% - var(--stage-bottom) - 80px);
|
|
position: relative; grid-area: 1 / 1; container-type: size;
|
|
min-height: 0; border: 0; border-radius: 0; overflow: visible;
|
|
padding: var(--stage-top) 9vw var(--stage-bottom);
|
|
align-items: flex-end;
|
|
background: linear-gradient(180deg, #d6dfd9 0%, #e9e6d9 var(--floor-line), #d0cbb7 var(--floor-line), #bebda9 100%);
|
|
}
|
|
#match .arena::before {
|
|
inset: 0; border: 0; transform: none;
|
|
background: radial-gradient(ellipse at 50% 38%, #fff9e966, transparent 65%);
|
|
}
|
|
#match .arena::after {
|
|
inset: var(--floor-line) -25% -100dvh; width: 150%; height: auto; border: 0; border-radius: 0;
|
|
background: repeating-linear-gradient(174deg, transparent 0 55px, #60695512 56px 57px, transparent 58px 100px);
|
|
}
|
|
#match .arena-floor {
|
|
inset: var(--floor-line) 0 0; width: 100%; height: auto; border-radius: 0;
|
|
background: transparent; border-top: 2px solid #69756838;
|
|
}
|
|
/* Fighter slots stay fixed so effects and the controls share the same coordinates. */
|
|
#match .fighter { position: static; width: 43%; }
|
|
#match .avatar, #match[data-phase=finished] .avatar {
|
|
width: var(--fighter-size);
|
|
max-width: none; margin: 0; left: 50%; translate: -50% 0;
|
|
}
|
|
#match .fighter-caption { height: 30px; margin: 8px 0 0; }
|
|
#match .energy { min-width: 0; border: 0; padding: 0 0 8px; background: transparent; gap: 6px; justify-content: center; }
|
|
#match .energy-count { font-size: 24px; font-weight: 900; }
|
|
#match .energy > svg { width: 22px; height: 22px; color: #8c633e; }
|
|
#match .energy-change { position: static; margin-left: 6px; font-size: 18px; }
|
|
#match .match-top { position: absolute; inset: 0; z-index: 15; margin: 0; pointer-events: none; }
|
|
#match .match-title {
|
|
position: absolute; top: calc(24px + env(safe-area-inset-top)); left: 50%;
|
|
transform: translateX(-50%); gap: 10px; white-space: nowrap;
|
|
}
|
|
#match .mode-label { background: transparent; color: #59665d; padding: 0; font-size: 11px; font-weight: 600; }
|
|
#match .turn-heading { font-size: 17px; letter-spacing: -.5px; }
|
|
#match .timing {
|
|
position: absolute; top: calc(54px + env(safe-area-inset-top)); left: 50%;
|
|
transform: translateX(-50%); width: 220px; min-height: 37px; padding: 0 0 13px;
|
|
z-index: 12; font-size: 11px; align-items: center; gap: 8px;
|
|
}
|
|
#match .time-label { font-size: 16px; white-space: nowrap; }
|
|
#match .time-track { bottom: 0; height: 4px; border-radius: 0; background: #39493c20; }
|
|
#match .time-track span { border-radius: 0; background: #a85039; }
|
|
#match[data-locked=true] .time-track span { background: #557b85; }
|
|
#match .timing[data-urgent=true] .time-track span { background: #c04128; }
|
|
#match .match-menu {
|
|
pointer-events: auto;
|
|
position: absolute; top: calc(25px + env(safe-area-inset-top));
|
|
right: max(var(--edge), env(safe-area-inset-right));
|
|
}
|
|
#match .match-menu summary {
|
|
display: grid; place-items: center; list-style: none; cursor: pointer;
|
|
min-width: 52px; min-height: 44px; padding: 8px 12px;
|
|
border: 1px solid #52615655; border-radius: 3px; background: #f4f0e3;
|
|
font-size: 12px; font-weight: 700;
|
|
}
|
|
#match .match-menu summary::-webkit-details-marker { display: none; }
|
|
#match .match-menu summary:focus-visible { outline: 3px solid #266acc; outline-offset: 4px; }
|
|
#match .match-menu[open] summary { background: #303c38; color: #fff9e9; }
|
|
#match .match-menu-items {
|
|
position: absolute; top: calc(100% + 8px); right: 0; width: 132px;
|
|
padding: 6px; background: #f4f0e3; border: 1px solid #697568;
|
|
box-shadow: 3px 4px 0 #303c3820;
|
|
}
|
|
#match .match-menu-items button {
|
|
display: block; width: 100%; min-height: 44px; border: 0; border-radius: 0;
|
|
color: #303c38; text-align: left;
|
|
}
|
|
#match .duel-cue, #match[data-phase=countdown] .duel-cue { top: 43%; }
|
|
#match:not([data-phase=countdown]) .versus { display: none; }
|
|
#match[data-phase=countdown] .countdown-number { border-radius: 3px; }
|
|
#match .clash-label { top: 30%; }
|
|
#match .player-controls {
|
|
position: relative; grid-area: 2 / 1; justify-self: start; z-index: 12;
|
|
left: var(--self-position); translate: -50% 0;
|
|
width: min(640px, calc(50% - 24px));
|
|
margin-bottom: max(20px, env(safe-area-inset-bottom));
|
|
}
|
|
#match .action-buttons {
|
|
position: relative; width: 100%;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
|
|
margin: 0; padding: 8px;
|
|
border: 1px solid #3f493e; border-radius: 4px; background: #303a33;
|
|
box-shadow: 0 4px 0 #202a2580;
|
|
}
|
|
#match .action-buttons button {
|
|
display: flex; flex-direction: column; grid-column: auto; gap: 5px;
|
|
min-height: 86px; padding: 10px 4px; text-align: center;
|
|
border: 1px solid #dfdac8; border-bottom: 3px solid #b0ab95; border-radius: 2px;
|
|
background: #f5f0de; color: #303a33; box-shadow: none;
|
|
}
|
|
#match .action-buttons .action-symbol {
|
|
grid-row: span 2; align-self: center; width: 28px; height: 28px;
|
|
}
|
|
#match .action-buttons strong { font-size: 13px; white-space: nowrap; }
|
|
#match .action-buttons small { color: #58604f; font-size: 10px; }
|
|
#match .action-buttons button:hover:not(:disabled) { background: #fff9e9; border-color: var(--action-color); transform: translateY(-2px); }
|
|
#match .action-buttons button:active:not(:disabled) { transform: translateY(1px); }
|
|
#match .action-buttons button:disabled { background: #b9bdb0; border-color: #a1a99b; color: #485146; }
|
|
#match .action-buttons button[data-unavailable=true] { background: #555e53; border-color: #737d6c; color: #dde0d5; }
|
|
#match .action-buttons button[data-unavailable=true] small { color: #dde0d5; }
|
|
#match .action-buttons button.chosen { background: #edd5a5; border-color: #c39244; color: #453a26; box-shadow: inset 0 0 0 1px #c39244; }
|
|
#match .chosen-mark { width: 20px; height: 20px; top: -6px; right: -4px; padding: 3px; border-width: 1px; }
|
|
#match .match-result {
|
|
position: relative; grid-area: 2 / 1; justify-self: center; z-index: 12;
|
|
width: min(480px, calc(100% - 32px));
|
|
max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
|
|
overflow-y: auto; margin: 0 0 max(20px, env(safe-area-inset-bottom)); padding: 8px 12px;
|
|
border: 0; border-radius: 0; box-shadow: none; background: transparent;
|
|
}
|
|
#match .result-stats { margin: 0; color: #414c3c; }
|
|
#match .match-result .split { margin-top: 12px; }
|
|
#match .match-result button { border-radius: 3px; }
|
|
#match .result-banner {
|
|
position: absolute; z-index: 10; top: calc(90px + env(safe-area-inset-top));
|
|
left: 50%; translate: -50% 0; width: calc(100% - 32px); text-align: center;
|
|
pointer-events: none;
|
|
}
|
|
#match .result-banner h2 {
|
|
margin: 0; font-size: clamp(80px, 11vw, 164px); font-weight: 950; font-style: italic;
|
|
line-height: 1; letter-spacing: -.065em; color: #ffd359;
|
|
-webkit-text-stroke: 2px #755120; paint-order: stroke fill;
|
|
text-shadow: 0 5px 0 #72501c, 0 10px 20px #543d2133;
|
|
}
|
|
#match .result-banner .finish-reason { margin: 14px 0 0; font-size: 13px; color: #4d5547; }
|
|
#match[data-outcome=loss] .result-banner h2 { color: #d78063; -webkit-text-stroke-color: #703d32; text-shadow: 0 5px 0 #703d32; }
|
|
#match:is([data-outcome=draw], [data-outcome=aborted]) .result-banner h2 { color: #e9eadc; -webkit-text-stroke-color: #50635d; text-shadow: 0 5px 0 #50635d; }
|
|
body:is([data-screen=match], [data-screen=result]) #notice:not(:empty) {
|
|
position: fixed; z-index: 18; top: calc(108px + env(safe-area-inset-top));
|
|
left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
|
|
margin: 0; padding: 10px 14px; background: #fff6e4; border: 1px solid #a85039;
|
|
}
|
|
body:is([data-screen=match], [data-screen=result]) #reconnect {
|
|
position: fixed; z-index: 18; top: calc(158px + env(safe-area-inset-top)); right: 16px;
|
|
min-height: 44px; margin: 0; border-radius: 3px;
|
|
}
|
|
@media (max-width: 760px) {
|
|
#match {
|
|
--edge: 16px; --stage-bottom: 16px;
|
|
--self-position: 25.09%;
|
|
--stage-top: calc(100px + env(safe-area-inset-top));
|
|
--fighter-size: min(60vw, calc((100cqh - 38px) * .866667), 360px);
|
|
}
|
|
#match[data-self="1"] { --self-position: 74.91%; }
|
|
#match[data-phase=finished] { --stage-top: calc(210px + env(safe-area-inset-top)); }
|
|
#match .arena { padding-inline: 3vw; }
|
|
#match .fighter { width: 47%; }
|
|
#match .match-title { top: calc(24px + env(safe-area-inset-top)); left: var(--edge); transform: none; }
|
|
#match .turn-heading { font-size: 16px; }
|
|
#match .match-menu { top: calc(12px + env(safe-area-inset-top)); }
|
|
#match .energy { gap: 3px; }
|
|
#match .energy-count { font-size: 25px; }
|
|
#match .energy > svg { width: 18px; height: 18px; }
|
|
#match .timing { top: calc(65px + env(safe-area-inset-top)); width: 160px; min-height: 30px; flex-direction: row; gap: 3px; padding-bottom: 9px; }
|
|
#match .selection-status { font-size: 10px; }
|
|
#match .time-label { font-size: 14px; }
|
|
#match .player-controls { width: calc(50% - 16px); margin-bottom: max(12px, env(safe-area-inset-bottom)); }
|
|
#match .action-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 6px; }
|
|
#match .action-buttons button {
|
|
grid-column: auto; display: flex; flex-direction: column; gap: 4px;
|
|
min-height: 56px; padding: 8px 2px; text-align: center;
|
|
}
|
|
#match .action-buttons .action-symbol { display: none; }
|
|
#match .action-buttons button:nth-child(n+4) {
|
|
grid-column: auto; display: flex; flex-direction: column;
|
|
min-height: 56px; text-align: center; padding: 8px 2px;
|
|
}
|
|
#match .action-buttons button:last-child { grid-column: 1 / -1; }
|
|
#match .action-buttons strong { font-size: 11px; }
|
|
#match .action-buttons small { font-size: 9px; white-space: normal; }
|
|
#match .fighter-caption { font-size: 10px; }
|
|
#match .clash-label { top: 32%; font-size: 18px; }
|
|
#match .match-result { margin-bottom: max(12px, env(safe-area-inset-bottom)); padding: 8px; }
|
|
#match .result-banner { top: calc(82px + env(safe-area-inset-top)); }
|
|
#match .result-banner h2 { font-size: clamp(60px, 18vw, 100px); }
|
|
#match .match-result .split button { min-height: 44px; font-size: 13px; }
|
|
}
|
|
@media (max-height: 500px) and (min-width: 521px) {
|
|
#match {
|
|
--edge: max(16px, env(safe-area-inset-left)); --stage-bottom: 8px;
|
|
--stage-top: calc(78px + env(safe-area-inset-top));
|
|
--self-position: 28.34%;
|
|
--fighter-size: min(26vw, calc((100cqh - 38px) * .866667), 260px);
|
|
}
|
|
#match[data-self="1"] { --self-position: 71.66%; }
|
|
#match[data-phase=finished] { --stage-top: calc(96px + env(safe-area-inset-top)); }
|
|
#match .arena { padding-inline: 12vw; }
|
|
#match .match-title { top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); }
|
|
#match .match-menu { top: calc(10px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
|
|
#match .timing { top: calc(38px + env(safe-area-inset-top)); width: 120px; min-height: 33px; flex-direction: row; padding-bottom: 8px; }
|
|
#match .player-controls { width: calc(50% - 24px); margin-bottom: max(8px, env(safe-area-inset-bottom)); }
|
|
#match .energy { padding-bottom: 4px; }
|
|
#match .energy-count { font-size: 18px; }
|
|
#match .action-buttons { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 5px; gap: 4px; }
|
|
#match .action-buttons button, #match .action-buttons button:nth-child(n+4) {
|
|
display: flex; grid-column: auto; flex-direction: column; min-height: 56px; padding: 7px 2px; gap: 4px; text-align: center;
|
|
}
|
|
#match .action-buttons .action-symbol, #match .action-buttons button:nth-child(n+4) .action-symbol { display: none; }
|
|
#match .action-buttons strong { font-size: 10px; white-space: normal; overflow-wrap: anywhere; }
|
|
#match .action-buttons small { font-size: 9px; white-space: normal; }
|
|
#match .duel-cue, #match[data-phase=countdown] .duel-cue { top: 44%; }
|
|
#match .clash-label { top: 25%; font-size: 17px; }
|
|
#match .match-result {
|
|
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px;
|
|
width: min(650px, calc(100% - 32px)); margin-bottom: max(8px, env(safe-area-inset-bottom));
|
|
max-height: calc(100dvh - 160px - env(safe-area-inset-top)); padding: 6px 10px;
|
|
}
|
|
#match .result-stats { margin: 0; font-size: 11px; }
|
|
#match .match-result .split { grid-area: 1 / 2; margin: 0; gap: 8px; }
|
|
#match .match-result .split button { min-height: 44px; padding: 8px; font-size: 12px; }
|
|
#match :is(.save-status, .rematch-status) { grid-column: 1 / -1; margin: 0; font-size: 10px; line-height: 1.3; }
|
|
#match .result-banner { top: calc(56px + env(safe-area-inset-top)); }
|
|
#match .result-banner h2 { font-size: 48px; }
|
|
#match .result-banner .finish-reason { margin-top: 8px; font-size: 11px; }
|
|
}
|
|
@media (max-height: 500px) and (min-width: 521px) and (max-width: 760px) {
|
|
#match { --self-position: 29.86%; }
|
|
#match[data-self="1"] { --self-position: 70.14%; }
|
|
}
|