/* ===== Meow Battle · CHOOSE YOUR BATTLE (cinematic mode select) ===== */
#plScr { position: absolute; inset: 0; z-index: 39; opacity: 0; transition: opacity .5s ease; background: #07040b; overflow: clip; pointer-events: auto; }
#plScr.on { opacity: 1; }
#plScr[hidden] { display: none !important; }
#plScr, #plScr * { box-sizing: border-box; }

/* full-bleed scenes (cover the whole visible area, not only the 16:9 canvas) */
.pl-scenes { position: absolute; inset: 0; }
.pl-scene { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .8s ease; }
.pl-scene.on { opacity: 1; }
.pl-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 4, 13, .94) 0%, rgba(9, 4, 13, .82) 22%, rgba(9, 4, 13, .4) 40%, rgba(9, 4, 13, 0) 58%),
              linear-gradient(0deg, rgba(9, 4, 13, .85) 0%, rgba(9, 4, 13, 0) 26%), linear-gradient(180deg, rgba(9, 4, 13, .55) 0%, rgba(9, 4, 13, 0) 16%); }

/* the 1920 x 1080 UI canvas */
.pl-cvs { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; color: #f3eff7; font-family: Barlow, sans-serif; }
.pl-back { position: absolute; left: 96px; top: 64px; width: 52px; height: 52px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #ecd39a; background: rgba(9, 4, 13, .35); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .45); transition: color .25s, box-shadow .25s, transform .25s; }
.pl-back svg { width: 24px; height: 24px; }
.pl-back:hover { color: #fff3d6; box-shadow: inset 0 0 0 1px #ffd98a, 0 0 22px rgba(255, 200, 110, .35); transform: translateX(-3px); }
.pl-mode:focus { outline: none; }
.pl-mode:focus-visible .nm { text-decoration: underline 1px rgba(255, 217, 138, .6); text-underline-offset: 10px; }
.pl-back:focus-visible, .pl-cta:focus-visible, .pl-tb:focus-visible, .pl-edit:focus-visible { outline: 2px solid #ffd98a; outline-offset: 4px; }
.pl-head { position: absolute; left: 0; right: 0; top: 78px; display: flex; align-items: center; justify-content: center; gap: 22px; pointer-events: none; font: 600 15px/1 Cinzel, serif; letter-spacing: .5em; color: rgba(243, 232, 205, .82); text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.pl-head::before, .pl-head::after { content: ""; width: 120px; height: 1px; background: linear-gradient(90deg, rgba(236, 211, 154, 0), rgba(236, 211, 154, .8)); }
.pl-head::after { transform: scaleX(-1); }

/* ---------- mode list ---------- */
.pl-modes { position: absolute; left: 120px; top: 232px; width: 940px; }
.pl-mode { position: relative; display: block; width: 100%; padding: 14px 0 14px 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; }
.pl-mode .row { position: relative; display: flex; align-items: baseline; gap: 26px; }
.pl-mode .num { width: 46px; flex: none; font: 600 22px/1 Cinzel, serif; color: rgba(236, 211, 154, .45); letter-spacing: .08em; transition: color .4s; }
.pl-mode .nm { font: 700 50px/1 Cinzel, serif; letter-spacing: .06em; color: rgba(243, 239, 247, .38); transition: color .4s, font-size .45s cubic-bezier(.2, .8, .2, 1), text-shadow .4s; white-space: nowrap; }
.pl-mode .soon { flex: none; white-space: nowrap; margin-left: 4px; align-self: center; font: 700 10px/1 Barlow, sans-serif; letter-spacing: .28em; color: rgba(236, 211, 154, .7); padding: 6px 9px 5px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .4); transition: opacity .3s; }
.pl-mode .age { flex: none; align-self: center; width: 42px; height: 42px; min-width: 42px; display: grid; place-items: center; border-radius: 50%; font: 800 15px/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; color: #fbefd5; text-shadow: 0 1px 2px #000;
  background: radial-gradient(120% 140% at 50% 0%, rgba(80, 40, 70, .55), rgba(14, 10, 22, .88) 60%); box-shadow: inset 0 0 0 1.5px rgba(236, 196, 116, .85), inset 0 0 0 4px rgba(36, 18, 10, .92), inset 0 0 0 5.5px rgba(196, 146, 66, .5), 0 6px 14px rgba(0, 0, 0, .45); }
.pl-mode:hover .nm { color: rgba(243, 239, 247, .7); }
.pl-mode.on .num { color: #ecd39a; }
.pl-mode.on .nm { font-size: 72px; color: transparent; background: linear-gradient(180deg, #fff8e6 0%, #f6dca0 55%, #d9a856 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(255, 200, 110, .18)); }
.pl-mode .ln { position: absolute; left: -120px; top: 50%; width: 84px; height: 1px; margin-top: -1px; background: linear-gradient(90deg, rgba(255, 217, 138, 0), #ffd98a); transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 10px rgba(255, 217, 138, .6); }
.pl-mode.on .ln { transform: scaleX(1); }
.pl-mode .more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2, .8, .2, 1), opacity .4s; opacity: 0; padding-left: 72px; }
.pl-mode.on .more { grid-template-rows: 1fr; opacity: 1; }
.pl-mode .more > div { overflow: hidden; }
.pl-mode .ds { padding-top: 14px; font: 500 21px/1.4 Barlow, sans-serif; letter-spacing: .03em; color: rgba(243, 239, 247, .82); text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.pl-mode .st { margin-top: 10px; font: 600 12px/1 Barlow, sans-serif; letter-spacing: .3em; color: rgba(236, 211, 154, .75); }

/* tables (cash) */
.pl-tables { display: flex; gap: 14px; margin-top: 18px; }
.pl-tb { position: relative; width: 170px; padding: 14px 16px 13px; border: 0; cursor: pointer; text-align: left; color: #f3eff7; background: linear-gradient(180deg, rgba(30, 16, 30, .55), rgba(12, 6, 16, .7)); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .35); transition: box-shadow .3s, background .3s, transform .3s; }
.pl-tb::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(236, 211, 154, .14); pointer-events: none; transition: border-color .3s; }
.pl-tb b { display: block; font: 600 11px/1 Barlow, sans-serif; letter-spacing: .3em; color: rgba(236, 211, 154, .8); }
.pl-tb strong { display: block; margin-top: 8px; font: 700 34px/1 Cinzel, serif; letter-spacing: .02em; color: #fff3d6; }
.pl-tb strong small { font: 600 13px/1 Barlow, sans-serif; letter-spacing: .16em; color: rgba(243, 239, 247, .6); margin-left: 6px; }
.pl-tb em { display: block; margin-top: 9px; font: 600 13px/1 Barlow, sans-serif; font-style: normal; letter-spacing: .14em; color: #9ff0b8; }
.pl-tb:hover { box-shadow: inset 0 0 0 1px rgba(255, 217, 138, .75); transform: translateY(-2px); }
.pl-tb.on { background: linear-gradient(180deg, rgba(120, 82, 30, .5), rgba(40, 22, 12, .75)); box-shadow: inset 0 0 0 1px #ffd98a, 0 0 26px rgba(255, 200, 110, .25); }
.pl-tb.on::before { border-color: rgba(255, 217, 138, .45); }

/* ---------- deck widget ---------- */
.pl-deck { position: absolute; left: 120px; bottom: 88px; display: flex; align-items: center; gap: 26px; }
.pl-stack { position: relative; width: 78px; height: 108px; flex: none; cursor: pointer; }
.pl-stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 8px 18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(236, 211, 154, .5); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.pl-stack img:nth-child(1) { transform: rotate(-9deg) translate(-6px, 2px); filter: brightness(.6); }
.pl-stack img:nth-child(2) { transform: rotate(-3deg) translate(-2px, 0); filter: brightness(.8); }
.pl-stack:hover img:nth-child(1) { transform: rotate(-16deg) translate(-14px, 4px); }
.pl-stack:hover img:nth-child(2) { transform: rotate(-7deg) translate(-6px, 1px); }
.pl-stack:hover img:nth-child(3) { transform: rotate(4deg) translate(6px, -4px); }
.pl-dk b { display: block; font: 600 12px/1 Barlow, sans-serif; letter-spacing: .34em; color: rgba(236, 211, 154, .85); }
.pl-dk strong { display: block; margin-top: 10px; font: 700 28px/1 Cinzel, serif; letter-spacing: .04em; color: #fff3d6; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-dk span { display: flex; align-items: center; gap: 16px; margin-top: 12px; font: 500 15px/1 Barlow, sans-serif; letter-spacing: .1em; color: rgba(243, 239, 247, .7); }
.pl-edit { height: 34px; padding: 0 16px; border: 0; cursor: pointer; font: 600 12px/1 Barlow, sans-serif; letter-spacing: .26em; color: #ecd39a; background: rgba(9, 4, 13, .4); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .5); transition: color .25s, box-shadow .25s; }
.pl-edit:hover { color: #fff3d6; box-shadow: inset 0 0 0 1px #ffd98a, 0 0 16px rgba(255, 200, 110, .3); }

/* ---------- BATTLE ---------- */
.pl-cta { position: absolute; right: 120px; bottom: 96px; width: 440px; height: 96px; border: 0; padding: 0; cursor: pointer; color: #fff3d6; overflow: hidden;
  background: linear-gradient(180deg, rgba(60, 30, 40, .55), rgba(16, 8, 18, .78)); box-shadow: inset 0 0 0 1px #e9c77e, inset 0 0 0 6px rgba(9, 4, 13, .5), inset 0 0 0 7px rgba(233, 199, 126, .5), 0 18px 40px rgba(0, 0, 0, .55); transition: box-shadow .35s, background .35s, transform .35s; }
.pl-cta span { position: relative; z-index: 1; font: 700 32px/1 Cinzel, serif; letter-spacing: .34em; padding-left: .34em; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.pl-cta small { position: relative; z-index: 1; display: block; margin-top: 8px; font: 600 11px/1 Barlow, sans-serif; letter-spacing: .32em; color: rgba(236, 211, 154, .8); }
.pl-cta::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%; transform: translateX(-180%) skewX(-20deg); background: linear-gradient(90deg, rgba(255, 236, 190, 0), rgba(255, 236, 190, .35), rgba(255, 236, 190, 0)); animation: plSweep 4.2s ease-in-out 1.5s infinite; pointer-events: none; }
@keyframes plSweep { 0%, 60% { transform: translateX(-180%) skewX(-20deg); } 92%, 100% { transform: translateX(480%) skewX(-20deg); } }
.pl-cta:hover { transform: translateY(-2px); background: linear-gradient(180deg, rgba(150, 96, 40, .55), rgba(50, 24, 16, .8)); box-shadow: inset 0 0 0 1px #ffe2a0, inset 0 0 0 6px rgba(9, 4, 13, .45), inset 0 0 0 7px rgba(255, 217, 138, .75), 0 18px 40px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 200, 110, .3); }
.pl-cta.off { cursor: not-allowed; color: rgba(243, 239, 247, .55); background: rgba(16, 8, 18, .6); box-shadow: inset 0 0 0 1px rgba(233, 199, 126, .35), inset 0 0 0 6px rgba(9, 4, 13, .5), inset 0 0 0 7px rgba(233, 199, 126, .18); transform: none; }
.pl-cta.off::after { display: none; }
.pl-cta.off span { font-size: 24px; letter-spacing: .3em; }

/* ---------- launch flash ---------- */
.pl-go { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; text-align: center; pointer-events: none; opacity: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(40, 18, 28, .55), rgba(7, 4, 11, .92)); transition: opacity .5s; }
.pl-go.on { opacity: 1; pointer-events: auto; }
.pl-go h2 { margin: 0; font: 700 64px/1 Cinzel, serif; letter-spacing: .2em; color: transparent; background: linear-gradient(180deg, #fff8e6, #d9a856); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .7)); }
.pl-go p { margin: 18px 0 30px; font: 500 20px/1.5 Barlow, sans-serif; letter-spacing: .06em; color: rgba(243, 239, 247, .8); }
.pl-go .row { display: flex; gap: 16px; justify-content: center; }
.pl-go button { height: 52px; padding: 0 28px; border: 0; cursor: pointer; font: 600 13px/1 Barlow, sans-serif; letter-spacing: .3em; color: #ecd39a; background: rgba(9, 4, 13, .5); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .6); }
.pl-go button:hover { color: #fff3d6; box-shadow: inset 0 0 0 1px #ffd98a, 0 0 18px rgba(255, 200, 110, .3); }
.pl-burst { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 76% 88%, rgba(255, 236, 190, .9), rgba(255, 200, 110, .3) 20%, rgba(255, 200, 110, 0) 50%); }
.pl-burst.on { animation: plBurst .9s ease-out; }
@keyframes plBurst { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .pl-cta::after { animation: none; } }