/* Notices on the screen (ui/notice.js), after the original uitip.py: TipBoard = half-transparent black lines under the
   target bar, BigBoard = the frame with the rod of the big notices / OX event, text in the original 242,231,193.
   Free of the HUD: under a target bar with two rows of buttons (57 px); compact puts the target on the left, the lines
   go to the top then, centered between the player frame (136 px) and the world boss timer (right 90 + 88 px). The
   BigBoard stays left of the quest tracker (right 128 px). */
#tipboard { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: stretch;
  gap: 1px; width: max-content; min-width: 170px; max-width: 300px; pointer-events: none; }
#ui.compact #tipboard { top: 4px; left: calc(50% - 21px); min-width: 0; max-width: clamp(150px, calc(100% - 322px), 300px); }
#tipboard .tip-line { padding: 1px 8px 2px; background: rgba(0, 0, 0, .5); color: #ffe6ba; font-size: 8px; line-height: 10px; text-align: center;
  text-shadow: 1px 1px 0 #000; text-wrap: balance; overflow-wrap: anywhere; animation: tip-in .3s steps(6) both; transition: opacity .5s; }
#tipboard .tip-line.out { opacity: 0; }
@keyframes tip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the frame is 276 x 37 art px: rod 10 px on top (with the golden heads in the corners), lines 2 px down the sides and
   along the bottom; the black board lies inside the lines like the original Bar (x 10, y 6) */
#bigboard { position: absolute; left: 50%; top: max(27%, 128px); transform: translateX(-50%); width: 276px; max-width: max(200px, calc(100% - 264px)); min-height: 37px;
  border-style: solid; border-width: 10px 12px 3px 12px; border-image: url(../assets/ui/notice_frame.png) 10 12 3 12 stretch;
  background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)) 10px 6px / calc(100% - 21px) calc(100% - 9px) no-repeat border-box;
  padding: 1px 4px 4px; text-align: center; pointer-events: none; animation: bb-unroll .45s steps(9) both; }
#bigboard.out { animation: bb-roll .5s steps(10) both; }
#bigboard .bb-head { display: flex; align-items: center; justify-content: center; gap: 4px; height: 9px; color: var(--gold); font-size: 7px;
  line-height: 9px; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
#bigboard .bb-head i { width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-d)); }
#bigboard .bb-head i:last-child { background: linear-gradient(90deg, var(--gold-d), transparent); }
#bigboard .bb-text { padding: 1px 2px 0; color: #f2e7c1; font-size: 11px; line-height: 12px; text-shadow: 1px 1px 0 #000; text-wrap: balance; overflow-wrap: anywhere; }
/* the scroll unrolls from the rod down and rolls up again */
@keyframes bb-unroll { from { clip-path: inset(0 0 calc(100% - 10px) 0); opacity: .4; } to { clip-path: inset(0); opacity: 1; } }
@keyframes bb-roll { from { clip-path: inset(0); opacity: 1; } to { clip-path: inset(0 0 calc(100% - 10px) 0); opacity: 0; } }