/* ============================================================
   ハイ&ロー 固有スタイル（games.css を土台に盤面のみ）
   ============================================================ */
.hl-stage{ width:100%; max-width:360px; margin:6px auto 2px; }

/* カード（AI生成のピクセル絵柄：表=白フレーム／裏=紫金／画像未取得でも下地色で成立） */
.hl-card{ width:120px; height:168px; margin:0 auto; border-radius:14px;
  background:#fff center/cover; background-image:url('/game/hilo/i_frame.png'); image-rendering:pixelated;
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 8px 22px rgba(0,0,0,.5); }
.hl-card .rk{ font-size:60px; font-weight:900; line-height:1; text-shadow:0 2px 6px rgba(255,255,255,.7); }
.hl-card .su{ position:absolute; font-size:18px; font-weight:900; }
.hl-card .su.tl{ top:8px; left:10px; } .hl-card .su.br{ bottom:8px; right:10px; transform:rotate(180deg); }
.hl-card.red .rk, .hl-card.red .su{ color:#E53935; }
.hl-card.black .rk, .hl-card.black .su{ color:#212121; }
.hl-card.back{ background:#5E35B1 center/cover; background-image:url('/game/hilo/i_back.png'); }
.hl-card.back .rk{ color:rgba(255,255,255,.92); font-size:48px; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.hl-card.flip{ animation:hlFlip .42s ease; }
@keyframes hlFlip{ 0%{ transform:rotateY(0); } 50%{ transform:rotateY(90deg); } 100%{ transform:rotateY(0); } }

.hl-prompt{ text-align:center; color:#ccc; font-size:.86rem; margin:12px 0 8px; min-height:20px; }

/* HI / LO 選択 */
.hl-choices{ display:flex; gap:10px; max-width:320px; margin:0 auto; }
.hl-choice{ flex:1; border:none; border-radius:14px; padding:12px 6px; cursor:pointer; color:#fff;
  display:flex; flex-direction:column; align-items:center; gap:2px; font-weight:800; transition:.12s; }
.hl-choice .ar{ font-size:26px; line-height:1; }
.hl-choice .lb{ font-size:.82rem; }
.hl-choice .mx{ font-size:.92rem; color:#FFE082; font-weight:900; }
.hl-choice.hi{ background:linear-gradient(135deg,#43A047,#2E7D32); }
.hl-choice.lo{ background:linear-gradient(135deg,#E53935,#B71C1C); }
.hl-choice:active{ transform:translateY(2px); }
.hl-choice:disabled{ opacity:.4; cursor:not-allowed; }

/* 倍率 / 確保メーター */
.hl-meter{ display:flex; justify-content:center; gap:18px; margin:14px auto 4px; }
.hl-meter .box{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:6px 18px; text-align:center; }
.hl-meter .cap{ font-size:.62rem; color:#9aa; font-weight:700; }
.hl-meter .val{ font-size:1.3rem; font-weight:900; }
.hl-meter .val.mult{ color:#FFD54F; } .hl-meter .val.cash{ color:#69F0AE; }

.hl-result{ font-size:20px; font-weight:800; min-height:30px; margin-top:10px; text-align:center; }
.hl-result.win{ color:#69F0AE; } .hl-result.lose{ color:#EF5350; }

/* レイアウト: 操作ボタンを上・盤面と説明は下（DOM順を order で再配置） */
.gc-wrap{ display:flex; flex-direction:column; }
#gcSelectors{ order:2; }
#gcBoard{ order:3; }
.gc-info-box{ order:9; }