body {
  /* margin-left: 20px; */
  text-align: center;
  height: 100%;
  margin: 0;
}

p {
  font-size: 40px;
  margin: 0 10px 0 10px;
}

.flex-parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  width: 500px;
  height: 500px;
  border-radius: 3px;
}

.canvas-read-only {
  /*width: 500px;
  height: 500px;
  /*transform: scale(0.5);*/
  border-radius: 3px;
}

.result {
   pointer-events: none;
}

.write {
  border: 1px solid black;
}

.center {
  text-align: center;
  margin-bottom: 3px;
}

.canvas-drawer {
  align-items: center;
  justify-content: center;
}

svg {
  pointer-events: stroke;
  touch-action: none;
  user-select: none;
}

button {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  border: solid 1px black;
  border-radius: 3px;
  transition: .4s;
  background-color: white;
}

button:disabled {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  border: solid 1px black;
  border-radius: 3px;
  transition: .4s;
  background-color: white;
}

button:hover {
  background-color: lightgrey;
}

.side-image {
  position: fixed;
  top: 40%;
  transform: translateY(-50%);
  width: 400px;   /* サイズは調整 */
  /*opacity: 0.8;   /* 半透明にするなら */
  pointer-events: none; /* クリック操作を邪魔しない */
}

.side-image.left {
  left: -60px;
}

.side-image.right {
  right: -60px;
}

#userID {
  position: fixed;
  bottom: 10px;   /* 画面下からの距離 */
  right: 10px;    /* 画面右からの距離 */
  background: rgba(255, 255, 255, 0.8); /* 半透明背景で視認性UP */
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 32px;
  color: #333;
  pointer-events: none; /* 邪魔しない */
}

.quit-button {
  position: fixed;
  top: 10px;       /* 画面上からの距離 */
  right: 10px;     /* 画面右からの距離 */
  padding: 8px 14px;
  font-size: 14px;
  background-color: #f44336; /* 赤色 */
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  z-index: 1000;
}

.quit-button:hover {
  background-color: #d32f2f; /* 濃い赤に変化 */
}

.btn-primary {
  background: #2196f3;
  color: #fff;
}
.btn-primary:hover {
  background: #1976d2;
}

[hidden] { display: none !important; }

/* オーバーレイを最前面に強制 */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  /*background: rgba(0,0,0,0.35);*/
  background: #FFFFFF;
  z-index: 2147483647; /* これ以上ない最大級 */
}

/* 念のためモーダル本体にも積層基準を付与 */
.modal { position: relative; z-index: 1; }

:root { --gap: 8px; --btn-size: 56px; --accent: #2563eb; --text:#111; --muted:#666; --border:#ddd; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif; color: var(--text); }
form { max-width: 520px; margin: 24px auto; padding: 16px; }
.field { margin-bottom: 18px; }
.label { font-weight: 600; margin: 4px 0 10px; display: block; }
/* 四角ボタンの共通 */
.btn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.btn { 
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-size); border: 1.5px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; user-select: none; font-size: 16px; 
  transition: transform .02s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { border-color: #bbb; background: #f8f8f8; }
.btn:active { transform: translateY(1px); }
.btn.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.25) inset;
}
/* 年齢表示パネル */
.age-display {
  border: 1.5px solid var(--border); border-radius: 10px; margin-top: 10px; padding: 12px 14px;
  font-size: 22px; min-height: 36px; display: flex; align-items: center; justify-content: space-between;
  letter-spacing: .04em; background: #ffe3e3;
}
.age-placeholder { color: var(--muted); }
.age-actions { display: flex; gap: 8px; }
.pill { height: 36px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: 999px; background: #fff; cursor: pointer; }
/* 数字キー */
.keypad { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.key { height: var(--btn-size); border: 1.5px solid var(--border); border-radius: 10px; background: #fafafa; font-size: 20px; }
.key.action { font-size: 14px; }
/* セクションの余白調整 */
.section { padding: 12px 0; border-top: 1px solid #f0f0f0; }
/* 送信 */
.submit { margin-top: 20px; width: 100%; height: 48px; font-size: 16px; border-radius: 12px; border: none; background: var(--accent); color: #fff; cursor: pointer; }

.clear    { margin-top: 20px; width: 30%; height: 48px; font-size: 24px; border-radius: 12px; border: none; background: #0000F0; color: #fff; cursor: pointer; }
.register { margin-top: 20px; width: 30%; height: 48px; font-size: 24px; border-radius: 12px; border: none; background: #F00000; color: #fff; cursor: pointer; }
.register:disabled { margin-top: 20px; width: 30%; height: 48px; font-size: 24px; border-radius: 12px; border: none; background: #AAAAAA; color: #fff; cursor: pointer; }
.register:hover { margin-top: 20px; width: 30%; height: 48px; font-size: 24px; border-radius: 12px; border: none; background: #FF8888; color: #fff; cursor: pointer; }

.btn-finish { 
  margin-top: 20px; width: 100%; height: 48px; font-size: 16px; border-radius: 12px; border: none; background: var(--accent); color: #fff; cursor: pointer;
}