body {
  --seat-bg-color: #3e3b3b;
  --seat-text-color: #d4af37;
  font-family: 'Garamond', serif;
  color: var(--seat-text-color);
  background-color: var(--seat-bg-color);
  margin-top: 30px;
  padding: 20px;
  transition: background-color 0.5s ease;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('image/kissa.jpg'); /* ←画像パスを指定 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0.4;
  pointer-events: none;
}

#message,
#elapsedTime,
#countdownDisplay {
  font-size: 1.2em;
  margin-bottom: 12px;
}

#seatContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.seat {
  border: 1.5px solid var(--seat-text-color);
  padding: 10px;
  border-radius: 8px;
  width: 200px;
  background-color: var(--seat-bg-color);
  color: var(--seat-text-color);
  text-align: center;
}

.seat h3 {
  margin: 0;
  font-size: 1.1em;
  color: #fffacd;
  text-align: left;
}

/* ↓席番号を完全に消す（表示もスペースもなし） */
/*
.seat h3 {
  display: none;
}
*/

/* ↓席番号は非表示にするがスペースは残す
.seat h3 {
  visibility: hidden;
}
*/

.seat p {
  margin: 4px 0;
}

.drinkOnTable {
  margin-top: 6px;
  font-size: 0.85em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #8b0000cc;
  color: #fff;
  display: inline-block;
}

.storyBubble {
  background: #fefee2;
  color: #333;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 13px;
  white-space: pre-wrap;
}

.seat p,
.seat .drinkOnTable,
.seat .storyBubble {
  text-align: center;
}

.seat p.name-id-b {    
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.2em;
  display: inline-block;
  vertical-align: bottom;
}

.seat p.name-id-h {     
  font-size: 1.1em;
  font-weight: normal;
  line-height: 1.2em;
  display: inline-block;
  vertical-align: bottom;
}

.seat p.name-id-default {  
  font-size: 0.95em;
  font-weight: normal;
  line-height: 1.2em;
  display: inline-block;
  vertical-align: bottom;
}

.seat p.user-name {
  font-size: 1.05em;
  font-weight: normal;
  line-height: 1.2em;
  display: inline-block;
  vertical-align: bottom;
}

#tickerBox {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  background: #111;
  color: #fff;
  font-size: 16px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 0 0 6px 6px;
  z-index: 9999;
}

/* テーマごとの座席色を変える */
body.hotCoffee {
  --seat-bg-color: #4b2e0e;
}
body.iceCoffee {
  --seat-bg-color: #203040;
}
body.hotTea {
  --seat-bg-color: #4a3f2a;
}
body.iceTea {
  --seat-bg-color: #1a3641;
}
body.hotGreenTea {
  --seat-bg-color: #355e2c;
}
body.iceGreenTea {
  --seat-bg-color: #2b4d24;
}
body.seasonal-fire {
  --seat-bg-color: #003366;
  --seat-text-color: white;
}
body.seasonal-earth {
  --seat-bg-color: #f2d6e6;
  --seat-text-color: rgb(143, 245, 112);
}
body.seasonal-ice {
  --seat-bg-color: #ffcc99;
  --seat-text-color: rgb(56, 113, 236);
}
body.seasonal-fairy {
  --seat-bg-color: #f078ea;
  --seat-text-color: black;
}

#timerContainer input,
#timerContainer button {
  margin: 4px;
  font-size: 1em;
}