/* ── layout.css ── โครงหน้าจอ, grid, screen switching ───────────────── */
#stage{position:relative;width:100%;max-width:800px}
canvas#world{width:100%;display:block;image-rendering:pixelated;background:#2c4a2a;
 border:4px solid #6b5636;border-radius:6px;box-shadow:0 0 0 4px #241a10,0 10px 24px #0008}

#hud{position:absolute;top:6px;left:6px;display:flex;flex-direction:column;gap:4px;pointer-events:none}
#coins{position:absolute;top:6px;right:6px;background:#0e1219dd;border:2px solid #6b5636;
 border-radius:6px;padding:3px 8px;font-size:11px;color:#ffd98a}
#topbtns{position:absolute;top:34px;right:6px;display:flex;flex-direction:column;gap:5px}
#topbtns button{padding:5px 9px;font-size:11px}

#areaTag{position:absolute;left:8px;bottom:8px;background:#0b0f16f0;border:3px solid #6b5636;
 border-left-width:7px;border-radius:7px;padding:6px 14px 6px 11px;z-index:12;
 opacity:0;transform:translateX(-14px);transition:opacity .45s,transform .45s;pointer-events:none;
 box-shadow:0 4px 14px #000a}
#areaTag.on{opacity:1;transform:translateX(0)}
#areaTag b{display:block;font-size:13px;letter-spacing:1px}
#areaTag small{display:block;font-size:10px;color:#a8b6c8;margin-top:2px}

#prompt{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:#0e1219ee;
 border:2px solid #ffd98a;border-radius:6px;padding:4px 11px;font-size:11px;display:none;z-index:11}

#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:30;border-radius:4px}
#flash.go{animation:flcut .45s ease-out}
@keyframes flcut{0%{opacity:0}10%{opacity:1}26%{opacity:.1}42%{opacity:.95}62%{opacity:.2}100%{opacity:0}}

.ov{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:12px;z-index:20;
 background:#060910c9}
.ov.on{display:flex}

#dialog{position:absolute;left:10px;right:10px;bottom:10px;padding:12px 14px;display:none;z-index:25}
#dialog.on{display:block}
#dlgName{color:#ffd98a;font-size:12px;margin-bottom:4px}
#dlgText{font-size:13px;line-height:1.5;min-height:38px}
#dlgHint{text-align:right;font-size:10px;color:#9fb0c8}

.card{width:100%;max-width:700px;padding:14px;max-height:100%;overflow:auto}
.card h2{font-size:15px;color:#ffd98a;margin-bottom:4px;letter-spacing:1px;
 display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.hint{font-size:10px;color:#7f8fa4;margin-bottom:9px}
.rowbtns{display:flex;gap:7px;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}

#touch{position:absolute;bottom:8px;left:8px;right:8px;display:none;justify-content:space-between;z-index:15}
#touch .pad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px);gap:3px}
#touch button{opacity:.85;padding:0;font-size:15px}
@media(hover:none){#touch{display:flex}#areaTag{bottom:152px}}