body {
    font-family: 'Inter', sans-serif;
    background-repeat: no-repeat;
}
body.circle {
    background-image: url(/image/watch-circle.png);
    background-size: 524px;
    background-position: center 22px;
    padding-left: 4px;
}
body.rectangle {
    background-image: url(/image/watch-square.png);
    background-size: 600px;
    background-position: center calc(0% - 8px);
    padding-left: 4px;
}

select {
    -webkit-appearance: none; /* iOS Safari */
    -moz-appearance: none;    /* Firefox */
    appearance: none;         /* 標準 */
    text-align: center;
    text-align-last: center;  /* 中央寄せを強制 */  
    outline: none;            /* focus:outline-none */
    box-shadow: none;         /* focus:shadow-none */
  }
select:focus {
    outline: none;
    box-shadow: none;
  }

/* テキストシャドウ */
.text-shadow {
    text-shadow: 2px 2px 4px #222222; /* ぼかしなしのシャープな影 */
}

/* ボタングループ（アクティブ時のスタイル） */
.frame-toggle-button.active{
    background-color: #007bff;
    color: white;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* フレーム（円形／矩形） */
.box-shadow {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* メイン領域 */
#mainArea.circle {
    height: 296px;
    width: 296px;
    border-radius: 50%;
}
#mainArea.rectangle {
    height: 302px;
    width: 266px;
    border-radius: 15%;
}

/* デジタル時計の文字フォント */
.digital-clock {
    font-family: 'Orbitron', sans-serif !important;
  }
.text-stroke{
    -webkit-text-stroke: 4px #000000;
    paint-order: stroke;
}

/* オーバーレイ領域 */
#menuArea {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE, Edge */
    scrollbar-width: none;     /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;             /* Chrome, Safari */
}

/* スライドイン領域 */
#slidePanel::-webkit-scrollbar {
    display: none;
}
#slidePanel {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* スクロール領域 */
.scrollable-content {
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1a1a1a;
    border-radius: 10px;
}

/* リストアイテム */
.list-item {
    background-color: #cccccc;
    color: #404040;
    padding: 10px 10px 10px 16px;
    margin: 8px 14px;
    border-radius: 10px;
    align-items: center;
    text-align: center;
    font-size: 1.2rem;
    text-align: left;
}

/* 試合設定ボタン（settingパネルで使用） */
.select-button {
    background-color: #666666;
    color: #ffffff;
    border-radius: 10px;
    padding: 4px 8px 4px 8px;
    width: 100px;
    height: 42px;
}