/* Y — the in-game social feed (src/ui/y). */

.y { flex: 1 1 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ink); }
.y-wait { padding: 24px; color: var(--muted); font-family: var(--font-small); font-size: var(--fs-small); text-transform: uppercase; }
.y-av { display: block; flex: none; image-rendering: pixelated; background: var(--n2); box-shadow: 0 0 0 var(--px) var(--ink); }
.y-av.is-tap { cursor: pointer; }
.y-link { color: var(--sky); }
.y-verified { display: inline-block; vertical-align: -1px; margin: 0 2px; }

/* list */
.y-listwrap { position: relative; flex: 1 1 0; min-height: 0; min-width: 0; }
.y-list { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; overflow-anchor: none; }
/* One row of live actions; the rest of the allocated pane belongs to posts. */
.y-incoming { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 4px;
  padding: 2px 6px; background: var(--surface); box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--n3); }
.y-incoming__count { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--sky); font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; text-transform: uppercase; }
.y-incoming__action { min-height: 44px; min-width: 44px; padding: 6px; color: var(--sky); background: var(--ink);
  font-family: var(--font-small); font-size: var(--fs-small); text-transform: uppercase; white-space: nowrap; }
.y-compose__box { grid-column: 4; color: var(--phos); }

/* post */
.yp { position: relative; display: flex; gap: 8px; padding: 10px 10px 8px; box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--n1); }
@keyframes postIn { from { opacity: 0; translate: 0 -8px; background: var(--n1); } }
.yp.is-focus { animation: focusPost 1.4s steps(6); }
@keyframes focusPost { 0%, 60% { background: rgba(127, 178, 255, .14); } 100% { background: transparent; } }
.yp.is-player { background: linear-gradient(90deg, rgba(31, 161, 82, .10), transparent 60%); }
.yp__badge { display: inline-block; margin-bottom: 4px; font-family: var(--font-small); font-size: var(--fs-small); line-height: 1; padding: 3px 5px; color: var(--ink); background: var(--phos); }
.yp.is-ratio .yp__badge { background: var(--hot); color: var(--n9); }
.yp.is-bad .yp__badge { background: var(--n4); color: var(--n8); }
.yp.is-viral .yp__badge { background: var(--gold); color: var(--umber); animation: blink 1s steps(1) 4; }
.yp__main { flex: 1; min-width: 0; }
.yp__head { display: flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; }
.yp__name { color: var(--n9); overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.yp__handle, .yp__meta, .yp__time { font-family: var(--font-small); font-size: var(--fs-small); color: var(--dim); text-transform: uppercase; }
.yp__handle { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.yp__meta { flex: none; }
.yp__text { color: var(--n8); line-height: var(--lh-prose); white-space: pre-wrap; word-break: break-word; margin: 2px 0 6px; user-select: text; -webkit-user-select: text; }
.yp.is-hot .yp__text { color: var(--n9); }
.yp__quote { margin: 4px 0 8px; padding: 8px; box-shadow: inset 0 0 0 var(--px) var(--n2); }
.yp__qhead { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.yp__quote .yp__text { margin-bottom: 2px; }
.yp__note { margin: 4px 0 8px; padding: 6px 8px; background: var(--n1); box-shadow: inset var(--px) 0 0 0 var(--gold); color: var(--n8); line-height: var(--lh-prose); }
.yp__notehead { font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); color: var(--gold); }
.yp__actions { display: flex; justify-content: space-between; max-width: 300px; margin-top: 2px; }
.yp__act { display: inline-flex; align-items: center; gap: 5px; min-width: 54px; min-height: 22px; font-family: var(--font-small); font-size: var(--fs-small);
  color: var(--dim); font-variant-numeric: tabular-nums; }
.yp__act img { image-rendering: pixelated; }
.yp__act--like.is-on { color: var(--hot); }
.yp__act--like.is-pop img { animation: likePop .3s steps(3); }
@keyframes likePop { 50% { transform: scale(1.6); } }
.yp__replies:empty { display: none; }
.yp__replies { margin: 6px 0 0; padding-left: 8px; box-shadow: inset var(--px) 0 0 0 var(--n2); display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.yr { display: flex; gap: 6px; animation: postIn .3s steps(3); }
.yr__main { min-width: 0; flex: 1; }
.yr__head { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; overflow: hidden; }
.yr__head .yp__name { font-size: var(--fs); }
.yr__text { color: var(--n7); line-height: var(--lh-prose); word-break: break-word; }
.yr__more { font-family: var(--font-small); font-size: var(--fs-small); color: var(--sky); text-transform: uppercase; }

/* images */
.y-img { margin: 4px 0 8px; }
.y-img__canvas { display: block; width: 240px; height: 128px; max-width: 100%; image-rendering: pixelated; box-shadow: 0 0 0 var(--px) var(--n2); }
.y-img figcaption { margin-top: 4px; font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); color: var(--dim); text-transform: uppercase; }
.y-meme { display: grid; grid-template-columns: 56px 1fr; max-width: 280px; background: var(--n9); box-shadow: 0 0 0 var(--px) var(--n2); }
.y-meme__face { width: 56px; height: 56px; image-rendering: pixelated; }
.y-meme__txt { display: flex; align-items: center; padding: 4px 8px; color: var(--ink); line-height: var(--lh-prose); background: var(--n9); box-shadow: inset 0 calc(-1 * var(--px)) 0 0 var(--n7); }

/* compose */
.y-compose__hint { color: var(--muted); }
.y-tones { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.y-tone { display: grid; gap: 3px; padding: 8px; text-align: left; background: var(--n2); box-shadow: 0 0 0 var(--px) var(--ink); }
.y-tone__label { color: var(--n9); line-height: 1; }
.y-tone__desc { font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); color: var(--dim); text-transform: uppercase; }
.y-tone.is-on { background: var(--teal); }
.y-tone.is-on .y-tone__desc { color: var(--ice); }
.y-tone.is-off { opacity: .45; }
.y-draft:empty { display: none; }
.y-draft { padding: 8px; margin: 6px 0; background: var(--ink); box-shadow: inset 0 0 0 var(--px) var(--n2); }
.y-draft__actions { display: flex; justify-content: flex-end; gap: 6px; }

/* profile */
.modal--profile .modal__head { display: none; }
.modal--profile .modal__body { padding: 0 0 8px; }
.y-prof__banner { height: 48px; background: repeating-linear-gradient(90deg, var(--violet-1) 0 8px, var(--space) 8px 16px); }
.y-prof { padding: 0 14px 10px; }
.y-prof__row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: -28px; }
.y-prof__row .y-av { box-shadow: 0 0 0 calc(2 * var(--px)) var(--surface); }
.y-prof__name { margin-top: 8px; color: var(--n9); font-size: var(--fs); }
.y-prof__bio { margin: 6px 0; color: var(--n8); }
.y-prof__stats { font-family: var(--font-small); font-size: var(--fs-small); color: var(--muted); text-transform: uppercase; }
.y-prof__stats b { color: var(--n9); }
.y-prof__posts { padding: 0 14px; display: grid; gap: 8px; }
.y-prof__post { padding-top: 8px; box-shadow: inset 0 var(--px) 0 0 var(--n2); }
.y-prof__empty { color: var(--muted); }

/* bubble over the scene */
.y-bubble { position: absolute; z-index: 3; left: 6px; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; text-align: left;
  background: rgba(11, 12, 20, .92); box-shadow: 0 0 0 var(--px) var(--n3), 0 calc(2 * var(--px)) 0 0 rgba(0, 0, 0, .5);
  translate: 0 140%; transition: translate .25s steps(4); }
.y-bubble.is-on { translate: 0 0; }
.y-bubble__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.y-bubble__who { font-family: var(--font-small); font-size: var(--fs-small); line-height: calc(14px * var(--text-scale, 1)); color: var(--dim); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.y-bubble__who b { color: var(--n9); font-weight: normal; }
.y-bubble__text { color: var(--n8); line-height: calc(18px * var(--text-scale, 1)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.y-bubble__logo { flex: none; opacity: .8; }