/* ==========================
   Takoyaki Fishing - CSS
   【JSでモーダル生成する方式・確定版】
   ========================== */


/* ===== 共通ラッパー ===== */
.takofish-wrap{
  width: min(520px, 100%);
  margin: 12px auto;
  padding: 12px;
  border: 3px solid #111;
  background: #fff;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* ===== ヘッダー ===== */
.takofish-head{ margin-bottom: 10px; }
.takofish-title{ font-weight: 800; font-size: 18px; }
.takofish-sub{
  font-size: 12px;
  opacity: .8;
  margin-top: 2px;
}


/* ===== UI ===== */
.takofish-ui{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}

.takofish-btn{
  appearance: none;
  border: 2px solid #111;
  background: #f3f3f3;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 10px;
}
.takofish-btn[disabled]{
  opacity: .45;
  cursor: not-allowed;
}

.takofish-stats{
  display: flex;
  gap: 10px;
  font-size: 12px;
  align-items: center;
}


/* ===== キャンバス ===== */
.takofish-canvasbox{
  position: relative;
  width: 100%;
  border: 3px solid #111;
  background: #0a1020;
  border-radius: 12px;
  overflow: hidden;
}

/* canvasはレスポンシブ */
#tfCanvas{
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  touch-action: none; /* スマホ操作を邪魔しない */
}


/* ===== ゲーム用モーダル（JS生成方式） ===== */
/* ※ display:none は絶対に書かない */
.takofish-modal{
  position: fixed;
  inset: 0;
  display: grid;              /* ← 生成された瞬間に表示 */
  place-items: center;
  z-index: 9999;
  background: rgba(0,0,0,.72);
  padding: 12px;
  box-sizing: border-box;
}

.takofish-modal__inner{
  width: min(560px, 96vw);
  max-height: 92vh;
  overflow: auto;
  position: relative;
}

.takofish-modal__close{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 2px solid #111;
  background: #fff;
  font-weight: 900;
  cursor: pointer;
}


/* ===== 注意書き ===== */
.takofish-note{
  font-size: 11px;
  opacity: .8;
  margin-top: 8px;
}


/* ===== トップ用：入口キャラ ===== */
.takomin{
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.takomin img{
  width: 72px;
  height: auto;
  image-rendering: pixelated;
  display: block;
}

/* 位置を決めたい場合はここを調整 */
.takomin--fish{
  /* position: absolute; */
  /* left: 40%; */
  /* top: 60%; */
  z-index: 50;
}