/* Announced raid (raid-event.js): the client's dragon, ribbon and banner tails around a panel
   in the Bestiary Arena colours (docs/DESIGN.md). Pieces in /assets/ui/event/. */
#raid-event[hidden]{display:none}
.re-banner{position:relative;margin:30px 0 6px;padding:0 0 6px;background:#3d3d3d url('/assets/ui/classic/panel-texture.png');border:1px solid #111;box-shadow:1px 1px #6a6a6a,inset 1px 1px #6a6a6a;font:11px 'Tibia Pixel',Verdana,sans-serif;color:#c0c0c0}
.re-dragon{position:absolute;left:50%;top:-40px;width:192px;height:70px;margin-left:-96px;image-rendering:pixelated;pointer-events:none;z-index:1}
.re-head{position:relative;display:flex;justify-content:center;align-items:flex-start;padding-top:18px;z-index:2}
.re-tail{width:143px;height:44px;image-rendering:pixelated;flex:0 1 auto;min-width:0;object-fit:cover}
.re-tail-left{object-position:right center;margin-right:-30px}
.re-tail-right{object-position:left center;margin-left:-30px}
.re-ribbon{position:relative;display:inline-flex;align-items:flex-start;height:44px;z-index:1;max-width:100%}
.re-ribbon-end{width:64px;height:44px;image-rendering:pixelated;flex:0 0 auto}
.re-ribbon-mid{display:block;height:44px;padding:13px 4px 0;background:url('/assets/ui/event/ribbon-mid.png') repeat-x;image-rendering:pixelated;
 font:bold 13px/31px 'Tibia Pixel',Verdana,sans-serif;color:#fff;text-shadow:1px 1px #000,-1px 0 #000,0 -1px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.re-ribbon-mid b{color:#e8584c;font-size:16px}
.re-body{display:flex;align-items:center;gap:10px;margin:2px 8px 0;padding:6px 8px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.re-portrait{flex:0 0 auto;display:grid;place-items:center;width:58px;height:58px;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.re-portrait .re-boss{width:56px;height:56px;object-fit:contain;image-rendering:pixelated}
.re-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.re-text strong{font:bold 13px 'Tibia Pixel',Verdana,sans-serif;color:#f4d35e;text-shadow:1px 1px #000}
.re-text small{color:#c0c0c0}.re-text small b{color:#fff}
.re-chips{display:flex;flex-wrap:wrap;gap:4px}
.re-chips i{font-style:normal;padding:2px 6px;background:#2b2b2b;border:1px solid #111;box-shadow:inset 1px 1px #000;color:#5fc85f}
.re-actions{display:flex;gap:4px;flex:0 0 auto}
.re-actions #re-close{min-width:0;padding:2px 9px}
/* The announced raid's tag on its card in the Raids window. */
.raid-card.is-announced,.raid-setup-head{position:relative}.raid-card.is-announced .raid-card-text{padding-top:14px}
.raid-event-body>div{flex:1 1 auto;min-width:0}.raid-event-body>div strong,.raid-event-body>div small{display:block}
.re-flag{position:absolute;right:-1px;top:-1px;display:flex;align-items:center;height:27px;padding:0 10px 0 14px;background:url('/assets/ui/event/flag.png') right center/auto 27px no-repeat;
 font:bold 11px 'Tibia Pixel',Verdana,sans-serif;color:#fff;text-shadow:1px 1px #000;image-rendering:pixelated;min-width:120px;justify-content:flex-end}
/* Admin test run: the dark stone flags frame the ribbon instead of the golden tails. */
.re-test{display:flex;justify-content:center;align-items:center;margin:0 0 6px}
.re-test{min-width:0;max-width:100%}
.re-test img{flex:0 1 auto;min-width:0;max-width:28%;height:auto;max-height:37px;object-fit:contain;image-rendering:pixelated}
.re-test .re-ribbon{flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.re-dragon{content:url('/assets/ui/event/dragon-still.png')}}
@media(max-width:700px){.re-tail{display:none}.re-body{flex-wrap:wrap}.re-actions{flex:1 1 100%;justify-content:flex-end}}
@media(max-width:420px){.re-ribbon-end{width:48px;object-fit:cover}.re-ribbon-mid{font-size:11px}.re-ribbon-mid b{font-size:13px}.re-portrait{width:46px;height:46px}.re-portrait .re-boss{width:44px;height:44px}}
.re-why{display:block;color:#e8c547}
/* 2.89 (mockup approved): on a phone the announcement no longer sits on top of the screens (the one-line strip of 2.85.3
   took 79 px and pushed them into scrolling). It opens once in a window, then a seal in the top bar opens it again. */
@media (max-width:600px){#raid-event{display:none}}
dialog.re-modal{width:360px;max-width:calc(100vw - 16px);padding:0;border:0;background:none;box-shadow:none;overflow:visible}
dialog.re-modal::backdrop{background:#000a}
.re-modal .re-dragon{position:relative;display:block;left:auto;top:auto;margin:0 auto -4px;z-index:3}
.re-window{position:relative;z-index:2;margin:0;padding:0 0 8px}
.re-modal .re-head{padding-top:6px}
.re-modal .re-ribbon-end{width:64px;object-fit:fill}
.re-modal .re-ribbon-mid{font-size:13px}.re-modal .re-ribbon-mid b{font-size:16px}
.re-modal .re-body{margin:2px 8px 0;flex-wrap:nowrap}
.re-modal .re-portrait{width:46px;height:46px}.re-modal .re-portrait .re-boss{width:44px;height:44px}
.re-modal-acts{display:flex;gap:4px;margin:8px 8px 0}.re-modal-acts button{flex:1;min-height:28px}
/* The seal in the top bar: the raid's creature, the time left and a red dot; no height of its own. */
.shell>header.app-top .re-seal{position:relative;flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;min-height:34px;padding:0;overflow:hidden;
 background:#1c1c1c;border:1px solid #111;border-image:none;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.shell>header.app-top .re-seal[hidden]{display:none}
.re-seal::after{content:'';position:absolute;right:1px;top:1px;width:6px;height:6px;background:#e8584c;border:1px solid #000}
.re-seal-art{display:grid;place-items:center;width:32px;height:32px}.re-seal-art .re-boss{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
.re-seal-left{position:absolute;left:0;right:0;bottom:0;text-align:center;font:9px/10px 'Tibia Pixel',Verdana,sans-serif;color:#fff;background:#000a}
/* With the seal, the smallest phones (320 px) tighten the bar's gaps instead of cutting the balances. */
@media(max-width:360px){.shell>header.app-top:has(.re-seal:not([hidden])){gap:2px;padding-left:4px;padding-right:4px}
 .shell>header.app-top:has(.re-seal:not([hidden])) .resources .res{padding:0 3px}
 .shell>header.app-top:has(.re-seal:not([hidden])) :is(.wiki-button,.sg-ask-btn){min-width:0;padding-left:2px;padding-right:2px}}