fix: mobile team card width and modularize CSS with documentation

2026-05-24 19:15:31 +09:00
parent 43383bb833
commit 36fd25731a
11 changed files with 2117 additions and 1978 deletions
@@ -0,0 +1,129 @@
+:root {
+  color-scheme: dark;
+  font-family:
+    Inter, Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+  background: #080a07;
+  color: #fff5db;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-width: 320px;
+  min-height: 100%;
+  background: #080a07;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+button {
+  border: 0;
+  cursor: pointer;
+}
+
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+  outline: 3px solid rgb(238 185 73 / 0.46);
+  outline-offset: 3px;
+}
+
+#app {
+  --arena-gap: 18px;
+  --score-band-height: 134px;
+  --score-panel-left: 14px;
+  --score-panel-width: 260px;
+  --score-rail-width: calc(var(--score-panel-left) + var(--score-panel-width));
+  --drawer-width: min(430px, 100vw);
+  --drawer-live-width: min(340px, calc(100vw - 48px));
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgb(8 10 7 / 0.18), rgb(3 5 4 / 0.84)),
+    #080a07;
+}
+
+#app.match-live {
+  --drawer-width: var(--drawer-live-width);
+}
+
+.arena-shell {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  background: #090b08;
+}
+
+.arena-shell::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background:
+    radial-gradient(circle at 50% 50%, rgb(255 211 122 / 0.06), transparent 42%),
+    linear-gradient(90deg, rgb(3 5 4 / 0.48), rgb(3 5 4 / 0.08) 45%, rgb(3 5 4 / 0.48)),
+    linear-gradient(180deg, rgb(3 5 4 / 0.08), rgb(3 5 4 / 0.5));
+  pointer-events: none;
+  transition:
+    background 520ms ease,
+    opacity 520ms ease;
+}
+
+#app.match-live .arena-shell::before {
+  opacity: 0.24;
+}
+
+#app.match-live .arena-shell {
+  place-items: center;
+}
+
+#game {
+  position: relative;
+  z-index: 0;
+  width: max(100vw, 100vh);
+  height: max(100vw, 100vh);
+  overflow: hidden;
+  opacity: 0.68;
+  filter: saturate(1) contrast(1.08) brightness(1.08);
+  transform: scale(1.04);
+  transform-origin: center;
+  transition:
+    width 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    height 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    opacity 520ms ease,
+    filter 520ms ease,
+    transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+#app.match-live #game {
+  width: min(100vw, 100vh);
+  height: min(100vw, 100vh);
+  margin-left: 0;
+  opacity: 1;
+  filter: none;
+  transform: scale(1);
+}
+
+#game canvas {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+  image-rendering: pixelated;
+}