/* Official v0.3.2 increment merged with this server visual rules; GPL-3.0-or-later. */
:root {
  color-scheme: dark;
  --bg-0: #0c0f0e;
  --bg-1: #141816;
  --bg-2: #1e2421;
  --bg-3: #252c29;
  --bg-4: #2d3632;
  --bg-glass: rgba(16, 20, 18, .82);
  --line: #2f3a35;
  --line-2: #3e4b45;
  --line-3: #58675f;
  --mint-500: #4ed8af;
  --mint-400: #59f4ca;
  --mint-600: #35d8b4;
  --mint-glow: #17f9b7;
  --mint-700: #2a9e7f;
  --mint-800: #145443;
  --mint-900: #0d2c24;
  --mint-a10: rgba(78, 216, 175, .10);
  --mint-a20: rgba(78, 216, 175, .20);
  --mint-a35: rgba(78, 216, 175, .35);
  --gold: #ffc600;
  --gold-2: #f2bd3e;
  --gold-a20: rgba(255, 198, 0, .2);
  --amber: #f6a329;
  --amber-a20: rgba(246, 163, 41, .2);
  --orange: #e85a1a;
  --orange-hi: #ff7a33;
  --orange-a20: rgba(232, 90, 26, .22);
  --red: #e73118;
  --red-abyss: #ff0024;
  --red-premium: #ff5454;
  --red-a20: rgba(231, 49, 24, .22);
  --ice: #9fd4ff;
  --ice-a20: rgba(159, 212, 255, .2);
  --ice-900: #14283a;
  --text-hi: #f2f2f2;
  --text-md: #c3cbc7;
  --text-lo: #8a948f;
  --text-dim: #5d6863;
  --text-on-mint: #06110d;
  --diff-funny: #f6a329;
  --diff-normal: #e85a1a;
  --diff-hard: #e73118;
  --diff-abyss: #ff0024;
  --tier-1: #a8a8a8;
  --tier-2: #f2f2f2;
  --tier-3: #34e6b2;
  --tier-4: #34b8d8;
  --tier-5: #f8bf00;
  --tier-6: #f88000;
  --lv-1: #434343;
  --lv-2: #626654;
  --lv-3: #445760;
  --lv-4: #615b74;
  --lv-5: #6c5e41;
  --lv-6: #5d341e;
  --cjk-faces: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC';
  --font-cjk: var(--cjk-faces), sans-serif;
  --font-num: 'Bender', 'Rajdhani', 'Oxanium', var(--cjk-faces), sans-serif;
  --font-display: 'Novecento', 'Novecento Wide', 'Oxanium', 'Rajdhani', var(--cjk-faces), sans-serif;
  --font-mono: 'Bender', 'Oxanium', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.6, 0, .3, 1);
  --t-fast: 150ms;
  --t-med: 200ms;
  --t-slow: 250ms;
  --z-screen: 1;
  --z-banner: 40;
  --z-conn: 75;
  --z-modal: 80;
  --z-toast: 90;
  --z-tooltip: 95;
  --z-rotate: 100;
  --bk-c: var(--mint-500);
  --bk-l: .14rem;
  --bk-w: 2px;
}

:root:lang(ja) {
  --cjk-faces: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', 'Noto Sans SC', 'Microsoft YaHei';
}

:root:lang(ko) {
  --cjk-faces: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Noto Sans SC', 'Microsoft YaHei';
}

:root:lang(zh-TW) {
  --cjk-faces: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans CJK TC', 'Noto Sans SC', 'Microsoft YaHei';
}

html {
  font-size: calc(clamp(40px, min(calc(100vw / 19.2), calc(100svh / 10.8)), 240px) * var(--sp-ui, 1));
  text-size-adjust: 100%;
  height: 100%;
  background: var(--bg-0);
}

:root {
  --ui: 1;
}

@media (max-height: 600px) and (pointer: coarse), (max-width: 767px) {
  :root.sp-in-match[data-ui="auto"] {
    --ui: .8;
  }
}

:root.sp-in-match[data-ui="70"] {
  --ui: .7;
}

:root.sp-in-match[data-ui="80"] {
  --ui: .8;
}

:root.sp-in-match[data-ui="90"] {
  --ui: .9;
}

:root.sp-in-match[data-ui="110"] {
  --ui: 1.1;
}

:root.sp-in-match[data-ui="120"] {
  --ui: 1.2;
}

html.sp-in-match {
  font-size: calc(clamp(40px, min(calc(100vw / 19.2), calc(100vh / 10.8)), 240px) * var(--ui));
}

@supports (height: 100svh) {
  html.sp-in-match {
    font-size: calc(clamp(40px, min(calc(100vw / 19.2), calc(100svh / 10.8)), 240px) * var(--ui));
  }
}

html[data-fit] {
  font-size: clamp(40px, min(calc((100vw - var(--fit-l, 0px) - var(--fit-r, 0px)) / 19.2), calc((100vh - var(--fit-t, 0px) - var(--fit-b, 0px)) / 10.8)), 240px);
}

html[data-fit].sp-in-match {
  font-size: calc(clamp(40px, min(calc((100vw - var(--fit-l, 0px) - var(--fit-r, 0px)) / 19.2), calc((100vh - var(--fit-t, 0px) - var(--fit-b, 0px)) / 10.8)), 240px) * var(--ui));
}

@supports (height: 100svh) {
  html[data-fit] {
    font-size: clamp(40px, min(calc((100vw - var(--fit-l, 0px) - var(--fit-r, 0px)) / 19.2), calc((100svh - var(--fit-t, 0px) - var(--fit-b, 0px)) / 10.8)), 240px);
  }

  html[data-fit].sp-in-match {
    font-size: calc(clamp(40px, min(calc((100vw - var(--fit-l, 0px) - var(--fit-r, 0px)) / 19.2), calc((100svh - var(--fit-t, 0px) - var(--fit-b, 0px)) / 10.8)), 240px) * var(--ui));
  }
}

:root {
  --t: 1rem;
  --t-step: calc((var(--t) - 64px) / 12);
}

:root[data-text="md"] {
  --t: max(1rem, calc(64px * var(--ui)));
}

:root[data-text="lg"] {
  --t: max(calc(1rem * 1.15), calc(76px * var(--ui)));
}

:root[data-text="xl"] {
  --t: max(calc(1rem * 1.3), calc(88px * var(--ui)));
}

*, ::before, ::after {
  box-sizing: border-box;
}

body {
  margin: 0px;
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--text-hi);
  font-family: var(--font-cjk);
  font-size: calc(.18 * var(--t));
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

input, textarea, [contenteditable], .selectable {
  user-select: text;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
}

h1, h2, h3, h4, p {
  margin: 0px;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 2px;
}

::selection {
  background: var(--mint-500);
  color: var(--text-on-mint);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-2);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mint-700);
}

.sr-only {
  width: 1px;
  height: 1px;
  padding: 0px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
  border: 0px;
  position: absolute !important;
}

.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.micro {
  font-family: var(--font-display);
  font-size: calc(.11 * var(--t));
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.micro--mint {
  color: var(--mint-700);
}

.micro--gold {
  color: rgb(156, 124, 22);
}

.micro--hi {
  color: var(--text-lo);
}

.t-mint {
  color: var(--mint-500);
}

.t-gold {
  color: var(--gold);
}

.t-amber {
  color: var(--amber);
}

.t-orange {
  color: var(--orange-hi);
}

.t-red {
  color: var(--red-premium);
}

.t-ice {
  color: var(--ice);
}

.t-lo {
  color: var(--text-lo);
}

.t-dim {
  color: var(--text-dim);
}

.brackets {
  position: relative;
}

.brackets::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(var(--bk-c), var(--bk-c)) top left / var(--bk-l) var(--bk-w) no-repeat,
    linear-gradient(var(--bk-c), var(--bk-c)) top left / var(--bk-w) var(--bk-l) no-repeat,
    linear-gradient(var(--bk-c), var(--bk-c)) top right / var(--bk-l) var(--bk-w) no-repeat,
    linear-gradient(var(--bk-c), var(--bk-c)) top right / var(--bk-w) var(--bk-l) no-repeat,
    linear-gradient(var(--bk-c), var(--bk-c)) bottom left / var(--bk-l) var(--bk-w) no-repeat,
    linear-gradient(var(--bk-c), var(--bk-c)) bottom left / var(--bk-w) var(--bk-l) no-repeat,
    linear-gradient(var(--bk-c), var(--bk-c)) bottom right / var(--bk-l) var(--bk-w) no-repeat,
    linear-gradient(var(--bk-c), var(--bk-c)) bottom right / var(--bk-w) var(--bk-l) no-repeat;
  transition: opacity var(--t-med) var(--ease-out);
}

.fx-scan {
  position: relative;
}

.fx-scan::before {
  content: "";
  position: absolute;
  inset: 0px;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.027) 0px, rgba(255, 255, 255, 0.027) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: screen;
  z-index: 0;
}

.fx-noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8  0 0 0 0 .9  0 0 0 0 .85  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>");
}

.app-root {
  position: fixed;
  inset: 0px;
  overflow: hidden;
  isolation: isolate;
}

.app-bg {
  position: absolute;
  inset: 0px;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 110%, rgba(23, 249, 183, 0.1), transparent 55%), radial-gradient(80% 60% at 50% 40%, rgba(40, 60, 52, 0.35), transparent 70%), linear-gradient(rgb(11, 14, 13) 0%, rgb(14, 19, 17) 55%, rgb(10, 13, 12) 100%);
}

.app-bg::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: linear-gradient(rgba(78, 216, 175, 0.043) 1px, transparent 1px) 0px 0px / 0.8rem 0.8rem, linear-gradient(90deg, rgba(78, 216, 175, 0.043) 1px, transparent 1px) 0px 0px / 0.8rem 0.8rem;
  mask-image: radial-gradient(90% 80%, rgb(0, 0, 0) 30%, transparent 85%);
}

.app-bg::after {
  content: "";
  position: absolute;
  inset: 0px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 3px), radial-gradient(130% 100%, transparent 55%, rgba(0, 0, 0, 0.65) 100%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .75  0 0 0 0 .85  0 0 0 0 .8  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/></svg>");
  opacity: 0.9;
}

.screen {
  position: absolute;
  inset: 0px;
  z-index: var(--z-screen);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: screen-in var(--t-slow) var(--ease-out) backwards;
}

@keyframes screen-in {
  0% {
    opacity: 0;
  }
}

.screen__scroll {
  flex: 1 1 auto;
  min-height: 0px;
  overflow: auto;
}

.cross {
  position: absolute;
  width: 0.22rem;
  height: 0.22rem;
  pointer-events: none;
  background: linear-gradient(var(--mint-700), var(--mint-700)) center / 100% 1px no-repeat,
    linear-gradient(var(--mint-700), var(--mint-700)) center / 1px 100% no-repeat;
  opacity: 0.7;
}

.boot {
  position: fixed;
  inset: 0px;
  display: grid;
  place-items: center;
  background: var(--bg-0);
  z-index: 200;
  transition: opacity 250ms;
}

.boot.is-done {
  opacity: 0;
  pointer-events: none;
}

.boot__inner {
  display: grid;
  justify-items: center;
  gap: 0.18rem;
}

.boot__hex {
  width: 0.64rem;
  height: 0.64rem;
  border: 2px solid var(--mint-500);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0px 50%);
  animation: 1.4s linear 0s infinite normal none running boot-spin;
  background: linear-gradient(135deg, transparent 45%, rgba(78, 216, 175, 0.35) 50%, transparent 55%);
}

.boot__text {
  font-family: var(--font-display);
  font-size: 0.13rem;
  letter-spacing: 0.4em;
  color: var(--mint-700);
}

.boot__err {
  max-width: 6rem;
  text-align: center;
  color: var(--text-lo);
  font-size: 0.16rem;
}

@keyframes boot-spin {
  100% {
    transform: rotate(360deg);
  }
}

.rotate-hint {
  position: fixed;
  inset: 0px;
  z-index: var(--z-rotate);
  display: none;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background: var(--bg-0);
  color: var(--text-md);
  font-size: 16px;
}

.rotate-hint__phone {
  width: 54px;
  height: 90px;
  border: 3px solid var(--mint-500);
  border-radius: 9px;
  position: relative;
  animation: rotate-phone 2.4s var(--ease-in-out) infinite;
  box-shadow: rgba(23, 249, 183, 0.25) 0px 0px 24px;
}

.rotate-hint__phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 14px;
  height: 3px;
  margin-left: -7px;
  background: var(--mint-500);
  border-radius: 2px;
}

.rotate-hint__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-hi);
}

.rotate-hint__micro {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--mint-700);
}

@keyframes rotate-phone {
  0%, 20% {
    transform: rotate(0deg);
  }

  50%, 75% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@media (orientation: portrait) and (max-width: 1024px) {
  .sp-rotatable.sp-in-match .rotate-hint {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* An explicit global size replaces the legacy battle preference instead of multiplying it. */
:root.sp-in-match[data-ui-fit] { --ui: var(--sp-ui, 1); }
html[data-fit]:not(.sp-in-match) { font-size: calc(clamp(40px, min(calc((100vw - var(--fit-l, 0px) - var(--fit-r, 0px)) / 19.2), calc((100svh - var(--fit-t, 0px) - var(--fit-b, 0px)) / 10.8)), 240px) * var(--sp-ui, 1)); }