/* The Library's player (site/lib/libwatch.js, static/libwatch.js): the client (game, controls, console; the panel on
   the right) at the top, the moments, log, cast and comments under it; on a phone the panel under the console in two
   columns and the page under it in tabs */
.lw { position: relative; z-index: 20; padding: 80px var(--pad) 2em; }
.lwreview { position: relative; z-index: 20; margin: 76px var(--pad) -64px; padding: 10px 14px; border-radius: 6px; background: #3d3418; color: #f2d58a; font-size: 14px; } .lwreview a { color: #fff; }
.lwclient { --lwz: 1; display: grid; grid-template-columns: var(--lwg, minmax(0, 1fr)) calc(176px * var(--lwz)); gap: 6px; justify-content: center; }
.lwmain { display: grid; gap: 0; min-width: 0; background: #000; border-radius: 6px; overflow: hidden; }
.lwscreen { position: relative; background: #000; line-height: 0; }
#cv { display: block; width: 100%; height: auto; image-rendering: pixelated; touch-action: manipulation; }
.lwcon { position: relative; height: calc(120px * var(--lwz)); background: #000; border-top: 1px solid #222; }
#lwcon { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lwside { position: relative; min-height: 200px; } #lwpanel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 4px; }
.lwside2 { display: none; }
.lwclient:fullscreen { background: #000; align-content: center; padding: 6px; }

/* over the game: the big play, the loading, double taps, a toast, the pinned comments, "Were you there?", who that was */
.lwbig { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lwbig:hover { background: var(--red); }
.lwload { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: #000; color: #ddd; line-height: 1.4; text-align: center; padding: 0 1em; }
.lwload p { margin: 0; font-size: 15px; } .lwload small { color: #808080; font-size: 12px; }
.lwlbar { width: min(320px, 70vw); height: 4px; border-radius: 2px; background: #2a2a2a; overflow: hidden; } .lwlbar i { display: block; height: 100%; width: 5%; background: var(--red); transition: width .3s; }
.lwwait { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .lwwait[hidden] { display: none; }
.lwdtap { position: absolute; top: 50%; transform: translateY(-50%); padding: 8px 14px; border-radius: 20px; background: rgba(0,0,0,.6); color: #fff; font: 700 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; opacity: 0; transition: opacity .2s; pointer-events: none; }
.lwdtap.l { left: 12%; } .lwdtap.r { right: 12%; } .lwdtap.show { opacity: 1; }
.lwtoast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 8px 14px; border-radius: 6px; background: rgba(0,0,0,.8); color: #fff; font-size: 14px; line-height: 1.3; }
.lwpop { position: absolute; left: 10px; top: 10px; max-width: min(360px, 70%); padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,.78); color: #eee; font-size: 14px; line-height: 1.35; cursor: pointer; }
.lwpop b { display: block; color: #fff; font-size: 12px; margin-bottom: 2px; }
.lwask { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 8px; background: rgba(0,0,0,.85); color: #ddd; font-size: 14px; line-height: 1.3; white-space: nowrap; }
.lwask b { color: #fff; } .lwask button { height: 30px; padding: 0 12px; border: 0; border-radius: 4px; background: var(--red); color: #fff; font-weight: 700; cursor: pointer; } .lwask #caskx { background: none; color: #aaa; font-size: 20px; padding: 0 4px; }
.lwwho { position: absolute; z-index: 3; display: grid; gap: 4px; min-width: 170px; padding: 10px 12px; border-radius: 8px; background: rgba(15,15,15,.95); box-shadow: 0 6px 20px rgba(0,0,0,.5); color: #ddd; font-size: 13px; line-height: 1.35; }
.lwwho b { color: #fff; font-size: 15px; padding-right: 18px; } .lwwho small { color: #9a9aa2; } .lwwho a { color: #fff; font-weight: 700; } .lwwx { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: #aaa; font-size: 18px; cursor: pointer; }

/* the timeline and the controls, under the game */
.lwbar { padding: 8px 10px 6px; background: #101012; line-height: 1.2; }
.lwseek { position: relative; height: 8px; border-radius: 4px; background: #333; cursor: pointer; margin: 6px 0 8px; }
.lwbuf { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: #555; } .lwfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--red); }
.lwmk { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; border-radius: 1px; background: #c9c9c9; cursor: pointer; }
.lwmk.death { background: #ff4d4d; } .lwmk.kill, .lwmk.pvp { background: #ff9a3c; } .lwmk.level, .lwmk.closecall { background: #5fd36a; } .lwmk.boss, .lwmk.bossdown, .lwmk.raid { background: #c77dff; }
.lwmk.find, .lwmk.loot, .lwmk.quest { background: #f2d58a; } .lwmk.note { background: #4da3ff; } .lwmk.fight, .lwmk.battle { background: #ff6b6b; }
.lwmk:hover { transform: scaleY(1.4); }
.lwtip { position: absolute; bottom: 16px; transform: translateX(-50%); padding: 4px 8px; border-radius: 4px; background: rgba(0,0,0,.9); color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none; }
.lwctl { display: flex; align-items: center; gap: 6px; color: #ddd; font-size: 14px; }
.lwctl button, .lwflix { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px; border: 0; border-radius: 4px; background: none; color: #ddd; font: 600 13px "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; text-decoration: none; }
.lwctl button:hover, .lwflix:hover { background: rgba(255,255,255,.1); color: #fff; } .lwctl button:disabled { opacity: .35; cursor: default; background: none; }
.lwpp { color: #fff !important; } .lwtime { font-variant-numeric: tabular-nums; color: #9a9aa2; margin-right: 6px; } .lwtime b { color: #fff; font-weight: 600; }
.lwspeeds { display: inline-flex; } .lwspeeds button { padding: 0 6px; color: #9a9aa2; } .lwspeeds button.on { color: #fff; background: rgba(255,255,255,.12); } .lwspd { display: none !important; }
.lwgrow { flex: 1; } .lwzoom { display: inline-flex; align-items: center; } .lwzoom b { min-width: 2.2em; text-align: center; font-weight: 600; color: #9a9aa2; font-size: 12px; }
#cpb { color: #808080; } #cpb.on { color: #fff; } .lwflix { border: 1px solid #3a3a40; }

/* the recording, and everything about it */
.lwhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 22px 0 6px; }
.lwhead h1 { margin: 0 0 6px; font: 700 clamp(22px, 2.2vw, 34px)/1.15 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.lwby { margin: 0 0 8px; color: #b3b3b3; } .lwby a, .lwchips a { color: #fff; }
.lwchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .lwchips > * { padding: 3px 9px; border-radius: 4px; background: #232327; color: #ddd; font-size: 13px; text-decoration: none; }
.lwchips a:hover { background: #333; } .lwfile { color: #808080 !important; max-width: 28em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lwact { display: flex; gap: 8px; } .lwact button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid #3a3a40; border-radius: 6px; background: #1b1b1f; color: #fff; font: 600 14px "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; }
.lwact button:hover { background: #26262b; }
.lwkeys { margin: 6px 0 18px; color: #808080; font-size: 13px; }
.lwtabs { display: none; }
.lwcols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 34px; }
.lwcol section { margin-bottom: 26px; }
.lwcols h2 { margin: 0 0 10px; font-size: 20px; } .lwcols h2 small { color: #808080; font-size: 14px; font-weight: 400; margin-left: 6px; }
.lwcols h3 { margin: 18px 0 6px; font-size: 16px; }
.lwt { color: #9a9aa2; font-variant-numeric: tabular-nums; text-decoration: none; } .lwt:hover { color: #fff; text-decoration: underline; }
.lwhl { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow: auto; border-radius: 6px; background: #18181b; }
.lwhl li { display: grid; grid-template-columns: 10px 4.2em minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #222226; font-size: 14px; color: #ddd; }
.lwhl li i { width: 8px; height: 8px; border-radius: 50%; background: #9a9aa2; align-self: center; }
.lwhl .death i, .lwhl .fight i, .lwhl .battle i { background: #ff4d4d; } .lwhl .kill i, .lwhl .pvp i { background: #ff9a3c; } .lwhl .level i, .lwhl .closecall i { background: #5fd36a; }
.lwhl .boss i, .lwhl .bossdown i, .lwhl .raid i { background: #c77dff; } .lwhl .find i, .lwhl .loot i, .lwhl .quest i { background: #f2d58a; }
.lwcr { margin: 4px 0; color: #b3b3b3; font-size: 14px; line-height: 1.5; } .lwcr b { color: #fff; margin-right: 6px; } .lwcr small { color: #808080; }
.lwlog { border-radius: 6px; background: #0e0e10; border: 1px solid #222226; }
.lwltabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid #222226; }
.lwltabs button { height: 30px; padding: 0 12px; border: 0; border-radius: 4px 4px 0 0; background: none; color: #9a9aa2; font: 600 13px "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; } .lwltabs button.on { background: #1d1d21; color: #fff; }
.lwlbody { height: 300px; overflow: auto; padding: 8px 12px; font: 13px/1.5 "Menlo", "Consolas", monospace; color: #f0f0f0; }
.lwlbody p { margin: 0; } .lwlbody .lwt { margin-right: 8px; } .lwlbody .warn { color: #ff6b6b; } .lwlbody .good { color: #5fd36a; } .lwlbody .npc { color: #6fb7ff; } .lwlbody .say { color: #f2e36b; } .lwlbody b { font-weight: 600; }
.lwgate { display: none; padding: 26px 16px; color: #b3b3b3; font-size: 14px; text-align: center; }
.lwgate button { margin-left: 8px; height: 30px; padding: 0 12px; border: 0; border-radius: 4px; background: #fff; color: #111; font-weight: 700; cursor: pointer; }
.lwlog.gated .lwlbody { display: none; } .lwlog.gated .lwgate { display: block; }
.lwcast { list-style: none; margin: 0; padding: 0 6px 0 0; columns: 2 220px; column-gap: 20px; max-height: 640px; overflow: auto; }
.lwcast li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; break-inside: avoid; padding: 5px 0; border-bottom: 1px solid #1f1f23; font-size: 14px; }
.lwcast li > span { flex: 1; min-width: 0; } .lwcast a { color: #fff; font-weight: 600; } .lwcast em { color: #f2d58a; font-size: 12px; font-style: normal; } .lwcast small { flex-basis: 100%; color: #808080; font-size: 12px; } .lwcast .lwt { margin-left: auto; font-size: 12px; }
.lwnamed { margin-top: 10px; color: #b3b3b3; font-size: 14px; } .lwnamed summary { cursor: pointer; } .lwnamed .lwcast { margin-top: 6px; }
.lwcform { display: grid; gap: 8px; margin-bottom: 14px; }
.lwcform input:not(.hp), .lwcform textarea { padding: 10px 12px; border-radius: 6px; border: 1px solid #3a3a40; background: #1b1b1f; color: #fff; font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif; resize: vertical; }
.lwcform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.lwcrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .lwcrow .fdim { flex: 1; font-size: 13px; }
.lwmark { height: 34px; padding: 0 12px; border: 1px solid #3a3a40; border-radius: 6px; background: #1b1b1f; color: #ddd; font: 600 13px "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; } .lwmark.on { border-color: #4da3ff; color: #fff; }
.lwsend { height: 38px; padding: 0 22px; border: 0; border-radius: 6px; background: var(--red); color: #fff; font: 700 15px "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; } .lwsend:disabled { opacity: .5; }
.lwclist { list-style: none; margin: 0; padding: 0; } .lwclist li { padding: 10px 0; border-bottom: 1px solid #1f1f23; }
.lwclist li div { display: flex; gap: 10px; align-items: baseline; font-size: 13px; } .lwclist b { color: #fff; font-size: 14px; } .lwclist time { color: #808080; margin-left: auto; }
.lwclist p { margin: 4px 0 0; color: #ddd; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }

/* a phone: the game across the screen, the controls and the console under it, the panel in two columns, then tabs */
@media (max-width: 760px) {
  .lw { padding: 58px 0 2em; }
  .lwclient { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lwmain { border-radius: 0; }
  .lwside { display: none; }
  .lwside2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #000; }
  .lwside2 canvas { display: block; width: 100%; aspect-ratio: 176 / 520; height: auto; }
  .lwcon { height: 96px; }
  .lwbar { padding: 4px 8px; } .lwctl { gap: 2px; } .lwspeeds, .lwzoom, #shr span, .lwflix span { display: none; } .lwspd { display: inline-flex !important; }
  .lwhead, .lwkeys, .lwtabs, .lwcols { margin-left: var(--pad); margin-right: var(--pad); }
  .lwkeys { display: none; } .lwact button span { font-size: 13px; }
  .lwask { left: 8px; right: 8px; transform: none; white-space: normal; flex-wrap: wrap; font-size: 13px; } .lwpop { max-width: 80%; }
  .lwtabs { display: flex; gap: 4px; position: sticky; top: 56px; z-index: 5; padding: 8px 0; margin-bottom: 8px; background: var(--bg); border-bottom: 1px solid #222; overflow-x: auto; }
  .lwtabs button { flex: none; height: 34px; padding: 0 12px; border: 0; border-radius: 17px; background: #232327; color: #ddd; font: 600 14px "Helvetica Neue", Helvetica, Arial, sans-serif; }
  .lwtabs button.on { background: #fff; color: #111; } .lwtabs small { color: inherit; opacity: .7; }
  .lwcols { display: block; } .lwcols [data-mt]:not(.mt-on) { display: none; } .lwcols h2 { display: none; }
  .lwhl { max-height: none; } .lwlbody { height: 50vh; } .lwcast { columns: 1; }
}

/* (the hidden ones stay hidden whatever their display) */
.lw [hidden] { display: none !important; }

/* when the profile watching is on screen (static/libwatch.js bands): gold their characters, blue their idols, over the timeline */
.lwyou { position: absolute; z-index: 1; bottom: calc(100% + 4px); height: 6px; border-radius: 3px; background: #f5c451; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 8px rgba(245,196,81,.55); cursor: pointer; }
.lwyou.idol { background: #5aa9ff; } .lwyou:hover { height: 8px; }
.lwyoutag { height: auto; bottom: calc(100% + 14px); padding: 3px 6px; border-radius: 3px; transform: translateX(-4px); color: #141414; font: 800 10px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal; letter-spacing: .05em; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.5); } .lwyoutag:hover { height: auto; } .lwyoutag.idol { color: #fff; }