/* ============================================================
    勉強会(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: linear-gradient(160deg, #ffe9f0 0%, #fdf6f5 35%, #eaf3ff 100%);
          background-attachment: fixed;
          color: #7a6b73;
          font-family: 'Comic Sans MS', 'Rounded M+ 1c', 'Hiragino Maru Gothic ProN', sans-serif;
          text-align: center;
          margin: 0;
          padding-top: 20px;
          overflow-x: hidden;
        }

#best {
          font-size: 14px;
          opacity: 0.65;
          margin: 0 0 4px;
        }
#best.new-record {
          color: #ff8fb1;
          font-weight: bold;
          opacity: 1;
          animation: pop 0.4s ease;
        }

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

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

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

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

#board{
    width: 300px;
    height: 400px;
    margin: 10px auto 20px;
    background: #fff;
    border: 6px solid #a4ccdd;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(250, 227, 217, 0.6);
    position: relative;
}


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

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

        border-radius: 50%;

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

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

#ball{
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    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: #853232;
    padding: 10px 24px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 0 #95c0b3;
    transition: all 0.1s; /*へこむ*/
    background: #e0e4c5;
    letter-spacing: 1px;
}
#startBtn:active {
    transform: translateY(6px);
    box-shadow: none;
}
#startBtn:hover {
    background: #d9e0b8;
    animation: wiggle 0.4s ease;
}
@keyframes wiggle {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

.note{
    font-size: 16px;
    opacity: 0.6;
}

@keyframes pop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

#message{
    color: #ff6b6b;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    height: 40px;
    margin: 10px 0;
    animation: pop 0.3s ease;
}

/* 紙吹雪 */
.confetti{
    position: fixed;
    top: -20px;
    font-size: 20px;
    pointer-events: none;
    z-index: 9999;
    animation-name: fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(540deg); opacity: 0.9; }
}


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

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

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