/* =====================================
   距離と変位 Ver2
   style.css
===================================== */


/*=============================
  基本設定
=============================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    font-family:
    "Yu Gothic",
    "Meiryo",
    sans-serif;

    background:
    linear-gradient(
    135deg,
    #111,
    #2c2c2c);

    color:#fff;

}


/*=============================
  メイン
=============================*/

.app{

    width:min(960px,95vw);

    background:#242424;

    border-radius:24px;

    overflow:hidden;

    box-shadow:

    0 20px 60px
    rgba(0,0,0,.6);

}


/*=============================
  ヘッダー
=============================*/

header{

    height:70px;

    background:#303030;

    display:flex;

    justify-content:center;

    align-items:center;

}

header h1{

    font-size:30px;

    letter-spacing:5px;

}


/*=============================
  グラフ
=============================*/

.graph{

    width:100%;

    aspect-ratio:16/9;

    background:#181818;

}

svg{

    width:100%;

    height:100%;

}


/*=============================
  グリッド
=============================*/

.grid{

    stroke:#353535;

    stroke-width:1;

}


/*=============================
  移動距離
=============================*/

.distance{

    fill:none;

    stroke:#3b82ff;

    stroke-width:8;

    stroke-linejoin:round;

    stroke-linecap:round;

    filter:

    drop-shadow(
    0 0 8px
    rgba(59,130,255,.8));

}


/*=============================
  最終変位（灰）
=============================*/

.finalDisplacement{

    stroke:#888;

    stroke-width:3;

    stroke-dasharray:12 8;

    opacity:.35;

}


/*=============================
  現在の変位
=============================*/

.displacement{

    stroke:#32d26d;

    stroke-width:6;

    stroke-linecap:round;

    filter:

    drop-shadow(
    0 0 8px
    rgba(50,210,109,.9));

}


/*=============================
  矢印
=============================*/

.arrowHead{

    fill:#32d26d;

}


/*=============================
  現在位置
=============================*/

#particle{

    fill:white;

    stroke:#3b82ff;

    stroke-width:4;

}


/*=============================
  出発
=============================*/

#startPoint{

    fill:white;

}


/*=============================
  到着
=============================*/

#goalPoint{

    fill:#3b82ff;

}
/*=============================
  SVG文字
=============================*/

text{

    fill:white;

    font-size:22px;

    font-weight:bold;

    user-select:none;

}


/*=============================
  現在位置ラベル
=============================*/

#positionLabel{

    fill:#ffffff;

    font-size:18px;

    font-weight:bold;

}


/*=============================
  変位ラベル
=============================*/

#displacementLabel{

    fill:#32d26d;

    font-size:22px;

    font-weight:bold;

}


/*=============================
  数値表示
=============================*/

.data{

    background:#303030;

    display:flex;

    justify-content:center;

    gap:120px;

    padding:25px;

}

.data div{

    text-align:center;

}

.data p{

    margin-bottom:8px;

    font-size:18px;

}

.data span{

    display:inline-block;

    font-size:42px;

    font-weight:bold;

    color:#32d26d;

    text-shadow:

    0 0 12px

    rgba(50,210,109,.7);

}


/*=============================
  操作パネル
=============================*/

.control{

    padding:25px;

}


/*=============================
  モードボタン
=============================*/

.mode{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:25px;

}

.modeButton{

    width:130px;

    height:46px;

    border:none;

    border-radius:24px;

    background:#444;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.2s;

}

.modeButton:hover{

    background:#666;

}

.modeButton.active{

    background:white;

    color:#222;

}


/*=============================
  スライダー
=============================*/

.sliderBox{

    display:flex;

    align-items:center;

    gap:15px;

}

.sliderBox label{

    width:50px;

}

#progress{

    flex:1;

    cursor:pointer;

    accent-color:#3b82ff;

}

#progressValue{

    width:60px;

    text-align:right;

}


/*=============================
  ボタン
=============================*/

.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:25px;

}

.buttons button{

    width:170px;

    height:46px;

    border:none;

    border-radius:24px;

    background:#3b82ff;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.2s;

}

.buttons button:hover{

    transform:scale(1.05);

    opacity:.9;

}


/*=============================
  説明
=============================*/

.explanation{

    background:#1d1d1d;

    padding:25px;

    line-height:2;

}

.explanation h2{

    margin-bottom:15px;

}

.explanation p{

    color:#ddd;

    font-size:17px;

}


/*=============================
  フッター
=============================*/

footer{

    background:#202020;

    color:#999;

    text-align:center;

    padding:15px;

}


/*=============================
  スマホ
=============================*/

@media(max-width:700px){

header h1{

    font-size:24px;

}

.data{

    gap:35px;

}

.data span{

    font-size:30px;

}

.mode{

    flex-wrap:wrap;

}

.modeButton{

    width:100px;

}

.buttons{

    flex-direction:column;

    align-items:center;

}

.buttons button{

    width:80%;

}

.sliderBox{

    flex-wrap:wrap;

}

#progress{

    width:100%;

}

}