/* =====================================================================
   陰陽ゲーム　決まりごと

   全画面が読む。ここを直せば全部が変わる。

   約束は3つ。
     一. 曲に引っ張られない。誰が曲を入稿しても、画面の見た目は変わらない
     二. 陰と陽を粗末にしない。色は意味にだけ使い、操作には使わない
     三. 流転を忘れない。陰陽は固定された二択ではなく、めぐるもの
   ===================================================================== */

:root{
  /* ---- 陰　沈むもの・暗いもの・内へ向かうもの ---- */
  --yin-1:#080c17;   --yin-2:#131d38;   --yin-3:#2b406e;
  --yin-4:#5b7cc7;   --yin-5:#9db4e8;

  /* ---- 陽　昇るもの・明るいもの・外へ向かうもの ---- */
  --yang-1:#1c1305;  --yang-2:#3e2d10;  --yang-3:#8a6520;
  --yang-4:#e0a33c;  --yang-5:#f3cf8c;

  /* ---- 無彩　地と、操作。
         押せるもの・選べるものは、色ではなく明るさで示す。
         金を操作に使わない。金は陽のもの。 ---- */
  --ink-0:#05060c;   /* 地 */
  --ink-1:#0d111d;   /* 面 */
  --ink-2:#1e2438;   /* 境 */
  --ink-3:#39415a;   /* 沈んだ字 */
  --ink-4:#848ea6;   /* 注 */
  --ink-5:#c6cddd;   /* 本文 */
  --ink-6:#f0f3fa;   /* 見出し */

  /* ---- 余白　この6段だけを使う。途中の数字を作らない ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:40px; --sp-6:64px;

  /* ---- 文字　3段だけ ---- */
  --font:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --fs-h:23px;    /* 見出し　字間を広げるのはここだけ */
  --fs-b:14px;    /* 本文 */
  --fs-n:11.5px;  /* 注 */

  /* ---- 角と線 ---- */
  --r-1:8px; --r-2:14px; --r-3:999px;
  --line:1px solid var(--ink-2);

  /* ---- 流転　時間の単位。曲とは無関係の、画面自身の時間 ---- */
  --turn:48s;     /* 太極がひとめぐりする時間 */
  --breath:6s;    /* 呼吸 */
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--ink-0); color:var(--ink-5);
  font-family:var(--font); font-size:var(--fs-b); line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

/* ===================== 文字の3段 ===================== */
.h{font-size:var(--fs-h);font-weight:600;letter-spacing:.2em;text-indent:.2em;color:var(--ink-6);line-height:1.5}
.b{font-size:var(--fs-b);color:var(--ink-5)}
.n{font-size:var(--fs-n);color:var(--ink-4);letter-spacing:.1em;line-height:1.8}

/* ===================== 左右の決まり =====================
   陰は左、陽は右。全画面で変えない。ゲームの ← 陰 / → 陽 と同じ向き */
.side-yin{color:var(--yin-4)}
.side-yang{color:var(--yang-4)}

/* ===================== 面 ===================== */
.panel{background:var(--ink-1);border:var(--line);border-radius:var(--r-2);padding:var(--sp-3)}

/* 陰の面・陽の面。どちらにも、必ず相手の色の点がひとつ残る（太極の目） */
.face{position:relative;border-radius:var(--r-2);padding:var(--sp-3);overflow:hidden}
.face::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;
  right:var(--sp-3);bottom:var(--sp-3)}
.face-yin{background:linear-gradient(160deg,var(--yin-2),var(--yin-1));color:var(--yin-5);
  border:1px solid var(--yin-3)}
.face-yin::after{background:var(--yang-4)}
.face-yang{background:linear-gradient(160deg,var(--yang-2),var(--yang-1));color:var(--yang-5);
  border:1px solid var(--yang-3)}
.face-yang::after{background:var(--yin-4)}

/* ===================== 操作 =====================
   主・従・逃げ道。形と明るさで序列をつける。色は使わない */
.btn{
  appearance:none;font-family:inherit;font-size:var(--fs-b);letter-spacing:.08em;
  border-radius:var(--r-1);padding:var(--sp-2) var(--sp-4);cursor:pointer;
  background:transparent;color:var(--ink-5);border:var(--line);
  transition:border-color .15s,background .15s,color .15s;
}
.btn:hover{border-color:var(--ink-3);background:var(--ink-1);color:var(--ink-6)}
.btn-main{background:var(--ink-6);color:var(--ink-0);border-color:var(--ink-6);font-weight:600}
.btn-main:hover{background:#fff;border-color:#fff;color:var(--ink-0)}
.btn-quiet{border-color:transparent;color:var(--ink-4);padding-left:var(--sp-2);padding-right:var(--sp-2)}
.btn-quiet:hover{border-color:transparent;background:transparent;color:var(--ink-5)}
.btn:disabled{opacity:.35;cursor:default}

/* ===================== 流転 ===================== */
@keyframes turn{ to{ transform:rotate(360deg) } }
@keyframes breathe{ 0%,100%{opacity:.55} 50%{opacity:1} }
.turning{animation:turn var(--turn) linear infinite}
.breathing{animation:breathe var(--breath) ease-in-out infinite}

/* 拍。曲の中身ではなく「拍」で打つ。どの曲でも同じように動く */
.beat{transition:opacity .09s ease-out,transform .09s ease-out}
.beat.on{opacity:1;transform:scale(1.03)}

/* ===================== 画面の骨格 =====================
   上に現在地、中に主題、下に操作。どの画面でも同じ位置に同じ役割 */
.screen{min-height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;                      /* 中身をひとかたまりにして中央へ */
  gap:var(--sp-4);padding:var(--sp-5) var(--sp-3)}
.screen > .where{width:100%;max-width:560px;display:flex;justify-content:space-between;
  align-items:center;font-size:var(--fs-n);color:var(--ink-4);letter-spacing:.16em}
/* .main は伸びない。伸ばすと画面が高いほど中身が引き裂かれる */
.screen > .main{width:100%;max-width:560px;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.screen > .acts{width:100%;max-width:560px;display:flex;gap:var(--sp-2);
  justify-content:center;flex-wrap:wrap;align-items:center}