/* x/place: "post office". White, ink and one blue; the wall carries the color. Matches Paper page Player. */
:root {
  --ink: #111418; --blue: #1D3BE0; --red: #E5372A; --line: var(--stroke); --muted: #6B7079; --body: #4A4F57; --soft: #F4F5F7;
  /* one thin muted stroke instead of drop shadows (the owner's call): ink at 12% shows on white cells and on busy art */
  --stroke: #1114181F; --edge: 0 0 0 1px var(--stroke);
  /* Rysana Mono for everything (the owner's call). Han has no Rysana glyphs: the language's system font, then Noto
     (lang.ts links it only when needed). Arabic: Rysana first, the system's Arabic font as a fallback. */
  --han: "Hiragino Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC";
  --mono: "Rysana Mono", var(--han), "Geeza Pro", "Noto Sans Arabic", ui-monospace, monospace;
}
* { box-sizing: border-box; border-radius: 0; } /* squared off: no rounded corners anywhere */
html, body { margin: 0; height: 100%; overflow: hidden; background: #fff; }
body {
  font: 500 12px/16px var(--mono); color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
#game { position: fixed; inset: 0; overflow: hidden; }
#wall { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
button:disabled { cursor: default; }
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.mono { font: 500 12px/16px var(--mono); color: var(--muted); white-space: nowrap; }
.strong { font-weight: 600; color: var(--ink); }
.blue { color: var(--blue); }
.grow { flex: 1 1 0; min-width: 0; }

/* top pills */
.pill { position: absolute; z-index: 6; display: flex; align-items: center; background: #fff; border-radius: 0; box-shadow: var(--edge); padding: 8px 14px 8px 12px; pointer-events: none; }
.brand { left: 12px; top: 12px; gap: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 8px; }
.logo { display: block; flex-shrink: 0; width: 21px; height: 21px; shape-rendering: crispEdges; }
.vr { width: 1px; height: 14px; background: var(--line); flex-shrink: 0; }
.status { gap: 8px; }
/* top right: the status pill (people / attack / draft), and right under it the map controls as one strip exactly as
   wide as the pill (width 0 + min-width 100%: the pill alone sizes the column). Below Sojo's pill while it shows. */
.topr { position: absolute; z-index: 6; right: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; direction: ltr; pointer-events: none; transition: top .2s; }
[dir="rtl"] .topr > * { direction: rtl; }
.topr .pill { position: static; }
body.pill-on .topr { top: 56px; } /* Sojo's own pill sits in the top-right corner while signed in */
.dot { width: 8px; height: 8px; border-radius: 0; background: var(--blue); box-shadow: 0 0 0 3px #1D3BE02E; flex-shrink: 0; }
.draftmark { width: 10px; height: 10px; background: var(--red); outline: 1px dashed var(--ink); flex-shrink: 0; }

/* map controls */
/* desktop: a column under the status pill, right-aligned with it. .row (phones, or when the column would reach the dock;
   app.ts placeOverlays): one strip exactly as wide as the pill that scrolls sideways */
.map { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; background: #fff; border-radius: 0; box-shadow: var(--edge); pointer-events: auto; }
.map button { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 0; }
.map button:disabled { opacity: .3; }
.map button:not(:disabled):active { background: var(--soft); }
.map .hr { width: 18px; height: 1px; flex-shrink: 0; background: var(--line); }
.map.row { width: 0; min-width: 100%; flex-direction: row; padding: 2px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x; }
.map.row::-webkit-scrollbar { display: none; }
.map.row button { width: 28px; height: 28px; }
.map.row .hr { width: 1px; height: 16px; margin: 0 2px; }
/* Replay: the icon alone in the desktop column; the icon and its label in the phone row */
.map .mlbl { display: none; }
.map.row #histBtn { width: auto; gap: 5px; padding: 0 8px 0 6px; }
.map.row #histBtn .mlbl { display: inline; font: 600 12px/16px var(--mono); white-space: nowrap; color: var(--ink); }
/* phones: no logo in the top left, just the coordinates (and nothing when they give way to Sojo's pill) */
@media (pointer: coarse), (max-width: 430px) {
  .brand .logo, .brand .vr { display: none; }
  .brand { padding: 8px 14px 8px 12px; }
  .topl.nocoords .brand { display: none; }
}

/* one-time hint above the reticle */
.hint { position: absolute; z-index: 2; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 6px 12px; background: #fff; border-radius: 0; box-shadow: var(--edge); font: 500 12px/16px var(--mono); color: var(--muted); white-space: nowrap; pointer-events: none; }
.hint b { font-weight: 700; color: var(--ink); }

/* byline card */
.av { width: 36px; height: 36px; border-radius: 0; background: var(--soft) center / cover no-repeat; flex-shrink: 0; }
.who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.who .h { font: 700 15px/18px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.big { font-size: 15px; line-height: 18px; }

.toast { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); max-width: calc(100% - 48px); padding: 9px 14px; border-radius: 0; background: var(--ink); color: #fff; font: 600 13px/18px var(--mono); text-align: center; pointer-events: none; box-shadow: 0 0 0 1px var(--stroke); }

/* the tray */
.dock { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; }
.tray { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #fff; border-radius: 0; box-shadow: var(--edge); }
.note { display: none; align-items: center; gap: 8px; padding: 6px 10px; background: var(--soft); border-radius: 0; font: 500 12px/16px var(--mono); color: var(--body); white-space: nowrap; overflow: hidden; }
.note b { font-weight: 700; color: var(--ink); }
body.guest .note { display: flex; }
.strip { display: flex; align-items: center; gap: 6px; padding: 0 2px 0 4px; }
.count { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.num { font: 900 20px/22px var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.next { margin-left: 4px; color: var(--blue); font-weight: 600; }
.sq { width: 32px; height: 32px; border-radius: 0; background: var(--soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sq:disabled svg { opacity: .35; }
.done { height: 32px; padding: 0 18px; border-radius: 0; background: var(--blue); color: #fff; font: 800 14px/16px var(--mono); flex-shrink: 0; transition: box-shadow .2s, opacity .2s; }
.done:disabled { opacity: .35; }
.done.halo { box-shadow: 0 0 0 2px #1D3BE04D; } /* a flat ring, not a glow */
.done.busy { opacity: .6; cursor: default; }
.palette { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.prow { display: flex; gap: 6px; }
.sw { flex: 1 0 0; min-width: 0; height: 22px; border-radius: 0; }
/* phones: one row of 16 that scrolls sideways (a drag scrolls, a tap picks); 5 px of room so the ring isn't clipped */
@media (pointer: coarse), (max-width: 430px) {
  .palette { flex-direction: row; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x; overscroll-behavior: contain; padding: 5px; margin: -5px -3px; }
  .palette::-webkit-scrollbar { display: none; }
  .prow { display: contents; }
  .sw { flex: 1 0 32px; min-width: 32px; height: 30px; }
}
.sw.white { box-shadow: inset 0 0 0 1px var(--stroke); }
.sw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.sw.white.on { box-shadow: inset 0 0 0 1px var(--stroke), 0 0 0 2px #fff, 0 0 0 4px var(--ink); }

/* "Your px are live" */
.liverow { display: flex; align-items: center; gap: 16px; padding: 2px 2px 0; }
.stamp { width: 72px; height: 72px; flex-shrink: 0; transform: rotate(-4deg); background: #fff; box-shadow: 0 0 0 1px var(--stroke); image-rendering: pixelated; }
.livetext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.title { font: 800 18px/22px var(--mono); letter-spacing: 0; }
.body { font: 500 13px/18px var(--mono); color: var(--body); }
.inset { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--soft); border-radius: 0; }

@media (max-width: 430px) { .next { display: none; } .note span { overflow: hidden; text-overflow: ellipsis; } }

/* --- posts, flares, refill, leaderboard (Paper pages Loop, Player, Posts, Money) --- */
.red { color: var(--red); }
.dot.red { background: var(--red); box-shadow: 0 0 0 3px #E5372A33; }
.attackpill { pointer-events: auto; cursor: pointer; font: inherit; }
.dmg { position: absolute; z-index: 2; padding: 5px 9px; border-radius: 0; background: var(--red); color: #fff; font: 600 12px/16px var(--mono); white-space: nowrap; pointer-events: none; }
.ringtag { position: absolute; z-index: 2; padding: 4px 10px; border-radius: 0; background: var(--blue); color: #fff; font: 600 12px/16px var(--mono); white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 0; font: 800 15px/18px var(--mono); flex: 1 1 0; min-width: 0; white-space: nowrap; }
.btn.blue { background: var(--blue); color: #fff; }
.btn.red { background: var(--red); color: #fff; flex: none; width: 100%; }
.btn.soft { background: var(--soft); color: var(--ink); }
.btn .sub { font: 500 12px/16px var(--mono); color: #FFFFFFD1; }
.btn:disabled { opacity: .55; cursor: default; }
.btnrow { display: flex; gap: 10px; }
.stamp.small { width: 48px; height: 48px; }
#flareStamp, #mStamp { width: 64px; height: 64px; }
.oophead { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; }
#oop .oophead { align-items: center; gap: 8px; }
#oop .oophead .x { margin: -6px -6px -6px 0; flex-shrink: 0; }
.oophead .title { font: 800 17px/20px var(--mono); }
.freecard { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 0; box-shadow: inset 0 0 0 1px var(--stroke); }
.freetext { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.freetop { display: flex; align-items: baseline; gap: 8px; }
.free { font-size: 11px; font-weight: 600; color: var(--blue); letter-spacing: .06em; }
.plus { font: 900 17px/20px var(--mono); letter-spacing: 0; }
.freetext .h { font: 700 14px/18px var(--mono); }
.freetext .body { font-size: 12px; line-height: 16px; }
.btn.post { flex: none; width: 96px; }
.ringn { display: flex; align-items: baseline; gap: 6px; }
.ringn .strong { font-size: 13px; }
.segs { display: flex; gap: 2px; }
.segs i { flex: 1 1 0; height: 8px; border-radius: 0; background: var(--line); }
.segs i.on { background: var(--blue); }

.scrim { position: absolute; inset: 0; z-index: 10; background: #11141894; display: flex; align-items: center; justify-content: center; padding: 12px; }
.sheet { width: 388px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 22px; background: #fff; border-radius: 0; box-shadow: 0 0 0 1px var(--stroke); }
#mStep1, #mStep2 { display: flex; flex-direction: column; gap: 14px; }
#mStep1[hidden], #mStep2[hidden] { display: none; }
/* while Sojo's paste sheet is open, it's the only paste screen: our box (and the Not live yet sheet) steps aside */
body.pasting #modal, body.pasting #notlive { display: none !important; }
#mStep1 > .btn, .tray > .btn { flex: none; }
.steps { display: flex; align-items: center; gap: 6px; }
.chip { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 0; background: var(--soft); }
.chip .num { width: 18px; height: 18px; border-radius: 0; background: #fff; display: flex; align-items: center; justify-content: center; font: 600 11px/14px var(--mono); color: var(--muted); }
.chip .mono { font-weight: 600; }
.chip.on { background: var(--blue); }
.chip.on .num { color: var(--blue); }
.chip.on .mono { color: #fff; }
.chip.done { background: #E8ECFD; }
.chip.done .num { background: var(--blue); color: transparent; position: relative; }
.chip.done .num::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.chip.done .mono { color: var(--blue); }
/* the chips are buttons: the current step and a step you can't reach yet stay as they look, never greyed */
button.chip:disabled { opacity: 1; color: inherit; }
button.chip:not(:disabled):not(.on):not(.done) .num { color: var(--blue); }   /* Paste, reachable again */
.steps .rule { width: 14px; height: 1.5px; background: var(--line); }
.x { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 0; }
.x:active { background: var(--soft); }
.mrow { display: flex; align-items: center; gap: 16px; }
.mtext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sheet .big { font: 900 30px/32px var(--mono); letter-spacing: 0; }
.sheet .body { font: 500 13px/18px var(--mono); color: var(--body); }
.note2 { font-size: 11px; white-space: normal; }
.note2.err { color: var(--red); }
.pasterow { display: flex; gap: 8px; }
.pasterow input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--stroke); font: 500 12px/16px var(--mono); color: var(--ink); outline: none; -webkit-user-select: text; user-select: text; }
.pasterow input:focus { box-shadow: inset 0 0 0 1.5px var(--blue); }
.pasterow input::placeholder { color: var(--muted); }
.btn.lock { flex: none; width: auto; padding: 0 16px; white-space: nowrap; }
.pasterow input[hidden] + .btn.lock { flex: 1; }   /* Sojo's paste sheet takes the link: the button fills the row */
.nlhead { display: flex; align-items: center; gap: 10px; }
.nlhead .draftmark { width: 14px; height: 14px; outline-width: 1.5px; }
#notlive .sheet > .body { padding: 0 2px; }
body.notlive #dock, body.notlive #hint { display: none !important; }

.panel { position: absolute; inset: 0; z-index: 9; background: #fff; display: flex; flex-direction: column; gap: 14px; padding: 20px; overflow-y: auto; -webkit-user-select: text; user-select: text; }
.panel .px { position: absolute; right: 14px; top: 14px; }
.phead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 36px; }
.ptitle { font: 900 30px/32px var(--mono); letter-spacing: 0; }
.panel > .body { font: 500 13px/18px var(--mono); color: var(--body); margin-top: -10px; }
.rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.brow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; width: 100%; }
.brow[data-url] { cursor: pointer; }
.brow .rk { width: 16px; font: 600 13px/16px var(--mono); color: var(--muted); flex-shrink: 0; }
.brow .rk.first { color: var(--blue); }
.brow .av { width: 40px; height: 40px; border-radius: 0; }
.brow .bt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.brow .bh { font: 700 14px/18px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .btx { font: 500 13px/17px var(--mono); color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .bn { width: 84px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.brow .bn .mono { font-size: 13px; font-weight: 600; color: var(--ink); }
.bar { width: 84px; height: 4px; border-radius: 0; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 4px; border-radius: 0; background: #9AA0A8; }
.brow .rk.first ~ .bn .bar i { background: var(--blue); }
.brow .ext { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }
.brow.me .bh::after { content: var(--you, "you"); margin-left: 8px; font: 500 12px/16px var(--mono); color: var(--muted); }
.empty { padding: 18px 0; font: 500 13px/18px var(--mono); color: var(--muted); }
.youline { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 0; background: var(--soft); font: 500 13px/18px var(--mono); text-align: left; }
.youline b { font-weight: 700; }
.av.small { width: 24px; height: 24px; border-radius: 0; }
.hero { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.herostamp { width: 96px; height: 96px; border-radius: 0; flex-shrink: 0; image-rendering: pixelated; background: var(--soft); }
.herotext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.heron { font: 900 64px/64px var(--mono); letter-spacing: 0; }
.stats { display: flex; gap: 16px; }
.stat { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sn { font: 900 22px/26px var(--mono); letter-spacing: 0; }
.stat .mono { font-size: 11px; }
.mono.wrap { white-space: normal; }
a.brow { color: inherit; text-decoration: none; }
body.modal-open .map { display: none; }

/* --- gems (Paper page Money): tray refill, Out of paint paid cards, paid px on the wall, Royal marks --- */
:root { --gilt: #F7C948; --gilt-chip: #FFE07A; --gilt-line: #9A6E0A; --gilt-soft: #FFF6D6; --gilt-metal: linear-gradient(135deg, #FFF1B8, #F7C948 55%, #C9961A); }
.gem { flex-shrink: 0; display: block; }
.refill { height: 32px; padding: 0 11px; border-radius: 0; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 5px; font: 800 13px/16px var(--mono); flex-shrink: 0; white-space: nowrap; }
.refill.busy, .btn.ink.busy { opacity: .6; cursor: default; pointer-events: none; }
.strip.tight { gap: 5px; }
.strip.tight .sq { width: 30px; }
.btn.ink { background: var(--ink); color: #fff; flex: none; }
.btn.ink.sm { height: 32px; border-radius: 0; padding: 0 14px; font-size: 13px; line-height: 16px; }
.oopcards { display: flex; gap: 10px; }
.oopcard { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 0; }
.oopcard.free { box-shadow: inset 0 0 0 1px var(--stroke); }
.oopcard.gold { background: var(--gilt-soft); box-shadow: inset 0 0 0 1px var(--gilt); }
.oopcard .btn { flex: none; width: 100%; margin-top: auto; } /* the two cards bottom-align their buttons */
.oopc-top { display: flex; align-items: center; gap: 12px; }
.oopc-n { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.oopc-n .plus { font: 900 22px/24px var(--mono); }
.oopc-t { display: flex; flex-direction: column; gap: 2px; }
.oopc-t .h { font: 800 14px/18px var(--mono); }
.oopc-t .body { font-size: 13px; line-height: 18px; }
.chipg { padding: 0 5px; border-radius: 0; background: var(--gilt-chip); box-shadow: inset 0 0 0 1px #9A6E0A80; font: 600 11px/14px var(--mono); letter-spacing: .06em; color: var(--ink); }
.giltstamp { padding: 3px; border-radius: 0; background: var(--gilt-metal); box-shadow: inset 0 0 0 1px #9A6E0A99, 0 0 0 1px #fff, 0 0 0 1px var(--stroke); transform: rotate(4deg); flex-shrink: 0; }
.giltstamp .gs { display: block; width: 48px; height: 48px; box-shadow: 0 0 0 1px #fff; image-rendering: pixelated; background: #fff; }
.packrow { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 0; background: var(--soft); font: 700 13px/18px var(--mono); }
.packrow b { font-weight: 700; white-space: nowrap; }
.packrow .mono { overflow: hidden; text-overflow: ellipsis; }
.stampwrap { flex-shrink: 0; }
.stampwrap.gilt { padding: 3px; border-radius: 0; background: var(--gilt-metal); box-shadow: inset 0 0 0 1px #9A6E0A99, 0 0 0 1px #fff, 0 0 0 1px var(--stroke); transform: rotate(4deg); }
.stampwrap.gilt .stamp { width: 48px; height: 48px; transform: none; box-shadow: 0 0 0 1px #fff; display: block; }
.dot.gray { background: var(--muted); box-shadow: 0 0 0 3px #6B70792E; }
.hrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.royal { flex-shrink: 0; padding: 1px 5px; border-radius: 0; background: var(--blue); color: #fff; font: 600 10px/14px var(--mono); letter-spacing: .08em; }
.brow .bh .royal { display: inline-block; margin-left: 6px; vertical-align: 1px; }
.av.ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gilt); }
@media (max-width: 430px) { .packrow .mono { display: none; } }

/* --- Sojo Ads: the sponsor layer (Money, Sponsored plot,, tap) --- */
.dot.gilt { background: var(--gilt); box-shadow: 0 0 0 3px #F7C9483D; }
.adchips { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* a Sponsored chip over the reticle's square dims, so the square shows through */
#adChips .adchip { transition: opacity .12s; }
#adChips .adchip.dim { opacity: .2; }
.adchip { position: absolute; transform: translateX(-50%); padding: 4px 10px; border-radius: 0; background: var(--gilt-chip); box-shadow: inset 0 0 0 1px #9A6E0A8C, 0 0 0 2px #fff, 0 0 0 1px var(--stroke); font: 600 12px/16px var(--mono); color: var(--ink); white-space: nowrap; }
.adact { position: absolute; z-index: 4; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.adact .adchip { position: static; transform: none; padding: 6px 10px; }
.adlink { display: flex; align-items: center; gap: 6px; max-width: min(320px, calc(100vw - 72px)); text-decoration: none; cursor: default; pointer-events: auto; }
.adlink.go { cursor: pointer; }
.adlink b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.adlink span { font-weight: 500; color: var(--body); overflow: hidden; text-overflow: ellipsis; }
.adlink svg { flex-shrink: 0; }
.adflag { width: 28px; height: 28px; border-radius: 0; background: #fff; box-shadow: var(--edge); display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; flex-shrink: 0; }

/* --- shields (Money, Place shields, Shield log) --- */
.shchips { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lvchip { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 0; color: #fff; font: 600 11px/14px var(--mono); letter-spacing: .04em; flex-shrink: 0; }
.lvchip.big { position: absolute; transform: translate(-50%, -50%); height: auto; padding: 5px 12px; border-radius: 0; letter-spacing: .08em; box-shadow: 0 0 0 2.5px #fff, 0 0 0 1px var(--stroke); pointer-events: auto; cursor: pointer; }
.hitchip { position: absolute; z-index: 2; padding: 4px 9px; border-radius: 0; background: var(--red); color: #fff; font: 600 12px/16px var(--mono); white-space: nowrap; box-shadow: 0 0 0 2px #fff, 0 0 0 1px var(--stroke); pointer-events: none; }
.pill.status.tap { pointer-events: auto; cursor: pointer; }
.shhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; }
.shtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 0; }
#shieldSheet .shhead .x { margin: -6px -6px 0 -4px; align-self: flex-start; flex-shrink: 0; }
.shsize { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; padding: 0 2px; margin-top: -2px; }
.shsize .strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.shhead .title { font: 800 17px/20px var(--mono); }
.stepper { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 0; box-shadow: inset 0 0 0 1px var(--stroke); flex-shrink: 0; }
.stepper button { width: 34px; height: 34px; border-radius: 0; background: var(--soft); font: 800 16px/18px var(--mono); }
.stepper button:disabled { opacity: .35; }
.stn { width: 32px; text-align: center; font: 900 20px/24px var(--mono); }
.shlevel { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 0; background: var(--soft); }
.shrow { display: flex; align-items: baseline; justify-content: space-between; }
.shrow b { font: 800 15px/18px var(--mono); }
.mono.small { font-size: 11px; line-height: 14px; }
.pips { display: flex; gap: 4px; }
.pips i { flex: 1 1 0; height: 8px; border-radius: 0; background: var(--line); }
.pips i.on { background: var(--blue); }
#shBuy { width: 100%; }
#shBuy:disabled { opacity: .45; cursor: default; }
#shGem { display: flex; }
.slcols { display: flex; gap: 10px; padding: 0 2px; }
.slcols .mono { font-size: 11px; letter-spacing: .04em; }
.slrows { display: flex; flex-direction: column; }
.slrow { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--line); }
.slh { font: 700 14px/18px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.slat { width: 82px; text-align: right; }
.slleft { width: 48px; text-align: right; }

/* --- Since this post (Player, Since this post) --- */
.postmark { position: absolute; z-index: 2; width: 104px; height: 104px; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 5px #fff, inset 0 0 0 6.5px var(--ink), 0 0 0 1px var(--stroke); transform: rotate(-12deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: none; color: var(--ink); }
.pm1 { font: 600 10px/12px var(--mono); letter-spacing: .08em; }
.pm2 { font: 900 22px/24px var(--mono); letter-spacing: 0; }
.pm3 { font: 600 10px/12px var(--mono); }
.sincerow { display: flex; align-items: center; gap: 14px; }
.playbtn { width: 40px; height: 40px; border-radius: 0; background: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.playbtn .pa, .playbtn.on .pl { display: none; }
.playbtn.on .pa { display: block; }
.scrub { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.track { position: relative; height: 22px; }
.track::before { content: ""; position: absolute; left: 8px; right: 8px; top: 10px; height: 2px; background: var(--line); }
.ticks { position: absolute; left: 8px; right: 8px; top: 6px; height: 10px; pointer-events: none; }
.ticks i { position: absolute; top: 0; width: 1.5px; height: 10px; background: #B8BDC4; transform: translateX(-50%); }
.track input { position: absolute; inset: 0; width: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.track input::-webkit-slider-runnable-track { height: 22px; background: transparent; }
.track input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 3px var(--blue); }
.track input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 3px var(--blue); }
.scrubl { display: flex; justify-content: space-between; }
.scrubl .mono { font-size: 11px; }


/* --- the rundown after Done or a paste-back (no Paper board yet; built from the leaderboard 2XY-0 and the trays) --- */
.panel.rd { gap: 12px; padding: 18px 20px 16px; overflow: hidden; -webkit-user-select: none; user-select: none; }
.panel.rd .px { z-index: 2; }
.rdscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin: 0 -4px; padding: 0 4px 2px; }
.rdhead { display: flex; align-items: center; gap: 16px; padding: 2px 40px 0 2px; }
.rdstamp .stamp { width: 56px; height: 56px; }
.rdstamp.gilt .stamp { width: 48px; height: 48px; }
.rdtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rdkick { font-weight: 600; color: var(--blue); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.rdkick.gilt { color: var(--gilt-line); }
.rdbig { font: 900 30px/32px var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.rdtext .body { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdlabel { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 6px; }
.rdlabel > .mono.strong { font-size: 12px; }
.rdlink { font: 600 12px/16px var(--mono); color: var(--blue); }
.rdrows { position: relative; display: flex; flex-direction: column; border-top: 1px solid var(--line); overflow: hidden; }
.rdrow { position: relative; display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px 0 4px; border-bottom: 1px solid var(--line); background: #fff; }
.rdrow .rk { width: 30px; font: 600 12px/16px var(--mono); color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.rdrow .av { width: 22px; height: 22px; border-radius: 0; }
.rdrow .av.ring { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--gilt); }
.rdrow .bh { font: 700 13px/16px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.rdrow .bh .royal { display: inline-block; margin-left: 6px; vertical-align: 1px; }
.rdrow .rn { font: 600 12px/16px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.rdrow.me { z-index: 1; background: #EEF1FD; border-radius: 0; border-bottom-color: transparent; box-shadow: inset 0 0 0 1.5px var(--blue); }
.rdrow.me .rk { color: var(--blue); }
.rdrow.me .bh::after { content: var(--you, "you"); margin-left: 8px; font: 500 12px/16px var(--mono); color: var(--muted); }
.rdrow.stand { background: #fff; box-shadow: none; outline: 1.5px dashed var(--ink); outline-offset: -2px; }
.rdrow.stand .rk, .rdrow.stand .rn { color: var(--muted); }
.rdnote { padding: 0 2px; font-size: 12px; line-height: 16px; }
.rdnote b { color: var(--ink); font-weight: 700; }
#rd4 { flex: none; }
#rdPost:disabled { opacity: .6; cursor: default; }
.rdstep.pending { opacity: 0; }
.segs i.pop { background: var(--blue); }
.rdland { flex-shrink: 0; }

.rdposted { flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 44px; font: 600 13px/16px var(--mono); color: var(--muted); }
.rdfoot { flex: none; display: flex; flex-direction: column; gap: 10px; } /* note + the wall grows, pinned above the buttons */
.rdnote:empty { display: none; }
/* Royal on Out of paint: the upsell (gilt Join Royal), or the perks for Royal players */
.royalrow { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: var(--gilt-soft); box-shadow: inset 0 0 0 1px var(--gilt); }
.rytext { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ryhead { display: flex; align-items: center; gap: 8px; }
.royalrow .body { font-size: 12px; line-height: 16px; }
.btn.gilt { flex: none; background: var(--gilt); color: var(--ink); box-shadow: inset 0 0 0 1px #9A6E0A99; }
.btn.gilt.sm { height: 32px; padding: 0 14px; font-size: 13px; line-height: 16px; }
.btn.gilt:disabled { opacity: .6; cursor: default; }
.oopc-n .plus { white-space: nowrap; }
@media (max-width: 430px) { .oopc-n .plus { font-size: 18px; line-height: 22px; } .oopc-top { gap: 10px; } }
/* the Han font by language (lang.ts sets data-han from the language, else the browser's CJK language, else the country) */
html[data-han="ja"] { --han: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP"; }
html[data-han="sc"] { --han: "PingFang SC", "Microsoft YaHei", "Noto Sans SC"; }
html[data-han="tc"] { --han: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC"; }
#coords { unicode-bidi: isolate; }
/* languages: handles read left to right in any language; Arabic mirrors the chrome, never the wall */
.bh, .slh, .xh-h, #youN, #bH { unicode-bidi: plaintext; }
.brand, .logo { direction: ltr; }
[dir="rtl"] .panel .px { right: auto; left: 14px; }
[dir="rtl"] .phead { padding-right: 0; padding-left: 36px; }
[dir="rtl"] .rdhead { padding: 2px 2px 0 40px; }
[dir="rtl"] .brow, [dir="rtl"] .youline { text-align: right; }
/* long languages (es, fr, de, it, pt, id) at 480 tall: the dock never reaches the top pills; Out of paint scrolls instead */
.dock { max-height: calc(100% - 68px); display: flex; flex-direction: column; justify-content: flex-end; }
.dock > .tray { min-height: 0; overflow-y: auto; }
@media (max-height: 520px) { #oop { gap: 10px; padding: 12px; } #oop .oopcard { gap: 8px; padding: 10px; } #oop .royalrow .body { font-size: 11px; line-height: 14px; } }
/* longer languages: the guest note wraps instead of clipping; the count gives way before Done */
.note { white-space: normal; align-items: flex-start; }
.note span { overflow: visible; text-overflow: clip; min-width: 0; }
.note b, .note .draftmark { flex-shrink: 0; white-space: nowrap; }   /* only the sentence wraps, never "Paint now" */
.strip .count { min-width: 0; flex-shrink: 1; }
.strip #ofcap { white-space: normal; }
.done { white-space: nowrap; }
/* top-left: the brand pill, then the crown (Royal upsell, hidden for Royal). The pill keeps its own width, so the gap
   follows it as the coordinates change. LTR in every language, like the wall: the crown stays right of the pill. */
.topl { position: absolute; z-index: 6; left: 12px; top: 12px; display: flex; align-items: stretch; gap: 6px; direction: ltr; pointer-events: none; }
.topl .pill { position: static; }
.crownbtn { width: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: var(--edge); pointer-events: auto; }
.crownbtn:active { background: var(--gilt-soft); }
/* Sponsor: Sojo's ad flow in a new tab (a plain link, so it opens from inside an X post too) */
.sponsorbtn { flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #fff; box-shadow: var(--edge); pointer-events: auto; font: 600 12px/16px var(--mono); color: var(--ink); text-decoration: none; white-space: nowrap; }
.sponsorbtn:active { background: var(--soft); }
.crown { display: block; flex-shrink: 0; image-rendering: pixelated; }
.topl.nocoords .vr, .topl.nocoords #coords { display: none; }
/* the Royal sheet: the crown from anywhere; the Out of paint Royal row, then the gilt Join Royal */
.rshead { display: flex; align-items: center; gap: 12px; }
.rysheet .royalrow { padding: 12px; }
.rysheet .royalrow .body { font-size: 13px; line-height: 18px; }
.rysheet > .btn.gilt { width: 100%; }
/* --- polish pass (2026-10-23) --- */
/* Korean and CJK: break between words, never inside one (Korean wrapped mid-word: 시작돼/요) */
html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }
/* the tray count stays on one line in every language ("0 / 10 남음" wrapped onto two lines) */
.strip #ofcap, .strip .count { white-space: nowrap; }
/* when the strip doesn't fit on one line (measured in app.ts fitStrip, any language, any width): the count and the
   tools stay on the first row; Paste PFP, the refill and Done share a second row, instead of squeezing "of 10 left" */
.strip .brk { display: none; }
.strip.two { flex-wrap: wrap; row-gap: 6px; gap: 6px; padding: 0 2px 0 4px; }
.strip.two .sq { width: 32px; }
.strip.two .count { gap: 6px; flex-shrink: 0; }
.strip.two .brk { display: block; order: 1; flex: 0 0 100%; height: 0; }
.strip.two .pfpbtn, .strip.two .refill, .strip.two .done { order: 2; flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 12px; gap: 5px; }
/* gem prices read left to right in Arabic too (+10 px [gem] 10 came out as px 10+) */
.refill, .btn.ink:has(.gem) { direction: ltr; unicode-bidi: isolate; }
#shBuy { direction: inherit; }
#saYes { direction: inherit; }
/* Paste PFP: the tray button, the template row, the preview sheet */
.pfpbtn { height: 32px; padding: 0 12px; background: var(--soft); color: var(--ink); font: 800 13px/16px var(--mono); flex-shrink: 0; white-space: nowrap; display: flex; align-items: center; justify-content: center; }
.pfpbtn:active { background: #E8EAED; }
.tplrow { display: flex; align-items: center; gap: 6px; padding: 0 2px 0 4px; }
.tplthumb { width: 34px; height: 34px; flex-shrink: 0; image-rendering: pixelated; background: #fff; box-shadow: 0 0 0 1px var(--stroke); }
.tpltext { display: flex; flex-direction: column; gap: 1px; flex: 1 1 0; min-width: 0; margin-left: 4px; }
.tpltext .mono { white-space: normal; }
#tplRound { font-size: 11px; line-height: 14px; }
.tpltext .strong { font-variant-numeric: tabular-nums; }
.tplfill { height: 32px; padding: 0 14px; background: var(--ink); color: #fff; font: 800 13px/16px var(--mono); flex-shrink: 0; white-space: nowrap; }
.tplfill:disabled { opacity: .35; cursor: default; }
.pfpsub { padding: 0 2px; margin-top: -3px; }
#pfpSheet .oophead { align-items: center; gap: 8px; }
.lined { font: 800 11px/14px var(--mono); color: var(--blue); padding: 2px 6px; box-shadow: inset 0 0 0 1px var(--blue); white-space: nowrap; flex-shrink: 0; }
.seg { display: flex; gap: 0; box-shadow: inset 0 0 0 1px var(--stroke); }
.seg button { flex: 1 1 0; height: 34px; font: 700 13px/16px var(--mono); color: var(--body); font-variant-numeric: tabular-nums; }
.seg button + button { box-shadow: inset 1px 0 0 var(--stroke); }
.seg button.on { background: var(--blue); color: #fff; box-shadow: none; }
#pfpSheet .btnrow .btn, .asksheet .btnrow .btn { flex: 1 1 0; }
#pfpPlace:disabled { opacity: .45; cursor: default; }
/* the shield step after Done: smaller title than the Post modal (it's a question, not a step) */
.asksheet .big { font: 800 20px/24px var(--mono); }
.askicon { flex-shrink: 0; display: block; }
#saGem { display: flex; }
/* the pixel shop: one ladder, in the tray popover (above Buy pixels) and on Out of paint */
#refillBtn { direction: inherit; unicode-bidi: normal; }
.shop { position: fixed; z-index: 8; background: #fff; box-shadow: var(--edge); padding: 6px; }
.shoprows { display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px var(--stroke); }
.shop .shoprows { box-shadow: none; }
.shoprow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 8px 6px 12px; text-align: start; }
.shoprow + .shoprow { box-shadow: inset 0 1px 0 var(--stroke); }
.shoprow.best { background: var(--gilt-soft); box-shadow: inset 0 0 0 1px var(--gilt); }
.shoprow:disabled { opacity: .55; cursor: default; }
.sr-l { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-top { display: flex; align-items: center; gap: 8px; }
.sr-px { font: 900 17px/20px var(--mono); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.sr-chip { padding: 0 5px; background: var(--blue); color: #fff; font: 700 11px/16px var(--mono); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.shoprow.best .sr-chip { background: var(--gilt-chip); color: var(--ink); box-shadow: inset 0 0 0 1px #9A6E0A80; }
.sr-best { font: 800 11px/14px var(--mono); color: var(--gilt-line); }
.sr-price { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; background: var(--ink); color: #fff; font: 800 13px/16px var(--mono); flex-shrink: 0; direction: ltr; unicode-bidi: isolate; }
/* Out of paint: the free Post to refill card, then the ladder */
.freecard2 { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; box-shadow: inset 0 0 0 1px var(--stroke); }
.fc-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fc-n { display: flex; align-items: baseline; gap: 8px; }
.fc-n b { font: 900 17px/20px var(--mono); white-space: nowrap; }
.fcfree { color: var(--blue); font-weight: 800; font-size: 11px; letter-spacing: .06em; }
.fc-t .h { font: 800 13px/16px var(--mono); }
.fc-t .body { font-size: 12px; line-height: 16px; }
#oopPost { flex: none; height: 36px; padding: 0 16px; font-size: 14px; }
/* Out of paint, collapsed: a slim bar above the palette; a tap expands it again */
.oopbar { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 12px; background: var(--soft); font: 800 13px/16px var(--mono); text-align: start; }
.oopbar .mono { color: var(--muted); font-weight: 600; white-space: nowrap; }