*{box-sizing:border-box}
:root{--top:env(safe-area-inset-top);--bottom:env(safe-area-inset-bottom)}
html,body{margin:0;width:100%;height:100%;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;overflow:hidden;overscroll-behavior:none}
button,input,select{font:inherit}

/* Splash */
#splash{position:fixed;inset:0;z-index:999;background:#050505;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .45s ease,visibility .45s ease}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.splashLogo{text-align:center;animation:logoIn .7s cubic-bezier(.2,.8,.2,1)}
.paw{font-size:64px;line-height:1;margin-bottom:16px;filter:drop-shadow(0 8px 20px rgba(255,255,255,.12))}
.splashName{font-size:36px;font-weight:900;letter-spacing:-1.5px}
.splashSub{margin-top:7px;font-size:13px;opacity:.45}
.splashSpinner{width:20px;height:20px;border:2px solid #333;border-top-color:#fff;border-radius:50%;margin-top:42px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes logoIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

/* Feed */
#feed{width:100%;height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-y:contain}
#feed::-webkit-scrollbar{display:none}
.post{position:relative;width:100%;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;background:#070707;display:flex;align-items:center;justify-content:center;overflow:hidden}
.media{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.media img,.media video{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.18),transparent 24%,transparent 58%,rgba(0,0,0,.88))}
.caption{position:absolute;left:17px;right:88px;bottom:calc(20px + var(--bottom));z-index:4}
.stats{font-weight:800;margin-bottom:8px;text-shadow:0 1px 4px #000}
.tags{display:flex;gap:5px;flex-wrap:wrap;max-height:72px;overflow:hidden}
.tag{background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border-radius:999px;padding:5px 9px;font-size:12px}
.actions{position:absolute;right:12px;bottom:calc(27px + var(--bottom));z-index:5;display:flex;flex-direction:column;gap:13px}
.action{width:53px;height:53px;border:0;border-radius:50%;color:#fff;background:rgba(0,0,0,.52);backdrop-filter:blur(10px);font-size:22px}
.action span{display:block;font-size:9px;margin-top:-2px}
.action.liked{background:rgba(255,60,95,.9)}

/* Top bar */
#topbar{position:fixed;top:0;left:0;right:0;height:calc(58px + var(--top));padding:calc(8px + var(--top)) 12px 8px;z-index:20;display:flex;align-items:center;justify-content:space-between;pointer-events:none;background:linear-gradient(rgba(0,0,0,.55),transparent)}
#topbar>*{pointer-events:auto}
.title{font-weight:900;text-shadow:0 1px 5px #000}
.icon{border:0;background:rgba(0,0,0,.4);color:#fff;border-radius:50%;width:40px;height:40px;font-size:23px}

/* Panels */
.panel{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.62);backdrop-filter:blur(8px);padding:12px}
.hidden{display:none!important}
.panelCard{width:min(560px,100%);padding:22px;padding-bottom:calc(22px + var(--bottom));border-radius:24px;background:#181818;box-shadow:0 10px 50px #000;max-height:90dvh;overflow:auto}
.panelCard h2{margin:0 0 8px}
.help{font-size:13px;line-height:1.45;opacity:.55;margin:0 0 18px}
.panelCard label{display:block;font-size:13px;opacity:.7;margin:12px 0 6px}
.panelCard input,.panelCard select{width:100%;padding:13px;border:1px solid #444;border-radius:12px;background:#252525;color:#fff;outline:none}
.panelCard input:focus{border-color:#888}
.primary,.secondary{width:100%;margin-top:14px;padding:13px;border:0;border-radius:13px;font-weight:800}
.primary{background:#fff;color:#000}.secondary{background:#333;color:#fff}
.close{float:right;border:0;background:transparent;color:#fff;font-size:30px}

/* Loading */
.loading{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;background:rgba(0,0,0,.72);padding:12px 18px;border-radius:999px}

/* Toast */
#toast{position:fixed;left:50%;bottom:calc(25px + var(--bottom));transform:translate(-50%,20px);opacity:0;z-index:100;padding:10px 15px;border-radius:999px;background:rgba(20,20,20,.92);transition:.2s;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Animated media */
.media video{
  background:#000;
}
.media video::-webkit-media-controls{
  display:none !important;
}
.media img[data-animated="true"]{
  image-rendering:auto;
}

.tag{border:0;color:#fff;cursor:pointer}
.menuButton{width:100%;text-align:left;padding:15px;margin:5px 0;border:0;border-radius:13px;background:#282828;color:#fff;font-weight:700}
.fullCard{max-height:92dvh}
.tagResult{width:100%;display:flex;justify-content:space-between;gap:10px;padding:13px 4px;border:0;border-bottom:1px solid #333;background:transparent;color:#fff;text-align:left}
.tagResult span{opacity:.5;font-size:12px}
#accountStatus{margin-top:14px;font-size:13px;opacity:.65}
.comment{padding:14px 0;border-bottom:1px solid #333}
.comment b{display:block;margin-bottom:6px}
.commentBody{font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.comment small{display:block;margin-top:7px;opacity:.45}

/* Sleek furry-inspired visual refresh */
body{
  background:
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.055),transparent 25%),
    radial-gradient(circle at 88% 92%,rgba(255,255,255,.045),transparent 28%),
    #050505;
}
#topbar{
  background:linear-gradient(rgba(5,5,5,.72),transparent);
}
.icon{
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 5px 22px rgba(0,0,0,.22);
}
.title:before{
  content:"✦ ";
  opacity:.55;
}
.action{
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 20px rgba(0,0,0,.2);
  transition:transform .15s ease,background .15s ease;
}
.action:active{transform:scale(.9)}
.caption{filter:drop-shadow(0 4px 15px rgba(0,0,0,.15))}
.tag{
  background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.08);
}
.panelCard{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg,#1a1a1a,#111);
}
.menuButton{
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(145deg,#292929,#1d1d1d);
}
.replyQuote{
  margin:4px 0 9px;
  padding:8px 11px;
  border-left:3px solid rgba(255,255,255,.5);
  border-radius:0 10px 10px 0;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.72);
  white-space:pre-wrap;
  font-size:13px;
}
.commentBody>div:not(.replyQuote){margin:2px 0}

/* v8 Tags UI */
.homeTagsButton {
  position: fixed;
  left: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(20,20,24,.88);
  color: inherit;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.homeTagsButton:active { transform: scale(.97); }
.homeTagsIcon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  font-weight: 900;
}

.addedTagsBox {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}
.addedTagsHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.addedTagsHeader {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.addedTagsHint {
  margin-top: 3px;
  font-size: 11px;
  opacity: .45;
}
.clearAddedTags {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.07);
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.clearAddedTags:active { transform: scale(.96); }
.addedTagsList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
}
.addedTagChip {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  padding: 8px 10px 8px 12px;
  background: rgba(255,255,255,.075);
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.addedTagChip:active { transform: scale(.97); }
.addedTagName {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.removeTag {
  font-size: 17px;
  line-height: 12px;
  opacity: .58;
}
.addedTagChip:hover .removeTag,
.addedTagChip:focus-visible .removeTag { opacity: 1; }
.addedTagsEmpty {
  align-self: center;
  font-size: 12px;
  opacity: .42;
}

.homeTagsButton { z-index: 1000; pointer-events: auto; }

/* v11: visually distinct quoted comments */
.commentQuoteCard {
  position: relative;
  display: flex;
  gap: 10px;
  margin: 9px 0;
  padding: 11px 13px 11px 11px;
  border-left: 3px solid rgba(170, 125, 255, .8);
  border-radius: 0 13px 13px 0;
  background: linear-gradient(135deg, rgba(170,125,255,.13), rgba(255,255,255,.045));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
}
.commentQuoteMark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(170,125,255,.18);
  font-family: Georgia, serif;
  font-size: 22px;
  line-height: 1;
  opacity: .85;
}
.commentQuoteContent {
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: .72;
  font-style: italic;
}
.commentTextLine {
  line-height: 1.5;
}
.commentSpacer {
  height: 5px;
}

/* v12: expandable full tag list on every post */
.postTags {
  margin-top: 8px;
}
.postTagsVisible,
.postTagsHidden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.postTagsHidden {
  display: none;
  margin-top: 6px;
}
.postTags[data-expanded="true"] .postTagsHidden {
  display: flex;
}
.postTags[data-expanded="true"] .expandTagsButton {
  display: none;
}
.expandTagsButton,
.collapseTagsButton {
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(255,255,255,.065);
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.expandTagsButton:active,
.collapseTagsButton:active {
  transform: scale(.97);
}
.expandTagsChevron {
  margin-left: 3px;
  font-size: 14px;
}
.collapseTagsButton {
  opacity: .7;
}

/* v13: dedicated Browse Tags window */
.dedicatedTagsPanel {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
}
.dedicatedTagsPanel.isOpen {
  display: block;
}
.dedicatedTagsBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dedicatedTagsCard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(680px, calc(100% - 28px));
  max-height: min(760px, calc(100% - 40px));
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: rgba(25,25,31,.97);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.dedicatedTagsTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 18px 12px;
}
.dedicatedTagsTitle {
  font-size: 20px;
  font-weight: 850;
}
.dedicatedTagsSubtitle {
  margin-top: 3px;
  font-size: 12px;
  opacity: .48;
}
.dedicatedTagsClose {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: inherit;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.dedicatedTagsSearch {
  padding: 8px 18px 14px;
}
.dedicatedTagsSearch input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.055);
  color: inherit;
  font: inherit;
  outline: none;
}
.dedicatedTagsSearch input:focus {
  border-color: rgba(170,125,255,.6);
}
.dedicatedTagsResults {
  max-height: 520px;
  overflow-y: auto;
  padding: 0 12px 14px;
}
.dedicatedTagResult {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.dedicatedTagResult:active {
  background: rgba(255,255,255,.07);
}
.dedicatedTagName {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.dedicatedTagCount {
  font-size: 11px;
  opacity: .45;
}
.dedicatedTagPlus {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: rgba(170,125,255,.14);
  font-size: 18px;
}
.dedicatedTagsEmpty,
.dedicatedTagsLoading {
  padding: 30px 14px;
  text-align: center;
  font-size: 13px;
  opacity: .5;
}
@media (max-width: 600px) {
  .dedicatedTagsCard {
    width: calc(100% - 16px);
    max-height: calc(100% - 20px);
    border-radius: 20px;
  }
  .dedicatedTagsResults {
    max-height: calc(100vh - 180px);
  }
}

.dedicatedTagsEmpty small {
  display: inline-block;
  margin-top: 8px;
  max-width: 90%;
  font-size: 11px;
  opacity: .7;
  overflow-wrap: anywhere;
}


/* Tournament of Death */
.tournamentPanel{position:fixed;inset:0;z-index:50;display:flex;align-items:stretch;justify-content:center;overflow:auto;padding:10px;background:linear-gradient(135deg,#ffd7ec,#d8f4ff 48%,#e9dcff)}
.tournamentBackdrop{position:fixed;inset:0;background:rgba(35,15,45,.18)}
.tournamentShell{position:relative;z-index:1;width:min(1000px,100%);padding:10px 4px 40px;font-family:Trebuchet MS,Arial,sans-serif;color:#4c2850}
.tournamentLogo{text-align:center;font-weight:900;font-size:clamp(27px,7vw,50px);color:#fff;text-shadow:3px 3px 0 #8c3f9a,0 0 12px #ff65b1;letter-spacing:-1px;margin:5px 0 2px}
.tournamentSubtitle{text-align:center;font-weight:800;color:#7b3c7e;margin:0 0 14px}
.tPanel{background:#ffffffdc;border:3px solid #7d3e80;border-radius:22px;box-shadow:7px 7px 0 #8f5594,inset 0 0 0 3px #fff;padding:15px;margin-bottom:16px}
.tPanel h2{margin:0 0 10px}.tPanel label{display:block;font-weight:900;margin-bottom:7px}
.tPanel input{width:100%;min-height:52px;border:3px solid #7d3e80;border-radius:14px;padding:10px 13px;background:#fff;color:#4c2850;font-size:17px;outline:none}
.tHint{font-size:13px;font-weight:700;opacity:.78;line-height:1.4;margin-top:7px}.tHint.center{text-align:center}
.tActions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}.tPrimary,.tSecondary{border:3px solid #6b2c71;border-radius:15px;min-height:48px;padding:9px 14px;font-weight:900;box-shadow:0 4px 0 #6b2c71;cursor:pointer;touch-action:manipulation}.tPrimary{background:linear-gradient(#ff91c4,#ff5da5);color:white}.tSecondary{background:linear-gradient(#fff,#e9d9ff);color:#5d2c67}.tPrimary:active,.tSecondary:active{transform:translateY(3px);box-shadow:0 1px 0 #6b2c71}.tStatus{font-weight:800;color:#744574;margin-top:10px;min-height:22px}.tClose{float:right;border:0;background:transparent;font-size:30px;color:#5d2c67;line-height:1;cursor:pointer}.tGameTop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.tRound{font-weight:900;color:#74367b}.tProgress{height:13px;background:#f2d7ed;border:2px solid #7d3e80;border-radius:99px;overflow:hidden;margin-bottom:12px}.tProgress>div{height:100%;width:0;background:linear-gradient(90deg,#ff65aa,#8d7cff);transition:width .3s}
.tBattle{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:stretch;min-height:55vh;margin-top:8px}.tCard{position:relative;min-width:0;background:#fff;border:4px solid #74367b;border-radius:20px;padding:7px;box-shadow:5px 5px 0 #b57abd;overflow:hidden;user-select:none;touch-action:pan-y;cursor:grab}.tCard img,.tCard video{display:block;width:100%;height:min(62vh,650px);object-fit:contain;background:#f4edf6;border-radius:13px}.tCard .tChoice{text-align:center;font-weight:900;font-size:14px;padding:8px 3px 4px;color:#6b3471}.tCard.tSwiping{transition:transform .22s ease,opacity .22s ease}.tCard.tLoserLeft{transform:translateX(-130%) rotate(-12deg);opacity:0}.tCard.tLoserRight{transform:translateX(130%) rotate(12deg);opacity:0}
.tFameGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.tFameItem{border:3px solid #74367b;background:#fff;border-radius:15px;padding:5px;box-shadow:3px 3px 0 #b57abd;cursor:pointer}.tFameItem img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block}.tEmpty{text-align:center;font-weight:800;padding:30px 10px}
.tModal,.tWinner{position:fixed;inset:0;background:#30152fcc;display:flex;align-items:center;justify-content:center;padding:14px;z-index:70}.tModalBox{width:min(900px,100%);max-height:94vh;overflow:auto;background:#fff7fb;border:4px solid #74367b;border-radius:22px;padding:12px;box-shadow:0 0 30px #ff76b9}.tModalBox img{display:block;width:100%;max-height:72vh;object-fit:contain;background:#eee;border-radius:13px}.tCloseModal{float:right}.tWinner{z-index:80;background:#24102dd9}.tWinnerBox{text-align:center;width:min(650px,100%);color:white}.tWinnerBox h1{font-size:clamp(36px,10vw,70px);margin:0 0 10px;text-shadow:0 0 12px #ff6bb5,3px 3px #6d2e77}.tWinnerFrame{background:#fff;border-radius:22px;padding:8px;border:5px solid #fff;box-shadow:0 0 12px #fff,0 0 28px #ff68b3,0 0 60px #a77cff,0 0 100px #68d7ff;animation:tGlow 1.2s infinite alternate}.tWinnerFrame img{width:100%;max-height:65vh;object-fit:contain;display:block;border-radius:15px;background:#eee}@keyframes tGlow{to{box-shadow:0 0 20px #fff,0 0 45px #ff68b3,0 0 85px #a77cff,0 0 130px #68d7ff}}.tSparkle{font-size:26px;letter-spacing:10px;margin:7px}.centerActions{justify-content:center}
@media(max-width:650px){.tournamentPanel{padding:7px}.tPanel{padding:11px;border-width:2px}.tBattle{gap:7px;min-height:55vh}.tCard{border-width:3px;padding:5px}.tCard img,.tCard video{height:58vh}.tCard .tChoice{font-size:12px}.tActions .tPrimary,.tActions .tSecondary{flex:1 1 auto}}