/* gfx.css — เช็คเครื่อง (js/gfx.js): a K-look window over the ESC menu (inside .mn-wrap, so it scales with the menu).
   Left: the verdict, what the browser can tell about the machine, what the game set by itself. Right: what to change on
   the machine, most useful first (สำคัญ red, ช่วยได้ gold, แนะนำ blue, ดีแล้ว green). Sizes in --u like the menu. */
.gx-over {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; /* (over the menu's sticky title on a phone, z 6) */
  background: rgba(14, 12, 30, 0.5); border-radius: calc(24 * var(--u));
}
.gx-over[hidden] { display: none; }
.gx-win { width: calc(100% - 24 * var(--u)); height: calc(100% - 24 * var(--u)); display: flex; flex-direction: column; } /* (covers the menu, its frame peeking out) */
.gx-body { flex: 1; min-height: 0; display: grid; grid-template-columns: calc(340 * var(--u)) minmax(0, 1fr); gap: calc(16 * var(--u)); padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)); }
.gx-left { display: flex; flex-direction: column; gap: calc(12 * var(--u)); min-height: 0; }
.gx-right { display: flex; flex-direction: column; min-height: 0; gap: calc(8 * var(--u)); }

/* the verdict */
.gx-verdict { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); padding: calc(14 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); }
.gx-chip {
  padding: calc(6 * var(--u)) calc(22 * var(--u)) calc(8 * var(--u)); border-radius: calc(16 * var(--u)); border: calc(4 * var(--u)) solid var(--ink);
  font: 700 calc(26 * var(--u)) / 1.1 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(5 * var(--u)) var(--ink); paint-order: stroke fill;
  box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.18), 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.22);
}
.gx-chip.green { background: linear-gradient(#a6ec8c, #4fb54a); }
.gx-chip.blue { background: linear-gradient(#8fd3fb, #3b8fdc); }
.gx-chip.gold { background: linear-gradient(#ffe384, #f2b632); }
.gx-chip.red { background: linear-gradient(#ff9d9d, #e0525e); }
.gx-vsub { font: 400 calc(15.5 * var(--u)) / 1.3 'Mitr', sans-serif; color: #5d5470; }
.gx-vsub b { color: var(--ink); font-weight: 700; }

/* the machine */
.gx-spec { display: grid; grid-template-columns: calc(92 * var(--u)) minmax(0, 1fr); gap: calc(7 * var(--u)) calc(8 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); }
.gx-k { font: 700 calc(15.5 * var(--u)) / 1.3 'Mitr', sans-serif; color: #8a6d3b; }
.gx-v { min-width: 0; font: 600 calc(15.5 * var(--u)) / 1.3 'Mitr', sans-serif; color: var(--ink); overflow-wrap: anywhere; }
.gx-v small { margin-left: calc(4 * var(--u)); font: 400 calc(13 * var(--u)) / 1.3 'Mitr', sans-serif; color: #6a6078; }

/* what the game set */
.gx-auto { align-items: flex-start; padding: calc(10 * var(--u)) calc(14 * var(--u)); font-size: calc(15.5 * var(--u)); line-height: 1.55; }
.gx-auto .i { margin-top: calc(2 * var(--u)); }
.gx-ah { display: block; margin-bottom: calc(2 * var(--u)); font-weight: 700; color: #8fd3fb; }
.gx-dim { color: #a9adc8; font-size: calc(13 * var(--u)); }

/* what to change */
.gx-rh { font: 700 calc(20 * var(--u)) / 1.3 'Mitr', sans-serif; color: var(--ink); }
.gx-rh small { margin-left: calc(8 * var(--u)); font: 400 calc(13.5 * var(--u)) / 1 'Mitr', sans-serif; color: #6a6078; }
.gx-tips { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding-right: calc(6 * var(--u)); }
.gx-tip {
  display: grid; grid-template-columns: calc(36 * var(--u)) minmax(0, 1fr); gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(16 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid #d8c8a4; border-left-width: calc(8 * var(--u));
}
.gx-tip.red { border-left-color: #e0525e; }
.gx-tip.gold { border-left-color: #f2b632; }
.gx-tip.blue { border-left-color: #3b8fdc; }
.gx-tip.green { border-left-color: #4fb54a; background: #f3fbe9; }
.gx-num {
  display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid var(--ink);
  background: linear-gradient(#fffdf6, #e9dfc8); font: 800 calc(18 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: var(--ink);
}
.gx-tip.green .gx-num { background: linear-gradient(#a6ec8c, #4fb54a); color: #fff; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill; }
.gx-tb { min-width: 0; }
.gx-tb h4 { margin: 0 0 calc(3 * var(--u)); font: 700 calc(18.5 * var(--u)) / 1.3 'Mitr', sans-serif; color: var(--ink); }
.gx-tag {
  display: inline-block; vertical-align: middle; margin-left: calc(6 * var(--u)); padding: calc(1 * var(--u)) calc(9 * var(--u)) calc(2 * var(--u));
  border-radius: calc(10 * var(--u)); border: calc(2 * var(--u)) solid var(--ink); font: 600 calc(12.5 * var(--u)) / 1.3 'Mitr', sans-serif; color: var(--ink);
}
.gx-tag.red { background: #ffb3b3; }
.gx-tag.gold { background: #ffe08a; }
.gx-tag.blue { background: #bfe3fb; }
.gx-tag.green { background: #c6efb3; }
.gx-tb p { margin: 0; font: 400 calc(15 * var(--u)) / 1.45 'Mitr', sans-serif; color: #4d4560; }
.gx-tb ol { margin: calc(6 * var(--u)) 0 0; padding-left: calc(22 * var(--u)); font: 400 calc(14.5 * var(--u)) / 1.5 'Mitr', sans-serif; color: var(--ink); }
.gx-tb li { margin-bottom: calc(3 * var(--u)); }
.gx-tb .gx-more { margin-top: calc(5 * var(--u)); font-size: calc(13.5 * var(--u)); color: #7a6f8a; }
.gx-addr { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); vertical-align: middle; }
.gx-addr code {
  padding: calc(1 * var(--u)) calc(7 * var(--u)); border-radius: calc(7 * var(--u)); background: #2a2435; color: #ffe08a;
  font: 500 calc(13.5 * var(--u)) / 1.4 Consolas, 'Courier New', monospace;
}
.gx-copy {
  cursor: pointer; padding: calc(1 * var(--u)) calc(9 * var(--u)) calc(2 * var(--u)); border-radius: calc(9 * var(--u)); border: calc(2.5 * var(--u)) solid var(--ink);
  background: linear-gradient(#8fd3fb, #3b8fdc); color: #fff; font: 600 calc(12.5 * var(--u)) / 1.3 'Mitr', sans-serif;
  -webkit-text-stroke: calc(2.5 * var(--u)) var(--ink); paint-order: stroke fill;
}
.gx-copy:hover { filter: brightness(1.08); }
.gx-do { margin-top: calc(8 * var(--u)); height: calc(36 * var(--u)); font-size: calc(15.5 * var(--u)); }

/* the buttons along the bottom */
.gx-foot { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(16 * var(--u)) calc(14 * var(--u)); }
.gx-note { flex: 1; font: 400 calc(13 * var(--u)) / 1.3 'Mitr', sans-serif; color: #7a6f8a; }

/* The menu's landscape scale can shrink 40*u to 16 px. Keep the touch close
   control usable in both orientations without changing the desktop frame. */
html.mob .gx-win > .kw-title { min-height: 48px; flex-shrink: 0; padding-inline: 48px; }
html.mob .gx-win > .kw-title .kw-x { width: 44px; height: 44px; right: 4px; font-size: 20px; border-width: 2px; }

/* a phone held upright (html.mob-port, css/portrait.css makes every K window a full-screen sheet): one column, the
   whole sheet scrolls, the two buttons stay at the bottom */
html.mob-port .gx-over { place-items: stretch; border-radius: 0; }
html.mob-port .gx-win { height: 100%; display: block; }
html.mob-port .gx-body { grid-template-columns: minmax(0, 1fr); padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)); }
html.mob-port .gx-tips { overflow: visible; padding-right: 0; }
html.mob-port .gx-v, html.mob-port .gx-k { font-size: calc(17 * var(--u)); }
html.mob-port .gx-tb p { font-size: calc(16.5 * var(--u)); }
html.mob-port .gx-tb ol { font-size: calc(16 * var(--u)); }
html.mob-port .gx-foot {
  position: sticky; bottom: 0; z-index: 2; flex-wrap: wrap; padding: calc(10 * var(--u)); background: #f7efdc;
  border-top: calc(3 * var(--u)) solid #d8c8a4;
}
html.mob-port .gx-note { flex-basis: 100%; }
html.mob-port .gx-foot .kw-btn { flex: 1; }