/* Floralia · the Esc menu, design D "ผนังไอคอนใหญ่" (js/escmenu.js; 2026-10-24 the user: "ให้โชว์เหมือนเกม MIR4", picked D on
   escmir4pick.html): a window in the middle of the screen (then "ปรับให้ไม่เต็มหน้าได้ไหม": no longer the whole screen, only as tall
   as its icons, the game seen dimmed round it - a click there closes it; then "ปรับย่อให้เหลือครึ่งหน้า อยู่ฝั่งขวา": half the screen on
   the right, full height, 7 icons a row, the game seen on the left), dark with the gold hairline, every system a big unframed icon, one row per category under a
   thin gold heading; red counts, small keys, locked / online-only dimmed with a tag. */
#escm { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; padding: 0; background: none; }
#escm[hidden] { display: none; }
#escm .em-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 5, 8, .1), rgba(6, 5, 8, .5)); }
#escm .em-panel { position: relative; width: 50vw; height: 100vh; display: flex; flex-direction: column; padding: 1em 1.6em .9em; border-radius: 0;
  font: 400 min(1.05vw, 1.52vh) / 1.3 Prompt, Mali, sans-serif; color: #e8e2d4;
  background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 200, 120, .06), transparent 70%), linear-gradient(180deg, rgba(14, 11, 16, .94), rgba(8, 7, 10, .97));
  box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .35), inset 0 0 0 5px rgba(0, 0, 0, .5), inset 0 0 0 6px rgba(201, 162, 74, .14), -30px 0 60px rgba(0, 0, 0, .55); backdrop-filter: blur(6px); }
#escm .em-panel::before, #escm .em-panel::after { content: ''; position: absolute; width: 1em; height: 1em; border: 2px solid #f3d688; pointer-events: none; }
#escm .em-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
#escm .em-panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
#escm.in .em-panel { animation: em-in .18s ease-out; }
@keyframes em-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
#escm button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
#escm .em-top { display: flex; align-items: center; gap: .8em; padding-bottom: .6em; }
#escm .em-top b { font-size: 1.9em; font-weight: 600; letter-spacing: .04em; color: #f6e7c2; }
#escm .em-top small { color: #8f8778; font-size: .85em; }
#escm .em-sp { flex: 1; }
#escm .em-ib { width: 2.5em; height: 2.5em; display: grid; place-items: center; border-radius: 4px; border: 1px solid rgba(214, 176, 96, .55); background: linear-gradient(180deg, #2a2219, #15110c); color: #f0dca8; font-size: 1.35em; line-height: 1; }
#escm .em-ib .em-gear { font-size: 1.3em; line-height: 1; }   /* (the ⚙ glyph draws small: bigger inside its box) */
#escm .em-ib:hover { border-color: #f3d688; color: #fff0c0; }
#escm .em-hair { height: 2px; flex: none; background: linear-gradient(90deg, transparent, #c9a24a 15%, #f3d688 50%, #c9a24a 85%, transparent); opacity: .8; }
/* the wall: 7 columns (การผจญภัย takes two rows); a heading spans the row */
#escm .em-wall { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: min-content; gap: .15em .5em; align-content: center; padding: .3em 0; }
#escm .em-wall::-webkit-scrollbar { width: 6px; } #escm .em-wall::-webkit-scrollbar-thumb { background: rgba(201, 162, 74, .4); border-radius: 6px; }
#escm .em-hd { grid-column: 1 / -1; display: flex; align-items: center; gap: .6em; margin: .15em 0 0; font-size: 1.02em; font-weight: 600; color: #e9c879; }
#escm .em-hd::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 162, 74, .55), transparent); }
#escm .em-hd img { width: 1.6em; height: 1.6em; object-fit: contain; }
#escm .em-t { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2em; padding: .3em 0 .25em; border-radius: 6px; color: #ddd3bd; }
#escm .em-ic { position: relative; display: block; width: 3.2em; height: 3.2em; font-style: normal; }
#escm .em-ic img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); transition: transform .12s; }
#escm .em-t span { max-width: 100%; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#escm .em-t .n { position: absolute; top: -.3em; right: -.55em; min-width: 1.55em; height: 1.55em; padding: 0 .35em; box-sizing: border-box; border-radius: 99px; background: #e0303f; color: #fff;
  font: 600 .72em/1.55em Prompt, sans-serif; font-style: normal; text-align: center; white-space: nowrap; box-shadow: 0 0 0 2px #1a0d0d; }
#escm .em-t kbd { position: absolute; top: .25em; left: 10%; font: 500 .7em Prompt, sans-serif; color: #a89a7c; }
#escm .em-t em { position: absolute; bottom: 1.9em; left: 50%; transform: translateX(-50%); padding: 0 .45em; border-radius: 3px; background: rgba(0, 0, 0, .72); color: #c8bea8; font-style: normal; font-size: .68em; white-space: nowrap; }
#escm .em-t:hover:not(.off) { background: radial-gradient(closest-side, rgba(255, 214, 110, .2), transparent); color: #fff3d6; }
#escm .em-t:hover:not(.off) .em-ic img { transform: translateY(-2px) scale(1.06); }
#escm .em-t.off { opacity: .45; }
#escm .em-t.off img { filter: grayscale(1); }
#escm .em-foot { display: flex; gap: .6em; align-items: center; justify-content: flex-end; padding-top: .7em; border-top: 1px solid rgba(201, 162, 74, .18); }
#escm .em-hint { margin-right: auto; color: #8f8778; font-size: .85em; }
#escm .em-btn { padding: .6em 1.6em; border-radius: 3px; border: 1px solid rgba(214, 176, 96, .45); background: linear-gradient(180deg, #2a2219, #15110c); color: #e8dcc0; }
#escm .em-btn:hover { border-color: #f3d688; }
#escm .em-btn.gold { color: #2c1a08; border-color: #fff0b0; background: linear-gradient(180deg, #ffe9a0, #f2b64a 55%, #c9832a); font-weight: 600; }
/* a phone / narrow window: the whole screen, bigger type, the wall scrolls */
@media (max-width: 900px), (max-aspect-ratio: 4/3) {
  #escm .em-panel { width: 100vw; height: 100vh; max-height: none; border-radius: 0; font-size: clamp(11px, 2vw, 16px); padding: .8em 1em; }
  #escm .em-wall { align-content: start; }
}
@media (prefers-reduced-motion: reduce) { #escm .em-panel { animation: none; } }