/* 契約 L7 的 pixel 視窗，以及 L8 的截圖佔位框。
   純 CSS，不用圖片。顏色一律 var(--px-*)，來源 tokens.generated.css（契約 L1）。 */

.win {
  border: 3px solid var(--px-accent-deep);
  border-radius: 4px; /* 不是完全直角：直角在 1× 螢幕上會有鋸齒 */
  background: var(--px-surface-panel);
  overflow: hidden;
}

/* 標題列：--px-accent-deep (#222A5C) 底 + --px-highlight (#CCE2E1) 字 = 10.0:1，
   跟 base.css 的 .btn 同一組（那裡有完整的推導）。過 WCAG AA 與 AAA。 */
.win__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--px-accent-deep);
  color: var(--px-highlight);
}

.win__name {
  font-family: 'Cubic11';
  font-size: 22px;
  margin-right: auto;
}

/* 右上角那顆裝飾按鈕。**不可點**——契約 L7／L19：不做任何假的互動。
   （Task 7 成功視窗的關閉鍵是另一個 class，那一顆是真的可點。） */
.win__deco {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--px-wood);
  border: 2px solid var(--px-ink);
  pointer-events: none;
}

/*
 * 契約 L7 指名這一顆是**放大符號**，不是一個空的木色方塊。
 *
 * 純 CSS 畫（同 L7 的「不用圖片」）：一個置中的小方框，就是那個年代的視窗
 * maximize 鍵。10px 外框 + 2px 邊，放在 18×18 的內容區裡四邊各留 4px。
 *
 * pointer-events 不用再寫一次——`.win__deco` 那條會連 ::after 一起關掉
 * （pointer-events 的計算值會繼承，而且 none 的元素連自己的擬元素都收不到事件）。
 * 顏色用 --px-ink 配底色 --px-wood (#B55945)，跟外框那條邊同一個顏色。
 */
.win__deco::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--px-ink);
}

.win__body { display: block; }

/*
 * 截圖。三張必須同一台裝置、同一縮放比例截，否則三個視窗大小不一。
 *
 * aspect-ratio 是 web/shots/ 三張實際量出來的（sips，2026-09-02）：
 * map.png 979×2000、notes.png 982×2000、achievements.png 983×2000。
 * 最寬與最窄差 983/979 = 0.41%，object-fit: cover 吃得掉。
 * **不是** iPhone 規格的 1179/2556——那個是照裝置規格猜的，實際截圖不是那個比例。
 * 固定比例的用途是「換圖不動排版」（契約 L8）。
 *
 * image-rendering 明寫 auto，而且不能改成 pixelated。這三張**不是點陣素材**，
 * 是已經被平滑重取樣過的截圖。量測（PIL 逐像素掃 map.png，每 7 列取一列，
 * 共 286 列 / 150770 個水平顏色變化點）：
 *   - 變化點間距直方圖：1px 出現 140333 次，2px 只有 4891、3px 1439。
 *     真正的點陣圖會集中在某個固定間距（放大 N 倍就是 N），這張集中在 1。
 *   - 變化點 x 座標對 2/3/4/6 取模的分布完全均勻（49.9/50.1、33.3/33.2/33.5、
 *     25.0×4、16.7×6）——**沒有任何像素網格對齊**。
 *   - review 時另外把 map.png 放大 8 倍逐像素看過：邊緣是柔化漸層，不是硬邊階梯。
 * 這三張在頁面上是 979px 縮到約 314px（縮小，review 量的 Task 6 版位）。
 * 對一張已經平滑的圖做最近鄰縮小會產生嚴重鋸齒與摩爾紋，
 * 而且**沒有任何測試會紅，只會在螢幕上很醜**——所以 base.css 那條全域的
 * `img { image-rendering: pixelated }` 已經收窄成只選 .pixelated，
 * 這裡再明寫一次 auto，讓意圖留在檔案裡而不是只留在 git log。
 * src/__tests__/landingWindow.test.ts 兩邊都盯著。
 */
.shot {
  display: block;
  width: 100%;
  aspect-ratio: 491 / 1000;
  object-fit: cover;
  image-rendering: auto;
}

/*
 * Jane 給圖之前的佔位框。
 *
 * **現在沒有任何地方用到它，但這不是死碼，不要清掉（R047）。**
 * 契約 §4：第三格原本是「分享」，2026-09-02 改成「成就」只是因為那三張截圖裡沒有圖卡；
 * 分享沒有被否決。之後補一張圖卡截圖就會加第四段敘事，那一段開場用的就是這個佔位框。
 * src/__tests__/landingWindow.test.ts 有一條測試盯著它還在。
 */
.shot--empty {
  display: grid;
  place-items: center;
  background: var(--px-surface-flag-empty);
  color: var(--px-ink);
}