/* homehub.css - the home screen of the single-player page (homehub.js): the approved design (owner, 2026-10-31), every
   rule scoped to #poc-hub so nothing reaches the game's own page layers. The part after "the page around it" is what
   the real page needs beyond the design: its place over the game, safe areas, touch sizes, the states real data has. */
@font-face { font-family: Souvenir; src: url(fonts/Souvenir-Bold.woff2) format('woff2'); font-weight: 700 900; font-display: swap; }
@font-face { font-family: Archivo; src: url(fonts/Archivo.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
#poc-hub {   /* (the colours and easing: hubkit.js TOKENS, set by kit()) */
    --side-w: 380px;
    color-scheme: dark;
  }
#poc-hub * { box-sizing: border-box; }
#poc-hub { background: var(--night); color: var(--text); font: 500 15px/1.4 Archivo, system-ui, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; }
#poc-hub ::selection { background: var(--ember); color: var(--ember-ink); }
#poc-hub button, #poc-hub input { font: inherit; color: inherit; }
#poc-hub button { cursor: pointer; }
#poc-hub svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#poc-hub :focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
#poc-hub .pfp { display: block; object-fit: cover; background: #2a2050; }
#poc-hub { position: fixed; inset: 0; z-index: 19; overflow: hidden; isolation: isolate; }
#poc-hub[hidden] { display: none; }
/* the stage: the title art, shaded behind the menu */
#poc-hub .stage { position: absolute; inset: 0 var(--side-w) 0 0; z-index: -1; background: var(--hub-art) 50% 30% / cover no-repeat; animation: hub-drift 40s var(--ease) both; transition: filter .6s var(--ease), transform .6s var(--ease); }
#poc-hub .stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(38% 54% at 50% 54%, #140f26d9 0%, #140f2600 100%), linear-gradient(0deg, #140f26b3 0%, #140f2600 30%); }
@keyframes hub-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
/* the icon row, top right of the stage */
#poc-hub .icons { position: absolute; right: calc(var(--side-w) + 16px); top: 20px; display: flex; gap: 4px; }
#poc-hub .icon { position: relative; display: grid; justify-items: center; gap: 6px; min-width: 76px; padding: 10px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 12px; font-weight: 600; transition: background-color .2s, transform .3s var(--ease); }
#poc-hub .icon svg { width: 26px; height: 26px; transition: transform .35s var(--ease); }
#poc-hub .icon:hover { background: #ffffff12; }
#poc-hub .icon:hover svg { transform: translateY(-2px); }
#poc-hub .icon[disabled] { opacity: .45; cursor: default; background: none; }
#poc-hub .icon[disabled] svg { transform: none; }
#poc-hub #mute .off, #poc-hub #mute[aria-pressed="true"] .on { display: none; }
#poc-hub #mute[aria-pressed="true"] .off { display: inline; }
/* the menu: buttons on dark bands that fade out at both ends, hairlines above and below; ember on the selected one.
     The two modes lead with their subtitle inside; each opens its own set (a second level), Back returns */
#poc-hub .menu { position: absolute; left: 0; right: var(--side-w); top: 62%; translate: 0 -46%; display: grid; justify-items: center; }
#poc-hub .set { display: grid; justify-items: center; gap: 8px; }
#poc-hub .set[hidden] { display: none; }
#poc-hub .item { --i: 0; position: relative; display: grid; place-items: center; width: min(480px, 40vw); min-height: 60px; padding: 10px 52px; border: 0; color: #ffffffd0; background: linear-gradient(90deg, #120c2200, #120c22c7 20%, #120c22c7 80%, #120c2200); animation: hub-rise .6s var(--ease) both; animation-delay: calc(var(--i) * 55ms + 80ms); transition: color .25s; }
#poc-hub .item::before, #poc-hub .item::after { content: ""; position: absolute; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, #ffffff00, #ffffff38, #ffffff00); transition: left .45s var(--ease), right .45s var(--ease), background-color .3s; }
#poc-hub .item::before { top: 0; }
#poc-hub .item::after { bottom: 0; }
#poc-hub .word { position: relative; display: block; white-space: nowrap; font: 700 27px/1 Souvenir, Georgia, serif; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 2px 14px #000c; transition: transform .45s var(--ease); }
#poc-hub .item.duel { width: min(580px, 46vw); min-height: 80px; }
#poc-hub .item.duel .word { font-size: 44px; font-weight: 900; }
#poc-hub .item.duel + .item:not(.duel) { margin-top: 12px; }
#poc-hub .item.back { width: min(300px, 30vw); min-height: 46px; margin-top: 12px; color: var(--muted); background: linear-gradient(90deg, #120c2200, #120c2299 25%, #120c2299 75%, #120c2200); }
#poc-hub .item.back .word { font-size: 18px; }
#poc-hub .item[disabled] { cursor: default; color: #ffffff66; }
#poc-hub .soon { position: absolute; left: calc(100% + 10px); top: 50%; translate: 0 -50%; padding: 3px 7px; border-radius: 5px; background: #ffffff14; color: #ffffffa6; font: 700 11px/1 Archivo, system-ui, sans-serif; font-style: normal; letter-spacing: .08em; }
#poc-hub .item .word::before, #poc-hub .item .word::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--ember); rotate: 45deg; scale: 0; transition: scale .35s var(--ease), translate .45s var(--ease); }
#poc-hub .item .word::before { left: -28px; translate: 8px 0; }
#poc-hub .item .word::after { right: -28px; translate: -8px 0; }
#poc-hub .item:not([disabled]):is(:hover, :focus-visible, .on) { color: #fff; outline: none; background: radial-gradient(46% 130% at 50% 50%, #ffb5472b, #ffb54700 72%), linear-gradient(90deg, #1a123000, #1a1230e6 18%, #1a1230e6 82%, #1a123000); }
#poc-hub .item:not([disabled]):is(:hover, :focus-visible, .on)::before, #poc-hub .item:not([disabled]):is(:hover, :focus-visible, .on)::after { left: 0; right: 0; background: linear-gradient(90deg, #ffb54700, var(--ember), #ffb54700); }
#poc-hub .item:not([disabled]):is(:hover, :focus-visible, .on) .word { transform: scale(1.03); }
#poc-hub .item:not([disabled]):is(:hover, :focus-visible, .on) .word::before, #poc-hub .item:not([disabled]):is(:hover, :focus-visible, .on) .word::after { scale: 1; translate: 0 0; }
#poc-hub .item:focus-visible { outline: none; }
#poc-hub .item:not([disabled]):active .word { transform: scale(.98); }
@keyframes hub-rise { from { opacity: 0; transform: translateY(14px); } }
/* the pick beat: the chosen button flashes ember and holds, the rest fall away, the stage dims */
#poc-hub.going .item:not(.picked) { opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .4s var(--ease); }
#poc-hub.going .item.picked { color: var(--ember); }
#poc-hub.going .item.picked .word { transform: scale(1.1); }
#poc-hub.going .stage { filter: brightness(.45) saturate(.8); transform: scale(1.04); }
/* the sidebar */
#poc-hub .side { position: absolute; top: 0; right: 0; bottom: 0; width: var(--side-w); display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: linear-gradient(180deg, #1c1534, #120d22); box-shadow: inset 1px 0 0 #ffffff17, -24px 0 48px -24px #000c; animation: hub-bar-in .7s var(--ease) both .15s; }
@keyframes hub-bar-in { from { transform: translateX(32px); opacity: 0; } }
#poc-hub .title { margin: 0; font: 700 16px/1 Archivo, system-ui, sans-serif; letter-spacing: .01em; }
#poc-hub .me { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 2px 14px; padding: 20px; border-bottom: 1px solid var(--line); }
#poc-hub .me { grid-template-columns: 56px 1fr auto; }
#poc-hub .me-pic { position: relative; grid-row: span 2; }
#poc-hub .me .pfp { width: 56px; height: 56px; border-radius: 10px; box-shadow: 0 0 0 1px var(--edge), 0 6px 14px -6px #000; }
#poc-hub .live { display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--ok); vertical-align: middle; }
#poc-hub .gear { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--muted); transition: background-color .2s, color .2s; }
#poc-hub .gear:hover { background: #ffffff0f; color: var(--text); }
#poc-hub .gear svg { width: 20px; height: 20px; transition: transform .6s var(--ease); }
#poc-hub .gear:hover svg { transform: rotate(60deg); }
#poc-hub .me .name, #poc-hub .me .meta { grid-column: 2; }
#poc-hub .me .name { font: 700 19px Archivo, system-ui, sans-serif; }
#poc-hub .staff-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; background: var(--ember-soft); color: var(--ember); font: 700 10px/1.4 Archivo, system-ui, sans-serif; white-space: nowrap; vertical-align: middle; }
#poc-hub .me .meta { color: var(--muted); font-size: 13px; }
#poc-hub .me .meta b { color: var(--ember); font-variant-numeric: tabular-nums; }
#poc-hub .login { grid-column: 1 / -1; height: 44px; margin-top: 14px; border: 0; border-radius: 8px; background: var(--ember); color: var(--ember-ink); font-weight: 700; transition: background-color .2s, transform .2s var(--ease); }
#poc-hub .login:hover { background: #ffc871; }
#poc-hub .login:active { transform: scale(.98); }
#poc-hub .online { border-bottom: 1px solid var(--line); }
#poc-hub .fold { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 0 20px; border: 0; background: none; text-align: left; transition: background-color .2s; }
#poc-hub .fold:hover { background: #ffffff08; }
#poc-hub .faces { display: flex; margin-left: auto; }
#poc-hub .faces .pfp { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px #1b1432; }
#poc-hub .faces .pfp + .pfp { margin-left: -6px; }
#poc-hub .count { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: #1f4a2c; color: var(--ok); font-size: 12px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
#poc-hub .fold > svg { width: 16px; height: 16px; color: var(--dim); transition: transform .3s var(--ease); }
#poc-hub .fold[aria-expanded="true"] > svg { transform: rotate(180deg); }
#poc-hub .players { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; grid-template-columns: 44px minmax(0, 1fr) max-content max-content; gap: 2px 12px; }
#poc-hub .players[hidden] { display: none; }
/* One rating column across online/recent rows, even when only one player offers Rematch. */
#poc-hub .players li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; gap: 12px; min-height: 52px; padding: 0 8px; border-radius: 8px; transition: background-color .2s; }
#poc-hub .players li:hover, #poc-hub .players li:focus-within { background: #ffffff0a; }
#poc-hub .players .pfp { width: 36px; height: 36px; border-radius: 8px; }
#poc-hub .players .who { display: grid; min-width: 0; }
#poc-hub .players .who > [data-user] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#poc-hub .players .rating { text-align: end; }
#poc-hub .players .who small { color: var(--dim); font-size: 12px; }
#poc-hub .players .sub { display: block; min-height: 0; padding: 12px 8px 4px; color: var(--dim); font-size: 12px; font-weight: 700; }
#poc-hub .players .sub:hover { background: none; }
#poc-hub .players .past .pfp { filter: grayscale(.5); opacity: .8; }
#poc-hub .rating { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
#poc-hub .invite { min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--ember-soft); color: var(--ember); font-size: 12px; font-weight: 700; opacity: 0; transition: opacity .2s, background-color .2s; }
#poc-hub .players li:hover .invite, #poc-hub .players li:focus-within .invite { opacity: 1; }
#poc-hub .invite:hover { background: #ffb54740; }
@media (hover: none) {
#poc-hub .invite { opacity: 1; }
}
/* chat: the game's own voice, portraits from the duelists, duel news inline */
#poc-hub .chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
#poc-hub .chat-top { display: flex; align-items: center; gap: 16px; padding: 18px 20px 10px; }
#poc-hub .tabs { display: flex; gap: 14px; margin-left: auto; }
#poc-hub .tab { position: relative; padding: 6px 0; border: 0; background: none; color: var(--dim); font-size: 13px; font-weight: 700; transition: color .2s; }
#poc-hub .tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ember); transform: scaleX(0); transition: transform .35s var(--ease); }
#poc-hub .tab:hover { color: var(--text); }
#poc-hub .grow { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 7px; background: none; color: var(--dim); transition: background-color .2s, color .2s; }
#poc-hub .grow:hover { background: #ffffff0f; color: var(--text); }
#poc-hub .grow svg { width: 18px; height: 18px; }
#poc-hub .grow .down, #poc-hub .side.big .grow .up { display: none; }
#poc-hub .side.big .grow .down { display: inline; }
#poc-hub .side.big .me, #poc-hub .side.big .online { display: none; }
#poc-hub .side.big { grid-template-rows: minmax(0, 1fr); }
#poc-hub .tab[aria-selected="true"] { color: var(--text); }
#poc-hub .tab[aria-selected="true"]::after { transform: scaleX(1); }
#poc-hub .lines { overflow: auto; display: flex; flex-direction: column; padding: 4px 8px 12px; scrollbar-width: thin; scrollbar-color: #ffffff26 transparent; }
#poc-hub .lines > :first-child { margin-top: auto; }
#poc-hub .msg { position: relative; display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; padding: 6px 12px; border-radius: 8px; transition: background-color .2s; }
#poc-hub .msg:hover { background: #ffffff08; }
#poc-hub .msg .pfp { grid-row: span 2; width: 38px; height: 38px; border-radius: 9px; box-shadow: 0 0 0 1px var(--edge); }
#poc-hub .msg b { font-size: 13px; color: #c9bfe6; }
#poc-hub .msg b, #poc-hub .msg p { grid-column: 2; }
#poc-hub .msg .pfp { grid-row: 1 / span 3; }
#poc-hub .msg p { margin: 1px 0 0; color: #e6e0f2; font-size: 14px; overflow-wrap: anywhere; }
#poc-hub .msg.more { padding-top: 0; }
#poc-hub .msg.more .pfp, #poc-hub .msg.more b { display: none; }
#poc-hub .msg.more p { grid-column: 2; }
/* the time a message was sent, small and dim on its name line (owner 2026-11-01); a follow-up line keeps none; beside the
   Reply button's place when the line has one, so it never moves */
#poc-hub .msg time { position: absolute; right: 12px; top: 8px; color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; }
#poc-hub .msg:not(.more) time { opacity: .85; }
#poc-hub .msg.me-said b { color: var(--ember); }
#poc-hub .day { display: flex; align-items: center; gap: 12px; margin: 8px 12px; color: var(--dim); font-size: 12px; }
#poc-hub .day::before, #poc-hub .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#poc-hub .news { display: flex; align-items: center; gap: 10px; margin: 6px 12px; padding: 10px 12px; border-radius: 8px; background: #ffffff06; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 13px; }
#poc-hub .news svg { flex: none; width: 18px; height: 18px; color: var(--ember); }
#poc-hub .news b { color: var(--text); font-weight: 600; }
#poc-hub .news button { margin-left: auto; padding: 4px 0; border: 0; background: none; color: var(--ember); font-size: 13px; font-weight: 700; }
#poc-hub .news button:hover { text-decoration: underline; text-underline-offset: 3px; }
#poc-hub .reply { position: absolute; right: 8px; top: 4px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; background: #241c42; box-shadow: inset 0 0 0 1px var(--edge); color: var(--muted); opacity: 0; transition: opacity .2s, color .2s; }
#poc-hub .reply svg { width: 16px; height: 16px; }
#poc-hub .reply:hover { color: var(--ember); }
#poc-hub .msg:hover .reply, #poc-hub .msg:focus-within .reply { opacity: 1; }
#poc-hub .msg:has(.reply) time { right: 46px; }   /* (a fixed place beside Reply's: nothing moves when Reply shows) */
@media (hover: none) {
#poc-hub .reply { opacity: .8; }
}
#poc-hub .msg.more .reply { top: -2px; }
#poc-hub .quote { grid-column: 2; margin: 3px 0 2px; padding: 3px 0 3px 10px; border-left: 2px solid #ffffff2e; color: var(--dim); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#poc-hub .quote b { color: var(--muted); font-size: 12px; margin-right: 4px; }
#poc-hub .replying { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; margin: 0 16px 6px; padding: 8px 8px 8px 12px; border-radius: 8px; background: #ffffff08; box-shadow: inset 2px 0 0 var(--ember); font-size: 12px; }
#poc-hub .replying[hidden] { display: none; }
#poc-hub .rp-to { color: var(--muted); }
#poc-hub .rp-to b { color: var(--text); }
#poc-hub .replying q { grid-column: 1; overflow: hidden; color: var(--dim); white-space: nowrap; text-overflow: ellipsis; quotes: none; }
#poc-hub .rp-x { grid-row: 1 / 3; grid-column: 2; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--dim); }
#poc-hub .rp-x:hover { background: #ffffff0f; color: var(--text); }
#poc-hub .rp-x svg { width: 14px; height: 14px; }
#poc-hub .pane[data-pane="global"] { grid-template-rows: minmax(0, 1fr) auto auto; }
#poc-hub .emo { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--dim); transition: color .2s, background-color .2s; }
#poc-hub .emo:hover, #poc-hub .emo[aria-expanded="true"] { color: var(--ember); background: #ffffff0a; }
#poc-hub .emo svg { width: 20px; height: 20px; }
#poc-hub .chat { position: relative; }
#poc-hub .emote { display: inline-block; width: 24px; height: 24px; margin: -4px 1px; vertical-align: middle; background: url(/emotes.webp) no-repeat; background-size: 800% 700%; background-position: calc(var(--c) * 100% / 7) calc(var(--r) * 100% / 6); }
#poc-hub .jumbo .emote { width: 48px; height: 48px; margin: 2px 2px 0 0; }
#poc-hub .pop-tabs { grid-column: 1 / -1; display: flex; gap: 14px; padding: 0 4px 6px; }
#poc-hub .emoji-pop .pop-tabs button { position: relative; width: auto; height: auto; padding: 4px 0; border-radius: 0; border: 0; background: none; color: var(--dim); font-size: 13px; font-weight: 700; transform: none; }
#poc-hub .emoji-pop .pop-tabs button:hover { background: none; color: var(--text); transform: none; }
#poc-hub .emoji-pop .pop-tabs button[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--ember); }
#poc-hub .pop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--emote-cell, 38px), 1fr)); min-width: 0; gap: 2px; max-height: 210px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #ffffff2e transparent; padding: 4px 10px 4px 4px; }
#poc-hub .pop-grid[hidden] { display: none; }
#poc-hub .pop-grid .emote { width: 30px; height: 30px; margin: 0; }
#poc-hub .emoji-pop { position: absolute; z-index: 5; right: 16px; bottom: 70px; display: grid; gap: 2px; width: min(352px, calc(100% - 32px)); padding: 8px; border-radius: 12px; background: #221a3e; box-shadow: inset 0 0 0 1px var(--edge), 0 18px 36px -12px #000; transform-origin: bottom right; animation: hub-pop .22s var(--ease) both; }
#poc-hub .emoji-pop[hidden] { display: none; }
#poc-hub .emoji-pop button { width: 38px; height: 38px; justify-self: center; border: 0; border-radius: 8px; background: none; font-size: 21px; line-height: 1; transition: background-color .15s, transform .15s var(--ease); }
#poc-hub .emoji-pop button:hover, #poc-hub .emoji-pop button:focus-visible { background: #ffffff14; transform: scale(1.15); outline: none; }
@keyframes hub-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
#poc-hub .pane { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
#poc-hub .pane[hidden] { display: none; }
#poc-hub .unread { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--alert); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: 1px; }
#poc-hub .compose { display: flex; align-items: center; gap: 8px; margin: 0 16px 16px; padding: 5px 5px 5px 14px; border-radius: 10px; background: var(--deep); box-shadow: inset 0 0 0 1px var(--edge); transition: box-shadow .2s; }
#poc-hub .compose:focus-within { box-shadow: inset 0 0 0 1px #ffb54799; }
#poc-hub .compose input { flex: 1; min-width: 0; height: 36px; border: 0; background: none; outline: none; caret-color: var(--ember); }
#poc-hub .compose input::placeholder { color: var(--dim); }
#poc-hub .send { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 8px; background: var(--ember); color: var(--ember-ink); transition: background-color .2s; }
#poc-hub .send:hover { background: #ffc871; }
#poc-hub .send svg { width: 18px; height: 18px; }
/* private messages: a list of conversations, then a thread in bubbles (theirs left, yours in ember on the right) */
#poc-hub .convos { list-style: none; margin: 0; padding: 4px 8px; overflow: auto; align-self: start; }
#poc-hub .convos button { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px; border: 0; border-radius: 8px; background: none; text-align: left; transition: background-color .2s; }
#poc-hub .convos button:hover { background: #ffffff0a; }
#poc-hub .convos .pfp { width: 40px; height: 40px; border-radius: 10px; }
#poc-hub .cv { display: grid; min-width: 0; }
#poc-hub .cv b { font-size: 14px; }
#poc-hub .cv > span { overflow: hidden; color: var(--muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
#poc-hub .cv-r { display: grid; justify-items: end; gap: 4px; }
#poc-hub .cv-r time { color: var(--dim); font-size: 11px; }
#poc-hub .empty .hint { display: inline-block; margin-top: 6px; color: var(--dim); font-size: 12px; opacity: .85; }
#poc-hub .th-top { display: grid; grid-template-columns: 36px 36px 1fr auto; align-items: center; gap: 10px; padding: 4px 16px 12px; border-bottom: 1px solid var(--line); }
#poc-hub .th-back { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--muted); }
#poc-hub .th-back:hover { background: #ffffff0f; color: var(--text); }
#poc-hub .th-back svg { width: 20px; height: 20px; }
#poc-hub .th-top .pfp { width: 36px; height: 36px; border-radius: 9px; }
#poc-hub .th-top .cv > span { display: flex; align-items: center; gap: 6px; }
#poc-hub .th-top .live { margin: 0; }
#poc-hub .invite.on-thread { opacity: 1; }
#poc-hub .thread { grid-template-rows: auto minmax(0, 1fr) auto; }
#poc-hub .bubbles { overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 10px 16px 14px; scrollbar-width: thin; scrollbar-color: #ffffff26 transparent; }
#poc-hub .bubbles > :first-child { margin-top: auto; }
#poc-hub .pane[data-pane="global"]:not([hidden]), #poc-hub .pane[data-pane="thread"]:not([hidden]) { display: flex; flex-direction: column; }
#poc-hub .lines, #poc-hub .bubbles { flex: 1 1 0; min-height: 0; overscroll-behavior: contain; overflow-anchor: none; }
#poc-hub .lines > *, #poc-hub .bubbles > * { flex-shrink: 0; }
#poc-hub .pane > :is(.compose, .replying, .say, .th-top) { flex: none; }
#poc-hub .chat-older { align-self: center; min-height: 44px; padding: 8px 16px; margin: 2px 0 10px; border: 0; border-radius: 8px; background: #ffffff08; color: var(--muted); font-size: 13px; }
#poc-hub .chat-older:hover { background: #ffffff14; color: var(--text); }
#poc-hub .bub { max-width: 78%; display: grid; }
#poc-hub .bub p { margin: 0; padding: 9px 13px; border-radius: 14px; font-size: 14px; overflow-wrap: anywhere; }
#poc-hub .bub time { margin: 3px 6px 6px; color: var(--dim); font-size: 11px; }
#poc-hub .bub.them { align-self: flex-start; }
#poc-hub .bub.them p { background: #2a2149; border-bottom-left-radius: 4px; }
#poc-hub .bub.you { align-self: flex-end; justify-items: end; }
#poc-hub .bub.you p { background: var(--ember); color: var(--ember-ink); font-weight: 600; border-bottom-right-radius: 4px; }
/* player card: click (or hover on a mouse) any player's portrait or name */
#poc-hub [data-user] { cursor: pointer; }
#poc-hub b[data-user]:hover, #poc-hub .who [data-user]:hover { text-decoration: underline; text-underline-offset: 3px; }
#poc-hub [data-user]:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 4px; }
#poc-hub .pcard { position: fixed; z-index: 6; width: 300px; padding: 18px; border-radius: 14px; background: #1f1838; box-shadow: inset 0 0 0 1px var(--edge), 0 24px 48px -16px #000; display: grid; grid-template-columns: 72px 1fr; gap: 14px; animation: hub-pop .22s var(--ease) both; }
#poc-hub .pcard[hidden] { display: none; }
#poc-hub .pc-pfp { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 1px var(--edge); }
#poc-hub .pc-head { display: grid; align-content: center; gap: 4px; }
#poc-hub .pc-name { font-size: 19px; }
#poc-hub .pc-state { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
#poc-hub .pc-state .live { margin: 0; }
#poc-hub .pcard.off .pc-state .live { background: #6b6585; }
#poc-hub .pc-stats { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#poc-hub .pc-stats dt { color: var(--dim); font-size: 12px; font-weight: 700; }
#poc-hub .pc-stats dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
#poc-hub .pc-rating { color: var(--ember); }
#poc-hub .pc-form-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--dim); font-size: 12px; font-weight: 700; }
#poc-hub .pc-form { display: flex; gap: 4px; }
#poc-hub .pc-form i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 800; font-style: normal; }
#poc-hub .pc-form .w { background: #1f4a2c; color: var(--ok); }
#poc-hub .pc-form .l { background: #4a1f24; color: #ff8a8a; }
#poc-hub .pc-games { margin-left: auto; }
#poc-hub .pc-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
#poc-hub .pc-actions button { min-height: 40px; border: 0; border-radius: 8px; background: #ffffff0f; box-shadow: inset 0 0 0 1px var(--edge); font-size: 13px; font-weight: 700; transition: background-color .2s; }
#poc-hub .pc-actions button:hover { background: #ffffff1a; }
#poc-hub .pc-actions .pc-main { background: var(--ember); color: var(--ember-ink); box-shadow: none; }
#poc-hub .pc-actions .pc-main:hover { background: #ffc871; }
@media (max-height: 520px), (max-width: 820px) {
#poc-hub .pcard { left: 0; right: 0 !important; top: auto !important; bottom: 0; width: auto; border-radius: 16px 16px 0 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}
#poc-hub .drawer-handle, #poc-hub .scrim { display: none; }
#poc-hub .game-back { display: none; }
/* phones held sideways: the stage takes the screen, the sidebar is a drawer from the right edge */
@media (max-height: 520px), (max-width: 820px) {
#poc-hub { --side-w: 0px; }
#poc-hub .icons { right: 72px; top: max(6px, env(safe-area-inset-top, 0px)); }
#poc-hub .icon { min-width: 52px; padding: 8px 4px; font-size: 0; gap: 0; }
#poc-hub .menu { top: 55%; }
#poc-hub .set { gap: 2px; }
#poc-hub .item { width: min(360px, 62vw); min-height: 44px; padding: 4px 36px; }
#poc-hub .item.duel { width: min(420px, 70vw); min-height: 52px; }
#poc-hub .word { font-size: 16px; }
#poc-hub .item.duel .word { font-size: 24px; }
#poc-hub .item.duel + .item:not(.duel), #poc-hub .item.back { margin-top: 5px; }
#poc-hub .item.back { min-height: 44px; }
#poc-hub .item.back .word { font-size: 14px; }
#poc-hub .item .word::before { left: -20px; }
#poc-hub .item .word::after { right: -20px; }
#poc-hub .side { position: fixed; z-index: 3; width: min(340px, 86vw); transform: translateX(100%); transition: transform .45s var(--ease); animation: none; }
#poc-hub.drawer .side { transform: none; }
#poc-hub .scrim { display: block; position: fixed; inset: 0; z-index: 2; background: #0009; opacity: 0; pointer-events: none; transition: opacity .3s; }
#poc-hub.drawer .scrim { opacity: 1; pointer-events: auto; }
#poc-hub .drawer-handle { display: grid; place-items: center; position: fixed; z-index: 4; right: 10px; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border: 0; border-radius: 12px; background: var(--side); box-shadow: inset 0 0 0 1px var(--edge), 0 8px 18px -6px #000; color: var(--text); }
#poc-hub .drawer-handle svg { width: 24px; height: 24px; }
#poc-hub .drawer-handle .badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--alert); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
#poc-hub.drawer .drawer-handle { right: calc(min(340px, 86vw) + 10px); }
#poc-hub .me { padding: 12px 14px; }
#poc-hub .login { display: none; }
#poc-hub .fold { min-height: 48px; padding: 0 14px; }
#poc-hub .chat-top { padding: 12px 14px 6px; }
#poc-hub .compose { margin: 0 10px 10px; }
#poc-hub .th-top { padding: 2px 10px 8px; }
}
/* phones held upright: full-width buttons anchored above the bottom edge, the chat handle in the icon row */
@media (max-width: 560px) and (orientation: portrait) {
#poc-hub .stage { background: var(--night) var(--hub-portrait) center top / cover no-repeat; }
#poc-hub .stage::after { background: linear-gradient(0deg, #140f26f2 0%, #140f26b3 34%, #140f2600 60%); }
#poc-hub .icons { left: 12px; right: 68px; top: max(10px, env(safe-area-inset-top)); justify-content: flex-start; }
#poc-hub .menu { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); translate: none; }
#poc-hub .set { gap: 4px; }
#poc-hub .item, #poc-hub .item.duel { width: calc(100vw - 32px); padding: 4px 40px; }
#poc-hub .item { min-height: 50px; }
#poc-hub .item.duel { min-height: 62px; }
#poc-hub .word { font-size: 20px; }
#poc-hub .item.duel .word { font-size: 30px; }
#poc-hub .item.back { width: 60vw; }
#poc-hub .drawer-handle { top: max(10px, env(safe-area-inset-top)); right: 12px; translate: none; width: 48px; height: 48px; }
#poc-hub .side { width: 100vw; }
#poc-hub.drawer .drawer-handle { right: 12px; z-index: 5; }
#poc-hub .me { padding-right: 72px; }
}
/* Short screens: the menu scrolls in the space below the shortcut row. Auto
   margins center short lists, but collapse to zero when a longer list overflows. */
@media (max-height: 520px) {
  #poc-hub .menu { top: calc(max(6px, env(safe-area-inset-top, 0px)) + 60px); bottom: max(12px, env(safe-area-inset-bottom, 0px));
    translate: none; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 0; scroll-padding-block: 8px; scrollbar-width: thin; scrollbar-color: #ffffff26 transparent; }
  #poc-hub .menu > .set { flex: none; margin-block: auto; }
}
@media (prefers-reduced-motion: reduce) {
#poc-hub *, #poc-hub *::before, #poc-hub *::after { animation: none !important; transition-duration: 0s !important; }
}


/* ---- the page around it ---- */
/* while the hub is up the game's own page layers stay out of sight (the duel bar, its corner buttons and Back, the
   chat planks, the title's planks); the invite slip (z-index 25) and the rotate hint stay above it */
html.poc-hub-on #poc-bar, html.poc-hub-on #poc-more, html.poc-hub-on #poc-fs, html.poc-hub-on #poc-play,
html.poc-hub-on #poc-menu-dismiss, html.poc-hub-on #poc-chat, html.poc-hub-on #poc-dm, html.poc-hub-on #poc-gchat,
html.poc-hub-on #poc-titlenav, html.poc-hub-on #poc-titlecover, html.poc-hub-on #poc-menus, html.poc-hub-on #poc-rotate { display: none !important; }
/* a page panel over the hub (the Options board): the hub keeps still under it */
#poc-hub.under { pointer-events: none; }
#poc-hub .icons { top: max(20px, env(safe-area-inset-top, 0px)); }
/* Inbox: phones only (the drawer layouts), with the unread private messages */
#poc-hub .icon.phone-only { display: none; }
#poc-hub .icon .ib { position: absolute; top: 2px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--alert); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; font-variant-numeric: tabular-nums; }
#poc-hub .side { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* what real data needs: an empty or unreachable list, a guest's compose line, a send that failed */
#poc-hub .empty { margin: auto 12px; padding: 12px 0; color: var(--dim); font-size: 13px; text-align: center; }
#poc-hub .players .none { display: block; min-height: 0; padding: 4px 8px 8px; color: var(--dim); font-size: 13px; }
#poc-hub .players .none:hover { background: none; }
#poc-hub .compose.ro { min-height: 48px; padding: 6px 6px 6px 14px; }
#poc-hub .compose.ro .ro-line { flex: 1; min-height: 36px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 14px; text-align: start; }
#poc-hub .compose.ro .ro-line:not(:disabled):hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#poc-hub .compose.ro .ro-line:disabled { cursor: default; }
/* a guest: the generated name with a quiet tag, one quiet line to register */
#poc-hub .me .tag { padding: 2px 6px; border-radius: 5px; background: #ffffff14; color: var(--muted); font: 700 11px/1 Archivo, system-ui, sans-serif; font-style: normal; vertical-align: 3px; }
#poc-hub .reg { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 13px; }
#poc-hub .reg span { flex: 1; }
#poc-hub .reg-b { min-height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: var(--ember-soft); color: var(--ember); font-size: 12px; font-weight: 700; }
#poc-hub .reg-b:hover { background: #ffb54740; }
#poc-hub .say { margin: 0 16px 6px; color: #ff9f93; font-size: 12px; }
#poc-hub [hidden] { display: none !important; }
#poc-hub .msg .quote.gone { font-style: italic; }
/* @ while typing: the players to name, above the field */
#poc-hub .at-pop { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 70px; margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: #221a3e; box-shadow: inset 0 0 0 1px var(--edge), 0 18px 36px -12px #000; animation: hub-pop .2s var(--ease) both; }
#poc-hub .at-pop li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
#poc-hub .at-pop li[aria-selected="true"], #poc-hub .at-pop li:hover { background: #ffffff14; }
#poc-hub .at-pop .pfp { width: 28px; height: 28px; border-radius: 7px; }
#poc-hub .at-pop .live { margin: 0 0 0 auto; }
/* the account: a modal over the dimmed hub (a full-height sheet on phones) */
/* Sound: the icon shows the level (muted / low / high); its panel: Volume, Music, Effects, Mute */
#poc-hub #mute .hi { display: none; }
#poc-hub #mute[data-level="high"]:not([aria-pressed="true"]) .hi { display: inline; }
#poc-hub #mute[data-level="off"] .on, #poc-hub #mute[data-level="off"] .hi { display: none; }
#poc-hub #mute[data-level="off"] .off { display: inline; }
#poc-hub .vol { position: fixed; z-index: 7; width: 300px; padding: 16px; display: grid; gap: 12px; border-radius: 14px; background: #1f1838; box-shadow: inset 0 0 0 1px var(--edge), 0 24px 48px -16px #000; animation: hub-pop .22s var(--ease) both; }
#poc-hub .vrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
#poc-hub .vrow b { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
#poc-hub .vol input[type="range"] { width: 100%; min-height: 28px; margin: 0; accent-color: var(--ember); }
#poc-hub .vmute { min-height: 40px; border: 0; border-radius: 8px; background: #ffffff0f; box-shadow: inset 0 0 0 1px var(--edge); font-weight: 700; }
#poc-hub .vmute[aria-pressed="true"] { color: var(--ember); }
/* real chat: one group per author run (portrait and name once), 4 px inside a group, 14 px between groups; a line in its
   own direction from its start (an Arabic line reads right to left beside its author); spaces kept (ASCII art) */
#poc-hub .msg { padding-top: 2px; padding-bottom: 2px; }
#poc-hub .msg:not(.more) { margin-top: 8px; padding-top: 6px; }
#poc-hub .msg p { justify-self: start; width: fit-content; max-width: 100%; font-size: 14px; line-height: 1.45; white-space: pre-wrap; unicode-bidi: plaintext; text-align: start; }
#poc-hub .msg b, #poc-hub .msg .quote { justify-self: start; }
#poc-hub .msg b bdi, #poc-hub .who bdi, #poc-hub .bub p { unicode-bidi: plaintext; }
#poc-hub .bub p { white-space: pre-wrap; text-align: start; }
#poc-hub .msg p.jumbo, #poc-hub .bub p.jumbo { font-size: 30px; line-height: 1.2; }
#poc-hub .mention { color: var(--ember); font-weight: 700; }
#poc-hub .bub.you .mention { color: var(--ember-ink); text-decoration: underline; }
#poc-hub .msg.mentioned { background: #ffb54712; box-shadow: inset 2px 0 0 var(--ember); }
#poc-hub .pane[data-pane="global"] { position: relative; }
#poc-hub .newpill { position: absolute; z-index: 3; left: 50%; bottom: 78px; translate: -50% 0; min-height: 32px; padding: 0 14px; border: 0; border-radius: 16px; background: var(--ember); color: var(--ember-ink); font-size: 12px; font-weight: 700; box-shadow: 0 8px 18px -8px #000; }
/* a pick's real wait: a slim ember line under the picked band (its real progress, or sliding while it has none) and a
   short label; a notice in the menu column */
#poc-hub .loading { display: grid; justify-items: center; gap: 8px; width: min(420px, 60vw); margin-top: 10px; }
#poc-hub .loading .bar { position: relative; width: 100%; height: 3px; overflow: hidden; border-radius: 2px; background: #ffffff1f; }
#poc-hub .loading .bar i { position: absolute; inset: 0; background: var(--ember); transform-origin: left; transform: scaleX(.02); transition: transform .3s var(--ease); }
#poc-hub .loading.indef .bar i { right: auto; width: 34%; transform: none; animation: hub-indef 1.1s var(--ease) infinite; }
#poc-hub .loading .label { color: var(--muted); font-size: 14px; text-shadow: 0 1px 8px #000c; }
@keyframes hub-indef { from { translate: -110% 0; } to { translate: 310% 0; } }
#poc-hub .hub-notice { max-width: min(480px, 80vw); margin: 14px auto 0; padding: 8px 14px; border-radius: 8px; background: #1f1838e6; box-shadow: inset 0 0 0 1px var(--edge); color: var(--text); font-size: 14px; text-align: center; }
#poc-hub .icon.busy { opacity: .75; }
/* the player card (the real one: the prototype's card with more hierarchy) */
#poc-hub .pcard { grid-template-columns: minmax(0, 1fr); gap: 12px; width: 320px; }
#poc-hub .pc-top { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
#poc-hub .pc-ring { display: block; width: 64px; height: 64px; padding: 3px; border-radius: 16px; box-sizing: border-box; }
#poc-hub .pcard.on .pc-ring { box-shadow: 0 0 0 2px var(--ok); }
#poc-hub .pcard.duel .pc-ring { box-shadow: 0 0 0 2px var(--ember); }
#poc-hub .pcard .pc-pfp { display: block; width: 58px; height: 58px; border-radius: 13px; }
#poc-hub .pc-head { display: grid; gap: 4px; min-width: 0; }
#poc-hub .pc-name { overflow: hidden; font-size: 19px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
#poc-hub .pc-state { color: var(--muted); font-size: 13px; }
#poc-hub .pc-hero { display: flex; align-items: baseline; gap: 10px; }
#poc-hub .pc-rating { color: var(--ember); font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
#poc-hub .pc-rank { color: var(--muted); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
#poc-hub .pc-line { font-size: 14px; font-variant-numeric: tabular-nums; }
#poc-hub .pcard .pc-form { display: flex; gap: 4px; }
#poc-hub .pc-fail { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 13px; }
#poc-hub .pc-retry { min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: #ffffff0f; box-shadow: inset 0 0 0 1px var(--edge); font-size: 12px; font-weight: 700; }
#poc-hub .pcard .pc-actions { grid-template-columns: 1fr 1fr; }
#poc-hub .pcard .pc-actions:has(.pc-main[hidden]) { grid-template-columns: 1fr; }
#poc-hub .pcard .pc-actions .pc-main.pill, #poc-hub .pcard .pc-actions .pc-main.pill:hover { background: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--edge); opacity: 1; cursor: default; }
#poc-hub .pc-prof { justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--ember); font-size: 13px; font-weight: 700; }
#poc-hub .pc-prof:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
/* loading: the numbers as skeletons in their places */
#poc-hub .pcard.wait :is(.pc-rating, .pc-rank, .pc-line) { border-radius: 6px; background: #ffffff14; color: transparent; animation: hub-pulse .9s ease-in-out infinite alternate; }
#poc-hub .icon.busy::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 3px; height: 2px; border-radius: 1px; background: var(--ember); animation: hub-pulse .9s ease-in-out infinite alternate; }
@keyframes hub-pulse { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #poc-hub .loading.indef .bar i { animation: none !important; width: 100%; opacity: .5; } }
/* Replays: the player's own duels as bands (vs whom, the result and when on the tag) */
#poc-hub .set[data-set="replays"] .item:not(.back) .word { font-size: 22px; }
#poc-hub .set[data-set="replays"] .soon { white-space: nowrap; }
#poc-hub .item.rp-note .word { font-size: 18px; text-transform: none; letter-spacing: .01em; }
/* a live duel's line in the chat once it is over: the result, dimmed, nothing to press */
#poc-hub .news.over { opacity: .6; }
#poc-hub .pc-form .d { background: #ffffff14; color: var(--muted); }
#poc-hub .pc-actions button:disabled { opacity: .45; cursor: default; }
/* a long list of players scrolls, so the chat below keeps its room */
#poc-hub .players { max-height: min(40vh, 340px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ffffff26 transparent; }
@media (max-height: 520px), (max-width: 820px) {
  #poc-hub .icons { top: max(6px, env(safe-area-inset-top, 0px)); right: calc(72px + env(safe-area-inset-right, 0px)); }
  #poc-hub .icon { min-height: 44px; }
  #poc-hub .icon.phone-only { display: grid; }
  #poc-hub .menu { padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
  #poc-hub .side { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) 0; }
  #poc-hub .drawer-handle { right: calc(10px + env(safe-area-inset-right, 0px)); }
  /* a short screen: the drawer scrolls as a whole and the chat keeps a usable height under an open players list */
  #poc-hub .side { overflow-y: auto; overscroll-behavior: contain; grid-template-rows: auto auto minmax(max(180px, min(300px, calc(100dvh - 190px))), 1fr); }
  #poc-hub .side.big { grid-template-rows: minmax(0, 1fr); }
  #poc-hub .pcard { width: auto; }   /* (a bottom sheet: the screen's width) */
  #poc-hub .vol { left: 0; right: 0 !important; top: auto !important; bottom: 0; width: auto; border-radius: 16px 16px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  #poc-hub .vol input[type="range"] { min-height: 44px; }
  #poc-hub .vmute { min-height: 44px; }
}
/* touch: every control at least 44 px, nothing that only shows on hover */
@media (pointer: coarse) {
  #poc-hub .pop-grid { --emote-cell: 44px; }
  #poc-hub .pop-grid button { width: 44px; height: 44px; }
  #poc-hub .invite, #poc-hub .tab, #poc-hub .grow, #poc-hub .gear, #poc-hub .emo, #poc-hub .send, #poc-hub .th-back,
  #poc-hub .rp-x, #poc-hub .reg-b { min-width: 44px; min-height: 44px; }
  #poc-hub .reply { width: 44px; height: 44px; top: 0; opacity: .8; background: none; box-shadow: none; }
  #poc-hub .msg { padding-right: 56px; }
  #poc-hub .invite { opacity: 1; }
  #poc-hub .compose input { font-size: 16px; }   /* (iOS zooms into a smaller field) */
}
/* (a phone held upright: the design's own places for the icon row and the chat handle, kept over the rules above) */
@media (max-width: 560px) and (orientation: portrait) {
  #poc-hub .icons { top: max(10px, env(safe-area-inset-top, 0px)); right: 68px; }
  #poc-hub .drawer-handle { right: calc(12px + env(safe-area-inset-right, 0px)); }
}
/* ---- the sidebar on the game's own screens (homehub.js setSide): docked beside the card list and deck construction,
   a drawer over the board's right edge in duels and on phones; the hub's stage, icons and menu stay away ---- */
#poc-hub .side-top, #poc-hub .more-pop, #poc-hub .status-pop { display: none; }
/* the sidebar's column: a flex column (the header row, the player, Online now, the chat taking what is left), so a
   folded or hidden part never leaves its room behind */
#poc-hub .side { display: flex; flex-direction: column; }
#poc-hub .side > :is(.side-top, .me, .online) { flex: none; }
#poc-hub .side > .chat { flex: 1 1 0; min-height: 0; }
#poc-hub.side-dock, #poc-hub.side-drawer { background: none; pointer-events: none; }
#poc-hub.side-dock :is(.stage, .icons, .menu), #poc-hub.side-drawer :is(.stage, .icons, .menu) { display: none !important; }
#poc-hub.side-dock :is(.side, .pcard, .vol, .more-pop, .status-pop),
#poc-hub.side-drawer :is(.side, .pcard, .vol, .more-pop, .status-pop, .drawer-handle) { pointer-events: auto; }
#poc-hub.side-drawer.drawer .scrim { pointer-events: auto; }
#poc-hub.under :is(.side, .pcard, .vol, .more-pop, .status-pop, .drawer-handle) { pointer-events: none; }
#poc-hub.side-dock .side-top, #poc-hub.side-drawer .side-top { display: flex; align-items: center; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
#poc-hub .st-b { display: grid; place-items: center; width: 44px; height: 40px; border: 0; border-radius: 8px; background: none; color: var(--muted); transition: background-color .2s, color .2s; }
#poc-hub .st-b:hover, #poc-hub .st-b[aria-expanded="true"], #poc-hub .st-b[aria-pressed="true"] { background: #ffffff0f; color: var(--text); }
#poc-hub .st-b svg { width: 22px; height: 22px; }
#poc-hub .st-b[data-side="more"] { margin-left: auto; }
#poc-hub #side-sound .off, #poc-hub #side-sound .hi { display: none; }
#poc-hub #side-sound[data-level="high"]:not([aria-pressed="true"]) .hi { display: inline; }
#poc-hub #side-sound:is([aria-pressed="true"], [data-level="off"]) :is(.on, .hi) { display: none; }
#poc-hub #side-sound:is([aria-pressed="true"], [data-level="off"]) .off { display: inline; }
#poc-hub.side-dock .side, #poc-hub.side-drawer .side { animation: none; }
/* the side modes' header row and the profile: a tighter profile block (the chat keeps its room) */
#poc-hub.side-dock .me, #poc-hub.side-drawer .me { padding: 14px 16px; }
#poc-hub.side-dock .fold, #poc-hub.side-drawer .fold { min-height: 50px; padding: 0 16px; }
#poc-hub.side-dock .chat-top, #poc-hub.side-drawer .chat-top { padding: 12px 16px 8px; gap: 10px; }
#poc-hub.side-dock .chat-top .title, #poc-hub.side-drawer .chat-top .title { display: none; }
#poc-hub.side-dock .tabs, #poc-hub.side-drawer .tabs { margin-left: 0; }
#poc-hub.side-dock .grow, #poc-hub.side-drawer .grow { margin-left: auto; }
#poc-hub.side-dock .side.big .side-top, #poc-hub.side-drawer .side.big .side-top { display: flex; }
@media (min-width: 821px) and (min-height: 521px) {
  #poc-hub.side-dock { --side-w: 340px; }
  #poc-hub.side-drawer { --side-w: 320px; --side-r: 8px; }
  /* the drawer: below the corner handle, its bottom above the player's hand (--dr-top / --dr-h: placeSide) */
  #poc-hub.side-drawer .side { top: var(--dr-top, 68px); right: 8px; bottom: auto; height: var(--dr-h, calc(100vh - 76px)); border-radius: 14px; overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--edge), 0 24px 48px -16px #000; transform: translateX(calc(100% + 16px)); visibility: hidden;
    transition: transform .4s var(--ease), visibility 0s linear .4s; }
  #poc-hub.side-drawer.drawer .side { transform: none; visibility: visible; transition: transform .4s var(--ease); }
}
/* the handle: the top right corner (where the page's corner button was), the unread count on it */
#poc-hub.side-drawer .drawer-handle { display: grid; place-items: center; position: fixed; z-index: 4; translate: none;
  top: max(10px, env(safe-area-inset-top, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); width: 48px; height: 48px; border: 0; border-radius: 12px;
  background: #171130f2; box-shadow: inset 0 0 0 1px var(--edge), 0 8px 18px -6px #000; color: var(--text); transition: color .2s; }
#poc-hub.side-drawer .drawer-handle:hover, #poc-hub.side-drawer.drawer .drawer-handle { color: var(--ember); }
#poc-hub.side-drawer .drawer-handle svg { width: 24px; height: 24px; }
#poc-hub.side-drawer .drawer-handle .badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--alert); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
#poc-hub.side-drawer .drawer-handle.pulse .badge { animation: hub-badge 1s var(--ease) 3; }
@keyframes hub-badge { 50% { box-shadow: 0 0 0 6px #c8352a55; transform: scale(1.12); } }
#poc-hub.side-drawer.drawer .drawer-handle { right: max(10px, env(safe-area-inset-right, 0px)); z-index: 5; }
/* More and the status: small dark popovers (bottom sheets on phones) */
#poc-hub .more-pop:not([hidden]), #poc-hub .status-pop:not([hidden]) { display: grid; position: fixed; z-index: 7; gap: 2px; padding: 8px; border-radius: 14px; background: #1f1838;
  box-shadow: inset 0 0 0 1px var(--edge), 0 24px 48px -16px #000; animation: hub-pop .22s var(--ease) both; }
#poc-hub .more-pop { width: 240px; max-height: calc(100vh - 80px); overflow-y: auto; }
#poc-hub .more-pop .mi { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; font-weight: 600; }
#poc-hub .more-pop .mi:hover, #poc-hub .more-pop .mi:focus-visible { background: #ffffff0f; outline: none; }
#poc-hub .more-pop .mi:hover svg, #poc-hub .more-pop .mi.on, #poc-hub .more-pop .mi.on svg { color: var(--ember); }
#poc-hub .more-pop .mi svg { flex: none; width: 18px; height: 18px; color: var(--muted); stroke-width: 2; }
#poc-hub .status { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; margin-top: 4px; padding: 0 10px 0 8px; border: 0; border-radius: 13px;
  background: #1f4a2c66; color: var(--ok); font-size: 12px; font-weight: 700; }
#poc-hub .status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#poc-hub .status.off { background: #ffffff0f; color: var(--muted); }
#poc-hub .status:hover { filter: brightness(1.15); }
#poc-hub .me-pic { grid-row: span 3; }
#poc-hub .status-pop { width: 300px; padding: 10px; }
#poc-hub .sw-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; text-align: left; }
#poc-hub .sw-row:hover { background: #ffffff0a; }
#poc-hub .sw-row span { flex: 1; display: grid; gap: 2px; }
#poc-hub .sw-row b { font-size: 14px; }
#poc-hub .sw-row small { color: var(--dim); font-size: 12px; }
#poc-hub .sw-row .sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: #ffffff1f; transition: background-color .25s; }
#poc-hub .sw-row .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #d8d2e6; box-shadow: 0 2px 6px #0008; transition: transform .3s var(--ease), background-color .25s; }
#poc-hub .sw-row[aria-checked="true"] .sw { background: var(--ember); }
#poc-hub .sw-row[aria-checked="true"] .sw::after { transform: translateX(18px); background: #fff; }
#poc-hub .sw-say { margin: 4px 8px 2px; color: #ff9f93; font-size: 12px; }
/* a player with challenges off: a quiet line in the row's action place */
#poc-hub .players .pstate { color: var(--dim); font-size: 11px; font-weight: 600; white-space: nowrap; }
#poc-hub .pcard .pc-actions:has(.pc-msg[hidden]) { grid-template-columns: 1fr; }
/* the Duel tab: chat.js's duel chat, its own body in the sidebar's look */
#poc-hub .duelpane { display: flex; flex-direction: column; min-height: 0; }
#poc-hub .duelpane[hidden] { display: none; }
/* The hosted duel field uses the composer's rounded focus treatment, not the hub's generic square outline. */
#poc-hub #poc-chat .pc-form:focus-within { border-radius: 10px; box-shadow: inset 0 0 0 2px var(--ember); }
#poc-hub #poc-chat .pc-form input:focus { outline: none; border-color: transparent; }
#poc-hub #poc-chat .pc-form button:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
@media (max-height: 520px), (max-width: 820px) {
  #poc-hub .more-pop:not([hidden]), #poc-hub .status-pop:not([hidden]) { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0; width: auto; border-radius: 16px 16px 0 0;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
  #poc-hub .more-pop .mi { min-height: 46px; }
  /* a short screen: the drawer scrolls as a whole, the chat keeps a usable height */
  #poc-hub .side > .chat { flex: 1 0 auto; min-height: max(220px, min(320px, calc(100dvh - 120px))); }
  #poc-hub .side.big > .chat { min-height: 0; flex: 1 1 0; }
  #poc-hub.side-drawer .side { visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s; }
  #poc-hub.side-drawer.drawer .side { visibility: visible; transition: transform .45s var(--ease); }
  #poc-hub.side-drawer .side-top { padding-right: 68px; }
  #poc-hub.side-drawer .drawer-handle { top: max(8px, env(safe-area-inset-top, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); }
}
/* the page around the sidebar: the GAME panel, its corner button and the old CHAT button give way to it */
html.poc-side #poc-bar, html.poc-side #poc-more, html.poc-side #poc-menu-dismiss, html.poc-side #poc-gchat, html.poc-side #poc-dm .dm-plank, html.poc-side #poc-chat:not(.pc-hosted) { display: none !important; }
/* Mobile cancel stays at the bottom, aligned with the top chat handle. It presses controls.js's existing
   Back action (page overlays first, then the game's normal right-click input). */
@media (max-width: 820px), (max-height: 520px), (pointer: coarse) {
  #poc-hub.side-drawer .game-back { display: grid; place-items: center; position: fixed; top: auto; bottom: max(10px, env(safe-area-inset-bottom, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px)); z-index: 5; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px;
    background: var(--side); color: var(--text); box-shadow: inset 0 0 0 1px var(--edge), 0 8px 18px -6px #000; pointer-events: auto; }
  #poc-hub.side-drawer .game-back:hover { color: var(--ember); }
  #poc-hub .game-back svg { width: 24px; height: 24px; }
  #poc-hub.under .game-back { pointer-events: none; }
}
/* docked: the game laid out in the width left of the sidebar (desktop only: homehub.js setSide) */
html.poc-side-dock { --poc-dockw: 340px; }
html.poc-side-dock main { padding-right: calc(var(--poc-dockw) + 8px); --poc-sx: var(--poc-dockw); }
html.poc-side-dock #screen { width: min(calc(100vw - var(--poc-dockw) - 24px), calc((100vh - 16px) * var(--poc-ar, 4 / 3)));
  width: min(calc(100vw - var(--poc-dockw) - 24px), calc((100dvh - 16px) * var(--poc-ar, 4 / 3))); }
html.poc-side-dock main:fullscreen #screen { width: min(calc(100vw - var(--poc-dockw) - 8px), calc(100vh * var(--poc-ar, 4 / 3))); }
/* phones (the hub and the game's screens alike): the handle at the top right, in the icon row's line when the drawer is
   closed and in the drawer's own header when it is open (the profile's gear and the header row keep clear of it) */
@media (max-height: 520px), (max-width: 820px) {
  #poc-hub .drawer-handle, #poc-hub.drawer .drawer-handle,
  #poc-hub.side-drawer .drawer-handle, #poc-hub.side-drawer.drawer .drawer-handle { top: max(6px, env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); translate: none; width: 48px; height: 48px; z-index: 5; }
  #poc-hub:not(.side-dock):not(.side-drawer) .me { padding-right: 68px; }
  #poc-hub.drawer .drawer-handle { color: var(--ember); }
}
#poc-hub.side-dock .me .meta, #poc-hub.side-drawer .me .meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the drawer open over the game: the page's corner Fullscreen and Back (controls.js) give way to it */
html.poc-side-open #poc-fs, html.poc-side-open #poc-play, html.poc-side-open #poc-rotate { visibility: hidden !important; }
/* (what the page draws over the board at the hub's own level, the Mate and the watch covers, stays under the open drawer) */
html.poc-side-open :is(#poc-mate, #poc-watch, #poc-watchers) { z-index: 18 !important; }
/* Keep message notifications, but never let their toast cover the chat handle
   or the conversation already open in the unified sidebar. */
html.poc-side #poc-dm { z-index: 18 !important; }
/* Mobile chat is a viewport, not a scrolling page of profile + history. Only
   messages scroll; the composer and navigation stay within the visible screen. */
@media (max-width: 820px), (max-height: 520px) {
  #poc-hub .side, #poc-hub.side-drawer .side { top: var(--side-vt, 0px); bottom: auto; height: var(--side-vh, 100dvh); width: min(460px, 100vw); overflow: hidden; }
  #poc-hub .side > .chat, #poc-hub.side-drawer .side > .chat { flex: 1 1 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  #poc-hub .side-top { padding-right: 72px; }
  #poc-hub .st-b { min-height: 44px; }
  #poc-hub .chat-top { padding: 8px 12px; gap: 8px; border-bottom: 1px solid var(--line); }
  #poc-hub .chat-top > .title { display: none; }
  #poc-hub .tabs { flex: 1; min-width: 0; margin: 0; gap: 4px; }
  #poc-hub .tab { flex: 1; min-height: 44px; padding: 8px; font-size: 14px; }
  #poc-hub .grow { flex: none; width: 44px; height: 44px; }
  #poc-hub .lines { padding: 8px 6px 16px; }
  #poc-hub .msg { column-gap: 10px; padding-left: 10px; padding-right: 10px; }
  #poc-hub .msg:has(.reply) { padding-right: 56px; }
  #poc-hub .msg:not(.more) { margin-top: 12px; }
  #poc-hub .msg p, #poc-hub .bub p { font-size: 15px; line-height: 1.5; }
  #poc-hub .compose { min-height: 52px; margin: 8px 12px max(12px, env(safe-area-inset-bottom, 0px)); }
  #poc-hub .compose input { min-height: 40px; font-size: 16px; }
  #poc-hub .compose .send, #poc-hub .compose .emo { flex: none; width: 44px; height: 44px; }
  #poc-hub .players { max-height: 24dvh; }
  #poc-hub.drawer .game-back { display: none; }
  #poc-hub .drawer-handle, #poc-hub.drawer .drawer-handle { top: calc(var(--side-vt, 0px) + max(6px, env(safe-area-inset-top, 0px))); }
  #poc-hub .side:has(form.compose input:focus) > :is(.side-top, .me, .online) { display: none; }
  #poc-hub .side:has(form.compose input:focus) .chat-top { padding-right: 68px; }
  #poc-hub .side:has(form.compose input:focus) .grow { display: none; }
}
@media (max-width: 560px) and (orientation: portrait) {
  #poc-hub .side, #poc-hub.side-drawer .side { width: 100vw; }
}
@media (max-height: 520px) {
  #poc-hub .side .me { min-height: 0; padding: 6px 14px; grid-template-columns: 40px 1fr auto; }
  #poc-hub .side .me :is(.meta, .reg) { display: none; }
  #poc-hub .side .me .pfp { width: 40px; height: 40px; }
  #poc-hub .side .me .me-pic { grid-row: 1 / span 2; }
  #poc-hub .side .me .name { font-size: 16px; }
  #poc-hub .side .me .status { margin-top: 0; min-height: 22px; }
  #poc-hub .side .fold { min-height: 44px; }
  #poc-hub .side .chat-top { padding-top: 4px; padding-bottom: 4px; }
}
/* the invite slip and its pill (invites.js) clear of the sidebar: left of it docked, left of the corner handle otherwise */
@media (min-width: 821px) and (min-height: 521px) {
  html.poc-side-dock:not(.poc-touch) #poc-invites-layer { right: calc(var(--poc-dockw, 340px) + 16px) !important; }
  html.poc-side:not(.poc-side-dock):not(.poc-hub-on):not(.poc-touch) #poc-invites-layer { right: 72px !important; }
}
/* Phones held sideways (owner 2026-11-01: "I'm not seeing anything with the sidebar open"): the drawer narrower, the
   profile and Online now on one row (the players drop over the chat when opened), the chat denser and its composer
   slimmer, so most of the drawer's height is messages; the home menu fits without scrolling (every band 44 px+) */
@media (max-height: 520px) {
  #poc-hub .side, #poc-hub.side-drawer .side { width: min(400px, 100vw); display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
  #poc-hub.drawer .drawer-handle { right: calc(min(400px, 100vw) + 10px); }
  #poc-hub .side > .side-top { grid-column: 1 / -1; grid-row: 1; }
  #poc-hub .side > .chat { grid-column: 1 / -1; grid-row: 3; }
  #poc-hub .side > .me { grid-column: 1; grid-row: 2; border-bottom: 1px solid var(--line); }
  #poc-hub .side .me .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #poc-hub .side .me .name .tag { display: none; }
  #poc-hub .side .me .status { white-space: nowrap; }
  #poc-hub .side > .online { grid-column: 2; grid-row: 2; position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
  #poc-hub .side .online .fold { min-height: 52px; height: 100%; padding: 0 12px 0 4px; gap: 8px; }
  #poc-hub .side .online .fold .title { display: none; }
  #poc-hub .side .online .faces { display: none; }
  #poc-hub .side .online .count { display: flex; align-items: center; gap: 4px; padding: 0 10px; white-space: nowrap; }
  #poc-hub .side .online .count::after { content: "online"; font-weight: 600; }   /* (the title is hidden here: say what the number is) */
  #poc-hub .side .online .players { position: absolute; z-index: 4; top: 100%; right: 0; width: min(400px, 100vw); max-height: 60dvh; overflow: auto;
    padding: 6px 8px 10px; background: var(--side); box-shadow: inset 0 -1px 0 var(--line), 0 18px 30px -12px #000; }
  #poc-hub .side .chat-top { padding: 2px 8px; }
  #poc-hub .side .tab { min-height: 40px; padding: 4px 8px; font-size: 13px; }
  #poc-hub .side .grow { width: 40px; height: 40px; }
  #poc-hub .side .lines { padding: 4px 4px 8px; }
  #poc-hub .side .msg { grid-template-columns: 30px 1fr; column-gap: 8px; }
  #poc-hub .side .msg .pfp { width: 30px; height: 30px; border-radius: 7px; }
  #poc-hub .side .msg:not(.more) { margin-top: 6px; }
  #poc-hub .side .msg b { font-size: 12px; }
  #poc-hub .side .msg p, #poc-hub .side .bub p { font-size: 14px; line-height: 1.35; }
  #poc-hub .side .compose { min-height: 44px; margin: 4px 8px max(6px, env(safe-area-inset-bottom, 0px)); }
  #poc-hub .side .compose input { min-height: 36px; font-size: 16px; }
  #poc-hub .item.duel { min-height: 46px; }
  #poc-hub .item.duel .word { font-size: 22px; }
  #poc-hub .menu { top: calc(max(6px, env(safe-area-inset-top, 0px)) + 52px); padding: 4px 0; }
  #poc-hub .item.duel + .item:not(.duel), #poc-hub .item.back { margin-top: 3px; }
}