:root{
  --bg: #1c2b22;
  --bg-accent: #0f1a12;
  --gold: #d8b25c;
  --gold-light: #f0dca0;
  --red: #a83232;
  --cream: #f5ecd7;
  --panel: rgba(15, 26, 18, 0.85);
}

*{ box-sizing: border-box; }

/* 縦画面のスマホ・タブレットで対戦画面を開いた時に、横向きを促すオーバーレイ。
   既定(PC・横画面)では非表示。表示条件はメディアクエリ側で指定する。 */
#rotate-prompt{
  display:none;
  position:fixed; inset:0; z-index:200;
  flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background: var(--bg-accent);
  color: var(--cream);
  text-align:center; padding:24px;
}
#rotate-prompt .rotate-icon{
  font-size:3.5rem;
  animation: rotate-hint 1.6s ease-in-out infinite;
}
#rotate-prompt p{ font-size:1.05rem; line-height:1.7; margin:0; }
@keyframes rotate-hint{
  0%, 100%{ transform: rotate(0deg); }
  50%{ transform: rotate(-90deg); }
}

body{
  margin:0;
  min-height:100vh;
  font-family: 'Zen Maru Gothic', 'Klee One', sans-serif;
  background: radial-gradient(circle at 50% 0%, #24382b 0%, var(--bg) 60%, var(--bg-accent) 100%);
  color: var(--cream);
}

h1,h2,h3{ font-family: 'Yuji Syuku', serif; letter-spacing: .05em; }

.screen{ display:none; min-height:100vh; padding: 24px 16px; position:relative; }
.screen.active{ display:block; }

/* ---------- タイトル ---------- */
#screen-title{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#screen-title.active{ display:flex; }
#screen-title h1{
  font-size: clamp(2rem, 6vw, 3.6rem);
  color: var(--gold-light);
  text-shadow: 0 0 18px rgba(216,178,92,0.5);
  margin-bottom: 8px;
}
.title-sub{ color: var(--gold); margin-bottom: 24px; letter-spacing:.2em; }
.title-cards{ display:flex; gap:14px; margin-bottom:32px; }
.title-cards img{
  width: 84px; border-radius:6px; box-shadow:0 6px 16px rgba(0,0,0,.5);
  border:2px solid var(--gold);
  transform: rotate(var(--r,0deg));
}
.title-cards img:nth-child(1){ --r:-8deg; }
.title-cards img:nth-child(3){ --r:8deg; }

.menu-buttons{ display:flex; flex-direction:column; gap:14px; width: 240px; }

button{
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, #2c4433, #1a2b20);
  color: var(--cream);
  cursor:pointer;
  transition: transform .15s, background .15s;
}
button:hover{ transform: translateY(-2px); background: linear-gradient(180deg, #37543f, #223526); }

.corner-btn{
  position:absolute; top:16px; padding: 8px 16px; border-radius: 999px;
}
.title-corner-buttons{
  position:absolute; top:16px; right:16px; display:flex; gap:10px;
}
.title-corner-buttons .corner-btn{ position:static; }

/* ---------- ルール/クレジット画面 ---------- */
#screen-rules, #screen-credits{ max-width: 780px; margin: 0 auto; }
.rules-tabs{ display:flex; gap:8px; margin: 16px 0; flex-wrap:wrap; }
.rules-tabs button.active{ background: var(--gold); color:#222; }
#rules-content, #credits-content{
  background: var(--panel); border:1px solid var(--gold); border-radius: 14px; padding: 20px;
  line-height:1.8;
}
.yaku-list li{ margin-bottom: 10px; }
.card-list-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap:12px; }
.card-list-item{ text-align:center; font-size: .78rem; }
.card-list-item img{ width:100%; border-radius:4px; border:1px solid var(--gold); }
.card-list-item .chara{ color: var(--gold-light); }
rt-ruby{ font-size:.7em; color: var(--gold-light); }

/* ---------- COM選択 ---------- */
#com-select-overlay, #popup-overlay{
  position:fixed; inset:0; background: rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center; z-index:50;
}
#com-select-overlay.hidden, #popup-overlay.hidden{ display:none; }
#com-select-box, #popup-box{
  background: var(--bg-accent); border:2px solid var(--gold); border-radius:16px;
  padding: 28px; max-width: 460px; width: 90%; text-align:center;
}
#com-select-box button{ display:block; width:100%; margin: 8px 0; }
.popup-buttons{ display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.voice-msg{ color: var(--gold-light); font-style:italic; }

/* ---------- ゲーム画面(常に画面の高さ100%以内に収まる固定レイアウト) ---------- */
/* PC(広い画面)では、行の高さを固定した上で「折り返し+縦スクロール」で表示する
   (枚数が増えても見切れず、通常は1画面に収まる)。
   スマホ・タブレット(900px以下)では、下部のメディアクエリで
   「列数固定のグリッド」表示に切り替える(理由は同メディアクエリ内のコメント参照)。 */
#screen-game{
  display:none;
  width:100%; max-width: 1600px; margin:0 auto; padding: 8px 18px;
  flex-direction:column; gap:1vh; gap:1dvh;
  height:100vh; height:100dvh; /* スマホのアドレスバー分の誤差を補正(対応ブラウザのみ) */
  overflow-y:auto; overflow-x:hidden; /* 稀に1画面に収まりきらない画面比(iPad等)向けの保険として、
    画面全体の縦スクロールを許可する。個々の行の中でスクロールさせると
    タップ操作と競合するため、あふれた分は画面全体のスクロールで見せる方針。 */
}
#screen-game.active{ display:flex; }
.corner-btn-left{ left:16px; right:auto; border-radius:999px; }
#btn-sound-ingame{ right:16px; }
#game-hud{
  flex:0 0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  background: var(--panel); border:1px solid var(--gold); border-radius: 12px;
  padding: 4px 18px; font-size:.95rem;
}
.card-row{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center; align-content:flex-start; align-items:center;
}
.card{
  /* 行の高さの100%ではなく固定値にする: 行(.card-row)の高さを札から独立させることで、
     iPad等の横幅で2行に折り返した時に、2行目が固定の枠からあふれて見えなくなる
     (行の高さ ⇔ 札の高さ が互いを参照し合う)問題を避けている。
     行自体は折り返した行数ぶん自然に伸び、収まりきらない場合は画面全体のスクロールで見える。 */
  height:18vh; height:18dvh; width:auto;
  min-width:0; min-height:0;
  border-radius:6px; box-shadow:0 3px 10px rgba(0,0,0,.5);
  transition: transform .15s, box-shadow .15s;
}
.card.clickable{ cursor:pointer; }
.card.clickable:hover{ transform: translateY(-6%); }
.card.capturable{ box-shadow:0 0 18px 6px var(--gold-light); transform: translateY(-5%); }
.card.playable{ box-shadow:0 0 10px 3px rgba(240,220,160,0.65); }
.card-placeholder{ visibility:hidden; box-shadow:none; pointer-events:none; }

#com-hand .card{ height:11vh; height:11dvh; }
.captured-area .card{ height:7vh; height:7dvh; }

.captured-area{
  display:flex; gap:3px; flex-wrap:wrap; align-content:flex-start; justify-content:center;
}

#com-area, #player-area{
  flex:0 0 auto; display:flex; flex-direction:column; gap:2px;
  background: var(--panel); border:1px solid var(--gold); border-radius:14px; padding:4px 12px;
}
/* PC(既定)では、これまで通り縦に積む(手札/取り札の順序はHTML通り) */
.com-row, .player-row{ display:flex; flex-direction:column; gap:2px; }
.reach-area{
  flex:0 0 auto;
  text-align:center; font-size:.85rem; min-height: 1.2em; color: var(--gold-light);
  background: rgba(15,26,18,.65); border-radius:8px; padding:1px 8px;
}
.reach-area .done{ color:#ffd27a; font-weight:bold; }
.reach-area .reach{ color:#9be39b; }

/* 場札と山札を横に並べる。field-areaは明示的な高さを持たず、
   折り返した行数ぶんだけ自然に育つ(align-items:stretchでdeck-areaもそれに合わせる)。 */
.table-row{ flex:0 0 auto; display:flex; align-items:stretch; gap:16px; }
#field-area{ flex:1; min-width:0; }
#deck-area{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; flex:0 0 auto; }
.deck-stack{ text-align:center; }
#deck-img{ height:17vh; height:17dvh; width:auto; border-radius:6px; box-shadow:0 3px 10px rgba(0,0,0,.5); }
#deck-count{ display:block; font-size:.78rem; color: var(--gold-light); }
#drawn-card-box{ text-align:center; }
#drawn-card-box.hidden{ visibility:hidden; }
#drawn-card-box .label{ font-size:.78rem; color: var(--gold-light); margin-bottom:2px; }
#drawn-card-img{ height:17vh; height:17dvh; width:auto; border-radius:6px; box-shadow:0 0 14px 4px var(--gold-light); }

#koikoi-indicator{
  flex:0 0 auto;
  text-align:center; font-size:1.05rem; color: var(--red); font-weight:bold; min-height:1.3em;
}

/* 縦画面のスマホ・タブレットで対戦画面を開いた時だけ、回転案内を表示する。
   回転案内はposition:fixedで画面全体を覆うため、対戦画面自体は隠さなくてよい
   (横向きにすればPC版と同じ大きな表示でプレイできる)。 */
@media (max-width: 900px) and (orientation: portrait){
  #screen-game.active #rotate-prompt{ display:flex; }
}

/* 横画面(またはPC)では、幅が900px以下でも下のグリッド表示は使わず、
   PC版と同じ「折り返し+縦スクロール」表示のままにする。
   つまり、この後のコンパクトグリッド指定は「縦画面」限定で適用する。 */
@media (max-width: 900px) and (orientation: portrait){

  /* スマホ・タブレットは画面が狭く、PC版と同じ「折り返し+縦スクロール」方式だと
     ・枚数によって折り返し行数が変わり配置がズレる
     ・スクロール操作とタップ操作が競合し、札を選べず進行不能になる
     という問題が起きたため、この幅以下では列数を固定した「グリッド」表示に切り替える。
     取り札は戦略上重要なため、手札の横に細く並べるのではなく、
     横幅いっぱいの帯として表示し、行数を少なくすることで1枚あたりを大きくしている。 */
  #screen-game{ gap:0.6vh; gap:0.6dvh; padding:6px 10px; }
  #game-hud{ font-size:.8rem; padding:3px 12px; }

  .card-row{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap:4px;
    overflow:hidden;
  }
  .card{ width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; }
  .card.clickable:hover{ transform:scale(1.06); }
  .card.capturable{ transform:scale(1.05); }

  /* 取り札: 横幅いっぱいに使い、行数を2行に抑えることで1枚あたりを大きくする。
     (クリック操作が無いため)それでも収まらない場合だけ縦スクロールを許可する。 */
  .captured-area{
    display:grid;
    grid-template-rows: repeat(2, 1fr);
    gap:3px;
    overflow-y:auto; overflow-x:hidden;
    height:100%;
  }

  .com-row, .player-row{ flex-direction:column; gap:3px; }

  #com-hand.card-row{
    height:8vh; height:8dvh;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(1, 1fr); /* 裏向きで判別の必要がないため1行で十分 */
  }
  #com-captured.captured-area{ height:10vh; height:10dvh; grid-template-columns: repeat(12, 1fr); }

  #player-captured.captured-area{ height:11vh; height:11dvh; grid-template-columns: repeat(10, 1fr); }
  #player-hand.card-row{ height:24vh; height:24dvh; }

  /* 場札は基本4×2(8枠)+予備1列(2枠)=5列×2行(10枠)で固定する。
     基本の8枚は必ず左側の4列(4×2)に収まり、9枚目以降が現れた時だけ
     5列目(予備2枠)が使われる。列数・行数は枚数によらず一切変更しない。
     また、取られた札のスロットは空きのまま残し、他の札を詰めない
     (renderFieldSlots / addToField / removeFromField を参照)。 */
  #field-area.card-row{ grid-template-columns: repeat(5, 1fr); }
  .table-row{ height:21vh; height:21dvh; }
  #deck-img, #drawn-card-img{ height:10vh; height:10dvh; }

  .reach-area{ font-size:.75rem; }
}

@media (max-width: 640px) and (orientation: portrait){
  #com-hand.card-row{ height:7vh; height:7dvh; }
  #com-captured.captured-area{ height:9vh; height:9dvh; }
  #player-captured.captured-area{ height:10vh; height:10dvh; }
  #player-hand.card-row{ height:20vh; height:20dvh; }
  .table-row{ height:18vh; height:18dvh; }
}