:root {
  --color-orange: orange;
  --color-yellow: #ffff00;
  --color-blue: aquamarine;
  --color-black: #000;
  --color-red: #C00;
  --color-green: chartreuse;
  --body-padding: 20px;
  --app-height: 100vh;
  --flash-time: 0.4s;
}
body[data-ex-mode="true"] {
  --flash-time: 0.1s;
}
@font-face {
  font-weight: 900;
  font-family: 'MAGI Display';
  src: url(fonts/magi-display.woff2) format('woff2');
}
html {
  font-size: 2em;
  line-height: 1.2;
  font-weight: 900;
  font-family: 'MAGI Display', 'Noto Serif JP', serif;
  background: var(--color-orange);
  color: var(--color-orange);
  text-align: center;
  overflow: hidden;
  font-variant-east-asian: proportional-width;
  -moz-font-feature-settings: "pwid";
  -webkit-font-feature-settings: "pwid";
  font-feature-settings: "pwid";
  -webkit-text-size-adjust: none;
}
@keyframes origin {
  100% {
    background-position: 1em 1em;
  }
}
body {
  background: var(--color-black);
  box-shadow: 0 0 0 var(--body-padding) var(--color-orange) inset;
  margin: 0;
  box-sizing: border-box;
  height: var(--app-height);
  position: relative;
  overflow: hidden;
}
body[data-status="voted"] {
  transition: none;
}
body[data-status="voted"][data-vote-status="resolve"] {
  color: var(--color-green);
  box-shadow: 0 0 0 var(--body-padding) var(--color-green) inset;
}
body[data-status="voted"][data-vote-status="reject"] {
  color: var(--color-red);
  box-shadow: 0 0 0 var(--body-padding) var(--color-red) inset;
}
.magi-box {
  margin: var(--body-padding);
  padding: var(--body-padding);
  position: relative;
  box-sizing: border-box;
  height: calc(100% - var(--body-padding) * 2);
  cursor: pointer;
}
html[data-device="iphone"],
html[data-device="ipad"],
html[data-device="ipod"],
html[data-device="ios"] {
  --app-height: -webkit-fill-available;
}
html[data-device="iphone"] body,
html[data-device="ipad"] body,
html[data-device="ipod"] body,
html[data-device="ios"] body {
  min-height: -webkit-fill-available;
}
html[data-device="iphone"] .magi-box,
html[data-device="ipad"] .magi-box,
html[data-device="ipod"] .magi-box,
html[data-device="ios"] .magi-box {
  height: -webkit-fill-available;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
a {
  color: currentColor;
  text-decoration: none;
}
::selection {
  background: none;
}
header:after {
  content: '';
  display: block;
  clear: both;
}
header h1 {
  font-size: 4em;
  display: inline-block;
  transform: scale(1, 0.8);
  position: relative;
  padding: 0 0.1em;
  margin: 0 0.05em;
  letter-spacing: 0.1em;
}
header h1:nth-child(1) {
  float: left;
}
header h1:nth-child(2) {
  float: right;
}
header h1:before,
header h1:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 0.5px;
}
header h1:before {
  top: 0;
  box-shadow: 0 0 0 2px currentColor, 0 -8px 0 0.1px var(--color-black), 0 -8px 0 2px currentColor;
}
header h1:after {
  bottom: 0;
  box-shadow: 0 0 0 2px currentColor, 0 8px 0 0.1px var(--color-black), 0 8px 0 2px currentColor;
}
.config-box {
  font-weight: 200;
  font-family: 'Neue Helvetica', Helvetica, sans-serif;
  font-size: 0.8em;
  text-align: left;
  padding: 2em 0.3em;
  text-transform: uppercase;
}
.config-box h4 {
  font-size: 3em;
  transform: scale(0.6, 1);
  transform-origin: 0 0;
}
.config-box p {
  line-height: 1.4;
  transform: scale(1, 1.4);
}
.config-box .reset {
  visibility: hidden;
  display: inline-block;
  margin: 1em 0;
  padding: 0 0.3em;
  line-height: 1.4;
  transform: scale(1);
  box-shadow: 0 0 0 0.1em currentColor;
}
[data-text]:before {
  content: attr(data-text);
}
[data-text="ERR"] {
  pointer-events: none;
}
.volume:after {
  content: '%';
}
.volume[data-text="1"]:before {
  content: '0.0000001';
}
.magi-logo {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 8em;
  height: 8em;
  line-height: 8em;
  border-radius: 9em;
  font-size: 2em;
  box-shadow: 0 0 0 0.18em currentColor;
  pointer-events: none;
}
.magi-logo:after {
  display: none;
  content: 'System';
  text-transform: uppercase;
  font-weight: 400;
  font-family: 'Neue Helvetica', Helvetica, sans-serif;
  position: absolute;
  top: 57%;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 1;
  font-size: 12px;
  opacity: 0;
  transform: scale(0.4);
}
.magi-item {
  width: 8em;
  height: 8em;
  display: inline-block;
  box-shadow: 0 0 0 0.1em var(--color-black), 0 0 0 0.4em currentColor, 0 0 0 0.5em var(--color-black);
  background: var(--color-blue);
  background: var(--color-green);
  text-align: center;
  padding: 0;
  font-family: 'Neue Helvetica', Helvetica, sans-serif;
  position: absolute;
  top: 50%;
}
.magi-item h2 {
  font-size: 4em;
  font-weight: 900;
  transform: scale(1.2, 1);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-black);
}
.magi-item h3 {
  font-size: 1em;
  line-height: 2em;
  letter-spacing: 0.1em;
  color: var(--color-black);
}
.magi-item.melchior {
  left: 50%;
  transform: translate(35%, 10%) rotate(-57deg);
}
.magi-item.melchior h2:before {
  content: '1';
}
.magi-item.malthasar {
  left: 50%;
  transform: translate(-50%, -135%);
}
.magi-item.malthasar h2:before {
  content: '2';
}
.magi-item.casper {
  right: 50%;
  transform: translate(-35%, 10%) rotate(57deg);
}
.magi-item.casper h2:before {
  content: '3';
}
.final-vote-status {
  position: absolute;
  font-size: 2.5em;
  top: 3.4em;
  right: 0.5em;
  line-height: 1;
  padding: 0.1em 0;
  visibility: hidden;
  box-shadow: 0 0 0 0.03em currentColor, 0 0 0 0.07em var(--color-black), 0 0 0 0.1em currentColor;
}
.final-vote-status:before {
  display: inline-block;
  transform: scale(0.85, 1);
}
.final-vote-status[data-status="reject"] {
  color: var(--color-red);
}
.final-vote-status[data-status="reject"]:before {
  content: '否定';
}
.final-vote-status[data-status="resolve"] {
  color: var(--color-green);
}
.final-vote-status[data-status="resolve"]:before {
  content: '承認';
}
body[data-status="voting"] .magi-box > * {
  pointer-events: none;
}
body[data-status="voting"] .magi-item {
  background: var(--color-green);
  animation: magi-flash var(--flash-time) infinite step-end;
}
body[data-status="voting"] .magi-item h2:before {
  font-size: 0.6em;
  font-family: 'MAGI Display', 'Noto Serif JP', serif;
  content: '承認';
  animation: value-flash var(--flash-time) infinite step-end;
}
body[data-status="voting"] .magi-item.melchior {
  animation-delay: 0.1s;
}
body[data-status="voting"] .magi-item.malthasar {
  animation-delay: 0.2s;
}
body[data-status="voting"] .magi-item.casper {
  animation-delay: 0.3s;
}
@keyframes magi-flash {
  50% {
    background-color: var(--color-red);
  }
}
@keyframes value-flash {
  50% {
    content: '否定';
  }
}
body[data-status="voting"] .final-vote-status {
  visibility: visible;
  animation: flash var(--flash-time) infinite step-end;
  color: var(--color-yellow);
}
body[data-status="voting"] .final-vote-status:before {
  content: '審議中';
}
@keyframes flash {
  60% {
    visibility: hidden;
  }
}
body[data-status="voted"] .reset {
  visibility: visible;
}
body[data-status="voted"] .final-vote-status {
  visibility: visible;
  margin: 0 0.5em;
}
body[data-status="voted"] .magi-item h2:before {
  font-size: 0.6em;
  font-family: 'MAGI Display', 'Noto Serif JP', serif;
}
body[data-status="voted"] .magi-item[data-status="resolve"] {
  background: var(--color-green);
}
body[data-status="voted"] .magi-item[data-status="resolve"] h2:before {
  content: '承認';
}
body[data-status="voted"] .magi-item[data-status="reject"] {
  background: var(--color-red);
  animation: red-flash 1s infinite ease;
}
body[data-status="voted"] .magi-item[data-status="reject"] h2:before {
  content: '否定';
}
@keyframes red-flash {
  70% {
    background: #BB0000;
  }
}
footer {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 14px;
  padding: 0.5em 0.7em;
}
@media (max-width: 1000px), (max-height: 800px) {
  html {
    font-size: 1.5em;
  }
}
@media (max-width: 700px), (max-height: 700px) {
  :root {
    --body-padding: 15px;
  }
  html {
    font-size: 1.2em;
  }
}
@media (max-width: 700px) {
  .magi-list {
    position: absolute;
    top: 60%;
    left: 50%;
  }
  .magi-logo {
    top: 20%;
  }
}
@media (max-width: 520px), (max-height: 520px) {
  :root {
    --body-padding: 12px;
  }
  html {
    font-size: 0.9em;
  }
}
@media (max-width: 400px), (max-height: 400px) {
  :root {
    --body-padding: 10px;
  }
  html {
    font-size: 0.8em;
  }
}
body {
  transition: color 1s ease, box-shadow 1s ease;
}
.magi-logo {
  transition: top 1s ease,
        transform 1s ease;
}
.magi-logo:after {
  transition: opacity 0.5s ease;
}
.magi-box {
  transition: transform 1.4s ease-out, opacity 0.5s ease;
}
footer {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
body[data-loading="true"] {
  box-shadow: 0 0 0 0 var(--color-orange) inset;
}
body[data-loading="true"] .magi-logo {
  top: 0;
  transition: transform 0.3s ease;
  transform: scale(4, 4);
}
body[data-loading="true"] .magi-logo:after {
  opacity: 1;
}
body[data-loading="true"] .magi-box {
  transform: scale(0.9);
  opacity: 0;
}
body[data-loading="true"] footer {
  opacity: 0;
  transform: translate(0, 10px);
}
[hidden] {
  display: none !important;
}
body[data-status="voted"][data-vote-status="hold"] {
  color: var(--color-yellow);
  box-shadow: 0 0 0 var(--body-padding) var(--color-yellow) inset;
}
body[data-status="voted"][data-vote-status="error"] {
  color: var(--color-red);
  box-shadow: 0 0 0 var(--body-padding) var(--color-red) inset;
}
body[data-status="voted"] .magi-item[data-status="hold"] {
  background: var(--color-yellow);
}
body[data-status="voted"] .magi-item[data-status="hold"] h2:before {
  content: '保留';
}
body[data-status="voted"] .magi-item[data-status="error"] {
  background: #444;
}
body[data-status="voted"] .magi-item[data-status="error"] h2:before {
  content: 'ERR';
}
.final-vote-status[data-status="hold"] {
  color: var(--color-yellow);
}
.final-vote-status[data-status="hold"]:before {
  content: '保留';
}
.final-vote-status[data-status="error"] {
  color: var(--color-red);
}
.final-vote-status[data-status="error"]:before {
  content: 'ERROR';
}
body[data-status="voted"][data-critical="true"] .rule {
  color: var(--color-red);
  animation: flash 1s infinite step-end;
}
.magi-item .detail {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.35em;
  margin: 0;
  font-size: 0.7em;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: var(--color-black);
  font-weight: 600;
}
.magi-item.malthasar .detail {
  bottom: auto;
  top: 0.35em;
}
body[data-ex-mode="true"][data-status="voted"] .magi-item .detail {
  display: block;
}
.notice {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 45%;
  padding: 0.5em 0.7em;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  font-weight: 400;
  font-family: 'Neue Helvetica', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  cursor: default;
}
footer {
  text-align: right;
  font-weight: 400;
  font-family: 'Neue Helvetica', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
footer .advisory {
  opacity: 0.85;
}
.case-panel {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  color: var(--color-orange);
}
.case-form {
  width: min(640px, 88vw);
  box-sizing: border-box;
  padding: 1.2em 1.4em;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Neue Helvetica', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--color-black);
  box-shadow: 0 0 0 2px var(--color-orange), 0 0 0 6px var(--color-black), 0 0 0 8px var(--color-orange);
}
.case-form h3 {
  font-size: 1.8em;
  font-weight: 900;
  font-family: 'MAGI Display', 'Noto Serif JP', serif;
  letter-spacing: 0.1em;
  margin-bottom: 0.6em;
}
.case-form label {
  display: block;
  margin: 0.8em 0 0.3em;
  font-size: 0.9em;
  letter-spacing: 0.05em;
}
.case-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 0.6em 0.7em;
  font: inherit;
  color: var(--color-orange);
  background: #111;
  border: 1px solid var(--color-orange);
  border-radius: 0;
  outline: none;
}
.case-form textarea:focus {
  box-shadow: 0 0 0 2px var(--color-orange);
}
.case-form textarea::placeholder {
  color: rgba(255, 165, 0, 0.45);
}
.case-form ::selection {
  background: var(--color-orange);
  color: var(--color-black);
}
.case-form .case-hint {
  margin-top: 0.8em;
  font-size: 0.75em;
  opacity: 0.7;
}
.case-form .case-actions {
  margin-top: 1em;
  display: flex;
  justify-content: flex-end;
  gap: 0.8em;
}
.case-form button {
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.4em 1.4em;
  cursor: pointer;
  border-radius: 0;
  border: 2px solid var(--color-orange);
  background: var(--color-black);
  color: var(--color-orange);
}
.case-form button.case-submit {
  background: var(--color-orange);
  color: var(--color-black);
}
.case-form button:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .notice {
    max-width: 100%;
    bottom: 3.5em;
  }
}
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
  color: var(--color-orange);
}
.age-card {
  outline: none;
  width: min(560px, 88vw);
  box-sizing: border-box;
  padding: 1.3em 1.5em;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  font-family: 'Neue Helvetica', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--color-black);
  box-shadow: 0 0 0 2px var(--color-red), 0 0 0 6px var(--color-black), 0 0 0 8px var(--color-red);
}
.age-card h3 {
  color: var(--color-red);
  font-size: 1.8em;
  font-weight: 900;
  font-family: 'MAGI Display', 'Noto Serif JP', serif;
  letter-spacing: 0.1em;
  margin-bottom: 0.5em;
}
.age-card p {
  margin: 0.5em 0;
}
.age-card a {
  text-decoration: underline;
}
.age-card .age-en {
  font-size: 0.8em;
  opacity: 0.75;
}
.age-card .case-actions {
  margin-top: 1em;
  display: flex;
  justify-content: flex-end;
  gap: 0.8em;
}
.age-card button {
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.4em 1.4em;
  cursor: pointer;
  border-radius: 0;
  border: 2px solid var(--color-orange);
  background: var(--color-black);
  color: var(--color-orange);
}
.age-card button.age-enter {
  background: var(--color-orange);
  color: var(--color-black);
}
.age-card button:disabled {
  opacity: 0.4;
  cursor: default;
}
.age-card button:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
}
.ts-box {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 15;
}
footer .advisory a {
  text-decoration: underline;
}