/* Game Hub screens (v0.7, anime-sport look): hub, game page, ranking, profile, settings, search, VS, pause, end, tab bar. */

/* ---------- screen frame ---------- */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; padding: calc(var(--safeT) + 12px) 20px calc(var(--safeB) + 24px); }
.screen.show { display: flex; }
.screen.center { justify-content: center; }
.screen.top { justify-content: flex-start; }
.screen.solid { background: var(--ink); }
.screen.dark { color: #fff; background: var(--ink); }
.screen.light { background-color: var(--paper); background-image: radial-gradient(rgba(13,16,32,.07) 1.4px, transparent 1.7px); background-size: 12px 12px; color: var(--ink); }
.screen.tabs { padding-bottom: calc(var(--tabH) + var(--safeB) + 14px); }
.stack { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; position: relative; }
.sub { margin: 0; color: rgba(255,255,255,.78); font-size: 14px; text-wrap: balance; }
.light .sub { color: var(--mute); }
h1, h2 { margin: 0; font: 400 28px/1.05 var(--disp); text-transform: uppercase; text-wrap: balance; transform: var(--sk); }
.pagetitle { position: relative; font-size: 28px; color: var(--ink); text-align: left; }
.pagetitle::after { content: ''; display: block; height: 5px; width: 64px; background: var(--hot); margin-top: 6px; border-radius: 2px; }
.pagehead { width: 100%; max-width: 430px; display: flex; align-items: center; gap: 12px; padding: 4px 0 0; }
.pagehead .spacer { flex: 1; }
.rays { position: absolute; left: 50%; top: 50%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; z-index: -1; pointer-events: none; will-change: transform; animation: spin 120s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.screen { isolation: isolate; }

/* ---------- tab bar ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; background: var(--ink); border-top: 3px solid var(--volt); padding: 8px 6px calc(var(--safeB) + 6px); height: calc(var(--tabH) + var(--safeB)); }
.tabbar .tab { flex: 1; max-width: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: rgba(255,255,255,.78); font: 900 9.5px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.tabbar .tab i { width: 52px; height: 32px; display: grid; place-items: center; border-radius: 11px; border: 2.5px solid transparent; transform: var(--sk); transition: background .15s; }
.tabbar .tab svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: skewX(8deg); }
.tabbar .tab.on { color: var(--volt); }
.tabbar .tab.on i { background: var(--volt); border-color: #fff; }
.tabbar .tab.on svg { stroke: var(--ink); }
.tabbar .tab span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- hub (home) ---------- */
#hub { overflow-y: auto; overflow-x: hidden; touch-action: pan-y; padding: 0 0 calc(var(--tabH) + var(--safeB) + 14px); background: var(--paper); align-items: stretch; justify-content: flex-start;
  background-image: radial-gradient(rgba(13,16,32,.07) 1.4px, transparent 1.7px); background-size: 12px 12px; -webkit-overflow-scrolling: touch; }
.hero { position: relative; flex: none; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); padding-top: var(--safeT); overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 8deg at 88% 30%, rgba(255,255,255,.055) 0 5deg, transparent 5deg 13deg); pointer-events: none; }
.hero::after { content: ''; position: absolute; right: -18px; top: 0; bottom: 0; width: 52px; background: var(--tc, var(--cobalt)); opacity: .9; transform: skewX(-8deg); pointer-events: none; }
.hero-in { position: relative; z-index: 1; width: var(--w); margin: 0 auto; padding: 12px 16px 24px; color: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo chip" "num side"; gap: 10px 14px; align-items: center; }
.logo { grid-area: logo; height: 66px; margin: -12px 0 -12px -5px; line-height: 0; align-self: center; justify-self: start; }
.logo img { height: 100%; width: auto; display: block; }
.mechip { grid-area: chip; justify-self: end; max-width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--navy); border: 2px solid rgba(255,255,255,.22); border-radius: 999px; padding: 3px 12px 3px 3px; color: #fff; }
.mechip .avatar { width: 30px; height: 30px; font-size: 14px; flex: none; }
.mechip b { font: 800 12px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovbox { grid-area: num; display: flex; flex-direction: column; gap: 7px; }
.ovtag span { display: inline-block; transform: var(--sk); background: var(--volt); color: var(--ink); font: 900 9.5px/1 var(--ui); letter-spacing: .14em; padding: 4px 8px; border-radius: 4px; text-transform: uppercase; white-space: nowrap; }
.ovnum { transform: var(--sk); transform-origin: left center; font: 400 46px/1 var(--disp); color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--hot); }
.ovside { grid-area: side; display: flex; flex-direction: column; align-items: stretch; gap: 9px; min-width: 0; padding-right: 26px; }
.tierstamp { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--tc); border: 2.5px solid #fff; border-radius: 8px; padding: 4px 10px 4px 7px; color: var(--tt); max-width: 100%; transform: var(--sk); }
.tierstamp svg { width: 15px; height: 15px; flex: none; fill: var(--tt); stroke: var(--tt); stroke-width: 1.6; stroke-linejoin: round; }
.tierstamp span { font: 400 12px/1.05 var(--disp); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-width: 0; }
.ovrow b { font: 400 14px/1 var(--disp); color: var(--volt); white-space: nowrap; text-transform: uppercase; flex: none; }
.ovnext { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
.ovnext span { font: 800 10px/1.1 var(--ui); letter-spacing: .06em; color: rgba(255,255,255,.88); text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovnext b { font: 400 12px/1 var(--disp); color: var(--volt); white-space: nowrap; text-transform: uppercase; }
.picklabel { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 430px; margin: 0 auto; padding: 10px 16px 0; }
.picklabel h2 { font-size: 16px; text-align: left; color: var(--ink); }
.picklabel h2::after { content: ''; display: block; height: 4px; width: 40px; background: var(--hot); margin-top: 4px; border-radius: 2px; }
.cards { width: 100%; max-width: 430px; margin: 0 auto; padding: 14px 16px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.gamecard { position: relative; display: block; width: 100%; aspect-ratio: 1 / .94; border: 3px solid var(--ink); border-radius: 20px; background: var(--g); box-shadow: 0 5px 0 var(--ink); overflow: hidden; text-align: left; transition: transform .08s, box-shadow .08s; color: #fff; }
.gamecard:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.gamecard .cardart, .gamecard canvas.cardart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; object-fit: cover; object-position: 72% 50%; }
.gc-mark { position: absolute; left: 7px; top: 7px; font: 400 26px/1 var(--disp); color: var(--ink); opacity: .2; writing-mode: vertical-rl; letter-spacing: .04em; pointer-events: none; }
.gc-play { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--volt); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); display: grid; place-items: center; }
.gc-play svg { width: 13px; height: 13px; margin-left: 2px; fill: var(--ink); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.gc-bot { position: absolute; left: 8px; right: 8px; bottom: 9px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.gc-title { display: block; max-width: 100%; transform: var(--sk); transform-origin: left bottom; background: var(--ink); color: #fff; font: 400 15px/1.08 var(--disp); padding: 7px 12px 7px 10px; border-radius: 6px; border-left: 5px solid var(--volt); text-transform: uppercase; text-wrap: balance; box-shadow: 3px 3px 0 rgba(13,16,32,.35); }
.gc-row { display: flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; }
.gc-rating { display: flex; align-items: baseline; transform: var(--sk); background: #fff; border: 2.5px solid var(--ink); border-radius: 6px; padding: 3px 9px; }
.gc-rating small, .gc-hid { display: none; }
.gc-rating i { font: 400 15px/1 var(--disp); font-style: normal; color: var(--ink); }
.gc-tier { font-size: 10px; padding: 5px 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: 2px 2px 0 rgba(13,16,32,.35); }
.gamecard.soon { aspect-ratio: 1 / .94; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: transparent; border: 3px dashed rgba(13,16,32,.35); box-shadow: none; color: var(--mute); text-align: center; padding: 10px; }
.gamecard.soon .plus { width: 34px; height: 34px; border-radius: 50%; border: 3px dashed rgba(13,16,32,.35); display: grid; place-items: center; font: 800 20px/1 var(--ui); }
.gamecard.soon i { font-style: normal; font-weight: 700; font-size: 13px; line-height: 1.25; }
@media (max-height: 700px) { .cards { gap: 14px 12px; } }

/* ---------- game page: the live demo plays behind a slanted ink sheet ---------- */
#menu { justify-content: flex-end; padding: 0; background: none; overflow: hidden; }
#menu.bm { background: none; }
.sheet { position: relative; width: 100%; flex: none; background: var(--ink); color: #fff; clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%); padding: 44px 20px calc(var(--safeB) + 20px); }
.sheet::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(circle at center, var(--cobalt) 1.8px, transparent 2.4px); background-size: 8px 8px; -webkit-mask-image: linear-gradient(to top, #000, transparent 55%); mask-image: linear-gradient(to top, #000, transparent 55%); }
.sheetin { position: relative; max-width: 390px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.sheettop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 44px; }
#tTitle { font: 400 38px/1.05 var(--disp); color: #fff; text-shadow: 4px 4px 0 var(--gs); text-align: left; white-space: nowrap; flex: 1; min-width: 0; overflow: hidden; padding: 0 6px 4px 0; }
.sheet .jp.gtag { background: var(--g); color: var(--gt); position: absolute; right: 0; top: -30px; }
.ratingrow { display: flex; align-items: center; gap: 10px; }
.ratingrow .ratingpill b { font-size: 19px; }
#btnFind { margin-top: 2px; }
#btnFind .ic { width: 28px; height: 28px; }
#btnFind .t { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 24px; line-height: 1.1; max-width: 100%; min-width: 0; }
#btnFind .ic { flex: none; }
.sheet .seg { margin-top: 4px; }
.sheet .duo { margin-top: 2px; }

/* ---------- ranking ---------- */
#board { padding: 0; align-items: stretch; justify-content: flex-start; }
#board .boardhead, #daily .boardhead, #admin .boardhead, #friends .boardhead { display: flex; align-items: center; gap: 14px; padding: calc(var(--safeT) + 14px) 16px 0; max-width: 430px; width: 100%; margin: 0 auto; }
#board .boardhead .iconbtn, #daily .boardhead .iconbtn, #admin .boardhead .iconbtn, #friends .boardhead .iconbtn { position: static; }
#board .boardhead h2, #daily .boardhead h2, #admin .boardhead h2, #friends .boardhead h2 { flex: 1; text-align: left; font-size: 28px; }
#board .boardhead h2::after, #daily .boardhead h2::after, #admin .boardhead h2::after, #friends .boardhead h2::after { content: ''; display: block; height: 5px; width: 64px; background: var(--hot); margin-top: 6px; border-radius: 2px; }
.boardseg { margin: 14px auto 12px; padding: 0 16px; max-width: 430px; width: 100%; overflow-x: auto; touch-action: pan-x; scrollbar-width: none; flex: none; gap: 7px; }
.boardseg::-webkit-scrollbar { display: none; }
.boardseg button { flex: 1 0 auto; min-height: 40px; padding: 0 13px; white-space: nowrap; background: #fff; color: var(--ink); border: 3px solid var(--ink); font-size: 12px; letter-spacing: .06em; }
.boardseg button.on { background: var(--gs); color: var(--gt); box-shadow: 3px 4px 0 var(--ink); }
.boardlist { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.boardlist .rowsin { max-width: 430px; margin: 0 auto; padding: 16px 16px 6px; }
.podium { position: relative; background: var(--gs); display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding: 24px 16px 0; min-height: 250px; overflow: hidden; }
.podium::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 70%, rgba(255,255,255,.14) 0 4deg, transparent 4deg 11deg); }
.podium::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: radial-gradient(circle at center, #fff 1.6px, transparent 2.2px); background-size: 9px 9px; -webkit-mask-image: linear-gradient(to top, #000, transparent 65%); mask-image: linear-gradient(to top, #000, transparent 65%); }
.podium .lrow { position: relative; z-index: 1; height: auto; display: flex; flex-direction: column; align-items: center; width: 104px; max-width: 30%; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; text-align: center; gap: 0; }
.podium .lrow.r1 { order: 2; } .podium .lrow.r2 { order: 1; } .podium .lrow.r3 { order: 3; }
.podium .av { width: 62px; height: 62px; border-radius: 50%; border: 4px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); display: grid; place-items: center; font: 400 28px/1 var(--disp); color: #fff; margin-bottom: -2px; z-index: 2; }
.podium .r1 .av { width: 74px; height: 74px; font-size: 34px; }
.podium .rkb { position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; font: 400 12px/1 var(--disp); color: var(--ink); z-index: 3; right: 4px; top: 36px; }
.podium .r1 .rkb { right: -2px; top: 46px; background: var(--volt); } .podium .r2 .rkb { background: var(--mist); } .podium .r3 .rkb { background: #E8A36B; }
.podium .crown { position: absolute; top: -34px; left: 50%; margin-left: -16px; width: 32px; height: 32px; fill: none; stroke: var(--volt); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: none; }
.podium .r1 .crown { display: block; }
.podium .blk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; background: var(--ink); border: 3px solid #fff; border-bottom: 0; border-radius: 10px 10px 0 0; padding: 6px 4px; }
.podium .r1 .blk { height: 116px; } .podium .r2 .blk { height: 98px; } .podium .r3 .blk { height: 84px; }
.podium .nm { font: 800 13px/1.1 var(--ui); color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .wl { font: 700 10.5px/1 var(--ui); color: rgba(255,255,255,.6); }
.podium .rt { font: 400 19px/1 var(--disp); font-style: normal; color: var(--mist); }
.podium .r1 .rt { color: var(--volt); } .podium .r3 .rt { color: #E8A36B; }
.podium .lrow.me { background: none; } .podium .lrow.me .blk { box-shadow: 0 0 0 3px var(--volt); } .podium .lrow .you { background: var(--volt); color: var(--ink); }
.lrow { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px 0 8px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); margin-bottom: 12px; text-align: left; }
.lrow .rk { transform: var(--sk); width: 32px; height: 32px; border: 3px solid var(--ink); border-radius: 7px; background: #fff; display: grid; place-items: center; font: 400 15px/1 var(--disp); flex: none; }
.lrow .av { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; font: 400 15px/1 var(--disp); color: #fff; flex: none; }
.lrow .nm { flex: 1; min-width: 0; font: 800 16px/1.1 var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .wl { font: 700 13px/1 var(--ui); color: var(--mute); flex: none; }
.lrow .rt { font: 400 20px/1 var(--disp); font-style: normal; min-width: 58px; text-align: right; flex: none; }
.lrow.me { background: var(--volt); }
.lrow.mine { max-width: 398px; width: calc(100% - 32px); margin: 8px auto 4px; flex: none; }
.lrow .you { font: 900 10px/1 var(--ui); letter-spacing: .1em; background: var(--ink); color: #fff; border-radius: 4px; padding: 4px 6px; margin-left: 6px; vertical-align: 2px; transform: var(--sk); display: inline-block; }
.empty { text-align: center; color: var(--mute); padding: 40px 16px; font-weight: 700; text-wrap: balance; }

/* ---------- profile ---------- */
#profile { padding: 0 0 calc(var(--tabH) + var(--safeB) + 14px); align-items: stretch; justify-content: flex-start; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.phead { position: relative; flex: none; background: var(--ink); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); padding: calc(var(--safeT) + 18px) 20px 40px; overflow: hidden; }
.phead::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 28% 42%, rgba(255,255,255,.07) 0 4deg, transparent 4deg 11deg); }
.phead::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; opacity: .8; background-image: radial-gradient(circle at center, var(--cobalt) 2px, transparent 2.6px); background-size: 8px 8px; -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.pwho { position: relative; z-index: 1; max-width: 400px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.pwho .avatar { width: 88px; height: 88px; font-size: 40px; border: 5px solid var(--volt); box-shadow: 4px 5px 0 var(--hot); }
.pwho .pinfo { min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pwho h2 { font-size: 26px; text-align: left; color: #fff; text-shadow: 3px 3px 0 var(--hot); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwho .jp { background: var(--volt); color: var(--ink); }
.pstats { position: relative; z-index: 1; max-width: 400px; margin: 22px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pstat { transform: var(--sk); background: var(--navy); border: 3px solid rgba(255,255,255,.35); border-radius: 12px; padding: 9px 6px 10px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.pstat b { font: 400 24px/1 var(--disp); color: var(--volt); }
.pstat small { font: 800 9.5px/1.1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.plist { width: 100%; max-width: 430px; margin: 0 auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 16px; }
.pcard { position: relative; display: flex; align-items: stretch; background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); overflow: hidden; }
.pcard .pc-l { flex: none; width: 96px; background: var(--g); color: var(--gt); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-right: 3px solid var(--ink); position: relative; overflow: hidden; }
.pcard .pc-l b { font: 400 11px/1.1 var(--disp); text-align: center; text-transform: uppercase; transform: var(--sk); max-width: 100%; overflow-wrap: anywhere; }
.pcard .pc-l em { font: 400 14px/1 var(--disp); font-style: normal; opacity: .55; white-space: nowrap; letter-spacing: -.02em; }
.pcard .pc-r { flex: 1; min-width: 0; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.pc-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.pc-rating { font: 400 26px/1 var(--disp); color: var(--ink); }
.pc-rank { font: 400 11px/1 var(--disp); background: var(--ink); color: var(--volt); padding: 5px 8px; border-radius: 5px; transform: var(--sk); }
.pc-wl { display: flex; height: 12px; border: 2.5px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--mist); transform: var(--sk); }
.pc-wl i { display: block; height: 100%; } .pc-wl .w { background: var(--green); } .pc-wl .d { background: var(--volt); } .pc-wl .l { background: var(--hot); }
.pc-meta { display: flex; justify-content: space-between; gap: 6px; font: 800 11px/1.1 var(--ui); letter-spacing: .06em; color: var(--mute); text-transform: uppercase; }
.pcard.dim { opacity: .6; }

/* ---------- profile: tabs, statistics, badges, history ---------- */
.ptabs { width: calc(100% - 32px); max-width: 398px; margin: 8px auto 2px; flex: none; }
.ptabs button, .hfilters button { padding: 0 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppane { width: 100%; max-width: 430px; margin: 0 auto; display: flex; flex-direction: column; flex: none; }
.ptiles, .psplit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 16px 4px; }
.ptile { background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); padding: 12px 4px 10px; text-align: center; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ptile b { font: 400 21px/1 var(--disp); color: var(--ink); white-space: nowrap; }
.ptile.tm b { font-size: 18px; } .ptile.txt b { font-size: 14px; line-height: 1.15; padding-top: 3px; }
.ptile small { font: 800 9.5px/1.15 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.psplit { padding-top: 6px; }
.psp { background: var(--ink); border: 3px solid var(--ink); border-radius: 14px; padding: 10px 4px 9px; text-align: center; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.psp b { font: 400 19px/1 var(--disp); color: var(--volt); } .psp.friendly b { color: var(--ice); } .psp.cpu b { color: #fff; }
.psp small { font: 800 9.5px/1.1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.psp i { font: 800 11px/1 var(--ui); font-style: normal; color: rgba(255,255,255,.55); }
.pc-sub { font: 700 11px/1.25 var(--ui); color: var(--mute); }
.bgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 16px 16px; }
.bcard { position: relative; display: flex; gap: 8px; align-items: center; padding: 10px 8px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); min-width: 0; }
.bcard.lock { background: #EEF0F6; border-color: rgba(13,16,32,.4); box-shadow: 0 3px 0 rgba(13,16,32,.25); }
.medal { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; background: var(--mt, var(--mist)); box-shadow: 2px 3px 0 var(--ink); }
.medal svg { width: 25px; height: 25px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.t1 { --mt: #F2A65A; } .t2 { --mt: #D5DCEA; } .t3 { --mt: var(--volt); }
.bcard.lock .medal { background: #D9DDE8; box-shadow: none; border-color: rgba(13,16,32,.35); } .bcard.lock .medal svg { opacity: .3; }
.binfo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.binfo b { font: 900 12.5px/1.12 var(--ui); overflow-wrap: break-word; }
@media (max-width: 380px) { .bgrid { gap: 10px; padding-left: 12px; padding-right: 12px; } .bcard { gap: 7px; padding: 10px 7px; } .bcard .medal { width: 38px; height: 38px; } .bcard .medal svg { width: 22px; height: 22px; } .binfo b { font-size: 12px; } }
.bcard.lock .binfo b { color: var(--mute); }
.binfo small { font: 600 10.5px/1.2 var(--ui); color: var(--mute); }
.bbar { height: 7px; border-radius: 4px; background: var(--mist); border: 1.5px solid rgba(13,16,32,.55); overflow: hidden; } .bbar i { display: block; height: 100%; background: var(--cobalt); }
.bcard.got .bbar i { background: var(--green); }
.binfo em { font: 800 10px/1 var(--ui); font-style: normal; color: var(--mute); letter-spacing: .04em; } .bcard.got em { color: var(--greenD); font-size: 12px; }
.bnew { position: absolute; top: -9px; right: 6px; font: 900 9px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; background: var(--hot); color: #fff; border: 2px solid var(--ink); border-radius: 4px; padding: 3px 5px; transform: var(--sk); }
.hfilters { width: calc(100% - 32px); max-width: 398px; margin: 10px auto 12px; flex: none; }
.hfilters button { font-size: 11px; letter-spacing: .02em; }
.hlist { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 8px; }
.hrow { display: flex; align-items: stretch; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); overflow: hidden; min-height: 70px; }
.hres { flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-right: 3px solid var(--ink); background: var(--green); color: var(--ink); }
.hrow.l .hres { background: var(--hot); } .hrow.d .hres { background: var(--volt); }
.hres svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.hres small { font: 800 8px/1 var(--ui); letter-spacing: .01em; text-transform: uppercase; max-width: 100%; white-space: nowrap; }
.hmid { flex: 1; min-width: 0; padding: 9px 10px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.hg { font: 900 13px/1.1 var(--ui); text-transform: uppercase; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hk { flex: none; font: 900 8.5px/1 var(--ui); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 3px 5px; border-radius: 4px; background: var(--mist); color: var(--ink); transform: var(--sk); }
.hk.ranked { background: var(--volt); } .hk.friendly { background: var(--ice); }
.h2 { font: 800 13px/1.1 var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h3 { font: 700 11px/1 var(--ui); color: var(--mute); }
.hend { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; padding: 0 12px 0 4px; }
.hs { font: 400 20px/1 var(--disp); white-space: nowrap; }
.hd { font: 400 12px/1 var(--disp); font-style: normal; padding: 4px 6px; border-radius: 5px; transform: var(--sk); border: 2px solid var(--ink); }
.hd.up { background: var(--green); color: var(--ink); } .hd.down { background: var(--hot); color: #fff; }
.hmore { align-self: center; margin: 6px auto 14px; min-width: 200px; background: #fff; color: var(--ink); }
#pfHistEmpty { padding: 30px 16px; }
/* end screen: badges this game earned */
.endAch { background: #fff; color: var(--ink); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 5px 6px 0 var(--ink); padding: 10px 12px 12px; margin: 0 0 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.endAch small { flex: 1 0 100%; font: 900 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--hotD); }
.achchip { display: flex; align-items: center; gap: 7px; background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; padding: 4px 10px 4px 5px; max-width: 100%; }
.achchip .medal { width: 34px; height: 34px; box-shadow: none; } .achchip .medal svg { width: 20px; height: 20px; }
.achchip b { font: 900 13px/1.1 var(--ui); text-align: left; }
.endAch em { font: 900 14px/1 var(--ui); font-style: normal; }

/* ---------- settings ---------- */
#settings { padding: 0 0 calc(var(--tabH) + var(--safeB) + 14px); align-items: stretch; justify-content: flex-start; overflow-y: auto; touch-action: pan-y; }
#settings .pagehead { padding: calc(var(--safeT) + 18px) 16px 0; margin: 0 auto; }
.rows { width: 100%; max-width: 430px; margin: 0 auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 10px 16px; border-radius: 14px; background: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font: 800 15px/1.2 var(--ui); position: relative; }
.row.col { flex-direction: column; align-items: stretch; gap: 10px; }
.row input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw { width: 54px; height: 30px; border-radius: 15px; background: var(--mist); border: 3px solid var(--ink); position: relative; transition: background .2s; flex: none; }
.sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); transition: transform .2s; }
input:checked + .sw { background: var(--green); } input:checked + .sw::after { transform: translateX(24px); background: var(--volt); }
input:focus-visible + .sw { outline: 3px solid var(--volt); outline-offset: 3px; }
.light .seg button, .row .seg button { background: #fff; color: var(--ink); border: 3px solid var(--ink); min-height: 42px; font-size: 12px; letter-spacing: .06em; }
.light .seg button.on, .row .seg button.on { background: var(--volt); box-shadow: 3px 4px 0 var(--hot); }
.ver { color: var(--mute); font: 700 12px/1 var(--ui); text-align: center; margin: 8px 0 0; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- searching ---------- */
#search { overflow: hidden; background: var(--ink); }
#search .rays { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.05) 0 5deg, transparent 5deg 13deg); animation-duration: 160s; }
#search .halftone.bot { height: 260px; }
.searchtag { position: absolute; top: calc(var(--safeT) + 36px); left: 0; right: 0; display: flex; justify-content: center; z-index: 2; }
.searchtag span { transform: var(--sk); font: 400 14px/1 var(--disp); color: var(--ink); background: var(--volt); padding: 8px 16px; border-radius: 5px; border: 3px solid #fff; box-shadow: 3px 4px 0 var(--hot); text-transform: uppercase; }
.radar { position: relative; width: min(74vw, 300px); aspect-ratio: 1; align-self: center; display: grid; place-items: center; margin: 0 0 10px; flex: none; }
.radar i { position: absolute; border-radius: 50%; border: 3px solid rgba(46,208,245,.4); }
.radar i:nth-child(1) { inset: 0; } .radar i:nth-child(2) { inset: 17%; border-color: rgba(46,208,245,.55); } .radar i:nth-child(3) { inset: 34%; border-color: rgba(46,208,245,.7); animation: ring 2.2s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
.radar .beam { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(46,208,245,0) 0deg, rgba(46,208,245,0) 300deg, rgba(46,208,245,.5) 359deg, rgba(46,208,245,0) 360deg); animation: spin 3.2s linear infinite; }
.radar .beam::after { content: ''; position: absolute; left: 50%; top: 0; width: 3px; height: 50%; margin-left: -1.5px; background: var(--ice); }
.radar .blip { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--ink); animation: blip 2.4s ease-in-out infinite; }
.radar .blip:nth-of-type(1) { left: 17%; top: 13%; background: var(--ice); } .radar .blip:nth-of-type(2) { right: 8%; top: 27%; background: var(--hot); animation-delay: .6s; }
.radar .blip:nth-of-type(3) { left: 4%; top: 64%; background: var(--hot); animation-delay: 1.2s; } .radar .blip:nth-of-type(4) { right: 22%; bottom: 8%; background: var(--volt); animation-delay: 1.8s; }
@keyframes blip { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
.radar .radarav { position: relative; width: 100px; height: 100px; border-radius: 50%; background: var(--hot); border: 6px solid var(--volt); box-shadow: 0 0 0 6px rgba(255,212,0,.25); display: grid; place-items: center; font: 400 46px/1 var(--disp); color: #fff; overflow: hidden; }
.radar .radarav img { width: 100%; height: 100%; object-fit: cover; }
#tSearching.long { font-size: 27px; }
#tSearching { font-size: 36px; color: #fff; text-shadow: 4px 4px 0 var(--hot); }
.jpsub { font: 700 13px/1 var(--ui); letter-spacing: .2em; color: var(--ice); text-align: center; }
.timerbox { align-self: center; transform: var(--sk); background: var(--ink); border: 4px solid var(--volt); border-radius: 14px; padding: 8px 26px; box-shadow: 4px 5px 0 var(--hot); }
.timerbox b { display: block; font: 400 44px/1 var(--disp); color: var(--volt); font-variant-numeric: tabular-nums; }
#search .btn.ghost { align-self: center; min-width: 180px; }

/* ---------- VS card ---------- */
#vs { overflow: hidden; background: var(--cobalt); justify-content: space-between; padding: calc(var(--safeT) + 28px) 22px calc(var(--safeB) + 28px); align-items: stretch; }
#vs .vsbg { position: absolute; inset: 0; z-index: -1; background: var(--cobalt); }
#vs .vsbg::before { content: ''; position: absolute; inset: 0; background: var(--hot); clip-path: polygon(0 0, 100% 0, 100% 15%, 0 86%); }
#vs .vsbg::after { content: ''; position: absolute; inset: 0; clip-path: polygon(100% 13%, 100% 15.8%, 0 88.8%, 0 86%); background: linear-gradient(#fff, #fff); }
#vs .vsrays { position: absolute; inset: 0; z-index: -1; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.13) 0 4deg, transparent 4deg 12deg); }
#vs .vsdots { position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: radial-gradient(circle at center, var(--ink) 1.8px, transparent 2.4px); background-size: 9px 9px; -webkit-mask-image: linear-gradient(to top, #000, transparent 55%); mask-image: linear-gradient(to top, #000, transparent 55%); }
.vstop { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vstag { transform: var(--sk); font: 400 17px/1 var(--disp); color: var(--ink); background: var(--volt); padding: 9px 18px; border-radius: 5px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); text-transform: uppercase; animation: pop .5s cubic-bezier(.3,1.5,.5,1) both; }
.vsgame { font: 800 11px/1 var(--ui); letter-spacing: .2em; color: #fff; background: var(--ink); padding: 6px 12px; border-radius: 99px; text-transform: uppercase; }
.vsside { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vsside.me { align-items: flex-start; animation: slideL .5s cubic-bezier(.2,1.2,.4,1) both; }
.vsside.opp { align-items: flex-end; animation: slideR .5s .08s cubic-bezier(.2,1.2,.4,1) both; }
.vsside .avatar.big { width: 118px; height: 118px; }
.vsside.me .avatar.big { background: var(--ink); } .vsside.opp .avatar.big { background: var(--hot); box-shadow: -5px 6px 0 var(--ink); }
.vsside > b { max-width: 100%; transform: var(--sk); font: 400 30px/1 var(--disp); color: #fff; text-shadow: 3px 3px 0 var(--ink); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }
.vsside .vsmeta { display: flex; align-items: center; gap: 8px; }
.vsside.opp .vsmeta { flex-direction: row-reverse; }
.vsside i { transform: var(--sk); font: 400 20px/1 var(--disp); font-style: normal; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 6px; padding: 5px 12px; }
.vsmid { align-self: center; position: relative; width: 270px; height: 190px; display: grid; place-items: center; animation: pop .6s .2s cubic-bezier(.3,1.6,.5,1) both; }
.vsmid svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vsmid span { position: relative; font: 400 100px/1 var(--disp); color: var(--volt); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 5px 6px 0 var(--ink); transform: var(--sk); }
.vsrule { align-self: flex-start; transform: var(--sk); font: 400 17px/1 var(--disp); color: #fff; background: var(--ink); padding: 9px 16px; border-radius: 5px; border-left: 6px solid var(--volt); text-transform: uppercase; }
@media (max-height: 700px) { .vsside .avatar.big, #vs .avatar.big { width: 92px; height: 92px; font-size: 42px; } .vsmid { width: 200px; height: 140px; } .vsmid span { font-size: 72px; } .vsside > b { font-size: 24px; } }
@keyframes slideL { from { transform: translateX(-120px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideR { from { transform: translateX(120px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); } }
@keyframes drop { 0% { transform: translateY(-60px); opacity: 0; } 55% { transform: translateY(8px) rotate(-2deg); opacity: 1; } 75% { transform: translateY(-3px) rotate(1deg); } 100% { transform: none; } }

/* ---------- lobby, pause, message ---------- */
#lobby, #msg, #pause { background: var(--ink); color: #fff; overflow: hidden; }
#pause { background: rgba(13,16,32,.93); }
#lobby .rays, #msg .rays, #pause .rays { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.05) 0 5deg, transparent 5deg 13deg); animation-duration: 160s; }
#lobby h2, #msg h2, #pause h2 { color: #fff; text-shadow: 4px 4px 0 var(--hot); font-size: 30px; }
.spinner { width: 54px; height: 54px; border-radius: 50%; border: 6px solid rgba(255,255,255,.2); border-top-color: var(--volt); align-self: center; animation: spin 1s linear infinite; margin-bottom: 6px; }
.linkbox { background: var(--navy); border: 3px dashed var(--volt); border-radius: 12px; padding: 12px 14px; font: 500 13px/1.3 ui-monospace, Menlo, Consolas, monospace; color: #fff; word-break: break-all; margin-bottom: 4px; user-select: text; }

/* ---------- end of game ---------- */
#end { overflow: hidden; background: var(--volt); color: var(--ink); }
#end .rays { background: repeating-conic-gradient(from 0deg at 50% 38%, rgba(13,16,32,.1) 0 4deg, transparent 4deg 11deg); animation-duration: 90s; }
#end .halftone.bot { height: 280px; --cobalt: var(--ink); opacity: .5; }
.endjp { position: absolute; left: 6px; top: calc(var(--safeT) + 8px); font: 400 170px/.98 var(--disp); color: var(--ink); opacity: .11; writing-mode: vertical-rl; pointer-events: none; z-index: -1; }
.endTitle { font: 400 52px/1 var(--disp); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 5px 6px 0 var(--ink); transform: var(--sk); text-wrap: balance; margin-bottom: 14px; }
.endScore { align-self: center; transform: var(--sk); background: #fff; border: 4px solid var(--ink); border-radius: 14px; padding: 8px 30px; box-shadow: 5px 6px 0 var(--ink); font: 400 56px/1 var(--disp); color: var(--ink); margin: 0 0 22px; }
#end .endScore.txt, #end.win .endScore.txt, #end.lose .endScore.txt, #end.draw .endScore.txt { font: 800 15px/1.25 var(--ui); padding: 10px 18px; transform: var(--sk); text-wrap: balance; max-width: 100%; border-width: 3px; box-shadow: 4px 5px 0 var(--ink); }
.endRating { position: relative; margin: 8px 0 24px; background: var(--ink); color: #fff; border: 4px solid var(--ink); border-radius: 22px; box-shadow: 6px 7px 0 rgba(13,16,32,.35); padding: 28px 20px 18px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; }
.endRating small { position: absolute; left: 18px; top: -17px; transform: var(--sk); background: var(--hot); color: #fff; font: 400 13px/1 var(--disp); padding: 8px 14px; border-radius: 5px; border: 3px solid #fff; letter-spacing: 0; text-transform: uppercase; opacity: 1; }
.erow { display: flex; align-items: center; gap: 10px; }
.erow span { font: 400 22px/1 var(--disp); color: rgba(255,255,255,.55); }
.erow svg { width: 24px; height: 24px; stroke: var(--volt); fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.erow i { margin-left: auto; transform: var(--sk); background: var(--green); color: var(--ink); font: 400 20px/1 var(--disp); font-style: normal; padding: 7px 12px; border-radius: 6px; border: 3px solid #fff; }
.erow i.down { background: var(--hot); color: #fff; } .erow i:empty { display: none; }
.erbig { transform: var(--sk); font: 400 74px/1 var(--disp); color: var(--volt); text-shadow: 4px 5px 0 var(--hot); min-height: 74px; }
.erbig b { font: inherit; color: inherit; }
.ertier { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; }
.ertier em { font: 400 14px/1 var(--disp); font-style: normal; color: #fff; text-transform: uppercase; }
.ertier span { font: 800 11px/1.1 var(--ui); letter-spacing: .12em; color: rgba(255,255,255,.75); text-transform: uppercase; text-align: right; }
.erpts { font: 700 12px/1 var(--ui); letter-spacing: .12em; color: rgba(255,255,255,.7); text-transform: uppercase; margin-top: 4px; }
.endRating .bar { margin-top: 2px; }
.endbtns { display: flex; flex-direction: column; gap: 16px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.endbtns.ready { opacity: 1; pointer-events: auto; }
#end .btn { border-color: var(--ink); box-shadow: 5px 6px 0 var(--ink); }
#end .btn.secondary { background: #fff; color: var(--ink); }
#end.win .endTitle { animation: pop .7s cubic-bezier(.3,1.5,.5,1) both; }
#end.lose { background: var(--ink); color: #fff; } #end.lose .rays { background: repeating-conic-gradient(from 0deg at 50% 38%, rgba(255,255,255,.05) 0 4deg, transparent 4deg 11deg); }
#end.lose .endjp { color: #fff; opacity: .07; } #end.lose .endTitle { color: var(--mist); animation: drop .9s cubic-bezier(.3,1.3,.5,1) both; } #end.lose .halftone.bot { --cobalt: var(--cobalt); opacity: .9; }
#end.lose .endRating { background: var(--navy); border-color: #fff; }
#end.draw { background: var(--ice); } #end.draw .endTitle { color: #fff; animation: drop .9s cubic-bezier(.3,1.3,.5,1) both; }
#end:not(.ranked) #btnFindNew { display: none; } #end.ranked #btnRematch { display: none; }

/* ---------- toast + misc ---------- */
#toast { position: fixed; left: 50%; bottom: calc(var(--safeB) + var(--tabH) + 24px); transform: translate(-50%, 10px) var(--sk); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 10px; border: 3px solid #fff; box-shadow: 3px 4px 0 var(--hot); font: 800 14px/1.2 var(--ui); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 70; max-width: calc(100vw - 32px); text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0) var(--sk); }
@media (prefers-reduced-motion: reduce) { .rays, .radar .beam, .radar i, .radar .blip, .vstag, .vsmid, .vsside, .spinner { animation: none !important; } .radar i:first-child { opacity: .5; } }

/* ---------- splash: the Rally Impact card ---------- */
#splash { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; overflow: hidden; pointer-events: none; background: #2D5BFF; transition: opacity .35s ease; }
#splash::before { content: ''; position: absolute; inset: 0; background: conic-gradient(from 0deg at 52% calc(50% - .0945 * min(100vw, 440px)), transparent 0.00deg 2.21deg, rgba(255,255,255,.12) 2.21deg 11.54deg, transparent 11.54deg 17.03deg, rgba(255,255,255,.12) 17.03deg 26.76deg, transparent 26.76deg 36.18deg, rgba(255,255,255,.12) 36.18deg 44.63deg, transparent 44.63deg 52.65deg, rgba(255,255,255,.12) 52.65deg 62.28deg, transparent 62.28deg 72.87deg, rgba(255,255,255,.12) 72.87deg 82.63deg, transparent 82.63deg 90.56deg, rgba(255,255,255,.12) 90.56deg 99.30deg, transparent 99.30deg 109.35deg, rgba(255,255,255,.12) 109.35deg 118.99deg, transparent 118.99deg 127.10deg, rgba(255,255,255,.12) 127.10deg 136.65deg, transparent 136.65deg 141.84deg, rgba(255,255,255,.12) 141.84deg 149.34deg, transparent 149.34deg 164.03deg, rgba(255,255,255,.12) 164.03deg 172.35deg, transparent 172.35deg 181.84deg, rgba(255,255,255,.12) 181.84deg 187.75deg, transparent 187.75deg 197.86deg, rgba(255,255,255,.12) 197.86deg 204.37deg, transparent 204.37deg 216.20deg, rgba(255,255,255,.12) 216.20deg 224.18deg, transparent 224.18deg 231.77deg, rgba(255,255,255,.12) 231.77deg 238.14deg, transparent 238.14deg 250.99deg, rgba(255,255,255,.12) 250.99deg 260.51deg, transparent 260.51deg 271.22deg, rgba(255,255,255,.12) 271.22deg 277.34deg, transparent 277.34deg 289.36deg, rgba(255,255,255,.12) 289.36deg 295.39deg, transparent 295.39deg 306.54deg, rgba(255,255,255,.12) 306.54deg 312.51deg, transparent 312.51deg 321.71deg, rgba(255,255,255,.12) 321.71deg 331.04deg, transparent 331.04deg 340.67deg, rgba(255,255,255,.12) 340.67deg 347.04deg, transparent 347.04deg 360deg); } /* the card's own 20 rays, extended to the whole screen so the card blends in without a seam */
#splash img { position: relative; width: min(100vw, 440px); height: auto; display: block; }
#splash.out { opacity: 0; }
/* failsafe: if the script never starts, the splash still goes away by itself */
#splash { animation: splashOut .4s ease 8s forwards; }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }

/* ---------- daily: strip on the home screen, banner, the Daily screen, switched-off games ---------- */
.banner { width: calc(100% - 32px); max-width: 398px; margin: 12px auto 0; display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 14px; background: var(--volt); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); font: 800 13px/1.3 var(--ui); flex: none; }
.banner span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.banner button { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; display: grid; place-items: center; }
.banner svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.dstrip { flex: none; display: flex; align-items: center; gap: 10px; width: calc(100% - 32px); max-width: 398px; margin: 14px auto 0; padding: 8px 12px 8px 8px; background: var(--ink); color: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--hot); text-align: left; }
.dstrip:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--hot); }
.ds-streak { flex: none; display: flex; align-items: center; gap: 3px; background: var(--navy); border-radius: 11px; padding: 6px 10px 6px 7px; }
.ds-streak svg { width: 22px; height: 22px; fill: #6B7090; stroke: none; } .dstrip.lit .ds-streak svg { fill: var(--hot); stroke: var(--volt); stroke-width: 1.4; }
.ds-streak b { font: 400 19px/1 var(--disp); color: #fff; }
.ds-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ds-mid b { font: 800 13px/1.15 var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.2); overflow: hidden; } .ds-bar i { display: block; height: 100%; width: 0; background: var(--volt); transition: width .4s; }
.dstrip em { flex: none; font: 900 12px/1 var(--ui); font-style: normal; color: var(--volt); white-space: nowrap; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }
.dstrip.done em { color: #6BE3B0; } .dstrip.done .ds-bar i { background: var(--green); }
.ds-go { flex: none; width: 15px; height: 15px; fill: none; stroke: rgba(255,255,255,.65); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.gamecard.off { filter: grayscale(1) brightness(.72); } .gamecard.off .gc-play { display: none; }
.gamecard.off::after { content: attr(data-off); position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) var(--sk); background: var(--ink); color: #fff; font: 400 13px/1 var(--disp); text-transform: uppercase; padding: 7px 12px; border: 2px solid var(--volt); border-radius: 6px; white-space: nowrap; }
#daily { overflow-y: auto; overflow-x: hidden; touch-action: pan-y; padding-left: 0; padding-right: 0; align-items: stretch; justify-content: flex-start; }
.dbig { flex: none; width: calc(100% - 32px); max-width: 398px; margin: 16px auto 0; background: var(--ink); color: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--hot); padding: 14px 16px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 14px; align-items: center; }
.dflame { width: 58px; height: 58px; border-radius: 50%; background: var(--hot); border: 3px solid var(--volt); display: grid; place-items: center; }
.dflame svg { width: 30px; height: 30px; fill: var(--volt); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.dnum b { display: block; font: 400 44px/1 var(--disp); color: #fff; text-shadow: 3px 3px 0 var(--hot); }
.dnum small { display: block; margin-top: 5px; font: 800 10px/1.1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.dinfo { text-align: right; min-width: 0; } .dinfo span { font: 900 11px/1.2 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--volt); }
.dinfo p { margin: 6px 0 0; font: 700 12px/1.3 var(--ui); color: rgba(255,255,255,.88); text-wrap: balance; } .dinfo p.safe { color: #6BE3B0; }
.dweek { flex: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: calc(100% - 32px); max-width: 398px; margin: 16px auto 4px; }
.dw { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .dw small { font: 800 10px/1 var(--ui); color: var(--mute); text-transform: uppercase; letter-spacing: .03em; }
.dw i { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(13,16,32,.3); background: #fff; display: grid; place-items: center; }
.dw.on i { background: var(--green); border-color: var(--ink); } .dw i svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.dw.today i { border-color: var(--ink); box-shadow: 0 0 0 3px var(--volt); }
.dclist { flex: none; width: calc(100% - 32px); max-width: 398px; margin: 12px auto 0; display: flex; flex-direction: column; gap: 12px; }
.dcard { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); min-width: 0; }
.dcard.done { background: #E8F8F0; }
.dc-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: var(--volt); display: grid; place-items: center; box-shadow: 2px 3px 0 var(--ink); } .dcard.done .dc-ic { background: var(--green); }
.dc-ic svg { width: 25px; height: 25px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .dc-info b { font: 900 15px/1.15 var(--ui); overflow-wrap: anywhere; } .dc-info small { font: 600 11px/1.25 var(--ui); color: var(--mute); }
.dcard .bbar i { background: var(--cobalt); } .dcard.done .bbar i { background: var(--green); }
.dc-n { flex: none; font: 400 17px/1 var(--disp); font-style: normal; } .dcard.done .dc-n { color: var(--greenD); }
.dreset { flex: none; text-align: center; margin: 16px 16px 0; font: 800 11px/1.2 var(--ui); color: var(--mute); letter-spacing: .1em; text-transform: uppercase; }
.dcchip { background: #FFF6BF; } .dsup { background: #FFE3DA; }
.idrow { width: 100%; text-align: left; color: var(--ink); cursor: pointer; } .idrow b { font: 700 13px/1 var(--ui); color: var(--mute); letter-spacing: .04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- admin panel ---------- */
#admin { overflow-y: auto; overflow-x: hidden; touch-action: pan-y; padding-left: 0; padding-right: 0; align-items: stretch; justify-content: flex-start; }
.admtabs { width: calc(100% - 32px); max-width: 398px; margin: 12px auto 4px; flex: none; } .admtabs button { padding: 0 2px; min-width: 0; font-size: 10.5px; letter-spacing: 0; position: relative; }
.apane { width: calc(100% - 32px); max-width: 398px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 12px; flex: none; }
.anote { background: var(--ink); color: #fff; border-radius: 10px; padding: 9px 12px; font: 800 13px/1.3 var(--ui); }
.ahint { margin: 0; font: 600 12px/1.4 var(--ui); color: var(--mute); text-wrap: pretty; } .ahint.idline { cursor: pointer; text-decoration: underline dotted; overflow-wrap: anywhere; }
.asm { min-height: 44px; font-size: 14px; padding: 6px 16px; border-width: 3px; margin-bottom: 6px; } .btn.danger { color: var(--hotD); border-color: var(--hotD); }
.alist { display: flex; flex-direction: column; gap: 10px; }
.acard { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); min-width: 0; text-align: left; width: 100%; } .acard.off { opacity: .55; } .acard.link { cursor: pointer; }
.ainfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ainfo b { font: 900 14px/1.2 var(--ui); overflow-wrap: anywhere; } .ainfo small { font: 600 11px/1.3 var(--ui); color: var(--mute); overflow-wrap: anywhere; } .ainfo small.now { color: var(--greenD); font-weight: 800; }
.abtn { flex: none; border: 2.5px solid var(--ink); background: var(--volt); border-radius: 9px; padding: 7px 10px; font: 900 12px/1 var(--ui); text-transform: uppercase; } .abtn.goback { align-self: flex-start; background: #fff; }   /* not `.back`: Durak's global .back (a card back) would make it position:absolute */
.tag { display: inline-block; margin-left: 8px; font: 900 9px/1 var(--ui); letter-spacing: .1em; padding: 4px 6px; border-radius: 4px; border: 2px solid var(--ink); vertical-align: middle; } .tag.bad { background: var(--hot); color: #fff; }
.swwrap { position: relative; flex: none; width: 54px; height: 30px; display: block; } .swwrap .sw { display: block; width: 54px; height: 30px; } .swwrap input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.aform { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 14px; } .aform h3 { margin: 0; font: 400 18px/1.1 var(--disp); text-transform: uppercase; }
.fld { display: flex; flex-direction: column; gap: 5px; } .fld > span { font: 900 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .fld em { font: 600 11px/1.3 var(--ui); font-style: normal; color: var(--mute); }
.fld.inline { flex-direction: row; align-items: center; justify-content: space-between; }
.fld input, .fld select, .fld textarea, .asearch input { width: 100%; min-height: 44px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 11px; background: var(--paper); color: var(--ink); font: 700 15px/1.25 var(--ui); outline: none; } .fld textarea { resize: vertical; min-height: 66px; }
.fld input:focus, .fld select:focus, .fld textarea:focus, .asearch input:focus { background: #fff; box-shadow: 0 0 0 3px var(--volt); }
.ahr { height: 3px; background: var(--ink); opacity: .12; border-radius: 2px; } .aact { display: flex; flex-wrap: wrap; gap: 10px; } .aact .btn { flex: 1 1 120px; }
.asearch { display: flex; gap: 10px; } .asearch .btn { flex: none; }
.astats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .astats > div { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 10px; padding: 7px 4px 6px; text-align: center; min-width: 0; }
.astats b { display: block; font: 400 16px/1.1 var(--disp); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .astats small { display: block; margin-top: 4px; font: 800 8.5px/1.15 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.arate { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; } .arate small { display: block; font: 800 8px/1.15 var(--ui); text-transform: uppercase; color: var(--mute); min-height: 18px; } .arate b { font: 400 15px/1.2 var(--disp); } .arate em { display: block; font: 600 9px/1 var(--ui); font-style: normal; color: var(--mute); }
.asec { margin: 10px 0 2px; font: 400 16px/1.1 var(--disp); text-transform: uppercase; }
.alog { display: flex; flex-direction: column; gap: 8px; } .alog > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: #fff; border: 2.5px solid var(--ink); border-radius: 10px; } .alog small { font: 700 10px/1.2 var(--ui); color: var(--mute); } .alog span { font: 700 13px/1.3 var(--ui); overflow-wrap: anywhere; }

/* ---------- v0.12: tappable levels, the "Your level" sheet ---------- */
.ovside[role=button], .ovbox[role=button], .tiertag[role=button] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ovside[role=button]:active, .ovbox[role=button]:active { opacity: .85; }
.ovside:focus-visible, .ovbox:focus-visible, .tiertag:focus-visible, .pcard:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; }
.tierstamp svg.tsgo { width: 11px; height: 11px; fill: none; stroke: var(--tt); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; margin-left: -1px; }
.gc-tier { pointer-events: auto; padding: 6px 6px; text-align: center; text-overflow: clip; }          /* a bigger thumb target; main.js shrinks the font when a long tier name (ru / uz) does not fit */
.pcard[role=button] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pcard[role=button]:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.pc-tierrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-tierrow .tiertag { font-size: 10px; padding: 4px 8px; flex: none; max-width: 56%; overflow: hidden; text-overflow: ellipsis; }
.pc-prog { flex: 1; min-width: 0; height: 10px; border: 2.5px solid var(--ink); border-radius: 4px; background: var(--mist); overflow: hidden; transform: var(--sk); }
.pc-prog i { display: block; height: 100%; background: var(--tc, var(--cobalt)); }
.pc-tierrow small { font: 800 10px/1 var(--ui); letter-spacing: .04em; color: var(--mute); white-space: nowrap; text-transform: uppercase; flex: none; }

.lvsheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.lvsheet.hidden { display: none; }
.lv-back { position: absolute; inset: 0; background: rgba(13,16,32,.64); opacity: 0; transition: opacity .2s; }
.lvsheet.open .lv-back { opacity: 1; }
.lv-card { position: relative; width: min(100vw, 430px); max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; background-color: var(--paper); background-image: radial-gradient(rgba(13,16,32,.07) 1.4px, transparent 1.7px); background-size: 12px 12px; color: var(--ink);
  border: 4px solid var(--ink); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -7px 0 var(--tc, var(--volt)); padding: 8px 16px calc(var(--safeB) + 22px); transform: translateY(105%); transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.lvsheet.open .lv-card { transform: none; }
.lv-grab { width: 54px; height: 6px; border-radius: 3px; background: var(--ink); opacity: .25; margin: 2px auto 10px; }
.lv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lv-head h2 { font-size: 24px; text-align: left; }
.lv-head h2::after { content: ''; display: block; height: 5px; width: 54px; background: var(--hot); margin-top: 6px; border-radius: 2px; }
.lv-head .iconbtn { width: 42px; height: 42px; }
.lv-seg.boardseg { margin: 14px -16px 12px; width: calc(100% + 32px); max-width: none; padding: 0 16px 6px; }
.lv-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.lv-who { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lv-who .tierstamp { border-color: var(--ink); font-size: 14px; }
.lv-who .tierstamp span { font-size: 17px; }
.lv-who small, .lv-rating small { font: 800 10px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.lv-rating { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.lv-rating b { font: 400 46px/1 var(--disp); transform: var(--sk); transform-origin: right center; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--hot); }
.lv-prog .bar { height: 26px; border-color: var(--ink); background: #fff; }
.lv-prog .bar i { background: repeating-linear-gradient(-45deg, var(--tc, var(--volt)) 0 9px, color-mix(in srgb, var(--tc, var(--volt)) 78%, #000) 9px 18px); }
.lv-ends { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; font: 800 12px/1.2 var(--ui); color: var(--mute); }
.lv-ends b { flex: 1; text-align: center; font: 900 13px/1.2 var(--ui); color: var(--ink); text-wrap: balance; }
.lv-sub { margin: 18px 0 8px; font: 400 14px/1 var(--disp); text-transform: uppercase; transform: var(--sk); transform-origin: left center; }
.lv-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lv-row { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "dot nm rg" "dot mini mini"; align-items: center; gap: 4px 10px; padding: 9px 12px 9px 10px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; }
.lv-dot { grid-area: dot; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink); background: var(--mist); display: grid; place-items: center; }
.lv-dot svg { width: 17px; height: 17px; fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.lv-nm { grid-area: nm; font: 400 15px/1.1 var(--disp); text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; }
.lv-rg { grid-area: rg; font: 800 11px/1 var(--ui); font-style: normal; color: var(--mute); letter-spacing: .04em; white-space: nowrap; }
.lv-mini { grid-area: mini; height: 8px; border-radius: 4px; background: var(--mist); overflow: hidden; border: 2px solid var(--ink); }
.lv-mini s { display: block; height: 100%; width: 0; background: var(--tc); text-decoration: none; }
.lv-row.done .lv-dot, .lv-row.cur .lv-dot { background: var(--tc); } .lv-row.done .lv-dot svg, .lv-row.cur .lv-dot svg { fill: var(--tt); stroke: var(--tt); }
.lv-row.todo { opacity: .62; }
.lv-row.cur { box-shadow: 0 5px 0 var(--ink); background: #FFFBE6; }
.lv-here { position: absolute; right: 10px; top: -11px; transform: var(--sk); background: var(--ink); color: var(--volt); font: 400 10px/1 var(--disp); padding: 5px 8px; border-radius: 5px; text-transform: uppercase; }
.lv-note { margin: 14px 0 0; font: 600 12px/1.4 var(--ui); color: var(--mute); text-wrap: pretty; }

/* ---------- v0.12: Friends ---------- */
#friends { overflow-y: auto; overflow-x: hidden; touch-action: pan-y; padding-left: 0; padding-right: 0; align-items: stretch; justify-content: flex-start; }
.frbody { width: calc(100% - 32px); max-width: 398px; margin: 14px auto 0; display: flex; flex-direction: column; gap: 14px; flex: none; }
.fr-hero { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--ink); color: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--hot); }
.fr-bear { flex: none; width: 68px; height: 68px; border-radius: 50%; background: var(--volt); border: 3px solid #fff; display: grid; place-items: center; font-size: 38px; line-height: 1; box-shadow: 3px 4px 0 var(--hot); }
.fr-copy h3 { margin: 0 0 6px; font: 400 18px/1.1 var(--disp); text-transform: uppercase; transform: var(--sk); transform-origin: left center; }
.fr-copy p { margin: 0; font: 600 12.5px/1.4 var(--ui); color: rgba(255,255,255,.86); text-wrap: pretty; }
.fr-prog { background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.fr-pips { display: flex; gap: 7px; }
.fr-pips i { flex: 1; height: 22px; border: 3px solid var(--ink); border-radius: 6px; background: var(--mist); transform: var(--sk); }
.fr-pips i.on { background: repeating-linear-gradient(-45deg, var(--volt) 0 8px, var(--voltD) 8px 16px); }
.fr-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fr-cap b { font: 400 22px/1 var(--disp); } .fr-cap span { font: 800 12px/1.2 var(--ui); color: var(--mute); text-align: right; text-transform: uppercase; letter-spacing: .04em; }
.fr-btns { display: flex; flex-direction: column; gap: 10px; }
.fr-btns .btn { min-height: 54px; font-size: 18px; }
.fr-rule { margin: 0; font: 600 12px/1.45 var(--ui); color: var(--mute); text-wrap: pretty; }
.fr-sec { margin: 6px 0 0; font: 400 15px/1 var(--disp); text-transform: uppercase; transform: var(--sk); transform-origin: left center; }
.fr-gifts { display: flex; flex-direction: column; gap: 8px; }
.fr-gift { padding: 11px 12px; border: 3px solid var(--ink); border-radius: 12px; font: 800 13px/1.3 var(--ui); background: #FFF6BF; box-shadow: 0 3px 0 var(--ink); }
.fr-gift.sent { background: #E8F8F0; }
.fr-list { display: flex; flex-direction: column; gap: 8px; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; min-width: 0; }
.fr-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cobalt); color: #fff; border: 3px solid var(--ink); display: grid; place-items: center; font: 400 15px/1 var(--disp); }
.fr-nm { flex: 1; min-width: 0; font: 800 14px/1.2 var(--ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-st { flex: none; font: 800 11px/1 var(--ui); font-style: normal; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.fr-row.ok .fr-st { color: var(--greenD); } .fr-row.ok .fr-av { background: var(--green); color: var(--ink); }

/* ---------- v0.12: admin additions ---------- */
.admtabs button { font-size: 10px; letter-spacing: 0; }
.aper { margin: 2px 0 0; } .aper button { min-height: 34px; font-size: 11px; }
.agift { display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: #fff; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); min-width: 0; }
.agift .ainfo { flex: 1; min-width: 0; } .agift .ainfo b { overflow-wrap: anywhere; } .agift a { color: var(--cobaltD); font-weight: 800; }
.abot { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; font: 800 12px/1.3 var(--ui); }
.abot i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--mist); border: 2px solid var(--ink); } .abot.ok i { background: var(--green); } .abot.bad i { background: var(--hot); } .abot.off i { background: var(--mist); }

.adot { position: absolute; top: -9px; right: -5px; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: var(--hot); color: #fff; border: 2.5px solid var(--ink); font: 900 11px/17px var(--ui); letter-spacing: 0; text-align: center; transform: none; }
.abot span { overflow-wrap: anywhere; min-width: 0; }
.agift .idline { cursor: pointer; text-decoration: underline dotted; }
@media (max-width: 380px) { .gc-row { gap: 5px; } .gc-rating { padding: 3px 6px; } .gc-tier { padding: 6px 4px; } }       /* 360 px phones: the tier chip next to a 4-digit rating needs every pixel */

/* ---------- required subscription gate (v0.13) ---------- */
#subGate { position: fixed; inset: 0; z-index: 350; display: none; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--safeT) + 16px) 20px calc(var(--safeB) + 24px); background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; }
#subGate.on { display: flex; }
#subGate .rays { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.05) 0 5deg, transparent 5deg 13deg); animation-duration: 160s; }
#subGate h2 { color: #fff; text-shadow: 4px 4px 0 var(--hot); font-size: 28px; }
#subGate p { margin: 0; font: 600 15px/1.4 var(--ui); opacity: .92; }
#subGate .subicon { font-size: 54px; line-height: 1; align-self: center; }
#subGate .subchan { align-self: center; background: var(--navy); border: 3px dashed var(--volt); border-radius: 12px; padding: 10px 18px; font: 800 20px/1.2 var(--ui); color: var(--volt); letter-spacing: .02em; }
#subGate .subnote { min-height: 20px; font-size: 14px; color: var(--volt); }
#subGate .subnote.bad { color: #ff8da1; }
#subGate .stack.shake { animation: subshake .35s; }
@keyframes subshake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* ---------- v0.14 ---------- */
/* Nigina: a pink boss button next to the levels (table tennis only) */
/* the CPU level picker: opens under "vs CPU"; Easy / Normal / Hard on one row, Nigina alone on the row below */
.cpupick { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; animation: pickIn .18s ease-out; }
.cpupick.hidden { display: none; }
@keyframes pickIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cpupick .seg { margin-top: 0; }
.cpupick button.boss { display: none; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border-radius: 10px; border: 3px solid rgba(255,255,255,.55); background: linear-gradient(135deg, #FF86B4, #D63C78); color: #fff; font: 900 14px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; transform: var(--sk); cursor: pointer; }
#menu[data-g="tt"] .cpupick button.boss { display: flex; }
.cpupick button.boss .lv { width: 20px; height: 20px; }
.cpupick button.boss .lv ellipse { fill: #FFE3EE; stroke: #7E1C46; stroke-width: 1; }
.cpupick button.boss.on { background: #FFD3E6; color: #7E1C46; border-color: var(--ink); box-shadow: 3px 4px 0 #D63C78; }
.cpupick button.boss.on .lv ellipse { fill: #FF86B4; stroke: var(--ink); }
.avatar.nigina, .av.nigina, #tAvOpp.nigina { background: #FF86B4 !important; color: #fff; }
/* "share your moment" card on the end screen */
.endshare { margin: 0 0 18px; }
.shcard { position: relative; display: grid; grid-template-columns: 74px 1fr; gap: 10px 12px; align-items: center; background: #fff; color: var(--ink); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 5px 6px 0 var(--hot); padding: 10px 12px 12px; animation: shIn .35s cubic-bezier(.2,1.4,.4,1); }
.shcard.pink { box-shadow: 5px 6px 0 #D63C78; background: #FFF5F9; }
@keyframes shIn { from { transform: translateY(14px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.shpic { width: 74px; height: 92px; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--navy); display: grid; place-items: center; transform: rotate(-4deg); }
.shpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shspin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); border-top-color: var(--volt); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.shtxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 22px; }
.shtxt b { font: 400 19px/1.05 var(--disp); text-transform: uppercase; }
.shtxt span { font: 600 12.5px/1.3 var(--ui); color: var(--mute); }
.shbtns { grid-column: 1 / -1; display: flex; gap: 10px; }
.shbtns .btn { flex: 1; min-height: 46px; font-size: 14px; padding: 0 8px; }
.shx { position: absolute; top: 4px; right: 6px; width: 30px; height: 30px; border: 0; background: none; color: var(--ink); font: 900 22px/1 var(--ui); cursor: pointer; }
/* reconnecting banner */
.recon { position: fixed; z-index: 66; left: 50%; top: calc(var(--safeT) + 74px); transform: translateX(-50%) var(--sk); display: flex; align-items: center; gap: 9px; background: var(--ink); color: #fff; border: 3px solid var(--volt); border-radius: 12px; box-shadow: 4px 5px 0 var(--hot); padding: 9px 14px; font: 800 14px/1.2 var(--ui); max-width: calc(100vw - 32px); }
.recon.hidden { display: none; }
.recon .rdot { width: 10px; height: 10px; border-radius: 50%; background: var(--volt); animation: rpulse 1s ease-in-out infinite; flex: none; }
.recon.opp { border-color: var(--ice); } .recon.opp .rdot { background: var(--ice); }
@keyframes rpulse { 50% { transform: scale(.5); opacity: .4; } }
/* Friends: add the bot to a group */
.fr-group { display: flex; gap: 12px; align-items: center; margin: 14px 0 4px; padding: 12px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 4px 5px 0 var(--cobalt); cursor: pointer; text-align: left; width: 100%; color: var(--ink); }
.fr-group .ic { font-size: 26px; flex: none; }
.fr-group b { display: block; font: 900 14px/1.2 var(--ui); }
.fr-group small { display: block; font: 600 12px/1.3 var(--ui); color: var(--mute); margin-top: 2px; }

/* v0.14.2: welcome page for people who ask to join a gated chat */
#welcome { overflow: hidden; background: var(--ink); }
#welcome .rays { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.05) 0 5deg, transparent 5deg 13deg); animation-duration: 160s; }
.welcome { text-align: center; gap: 12px; }
.welcome .welmark { font-size: 54px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.welcome .welmission { margin: 4px 0 6px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.1); font-weight: 700; font-size: 17px; line-height: 1.35; }
.welcome .welnote { opacity: .75; font-size: 13px; }

/* ---------- v0.14.8 Durak: the room options panel in the menu + the lobby seat list ---------- */
.dkrules { display: flex; flex-direction: column; gap: 8px; }
.dkrsum { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 12px; border: 3px solid rgba(255,255,255,.35); border-radius: 10px; background: var(--navy); color: #fff; text-align: left; }
.dkrsum .dkrs-t { font: 900 11px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); flex: none; }
.dkrsum b { flex: 1; min-width: 0; font: 800 13px/1.2 var(--ui); color: var(--volt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.dkrsum svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.dkrsum[aria-expanded="true"] svg { transform: rotate(180deg); }
.dkrbody { display: flex; flex-direction: column; gap: 9px; animation: pickIn .18s ease-out; }
.dkr { display: flex; flex-direction: column; gap: 4px; }
.dkr small { font: 900 10.5px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.dkr .seg button { min-height: 40px; font-size: 13px; }
.dkrnote { margin: 0; font: 500 12px/1.35 var(--ui); color: rgba(255,255,255,.6); }
.lobbyseats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lobbyseats .ls { min-width: 76px; max-width: 46%; padding: 8px 12px; border: 3px solid rgba(255,255,255,.4); border-radius: 10px; background: var(--navy); color: #fff; font: 800 13px/1.15 var(--ui); text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: var(--sk); }
.lobbyseats .ls.in { border-color: var(--volt); color: var(--volt); }
.lobbyseats .ls.free { border-style: dashed; color: rgba(255,255,255,.45); }