/* Pages 84-87 (pre-launch lane B LOOP): mastery, album, shop, gifts. Shared parts on top of 72_base.css (g- screens). */
.p84 .p70-hero h1 span { color: var(--yellow); }
.l84-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.l84-rules span { font: 400 13.5px/1 var(--f-display); letter-spacing: .04em; padding: 8px 10px 7px; border-radius: 10px; border: 2.5px solid var(--ink); box-shadow: 2px 4px 0 var(--ink); background: var(--panel-2); color: #fff; }
.l84-rules span.y { background: var(--yellow); color: var(--ink); }
.l84-rules span.g { background: #59F08A; color: var(--ink); }
.l84-lbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center; }
.l84-lbar button { font: 400 12.5px/1 var(--f-display); letter-spacing: .04em; padding: 7px 9px 6px; border-radius: 9px; border: 2.5px solid var(--ink); background: var(--panel-3); color: #fff; cursor: pointer; box-shadow: 1px 3px 0 var(--ink); }
.l84-lbar button.on { background: var(--yellow); color: var(--ink); }
.l84-lcap { text-align: center; margin: 8px auto 0; max-width: 560px; color: var(--cream-2); font: 600 13.5px/1.4 var(--f-body); min-height: 38px; }
.l84-box { margin: 18px 0 0; border: 3px solid var(--ink); border-radius: 16px; background: var(--panel-2); box-shadow: 3px 6px 0 var(--ink); padding: 16px 18px 12px; }
.l84-box h4 { margin: 0 0 8px; font: 400 18px/1 var(--f-display); letter-spacing: .05em; color: var(--yellow); }
.l84-box ul { margin: 0; padding-left: 18px; }
.l84-box li { margin: 4px 0; color: var(--cream-2); }
.l84-box li b { color: #fff; }
.l84-tbl { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 8px; font: 600 13px/1.3 var(--f-body); }
.l84-tbl th { font: 400 13px/1 var(--f-display); letter-spacing: .05em; color: var(--yellow); text-align: left; padding: 7px 8px; border-bottom: 2px solid var(--ink); }
.l84-tbl td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.08); color: var(--cream-2); }
.l84-tbl td b { color: #fff; }
.l84-tbl tr.hl td { background: rgba(255,210,63,.10); }
.l84-tbl .gem { color: #7FE3FF; }

/* in-screen parts */
.g-scr .lp-top { right: 30px; top: 12px; display: flex; gap: 8px; z-index: 3; }
.g-scr .lp-cur { height: 40px; padding: 0 12px 0 6px; border-radius: 12px; border: 3px solid var(--ink); background: rgba(22,17,46,.9); display: flex; align-items: center; gap: 7px; font-size: 19px; box-shadow: 1px 3px 0 var(--ink); }
.g-scr .lp-cur svg { width: 26px; height: 26px; }
.g-scr .lp-cur .plus { width: 22px; height: 22px; border-radius: 7px; background: #2DC768; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 16px; line-height: 1; margin-left: 2px; }
.g-scr .lp-chips { left: 40px; top: 66px; display: flex; gap: 8px; z-index: 2; }
.g-scr .lp-chip { height: 38px; padding: 0 14px; border-radius: 11px; border: 3px solid var(--ink); background: linear-gradient(180deg, #3E3866, #2A2545); display: flex; align-items: center; gap: 6px; font-size: 17px; box-shadow: 0 4px 0 var(--ink); white-space: nowrap; }
.g-scr .lp-chip.on { background: linear-gradient(180deg, #FFEB8A, #FFD23F 45%, #F4AE00); color: var(--ink); }
.g-scr .lp-chip em { font-style: normal; background: #F23D4F; color: #fff; border: 2px solid #fff; border-radius: 10px; font-size: 12px; padding: 2px 6px 1px; box-shadow: 0 0 0 2px var(--ink); }
.g-scr .lp-panel { border-radius: 18px; border: 4px solid var(--ink); background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%), linear-gradient(180deg, #2E2852, #221C40); box-shadow: 0 6px 0 var(--ink); }
.g-scr .lp-stage { border-radius: 18px; border: 4px solid var(--ink); overflow: hidden; box-shadow: 0 6px 0 var(--ink); background: radial-gradient(60% 55% at 50% 40%, #6B4BD8, #3A2786 60%, #231759); }
.g-scr .lp-stage::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 42%, rgba(255,255,255,.07) 0 7deg, transparent 7deg 18deg); }
.g-scr .lp-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, transparent, rgba(12,8,28,.75)); }
.g-scr .lp-card { border-radius: 15px; border: 3px solid var(--ink); background: linear-gradient(180deg, #FFF6E0, #F2E3BE); color: var(--ink); box-shadow: 0 5px 0 var(--ink); overflow: hidden; }
.g-scr .lp-card.r-rare { background: linear-gradient(180deg, #CFE6FF, #8EC2FF); }
.g-scr .lp-card.r-epic { background: linear-gradient(180deg, #E7D2FF, #B98BFF); }
.g-scr .lp-card.r-leg { background: linear-gradient(180deg, #FFF0A8, #FFC83A 60%, #F29B00); }
.g-scr .lp-card.dim { filter: saturate(.25) brightness(.62); }
.g-scr .lp-card .nm { position: absolute; left: 8px; right: 8px; bottom: 30px; font-size: 14px; line-height: 1.02; text-align: center; }
.g-scr .lp-card .pr { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 22px; border-radius: 8px; border: 2.5px solid var(--ink); background: #2A2545; color: #fff; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; }
.g-scr .lp-card .pr svg { width: 16px; height: 16px; }
.g-scr .lp-card .pr.own { background: #2DC768; color: var(--ink); }
.g-scr .lp-card .pr.earn { background: #FFF6E0; color: var(--ink); font-size: 11.5px; }
.g-scr .lp-card .art { position: absolute; left: 0; right: 0; top: 6px; height: 58%; display: grid; place-items: center; }
.g-scr .lp-card .art svg { max-width: 86%; max-height: 92%; }
.g-scr .lp-card .rt { position: absolute; left: 6px; top: 6px; font-size: 10.5px; padding: 2px 5px 1px; border-radius: 6px; border: 2px solid var(--ink); background: rgba(255,255,255,.75); letter-spacing: .04em; }
.g-scr .lp-stamp { font-size: 20px; padding: 4px 10px 3px; border-radius: 9px; border: 3px solid var(--ink); background: #2DC768; color: var(--ink); transform: rotate(-8deg); box-shadow: 1px 3px 0 var(--ink); z-index: 4; }
.g-scr .lp-stamp.red { background: #FF5A7A; color: #fff; }
.g-scr .lp-stamp.y { background: var(--yellow); }
.g-scr .lp-play { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; display: grid; place-items: center; box-shadow: 0 2px 0 var(--ink); z-index: 3; }
.g-scr .lp-play svg { width: 14px; height: 14px; }
.g-scr .lp-clock { font: 800 13px/1 var(--f-body); letter-spacing: .06em; padding: 5px 8px; border-radius: 8px; background: rgba(22,17,46,.85); border: 2px solid var(--ink); color: #fff; display: flex; gap: 5px; align-items: center; }
.g-scr .lp-clock svg { width: 14px; height: 14px; }
.g-scr .lp-dim { position: absolute; inset: 0; background: rgba(10,6,24,.8); z-index: 5; }
.g-scr .lp-dim { position: absolute; inset: 0; background: rgba(10,6,24,.78); z-index: 5; }
.g-scr .lp-sheet { position: absolute; z-index: 6; border-radius: 20px; border: 4px solid var(--ink); background: linear-gradient(180deg, #3A3366, #26204A); box-shadow: 0 8px 0 var(--ink); }
.g-scr .lp-sheet h3 { position: absolute; left: 22px; top: 14px; margin: 0; font: 400 26px/1 var(--f-display); }
.g-scr .lp-row { height: 52px; border-radius: 13px; border: 3px solid var(--ink); background: rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; padding: 0 12px 0 10px; font-size: 18px; }
.g-scr .lp-row small { font: 800 12px/1.1 var(--f-body); letter-spacing: .05em; color: rgba(255,255,255,.62); display: block; }
.g-scr .lp-row.off { opacity: .45; }
.g-scr .lp-row.on { background: rgba(255,210,63,.18); border-color: var(--yellow); box-shadow: 0 0 0 2px var(--ink); }
.g-scr .lp-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.g-scr .lp-dot.on { background: #59F08A; } .g-scr .lp-dot.mt { background: #FF8A1F; } .g-scr .lp-dot.off { background: #8E99B0; }
.g-scr .lp-head { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink); flex: none; position: relative; box-shadow: inset -4px -4px 0 rgba(0,0,0,.18); }
.g-scr .lp-note { font: 800 13px/1.35 var(--f-body); letter-spacing: .04em; color: rgba(255,255,255,.66); }
.g-scr .lp-big { font-size: 46px; line-height: .95; }
.g-scr .lp-moment { z-index: 7; text-align: center; }
.g-scr .lp-burst { position: absolute; z-index: 6; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,210,63,.34) 0 9deg, transparent 9deg 20deg); }
/* mastery */
.g-scr .lp-diam { width: 30px; height: 30px; transform: rotate(45deg); border-radius: 7px; border: 3px solid var(--ink); background: var(--yellow); display: grid; place-items: center; }
.g-scr .lp-diam b { transform: rotate(-45deg); font-size: 15px; font-weight: 400; color: var(--ink); }
.g-scr .lp-xp { height: 18px; border-radius: 9px; border: 3px solid var(--ink); background: #16112E; overflow: hidden; }
.g-scr .lp-xp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #8DFFB1, #2DC768); border-right: 2px solid var(--ink); }
.g-scr .lp-road { overflow: hidden; }
.g-scr .lp-node { width: 52px; height: 74px; border-radius: 12px; border: 3px solid var(--ink); background: #2A2545; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 5px 0 4px; box-shadow: 0 4px 0 var(--ink); }
.g-scr .lp-node .n { font-size: 15px; }
.g-scr .lp-node .v { font: 800 11px/1 var(--f-body); letter-spacing: .02em; color: #FFE27A; }
.g-scr .lp-node svg { width: 26px; height: 26px; }
.g-scr .lp-node.got { background: linear-gradient(180deg, #3E9C5E, #23663A); }
.g-scr .lp-node.cur { background: linear-gradient(180deg, #FFEB8A, #F4AE00); color: var(--ink); outline: 4px solid #fff; outline-offset: 2px; }
.g-scr .lp-node.cur .v { color: var(--ink); }
.g-scr .lp-node.gem { border-color: #1B6E8C; }
.g-scr .lp-node.item { width: 62px; }
.g-scr .lp-node.top { width: 74px; background: linear-gradient(180deg, #FFE27A, #E2A21A 60%, #9C5E00); color: var(--ink); }
.g-scr .lp-node.top .v { color: var(--ink); }
.g-scr .lp-plate { border-radius: 9px; border: 3px solid var(--ink); background: linear-gradient(180deg, #4A3A10, #2A1F05); color: #FFE27A; font-size: 15px; padding: 4px 9px 3px; letter-spacing: .08em; box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 rgba(255,226,122,.35); }
.g-scr .lp-badge { width: 30px; height: 30px; }
/* album */
.g-scr .lp-book { border-radius: 16px 22px 22px 16px; border: 4px solid var(--ink); background: linear-gradient(90deg, #1E1A33 0 10px, #F4E7C6 10px, #FFF6E0 60%, #EEDDB6); color: var(--ink); box-shadow: 0 7px 0 var(--ink); overflow: hidden; }
.g-scr .lp-book::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: rgba(29,27,36,.18); }
.g-scr .lp-slot { border-radius: 12px; border: 3px solid var(--ink); background: #fff; box-shadow: 0 4px 0 var(--ink); overflow: hidden; }
.g-scr .lp-slot.miss { background: repeating-linear-gradient(135deg, #E9DDBE 0 8px, #E2D3AE 8px 16px); }
.g-scr .lp-slot.miss .art { opacity: .9; filter: brightness(0) opacity(.22); }
.g-scr .lp-slot .art { position: absolute; left: 0; right: 0; top: 4px; height: 62%; display: grid; place-items: center; }
.g-scr .lp-slot .art svg { max-width: 82%; max-height: 92%; }
.g-scr .lp-slot .nm { position: absolute; left: 4px; right: 4px; bottom: 25px; font-size: 12px; line-height: 1; text-align: center; color: var(--ink); }
.g-scr .lp-slot .how { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 19px; border-radius: 6px; border: 2px solid var(--ink); font: 800 9.5px/15px var(--f-body); letter-spacing: .02em; text-align: center; white-space: nowrap; overflow: hidden; background: #2A2545; color: #fff; }
.g-scr .lp-slot .how.buy { background: var(--yellow); color: var(--ink); }
.g-scr .lp-slot .how.got { background: #2DC768; color: var(--ink); }
.g-scr .lp-pg { border-radius: 12px; border: 3px solid var(--ink); background: #FFF6E0; color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.g-scr .lp-pg.done { background: linear-gradient(180deg, #CFF7DC, #8FE6AE); }
.g-scr .lp-pg.sel { outline: 4px solid var(--yellow); outline-offset: 2px; }
.g-scr .lp-pg .t { position: absolute; left: 10px; top: 8px; font-size: 16px; }
.g-scr .lp-pg .c { position: absolute; right: 10px; top: 8px; font-size: 15px; }
.g-scr .lp-pg .bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 10px; border-radius: 5px; border: 2px solid var(--ink); background: #E2D3AE; overflow: hidden; }
.g-scr .lp-pg .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #2DC768; }
.g-scr .lp-pg .rw { position: absolute; left: 10px; right: 10px; bottom: 26px; font: 800 10.5px/1.15 var(--f-body); letter-spacing: .03em; color: rgba(29,27,36,.7); }
.g-scr .lp-tabv { width: 128px; height: 56px; border-radius: 12px 0 0 12px; border: 3px solid var(--ink); border-right: 0; background: #2A2545; display: flex; flex-direction: column; justify-content: center; padding-left: 12px; font-size: 16px; }
.g-scr .lp-tabv small { font: 800 11px/1 var(--f-body); color: rgba(255,255,255,.6); letter-spacing: .05em; margin-top: 3px; }
.g-scr .lp-tabv.on { background: #FFF6E0; color: var(--ink); }
.g-scr .lp-tabv.on small { color: rgba(29,27,36,.6); }
/* dashboard frame (page 87) */
.l84-dash { background: #14121E; border: 3px solid var(--ink); border-radius: 14px; padding: 14px; font: 600 13px/1.35 var(--f-body); color: #E9E4F5; box-shadow: 3px 6px 0 var(--ink); }
.l84-dash h5 { margin: 0 0 10px; font: 400 18px/1 var(--f-display); letter-spacing: .05em; color: #fff; }
.l84-dash .kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.l84-dash .kv div { background: #1E1B2B; border: 2px solid #2E2A44; border-radius: 10px; padding: 8px 10px; }
.l84-dash .kv small { display: block; color: #8E89A8; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.l84-dash .kv b { font: 400 18px/1.1 var(--f-display); color: #fff; }
.l84-dash .sw { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: #1E1B2B; border: 2px solid #2E2A44; border-radius: 10px; padding: 10px 12px; }
.l84-dash .tog { width: 54px; height: 28px; border-radius: 14px; background: #2DC768; border: 2px solid var(--ink); position: relative; flex: none; }
.l84-dash .tog::after { content: ""; position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.l84-dash .tog.off { background: #4A4560; }
.l84-dash .tog.off::after { right: auto; left: 3px; }
.l84-dash table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.l84-dash td, .l84-dash th { text-align: left; padding: 6px 8px; border-bottom: 1px solid #2E2A44; }
.l84-dash th { color: #8E89A8; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }