/* Đường cờ thế (/co-the/duong, the path header and result on the solve screen, the entry cards) — from the approved
   artifact mock "Đường cờ thế — mẫu" (28/09): giấy dó paper, a Đông Hồ river of scalloped waves, wooden stops like the
   xiangqi pieces, the village gate as màn cổng. Light from the upper left: every shadow falls down-right. */
.dmap-page { background: #EDDABE url(/design/assets/texture-giay-do.webp) repeat; background-size: 512px; }
.dmap { position: relative; overflow-x: clip; padding-bottom: 24px; }
.dmap--loading { min-height: 80vh; }

/* Header strip over the paper */
/* Title at the top of the map; the bar (stars, where, Chọn chặng) sticks under the top bar, with no band behind it. */
.dmap__hd { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 24px max(24px, calc(50% - 600px)) 8px; }
.dmap__hd .h-page { font-size: 36px; }
.dmap__sticky { position: sticky; top: 64px; z-index: 12; height: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 0 max(24px, calc(50% - 600px)); pointer-events: none; }
.dmap__sticky .dmap__hd-bar { pointer-events: auto; transform: translateY(26px); }
.dmap__hd-t { display: flex; flex-direction: column; gap: 8px; }
.dmap__hd-t .eyebrow, .dmap .eyebrow { color: #7A5200; }
.dmap__hd-bar { display: flex; align-items: center; gap: 20px; padding: 8px 8px 8px 18px; border-radius: 16px; background: rgba(255, 253, 248, .88);
  box-shadow: 0 0 0 1px rgba(27, 23, 20, .06), 1px 2px 4px rgba(48, 30, 16, .07), 8px 16px 32px -12px rgba(48, 30, 16, .18); }
.dmap__hd-sep { width: 1px; height: 24px; background: rgba(27, 23, 20, .14); }
.dmap__total { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1 var(--f-ui); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.dmap__total img { width: 22px; height: 22px; }
.dmap__where { font: 500 15px/1.3 var(--f-ui); color: #4F463F; }
.dmap__chev { transform: rotate(90deg); width: 16px; height: 16px; }
.dmap__pick-short { display: none; }
.dmap__guest { flex-basis: 100%; margin: 0; }
.dmap__beyond { display: grid; place-items: center; padding: 32px 16px 0; font: 600 14px/1.3 var(--f-ui); color: #6B6158; }

/* One chặng: the design at its own size, scaled to the page */
.dmap__scene { position: relative; margin: 0 auto; overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 3000px; }
.dmap__art { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.dmap__scene.is-locked .dmap__art > :not(.dmap__plate):not(.dmap__gate) { filter: grayscale(.55) sepia(.15); opacity: .5; }
.dmap__river { position: absolute; left: 0; top: 0; overflow: visible; }
.dmap__river path { fill: none; stroke-linecap: round; }
.dmap__river-shadow { stroke: #5A3D22; stroke-opacity: .14; stroke-width: 148px; }
.dmap__river-bank { stroke: #1B1714; stroke-width: 132px; }
.dmap__river-water { stroke: url(#dmap-song); stroke-width: 124px; }
.dmap__scene--phone .dmap__river-shadow { stroke-width: 100px; }
.dmap__scene--phone .dmap__river-bank { stroke-width: 92px; }
.dmap__scene--phone .dmap__river-water { stroke-width: 84px; }

.dmap__prop { position: absolute; pointer-events: none; user-select: none; }
.dmap__prop--print { -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }
.dmap__prop--hero { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%); }
.dmap__prop--drift { animation: dmap-drift 22s ease-in-out infinite alternate; }
.dmap__prop--bob { animation: dmap-bob 3.2s ease-in-out infinite; }
.dmap__prop--sway { transform-origin: 50% 100%; animation: dmap-sway 5s ease-in-out infinite; }
@keyframes dmap-drift { from { transform: translateX(-28px); } to { transform: translateX(28px); } }
@keyframes dmap-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes dmap-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }

/* Stops: wooden discs like the pieces; locked ones flat and uncarved */
.dmap__stop { position: absolute; width: 60px; height: 60px; margin: -30px 0 0 -30px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font: 800 19px/1 var(--f-display); color: #8E1B15; text-shadow: 0 1px 0 rgba(255, 240, 214, .8); font-variant-numeric: lining-nums tabular-nums;
  background: radial-gradient(circle at 34% 28%, rgba(255, 250, 236, .7), rgba(255, 250, 236, 0) 58%), url(/design/assets/texture-van-go-ban-co.webp) center / 200px;
  box-shadow: inset 0 0 0 3px #7A4B26, inset 0 0 0 5px rgba(255, 232, 196, .55), inset 0 -4px 7px rgba(70, 38, 14, .35), 1px 2px 4px rgba(48, 30, 16, .28), 6px 10px 18px -6px rgba(48, 30, 16, .38);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.dmap__stop:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 3px #7A4B26, inset 0 0 0 5px rgba(255, 232, 196, .55), inset 0 -4px 7px rgba(70, 38, 14, .35), 2px 4px 8px rgba(48, 30, 16, .28), 12px 20px 32px -10px rgba(48, 30, 16, .42); }
.dmap__stop:active:not(:disabled) { transform: scale(.98); }
.dmap__stop:focus-visible { outline: 2px solid #B3261E; outline-offset: 2px; }
.dmap__stop.is-locked { cursor: default; background: #F4E8D3; color: rgba(27, 23, 20, .42); text-shadow: none; box-shadow: inset 0 0 0 1.5px rgba(27, 23, 20, .3), 1px 1px 2px rgba(28, 20, 10, .06); }
.dmap__stop.is-current { width: 84px; height: 84px; margin: -42px 0 0 -42px; font-size: 27px; z-index: 2;
  box-shadow: inset 0 0 0 3px #7A4B26, inset 0 0 0 5px rgba(255, 232, 196, .55), inset 0 -4px 8px rgba(70, 38, 14, .35), 0 0 0 4px #FCFAF6, 0 0 0 7px #B3261E, 2px 4px 8px rgba(48, 30, 16, .3), 14px 22px 36px -12px rgba(48, 30, 16, .45); }
.dmap__pulse { position: absolute; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; box-shadow: 0 0 0 3px #E0A526; animation: dmap-pulse 1.8s ease-out infinite; pointer-events: none; }
.dmap__pulse--late { animation-delay: .9s; }
@keyframes dmap-pulse { from { transform: scale(1); opacity: .75; } to { transform: scale(1.75); opacity: 0; } }
.dmap__stars { position: absolute; display: flex; align-items: flex-end; gap: 1px; transform: translate(-50%, -100%); pointer-events: none; }
.dmap__stars img { width: 20px; height: 20px; }
.dmap__stars img.mid { width: 24px; height: 24px; margin-bottom: 5px; }
.dmap__scene--phone .dmap__stop { width: 56px; height: 56px; margin: -28px 0 0 -28px; font-size: 18px; }
.dmap__scene--phone .dmap__stop.is-current, .dmap__scene--phone .dmap__pulse { width: 74px; height: 74px; margin: -37px 0 0 -37px; font-size: 24px; }
.dmap__scene--phone .dmap__stars img { width: 18px; height: 18px; }
.dmap__scene--phone .dmap__stars img.mid { width: 22px; height: 22px; margin-bottom: 4px; }

/* The player on the current stop, the carp beside it, the card for the màn */
.dmap__me { position: absolute; z-index: 3; display: grid; place-items: center; animation: dmap-hop 2.4s ease-in-out infinite; pointer-events: none; }
.dmap__me .ravatar--framed { --sz: 60px; margin: 0; filter: drop-shadow(2px 5px 6px rgba(48, 30, 16, .35)); }
.dmap__scene--phone .dmap__me .ravatar--framed { --sz: 46px; }
@keyframes dmap-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.dmap__carp { position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(2px 4px 4px rgba(48, 30, 16, .3)); animation: dmap-swim 2.8s ease-in-out infinite; }
@keyframes dmap-swim { 0%, 100% { transform: rotate(-30deg); } 50% { transform: rotate(-18deg) translateX(6px); } }
.dmap__card { position: absolute; z-index: 3; width: 296px; height: 184px; box-sizing: border-box; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; border-radius: 16px; background: #FFFDF8;
  box-shadow: 0 0 0 1px rgba(27, 23, 20, .06), 2px 4px 8px rgba(48, 30, 16, .08), 16px 32px 64px -16px rgba(48, 30, 16, .28); }
.dmap__card-t { font: 800 22px/1.15 var(--f-display); letter-spacing: -.01em; color: #1B1714; }
.dmap__card .muted { font-size: 14px; color: #4F463F; }
.dmap__card .btn { margin-top: auto; }

/* The gate: màn cổng of the chặng, its name on the hanging board */
.dmap__gate { position: absolute; z-index: 1; }
.dmap__gate img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(4px 8px 8px rgba(48, 30, 16, .28)); }
.dmap__gate.is-locked img, .dmap__scene.is-locked .dmap__gate img { filter: grayscale(.6) drop-shadow(4px 8px 8px rgba(48, 30, 16, .2)); }
.dmap__gate-name { position: absolute; left: 31.2%; top: 32%; width: 36.8%; height: 12.2%; display: grid; place-items: center; font: 800 14px/1 var(--f-display); color: #1B1714; white-space: nowrap; }
.dmap__scene--phone .dmap__gate-name { font-size: 10px; }
.dmap__gate-seal { position: absolute; left: 67%; top: 28%; width: 48px; height: 48px; display: grid; place-items: center; text-align: center; font: 800 12px/1.05 var(--f-display); color: #FFF4E6; background: #B3261E;
  border-radius: 4px; transform: rotate(-9deg); box-shadow: inset 0 0 0 2px #B3261E, inset 0 0 0 3.5px #FFF4E6, 2px 3px 6px rgba(90, 20, 12, .3); }
.dmap__scene--phone .dmap__gate-seal { width: 34px; height: 34px; font-size: 9px; }
.dmap__gate-lock { position: absolute; left: 50%; top: 65%; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: #1B1714; display: grid; place-items: center; box-shadow: 0 0 0 3px #FCFAF6; }
.dmap__gate-lock svg { width: 16px; height: 16px; fill: none; stroke: #FCFAF6; stroke-width: 2.2; stroke-linecap: round; }
.dmap__gate-hit { position: absolute; inset: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.dmap__gate-hit:focus-visible { outline: 2px solid #B3261E; outline-offset: 2px; }

/* The chặng name plate */
.dmap__plate { position: absolute; z-index: 2; min-width: 190px; display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; border-radius: 16px; background: rgba(255, 253, 248, .92);
  box-shadow: 0 0 0 1px rgba(27, 23, 20, .06), 1px 2px 4px rgba(48, 30, 16, .07), 8px 16px 32px -12px rgba(48, 30, 16, .18); }
.dmap__plate.is-locked { background: rgba(255, 253, 248, .8); }
.dmap__plate.is-locked .eyebrow { color: #6B6158; }
.dmap__plate-t { font: 800 30px/1.05 var(--f-display); letter-spacing: -.02em; color: #1B1714; }
.dmap__plate.is-locked .dmap__plate-t { color: #4F463F; }
.dmap__plate-s { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1.2 var(--f-ui); color: #4F463F; font-variant-numeric: lining-nums tabular-nums; }
.dmap__plate-s img { width: 22px; height: 22px; }
.dmap__scene--phone .dmap__plate { min-width: 140px; padding: 10px 14px 12px; gap: 4px; }
.dmap__scene--phone .dmap__plate-t { font-size: 20px; }
.dmap__scene--phone .dmap__plate-s { font-size: 13px; }

/* Back to the current màn; the phone card for it */
.dmap__jump { position: fixed; right: 24px; bottom: 24px; z-index: 30; height: 48px; padding: 0 20px; border: 0; border-radius: 9999px; cursor: pointer; background: #B3261E; color: #fff; font: 600 15px/1 var(--f-ui);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 2px 4px 8px rgba(90, 20, 12, .25), 16px 32px 64px -16px rgba(90, 20, 12, .45); }
.dmap[data-mode="phone"] { padding-bottom: 120px; }
.dmap__dock { position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #FFFDF8;
  box-shadow: 0 0 0 1px rgba(27, 23, 20, .06), 2px 4px 8px rgba(48, 30, 16, .08), 16px 32px 64px -16px rgba(48, 30, 16, .28); }
.dmap__dock-l { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.dmap__dock-l b { font: 800 18px/1.2 var(--f-display); }
@media (max-width: 999px) { .dmap__jump { bottom: 168px; right: 16px; } }

/* Chọn chặng: centred on desktop (owner 28/09), a sheet from the bottom on phones */
.dmap__pick-wrap { z-index: 70; place-items: center; padding: 24px; }
.dmap__pick { width: min(560px, 100%); max-height: min(720px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #FFFDF8; color: #1B1714;
  box-shadow: 0 0 0 1px rgba(27, 23, 20, .06), 2px 4px 8px rgba(48, 30, 16, .08), 16px 32px 64px -16px rgba(48, 30, 16, .3); }
.dmap__pick-hd { display: flex; align-items: center; gap: 16px; padding: 18px 20px 14px; box-shadow: 0 1px 0 rgba(27, 23, 20, .08); }
.dmap__pick-ht { display: flex; flex-direction: column; gap: 6px; }
.dmap__pick-t { font: 800 22px/1.1 var(--f-display); }
.dmap__x { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(27, 23, 20, .05); display: grid; place-items: center; cursor: pointer; color: #1B1714; }
.dmap__x .ic { width: 16px; height: 16px; }
.dmap__pick-list { overflow-y: auto; }
.dmap__row { width: 100%; display: grid; grid-template-columns: 32px 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 68px; padding: 0 20px; border: 0; background: none; text-align: left; cursor: pointer; color: #1B1714;
  box-shadow: 0 1px 0 rgba(27, 23, 20, .08); font: inherit; }
.dmap__row:hover:not(:disabled) { background: rgba(27, 23, 20, .035); }
.dmap__row.is-cur { background: rgba(179, 38, 30, .06); box-shadow: inset 3px 0 0 #B3261E, 0 1px 0 rgba(27, 23, 20, .08); }
.dmap__row.is-locked { opacity: .62; cursor: default; }
.dmap__row.is-locked .dmap__thumb { filter: grayscale(.8); }
.dmap__row-n { font: 800 15px/1 var(--f-display); color: #6B6158; font-variant-numeric: lining-nums tabular-nums; }
.dmap__thumb { width: 72px; height: 48px; border-radius: 8px; background: #F4E8D3 center / cover no-repeat; box-shadow: 0 0 0 1px rgba(27, 23, 20, .08); }
.dmap__row-m { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dmap__row-m > span:first-child { display: flex; align-items: baseline; gap: 8px; }
.dmap__row-m b { font: 700 15px/1.2 var(--f-display); }
.dmap__row-m small { font-size: 12px; color: #6B6158; }
.dmap__bar { height: 4px; border-radius: 9999px; background: rgba(27, 23, 20, .08); overflow: hidden; }
.dmap__bar span { display: block; height: 4px; background: #E0A526; border-radius: 9999px; }
.dmap__row-s { font: 500 13px/1.3 var(--f-ui); color: #4F463F; text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 760px) {
  .dmap__hd { display: none; } /* the top bar already says "Đường cờ thế" */
  .dmap__sticky { top: 64px; padding: 0 16px; }
  .dmap__sticky .dmap__hd-bar { width: 100%; transform: none; }
  .dmap__where, .dmap__hd-sep, .dmap__pick-word { display: none; }
  .dmap__hd-bar { gap: 10px; padding: 6px 6px 6px 12px; }
  .dmap__hd-bar .btn { margin-left: auto; }
  .dmap__pick-short { display: inline; }
  .dmap__total { font-size: 13px; }
  .dmap__total img { width: 18px; height: 18px; }
  .dmap__guest { display: none; }
  .dmap__pick-wrap { place-items: end stretch; padding: 0; }
  .dmap__pick { width: 100%; max-height: 78vh; border-radius: 20px 20px 0 0; }
  .dmap__row { grid-template-columns: 26px 60px minmax(0, 1fr) auto; gap: 12px; padding: 0 16px; height: 64px; }
  .dmap__thumb { width: 60px; height: 40px; }
  .dmap__row-m small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dmap__prop, .dmap__me, .dmap__carp, .dmap__pulse { animation: none; }
}
.dmap__defs { position: absolute; width: 0; height: 0; }

/* Solve screen, màn of Đường cờ thế: the chặng line and the star goals (dark sơn mài table) */
.task__path { margin-bottom: 6px; font: 600 12px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text, #E3C27E); }
.task__goals { display: grid; gap: 6px; margin: 12px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--hair); font-size: 13px; color: var(--text-2); }
.task__goals li { display: flex; align-items: center; gap: 10px; transition: opacity .2s var(--ease); }
.task__goals li.is-off { opacity: .38; }
.task__goal-st { display: inline-flex; width: 54px; }
.task__goal-st img { width: 18px; height: 18px; }

/* Result of a màn (sheet over the board) */
.pres .eyebrow { color: #7A5200; }
.pres__art { width: 132px; height: 132px; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }
.pres .sheet__t { margin-top: 8px; }
.pres__stars { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 78px; margin: 12px 0 4px; }
.pres__stars img { width: 56px; height: 56px; }
.pres__stars img.mid { width: 72px; height: 72px; margin-bottom: 6px; }
.pres__stars img.drop { animation: pres-drop .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pres-drop { from { transform: translateY(-26px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.pres__facts { display: flex; justify-content: center; gap: 28px; margin: 8px 0 12px; font: 500 14px/1.3 var(--f-ui); color: #4F463F; font-variant-numeric: lining-nums tabular-nums; }
.pres__facts b { display: block; font: 700 20px/1.2 var(--f-display); color: #1B1714; }
.pres__note { margin: 0 0 12px; font: 600 14px/1.3 var(--f-ui); color: #7A5200; }
.pres .muted { margin: 8px 0 16px; }

/* Qua chặng: the full-screen moment after a màn cổng */
.pgate { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding: 48px 24px 40px; overflow: hidden; text-align: center; color: #1B1714;
  background: #EDDABE url(/design/assets/texture-giay-do.webp) repeat; background-size: 512px; animation: pgate-in .3s var(--ease) both; }
@keyframes pgate-in { from { opacity: 0; } to { opacity: 1; } }
.pgate__cloud { position: absolute; top: 12%; left: 6%; width: min(420px, 50vw); opacity: .9; animation: dmap-drift 20s ease-in-out infinite alternate; pointer-events: none; }
.pgate__cloud--r { left: auto; right: 6%; top: 18%; width: min(340px, 40vw); animation-direction: alternate-reverse; }
.pgate__hd { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pgate__hd .eyebrow { color: #7A5200; }
.pgate__t { margin: 0; font: 800 clamp(34px, 6vw, 56px)/1.05 var(--f-display); letter-spacing: -.03em; }
.pgate__s { display: inline-flex; align-items: center; gap: 8px; font: 600 20px/1 var(--f-ui); font-variant-numeric: lining-nums tabular-nums; }
.pgate__s img { width: 30px; height: 30px; }
.pgate__stage { position: relative; flex: 1; width: min(520px, 100%); min-height: 260px; }
.pgate__river { position: absolute; left: 50%; top: 0; bottom: -40px; width: 164px; margin-left: -82px; border-radius: 82px; box-shadow: 0 0 0 4px #1B1714;
  background: #D2E2D6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15'%3E%3Cpath d='M0 15a15 15 0 0 1 30 0' fill='none' stroke='%233F7A6A' stroke-width='1.7'/%3E%3C/svg%3E") repeat; animation: pgate-flow 2s linear infinite; }
@keyframes pgate-flow { to { background-position: 0 -15px; } }
.pgate__gate { position: absolute; left: 50%; top: 18%; width: min(360px, 80vw); margin-left: calc(min(360px, 80vw) / -2); aspect-ratio: 640 / 503; filter: drop-shadow(6px 12px 14px rgba(48, 30, 16, .3)); }
.pgate__gate img { width: 100%; height: 100%; }
.pgate__gate span { position: absolute; left: 31.2%; top: 32%; width: 36.8%; height: 12.2%; display: grid; place-items: center; font: 800 clamp(12px, 2.4vw, 20px)/1 var(--f-display); white-space: nowrap; }
.pgate__carp { position: absolute; left: 50%; top: 40%; width: 130px; margin-left: -65px; z-index: 1; filter: drop-shadow(3px 6px 6px rgba(48, 30, 16, .35)); animation: pgate-through 3.2s cubic-bezier(.3, .6, .2, 1) infinite; }
@keyframes pgate-through { 0% { transform: translate(0, 90px) rotate(-30deg) scale(.9); opacity: 0; } 25% { opacity: 1; } 70% { transform: translate(0, -60px) rotate(-12deg); opacity: 1; } 100% { transform: translate(0, -110px) rotate(-8deg) scale(.95); opacity: 0; } }
.pgate__seal { position: absolute; left: calc(50% + min(160px, 34vw)); top: 16%; width: 86px; height: 86px; display: grid; place-items: center; text-align: center; font: 800 17px/1.05 var(--f-display); color: #FFF4E6; background: #B3261E;
  border-radius: 8px; transform: rotate(-9deg); box-shadow: inset 0 0 0 3px #B3261E, inset 0 0 0 6px #FFF4E6, 3px 6px 12px rgba(90, 20, 12, .35); animation: stampIn .45s .4s var(--ease) both; }
.pgate__actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 760px) { .pgate__seal { left: auto; right: 4px; width: 64px; height: 64px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .pgate__carp, .pgate__river, .pgate__cloud, .pres__stars img.drop { animation: none; } }

/* The gate as the current màn: the same gold rings as a current stop */
.dmap__gate.is-current::before, .dmap__gate.is-current::after { content: ''; position: absolute; left: 50%; top: 58%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; box-shadow: 0 0 0 3px #E0A526; animation: dmap-pulse 1.8s ease-out infinite; pointer-events: none; }
.dmap__gate.is-current::after { animation-delay: .9s; }
.pres { padding-top: 24px; }
.pres__art { margin: 0 auto 4px; }
.pgate { top: 56px; --text: #1B1714; --text-2: #4F463F; --hair: rgba(27, 23, 20, .08); --hair-2: rgba(27, 23, 20, .14); --hair-3: rgba(27, 23, 20, .24); }

/* Entry: the wide card on /co-the and the tile on the signed-in home */
.dentry { position: relative; display: block; overflow: hidden; border-radius: 20px; color: #1B1714; text-decoration: none;
  background: #EDDABE url(/design/assets/texture-giay-do.webp) repeat; background-size: 512px;
  box-shadow: 0 0 0 1px rgba(27, 23, 20, .06), 1px 2px 4px rgba(48, 30, 16, .07), 8px 16px 32px -12px rgba(48, 30, 16, .18); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.dentry:hover { color: #1B1714; transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(27, 23, 20, .08), 2px 4px 8px rgba(48, 30, 16, .08), 16px 32px 64px -16px rgba(48, 30, 16, .28); }
.dentry--wide { height: 300px; margin-bottom: 40px; }
.dentry--tile { height: 196px; }
.dentry__art { position: absolute; right: 0; top: 0; }
.dentry__art svg { position: absolute; left: 0; top: 0; }
.dentry__prop { position: absolute; left: 196px; top: 136px; width: 170px; pointer-events: none; }
.dentry__prop--l { left: -110px; top: 150px; width: 120px; }
@media (max-width: 1000px) { .dentry__prop--l { display: none; } }
.dentry__disc { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; display: grid; place-items: center; font: 800 15px/1 var(--f-display); color: #8E1B15;
  background: radial-gradient(circle at 34% 28%, rgba(255, 250, 236, .7), rgba(255, 250, 236, 0) 58%), url(/design/assets/texture-van-go-ban-co.webp) center / 160px;
  box-shadow: inset 0 0 0 2.5px #7A4B26, 1px 2px 4px rgba(48, 30, 16, .28), 4px 8px 14px -6px rgba(48, 30, 16, .38); }
.dentry__disc.is-current { width: 58px; height: 58px; margin: -29px 0 0 -29px; font-size: 19px; box-shadow: inset 0 0 0 2.5px #7A4B26, 0 0 0 3px #FCFAF6, 0 0 0 5.5px #B3261E, 2px 4px 8px rgba(48, 30, 16, .3); }
.dentry__disc.is-locked { background: #F4E8D3; color: rgba(27, 23, 20, .42); box-shadow: inset 0 0 0 1.5px rgba(27, 23, 20, .3); }
.dentry--tile .dentry__disc { width: 38px; height: 38px; margin: -19px 0 0 -19px; font-size: 13px; }
.dentry--tile .dentry__disc.is-current { width: 48px; height: 48px; margin: -24px 0 0 -24px; font-size: 16px; }
.dentry__txt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: min(360px, 56%); padding: 36px; }
.dentry--tile .dentry__txt { gap: 8px; max-width: 62%; padding: 22px; }
.dentry .eyebrow { color: #7A5200; }
.dentry__t { font: 800 32px/1.05 var(--f-display); letter-spacing: -.02em; }
.dentry--tile .dentry__t { font-size: 20px; }
.dentry__where { font: 400 15px/1.5 var(--f-ui); color: #4F463F; }
.dentry--tile .dentry__where { font-size: 14px; line-height: 1.4; }
.dentry__stars { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1 var(--f-ui); font-variant-numeric: lining-nums tabular-nums; }
.dentry__stars img { width: 22px; height: 22px; }
.dentry .btn { margin-top: 8px; pointer-events: none; }
@media (max-width: 760px) {
  .dentry--wide { height: auto; min-height: 260px; margin-bottom: 24px; }
  .dentry--wide .dentry__txt { max-width: 64%; padding: 24px 20px; }
  .dentry--wide .dentry__t { font-size: 24px; }
  .dentry--wide .dentry__art { right: -120px; }
}