/* ============================================================
   REtrO BOY 共通 シェル CSS
   ============================================================
   HERO QUEST 準拠 の GameBoy 機械 部分（外側 + ボタン + 操作系）を
   全 ゲーム で 共有 する ライブラリ。
   各 ゲーム は <link rel="stylesheet" href="/lib/gb-shell.css"> で 取り込む。
   このファイル を 上書き する CSS は ゲーム 固有（canvas 内容 / 特殊 UI）のみ。
   ============================================================ */

/* === html / body ベース === */
html, body {
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  color: #fff;
  touch-action: none;
  overscroll-behavior: none;
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient(135deg, var(--gbc-c3, #80807a) 0%, var(--gbc-c2, #a8a59a) 40%, var(--gbc-c3, #80807a) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

/* === GameBoy 本体 カラー（gb-config.js が 切替）=== */
:root {
  --gbc-c1: #c8c5b8;
  --gbc-c2: #a8a59a;
  --gbc-c3: #80807a;
  --joy-size: clamp(90px, 22vmin, 140px);
  --btn-size: clamp(54px, 13vmin, 76px);
  --btn-gap:  clamp(6px, 2vmin, 12px);
}

/* === ゲームボーイ 本体 フレーム === */
#gbc-body {
  position: relative;
  background: linear-gradient(180deg, var(--gbc-c1) 0%, var(--gbc-c2) 50%, var(--gbc-c3) 100%);
  border-radius: 18px 18px 60px 18px;
  box-shadow:
    0 6px 20px rgba(0,0,0,.6),
    inset 0 2px 4px rgba(255,255,255,.15),
    inset 0 -3px 8px rgba(0,0,0,.4);
  padding:
    calc(18px + env(safe-area-inset-top))
    calc(14px + env(safe-area-inset-right))
    calc(22px + env(safe-area-inset-bottom))
    calc(14px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100vw;
  max-height: 100dvh;
}

/* === 画面 エリア（暗緑 枠 + POWER / DOT MATRIX ロゴ）=== */
#screen-frame {
  background: linear-gradient(180deg, #2a3a3a 0%, #1a2a2a 100%);
  border-radius: 6px 6px 18px 6px;
  padding: 14px 14px 14px;
  border: 2px solid #1a0a2a;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
  width: 100%;
  position: relative;
  flex-shrink: 0;
}
#screen-frame::before {
  content: 'POWER';
  position: absolute;
  left: 8px; top: 4px;
  color: #ff5555;
  font-size: 6px;
  letter-spacing: .1em;
  z-index: 2;
}
#screen-frame::after {
  content: '★ DOT MATRIX WITH STEREO SOUND';
  position: absolute;
  right: 8px; top: 4px;
  color: #7fd47a;
  font-size: 6px;
  letter-spacing: .1em;
  z-index: 2;
}

/* === ゲーム 描画 領域（4:3 比率、CSS 上 は 可変）=== */
#game-container {
  position: relative;
  background: #000;
  overflow: hidden;
  margin: 0 auto;
  border-radius: 3px;
  width: 100%;
  aspect-ratio: 4/3;
  border: 2px solid #0a1a0a;
  min-width: 180px;
  min-height: 135px;
}
#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
}
#crt-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 4px);
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: multiply;
}
#crt-vig {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 70%, rgba(0,0,0,.22) 100%);
  pointer-events: none;
  z-index: 11;
}

/* === GBC ロゴ（画面 下 「REtrO BOY」+ 「DMG-XX」） === */
#gbc-logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 4px 8px 0;
  font-family: 'Courier New', monospace;
  flex-shrink: 0;
}
.gbc-logo-l {
  color: #ffd700;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .15em;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.gbc-logo-r {
  color: #fff;
  font-size: 8px;
  letter-spacing: .05em;
  opacity: .7;
}

/* === コントロール エリア（縦持ち 時）=== */
#controls {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 14px 6px 0;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* === バーチャル ジョイスティック === */
#joystick {
  position: relative;
  width: var(--joy-size);
  height: var(--joy-size);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}
#joystick-base {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4a4a4a 0%, #1a1a1a 80%);
  border: 3px solid #0a0a0a;
  box-shadow:
    0 4px 8px rgba(0,0,0,.5),
    inset 0 -3px 6px rgba(0,0,0,.4),
    inset 0 2px 4px rgba(255,255,255,.1);
}
#joystick-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--joy-size) * 0.5);
  height: calc(var(--joy-size) * 0.5);
  margin-left: calc(var(--joy-size) * -0.25);
  margin-top: calc(var(--joy-size) * -0.25);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff70d4 0%, #c04090 40%, #802060 80%);
  border: 2px solid #2a0a20;
  box-shadow:
    0 4px 8px rgba(0,0,0,.6),
    inset 0 -3px 6px rgba(0,0,0,.4),
    inset 0 3px 4px rgba(255,255,255,.3);
  transition: transform .04s linear;
  pointer-events: none;
}
#joystick-knob.active {
  box-shadow:
    0 0 18px rgba(255,150,220,.7),
    0 4px 8px rgba(0,0,0,.6),
    inset 0 3px 4px rgba(255,255,255,.4);
}

/* === ABXY ボタン === */
#btn-cluster {
  position: relative;
  width: calc(var(--btn-size) * 3 + var(--btn-gap) * 2);
  height: calc(var(--btn-size) * 3 + var(--btn-gap) * 2);
  flex-shrink: 0;
}
.tbtn {
  position: absolute;
  color: #fff;
  font-weight: bold;
  font-family: inherit;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 30;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1;
  padding: 0;
  border: 3px solid;
  width: var(--btn-size);
  height: var(--btn-size);
  box-shadow:
    0 4px 8px rgba(0,0,0,.5),
    inset 0 -3px 6px rgba(0,0,0,.4),
    inset 0 3px 4px rgba(255,255,255,.3);
  font-size: clamp(22px, 6vmin, 30px);
  text-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
.tbtn:active, .tbtn.pressed {
  transform: translateY(2px);
  box-shadow:
    0 2px 4px rgba(0,0,0,.4),
    inset 0 -2px 4px rgba(0,0,0,.5),
    inset 0 2px 4px rgba(255,255,255,.2);
}

/* SFC カラー：A=緑（右） / B=黄（下） / X=青（左） / Y=赤（上） */
#btn-a {
  right: 0;
  top: calc(var(--btn-size) + var(--btn-gap));
  background: radial-gradient(circle at 30% 30%, #98e088 0%, #3aa55a 60%, #1a4a1a 100%);
  border-color: #0a3a0a;
  color: #fff;
}
#btn-y {
  left: calc(var(--btn-size) + var(--btn-gap));
  top: 0;
  background: radial-gradient(circle at 30% 30%, #ff8888 0%, #c41e3a 60%, #7a0e1a 100%);
  border-color: #5a0a1a;
  color: #fff;
}
#btn-b {
  left: calc(var(--btn-size) + var(--btn-gap));
  top: calc(var(--btn-size) * 2 + var(--btn-gap) * 2);
  background: radial-gradient(circle at 30% 30%, #fff8c0 0%, #fde047 60%, #c8a020 100%);
  border-color: #7a6a10;
  color: #3a2010;
}
#btn-x {
  left: 0;
  top: calc(var(--btn-size) + var(--btn-gap));
  background: radial-gradient(circle at 30% 30%, #88c8ff 0%, #4488ff 60%, #1a4aaa 100%);
  border-color: #0a1a5a;
}

/* === L / R ショルダー ボタン === */
#lr-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 8px;
  margin-top: 8px;
  flex-shrink: 0;
}
.lr-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 32px;
  background: linear-gradient(180deg, #5a5a5a 0%, #2a2a2a 100%);
  border: 3px solid #0a0a0a;
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  box-shadow:
    0 3px 6px rgba(0,0,0,.5),
    inset 0 1px 2px rgba(255,255,255,.15);
  padding: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.lr-btn:active, .lr-btn.pressed {
  transform: translateY(2px);
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.lr-btn .lr-label {
  font-size: 14px;
  color: #fde047;
  font-weight: bold;
  line-height: 1;
}
.lr-btn .lr-sub {
  font-size: 8px;
  color: #aaa;
  font-family: 'DotGothic16', sans-serif;
  line-height: 1;
  margin-top: 2px;
}

/* === START / SELECT === */
#start-select {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  width: 100%;
  flex-shrink: 0;
}
.ss-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 22px;
  background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
  border: 2px solid #0a0a0a;
  border-radius: 11px;
  color: #bbb;
  font-family: inherit;
  cursor: pointer;
  box-shadow:
    0 2px 4px rgba(0,0,0,.5),
    inset 0 1px 2px rgba(255,255,255,.1);
  padding: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ss-btn:active, .ss-btn.pressed {
  transform: translateY(1px);
  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.ss-btn .ss-label {
  font-size: 8px;
  letter-spacing: .1em;
  color: #fde047;
  font-weight: bold;
}
.ss-btn .ss-sub {
  font-size: 7px;
  color: #7fd47a;
  font-family: 'DotGothic16', sans-serif;
  line-height: 1;
}

/* === もどる ボタン（左 上）=== */
.back-btn {
  position: fixed;
  top: 8px;
  left: 8px;
  background: #3a1a1a;
  color: #ff8a8a;
  border: 2px solid #ff3055;
  border-radius: 4px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  z-index: 100;
}
.back-btn:active {
  background: #5a1a1a;
}

/* === 縦画面（スマホ portrait）：HERO QUEST 準拠 の レイアウト ===
   画面 上 + コントロール 下、ゲームボーイ 本体 を viewport 一杯 に
   全 ゲーム の ローカル CSS を 上書き する ため !important 使用 */
@media (orientation: portrait) and (pointer: coarse) {
  html, body { overflow: hidden !important; }
  body {
    align-items: flex-start !important;
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: 0 !important;
  }
  #gbc-body {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    flex-direction: column !important;
    padding: 4px 4px 6px !important;
    border-radius: 0 !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow: hidden !important;
  }
  #screen-frame {
    width: 100% !important;
    padding: 12px 6px 8px !important;
    flex-shrink: 1 !important;
    min-height: 0 !important;
    max-width: none !important;
  }
  #screen-frame::before { font-size: 7px !important; left: 6px !important; top: 4px !important; }
  #screen-frame::after  { font-size: 7px !important; right: 6px !important; top: 4px !important; }
  #game-container {
    width: 100% !important;
    max-height: 48dvh !important;
    height: auto !important;
  }
  #gbc-logo { display: none !important; }
  #controls {
    width: 100% !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 max(6vw, 22px) !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
  }
  #lr-buttons {
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    justify-content: space-around !important;
    width: 100% !important;
  }
  #start-select, #ss-btns {
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 0 8px !important;
  }
  .lr-btn { width: 78px !important; height: 28px !important; }
  .ss-btn { width: 60px !important; height: 20px !important; }
  :root {
    --joy-size: clamp(86px, 22vw, 140px);
    --btn-size: clamp(46px, 13vw, 72px);
    --btn-gap:  clamp(4px, 1.5vw, 10px);
  }
}

/* === PC（マウス + ホバー）：ゲームボーイ 装飾 を 外し、canvas だけ 大きく === */
/* 全 ゲーム の ローカル CSS を 上書き する ため !important 使用 */
@media (hover: hover) and (pointer: fine) {
  body {
    background: linear-gradient(135deg, #1a1a2a 0%, #2a2a3a 100%) !important;
    padding: 0 !important;
  }
  #gbc-body {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 24px 24px 50px !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: min(100vw, calc(100dvh * 4 / 3)) !important;
    height: auto !important;
    max-height: 100dvh !important;
    gap: 0 !important;
    margin: 0 auto !important;
    align-items: center !important;
  }
  #screen-frame {
    border: 3px solid #3a3a4a !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.5) !important;
    max-width: none !important;
    width: 100% !important;
    padding: 14px !important;
    display: block !important;
  }
  #game-container {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 4/3 !important;
  }
  /* GameBoy 周辺 UI（ボタン 等）は PC では 非表示 */
  #joystick, #btn-cluster, #lr-buttons, #start-select, #gbc-logo, #controls, #ss-btns, #speaker {
    display: none !important;
  }
  /* キーボード ヒント を 画面 下 中央 に */
  body::after {
    content: '⌨️  矢印=移動   Z=A   X=B   A=X   S=Y   Q=L   E=R   Enter=START   右Shift=SELECT';
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    color: #aaa;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.05em;
    z-index: 100;
    background: rgba(0,0,0,0.5);
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    pointer-events: none;
    white-space: nowrap;
  }
}

/* === 横画面（スマホ のみ）：body を viewport 一杯 に、L/R を 上、SELECT/START を 下 に === */
/* pointer:coarse で タッチ デバイス（スマホ・タブレット）のみ 適用、PC は 通常 表示 */
@media (orientation: landscape) and (pointer: coarse) {
  html, body {
    height: 100dvh;
    overflow: hidden;
  }
  #gbc-body {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding:
      calc(40px + env(safe-area-inset-top))
      calc(14px + env(safe-area-inset-right))
      calc(36px + env(safe-area-inset-bottom))
      calc(14px + env(safe-area-inset-left));
    justify-content: center;
  }
  #lr-buttons {
    position: absolute;
    top: calc(8px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    padding: 0;
    margin-top: 0;
    gap: 140px;
    z-index: 50;
    background: transparent;
  }
  .lr-btn {
    width: 80px;
    height: 28px;
    border-radius: 14px 14px 4px 4px;
  }
  #start-select {
    position: absolute;
    bottom: calc(6px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    gap: 18px;
    margin-top: 0;
    width: auto;
    z-index: 50;
    background: rgba(0,0,0,.4);
    padding: 4px 10px;
    border-radius: 14px;
  }
}