/* หน้า /puffy/ — ฟอนต์ OFL อยู่ใน /assets/fonts/puffy/ (ไลเซนส์ OFL-*.txt ข้างไฟล์) */
@font-face { font-family: "Fredoka"; src: url("/assets/fonts/puffy/Fredoka.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/puffy/Nunito.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("/assets/fonts/puffy/Baloo2.ttf") format("truetype"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Mali"; src: url("/assets/fonts/puffy/Mali-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Itim"; src: url("/assets/fonts/puffy/Itim-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kanit"; src: url("/assets/fonts/puffy/Kanit-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Mitr"; src: url("/assets/fonts/puffy/Mitr-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }


/* โครงเดียวกับหน้าป้ายพาดหัว (.studio / .y2k-window / .tag-sec ใน app.css) — ที่นี่เพิ่มเฉพาะส่วนของตัวสร้างตัวอักษรพอง */
.puffy__stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; }
.puffy__stage canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.puffy__busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); color: #fff; font-weight: 600; }
.puffy__busy[hidden] { display: none; }
.puffy__warn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3xs); }
.puffy__warn:empty { display: none; }
.puffy__warn li { background: var(--color-warn-soft); color: var(--color-warn-ink); border: var(--rule-hair) solid var(--color-warn); border-radius: var(--radius-sm); padding: var(--space-3xs) var(--space-2xs); font-size: var(--text-sm); }
.puffy__warn li.ok { background: var(--color-good-soft); color: var(--color-good); border-color: var(--color-good); }
.puffy__mapbox { display: grid; gap: var(--space-2xs); color: var(--stage-ink); }
.puffy__mapbox canvas { width: 100%; max-height: 22rem; object-fit: contain; display: block; background: #1b1b1f; border-radius: var(--radius-sm); image-rendering: pixelated; }
.puffy__tools { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-xs); align-items: center; font-size: var(--text-sm); }
.puffy__mapbox .hint { color: var(--stage-ink-2); }

/* ช่องที่ไม่ใช่ input[type=text] ไม่ได้สไตล์ช่องกรอกของเว็บ — ตั้งสีเองให้ตามธีม (โหมดมืดจะได้ไม่เป็นกล่องขาวตัวขาว) */
.puffy-studio textarea, .puffy-studio input[type="number"] {
  width: 100%; font: inherit; box-sizing: border-box; padding: var(--space-xs) var(--space-sm);
  color: var(--color-ink); background: var(--color-paper-2);
  border: var(--rule-strong) solid transparent; border-radius: var(--radius-md);
}
.puffy-studio textarea::placeholder { color: var(--color-ink-3); }
.puffy-studio textarea:focus-visible, .puffy-studio input[type="number"]:focus-visible { border-color: var(--color-accent); background: var(--color-paper); outline: none; }
.puffy-studio textarea { min-height: 5.5em; resize: vertical; }
.puffy-studio .check { display: flex; gap: var(--space-2xs); align-items: center; margin-block-start: var(--space-2xs); }
.puffy-studio [hidden] { display: none !important; }
.puffy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-xs); }
.puffy-grid .hint { font-size: var(--text-xs); }
/* ช่องตัวเลขที่มีแถบเลื่อน: ชื่อบรรทัดบน · แถบเลื่อนซ้าย ช่องเลขขวา · คำอธิบายใต้ (แถวละช่อง นิ้วโป้งลากสะดวกกว่ากริดสองคอลัมน์) */
.puffy-grid:has(.field--range) { grid-template-columns: 1fr; gap: var(--space-xs); }
.puffy-grid .field--range { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; column-gap: var(--space-sm); align-items: center; }
.puffy-grid .field--range > label, .puffy-grid .field--range > .hint { grid-column: 1 / -1; }
.puffy-grid .field--range .puffy-range { margin: 0; touch-action: pan-y; }
.puffy-grid .field--range input[type="number"] { text-align: end; padding-inline: var(--space-xs); font-variant-numeric: tabular-nums; }
.choices--fonts .choice__label { display: grid; white-space: normal; }
.choices--fonts .choice__label small { color: var(--color-ink-3); font-size: var(--text-xs); }

/* กล่องแผนที่อยู่ในหมวดหูห่วงและเพชรของฟอร์ม (พื้นสว่าง) ไม่ใช่บนเวทีมืดอีกแล้ว */
.puffy-studio .puffy__mapbox { color: inherit; }
.puffy-studio .puffy__mapbox .hint { color: var(--color-ink-3); }
.puffy__warn li.info { background: var(--color-info-soft, var(--color-good-soft)); color: var(--color-ink-2); border-color: var(--color-rule-soft); }
#puffy #link-note { white-space: pre-line; }

/* มือถือ: เวทีตรึงบนจอตลอด (app.css) จึงต้องเตี้ย — ให้เหลือที่ให้ตัวเลือกด้านล่างเกินครึ่งจอ */
@media (max-width: 63.999rem) {
  .puffy-studio .studio__stage > .y2k-window__bar { display: none; }
  .puffy-studio .puffy__stage { aspect-ratio: auto; height: min(26vh, 11.5rem); }
  .puffy-studio .tag-stats { flex-wrap: nowrap; overflow-x: auto; }
  .puffy-studio .puffy__warn { max-height: 4.2em; overflow-y: auto; }
}

/* ปุ่มเทียบเหรียญ (มุมขวาบน) และปุ่มซูม (มุมขวาล่าง) ลอยบนภาพ 3D (สไตล์ .tag-view) */
.puffy__stage .tag-views { position: absolute; top: var(--space-3xs); right: var(--space-3xs); z-index: 2; margin: 0;
  background: color-mix(in oklch, var(--stage-bg) 80%, transparent); }
.puffy__stage .puffy__zoom { top: auto; bottom: var(--space-3xs); }

/* หมวดสีมีที่เต็มหน้า: ให้ขึ้นเป็นตารางหลายแถว ไม่ต้องเลื่อนแนวนอนเหมือนแถบป้าย */
.puffy-studio .tag-colors .swatches { flex-wrap: wrap; overflow: visible; gap: var(--space-2xs); }
.puffy-studio .tag-colors .swatch { width: 4.2rem; min-height: 3.4rem; }
.puffy-studio .tag-colors .swatch__dot { width: 1.75rem; height: 1.75rem; }

/* หลังบ้าน: ผังเพลทของแท็บ "เพลท" */
.puffy-plates { display: flex; flex-direction: column; gap: var(--space-xs); margin-block-start: var(--space-2xs); }
.puffy-plate { margin: 0; display: flex; flex-direction: column; gap: var(--space-3xs); align-items: flex-start; }
.puffy-plate canvas { max-width: 100%; height: auto; border-radius: var(--radius-sm); border: var(--rule-hair) solid var(--color-rule); }