/* ==========================================
   PC-8001mkII Web Emulator - Main Stylesheet
   ========================================== */

/* Base layout variables */
:root {
  --screen-padding: 9px;
  --canvas-border-width: 4px;
  --canvas-padding: 12px;
  --canvas-border-color: #333333;
}

/* ==========================================
   Screen Container & Layered Canvas
   ========================================== */

/* 2枚のCanvasを包む親コンテナ (<div id="screen">) */
#screen {
  position: relative;          /* 絶対配置(.layer-text)の基準点 */
  display: inline-block;       /* 子Canvasのサイズに合わせて外枠を形成 */
  box-sizing: content-box;
  padding: var(--canvas-padding);
  border: var(--canvas-border-width) solid var(--canvas-border-color);
  border-radius: 8px;
  background-color: #000000;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  transform-origin: center center;
  transition: filter 0.03s;
}

/* 画面反転（画面フラッシュ効果） */
#screen.flash {
  filter: invert(100%);
}

/* 内部に動的生成されるCanvas共通スタイル */
#screen canvas {
  display: block;
  image-rendering: pixelated;  /* レトロPCドットのクッキリ描画 */
}

#screen canvas:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 【背面】グラフィックレイヤー (高解像度グラフィックVRAM用) */
#screen .layer-graphic {
  position: relative;
  z-index: 1;
  background-color: #000000;
}

/* 【前面】テキストレイヤー (F300H〜 テキストVRAM用) */
#screen .layer-text {
  position: absolute;
  top: var(--canvas-padding);
  left: var(--canvas-padding);
  z-index: 2;
  background-color: transparent; 
  pointer-events: none;         

  /* ★修正: paddingを含んでしまう100%から、パディング両側分を引き算してサイズを完璧に合わせる */
  width: calc(100% - var(--canvas-padding) * 2) !important;
  height: auto !important;
}

/* ==========================================
   Virtual Controller Styles
   ========================================== */
#virtual-controller {
  width: 100%;
  margin: 10px 0;
  box-sizing: border-box;

  padding: var(--canvas-padding);
  border: var(--canvas-border-width) solid var(--canvas-border-color);
  border-radius: 8px;
  background-color: #000000;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.v-btn {
  background: #333333;
  color: #ffffff;
  border: 2px solid #555555;
  border-radius: 8px;
  padding: 15px 5px;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px #111111;
}

.v-btn:active {
  background: #555555;
  transform: translateY(2px);
  box-shadow: 0 2px #111111;
}

/* ==========================================
   Mobile Responsive Rules
   ========================================== */
@media (max-width: 640px) {
  /* モバイル表示時の親容器縮小対応 */
  #screen {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 2枚のCanvasをレスポンシブにアスペクト比固定縮小 */
  #screen canvas {
    width: 100%;
    height: auto;
  }

  .v-btn {
    padding: 10px 8px;
    font-size: 0.95rem;
  }

  #virtual-controller {
    max-width: 100%;
    margin: 8px auto;
  }
}