## { background-image: url('./images/AngChamps logo screen.png'); background-position: center; background-size: cover; background-repeat: no-repeat; } ## > .playerRegister { width: min(960px, 50%); padding: 32px; border-radius: 32px; background-color: rgba(var(--cbdm) / 30%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); translate: 0 10%; user-select: none; } ## .playerSide { } ## .playerSide > input { width: 100%; padding: 8px; border-style: none; border-radius: 6px; outline-width: 0; background-color: transparent; text-shadow: 0 0 1px var(--color-text-darker), 0 0 1px var(--color-text-darker), 0 0 1px var(--color-text-darker); transition-timing-function: ease; transition-duration: 0.2s; will-change: auto; } ## .playerSide > input:focus { outline-style: ridge; outline-width: 2px; background-color: rgb(var(--cbbr) / 30%); } ## .playerSide > input::placeholder { text-shadow: 0 0 1px var(--color-text-inverse), 0 0 1px var(--color-text-inverse), 0 0 1px var(--color-text-inverse); } ## .playerSide > input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } ## .playerSide > input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } ## .playerSide.red { } ## .playerSide.red > input { color: var(--csrlr); outline-color: var(--csrd); } ## .playerSide.red > input::placeholder { color: var(--csr); } ## .playerSide.blue { } ## .playerSide.blue > input { color: var(--csblr); outline-color: var(--csbd); } ## .playerSide.blue > input::placeholder { color: var(--csb); } ## .playerRegister > .float_bottom > div > button { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); filter: drop-shadow(0 0 2px var(--color-text-inverse)) drop-shadow(0 0 2px var(--color-text-inverse)); } ## .playerRegister > .float_bottom > div > button.reset { } ## .playerRegister > .float_bottom > div > button.startGame { }

## { background-image: url('./images/cartethyia theme.png'); background-position: 45% center; background-size: cover; background-repeat: no-repeat; background-blend-mode: overlay; } ## > .poolBlock { bottom: 64px; user-select: none; } ## > .poolBlock > .pick_pool { --area-width: 1020px; --char-icon-size: 64px; --char-card-width-max: 60px; --char-card-height-max: 90px; display: flex; flex-flow: column nowrap; row-gap: 16px; } ## > .poolBlock > .pick_pool > .character_grade_area { min-width: var(--area-width); max-width: var(--area-width); } ## > .poolBlock > .pick_pool > .character_grade_area > ul.each_grade_pool { } ## > .poolBlock > .pick_pool > .character_grade_area > ul.each_grade_pool > li.character { }

Red

100

Blue

100

|pickCardText||pickCardText||name|

|pickCardText||pickCardText||name|

|pickCardText||pickCardText||name|

## { } ## > .hologramSelectionPool { display: flex; flex-flow: column nowrap; top: 64px; width: 860px; height: 940px; justify-content: space-between; align-items: center; color: var(--color-text-darken); user-select: none; } ## > .hologramSelectionPool > ul.holograms { flex-flow: row wrap; column-gap: var(--basic-ui-inset-h-half); justify-content: center; align-items: flex-start; } ## > .hologramSelectionPool > ul.holograms > li { } ## > .hologramSelectionPool > ul.holograms > li > .panel { width: 200px; background-color: rgba(var(--cbdm) / 95%); cursor: pointer; } ## > .hologramSelectionPool > ul.holograms > li:hover > .panel { background-color: rgba(var(--cbdm) / 20%); } ## > .hologramSelectionPool > ul.holograms > li:active > .panel { background-color: rgba(var(--cbdm) / 75%); } ## > .hologramSelectionPool > ul.holograms > li[data-picked="1"] > .panel { background-color: rgba(var(--cbdm) / 0%); } ## > .hologramSelectionPool > ul.holograms > li[data-banned="1"] > .panel { background-color: rgba(var(--cbdm) / 20%); opacity: 0.4; cursor: not-allowed; } ## > .hologramSelectedPanel { color: var(--color-text-darken); transition-timing-function: ease; transition-duration: 1s; will-change: auto; user-select: none; } ## > .hologramSelectedPanel > ul.hologramSelected { transition-timing-function: ease; transition-duration: 1s; will-change: auto; } ## > .hologramSelectedPanel > ul.hologramSelected > li { } ## > .hologramSelectedPanel > ul.hologramSelected > li > h1 { } ## > .hologramSelectedPanel > ul.hologramSelected > li > .panel { transition-timing-function: ease; transition-duration: 1s; will-change: auto; } ## > .hologramSelectedPanel > ul.hologramSelected > li > .panel[data-picked=""] { background-position-x: 250%; } ## > .hologramSelectedPanel > ul.hologramSelected > li > .panel > .title { transition-timing-function: ease; transition-duration: 0.5s; will-change: auto; } ## > .hologramSelectedPanel > ul.hologramSelected > li > .panel[data-picked=""] > .title { opacity: 0; } ## > .hologramSelectedPanel > ul.hologramSelected > li > .panel > ul.resistances { transition-timing-function: ease; transition-duration: 0.5s; will-change: auto; } ## > .hologramSelectedPanel > ul.hologramSelected > li > .panel[data-picked=""] > ul.resistances { opacity: 0; } ## > .hologramSelectedPanel > ul.hologramSelected > li > .panel > ul.resistances > li { }

|title|
- |element_name|

|title|
- |element_name|

Game 1
홀로그램 타이틀
- |element_name|
Game 2
홀로그램 타이틀
- |element_name|
Game 3
홀로그램 타이틀
- |element_name|

## { } ## > .matchBoard { top: 466px; user-select: none; } ## > .matchBoard > ul.matchGames { display: flex; flex-flow: column nowrap; list-style: none; margin: 0; padding: 0; row-gap: 196px; font-size: 1.25rem; font-weight: 600; text-shadow: 1px 1px 1px var(--color-text-darken); filter: drop-shadow(0 0 4px var(--color-text-inverse)) drop-shadow(0 0 4px var(--color-text-inverse)); } ## > .matchBoard > ul.matchGames > li.game { position: relative; display: flex; flex-flow: row nowrap; width: 420px; justify-content: space-between; } ## > .matchBoard > ul.matchGames > li.game::before { content: ''; position: absolute; top: -122px; bottom: -72px; left: 0; right: 0; } ## > .matchBoard > ul.matchGames > li.game > .player_side { position: relative; color: rgb(var(--signature-color-highlighter)); } ## > .matchBoard > ul.matchGames > li.game > .player_side > * { position: absolute; } ## > .matchBoard > ul.matchGames > li.game > .player_side input[type="radio"] { position: absolute; width: 0; height: 0; margin: 0; opacity: 0; } ## > .matchBoard > ul.matchGames > li.game > .player_side > ul { list-style: none; margin: 0; padding: 0; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .first { top: -32px; font-weight: 300; opacity: 0; cursor: pointer; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; } ## > .matchBoard > ul.matchGames > li.game:hover > .player_side > .first { opacity: 0.7; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .first:active { color: rgb(var(--signature-color-lighter)); } ## > .matchBoard > ul.matchGames > li.game > .player_side > .first:has(> input:checked) { font-weight: 800; opacity: 1; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .level { display: flex; flex-flow: var(--flex-row-direction-reverse) nowrap; font-size: 22px; font-weight: 300; color: var(--color-text); } ## > .matchBoard > ul.matchGames > li.game > .player_side > .level > li { opacity: 0; cursor: pointer; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; } ## > .matchBoard > ul.matchGames > li.game:hover > .player_side > .level > li { opacity: 0.7; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .level > li:active { color: rgb(var(--signature-color-lighter)); } ## > .matchBoard > ul.matchGames > li.game > .player_side > .level[data-level="1"] > li[data-level="1"] { font-weight: 800; opacity: 1; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .level[data-level="2"] > li[data-level="2"] { font-weight: 800; opacity: 1; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .level[data-level="3"] > li[data-level="3"] { font-weight: 800; opacity: 1; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .level[data-level="4"] > li[data-level="4"] { font-weight: 800; opacity: 1; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .level[data-level="5"] > li[data-level="5"] { font-weight: 800; opacity: 1; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .level[data-level="6"] > li[data-level="6"] { font-weight: 800; opacity: 1; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .clear { display: flex; flex-flow: row nowrap; top: 26px; align-items: center; font-size: 32px; font-weight: 600; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .clear > input { width: 60px; border-style: none; background-color: transparent; color: rgb(var(--signature-color-highlighter)); font-size: 32px; font-weight: 600; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .clear > input.clear_min { text-align: right; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .clear > input.clear_sec { margin-left: 12px; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .clear > span { } ## > .matchBoard > ul.matchGames > li.game > .player_side > .fail { top: 0; font-weight: 200; opacity: 0; cursor: pointer; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; } ## > .matchBoard > ul.matchGames > li.game:hover > .player_side > .fail { opacity: 0.7; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .fail:active { color: rgb(var(--signature-color-lighter)); } ## > .matchBoard > ul.matchGames > li.game > .player_side > .wins { top: 34px; font-weight: 300; opacity: 0; cursor: pointer; transition-timing-function: ease; transition-duration: 0.3s; will-change: auto; } ## > .matchBoard > ul.matchGames > li.game:hover > .player_side > .wins { opacity: 0.7; } ## > .matchBoard > ul.matchGames > li.game > .player_side > .wins:active { color: rgb(var(--signature-color-lighter)); } ## > .matchBoard > ul.matchGames > li.game > .player_side > .wins:has(> input:checked) { font-weight: 800; opacity: 1; } ## > .matchBoard > ul.matchGames > li.game > .player_side.red { } ## > .matchBoard > ul.matchGames > li.game > .player_side.red > .first { left: 0; } ## > .matchBoard > ul.matchGames > li.game > .player_side.red > .level { left: 58px; } ## > .matchBoard > ul.matchGames > li.game > .player_side.red > .clear { left: 56px; } ## > .matchBoard > ul.matchGames > li.game > .player_side.red > .fail { left: 0; } ## > .matchBoard > ul.matchGames > li.game > .player_side.red > .wins { left: 0; } ## > .matchBoard > ul.matchGames > li.game > .player_side.blue { } ## > .matchBoard > ul.matchGames > li.game > .player_side.blue > .first { right: 0; } ## > .matchBoard > ul.matchGames > li.game > .player_side.blue > .level { right: 58px; } ## > .matchBoard > ul.matchGames > li.game > .player_side.blue > .clear { right: 42px; } ## > .matchBoard > ul.matchGames > li.game > .player_side.blue > .fail { right: 0; } ## > .matchBoard > ul.matchGames > li.game > .player_side.blue > .wins { right: 0; }

activity 2
(static)
article 1

article 2
(static)
article 2

article 3
(static)
article 3

Game 1

Game 2

Game 3