/* 位置・背景・文字色・フォント・カットイン色・バッジ色などの「数値」は
   PK.CONFIG（js/config.js）を正本とし、js/ui.js の起動処理が実行時にここへ適用する。
   このファイルには CONFIG に無い構造的なスタイル（flex 配置・形状・内部余白）だけを書く。 */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

#three {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#stage {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  transform-origin: 0 0;
}

#stage > div {
  position: absolute;
  box-sizing: border-box;
}

#street, #msg, #handname, #hint {
  display: flex;
  align-items: center;
}
#street, #handname { padding: 0 10px; }
#msg { justify-content: center; }
#hint { padding: 0 8px; }

#pot {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

#board, #herocards {
  display: flex;
  align-items: center;
}
#board { padding: 0 4px; }

.card2d { border-radius: 4px; overflow: hidden; background: #fff; }
.card2d img { width: 100%; height: 100%; display: block; }
.card2d.back { background: transparent; }

.panel { padding: 6px 10px; box-sizing: border-box; height: 100%; }
.panel .row1 { font-size: 15px; }
.panel .row2 { font-size: 20px; font-weight: bold; margin: 2px 0; }
.panel .row3 { font-size: 13px; opacity: 0.85; }
.badge { display: inline-block; font-size: 11px; font-weight: bold; border-radius: 3px; padding: 0 4px; margin-left: 6px; color: #000; }

#tut { padding: 10px 12px; }
#tut .waiting { position: absolute; left: 12px; bottom: 8px; font-size: 14px; }

#actions { background: transparent; }
#actions .row { display: flex; }
#actions .abtn {
  border-radius: 6px; background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 15px; display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.2; box-sizing: border-box;
}
#raiseRow { margin-top: 8px; background: rgba(0, 0, 0, 0.55); border-radius: 6px; padding: 8px 10px; font-size: 15px; box-sizing: border-box; }

#cutin {
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; text-align: center; color: #fff;
  background: transparent; border-radius: 0;
  opacity: 1;
}

#help { padding: 14px 18px; box-sizing: border-box; overflow: auto; }
#help h3 { margin: 0 0 8px; font-size: 18px; }
#help table { border-collapse: collapse; width: 100%; font-size: 14px; margin-bottom: 14px; }
#help table td { padding: 2px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

[hidden] { display: none !important; }