* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07040f; color: #eee; font-family: system-ui, -apple-system, Segoe UI, sans-serif; overflow: hidden; }
#stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: 0 0; }
#cv { position: absolute; inset: 0; width: 1280px; height: 720px; background: #0b0620; image-rendering: auto; }
.screen { position: absolute; inset: 0; display: none; }
.screen.show { display: flex; }
.overlay { background: rgba(7, 4, 15, 0.82); flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
#results { background: transparent; justify-content: flex-end; padding-bottom: 70px; }
#results .menu { flex-direction: row; }

#title { flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.logo { text-align: center; line-height: .9; }
.logo span { display: block; letter-spacing: 18px; font-weight: 300; font-size: 34px; color: #7fe3ff; }
.logo b { display: block; font-size: 120px; font-style: italic; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(180deg, #fff 10%, #ffd23f 60%, #ff6a2b); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 #2a1150); }
.tag { color: #b9a9e6; margin: 0 0 18px; }
.hint { color: #6f5fa0; font-size: 13px; }
.menu { display: flex; flex-direction: column; gap: 8px; min-width: 300px; }
.menu button, .filters button, .chips button { font: inherit; cursor: pointer; border: 2px solid #3b2a66; background: #160d2c; color: #ddd; padding: 10px 18px; border-radius: 10px; transition: .08s; }
.menu button { font-weight: 700; font-size: 18px; }
.menu button.sel, .menu button:hover { border-color: #ffd23f; color: #fff; background: #2a1650; transform: translateX(4px); }
h2 { margin: 0; font-style: italic; font-weight: 900; letter-spacing: 1px; }

/* select */
#select { flex-direction: column; background: radial-gradient(ellipse at 50% 0%, #2a1150, #0b0620 70%); padding: 14px 18px; gap: 10px; }
.sel-top { display: flex; gap: 14px; align-items: stretch; height: 270px; }
.pick { width: 250px; background: rgba(20, 12, 40, .85); border-radius: 14px; border: 2px solid #3b2a66; position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px; }
.pick.p1 { border-color: #ff4d6d; } .pick.p2 { border-color: #3fb6ff; }
.pick canvas { width: 160px; height: 145px; flex: none; }
.pname { font-weight: 800; font-size: 16px; text-align: center; }
.pstats { font-size: 11px; color: #b9a9e6; text-align: center; }
.who { position: absolute; top: 6px; left: 10px; font-weight: 900; font-style: italic; }
.p1 .who { color: #ff4d6d; } .p2 .who { color: #3fb6ff; }
.sel-mid { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; }
#selPrompt { font-size: 30px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.filters input { font: inherit; background: #160d2c; border: 2px solid #3b2a66; color: #fff; padding: 8px 12px; border-radius: 10px; width: 200px; }
.chips { display: flex; gap: 4px; align-items: center; }
.chips b { font-size: 12px; color: #8a7bc0; margin-right: 4px; }
.chips button { padding: 5px 10px; font-size: 13px; }
.chips button.on { border-color: #ffd23f; color: #fff; }
#grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, 82px); grid-auto-rows: 82px; justify-content: center; gap: 6px; padding: 4px; align-content: start; }
#grid::-webkit-scrollbar { width: 8px; } #grid::-webkit-scrollbar-thumb { background: #3b2a66; border-radius: 4px; }
.cell { position: relative; background: rgba(20, 12, 40, .9); border: 2px solid #2a1d4a; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.cell img { max-width: 86%; max-height: 86%; pointer-events: none; }
.cell .st { position: absolute; bottom: 2px; right: 5px; font-size: 10px; font-weight: 800; color: #8a7bc0; }
.cell .af { position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; }
.cell.cur1 { border-color: #ff4d6d; box-shadow: 0 0 0 2px #ff4d6d inset; }
.cell.cur2 { border-color: #3fb6ff; box-shadow: 0 0 0 2px #3fb6ff inset; }
.cell.cur1.cur2 { border-color: #fff; }
.cell:hover { background: #2a1650; }

/* loading */
#loading { flex-direction: column; align-items: center; justify-content: center; gap: 30px; background: #0b0620; }
.vs { display: flex; align-items: center; gap: 40px; font-size: 34px; font-weight: 900; font-style: italic; }
.vs i { font-size: 70px; color: #ffd23f; }
#ldA { color: #ff4d6d; } #ldB { color: #3fb6ff; }
.bar { width: 420px; height: 8px; background: #1b1235; border-radius: 4px; overflow: hidden; }
#ldBar { height: 100%; width: 0; background: linear-gradient(90deg, #7fe3ff, #ffd23f); }

.howto { display: grid; grid-template-columns: auto auto auto; gap: 4px 26px; background: rgba(20, 12, 40, .9); padding: 18px 24px; border-radius: 14px; border: 2px solid #3b2a66; font-size: 14px; }
.howto.small { font-size: 12px; }
.howto .h { font-weight: 900; color: #ffd23f; } .howto .k { color: #7fe3ff; font-family: ui-monospace, monospace; }
.howto p { grid-column: 1 / -1; margin: 8px 0 0; color: #b9a9e6; max-width: 640px; }

.pstats .kit { color: #e6dcff; }
.pstats .ph { color: #8a7bb8; font-size: 10px; font-style: italic; }

#ldArena { margin-top: 10px; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: #b9a9e6; text-align: center; }
#toast { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 8px 16px; border-radius: 8px;
  background: rgba(10,6,25,.85); color: #fff; font: 600 14px system-ui; opacity: 0; transition: opacity .2s; pointer-events: none; }
#toast.on { opacity: 1; }


/* Passport account + trait grades */
.acct { font-size: 13px; color: #b9a9e6; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: center; max-width: 640px; text-align: center; }
.acct b { color: #fff; } .acct small { color: #8a7bb8; }
.acct button { font: inherit; font-size: 12px; cursor: pointer; border: 2px solid #3b2a66; background: #160d2c; color: #ddd; padding: 4px 10px; border-radius: 8px; }
.acct button:hover { border-color: #7fe3ff; }
.acct button.pp { font-size: 14px; padding: 8px 16px; border-color: #36c7ff; color: #fff; background: linear-gradient(#123a5c, #0c2340); }
.acct .dot { width: 8px; height: 8px; border-radius: 50%; background: #5dff9a; box-shadow: 0 0 6px #5dff9a; }
.acct .note { flex-basis: 100%; color: #ffb36b; font-size: 12px; }
.cell .gr { position: absolute; top: 2px; right: 5px; font-size: 11px; font-weight: 900; text-shadow: 0 1px 2px #000; }
.cell .fin { position: absolute; bottom: 2px; left: 5px; font-size: 9px; font-weight: 800; color: #e6dcff; opacity: .8; }
.cell.own { background: rgba(32, 22, 64, .95); border-color: #4a3a80; }
.tbars { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 1px 6px; align-items: center; margin-top: 3px; font-size: 10px; }
.tbars .tg { grid-row: span 2; font-size: 20px; font-weight: 900; line-height: 1; text-align: center; }
.tbars .tg small { display: block; font-size: 9px; color: #b9a9e6; }
.tbars .tb { display: flex; gap: 3px; align-items: center; } .tbars .tb b { width: 22px; text-align: right; color: #b9a9e6; }
.tbars .tb i { display: flex; gap: 1px; } .tbars u, .tbars s { width: 5px; height: 7px; border-radius: 1px; background: #ffd23f; text-decoration: none; }
.tbars s { background: #33264f; }
.tbars .tid { grid-column: 1 / -1; color: #8a7bb8; font-size: 9px; }
#ldA em, #ldB em { font-style: normal; font-size: .7em; margin-left: 8px; }
/* owned / loaner / locked cells, select-then-confirm */
.cell.lock { opacity: .55; cursor: not-allowed; border-color: #1e1636; }
.cell.lock img { filter: grayscale(1) brightness(.6); }
.cell.lock:hover { background: rgba(20, 12, 40, .9); }
.cell.loan { border-style: dashed; border-color: #5a4a8e; }
.cell .gr { font-size: 12px; }
.cell .ln { position: absolute; bottom: 2px; left: 4px; font-size: 8px; font-weight: 900; letter-spacing: .5px; color: #b9a9e6; }
.cell .fin.h { color: #9ff3ff; } .cell .fin.dh { color: #e08bff; }
.cell .cn { position: absolute; top: 18px; right: 5px; font-size: 9px; font-weight: 800; color: #b9a9e6; }
.cell.pend1 { border-color: #ff4d6d; box-shadow: 0 0 0 3px #ff4d6d inset, 0 0 14px #ff4d6d; animation: pendPulse .9s ease-in-out infinite alternate; }
.cell.pend2 { border-color: #3fb6ff; box-shadow: 0 0 0 3px #3fb6ff inset, 0 0 14px #3fb6ff; animation: pendPulse .9s ease-in-out infinite alternate; }
@keyframes pendPulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.filters button.confirm { border-color: #ffd23f; color: #ffd23f; font-weight: 800; }
.filters button.confirm:disabled { opacity: .35; cursor: default; border-color: #3b2a66; color: #8a7bb8; }
.filters button.confirm:not(:disabled) { background: #3a2a10; box-shadow: 0 0 12px rgba(255, 210, 63, .45); }
.copies { display: flex; gap: 6px; align-items: center; font-size: 11px; color: #b9a9e6; margin: 1px 0; }
.copies[hidden] { display: none; }
.copies button { font: inherit; font-size: 10px; cursor: pointer; border: 1px solid #3b2a66; background: #160d2c; color: #ddd; padding: 1px 7px; border-radius: 6px; }
.copies button:hover { border-color: #ffd23f; }
.pick.locked canvas { filter: grayscale(1) brightness(.6); }
.pstats .lk { color: #8a7bb8; }

/* title + menu screens (animated backdrop is drawn on the canvas by titlefx.js) */
.logo b { animation: logoGlow 3.2s ease-in-out infinite alternate; }
@keyframes logoGlow { from { filter: drop-shadow(0 6px 0 #2a1150) drop-shadow(0 0 0 rgba(255,210,63,0)); } to { filter: drop-shadow(0 6px 0 #2a1150) drop-shadow(0 0 22px rgba(255,170,60,.55)); } }
.logo span { text-shadow: 0 0 18px rgba(127,227,255,.6); }
.menu.big { min-width: 400px; gap: 10px; }
.menu.big button { display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 18px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(42,22,80,.88), rgba(18,10,36,.92)); border: 2px solid #4a3a80; box-shadow: 0 6px 0 rgba(10,4,24,.8), inset 0 1px 0 rgba(255,255,255,.08); }
.menu.big button span { display: flex; flex-direction: column; }
.menu.big button b { font-size: 21px; font-weight: 900; font-style: italic; letter-spacing: .5px; color: #fff; text-transform: uppercase; }
.menu.big button small { font-size: 12px; font-weight: 500; color: #b9a9e6; margin-top: 1px; }
.menu.big button .ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 15px;
  color: #120827; background: linear-gradient(180deg, #ffe37a, #ff9a3c); box-shadow: 0 0 0 3px rgba(255,210,63,.25); }
.menu.big button .ic.e { background: linear-gradient(180deg, #a6ffcb, #3fcf7a); } .menu.big button .ic.n { background: linear-gradient(180deg, #a8ecff, #3fa6ff); } .menu.big button .ic.h { background: linear-gradient(180deg, #ffa6c4, #ff4d6d); }
.menu.big button.sel, .menu.big button:hover { border-color: #ffd23f; background: linear-gradient(180deg, rgba(80,40,140,.95), rgba(36,16,70,.95)); transform: translateX(6px) scale(1.02);
  box-shadow: 0 6px 0 rgba(10,4,24,.8), 0 0 24px rgba(255,210,63,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.menu.big button.back { min-height: 0; padding: 8px 18px; } .menu.big button.back b { font-size: 15px; font-style: normal; }
.link-btn { font: inherit; font-size: 13px; background: none; border: none; color: #8a7bb8; cursor: pointer; text-decoration: underline; padding: 2px 6px; }
.link-btn:hover { color: #fff; }
.menu-screen { flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.mtitle { margin: 0; font-size: 46px; font-weight: 900; font-style: italic; letter-spacing: 1px;
  background: linear-gradient(180deg, #fff 10%, #ffd23f 60%, #ff6a2b); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #2a1150); }
.msub { margin: 0 0 10px; color: #b9a9e6; max-width: 640px; text-align: center; }
#tutEnd .mtitle { color: transparent; }
/* arcade ladder */
.lad-row { display: flex; gap: 8px; align-items: center; margin: 14px 0 6px; }
.lad-card { width: 104px; padding: 6px 4px 8px; border-radius: 12px; background: rgba(20,12,40,.9); border: 2px solid #3b2a66; display: flex; flex-direction: column; align-items: center; position: relative; }
.lad-card img { width: 76px; height: 76px; object-fit: contain; }
.lad-card b { font-size: 11px; color: #fff; text-align: center; line-height: 1.15; min-height: 26px; display: flex; align-items: center; }
.lad-card small { font-size: 11px; color: #b9a9e6; font-weight: 700; }
.lad-card em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 900; background: #3b2a66; color: #fff; padding: 1px 7px; border-radius: 8px; }
.lad-card.me { border-color: #ff4d6d; box-shadow: 0 0 16px rgba(255,77,109,.4); } .lad-card.me em { background: #ff4d6d; }
.lad-card.done { opacity: .45; } .lad-card.done img { filter: grayscale(1); } .lad-card.done::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; font-weight: 900; color: #5dff9a; text-shadow: 0 2px 6px #000; }
.lad-card.cur { border-color: #ffd23f; transform: scale(1.1); box-shadow: 0 0 22px rgba(255,210,63,.5); animation: pendPulse .9s ease-in-out infinite alternate; } .lad-card.cur em { background: #ffd23f; color: #120827; }
.lad-card.boss { border-color: #ff5ad1; } .lad-card.boss em { background: #ff5ad1; }
.lad-vs { font-style: italic; font-weight: 900; font-size: 26px; color: #ffd23f; margin: 0 4px; }
.lad-msg { color: #e6dcff; font-size: 17px; min-height: 26px; text-align: center; margin: 8px 0 6px; } .lad-msg b { color: #ffd23f; }
.menu.row { flex-direction: row; min-width: 0; }
.menu.big button .ic svg { display: block; }

/* title over the attract-mode demo: menu on the left, the fight framed to the right */
#title { align-items: flex-start; justify-content: center; gap: 10px; padding-left: 64px;
  background: linear-gradient(90deg, rgba(7,4,15,.92) 0%, rgba(7,4,15,.78) 26%, rgba(7,4,15,.25) 44%, rgba(7,4,15,0) 56%); }
#title .logo { text-align: left; } #title .logo span { letter-spacing: 14px; font-size: 28px; } #title .logo b { font-size: 104px; }
#title .tag { margin: 0 0 10px 4px; } #title .menu.big { min-width: 420px; }
#title .hint, #title .acct { text-align: left; justify-content: flex-start; max-width: 460px; margin: 0; }
.title-cap { position: absolute; right: 34px; bottom: 60px; text-align: right; display: flex; flex-direction: column; gap: 2px; opacity: 0; pointer-events: none; }
.title-cap.on { animation: capIn 7s ease forwards; }
.title-cap i { font-style: italic; font-weight: 900; font-size: 26px; letter-spacing: 1px; color: #ffd23f; text-shadow: 0 2px 0 #2a1150, 0 0 16px rgba(255,170,60,.5); }
.title-cap span { font-size: 14px; color: #e6dcff; text-shadow: 0 1px 3px #000; } .title-cap b { color: #fff; }
@keyframes capIn { 0% { opacity: 0; transform: translateX(30px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#titleVid { position: absolute; inset: 0; width: 100%; height: 720px; object-fit: cover; background: #07040f; }

/* battle royale */
.menu.big button .ic.r { background: linear-gradient(180deg, #e0b0ff, #9b4dff); color: #fff; font-size: 14px; }
.roy-grid { display: grid; grid-template-columns: repeat(5, 150px); gap: 10px; margin: 6px 0 4px; }
.roy-card { position: relative; background: rgba(20,12,40,.9); border: 2px solid #3b2a66; border-radius: 12px; padding: 6px 6px 8px; display: flex; flex-direction: column; align-items: center; }
.roy-card img { width: 76px; height: 76px; object-fit: contain; }
.roy-card b { font-size: 12px; color: #fff; text-align: center; line-height: 1.15; min-height: 28px; display: flex; align-items: center; }
.roy-card small { font-size: 11px; color: #b9a9e6; font-weight: 700; }
.roy-card .pz { margin-top: 3px; font-size: 10px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; padding: 1px 8px; border-radius: 8px; background: #2a1d4a; }
.roy-card.own { border-color: #ffd23f; } .roy-card.own::after { content: 'YOURS'; position: absolute; top: -8px; font-size: 9px; font-weight: 900; background: #ffd23f; color: #120827; padding: 1px 6px; border-radius: 6px; }
.roy-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; max-width: 980px; }
.roy-opts .chips button { padding: 6px 12px; font-size: 13px; }
.roy-table { display: grid; grid-template-columns: 50px 44px 1fr 110px 70px 80px 1.4fr; gap: 4px 10px; align-items: center; background: rgba(10,6,25,.75); border-radius: 14px; padding: 12px 18px; width: 980px; font-size: 13px; }
.roy-table .h { color: #8a7bb8; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.roy-table .pl { font-style: italic; font-weight: 900; font-size: 20px; color: #b9a9e6; } .roy-table .pl.p1 { color: #ffd23f; } .roy-table .pl.p2 { color: #e6e6f0; } .roy-table .pl.p3 { color: #e0915a; }
.roy-table img { width: 40px; height: 40px; object-fit: contain; }
.roy-table .nm { font-weight: 800; color: #fff; } .roy-table .nt { color: #b9a9e6; font-size: 12px; }
.chips[hidden] { display: none; }
.roy-card.you { border-color: #ffd23f; box-shadow: 0 0 16px rgba(255,210,63,.35); }
.roy-card.you::after { content: 'YOU'; position: absolute; top: -8px; font-size: 9px; font-weight: 900; background: #ffd23f; color: #120827; padding: 1px 6px; border-radius: 6px; }
.roy-card .ycp { position: absolute; top: 34px; left: 4px; font: inherit; font-size: 11px; cursor: pointer; border: 1px solid #3b2a66; background: #160d2c; color: #ffd23f; padding: 2px 6px; border-radius: 6px; }
.roy-card .ycp.r { left: auto; right: 4px; } .roy-card .ycp:hover { border-color: #ffd23f; }
.roy-table .nm.me { color: #ffd23f; }

/* Holo / Dark Holo cells, like the Illuvial Bowl's cards: coloured edge and a light sheen sweeping across */
.cell.holo { border-color: #7ee8ff; --sheen: rgba(126, 232, 255, 0.22); }
.cell.dholo { border-color: #ff6bd5; --sheen: rgba(255, 107, 213, 0.24); }
.cell.holo::after, .cell.dholo::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 8px;
  background: linear-gradient(115deg, transparent 30%, var(--sheen) 45%, rgba(255,255,255,0.18) 50%, var(--sheen) 55%, transparent 70%);
  background-size: 250% 100%; animation: cellSheen 3.2s linear infinite; }
@keyframes cellSheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.cell.lock.holo::after, .cell.lock.dholo::after { display: none; }

/* Home Screen web app (html.app): spectator-only title menu + touch pause/view buttons */
.app-only { display: none !important; }
html.app #btnControls, html.app #title .hint { display: none !important; }   /* the app shows the full menu tree (2026-10-08) */
/* (title-menu Return to Sanctum Mesa now shows everywhere, Home Screen app included) */   /* like Bowl and Landrush: no exit inside Brawler's own Home Screen app (leaving its scope opens browser bars); kept in the GachaRoll games app (html.grhub) */
html.app #appBar:not([hidden]) { display: flex !important; position: absolute; bottom: 14px; right: 16px; gap: 10px; z-index: 30; }
#appBar button { min-width: 64px; height: 52px; padding: 0 16px; border-radius: 12px; border: 2px solid rgba(255,255,255,.35); background: rgba(12,8,30,.72);
  color: #fff; font: 800 20px/1 inherit; font-family: inherit; letter-spacing: .04em; cursor: pointer; }
#appBar button:active { background: rgba(255,210,63,.35); }

/* Home Screen app on a phone held upright: ask for landscape (same screen as Illuvial Bowl and Landrush). */
#rotate{display:none;position:fixed;inset:0;z-index:90;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;
  background:radial-gradient(ellipse at 50% 40%,#2b1f4d,#120f18 70%);color:#f1eadb}
#rotate h2{margin:0;font:700 20px "Silkscreen","Courier New",ui-monospace,monospace;letter-spacing:.04em;color:#ffd24a;text-shadow:2px 2px 0 #7a4a00}
#rotate p{margin:0;max-width:28ch;font:15px/1.5 "Chakra Petch","Segoe UI",system-ui,sans-serif;color:rgba(241,234,219,.8)}
#rotate .rot-phone{width:64px;height:108px;border:4px solid #f1eadb;border-radius:12px;position:relative;animation:rot-turn 2.4s ease-in-out infinite}
#rotate .rot-phone::before{content:"";position:absolute;left:50%;bottom:6px;width:16px;height:4px;margin-left:-8px;border-radius:2px;background:#f1eadb}
#rotate .rot-phone::after{content:"";position:absolute;inset:10px 8px 16px;border-radius:3px;background:linear-gradient(135deg,#35c9b8,#6b5bd6 60%,#e2528f)}
#rotate button{font:13px "Chakra Petch","Segoe UI",system-ui,sans-serif;color:rgba(241,234,219,.7);background:none;border:1px solid rgba(241,234,219,.3);border-radius:999px;padding:6px 14px;margin-top:8px;cursor:pointer;box-shadow:none}
@keyframes rot-turn{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){#rotate .rot-phone{animation:none;transform:rotate(-90deg)}}
@media (orientation:portrait) and (max-width:700px) and (pointer:coarse){html:not(.allow-portrait) #rotate{display:flex}}   /* phones held upright, app or browser (2026-10-20) */
html.standalone, html.standalone body { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }

.roy-card.mystery { border-style: dashed; border-color: #4a3a7a; opacity: .82; }
.roy-card.mystery .q { width: 76px; height: 76px; display: grid; place-items: center; font-size: 46px; font-weight: 900; font-style: italic; color: #6f5fb0; }

/* ---- Battle Royale intro: the challengers wall (js/royale_intro.js) ---- */
#royIntro { cursor: pointer; overflow: hidden; }
#royIntro .ri-head { position: absolute; top: 24px; left: 28px; display: flex; align-items: baseline; gap: 16px; animation: riHead .5s cubic-bezier(.2,1.4,.4,1) both; }
#royIntro .ri-head b { font-size: 40px; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: 3px; color: #ffd23f; text-shadow: 0 3px 0 #6a2a00, 0 0 24px rgba(255,160,40,.55); }
#royIntro .ri-head span { font-size: 14px; font-weight: 800; color: #e6dcff; letter-spacing: 2px; text-transform: uppercase; }
@keyframes riHead { from { opacity: 0; transform: translateX(-80px) skewX(-12deg); } }
.ri-count { position: absolute; top: 26px; right: 30px; display: flex; align-items: baseline; gap: 8px; color: #b9a9e6; font-weight: 900; letter-spacing: 2px; font-size: 13px; }
.ri-count b { font-size: 40px; font-style: italic; color: #fff; line-height: 1; min-width: 46px; text-align: right; text-shadow: 0 0 18px rgba(255,255,255,.4); }
.ri-count.pop b { animation: riPop .25s ease-out; }
@keyframes riPop { from { transform: scale(1.6); color: #ffd23f; } }
.ri-wall { position: absolute; left: 26px; top: 92px; width: 1228px; display: grid; grid-template-columns: repeat(5, 236px); grid-auto-rows: 292px; gap: 10px 12px; }
.rw-card { --aff: #b07cff; --pw: #fff; --r: 0deg; position: relative; overflow: hidden; border-radius: 14px; padding: 8px 10px 9px; display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(40,24,78,.95), rgba(12,7,30,.96)); border: 2px solid rgba(255,255,255,.12); border-top: 4px solid var(--aff);
  box-shadow: 0 14px 30px rgba(0,0,0,.55); opacity: 0; transform: rotate(var(--r)); }
.rw-card:not(.in) { opacity: 1; transform: none; background: rgba(255,255,255,.025) !important; border: 2px dashed rgba(255,255,255,.14) !important; box-shadow: none; animation: rwWait 1.4s ease-in-out infinite; }
.rw-card:not(.in) > * { visibility: hidden; }
.rw-card:not(.in)::before { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 74px; font-weight: 900; font-style: italic; color: rgba(185,169,230,.22); }
.rw-card.you:not(.in) { border-color: rgba(255,210,63,.35) !important; } .rw-card.you:not(.in)::before { content: 'YOU'; font-size: 40px; color: rgba(255,210,63,.3); }
@keyframes rwWait { 50% { background: rgba(255,255,255,.06); } }
#royIntro.out .rw-card:not(.in) { opacity: 0; transition: opacity .2s; }
.rw-card.in { animation: rwSlam .36s cubic-bezier(.2,1.25,.35,1) both; }
.rw-card.star { animation: rwSlamBig .55s cubic-bezier(.2,1.3,.3,1) both; border-color: #ffd23f; border-top-color: #ffd23f;
  box-shadow: 0 0 0 2px rgba(255,210,63,.35), 0 0 36px rgba(255,210,63,.45), 0 14px 30px rgba(0,0,0,.55); }
@keyframes rwSlam { 0% { opacity: 0; transform: translateY(-140px) scale(1.7) rotate(calc(var(--r) * 6)); filter: brightness(3); }
  65% { opacity: 1; transform: translateY(5px) scale(.96) rotate(var(--r)); filter: brightness(1.7); } 100% { opacity: 1; transform: rotate(var(--r)); filter: none; } }
@keyframes rwSlamBig { 0% { opacity: 0; transform: scale(3) rotate(-12deg); filter: brightness(4); } 60% { opacity: 1; transform: scale(.94) rotate(var(--r)); filter: brightness(1.8); }
  80% { transform: scale(1.04) rotate(var(--r)); } 100% { opacity: 1; transform: rotate(var(--r)); filter: none; } }
.rw-card::after { content: ''; position: absolute; inset: -40% -80%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.45) 50%, transparent 58%); transform: translateX(-70%); pointer-events: none; }
.rw-card.in::after { animation: rwShine .7s .1s ease-out both; }
#royIntro.go .rw-card.in::after { animation: rwShine .8s ease-in-out both; }
@keyframes rwShine { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
.rw-card.h { border-color: transparent; background: linear-gradient(165deg, rgba(40,24,78,.95), rgba(12,7,30,.96)) padding-box, linear-gradient(110deg,#7fe3ff,#c58bff,#ffd23f,#7fe3ff) border-box; background-size: 100% 100%, 300% 100%; }
.rw-card.dh { border-color: transparent; background: linear-gradient(165deg, rgba(40,24,78,.95), rgba(12,7,30,.96)) padding-box, linear-gradient(110deg,#2a1d4a,#7a3cff,#ff5ad1,#2a1d4a) border-box; background-size: 100% 100%, 300% 100%; }
.rw-card.h.in, .rw-card.dh.in { animation: rwSlam .36s cubic-bezier(.2,1.25,.35,1) both, rwHolo 2.6s linear infinite; }
.rw-card.h.star, .rw-card.dh.star { animation: rwSlamBig .55s cubic-bezier(.2,1.3,.3,1) both, rwHolo 2.6s linear infinite; }
@keyframes rwHolo { to { background-position: 0 0, -300% 0; } }
.rw-top { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; color: var(--aff); }
.rw-card.you .rw-top > span:first-child { background: #ffd23f; color: #120827; padding: 1px 7px; border-radius: 6px; }
.rw-own { color: #e6dcff; background: rgba(255,255,255,.08); padding: 2px 7px; border-radius: 7px; font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .3px; font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-spr { position: relative; height: 120px; margin: 4px -4px 2px; border-radius: 10px; background: radial-gradient(ellipse at 50% 92%, color-mix(in srgb, var(--aff) 45%, transparent), transparent 62%), rgba(255,255,255,.035); }
.rw-spr canvas { display: block; width: 216px; height: 120px; }
.rw-pw { position: absolute; top: 4px; right: 6px; display: flex; flex-direction: column; align-items: center; line-height: .9; }
.rw-pw b { font-size: 30px; font-weight: 900; font-style: italic; color: var(--pw); text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.rw-pw small { font-size: 8px; font-weight: 900; letter-spacing: 2px; color: #b9a9e6; }
.rw-card h3 { margin: 2px 0 0; font-size: 19px; font-weight: 900; font-style: italic; color: #fff; text-transform: uppercase; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-card p { margin: 2px 0 6px; font-size: 11px; color: #b9a9e6; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-fin { color: #ffd23f; }
.rw-card.dh .rw-fin { color: #ff8ae0; }
.rw-trs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 8px; }
.rw-trs span { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 4px; font-size: 9px; font-weight: 900; color: #cfc3f5; }
.rw-trs em { font-style: normal; }
.rw-trs b { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.rw-trs i { display: block; height: 100%; background: linear-gradient(90deg, var(--aff), #fff); transform-origin: left; transform: scaleX(0); }
.rw-card.in .rw-trs i { animation: rwBar .5s .15s ease-out both; }
@keyframes rwBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rw-bot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.rw-om { color: #fff; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-big { position: absolute; left: 0; right: 0; top: 342px; height: 96px; display: flex; align-items: center; justify-content: center; gap: 26px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(8,4,20,.88) 18%, rgba(8,4,20,.88) 82%, transparent); }
.ri-big b { font-size: 64px; font-weight: 900; font-style: italic; color: #fff; letter-spacing: 2px; text-shadow: 0 4px 0 #3a1a00, 0 0 30px rgba(255,210,63,.6); }
.ri-big i { font-size: 30px; font-weight: 900; color: #ffd23f; letter-spacing: 4px; }
#royIntro.go .ri-big { animation: riBig 1.45s ease-out both; }
#royIntro.go .ri-big b { animation: riBigB .4s cubic-bezier(.2,1.4,.4,1) both; }
#royIntro.go .ri-big i { animation: riBigI .5s .15s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes riBig { 0% { opacity: 0; transform: scaleY(0); } 12% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes riBigB { from { transform: scale(2.4); opacity: 0; } }
@keyframes riBigI { from { transform: translateX(120px); opacity: 0; } }
#royIntro.out .rw-card.in { animation: rwOut .55s var(--d, 0s) cubic-bezier(.5,0,.9,.4) both; }
#royIntro.out .rw-card:nth-child(n+6).in { animation-name: rwOutDown; }
@keyframes rwOut { from { opacity: 1; transform: rotate(var(--r)); } to { opacity: 0; transform: translateY(-460px) scale(.7) rotate(calc(var(--r) * -8)); } }
@keyframes rwOutDown { from { opacity: 1; transform: rotate(var(--r)); } to { opacity: 0; transform: translateY(460px) scale(.7) rotate(calc(var(--r) * -8)); } }
#royIntro.out .ri-head, #royIntro.out .ri-count, #royIntro.out .ri-foot { transition: opacity .3s; opacity: 0; }
.ri-foot { position: absolute; left: 28px; right: 30px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; height: 22px; }
.ri-wait { font-size: 15px; font-weight: 900; letter-spacing: 2px; color: #ffd23f; }
.ri-skip { font-size: 11px; font-weight: 700; color: rgba(230,220,255,.55); letter-spacing: 1px; }
#royIntro.go .ri-skip { visibility: hidden; }

/* ---- Battle Royale end screen: the champion's moment (js/royale_end.js) ---- */
#royaleEnd { background: none; overflow: visible; }
#royaleEnd > * { position: absolute; z-index: 1; }
#royaleEnd .re-fx { inset: 0; z-index: 0; pointer-events: none; }
.re-head { top: 16px; left: 30px; display: flex; flex-direction: column; animation: reSlam .55s .05s cubic-bezier(.2,1.4,.35,1) both; transform-origin: left center; }
.re-head b { font-size: 44px; font-weight: 900; font-style: italic; letter-spacing: 2px; line-height: 1; color: #ffd23f; text-shadow: 0 4px 0 #6a2a00, 0 0 30px rgba(255,170,40,.6); }
.re-head span { margin-top: 4px; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: #e6dcff; text-transform: uppercase; }
@keyframes reSlam { 0% { opacity: 0; transform: scale(2.6) skewX(-14deg); filter: brightness(3); } 70% { opacity: 1; transform: scale(.97); } 100% { opacity: 1; transform: none; filter: none; } }
.re-meta { top: 22px; right: 30px; display: flex; gap: 8px; animation: reIn .5s .5s ease-out both; }
.re-meta span { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 9px; font-weight: 900; letter-spacing: 1.5px; color: #b9a9e6; text-transform: uppercase; }
.re-meta b { font-size: 22px; font-style: italic; color: #fff; line-height: 1.05; letter-spacing: 0; }
@keyframes reIn { from { opacity: 0; transform: translateY(-14px); } }
.re-champ { left: 30px; top: 84px; width: 520px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.re-crown { font-size: 15px; font-weight: 900; letter-spacing: 8px; color: #120827; background: linear-gradient(90deg, #ffb52a, #ffe58a, #ffb52a); padding: 4px 18px 4px 26px; border-radius: 8px;
  box-shadow: 0 0 24px rgba(255,200,60,.6); animation: reCrown .5s .3s cubic-bezier(.2,1.5,.35,1) both; }
@keyframes reCrown { from { opacity: 0; transform: translateY(-30px) scale(1.8); } }
.re-spr { width: 520px; height: 300px; margin-top: -4px; animation: reRise .7s .35s cubic-bezier(.2,1.2,.35,1) both; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--aff) 70%, transparent)); }
@keyframes reRise { from { opacity: 0; transform: translateY(60px) scale(.7); } }
.re-champ h1 { margin: -6px 0 0; font-size: 58px; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 1; color: #fff; letter-spacing: 1px;
  text-shadow: 0 4px 0 rgba(0,0,0,.6), 0 0 28px color-mix(in srgb, var(--aff) 80%, transparent); animation: reName .5s .75s cubic-bezier(.2,1.4,.35,1) both; }
@keyframes reName { from { opacity: 0; transform: scale(1.8); letter-spacing: 16px; } }
.re-champ p { margin: 6px 0 10px; font-size: 13px; font-weight: 800; color: #b9a9e6; animation: reIn .4s .95s ease-out both; }
.re-fin { color: #ffd23f; } .re-own { font-family: ui-monospace, Menlo, monospace; color: #e6dcff; }
.re-stats { display: flex; gap: 10px; animation: reIn .4s 1s ease-out both; }
.re-stats span { display: flex; flex-direction: column; align-items: center; min-width: 108px; padding: 7px 10px 6px; border-radius: 12px; background: linear-gradient(170deg, rgba(60,36,110,.85), rgba(20,12,44,.9));
  border-top: 3px solid var(--aff); font-size: 9px; font-weight: 900; letter-spacing: 1.5px; color: #b9a9e6; text-transform: uppercase; }
.re-stats b { font-size: 30px; font-style: italic; color: #fff; line-height: 1.05; letter-spacing: 0; }
.re-stats span:last-child b { color: var(--pw); }
.re-pod { left: 30px; top: 566px; width: 520px; display: flex; gap: 10px; }
.re-pc { --aff: #b07cff; flex: 1; position: relative; display: flex; align-items: center; gap: 6px; height: 92px; padding-right: 10px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(165deg, rgba(40,24,78,.92), rgba(12,7,30,.94)); border-left: 4px solid var(--aff); animation: reSide .45s var(--d) cubic-bezier(.2,1.3,.35,1) both; }
.re-pc canvas { width: 130px; height: 92px; flex: none; }
.re-pc b { display: block; font-size: 17px; font-weight: 900; font-style: italic; text-transform: uppercase; color: #fff; line-height: 1.05; }
.re-pc small { font-size: 11px; font-weight: 800; color: #b9a9e6; }
.re-pl { position: absolute; top: 4px; left: 8px; font-size: 22px; font-weight: 900; font-style: italic; z-index: 1; }
.re-pc.p2 .re-pl { color: #e6e6f0; } .re-pc.p3 .re-pl { color: #e0915a; }
@keyframes reSide { from { opacity: 0; transform: translateX(-60px); } }
.re-aws { left: 580px; top: 84px; width: 670px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.re-aw { --aff: #b07cff; position: relative; display: flex; align-items: center; gap: 10px; height: 66px; padding: 0 8px 0 12px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(165deg, rgba(48,28,92,.94), rgba(14,8,32,.95)); border: 1px solid rgba(255,255,255,.1); animation: reFlip .5s var(--d) cubic-bezier(.2,1.3,.35,1) both; }
.re-aw::after { content: ''; position: absolute; inset: -40% -80%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.35) 50%, transparent 58%); animation: rwShine .8s calc(var(--d) + .2s) ease-out both; pointer-events: none; }
.re-aw i { font-style: normal; font-size: 26px; width: 36px; text-align: center; color: var(--aff); text-shadow: 0 0 14px var(--aff); }
.re-aw div { flex: 1; min-width: 0; line-height: 1.1; }
.re-aw em { display: block; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: 2px; color: #ffd23f; }
.re-aw b { display: block; font-size: 17px; font-weight: 900; font-style: italic; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.re-aw small { font-size: 11px; font-weight: 700; color: #b9a9e6; }
.re-aw img { width: 54px; height: 54px; object-fit: contain; }
@keyframes reFlip { from { opacity: 0; transform: perspective(600px) rotateX(-80deg) translateY(-10px); } }
.re-table { left: 580px; top: 234px; width: 670px; padding: 6px 10px; border-radius: 14px; background: rgba(10,6,25,.72); animation: reIn .3s 2.6s ease-out both; }
.re-row { display: grid; grid-template-columns: 40px 32px 1fr 92px 34px 52px 170px; align-items: center; gap: 0 8px; height: 30px; font-size: 13px; font-weight: 700; color: #cfc3f5; border-radius: 8px; padding: 0 6px;
  animation: reRow .35s var(--d) ease-out both; }
.re-row.h { height: 22px; font-size: 10px; font-weight: 900; letter-spacing: 1px; color: #8a7bb8; text-transform: uppercase; animation: reIn .3s 2.65s ease-out both; }
.re-row img { width: 28px; height: 28px; object-fit: contain; }
.re-row .pl { font-size: 17px; font-weight: 900; font-style: italic; color: #8a7bb8; }
.re-row.p1 .pl { color: #ffd23f; } .re-row.p2 .pl { color: #e6e6f0; } .re-row.p3 .pl { color: #e0915a; }
.re-row.p1 { background: linear-gradient(90deg, rgba(255,210,63,.18), transparent); }
.re-row .nm { color: #fff; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.re-row .nm small { font-size: 9px; color: #120827; background: #ffd23f; padding: 1px 5px; border-radius: 5px; margin-left: 4px; }
.re-row.me { background: rgba(255,210,63,.12); box-shadow: inset 0 0 0 1px rgba(255,210,63,.45); }
.re-row .pz { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
.re-row .k, .re-row .dm { color: #fff; text-align: right; }
.re-row .st { font-size: 11px; color: #9a8bc8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes reRow { from { opacity: 0; transform: translateX(40px); } }
.re-you { left: 580px; top: 576px; width: 670px; padding: 8px 14px; border-radius: 10px; background: rgba(255,210,63,.12); border: 1px solid rgba(255,210,63,.45); color: #ffe9a8; font-size: 13px; font-weight: 900; letter-spacing: 1.5px; text-align: center;
  animation: reIn .4s 3.5s ease-out both; }
.re-you b { color: #ffd23f; font-size: 16px; }
.re-you.win { background: linear-gradient(90deg, #ffb52a, #ffe58a, #ffb52a); color: #120827; font-size: 18px; letter-spacing: 4px; box-shadow: 0 0 30px rgba(255,200,60,.55); }
#royaleEnd .re-ver { left: 580px; top: 618px; width: 670px; margin: 0; text-align: center; font-size: 12px; font-weight: 700; color: #b9a9e6; }
#royaleEnd #royEndMenu { right: 30px; bottom: 16px; margin: 0; animation: reIn .4s 3.2s ease-out both; }

/* ---- Daily Royale, leaderboards, my Illuvials ---- */
#royMenu button { font-size: 15px; padding: 9px 13px; }
.menu button.gold { border-color: #b8860b; background: linear-gradient(180deg, #4a3208, #2a1a04); color: #ffe08a; }
.menu button.gold.sel, .menu button.gold:hover { border-color: #ffd23f; background: linear-gradient(180deg, #6a4810, #3a2406); color: #fff; }
#royNote { min-height: 18px; color: #ffd23f; }
.roy-card .rec { margin-top: 2px; font-size: 10px; font-weight: 900; color: #ffd23f; letter-spacing: .3px; }
#rbTabs { justify-content: center; }
.rb-table { width: 980px; max-height: 470px; overflow-y: auto; background: rgba(10,6,25,.78); border-radius: 14px; padding: 8px 14px; }
.rb-row { display: grid; grid-template-columns: 52px 150px 36px 1fr 70px 60px 70px 80px; align-items: center; gap: 0 10px; height: 38px; font-size: 14px; font-weight: 700; color: #cfc3f5; border-radius: 8px; padding: 0 8px; }
.rb-row.w { grid-template-columns: 52px 1fr 90px 110px 80px 100px; }
.rb-row.h { height: 26px; font-size: 11px; font-weight: 900; letter-spacing: 1px; color: #8a7bb8; text-transform: uppercase; }
.rb-row img { width: 34px; height: 34px; object-fit: contain; }
.rb-row .rk { font-size: 18px; font-weight: 900; font-style: italic; color: #8a7bb8; }
.rb-row.p1 .rk { color: #ffd23f; } .rb-row.p2 .rk { color: #e6e6f0; } .rb-row.p3 .rk { color: #e0915a; }
.rb-row.p1 { background: linear-gradient(90deg, rgba(255,210,63,.16), transparent); }
.rb-row .ow { font-family: ui-monospace, Menlo, monospace; color: #e6dcff; font-size: 13px; }
.rb-row .ow.nmd { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.12; }
.rb-row .ow.nmd b { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; font-weight: 900; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-row .ow.nmd small { font-size: 10.5px; color: #b9a9e6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-row .nm { color: #fff; font-weight: 900; } .rb-row .nm small { font-size: 10px; color: #b9a9e6; }
.rb-row .sc { color: #ffd23f; font-weight: 900; font-size: 16px; text-align: right; }
.rb-row.me { background: rgba(255,210,63,.13); box-shadow: inset 0 0 0 1px rgba(255,210,63,.45); }
.rb-empty { padding: 30px; text-align: center; color: #b9a9e6; font-weight: 700; }
.rp-grid { width: 1000px; max-height: 480px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rp-card { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: linear-gradient(165deg, rgba(40,24,78,.92), rgba(12,7,30,.94)); border: 1px solid rgba(255,255,255,.08); }
.rp-card img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.rp-card b { font-size: 17px; font-weight: 900; font-style: italic; text-transform: uppercase; color: #fff; }
.rp-card small { margin-left: 8px; font-size: 11px; font-weight: 800; color: #b9a9e6; }
.rp-card p { margin: 4px 0 0; font-size: 12px; font-weight: 700; color: #cfc3f5; }
.rp-card p b { font-size: 12px; font-style: normal; color: #ffd23f; text-transform: none; }
.rp-card em { font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: 1.5px; color: #8a7bb8; margin-right: 6px; }

/* ---- menu tree (Brawl / Battle Royale / Ranked Events / Exit) ---- */
.chips[hidden], .menu button[hidden] { display: none !important; }
.menu.big button { position: relative; }
.menu.big button .ic.g { background: linear-gradient(180deg, #ffe9a0, #ffb52a); }
.menu.big button .ic.t { background: linear-gradient(180deg, #e3c8ff, #a46bff); }
.menu.big button .ic.x { background: linear-gradient(180deg, #d8d0ee, #8a7bb8); font-size: 17px; }
.menu.big button.minor { min-height: 0; padding: 7px 18px; opacity: .9; }
.menu.big button.minor b { font-size: 16px; }
.menu.big button.minor .ic { width: 32px; height: 32px; font-size: 13px; }
.menu.big button.soon { opacity: .62; }
.menu.big button.soon.sel, .menu.big button.soon:hover { opacity: .85; }
.menu.big button.soon b { color: #d8ccff; }
.soon-tag { margin-left: auto; padding-left: 12px; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: 2px; color: #120827;
  background: linear-gradient(90deg, #ffd23f, #ff9ad8); padding: 3px 8px; border-radius: 6px; align-self: center; }
.menu.big button.nudge { animation: mNudge .35s ease-out; }
@keyframes mNudge { 20% { transform: translateX(14px); } 45% { transform: translateX(-2px); } 70% { transform: translateX(9px); } }
.soon-note { min-height: 20px; color: #ffd23f !important; font-weight: 700; }
.soon-note.pulse { animation: mPulse .5s ease-out; }
@keyframes mPulse { from { opacity: 0; transform: translateY(6px); } }
.modal { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(6,3,15,.72); backdrop-filter: blur(3px); animation: mFade .18s ease-out; }
.modal[hidden] { display: none; }
.modal-box { width: 460px; padding: 26px 30px 22px; border-radius: 18px; text-align: center; background: linear-gradient(165deg, rgba(48,28,92,.98), rgba(14,8,32,.98));
  border: 2px solid rgba(255,210,63,.45); box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: mPop .25s cubic-bezier(.2,1.4,.4,1); }
.modal-box h3 { margin: 0 0 8px; font-size: 30px; font-weight: 900; font-style: italic; color: #ffd23f; text-transform: uppercase; letter-spacing: 1px; }
.modal-box p { margin: 0 0 18px; color: #cfc3f5; font-weight: 600; }
.modal-box .menu.row { justify-content: center; min-width: 0; }
@keyframes mFade { from { opacity: 0; } }
@keyframes mPop { from { opacity: 0; transform: scale(.85); } }
/* one icon colour everywhere (2026-10-08) */
.menu.big button .ic, .menu.big button .ic.e, .menu.big button .ic.n, .menu.big button .ic.h, .menu.big button .ic.r, .menu.big button .ic.g, .menu.big button .ic.t, .menu.big button .ic.x { background: linear-gradient(180deg, #ffe37a, #ff9a3c); }

.soon-tag.mob { background: linear-gradient(90deg, #7fe3ff, #c58bff); }
.menu.big button.mobsoon { opacity: .62; }
.menu.big button.mobsoon.sel, .menu.big button.mobsoon:hover { opacity: .85; }
.mob-note { color: #7fe3ff !important; font-weight: 700; }
#titleNote { min-height: 0; margin: 6px 0 0; font-size: 13px; max-width: 520px; }

/* Home Screen app: a wider stage (--sw); the hand-placed screens keep a centred 1280 band */
#royIntro, #royaleEnd { left: calc(50% - 640px); right: auto; width: 1280px; }
#royaleEnd::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(640px - var(--sw, 1280px) / 2); width: var(--sw, 1280px); background: radial-gradient(ellipse at 23% 42%, rgba(40,20,70,.45), rgba(6,3,15,.9) 62%), linear-gradient(90deg, rgba(6,3,15,.5), rgba(6,3,15,.85)); z-index: 0; pointer-events: none; }

/* ---- touch controls (js/touch.js): stage pixels, scaled with the stage ---- */
#touchUI { position: absolute; inset: 0; z-index: 25; pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#touchUI[hidden] { display: none; }
#touchUI .tz { position: absolute; left: 0; top: 96px; bottom: 0; width: 46%; pointer-events: auto; touch-action: none; }
.tstick { position: absolute; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0 55%, rgba(255,255,255,.14) 56% 58%, rgba(255,255,255,.04) 59%); border: 3px solid rgba(255,255,255,.28); }
.tstick.idle { left: 170px; top: calc(100% - 170px); opacity: .45; }
.tknob { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff6c8, #ffd23f 45%, #c98a12); box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 -4px 0 rgba(0,0,0,.18); }
#touchUI .tb { position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: inherit; color: #fff; border: 3px solid rgba(255,255,255,.4); background: rgba(14,8,32,.55); box-shadow: 0 6px 16px rgba(0,0,0,.45); padding: 0; }
#touchUI .tb b { font-size: 40px; font-weight: 900; font-style: italic; line-height: 1; }
#touchUI .tb small { font-size: 13px; font-weight: 900; letter-spacing: 1.5px; margin-top: 2px; opacity: .9; }
#touchUI .tb.on { transform: scale(.92); filter: brightness(1.4); }
#touchUI .t-light { right: 56px; bottom: 46px; width: 160px; height: 160px; background: radial-gradient(circle at 40% 30%, rgba(255,120,150,.75), rgba(170,30,70,.65)); }
#touchUI .t-light b { font-size: 54px; }
#touchUI .t-heavy { right: 236px; bottom: 34px; width: 126px; height: 126px; background: radial-gradient(circle at 40% 30%, rgba(255,190,90,.75), rgba(190,90,10,.65)); }
#touchUI .t-block { right: 44px; bottom: 228px; width: 126px; height: 126px; background: radial-gradient(circle at 40% 30%, rgba(130,210,255,.75), rgba(30,100,190,.65)); }
#touchUI .t-omega { --fill: 0%; right: 206px; bottom: 186px; width: 112px; height: 112px; overflow: hidden;
  background: linear-gradient(0deg, rgba(197,139,255,.55) var(--fill), rgba(14,8,32,.6) var(--fill)); border-color: rgba(197,139,255,.6); }
#touchUI .t-omega.ready { border-color: #ffd23f; background: radial-gradient(circle at 40% 30%, #fff1a8, #ffb52a 55%, #b8620a); color: #120827; animation: tOmega .9s ease-in-out infinite; }
@keyframes tOmega { 50% { box-shadow: 0 0 0 6px rgba(255,210,63,.35), 0 0 40px rgba(255,210,63,.8); } }
.tp { position: absolute; pointer-events: auto; touch-action: none; left: 50%; top: 92px; width: 96px; height: 52px; margin-left: -48px; border-radius: 12px;
  border: 2px solid rgba(255,255,255,.35); background: rgba(12,8,30,.72); color: #fff; font: inherit; font-size: 20px; font-weight: 900; }
html.touchctl #appPause { display: none !important; }

/* GachaRoll nicknames (js/nicknames.js): rename button in the trait panel and its small dialog */
.nick-btn { font: inherit; font-size: 9px; font-weight: 800; margin-left: 4px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .6); background: rgba(255, 210, 63, .12); color: #ffd23f; cursor: pointer; pointer-events: auto; }
.nick-btn:hover { background: rgba(255, 210, 63, .25); }
.nick-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(8, 4, 20, .6); }
.nick-box { width: min(340px, 92vw); display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: #1a1030; border: 2px solid #ffd23f; color: #f1eadb; font: 14px system-ui, sans-serif; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.nick-box small { color: #a99ccc; font-size: 12px; }
.nick-box input { font: inherit; font-size: 16px; padding: 8px 10px; border-radius: 8px; border: 1px solid #ffd23f; background: rgba(0, 0, 0, .35); color: inherit; }
.nick-err { color: #ff7a8a; font-size: 12px; font-style: normal; min-height: 0; }
.nick-err:empty { display: none; }
.nick-act { display: flex; justify-content: flex-end; gap: 8px; }
.nick-act button { font: inherit; font-weight: 800; padding: 6px 14px; border-radius: 8px; border: 1px solid #5a4a8a; background: #2a1d4a; color: #f1eadb; cursor: pointer; }
.nick-act .nick-save { background: #ffd23f; color: #1a1206; border-color: #ffd23f; }
.nick-act .nick-save:disabled { opacity: .5; }

/* Fight Now: the one-tap way into a match (2026-10-20) */
.menu.big button.primary { border-color: #d9a520; background: linear-gradient(180deg, rgba(120,72,10,.95), rgba(58,30,6,.95)); }
.menu.big button.primary b { color: #fff3c4; font-size: 23px; }
.menu.big button.primary small { color: #ffd98a; }
.menu.big button.primary .ic { background: linear-gradient(180deg, #fff6c8, #ffc43a); animation: fnPulse 1.6s ease-in-out infinite; }
.menu.big button.primary.sel, .menu.big button.primary:hover { border-color: #ffe27a; background: linear-gradient(180deg, rgba(150,92,14,.98), rgba(80,42,8,.98)); box-shadow: 0 6px 0 rgba(10,4,24,.8), 0 0 30px rgba(255,190,60,.5), inset 0 1px 0 rgba(255,255,255,.18); }
@keyframes fnPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,210,63,.25); } 50% { box-shadow: 0 0 0 7px rgba(255,210,63,.08), 0 0 16px rgba(255,210,63,.6); } }
#title .menu.big { gap: 8px; }
#title .menu.big button:not(.primary):not(.minor) { padding-top: 8px; padding-bottom: 8px; }

/* settings (2026-10-20) */
#settings { background: rgba(7, 4, 15, 0.72); gap: 8px; }
.set-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; width: 1000px; max-width: calc(var(--sw, 1280px) - 80px); }
.srow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 2px solid #3b2a66; background: rgba(22, 13, 44, .92); cursor: pointer; user-select: none; }
.srow.sel { border-color: #ffd23f; background: rgba(42, 22, 80, .96); box-shadow: 0 0 18px rgba(255,210,63,.25); }
.srow .sl { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.srow .sl b { font-size: 16px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .4px; color: #fff; }
.srow .sl small { font-size: 11.5px; color: #a898d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .sv { min-width: 128px; text-align: center; font-weight: 800; font-size: 15px; color: #ffd23f; }
.srow button { font: inherit; font-weight: 900; width: 34px; height: 34px; border-radius: 9px; border: 2px solid #4a3a80; background: #160d2c; color: #fff; cursor: pointer; flex: none; }
.srow button:hover { border-color: #ffd23f; }
.srow .bar { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); margin-top: 5px; overflow: hidden; }
.srow .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ff9a3c, #ffd23f); border-radius: 4px; }
.srow.dim { opacity: .55; }
.set-help { min-height: 1.3em; font-size: 13px; }
/* touch layout options */
html.touch-left #touchUI .tz { left: auto; right: 0; }
html.touch-left #touchUI .t-light { right: auto; left: 56px; } html.touch-left #touchUI .t-heavy { right: auto; left: 236px; }
html.touch-left #touchUI .t-block { right: auto; left: 44px; } html.touch-left #touchUI .t-omega { right: auto; left: 206px; }
html.touch-big #touchUI .tb { transform: scale(1.14); } html.touch-big #touchUI .tb.on { transform: scale(1.05); }
html.touch-big #touchUI .t-light { transform-origin: 100% 100%; } html.touch-big #touchUI .t-heavy { transform-origin: 70% 100%; }
html.touch-big #touchUI .t-block { transform-origin: 100% 60%; } html.touch-big #touchUI .t-omega { transform-origin: 70% 70%; }
html.touch-big.touch-left #touchUI .t-light { transform-origin: 0 100%; } html.touch-big.touch-left #touchUI .t-heavy { transform-origin: 30% 100%; }
html.touch-big.touch-left #touchUI .t-block { transform-origin: 0 60%; } html.touch-big.touch-left #touchUI .t-omega { transform-origin: 30% 70%; }
html.touch-left .tstick.idle { left: calc(100% - 170px); }

/* title: How to Play / Settings / Exit share one compact row */
#title .menu.big .minor-row { display: flex; gap: 8px; }
#title .menu.big .minor-row button { flex: 1; min-width: 0; padding: 7px 10px; gap: 8px; }
#title .menu.big .minor-row button small { display: none; }
#title .menu.big .minor-row button b { font-size: 14px; white-space: nowrap; }
#title .menu.big .minor-row button .ic { width: 28px; height: 28px; }
#title .menu.big .minor-row button .ic svg { width: 16px; height: 16px; }
#title .menu.big .minor-row .soon-tag { display: none; }

/* pause menu gained "Return to Sanctum Mesa": tighten spacing so PAUSED + the controls card still fit the 720px stage */
#pause { gap: 8px; }
#pause .menu { gap: 6px; }
#pause .howto.small { padding: 10px 22px; }
#pause .howto.small p { margin-top: 5px; }
/* GachaRoll shared: Return to Sanctum Mesa button in the Sanctum Mesa theme (wood plank, cream pixel lettering) */
.gr-sanctum-btn{font:700 15px "Pixelify Sans","Nunito",system-ui,sans-serif !important;letter-spacing:.04em !important;color:#fff3d8 !important;border:3px solid #3b1d0e !important;border-radius:6px !important;padding:8px 16px !important;background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(70,30,8,.28) 9px 11px),linear-gradient(180deg,#c48548,#9c5a2a) !important;box-shadow:inset 0 2px 0 #e8ab6a,inset 0 -3px 0 #6a3412,0 3px 0 #1e0c04 !important;text-shadow:1px 1px 0 #4a230c !important;text-transform:none !important;cursor:pointer;transition:transform .08s,filter .12s;font-variant-ligatures:none}
.gr-sanctum-btn:hover,.gr-sanctum-btn:focus-visible{filter:brightness(1.08);transform:translateY(-1px)}
.gr-sanctum-btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 #e8ab6a,inset 0 -1px 0 #6a3412,0 1px 0 #1e0c04 !important}
.gr-sanctum-btn::before{content:"\2302" !important;position:static !important;display:inline-block !important;width:auto !important;height:auto !important;inset:auto !important;margin:0 .45em 0 0 !important;padding:0 !important;background:none !important;clip-path:none !important;-webkit-mask:none !important;mask:none !important;border:0 !important;box-shadow:none !important;animation:none !important;transform:none !important;filter:none !important;opacity:1 !important;color:inherit !important;font:inherit !important;line-height:1 !important}
.gr-sanctum-btn::after{display:none !important}
.gr-sanctum-btn svg,.gr-sanctum-btn .ic{display:none !important}
.gr-sanctum-btn small{color:#f3dcb4 !important;text-shadow:1px 1px 0 #4a230c !important}
.gr-sanctum-btn.sel,.gr-sanctum-btn[aria-selected="true"]{filter:brightness(1.1);outline:2px solid #ffd24a;outline-offset:2px}
.menu button.gr-sanctum-btn{padding:13px 18px !important}
@media (orientation:landscape) and (max-height:520px){.menu button.gr-sanctum-btn{padding:9px 12px !important;font-size:13px !important}}

/* pause: two columns so Settings + Return to Sanctum Mesa fit above the controls card */
#pause .menu { display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr)); }
#pause .menu #btnResume, #pause .menu #btnPauseMesa { grid-column: span 2; }

/* online 1v1 + Brawl Cup (2026-10-20) */
.new-tag { margin-left: auto; padding: 3px 9px; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: 2px; border-radius: 999px; background: linear-gradient(90deg, #ffe37a, #ffb02e); color: #241400; }
.duel-card { display: flex; gap: 16px; align-items: center; padding: 12px 22px 12px 12px; border-radius: 16px; background: linear-gradient(165deg, rgba(40,24,78,.95), rgba(12,7,30,.95)); border: 2px solid #4a3a80; min-width: 420px; }
.duel-card img { width: 84px; height: 84px; object-fit: contain; }
.duel-card b { display: block; font-size: 22px; font-weight: 900; font-style: italic; color: #fff; }
.duel-card small { display: block; font-size: 13px; color: #b9a9e6; margin-top: 2px; }
.duel-card #dlRating { color: #ffd23f; font-weight: 800; }
.dl-status { min-height: 1.4em; font-weight: 700; color: #e6dcff; }
.dl-status.err { color: #ff8a9a; }
.dl-code { display: flex; gap: 8px; }
.dl-code input { font: inherit; font-size: 22px; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; width: 200px; text-align: center; background: #160d2c; border: 2px solid #ffd23f; color: #fff; padding: 8px 12px; border-radius: 10px; }
.dl-code button { font: inherit; font-weight: 800; cursor: pointer; border: 2px solid #ffd23f; background: #2a1650; color: #fff; padding: 8px 16px; border-radius: 10px; }
.menu button:disabled { opacity: .45; cursor: default; }
#netHud { position: absolute; right: 18px; bottom: 12px; z-index: 30; display: flex; gap: 10px; align-items: center; pointer-events: none; font-weight: 800; font-size: 13px; }
#netHud[hidden] { display: none; }
#netPing { padding: 3px 9px; border-radius: 999px; background: rgba(8,3,20,.7); color: #b9a9e6; }
#netPing.good { color: #7dffb0; } #netPing.ok { color: #ffd23f; } #netPing.bad { color: #ff7a8a; }
#netWait { padding: 6px 14px; border-radius: 10px; background: rgba(8,3,20,.85); color: #ffd23f; border: 1px solid rgba(255,210,63,.5); }
#netWait[hidden] { display: none; }
html.touchctl #netHud { bottom: auto; top: 150px; right: 18px; }
.res-note { margin: 0 0 6px; min-height: 1.3em; font-weight: 800; font-size: 17px; color: #ffd23f; text-shadow: 0 2px 0 rgba(8,3,20,.9); text-align: center; }
.rb-row.c { grid-template-columns: 52px 160px 36px 1fr 90px 100px; }
.dl-code[hidden] { display: none; }

/* Brawl Cup board: runs the server replayed and confirmed (2026-10-21) */
.rb-row .sc .chk { color: #5fe08a; font-style: normal; font-size: 0.8em; margin-left: 4px; }
.kit.dom { color: #7fd6ff; }

/* ---- Tournament bracket (2026-10-21) ---- */
.tb-bracket { display: flex; gap: 18px; align-items: stretch; justify-content: center; margin: 12px 0 4px; max-width: 100%; overflow-x: auto; padding: 4px 2px; }
.tb-col { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.tb-ms { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.tb-col h4 { margin: 0 0 2px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #b9a8e8; text-align: center; }
.tb-m { background: rgba(22, 13, 44, 0.86); border: 2px solid #3b2a6a; border-radius: 10px; padding: 3px; display: flex; flex-direction: column; gap: 2px; }
.tb-m.live, .tb-m.next { border-color: #ffd23f; box-shadow: 0 0 14px rgba(255, 210, 63, 0.35); }
.tb-p { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 7px; color: #e6dcff; font-size: 14px; min-height: 30px; }
.tb-p img { width: 26px; height: 26px; object-fit: contain; image-rendering: auto; flex: none; }
.tb-p img[src=""] { visibility: hidden; }
.tb-p span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-p b { color: #fff; font-weight: 900; }
.tb-p small { color: #ffd23f; font-size: 11px; margin-left: 4px; }
.tb-p.me { background: rgba(255, 210, 63, 0.14); color: #fff; }
.tb-p.win span { color: #ffd23f; font-weight: 800; }
.tb-p.lose { opacity: 0.45; }
.tb-p.empty { color: #6f5fa0; font-style: italic; }
.tb-lobby { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 8px; }
.tb-lobby .tb-p { background: rgba(22, 13, 44, 0.86); border: 2px solid #3b2a6a; }
.tb-join { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.tb-join[hidden] { display: none; }
.tb-join input { font: inherit; font-size: 22px; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; width: 200px; text-align: center; background: #160d2c; border: 2px solid #ffd23f; color: #fff; padding: 8px 12px; border-radius: 10px; }
.tb-join button { font: inherit; font-weight: 800; cursor: pointer; border: 2px solid #ffd23f; background: #2a1650; color: #fff; padding: 8px 16px; border-radius: 10px; }
#tbMsg b.code { letter-spacing: 3px; font-size: 1.15em; }
#tbMenu button:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 760px) { .tb-col { min-width: 150px; } .tb-p { font-size: 12px; } .tb-lobby { grid-template-columns: 1fr; } }

/* paid royales */
.pd-list{display:flex;flex-direction:column;gap:12px;width:min(760px,94vw);max-height:56vh;overflow:auto;margin:6px auto 4px;padding:2px}
.pd-ev{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(18,8,39,.78);border:2px solid rgba(255,210,63,.35);text-align:left}
.pd-ev.live{border-color:#5dff9a;box-shadow:0 0 18px rgba(93,255,154,.25)}.pd-ev.done{opacity:.85;border-color:rgba(255,255,255,.18)}
.pd-ev h3{margin:0;font-size:17px;color:#fff}.pd-ev .pd-meta{font-size:13px;color:#e6dcff;line-height:1.45}.pd-ev .pd-meta b{color:#ffd23f}
.pd-ev .pd-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;padding:2px 8px;border-radius:999px;margin-right:6px;background:#ffd23f;color:#120827}
.pd-ev .pd-tag.live{background:#5dff9a}.pd-ev .pd-tag.void{background:#ff6b81}.pd-ev .pd-tag.done{background:#c58bff}
.pd-ev .pd-acts{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:150px}
.pd-ev .pd-acts button{font:inherit;font-weight:800;font-size:14px;padding:8px 12px;border-radius:9px;border:2px solid #ffd23f;background:#ffd23f;color:#120827;cursor:pointer}
.pd-ev .pd-acts button.ghost{background:transparent;color:#ffd23f}.pd-ev .pd-acts button:disabled{opacity:.5;cursor:default}
.pd-ev .pd-pod{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:#fff}.pd-ev .pd-pod span{background:rgba(255,255,255,.08);border-radius:8px;padding:3px 8px}
.pd-note{min-height:1.4em;color:#ffd23f}
@media (max-width:620px){.pd-ev{grid-template-columns:1fr}.pd-ev .pd-acts{min-width:0}}

/* onboarding (2026-10-26): title "what's on" strip, results next step, inline sign-in buttons */
.title-events { position: absolute; top: 44px; right: 34px; width: 370px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.title-events[hidden] { display: none; }
.title-events h4 { margin: 0 0 2px; font-size: 12px; font-weight: 900; letter-spacing: 3px; color: #7fe3ff; text-transform: uppercase; text-align: right; text-shadow: 0 1px 3px #000; }
.te-card { font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 9px 14px 10px; border-radius: 12px;
  border: 2px solid #3b2a66; border-left-width: 6px; background: rgba(14, 8, 32, .86); color: #e6dcff; transition: .08s; box-shadow: 0 4px 0 rgba(10,4,24,.6); }
.te-card:hover, .te-card:focus-visible { border-color: #ffd23f; background: rgba(42, 22, 80, .94); transform: translateX(-4px); outline: none; }
.te-card em { font-style: normal; font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; color: #7fe3ff; }
.te-card b { font-size: 19px; font-weight: 900; font-style: italic; color: #fff; line-height: 1.15; }
.te-card small { font-size: 14px; color: #b9a9e6; }
.te-card.paid { border-color: #b8860b; border-left-color: #ffd23f; background: linear-gradient(180deg, rgba(74,50,8,.92), rgba(36,22,4,.92)); }
.te-card.paid em { color: #ffd23f; } .te-card.paid small { color: #ffe08a; }
.te-card.paid.live em::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 8px #ff4d6d; margin-right: 6px; vertical-align: 1px; }
.te-card.daily { border-left-color: #7fe3ff; }
.te-card.goal { border-left-color: #5dff9a; } .te-card.goal em { color: #5dff9a; }
#results .res-note { max-width: 900px; }
.in-signin { font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; margin-left: 8px; padding: 4px 12px; border-radius: 8px; border: 2px solid #36c7ff; color: #fff; background: linear-gradient(#123a5c, #0c2340); vertical-align: 1px; }
.in-signin:hover { border-color: #7fe3ff; }

/* ---- Squad Battle 5v5 (2026-10-26) ---- */
.sq-slots { display: grid; grid-template-columns: repeat(5, minmax(120px, 170px)); gap: 10px; justify-content: center; margin: 14px 0 6px; }
.sq-slot { position: relative; background: rgba(22, 13, 44, 0.88); border: 2px solid #3b2a6a; border-radius: 12px; padding: 8px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #e6dcff; min-height: 150px; }
.sq-slot img { width: 72px; height: 72px; object-fit: contain; }
.sq-slot b { font-size: 14px; text-align: center; line-height: 1.15; }
.sq-slot small { font-size: 11px; color: #b9a8e8; }
.sq-slot.empty { justify-content: center; cursor: pointer; border-style: dashed; }
.sq-slot.empty b { font-size: 34px; color: #6f5fa0; }
.sq-p { font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; border: 1px solid #ffd23f; background: #2a1650; color: #ffd23f; padding: 3px 10px; border-radius: 999px; margin-top: 4px; }
.sq-x { position: absolute; top: 4px; right: 6px; font: inherit; font-size: 12px; cursor: pointer; border: 0; background: none; color: #8f80c0; }
.sq-x:hover { color: #ff6b81; }
#sqMenu.wrap { flex-wrap: wrap; justify-content: center; max-width: 900px; }
#sqMenu button:disabled { opacity: 0.5; cursor: default; }
#sqStatus.err { color: #ff8fa0; }
.se-teams { display: flex; gap: 18px; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.se-team { background: rgba(22, 13, 44, 0.88); border: 2px solid var(--tc); border-radius: 12px; padding: 8px 10px; min-width: 330px; }
.se-team.win { box-shadow: 0 0 22px color-mix(in srgb, var(--tc) 45%, transparent); }
.se-team h4 { margin: 2px 0 6px; color: var(--tc); letter-spacing: 1px; font-size: 14px; }
.se-f { display: grid; grid-template-columns: 34px 1fr 48px 56px; align-items: center; gap: 8px; padding: 3px 0; color: #e6dcff; font-size: 14px; }
.se-f img { width: 34px; height: 34px; object-fit: contain; }
.se-f span small { display: block; font-size: 11px; color: #9c8dcf; }
.se-f span em { font-style: normal; font-size: 10px; font-weight: 900; color: #120827; background: #ffd23f; border-radius: 4px; padding: 1px 4px; margin-left: 4px; }
.se-f b { text-align: right; font-weight: 800; }
.se-f.out { opacity: 0.5; }
@media (max-width: 760px) { .sq-slots { grid-template-columns: repeat(3, minmax(100px, 1fr)); } .se-team { min-width: 0; width: 100%; } }
#squadEnd { background: radial-gradient(ellipse at center, rgba(8, 4, 20, 0.55), rgba(8, 4, 20, 0.85)); }

/* Oct 27 2026: Brawler / Auto-Brawler menus, the Ranked Ladder, the Captain's Quarters' tables */
.menu.big .more-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0 2px; }
.menu.big .more-row .more-lbl { font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #7fe3ff; margin-right: 4px; }
.menu.big .more-row button { flex: 1 1 auto; min-height: 0; padding: 6px 10px; gap: 6px; border-radius: 10px; justify-content: center; }
.menu.big .more-row button b { font-size: 13px; font-style: normal; white-space: nowrap; }
.menu.big .more-row button.sel, .menu.big .more-row button:hover { transform: translateY(-2px); }
.stk18 { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 6px; background: #3a1420; border: 1px solid #d6aa56; color: #ffd890; font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.lv-you { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0 0 6px; }
.lv-you .lv-stat { padding: 6px 12px; border-radius: 10px; background: rgba(18,8,39,.78); border: 2px solid rgba(127,227,255,.35); text-align: center; min-width: 96px; }
.lv-you .lv-stat b { display: block; font-size: 20px; font-weight: 900; font-style: italic; color: #fff; }
.lv-you .lv-stat small { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #7fe3ff; }
.lv-you .lv-stat.sh { border-color: rgba(255,210,63,.5); } .lv-you .lv-stat.sh small { color: #ffd23f; }
.lv-rules { font-size: 13px; max-width: 900px; }
#ladderView .rb-table { max-height: 40vh; }
.rb-row.l { grid-template-columns: 52px 160px 36px 1fr 80px 80px 90px; }
.rb-row .dim { color: #8f80b8; font-size: 12px; }
.sk-wrap { display: flex; gap: 14px; align-items: flex-start; justify-content: center; width: min(1100px, 96%); }
.sk-me { flex: none; width: 250px; padding: 10px 12px; border-radius: 12px; background: rgba(18,8,39,.85); border: 2px solid rgba(255,210,63,.45); text-align: left; font-size: 13px; color: #e6dcff; }
.sk-me h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: 2px; color: #ffd23f; text-transform: uppercase; }
.sk-me .sk-mons { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; } .sk-me .sk-mons img { width: 44px; height: 44px; border-radius: 8px; background: #1b0f38; object-fit: contain; }
.sk-me .sk-st { display: block; margin-top: 6px; font-weight: 800; color: #fff; }
.sk-seats { flex: 1; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.sk-seats.two { grid-template-columns: repeat(2, minmax(0, 220px)) !important; justify-content: center; }
.sk-seats .roy-card.paid { border-color: #5dff9a; } .sk-seats .roy-card .pd { color: #5dff9a; font-weight: 900; }
.sk-facts { font-size: 13px; max-width: 980px; } .sk-facts b { color: #ffd23f; }
.sk-fine { font-size: 11px; color: #8f80b8; max-width: 980px; word-break: break-all; }
#skMenu button:disabled { opacity: .45; cursor: default; }
#skMenu button[hidden] { display: none; }
.cq-tbl h3 .pd-tag { vertical-align: 2px; }
.cq-tbl .cq-mode { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #7fe3ff; font-weight: 900; }