/* Page 55 · section styles: the trees, the hero split, the way blocks' extras, the finder, the thumbnail. */

/* ---------------------------------------------------------------- the tree drawing */
.mg-tree { --ln: rgba(255, 246, 224, 0.22); font-family: var(--f-body); color: var(--cream); }
.mg-tb { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.mg-tk { display: flex; flex-direction: column; gap: 5px; position: relative; padding: 2px 0 2px 12px; border-left: 2px solid var(--ln); min-width: 0; flex: 1; }
.mg-tk > .mg-tb { position: relative; }
.mg-tk > .mg-tb::before { content: ""; position: absolute; left: -12px; top: 14px; width: 9px; border-top: 2px solid var(--ln); }
.mg-tk--wrap { flex-direction: row; flex-wrap: wrap; gap: 4px; }
.mg-tk--wrap > .mg-tb::before { display: none; }
.mg-tn { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: none; padding: 3px 9px 3px 3px; border-radius: 10px; border: 2px solid rgba(0, 0, 0, 0.5); background: rgba(255, 255, 255, 0.06); font: 400 13.5px/1.05 var(--f-display); letter-spacing: 0.02em; color: var(--cream); white-space: nowrap; transition: background 0.2s, box-shadow 0.2s, color 0.2s; }
.mg-tn b { font-weight: 400; }
.mg-tn small { font: 700 10.5px/1 var(--f-body); letter-spacing: 0.04em; color: var(--cream-3); margin-left: 2px; white-space: normal; max-width: 220px; }
.mg-tn .g-ico { border-width: 2px; box-shadow: none; }
.mg-tn--root { background: linear-gradient(180deg, #3A3166, #2A2450); border-color: var(--ink); font-size: 15px; box-shadow: 2px 3px 0 var(--ink); }
.mg-tn--door { background: linear-gradient(180deg, #4B4472, #2E2A4A); border-color: var(--ink); font-size: 15px; box-shadow: 1px 2px 0 var(--ink); }
.mg-tn--box { background: rgba(255, 210, 63, 0.12); border-color: rgba(255, 210, 63, 0.55); }
.mg-tn--label { background: transparent; border-style: dashed; border-color: rgba(255, 246, 224, 0.25); color: var(--cream-2); }
.mg-tn--label.gold b { color: var(--yellow); }
.mg-tn--game { background: rgba(124, 255, 163, 0.08); border-color: rgba(124, 255, 163, 0.35); }
.mg-tn--extra { background: rgba(79, 219, 242, 0.08); border-color: rgba(79, 219, 242, 0.35); }
.mg-tn--who { background: rgba(183, 156, 255, 0.14); border-color: rgba(183, 156, 255, 0.55); }
.mg-tn--set { background: rgba(255, 255, 255, 0.04); border-style: dashed; }
.mg-tn--ghost { background: transparent; border-style: dashed; border-color: rgba(255, 90, 122, 0.55); color: #FFB3C4; }
.mg-tn.on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 0 18px rgba(255, 210, 63, 0.6); }
.mg-tn.on small { color: rgba(29, 27, 36, 0.7); }
.mg-tn.path { box-shadow: 0 0 0 2.5px var(--yellow); }
.mg-tree--c .mg-tn { font-size: 11.5px; padding: 2px 7px 2px 2px; gap: 4px; border-radius: 8px; border-width: 1.5px; }
.mg-tree--c .mg-tk { gap: 3px; padding-left: 9px; }
.mg-tree--c .mg-tk > .mg-tb::before { left: -9px; top: 10px; width: 7px; }
.mg-tree--c .mg-tk--wrap { gap: 3px; }
.mg-tree--c .mg-tn--root, .mg-tree--c .mg-tn--door { font-size: 12.5px; }
.mg-pin { position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #FF5A7A; border: 2.5px solid var(--ink); color: #fff; font: 400 13px/1 var(--f-display); font-style: normal; box-shadow: 1px 2px 0 var(--ink); z-index: 2; transition: transform 0.2s var(--spring); }
.mg-pin.hi { transform: scale(1.35); }

/* ---------------------------------------------------------------- hero split */
.p55-vs { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 14px; align-items: center; }
.p55-vs__l { position: relative; padding: 18px 12px 12px; border-radius: 18px; border: 3px solid var(--ink); background: rgba(8, 6, 18, 0.55); box-shadow: 2px 5px 0 var(--ink); min-width: 0; }
.p55-vs__l .p55-tag { top: -14px; left: 12px; }
.p55-tag.r { background: linear-gradient(180deg, #FF9AB0, var(--hot)); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.p55-minitree { overflow: hidden; }
.p55-herostats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }

/* ---------------------------------------------------------------- 01 today's tree */
.p55-treebox { padding: 18px; overflow-x: auto; }
.p55-treecount { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.p55-treecount span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); font: 800 11px/1 var(--f-body); letter-spacing: 0.1em; color: var(--cream-3); }
.p55-treecount b { font: 400 22px/1 var(--f-display); color: #FF8FA6; letter-spacing: 0; }
.p55-note[data-pin] { cursor: default; }
.p55-note.hi { transform: translateX(-3px); border-color: #FF5A7A; }

/* ---------------------------------------------------------------- the way blocks */
.p55-whobar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.p55-whobar .wnote { color: var(--cream-3); }
.p55-map .mapt { overflow: hidden; padding: 4px 2px 2px; }
.p55-cnt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.p55-cnt > div { padding: 7px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); }
.p55-cnt b { display: block; font: 400 22px/1 var(--f-display); color: #fff; }
.p55-cnt b small { font-size: 13px; color: var(--cream-3); margin-left: 2px; }
.p55-cnt span { display: block; margin-top: 4px; font: 800 9.5px/1.25 var(--f-body); letter-spacing: 0.08em; color: var(--cream-3); text-transform: uppercase; }
.p55-cnt__w { margin: 8px 0 0 !important; font-size: 12px !important; color: var(--cream-3) !important; }
.p55-flow__f { max-width: 260px; }

/* ---------------------------------------------------------------- 03 finder */
.p55-findbar { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.p55-finditems { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.p55-fi { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px 0 4px; border-radius: 11px; border: 2.5px solid var(--ink); background: #1D1934; color: var(--cream-2); font: 400 14px/1 var(--f-display); letter-spacing: 0.03em; cursor: pointer; box-shadow: 1px 3px 0 var(--ink); transition: transform 0.12s var(--out), background 0.15s; }
.p55-fi .g-ico { border-width: 2px; box-shadow: none; }
.p55-fi:hover { transform: translateY(-1px); color: #fff; }
.p55-fi.on { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); color: var(--ink); }
.p55-findgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.p55-fc { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; border: 3px solid var(--ink); background: var(--panel-g); box-shadow: 2px 5px 0 var(--ink); min-width: 0; }
.p55-fc.today { background: linear-gradient(180deg, #3A2342, #241829); }
.p55-fc.best { border-color: var(--mint); }
.p55-fc.rec::after { content: "\2605 OURS"; position: absolute; top: -12px; right: 12px; padding: 3px 7px 2px; border-radius: 7px; border: 2px solid var(--ink); background: var(--yellow); color: var(--ink); font: 400 12px/1 var(--f-display); }
.p55-fc__h { display: flex; align-items: center; gap: 8px; }
.p55-fc__h i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #CFC6F0; color: var(--ink); border: 2.5px solid var(--ink); font: 400 15px/1 var(--f-display); font-style: normal; flex: none; }
.p55-fc.today .p55-fc__h i { background: #FF8FA6; } .p55-fc.rec .p55-fc__h i { background: var(--yellow); }
.p55-fc__h b { font: 400 15px/1.05 var(--f-display); color: #fff; letter-spacing: 0.03em; }
.p55-fc__n { margin-left: auto; font: 800 11px/1 var(--f-body); letter-spacing: 0.08em; color: var(--cream-3); white-space: nowrap; }
.p55-fc__n b { font: 400 26px/1 var(--f-display); color: #fff; letter-spacing: 0; margin-right: 2px; }
.p55-fc.best .p55-fc__n b { color: var(--mint); }
.p55-fc.today .p55-fc__n b { color: #FF8FA6; }
.p55-fc__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 30px; }
.p55-fc__steps span { padding: 4px 7px 3px; border-radius: 8px; background: rgba(255, 210, 63, 0.14); border: 2px solid rgba(255, 210, 63, 0.5); font: 400 12.5px/1.05 var(--f-display); color: var(--yellow-hi); letter-spacing: 0.02em; }
.p55-fc__steps i { font-style: normal; color: var(--cream-3); font: 400 15px/1 var(--f-display); }
.p55-fc__steps small { flex-basis: 100%; font: 700 11px/1.3 var(--f-body); color: var(--cream-3); letter-spacing: 0.03em; }
.p55-fc__tree { overflow: hidden; padding-top: 4px; border-top: 2px dashed rgba(255, 246, 224, 0.1); }

/* ---------------------------------------------------------------- table extras */
.p55-tsub { text-align: left !important; font: 800 11px/1 var(--f-body) !important; letter-spacing: 0.16em; color: var(--cream-3) !important; background: rgba(0, 0, 0, 0.2); }
.p55-opt__d em { font-style: normal; color: var(--cream-3); font-size: 11.5px; }

/* ---------------------------------------------------------------- the thumbnail (?ix=1) */
.p55-ix55 .p55-ix__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px 1fr; gap: 18px; align-items: center; }
.p55-ix55 .p55-ix__tree { position: relative; align-self: center; overflow: hidden; padding: 40px 14px 14px; border-radius: 18px; border: 3px solid var(--ink); background: rgba(8, 6, 18, 0.6); box-shadow: 2px 5px 0 var(--ink); }
.p55-ix55 .p55-ix__tree .p55-tag { top: 6px; right: 10px; left: auto; }
.p55-ix55 .p55-ix__ph { min-width: 0; }
.p55-ix55 .p55-ix__ph .p55-dev { width: 100%; }

@media (max-width: 1180px) { .p55-vs { grid-template-columns: minmax(0, 1fr); } .p55-findgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .p55-herostats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p55-findbar { flex-direction: column; }
  .p55-findgrid { grid-template-columns: minmax(0, 1fr); }
  .p55-cnt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-tn small { display: none; }
}