/* features: EN|TH pill, tags, share bar, covers, travel map, comments (from approved mockups) */
.ttlrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.ttlrow h1{margin:.1em 0 .3em}
.lang{display:inline-flex;border:1px solid var(--amber);font-size:12px;flex:none}
.lang a{padding:2px 10px;color:var(--amber)}.lang a:hover{background:rgba(232,145,58,.12)}
.lang a.on{background:var(--amber);color:#14100c;font-weight:600}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px;align-items:center}
.chip{border:1px solid var(--faint);padding:2px 10px;font-size:13px;color:var(--amber);line-height:1.5}
.chip::before{content:"#";opacity:.6}a.chip:hover{border-color:var(--amber)}
.chip.on{background:var(--amber);color:#14100c;border-color:var(--amber)}
.chips.sm{margin:6px 0 0;gap:6px}.chips.sm .chip{font-size:11px;padding:0 7px}
.chips.filter .dim{font-size:12px}.showing{font-size:12px;margin:0 0 10px}
.card[hidden]{display:none}.card.flash{background:rgba(232,145,58,.14);outline:1px solid var(--amber)}
.card .thumb{width:72px;height:54px;object-fit:cover;flex:none;border:1px solid var(--line);filter:sepia(.2) saturate(.9)}
.prose img{display:block;margin:1.2em auto;border:1px solid var(--line);height:auto}
.prose figure{margin:1.2em 0}.prose figcaption{font-size:12px;text-align:center;opacity:.7}
/* share */
.share{margin-top:28px;border-top:1px dashed var(--faint);padding-top:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.share .lbl{opacity:.7}
.share a{border:1px solid var(--amber);color:var(--amber);padding:4px 10px;font-size:13px;box-shadow:3px 3px 0 #000;transition:transform .1s}
.share a:hover{background:var(--amber);color:#14100c;transform:translate(-1px,-1px)}.share a:hover b{color:#14100c}
.share a b{font-weight:600}
/* travel map */
.mapbox{border:1px solid var(--amber);box-shadow:4px 4px 0 #000;padding:12px;margin:18px 0 6px;background:#120d08}
.maphd{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:13px;margin-bottom:8px;color:var(--amber)}
.mapwrap{position:relative}#wmap{width:100%;display:block;image-rendering:pixelated}
.pin{position:absolute;width:22px;height:22px;transform:translate(-50%,-100%);cursor:pointer;z-index:1;background:none;border:0;padding:0;animation:bob 1.6s ease-in-out infinite}
.pin canvas{width:100%;height:100%;image-rendering:pixelated;display:block;filter:drop-shadow(0 0 1px #14100c) drop-shadow(0 0 4px #ffb347aa)}
.pin::after{content:"";position:absolute;left:50%;bottom:-3px;width:8px;height:2px;margin-left:-4px;background:#14100c99;border-radius:50%}
.pin:hover,.pin:focus-visible{z-index:3;outline:none}.pin:hover canvas,.pin:focus-visible canvas{filter:drop-shadow(0 0 1px #14100c) drop-shadow(0 0 7px #ffd27a)}
.pin .pn{position:absolute;right:-8px;top:-6px;background:var(--amber);color:#14100c;font:700 10px/14px var(--mono);min-width:14px;padding:0 3px;box-shadow:2px 2px 0 #000}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -3px}}
.tip{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-20%);background:#14100c;border:1px solid #ffd27a;padding:6px 10px;font-size:12px;white-space:nowrap;color:#ffd27a;box-shadow:3px 3px 0 #000;text-align:left;line-height:1.5}
.tip.left{transform:translateX(-80%)}
.pin:hover .tip,.pin:focus-visible .tip{display:block}
.tip b{display:block;font-size:13px;color:#ffd27a}.tip span{opacity:.7}
.mapempty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;background:rgba(18,13,8,.55);font-size:12.5px;padding:10px}
.mapempty b{color:var(--gold);font-size:14px}
.legend{display:flex;gap:16px;font-size:12px;opacity:.8;margin-top:8px;flex-wrap:wrap}
.legend i{display:inline-block;width:8px;height:8px;margin-right:5px;vertical-align:middle}
.legend .lg-n{width:auto;height:auto;background:var(--amber);color:#14100c;font:700 9px/12px var(--mono);font-style:normal;padding:0 3px}
@media(max-width:600px){.pin{width:16px;height:16px}.tip{font-size:10.5px}.mapempty{font-size:11px}.mapempty .th{display:none}}
/* comments */
.comments{margin-top:34px}
.cm-h{font-size:1.05rem;margin:0 0 12px}
.cm{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.av{width:36px;height:36px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-family:Arial,sans-serif;object-fit:cover}
.cm-p .av{width:22px;height:22px;font-size:11px;vertical-align:middle}
.cm .who{font-size:13px}.cm .who b{color:var(--gold)}.cm .who .dt{opacity:.6;margin-left:8px}
.vf{font-size:11px;border:1px solid #5a8a4a;color:#9fd38a;padding:0 6px;margin-left:8px;white-space:nowrap}
.pend{font-size:11px;border:1px dashed var(--amber);color:var(--amber);padding:0 6px;margin-left:8px}
.cm p{margin:4px 0 0;font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.cm.new{background:#2a1c10;outline:1px solid #e8913a55;padding-left:8px}
.box{border:1px solid var(--amber);box-shadow:4px 4px 0 #000;padding:14px;margin:16px 0;background:#120d08}
.cm-p{margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cm-fine{font-size:12px;opacity:.6;margin-top:10px}.cm-err{color:#e88;font-size:12px;margin-top:6px}
.comments textarea{width:100%;min-height:90px;background:#0d0906;color:var(--gold);border:1px solid #6a4a2a;font:inherit;font-size:14px;padding:10px;resize:vertical}
.comments textarea:focus{outline:none;border-color:var(--amber)}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;gap:8px;flex-wrap:wrap}
.pbtn{border:1px solid var(--amber);background:var(--amber);color:#14100c;font:inherit;font-weight:700;padding:5px 16px;box-shadow:3px 3px 0 #000;cursor:pointer}
.pbtn:disabled{opacity:.5}
.linkbtn{background:none;border:0;color:var(--amber);font:inherit;cursor:pointer;text-decoration:underline;padding:0}
/* variant B sign-in button: sits above the CRT overlay so the Google G stays crisp */
.tb{position:relative;z-index:51;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--amber);color:var(--amber);background:#14100c;font:600 14px var(--mono);padding:7px 14px;box-shadow:3px 3px 0 #000;cursor:pointer}
.tb .gl{width:14px;height:14px;display:block}.tb .gi{display:inline-flex;padding:2px}
.tb .cur{visibility:hidden}
.tb:hover,.tb:focus-visible{background:var(--amber);color:#14100c;box-shadow:3px 3px 0 #000,0 0 12px #ffb34777;transform:translate(-1px,-1px);outline:none}
.tb:hover .gi,.tb:focus-visible .gi{background:#fff}.tb:hover .cur,.tb:focus-visible .cur{visibility:visible;animation:blink 1s steps(1) infinite}
/* moderation */
.modchips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.b{border:1px solid var(--amber);color:var(--amber);background:none;padding:1px 8px;margin-right:4px;font:12px var(--mono);display:inline-block;margin-bottom:3px;cursor:pointer}
.b.on{background:var(--amber);color:#14100c}.b.ok{border-color:#9fd38a;color:#9fd38a}.b.del{border-color:#d9534f;color:#e88}
.modwrap{overflow-x:auto}
table.mod{width:100%;border-collapse:collapse;font-size:13px}
.mod th,.mod td{border-bottom:1px solid #3a2c1e;padding:8px 6px;text-align:left;vertical-align:top}
.mod th{color:var(--amber);font-weight:600}.st{font-size:11px;padding:0 6px;border:1px solid}
@media(max-width:600px){.cm p{font-size:13px}.cm .who .dt{display:block;margin-left:0}}
.pin:hover,.pin:focus-visible{animation-play-state:paused}