/* ============================================================
    勉強会(1)  見た目を作る
   ============================================================

    書き方

        セレクタ {
          プロパティ: 値;
        }

    セレクタで「どの要素に」、プロパティと値で「何をするか」を指定する。

        body      … body タグすべて
        #board    … id="board" が付いた要素（# は id）
        .note     … class="note" が付いた要素（. は class）

    色は #ffffff のような16進数、または white のような名前で書く。
    長さは 300px のようにピクセルで書く。

   ============================================================ */


/* ------------------------------------------------------------
    STEP 6   ページ全体
   ------------------------------------------------------------
    背景色と文字色、そして中身を中央に寄せる。

        body {
          background: #1a1a1a;
          color: #f0f0f0;
          font-family: sans-serif;
          text-align: center;
        }

    確認: 背景が暗くなり、文字が白く、中央に寄る。
          色は好きに変えてよい。
   ------------------------------------------------------------ */

body {
          background: #1a1a1a;
          color: #f0f0f0;
          font-family: sans-serif;
          text-align: center;
        }


/* ------------------------------------------------------------
    STEP 7   盤
   ------------------------------------------------------------
    HTML では見えなかった #board に、大きさと見た目を与える。
    使うプロパティは次の5つ。

        width             幅            300px
        height            高さ          400px
        background        背景色        好きな色
        border            枠            2px solid #666
        margin            外側の余白    20px auto

    margin の auto は「左右の余白を均等にする」という意味で、
    これで要素が中央に来る。

    確認: 盤が中央に表示される。
   ------------------------------------------------------------ */

#board {
    width: 300px;
    height: 400px;
    background: rgb(144, 143, 143);
    border: 2px solid #666;
    margin: 20px auto;
}


/* ------------------------------------------------------------
    STEP 8   玉
   ------------------------------------------------------------
    #ball に大きさと色を与える。20px 四方くらい。
    書き方は STEP 7 と同じ要領。

    四角を丸くするには次を足す。

        border-radius: 50%;

    border-radius は角を丸めるプロパティで、
    50% にすると角が最大まで丸まって円になる。

    確認: 盤の中に丸が表示される。
   ------------------------------------------------------------ */

#ball {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
}


/* ------------------------------------------------------------
    STEP 9   タイマー・ボタン・説明文
   ------------------------------------------------------------
    #timer, #startBtn, .note の見た目を整える。
    ここは指定しないので、自分で決める。

    使えそうなプロパティ

        font-size        文字の大きさ        32px
        font-weight      文字の太さ          bold
        padding          内側の余白          10px 24px
        border-radius    角の丸み            6px
        border           枠                  none で消せる
        cursor           カーソルの形        pointer
        opacity          透明度              0.6

    確認: 自分が見せたい画面になっている。
   ------------------------------------------------------------ */

#timer {
    font-size: 32px;
    font-weight: bold;
}

#startBtn {
    font-size: 24px;
    font-weight: bold;
    color: #00ffff;
    background: transparent;
    padding: 10px 28px;
    border: 2px solid #00ffff;
    border-radius: 8px;
    cursor: pointer;
    text-shadow: 0 0 8px #00ffff;
    box-shadow: 0 0 12px #00ffff;
    transition: all 0.3s;
}

#startBtn:hover {
  background: #00ffff;
  color: #1a1a1a;
  box-shadow: 0 0 25px #00ffff;
}

.note {
    font-size: 20px;
    font-weight: bold;
}

#message {
  font-size: 42px;
  font-weight: bold;
  color: #ffea00;
  text-shadow: 0 0 10px #ffea00, 0 0 20px #ffaa00, 2px 2px 4px rgba(0,0,0,0.8);
  letter-spacing: 6px;
  margin: 15px 0;
}

.note {
  font-size: 14px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #444444;
  margin: 15px auto;
  max-width: 280px;
}

#restartBtn {
  display: block;
  margin: 15px auto;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(135deg, #11998e, #38ef7d);
  padding: 10px 24px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  display: none;
}



/* ============================================================
    完成したら公開する。

      1. GitHub の自分のリポジトリを開く
      2. Add file → Upload files
      3. index.html と style.css をドラッグして Commit
      4. 数十秒待って、自分の URL をスマホで開く

    この手順は次回 git を使って自動化する。
   ============================================================ */